Una vez tenemos listo el entorno (leer el artículo anterior) vamos a entender cada parte que tiene la solución. Para ello, en primer lugar vamos a abrir la carpeta donde se ha descargado la solución mediante Yeoman.
Para estas demos utilizaré Visual Studio Code, pero puedes elegir tu IDE preferido (Visual Studio, Brackets, etc..)
El primer fichero de los importantes es el fichero gulpfile.js. Por si no lo conocéis, éste es el fichero de configuración para poder ejecutar Gulp.
¿Qué es Gulp?
Es «Task Runner» de tareas Open Source para Javascript. En Gulp podemos ejecutar casi cualquier tarea que puedas hacer de forma manual: compilar ficheros SASS, compilar typescript, ejecutar test, publicar ficheros, verificación de la sintaxis del html, javascript, etc … De tal forma que tener una serie de procesos Gulp nos puede ahorrar mucho tiempo en nuestro desarrollo del día a día.
Dentro de este Framework, el equipo de producto ha implementado unas tareas predeterminadas: falta documentación sobre todas las tareas que hay disponibles. A continuación, comentaremos las imprescindibles para la utilización del framework.
La primea de las tareas que hacemos uso es la de unificar todos el JavaScript en un único fichero y levantar un servidor en local para poder depurar. Para hacer esto debemos poner la siguiente instrucción: gulp serve.
Otra de las tareas que tiene el FrameWork es la de generar la App. Para ello hay que ejecutar la siguiente instrucción: gulp package-solution. Al ejecutar este comando dentro de nuestra solución, se crea una carpeta «sharepoint» y dentro de la misma esté el fichero con extensión .sapp. Este comando genera el paquete pero no «compila» la solución, es decir, si previamente no hemos ejecutado gulp serve nuestra solución estará vacía porque no hay ningún fichero javascript.
Por último, otra de las tareas es cómo subir los ficheros javascript a un CDN de Azure (en los siguientes artículos ya comentaremos cuándo y por qué utilizar estos CDN) . Para ello dentro de la carpeta config disponemos de un fichero deploy-azure-storage.json. En dicho fichero ponemos la configuración de nuestro blob storage de Azure. Una vez tenemos configurado ésto, ejecutamos las siguientes intrucciones: gulp –ship (se encarga de compilar y minimizar la solución) y gulp deploy-azure-storage.
Carpeta SRC
Dentro de la carpeta «src» ya disponemos de nuestro desarrollo. Anteriormente a esta carpeta hay otra carpeta WebParts, en la que a su vez hay apartados para cada WebPart de la solución.
Cada Webpart esta formado por :
- Un fichero .manifest (en el que están algunos aspectos de configuración como el icono del WebPart, el nombre del mismo y la ubicación dentro de la carpeta de agregar Webparts)
- Una Interfaz I{nombredelwebpart}Props.ts en el que se indican las propiedades que se van a poder configurar en el WebPart
- Un fichero {nombredelWebpart}.ts en el que está la implementación del WebPart. Esta clase extiende la clase BaseClientSideWebPart<{Interfaz de Propiedades}> En esta clase añadiremos el comportamiento que va a tener nuestro desarrollo. Como mínimo, debemos de implementar un método Render en el que sera el punto de entrada de nuestro desarrollo.
- Tiene una carpeta Loc, que son los recursos de la aplicación para ello por un lado tiene una interfaz en la que definimos los elementos que se van a ver traducidos y por otro lado tendremos un fichero .js por cada idioma que tiene nuestra aplicación con la resolución de los recursos.
- Otras carpetas: dependiendo de la elección del Framework en el que queremos desarrollar tendremos más o menos carpetas. Por ejemplo si hacemos uso de ReactJS tendremos una carpeta Components en la que estarán el/los componente/es que se van a utilizar. También cada WebPart tiene una carpeta Test en la que podremos los test que se van a utilizar en nuestra aplicación (con la instalación del SPFX te instala PhantomJS)
Carpeta Config
En esta carpeta estás todas las configuraciones que tenemos en nuestro desarrollo. Por defecto, tenemos estas configuraciones en ficheros de extensión json:
- serve.json -> En el mismo tenemos el puerto que va a tener el servidor y la ruta de la pantalla de inicio.
- tslint.json -> Aquí se configuran las reglas que queremos que se verifiquen al compilar nuestra aplicación
- config.json-> La configuración de nuestro webpart (dependencias, ubicación del directorio de recursos, etc…)
- otros ficheros de configuración para la compilación de la solución.
Otras carpetas
Por último tenemos dos carpetas que no debemos de modificar bajo ningún concepto. Son las carpetas:
- node_modules. Aquí se descargan todos los módulos JavaScript que necesita nuestro Framework (sin esta carpeta no funciona la aplicación)
- typings -> En esta carpeta están las definiciones TypeScript de las librerías JavaScript para poder utilizarlas dentro de la solución. Sin esta carpeta de Typings nuestra solución tampoco funcionaria.
Otras consideraciones
Como seguro que os habéis dado cuenta, el actual entorno de desarrollo es algo distinto al que conocía tradicionalmente cualquier desarrollador de SharePoint. Ahora debemos conocer herramientas como NodeJS, TypeScript, etc… Un archivo que también es muy importante en la configuración, es el archivo package.json. En el mismo se configuran las dependencias con los paquetes npm que son necesarios en esta solución y una vez los ejecutemos, automáticamente los instalará dentro de la carpeta node_modules.
¡Suscríbete a nuestras RRSS!
