[Droidcon NL 2013] Developing Cross-Platform Apps

1,194 views

Published on

This is my presentation file on Droidcon Amsterdam 2013.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,194
On SlideShare
0
From Embeds
0
Number of Embeds
218
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

[Droidcon NL 2013] Developing Cross-Platform Apps

  1. 1. Developing Cross-Platform Apps Kenichi Kambara (@korodroid) 26 November, 2013
  2. 2. Who am I? l l l Kenichi Kambara (Twitter @korodroid) iplatform.org(http://www.iplatform.org/) (Personal) NTT Software Corporation (Official) l Activity(NTT Software as Official)     l Activity(iplatform.org as Personal)     - Technical Support for Developing - My Android Apps on Google Play (20+ Apps) 9 10 2
  3. 3. Who am I? l l l l Kenichi Kambara (Twitter @korodroid) iplatform.org(http://www.iplatform.org/) (Personal) NTT Software Corporation (Official) Activity(iplatform.org as Personal)     9 10 “Sekai Phone” lReal-Time Translation application lSupports Only Android (Native App) lMulti-Screen UX Competition 2013 Excellence Award 3
  4. 4. Who am I? l l l l Kenichi Kambara (Twitter @korodroid) iplatform.org(http://www.iplatform.org/) (Personal) NTT Software Corporation (Official) Activity(iplatform.org as Personal)     9 10 “XTranslator” lSimple Translation application lSupports Cross-Platform 4
  5. 5. My session topics Some tips on developing Cross-Platform Apps with Web Technologies. Android, iOS, Firefox OS, Tizen, Windows Phone... 5
  6. 6. Agenda •Introduction •Background •Cross-Platform Development •Tips 6
  7. 7. Introduction (XTranslator & Sekai Phone) 7
  8. 8. What is “XTranslator / Sekai Phone”? XTranslator Sekai Phone 8
  9. 9. “XTranslator”:Supported Platforms Cross-Platform by using Web Technologies Android iOS FirefoxOS Tizen 9
  10. 10. “XTranslator”:Supported Platforms Passed the App review, and now downloadable 10
  11. 11. Background 11
  12. 12. The ratio of Mobile Platform? Android iOS Series 40 SymbianOS Samsung Unknown BlackBerry OS Windows Phone Other Stat Counter [Oct 2012 - Oct 2013] 12
  13. 13. The ratio of Mobile Platform? In my App: Main Target: Android, iOS, FirefoxOS, Tizen 13
  14. 14. Native vs. Hybrid vs. Web Native Android Languages Java Tools Eclipse iOS Hybrid Objective-C HTML/CSS/JS HTML/CSS/JS (PhoneGap) Xcode Any Tools Any Tools Web site •Google Play •App Store Distribution Google Play App Store Advantages Web Combines Rich UI & High Performance Fast development Native & Web 14
  15. 15. Native vs. Hybrid vs. Web XTranslator Sekai Phone In my App: My Target: Hybrid (XTranslator) & Native (Sekai Phone) 15
  16. 16. Cross-Platform Development 16
  17. 17. Supporting Cross-Platform Developing with Web Technologies .html .css .js Wrapping Wrapping Wrapping Wrapping Android App iOS App FirefoxOS App Tizen App 17
  18. 18. Supporting Cross-Platform 1. UI 2. Logic 3. Distribution 18
  19. 19. 1. UI 19
  20. 20. Tools jQuery Mobile User Interface Framework for Mobile l Cross-Platform with HTML5 (Android, iOS, FirefoxOS, Tizen, etc.) l Easy to Use l Original Mobile UI Components See also: Sencha Touch, Kendo UI, Onsen UI… 20
  21. 21. jQuery Mobile:Code Example Easy to Use index.html <div id="home" data-role="page" data-theme="a"> <header data-role="header" data-position="fixed"> <h1>XTranslator</h1> ... </header> <div data-role="content"> ... </div> <footer data-role="footer" data-position="fixed"> <h4>&copy; 2013 iplatform.org </h4> </footer> </div> 21
  22. 22. jQuery Mobile:Code Example Easy to Use index.html id=home <div id="home" data-role="page" data-theme="a"> … </div> <div id="settings" data-role="page" data-theme="a"> … </div> -Screen Transition id=settings <a href="#settings" >Settings</a> 22
  23. 23. jQuery Mobile:Theme Easy to Customize Theme Roller 23
  24. 24. 2. Logic 24
  25. 25. Tools jQuery A fast, small, and feature-rich JavaScript library l Easy to use l Useful to simplify code l DOM traversal and manipulation l Event handling l Animation l Ajax See also: zepto.js 25
  26. 26. jQuery:Code Example DOM Traversal & Manipulation HTML document.getElementById (‘translateButton’) document.getElementById (‘select-choice-out’) $(‘#translateButton’) $('select#select-choice-out') 26
  27. 27. jQuery:Code Example Event Handling HTML&Java Script <input type="translateButton" onclick="OnButtonClick();"/> function OnButtonClick() { // Translation Logic }; $("#translateButton") .click(function(){ // Translation Logic }); 27
  28. 28. jQuery:Code Example Event Handling HTML&Java Script <input type="translateButton" onclick="OnButtonClick();"/> function OnButtonClick() { // Translation Logic }; $("#translateButton") .click(function(){ // Translation Logic }); 28
  29. 29. Tools l Tappable A simple, standalone library for Tap Event 29
  30. 30. jQuery:Code Example Event Handling (Using Tappable) HTML&Java Script <input type="translateButton" onclick="OnButtonClick();"/> function OnButtonClick() { // Translation Logic }; tappable('#buttonTranslate', $("#translateButton")  function (e, target) { .click(function(){  //TranslationLogic // Translation Logic }); } 30
  31. 31. 3. Distribution 31
  32. 32. Distribution Wrapping with PhoneGap .html .css .js Wrapping Wrapping Wrapping Android App iOS App Tizen App 32
  33. 33. Tools PhoneGap The bridge between Java Script and Native. .html .css .js Native Native Native Android App iOS App Tizen App 33
  34. 34. PhoneGap:Features Many APIs are provided. Notification Network Contacts Media Camera Geolocation Compass Accelerometer File Storage 34
  35. 35. PhoneGap:Supported APIs They are different depending on platform. 35
  36. 36. PhoneGap:Code Example Sensor (Acceleration) Collaboration HTML var options = { frequency: 500 }; aSensor = navigator.accelerometer.watchAcceleration( onAccelerationSuccess, onAccelerationError, options); -Success function onAccelerationSuccess(values) { if (value > [Threshold]){ // do Translate } } -Failure Device Shaking function onAccelerationError() 36
  37. 37. PhoneGap Build Build Service on Cloud .html .css .js 37
  38. 38. PhoneGap Build 38
  39. 39. Tips 39
  40. 40. PhoneGap:Problem? Non-Supported APIs cannot be used??? Basic Features Notification Network Geolocation Contacts Accelerometer Media File Camera Storage Compass Non-Supported Features Voice Recognition TextToSpeech … 40
  41. 41. PhoneGap:Solution 1 Exploiting existing library PhoneGap Plugins (deprecated) Cordova Plugins 41
  42. 42. PhoneGap:Solution 2 Non-existing library -> Developing Original library Toast Plugin .js .java Android App .js config .xml 42
  43. 43. PhoneGap:Solution 2 Toast Plugin .js .java ToastCreator.prototype.showToast = function(successCallback, errorCallback, text) { return cordova.exec(successCallback, errorCallback, "ToastCreator", "showToast", [text]); }; public class ToastCreator extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) { Boolean isValidAction = true; if ("showToast".equals(action)) { Toast.makeText(cordova.getActivity(), args.getString(0), Toast.LENGTH_SHORT).show(); } return isValidAction; } } 43
  44. 44. PhoneGap:Solution 2 Toast Plugin Android App .js config .xml // The case of non-input text if (value == "") { ToastCreator.prototype.showToast(showToastSuccess, showToastFail, 'No Text. Please input text.'); } return; } ... <!-- Toast Plugin --> <feature name="ToastCreator"> <param name="android-package" value="org.iplatform.xos.phonegap.ToastCreator"/> </feature> 44
  45. 45. Web & Hardware Collaboration Even if it is Web app, we can do various things. 45
  46. 46. Web-Based App:Problem? User-defined JS cannot be optimized??? Uncompressed Maintenance Minified Easy Difficult (Impossible) Size Normal Minimum Purpose Debug Production 46
  47. 47. Tools Closure Compiler l A JavaScript optimizing compiler l Analyzes JS code, removes dead code and rewrites and minimizes what's left l It is used in many of Google's JavaScript apps 47
  48. 48. Web-Based App:Solution Using Compress Tools s1.js s2.js app. min.js // Initialize PhoneGap function init() { document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("backbutton", onBackPressed, false); } // BackButton Procedure function onBackPressed() { navigator.notification.confirm("Do you want to Quit?", confirmCallback, 'Confirm', 'Cancel, Quit'); } var aSensor=null;function init() {document.addEventListener("deviceready",onDeviceReady,! 1);document.addEventListener("backbutton",onBackPressed,!1)} function onBackPressed(){navigator.notification.confirm("Do you want to Quit?",confirmCallback,"Confirm","Cancel, Quit")}function confirmCallback(a){2==a&&navigator.app.exitApp()} 48
  49. 49. Chromium WebView KitKat includes Chromium-based WebView l Upgrade Performance (HTML5, CSS3, JS) l Remote Debugging (setWebContentsDebuggingEnabled) l Behavior (targetSdk:n) l n >= 19 : Chromium WebView l n < 19 : Legacy WebView KitKat (Nexus 5) 49
  50. 50. References •jQuery  http://jquery.com/ •jQuery Mobile http://jquerymobile.com/ •PhoneGap http://phonegap.com/ •PhoneGap Build https://build.phonegap.com/ •Tappable https://github.com/cheeaun/tappable •Closure Compiler https://code.google.com/p/closure-compiler/ 50
  51. 51. Thank you! •Facebook:http://fb.com/kanbara.kenichi •Google+:+Kenichi Kambara •LinkedIn:http://www.linkedin.com/in/korodroid •Twitter:@korodroid

×