#SPC2012 : Introduction to the Cloud App Model for Office and SharePoint 2013

Monday, 14h00 – SPC133

Résumé

Ce sont deux sessions qui présentent les apps. Ici la part 1. (La part 2 a pour titre #SPC2012 : Introduction to the Cloud App Model for Office and SharePoint 2013)

Part 1 : La session fait une bonne introduction sur le développement d’App. Elle se concentre sur pas mal de démos pour Office, et un peu moins sur SharePoint. Elle explique les différents éléments à prendre en considération sur le dév d’Apps sans rentrer dans les détails. Elle montre notamment l’anatomie d’une App, les façon de déployer, et du code simple pour effectuer des opérations simples.

Les démos ne sont pas terribles mais à la décharge des speakers, c’est notamment à cause du fait qu’elles sont sur Windows Azure et Office 365 … sachant que la connexion n’est pas terrible ici. Bonne démarche néanmoins d’être très factuel en montrant pas mal d’Apps développées.

Part 1 :

Rolando Jimenez commence à expliquer la partie 1 est core concepts. Il est program manager sur Office.

Keenan Newton, également program manager sur Office and SharePoint

Agenda :

  • Intro Apps
  • Anatomy of an App
  • App architecture

Keenan commence sur une architecture simple d’App en expliquant que le code SharePoint va être de moins en moins côté serveur mais côté client plutôt avec SharePoint 2013 qui va exposer de nombreuses APIs.

Il explique que les Apps vont être donc côté client (javascript etc.) qu’on va pouvoir connecter à des services tiers (via webservice par ex). Il

Anatomie d’un app

  • Manifest + Page web + Javascript

// DEMO : Jimenez montre un fichier Excel représentant les parcs nationaux aux USA

L’Excel a leurs caractéristiques (ville, adresse, nom).

Sur le fichier, il montre que dans un classeur il peut avoir un Bing maps sur lequel sont représentés des points correspondant aux parc nationaux de son classeur.

Il explique que l’app Office qu’il a créé avec Bing Maps est une page web, page qui peut être accessible sur un navigateur simple.

// DEMO : Jimenez montre l’anatomie d’une App

Il enchaine sur le manifest.xml qui doit être créé pour déclarer l’App pour Office.

Le manifeste montre notamment une valeur par défaut correspondant à l’URL de la page développée contenant la fonctionnalité Bing Maps.

Il nous montre ensuite comment est développée la page en question.

Il y a des include du fichier js Office pour utiliser Bing Maps.

Ensuite 95% de l’App est du HTML/javascript utilisant l’API bing maps javascript. D’ailleurs la page a une extension HTML toute simple.

// DEMO : d’une App sur Word

Il enchaine un autre exemple sur Word, avec une App pour Office qui s’appelle SPLister.

Son Word contient un tableau avec un nom et des éléments dans des colonnes.

Cela ouvre un panneau, où on peut entrer une URL et faire Connect.

En cliquant sur Connect, cela ouvre un navigateur permettant d’ouvrir un site SharePoint sur O365 où il autorise l’App Office à se connecter.

Une fois terminée, il nous montre que son App permet en fait de créer une liste sur SharePoint avec les éléments du tableau à l’intérieur.

// DEMO : d’une App pour Excel

Il sélectionne la même App, il saisit une URL de site, fait connect.

Il a sélectionné un bout du tableau avec 3 colonnes et 15 items.

L’App va créer une liste avec les éléments sélectionné insérés dans des bonnes colonnes.

// DEMO : Création d’une App

Création d’une App for Office 2013 via Visual Studio 2012 Ce sera une App pour traduire des éléments (« SPCTranslator ») Cela définit par défaut une page HTML + Un javascript Il définit un bouton une div qui montre le texte sélectionné Grâce au js Office, on peut récupérer le texte sélectionné Sur le onclick du bouton, il utilise ensuite api.microsofttranslator.com avec un query string pour traduire son texte.

Son texte traduit est réinséré dans son document.

Démo : ça marche !

// DEMO : Newton reprend la parole pour montrer une SharePoint App.

Il ouvre Visual Studio 2012 avec la création d’une App autohosted Son app est un ensemble aspx + javascript Dans le javascript, il utilise le JSOM, modèle objet javascript client Il but va être de simplement créer une App SharePoint permettant de récupérer le nombre de listes d’un site.

Il met alors du code javacsript qui se connecte en asynchrone à SharePoint.

Il déploie et ouvre SharePoint qui propose d’accepter son app. Il ensuite accès à son app qui fait un simple window.alert() montrant qu’il y a 2 listes.

Il retourne sur Visual Studio pour créer un modèle de liste, la configure simplement via un wizard.

Le modèle de liste est créé dans le projet avec les colonnes qu’il veut. Maintenant il veut ajouter une vue de liste sur sa page d’accueil de son App.

Il va tout simplement déclarer une webpart zone dans son fichier Default.aspx avec à l’intérieur une XsltListViewWebpart pointant sur sa liste.

Il créé maintenant une custom action sur le menu item, ajoutant un bouton à l’interface permettant d’exposer le bouton sur l’App Web et va se brancher sur le nouveau template de liste créé. Ce bouton va permettre d’ouvrir Bing sur le menu de l’item créé.

Il teste, effectivement la webpart de liste est sur la page, il ajoute un élément, sur le menu il a un bouton permettant d’aller sur Bing.

// DEMO : Anatomie d’un App

Il retourne dans ses projets, et renomme l’app qu’il vient de créer en mettant une extension .ZIP plutôt que .APP.

En dézippant, il ouvre le manifest.xml.

A noter : on peut définit la start page en passant notamment en query string des « Tokens » standards permettant par exemple de connaître quel site héberge l’App.

Il montre également que l’AppPrincipal est défini à Internal ce qui permet de dire que cette App juste créée est une App qui est interne à une entreprise et ne peut être soumise au SharePoint store. C’est une app interne.

// Retour sur les slides par Newton

On peut créer un certain nombre d’éléments sur SharePoint avec les apps : Lists, doc libs, workflows, remote event receivers, BCS etc.

On peut avoir différentes aspects pour une App « Immersive », « App part », « Custom action » comme nous venons de voir L’app est comme pour un téléphone, considérée comme isolée dans un environnement, avec notamment un domain bien différent (ex : apps.monsharepoint.com avec SP sur monsharepoint.com).

Enfin, le modèle objet client et les API permettent de faire des actions assez nombreuses. Les développeurs qui connaissent les APIs javascript et HTML peuvent potentiellement faire des Apps.

// DEMO : Jimenez revient sur le déploiement d’un App Une app est un fichier .APP.

Ce .app est déployé sur Office Store ou SharePoint store, ou bien un Store interne = App Catalog.

Il explique que dans certains cas, il y a besoin que l’App soit déployée sur des serveurs car ces apps ne sont pas que en JS, parfois en C#.

Il ouvre une console Windows Azure qui a du mal car la connexion est mauvaise alors que tout se passe sur internet (Office 365 + Windows Azure).

Plan B, il ouvre son projet de traduction, il fait clic droit sur le projet puis « Publish »

Il a déjà préconfiguré le serveur de déploiement, Web front (exportable en xml). Visual Studio va ensuite effectivement déployer l’app sur Windows Azure. Le code va être installé et …… la démo est arrêtée car la connexion a vraiment du mal.

Il voulait montrer que quand on va sur l’App Catalog, il y a une entrée « Apps for Office » et « Apps for SharePoint » montrant la liste des XML déclarés correspondant aux Apps qui sont installées sur la plateforme.

Le résultat va être que sur les soft Office (Excel ou Word) vont montrer les Apps disponibles dans une fenêtre.

// Jimenez reprend la main sur les slides pour expliquer les moyens d’héberger son App.

Il existe 3 méthodes :

  • Provider hosted : hébergeur externe, ex : serveur hébergé dans son entreprise
  • SharePoint hosted : hébergé sur SP
  • Autohosted : déploiement sur Azure automatiquement

// DEMO : Jimenez fait une démo sur Excel Une App a été créée pour Excel « Magic Fill »

Il a un tableau répertoriant le cout de la vie par état aux USA Son app permet de créer une colonne en se faisant une requête sur un service « Mexican population of ». En cliquant sur add column, l’App va permettre d’ajouter une colonne au tableau Excel en insérant automatiquement les données pour chaque ligne (= chaque état).

// DEMO : Jimenez montre une App sur les tremblements de terre

Un tableau existe recensant les tremblements de terre avec les magnitudes, les lieux Il montre une App intégrée dans le tableau montrant des points rouges plus ou moins gros placés sur une carte monde Bing. Ces points sont liés à la magnitude.

Il a ouvert l’App qui ouvre le panneau App « Earthquakes taskpane » sur la droite permettant de trouver des séismes, ou des tweeds parlant des tremblements Note perso : on ne comprend pas trop l’utilité de son App, il n’y a pas d’intéraction

// DEMO : Une app existante : Blog Publisher sur SharePoint

Il explique que l’App a des listes et doc lib.

Il a notamment un document Word par défaut qu’il ouvre.

Le document s’ouvre avec un panneau à droite lui permettant de gérer différents éléments autour de l’App, ajouter des tâches assignées à des personnes sur le site hébergeant l’App.

// DEMO : Jimenez montre une App sur Excel sur les élections « Election tracker »

Il montre un Excel avec une carte des USA montrant quels états ont voté pour Romney ou Obama.

Un bouton permet de se connecter à un service récupérant les données et mettant la carte à jour. Les états sont rouge ou bleu selon si les personnes ont plutôt voté pour l’un ou l’autre des candidats.

// Jimenez explique les différentes considérations à prendre pour une App Hébergements : Windows Azure ?

  • Cross domain : Attention aux proxy et également côté serveur Sécurité : Utiliser SSL ou Basic authent’ ?
  • Reach : Attention à l’hébergement savoir s’il est accessible à tout le monde Performant : utiliser du cache client ou serveur ?

La part 2 commence bientôt … (La part 2 a pour titre #SPC2012 : Introduction to the Cloud App Model for Office and SharePoint 2013)

Christian

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 )

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 )

Photo Google+

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

Connexion à %s