I am building an application that uses Phonegap. This is an application for learning Hiragana and Katakana (Japanese scripts).
So far it only displays a set of static data, but I want to have the user to be able to modify the data.
At the moment the static data is contained in JSON. There are 46 characters in total:
[
{
"id": 0,
"name": "a",
"hiragana": "あ",
"katakana": "ア",
"row": "a"
}
]
I want the user to be able to set a confidence level:
[
{
"id": 0,
"confidencelevel": 4
}
]
I am currently using localStorage to store some user preferences but this is just a key/value pair.
I am looking for some advice on:
Should I split the data: user data/static app data and use the id as the reference point between the two JSON files?
Data storage: how to store the data in a sensible format that I can easily retrieve?
Note that for a first implementation I would like the app to work offline.
Ideally the data is persistent and survives OS upgrades etc.
You could use WebSQL to create a database to store this information. The only downside is you are limited to 5mb. It should survive the user updating, but like localstorage may not survive if the user clears his/her cache. (At least this used to be a problem. I have not checked the newer versions of phonegap to see if it is still an issue.)
You might also consider making a plugin to use the SQLite database on your target platform. Move all of your db logic to the plugin, and manipulate and retrieve your data as an object.
EDITED: Actually I just found a plugin that already adds SQLite storage to a Cordova/Phonegap app.
Related
I am working on an assignment for a dummy phonebook app, which is an "extra points" part of a test for a local frontend job opening. I did some basic apps with angular before, but I always used it along with php and mysql. For this project the requirements state that I can't communicate with a server, so I need to store, edit, delete and search through data without a real database.
I don't even know what options are out there to achieve something like that, neither which one should I choose. I am looking for a simplest tool that could help me achieve those requirements, preferably one that has decent documentation that can help me get up and running as soon as possible.
You can use simple local filesystem and store objects as JSON using JSON.stringify() and parse them back using JSON.parse(jsonstring)
to write phonebook to your server's file
var phonebook = {
'name1' : 234283409,
'name2' : 234253453,
'name3' : 234234236
};
var jsonStr = JSON.stringify(phonebook);
/*
__________________
contents of jsonStr
{"name1":234283409,"name2":234253453,"name3":234234236}
__________________
write a logic here to save this JSON on a file in your server.
*/
to read phonebook to your server's file
//write a logic here to read JSON back from your server's file
var jsonStr = getJSONDataFromServer();
var phonebook = JSON.parse(jsonStr);
//now you can use your phonebook as a usual js object
You can use csv file to store your data.
To store data on the client you can use any local storage methods:
WebStorage: Web Storage API (provides both sessionStorage and localStorage)
gears: Google Gears-based persistent storage
whatwg db: HTML database storage standard
cookie: Cookie-based persistent storage RFC
The best choice depends on the kind of data you need to store, and the usage of that data. The most common choice is WebStorage.
If you use Angular, the great module ngStorage is available, that makes Web Storage working in the Angular Way.
Be warned that:
you'll be able to store only data per user, of course (i.e., you'll not be able to store any global status of the application).
any client storage solution poses strict space limits, which often differ from browser to browser.
If instead you simply don't want to use any local server solution, you could try some cloud platform, like, for example, firebase (just acquired by Google), or others.
you can use Google's Firebase. If firebase is complicated to you then use simple localstorage.
I'm playing with the Google realtime API, specifically the Quickstart example.
I have a string at the root named 'text' and I have it bound to the DOM element in the example.
No matter how much typing I do, I can't seem to figure out a way to get it to actually save to google Drive. The file is there, but when I do a realtime/get API call for the file, I just get this:
API Endpoint: GET https://www.googleapis.com/drive/v2/files/{fileId}/realtime
{
"appId": "XXXXXXXXXXXXXX",
"revision": 1,
"data": null
}
You need to perform the GET call with the same app credentials as you use to do the writing. The realtime document is scoped to a particular app.
Is it possible to use a local database file with html5 without using a server. I would like to create a small application that depends on information from a small database. I do not want to host a server just to pull information. Is it possible to create a database file and pull information from the local files ?
Depends on the following:
The type of application you want to build:
Normal website with some data being pulled from a local storage;
Special purpose hosted website / application with data generated by the user;
Special purpose local application with a dedicated platform (a particular browser) and with access to the browser's non-web API -- in order to access the browser's own persistent storage methods (file storage, SQLite etc.);
Special purpose local application with a dedicated environment -- in order to deploy the application with a local web server and database;
Available options:
Indexed DB
Web Storage
XML files used for storing data and XSLT stylesheets for translating the data into HTML;
Indexed DB and Web Storage ar available in some browsers but you need to make sure the targeted browsers have it. Their features aren't quite as complete and flexible as SQL RDBMSs but they may fit the bill if your application doesn't need all that flexibility.
XML files can contain the data you want to be shown to the user and they can be updated manually (not by the user) or dynamically (by a server script).
For dynamic updating the content of the XML is kept in JavaScript and manipulated / altered (using the XML DOM) and when the session is over the XML content is sent to the server to entirely replace the previous XML file. This works OK if the individual users have a file each and they never write to each other's files.
Reading local files:
Normal file access is prohibited (for security reasons) to all local (JavaScript) code, which means that "having" a file locally implies either downloading it from a known source (a server) or asking the user to offer access to a local file.
Asking the user to offer access to a local file which implies offering the user a "file input" -- like for uploads but without actually uploading the file.
After a file has been selected using FileAPI to read that file should be fairly simple.
This workflow would involve the user "giving" you the database on every page refresh -- but since it's a one page thing it would mean giving you the data on every session as long as your script does not refresh the page.
You can use localstorage but you can run a server from your own computer. You can use Wamp or Xampp. Which use Apache and mysql.
What i'm looking for is a little more robust than a cookie. I am making a web application for a friend that will be 1 page, and have a list of names on the page. The person wants to be able to add names to the list, however they do not want to use a web server. Just want the files locally on a computer so a folder called test-app , with index.html, and possibly a database file that can be stored in the web browser or a way to save information to the web browser for repeated use.
I'm currently using angularJS and phonegap to build a test application for Android / iOS.
The app use only text data stored in a Firebase database. I want the app to have its own local database (used when the device is offline) and sometime (when the device is online)
sync with a Firebase database.
The offline mode uses the storage API of phonegap/cordova. Could I just check the device's online state and backup the online database periodically ?
Any clues on how I can achieve this ? Last time a similar question was asked, the answer was "not yet"... (here)... because it focused on a hypothetical Firebase feature.
If Firebase is online at the start and loses its connection temporarily, then reconnects later, it will sync the local data then. So in many cases, once Firebase is online, you can simply keep pushing to Firebase during an outage.
For true offline usage, you will probably want to monitor the device's state, and also watch .info/connected to know when Firebase connects.
new Firebase('URL/.info/connected').on('value', function(ss) {
if( ss.val() === null ) /* firebase disconnected */
else /* firebase reconnected */
});
The way to achieve this with the current Firebase toolset, until it supports true offline storage, would
keep the local data simple and small
when the device comes online, convert the locally stored data to JSON
use set() to save the data into Firebase at the appropriate path
Additionally, if the app loads while the device is offline, for some reason, you can "prime" Firebase by calling set() to "initialize" the data. Then you can use Firebase as normal (just as if it were online) until it comes online at some point in the future (you would also want to store your local copy to handle the case where it never does).
Obviously, the simpler the better. Concurrent modifications, limits of local storage size, and many other factors will quickly accumulate to make any offline storage solution complex and time consuming.
After some time, I would like to add $0.03 to #Kato's answer:
Opt to call snapshot.exists() instead of calling snapshot.val() === null. As the documentation points out, exists() is slightly more efficient than comparing snapshot.val() to null.
And if you want to update data prefer to use the update() method rather then set(), as the last will overwrite your Firebase data. You can read more here.
I am building a website (probably in Wordpress) which takes data from a number of different sources for display on various pages.
The sources:
A Twitter feed
A Flickr feed
A database on a remote server
A local database
From each source I will mainly retrieve
A short string, e.g. for Twitter, the Tweet, and from the local database the title of a blog page.
An associated image, if one exists
A link identifying the content at its source
My question is:
What is the best way to a) store the data and b) retrieve the data
My thinking is:
i) Write a script that is run every 2 or so minutes on a cron job
ii) the script retrieves data from all sources and stores it in the local database
iii) application code can then retrieve all data from the one source, the local database
This should make application code easier to manage - we only ever draw data from one source in application code - and that's the main appeal. But is it overkill for a relatively small site?
I would recommend putting the twitter feed and flickr feed in JavaScript. Both flickr and twitter have REST APIs. By putting it on the client you free up resources on your server, create less complexity, your users won't be waiting around for your server to fetch the data, and you can let twitter and flickr cache the data for you.
This assumes you know JavaScript. Once you get past JavaScript quirks, it's not a bad language. Give Jquery a try. JQuery Twitter plugin Flickery JQuery plugin. There are others, that's just the first results from Google.
As for your data on the local server and remote server, that will depend more on the data that is being fetched. I would go with whatever you can develop the fastest and gives acceptable results. If that means making a REST call from server to sever, then go for it. IF the remote server is slow to respond, I would go the AJAX REST API method.
And for the local database, you are going to have to write server side code for that, so I would do that inside the Wordpress "framework".
Hope that helps.