Erstellen einer iOS-AppCreate an iOS app

Hinweis

Visual Studio App Center unterstützt End-to-End- und integrierte Dienste, die für die Entwicklung mobiler Apps von zentraler Bedeutung sind.Visual Studio App Center supports end to end and integrated services central to mobile app development. Entwickler können Build-, Test- und Verteilungsdienste nutzen, um eine Pipeline für Continuous Integration und Delivery einzurichten.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Nach der Bereitstellung der App können Entwickler den Status und die Nutzung ihrer App mithilfe der Analyse- und Diagnosedienste überwachen und mit Benutzern über den Pushdienst interagieren.Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Entwickler können auch den Authentifizierungsdienst nutzen, um ihre Benutzer zu authentifizieren, und den Datendienst, um App-Daten dauerhaft in der Cloud zu speichern und zu synchronisieren.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

Falls Sie Clouddienste in Ihre mobile Anwendung integrieren möchten, sollten Sie sich noch heute für App Center registrieren.If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

ÜbersichtOverview

In diesem Tutorial erfahren Sie, wie Sie Azure Mobile App Service-Apps, einen Cloud-Back-End-Dienst, zu einer iOS-App hinzufügen können.This tutorial shows how to add Azure App Service Mobile Apps, a cloud backend service, to an iOS app. Der erste Schritt besteht in der Erstellung eines neuen mobilen Back-Ends in Azure.The first step is to create a new mobile backend on Azure. Anschließend laden Sie eine einfache iOS-Beispiel-App vom Typ Aufgabenliste herunter, die Daten in Azure speichert.Then, download a simple Todo list iOS sample app that stores data in Azure.

Sie benötigen einen Mac und ein Azure-KontoTo complete this tutorial, you need a Mac and an Azure account

Erstellen eines neuen mobilen Azure-App-Back-EndsCreate a new Azure mobile app backend

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.

  2. Klicken Sie auf Ressource erstellen.Click Create a resource.

  3. Geben Sie in das Suchfeld Web-Appein.In the search box, type Web App.

  4. Klicken Sie in der Ergebnisliste über den Marketplace auf Web-App.In the results list, select Web App from the Marketplace.

  5. Wählen Sie Ihr Abonnement und Ihre Ressourcengruppe aus. Dabei können Sie entweder eine bereits vorhandene Ressourcengruppe auswählen oder eine neue erstellen und dabei den gleichen Namen wie für die App verwenden.Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Geben Sie einen eindeutigen Namen für Ihre Web-App ein.Choose a unique Name of your web app.

  7. Wählen Sie als Standardoption zum Veröffentlichen Code aus.Choose the default Publish option as Code.

  8. Im Laufzeitstapel müssen Sie unter ASP.NET oder Node eine Version auswählen.In the Runtime stack, you need to select a version under ASP.NET or Node. Wenn Sie an einem .NET-Backend arbeiten, wählen Sie eine ASP.NET-Version aus.If you are building a .NET backend, select a version under ASP.NET. Wenn Sie aber an einer Node-basierten Anwendung arbeiten, wählen Sie eine Node-Version aus.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Wählen Sie ein Betriebssystem aus (entweder Linux oder Windows).Select the right Operating System, either Linux or Windows.

  10. Wählen Sie die Region aus, für die diese App bereitgestellt werden soll.Select the Region where you would like this app to be deployed.

  11. Wählen Sie einen passenden App Service-Plan aus, und klicken Sie auf Überprüfen und erstellen.Select the appropriate App Service Plan and hit Review and create.

  12. Wählen Sie unter Ressourcengruppe eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue. (Verwenden Sie dabei den gleichen Namen wie für die App.)Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  13. Klicken Sie auf Create.Click Create. Warten Sie ein paar Minuten, bis der Dienst bereitgestellt wurde, bevor Sie fortfahren.Wait a few minutes for the service to be deployed successfully before proceeding. Das Benachrichtigungssymbol (Glocke) in der Portalüberschrift informiert Sie über Statusupdates.Watch the Notifications (bell) icon in the portal header for status updates.

  14. Sobald die Bereitstellung abgeschlossen ist, klicken Sie erst auf den Abschnitt Bereitstellungsdetails und dann auf die Ressource vom Typ Microsoft.Web/sites.Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. Dann werden Sie zu der App Service-Web-App geleitet, die Sie gerade erstellt haben.It will navigate you to the App Service Web App that you just created.

  15. Klicken Sie unter Einstellungen auf das Blatt Konfiguration und unter Anwendungseinstellungen auf die Schaltfläche Neue Anwendungseinstellung.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. Geben Sie auf der Seite Anwendungseinstellung hinzufügen/bearbeiten den Namen MobileAppsManagement_EXTENSION_VERSION und den Wert Latest (Aktuell) ein. Drücken Sie anschließend auf „OK“.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Nun können Sie diese neu erstellte App Service-Web-App als mobile App verwenden.You are all set to use this newly created App Service Web app as a Mobile app.

Erstellen einer Datenbankverbindung und Konfigurieren des Client- und ServerprojektsCreate a database connection and configure the client and server project

  1. Laden Sie die Client-SDK-Schnellstarts für die folgenden Plattformen herunter:Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    Hinweis

    Wenn Sie das iOS-Projekt verwenden, müssen Sie „azuresdk-iOS-*.zip“ aus dem neuesten GitHub-Release herunterladen.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Entzippen Sie die Datei, und fügen Sie die Datei MicrosoftAzureMobile.framework dem Stamm des Projekts hinzu.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Sie müssen eine Datenbankverbindung hinzufügen oder eine Verbindung mit einer vorhandenen Verbindung herstellen.You will have to add a database connection or connect to an existing connection. Legen Sie zunächst fest, ob Sie einen Datenspeicher erstellen oder einen bereits vorhandenen verwenden möchten.First, determine whether you’ll create a data store or use an existing one.

    • Erstellen eines neuen Datenspeichers: Wenn Sie vorhaben, einen Datenspeicher zu erstellen, verwenden Sie den folgenden Schnellstart:Create a new data store: If you’re going to create a data store, use the following quickstart:

      Schnellstart: Erste Schritte mit Einzeldatenbanken in Azure SQL-DatenbankQuickstart: Getting started with single databases in Azure SQL Database

    • Vorhandene Datenquelle: Befolgen Sie die nachstehenden Anweisungen, wenn Sie eine vorhandene Verbindung verwenden möchten.Existing data source: Follow the instructions below if you want to use an existing database connection

      1. Format der SQL-Datenbank-Verbindungszeichenfolge: Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} : Name des Servers. Diesen finden Sie auf der Übersichtsseite für Ihre Datenbank, in der Regel im Format „server_name.database.windows.net“.{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} : Normalerweise 1433.{port} usually 1433. {your_catalogue} : Name der Datenbank.{your_catalogue} Name of the database. {your_username} : Benutzername für den Zugriff auf Ihre Datenbank.{your_username} User name to access your database. {your_password} : Kennwort für den Zugriff auf Ihre Datenbank.{your_password} Password to access your database.

        Weitere Informationen zum Format der SQL-VerbindungszeichenfolgeLearn more about SQL Connection String format

      2. Fügen Sie die Verbindungszeichenfolge Ihrer mobilen App hinzu. In App Service können Sie Verbindungszeichenfolgen für Ihre Anwendung über die Option Konfiguration im Menü verwalten.Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        So fügen Sie eine Verbindungszeichenfolge hinzu:To add a connection string:

        1. Klicken Sie auf die Registerkarte Anwendungseinstellungen.Click on the Application settings tab.

        2. Klicken Sie auf [+] Neue Verbindungszeichenfolge.Click on [+] New connection string.

        3. Sie müssen den Namen, Wert und Typ Ihrer Verbindungszeichenfolge angeben.You will need to provide Name, Value and Type for your connection string.

        4. Geben Sie als Name MS_TableConnectionString ein.Type Name as MS_TableConnectionString

        5. Der Wert muss der Verbindungszeichenfolge entsprechen, die Sie im vorherigen Schritt zusammengestellt haben.Value should be the connecting string you formed in the step before.

        6. Wenn Sie eine Verbindungszeichenfolge einer SQL Azure-Datenbank hinzufügen, wählen Sie unter Typ die Option SQLAzure.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps umfasst SDKs für .NET- und Node.js-Back-Ends.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Node.js-Back-EndNode.js backend

      Wenn Sie die Node.js-Schnellstart-App verwenden möchten, befolgen Sie die nachstehenden Anweisungen.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. Wechseln Sie im Azure-Portal zu Einfache Tabellen. Der folgende Bildschirm wird angezeigt.In the Azure portal, go to Easy Tables, you will see this screen.

        Node: Einfache Tabellen

      2. Stellen Sie auf der Registerkarte Konfiguration sicher, dass die SQL-Verbindungszeichenfolge bereits hinzugefügt wurde. Aktivieren Sie dann das Kontrollkästchen Ich bestätige, dass durch diese Aktion alle Websiteinhalte überschrieben werden, und klicken Sie auf die Schaltfläche TodoItem-Tabelle erstellen.Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Node: Konfiguration einfacher Tabellen

      3. Klicken Sie in Einfache Tabellen auf die Schaltfläche + Hinzufügen.In Easy Tables, click the + Add button.

        Node: Schaltfläche „Hinzufügen“ für einfache Tabellen

      4. Erstellen Sie eine TodoItem-Tabelle mit anonymem Zugriff.Create a TodoItem table with anonymous access.

        Node: Einfache Tabelle hinzufügen

    • .NET-Back-End.NET backend

      Wenn Sie die .NET-Schnellstart-App verwenden möchten, befolgen Sie die nachstehenden Anweisungen.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Laden Sie das .NET-Serverprojekt für Azure Mobile Apps aus dem Repository azure-mobile-apps-quickstarts herunter.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Erstellen Sie das .NET-Serverprojekt lokal in Visual Studio.Build the .NET server project locally in Visual Studio.

      3. Öffnen Sie in Visual Studio den Projektmappen-Explorer, klicken Sie mit der rechten Maustaste auf das Projekt ZUMOAPPNAMEService, und klicken Sie auf Veröffentlichen. Das Fenster Publish to App Service wird angezeigt.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Wenn Sie an einem Mac arbeiten, finden Sie hier andere Möglichkeiten zum Bereitstellen der App.If you are working on Mac, check out other ways to deploy the app here.

        Visual Studio-Veröffentlichung

      4. Wählen Sie App Service als Ziel für die Veröffentlichung aus, klicken Sie auf Vorhandene auswählen, und klicken Sie dann im unteren Fensterbereich auf Veröffentlichen.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Sie müssen sich zuerst mit Ihrem Azure-Abonnement bei Visual Studio anmelden.You will need to log into Visual Studio with your Azure subscription first. Wählen Sie Subscription, Resource Group und dann den Namen Ihrer App aus.Select the Subscription, Resource Group, and then select the name of your app. Klicken Sie schließlich auf OK. Dadurch wird das lokale .NET-Serverprojekt im App Service-Back-End bereitgestellt.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. Nach Abschluss der Bereitstellung werden Sie im Browser an http://{zumoappname}.azurewebsites.net/ umgeleitet.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

Ausführen der iOS-AppRun the iOS app

  1. Öffnen Sie das heruntergeladene Clientprojekt in Xcode.Open the downloaded client project using Xcode.

  2. Wechseln Sie zum Azure-Portal, und navigieren Sie zu der mobilen App, die Sie erstellt haben.Go to the Azure portal and navigate to the mobile app that you created. Suchen Sie auf dem Blatt Overview nach der URL, die den öffentlichen Endpunkt für Ihre mobile App darstellt.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Beispiel: der Sitename für meinen App-Namen „test123“ wird https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  3. Für ein Swift-Projekt öffnen Sie die Datei ToDoTableViewController.swift in diesem Ordner: „ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift“.For Swift project, open the file ToDoTableViewController.swift in this folder - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. Der Anwendungsname lautet ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  4. Ersetzen Sie in der viewDidLoad()-Methode den Parameter ZUMOAPPURL durch den oben stehenden öffentlichen Endpunkt.In viewDidLoad() method, replace ZUMOAPPURL parameter with public endpoint above.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    wird zubecomes

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

  5. Für Objective-C-Projekt öffnen Sie die Datei QSTodoService.m in diesem Ordner: „ZUMOAPPNAME/ZUMOAPPNAME“.For Objective-C project, open the file QSTodoService.m in this folder - ZUMOAPPNAME/ZUMOAPPNAME. Der Anwendungsname lautet ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  6. Ersetzen Sie in der init-Methode den Parameter ZUMOAPPURL durch den oben stehenden öffentlichen Endpunkt.In init method, replace ZUMOAPPURL parameter with public endpoint above.

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

    wird zubecomes

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

  7. Klicken Sie auf die Schaltfläche Ausführen , um das Projekt zu erstellen und die App im iOS-Simulator zu starten.Press the Run button to build the project and start the app in the iOS simulator.

  8. Klicken Sie in der App auf das Plussymbol ( + ), geben Sie einen sinnvollen Text ein, wie z. B. Tutorial abschließen, und klicken Sie dann auf die Schaltfläche „Speichern“.In the app, click the plus (+) icon, type meaningful text, such as Complete the tutorial, and then click the save button. Damit wird eine POST-Anforderung an das Azure-Back-End gesendet, das Sie zuvor bereitgestellt haben.This sends a POST request to the Azure backend you deployed earlier. Das Back-End fügt Daten aus der Anforderung in die TodoItem-SQL-Tabelle ein und gibt Informationen über die neu gespeicherten Elemente an die mobile App zurück.The backend inserts data from the request into the TodoItem SQL table, and returns information about the newly stored items back to the mobile app. Die mobile App zeigt diese Daten in der Liste an.The mobile app displays this data in the list.

    Schnellstart-App unter iOS