Visual Studio 2015 cross-platform application development based on Windows 10 is mainly divided into application development across Android, iOS and Windows based on Visual Studio installation of Xamarin extensions .Apache Cordova's Visual Studio tools for developing apps across Windows, Android and iOS devices, Visual C++ for creating apps across Android and Windows, and Visual Studio tools for Unity for creating games across Android, iOS and Windows platforms.
This series of articles focuses on Apache Cordova-based Visual Studio tools and introduces the practical aspects of developing applications across Windows, Android, and iOS. The premise of using Apache Cordova is that you are familiar with HTML and JavaScript, and you don't have to be very proficient in JavaScript to develop applications across Windows, Android, and iOS using Apache Cordova's Visual Studio tools.
The main content of this series of articles:
Install Visual Studio and Visual Studio Tools for Apache Cordova in Windows 10
Create Cordova Cross-Platform Apps
Data Interconnection between Cordova Apps and Microsoft Azure
Visual Studio Emulator for Android
Packaging and publishing Cordova applications
What is Cordova?
Simply put, it is a framework for cross-platform development. The framework includes a plug-in model that provides a JavaScript API that runs on device functionality on all three platforms (iOS, Android, and Windows).
Because these APIs are cross-platform, you can share most of the code you write between the three platforms, reducing development and maintenance costs. Also, there is no need to start from scratch. If other types of web applications have been created, these files can be shared with the Cordova application without modification or redesign in any way.
Install the development environment
Install Visual Studio 2015 and Visual Studio Tools for Apache Cordova in Windows 10
You can download Visual Studio 2015 (the current RC version provided by Microsoft) at https://www.visualstudio.com/downloads/visual-studio-2015-downloads-vs , you can choose the Community version (free) or the Enterprise version (commercial version) ).
illustrate:
The Cordova tool is installed as a separate extension in Visual Studio 2013, and has been integrated into Visual Studio in Visual Studio 2015. It is recommended that you use Visual Studio 2015 to develop Cordova cross-platform applications.
- Run the Visual Studio 2015 installer, making sure the following features are installed:
- HTML/JavaScript (Apache Cordova)
- Tools for Windows 8.1 and Windows Phone 8.0/8.1
Make sure to allow the installer to install third-party software dependencies, or you can clear the software options and manually install the dependencies you want to use later.
The installer for Visual Studio 2015 includes third-party open source software that supports Cordova app development:
- Joyent Node.js enables Visual Studio to integrate with Apache Cordova Command Line Interface (CLI) and Apache Ripple Emulator
- Git CLI required to manually add Git URIs for specific Cordova plugins.
- Run the Apache Ripple emulator on iOS and Android with Google Chrome
- Apache Ant 1.8.0 or higher is required for the Android build process.
- The Android build process requires 32-bit Oracle Java JDK 7. Note: 64-bit Java is not supported.
- The Android build process and the Android SDK that Ripple needs to use.
- Apple iTunes deploys applications to iOS devices.
- Install tools for iOS
To use Visual Studio to create and run iOS apps on an iOS simulator or iOS device, the remote proxy vs-mda-remote must be installed and configured on the Mac computer, and the remote proxy must be configured in Visual Studio on the PC. For the configuration of this section, please refer to 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 installing the extension, open Visual Studio and create a blank application (Apache Cordova) project. Then, you can use JavaScript or TypeScript to develop the application. You can also add plugins to extend the functionality of your application, and the plugin's API will appear in IntelliSense when you write code.
If you're ready to run the app and execute code line-by-line, choose an emulator (such as the Apache Ripple emulator or the Visual Studio emulator for Android) or a device that's connected directly to your computer. Then, start the application. If the application was developed on a Windows PC, it can run there. All of these options are built into Visual Studio as part of the Visual Studio Tools for Apache Cordova extension.
Manually install Cordova dependencies
Usually we choose not to install one or more dependencies with extensions and install them manually later. Or encounter a download failure when installing the Android SDK like the author did . At this point, we all need the skills to manually install dependencies.
Please note that please select the 32-bit installation package for Java installation, because 64-bit Java is not supported.
Use these links to install dependencies manually.
It is recommended to install the x86 version of Node.js.
Select the option to add Git to your command prompt path when installing the Git command line tool.
Download Ant and extract it to a location like C:/ant-1.xx
Set the ANT_HOME environment variable to point to the previous location.
Add %ANT_HOME%\bin to the system path.
Set the JAVA_HOME environment variable to C:/Program Files/Java/jdk1.7.0_55
Add this to the system path: %JAVA_HOME%\bin
Android SDK Tools (latest version)
Android SDK Platform Tools (latest version)
Android SDK Build Tools (19.1, 19.0.3 and 21)
Android 4.4.x (API level 21) 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)
The illustration below shows the minimum package required in the Android SDK Manager.
Set the ADT_HOME environment variable to the SDK installation location.
Add this to the system path: %ADT_HOME%\tools;%ADT_HOME%\platform-tools
WebSocket4Net (required when developing applications on Windows 7)
- Download WebSocket4Net(0.9).Binaries.zip from CodePlex .
- Copy net45\Release\WebSocket4Net.dll from the downloaded zip file to the %ProgramFiles(x86)%\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\WebClient\Diagnostics\ToolWindows folder on your computer.
reset environment variables
The installation paths in the following environment variables can be detected and maintained using Visual Studio:
- 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 creating and running your app. You can view environment variables and modify their values through the Visual Studio Options dialog .
- On the Visual Studio menu bar , choose Tools , Options .
- In the Options dialog, select Tools for Apache Cordova, then select Environment Variable Overrides.
- Please select the checkbox of the item you want to modify, and then modify the value.
To reset an environment variable to its default value, uncheck its checkbox or select "Reset to Default".
Create Cordova Cross-Platform Apps
Create new project
- Open Visual Studio as an administrator user. On the menu bar, choose File, New, Project.
- In the New Project dialog, under Templates, select JavaScript and Apache Cordova App, then the Blank App template.
Create a new project in Visual Studio and include the following files in the Solution Explorer
| New Cordova project directory structure: |
- merges stores the special code of each platform, which is merged and compiled with the www directory, and the code files under the same file merges take precedence.
- plugins is the plugin directory, and cordova's native API for accessing local device properties is also provided in the form of plugins.
- res applies special resources (icons and splash screens) for each platform.
-
www contains application code.
- css Contains basic CSS styles for the default blank template.
- images Suggested app images are saved here.
- scripts is the default save directory for JavaScript and TypeScript files.
- config.xml contains the configuration file of the project
- taco.json stores project metadata that enables Visual Studio to build non-windows OS like mac
- www\index.html is the default home page of the application.
- Project_Readme.html contains useful informational links.
refer to
https://www.visualstudio.com/en-US/explore/cordova-vs
https://msdn.microsoft.com/en-us/library/dn771552(v=vs.140).aspx
Author: Cedar
Microsoft MVP -- Windows Platform Development,
Hortonworks Certified Apache Hadoop 2.0 Developer