Werkomgeving inrichten

Inleiding

  1. Om Cordova/Phonegap lokaal te gebruiken, heb je verschillende tools nodig die onderling met elkaar communiceren.
  2. We bespreken de configuratie enkel voor Android op Windows.
    Wie op OS X ontwikkelt, volgt best deze installatie tutorial.
  3. Zorg dat je voldoende admin-rechten hebt op je toestel!

De terminal

  1. Cordova en PhoneGap werken met opdrachtregels die je uitvoert via een Command-line-interface (CLI).
  2. Op Windows gebruik je standaard de Command Prompt (cmd.exe) of Powershell.
  3. Op Mac gebruik je standaard de terminal.
  4. Sommige IDE's, zoals WebStorm, hebben een ingebouwde terminal. Deze mag je natuurlijk ook gebruiken.
  5. De schermafbeeldingen in deze cursus zijn hoofdzakelijk afkomstig van de GIT Bash terminal.
    (Tip: met GIT Bash kan je ook Unix commado's uitvoeren zoals ssh, scp, cat, ...)
  6. Je kan alle oefeningen perfect met de standaard terminal van het OS uitvoeren of met de terminal van je IDE!
  1. Volg onderstaande installatieprocedure nauwlettend zodat je op het einde van dit hoofdstuk een eerste, werkende Cordova app kan maken en testen.
  2. Download steeds de laatste versie van de verschillende tools.
  3. Omwille van de snelle evolutie komen de versienummers in onderstaande schermafbeeldingen misschien niet overeen met de versies die je zelf installeert.

Stap 1: installeer GIT Bash

Zelfs als je GIT niet gebruikt, moet je deze toch installeren. Cordova en PhoneGap gebruiken enkele GIT-processen in de achtergrond.

  1. Download de GIT client op: https://git-scm.com/downloads
    GIT Client (GIT Bash)
  2. Volg de standaard installatieprocedure.
    Let op dat tijdens de installatie de optie "Windows Explorer Integration" zeker staat aangevinkt!
    GIT Client (Windows Explorer Integration)
  3. Plaats de cursor boven een willekeurige map en kies uit het snelmenu (rechts-klik) de optie GIT Bash Here.
  4. Controleer de installatie met onderstaand commando:
    $ git --version
    GIT Bash Here

Stap 2: Java Development Kit (JDK 8)

  1. Android apps worden geschreven in Java.
  2. De Java C-compiler (javac.exe) moet daarom aanwezig zijn en er moet een verwijzing in de path-variabele staan.
  3. Contoleer of de Java C-compiler (versie 1.8.x) geïnstalleerd is.
    Een hogere versie dan 1.8.x werkt niet!!! 
    $ javac -version && java -version
    Java C-compiler

thumb_up Ga verder naar stap 3.

thumb_down Installeer de JDK zoals hieronder beschreven staat.

  1. Download en installeer de recentste versie van de Java SE Development Kit (jdk-8uxxx).
    Download JDK
  2. Zoek naar "De omgevingsvariabelen van het systeem bewerken". (Let op: niet van uw account.)
    Omgevingsvariabelen
  3. Klik onderaan op "Omgevingsvariabelen"en voeg in het onderste deel, onder Systeemvariabelen, een nieuwe variabele JAVA_HOME toe.
    Omgevingsvariabelen
  4. De variabele JAVA_HOME verwijst naar de jdk-folder. (Let op: verwijs niet naar de jre-folder!)
    TIP: kopieer en plak het pad vanuit de verkenner!
    Pad naar JDK

Onderstaande schermafbeeldingen zijn afkomstig van Windows 10.
Werk je op Windows 8, dan bestaat de path-variabele uit één lange string. Alle paden zijn in deze string gescheiden door een puntkomma.
Je plakt best eerst de string in het kladblok, past die daar aan en kopieer die dan vervolgens terug naar de path-variabele. Vergeet niet een puntkomma voor elke variabele te plaatsen.

  1. Dubbelklik onder Systeemvariabelen (NIET onder Gebruikesrvariabelen!) op "path" en voeg onderaan %JAVA_HOME%\bin toe.
    Omgevingsvariabelen
  2. Klik op OK om het venster te sluiten.
  3. Open een NIEUW!!! consolevenster en controleer of de C-compiler correct functioneert.
    Omgevingsvariabelen

Stap 3: Android SDK tools

  1. De Android SDK bevat tools om Android apps te maken.
  2. De SDK maakt deel uit van Android Studio, maar je kan ze ook apart installeren.
  3. Wij kiezen voor de aparte installatie.
  4. Contoleer of Android SDK geïnstalleerd is. 
    $ adb version
    ADB version

thumb_up Ga verder naar stap 4.

thumb_down Installeer Android SDK zoals hieronder beschreven.

  1. Download Android command line tools versie 25.2.5.
    (Dit is de laatste versie met een GUI voor de SDK Manager.)
  2. Maak op de root van je C-schijf een nieuwe map Android-SDK en plaats de map tools uit het ZIP-bestand in deze map.
  3. Kopieer uit de map tools/lib de besanden ADV Manager.exe en SDK Manager.exe naar de map Android-SDK.
    Ziehier de voorlopige inhoud van de map Android-SDK:

  4. Dubbelklik op het bestand Android SDK Manager om de installatie te voltooien.
  5. Behoud onder Tools de default aangevinkte pakketten.
  6. Vink onder Android 9 (API 28) enkel het pakket SDK Platform aan.
    De overige pakketten kan je best afvinken. Ze zijn optioneel en niet voor Cordova/PhoneGap apps.
    API-level
  7. Vink vervolgens onder Extras de pakketten Android Support Repository, Android Play services, Android Repository en Google USB Driver aan en klik op Install ...
    API-level
  8. Keer terug naar "De omgevingsvariabelen van het systeem bewerken".
  9. Voeg onder Systeemvariabelen een nieuwe variabele ANDROID_SDK_ROOT toe die verwijst naar de map C:\Android-SDK.
    ANDROID_SDK_ROOT
  10. Voeg onder Systeemvariabelen bij Path de twee path-variabelen %ANDROID_SDK_ROOT%\tools en %ANDROID_SDK_ROOT%\platform-tools toe en klik tweemaal op OK.
    Android path-variabelen
  11. Open een NIEUW!!! consolevenster en controleer of de Android SDK correct functioneert.
    ADB version

Stap 4: installeer Gradle

  1. Gradle is een build-tool die een Cordova-project compileert naar een apk-bestand.
  2. Contoleer of Gradle geïnstalleerd is. 
    $ gradle -v
    Gardle versie controleren

thumb_up Ga verder naar stap 5.

thumb_down Installeer Gradle zoals hieronder beschreven.

  1. Download en installeer de laatste (binary-only) versie van de Gradle Build Tool
    Download Gradle
  2. Maak op de root van je C-schijf een nieuwe map Gradle en plaats de map gradle-5.6 uit het ZIP-bestand in deze map.
    Download Gradle
  3. Keer terug naar "De omgevingsvariabelen van het systeem bewerken".
    Omgevingsvariabelen
  4. Voeg onder Systeemvariabelen bij Path de path-variabelen C:\Gradle\gradle-5.6\bin toe en klik tweemaal op OK.
    Path variabele voor Gradle
  5. Open een NIEUW!!! consolevenster en controleer of Gradle correct functioneert.
    gradle -v

Stap 5: installeer node.js en npm

  1. node.js brengt JavaScript buiten de browser en gebruikt hiervoor de Chrome's V8 JavaScript engine.
  2. npm (Node Package Manager) heb je nodig om Cordova en PhoneGap te installeren.
    node.js en npm worden gelijktijdig geïnstalleerd.
  3. We gebruiken node.js enkel als platform. We gaan in deze cursus geen node-programma's schrijven.
  1. Download en installeer de laatste (current) versie van node.js via https://nodejs.org/en/
  2. Volg de standaard installatieprocedure.
    Installeer node.js
  3. Open de terminal en controleer de installatie met het commando: 
    $ node -v && npm -v
    Controleer node.js

Stap 6: installeer Cordova CLI en PhoneGap CLI

  1. Installeer en contoleer Cordova en PhoneGap vanuit de terminal.
  2. Voer volgende instructies één-na-één uit: 
    $ npm install -g cordova phonegap
$ cordova telemetry on
$ phonegap analytics on
$ cordova -v && phonegap -v
    Controleer cordova/PhoneGap
  3. TIP: heb je nog een oude versie van Cordova of PhoneGap, dan kan je deze altijd updaten. 
    $ npm update -g cordova phonegap
  1. Tip: bij problemen kan je de modules best verwijderen en opnieuw installeren. 
    $ npm uninstall -g cordova phonegap
$ npm install -g cordova phonegap

Stap 7: laatste controle uitvoeren

  1. Maak op je data-schijf een nieuwe map; LesCordova aan. In deze map komen later alle projecten te staan.
  2. Verwijs het pad in de terminal naar deze map.
  3. Maak een nieuw Cordova-project. Voer onderstaande codes één-na-één uit:
  4. Kijk enkel naar requirements check result for android. 
    $ cordova create hello be.thomasmore.hello HelloWorld
$ cd hello
$ cordova platform add browser android
$ cordova requirements
  5. Indien de installatie correct verlopen is, verschijnt dit in de terminal:
    (De opmerkingen over de browser en electron zijn niet relevant!)
    Controleer cordova/PhoneGap
  6. Bij eventuele foutboodschappen controleer je best even of alle path-variabelen, JAVA_HOME en ANDROID_SDK_ROOT correct zijn toegevoegd.

Proficiat! Je werkomgeving is volledg klaar voor gebruik!