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 :
Ou encore :
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 ».
Remplissez l'ensemble du formulaire.
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 :
Une fois sauvé on retrouve notre Tag « Exemple Développez » dans la liste.
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 ».
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.
Une fois cliqué sur le bouton « Render », un fichier du format voulu vous sera proposé :
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.
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.
Puis remplissez le formulaire suivant qui se trouve à la page http://tag.microsoft.com/ws/accessrequest.aspx?wa=wsignin1.0
Une fois votre formulaire soumis, Microsoft vous enverra un mail contenant les informations permettant de se connecter à leur API Microsoft Tag.
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 :
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 » :
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 :
<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.
///
<
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.
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 :
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 :
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 :
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 :
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 :
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 :
<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 :
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 :
///
<
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 :
///
<
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.
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 :
///
<
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.