SlideShare une entreprise Scribd logo
1  sur  21
Télécharger pour lire hors ligne
Building Win 8 and WP8 Apps
        Using appMobi


                          1/18/2013   1
Who am I?

        Andrew Smith
  appMobi Developer Evangelist
      Web Development
          @profMobi
What steps are necessary to build for
Windows 8 and Windows Phone 8?
Demonstrations

• Windows 8 Store
• Windows Phone 8

   I’ll make the demo app
available to you following this
         presentation
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.navigate
          command to use the
          appMobi browser object
Download the application bundle

                • Get the application bundle
                   o Through the XDK
                   o Downloading it from appHub
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
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
                  WMAppManifest.xml file to
                  point to AppMobiPage.xaml
                  instead of MainPage.xaml
Download the application bundle

                • Get the application bundle
                   o Through the XDK
                   o Downloading it from appHub
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
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
Build and test

       • Build the application and
         then submit to the
         appropriate app store
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
Find more information at:
http://www.appmobi.com/documentation
   Find out where here I’ll be next:
                @profMobi
1/18/2013   21

Contenu connexe

Tendances

Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your pluginMarko Heijnen
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a proMarko Heijnen
 
Why Embrace "Html5"?
Why Embrace "Html5"?Why Embrace "Html5"?
Why Embrace "Html5"?FossilDesigns
 
Introduction to continuous delivery
Introduction to continuous deliveryIntroduction to continuous delivery
Introduction to continuous deliveryLeena N
 
App Development: Create Cross Platform Mobile App with Just 6 Steps
App Development: Create Cross Platform Mobile App with Just 6 StepsApp Development: Create Cross Platform Mobile App with Just 6 Steps
App Development: Create Cross Platform Mobile App with Just 6 StepsMarvin Heng
 
Transcript_May29_2015
Transcript_May29_2015Transcript_May29_2015
Transcript_May29_2015Randy Conrad
 
An Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New EditorAn Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New EditorAndrew Marks
 
How to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.jsHow to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.jsHugo Magalhães
 
Tizen.Net with Xamarin.Forms
Tizen.Net with Xamarin.FormsTizen.Net with Xamarin.Forms
Tizen.Net with Xamarin.FormsCheah Eng Soon
 
Robin Böhm - Angular 2 - code.talks 2015
Robin Böhm - Angular 2 - code.talks 2015Robin Böhm - Angular 2 - code.talks 2015
Robin Böhm - Angular 2 - code.talks 2015AboutYouGmbH
 
Simulink for Work Groups Using Simulink Projects
Simulink for Work Groups Using Simulink ProjectsSimulink for Work Groups Using Simulink Projects
Simulink for Work Groups Using Simulink ProjectsJoachim Schlosser
 
Remote Generators with Virtual Developer
Remote Generators with Virtual DeveloperRemote Generators with Virtual Developer
Remote Generators with Virtual DeveloperMarcus Munzert
 
The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).Michael Brooks
 
How to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparevHow to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparevOleksii Bogush
 
App Development: Create Cross Platform Mobile App with .NETStandard 2.0
App Development: Create Cross Platform Mobile App with .NETStandard 2.0App Development: Create Cross Platform Mobile App with .NETStandard 2.0
App Development: Create Cross Platform Mobile App with .NETStandard 2.0Marvin Heng
 

Tendances (20)

Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
 
Fltk on win10 with visual studio
Fltk on win10 with visual studioFltk on win10 with visual studio
Fltk on win10 with visual studio
 
Why Embrace "Html5"?
Why Embrace "Html5"?Why Embrace "Html5"?
Why Embrace "Html5"?
 
Introduction to continuous delivery
Introduction to continuous deliveryIntroduction to continuous delivery
Introduction to continuous delivery
 
App Development: Create Cross Platform Mobile App with Just 6 Steps
App Development: Create Cross Platform Mobile App with Just 6 StepsApp Development: Create Cross Platform Mobile App with Just 6 Steps
App Development: Create Cross Platform Mobile App with Just 6 Steps
 
Transcript_May29_2015
Transcript_May29_2015Transcript_May29_2015
Transcript_May29_2015
 
EECS 497 Intro
EECS 497 IntroEECS 497 Intro
EECS 497 Intro
 
SFScon16 - Bruno Mandolesi: “OpenSource & Virtual Reality”
SFScon16 - Bruno Mandolesi: “OpenSource & Virtual Reality”SFScon16 - Bruno Mandolesi: “OpenSource & Virtual Reality”
SFScon16 - Bruno Mandolesi: “OpenSource & Virtual Reality”
 
Annotation processing
Annotation processingAnnotation processing
Annotation processing
 
An Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New EditorAn Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New Editor
 
How to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.jsHow to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.js
 
Tizen.Net with Xamarin.Forms
Tizen.Net with Xamarin.FormsTizen.Net with Xamarin.Forms
Tizen.Net with Xamarin.Forms
 
Robin Böhm - Angular 2 - code.talks 2015
Robin Böhm - Angular 2 - code.talks 2015Robin Böhm - Angular 2 - code.talks 2015
Robin Böhm - Angular 2 - code.talks 2015
 
Simulink for Work Groups Using Simulink Projects
Simulink for Work Groups Using Simulink ProjectsSimulink for Work Groups Using Simulink Projects
Simulink for Work Groups Using Simulink Projects
 
Remote Generators with Virtual Developer
Remote Generators with Virtual DeveloperRemote Generators with Virtual Developer
Remote Generators with Virtual Developer
 
The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).
 
How to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparevHow to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparev
 
App Development: Create Cross Platform Mobile App with .NETStandard 2.0
App Development: Create Cross Platform Mobile App with .NETStandard 2.0App Development: Create Cross Platform Mobile App with .NETStandard 2.0
App Development: Create Cross Platform Mobile App with .NETStandard 2.0
 
Symfony with vagrant and ansible
Symfony with vagrant and ansibleSymfony with vagrant and ansible
Symfony with vagrant and ansible
 

En vedette

How to make Joomla Profitable (Cómo ganar dinero con joomla!)
How to make Joomla Profitable (Cómo ganar dinero con joomla!)How to make Joomla Profitable (Cómo ganar dinero con joomla!)
How to make Joomla Profitable (Cómo ganar dinero con joomla!)Pedro Francisco Vidal López
 
Печа Куча 3. Алматы. Вика Роденкова. Горнолыжный синдром
Печа Куча 3. Алматы. Вика Роденкова. Горнолыжный синдромПеча Куча 3. Алматы. Вика Роденкова. Горнолыжный синдром
Печа Куча 3. Алматы. Вика Роденкова. Горнолыжный синдромMikka Kakka
 
Crisis Times. Turn Joomla into a job opportunity.
Crisis Times. Turn Joomla into a job opportunity. Crisis Times. Turn Joomla into a job opportunity.
Crisis Times. Turn Joomla into a job opportunity. Pedro Francisco Vidal López
 
Content Management System Selection Guide at Notre Dame
Content Management System Selection Guide at Notre DameContent Management System Selection Guide at Notre Dame
Content Management System Selection Guide at Notre DameDon Schindler
 
Making Your Website Mobile
Making Your Website MobileMaking Your Website Mobile
Making Your Website MobileDon Schindler
 
Alumni senate-social-media-2011
Alumni senate-social-media-2011Alumni senate-social-media-2011
Alumni senate-social-media-2011Don Schindler
 
Analysis of Magazine Covers.
Analysis of Magazine Covers.Analysis of Magazine Covers.
Analysis of Magazine Covers.sarazanj
 

En vedette (8)

How to make Joomla Profitable (Cómo ganar dinero con joomla!)
How to make Joomla Profitable (Cómo ganar dinero con joomla!)How to make Joomla Profitable (Cómo ganar dinero con joomla!)
How to make Joomla Profitable (Cómo ganar dinero con joomla!)
 
Печа Куча 3. Алматы. Вика Роденкова. Горнолыжный синдром
Печа Куча 3. Алматы. Вика Роденкова. Горнолыжный синдромПеча Куча 3. Алматы. Вика Роденкова. Горнолыжный синдром
Печа Куча 3. Алматы. Вика Роденкова. Горнолыжный синдром
 
Curso básico de fotografía astronómica
Curso básico de fotografía astronómicaCurso básico de fotografía astronómica
Curso básico de fotografía astronómica
 
Crisis Times. Turn Joomla into a job opportunity.
Crisis Times. Turn Joomla into a job opportunity. Crisis Times. Turn Joomla into a job opportunity.
Crisis Times. Turn Joomla into a job opportunity.
 
Content Management System Selection Guide at Notre Dame
Content Management System Selection Guide at Notre DameContent Management System Selection Guide at Notre Dame
Content Management System Selection Guide at Notre Dame
 
Making Your Website Mobile
Making Your Website MobileMaking Your Website Mobile
Making Your Website Mobile
 
Alumni senate-social-media-2011
Alumni senate-social-media-2011Alumni senate-social-media-2011
Alumni senate-social-media-2011
 
Analysis of Magazine Covers.
Analysis of Magazine Covers.Analysis of Magazine Covers.
Analysis of Magazine Covers.
 

Similaire à Meetup 2013.01.17

Building Win 8 and WP8 Apps Using appMobi
Building Win 8 and WP8 Apps Using appMobi Building Win 8 and WP8 Apps Using appMobi
Building Win 8 and WP8 Apps Using appMobi Andrew Smith
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development Jakir Hossain
 
Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBenjamin LUPU
 
How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?MobilePundits
 
2013.02.26 Intel Overview
2013.02.26 Intel Overview2013.02.26 Intel Overview
2013.02.26 Intel OverviewAndrew Smith
 
Windows Universal Apps
Windows Universal AppsWindows Universal Apps
Windows Universal AppsJames Quick
 
Developing Great Apps with Apache Cordova
Developing Great Apps with Apache CordovaDeveloping Great Apps with Apache Cordova
Developing Great Apps with Apache CordovaShekhar Gulati
 
appMobi HTML5 Gaming
appMobi HTML5 GamingappMobi HTML5 Gaming
appMobi HTML5 GamingAndrew Smith
 
Webinar on How to use MyAppConverter
Webinar on How to use  MyAppConverterWebinar on How to use  MyAppConverter
Webinar on How to use MyAppConverterJaoued Ahmed
 
Test+video+upload
Test+video+uploadTest+video+upload
Test+video+uploadTianwei_liu
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps QuicklyGil Irizarry
 
The Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdfThe Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdfMoon Technolabs Pvt. Ltd.
 
Migrating Unity3D projects to Windows 8
Migrating Unity3D projects to Windows 8Migrating Unity3D projects to Windows 8
Migrating Unity3D projects to Windows 8282productions
 
I pad uicatalog_lesson02
I pad uicatalog_lesson02I pad uicatalog_lesson02
I pad uicatalog_lesson02Rich Helton
 
Infinite Scale - Introduction to Google App Engine
Infinite Scale - Introduction to Google App EngineInfinite Scale - Introduction to Google App Engine
Infinite Scale - Introduction to Google App EngineMarian Borca
 
Spring Dynamic Modules for OSGi by Example - Martin Lippert, Consultant
Spring Dynamic Modules for OSGi by Example - Martin Lippert, ConsultantSpring Dynamic Modules for OSGi by Example - Martin Lippert, Consultant
Spring Dynamic Modules for OSGi by Example - Martin Lippert, Consultantmfrancis
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsAlius Petraška
 
Universal Apps Oct 2014
Universal Apps Oct 2014Universal Apps Oct 2014
Universal Apps Oct 2014Joe Healy
 

Similaire à Meetup 2013.01.17 (20)

Building Win 8 and WP8 Apps Using appMobi
Building Win 8 and WP8 Apps Using appMobi Building Win 8 and WP8 Apps Using appMobi
Building Win 8 and WP8 Apps Using appMobi
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development
 
Mobile CMS made simple
Mobile CMS made simpleMobile CMS made simple
Mobile CMS made simple
 
Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKit
 
How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?
 
2013.02.26 Intel Overview
2013.02.26 Intel Overview2013.02.26 Intel Overview
2013.02.26 Intel Overview
 
Windows Universal Apps
Windows Universal AppsWindows Universal Apps
Windows Universal Apps
 
Google app engine
Google app engineGoogle app engine
Google app engine
 
Developing Great Apps with Apache Cordova
Developing Great Apps with Apache CordovaDeveloping Great Apps with Apache Cordova
Developing Great Apps with Apache Cordova
 
appMobi HTML5 Gaming
appMobi HTML5 GamingappMobi HTML5 Gaming
appMobi HTML5 Gaming
 
Webinar on How to use MyAppConverter
Webinar on How to use  MyAppConverterWebinar on How to use  MyAppConverter
Webinar on How to use MyAppConverter
 
Test+video+upload
Test+video+uploadTest+video+upload
Test+video+upload
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
 
The Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdfThe Best Alternatives To The Ionic Framework.pdf
The Best Alternatives To The Ionic Framework.pdf
 
Migrating Unity3D projects to Windows 8
Migrating Unity3D projects to Windows 8Migrating Unity3D projects to Windows 8
Migrating Unity3D projects to Windows 8
 
I pad uicatalog_lesson02
I pad uicatalog_lesson02I pad uicatalog_lesson02
I pad uicatalog_lesson02
 
Infinite Scale - Introduction to Google App Engine
Infinite Scale - Introduction to Google App EngineInfinite Scale - Introduction to Google App Engine
Infinite Scale - Introduction to Google App Engine
 
Spring Dynamic Modules for OSGi by Example - Martin Lippert, Consultant
Spring Dynamic Modules for OSGi by Example - Martin Lippert, ConsultantSpring Dynamic Modules for OSGi by Example - Martin Lippert, Consultant
Spring Dynamic Modules for OSGi by Example - Martin Lippert, Consultant
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile apps
 
Universal Apps Oct 2014
Universal Apps Oct 2014Universal Apps Oct 2014
Universal Apps Oct 2014
 

Meetup 2013.01.17

  • 1. Building Win 8 and WP8 Apps Using appMobi 1/18/2013 1
  • 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
  • 3. What steps are necessary to build for Windows 8 and Windows Phone 8?
  • 4. Demonstrations • Windows 8 Store • Windows Phone 8 I’ll make the demo app available to you following this presentation
  • 5. Create a new Visual Studio 2012 Project • Create a new Windows Store project
  • 6. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
  • 7. Load the template • Load the template through the Package Manager Window
  • 8. Edit app.xaml.cs • For Windows 8 Store applications, make sure to edit the rootFrame.navigate command to use the appMobi browser object
  • 9. Download the application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
  • 10. 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
  • 11. Create a new Visual Studio 2012 Project • Create a new Windows Phone 8 project
  • 12. Get a template from NuGet • Go to NuGet and grab the an appropriate project template
  • 13. Load the template • Load the template through the Package Manager Window
  • 14. Edit the WMAppManifest.xml file • For Windows Phone 8 applications, edit the WMAppManifest.xml file to point to AppMobiPage.xaml instead of MainPage.xaml
  • 15. Download the application bundle • Get the application bundle o Through the XDK o Downloading it from appHub
  • 16. 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
  • 17. 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
  • 18. Build and test • Build the application and then submit to the appropriate app store
  • 19. 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
  • 20. Find more information at: http://www.appmobi.com/documentation Find out where here I’ll be next: @profMobi
  • 21. 1/18/2013 21

Notes de l'éditeur

  1. Ultimately we would like to add Windows Store 8 and Windows Phone 8 builds available in appHub
  2. Let’s try it with Windows Phone 8 this time