Creando un entorno de desarrollo colaborativo Node JS y potenciándolo con herramientas online (parte 1)

Integraremos nuestro proyecto en GitHub con Travis CI

Diego Pérez Molinero
6 min readOct 28, 2017

La idea es crear un entorno de desarrollo colaborativo usando cómo repositorio de código GitHub dónde subiremos nuestro código fuente.

Y además, integrarlo con herramientas online como Travis CI que nos van a permitir verificar la calidad del código, ejecutar pruebas unitarias y mucho más.

Requisitos previos

Tener conocimientos básicos de javascript, Node JS y Git.

Además se recomienda:

  • Un editor de código. En mi caso, he utilizado Atom, pero podéis utilizar otro que sea de vuestro agrado…
  • Gitkraken, un GUI de GIT, que también nos facilitará enormemente trabajar con los repositorios de GIT.

Creación del proyecto en GitHub

El proyecto que vamos a hacer a modo de ejemplo, va a consistir en una sencilla calculadora, donde implementaremos las cuatro operaciones de aritmética básicas: suma, resta, multiplicación y división.

Lo primero que haremos será abrirnos una cuenta en GitHub, si es que todavía a estas alturas no la tenemos.

Ahora crearemos un nuevo repositorio en GitHub, para ello basta con pulsar desde la pantalla principal en el botón de New repository.

No tiene pérdida, es el botón verde

Y a continuación, rellenamos los datos del nombre del proyecto, la descripción, lo dejamos marcado como público y además marcamos la casilla de inicializar el repositorio con un fichero README.

También aprovechamos para añadir un fichero .gitignore preparado para Node que nos servirá para evitar subir al repositorio ficheros que no consideremos fuentes.

Creando el repo en GitHub

Pulsamos el botón de Create repository y ya tendremos nuestro repositorio limpito recién creado.

Nuestro repo en GitHub listo para empezar

Clonación del proyecto con GitKraken

Ahora vamos a clonar el proyecto, usando GitKraken. Recordad que para poder clonar el proyecto de GitHub hay que tenerlo asociarlo a nuestra cuenta de GitHub previamente.

Clonamos el proyecto con GitKraken
Nuestro repo clonado con Gitkraken y listo para empezar

Empezamos con NodeJS

Vamos a empezar a escribir un sencillo código que consistirá en un módulo de Node que implementa las 4 operaciones de aritmética básicas: sumar, restar, multiplicar y dividir.

Desde el directorio base del proyecto, ejecutamos el típico

$ npm init

Y vamos contestando a las preguntas que se nos van haciendo (nombre del proyecto, versión, descripción, autor,…)

Al final en nuestro caso hemos obtenido el fichero package.json siguiente:

{
“name”: “calculatornodejs”,
“version”: “1.0.0”,
“description”: “A basic calculator in nodeJS”,
“main”: “index.js”,
“scripts”: {
“test”: “test”
},
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/diegopm2000/CalculatorNodeJS.git"
},
“author”: “diegopm2000”,
“license”: “ISC”,
“bugs”: {
“url”: “https://github.com/diegopm2000/CalculatorNodeJS/issues"
},
“homepage”: “https://github.com/diegopm2000/CalculatorNodeJS#readme"
}

Lógicamente, adaptaremos el usuario de github y el autor al nuestro.

El código fuente de nuestro módulo lo vamos a poner dentro de una nueva carpeta, de nombre app.

Dentro de la carpeta app, creamos el fichero calculator.js y añadimos el código siguiente:

Y en la raíz del proyecto creamos un fichero index.js para poder probar el código que hemos escrito:

Podemos ejecutar este fichero index.js, escribiendo

$ node index.js

Y obtendremos la siguiente salida:

Add 3 + 5 = 8
Minus 3 + 5 = -2
Multiply 3 + 5 = 15
Divide 3 + 5 = 0.6

Ahora que ya tenemos el código principal de nuestro proyecto, lo subimos a nuestro repositorio de GitHub.

Integración con Travis CI

Vamos a integrar nuestro proyecto en GitHub con la herramienta de integración continua Travis.

Tenemos que ir a la web de Travis, y crear una cuenta asociándola a nuestra cuenta de GitHub.

Tenemos que seguir los pasos que nos indican en la web de Travis.

Una vez que lo tengamos asociado, nos ha de aparecer algo así:

Nuestro proyecto de GitHub ya nos aparece en Travis

Ya tenemos asociado nuestro repositorio del proyecto en GitHub con Travis. Podemos consultar en GitHub, la pestaña Settings → Integration & Services y veremos que ahora aparece Travis CI como servicio.

Con esto lo que hacemos es que cada vez que hagamos una subida de código a la rama master del repositorio de nuestro proyecto, Travis ejecutará npm install y validará si todo el proyecto está OK.

Vamos también a crear un fichero en la raíz de nuestro proyecto, con nombre .travis.yml con el siguiente contenido:

language: node_js
node_js: 12.13.0

Le decimos a Travis que se trata de un proyecto node_js, y que usaremos la versión 12.13.0. (Actualmente es la LTS a día 04/11/2019).

Subimos ahora el fichero que acabamos que crear al repositorio y si todo va bien, GitHub avisará a Travis para que inicie la construcción del proyecto.

Si entramos en nuestra cuenta de Travis, deberíamos ver algo así:

Travis comienza a ejecutar la construcción del proyecto

Pero al final la construcción acaba fallando debido a que no encuentra los tests.

Test unitarios

Vamos entonces a construir los test unitarios, usando los paquetes mocha y chai, los que instalaremos de la siguiente forma:

$ npm install mocha — save-dev$ npm install chai — save-dev

Lo que añadirá a nuestro fichero package.json un apartado de dependencias usadas en desarrollo (devDependencies):

“devDependencies”: {
“chai”: “⁴.1.2”,
“mocha”: “⁴.0.1”
}

También añadimos al fichero pakage.json el apartado de test, para indicar que usaremos mocha:

“scripts”: {
“test”: “mocha”
}

Creamos una nueva carpeta, de nombre test, y dentro de ella, un fichero calculatortest.js donde escrimos la batería de test unitarios de la calculadora:

Ahora ya podemos ejecutar los test desde la raíz del proyecto:

$ npm test

Y ya tenemos construidos los test unitarios. Procedemos a subir todo a nuestro repositorio de GitHub, y al entrar en Travis Ci, deberíamos ver que se ha construido con éxito el proyecto.

Como guinda, vamos a ponernos el distintivo de Travis (una medallita en nuestro proyecto, vamos) en nuestro README.md y de paso añadir algo de literatura.

El código del distintivo, lo podemos obtener directamente desde Travis, pulsando en el distintivo que aparece a la derecha del nombre del proyecto, y escogiendo la opción de markdown.

[![Build Status](https://travis-ci.org/diegopm2000/CalculatorNodeJS.svg?branch=master)](https://travis-ci.org/diegopm2000/CalculatorNodeJS)

Una vez subido a GitHub, veremos los resultados:

Resumen

En esta primera parte, hemos creado nuestra calculadora, hemos creado una batería de pruebas unitarias, la hemos subido a GitHub, y además, hemos integrado el proyecto de GitHub con Travis CI, añadiendo un distintivo en GitHub para verificar si el proyecto se ha construido de forma correcta.

En la siguiente parte del artículo, nos integraremos con Sonarqube.

Segunda parte

--

--

Diego Pérez Molinero

Software Architect & defender of clean architecture and domain driven design. Supporter of infrastructure & devops as code into the projects.