Tworzenie aplikacji MAUI platformy .NET za pomocą usługi Azure Mobile Apps

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 wieloplatformowej aplikacji mobilnej przy użyciu platformy .NET MAUI 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.

Ten samouczek należy wykonać przed wykonaniem innych samouczków programu .NET MAUI przy użyciu funkcji Mobile Apps w usłudze Azure App Service.

Warunki wstępne

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

• programu Visual Studio 2022 z następującymi obciążeniami:
  • ASP.NET i tworzenie aplikacji internetowych
  • Programowanie na platformie Azure
  • Programowanie aplikacji mobilnych za pomocą platformy .NET
• Konto platformy Azure .
• Interfejs wiersza polecenia platformy Azure .
  • Zaloguj się przy użyciu az login i wybierz odpowiednią subskrypcję przed rozpoczęciem.
• (Opcjonalnie) Interfejs wiersza polecenia dewelopera platformy Azure .
• urządzenia wirtualnego z systemem Androidz następującymi ustawieniami:
  • Telefon: dowolny obraz telefonu — do testowania używamy piksela 5.
  • Obraz systemu: Android 11 (interfejs API 30 z interfejsami API Google)
• Dostępny komputer Mac (na potrzeby kompilowania i uruchamiania wersji systemu iOS):
  • Instalowanie XCode
  • Otwórz program Xcode po zainstalowaniu, aby można było dodać dodatkowe wymagane składniki.
  • Po otwarciu wybierz pozycję preferencje programu XCode...>Componentsi zainstaluj symulator systemu iOS.
  • Postępuj zgodnie z przewodnikiem Pair to Mac.

Do skompilowania wersji systemu iOS wymagany jest komputer Mac.

Ten samouczek można wykonać na komputerach Mac lub Windows.

Pobieranie przykładowej aplikacji

1. Otwórz repozytorium azure-mobile-apps w przeglądarce.

2. Otwórz listę rozwijaną Kod , a następnie wybierz pozycję Pobierz plik ZIP.

   

3. Po zakończeniu pobierania otwórz folder Pobrane i znajdź plik azure-mobile-apps-main.zip.

4. Kliknij prawym przyciskiem myszy pobrany plik, a następnie wybierz pozycję Wyodrębnij wszystko....

   Jeśli wolisz, możesz użyć programu PowerShell, aby rozwinąć archiwum:

   C:\Temp> Expand-Archive azure-mobile-apps-main.zip
   

Przykłady znajdują się w folderze przykładów w wyodrębnionych plikach. Przykład dla przewodnika Szybki start nosi nazwę TodoApp. Przykład można otworzyć w programie Visual Studio, klikając dwukrotnie plik TodoApp.sln.

Wdrażanie zaplecza na platformie Azure

Nuta

Jeśli zaplecze zostało już wdrożone z innego przewodnika Szybki start, możesz użyć tego samego zaplecza i pominąć ten krok.

Aby wdrożyć usługę zaplecza, wykonamy następujące kroki:

• Aprowizuj usługę Azure App Service i usługę Azure SQL Database na platformie Azure.
• Użyj programu Visual Studio, aby wdrożyć kod usługi w nowo utworzonej usłudze Azure App Service.

Wykonaj wszystkie kroki za pomocą interfejsu wiersza polecenia dla deweloperów platformy Azure

Przykład aplikacji TodoApp jest skonfigurowany do obsługi interfejsu wiersza polecenia dla deweloperów platformy Azure. Aby wykonać wszystkie kroki (aprowizowanie i wdrażanie):

1. Zainstaluj interfejs wiersza polecenia dewelopera platformy Azure.
2. Otwórz terminal i zmień katalog na folder zawierający plik TodoApp.sln. Ten katalog zawiera również azure.yaml.
3. Uruchom azd up.

Jeśli jeszcze nie zalogowałeś się na platformie Azure, przeglądarka zostanie uruchomiona, aby poprosić Cię o zalogowanie. Następnie zostanie wyświetlony monit o użycie subskrypcji i regionu platformy Azure. Następnie interfejs wiersza polecenia dla deweloperów platformy Azure aprowizuje niezbędne zasoby i wdraża kod usługi w wybranym regionie i subskrypcji platformy Azure. Na koniec interfejs wiersza polecenia dewelopera platformy Azure zapisuje odpowiedni plik Constants.cs.

Możesz uruchomić polecenie azd env get-values, aby wyświetlić informacje o uwierzytelnianiu SQL, jeśli chcesz uzyskać bezpośredni dostęp do bazy danych.

Jeśli wykonano kroki z interfejsem wiersza polecenia dla deweloperów platformy Azure, przejść do następnego kroku. Jeśli nie chcesz używać interfejsu wiersza polecenia dla deweloperów platformy Azure, wykonaj kroki ręczne.

Tworzenie zasobów na platformie Azure.

1. Otwórz terminal i zmień katalog na folder zawierający plik TodoApp.sln. Ten katalog zawiera również azuredeploy.json.

2. Upewnij się, że zalogować się i wybrać subskrypcję przy użyciu interfejsu wiersza polecenia platformy Azure.

3. Utwórz nową grupę zasobów:

   az group create -l westus -g quickstart
   

   To polecenie tworzy grupę zasobów quickstart w regionie Zachodnie stany USA. Możesz wybrać dowolny region, pod warunkiem, że możesz tam utworzyć zasoby. Upewnij się, że używasz tej samej nazwy i regionu, gdziekolwiek wspomniano w tym samouczku.

4. Utwórz zasoby przy użyciu wdrożenia grupy:

   az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
   

   Wybierz silne hasło dla hasła administratora SQL. Będzie ona potrzebna później podczas uzyskiwania dostępu do bazy danych.

5. Po zakończeniu wdrażania pobierz zmienne wyjściowe, ponieważ zawierają one ważne informacje potrzebne później:

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

   Przykładowe dane wyjściowe to:

   

6. Zanotuj wszystkie wartości w danych wyjściowych do późniejszego użycia.

Publikowanie kodu usługi

Otwórz TodoApp.sln w programie Visual Studio.

1. W okienku po prawej stronie wybierz eksploratora rozwiązań .

2. Kliknij prawym przyciskiem myszy projekt TodoAppService.NET6, a następnie wybierz pozycję Ustaw jako projekt startowy.

3. W górnym menu wybierz pozycję Build>Publish TodoAppService.NET6.

4. W oknie Publikowanie wybierz pozycję Cel: Azure, a następnie naciśnij przycisk Dalej.

   

5. Wybierz pozycję Określony element docelowy: usługi Azure App Service (Windows), a następnie naciśnij przycisk Dalej.

   

6. W razie potrzeby zaloguj się i wybierz odpowiednią nazwę subskrypcji .

7. Upewnij się, że widok jest ustawiona na grupa zasobów.

8. Rozwiń quickstart grupę zasobów, a następnie wybierz utworzoną wcześniej usługę App Service.

   

9. Wybierz pozycję Zakończ.

10. Po zakończeniu procesu tworzenia profilu publikowania wybierz pozycję Zamknij.

11. Znajdź zależności usługi i wybierz potrójne kropki obok bazy danych programu SQL Server, a następnie wybierz pozycję Połącz.

    

12. Wybierz pozycję Azure SQL Database, a następnie wybierz pozycję Dalej.

13. Wybierz bazę danych szybki start, a następnie wybierz pozycję Dalej.

    

14. Wypełnij formularz przy użyciu nazwy użytkownika i hasła SQL, które znajdowały się w danych wyjściowych wdrożenia, a następnie wybierz pozycję Dalej.

    

15. Wybierz pozycję Zakończ.

16. Po zakończeniu wybierz pozycję Zamknij.

17. Wybierz pozycję Publikuj, aby opublikować aplikację w utworzonej wcześniej usłudze Azure App Service.

    

18. Po opublikowaniu usługi zaplecza zostanie otwarta przeglądarka. Dodaj /tables/todoitem?ZUMO-API-VERSION=3.0.0 do adresu URL:

    

Konfigurowanie przykładowej aplikacji

Aplikacja kliencka musi znać podstawowy adres URL zaplecza, aby mogła się z nią komunikować.

Jeśli użyto azd up do aprowizowania i wdrażania usługi, plik Constants.cs został utworzony i możesz pominąć ten krok.

1. Rozwiń projekt TodoApp.Data.

2. Kliknij prawym przyciskiem myszy projekt TodoApp.Data, a następnie wybierz pozycję Dodaj klasę>....

3. Wprowadź Constants.cs jako nazwę, a następnie wybierz pozycję Dodaj.

   

4. Otwórz plik Constants.cs.example i skopiuj zawartość (Ctrl-A, a następnie Ctrl-C).

5. Przełącz się na Constants.cs, wyróżnij cały tekst (Ctrl-A), a następnie wklej zawartość z przykładowego pliku (Ctrl-V).

6. Zastąp https://APPSERVICENAME.azurewebsites.net adresem URL zaplecza usługi.

   namespace TodoApp.Data
   {
       public static class Constants
       {
           /// <summary>
           /// The base URI for the Datasync service.
           /// </summary>
           public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
       }
   }
   

   Adres URL zaplecza usługi można uzyskać z karty Publikowanie . Upewnij się, że używasz adresu URL https.

7. Zapisz plik. (Ctrl-S).

Kompilowanie i uruchamianie aplikacji systemu Android

1. W Eksploratorze rozwiązań rozwiń folder maui.

2. Kliknij prawym przyciskiem myszy projekt TodoApp.MAUI i wybierz pozycję Ustaw jako projekt startowy.

3. Na górnym pasku wybierz odpowiedni emulator systemu Android:

   

4. Jeśli nie są dostępne emulatory systemu Android, musisz je utworzyć. Aby uzyskać więcej informacji, zobacz konfiguracja emulatora systemu Android. Aby utworzyć nowy emulator systemu Android:

   • Wybierz Tools>Android>Android Device Manager.
   • Wybierz pozycję + Nowy.
   • Wybierz następujące opcje po lewej stronie:
     • Nazwa: quickstart
     • Urządzenie podstawowe: Pixel 5
     • Procesor: x86_64
     • System operacyjny: Android 11.0 — interfejs API 30
     • Interfejsy API Google: sprawdzone
   • Wybierz pozycję Utwórz.
   • W razie potrzeby zaakceptuj umowę licencyjną. Następnie obraz zostanie pobrany.
   • Po pojawieniu się przycisku Start naciśnij przycisk Start.
   • Jeśli zostanie wyświetlony monit o Hyper-V przyspieszanie sprzętowe, zapoznaj się z dokumentacją, aby włączyć przyspieszanie sprzętowe przed kontynuowaniem. Emulator będzie powolny bez włączania przyspieszania sprzętowego.

   Napiwek

   Przed kontynuowaniem uruchom emulator systemu Android. Możesz to zrobić, otwierając Menedżera urządzeń z systemem Android i naciskając przycisk Uruchom obok wybranego emulatora.

5. Naciśnij F5, aby skompilować i uruchomić projekt.

Po uruchomieniu aplikacji zobaczysz pustą listę i pole tekstowe, aby dodać elementy w emulatorze. Można:

• Wprowadź tekst w polu, a następnie naciśnij Enter, aby wstawić nowy element.
• Wybierz element, aby ustawić lub wyczyścić flagę ukończoną.
• Naciśnij ikonę odświeżania, aby ponownie załadować dane z usługi.

Kompilowanie i uruchamianie aplikacji systemu Windows

1. W Eksploratorze rozwiązań rozwiń folder maui.

2. Kliknij prawym przyciskiem myszy projekt TodoApp.MAUI i wybierz pozycję Ustaw jako projekt startowy.

3. Na górnym pasku wybierz pozycję Maszyny z systemem Windows.

   

4. Naciśnij F5, aby skompilować i uruchomić projekt.

Po uruchomieniu aplikacji zobaczysz pustą listę i pole tekstowe, aby dodać elementy. Można:

• Wprowadź tekst w polu, a następnie naciśnij Enter, aby wstawić nowy element.
• Wybierz element, aby ustawić lub wyczyścić flagę ukończoną.
• Naciśnij ikonę odświeżania, aby ponownie załadować dane z usługi.

Następne kroki

Kontynuuj samouczek, dodawanie uwierzytelniania do aplikacji.