Jira è un popolare strumento di gestione dei progetti che aiuta a tenere traccia delle attività all’interno di un progetto. Tuttavia, quando si lavora a un progetto di grandi dimensioni, la dashboard di Jira può diventare caotica con l’aumentare del numero di attività e di membri del team.

Per ovviare a questo problema, si può utilizzare l’API REST di Jira per generare un’applicazione to-do list semplificata che mostra le attività assegnate e le relative scadenze. L’API permette di interagire programmaticamente con Jira per creare, recuperare, aggiornare e cancellare issue e accedere ai dati degli utenti e ai dettagli del progetto.

Questo tutorial ci guida nello sviluppo di un’applicazione to-do list con Node.js come server per recuperare gli issue dall’account Jira e un’applicazione React per visualizzarli. Scopriremo anche come ospitare sia il frontend che il server su Kinsta.

Prerequisiti

Per seguire questo tutorial, ci serviranno:

Come costruire il backend con Node.js ed Express

Express è un popolare framework Node.js che fornisce un ambiente semplificato per la creazione di applicazioni lato server. Express semplifica la gestione delle route e facilita le interazioni con risorse esterne, come API, database e applicazioni frontend.

Seguiamo questi passi per configurare il server:

  1. Creiamo una nuova directory e navighiamo al suo interno. Poi, inizializziamo Node.js eseguendo il comando seguente: 
    npm init -y

    Questo comando crea un file package.json con le impostazioni predefinite nella cartella principale dell’applicazione.

  2. Successivamente, installiamo tutte le dipendenze necessarie per il progetto eseguendo il comando: 
    npm install express dotenv axios

    Il comando precedente installa i seguenti elementi:

    • express: un framework Node.js di base per la creazione di API.
    • dotenv: un modulo che carica le variabili di .env su process.env per consentire di accedervi in modo sicuro.
    • axios: un client HTTP basato su promesse per Node.js. Viene utilizzato per effettuare chiamate API a Jira.
  3. Una volta completata l’installazione, creiamo un file .env nella root del progetto e aggiungiamo il numero per PORT: 
    PORT=3000

    Questo è il numero di porta su cui il server è in ascolto, ma è possibile cambiarlo con una porta a nostra scelta.

  4. Creiamo un file index.js nella cartella principale del progetto e aggiungiamo il seguente codice per importare Express, creare un’istanza di un’applicazione Express e avviare il server: 
    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. Infine, nel file package.json, aggiungiamo uno script per avviare il server: 
    "scripts": {
   "start": "node index"
  },

    Ora possiamo eseguire lo script di avvio nel terminale:

    npm run start

    Questo comando avvia il server. Dovremmo vedere il seguente testo registrato nel terminale:

    Server is running on port 3000

    Con il server attivo e funzionante, possiamo ora configurare l’applicazione Jira.

Come configurare un’app Jira

Per utilizzare l’API REST di Jira, dobbiamo autenticare un account utente con il sito Jira. L’API dell’app to-do che abbiamo creato utilizza l’autenticazione di base con un indirizzo e-mail e un token API dell’account Atlassian.

Ecco come configurarla:

  1. Creiamo un account Jira o accediamo se ne abbiamo già uno.
  2. Andiamo alla sezione sicurezza del profilo Atlassian e clicchiamo su Crea token API.
  3. Nella finestra di dialogo che appare, inseriamo un’etichetta per il token (ad esempio, “jira-todo-list”) e clicchiamo su Crea.
  4. Copiamo il token negli appunti.
  5. Infine, memorizziamo il token API nel file .env: 
    JIRA_API_TOKEN="your-api-token"

    Ora possiamo accedere all’API di Jira utilizzando l’autenticazione di base.

Impostare le route per recuperare gli issue da Jira

Ora che abbiamo configurato un’applicazione Jira, passiamo a configurare le route per recuperare gli issue da Jira nel server Node.js.

Per avviare una richiesta all’API di Jira, dobbiamo utilizzare il token API di Jira che abbiamo salvato nel file .env. Recuperiamo il token API con process.env e assegniamolo a una variabile chiamata JIRA_API_TOKEN nel file index.js:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Ora dobbiamo definire l’URL dell’endpoint per la nostra richiesta API. Questo URL contiene il nostro dominio Jira e una dichiarazione JQL (Jira Query Language). Il dominio Jira si riferisce all’URL della nostra organizzazione Jira e assomiglia a org.atlassian.net, dove org è il nome della nostra organizzazione. Il JQL, invece, è un linguaggio di interrogazione per interagire con gli issue in Jira.

Iniziamo aggiungendo il dominio Jira al file .env:

JIRA_DOMAIN="your-jira-domain"

Dobbiamo anche inserire il nostro indirizzo e-mail di Jira nel file .env perché sarà utilizzato per l’autorizzazione quando faremo una richiesta a Jira:

JIRA_EMAIL="your-jira-email"

Quindi, aggiungiamo entrambe le variabili d’ambiente e costruiamo l’URL dell’endpoint utilizzando il dominio e la seguente istruzione JQL. Questa query filtra gli issue con stato “In corso” o “Da fare” per l’utente connesso e li ordina in base allo stato:

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}`;

Prima di creare una route, importiamo Axios nel file index.js:

const axios = require("axios")

Ora possiamo creare una route che faccia una richiesta GET all’API di Jira e restituisca gli issue. In index.js aggiungiamo il seguente codice:

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

Ora utilizziamo il metodo axios.get per effettuare una richiesta GET all’API REST di Jira. Creiamo l’intestazione Authorization codificando in base64 l’email e il token API di Jira:

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

Attendiamo la risposta dell’API di Jira e salviamola in una variabile. La risposta contiene una proprietà chiamata issues, che contiene un array di oggetti issue:

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

Quindi, iteriamo sull’array issues, estraiamo solo le informazioni rilevanti sulle cose da fare e le restituiamo nella risposta 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 });

Facendo una richiesta a http://localhost:3000/issues/all, dovremmo ricevere un oggetto JSON contenente gli issue:

curl localhost:3000/issues/all

Possiamo anche andare oltre, utilizzando un provider come SendGrid e un cron job per inviare email giornaliere contenenti i compiti assegnati.

Ospitare l’applicazione Node.js su Kinsta

Prima di ospitare la nostra applicazione su Kinsta, abilitiamo il Cross-Origin Resource Sharing (CORS) per evitare che si verifichi un errore access-control-allow-origin poiché il backend e il frontend sono ospitati su domini diversi. Per farlo:

  1. Installiamo il pacchetto cors npm eseguendo questo comando nel terminale: 
    npm install cors
  2. Quindi, importiamo il pacchetto in index.js. 
    const cors = require('cors')
  3. Poi, configuriamo CORS come middleware per attivarlo per ogni richiesta in arrivo. Aggiungiamo il seguente codice all’inizio del file index.js: 
    app.use(cors());

    Ora possiamo inviare richieste HTTP al server da un dominio diverso senza incorrere in errori CORS.

Successivamente, inviamo il codice al nostro provider Git preferito (Bitbucket, GitHub o GitLab) e seguiamo i passaggi qui sotto per ospitarlo:

  1. Accediamo o creiamo un account per visualizzare la nostra dashboard MyKinsta.
  2. Autorizziamo Kinsta con il nostro provider Git.
  3. Clicchiamo su Applicazioni nella barra laterale di sinistra e poi su Aggiungi applicazione.
  4. Selezioniamo il repository e il branch da cui desideriamo effettuare il deploy.
  5. Assegniamo un nome unico alla nostra applicazione e scegliamo la posizione del data center.
  6. Aggiungiamo le variabili d’ambiente. Non è necessario aggiungere PORT come variabile d’ambiente, perché Kinsta la gestisce automaticamente. Spuntiamo le caselle accanto a Disponibile durante il runtime e Disponibile durante il processo di build:

    Un modulo per aggiungere coppie chiave-valore di variabili d'ambiente
    Variabili d’ambiente dell’applicazione Kinsta.

  7. Controlliamo le altre informazioni (possiamo lasciare i valori predefiniti) e clicchiamo su Crea applicazione.

Il nostro server è ora distribuito con successo su Kinsta. Nel menu di sinistra, clicchiamo su Domini e copiamo il dominio primario. Questo è l’endpoint URL del nostro server.

Creare un’applicazione React per visualizzare gli issue

Successivamente, utilizzeremo React per creare il frontend dell’applicazione e il CSS per crearne lo stile. Usiamo i passi seguenti per creare un progetto React con Vite:

  1. Creiamo un nuovo progetto React chiamato jira-todo: 
    npx create-vite jira-todo --template react
  2. Navighiamo nella directory del progetto e installiamo le dipendenze necessarie: 
    npm install
  3. Avviamo il server di sviluppo: 
    npm run dev

Recuperiamo gli issue dal server

  1. Cancelliamo il contenuto di App.jsx e aggiungiamo il seguente codice:
function App() {

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

   </div>
 );
}

export default App;
  1. Prima di iniziare a recuperare gli issue, memorizziamo l’URL del server di Kinsta in un file .env nella cartella principale dell’applicazione:
VITE_SERVER_BASE_URL="your-hosted-url"
  1. Ottieniamo l’URL in App.jsx aggiungendo la seguente riga all’inizio del file:
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL
  1. Nel nostro componente, creiamo una funzione async denominata fetchData ed effettuiamo una richiesta GET all’endpoint /issues/all sul server Express. Una volta ricevuta la risposta, effettuiamone il parsing come JSON e memorizziamone i dati in un valore di stato chiamato 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;

Notete che utilizziamo l’hook useEffect per eseguire la funzione fetchData quando il componente viene montato.

Visualizzare gli issue da Jira nel browser

  1. Ora possiamo modificare la dichiarazione di ritorno del componente per iterare gli issue ed elencarli nel browser:
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. Per creare lo stile di questa applicazione, aggiungiamo il seguente codice 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;
}
  1. Quindi, importiamo App.css in index.js per applicare gli stili:
import './App.css'

Ora, quando avviamo l’applicazione, dovremmo vedere nel browser l’elenco dei compiti che ci sono stati assegnati con il loro stato e la loro scadenza:

Uno screenshot della pagina dell'applicazione React
Elenco degli issue Jira assegnati a un utente.

Distribuire un’applicazione React su Kinsta

Per non complicarci troppo la vita, useremo l’Hosting di Siti Statici di Kinsta per distribuire l’applicazione. L’Hosting di Siti Statici di Kinsta aiuta a creare un sito statico e a distribuire i file statici per garantire una distribuzione rapida dei contenuti e tempi di inattività minimi.

Creiamo un repository su GitHub per distribuire il nostro codice sorgente. Quando il repository sarà pronto, basterà seguire questi passaggi per distribuire il nostro sito statico su Kinsta:

  1. Accediamo o creiamo un account per visualizzare la dashboard MyKinsta.
  2. Autorizziamo Kinsta con il nostro provider Git.
  3. Clicchiamo su Siti statici nella barra laterale di sinistra e poi su Aggiungi sito.
  4. Selezioniamo il repository e il branch da cui desideriamo effettuare il deploy.
  5. Assegniamo un nome unico al sito.
  6. MyKinsta rileva automaticamente le impostazioni di build per questo progetto React. Vedramo le seguenti impostazioni precompilate:
    • Comando di build: npm run build
    • Versione Node: 18.16.0
    • Directory di pubblicazione: dist
  1. Aggiungiamo l’URL del server come variabile d’ambiente usando VITE_SERVER_BASE_URL.
  2. Infine, clicchiamo su Crea sito.

E il gioco è fatto! In pochi secondi avremo un sito distribuito e un link per accedere alla versione distribuita del sito. Se navighiamo sul dominio del sito, vedremo un elenco di issue di Jira. Per chi lo desidera, è possibile aggiungere un dominio personalizzato e un certificato SSL.

In alternativa all’hosting statico, possiamo scegliere di distribuire il nostro sito statico con l’Hosting di Applicazioni di Kinsta, che offre una maggiore flessibilità di hosting, una gamma più ampia di vantaggi e l’accesso a funzioni più robuste. Tra queste, la scalabilità, la distribuzione personalizzata tramite un Dockerfile e l’analisi completa dei dati storici e in tempo reale.

Riepilogo

In questa guida abbiamo imparato a creare un’applicazione Express per recuperare gli issue Jira assegnati utilizzando l’API REST di Jira. Inoltre, abbiamo collegato un’applicazione frontend React alla nostra applicazione Express per visualizzare questi issue nel browser.

Questa applicazione è una dimostrazione rudimentale di ciò che si può ottenere con Jira REST API. È possibile migliorare l’applicazione con funzionalità che permettono di contrassegnare le attività completate, eseguire filtri avanzati e molto altro ancora.

Inoltre, con Kinsta si possono ospitare sia il server che il sito in un’unica dashboard utilizzando i nostri servizi. Date un’occhiata al web hosting di Kinsta, solido e flessibile per tutte le vostre applicazioni.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).