Este tutorial orienta voc\u00ea no desenvolvimento de um aplicativo de lista de tarefas com o Node.js<\/a> como servidor para buscar problemas da sua conta Jira e um aplicativo React para exibi-los. Voc\u00ea tamb\u00e9m aprender\u00e1 a hospedar o frontend e o servidor na Kinsta. Para acompanhar, voc\u00ea precisa de:<\/p>\n O Express<\/a> \u00e9 um framework popular do Node.js que fornece um ambiente simplificado para a cria\u00e7\u00e3o de aplicativos no lado do servidor. O Express simplifica a manipula\u00e7\u00e3o de rotas e facilita as intera\u00e7\u00f5es com recursos externos, como APIs, bancos de dados e aplicativos de frontend.<\/p>\n Siga as etapas abaixo para configurar o servidor:<\/p>\n Esse comando cria um arquivo package.json<\/strong> com as configura\u00e7\u00f5es padr\u00e3o na raiz da pasta do seu aplicativo.<\/li>\n O comando acima instala o seguinte:<\/p>\n Esse \u00e9 o n\u00famero da porta que o servidor escuta. Voc\u00ea pode alter\u00e1-lo para uma porta de sua escolha.<\/li>\n Agora, voc\u00ea pode executar o script de inicializa\u00e7\u00e3o no terminal:<\/p>\n Esse comando inicia o servidor. Voc\u00ea dever\u00e1 ver o seguinte texto registrado no terminal:<\/p>\n Com o servidor instalado e em execu\u00e7\u00e3o, voc\u00ea pode agora configurar o aplicativo Jira.<\/li>\n<\/ol>\n Para usar a API REST do Jira, voc\u00ea precisa autenticar uma conta de usu\u00e1rio no site do Jira. A API do aplicativo to-do que voc\u00ea criou usa autentica\u00e7\u00e3o b\u00e1sica com um endere\u00e7o de e-mail da conta Atlassian e um token de API.<\/p>\n Veja como voc\u00ea pode configurar isso:<\/p>\n Agora, voc\u00ea pode acessar a API do Jira usando a autentica\u00e7\u00e3o b\u00e1sica.<\/li>\n<\/ol>\n Agora que voc\u00ea configurou um aplicativo Jira. Vamos configurar rotas para que voc\u00ea possa buscar problemas do Jira em seu servidor Node.js.<\/p>\n Para iniciar uma solicita\u00e7\u00e3o \u00e0 API do Jira, voc\u00ea deve usar o token de API do Jira que salvou no arquivo .env<\/strong>. Recupere o token da API usando Agora, voc\u00ea precisa definir a URL do endpoint para sua solicita\u00e7\u00e3o de API. Essa URL cont\u00e9m o dom\u00ednio do Jira e uma instru\u00e7\u00e3o JQL (Jira\u00a0Query Language<\/a>). O “dom\u00ednio do Jira” se refere ao endere\u00e7o de URL da sua organiza\u00e7\u00e3o no Jira, que geralmente tem o formato Comece adicionando o dom\u00ednio do Jira ao arquivo .env<\/strong>:<\/p>\n Voc\u00ea tamb\u00e9m precisa armazenar seu e-mail do Jira no arquivo .env<\/strong>, pois ele ser\u00e1 usado para autoriza\u00e7\u00e3o ao fazer uma solicita\u00e7\u00e3o ao Jira:<\/p>\n Em seguida, adicione as duas vari\u00e1veis de ambiente e construa a URL do endpoint usando o dom\u00ednio e a seguinte instru\u00e7\u00e3o JQL. Esta consulta seleciona os problemas que est\u00e3o com o status “Em andamento” ou “A fazer” para o usu\u00e1rio conectado e, em seguida, os organiza por status.<\/p>\n Antes de criar uma rota, importe tamb\u00e9m o Axios em seu arquivo index.js:<\/p>\n Agora voc\u00ea pode criar uma rota para fazer uma solicita\u00e7\u00e3o GET \u00e0 API do Jira e retornar os problemas. Em index.js<\/strong>, adicione o seguinte c\u00f3digo:<\/p>\n Agora, use o m\u00e9todo Aguarde a resposta da API do Jira e salve em uma vari\u00e1vel. A resposta cont\u00e9m uma propriedade chamada Em seguida, itere sobre a array Se voc\u00ea fizer uma solicita\u00e7\u00e3o para Voc\u00ea pode at\u00e9 mesmo levar isso adiante usando um provedor como o SendGrid e um cron jobs para enviar e-mails di\u00e1rios contendo as tarefas atribu\u00eddas.<\/p>\n Antes de hospedar seu aplicativo na Kinsta, ative o CORS (Cross-Origin Resource Sharing)<\/a> para evitar um erro de Agora voc\u00ea pode enviar solicita\u00e7\u00f5es HTTP ao seu servidor de um dom\u00ednio diferente sem encontrar erros de CORS.<\/li>\n<\/ol>\n Em seguida, envie seu c\u00f3digo para um provedor Git preferido (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>) e siga as etapas abaixo para hosped\u00e1-lo:<\/p>\n Agora, seu servidor foi implantado com sucesso na Kinsta. No menu \u00e0 esquerda, clique em Dom\u00ednios <\/strong>e copie o dom\u00ednio principal. Esse \u00e9 o endpoint de URL do seu servidor.<\/p>\n Em seguida, voc\u00ea usar\u00e1 o React para criar o frontend do seu aplicativo e o CSS para estiliz\u00e1-lo. Siga as etapas abaixo para criar um projeto React com o Vite<\/a>:<\/p>\n Observe que voc\u00ea usa o hook Agora, quando voc\u00ea iniciar o aplicativo, dever\u00e1 ver uma lista de tarefas atribu\u00eddas a voc\u00ea com o status e o prazo no navegador:<\/p>\n Para manter as coisas simples, use a Hospedagem de Site Est\u00e1tico<\/a> da Kinsta para implantar o aplicativo. A Hospedagem de Site Est\u00e1tico da Kinsta ajuda voc\u00ea a criar seus sites em um site est\u00e1tico e implanta os arquivos est\u00e1ticos, garantindo a entrega r\u00e1pida de conte\u00fado e o m\u00ednimo de tempo de inatividade.<\/p>\n Crie um reposit\u00f3rio no GitHub para enviar seu c\u00f3digo-fonte<\/a>. Quando seu reposit\u00f3rio estiver pronto, siga estas etapas para implantar seu site est\u00e1tico na Kinsta:<\/p>\n E \u00e9 isso! Agora voc\u00ea tem um site implantado em poucos segundos. Voc\u00ea receber\u00e1 um link para acessar a vers\u00e3o implantada do seu site. Se voc\u00ea navegar at\u00e9 o dom\u00ednio do seu site, ver\u00e1 uma lista de problemas do Jira. Posteriormente, voc\u00ea poder\u00e1 adicionar seu dom\u00ednio personalizado<\/a> e o certificado SSL<\/a>, se desejar.<\/p>\n Como alternativa \u00e0 Hospedagem de Site Est\u00e1tico, voc\u00ea pode optar por implantar seu site est\u00e1tico com a Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implanta\u00e7\u00e3o personalizada usando um Dockerfile e an\u00e1lises abrangentes<\/a> que englobam dados hist\u00f3ricos e em tempo real.<\/p>\n Neste guia, voc\u00ea aprendeu a criar um aplicativo Express para recuperar problemas atribu\u00eddos do Jira usando a API REST do Jira. Al\u00e9m disso, voc\u00ea conectou um aplicativo de frontend React ao seu aplicativo Express para exibir esses problemas no navegador.<\/p>\n Esse aplicativo \u00e9 uma demonstra\u00e7\u00e3o rudimentar do que voc\u00ea pode conseguir com a API REST do Jira. Voc\u00ea pode aprimorar seu aplicativo com funcionalidades que permitem marcar tarefas conclu\u00eddas, realizar filtragem avan\u00e7ada e muito mais.<\/p>\n
\nPr\u00e9-requisitos<\/h2>\n
\n
Como criar o backend com o Node.js e o Express<\/h2>\n
\n
npm init -y<\/code><\/pre>\nnpm install express dotenv axios<\/code><\/pre>\n\n
express<\/a><\/code> – Um framework m\u00ednimo do Node.js para criar APIs.<\/li>\ndotenv<\/a><\/code> – Um m\u00f3dulo que carrega vari\u00e1veis .env<\/code> para process.env<\/code> para permitir que voc\u00ea as acesse com seguran\u00e7a.<\/li>\naxios<\/a><\/code> – Um cliente HTTP baseado em promessas para o Node.js. Voc\u00ea o utiliza para fazer chamadas de API para o 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>\nComo configurar um aplicativo Jira<\/h3>\n
\n
JIRA_API_TOKEN=\"your-api-token\"<\/code><\/pre>\nConfigure as rotas para buscar problemas do Jira<\/h3>\n
process.env<\/code> e atribua-o a uma vari\u00e1vel chamada JIRA_API_TOKEN<\/code> em seu arquivo index.js<\/strong>:<\/p>\nconst JIRA_API_TOKEN = process.env.JIRA_API_TOKEN<\/code><\/pre>\norg.atlassian.net<\/code>, onde org<\/code> representa o nome da sua organiza\u00e7\u00e3o. J\u00e1 a JQL (Jira Query Language) \u00e9 uma linguagem de consulta usada para interagir com os problemas registrados no 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 fazer uma solicita\u00e7\u00e3o GET para a API REST do Jira. Voc\u00ea cria o cabe\u00e7alho Authorization<\/code> codificando em base64 seu e-mail do Jira e o token da 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 cont\u00e9m uma array de objetos de problema:<\/p>\nconst data = await response.json();\nconst { issues } = data;<\/code><\/pre>\nissues<\/code>, extraia somente as informa\u00e7\u00f5es relevantes sobre os itens de tarefas e retorne em uma resposta 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>, dever\u00e1 receber um objeto JSON contendo os problemas:<\/p>\ncurl localhost:3000\/issues\/all<\/code><\/pre>\nHospede seu aplicativo Node.js na Kinsta<\/h3>\n
access-control-allow-origin<\/code>, j\u00e1 que voc\u00ea hospeda o backend e o frontend em dom\u00ednios diferentes. Para fazer isso, voc\u00ea deve:<\/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
![\"Vari\u00e1veis](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/kinsta-environment-variables.png\")
Crie um aplicativo React para exibir os problemas<\/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>\nObtenha problemas do 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> e fa\u00e7a uma solicita\u00e7\u00e3o GET para o endpoint \/issues\/all<\/code> no servidor Express. Quando voc\u00ea receber uma resposta, analise como JSON e armazene os dados em um valor de estado chamado 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 executar a fun\u00e7\u00e3o fetchData<\/code> quando o componente \u00e9 montado.<\/p>\nRenderize os problemas do Jira no 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![\"Lista](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/jira-react-application.png\")
Implante seu aplicativo React na 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>\nResumo<\/h2>\n