web-dev-qa-db-fra.com

Base de données SQLite sur PhoneGap

Je souhaite implémenter la base de données SQLite pour iPhone à l'aide de PhoneGap. Je connais quelques bases de base de données SQLite dans l'application native iPhone. Mais comment puis-je implémenter la base de données SQLite dans PhoneGap?

iphonesqlitecordova
23
donkarai

Il est important de se rappeler que PhoneGap est des applications Web emballées dans un composant de navigateur. Tout ce qui s'applique au WebKit mobile s'appliquera également à PhoneGap, et l'environnement dans PhoneGap est également très similaire à l'ouverture d'un fichier HTML dans un navigateur de bureau.

Vous voulez ce qu'on appelle une "base de données Web SQL".

http://www.w3.org/TR/webdatabase/

Edit: Cette spécification a été marquée comme déconseillée depuis la rédaction de ce répondre et c'est maintenant une Bad Idea ™ officiellement de dépendre d'elle.

En réalité, il est basé sur SQLite dans la plupart des navigateurs qui le prennent en charge, mais ce ne sera pas exactement le implémentation SQLite. Mais c'est proche. Dans Chrome ou Safari, vous pouvez aller voir son contenu avec vos outils de développement, regardez l'onglet 'Ressources' -> Bases de données (vous voulez tester les fonctionnalités de base sur un navigateur de bureau) avant d'essayer dans PhoneGap).

Cela fonctionnera exactement de la même manière dans PhoneGap que dans les navigateurs de bureau.

Les bases de données Web SQL sont l'une des implémentations de ce qui est plus généralement appelé "stockage local". Je pense que le meilleur texte d'introduction sur ce sujet se trouve dans "Plongez dans HTML5" de Mark Pilgrim:

http://diveintohtml5.info/storage.html

Toujours aussi valable pour PhoneGap que pour les navigateurs de bureau.

21
Jacob Oscarson

Nous avons fini par utiliser le plugin PhoneGap SQLite , voici pourquoi:

Nous avons commencé à utiliser une ancienne base de données Web SQL dans notre application PhoneGap, mais nous avons rencontré les limitations suivantes:

  • La taille de la base de données est limitée à 5 Mo (l'utilisateur peut être invité à autoriser davantage, mais nous ne voulions pas de telles invites dans notre application)
  • Le pré-remplissage de la base de données via javascript augmente le temps de chargement initial de l'application

Nous avons initialement résolu ce problème en copiant une base de données sqlite3 pré-remplie dans un répertoire spécial où elle serait récupérée par WebKit (par exemple, comme décrit ici )

Cependant, lors de notre dernière tentative de soumission de l'application, on nous a dit que l'application avait violé iOS Data Storage Guidelines , probablement parce qu'elle copiait le fichier de base de données vers un emplacement non standard.

Nous avons donc utilisé à la place le plugin PhoneGap SQLite : Cela nous a permis d'inclure une grande base de données sqlite3 pré-remplie dans notre application et d'y accéder à partir de javascript via le plugin. Malheureusement, le plugin ne fournit pas exactement la même interface javascript que le navigateur, mais il est assez proche.

29
James

Je l'ai utilisé pour implémenter une base de données dans phonegap en utilisant sqlite:

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

function onDeviceReady()
{
    initDB();
    createTables();
}

errorHandler = function (transaction, error) { 
    // returns true to rollback the transaction
    return true;  
} 

// null db data handler
nullDataHandler = function (transaction, results) { } 

function initDB() 
{

    try { 
        if (!window.openDatabase) { 
            alert('not supported'); 
        } else { 
            var shortName = 'WineDatabase'; 
            var version = '1.0'; 
            var displayName = 'PhoneGap Test Database'; 
            var maxSize = 655367; // in bytes 
            mydb = openDatabase(shortName, version, displayName, maxSize); 
        }
    } catch(e) { 
        // Error handling code goes here. 
        if (e == INVALID_STATE_ERR) { 
            // Version number mismatch. 
            alert("Invalid database version."); 
        } else { 
            alert("Unknown error "+e+"."); 
        } 
        return; 
    } 
}



// create tables for the database ************

function createTables() 
{

    try {
        //alert("Create table");
        mydb.transaction(
                         function(transaction) 
                         {
                         var sqlC='CREATE TABLE IF NOT EXISTS Wine_Table(id INTEGER NOT NULL PRIMARY KEY, key TEXT, color TEXT,date TEXT,heading TEXT,img_Path TEXT,name TEXT,price TEXT,whr TEXT,notes TEXT);';
                         transaction.executeSql(sqlC, [], nullDataHandler, errorHandler); 
                         });

    } catch(e) {
        /// alert(e.message);
        return;
    }
}



//insert into database

function insertIntoDataBase()
{
    //Select Row for checking of duplicate Key.....*********

    try 
    {
        mydb.transaction(
                         function(transaction) {
                         transaction.executeSql('SELECT *FROM Wine_Table',[], InsertValues, errorHandler);
                         });

    }
    catch(e) 
    {
        alert(e.message);
    }

    //...Selection ended..*****************
}


InsertValues=function(transaction, results)
{
    var name=document.getElementById('name').value;
    var imagesrc=$('#changeImageBtn').attr('src');
    var where=document.getElementById('where').value;
    var price=document.getElementById('price').value;
    var datepickervalue=document.getElementById('date1').value;
    var color;



    //Checking Area.....

    var len = results.rows.length;
    var getKey;
    if(len!=0)
    {
            for (var i=0; i<results.rows.length; i++) 
            { 
                getKey=results.rows.item(i).key;
                if(getKey==name)
                {
                    matchkey=1;
                    updateKey=results.rows.item(i).id;
//                  alert("update key= "+updateKey);
//                  alert("get key "+getKey);
                }
            }
    }

//... Checking area closed...

//for insert in to database....
    var sqlI = "INSERT INTO Wine_Table(key,color,date,heading,img_Path,name,price,whr,notes) VALUES('"
    + name
    + "','"
    + color
    + "','"
    + datepickervalue
    + "','"
    + name
    + "','"
    + imagesrc
    + "','"
    + name + "','" + price + "','" + where +"','"+notes+"')";


//for updating data base....

    var sqlU='UPDATE Wine_Table SET key="'+name+'",color="'+color+'",date="'+datepickervalue+'",heading="'+name+'",img_Path="'+imagesrc+'",name="'+name+'",price="'+price+'",whr="'+where+'",notes="'+notes+'" WHERE id="'+updateKey+'"';


    if(isEdit==0 && matchkey==0)
    {
//insering........************
        try 
        {
            mydb.transaction(
                             function(transaction) {
                             transaction.executeSql(sqlI, [], nullDataHandler, errorHandler); 
                             });
        } catch(e) 
        {
            /// alert(e.message);
            return;
        }
        alert("inserted successfully");
    }
    else
    {
//updating ........***********
        try 
        {
            mydb.transaction(
                             function(transaction) {
                             transaction.executeSql(sqlU, [], nullDataHandler, errorHandler); 
                             });
        } catch(e) 
        {
            /// alert(e.message);
            return;
        }

        alert("Update successfully");
        matchkey=0;
    }
}



celebsDataHandler=function(transaction, results) 
{
    // Handle the results 
    var name;
    var imageFD;
    var where; 
    var priceFD;
    var dateFD;
    var color;
    var notes; 
    var headingFD;
    var ID;


    var UL;
    var List;
    var link;
    var image;
    var heading;
    var date;
    var price;

    var len = results.rows.length;
    if(len!=0)
    {
    for (var i=0; i<results.rows.length; i++) 
    { 

        resultArr[i]=results.rows.item(i);
        ID=results.rows.item(i).id;
        name=results.rows.item(i).key;
        imageFD=results.rows.item(i).img_Path;
        where=results.rows.item(i).whr; 
        priceFD=results.rows.item(i).price;
        datepicker=results.rows.item(i).date;
        color=results.rows.item(i).color;
        notes=results.rows.item(i).notes;
        headingFD=results.rows.item(i).heading;
        dateFD=results.rows.item(i).date;

        UL=document.getElementById("wineList");
        List=document.createElement('li');
        //List.setAttribute('data-icon','alert');
        List.setAttribute('class','listShow');
        if(deleterow==1)
        {
            List.setAttribute('data-icon','minus');
        }

        link=document.createElement('a');

        if(deleterow==0)
        link.setAttribute('href','#NewWine');

        link.setAttribute('class','anchor');

        image=document.createElement('img');
        image.setAttribute('src',imageFD);
        image.setAttribute('class','ui-li-thumb');

        heading=document.createElement('h3');
        heading.innerHTML=headingFD;

        date=document.createElement('p');
        date.innerHTML=dateFD;

        price=document.createElement('p');
        price.innerHTML=priceFD;


        link.appendChild(image);
        link.appendChild(heading);
        heading.appendChild(date);
        link.appendChild(price);
        List.appendChild(link);

        UL.appendChild(List);
        addClickEvent(List,name,ID);

    } 
        $('ul').listview('refresh');
    }
}

J'espère que cela vous aidera beaucoup. Il contient créer, mettre à jour, insérer, gérer les résultats après la transaction etc ...!

5
Warewolf

Tout ce qui s'applique à WebKit mobile s'appliquera également à PhoneGap, et l'environnement dans PhoneGap est également très similaire à l'ouverture d'un fichier HTML dans un navigateur de bureau.

Pas strictement vrai; par exemple avec l'iPhone, UIWebView ne peut pas créer une base de données websql relativement grande, qui peut être créée par programmation en Javascript dans Safari mobile/de bureau, sans appeler une méthode déléguée considérée comme une API privée par Apple (et ne sera donc pas accepté dans l'App Store). C'est en fait un vrai problème.

2
Nostradamus

Il y a un article à ce sujet sur le wiki de phonegap ici: http://wiki.phonegap.com/w/page/16494756/Adding-SQL-Database-support-to-your-iPhone-App

2
rjmunro