Intel XDK

Presentation of the XDK, used to create hybrid mobile apps.

Transcript

1. Intel XDK Intel XDK - https://slid.es/r0ly/intel-xdk/ https://github.com/OlivierGonthier/webpx
2. About Me About Me Gonthier Olivier ( Gonthier Olivier ( ) ) @rolios @rolios Freelance polyglot developer Editor InfoQ France Work at Orange-Vallée on Libon
3. Why HTML5 on Mobile? Why HTML5 on Mobile? Common base to all mobile OS Possibility to deploy one app on multiple OS Large community But... HTML5 Spec not final (but almost) Different support on various OS Hard to get same performances as native apps
4. Native/Web/Hybrid Apps Native/Web/Hybrid Apps
5. XDK IS... XDK IS... A set of Tools Code Editor Assets manager App designer Emulator Debugger Packager
6. XDK IS... XDK IS... A set of APIs Cordova AppFramework XDK AppMobi
7. XDK IS... XDK IS... Supporting multiple Frameworks jQueryMobile AppFramework Twitter Bootstrap 3 Topcoat
8. XDK is... XDK is... Supporting multiple game engines Cocos2d EaselJS Phaser Pixi
9. XDK is... XDK is... Supporting many services! Dropbox, Youtube, Flickr... Twitter, Facebook, Github... AppMobi (push, ad, ...)
10. XDK IS... XDK IS... A convenient way to build Apps iOs Android Android Crosswalk Windows phone 8 Tizen Amazon Nook Windows 8 Chrome Facebook Firefox Generic WebApp
11. XDK IS... XDK IS... Based on well-known tools Brackets (Editor) Ripple (Emulator) Chrome debug tools (Debug console) Cordova (Native Wrapper/Packager)
12. XDK Architecture XDK Architecture
13. XDK Tools XDK Tools Edit code using Brackets
14. XDK Tools XDK Tools Editor Code and file path Completion Quick documentation Integration of JSLint You can also use your own editor!
15. XDK Tools XDK Tools Manage your game assets
16. XDK Tools XDK Tools Assets manager Manage your game assets (import, arrange, search) Many formats supported (plist, gif, etc.) View animations Expand animations Find more here
17. XDK Tools XDK Tools Integrate services
18. XDK Tools XDK Tools Integrate services directly, bind events Choose services you want to use Select part of the payload that interest you Bind data with a MVC framework AngularJS Backbone
19. XDK Tools XDK Tools Design your interfaces
20. XDK Tools XDK Tools Design your interfaces Handle media-queries easily Provides lot of widgets, layouts etc. Customize your navigation bars Themes
21. XDK Tools XDK Tools Emulate, debug and profile
22. XDK Tools XDK Tools Emulate, debug and profile You can deploy on device also Debugging/profiling remotely Emulation mock Geolocation Network/data Accelerometer DOM events <3 Chrome debug tools
23. XDK Tools XDK Tools Build
24. XDK Tools XDK Tools Building At this step you configure your app Icon Permissions Target OS versions Title Package name ... Note: After a build you automatically receive a mail with a link to download your app
25. XDK Tools XDK Tools Use App Preview Upload code in cloud Test on your device from cloud Run demos
26. XDK APIs XDK APIs XDK itself 1. Add <script src="intelxdk.js" /> 2. Wait for intel.xdk.device.ready 3. Have fun with object intel.xdk
27. XDK APIs XDK APIs XDK itself This Javascript Api cover lot of stuff: Accelerometer Cache Camera Canvas Geolocation Contacts Player OAuth ... Check documentation
28. XDK APIs XDK APIs XDK itself Let's take a photo for example! intel.xdk.camera.takePicture(50,false,"jpg"); document.addEventListener("intel.xdk.camera.picture.add", function(e){ var imgUrl = intel.xdk.camera.getPictureURL(e.filename); document.getElementById('picturePlace').url = imgUrl; }); Take a look at to understand parameters method documentation
29. XDK APIs XDK APIs App Framework Query Selector and UI Widgets Similar (but different) to jQuery Nice to get quickly basic interfaces Interface designer really help us Open-source!
30. XDK APIs XDK APIs App Framework Use $ to make selection queries (Just like jQuery) $("#myButton").click(myFunction); $(document.body).append($("<div>")); $([1,2,3]).each(multiplyFunction); Use $.ui to interacts with UI $.ui.showBackButton = false; $.ui.loadContent("#mySecondPage", false, false, "pop"); $.ui.toggleSideMenu(); $.ui.useOsThemes = false; Check documentation
31. Crosswalk Crosswalk Embedded Runtime for Android 4+ Better performances, more APIs! WebGL, WebRTC! Perfect for games, and Open-Source
32. Crosswalk Crosswalk Usage Well, nothing complicated: 1. Use html5 standard objects in your code 2. Choose "Crosswalk" when building
33. Want to start now? Want to start now? , it's free! Download xdk Then create a project: Select "Start With App Designer" to use UI Framework supported Or take a look at Demos!
34. Thanks for listening! Thanks for listening! Questions? Questions? @rolios @rolios https://slid.es/r0ly/intel-xdk Please share!
35. Bonus Bonus XDK IoT version let you build IoT objects! https://software.intel.com/en-us/html5/xdk-iot