Building Win 8 and WP8 Apps        Using appMobi                         12/12/2012   1
Who am I?        Andrew Smith  appMobi Developer Evangelist      Web Development          @profMobi
Agendao   What is appMobi all about?o   How do appMobi applications work?o   How would a mobile Web developer make an app?...
What is appMobi all about?
Mission:     To unify the technologies used in delivering web and mobileapps, simplifying the process of development and r...
The appMobimission is to helpdevelopers create      What does appMobi do?awesome mobileapps using HTML5
Free XDK Development Tool
Cloud Based Build System – appHub
jqMobi
HTML5 Game Development•   Game Engine Interfaces•   directCanvas•   directBox2d•   Android Multi-Touch•   Multi-Sound
Cloud ServicesThe appMobi Cloud Servicesprovide enhancements formobile HTML5 applications• Frictionless Payments• Analytic...
Facts• Over 130K Developers Using  our development tools• 60K XDK Accounts Created• Over 6000 Apps Delivered to  App stores
How do appMobi applications work?
The Anatomy of an appMobi Application• The  HTML, JavaScript, data, an  d images that make up a  tiny mobile website are  ...
The Anatomy of an appMobi Application• All native appMobi  applications are built using  a full-screen web view  control a...
The Anatomy of an appMobi Application• Features of the device itself  are accessed through  integrated JavaScript  librari...
The Anatomy of an appMobi Application• The “bundle” is tested by  loading it into either the  XDK or a test application  o...
How is this different from PhoneGap?                           Acceleration for gamesJust 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 forWindows 8 and Windows Phone 8?
Create a new Visual Studio 2012 Project                    • Create a new Windows                      Store project
Get a template from NuGet             • Go to NuGet and grab the               an appropriate project               template
Load the template         • Load the template through           the Package Manager           Window
Edit app.xaml.cs        • For Windows 8 Store          applications, make sure to          edit the          rootFrame.nav...
Download the application bundle                • Get the application bundle                   o Through the XDK           ...
Add the application bundle             • Copy the application bundle               into the HTML directory of             ...
Create a new Visual Studio 2012 Project                    • Create a new Windows                      Phone 8 project
Get a template from NuGet             • Go to NuGet and grab the               an appropriate project               template
Load the template         • Load the template through           the Package Manager           Window
Edit the WMAppManifest.xml file                • For Windows Phone 8                  applications, edit the              ...
Download the application bundle                • Get the application bundle                   o Through the XDK           ...
Add the application bundle             • Copy the application bundle               into the HTML directory of             ...
Reference your bundle’s files               • For Windows Phone 8                 applications, edit the                 A...
Build and test       • Build the application and         then submit to the         appropriate app store
Demonstrations• Windows 8 Store• Windows Phone 8 I’ll make these demo appsavailable to you following this         presenta...
So how does appMobi make money           anyway?
The appMobi “No-Lose” Guarantee                • Apps are charged by                  Monthly Active User (MAU)           ...
Why dont you guys ask some        questions?
More Information For video demonstrations of this process, find these videos on                          YouTube.• How to ...
Find more information at:http://www.appmobi.com/documentation   Find out where here I’ll be next:                @profMobi
12/12/2012   55
Upcoming SlideShare
Loading in...5
×

Building Win 8 and WP8 Apps Using appMobi

1,684

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,684
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Build native mobile appsBuild mobile web appsUsing one codebaseFor free
  • Impact, Construct2OurdirectCanvas accelerates <canvas> calls – uses Open GL for iOSOur directBox2d accelerates physics calculationsActivates multi-touch on Android devicesGives the ability to play multiple sounds rather than relying on the HTML5 <sound> tag
  • All activated just by including appropriate JavaScript libraries
  • Created using Web technologiesBuilt for native using a cloud build systemHosted from the cloud as well
  • An appMobi application is powered entirely using Web technologies. This tiny mobile website is written using any tool or tools that you might want to use, and is collectively known as the “bundle”.
  • The application is then built by wrapping that “bundle” into a native application that simply opens a full screen web control. That allows the UI to be completely at the control of the embedded mobile website code written into the bundle. This style of application is commonly known as a “hybrid” application approach.
  • Furthermore, this native application wrapper includes a JavaScript library that acts as a “bridge” to access native features of the native device such as Geolocation, Contacts, and Camera.
  • This design allows a single bundle to be built into an application that will run on many platforms. Furthermore, appMobi goes a step further by providing the XDK tool to simulate the display and JavaScript bridge API calls, as well as a test application that may be installed to download and run your bundle from the cloud.
  • This cloud technology is what sets appMobi apart fromPhoneGap – our nearest competitior. While PhoneGap makes their money on their cloud build system, appMobi’s business is wrapped up in providing advanced technologies and a variety of upsells in the form of cloud services.
  • The appHub website is your source for creating and maintaining applications.
  • appHub is a single site designed to help you develop, configure services, build, and track the performance of any of your appMobi applications.
  • You aren’t required to use the XDK to build your application. However, as a design and testing tool it is valuable to the Web designer for creating UI and exercising the JavaScript API bridge. The XDK is available as an extension from the Chrome Web Store.
  • Here is a nickel tour of the XDK. Use it to set up the layout of your UI and prototype early features of your application that rely on the JavaScript API to access native functionality.
  • Updated over the Internet
  • As I mentioned before, applications are saved at the cloud for testing and delivery purposes.
  • View code, test, and build
  • Documentation site
  • Account settings (used with appHub)
  • Simulators
  • Accurate representations of the result are shown right on the screen.
  • The cloud services themselves
  • Finally, once the bundle is built it is built from our web-based automated build system named appHub. Again, the XDK is not required to build but it is built in.CredentialsAssetsText Names and Descriptions
  • Ultimately we would like to add Windows Store 8 and Windows Phone 8 builds available in appHub
  • Let’s try it with Windows Phone 8 this time
  • Building Win 8 and WP8 Apps Using appMobi

    1. 1. Building Win 8 and WP8 Apps Using appMobi 12/12/2012 1
    2. 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
    3. 3. Agendao 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 dont you guys ask some questions?
    4. 4. What is appMobi all about?
    5. 5. Mission: To unify the technologies used in delivering web and mobileapps, 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 12/12/2012 5
    6. 6. The appMobimission is to helpdevelopers create What does appMobi do?awesome mobileapps using HTML5
    7. 7. Free XDK Development Tool
    8. 8. Cloud Based Build System – appHub
    9. 9. jqMobi
    10. 10. HTML5 Game Development• Game Engine Interfaces• directCanvas• directBox2d• Android Multi-Touch• Multi-Sound
    11. 11. Cloud ServicesThe appMobi Cloud Servicesprovide enhancements formobile HTML5 applications• Frictionless Payments• Analytics• Game Development Tools• Over the air updates• Push Messaging
    12. 12. Facts• Over 130K Developers Using our development tools• 60K XDK Accounts Created• Over 6000 Apps Delivered to App stores
    13. 13. How do appMobi applications work?
    14. 14. The Anatomy of an appMobi Application• The HTML, JavaScript, data, an d images that make up a tiny mobile website are collectively known as a “bundle”
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. How is this different from PhoneGap? Acceleration for gamesJust the app – no extras In App Purchasing Push Messaging Gamification Analytics More
    19. 19. How would a mobile Web developer make an app?
    20. 20. Sign up for a free appHub account http://apphub.appmobi.com
    21. 21. What is appHub?
    22. 22. Write your app
    23. 23. Get the XDK
    24. 24. The appMobi XDK Development Tool
    25. 25. XDK Version Control
    26. 26. Project Controls
    27. 27. Development Controls
    28. 28. XDK Resources
    29. 29. Account Controls
    30. 30. Application Simulation
    31. 31. Application Display
    32. 32. Cloud Services
    33. 33. Build your app using appHub
    34. 34. What steps are necessary to build forWindows 8 and Windows Phone 8?
    35. 35. Create a new Visual Studio 2012 Project • Create a new Windows Store project
    36. 36. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
    37. 37. Load the template • Load the template through the Package Manager Window
    38. 38. Edit app.xaml.cs • For Windows 8 Store applications, make sure to edit the rootFrame.navigate command to use the appMobi browser object
    39. 39. Download the application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
    40. 40. Add 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
    41. 41. Create a new Visual Studio 2012 Project • Create a new Windows Phone 8 project
    42. 42. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
    43. 43. Load the template • Load the template through the Package Manager Window
    44. 44. Edit the WMAppManifest.xml file • For Windows Phone 8 applications, edit the WMAppManifest.xml file to point to AppMobiPage.xaml instead of MainPage.xaml
    45. 45. Download the application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
    46. 46. Add 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
    47. 47. Reference your bundle’s files • For Windows Phone 8 applications, edit the AppMobiWebSource.xml file to include a reference to all assets that are necessary from the bundle
    48. 48. Build and test • Build the application and then submit to the appropriate app store
    49. 49. Demonstrations• Windows 8 Store• Windows Phone 8 I’ll make these demo appsavailable to you following this presentation
    50. 50. So how does appMobi make money anyway?
    51. 51. The appMobi “No-Lose” Guarantee • 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
    52. 52. Why dont you guys ask some questions?
    53. 53. More Information 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
    54. 54. Find more information at:http://www.appmobi.com/documentation Find out where here I’ll be next: @profMobi
    55. 55. 12/12/2012 55
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×