Tworzenie aplikacji oprogramowania Apache Cordova

• Android
• Cordova
• iOS
• Windows
• Xamarin.Android
• Xamarin.iOS
• Xamarin.Forms

Omówienie

W tym samouczku przedstawiono sposób dodawania usługi zaplecza opartej na chmurze do aplikacji mobilnej oprogramowania Apache Cordova przy użyciu zaplecza aplikacji mobilnej Azure. Utworzysz nowe zaplecze aplikacji mobilnej oraz prostą aplikację oprogramowania Apache Cordova typu Lista czynności do wykonania, która przechowuje dane aplikacji na platformie Azure.

Wykonanie kroków tego samouczka jest wymagane w przypadku wszystkich innych samouczków z zakresu oprogramowania Apache Cordova dotyczących używania funkcji Mobile Apps w usłudze Azure App Service.

Wymagania wstępne

Do wykonania kroków tego samouczka niezbędne jest spełnienie następujących wymagań wstępnych:

• Komputer z programem Visual Studio Community 2017 lub nowszym.
• Visual Studio Tools dla oprogramowania Apache Cordova.
• Aktywne konto platformy Azure.

Można również pominąć program Visual Studio i używać bezpośrednio wiersza polecenia programu Apache Cordova. Korzystanie z wiersza polecenia jest przydatne w przypadku wykonywania kroków samouczka na komputerze Mac. Kompilowanie aplikacji klienckich oprogramowania Apache Cordova za pomocą wiersza polecenia nie zostało opisane w tym samouczku.

Tworzenie zaplecza aplikacji mobilnej Azure

1. Zaloguj się w witrynie Azure Portal.

2. Kliknij pozycję Utwórz zasób.

3. W polu wyszukiwania wpisz Web App.

4. Na liście wyników wybierz pozycję Aplikacja internetowa z witryny Marketplace.

5. Wybierz subskrypcję igrupę zasobów (wybierz istniejącą grupę zasobów lub utwórz nową (przy użyciu tej samej nazwy co aplikacja)).

6. Wybierz unikatową nazwę aplikacji internetowej.

7. Wybierz domyślną opcję Publikuj jako Kod.

8. W stosie środowiska uruchomieniowego należy wybrać wersję w obszarze ASP.NET lub Node. Jeśli tworzysz zaplecze platformy .NET, wybierz wersję w obszarze ASP.NET. W przeciwnym razie, jeśli aplikacja oparta na węźle jest przeznaczona, wybierz jedną z wersji z węzła.

9. Wybierz odpowiedni system operacyjny: Linux lub Windows.

10. Wybierz region , w którym chcesz wdrożyć tę aplikację.

11. Wybierz odpowiedni plan App Service i wybierz pozycję Przejrzyj i utwórz.

12. W obszarze Grupa zasobów wybierz istniejącą grupę zasobów lub utwórz nową (używając tej samej nazwy, co aplikacja).

13. Kliknij pozycję Utwórz. Zanim przejdziesz do kolejnych kroków, odczekaj kilka minut, aby usługa została wdrożona pomyślnie. Obserwuj ikonę powiadomień (dzwonek) w nagłówku portalu, pokazującą aktualizacje stanu.

14. Po zakończeniu wdrażania kliknij sekcję Szczegóły wdrożenia , a następnie kliknij pozycję Zasób typu Microsoft.Web/sites. Spowoduje to przejście do właśnie utworzonej aplikacji internetowej App Service.

15. Kliknij blok Konfiguracja w obszarze Ustawienia , a następnie w obszarze Ustawienia aplikacji kliknij przycisk Nowe ustawienie aplikacji .

16. Na stronie ustawienia Dodaj/Edytuj aplikację wprowadź nazwęjako MobileAppsManagement_EXTENSION_VERSION i Wartość jako najnowszą i naciśnij przycisk OK.

Wszystko jest gotowe do używania tej nowo utworzonej aplikacji internetowej App Service jako aplikacji mobilnej.

Tworzenie połączenia z bazą danych i konfigurowanie projektu klienta i serwera

1. Pobierz przewodniki Szybki start dotyczące zestawu SDK klienta dla następujących platform:

   iOS (Objective-C)
   iOS (Swift)
   Android (Java)
   Xamarin.iOS
   Xamarin.Android
   Xamarin.Forms
   Cordova
   Windows (C#)

   Uwaga

   Jeśli używasz projektu systemu iOS, musisz pobrać plik "azuresdk-iOS-*.zip" z najnowszej wersji usługi GitHub. Rozpakuj MicrosoftAzureMobile.framework i dodaj plik do katalogu głównego projektu.

2. Musisz dodać połączenie z bazą danych lub nawiązać połączenie z istniejącym połączeniem. Najpierw określ, czy utworzysz magazyn danych, czy użyjesz istniejącego magazynu danych.

   • Utwórz nowy magazyn danych: jeśli zamierzasz utworzyć magazyn danych, skorzystaj z następującego przewodnika Szybki start:

     Szybki start: wprowadzenie do pojedynczych baz danych w usłudze Azure SQL Database

   • Istniejące źródło danych: postępuj zgodnie z poniższymi instrukcjami, jeśli chcesz użyć istniejącego połączenia z bazą danych

     1. format parametrów połączenia SQL Database —Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Nazwa serwera, można go znaleźć na stronie przeglądu bazy danych i zwykle ma postać "server_name.database.windows.net". {port} zwykle 1433. {your_catalogue} Nazwa bazy danych. {your_username} Nazwa użytkownika, aby uzyskać dostęp do bazy danych. {your_password} Hasło umożliwiające uzyskanie dostępu do bazy danych.

        Dowiedz się więcej o formacie parametrów połączenia SQL

     2. Dodaj parametry połączenia do aplikacji mobilnej W App Service możesz zarządzać parametrami połączenia dla aplikacji przy użyciu opcji Konfiguracja w menu.

        Aby dodać parametry połączenia:

        1. Kliknij kartę Ustawienia aplikacji .

        2. Kliknij pozycję [+] Nowe parametry połączenia.

        3. Musisz podać parametry połączenia : Nazwa, Wartość i Typ .

        4. Wpisz nazwę jako MS_TableConnectionString

        5. Wartość powinna być ciągiem połączenia utworzonym w kroku przed.

        6. W przypadku dodawania parametrów połączenia do bazy danych Usługi SQL Azure wybierz pozycję SQLAzure w obszarze typ.

3. Usługa Azure Mobile Apps ma zestawy SDK dla platformy .NET i Node.js zapleczy.

   • zapleczeNode.js

     Jeśli zamierzasz używać Node.js aplikacji Szybki start, postępuj zgodnie z poniższymi instrukcjami.

     1. W Azure Portal przejdź do pozycji Łatwe tabele. Zostanie wyświetlony ten ekran.

        

     2. Upewnij się, że parametry połączenia SQL zostały już dodane na karcie Konfiguracja . Następnie zaznacz pole wyboru Potwierdzam, że spowoduje to zastąpienie całej zawartości witryny i kliknij przycisk Utwórz tabelę TodoItem .

        

     3. W obszarze Łatwe tabele kliknij przycisk + Dodaj .

        

     4. Utwórz tabelę z dostępem TodoItem anonimowym.

        

   • Zaplecze .NET

     Jeśli zamierzasz używać aplikacji Szybki start platformy .NET, postępuj zgodnie z poniższymi instrukcjami.

     1. Pobierz projekt serwera .NET usługi Azure Mobile Apps z repozytorium azure-mobile-apps-quickstarts.

     2. Skompiluj projekt serwera .NET lokalnie w programie Visual Studio.

     3. W programie Visual Studio otwórz Eksplorator rozwiązań, kliknij prawym przyciskiem myszy ZUMOAPPNAMEService projekt, kliknij polecenie Publikuj. Zostanie wyświetlone Publish to App Service okno. Jeśli pracujesz na komputerze Mac, zapoznaj się z innymi sposobami wdrażania aplikacji tutaj.

        

     4. Wybierz pozycję App Service jako obiekt docelowy publikowania, a następnie kliknij pozycję Wybierz istniejącą, a następnie kliknij przycisk Publikuj w dolnej części okna.

     5. Najpierw musisz zalogować się do programu Visual Studio przy użyciu subskrypcji platformy Azure. Wybierz pozycję Subscription, Resource Group, a następnie wybierz nazwę aplikacji. Gdy wszystko będzie gotowe, kliknij przycisk OK, spowoduje to wdrożenie lokalnego projektu serwera .NET w zapleczu App Service. Po zakończeniu wdrażania nastąpi przekierowanie do http://{zumoappname}.azurewebsites.net/ witryny w przeglądarce.

Pobieranie i uruchamianie aplikacji oprogramowania Apache Cordova

1. Przejdź do pliku rozwiązania w projekcie klienta (sln) i otwórz go przy użyciu programu Visual Studio.

2. W programie Visual Studio wybierz platformę rozwiązania (Android, iOS lub Windows) z listy rozwijanej obok strzałki rozpoczęcia. Wybierz konkretny emulator lub konkretne urządzenie wdrożenia, klikając listę rozwijaną zielonej strzałki. Możesz użyć domyślnej platformy Android i emulatora Ripple. Samouczki bardziej zaawansowane (np. powiadomienia wypychane) będą wymagać wybrania obsługiwanego urządzenia lub emulatora.

3. Otwórz plik ToDoActivity.java w tym folderze — ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Nazwa aplikacji to ZUMOAPPNAME.

4. Przejdź do Azure Portal i przejdź do utworzonej aplikacji mobilnej. Overview W bloku wyszukaj adres URL, który jest publicznym punktem końcowym aplikacji mobilnej. Przykład — nazwa witryny dla nazwy mojej aplikacji "test123" będzie mieć wartość https://test123.azurewebsites.net.

5. Przejdź do pliku w pliku index.js ZUMOAPPNAME/www/js/index.js i w onDeviceReady() metodzie zastąp ZUMOAPPURL parametr publicznym punktem końcowym powyżej.

   client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

   Staje się

   client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

6. Aby skompilować i uruchomić aplikację systemu Cordova, naciśnij klawisz F5 lub kliknij zieloną strzałkę. Jeśli w emulatorze widzisz okno dialogowe zabezpieczeń żądające dostępu do sieci, zaakceptuj je.

7. Po uruchomieniu aplikacji na urządzeniu lub emulatorze wpisz zrozumiały tekst w polu Wprowadź nowy tekst, na przykład Ukończ samouczek , a następnie kliknij przycisk Dodaj .

Zaplecze wstawia dane z żądania do tabeli TodoItem bazy danych SQL Database i zwraca do aplikacji mobilnej informacje na temat przechowywanych od niedawna elementów. W aplikacji mobilnej dane te są wyświetlane na liście.

Kroki od 3 do 5 możesz powtórzyć dla innych platform.