Este tutorial te gu\u00eda a trav\u00e9s del desarrollo de una aplicaci\u00f3n de lista de tareas con Node.js<\/a> como servidor para obtener las incidencias de tu cuenta de Jira y una aplicaci\u00f3n React para mostrarlas. Tambi\u00e9n aprender\u00e1s a alojar tanto el frontend como el servidor en Kinsta. Para seguir adelante, necesitas<\/p>\n Express<\/a> 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.<\/p>\n Sigue los pasos que se indican a continuaci\u00f3n para configurar el servidor:<\/p>\n Este comando crea un archivo package.json<\/strong> con la configuraci\u00f3n predeterminada en el ra\u00edz de la carpeta de tu aplicaci\u00f3n.<\/li>\n El comando anterior instala lo siguiente:<\/p>\n Este es el n\u00famero de puerto en el que escucha el servidor. Puedes cambiarlo por un puerto de tu elecci\u00f3n.<\/li>\n Ahora, puedes ejecutar el script de inicio en tu terminal:<\/p>\n Este comando inicia tu servidor. Deber\u00edas ver el siguiente texto registrado en el terminal:<\/p>\n Con el servidor en marcha, ya puedes configurar tu aplicaci\u00f3n Jira.<\/li>\n<\/ol>\n 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\u00f3n b\u00e1sica con una direcci\u00f3n de correo electr\u00f3nico de una cuenta de Atlassian y un token de API.<\/p>\n Aqu\u00ed tienes c\u00f3mo configurarlo:<\/p>\n Ahora puedes acceder a la API de Jira utilizando la autenticaci\u00f3n b\u00e1sica.<\/li>\n<\/ol>\n Ahora que has configurado una aplicaci\u00f3n Jira. Vamos a configurar rutas para obtener incidencias de Jira en tu servidor Node.js.<\/p>\n Para iniciar una solicitud a la API de Jira, debes utilizar el token de la API de Jira que guardaste en el archivo .env<\/strong>. Recupera el token de la API utilizando Ahora, 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<\/a> (JQL). El dominio de Jira se refiere a la URL de tu organizaci\u00f3n de Jira y se parece a Empieza por a\u00f1adir el dominio de Jira al archivo .env<\/strong>:<\/p>\n Tambi\u00e9n tienes que almacenar tu correo electr\u00f3nico de Jira en el archivo . env<\/strong>, ya que se utilizar\u00eda para la autorizaci\u00f3n al realizar una solicitud a Jira:<\/p>\n A continuaci\u00f3n, a\u00f1ade 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 \u00abIn progress\u00bb o \u00abTo do\u00bb para el usuario conectado y luego las ordena por estado:<\/p>\n Antes de crear una ruta, importa tambi\u00e9n Axios en tu archivo index.js:<\/p>\n Ahora puedes crear una ruta que haga una petici\u00f3n GET a la API de Jira y devuelva las incidencias. En index.js<\/strong> a\u00f1ade el siguiente c\u00f3digo:<\/p>\n Ahora, utiliza el m\u00e9todo Espera la respuesta de la API de Jira y gu\u00e1rdala en una variable. La respuesta contiene una propiedad llamada A continuaci\u00f3n, itera sobre el array Si haces una petici\u00f3n a Incluso puedes llevar esto m\u00e1s lejos utilizando un proveedor como SendGrid y una tarea cron para enviar correos electr\u00f3nicos diarios que contengan las tareas asignadas.<\/p>\n Antes de alojar tu aplicaci\u00f3n en Kinsta, habilita el Uso Compartido de Recursos entre Or\u00edgenes (CORS<\/a>, Cross-Origin Resource Sharing) para evitar un error Ahora puedes enviar peticiones HTTP a tu servidor desde un dominio diferente sin encontrar errores CORS.<\/li>\n<\/ol>\n A continuaci\u00f3n, env\u00eda tu c\u00f3digo a tu proveedor Git preferido (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>) y sigue los pasos que se indican a continuaci\u00f3n para alojarlo:<\/p>\n Tu servidor ya est\u00e1 desplegado correctamente en Kinsta. En el men\u00fa de la izquierda, haz clic en Dominios<\/strong> y copia el dominio primario. Este es el endpoint de la URL de tu servidor.<\/p>\n A continuaci\u00f3n, utiliza React para crear el frontend de tu aplicaci\u00f3n y CSS para darle estilo. Sigue los pasos que se indican a continuaci\u00f3n para crear un proyecto React con Vite<\/a>:<\/p>\n Ten en cuenta que utilizas el hook Ahora, cuando inicies tu aplicaci\u00f3n, deber\u00edas ver en tu navegador una lista de las tareas que tienes asignadas con su estado y fecha l\u00edmite:<\/p>\n Para simplificar las cosas, utiliza el Alojamiento de Sitios Est\u00e1ticos de Kinsta<\/a>\u00a0para desplegar la aplicaci\u00f3n. El Alojamiento de Sitios Est\u00e1ticos de Kinsta ayuda a construir tus sitios en un sitio est\u00e1tico y despliega los archivos est\u00e1ticos asegurando una entrega r\u00e1pida del contenido y un tiempo de inactividad m\u00ednimo.<\/p>\n Crea un repositorio en GitHub para enviar tu c\u00f3digo fuente<\/a>. Una vez que tu repositorio est\u00e9 listo, sigue estos pasos para desplegar tu sitio est\u00e1tico en Kinsta:<\/p>\n Y \u00a1listo! Ya tienes un sitio desplegado en unos segundos. Se proporciona un enlace para acceder a la versi\u00f3n desplegada de tu sitio. Si navegas hasta el dominio de tu sitio, ver\u00e1s una lista de incidencias de Jira. Si lo deseas, puedes a\u00f1adir m\u00e1s adelante tu dominio personalizado<\/a> y tu certificado SSL<\/a>.<\/p>\n Como alternativa al alojamiento de sitios est\u00e1ticos, puedes optar por desplegar tu sitio est\u00e1tico con el Alojamiento de Aplicaciones<\/a> de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama m\u00e1s amplia de ventajas y acceso a funciones m\u00e1s robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y an\u00e1liticas completas<\/a> que abarcan datos hist\u00f3ricos y en tiempo real.<\/p>\n En esta gu\u00eda, has aprendido a crear una aplicaci\u00f3n Express para recuperar incidencias de Jira asignadas mediante la API REST de Jira. Adem\u00e1s, has conectado una aplicaci\u00f3n frontend React a tu aplicaci\u00f3n Express para mostrar estas incidencias en el navegador.<\/p>\n Esta aplicaci\u00f3n es una demostraci\u00f3n rudimentaria de lo que puedes conseguir con la API REST de Jira. Puedes mejorar tu aplicaci\u00f3n con funcionalidades que te permitan marcar tareas completadas, realizar filtrados avanzados y mucho m\u00e1s.<\/p>\n
\nRequisitos Previos<\/h2>\n
\n
C\u00f3mo Construir el Backend con Node.js y Express<\/h2>\n
\n
npm init -y<\/code><\/pre>\nnpm install express dotenv axios<\/code><\/pre>\n\n
express<\/a><\/code> \u2014 Un framework minimalista de Node.js para construir APIs.<\/li>\ndotenv<\/a><\/code> \u2014 Un m\u00f3dulo que carga variables .env<\/code> en process.env<\/code> para que puedas acceder a ellas de forma segura.<\/li>\naxios<\/a><\/code> \u2014 Un cliente HTTP basado en promesas para Node.js. Se utiliza para hacer llamadas API a Jira.<\/li>\n<\/ul>\n<\/li>\nPORT<\/code>:\nPORT=3000<\/code><\/pre>\nconst express = require('express');\nrequire('dotenv').config()\nconst app = express();\nconst PORT = process.env.PORT;\n\n\/\/ Define routes here\n\napp.listen(PORT, () => {\n console.log(`Server is running on port ${PORT}`);\n});<\/code><\/pre>\n<\/li>\n\"scripts\": {\n \"start\": \"node index\"\n },<\/code><\/pre>\nnpm run start<\/code><\/pre>\nServer is running on port 3000<\/code><\/pre>\nC\u00f3mo Configurar una Aplicaci\u00f3n de Jira<\/h3>\n
\n
JIRA_API_TOKEN=\"your-api-token\"<\/code><\/pre>\nConfigurar Rutas para Obtener Incidencias de Jira<\/h3>\n
process.env<\/code> y as\u00edgnalo a una variable llamada JIRA_API_TOKEN<\/code> en tu archivo index.js<\/strong>:<\/p>\nconst JIRA_API_TOKEN = process.env.JIRA_API_TOKEN<\/code><\/pre>\norg.atlassian.net<\/code>, donde org<\/code> es el nombre de tu organizaci\u00f3n. JQL, por su parte, es un lenguaje de consulta para interactuar con incidencias en Jira.<\/p>\nJIRA_DOMAIN=\"your-jira-domain\"<\/code><\/pre>\nJIRA_EMAIL=\"your-jira-email\"<\/code><\/pre>\nconst jiraDomain = process.env.JIRA_DOMAIN;\nconst email= process.env.JIRA_EMAIL;\n\nconst jql = \"status%20in%20(%22In%20progress%22%2C%20%22To%20do%22)%20OR%20assignee%20%3D%20currentUser()%20order%20by%20status\";\n \nconst apiUrl = `https:\/\/${jiraDomain}\/rest\/api\/3\/search?jql=${jql}`;<\/code><\/pre>\nconst axios = require(\"axios\")<\/code><\/pre>\napp.get('\/issues\/all', async (req, res) => {\n })<\/code><\/pre>\naxios.get<\/code> para hacer una solicitud GET a la API REST de Jira. Crea la cabecera Authorization<\/code> codificando en base64 tu correo electr\u00f3nico de Jira y el token de la API:<\/p>\nconst response = await axios.get(apiUrl, {\n headers: {\n Authorization: `Basic ${Buffer.from(\n `${email}:${JIRA_API_TOKEN}`\n ).toString(\"base64\")}`,\n Accept: \"application\/json\",\n },\n });<\/code><\/pre>\nissues<\/code>, que contiene un array de objetos issue:<\/p>\nconst data = await response.json();\nconst { issues } = data;<\/code><\/pre>\nissues<\/code>, extrae s\u00f3lo la informaci\u00f3n relevante sobre los elementos pendientes y devu\u00e9lvela en la respuesta JSON:<\/p>\nlet cleanedIssues = [];\nissues.forEach((issue) => {\n const issueData = {\n id: issue.id,\n projectName: issue.fields.project.name,\n status: issue.fields.status.name,\n deadline: issue.fields.duedate,\n };\n cleanedIssues.push(issueData);\n});\nres.status(200).json({ issues: cleanedIssues });<\/code><\/pre>\nhttp:\/\/localhost:3000\/issues\/all<\/code>, deber\u00edas recibir un objeto JSON que contenga los asuntos:<\/p>\ncurl localhost:3000\/issues\/all<\/code><\/pre>\nAloja tu Aplicaci\u00f3n Node.js en Kinsta<\/h3>\n
access-control-allow-origin<\/code>, ya que alojas el backend y el frontend en dominios diferentes. Para ello<\/p>\n\n
npm install cors<\/code><\/pre>\n<\/li>\nconst cors = require('cors')<\/code><\/pre>\n<\/li>\napp.use(cors());<\/code><\/pre>\n\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/kinsta-environment-variables.png\")
Crear una Aplicaci\u00f3n React para Mostrar las Incidencias<\/h2>\n
\n
jira-todo<\/code>:\nnpx create-vite jira-todo --template react<\/code><\/pre>\n<\/li>\nnpm install<\/code><\/pre>\n<\/li>\nnpm run dev<\/code><\/pre>\n<\/li>\n<\/ol>\nObtener Incidencias del Servidor<\/h3>\n
\n
function App() {\n\n return (\n <div className=\"App\">\n <h1>What's on my list today?<\/h1>\n {\/* Display issues *\/}\n\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n
VITE_SERVER_BASE_URL=\"your-hosted-url\"<\/code><\/pre>\n\n
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL<\/code><\/pre>\n\n
fetchData<\/code> y realiza una solicitud GET al endpoint \/issues\/all<\/code> en el servidor Express. Una vez que recibas una respuesta, anal\u00edzala como JSON y almacena los datos en un valor de estado llamado data<\/code>:<\/li>\n<\/ol>\nimport { useCallback, useEffect, useState } from \"react\";\n\nfunction App() {\n const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL\n\n const [data, setData] = useState([]);\n const fetchData = useCallback(async () => {\n try {\n const response = await fetch(`${SERVER_BASE_URL}\/issues\/all`);\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const data = await response.json();\n \tsetData(data.issues);\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n },[SERVER_BASE_URL]);\n\n useEffect(() => {\n \/\/ Fetch data when the component mounts\n fetchData();\n },[fetchData]);\n\n return (\n <div className=\"App\">\n <h1>What's on my list today?<\/h1>\n \n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\nuseEffect<\/code> para ejecutar la funci\u00f3n fetchData<\/code> cuando se monta el componente.<\/p>\nRenderizar las Incidencias desde Jira en el Navegador<\/h3>\n
\n
return (\n <div>\n <h1>What's on my list today?<\/h1>\n <section>\n \t{data && data.map(issue => {\n \treturn <div className=\"issues\" key={issue.id}>\n <div>\n <div>{issue.summary}<\/div>\n <small>{issue.deadline}<\/small>\n <\/div>\n <div>\n <div> className=\"status\">{issue.status}<\/div>\n <\/div>\n <\/div>\n })}\n <\/section>\n <\/div>\n);<\/code><\/pre>\n\n
h1 {\n text-align: center;\n font-size: 1.6rem;\n margin-top: 1rem;\n}\nsection {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: 2rem;\n }\n\n .issues {\n display: flex;\n min-width: 350px;\n justify-content: space-between;\n padding: 1rem;\n background-color: #eee;\n margin-bottom: 1rem;\n}\n\n small {\n color: gray;\n}\n\n.status-btn {\n padding: 4px;\n border: 1px solid #000;\n border-radius: 5px;\n}<\/code><\/pre>\n\n
import '.\/App.css'<\/code><\/pre>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/jira-react-application.png\")
Despliega tu Aplicaci\u00f3n React en Kinsta<\/h2>\n
\n
\n
npm run build<\/code><\/li>\n18.16.0<\/code><\/li>\ndist<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
VITE_SERVER_BASE_URL<\/code>.<\/li>\nResumen<\/h2>\n