2013.02.26 Intel Overview

04/12/2023 1

Making Native Mobile Apps with HTML5 using the

appMobi XDK

Who am I?

Andrew SmithappMobi Developer

EvangelistWeb Development

@profMobi

Who am I?

Andrew SmithappMobi Developer Evangelist

Web Development@profMobi

Brand New Intel Employee!!1!

o What is appMobi all about?o The Anatomy of an appMobi Applicationo Using the XDK Development Toolo Building a Hybrid Mobile Applicationo Preview Your App on Deviceo Building the Application in the Cloudo How to get started?

Agenda

Save questions or email them

andrew.hyde.smith@intel.com

What is appMobi all about?

04/12/2023 7

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?

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

Why Your Application Should Be HTML5 Based

Why Your Application Should Be HTML5 Based

Why Your Application Should Be HTML5 Based

On the Sidelines

One HTML5 Codebase for 1.5B+

Devices

Free XDK Development Tool

Cloud Based Build System

jqMobi

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

appMobi Cloud Services

• Over 140K Developers Using our development tools

• 60K XDK Accounts Created

• Over 6000 Apps Delivered to App stores

Facts

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 Anatomy of an appMobi

Application

• 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

• In a native hybrid application, the main library is referenced from: http://localhost:58888

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

Using the XDK Development Tool

Get the XDK

The appMobi XDK Development

Tool

XDK Version Control

Project Controls

Development Controls

XDK Resources

Account Controls

Application Simulation

Application Display

appMobi Cloud Services

Building a Hybrid Mobile

Application Using the appMobi

XDK

JavaScript API

http://www.html5dev-software.intel.com/documentation/

Librarian Application

Preview Your Application on

Device

Click the “App Tester” Link

Formerly known as “Test Anywhere"

Click the “Send App Link” Button

Send the app link to a mobile device

You have been invited to view an HTML5 project.Requirements:• A testing device: Apple iPhone, iPod Touch or iPad, or any

smartphone running Android 2.X.• You must have Intel's app.lab app installed on the testing

device. If you don't have it, you'll need to go to the App Store or Android Market and install it. Search for "applab" to find it.

• Once you have app.lab installed, please point the browser on your device to:

https://appcenter.html5tools-software.intel.com/appmobitest/amtlaunch.aspx?appname=ahs.librarian&rel=3.4.0&target=QAThen, simply hit the launch button to run the app project.

Send Invitation Email

• Install a mobile app on your device

• Go to a Web page on that device

• You are now running my app

Send Invitation Email

• Go to the App Store or Google Play 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

Building the Application in the

Cloud

Build for a variety of platforms

Click the Build Button

Select “Upload and Build”

Enter Application Details

Download or Send Completed

Application

Builds Automated After Success

How to get started

Sign up for App Dev Center

http://appcenter.html5tools-software.intel.com

Get the XDK

Write your app

Build your app using App Center

Samples

Email me and I’ll send you a link to these slides as well as all the sample code I shared with you

today.

Questions

andrew.hyde.smith@intel.com

Find more information at:

http://www.html5dev-software.intel.com/docume

ntation

04/12/2023 62

04/12/2023 63