Comment ajouter des services Azure Mobile à une application Windows Phone

Les applications Windows Phone qui utilisent des vignettes dynamiques, authentifient les utilisateurs avec une authentification unique et partagent des données entre appareils. Les utilisateurs utilisent généralement des services cloud. La plupart des plates-formes de cloud offrent des fonctionnalités générales pour stocker des données et exécuter du code, mais vous devez ajouter beaucoup de code d'infrastructure pour regrouper ces fonctionnalités. Azure Mobile Services vous permet d'ajouter des services de cloud à votre application en quelques minutes.

introduction

Ce didacticiel explique comment ajouter un service principal à une application Windows Phone à l'aide d'Azure Mobile Services. Vous allez créer un nouveau service mobile et une application simple à faire qui stocke ses données dans le cloud à l'aide du nouveau service mobile. Dans ce tutoriel, vous allez apprendre à:

• créer un service mobile et y ajouter des tables
• mettre à jour l'application pour utiliser le service mobile
• tester le service mobile hébergé sur Azure Mobile Services

Pour suivre avec moi, vous avez besoin d'un compte Windows Azure. Vous pouvez vous inscrire à une version d'évaluation de Windows Azure si vous n'avez pas encore de compte.. 

1. Créer un service mobile

Nous devons d’abord configurer un nouveau service mobile pouvant être utilisé par l’application Windows Phone. Le service mobile que vous allez créer dans ce tutoriel est un service mobile backend JavaScript. Il vous permet d'utiliser JavaScript pour la logique métier côté serveur. Suivez ces étapes pour créer un nouveau service mobile à l'aide du portail de gestion Azure..

Étape 1: Ajouter un service mobile

Connectez-vous au portail de gestion Azure et cliquez sur le bouton NOUVEAU bouton dans la barre de navigation. Développer Calculer> Service mobile et cliquez Créer.

 Étape 2: sélectionnez le type de base de données, la région et l'exécution

dans le Nouveau service mobile assistant, sélectionnez une base de données SQL gratuite de 20 Mo ou utilisez l’une de vos bases existantes. Sélectionner JavaScript du Backend menu et entrez un sous-domaine pour le nouveau service mobile dans le URL zone de texte.

Notez que le nom du service mobile doit être unique. Une erreur est affichée à côté de URL lorsque le nom / sous-domaine que vous avez entré n'est pas disponible.

Étape 3: Spécifiez les paramètres de la base de données

Lorsque vous créez un nouveau service mobile, celui-ci est automatiquement associé à une base de données SQL. Le backend Azure Mobile Services fournit ensuite une prise en charge intégrée permettant aux applications distantes de stocker et de récupérer des données en toute sécurité, sans avoir à écrire ou déployer de code serveur personnalisé..

Pour configurer la base de données, entrez le nom de la base de données dans le champ prénom champ. Ensuite, entrez Nom de connexion du serveur et Mot de passe de connexion du serveur accéder au serveur de base de données SQL.

Cliquez sur la coche en bas à droite pour terminer le processus. Vous avez maintenant créé un nouveau service mobile pouvant être utilisé par vos applications mobiles. Avant de pouvoir commencer à stocker des données, vous devez d'abord créer une table pouvant stocker les données de votre application..

Notez que l'utilisation d'une base de données dans une région différente n'est pas recommandée en raison des coûts de bande passante supplémentaires et des latences plus élevées..

2. Ajouter une table au service mobile

Dans cette étape, nous allons ajouter une table nommée ToDoItem vers le service mobile, qui sera utilisé par l'application client pour enregistrer les tâches de l'utilisateur.

Étape 1: Créer une nouvelle table

Du Les données onglet dans le Portail de gestion Azure, Cliquez sur Créer ajouter une nouvelle table au service mobile. Nommez la table ToDoItem et définir un niveau d'autorisation pour chaque opération. Pour le ToDoItem table, j'ai utilisé les paramètres d'autorisation par défaut.

Cliquez sur la coche en bas à droite pour terminer le processus de configuration du tableau. En quelques secondes, vous avez ajouté le ToDoItem table au service mobile.

Étape 2: Ajouter des colonnes à la table

le ToDoItem La table contient déjà un certain nombre de colonnes pour stocker l'id, la date de création, le statut supprimé, la date de mise à jour et les informations sur la version. Pour que la table soit utile à notre application, nous devons ajouter deux colonnes supplémentaires, une pour stocker le texte de la tâche et une pour stocker le statut de la tâche..

Pour ajouter les colonnes supplémentaires, cliquez sur Ajouter une colonne du Les colonnes onglet du ToDoItem table. le texte la colonne est de type Chaîne et le terminé la colonne est de type Booléen.

Ce sont les colonnes de la ToDoItem table.

Maintenant que nous avons configuré notre service mobile et y avons ajouté un tableau, vous avez deux options: créer une nouvelle application ou connecter une application existante au service mobile. Dans ce didacticiel, nous allons modifier une application Windows Phone existante pour utiliser le service mobile..

3. Configurez l'application pour utiliser le service mobile

L'application doit être configurée correctement pour utiliser le service mobile. Vous devez ajouter du code pour connecter votre application à votre service mobile et enregistrer des données sur le cloud..

Cliquez avec le bouton droit sur le nom du projet dans la liste. Explorateur de solution et choisir Ajouter > Service connecté du menu. dans le Ajouter un service connecté boîte de dialogue qui apparaît, choisissez Services Azure Mobile et cliquez Configurer.

Ensuite, choisissez le service mobile que vous avez créé précédemment dans la liste des services existants de votre compte. Vous devrez fournir vos informations d'identification pour vous connecter et répertorier les services mobiles dans votre compte Windows Azure..

Sélectionnez le service mobile que nous avons créé et cliquez sur Ajouter pour compléter le processus. L'assistant ajoutera ensuite toutes les références requises à votre projet. Les références peuvent également être ajoutées manuellement en installant le paquet requis à l’aide de NuGet. Cliquez avec le bouton droit sur votre projet client, sélectionnez Gérer les paquets NuGet, rechercher le WindowsAzure.MobileServices package, et ajouter une référence pour le package.

L'assistant installe le nécessaire NuGet packages, ajoute au projet une référence pour la bibliothèque cliente du service mobile et met à jour le code source du projet. L’assistant ajoute également un nouveau champ statique à la liste. App classe qui ressemble à ceci:

public statique Microsoft.WindowsAzure.MobileServices.MobileServiceClient todolistClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient ("https://todolist.azure-mobile.net/", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

Ce code permet d’accéder à votre nouveau service mobile dans votre application en utilisant une instance du MobileServiceClient classe. Le client est créé en fournissant l'URI et la clé d'application du nouveau service mobile. Ce champ statique est disponible pour toutes les pages de votre application. Vous devez ajouter ce code manuellement à App.xaml.cs si vous n'utilisez pas l'assistant.

4. Mettre à jour l'application pour utiliser le service mobile

Vous devez mettre à jour votre application Windows Phone pour utiliser le service mobile en tant que service principal. Vous devez seulement modifier le MainPage.cs dossier de projet.

Étape 1: Ajoutez le ToDoItem Définition de classe

Ajouter une nouvelle classe de modèle, ToDoItem, à votre projet. La classe de modèle contient des propriétés correspondant aux colonnes de la ToDoItem table que nous avons créée plus tôt.

Classe publique ToDoItem chaîne publique Id get; ensemble;  [Newtonsoft.Json.JsonProperty (PropertyName = "text")] chaîne publique Text get; ensemble;  [Newtonsoft.Json.JsonProperty (PropertyName = "complete")] public bool Complete get; ensemble;  public ToDoItem ()  public ToDoItem (chaîne de caractères text, bool status = false) Text = text; Complet = statut; 

le JsonPropertyAttribute La méthode est utilisée pour définir le mappage entre les noms de propriété dans l'application client et les noms de colonne dans la table correspondante. Une référence à Newtonsoft.Json package doit être ajouté au projet pour faire ce travail.

Étape 2: Ajouter du code pour insérer et récupérer des éléments

Ajouter ce qui suit en utilisant déclaration à MainPage.xaml.cs:

using Microsoft.WindowsAzure.MobileServices;

Ajoutez les lignes suivantes en haut de MainPage.xaml.cs créer une collection de liaisons et des classes de proxy compatibles avec les services mobiles pour la table de base de données.

MobileServiceCollection privé articles; IMobileServiceTable privé todoTable = App.tutsplusdemoClient.GetTable();

Ensuite, créez un InsertToDoItem méthode pour insérer un nouvel élément dans la table. Ajouter le async modificateur à la méthode et ajoutez le code suivant pour insérer un élément.

public async Task InsertToDoItem (ToDoItem toDoItt) wait todoTable.InsertAsync (toDoItem); items.Add (toDoItem); 

Ce code fonctionne si les autorisations de votre table sont définies sur N'importe qui avec une clé d'application. Si vous modifiez les autorisations pour sécuriser votre service mobile, vous devrez ajouter une prise en charge de l'authentification utilisateur. Voir Ajout d'une authentification à l'aide de Azure Mobile Services.. 

Créer un RefreshTodoItems méthode qui définit la liaison à la collection d’articles de la ToDoItem table, qui contient tous les ToDoItem objets renvoyés du service mobile. Nous affichons une boîte de message si un problème survient lors de l'exécution de la requête.

tâche async privée RefreshTodoItems () MobileServiceInvalidOperationException exception = null; try // Requête qui renvoie tous les éléments. items = wait todoTable.ToCollectionAsync ();  catch (MobileServiceInvalidOperationException e) exception = e;  if (exception! = null) attend le nouveau MessageDialog (exception.Message, "Erreur lors du chargement des éléments"). ShowAsync ();  else ListItems.ItemsSource = items; this.ButtonSave.IsEnabled = true;  

Étape 3: Ajouter des contrôles à MainPage.xaml

Nous devons maintenant mettre à jour MainPage.xaml afficher des tâches et ajouter la possibilité d’ajouter des tâches. Le code XAML pourrait ressembler ci-dessous à une interface utilisateur simple contenant un Zone de texte insérer des objets et un ListView pour voir les choses à faire.

           sauvegarder Rafraîchir          

le InsertToDoItem la méthode est appelée lorsque le sauvegarder bouton est tapé, ce qui insère la tâche à faire dans la table.

void async privé ButtonSave_Click (expéditeur d'objet, RoutedEventArgs e) var todoItem = new TodoItem Text = TextInput.Text; wait InsertTodoItem (todoItem); 

le RefreshToDoItems La méthode est appelée lorsque le Rafraîchir bouton est exploité. Dans cette méthode, nous récupérons tous les éléments de la table.

void async privé ButtonRefresh_Click (expéditeur d'objet, RoutedEventArgs e) ButtonRefresh.IsEnabled = false; // wait SyncAsync (); // synchronisation hors ligne à attendre RefreshTodoItems (); ButtonRefresh.IsEnabled = true; 

5. Testez le service mobile

La dernière étape de ce didacticiel consiste à examiner les données stockées dans le service mobile. Dans le portail Windows Azure Classic, cliquez sur le bouton ToDoItem table sous la Les données onglet de votre service mobile. Sous le Feuilleter onglet, vous pouvez voir tous les éléments de la table.

Conclusion

Ce didacticiel présente les bases de l'utilisation d'Azure Mobile Services en tant que serveur principal pour une application Windows Phone. La création d'un service mobile et son utilisation dans l'application pour stocker des données dans le cloud sont faciles à mettre en œuvre.

Des scénarios plus complexes impliquent une synchronisation des données hors connexion. Vous pouvez également ajouter la prise en charge de la synchronisation des données hors connexion à l'application après ce tutoriel. Vous pouvez limiter les autorisations de table pour autoriser uniquement les utilisateurs authentifiés à mettre à jour la table après cet article Envato Tuts +.

N'hésitez pas à télécharger les fichiers sources du didacticiel pour référence. N'oubliez pas de configurer l'application pour qu'elle utilise Azure Mobile Services avant de la déployer..