Introduccion al Sharepoint Framework

En el pasado tuvimos "Sharepoint Solutions", para aquellos de nosotros que somos lo suficientemente mayores y comenzamos con WSS 3.0, Sharepoint 2003 o 2007, esta era la única manera de desarrollar soluciones en ese momento. Tuvimos que crear nuestras soluciones con código C #, código que crea páginas, webparts, listas,features, timer jobs, etc. Hasta el año 2012 fue la manera más popular para desarrollar en Sharepoint, pero después de SharePoint 2013 Microsoft comenzó a cambiar su visión, Office 365 es un producto muy importante en la vision de Microsoft, en ese momento se introdujo los Sharepoint Add-Ins (anteriormente conocido como Sharepoint Apps), con este modelo de desarrollo podemos crear Add-In con C #, pero el código estaba alojado en otro servidor, IIS o Azure, con las API CSOM que puede interactuar con datos de SharePoint, e integrar SharePoint con miles de otras API #. Con Sharepoint Hosted Add-Ins, sólo podemos desarrollar con javascript, el código se ejecuta en el navegador, pero con las API REST también podemos interactuar con los datos de SharePoint y combinar varios plugins javascript para llegar a soluciones bien interestantes.

Estas 2 últimas piezas están todavía en funcionamiento, y es probable que sobrevivan durante mucho tiempo, son muy potentes y probablemente tendrán espacio en muchos blogs durante los proximos años.

Sin embargo desde mayo de 2016, Microsoft ha anunciado la introducción del Sharepoint Framework, también conocido como SPF, este nuevo framework y cito es un:

Modelo de desarrollo de webparts que permite y soporte plenamente el desarrollo del lado del cliente, fácil integración con el Microsoft Graph y soporte para herramientas de código abierto.

Esta nuevo Framework es espectacular, es de código abierto, por lo que cualquiera de ustedes puede colaborar con el repositorio GitHub, y una de las cosas que me gustan de él, que Microsoft sí lo están utilizando para construir las nuevas experiencias de SharePoint, por ejemplo, el look and feel de la nueva Biblioteca de documentos, entre otras cosas que se han dado a conocer los últimos meses.

Con cada nueva tecnologia, llega un reto, un desafío para aprender algo nuevo, debido a que SPF esta basado en las últimas tecnologías de código abierto voy a mencionar lo que se necesita para aprender:

Obligatorio:
1. Typescript
2. NodeJS.
3. NPM (gesto de paquetes como nuget).
4. Gulp

No es obligatorio
1. React
2. angular
3. Cualquier otro framework de JS.

A pesar de que menciono que no son obligatorios, hoy en dia es importante tener el conocimiento en alguno de estos para entregar mejores soluciones.

Durante los siguientes posts, vamos a aprender a desarrollar un nuevo webpart con Sharepoint Framework, cada post se basa en el anterior, entoncess es importante haber leido previamente.

Cómo empezar

PASO 1:

1. Obtener un developer tenant de Office 365

Con el fin de construir y desplegar elementos Web en SharePoint durante la vista previa inicial, se necesita un Promotor Inquilino Oficina 365. Tenga en cuenta que, por ahora, el inquilino tiene que ser un inquilino desarrollador, no sólo la colección de sitios.

Si está recibiendo siguiente excepción cuando se mueve a workbench.aspx página, significa que no está utilizando inquilino dev, en vez primera versión o el inquilino lo normal: "La operación solicitada es parte de una característica experimental que no se admite en el entorno actual . la operación solicitada es parte de una característica experimental que no se admite en el entorno actual ". Tenga en cuenta que algunos de los antiguos inquilinos dev se han notificado a tener problemas con la vista previa para desarrolladores, por eso a la provisión dev nuevo inquilino para la prueba.

2. Crear un sitio catálogo de aplicaciones.

Si usted es como yo y ya ha utilizado el modelo de complementos, entonces usted ya debe saber cómo crear una, si no seguir leyendo.

Navegar a SharePoint Centro de administración escribiendo el siguiente URL en su navegador.

Sustituir yourtenantprefix con su Oficina 365 prefijo desarrollador inquilino. https://yourtenantprefix-admin.sharepoint.com

En la barra lateral izquierda, haga clic en el elemento de menú de aplicaciones y haga clic en App Catalog.

Haga clic en el botón Aceptar para crear un nuevo sitio catálogo de aplicaciones.

En la página siguiente, introduzca los siguientes datos:

Título: Aplicación catálogo

Sitio Web Dirección sufijo: Llene sufijo preferido para catálogo de aplicaciones, por ejemplo: aplicaciones

Administrador: Introduzca su nombre de usuario y haga clic en el botón de decisión para resolver el nombre de usuario

Haga clic en el botón OK para crear el sitio catálogo de aplicaciones.

SharePoint en este momento va a crear el sitio catálogo de aplicaciones y usted será capaz de ver su progreso en el centro de administración de SharePoint

3. Crear una nueva colección de sitios desarrollador. *

Navegar a SharePoint Centro de administración escribiendo el siguiente URL en su navegador.

Sustituir yourtenantprefix con su Oficina 365 prefijo desarrollador inquilino.

https://yourtenantprefix-admin.sharepoint.com

En la cinta de SharePoint, haga clic nuevo-> Colección privada del sitio

En el cuadro de diálogo, introduzca lo siguiente:

Título: escriba un título para su colección de sitio de desarrolladores, por ejemplo: desarrollador del sitio

Sitio Web Dirección sufijo común: Introduzca un sufijo para la colección de sitios desarrollador, por ejemplo: dev

Selección de plantilla: Seleccione Sitio desarrollador como la plantilla colección de sitios

Administrador: Introduzca su nombre de usuario y haga clic en el botón de decisión para resolver el nombre de usuario

Haga clic en el botón Aceptar para crear la colección de sitios.

4. Configuración de biblioteca de documentos

Con el fin de depurar y vista previa SPF Webparts que necesitamos para cargar la página workbench.aspx, también tenemos que crear una nueva columna, las instrucciones son las siguientes:

Crear la nueva columna

Siga los pasos de abajo para agregar el nuevo campo a la biblioteca Documentos:

Haga clic en el icono de engranajes en la parte superior derecha y haga clic en Configuración del sitio para abrir la página de configuración.

Haga clic en las bibliotecas y las listas del sitio en la categoría Administración de sitios.

Haga clic en Personalizar Documentos

Ahora, haga clic en Crear columna en Columnas:

Tipo ClientSideApplicationId como el nombre de la columna y dejar otros campos como son.

Haga clic en el botón Aceptar para crear la columna.

Luego sube el workbench.aspx, última versión se puede encontrar [aquí] (https://github.com/SharePoint/sp-dev-docs/wiki/Setup-SharePoint-Tenant)

5. Configuración del entorno de desarrollo

Algo fresco aquí, ahora podemos desarrollar con un sistema operativo MAC, ¿no es genial? primera vez que las herramientas son tan ampliamente disponible a través del sistema operativo para construir las nuevas experiencias de Sharepoint.
Estas herramientas no son desarrollados por Microsoft, en lugar Microsoft llevó a los niños fresco en el área de desarrollo y los integró en SPF para nuestro propio beneficio.

a. Instalar nodejs LTS (Long Term Support) versión.
Descargar desde aquí

b. Instalar NPM
Abra un símbolo del sistema y pega:

npm -g install npm@next

c. Si está utilizando Windows instalar este paquete:

npm install --global --production windows-build-tools  

d. Instalar VS CODE.
Descargar desde aquí

e. Instalar Yeoman y gulp.
Abrir y ejecutar CMD

npm i -g yo gulp

f. Instalar Yeoman Sharepoint generador.

npm i -g @microsoft/generator-sharepoint nt

Estamos listos para empezar a programar, lo que mas nos gusta, en el proximo post, crearemos un webpart con SPF.

Las herramientas anteriores son de código abierto y ampliamente utilizados en la comunidad por otro tipo de desarrollos, también son ampliamente utilizados en el nuevo ASP.NET core, así que aprender un poco acerca de ellos es un deber.