Démarrage rapide : ajout d’un service mobile (JavaScript)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Ce guide de démarrage rapide vous indique comment ajouter un service principal basé sur le cloud à une application existante à l’aide d’Azure Mobile Services. Mobile Services simplifie le stockage et l’interrogation de données, la connexion d’utilisateurs avec des fournisseurs d’identité populaires, et l’envoi et la réception de notifications Push dans votre application. Pour en savoir plus, voir le Centre de développement Mobile Services. Une fois terminé, vous aurez créé un service mobile dans votre abonnement Azure, ajouté du code Mobile Services au projet d’application de démarrage et exécuté l’application pour insérer des données dans le nouveau service mobile.

Prérequis

Microsoft Visual Studio 2013**.
Compte Azure actif. Si vous ne possédez pas de compte, vous pouvez créer un compte d’évaluation gratuite en quelques minutes. Pour plus d’informations, voir Évaluation gratuite Microsoft Azure.
Projet GetStartedWithMobileServices. Il s’agit d’un projet d’application du Windows Store qui sera activé pour utiliser Mobile Services.

Télécharger et exécuter le projet GetStartedWithMobileServices

Tout d’abord, vous allez télécharger et tester un projet Visual Studio 2013 pour une application du Windows Store à laquelle la prise en charge de Mobile Services sera ajoutée. Cette application de démarrage stocke des éléments en mémoire.

Téléchargez l’exemple de projet d’application GetStartedWithMobileServices.
Dans Visual Studio, ouvrez le projet téléchargé, développez le dossier js, puis examinez le fichier de script default.js. Notez que les objets TodoItem ajoutés sont stockés dans un objet List en mémoire, puis appuyez sur la touche F5 pour regénérer le projet et démarrer l’application.
Dans l’application, tapez du texte dans Insert a TodoItem, puis cliquez sur Save. Notez que le texte enregistré est affiché dans la seconde colonne sous Query and update data.

Créer un service mobile

Les étapes suivantes permettent de créer un service mobile dans Azure et d’ajouter du code à votre projet qui active l’accès à ce nouveau service. Avant de pouvoir créer le service mobile, vous devez importer le fichier publishsettings de votre abonnement Azure vers Visual Studio. Cela permet à Visual Studio de se connecter à Azure en votre nom. Quand vous créez un service mobile, vous devez spécifier une Base de données SQL Azure utilisée par le service mobile pour stocker les données d’application.

Dans Visual Studio 2013, ouvrez l’Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis cliquez sur Ajouter, Service connecté.
Dans la boîte de dialogue Gestionnaire de services, cliquez sur Créer un service, puis sélectionnez <Importer...> dans Abonnement dans la boîte de dialogue Créer un service mobile.
Dans Importer des abonnements Microsoft Azure, cliquez sur Télécharger le fichier d’abonnement, connectez-vous à votre compte Microsoft Azure (si nécessaire), puis cliquez sur Enregistrer quand votre navigateur vous invite à enregistrer le fichier.Remarque La fenêtre de connexion s’affiche dans le navigateur, éventuellement derrière votre fenêtre Visual Studio. Prenez notre de l’emplacement où vous avez enregistré le fichier .publishsettings téléchargé. Vous pouvez ignorer cette étape si votre projet est déjà connecté à votre abonnement Azure.
Cliquez sur Parcourir, accédez à l’emplacement où vous avez enregistré le fichier .publishsettings, sélectionnez le fichier, puis cliquez sur Ouvrir et sur Importer. Visual Studio importe les données nécessaires pour se connecter à votre abonnement Azure. Quand un ou plusieurs services mobiles sont déjà associés à votre abonnement, les noms des services sont affichés. Remarque Après avoir importé les paramètres de publication, il vaut mieux supprimer le fichier .publishsettings téléchargé car il contient des informations pouvant être utilisées par d’autres personnes pour accéder à votre compte. Sécurisez le fichier si vous prévoyez de le conserver et de le réutiliser dans d’autres projets d’applications connectées.
Cliquez sur Créer un service puis, dans la boîte de dialogue Créer un service mobile, sélectionnez votre Abonnement et la Région souhaitée pour votre service mobile. Tapez un Nom pour votre service mobile et vérifiez qu’il est disponible. Un symbole X rouge s’affiche quand le nom n’est pas disponible. Dans Base de données, sélectionnez <Créer nouveau>, spécifiez le Nom d’utilisateur du serveur et le Mot de passe du serveur, puis cliquez sur Créer.Remarque Dans le cadre de ce guide de démarrage rapide, vous allez créer un nouveau serveur et une nouvelle instance de Base de données SQL. Vous pouvez réutiliser cette nouvelle base de données et la gérer comme toute autre instance de Base de données SQL. Si vous avez déjà une base de données dans la même région que le nouveau service mobile, vous pouvez choisir la base de données existante. Dans ce cas, vérifiez que vous fournissez les informations d’identification de connexion correctes. Si vous fournissez des informations d’identification de connexion incorrectes, le service mobile est créé dans un état d’intégrité anormal.

Une fois le service mobile créé, une référence à la bibliothèque cliente Mobile Services est ajoutée au projet et le code source de votre projet est mis à jour.
Dans l’Explorateur de solutions, développez services, services mobiles, le nom de votre service, puis ouvrez le fichier service.js et notez la présence de la nouvelle variable, comme illustré dans l’exemple suivant :
```
var todolistClient = new WindowsAzure.MobileServiceClient(
                "https://todolist.azure-mobile.net/",
                "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
```
Ce code fournit l’accès à votre nouveau service mobile dans votre application à l’aide d’une instance de l’objet MobileServiceClient. Le client est créé en fournissant l’URI et la clé d’application du nouveau service mobile.
Ouvrez le fichier default.html et notez que deux nouvelles références script ont été ajoutées, une à la bibliothèque cliente Mobile Services et une au script qui définit l’objet MobileServiceClient dans votre projet.

Ajouter une nouvelle table au service mobile et mettre à jour l’application

Avant de pouvoir stocker des données dans votre nouveau service mobile, vous devez créer une table de stockage dans le service. Les étapes suivantes montrent comment utiliser Visual Studio 2013 pour créer une table dans le service mobile. Ensuite, vous mettez à jour l’application pour qu’elle utilise Mobile Services pour stocker les éléments dans Azure plutôt que dans la collection locale.

Dans l’Explorateur de serveurs, développez Azure et Mobile Services, cliquez avec le bouton droit sur votre service mobile, puis cliquez sur Créer une table. Dans la boîte de dialogue Créer une table, tapez TodoItem dans Nom de la table.
Développez Avancé, vérifiez que les autorisations d’opération sur la table par défaut sont Toute personne avec la clé d’application, puis cliquez sur Créer. La table TodoItem est alors créée sur le serveur, où toute personne disposant de la clé d’application peut accéder aux données de la table et les modifier sans avoir à s’authentifier au préalable. Remarque Le clé d’application est distribuée avec l’application. Cette clé n’étant pas distribuée de manière sécurisée, elle ne peut pas être considérée comme un jeton de sécurité. Pour sécuriser l’accès à vos données de service mobile, vous devez plutôt authentifier les utilisateurs avant d’autoriser l’accès. Pour plus d’informations, voir Autorisations.
Dans le fichier de script default.js, commentez la ligne qui définit la collection items existante, puis supprimez les commentaires ou ajoutez la ligne de code suivante et remplacez yourClient par la variable ajoutée au fichier service.js quand vous avez connecté votre projet au service mobile :
```
var todoTable = yourClient.getTable('TodoItem');
```
Ce code crée un objet proxy (todoTable) pour la nouvelle table de base de données.
Remplacez la fonction InsertTodoItem par le code suivant :
```
var insertTodoItem = function (todoItem) {
    // Inserts a new row into the database. When the operation completes
    // and Mobile Services has assigned an id, the item is added to the binding list.
    todoTable.insert(todoItem).done(function (item) {
        todoItems.push(item);
    });
};
```
Ce code insère un nouvel élément dans la table. Remarque De nouvelles tables sont créées uniquement avec une colonne Id. Quand le schéma dynamique est activé, Mobile Services génère automatiquement de nouvelles colonnes en fonction de l’objet JSON qui figure dans la demande d’insertion ou de mise à jour. Pour plus d’informations, voir Schéma dynamique.

Remplacez la fonction RefreshTodoItems par le code suivant :

var refreshTodoItems = function () {
    // This code refreshes the entries in the list by querying the table. 
    todoTable.read().done(function (results) {
        todoItems = new WinJS.Binding.List(results);
        listItems.winControl.itemDataSource = todoItems.dataSource;
    });
};

Il définit la liaison à la collection d’éléments dans todoTable, qui contient tous les objets TodoItem renvoyés par le service mobile.

Remplacez la fonction UpdateCheckedTodoItem par le code suivant :

var updateCheckedTodoItem = function (todoItem) {
    // This code takes a freshly completed TodoItem and updates the database. 
    todoTable.update(todoItem);
};

Cela envoie une mise à jour d’éléments au service mobile.

Tester l’application avec votre nouveau service mobile

Maintenant que l’application a été mise à jour pour utiliser Mobile Services pour le stockage principal, il faut la tester avec Mobile Services.

Dans Visual Studio, appuyez sur la touche F5 pour exécuter l’application.
Comme précédemment, tapez du texte dans Insert a TodoItem, puis cliquez sur Save. Cela envoie un nouvel élément comme insertion au service mobile et l’élément est ajouté à la collection.
Arrêtez puis redémarrez l’application. Notez que les données ajoutées sont affichées. Elles ont été conservées puis rechargées à partir du service mobile.

Modifier la requête pour filtrer les éléments achevés

Maintenant que l’application stocke des données dans Azure, nous allons modifier la requête pour filtrer les éléments achevés et les exclure des résultats.

Dans le fichier de script default.js, remplacez la méthode RefreshTodoItems existante par le code suivant, qui filtre et exclut les éléments achevés :

var refreshTodoItems = function () {
    // More advanced query that filters out completed items. 
    todoTable.where({ complete: false })
        .read()
        .done(function (results) {
            todoItems = new WinJS.Binding.List(results);
            listItems.winControl.itemDataSource = todoItems.dataSource;
        });
};

Redémarrez l’application, cochez l’un des autres éléments de la liste, puis cliquez sur le bouton Refresh. Notez que l’élément coché a maintenant disparu de la liste. Chaque actualisation provoque un aller-retour vers le service mobile, qui renvoie maintenant des données filtrées.

Récapitulatif et étapes suivantes

Vous savez désormais comment utiliser Mobile Services pour ajouter des fonctionnalités de stockage de données distantes à une application du Windows Store existante.

Vous allez maintenant découvrir comment utiliser Mobile Services pour ajouter une fonctionnalité de notification Push à votre application du Windows Store : Démarrage rapide : ajout de notifications Push pour un service mobile.

Rubriques associées

Valider et modifier des données dans Mobile Services à l’aide de scripts serveur

Affiner les requêtes Mobile Services avec la pagination

Share via