Build an App using ChatGPT | No Code required

in this video we're going to see how you can use  chat GPT to create an application from scratch   by the end of this video you'll not only have a  functional budget tracking application but also   the KN how to create any basic application  using conversational prompting with any llm   I'll be dropping all the prompts that I use in  the comment so you can either follow along or   use them as a starting point for your projects  I've also added time stamp so in case you want   to skip to any particular part please feel  free to do so all right so the first thing   that you need to do is tell chat GPD what you  need so we want to create a budget tracking   application this application needs to allow us  to add our income sources and track our expenses   and preferably also display summaries like total  income total expenses and spending by category for   that uh you can use a prompt to tell chat GPT  your needs you can go with the basic one I'm   going with a bit of an advanced one I will drop  that in the comments as I mentioned previously   so let's run that and another thing I'm going  to do is is side by side I'm also going to run   the same prompt on Google's Gemini we are using  the Gemini 1.5 pro model you can go to a studio.   google.com if you want to access that by the  way so I'll pause the video once it completes   the output I will show that all right so it  seems like it has completed and it has given   me the JavaScript the CSS and the HTML code  but it says in the end that next we are going   to implement local storage interaction blah  blah blah so let's actually ask it to continue all right so it has updated the JavaScript code  as well so now we have all the files that we   basically need I'm going to make this like this  and what we need next is basically first of all   a folder structure something like this and then  on top of that you need a text editor where you   basically open those files right now they're  blank as expected so let's start by copying the   HTML code so this one and save that and the next  thing you want to do is copy the CSS code note   the name of the file by the way it's style.css  you need to keep it the same uh as the one that   chat gbt has given us did we copy the no I think  we didn't so okay let's save that next thing is   the JavaScript code which is supposed to be  script.js which is exactly I what I named the   file so let's go there paste that and it also  was missing the implementation for local store   interaction Etc so we need to add this additional  code at the bottom as well so let's do that over   here and that is pretty much it now if you  open the index.html file we're going to see   the application and be able to use that in  our browser but before that just to set the   expectations I want to quickly mention that the  application is not going to be perfect it's going   to have visual flaws that is my expectation and  there's likely going to be some parts which have   bugs and that's where the iterative approach  to development comes in uh when you're doing   that through chat gbd you will tell it what the  issues are and you will ask it to improve those   things so this is the first iteration it's not  the best but uh it gives us a starting point we   have a few categories over here for income and  expenses let's try adding an amount add income   so it correctly adds that let's try to add an  expense and it's adding that correctly as well   and it's also showing us the balance but we don't  see any chart so there's likely a bug over there   if I go to inspect and then go to console I can  see that there's this uncarded exception so what   I'm going to do is simply copy and paste that over  here all right so it has given me a fix for that   and it has given me an updated version of the  HTML code with the fix so I'll just copy this   go over here and go to index.html Just paste that  like this did anything even change let's quickly yeah let's do it like this and refresh all right  so the chart is loading it's a pretty ugly chart   if you ask me but it gives us a starting point so  you can iteratively improve that I'm just going   to give one example of that which is I'm going  to try and make it visually a little bit better   so I'll pause the video and then show you that  so this is a very simple problem that I'm going   to use let's hit enter and see what improvements  it makes all right so it has provided me with the   updated JavaScript code so let's quickly copy that  let's move this a little bit over here script.js   I'm going to paste that here then it has updated  the CSS file as well so let's paste that as is   over here and then HTML let's copy and paste that  over here so the updates have been made let's try   refreshing this and you can see that it visually  looks much better so we now have a few icons here   and there and the overall uh look I would say is a  little bit better at the very least and if you go   to inspect I think there's slly still uh an error  if you want to alternatively improve that you can   basically mention chat gbt what you're seeing and  what exactly is it that you want improved and it   will do that for you but I'm going to stop at this  point because I want to move to the next stage   which is how you can deploy this onto the web so  over there you basically have multiple options you   could deploy your code into a GitHub repository  and host that on GitHub pages but we're going   to use an alternative which is tiny. host so over  here what you want to do is use the zip option and   these are the files that you have for your project  you want to basically compress them uh like this   and we're going to upload this ZIP file over here  to be able to proceed you need to sign up you have   multiple options for that so I'm going to quickly  do that and then uh show show you what appear is   next perfect so as soon as it signed up just like  that our app is now live on the internet so if I   go to this link I should see what I was seeing on  my local browser so this is something that you can   share with other people now before we move forward  I just want to quickly share with you two quick   things first is the output that Gemini basically  created for us I'm going to copy paste that into   our files and show you what the application looks  like based on the code that g provided and the   second thing is another application which I find  to be the absolute best for generating front end   designs I mean it provides the code for that as  well and uh the prompting that you have to do   for that is actually a lot more I would say basic  or easy but first let me pause this video and I   will show you what the code is the Gemini produced  all right so I have replaced all the existing code   with the code from Google's Gemini let's open the  index.html and have a look okay so this is what we   got uh the vules are not that great but with Char  gbt we did some iteration so let me do one quick   iteration with Gemini all right so the iteration  is done I have the updated code I pasted that in   the files let's refresh this and see what we get  okay so it's good it's not the best and it seems   like we now have another error which is I think  with the graph so I just wanted to quickly show   you the comparison between the two llms in getting  that you can also try CLA for this by the way and   see how that compares but the next thing which is  the main thing which I wanted to show you is this   one v.d and over here uh you can quickly simply  just click on New Generation and over I'll go   with for example budget tracking application  that is all I'm going to enter and let's see   what the UI is that it generates for us and you  can again iteratively improve the user interface   that that you see by providing it feedback in the  English language uh through this visard that we   have over here so let's see what it generates all  right so it has given us three options and they   look actually pretty good why can't I see the  second option oh it was loading okay so there's   first this option uh you see the charts at the  top you can search your transactions and then   at the bottom you can add transactions and then  there's this third option which is similar to the   second one I don't really see what the main  difference is okay the recent transactions are   where they see showing and then here's the first  one which is the dashboard this is what this one   looks like so it's created something which is a  lot more visually appealing and you can also see   it in different uh sizes as well how it would  look on the mobile phone how it would look on   the desktop and tablet Etc so you can also get the  code for that over here so the component. jsx file   style and the layout file as well you can copy  paste this code and use this as your front end as   well of course you will need to add a back end if  you want to store any of the information uh that   you're basically adding over here otherwise it's  basically staying within the browser's current   current uh context window let's say so that's  what I wanted to show you and and hopefully you   have the same opinion that this is way better  than what Chad jpd or Gemini was able to produ   for us so the last stage is we are going to deploy  this application the one that we had at the very   beginning the very basic one and we're going to  convert that into a mobile application for doing   that you basically have multiple options you could  go with for example Apache Cordova or flirter you   can easily wrap your web application into a mobile  application this that part might be a bit more   advanced I'm going to go with something even more  basic you can go with this application which is   web into app and over here we're basically simply  going to copy this link of our hosted website and   provide that over here give it a name let's call  it budget tracker verion zero and provide some   other information and then simply click on next  you're going to need an icon splash screen and   other things if you want to add that but for  now I'll just quickly go on make application   free Android APK you will need to register over  here I will quickly do that and then show you   what appears next so once you do that you're  going to get to this screen where you can just   simply click on make application again and it's  going to generate the APK file for you once it's   done simply click on download from over here and  we'll go with download for free all the zip files   and in these files that it has generated if you  go to Android you're going to see the APK file as   well so this is the file that you basically need  you can copy that put that in a Google Drive and   then open that from your Android mobile phone and  simply click on that to install the application I   use an iPhone so I can't show you that but link a  video that you can follow to install this APK into   your Android device so remember this process is  just the beginning for advanced programmers think   of this as sort of like a solid foundation to  build upon for everyone else just enjoy the power   of uh creating functional applications without  getting bogged down in code you can use the   alterative approach to fix any errors that appear  or to add any features to your code or to add any   visual enhancements that you basically need to  make and don't forget to check the comment section   for the prompts that I used and feel free to  modify them as you like if you found this video   helpful give it a thumbs up subscribe for more  content like this and let me know in the comments   what you like to see next happy coding or I  guess happy prompting see you in the next one bye

Channel: Junaid Khalid

Views: 2,490

Keywords: Using Google's Gemini for app development, chatgpt app development tutorial, build app with chatgpt, how to make app with chatgpt, Step-by-step tutorial for AI app development, How to use ChatGPT for coding, Front-end design with AI tools, AI-driven app development guide, Comprehensive AI app development tutorial, coding with chatgpt, how to use chatgpt for coding, no code app development, no code app builder, No code tools, how to create an app without coding, no code

Id: h8bUUalPkpw

Length: 11min 45sec (705 seconds)

Published: Thu Jun 20 2024