Projet : comment lancer un pipeline via l’API Gitlab ? (partie 1)
Dans cet article aujourd’hui, je vous propose un mini projet de code. Quelque chose de tout simple en HTML, JavaScript pur, 0 installation de serveur à faire, juste un mini site à lancer en local.
Contexte
Ce projet vient d’une vraie situation de travail dans mon projet actuel. Dans le cadre de cet article bien sûr, il sera recodé spécifiquement.
Imagions que nous ayons un pipeline Gitlab avec un job permettant de lancer des tests dans un projet de code. Jusque-là rien de trop difficile. Maintenant, imaginons que dans ce projet, il y a 2 équipes différentes, une équipe de développeurs et une équipe de testeurs fonctionnels, poussons un peu le trait : les développeurs ne s’intéressent pas à la partie fonctionnelle tant qu’ils peuvent coder en paix. Pour cette seconde équipe qui est purement fonctionnelle, ils se doivent de pouvoir lancer et vérifier les rapports de tests, cependant, ils n’ont pas de connaissances/compétences de code, alors imaginez leur demander d’aller sur des pipelines pour les exécuter ?
Bien sûr, cela serait possible avec un peu de pédagogie, cependant cela coûterait du temps à tout le monde ainsi que de l’adaptation. Ce projet de code répond à cette problématique.
Grâce à ce simple formulaire que vous allez faire, l’équipe de testeurs n’aura qu’a remplir le formulaire, appuyer sur le bouton et POUF, le pipeline se lance, ils n’ont plus qu’a attendre le rapport. C’est un gain de temps et de facilité pour tout le monde.
Maintenant que vous avez le contexte, ouvrez votre éditeur de code préférés et codons !
Structure du projet
Voici la structure que va prendre notre projet :
- Assets/
- logo.png (si vous voulez en ajouter un),
- script.js,
- styles.css,
- index.html
Faisons les choses proprement, même si le projet est petit cela permet de s’y retrouver facilement dans le cas où il serait par la suite repris par une autre personne ou s’il venait à augmenter avec le temps.
Personnellement, j’ai aussi ajouté un ReadMe à la racine du projet.
Commençons par le formulaire HTML
Commençons par les bases, le HTML. Rien de bien compliqué de ce côté-là, nous créons juste un fichier index.html.
Le fichier contient la gestion des différents messages de statuts (erreur, succès, en cours), ainsi que notre formulaire qui nous permettra de choisir sur quel environnement lancer les tests. Vous pouvez aussi ajouter des options si vous voulez, mais il faudra évidemment adapter le code JavaScript plus tard.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>CodeQueen - Projet API Gitlab</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div id="messages">
<div id="errorMessage" class="message"></div>
<div id="statusMessage" class="message"></div>
<div id="successMessage" class="message"></div>
</div>
<div class="card">
<h1>Déclencher un pipeline</h1>
<p>Choisis une branche Git pour lancer ton pipeline :</p>
<div id="deployForm">
<label for="environment">Environnement</label>
<select id="environment" name="environment" required>
<option value="">— Sélectionner une branche —</option>
<option value="main">main</option>
<option value="develop">develop</option>
<option value="feature-x">feature-x</option>
</select>
<button id="submit" type="submit" onclick="submitForm()">Lancer le pipeline</button>
</div>
</div>
</body>
</html>Si vous ne connaissez pas HTML je vous conseille d’aller voir la documentation : https://developer.mozilla.org/fr/docs/Web/HTML.
Rajoutons maintenant un peu de style
On oublie bien souvent qu’avec quelques lignes de css seulement, il est possible de rendre un site attrayant. Cela ne coûte pas grand-chose et donne envie de l’utiliser, voici ces quelques lignes pour notre projet.
body {
margin: 0;
font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
background: linear-gradient(180deg, #071024 0%, #0f1724 100%);
color: #e6eef8;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
flex-direction: column;
}
.card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 14px;
padding: 28px;
max-width: 420px;
width: 100%;
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
}
h1 {
margin-top: 0;
font-size: 20px;
margin-bottom: 12px;
}
p {
font-size: 14px;
color: #9aa4b2;
margin-top: 0;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #9aa4b2;
}
select {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(20, 25, 40, 0.9);
color: #e6eef8;
font-size: 14px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select option {
background: #111827;
color: #f1f5f9;
padding: 8px;
}
select option:hover {
background: #1f2937;
}
select:focus {
outline: none;
border-color: #7c5cff;
box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2);
}
button {
margin-top: 16px;
width: 100%;
padding: 12px;
border-radius: 8px;
background: linear-gradient(90deg, #7c5cff, #00d4ff);
color: #fff;
font-weight: 600;
border: none;
cursor: pointer;
font-size: 14px;
transition: transform .12s ease, box-shadow .12s ease;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(124, 92, 255, 0.3);
}
button:disabled {
background: #374151;
color: #6b7280;
cursor: not-allowed;
opacity: 0.6;
transform: none;
box-shadow: none;
}
button:disabled:hover {
transform: none;
box-shadow: none;
}À ce stade, vous devriez avoir un formulaire simple, efficace et joli. Libre à vous après de l’améliorer et de le personnaliser comme vous le souhaitez. Vous pouvez aussi ajouter un logo si vous le souhaitez ou un nom pour votre page !
La partie JS
Maintenant que les fondations sont posées, il est temps de rajouter nos fonctionnalités et de faire fonctionner ce formulaire. Faisons cela petit à petit.
Créons notre fichier script.js.
Attention de ne pas oublier de l’appeler dans votre HTML via la balise <script> avant la balise </body>.
<script src="assets/script.js"></script>Commençons déjà avec les variables essentielles au projet, Il faut renseigner :
- le token Gitlab (il doit être crée sur user_settings > personal_access_tokens),
- la clé du projet (elle se trouve dans Settings > Général).
/** URL pour les appels API Gitlab */
const BASE_URL = 'https://gitlab.example.com/api/v4';
/** ACCESS TOKEN utilisé pour l'authentification à l'API */
const GITLAB_TOKEN = '';
/** ID du projet Gitlab */
const GITLAB_PROJECT_ID = ;
/** BRANCHE/ENVIRONNEMENT renseigné dans le formulaire */
let environment = '';
/** Stock les messages d'erreurs à afficher à l'utilisateur */
let isError = false;Nous allons ajouter les fonctions au fur et à mesure, copiez-collez fonction par fonction dans votre code afin de pouvoir vérifier chacune d’elles et de limiter le risque d’erreur, il est plus facile de déboguer une fonction qu’un fichier complet.
1 – Commençons par la fonction d’envoi du formulaire. Cette fonction est appelée lors de l’envoi du formulaire. Elle va consister à appeler nos différentes fonctions.
function submitForm() {
getFormElements();
}2 – Voici la fonction qui récupérera la valeur fournie dans le formulaire. On peut y ajouter un console log afin de vérifier qu’elle fonctionne correctement, pensez tout de même à le retirer une fois les tests terminés.
Normalement, si vous rafraîchissez votre page dans le navigateur et que vous renseignez le formulaire, cliquez sur le bouton « Lancer le pipeline » et ouvrez la console, votre environnement s’y affiche. Si cela fonctionne, parfait, nous pouvons continuer !
function getFormElements() {
environment = document.getElementById('environment').value;
console.log(environment);
}3 – Comme vus dans la partie HTML, nous avons 3 statuts possible de l’application :
- Erreur (si le pipeline est en échec ou que les tests ne sont pas passés correctement),
- En cours (si le pipeline n’est pas terminé),
- Succès (tout est au vert tests et pipeline).
Pour cela, nous allons créer une fonction displayMessage et une autre hideAllMessages qui vont respectivement afficher les bons messages pour l’utilisateur et cacher les autres.
function displayMessage(type, message) {
const messageDiv = document.getElementById(`${type}Message`);
hideAllMessages();
messageDiv.innerHTML += message;
messageDiv.style.display = 'block';
}
function hideAllMessages() {
['error', 'status', 'success'].forEach(type => {
const messageDiv = document.getElementById(`${type}Message`);
if (messageDiv) {
messageDiv.style.display = 'none';
}
});
}4 – Le diable se cache dans les détails.
Afin de ne pas trop solliciter notre pipeline nous allons faire en sorte de désactiver le bouton d’envoi tant que le pipeline n’est pas terminé, nous préparerons la fonction que nous utiliserons plus tard.
function disableSubmitButton(status) {
const submitButton = document.getElementById('submit');
if (submitButton) {
submitButton.disabled = status;
}
}5 – Retournons à notre fonction submitForm et ajoutons une alerte de type confirmation quand on clique sur le bouton sous la ligne getFormElements().
const confirmMessage = `Êtes-vous sûr de vouloir lancer les tests automatisés ?\n\nEnvironnement : ${environment}`;
if (!confirm(confirmMessage)) {
disableSubmitButton(false)
return;
} else {
disableSubmitButton(true);
displayMessage('status', "<p>⏳ Lancement des tests automatisés... Merci de patienter quelques minutes.</p>");
}Si vous relancez le site, vous avez maintenant une alerte de confirmation ainsi que votre message de statut qui s’affiche au-dessus de votre formulaire.
La partie Gitlab
La partie Gitlab sera dans la partie 2 de ce projet. Nous y aborderons l’intégration et l’appel de l’API Gitlab dans le JS afin de lancer notre pipeline ainsi que le pipeline en lui-même.
Abonnez-vous à la newsletter afin de ne pas la louper !
Codequeen blog 
Laisser un commentaire