Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique

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


Qui est Sébastien Pertus ?

Toulouse / Paris Microsoft.comEvangéliste

technique O365

Développeur Web / Win / SQL /Azure @sebastienpertus Aka.ms/seb


Qui est Sébastien Levert ?

Montréal, Canada oceanik.comOffice Servers &

Services MVP

Développeur Web @sebastienlevertsebastienlevert.co

m


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


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

Les Office Add-Ins

Introduction aux Office Add-Ins


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.


Les plateformes supportées


Anatomie d’un Office Add-In


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


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.

Introduction au framework Office UI Fabric


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!

Office UI Fabric

Démo

Office Add-Ins avec Visual Studio & MVC.NET

Démo

Office Add-Ins avec Visual Studio Code & un stack Open Source

Démo

SharePoint Framework

Introduction au SharePoint Framework


L’évolution du développement SharePoint


Survol du SharePoint Framework


La structure des nouvelles pages


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

Le Microsoft Graph


Les services Office 365

Outlook

Skype Entrepri

se

OneNote

DelveCalendri

er

Yammer

Office

Planner

SharePoint

OneDrive

…

Développement multiplateformes

z


• 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

https://msdn.microsoft.com/office/office365/howto/setup-development-environment

https://msdn.microsoft.com/office/office365/howto/setup-development-environment

Avant le graphL’ensemble des services étaient déjà disponibles

OutlookSharePoi

ntCalendri

er Office YammerOneDriv

e…


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/

Démo

Ça, c’était avant, mais ça peut encore servir !!!

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

Authentification / Autorisation : ManifesteMicrosoft Graph

OutlookOneDriv

e…

Azure Active Directory

App Web App Mobile

Authentification

SharePoint

Authentification / Autorisation : ManifesteMicrosoft Graph

OutlookOneDriv

e…

Azure Active DirectoryLecture Ecriture MailLecture SharePointLecture OneDrive

Lecture MailLecture OneDrive

App Web App Mobile

Authentification

SharePoint

//Build 2016Sortie du SDK Graph sur nuget.org


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



Visual Studio REST


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/



Visual Studio REST


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

Demo time !

Migration de notre démo vers le graph !

Application Node.JS et Microsoft Graph

Oui c’est un Mac

@sebastienpertus

TypeScript

Démo time !

Node.js en action


Merci à notre sponsorPréconférences !

#SPSParisTwitter : @sebastienlevert & @SPDoctor

Et rendez-vou demain pour le SPS Paris 2016 !

Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique

Technology

Transcript of Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office 365 par la pratique