Categorías: javascript Office 365 sharepoint 2016

SharePoint FrameWork: Preparando el entorno

El pasado miércoles, ocurrió lo que muchos seguidores de SharePoint estábamos esperando: por fin Microsoft dió acceso a todos los desarrolladores a su nuevo Framework de desarrollo sobre SharePoint.

Para empezar con el mismo, debemos acudir al siguiente repositorio de GitHub.

Con esta nueva forma de desarrollar, nuestro enfoque como desarrolladores de SharePoint cambia totalmente: ahora debemos tener un  gran dominio de TypeScript, NodeJS, Gulp y todas las herramientas que utilizan los especialistas de Front-End.

Por primera vez en la historia de SharePoint, podemos decir que estamos utilizando las últimas herramientas de desarrollo web, lo cual, es un muy importante para atraer desarrolladores a la plataforma.

En los siguientes artículos voy a desgranar  todas las funcionalidades que trae este nueva herramienta y cómo ponerlas en práctica.

NOTA: Si es la primera vez que escuchas hablar sobre este nuevo Framework, antes de leer este artículo te recomiendo que empieces con este otro artículo.

Esta nueva forma de desarrollar, agiliza mucho el desarrollo por varios motivos:

  • No hace falta acceder a SharePoint.
  • Podemos tener un entorno local y multiplataforma de una forma simple (mediante mocks a las peticiones de SharePoint)
  • Utiliza herramientas estándares en el desarrollo Web como NodeJs, Python, Yeoman, Gulp.

Antes de empezar con el desarrollo, tenemos que tener listo nuestro entorno: tener instaladas las herramientas necesarias para su correcto funcionamiento y tener listo el Tenant para poder desplegar el WebPart/AddIn/App o como lo quieran llamar en nuestro SharePoint Online.

Preparando el Tenant

Para poder desplegar las soluciones en tu Tenant, en primer lugar debes de tener tu tenant activado en modo First Release. ¿Ésto qué es?

Dentro de las configuraciones de Office 365  hay una opción en la que puedes indicar que te actualicen los productos de forma inmediata, tal y como se van liberando. Ojo, que esto no implica que tu Tenant esté actualizado y preparado, sino que cuando Microsoft proceda a actualizar el Tenant (no actualiza todos los tenants a la vez), se incorporarán estos nuevos cambios. En mi caso, he tenido que crear un nuevo Tenant de Demo para poder tener esta novedad, ya que los entornos con los que estoy trabajando todavía no se han actualizado. Esta opción es la que te indica el equipo desde la issue de GitHub.

Dentro de nuestro tenant, tendremos que tener un catálogo de aplicaciones. En el caso de que no lo tengamos, tendremos que crearlo (Administración de SharePoint–> Apps -> App Catalog -> Create) .

A continuación, nos crearemos un Sitio de Desarrollo.

Una vez creado, en la biblioteca «Documents» abrimos una nueva columna llamada ClientSideApplicationId ( Site settings –> Site libraries and lists –> Customize Documents –> Create colum).  Dentro de esta biblioteca, subimos el fichero workbench.aspx (que se encuentra en el repositorio de GitHub).

Preparando nuestra Máquina de desarrollo

Para empezar con el framework, el primer paso es tener instalado NodeJS Long Term Support (LTS) version.

Como IDE, podemos utilizar bien Visual Studio Code o bien Visual Studio. En mi opinión, para un único desarrollo, Web Visual Studio Code sería la mejor elección, ya que es un entorno mucho más ligero y  rápido. El único inconveniente que tiene es que la extensión de Visual Studio Team Services no tiene soporte para los repositorios de TFS.
Si queremos utilizar el framework con Visual Studio tendremos que instalar:

Una vez ya tenemos el IDE, tendremos que instalar una serie de aplicaciones:

  • Gulp -> Para la gestión de Tareas (compilación, verificación del JavaScript, publicación, …)
  • Yo -> El generador de la plantilla

Para ello, desde una consola de NodeJS tendremos que poner la siguiente instrucción:

npm i -g yo gulp

A continuación, instalaremos el generador de la plantilla del nuevo framework.

npm i -g @microsoft/generator-sharepoint 

Por último, para verificar que tenemos nuestro entorno funcionando, lanzaremos las siguientes instrucciones:

mkdir blog
cd blog 
yo @microsfot/sharepoint

Si todo va bien, se muestra la siguiente pantalla:

En este artículo no me voy a centrar en las posibilidades que tienen el generador de SharePoint (lo abordaremos más adelante). Dentro del Generador, pulsamos «Intro» en todas las preguntas. Al finalizar la instrucción se muestra una pantalla como ésta:

Una vez tenemos la solución creada, nos ubicamos en el directorio donde esta la solución y ejecutamos la siguiente instrucción:

gulp serve

Lo que hace este comando, es levantar un servidor NodeJS en tu entorno con el Benchmark listo para poder agregar tus WebParts.

En caso de que tengas algún tipo de error, mi consejo (en un entorno Windows), es que revises el PATH de ejecución y compruebes que tienes en el mismo la ruta de ejecución de NodeJS. Si lo tienes, el siguiente consejo es repasar las Issues del repositorio de GitHub en el que están contempladas la gran mayoría de ellas.

¿Y ahora qué?

Una vez ya tenemos listo nuestro entorno, nos queda lo mejor: aprender en profundidad el nuevo framework. Para ello debemos familiarizarnos con la  estructura de la solución que nos ha creado NodeJS, cómo se utiliza el Benchmarck, como hacer Test, qué tareas de Gulp trae de serie el Framework, cómo publicar una solución en nuestro catálogo de Aplicaciones, etc… Todo esto y mucho más, lo abordaremos en los siguientes artículos.

Compartir
Publicado por
Adrián Díaz

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continuas navegando, estás dando tu consentimiento para aceptar las cookies y también nuestra política de cookies (esperemos que no te empaches con tanta cookie 😊)