Building the Ultimate Workout Tracker with React Native & MongoDB

what's up nojz developers welcome back to our traditional Friday live stream I really missed going life during the holiday season but today we're are coming back with a fire tutorial today we're going to build a workout tracker and by doing so we're going to learn a lot of cool uh Technologies there are a lot of workout trackers out there and in fact I actually co-founded one of them fum you can search it on Market if you're interested but in this tutorial we're going to focus on a couple of Main and important features that a workout tracker should have first of all we're going to focus on building the exercise database that we will be able to search filter view the details of different exercises then we're going to build the logging experience in order to log your exercise sets while you're working out in the gym finally we're going to going to build the progress and we're going to show that on graphs and we're going to do all of this with the following uh Tex stack on the front end we're going to of course use react native with Expo with Expo SDK 50 and for the navigation we're going to use Expo router this is going to be a great tutorial to get better at these Technologies and uh on the back end this is going to be a full stack tutorial we're going to build both the application and the backend so for the backend we're going to build um a graphql API using IBM stabs in and we're going to connect it with multiple data sources on one hand we're going to connect it with a public not a public but an API that will provide us data about exercises and we're going to connect it with a custom mongod DB database that we're going to create we're going to learn how to host it with mongodb Atlas and that's going to serve as the database where we will store information about different sets that the user is doing so all of this together is going to be connected with graphql and uh we're going to use IBM stepen to do that and actually stepen is sponsoring this video so thank you very much I IBM stepen for making this project possible if you're not uh yet familiar with stepen this is a unique way and a very easy way to build a scalable graphql apis in the cloud by simply declaring a couple of lines of code and letting steps then handle all the heavy lifting for you in fact you're going to see in details how everything works during this tutorial so if you're ready let's get started I'm really excited let me know in the comments where you watching this from and let's roll the [Applause] intro as always I prepare for you the asset bundle you can download it at assets. noz.de workouts and where you'll find this presentation that is going to help you move along and also some dummy data and the source code of a final application when we will finish everything this tutorial is going to be split into three parts everything is going to be done today in this video by the end uh and in the first part we're going to focus on the user interface on the second part we're going to focus on the graphql API and lastly we're going to focus on the functionalities for the workout logger features let me see the live comments and if you're ready I think we can get started hello everyone uh F Al is saying that he watched all 24 videos from demember that's exciting yes we we did a lot of tutorial in December um anyway let's geted started and I'm going to come back to the live chat uh throughout that tutorial but uh we are limited by time and I really want to manage to do a lot of things today so let's go ahead and um start by initializing a new project using Expo to do that we're going to open up a terminal window and we're going to use the create Expo up tool to initialize and bootstrap a new Expo project Let Me Clear everything let me actually go to a a folder where I keep all my projects uh somewhere there yes I think it's here um give me just one second to change this one to yes so now when you are navigated when you have navigated to a folder where you keep your projects let's go ahead and initialize our Expo project for that we're going to use npx you don't have to have anything installed on your system other than nodejs and npm and we're going to use the npx that comes with nodejs npm and other tools and we're going to use that create Expo up this is a little tool to initialize Expo applications we're going to specify at latest in order to take the lat latest version of this tool and then we're going to provide the name of our project the name of the project will be workouts and DHT to choose a template and I'd like to start with a blank template in order to help you and show you step by step everything that you have to do including setting up um exper router because if we start with a template and if you don't know all the um all the things about exper rou is going to be a little bit confusing to to have like a a initial project with a lot of files so starting blank and doing everything ourself is going to be the best approach and I hope everyone will understand how to do and follow along and Implement yourself while we are waiting for our project to initialize uh let me see the live chat uh Vol VY hello from Russ hello hello from Sri Lanka hello mishan let me zoom in a bit like this I'm still um testing with the how's it called the teleprompter so I'm reading the comments from the teleprompter Tanzania East Africa hello the island of gu where is that long time no see yes yes we it was like three weeks or something like that I really missed going live um and yeah um we we actually planned a lot of live streams for this month we're going to do probably twice a week because we have so many ideas you also submitted a lot of project ideas during November so really want to get in a lot of them all right so after we see this message uh your project is ready let's go ahead and open it up I can do LS to see that it actually generated this folder workout in this directory go ahead and open it with your editor of choice my editor of choice is Visual Studio code of course and I'm going to open it up using a shortcut code and the name of the folder that I want to open if I check here here is the um project that was generated before we actually jump into this structure and files I'd like to go ahead and uh I'd like to go ahead and start this project to see it running on a device and after that we can talk about the the project structure so let's go ahead and open a terminal here inside Visual Studio code and let's go ahead and run npm start npm start in fact will run Expo start that will start the Metro bundler uh and this is going to be where our application is connecting and taking the the the the bundle the JavaScript code to run the application we see here a QR code and this is going to be the easiest way to run the application if you don't have uh the environment set up with xcode and Android Studio what you have to do is go ahead on playm Market or App Store on your physical device and download Expo go Application after you have done that simply scan this QR code with your physical device and you're going to be good to go and be able to see application running in my case I'm going to run it on iOS simulator because I have X code set up on my system so I want to for you to also see my um emulate simulator but for this uh in order to run on iOS simulator we press I to run it on Android emulator we press a and for these two options we actually need a a a bit of environment set up to run an iOS simulator we need xcode and xcode comes with the iOS simulators to run it on Android we need Android studio and the avd emulators from Android Studio where is my emulator here it is is this the application that is running yes if I press if I double press R this will reload the application and we see that it's actually actually bundling and taking the code from here at any point in time if you mess up something here in the in this editor and you don't see the menu just click C and this will clear the terminal and show you the menu from where you can interact with your Expo server now what we see on the screen is open up upjs and start working on your application let's actually do that if we open app.js this at the moment is the entry point in our application uh and if instead of this text that we see here if I'm going to say hello world save a file it automatically updates um and refreshes on the mobile phone without any kind of um manual refreshing or so on I'm also going to make sure to set up maybe I'm going to set it up a bit later but no let me actually do it now this is an optional step as you can see everything is working fine but my V code uh doesn't like what I'm using here GSX and I will press on this JavaScript at the bottom or maybe on this thing and then configure GS config this is adding a new file in my folder called GS config with some default configuration and what I will have to change is this GSX I will do react GSX and now if I look at the up. GS everything is fine here again this was optional if you don't have any red warnings you don't have to do that in my case I had to do it all right so here it is here is our upjs and here is our first page that we see see on the screen what we're going to need is we're going to need some dami data of a list of exercises because the home screen is going to be probably a list of exercises if we open uh one exercise we are going to see the detailed page of that exercise if we look in this UI the first step is done we set up a project with Expo uh let's import the dummy data and the dummy data you're going to find by downloading the asset bundle the link is in the description below it's also somewhere pinned there and you can find it at assets. N.D workout after downloading this you should receive you should have this workout assets with a presentation and the data folder let's go ahead and drag this data in the assets directory so if I open assets now I have a the data there and in the data we have a Json file with with a list of exercises this is an array and every exercise is an object that has name it has a type muscle equipment difficulty instructions and so on let's go ahead in back in our app. GS and let's import our exercises Dam data later on we're going to query this data from our API but I don't want to over complicated straight from the beginning so that's why I'm providing you with this Dam data so that we can focus on the UI first let's go ahead and import these exercises from where from we are in app.js so we need to go first in the asss directory but the assets is in the current directory so dot when assets after that we go into the data assets data and we take the exercises do Json file now if I go ahead and for example inside our app inside our location if I go ahead and do console log exercises where will we see this console log this console log we're going to see if we look inside the terminal that is running our application that's where all the debugging errors that's where all the console logs are going to appear so as we can see if we see this amount of data it's a lot of data then everything is okay and we imported actually correctly our exercises data and here is a good way to explain like if we you want to go back to the menu just press see in your on your keyboard and you're going to go back to your application from here you'll see that by pressing R inside here you're going to reload the application and for some reason it didn't want to reload from the terminal but if I double press R when focused on the emulator it's going to do do that anyway here we have a list of exercises let's go ahead and only console log the first one the exercises position zero if we check that's going to be that should be a an object with a properties difficulty equipment instruction class and name okay let's go ahead and take this and store it into a sep separate variable called exercise and let's take exercise at position zero for example now we're going to work with this exercise to try to render information about it on the screen for example at the moment we see that we're using a text element a text component imported from react native it's rendering hello work world but what if we want to render the name of exercise you might expect that we will do exercise. name but that will literally say exercise. name on the screen so how do we access JavaScript variables inside our GSX syntax we do that by putting it inside between cly brackets this is sometime called a portal and it offers us access to JavaScript variables and JavaScript Syntax for Expressions just by doing that we see that the text became incline hammer curls that's nice that's perfect uh and we can for example render another text below that with the with the exercise dot what else do we have there maybe muscle and we see that this is a biceps exercise maybe besides muscle we can render some other text for example you can say muscle is this one and after that we can add something like equipment the equipment is going to be exercise do equipment so just like that we see see both the muscle and the equipment in the second line here perfect but how do we style these texts to style the text we can provide a style property and a style property is something that most component has here we are starting with a cly brackets to to open the portal to JavaScript and inside this cly brackets inside this portal we're going to add another cly brackets for the object that represents the styles of our text component in rack native we are styling everything with simple objects and the objects and yeah like let's say the property names of The Styling they are inspired by CSS but they are a bit different so for example if we want to increase the font size we're going to use a font size property and we can do here 20 as we can see the font size of this one already increased you can increase it even more 24 I will leave it at 20 but I will increase a bit the font weight the font weight can have a value like bold and it's going to be actually bold or it can have a value from uh I don't know let's say from 100 to 900 where 700 is bold uh 400 is normal and let's say 500 is a little bit more bold than normal so I think I'm going to go with this 500 for the second one I'm going to give it a style and I only want to decrease the color to decrease the importance of this message and by decreasing the color to let's say dim gray or just gray I don't know which one is but dim gray look looks okay for the exercise do muscle what I can do is I can do I will leave it like this so just like that we are displaying and we are learning how to style a bit our texts so far we are styling everything with inline Styles that's okay and in some cases I do that as well but in as a best practice uh we are trying to extract and separate the logic of rendering which is our jsx with from the logic of styling that is here to do that we are using a Styles sheet that is also imported from react native uh where we store different objects for our styles that we have here for example this style for the exercise name we can Define it in the Styles sheet with a property name that we want for example exercise name and here we're going to put all the style parameters that we want let's copy it from here and put it inside our Styles shet now let's switch from an inline style to a style that we Define using Styles shet to do that as you can see our inline style is this object that is the yellow curly brackets let's go ahead and delete that and we are left with only one pair of curly brackets for our JavaScript portal and here we can access styles do exercise name just like that we have the same Styles but now they are not in line they are separate from there we can do that as well with exercise uh subtitle and for the exercise subtitle I'm I'm going to move a color that we specified there I'm going to move it here and let's remove object and let's access styles. exercise subtitle okay that's fine okay but uh at this moment if we consider that this view a view is a simple container similar to a div in web development we're the the initial view here is if we consider it the view that represents the whole page that means that our exercise does not have its own container so we cannot style it independently for example if I want to only add some background color to to the exercise or some Shadow or something like that if I'm going to add it to the container like here red like the the whole page is going to change I want to add maybe some styles of on the row that represents one exercise for that let's add some spaces here and let's wrap our text inside a view this is a container and now this view represents one exercise let's go ahead and give it a style styles do exercise not name but contain so far we didn't Define these Styles yet but let's copy it and let's define the exercise container here for example if we want to change maybe the background color I think a a good way is going to be if the background color of the exercise row is going to be uh white but the uh the page is going to be something like a gray maybe a gains borrow this is a very light um version of a gray uh or maybe like a snow white but I think games B is fine now the thing is that yeah we have like the exercise container with white but why is it so cramped well one reason is that the container that represents the page has this Justified content Center if I'm going to remove that we're going to the justify content Center let's leave it but let's try to remove a line item center with makes the exercise container centered there if I remove now the line takes full we of the screen we need some probably um some pading on this container so let's add padding 10 in order to make sure that the line doesn't go all the way till the edges of the screen and inside the exercise container we can also add some pting to have some putting inside this line uh it's going to look better if we round the corners using border radius then um yeah I think that's fine fine border radius okay yeah I think that's that's nice I'm going to simplify a bit I'm going to remove a muscle I'm going to actually only leave a muscle because it's clear like if it's bicep that means that it's bicep and the same thing I'm going to do with the equipment uh and in order to make it look better maybe we can do it's a string so two not to uppercase but to how is it called to let's let's Google it JavaScript capitalized text first letter is there capitalize do cap capitalize will it work undefine is not a function if I do here ABC no capitalize to local local to lower to string to upper case oh boy let's do to uppercase everything I'm not sure how well it will look but that should be exercise dot muscle and the same thing for the equipment to uppercase okay uh now in I would also like to add a little bit of spacing between these two lines there are different ways you can accomplish that either you can add some margin bottom on the name like this margin bottom five I think that would work it adds the spacing or uh if you don't want that there is a gap property and if you add it on the container if we add Gap here five it's going to add this gap between all the children so I think this is a more elegant way okay okay that's that that looks okay that looks nice uh maybe uh let me see yeah I I'll stop here for the style of one line and then we can see if we need anything else let me check the like the the comments I think I will also do um a commit so that you're going to have a nice history of all the changes that we have done let's do git status get OD get commit um exercise or let's do render one exercise all right ignite boilerplate tutorial that would be uh that would be nice i' would really love to to check that why not tamagi I love tamagi I think we have to do a separate tutorial as well actually I have a startup that I'm building using tamagi and it's it's nice how to play video in the background with player control and notification in Expo uh for that you'd have to probably um build a native module or maybe there are some solutions out there I haven't checked that out yet uh JavaScript doesn't have a capitalized string method sadly oh yeah um for some reason I I remembered seeing something maybe it's not available in uh ER Miss maybe it's because I remember something like that where I was using some something from from um low Dash or how was visiting your home country it was nice I managed to to also do a lot of work but to spend some time with my family and I also managed to get sick twice so that's not fun that was it was quite cold there and we managed to get a flu and ah nasty okay so let's continue now we have one um we have and we are able to render one exercise if for example I'm going to change the index here to one we're going to see that it changes the name and stuff like that but how do we render a list of exercises to do that we have a separate component called flatlist in rack native and I'm going to render the flat list here inside the our page so let's render the flat list the flat list will be a self-closing tag compared to a view that we open and close here a flat list uh doesn't have any children doesn't have anything inside it the flat list is managed through properties and there are a lot of properties on the flat list that we can manage but there are two required ones the required properties are data which should be an array the array of data that we want to render as a list our array is this exercises because if we look at V Json V Json is an array of items the second property is called render item and this should be a function that specifies that tells flat list how should it render every single item in this array so that function uh similar to a loop is going to be called multiple times for every single item that we provided and what we return from that function should be a GSX representing what user interface what should we render on the on the UI for every single item there because it's a function let's start by defining this render function sometimes if I just spit it out like it's going to be a bit confusing so let's take it step by step as I said render function is render item expect a function that returns some GSX so let's do this function maybe I can do it like even like this this is a function right and it should return some GSX what GSX should it return what should it render on the screen well it should render this exercise container because as I said render item is going to be called for every single exercise in that array so for every single exercise we need to render one exercise container just like that now we see a lot of exercises in this list we're going to fix the Styles and so on but now let's let's focus a bit on on this render item the problem is that now all of them are displaying the same data well that's because inside this component we are using exercise that is always the same but how do we know like which item we are currently rendering because render item is going to call this function for every single exercise in the array we're going to know that because the the flat list will give us the item will give us a lot of options in this function so there will be let's say props one of the properties there is going to be called the item the item that we are rendering so inside here if I will change from exercise. name to props do item we're going to see that all the names are different and they are exactly like first one is inclin Hammer cool curls we see it here white grip and so on so the properties has is an object that has a the item in vyor let's go ahead and simplify this by destructuring the item right away from the props so instead of props I'm going to add querly brackets to destructure a property from that object and the name of that property is item now we can simplify this to item. name and we can use item do something for the other instances where we are calling the exercise this way now all the data is coming from the item data besides the item there is also index and the index can be like I don't know let's say index Dot and the name so we are going to see one 0 1 2 3 4 until nine uh I'm not sure if we need the index I just wanted to show you that you have a index of item that we are rendering and because this is an arrow function this can be simplified because we are not doing anything here we are simply returning so I can remove a return statement I can remove a bracket from here the opening one and the closing one from here make sure you properly delete the matching ones and I will remove a semic colums from here and then I'm going to press save and this will become a simple roring statement because in Arrow function if we don't provide the curly brackets the expression is going to be automatically returned from there so now it becomes much easier now we don't need the exercise here because we are not rendering one of them we are rendering a list I mean all of them and the next step to even simplify more this flat list is the render item H this this is true for Loops as well usually when we have a loop the logic that we have inside the loop should be extracted into a separate function that handles the execution or the the the logic for one item then you can take the logic of one item put it into a loop to handle it for all the items that's the same thing here a flat list with render item is a loop so the logic of rendering one item should be extracted into a separate component and then the flat list will become much cleaner how to do that we need to create a custom component custom component in react is a simple function so let's start with you can declare declare it with function where with arrow function it doesn't matter um it's personal preferences here because we have function app I'm going to go with function but I really like change it all the way from Arrow function to name function and so on let's give it a name to this component it should start with capital letter and it should be we are defining a component for one exercise exercise list item this is going to be a function and it will return some GSX something to render on the screen what it will return well exactly this thing we View with style with item and so on come on why I don't want to come on should be like this uh well where do we take the item from the item is going to be a property of our custom component a property comes from through here through props props and we can go ahead and right way destructure it instead of taking props do item we're going to destructure the item from the props like this so now we're going to have access to the item let's go ahead and render the exercise list item in the render item here like this let me to render a custom component it's similarly to how we render anything else that we use so far like a view or flat list we are using these brackets uh we are say providing the name of our component exercise list item exercise list item and because we don't have any children inside it we are going to have it as a self closing tag but we need to provide a property item that we expect here and the item the value to this property is going to come from the render item here and just like that our flat list now becomes super easy to understand when we look we see that it has data which is an array of exercises and it has a render item which simply renders one exercise list item the next step is going to be to extract this custom component into into its own file uh the rule of f is to have one component per file with some exceptions but yeah this helps us keep everything clean uh where are we going to create the file for this exercise list item it doesn't really matter but I like to keep all the source code for our application inside a folder called s SRC and V we're going to create another folder called components this is where we're going to store our reusable components let's start with exercise list item. GS or better GSX specify that this component has also GSX syntax the GSX is this syntax that you see here for rendering user interface elements components now let's go ahead and take take the the function exercise list item I will cut it from here from our app.js and I'm going to move it to exercise list item here we see that we also have to import the view the text and so on and when this happens I usually like to come back and take all the imports from the previous file move them to my new file and vs code tells me what what which ones I don't need and it highlights them with a gray color for example exercises I don't need it here flatlist I don't need it here Styles shet I will need it in a moment and status bar I don't need it here same thing with the Styles I will go back to up. GS I'll copy the whole Styles shet from here and I will move it to the exercise list item component and I will make sure to remove the styles that I don't use here for example container is something about the application not something about the exercise list item now the last thing to do here is to go ahead and Export default this function to be able to import it in our files let's go back to our app. GS and let's import exercise list item from from source components exercise list item now everything is working we see it here but let's uh finish everything by cleaning up our app.js Styles because here we only need styles for our container so I can remove the ex the the styles for exercise and what else what else um we think that our list is displayed below the notch this can be solved with a safe area view I don't want to get into that because this will automatically be sold when we will introduce navigation so simply adding margin top 70 here will solve this issue and it will even add maybe not margin top but padding in order to have the same color yeah pting top like this now now how do we add space between these items that we have here well one way would be to add some margin to the exercise container but as I said usually spacing between items is better managed using a gap property we have a gap property where if we add the Gap property on the container nothing is going to change because the container even if it looks that it's the parent of our of our exercise list item in fact the parent of our exercise list item is a component inside flat list so the flat list renders a component and then it renders inside all the exercises what we can do is we can provide here a style property and we can provide this Gap here Gap 10 again nothing much changes because the style is for the container of a flat list but there is another container called content container style and if I add Veer only now it will work so five probably is going to be better perfect just like that we have our flat list we can scroll through it if we're going to have more exercises for example if I'm going to double the amount of exercises that we have here you're going to see that we can easily scroll through them till the end perfect I'm going to go back see it here and the last thing I want to show you about a flat list where is in our r. GS we have a flat list whenever we render lists of item either with a flat list or by simply mapping for an array and rendering them they should have a specific key property in order for re to properly um um cach vam and render only specific elements in a flat list this key is automatically can be automatically handled for us and this is happening when our data has either an ID or a key property because our data doesn't have an ID nor it has a key property what we can do is we can tell the flat list how should it extract the key from our data key extractor is a function that will receive the item and from the item we have to specify what is a unique key for that item well we can take the item. name in this case and it will use the name of item as the key it will work perfect in a lot of cases it might not work well if you have duplicated names for example if incline hammer curls is going to be for both of them we're going to see this error encounter two children with the same key so make sure that your key is something unique that identifies the item and if you have an ID or a key you don't even have to bother about the key extractor it's going to be taken automatically perfect so now we assume that the names will be unique so we leave this key Constructor name you can also take the second parameter I think is the index and you can have a combination of name plus index and in that case even if the name is unique it will have a index at the end which will make the whole combination unique all right but yeah I'm not sure if I need that but we can let's let's leave it like this and if I reload the application let's make sure that we don't have any errors no we don't I going to go ahead and do git add git commit uh list of exercises perfect how are you doing guys are you following along connected from Kenya hello Brian in Styles sheet you can provide TX transform capitalize that's uh that's perfect to be honest and yes it will work so this is a little trick about Styles that's where I was I was taking it from in the exercise list item um if I'm going to H but in that case I will need to let's say remove them from here and I will also have to put them inside their own texts to capitalize them independently this one and the second one and I will provide here a style styles do mod I don't need exercise here I need U I don't know um sub value something like that and I will give it to the second text as well and if I go to the sub value here I can do text decoration right text transform and there is the capitalize and we can capitalize it not from the JavaScript but from the styles from the Styles and yeah it actually works okay perfect get add capitalize thank you very much for mentioning that we need Expo typescript we need typescript it's super easy to add typescript just simply rename abjs to ab. TS and rerun the project and Expo will automatically detect that and uh configure your project with typescript so yeah you can do that I'm not sure if I want to do that right now maybe I will keep it simple with JavaScript to be honest but if we look at our plan plan of attack for for the UI we use the dam data we render a list of exercises the next step is going to be to use exper router to set up the navigation in order for us to create the exercise Details page that sounds like a plan and we can get started with that first of all export router what's up with export router well whenever usually our applications have multiple Pages it's rare that we have onepage applications for that we need a navigation Library the de facto navigation Library so far for re native application was rect navigation it provided different types of Navigators like tabs stack drawers models and so on uh but the think about about R navigation is that we had to yes we had to create the screens that's obvious but we also had to separately configure these screens into for example into let's say this TXS [Music] and we had to build the navigation tree ourself I wanted to show you an example I cannot find something interesting but you you can imagine now the I think one year ago um aan bacon worked and launched the exper router exper Router is the first file based navigation system for react native applications how does it work it works by as a developer we simply create files and folders in a specific structure and it automatically Maps them to screens in our application so we can wish we can Focus only on building screens and not thinking a lot about configuring them into the navigation tree and so on it comes with additional benefits like deep linking um and after yes initially it's it's a learning curve it's something new it's something different especially if you haven't worked with other file based navigation systems but after you get used to it it's really simple to add new screens to restructure them in your navigation Tre how however if you had experience with nextjs for example which also uses a file based navigation system it's going to make sense for you a lot easier so that's what we are going to use today let's go ahead and find the documentation of exper router and um another note is that explor router is built on top of R navigation it's not different it only helps us set up the r navig it only sets up the r navigation for for us and a lot of configuration for different screens um where they are coming from RE navigation and sometimes we actually have to go for example to see how to configure a tab Navigator or how to change the icon or something like that but let's go ahead into the Expo documentation for the Expo router and let's go right away to the installation the quick start shows us how we can start with tabs but I want wanted to show you how we can start from blank and set up navigation ourself so let's scroll until we see the manual installation in XO SDK SDK 50 which was released a couple of days ago from at the time of recording this live stream if you watch it later it's going to be probably longer and so the Expo dk50 works with Expo router version fre so let's go ahead and the first step is to create an expo project we already have that check the second step is to install the dependencies so for SDK 50 and above let's copy this list of dependencies let's go in our project let's open the terminal let's clear the terminal and let's paste the command it will go ahead and install the exper router and a couple of other dependencies that Expo routers needs like R native screen like Expo linking constant status bar and so on let's wait until that happens why not using export outter V free we are actually using export outter V fre if we look in the package.json right now after installing it uh we will see that we have exper router version 3.4.3 maybe uh it's going to be different for you but it it at least should start with three perfect let's go back to the documentation and we need to set up the entry point at the moment our entry point as I was saying is this app. GS and if we look in the where in the package.json we're going to see that yeah like the main the entry point is something coming from Expo up entry in Expo router we need to change this so this is done only once and then we can forget about it so let's copy this main line and in package.json change it here make sure to add the comma at the end and now the entry point is Expo router uh we need to modify the project configuration to add the scheme this is used for deep linking uh and in app. Json in this configuration uh I like to add it after the slug we need to add the scheme the scheme is going to be used for deep linking and for example yeah let's call it workout uh we can also install a couple of additional uh dependencies and out of a box our application will also work on the web as well yeah let's let's do that to follow like step by step everything even though we don't need them at the moment uh let's install rack native web and R Dom these two Li these two libraries will uh allow our application to run on the web as well the only thing that we have to change in up. Json is to say that the web bundler should be Metro let's go to ab. Json let's scroll down until we see web and let's add here bundler we want Metro to bundle the code for web okay next step is to modify B.C config.js and what we have to do is we have to add these presets for the Babel preset Expo let's see let's open Babel config.js we have presets and it actually already is here Babel preset Expo and if you're upgrading okay okay that was it now we will have to restart our server and also to clear the cache let's go ahead and go to where our application is running and let's stop the server let's start it but let's provide Dash d-- clear if you using with npm start you need these two a set of two dashes if you are running npx Expo start you don't need them don't need two of them now let's run it on iOS I will close the old one and run it again and what we should see is the homepage of Expo router welcome to Expo don't press this button yet um this is the homepage when we have exper outter installed but we don't have any screens yet again I said exper router is a file based navigation system the way it works is it it looks into a specific folder called up and from the up directory everything there is are the screens that Expo renders at the moment we do not have up directory you can either create it in the root directory or also in the source as well so let's go ahead in Source create our app directory and this is the Expo router folder again everything in here should be about screens and layout nothing more nothing less and the first screen that we're going to Define is is going to be a home screen a home screen usually is called index.js inside this home screen let's go ahead and move everything that we have currently in app. Gs because that is our home screen let's move it to index.js let's save and in fact we no longer need up dogs so after you confirm that you copy pasted correctly you can go ahead ahead and delete app. GS here because it's no longer needed now all the screens are inside the up directory let's go ahead and probably we're going to restart it again where I'm going to reload to see if it sees the new screen that I added if it doesn't see just simply yeah it doesn't see so oh no it actually sees uh the problem is that now that we moved the code the relative path is different so assets is no longer in the current directory it's a couple of directories above like this I think so and the same thing for exercise list item a couple of directories above and let's reload yes here we have here we have our application uh using Expo router and as I said the problem with the above is going to be solved when we include navigation so in the container we no longer need this pting top 70 I'm going to remove it so now it looks like this maybe the games board is is too dark what is a lighter version of of gray rect native colors I can take like a proper color but I'm lazy and I'm going to use something from here uh very very very light gray ghost white I think it's ghost white yeah yes ghost white uh should be Quest White H maybe I should remove it from here let it be wide background and in the ex size background here let's use cost white I don't like it yeah I'm going to have it like this maybe adding a background for our item H not a background but a shadow for our items it's going to make them look better to add a shadow uh I usually go to a shadow generator react native Shadow generator and the first one here is a tool that simplifies the way of creating the shadows I'm going to decrease it to a value of two and I'm going to copy these tiles very different I'm going to go to the exercise and I'm going to put them on exercise container here and also add comment Shadow and yes now it looks a bit better I think yeah I don't like that it doesn't have the shadow on the left and the right is like very H maybe a margin horizontal two or three like very small one just for us to see the the shadow there yeah now now it's better okay perfect uh perfect perfect perfect looks good we have our R navigation set up but why did we do that we did that in order to have a separate page for the details of our exercise before I move to the next step let me go ahead and commit everything set up Expo router setup exper router all right so again why did we do that we did that in order for us to be able to click on one of these items and open the details page where we will where we will show more information about the exercise and maybe later one like a graph and so on that is going to be a separate page a page or a screen in export outer to create it we simply create a file inside our app application folder so let's create a file called exer size exer size do GS here let's let's do what um let's export come on come on my keyboard export default function exert size details screen this is going to return let's start with a view that is going to represent the container of our uh page and the view is imported from react native and let's simply render text here exercise details the text should also be imported from react native from react native at this moment uh how we cannot navigate there uh if we however run this application on the web here by pressing W here inside where here you see press W to open on web if we do that uh we see the list of items and on the web navigating to a page is much easier because we can simply change the url at the top so at the Top If I simply add to the Local Host slash exercise we see exercise details that means that the screen is automatically created for us by Expo router now I just wanted to show you that by simply creating this file and exporting a a component this component becomes the screen that is rendered when we navigate there and the path of that screen represent present the URL or the name of a file including the different folders that it is inside so for example if it's going to be inside another folder we're going to have to do multiple slash for example exercise slash details now uh we actually want to navigate when we click on one of these items right to do that there is a component called link let's open exercise list item and let's import a link component from export router link from export router a link is similar to a text component so I will start maybe you can just watch it for a minute watch what I'm doing because I'm going to end up with a different solution but now I just want to build towards it so a link as I said is similar to a text component and I can simply replace this text that represents the name of them exercise with a link here a link however needs a h similar to how we have on the web the links on the web and the hre is going to be slash exercise because that's the name of the screen and that's the path of that screen exercise like this now if I simply press on the name we see that we are going to the page and I can probably swi from here to go back which doesn't seem to to to happen but we're going to figure it out and fix it in a moment by by defining it as a stack anyway to just go back simply double press R to reload the application and you are back here the problem is that right now the link only works when we press on the exercise name if we press on the container container it doesn't work we in fact yes I'm going to for that reason I'm going to go back to having a text component here uh because we want to navigate whenever we press on the whole container of one exercise so what I'm going to do is I'm going to wrap the whole view the whole container inside the link like this link needs hre let's give it hre as we remember it's exercise okay stuff broke but at least I can press and it goes there stuff broke because uh by default link is its own component if we want to render the child component as the link We simply provide to the link as child property in this way the link is only logical thing there and at the end it actually renders this exercise container with its Styles now the styles are fixed but when we press on this it doesn't H nothing happens why because whenever the link is uh working as as child the child should actually have the own press event the on press event to handle the Press events when the user clicks it the problem is that a normal view does not have this on press event what we should do is transform from A View to another component called pressible which is very similar to how a view works but at the same time it can handle press events we can simply re replace the view with a pressable make sure the closing tag is also pressable save and now if I press on it it actually redirects because a pressable has this on press event and behind the scenes because the link has this as child the link will send and set the on press event when that happens it will navigate to the slash exercise so just like that the whole container of our exercise list item is clickable uh yeah perfect perfect uh uh the next step is next step is in this exercise page we need to know on what exercise did we landed did we click on the incline hammer calls or like Easy Bar Coral or which exactly which exact exercise did we click on for that we need to send some data in exper router uh the way we do that especially with these situations where um we navigate to one item we don't want to send the whole date about the item that's a rule of f for navigating to different screens when we navigate from a list of items to the detail screen we don't want to send data about the item we only want to send identifiers and let the screen handle the data fetching and man the data for itself knowing the identifier so for that reason um going to the exercise we're not going to send if I open the data we're not going to send the whole object like this we're only going to send the name there and the page The Details page will handle the the logic of getting the data for itself how do we send data how do we have Dynamic puff parameters to do that instead of in the file name instead of a normal exercise name I'm going to rename it and I'm going to use the square brackets and this represents a dynamic puff parameter for example if I do here name what we are going to to get is we are going to get here uh using a hook imported from use local search parameters imported from export router we can access inside our component params we can access this data that is dynamic we can access them here and the parameters will have a property called name because that's what we called it here and we can do console log params maybe I'm not even going to console log it I'm going to do exercise details and then I'm going to say perm. name if I press on one of these things we see exercise details exercise why because that's the value that we are currently sending when we click on one of the items we are redirecting to slash exercise and if I will do here like um bicep bicep curl and if I'm going to press on them it's going to have bicep curl here the fact is that we want this to be a Dynamic Property coming from the item so what I'm going to do is I'm going to move from a normal string to a template string using back tick this is below the escape button and now we can instead of the static string here we can provide a dynamic puff parameter called item do name I'm not sure how the spaces are going to work there but let's check if I press on the incline hammer curls we see exercise name incline hammer curls I'm wondering on the web how this works I think that the link automatically uh URL encodes that you know because in a URL we cannot have spaces I can check that by simply running it again on the web go here and if I press on the for example incline hammer calls yes indeed in the URL we are URL encoded perfect so it simplifies a bit our work because I was thinking already about how will we work with a name will we have to URL encoded but it automatically does that for us and on the detail screen when we access per rams. name it automatically decodes it and when we display it it displays as the name of the item so knowing the name what we can do here is we can do uh import exercises from uh assets data exercises do Json and we can look for we can look later on we're going to query it from the database but now we can simply do the exercise that we want to display is going to be inside V array and we're going to find it by doing find and here if the item. name is equal to params do name that means that that's the exercise that we want to display and because in some cases it can be missing if we provided a different URL we will check if exercise is null or undefined we're going to return here simply a text saying exert size not found otherwise we're going to return for example not par rams. name but exercise. name and maybe even exercise do something else so if I do this one we see a name but we can also have access to other things like type let's say strength what we can actually do is we can start from some of the styles that we have here with exercise name and muscle equipment so let's copy this text components from our exercise list item inside our detail screen and let's replace our current text with these two text boxes we need a Styles shet so let's import a Styles shet from react native at the bottom of this of a component let's create them sty using Styles sheet. create and here we're going to copy the the exercise subtitle the name and sub value these three Styles let's copy them here and if I'm going to go to that thing well it shouldn't be item it should be exercise right because here we're working with exercise so now if I will press it yes it has some Styles already ready yes it has some Styles and maybe I will add here a style on The View that represents the whole page so that it will be called container in order to add some maybe spacing to to to the whole page come on uh container the container is going to be is going to have a pting 10 for example okay now it's better so as we can see uh not only we can have static URLs we can also have Dynamic path parameters and this is usually how a lot of web application also works for example if you go to Twitter and you go to a user is going to be slash username or something like that on YouTube that's the same and now we can do the same Concepts the same logic on mobile as well having this Dynamic Property um what I wanted to show you now is how can we add like a a proper header that we are used to and be able to press go back from here the the header that I'm referring to is actually coming from Rea navigation from a stack Navigator if we look for stack Navigators here we see that the tack offers us this user interface where we can go to a screen then we can go back to it and it will also provides us with a header I'm not sure why it doesn't show it here you usually it shows so how do we say that our application should be a stack navigator to do that we are using a special file called called layout let's start by creating the underscore layout. GS I like I think I will move everything to GSX to to stay consistent uh yep and back to our layout the layout is the file that is wrapping around our different screens so the app the layout inside the app for folder is usually called the root layout and this layout is going to be rendered on every screen in your application usually the root layout is where we for example also set up Global providers but for now we only need to set the navigator that we want to use for our application for these two screens that we have so let's first export a default function called root layout and if we return nothing then we will lose the out all our screens because as I said the the app layout is wrapping around the components that we are R the screens all the screens that we are rendering so by returning null we are basically overriding the screens if you want to Simply render the screen that we are on we are going to render a slot imported from export router so by simply rendering a slot we are saying that hey simply render the screen and everything works we lost some some Styles but that's fine a slot is simply saying like hey render the screen however if we want to put this slot inside a navigator like a stack Navigator a tab Navigator a drawer and so on we can do that by importing in here a stack component from Expo router and rendering the stack here just like that we have a header we can go there we see the name we can go back and we can navigate through it properly nice uh and I think now we can even uh remove this ghost white because the the stack has some background the default background that looks better than my ghost White uh your question now might be okay but how can we adjust some of the stuff that we see here in the header for example I don't like the the title here the title by default are taken from the name of our file if we want to change it there are a couple of ways one way would be to instead of rendering a self-closing stack here we can render by putting in to this we can render a closing and a an opening and a closing stack and inside wayer between the opening and closing stack we can provide stack. screen components where we can adjust settings for our screens the way it works is we provide a name and the name should match the screen name that we are targeting for example index in this case and then we're providing options options this is coming from react navigation so options screen options where is it stack stack Navigator uh options here are all the options that you can provide to a stack navigator for example we can provide a title here so if I provide here title exercises we are going to see that the title of this screen changes to exercises another way of changing the the options of a stack screen one way is through the layout where we render it here but we can change it directly in the screen as well so for example I'm going to go in the name in the Details page of um an exercise and here what I'm going to do is I'm going to import the stack component from exper Outer from exper router and by simply rendering this Tex somewhere in our UI stack do screen the benefit is that here we don't need to provide the name because it knows what screen screen we are on and we can simply go to the options and give here a title where title hello we see that the title automatically changes all another benefit of changing it directly from the screen is that we have access to the data here for example we can use for the title we can use exercise. name and we're going to see white grip barell curl here the name of of the exercise at the top so just like that we saw how we can use a how we can set up a different Navigator in this case we set up a stack Navigator how we can change some options for different screens uh from the layout and also how we can change the options directly from a screen now we have a two-page um yeah a two-page component uh application that we can navigate from from one to another and we see different information here on the details page besides that the name and so one I think a Details page is where we display more information about the the things for example we can display exercise. instruction or instructions yes instructions like this we can give it a style like styles.in instructions instructions let's give it here some some Styles uh instructions instructions let's do font size uh 16 let's do um line height I want to increase a bit the line height to make it more readable so I don't know at 20 probably is going to be enough you can also increase the letter spacing and so on but I think I'm going to leave it like this I can also add them in different uh containers like to to make them look better for example I don't know for the exercise name and the subtitle let's put them together into a view like this and give it a name here Styles dot uh panel I don't know panel something like that that will simply have uh a background color white uh some poding 10 maybe border radius 10 or five yeah I think that will look nice and we can put the instructions also in another panel uh to for them to have also white background and for the root container of our page I can give it a gap 10 to give some space between these different panels right so just like that we have them like this we have instructions of how we should perform them uh yeah looks good but if we see this screen with a lot of data we cannot scroll through it we cannot scroll for it because we didn't specify what we should be scrollable well it's not that complicated to make it scrollable because we can use a scroll view imported from react native and we're going to use we're going to replace the root view with a scroll view to say that the whole screen here should be scrollable now it's scrollable but we lost the gap between the items because the scroll view if we want to provide the style we're going to need the content container style and now we have the Gap back here and let's see how it will look here as well yeah I think it looks nice perfect maybe for the panel like above the panel should we add a text here instructions but I think it's clear like what it means well the thing is that there is a lot of text do you want me to show how we can add a view more and view less button uh that can handle these kind of situations well it's quite simple with some properties on the text component and a state variable uh maybe I will I will first commit everything and add this simple read more feature um details screen exercise for exercise let me go ahead and uh show you how we can first of all reduce the number of um text that we that we show here to do that on a text component we can provide here number of lines and we can provide free lines to to be displayed what I can do is below it I'm going to add a text uh C more uh that will have some style styles. C more for the C more text I want to put it in the middle so let's do Aline uh align self Center we'll put it in the middle and maybe I will add even some pading tan to to give it some spacing maybe a font weight like a 500 to make it more bold or even a 600 will look nice okay color gray yeah nice now whenever I press on S more actually want to show all the lines there to show all the lines what I mean is if we provide to the number of lines zero here it's going to show all the lines that are available if we provide a value other than zero it's going to show only those so by pressing on this button what we want to do is we want to change from three to zero and from zero to three back again to do that we need a state variable variable that will keep track of whether we expanded the text or not a state variable in react native is declared using a hook called use State imported from react at the top here let's declare the is instruction expanded and let's do set is instruction expanded a very long but descriptive name and we're going to use this use State hook initialize with false because initially our we don't want the instructions to be expanded right here uh the syntax the use State gives us back an array of two values the first one is the actual value of our state the second one is a function a Setter with which we can update the value let's go ahead and first use the value of our state the value is this variable called is instruction expanded we will need that in the number of lines and we're going to use a tertiary operator to say that if his instructions is expanded we want to with a question mark we want to use the the value zero because we want to show all the fields otherwise we want to show only three lines and if I go to the top and change here from false to true we're going to see that we are actually changing this Behavior the way we want now the only thing is when we press on this button we want to revert this EAS instructions expanded to do that on the C more text we can the good thing is that a text has on press events so we can add a on pressent event we here we a function and to update a state variable we should always use the setter never updated directly the variable so we're going to do set is instruction expanded and we're going to Simply take the existing value and revert it by putting the exclamation mark at the front just like that if I press C more it's expanded if I put press again it's going back to to small one perfect we see more maybe ping shouldn't be 10 but five is enough nice and of course you can also change from C more to C less if it's currently expanded so you can move from a static string here C more to a a template to be able to to to run JavaScript Expressions the JavaScript expression is going to be again a tertiary operation based on the value of e instruction expanded with question mark we provide the value when this is true so when it's expanded we want to say C less otherwise we want to to see see more now here we see more when we press we see that the label changed to C less this is another conditional that is very useful to to know how to use and just like that we have this logic and we also learned about State variables uh with a very simple example get commit expand instructions perfect how are you guys doing are you following along uh I think we are ready actually we are yes we are ready and we are finished with the first part of a tutorial related to the user interface we have set up a project with XO SDK we used the D data we rendered the list we used Expo router we learned about it and we' also created the exercise Details page in the next part is going to be where the fun begins uh in the next part we're going to use IBM steps and to create a graph quel API that will get exercises from a an API API ninjas so so while we take a small break you can go ahead and uh create an account on API ninjas it's free you don't need a credit card and also create an account on IBM staben it's also free and you don't need a credit card let me put this in the comments because I really want to go to the toilet and while you do that while you create your account and get ready I'm going to be back and we can we can continue so yeah I'm going to be back in one minute for I am back but I need a coffee so coming shortly for no now I am back have my second C of coffee all right for the second part of our tutorial let me check the comments uh can you explain about the slot it's kind of confusing it's kind of confusing uh so the way okay let's see without the default layout without the layout uh without the layout file here by default export router handles this layout for us when we add the layout what it happens it the layout wraps around our screens so you can think about uh about when rendering it you can think about it like this so we have a layout and then we have for example if we are on the home screen we have index screen now the index screen as you can see here is a child of the layout but and when we are for example on the index screen it looks something like this when we are on the details screen it might looks like this details screen so as you can see the screen that we are on is the child of the layout component when X router is rendering that's why if in the layout we are returning null here it doesn't show anything because we override and we say in the layout inside it return null that's what we are seeing right now in fact we want to say well don't or null render the screen that you want you are currently on here so that's where the slot comes in at the same time we cannot render directly the index we cannot Import in the layout index because it will render index on every screen we need to dynamically render the screen that we are currently on that we navigated to so that's where the slot is it it's the simplest way it doesn't have like any kind of Navigators we cannot go like back with a swiping left because that's a feature of a stack Navigator so it's very very simple where it's useful to do that is for example if we needed a global provider or if we need a global provider like I don't know let's use I react context and we want to wrap all the screens inside that we're going to need the slot we're going to need the layout because just like this doesn't make sense because we can remove it and it will still work it's the same if it doesn't have it also it's useful when for example we want to provide provide user interface components that are shared among different screens for example by having a view here from react native and a style that has let's say uh some weird Styles you're going to see like Ping 20 and background color red uh and here a slot and maybe even a flex one uh you're going to see that this view in the root layout is something that is being shared between different screens between different slots here so we see the red background with the 20 pting on the home screen if we go on the detail screen we still see that one so that's where layouts are useful layouts are useful for shared user interface between different screens and also shared Behavior like some logic of here listen for notification this is a behavior that we want to happen on all the screens right you do it in the root layout and we can put a stack here and it will look very weird having this background but now having a stack instead of slot we have additional benefits I'm going to remove a view I'm going to only leave a stack you're going to see that it works like this and and similar way we can have another Navigators for example tubs if we simply change from stack to tubs we're going to see that we have two tabs at the bottom the index and the name the two screens that we have here so let me move back or maybe even let me get St this hopefully this makes a bit more sense a slot we use when we don't need a navig when any Navigators we only need some kind of uh shared logic or maybe shared uh UI like custom view or a popup that you want to be shared among everything and in any other cases where we actually need a proper Navigator like a stack Navigator a tab Navigator we're not using a slot we're using a stack here because behind the screens the stack is rendering the slot for us y all right let's see if we have any other questions uh do you think about updating Uber eat uh about Uber Eats uh Uber Eats is a food watering application actually we have been working very hard during the last two months and we uh we prepared a pre-recorded let's say qu uh that we are going to publish directly on YouTube that one is um 8 and a half hours Zero to Hero tutorial that is going to come up real soon it's 8 hours here and it will help you build oh I think it will help you build uh a food watering application similar to Uber full stack it's very in depth like it covers both front end back end it's built with uh super base and R native and Expo it also has notifications deployments two-sided marketplace where you have admins managing dishes users when user are completing it automatically sends it updates in real time so it's a huge tutorial if you're interested in that make sure to subscribe to the channel right now not to miss it in the future and uh yeah we're going to we're going to publish it in the following weeks actually we have so many content planned that I don't know when to publish it next week we have two or three videos coming okay uh publ is saying router V3 looks great I plan to update from XO DK 49 to 50 soon will update navigation then hopefully the upgrade won't break too many things uh I'm planning to maybe do a a live stream exploring that and also showing how you could upgrade an older version of Expo DEC to the latest Expo DEC but yes Expo router V3 looks really nice especially with API routes it opens up doors to a lot of new possibilities that in the past were not possible now we can have full St applications written solely in XO Google Map M solic EST GS or types DS in R native uh my Spanish understood the the question but don't know where the details what exactly is a problem any teaser about the upcoming premium ques Mario thank you very much for asking uh yes we actually started working on a new premium course focused on re native and Expo in the past years uh the re native and the re native ecosystem system changed a lot and it's so exciting to see where it is at this moment so many applications out there have are using Expo and in the top lists uh more than 1,600 applications are using Expo uh that's from the research made by aan bacon you can find it on his blog but yeah nowadays a lot of things changed and I really want to upgrade and create a new course focused solely on rack native and Expo that will teach you everything that you need to know to build applications mobile applications with these Technologies at this moment uh we are at the stage of planning the content and starting recording it and I sent on your email a Sur a survey that you can help us shape the course if you haven't seen that one yet uh I'm going to share the link here with you in the chat chat uh it has some questions we have already almost 200 responses but yeah it will help me understand like uh the the topics that you are interested in uh the experience that you are already have in order for me to know what to focus on and what I might skip and a lot of other interesting questions that will definitely help us shape these qu so yeah if you're interested uh let me let me paste the URL here in the chat I would appreciate your help with with uh with this survey all right guys so let's go ahead and also if you are interested in um in a course that is currently active and will teach you how to build full full stack applications with rack native Expo and AWS amplify our course at academy. noas Dev is the way to do that you can check it out at Academy not just. Dev you can join we have weekly group coaching sessions and I would love to meet you there anyway back to our tutorial because we still have three parts uh and the second part that we are starting right now is f question about on the graphql API for that as I said we're going to use the an API I found it uh on the internet API ninjas it has an API for exercises uh let me open it up somewhere here a ninjas uh you can create an account uh it's they have a free three tier with quite a lot of API calls per month and you don't have to provide any um any credit card in future maybe you don't actually need an API for for for these exercises maybe you can create your own database of exercises but I'm too lazy for this tutorial to create and Define my own exercises so I'd rather use a data set that is already existing out there so they are providing a lot of apis and one of them if I look here is called exercises the exercises and if we send a request there they give us the array that we already saw that we are already working with in our application so if we scroll down let's see how we can send a request here python JavaScript no Jaz I'd really like to to see um an example for qu which is a utility that helps us send get and post requests let me switch to code so that you can see it [Music] better uh but yeah we're going to do that together um from the architecture perspective how everything is going to work as I said we are going to build a graphql API where we will combine different data sources uh for example the exercises we're going to get from V API then we're going to connect it to a custom database for our own data and so on to do that uh the best way and the easiest way is to use IBM steps and because it simplifies a lot of things to bring and create graphql API especially when we have different data sources so the graphql API is going to be created with stepen and we are going to connect API ninjas API to uh to steps and invent from our re native application we are going to Simply consume a graphql API we're going to do everything step by step so don't worry it's going to be uh it's going to make a lot of sense as we move along so let's go ahead and also open staben go to stab zen.com or follow the link in the description below and you can create an account for free here as well let's go to we don't need to go to the dashboard we need to go to the documentation let's go to the documentation and let's go to the uh install and set up what we need to do is first of all we need to install the CI command called staben for that we're going to run npm install DG to install it globally steps then let's go ahead and do that in a terminal I'm going to open it here in Visual Studio code I'm going to make it full screen so let's start by installing steps and CLI globally on our machine Carlos hola estas all right so now it steps in is installed let's go back to the documentation and uh we need to create an account go ahead create the account follow the link in the description below to do that we're going to need the admin key and the API key and uh the next step is going to be to log in inside our CLI with our credentials so let's go ahead back in our terminal do steps and login and here we need to provide the account name that you can find by opening the dashboard and here if you open the if you open the side menu the account name should be here or you can also go to the account with where you'll find the account name the and the keys for your API so for the account name let's copy this account name from here paste it in our terminal for the admin key go ahead and copy it from here I'm going to hide a little bit my screen I'm going to copy the admin key and the next St yeah the next step is you have successfully logged in with your account you can also check that with who am I and we see that we are the account name the the name that we provided before Perfecto now our steps and CLI is ready for us to start creating our um to start creating our graphql API uh for that let's go ahead and and follow the documentation to the next docent to the next page for transforming a rest API to graphql that's exactly what we need because the exercises API this is a rest API that we need to transform into a graphql API using staben to do that it's super simple with the command line it's one line of code and the line of code is called steps and import curl before we do that uh I will I will first start work with curl independently because after we have this curl request we can simply put steps and import at the beginning and that will uh transform it and import and create the graph API as simple as that so as I said Coral is a simple command line tool to send send get and post requests for example what we can do with coral the documentation is awful uh of for cor but what I can do is I'll check the URL that we need to send the the the request to Let's copy this URL let's scroll down to the code example on the API Ninjas the exercises API I'm going to check JavaScript documentation and I'm going to copy a URL from here let's go into the terminal and let's clear the screen let's do curl and then we are going to paste the URL oh my God corl and let's paste the URL here now muscle let's do chest here why is it like this where I can take a coral request example Coral request example I need a bro oh with headers so again let's start from the beginning we need cor and we need a URL that we want to request going back to to this one uh I don't even know which one to to JavaScript V1 exercises yeah it's basically not that complicated it should be https uh API API ninjas com V1 exercises and then we will be able to add variables like muscle and so on so let's simply do to the exercises to this simple URL we see that we are missing the API key the API key if we look in this example this is a header with a name X API key and here we need to provide the API key the header for curl is being sent with dashh and here we are going to dash we are going to provide this header with the name X API key inside a string ring should be x- ai- key oh boy I need to remember how to work with curl accept Okay then dots and like this and here we need to provide the actual API key the API key that we can take from our dashboard of API ninjas so let's go to my account my account and here there is API key press show API key copy it and let's go back to provide it here let's see let's press enter error missing API key I think I messed up a bit the the header here so let's go ahead let's scroll to that one oh my God it's so complicated to do it in the terminal change this one try it again and yes now it works so it's better to copy it and move it to a file by creating a simple text file here and pasting this Coral command uh if you want to make it multi-line uh you can put that the headers from a new line but in that case you need at the end to put a a backs slash to make sure that this command is multi-line now I can copy the C command open the terminal clear paste it and it should work yes test it and make sure that it works also remember that in the documentation of API ninjas we saw that we can send for example a property called muscle if for example we add here a question mark we can provide here variables for example muscle can be uh let's say chest let's copy this muscle chest let's send it again and hopefully we're going to see muscle chest exercises only it has a lot of instructions but yeah type strength muscle chest yes it works in a similar Way by sending different parameters here we can query different kind of different kind of um of exercises uh I think that's it that's a valid C command once we have a valid C command that we can copy paste and we receive back the results that we want in that case we can we can transform it into a stepen import command to transform this rest API into graphql API I and look how easy that is going to be first of all before we get started I will create in my in my uh folders in my project I'm going to create a new folder called API this is where we will store all the information for our steps and API let's open back the terminal and let's make sure to CD into the API folder to work there I'll do clear and when we have a c command that we want to use all we have to do is prefix it with steps then import and that's it now let's copy this same command with steps and import at the beginning let's paste it in our terminal with by making sure that we are in the API folder let's press enter steps Z will ask what do we want our endpoint to be called you can give it a name I will leave a default one that it's suggesting and we see that in just a second or even less we successfully imported the data uh from this one and created the graphql schema if we look at in the API folder we see two files and a folder the first one is the configuration and it specify the name of our endpoint the index graphql is where we combine different um subgraphs of our API in this case it only it only includes the file from curl index graphql if we go there in the curl index graphql we see that it created a query that when executed will send the rest request to the endpoint exercises it has the muscle property and it also has some headers for our um API token well maybe it doesn't make a lot of sense now but let me show you uh let me show you in action how everything works with one single steps and import command we Define the schema the next step is to deploy and run our API to do that again it's as simple as running steps and start and this is going to deploy our schema to graphql to to steps and Cloud after that's done we can press on this API to explore our graphql endpoint let's press on this API let's open it in browser and here we have it maybe I'm going to put it at the beginning and if I simply execute this query we see some data but we don't see anything return Why why because here in the variables we're going to see that we have a variable called muscle that we need to provide a proper value for example chest if I do that we see that we get back the data from the API but the good thing is that compared to the rest API this is a graphql API and we can for example design the the data that we want to return depending on the page for example in our mobile application on the homepage we might only need the uh name muscle and Equipment let's leave name as the first one muscle as the second one and Equipment as the second as the third one that would be the design of a query that we would need on the home screen if I run that one now our API only gives us the data that we designed and that we asked it to give and we see that it actually contains the only exercises that we asked for the muscle chest how simple was that that's it's always impressive for me how easy it is uh to create a a graph qu API using steps and it literally was two commands yes we needed to make sure that we created this Coral request and I had to remember how to work with coral but after we have a coral request we simply add the step Zen import at the beginning what's happening behind the scenes is that step Zen is sending a request is analyzing the data that it receives it's introspecting this data and parses it and automatically creates a schema for us the schema in graphql the schema is what PO is the graphql because it represents the data the data structure and the queries and the mutations that we can run so we see that every exercise has a difficulty of type string equipment string and all of this information we didn't have to to create ourself steps and automatically pared and um par and created it based on the response from the from the a API API end point that we provided and now when we send a request to to to to our graphql API hosted on stepen behind the scenes stepen is actually sending this request to the API ninjas and the result is coming back to step Zen is being optimized and is returned back to us then with step and start this schema that was generated um is transformed form to an actual graphical API that is hosted and deployed to step then uh in literally seconds that's super powerful and also it's very extensible like it's very flexible because yes we can do that with a couple of commands but at the same time we can adjust this schema the way we want it for example instead of my query I might want to change this to uh exerise this to make sure that this query is called exercises if I with doing anything stepen automatically deployed it in 2.4 seconds uh because it saw that the file has changed now if we go to the dashboard and if I will refresh this one in this interface we can look at we can press on the docs we can press on the query and we see the query that we have called exercises so we manually updated how we want our query to be called also muscle here should be chest now we can query the exercises and it makes more sense similarly if we look in the docs we see that yeah let's open the docs let's press on the query type to see the query type and we see that the exercises query returns back an array called root entry not sure if you can see it properly I'm going to do it like this but as you can see here it's an array called called root entry why because we didn't specify the name of of that property the good thing is that we can always change that directly in the schema so if the type root entry we will rename it to exercise and the return type here in the exercise query we will also rename to exercise 2 access this type graphql will automatically redeploy we can go back to the dashboard we can refresh and we see that the query now returns an array of exercise now makes more sense what else another thing is what if we want to add other parameters to our query if we look at the documentation of our exercises API besides the muscle we can also provide a name that can help us search for data to to add it our graphql as a parameter is it simple as adding it here as a parameter to this query name of type string if we go back to our dashboard maybe here if we refresh we see that our exercises query has two parameters name and muscle if is the first time for you working with graphql let me show you how it works for example right now we can of course query the chest but what if we are looking for a specific like let's say I don't need all of them I need only the name what if we're looking for a specific the push-up exercises how can we look for it well first of all because our query has a parameter called name that means that here in the exercises query we can add a parameter called name and we can hardcode it to let's say push-ups if I search we're going to see that we we have three exercises that contain the word push-ups in it push-ups bench push-ups and bench push-ups the thing is that we don't want to hardcode it we want to be able to send a variable and this will make a lot of sense later when we integrate it in with our user interface because we want to send a dynamic variable to do that we need to deare declare a variable on our query at the top and the variable here in the query should be prefixed with a dollar sign let's call it name we need to provide the uh the value the the the type of this variable and it's going to be a string now to the name property of our exercise query instead of hardcoding it we're going to send the variable name so that's where we have like that's why we have here name without dollar sign and here name with dollar sign because name with dollar sign is coming from here and here it only specifies the property name that we expect in our graph query now if I run it it's going to give me all the chest exercises but in the variables field if I will do a comma here and add the name pushup it's going to the name is going to be passed to this name here this name is going to be passed to the exercises parameter name and we are going to send it all the way to our rest API and back we're going to receive only exercises that contains your pushup name any questions so far guys is it clear if yes we can we can continue right because yeah let me check um okay yeah I think from the API standpoint uh our API our graph qu API for exercises is ready so we integrated with the rest API we transform it to a graph equal API using IBM steps then and the next step is to qu where this graph qu API inside our re native application so that instead of using dami data here we can actually query our API that we just created and we will query it in a similar way as how we played it here in the graph in the dashboard on stepen we will Define a query that we need for example on the home screen we will need the name and the muscle that's what we're going to provide we're going to execute the query uh if a user doesn't search for something we're not going to send any variables and maybe not even muscles so that we can look at all of them name muscle name muscle and so on perfect so our next goal is instead of sending this query from our dashboard we need to send this query from our re native application before we do that let me go ahead and uh I will do a get status get commit get [Music] commit actually maybe it's also good to rename this folder from curl to let's say exercises and and if you rename the folder exercises in the index graphql make sure to rename here also exercise this uh to to access the file correctly now let's check if everything goes correct file was deployed I will double check if everything is working here by sending a request yeah I think it is so now I can safely do a g status G ad oh come on get add get commit set up the graphql API using IBM step Zen and we don't need this one anymore all right all right all right all right so the next step is for us to query the graph API from react native to do that we're going to use the react query Library let's open up the documentation of react query uh it's a library from tanack and it's a powerful library to to manage and to query data no matter graphql or rest API in uh react and react native let's go ahead here it's react version version threee uh which one should we use should we use the latest and the latest is yeah let's use the latest uh graph Q well so yeah let's go to the overview the installation um and we're going to use we're going to start by installing react query in our application let's do that by copying the npm command to install tack cor query let's install it in our application make sure you run this in the root folder not in the API or something like that it should be in the root and in the package uh if I'm going to check we should have a new T RCT query and version in my case the version is 5.17 let's move [Music] on The Next Step let's go to the quick start and this C sneak okay queries mutations and so one in the re native let's check the documentation of re native to we don't need anything from here let's check the graph ql ver documentation around graphql I remember it was better uh I I used also like Apollo client in a lot of my projects but rect quer is also really nice so what other libraries we need to install for the graphql that's what I'm looking for um basic with graphql request probably graphql request we need all right so let's start uh the first thing yeah we installed uh tack re query the first step is to create a client and to wrap it around all our screens to to provide this client to the other screens and other components in our application where will we do this thing we're going to do this inside because we need react query in all the screens this is something that we need to provide globally if you remember I said that these things should happen in the root layout the root layout is where we create Global providers because root layout will wrap around all the screens in our application so let's go ahead and start by importing some stuff from tack react query we're going to do the query query provider query client provider and the what the the query client query client the first step is to create the client so let's create it here new query client and if yes new query client and after we have this client we need to make sure to provide it to all the screens in our application to do that we're going to wrap our stack Navigator inside a query client let's close it at the end and we need to provide the client here that we created before is not supported because does not provide props property one query query client provider here query client provider I messed up the name now that means that every screen in our application including for example the index will have access to the qu client and will be able to uh request stuff to run queries okay let's do let's run uh a query for example where do we need to query things we need to do that on the home screen where we render a list of exercises at the moment this list of exercises are coming from the dummy data but we want to query it from our graphql API to do that we are going to use a hook called use Query from tack RCT query and let's go ahead and do const data equal use Query and here we need to provide some options because our okay let's rename it from application to exercises screen so yeah because our exercises screen is going to be rendered inside the layout the use Query hook will have access to the query client provider to the client that we Define here the use Query what does it expect the use Query it expects a query key our application uh closed but yeah we're going to figure it out in a moment it has a query key and the query key should be an array that identifies this query for example it can have in this case it will be for us exercises the second option here should be the query function the query function is the function to be executed when we want to get the data so it's a function that should return some data let's for now simply return uh uh the exercises that are coming as well from the dami data now the thing is that in our flat list we can go ahead and use the data here dot just data the cool thing is that the use Query can also have a is is giving us a ease loading property that we can check here if it's loading let's simply return and activ activity indicator component from react native activity indicator from react native is a simple spinner let's go ahead and restart our server to see what's going on here let's open it on iOS and we see that if in the query function I'm going to return an empty array here uh I expect to see nothing if instead we are returning the exercises from the dummy data we see the exercises because we are using the data in the flat list coming from the use Query so yeah that's the query function um and the T rect query is agnostic of how it render or how it fetches data because it only you it only accept a query function which can be an asynchronous function and the way we get this data really depends on us and react query doesn't care re query only cares about the data itself it handles the loading logic it handles the error States it handles on the device um cache and optimization but the way we get the data depends on us and we can use fetch API we can use axos we can use graphql rest API anything inside this query function so that's why it's really powerful because it's agnostic and it doesn't uh inforce you to use some kind of apis or something like that so uh in our case we we don't want to use data from our from our dami data we actually want to query our graphql API that we deployed on staben let's see the example in the documentation of react query of how it works with graphql in graph Q well it has this graph Q well uh it has this request the request is coming from where from graphql request let's go ahead and install graphql request which is going to be a library helping us send a request to a graphql server npm I were npm install graphql request let's open up real quick the npm graph C request to see yeah that's what I was looking for because besid graphql request we also need graphql that will specify um yeah let's let's also do the npm I graphql simple it needs graphql and graphql request okay now we are going to import in our index screen uh two things we're going to first import the gql which will allow us to define the query string the structure of our query with the fields that we want to get we're going to import that from graphql request and we're going to Define our const uh query or let's call it exercises query equal to using this gql that stands for graphql we're going to follow it up with a backtick and we're going to press enter and here is where we will put the query that we want to execute the query usually we copy it from here so let's copy the query from our dashboard steps in and make sure that when you execute it's working properly after that is happening we can copy it in our graphql query and we're going to be you we are going to be using it to send the request to them to the server to do that in the query function we're going to use the graph qu request we're going to look at the T query API in the query function we need request we need the URL we need the query document and the variables okay the request is imported from graph request right let's check again the the documentation graph request yeah let's destructure request from graph request and inside the query function of our use Query we are going to return request and here here we need some options first of all we need the url url let's define the URL here at top const URL equal to something I'm going to put it in a moment besides the URL let me check the documentation yeah request URL and then the document the document that we Define here with top exercises query URL let's find the url that we need to send the request to that's going to be if you go to the stabs then that's going to be here at the top you might not be able to copy the full URL right here but what you can also do is you can check you can open up the endpoints page and the one that I am working with how is it called Soft something this one copy yourl so find it in the endpoints and press copy URL maybe in the docs where it's also no and come back and paste the URL here cannot Rate Property name of undefined let's see why that means that the request gave us an error the error is handled by R query so we can check the we can take the error here and we can can do another if statement here if it's not loading but if it's Error let's return a text failed to fetch exercises this is the error handling uh what happened data let's console log with data oh yeah I think I know why if I conso log with data and look in the this one it's loading loading loading fail to fetch exercises that's true I was expecting that uh and we can do a console log error to see what's happening the problem is that unauthorized missing or not allowed the we didn't provide the API key for uh for steps and because here if we look in the in the dashboard if we look at the headers there is a header called authorization so let's see how we can send the this header using the graphql request uh there is the fourth one request headers uh headers do we have a homepage let me check and point and Van options yeah let me do that here so I think in the request the next parameter is variables but we don't need any variables yet and the fourth one I think it's headers oh boy uh wait wait wait wait headers request headers well in that case we need to put them into an object with URL document variables and request headers yeah so let's put this into an object URL uh inside of this one is going to be called document document uh and we are going to also have header headers headers something like this request headers right yes request headers and the request headers we need the authorization header from staben and is going to be the API key that of course you can provide through environment variables but I'm going to try it just like that to see if it at least is working and then we can think how to optimize things fail to fetch exercises if I refresh uh we don't have a error nor do we see the flat list let's check the console look to see the data because most probably the data has a little bit the data currently is not an array the data is an object that contains the exercises which is the name of our query so in the flat list now we simply should say data do exercises and just like that finally we have our data um our data fetched using uh graphql and react query inside our application to be honest I think uh Apollo client is a bit more simpler in terms of this uh but yeah it's the the r query is still powerful and if we instead of sending a request like this if instead of this we are going to configure a graphql client as we saw in the documentation let me close the window because now it's better uh so uh as I was saying in the graphql request for now what we did is we simply use the request method to send a ad hoc request another way would be to create a graphql client to create an instance of graphql that we preconfig with the endpoint and with the um with the let's say uh with the headers so that we don't have to do that every time it's going to make much more sense so I'm going to do in the source let's do the graph or let's do in the source [Music] here graphql client. GS and here we are going to import the graph qu client from graphql request so let's import graphql client let's create the client using graphql client and here what do we need to provide we need to provide the end point and the endpoint remember that was our URL here so I'm going to take the URL I'm going to move it here and I'm going to say it this is the end point and here we are also going to say we need some headers oh boy graph client let's see the end point request request we need the client and the client is and pointed how do we provide the headers come on uh increment no no no Gra yeah it's in the headers here in the headers and we need to provide the headers that we had here for example authorization and so on oh I forgot to initialize a new graphql client now it makes sense and it also creates it correctly and what we can do is we can export this client export default client and in our on our page let's go ahead and import client from graphql client and when we do a request we are not going to do a a normal request we're going to do a client do request in this instance we don't need to provide the endpoint uh and we don't need to provide the headers we only need to provide the document document because we have configured it once and in fact we can simplify this by just right away sending the the query itself if I'm going to refresh it still works and the query itself is much simpler and in this situation we can remove a URL from here we can remove a request um and yeah now it works better and the dami data is already not used nice so yeah now our query looks much simpler it has this one it has the query function that can also be simplified to to this one and it handles the error the loading State and everything else it's handled by react query uh in the graph qu client if you want to the the good thing is not to provide and not to expose uh private keys inside your code what we can do is we can provide this through a environment variable environment variables are working in Expo in uh from from the recent versions and what we have to do is uh we have to create the EnV file and we have to create a environment variable that if we need it to be available in the client side code we need to uh prefix it with Expo public and then the name of the variable for example uh graphql API key equal and let's provide it with this API key this is the API key that I'm going to put in our environment variables and might not actually need the those codes and back in our graphql client I can take the const API key equal process. EnV dot in the name of the environment variable export public graphql API key now this API key we can provide here by either doing a plus API key or by doing a template string with back ticks like this and now it will fail to fetch because we need to restart our server for the environment file to to to take effect after we have done that we can refresh and if everything is working the query should execute and we should see the list of exercises back here yes we have that if something is not working working make sure to console log the API key and make sure that it's available uh because if it's undefined it's going to fail and you're you're going to see yeah basically if the value is going to be undefined it's going to fail to fetch so that was uh tough but uh that that was necessary because we had well another thing is that on this screen in this query we not only need the name and the muscle but we also need the equipment right so let's add the equipment because we see that something was missing on our screen so the equipment by simply adding it to our query string we see it here in the equipment oh perfect uh all right all right all right what else The Next Step the next step is going to be to query a specific exercise on the exercise details screen so if we go to the name here at this moment we are still using damid data on the detailed screen to find the exercise as I said the rule of fum is to go ahead and use the identifier for example the name of exercise to query the data about that exercise uh the downside of this API actually is that the data does not contain a ID so we can use them names to search it but I'm thinking that in some cases when only the name is not going to do it but we're going to see so let's go ahead and first of all uh yeah open the detail screen and here let's go ahead and remember what steps we need to take to send a request to the server well the first step is to import graphql from graphql request and to Define our query document uh let's say exer exercise query to Define it we're going to use graphql and we're going to open the back Tex to provide that that document for the query itself here here the rule of um is yeah we go ahead and we design our query in the editor here you in the Builder you can visually add the field that you want for example we might need also the instructions on the detail screen and also the equipment so name muscle instruction equipment that's everything that we need at this moment from the variables we're going to need the name only so I can remove a muscle from here and I can remove a muscle from here we're going to use the name to send a request for example if I'm going to provide here name let's say pushups but I'm going to do more yeah you see that if I search push-ups we see three results but if I'm going to do a bench 300 push-up it's going to be an exer exercise with again two exercises a bit weird but anyway this is the query that we're going to send on the detail screen to get the details for one exercise so let's copy the query document once we are happy with the structure of it let's put it in our graphql document here and in our component we are going to need the use Query hook use Query query from T cor query and also we're going to need the graphql client that we created in the graphql client the graphql client that has the endpoint and the all the configuration needed to send a graphql request now we're are going to get the data and there is loading and and also the error by using the use Query in the use Query remember we need to send an object with some parameters one of them is the query key and this identifies and is used for caching the result and for invalidating the result when something happens a query key uh remember in the previous screen we called it where is it exercises uh for the exercises detail I recommend using a combined query key where the first part is still exercises and the second variable is going to be the name that is coming from perams or maybe I can even D structure the name here and use name as the key so this is a combined query key and the benefit of having the same first parameter exercises is going to be that when we want to invalidate all the information about exercises in our application we can invalidate all the keys that starts with exercises but the second one is name and it's required to be like this because we want to Cache different data for different pages in depend ly separately of one one and each other so let's provide the second one query function and this one should send simply a graphql client. request and we're going to provide this document here exercise query like this now what we're going to do uh we're going to do the following we're going to check here if is loading let's simply return an activity indicator imported from react native that will show a spinner so if I go there it shows the spinner perfect uh where do I have perams oh here well on this line we actually don't need it anymore uh because the constant exercise is going to be something from the data from the response that we got the data will be an object with a property that has the same name as our query in this case exercises so let's do data. exercises and that is going to be an array so we can take the exercise at position zero now if I'm going to go here we actually see it and it actually works not sure why it's the first one weighted pull-ups this tells me oh I know I know I know I know I know know uh before I go go there make sure to always have this if loading then if error and only then try to render the data so if error I'm going to render a text say failed to fetch data something like this but why all of them are rendering this first one well because we are sending this request but we are not giving we're not providing the variable name don't confuse the name here the name here is for the query key which is related to react query this is how it handles caching on the device the request that we are sending to our graphql client is happening here and we need to provide it as um as variables right and we're going to provide it as name now if I'm going to press on single press yes now it works and let me actually refresh because it will make more sense if I press on the first one it loads it shows if I press on the second one it loads it shows if I go back to the first one it doesn't load anymore because it caches and it remembers that this data is already on the client it doesn't have to send a request again if we go to something new it will do the loading state it will do the qu the the quering if however yeah we we are going to something that is already in the cache because we are providing he a name it works perfectly fine like this uh and yeah that's how we have a Details page fa perfect we are not done yet we want to do searching uh maybe pagination that's also important so first let me go ahead and do a g start status G add get commit minus M query or react query or yeah let's do query graphql API using react query perfect so yeah we are 3 hours in I really want to stay be below 4 hours but we still have a lot of things to do um what what I'm going to do what I'm going to do to be honest is H should I do well we have still a lot of things to do and we don't have a lot of time um we important thing of a workout logger here there are still a couple of things we still have to uh search at least and to do load more to be able to scroll and load more items let me put them here and if we have time at the end we're going to do that but I really want to show you the mongodb integration and how we can keep track of different sets and repetition so in the bonus I'm going to have uh search and we're going to also have the load more how is it going guys so far liim number one thank you um the question someone is asking when the food watering application is dropping it's is going to come soon guys in the following weeks we just need to finish like the thumbnail the description and post it uh right guys so let's move on to the third part uh and let's implement the workout logger features what we want to do is we want to be able to log different sets of exercises um and store them in a database for the database in this part we're going to use mongodb if you're not familiar mongodb is a great nosql database working with documents um when I was working at fum I actually used U fum I build fum on top of mongodb and I don't know it it works really well for for these kind of applications because the schema is flexible we don't have a strict schema we can provide different documents with different types on the go and it's it's it's quite powerful together with mongodb Atlas we can host and create a database really really quickly but actually before going into the database and so on we still have to do some user interface in order to add a new um to add to be able to add a new uh how it's called a new set right so we're going to do that on this screen to add a new set let's go ahead and on the detail screen right after the instructions let's create um let's create a separate component that will handle the logic of adding a new set in the components let's create a new file for um new set input dot in input. GSX I'm going to define a default component here that will simply render a text and on the details screen let's go ahead and after we render the view the panel for our instructions after that let's go ahead and render the new set input that for me was automatically imported at the top here from our components folder what we see is we see the new set input uh component there and let's go ahead and also start working on this component that will handle adding a new set of this exercise I'll import the Styles sheet to Define the styles using Styles shit. create create and here I'm going to have a container uh that is going to be the styles of a whole container for this thing it probably needs a background color white to match the styles of the rest of the containers uh and a poting of five or how much did we set there let me see the panel the panel has pting 10 and Border radius five I'm going to copy them from here to have a same style nice uh so what what what do we need well we need two inputs for the uh for the repetitions and for the weight and we need a button to insert it a input in native is uh rendered using a text input component from react native I'm going to remove a text here or maybe let's do add a new set or record let's do simple log set below that let's add a text input with a placeholder uh reps and another one with a placeholder weight we see them here and we can go ahead and add some style styles. input and we will also you know what I'm going to remove the text here to simplify this component and to only have two things because now I can put the text inputs on the same row by simply providing justify not justify content but Flex Direction row on the container now the Ws and weight are on the same row and if I provide some styles to this input such as border with one or or one is too much you can do Styles sheet. hairline with which is the smallest border with that we can have uh if we add some ping like 10 if we add a gap on the parent component to manage the spacing between them if we also do a flex one on the input that will make the input take half of the space or share the space between that and what else what else between that uh I will do a a border border radius 10 to make them round 10 is too much five perfect I love it maybe the Border color should be border color should be gray or gains borrow or if it's gains borrow I think the wi should be higher yeah now I like it so if I do two three now perfect it works besides input we need a button veyor so let's use a component from RE native called button let's render it after our text inputs and the button has a title the title is add this is going to render a native button and because it's a native button it will look different on IOS and Android a native button on iOS is just a text with this blue color on Android it has actual background so if you're working on Android and it looks different that's fine that's that's how it's supposed to be That's The Power of react native it renders native components uh and on press we need to do add set we need to call a function call add set this is going to be an arrow function where we will do a console war add set so if we go on this one and press add we see a console warn at the bottom add set the problem is that at the moment we don't have we cannot access what values did we provide in these two Fields because as we have them right now this is called uncontrolled input which means that we we do not control it it manages it on its own and we do not have access to the value to create a controlled input we need State variables for that we are going to import U state from react and we're going to Define two variables one for the Reps set reps use State and another one for the how's it called weight weight and set weight use State the state is going to be a string uh and when we submit it we're going to transform it to a number now let's go ahead and bind the state variables with our inputs to bind it we need to provide two values one of them is the value of a St of a text input should match the value of our state and the on change text on change text uh when the text input changes the text when it detects that the user changes the text we want to update the Reps by calling set rep reps the similar way we're going to do with a second one for the weight but in this case we're going to provide the weight and set weight properties now we can still type but the cool thing is that now we can have we have access to these variables in the function ad set and we're going to be able to send them to the database we see ad set 343 I'm not for here we're going to do a send um or save data in the database but at the end we're going to do we're going to set the Reps back to empty string and set weight also back to empty string so after we press add we reset these values nice okay another thing is that when we open the keyboard at the moment it has not digits it has uh letters we can specify what type of keyboard that this text input is uh so type keyboard type is going to be number or numeric uh should be numeric yes now it's numeric and the same thing for the weight okay so both of them have numeric values all right okay um so that means that that now we have a UI when we press on the ad set we want to save things to the database for that we actually need a database go ahead and do git add git commit minus M new set input UI and let's go ahead and see how we can create and set up configure our database as I said we're going to use mongodb and we're going to use mongodb Atlas to host our mongodb server in the cloud really easily let's go ahead and uh you can try it for free it's uh free it offers a free solution so everything that we're doing here is free I'm going to sign in in my account uh let me remember my credentials and after you sign in in the cloud. mongod to.com you're going to go to your projects maybe you're not going to have any projects but in my case I have a couple of them here so what I'm going to do is I'm going to click new project and let's go ahead and give it a name our project is going to be called workout let's create next and here is going to add my me as a project owner let's click create project after that is done we need to create a deployment we need to deploy our a cluster for our database let's C click create and on this page we can choose how do we want to deploy It Go with the m0 which is a free version it's perfect for Learning and exploring mongodb in Cloud environment my cluster zero name is already used so I'm going to use cluster free and I'm going to use AWS and let's just simply click create deployment now uh uh this one will automatically add our AP as a white list so that only we can connect to it and it will also allow us to create a database user it automatically prefill the username and the password this is going to be important so let's go ahead and let's either open some notes or open a file and let's provide here the username and the password remember them because we might need them later just note them down and let's click create database user now let's go ahead and do choose a connection method for now we don't need to connect anyhow we're are going to access our data from the browser so let's do data Explorer here and pre press review setup steps and press done our data is being deployed so it might take a bit of time if I'm going to go to the deploying your data cluster free I'm going to reload this page it should take around a minute or two to to set everything up and configure our cluster sample data set successfully loaded which means that if I'm going to go to the deployment database here we're going to see our cluster it's being deployed I think it should be deployed let's click on the cluster itself and here we're going to be able to go to collections collections are database tables in very simple words a collection is a dat database table it's called different because it's not a table because it doesn't have a structure but anyways The Collection here we have different databases in our collection and we have different tables here we have some sample data uh but what I'm going to do is I'm going to create a new database specifically for our use case the database name let's call it workout out the collection name we're going to Log sets right when you go to the gym you perform a set you want to record that so let's call the collection sets and additional preferences we don't need anything let's do create and now under the collection we're going to see a new database called workouts and a new collection called sets it doesn't have any data but we can insert a document let's press insert document and here we can specify key value fields for our document well we need the exercise name exercise for example pushup push-ups or how is it called do we have something like um chest send request yes the exercise name pushup I'm going to use it here to say that hey this is going to be we are logging um repetition for the exercise called push-up let's press on this plus sign to add a new field and the new field will be reps how many repetitions the Reps is not a string so let's change here from a string to the an integer because repetitions will be an actual integer for example eight repetitions I'm going to do a plus sign here for the weight again it's not going to be a string but neither is going to be an integer I think it should be a double because you might do like you might add some weight like I know 35 five so you can have 7.5 here for example after you have this let's press insert and the document is going to be inserted and we see it here uh maybe I can duplicate it or clone it and say I'm going to do another one with uh only six repetitions but in this case I'm going to increase the weight and I'm going to insert it and now we see that we have two documents here so yeah now that we have a couple of documents let's go ahead and continue uh by by integrating this in our application in our graphql API if we look back at our deployment and our architecture we know that our graphql API is already connected with the exercise data source which is coming from a rest API and we also want to connect the mongodb to the same graphql API to be able to uh from our application to be able to query a single endpoint a single graph Q API for all the data needs that we have with staben that's that's actually the power of staben because taben allows you to connect different data sources in the same graphql API this is very powerful because in a lot of cases data that we have is coming from different sources and as you can see on this diagram we have a graphql built with stepen that is Created from different building blocks it can be connected with SQL backends from some data with rest apis from some data like a rest or no SQL backends or even with other graphql apis so that's the power of um stepen I'm going to show you a stepen mongodb blog post on the IBM website created by Carlos uh and here he shows step by step how we can integrate uh mongodb with um with stepen I'm going to go ahead and do it uh together with you and what we need to do first is on the atlas side we need to enable the data API the data API is basically a restful or rest like endpoint on top of our database so we can interact with mongodb by sending rest rest API requests we know that with stepen we can easily integrate with rest apis because we have done that with the API for our exercises before at the moment the data API is disabled so let's go ahead and enable it we're going to select the data source here for cluster free and that's it let's enable that data access restricted API why is that let's refresh let's select cluster free enable restricted AI API I access that access manager project access maybe I need to change no no no no no what's going on there let's go to the atlas I'm going to go to the workout data API and let's do cluster free enable why I did that before and it was working perfectly fine maybe I need to uh this one Advanced to enable why is it restricted disabled ask the organization owner to add your IP address to the IP access list for atlasi I think it sad that it added not just so my IP probably was not added properly but in the previous one it was added so I'm not sure why this happened now it's loading you need to configure IP access list if I'm not mistaken it like it should be added automatically but I'm going to see maybe it failed to add automatically when I created by default it it's adding like the IP that you are accessing from automatically maybe somehow VP changed no uh but where do we add this this this I learn more includes your current IP created as part of aut to setup let me check my I database access oh I think uh where where where [Music] where let's try through quick start to add our IP add entry yeah it's already there I think I need to specify what it has access to cancel addit oh boy for where where was that one edit I remember I had to change search steps and TB maybe in the blog post it's going to Showcase that API for boy data API mongodb Atlas data API manager organization access uh or uh require app let's go to the organization settings settings organization name require no Federated no required IP access list for the atlas maybe I need to enable this one to allow me buy IP is this saved yes and let's go now back to our workouts and try again to enable it oh the maximum number of Ops for product data API is one okay have another project that I was testing with API okay that was test two I'm going to go ahead and uh leave project I need to delete the previous one settings uh let's disable it for the previous one you don't have to do that uh I just was testing it before and it seems that Atlas come on Save and now I I reload yeah it's saved and I can go ahead to our workouts project going to the data API hopefully now it will will work let's our fetching restricted please refresh this page let's enable it not again it is working [Music] no it's not possible look guys I think I'm going to work with a previous API that I created because uh I just cannot enable it here but it should work for you uh if it's the first one so my previous one is completely the same but it has this data API hopefully I will be able to enable it in the settings enable data API save so after after that has happened we will have a URL endpoint that will allow us to interact with our mongodb API through this URL in the database here I have the same as we created in the previous one only thing the different is this is called cluster one and in the collection collections I have workouts and I have sets here with the same data like WPS and weight so let's go to the data API and let's see how we can send a request let's press on this test your API and create your we need to create a API key let's give it a name and the name is going to be staben because we are going to interact with vcpi from stepen let's generate this and let's copy it and save it in a file uh uh so let's copy the snippet we will query the cluster one the database called workouts and the collection called sets after we set this up we can copy the cor command that was generated for us automatically and we will go into a terminal to test it out by simply pasting this C request and sending sending it we see a document with ID because we are sending a request to find one let me paste this request here because instead of sending a request to action find one let's send a request to find in order to find all the uh all the uh rep repetitions that we locked in the database not only one of them and I'm going to delete the projection here because the projection is specifying What fields we want to return in fact we want to return all of them and when you delete the last row make sure to also delete the comma because otherwise it's going to fail and what else what else I think that's it let's try to copy it again and send it from the database and what do we see we see the documents Within array it has ID it has exercise push-up reps and weight and if you are going to add more close um also if the API is not working on this data API you're going to see the data source cluster make sure to change here from no access to read and write this is important to have access to that now I'm going to go to the database to actually create a one more item in our collection of workout sets let's duplicate this one and let's sa it 10 reps with with five weight insert now we have two items and if I'm going to send the Cal request again to all the items we see two objects return from the URL from the from querying up the col ctions sets now what does that mean that means that if we have a c request we can prefix it with steps and import and we by executing this command we're going to parse it and add it to our steps in graph API for that what we have to do is we have to first move to the API directory and here in the API directory let's execute the steps and C command I'm going to press enter and we see that there is an unsupported flag location this location um let's delete it from the cor command we don't need it and I'm going to copy it again and paste it here starting starting done that's it now if we look in our API we see another folder created called curl that has the index and here in this one we see our query for my my collection that sends the request to them endpoint and so on if our steps and start is still running then it will automatically work but uh if not we can run again steps and start I see that it's working and it automatically deployed so I can go to the steps and dashboard and I can do a refresh here what I'm going to see is I see a new query called my query where I can provide the collection here the collection uh the collection The Collection is set the database is workout and the data source is cluster one and for the documents I can do ID exercise and Reps let's try to send the request I don't need the variable name here unexpected empty in query exercise my query sets and so on what database workouts let me check the request there collection sets collection sets oh I know what I don't need here the parenthesis if I don't have any variables now we have a push-ups and all of them other stuff uh the thing is that I don't want to have to set up the collection the database and the workouts and so on what I want is for it to automatically uh be enabled for us we can do that by setting it up in our schema that was generated for us first of all instead of my query I want to set uh sets then instead of having variables for collection data source and so on instead of that I'm going to provide after the headers I'm going to provide the post body which should be a string and a string with triple um uh codes triple codes and here we need to provide an object where we have in codes collection and the collection should be sets and not with one set of with double codes then we have data source uh set to Cluster one or cluster three in your case or cluster zero and the database is going to be workout the last one doesn't have the comma so pay attention at the structure and now we can go ahead and remove the variables from this query because we don't need it now let's see if stepen deploys it successfully yes it does I can go back and I can refresh uh refresh to see and I can go to the Builder I see the new query called sets in the documents I can take ID exercise reps and wait can send it I don't need the name here and this is the query that uh is connecting with a mongodb and taking the data from V let's go ahead and copy this query and let's go on this page um where I'm going to go and create a new component that we render a list of uh of sets for that let's go ahead and create a component called list or sets list do GSX let's do rack native functional export and let's in our details screen after we have a input let's render the sets list we see it here and we will have to do a query here to get the data from our graphql API const sets query equal graphql and here we provide the query that we created in the on the dashboard let's import graphql from T not t query but graphql request and also let's import the use Query from T query and also import the how's it called the graphql client from graphql client in our component let's go ahead and do the query const data equal use Query and here we're going to have a query key called set and a query function that will use the graphql client do query do request and the document that we want to request is the sets query yes we can have a is loading and is error as always uh and if is loading return activity indicator and here let's do console log data to see the data that we get back if I go on the details page we see sets document and it has object and object perfect that means that here I can go ahead and render a flat list directly from react native where the data is going to be data dot do set dot if you saw there was a documents as well so documents um and render item we're going to get the item here and we're going to render a let's render a text component simply by saying item dot uh weight or better item do reps X item. weight so if I go here we see uh the two reps that are queried from our database another way is going to be to add a variable to this request in order to only get the uh Reps for this exercise for now um yes that's going to be background color white also going to have a margin vertical 10 and a poding 10 and a border radi five maybe margin vertical five only border radius and overflow hidden so just like that yes we have here the flat list as well that renders a list of inputs the last thing guy I really have to finish this uh before we hit the 4 hours mark but there is one thing that we didn't Implement adding uh a a repetition so I think that the best way is going to provide this in the asset bundle that you will download and there I will provide the source code with the details of the last step where you'll see how you can add a set to the database anyway we have eight minutes maybe I'm going to manage but I I don't think I will so let's try to do it uh but anyway like for hours Mark I cannot go over it because YouTube punishes everyone for that okay okay okay okay let me see in the how we can send a endpoint data API testing our API let's look let's look at the docs and in the docs custom HTTP and point um authentication authorization data API examples insert uh a single document and by inserting a single document is a post request let's try to copy it from here let's try to move it here and we see what the API looking like I'm going to zoom out a bit so I'm going to copy the API URL from the previous one until the action and I'm going to switch it with this one to have my AP API and after action is going to be insert one after that it's post request API key API key I'm going to use this one API key this one content type accept uh and data data source cluster one uh collection set database workout document is going to be exercise push weight two four and Reps to let's try to send this Cel request to see if it's working I'm going to do it like this inserted yes it's working uh that means that I can do a step and import steps and import and let's try to do that make sure you are in the API directory hopefully that will work an expected cor frag that s I'm going to remove that s for location let's do that again okay a problem cor while please check that the given C command is valid will it work yes it's working but why it's not working with steps and import oh it's not e Json it should be application Json inserted okay and let's check on the dashboard that if I refresh we're going to see that if I refresh it should be a mutation right API c one why is it a query it should be a mutation for that steps and docks generating a mutation when using the default graphical operation type is query to change the above import to mutation men will update the schema to mutation okay okay I can do that manually in the C 01 from type from query to mutation uh from okay and the type here shouldn't be root it should be insert uh insert set response and I'm going to use insert response in the instead of root here okay now it's deploying and I can check in the in here if I refresh besides the query I can add the mutation as well and the mutation here uh is going to be called my query I can add inside the collection called how is it called the sets sets uh database workouts uh what's the other one data source cluster one and the document is going to be the document is not going to be a string or is it going to be a string the document input document here it's uh It's [Music] Tricky name name hello Yeah we actually need the the this one the the document anyway guys I'm going to provide some information in the asset bundle so make sure to download it uh again in a couple of hours I'm going to provide that I really have to uh close this one at the moment uh also the source code you're going to find in the description of this video so everything is going to be there so you can check it out and um finish finish the last steps uh anyway we have managed to do a lot of things uh we integrated with a rest API we created our own database we created the graphql API we learned about Expo ract native we exper router we did a couple of screens so it's really uh it's really a lot uh what we managed to do in these four hours I hope you enjoyed guys if you did make sure to subscribe to the channel thank you very much stepen for sponsoring this video and I have to shut it up at this moment all right I'm going to see you next week with more tutorials make sure to stick to

Channel: notJust․dev

Views: 96,886

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, Full-Stack Development, MongoDB, Workout Tracker App, Fitness App Development, GraphQL, IBM Stepzen, Expo, User Interface Design, Fitness Tracker, Workout Log App, Mobile App Development, Backend Development

Id: 3cD5UFWsNOA

Length: 239min 33sec (14373 seconds)

Published: Sat Jan 20 2024