//Build 2018 – Adaptive Cards in Bot, Windows, Outlook and your own application

L’objectif d’une Card est de publier du contenu au sein d’une autre application, il y a donc 2 acteurs : l’auteur du contenu et le conteneur en charge du rendu. Il existe déjà des formats de Card (Twitter, Open Graph, Messenger…) mais qui sont relativement rigides, et le problème d’intégrer un HTML Canvas donnerait trop de liberté, d’où l’idée des Adaptive Cards !

On démarre par une belle démo des différentes expériences utilisateurs dans un Bot, dans Teams, dans le Notification Center de Windows, dans une app UWP, dans Outlook et même Cortana ! Les sources de la démo sont sur https://github.com/matthidinger/ContosoScubaBot.

Au passage, on apprend que le support des Adaptive Cards est déjà sur la version Web d’Outlook Web, et arrivera à la fin du mois sur Outlook Desktop.

Une Adaptive Card a donc un rendu natif et adapté à son conteneur, peut être créer à faible cout, et uniquement via une déclaration JSON décrivant le contenu, les actions, les champs de saisie, de la voix…

La seconde démo nous montre comment créer son Adaptive Card sur http://adaptivecards.io/visualizer . Ils travaillent aussi sur un designer http://acdesignerbeta.azurewebsites.net/ pour créer son fichier JSON plus simplement.

Pour la troisième démo, on voit la construction de bout en bout d’une Adaptive Card « Hello Word » pour Outlook :

  1. Création du modèle dans le designer en ligne
  2. Utilisation d’une Azure Function
  3. Test d’envoi depuis https://messagecardplayground.azurewebsites.net/
  4. Affichage dans Outlook O365
  5. Puis dans Outlook Deskop où le contenu a été mis à jour

Pour construire ses Cards dans son back-end, on peut utiliser les objets C#, parser des templates JSON, utiliser des vues Razor pour générer le JSON ou des composants .acx en NodeJS.

On continue par le rendu d’une Adaptive Card dans son application via les SDK disponibles pour JS/HTML, WPF, UWP, iOS ou Android (Xamarin et ReactNative à venir). Là aussi, on a un fichier host.config pour déclarer comment le rendu doit se faire dans l’application. Ensuite on doit brancher les évènements si la Card contient des actions.

On finit par Adaptive Card V2 (en construction)

  • Inclure simplement des sous Cards juste par une URL vers du contenu décrits via des schémas comme ceux de schema.org (exemple restaurant)
  • Utiliser une bibliothèque de templates
  • Transformer côté client un contenu pour le binder sur son template
  • Gérer un état de la Card en rappelant le fournisseur du contenu

 

Une super session à revoir pour ceux qui veulent se lancer sur le sujet !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s