August Chicago Mobile Meetup talk 8-25-11
-
Upload
biolithic -
Category
Technology
-
view
570 -
download
0
Transcript of August Chicago Mobile Meetup talk 8-25-11
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?
biolithic on twitter
Big thank you to Gregg and Kelly from the Chicago Mobile meetup for this chance!!!