2013.02.26 Intel Overview
•Download as PPTX, PDF•
1 like•729 views
The document discusses using the appMobi XDK tool to create hybrid mobile apps with HTML5. It describes appMobi's mission to allow web developers to create native mobile apps using HTML5 and JavaScript. The anatomy of an appMobi app is explained as a web view containing HTML/JS code accessed by device APIs. The presentation demonstrates using the XDK to build, preview, and deploy an app to devices or the cloud for different platforms.
Report
Share
2013.02.26 Intel Overview
- 1. Making Native Mobile Apps with HTML5 using the appMobi XDK 2/26/2013 1
- 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
- 3. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi Brand New Intel Employee!!1!
- 4. Agenda o What is appMobi all about? o The Anatomy of an appMobi Application o Using the XDK Development Tool o Building a Hybrid Mobile Application o Preview Your App on Device o Building the Application in the Cloud o How to get started?
- 5. Save questions or email them andrew.hyde.smith@intel.com
- 6. What is appMobi all about?
- 7. Mission: To unify the technologies used in delivering web and mobile apps, simplifying the process of development and resulting in a new class of creative and compelling native mobile apps and interactive ads. Strategy: Offer a cloud-based, white-label platform that opens up the world of cross-device native mobile app creation to web developers, using familiar languages and tools: HTML and JavaScript 2/26/2013 7
- 8. The appMobi mission is to help developers create What does appMobi do? awesome mobile apps using HTML5
- 9. Make Native Apps Using HTML5 Build your apps with these Distribute your apps here
- 10. Why Your Application Should Be HTML5 Based
- 11. Why Your Application Should Be HTML5 Based
- 12. Why Your Application Should Be HTML5 Based On the Sidelines
- 13. One HTML5 Codebase for 1.5B+ Devices
- 14. Free XDK Development Tool
- 15. Cloud Based Build System
- 16. jqMobi
- 17. HTML5 Game Development • Game Engine Interfaces • directCanvas • Android Multi-Touch • Multi-Sound
- 18. appMobi Cloud Services The appMobi Cloud Services provide enhancements for mobile HTML5 applications • Frictionless Payments • Analytics • Game Development Tools • Over the air updates • Push Messaging
- 19. Facts • Over 140K Developers Using our development tools • 60K XDK Accounts Created • Over 6000 Apps Delivered to App stores
- 20. The Anatomy of an appMobi Application
- 21. The Anatomy of an appMobi Application • All appMobi applications are built using a full-screen web view control as its UI • The web programming that makes the application is simply a tiny website
- 22. The Anatomy of an appMobi Application • The HTML, JavaScript, data, and images that make up that tiny website are collectively known as a “bundle”
- 23. The Anatomy of an appMobi Application • Features of the device itself are accessed through integrated JavaScript libraries served up by a tiny webserver in the application itself • In a native hybrid application, the main library is referenced from: http://localhost:58888
- 24. The Anatomy of an appMobi Application • The “bundle” is tested by loading it into either the XDK or a test application over the Internet • Once the application is ready for production, it would be built into its own mobile application for distribution through the appropriate application stores
- 25. Using the XDK Development Tool
- 26. Get the XDK
- 27. The appMobi XDK Development Tool
- 29. Project Controls
- 31. XDK Resources
- 32. Account Controls
- 36. Building a Hybrid Mobile Application Using the appMobi XDK
- 37. JavaScript API http://www.html5dev- software.intel.com/documentation/
- 39. Preview Your Application on Device
- 40. Click the “App Tester” Link Formerly known as “Test Anywhere"
- 41. Click the “Send App Link” Button
- 42. Send the app link to a mobile device
- 43. Send Invitation Email You have been invited to view an HTML5 project. Requirements: • A testing device: Apple iPhone, iPod Touch or iPad, or any smartphone running Android 2.X. • You must have Intel's app.lab app installed on the testing device. If you don't have it, you'll need to go to the App Store or Android Market and install it. Search for "applab" to find it. • Once you have app.lab installed, please point the browser on your device to: https://appcenter.html5tools- software.intel.com/appmobitest/amtlaunch.aspx?appname=ahs.libr arian&rel=3.4.0&target=QA Then, simply hit the launch button to run the app project.
- 44. Send Invitation Email • Install a mobile app on your device • Go to a Web page on that device • You are now running my app
- 45. Install the appLab application • Go to the App Store or Google Play and install it. • Search for "applab" to find it.
- 46. Open the link on the device’s web browser • Open the application link in your web browser to get the launch page. • Touch Launch to see your application.
- 47. Building the Application in the Cloud
- 48. Build for a variety of platforms
- 49. Click the Build Button
- 50. Select “Upload and Build”
- 52. Download or Send Completed Application
- 53. Builds Automated After Success
- 54. How to get started
- 55. Sign up for App Dev Center http://appcenter.html5tools- software.intel.com
- 56. Get the XDK
- 57. Write your app
- 58. Build your app using App Center
- 59. Samples Email me and I’ll send you a link to these slides as well as all the sample code I shared with you today.
- 61. Find more information at: http://www.html5dev-software.intel.com/documentation
- 62. 2/26/2013 62
- 63. 2/26/2013 63
Editor's Notes
- All the cool kids are doing it
- Let’s turn Mobile Web developers into Mobile App developers.45K iOS Developers
- Show them the XDK really quickly here with the test app
- Build native mobile appsBuild mobile web appsUsing one codebaseFor free
- Impact, Construct2OurdirectCanvas accelerates <canvas> calls – uses Open GL for iOSOur directBox2d accelerates physics calculationsActivates multi-touch on Android devicesGives the ability to play multiple sounds rather than relying on the HTML5 <sound> tag
- All activated just by including appropriate JavaScript libraries