Application CaveAVins pour Windows Phone : Scanner un code barre

  • Article

Edit 14/11/2011 : Mieux que de prendre le code en photo : Scannez un code barre/QR en live dans un flux vidéo en 1 ligne de code ! https://bit.ly/ud2rFn  

Cet article complète la première maquette de l’application CaveAVins pour Windows Phone 7.5, en ajoutant une fonction d’aide à l’achat grâce au scan du code-barre de la bouteille.

L’application initiale permet d’ajouter, modifier, noter, localiser géographiquement un vin. Pour simplifier la création d’un vin et surtout obtenir une aide à l’achat d’un vin en boutique, il sera possible de prendre le code-barre de la bouteille en photo, de visualiser les notes qui lui ont été données par les autre utilisateurs et d’obtenir la fiche complète du vin. Si cette bouteille n’a pas encore été évaluée, la fiche du vin devra être créée manuellement et sera ainsi prête pour les prochains acheteurs.

image

Nous complèterons l’application existante, en mettant en place les éléments suivants:

  • Utilisation de la librairie de scan de code-barres et QR code ZXing, sur CodePlex
  • Ajout d’une tuile secondaire permettant d’accéder au scan en 1 clic, depuis l’écran d’accueil
  • Ajout de la note moyenne des utilisateurs sur la fiche de vin

Résumé des épisodes précédents

Articles:

Tutoriels:

Le fonctionnement dans l’application

1 - Le scan de code-barre est accessible à partir de la tuile secondaire ou de la page d’ajout/édition d’un vin

imageimage

2 - Le code-barre d’une bouteille est pris en photo

WP_000243

3 – Ce vin existe déjà dans le catalogue : sa fiche est complétée automatiquement, ou une nouvelle fiche de vin sera créée. La note moyenne donnée par les utilisateurs s’affiche au bas de la photo.

image

Utilisation de la librairie ZXing

Téléchargez la librairie ZXing sur codeplex. Elle permet de scanner différents types de code-barres ainsi que des code QR dont voici la liste:

UPC-A and UPC-E
EAN-8 and EAN-13
Code 39
Code 128
QR Code
ITF
Data Matrix (Not tested)
PDF417 (Not tested)

Dans notre cas, nous utiliserons le type Code 128.

La librairie est sous licence Apache 2.0 et peut donc être utilisée sur le marketplace.
Plus d’information concernant l’utilisation de librairies open-source sur le marketplace:

Pour utiliser la librairie, référencez-la dans votre application Windows Phone

image

Le scan de code barre est déclenché par le code ci-dessous où l’on récupère le résultat de manière asynchrone:

 /// <summary> /// Button click handler to initiate scanning. This should be ted to the click event for a button in your application /// </summary> public void ScanBarCode()
{
    try {
        WP7BarcodeManager.ScanMode = com.google.zxing.BarcodeFormat.UPC_EAN;
        WP7BarcodeManager.ScanBarcode(BarcodeResults_Finished); //Provide callback method     }
    catch (Exception ex)
    {
        Debug.WriteLine("Error processing image.", ex);
    }
}

/// <summary> /// Callback method that processes results returned by the WP7BarcodeManager. Results are also stored at WP7BarcodeManager.LastCaptureResults. /// </summary> /// <param name="BCResults">Object that holds all the results of processing the barcode. Results are also stored at WP7BarcodeManager.LastCaptureResults.</param> public void BarcodeResults_Finished(BarcodeCaptureResult BCResults)
{
  Deployment.Current.Dispatcher.BeginInvoke(() =>
  {
    try {
        if (BCResults.State == CaptureState.Success)
        {
            BarCode = BCResults.BarcodeText; //Use results FindWineFromBarCode(_BarCode);
        }
        else {
            MessageBox.Show(BCResults.ErrorMessage);
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show(String.Format("Barcode Processing Error: {0}", ex.Message));
    }
  });
}

En suivant l’exemple de code plus complet fourni dans la page de documentation, vous pourrez même faire fonctionner votre application dans l’émulateur : il suffit dans ce cas de choisir une image sur votre disque plutôt que de prendre une photo.

On recherche ensuite un vin ayant le code-barre détecté et on charge sa fiche s’il existe déjà dans la base, la fiche reste vierge en dehors du code-barre et devra être remplie manuellement.

 private void FindWineFromBarCode(string barCode)
{
    // On cherche d'abord dans notre propre cave à vins var existingWine = CaveAVinsModel.Instance.Bottles.FirstOrDefault(b => b.WineInfos.BarCode == barCode);
    if (existingWine != null)
    {
        MessageBox.Show(Resources.Strings.Wine_AlreadyExistsInYourCave);
        SelectedBottle = existingWine;
    }
    else {
        // sinon on recherche le vin dans le catalogue complet CaveAVinsModel.Instance.FindWineFromBarCode(SelectedBottle, barCode,
             () => RefreshWineInfos(SelectedBottle));
    }
}

Ajout d’une tuile secondaire pour scanner une bouteille en 1 clic depuis l’écran d’accueil

Pour faciliter l’ajout d’un vin, il est possible d’épingler la fonction de scan d’un code-barre directement sur la page d’accueil du téléphone.

image

La tuile secondaire est créée en cliquant sur le bouton image visible sur la page d’édition du vin.

Voici le code utilisé pour créer la tuile :

 void CreateApplicationSecondaryTile()
{
    var appTile = ShellTile.ActiveTiles
        .FirstOrDefault(t => t.NavigationUri.ToString().Contains("Scan"));
    if (appTile == null)
    {
        StandardTileData secTileData = new StandardTileData()
        {
            BackgroundImage = new Uri("/icons/barcode.png", UriKind.Relative),
            Title = Strings.secTileBarCode_Title,
        };

        ShellTile.Create(new Uri("/View/EditWineView.xaml?Scan=1", UriKind.Relative), secTileData);
    }
}

Un paramètre “Scan” est passé à la page EditWineView pour différencier les sources d’appel : depuis la tuile ou depuis l’application. Si c’est la tuile qui a déclenché la navigation sur la page, on lance directement la fonction de scan, pour minimiser le nombre de clics. Cette opération est réalisée en surchargeant la méthode OnNavigatedTo:

 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New)
    {
        if (NavigationContext.QueryString.ContainsKey("Scan"))
        {
            App.ViewModel.EditWineViewModel.ScanBarCode();
        }
    }
    else {
        base.OnNavigatedTo(e);
    }
}

Ajout de la note moyenne des utilisateurs sur la fiche de vin

Il faut pouvoir différencier la note que l’on donne au vin, de la moyenne de celles données par les autres utilisateurs. C’est pourquoi l’affichage de la note moyenne du vin est ajouté au bas de la photo, sur la fiche du vin.

image

Pour l’instant, celle-ci est calculée en temps réel lors de l’ouverture de la fiche : on récupère toutes les fiches de caves associées à ce vin qui comportent une note et on en fait une moyenne. Mais on pourrait imaginer la stocker dans la fiche et la mettre à jour à partir de notre WCF Data Service à l’aide d’un intercepteur sur les requêtes d’ajout/modification sur l’entite MyWine. Ceci permettrait d’optimiser la communication entre l’application et la base de données. Ce principe d’intercepteurs a déjà été utilisé dans l’article précédent, pour stocker la latitude et la longitude associés à une adresse géographique et vous pouvez vous y référer pour comprendre comment cela fonctionne.

Conclusion

Cette fois-ci , l’application est réellement collaborative ! On retrouve une bouteille de vin déjà présente dans le catalogue, on peut voir la moyenne des notes qui lui ont été attribuées et également la noter soi-même. De là à ce qu’elle soit vraiment fonctionnelle, il n’y a qu’un pas…ou peut-être plusieurs, soit. Il manque encore plein de petits plus très pratiques comme pouvoir saisir le code-barre à la main ou retrouver une bouteille à partir de son nom. Il faudrait également pouvoir classer les vins dans des catégories et cépages.

Mais vous l’aurez compris, le principe pour réaliser ces fonctions sont du même ordre que celles qui ont déjà été réalisées et ne justifient pas l’écriture d’un tutoriel dédié. D’autres fonctions collaboratives seraient néanmoins intéressantes comme le partage sur Facebook ou la possibilité de faire partager un vin à un autre utilisateur de l’application.

D’autres plateformes peuvent aussi être très intéressantes pour ce genre d’applications avec notamment des possibilités avancées pour le partage d’information et les notifications.

A suivre Tire la langue !