Windows Phone et Azure Storage

L’une des possibilités pour stocker en ligne les images prises à partir d’un Windows Phone est d’utiliser un compte de stockage proposé par Windows Azure.  Au travers de cet article, je vous propose de réaliser une application permettant de prendre une photo et de la stocker en ligne.

Avant de commencer, assurez-vous d’avoir :

• le dernier SDK de Windows Phone installé sur la machine, disponible à cette adresse
• un compte Windows Azure
• NuGet (extension Visual Studio qui permet d’installer facilement des librairies tierces au sein d’un projet)

Pour vous aider dans la réalisation de ce projet, vous pouvez également télécharger le code source complet présenté dans cet article: Projet WP7 & Azure Storage.

Préparation du compte de stockage

Tout d’abord, nous allons préparer le terrain du côté de Windows Azure. Pour se faire, connectez-vous au portail et rendez-vous dans la section « Services hébergés, Comptes de stockage et CDN ». Créez ensuite un nouveau compte de stockage en cliquant sur le bouton prévu à cet effet.

Portail Azure

Donnez ensuite un nom à votre nouveau compte de stockage et choisissez le datacenter de votre choix (région).

Création d'un compte de stockage Azure

La création peut prendre quelques minutes donc passons à la partie Windows Phone du projet 🙂

L’application Windows Phone

Du côté de l’application, rien de compliqué : on va juste placer un bouton sur la MainPage qui lancera une CameraCaptureTask.

MainPage.xaml.cs

        private CameraCaptureTask cameraCaptureTask;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            // Le CameraCaptureTask permet d'utiliser l'appareil photo
            cameraCaptureTask = new CameraCaptureTask();
            cameraCaptureTask.Completed += cameraCaptureTask_Completed;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // On indique que l'on veut commencer à prendre une nouvelle photo
                cameraCaptureTask.Show();
            }
            catch (InvalidOperationException)
            {
                MessageBox.Show("An error occurred.");
            }
        }

Pour aller plus loin, on va devoir installer un petit package NuGet qui va permettre à Windows Phone d’envoyer l’image sur l’Azure Storage. Utilisez donc la console et la commande suivante :

Install-Package Phone.Storage

Console NuGet

Comme vous pouvez le remarquer, l’installation de ce pakage va ajouter une série de fichiers au projet et l’un d’eux va nous être utile pour configurer l’envoi des images, il s’agit de App_Start/StorageInitializer.cs

Storage Initializer

A partir de maintenant, trois possibilités s’offrent à vous :

• Utiliser l’émulateur du SDK Azure (DevelopmentStorage)
• Envoyer directement les images depuis le téléphone sans intermédiaire
• Utiliser un proxy pour envoyer les images dans l’Azure Storage

Ne nous attardons pas sur l’utilisation de l’émulateur et passons directement à la deuxième solution.

Envoi sans l’utilisation d’un proxy

Commencez par commenter la ligne dédiée à l’émulateur et décommentez celles relatives au CloudStorageClientResolverAccountAndKey.

Envoi sans passer par un proxy

Il faut maintenant remplir les informations [your account name] et [your account key] qui peuvent être récupérées sur le portail Windows Azure.

L’étape suivante consiste à remplir l’événenement précédemment créé afin d’envoyer l’image sur l’Azure Storage.

        void cameraCaptureTask_Completed(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK && e.ChosenPhoto != null)
            {
                var blobClient = CloudStorageContext.Current.Resolver.CreateCloudBlobClient();
                var container = blobClient.GetContainerReference("images");

                container.CreateIfNotExist(
                    BlobContainerPublicAccessType.Container,
                    response =>
                    {
                        var blob = container.GetBlobReference(string.Format("{0}.jpg", Guid.NewGuid()));
                        blob.UploadFromStream(
                            e.ChosenPhoto,
                            response2 => MessageBox.Show("done"));
                    });
            }
        }

Et c’est tout ! Vous pouvez utiliser un programme comme CloudBerry pour vérifier que l’image a bien été envoyée.

CloudBerry Explorer

Envoi en utilisant un proxy

La dernière méthode nécessite la création d’un deuxième projet : un projet Windows Azure qui sera un simple site en ASP.NET servant d’intermédiaire entre l’application et l’Azure Storage.

Pour cela, rien de plus simple, faites simplement un clic droit sur votre solution pour ajouter un nouveau projet et sélectionner Windows Azure Project dans la boîte de dialogue qui s’affiche.

Création d'un nouveau projet Azure

ASP.NET MVC 3 Web Role

Ensuite, ajoutez le package NuGet nécessaire avec la commande suivante :

Install-Package WindowsAzure.Storage.Proxy

Assurez-vous de sélectionner le bon projet !

Console NuGet

La seule chose à configurer dans le projet nouvellement créé se situe dans le fichier App_Start/ StorageServices à la ligne 43. Si vous souhaitez utiliser l’émulateur, ne changez rien. Sinon, remplacer cette ligne avec vos informations.

Modifier App_Start/StorageServices.cs

C’est fini pour la partie proxy. Il reste juste à configurer le fichier dans l’application pour utiliser le proxy.

Envoi en passant par un proxy

L’utilisation du proxy ajoute une sécurité, mais nécessite d’héberger ce dernier sur Windows Azure, c’est donc une décision à prendre en fonction du projet.

Et c’est tout !

Voilà, normalement, si vous avez suivi toutes ces étapes à la lettre, vous devriez être capable d’envoyer vos photos sur Azure depuis votre Windows Phone. L’application créée lors de ce tutoriel n’est pas totalement exploitable, mais peut servir de base pour un autre projet ou être une fonctionnalité d’une application existante ! 🙂

Vous pouvez télécharger la solution décrite ci-dessus en cliquant sur le lien suivant:

En cas de problèmes avec cet article, merci de me contacter le plus rapidement possible.

À propos de l’auteur