Microsoft hackathon presentation 2013.02.15
•Descargar como PPTX, PDF•
1 recomendación•705 vistas
The document discusses how to build apps using appMobi. It explains that appMobi allows developers to create native mobile apps using HTML5 and JavaScript. The anatomy of an appMobi app is described as using a web view control with HTML, CSS, JS and images bundled together. Features are accessed through JavaScript libraries. The document demonstrates how to build apps for Windows 8 and Windows Phone 8 by creating projects in Visual Studio, adding the app bundle, and configuring files. It recommends starting with the appMobi XDK, watching videos, reading documentation and reviewing sample apps.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Microsoft hackathon presentation 2013.02.15
Similar a Microsoft hackathon presentation 2013.02.15 (20)
Último
Último (20)
Microsoft hackathon presentation 2013.02.15
- 1. Building Apps Using appMobi 2/15/2013 1
- 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
- 3. Agenda 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?
- 5. What is appMobi all about?
- 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 2/15/2013 6
- 7. The appMobi mission is to help developers create What does appMobi do? awesome mobile apps using HTML5
- 8. Make Native Apps Using HTML5 Build your apps with these Distribute your apps here
- 9. One HTML5 Codebase for 1.5B+ Devices http://www.appmobi.com/boomtown
- 10. Free XDK Development Tool
- 11. Cloud Based Build System – appHub
- 12. jqMobi
- 13. HTML5 Game Development • Game Engine Interfaces • directCanvas • directBox2d physics • Android Multi-Touch • Multi-Sound
- 14. Cloud Services The appMobi Cloud Services provide enhancements for mobile HTML5 applications • Frictionless Payments • Analytics • Game Development Tools • Over the air updates • Push Messaging
- 15. Facts • Over 130K Developers Using our development tools • 60K XDK Accounts Created • Over 6000 Apps Delivered to App stores
- 16. 100’s of Publishers Using HTML for Native Apps
- 17. What makes an appMobi application tick?
- 18. 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
- 19. 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”
- 20. 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
- 21. 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
- 22. How do I make an app?
- 23. Write your code
- 24. Test your code in the XDK
- 25. Preview your app on device
- 26. Install the appLab application • 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”
- 27. Open the link on the device’s web browser • 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
- 28. Build your app Log into appHub Build your app
- 29. What steps are necessary to build for Windows 8 and Windows Phone 8?
- 30. Windows Build The build process for Windows 8 and Windows Phone 8 are currently under construction Here’s how you can build them yourself right now
- 31. Demonstration I’ll make these demo apps available to you following this presentation
- 32. Windows 8 First we’ll build an appMobi app for Windows 8 Store
- 33. Create a new Visual Studio 2012 Project • Create a new Windows Store project
- 34. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
- 35. Load the template • Load the template through the Package Manager Window
- 36. Edit app.xaml.cs • For Windows 8 Store applications, make sure to edit the rootFrame.navigate command to use the appMobi browser object
- 37. Wrangle your application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
- 38. 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
- 39. Build and test • Build the application and then submit to the Windows 8 App Store
- 40. Windows Phone 8 Now to build for Windows Phone 8
- 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. Where do I get started?
- 50. Get the XDK
- 51. Watch Videos
- 52. Read Articles
- 53. Grab Samples
- 54. 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
- 55. Demo Apps I’ll put a link to this presentation and demo apps on my Twitter feed shortly @profMobi
- 57. Find more information at: http://www.appmobi.com/documentation Find out where here I’ll be next: @profMobi
- 58. 2/15/2013 58
Notas del editor
- Here’s what we are going to go over tonightI’m going to throw a lot of stuff at you guysI won’t try to show you how *everything* is doneIf you hear something and want to use it, hopefully you can find the info you need from our website/videos/docsOtherwise you can reach me at this email address
- Show them the XDK really quickly here with the test app
- 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
- All the cool people are doing it
- Created using Web technologiesBuilt for native using a cloud build systemHosted from the cloud as well
- 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.
- 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”.
- 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.
- Ultimately we would like to add Windows Store 8 and Windows Phone 8 builds available in appHub
- Or grab it from Construct2!!1!
- Show the Live Update
- 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