Development environment
Development environment
Voor we kunnen beginnen met het bouwen van Mobiele Applicaties is het nodig om bepaalde software te installeren. Dit hoofdstuk beschrijft welke tools nodig zijn en hoe deze geïnstaleerd kunnen worden.
Node.js
Node.js is een tool waarmee je JavaScript servers kan draaien en een JavaScript interpreter kan installeren op je machine. Daarnaast bevat Node ook npm. De Node package manager (of npm) kan gebruikt worden om verschillende soorten JavaScript apps te bootstrappen, om bibliotheken te installeren en een overzicht te houden van de packages die nodig zijn voor je JavaScript app, zowel voor development als voor de eindgebruiker.
Gebruikt bovenstaande link om Node.js te installeren, kies bij voorkeur voor de LTS versie (Long term support). Als dit problemen zou geven kan je eventueel voor de recentste versie kiezen.
Kies tijdens de installatie zeker voor 'Automatically install the necessary tools. Note that this wil also install Chocolatey. The script will pop-up in a new window after the installation completes'. Deze optie is vereist om sommige plug-ins te installeren die je in les 4 of voor je project zou kunnen gebruiken.
Node package manager & pnpm
Npm is een volwaardige package manager waarmee alle nodige pakketten geïnstalleerd kunnen worden, toch kiezen we voor het alternatief pnpm. Deze package manager is tot 2x sneller dan npm en download een pakket slechts één keer terwijl npm een installatie voor elk project (voorbeeld/oefening) vereist. Installeer pnpm door het volgende commando uit te voeren in een shell (cmd, powershell, bash, ...).
npm install -g pnpm
Om zo min mogelijk commando's uit te voeren is het nodig om een configuratiefile toe te voegen voor pnpm. Download npmrc.zip, unzip en plaats het bestand vervolgens in je homefolder, de locatie van deze folder is natuurlijk afhankelijk van je besturingssysteem:
- Windows: "C:\Users\JOUW GEBRUIKERSNAAM HIER"
- Linux: "/home/JOUW GEBRUIKERSNAAM HIER"
- macOS: "/Users/JOUW GEBRUIKERSNAAM HIER"
Windows machines
Om de Ionic and Angular CLI te gebruiken op een Windows machine moet je eerst configureren dat scripts uitgevoerd mogen worden. Hiervoor start je PowerShell starten als Administrator en voer je vervolgens het commando uit.
Set-ExecutionPolicy RemoteSigned
pnpm setup
Herstart PowerShell je terminal vervolgens en voer het onderstaande commando uit. Herstart de terminal daarna nog een laatste keer.
pnpm setup
Problemen met het uitvoeren van pnpm commando's?
Npm en pnpm vertonen problemen als je gebruikersnaam bestaat uit meerdere woorden, i.e. als deze een spatie bevat. Controleer onder welke naam je gebruikersmap bewaard is ('C:\Users\JOUW GEBRUIKERSNAAM'). Zie je hier een map staan waarvan de naam een spatie bevat, dan moet je een symlink aanmaken om npm te kunnen gebruiken. Een symlink of symbolic link is een folder op je bestandssysteem die geen data bevat maar een link naar een andere locatie op je bestandssysteem. Als je userfolder 'C:\Users\Voornaam Achternaam' is dan moet een symlink gemaakt worden zodat 'C:\Users\Voornaam' verwijst naar 'C:\Users\Voornaam Achternaam'.
Start powershell.exe als Adminstrator (via het rechterklikt menu) en voer volgende commando's uit.
cd ~
$newHome = (Get-Location).Path.Split(' ')[-1]
cd ..
New-Item -ItemType SymbolicLink -Path ~/../$newHome -Value ~
Ionic & Angular
Ionic en Angular zijn vrij eenvoudig te installeren. Open een terminal en voer onderstaand commando uit.
pnpm install -g @ionic/cli @angular/cli
Dankzij de -g vlag zijn Ionic en Angular nu globaal beschikbaar op je machine.
ERROR The configured global bin directory ...
Als je onderstaande foutboodschap krijgt moet je de $URL toevoegen aan je path. Voeg dan volgende instructies uit.
ERROR The configured global bin directory "$URL" is not in PATH
Systeem variabelen kunnen (in Windows) geconfigureerd worden door te zoeken (Win + q) naar 'Omgevingsvariabelen' (of 'Environment variables' op Engelstalige systemen).
Open dit programma vervolgens en druk, onderaan, op de knop 'Omgevingsvariabelen' Vervolgens zoek je in het onderste kader naar de path variabele en druk je op bewerken. In het nieuwe venster druk je op de knop nieuw en plak je de URL uit de foutmelding in het invoerveld. Bewaar vervolgens alle wijzigingen en herstart je terminal. De commando's zouden nu wel moeten werken.
Ionic, Angular & pnpm
Standaard zijn Ionic en Angular geconfigureerd om gebruik te maken van npm de package manager die op de meeste systemen beschikbaar is. Aangezien wij gebruik maken van pnpm moeten we deze default configuratie aanpassen, dit kan door middel van onderstaande commando's.
ionic config set -g npmClient pnpm
ng config -g cli.packageManager pnpm
WebStorm
Tijdens de lessen wordt er gebruik gemaakt van de WebStrom IDE, dit is echter geen verplichting. Werk je liever met Visual Studio Code, dan mag dat. Let op, je moet dan wel zelf op zoek naar de juiste plug-ins voor TypeScript, Angular, Ionic, ESLint, ...
Ga naar de JetBrains Education pagina en vraag een gratis licentie aan via je Thomas More email. Om Webstorm te installeren heb je twee opties, de eerste is om de JetBrains Toolbox te gebruiken. Dit is een applicatie waarmee alle JetBrains producten geïnstalleerd kunnen worden, verder geeft deze app je ook toegang tot beta-build van nieuwe versies en worden de geïnstalleerde tools automatisch geüpdatet. De andere optie is om WebStorm als stand-alone te installeren.
WebStorm terminal
Tijdens de lessen wordt de geïntegreerde PowerShell terminal van WebStorm gebruik. Standaard is WebStorm ingesteld om het klassieke cmd.exe te gebruiken als terminal. Windows gebruikers passen dit best aan zodat de commando's die in de les gebruikt worden zonder problemen op de hun machines gebruikt kunnen worden. Voor macOS of *nix gebruikers moet er niets veranderen aangezien de hoeveelheid commando's beperkt blijft, en deze dezelfde naam hebben in bash en de macOS terminal.
- Open de instellingen in WebStorm (File > Settings)
- Ga naar de terminal settings (Tools > Terminal)
- Stel 'Shell path' in op powershell.exe
- Druk op 'Apply'
ESLint
Een deel van de punten voor dit vak staat op het consequent hanteren van stijlregels. Elk Ionic project bevat een ESLint configuratie file die gebaseerd is op de aanbevolen stijlregels voor Angular. WebStrom kijkt standaard niet naar deze regels. Activeer ESLint op onderstaande manier.
- Open in WebStorm het settings menu (File > Settings)
- Ga naar het ESLint menu (Languages & Frameworks > JavaScript > Code Quality Tools > ESLint)
- Kies voor 'Automatic ESLint configuration'
- (Kies eventueel voor 'Run eslint --fix on save'. Deze optie zal de code automatisch formatteren, telkens een bestand bewaard wordt. Op deze manier kan je geen fouten maken. Let wel op, dit duurt even. Ben je geneigd om regelmatig te bewaren, dan kan je deze optie beter af laten staan.)
Code Style
De default ESLint configuratie van een Ionic project vraagt dat je single-quotes gebruikt in de plaats van de double-quotes die door WebStorm gebruikt worden. Om dit probleem op te lossen kan je ervoor kiezen om WebStorm altijd gebruik te laten maken van single-quotes in TypeScript code.
- Open in WebStorm het settings menu (File > Settings)
- Ga naar het Code Style menu (Editor > Code Style > TypeScript)
- Ga naar het Punctuation tabblad.
- Gebruik onderstaande instellingen.
Android Studio
Vanaf les 4 is Android Studio vereist, de apps worden geschreven in WebStorm maar moeten gecompileerd worden in Android Studio. Deze IDE is gebaseerd op de JetBrains IDEs en is dus beschikbaar via de JetBrains Toolbox. Het is echter aan te raden om Android Studio manueel te downloaden van de officiële site en het installatiepad niet te veranderen. Doe je dit wel, dan moet je een nieuwe systeemvariabele aanmaken en hieraan, als waarde, het installatiepad geven.
Als je Android Studio de eerste keer start zal je gevraagd worden om een SDK te installeren. Moest deze optie niet verschijnen, dan kan je dit menu ook via de menubalk openen (File > Settings > Appearance & Behavior > System Settings > Android SDK). Op het moment van schrijven wordt een Capacitor project gecompileerd voor Android 12L (Sv2). Deze versie moet dus zeker geïnstalleerd zijn, als je problemen zou hebben tijdens het compileren, dan kan je proberen nieuwere versies te installeren.
In ditzelfde menu, in het tabblad 'SDK Tools' moeten minstens volgende zaken geïnstalleerd worden (als je op een AMD processor werkt voeg je 'Android Emulator Hypervisor Driver for AMD-processors (installer)' & 'Android Emulator Hypervisor Driver (installer)' toe in de plaats van 'Intel X86 Emulator Accelerator (HAXM Installer)'.
Systeemvariabele definiëren
Capacitor moet weten waar Android Studio geïnstalleerd is. Als aan de standaard opties van Android Studio niets gewijzigd is, zal Capacitor geen problemen hebben om met Android Studio te communiceren. Is Android Studio echter op een niet-standaard locatie geïnstalleerd, dan moet de systeemvariabele CAPACITOR_ANDROID_STUDIO_PATH geconfigureerd worden. Capacitor leest de waarde van deze variabele in en weet zo hoe Android Studio aangesproken kan worden.
Systeem variabelen kunnen (in Windows) geconfigureerd worden door te zoeken (Win + q) naar 'Omgevingsvariabelen'
(of 'Environment variables' op Engelstalige systemen).
Open dit programma vervolgens en druk, onderaan, op de knop 'Omgevingsvariabelen'
Kies vervolgens, onderaan, voor de knop 'Nieuw'. In het nieuwe venster geef je als naam CAPACITOR_ANDROID_STUDIO_PATH in en als waarde $RootDir\bin\studio64.exe, waarin $RootDir vervangen wordt met de map waar Android Studio geïnstalleerd is.
Java Runtime Environment
Android apps moeten ondertekend worden voordat ze gepubliceerd kunnen worden op de Google Play Store. Maar ook om gebruik te kunnen maken van Firebase (authentication, database, blob storage, ...). Om een Android app te ondertekenen moeten sleutels gegenereerd worden via keytool.exe, een programma dat standaard met de Java RE meegeleverd wordt. Je hoeft Java niet apart te installeren, deze software wordt namelijk meegeleverd met Android Studio. Het is echter wel nodig om Windows te vertellen waar het systeem keytool.exe kan vinden. Hiervoor moet de PATH variabele aangepast worden. Dit is een systeemvariabele die alle mappen bevat waarin Windows naar programma's kan gaan zoeken die op de command line (cli) uitgevoerd worden.
Open, zoals hierboven beschreven, het programma waarmee omgevingsvariabelen aangepast kunnen worden. En zoek vervolgens in het onderste scherm naar de variabele 'Path', druk vervolgens op 'Bewerken' en voeg de waarde C:\Program Files\Android\Android Studio\jre\bin toe aan de lijst. Als Android Studio niet op de standaard locatie geïnstalleerd is moet het eerste deel (C:\Program Files\Android\Android Studio) opnieuw vervangen worden met het gekozen installatiepad.
Voorbeelden & oplossingen uitvoeren op jouw computer
Alle code die je van in cursus download wordt aangeboden zonder de node_modules map. Dit betekent dat Ionic, Angular, ... niet geïnstalleerd zijn in het gedownloade project. Om alle libraries te installeren moet je in elk project dat je download, in de terminal onderstaande opdracht uitvoeren.
pnpm install