Cordova & Cordova Plugin Installation and Management Tutorial 2 Cordova & Cordova Plugin Installation and Management Li Xu Email: xuli@se.cuhk.edu.hk Department of Systems Engineering and Engineering Management

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

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

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.

Cordova Installation - Install node.js (Windows) Download node.js https://nodejs.org/en/ Get node-v6.11.3-x64.msi

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

Cordova Installation - Install node.js (Mac) Download node.js https://nodejs.org/en/download/ Get node-v8.12.0.pkg

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

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

Cordova Installation - Install jdk (Windows) Download java http://www.oracle.com/technetwork/java/javase/d ownloads/index.html Get jdk-8u144-windows-x64.exe

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

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

Cordova Installation - Install jdk (Mac) Download java https://www.oracle.com/technetwork/java/javase/ downloads/jdk8-downloads-2133151.html Get jdk-8u181-macosx-x64.dmg

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.

Cordova Installation - Install ant (Windows) Download ant https://www.apache.org/dist/ant/binaries/ Get apache-ant-1.10.1-bin.zip Unzip this .zip file to a specified folder like D:\apache-ant- 1.10.1 Configure environment variables D:\apache-ant-1.10.1\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

Cordova Installation - Install ant (Mac) Download ant https://https://ant.apache.org/bindownload.cgi Get apache-ant-1.10.5-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

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.

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

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: https://cordova.apache.org/docs/en/latest/guide/cli/index.html

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.

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.

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).

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 https:// 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.

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>

Questions and Answers