Press "Enter" to skip to content

How to save your database to Dropbox (and how to restore it) from within a Cordova application – Android only (part 1)

codingfix 0

Some time ago, I was developing a hybrid mobile application for Android using Cordova. In that application, I needed to save the whole local database built with WebSql to Dropbox.

So I started to learn how to use Dropbox API, how to integrate it with Cordova, which plugins I had to install and I have also found a couple of tricks to get everything to work. So I now want to share what I did to get the job done.

Important: Though this tutorial is focused on developing an app for Android, almost everything should work even for Ios. If you find any problems, please refer to official Cordova documentation.

The whole tutorial is divided into three chapters:

  1. in this first one, we’ll build a skeleton application using Cordova; we’ll create a database with some data and we’ll load data into the application.
  2. in the second part we’ll see how actually export our database and how to restore it; to do this we’ll use a Cordova plugin to do all the dirty job for us
  3. in the third and final chapter we’ll see how to connect our Cordova application with Dropbox and save there our backup file (and how to download it to restore our local database)

 

I assume you are already familiar with Cordova so I won’t explain any superflous detail about Cordova application structure, how you have to cennect your phone or how you can build and run a Cordova project. If you don’t know Cordova or you are not sure about something, please refer to official documentation.

Required software

  1. The Dropbox JavaScript SDK to manage the authentication process and the connection with a Dropbox account;
  2. The cordova-plugin-inappbrowser
  3. The cordova-plugin-file
  4. The cordova-sqlite-porter

We’ll install them when we’ll need having them up and running. First of all, we have to create a small testing app.

Starting a new Cordova application

So let’s start creating a small Cordova app to test our Dropbox connection. Open you command line interface (it will be the command prompt in Windows and the terminal window in Linux), navigate to the directory where you keep your Cordova apps and type:

And then we enter new project directory and add Android platform:

Preparing the application main (and only) page

The poorest CSS ever

Now you can start to edit your application. First of all, open the file index.html in www folder and drop the div with class “app” and all its content: we don’t need it. Also replace the whole content of the index.css file with the following lines (our little app will be very poor form the GUI perspective, but feel free to play to improve it :)):

The markup

Now, open index.html file and replace the div “app” with the following markup:

The unordered list will… list our fake users and the select will list all the countries we have in our database.

tm_en_970x90

Okay, for the markup that’s all. Hey, I had said it was a very poor user interface!

Oh, I’m forgetting… we have to add jQuery! Download the latest version of jQuery and put jquery-x.x.x.min.js in your js folder and add a reference to it in your index.html file just before the reference to our index.js.

Starting with index.js

The only thing we have to do for the moment is to remove the following lines of code which belong to the default Cordova app:

Okay, you can use your CLI to navigate to your project directory /dropboxTest/ and run the app just to check everything is in place:

You should see the image below:

Basic app

Creating the database

Now, it’s  time to create our database with a couple of tables and some data, just to have something to play with when we’ll have to export our database to Dropbox (and import it back to our app). First we need to create the database and get a reference to the database object. Put this line immediately after app.initialize();

Now we’re going to create a users table with 4 users and a countries table which holds all countries in the world. We’ll wrap the needed code in 2 functions, createUsersTable() and createUsersTable() in order we can call them when we’ll need. So, put following code in your js/index.js after having created the database:

Dropping tables

We also need something to drop our tables, so we’ll can test import database function. Let’s do it:

Load data in our markup

Fine. Now we have to write the functions to load our data and fill our page with them. Go back to js/index.js file and go on adding following functions:

So, we have 2 functions which load data from the database and use them to fill out our controls in the application main (and unique) page. These functions are called in the success callback of the functions which create the tables.

Now we add the event handlers for our buttons: for the moment only two buttons will do something interesting. Of course, we put the event handlers withing tha main jQuery function; here we call our two functions to populate our controls with the data if the database has been already created.

As a final touch, we add a few lines of javascript to make our users’ list work as an accordion (I have used here a slightly different version of the code I illustrated in my article The simplest jQuery accordion ever!):

Summarizing

Just to be sure everything is clear, I show you how each application file looks as far (I have just removed superflous comments).

index.html

index.css

index.js

Now, if you run our app and tap on Create tables button, you should see something like this:

Starting app
Starting the app thge first time: the database is empty

 

App with data
After tpping “Create tables” button, data are shown.

 

After having clicked on Empty database button, the app will look like the first screenshot again.

Well, now that we have our skeleton application we can go with the next part: activate a connection with the user’s Dropbox account. Let’s go to part 2 of this tutorial!

 


 

    Leave a Reply

    Your email address will not be published. Required fields are marked *