8
Developing amazing #cross-platform #apps using the new #Cordova tools available in #Visual-Studio-2015 VISUAL STUDIO TOOLS FOR CORDOVA Andrea Tino (Software Development Engineer)

Visual Studio Tools for Cordova

Embed Size (px)

Citation preview

Page 1: Visual Studio Tools for Cordova

Developing amazing #cross-platform #apps using the new #Cordova tools available in #Visual-Studio-2015

VISUAL STUDIO TOOLS FOR CORDOVA

Andrea Tino (Software Development Engineer)

Page 2: Visual Studio Tools for Cordova

Win output

myapp.appx.NET

Android output

myapp.apk

iOS output

myapp.ipa

index.html

style.css

script.js

Source codeVISUAL STUDIO 2015

CORDOVAJAVA

objCswift

Cordova and its history in a few linesPhoneGap’s first appearance during iPhoneDevCamp in San Francisco, developed by Nitobi

2009

PhoneGap gets acquired by Adobe and code is acquired also by the Apache Foundation

2011

Visual Studio releases version 2015 with tools embedding Cordova

2015

Page 3: Visual Studio Tools for Cordova

Why should you use it?Cordova comes with its own toolset which one can use. So Visual Studio is not really needed. What are the benefits of using Visual Studio then?

UPGRADEChange Cordova version in project configuration.

PLUGIN MANAGEMENTVia project configuration, easy add/remove/upgrade plugins. In plain Cordova the upgrade story is not 100% smooth.

CUSTOM FIXESNeed to change plugins or other Cordova classes? No duplication in platforms folder, platforms are generated upon cleanup.

MSBUILDBuilding process fully driven by Msbuild

Page 4: Visual Studio Tools for Cordova

STORESTORE

STORE

The big pictureBuilding and debugging is easier, without using platform specific environments and tools, thus more “central” development experience

Page 5: Visual Studio Tools for Cordova

WINDOWSsdk

ANDROIDsdk

IOSsdk

WINDOWS

os

MAC OS

os

The build architectureAndroid is the only SDK available for both Mac and Windows. Visual Studio builds Windows and Android on the Windows machine where it is running, but needs a remote Mac machine for building iOS!

Page 6: Visual Studio Tools for Cordova

PrepareRunning before and after prepare hooks

ConfigurationThe configuration file config.xml is processed

PlatformsAdding each supported platform in the project

PluginsAdding plugins to all platforms in the project

Add platformHooks before and after adding platforms

Add pluginsHooks before and after adding plugins

BuildEach platform, via its SDK, is built to generate the appfile

The build processVisual Studio will generate platforms and plugins everytime a build is issued. Appfiles are then generated and moved into the bin folder.

Page 7: Visual Studio Tools for Cordova

Config fileEnclose plat-form-specific set-tings in platform tag

Might need to replace values, can’t do in config file

<platform name="android"> <preference name="Fullscreen" value="true" /></platform>

Config pluginUse a special custom plugin to manipulate manifest’s XML in plugin.xml file

Cannot change single attribute’s value in manifest file. Can only replace nodes and all descendants

<platform name="ios"> <config-file target="app.plist" parent="/"> ... </config-file></platform>

HookCrete a hook to change the manifest file at proper time

Must write actual Javas-cript code part of the build process

module.exports = function(context) { // context: env vars ...};

Platform specific settingsIn order to have a platform specific setting land in the proper manifest file, it is possible to use a few approaches.

Page 8: Visual Studio Tools for Cordova

The EndTHANK YOUTwitter: @_atinoE-Mail: [email protected]

This work is distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

Cover: Space mess This work includes artworks designed by Graphic River.

This work includes artworks designed by Freepik.com.

May 2016v1.0

Keywords#visual-studio #cordova #microsoft #cross-platform #app #android #ios #windows-10 #windows-phone #tools

Presentation infoDuration: 30 mins.Background: TechnicalAudience: Developers

This work includes artworks designed by Freestock.com.

Andrea TinoSoftware Development Engineer