CODEWITHSUNDEEP
cordovajquery-mobile
Kenci
Kenci

Reputation: 4882

What is the best way to store static data in a mobile app?

I want to build a mobile app using jQuery Mobile.

The App should have a list of drink recipes (1500 pieces) with images attached.

What would be the best way to store the recipes and images?

I am thinking that the recipies should be structured and stored in one big XML file, and the images should be in a folder.

It is the plan to publish the app as native using PhoneGap.

The app should be able to work offline.

Any suggestions to my question?

Upvotes: 1

Views: 1336

Answers (2)

Erez Rabih
Erez Rabih

Reputation: 15788

I'm using BackboneJS for this purpose. I'm recommending Backbone here because using it from the beginning will make it a lot easier for you to move onto a native mobile app.

Using Backbone, you can define a model:

window.RecipeModel = Backbone.Model.extend({});

Then define a recipes collection:

window.RecipeCollection = Backbone.Collection.extend({ model: RecipeModel });

And last, you can send a JSON representation of your recipes and initialize the RecipeCollection with it:

var recipesJSON = // Get JSON from server OR local HTML tag (explained below)
window.recipeCollection = new RecipeCollection(recipesJSON);

EDIT:

You could also store the JSON inside the HTML instead of getting it from the server using the following tag in your HTML:

<script id="recipes_data" type="application/json">{[ {name: "recipe1", type: "some_recipe_type", image_url: "recipe1_image.png"}, {name: "recipe2", type: "some_other_recipe_type", image_url: "recipe2_image.png"}...]}</script>

Then you can read it with:

var data = JSON.parse($("#recipes_data").html());

As for the images location: you can put them in a separate folder and refer to them relatively from your css files. Once you move onto phonegap those relative paths will be converted to local files so your application may work offline.

Upvotes: 1

Piotr Krysiak
Piotr Krysiak

Reputation: 2815

If this is possible try to set up a webservice and using eg. JSONP technique try to download the data. Storing in folder does not let you update your content, which may be useful for adding new recipe or changing existing one. Images may be stored in folder and accessed by javascript on ajax success.

It would be a good idea to store already downloaded recipes in SQLite database.

Upvotes: 1

Related Questions