Introduction to Visual Studio 2015 and Apache Cordova cross-platform development (i)

The Windows 10-based Visual Studio 2015 cross-platform application development is based on the Visual Studio installation of Xamarin's expanded app development across Android, IOS, and Windows, based on Apache Cordova's Visual Studio Tools develop apps across Windows, Android, and IOS devices, create apps across Android and Windows based on Visual C + +, and Visual Studio Tools for Unity creates games across Android, IOS, and Windows platforms.

This series of articles focuses on the Apache Cordova-based Visual Studio tools to develop a practical experience across Windows, Android and IOS apps. The premise of using Apache Cordova is that you are familiar with HTML and JavaScript, and are not necessarily very proficient in JavaScript, and can use Apache Cordova Visual Studio tools to develop cross windows, Android and I Application of the OS.

The main contents of this article series:

Installing Visual Studio and Visual Studio Tools for Apache Cordova in Windows 10

Create Cordova cross-platform apps

Cordova app with Microsoft Azure data interconnect

Visual Studio Emulator for Android

Packaging and publishing Cordova applications

What is Cordova?

To put it simply, 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) device capabilities.

Because these APIs are cross-platform, you can share most of the code you write between three platforms, reducing development and maintenance costs. Also, there is no need to start from scratch. If you have created other types of WEB applications, you can share these files with the Cordova app without modifying or re-designing in any way.

Install the development environment in Windows 10 to install Visual Studio 2015 and Visual Studio Tools for Apache Cordova

Visual Studio 2015 (currently available in Microsoft's RC version) is available for download at Https://www.visualstudio.com/downloads/visual-studio-2015-downloads-vs and you can select Community version (free) or Enterprise version (commercial version).

Description

In Visual Studio 2013, the Cordova tool is installed as a separate extension and is already integrated in Visual Studio 2015, and it is recommended that you use Visual Studio 2015 Development of Cordova cross-platform applications.

1. Run Visual Studio 2015 setup to ensure that the following features are installed:

• Html/javascript (Apache Cordova)
• Windows 8.1 and Windows Phone 8.0/8.1 tools

Make sure that you allow the installer to install third-party software dependencies, or you can clear the software options and manually install the dependencies that you want to use later.

The installation program for Visual Studio 2015 includes 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 emulator
• The Git CLI to use when adding git URIs manually for a specific Cordova plugin.
• Run the Apache Ripple emulator on IOS and Android using Google Chrome
• The Android build process requires an Apache Ant 1.8.0 or later version.
• The Android build process requires the use of 32-bit Oracle Java JDK 7. Note: 64-bit Java is not supported.
• Android build process and Ripple need to use the Android SDK.
• Apple itunes deploys the app to your iOS device.

1. Install the tools for iOS

To use Visual Studio to create and run an iOS app on an iOS emulator or iOS device, you must install and configure Remote Agent vs-mda-remote on your MAC computer and configure the remote agent in Visual Studio on your PC. For the configuration of this section, readers should refer to Configure the Visual Studio Tools for Apache Cordova (https://msdn.microsoft.com/en-us/library/dn771551 (v= vs.140). aspx) in the iOS section.

After you install the extension, open Visual Studio and create a blank app (Apache Cordova) project. Then, you can use JavaScript or TypeScript to develop your app. You can also add plug-ins to extend the functionality of your app, and plug-in APIs appear in IntelliSense when you write code.

If you are ready to run your app and execute code line by row, select an emulator (such as the Apache Ripple emulator or the Visual Studio Emulator for Android) or a device that is directly connected to your computer. Then, launch the app. If you are developing an application on a Windows PC, you can run it. All of these options are built into Visual Studio as part of the Visual Studio Tools for Apache Cordova extension.

Manually installing the Cordova dependency

Usually we choose not to install one or more dependencies with extensions , and install them manually later. or download failure when installing the Android SDK like the author. At this point, we all need the ability to manually install dependencies.

Please note that Java is installed by selecting the 32-bit installation package because 64-bit Java is not supported.

Use these links to manually install the dependencies.

Joyent node. js

Installing the x86 version of node. JS is recommended.

Google Chrome

Git command-line tools

Choose the option to add git to your command prompt path when you install the GIT command-line tool.

Apache Ant

Download Ant and unzip it to a location like c:/ant-1.x.x

Set the ANT_HOME environment variable to point 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 the 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 in 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 when developing an app on Windows 7)

1. Download websocket4net (0.9) from CodePlex. Binaries.zip.
2. Copy Net45\release\websocket4net.dll from the downloaded zip file to%programfiles (x86)%\microsoft Visual Studio 12.0\common7\ide\ on your computer The Commonextensions\microsoft\webclient\diagnostics\toolwindows folder.

Resetting environment variables

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

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

Visual Studio uses these environment variables when you create and run your app. You can View environment variables and modify their values through the Visual Studio Options dialog box.

1. on the Visual Studio menu bar, choose tools and options .
2. In the Options dialog box, select the tool that applies to Apache Cordova, and then select Environment Variable Overrides.
3. Select the check box for the item you want to modify, and then modify the value.

To reset an environment variable to its default value, uncheck its check box or select Reset to default.

Create a Cordova cross-platform app to create a new project

1. Open Visual Studio as an administrator user. On the menu bar, choose File, new, project.

1. In the New Project dialog box, under Templates, selectJavaScript and Apache Cordova apps, and then select the Blank app template.

Visual Studio creates a new project that contains the following files in the solution Explorer

The new Cordova project directory structure:

• merges The special code that stores each platform, compiles with the WWW directory merge, the same file merges under the code file takes precedence.

• plugins is the plug-in directory, Cordova native APIs that access local device properties are also available as plug-ins.
• Res is suitable for special resources (icons and splash screens) for each platform.
• www contains the application code.
  • CSS contains the basic CSS style for the default blank template.
  • Images recommended images are saved here.
  • Scripts is the default save directory for JavaScript and TypeScript files.

• config file that contains the project
• Taco.json Storage enables Visual Studio to build project metadata on non-Windows operating systems like Mac
• www\index.html is the default main page of the app.
• project_readme.html contains links to useful information.

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

Cedar

Microsoft MVP--Windows Platform development,

Hortonworks Certified Apache Hadoop 2.0 Developer

Introduction to Visual Studio 2015 and Apache Cordova cross-platform development (i)