Delen via

Een Apache Cordova-app bouwen met Azure Mobile Apps

  • Artikel

Notitie

Dit product is buiten gebruik gesteld. Zie de Community Toolkit Datasync-bibliotheekvoor een vervanging voor projecten met .NET 8 of hoger.

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 in Azure worden opgeslagen.

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

Voorwaarden

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 u Apache Cordova v9.0.0 of hoger hebt 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 meest recente releaseen voeg de bin map handmatig toe aan uw PATH.

Het Apache Cordova-quickstartproject downloaden

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

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 resourcegroep 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 het opslaan van 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 Prijzenvoor 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 zumo-XXXXXXXX door de naam van uw App Service; wordt 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 naar uw openbare eindpunt met /tables/TodoItem eraan 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 goed 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 npm install uit 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 browser, androiden ios toevoegen. Het browser-platform werkt niet met offlinesynchronisatie ingeschakeld. Nadat u alle platforms hebt toegevoegd die u wilt gebruiken, voert u cordova requirements uit 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 is 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 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 u vanuit een browser werkt (met behulp van cordova platform add browser), moet u CORS-ondersteuning inschakelen in 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 adb devices -luitvoert, ziet u het geselecteerde geëmuleerde apparaat. U moet nu cordova run androidkunnen uitvoeren.

Apache Cordova-app

Volgende stappen

Ga door met het implementeren van offlinegegevenssynchronisatie.