Create a cross-platform mobile app using Cordova+visual Studio

1 Introduction

This section is about visual Studio Tools for Apache Cordova, which is currently only released in preview. Visual Studio for Apache Cordova helps the. NET programmers who are familiar with Visual Studio users to be able to use the universe's strongest development IDE to create iOS, CSS, javascipt by writing HTML, Native apps for Android and Windows.

1.1 Overview

With visual Studio for Apache Cordova You can create cross-platform apps for iOS, Android, and Windows. Currently Visual Studio for Apache Cordova is an extension that only supports Visual Studio Update 4 or Visual Studio Preview. The following platforms are currently supported.

• Android 2.3.3 and later (4.4+ provides the best developer experience)
• IOS 6, 7, and 8
• Windows 8 and 8.1
• Windows Phone 8 and 8.1

1.2 Features

You can use your rich skills in web development (HTML, CSS, and JavaScript) to write application code that can be written in a single set of code but run simultaneously on iOS, Android, and Windows platforms. Apache Cordova is an open source project that provides developers with native hardware (cameras, GPS positioning, barcode scanning, etc.) APIs that are different from the experience in a browser, and you will create a local app for each platform that you can download in the App Store.

1.3 Developing 1.3.1 Writing code

such as IntelliSense, syntax highlighting, these features can be experienced at the time of encoding.

1.3.2 Commissioning and analysis

You don't need to choose different tools for different platforms, just create breakpoints, and you can do different debugging tasks like iOS, Android, and Windows Store in Visual Studio.

1.3.3 Preview and test

Whether you want to use iOS, Android or Windows emulator, or a newly developed visual Studio Emulator for Android, or your phone, tablet, The debugger and launch menu provided by this tool will help you to easily confirm the appearance and functionality of your application.

1.3.4 Sample Program

Here are some sample programs that you might want to see what Apache Cordova can do.

• AngularJS Sample
• Backbonejs Sample
• WinJS Sample

2 installation

This section is about installing Visual Studio Tools for Apache Cordova, and most of the software that appears in this article can be found in the download link you want from Microsoft Download Center.

2.1 Basic Installation 2.1.1 Necessary environment

• Operating systems: Windows 7, Windows 8, Windows 8.1, or Windows Server R2.

Important :

Win7 currently can only develop Android, iOS apps, and cannot develop Windows or Windows Phone apps.

• Visual Studio Update 4 (Professional, Ultimate, Premium, Community) and the following feature components:
  • Tools for maintaining Store apps for Windows 8
  • Windows Phone 8.0 SDK

You can add these components on one of the installed visual Studio Update 4. Open Control Panel and select the programs and features subkey. Locate Visual Studio 2013 in the software list, and right-click to select change . In the Visual Studio installation window that pops up, select Modify . In the Feature list, select the features shown:

If you need to build your application for a specific platform, you will need some additional software environments.

• Android emulator requires an Intel HAXM driver installed on your computer. Refer to run Your Apache Cordova App on Android.
• Windows Phone emulator pc installs Hyper-V. Refer to Hyper-V System Requirements.
• iOS and iOS emulators require a Mac computer that can run Xcode 6. Refer to the install Tools to Build for IOS.

2.2.2 Download software

To download the visual Studio Tools for Apache Cordova extension to Microsoft Download Center, refer to the following article to install the configuration for this extension.

Important :

If you have installed a historical version of the CTP for Visual Studio Tools for Apache Cordova, then uninstall the historical version of the program and features in Control Panel now.

In Visual Studio Preview, Visual Studio Tools for Apache Cordova has been included as an optional option within the installation package.

2.2.3 Installation Configuration

Before you install with visual Studio Update 4, you will first install a patch for Windows Management Framework 3.0. Then, before installing the software, install the third-party software as shown below, because there are many platforms to support, but most are open source software.

• Joyent node. jsenables Visual Studio to integrate Apache Cordova Command line Interface (CLI) and Apache Ripple Simulator.
• git CLI , if you need a special Cordova plugin, you can use git URIs to install it manually.
• Google Chrome, run the Apache Ripple Simulator that can debug, preview iOS, and Android.
• Apache Ant 1.8.0 or later, build Android app.
• Oracle Java JDK 7, build Android apps.
• android SDK , build Android app and Ripple.
• SQLite for Windows Runtime, are required to add SQL connectivity to Windows apps (for the Websql Polyfill plugin).
• Apple iTunes is used when you use your computer to connect to an iOS device to deploy a developed application.

Installing extensions and dependent programs

You can automatically install the above extensions and dependencies by installing visual Studio Tools for Apache Cordova extensions. You can also manually install these third-party software by modifying the system path (refer to the manual installation configuration).

Restart your computer

Note: You can restart your computer only if the above components are properly installed.

Update

Open Visual Studio, select Tools=>extensions and updates=>updates. If there are updates to Visual Studio Tools for Apache Cordova, install the update.

Attention:

When you first install this tool and build your first application, Visual Studio requires networking to download Cordova tools, which takes some time and you can see the progress and status in the Output window.

Installing iOS dependencies

If you want to run your app on an iOS emulator or iOS device, you'll need to install a remote agent on your Mac computer, refer to install Tools to Build for IOS.

2.2.4 Manual Installation Configuration

If you do not have the option to install all extensions in front of you, you can install these extensions manually after installing this tool.

Warning :

Installing the above extensions in addition to Java, there are no sequential requirements, you must configure Java before installing the Android SDK.

• Joyent node. js

Installing the x86 version of node. JS is recommended.

• Google Chrome
• Git Command Line Tools

When installing git command line tools, choose Add git to the system path under this item "adds git to your command prompt path".

Warning :

Git command line tools installs version 1.9.3 By default and will cause errors if you install version 1.9.0.

• Apache Ant
  • Download and extract ant to Local path under c:/ant-1.x.x
  • Add "ant_home" to the environment variable and point to the folder.
  • Added in the system path of the environment variable:%ant_home%\bin
• Oracle Java 7
  • Increase the Java_home value in the environment variable to C:/Program files/java/jdk1.7.0_55
  • Added in the system path of the environment variable:%java_home%\bin
• Android SDK with the following SDK packages:
  • Android SDK Tools (latest version)
  • Android SDK platform-tools (latest version)
  • Android SDK build-tools (latest version)
  • Android 4.4.x (API level) with the following packages:
    • SDK Platform
    • ARM EABI v7a System Image
    • Intel x86 Atom System Image
    • Google APIs (x86 System Image)
    • Google APIs (ARM System Image)

Please refer to the packages shown below and use the Android SDK manager to install.

Add Adt_home to the environment variable to point to the SDK installation folder.

Add%adt_home%\tools;%adt_home%\platform-tools to System path

Tips :

Please install the Android SDK in the default location C:\Program Files (x86) \android\android-sdk.

• Apple ITunes (x86, x64)
• Sqlite
• websocket4net (Required if you ' re developing your apps on Windows 7)
  • Download websocket4net (0.9) at CodePlex. Binaries.zip.
  • Open the downloaded compressed file, copy the Net45\release\websocket4net.dll to%programfiles (x86)%\microsoft Visual Studio 12.0\common7\ide\ In the Commonextensions\microsoft\webclient\diagnostics\toolwindows folder

Android SDK Manager installation

You may encounter GFW blocking when downloading the plugin mentioned above, open the background of SDK Manager, configure the use of HTTP mode instead, and change the Hosts file to add the correct address for Google.

Recommended to use before Baidu search for the following domain name corresponding resolution address:

203.208.46.146 www.google.com 74.125.235.226 developer.android.com 203.208.46.146 dl.google.com 203.208.46.146 dl-ssl.google.com

2.2.5 Installing iOS Tools

There are some additional steps required to install the IOS tool, please refer to the Install tools for Build to IOS.

2.2.6 Setting System Environment variables

Visual Studio automatically discovers the installed third-party software in the system configuration, check the following configuration in the system environment variables:

• Adt_home points to the Android installation path.
• Ant_home points to the ANT folder.
• Git_home points to the GIT installation path.
• Java_home points to the JAVA installation path.

Visual Studio requires these environment variables when building and running the application. You can fix these environment variables by using the Options Settings dialog box in Visual Studio. You may want to reload the default configuration for the following reasons:

• After you have made the above configuration, such as Visual Studio cannot verify the file path, an error message will be displayed in the Output window.
• You have installed multiple versions of the software, but you only want to use a specific version.
• You want your global environment variable to be different from the environment of Visual Studio.

Modify environment variables for Visual Studio

• Open Visual Studio's menu bar, choose Tools, Options.
• In the Options dialog box, select Tools for Apache Cordova, and then select environment Variable Overrides.
• To start modifying:
• Tick the check box and you can change the address.
• If you set the path information to an error, Visual studio will prompt you with an error and display it on the interface.
• If you want to restore the default settings, cancel the check box's hook, or Reset to default .
• When you make a change, remember to click the OK button to save the new configuration.

2.2.7 manually updating the version of Cordova

Visual Studio requires a specific version of Apache Cordova. We are currently developing the ability to select the Cordova version, but unfortunately all projects are now only available with the same version of Cordova and need to be patched in the system for this particular Cordova version.

Warning :

Installing Cordova patches to Visual Studio is not supported by the official. Make sure you are an advanced user (master?). ), then I think you'll be able to handle the following operations, along with the resulting surprises.

Name explanation

Vs-mda	Visual Studio Tools for Apache Cordova
Vs-mda-remote	Tools for remote debugging and publishing iOS installed on Mac

upgrading Visual Studio to support different versions of Cordova

• Create an empty Cordova project after the installation of visual Studio Tools for Cordova is complete.
• Open the command-line tool and enter the following command:

CD%appdata%\npm\node_modules\vs-mda\

If you are manually installing node. js, Vs-mda may be installed under a different path. See the execution output of the above command for details.

• In the command-line tool, enter the following command:

NPM install [email protected]--save

Version is a parameter that represents the Cordova CLI version number, such as 4.1.0.

If you have Cordova installed to a different location, you can enter the "Cordova--version" command to view the installed Cordova version information.

Important:

Make sure you add the "-G" (globle Switch) parameter when you execute the previous command.

• Open the Visual Studio project to run the cleanup solution so that the new version will take effect.

Roll back to a specific version of Cordova

• Open the command prompt line and enter:

NPM uninstall-g Vs-mda

Visual Studio will automatically reinstall VS-MDA the next time the project is built. Or, in C:\Program Files (x86) \microsoft Visual Studio 12.0\common7\ide\ Extensions search for Vs-mda files, locate and modify the Package.json associated to the version you want to use. When the modification Package.json is complete, execute the following command in the same directory:

NPM install-g Vs-mda

To ensure that your iOS app is built correctly on your Mac, vs-mda-remote must be in the same Cordova version as Visual Studio. Please refer to the install Tools to Build for IOS.

Update vs-mda-remote on Mac supports different versions of Cordova

• Open the command-line program on your Mac and enter the following command:

Cd/usr/local/lib/node_modules/vs-mda-remote

If you do not select globally (-G) When installing vs-mda-remote, you may have to look for it.

• Type This command:

sudo npm install [email protected]--save

Make sure that the version parameter is consistent with the installed Cordova CLI. For example, 4.1.0.

Important :

Make sure that all previous commands are the-G globe switch installed for every one.

If you have Cordova installed to a different location, you can enter the "Cordova--version" command to view the installed Cordova version information.

Open the Visual Studio project to run the cleanup solution so that the new version will take effect.

Roll back Vs-mda-remote to a specific version on Mac

• Open the Terminal app on your Mac and type:

sudo npm uninstall-g vs-mda-remote

• Type the following command:

sudo npm install-g vs-mda-remote--save

3 Accessories

Menu	Module		Description
Brief introduction	Visual Studio Tools for Apache Cordova	Http://www.visualstudio.com/en-us/explore/dn841948#Fragment_Overview	English original, Resources Download Learning page
	Apache Cordova	http://cordova.apache.org/	Open Source Project Introduction
	Visual Studio Tools for Apache Cordova Announcements	http://go.microsoft.com/fwlink/?LinkID=518763	Updated Description of the blog
	Visual Studio Emulator for Android	http://go.microsoft.com/fwlink/?LinkID=518404	Introduced
	AngularJS Sample	http://go.microsoft.com/fwlink/?LinkID=398516	Sample source Code
	Backbonejs Sample	http://go.microsoft.com/fwlink/?LinkID=398517	Sample source Code
	WinJS Sample	http://go.microsoft.com/fwlink/?LinkID=398518	Sample source Code

Create a cross-platform mobile app using Cordova+visual Studio