Developing cross platform mobile apps using Apache Cordova

Embed Size (px)

Text of Developing cross platform mobile apps using Apache Cordova

Getting Started with Cross-Platform Mobile Development using Cordova

DevelopingCross-Platform Mobile Apps using Apache Cordova Mostafa Elzoghbi Sr. Technical Evangelist - MicrosoftTwitter: @MostafaElzoghbiwww.MostafaElzoghbi.com

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

Native Wrapper or WWAhostYour JavaScript AppCordova Plugin JS API

2

Please interrupt me.Feel free to ask me questions

Way back machine: 2010Source: Flurry Analytics

4

Apps dominate the mobile webSource: Flurry Analytics

5

HTML is the most popular language among mobile developers.Source: Developer Economics State of the Developer Nation Q3 2014

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

HTML trails closely behind Java and Objective-C as developers primary language.Source: Developer Economics State of the Developer Nation Q3 2014

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

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

Native Wrapper

Your JavaScript AppCordova Plugin JS API

8

Enter Apache Cordova6% of apps in stores14% of apps in the business category

Source:App Brain, April 2015

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

How does Cordova work?Cordova Project

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

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

How do I get it?In-box with Visual Studio 2015 Community Edition (Recommended) [[ FREE ]]

Visual Studio Code [[ FREE ]]

Visual Studio Code is available for Windows, OS X, and Linux.

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

All the stuff you needVisual Studio installs and uses the third party tools you need for multi-device development

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

All the stuff you needPhone Emulator:VS Emulator *New*Google Emulator *New*Ripple Easy to deploy & DebugIntegration with needed mobile toolset

DEMOTools for Apache Cordova (TACO) in VS 2015

Building cordova apps using Visual Studio 2015 Discussing Templates , Highlighting Project Structure, Support for CLI, Insights and best practices.

Oct 1, The official announcement for TACO v1.0.0

http://blogs.msdn.com/b/visualstudio/archive/2015/10/01/announcing-tools-for-apache-cordova-aka-taco-v1-0-0.aspx

Create a project.Project structurePluginsTaco.json fileManaging NuGet Packages

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

Use Cordova if you want toUse your web skills & assetsMaintain one codebaseUse the JS libraries you love ( Jquery, AngularJS, Knockout, Ionic, etc)

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 )

Should I build a Cordova app or Native apps?

Are you guys totally for serial about Cordova?

Yup.

Visual Studio has had support for Cordova for a year [[updated]]

VS2015s Cordova investments include:100% compatibility with Cordova CLIUpdated Cordova, plugins, emulators, and OSS componentsMac Only SDKs & connect to Mac remote buildAdditional app services support for mobile services, auth, O365, and analytics

Windows is committed to building and growing a first class Cordova platform

Major Windows investment for Cordova included:Hosted app content & webview support with WinRT accessSecurity model redesignContribution of all Cordova code to the Apache Cordova OSS project

Needs to be updated based on recent announcements

http://blogs.msdn.com/b/visualstudio/archive/2015/10/01/announcing-tools-for-apache-cordova-aka-taco-v1-0-0.aspx

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

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

19

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

Cordova Tutorial:https://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html

20

Single Page Application (SPA) is a best practice to build fast, efficient mobile apps.Single HTML Page.The views are injected & 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.

Cordova Apps Best Practices

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

DEMO Weather App

Get Started demos urlhttp://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

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

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

Resources

Microsoft Azure TourTuesday, Oct 13, Philadelphia

Featuring a Keynote fromScott GuthrieExecutive Vice PresidentCloud & Enterprisehttp://MicrosoftAzureTour.comTop engineers from Redmond and independent experts from around the world will present:

12 technical sessions across two tracks (IT Experts and Developers)

6 hands-on labsSecurity, Networking, Big Data, Storage, Identity, Web,Mobile, Hybrid, Containers, Devops, Open Source, Management, Internet of Things

Thank You

2015 Microsoft Corporation. All rights reserved.

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.