Sencha sqlite example - javascript

I would like to see a decent example of a mobile web app using the Sencha framework with a client side DB accessed with SQLite. I'm currently digesting JqTouch and kinda get the binding method used there from reading Jonathon Stark's "iPhone apps" book, but cant find any examples of accessing Senchas features ie listed elements with SQLite. The DB will be small; 30 records, with about 5 fields, mostly numeric, a few of them calculated. All the math is done in javascript and I have that part working (in dash code). I need to add, delete, and edit the records.
Any pointers or examples would be very much appreciated. I'm an old dog trying to learn new tricks. Thanks

Sencha is client-side Javascript, so your application actually runs on top of Safari. That means you can forget about accessing (or installing) your own SQLite database from within the browser sandbox.
Having said that, you want to learn some new tricks, so why dont you read up on localStorage and DOM Storage. Basically the HTML5 specification allows for offline database storage based on SQLite (imagine relational database cookies). There is 1 per domain and they can be up to 5MB in size. I believe the iPhone supports this as well.
Here are some links: Introduction some API Information and a nice little blog entry by a chap called Ben Lister

Your client side code (i.e. Sencha/Javascript) would not access the SQLLite database. It will either need to read JSON or XML from the server. You'll need server side code to read the data from the database and format it in a way that your Sencha data readers will understand.
What are you using server side? If it's PHP you should look into MDB2

I had very good experience integrating Lawnchair library with Sencha Touch. Take a look at their guide, it's very easy.

Looks like there is a SQLite proxy available for sencha 2 now. http://market.sencha.com/addon/sqliteproxy-

Check out this thread on the Sencha Forums - it's a user created proxy for SQLite which I've successfully used to put data into a SQLite DB. The proxy comes with an example, but I might try and make a slightly more complicated one at some point.

Sencha's local storage doesn't take advantage of SQLite via the JavaScript API in the browser, but does use local key:value storage and has it's own way of referencing data to make it pseudo relational. This is still part of the WebDB spec, which is probably still SQLite under the hood if I had to guess. It's more persistent than a cookie or session, regardless.
You can also receive XML/JSON from a server over JSONP or Ajax if you're on the same domain, create a model to handle that data as well and bind it to a local store so that your data is available offline.

Related

javascript offline storage across multiple sessions

I'm building a small offline application that requires a simple data table (a contacts list). Something I can save to and read from.
I've looked into a few libraries and they all seem to only store data for the current session, and not into a file e.g. a fake sql database.
Can anyone point me towards the right technologies to use?
I'm planning to interact with the data table with a basic html form and JavaScript.
EDIT: Would switching to a different technology like Java be more fitting for my needs? Still not able to find a workable solution to hook up to HTML other than setting up a vagrant environment and hooking up to a MySQL db with php.
Modern browsers contain localStorage, that can store data (permanently) inside user's browser (similar to COOKIES). Usually there is ~5MB (but may differ or may be completely disabled).
if (localStorage) {
db_data = JSON.parse(localStorage.getItem('db'));
//... modify db_data
localStorage.setItem('db', JSON.stringify(db_data));
}
(for JSON use JSON2 library: https://github.com/douglascrockford/JSON-js )

Is there any way to automatically synchronize html5 localstorage between computers

I have a simple offline html5/javascript single-html-file web application that I store in my dropbox. It's a sort of time tracking tool I wrote, and it saves the application data to local storage. Since its for my own use, I like the convenience of an offline app.
But I have several computers, and I've been trying to come up with any sort of hacky way to synchronize this app's data (which is currently using local storage) between my various machines.
It seems that chrome allows synchronization of data, but only for chrome extensions. I also thought I could perhaps have the web page automatically save/load its data from a file in a dropbox folder, but there doesn't appear to be a way to automatically sync with a specific file without user prompting.
I suppose the "obvious" solution is to put the page on a server and store the data in a database. But suppose I don't want a solution which requires me to maintain apps on a server - is there another way, however hacky, to cobble together synchronization?
I even looked for a while to see if there was a vendor offering a web database service - where I could, say, post/get a blob of json on demand, and then somehow have my offline app sync with this service, but the same-origin policy seems to invalidate that plan (and besides I couldn't find such a service).
Is there a tricky/sneaky solution to this problem using chrome, or google drive, or dropbox, or some other tool I'm not aware of? Or am I stuck setting up my own server?
I have been working on a Project that basically gives you versioned localStorage with support for conflict resolution if the same resource ends up being edited by two different clients. At this point there are no drivers for server or client (they are async in-memory at the moment for testing purposes) but there is a lot of code and abstraction to make writing your own drivers really easy... I was even thinking of doing a dropbox/google docs driver myself, except I want DynamoDB/MongoDB and Lawnchair done first.
The code is not dependent on jQuery or any other libraries and there's a pretty full features (though ugly) demo for it as are well.
Anyway the URL is https://github.com/forbesmyester/SyncIt
Apparently, I have exactly the same issue and invetigated it thoroghly. The best choice would be remoteStorage, if you could manage to make it work. It allows to use 3rd party server for data storage or run your own instance.

Persistent data for PhoneGap apps

EDIT#2 - The replies until now (after 2 days) are personal opinions and preferences and not an analysis of the various options that an offline-phoneGap app has to store simple data easily across all relevant devices. As such I haven't accepted any answer, but I am following this question.
I am a little confused about which format of persistent data I should be looking into for a PhoneGap web app I'm building. I've been researching this but things are not clear given my mediocre requirements.
The app is an educational app with about 100 or so multiple choice questions and some memorization games attached.
The app once downloaded can remain offline.
It is for all phonegap supported devices.
The only data that I want to read and write is the user's performance, number of times wrong in total, per card etc and any high scores for games.
This is all very basic information and could be held in very simple js objects.
I would like it to be a fairly simple solution and very easy to maintain/repeat.
What would be my best option? The phonegap file api? json/lawnchair? local-storage? cookies? Would there be a way to 'update' the app and keep it as an object in the javascript? websql? sqilite? Storage API?
Some of these seem overkill.
EDIT
Are there differences in devices and I should do some device detection and use different technologies?
I personally like localStorage. It's straight forward and works great for most situations.
If you are just recording the data you mention above, localStorage would be perfect. I would just seralise your data objects by turning them into a string using say JSON.stringify(), then when pulling it back in use JSON.parse() to turn it back into a useable JS object.
How about try out my library http://dev.yathit.com/ydn-db/getting-started.html backed by IndexedDB (excellent performance, query by index scan), WebSQL (good performance, SQL query) or localStorage (fair performance, no query, get by key, 2.5 MB limit).
db = new ydn.db.Storage('test-store');
db.put('store1', {test: 'Hello World!'}, 123);
req = db.get('store1', 123);
req.done(function(record) {
console.log(record);
});
High performance while still go easy.
Don't like library dependency, take raw source code at https://bitbucket.org/ytkyaw/ydn-db
It looks like these are good ones, though I haven't tried them.
localForage
PouchDB
If you're using the ionic framework which uses AngularJS, I like ngStorage. This one I have tried and it's awesome.
I use localStorage to keep my persistent data, but it is somehow not reliable. I have seen some data lost, but I don't know why. But my persistent data usage is not that critical so I don't mind these inconsistencies.
But your case seems more important. I would store my persistent data in Documents folder, with File API.
Phonegap has local storage support for SQL Lite
http://docs.phonegap.com/en/2.2.0/cordova_storage_storage.md.html#Storage
Sorry I don't have more info. I was interested in this topic and happened to come across it.

Are client-only web applications possible?

I want to create an internally used web app that can be run with just a copy of the web app and the DB (anything from a text file to MS Access/Excel would work fine). Is this possible? I don't want users to have to setup a SQL server to get the app to work. Having the files necessary to run the web app stored on a shared network drive would be ideal, for example. The problem is that JS can't write to a DB. Is there anything that can use to do this?
Like mentioned, I can assume that Access/Excel are installed, if there's anything that might help there.
It's most certainly possible. W3 has put up the specs for a client side database that can be accessed by JavaScript. The modern browsers have good support for it, and since this is for an internal application, you would have some level of control I believe.
Checkout this slide that shows a live demo of Indexed Database. The full spec can be found here. See this link for browsers that currently support IndexedDB. Here's another set of slides showcasing how to use IndexedDB.
However, with this approach, each user's browser has its own DB locally. If you want a centralized DB, then you will need a server.
You can perform database transactions with JavaScript. This is generally discouraged, because it has terrible security implications. However, in a completely local environment, you are probably not causing any additional security risks. (Because, your database is already on the user's machine.) You can see an example of how to use ADO in JavaScript at How to connect to SQL Server database from JavaScript in the browser? .
Possible, yes, Like Making cars that can float in the sea but could not work on dry roads.
Use winforms or something similar. Use the right tool.
If you insists, Firefox plugins can behave in the way you mentioned, and there is a way to bundle a web application with it's server (check the beginner tutorials for RoR to have an example for something similar with webrick).
If I understand your requirements, you might look into ColdFusion.
For example, you can run a DB query pretty simply, check here, in Adobe

Javascript Object Database

is there any javascript object database??
Something like http://www.db4o.com/ but for javascript?
thanks
HTML5 includes an embedded SQL database. You could write a tiny ORM around it to deal only in objects.
Checkout ActiveJS and specifically ActiveRecord. It does not use the HTML5 Web SQL database currently, but has plans on supporting that.
Also a timeless post (no year anywhere), mentions JStorm but I'm not too familiar with it.
Is it needed for client-side, or server-side?
If you are looking for server side object oriented database for JavaScript, you can check http://wakandadb.org/ They have complete end-to-end solution for web / mobile development using JS as complete stack, check that at http://www.wakanda.org/
Wakanda is good NoSQL JS object database, but it might not be good for cloud based apps that need to soon scale out. Scaling out with will be an issues, which is a plus point with MongoDB, Cassandra or CouchDB kind of databases, but these data bases are not object-oriented, most of them are simply JSON stores.
Take a look at IndexedDB. They refer to it as an "object store" all the time, and I think it can store arbitrary objects. Don't use WebSQL since it is now discontinued and doesn't support all JavaScript objects. See also Wikipedia article.

Categories