Pour faire suite au précédent tutoriel (partie 1 et partie 2) consacré à l’application Cartes Postales 71 pour Windows 8 Consumer Preview, nous souhaitons maintenant aborder l'utilisation du service SkyDrive et de sa plateforme de développement à partir cette application de style Metro et ce, à l'aide d'un identifiant Windows Live ID.

Chaque détenteur d’un compte Windows Live ID dispose gratuitement d'un espace de stockage sur le Cloud, SkyDrive. Dans ce billet, nous allons donc modifier cette application Cartes Postales de façon à utiliser directement l'espace de stockage SkyDrive pour sauvegarder les photos mises dans les favoris. De ce fait, une fois les photos dans le Cloud, ces dernières seront accessibles depuis n’importe où (comme un Windows Phone par exemple).

Pour accéder au compte SkyDrive de l’utilisateur depuis une application de style Metro, nous allons utiliser le SDK Live qui fournit un ensemble de contrôles et d’APIS pour permettre aux applications :

  • De s’intégrer, par le biais de Live Connect via un identifiant Windows Live ID,
  • Et ainsi d’interagir avec des services comme SkyDrive, Hotmail ou Windows Live Messenger.

Le kit de développement Live SDK est disponible sur le site Live Connect Developer Center.

Une fois le Live SDK téléchargé et installé, vous devez suivre la procédure décrite ici pour enregistrer votre application.

image

Si vous voulez vous familiariser avec le Live SDK, vous pouvez regarder, si ce n’est pas d’ores et déjà le cas, les vidéos Power your app with Live Services (Intégration des services Live à vos applications) et The complete developer’s guide to the SkyDrive API (Guide complet de l'API SkyDrive à l'intention des développeurs) de la conférence BUILD consacrées au SDK Live pour avoir un bon aperçu en la matière.

Vous pouvez consulter, à titre de compléments, les billets Des applications "Windows 8" étendues au cloud grâce à SkyDrive et Le stockage cloud personnel pour Windows disponible partout, grâce au nouveau SkyDrive sur le blog Conception de Windows 8 et enfin la documentation Live Connect officielle.

Conception

Pour en revenir à notre application et son intégration avec le stockage SkyDrive, il convient de fournir à la base essentiellement deux fonctionnalités :

  1. Télécharger une photo dans un album réservé d’un compte SkyDrive.
  2. Effacer une photo de cet album.

Voici donc, en conséquence, les séquences d’interactions qui seront nécessaires entre notre application et le stockage SkyDrive pour répondre à ces deux fonctionnalités :

image

image

Nous allons donc rajouter à l’application une classe SkyDriveHelper qui sera responsable de toutes les interactions avec le stockage SkyDrive. Voici le diagramme UML de la classe SkyDriveHelper dans les grandes lignes :

image

Comme on peut le constater, la classe SkyDriveHelper rend directement « consommables » deux méthodes pour pouvoir télécharger et effacer des photos sur le stockage SkyDrive, le reste des méthodes étant utilisé à l’intérieur de la classe.

Pour effectuer ces appels vers l’API SkyDrive, il faut se servir de la classe LiveConnectClient qui permet d’interagir avec l’API REST de SkyDrive. Il s’agit donc essentiellement de requêtes s’exécutant sur le protocole HTTPS.

La classe LiveConnectSession permet, quant à elle, de représenter une session utilisateur une fois celui-ci identifié sur la base de son Windows Live ID. Passons maintenant au code !

Implémentation

Fort de ces éléments, nous allons maintenant aborder les parties les plus importantes de l’implémentation, le code fourni avec ce billet est bien plus complet.

La première chose à faire après avoir ré-ouvert votre projet Cartes Postales Windows 8 est de rajouter une référence vers le Live SDK via la fonctionnalité Add Reference :

image

Ensuite pour permettre à l’utilisateur d’ouvrir une session Windows Live via l’interface graphique, nous allons modifier la page SelectedPhotoPage.xaml. Dans la pratique, il suffit :

  1. De rajouter à la page une référence vers l’espace-nom Microsoft.Live.Controls,
  2. De créer un contrôle de type SignInButton,
  3. Et enfin de rajouter deux StackPanel contenant des ProgressBar qui indiqueront à l’utilisateur qu’un téléchargement ou qu’un effacement sont en cours.

 

<Page x:Class="CartesPostales.Metro.Views.SelectedPhotoPage"

     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

     xmlns:live="using:Microsoft.Live.Controls"

  

 

   <StackPanel Grid.Column="1" Margin="10,0,10,0">            

      <TextBlock FontFamily="Segoe UI Light" FontSize="42" Text="{Binding periode_historique}">

      </TextBlock>

     < TextBlock FontFamily="Segoe UI Semibold" FontSize="20" Text="{Binding titre1}"

                 TextWrapping="Wrap">

      </TextBlock>

     

      <StackPanel Background="{StaticResourceControlHighlightBrush}">

         <live:SignInButton x:Name="btnSignin" Margin="0,20" TextType="Connect"

                            Branding="Skydrive" 

                            Scopes="wl.signin wl.skydrivewl.skydrive_update"

                            SessionChanged="btnSignin_SessionChanged"

                            HorizontalAlignment="Center" />

     </StackPanel>

     <StackPanel Name="UploadStackPanel" Visibility="Collapsed"

                  HorizontalAlignment="Center" Margin="0,50,0,0">

         <TextBlock FontSize="11"

                    Foreground="{StaticResourceLoadingTextBrush}">

            Ajout de la photo sur votre stockage SkyDrive en cours

         </TextBlock>

         <ProgressBarIsIndeterminate="True"></ProgressBar>

     </StackPanel>

     <StackPanel Name="DeleteStackPanel" Visibility="Collapsed"

                  HorizontalAlignment="Center" Margin="0,50,0,0">

        <TextBlockFontSize="11" Foreground="{StaticResourceLoadingTextBrush}">

            Suppression de la photo de votre stockage SkyDrive en cours

         </TextBlock>

         <ProgressBarIsIndeterminate="True"></ProgressBar>

      </StackPanel>

   </StackPanel>

 

  

Comme vous pouvez le constater, dans la propriété Scopes du contrôle SignInButton, nous précisons les permissions demandées par l’application. Pour accéder aux données SkyDrive, l’application a besoin des trois étendues :

  • wl.signin : cette étendue permet la connexion automatique à votre application ;
  • wl.skydrive : cette étendue autorise un accès en lecture aux albums et aux photos SkyDrive de l'utilisateur ;
  • wl.skydrive_update : cette étendue autorise le transfert du contenu vers SkyDrive.

Ensuite, il convient de récupérer la session qui va nous permettre de nous connecter à SkyDrive, il faut donc insérer le code suivant dans la page SelectedPhotoPage.xaml.cs :

private void btnSignin_SessionChanged(object sender, Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)

{

   if (e.Session != null && e.Status == Microsoft.Live.LiveConnectSessionStatus.Connected)

   {

     SkydriveHelper.Current.Session = e.Session;

     SkydriveHelper.Current.Status = e.Status;

     btnSignin.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

   }

}

Ainsi, si la session est bien authentifiée, on la récupère et on la passe à notre objet SkydriveHelper (implémenté ici sous la forme d’un Singleton).

Remarque : SkydriveHelper est inclus dans le code source fourni en téléchargement avec ce billet.

Ensuite, il suffit tout simplement de remplacer le code compris dans les méthodes Button_Retirer_FavorisClick, Button_Ajouter_FavorisClick et dans le constructeur par le code suivant pour aller effacer une photo sur le stockage SkyDrive ou alors, au contraire, en télécharger une nouvelle :

public SelectedPhotoPage()

{

   InitializeComponent();

   SkydriveHelper.Current.DeleteCompleted += async (sender, e) =>

   {

      Dispatcher.InvokeAsync(Windows.UI.Core.CoreDispatcherPriority.Low, async (snd, c) =>

     {

        DeleteStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

         MessageDialog dialog = new MessageDialog("Cette photo a été effacée de votre stockage SkyDrive", "Succès");

         awaitdialog.ShowAsync();

     }, sender, e);

    };

 

    SkydriveHelper.Current.ErrorHappened += async (sender, e) =>

    {

       Dispatcher.InvokeAsync(Windows.UI.Core.CoreDispatcherPriority.Low, async (snd, c) =>

      {

         UploadStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

          DeleteStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

          MessageDialog dialog = new MessageDialog(e.Error.Message, "Erreur");

          awaitdialog.ShowAsync();

      }, sender, e);

    };

 

    SkydriveHelper.Current.UploadCompleted += async (sender, e) =>

    {

       Dispatcher.InvokeAsync(Windows.UI.Core.CoreDispatcherPriority.Low, async (snd, c) =>

      {

         UploadStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

          MessageDialog dialog = new MessageDialog("Cette photo a été ajoutée avec succès sur votre stockage SkyDrive", "Succès");

             awaitdialog.ShowAsync();

      }, sender, e);

   };

}

 

Privateasync void Button_Retirer_Favoris_Click(object sender, RoutedEventArgs e)

{

   RetirerFavorisStoryboard.Begin();

   SkydriveHelper skydrive = SkydriveHelper.Current;

 

   if (skydrive.Session == null || skydrive.Status != Microsoft.Live.LiveConnectSessionStatus.Connected)

   {

      MessageDialog dialog = new MessageDialog("Veuillez vous connecter avec votre compte Live ID pour effacer cette carte postale de votre compte SkyDrive.", "SkyDrive");

      awaitdialog.ShowAsync();

   }

   else

   {

      CartePostaleModel model = this.DataContext as CartePostaleModel;              

 

     if (skydrive.IsSkydriveHelperAvailable() == true)

     {

        DeleteStackPanel.Visibility = Windows.UI.Xaml.Visibility.Visible;

         skydrive.DeleteImageFromSkydrive(model.fichier);

     }

     else

     {

        MessageDialog dialog = new MessageDialog("Vous êtes déjà en train d'effectuer une action via Skydrive", "Patience !");

         awaitdialog.ShowAsync();

      }

   }

}

 

Privateasync void Button_Ajouter_Favoris_Click(object sender, RoutedEventArgs e)

{

   AjouterFavorisStoryboard.Begin();

   SkydriveHelper skydrive = SkydriveHelper.Current;

 

   if (skydrive.Session == null ||

      skydrive.Status != Microsoft.Live.LiveConnectSessionStatus.Connected)

   {

      MessageDialog dialog = new MessageDialog("Veuillez vous connecter avec votre compte Live ID pour télécharger cette carte postale sur votre compte SkyDrive.", "SkyDrive");

      awaitdialog.ShowAsync();

   }

   else

   {

      CartePostaleModel model = this.DataContext as CartePostaleModel;

     string name = model.fichier.Split(new[] { '/'}).Last().Split(new[] { '.'}).First();

               

     if (skydrive.IsSkydriveHelperAvailable() == true)

     {

         UploadStackPanel.Visibility = Windows.UI.Xaml.Visibility.Visible;

         skydrive.UploadImageToSkydrive(model.fichier, name, model.titre1);

     }

     else

     {

         MessageDialog dialog = new MessageDialog("Vous êtes déjà en train d'effectuer une action via Skydrive", "Patience !");

         awaitdialog.ShowAsync();

      }

   }

}

Comme vous pouvez le constater, dans les deux cas, nous vérifions dans un premier temps que nous sommes bien identifiés, puis, dans un second temps, que nous n’avons pas d’action en cours avec le stockage SkyDrive avant d’appeler les méthodes DeleteImageFromSkydrive et UploadImageToSkydrive.

Pour finir, voici quelques captures d’écran de l’application en action :

image

image

image

image

Conclusion

Voilà, c’en est terminé pour ce billet qui vous aura donc montré comment intégrer une application sous Windows 8 Consumer Preview avec les services en ligne Windows Live et plus particulièrement SkyDrive pour télécharger du contenu dans le Cloud et ainsi, rendre ce contenu accessible depuis n’importe où (téléphone, tablette, télévision, ordinateur, etc.).

Comme à l’accoutumée, le code source est fourni en téléchargement avec ce billet si vous voulez voir plus en profondeur comment fonctionne le code de la classe SkydriveHelper, mais n’oubliez pas que vous avez à disposition toute la documentation fournie avec le SDK Live pour maîtriser l’API d’une main de maître ! Avec notamment pour bien démarrer, une vue d’ensemble. Vous trouverez également en complément sur la forge Github de nombreux exemples de codes.