Developing cross platform mobile apps using Apache Cordova

  • Published on
    16-Jan-2017

  • View
    688

  • Download
    0

Transcript

<p>Getting Started with Cross-Platform Mobile Development using Cordova</p> <p>DevelopingCross-Platform Mobile Apps using Apache Cordova Mostafa Elzoghbi Sr. Technical Evangelist - MicrosoftTwitter: @MostafaElzoghbiwww.MostafaElzoghbi.com</p> <p>AgendaApps dominates the mobile webLanguages to build Mobile AppsWhat is Cordova ?How does Cordova work ?Visual Studio Tools for CordovaCordova App vs Native AppsUsing CL Tools for CordovaCordova Apps Best Practices</p> <p>Native Wrapper or WWAhostYour JavaScript AppCordova Plugin JS API</p> <p>2</p> <p>Please interrupt me.Feel free to ask me questions </p> <p>Way back machine: 2010Source: Flurry Analytics</p> <p>4</p> <p>Apps dominate the mobile webSource: Flurry Analytics</p> <p>5</p> <p>HTML is the most popular language among mobile developers.Source: Developer Economics State of the Developer Nation Q3 2014</p> <p>Build 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM6</p> <p>HTML trails closely behind Java and Objective-C as developers primary language.Source: Developer Economics State of the Developer Nation Q3 2014</p> <p>Build 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM7</p> <p>What is Cordova?Open source frameworkA web app in a native wrapperAndroid + iOS use a webviewWindows uses WWAhostSingle, shared JavaScript codebase deployed to all targetsPlugins provide a common JavaScript API to access device capabilities</p> <p>Native Wrapper</p> <p>Your JavaScript AppCordova Plugin JS API</p> <p>8</p> <p>Enter Apache Cordova6% of apps in stores14% of apps in the business category</p> <p>Source:App Brain, April 2015</p> <p>Build 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM9</p> <p>How does Cordova work?Cordova Project</p> <p>HTML, CSS, JS, assetsConfigurationPlatform codePlugin codeVisual Studio ProjectHTML, CSS, JS, assetsWindows-specific runtimeWindows-specific plugin codeWindows-specific configurationXCode ProjectHTML, CSS, JS, assetsiOS-specific runtimeiOS-specific plugin codeiOS-specific configurationAndroid ProjectHTML, CSS, JS, assetsAndroid-specific runtimeAndroid-specific plugin codeAndroid-specific configurationCreateBuildNative Windows AppNative iOS AppNative Android App</p> <p>Build 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM10</p> <p>How do I get it?In-box with Visual Studio 2015 Community Edition (Recommended) [[ FREE ]]</p> <p>Visual Studio Code [[ FREE ]] </p> <p>Visual Studio Code is available for Windows, OS X, and Linux.</p> <p>Microsoft Ignite 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM11</p> <p>All the stuff you needVisual Studio installs and uses the third party tools you need for multi-device development</p> <p>As you use Visual Studio, each time it opens, it runs dependency checks and keeps up-to-date a verified stack of open source tools from the community</p> <p>All the stuff you needPhone Emulator:VS Emulator *New*Google Emulator *New*Ripple Easy to deploy &amp; DebugIntegration with needed mobile toolset</p> <p>DEMOTools for Apache Cordova (TACO) in VS 2015</p> <p>Building cordova apps using Visual Studio 2015 Discussing Templates , Highlighting Project Structure, Support for CLI, Insights and best practices.</p> <p>Oct 1, The official announcement for TACO v1.0.0</p> <p>http://blogs.msdn.com/b/visualstudio/archive/2015/10/01/announcing-tools-for-apache-cordova-aka-taco-v1-0-0.aspx</p> <p>Create a project.Project structurePluginsTaco.json fileManaging NuGet Packages</p> <p>Microsoft Ignite 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM14</p> <p>Use Cordova if you want toUse your web skills &amp; assetsMaintain one codebaseUse the JS libraries you love ( Jquery, AngularJS, Knockout, Ionic, etc)</p> <p>You might be better off writing native apps ifYoure want to build a consumer app in the top 3%You want different apps on different devicesYou Swift, Java, Objective-C or DirectX.If you love C#, consider Xamarin ( Mobile Cross Platform Development ) </p> <p>Should I build a Cordova app or Native apps?</p> <p>Are you guys totally for serial about Cordova?</p> <p>Yup.</p> <p>Visual Studio has had support for Cordova for a year [[updated]]</p> <p>VS2015s Cordova investments include:100% compatibility with Cordova CLIUpdated Cordova, plugins, emulators, and OSS componentsMac Only SDKs &amp; connect to Mac remote buildAdditional app services support for mobile services, auth, O365, and analytics</p> <p>Windows is committed to building and growing a first class Cordova platform</p> <p>Major Windows investment for Cordova included:Hosted app content &amp; webview support with WinRT accessSecurity model redesignContribution of all Cordova code to the Apache Cordova OSS project</p> <p>Needs to be updated based on recent announcements</p> <p>http://blogs.msdn.com/b/visualstudio/archive/2015/10/01/announcing-tools-for-apache-cordova-aka-taco-v1-0-0.aspx</p> <p>Microsoft Ignite 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM18</p> <p>Cordova Browser Platform + Browser Support for Top 30 PluginsRipple EmulatorCordova Windows PlatformCordova Test Infrastructure (MEDIC) Cordova CLI (--list, --save, --restore, --arch)Filling out the Plugin support matrixHosted app support for File, Media Capture, and Camera pluginsPerformance testsContributions to Open Source</p> <p>19</p> <p>Use Command Window or Terminal to create projectsInstall Cordova is a single command line:npm install g cordova OR sudo npm install g cordovaCreate a project: directory workshop, project: Workshopcordova create workshop com.yourname.workshop WorkshopAdd or remove platforms:cordova platforms add ios Not a VS Dev ? Use VS Code as your Code Editor (Free)Using CL for Cordova Apps</p> <p>Cordova Tutorial:https://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html</p> <p>20</p> <p>Single Page Application (SPA) is a best practice to build fast, efficient mobile apps.Single HTML Page.The views are injected &amp; removed from the DOM.UI is entirely created at the client-side with no dependency on server.All assets should be under www folder.Use Front-End Frameworks for incredible UX. </p> <p>Cordova Apps Best Practices</p> <p>Single Page App tutorial for AngularJSRef.: http://ccoenraets.github.io/cordova-tutorial/single-page-app.htmlModular AngularJS App Design Articlehttp://clintberry.com/2013/modular-angularjs-application-design/21</p> <p>DEMO Weather App </p> <p>Get Started demos urlhttp://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/</p> <p>Microsoft Ignite 2015 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/10/2015 9:04 AM22</p> <p>Download the tools (free) http://aka.ms/cordovaDocumentation http://aka.ms/cordova-docsVideos http://aka.ms/cordova-videos Tutorials http://aka.ms/cordova-tutorialsSamples http://aka.ms/cordova-samples Support forums http://www.stackoverflow.comPackaging Apps to Google Store: https://channel9.msdn.com/Blogs/MostafaElzoghbi/Packaging-Cordova-Apps-to-Google-Store</p> <p>Resources</p> <p>Microsoft Azure TourTuesday, Oct 13, Philadelphia</p> <p>Featuring a Keynote fromScott GuthrieExecutive Vice PresidentCloud &amp; Enterprisehttp://MicrosoftAzureTour.comTop engineers from Redmond and independent experts from around the world will present:</p> <p>12 technical sessions across two tracks (IT Experts and Developers)</p> <p>6 hands-on labsSecurity, Networking, Big Data, Storage, Identity, Web,Mobile, Hybrid, Containers, Devops, Open Source, Management, Internet of Things</p> <p>Thank You</p> <p> 2015 Microsoft Corporation. All rights reserved. </p> <p>10/10/2015 9:04 AM25 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.</p>

Recommended

View more >