Visual Studio 2015 and Apache Cordova cross-platform development (I), 2015 cordova

Visual Studio 2015 and Apache Cordova cross-platform development (I), 2015 cordova

Windows 10-Based Visual Studio 2015 cross-platform application development is mainly divided into cross-Android, iOS, and Windows Application Development Based on Visual Studio Xamarin extension, the Visual Studio Tool Based on Apache Cordova develops applications across Windows, Android, and iOS devices, and creates applications across Android and Windows Based on Visual C ++, and Visual Studio tools for Unity to create games across Android, iOS, and Windows platforms.

This series of articles focuses on Visual Studio Tools Based on Apache Cordova and introduces the practices of developing cross-Windows, Android, and iOS applications. The premise of using Apache Cordova is that you are familiar with HTML and JavaScript. You can use Apache Cordova's Visual Studio tool to develop applications across Windows, Android, and iOS.

Main content of this series of articles:

Install Visual Studio and Visual Studio Tools for Apache Cordova on Windows 10

Create a cross-platform Cordova Application

Data Interconnection Between Cordova applications and Microsoft Azure

Visual Studio simulation program for Android

Package and release the Cordova Application

 

What is Cordova?

In short, it is a cross-platform development framework. This framework includes the plug-in model, which provides a JavaScript API that can run on all three platforms (iOS, Android, and Windows.

Because these APIs are cross-platform, you can share most of the code written between the three platforms to reduce development and maintenance costs. In addition, you do not need to start from scratch. If other types of Web applications have been created, these files can be shared with the Cordova application without any modification or redesign.

 

Install Development Environment install Visual Studio 2015 and Visual Studio Tools for Apache Cordova on Windows 10

For https://www.visualstudio.com/downloads/visual-studio-2015-downloads-vs, you can download Visual Studio 2015 (RC version currently available at Microsoft), and you can choose Community version (free) or Enterprise version (commercial version ).

 

Note:

In Visual Studio 2013, Cordova is installed as an independent extension and has been integrated in Visual Studio 2015. We recommend that you use Visual Studio 2015 to develop cross-platform Cordova applications.

 

• HTML/JavaScript (Apache Cordova)
• Windows 8.1 and Windows Phone 8.0/8.1 tools

Make sure that the installer is allowed to install third-party software dependencies, or you can clear software options and manually install the dependencies to be used.

Visual Studio 2015 installation programs include third-party open-source software that supports Cordova application development:

• Joyent Node. js enables Visual Studio to integrate with the Apache Cordova command line interface (CLI) and Apache Ripple Simulator
• Git CLI used when you manually add a Git URI for a specific Cordova plug-in.
• Use Google Chrome to run Apache Ripple simulators on iOS and Android
• Apache Ant 1.8.0 or later is required for Android generation.
• During Android generation, a 32-bit Oracle Java JDK 7 is required. Note: 64-bit Java is not supported.
• Android SDK used in the Android generation process and Ripple.
• Apple iTunes deploys applications to iOS devices.

 

To use Visual Studio to create and run iOS applications on iOS simulators or iOS devices, you must install and configure remote proxy vs-mda-remote on the Mac computer, configure remote proxy in Visual Studio on the PC. For configuration in this section, see the iOS section in Configure the Visual Studio Tools for Apache Cordova (https://msdn.microsoft.com/en-us/library/dn771551 (v = vs.140). aspx.

 

After the extension is installed, open Visual Studio and create a blank application (Apache Cordova) project. Then, you can use JavaScript or TypeScript to develop applications. You can also add a plug-in to extend the application functions. When writing code, the plug-in API will appear in intelliisense.

If you are ready to run the application and execute code line by line, select a simulation program (such as Apache Ripple simulation program or Visual Studio simulation program for Android) or a device that has been directly connected to the computer. Then, start the application. If the application is developed on a Windows PC, it can be run in it. All these options are built into Visual Studio as part of the Visual Studio Tools for Apache Cordova extension.

Install Cordova dependencies manually

We usually choose not to install one or more dependencies with extensions. We will install them manually later. Or, if the Android SDK is installed as the author, the download fails. At this point, we need to use the manual dependency installation skills.

Note that you must select the 32-bit installation package for Java installation because 64-bit Java is not supported.

 

Use these links to manually install dependencies.

Joyent Node. js

We recommend that you install Node. js of x86.

Google Chrome

Git command line tool

When installing the Git command line tool, select the option to add Git to your command prompt path.

Apache Ant

Download Ant and decompress it to a location like C:/ant-1.x.x

Set the ANT_HOME environment variable to the previous position.

Add % ANT_HOME % \ bin to the system path.

32-bit Oracle Java 7

Set the JAVA_HOME environment variable to C:/Program Files/Java/jdk1.7.0 _ 55.

Add this item to system path: % JAVA_HOME % \ bin

Android SDK with SDK package

Android SDK tool (Latest Version)

Android SDK platform tool (Latest Version)

Android SDK generation tools (19.1, 19.0.3, and 21)

Android 4.4.x with the following package (API level 21 ):

SDK Platform

Arm eabi v7a System Image

Intel x86 Atom System Image

Google API (x86 system image)

Google API (ARM system image)

The following illustration shows the minimum package required by the Android SDK manager.

Set the ADT_HOME environment variable to the SDK installation location.

Add this item to the system path: % ADT_HOME % \ tools; % ADT_HOME % \ platform-tools

Apple iTunes (x86, x64)

WebSocket4Net (required for application development on Windows 7)

 

Reset Environment Variables

You can use Visual Studio to detect and maintain the installation path in the following environment variables:

• ADT_HOMEPoint to the Android installation path.
• ANT_HOMEPoint to the Ant folder on your computer.
• GIT_HOMEPoint to the Git installation path.
• JAVA_HOMEPoint to the Java installation path.

Visual Studio uses these environment variables when creating and running your applications. You can view the environment variables and modify their values in the Visual Studio "options" dialog box.

To reset the environment variable to the default value, deselect the check box or select "reset to default ".

 

Create a Cordova cross-platform application and create a new project

 

 

Visual Studio creates a new project and contains the following files in Solution Explorer:

The new Cordova project directory structure:

• MergesStores the special code of each platform, and compiles the code in combination with the www directory. The code files under the same file merges are preferred.

• PluginsThat is, the plug-in directory. The native API that cordova accesses to local device properties is also provided as a plug-in.
• ResSpecial Resources (icons and startup screens) for each platform ).
• WwwContains application code.
  • Css contains the basic CSS style of the default blank template.
  • We recommend that you save the image to this image.
  • Scripts is the default directory for saving JavaScript and TypeScript files.

 

• Config. xmlConfiguration files containing projects
• Taco. jsonStorage enables Visual Studio to create non-Windows operating systems like project metadata on mac
• Www \ index.htmlIs the default homepage of the application.
• Project_Readme.htmlContains useful information links.

 

 

Reference

Https://www.visualstudio.com/en-US/explore/cordova-vs

Https://msdn.microsoft.com/en-us/library/dn771552 (v = vs.140). aspx

Https://cordova.apache.org/

Https://xamarin.com/msdn

Author: Cedar

Microsoft MVP -- Windows Platform Development,

Hortonworks Certified Apache Hadoop 2.0 Developer