IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Créer ses propres Microsoft Tags

Dans cet article, nous allons expliquer le fonctionnement des Microsoft Tags. Ensuite nous montrerons comment créer des Tags, tout d'abord manuellement, puis en développant une application sommaire de carte de visite. 6 commentaires Donner une note à l´article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

0. Qu'est-ce qu'un Microsoft Tag ?

Peut-être avez-vous vu dernièrement des icônes étranges sur des publicités papiers qui ressemblent à celle-ci :

C:\Users\Sam\AppData\Local\Microsoft\Windows\Temporary Internet Files\Content.IE5\PXJXZH3F\Tag_Developpez_20113211336[1].jpeg

Ou encore :

C:\Users\Sam\AppData\Local\Microsoft\Windows\Temporary Internet Files\Content.IE5\F8378XE2\Tag_Developpez_20113211517[1].jpeg

Ce sont des codes-barres colorés à haute capacité (HCCB), une évolution des codes-barres 2D.

Les codes-barres 2D utilisent des carrés pour représenter l'information tandis que Les HCCB leur préfèrent des triangles. Ces triangles peuvent être éventuellement colorés pour encore plus de combinaisons possibles.

Microsoft Tag est une implémentation des HCCB. Ils peuvent être colorés ou monochromes.

Les Microsoft Tag peuvent être lus depuis la majorité des mobiles existants. Pour installer un lecteur de Tag rendez-vous à l'adresse http://gettag.mobi depuis votre mobile.

I. Créer ses propres Microsoft Tags manuellement

La solution la plus simple pour créer ses propres Tags consiste à les créer à partir du site http://tag.microsoft.com.

Pour se faire, cliquez sur l'onglet « Tag Manager » puis authentifiez-vous à partir de vos identifiants Windows Live.

Vous pouvez dès maintenant créer votre propre Tag en cliquant sur « Create Tag ».

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image3.png

Remplissez l'ensemble du formulaire.

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image4.png

Ajoutez un titre à votre Tag (Tag Title). Il doit être parlant afin de l'identifier facilement. Vous pouvez ajouter une note pour détailler la fonction de votre Tag (Tag Notes).

Fixez ensuite le type de votre Tag (Tag Types). Les types déterminent les actions à effectuer par l'application qui décodera le Tag.

Les types suivants sont disponibles :

  • URL : renvoie une URL (une page Web) ;
  • Free Text : renvoie un texte libre ;
  • vCard : renvoie une carte de visite au format vCard ;
  • Dialer : un numéro de téléphone est renvoyé.


Selon le type choisi, le formulaire représentant l'information du Tag variera (chaine de caractères pour l'URL ; un fichier vCard pour la carte de visite, etc.)

Chaque Tag possède une date de début et éventuellement une durée de vie.

Un mot de passe peut aussi être saisi afin de protéger l'accès à l'information du Tag.

Pour notre exemple, j'ai créé le Tag suivant :

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image5.png

Une fois sauvé on retrouve notre Tag « Exemple Développez » dans la liste.

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image6.png

Nous pouvons accéder à son rendu en cliquant sur l'icône Render.

Une fenêtre nous informe des recommandations à prendre en compte pour que les Tags puissent être scannés sans encombre. Je vous encourage à jeter un coup d'oeil à l'Implementation Guidelines puis à cocher la case « Do not display this message again. I have reviewed the guidelines » afin de pouvoir poursuivre en appuyant sur le bouton « Submit ».

image

La fenêtre de rendu nous permet de sélectionner le format du Tag (PDF, format image ou même texte), sa taille en pouces (1 pouce = 2,54 cm), sa représentation avec explication ou non.

image

Une fois cliqué sur le bouton « Render », un fichier du format voulu vous sera proposé :

image

Vous pouvez tester directement votre Tag à partir de l'application mobile que vous aurez téléchargé à l'adresse http://gettag.mobile

II. Remarque sur les Tags

A la différence d'autre format, il est important de comprendre que ce n'est pas le Tag en lui-même qui contient les informations.

Le Tag contient un nombre tellement grand d'informations que l'on peut le considérer comme unique (à la manière d'un GUID) et comme servant d'identifiant. À partir de cette identifiant, Microsoft peut récupérer notre information. Ceci implique que si nous voulons modifier notre information, il est inutile de changer la représentation de notre Tag.

Au lieu de détruire un Tag, on peut le rendre inactif en le mettant son statut sur pause. Le statut par défaut est toujours actif.

III. Classement des Tags par catégorie

Afin de classer simplement ses Tags il est possible de créer des catégories, c'est-à-dire un dossier ne pouvant contenir que des Tags (et pas de dossiers).

On accède à la gestion des catégories via l'onglet du même nom.

La catégorie par défaut est Main.

Comme les Tags, les catégories possèdent une période d'activité ainsi qu'un statut.

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image10.png

IV. Création d'un Tag par le code

IV-A. Création d'un compte de production Microsoft Tag

Comme dans beaucoup de service de ce type, il est nécessaire de créer un compte de production afin de pouvoir accéder au service Microsoft Tag.

Pour se faire, connectez-vous, si ce n'est pas déjà fait, avec votre identifiant Windows Live en cliquant sur le lien « Sign In » du haut de la page.

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image11.png

Puis remplissez le formulaire suivant qui se trouve à la page http://tag.microsoft.com/ws/accessrequest.aspx?wa=wsignin1.0

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image12.png

Une fois votre formulaire soumis, Microsoft vous enverra un mail contenant les informations permettant de se connecter à leur API Microsoft Tag.

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image13.png

Vous trouverez deux informations importantes dans ce mail : l'adresse de l'API Web service de Microsoft Tag et votre jeton d'accès.

Nous disposons désormais de tous les éléments pour développer notre application de test.

IV-B. Objectif de notre application de test

Nous allons développer une application permettant d'imprimer des cartes de visites contenant un Tag renvoyant vers un site Web.

Elle se présentera de la façon suivante :

image


Le bouton « Générer » permettra de créer un Tag à partir du Web service fourni par Microsoft. Ce Tag sera placé dans la carte de visite sous forme d'image.

V. Création de l'application Carte de Visite

Vous trouverez l'ensemble du code ici. Nous nous efforcerons, de présenter toutes les étapes de création de l'application bien que certaines parties du code ne soient volontairement pas présentées afin de ne pas compliquer inutilement l'article.

Commençons par créer un projet WPF en C# dans Visual Studio que l'on nommera « ArticleCreerMicrosoftTag » :

D:\Sam\Developpez\Articles\Article 03 - Microsoft Tag\Test\image15.png

Le choix de WPF et/ou du C# est totalement arbitraire même si WPF offre plus de facilité pour créer ce genre d'interface.

L'interface utilisateur est issue du code XAML suivant :

 
Sélectionnez
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <!-- Formulaire -->
        
        <Border BorderThickness="1" BorderBrush="LightGray">
            <StackPanel Margin="10">
                <TextBlock Text="Nom" Foreground="DarkGray"></TextBlock>
                <TextBox x:Name="TextNom" Text="" Margin="0,5,0,0"></TextBox>
                <TextBlock Text="Fonction" Foreground="DarkGray"></TextBlock>
                <TextBox x:Name="TextFonction" Text="" Margin="0,5,0,0"></TextBox>
                <TextBlock Text="Email" Foreground="DarkGray"></TextBlock>
                <TextBox x:Name="TextEmail" Text="" Margin="0,5,0,0"></TextBox>
                <TextBlock Text="Url" Foreground="DarkGray"></TextBlock>
                <TextBox x:Name="TextUrl" Text="" Margin="0,5,0,0"></TextBox>
                <Button Content="Générer" HorizontalAlignment="Right" Margin="0,10,0,0" Height="30" Width="100" Click="Button_Click" />

                <Image Width="300" Margin="10"></Image>
            </StackPanel>
        </Border>
        
        <!-- Carte de visite -->

        <Border Grid.Column="1" Background="DarkGray" BorderThickness="1" BorderBrush="LightGray">
            <Viewbox Margin="20">
                <Border Width="200" Height="120" BorderThickness="1" Background="White" BorderBrush="LightGray">
                    
                    <Border.Effect>
                        <DropShadowEffect Color="Black"></DropShadowEffect>
                    </Border.Effect>

                    <Grid Margin="5">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        
                        <StackPanel>
                            <TextBlock TextWrapping="Wrap" FontSize="10" Foreground="DarkGray" FontWeight="Bold" Text="{Binding Path=Text, ElementName=TextNom}"></TextBlock>
                            <TextBlock TextWrapping="Wrap" FontSize="9" Foreground="DarkGray" Text="{Binding Path=Text,ElementName=TextFonction}"></TextBlock>
                        </StackPanel>
                        
                        <Image x:Name="ImageBarCode" Grid.Column="1" Margin="10"></Image>

                        <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Foreground="DarkGray" TextWrapping="Wrap" FontSize="8" Text="{Binding Path=Text,ElementName=TextEmail}"></TextBlock>
                    
                    </Grid>                    
                </Border>
            </Viewbox>

        </Border>
    </Grid>


Côté « Code Behind », une méthode répondant à l'évènement click du bouton « Générer ». a été ajoutée. Celle-ci permet de sauver le Tag et éventuellement de l'afficher.

 
Sélectionnez
        /// <summary>
        /// Génération du Tag
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.CreateTag
                (
                this.TextUrl.Text,
                this.TextNom.Text,
                this.TextFonction.Text,
                this.TextEmail.Text
                );
        }


On n'utilisera pas le pattern MVVM dans cet article afin de rester le plus simple possible dans l'approche (d'où l'utilisation de référence aux TextBox).

Avant de vous présenter en détail la méthode Create Tag , nous allons mettre en place l'API Microsoft Tag dans notre projet.

V-0-1. Implémentation de l'API Microsoft Tag

L'API de Microsoft Tag est accessible par un Web service.

Intégrons ce Web service, https://ws.tag.microsoft.com/MIBPService.wsdl dans notre application via le menu « Add Service Reference ».

Nous utiliserons le namespace « Services.Tags » pour ce service dans notre projet.

image

Les Web methods présents dans le Web service permettent de :

Gérer les catégories et leurs statuts:

  • CreateCategory : création d'une catégorie ;
  • UpdateCategory : mise à jour d'une catégorie ;
  • ActivateCategory : rendre le statut de la catégorie actif ;
  • PauseCategory : mettre le statut de la catégorie en pause.


Gérer les Tags et leurs statuts:

  • CreateTag : créer un Tag ;
  • DeleteTag : détruire un Tag ;
  • UpdateTag : update un Tag ;
  • ActivateTag : activer un Tag ;
  • PauseTag : mettre en pause un Tag.


Obtenir la représentation du Tag et son Id :

  • GetBarcode ;
  • GetTagId.


Afin d'appeler ces Web methods, on doit instancier le service comme suit :

 
Sélectionnez
Services.Tags.MIBPContractClient client = new Services.Tags.MIBPContractClient();


Toutes ces Web methods utilisent un objet contenant le jeton que Microsoft nous a transmis par mail :

 
Sélectionnez
        private static UserCredential CreateUserCredential(string tokenApi)
        {
            if (tokenApi == null)
            {
                throw new Exception("Votre jeton tokenApi ne peut être vide !");
            }

            UserCredential credential = new UserCredential();

            credential.AccessToken = tokenApi;

            return credential;
        }


Pour créer un Tag de type URL, par exemple, il ne reste plus qu'à appeler la Web method  CreateTag :

 
Sélectionnez
            string tokenApi = "votreTokenApi";
            
            string categoryName = "Main"; // catégorie par défaut
            string tagName = "Carte de visite Developpez";

            string url = "http://blog.naviso.fr";

            UserCredential credential = CreateUserCredential(tokenApi);
            MIBPContractClient client = new MIBPContractClient();
            
            // Création du Tag

            URITag tag = new URITag();

            tag.Title = tagName;
            tag.UTCStartDate = DateTime.Now.Date;
            tag.UTCEndDate = null;

            tag.MedFiUrl = url;

            // envoyer

            try
            {
                client.CreateTag(credential, categoryName, tag);
                client.Close();
            }
            catch (Exception)
            {
                client.Abort();
            }


Pour obtenir le rendu d'un Tag c'est aussi simple grâce la Web method GetBarCode :

 
Sélectionnez
            UserCredential credential = CreateUserCredential(tokenApi);

            MIBPContractClient client = new MIBPContractClient();

            byte[] barCodeDatas = client.GetBarcode(credential, categoryName, tagName, ImageTypes.jpeg, 2.0F, DecorationType.HCCBRP_DECORATION_NONE, false);
        
            BitmapImage image = new BitmapImage();

            image.BeginInit();
            image.StreamSource = new MemoryStream( barCodeDatas );
            image.EndInit();

            return image;


Vous pouvez faire varier le format de l'image, sa taille, son type (avec explication ou non) et son rendu monochrome ou polychrome.

Attention tout de même à cette exception :

image

Cette exception nous indique que l'application ne peut recevoir que 65536 octets. Afin de recevoir l'image convenablement nous allons donc augmenter la taille des messages entrants.

Dans l'app.config on change les valeurs suivantes :

 
Sélectionnez
<binding name="BasicHttpBinding_IMIBPContract" . maxBufferSize="655360" .  maxReceivedMessageSize="655360" .>
   <readerQuotas . maxArrayLength="1638400" ./>
   .
</binding>


Vous devriez maintenant recevoir l'image convenablement.

Pour plus d'exemples, je vous invite à consulter la page http://tag.microsoft.com/howto.aspx ainsi que la documentation complète du Web service : http://tag.microsoft.com/help.

V-A. Faiblesses de l'API Microsoft Tag

Le Web service de Microsoft Tag, bien que facile à mettre en oeuvre et à utiliser souffre d'un défaut qui peut être parfois assez gênant. Il n'est pas possible d'obtenir la liste de catégories ou des Tags existants.

Cela signifie que l'on devra, si l'on souhaite conserver cette liste, la conserver par notre propre moyen.

Cela veut dire aussi que l'on ne peut pas déterminer si l'on doit utiliser la méthode Create ou Update. On doit donc utiliser la technique suivante :

 
Sélectionnez
            try
            {
                this.CreateTag(...);
            }
            catch
            {
                this.UpdateTag(...);
            }


Cette technique n'est évidemment pas des plus glorieuses mais elle a le mérite de fonctionner en espérant que Microsoft puisse combler le manque rapidement.

V-B. La classe MicrosoftTagHelper

Ajoutons maintenant une classe C# dans notre projet que nous appellerons « MicrosoftTagHelper.cs ».

Cette classe est destinée à faciliter la manipulation du Web service de l'API et à pallier certaines faiblesses de l'API notamment sur le choix du Create ou de l'Update.

Cette classe n'est pas complète et ne couvre que le domaine fonctionnel de notre exemple.

Elle comprend les méthodes suivantes :

 
Sélectionnez
        /// <summary>
        /// Création et mise à jour des catégories
        /// </summary>
        /// <param name="tokenApi"></param>
        /// <param name="categoryName"></param>
        /// <returns></returns>

        public static bool CreateCategory(string tokenApi, string categoryName)

        /// <summary>
        /// Création et mise à jour des catégories
        /// </summary>
        /// <param name="tokenApi"></param>
        /// <param name="categoryName"></param>
        /// <returns></returns>

        public static void CreateOrUpdateCategory(string tokenApi, string categoryName)

        /// <summary>
        /// Creation d'un tag
        /// </summary>
        /// <param name="tokenApi"></param>
        /// <param name="categoryName"></param>
        /// <param name="tagName"></param>
        /// <param name="url"></param>
        /// <returns></returns>

        public static void CreateOrUpdateUrlTag(string tokenApi, string categoryName, string tagName, string url)

        /// <summary>
        /// Obtenir l'image du codeBar
        /// </summary>
        /// <returns></returns>

        public static BitmapImage GetTagImage(string tokenApi, string categoryName, string tagName, bool isBlackAndWhite)


Vous trouverez l'ensemble du code de cette classe ici.

V-C. Finalisation de l'application

Maintenant que nous disposons de toutes les briques nécessaires, nous pouvons créer notre méthode CreateTag dont nous parlions lors de la création de l'application :

 
Sélectionnez
        /// <summary>
        /// Creation du Tag
        /// </summary>
        /// <param name="urlText"></param>
        /// <param name="nom"></param>
        /// <param name="fonction"></param>
        /// <param name="email"></param>

        private void CreateTag(string urlText, string nom, string fonction, string email)
        {
            try
            {
                // creation de l'url
                Uri url = null;

                try
                {
                    url = new Uri(urlText, UriKind.Absolute);
                }
                catch
                {
                    throw new Exception("La génération du code barre nécessite une url valide");
                }

                // on ajoute les informations de la carte de visite via la querystring

                string urlBase = url.OriginalString;

                if (string.IsNullOrWhiteSpace(url.Query) == false)
                {
                    urlBase = urlBase.Substring(0, urlBase.Length - url.Query.Length);
                }

                string urlTag = string.Format("{0}?nom={1}&fonction={2}&email={3}",
                    urlBase,
                    HttpUtility.UrlEncode(nom),
                    HttpUtility.UrlEncode(fonction),
                    HttpUtility.UrlEncode(email)
                    );

                // Creation de la catégorie Carte de visite
                MicrosoftTagHelper.CreateCategory(MonTokenAPI, CategoryName);

                // Creation ou mise à jour du Tag contenant l'url
                MicrosoftTagHelper.CreateOrUpdateUrlTag(MonTokenAPI, CategoryName, TagName, urlTag);

                // Affichage de l'image
                this.ImageBarCode.Source = MicrosoftTagHelper.GetTagImage(MonTokenAPI, CategoryName, TagName, false);
            }
            catch(Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }


Cette méthode permet de vérifier si l'URL est correcte puis insère dans la QueryString de celle-ci les paramètres nom, fonction et email.

On crée ensuite une catégorie pour stocker notre Tag puis on écrit notre Tag dans cette catégorie.

On télécharge enfin le rendu du Tag que l'on positionne dans une image.

image

Lorsque le Tag sera lu par l'application téléphonique, elle nous redirigera vers la page correspondant à l'URL intégrée dans notre Tag. Cette page Web pourra utiliser les informations telles que le nom, la fonction ou l'email stockées dans la QueryString de l'URL pour effectuer un affichage plus pertinent.

Un exemple en ASP.NET de récupération des données de la QueryString :

 
Sélectionnez
    /// <summary>
    /// Chargement de la page
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        string nom = this.Server.UrlDecode( this.Request.QueryString["nom"] );
        string fonction = this.Server.UrlDecode( this.Request.QueryString["fonction"] );
        string email = this.Server.UrlDecode( this.Request.QueryString["email"] );
    }

VI. Conclusion

Malgré quelques petits défauts de jeunesse, l'API Microsoft Tag reste facile à prendre en main et relativement souple. Son intégration dans des applications existantes ne pose pas de réel problème.


J'attends avec impatience la possibilité de pouvoir scanner des codes-barres via l'API afin de pouvoir créer ses propres applications téléphoniques.


Vous trouverez la totalité des sources de l'application ici.

VII. Remerciements

Je voudrais remercier Thomas Lebrun, Thomas Levesque et Jérôme Lambert pour leur relecture technique, Maxime Gault pour la correction orthographique ainsi qu'Alessandra Sada pour son soutien.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2011 Samuel Blanchard. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.