Jira es una popular herramienta de gestión de proyectos que te ayuda a realizar un seguimiento de las tareas de un proyecto. Sin embargo, cuando trabajas en un proyecto grande, tu panel de Jira puede saturarse a medida que aumenta el número de tareas y miembros del equipo.
Para solucionar este problema, puedes utilizar la API REST de Jira para generar una aplicación simplificada de Lista de Tareas que muestre tus tareas asignadas y sus plazos. La API te permite interactuar mediante programación con Jira para crear, recuperar, actualizar y eliminar incidencias, y acceder a los datos de usuario y a los detalles del proyecto.
Este tutorial te guía a través del desarrollo de una aplicación de lista de tareas con Node.js como servidor para obtener las incidencias de tu cuenta de Jira y una aplicación React para mostrarlas. También aprenderás a alojar tanto el frontend como el servidor en Kinsta.
Requisitos Previos
Para seguir adelante, necesitas
- Node.js y Node Package Manager (npm) instalados en tu máquina de desarrollo.
- Una cuenta Jira para acceder a las tareas.
- Un conocimiento sólido de Node. js y React.
Cómo Construir el Backend con Node.js y Express
Express es un popular framework de Node.js que proporciona un entorno simplificado para construir aplicaciones del lado del servidor. Express simplifica el manejo de rutas y facilita las interacciones con recursos externos, como API, bases de datos y aplicaciones frontend.
Sigue los pasos que se indican a continuación para configurar el servidor:
- Crea un nuevo directorio y navega hasta él. A continuación, inicializa Node.js ejecutando el siguiente comando:
npm init -yEste comando crea un archivo package.json con la configuración predeterminada en el raíz de la carpeta de tu aplicación.
- A continuación, instala todas las dependencias necesarias para tu proyecto ejecutando el siguiente comando:
npm install express dotenv axiosEl comando anterior instala lo siguiente:
- Una vez que la instalación se haya realizado correctamente, crea un archivo .env en el raíz de tu proyecto y añade el número
PORT:PORT=3000Este es el número de puerto en el que escucha el servidor. Puedes cambiarlo por un puerto de tu elección.
- Crea un archivo index.js en la carpeta raíz de tu proyecto y añade el siguiente código para importar Express, crear una instancia de una aplicación Express e iniciar tu servidor:
const express = require('express'); require('dotenv').config() const app = express(); const PORT = process.env.PORT; // Define routes here app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); - Por último, en tu archivo package.json, añade un script para iniciar tu servidor:
"scripts": { "start": "node index" },Ahora, puedes ejecutar el script de inicio en tu terminal:
npm run startEste comando inicia tu servidor. Deberías ver el siguiente texto registrado en el terminal:
Server is running on port 3000Con el servidor en marcha, ya puedes configurar tu aplicación Jira.
Cómo Configurar una Aplicación de Jira
Para utilizar la API REST de Jira, necesitas autenticar una cuenta de usuario con tu sitio de Jira. La API de la app de Jira que has creado utiliza la autenticación básica con una dirección de correo electrónico de una cuenta de Atlassian y un token de API.
Aquí tienes cómo configurarlo:
- Crea una cuenta de Jira o inicia sesión si ya tienes una.
- Ve a la sección de seguridad de tu perfil de Atlassian y haz clic en Crear token de API.
- En el cuadro de diálogo que aparece, introduce una Etiqueta para tu token (por ejemplo, «jira-todo-list») y haz clic en Crear.
- Copia el token en tu portapapeles.
- Por último, guarda el token de API en tu archivo .env:
JIRA_API_TOKEN="your-api-token"Ahora puedes acceder a la API de Jira utilizando la autenticación básica.
Configurar Rutas para Obtener Incidencias de Jira
Ahora que has configurado una aplicación Jira. Vamos a configurar rutas para obtener incidencias de Jira en tu servidor Node.js.
Para iniciar una solicitud a la API de Jira, debes utilizar el token de la API de Jira que guardaste en el archivo .env. Recupera el token de la API utilizando process.env y asígnalo a una variable llamada JIRA_API_TOKEN en tu archivo index.js:
const JIRA_API_TOKEN = process.env.JIRA_API_TOKENAhora, tienes que definir la URL del endpoint para tu solicitud de API. Esta URL contiene tu dominio de Jira y una sentencia Jira Query Language (JQL). El dominio de Jira se refiere a la URL de tu organización de Jira y se parece a org.atlassian.net, donde org es el nombre de tu organización. JQL, por su parte, es un lenguaje de consulta para interactuar con incidencias en Jira.
Empieza por añadir el dominio de Jira al archivo .env:
JIRA_DOMAIN="your-jira-domain"También tienes que almacenar tu correo electrónico de Jira en el archivo . env, ya que se utilizaría para la autorización al realizar una solicitud a Jira:
JIRA_EMAIL="your-jira-email"A continuación, añade ambas variables de entorno y construye la URL del endpoint utilizando el dominio y la siguiente sentencia JQL. Esta consulta filtra las incidencias con estado «In progress» o «To do» para el usuario conectado y luego las ordena por estado:
const jiraDomain = process.env.JIRA_DOMAIN;
const email= process.env.JIRA_EMAIL;
const jql = "status%20in%20(%22In%20progress%22%2C%20%22To%20do%22)%20OR%20assignee%20%3D%20currentUser()%20order%20by%20status";
const apiUrl = `https://${jiraDomain}/rest/api/3/search?jql=${jql}`;Antes de crear una ruta, importa también Axios en tu archivo index.js:
const axios = require("axios")Ahora puedes crear una ruta que haga una petición GET a la API de Jira y devuelva las incidencias. En index.js añade el siguiente código:
app.get('/issues/all', async (req, res) => {
})Ahora, utiliza el método axios.get para hacer una solicitud GET a la API REST de Jira. Crea la cabecera Authorization codificando en base64 tu correo electrónico de Jira y el token de la API:
const response = await axios.get(apiUrl, {
headers: {
Authorization: `Basic ${Buffer.from(
`${email}:${JIRA_API_TOKEN}`
).toString("base64")}`,
Accept: "application/json",
},
});Espera la respuesta de la API de Jira y guárdala en una variable. La respuesta contiene una propiedad llamada issues, que contiene un array de objetos issue:
const data = await response.json();
const { issues } = data;A continuación, itera sobre el array issues, extrae sólo la información relevante sobre los elementos pendientes y devuélvela en la respuesta JSON:
let cleanedIssues = [];
issues.forEach((issue) => {
const issueData = {
id: issue.id,
projectName: issue.fields.project.name,
status: issue.fields.status.name,
deadline: issue.fields.duedate,
};
cleanedIssues.push(issueData);
});
res.status(200).json({ issues: cleanedIssues });Si haces una petición a http://localhost:3000/issues/all, deberías recibir un objeto JSON que contenga los asuntos:
curl localhost:3000/issues/allIncluso puedes llevar esto más lejos utilizando un proveedor como SendGrid y una tarea cron para enviar correos electrónicos diarios que contengan las tareas asignadas.
Aloja tu Aplicación Node.js en Kinsta
Antes de alojar tu aplicación en Kinsta, habilita el Uso Compartido de Recursos entre Orígenes (CORS, Cross-Origin Resource Sharing) para evitar un error access-control-allow-origin, ya que alojas el backend y el frontend en dominios diferentes. Para ello
- Instala el paquete npm cors ejecutando este comando en tu terminal:
npm install cors - A continuación, importa el paquete en index.js.
const cors = require('cors') - A continuación, configura CORS como middleware para habilitarlo para cada solicitud entrante. Añade el siguiente código en la parte superior de tu archivo index.js:
app.use(cors());Ahora puedes enviar peticiones HTTP a tu servidor desde un dominio diferente sin encontrar errores CORS.
A continuación, envía tu código a tu proveedor Git preferido (Bitbucket, GitHub o GitLab) y sigue los pasos que se indican a continuación para alojarlo:
- Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
- Autoriza a Kinsta con tu proveedor de Git.
- Haz clic en Aplicaciones en la barra lateral izquierda, y luego en Añadir aplicación.
- Selecciona el repositorio y la rama desde la que deseas desplegar.
- Asigna un nombre único a tu aplicación y elige la ubicación del centro de datos.
- Añade las variables de entorno. No es necesario añadir el PUERTO como variable de entorno, ya que Kinsta lo gestiona automáticamente. Marca las casillas junto a Disponible durante el tiempo de ejecución y Disponible durante el proceso de construcción:
Variables de entorno de la aplicación Kinsta. - Revisa el resto de la información (puedes dejar los valores por defecto) y haz clic en Crear aplicación.
Tu servidor ya está desplegado correctamente en Kinsta. En el menú de la izquierda, haz clic en Dominios y copia el dominio primario. Este es el endpoint de la URL de tu servidor.
Crear una Aplicación React para Mostrar las Incidencias
A continuación, utiliza React para crear el frontend de tu aplicación y CSS para darle estilo. Sigue los pasos que se indican a continuación para crear un proyecto React con Vite:
- Crea un nuevo proyecto React llamado
jira-todo:npx create-vite jira-todo --template react - Navega hasta el directorio del proyecto e instala las dependencias necesarias:
npm install - Inicia el servidor de desarrollo:
npm run dev
Obtener Incidencias del Servidor
- Borra el contenido en App.jsx y añade el siguiente código:
function App() {
return (
<div className="App">
<h1>What's on my list today?</h1>
{/* Display issues */}
</div>
);
}
export default App;- Antes de empezar a obtener las incidencias, guarda la URL del servidor de Kinsta en un archivo .env en el root de la carpeta de tu app:
VITE_SERVER_BASE_URL="your-hosted-url"- Obtén la URL en App.jsx añadiendo la siguiente línea en la parte superior del archivo:
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL- En tu componente, crea una función asíncrona llamada
fetchDatay realiza una solicitud GET al endpoint/issues/allen el servidor Express. Una vez que recibas una respuesta, analízala como JSON y almacena los datos en un valor de estado llamadodata:
import { useCallback, useEffect, useState } from "react";
function App() {
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL
const [data, setData] = useState([]);
const fetchData = useCallback(async () => {
try {
const response = await fetch(`${SERVER_BASE_URL}/issues/all`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
setData(data.issues);
} catch (error) {
console.error('Error fetching data:', error);
}
},[SERVER_BASE_URL]);
useEffect(() => {
// Fetch data when the component mounts
fetchData();
},[fetchData]);
return (
<div className="App">
<h1>What's on my list today?</h1>
</div>
);
}
export default App;Ten en cuenta que utilizas el hook useEffect para ejecutar la función fetchData cuando se monta el componente.
Renderizar las Incidencias desde Jira en el Navegador
- Ahora, puedes modificar la sentencia return de tu componente para iterar sobre las incidencias y listarlas en el navegador:
return (
<div>
<h1>What's on my list today?</h1>
<section>
{data && data.map(issue => {
return <div className="issues" key={issue.id}>
<div>
<div>{issue.summary}</div>
<small>{issue.deadline}</small>
</div>
<div>
<div> className="status">{issue.status}</div>
</div>
</div>
})}
</section>
</div>
);- Para dar estilo a esta aplicación, añade el siguiente código CSS a App.css:
h1 {
text-align: center;
font-size: 1.6rem;
margin-top: 1rem;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.issues {
display: flex;
min-width: 350px;
justify-content: space-between;
padding: 1rem;
background-color: #eee;
margin-bottom: 1rem;
}
small {
color: gray;
}
.status-btn {
padding: 4px;
border: 1px solid #000;
border-radius: 5px;
}- A continuación, importa App.css en index.js para aplicar los estilos:
import './App.css'Ahora, cuando inicies tu aplicación, deberías ver en tu navegador una lista de las tareas que tienes asignadas con su estado y fecha límite:
Despliega tu Aplicación React en Kinsta
Para simplificar las cosas, utiliza el Alojamiento de Sitios Estáticos de Kinsta para desplegar la aplicación. El Alojamiento de Sitios Estáticos de Kinsta ayuda a construir tus sitios en un sitio estático y despliega los archivos estáticos asegurando una entrega rápida del contenido y un tiempo de inactividad mínimo.
Crea un repositorio en GitHub para enviar tu código fuente. Una vez que tu repositorio esté listo, sigue estos pasos para desplegar tu sitio estático en Kinsta:
- Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
- Autoriza a Kinsta con tu proveedor de Git.
- Haz clic en Sitios Estáticos en la barra lateral izquierda, y luego en Añadir sitio.
- Selecciona el repositorio y la rama desde la que deseas desplegar.
- Asigna un nombre único a tu sitio.
- MyKinsta detecta automáticamente los ajustes de construcción para este proyecto React. Verás los siguientes ajustes rellenados previamente:
- Comando de construcción:
npm run build - Versión de nodo:
18.16.0 - Directorio de publicación:
dist
- Comando de construcción:
- Añade la URL de tu servidor como variable de entorno utilizando
VITE_SERVER_BASE_URL. - Por último, haz clic en Crear sitio.
Y ¡listo! Ya tienes un sitio desplegado en unos segundos. Se proporciona un enlace para acceder a la versión desplegada de tu sitio. Si navegas hasta el dominio de tu sitio, verás una lista de incidencias de Jira. Si lo deseas, puedes añadir más adelante tu dominio personalizado y tu certificado SSL.
Como alternativa al alojamiento de sitios estáticos, puedes optar por desplegar tu sitio estático con el Alojamiento de Aplicaciones de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama más amplia de ventajas y acceso a funciones más robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y análiticas completas que abarcan datos históricos y en tiempo real.
Resumen
En esta guía, has aprendido a crear una aplicación Express para recuperar incidencias de Jira asignadas mediante la API REST de Jira. Además, has conectado una aplicación frontend React a tu aplicación Express para mostrar estas incidencias en el navegador.
Esta aplicación es una demostración rudimentaria de lo que puedes conseguir con la API REST de Jira. Puedes mejorar tu aplicación con funcionalidades que te permitan marcar tareas completadas, realizar filtrados avanzados y mucho más.
Además, con Kinsta, puedes alojar tanto tu servidor como el sitio en un solo panel utilizando nuestros distintos servicios. Comprueba que Kinsta ofrece un alojamiento web robusto y flexible para todas tus aplicaciones.
Deja una respuesta