This slideshow outlines what appMobi does in some broad strokes and then goes into more detail about the gaming features that appMobi gives to HTML5 gaming.

1. 10/26/2012 1

2. Who am I?
Andrew Smith
appMobi Developer Evangelist
Web Development
@profMobi

3. • What is appMobi all about?
• What is the anatomy of an appMobi app?
• What free stuff does appMobi offer?
• What is in it for appMobi?
• What was that about HTML5 gaming?

4. 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
10/26/2012 4

5. As a company,
appMobi endeavors
to be a leader in appMobi do?
What does
HTML5 mobile
technologies

6. The Opportunity
Desktop Mobile
• 1 Billion Units • 10 Billion+ Units
• Trending away from Apps • Trending towards Apps
• 100 Million+ Web Sites • 300,000 Mobile Apps,
few mobile web sites
What if your application could use the same
technology for both mobile web sites
and native apps?
10/26/2012 6

7. Why Your Application Should Be HTML5 Based
On the Sidelines
10/26/2012 7

8. HTML5 Enables Publishers to
Create Great Mobile Apps!
• It’s the obvious solution – enable
apps to be written in standard
HTML and JavaScript.
• Can be used to write mobile web-
sites and true native apps using
appMobi.
• Every major player in mobile is
investing heavily in HTML5 and
optimized JavaScript engines.
• HTML5 Animation &
Super-optimized JavaScript
engines = great apps.
• Capable of doing much more on
mobile than on desktop web sites
10/26/2012 8

9. 100’s of Publishers Using HTML for Native Apps
Indie Games 10/26/2012 9

10. The Anatomy of an appMobi
Application

11. The Anatomy of an appMobi Application
• All appMobi Native Mobile
applications are “hybrid”
applications.
• They run natively, and may
be loaded from the device’s
native application store.
• They are programmed
using HTML5 technology
and then compiled.
• An appMobi app may be
built yourself or by our build
system

12. 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
• The HTML, JavaScript,
data, and images that
make up that tiny website
are collectively known as a
“bundle”

13. 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
• The main library is
referenced from:
http://localhost:58888/_
appMobi/appmobi.js

14. 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

15. Free Tools

16. The appMobi XDK Development Tool

17. JavaScript API
http://www.appmobi.com/documentation

18. The appStarter App Template Generator

19. jqMobi

20. Preview your Application on Device

21. Send the app link to your mobile device

22. Install the appLab application
• Go to the App Store or
Android Market and install
it.
• Search for "applab" to find
it.

23. 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.

24. Cloud Based Build System – appHub

25. Build your Application

26. Select “Upload and Build”

27. Enter Application Details

28. Download or Send Completed Application

29. Builds Automated After Success

30. debugMobi

31. HTML5 Game Development

32. HTML5 Game Development
• directCanvas
• directBox2D
• Android Multi-Touch
• Multi-Sound

33. directCanvas

34. directCanvas
Pros Cons
• Accelerates sprites built • Two contexts for canvas
using the HTML5 canvas and HTML can cause a
tag on iOS and Android bottleneck
• No need to compile your • CSS background images
application a particular way may not be used
to take advantage of the • Any commands not built
acceleration into the context will crash
• Regular canvas tag an application built with
commands are used directCanvas

35. directCanvas
• HTML5 context is above the
directCanvas context
• Sending information back and
forth between both contexts
• Make sure to use the present
command to see anything
• Commands that aren’t supported
in the directCanvas context can
crash the app

36. directBox2D

37. Android Multi-Touch

38. Multi-Sound

39. Cloud Services

40. Cloud Services
The appMobi Cloud Services
provide enhancements for
mobile HTML5 applications
• Frictionless Payments
• Push Messaging
• Analytics
• Game Development Tools
• Over the air updates

41. Show and Tell

42. Sample Code

43. Find more information at:
http://www.appmobi.com/documentation
Where I’ll be next:
@profMobi