Cordova Zelfstudie
Aan de slag met Cordova

Android Angular 2 AngularJS HTML ionic2 ionic-framework iOS JavaScript jQuery Node.js
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

  1. 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.

  2. een webontwikkelaar en wil een web-app implementeren die is verpakt voor distributie in verschillende app store-portals.

  3. 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:

  1. 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/

  2. (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.

  3. 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 het config.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

voer hier de afbeeldingsbeschrijving in

Nadat de installatie van Android Studio is voltooid, moet u een nieuwe ANDROID_HOME met pad toevoegen aan uw Android SDK

voer hier de afbeeldingsbeschrijving in

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;

voer hier de afbeeldingsbeschrijving in

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

voer hier de afbeeldingsbeschrijving in

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



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow