Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Extensión de office con adal.js y office ui fabric

181 views

Published on

Descripción del proceso de desarrollo de Add-in de Office consumiendo servicios a través de ADAL.js.
Al mismo tiempo se explica como unificar la interfaz a la experiencia Office a través de Office Fabric.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Extensión de office con adal.js y office ui fabric

  1. 1. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Extensión de Office con ADAL.JS y Office UI Fabric
  2. 2. WWW.COLLAB365.EVENTS Mario Cortés Flores Plain Concepts Email : mcortes@plainconcepts.com Twitter : @mariocortesf LinkedIn : https://es.linkedin.com/in/mariocortesflores MVP en Office365 llevo trabajando desde hace más de 10 años en proyectos sobre SharePoint y en los últimos años especializado en SharePoint Online y Windows Azure. Trabajo en Plain Concepts como Web Team Lead dónde intentamos tener el mejor equipo en desarrollo web
  3. 3. WWW.COLLAB365.EVENTS Agenda • Overview de Add-in • Flujo de desarrollo • Office Fabric • Adal JS • Publicación en el store
  4. 4. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Overview
  5. 5. Online Conference June 17th and 18th 2015 Qué es? • Una página web renderizada dentro de Office. • Basada en Html, CSS y JavaScript. • Podemos interactuar con los documentos y elementos de Office a través de Web Extensibility Framework.
  6. 6. Online Conference June 17th and 18th 2015 Tipos de Apps
  7. 7. Online Conference June 17th and 18th 2015 Office Add-ins
  8. 8. Online Conference June 17th and 18th 2015 Add-ins Commands • Con Office 2016 podemos añadir secciones y botones al ribbon o menús contextuales • Install the latest version of Office 2016 applications
  9. 9. Online Conference June 17th and 18th 2015 Cómo se instala • Desde el ribbon • Catálogo de apps: – Corporativo desde SharePoint – App Store – Unidad de red
  10. 10. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Flujo de desarrollo
  11. 11. Online Conference June 17th and 18th 2015 Anatomía
  12. 12. Online Conference June 17th and 18th 2015 Anatomía
  13. 13. Online Conference June 17th and 18th 2015 Anatomía
  14. 14. Online Conference June 17th and 18th 2015 Core API Objects • Office.context – Entry point into Office API • Office.context.document – Common document API • Office.context.settings – Custom properties saved within document • Read and write selection • Create binding • Register event handlers • Use custom XML files • Read and writer properties • Properties saved to document document settings context
  15. 15. Online Conference June 17th and 18th 2015 Inicialización • Para iniciar el contexto
  16. 16. Online Conference June 17th and 18th 2015 getSelectedDataAsync() • Para leer de la selección
  17. 17. Online Conference June 17th and 18th 2015 setSelectDataAsync() • Para inserter contenido
  18. 18. Online Conference June 17th and 18th 2015 Centro de desarrollo http://dev.office.com/getting-started
  19. 19. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Office Fabric
  20. 20. Online Conference June 17th and 18th 2015 Office Fabric • Ofrece a nuestras aplicaciones controles con apariencia y comportamiento similar al de Office y SharePoint. • Referenciamos un css y JS y aplicamos las clases a nuestro HTML. http://dev.office.com/fabric/components/
  21. 21. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Adal JS
  22. 22. Online Conference June 17th and 18th 2015 Adal JS • Biblioteca en JavaScript para facilitar el intercambio y validación de tokens oAuth • Registrar la aplicación en WAAD https://secure.aadcdn.microsoftonline- p.com/lib/1.0.0/js/adal.min.js
  23. 23. Online Conference June 17th and 18th 2015 AuthenticationContext
  24. 24. Online Conference June 17th and 18th 2015 acquireToken
  25. 25. Online Conference June 17th and 18th 2015 Bearer
  26. 26. Online Conference June 17th and 18th 2015 Registrar la aplicación en WAAD • Registrar la aplicación y dar permisos • http://dev.office.com/getting- started/office365apis
  27. 27. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Publicación en el Store
  28. 28. Online Conference June 17th and 18th 2015 Empaquetado • Validar el manifest con Office App Compatibility Kit • Generar el manifest • Publicar el código en IIS, Azure o CDN
  29. 29. Online Conference June 17th and 18th 2015 Office App Compatibility Kit • Herramienta de validación del manifest https://www.microsoft.com/en- us/download/confirmation.aspx?id=46831
  30. 30. Online Conference June 17th and 18th 2015 Antes de publicar • Indicar un título y descripción descriptivo • Especificar el idioma al que va destinado • Incluir screenshots • Incluir un logo acorde con el Add-in • Experiencia de carga inicial • Añadir add-in commands
  31. 31. Online Conference June 17th and 18th 2015 Validaciones • Pasar el Office App Compatibility Kit • Validar que se cumplen las “Validation policies” • Validar en cliente Office W+Mac, Explorer Chrome y Safari • Desinstalar el Add-in
  32. 32. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Referencias
  33. 33. Online Conference June 17th and 18th 2015 Referencias • OfficeAdd-insplatformoverview • Add-insCommands • Understandingthe JavaScriptAPI for Office • Sitiode desarrollode Office • Best practicesde publicación • Validationpolicies
  34. 34. Online Conference June 17th and 18th 2015 Ejemplos de Apps • Empaquetadas en el Store • Bing Maps • Package Tracker • Khan Content from Microsoft • Translator • Ejemplos de código de apps: • https://github.com/OfficeDev/Outlook-Add-in-LinkRevealer • https://github.com/OfficeDev/Office-Add-in-Calculator • https://github.com/OfficeDev/Word-Add-in-JavaScript-AddPopulateBindings • https://github.com/OfficeDev/Excel-Add-in-Bind-To-Table
  35. 35. Online Conference June 17th and 18th 2015
  36. 36. WWW.COLLAB365.EVENTS Stay tuned for more great sessions … Gracias! @mariocortesf

×