Share via

Een Apache Cordova-app bouwen met Azure Mobile Apps

  • Artikel

In deze zelfstudie leert u hoe u een cloudgebaseerde back-endservice toevoegt aan een Platformoverschrijdende Apache Cordova-app met behulp van Azure Mobile Apps en een back-end van een mobiele Azure-app. U maakt zowel een nieuwe back-end voor mobiele apps als een eenvoudige takenlijst-app waarin app-gegevens worden opgeslagen in Azure.

Voltooi deze zelfstudie voordat u verdergaat met andere Apache Cordova-zelfstudies over het gebruik van de functie Mobile Apps in Azure-app Service.

Vereisten

U hebt het volgende nodig om deze zelfstudie te voltooien:

Deze zelfstudie kan worden voltooid op Windows- of Mac-systemen. De iOS-versie van de app kan alleen worden uitgevoerd op een Mac. Deze zelfstudie maakt alleen gebruik van Windows (met de app die wordt uitgevoerd op Android).

Apache Cordova 8.1.2 of eerder vereist

Apache Cordova heeft een incompatibele wijziging in het hulpprogramma uitgebracht in v9.0.0. Als Apache Cordova v9.0.0 of hoger is geïnstalleerd, werkt de invoegtoepassing niet, waarbij wordt geklaagd over een afhankelijkheidsprobleem met de q module.

Visual Studio Code

Er is een Apache Cordova-extensie voor Visual Studio Code waarmee u de toepassing kunt uitvoeren met foutopsporing. Visual Studio Code wordt ten zeerste aanbevolen voor apache Cordova-ontwikkeling.

Gradle installeren

De meest voorkomende fout bij het configureren van Apache Cordova in Windows is de installatie van Gradle. Dit is standaard geïnstalleerd met Android Studio, maar is niet beschikbaar voor normaal gebruik. Download en pak de nieuwste versie uit en voeg de bin map vervolgens handmatig toe aan uw PATH.

Het Apache Cordova-quickstartproject downloaden

Het Apache Cordova-quickstartproject bevindt zich in de map van de samples/cordovaGitHub-opslagplaats azure/azure-mobile-apps . U kunt de opslagplaats downloaden als een ZIP-bestand en vervolgens uitpakken. De bestanden worden gemaakt in de azure-mobile-apps-main map.

Nadat u het bestand hebt gedownload, opent u een terminal en wijzigt u de map naar de locatie van de bestanden.

De back-endservice implementeren

Als u de quickstart-service wilt implementeren, meldt u zich eerst aan bij Azure met de Azure CLI:

az login

Er wordt een webbrowser geopend om de autorisatie te voltooien.

Selecteer indien nodig een abonnement.

Een brongroep maken

Typ het volgende om een resourcegroep te maken:

az group create -l westus -n zumo-quickstart

Met deze opdracht maakt u een resourcegroep met de naam zumo-quickstart voor alle resources die we maken. Vervang westus door een andere regio als u geen toegang hebt tot de regio Westus of als u liever een regio dichter bij u in de buurt hebt.

De back-end implementeren in Azure

De service bestaat uit de volgende resources:

  • Een App Service-hostingabonnement op het gratis abonnement.
  • Een website die wordt gehost in het App Service Hosting-plan.
  • Een Azure SQL-server.
  • Een Azure SQL-database in de Basic-laag (er worden kosten in rekening gebracht).

De Azure SQL-database is de enige resource waarvoor kosten in rekening worden gebracht. Zie Prijzen voor meer informatie.

Als u de resources wilt implementeren, typt u de volgende opdrachten:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Voer na voltooiing de volgende opdracht uit om de uitvoer weer te geven:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

Met deze opdracht wordt informatie weergegeven over uw implementatie die u nodig hebt bij het ontwikkelen van uw mobiele toepassing. De gebruikersnaam en het wachtwoord van de database zijn handig voor toegang tot de database via Azure Portal. De naam van de App Service wordt hieronder gebruikt en het openbare eindpunt wordt later in uw code ingesloten.

Implementeer ten slotte de Azure Mobile Apps-server in de gemaakte App Service:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Vervang door zumo-XXXXXXXX de naam van uw App Service; weergegeven in de lijst met uitvoer. Binnen 2-3 minuten is uw Azure Mobile Apps-server gereed voor gebruik. U kunt een webbrowser gebruiken om te bevestigen dat de back-end werkt. Wijs uw webbrowser aan uw openbare eindpunt toe waaraan /tables/TodoItem deze is toegevoegd (bijvoorbeeld https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). In de browser wordt een fout weergegeven over een ontbrekende X-ZUMO-VERSION-parameter als de server correct werkt.

De resources verwijderen

Zodra u de quickstart-zelfstudie hebt voltooid, kunt u de resources verwijderen met az group delete -n zumo-quickstart.

De zelfstudie bestaat uit drie delen (inclusief deze sectie). Verwijder de resources niet voordat u de zelfstudie voltooit.

Het quickstartproject voor Apache Cordova configureren

Voer deze opdracht uit npm install om alle afhankelijkheden te installeren.

Voeg een platform toe aan het project. Als u bijvoorbeeld het Android-platform wilt toevoegen, gebruikt u:

cordova platform add android

U kunt indien nodig toevoegen browser, androiden ios indien nodig. Het browser platform werkt niet met offlinesynchronisatie ingeschakeld. Nadat u alle platforms hebt toegevoegd die u wilt gebruiken, voert u deze uit cordova requirements om ervoor te zorgen dat aan alle vereisten is voldaan.

Open het www/js/index.js bestand in een teksteditor. Bewerk de definitie van BackendUrl om uw back-end-URL weer te geven. Als uw back-end-URL bijvoorbeeld was https://zumo-abcd1234.azurewebsites.net, ziet de back-end-URL er als volgt uit:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Sla het bestand op. Open het www/index.html bestand in een teksteditor. Bewerk de Content-Security-Policy URL om de URL bij te werken zodat deze overeenkomt met uw back-end-URL, bijvoorbeeld:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Gebruik de volgende opdracht om de app te bouwen:

cordova build

De app uitvoeren

Als deze wordt uitgevoerd vanuit een browser (met behulp vancordova platform add browser), moet u CORS-ondersteuning inschakelen binnen Azure-app Service. Voer hiervoor de volgende opdracht uit:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Vervang de ZUMPAPPNAME door de naam van uw mobiele back-end van Azure-app Service. Zodra de back-end is geconfigureerd, voert u de volgende opdracht uit:

cordova run android

Zodra het opstarten is voltooid, kunt u items uit de lijst toevoegen en verwijderen. Taken worden opgeslagen in het Azure SQL-exemplaar dat is verbonden met uw Back-end van Azure Mobile Apps.

Als de emulator niet automatisch wordt gestart, opent u Android Studio en selecteert u AVD Manager configureren>. U kunt de emulator nu handmatig starten. Als u de uitvoering uitvoert adb devices -l, ziet u het geselecteerde geëmuleerde apparaat. U moet nu kunnen worden uitgevoerd cordova run android.

Apache Cordova App

Volgende stappen

Ga door met het implementeren van offlinegegevenssynchronisatie.