Building Cross-Platform JavaScript Apps using Cordova

Embed Size (px)


This is the slide deck used in the "Building Cross-Platform JavaScript Apps using PhoneGap and Cordova" lecture I gave at the WDC.IL User Group in July 2014. The talk briefly shows how to get started with Cordova, discusses some of the differences between Cordova, Adobe PhoneGap and the Telerik Platform, and demonstrates using the Telerik Platform to build and LiveSync Android, iOS and Windows Phone apps. It also explains the role of plugins in building hybrid mobile apps that can utilize native APIs.

Text of Building Cross-Platform JavaScript Apps using Cordova

  • 1.Cordova Noam Kfir | Sela Group | 2014

2. Agenda Convergence Whats in a Name? Diving In One for All and All for One Going Native 3. Mobile Development Strategies Divergent Different platforms Different IDEs Different languages Convergent Unified platforms Any IDE (or just one) One language 4. Divergent Options Android Android Studio (or Eclipse) Java C++ iOS Xcode Objective- C Swift Windows Phone Visual Studio C# C++ JavaScript 5. Convergent Options Xamarin Xamarin Studio C# Mobile Web Any IDE JavaScript* Cordova Any IDE JavaScript* 6. Comparing Our Choices Option Deploy Languages Tools Platform Pricing Divergent Manage stores individually Different Different Native Negligible (mostly) Mobile Web Web JavaScript Any Web Inapplicable Xamarin Multiple stores C# One Native Bindings $299 or $999 per year per dev per platform Telerik Platform Multiple stores JavaScript Any Web + Native Bindings $468 or $948 per year per dev for all platforms Adobe PhoneGap Manage stores individually JavaScript Any Web + Native Bindings $120 or $360 (Creative Cloud) per year Disclaimer: This is a rough comparison that does not take into account all of the advantages and disadvantages of each option. 7. Built on Apache Cordova Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript Exposes native device capabilities The Web as a Platform 8. Cordova App Structure Native Shell Browser Control Your App 9. Installing Cordova Install node and npm npm install -g cordova 10. Creating a Cordova Project cordova create path namespace name Example: cordova create hello-world com.gettingStarted.helloWorld HelloWorld 11. Adding Platform Support Install the iOS SDK cordova platforms add ios Install the Android SDK and build tools (e.g., ant) cordova platforms add android Install the Windows Phone 8 SDK (on Windows) cordova platforms add wp8 12. Folder Structure www the app platforms platform support libraries and tools plugins support for native features config.xml app parameters 13. Build iOS Platform cordova build ios Open Xcode and Run in the Simulator npm install -g ios-sim cordova emulate ios 14. Build Android Platform cordova build android Create at least one virtual device with android avd cordova emulate android 15. Build Windows Phone 8 Platform cordova build wp8 Install Windows Phone 8 virtual devices Based on Hyper-V cordova emulate wp8 16. One for All and All for One Cordova Adobe PhoneGap Telerik Platform IBM Worklight Salesforce Mobile SDK ??? 17. Teleriks Approach to Mobile Dev imagesource: 18. The Telerik Platform AppPrototyperDesign AppBuilder, CordovaBuild Backend ServicesConnect Mobile TestingTest AppManagerDeploy and Manage AppFeedback, AnalyticsMeasure 19. Design AppPrototyper Online wireframing tool Collaborative features Screens can be exported as a starting template Based on Kendo Without the UI itself Not yet mature, but shows promise 20. Build AppBuilder Work in any environment Teleriks AppBuilder IDE online or offline Choose your own environment Git integration Test your app in an online simulator Or on a real device with LiveSync Publish your app to any app store 21. Connect Backend Services Unified API for cloud-based services Management portal Cloud storage for data and files Push notifications iOS, Android, Windows Phone User management Facebook, Microsoft, Google, Twitter Server-code execution 22. Test Mobile Testing Write JavaScript tests Based on Teleriks testing framework Similar to Jasmine but with higher-order capabilities Run the tests using agents Browser agents browse to a provided URL Device agents install the Telerik Mobile Testing app from the appropriate app store View results on the dashboard 23. Deploy and Manage AppManager Automatically publish your app to the Apple, Google or Windows app stores Also supports private app stores for in-house apps Integrated with AppBuilder via the Publish button Edit configurations using the AppBuilder 24. Measure AppFeedback Lets users and testers provide feedback directly from within the app Can automatically collect usage data Screenshots System info User comments Feedback shows up in the AppFeedback dashboard where it can be managed centrally Assign, resolve, etc. Request additional feedback or send replies 25. Measure Analytics Rich analytics platform, visible in the workspace dashboard Opt-in using the Analytics plugin Collects automatic data Analytics API supports custom events and data 26. Going Native Plugins provide support for native features Dont have to be native! Anyone can write a plugin Plugin registry: 27. Adding Plugins cordova plugin add plugin-identifier 28. Common Plugins org.apache.cordova.console org.apache.cordova.device org.apache.cordova.notification 29. Summary 30. Questions?