Upload
andrew-smith
View
1.618
Download
2
Embed Size (px)
DESCRIPTION
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.
Citation preview
04/11/2023 1
Who am I?
Andrew SmithappMobi Developer Evangelist
Web Development@profMobi
• 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?
04/11/2023 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
What does appMobi do?
As a company, appMobi endeavors to be a leader in HTML5 mobile technologies
Desktop Mobile
04/11/2023 6
• 1 Billion Units• Trending away from
Apps• 100 Million+ Web Sites
• 10 Billion+ Units• Trending towards Apps• 300,000 Mobile Apps,
few mobile web sites
The Opportunity
What if your application could use the same technology for both mobile
web sites and native apps?
04/11/2023 7
Why Your Application Should Be HTML5 Based
On the Sidelines
04/11/2023 8
• 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
HTML5 Enables Publishers to Create Great Mobile Apps!
04/11/2023 9
100’s of Publishers Using HTML for Native Apps
Indie Games
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
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”
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
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
The Anatomy of an appMobi
Application
Free Tools
The appMobi XDK Development
Tool
JavaScript API
http://www.appmobi.com/documentation
The appStarter App Template
Generator
jqMobi
Preview your Application on Device
Send the app link to your mobile device
• Go to the App Store or Android Market and install it.
• Search for "applab" to find it.
Install the appLab application
• Open the application link in your web browser to get the launch page.
• Touch Launch to see your application.
Open the link on the device’s web
browser
Cloud Based Build System –
appHub
Build your Application
Select “Upload and Build”
Enter Application Details
Download or Send Completed
Application
Builds Automated After Success
debugMobi
HTML5 Game Development
• directCanvas• directBox2D• Android Multi-Touch• Multi-Sound
HTML5 Game Development
directCanvas
Pros Cons
• Accelerates sprites built using the HTML5 canvas tag on iOS and Android
• No need to compile your application a particular way to take advantage of the acceleration
• Regular canvas tag commands are used
• Two contexts for canvas and HTML can cause a bottleneck
• CSS background images may not be used
• Any commands not built into the context will crash an application built with directCanvas
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
directCanvas
directBox2D
Android Multi-Touch
Multi-Sound
Cloud Services
The appMobi Cloud Services provide enhancements for mobile HTML5 applications• Frictionless Payments• Push Messaging• Analytics• Game Development
Tools• Over the air updates
Cloud Services
Show and Tell
Sample Code
Find more information at:
http://www.appmobi.com/documenta
tion
Where I’ll be next:
@profMobi