Building an app from scratch with ChatGPT: the future of development

what's up not just developers welcome back to a new live stream and today we're gonna do something exciting back in November 2022 openai launched a new model a new AI model called cha gbt here we have it so chai gbt is a conversational AI model that you can ask any question and it will try to answer and understand the context and after the launch of charge gbt like the internet went crazy everyone on Twitter is talking about it everyone is trying to use and trying to understand what will be the impact of this Ai and yeah if you haven't played already with it I highly encourage to do so you will find the link to charge you within the description below but um yeah like here are a couple of examples for you to better understand what it does so you can basically ask it any kind of questions like explaining Quantum Computing and it will do just that where you can ask it to create a keto meal plan for a week and it will do just that so it's uh it was trained on a very large source of data and it has like the knowledge in all different areas but it might be interesting what's even crazier is that chagibiti can now write code can understand code because of a separate model that it incorporates called codex and that model was trained on a lot of uh data like a lot of source code so now what it can do it can actually we can ask it for example here I asked how to render a list of posts in Rec native and it went ahead and explained me what is a flat list what is data what is render item and how we can put everything together with a source code in order to have like a working source code it can do all of this stuff and yeah like after playing four more time my mind was blown and I was thinking about uh questions like this can an AI code a mobile application now that it has so much knowledge and it can generate this code that's an interesting question and I think that would that would be the goal for today's video we're gonna see if we can with AI can code a mobile application but if we go down uh the rabbit hole of these questions of trying to understand the future of AI and what impact it will have specifically on us developers you can get into the um into the question of will AI replace my job well I don't know but in this video we're gonna find it out in advance we're gonna see and we're gonna take a conclusion of if we should be threatened by uh artificial intelligent and if it's going to take over our jobs as Developers so uh the plan for today for this video is gonna be as following uh here is me a little developer with um a little bit over 80 years of experience uh developing application working in different companies at Amazon building my own startups and doing everything myself now with the power of AI let's step back and see if we can be a little bit lazy and just simply ask AI that's what we're gonna do we're gonna ask how to build a react native application and then we will see what where judgibility will lead us to we're gonna ask more questions until we get to the to the wanted result and after every step we're gonna go back we're gonna code everything we're gonna feel powerful just by copy pasting the code but that's the point of today's video that's the point like to see how easy were if a normal beginner that haven't written any code can use rgbt to build a usable application and after we code everything and then we're gonna have a fully working react native application hopefully if I manage to do that because I'm pretty um there are a couple of risks points here uh one of them is that jgbt was trained on data up until 2020 or 2021 which means that there is outdated data if I'm gonna ask it something that was released previous month jgbt will not be able to answer me so I feel that there is still like you need to know something and it's still in my opinion impossible to build an application um with jgbt but let's see let's let's give it a test I I love challenges and today we're gonna find that out so the application that we're gonna do I decided to be a simple application a to-do list application uh because that is the most common application that you build with a new technology that you learn and also we do not have this on our channel so yeah let's see if jojobt can help us build a fully functional to-do list application with different features what's more interesting is that for this challenge I have only one hour and if I do not manage to build this application in one hour with charge gbt then I'm gonna have to do something so I've been actually thinking for the last two days of what would be the uh what what should I do if I fail to do that if you have any ideas let me know but um yeah let's do it like this because Christmas holidays are coming if I fail let's do it like this if I fail to build a to-do list application with chai gbt under one hour then I'm gonna sing a Christmas song a piece of a Christmas song here and yeah believe me you definitely don't want to hear me sing maybe I have skills on coding and teaching but when it comes to singing probably I'm gonna get like demonetized or banned from YouTube for for doing that but yeah that's the challenge that what happens if we do not do that and I think we we are we should be ready to get started uh everyone in the live chat hi guys how are you doing do you want to hear me sing and also yeah think about the song that you want to um want me to sing it should be Christmas song and and then we're gonna vote if I don't manage to do it but I'm ah it really like there are so many variables in this challenge 2gbt is getting a lot of um traffic nowadays uh in the first five days they had more than one million users using it so sometimes um like it takes a lot of time to get a response sometimes um the interface can yeah like can go out so hopefully that will not happen today let's hope that uh like from a technical perspective everything is going to be okay and then then we will have like the challenges of actually building and implementing and trying to think of the right questions to ask jgbt in order to give us the answer that we want and that is that that is probably the main goal uh and that is probably also a very good skill that a developer should have whenever you have a problem you need to put it into words and search for a solution and you do that usually on Google maybe in future we are going to do that in chat gbt but at the end of the day your job is to put problems in words in order for the AI to understand you and to lead you in in the right direction we want both we won't have a completed task and also a song from you uh that's not gonna happen either one choose one Jingle Bells oh my God and with my uh with my like accent singing English songs it's even worse Shivan that's a very good idea to work with Dale to uh or diffusion AI um I if you'll enjoy like these type of content let me know down below and we can dive deeper into these AI models we can work also with images um and um yeah like I'm all up for it it's really impressive and I think that this is when the future all right so um are we ready actually I didn't prepare anything for uh for today so that's gonna be like um that's gonna be interesting um so bear with me we're gonna go through a lot of uh confusion but we're gonna solve it together step by step uh with you so are we ready uh let me actually grab a terminal probably and also I'm gonna open up a visual studio code just to have it ready and then we can get started so I want to make the terminal bigger so you can see just like that and also let me open Visual Studio code and make sure that we are also zoomed in as well here and if I put it this way everything should be good to go all right we developers want the task and this is December and December month want a song from you and I'm not gonna trick me I see you I'm gonna do it in one hour you'll see hopefully all right all right all right so um if we're ready let's get started so quickly to summarize everything that I said so far we're gonna ask chargeability for instructions on how to build a mobile application a simple to-do list application but we're gonna try to implement uh multiple features so it's going to be a fun challenge we have for this only one hour um we have already like only one hour if I don't manage to do it I'm gonna have to sing a Christmas song for you here at the end and I hope that uh I will not have to do that because that would be embarrassing so let's start our timer and one hour starts now let's go how do we start uh yeah let's start with a general question on uh how to build a mobile application using react native I'm gonna try to not use as much knowledge as possible and make the question as general as possible to see in what direction charge gbt will take us for example here like as a beginner I might not know about Expo and I'm interested if it will recommend us doing with Expo or with react native CLI but I think I'm gonna trust it and I'm gonna go with what it says so as we can see here is some information about react native we don't have time for that because we have only one hour and first of all the first step is to install the react native CLI the command line interface by running npm install minus G Rec native CLI so let's copy this command and while chegebt is still answering our question let's go ahead and install react native CLI globally uh and while vet is doing in the background we can look at the next step create a new project by running react native init my application okay I'm gonna copy paste as much as possible today probably the video should be like um not using the keyboard only copy paste projects let's go there and here let's do um one second oh today I'm pressed by time so I'm not gonna have time to be perfectionist meaning that we can skip through some Styles and so on so let's go ahead and paste the command react native init my application and I'm Gonna Leave it even the name like that so while this is downloading the template let's have a look navigate to the project directory using CD my application okay we're gonna do that after that is done start the react native packager open a new terminal window navigate to the project directory and run the application on iOS simulator by running acne to run iOS or on Android emulator by running ok this will create a new Rec native project with a default component such as single objects file that contains root component for your application from here you can start building as we know that and Rec native uses a syntax that is similar to react so if you have experience with react it should be relatively easy to learn do we have experience with react I don't know yes let's say we we do have we can also use third-party libraries and plugins to add okay this is very general and it only shows me how to start and run the application I'm gonna do the same how to build a mobile application using rack native bike but I'm gonna be a bit more specific I want to ask it specifically about a to-do list application let's do how to build M To Do List mobile application or just application because if it's Rec native I think it will understand that it's a mobile application let's ask it this way maybe more specific will work better Aman um if you reach out to me on Instagram I'm gonna get back to you like these days I've been preparing for the live stream so yeah uh here is a general outline of how you can build a to-do list application with react native set up your Rec native development environment by following the steps outlined in the previous answer can you imagine that like it automatically understand what it already um gave us an answer can I I'm gonna do some uh some hacking here it's not really hacking but I want to get rid of the this panel will I be able delete no it was a bad idea okay never mind I I just wanted to zoom in a bit like this yeah so uh where are we so set up the development environment following the previous answer like it already know that it gave me this uh environment so we already have an environment created we also have a no it's installing Coco pose dependencies so we are still waiting for the application to create then create a new component for your to-do list this component will be responsible for rendering the list of to do items and handling the user interactions Define the state of your component what I don't know is how can I edit it so if I'm a beginner how can I edit the code of react native application will it recommend me some IDs for example I specifically didn't ask about the IDE because as a beginner your question might be more General foreign native application you will need a tech text editor or integrated development environment ID that supports okay okay includes Visual Studio code Sublime Text and webstorm okay that means that it led us to yalex to Via Visual Studio code once you have a text editor installed we need to open the created project in Visual Studio code so let's go ahead and visual studio code and let's open our project so it should be hearing projects YouTube and here should be Live 2 and my application let's open it here and this is our application okay back to our charge B Team I'm gonna actually zoom out a bit because it's too much um I'm gonna go back to the previous instructions that we have in here we uh it's saying that we need to run npm start to start by development server so let's go ahead and open a terminal and do npm start I'm gonna zoom in probably a bit more oh Metro is 0.72 okay that's nice uh and what's the next fifth step open a new terminal window and navigate to the project directory let's open a new terminal window and we are in the project directory what should we do next uh run the application on iOS simulator by running react native run iOS or on Android I'm gonna go with iOS if you have Android you can of course use Android so we are seven minutes in uh so I need what uh password I don't know the password please work oh my God oh I'm in a hurry and I make mistakes as always so um what's going on found xcode workspace core simulator detected version framework does not match existing job version attempting to remove a stale version in order oh my God what's going on here uh did we skip any steps no we didn't unexpected I in Json run a simulator oh my God don't do that to me right now launching unable to boot device in current state booted okay I really hope it just by running it the second time it will magically start working usually does and here we also see the time so it will take a bit of time for the emulator to run but we can go ahead and charge gbt and see what's the next steps so this will create a new react native application with a single file up.js we are curious so let's go ahead in our project and see up.js so here is where our code leaves or section replication yeah maybe as a beginner we still don't understand this code um so going on to how to build a to-do list application for more details let's see create a new component for your to-do list this component will be responsible for rendering the list of to-do items and handling user interactions but how do we do that and check this out if we ask jgbt how to do step two will it understand and will it explain us specifically how to do step two of this creating a new component for your to-do list let's see to create a new component in react native it understood exactly what I meant you will need to define a JavaScript class that oh JavaScript class oh my God uh I'm not ready for that but this was the challenge that I was talking about it was created with a very not a very old data it's all data in terms of programming because a lot of things are added day by day to to our ecosystem uh what yeah it's trained with data from 2020 and before so that's why it recommends us a class component I truly don't remember one as the last time I was working with a class component oh but can we ask it uh how to do it with a functional component will it do the same but with a functional component how to do it with a functional component okay 10 minutes in almost 11 minutes the time flies very very fast and I don't even see the application on my device I'm still waiting for it to install oh my God come on will I regret not starting it with Expo because I don't have any icons now I don't have anything so it's gonna be interesting request time out uh how to let's do it again let's do it again that was what I was too many requests oh no that's nice that's amazing 11 minutes in and we are already uh hitting the limits of CHA gbd too many requests and if I do it again if I just refresh it will yeah like forget basically the history of our messages so I'm gonna have to start from the beginning how to build a to-do list application in react native with okay let's do it just like this how to build a to-do list application in react native on the other side our application is bundling and it's has been built correctly and here we see we see our starter project with the application running on the device that's good from this side we are we are good let's see so set up recognative project using ivorac native CLI or Xbox CLI that's amazing I didn't have this option previous time but I'm gonna still continue with rack native CLI design the layout and user interface for the to-do list this could include a list of to-do items a form for adding a new item and buttons for making items is complete or deleted use rack native components such as viewtax okay use Rec native state okay this one is a bit more General oh so here is some example code to demonstrate how you might Implement a to-do list application in Rec native right away we have code I'm gonna wait for it to finish building and I think I'm just going to copy paste it in my application um Jason is saying charge gbt is going to replace us newbies um let's wait until then to to see the outcome so it right away gave us the code for our component so let's press copy code let's go in our application and let's replace in our up.js everything with the new code let's save and let's see if it's actually working it's actually working and I see it there somewhere around the top um [Music] should we just fix it or uh how to to ask it to fix it okay I'm gonna add a little bit of my knowledge but let me try to ask it um how to make the content in react native um not be displayed behind the iOS notch I think this question is very general like from a person that doesn't know about I didn't mention about safe area views let's see what it recommends us how to make the content in react native not be displayed behind iOS Notch not sure if that's a very good uh idea to make content react native app not be displayed behind the notes on iOS devices you can use safe here we have view component provided by rack native perfect let's go ahead this component has padding to the top here is an example how to use it we import it from react native and we put our content inside it okay perfect that means that we just learned a new topic as a beginner this is nice so save save area view I'm gonna add it uh for my content and yeah just like this will it work yes it worked amazing so here we have our input if I'm gonna write here something hello hello and if I'm gonna add um something is happening I don't understand what uh how are you add it's being added but I'm not sure where for example I see complete and delete buttons here uh but the text is displayed to do text add to do input value you see the problem like right away it gave us a code with some bugs for example when we save it in state we simply put the string there but when we render it here we have to do text um uh so how um how to write and function add to do how is it called add to do that will insert in state and new object with a property text um and the value will be taken from another variable input input input value will it answer us will it help us figure out this bug but again I think as a beginner this would be the moment where you get stuck because you do not see any text what I looked is okay if I don't see the text how we are displaying it I see that we are displaying it by uh by going to do dot text and to do that text I was looking like okay in our to-do list how do we save it well we don't save it as an object we have value tax we we put it directly there um so how to do here it is awesome set input value so how to do what's gonna that's how it's gonna be changed and now if I'm gonna add new to do add now it's gonna have a have a text uh by milk add and here we have by milk and now if I press delete it's going to go ahead and delete it and it the deletion actually works it works as we expected for example if I want to delete this one perfect now um maybe we can add some styles to this container so uh how to dial uh the view container of one to do list item what it will do so far so good uh let's see we have adding to to-do list deleting from there uh and also completing what does complete do in our code at the moment so if I press complete it does complete to do okay new to the list oh it adds a completed true property there okay I understand but does it do it correctly so new at in the yeah probably does it correctly so it has that checkbox uh request timeout hmm that's gonna be challenging but we are 20 minutes in be more specific tell it to move the code in the mid to the middle of the screen to move a code which code jgbt will turn newbies into Sinners that's very good uh way to think about it because yeah like at the moment I see it not as a threat I see it as a help for Developers um so to style The View container of a to-do list item in Rec native you can use the style prop and pass it an object with desired styles for example uh let's try this one your to-do list item it means that it should go here like in the to-do list map uh okay that's something this will apply a yellow background okay you can also Define our Styles in a separate object and use style prop to pass to the view okay this allows you to use the same you can use any of the Styles supported in the view okay let's try to do these um defining a style object as it says and applying styles.container Styles dot container um so to use the Sims okay view component style prop for example Flex Direction and so on okay here are two styles that it generated maybe they will look good one of them is for the text one of them is for the container and that means that we also have to go ahead and hear for the text probably it says yeah like for the text we need to add Styles text the one that we created down below okay um it's still weird container it has a background yellow so let's ask for uh for let's give it more details um style uh container view in react native uh with Minima Mini malistic with minimalistic I don't know Aesthetics looks a minimalistic design around corners uh Shadow some space thing inside spacing outside uh what else outside and [Music] um children and a line no aligning it's okay let's see what it will give us in this scenario it has character limit of yeah like four beats so don't make it full conversation it just has something that doesn't require deep convo um I think like asking it for like specific features uh it works pretty well so far like it it has like enough capacity to answer and to include once we're there to sell a container react native minimalistic design here is an example that you might style so let's see container view Styles container faster faster we are 23 minutes in background I border radius Shadow color shadow offset okay I think that's gonna look good I already can picture it in my head uh okay container if I do it like this okay something is better something looks okay uh now what uh should we do um I want to make sure that these buttons are in the same uh line so how to put two buttons in the same line in react native and we should already think about some bigger tasks because now we can uh oh all right um I'm gonna Mark the one that are completed with gray background so we know that whenever we press on complete what did we actually do what our code is doing that's also a task for us we need to be good developers in the beginning in order to understand the code that was written by the AI because I think with without a lot of experience you wouldn't understand like What's Happening Here for me it's clear that we simply go ahead and for the item that we completed we are adding one more property to that object besides the text that property is called completed and it has the value of true so I'm gonna ask charging team after this is done so it teaches us about Flex Direction on a view component and putting them wrapping them in a view component so let's do that so it's pretty clear here like what you should do you see two buttons and you see that it's wrapped with a view with this style and also it explains like in detail oh my God I'm not sure about your job as developers but my job as a tutor like definitely might be in danger um all right so as I was saying like our buttons we wanted to put them inside that view that they suggested and now they are in the same row perfect okay um how now about the background color so how um how to change that background color of the view to Gray uh if [Applause] uh to do list item has uh the property has a property is completed work can completed to uh true equal to True let's see what okay okay so we have 26 minutes so far what we can do is we can add a new to-do list item new item add we can add them here um we see them in a list I'm gonna add more and I'm gonna show you a problem but we can ask chargpt to fix the problem is that when we have a lot of them we're not scrollable but we're gonna get that in a moment so here to change the background color of A View to gray if a to-do list item has the property completed equal to true you can use style prop and pass it an object with the desired Styles you can use maternary operation to conditionally here is an example of how you might change the background color of A View to gray if to do list item has property okay so view style to do completed Styles completed Styles incomplete and then we have completed an incomplete okay let's go with this approach so we have to change the style property of our root view of our container and the container is this one where is it come on Style so instead of style container I'm gonna do Style if to do completed style completed incomplete now I know that I have to change from here from container tool complete to how is it called incomplete and we know that we have to add one more style so I'm gonna just duplicate this one I know it's not the best code but I'm not trying to write the code that I would write I'm just trying to copy what we suggest so now they suggested me to have two separate Styles and I'm just see I simply duplicated them and one of them has background color red for the completed so I'm gonna go ahead and for the background color uh I'm gonna move it to gray so now it looks like this I'm gonna probably do gainsboro to mark them with a lighter gray like this and if I complete this one nothing happens why uh why nothing happens delete delete delete delete delete delete delete one two three so if I complete this oh this one is complete No it should be of our way around so this one is incomplete it should be with white and the completed should be with gray sorry that was my mistake and now if I complete the second one it moves to this one and if I delete we get rid of it perfect um I don't know what else what else oh uh else we had like that issue um I'm gonna do some kind of um to do um style input I don't know what else uh yeah we'll see um I want to do scroll scrollable list um how to render the list of to do items as a scrollable list I don't know a very general question to see where judge BT will lead us I'm wondering if it will suggest like the scroll view with a mapping word directly a flat list most probably it's going to be a flat list you can use the flat list yes so so so far it is recommending us then um mapping but now it will recommend us flat list here is an example of how you might use the flat list okay let's see let's see we have to do list we have text item completed it already knows the structure of our so it already actually has some predefined items so that's actually very good and I'm gonna go ahead no I'm not going to change anything to be honest because this is not a state variable so we need it to be a state variable and that's why we're gonna leave the way it is the only thing that we're gonna change is probably this flat list so I'm gonna copy the flat list hopefully from this text if you have a time and read it you're gonna understand how to work with a flat list so what I'm going to do is instead of this mapping I already know that we're gonna use a flat list we need to make sure to import it from react native of course um and if I scroll down a bit so for the flat list the data is to-do list item basically the same as this variable in the mapping then render item for every item instead of rendering a simple text what we're gonna render is exactly this View so let's copy it from here and let's put it here where is it yes like this and key extractor it's gonna take the item dot text yeah that's okay uh all right so now we can remove this mapping because we replaced it with a flat list and now if I'm Gonna Save key index it also needs the index here save uh is here instead of to do it should be item uh completed and here item dot text yeah you know I know these things but the beginner I'm not sure if he will know so probably um where it is but you still need some experience I'm gonna go ahead and grab actually this dummy data and I'm gonna put it as the default value for our to-do list here just to have like what to work with uh like this so we have item one completed true item two not completed and this one is completed and now if I'm gonna do more uh they are scrollable but the thing on top it remains there okay that's good perfect uh maybe we can add the text input and the button at the bottom of the screen like after the flat list let's see if that will work so now um not really working uh because the flat list would need now I'm gonna leave it there I don't want to get into these details it looks good uh what else what else what else I wanted so we have we are scrollable we have a scrollable list we can add things where we can complete them and we can delete uh okay you know what I want like a very technical task I want to be able to persist with data so after we close the application completely and then open it again I want to have the same to-do list items and actually we do that's not possible oh oh oh it's okay um we are coming from this item one item two and item three but if I'm gonna add one more for example this one and if I'm gonna close the application I'm gonna come back then new item that I added is not going to be there and we're gonna start from uh from these three items from the beginning so let's go ahead and ask jojobiti how how to persist data um uh on that device storage in react native or how let's be more specific how to persist data um to-do list how to persist that to do list data on the device storage in react native let's see maybe I don't even have to put rack native because it will know from the context but we are talking about track native and it's going to be an even easier conversation like how to purchase data and I think it will understand 35 minutes 35 minutes come on come on this is an important um to persist but to-do list data on the device storage and react native you can use a sync storage API provided by react native I think storage is as simple as synchronous okay okay okay actually I think storage was moved to um to a community package so I'm wondering if it will work probably it will not so let's go ahead and import testing storage from react native as chai gbt is recommending us let's go ahead here and we see that I think stories has been extracted from react native core and will be removed in future uh it can also be installed like this one so this is another point where you need some some experience with ref native to understand an issue to to read it and to see like okay maybe there were some changes but yeah like here is what we have to do it we can install it uh using this rack native Community testing storage so let's copy that name and um and let's go ahead and install it using npm install and Rec native Community I think storage how's it called a sync storage simply yeah I think storage that's it all right all right so what uh could not resolve a dependency react native thing started from the root I think storage what's going on here um uh how to install arachnitive sync storage has moved to the organization oh my God this package has been deprecated so I think rack native I think storage uh how to install it come on I want to install it uh multi-platform get started npm install okay it's from here so as you can see because um because of an outdated um information data set we receive recommendation that are a bit outdated uh in rack native okay after installing it let's go ahead and continue basically from the documentation we're gonna oh we need to link Android and iOS yeah we need to run and Export pod install sorry npx pod install and Mac OS okay and usage I'm gonna import a sync storage from here in our app.ts yes so import using storage we delete it from there and let's go back to our cha gbt uh and see what it recommended us so as we can see it recommended us using a use effect hook uh fetching data a way testing storage get item to do list if to do list then um yeah it looks very good I think storage set item to do list Json stringify when the to-do list updates okay let's go ahead and grab these two user facts and drop them in our application and as we saw like we should be somewhere let's do it here we need to also make sure to import use effect from react and we need to run the application again on um on iOS because we installed a new native dependency okay guys whatever features you would like me to do because after persisting I will take two more features that you would recommend in the chat so let me know in the chat what features do we want to add uh be reasonable because we have 20 more minutes and we can do that one of them probably will be styling like working a bit with styles hmm maybe I can ask charging how to render um how to render um check box um I can in react native how to render checkbox icon checkbox yeah before we completed I think like because it's um time of posting or when completed yeah that's that's interesting um so we have our application running we have our item one item to item three let's go ahead and delete item one and item two and let's go ahead and refresh that close the application and open it again if we have only what my item three that means that it works yes it works and if I close it again and open it it's still there and if I add item four add item four something else then if I I don't know yeah let's close the application open it again and with data will still be there awesome so we have a scrollable list we have um persisting data um what now what now um what I was asking it here how to render checkbox too many requests no come on like I'm not doing too many requests it was for a reason like believe me come on you can do it I still have 18 minutes I can do it too many requests please foreign if I'm gonna do a new chat oh okay how to render a check box icon in react native come on come on Chad please please it's 17 more minutes I don't want to sing to render a checkbox I can interact native you can use checkbox component from react native paper Library here is an example how to use it react native paper should we try that we have 17 minutes that's a separate library to install and that can give us a lot of um troubles checkbox checkbox okay let's try let's try uh how to install react native paper and we are going to ask this question here but I'm not gonna wait I'm gonna go in them rack native paper in the getting started and I'm gonna do npm install react native paper we already actually learned how to install a library so we're gonna do that and we need to do npx pod install after that and it's gonna take a bit of time let's do it uh come on scanning if you are on vanilla Reckoning you also need to install and Link Rec native Vector icons on now uh my oh but Vector icons can give us a lot of problems oh my God installation oh okay 15 minutes and I'm getting into a completely new UI library that they have never used before um for each component if you're interesting iOS browse Rec native fonts edit info list available phones you have this one uh let's go ahead in there it said to go into iOS into info where is info here and somewhere add that and false here we need to put the fonts just like that and we need to run npx pod install I hope it affects everything what we need to do for iOS Vector icons to work foreign so let's go ahead and do a run AOS uh and why does chargeable recommend us to to use so checkbox status checked checked and checked on press it checked ah color Okay size and unchecked color so let's take this checkbox uh we need to probably import it from react native paper uh at the top of our file uh checked is a state for us it's a bit different uh this will render color okay let's take the checkbox from here and where we have a button complete I'm gonna add the checkbox after and instead of checked I'm gonna see if item complete that's of the thing and when we press on it I'm gonna do the same as we did here complete to-do list like this and just like that and now we do not need the button I think uh checked and checked what's going on so size 20 unchecked color what's happening okay but if I complete to do okay it's not there unchecked unchecked color unchecked ah getting started uh check box check box uh normal normal Android come on usage checked unchecked is it correct unchecked uh how to add property status disable and press and checked color unchecked color custom color for unchecked so if I do unchecked color blue uh no I'm checked oh unchecked color here is black color theme test ID title uh removed what's going on status checkbox status yeah that's a bit weird uh but I'm gonna leave it like this and I'm gonna do the on press event on the whole view like when we press on a view I want to check it and that checkbox actually I'm gonna put it probably near the text itself like at the beginning here so here I will do green okay and if status is completed then is checked okay and for this view I can ask chargpt um how to handle on press event on a view um so I already know how it's done we need a pressable component so I'm not going to waste time to hear an answer but I'm gonna check it nonetheless and for the container that represents one item I'm gonna put the pressable here and I'm gonna move it on press from the checkbox to the pressable so the checkbox is simply like um and I conveyor so now if I'm gonna press on this it's gonna be checked and if I'm gonna add something it's gonna be checked perfect uh also maybe I want to toggle it back so complete to do um so view on press that's not gonna work in my opinion because the view doesn't have an on press event uh you can also use a touchable past yeah that's already right that's already better but I'm not gonna do that at the moment uh we can delete we can add new stuff uh let's add the new stuff at the beginning of a list so I'm gonna change the order of here and I think I do a lot of things without chargeability come on okay um and yeah like what I wanted what else I wanted to do um someone recommended one of the features that I see is to show the title removed I mean like uh crossed so let's ask share the BT how to display that text uh how is it called like crossed or not underlined crossed not crossed word deleted I don't know in react native that's the problem you need to know what you want chagibiti to uh to answer you because if you don't know as I do right now um striked it's strike how to display uh at striked striked text in react native striked 12. trike strike through strike through okay how to display a strike through texting Rec native come on come on come on let's do uh to display Cross or deleted texting racknet you can use text decoration line property prop okay this prop allows text decoration line line through CSS property Works in web development uh my man but that's not web development let's try let's try text decoration line line through uh stop please so four of uh text when we display the text here I want to add a conditional Style if it if item text decoration uh if item is completed that's going to be lying through uh otherwise so here like yeah I put a little bit of my knowledge how to render conditional styles nine okay and when we complete we display the text as strike through and here for this container we can also do a line a line a line a line items where is the line items Center Center justify come on why why where is the recommendation oh because yeah justify content Center uh align items I don't know why it's not working so I'm Gonna Leave oh oh oh oh because I need to do it here as well uh uh I don't need justify I need no I don't need the line items I need only justify it still doesn't work so no worries I think for the text is align items items Center align items okay never mind never mind um so what else what else we have seven more minutes uh let's add that time when it was created um so how to add the created at time uh for a new to do list object let's see how to Advocate it at time for a new to-do list object so if we've managed to display the time on the screen then we consider the application done because the to-do list application should allow you to import complete tasks delete them if you want to to delete and come on we need created that time for the new to-do list object come on come on come on it's five more minutes five more minutes please check and request time I would why why when I need it the most come on come on come on we need the intense music before I start singing no and how to add the Creator time for a new to-do list for a new to-do list item probably please please guys don't oh to add created a time to a new to-do list object you can use date object in JavaScript here is an example how to do that to-do list name items created at new date so yeah here it explains that create that will be displayed with new date so let's go ahead and in the add to-do list item that's also important like you will need to know where to put it so we are adding the text with the input values and the second up parameter will be created at which will be initialized with a date that it was created at now does it show us how to display you can also use the other methods of date objects such as tostring or to UTC to store the date and time in different formats how to render it on the screen um so I'm gonna take it step ahead and I'm gonna render it where where should we render it uh probably like after the button and we think it's a bit for the delete button we do not need this view anymore I'm Gonna Leave it because jgbt didn't tell us to do that so here let's do a text uh with uh but not here in the flat list in the Yes actually it's here text it's gonna be item dot created at and now nobody will have anything but if I'm gonna do come on come on come on please I need to see it on the screen missing semicolon where uh created at oh my God we are missing semicolon no no you don't have missing anything text everything is good come on original math had apply eight minutes my heart is racing original method what kind of original method come on what did I do wrong reload please no dot created at save oh my God where is it here no no please where I'm gonna stop the server and start it again you know I am a genius myself it means no no missing semicolon for a moment you had some other file opened it opened automatically missing semicolon way here oh my God I'm gonna comment out the whole flat list that's a very fast debugging uh reload uh I'm gonna comment how would they use effects they use effects uh reload delete to do please what did I do wrong git do you show me anything foreign [Music] what did I do come on complete to do where oh Style no no Styles maybe in the Styles missing semicolon tiles backend.js file you have a type of air where where back and adjust I don't have a backhand backhand backhand I don't have a backhand address I'm right oh no const here const const oh oh oh oh I'm gonna do z z z z uh uh reload what no no I didn't fix it I didn't fix it no text oh here text text uh item dot created created Created at reload no oh my God that's a fail that's a fail and it does so and I see the bug oh my God you will not believe it it's right here where it was showing me a yellow line all this way and if I add it everything is broken if I had it no it shouldn't be um time's up you're gonna sing yeah oh my God I'm so pissed why I am so close just I was thinking like five minutes to display created out like it's it's too easy come on I feel defeated and I still want to fix it where is it coming from where did I forget to missing semicolon in devtools in the devtools not modules did I by mistake did any changes in the node modules so if there are issues coming from node modules I'm gonna go ahead and do air ram RF node modules to remove node modules and install it again npm install uh yeah just npm installed oh my God all right yeah that's the sad part about it I still see the syntax error missing semicolon in react Dev tools no no oh that was from the previous one uh now let's try npm start I'd be so pissed that the application was actually working uh yeah the application I think was actually working it doesn't objects are not valid as a react native child created at dot to um UTC string or how no it was recommending us created that format oh this is with enthl two UTA two string two UTC string oh it should be a question mark yep here as well like some of them do not help now it has like Friday and so on uh and I think that yeah guys let me know ideas for songs and I'm gonna sing it in a moment but I want to put them to to make this application look a little bit better uh I want them checkbox to be after the text or better with text before the checkbox just like this um size 14 I don't know something like that not sure why it's so up there size doesn't exist does not exist on checkbox what do you have checkbox status color theme and that's it it doesn't have a size I don't know why it thought it has a size here what do you want uh uh quick fix disable uh I don't want it all right so here we have our application um it's working one two three I add something we'll um persisting work as well with the dates and so on and I find it's not a function oh because created add maybe we need to do a new date here because created that when we read it from them from the storage that created the date yeah I'm gonna do it like this when we read it from the storage the created it is was a string so we were not able to run two UTC out of that but now it works with new ones and it should also work with the ones that we read from the storage right away yes it does uh with delete button uh I'm wondering if what will it say like um how can I implement or yeah how can I Implement swipe to delete features in react native all right guys so uh this was the experiment uh we're gonna see maybe we can add some other features if you're interesting but that was uh everything that I wanted to do today um it was a very fun challenge trying to act as a beginner and try to use an AI to build an application and yeah like what have we learned out of this experience so far um we have learned yeah stay tuned by the end of this live stream for for the promise song we're gonna do that um by Van yeah we I already see some interesting ideas like Cucaracha is it a Christmas song I Don't Know um so what I wanted to say is that it turns out that you still need some knowledge of a technology that you are using in order to understand basically what code to copy you cannot simply and blindly go ahead and ask chargeability to build you an application and just copy paste things around that might work for like simple use cases but when you get into a little bit more customizable features and things that you want to build the way you want them to look in that situation you actually need to have a lot of context around react native and allow War around them the technology that you are using and you need that that knowledge about that tool in order to yell like as I said to know where to to copy the code where to put it from to be able to detect bugs because we saw that chargeable team uh even by default was producing some bugs here and there because it's not perfect but why it's not perfect because it was taught based on the code that we developers wrote so yeah like various different code there is outdated code and I think for that reason we as developers should not be threatened by AI so far um at least like yeah like for this for this time I don't see AI as our enemy I see it more as our friend so basically yeah like it's not here to replace our job it's here to help us and also it's here to open new opportunities for us I think instead of yeah like um what we did today asking jojobt to help us build an application this is just one use case you can build so many things using chagibi team and you can take charge gbt functionalities and the ability that it knows everything and Implement a business on top of it judgmenting is a very general uh AI model and it is our job as developers to take this technology and to put it and to solve real problems with it go ahead and brainstorm like what ideas you can build with it if you're interested on how you can Implement cha gbt and open AI in a project for yourself go ahead and check out this video we will leave it somewhere here from the previous week where we learned and built a fully functional application with cha gbt we actually haven't built one we built two application one web application and one Rec native application and both of them are connected to the same back end that is connected to chargeability and is providing Christmas gift ideas if you haven't checked that video out make sure to do that because it's a very insightful video it shows you step by step how you can implement it as well so yeah that's that's my take at this moment uh it's there is so many opportunities out there that we can Implement using charge gbt uh and it's a it's a thing that I would love to explore more and if you're interested let me know Down Below in the comments what other projects you'd like me to do and actually I was thinking about this and I'm gonna do it here today I know with a lot of people uh in the comment sections want me to build an application with flutter and I haven't done that so far I have never worked with flutter uh and my day is if this video gets 1000 likes then I'm gonna do a similar style of this video however in flutter and what I'm more excited about that video is today I had some knowledge and experience with react native and this Challenge and even though I had this experience I failed the challenge and I will do that I will sing the song in a moment but um my question is how can a beginner in a new tool use this and will it actually be that useful because I think that yeah like I used a lot of my knowledge and experience today and we followed this um if you haven't wrote uh reacting if you haven't built a rack native application yourself I'm not sure and I really doubt that chagibiti will be able to meaningfully help you um do that so if you're interested me to build react native applications make sure to check out our playlist and our tutorials on our channel uh we have a bunch of project build tutorials step by step where we explain react native and if you are at a point where you already build a couple of tutorials from our YouTube channel and are ready to advance to the next level as a full Stack mobile development developer then check out academy.nojas.dev this is our premium courses that is taking you by hand and teaching you the full life cycle of building an application from the drawing board implementing the user interface with react native building complex designs animations with complex things and when putting it together with a connecting with a backend designing the back end implementing everything improving the performance packaging it for production and finally delivering it to the users you're gonna learn all of this process in the course so if you're interested make sure to check out the link in the description because the enrollments are currently open uh and so guys let's see um what ideas do we have or what questions so I see La Cucaracha uh remember power tools did not replace carpet Carpenters exactly uh I think that we should not be afraid of disruption because that's the only way uh forward because it would be very selfish from our side to say oh we don't need all of these disruptions because it's gonna replace our job but why do you feel so entitled to have all of the Innovations like phone computer internet and all of this stuff um when the creation of the innovations that we are using today also contributed to a lot of jobs being lost so yeah think about this and we should embrace we should adapt we should learn we should befriend have the AI because in future like we might use it more much more often than you think oh ask chargerbt what song to sing that's a good idea um I okay let's see I lost a challenge to my beloved community on YouTube I have to sing a Christmas song suggest me a popular Christmas song to sing and show me the lyrics of one how's it called like paragraph I don't know one yeah I'm gonna do it like this let's see uh I I love your idea David like to ask jgbt to do something nowadays everything that we have to brainstorm uh with our team like uh for some reason I'm always like going back to how we were doing before and trying to think for example even for this video that you are watching right now um the way we came up with a thumbnail and the title was first we have idea we started brainstorming with everyone in the group chat what would be the title I was um um yeah I was suggesting a couple of them but nothing really clicked and then Catalin which is our video editor he's so uh he's so on chagibiti he's using so much and yeah like he's like let's ask jajibiti to uh to think about of a title and Vinci LGBT gave us like 10 titles that were all so good and so catchy um and yeah like we we chose one of them and we went ahead after that we had to do the thumbnail again we asked rgbt what you do for a thumbnail for this video and it recommended us some ideas even though like we didn't listen fully but it had like very interesting ideas to and to to do so yeah we are we already see the impact like we I got started uh with chagibit I mean I started learning about it a couple of weeks ago and now we already use it in our day-to-day job uh isn't it beautiful I think it is uh it's making our life easier it's making our job easier it's giving us new possibilities and I think that's that's really exciting uh do you have a tutorial about how to create responsive design we do not have that at the moment but it's in our list of tutorials so uh guys we have one popular Christmas song that you could sing is Jingle Bells here are the lyrics oh my God I'm gonna have to do it so look what we're gonna do we're gonna sing we're gonna sing and the worst part about this is that we're gonna sing uh without any music because that's gonna be copyrighted so that's gonna be even worse so all right I'm gonna sing only the first part I need a lot of water hmm um all right so here we go guys today I lost a challenge on YouTube uh because I haven't managed to build an application using chargeability in one hour what a bad developer even with an AI uh in the help I failed miserably to build that in the last seconds and it was a very stupid mistake I just had to reinstall the application here we have here is your song that I promise in a one horse open sleigh over the fields we go laughing all the way Belson oh my God what are these words bells and bobtail ring making spirits bright what a fun it is to write and sing a slaying song tonight jingle bells jingle bells jingle all the way I am going home thank you for watching guys and I will see you next Friday Also here at 3pm JMT battle super cringe sorry for that

Channel: notJust․dev

Views: 118,300

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, chatgpt project, openai react native tutorial, chatgpt react native tutorial, chatgpt tutorial for beginners, gpt-3 explained, chatGPT, how to use AI

Id: w6b1xnCcNoI

Length: 88min 58sec (5338 seconds)

Published: Fri Dec 16 2022