Udostępnij za pośrednictwem

Tworzenie aplikacji platformy Apache Cordova za pomocą usługi Azure Mobile Apps

  • Artykuł

Nuta

Ten produkt jest wycofany. Aby zastąpić projekty przy użyciu platformy .NET 8 lub nowszej, zobacz bibliotekę datasync zestawu narzędzi Community Toolkit.

W tym samouczku pokazano, jak dodać usługę zaplecza opartą na chmurze do aplikacji wieloplatformowej platformy Apache Cordova przy użyciu usługi Azure Mobile Apps i zaplecza aplikacji mobilnej platformy Azure. Utworzysz zarówno nowe zaplecze aplikacji mobilnej, jak i prostą listę zadań do wykonania aplikację, która przechowuje dane aplikacji na platformie Azure.

Ukończ ten samouczek przed kontynuowaniem pracy z innymi samouczkami platformy Apache Cordova dotyczącymi korzystania z funkcji Mobile Apps w usłudze Azure App Service.

Warunki wstępne

Do ukończenia tego samouczka potrzebne są następujące elementy:

Ten samouczek można ukończyć w systemach Windows lub Mac. Wersja aplikacji dla systemu iOS może być uruchamiana tylko na komputerze Mac. W tym samouczku jest używany system Windows (tylko z aplikacją działającą w systemie Android).

Wymagany program Apache Cordova 8.1.2 lub starszy

Platforma Apache Cordova opublikowała niezgodną zmianę narzędzia w wersji 9.0.0. Jeśli masz zainstalowaną wersję 9.0.0 lub nowszą platformy Apache Cordova, wtyczka nie będzie działać, narzekając na problem zależności z modułem q.

Visual Studio Code

Istnieje rozszerzenie Apache Cordova dla programu Visual Studio Code, które umożliwia uruchamianie aplikacji przy użyciu debugowania. Program Visual Studio Code jest zdecydowanie zalecany w przypadku opracowywania oprogramowania Apache Cordova.

Instalowanie narzędzia Gradle

Najczęstszym błędem podczas konfigurowania oprogramowania Apache Cordova w systemie Windows jest instalowanie narzędzia Gradle. Jest on instalowany domyślnie przy użyciu programu Android Studio, ale nie jest dostępny do normalnego użycia. Pobierz i rozpakuj najnowszej wersji, a następnie ręcznie dodaj katalog bin do ścieżki.

Pobieranie projektu Szybkiego startu platformy Apache Cordova

Projekt Szybkiego startu platformy Apache Cordova znajduje się w folderze samples/cordova repozytorium azure/azure-mobile-apps repozytorium GitHub. Możesz pobrać repozytorium jako plik ZIP, a następnie rozpakować je. Pliki zostaną utworzone w folderze azure-mobile-apps-main.

Po pobraniu otwórz terminal i zmień katalog na lokalizację plików.

Wdrażanie usługi zaplecza

Aby wdrożyć usługę Szybki start, najpierw zaloguj się na platformie Azure przy użyciu interfejsu wiersza polecenia platformy Azure:

az login

Zostanie otwarta przeglądarka internetowa, aby ukończyć autoryzację.

W razie potrzeby wybrać subskrypcję.

Tworzenie grupy zasobów

Wpisz następujące polecenie, aby utworzyć grupę zasobów:

az group create -l westus -n zumo-quickstart

To polecenie tworzy grupę zasobów o nazwie zumo-quickstart do przechowywania wszystkich tworzonych zasobów. Zastąp westus innym regionem, jeśli nie masz dostępu do regionu westus lub wolisz region bliżej Ciebie.

Wdrażanie zaplecza na platformie Azure

Usługa składa się z następujących zasobów:

  • Plan hostingu usługi App Service w ramach planu bezpłatnego.
  • Witryna internetowa hostowana w ramach planu hostingu usługi App Service.
  • Serwer Azure SQL.
  • Baza danych Azure SQL Database w warstwie Podstawowa (wiąże się z kosztami).

Baza danych Azure SQL Database jest jedynym zasobem, który wiąże się z kosztami. Aby uzyskać szczegółowe informacje, zobacz Pricing.

Aby wdrożyć zasoby, wpisz następujące polecenia:

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

Po zakończeniu uruchom następujące polecenie, aby wyświetlić dane wyjściowe:

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

To polecenie zawiera informacje o wdrożeniu, które jest potrzebne podczas tworzenia aplikacji mobilnej. Nazwa użytkownika i hasło bazy danych są przydatne do uzyskiwania dostępu do bazy danych za pośrednictwem witryny Azure Portal. Nazwa usługi App Service jest używana poniżej, a publiczny punkt końcowy jest osadzony w kodzie później.

Na koniec wdróż serwer usługi Azure Mobile Apps w utworzonej usłudze App Service:

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

Zastąp zumo-XXXXXXXX nazwą usługi App Service; wyświetlane na liście danych wyjściowych. W ciągu 2–3 minut serwer usługi Azure Mobile Apps będzie gotowy do użycia. Możesz użyć przeglądarki internetowej, aby potwierdzić, że zaplecze działa. Wskaż przeglądarkę internetową publicznemu punktowi końcowemu, dodając do niego /tables/TodoItem (na przykład https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). W przeglądarce zostanie wyświetlony błąd dotyczący brakującego parametru X-ZUMO-VERSION, jeśli serwer działa prawidłowo.

Usuwanie zasobów

Po ukończeniu samouczka Szybki start możesz usunąć zasoby za pomocą az group delete -n zumo-quickstart.

Samouczek składa się z trzech części (w tym tej sekcji). Nie usuwaj zasobów przed ukończeniem samouczka.

Konfigurowanie projektu Szybkiego startu platformy Apache Cordova

Uruchom npm install, aby zainstalować wszystkie zależności.

Dodaj platformę do projektu. Aby na przykład dodać platformę Android, użyj:

cordova platform add android

W razie potrzeby możesz dodać browser, androidi ios. Platforma browser nie będzie działać z włączoną synchronizacją w trybie offline. Po dodaniu wszystkich platform, których chcesz użyć, uruchom cordova requirements, aby upewnić się, że zostały spełnione wszystkie wymagania.

Otwórz plik www/js/index.js w edytorze tekstów. Edytuj definicję BackendUrl, aby wyświetlić adres URL zaplecza. Jeśli na przykład adres URL zaplecza został https://zumo-abcd1234.azurewebsites.net, adres URL zaplecza będzie wyglądać następująco:

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

Zapisz plik. Otwórz plik www/index.html w edytorze tekstów. Edytuj Content-Security-Policy, aby zaktualizować adres URL tak, aby był zgodny z adresem URL zaplecza; na przykład:

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

Aby skompilować aplikację, użyj następującego polecenia:

cordova build

Uruchamianie aplikacji

Jeśli korzystasz z przeglądarki (przy użyciu cordova platform add browser), musisz włączyć obsługę mechanizmu CORS w usłudze Azure App Service. W tym celu uruchom następujące polecenie:

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

Zastąp ZUMPAPPNAME nazwą zaplecza mobilnego usługi Azure App Service. Po skonfigurowaniu zaplecza uruchom następujące polecenie:

cordova run android

Po zakończeniu początkowego uruchamiania można dodawać i usuwać elementy z listy. Zadania do wykonania są przechowywane w wystąpieniu usługi Azure SQL połączonym z zapleczem usługi Azure Mobile Apps.

Jeśli emulator nie zostanie uruchomiony automatycznie, otwórz program Android Studio, a następnie wybierz pozycję Configure>AVD Manager. Teraz możesz ręcznie uruchomić emulator. Jeśli uruchomisz adb devices -l, powinna zostać wyświetlona wybrana emulowana maszyna. Teraz powinno być możliwe uruchomienie cordova run android.

aplikacji Apache Cordova

Następne kroki

Kontynuuj wdrażanie synchronizacji danych w trybie offline .