Tworzenie aplikacji systemu Windows (UWP) za pomocą usługi Azure Mobile Apps

W tym samouczku pokazano, jak dodać usługę zaplecza opartą na chmurze do aplikacji klasycznej platformy platforma uniwersalna systemu Windows (UWP) 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.

Ten samouczek jest wymagany dla wszystkich innych samouczków systemu Windows (UWP) dotyczących korzystania z 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ć tylko w systemie 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.

    Screenshot of the Code menu on GitHub.

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

  4. Kliknij prawym przyciskiem myszy pobrany plik, a następnie wybierz polecenie 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 samples w wyodrębnionych plikach. Przykład dla przewodnika Szybki start nosi nazwę TodoApp. Przykład można otworzyć w programie Visual Studio, klikając TodoApp.sln dwukrotnie plik.

Screenshot of the file explorer for the solution.

Wdrażanie zaplecza na platformie Azure

Uwaga

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ę aplikacja systemu Azure 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 aplikacja systemu Azure.

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 dla deweloperów platformy Azure.
  2. Otwórz terminal i zmień katalog na folder zawierający TodoApp.sln plik. Ten katalog zawiera azure.yamlrównież plik .
  3. Uruchom program 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 Constants.cs plik.

Możesz uruchomić azd env get-values polecenie , 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, przejdź 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 TodoApp.sln plik. Ten katalog zawiera azuredeploy.jsonrównież plik .

  2. Upewnij się, że zalogowałeś się i wybrano 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ę quickstart zasobów 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 Administracja istratora 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:

    Screenshot of command line results.

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

Publikowanie kodu usługi

Otwórz plik TodoApp.sln w programie Visual Studio.

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

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

  3. W górnym menu wybierz pozycję Build Publish TodoAppService.NET6 (Kompiluj>publikację todoAppService.NET6).

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

    Screenshot of the target selection window.

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

    Screenshot of the specific target selection window.

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

  7. Upewnij się, że ustawienie Widok ma wartość Grupa zasobów.

  8. Rozwiń grupę zasobów, a następnie wybierz usługę quickstart App Service, która została utworzona wcześniej.

    Screenshot of the app service selection window.

  9. Wybierz 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łączenie.

    Screenshot showing the S Q L server configuration selection.

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

  13. Wybierz bazę danych szybkiego startu, a następnie wybierz pozycję Dalej.

    Screenshot of the database selection window.

  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.

    Screenshot of the database settings window.

  15. Wybierz Zakończ.

  16. Po zakończeniu wybierz pozycję Zamknij .

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

    Screenshot showing the publish button.

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

    Screenshot showing the browser output after the service is published.

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 metody aprowizacji i wdrożenia usługi, Constants.cs plik został utworzony dla Ciebie i możesz pominąć ten krok.

  1. TodoApp.Data Rozwiń projekt.

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

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

    Screenshot of adding the Constants.cs file to the project.

  4. Constants.cs.example Otwórz plik 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 element 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 przykładowej aplikacji

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

  2. Kliknij projekt prawym przyciskiem myszy TodoApp.UWP i wybierz polecenie Ustaw jako Projekt startowy.

  3. Na górnym pasku wybierz dowolną konfigurację procesora CPU i docelową aplikację TodoApp.UWP :

    UWP Configuration

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

Po uruchomieniu aplikacji zostanie wyświetlona pusta lista z polem tekstowym. Masz następujące możliwości:

  • Wprowadź tekst, a następnie naciśnij ikonę + , aby dodać element.

  • Ustaw lub wyczyść pole wyboru, aby oznaczyć dowolny element jako gotowe.

  • Naciśnij ikonę odświeżania, aby ponownie załadować dane z usługi.

    UWP Running App

Następne kroki

Kontynuuj samouczek, dodając uwierzytelnianie do aplikacji.