Your SlideShare is downloading. ×
0
Building Apps Using appMobi                          2/15/2013   1
Who am I?        Andrew Smith  appMobi Developer Evangelist      Web Development          @profMobi
Agendao   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 Window...
Hackathon Questionsandrew@appmobi.com
What is appMobi all about?
Mission: To unify the technologies used in delivering web and mobile apps,simplifying the process of development and resul...
The appMobimission is to helpdevelopers create      What does appMobi do?awesome mobileapps using HTML5
Make Native Apps Using HTML5Build your apps  with these                  Distribute your apps here
One HTML5 Codebase for 1.5B+ Devices  http://www.appmobi.com/boomtown
Free XDK Development Tool
Cloud Based Build System – appHub
jqMobi
HTML5 Game Development•   Game Engine Interfaces•   directCanvas•   directBox2d physics•   Android Multi-Touch•   Multi-So...
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
100’s of Publishers Using HTML for Native Apps
What makes an appMobi application              tick?
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• The  HTML, JavaScript, data, an  d images that make up a  tiny mobile website are  ...
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 do I make an app?
Write your code
Test your code in the XDK
Preview your app on device
Install the appLab application• Go to the App Store or  Android Market and install  the appLab application• Find it in the...
Open the link on the device’s web browser• Open the application link in  your mobile web browser to  get the launch page• ...
Build your appLog into appHub           Build your app
What steps are necessary to build forWindows 8 and Windows Phone 8?
Windows BuildThe build process for Windows 8 and Windows Phone 8 are               currently under construction     Here’s...
DemonstrationI’ll make these   demo appsavailable to you following this presentation
Windows 8First we’ll build an appMobi app for Windows 8 Store
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...
Wrangle your application bundle                • Get the application bundle                   o Through the XDK           ...
Add the application bundle             • Copy the application bundle               into the HTML directory of             ...
Build and test            • Build the application              and then submit to              the Windows 8 App          ...
Windows Phone 8Now to build for Windows Phone 8
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
Where do I get started?
Get the XDK
Watch Videos
Read Articles
Grab Samples
More Information For video demonstrations of this process, find these videos on                          YouTube.• How to ...
Demo Apps I’ll put a link to this presentation anddemo apps on my Twitter feed shortly                   @profMobi
Hackathon Questionsandrew@appmobi.com
Find more information at:http://www.appmobi.com/documentation   Find out where here I’ll be next:                @profMobi
2/15/2013   58
Upcoming SlideShare
Loading in...5
×

Microsoft hackathon presentation 2013.02.15

432

Published on

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
432
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • Transcript of "Microsoft hackathon presentation 2013.02.15"

    1. 1. Building Apps Using appMobi 2/15/2013 1
    2. 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
    3. 3. Agendao 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?
    4. 4. Hackathon Questionsandrew@appmobi.com
    5. 5. What is appMobi all about?
    6. 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. 7. The appMobimission is to helpdevelopers create What does appMobi do?awesome mobileapps using HTML5
    8. 8. Make Native Apps Using HTML5Build your apps with these Distribute your apps here
    9. 9. One HTML5 Codebase for 1.5B+ Devices http://www.appmobi.com/boomtown
    10. 10. Free XDK Development Tool
    11. 11. Cloud Based Build System – appHub
    12. 12. jqMobi
    13. 13. HTML5 Game Development• Game Engine Interfaces• directCanvas• directBox2d physics• Android Multi-Touch• Multi-Sound
    14. 14. Cloud ServicesThe appMobi Cloud Servicesprovide enhancements formobile HTML5 applications• Frictionless Payments• Analytics• Game Development Tools• Over the air updates• Push Messaging
    15. 15. Facts• Over 130K Developers Using our development tools• 60K XDK Accounts Created• Over 6000 Apps Delivered to App stores
    16. 16. 100’s of Publishers Using HTML for Native Apps
    17. 17. What makes an appMobi application tick?
    18. 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. 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. 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. 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. 22. How do I make an app?
    23. 23. Write your code
    24. 24. Test your code in the XDK
    25. 25. Preview your app on device
    26. 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. 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. 28. Build your appLog into appHub Build your app
    29. 29. What steps are necessary to build forWindows 8 and Windows Phone 8?
    30. 30. Windows BuildThe build process for Windows 8 and Windows Phone 8 are currently under construction Here’s how you can build them yourself right now
    31. 31. DemonstrationI’ll make these demo appsavailable to you following this presentation
    32. 32. Windows 8First we’ll build an appMobi app for Windows 8 Store
    33. 33. Create a new Visual Studio 2012 Project • Create a new Windows Store project
    34. 34. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
    35. 35. Load the template • Load the template through the Package Manager Window
    36. 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. 37. Wrangle your application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
    38. 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. 39. Build and test • Build the application and then submit to the Windows 8 App Store
    40. 40. Windows Phone 8Now to build for Windows Phone 8
    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. Where do I get started?
    50. 50. Get the XDK
    51. 51. Watch Videos
    52. 52. Read Articles
    53. 53. Grab Samples
    54. 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. 55. Demo Apps I’ll put a link to this presentation anddemo apps on my Twitter feed shortly @profMobi
    56. 56. Hackathon Questionsandrew@appmobi.com
    57. 57. Find more information at:http://www.appmobi.com/documentation Find out where here I’ll be next: @profMobi
    58. 58. 2/15/2013 58
    1. A particular slide catching your eye?

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

    ×