Storage and retrieval of data (Text's and images) in Phonegap

[Abhinav Jaiswal]

Hi All,

I've been struggling a lot with this for a week and really hope one of you guys can help me with this? Please help me on this, as any of my friends are not working on phonegap.

I'm new to the phonegap and keenly interested to learn. I have designed a app and now I need to add a functionality to it.

Basically my scenario is, I have a list of items(approx. 500) say name,address,city and profile pic as 1 item and similarly 500 itmes are there.

when I open the app on the subscription page I want to populate this list of 500 items in a dropdown or something convinent.

I can see all this 500 items and subscribe to 4-5 items along with Name, address, city and profile pic.

After the subscription, whenever I open my home screen all these 4-5 items should be populated as a List.

Googling has left me quite confused. I want to make sure that I am using the best method for storing data for my users. After a lot of reading articles I founf I can use these :

1. local Storage 

2. SQLite

Also I'm using Framework 7 for developing the UI.

Thanks in advance,

Abhinav

[Steve Husting]

Is the complete list already on your app, or on a server? Will it get updated daily?
Does the user add to the list?
What does it mean to "subscribe" to an item? What do you expect to happen as a result of a subscription?
Are you going to use Cordova, PhoneGap Build, or ?
What platform(s) is this code to work on? Android, iOS, ?
What computer OS are you working with? MacOS, PC, ?

[johnwargo]

This isn't really a PhoneGap question - how would you do this in a web app? Take that solution and run with it, and whatever you come up with will run just fine in a Cordova or PhoneGap app. 

You can populate the list using an HTML select (although 500 items is pretty large for that) then use LocalStorage to store the items you want to keep. Keeping them in sync is merely a function of app logic you'd implement in JavaScript in your app. 

[Abhinav Jaiswal]

Hi Steve,

First of all my apologies for replying late. I was travelling so not able to see the post.

I'm designing an hybrid application which will be publicly accessible without any authentication / authorization.

Workflow : (Below are the Screens needed)
1. Open the app.

2. Splash Screen

3. Home Screen

4.Subscription screen 

Now, I need to have a pre-populated DB with a list of Product details and Product Images. The user will go to the Subcription screen and subscribe to few products. Those products will be displayed on the home screen. The layout will be similar to the below example.

Ex:     (Product Logo)  Name + Details

This is the scenario. For further explanations I'm attaching an architecture diagram of it. Please refer that for a better visibility.

Please refer the answers below for the raised queries :

* Target devices will be android and iOS currently. 

* I'm using a Windows7 machine.

* I'm using Apache Cordova

Please help me on this. I'll be continuously following this post from now onwards.

[Abhinav Jaiswal]

On Tuesday, June 14, 2016 at 8:47:10 PM UTC+5:30, Steve Husting wrote:

[Steve Husting]

What have you done so far? We are not going to code this for you.

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to a topic in the Google Groups "phonegap" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phonegap/sQAaiXcMmz8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Abhinav Jaiswal]

No, I didn't mean that. I'm just asking the effective way or any guidelines to do it. If I knew I could have done it by now.

I have done the designing of the of app. Created all the Screens. Integrated SQLite. Only I'm asking is how can I keep my data(Text and Image) together.

1.Whether in DB 

2. Rest API

Or is there any other way I can address my problems ?

[Kerri Shotts]

If the images are static, store the images in the app's bundle and reference them from your database. If you name them such that they intrinsically match each record's ID (and the IDs will never change), things are even easier (e.g., image0001 matches record with ID of 0001).

If the images are dynamic, pull the link to the image from your API.

Side note: This isn't really a PhoneGap question. It's an data architecture question. So I don't know how much help you'll actually get on this forum, which is meant more for PhoneGap-specific issues.

On Tuesday, June 28, 2016 at 12:08:52 AM UTC-5, Abhinav Jaiswal wrote:

...

[Abhinav Jaiswal]

Thanks a lot Kerri,

I'm sorry I posted irrelevant question here. I was looking for the solution very badly. So I was trying each and everything possible to get the solution. Actually android developer telling their way of doing things, iOS developer suggesting something else. So I got confused and started looking everywhere. 

I tried the suggested way and it worked. Its all static images and I'm storing them in my app bundle and referring them from the DB with the unique name. This worked out.

Thanks once again for the help. :)

[Kerri Shotts]

No harm done. Glad you got it working. :-)

[Abhinav Jaiswal]

Thanks Kerri,

I have one more specific doubt related to PhoneGap. I'm using SQLite plugin for storing and retrieving data.

Currently what I have understand through its documentation on git hub or their site is after installing the application when you open the app for the first time then only databases and table is getting created and we can execute all our SQL statements trough transaction statements.

However, I have a pre-populated DB which I have created through SQLite Browser. This will contain a list of records which I need to fetch in a drop down in my app. Now, where I can include this pre-populated DB in the app bundle. So that this DB is only getting used. Basically I don't need to create a DB and the insert data while running the application, I have to use my existing pre-populated DB with the data.

My target devices are both iOS and Android.

Please help me on this.

Thanks in advance

[Chris Brody]

Pre-populated databases are supported by cordova-sqlite-ext github: https://github.com/litehelpers/cordova-sqlite-ext

Disclaimer: I am the owner.

[Abhinav Jaiswal]

Thanks Chris,

I have used this plugin and followed the steps given in the documentation. However, I'm not able to point to my pre-populated DB in bundle. 

What I did is -

1. I created a new project and installed the "https://github.com/litehelpers/cordova-sqlite-ext" plugin.

2. I created my pre-populated db with SQLite Browser and placed it under the www folder.

3. Through my javascript  I wrote the below code to access the DB.

  

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

        

        var db = null;

        function onDeviceReady(){

          db = window.sqlitePlugin.openDatabase({name: "Master.db", location: 'default', createFromLocation: 1});

          db.transaction(populateDB, errorDB, successDB);

          alert("DB is created");

        }

        function populateDB(tx){

          alert("prepopulated is created");

        }

        function errorDB(err){

          navigator.notification.alert("Error : "+err, null, 'Error', 'OK');

        }

        function successDB(){

          navigator.notification.alert('Database created Successfully',null, 'Information', 'OK');

        }

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

        function GetRecords(){

          alert("GetRecords Executed");

          db = window.sqlitePlugin.openDatabase({name:'Master.db',location:'default',createFromLocation: 1});

          db.transaction(viewData, errorMsg, viewSuccess);

          alert("GetRecords Executed later");

        }

        function errorMsg(err){

          alert("Error msg is coming from GetRecords function !");

          navigator.notification.alert('Error :'+err,null, 'Information', 'OK');

        }

        function viewSuccess(success){

          navigator.notification.alert('Retrieve Successfull',null, 'Information', 'OK');

        }

        function viewData(tx){

          alert("View Data Executed");

          tx.executeSql("SELECT * FROM SchoolDetails",[], resultSuccess, resultError );

          alert("View Data Executed later");

        }

        function resultSuccess(tx, response){

          alert("Response:"+ response);

          var listdiv = document.getElementById("responseDiv");

          // var temp = "<div class=\"list-block media-list\"><ul>";

          var temp = "";

          alert(response.rows.length);

          for(i=0; i<response.rows.length; i++){

            temp += "<li><div class=\"item-link item-content\"><div class=\"item-media\"><img src=\"img/"+ response.rows.item(i).ImgPath +"\" height=\"75\"></div><div class=\"item-inner\"><div onclick=\"LaunchInApp('" + response.rows.item(i).url +"')\"><div class=\"item-title-row\"><div class=\"item-title\">" + response.rows.item(i).name + "</div><div class=\"item-after\"></div></div><div class=\"item-subtitle\">" + response.rows.item(i).address + "</div><div class=\"item-text\">" + response.rows.item(i).city + "</div></div><div class=\"row theme-orange\"><div class=\"col-50\"></div><div class=\"col-50\"><a href=\"#\" class=\"button\">Unsubscribe</a></div></div></div></div></li>";

            listdiv.innerHTML = temp;

          }

          alert("Successfully Retrieved");

        }

        function resultError(err){

          navigator.notification.alert("Error : "+err,null, 'Error', 'OK');

        }

I don't Know why still I'm not able to interact with my pre-populated DB. 

Please correct me If I'm doing wrong.

Waiting for your response. :)

[Chris Brody]

A common problem is that the pre-populated database will not work if you have a database with the same name already present. During development and testing it is best to uninstall your app if you want to test the pre-populated database stage.

I took a quick look through your code. I find it strange that you open the database in two different places. Also if you add multiple eventready listeners I don't think you can depend on them being called in any particular order.

In general I suggest you start with a very simple program that opens the database with the createFromLocation option, retrieves the data, and shows you that it worked. A record count might be enough. Then you can continue with the development cycle.

[Abhinav Jaiswal]

Hi Chris,

I tried the way you said. I started a fresh project with uninstalled my app. Removed the multiple times open database line and only one deviceready event. But still its not working. I'm attaching the error which I have put in alert while executing the app.

Please see the attachment and give your valuable comments.

Also, I'm pasting the code here..

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

        //Retrieving data from the Database

        var db = null;

        function onDeviceReady(){

          // alert("GetRecords Executed");

          db = window.sqlitePlugin.openDatabase({name: "Master.db", location: 'default', createFromLocation: 1});

          db.transaction(viewData, errorMsg, viewSuccess);

          // alert("GetRecords Executed later");

        }

        function errorMsg(err){

          // alert("Error msg is coming from GetRecords function !");

          navigator.notification.alert('Error :'+err,null, 'Information', 'OK');

        }

        function viewSuccess(success){

          navigator.notification.alert('Retrieve Successfull',null, 'Information', 'OK');

        }

        function viewData(tx){

          // alert("View Data Executed");

          tx.executeSql("SELECT * FROM SchoolDetails",[], resultSuccess, resultError );

          // alert("View Data Executed later");

        }

        function resultSuccess(tx, response){

          // alert("Response:"+ response);

          var listdiv = document.getElementById("responseDiv");

          // var temp = "<div class=\"list-block media-list\"><ul>";

          var temp = "";

          // alert(response.rows.length);

          for(i=0; i<response.rows.length; i++){

            temp += "<li><div class=\"item-link item-content\"><div class=\"item-media\"><img src=\"img/"+ response.rows.item(i).ImgPath +"\" height=\"75\"></div><div class=\"item-inner\"><div onclick=\"LaunchInApp('" + response.rows.item(i).url +"')\"><div class=\"item-title-row\"><div class=\"item-title\">" + response.rows.item(i).name + "</div><div class=\"item-after\"></div></div><div class=\"item-subtitle\">" + response.rows.item(i).address + "</div><div class=\"item-text\">" + response.rows.item(i).city + "</div></div><div class=\"row theme-orange\"><div class=\"col-50\"></div><div class=\"col-50\"><a href=\"#\" class=\"button\">Unsubscribe</a></div></div></div></div></li>";

            listdiv.innerHTML = temp;

          }

          // alert("Successfully Retrieved");

        }

        function resultError(err){

          navigator.notification.alert("Error : "+err,null, 'Error', 'OK');

        }

Thanks,

Abhinav

[Chris Brody]

Hi Abhinav,

Please post a complete test project to demonstrate the problem on GitHub raise an issue on the cordova-sqlite-ext project. I can look at it within the next 1-2 weeks. Please be sure to include config.xml and the full www directory tree. Please do NOT include anything from the platforms directory tree in the test project repository.

Another tip: if you install every plugin with the --save flag it will save the references in config.xml. Then there is no need to include the plugins directory tree either.

Please do not include any extra plugins in the test project.

Thanks,

Chris

[Abhinav Jaiswal]

Thanks a lot for the help Chris. It worked for me and seriously its a very nice to have such plugins while developing the Hybrid application. So that you have the full control in JavaScript side instead of touching any native codes.

Thanks once again. Cheers :)