Mobile app class Chicago

731
-1

Published on

Slides from my talk with Walgreens!

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
731
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile app class Chicago

  1. 1. Build your first app 
 with HTML5, APIs and PhoneGap @mdobs @adammagaluk
  2. 2. Matt Dobson ! @mdobs matt@apigee.com © 2013 Apigee – All Rights Reserved !2
  3. 3. Adam Magaluk ! @adammagaluk amagaluk@apigee.com © 2013 Apigee – All Rights Reserved !3
  4. 4. We work for Apigee © 2013 Apigee – All Rights Reserved !4
  5. 5. We help power AT&T, eBay Best Buy, Walgreens, Digital River, NewEgg, LiveNation, Cars.com, Dell, Getty Images, GraceNote, Shazam, HomeAway, Pearson, cheezburger, ... © 2013 Apigee – All Rights Reserved !5
  6. 6. We’ve organized this training in LA, San Jose, Austin, Denver, Amsterdam, Atlanta, Houston, Denver, Portland, Seattle, Chicago… © 2013 Apigee – All Rights Reserved !6
  7. 7. Why do we do this? Why free? © 2013 Apigee – All Rights Reserved !7
  8. 8. Apigee is always free for developers
 Free Hosted Accounts 25GB storage limit, 10M push notifs/mo no API/bandwidth limit Commercial use OK
 Free OSS version git.io/usergrid © 2013 Apigee – All Rights Reserved !8
  9. 9. Paid plans available for large companies if you need to deploy this on your own servers or SLAs, 4 nines, multiregion, phone support, more storage, etc. © 2013 Apigee – All Rights Reserved !9
  10. 10. What are you here to learn today? © 2013 Apigee – All Rights Reserved !10
  11. 11. Hopefully you know HTML basics, some Javascript... and Phonegap! © 2013 Apigee – All Rights Reserved !11
  12. 12. 9 - 10 10 - 11 11 - 12 12 - 1 1-2 2-3 3-4 4-? © 2013 Apigee – All Rights Reserved Introduction & Basics UI Design & Walkthrough Creating the Backend Lunch Reading Data Writing Data Phonegap Q&A !12
  13. 13. Today’s goal: a simple list app © 2013 Apigee – All Rights Reserved !13
  14. 14. What is an app? © 2013 Apigee – All Rights Reserved !14
  15. 15. Is a website an app? © 2013 Apigee – All Rights Reserved !15
  16. 16. Different approaches: Native PhoneGap MonoTouch RubyMotion Appcelerator... © 2013 Apigee – All Rights Reserved !16
  17. 17. What is HTML5? © 2013 Apigee – All Rights Reserved !17
  18. 18. data-attributes geolocation localstorage history © 2013 Apigee – All Rights Reserved !18
  19. 19. For more info:
 diveintohtml5.info caniuse.com html5rocks.com © 2013 Apigee – All Rights Reserved !19
  20. 20. jQuery and jQuery Mobile © 2013 Apigee – All Rights Reserved !20
  21. 21. Section 1 Building the UI
  22. 22. Build something that looks like this: j.mp/museums-mock © 2013 Apigee – All Rights Reserved !22
  23. 23. Sign up for a trial of Codiqa: j.mp/ codiqa-trial-unlimited © 2013 Apigee – All Rights Reserved !23
  24. 24. Solution ! j.mp/museumscodiqa-ui © 2013 Apigee – All Rights Reserved !24
  25. 25. Section 2 Add data to the backend
  26. 26. Why do we need a backend? © 2013 Apigee – All Rights Reserved !26
  27. 27. Can I just reuse my existing backend? Maybe. © 2013 Apigee – All Rights Reserved !27
  28. 28. Gotcha #1 No server-side page generation! © 2013 Apigee – All Rights Reserved !28
  29. 29. Gotcha #2 Most differentiating features (geoloc, push notifications, etc.) require dedicated servers, code, and infrastructure. © 2013 Apigee – All Rights Reserved !29
  30. 30. We’re going to use a BaaS today! ! Efficiently addresses Gotchas 1 & 2 + doesn’t require code © 2013 Apigee – All Rights Reserved !30
  31. 31. It’s like a database that you call directly from your client code. © 2013 Apigee – All Rights Reserved !31
  32. 32. It’s a cloud service that makes it easy to store your data, retrieve it & query it. © 2013 Apigee – All Rights Reserved !32
  33. 33. It’s like iCloud or Skydrive to synchronize all your app data across users and devices © 2013 Apigee – All Rights Reserved !33
  34. 34. Even in BaaS, there are plenty of alternatives! © 2013 Apigee – All Rights Reserved !34
  35. 35. (Apache) Usergrid ! 2+ years in OSS 500+ stars 200+ forks 35 contributors © 2013 Apigee – All Rights Reserved !35
  36. 36. Core technology behind the free developer platform “App Services” at Apigee © 2013 Apigee – All Rights Reserved !36
  37. 37. You can install and run it yourself from git.io/usergrid ! Or go hosted j.mp/apigee-start © 2013 Apigee – All Rights Reserved !37
  38. 38. Add some data © 2013 Apigee – All Rights Reserved !38
  39. 39. Section 3 Retrieve data using App Services
  40. 40. App SDK Code © 2013 Apigee – All Rights Reserved API Server Infrastructure !40
  41. 41. SDKs available for… ! JS, node.js, iOS, Android, Ruby, Rails, C#, Java, WP8, etc. © 2013 Apigee – All Rights Reserved !41
  42. 42. Download the SDK j.mp/javascript-sdk
 Getting Started j.mp/museum-quickstart © 2013 Apigee – All Rights Reserved !42
  43. 43. Add some view code © 2013 Apigee – All Rights Reserved !43
  44. 44. Solution ! j.mp/museum-fetch © 2013 Apigee – All Rights Reserved !44
  45. 45. Add the museums to the listview using jQuery © 2013 Apigee – All Rights Reserved !45
  46. 46. Solution ! j.mp/museum-list © 2013 Apigee – All Rights Reserved !46
  47. 47. Section 4 What if you have no connection?
  48. 48. Add localStorage for offline access to the museums © 2013 Apigee – All Rights Reserved !48
  49. 49. Solution ! j.mp/museumstorage © 2013 Apigee – All Rights Reserved !49
  50. 50. Section 5 Add a new museum from the App
  51. 51. ` Make the form add a museum to the list © 2013 Apigee – All Rights Reserved !51
  52. 52. Solution ! j.mp/museum-add © 2013 Apigee – All Rights Reserved !52
  53. 53. Limit and sort the list then use jQuery Mobile to filter the list © 2013 Apigee – All Rights Reserved !53
  54. 54. Solution ! j.mp/museum-filter © 2013 Apigee – All Rights Reserved !54
  55. 55. Section 6 Geolocation
  56. 56. Add location to objects © 2013 Apigee – All Rights Reserved !56
  57. 57. Find your location returned as latitude and longitude © 2013 Apigee – All Rights Reserved !57
  58. 58. Query for nearby objects © 2013 Apigee – All Rights Reserved !58
  59. 59. To avoid the geolocation security error in Chrome ! python -m SimpleHTTPServer then open 
 http://localhost:8000 © 2013 Apigee – All Rights Reserved !59
  60. 60. Geolocation docs ! j.mp/apigee-geoloc © 2013 Apigee – All Rights Reserved !60
  61. 61. Solution ! j.mp/museum-geo © 2013 Apigee – All Rights Reserved !61
  62. 62. Advanced Demo j.mp/targets-demo ! Code j.mp/targets-code © 2013 Apigee – All Rights Reserved !62
  63. 63. Section 7 Run on mobile!
  64. 64. A look at PhoneGap PhoneGap Build, Trigger.io, etc. © 2013 Apigee – All Rights Reserved !64
  65. 65. Apache Cordova vs. Adobe PhoneGap © 2013 Apigee – All Rights Reserved !65
  66. 66. To create a PhoneGap project phonegap create folder com.package.name ClassName © 2013 Apigee – All Rights Reserved !66
  67. 67. Add your HTML to the top level www folder © 2013 Apigee – All Rights Reserved !67
  68. 68. www folder* in case you missed something j.mp/apigee-bookswww *replace the www folder created in the last step with this one © 2013 Apigee – All Rights Reserved !68
  69. 69. Build for iOS ! phonegap local build ios © 2013 Apigee – All Rights Reserved !69
  70. 70. Build for Android ! phonegap local build android © 2013 Apigee – All Rights Reserved !70
  71. 71. PhoneGap 3.0+ Whitelisting! ! in config.xml set <access origin=‘*’ /> © 2013 Apigee – All Rights Reserved !71
  72. 72. Android project j.mp/apigee-booksandroid ! iOS project j.mp/apigee-books-ios © 2013 Apigee – All Rights Reserved !72
  73. 73. Build and run in XCode © 2013 Apigee – All Rights Reserved !73
  74. 74. Android j.mp/phonegapandroid-guide © 2013 Apigee – All Rights Reserved !74
  75. 75. PhoneGap Build © 2013 Apigee – All Rights Reserved !75
  76. 76. What could you do next? © 2013 Apigee – All Rights Reserved !76
  77. 77. Push Notifications File Storage Social Features 3rd-party integration Legacy integration © 2013 Apigee – All Rights Reserved !77
  78. 78. For more information ! j.mp/apigee-docs © 2013 Apigee – All Rights Reserved !78
  79. 79. Great for prototyping, works at scale too! ! © 2013 Apigee – All Rights Reserved !79
  80. 80. When you use Apigee, every piece of data you store gets saved in 3 different data centers around the US (and soon 3 centers in Europe too) © 2013 Apigee – All Rights Reserved !80
  81. 81. A top 10 US retailer uses it for every 
 e-commerce call made to its app or website (over 50M users, thousands of calls per second). © 2013 Apigee – All Rights Reserved !81
  82. 82. One of the 10 largest private companies in the US used it to create an internal info management system for its 52k employees © 2013 Apigee – All Rights Reserved !82
  83. 83. A large luxury brand based in the UK mandates all contractors use it to build catalogs, campaign sites and apps for them © 2013 Apigee – All Rights Reserved !83
  84. 84. Apigee is free for developers ! Free Hosted Accounts 25GB storage limit, 10M push notifs/mo. no API/bandwidth limit Commercial use OK Free OSS version git.io/usergrid © 2013 Apigee – All Rights Reserved !84
  85. 85. Paid plans available for large companies if you need to deploy this on your own servers or SLAs, 4 nines, multi-region, phone support, more storage, etc. © 2013 Apigee – All Rights Reserved !85
  86. 86. Ask for help! Announce projects! ! j.mp/app-craft ! Sign up now :) © 2013 Apigee – All Rights Reserved !86
  87. 87. Get more training ! Advanced class? Training for your company? Still free! matt@apigee.com © 2013 Apigee – All Rights Reserved !87
  88. 88. Congratulations! ! I don’t accept tips but I do accept tweets! @mdobs #apigee ! matt@apigee.com © 2013 Apigee – All Rights Reserved !88

×