Building Win 8 and WP8 Apps Using appMobi
•Download as PPTX, PDF•
1 like•1,582 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Building Win 8 and WP8 Apps Using appMobi
Similar to Building Win 8 and WP8 Apps Using appMobi (20)
Recently uploaded
Recently uploaded (20)
Building Win 8 and WP8 Apps Using appMobi
- 1. Building Win 8 and WP8 Apps Using appMobi 12/12/2012 1
- 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
- 3. Agenda 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?
- 4. What is appMobi all about?
- 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 12/12/2012 5
- 6. The appMobi mission is to help developers create What does appMobi do? awesome mobile apps using HTML5
- 7. Free XDK Development Tool
- 8. Cloud Based Build System – appHub
- 9. jqMobi
- 10. HTML5 Game Development • Game Engine Interfaces • directCanvas • directBox2d • Android Multi-Touch • Multi-Sound
- 11. Cloud Services The appMobi Cloud Services provide enhancements for mobile HTML5 applications • Frictionless Payments • Analytics • Game Development Tools • Over the air updates • Push Messaging
- 12. Facts • Over 130K Developers Using our development tools • 60K XDK Accounts Created • Over 6000 Apps Delivered to App stores
- 13. How do appMobi applications work?
- 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. 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. 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. 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. How is this different from PhoneGap? Acceleration for games Just the app – no extras In App Purchasing Push Messaging Gamification Analytics More
- 19. How would a mobile Web developer make an app?
- 20. Sign up for a free appHub account http://apphub.appmobi.com
- 21. What is appHub?
- 22. Write your app
- 23. Get the XDK
- 24. The appMobi XDK Development Tool
- 26. Project Controls
- 28. XDK Resources
- 29. Account Controls
- 32. Cloud Services
- 33. Build your app using appHub
- 34. What steps are necessary to build for Windows 8 and Windows Phone 8?
- 35. Create a new Visual Studio 2012 Project • Create a new Windows Store project
- 36. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
- 37. Load the template • Load the template through the Package Manager Window
- 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. Download the application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
- 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. Create a new Visual Studio 2012 Project • Create a new Windows Phone 8 project
- 42. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
- 43. Load the template • Load the template through the Package Manager Window
- 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. Download the application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
- 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. 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. Build and test • Build the application and then submit to the appropriate app store
- 49. Demonstrations • Windows 8 Store • Windows Phone 8 I’ll make these demo apps available to you following this presentation
- 50. So how does appMobi make money anyway?
- 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. Why don't you guys ask some questions?
- 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. Find more information at: http://www.appmobi.com/documentation Find out where here I’ll be next: @profMobi
- 55. 12/12/2012 55
Editor's Notes
- 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