Bridging the Gap: from a Web App to a Mobile Device App

Transcription

1 Bridging the Gap: from a Web App to a Mobile Device App or, so how does this PhoneGap* stuff work? *Other names and brands may be claimed as the property of others. 1

2 Users Want Mobile Apps, Not Mobile Websites 2

3 Why Mobile Apps, Rather than Mobile Websites? 3

4 State of the Smartphone Market Strategy Analytics, Global Smartphone OS Market Shares by Region, Q4 2012, Feb 13 4

5 And if You re in It for the Money 5

6 So What Does it Take to Build an App? 6

7 Creating Conventional Native Apps Sorry for these very bad graphics! 7

8 Means Working Inside Walled Gardens Sorry for these extremely bad graphics! 8

9 What s Common Across these Platforms? Development model APIs Architecture support OEM and service provider support Device categories supported Apple* ios* Closed, controlled by Apple Objective C; HTML5 in browser; hybrid Blackberry* Closed, controlled by Blackberry C/C++; HTML5; hybrid; Java Google* Android* Platform code released to open source after first commercial device ships; key pieces are Google proprietary Java; restricted C/C++; HTML5 in browser; hybrid Microsoft* Windows* Phone Closed, controlled by Microsoft C/C++; managed (C#, JavaScript); HTML5 with Microsoft extensions Mozilla* Firefox* OS Open source, code released during development; controlled by Mozilla HTML5 only with Mozilla extensions Tizen* Open source, code released during development. Controlled by Tizen TSG, cochaired by Intel and Samsung HTML5 with Tizen extensions; C/C++ ARM only ARM only ARM and x86 ARM only ARM only ARM and x86 Leading OEM, broad SP support Smartphone, tablet, TV 1 OEM, good SP support Smartphone, tablet Many OEMs, broad SP support Smartphone, tablet, TV Many OEMs, broad SP support Smartphone, tablet Limited OEMs, good SP support Entry smartphone Supported by leading OEM, good SP support Smartphone, tablet IVI, TV, PC 9

10 Can You Create Native Apps from Web Apps? 10

11 Web vs. Hybrid vs. HTML5 Applications Today Tomorrow Web App limited sensor input Hybrid App full sensor input HTML5 App full device access Runs w/o network Yes Yes Yes Flexible Layout Yes Yes Yes Device APIs Limited Mostly Complete Distribution URL Native Binary URL/WGT Cross Platform Yes Yes & No Yes Runs in Browser Yes No No Runs in Web Runtime No Yes Yes the HTML5 standard is evolving to include device APIs 11

12 Use HTML/CSS/JS for UI and Program Logic 12

13 and /fōn gap/ for Device Feature Access 13

14 /fōn gap/ is a Cross Platform Tool (CPT) 14

15 /fōn gap/ is NOT a magic elixir won t auto-magically make your app aware of device features a compiler or translator does not convert HTML5 code into native code a browser bundler does not bundle a browser with your application not like Chrome Embedded Framework (aka CEF) or Node-Webkit» it is not the same as using tools like: Appcelerator* Mosync* Marmalade* Xamarin* et al 15

16 Apache Cordova* Essentials pronounced /fōn gap/ PhoneGap* is a trademark of Adobe* Adobe* PhoneGap* is a distribution of Apache Cordova* *Other names and brands may be claimed as the property of others. 16

17 Apache Cordova (/fōn gap/) Device APIs Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage 17

18 Apache Cordova (/fōn gap/) API Sampling Accelerometer navigator.accelerometer.getcurrentacceleration(accsuccess,accerror); var watchid = navigator.accelerometer.watchacceleration(accsuccess,accerror,[accoptions]); navigator.accelerometer.clearwatch(watchid); Camera navigator.camera.getpicture(camerasuccess,cameraerror,[cameraoptions]); navigator.camera.cleanup(camerasuccess,cameraerror); Compass navigator.compass.getcurrentheading(compasssuccess,compasserror,compassoptions); var watchid = navigator.compass.watchheading(compasssuccess,compasserror,[coptions]); navigator.compass.clearwatch(watchid); Geolocation navigator.geolocation.getcurrentposition(geosuccess,[geoerror],[geooptions]); var watchid = navigator.geolocation.watchposition(geosuccess,[geoerror],[geooptions]); navigator.geolocation.clearwatch(watchid); ref: 18

19 Apache Cordova Platform Support Levels Core primary platforms supported by Apache Cordova ios Android BlackBerry Windows Phone & Windows 8 Horizon some level of support, future core support candidates Tizen Qt Firefox OS Ubuntu Mobile (Qt) Windows Desktop (Win32) Sunset code available, but no distribution of these platforms Symbian webos Bada ref: 19

20 Apache Cordova Method of Operation Write your HTML5 web app using HTML/CSS/JavaScript Open a native web-view inside a native app Package your web app inside that native web-view Deploy your web app as a hybrid native app ref: 20

21 Apache Cordova Application Block Diagram cordova.js Your Web App cordova plugins Native Web Runtime System Services Operating System Mobile Device Hardware 21

22 Just Think of it as a Tasty Black and Tan Web App Stuff (stout) Native App Stuff (pale ale) /fōn gap/ stuff (if you don t like beer, think of it as an Arnold Palmer ) 22

23 Where Does One Start?

24 Learn to use Android, Xcode and VS 12 SDKs!? 24

25 Learn to use Android, Xcode and VS 12 SDKs!? 25

26 Online HTML5 Mobile App Build Services Adobe* PhoneGap* Build* Intel XDK Tiggzi* Mobile App Builder* Trigger.io* ApplicationCraft* et al Build services may not be interoperable! 26

27 Online Build Supported Platforms ios* Android* Windows* Phone 7 Blackberry* WebOS* Symbian* Tizen* Windows* 8 Adobe* PhoneGap* Build* Intel XDK (soon) (soon) Other Options (typical) 27

28 Android SDK and /fōn gap/ Project Example 28

29 HTML5 Device App on My Local Disk config.xml gives directions to the build process 29

30 HTML5 Device App in an Android APK an APK is just a zip file build process adds some /fōn gap/ specific files 30

31 HTML5 Device App in a Windows Phone XAP an XAP is also just a zip file some of the native wrapper bits in a Windows Phone app 31

32 Load Your Script Files Locally, Not via a CDN 32

33 Inside a Browser vs. Inside a WebView 33

34 PhoneGap Plugins ref: 34

35 ios /fōn gap/ Plugins 35

36 Android /fōn gap/ Plugins 36

37 And a Few Other Platforms 37

38 Debug Using Intel XDK Device Emulator 38

39 Debug Using Intel XDK Device Emulator 39

40 Debug Using Apache* Ripple* Device Emulator 40

41 Debug Using Apache* Ripple* Device Emulator 41

42 HTML5 Device Application Challenges App Store Fragmentation Performance Debugging Testing Device APIs Security etc. 42

43 HTML5 Trades Optimization for Portability 43

44 Why Does Intel Love HTML5? HTML5 is advanced Intel takes HTML5 further with new APIs and Parallel JavaScript HTML5 is open Intel advances HTML5 via open source projects and the W3C HTML5 is everywhere Intel supports HTML5 developers with new tools and communities Learn more at software.intel.com/html5 44

45 Taking HTML5 Further W3C HTML WG HTML5 core, elements, layouts, DOM W3C Device API WG Enable web application interaction with device HW, services, and applications W3C Web Applications WG Improve client-side application development on the web W3C WebApp Security WG Security and policy mechanisms to improve security of web applications 2 Intel members W3C Web Cryptography WG Define cryptography APIs to provide common functionality to web applications W3C Web Performance WG Enhance application performance of user agent features and APIs W3C CSS WG Develop and maintain cascading style sheets 3 Intel members W3C System Applications WG Define runtime environment, security model and associated APIs to build web apps similar to native W3C Tracking Protection WG Improve privacy and user control Add more advanced audio capabilities, such as the processing and synthesis of audio streams Develop ways for web pages to interact with NFC devices ** Partial List as of January, 2013 W3C Audio WG W3C NFC WG W3C Browser Testing and Tools Develop technologies for use in testing, debugging, and troubleshooting of web applications 45

46 Leading Open Source Contributor 46

47 software.intel.com/html5 47

48