10 nights with Sencha Touch …
Before we start the link to the final product is here: takeStock
How powerfull is Sencha touch from a development standpoint, well, in 10 nights you can code a pretty handy application while maintaining your day job. Sencha announced the developers contest to coincide with the Sencha conference in November on October 7th with a cutoff date of the 27th of the same month, but by the time I stumbled upon the entry 10 days had passed to with only ten days to go I wondered how easy would it be for someone with some javascript experience but zero mobile application development experience, could an app be built that wasn’t an embarrassment? Without giving much thought to the task at hand I entered the contest and started working diligently to port the stock game application to the mobile phone, night one whizzed by and I had just set up the library folders on the web server and started to map out the functions that I hoped I could accommodate over the next few nights.
Day two, to store local or not to store local, for that is the question.
Night two started and I was hopeful that the project would progress without a hitch as I already had the php functions written that would call my YQL queries and update the stock prices, but this being HTML5 I wanted to try something new and use the SqlLite database that is integrated in the webkit browser opposed to the usual MySQL setip that I relied on when doing the first program. Why? First, I thought it would be cool to get the data on your phone without the need to connect. so even if you were out of range of a wireless network and using the app on your iPad, or iPod touch you could still see where your portfolio stood. Second, I did not want the hassle of creating a user account for this demo as that would be the only way to manage which portfolio data to send back from the database. third, I really wanted to try out the new HTML local storage. After some investigating I found the following could be used to create a database to hold portfolio information:
function initDatabase() {
try {
if (!window.openDatabase) {
alert('Could not create local storage, please use the browser app at learnsomethings.com/stock_game/index.php!');
} else {
var shortName = 'TakeStockDB';
var version = '1.0';
var displayName = 'Take Stock Database';
var maxSize = 100000; // bytes
TakeStockDB = openDatabase(shortName, version, displayName, maxSize);
createTables();
selectAll();
}
} catch(e) {
return;
}
}
Then you can call the second function that will create tables for the data only if there are no preexisting tables.
function createTables(){
TakeStockDB.transaction(
function (transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS current_stocks(id INTEGER NOT NULL PRIMARY KEY, some_column TEXT NOT NULL, another_column TEXT, third_column TEXT, some_number INTEGER NOT NULL, some_other_text TEXT, date TEXT);', []);
}
);
}
The function that would get the data would be as simple as:
function getAllStockData(){
TakeStockDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM current_stocks order by id desc;", [], allDataSelectHandler);
}
);
}
Day three / four – just because we can get it in the browser doesn’t mean we can get it out!
Now that the storage was sorted out I was off, or so I thought, it looks like Sencha has a local storage method, http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.LocalStorageProxy but it’s for the other local storage, not the SqlLite storage. I was back to square one and day three was running short on time as I had imposed an 11PM cutoff time so I could still function the next day. What could I do? I could try the Json store, or so I thought until I realized that I would have to write code to make the call to SqlLite outside of the javascript functions to provide the URL as I was unable to get the local Json object into the Json Store! Dead end 10:00 PM. Just then I found the memory proxy and what I thought would be the answer to all my problems, I would pass the data into an object and use the memory proxy to put stocks into a handy list.
Day five – the best laid plans of mice and men often go astray
Ok maybe a list doesn’t make a compelling interface for a portfolio program, after all don’t you want to see everything that’s important to you right up front, using your fingers to scroll. Lists are for lists, but I wanted this app to show much more than the usual list, I wanted tiles that contained your current value and the increase in price so I decided to scrap the work that was done on days four and five and forge ahead with a series of containers that would slide into place depending on the action the user wanted to make, view all stocks, add stocks, just get help, or get a more detailed view of the company information. Since this was all about HTML 5 I would set up the content using sections and articles, where all the pages were sections and all of the quotes themselves were articles. An example of the main help screen is shown below:
<section id="quotes"> <article> <h1>New In Town?</h1> <p>To get started adding your stocks just click the + above and complete the form.</p><h1>There are thousands of stock quote apps, what makes this different?</h1> <p>Well, we thought you might be more interested in how your particular stock is doing without having to break out a calculator whenever you look at the current stock price, so we built an app that takes the ticker, price of the stock when you purchased it, and the quantity that you purchased and paired that with a almost (okay we’re off about 5 minutes or so) real time price update to give you a real time look at your portfolio’s net worth - anytime - anywhere.</p> <h1>How did we do it?</h1> <p>You are looking at a new breed of mobile application written using HTML5 and javascript with the help of the Sencha Touch framework. In other words whether you are holding an iPhone, iPad, Android, Google Tablet, or even your home PC using Chrome or Safari you are looking at the same app - written once - run anywhere, anytime.</p> </article> </section>
The section tag would be displayed as a table, which means that the articles in the section could be zebra striped by applying some new CSS 3 styling.
#quotes article:nth-child(odd) {
background-color: #E3E3E3;
}
#quotes article:nth-child(even) {
background-color:#A0A0A0;
}
Day Six – cards, containers, panels and lists – what should I do?
Next I created four containers that held my four screens, learning that draggable:true really messed up the users ability to scroll on the iPhone:
var carousel = new Ext.Container({
id:'news',
ui:'dark',
scroll:'vertical',
draggable:false
});
var carousel2 = new Ext.Container({
scroll:'vertical',
id:'portfolio',
ui:'dark',
draggable:false
});
var carousel3 = form = new Ext.form.FormPanel(formBase);
var carousel4 = new Ext.Container({
html: aboutUs,
scroll:'vertical',
id:'about',
ui:'dark',
draggable:false
});
I would then change the content on the pages with:
Ext.getCmp('portfolio').update(tbl_jst);
Things were starting to pick up, now I had to assign a handler to the elements to set the primary key of the currently selected stock in a global variable so that I could pass it in an Ajax request to the PHP page that contained the YQL queries for the expanded data view. Do you think I could fit more acronyms into one sentence? I was mailed a handy piece of code just in time by the folks at Sencha that would do the trick:
Ext.fly('quotes').on({
tap: setSelectedPK,
delegate: 'article'
});
I could slide the pages from one to the next by hooking the following line to any button handlers:
panel.setCard(carousel2, 'slide');
Days Seven through Ten have been spent making minor adjustments to CSS and button layouts with the hopes of getting to the next round, where I would like to add some more functionality .. and thinking about one thing … how do I monetize this this thing? The short answer appears to be phoneGap, I’ll let you know how that goes in the coming weeks!
