Webzebra.nl

Cordova is een opensource framework project waarmee je op verschillende platformen met allemaal hun eigen stores een app kan maken met html5 CSS en JavaScript. Het is niet nodig om andere programmeer talen te kennen om voor een bepaalde store een app te kunnen maken.

Hieronder is een beschrijving van de de installatie ervan.
Bestanden versie's:

Om Cordova te installeren moet je NodeJS installeren.
Je begint met het installeren van nodejs.
https://nodejs.org/en/download/



Na de installatie van Node.js kan je hiermee ook cordova installeren.
Open een dosprompt
Geef het volgende commando: npm install -g cordova

De installatie uitgevoerd.

Maak een App met Cordova:
Door het volgende commando te geven maak je een map aan met hierin de bestanden om een app te kunnen maken.

cordova create WebzebraApp nl.webzebra.WebzebraApp Appname

Na het aanmaken zie onderstaande mappen structuur.

Omdat we straks willen testen hoe onze app eruit komt te zien in Adroid toestel gaan we een emulatie installeren.

Android emulatie installeren:
Voor het testen van de app op Android is het handig om een emulatie van Android te hebben draaien.
Ga naar de volgend link https://developer.android.com/studio#Requirements en installeer de Android Studio.

Na de installatie start Android Studio geef je eigen voorkeuren op hierna is die nog even een tijd bezig met configuratie.
Ga in het start scherm onderin naar Configure en kies voor AVD mananger.

Hiermee start je de Android Virtual Device manger mee op. AVD Manger.

Kies Create Virtual Device..

We kiezen voor Phone en dan voor de Nexus 5 kies Next.

We gaan nu aangeven welke Android versie we gaan emuleren.
Kies voor x86 images
Selecteer Oreo Api level 27 x86 android 8.1 (Google Api's)
Druk op Download het binnenhalen kan even duren.
Kies Next.

Je komt nu in bovenstaande scherm. Deze instellingen laten we zo staan.

Je krijgt nu in je Adroid Virtual Device Manager de Nexus 5 te zien.
Druk op het pijltje om het op te starten.

Je ziet nu dat de Nexus 5 opstarten zoals hierboven.
We laten deze staan deze hebben we straks weer nodig.

We gaan nu het android platform toevoegen aan onze App map.
Zorg dat je in de root van je map staat en geef het commando:
cordova platform add android

Als dit gelukt is gaan we onze app op de Adroid emulatie opstarten.
Hiervoor geef je het volgende commando in:
cordova emulate android
Je kan na dit ingeven tegen de verschillende meldingen aanlopen die eerst opgelost moeten worden om verder te kunnen gaan.

Requirements check failed for JDK 8 (1.8.*') ! Detected version 14.0.1
Deze melding kreeg ik op mijn computer omdat er Java versie 14 op stond deze verwijdert omdat ik deze niet nodig had.
HIerna moet er wel JDK 8 geinstalleerd worden om verder te kunnen gaan.
Maar om deze te kunnen downloaden moet je een Oracle account hebben maar je kan ook even zoeken bij filehippo.

Nadat opnieuw het ingeven van het commando:
cordova emulate android
Kreeg ik de volgende melding Could not find an install the gradle wrapper. (gradle is de compiler ).

Dit heb ik opgelost door gradle-6.3-bin.zip te downloaden uit te pakken in de root van C:\
Om gradle te kunnen gebruiken in cordova moeten we een Systeemvariable toevoegen.
Ga naar Systeemeigenschappen
Kies tab Geavanceerd.
Klik op Omgevingsvariabelen.
Selecteer nu Path en kies Bewerken.
Klik op Nieuw en geef het volgende pad in.
C:\gradle-6.3-bin\gradle-6.3\bin (Let op als je een andere versie heb van gradle pas het pad dan aan)

Sla de wijzigingen op.
Start de commando prompt opnieuw op.
Geef wederom het commando:
cordova emulate android
Nu zie je dat de Gradle het gaat compileren voor android omgevind dit kan even duren.

Je ziet dat de App wordt opgestart op je Android Nexus 5 emulator. (Ik heb een kleine aanpassing gedaan door het logo aan te passen in de www\img\ map).


App logo's en iconen aanpassen:
Standaard heeft de App die je gemaakt heb de cordova iconen.
Wanneer je in de map www /img/logo.png aanpast en de volgende regel toevoegd in config.xml
<platform name="android">
<icon src="/www/img/logo.png" />

Sla het xml bestand op en geef het volgende commando in.
cordova emulate android
Controleer of de iconen vervangen zijn: