Phonegap - How to Setup PhoneGap(CLI) for your first Project on Windows based System? What are Requirements, tools and packages? And why CLI?

How to Setup PhoneGap(CLI) for your first Project on Windows based System? What are Requirements, tools and packages? And why CLI?

If you want to create a Phonegap app without help of any GUI or you are a CLI lover then Phonegap CLI is right choice for you. Phonegap CLI contains much more feature then its Desktop app. It contains much more features like: building, running & packaging your phonegap application. It’s supported on MAC and Windows.

Before going through Phonegap CLI installation, there are few basic requirements you will need prior to install Phonegap CLI:

JDK
Android SDK CLI
Node.js
Phonegap CLI
Cordova

Installation of JDK:

· Go to Command line to check whether JDK is installed or not on your system.

By Run Tool:

· Start > All Apps > Windows System > Run > Type “cmd” to Run TextBox

Or (Shortcut Key)

· Window Button + R Button > Type “cmd” to Run TextBox.

Direct open Command Prompt from:

· Start > All Apps > Windows System > Cmd

Once Command Prompt is open type below commands to check whether JDK is installed or not on your System.

· javac –version

· java –version

If you will get the Java version to your command prompt screen that means you have already installed Java to your System. If any error occurs that means you need to install JDK first.

Click to below link for Download JDK:

https://www.oracle.com/java/technologies/javase-downloads.html

· Check for latest version JDK right now its 14.0.1 is the latest version.

· Click on JDK Download

· Check for your System Compatible version for me its 64bit:

· Accept Oracle License and Download:

· Save Setup file to your Local system.

· After Downloading is complete > double click to your Setup.

· Click on Next > Setup file path (Or leave it By Default path) > Next (Your installation will start).

Installation done. Now it’s not your final step. To take JDK effect properly we need to Setup Environment for JDK first.

JDK Environment Setup:

For JDK Environment Setup you need to follow below steps:

· Open "Control Panel" > "System and Security" > "System" > Click "Advanced system settings" on the left pane.

Your System properties will PopUp.

· Switch to "Advanced" tab > Click "Environment Variables" button.

· Now go to the bin path of JDK folder, where JDK is installed. For me it’s:

C:\Program Files\Java\jdk-14.0.1\bin

Note: Check for Variable “JAVA_HOME” and “Path” first if its available then just paste the path while click on Edit to the path and close it with “;”.

· Under "System Variables" (the bottom pane), scroll down to select variable "Path" > Click on "New"/ Click on “Edit” if already exists

· Click to Edit (System Variables if JAVA_HOME already present) or New

· Set up Name and Variable as shown to below image:

· Click ok

· Then check for Path and place the bin path:

· Click Ok

· Then Click Ok

Open new command prompt and run following commands to verify your installation:

· Command 1: path

· Command 2: javac –version

· Command 3: java – version

You will get output like below:

Congrats you have successfully installed JDK on your system.

Installation for Android SDK Command line tool:

Go to the android Developer website.

https://developer.android.com/studio

Note: You no need to download all android Studio and SDK package for Phonegap. What is required is “Command Line Tool”.

Scroll Down your page and look for Android Command Line SDK Tool.

Click on windows link.

Accept License Terms of Android Site. And start download.

Save package to your local.

Why SDK for Phonegap:

As we know that SDK is an Android tool and published by Android Studio. Then why we are installing it for PhoneGap? Well the answer is if you want to build your .apk android app file in your local you should have SDK package installed on your local else you can use online build method provided by Adobe online we will discuss about this on later posts.

After downloading done extract your zip file to following path and create a folder named Android > android_sdk:

C:\Program Files\

Environment Setup:

Open "Control Panel" > "System and Security" > "System" > Click "Advanced system settings" on the left pane.

Your System properties will PopUp.

Switch to "Advanced" tab > Click "Environment Variables" button.

Now go to the Bin path, where SDK is installed. For me it’s:

C:\Program Files\Android\android_sdk\tools

Note: Check for Variable “ANDROID_HOME” and “Path” first if its available then just paste the path while click on Edit to the path and close it with “;”.

Under "System Variables" (the bottom pane), scroll down to select variable "Path" > Click on "New"/Click on “Edit” if already exists

Click to Edit (System Variables) > New

Set up Name and Variable as shown to below image:

Click ok > then again Ok

Install Node.js:

To install node.js first go to node.js website. Check below link:

https://nodejs.org/en/download/

Download “Windows Installer (.msi) 32bit/64bit as per your system requirement.

Once its download install it to your system.

After installation you can verify NPM installation by two commands mentioned below.

npm -v

node –v

you will get the version if successfully installed please check screenshot:

Congrats you have successfully installed node.js to your system.

Install PhoneGap from Command line(CLI):

To install phonegap from command line you need to run following command:

npm install –g phonegap

Once its installed successfully you will get message like below:

You can verify your installation by typing simple command to your command prompt is “phoneap -v”

Congrats you have successfully installed Phonegap to your system.

Install Phonegap Desktop app(Optionl Step for this tutorial):

Go to phonegap official website and click to link to download Phonegap desktop app:

https://phonegap.com/products/

Check for Phonegap desktop app and download the windows version:

Once it will download install it to your local.

Check for installation folder and look for phonegap icon.

Double click to icon and you will get the window like:

BOOM, Great you have successfully installed Phonegap to your system.

Install CORDOVA:

To install Cordova go to command prompt.

Type command(without inverted commas) : “npm install -g cordova” and press ENTER.

When this finished, you should be able to run the command cordova -v which should print the Cordova version to the terminal.

Congrats you have installed Cordova on your system successfully.

Install Phonegap Mobile App:

You can go to Play store and check for phonegap developer app.

Install phonegap developer app to your mobile.

When you open this app you will get window like this:

Congrats you installed phonegap app on your mobile phone successfully.

Phonegap CLI can be used to do everything from creating your app to packaging them for distribution. To build, run and package apps for multiple platforms.

In next post we will create our first apk package from phonegap CLI.