![Page 1: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/1.jpg)
Porting Existing PhoneGap Apps to Tizen OS
- Development Story
Anil Kumar Yanamandra Thomas Mitchell
ProKarma
![Page 2: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/2.jpg)
About ProKarma…
![Page 3: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/3.jpg)
3
Who am I?
• Anil Kumar Yanamandra • Mobile Architect & Head – CoE for Mobility • @ProKarma
• Mobile Application Development: B2C, B2B • Native (iOS, Android, BlackBerry), Hybrid, Mobile Web apps/sites • Custom MDM solutions • Mobile Dev Governance: Coding standards, Best practices • Mobile Consulting: Native or Hybrid or Web? Requirements driven architecture • R & D
![Page 4: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/4.jpg)
4
Agenda
• What is PhoneGap? • Our porting experiment • Changes and issues • Demo • Lessons learnt
![Page 5: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/5.jpg)
What is PhoneGap BTW?
![Page 6: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/6.jpg)
6
PhoneGap
• Open-source • Cross-platform • Web standards based • Mobile App Development Framework • Access native features via Web APIs • Pure backend framework: Works with any web UI framework • Extensible: Add custom features
![Page 7: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/7.jpg)
7
Typical Mobile App Architecture – Native
Network Manager
Native View-1
Native View-2
Persistence Manager
Native View-X
Geo-Location
Device OS
Native API calls - PS (UDID, Contacts, Camera)
iOS/Android/Tizen
PIM
Backend modules PS
PS PS PS . . .
PS – Platform Specific iOS – Objective-C Android – Java Tizen – C/C++
. . .
Native app package for distribution
(.ipa, .apk, .tpk)
![Page 8: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/8.jpg)
8
Typical Mobile App Architecture – PhoneGap
Network Manager
Native WebView
Persistence Manager
Device OS
Native API calls handled by PhoneGap library. These would be perceived as JavaScript API calls by the HTML views. (And the developers!)
iOS/Android/Tizen
PIM
PhoneGap Library PS
PS Native app package for distribution
HTML views (PI)
JavaScript/ AJAX (PI)
+CSS styling (Partially PS)
Custom Plugin
PS PS Backend
PI – Platform Independent PS – Platform Specific
Geo-Location
Custom Plugin
![Page 9: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/9.jpg)
9
Interesting. But why bother when I have Tizen Web API?
• Code Reuse! • Single codebase across platforms
Platform Native PhoneGap
Android
TelephonyManager mTelephonyMgr = (TelephonyManager) context.getSystemService( Context.TELEPHONY_SERVICE ); String deviceUid = mTelephonyMgr.getDeviceId();
var deviceUid = device.uuid;
iOS NSString deviceUid = [[UIDevice currentDevice] uniqueIdentifier];
var deviceUid = device.uuid;
Tizen String deviceUid; SystemInfo::GetValue(http://tizen.org/system/duid, deviceUid);
var deviceUid = device.uuid;
![Page 10: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/10.jpg)
Our porting experiment
![Page 11: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/11.jpg)
11
Automobile shipment app • Use-case: Ship vehicles from the comfort of your mobile device • Features:
ü Role based User Registration ü Scan VIN barcode to auto input Year, Make, Model ü Get Quote ü Save Quote ü Place an Order ü Pay by Credit Card ü Track Orders ü Map shipment locations ü Review orders
![Page 12: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/12.jpg)
12
Tech Details
• Platform support: ü iOS: iPad and iPhone ü Android: Tablet and Smartphone ü BlackBerry 10
• Tech Stack: • Native shell • PhoneGap • HTML5 stack: HTML/CSS3/JavaScript • AJAX • Only “Native” feature: VIN scanner
![Page 13: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/13.jpg)
13
JavaScript libraries used
Modernizr
![Page 14: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/14.jpg)
14
Screencaps: Tablet and Smartphone apps
![Page 15: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/15.jpg)
15
Porting to Tizen OS: Changes
• Extract web codebase from the Android/iOS PhoneGap project • Import to new Tizen project • Define config.xml settings • Whitelist all URLs the app would use • Remove the JS hooks to “native” VIN barcode scan plugin • No more!
![Page 16: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/16.jpg)
16
Debug • What worked?
• Almost everything! • Responsive UI: media-queries, all the JavaScript libraries
• What needed “fixes”? • “font-face” CSS code that loads custom font using OTF files did not work • “Pull-to-Refresh” feature in iScroll plugin
• Issues: Tizen dev device RD-210 • Performance • Load times • Refresh rates
![Page 17: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/17.jpg)
Demo Time!
![Page 18: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/18.jpg)
18
Final result
![Page 19: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/19.jpg)
Lessons learnt
![Page 20: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/20.jpg)
20
Summary: Why was this porting successful?
• Stick to standard web technologies: Avoid Third party frameworks with custom JavaScript translation layers. • Keep up with the latest supported Libs!
• Employ Responsive Web Design principles: • Build for varying screen sizes • Build for varying device capabilities
• Tizen’s outstanding HTML5 compliance makes porting HTML5 based apps easier and economical
![Page 21: Porting Existing PhoneGap Apps to Tizen OS · 2015-04-28 · Porting Existing PhoneGap Apps to Tizen OS - Development Story ... • Mobile Application Development: B2C, B2B • Native](https://reader031.vdocuments.site/reader031/viewer/2022041016/5ec8ee3a01d5005ba84fb21f/html5/thumbnails/21.jpg)