Microsoft hackathon presentation 2013.02.15

04/18/2023 1

Building Apps Using appMobi

Who am I?

Andrew SmithappMobi Developer Evangelist

Web Development@profMobi

o What is appMobi all about?o What makes an appMobi app tick?o How do I make an app?o How do I make a Windows app?o Where do I get started?

Agenda

Hackathon Questions

[email protected]

What is appMobi all about?

04/18/2023 6

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

Make Native Apps Using HTML5

Build your appswith these

Distribute your apps here

One HTML5 Codebase for 1.5B+

Deviceshttp://www.appmobi.com/boomtown

Free XDK Development Tool

Cloud Based Build System –

appHub

jqMobi

• Game Engine Interfaces• directCanvas• directBox2d physics• 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

100’s of Publishers Using HTML for Native Apps

What makes an appMobi

application tick?

• 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

• 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

• 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 do I make an app?

Write your code

Test your code in the XDK

Preview your app on device

• Go to the App Store or Android Market and install the appLab application

• Find it in the app store by doing a search for “appLab”

Install the appLab application

• Open the application link in your mobile web browser to get the launch page

• Touch Launch to see your application run just as it will when you build a binary

Open the link on the device’s web

browser

Build your appLog into appHub

Build your app

What steps are necessary to

build for Windows 8 and

Windows Phone 8?

The build process for Windows 8 and Windows Phone 8 are currently under construction

Here’s how you can build them yourself right now

Windows Build

I’ll make these demo apps available to

you following this

presentation

Demonstration

First we’ll build an appMobi app for Windows 8 Store

Windows 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

Wrangle your 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

• Build the application and then submit to the Windows 8 App Store

Build and test

Now to build for Windows Phone 8

Windows Phone 8

• 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

Where do I get started?

Get the XDK

Watch Videos

Read Articles

Grab Samples

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

I’ll put a link to this presentation and demo apps

on my Twitter feed shortly

Demo Apps

@profMobi

Hackathon Questions

[email protected]

Find more information at:

http://www.appmobi.com/documenta

tion

Find out where here I’ll be next:

@profMobi

04/18/2023 58