This presentation was made to the other members of the

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

28. XDK Version Control

29. Project Controls

30. Development Controls

31. XDK Resources

32. Account Controls

33. Application Simulation

34. Application Display

35. appMobi Cloud Services

36. Building a Hybrid Mobile Application
Using the appMobi XDK

37. JavaScript API
http://www.html5dev-
software.intel.com/documentation/

38. Librarian Application

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”

51. Enter Application Details

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.

60. Questions
andrew.hyde.smith@intel.com

61. Find more information at:
http://www.html5dev-software.intel.com/documentation

62. 2/26/2013 62

63. 2/26/2013 63