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