Freigeben über


Erstellen einer iOS-App

Überblick

In diesem Lernprogramm wird gezeigt, wie Sie Azure App Service Mobile Apps, einen Cloud-Back-End-Dienst, zu einer iOS-App hinzufügen. Der erste Schritt besteht darin, ein neues mobiles Back-End in Azure zu erstellen. Laden Sie dann eine einfache Todo-Liste iOS-Beispiel-App herunter, die Daten in Azure speichert.

Um dieses Lernprogramm abzuschließen, benötigen Sie einen Mac und ein Azure-Konto

Erstellen eines neuen mobilen Azure-App-Back-Ends

  1. Melden Sie sich beim Azure-Portal an.

  2. Klicken Sie auf Ressource erstellen.

  3. Geben Sie im Suchfeld Web Appein.

  4. Wählen Sie in der Ergebnisliste die Web App aus dem Marketplace aus.

  5. Wählen Sie Ihr Abonnement und Ihre Ressourcengruppe aus (wählen Sie eine vorhandene Ressourcengruppe oder erstellen Sie eine neue mit demselben Namen wie Ihre App).

  6. Wählen Sie einen eindeutigen Namen für Ihre Webanwendung aus.

  7. Wählen Sie die Standardoption Veröffentlichen als Codeaus.

  8. Im Runtime-Stapelmüssen Sie eine Version unter ASP.NET oder Nodeauswählen. Wenn Sie ein .NET-Back-End erstellen, wählen Sie unter ASP.NET eine Version aus. Wenn Sie auf eine nodebasierte Anwendung abzielen, wählen Sie andernfalls eine der Versionen aus Node aus.

  9. Wählen Sie das richtige Betriebssystem, entweder Linux oder Windows.

  10. Wählen Sie die Region aus, in der diese App bereitgestellt werden soll.

  11. Wählen Sie den entsprechenden App Service Plan aus, und klicken Sie auf Überprüfen und erstellen Sie.

  12. Wählen Sie unter Ressourcengruppeeine vorhandene Ressourcengruppe aus, oder eine neue Gruppe erstellen (mit demselben Namen wie Ihre App).

  13. Klicken Sie auf Erstellen. Warten Sie einige Minuten, bis der Dienst erfolgreich bereitgestellt wurde, bevor Sie fortfahren. Sehen Sie sich das Benachrichtigungssymbol im Portalheader an, um Statusaktualisierungen zu erhalten.

  14. Klicken Sie nach Abschluss der Bereitstellung auf den Abschnitt Bereitstellungsdetails und dann auf die Ressource des Typs Microsoft.Web/sites. Es navigiert Sie zu der App Service-Web-App, die Sie gerade erstellt haben.

  15. Klicken Sie auf das Blatt Konfiguration unter Einstellungen und klicken Sie in den Anwendungseinstellungenauf die Schaltfläche Neue Anwendungseinstellung.

  16. Geben Sie auf der Seite Einstellung "Anwendung hinzufügen/bearbeiten"Namen als MobileAppsManagement_EXTENSION_VERSION und Wert als neuesten ein, und drücken Sie "OK".

Sie sind bereit, diese neu erstellte App Service Web-App als mobile App zu verwenden.

Erstellen einer Datenbankverbindung und Konfigurieren des Client- und Serverprojekts

  1. Laden Sie die Client-SDK-Schnellstarts für die folgenden Plattformen herunter:

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

    Hinweis

    Wenn Sie das iOS-Projekt verwenden, müssen Sie "azuresdk-iOS-*.zip" aus neuesten GitHub-Versionherunterladen. Entpacken Sie die MicrosoftAzureMobile.framework Datei, und fügen Sie sie dem Stammverzeichnis des Projekts hinzu.

  2. Sie müssen eine Datenbankverbindung hinzufügen oder eine Verbindung mit einer vorhandenen Verbindung herstellen. Bestimmen Sie zunächst, ob Sie einen Datenspeicher erstellen oder einen vorhandenen verwenden.

    • Erstellen eines neuen Datenspeichers: Wenn Sie einen Datenspeicher erstellen möchten, verwenden Sie die folgende Schnellstartanleitung:

      Schnellstart: Erste Schritte mit einzelnen Datenbanken in Azure SQL-Datenbank

    • Vorhandene Datenquelle: Befolgen Sie die folgenden Anweisungen, wenn Sie eine vorhandene Datenbankverbindung verwenden möchten.

      1. SQL-Datenbankverbindungszeichenfolgenformat - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Der Name des Servers kann auf der Übersichtsseite für Ihre Datenbank gefunden werden und hat normalerweise die Form „server_name.database.windows.net“. {port} in der Regel 1433. {your_catalogue} Der Name der Datenbank. {your_username} Benutzernamen für den Zugriff auf Ihre Datenbank. {your_password} Kennwort für den Zugriff auf Ihre Datenbank.

        Weitere Informationen zum SQL-Verbindungszeichenfolgenformat

      2. Fügen Sie die Verbindungszeichenfolge zu Ihrer mobilen App hinzu. Im App Service können Sie die Verbindungszeichenfolgen Ihrer Anwendung mithilfe der Option Konfiguration im Menü verwalten.

        So fügen Sie eine Verbindungszeichenfolge hinzu:

        1. Klicken Sie auf die Registerkarte Anwendungseinstellungen.

        2. Klicken Sie auf [+] Neue Verbindungszeichenfolge.

        3. Sie müssen Name, Wert und Typ für die Verbindungszeichenfolge angeben.

        4. Geben Sie Name als MS_TableConnectionString ein.

        5. Der Wert sollte die Verbindungszeichenfolge sein, die Sie im Schritt zuvor gebildet haben.

        6. Wenn Sie einer SQL Azure-Datenbank eine Verbindungszeichenfolge hinzufügen, wählen Sie SQLAzure unter Typaus.

  3. Azure Mobile Apps verfügt über SDKs für .NET und Node.js Back-Ends.

    • Node.js Backend

      Wenn Sie Node.js Schnellstart-App verwenden möchten, folgen Sie den nachstehenden Anweisungen.

      1. Wechseln Sie im Azure-Portal zu einfache Tabellen, wird dieser Bildschirm angezeigt.

        knotenfreundliche Tabellen

      2. Stellen Sie sicher, dass die SQL-Verbindungszeichenfolge bereits in der Registerkarte Konfiguration hinzugefügt wurde. Aktivieren Sie dann das Kontrollkästchen Ich bestätige, dass dadurch alle Websiteinhalte überschrieben werden, und klicken Sie auf die Schaltfläche 'TodoItem-Tabelle erstellen'.

        Konfiguration von einfachen Tabellen für Knoten

      3. Klicken Sie in Einfachen Tabellenauf die Schaltfläche + Hinzufügen.

        Knoten

      4. Erstellen Sie eine TodoItem Tabelle mit anonymem Zugriff.

        Node Easy Tables Tabelle hinzufügen

    • .NET-Backend

      Wenn Sie die .NET-Schnellstart-App verwenden möchten, folgen Sie den nachstehenden Anweisungen.

      1. Laden Sie das .NET-Serverprojekt von Azure Mobile Apps aus dem Azure-mobile-apps-schnellstarts-Repositoryherunter.

      2. Erstellen Sie das .NET-Serverprojekt lokal in Visual Studio.

      3. Öffnen Sie in Visual Studio den Projektmappen-Explorer, klicken Sie mit der rechten Maustaste auf das ZUMOAPPNAMEService-Projekt, und klicken Sie dann auf Veröffentlichen. Ein Publish to App Service-Fenster wird angezeigt. Wenn Sie an einem Mac arbeiten, schauen Sie sich weitere Möglichkeiten zum Bereitstellen der App hieran.

        Visual Studio-Veröffentlichung

      4. Wählen Sie App Service als Veröffentlichungsziel aus, und klicken Sie dann auf Vorhandeneauswählen. Klicken Sie anschließend unten im Fenster auf die Schaltfläche Veröffentlichen.

      5. Sie müssen sich zuerst mit Ihrem Azure-Abonnement bei Visual Studio anmelden. Wählen Sie die Subscription, Resource Groupund dann den Namen Ihrer App aus. Wenn Sie fertig sind, klicken Sie auf OK, stellt dies das .NET-Serverprojekt bereit, das Sie lokal im App Service-Back-End haben. Nach Abschluss der Bereitstellung werden Sie im Browser zu http://{zumoappname}.azurewebsites.net/ weitergeleitet.

Ausführen der iOS-App

  1. Öffnen Sie das heruntergeladene Clientprojekt mit Xcode.

  2. Wechseln Sie zum Azure-Portal, und navigieren Sie zu der von Ihnen erstellten mobilen App. Suchen Sie auf dem Blatt Overview nach der URL, die der öffentliche Endpunkt für Ihre mobile App ist. Beispiel: Der Websitename für meinen App-Namen "test123" wird https://test123.azurewebsites.net.

  3. Öffnen Sie für swift-Projekt die Datei ToDoTableViewController.swift in diesem Ordner – ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. Der Anwendungsname ist ZUMOAPPNAME.

  4. Ersetzen Sie den Parameter ZUMOAPPURL in der Methode viewDidLoad() durch den oben genannten öffentlichen Endpunkt.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    wird

    let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")

  5. Öffnen Sie für das Projekt Objective-C die Datei QSTodoService.m in diesem Ordner: ZUMOAPPNAME/ZUMOAPPNAME. Der Anwendungsname ist ZUMOAPPNAME.

  6. Ersetzen Sie in der init-Methode den ZUMOAPPURL-Parameter durch den oben genannten öffentlichen Endpunkt.

    self.client = [MSClient clientWithApplicationURLString:@"ZUMOAPPURL"];

    wird

    self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];

  7. Drücken Sie die Schaltfläche Ausführen, um das Projekt zu erstellen und die App im iOS-Simulator zu starten.

  8. Klicken Sie in der App auf das Plussymbol (+), geben Sie aussagekräftigen Text ein, z. B. Führen Sie das Lernprogrammaus, und klicken Sie dann auf die Schaltfläche "Speichern". Dadurch wird eine POST-Anforderung an das Azure-Back-End gesendet, das Sie zuvor bereitgestellt haben. Das Back-End fügt Daten aus der Anforderung in die Sql-Tabelle von TodoItem ein und gibt Informationen zu den neu gespeicherten Elementen zurück an die mobile App zurück. Die mobile App zeigt diese Daten in der Liste an.

    Schnellstart-App, die auf iOS- ausgeführt wird