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