Skapa en Apache Cordova-app med Azure Mobile Apps

  • Artikel

Den här självstudien visar hur du lägger till en molnbaserad serverdelstjänst i en Apache Cordova-plattformsoberoende app med hjälp av Azure Mobile Apps och en Azure-mobilappsserverdel. Du skapar både en ny mobilappsserverdel och en enkel Todo-listapp som lagrar appdata i Azure.

Slutför den här självstudien innan du fortsätter med andra Apache Cordova-självstudier om hur du använder mobile apps-funktionen i Azure App Service.

Förutsättningar

För att slutföra självstudierna behöver du:

Den här självstudien kan slutföras på windows- eller Mac-system. IOS-versionen av appen kan bara köras på en Mac. I den här självstudien används Endast Windows (med appen som körs på Android).

Apache Cordova 8.1.2 eller tidigare krävs

Apache Cordova släppte en inkompatibel ändring av verktyget i v9.0.0. Om du har Apache Cordova v9.0.0 eller senare installerat fungerar inte plugin-programmet och klagar på ett beroendeproblem med modulen q .

Visual Studio Code

Det finns ett Apache Cordova-tillägg för Visual Studio Code som gör att du kan köra programmet med felsökning. Visual Studio Code rekommenderas starkt för Apache Cordova-utveckling.

Installera Gradle

Det vanligaste felet när du konfigurerar Apache Cordova i Windows är att installera Gradle. Detta installeras som standard med Android Studio men är inte tillgängligt för normal användning. Ladda ned och packa upp den senaste versionen och lägg sedan till bin katalogen i din PATH manuellt.

Ladda ned Apache Cordova-snabbstartsprojektet

Apache Cordova-snabbstartsprojektet finns i mappen för samples/cordovaGitHub-lagringsplatsen azure/azure-mobile-apps . Du kan ladda ned lagringsplatsen som en ZIP-fil och sedan packa upp den. Filerna skapas i azure-mobile-apps-main mappen.

När du har laddat ned öppnar du en terminal och ändrar katalogen till platsen för filerna.

Distribuera serverdelstjänsten

Om du vill distribuera snabbstartstjänsten loggar du först in på Azure med Azure CLI:

az login

En webbläsare öppnas för att slutföra auktoriseringen.

Om det behövs väljer du en prenumeration.

Skapa en resursgrupp

Skriv följande för att skapa en resursgrupp:

az group create -l westus -n zumo-quickstart

Det här kommandot skapar en resursgrupp med namnet zumo-quickstart för att lagra alla resurser som vi skapar. Ersätt westus med en annan region om du inte har åtkomst till regionen westus eller om du föredrar en region närmare dig.

Distribuera serverdelen till Azure

Tjänsten består av följande resurser:

  • En App Service-värdplan för den kostnadsfria planen.
  • En webbplats som finns i App Service Hosting-planen.
  • En Azure SQL-server.
  • En Azure SQL-databas på Basic-nivån (medför kostnad).

Azure SQL-databasen är den enda resursen som medför kostnader. Mer information finns i Priser.

Om du vill distribuera resurserna skriver du följande kommandon:

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

När du är klar kör du följande kommando för att se utdata:

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

Det här kommandot visar information om din distribution som du behöver för att utveckla ditt mobilprogram. Databasens användarnamn och lösenord är användbara för att komma åt databasen via Azure-portalen. Namnet på App Service används nedan och den offentliga slutpunkten bäddas in i koden senare.

Distribuera slutligen Azure Mobile Apps-servern till den skapade App Service:

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

Ersätt zumo-XXXXXXXX med namnet på din App Service, som visas i listan över utdata. Inom 2–3 minuter är din Azure Mobile Apps-server redo att användas. Du kan använda en webbläsare för att bekräfta att serverdelen fungerar. Peka webbläsaren på din offentliga slutpunkt med /tables/TodoItem bifogad (till exempel https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Webbläsaren visar ett fel om en X-ZUMO-VERSION-parameter saknas om servern fungerar korrekt.

Ta bort resurserna

När du har slutfört snabbstartsguiden kan du ta bort resurserna med az group delete -n zumo-quickstart.

Självstudien består av tre delar (inklusive det här avsnittet). Ta inte bort resurserna innan du slutför självstudien.

Konfigurera Apache Cordova-snabbstartsprojektet

Kör npm install för att installera alla beroenden.

Lägg till en plattform i projektet. Om du till exempel vill lägga till Android-plattformen använder du:

cordova platform add android

Du kan lägga till browser, androidoch ios efter behov. Plattformen browser fungerar inte med offlinesynkronisering aktiverat. När du har lagt till alla plattformar som du vill använda kör cordova requirements du för att säkerställa att alla krav har uppfyllts.

www/js/index.js Öppna filen i en textredigerare. Redigera definitionen för BackendUrl för att visa din serverdels-URL. Om din serverdels-URL till exempel var https://zumo-abcd1234.azurewebsites.netser serverdels-URL:en ut så här:

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

Spara filen. www/index.html Öppna filen i en textredigerare. Content-Security-Policy Redigera för att uppdatera URL:en så att den matchar din serverdels-URL, till exempel:

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

Använd följande kommando för att skapa appen:

cordova build

Kör appen

Om du kör från en webbläsare (med ), cordova platform add browsermåste du aktivera CORS-stöd i Azure App Service. Gör detta genom att köra följande kommando:

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

ZUMPAPPNAME Ersätt med namnet på din mobila Azure App Service-serverdel. När serverdelen har konfigurerats kör du följande kommando:

cordova run android

När den första starten är klar kan du lägga till och ta bort objekt från listan. Att göra-objekt lagras i Azure SQL-instansen som är ansluten till din Azure Mobile Apps-serverdel.

Om emulatorn inte startas automatiskt öppnar du Android Studio och väljer sedan Konfigurera>AVD Manager. Nu kan du starta emulatorn manuellt. Om du kör adb devices -lbör du se den valda emulerade enheten. Nu bör du kunna köra cordova run android.

Apache Cordova App

Nästa steg

Fortsätt att implementera datasynkronisering offline.