1. Cordova & Cordova Plugin Installation and Management
Tutorial 2
Cordova & Cordova Plugin Installation and Management
Li Xu
Department of Systems Engineering and Engineering Management

2. Overview Cordova Installation Node.js Installation jdk Installation
ant Installation
How to create a new Cordova project
Cordova-Simulate
Cordova Plugin Installation and Management

3. Cordova Installation 4 Steps : Install node.js Install jdk Install ant
Install cordova

4. Cordova Installation - Install node.js
What is NodeJS?
A JavaScript runtime built on Chrome‘s JavaScript Engine
Using the NodeJS package ecosystem called  “npm” to get all the necessary libraries and frameworks onto our local development machine
At this time, “npm” is the largest ecosystem of open source libraries in the world
Why it is necessary for Cordova Installation?
We use “npm” to install the necessary files
NodeJS is a JavaScript runtime built on Chrome‘s JavaScript Engine. Today, we’ll be using the NodeJS package ecosystem called npm. This helps us get all the necessary libraries and frameworks onto our local development machine. At the time of this writing, npm is the largest ecosystem of open source libraries in the world.
What is the differences between “npm” and “nvm”?
“nvm” is used to manage the version of NodeJS and “npm”
“npm” is installed together with NodeJS package, and manages the plugins of NodeJS.

5. Cordova Installation - Install node.js (Windows)
Download node.js
Get node-v x64.msi

6. Cordova Installation - Install node.js (Windows)
This shows node.js installed successfully

7. Cordova Installation - Install node.js (Mac)
Download node.js
Get node-v pkg

8. Cordova Installation - Install node.js (Mac)
This shows node.js installed successfully

9. Cordova Installation - Install jdk
What is JDK?
Java SE Development Kit (JDK)
Includes a complete JRE plus tools for developing, debugging, and monitoring Java applications
Why it is necessary for Cordova Installation?
Includes a JRE to provide java runtime environment
Provide necessary tools for java applications

10. Cordova Installation - Install jdk (Windows)
Download java
ownloads/index.html
Get jdk-8u144-windows-x64.exe

11. Cordova Installation - Install jdk (Windows)
Configure environment variables
(D:\softwareData\)java\jdk1.8.0_144\bin
(D:\softwareData\)java\jre1.8.0_144\bin

12. Cordova Installation - Install jdk (Windows)
This shows jdk installed successfully

13. Cordova Installation - Install jdk (Mac)
Download java
downloads/jdk8-downloads html
Get jdk-8u181-macosx-x64.dmg

14. Cordova Installation - Install ant
What is ant?
A Java library and command-line tool
Ant supplies a number of built-in tasks allowing to compile, assemble, test and run Java applications.
Ant can also be used effectively to build non Java applications, for instance C or C++ applications.
More generally, Ant can be used to pilot any type of process which can be described in terms of targets and tasks.
and Apache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other. The main known usage of Ant is the build of Java applications. Ant supplies a number of built-in tasks allowing to compile, assemble, test and run Java applications. Ant can also be used effectively to build non Java applications, for instance C or C++ applications. More generally, Ant can be used to pilot any type of process which can be described in terms of targets and tasks.
Why it is necessary for Cordova Installation?
The main known usage of Ant is the build of Java applications.

15. Cordova Installation - Install ant (Windows)
Download ant
Get apache-ant bin.zip
Unzip this .zip file to a specified folder like D:\apache-ant
Configure environment variables D:\apache-ant \bin
Copy tools.jar from (D:\softwareData)\java\jdk1.8.0_144\lib to (D:\softwareData)\java\jre1.8.0_144\lib
This shows ant installed successfully

16. Cordova Installation - Install ant (Mac)
Download ant
Get apache-ant bin.tar.gz
Double Click this .tar.gz file to a specified folder like /Users/xli/Desktop/Applications/ant
Add the following path into the system PATH variable via the “.bash_profile” file:
/Users/xli/Desktop/Applications/ant/bin
This shows ant installed successfully

17. Cordova Installation - Install cordova (Windows)
Type “npm install –g cordova” at a command prompt
If you get this, installment is successful
If you get “’cordova’” is not recognized as an internal or external command’ after typing above command statement, check your environment path. There should be one named “(c:\users\YourUserName)\AppData\Roaming\npm\”. It should be added automatically when installing node.js. If there isn’t one, add it.

18. Cordova Installation - Install cordova (Mac)
Type “npm install cordova –prefix=/your_dir/Cordova -g” at a command prompt
Add the path “/your_dir/Cordova/bin” to your system “PATH” variable via the “.bash_profile” file
This shows Cordova installed successfully

19. How to create a new Cordova project (Windows and mac)
Go to the directory where you maintain your source code, and create a cordova project:
E.g.: cordova create hello com.example.hello HelloWorld
Add the platforms that you want to target your app. Before doing this, you need to access your project’s directory first:
E.g.: cd hello; cordova platform add ios
To check your current set of platforms:
E.g.: cordova platform ls
More detailed information about creating Cordova projects:

20. Cordova-Simulate (Windows and mac)
Install the package “cordova-simulate”:
npm install –g cordova-simulate –prefix=/your_dir/Cordova-Simulate
Mac: add the path “/your_dir/Cordova-Simulate” to your system “PATH” variable via the “.bash_profile” file; Windows: add that path into your system path variable using the way mentioned in Page 11
From the command line anywhere within a Cordova project, enter the following:
Simulate [<platform>] [--target=<browser>]
where platform is any Cordova platform that has been added to your project. Defaults to browser
browser is the name of the browser to launch your app in. Can be any of the following: default, chrome, chromium, edge, firefox, ie, opera, safari
Now I will show you an example on mac, the command working on windows systems is exactly the same as this.

21. Cordova Plugin Installation and Management
What are plugins and what are they used for?
A plugin exposes a Javascript API for native SDK functionality. Plugins are typically hosted on npm and you can search for them on the plugin search page. Some key APIs are provided by the Apache Cordova open source project and these are referred to as Core Plugin APIs.
When you build and view a new project, the default application that appears doesn't do very much. You can modify the app in many ways to take advantage of standard web technologies, but for the app to communicate closely with various device-level features, you need to add plugins that provide access to core Cordova APIs.

22. Cordova Plugin Installation and Management
How to install the plugins you want?
You can use the command “cordova plugin search + package name” to search plugins you are interested in, and use the command “cordova plugin add + package name” to install them (They can also be added using a directory or a git repo).

23. Cordova Plugin Installation and Management
Using Plugman to Manage Plugins
1.Installing Plugman:
$ npm install –g plugman
2.Create a Cordova Project
3.Adding a Plugin:
$ plugman install
--platform <ios|android|blackberry10|wp8>
--project <directory>
--plugin <name|url|path>
name: The directory name where the plugin contents exist.
url: A URL starting with or git://, pointing to a valid git repository that is clonable and contains a plugin.xml file.
path: A path to a directory containing a valid plugin which includes a plugin.xml file.

24. Cordova Plugin Installation and Management
Using Plugman to Manage Plugins
4.Remove a Plugin
$ plugman uninstall
--platform <ios|android|blackberry10|wp8>
--project <directory>
--plugin <id>
5.Help Commands
$ plugman -help
6.Registry Actions
Searching for a Plugin:
plugman search <plugin keywords>
Changing the Plugin Registry:
plugman config set registry <url-to-registry>
plugman config get registry
Get Plugin Information:
plugman info <id>

25. Questions and Answers