Microsoft Ignite 2015 – Dealing With Application Lifecycle Management in Office 365 App Development – Jeudi 7 mai

Par Stéphane,
Pôle SharePoint MCNEXT

Dealing With Application Lifecycle Management in Office 365 App Development
Code : BRK4126

Niveau : 400
Cible : Développeurs
Présentateur : Chris O’Brien

Travail sur le processus de développements d’apps SharePoint ou Office 365. Approche pragmatique et beaucoup de bonnes idées, à voir à tout prix !

Lire la suite

[SPC14] SPC408 // SharePoint 2013 Apps with AngularJS

Mail de Christian

Jeudi 06/03/2014 à 9h00

Speaker
Jeremy Thake – VP of Global Product Innovation @ AvePoint Inc. // MVP @jthake C’est sa dernière session en tant que MVP puisqu’il va rejoindre l’équipe produit chez Microsoft ! Awesome !

Résumé
Bonne session, un peu trop courte qui donne une bonne introduction à AngularJS qui est très large pour tenir dans une seule session.
Ce framework est assez complet mais complété par jQuery et d’autres modules, on peut faire une App SharePoint 2013 avec des frameworks très puissants. Tout cela en gardant une propreté dans le code javascript qui sans ça peut devenir assez compliqué à lire.
Le framework propose des très bon mécanismes de data binding, assez propres etc.

// Agenda
Pourquoi AngularJS
Intro à AngularJS
Getting started in SharePoint
CompleteMe App
Tips and Tricks

// Pourquoi AngularJS
Même si AngularJS est fait par Google, il dit que le modèle de développement a changé en utilisant les différents outils mis à dispo par tous pour accomplir son but.
Il existe depuis janvier 2010, il y a plus de 600 contributeurs, 2500 requêtes produits. C’est un outil très supporté.
Les développeurs Google sont vraiment impliqués dans le développement d’AngularJS Beaucoup de ressources existent sur le marché, sur le net. Des ebooks, des sites comme PluralSight, Codeacademy, Il présente un slide de Google, comme quoi GWT était très populaire mais a baissé, à contrario de AngularJS qui les a déplacé tous. Backbone, embuer ou knockoutjs sont eux restés assez bas.
Il aime beaucoup
Google feedback un outil avait pris 6 mois pour 3 dév et 17000 lignes de code. Avec AngularJS, cela a pris 3 semaines, 1500 lignes de code.
Plusieurs avantages
-Gestion du DOM et de l’AJAX,
-Une structure très bien définie
-Tout existe pour faire une App qui fait du CRUD -Testable, il y a un framework de test dans AngularJS qui facilite les Model View .. AngularJS utilise un modèle view … whatever. Pour ne pas appeler ça MVC, MVVM qui ne correspondait pas bien.

// Intro à AngularJS
La base.
Utilisation dans <html> l’attribut ng-app.
Data-binding : on peut changer le modèle, la donnée, la vue est automatiquement changée avec un système de watch/espion.
Cela se fait grâce à {{ phones.length }}.
On utilise angular.module(‘myApp’, []); qui permet de créer son module.
Le scope permet de gérer la vue, l’objet $scope passé en paramètre de la création du control.
Il y créé un tableau de téléphones, avec des caractéristiques.
Et ensuite dans l’HTML, il utilise ng-controller pour déclarer le nom de sa fonction qui crée le control.

// DEMO : AngularJS 101
Il utilise un jsfiddle. Il y montre une sorte de repeater fait en Angular grâce à l’attribut ng-repeat.
Il fait un ng-repeat= »contact in contacts » où contacts est une collection.

// Directives
Il a déjà montré le ng-controller.
<edit-in-place value= »contact.name » />
app.directive(‘editInPlace’, function() { … Cela permet de créer des attributs custom. Ici edit-in-place.
Il y montre que cela lui permet d’avoir des composants comme un mode edit, qui rafraichit un autre ng-repeat qui lui affiche la valeur.
La valeur saisie dans son mode édit est mis à jour en live par AngularJS plus bas où il l’affiche.

// Factory et provider
Factory : Il permet de créer comme en .NET plusieurs instances.
Provider : autre permet de réaliser des couches d’abstractions Les deux en fait. Mais il passe vite, il n’a pas le temps de détailler et nous invite à fouiller.

// Broadcaster
Il y a un concept qui permet de broadcaster une valeur qui propage la valeur tout seul vers différentes vues dans la page.

// Animations
Il montre qu’il y a également dans AngularJS un système d’animation plutôt puissant.

// Avec SharePoint 2013
Il ne peut pas utiliser le body, il met ng-app= »myApp » sur une simple div ce qui lui permet d’avoir plusieurs apps dans une page SharePoint

// DEMO : CompleteMe App
Il montre une App tâche qui lui permettra d’avoir une liste de tâches où il peut faire des rappels particuliers comme « jamais », dans « 1 an » etc.
Son app est créée en SharePoint hosted sur Visual Studio.
Dans les scripts, il y a un dossier controller et un services.
Sur sa page Default.aspx, il ajoute la déclaration des javascript jquery, angulaire, bootstrap.
Il charge les js de son modèle AngularJS.
Il charge les js SharePoint pour par exemple les people picker. Il a fait un post pour expliquer comment mettre ça en place (il y a des problèmes quand on ajoute plusieurs people pickers normalement).
Il montre la plomberie de son App, avec notamment la requête qui gère l’échec de requête. Et sur le succès de requête, il ajoute les items dans le tableau de son controller.
Dans le cas d’un minifiy, il faut déclarer le controller d’une certaine façon car AJAX Minifier remplace les noms des variables ce qui casse la déclaration Angular. C’est donc contournable.
Le template est normalement mis dans un attribut template HTMLdans le javascript. Pour contourner ça, il faut passer par la directive compile qui permet d’externaliser et charger un template HTML avec un templateLoader qui fait un HTTP get du template. Dans le retourne du compile, il y a un prelink à compléter. Il faut voir son post pour mieux comprendre avec les exemples.
Pour la sauvegarde de ses items, il utilise du JSOM avec les promises jQuery.
Il nous invite à regarder la bibliothèque breeze qui permet de créer des entités. Il ne détaille pas ici car ce n’est pas le sujet.

// Tips and tricks
Il n’est pas bon en CSS haha. Il conseille d’utiliser UI Bootstrap, un module qui peut être à AngularJS qui permet assez facilement de faire des layouts, des formulaires avec validations, datepicker, du responsive etc.
Pour les people picker, aller voir son billet sur son post pour faire ça car l’exemple MSDN n’est pas top.
Utiliser moment.js qui permet de gérer facilement les temps en js.
Visual Studio Online, permet d’avoir un TFS, et il conseille de l’utiliser pour faire du code review simple avec un compte live id.

Christian

[SPC14] Building SharePoint Apps with Azure PaaS

Mail de Felipe

Mardi 04/03/13 à 10:45

Speaker, Kirk Evans

//Agenda
Cloud Patterns
Azure Web sites
Azure Web Jobs

//Intro
Encore un autre session bien mais très technique et rapide pour nous montrer un nouveau scenario d’app, qui utilise azure comme Plataform as a Service,
Le speaker est très direct au point et nous dit que ce n’est pas une session basique, c’est une session 400, et par conséquence les concepts basic d’apps ne seront pas traité. Et qui nous allons avoir 1h de pure demo dans visual studio et de code !

//Cloud computing patterns
Avant de lancer son visual studio il fait un petite explication sur le patterns de cloud computing, et l’avantage economique, « Only pay for what you use »,
o On & Off
o Croissance rapide
o Grand nombre d’accès pas prevu
o Grand nombre d’accès prevu

//Azure Web Site
Donc après une petit explication sur le patterns il nous explique que l’on peut héberger des web pages en azure avec plusieurs technologies, comme asp.net, python, node.js, php et etc.
Et qu’on peut déployer de plusieurs façons, ftp,git,tfs et etc.
Après la petite introduction il commence la demo,
Nous allons ajouter un event receiver item added dans une liste du sharepoint online en utilisant azure comme PaaS, en utilisant l’api spécifique pour azure
o Il crée une solution dans Visual studio du type SharePoint App et provider hosted qui ajoute automatiquement un projet MVC dans la solution
o Il crée un service dans le projet mvc, qui fonctionne comme un App Event receiver, et ajouter notre item added receiver dans le « AppInstaled » event
o Il nous montre la classe « TokenHelper » qui permet d’avoir l’id du « tenant » courant dans office 365, utile pour contrôler quelle « tenant » consume plus
o On voir aussi l’intégration du visual studio avec azure qui permet d’explorer et paramètre certaines fonctionnalités comme ajouter de connection strings, app setings, logging sans passer par la dashboard azure, ça ressemble au SharePoint server explorer.
o Nous est montré aussi dashboard azure qui permet d’active le remote debugging et l’option de streaming d’information dans le window output du visual studio
o Il nous explique qui pour qu’on puisse identifier l’application avec azure nous avons besoin d’acceder à une page dans SharePoint (_layouts/15/appregnew.aspx) ou dans le store microsoft
qui va créer des ids qu’on ajouter l’app manifest et dans le webconfig
o On ajoute le azure profile dans visual studio aussi pour qu’on puisse déploie
o Et nous montre aussi dans l’azure dashboard comme c’est facile de mettre en place le patterns explique au début de la session
o Il installe l’app dans sharepoint et qu’on clique nous sommes redirigé vers sa dans azure

Petit retour sur les slides où il nous explique les Azur storage abstractions
o Blobs, fichier nommé de façon simple avec métadonnées qui peut contenir de fichier de grande taille.
o Drives, disque dur
o Tables, structure de données stocké dans azure
o Base de données

Retour à la demo,
o Il crée le storage sur azure et nous montre comme c’est facile de le faire via la dashboard azure
o Il ajoute une classe pour traiter demande du storage dans azure et aussi comme c’est facile de créer table storage avec la classe « CloudTable »
o Nous est montré aussi la «TableQuery » qui permet de requêter les données qui retourne une liste de objets
o On voir comme dans la Asp.NET qui pour azure nous avons la classe « CloudConfigureManager » pour utiliser le « AppSettings » dans la web page sur azure
o Toutes ces apis utiliser sont disponible via nuget
o Il redéploya seulement la web page dans azure, parce que aucune modification a était effectué au niveau de l’app sur SharePoint
o Et maintenant chaque fois qu’un item est ajoute dans une liste spécifique sur sharepoint cette table storage est mis à jour

//Azure Web Jobs
Comme le nom dit sont de job développe sur le modèle de web page,
On peut utiliser bash,php,python,js,.bat,.exe et etc.

Comme il nous reste pas beaucoup de temps on rempart direct à la demo :

Le job dans azure va traiter les items mis dans la queue par l’event receiver et créer de blob
o Il créer une console application héberge dans azure
o Il ajoute les packages nécessaire pour créer le job et gérer le storage avec nuget
o Il créer un « JobHost » dans la console application qui peut être exécuté de façon continue ou on plusieurs thread
o Après il nous montre qu’on peut simplement debuger le job en cliquant sur la solution et démarre une nouvelle instance de la console application

[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