Udostępnij za pośrednictwem

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

  • Artykuł

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ą aplikację listy zadań do wykonania, która przechowuje dane aplikacji na platformie Azure.

Ukończ ten samouczek przed kontynuowaniem pracy z innymi samouczkami dotyczącymi używania funkcji Mobile Apps w usłudze aplikacja systemu Azure Service.

Wymagania wstępne

Do ukończenia tego samouczka niezbędne 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 zainstalowany program Apache Cordova w wersji 9.0.0 lub nowszej, wtyczka nie będzie działać, zgłaszając problem z zależnością modułu 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 najnowszą wersję, a następnie ręcznie dodaj bin katalog do ścieżki.

Pobieranie projektu Szybkiego startu platformy Apache Cordova

Projekt Szybkiego startu platformy Apache Cordova znajduje się w samples/cordova folderze repozytorium GitHub azure/azure-mobile-apps . Repozytorium można pobrać 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 wybierz 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 ciąg 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 Cennik.

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 ciąg nazwą usługi App Service; pokazaną 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 /tables/TodoItem z dołączonym do niego adresem (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ą polecenia 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 polecenie 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ć browserelement , 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 polecenie cordova requirements , aby upewnić się, że zostały spełnione wszystkie wymagania.

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

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

Zapisz plik. www/index.html Otwórz plik w edytorze tekstów. Edytuj adres Content-Security-Policy , aby zaktualizować adres URL, 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

Uruchom aplikację

Jeśli korzystasz z przeglądarki (przy użyciu cordova platform add browserpolecenia ), musisz włączyć obsługę mechanizmu CORS w usłudze aplikacja systemu Azure Service. Aby to zrobić, uruchom następujące polecenie:

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

Zastąp element ZUMPAPPNAME nazwą zaplecza mobilnego usługi aplikacja systemu Azure 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ę Konfiguruj>menedżera AVD. Teraz możesz ręcznie uruchomić emulator. Jeśli uruchomisz polecenie adb devices -l, powinno zostać wyświetlone wybrane emulowane urządzenie. Teraz powinno być możliwe uruchomienie polecenia cordova run android.

Apache Cordova App

Następne kroki

Kontynuuj wdrażanie synchronizacji danych w trybie offline.