Sdílet prostřednictvím

Vytvoření aplikace Apache Cordova pomocí Azure Mobile Apps

  • Článek

V tomto kurzu se dozvíte, jak přidat cloudovou back-end službu do multiplatformní aplikace Apache Cordova pomocí Azure Mobile Apps a back-endu mobilních aplikací Azure. Vytvoříte back-end nové mobilní aplikace i jednoduchou aplikaci seznamu úkolů, která ukládá data aplikací v Azure.

Před pokračováním v dalších kurzech Apache Cordova o používání funkce Mobile Apps ve službě Aplikace Azure Service dokončete tento kurz.

Požadavky

Pro absolvování tohoto kurzu potřebujete:

Tento kurz je možné dokončit v systémech Windows nebo Mac. Verze aplikace pro iOS se dá spustit jenom na Macu. V tomto kurzu se používá jenom Windows (s aplikací spuštěnou v Androidu).

Vyžaduje se Apache Cordova 8.1.2 nebo starší

Apache Cordova vydal nekompatibilní změnu nástroje ve verzi 9.0.0. Pokud máte nainstalovaný Apache Cordova v9.0.0 nebo novější, modul plug-in nebude fungovat a stěžuje si na problém se závislostí s modulem q .

Visual Studio Code

Existuje rozšíření Apache Cordova pro Visual Studio Code, které umožňuje spustit aplikaci s laděním. Visual Studio Code se důrazně doporučuje pro vývoj apache Cordovy.

Instalace Gradle

Nejběžnější chybou při konfiguraci Apache Cordovy ve Windows je instalace Gradle. Ve výchozím nastavení se instaluje pomocí Android Studia, ale není k dispozici pro běžné použití. Stáhněte a rozbalte nejnovější verzi a pak adresář přidejte bin do cesty ručně.

Stažení projektu Rychlého startu Apache Cordova

Projekt Rychlého startu Apache Cordova se nachází ve samples/cordova složce úložiště Azure/azure-mobile-apps na GitHubu. Úložiště si můžete stáhnout jako soubor ZIP a pak ho rozbalit. Soubory se vytvoří ve azure-mobile-apps-main složce.

Po stažení otevřete terminál a změňte adresář na umístění souborů.

Nasazení back-endové služby

Pokud chcete nasadit službu pro rychlý start, nejprve se přihlaste k Azure pomocí Azure CLI:

az login

Otevře se webový prohlížeč pro dokončení autorizace.

V případě potřeby vyberte předplatné.

Vytvoření skupiny zdrojů

Zadáním následujícího příkazu vytvořte skupinu prostředků:

az group create -l westus -n zumo-quickstart

Tento příkaz vytvoří skupinu prostředků s názvem zumo-quickstart , která bude obsahovat všechny prostředky, které vytvoříme. Nahraďte westus jinou oblastí, pokud nemáte přístup k oblasti westus nebo preferujete oblast blíže k vám.

Nasazení back-endu do Azure

Služba se skládá z následujících prostředků:

  • Plán hostování služby App Service v plánu Free
  • Web hostovaný v rámci plánu hostování služby App Service
  • Azure SQL Server.
  • Databáze Azure SQL na úrovni Basic (účtují se náklady).

Databáze Azure SQL je jediným prostředkem, za který se účtují náklady. Podrobnosti najdete v tématu Ceny.

Pokud chcete prostředky nasadit, zadejte následující příkazy:

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

Po dokončení spusťte následující příkaz a zobrazte výstupy:

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

Tento příkaz zobrazí informace o vašem nasazení, které potřebujete při vývoji mobilní aplikace. Uživatelské jméno a heslo databáze jsou užitečné pro přístup k databázi prostřednictvím webu Azure Portal. Název služby App Service se použije níže a veřejný koncový bod se vloží do kódu později.

Nakonec nasaďte server Azure Mobile Apps do vytvořené služby App Service:

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

Nahraďte zumo-XXXXXXXX názvem vaší služby App Service, který je zobrazený v seznamu výstupů. Během 2 až 3 minut bude váš server Azure Mobile Apps připravený k použití. Pomocí webového prohlížeče můžete ověřit, že back-end funguje. Nasměrujte webový prohlížeč na veřejný koncový bod s připojeným /tables/TodoItem k němu (například https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Prohlížeč zobrazí chybu týkající se chybějícího parametru X-ZUMO-VERSION, pokud server funguje správně.

Odstranění prostředků

Po dokončení kurzu rychlého startu můžete prostředky odstranit pomocí az group delete -n zumo-quickstartnástroje .

Kurz se skládá ze tří částí (včetně této části). Před dokončením kurzu neodstraňovat prostředky.

Konfigurace projektu Rychlého startu Apache Cordova

Spuštěním nainstalujte npm install všechny závislosti.

Přidejte do projektu platformu. Pokud chcete například přidat platformu Android, použijte:

cordova platform add android

Můžete přidat browser, androida ios podle potřeby. Platforma browser nebude fungovat s povolenou offline synchronizací. Po přidání všech platforem, které chcete použít, spusťte cordova requirements , abyste zajistili splnění všech požadavků.

www/js/index.js Otevřete soubor v textovém editoru. Upravte definici BackendUrl tak, aby zobrazovala adresu URL back-endu. Pokud byla https://zumo-abcd1234.azurewebsites.netnapříklad vaše adresa URL back-endu, adresa URL back-endu by vypadala takto:

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

Uložte soubor. www/index.html Otevřete soubor v textovém editoru. Content-Security-Policy Upravte adresu URL tak, aby odpovídala vaší back-endové adrese URL, například:

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

K sestavení aplikace použijte následující příkaz:

cordova build

Spustit aplikaci

Pokud běží z prohlížeče (pomocícordova platform add browser), musíte povolit podporu CORS v rámci služby Aplikace Azure Service. Provedete to spuštěním následujícího příkazu:

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

ZUMPAPPNAME Nahraďte názvem vašeho back-endu Aplikace Azure Service Mobile. Jakmile je back-end nakonfigurovaný, spusťte následující příkaz:

cordova run android

Po dokončení počátečního spuštění můžete do seznamu přidávat a odstraňovat položky. Položky úkolů se ukládají v instanci Azure SQL připojené k back-endu Azure Mobile Apps.

Pokud se emulátor nespustí automaticky, otevřete Android Studio a pak vyberte Konfigurovat>správce AVD. Emulátor teď můžete spustit ručně. Pokud spustíte adb devices -l, měli byste vidět vybrané emulované zařízení. Teď byste měli být schopni spustit cordova run android.

Apache Cordova App

Další kroky

Pokračujte v implementaci offline synchronizace dat.