PhoneGap 8.0 CLI - Complete installation tutorial for Windows 10 - Finally



Download Brave Browser



How to create your First Phonegap Android APK using the CLI(Command Line Interface)



Dear Kollox Friends!,

The learning curve of PhoneGap was not easy, not because it is difficult but simply because the information is scattered all over the place, it is messy and not well explained.

I have decided to create a full tutorial for you using the latest version of Phonegap(8.0.0).
Please leave me a comment if my tutorial helped you! It is always nice when I can interact with users who have managed to sort out their issues using my tutorials.

I will teach you the proper way of getting everything working smoothly from Android Studio to Phonegap. This is my workflow, others may have a completely different worlflow.

This article will be updated in real time to make sure we keep having a working solution for Phonegap

1 - Download Android Studio:

https://developer.android.com/studio/


2 - Delete previous versions of Android Studio

If you have a previous version of Android Studio installed, delete it, and also remove the folders here, this way we really start from scratch:

C:\Users\.android
C:\Users\.AndroidStudio2

You may have other Android version names, don't worry about it, just remove them.


3 - First Android Studio SDK configuration


 When the Android Studio windows show up click on "Configure" and then "SDK Manager".







4 - Download the required SDK tools


 Now you are in the SDK Manager, from the tab menu select "SDK Tools" and at the bottom right tick "Show Package Details"

 



5 - Select the latest SDK Build


  Select the SDK build 28.0.3 (It seems to work with this one at the time of this tutorial):






6 - Download an emulator for later on


From the SDK Platform tab, choose 1 emulator, in my case I choose:







7 - Download a good IDE (Visual Studio Code)


Close Android Studio.

Download an IDE, in my case "Visual Studio Code" which is free

https://code.visualstudio.com/


8 - Download "Laragon", it is like Xampp but in much of better!


https://laragon.org/download/

In my case I will be using the  "Download Laragon - WAMP (124 MB)" version.
Remember, using Laragon has nothing to do with Phonegap, I am just trying to teach you a good workflow. With Laragon, you will be able to also work with Laravel or php in general(in other projects away from Phonegap). Having all your web projects in one single directory makes it super easy for your future works.




9 - Go to the right folder path and wait there 


Open "Visual Studio"(or any IDE) and open this folder:


Visual Studio steps are File>>Open Folder
C:\laragon\www

Click on the top bar on View>>Terminal


Your terminal will now open in this location
C:\laragon\www

stay there, we will carry on this step in 2 minutes, go to step 10




10 - Install Node & JDK


Go here and download the LTS version which is at the time of this article 8.12.0(Including npm version 6.14):

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

Download Java Jdk to run Java:

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

If you are on windows 10  64 Bit, select the download "jdk-8u181-windows-x64.exe"




11 - Add the environment variable Paths in Windows system variables


Go to the bottom left search bar at the bottom left of your screen and type "environment"




Your environment popup windows will have 2 distinctive areas:
User Variables & System variables.

In the User Variables add this:



add:
ANDROID_HOME             C:\Users\<username>\AppData\Local\Android\Sdk
ANDROID_NDK_HOME   C:\Users\<username>\AppData\Local\Android\Sdk\ndk-bundle
JAVA_HOME                     C:\Program Files\Java\jdk1.8.0_181

all with their respective paths ie: C:\Users\<username>\AppData\LocalSdk

Make sure you replace <username> by your own account username

Remember, your paths might be slightly different!



Now go to the "System variables" and "edit" the paths:  
Add:
%JAVA_HOME%
C:\Program Files\nodejs\
C:\Program Files\Java\jdk1.8.0_181





12 - Continuing from step 9, your terminal should still be open at C:\laragon\www


In the terminal and at the above location type this:
Node --version   --> If node is installed properly, you should see the Node version

If yes type:
npm init
The npm init command will create a package.json file for you.


Now type:
npm install -g [email protected]
This command will install Phonegap 8.0(at the time of this article)

Finally type:
phonegap create my-application-name-here


Replace my-application-name-here with your own application name


You will now have your new application folder at:
C:\laragon\www\my-application-name-here

Create your Android platform
At the time of this article, the version 7.1.1 did not work with the camera, this is why you will need to install the version 7.0.0

phonegap add platform [email protected]

13 - Delete and then update all your plugins

 If you have followed my tutorial till here, well done! I know it is not easy....a lot of things to set, download and type.


From your command prompt in Visual Studio code go to your application folder:
C:\laragon\www\my-application-name-here

This is your phonegap folder, but before we proceed to go any further, we must update all our plugins.

C:\laragon\www\my-application-name-here\plugins

As I do not know which plugin you may or may not use for your project, I will paste here the list of all my plugins. If this is a fresh new install and you have not yet installed a single plugin, you can safely paste this in your command prompt(in visual studio)


phonegap plugin remove cordova-plugin-battery-status
phonegap plugin remove cordova-plugin-camera
phonegap plugin remove cordova-plugin-media-capture
phonegap plugin remove cordova-plugin-device
phonegap plugin remove cordova-plugin-dialogs
phonegap plugin remove cordova-plugin-geolocation
phonegap plugin remove cordova-plugin-globalization
phonegap plugin remove cordova-plugin-inappbrowser
phonegap plugin remove cordova-plugin-network-information
phonegap plugin remove cordova-plugin-console
phonegap plugin remove cordova-plugin-device-orientation
phonegap plugin remove cordova-plugin-network-information
phonegap plugin remove cordova-plugin-media
phonegap plugin remove cordova.plugins.diagnostic
phonegap plugin remove cordova-sqlite-storage
phonegap plugin remove cordova-plugin-file-transfer
phonegap plugin remove cordova-plugin-whitelist
phonegap plugin remove cordova-plugin-file

Don't worry if some of the plugins do not exist, it will simply ignore them

All removed?????

Ok let's re-add all the updated plugins with this command:

phonegap plugin add cordova-plugin-battery-status
phonegap plugin add cordova-plugin-camera
phonegap plugin add cordova-plugin-media-capture
phonegap plugin add cordova-plugin-device
phonegap plugin add cordova-plugin-dialogs
phonegap plugin add cordova-plugin-geolocation
phonegap plugin add cordova-plugin-globalization
phonegap plugin add cordova-plugin-inappbrowser
phonegap plugin add cordova-plugin-network-information
phonegap plugin add cordova-plugin-console
phonegap plugin add cordova-plugin-device-orientation
phonegap plugin add cordova-plugin-network-information
phonegap plugin add cordova-plugin-media
phonegap plugin add cordova.plugins.diagnostic
phonegap plugin add cordova-sqlite-storage
phonegap plugin add cordova-plugin-file-transfer
phonegap plugin add cordova-plugin-file
phonegap plugin add cordova-plugin-whitelist
phonegap plugin add cordova-plugin-request-location-accuracy
phonegap plugin add cordova-plugin-media-capture
phonegap plugin add cordova-sqlite-storage

Wait for all the plugins to install in your app.......

Word of warning, if you get errors with the cordova-plugin-camera version 4.0.3, downgrade it to 4.0.2 like that:

phonegap plugin add [email protected]


14 - Create a simple index.html page in your www folder

Go to your WWW folder and drop in a simple <h2>Hello world</h2> in it.

When this is done, save the file and let's continue to the next part which I have to say, took me ages to get my head around!!!! I have spent 2 days trying to figure out this bug...


15 - Generating your first Android APK app


Generating an APK will cause a problem with this SDK version, it will require a minimum of Gradle version 4.6, but each time, the APK script will tell you that you only have the gradle version 4.1. Don't worry I have a working solution for you!

First try to generate your APK  to see the bug, type:

phonegap build android -d

the -d will create a longer log with any possible issues arising from the failed compiling.

Did you get the error I was speaking about???

Here is how to fix it:

Go to:
C:\laragon\www\my-application-name-here\platforms\android\cordova\lib\builders\StudioBuilder.js

Look at line 226 for this:
var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'https\\://services.gradle.org/distributions/gradle-4.1-all.zip';

Change it to:


var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'https\\://services.gradle.org/distributions/gradle-4.10.2-all.zip';

This will tell the script to go an fetch the latest version of Gradle, download it, unzip it and use it to compile your app.

Make sure you go here:
C:\laragon\www\keepmaltacleanandroid\platforms\android\build.gradle

Find this line:
    dependencies {
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.android.tools.build:gradle:3.0.0'
    }

Change it to:

    dependencies {
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.android.tools.build:gradle:3.2.0'
    }

Now you are all set, try to generate your APK one more time:


phonegap build android -d

Did it work? If no, leave me a comment below and I will try to help you, if yes, let continue to the next step!



16 - Sending your APK to your Mobile Phone automatically


How to send the APK to your mobile phone automatically to bypass an emulator and test your work on a real device?

This workflow is great because it enables you to test your work on a real device. Emulators can cause all sort of problems on low spec machines, this is why doing it this way is fantastic!

Connect your mobile via usb to your computer / laptop and type this in the command line:

adb devices

If it worked you may receive a notification on your mobile with a certificate request, accept it(tick the box so you do not have to do this each time.
May sure your device is listed in the command line, you should see something like this:

List of devices attached
18452d78        device


Now we know that your computer can communicate with your mobile, try to send your APK file to your mobile device using this command, just make sure you are in your project folder(sounds stupid but it is important!).

from here:
C:\laragon\www\my-application-name-here


Type in your command prompt:
phonegap run android -d

Wait a bit, perhaps 15 to 20 seconds.

Your mobile phone will start going funny, some windows or popups may appear and suddenly...voila!!! Your APK will be installed in your mobile app.

But wait....how do I test it?????


16 - How to test your Phonegap app on Windows?


The trick is that you already have the tool to test your app and don't even know it....it is called "Chrome!"

That's right if you do not use Chrome download the latest version and go in the www bar and type:

chrome://inspect 


You will see a small windows showing your app script click on "Inspect" as shown here:




That's it, I hope you loved this tutorial!

Remember, my experience with Phonegap has been trials and errors....it took me ages to get this thing going and working well, I just wanted to pass this knowledge to you so you do not struggle as much as I did.
We need a bigger community of Phonegap users as it is a superb piece of software, share this page to anyone who may be interested in working with phonegap.

Last thing, to build your project, it is simple, do like you are using a normal HTML, CSS and javascript page, drop everything in your www folder and generate your APK each time.


Leave me a comment if you struggle! I will do my best to help you with this