ObjectBox Tutorial - Flutter Local Database with Sync implementation

hello everyone and welcome back to another episode of flat explain today we want to talk about object books object box is a nosql database which has some additional functionality such as sync first of all we will talk about what is object books and why you should use it afterwards we will have a look in a flutter counter app and see with a simple example how you can implement the object books and also the sync functionality in it and last but not least we will create together two restaurant applications one application to create and order your dishes for the kitchen and in the second application we will get all the orders and the chef in the kitchen can see what you order to prepare your meal and now without further ado let's get started this video is sponsored by object box object books is a nosql database where you can save your dart objects locally it has a high performance and if you compare it to hive or sk flight or any other local databases it's very fast object books had also an additional functionality which is song song make it possible for us to save our dart objects also online which means we will save our data on a server you can deploy your sewing server on any server and also an embedded devices such as your phone your tablet or any other devices now as next let's have a look together on a flat account application and see how the sync server and the object box work there and how we can see synchronizing the data in this application now let's jump into our flatter counter application and see what i implemented i use the flat account application because most of us are familiar with this application as every time we create a new flutter project we see the counter app this is a simple application and what i did is actually just implement the object box database in my application and use the functionality to show the counter number in my other application this app and this application is nothing rather than just reading data or reading the counter number from the sync server so in our current application every time we click here on the increasing button on this button i increase the counter number and what will happen is i increase the number and add this number in my database and afterwards i use the sync functionality to save this data and from the sync server my other application will read this number therefore you can see that just in time both numbers or both application counter number will change and will increase the cool thing about object box is actually also or the sync functionality better to say is if i'm going in my read data application and turn on the airplay mode so that i don't have any internet and in my other application increase the number the counter number so because we don't have any internet the content number in the read data won't change now i will go back here and turn off the airplane mode and as soon as i change the number i think i it takes a bit time but afterwards it will just update the counter number oh this is the right moment to hit the like button and subscribe to our channel if you haven't yet and now let's go further amazing guys so so far we know what object box is what the sync functionality of object box is and how they are working now let's jump into our tutorial and implement some code together okay so i create create some order and for example i can add this one i can add two-time rice with chicken so gel i have three and this is red the background color is red as long as i didn't confirm that and as soon as i confirm that it will get green and the chef is sure that you order this dishes and he will start to create it so if you would like to follow me in this tutorial please check out the link in the video description below to the github repository you can find the github repository and if you check it out you will see this mono repository which is the object box tutorial and there we have two branches the first one is the master um where you can find all the solution and the other one is the to do object box tutorial which i will check it out and here we can go through the different to-do's the first thing like any other application is to add the dependency for adding independent scenes i will head to the official documentation of object object box here you have the getting started and you can find everything which you need for your project i need the dependency for that i need the object box dependency which is my blue number zero i will add this one i think there are already newer version so update the package here add object books dependency the second one is add the sync flat ellipse dependency which is not this one but here is mentioned for object work sync use this dependence so i will just copy this one and here paste it and get rid of this to do as next we need the build runner and the object box generator which are these both dependencies copy and paste here format it and get rid of these both for the build runner we have also um your packages which i will update it and go for the pop get here now is next uh we'll go to the lib folder and here we will start or continue with the to-do's in the item model the first to do is create an entity item model with id so i will create a class and call it item model and i will annotate this with entity and after that we have an id which i initialize it with zero we have a string item name and we have an other integer which is item count parameter perfect then we want to also tell object box this class or this entity is also a sync entity and we want also to have it as an object in our sync server i will add the annotation sync here my class get rid of the first two to those after that create a constructor so i'll just come here i need an item model i prefer to have name constructor so this is gonna be a required parameter i need always my item name and i need also my item account and get rid of the next to do before i head to to do number five i will go to the to do number three which is gonna be in our next model we will come back to this to do later in the order model file we need an entity again so i need entity and here i need a class order my class has also an id and a boolean flag which is ordered initial parameter of false and here i hold the object box and this class is also um an object that we want to have it in sync itself or we want to communicate it in our sync server therefore add the sync annotation in an object box we have different relations with relations we will connect different models to each other for example we have here an order model and our order will contain different items and our item is just for one model we can define them with the different relations so what we have to create here is a variable and i will call it items and what we should do is create a too many relation here from type item model we will import this one and we need also an annotation with the back link with that we will link our order model to the item model to the target object so get rid of them to do number four and go to the last to do in our item model create a one to one relationship with order model so i will create another um variable called a order model here and say this is one relation with we have all the annotations and as next we can run here in the order um app the field runner so that we get the generated files so the build runner is finished and if we have a look we can see here that we have now two new files the object box g the g file um is created as a dart file which we are going to use in our whole application and um single file which we will use is the object box and model is the schema for our server and we all we will use it in this project and also in any other projects which we want to use and to sync with this file and also we will add it in the schema in our server later now let's go back to our to-do's we have two screens we have a home screen where we have a button where is mentioned create an order and then we have an order screen let's go here to the home screen so starting from the top we need here to initialize a store and the order box is that to do number six stop coming to the in states here we have a couple of to-do's so we will have a store which can be now i will create and create the store then we have to initialize in order box which is from type box from order model and then we will have an other box from item order and latest can also be now and this is our item box get rid of that next to do stop coming to the in its state here we have couple of to-do's we have to check for the correct ip address for the sync server and we have to open the store and connect the sync server let's start with to do number eight we will open door and here the value that we are getting is now let's convert that arrow to the block body and set our store to door here then we have to connect the sync server we will start the sync server later i will show you how we can do it but for now we wanted to start the sync server we want to write this thing and then the client and we have here some parameters the store is the store that we set it right now and then we have a server jury and here what i need i will need just a local variable and what i need here is because we have a different server ip for android and ios i will here go and check my platform and is android let's import that and if this is ios we will have one two seven zero zero one you can actually find both of them also in the documentation of the object box so we check for the correct ip address um according to the platform and then open a store and connect the sync server with that sync client and last but not least we will open a box an order box or order box that we created from a store so i will call this door and here we will have a box and this is going to be from type order the next to do is close the store oops don't forget to close your store in the dispose method already said it can be no and here we have the elevated button which has create your order and what you want to do is as soon as we create this button we want to have a new order model so i need here order model and then i want to navigate to the next string okay here what is that is preferred to be a const and in order to do we have to pass the order box and the order model actually so because i didn't initialize these parameters i don't get any error in my home screen but i can do it right now and after that come back here and here in the border screen i need two parameters and now i can go back to my home screen and say we have order model which we create here and then we have an order box which is our box or is the order box this one and i think i'll call it somehow different this order box okay and we'll have it here and pass it now i can get rid of the last to do here in this screen and head to the orders so in the order screen we have a list of dishes which are from item model this to do so perfect what we are doing here in this screen is we have a list of different dishes and each dish has two buttons a button which we can increase with that the quantity of our item and after that save our order model and another item which is a minus i item and we will check if the item count is zero if this is case we don't decrease the item quantity anymore and we will return but if this is not the case and we have two three whatever we will reduce the item number and after that go for the save order model and um in the save order model we have our next to those now go back to our save order model method which we call under um plus and minus button the first to do is add the item into the order model so i will call the widget and here we have the order model which can be null and what we are doing is we'll call the items and here we'll add the items with the index that we have and add this item to our order model the second thing is we should save this one to our order box so i will go and call my order box and put here the order model so we'll go to the up pass the widget and order model here which we have it actually last but not least we will call the set state here and with that we save the order in our model now get rid of these three to-do's and go for the last to those here we need we have the elevated button which is our confirm button so i will show you we will create here our order and this is my confirm button here we have to set ordered to true an order model this is the first to do which we have to implement so we will call from the widget our order model and here we go and set the ordered row and last but not least we should save the order model into our order box so here i will call again my order box here and put my order model in it and last but not least we navigate we call the navigator.pop to come back to our home screen and get rid of this both to those but before i am going to set up the server i would like also to go through our chef app for the chef app i didn't create any to-do's because it's very very similar actually to our order app it's not happening any fancy stuff there there are just a couple of things which we have to keep in mind we have here in our chef app also the same item model and order model so they are exactly the same as in our order application and when we are create or we run the build runner we will get also here the g file and also the object box model json form but don't forget if you create i don't know somehow a different object box and model you have go to the initial app which is for me the order app and go here and go to the objects box model json file copy this one and you will paste this one so that you use everywhere in your application in your different application the same object box model json and this is also the file which we are using later on in our server so we have here a main.dart which is this one and here we call the customer order screen and if you have a look here in the code what we are doing is pretty similar we have here also a store we have an order box one additional thing what we which we have here is a stream here we consume the stream to get um changes which we have in our database and our stream is actually nothing rather than a store watch and with your watch we create a stream to get the data changes on our entity which is the order model and now to consume our stream i used here stream builder and which get here which i pass here stream and here i have snapshot i use the snapshot to check if this snapshot has any order if this is the case i will show the text widget with error and in other case if we our snapshot has some data i will check it i create here a list of order model where i get all the orders i reverse my orders so i that i can show the chef in the kitchen the newest order at the top of my app or screen and here what we are doing is if the order is not empty we will go just for a list view separated and create a row with two tags and show the item name and the item count in our application and um yeah that's that's it actually pretty much and um if i don't have any data i show here the circular progress indicator which is at the moment the case now we are coming pretty much to the last steps of our um tutorial the last step is to create or to set up a sync server until now we are we set up to sync client which is the order app and the chef app and now we need a server for that object box provides different options and here in the documentation you can go through it and read it it's very pretty very well written as i mentioned before and we have different options i decided for the doca distribution but you can also go to the advanced sink and use an embedded sync server which means you can have your phone your tablet or some other devices in terms of thing or something like that as a server important thing is for setting up your server or for in our example you need a sync server for that i went to the docker.com and here install the docker for my macbook so here i'm going to the official documentation and here's everything is explained what i need is the sync server.tar file i have it and i put it here in a file object sync server now i will go to my terminal for sure i have off at first run the docker what i do is here locker load input and here is the path to my tar file i run this command and after that we can see that the loaded image is object box io now let's go here to our dockerfile and we can see here the new image and we don't have it still in the container the next thing what we have to do is we have to run our image for that we should go to the next step and run this command so let's go to our project what i did is we have have a chef app we have an order app and in order app we have the object box json file we need this file when we want to start our server i copied this file and we have here an other file which you can also find in the repository and here i will just paste my file here in the data so that is overwritten and i'm sure that all three files are the same what we are writing is here actually um we will run the docker and run the server on it one thing which is important is the path of this object box model json file so this is now in my data object box which we have it here and um i don't use any authentication so i secure i used here just unsecured or no authentication if you want to have an other authentication just go to the documentation of the object box and see for the different options that you have with that we run the server and here if i have a look here i can see here that i can call the um dashboard the object box dashboard here we don't have still any order model or any item model therefore my chef app doesn't show any um data now as soon as i confirm that we can see that our order is getting green and our chef in the kitchen can start to cook our order and here we go with the second order in third order and further and so forth and so on amazing guys that is our application which we implemented and used the object box and the sync functionality of object box to have just in time data all right everyone today we learn together what object books is and why you should consider to use the object box and the sync functionality in your next project for that we had a look in the flat counter app and saw how the song and the object box is implemented in it and how does it work and after that we implemented together two restaurant applications one of them for order some dishes and the second one to sync it with the kitchen and that the chef of the kitchen can see your order and prepare your meal so hopefully you can implement it as next in your own application great everyone i hope you enjoyed this video and thanks once more to our sponsored object bots for making this video possible and now if you haven't yet please like this video and subscribe to our channel have an amazing time and see you soon in the flutter counter app we had a look and sell how the object box works and how the sync functionality is working this can be for example your phone your tablet or any infra infrastructure [Music] such as hive esco flight or other databases and also it's and if you haven't yet please subscribe to our channel and hit the like button have a great day and see you soon [Music]

Channel: Flutter Explained

Views: 18,083

Keywords: flutter, tutorial, object, box, objectbox, flutter tutorial, dart, dart tutorial, dart objectbox, sync, sync server, docker, coding, learning, mahtab, flutter explained, server, flutter objectbox, flutter sync, firebase, alternative, firebase alternative, hive, nosql, moor, sqflite, sharedpreferences

Id: r9Lc2r22KBk

Length: 29min 54sec (1794 seconds)

Published: Thu Oct 07 2021