I thought I would look for an alternate to SQLite to display a prepopulated database. Research (and successfully creating a working version) led me to TaffyDB. Here is a working project to create your own prepopulated DB. TaffyDB can do so much more if you are familiar with JavaScript (I’m not, so it was difficult trying to figure this much out!).
Resources:
http://www.taffydb.com/
http://www.slideshare.net/typicaljoe/better-data-management-using-taffydb-1357773
In this first example, I’m outputting all of the DB contents with the .each() command. At the end of the article, we’ll show alternate code to filter the contents.
My development environment:
Mac OS X Yosemite 10.10.1 on latest Mac Mini
cordova -v 4.0.0
No Jquery or other JS or CSS packages or frameworks used
1. Visit http://www.taffydb.com/ to download the code. It is installed as /Downloads/taffydb-master.zip.
2. Double-click to unzip it, and move it to your /Documents folder.
3. Open your text editor (mine is SublimeText) and create a blank index.html file in the /taffydb-master folder.
4. Paste the following contents into index.html for a complete, working prepopulated DB. Just make sure to make a reference to taffy-min.js. In this case, “<script src=”taffy-min.js”></script>”
<!-- ************* BEGIN ************* -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Taffy DB Test</title>
<!-- cordova is not being used in this test
<script src="javascripts/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
}
</script> -->
<!-- reference the js file -->
<script src="taffy-min.js"></script>
<!-- stylize the screen elements -->
<style type="text/css">
.buttonClass, h2, p {
font-family: "Helvetica"; color: #000; font-size:1em;
}
.buttonClass {
border-radius:8px; background-color:#fff;
border:#878787 solid 1px; padding:0 1em;margin:.5em;
height: 3em; width: 300px;
text-align:center;
-webkit-appearance:none;
}
.segment {
display:block; border-radius:8px; background-color:#eee;
border:#878787 solid 1px; padding:1em; margin:.5em;
-webkit-appearance:none;
}
h2 {
font-size:1.3em; font-weight: bold;
}
p {
text-align:left; margin-left: 170px;
}
p.title {
font-weight:bold;font-size:1em;text-align:center; color:#000
}
p.more {
font-size:.8em;text-align:center;font-style:italic;
}
a {
color:#666
}
img.pic {
width:150px;
float: left;
}
</style>
</head>
<body>
<!-- this button will execute, or call, the showAll() function below -->
<input type="button" class="buttonClass" id="buggy" value="Show All" onclick='showAll();'>
<br><br>
<h2>Database output: </h2>
<!-- shows the database here -->
<span id="display"></span>
<script>
/*
Create all your field and data pairs, with data within quotes. In this case: id, bodyType, category, name2, photo, resource, caption. Make sure you escape any quotes with a \ character, like this: "John \"Billy\" Bob".
*/
function showAll(){
var db = TAFFY([
{
id: 1,
bodyType:"Short Course",
category:"SC18",
name2:"SC18 Ready-To-Run",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/SC18/RTR/20120.ps_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/SC18/RTR/",
caption:"Now you can enjoy Team Associated's world-class performance with true scale authenticity in a 1:18 scale electric truck! The SC18 features a newly designed chassis with a fully enclosed, 2-belt drive train system that is capable of handling the extreme amount of power that today's brushless motors and LiPo batteries can dish out.."
},
{
id: 2,
bodyType:"Short Course",
category:"Qualifier Series",
name2:"ProSC 4x4 Ready-To-Run",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/ProSC_4x4/RTR/Pro-SC-4x4-3Q_R.500_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/ProSC_4x4/RTR/",
caption:"Team Associated is proud to announce the ProSC 4x4 Ready-To-Run -- a brushless-powered 4WD off-road short-course truck in the Qualifier Series! The ProSC 4x4 comes ready to rock with many high performance features including the XP 2.4GHz radio system, a Reedy brushless power system and a 7-cell 8.4 volt Reedy WolfPack battery wired with a High Current T-Plug."
},
{
id: 3,
bodyType:"Short Course",
category:"SC10 4x4",
name2:"SC10 4x4 RTR Combo",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/SC10_4x4/RTR_Combo/lucas-body-left-7_7661_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/SC10_4x4/RTR_Combo/",
caption:"The SC10 4x4 Ready-To-Runs are RC replicas of the 800+ horsepower short course trucks driven in the Lucas Oil Off Road Racing Series."
},
{
id: 4,
bodyType:"Buggy",
category:"RC10B5M",
name2:"RC10B5M Team Kit",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/RC10B5M/Team/RC10B5M_TK_2560x2048_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/RC10B5M/Team/",
caption:"The engineers in Team Associated's Area 51 designed the RC10B5M to specifically address the demands of racing on high-speed, high-grip tracks where the mid-motor chassis is at its best."
},
{
id: 5,
bodyType:"Buggy",
category:"RC10B44",
name2:"B44.3 Factory Team",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/B44.3/Factory_Team/B44.3_3Q%20White_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/B44.3/Factory_Team/",
caption:"Enter the RC10B44.3 Factory Team Kit, the latest evolution of Team Associated’s 1:10 4WD electric off road competition buggy. The most significant changes are found on the new hard-anodized aluminum chassis, which helps lower the center of gravity to improve handling and durability."
}
]);
/*
The .each() command will cycle through all the db entries. Change the innerHTML section and vars to match your data and output.
*/
db().each(function (name){
var bodyType=(name["bodyType"]);
var category=(name["category"]);
var name2=(name["name2"]);
var photo=(name["photo"]);
var resource=(name["resource"]);
var caption=(name["caption"]);
output = document.getElementById("display");
output.innerHTML+="<div class='segment'><p class='title'>" + bodyType + ": " + name2 + "</p>" +
"<img class='pic' src='" + photo + "' width='150px'>" +
"<p class='caption'>" + caption + "</p>" +
"<p class='more'><a href='" + resource + "'>More</a></p></div>";
});
}
</script>
</body>
</html>
<!-- ************* END ************* -->
Create Cordova or PhoneGap project
5. Let’s test it in our device by creating a new Cordova (or PhoneGap) project. I create my apps in the folder /PhoneGap_apps, so I open the Terminal app, type cd and a space (for the change directory command), and drag that folder to its window, click on the Terminal to select it, and hit Enter. Now the Terminal commands are oriented to that folder, and the project will be built in that folder.
6. Create the barebones files:
cordova create taffytest
7. Change to the new folder:
cd taffytest
8. Add the platform files to set it up for your devices:
cordova platform add android
(Each platform has its own version number. This installed the Android platform version 3.6.4.)
cordova platform add ios
(This installed the iOS platform version 3.6.3.)
9. Open /taffytest/www and delete all the files there.
10. Copy the /taffydb-master/index.html and /taffydb-master/taffy-min.js to the new /www folder. Since this is not for production, we will leave all defaults as is.
11. Output debug versions of the files for all platforms (by not specifying a specific platform in the command, it will build for all platforms installed, one after the other):
cordova build
12. Add the /platforms/android/ant-build/CordovaApp-debug.apk file to your Android device (I used Dropbox to transfer the file), and test by tapping the Show All button at top.
Filtering the database
Use the following code to filter the data output. In this case, I created two buttons to display two different sets of data, buggies and short course trucks, either of which are noted in the bodyType field. Clicking on the button will write the bodyType value into localStorage, then proceed to the database script, then insert the value in the critical place to filter the data.
<!-- *************** BEGIN *************** -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Taffy DB Test</title>
<!-- cordova is not being used in this test
<script src="javascripts/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
}
</script> -->
<!-- reference the js file -->
<script src="taffy-min.js"></script>
<!-- stylize the screen elements -->
<style type="text/css">
.buttonClass, h2, p {
font-family: "Helvetica"; color: #000; font-size:1em;
}
.buttonClass {
border-radius:8px; background-color:#fff;
border:#878787 solid 1px; padding:0 1em;margin:.5em;
height: 3em; width: 300px;
text-align:center;
-webkit-appearance:none;
}
.segment {
display:block; border-radius:8px; background-color:#eee;
border:#878787 solid 1px; padding:1em; margin:.5em;
-webkit-appearance:none;
}
h2 {
font-size:1.3em; font-weight: bold;
}
p {
text-align:left; margin-left: 170px;
}
p.title {
font-weight:bold;font-size:1em;text-align:center; color:#000
}
p.more {
font-size:.8em;text-align:center;font-style:italic;
}
a {
color:#666
}
img.pic {
width:150px;
float: left;
}
</style>
</head>
<body>
<!-- this button will execute, or call, the showAll() function below -->
<input type="button" class="buttonClass" id="buggyType" value="Buggy" onclick='showBuggy();'>
<br><br>
<input type="button" class="buttonClass" id="truckType" value="Truck" onclick='showTruck();'>
<br><br>
<h2>Database output: </h2>
<!-- shows the database here -->
<span id="display"></span>
<script>
/*
Assign a value to local storage when button is chosen, which matches content in 'bodyType' field
*/
function showBuggy(){
var show = localStorage.setItem('show','Buggy');
getData();
}
function showTruck(){
var show = localStorage.setItem('show','Short Course');
getData();
}
/*
Create all your field and data pairs, with data within quotes. In this case: id, bodyType, category, name2, photo, resource, caption. Make sure you escape any quotes with a \ character, like this: "John \"Billy\" Bob".
*/
function getData(){
var db = TAFFY([
{
id: 1,
bodyType:"Short Course",
category:"SC18",
name2:"SC18 Ready-To-Run",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/SC18/RTR/20120.ps_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/SC18/RTR/",
caption:"Now you can enjoy Team Associated's world-class performance with true scale authenticity in a 1:18 scale electric truck! The SC18 features a newly designed chassis with a fully enclosed, 2-belt drive train system that is capable of handling the extreme amount of power that today's brushless motors and LiPo batteries can dish out. Along with durability, the drive train is sealed to help keep rocks and dirt away from the gears and pulleys."
},
{
id: 2,
bodyType:"Short Course",
category:"Qualifier Series",
name2:"ProSC 4x4 Ready-To-Run",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/ProSC_4x4/RTR/Pro-SC-4x4-3Q_R.500_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/ProSC_4x4/RTR/",
caption:"Team Associated is proud to announce the ProSC 4x4 Ready-To-Run -- a brushless-powered 4WD off-road short-course truck in the Qualifier Series! The ProSC 4x4 comes ready to rock with many high performance features including the XP 2.4GHz radio system, a Reedy brushless power system and a 7-cell 8.4 volt Reedy WolfPack battery wired with a High Current T-Plug."
},
{
id: 3,
bodyType:"Short Course",
category:"SC10 4x4",
name2:"SC10 4x4 RTR Combo",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/SC10_4x4/RTR_Combo/lucas-body-left-7_7661_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/SC10_4x4/RTR_Combo/",
caption:"The SC10 4x4 Ready-To-Runs are RC replicas of the 800+ horsepower short course trucks driven in the Lucas Oil Off Road Racing Series."
},
{
id: 4,
bodyType:"Buggy",
category:"RC10B5M",
name2:"RC10B5M Team Kit",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/RC10B5M/Team/RC10B5M_TK_2560x2048_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/RC10B5M/Team/",
caption:"The engineers in Team Associated's Area 51 designed the RC10B5M to specifically address the demands of racing on high-speed, high-grip tracks where the mid-motor chassis is at its best."
},
{
id: 5,
bodyType:"Buggy",
category:"RC10B44",
name2:"B44.3 Factory Team",
photo:"http://www.teamassociated.com/pictures/cars_and_trucks/B44.3/Factory_Team/B44.3_3Q%20White_md.jpg",
resource:"http://www.teamassociated.com/cars_and_trucks/B44.3/Factory_Team/",
caption:"Enter the RC10B44.3 Factory Team Kit, the latest evolution of Team Associated’s 1:10 4WD electric off road competition buggy. The most significant changes are found on the new hard-anodized aluminum chassis, which helps lower the center of gravity to improve handling and durability."
}
]);
/*
The .each() command will cycle through all the db entries. Change the innerHTML section and vars to match your data and output.
*/
var show = localStorage.getItem('show'); // pull the data out of local storage
var output = document.getElementById("display");
output.innerHTML=''; // refresh screen between button taps
db({bodyType:show}).each(function (name){
var bodyType=(name["bodyType"]);
var category=(name["category"]);
var name2=(name["name2"]);
var photo=(name["photo"]);
var resource=(name["resource"]);
var caption=(name["caption"]);
output = document.getElementById("display");
output.innerHTML+="<div class='segment'><p class='title'>" + bodyType + ": " + name2 + "</p>" +
"<img class='pic' src='" + photo + "' width='150px'>" +
"<p class='caption'>" + caption + "</p>" +
"<p class='more'><a href='" + resource + "'>More</a></p></div>";
});
}
</script>
</body>
</html>
<!-- *************** END *************** -->
Below is a screen shot taken after the Buggy button was pressed:
screenshot, TaffyDB output
iPhone Dev Log 
Pingback: Installing Chris Brody’s SQLite Database with Cordova CLI (Android) | iPhone Dev Log