Créer une application iOSCreate an iOS app

Vue d’ensembleOverview

Ce didacticiel présente l’ajout d’App Service Mobile Apps, un service principal cloud, à une application iOS.This tutorial shows how to add Azure App Service Mobile Apps, a cloud backend service, to an iOS app. La première étape consiste à créer un nouveau serveur principal mobile sur Azure.The first step is to create a new mobile backend on Azure. Téléchargez ensuite un exemple d’application iOS Todo list simple qui stocke les données dans Azure.Then, download a simple Todo list iOS sample app that stores data in Azure.

Pour suivre ce didacticiel, vous avez besoin d’un Mac et d’un compte AzureTo complete this tutorial, you need a Mac and an Azure account

Créer un serveur principal d'applications mobiles AzureCreate a new Azure mobile app backend

  1. Connectez-vous au Azure portal.Sign in to the Azure portal.

  2. Cliquez sur Créer une ressource.Click Create a resource.

  3. Dans la zone de recherche, tapez application web.In the search box, type Web App.

  4. Dans la liste des résultats, sélectionnez Application web à partir de la Place de marché.In the results list, select Web App from the Marketplace.

  5. Sélectionnez votre Abonnement et votre Groupe de ressources (sélectionnez un groupe de ressources existant ou créez-en un en utilisant le même nom que celui de votre application).Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Choisissez un Nom unique à votre application web.Choose a unique Name of your web app.

  7. Choisissez l’option par défaut Publier, comme Code.Choose the default Publish option as Code.

  8. Dans la Pile d’exécution, vous devez sélectionner une version sous ASP.NET ou Nœud.In the Runtime stack, you need to select a version under ASP.NET or Node. Si vous générez un serveur principal .NET, sélectionnez une version sous ASP.NET.If you are building a .NET backend, select a version under ASP.NET. Autrement, si vous ciblez une application basée sur des nœuds, sélectionnez-en une de la version à partir de Nœud.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Sélectionnez le Système d’exploitation voulu : Linux ou Windows.Select the right Operating System, either Linux or Windows.

  10. Sélectionnez la Région où vous souhaitez que cette application soit déployée.Select the Region where you would like this app to be deployed.

  11. Sélectionnez le Plan App Service qui convient et appuyez sur Examiner et créer.Select the appropriate App Service Plan and hit Review and create.

  12. Dans Groupe de ressources, sélectionnez un groupe de ressources existant ou créez-en un (en utilisant le même nom que votre application).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  13. Cliquez sur Créer.Click Create. Patientez quelques minutes jusqu’au déploiement du service, puis continuez.Wait a few minutes for the service to be deployed successfully before proceeding. Regardez l’icône de Notifications (cloche) dans l’en-tête de portail à la recherche de mises à jour de l’état.Watch the Notifications (bell) icon in the portal header for status updates.

  14. Une fois le déploiement terminé, cliquez sur la section Détails du déploiement, puis sur la Ressource de Type 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. Vous accédez alors à l’application web App Service que vous venez de créer.It will navigate you to the App Service Web App that you just created.

  15. Cliquez dans le panneau Configuration sous Paramètres et dans Paramètres de l’application, cliquez sur le bouton Nouveau paramètre d’application.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. Dans la page Ajouter/modifier le paramètre d’application, entrez MobileAppsManagement_EXTENSION_VERSION comme Nom, et La plus récente comme Valeur, puis appuyez sur OK.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Vous êtes prêt à utiliser cette application web App Service nouvellement créée comme Application mobile.You are all set to use this newly created App Service Web app as a Mobile app.

Créer une connexion de base de données et configurer le projet client et de serveurCreate a database connection and configure the client and server project

  1. Télécharger les démarrages rapides du kit de développement logiciel (SDK) client pour les plateformes suivantes :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#)

    Notes

    Si vous utilisez le projet iOS, vous devez télécharger « azuresdk-iOS-*.zip » à partir de la toute dernière version de GitHub.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Décompressez et ajoutez le fichier MicrosoftAzureMobile.framework à la racine du projet.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Vous devrez ajouter une connexion de base de données ou vous connecter à une connexion existante.You will have to add a database connection or connect to an existing connection. Tout d’abord, déterminez si vous allez créer un magasin de données ou en utiliser un existant.First, determine whether you’ll create a data store or use an existing one.

    • Créer une nouveau magasin de données : Si vous créez un magasin de données, utilisez le démarrage rapide suivant :Create a new data store: If you’re going to create a data store, use the following quickstart:

      Démarrage rapide : Prise en main de bases de données uniques dans Azure SQL DatabaseQuickstart: Getting started with single databases in Azure SQL Database

    • Source de données existante : Suivez les instructions ci-dessous si vous souhaitez utiliser une connexion de base de données existanteExisting data source: Follow the instructions below if you want to use an existing database connection

      1. Format de chaîne de connexion à la base de données SQL - 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} Nom du serveur, vous le trouverez dans la page de vue d’ensemble de votre base de données. Il se présente généralement comme suit : « nom_serveur.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} généralement 1433.{port} usually 1433. {your_catalogue} Nom de la base de données.{your_catalogue} Name of the database. {your_username} Nom d’utilisateur pour accéder à votre base de données.{your_username} User name to access your database. {your_password} Mot de passe pour accéder à votre base de données.{your_password} Password to access your database.

        En savoir plus sur le format de chaîne de connexion SQLLearn more about SQL Connection String format

      2. Ajoutez la chaîne de connexion à votre application mobile dans App Service, vous pouvez gérer les chaînes de connexion pour votre application à l’aide de l’option Configuration dans le menu.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.

        Pour ajouter une chaîne de connexion :To add a connection string:

        1. Cliquez sur l’onglet Paramètres de l’application.Click on the Application settings tab.

        2. Cliquez sur [+] Nouveau chaîne de connexion.Click on [+] New connection string.

        3. Vous devrez fournir le Nom, la Valeur et le Type pour votre chaîne de connexion.You will need to provide Name, Value and Type for your connection string.

        4. Pour le Nom, saisissez MS_TableConnectionStringType Name as MS_TableConnectionString

        5. La valeur doit correspondre à la chaîne de connexion que vous avez formée à l’étape précédente.Value should be the connecting string you formed in the step before.

        6. Si vous ajoutez une chaîne de connexion à une base de données SQL Azure, choisissez SQLAzure sous Type.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps a des kits de développement logiciel (SDK) pour les serveurs principaux .NET et Node.js.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Backend Node.jsNode.js backend

      Si vous prévoyez d’utiliser l’application de démarrage rapide Node.js, suivez les instructions ci-dessous.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. Dans le portail Azure, accédez à Tables faciles, vous verrez cet écran.In the Azure portal, go to Easy Tables, you will see this screen.

        Tables faciles Node

      2. Assurez-vous que la chaîne de connexion SQL a déjà été ajoutée dans l’onglet Configuration. Cochez ensuite la case Je reconnais que cette opération va remplacer tout le contenu du site, puis cliquez sur le bouton Créer une table TodoItem.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.

        Tables faciles Node - Configuration

      3. Dans Tables faciles, cliquez sur le bouton + Ajouter.In Easy Tables, click the + Add button.

        Tables faciles Node - Bouton Ajouter

      4. Créez une table TodoItem avec l’accès anonyme.Create a TodoItem table with anonymous access.

        Tables faciles Node - Ajouter une table

    • Backend .NET.NET backend

      Si vous prévoyez d’utiliser l’application de démarrage rapide .NET, suivez les instructions ci-dessous.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Téléchargez le projet de serveur .NET Azure Mobile Apps à partir du référentiel azure-mobile-apps-quickstarts.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Générez le projet de serveur .NET localement dans Visual Studio.Build the .NET server project locally in Visual Studio.

      3. Dans Visual Studio, ouvrez l’Explorateur de solutions, cliquez avec le bouton droit sur le projet ZUMOAPPNAMEService, cliquez sur Publier, vous verrez une fenêtre Publish to App Service.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Si vous travaillez sur Mac, découvrez d’autres façons de déployer l’application ici.If you are working on Mac, check out other ways to deploy the app here.

        Publication de Visual studio

      4. Sélectionnez App Service comme cible de publication, puis cliquez sur Sélectionner existant, puis sur le bouton Publier bouton au bas de la fenêtre.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Vous devrez d’abord vous connecter à Visual Studio avec votre abonnement Azure.You will need to log into Visual Studio with your Azure subscription first. Sélectionnez Subscription, Resource Group, puis le nom de votre application.Select the Subscription, Resource Group, and then select the name of your app. Lorsque vous êtes prêt, cliquez sur OK, cette action déploie le projet serveur .NET que vous avez localement dans le serveur principal App Service.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. Lorsque le déploiement se termine, vous êtes redirigé vers http://{zumoappname}.azurewebsites.net/ dans le navigateur.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

Exécuter l’application iOSRun the iOS app

  1. Ouvrez le projet client téléchargé à l’aide de Xcode.Open the downloaded client project using Xcode.

  2. Ouvrez le Portail Microsoft Azure, puis accédez à l’application mobile que vous avez créée.Go to the Azure portal and navigate to the mobile app that you created. Sur le panneau Overview, recherchez l’URL qui correspond au point de terminaison public de votre application mobile.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Exemple : la valeur sitename relative au nom de l’application « test123 » est https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  3. Dans le cas d’un projet Swift, ouvrez le fichier ToDoTableViewController.swift dans le dossier ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift.For Swift project, open the file ToDoTableViewController.swift in this folder - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. Le nom de l’application est ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  4. Dans la méthode viewDidLoad(), remplacez le paramètre ZUMOAPPURL par le point de terminaison public ci-dessus.In viewDidLoad() method, replace ZUMOAPPURL parameter with public endpoint above.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    devientbecomes

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

  5. Dans le cas d’un projet Objective-C, ouvrez le fichier QSTodoService.m dans le dossier ZUMOAPPNAME/ZUMOAPPNAME.For Objective-C project, open the file QSTodoService.m in this folder - ZUMOAPPNAME/ZUMOAPPNAME. Le nom de l’application est ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  6. Dans la méthode init, remplacez le paramètre ZUMOAPPURL par le point de terminaison public ci-dessus.In init method, replace ZUMOAPPURL parameter with public endpoint above.

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

    devientbecomes

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

  7. Appuyez sur le bouton Exécuter pour générer le projet et démarrer l’application dans le simulateur iOS.Press the Run button to build the project and start the app in the iOS simulator.

  8. Dans l’application, cliquez sur l’icône du signe plus ( + ), tapez un texte explicite comme Suivre le tutoriel, puis cliquez sur le bouton Enregistrer.In the app, click the plus (+) icon, type meaningful text, such as Complete the tutorial, and then click the save button. Cette action envoie une requête POST au serveur principal Azure déployé précédemment.This sends a POST request to the Azure backend you deployed earlier. Le backend insère les données de la requête dans la table SQL TodoItem et renvoie des informations sur les éléments récemment stockés à l’application mobile.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. L’application mobile affiche ces données dans la liste.The mobile app displays this data in the list.

    Application de démarrage rapide en cours d’exécution sur iOS