ITF Cordova

# Work environment

  • To use Cordova/Phonegap locally, you need several tools that communicate with each other.
  • We will discuss the configuration only for Android on Windows.
  • Those who develop on OSX should follow this installation tutorial.
  • Make sure you have sufficient admin rights on your laptop!

REMARKS

  • In the rapidly evolving IT landscape, it might occur that the latest versions (and corresponding screen shots) of the software tools differ from the ones we installed when we wrote/updated this course!
    (These screenshots were taken on September 15, 2021.)
  • Please follow the following installation procedure very carefully so that you can create and test your first working Cordova app at the end of this chapter.

# 1: GIT Bash

  • Ensure that terminal (we prefer Git Bash) is installed on your machine
  • Install GIT for Windows
    • Open a new terminal window ("GIT Bash Here") and check your configuration
$ git --version
git version 2.35.0.windows.1
1
2

# 2: Node.js

  • Open a terminal window and check if Node.js (version 12 or later) is installed.
$ node -v && npm -v
v16.13.2
8.1.2
1
2
3

👍 Continue to step 3
👎 Install Node.js as described below.

REMARK

Choose the default installation settings. As such, the "necessary tools" (including Chocolatey) don't need to be installed.
Node installation setting

# 3: Java Development Kit (JDK 8)

  • Android apps are written in Java.
  • The Java C-compiler (javac.exe) must therefore be present and there must be a reference in the path variable.
  • Check whether the Java C compiler (version 1.8.x) is installed.
    $ java -version && javac -version
    Check JDK-versie

IMPORTANT

A JDK version higher than 1.8.x will not work!!!

👍 Continue to step 4
👎 Install the JDK as described below.

  • Download and install the most recent version of the Java SE Development Kit (jdk-8uxxx).
    (This download requires you to register first) Download JDK 8
  • Open the CMD prompt (as Administrator!!!) and open the System variables (Systeemvariabelen) with the command:
    rundll32 sysdm.cpl,EditEnvironmentVariables
  • Click under System variables (Systeemvariabelen) on New... (Nieuw...). Add JAVA_HOME
  • Add a new variable JAVA_HOME that refers to the jdk directory. (Note: do NOT refer to the jre folder!)
    TIP: Copy and paste the path from the file explorer!
    Add path to JAVA_HOME
  • Under System variables (Systeemvariabelen), double click on "path " and add %JAVA_HOME%\bin at the bottom.
    Add path to JAVA_HOME
  • Open a NEW!!! Git Bash window and check that the Java C-compiler is working correctly.
    $ java -version && javac -version
    Check JDK-versie

# 4: Android SDK tools

  • The Android SDK contains tools to create Android apps.
  • The SDK is part of Android Studio, but you can also install it separately.
  • We choose the separate installation.
  • Check if the Android SDK is installed. $ adb version
    Check Android SDK versie

👍 Go to step 5.
👎 Install the Android SDK as described below.

WARNING

  • Cordova 10 uses the Android 10 (API 29) SDK to compile the project.
  • This does not mean that the application only works on Android 10.
    Older versions from version 5.1 are also supported.
  • Download Android command line tools version 25.2.5.
    (This is the latest version with a GUI for the SDK Manager).
  • Create on the root of your C drive a new folder Android-SDK and place the tools folder from the ZIP file in this folder.
  • From the tools/lib folder copy the AVD Manager.exe and SDK Manager.exe files into the Android-SDK folder.
    Below the temporary content of the Android-SDK folder:
    Android SDK folder
  • Doubleclick the SDK Manager.exe file to complete the installation.
  • Under Tools keep the default checked packages.
  • Under Android 10 (API 29) select only the SDK Platform package.
    The other packages should be unchecked. They are optional and not required for Cordova apps. Install Android 10
  • Then under Extras tick the packages Android Support Repository, Google Play services, Google Repository and Google USB Driver and click Install ...
    Install Android 10
  • Return to System variables (Systeemvariabelen).
  • Under System variables (Systeemvariabelen), add a new variable ANDROID_SDK_ROOT that points to the directory C:\Android-SDK.
    Add ANDROID_SDK_ROOT
  • Under System variables (Systeemvariabelen), double click on "path ", add the two path variables %ANDROID_SDK_ROOT%\tools and %ANDROID_SDK_ROOT%\platform-tools and click twice OK.
    Add tools and platform tools
  • Open a New!!! Git Bash terminal and check that the Android SDK is working correctly.
    Check Android SDK version

WARNING

  • xxxxxx

# 5: install Gradle

  • Gradle is a build tool that compiles a Cordova project into an apk file.
  • Please check if Gradle is installed.
    $ gradle -v
    Check Gradle version

👍 Go to stap 6.
👎 Install Gradle as described below.

  • Download and install the latest (binary-only) version of the Gradle Build Tool
    Download Gradle
  • Create a new folder Gradle on the root of your C drive and place the folder gradle-x.x.x from the ZIP file in this folder.
    Unzip Gradle
  • Return to System variables (Systeemvariabelen).
  • Under System Variables, under Path, add the path variables C:\Gradle\gradle-x.x.x\bin and click twice OK.
    Open environment variables
  • Open a New!!! Git Bash window and check that Gradle is working correctly. Check Gradle version

# 6: Install the Cordova CLI and the PhoneGap CLI

  • Install Cordova version 10 and PhoneGap from the terminal.
  • Execute the following instructions one after the other:
$ npm install -g cordova@10 phonegap
$ cordova telemetry on
$ phonegap analytics on
$ cordova -v && phonegap -v
1
2
3
4

Installeer Cordova en PhoneGap

  • Tip: in case of problems, it is best to remove and then reinstall the modules. $ npm uninstall -g cordova phonegap

# 7: final check

  • Create a new folder (e.g. CordovaExercices or LesCordova) on your data disk. This folder will later contain all projects.
  • In the terminal, refer to this folder.
  • Create a new Cordova project. Execute the codes below one by one:
  • Look only at requirements check results for android.
$ cordova create hello be.thomasmore.hello HelloWorld
$ cd hello
$ cordova platform add browser android
$ cordova requirements android
1
2
3
4
  • If the installation was successful, the following will appear in the terminal: (four times xxx: installed xxx) Check installation
  • In case of any error messages, please check that all path variables, JAVA_HOME and ANDROID_SDK_ROOT have been added correctly.

Congratulations!

Your work environment is completely ready to use!

# 8: Assignment

ASSIGNMENT

  • Post a screenshot of the terminal with the result of this command
    $ node -v && cordova -v && phonegap -v && cordova requirements android
    as your first assignment in your Canvas course. First assignment
Last Updated: 1/26/2022, 9:58:14 AM