O Jira é uma ferramenta popular de gerenciamento de projetos que ajuda você a acompanhar as tarefas de um projeto. No entanto, quando você trabalha em um projeto grande, o painel do Jira pode ficar desorganizado à medida que o número de tarefas e membros da equipe aumenta.

Para resolver esse problema, você pode usar a API REST do Jira para gerar um aplicativo de lista de tarefas simplificado que exibe as tarefas atribuídas e seus prazos. A API permite que você interaja de forma programática com o Jira para criar, recuperar, atualizar e excluir problemas e acessar dados do usuário e detalhes do projeto.

Este tutorial orienta você no desenvolvimento de um aplicativo de lista de tarefas com o Node.js como servidor para buscar problemas da sua conta Jira e um aplicativo React para exibi-los. Você também aprenderá a hospedar o frontend e o servidor na Kinsta.

Pré-requisitos

Para acompanhar, você precisa de:

Como criar o backend com o Node.js e o Express

O Express é um framework popular do Node.js que fornece um ambiente simplificado para a criação de aplicativos no lado do servidor. O Express simplifica a manipulação de rotas e facilita as interações com recursos externos, como APIs, bancos de dados e aplicativos de frontend.

Siga as etapas abaixo para configurar o servidor:

  1. Crie um novo diretório e navegue até ele. Em seguida, inicialize o Node.js executando o comando abaixo: 
    npm init -y

    Esse comando cria um arquivo package.json com as configurações padrão na raiz da pasta do seu aplicativo.

  2. Em seguida, instale todas as dependências necessárias para seu projeto executando o seguinte comando: 
    npm install express dotenv axios

    O comando acima instala o seguinte:

    • express – Um framework mínimo do Node.js para criar APIs.
    • dotenv – Um módulo que carrega variáveis .env para process.env para permitir que você as acesse com segurança.
    • axios – Um cliente HTTP baseado em promessas para o Node.js. Você o utiliza para fazer chamadas de API para o Jira.
  3. Depois que a instalação for bem-sucedida, crie um arquivo .env na raiz do seu projeto e adicione o número PORT: 
    PORT=3000

    Esse é o número da porta que o servidor escuta. Você pode alterá-lo para uma porta de sua escolha.

  4. Crie um arquivo index.js na pasta raiz do seu projeto e adicione o seguinte código para importar o Express, criar uma instância de um aplicativo Express e iniciar o 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}`);
});
  5. Por fim, no arquivo package.json, adicione um script para iniciar o servidor: 
    "scripts": {
   "start": "node index"
  },

    Agora, você pode executar o script de inicialização no terminal:

    npm run start

    Esse comando inicia o servidor. Você deverá ver o seguinte texto registrado no terminal:

    Server is running on port 3000

    Com o servidor instalado e em execução, você pode agora configurar o aplicativo Jira.

Como configurar um aplicativo Jira

Para usar a API REST do Jira, você precisa autenticar uma conta de usuário no site do Jira. A API do aplicativo to-do que você criou usa autenticação básica com um endereço de e-mail da conta Atlassian e um token de API.

Veja como você pode configurar isso:

  1. Crie uma conta Jira ou faça login se você já tiver uma.
  2. Navegue até a seção de segurança do seu perfil da Atlassian e clique em Create API token.
  3. Na caixa de diálogo que aparece, insira um rótulo para o token (por exemplo, “jira-todo-list”) e clique em Create.
  4. Copie o token para sua área de transferência.
  5. Por fim, armazene o token de API em seu arquivo .env: 
    JIRA_API_TOKEN="your-api-token"

    Agora, você pode acessar a API do Jira usando a autenticação básica.

Configure as rotas para buscar problemas do Jira

Agora que você configurou um aplicativo Jira. Vamos configurar rotas para que você possa buscar problemas do Jira em seu servidor Node.js.

Para iniciar uma solicitação à API do Jira, você deve usar o token de API do Jira que salvou no arquivo .env. Recupere o token da API usando process.env e atribua-o a uma variável chamada JIRA_API_TOKEN em seu arquivo index.js:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Agora, você precisa definir a URL do endpoint para sua solicitação de API. Essa URL contém o domínio do Jira e uma instrução JQL (Jira Query Language). O “domínio do Jira” se refere ao endereço de URL da sua organização no Jira, que geralmente tem o formato org.atlassian.net, onde org representa o nome da sua organização. Já a JQL (Jira Query Language) é uma linguagem de consulta usada para interagir com os problemas registrados no Jira.

Comece adicionando o domínio do Jira ao arquivo .env:

JIRA_DOMAIN="your-jira-domain"

Você também precisa armazenar seu e-mail do Jira no arquivo .env, pois ele será usado para autorização ao fazer uma solicitação ao Jira:

JIRA_EMAIL="your-jira-email"

Em seguida, adicione as duas variáveis de ambiente e construa a URL do endpoint usando o domínio e a seguinte instrução JQL. Esta consulta seleciona os problemas que estão com o status “Em andamento” ou “A fazer” para o usuário conectado e, em seguida, os organiza por status.

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 criar uma rota, importe também o Axios em seu arquivo index.js:

const axios = require("axios")

Agora você pode criar uma rota para fazer uma solicitação GET à API do Jira e retornar os problemas. Em index.js, adicione o seguinte código:

app.get('/issues/all', async (req, res) => {
  })

Agora, use o método axios.get para fazer uma solicitação GET para a API REST do Jira. Você cria o cabeçalho Authorization codificando em base64 seu e-mail do Jira e o token da API:

const response = await axios.get(apiUrl, {
        headers: {
        Authorization: `Basic ${Buffer.from(
          `${email}:${JIRA_API_TOKEN}`
        ).toString("base64")}`,
        Accept: "application/json",
      },
    });

Aguarde a resposta da API do Jira e salve em uma variável. A resposta contém uma propriedade chamada issues, que contém uma array de objetos de problema:

const data = await response.json();
const { issues } = data;

Em seguida, itere sobre a array issues, extraia somente as informações relevantes sobre os itens de tarefas e retorne em uma resposta 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 });

Se você fizer uma solicitação para http://localhost:3000/issues/all, deverá receber um objeto JSON contendo os problemas:

curl localhost:3000/issues/all

Você pode até mesmo levar isso adiante usando um provedor como o SendGrid e um cron jobs para enviar e-mails diários contendo as tarefas atribuídas.

Hospede seu aplicativo Node.js na Kinsta

Antes de hospedar seu aplicativo na Kinsta, ative o CORS (Cross-Origin Resource Sharing) para evitar um erro de access-control-allow-origin, já que você hospeda o backend e o frontend em domínios diferentes. Para fazer isso, você deve:

  1. Instalar o pacote npm cors executando este comando em seu terminal: 
    npm install cors
  2. Em seguida, importar o pacote index.js. 
    const cors = require('cors')
  3. Em seguida, configurar o CORS como middleware para ativá-lo para cada solicitação de entrada. Adicione o seguinte código na parte superior do seu arquivo index.js: 
    app.use(cors());

    Agora você pode enviar solicitações HTTP ao seu servidor de um domínio diferente sem encontrar erros de CORS.

Em seguida, envie seu código para um provedor Git preferido (Bitbucket, GitHub ou GitLab) e siga as etapas abaixo para hospedá-lo:

  1. Faça login ou crie uma conta para visualizar seu painel MyKinsta.
  2. Autorize a Kinsta com seu provedor Git.
  3. Clique em Aplicativos na barra lateral esquerda e, em seguida, clique em Adicionar aplicativo.
  4. Selecione o repositório e a branch a partir da qual você deseja implantar.
  5. Atribua um nome exclusivo ao seu aplicativo e escolha um local de centro de dados.
  6. Adicione as variáveis de ambiente. Não há necessidade de adicionar o PORT como uma variável de ambiente, pois a Kinsta lida com isso automaticamente. Marque as caixas ao lado de Disponível durante o tempo de execução e Disponível durante o processo de build:

    Variáveis de ambiente do aplicativo Kinsta.
    Variáveis de ambiente do aplicativo Kinsta.

  7. Revise outras informações (você pode deixar os valores padrão) e clique em Criar aplicativo.

Agora, seu servidor foi implantado com sucesso na Kinsta. No menu à esquerda, clique em Domínios e copie o domínio principal. Esse é o endpoint de URL do seu servidor.

Crie um aplicativo React para exibir os problemas

Em seguida, você usará o React para criar o frontend do seu aplicativo e o CSS para estilizá-lo. Siga as etapas abaixo para criar um projeto React com o Vite:

  1. Crie um novo projeto React chamado jira-todo: 
    npx create-vite jira-todo --template react
  2. Navegue até o diretório do projeto e instale as dependências necessárias: 
    npm install
  3. Inicie o servidor de desenvolvimento: 
    npm run dev

Obtenha problemas do servidor

  1. Limpe o conteúdo do App.jsx e adicione o seguinte código:
function App() {

  return (
    <div className="App">
      <h1>What's on my list today?</h1>
      {/* Display issues */}

   </div>
 );
}

export default App;
  1. Antes de você começar a buscar os problemas, armazene a URL do servidor da Kinsta em um arquivo .env na raiz da pasta do seu aplicativo:
VITE_SERVER_BASE_URL="your-hosted-url"
  1. Obtenha a URL em App.jsx adicionando a seguinte linha na parte superior do arquivo:
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL
  1. Em seu componente, crie uma função assíncrona chamada fetchData e faça uma solicitação GET para o endpoint /issues/all no servidor Express. Quando você receber uma resposta, analise como JSON e armazene os dados em um valor de estado chamado data:
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;

Observe que você usa o hook useEffect para executar a função fetchData quando o componente é montado.

Renderize os problemas do Jira no navegador

  1. Agora, você pode modificar a instrução de retorno do seu componente para iterar sobre os problemas e listá-los no 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>
);
  1. Para estilizar esse aplicativo, adicione o seguinte código CSS ao 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;
}
  1. Em seguida, importe App.css em index.js para aplicar os estilos:
import './App.css'

Agora, quando você iniciar o aplicativo, deverá ver uma lista de tarefas atribuídas a você com o status e o prazo no navegador:

Lista de problemas do Jira atribuídos a um usuário.
Lista de problemas do Jira atribuídos a um usuário.

Implante seu aplicativo React na Kinsta

Para manter as coisas simples, use a Hospedagem de Site Estático da Kinsta para implantar o aplicativo. A Hospedagem de Site Estático da Kinsta ajuda você a criar seus sites em um site estático e implanta os arquivos estáticos, garantindo a entrega rápida de conteúdo e o mínimo de tempo de inatividade.

Crie um repositório no GitHub para enviar seu código-fonte. Quando seu repositório estiver pronto, siga estas etapas para implantar seu site estático na Kinsta:

  1. Faça login ou crie uma conta para visualizar seu painel MyKinsta.
  2. Autorize a Kinsta com seu provedor Git.
  3. Clique em Sites estáticos na barra lateral esquerda e, em seguida, clique em Adicionar site.
  4. Selecione o repositório e a branch a partir da qual você deseja implantar.
  5. Atribua um nome exclusivo ao seu site.
  6. O MyKinsta detecta automaticamente as configurações de build para esse projeto React. Você verá as seguintes configurações pré-preenchidas:
    • Comando build: npm run build
    • Versão do node: 18.16.0
    • Diretório de publicação: dist
  1. Adicione a URL do seu servidor como uma variável de ambiente usando VITE_SERVER_BASE_URL.
  2. Por fim, clique em Criar site.

E é isso! Agora você tem um site implantado em poucos segundos. Você receberá um link para acessar a versão implantada do seu site. Se você navegar até o domínio do seu site, verá uma lista de problemas do Jira. Posteriormente, você poderá adicionar seu domínio personalizado e o certificado SSL, se desejar.

Como alternativa à Hospedagem de Site Estático, você pode optar por implantar seu site estático com a Hospedagem de Aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benefícios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implantação personalizada usando um Dockerfile e análises abrangentes que englobam dados históricos e em tempo real.

Resumo

Neste guia, você aprendeu a criar um aplicativo Express para recuperar problemas atribuídos do Jira usando a API REST do Jira. Além disso, você conectou um aplicativo de frontend React ao seu aplicativo Express para exibir esses problemas no navegador.

Esse aplicativo é uma demonstração rudimentar do que você pode conseguir com a API REST do Jira. Você pode aprimorar seu aplicativo com funcionalidades que permitem marcar tarefas concluídas, realizar filtragem avançada e muito mais.

Além disso, com a Kinsta, você pode hospedar seu servidor e o site em um único painel usando nossos vários serviços. Confira a hospedagem web robusta e flexível da Kinsta para todos os seus aplicativos.

Jeremy Holcombe Kinsta

Editor de Conteúdo & Marketing na Kinsta, Desenvolvedor Web WordPress e Escritor de Conteúdo. Fora do universo WordPress, eu curto praia, golfe e filmes. Também enfrento problemas de gente alta ;).