Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Building Cross-Platform Mobile Apps

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 57 Anzeige

Building Cross-Platform Mobile Apps

Herunterladen, um offline zu lesen

PhoneGap (aka Cordova) is a cross-platform framework for developing mobile apps using standard web development tools like HTML, CSS, and JavaScript. Join Troy Miles to learn how to create mobile apps with PhoneGap by building a simple but full-featured app during this hands-on class. Troy explores PhoneGap’s important capabilities, including GPS, camera, and audio recordings. Because JavaScript has a reputation as a somewhat difficult language, Troy teaches techniques for keeping your code robust and clean. To give your app the appropriate look and feel for the device on which it is running, the class will use the open source Chocolate Chip UI framework for testing. Troy shares ways to debug the code by running it as a web app, using browser development tools, or as a phone app, using the Chrome browser’s remote debugging features. Leave with the basics you need to start building your own cross-platform mobile apps.

PhoneGap (aka Cordova) is a cross-platform framework for developing mobile apps using standard web development tools like HTML, CSS, and JavaScript. Join Troy Miles to learn how to create mobile apps with PhoneGap by building a simple but full-featured app during this hands-on class. Troy explores PhoneGap’s important capabilities, including GPS, camera, and audio recordings. Because JavaScript has a reputation as a somewhat difficult language, Troy teaches techniques for keeping your code robust and clean. To give your app the appropriate look and feel for the device on which it is running, the class will use the open source Chocolate Chip UI framework for testing. Troy shares ways to debug the code by running it as a web app, using browser development tools, or as a phone app, using the Chrome browser’s remote debugging features. Leave with the basics you need to start building your own cross-platform mobile apps.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Building Cross-Platform Mobile Apps (20)

Anzeige

Aktuellste (20)

Anzeige

Building Cross-Platform Mobile Apps

  1. 1. Building Cross-Platform Mobile Apps Mobile Dev+Test 14 April 2015 - San Diego CA
  2. 2. Troy Miles Over 35 years of programming experience Blog: http://therockncoder.blogspot.com/ Twitter: @therockncoder Email: rockncoder@gmail.com GitHub: https://github.com/Rockncoder
  3. 3. Agenda A Quick & Dirty JavaScript Overview What is PhoneGap? Building PhoneGap Apps Debugging Plugins
  4. 4. Agenda Backbone Underscore Models Collections Views The Router
  5. 5. Agenda Templates Chocolate Chip Lists Look and Feel Summary
  6. 6. The End of HTML5 as a Platform? Facebook mobile apps on iOS and Android were originally using HTML5 Users complained about speed and style In 2012, Facebook switch to native apps The pundits announced the end of HTML5 as a mobile platform and the end of PhoneGap too
  7. 7. JavaScript Best Practices Avoid sloppy JavaScript Avoid the Global Space Encapsulate Code into Objects Use Design Patterns
  8. 8. Avoid Sloppy JavaScript Use “strict” mode Always use ‘===’ & ‘!==’ Code in JavaScript not C#, Java, Ruby, etc. Use JSLint or JSHint
  9. 9. Avoid the Global Space Minimize use of global variables Use Name-spacing Use anonymous/immediate functions when appropriate
  10. 10. Functions Functions are a first class type Like other types they can be passed and assigned freely Anonymous functions are used frequently
  11. 11. Objects Objects are some what like Key/Value dictionaries in other languages The Key can be anything when wrapped in quotes The Value can be any type including a function
  12. 12. Events Events allow for excellent separation of concerns You can listen for system events or Trigger and respond to your own Many external libraries will communicate via events
  13. 13. Promises A rather new JavaScript concept Used to handle asynchronous callbacks The app uses jQuery’s version
  14. 14. PhoneGap/Cordova History 2009: 1st developed at an iPhoneDevCamp event 2009: Developers form a company, Nitobi 2011: Adobe acquires Nitobi 2011: Adobe open sources PhoneGap project to Apache 2012: Apache gives the project the name Cordova
  15. 15. Cordova Forks Adobe PhoneGap IBM Worklight Telerik Platform Intel XDK BlackBerry WebWorks The Ionic Framework
  16. 16. Target Platforms Amazon FireOS Google Android BlackBerry 10 Firefox OS Apple iOS Ubuntu Linux Microsoft Windows Phone 8
  17. 17. Development Platforms OS X All except Windows Phone / Windows Windows All except iOS Linux All except Windows Phone and iOS
  18. 18. PhoneGap Current release is 4.2 Node.js is a hard requirement since version 3.0 It is all command line instead of IDE Recommend not upgrading your app to a new version right away
  19. 19. How PhoneGap works? Most device APIs include an internal web browser PhoneGap uses this internal web browser as its app canvas It adds more features to the navigator via software which bridges the gap between the internal web and the device
  20. 20. The Hard Things Installation Knowing the difference between PhoneGap & Cordova Deciding what to do past hello, world
  21. 21. Node Package Manager npm is very popular in the open source community cross-platform coding standard storage site + discovery mechanism delivery mechanism used by phonegap/cordova
  22. 22. Let’s build an app, part 1a
  23. 23. Hello, world cordova create hello com.rnc.hello Hello cd hello cordova platform add browser --usegit cordova run browser
  24. 24. hooks Allows you to execute code at defined points in the Cordova application build process Example minify your JavaScript
  25. 25. platforms One directory for each device framework you support Because of the complexity involved in getting individual machines setup, we will demonstrate this but not actually work through it as an excercise
  26. 26. plugins Modular pieces of native code which give your app increased functionality Familiar Plugins console device dialogs inappbrowser
  27. 27. www Your app's root directory laid out as a set of sub-directories css img js index.html
  28. 28. config.xml Defines a widget Must be in root directory Actually defined by the W3C http://www.w3.org/TR/widgets/#configuration- document-0
  29. 29. Let’s build an app, part 1b
  30. 30. Adding a plugin Two important pieces of information how to install a plugin how to make it work http://plugins.cordova.io/#/package/ org.apache.cordova.camera cordova plugin add org.apache.cordova.camera
  31. 31. navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL}); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData;} function onFail(message) { alert('Failed because: ' + message);}
  32. 32. Debugging Using the browser while developing Chrome remote for Android devices Safari remote for iOS devices Windows Phone winre
  33. 33. UI Options Roll Your Own jQuery / jQuery UI jQuery Mobile Bootstrap Chocolate Chip UI
  34. 34. Framework Options Roll Your Own AngularJS Knockout BackboneJS
  35. 35. Underscore A utility belt library for JavaScript Excellent at manipulating objects and collections About 6kb minified and compressed Required for Backbone apps
  36. 36. Backbone A MV* Framework Note: There are no controllers hence no ‘C’ More lightweight than Angular, Ember, or Knockout Requires jQuery and Underscore
  37. 37. Models The base object in Backbone Essentially a wrapper around a JavaScript object Use get and set command to access properties
  38. 38. Collections A collection of models Can associate a URL with a collection Backbone native support of RESTful API Can also use third party API
  39. 39. Views Backbone’s UI layer Also does much of what a controller would do in typical MVC
  40. 40. The Router The router controls application state In a web site it would control what is in the URL bar PhoneGap apps may lack a visible URL bar, but it still exists
  41. 41. Templates Templates render markup to the DOM in a cookie cutter fashion Especially good for render collections to a view Make it easier to create single page apps
  42. 42. Chocolate Chip UI A UI Framework akin to jQuery Mobile or even Bootstrap Does a great job of impersonating iOS, Android, and Windows Phone 8
  43. 43. Lists You will work a lot with lists in mobile apps In CC, lists will have the look and feel of the device Lists typically will need a bit of code to make them fully functional
  44. 44. Lists Lists have classes which enhance their looks Classes exists to indicate: Navigation to another page Navigation to a details page
  45. 45. Widgets CC uses a combo of its own stuff with HTML5 For example the Range Slider is simply an HTML5 input type=range But a switch is a combination of HTML, CSS3, and JavaScript
  46. 46. Look & Feel Switching the look and feel is easy, just change CSS files PhoneGap version 3+ automates the process
  47. 47. Look & Feel iOS: chui-ios-3.8.4.min.css Android 4+: chui-android-3.8.4.min.css Windows Phone 8: chui-win-3.8.4.min.css
  48. 48. Look & Feel PhoneGap’s merges folder one directory for each supported device Its contents will be copied and overwrite during the build command Name all of the css files identically Place in each appropriate folder
  49. 49. Let’s build an app, part 2
  50. 50. pg-twitter cordova create pg-twitter com.rnc.pgtwitter pg-twitter cd pg-twitter cordova platform add browser --usegit cordova run browser
  51. 51. merges directory Must be created by hand named after support platforms contents of the merge directory will be written to the www during build files/directories with the same name will be overwritten
  52. 52. Two Things Really Quick PhoneGap Build PhoneGap Developer App
  53. 53. Resources http://phonegap.com/ http://cordova.apache.org/docs/en/4.0.0/index.html http://cordova.apache.org/ http://backbonejs.org/ http://underscorejs.org/
  54. 54. Resources http://momentjs.com/ http://plugins.cordova.io/#/ http://jquery.com/ http://chocolatechip-ui.com/index.html http://www.raymondcamden.com/
  55. 55. The Rockncoder http://therockncoder.blogspot.com http://www.youtube.com/user/rockncoder https://github.com/Rockncoder/pg-twitter http://www.slideshare.net/rockncoder
  56. 56. Summary Speed of development Ease of development Cross-platform by design
  57. 57. Please rate this talk! http://spkr8.com/t/44241

×