Cordova Zelfstudie
Aan de slag met Cordova
Zoeken…
Opmerkingen
Apache Cordova wordt gebruikt om mobiele apps met HTML, CSS en JS te maken.
Apache Cordova richt zich op meerdere platforms met één codebasis.
Apache Cordova is gratis en open source.
Cordova verpakt uw HTML / JavaScript-app in een native container die toegang heeft tot de apparaatfuncties van verschillende platforms. Deze functies worden weergegeven via een uniforme JavaScript-API, zodat u eenvoudig één set code kunt schrijven om bijna elke telefoon of tablet op de markt te targeten en te publiceren naar hun app-winkels.
Wie zou Apache Cordova kunnen gebruiken
een mobiele ontwikkelaar en wil een applicatie uitbreiden naar meer dan één platform, zonder deze opnieuw te moeten implementeren met de taal en toolset van elk platform.
een webontwikkelaar en wil een web-app implementeren die is verpakt voor distributie in verschillende app store-portals.
een mobiele ontwikkelaar die geïnteresseerd is in het combineren van native applicatiecomponenten met een WebView (speciaal browservenster) die toegang heeft tot API's op apparaatniveau, of als u een plug-ininterface tussen native en WebView-componenten wilt ontwikkelen.
Inleiding tot Cordova: https://cordova.apache.org/docs/en/latest/
Installatie of instellingen
Ga als volgt te werk om het opdrachtregelprogramma cordova te installeren:
Download en installeer Node.js. Tijdens de installatie moet u node en npm op uw opdrachtregel kunnen aanroepen.
Om te zien of Node is geïnstalleerd, opent u uw CLI (opdrachtregelinterface). Voor Windows is het de Windows-opdrachtprompt, voor MAC is het de Terminal. Type:
$ knooppunt -v
Dit zou een versienummer moeten afdrukken, dus je ziet zoiets als deze v0.10.35. Als Node niet is geïnstalleerd, zoekt u uw besturingssysteem en volgt u de instructies hier: https://nodejs.org/en/download/package-manager/
(Optioneel) Download en installeer een git-client , als je er nog geen hebt. Na de installatie zou je git op je opdrachtregel moeten kunnen gebruiken. De CLI gebruikt het om middelen te downloaden wanneer er naar wordt verwezen met een url naar een git repo.
Installeer de cordova- module met het hulpprogramma npm van Node.js. De cordova- module wordt automatisch gedownload door het hulpprogramma npm .
op OS X en Linux:
$ sudo npm install -g cordova
op Windows:
C:\>npm install -g cordova
De vlag -g hierboven geeft aan dat npm cordova wereldwijd moet installeren. Anders wordt het geïnstalleerd in de submap node_modules van de huidige werkmap.
Na de installatie moet u cordova zonder argumenten op de opdrachtregel kunnen uitvoeren en moet de helptekst worden afgedrukt.
Een applicatie maken
voorafgaand
Installeer de Cordova cli-tools als u dat nog niet hebt gedaan.
$ npm install -g cordova
Navigeer naar de gewenste werkmap.
$ cd /path/to/coding/folder
De applicatie maken
Maak een Nieuwe Applicatie
$ cordova create <appProjectName> <appNameSpace> <appName>
Voor dit voorbeeld maken we een toepassing 'HelloWorld':
$ cordova create helloWorld com.example.helloworld HelloWorld
Platforms en plug-ins toevoegen
platforms
Navigeer eerst naar de map van de toepassing.
$ cd <appName>
Voeg de platforms toe waarvoor u wilt bouwen. De lijst met ondersteunde platforms vindt u hier .
$ cordova platform add <platformList>
We voegen het Android-, iOS- en browserplatform toe. Gebruik ruimtescheiding om meerdere platforms tegelijk toe te voegen. Het browser
is handig voor het testen in de browser.
Met het argument --save
wordt de platformlijst opgeslagen in het config.xml
bestand van Cordova.
$ cordova platform add android ios browser --save
Een uitgebreide lijst met opties met betrekking tot het platform
is te vinden in de cordova-documentatie .
plugins
Cordova-plug-ins kunnen u toegang geven tot apparaathardware, OS-specifieke functies en nog veel meer functies.
De structuur van het plugin
incommando is hetzelfde als die voor platforms
$ cordova plugin add <plugins.value>
We voegen de cordova-bestandsinvoegtoepassing (voor eenvoudige toegang tot apparaatopslag) en de cameraplug-in toe, die toegang geeft tot de camera van het apparaat om foto's en video's te maken.
$ cordova plugin add cordova-plugin-file cordova-plugin-camera --save
Denk eraan: het gebruik van de
--save
argument schrijft uw instellingen naar hetconfig.xml
bestand. Zeer handig om het project eenvoudig opnieuw te maken op een andere machine.
Cordova heeft een uitstekende plug-in zoekpagina-instelling voor uw gemak. Je kunt het hier vinden .
Uw toepassing uitvoeren
Het uitvoeren van de applicatie is vrij eenvoudig. Gebruik gewoon de volgende opdracht.
$ cordova run <platform name>
Voor ons voorbeeld voeren we onze test-app uit in de browser.
$ cordova run browser
Hiermee open je je standaardbrowser met je applicatie klaar om te testen.
Installeer Cordova op Windows
Installeer eerst Java SE Development Kit
Dit kan zo eenvoudig zijn als downloaden, dubbelklikken op het gedownloade bestand en de installatie-instructies volgen. Download de Java SE Development Kit voor installatie van de officiële website. Java SE-ontwikkelingskit. downloads
Nadat de JDK-installatie is voltooid, moet u een nieuwe JAVA_HOME
systeemvariabele met pad naar uw JDK toevoegen
Voeg naast de PATH
systeemvariabele pad toe aan bin dirrectory van JDK
Nu kunt u de installatie testen. Open de opdrachtprompt en gebruik de opdracht
javac -version
Als je een versienummer ziet, heb je alles goed gedaan!
Installeer nu Android SDK Tools met Android Studio
Ik heb aanbevolen de Android Studio te installeren, omdat dit op dit moment de beste manier is om snel en gemakkelijk alle noodzakelijke dingen voor Android-ontwikkeling te installeren. De lijst met dingen omvat:
- Android Development Kit (Android SDK, Android SDK Manager, Android SDK Platform-tools, Android SDK Build-tools)
- Android-emulator met een groot aantal Android-configuraties
- IDE (voor Android-ontwikkeling op Java)
- Gradle
- Het zou erg handig zijn als je Java leert en in de toekomst wilt beginnen met het ontwikkelen voor Android op Java
Download Android Studio dus van de officiële website developer.android.com
De installatie van Android Studio is heel eenvoudig en u hoeft alleen de instructies te volgen. Maar u moet nota nemen van de Android SDK-installatielocatie
Nadat de installatie van Android Studio is voltooid, moet u een nieuwe ANDROID_HOME
met pad toevoegen aan uw Android SDK
Nu moet u Android SDK en Android SDK Tools toevoegen aan PATH-systeemvariabele. Selecteer PATH in de lijst Gebruikersvariabelen en klik op de knop Bewerken. Voeg aan het einde van het veld Variabele waarde een puntkomma toe en volg paden:
C:\Users\User\AppData\Local\Android\sdk;C:\Users\User\AppData\Local\Android\sdk\tools;C:\Users\User\AppData\Local\Android\sdk\platform-tools;
Nu kunt u de installatie testen. Open de opdrachtprompt en gebruik de opdracht
adb version
Dit zou de versie van de Android Debug Bridge moeten weergeven. Als je een versienummer ziet, heb je alles goed gedaan!
Open nu opnieuw de opdrachtprompt en gebruik de opdracht
android
voor open Android SDK Manager
Selecteer in Android SDK Manager om te installeren
- Android SDK-hulpmiddelen
- Android SDK Platform-tools
- Android SDK Build-tools
- Android SDK Build-tools
- Android 6.0 (API 23)
- Android 5.1.1 (API 22)
- Android 5.0.1 (API 21)
- Android 4.2.2 (API 17)
- GPU-hulpprogramma's voor foutopsporing
- Android-ondersteuningsrepository
- Android-ondersteuningsbibliotheek
- Google Play-services
- Google Repository
- Google USB-stuurprogramma
- Intel x86 Emulator Accelerator (HAXM-installatieprogramma)
en klik op de knop Installeren.
Notitie:
Cordova Android Ondersteunde API-niveaus
Inzicht in Android API-niveaus
Versiedistributie van Android-platform / API
Installeer Cordova
Open de opdrachtprompt en installeer Cordova met de opdracht
npm install -g cordova
versies
Nieuwste Cordova-versie:
Cordova 6.1.0 - https://cordova.apache.org/news/2016/03/23/tools-release.html Cordova 6.0.0 - https://cordova.apache.org/news/2016/01/28 /tools-release.html
Nieuwste Android-platform en iOS-plaatvorm
Cordova Android 5.2.2 - https://cordova.apache.org/announcements/2016/07/02/android-5.2.0.html Cordova iOS 4.2.1 - https://cordova.apache.org/announcements/2016 /07/11/cordova-android-5.2.1.html