vTasks

Contexto

vTasks es un sistema para registrar tareas e incidencias vinculadas a un proyecto en GitHub. Permite que sus usuarios generen issues sin tener acceso directo al repositorio o proyecto, sino a través de las APIs provistas por GitHub, conservando la privacidad del resto del repositorio.

El presente proyecto constituye un componente de React autónomo, que se instala por medio de NPM en cualquier proyecto de React, y puede configurarse para reportar issues a cualquier servidor de vTasks.

El entorno recomendado para realizar el build es Windows 10.

Instalación

1. Posicionarse dentro del directorio de un proyecto de React.
2. Ejecutar el comando npm install vtasks-widget --save para instalar el componente y persistirlo como dependencia en el package.json del proyecto.
3. Si se desea mostrar el componente de forma global en la aplicación, incluirlo en el archivo App.js de la siguiente forma:

import {VTasksWidget} from 'vtasks-widget';

...

function App() {

  return (
    ...
       <VTasksWidget
              project="SomeProjectNameInGitHub"
              environmentLabel="SomeProjectName DEV | QA | PRD"
              environmentUrl="dev.someproject.com"
              apikey="XXXXXXXXXXXXXXXXXX"
              vTasksUrl="http://vtasks.somedomain.com"
              vTasksAPIUrl="https://vtasksapi.somedomain.com"
            />
      <Router history={history}>
      ...
      

4. Si se desea mostrar el componente en un componente específico, se debe incluir con la misma sintaxis dentro de la función return() o método render() según corresponda.
5. Deben configurarse los siguientes parámetros:
   project: Indica el nombre del repositorio en GitHub al cual desea asociarse los issues generados. Debe coincidir con la URL del mismo.
   environmentLabel: Indica la etiqueta a aplicar a los issues de GitHub para identificar el ambiente del que provienen. Ej: "Proyecto X DEV".
   environmentUrl: Indica la URL del ambiente donde se desea mostrar el widget. Se verificará si la URL actual contiene el valor especificado en este parámetro. Ej: "https://dev.proyectoX.com" contiene a "dev.proyectoX", por lo que si se especifica "dev.proeyctoX" como valor, se mostrará en dicho ambiente. Puede ser un string (si es un solo ambiente) o un array de strings (si son varios). No puede estar vacío, en ese caso no se mostrará.
   apikey: Indica el API Key de vTasks generado para autenticarse con esa instancia específica.
   vTasksAPIUrl: Indica la URL de un servidor donde se ejecuta una instancia de backend de vTasks.
   vtasksUrl: (Opcional) Indica la URL de una instancia de vTasks accesible para el usuario, de manera que pueda acceder con un solo click desde el widget a la instancia que corresponda.
   style: (Opcional) Representa estilos personalziados para el botón del widget, a fin de personalizar su apariencia y posición.

Pruebas locales

Para probar modificaciones en el componente localmente, sin pasar por NPM:

1. Ejecutar el comando npm run build para compilar el nuevo release.
2. Ejecutar el comando npm pack para generar un archivo .tgz con el nuevo release en el directorio del proyecto.
3. Posicionarse en el directorio del proyecto que utilizará el componente.
4. Ejecutar el comando npm uninstall vtasks-widget para desinstalar la versión actual del componente.
5. Ejecutar el comando npm install [ruta al archivo .tgz del paso 2] para instalar el componente localmente a partir del archivo .tgz.
6. Reiniciar el servidor de frontend (presionando Ctrl + C y ejecutando npm start nuevamente) dado que los cambios en las dependencias no generan una recompilación automática y no se reflejarán en el código.

Compilación y publicación

Para efectuar un nuevo release, se deben seguir los siguientes pasos:

1. Incrementar el número de versión en el archivo package.json
2. Ejecutar el comando npm run build para compilar el nuevo release.
3. Ejecutar el comadno npm publish para publicar el nuevo release a NPM.