Adding Offline support in your apps with CloudBoost
CloudBoost.io is a server-less platform which helps developers build apps in half less time by taking care of all the mundane tasks like Authentication, Notifications, Emails, Managing and Scaling your Database, Files, Cache, and a whole lot more. CloudBoost is completely open source under Apache 2 License, so you can modify it the way you like and install it on your own servers for free. You can check out our GitHub here : https://github.com/cloudboost/cloudboost
This blog is a tutorial which walks you from creating an app from scratch and adding offline support to it. If you’re looking for an offline sync guide or documentation instead - check it out here.
In this tutorial I am going to build a sample app (let’s call it Student Record Keeping app) using CloudBoost and add offline support to make sure it works seamlessly in low or no connectivity environments.
Create App
If you haven’t signed up for CloudBoost yet, this is the right time for you to create your new account and get started. CloudBoost gives you a ton of free tier (check Pricing) so you can build your apps and launch it for free. Once you have signed up, you will then be able to create a new app by entering App Name. You can also check out QuickStart which gives you a quick introduction about creating an app and integrating with CloudBoost SDK.
Create a new Table
To create a new table click on Manage App. Now you'll be redirected to tables screen. Click on Add new table.
Add columns
To create a new columns click on + button and then enter your column name with the data type. Also select unique if the data in the column is supposed to be unique for every object that is saved, and select required if you don’t want null values to be saved in that column.
Initialize your app.
Before you initialize your app, you need to import the CloudBoost SDK in your project.
If you’re working with JavaScript in your browser. You can :
If you’re working with React, Node, or Angular apps. You need to install CloudBoost SDK from NPM.
$ npm install cloudboost --saveand then you can import this SDK in your app.
Once you have imported CloudBoost SDK to your project. You need to initialize your new CloudApp.
To initialize your new CloudApp, You need to go back to your CloudBoost App Page, and then click on App Keys
Refer Quickstart to learn more about Master key and Client key.
Saving Data
Create a new CloudObject instance, set data and call the save function.
Querying the data.
To query your data, you can use the find function of the CloudQuery class.
Adding Offline Support
Pin objects to the local store so that you can query when your app is offline.
To save an object in low connectivity environments, you use the saveEventually function of the CloudObject class instead of save.
This will add your object to the save queue locally and will wait until your app is connected to the server. As soon as your app connects to the internet, your object will be saved automatically.
Query local store
It will return the list of all the CloudObjects in local store which matched the query.
Sync
When your app is connected to the internet. Your data will be synced automatically. If you want to do a manual sync, you can do so by calling a sync function on CloudObject
… and that’s it!
You’ve built a sample JavaScript app with offline support in just under 15 minutes! If you need help / or face any issues. Feel free to comment below and let us know.
Complete documentation of offline sync functions can be found here.
