Building from scratch a React Native App with Realm and MongoDb Device Sync

so hello everyone uh today I will talk a bit about the realm SDK um it's basically uh a real really really cool um possibility of us adding device synchronization with the back end so realm um was acquired by back in 2019 and they've been developing for different languages um possibility of us integrating with databases so this is what I will be showing you today and Hope we can do some demo and then we will talk a bit about our case study uh so let's get to it so first of all I would like to talk about our case study which is was with dor dork is a mobile application uh it basically allows um user to search and review for specific working places like co-working cafes Library basically any place that um people can feel comfortable to work or study um people can add reviews like Wi-Fi quality amount of Po Outlets um quality of the coffee which is really important anything that is required uh nowadays for digital Nomads and other remote workers and and business Travelers even um that would would require so basically this this was a big challenge uh on this application it required um a few specific cases which is um this is the UI uh of the our our app that basically allows you to add reviews and each Place uh has a set of features as I mentioned um from technical to food to the environment itself uh so please check it out on this on the mobile stores and um the requirements as I was mentioning they basically have had to be crossplatform for Android and iOS on the same code base um so this was um one of the primary requirements it had to be offline first and with a persistent local database so this is where realm came in handy uh seamless server synchronization this as well uh is required for us to in real time have access to reviews have access to all of the uh updated data and we needed authentication for email Google um and apple um in the mobile side so this as well required as um specific um security level and as well required us to to to be able to to actually um set exactly the roles per each user that was authenticated um so the solution U was as you can imagine was we we came with Mongol um SDK um using realm and the initial data from each place came from Google Places API and then users would add on top of that their own reviews like the Wi-Fi or the um um the power sockets and different types of features and this would be sent back to the database and users could synch ioniz this seamlessly and of course offline first and this is what I will talk about quickly which is basically realm um after was bought by DB was we would uh have access now with this SDK for at the local storage that we already were used to from real but now um the the biggest uh feature that we we used is basically the device sync so this means that the the application is synchronizing real time despite any network issues or any any conflict that might arise that we know that is quite common between mobile and backend and all of this is running on the backend thread so it gives a bump in the performance and and yeah and everything will be synchronized between uh our instance and our realm instance this is what I will try to show you uh I'll do a quick demo to show how it works let's set up a DB on the back end and I will show you on the front end how can this be set up really quickly and really efficiently so let's go forward okay so first of all um I will configure on the back end side and this I just entered mongodb um logged in with any account I will choose the free uh instance uh and I will go forward create this free instance um and yes so it it was created um here you can observe a few things that basically the um we have here a few sections we have the data part and the app service part I will do a few things here on the app service to allow us to log in anonymously so that means uh we are able to access the users are able to access a data without actually being logged in um for example if Gmail or apple initially so here you can see initially it will ask me um what's the template I will choose realtime sync for mobile apps using Atlas device I will go forward okay I will use JavaScript react native and yes um and here you can see that the app was created um this is the app ID this is what we we will be using on the front end part on the mobile I will add just a few things like I mentioned I need to configure Anonymous login so I went to authentication authentication providers allow users to log in anonymously I will go ahead and Mark this one is uh enabled okay and and one important thing is if I go to device sync you will observe it's already enabled and development mode is on this is really important because this basically allows the models from the client from any uh anything configur in the front end to be reflected in the back end automatically right so we should disable this for production but for development it's really handy because it allows us to declare all of our models in the front end so this all I'll be showing you now I will switch to the to the frontend side okay so on the front end side uh um what I did I ran a react native in it with the with our initial template and call it task list so I just ran this command uh waited for the the pods to be installed the dependencies and this is the outcome we will get um so at this point what I would like to do initially of course is install realm so I'll just go ahead here and and run the install realm and um as well I will be interested in installing the realm for react so this is what I'll be installing next mpm at realm react okay great so this was installed I will run my pod install as well since I will be testing on iOS okay it shouldn't install um our realm and while he is installing the pods I will go ahead and start coding so basically first thing we're interested in is um we need to add some providers right some um High their components so what I'm going to do here is I will create one file which will be my app wrapper so this one will have the app uh and the user providers so we'll create a an a app wrapper and this one will be basically um just a wrapper on on top of my normal app that we will actually be using realm so my app wrapper I will be going ahead and just creating here normal component um basically with my just6 and yes I will return here my providers this is important here we're going to use the app provider this is from from realm I will import uh app provider and yes and then the app provider um basically we will be interested in um that ID that I was mentioning to you before that we got from the um the backand side so if you remember we got it from this screen here and basically yes so first of all that provider we will have as well the user provider and uh finally I will create after the realm wrapper and let me just go ahead and close these um this high order components uh us a provider and the app provider okay uh okay okay so in the end you will have something like this import react um and I added here the realm wrapper that still we didn't create yet what's important as well is that in the user provider we need to add a fallback so what I'm going to do I will add the same fallback as the uh as the realm wrapper itself the reason for that is that we in the r wrapper we will actually log in anonymously um so in this case if you're if you would like to for example block your users to to actually require them to login here you would add a login component but in this case we are just for the demo here we're going to be logging in anonymously so let's go ahead and create the realm wrapper I'll go ahead and create here new file um called realm wrapper T6 and yeah for this component basically we are going to do something similar to what we did before we will be adding the here the our component so let me just go ahead I will just start here with uh with my component so this will be my realm wrapper returns um j6 um element and we will basically this component will allow us to first of all we are this component as you remember the it is um being wrapped by app provider so this means I can use the use app from the from realm so this is what we're going to do so app use app this is already imported from the the realm react and what I'm interested in uh first of all is I will return my component I'll go ahead and add a safe area view already and what we're interested here is basically what we're going to add is um my realm provide my realm provider this is required for us to be able to actually use our our models this is the real provider and basically what we're going to do is um here it's really important the parameters we will pass to round provider so first of all uh we need a sync object with a few parameters so first parameter is that we have flexible so this is the the new um the new standard for the synchronization we have a legacy synchronization still but the new ones um we will be using flexible and we have two parameters that are really important first of all is the new realm file behavior and this is what actually the offline first means right so here we can add we need to add a type which will be for us here um a behavior so I need to import Behavior Uh open Real Behavior type and we have two types we have download before open or open immediately right what I'm going to do for the new one is I need to download before I open right so uh the very first time we will download but we have another parameter which is the existing realm um beh the realm file Behavior which is basically uh if I already logged in if I already accessed the database before and I did a synchronization um from this point onwards I do not need internet to open the application right so if for some reason the user is is offline he can open the app use the app that all of the data will be stored in the local database and when the user has connection again he will be able to synchronize so this is really really handy and it's quite easy to make this configuration we're just going to add this parameter so this one will be Behavior type uh open immediately for the existing right so this is super handy and super important uh okay great we have our providers and here I'll just go ahead and add the app um which we still uh which was already created from the template we will change it and I will just go ahead here and export my [Music] component which is the realm wrapper right second thing we need to do here is the anonymous login like that we mentioned right so for the real provider to actually be accessible I need to be logged in uh remember that I before I activated the anonymous login so this is what I'm going to do now and I only want to access the r provider if I'm actually logged in so for this I will use a um a use State here so is logged in um set is logged in State this will be just a Boolean for us to have control over this and I will only actually access the realm provider if I'm logged in if I'm not loged loed in I will just show a loading for now perfect okay um and of course I need to put this uh in cly braces okay perfect and so if I'm logged in I will actually open the realm provider if not I will be still showing a loading and as soon as I enter I will log in anonymously right so this is what I will be adding now so I will just add a use effect here with the with our Anonymous login and for that I will just go ahead and since the the the function is anonymous I'll create here an anonymous function which is login and this function we'll simply just call the the login I will create some credentials which will be realm. credentials. anonymous so he will create some credentials for me and I will go ahead and call app that we imported before from us apppp and login with those credentials that are Anonymous perfect and after I successfully log in I will just go ahead and set is logged in to True perfect and I will call this login as soon as I run this use effect here probably have the app perfect so as soon as I I have the login I will be actually rendering the realm provider um then reminder we always need to be logged into to use the real provider okay great now uh inside my app is where actually we are going to start using our models for that I will create some models so this is I will create here quickly a folder it's with the models inside this folder I will create our first our first model which I will call a task this is what we'll be doing now so I'll just go ahead and uh start writing my model export class task which will Ex extends um realm object and I will declare this will be a really simple object I have a primary key ID this is a realm um an object [Music] ID this is the type title that will be just a string and a description of my task so this will will try to create um a uh task list quite similar to the demo that they they provide as well here you can see um a really simple version and here we need the name of our um our collection which we'll call task what the primary key which is in this case the ID that we created there's score ID and the properties of course properties which will be uh [Music] ID which is actually um object ID this is the the type title string and the description which is string as well okay that looks good the last thing we need to do is create a realm context so I will export um realm context this will be actually exposing our queries create uh realm context schema and this will be an array all of your models will be here this point you have only one which is our task perfect let's go ahead to our component and start using this um these tasks okay so in my app this is what created by the template I will remove a few things here um I'll just go ahead and remove this one which is created by the template and I will add a few things so first thing we want to add is uh before we created the realm context I will import it them here and they expose here two hooks that will be really useful for us first of them is use Query and the use uh realm and they come as I mentioned from the realm context that we created so I will import it here we don't need these Imports for now yes and perfect with those I will go ahead and use those hooks so realm will be from use realm and I will import as well the the tasks which will be already the array um and I will use Query and simply pass here the model that we created so I import from the models great so now I actually have already the tasks here they are getting pulled from the database what we want to add as well uh is here some components to see those tasks so this is what I'll be doing um basically let's add here flat list um I'll add the data which is of course this array which is the tasks tasks and a render item which will be really simple at this point we just want a quick demo here um so we'll have here our item and this will actually just render a text component and which will be um the title in the description so item. tile and item dot description perfect so we have a flat list that's great I will add this under a view and I will put here some just a quick uh Flex one and that's great here our our lists and we can see um perfect uh one thing important is that we need to add some subscriptions so we can see in real time those changes so I will add here in my use effect so here I need Realm do subscriptions do update I have here mutable um subs and we just call mutable uh mple Subs uh do add realm do objects for the task right so now we have real time um subscription perfect um let me import use effect great okay so this is perfect and the last thing I will do so for so we can see as well the both ways in the in the task synchronization I'll go ahead and actually have um add some tasks from the front end so we can see them in the back end so let's do that um first thing I will do here is an add task call back function I'll use callback and this callback will simply write some tasks for that we'll use realm right and here we will actually create a new task so we will call realm. create and here we need to pass first is the what is the name of the of the collection which is Task and uh task a new task uh object so I'll start with the primary key which is the ID and I'll just create here a random um ID which is a um a beon object ID type from realm this needs to be imported from from realm do it now and title and I'll just put here a new task which is walk the dog and the description is uh bring an umbrella okay because it's going to rain and great I will import the um from realm the B on so this is directly from round import from round directly okay don't need these Imports for now and of course we need a button to actually call this call back so this is what I'm going to create here quickly so my my button is simply a touchable opacity touchable opacity for now really simple inside there a text which is new task and style we'll just put here a background so we can see it backround color yellow and of course we need the Don press which will'll call our call back which is add task okay let's run this on the simulator and see what happens so I will go ahead and run iOS um have my simulator here opened let me see what happens here okay it finished running uh the build uh of course what I need to change here before I run is the index JS it needs to point to my um app wrapper which is the very um the first uh component I have that is wrapping all of the others and we will run I'll just go ahead and open it again and I will check the app wrapper this needs to be important imported okay and there's another import I will fix it as well something important here since we use the real um provider um from the realm context this is what we need to import here in the realm wrapper so this is something I will fix as well so here the realm provider should come from the uh realm context that we created before for which calls the create context so this is important and this is not should be not imported from here so let's give it another try uh okay so let's give it a try I will try to run it again and see the button and the last thing we added Flex one to to this component I will add to the parent as well um just for us to see the whole screen Flex one so let's see see the UI okay I see my button new task in the bottom and I hope the list is here I will just click new task and let me check uh okay so we ran I will check the back end to see if the schemas were created correctly because if the development mode is on as you can as we saw before here in the back end we should see the actually the schemas so let me check uh and we see perfectly a task schema and here is our properties that we declared on the mobile side so this is incredible we are able to declare everything on the front end side and the back end simply creates those um those entities from the for the DB last thing we need to do for us to be able to uh write and read from the mobile side is rules right so this is really important there are um I will add after a few documentations um available how we can configure rules uh a good alternative is to use for example custom user data which for example specific users will have access to specific um data um based on custom user data um for now I'll just for the demo purpose I'll just go ahead and put read and write all um but of course in production you should actually choose each entity should have specific types of rules based on the custom user data or different set of rules so I'll just go ahead and add this one just for us to for the sake of the demo uh so I'll add read and right for the task okay perfect and I will check how is it looking on the the side um okay so let's give it a try um I have here um my empty list and here we have our yellow button of new task which calls realm right on the on the mobile side so I'm going to go ahead and click new task and we have walk the dog bring an umbrella this is what we created uh on the front end side and we're going to check here is on the back end so if I go here to database collections uh I will just go ahead here and put an empty filter and it's here perfect so we have here the walk the dog bring an umbrella the synchronization is perfect between the mobile side and the backend side uh anything I change for example example on the back end side should be reflected um on the on the front end side so if I um give a bath to the dog um and I update on the back end side immediately on the front end it reflected the change uh if I change this on the mobile side it reflects on the back end if I'm offline it will uh store locally and synchronize after so this is a really really powerful tool it allows us to do amazing things um in a quite quick way so in less than in 30 minutes uh or less we were able to to configure the whole um mobile application with uh local DB uh using realm and a synchronization use Atlas device sync and and this was just um really really powerful and really really easy to to implement so I hope you you enjoyed and if you have any questions you can always contact me I will leave here my um my contact information um please download dinor it's a great app to find good places to work and hopefully we can connect uh thank you so much

Channel: Dinork

Views: 3,117

Keywords:

Id: 7nk0VG35WXc

Length: 31min 43sec (1903 seconds)

Published: Tue Nov 21 2023