Jira est un outil de gestion de projet très répandu qui vous aide à assurer le suivi des tâches au sein d’un projet. Cependant, lorsque vous travaillez sur un projet de grande envergure, votre tableau de bord Jira peut devenir encombré à mesure que le nombre de tâches et de membres de l’équipe augmente.
Pour remédier à ce problème, vous pouvez utiliser l’API REST de Jira pour générer une application simplifiée de liste de tâches qui affiche les tâches qui vous ont été attribuées et leurs échéances. L’API vous permet d’interagir de manière programmatique avec Jira pour créer, récupérer, mettre à jour et supprimer des problèmes et accéder aux données des utilisateurs et aux détails des projets.
Ce tutoriel vous guide dans le développement d’une application de liste de tâches avec Node.js comme serveur pour récupérer les problèmes de votre compte Jira et une application React pour les afficher. Vous apprendrez également à héberger le frontend et le serveur sur Kinsta.
Pré-requis
Pour suivre cette formation, vous avez besoin de :
- Node.js et Node Package Manager (npm) installés sur votre machine de développement.
- Un compte Jira pour accéder aux tâches.
- Une solide compréhension de Node.js et de React.
Comment construire le backend avec Node.js et Express
Express est un framework Node.js populaire qui fournit un environnement rationalisé pour construire des applications côté serveur. Express simplifie la gestion des itinéraires et facilite les interactions avec les ressources externes, telles que les API, les bases de données et les applications frontales.
Suivez les étapes ci-dessous pour configurer le serveur :
- Créez un nouveau répertoire et accédez-y. Ensuite, initialisez Node.js en exécutant la commande ci-dessous :
npm init -yCette commande crée un fichier package.json avec les paramètres par défaut à la racine du dossier de votre application.
- Ensuite, installez toutes les dépendances nécessaires à votre projet en exécutant la commande suivante :
npm install express dotenv axiosLa commande ci-dessus installe les éléments suivants :
- Une fois l’installation réussie, créez un fichier .env à la racine de votre projet et ajoutez le numéro
PORT:PORT=3000Il s’agit du numéro de port sur lequel le serveur écoute. Vous pouvez le changer pour un port de votre choix.
- Créez un fichier index.js dans le dossier racine de votre projet et ajoutez le code suivant pour importer Express, créer une instance d’application Express et démarrer votre serveur :
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}`); }); - Enfin, dans votre fichier package.json, ajoutez un script pour démarrer votre serveur :
"scripts": { "start": "node index" },Maintenant, vous pouvez exécuter le script de démarrage dans votre terminal :
npm run startCette commande démarre votre serveur. Vous devriez voir le texte suivant affiché dans le terminal :
Server is running on port 3000Le serveur étant opérationnel, vous pouvez maintenant configurer votre application Jira.
Comment configurer une application Jira
Pour utiliser l’API REST Jira, vous devez authentifier un compte utilisateur sur votre site Jira. L’API de l’application de tâches que vous créez utilise une authentification de base avec l’adresse e-mail d’un compte Atlassian et un jeton API.
Voici comment la configurer :
- Créez un compte Jira ou connectez-vous si vous en avez un.
- Accédez à la section sécurité de votre profil Atlassian et cliquez sur Créer un jeton API.
- Dans la boîte de dialogue qui s’affiche, saisissez un libellé pour votre jeton (par exemple, « jira-todo-list ») et cliquez sur Créer.
- Copiez le jeton dans votre presse-papiers.
- Enfin, stockez le jeton API dans votre fichier .env:
JIRA_API_TOKEN="your-api-token"Vous pouvez maintenant accéder à l’API Jira à l’aide de l’authentification de base.
Configurer des routes pour récupérer les problèmes dans Jira
Maintenant que vous avez configuré une application Jira. Mettons en place des routes pour récupérer les problèmes de Jira dans votre serveur Node.js.
Pour lancer une requête à l’API Jira, vous devez utiliser le jeton API Jira que vous avez enregistré dans le fichier .env. Récupérez le jeton API à l’aide de process.env et affectez-le à une variable nommée JIRA_API_TOKEN dans votre fichier index.js :
const JIRA_API_TOKEN = process.env.JIRA_API_TOKENVous devez maintenant définir l’URL du point de terminaison pour votre demande d’API. Cette URL contient votre domaine Jira et une instruction Jiar Query Language (JQL). Le domaine Jira fait référence à l’URL de votre organisation Jira et ressemble à org.atlassian.net, où org est le nom de votre organisation. JQL, quant à lui, est un langage de requête permettant d’interagir avec les problèmes dans Jira.
Commencez par ajouter le domaine Jira au fichier .env:
JIRA_DOMAIN="your-jira-domain"Vous devez également enregistrer votre adresse e-mail Jira dans le fichier .env, car elle sera utilisée pour l’autorisation lors d’une demande à Jira :
JIRA_EMAIL="your-jira-email"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ête filtre les problèmes dont le statut est « In progress » ou « To do » pour l’utilisateur connecté, puis les classe par statut :
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}`;Avant de créer une route, importez également Axios dans votre fichier index.js :
const axios = require("axios")Vous pouvez maintenant créer une route pour effectuer une requête GET à l’API Jira et renvoyer les problèmes. Dans le fichier index.js, ajoutez le code suivant :
app.get('/issues/all', async (req, res) => {
})Maintenant, utilisez la méthode axios.get pour faire une requête GET à l’API REST Jira. Vous créez l’en-tête Authorization en encodant en base64 votre courriel Jira et votre jeton API :
const response = await axios.get(apiUrl, {
headers: {
Authorization: `Basic ${Buffer.from(
`${email}:${JIRA_API_TOKEN}`
).toString("base64")}`,
Accept: "application/json",
},
});Attendez la réponse de l’API Jira et enregistrez-la dans une variable. La réponse contient une propriété appelée issues, qui contient un tableau d’objets issue :
const data = await response.json();
const { issues } = data;Ensuite, itérez sur le tableau issues, extrayez uniquement les informations pertinentes sur les tâches à effectuer et renvoyez-les dans une réponse 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 });Si vous adressez une requête à http://localhost:3000/issues/all, vous devriez recevoir un objet JSON contenant les questions :
curl localhost:3000/issues/allVous pouvez même aller plus loin en utilisant un fournisseur comme SendGrid et une tâche cron pour envoyer des e-mails quotidiens contenant les tâches qui vous ont été assignées.
Héberger votre application Node.js sur Kinsta
Avant d’héberger votre application sur Kinsta, activez le Cross-Origin Resource Sharing (CORS) pour éviter une erreur access-control-allow-origin puisque vous hébergez le backend et le frontend sur des domaines différents. Pour ce faire, procédez comme suit :
- Installez le paquetage npm cors en exécutant cette commande dans votre terminal :
npm install cors - Ensuite, importez le paquet dans index.js.
const cors = require('cors') - Ensuite, configurez CORS en tant que middleware pour l’activer pour chaque requête entrante. Ajoutez le code suivant au début de votre fichier index.js:
app.use(cors());Vous pouvez désormais envoyer des requêtes HTTP à votre serveur à partir d’un domaine différent sans rencontrer d’erreurs CORS.
Ensuite, poussez votre code vers un fournisseur Git préféré (Bitbucket, GitHub ou GitLab) et suivez les étapes ci-dessous pour l’héberger :
- Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
- Autorisez Kinsta avec votre fournisseur Git.
- Cliquez sur Applications dans la barre latérale gauche, puis cliquez sur Ajouter une application.
- Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer l’application.
- Attribuez un nom unique à votre application et choisissez un centre de données.
- Ajoutez les variables d’environnement. Il n’est pas nécessaire d’ajouter le PORT en tant que variable d’environnement, car Kinsta le gère automatiquement. Cochez les cases situées à côté de Available during runtime et Available during build process:
Variables d’environnement de l’application Kinsta. - Passez en revue les autres informations (vous pouvez laisser les valeurs par défaut) et cliquez sur Créer l’application.
Votre serveur est maintenant déployé avec succès sur Kinsta. Dans le menu de gauche, cliquez sur Domaines et copiez le domaine primaire. Il s’agit du point d’extrémité de l’URL de votre serveur.
Créer une application React pour afficher les problèmes
Ensuite, vous utilisez React pour construire le frontend de votre application et CSS pour le styliser. Suivez les étapes ci-dessous pour créer un projet React avec Vite:
- Créez un nouveau projet React nommé
jira-todo:npx create-vite jira-todo --template react - Naviguez jusqu’au répertoire du projet et installez les dépendances nécessaires :
npm install - Démarrez le serveur de développement :
npm run dev
Récupérer les problèmes sur le serveur
- Effacez le contenu du fichier App.jsx et ajoutez le code suivant :
function App() {
return (
<div className="App">
<h1>What's on my list today?</h1>
{/* Display issues */}
</div>
);
}
export default App;- Avant de commencer à récupérer les questions, stockez l’URL du serveur de Kinsta dans un fichier .env à la racine du dossier de votre application :
VITE_SERVER_BASE_URL="your-hosted-url"- Obtenez l’URL dans App.jsx en ajoutant la ligne suivante au début du fichier :
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL- Dans votre composant, créez une fonction asynchrone nommée
fetchDataet faites une requêtes GET au point de terminaison/issues/allsur le serveur Express. Une fois que vous avez reçu une réponse, analysez-la en tant que JSON et stockez les données dans une valeur d’état nomméedata:
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;Notez que vous utilisez le hook useEffect pour exécuter la fonction fetchData lorsque le composant est monté.
Afficher les problèmes de Jira dans le navigateur
- Maintenant, vous pouvez modifier l’instruction de retour de votre composant pour itérer sur les problèmes et les lister dans le navigateur :
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>
);- Pour styliser cette application, ajoutez le code CSS suivant à 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;
}- Ensuite, importez App.css dans index.js pour appliquer les styles :
import './App.css'Désormais, lorsque vous démarrez votre application, vous devriez voir apparaître dans votre navigateur une liste des tâches qui vous ont été attribuées, avec leur statut et leur échéance :
Déployer votre application React sur Kinsta
Pour garder les choses simples, utilisez l’hébergement de site statique de Kinsta pour déployer l’application. L’hébergement de site statique de Kinsta aide à construire vos sites en un site statique et déploie les fichiers statiques en garantissant une livraison rapide du contenu et un temps d’arrêt minimal.
Créez un dépôt sur GitHub pour pousser votre code source. Une fois que votre dépôt est prêt, suivez ces étapes pour déployer votre site statique sur Kinsta :
- Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
- Autorisez Kinsta avec votre fournisseur Git.
- Cliquez sur Sites statiques dans la colonne latérale gauche, puis cliquez sur Ajouter un site.
- Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer.
- Attribuez un nom unique à votre site.
- MyKinsta détecte automatiquement les réglages de construction pour ce projet React. Vous voyez les réglages suivants pré-remplis :
- Commande de construction :
npm run build - Version Node :
18.16.0 - Répertoire de publication :
dist
- Commande de construction :
- Ajoutez l’URL de votre serveur comme variable d’environnement en utilisant
VITE_SERVER_BASE_URL. - Enfin, cliquez sur Créer un site.
Et le tour est joué ! Vous disposez maintenant d’un site déployé en quelques secondes. Un lien est fourni pour accéder à la version déployée de votre site. Si vous naviguez vers le domaine de votre site, vous verrez une liste de problèmes Jira. Vous pouvez par la suite ajouter votre domaine personnalisé et votre certificat SSL si vous le souhaitez.
Comme alternative à l’hébergement de site statique, vous pouvez opter pour le déploiement de votre site statique avec l’hébergement d’application de Kinsta, qui offre une plus grande flexibilité d’hébergement, une plus large gamme d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker et des analyses complètes englobant des données en temps réel et historiques.
Résumé
Dans ce guide, vous avez appris à créer une application Express pour récupérer les problèmes Jira assignés à l’aide de l’API Jira REST. En outre, vous avez connecté une application frontend React à votre application Express pour afficher ces problèmes dans le navigateur.
Cette application est une démonstration rudimentaire de ce que vous pouvez réaliser avec l’API REST de Jira. Vous pouvez améliorer votre application avec des fonctionnalités qui vous permettent de marquer les tâches terminées, d’effectuer un filtrage avancé, et bien plus encore.
De plus, avec Kinsta, vous pouvez héberger à la fois votre serveur et votre site dans un seul tableau de bord en utilisant nos différents services. Découvrez l’hébergement web robuste de Kinsta pour toutes vos applications.
Laisser un commentaire