MsCodersCamp2014

Colaboran:

#MsCodersCamp2014

Cloud

SharePoint Online: Desarrolla tus apps en la nube

MsCodersCamp2014

#MsCodersCamp2014

Miguel Tabera

SharePoint MVP

Beezy | Spenta

www.sinsharepointnohayparaiso.com

@migueltabera

Iván Gómez

.NET Developer

Beezy | Spenta

www.blogmup.net

@ivangomezrod

#MsCodersCamp2014

MsCodersCamp2014

Cloud

SharePoint Online: desarrolla tus apps en la nube

#MsCodersCamp2014

Hoy veremos…

• Office 365: SharePoint 2013 en la nube

• Introducción al nuevo modelo de desarrollo en SharePoint 2013

• Las nuevas API cliente (C#, JavaScript y REST)

• Apps de Office y SharePoint• Tipos de app• Beneficios por usar apps

• Conceptos básicos al desarrollar apps

• Laboratorio: todos a desarrollar apps

• La tienda de Office

• Desarrollo fácil de apps de Windows Phone para SharePoint Online

#MsCodersCamp2014

Office 365: SharePoint 2013 en la nube

#MsCodersCamp2014

Office 365: Office en la nube

+ + + =

#MsCodersCamp2014

Un único lugar, todo Office

#MsCodersCamp2014

¿Qué incluye SharePoint Online?

#MsCodersCamp2014

¿Qué no incluye SharePoint Online?

• Algunos servicios de BI• PerformancePoint

• PowerPivot

• Reporting Services

• Analysys Services

• Desarrollo de soluciones servidor

• Word automation services

• Otras pequeñas características en los distintos servicios

#MsCodersCamp2014

Un paseo rápido

Demo

#MsCodersCamp2014

Introducción al nuevo modelo de desarrollo de SharePoint 2013

#MsCodersCamp2014

La visión de Microsoft: modernizar la plataforma

#MsCodersCamp2014

El resultado: un nuevo modelo de apps basadas en la nube

#MsCodersCamp2014

Las nuevas API cliente de SharePoint

#MsCodersCamp2014

Las tres API cliente

• Client-side object model (CSOM)• Para aplicaciones que usen C#.

• Para aplicaciones Silverlight y Windows Phone.

• Javascript object model (JSOM)• Muy sencillo para aplicaciones web y JavaScript de Windows 8.

• Útil para desarrollar apps de SharePoint para otras plataformas (Android, iOS…)

• REST• API independiente de la plataforma basada en estándares como

OAuth y OData.

#MsCodersCamp2014

Resto de APIs

• Combinando las tres API cliente con el resto de API se pueden desarrollar las distintas soluciones

#MsCodersCamp2014

Ayuda y referencias de las API

• Reference for SharePoint 2013 APIs (Server, CSOM, JavaScript)• http://msdn.microsoft.com/en-us/library/jj193038.aspx

• How to: Complete basic operations using SharePoint 2013 client library code• http://msdn.microsoft.com/en-us/library/fp179912.aspx

• How to: Complete basic operations using JavaScript library code in SP 2013• http://msdn.microsoft.com/en-us/library/jj163201.aspx

• How to: Complete basic operations using SharePoint 2013 REST endpoints• http://msdn.microsoft.com/en-us/library/jj164022.aspx

#MsCodersCamp2014

Apps de Office y SharePoint

#MsCodersCamp2014

¿Qué es una app de SharePoint?

• Aplicaciones independientes que se integran con SharePoint mediante APIs cliente (CSOM, JavasCript, REST)

• Diseñadas para no ensuciar ni cargar la granja de SharePoint

• Las apps no residen en SharePoint

• Desaparición paulatina del modelo tradicional de desarrollo

• Código cliente

• Centradas en escenarios concretos• Petición de vacaciones• Registro a eventos• …

#MsCodersCamp2014

Cambio filosófico

• Suponen un cambio filosófico en SharePoint.

• Ahora todo son apps

• Pensar en las app de móvil Funcionalidades concretas bastante independientes

#MsCodersCamp2014

Beneficios

• No se despliega código personalizado en el servidor SharePoint• Migraciones futuras más sencillas

• Funcionan tanto en SharePoint Online como en SharePoint Server

• Reduce la rampa de aprendizaje• No es tan necesario conocer muchos conceptos de SharePoint

• Se puede usar HTML5, JavaScript y REST si no se conoce .NET

• Las apps pueden residir en servidores externos con diferentes tecnologías

• Permite hacer muchas más cosas que con las tradicionales webparts, controles, etc.

#MsCodersCamp2014

Las app se integran en SharePoint

#MsCodersCamp2014

Apps para Office

• Word, Excel, Project, PowerPoint y Outlook también pueden tener apps

• Filosofía similar: HTML5 + JavaScript

• Concepto Web Extensibility Framework (WEF)• Plataforma de desarrollo para hacer apps para Office

• Permite renderizar páginas web dentro de las aplicaciones Office

• Permite al código de las páginas interactuar con los documentos Office

• Permite al código de las páginas interactuar con elementos de Exchange

#MsCodersCamp2014

Tipos de app de Office

Mail app (Outlook, Outlook Online)

Task pane app (Word, Excel,

Excel Online, PowerPoint,

Project Professional)

Content app (Excel, Excel Online)

#MsCodersCamp2014

Conceptos básicos para desarrollar apps de SharePoint

#MsCodersCamp2014

Los tres tipos de app

Sitio de

SharePoint

SharePoint-Hosted AppNo necesita hosting. El código de la app se

ejecuta en el navegador cliente mediante

JavaScript y/o REST.

Provider-Hosted AppLa app reside en cualquier infraestructura y y

está hecha con cualquier lenguaje. Da igual

que el hosting sea Windows Server, Apache…

Puede estar en .NET, Java, PHP, HTML5,

JavaScript…

Sitio de

SharePointLlamadas a SharePoint

para obtener o escribir

información usando las

API CSOM/REST +

OAuth

Cloud-based Apps

Aplicación web

(Hosting

propio)

Autohosted AppSimilar a la anterior, salvo que el hosting

es Windows Azure + SQL Azure. El

aprovisionamiento e instalación se hace

de forma invisible. Sólo en Office 365.

Aplicación web

(Windows

Azure

Web Sites)

Sitio de

SharePoint

Online

APP

APP

APP

#MsCodersCamp2014

Formas para las appDescripción Ejemplo

App que se abre a pantalla completa para mostrar funcionalidades avanzadas. Permite tener la barra de navegación del sitio para volver

Reserva de recursos, panel de negocio…

Aunque no sean una app, Word Online, PowerPoint Online, Excel Online y OneNote Online funcionan de forma similar.

Se inserta en las páginas de SharePoint como una webpart tradicional

Visor del tiempo, visor de acciones, panel de control, mapa…

Añade nuevas acciones para trabajar con documentos e ítems en la cinta y menús

Abrir un visualizador del documento, imprimir un documento…

#MsCodersCamp2014

Las app por dentro

• Una app por dentro es un sitio de SharePoint

• La app puede tener sus propias listas y bibliotecas que duran el tiempo que la app esté instalada

• También puede acceder a las listas y bibliotecas del sitio que las contiene

Sitio de SharePoint App (sitio de SharePoint)

Lista Lista Lista

ListaBiblioteca

BibliotecaLista

Lista Lista Lista

App App

ListaBiblioteca

BibliotecaLista

Lista

Lista

Lista

BibliotecaLista

AppAplicación web ubicada en

hosting externo.

• Opcional

• Sólo en provider hosted

y autohosted

#MsCodersCamp2014

El archivo AppManifest.xml

• AppManifest.xml define las propiedades de la app

• Visual Studio 2012/2013 ofrece un diseñador visual

SharePoint Hosted

Autohosted

Provider Hosted

#MsCodersCamp2014

Comunicación entre las app y SharePoint

• Las apps provider hosted y autohosted se encuentran fuera de SharePoint y necesitan interactuar con su contenido para:• Acceder a datos

• Efectuar operaciones (crear listas, editar permisos, etc.)

• Las app se comunican con SharePoint vía CSOM y REST

• Las apps necesitan permisos para acceder al contenido de SharePoint• Esto se consigue gracias al nuevo

soporte a OAuth de SharePoint 2013

#MsCodersCamp2014

Sitio del desarrollador y catálogo de apps

• El catálogo de apps es una colección de sitios con una biblioteca en la que almacenaremos los paquetes de las app

• El sitio del desarrollador es una colección de sitios con una biblioteca para almacenar apps que permite hacer debug y desplegar la app desde Visual Studio

#MsCodersCamp2014

Llamadas cross-domain

#MsCodersCamp2014

Llamadas cross-domain

• Una app de SharePoint se muestra en la página dentro de un IFRAME

• La app está en un dominio distinto que el sitio de SharePoint

• Los navegadores no permiten a los elementos de la página interactuar con más de un dominio para evitar ataques

• Librería JavaScript SP.RequestExecutor.js• Se encuentra en el directorio LAYOUTS

• Con esta librería, las app pueden llamar a SharePoint aunque esté en dominio diferente

• El mecanismo de trabajo no es específico de SharePoint, es un patrón que se usa en la industria

#MsCodersCamp2014

Las llamadas cross-domain son bloqueadas

SharePoint Serverhttp://mydomain.com

Provider-hosted app

http://anotherdomain.com

<IFRAME>

Provider hosted app

</IFRAME>

El scripting cross site es bloqueado pordefecto en el servidor de SharePoint.

#MsCodersCamp2014

SP.RequestExecutor.js

SharePoint Serverhttp://mydomain.com

SP.RequestExecutor.js

1. Genera el IFRAME automáticamente.

2. Habilita las peticiones CSOM/REST posteandoal IFRAME con .postMessage()

<IFRAME>

Provider hosted app

</IFRAME>

<IFRAME>http://mydomain.com/Proxy.aspx

</IFRAME>

#MsCodersCamp2014

Habilitando las llamadas cross-domain

SharePoint Serverhttp://mydomain.com

Provider-hosted app

http://anotherdomain.com

<IFRAME>

Provider hosted app

</IFRAME>

<IFRAME>

http://mydomain.com/Proxy.aspx

</IFRAME>

#MsCodersCamp2014

Laboratorio

#MsCodersCamp2014

Instalando apps y comprando en la tienda de Office

#MsCodersCamp2014

Ciclo de instalación de una app

FREE/TRIAL/

PURCHASE

OFFICE

VALIDACIÓN DE LA APP

#MsCodersCamp2014

Comprando en la tienda

#MsCodersCamp2014

Desarrollo de apps de Windows Phone para SharePoint

#MsCodersCamp2014

Windows Phone SharePoint application templates

Windows

Phone Empty

SharePoint

Application

Windows

Phone

SharePoint List

Application

#MsCodersCamp2014

Preparando el entorno

• Si vas a trabajar con el SDK de Windows Phone 8• Microsoft Visual Studio 2012• Windows Phone SDK 8.0

• http://www.microsoft.com/en-us/download/details.aspx?id=35471

• Microsoft SharePoint SDK for Windows Phone 8• http://www.microsoft.com/en-us/download/details.aspx?id=36818

• Si vas a trabajar con el SDK de Windows Phone 7• Microsoft Visual Studio 2010 (no están soportadas en VS 2012).• Windows Phone SDK 7.1:

• http://www.microsoft.com/en-us/download/details.aspx?id=27570

• Microsoft SharePoint SDK for Windows Phone 7.1:• http://www.microsoft.com/en-us/download/details.aspx?id=35475

#MsCodersCamp2014

El patrón MVVM

#MsCodersCamp2014

Windows Phone Empty SharePoint application

Manifiesto de la app

DLL del Windows Phone

SharePoint SDK

Activos de la app

Recursos

Aplicación

Página inicial

#MsCodersCamp2014

Windows Phone SharePoint list application

Manifiesto de la app

ViewModels. Operación para

listar ítems de la lista y

operaciones para mostrar, editar

y crear ítem.

Vistas. Página para visualizar los

ítems y formularios de vista,

edición y creación.

Aplicación

Modelo. Clase que proporciona

los datos de SharePoint.

#MsCodersCamp2014

Mi primera app

• La Windows Phone Empty SharePoint Application es un proyecto vacío con las DLL necesarias añadidas• Útil como punto de partida a una app que conecte a SharePoint.

• La Windows Phone SharePoint List Application proporciona un asistente de creación de la app• Nos crea una app conectada a una lista, con todas sus operaciones.

• ¡Increíble! En cinco minutos tendremos una app lista que podemos lanzar en el emulador o teléfono y publicar en la tienda.

#MsCodersCamp2014

Mi primera app• 1) Creación del proyecto

#MsCodersCamp2014

Mi primera app• 2) Buscamos la lista en el asistente

#MsCodersCamp2014

Mi primera app• 3) Elegimos vistas 4) Elegimos operaciones

#MsCodersCamp2014

Mi primera app• 5) Elegimos las columnas y su orden en los

formularios

#MsCodersCamp2014

Mi primera app• 6) Proyecto listo para ejecutar

#MsCodersCamp2014

Mi primera app• 7) App compilada y lista

#MsCodersCamp2014

Demo

Ejemplo

#MsCodersCamp2014

Descuento eBooks Comunidad técnica

30% de descuento En ebooks de Krasis Press

Consigue tu código de descuento:

http://promos.campusmvp.com/mscoders http://www.linkedin.com/groups/MadPoint-

SharePoint-Users-Group-Madrid-4554702

MsCodersCamp2014

Colaboran:

#MsCodersCamp2014

Thank you!