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

1. in the development process of a HTML5 app
with
by Thomas Dori
@thomasdori
thomasdori.at

2. AGENDA
•
Intro & App Specs
•
Cordova
•
Cordova & Firefox
•
The HTML5 App Dev Process
•
Lesson Learned

3. WHO AM I ?
•
Software Engineering Master Student at
- Web Dev & Designer
•
- iOS Dev
•
•
<3

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. THX 4 YA ATTENTION!
in the development process of a
HTML5 app with
.
Questions?
Thomas Dori | @thomasdori | thomasdori.at