Integrate SQLite plugin in PhoneGap iOS application

Introduction:
For offline storage in PhoneGap application, we can use local storage or storage API. But there are some limitations of this storage mechanism. So here we will discuss on creating local database with larger storage limits with the help of SQLite plugin.

Description:
To overcome the limitations, we can use the SQLite plugin which is very easy to integrate. Here are the steps below which will guide to integrate the SQLite plugin in PhoneGap iOS application.

1. Download the SQLite plugin from github by using this url.

https://github.com/lite4cordova/Cordova-SQLitePlugin

2. The plugins are inside Cordova-SQLitePlugin / src / ios /. Let’s drag the SQLitePlugin.h and SQLitePlugin.m files into the Plugins directory in Xcode and choose the “Create folder references for any added folders” option while adding reference.

CreateFolderReference

3. Add the plugin reference in config.xml like below

	<plugin name="SQLitePlugin" value="SQLitePlugin"/>

4. In the Project “Build Phases” tab, choose the “Link Binary with Libraries” dropdown box and add the libsqlite3.dylib and libsqlite3.0.dylib into the application.

LinkBinaryLibraries

5. Let’s get the SQLitePlugin.js file from www directory and put it inside the www folder of the application.

6. Add the reference of the Cordova/Phonegap.js and SQLitePlugin.js in our html file.

7. Now create/open the database using SQLite plugin as follows:

function createDatabase() {
        try{
            if(!!window.openDatabase){
                var createDB = window.sqlitePlugin.openDatabase({name : "SqliteDB"});
            }else{
                navigator.notification.alert("Local database is not supported by your device.");
            }
        }
        catch(error){
             console.log("ERROR:" + error.message);
        } 

Here we can mark, we are just adding ‘.sqlitePlugin’ namespace in window.openDatabase that we normally use to create database using HTML5. So window.sqlitePlugin.openDatabase method will help to create the database using SQLite plugin.

8.Add the event listener to execute the function when device gets ready.

document.addEventListener("deviceready", createDatabase, false);

Now the SqliteDB.db will be created inside the Documents folder in ~/Library/Application Support/iPhone Simulator/[OS version]/Applications/[appGUID]/ directory. We can also enable the background processing while opening the database like

var createDB = window.sqlitePlugin.openDatabase({name: "SqliteDB", bgType: 1});

Here the bgType is the optional parameter, which will be enabled/disabled for the background processing.

In iOS, the background process is automatically enabled. So to disable it we can use the below code.

var createDB = window.sqlitePlugin.openDatabase({name: "SqliteDB", bgType: 0});

Summary:
Here we get to know, how to integrate the SQLite plugin to create a larger size SQLite database for our PhoneGap application.

Written By: Sourabha Kumar Sahoo, Software Developer, Mindfire Solutions

Advertisements

7 thoughts on “Integrate SQLite plugin in PhoneGap iOS application

  1. Pingback: Integrate SQLite plugin in PhoneGap iOS application | souravsahoo

  2. Pingback: Copy existing sqlite database into PhoneGap iOS application | MindfireMobile

  3. Hi, thank you soo much for this tutorial, exactly what i need. Can you please make a video showing the steps, I’m trying to follow but still dont get it. THank you in advace!!!!

  4. Pingback: CRUD operation in PhoneGap application using SQLite Database | MindfireMobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s