Questo tutorial ci guida nello sviluppo di un’applicazione to-do list con Node.js<\/a> 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. Per seguire questo tutorial, ci serviranno:<\/p>\n Express<\/a> \u00e8 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.<\/p>\n Seguiamo questi passi per configurare il server:<\/p>\n Questo comando crea un file package.json<\/strong> con le impostazioni predefinite nella cartella principale dell’applicazione.<\/li>\n Il comando precedente installa i seguenti elementi:<\/p>\n Questo \u00e8 il numero di porta su cui il server \u00e8 in ascolto, ma \u00e8 possibile cambiarlo con una porta a nostra scelta.<\/li>\n Ora possiamo eseguire lo script di avvio nel terminale:<\/p>\n Questo comando avvia il server. Dovremmo vedere il seguente testo registrato nel terminale:<\/p>\n Con il server attivo e funzionante, possiamo ora configurare l’applicazione Jira.<\/li>\n<\/ol>\n 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.<\/p>\n Ecco come configurarla:<\/p>\n Ora possiamo accedere all’API di Jira utilizzando l’autenticazione di base.<\/li>\n<\/ol>\n Ora che abbiamo configurato un’applicazione Jira, passiamo a configurare le route per recuperare gli issue da Jira nel server Node.js.<\/p>\n Per avviare una richiesta all’API di Jira, dobbiamo utilizzare il token API di Jira che abbiamo salvato nel file .env<\/strong>. Recuperiamo il token API con 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)<\/a>. Il dominio Jira si riferisce all’URL della nostra organizzazione Jira e assomiglia a Iniziamo aggiungendo il dominio Jira al file .env<\/strong>:<\/p>\n Dobbiamo anche inserire il nostro indirizzo e-mail di Jira nel file .env<\/strong> perch\u00e9 sar\u00e0 utilizzato per l’autorizzazione quando faremo una richiesta a Jira:<\/p>\n 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:<\/p>\n Prima di creare una route, importiamo Axios nel file index.js:<\/p>\n Ora possiamo creare una route che faccia una richiesta GET all’API di Jira e restituisca gli issue. In index.js<\/strong> aggiungiamo il seguente codice:<\/p>\n Ora utilizziamo il metodo Attendiamo la risposta dell’API di Jira e salviamola in una variabile. La risposta contiene una propriet\u00e0 chiamata Quindi, iteriamo sull’array Facendo una richiesta a Possiamo anche andare oltre, utilizzando un provider come SendGrid e un cron job per inviare email giornaliere contenenti i compiti assegnati.<\/p>\n Prima di ospitare la nostra applicazione su Kinsta, abilitiamo il Cross-Origin Resource Sharing (CORS)<\/a> per evitare che si verifichi un errore Ora possiamo inviare richieste HTTP al server da un dominio diverso senza incorrere in errori CORS.<\/li>\n<\/ol>\n Successivamente, inviamo il codice al nostro provider Git preferito (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>) e seguiamo i passaggi qui sotto per ospitarlo:<\/p>\n Il nostro server \u00e8 ora distribuito con successo su Kinsta. Nel menu di sinistra, clicchiamo su Domini<\/strong> e copiamo il dominio primario. Questo \u00e8 l’endpoint URL del nostro server.<\/p>\n 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<\/a>:<\/p>\n Notete che utilizziamo l’hook 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:<\/p>\n Per non complicarci troppo la vita, useremo l’Hosting di Siti Statici<\/a> 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\u00e0 minimi.<\/p>\n Creiamo un repository su GitHub per distribuire il nostro codice sorgente<\/a>. Quando il repository sar\u00e0 pronto, baster\u00e0 seguire questi passaggi per distribuire il nostro sito statico su Kinsta:<\/p>\n E il gioco \u00e8 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, \u00e8 possibile aggiungere un dominio personalizzato<\/a> e un certificato SSL<\/a>.<\/p>\n In alternativa all’hosting statico, possiamo scegliere di distribuire il nostro sito statico con l’Hosting di Applicazioni<\/a> di Kinsta, che offre una maggiore flessibilit\u00e0 di hosting, una gamma pi\u00f9 ampia di vantaggi e l’accesso a funzioni pi\u00f9 robuste. Tra queste, la scalabilit\u00e0, la distribuzione personalizzata tramite un Dockerfile e l’analisi completa<\/a> dei dati storici e in tempo reale.<\/p>\n 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.<\/p>\n Questa applicazione \u00e8 una dimostrazione rudimentale di ci\u00f2 che si pu\u00f2 ottenere con Jira REST API. \u00c8 possibile migliorare l’applicazione con funzionalit\u00e0 che permettono di contrassegnare le attivit\u00e0 completate, eseguire filtri avanzati e molto altro ancora.<\/p>\n
\nPrerequisiti<\/h2>\n
\n
Come costruire il backend con Node.js ed Express<\/h2>\n
\n
npm init -y<\/code><\/pre>\nnpm install express dotenv axios<\/code><\/pre>\n\n
express<\/a><\/code>: un framework Node.js di base per la creazione di API.<\/li>\ndotenv<\/a><\/code>: un modulo che carica le variabili di .env<\/code> su process.env<\/code> per consentire di accedervi in modo sicuro.<\/li>\naxios<\/a><\/code>: un client HTTP basato su promesse per Node.js. Viene utilizzato per effettuare chiamate 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>\nCome configurare un’app Jira<\/h3>\n
\n
JIRA_API_TOKEN=\"your-api-token\"<\/code><\/pre>\nImpostare le route per recuperare gli issue da Jira<\/h3>\n
process.env<\/code> e assegniamolo a una variabile chiamata JIRA_API_TOKEN<\/code> nel file index.js<\/strong>:<\/p>\nconst JIRA_API_TOKEN = process.env.JIRA_API_TOKEN<\/code><\/pre>\norg.atlassian.net<\/code>, dove org<\/code> \u00e8 il nome della nostra organizzazione. Il JQL, invece, \u00e8 un linguaggio di interrogazione per interagire con gli issue in 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> per effettuare una richiesta GET all’API REST di Jira. Creiamo l’intestazione Authorization<\/code> codificando in base64 l’email e il token API di Jira:<\/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>, che contiene un array di oggetti issue:<\/p>\nconst data = await response.json();\nconst { issues } = data;<\/code><\/pre>\nissues<\/code>, estraiamo solo le informazioni rilevanti sulle cose da fare e le restituiamo nella risposta 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>, dovremmo ricevere un oggetto JSON contenente gli issue:<\/p>\ncurl localhost:3000\/issues\/all<\/code><\/pre>\nOspitare l’applicazione Node.js su Kinsta<\/h3>\n
access-control-allow-origin<\/code> poich\u00e9 il backend e il frontend sono ospitati su domini diversi. Per farlo:<\/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\")
Creare un’applicazione React per visualizzare gli issue<\/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>\nRecuperiamo gli issue dal server<\/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> ed effettuiamo una richiesta GET all’endpoint \/issues\/all<\/code> sul server Express. Una volta ricevuta la risposta, effettuiamone il parsing come JSON e memorizziamone i dati in un valore di stato chiamato 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 setData(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> per eseguire la funzione fetchData<\/code> quando il componente viene montato.<\/p>\nVisualizzare gli issue da Jira nel browser<\/h3>\n
\n
return (\n <div>\n <h1>What's on my list today?<\/h1>\n <section>\n {data && data.map(issue => {\n return <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![\"Uno](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/jira-react-application.png\")
Distribuire un’applicazione React su 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>\nRiepilogo<\/h2>\n