Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firefox OS in the development process of a HTML5 app with Cordova

3,574 views

Published on

A shot presentation about how to integrate Firefox OS in an agile development process of a HTML5 app with Apache Cordova. I did this for the first Vienna "Firefox OS Dev Treff" a sub-meetup of ViennaJS

Published in: Technology
  • Be the first to comment

Firefox OS in the development process of a HTML5 app with Cordova

  1. 1. in the development process of a HTML5 app with by Thomas Dori @thomasdori thomasdori.at
  2. 2. AGENDA • Intro & App Specs • Cordova • Cordova & Firefox • The HTML5 App Dev Process • Lesson Learned
  3. 3. WHO AM I ? • Software Engineering Master Student at - Web Dev & Designer • - iOS Dev • • <3
  4. 4. PROJECT - by Event App (Login, Agenda, Speaker,…) + for iOS, Android, WindowsPhone, BlackBerry, Firefox OS + Backend to Administrate Data + 1 Project Manager, 2 Developer + 1. 8. -17. 10. 2013 + Used for ONE day + Small Budget = DO A HTLM5 APP
  5. 5. CORDOVA ≠ PHONEGAP • Apache Cordova is a set of device APIs that allow to access native device function from JavaScript • PhoneGap is a distribution of Apache Cordova
  6. 6. CORDOVA & FIREFOX OS • Since Cordova 3.1 • Little Documentation • Missing Plugins • No “run” Method • “build” Method Not Working • config.xml almost ignored • Spash Screen • App Icon (16, 48, 128)
  7. 7. PROCESS - PLANNING • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  8. 8. PROCESS - RESEARCH • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  9. 9. PROCESS - CONTENT • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  10. 10. PROCESS - DESIGN UI • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  11. 11. PROCESS - FEEDBACK • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  12. 12. PROCESS - BACKEND • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  13. 13. PROCESS - FRONTEND • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish > > > > > > > brew install node npm install -g cordova cordova create App com.app App cd App cordova platform add firefoxos cordova platforms ls cordova build +Set Icons, Description, Developer Parameter
  14. 14. PROCESS - TESTING • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  15. 15. PROCESS - TESTING • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish http://192.168.0.10/myApp
  16. 16. PROCESS - TESTING • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  17. 17. PROCESS - TESTING • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Emulator - Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  18. 18. PROCESS PUBLISH • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Mobile Browser • Emulator • Device • Deploy/Publish • Finish
  19. 19. PROCESS - PUBLISH • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test 14 + BlackBerry WP 7 iOS 7 6 Fx OS (Packaged) • Desktop Browser • Mobile Browser • Emulator • Device • Deploy/Publish • Finish 3 Android Fx OS (Hosted) 0
  20. 20. PROCESS - FINISH AFTER 70 DAYS • Planning • Research • Define Content • Design UI • Show/Talk to Customer • Implement Backend • Implement Frontend • Test • Desktop Browser • Mobile Browser • Emulator • Device • Deploy/Publish • Finish 2% 5% 22% 7% 12% 20% 14% 18% Firefox OS iOS Android BlackBerry Windows Phone PM & Graphics Wordpress HTML5
  21. 21. LESSON LEARNED • Configure weinre in the Beginning • Automated Testing from the Beginning • Changed Code Base ▷ Test Everything • Cordova is NOT a Silver Bullet • IE sucks (at least on WP7) • Supporting Firefox OS is SUPER EASY
  22. 22. THX 4 YA ATTENTION! in the development process of a HTML5 app with . Questions? Thomas Dori | @thomasdori | thomasdori.at

×