microsoft hackathon presentation 2013.02.15
TRANSCRIPT
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
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
Find more information at:
http://www.appmobi.com/documenta
tion
Find out where here I’ll be next:
@profMobi
04/18/2023 58