Building an AI App with ChatGPT, React Native, and NextJS (tutorial)

what's up not just developers welcome back to a new live stream in November 2022 openai launched a new conversational AI model called cha gbt and the internet blew out it everyone was talking about it but it was for a good reason I spent uh I went deep into the rabbit hole of what else can charge be the answer and it was truly amazing the possibilities and the answers that this AI model is giving from preparing meals from recommending business ideas complete business plans to recommending even writing blog posts and ask for encoding questions it can do everything so after messing around for a couple of hours with it I decided that it's time to get our hands dirty and start using charge EBT in a full stack application because that's the best way we can learn something new so that's why today we're going going to build a chat application an application with chat gbt with react native and next.js this is going to be a cross-platform application both for web and for mobile because I want to show you how we can use this uh charge ability in our projects So the plan for today um the plan for today is to start by building a web application and the application that we're gonna build I decided that it's going to be a Christmas gift generator because Christmas is coming and I myself uh struggle thinking about ideas of gifts for my uh for my family and friends and this is going to be a tool that it's going to be useful for me as well and I think that other people will be able to use it as well but nonetheless this is a educational project and I will treat it so where we'll have step-by-step guides in order for you to also be able to build this application together with me for the web application we are going to use next.js which is based on react.js and if you're building uh rack native applications you will manage to follow along this build because it will really be a very simple to work with nexgs and we will not have to mess up with it a lot um after that we will deploy the application uh so that it will be accessible by anywhere for that we're gonna use versal and it's super simple to deploy next.js application on versal after that is done we will have a web and also our API that can generate Christmas gifts and it will be time to build a mobile application for that we're gonna use react native with Expo because that's the easiest and the best way to build mobile applications and um yeah because our web application is very Jazz we're going to be able to reuse a lot of code in our react native application um so yeah we're gonna manage to build all of these applications today in this live stream and I think that the live stream is going to be around two hours uh let's see by the end how long it will be but what I can promise it is that you're definitely gonna learn something new and uh you will get excited about this chargeivity because it's uh mind-blowing what it can do and hopefully you will think about some ideas and build some projects with it um on the side uh stay tuned until the end I'm gonna give you some ideas of how you could use charge GPT in uh in your application to to start like a startup or to start a side project that will uh use that and provide some value uh so we're gonna discuss about these ideas at the end because I couldn't stop thinking these days about what else can you build with it how can you do it because it's so General and Broad and it can do everything the problem is the right approach how to use it all right so before I we go into the coding stuff which will happen in a couple of minutes let's first of all cover what chat GPT and how we got here so uh when talking about chbt we should definitely start by mentioning about the openai company which works on a lot of exciting models I'm pretty sure you saw um the the result of your model models out there in the internet so for example one very popular is that daily 2 model that can generate images and you definitely saw some of these images on the internet it was fully created by an AI and when you think about it damn like what uh what um era we are living in uh these are regarding them images however there is another part of artificial intelligence which has to do with understanding languages and that part is called natural language processing or short NLP these AI models yeah like their goal is to basically understand uh text to be able to understand like the meaning in the text to summarize it and do a lot of our processing on that text this is very important because we have a lot of information a lot of data out there on the internet uh as a text format and the data grows exponentially so we need this kind of algorithms in order to be able to process it and to make sense of all of the data openai years back introduced GPT to algorithm that was an NLP model and after a couple of iteration they launched GPT free model that was based on the the previous version but it included way more parameters when the model was trained so more parameters means that the algorithm will be more General and will be able to answer more broad questions and GPT now evolved into cha GPT judge betiya is based on LGBT free algorithm which was fine-tuned for this specific use case and um yeah to explain what it is I will just show you it's a conversational API model it's a conversational AI model that basically you can ask something and it will it can give you a response back and the question that that you can ask literally can be anything so it can range from like explain Quantum Computing in simple terms and chargeability will explain you like very simply uh this to creating a meal plan for a week for a specific number of calories and also to be keto and then it goes ahead and does everything for you I also went ahead and tried some coding questions so you simply ask how to render a list of posts in react native and when you get the introduction to Flat list some examples of how you can use flat list with code that actually works and also down below some explanation like crazy when I saw this like it's really it's really powerful um it yeah I I'm I was speechless like for the last couple of days uh we within the team like we're sending like all of these screenshots that we are asking and like uh seeing like the potential of this uh of this model so if you are like this at the moment um I understand you and I hope that I made you interested in this uh model and now we can go ahead and start using it into an application um I think that this is the moment where um a lot of people are having some troubles like okay I understand the model I understand what it does but how can I use it actually to build an application how can I put it into a rack native application or a nexjest application so that's what we're gonna do today and if you're new here on the channel hi my name is Vadim and I'm sharing my experience and my knowledge that I accumulated over the last years working in different companies uh as a software engineer and now yeah I'm doing that here with on YouTube sharing my experience so if you enjoy what we are doing at nodejs.dev make sure to subscribe to the channel make sure to turn on the notification Bell not to miss any future videos uh and yeah make sure to not be part of the 97.8 percent of people that are watching the tutorials and have not subscribed this takes only two seconds and if you can do it now I will be very much uh I will be very very happy and I will appreciate that and with that being said I think we can get started with our applications what do you say hi everyone in the live chat how are you doing today guys are you excited about chai gbt or is it only me because yeah from from the time like that I discovered it like I was constantly asking it like something um have you played with it all right um so let's um let me know what is your opinion about chargeable if you have played with it and uh yeah like how do you feel about it uh will it replace our jobs as developers interesting I don't know um but while uh you're saying hi in the chat and also saying where are you joining us from today uh I'm gonna go ahead and explain you how you can follow along today's build so I always encourage to actually build the applications that I'm doing here together with me because that's gonna be the best way to that you can accumulate it accumulated knowledge uh basically learn it yeah so to do that I prepare for you as step-by-step guide that will help you along the way and you can access it at this URL I also uh you can find it in the description below so let me open it up and where we have like all the steps that we have to take uh to build our two applications where export the mobile one and the web applications so I'm gonna put it like this and we can yeah the first step when you get on this page make sure to download the asset bundle with uh directory will include the PDF guide the dummy data images and all our information that you will need uh to to make your journey easier to build this project in order not to have to write all of this and also I included they are all the source code so if something is not working for you you can easily compare with our application that we are building uh so make sure to download it here and uh we are at the getting started with chat GPD all right so um hi from me in the hello Argentina hello guys hello David mind blown by chajibiti I want to replace it with my girlfriend yeah um it feels like like a human behind behind the screen let's go John hello I just had this idea like a couple of days ago and now I'm very amazed to see a new tutorial on it yes we are reading Minds foreign okay guys so um let's hope that uh the open AI API is not gonna give us any troubles because these days we are having a lot of load um so yeah let's give it a try if we're gonna have some issues at the moment later when you see this video I think they should have um yeah like the API should work fine at the moment it's very loaded and sometimes it gives some errors now errors but yeah like throttling so let's start by logging in or creating a new account with openai and I left a URL here and that will go here I'm gonna go ahead and continue with Google and here we have it here we have a dashboard of openai this is not only about chat API it's the set of all the models all over AI models that openai is building including the the daily for images and others as well here at the top we see introducing two gbd research release you can press try it out and that will open them yeah a window where we can interact directly with it so for example let's ask let's ask him something um what should we ask let me know um what uh no let's see react native versus flutter foreign we will wait for a couple of seconds to until it thinks these days yeah it takes a bit of time and right away it gives information about truck native flutter and so on what are we doing today today we're going to build a Christmas gift generator uh so for example we're gonna ask chagibiti a question like this so just or recommend a free Christmas gift ideas Christmas come on I should reset it it is and let's see uh we're gonna use chargerbd for that we're gonna ask uh gift recommendations and then we're gonna display it in our application but it's not going to be that easy we're gonna add a lot of parameters to make the recommendation personalized not that um uh general for example this is very general um gift ideas but if I'm gonna add more details like recommend free Christmas gift ideas uh for uh I don't know 24 year old woman um that will look that will react will understand the context we'll understand everything and we'll recommend like specifically with those parameters hello much love from Sierra Leone hello network error yeah like the API is is having troubles serving uh in the first five days we had over 1 million users using chargebt so yeah you can understand like in the first days of the release like video API will will struggle but that that's a good thing for for for a technology so um yeah I'm gonna stop here uh go ahead and play with this chat and you yeah like go crazy go wild and ask different kind of questions ask random questions uh and you will see like what it is capable of I'm gonna stop here with experimenting here because we will build the application so uh yeah the next step will be to open up the quick start documentation of openai and here they have a very good documentation you can have it open side by side to make sure that nothing is updated and also I recommend going through this quick start uh they have like very prompts that teach you interactively and Advance like we also build an application um I have summarized all the steps that we need to get started and build this application from the openai quick start and I have summarized it here so let's go ahead and start by loading the quick start application and for that we're gonna clone that git clone we're gonna copy the git clone command and let's open up a terminal I'm going to do it like this so it you can see it uh one second let me just create okay clear uh navigate to a to a folder of your choice where you keep your project and here let's go ahead and paste the command uh to clone the openai quick start node application okay that is done and now we can open it up inside um Visual Studio visual visual code Visual Studio code um or in any other editor of your choice let me open it here let me zoom in and from our terminal let's go from our vs code let's go ahead and open a terminal you can do that at the top going to terminal new terminal or by pressing the shortcut uh command and then backtick so from here we will start by installing the dependencies so let's go ahead and run npm install this project doesn't have a lot of dependencies so if you open package.json you'll see it has only that next which is nextgs it has the open AI which is the uh no the node.js library that gives us access to open AI models and also react and react Dome Dome so it's a very simple minimalistic application that will not confuse you after our npm install is done let's go ahead and run our application so we will do npm start or npm run Dev to run it in development mode we should see ready and we should see started server on this port let's go ahead and press on the local host or in browser go to localhost double dot Port 3000 and that should open our first cha GPT application this is a name generator so by providing the name of a the name of the animal um our application will generate um dog names so if I press generate names nothing happens because there is one more step there is a step of providing our API key so open AI knows um yeah authenticates us for that we have to provide an environment variable there is a DOT Yen dot example file in the root of our project let's go ahead and copy this file and rename it to Simply dot end dot end without anything the dot and file serves as the environment and here we have an open API key what we have to do is we have to go back either in the documentation in that documentation if you're following the documentation from open AI when you get to adding your API key here you will see a button create new secret key so I'm going to go ahead and create a new secret key here and I'm gonna paste it in our DOT Yen if you're not following the documentation you can also go to your account uh and you can go view API keys from here you can press the same button create a new secret key to generate a secret key for your project a secret key I'm gonna go ahead and restart the server to use the new variables so first of all stop the server by pressing Ctrl C and then let's run npm run Dev once again all right so where are we okay let's go ahead and restart reload our localhost Port 3000 and let's try again uh generating names for the dogs and here we have it the amazing dog the dog Wonder The Incredible Dog what about the name for a cat generate names Captain a sharp claw agent fluffball and so on uh for a fish anything you can input here and chargeability will generate uh names for us I guess you're not supposed to uh to expose your secret don't worry I'm going to delete that secret after the live stream is finished but yeah that's a good tip uh never expose or never show your API keys and that's on this topic that's another important thing to understand how we are using open AI but I'm gonna explain that after a couple of steps in order to show you a bit of code to see how it works and when I'm gonna show you um why we how how to um keep your API key secure are you guys following along are you trying yourself um and do you manage to do are you finished with the pet name generator because this is our first step the next step is to go ahead and build our Christmas gift generator Christmas gift generator uh what I want to do now is I want to yeah before getting into the Christmas generator I want to show you a little bit about the application the next just application that we have here so um where do we start the way next just works is that there is a folder called pages and this folder contains uh files that are mapped to web pages so in this case because we have a index.js this index.js will be rendered when we access them the root of our um of our website or if we have here index vets no it's not gonna do it but yeah like the index is our route um so let's have a look at what we have here in the index so what do we have I'm gonna look at what do we render so what we see there is the image with a dog icon then there is our form that has one input uh the input of the animal and we have a submit button that will submit the form now let's follow the on submit function and this function is defined here and what it does it simply uses the fetch to fetch the data from our API it fetches the URL API generate it sends a post request and it uh specifies the animal inside the body of the request after that it gets the data it sets in the state as a result and when the result when we have a result it is displayed down below below of a form now where did we get this API generate how do are we fetching and what we are fetching here well if we open our pages one of the folders here is the API the API folder is inside the pages is a very specific folder and the files inside this folder are not treated as Pages they are treated as API endpoints and by having API and the generate file what we can do is we can do get requests at the API slash generate and uh at the moment it will give us an error because we have to send some data here and we're gonna see in a moment how we can test directly this API endpoint but yeah this is the most important part that I want you to understand like in the API this is the generate.js file is an API endpoint and that means that this code will be executed on the server side as a normal like node.js API um and and all the communication with our open API is happening in this generate.js because our connection with our open API should happen on the back end on the backend side on the server side so what do we have here let's look through the code on in the generate.js because this is where we interact with open AI API so we first of all import our library and we Define the configuration using the configuration we create our API client we specify the API key to know uh yeah like what is to to authenticate ourselves and what we are doing is we are exporting a function a function that will receive a request and will send a response in this function that will generate dog path names what we are doing is we are using a create completion call to the API and basically we're saying like based on this prompt give me uh some recommendations give me a completion and here I want to stop just for a bit to show you how it how uh charge apt works from a high level perspective it's uh quite simple to understand because there are not a lot of terms and not a lot of things there are two two basic concepts to understand of how to interact with cha gbd the first one is a prompt a prompt is basically um a sentence something that we are sending something that we are asking then by sending this prompt to open uh to a charge BT it gives us a completion it basically understands the context understands what we want from him and completes our text so there are two things a prompt and a completion that's why here what we are doing is we are creating a completion using a prompt using the animal type that we provided for the body yes we are doing some um processing on this prompt in order to have uh desired outcome to provide enough context so we see that by providing an animal here what we are doing is we are asking cha gbt to suggest free names for an animal that is a superhero here we are also giving him some examples examples are very good in order to show chargeability what you expect as an answer so whenever possible use examples of what do you expect from from it from for a different kind of parameters and after that you say okay if animal is cat that would be some good names if animal is good dog that would be some good names but if animal is the one with the user chose what would be the name that's why we have here names double dot and um Chad gbt will try to complete this text matching like they have the same structure does it make sense so far um Raj yuvraj is asking me hi what is the update on the hackathon winner price uh we sent an email to all the winners and we are expecting the answer for everyone and went to group everything together and to send to the sponsors and you should receive that prize next week next week is our deadline hopefully that answers your question okay back to our project um so we have here our main pad generator and as I was saying let me also show you how we can use Curl to query our API now that we are running our um our next JS application um next yes is both responsible for the front end inside like the pages index for example for the client side and also for the server side inside the api.generate so for that reason we can use Curl to send a post request you can copy this command from the guide here I have it so we can uh come on we can use Coral to post localhost at Port 3000 slash API generate we are providing some headers specifying with the content type is Json and also the data the data with animal dog and if I do a quarter request there we will see the result Amazing Spider Dog Incredible Hulk and xdog perfect that means that we have both a web application at the moment and an API um let's go ahead and do what to get we didn't change much okay come on no yeah so that was the quick start from openai uh I think it covers quite well how you can use it with nextgs but we want to take it to the next level we wanted to have both next.js and a mobile application so and also let's see how we can build a Christmas gift generator we're gonna build a little bit more complex application to see how we can use multiple parameters and feed them to the prompt that we are sending to charge EBT in order to get the best completions and the best answers from it foreign write me an email at support not just.dev and I'm gonna get back to you uh and let I will also note it down all right um so for the Christmas gift generator we're gonna use the next uh prompt uh so let's copy it and I will try to put it in the chat here and this is um saying so just free Christmas gift ideas between 50 too many requests okay let's try again yeah I'm asking it suggest free Christmas gift ideas between 50 and 100 for a 30 years old man that is into golfing business and traveling and as you can see I have added some context to this query in order to get uh results as close to reality as possible or as helpful as possible and as you can see it's already something related to uh to the hobbies that the person has to the age and also make sure it's between these price range so how helpful is this like right away we see some great ideas for a person that we just described so as you can see uh we what parameters do we have we have the price range we have the age of a person we have the gender and we also have some Hobbies perfect this will be the parameters that will change the dynamic parameters that will change um that will change with average request basically foreign so um let's go ahead and do the query that will generate our gift ideas for that we can either uh edit the pad name generator or let me show you how we can add a new API endpoint so as I was saying like all the files in the API folder they are considered and they are mapped to an endpoint so if I go ahead and create a new file here called Gene rate gifts dot GS and for the logic of this file let's go ahead and get the inspiration from here from the generate I'm gonna copy it here and what will we do so starting from the generate prompt um the hour prompt as I said is not gonna is going to have a couple of parameters I said that we have a price the price range so for that we will have price mean price maximum uh what else we will have we will have a gender of a person we will have a age and their Hobbies we serve five parameters of our prompt now we don't need the capitalized animals we will simply return let's go ahead and grab our uh prompt but suggest Christmas ideas and in the return statement I will simply put it there now we're gonna go ahead and replace the static values with our parameters that we will receive in the generate prompt function for example instead of 50 50 here leave a dollars there we're gonna put dollar sign and curly brackets to access um a variable a JavaScript variable and we're gonna get the price minimum here so this will replace with the actual Pride that we are sending in our prompt we're going to do the same with the 100 here I'm gonna replace it with the price Max uh for 30 that's going to be our age for a man that's gonna be our gender and lastly instead of traveling business and golfing I'm gonna put the Hobbies here just like that can I split it into two lines hopefully that will work or I will leave it in one line I don't know okay so now we have a generate prompt um the generate prompt is called inside the uh the function that is responsible for our request basically the function that will handle our request so when we call the generate prompt here we need to send all of these parameters price mean price Max gender agent Hobbies instead of always getting them from the body I'm gonna go ahead and destructure all of this parameters from request dot body and I'm gonna simply copy the list of um parameters I'm going to copy them from here and paste them where we destructure now what we are doing here we are basically taking the request.body.price mean request.body.pricemox and so on and we can use them to send to the generate prompt uh make sure to to follow the same word there or simply we can copy them from here and paste them here now we're gonna call the generate prompt using these parameters that are coming from our request.body um in order to make sure that your prompt is correct we can also go ahead and do console log um let's let's save it into the prompt into variable prompt from like this let's console log it first and then we're gonna send it to our create completion as prompt like this uh and let's go ahead and also maybe console log uh but we will see the result we will see because we are sending it as a result of a query okay now with this um with this code that we have done here we can go ahead and copy there where is it we generated the paper and point here you will find on the the code that you will need for these functions and yes I was looking for the curl command to test our generate gifts endpoint so let's copy it from here not to have to write it from scratch foreign what's going on and I'm gonna paste it here so what I'm doing here is the same way as I was testing the previous endpoint for generating dog names or pet names now I'm querying the generate gifts API endpoint because that's how our file is called if your file is called a bit differently then make sure to update the URL that you are querying and what we are doing is we are providing this data with a price minimum price maximum uh for for a woman of age 23 with these Hobbies drawing traveling and coding let's press enter and hope that we don't have any errors result and one at Travel sketched Sketchbook and a pencil set the problem is that it stops at N2 like the second one why is that that's because the by default the number of tokens which relates to yeah the number of tokens that it returns is limited so we can adjust it by using Max tokens and we can provide for example maximum uh basically 2048 tokens so now if I'm gonna do the same request I should see like a more um a bigger result like more tokens so we see Wacom sinting 13 HD interactive band display because I said it's into drawing then number two I don't know where it is but number three is here coding for dummies this is a great gift for anyone who is into coding it's a great way to learn the basics of coding and it's a great resource for anyone who wants to learn uh about coding awesome so that means that um our prompt we designed the prompt correctly and based on a list of uh options and parameters we are getting some results back that's amazing because that's the first habit we have to take um what uh what else um let me take a short break and explain you with these tokens um the tokens like simply put if I can show you here tokens the tokens are parts of words they are not complete words because um usually more complex words we are split into multiple tokens for example um Butters coach is split into but there's quote and ch uh and so on so yeah usually by um so don't confuse number of tokens with number of words because words will always be a bit more than tokens now tokens will be more than words because uh some words are composed of multiple Parts like basically okay um and also and also regarding the models here you can see a list of models that are available um models here so here yeah is a list of models that you can use um you can read more about them there are more General models that will answer you more general questions wherever are more fine-tuned for a specific need for example the Codex model is specifically trained and fine-tuned to understand generate code so everything that we ask about the code is executed by the Codex uh there is also content filter that is fine-tuned to detect whether text may be sensitive or unsafe it this is very great way for automated moderation if you are building um an application where your users can generate content um so yeah like from the gbd free family there is The DaVinci 003 and I do not know why in our starter project we are using the 002 so let's go ahead and choose the model text DaVinci zero zero three to use the latest version and yeah everything should be working as it was working before yes also it gives this one give some price ranges as well as you can see um even more the ideas are kind of the same no the ideas are also different but as we can see here it also includes price range which is great all right so um what we have done so far we have created the API endpoint that is executed on our server side that will receive as a parameters some options about a person it will do the connection with the open API with openai API and it will get a list of gift recommendations based on those parameters and we'll return it back through Json so having this API endpoint now we are free to use it anywhere the first place we are gonna use it is inside our web application in a similar way as we have this name generator with a form we will build another form for the Christmas gift generator in the video we're also going to build a mobile site application that will connect to the same API endpoint that we just created the generate gives idea and we'll generate uh will also like yeah provide like these functionalities uh why I always mentioned that this is executed on the server side is because uh from our client side from our for example web application we should not connect directly to open API because by doing that you will expose your API key an exposing API key is not safe and anyone can take it and abuse it and yeah this is not a safe thing to do that's why we have to keep all the API communication on them server side and because nextges is so awesome that it provides us both like a server side and a client-side um it's it's great for specifically this use case all right so as I was saying the next step for us let me quickly add everything generate uh gift ideas API endpoint okay perfect as they're saying the next step for us is to create the web UI for our give generator uh for that we can either update our home page our I mean Pages index that at the moment is responsible for rendering like information about my path or what we can do is we can simply create a new page by simply duplicating the index.js let me copy paste it and we can call it gifts foreign at the moment it has like also the same uh code because we duplicated it but let me go ahead and for example where we see name my pet let's go ahead and uh replace it with Christmas gift generator so and also we will not need this icon anymore okay with this we can go back to our browser and if we refresh the home page will still be named my path just because the index file is still that one but now if we go to slash gifts because that's how we named our file we see Christmas gift generator so it depends on you how you can you if you want to leave gifts as a separate page and a pad generator as the index I think in my case I'm gonna replace them index with the pets pets then we're gonna also have gifts pets and I'm gonna add simply um index.js file that will what it will import uh gifts from gifts and it will simply export it back export default just to make it as a home as a home page now gifts if I refresh it still works the home page is our Christmas gift generator and if we go to pets that will be our name name a pet okay this is not the most important part of this tutorial so don't complicate yourself you can instead of if this is confusing like with all of these files simply continue working in the index.js file because now um yeah like we are going to work based on that file and we will just adjust it for to to our needs so now I am in the gift.js uh we have a form with one single input uh the thing is that we will instead of having one single input we're gonna have five inputs for the price age gender and hobbies so let's go ahead and start by defining the state variables I'm going to delete the inputs from here I'm gonna delete the animal input from here and I'm gonna start by defining with gender set gender equal use State initially you can initialize it with one gender uh let's go like this then we have age set age uh again you can find like a default age so that we don't have to provide it every time um let me do it like this and copy paste because we will have more so after the age we have price mean and then price and then set price mean the minimum Price Less default it with 25 the same way for Price Max and set price Max I'm gonna give I know 100 uh and what else Hobbies hobbies and sad Hobbies uh let's initialize it with an empty string and that's it we don't need these are our one two three four five uh parameters okay so inside our form we have a one input for that was used for the uh providing the animal that you want to um to type I'm gonna go ahead and um so I'm gonna go ahead and if we open our pad generator here let me actually I don't need pad generator I need the animal input yeah this one and I'm gonna make it smaller so we can always see it on the screen I'm gonna put it here something like this so animal input here um yeah we deleted it so let's go ahead and start with the uh age so value age one change on Change is Gonna Be set age but because this is the value is a string but we need to save age as a number we're gonna use uh that number dot parse and then parse hint and then we're gonna provide them value that the user input wrote in the input I'm going to import react just to make sure that I don't see that red underlines even wall route is not necessary like you don't have you are not required now to import it so what do we have here uh in one submit I'm going to comment out everything just because we didn't we will get there so now if I refresh I see 30 here the problem is that at the moment I don't see like what I should provide here so here is the age for that I'm going to provide the label label come on label age like this we have a label we have an input for the name it's age placeholder enter the age um yeah that's that's it right we can also provide like um yeah the type is not a text the type is a number and this will make sure that we have like this up and down thing um all right look um we're gonna have to do the same uh for every other single input however let's not focus on this because this is quite time consuming let's go ahead and take our inputs from our quick guide here uh okay like this so if we scroll down in our guide we see the web UI and let's go ahead until we see the form so let's go ahead and copy the whole form with the age price price two and so on until we close the form and before loading let's do just that now okay I'm going to copy I'm going to come back in the ourgift.js and here as well let's select the form deleted and simply paste uh before moving the rest of the fields now what we should see in the web page is this Christmas gift generator uh with all the fields that we have uh it's good but the styles are a bit off um for example for the Hobbies everything is okay but for the price and for the selector it's a bit different so let's go ahead and see in the index module.css here we will have to adjust a bit for example let's see where we are styling the Hobby's input we do that inside this main input type text which means that all of these tiles are only applied to the input of a type text the thing is that we also have inputs of type number so let's add that as a new line here with a comma main input number and now our number inputs will also have the same styles and also let's go ahead and uh the the same styles for our selector the select component on top here to also be to have the same padding and be the same style as others so yeah this is our form at the moment uh what else let me see if we have everything here for I think I was um I reduced a bit I reduced a bit the margin bottom to 12 pixels and I added some margin top for this input in order to have some space with the label this space is smaller than the bottom one so four is just enough perfect okay um so our user interface of the Forum is done we can adjust like the price we can adjust them the name and so on and when we are done we can go ahead and press generate gifts this will trigger their own submit function that we that we have here let's uncomment the code from here and see how we can adjust uh these function from working with the animal generator path name generator to our Christmas gift generator so starting from the top the first line is prevent default and that means that we are um preventing the browser to refresh uh basically we're preventing the browser to do them default action of submitting a form because we are going to handle the submission ourself down below that's our prevent default then what we are doing is we are you we are querying our API now we do not need to generate pet names but we want to generate gifts so make sure to adjust the endpoint that we want to query in this case is gifts because our file name is called generategifts.js inside API folder generate gifts dot just yeah we don't here we just have generated gifts come on ready come on okay others the headers will remain the same because we are working with Json but the body the body will be a bit different because instead of sending uh the animal input if we look in our generate gifts uh from request.body we are expecting all of these fields price mean price maximum gender age Hobbies I'm actually gonna copy them from here I'm gonna go back to gifts.js and inside this object instead of an animal I'm going to paste all of this price mean price marks gender agent hobbies and because our state variables of these fields are matching the name um yeah it will work because even names are different we need to provide the key name price mean and where for example price here or Price mean in our case the name and value is the same that's why we are deleting one of them okay so we get the response by J by calling the API endpoint generate gifts sending all the data we're getting the response and then setting it in state as a result uh and we do not need to reset them the input any input okay I never yeah let's let's actually try this so result is being displayed here on the bottom let's press generate gift ideas will it work I'm gonna open the terminal just to see if we have any yes it worked so right away we see high-end Bluetooth headphones um because yeah with these parameters these are the ideas awesome so we see that we implemented all of this form we submitted the data to the back end and we got back some gift ideas amazing um what I want to do now what I want to do now is to manage the loading uh the loading screen the loading uh whenever we press generate gifts there is a moment when we are waiting for the response but the problem is that on the screen we are not giving any uh user any feedback visual feedback to the user that something is happening um so in order to talk properly manage the loading indication let's go ahead and create a new state variable called loading and then set loading here you state initially the loading will be false now inside this on submit function the loading is also helpful to prevent uh sending multiple requests because now if we press multiple times on this button we're gonna send multiple requests to the API and our API key can be deactivated or put on hold so in this case we're gonna check if we are loading at the moment then don't send another request just wait for the previous um request to to come back however if it's not loading and we go here let's set loading to true to indicate that we started the request and at the end we need to set loading to false I think is that by fetching this API endpoint because this is a network call not always it will be executed successfully sometimes it can throw an error maybe the user will not have internet connectivity so usually Network requests are advised to be put in a try catch block so let's define the try catch catch um block like this and what we will put in that try part we're gonna put the fetching and setting the result like this in the catch I'm going to use the alert from react native oh it's not very we are coding a mobile um we are coding um web application so there is not no alert here I think there is alert like this alert failed to generate Jenny rate give ideas try later and we can also provide the message but it's not important um and yeah set loading can be here or also potentially it can be in the finally block which will be executed at the end of the strike catch thing set loading to false okay um in our application we like if we go to the guide we are also rendering like a image like a loading image whenever the loading is happening so let's go ahead and copy this part from here and put it on top of our result before the result here so if loading is true let's go ahead and display um a title looking for the best gift ideas and also an image with a loading spinner um I have prepared this loading uh spinner for you so in the asset bundle with you just downloaded that you downloaded at the beginning of this video by following this form downloading the asset bundle who should have received the assets give me just one second to also find them for myself asset bundles so here should be the asset bundle and we have images and we have loading dot GIF let's go ahead and put it in the public folder public folder here and back in our gifs.gs make sure to update here from loading.webit to loading dot gif now let's go ahead and send another request and see what we have looking for the best gifts we see this learning indicator and then we see the result awesome amazing so the loading indicator is working properly we can also potentially hide the form when it's loading if you want that's also possible but I will leave that on your um based on your choices last thing that I want to show you how we can do is for example here the result as we can see like all like number one number two and number three they're all kind of merged together however when uh querying through the API what we see is that before like for example number two there is two slash n slash n and the slation is stands for the new line so there is new lines but they are not properly handled on our side so my idea like a simple fix that would be is whenever we are setting the result let's go ahead and replace all the slash n slash or backslash I don't know this one let's replace it with the brake HTML tag and it's still not gonna work looking for the best gift because whenever we do that it will simply show the brbr like the breaks here as text because the way react.js renders it first of all um transforms everything to string an alternative to this is going to be to um to to use a property on this div a class name called dangerously set inner HTML and provide via an object with HTML code that is going to be our result now we do not need to render the text directly there uh and we can self-close this div tag like this and these complaints because the result may be um uh maybe empty so we're gonna going to render this conditionally only when the result exists uh it's not assignable oh it should be underscore underscore HTML like this and now with this uh if we press generate gift ideas looking for best gift ideas and we see that ideas rendered properly with new lines because we set them directly as HTML with a break tags awesome so um I think I was I I had also we can adjust the style of our loading indicator not to be like full size by providing here in the index.module.css somewhere at dot Main and then dot loading and where we provide like the way that you want I'm gonna give it 50 pixels why 50 pixels I I did 50. thinking about react native but here we need to specify pixels so probably 200 pixels will be okay and it should be in the middle but yeah don't worry I don't know 50 what was working okay so I'm Gonna Leave It 50. awesome so guys what do we have so far so far we got started with openai um with the API from open Ai and we have used their models to generate gift ideas we have created our API endpoint that is working with some parameters and is creating worm yeah like suggesting Christmas ideas uh and then based on this API function we went ahead and implemented a web page using next.js that displays a form for all of these parameters and whenever we submit the form it will do the API call to our API endpoint and after it finds the the gift ideas it will show them in a list down below and with that being said our web application is finished so what do we have to do now is I'm gonna go ahead and commit everything git add git commit that's for us uh uh gift Christmas gift generator but uh don't leave because we also have a mobile application however before [Applause] um before going ahead and started working on the mobile application I also wanted to show you how easy you can go ahead and deploy this application so it's going to be accessible from anywhere in the world that will be useful for us because vs nexjest application is also responsible for our API and having the this API hosted we will be able to work on the react native side application without having to run our next desktop however the V step that I'm gonna show you of deploying the application is optional and you will be able to follow along and continue with a react native application even without deploying our backend simply working with a development environment I'm gonna show you like the the only difference will be the URL that you're going to connect to and I'm gonna show you how you can do that when we get there however if you're interested to see how we can easily publish and deploy our nexgast application there are a couple of steps first step is to create our GitHub repository so let's go ahead and sign in on GitHub and create a new Repository I'm gonna create it here for the repository name is going to be Christmas gift um or let's go chat GPT foreign Ty come on Christmas gift ideas Christmas gift ideas will be good for junior rating Christmas gift ideas lists you can set it as private or as public I'm going to go with public and let's go ahead and press create Repository now from your project make sure that you committed everything so go ahead and do git add Dot and get commit with a commit message to commit your changes and now the next step is going to be to connect our local repository with this one that we just created so for that what we have to do is to copy our git URL from here go back to your project and let's go ahead and replace clear let's go ahead and replace the remote URL of this repository for that we're gonna do git remote set URL then for the origin we're gonna paste the URL that we just copied I'm gonna do enter and now what we can do is we can do git push uh no before that we also need to make sure to switch to the main branch by writing git Branch minus M Main and now let's go ahead and do git push origin main this will take our project from here and we'll push to GitHub after that is done we can go back to our GitHub if we refresh then we will see our code here okay that was the first step now on the on the deploying side let's go ahead on versal.com and uh if you don't have an account you can sign up using your GitHub account and after that let's go ahead and create a new project um here we will be able to import from git repository and initially you will not see any repository because we need to give permission uh to next.js to access our projects so in my case I'm gonna press adjust GitHub app permissions in your case you might have to Simply give GitHub virtual GitHub access so let me go ahead and uh sign in one second come on come on come on where are you and after you sign in on the next page this is what you should see if you scroll down a bit you will see virtual with everything with all the permission it needs and you can either give access to all repositories or only to the selected repositories so for me that's gonna be Christmas gift ideas I'm gonna add it here and I'm gonna press save okay now I'm being redirected and here we see Christmas gift ideas let's press on the import and on this page uh I'm I'm using GitHub organization hmm why is that I don't know wait a second wait a second uh I think if you're if you do not have an organization in that case you will not need this let me find my uh so your organization it's uh it's yeah it's a bit weird because the previous one I didn't need a prop plan maybe because I have too many applications already um that might be true or no yeah everything is uh okay so let's press on the import yeah I just had to select the team from here from laptop um I'm gonna go with uh yeah this is what you should also see configuring the project so the project name uh framework let's leave everything by default what we are interested in is adding the environment variable that we have for our application and the environment variable we are going to take it from the end of EnV the dot EnV the name is open API key that you should copy from here and the value is the actual API key of your application so let's paste them here let's press add and when we see the API key here we can press deploy now a person will go ahead we'll pull all the changes from our git repository and then we'll deploy and make our next just application available worldwide basically by anyone uh and yeah that's basically everything you have to do to deploy uh with versal so as you can see it's already done and it took how many 20 seconds so we can continue to the dashboard and from here you can press on the URL that was generated for you and this will open the application by the way you can also access it at the moment if you want um so yeah this is the Christmas gift generator I can press generate gifts and here we have it the list of gifts and what's cool about this is that now I can go ahead and uh most probably yeah like close van nextges server and we can use vcrl to query our API uh in our guide so deploying to versa yeah foreign with our web application um yes in one hour we have managed to build a web application and also the API as well as deploying it and making it accessible by anyone what we're gonna do in the next step is to use the same API that we have built now and create a react native application for our Christmas gift generator so I'm gonna go ahead and jump right away into doing that you can take a small break uh pour yourself some coffee or tea and then continue um but yeah like we have probably one more hour for the mobile side application to set everything up and to explain how everything is connected uh in advance we're gonna do we're gonna I'm gonna give you some project ideas that you can take and Implement using cha GPD to create maybe a startup or a new project or to experiment with it so stay tuned till the end and now let's go ahead and start working on our um mobile application so again we have a guide just continue uh continue with the guideware uh but yeah I'm gonna work you step by step so I'm gonna open a terminal I'm gonna start from there because we need to initialize uh a new react native application so I'm gonna go first into our directory here and besides open AI quick start besides them not inside the project that we have created previously for the web but as a separate folder I'm gonna go ahead and run npx create Expo up Christmas gifts mobile let's execute this command and this will initialize our Expo application and then we can get started and design it and Implement everything the URL please so do you want to to test it out and see how it works let's go I'm gonna give you the URL one moment so here it is please don't spam it at the moment it will be very quite sad to have to to stop something now while I'm I'm teaching you um um uh takash in order to help you with that issue I'd probably need more details about the problem because yeah like unfortunately I'm not a wizard and I do not know like what might be the problem um you can you can reach out to me on Discord and I will try to help you uh Rec native will be used for building a mobile application later in the video yes thank you very much for what what was the question there I was just a bit curious uh if the apis are free the apis are not free I'm gonna talk about the pricing at the end uh we are not free but they offer you I think 18 dollars in free credits so it's enough to experiment and play with them foreign for people that are getting starting with jgbt so I'm trying to do it step by step to make sure that uh you understand like how to interact and work with it why did I mention ragnating this title yeah because now we are going to work on our react native application so until now we build a web application using nextges but it's also um good to know how we can use the same charge EBT inside our react native application and because we have so many react native developers on this channel in our community um I decided that you're gonna find it useful so we got started with xpawn we initialize our project let's go ahead and open it with Visual Studio code uh it's here uh and let's go ahead and open a terminal and start our server by running npm uh start this will start our Metro server from where we can either run our application on Android by pressing a we're running it on iOS by pressing I or if you do not have simulator simulators on your machine you can use your physical device using the Expo go Application that you can find on Market just simply scan this QR code and you will have your application running on the device in my case I'm gonna press I to run it on iOS but the application will work both on Android and iOS in web price section it is nice to set the currency in the label to inform the users yeah thank you for the recommendation we're gonna do that for them mobile application so here is our application so while our ex-publication is being loaded if it or not if you don't have a lot of experience with react native and Expo I'm gonna give you very shortly uh an introduction so what we will have to work with is the app.js file this is the entry point of our application and where everything starts uh in my case I'm gonna go ahead and also import react it even though it's not needed um my visual studio code complaints now and what do we see here on varieties of application so we have a we are rendering a text component similar to a H1 or H2 or even a p in web development and yeah this text we see it here on the right if we update the text hello world it will automatically update on our emulator so we can we have like code reloading and we can build and see what's happening there um invert assets let's go ahead and drag them loading in the loading image from our asset bundle that we will need a bit later so from images loading let's drag it to the assets perfect now as I said like um up.js is the entry point file but for this simple application we're gonna do everything here um so what will we have to render here on this page we need to render a similar form with our with a form that we have on the web basically asking the same questions and then having a button and after that showing the result so because our web application um is written in using nextgs and xgs is using react.js we are able to reuse some code from that application in our react native application invest the benefit of working with react.js on the web and with um react native for the mobile platform so I'm going to open in a new window our our web application that we just created it's here and from the gift.js I'm gonna go ahead and grab all the state variables from here because basically we will need the same in our uh in our react native application and in react native we also use the u-state hook that we import from react here okay so now we have all the state similar to how we have it in the web uh The Next Step let's go ahead and see how we can render any any input here um if you're more experienced you can skip through this process uh but if you're just getting started like let me quickly show you how we can render inputs so as you remember from the web we had a label so for the label we're going to use a text component for the label so for example we can say text is age uh and for the input we will use a component called text input from react native let's go ahead and render it here text input text input like this and we will provide like a placeholder for example page and we will see age here right away we can also specify like what type of keyboard so keyboard type for the age will be number or numeric numeric um and we also can specify the value so the value of our age is going to come from the state variable age so value age but V should be transformed to string because our age is a number so H to string now we see 30 there but if we try to change nothing happens because we also have to provide the on change text on change text what should happen well we will get the text and we should update the age set age with a text but because the text is a string we need to use number dot parse parse int to transform from a text to an integer and set it in the state now if I'm gonna update the number here to 31 it's being updated correctly lastly we should provide some Styles so for the label I'm gonna provide Styles dot label label and for the wait a second What's Happening Here text so style.label and for the input it's gonna be Styles dot input now we can go ahead and style this so for the in input we're gonna have some Styles and four well label as well the label is pretty simple what I want to do is I want to Simply increase a bit with font size uh to 16 and also decrease the um the color not today to be so to take so much attention so for the color I'm gonna set it to gray perfect now for the input I'm also going to increase the font size to have like a little bit bigger text 16 is okay we can even go to 18 probably um now we're gonna work with borders so border uh color he is some kind of a gray so that's going to be 35 37 40. 40 no come on what yeah something like that uh and let's provide border with one to see to see it on the screen all right we see it but it's like the input is very small there we can go ahead and add some padding inside the the input padding 16 uh we can also uh on the padding side similarly with a web we're gonna add more padding to the bottom not more margin to the bottom so for the top we're gonna have six and margin bottom we're gonna have 12 pixels and to make the corners round we're gonna do border radios five or four okay now um in order to make sure that our input is full width of a screen for our container I'm going to delete the Align items Center like this and I'm gonna simply add like some padding then there do we need Justified content Center I don't know let's leave it okay so here we have one input and the same way uh come on not the number we need to refresh if we delete it it goes to not a number that's because here number parts in the text if it's empty I'm gonna do or zero hmm foreign weird bug it's gonna put to zero and then we can change it back yes at least it works a bit better uh all right so now that we saw how we can render a text input I'm not gonna waste your time to render all of them so let's go ahead from the guide let's get all them um all the text inputs here we have them for the age for the price and for the Hobbies let's go ahead in our app.js and delete this and paste all the inputs that we need so we have age we have price and we have hobbies the last step is um [Music] is the drop down to select the gender of a person we could use a third party library for a picker where we can simply try to render it ourselves so for example I'm going to copy this text at the top and our gender will be the label for the gender will be for who is the gift Now using two text box two text components inside one view we can create these selectors one of n will be men and one of them will be woman let's go ahead and give some styles for example for this view it's going to be tiles.select or container and for this one will be tiles dot selector and the same selector and the same thing for the second text so we see them there but it's not exactly how we want it to um to look so I'm gonna go ahead and provide the styles for our selector you can get them from the guide and the only thing that we did is for the view that they are inside we made sure that the flex direction is Row in order to render them side by side and then for the selector we set the background color the flex one and so on to make it look better like this now that we are rendering them properly we need to make sure that they are selectable and also we need to make sure that they will render with a different color when they are selected so to render with a different style when a condition is met we are going to use for the text selector here we're going to use an array of styles and for the second one we are going to add the style only if the gender that is currently selected is man then we're gonna change the background color to to a green like this so now we see that the man is selected let's do the same for the second selector so I'm gonna add the array of styles here and the condition should be if the gender is woman then it's the background should be green lastly we need to change the value of a selected gender when we press on these selectors the text component has our own press event so we can simply do set gender here to man and the same thing to the second text box to change it oh come on the second text box here only we will change it to woman now if I press Roman it changes like this awesome so that's how you easily you can build um as a custom selector without using any third party libraries foreign page only thing from the form that we still have to add is probably the generate gift ideas button so for the button let's go ahead yeah here is our app.js and let's scroll down until we reach basically the status bar and before we start this bar after our last text input what we're gonna have is our button so here we're gonna have submit button for that we're gonna use a pressable component which is a very basic component from provided by rack native that offers us a possibility to handle on press events and where onpress will call a function on submit we don't have it yet but we will Define it shortly but inside the pressable we need to render some text and the text will be generate how is it called generate gift ideas so let's define this on submit function before we return so const on submit equal async function and now we can simply console warn submitting so we see the tax generate gift ideas even though it's not styled but if we press on it we see them warning submitting which means that our function is correctly called I'm gonna go ahead and bring the styles from our guide uh that are related to our button with like background color and so on and let's go ahead and send these styles to our pressable first Style dot button and here is gonna be button text perfect the problem is that our button pushed the form all the way up because we set margin Top Auto to the button in order to make it float to the end but as I said it pushed the form up and now the top of the form is behind the Notch and behind the time and so on to fix that issue we can use a safe area View component from react native and just simply replacing the top view with a safe area View and make sure you also replace it at the end now the form is rendered in the safe area and is not rendered behind the notch save your review um actually I'm gonna do Ctrl Z and I'm Gonna Leave a view here I'm gonna simply put the safe area view on top just because the Styles there are not applied correctly so now what we have is firstly we have a safe here oh safer review Flex one yes Flex one so we have safe area view with flex one and then we have our page for with the container uh uh all right all right so now that we have all the form fields that we need uh we have them rendered on the screen it's time to work on their own submit uh function and basically call our API if you remember like our API endpoint is available um on our deployed application then dot API dot generate not DOT butt slash our API endpoint API generate slash gift so from our react native application we need to call this URL Christmas gift ideas.versal.up slash API generate gifts um this time we're also gonna take advantage of having uh our applications built with react and rack native uh and why say that is that I'm gonna go back to our web application and I'm gonna check the on submit function here we think is that our own submit function will work approximately the same across platforms both on web and on react native so let's go ahead and copy everything from on submit from the web in our one submit application in the app.js in our react native application I'm gonna paste everything here and as we can see like we do not have an event prevent default so simply delete it from here now if loading loading um logic will remain the same querying logic will remain the same because in rack native we also have access to the fetch API and we're going to do basically the same fetch um request the thing is that from our web application we are fetching using a relative Puff we are not specifying what domain we want to query we only specify what path we want to query and when you do this fetch will automatically query the current domain so if our web page is on the on this domain then querying a relative path will simply add it to that domain from our mobile application we need to have and to store somewhere our API URL so API URL let's store it in a global variable is going to be equal to our versal URL the URL of our application let's put it here and also at the end slash API this is very important our API URL not our website URL okay now that we have our Define our API URL here we can use it here in the fetch so I'm gonna replace v string with a template string in order to be able to replace this part with the API URL part so now we're gonna have v string then slash then generate gifts um I'm gonna see if this works and then I'm gonna explain how you can do the same if you didn't uh deploy to versal using a local URL but I can do it right now so if you're developing locally all you have to do is you will use well localhost report slash API like this if connecting to local API but in this case your next just application here should be running so make sure you have npm run Dev on there next just application and after that you'll be able to connect directly here we're going to test in a moment both ways now let's see the rest of our own submit functions so we updated the API URL with data and now set result we do not need the break element so let's remove this from here instead of calling Alert in react native we have the alert class like this and it works in a similar way it will show an alert on the screen alert alert play to generate gift ideas try later finally set loading to false perfect let's give it a try but what I want to do is let's go ahead and console log result just to see what is the result so here in the terminal let's go ahead and press generate gift ideas initially it's undefined the results but after some time we get the gift ideas for these parameters and if you do not have replica the API deployed Let's test the local API localhost here so if I'm going to do Ctrl C here I'm going to have uh uh look how I'm going to show you I don't know how to show properly terminal come on come on so here on the right we have the terminal of our web application which includes the API and here on the left we should have our mobile um the terminal for our mobile application so now if I'm going to reload the application and if I'm gonna press generate gift ideas we see that the web API received the request and we see that our mobile application receive an answer which means that it correctly connects with a local API as well so yeah I'm going to continue probably with local API that's okay with me um and instead of doing console log result what we're gonna do first of all let's go ahead and handle the loading State whenever the application is loading so for that I will have an if statement here you can find it in the guide as well so if loading let's simply render an image that will show the loading indicator make sure to import the image from react native and also the loading gif we will import loading GIF from assets slash loading dot gif um now we needed some styles for the title loading container and loading so for loading container and loading we have I'm gonna go into the Styles you will find these tiles in the guide so it's simply a line item Center justify flex and some padding and for the title I don't remember what styles I had but probably some uh font size 22 and font weight bold probably so now if I press generate gift ideas now we see looking for best gift ideas and the image the loading indicator that we had and after that we are back to the um this form what we are interested is if we have some result if we receive the result instead of showing this the form let's show the result so for that uh uh yeah let's grab from them from the guide where is it here after we receive the response from the API we should render it on the screen so so what do we do is after them if loading statement let's paste them we call that we just copied if result what happened here result let's initialize the result with an empty string like this so if if we have a result then simply render a title here are some great Christmas gifts the title via the text for the result and a pressable for try again so let's give it a try and see generate gift ideas looking for best gift ideas then here we have it so container uh I think I'm gonna go probably the same way or yeah like I'm gonna take a shortcut in the container instead of putting I'm gonna replace it with margin yeah something like this and then I can press try again and back to this form and from here we can play around for example if you have two give a gift to your nephew let's set age 14 let's hit price probably fifty dollars is enough and hobbies I don't know cars uh uh bike bike and Lego generate gift ideas let's see if it will be accurate foreign technique race bike building kit this one as you can see it's a combination of Lego and also bike so as you can see not just takes them separately but it looks how we how he can combine all of them remote controlled drone uh fifty dollars yeah that's this remote control drone is a perfect for a tech savvy 14 year old it's has a range of half to 550 so on awesome and I think it it's very very uh accurate all right so I think that's everything that I wanted to show you for our application now we have a fully working both web application and a mobile application amazing perfect love it and we have done all of this in two hours so what do you think about the application so far guys do you have any questions I had a blast I had it was such a great experience for me to play with judge ability and I think that this is not gonna be the end of me playing with it have a lot of other ideas and if you are interested in other projects and if you have some interesting ideas and you want to know how you can Implement them let me know down in the comments below and I'm gonna try to do them uh now it's time for Q a so if you have some questions drop them down in the chat and while we are still here we can I can explain some of these Concepts once again if there is some stuff better is still confusing and finally uh as I promised at the end I want to give you a couple of project ideas first of all um I want to give you some ideas on how you can improve the application that we have just built so the first way you can improve the application is by adding more parameters to the query so at the moment we have a couple of parameters five of them but you can adjust this query with as many or as little parameters as possible what I have in mind is um like a step-by-step form which will not show like everything uh directly but a form that will um be a more visual way of building a personality it will ask you like starting with like a gender age and so on demographic questions then it can get into like Hobbies maybe instead of writing the copies manually here go ahead and add a list of hobbies that the person can simply select uh and maybe a option to add extra maybe odd um like them who is the person for you for example a gift for a girlfriend is very different than a gift for your mother so that can be another parameter of your gift generator um another idea that he had is to pair it with a image search API for example unsplash and provide images for every idea uh having the ideas as a text form is useful is great but whenever we have something visual something to see that improves the usability of our application by far so go ahead and based on all of these ideas try to search automatically using a image API for a image of that thing what you can do is first maybe also use charge gbt to extract the keywords I haven't tried that but I'm pretty interested for example if I go to openai.com uh can you extract Q keywords from sure here are some potential keywords that could be extracted from the provided sandals cocktail making kit that's one keyword um how should I search on Amazon to find and let's put the answer that it gave previously if you're looking to search for cocktail making kit on Amazon you could try using the following Thursday term cocktail making kit cocktail kit Mixology and so on so right away using uh using charge EBT you can generate ideas then also using chargeivity you can extract like Search terms when using these Search terms you can use some kind of an API to get images and to display them in your application or even better is to use some kind of e-commerce API to provide directly the products where people can buy them with a click of a button I think this is a great business idea and you can steal it from me because um yeah I'm I don't think I'm gonna do it but you can do this project and under every idea that you recommend here show them show a Amazon URL with your affiliate link then if you have like thousands of users during this Christmas season using your uh tool to find or generate gift ideas we can go ahead and buy them directly from your website by clicking on on a link I mean buy from Amazon by clicking on a link and you will receive a small percentage of it sale as an affiliate sale so that's that's that that's an I think in my opinion a great idea and your job is to promote this idea generator as much as you can and also to make sure that you you get like enough commissions to uh to cover like the API cost for example what our thing like you can make it generic not only for Christmas uh maybe you can have like uh a selector or one of the parameters to be um what is the reason of a gift like is it a Christmas or a birthday gift you can do that and have it as a general gift idea gift idea generator you can make uh features to save ideas if you like them you can save them and then you can review it as a user um recommending links where you can buy these gifts we discussed about that and yeah this can be used as a business model using affiliate links to to buy these ideas so these are some ideas on how you can improve and um take this project from here add features and experiment more get get your hands dirty and do it yourself because that's gonna that's gonna take you to the next level of uh of understanding of how everything is connected together I also wanted to show you some other ideas that I was thinking about I will start with a very general or a very generic chat bot but there are so many types of chatbots so cha gbt is a very General and generic uh model that you can use to create some more specific chat Bots for example you can add a chatbot in your application that will help user navigate the application or will help him solve some issues um another idea could be to create an application for translating languages chegbt is very good at translating natural language so you can use it for translation services you can use it to generate any kind of copy like advertisement copy marketing copy sales letters you can use it for any kind of idea generation or brainstorming which when you think when we were thinking about AI a couple of years ago maybe five years ago we were saying like yeah it can replace a lot of things it can do a lot of great stuff but when it comes like to creativity and making something new like AI is not very good at that showed us that power the real power of these models and how we can even be creative and generate ideas out of everything that we have learned so you can ask him for business business plans you can ask him for business names taglines website copy content to generate content there is so many things that you can ask him like for example um so just add tagline for not just dot Dev which is um uh a company um helping beginner Developers build full stack application and changing the world through code I don't know I just put some random not random text but I described the use case and here are some potential taglines code your way to making a difference empowering beginners to change the world for Code full stack development Made Simple with not just Dev wow it's that's amazing like just take it and put it on your website uh brain you can ask him to brainstorm ideas brainstorm uh video ideas for uh react native uh Channel what will it do here are a few potential ideas a series of tutorials that teach viewers how to build a simple react native app from scratch I think we have a lot of them on the channel a video that showcase the latest features and updates in Rec native framework we're working on that guys we're working on that an interview with rack native developer who shares their experience and insights on the platform a video that compares react native with other mobile app development Frameworks such as flutter where you wanting a day in the life video shows like come on like these are such a great ideas I I don't know I'm so excited about everything like every time I use it um back to the ideas what I recommend is if you need some other ideas check out the examples example projects on beta.openai and here you'll see a lot of types of projects that you can build but you're not limited by by these ones you are like here sky's the limit and I really want to see how you will use this tool and technology and what you can build out of it because with the previous um with a previous models that openai launched I saw some great businesses built on top of them in a matter of weeks for example there is Peter levels the founder of uh Nomad list and other successful website and businesses he have he has made um Avatar AI generator application using the daily uh model from open Ai and in the first I think in the first week or in the first month he was already doing more than 100 000 dollars in monthly recurring Revenue I'm gonna repeat it one more time like in one month he grew an application to 100K every single month this is recurring Revenue users that will continue paying so think about this think about possibilities and opportunities that this can open don't be afraid of a new technologist don't be afraid to lose your job because that's not gonna happen like the boring stuff is going to get automated but our job will remain more juicy basically we will cover only the most important stuff so think about think outside of a box think about how you can use these tools to create applications that will help people that will solve a specific problem and yeah as I said like I'm curious and I'm excited if you build something with it make sure to uh to reach out to me and show it because I will I'm very interested in this uh let's see what uh people are saying yeah guys before we leave and no we're gonna also go for some chat questions but what I wanted to ask you at the moment is please if you enjoyed this tutorial uh if you enjoyed building two mobile applications in two hours uh then make sure to subscribe to the channel it only takes you two seconds and it will help us a lot to reach more Developers uh yeah thank you very much for that and let's have a look at our chat foreign in one of my projects with translating the text the user writes from Kurdish to English and generating images Dale uh Delhi is also from openai and very powerful yes that's true uh now that I I've got into this one I'm really curious and maybe we will do something with that one as well what is the best language translation API Google translate um I haven't compared like a lot of translation apis probably Google Translate is a good one but with tools like chargpt you can give it a try there as well probably a Google API is more structured and specifically for vet need but with some some some work you can make a good prompt you can design a good prompt for charge ubt to translate for your things foreign uh chargeability is good for SAS idea saves times quite useful yes I agree AI can can't and won't replace human job it will replace but with every new thing that appears with every new invention people will always be afraid of losing the job and some people will lose the job because Machinery replace the factory worker but that doesn't mean that like that's a bad thing because the the Machinery created different jobs for people and also as we advance we are just replacing the jobs we're replacing the jobs that can be automated in order for us to have more time to spend on the jobs that bring us joy with jobs that involves more creativity instead of jobs that can be automated by an AI I hope that makes sense what what I what I wanted to say uh my question again is uh how can I hide the API key or secret key from pushing to GitHub so uh let me show you the thing is that now if we look at the GitHub repository of our Christmas gift ideas which is our um mobile which is our web application here you will never you will not see the API key we have only that dot Envy example with that is the example environment file as you can see we do not see that dot end file and when we look in them project our API key is in the dot and file and because it's in Dot N and also we have a git ignore that ignores the dot end file that means that this API key is not going to be exposed in the GitHub repository as simple as that from the react native application we are not using the API key because we are using the API that we have built ourselves and also let me talk a little bit about the pricing someone was asking about that so for that I will open some pages here let me see pricing uh get started yeah so pricing Works based on web models that you're using so these are the pricing for image models we server pricing for the language models so for example we are using the DaVinci The DaVinci is priced 0.02 for every 1000 tokens and as I said tokens are not words uh tokens as you can see you can think of tokens as pieces of words and usually 1000 tokens is about 750 words so yeah you can make the calculations yourself here but when you start you start for free as you can see and you can experiment with 18 dollars in free credits that can be used during the first three months and after that you just pay as you go uh as well you can compare like that uh pricing is different for for different models so you can use like other models read about them like what we are used for and what they are fine-tuned for but if it works for your use case like you can save a lot for example this one as you can see is way cheaper than the DaVinci most powerful and other is the fastest you can also fine tune models basically um train them for your specific use case so it will give better answers without having to provide a lot of context in the prompt in the prompt here so if you fine tune it for like coding like it's gonna be better like for that use case um all right guys so if there is no more questions uh I think I'm gonna say goodbye for now and we're gonna CEO next Friday um because every Friday we are going live with a new project based tutorial so make sure to uh turn on the notification Bell not to miss it next week and thank you very much for uh staying with me till then I hope you learned something new today and if you did make sure to subscribe to the channel and let us know down in the comments below what other projects are you interested in seeing us build uh and that's it for today take care stay hydrated and right clean code bye bye guys

Channel: notJust․dev

Views: 57,668

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, OpenAI, chatgpt, chatgpt explained, chat gpt-3, how to use chat gpt in react native, how to use chat gpt with nextjs, chatgpt project, openai react native tutorial, chatgpt react native tutorial, chatgpt tutorial for beginners, gpt-3 explained

Id: kR9Kgo8H7po

Length: 140min 3sec (8403 seconds)

Published: Fri Dec 09 2022