Upload
andrew-smith
View
1.638
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
04/11/2023 1
Building Win 8 and WP8 Apps Using appMobi
Who am I?
Andrew SmithappMobi Developer Evangelist
Web Development@profMobi
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?
Agenda
What is appMobi all about?
04/11/2023 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
What does appMobi do?
The appMobi mission is to help developers create awesome mobile apps using HTML5
Free XDK Development Tool
Cloud Based Build System –
appHub
jqMobi
• Game Engine Interfaces• directCanvas• directBox2d• Android Multi-Touch• Multi-Sound
HTML5 Game Development
The appMobi Cloud Services provide enhancements for mobile HTML5 applications• Frictionless Payments• Analytics• Game Development
Tools• Over the air updates• Push Messaging
Cloud Services
• Over 130K Developers Using our development tools
• 60K XDK Accounts Created
• Over 6000 Apps Delivered to App stores
Facts
How do appMobi applications
work?
• The HTML, JavaScript, data, and images that make up a tiny mobile website are collectively known as a “bundle”
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
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
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
How is this different from
PhoneGap?
Acceleration for gamesIn App PurchasingPush Messaging
GamificationAnalytics
More
Just the app – no extras
How would a mobile Web
developer make an app?
Sign up for a free appHub account
http://apphub.appmobi.com
What is appHub?
Write your app
Get the XDK
The appMobi XDK Development
Tool
XDK Version Control
Project Controls
Development Controls
XDK Resources
Account Controls
Application Simulation
Application Display
Cloud Services
Build your app using appHub
What steps are necessary to
build for Windows 8 and
Windows Phone 8?
• Create a new Windows Store project
Create a new Visual Studio 2012
Project
• Go to NuGet and grab the an appropriate project template
Get a template from NuGet
• Load the template through the Package Manager Window
Load the template
• For Windows 8 Store applications, make sure to edit the rootFrame.navigate command to use the appMobi browser object
Edit app.xaml.cs
• Get the application bundleo Through the XDKo Downloading it from appHub
Download 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
Add the application bundle
• Create a new Windows Phone 8 project
Create a new Visual Studio 2012
Project
• Go to NuGet and grab the an appropriate project template
Get a template from NuGet
• Load the template through the Package Manager Window
Load the template
• For Windows Phone 8 applications, edit the WMAppManifest.xml file to point to AppMobiPage.xaml instead of MainPage.xaml
Edit the WMAppManifest.xml file
• Get the application bundleo Through the XDKo Downloading it from appHub
Download 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
Add the application bundle
• For Windows Phone 8 applications, edit the AppMobiWebSource.xml file to include a reference to all assets that are necessary from the bundle
Reference your bundle’s files
• Build the application and then submit to the appropriate app store
Build and test
• Windows 8 Store• Windows Phone 8
I’ll make these demo apps available to you
following this presentation
Demonstrations
So how does appMobi make
money anyway?
• 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
The appMobi “No-Lose” Guarantee
Why don't you guys ask some
questions?
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
More Information
Find more information at:
http://www.appmobi.com/documenta
tion
Find out where here I’ll be next:
@profMobi
04/11/2023 55