Ce tutoriel vous guide dans le d\u00e9veloppement d’une application de liste de t\u00e2ches avec Node.js<\/a> comme serveur pour r\u00e9cup\u00e9rer les probl\u00e8mes de votre compte Jira et une application React pour les afficher. Vous apprendrez \u00e9galement \u00e0 h\u00e9berger le frontend et le serveur sur Kinsta. Pour suivre cette formation, vous avez besoin de :<\/p>\n Express<\/a> est un framework Node.js populaire qui fournit un environnement rationalis\u00e9 pour construire des applications c\u00f4t\u00e9 serveur. Express simplifie la gestion des itin\u00e9raires et facilite les interactions avec les ressources externes, telles que les API, les bases de donn\u00e9es et les applications frontales.<\/p>\n Suivez les \u00e9tapes ci-dessous pour configurer le serveur :<\/p>\n Cette commande cr\u00e9e un fichier package.json<\/strong> avec les param\u00e8tres par d\u00e9faut \u00e0 la racine du dossier de votre application.<\/li>\n La commande ci-dessus installe les \u00e9l\u00e9ments suivants :<\/p>\n Il s’agit du num\u00e9ro de port sur lequel le serveur \u00e9coute. Vous pouvez le changer pour un port de votre choix.<\/li>\n Maintenant, vous pouvez ex\u00e9cuter le script de d\u00e9marrage dans votre terminal :<\/p>\n Cette commande d\u00e9marre votre serveur. Vous devriez voir le texte suivant affich\u00e9 dans le terminal :<\/p>\n Le serveur \u00e9tant op\u00e9rationnel, vous pouvez maintenant configurer votre application Jira.<\/li>\n<\/ol>\n Pour utiliser l’API REST Jira, vous devez authentifier un compte utilisateur sur votre site Jira. L’API de l’application de t\u00e2ches que vous cr\u00e9ez utilise une authentification de base avec l’adresse e-mail d’un compte Atlassian et un jeton API.<\/p>\n Voici comment la configurer :<\/p>\n Vous pouvez maintenant acc\u00e9der \u00e0 l’API Jira \u00e0 l’aide de l’authentification de base.<\/li>\n<\/ol>\n Maintenant que vous avez configur\u00e9 une application Jira. Mettons en place des routes pour r\u00e9cup\u00e9rer les probl\u00e8mes de Jira dans votre serveur Node.js.<\/p>\n Pour lancer une requ\u00eate \u00e0 l’API Jira, vous devez utiliser le jeton API Jira que vous avez enregistr\u00e9 dans le fichier .env<\/strong>. R\u00e9cup\u00e9rez le jeton API \u00e0 l’aide de Vous devez maintenant d\u00e9finir l’URL du point de terminaison pour votre demande d’API. Cette URL contient votre domaine Jira et une instruction Jiar Query Language<\/a> (JQL). Le domaine Jira fait r\u00e9f\u00e9rence \u00e0 l’URL de votre organisation Jira et ressemble \u00e0 Commencez par ajouter le domaine Jira au fichier .env<\/strong>:<\/p>\n Vous devez \u00e9galement enregistrer votre adresse e-mail Jira dans le fichier .env<\/strong>, car elle sera utilis\u00e9e pour l’autorisation lors d’une demande \u00e0 Jira :<\/p>\n Ensuite, ajoutez les deux variables d’environnement et construisez l’URL du point final en utilisant le domaine et l’instruction JQL suivante. Cette requ\u00eate filtre les probl\u00e8mes dont le statut est \u00ab In progress \u00bb ou \u00ab To do \u00bb pour l’utilisateur connect\u00e9, puis les classe par statut :<\/p>\n Avant de cr\u00e9er une route, importez \u00e9galement Axios dans votre fichier index.js :<\/p>\n Vous pouvez maintenant cr\u00e9er une route pour effectuer une requ\u00eate GET \u00e0 l’API Jira et renvoyer les probl\u00e8mes. Dans le fichier index.js<\/strong>, ajoutez le code suivant :<\/p>\n Maintenant, utilisez la m\u00e9thode Attendez la r\u00e9ponse de l’API Jira et enregistrez-la dans une variable. La r\u00e9ponse contient une propri\u00e9t\u00e9 appel\u00e9e Ensuite, it\u00e9rez sur le tableau Si vous adressez une requ\u00eate \u00e0 Vous pouvez m\u00eame aller plus loin en utilisant un fournisseur comme SendGrid et une t\u00e2che cron pour envoyer des e-mails quotidiens contenant les t\u00e2ches qui vous ont \u00e9t\u00e9 assign\u00e9es.<\/p>\n Avant d’h\u00e9berger votre application sur Kinsta, activez le Cross-Origin Resource Sharing (CORS)<\/a> pour \u00e9viter une erreur Vous pouvez d\u00e9sormais envoyer des requ\u00eates HTTP \u00e0 votre serveur \u00e0 partir d’un domaine diff\u00e9rent sans rencontrer d’erreurs CORS.<\/li>\n<\/ol>\n Ensuite, poussez votre code vers un fournisseur Git pr\u00e9f\u00e9r\u00e9 (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>) et suivez les \u00e9tapes ci-dessous pour l’h\u00e9berger :<\/p>\n Votre serveur est maintenant d\u00e9ploy\u00e9 avec succ\u00e8s sur Kinsta. Dans le menu de gauche, cliquez sur Domaines<\/strong> et copiez le domaine primaire. Il s’agit du point d’extr\u00e9mit\u00e9 de l’URL de votre serveur.<\/p>\n Ensuite, vous utilisez React pour construire le frontend de votre application et CSS pour le styliser. Suivez les \u00e9tapes ci-dessous pour cr\u00e9er un projet React avec Vite<\/a>:<\/p>\n Notez que vous utilisez le hook D\u00e9sormais, lorsque vous d\u00e9marrez votre application, vous devriez voir appara\u00eetre dans votre navigateur une liste des t\u00e2ches qui vous ont \u00e9t\u00e9 attribu\u00e9es, avec leur statut et leur \u00e9ch\u00e9ance :<\/p>\n Pour garder les choses simples, utilisez l’h\u00e9bergement de site statique<\/a> de Kinsta pour d\u00e9ployer l’application. L’h\u00e9bergement de site statique de Kinsta aide \u00e0 construire vos sites en un site statique et d\u00e9ploie les fichiers statiques en garantissant une livraison rapide du contenu et un temps d’arr\u00eat minimal.<\/p>\n Cr\u00e9ez un d\u00e9p\u00f4t sur GitHub pour pousser votre code source<\/a>. Une fois que votre d\u00e9p\u00f4t est pr\u00eat, suivez ces \u00e9tapes pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n Et le tour est jou\u00e9 ! Vous disposez maintenant d’un site d\u00e9ploy\u00e9 en quelques secondes. Un lien est fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre site. Si vous naviguez vers le domaine de votre site, vous verrez une liste de probl\u00e8mes Jira. Vous pouvez par la suite ajouter votre domaine personnalis\u00e9<\/a> et votre certificat SSL<\/a> si vous le souhaitez.<\/p>\n Comme alternative \u00e0 l’h\u00e9bergement de site statique, vous pouvez opter pour le d\u00e9ploiement de votre site statique avec l’h\u00e9bergement d’application<\/a> de Kinsta, qui offre une plus grande flexibilit\u00e9 d’h\u00e9bergement, une plus large gamme d’avantages et l’acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes. Par exemple, l’\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l’aide d’un fichier Docker et des analyses compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques.<\/p>\n Dans ce guide, vous avez appris \u00e0 cr\u00e9er une application Express pour r\u00e9cup\u00e9rer les probl\u00e8mes Jira assign\u00e9s \u00e0 l’aide de l’API Jira REST. En outre, vous avez connect\u00e9 une application frontend React \u00e0 votre application Express pour afficher ces probl\u00e8mes dans le navigateur.<\/p>\n Cette application est une d\u00e9monstration rudimentaire de ce que vous pouvez r\u00e9aliser avec l’API REST de Jira. Vous pouvez am\u00e9liorer votre application avec des fonctionnalit\u00e9s qui vous permettent de marquer les t\u00e2ches termin\u00e9es, d’effectuer un filtrage avanc\u00e9, et bien plus encore.<\/p>\n
\nPr\u00e9-requis<\/h2>\n
\n
Comment construire le backend avec Node.js et 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 minimal pour la cr\u00e9ation d’API.<\/li>\ndotenv<\/a><\/code> – Un module qui charge les variables .env<\/code> sur process.env<\/code> pour vous permettre d’y acc\u00e9der en toute s\u00e9curit\u00e9.<\/li>\naxios<\/a><\/code> – Un client HTTP bas\u00e9 sur les promesses pour Node.js. Vous l’utilisez pour effectuer des appels API vers 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>\nComment configurer une application Jira<\/h3>\n
\n
JIRA_API_TOKEN=\"your-api-token\"<\/code><\/pre>\nConfigurer des routes pour r\u00e9cup\u00e9rer les probl\u00e8mes dans Jira<\/h3>\n
process.env<\/code> et affectez-le \u00e0 une variable nomm\u00e9e JIRA_API_TOKEN<\/code> dans votre fichier index.js<\/strong> :<\/p>\nconst JIRA_API_TOKEN = process.env.JIRA_API_TOKEN<\/code><\/pre>\norg.atlassian.net<\/code>, o\u00f9 org<\/code> est le nom de votre organisation. JQL, quant \u00e0 lui, est un langage de requ\u00eate permettant d’interagir avec les probl\u00e8mes dans 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> pour faire une requ\u00eate GET \u00e0 l’API REST Jira. Vous cr\u00e9ez l’en-t\u00eate Authorization<\/code> en encodant en base64 votre courriel Jira et votre jeton 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>, qui contient un tableau d’objets issue :<\/p>\nconst data = await response.json();\nconst { issues } = data;<\/code><\/pre>\nissues<\/code>, extrayez uniquement les informations pertinentes sur les t\u00e2ches \u00e0 effectuer et renvoyez-les dans une r\u00e9ponse 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>, vous devriez recevoir un objet JSON contenant les questions :<\/p>\ncurl localhost:3000\/issues\/all<\/code><\/pre>\nH\u00e9berger votre application Node.js sur Kinsta<\/h3>\n
access-control-allow-origin<\/code> puisque vous h\u00e9bergez le backend et le frontend sur des domaines diff\u00e9rents. Pour ce faire, proc\u00e9dez comme suit :<\/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
![\"Variables](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/kinsta-environment-variables.png\")
Cr\u00e9er une application React pour afficher les probl\u00e8mes<\/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>\nR\u00e9cup\u00e9rer les probl\u00e8mes sur le serveur<\/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> et faites une requ\u00eates GET au point de terminaison \/issues\/all<\/code> sur le serveur Express. Une fois que vous avez re\u00e7u une r\u00e9ponse, analysez-la en tant que JSON et stockez les donn\u00e9es dans une valeur d’\u00e9tat nomm\u00e9e 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> pour ex\u00e9cuter la fonction fetchData<\/code> lorsque le composant est mont\u00e9.<\/p>\nAfficher les probl\u00e8mes de Jira dans le navigateur<\/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![\"Liste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/jira-react-application.png\")
D\u00e9ployer votre application React sur 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>\nR\u00e9sum\u00e9<\/h2>\n