With the addition of Microsoft's Windows 8 and Windows Phone 8 platforms to appMobi's HTML5 app platform, you can now create and deploy desktop or mobile apps to all major app stores and devices from a single JavaScript code base. The appMobi team has created Visual Studio templates supporting Windows 8 and Windows Phone 8 creation of generic apps, web apps, accelerated games, and Facebook apps.
2. Who am I?
Andrew Smith
appMobi Developer Evangelist
Web Development
@profMobi
3. Agenda
o What is appMobi all about?
o How do appMobi applications work?
o How would a mobile Web developer make an app?
o What steps are necessary to build for Windows?
o So how does appMobi make money anyway?
o Why don't you guys ask some questions?
5. 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:
HTML5 and JavaScript
12/12/2012 5
6. The appMobi
mission is to help
developers create
What does appMobi do?
awesome mobile
apps using HTML5
10. HTML5 Game Development
• Game Engine Interfaces
• directCanvas
• directBox2d
• Android Multi-Touch
• Multi-Sound
11. Cloud Services
The appMobi Cloud Services
provide enhancements for
mobile HTML5 applications
• Frictionless Payments
• Analytics
• Game Development Tools
• Over the air updates
• Push Messaging
12. Facts
• Over 130K Developers Using
our development tools
• 60K XDK Accounts Created
• Over 6000 Apps Delivered to
App stores
14. The Anatomy of an appMobi Application
• The
HTML, JavaScript, data, an
d images that make up a
tiny mobile website are
collectively known as a
“bundle”
15. The Anatomy of an appMobi Application
• All native appMobi
applications are built using
a full-screen web view
control as its UI
• This application
configuration is commonly
called a “hybrid” application
16. The Anatomy of an appMobi Application
• Features of the device itself
are accessed through
integrated JavaScript
libraries served by the
application itself
• Find the documentation for
these commands at
http://appmobi.com/documentation/jsAPI
17. 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
18. How is this different from PhoneGap?
Acceleration for games
Just the app – no extras
In App Purchasing
Push Messaging
Gamification
Analytics
More
34. What steps are necessary to build for
Windows 8 and Windows Phone 8?
35. Create a new Visual Studio 2012 Project
• Create a new Windows
Store project
36. Get a template from NuGet
• Go to NuGet and grab the
an appropriate project
template
37. Load the template
• Load the template through
the Package Manager
Window
38. Edit app.xaml.cs
• For Windows 8 Store
applications, make sure to
edit the
rootFrame.navigate
command to use the
appMobi browser object
39. Download the application bundle
• Get the application bundle
o Through the XDK
o Downloading it from appHub
40. Add the application bundle
• Copy the application bundle
into the HTML directory of
the project, making sure to
leave the _appMobi
directory intact
• Edit index.html and change
the reference to
appmobi.js to the
_appMobi directory
41. Create a new Visual Studio 2012 Project
• Create a new Windows
Phone 8 project
42. Get a template from NuGet
• Go to NuGet and grab the
an appropriate project
template
43. Load the template
• Load the template through
the Package Manager
Window
44. Edit the WMAppManifest.xml file
• For Windows Phone 8
applications, edit the
WMAppManifest.xml file to
point to AppMobiPage.xaml
instead of MainPage.xaml
45. Download the application bundle
• Get the application bundle
o Through the XDK
o Downloading it from appHub
46. Add the application bundle
• Copy the application bundle
into the HTML directory of
the project, making sure to
leave the _appMobi
directory intact
• Edit index.html and change
the reference to
appmobi.js to the
_appMobi directory
47. Reference your bundle’s files
• For Windows Phone 8
applications, edit the
AppMobiWebSource.xml
file to include a reference
to all assets that are
necessary from the bundle
48. Build and test
• Build the application and
then submit to the
appropriate app store
49. Demonstrations
• Windows 8 Store
• Windows Phone 8
I’ll make these demo apps
available to you following this
presentation
51. The appMobi “No-Lose” Guarantee
• Apps are charged by
Monthly Active User (MAU)
• Only apps that access
Cloud Services are charged
• Developers will never be
charged more than their
monetized apps are making
• http://www.appmobi.com/pricing
53. More Information
For video demonstrations of this process, find these videos on
YouTube.
• How to use Visual Studio and appMobi to port your hybrid
HTML5 app to Windows 8
• How To Create Windows Phone 8 apps
• How to do on-device testing with Windows Phone 8
• http://www.youtube.com/watch?v=x8eMev43Q3g
• http://www.youtube.com/watch?v=L_tz3juWzTk
• http://www.youtube.com/watch?v=0bgqeiD5jpY
54. Find more information at:
http://www.appmobi.com/documentation
Find out where here I’ll be next:
@profMobi
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
Created using Web technologiesBuilt for native using a cloud build systemHosted from the cloud as well
An appMobi application is powered entirely using Web technologies. This tiny mobile website is written using any tool or tools that you might want to use, and is collectively known as the “bundle”.
The application is then built by wrapping that “bundle” into a native application that simply opens a full screen web control. That allows the UI to be completely at the control of the embedded mobile website code written into the bundle. This style of application is commonly known as a “hybrid” application approach.
Furthermore, this native application wrapper includes a JavaScript library that acts as a “bridge” to access native features of the native device such as Geolocation, Contacts, and Camera.
This design allows a single bundle to be built into an application that will run on many platforms. Furthermore, appMobi goes a step further by providing the XDK tool to simulate the display and JavaScript bridge API calls, as well as a test application that may be installed to download and run your bundle from the cloud.
This cloud technology is what sets appMobi apart fromPhoneGap – our nearest competitior. While PhoneGap makes their money on their cloud build system, appMobi’s business is wrapped up in providing advanced technologies and a variety of upsells in the form of cloud services.
The appHub website is your source for creating and maintaining applications.
appHub is a single site designed to help you develop, configure services, build, and track the performance of any of your appMobi applications.
You aren’t required to use the XDK to build your application. However, as a design and testing tool it is valuable to the Web designer for creating UI and exercising the JavaScript API bridge. The XDK is available as an extension from the Chrome Web Store.
Here is a nickel tour of the XDK. Use it to set up the layout of your UI and prototype early features of your application that rely on the JavaScript API to access native functionality.
Updated over the Internet
As I mentioned before, applications are saved at the cloud for testing and delivery purposes.
View code, test, and build
Documentation site
Account settings (used with appHub)
Simulators
Accurate representations of the result are shown right on the screen.
The cloud services themselves
Finally, once the bundle is built it is built from our web-based automated build system named appHub. Again, the XDK is not required to build but it is built in.CredentialsAssetsText Names and Descriptions
Ultimately we would like to add Windows Store 8 and Windows Phone 8 builds available in appHub