[SPC14] SPC391 // Deep dive into Compose and other updates for Mail apps

Mardi 04/03/2014 à 15h15

Speaker
Andrew Salamatov – Senior Program Manager @ Microsoft

Résumé
Une session qui montre pas mal de code mais fait pas mal l’impasse sur son détail. Le code sera fourni, voilà la raison.
Malgré tout, dans le potentiel il est possible donc de faire des Apps sur les mails qui utilisent le mail avec des PJ pour effectuer des actions contextuelles.
Le coeur du sujet sont les Compose Apps qui apparaissent sur un nouveau mail. C’est un sujet assez intéressant lorsqu’on a Office 365 car cela ajoute vraiment une plus-value dans la fonctionnalité qu’est l’email.

// Mail Apps
Les mail apps apparaissent de manière contextuelle selon des patterns (expressions régulières) ou des objets.
Ils fonctionnent dans Outlook, Outlook Web App, OWA app for iPad and iPhone.

// Quoi de neuf dans les mail Apps
On peut maintenant accéder au corps de message (body) et aux pièces jointes (attachments) Pour le commerce, il est possible de proposer des abonnements pour les apps.
Enfin on peut maintenant faire des Compose Apps, qui peuvent être utilisées lors de l’écriture d’un nouveau mail.

// Accès aux attachments
Il prend l’exemple de l’App DocuSign, qui permet de signer électroniquement un document qui a été reçu en pièces jointes.
Dans les mail apps on peut donc maintenant accéder aux pièces jointes.
Autre exemple avec l’App harmon.ie.

// DEMO : Harmon.ie
Il montre un mail avec 4 pièces jointes. Il active l’App harmonie qui accède aux pièces jointes.
En 2013 RTM, accéder aux pièces jointes voulait dire qu’il fallait transférer le message à un endpoint SMTP, qui parsait le message et récupérait les pièces jointes. Il fallait donc que l’App nécessitant les permission de admin-installable.
Maintenant, la nouvelle approche consiste à autoriser tout simplement l’app d’accéder au corps de message (body) et aux pièces jointes en optimisant les flux. Pour ce faire, une API javascript a été créée pour accéder via les Exchange Web Service (EWS) aux métadonnées. Comme ça le backend App accède via les EWS à la PJ sur le serveur et la renvoie. Tout cela est sécurisé avec un système de callback token et de sessions (de 5min).

// DEMO : Attachments code
Il est sur Visual Studio 2013, crée un projet Office Apps, de type Mail App.
On voit qu’on peut maintenant accéder à l’option « Compose » mais on décoche cette fois-ci car ce n’est pas encore le propos.
On va se concentrer sur le javascript qui est mis.
Il configure les permissions nécessaires dans le Manifest.
Il modifie le HTML afin de préparer son DOM.
Il modifie ensuite son javascript (Home.js), ou du code permet déjà de récupérer les mails. Avec jQuery, il peut accéder simplement via « item.attachments[0].name » et .size, .id, .attachmentType etc. et les affiche dans les divs créées précédemment.
Debug : On voit que dans un mail avec les pièces jointes, son app est proposée en dessous, et en l’ouvrant on voit effectivement les informations demandées dans le code ci-dessus.

// DEMO
Il a créé un webservice avec WebAPI, il nous invite à suivre le lien qu’il fournira dans son PPTX pour mettre cela en place. Un de ses collègues sur Visual Studio a détaillé cela dans un article.
Son controller WebAPI a été codé avec une méthode GetAttachment en POST. Il y récupère la PJ via l’attachment ID, l’authToken, et l’URL du webservice Exchange. L’authToken est le fameux token qui sécurise la requête. La PJ est récupérée en bytes qu’il va écrire dans un fichier sur le disque dur (pour les tests). Il a utilisé un certain nombre de helpers en copier/coller qu’il ne détaille pas mais fournira.
En testant, dans son mail, il clique sur son app, appuie sur son bouton déclencheur, et cela sauvegarde effectivement le fichier sur son disque dur.

// Upload attachment to SharePoint
Il va montrer comment faire cela, en utilisant OAuth et Azure AD.
App outlook faire une requête sur Azure AD.
Azure AD, va demander le login et consentir l’user à accéder au contenu.
App reçoit la validation et l’utilisateur est redirigé sur la page HTML de l’App.
Une fois sur la page en question, Exchange fournit le refresh et access token.
Le backend App utilise l’access token pour accéder à SharePoint.
Dans la théorie les flèches semblent toute facile … voyons en démo.

// DEMO
Il ajoute l’URL de son tenant en tant que ressource dans un objet.
Il fait une requête AJAX avec jQuery en passant cet objet vers _api/OAuth/GetAuthorizationUrl Et ouvre le lien du tenant (la fameuse ressource) lorsque la requête a réussi (et qu’on a l’autorisation donc). Il passe toute la partie complexe très formalisée de la gestion des tokens.
Il va très vite, passe la partie écriture pour faire du copier coller. Il utilise en fait son backend pour mettre son code qui utilise les API OneDrive en REST pour sauvegarder son fichier.
Debug —> Ça marche, le fichier reçu en pièce jointe dans Outlook est sauvegardé dans OneDrive via son App.

// Compose mail Apps – DEMO
On commence le sujet directement via une démo !
Il a créé une Compose App qui sur la création d’un mail permet d’ajouter les liens qu’il a sauvegardé (My Templates App sur le store).
Une autre App permet de faire des sondages rapides. il crée un sondage avec des questions avec 4 réponses possibles à chaque fois. A la sauvegarde, un message est mis dans le mail qui invite le destinataire à voter directement via l’App en question.

// Compose mail apps
Activation – capabilities – permissions.
Activation se fait dans les messages ou les rendez-vous. Ils fonctionnent sur desktop tablette ou mobile.
Capabilities : on peut faire du JS et utiliser l’API mail, lire et écrire dans le champ destinataire, changer le sujet du mail, ajouter des pièces jointes, écrire dans le body, lire et écrire des événements, ajouter des propriétés custom dans le mail.
Dans les permissions, il est possible d’avoir les niveaux « Restricted, ReadItem, ReadWriteItem, ReadWriteMailbox ».

// DEMO
On peut activer la Compose App sur la création d’un message, ou d’un événement, ou les deux.
Il utilise beaucoup Office.context.mailbox.item pour accéder au contenu contextuel de son mail en cours. A savoir que cet objet est contextuel c’est à dire que c’est le même selon si c’est un mail ou un événement. En conséquence des propriétés comme « start » ne sont utiles que pour l’événement malgré le fait qu’il soit disponible dans l’objet.
Il utilise getAsync pour récupérer une valeur, addAsync pour ajouter, setAsync pour remplacer.
Cela se fait sur la bonne propriété Office.context.mailbox.item.to.getAsync() ou Office.context.mailbox.item.subject.setAsync(..) etc.
Avec addFileAttachementAsync() il est aussi possible de mettre une pièce jointe depuis une URL.

// Scénarios intéressants
Les scénarios intéressants à implémenter peuvent être les suivants.
Les texte écrits souvent, les signatures multiples, l’insertion des lieux de meetings qui sont hors de l’organisation avec un plan pourquoi pas, avoir un annuaire hiérarchisé (envoyer un message à une personne et les personnes de son équipe par ex.).
Composer un message à un client et utiliser une App qui va fournir le bon template à utiliser.

Christian

Stories from Building the New Windows Mail App (3-104)

Session animée par Jeremy Epling

Retour d’expérience sur la réalisation de la nouvelle application de mail et présentation des tops et pratiques utilisées.

L’application doit fonctionner correctement de matériel 8 pouces peut puissants aux all in one 27 pouces avec quad core.

On voit les différents concepts d’implémentation et les nouvelles possibilités d’ergonomie proposée dans 8.1 comme la possibilité d’ouvrir plusieurs fenêtres pour une même appli (ouvrir plusieurs mails en même temps).

Le choix de html pour l’application de mail a été principalement drivé par le fait que les mails sont souvent en html, ils sont donc plus faciles a restituer dans une app html. On voit comment ils ont découpé le layout et utilise les nouveaux contrôles comme la search box.

Pour les perfs, l’équipe a teste très régulièrement sur Windows RT car, si une app est rapide sur rt, elle est rapide partout. Le nouveau contrôle de Scheduler a beaucoup aidé à améliorer les perfs en permettant de coordonner les opérations, et en facilitant le fait de préparer des portions d’ihm non visibles (comme la fenêtre pour un nouveau mail).

L’appli mail utilise aussi les web workers pour construire des portions d’ihm en générant une string avec le html qui est ensuite envoyée dans l’ui (pas de dom dans les workers).

Pour les listes, garder un layout simple pour les items a un impact significatif sur les perfs (le layout grid par exemple peut parfois être couteux).

Penser ses sélecteurs css et les faire l’élue spécifique possible impacte aussi les perfs (ca se voit sous le nom blopr dans les outils de perf).

Guillaume Leborgne