Build a Local First Trello Clone with React Native & Realm

what's up noj developers welcome back to New live stream and in this video we are going to build a local first tro clone using re native and realm so instead of talking let me actually show a very quick demo of what we're going to have by the end of this video so the trell is a project management tool that you can manage your Sprints your tasks uh where you can create these tasks in different columns uh and that's what we're going to do the cool thing about this application is that it's going to work locally first without any internet without even having to create an account but we're not going to limit out ourself to local first because whenever we have Internet we want to synchronize the data from the device storage to the cloud so that you can use the same application on multiple devices and also to collaborate with your team for example so even though this the focus of today's video is going to be Lo first we're going to actually get into the synchronization behind the scenes so that everything is an actual application with online capabilities because yeah that's a very common architecture that can benefit a lot of applications uh especially applications that might be used in scenarios where you do not have a strong enough connection or stable enough connection internet connection so you want to make sure that your users can use the application even without having internet internet can operate and once they gain internet everything is synchronized with the back end for that uh we're going to use rack native with Expo on the front end and Expo router for managing the navigation the screens and for the back end for the synchronization stuff we're going to use realm uh which is currently called Atlas device SDK uh realm is very tightly coupled with mongodb so this is a great solution if you're currently using mongodb or if you are starting a new project you're going to see it's quite easy uh to to make this synchronization and it's quite powerful especially because we are using mongodb as the database layer so without uh any more talking I think it's time to get started so let's roll the [Applause] [Music] intro so the first step let's go ahead and uh initialize our project and hello everyone who is joining us live I'm going to open a terminal where is my terminal here is my terminal let me zoom in and let me navigate to the project to the folder where I keep my project I think it should be here oh think I have to to close the window but while while we are here let's go ahead and initialize the X Expo project using npx Create Expo up here let's call it uh Trello and also let's put at latest to take the latest version of Expo so let's press enter this is going to initialize our blank project from where we will set up everything including uh exper router for navigation realm for our uh data um and yeah let's let let's wait a couple of seconds meanwhile I'm going to close the window because someone is doing some renovation by the way guys look at that look what we've got here this morning we received the uh silver button for passing 100,000 subscribers So yeah thank you very much everyone who is watching who is subscribing to the channel your support means a lot to us and we see that our work is valuable and helps you become a better developer so if you're not yet subscribed make sure to hit the Subscribe button and help us reach the next Milestone thank you very much let me put it back all right so what do we have here our project is ready and I can go ahead and open it in Visual Studio code what when you see this your project is ready let's go ahead and write code and the name of the project which is Trello and this will open it up in Visual Studio code we no longer need the terminal let's close it let's make this visible and before we get started what I like to do is I like to switch right away from JavaScript to typescript uh you don't have to do that if you don't feel comfortable with typescript we're not going to focus too much on typescript but anyway it's good to have at least uh type validation so to do that I'm simply going to rename the abjs file to ab. TSX and in the next step when I'm going to open the terminal and write npm start to start the uh development server Expo will ask me hey we see there is a typescript file do you want me to install and set up typescript let's just press enter so XO will take care of all the configuration for us which is really handy now uh uh when we see a QR code that means that our application is running we can already start working with it the easiest way to run a Expo project if you don't have xcode or Android Studio setup would be to download the expoo application on Android or iOS and then simply scan this C code that's it you're going to have your application ready to run in my case I'm going to run it here on the iOS simulator by pressing I in this terminal Al and this will install it and open it in Expo go um just a little note later in the video we're going to have to create a custom development build because realm will have some custom native code but that's not a problem because it's quite easy to do that um and I'm going to show you when we get to that but for now expoo is enough for us to get started and build our user interface so here is our application we have the text in the middle if I'm going to open up. TSX we should see this text that is being rendered so if I'm going to change it to hello world without any changes it should update right away instantly on our device so that means that we are ready to get started and build our application um let me check the live chat here it is I'm going to move it here so that I can see what you're guys saying as always let us know where are you joining us from and how are you doing today hello Edwin Daniel Julius uh zire P Iman Jackie hello guys so excited about this episode yeah me too I'm very excited about this one I've had a lot of fun F preparing it and I think you're going to love it it's a nice combination of doing like UI stuff it's together with data stuff with handling crude operations with synchronizing everything so um at some point I was thinking also to do some animations like drag and drop but probably we're not going to have time but let's see maybe uh if we have time Advan we can cover some drag and drop stuff as well anyway let's go ahead and see what would be our First Steps uh to uh in our project as I said before we get into the data we would have to build some UI components to render something to render our tasks to render our lists of tasks so let's start by by what um actually I'm going to go ahead and commit these changes and later on you're going to have access to the source code so you can check like all the steps uh with the changes that we are doing so this is going to be in it uh and now I want to set up a little bit the structure the folders and the structure of our project I like to keep everything all the source code in a separate folder called SRC SSS yeah SRC and here we're going to need a folder for components here is our components and I think the first component that I'm going to build is the component that renders one of these tasks on the screen so one of a task which simply is a text component with some background color on The View let's go ahead and start by doing that so in the components let's create a new file called where in the components let's create a new file let's call it tasklist item. TSS and this is going to be one item that will render one task um a custom component in rack native is a simple function so let's define it as function let's call it the same as the file task list item and from this function we should return some something we should return some GSX which will represent what do we want to render on the screen so the thing that we want to render will be some components that we are importing from Rea native and these are a view which is a container a simple container and a text that will render the text of the item of the of the task so let's start by rendering The View and then inside the view let's render the text uh let's say first Tusk now we want to make sure that we see this component uh on the screen for that we first have to export this function so that other files can import it so by doing export default before the function keyword we are exporting it so that in up. TSX we can go at the top and do import task list item from Source components task list item now instead of this text which I'm going to remove I will go ahead and render a task task list item like this first task perfect let's go ahead and see um style a little bit this task to look more like the task from here so it's going to have some kind of uh dark background the text is going to be white and maybe we can also do an icon to the uh to the right so to set the background we're going to go ahead to The Container to The View and provide some Styles here so style we will provide an object where we can set background color black for example and to make the text white I'm going to do style color white okay now the background is black the foreground is white and this is how you can Define inline Styles this is good for you know a lot of situations but uh I usually uh especially if your file is quite long it's recommended to separate uh The Styling from the rendering logic to do that we have the Styles shet component Styles shet API that we can import from react native and using the stylesheet at the end of a file we can define an object that will hold all our Styles and we do that by doing Styles sheet. create and here we're going to in this object we have to Define different styles that we have in the component we can name them the way we want so one of them will be the container will be empty and text also empty now I can move the background color style from inline to The Container the text stle also to the Styles and the last step is to Simply connect or send to this style property styles. container so pay attention that I'm removing a pair of brackets because we no longer Define an object we are accessing it so styles. container and here again styles. text perfect so to style it a little bit more probably I'm going to go to up. TSX and I think I'm going to probably remove this align item Center and justify content Center because these are are centering everything in the middle of a screen if I remove them from here it's good but now the task is all the way to the top of the screen and it's behind the Notch and it's not visible really well so to fix that I'm going to import a component called save area view from RE native and I'm going to replace the root view in our application with a safe area view now everything inside the safe area view will be rendered inside the safe area so not behind The Notches or stuff like that so now the first task is nicely rendered at the top let's go to the task list and maybe we're going to add like some padding uh ping 10 to make sure that there is a bit of spacing around it uh going back to up. TSX maybe we should give here some ping as well to add some container yeah if I add ping here we need to apply it to content or what how is it style well uh we cannot apply this pting directly to the style of a safe area view I was expecting it to have content style but something is wrong so maybe I can put it simply in another view only the task list I item that will have a style and simply with an inline pting like 10 so that we have some spacing around the edges as well and I will remove it from here okay back to the task list item what else do we need here of course border radius to The Container five to make the corners round and I think I'm going to grab the actual color that I was using there and the color was this one so instead of black I'm going to use 1D 2125 and this is a dark blue okay perfect uh lastly when it comes to the task list item we had that x button at the end if we look here we had this x icon so this is going to be a simple icon that we can get from by going [Music] to Expo Vector icons and by searching here I don't know close so let's take this end design icon and it shows us how to import it I'm going to import it at the top inside task list item and I'm going to render it after the text component here instead of color black that is not very visible I'm going to use a color I don't know a very light gray where simply gray yeah gray looks good and I'm going to leave the default sizing or maybe size 16 is going to be good but the thing is that now the x button is right underneath the text which is not what we wanted we wanted to put the icon and the text in the same line so we can accomplish that by changing that justify um direction of a parent container so by simply saying justify uh Flex Direction by changing it to row this will put that child items into the same row now the x is right is to the right of the text and if we want the X to go all the way to the other side we can manage that using the justify content space between and that will put all the space available in this container between the items and this way we move one to the left one to the right and now it looks much better so that's good that's perfect maybe more spacing like 15 I don't know should I increase the text size to font size 16 maybe maybe let's see let's see how it will look like this okay so just like that we have a task list item the next step is to be able to send data to this task list item that will be rendered here because if from up. TSX we will want to render multiple uh uh tasks they will all say first task what I want to do is I want to be able to send from here that the first one the first task is going to be an object with that description of first task and then the second one is going to contain data about the second task which is going to be second and here we're going to have third third this is how we send data down from the parent component down to the child component not F but also task sorry so the name of a property that we are using is this is Task and the value is the object that we are sending here now how do we get access inside task list item to the properties we do that as the first parameter of the function and here we can right away destructure the property that we are interested in using its name so if we're if it's task here we're going to destructure it using the name task now this is going to be the property called task and we can render instead of this hardcoded string I'm going to use the brackets and I'm going to render task. description and just like that all the tasks that we are rendering they they're rendering different descriptions first second and third task this will allow us to send different data and render it the same way on the screen okay that's good uh let's move on and the next step for us is going to be to render one of these containers that represents one list and I'm talking about the dark black background container that container has a title with a name of a list it has the the list of the actual tasks and bottom we're going to later have um an input where we will write the new tasks so let's do that and I'm going to implement it as a separate component let's do new file come on new file is going to be task list do TSX or tasks list let's do t t it's okay T task list it's okay let's go ahead and start by defining the component and right away exporting it so export default function task list and the task list will return something it will of course start with a container so let's import a view and a text from rack native and let's render The View here and inside it let's render the text and this is going to be the title of our list for example to do okay let's go ahead and import this task list inside our app. TSX and I'm going to do import task list from sour components task list and let's render it uh we're going to render it here at the top let's go with that now we see the Todo items there and the next step is actually I want to move the list of tasks that we are rendering from here all the way maybe the task list component should be inside this view with padding and now I will move all of these task list items from here inside the task list this is going to be the list of tasks let's do it like this don't worry about the typescript issues yet we're going to fix them shortly but yeah I see that we forgot to import task list item from this folder task list item and the name of this component should be task list why did I call it item that was my bad now with this we have a title of a list and we have a list of items and later we're going to add on the bottom here the new task input perfect uh let's go ahead and see what should we do here well first of all let's make the background color of our task list uh dark gray or dark black and I'm going to do that right away here uh with inline Styles background color let me check the exact color to make it look really nice it's one11 one2 I will go ahead and add some ping maybe like 10 so that there is some spacing around and yeah that's that's good enough the problem is that now the title disappear because it's rendered with black text so I'm going to go here and give it a style of color white it appeared and let's go ahead and do increase it its weight to bold and maybe even the size font size to 20 it maybe some margin vertical to to separate it a little bit from the list 10 and just like that we have it properly set up the whole container of course should also have border radius so let's do border radius five to make it to have a little bit round corners and yeah that already looks better now speaking about the list of tasks that we are rendering here I don't want to render them manually like this I want to dynamically render them based on an array of tasks that we're going to have to do that we have a component in react native called flatlist and a flat list helps us render lists of items so let's render the flat list above our items here and there are two things that a flat list expects it expects the data and the data should be an array let's right away go here and Define the list of tasks as a state variable uh if you are new to Rack native and state is uh still new to you I'm going to explain it shortly if you are more familiar with it like probably it's very it's easy uh but we're going to use the state because whenever the list of tasks changes whenever we add a new task we want to reender and update the UI so let's start here with an empty array and the use State returns us back two values the first one is the actual value of our state which we will call it tasks the second one is set tasks let's go ahead and use these tasks in the flat list as the data and for the render item this is the com this is the this is a function that will tell flatlist how should it render each item in that list so this function will receive the item and should return the UI component that we want to render what do we want to render well we want to render one of these task list item and instead of hardcoding the task that we send here we're going to send right away the item now uh now from this flat list if I'm going to comment out these two things the flat list is not rendering anything that's because our tasks state is currently empty I'm going to go ahead and add here one default value with description or I'm going to copy it from here description let's do first and second and I can even remove a comment from here and now our flat list properly displays the tasks that we created in our state as a task list item component perfect that's good if we want to add some spacing between these tasks you could do that from the item list by adding some margin to The Container but in these situations when we have lists the best way to manage the the spacing is using the Gap property it's going to help you like with some weird issues that can help H happen with uh spacings so I'm going to send to the flat list a content content container style which is going to be the style applied to the component that wraps around all our task list so by sending their Gap five it's going to add five pixels spacing between the items and you can even do more if you want so five probably is enough so now they look even better perfect um maybe I should go ahead and do git add git commit minus M uh task list because at this moment we have two components completed we have a task list that renders a list of tasks and the task list item that renders one of these small task perfect the next app is going to be the input uh let me check the comments hello from Venezuela hello German greetings uh from your experience these types of applications are best work with realm or with Amplified data store which of the two technologies is better for you um well let me tell you this like this is kind of the first time I'm working with realm uh I have experience with working with mongodb so it mongodb itself is a really great database solution uh however it is very specific in terms of how you filter how you fetch so you have to learn the mongodb way of doing things um this will also show us in realm as well because some fields are very specific to mongodb but yeah I believe like it's a very good solution for running this kind of local first applications why are using uh typescript but not using typing because I don't have like a lot of time to type perfectly everything in this demo because that would take me too much time during the live stream and sometimes I'm just letting uh typescript infer the types and this will help us a bit later when we Define the schema of our database typescript will automatically be able to infer that type and it will add some benefits so what I'm telling um our students from the academy is uh if you're using typescript it's it's okay at the beginning to have issues it's okay not everything to be perfectly typed so whenever you have like some some issues some red warnings try to fix it but if you cannot like continue like if it's working it's okay it's still better than having everything untyped so that's small advice uh Brun is asking is there a way to make UI in react exactly as it would be done using native with iOS 18 coming out how can we ensure UI modification align with a new OS so from this comment I uh I assume that you asked is there a way to make UI in R native exactly as it would be using native and the answer is absolutely yes and that's the benefit of using react native because react native is not Reinventing the these component it's not rebuilding them to look like native components it's actually using native components it's a simple mapping between a JavaScript and Native components so every time for example with iOS 18 coming out every change that is happening on the native side components they're automatically handled like in re native without us having given to update our application this is happening because behind the scenes we are using the native component so that's the benefit of react native compared to flatter which is trying to recreate all the native components why not do local with watermelon DB uh actually I asked this as a poll on our YouTube channel because when it comes to local first application there is so many solutions that you can choose from and it really depends on the other things that you are using for example it depends on the back end that you are using because if you have a SQL backend probably there is a better solution uh compared to to realm um if you're using mongodb as a database realm is perfect if you're starting a new project realm is uh is a very good solution so this is not like the only way to build local first application this is a way to do it and uh in the poll on YouTube that you guys have B voted 648 of you voted uh more than half of you wanted to see a realm tutorial so that's why I listen to you I listen to the community and we build that one waterml andb was the second one and maybe we should do a tutorial on that as well and yeah this is a quite an interesting topic and I think we you can expect more tutorials about this local for approach in the in the future but let's go ahead and continue our tutorial and what I want to do now is from the task list after the flat list I want to add a I want to add here the new task input to handle the new task input we will use uh a component from RN native called text input and another one called button let's start by rendering the text input and you might not see it there but if we add here a placeholder new Tusk you still will not be able to see it because the placeholder has a dark gray color so I'm going to change the placeholder text color to Gray yeah gray is already better and if I go there and start typing it's going to have some text but the text is uh black so I'm going to go to the style and say that the color of the text should be white and now the color is white also in the style let's go ahead and add here some I don't know ping like 10 to add some spacing for it uh maybe we should style it in a similar way as we have a task list there with a background color like this let's try background color like this I to add to add uh spacing between the list and this one I'm tempted to use a margin here but I think it would be better if I go to the parent component and say that there should always be a gap of 10 pixels between all the components here so that's already better for the text input maybe a border radius of five yeah that's good um should the Gap here also be five to match the other gaps yeah probably that's that's better uh okay and we pting here 10 is it similar no on the item is 15 so maybe we should do it 15 as well and if I delete it it says new task and if I have it here we are writing the the information for the new task now after the text input let's go ahead and render a simple button with a title add task as you can see this is what I'm talking like this button is rendering a native button and on iOS it looks like this but on Android it will look differently it will have like a full background because that's the native Native button on Android so if you're testing on Android and it looks different that's perfect that's what we want to have when we are working with Native components and when we press this button let's do one press let's do create task this should be a function that we will Define in our component here and let's do const create task equal and I'm going to start by doing console warn create if I press the button at the bottom we should see the warning which means that we connected it with this um function but how can we get access to the information that the user wrote here in the text input well for that uh at this moment this is an uncontrolled text input we are not controlling the value the text input behind the S is doing that to transform it to a control text input we're going to have to use a state variable where we will store the information that the user is typing so let's use a use state with an empty string from initially that is going to be called new task and the setter will be set new task so having these two fields we are going to send both of them to the text input the first one is going to be sent to the value this way not tasks but new task this way the text input will always render what we tell it to render at the moment if we're going to try to type something it's not going to change because we are not not updating the new task the second thing is on change text which is a callback function and we can assign them set new text this way when the user types something and the text input detects that text change it will call the setter and will provide the new value this way updating a new text task State variable now in the create task I can console log here the state variable called new task and if I go here and write something and press add task we see that we have access to this value so I don't know what uh later one we're going to handle like actually creating it for now I'm going to do an res set the um state of our input to an empty string so after creating a new task it becomes empty maybe for now what we can do is simply add it to the existing list of tasks later on we're going to do it completely different so we can skip this one but just for us to see something happening on the screen we can go ahead and update the tasks list using all the previous tasks by spreading them like this and then adding a new one with a description description of the value that the user wrote here and not task but tasks now if I'm going to do hellow press add task it's going to be added to the list and the input will move down at one step just like this it adds in the list perfect but after we are going to reload the application we lose track of the of the state and that's where we're going to work that's what we're going to work on in the next step to make this local first and to have like a local database that is going to persist this data and later on synchronize it with a cloud so that whenever we add this tasks to the list we persisted first locally and if you close and open of application will still be there and then we're going to connect it and synchronize with the cloud with a back end so that's good that's our maybe I will remove a console log from here and I think I'm going to spend two minutes extracting these Styles into a separate into the Styles shet just to make this file easier to work with so let's go ahead and import Styles shet from recn let's define the Styles at the bottom of the screen Styles equal Styles shit. create and the first one is the container so I'm going to copy it from here I'm going to cut it from here and do styles do container now I have to go back here and provide container container and paste the styles that we copy it from there I'm going to do the same process for the text for example this is going to be styles. tile copy it from where move it to title here and this is going to be the input styles. input copy it from there add at as an input here make sure not to add double brackets as I did right now and everything now is styled properly and things like smaller Gap like I will leave it here because it doesn't um add a lot of like um garbage in our code and now it's much easier to look at this component we can fit basically the whole rendering Logic on one screen and we see that hey we have a title then we have a flat list then we have a new task input perfect so let's go ahead and do a get ad get commit minus M this was new task input enter uh Johnny saying he did a watermelon uh DB tutorial in December day 22 actually yes I did that but to be honest I failed quite miserably uh integrating it so I don't highly recommend watching it I think I should prepare better for that I had some issues with watermelon DB with configuration and I don't remember if I actually managed to solve them till the end but I saw that a lot of people are watching and taking value so maybe it's maybe it's valuable to see how I struggle there with configuration issues and so on but that was my experience um and yeah um I would have to look more into that to to see how to properly prepare a tutorial for it adita hello how are you doing uh so what I want to do now before we move to the next step is to add this nice background gradient and so on that is going to be the last step at this moment when it comes to the user interface and then we are going to go into setting up export router and then we're going to uh start working with realm so what I want to do is if I look in the app. TSX at the moment we're rendering inside the app. TSX we are rendering the task list when we think about the task list later on in our video the lists will be part of a of one board so a board will have multiple lists so that's why I'm going to go ahead and extract this task list with together with this view into a separate component at this moment it might seem minimal but it's going to help us later like separate concerns like this is a board then this is a list and then this is a list item so let's go into the components and do a new file called board taskboard task board. TSX here let's export default let's export default function task board and it will return I'm going to copy it from ab. TSX it will I will copy this view that has ping and the task list I'm going to copy it from here move it to our board in the return statement I mixed the arrow function there and I should make sure to import the view from react native and the task list import task list from do tasklist now we lost everything on the screen that's because in the app. TSX we should go ahead and import the board task board and render it here task board like this now our app. TSX is very minimal it only renders the taskboard and handles like things like safe are view status bar and so on but when we talk about the functionality of our project management board like everything is in separate components here together with a taskboard and later task list and list item okay perfect um and I wanted to do that because I want to add like some kind of more interesting background as you can see here I'm using a um a gradient so let's go ahead and use Expo linear gradient which you can find here in the Expo documentation and we can install it using npx Expo install Expo linear gradient this Library allows us to render gradients so let's go ahead and install it in our project this is of course optional but it will make it look much better and then what we can do is we can render the gradient somewhere here I'm going to import the gradient as per the documentation so import by destructuring linear gradient from Expo linear gradient and then to render it we can take this linear gradient and do it at above the task list it has this Styles background but what I want to do here is I want to render it with absolute position position absolute uh top zero uh bottom and make sure that it's it covers the whole background bottom zero left zero right right zero so just like that our linear gradient is rendering uh behind our task list if I comment it out we should see it here um bottom uh and uh it's not exactly what we want we're going to get there but usually when we want this kind of uh absolute things that will stretch and fill the whole page a shortcut instead of doing this would be using style imported from react native and the Styles sheet has a handy property called absolute fill so if we do that this will absolutely fill the whole parent container and uh yeah uh it doesn't fill the whole page because our parent view should have here a flat f one to make sure that it takes uh it fills the whole screen so now we have a gradient that goes from this color to transparent and we're going to change it to the following colors uh where uh yes these are the color so from U let's say purple to uh blue and now it looks much better but because our Tusk board is rendered inside the safe area view as you can see we still have white lines at the top and the bottom so most probably I'm going to go back to up. TSX and I'm going to go back from safe area View to a normal view so that the background feels very whole screen and I will uncomment the task list and most probably now the task list is going to be render not what when not where we want it so we can simply render maybe it here using a safe area View and the Tusk list inside the safe area view so just like that the linear gradient is expanding on the whole screen even beyond the safe area and our content is wrapped around the safe area view to be displayed in the safe area so just like that we have it uh with nice background and last thing I want to do is going to up. TSX for the status bar I'm going to change this to light to make the battery color and all the icons at the top with white and now everything looks perfect I really like it and I think we we have it like beautiful enough to continue working so this was our H yeah I was thinking already ahead but we're going to get there eror so this was our G commit taskboard linear gradient perfect Bruno is asking could I create an app with re Native Visions Vision Pro sorry um do I need a Vision Pro to do that or would they be able to use a simulator I think the X code has like the simulated experience right okay looking good so far so if you're just joining the live stream uh today we are building a local first Trello clone a local first project management application um so far we have handled the user interface of a simple to-do list um in the next step we're going to set up and configure exper router to be able to have multiple Pages like the detailed page of one task and the next step is going to be to cover the local first approach to include our local database using realm and later one synchronize it with the cloud okay that sounds like a plan and we can continue working let me just check my to the list yes the next step is set up Expo route perfect let's go ahead and do that uh exper router we're going to use exper router for the navigation logic and exper outer is a file based navigation system it's if you're not familiar with this I'm going to explain it shortly but simply put uh it allows us to create files and Export router will handle the configuration and creation of the screens automatically for us this is very simplified because on top of that it adds a lot of other benefits like automatic dipl links uh and so on but uh yeah it also the good thing is that it's built on top of react navigation so everything that you know and are familiar from react navigation for configuration and so on you can do an apply inside Expo router as well so let's go ahead open the documentation from Expo for export router in their on their website and let's go right way to the installation guide we didn't start with a template uh so let's go ahead under the manual installation and let's go right to the second step to install dependencies these are all the dependencies that we need let's copy them let's move to our com project and let's install the exper aor dependencies I'm going to go back to the documentation and see what's the next step the next step is to set up the entry point the entry point is the first file that is being executed when the application is launching that we can set using package.json at the moment is the up entry from Expo and to work with Expo router we are going to use exp router SL entry moving forward we need to add the schema of our application this is used for automatic deep links and this should be done in app do Json file and you can add it right under the name you can use it I don't know my Trello and this is going to be used as the Deep link as the schema for the Deep link okay moving on to the next step uh we're not developing for web maybe we're going to do test it to see if realm is working on web as well I haven't tested it yet so yeah let's go ahead and install this because it's not going to cost us anything uh so in the terminal I'm going to also install rack native web and rack doome and what else this is uh as far as I know is the default one already and we should go to the step five to modify the Babel config to have bable preset Expo but it's already there so if I go here preset Expo is here and I think we are ready to start but we need to restart the server with the- C where- Dash clear so let's go ahead and move to the previous terminal where our server is running or our development server is running and let's stop it by pressing contrl C or alt C I don't know and here I'm going to run it with npm start and D- space D- clear so yes and now if I'm going to maybe close Expo go and press I here to open it again what we will see don't do don't press anything yet let's just follow together because that's a bit very important part we should see this welcome to Expo screen this screen is displayed whenever we do not have the app directory the up directory in Expo is a very important directory because that's where we keep all our screens so instead of touching this uh button that will set up the up directory in the root folder what I want to do is I want to open source folder and inside source I want to create this folder manually called up and inside the application as I said we're going to keep all the screens and the first screen is our home screen the home screen is the index. TSX and here we're going to do let's say export default function home screen let's return and by returning something here it will automatically render when we navigate on the home screen what do we want to render here well let's open up. TSX and see what do we have rendered there so most probably we're going to I think we're going to render this kind of the taskboard I'm not even going to think more about that let's simply render the taskboard here and import it from components now with a simple reload of application I hope it's going to pick up this folder if not we're going to have to restart the server again but as we can see it actually in fact um picked it up correctly and rendered it here um where do we set this status bar previously it was set on up. TSX and the up. TSX was not not only the entry point but it was also a component that was wrapped around all the components all the screens in our react native application now v. TSX is no longer used and in a moment we're going to delete it but let's think of where here we are going to have like this kind of global configuration global settings you might think that we should do it in index but that's not the case because the index. TSX inside our application that's simply the home screen that's the page that is render only when we navigate home if we navigate to another screen that we're going to develop later it's not going to be rendered the index uh for that kind of things we have layout files and the layout files are exactly for this purpose the layout files are files that are being shared between all the screens inside a folder so if we are defining this underscore layout. TSX the name is very important it should be underscore layout and if we are going to export default function and this is going to be called root layout if we return something here like a I don't know a text hello uh export uh import text from R native what we're going to see is that we see the text hello and we no longer see the home screen even though we are on the home screen that's the thing that the layout is supposed to wrap around components wrap around the screens inside the folder now we are simply overwriting what is rendered there so if you want to have a shared component there like a text like this if I do here style uh margin top 100 just to see it we see it here hello if we do some kind if we do render some kind of components here we should also make sure to render the screen that we are supposed to see so I'm going to put it inside a empty fragment and below the text we can render a component called slot from exper router what this will do is it will render the text on all the screens inside our application and and it will render the slot which becomes the screen so this slot is basically replaced with our home screen if we are on home screen and we'll be like different screens when we will add more so this is our layout that are being rendered uh that are wrapping all the screens inside the specific folder and these are where we set like how do we want the screens to look if we have some shared components for example think about of a t tab tuab bar we have like the tuab bar that is a shared component so that would go into a layout file uh I was explaining about layout because yeah layout uh now this layout from the up directory this is the root layout because it will be U wrapped around all components uh so that's where we can go ahead and take that status bar light I'm going to copy it from here and I'm going to put it in the root layout and make sure to import it from react native uh it's not from react native right the status bar is from exper status bar so in the layout it's not from react native it's from Expo status bar yes now it works better uh but there is the white background uh I mean we actually don't need the text now it looks better and yeah for now I think we we can go with it yeah I'm going to explain about stack Navigators in a moment so slot a simple component that will that means that hey render the page code the code of a page that we are on so in this case we are on home screen so render with taskboard okay perfect moving on with the exper router uh setup uh what I want to do next is whenever we press on one of these tasks I want to go to the detail detailed page of that specific task so let's go ahead and do that and we need it as a separate screen a separate screen can be here called details details. TSX and it should actually export component so I'm going to generate a very task details component exported here um and yes the screen is already there but how do we navigate to this screen well we can do that whenever we press on the task itself so let's go ahead in the task list item and let's I'm going to start with um with a simple approach and then slowly show you the actual way to do it so we need to link from task list item to the details page for that we're going to use a component called link from exper router and I can go ahead and wrap our text the description of our task inside the link and the link needs an HRA the URL to which we want to navigate the URL to which we want to navigate is going to be called slash details uh Slash details so now if I'm going to go ahead and press not on the component itself but on the text we should be navigated to The Details page at this moment we cannot go back so I'm going to press r two times to reload but anyway the linking is working but how do we so so far we simply created that file expor router set up the screen for us and using a link we are navigating there when we click something but the thing is that we want to wrap our whole component in this link not only the text so I'm going to move it so that the root View is inside the link we lost the Styles but we kept the functionalities to get back with Styles what I want to do is I want to I will pass here a property to the link called as child this will make sure that the link will use the child component as the root component that will render so now we have the Styles back but we lost the functionalities why because when having a child the child component which in our case is a view which in our case is view should be able to handle press events should have a on press uh property a normal view doesn't have that so that's why we cannot navigate any longer to fix it we're going to replace the view with a component called pressible imported from RE native so let's take pressible replace our container view with pressable make sure the closing tag is also pressable and now if I click it should navigate there perfect okay okay slowly we are discovering more things so the linking here is okay let's go back to the layout the thing is that I want to be able to go back from this screen a easy way to accomplish that is to use a stack navigator that is working by putting the new screens on top of the previous one and we'll also uh display the back button and so on to do that it's super simple to accomplish with export router we simply import the stack component from exper router and instead of rendering the slot we are rendering the stack just like that our screen got a header when we go to The Details page we have a nice animation from the stack screen and we can also go back from there just like that we have a stack screen if you want to adjust the some properties of our stack screen of our of our screens you can do that with all the rec navigation options for example screen options you can do here what uh title hello this will change all the titles for all the screens to hello you can change Styles header right header back like everything that is possible in re navigation you can adjust here for screen options screen options is a way to change settings of all the screens in this tag now we have two screens the home screen and the detail screen so that's why changing title here change it to both of the screens if we want to change it only uh I'm going to remove it from here if we want to change it only to one screen we can do it in a couple of ways one way would be to expand this tag from a self closing tag to a normal opening a closing tag and then inside the stack we can go ahead and use the stack do screen and here I'm going to use the name to Target a specific screen the name should be exactly the name of a file so if I use index here I can send to that specific screen some options like title to do now this is to do and the second one is details because has the name of a screen that's one way to do it another way would be to render this text screen directly inside the index file so here I'm going to expand this one I'm going to use it like this so by rendering the stack screen inside the file of our screen we no longer have to provide the name because it knows on which screen we are setting the options so this is even easier because we go to the home screen and we see the options that we've got here so project board I don't know now the title is project board here is details so I can take this one go to the details render it somewhere in the component import the stack and change from to task details task details project board task details perfect okay okay going uh good now what I want to do is I want to change the style of our navigation to be dark mode I don't know I like dark mode I think you also do um so let's see how we can accomplish that in rock navigation that works with themes providing themes to the Navigator here we can do the same so let me double check where I have it well I don't remember where but let me think if I remember how to do it so we're going to import something from react n navigation native is it like V I'm going to have to double check the oh it's with at yeah at re navigation. native here we're going to import theme provider and also the Dark theme so if I'm going to wrap everything instead of this empty tag into a theme provider and then provide where f is it f or value value equal Dark theme that will make the that will make our headers with dark background properly uh styled and even web page with black like this perfect perfect perfect perfect also like going around and doing like some kind of improvements here uh what we can do like if you look at the previous page we see that but no I'm I'm not going to do it now maybe later I'm going to add it at the later yeah I want you to do the blur back the blur header here to have a gradient go be beyond the the header it's possible but I don't want to to spend a lot of time now so maybe I'm going to do it at the end anyway so this is uh most of our most of our uh navigation um configuration that we're going to need for now um what's missing from here is on the details page here in the text let's go ahead and do some style I'm going to do color white so if I go here details yeah the view we'll have Style podding 10 okay this is going to be the name so font size 20 first task that's good um so yeah on this task details we need a way to know the IDE or what task we are currently uh looking at for that we will need a dynamic puff parameter so a dynamic puff parameter uh works like you might saw it on Twitter so if you go to twitter.com and a username for example SL uh V not just Dev that will open my page and the puff parameter after SL Vadim not just Dev is going to be used as a variable to be used to fetch the data about that user that's possible with exper router and that's uh how we enable possibility to send data as the puff parameter for that instead of having like this detail screen what I'm going to do is I'm going to rename it to uh a Dynamic Property using the square brackets and here I'm going to name that variable pu parameter in our case it's going to be the ID of the task so by just putting this ID inside the task details we can get access to this ID by going to by taking it from use local search perams Hook from Expo router just like that I'm getting the ID so I can go ahead and say ID equal ID so if I go here uh let's reload if I go here we see ID details and here ID details why well that's because in the task list item we are rendering to/ details and the word details becomes the ID here uh at this moment our tasks no we do not have an actual ID so um later on what we're going to do is I'm going to add it as a template string and I'm going to navigate to slash and then a variable that will take the task. ID so let me go in the task list for the first items I'm going to provide an ID here one or ID one two three as a string and then ID like this so now if I'm going to press on the first task we're going to see ID one 12 three if I'm going to press on the second one ID 67 new tasks will not have ID for now but later one we're going to we're going to going to Define them so this way we can send the identifier of the task that we want to render and later on we're going to be able to query it and render the details the information about the task here perfect so that was the dynamic path parameters and with that our exper router configuration for our application is more or less complete so let me go ahead and do git add git commit uh Expo router perfect let me know if you have any questions so far our next step is going to be uh we're getting into the interesting part of managing data of setting up the realm database locally on the device to set up the schema and then go ahead read create update delete our tasks from the local database after that is going to be complete we're going to go ahead and connect it with the remote database so that everything synchronizes in the cloud but before we do that give me just one second to bring some water and we are going to continue so let me know any questions in the comment section and I'm going to be back really soon e for all right I'm back let me open the window because I need some oxygen and we are ready hello Richard watching from Zimbabwe hello uh Richard is asking how uh if it's possible or how to use export realm while using expoo application the short answer is uh that's not possible so Expo realm has some native code uh and for that we need to build a custom Dev velopment client which basically means our own version of Expo go that's not complicated to do and I'm going to show you that how we can do in this video so we're going to cover that shortly uh Bruno is asking what are the strengths and weaknesses of exper router versus R navigation um exper router is not Reinventing like the actual navigation exper router is built on top of react navigation so it only adds benefits on top of rect navigation so everything that's possible with rack navigation it's possible with exper router the only difference is exper router handles the configuration and setting up the screens automatically for you so you just create files and it creates the screen inside react navigation stack in inside the rack navigation tree so yeah okay perfect okay so at this moment we have a pretty good user interface for our trell clone and The Next Step as I was saying was to start adding the realm realm database to handle uh the data about our tasks at the moment we're using simply use State and if I reload the application it's going to we're going to Simply lose our items uh by adding a realm database no not only we're going to be able to procas data uh but we're also going to be able to um wey it in a very uh performant way because realm is going to have like a local database on your device so that we can run really uh powerful um queries over is so if your data can be huge and you're doing different operations of it is going to be much more performant compared to Simply taking like um let's say u a store like a Redux store or a context uh data and simply writing it to a sync storage for example so yeah this is not only like writing data but it's an actual local database so let's go ahead and I'm going to close everything and we're going to slowly start setting up configuring it in our application let's go ahead to and actually uh realm is already called Atlas device SDK realm was bought by uh by Atlas so as you if you go here you see realm is now Atlas device SDK okay so this is the local database that will also help us synchronize or authenticate users um and it has SD cases for for different platforms what we are interested in is in the r native SDK so let's open this up and let's go ahead in the installation guide well to be honest uh the way I'm going to do it like it's a bit different than strictly following the installation guide because I really want this tutorial to help you integrate realm in any kind of projects even if you have already started your project uh your the documentation is not going to be very helpful to you in that case because it shows us how to use for example if we go to bootstrap with Expo it shows us how to start from scratch using a template I don't want to do that because using a template we lose them uh the small details that we need to understand and to learn when configuring when setting everything up so that's why I didn't choose the template and rather than rather I want to set everything up ourself and slowly explain like what why we are doing everything so for that let's go into the inst install and the install guide is meant for react native CLI so that's why we cannot kind of uh follow step by step any of the documentation but we're going to look through them and understand like what we have to do so let's go and start the process um so here it's the documentation from react native but this uh this is for react native CLI so we're going to look through it and see how we can do that in Expo what we need to do is first install the uh the realm database in our project so that the name of a package is realm we can do it with npm install realm or we can do it with uh let's do a clear here or we can do it better with npx expo Expo in install real uh and the next package that we have to install is realm atrm SL react so let's install both of them at the same time the npx expo install is the same npm install but it adds a small step to check if the version is compatible with a current version of Expo so for some packages that Expo said like okay this is tested and this works it will choose that specific version that is compatible with Expo so whenever possible instead of npm install I'm using npx Expo install which behind the scenes will actually do as you can see here npm install so yeah we see that it added 26 packages in 7 Seconds that's good let's go back I'm going to scroll up to see if we didn't skip anything um so the first step is enable hermis in our case hermis is by default enabled so we don't have to do anything uh Coco poost dependencies we don't have to manage it ourself Expo is doing that for us so that's the benefit uh for Android as well Expo handling that enabling typescript we have that we have typescript enabled and then the seventh step is to install realm react Library which will give us some hooks specific for react to interact with the realm database so there is the realm database that leaves on our device and there is the realm SL react that allows us to connect to that local database so these are two different concepts to keep in mind realm is the database realm react is a way to interact with a database uh and then we have to run the application and then import the SDK okay we can import the SDK um we are going to import it where I'm going to create a new folder called providers and let's create here realm. TSX in this file I'm going to configure everything related to realm so let's export default function realm or just simply realm and in the return statement I'm going to have some providers here that later we're going to import for example from realm like this and in order to make sure that we can use it in our components and rep around our screens I'm going to receive here the children property and I can type it here props with children which is a helper type from react so I can go ahead and render the children inside here for now this doesn't do a lot but later on we're going to do like Realm provider here so that the children that are the components that are render below or inside the realm component they are going to have access to the provider that's going to be in a second but let's make sure to connect this realm file realm realm provider inside our up layout remember as I was saying the up layout is where we configure Global stuff like a f provider and so on so that's going to be where we configure Realm by importing it from providers and I'm going to wrap it around our stack if I'm going to go back here if this children property is confusing for you what this children property means this is a specific react property that will be assigned with the actual Children of the component that is being rendered so we are rendering realm here we are sending there some children and these children basically are copy and paste here and this way we can make sure that all the screens inside our application inside our root stack they will have access to everything configured in realm here okay uh realm has realm custom provider because even like Realm and real provider will be we will use it so let's do it like this so now everything is working but in a moment like we we might already start uh getting getting errors so let me actually continue the tutorial and when we are going to encounter the error I'm going to explain what we should do next so let's go back to the documentation and we're going to go to the quick start guide the quick start will help us to get started with realm so realm react is a package used in react native it provides statea whereare hooks form realm data the hooks that we're going to use from here they are going to was the data and reender whenever something happens this way our application will be really uh will refresh and will feel very uh I didn't think about a word for that so it will feel feel very fast in a way and everything is going to be up to date okay so what we're going to need we're going to need an app provider a user provider V for later uh we're going to now start simply with a realm provider set up your realm application after installing this there are two more things the seta before we can access your realm and work with local data we need to Define our objects we need to Define our models that we want to handle in our realm database and we need to configure Realm by creating a context that will allow us to get access to the hooks so I'm going to skip for a moment defining the objects model we're going to cover that in a second and I'm going to go right to the next one configure Realm so before we can work with data we need to configure realm so to do that we're going to import realm Provider from realm react like this let's do it at the top of our realm file and we're going to use it here realm provider to wrap our children or in other words to wrap the rest of application inside the realm provider so that the rest of application has access to this realm provider this realm provider also needs a schema and the schema is an array of uh models I don't get the error yet which I'm always waiting like when will we get the error um so that means that we're going to go we're going to go ahead and Define the object first and hopefully then we're going to get the error and we're going to fix it so let's go ahead and start defining the models everything in our application the data that we're working with should be be defined as a model which has a specific uh structure that realm is aware of so we define the properties there we Define like which properties are required or not VAR types and this way realm will know how to set the database will know how to do the relationship between the and so on at this moment in our application let's think of a task as the only model that we have at this moment so what we're going to have to do is in our source folder let's create a new folder called models and let's create a file called task. TS only TS because we are not rendering anything we're not rendering GSX so let's go ahead and Define uh the realm object model which should be defined as a class that extends realm object should I do it this way and then show you yeah let's let's just copy it from there and this is a sample Mo model where do import Bon I think it's imported from realm Bon uh and object schema is it also from realm yeah and realm also from realm yep so here later we're going to come back here to updated for now let's just go with this example uh we Define a profile uh model that has the ID which is required and has a name it also defines the schema with more information about the the properties like the ID should be an object ID the name should be string and it should also be indexed and the primary Keys ID so with this information we can import it in our realm providers so let's import task from Models slask task export class should I do it like task just change it to task task name task it's a name okay so I changed everything from profile to task now it's a little bit better and I can go to realm import the task here but I think I should D structure it and I will send this task inside the schema as the first property and here is where we get the error it says that we are requiring an an module if you're sure module exists try restarting Metro this is a hint that the code that we have is trying to access some native side code that is not available in our Expo go application so um Expo go comes with a set of native code um the and sometimes when we install some libraries that have custom native code or when we have to write our own custom native code in that case our application is no longer be able to run in Expo go that shouldn't scare you because that's very common and most applications will get to that point and it's not very hard to continue from here all we have to do is create a custom development build which means that we will take the configuration of Expo and create the IOS and Android folders to do that uh um you would have to do that you can do it in both ways you can do it locally and you can do it in the cloud I'm going to um start the build locally for iOS by stopping the server clear and by running npx Expo run iOS that's all it takes this will start a build the first time it will ask us for the bundle identifier so let's just press enter and and as we can see this build started generating the native side project the iOS directory for this to work you need um the X code configuration you need X code on your machine uh to build for iOS um and it's only possible on a m OS device for to build it for Android you need Android Studio setup with the Java and all of that things and that is available on Windows Linux and Mac OS if you are working on a Windows and you want to create a custom development build for iOS that's not a problem because you can also create these development builds in the cloud using EAS EAS Expo application Services you can create a development bill with and for that you actually don't need anything set up locally like xod or Android Studio so I'm going to show you here Expo custom development Dev build and here is the documentation to create a development build it shows us how to do it locally and also it shows us how to do it with Y we just need to set development client through distribution internal run the build and then download the file that will be built in the cloud and then we are going to be able to use any kind of native code in our project and what's actually happening is basically we are uh building our custom version of Expo go in which which is built specifically for our application for only the libraries that our application is using including V native code so yeah uh this build will take a bit of time uh because it's a native build and that's part of the iOS thing and Android as well but we do it only once and then we simply continue working and everything is going to be very smooth hey Samuel hello I have an uh Z high is asking I have an up with multiple screens that includes various requests some of which are related to IDs or other parameters should I store all the data in realm database or consider other options it really depends on uh it really depends on the size of your database because if you are building let's say if you're building an application where you're going to have I don't know 20 categories and then 100 items in that case it's really simple to take your state and write it to local storage and then when you open the application you read everything as a string you par it to Json you load it in state and that's a simple solution but that is not going to perform very well if your items grow past thousands and tens of thousands of items and also when you have to do like very custom filterings searching and so on in that case you'd have to load a lot of data in the memory of the phone is going your application is going to consume a lot of memory and um yeah it's going to consume a lot of battery as well so in that case it's better to have a database that is stored locally that you can send queries uh for specific data and only loading memory things that you need so this really depends on how much data you're going to have to work with what is Trello Trello is a project management board a very simple like uh where is it trell yeah project management board that you can uh that you can manage your projects you can have multiple lists like to-do doing done review and so on move cards around assign people and so on uh so as we can see our application finished building and we have a new um popup here open in tro that means that if I press open this will actually open a different application so you can see here the expoo is still running in the background but now my application is running in a separate custom application called Trello which is our application and now our application with realm with custom native code is working perfectly and it's you can see it also on the screen like it's a separate application so that all it took to create a custom development build uh running a command npx run iOS uh um assuming that you have xcode configured where npx Expo run Android assuming that you have Android Studio set up and what that did is it created this iOS directory with a native side projects with all the native code that our application depends on okay perfect so moving on moving on um now uh we have a native build our application with our realm is working uh before I start writing tasks and reading tasks I want to show you a little trig uh a small package that can help us um make the model configur ation way easier and the package that I'm going to show you is called realm bable plug-in so realm Babel plugin as you can see here at the moment we will always have to Define our properties twice one as a parameter of our uh class for example uh description is going to be here as string and then we should make sure to go into the properties here in the schema uh description so it's kind of like doing the work twice what real Babel plugin is going to do is it's going to generate the schema automatically for US based on the object that we Define here so let's go ahead and set it up because it's easy to set up and then it's going to save us a lot some time writing custom schemas so let's go ahead then install realm bubble plugin by copying this npm install command uh at realm Babel plug-in and there is also one more plug-in proposal decorators I'm not sure if we're going to use it but let's install it and forget about it it's going to allow us to add some decorators to to do some custom things maybe I'm going to show you a bit later so having these two installed we have to update our b. config uh or let's follow actually step by step in the TS config we need experimental decorators to through in the compiler options so TS config compiler options we need experimental decorators true okay and then in our bable config we need to add these plugins in b config we have presets let's add the plugins the plugins realm bubble and then this decorators and now we're going to need to reset it to start the server with reset cache uh and I can go ahead and from the task model I will remove the schema all together um I think yeah I remove a schema but I need to keep some of the stuff let me double check what we need in the schema there let's take it from here from the previous project and work together and explain it so this is the schema of our task it's going to start with having an ID uh we Define the type here and if we do equal sign and then a value this is going to be the default value that is going to be used whenever we are not providing some so this is a way to provide default values and whenever we are creating a task is going to Simply create a new object ID uh which will be a unique ID for our task then we're going to have a description which is required uh string it's going to have is complete as a Boolean it's going to have a created ad timestamp which will be initialized with a current date when we create an item and instead of owner ID let me actually change it to user ID required string and this is going to uh specify the uh IDE of a user that created that task because later on multiple users will be able to use the application so we need to know which task this belongs to and finally we need this static primary key to Define which of these fields is the primary key so we are using ID as the primary key and because we have installed that b plugin the schema is going to be automatically generated based on all of these fields that we defin here so let's go ahead and where our project is running let's we see that inv valid schema for object task that's because we need to restart our server let's stop it and let's run it with npm start d--- clear I'm going to start it and uh by default our npm start will start using Expo go so we can simply press s to switch to development build so if I press s is going to reload and show here development build and now I can go ahead and run I and it will open on iOS hopefully with the Babel config set up so that our task schema is defined automatically oh migration is required due to the following errors property task name we we did some changes on this task and now it thinks that we need to provide a migration um for development so what happened we had different schema it configured the database now we change that schema and if you would have some items there it can break the database so we need to provide a migration that specify how should we change the previous data in the database to fulfill the new schema that you provided that's a very important topic when you're building a production application because you don't want to break previous schema uh but for now uh because we are still in development I think it would be safe if we uh provide a configuration let me double check where was it Atlas devices Decay uh remove if migration needed there is a property like to to Simply remove a previous database and start from scratch if there is any no where is it ver documentation is a bit hard to follow because it it beats a lot but yeah let me check react to changes no realm files configure a realm change an object model modify schema properties okay we need a migration for that but we can bypass migration during development When developing or debuging your application you may prefer to delete ver realm instead of migrating it so we need to use delete realm if migration need property to delete the database automatically when a schema mismatch requires a migration never relas up to production with this property set to true but for now we are in development so we're are going to use it and let's go to the base configuration how do we configure it that's an interesting topic realm config pass the configuration object with dated schema this should be here somewhere in the config how do do we pass the configuration basically at the moment an easier option would simply be to delete the application that would probably delete the database as well and run it again and later we're going to check no development build yeah because we need to to run it there so I'm going to do npm exper on iOS the second I hopefully it's going to take a bit less but this is realm provider but where is the realm configuration configur real yes is for realm provider add other configuration object properties as run provider to configure create realm context okay I think I know okay yeah I think I think I know but let's let's see let's continue this whale just not to to confuse because we yeah for that we need to create a different provider while we are here waiting but let me let's wait let's be patient not to break anything for now so now it opens the database should be empty so it should to take this schema and configure it yes it did so now everything is working perfectly um so far what we have done is we have installed realm and realm react we have created them provider uh and now all our screens have access to this provider the provider is working based on the schema composed only of a task model we Define the task model in a separate file as they extension of Realm object and using the Babel config um we automatically generate the schema based on the property so now it's much easier to manage it like this so we don't need object schema anymore okay good so the next step is going to be to start already creating stuff and interacting with our realm database uh the first step would be probably to create uh a new realm a new item to write something in the database uh because if we read something it's going to be empty so let's go ahead in the documentation uh I'm going to close most of this stuff and in the quick start after defining the realm object configuring it we should go ahead and start working with realm objects to interact with them we can get access to the realm itself using the hook user realm this is going to help us write things use Query is helping us query data and use object is helping us query one single object knowing its ID so let's go ahead and start by I'm not going to query first because it's going to be empty so let me try to First write uh writing should be here create object to create a new realm object we need to specify the object type and pass the initial values and add it into a right transaction block so first we need yes realm right realm create profile okay let's go ahead and go to the our components task list because that's where we have a create list create task uh hook here so what we need to do is instead of setting it in state like this we need to write it to realm database first of all we need access to the realm database using realm equal use realm that I don't know why it's not suggesting me import but it should come from from at realm react so using this hook we get access to the realm and using realm we can start first of all we're going to start a right um transaction I'm going to tell you in a second what what does a transaction mean but the second one is going to be realm dot create and we want to create here an object we need to specify the type of that object so that is going to be our task that we will import from Models so at the top task imported from models and this is the task that we want to create uh and the information that we want to send VI is autogenerated description is important so that's going to be the second parameter here description is going to be new task which is the field that we keep track of what user is writing and what else is complete we'll initialize with false created that will initialize with a current date and user ID is another required property that we will need to specify here because if we don't have it I'm going to try to add and we see missing value user ID so we need user ID when creating a new task and the user ID initially let's say it one to three now if I'm going to go ahead and do new task new task add task something happened we didn't get any errors and hopefully we managed to actually write a new task to the database the only way to know that I'm going to remove this one the only way to know that is to go ahead and query the database and get the list of tasks to query the database we're going to use another hook called imported from uh realm react called use Query so const tasks tasks equal use Query and here we need to specify the type that we want to query so it's going to be our task uh I don't think we need to filter anything so we're going to for now take all of them and I will rename it to tasks and I will also comment out the state because we no longer need the state and right away we see the task actually displayed there so if I'm going to do a second task and do add it's going to add here instantly in our database and that also means that if I'm going to go ahead and close the application all together and open it again the data is persistent because the data is written to a local realm database and yes that's how easy it was to create and read and query our realm database it took a little bit of time to configure it I agree but then after that is done like it's really simple to interact with it so I'm going to go ahead and remove it State all together and speaking about this realm uh right this is starting a realm transaction I'm not sure if it will work without a transaction at all maybe it will without transaction add no everything all the modifications like update read delete they should happen inside uh real. write which is a transaction what does that mean that means that if I'm trying here to do to write two things but one of them is broken let's say either add both or none if I would add a transaction we see that we have an error with a second create but the first one is going to be reverted back so if I check back we see that it was not added there that's because this is inside a transaction the right is a transaction and a transaction means that either all the operation here complete successfully or none of them will be saved this is great like when you are doing uh let's say a transaction is very important when a very good example would be uh handling the transaction of money between two accounts if you are sending the money from one account and doing like subtract $1,000 from account a everything works successfully and then add $1,000 to account B and it fails and if you keep it that way that means that you have an imbalance you subtracted the money from account a but you didn't add it anywhere so you don't want things like this to happen you want either both of them to happen or none of them to happen so that's what the transaction uh actually means so that's very powerful so that's what why we have it here now I will have it like this so everything works let's go oh my God okay so we have a lot of items already let's see how we can delete an item or yeah let's see how we can delete an item um deleting an item is going to happen from the task list item because there we are sending this task as an item so let's go to the task list item we are lucky because we use this description so that's why everything works out of a box but it would be great if we actually say that this task now we know that the type of this property task is the task not from RE native but from our models import task from Models so yeah we can access it with intelligence like do description or created that and so on we see that we don't have an underscore ID so it's going to fail undefined and typescript it's telling us that because in our case it's underscore ID it's not simp play ID if we look at the task object underscore ID and this is something very common to mongodb to have it underscore ID anyway here we have a task and when we press on this icon we want to delete it so let's add here a function cost delete task equal delete task equal to I'm going to start with a console war delete and I'm G to assign here on press delete task what's oh I forgot here and hey come on work yes here it is so if I press on one of these icons we see delete so in order to delete a task again we need access to realm so const realm equal use realm uh this use realm is going to be imported from at realm. Rea at realm react in the delete all operations should be inside the realm. write inside a transaction and here it's the function of a transaction and what we have to do is uh let's check the documentation because I forgot it should be realm delete or something like that this is for updating objects and where is it deleting objects is realm. delete and the object that we want to delete so simply realm. delete and here we provide the task that is of a type task that we want to delete just like that if I start deleting things we are actually deleting them as you can imagine oh come on I miss the button perfect so let's go ahead and also probably uh handle one more thing we saw how we can fetch or query the database for a list of things using the use Query but how can we fetch only one item to do that we're going to handle it on the application on the detail screen here in the id. TSX we know the ID and the only thing is that we need to get the task object based on that ID we're going to use here a use object Hook from at realm react react and let's go ahead and do task equal use object uh the type of the object is going to be task imported from models and the ID is going to be ID like this it might not work but we're going to figure it out so if task is not defined if if task if task is null that means that it couldn't find it so let's return here a text saying not found uh otherwise I'm going to say here instead of ID I'm going to say task dot description which doesn't say like it doesn't provide me intelligence that's because we need to type this use object hook using task like this which is a bit weird because it already knows the task so I would expect it to work automatically but we need to provide the type here if we want intellisense like this description so if I press new task the error is that it expected this ID to be of type object ID but we send there a string so that means that our task the ID is of type Bon object ID so we need to transform from a string to an object ID so for that we're going to need this Bon imported from realm and we're going to do new Bon do object ID and there we're going to put the ID of the item now if I go to new task we see the name if I go to this one we see the name if I add a new one and go here we right away see the name perfect so that's how we can query um task based on of an ID and this this problem is that this ID can be string or an array of strings so I don't know I'll just do it as string just as a shortcut not to to worry about it so now we saw how we can query one single object knowing its ID perfect let's go ahead and and do a g status git OD um right after I said git status I see that we have an intract folder called iOS if I'm going to go ahead and do a git add right now that would add the iOS directory in our git um in our git Repository there is a concept uh that Expo introduced called continuous native generation Expo and what that means like you can read more about that but what that means is instead of adding the IOS and Android folder store git repository it would be better if we create them every time we need them this way everything is configured through the properties here so we never touch the directly the IOS and Android folder so to kind of follow the pattern of CNG we're going to go ahead and add in our git ignore we're going to add the iOS folder so now if I'm going to do git status we no longer are tracking the iOS directory because we can always generate it using uh npm run um iOS or even npm pre-build that will generate these folders so let me do go ahead and follow git add git commit Min - M set up realm as a local database perfect so far so good hello hello inam hello Shady hello so okay so we're going good so far let me delete this one nice uh what we didn't see is updating an object right so I think updating an object would happen on the details page so let's see how that would happen if I go to application Details page here ID we are rendering the description as a text if I simply change this one to a text input we're going to be able to write away edited there and update the information about that component so let's render it as a text input where and for the text input we need some value there so we're going to have to keep tracking a state variable of the updated value so updated description set updated destion equal use State and we're going to default it with what I don't know with what probably with empty string right now but or should we can we um can we default it with Tusk question mark. description is it going to be synchronous I think so are we going to have access to it maybe we're going to see so let's use this updated description as the value of our text input we no longer need to uh render it as the child so I'm going to delete it and actually I'm going to delete a closing tag and make this a self closing text input tag tag style color okay okay okay what's happening I don't know yet but on change text we want to do set updated description so if I go here yeah probably initially the task description is not available is going to be available a bit later so what I can do is I will initialize it with empty string and what's going on here property does not exist on type string oh wait a second wait a second I was destructuring from an object but I should destructure from an array my bad yeah so now if I go new task it's right away editable and if I I'm thinking how to actually handle the save like when to save there is a call back on and editing and if I do here console Warn and that will be called when that component loses like kind of focus for example pressing enter will will call this function but will it also call it when we go back yes it also calls it when we go back so I think that's a very good place where we can um update in the database our description because we know that we are end editing so we can update in the database so let's go ahead and do update description description and let's define it as a function here const update description and what we need for that of course we're going to need a realm from realm react use realm const maybe I'm going to do it here const realm use realm in the update description we're going to do first of all we're going to check if we have a task because if we don't have a task we don't have what to update so I'm going to return right away but if we have a task uh we can go ahead and do a realm. write because this is how we change stuff in the database and then realm dot should it be update or change or I don't know let's check it out in the documentation where is it here uh working create update create updating realm here right oh we're just simply updating the that field and that's it so it's going to be simply task. description is equal to updated description if that works like that's really updated like this one the state variable so if I go to new task new task one two three and then go back look at this it automatically updates and by the time we are back here like we can do normal text go back and it's already here so that's really really fast like instant cool that's really nice so that was up dating very easy to do even easier when creating and deleting it should be ARR yes thank you very much V was for the the structuring here over the state yep so let's go ahead and do get ad get commit minus M update task nice so that's it so far our application is working perfectly with a local realm database this application doesn't need any kind of internet connectivity it doesn't have anything it doesn't need anything else we have we install it on our application and we can use it however we want whenever we want that's perfect in The Next Step uh so so far we saw how to add things how to delete things how we can update things and they instantly become updated and yeah in the next step is going to be when we when we go ahead and synr roniz it with the cloud so that if you want for example to work on the same project from different devices or yeah like on your phone and the tablet you want to synchronize all of these things together so that's why we need um we need to synchronize it in cloud or for example if you delete the application at the moment you're not going to you're going to lose all the data because deleting the application also deletes the local database but having a backup of your database synchronizing the cloud uh and that would allow you to always come back to your application sign in with your account and get the previous data that you had and continue working with a local first application that's is going to be the next step The Next Step synchronizing it with a cloud any questions so far why is my status bar not light do you think it's because of a f provider so if I do it outside like this and put it into yeah now it works okay okay guys so the next step as I saying is to go ahead and synchronize our realm database with a cloud to do that with Atlas services that I wouldn't say easy but it's possible it involves a lot of configuration but I'm going to again try to explain it step by step and even like add a bit of context around the documentation that might be a bit confusing so if we look in the documentation where we saw about modeling data crude operation uh Atlas app Services yes so the next app is going to cover Atlas app services so R provides SDK that help you connect your client application to the atlas app Services backend the SDK provides functionality needed to authenticate users so we're going to we're going to also build the authentication but we're going to try to keep everything possible to get started as an unauthenticated user so we're going to have Anonymous authentication first and then email-based authentication we're going to cover that as well um and these Atlas sub services will also allow us to directly access the mongodb data source or in our case we're going to use mongodb data source as a way to synchronize or replicate local um data uh application user management okay calling Atlas F accessing mongodb okay let's go ahead in the first one connect to Atlas up services so the first thing is going to be to create an up services application so let me check also the documentation if it's any helpful uh we can create the up services application from up services UI we're going to use the UI and this is a manag backend instance that contains your application services so to create the project we need to go to mongodb atlas if you don't have a documentation in front of you just simply go mongod DB Atlas in Google and the first link should be a link to the mongodb website from here you can go ahead and sign in and I'm going to sign in with I don't remember how but let's see yeah I'm going to sign in with my GitHub account and after that is done we should see if we press on the atlas here you should see a list of projects let's go ahead and create a new project by pressing new project here and let's name the project uh Trello let's click next uh my user as a project owner and let's do create project that's it now I think we need to go to the next step and we need to go to app services so let's go ahead to the app services and I need to choose the organization yeah I'm going to go into this oh so let's go to Trello and vent to up services come on should give me access let's go to choose v no just Dev Trello come on up services where are some kind of things like this [Music] that so going to a project up services to gain access ask the organization owner to add your IP address to uh in the atlas UI so where is that happening let me not share the screen for a second just to find where I can add my IP address it should be R to be honest I'm not sure why it's not it's just so many things come on um access manager or where invite creative no settings for that's that's driving me a bit nuts hey Bruno thank you very much for the donation BR saying dude it's awesome to have you here live and answering people's questions thank you hope you uh keep here for a long time all the best thank you very much I appreciate that it makes uh dealing with these issues much easier um of course let's Google it maybe there is some limitation on how many app Services I can have enabled let me simply try to sign out and sign back in log out you have security menu on the left network access one second I'm going to double check that well signing out and signing back in fix the problem oh no redirected me back so what do I have I have security menu on the left uh where settings alerts organizations maybe inside the it shouldn't be inside the project should be here okay here uh access Le by key docks uh guess start with atas Administration Grant uh program access require or well the easiest way probably is going to be to disable this for a second and uh later on I'm going to enable it back so if I go now to tro and now if I go to up services fingers crossed I still don't have access it's crazy require for Atlas administrator API but that's for the API oh looking to manage access to projects yes let me check no it's the same back to project page let's go you have security I have security and I have network access okay so okay current IP address not added okay I'm going to add my IP from here and we are deploying yes status I'm waiting for the status to become active and now if I go here still not working maybe it needs a bit of time network access the IP address is still like it says inactive so does it take time for it to become active I had like some other issues like this like to go through the configuration like if you're not used to to the atlas dashboard like it can be a bit hard advanc Atlas UI your IP address to IP access list for Atlas UI access manager one second let me try again this one why can it be because uh I'm on a free and is there any limit on how many up services I can have enabled because I have it on another test account so up services maybe it's only available on one project because I didn't have any issues with this in the test to do here so if I look at the up services here everything is working so let's try to delete the application I believe I remember some in the past some limitations of being able to do only a couple of things for the free account that I have so let me try to choose here Trello and still that's nice permission to view of it works on the free account for you it worked right for the atlas just going around like with this services e hello Ibrahim um Atlas security missing IP address let me try to delete the project let me try from scratch I don't know if that's going to change anything it doesn't even allow me to deliver project or what nice um Atlas status maybe we are having some issues mongod DB everything is operational TR board next yes create project from here should go to up services and it should work but it's not uh let me try to create a deployment first even though you don't have to do it maybe that's going to change anything so let's select m0 for the free version the cluster zero is already chosen cluster one okay we don't need a sample data set and let's create deployment okay that's going [Music] to create a database user it will add my IP address to the White list and let's go next close then let's try uper says the same problem exactly how I feel right now resolve itself after a couple of hours support said it seemed like a caching or other browser related issue and to try clearing a cach or using a different browser next time that's weird let's go ahead and start it in a Incognito tuab if that's a problem I'm going to be for for where is it oh boy okay so we are on trail board in a incognito window fingers crossed up services same that's fun should they go ahead and try it with a previous database that I have set to which I seem to have access let's do that way yeah because there is no other way yes so uh indeed I'm going to use the previous application to on which I have app service is enabled and I really hope that you are not encountering the same issues uh I don't know some configur fation issu some some IP addresses no idea what's happening but here if I go to a previous project that I have here setup the test to do if I go to up services we can uh start from scratch I deleted the previous app services so now we can uh create the app Services together so what I'm going to do is um you can try to go with um template from here but I we uh go ahead and do it together so let's press build your own application let's choose this one let's do next link uh your data source uh so this one can link to the data source which uh if in your project you don't yet have a data source and the data source is going to be uh very actual mongodb database that is being used it will automatically create a free tier uh cluster so in your case it's going to be this one in my case I already have this Atlas cluster so it's uh connecting to the atlas cluster that I created previously so let's press save name your application let's name it I don't know tro uh save and for the up deployment I'm going to use single region Frank Fort Okay so let's go ahead and do create app service let's close the guides maybe we're going to open them later uh so yes um now as I said if you didn't have a cluster yet that should have initialized the new cluster and to see it you can go to data services and the data services is where you can look at the actual database so here under the database you should see uh probably not instantly but in a bit of time you should see the atlas cluster so you can go there and that's where you're going to see like the collections and the tables that the the database has at the moment um I have it this is from the previous one so I'm going to delete it uh let's drop it so at the moment we don't have any database and any collections but that's okay we need to go back to our app services and we need to uh configure a bit more things to start connecting our local realm database with up services here so let's go to the Trello and where what would be the next step let's check the documentation uh in the documentation we are at choosen application type I started from the blank application name link data source so again this was the data source that was created the region and the application environment that determine which environment Valu is to use to learn more okay create application get application metadata well before we get to the application metadata I think I'm going to go ahead and press on this no environment uh because I want to set up an environment I want to set up the development environment let's save draft and you can also do next got it and let's do review draft and deploy deploy so now we switch to development environment not even I'm not really sure if that's what I wanted to do so let me check under the OBS tro yes it's in development and I want to go to the manage up settings in the up [Music] settings no where is it device Sy yes is it going to show in the documentation so much information here but I'm going to go back to the previous documentation uh that is specifically around um R native SDK so the first step we created the application we need to get our application just trying to to think like the the the step by step process uh that we that we have to do because right now in the documentation it says like we already need to to get the application ID so let's follow that and if we're going to have some issues we're going to come back here because we still have to do some changes here and I know them but um let's let's see maybe it's not time so what we need now is the uh ID of our application so if I'm going to press on the name of our application being inside up services we have application ID let's copy this application ID and let's go in our providers in our realm here in realm this is our local database now we're going to go ahead and import the app Provider from uh realm react so I will import it right away here the up provider is how we set up the connection from our application to the Cloud app application that we Define here in Atlas up services so let's go ahead and render the app provider inside the app provider we're going to have the realm provider and inside realm provider we're going to have simply the children like this but the app provider will also need the application and the application should have the ID of application so we can have here at the top const app ID equal and let's render it up ID it's not like that it should be ID not application ID up ID so let's go ahead and copy the ID of our application from the dashboard and paste it here let's go ahead and open back application it crashed for some reason let's see the logs if we have any reload okay everything is working fine so far what are the next steps well the next steps is actually the user provider the user provider is going to allow us to authenticate and handle information about the user who is currently logged uh there are ways to have Anonymous users but anyway we need some kind of a user to be able to to link the data with a with a specific user because an application is being used by a lot of users and all of them are creating data so we need information about who is creating this data so let's go ahead and create uh add this user provider user provider uh and this I know for sure before before we actually do anything let's go ahead on our application and under data access authentication being inside up services we should go ahead and uh first of all allow users to log in anonymously so let's click that provide allow users to sign with if I press on this one it redirects here let's do do save draft go back to authentication this one is enabled Anonymous and let's do also enable the one for email and password let's select it for email and password user confirmation method let's do automatically confirm users for development in production you can send a confirmation email reset password let's do I don't know I'm going to redir Simply to Google for now because I don't really go want to go into a lot of details with reset passwords but this is going to be the URL that you want to send when trying to reset the password let's save draft and I think if we go back to authentication providers that's what we want now Anonymous and email let's see under user settings uh no we don't need to do anything but we need some things to be changed on the whole application setting so if I'm going to go to manage up settings um no that's going to come a bit later so anyway after doing the changes we're going to see here review and deploy so after doing some changes we can go ahead check the update and press deploy we start deploying the changes all successful so now we would allow uh authentication with Anonymous and also with email and password let's go back so user provider user provider should be um rendered inside our application provider user provider and if we provide here a fullback component const anous login I'm going to Define this component that will simply say text login as guest let me import what happened here import text from react native now if I'm going to pass Anonymous login as the fallback of our user provider what's going to happen is if there is no user authenticated it's going to render the fallback so that's where we have uh Anonymous login or maybe let's go ahead and actually create it as a component uh let's call it new file login login. TSX let's move the anonymous login to our login component let's do export the fold and actually I will call it like login login just login because for now it's going to be login as a guest but later one we're going to have like more types of login so text from rack native and let's also import um view so that we we can align everything in the center maybe instead of text should it be a button continue as a guest let's go style Flex one and uh using Aline items Center and justify content Center we're going to make sure that the Contin as a guest is rendered in the middle of a screen so let's go ahead and import this login component in our realm provider import login from components login and let's render it as a fullback of our user provider okay we see continue as a guest if I press nothing happens but let's go ahead and see how we can sign in as a guest in inside our login screen so here on press uh guest login let's add this function here con guest login and here we need to actually authenticate the user as a guest to do that if I remember correctly we're going to have the US of Hook from realm react and const equal use of thing there should be um property login with Anonymous so if I simply call this login with Anonymous in guest login if I press this button I'm right the way back in my application because realm in this user provider will render the login when only when there is no user when there is a user is going to render the the children so the children is our screen and now if I reload the application it's going to remember that I am logged in uh that means that now inside for example our components task list we can get access to the user using the same use from use user hook we can do const user equal use user so what that will do is console log user let's see what's the information about the user so if I do reload it has information about the application it has uh should have an idea now let me try to json. stringify user null and two so this doesn't look like a user to be honest manage users so you can do Facebook Apple Google uh use user and then what's up with that user let me try to Simply do console log user. ID console log user do ID so right away we see the ID of the user of the guest user that was created for us if we go to our um Atlas dashboard here we can go to up users and we will already see a user with an unknown name with this ID that I just console logged in the application and the provider is anonymous login the thing is that the data of an anonymous user is going to be stored only for a limited amount of time and after I think 30 days or something like that is going to be deleted so uh that doesn't mean that the local data is going to be deleted but the cloud data so later on in the video we're going to see how how we can uh sign in with actual email and password so that the uh the user can like create an account and log in from different devices for now what I'm going to use this use user in our task list is when creating a task instead of hardcoding this user I'm going to do user. ID okay we're going to need it later but make sure to do user. ID here in the task list this way we are assigning it to a specific user oh that's a that's a rough start of Realm I must say like that configuration issues gave me a lot of headache but I'm happy that now we got started so we can um we can continue with with our plan so let's do git commit minus M set up up provider and anonimous sign in get add okay and by the way I I'm I'm now thinking like um about this process of seeing aex continu as a GU in a lot of cases that's that's okay because you might want to show like a login screen and with a button continu as against but if you want to write away like when you open the application to go to this screen without having the user to press on anything simply console log this guest login here so whenever the component will Mount it's going to perform a guest login and it will write away redirect Veer and you might not even need to render anything so this would automatically log in the user as soon as you open the application without him having to press on anything I'm going to keep it like this because later on maybe we're going to have like a proper login screen here but now let's continue and what I want to continue with as I said is I want to synchronize the database local database in the cloud so that's my next step we need to enable synchronization let me check if documentation is of any help today where we're going to have to go YOLO uh so Atlas sub Services connect okay we connected retrieve okay we don't need that encrypt no need call a function query mongodb no manage users no let's go to the sync data Atlas device sync automatically synchronize data between client application and Atlas app Services backend the back end that we created here in app Services perfect that's what we want when a client device is online syn asynchronously synchronizes data in the background between the device and your backend application and that's what powers and makes this both an online and offline application which is offline first and only after the offline is happening uh the data behind the scenes in background is being synchronized with a cloud so for that we're going to use a flexible sync when you select a flexible sync for your backend application configuration your client implementation must include subscriptions to query the fields flexible syns works by synchronizes data that matches query subscriptions you maintain in the client application so from the application we're going to subscribe to data and that's how we're going to do we're going to keep things in sync because maybe not everything we want to synchronize that's also possible so let's go ahead and configure a synced realm uh you can configure a realm to automatically synchronize okay between many devices that each of their own local copy of data we need to enable flexible sync on the back end so let's do that I'm going to go to our uh up services and here let's go ahead under is it going to be Atlas devices DEC no it's going to be device sync under device sync let's go ahead and Press Start syncing uh um generate schema we actually have a schema so no FS continue to sync we're going to go to the configuration of a device sync we're going to choose flexible here for now let's select development mode and the cluster is that mongodb where we want to use or where we want to write the data in the cloud okay Define a database name let's select our add database we don't have any database yet so let's call it uh Trello let's create and selecting the queriable fields we need to make sure that we're going to come back here to select them that's a very important thing and I spent like hours figuring it out but now think everything is done we can press enable sync right a copy of data that matches adjacent schema in you okay check your cluster storage before proceeding before enable a SN okay enable sync okay what V are the default role for a preset default user is denied all access user can read all data users can read and write all data let's select users can read and write all data by default and then we're going to see how we can adjust that at default R uh what else what else are we done here probably yes so let's press review draft and deploy and let's deploy our changes that enables device synchronization and it's very important to have development mode uh on and flexible sync type going back here here authenticate the user so to configure a sync realm we need to import providers configure application provider we have done that in the realm we have a provider all good user provider all good and then we need to configure real provider to enable the syn on it so realm provider is the uh provider for our realm local database that's where we will also say like hey you also need to synchronize with the remote one uh it should be inside the user provider which we already have and we also must set up a subscription in order to start the synchronization the example below use this an initial subscrip subscription but you can also start okay this is how you Nest providers so app in the real provider we need V synchron ization configuration I'm going to copy this sync from here and I'm going to add it for our round provider after providing the schema so the scheme sync configuration has flexible true and we also provide here some initial subscriptions like subscribe to some initial data update subs and here is where we will set up subscription to the tasks so we need to import task from our import task from Models task should we destructure it oh we already imported it so now realm object task that should start a subscription with the tasks let's try to reload the application see what's going on there and right away we everything disappear for us let's try to add some information add task cannot write a class task when no flexible sync subscription has been created but we have flexible Sync here why or not working let's go ahead and do what open TR again error query metadata sync let's double check with my example to make sure that flexible I have have a on error here you can provide the on error for the sync to conso Lo the the error itself perform input operation requires a valid session ID a valid session ID in my case the application ID looks a little bit different than here so I'm wondering but it connected like I created um let let's double check let's go ahead here reload our up services see what's going on so if I go to my tro this is the application ID application ID yeah then we have a schema and the schema was uploaded from our locally defined schema so with no that something worked correctly it it took the schema that we defined locally in our local database using model using all of this information and it uploaded it uh to our app services so something is working sync models schema authentication up user schema device sync uh development mode is enabled that's good permissions are completely open for application okay that's also good sync session log sync models no configuration it's okay that we have development mod we need that yeah not sure why uh it fails to synchronize okay let me check again add realm objects realm objects I think this one should be added as um as a string and it also has a rerun on open true okay something worked we wrote something it's here and now if I'm going to go to up services if I'm going to go to data services to check out the actual database let's open database here let's go to atlas cluster Collections and here we should see the task collection under the Trello database and right away we should see the objects that we just created if I go back here and remove one of them they should probably be removed from here as well or at least yes it was removed completely and yes that's nice that's how how this that's how the information synchronizes in the cloud automatically behind the scenes without us having to do a lot of stuff the only difficult part of course is the configuration and getting it to work but after that we don't have to do anything extra like the same way as our application was working of uh offline now it's also working online as well and uh in a moment we're going to see this uh by logging in into the same account trying to uh trying to to properly to trying to work with the same data update it on one device see it updated on a different device uh okay that's good so that means that we have syncing enabled right okay let's go ahead and do the following get add get commit minus M set up uh cloud sync wave Atlas app service hello from Turkey hello hello can you self hose the whole stack or you need to pay a monthly plan to mongodb that's a very good question I have no idea if you can self-host it but I believe you cannot I don't think like the app Services mongodb yes you can self host mongodb um but the up services stuff I'm not sure good question oh so we have a schema okay let's go ahead and now set up email based uh authentication email and password because it's good to have like guest login but if I want to run this application on a different device or maybe let's actually do this first let's run it on a different device by doing npm uh npx Expo run Android and see how we can have different data then filter the different data and only then do the that one yes that's how we're going to Pro do it next uh I don't know yes you can do that so I'm running on Android I'm building for Android and uh that means that yeah I'll try to use like two phones to to do that um should I wait and do it like step by step hopefully it's not going to take like crazy amount of time meanwhile I can prepare the next thing I can go to Expo icons let's go here and let's find the user icon I don't know something like this and let's render it uh as part of the header on the project board so for example I'm going to go to the application layout under the screen options here let's over stack let's do header right it's going to say it's going to be a component that will render this icon I will import it from font awesome and I'm going to render it like this it should be gray or maybe uh light gray 20 maybe or yeah 22 I 24 was okay and whenever we press on this item we're going to have to go to a profile page or to the actual login page but I'm going to follow that in a moment let's see what's going on with Android unable Android why why is that what's up with this Android phone why it's not running what's the okay so here we have a continue as a guest I'm thinking that I don't need the continue as a guest at all the Lin I think at the end of the day I'm going to call it anous login I'm going to call this component Anonymous login Anonymous login and in the providers in realm for the fullback I'm going to do Anonymous login like this this now it still renders continuous a guest text but as I was explaining to you let me show you how to do that so instead of doing this what I can do is I can call login with Anonymous I can delete this one or instead simply return null I don't need it anymore so this is a component that right away when being rendered we'll try to log in as a guest that's what it does and we are right away here so we have access to the same um information if I write something on the iOS send it automatically adds here if I write something here on Android which is a bit slow uh it adds there automatically if I delete as you can see things are updated and deleted instantly updated save update perfect so so we see how the synchronization Works between two devices both of them are running their own version of local realm database but behind the scenes they're synchronizes synchronizing with a cloud and trying to make sure that the data is kept in sync between the the two devices um the thing is that the Android and iOS they logged in as Anonymous users if we check in the authentic or in up users we see that we have two users right away here and what I don't want I don't want to see the tasks created by one user in the application of a different one I want everyone to manage their own tasks and later on by creating an account you can share the same task between multiple devices but only when you're sign in as a same user which signing in as a guest user will never happen guest users are always unique so what we should do uh we need to add uh some rules of how we want to synchronize data we want to synchronize only data created by the user that is authenticated and because our uh model our task has this user ID we want to say like synchronize only the tasks provided by this user this can accompl be accomplished by filtering in the subscription but a better way is to completely uh to do this from permission standpoint and to completely avoid anyone having access to some data that is not vars and to do that I'm going to first go to the device sync in the configuration close this one scroll down and click here addit quable fields this is something that I missed like when preparing and I spent like an hour figuring out why I cannot do it so from The Collection select our task and let's add the user ID as a queriable field because we need this user ID to use to be used in the permissions to check if someone is allowed to do a operation on the task let's press save and let's press save changes again save and it was saved now I will go to our data access and I'm going to go to the rules defining rules next got it let's go ahead and Define some rules on the task database there are some default rules here like deny all access read all read and write all but interested in the other preset this one user can read and write their own data and admins can read and write all data so let's select this one to make sure that the data in task database is only being able to read and write by the by the user who created it let's create add preset roll we see that there is some issues uh because I will press cancel because we actually have to update it and the issues are for the user if I open it up if I open it up we see that the permissions here are are working with a owner ID in our case we have user ID so we need to change from owner ID to user ID and what happens like before inserting deleting or searching it's going to check if the user ID of a task is equal to the ID of authenticated user and only then it will allow it to do so let's click save now everything should work correctly and let's go back to our applications let's try to and I already see that it synchronizes correctly even without reloading even without anything so this is my task add and this is Android Task ad so they are not shared because they are different users so that's how we can limit what data is being able to sync on the device one way to do it is using the rules and specifying what data a user has access to okay perfect um The Next Step yes this was the synchronization only your items The Next Step probably is going to be to add proper authentication like you use the application as a guest but then you want to go ahead and create an account so that you can save this data and later be able to access it or sign in with the same account on different devices um for that we need like proper email and password authentication let's go ahead in our application and let's create a new screen called uh login. TSX login. TSX and here I think I don't have a lot of time to actually implement the login screen so let me check the the login from here let me try to go with this one and I'm going to explain shortly what's happening here and last step is to only connect like this icon from the from the top with the login screen to do that I'm going to wrap it inside the link component from export outer and here HRA is going to be loog login so if I press login I'm redirected to a page with a input for email and password if I go to the login uh I'm going to check like the rendering the rendering has a text input for our email that saves the data in the email data it has a text input for the password it will show the errors you're going to have access to this through the source code uh that I'm going to touch later in the description so that you can copy paste this screen as I don't manage to to build it from scratch and it has two buttons one of them is login and this log in let's do I'm going to assign also here register style because I was not able to see the button and yeah it has two buttons one of them is uh register and for that we are calling a hook a function called login with email and we simply send email and password and for the register button we call register with email and password as well now these functions are taken from uh here register and login with email and password the register is from use email password off and login with email and password from this hook both of them are coming from realm react so this is registration and login so let's go ahead and try to register an account I'm going to use my email and a damy password let's Press Register and right after that we are redirected back to the project board because what happens is after the Reg registration if registration is complete we automatically log in that user and if I go back here to the to my application if I check up users now we should see a new user using a provider email and password with this ID so now I can go ahead this is okay that's not very good I don't know what happened there this is my account add task so now this should be only for when we are signed in with the account of my email we can check that on the Android if I go ahead and log in with the same account I should be able to access the same data I will Press login save and we see that we have access to the same data that means that you can use the same application from different devices and they will synchronize between each other like this as you can see hello hello like this and so on and if for example one of these devices will not have an internet connection I will close the internet connection on Android because that's possible I'll say new task while offline let's do add task is not going to be updated on iOS but here new task from IOS let's add some task from IOS as well let's maybe delete the the this is my account task and we see that on iOS everything is good here we do not have internet connection ction so the data is not up to date yet but the next time you're going to go ahead and connect to the internet and as soon as you do that pay attention to what's happening here it will take a bit of time to connect to the internet but as soon as that will happen uh it should update let's see hello new new task while offline was added new task from my is here and the first one uh the first task that we deleted is deleted so now as you can see all the data is synchronized and we can continue while online it right away updates and this is the power of the whole system that we have managed to build so far that's what I'm proud of in the end [Music] um we have around 15 more minutes and I'm thinking what uh what to cover I have like multiple lists but that is probably not the most important part what I wanted probably to cover can we see how uh on this login screen if I'm already logged in can I do I don't know log out on login screen let me try to do let's create a new applica a new screen called profile. TSX and here let's do export word default function profile return return view text profile rack native and here and what I want to do is when I get to the loog or even before getting to the login maybe in this link I can check here no I don't want to do it here uh look I'm not going to to spend a lot of time here figuring this out you can do definitely better I'm going to Simply add a new uh I conveyor just to be able to see the profile screen so I'm going to have the login and I'm going to have a profile and in fact this one user circle is for profile and here is I don't know some kind of arrow for the login uh Arrow font awesome sign in sign in so again this is not the best approach because you need I to go to show like The View Flex Direction row either to show the profile screen or the login screen now if I go to the profile I will be redirected to the profile screen here perfect I can go here in the profile and I can get information probably about the user so user equal use user which is a hook that we can import from uh use user equal import from realm react so here I can do text style uh color white and we can do user.name it's not there user. ID okay user. ID for now what I want here actually is to try to be to do a sign out so let's add a button with a title sign out on press what should happen probably using the use off we can get access to the sign out function const something equal use off and how to sign out realm react sign out user. logout is it user. logout user DOT log out let's go try sign out is not a function of course [Music] user user log out user to log in user out call user on vyor user instance when a user logs out or I can use log out from that is weird that it didn't work but let's try the log out sign out and we're back to the anonymous uh data right right I am anonym on task and if I'm going to try to sign in with by DM not just. Dev login is going to be different and if I go to profile and sign out I am Anonymous so I'm going back to the anonymous user um what I want you to do is whenever we are logging in I want you to connect like for example example if you work as Anonymous user you have like tasks here and then you create an account you don't want to lose this tasks you want to kind of move them from Anonymous to your user Veer so there is a way to connect identities I'm not sure if we're going to manage to do that but here manage sync session no U manage users authenticate users uh connect link user identities so linking user identities is a way to link different identities to the same account so user can for example sign in as a guest with email and also with Google Facebook and so on and have the same account so I think that works by using the uh link credentials link credentials after we registered so link credentials is imported from where uh link credentials email and password user. link credentials set user identities so this is the function that is inside the login screen credentials is it imported from where from realm react where is it coming from is it outdated already user link so we can get this user here and when the user also changes after logging in with or before we need to do link or user. link why use user is any no user realm user link identities link credentials and Link credentials expects credentials and credentials is what yeah I cannot get access to this credentials but I believe it should be like this email and password so if I'm going to sign in right now with VM not just. Dev and let's check it here sync over local oh you see this user if I'm checking here devices no this is device ID yeah not sure actually uh why this is not working but there is a way to link the credentials of the unauthenticated user with the authenticated user but anyway uh I'm going to stop here because we're running out of time uh anyway everything is working perfectly fine we can sign in as a we can work as a guest user we can work as a Authenticator user everything synchronizes everything works offline as well and whenever we are uh back online it managing the synchronization with the back end that was an interesting experience uh really really enjoy this this project I wish that we didn't have to to struggle with that configuration issues with the atlas services but in the end it worked it worked quite well and uh I want to see where you guys are going to take this project from here because this is just the beginning this should give you an understanding of how you can set up this configuration and use it in your project um whatever that might be so if you enjoy this tutorial make sure to subscribe to the channel leave a comment and actually I'm going to ask you a small thing if you actually took value out of this tutorial if you enjoyed this uh it would really mean a lot to me if you can write a couple of nice words on Twitter and tag me at Vadim notjust dodev we're collecting some testimonial for our upcoming course and we want to showcase some words where some The Experience from our students from here from YouTube so go to Twitter say something nice about the tutorials that we have done tag me and we're going to try to include it on our next website uh if you have any questions right now feel free but we have around 2 minutes we have to to end it using a document picker do we need to ask for permission if I'm not mistaken yes you need Johnny saying I love this all the tutorials don't do this part they usually stop right here yes thank you very much uh someone is asking about sying po postgress databases uh that's probably something that I really want to get into as well uh because this is really great uh especially if you have a new project or if uh you are already using mongodb but if you're using some kind of a postgress uh database in that case you would need uh a different solution so I'm going to make sure to cover that as well and if you want to send ideas uh we have the idea board there is a link in the description below where you can submit project ideas features tools that you want to learn more and I'm going to try to do uh to cover them in our next tutorials anyway guys thank you very much for uh being here with me I hope you enjoyed this one and I'm going to see you next week bye

Channel: notJust․dev

Views: 29,136

Keywords: vadim savin, not just development, notjust.dev, live coding, react tutorial, react native tutorial, react native for beginners, React Native, step-by-step tutorial, Realm, Atlas Device SDK, Local-First Architecture, Offline-First Apps, Trello Clone, Project Management App, Cloud Synchronization, React Native Tutorial, Building Offline Apps, React Native Realm Tutorial, Local Database, local first app tutorial, building an app with realm

Id: WiXs0JbA3_k

Length: 239min 20sec (14360 seconds)

Published: Sat Apr 06 2024