pré-conférences - sharepoint saturday paris 2016 - le développement office 365 par la pratique
TRANSCRIPT
![Page 1: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/1.jpg)
SharePoint Saturday Montréal
Sébastien Levert – Bill Ayers & Sébastien Pertus
Préconference SPS Paris 2016 :Le développement Office 365 par la pratique
The SharePoint and Office 365 Takeaway: A Mobile Development Workshop
#SPSParisTwitter : @sebastienlevert & @SPDoctor
![Page 2: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/2.jpg)
SharePoint Saturday Montréal
Qui est Sébastien Pertus ?
Toulouse / Paris Microsoft.comEvangéliste
technique O365
Développeur Web / Win / SQL /Azure @sebastienpertus Aka.ms/seb
![Page 3: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/3.jpg)
SharePoint Saturday Montréal
Qui est Sébastien Levert ?
Montréal, Canada oceanik.comOffice Servers &
Services MVP
Développeur Web @sebastienlevertsebastienlevert.co
m
![Page 4: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/4.jpg)
SharePoint Saturday Montréal
Agenda• Introduction au développment Office 365• Les Office Add-Ins
• Introduction aux add-ins• Introduction au framework Office UI Fabric• Développement d'add-ins pour le web le desktop et le mobile avec
MVC.NET• Développement d'add-ins avec un stack open source (AngularJS,
Node, Yeoman)• SharePoint Framework
• Introduction au SharePoint Framework
![Page 5: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/5.jpg)
SharePoint Saturday Montréal
Agenda• Le Microsoft Graph
• Développement Microsoft Graph : où quand pourquoi ?• Authentification Azure AD : Que nous cache Visual Studio !• Exploration du graph• Développement from scratch d’une application universelle avec
Microsoft Graph• Développement et migration d’une application MVC ASP.NET avec
Microsoft Graph• Développement d’une application Web avec VS Code, Node.js et
Angular.JS• Retours sur les nouveautés de la //Build
![Page 6: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/6.jpg)
Les Office Add-Ins
![Page 7: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/7.jpg)
Introduction aux Office Add-Ins
![Page 8: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/8.jpg)
SharePoint Saturday Montréal
Survol de la plateforme Office Add-Ins• Les Office Add-Ins vous permettent d’étendre les
clients Office • Tels que Word, Excel, PowerPoint et Outlook en utilisant les
technologies web comme HTML, CSS et JavaScript.• Vous pouvez utiliser les Office Add-Ins pour :
• Ajouter une nouvelle fonctionnalité aux clients Office• Créer de nouveaux objets riches et interactifs qui peuvent être
intégrés dans un document Office• Les Office Add-Ins s’exécutent sur différentes
versions d’Office• Incluant Office pour Windows Desktop, Office Online, Office pour
Mac, and Office pour iPad.
![Page 9: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/9.jpg)
SharePoint Saturday Montréal
Les plateformes supportées
![Page 10: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/10.jpg)
SharePoint Saturday Montréal
Anatomie d’un Office Add-In
![Page 11: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/11.jpg)
SharePoint Saturday Montréal
Le manifest• Le nom, description, ID, version et la langue par
défaut• Comment l’Add-In s’intègre avec Office• Les niveaux de permission et les accès aux
données requis pour le Add-In
![Page 12: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/12.jpg)
SharePoint Saturday Montréal
L’application web• Le minimum requis est une application web
avec une page HTML statique. Cette page peur être hébergée n’importe où!
• L’Office Add-In peut interagir avec le client Office ou pas du tout! L’utilisation et l’intégration d’Office.js est la clé pour l’interaction avec le client.
![Page 13: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/13.jpg)
Introduction au framework Office UI Fabric
![Page 14: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/14.jpg)
SharePoint Saturday Montréal
Survol du Office UI Fabric• Toolkit pour construire des expériences pour
Office 365• Outil bâti par les designers de Microsoft• Fonctionnalités avancées comme le support du
texte affiché de droite à gauche et les composants responsives.
• Simplifier votre intégration à Office• Une seule charte graphique entre vous et
Microsoft• Fait pour le web moderne• C’est Open Source! Contribuez!
![Page 15: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/15.jpg)
Office UI Fabric
Démo
![Page 16: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/16.jpg)
Office Add-Ins avec Visual Studio & MVC.NET
Démo
![Page 17: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/17.jpg)
Office Add-Ins avec Visual Studio Code & un stack Open Source
Démo
![Page 18: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/18.jpg)
SharePoint Framework
![Page 19: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/19.jpg)
Introduction au SharePoint Framework
![Page 20: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/20.jpg)
SharePoint Saturday Montréal
L’évolution du développement SharePoint
![Page 21: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/21.jpg)
SharePoint Saturday Montréal
Survol du SharePoint Framework
![Page 22: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/22.jpg)
SharePoint Saturday Montréal
La structure des nouvelles pages
![Page 23: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/23.jpg)
SharePoint Saturday Montréal
Comment démarrer avant sa sortie• Maîtriser le développement web moderne
• JavaScript• TypeScript• Frameworks JavaScript (React, AngularJS 1.X / 2)
• Maîtriser le nouveau workflow du développeur moderne• NodeJS• Gulp• Yeoman• Git
• Utiliser les environnements de développement modernes• Visual Studio Code
![Page 24: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/24.jpg)
Le Microsoft Graph
![Page 25: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/25.jpg)
SharePoint Saturday Montréal
Les services Office 365
Outlook
Skype Entrepri
se
OneNote
DelveCalendri
er
Yammer
Office
Planner
SharePoint
OneDrive
…
![Page 26: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/26.jpg)
Développement multiplateformes
z
![Page 27: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/27.jpg)
SharePoint Saturday Montréal
• https://msdn.microsoft.com/office/office365/howto/setup-development-environment
• Environnement Office 365• Depuis votre réseau d’entreprise• Depuis votre abonnement msdn• Offre gratuite 30 jours (puis 99$ / an)
• Associer votre tenant Office 365 avec Azure AD• Utile pour manager vos applications : Autorisation et authentification
Environnement
![Page 28: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/28.jpg)
Avant le graphL’ensemble des services étaient déjà disponibles
OutlookSharePoi
ntCalendri
er Office YammerOneDriv
e…
![Page 29: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/29.jpg)
SharePoint Saturday Montréal
Avant Microsoft graph
https://contoso-my.sharepoint.com/_api/v1.0/me
https://outlook.office365.com/api/v1.0/Me/Folders/Inbox/Messages
https://graph.windows.net/contoso.com/
![Page 30: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/30.jpg)
Démo
Ça, c’était avant, mais ça peut encore servir !!!
![Page 31: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/31.jpg)
http://graph.microsoft.com
https://graph.microsoft.com/v1.0/me/messages
https://graph.microsoft.com/v1.0/me/drive
https://graph.microsoft.com/v1.0/users
![Page 32: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/32.jpg)
Authentification / Autorisation : ManifesteMicrosoft Graph
OutlookOneDriv
e…
Azure Active Directory
App Web App Mobile
Authentification
SharePoint
![Page 33: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/33.jpg)
Authentification / Autorisation : ManifesteMicrosoft Graph
OutlookOneDriv
e…
Azure Active DirectoryLecture Ecriture MailLecture SharePointLecture OneDrive
Lecture MailLecture OneDrive
App Web App Mobile
Authentification
SharePoint
![Page 34: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/34.jpg)
//Build 2016Sortie du SDK Graph sur nuget.org
![Page 35: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/35.jpg)
SharePoint Saturday Montréal
Votre solutionVotre application
Votre technologie.Net, JS, Java, Obj. C, Ruby … Microsoft
AzureAutre…
(Amazon, Heroku, IIS, LAMP
XCodeEclipse / Android studio
Visual Studio REST
SDK iOS SDK Android SDK .NET
Environnement de
développement
Authentification et
Autorisations OpenID Connect et Oauth 2.0
Données Microsoft Graph : Point d’accès unifié (REST)https://graph.microsoft.com
![Page 36: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/36.jpg)
SharePoint Saturday Montréal
XCodeEclipse / Android studio
Visual Studio REST
SDK iOS SDK Android SDK .NET
OpenID Connect et Oauth 2.0
Microsoft Graph : Point d’accès unifié (REST)https://graph.microsoft.com
https://www.nuget.org/packages/Microsoft.Graph
http://github.com/microsoftgraph
https://blogs.msdn.microsoft.com/mim/2016/04/06/disponibilite-du-sdk-net-microsoft-graph/
![Page 37: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/37.jpg)
SharePoint Saturday Montréal
XCodeEclipse / Android studio
Visual Studio REST
SDK iOS SDK Android SDK .NET
OpenID Connect et Oauth 2.0
ADAL : Azure AD Library• Version conseillée mais non obligatoire• Version 3+ : O365• Version 4+ : O365 + Outlook.com
Indépendant du fournisseur d’authentitication• Nécessite juste le jeton d’accès• Interface IAuthenticationProvider à fournir
![Page 38: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/38.jpg)
Demo time !
Migration de notre démo vers le graph !
![Page 39: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/39.jpg)
Application Node.JS et Microsoft Graph
Oui c’est un Mac
@sebastienpertus
TypeScript
![Page 40: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/40.jpg)
Démo time !
Node.js en action
![Page 41: Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique](https://reader035.vdocuments.mx/reader035/viewer/2022070516/58715dc21a28ab8e5b8b6d2d/html5/thumbnails/41.jpg)
SharePoint Saturday Montréal
Merci à notre sponsorPréconférences !
#SPSParisTwitter : @sebastienlevert & @SPDoctor
Et rendez-vou demain pour le SPS Paris 2016 !