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)
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
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
STORESTORE
STORE
The big pictureBuilding and debugging is easier, without using platform specific environments and tools, thus more “central” development experience
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!
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.
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.
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