教你如何利用AI快速开发一款价值1万美元的App(De...

·第一步，we'll come up with a viral app idea.

·第二步，we'll use mobin to legally replicate the designs of some of most famous apps in the industry.

·第三步，we'll structure our app and use cursor ai to build it.

·第四步，we'll use super base for the database and backhand and we'll set up deep seeks api.

·第五步，as the main feature of our app.

·第六步，finally i'll show you how to upload your app to both the app store and google play store.

·第七步，i've never seen anybody else show the entire process of building apps with ai.

·第八步，here on youtube.

·第九步，so this video is the only video.

·第十步，you will need to get started.

·第十一步，how to actually find a viral app idea.

·第十二步，this is by far the most important step and finding a viral app idea.

·第十三步，all about solving a real problem in a simple way.

·第十四步，but to do this your idea must meet these three criteria once you understand these.

·第十五步，you'll start seeing opportunities everywhere.

·第十六步，so first of all you need to identify a common problem.

·第十七步，find a problem that is extremely frustrating or emotional.

·第十八步，because people download apps to solve their pain points.

·第十九步，remember to always write down your app ideas immediately when you come up with them.

·第二十步，because if you don't you'll just forget them.

·第二十一步，and once you have an idea.

·第二十二步，you can actually chat with chat gpt.

·第二十三步，and ask him if he thinks the idea is good or not point.

·第二十四步，number two.

·第二十五步，keep the app simple.

·第二十六步，your app's core functionality should be able to be explained in three words or less.

·第二十七步，here is a video of blake anderson explaining this very well.

·第二十八步，you should be able to describe the unique nature of your app.

·第二十九步，respond to girls.

·第三十步，umax face analysis.

·第三十一步，calai photo.

·第三十二步，calorie counter.

·第三十三步，really is that simple.

·第三十四步，and the last criteria to find a viral app idea.

·第三十五步，is to make it shareable.

·第三十六步，your app should be so helpful to the pain point.

·第三十七步，that the users just have to share it.

·第三十八步，so here's the app i'm building in this video.

·第三十九步，working 20 hour days i realized how unproductive multitasking actually is.

·distractions like emails constantly break my focus，which means i'm no longer in a flow of deep work，so that's why i'm creating this all in one productivity tool that helps you sort and prioritize tasks。

·two deep work on one task at a time，and three chat with an ai to easily add tasks from the chat now the next step to find viral app designs that we can legally replicate and we're going to use mobin which also happen to be the sponsor of this video。

·so right now i'm in mobin and what you're seeing is literally a gold mine of 100 thousand plus screenshots from apps like dual lingo spotify netflix and a lot more。

·and here's exactly what we're going to do we're going to steal their proof designs and user experience，and let her sir ai turn them into code for us。

·because there is literally no reason to try to reinvent the wheel when we have access to proven app flows from big companies。

·this is exactly what we need now pay attention，because this is the exact process i use to find the designs for my apps click on the search bar and go to app categories。

·here you can choose the category that best fits your app since i'm creating a productivity app，i'll select that category now from all these designs i'm going to pick one that best fits my app idea。

·and i think this one is the perfect choice and we're not just going to admire these designs，we are actually going to steal them but of course not in a shady way。

·so now let's click the copy button in the bottom right to grab the entire flow of the app。

·then if we click the download plugin button it will take us over to figma，where we can open a new file and click on run。

·and now if we click inside this box and press ctrl v，it will paste the entire flow of the app in figma。

·and then we can clean up our figma file by deleting all the pages we're not going to use。

·alright so now we're going to do something super important that is going to save you hours of frustration。

·later on we need to create what i call the brain of our app。

·and this part absolutely crucial i've literally wasted weeks of work by skipping this step before next。

we'll structure the base of the app cursor uses powerful ai models like gpt4 and claude which are incredibly efficient workers.

but they need clear instructions to perform at their best without a well defined plan for the app they'll start making decisions on their owns.

so here's what we need to do.

we're going to create two important files that will guide cursor ai step by step and i'll be using chat gpt to help with this process.

let's start by creating the first and most important file which is the context file.

this file will explain everything about our app to the ai.

here's how you can create it open chat gpt and write down all your thoughts about how the app should work be as detailed and clear as possible.

consider the entire flow of the app from the moment it's opened to the very end just as i've done here.

once you've written everything you can ask chat gpt to organize it and make it more structured.

so it's easier for the ai to understand.

i'll leave the prompt i just wrote in the description of the video.

so you can just rewrite it for your own app and then just copy the context here.

okay.

so let's start building the app using cursor ai.

now if you haven't downloaded cursor yet head over to cursor com real quick and grab it it's completely free.

and they even give you a two week trial of the pro version.

if you want to try it out open cursor and open the folder for your project.

i've already created one and named it deep work ai inside that create another folder called docks.

then create a new file called context md.

if we now press ctrl l this opens up cursor's ai.

which is like chat gpt.

but way better because it can actually see your project files by simply tagging them.

so now paste in the context we got from chat gpt and ask him to write this better for a markdown file.

and then press apply to add it in the context file.

then just quickly go through the file to make.

sure it includes what you want.

example like i did here.

you just want the sign in to be with email.

and i know how much time it can take to figure out the right text stack that's why i've left the exact one i use.

·so you can just copy it exactly as it is because i've already gone through all that pain.

·so you don't have to then just paste it in the context file as well.

·so now let's write this in the cursor interface.

·give me the full database schema and the optimal folder structure of the app and add this in the context file.

·then and this is super important tag your context file by typing at and selecting files by pressing enter.

·and then select the file.

·this tells cursor ai to use your context file as reference.

·and now just add the text to your context md file open your terminal and type this command npx create expo app at latest dash e with router.

·then give your project a name.

·i'll call mine deep work ai.

·when it's done loading.

·let's drag the docks folder we created right into our new project folder.

·then type cd and your project name to navigate into its folder.

·if you now type ls you will see your current file location.

·so let's run the app write npx expo start and it will initialize the app.

·then you'll see a qr code pop up.

·so just grab your phone download the expo go app and scan this code in your phone camera.

·and just like that your app is running on your phone.

·i know it looks pretty basic right now.

·but isn't it fun to see it working.

·let's keep going now.

·press control.

·i to open the cursor composer and the composer is the feature.

·where it writes code for you just by writing in playing english.

·so let's ask it to build the app step by step by focusing on one task at a time.

·and then tag the context file.

·now he just made the development plan.

·which the ai will use to know exactly what to build.

·so now let's ask him to start with the first task press.

·except and let's press r in the terminal to reload the app.

·so i'll just copy the installation command and press ctrl shift back tick to open a new terminal.

·then use ls to list files.

·and then let's again use cd to open the project folder.

·and here we'll execute the command to install the required ui library.

·it's done installing head back to the terminal which is hosting the app.

·click inside the terminal and press r to reload the app on your phone.

·all right now let's continue building the app just right continue in the composer now he will set up the configuration with super base for the database and authentication so when he is done let's accept and head over to superbase com quickly make an account and then let's create a new project i'll call it deepwork ai now copy the public anonymous token head back to cursor and navigate to the dot env file remember to keep this token private and in this file we'll need to paste in the token in the anon key then go back to super base and copy the url and paste this in the url as well if we now write continue in the composer one more time we'll continue building the login and sign up pages so let's accept and click inside the terminal and press r to reload the app and the same as before when you have an error copy it paste it in the composer and prompt him to fix it so we need to install a library just copy the command and head back to the other terminal paste it in and run it there when it's done head back to the terminal that is running the app and press r nice now this is how the app is looking we've sat up the entire user authentication flow with both sign in and sign up pages and since we use superbase it even sends out a verification email so if we now log out and try to log into the account we just made you'll see it works as well and if we go to superbase now under authentication and users we can see the account i just made in the apps so i spent the last 30 minutes continuing to build the app and this is what it looks like right now we can create new tasks give it a title set the priority of the task give it a description and set a deadline for when the task should be done and now if we click on the task we can start the focus timer which then counts how much time you've spent on the specific task we can also mark it as complete as you can see the app does not look good yet so now let's improve the ui head back to mobin and let's go through the designs we want to use for our app when you find pages you'd like to take inspiration from press c

·to copy them head back to cursor and paste in the pictures in the composer chat and continue doing this for all the inspiration pages when you're done.

·let's ask the composer this use these pictures as inspiration for my app design in the entire and then let's tag the code base.

·this will have cursor look through the entire project and when it's done click accept and now.

·let's have a look at the app again.

·just like that the app looks 100 times better by simply copying an app.

·that's already invested a ton of money in optimizing their design and user flow.

·if you want to use mob and yourself i put the link to their website in the description.

·now for setting up the ai chat using deepseak api.

·let's write this in the cursor composer build the ai chat feature from at development plan.

·just accept it and let's navigate over to the env file.

·now we need to copy the deepseek api key placeholders.

·here into the env file.

·and then we need the deepseek api key from platform dot deepseek com and paste it here in the nv file.

·and remember if you are confused about anything you can just ask the cursor chat.

·you open it by pressing control.

·now let's reload the app again by pressing r in the terminal and let's check out if it works.

·here we can see the new ai chat and if i now write.

·i need to buy a new toothbrush and tidy my bedroom and submit great.

·the ai feature adds tasks on the first try.

·so now for the moment you've all been waiting for to be able to upload this app on both ios and android.

·we need to do this and i'll show this quickly for you.

·let's ask the cursor chat.

·how do i upload my expo app to app store and play store and keep in mind you need to buy an apple developer account for 99 dollars annually.

·and a google play developer account for 25 dollars one time fee.

·then let's open a new terminal and type in the command npm install ges killi.

·which stands for expo application services and when it's done in installing type in es login.

·this will ask us for your username and password.

·so head to your web browser and search for expo dev.

·quickly create an account and then head back to cursor.

where we'll login with the same username and password we just created on expo dev perfect now let's run this command ease build colon configure then press y to continue and select all if you want to upload the app to both ios and android if we now head back to expo dev you'll see that。