App-ifying or monitizing your present business web resources

Using HTML5, Jquery Mobile and PhoneGap

Scientific Experiment

This talk is not about my amazing app

This talk is not about one platform that's better

This talk IS about my experiments with these platforms

Hypothesis + Control + Variables (html5, jquery mobile, json, phonegap) = you make the call

Problems:

I would like an easy offline way to count up my caffeine intake when I'm sitting at the desk or the coffee shop developing all day

My dad would like an easy offline way to figure out which low-sodium drinks he can have because he still likes frappes and cappuccinos

Problems, part two

The nutritional information is either not on the company's website, in a flash site or a pdf and not easily available on the phone, or not easily scanned by a quick glance.

Lack of user friendliness in corporate data

I have web-development skills, but not mobile skills

Existing Mobile

I will take existing talent/database info and make it available offline for me at all times

If I wanted to build a mobile app to sell, I would probably take the traditional route of native.

Attempt #1

Html / php / mysql website

Www.andymartha.net/starbucks1.htm

Attempt #2

single brand, json database, no offline access

http://www.andymartha.net/starbucks4.htm

JSON database?

Chrome and Safari browsers can hold strings of data in html5 local storage.

localStorage.setItem(The plaid fox jumped over the granite sky.)

Now The plaid fox... is set like a cookie, but I don't need that, I need an offline database in the browser.

Your phone can hold strings...but relational information (pepsi-can-40mg) is what I want in client-side webpage storage.

JSON database!

var coffee1 = { "id": 1, "drink": "coffee", "size": "1", "caffeine": "160" };

localStorage.setItem('coffee1', JSON.stringify(coffee1));

Can also be nested, but for now the database table has 4 columns: id, drink, size, and caffeine which we can add to, extract from, and search. It is permanently stored in the browser until the user physically clears their localstorage cache.

JSON database!

(drinkadd is a variable returned from user)

var getdrink = localStorage.getItem(drinkadd);

getdrink = JSON.parse(getdrink);

if (getdrink["drink"] == "coke")

The drink you selected has + getdrink["caffeine"] + mg of caffeine!

The javascript object turns into a string to go in

It gets parsed and back to an object coming out

This is how I remember the drink information.

Attempt #3

multi-brand, json database, full offline access, jquery mobile stylesheet/ajax framework

Www.andymartha.net/caffeinemonitor

Offline access?

The web address and website are fully functional whether you are connected to the internet or not: transitions, images, and all!

STEP 1: configure your server to receive manifest files
STEP 2: create the manifest file and don't forget to update the version number every time you change the webpage (to refresh the page)!
STEP 3: start your html document with:

Jquery Mobile Problems?

Page transitions sometimes jerky on Android.

App sure is a bulky size and slow to load.

Degrades nicely for Blackberry, IE, Opera Mini, etc...but at a kb cost

Possibly unorthodox at this time (if jqmobile runs all the links, operations such as a back button, form submitting and javascript validation, using the # in links, and css changing take some playing around with)

Building for one platform, roll your own style...?

Attempt #4

multi-brand, json database, full offline access, single file, sleek no dependency site

Www.andymartha.net/caffeinemonitorlite

Attempt #5 the main event!

Attempt 4 compiled by PhoneGap into native

PhoneGap Tips

If you haven't already, setting up the Android environment in Eclipse takes hours or days!

Find a tutorial you trust and stick to it to the letter.

It will compile multi-page websites into an app, but single page (inner linked divs) yield quicker performance

It needs an index.html

Any error anywhere will cause Android to crash your app not forgiving like the web

PhoneGap plug and play?

It's not automatic you still have to make a new project and configure all the settings for each mobile device.

Still need a mac for ios platforms

Blackberry = whole new ballgame you should really study this platform before you build for it

Still need to configure your Androidmanifest.xml file for permissions ie, add internet access perm before adding a link

Export to signed app is a nice wizard feature.

My PhoneGap environment

Windows 7 32-bit

Eclipse Helios 3.62

ADK/ADT plugins = all

Jslint, phonegap, javascript development tools

Apache Ant, but not Ruby

Java 6.0

PhoneGap 1.0

http://files.meetup.com/1715272/phonegap-for-engineers.pdf

Thoughts on other hybrid tools

Sencha = a gui to build web apps from javascript, not dump your webpage here

Titanium = a javascript app compiler in its own software package. Not intuitive on how to fix bugs or general how do I do it

Zepto.js = jquery for only mobile safari and chrome. Lite, but with transition effects.

Webdb / SQLite = I was initially put off by the browser wars lack of support. This is a good second option for right now in phone storage.

Probable uses for this path

Internal company information app

Restaurant menu or health concerns app

Event app (schedule of events)

Where information may change frequently?

Parsing a feed from a big cms site into an app?

Final Analysis

What's good for web apps (tools, frameworks, gui libraries, etc) is not so good for supporting the whole mobile spectrum, only brand new IOS and Android

What's good for making money with in-store apps doesn't work with quick fix tools such as web app technologies

You can do a lot of native things with web app compilers like PhoneGap, but you still need native intelligence to implement those in.

Caffeine Monitor specs

The app that served as example for this lab test approach does the following:

By pushing 3 buttons (brand, flavor, size) it keeps track of what and when you drink in a day when you close the app/browser.

It tells you when you are close to your limit, and what drinks will be too much caffeine for you at this time.

3 versions: adults, pregnant women, kids and young teens

Links to medical research and the companies' nutrition pages

All versions also available En Espaol

Included brands: Coke, Vitamin Water, Pepsi, Sobe, RC, Snapple, Arizona, Panera, Tim Hortons, Dunkin Donuts, Caribou, Starbucks, Seattle's Best, Jarritos (Mex), Guarana Antartica (Brz), Wahaha (Chn), Dannon Yogurt, Haagan-Dazs, Hershey's, Anacin, Excedrin, Vivarin, Monster, Red Bull, Jones Soda, Yerba Mate, and many other energy/specialty drinks.

Talk? Follow? Hire me?

andrewpmartha@gmail.com

biolithic on twitter

Big thank you to Gregg and Kelly from the Chicago Mobile meetup for this chance!!!