August Chicago Mobile Meetup talk 8-25-11


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

August Chicago Mobile Meetup talk 8-25-11

  1. 1. App-ifying or monitizing your present business web resources Using HTML5, Jquery Mobile and PhoneGap
  2. 2. Scientific Experiment <ul><li>This talk is not about my amazing app
  3. 3. This talk is not about one platform that's better
  4. 4. This talk IS about my experiments with these platforms
  5. 5. Hypothesis + Control + Variables (html5, jquery mobile, json, phonegap) = you make the call </li></ul>
  6. 6. Problems: <ul><li>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
  7. 7. 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 </li></ul>
  8. 8. Problems, part two <ul><li>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.
  9. 9. Lack of user friendliness in corporate data
  10. 10. I have web-development skills, but not mobile skills </li></ul>
  11. 11. Existing -> Mobile <ul><li>I will take existing talent/database info and make it available offline for me at all times
  12. 12. If I wanted to build a mobile app to sell, I would probably take the traditional route of native. </li></ul>
  13. 13. Attempt #1 <ul><li>Html / php / mysql website </li></ul>
  14. 14. Attempt #2 <ul><li>single brand, json database, no offline access </li></ul>
  15. 15. JSON database? <ul><li>Chrome and Safari browsers can hold strings of data in html5 local storage.
  16. 16. localStorage.setItem(“The plaid fox jumped over the granite sky.”)
  17. 17. Now “The plaid fox...” is set like a cookie, but I don't need that, I need an offline database in the browser.
  18. 18. Your phone can hold strings...but relational information (pepsi-can-40mg) is what I want in client-side webpage storage. </li></ul>
  19. 19. JSON database! <ul><li>var coffee1 = { &quot;id&quot;: 1, &quot;drink&quot;: &quot;coffee&quot;, &quot;size&quot;: &quot;1&quot;, &quot;caffeine&quot;: &quot;160&quot; };
  20. 20. localStorage.setItem('coffee1', JSON.stringify(coffee1));
  21. 21. 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. </li></ul>
  22. 22. JSON database! <ul><li>(drinkadd is a variable returned from user)
  23. 23. var getdrink = localStorage.getItem(drinkadd);
  24. 24. getdrink = JSON.parse(getdrink);
  25. 25. if (getdrink[&quot;drink&quot;] == &quot;coke&quot;) …
  26. 26. “The drink you selected has “ + getdrink[&quot;caffeine&quot;] + “mg of caffeine!”
  27. 27. The javascript object turns into a string to go in
  28. 28. It gets parsed and back to an object coming out
  29. 29. This is how I remember the drink information. </li></ul>
  30. 30. Attempt #3 <ul><li>multi-brand, json database, full offline access, jquery mobile stylesheet/ajax framework
  31. 31. </li></ul>
  32. 32. Offline access? <ul><li>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: <!DOCTYPE html>
  33. 33. <html manifest=&quot;yourfile.manifest&quot;> </li></ul>
  34. 34. Jquery Mobile Problems? <ul><li>Page transitions sometimes jerky on Android.
  35. 35. App sure is a bulky size and slow to load.
  36. 36. Degrades nicely for Blackberry, IE, Opera Mini, etc...but at a kb cost
  37. 37. 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)
  38. 38. Building for one platform, roll your own style...? </li></ul>
  39. 39. Attempt #4 <ul><li>multi-brand, json database, full offline access, single file, sleek no dependency site
  40. 40. </li></ul>
  41. 41. Attempt #5 – the main event! <ul><li>Attempt 4 compiled by PhoneGap into native </li></ul>
  42. 42. PhoneGap Tips <ul><li>If you haven't already, setting up the Android environment in Eclipse takes hours or days!
  43. 43. Find a tutorial you trust and stick to it to the letter.
  44. 44. It will compile multi-page websites into an app, but single page (inner linked divs) yield quicker performance
  45. 45. It needs an index.html
  46. 46. Any error anywhere will cause Android to crash your app – not forgiving like the web </li></ul>
  47. 47. PhoneGap – plug and play? <ul><li>It's not automatic – you still have to make a new project and configure all the settings for each mobile device.
  48. 48. Still need a mac for ios platforms
  49. 49. Blackberry = whole new ballgame – you should really study this platform before you build for it
  50. 50. Still need to configure your Androidmanifest.xml file for permissions – ie, add internet access perm before adding a link
  51. 51. “Export to signed app” is a nice wizard feature. </li></ul>
  52. 52. My PhoneGap environment <ul><li>Windows 7 32-bit
  53. 53. Eclipse Helios 3.62
  54. 54. ADK/ADT plugins = all
  55. 55. Jslint, phonegap, javascript development tools
  56. 56. Apache Ant, but not Ruby
  57. 57. Java 6.0
  58. 58. PhoneGap 1.0
  59. 59. </li></ul>
  60. 60. Thoughts on other hybrid tools <ul><li>Sencha = a gui to build web apps from javascript, not “dump your webpage here”
  61. 61. Titanium = a javascript app compiler in its own software package. Not intuitive on how to fix bugs or general “how do I do it”
  62. 62. Zepto.js = “jquery for only mobile safari and chrome”. Lite, but with transition effects.
  63. 63. 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. </li></ul>
  64. 64. Probable uses for this path <ul><li>Internal company information app
  65. 65. Restaurant menu or health concerns app
  66. 66. Event app (schedule of events)
  67. 67. Where information may change frequently?
  68. 68. Parsing a feed from a big cms site into an app? </li></ul>
  69. 69. Final Analysis <ul><li>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
  70. 70. What's good for making money with in-store apps doesn't work with “quick fix tools” such as web app technologies
  71. 71. You can do a lot of native things with web app compilers like PhoneGap, but you still need native intelligence to implement those in. </li></ul>
  72. 72. Caffeine Monitor specs <ul><li>The app that served as example for this lab test approach does the following:
  73. 73. 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.
  74. 74. It tells you when you are close to your limit, and what drinks will be too much caffeine for you at this time.
  75. 75. 3 versions: adults, pregnant women, kids and young teens
  76. 76. Links to medical research and the companies' nutrition pages
  77. 77. All versions also available En Español
  78. 78. 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. </li></ul>
  79. 79. Talk? Follow? Hire me? <ul><li>[email_address]
  80. 80. biolithic on twitter
  81. 81. Big thank you to Gregg and Kelly from the Chicago Mobile meetup for this chance!!! </li></ul>