Here goes.
I started off with Big-O's excellent SQLite guide here. I used the FF extension to create a database that has all the tables that I am downloading, plus 1 for user credentials. Therefore, the entire DB never gets erased (or replaced) with the running of the app. I just empty some tables with each app load after the app has detected that the user exists in the DB.
I'll explain that in brief..
The app checks the DB for the user and if there is none, it shows a login form. I use onchange to trigger an ajax call. The user/pass are checked on the server and if the credentials are corrent, it returns the user ID. If the app gets back an error message, it displays it. If not, and the returned data is > 0, the user ID and username are stored in the DB and the app refreshes main.html
-App pretty much starts again and from now on, loads with the user logged in, and a different sequence of functions are run-
I display a welcome message and a button to trigger the JSON download.
If you are using a framework, you wont need the full Ajax listed here. I havent used one inside NK yet as I dont feel that the things I do warrent the bloat.
playbutton was my user button to trigger the Ajax
progress and updateLabel was created when the button was pressesd
- Code: Select all
function downloadLatestProductsAction(){
playButton.hide();
progress.setPosition(20);
progress.show();
updateLabel.show();
var database2 = new NKSQLite();
database2.openDatabase("ifeed.sqlite", 0);
database2.executeSQL("DELETE FROM cart");
//Do an eqecuteSQL for every table that you wish to empty.
database2.closeDatabase();
progress.setPosition(25);
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html');
}
}
var xmlDoc;
var url="http://www.YourURL.com/iphone_data.php";
parameters = "user_id=" + myRows[0].user_id + "&random="+Math.random();
// I send the user ID so that the product prices returned match the user's region. You could send any parameters here.
http_request.onreadystatechange = productResult;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.send(parameters);
}
function productResult() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var productDetails = http_request.responseText;
progress.setPosition(50);
updateLabel.setString("Processing Data...");
evaluateJson(productDetails);
} else {
NKAlert("Error", "There was a problem updating the product list. Please restart & try again.");
}
}
}
//Because JSON is an oblect, not an array, The function below will let us count it's contents
function countProperties(obj) {
var prop;
var propCount = 0;
for (prop in obj) {
propCount++;
}
return propCount;
}
function evaluateJson(productDetails){
updateLabel.setString("Populating Product Categories...");
progress.setPosition(60);
var returned_data = eval('('+productDetails+')');
var databaseCats = new NKSQLite();
databaseCats.openDatabase("ifeed.sqlite", 0);
for (i=1;i<=countProperties(returned_data["categories"]);i++)
{
databaseCats.executeSQL('INSERT INTO categories (cat_title, cat_id) VALUES ("'+returned_data["categories"][i][0]+'", "'+returned_data["categories"][i][1]+'")');
}
progress.setPosition(65);
updateLabel.setString("Populating Products...");
// Keep doing these FOR loops and progress bar / label; updates until you have populated the DB
progress.setPosition(100);
progress.hide();
NKLog("Added Last DB Info");
progress.hide();
updateLabel.hide();
NKStartPreloadingPage("main2.html");
}
Please excuse the formatting. I have stripped out a lot of the stuff in there to show you what is relevant.
Once main2.html is loaded, I set the nav & tabs.. main.html is never shown again becuase it is not referenced anywhere in the app.
My version of main2.html goes on to list all of the categories that were downloaded. For example....
- Code: Select all
var databaseCategories = new NKSQLite();
databaseCategories.openDatabase("ifeed.sqlite", 0);
databaseCategories.executeSQL("SELECT * from categories");
var categories = new Array();
categories = databaseCategories.getResults();
for (i=0;i<categories.length;i++)
{
catList = (catList+'<div class="section"><h1>'+categories[i].cat_title+'</h1><div class="cells">');
}
Also, if any of this seems a little backward... I have not used JSON before. I had to do a little research on it and the above is what I came up with. I decided to go the JSON route becuase it read on here that it is much faster than dealing with XML.
If you have never used JSON before either, I found this to be of help...
http://json.parser.online.fr
I edited it at the top until I got the kind of result that I was looking for then copied it from the left, put that in to a PHP page then made it dynamic by pulling what is to be the JSON content from the site's MySQL.
Here is part of my JSON, some of which is shown in the code examples:
- Code: Select all
{
"currency": "GBP",
"categories": {
"1": ["Racing", 17],
"2": ["Breeding", 21],
"3": ["Competition & Leisure", 27],
"4": ["KER Products ", 28],
"5": ["Specialist feeds ", 29],
"6": ["Fibre Products", 31],
"7": ["Dog Products", 32]
} ,
"cards": {
"1": [3333, 10],
"2": [6969, 11]
} ,
"cart": {
"1": [60, 29, 1],
"2": [37, 29, 1],
"3": [51, 28, 1]
}
}
