Jira ist ein beliebtes Projektmanagement-Tool, mit dem du den Überblick über die Aufgaben in einem Projekt behältst. Wenn du jedoch an einem großen Projekt arbeitest, kann dein Jira-Dashboard unübersichtlich werden, wenn die Anzahl der Aufgaben und Teammitglieder steigt.

Um dieses Problem zu lösen, kannst du die Jira REST API nutzen, um eine vereinfachte To-Do-Liste zu erstellen, die deine zugewiesenen Aufgaben und deren Fristen anzeigt. Mit der API kannst du programmatisch mit Jira interagieren, um Aufgaben zu erstellen, abzurufen, zu aktualisieren und zu löschen und auf Benutzerdaten und Projektdetails zuzugreifen.

In diesem Tutorial lernst du, wie du eine To-Do-Listen-Anwendung mit Node.js als Server entwickelst, um Issues von deinem Jira-Konto abzurufen, und eine React-Anwendung erstellst, um sie anzuzeigen. Du lernst auch, wie du sowohl das Frontend als auch den Server auf Kinsta hostest.

Voraussetzungen

Um mitzumachen, brauchst du:

Wie du das Backend mit Node.js und Express aufbaust

Express ist ein beliebtes Node.js-Framework, das eine optimierte Umgebung für die Entwicklung serverseitiger Anwendungen bietet. Express vereinfacht die Handhabung von Routen und erleichtert die Interaktion mit externen Ressourcen, wie APIs, Datenbanken und Frontend-Anwendungen.

Befolge die folgenden Schritte, um den Server einzurichten:

  1. Erstelle ein neues Verzeichnis und navigiere zu ihm. Dann initialisiere Node.js, indem du den folgenden Befehl ausführst: 
    npm init -y

    Dieser Befehl erstellt eine package.json-Datei mit den Standardeinstellungen im Stammverzeichnis deiner Anwendung.

  2. Als nächstes installierst du alle notwendigen Abhängigkeiten für dein Projekt, indem du den folgenden Befehl ausführst: 
    npm install express dotenv axios

    Mit dem obigen Befehl wird Folgendes installiert:

    • express – Ein minimales Node.js-Framework zur Erstellung von APIs.
    • dotenv – Ein Modul, das .env Variablen auf process.env lädt, damit du sicher auf sie zugreifen kannst.
    • axios – Ein auf Versprechen basierender HTTP-Client für Node.js. Du verwendest ihn, um API-Aufrufe an Jira zu tätigen.
  3. Nach erfolgreicher Installation erstellst du eine .env-Datei im Stammverzeichnis deines Projekts und fügst die PORT Nummer hinzu: 
    PORT=3000

    Dies ist die Portnummer, auf die der Server hört. Du kannst sie in einen Port deiner Wahl ändern.

  4. Erstelle eine index.js-Datei im Stammverzeichnis deines Projekts und füge den folgenden Code hinzu, um Express zu importieren, eine Instanz einer Express-Anwendung zu erstellen und deinen Server zu starten: 
    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. Füge in deiner package.json Datei ein Skript hinzu, um deinen Server zu starten: 
    "scripts": {
   "start": "node index"
  },

    Jetzt kannst du das Startskript in deinem Terminal ausführen:

    npm run start

    Dieser Befehl startet deinen Server. Du solltest den folgenden Text im Terminal sehen:

    Server is running on port 3000

    Wenn der Server läuft, kannst du jetzt deine Jira-Anwendung konfigurieren.

So konfigurierst du eine Jira Anwendung

Um die Jira REST API zu nutzen, musst du ein Benutzerkonto bei deiner Jira Website authentifizieren. Die von dir erstellte To-Do-App-API verwendet eine einfache Authentifizierung mit einer Atlassian-Konto-E-Mail-Adresse und einem API-Token.

Hier erfährst du, wie du es einrichtest:

  1. Erstelle ein Jira-Konto oder melde dich an, wenn du eines hast.
  2. Navigiere zum Sicherheitsbereich deines Atlassian-Profils und klicke auf API-Token erstellen.
  3. Gib im erscheinenden Dialog ein Label für dein Token ein (z.B. „jira-todo-list“) und klicke auf Erstellen.
  4. Kopiere das Token in deine Zwischenablage.
  5. Schließlich speicherst du das API-Token in deiner .env-Datei: 
    JIRA_API_TOKEN="your-api-token"

    Jetzt kannst du mit der einfachen Authentifizierung auf die Jira-API zugreifen.

Einrichten von Routen zum Abrufen von Issues aus Jira

Jetzt hast du eine Jira-Anwendung konfiguriert. Richten wir nun Routen ein, um Issues von Jira in deinem Node.js Server zu holen.

Um eine Anfrage an die Jira API zu stellen, musst du das Jira API-Token verwenden, das du in der .env-Datei gespeichert hast. Rufe das API-Token mit process.env ab und weise es einer Variablen namens JIRA_API_TOKEN in deiner index.js-Datei zu:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Jetzt musst du die Endpunkt-URL für deine API-Anfrage festlegen. Diese URL enthält deine Jira-Domäne und eine Jira Query Language (JQL)-Anweisung. Die Jira-Domäne bezieht sich auf die URL für deine Jira-Organisation und sieht aus wie org.atlassian.net, wobei org der Name deiner Organisation ist. JQL hingegen ist eine Abfragesprache für die Interaktion mit Issues in Jira.

Beginne damit, die Jira-Domäne zur .env-Datei hinzuzufügen:

JIRA_DOMAIN="your-jira-domain"

Du musst auch deine Jira-E-Mail in der .env-Datei speichern, da sie für die Autorisierung bei einer Anfrage an Jira verwendet wird:

JIRA_EMAIL="your-jira-email"

Als Nächstes fügst du beide Umgebungsvariablen hinzu und erstellst die Endpunkt-URL mithilfe der Domain und der folgenden JQL-Anweisung. Diese Abfrage filtert Fragen mit den Status „In Bearbeitung“ oder „Zu erledigen“ für den angemeldeten Benutzer und ordnet sie dann nach Status:

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

Bevor du eine Route erstellst, musst du auch Axios in deine index.js-Datei importieren:

const axios = require("axios")

Du kannst jetzt eine Route erstellen, die eine GET-Anfrage an die Jira API stellt und die Issues zurückgibt. Füge in index.js den folgenden Code ein:

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

Verwende nun die Methode axios.get, um eine GET-Anfrage an die Jira REST API zu stellen. Du erstellst den Authorization Header, indem du deine Jira-E-Mail und dein API-Token base64-encodierst:

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

Erwarte die Antwort von der Jira API und speichere sie in einer Variablen. Die Antwort enthält eine Eigenschaft namens issues, die ein Array von Issue-Objekten enthält:

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

Als Nächstes durchläufst du das Array issues, extrahierst nur die relevanten Informationen über die Aufgaben und gibst sie als JSON-Antwort zurück:

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

Wenn du eine Anfrage an http://localhost:3000/issues/all stellst, solltest du ein JSON-Objekt erhalten, das die Aufgaben enthält:

curl localhost:3000/issues/all

Du kannst sogar noch weiter gehen, indem du einen Anbieter wie SendGrid und einen Cron-Job verwendest, um täglich E-Mails mit den dir zugewiesenen Aufgaben zu versenden.

Hosten deiner Node.js-Anwendung auf Kinsta

Bevor du deine Anwendung auf Kinsta hostest, aktiviere das Cross-Origin Resource Sharing (CORS), um einen access-control-allow-origin Fehler zu vermeiden, da du das Backend und das Frontend auf unterschiedlichen Domains hostest. Um dies zu tun:

  1. Installiere das npm-Paket cors, indem du diesen Befehl in deinem Terminal ausführst: 
    npm install cors
  2. Importiere dann das Paket in index.js. 
    const cors = require('cors')
  3. Als Nächstes konfigurierst du CORS als Middleware, um es für jede eingehende Anfrage zu aktivieren. Füge den folgenden Code am Anfang deiner index.js-Datei ein: 
    app.use(cors());

    Jetzt kannst du HTTP-Anfragen von einer anderen Domain an deinen Server senden, ohne dass CORS-Fehler auftreten.

Als Nächstes pusht du deinen Code zu einem bevorzugten Git-Anbieter (Bitbucket, GitHub oder GitLab) und befolgst die folgenden Schritte, um ihn zu hosten:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta bei deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Anwendungen und dann auf Anwendung hinzufügen.
  4. Wähle das Repository und den Zweig aus, von dem aus du die Anwendung bereitstellen möchtest.
  5. Gib deiner Anwendung einen eindeutigen Namen und wähle den Standort deines Rechenzentrums.
  6. Füge die Umgebungsvariablen hinzu. Es ist nicht nötig, den PORT als Umgebungsvariable hinzuzufügen, da Kinsta dies automatisch übernimmt. Aktiviere die Kontrollkästchen neben Available during runtime und Available during build process:

    Kinsta-Anwendungs-Umgebungsvariablen
    Kinsta-Anwendungs-Umgebungsvariablen

  7. Überprüfe die anderen Informationen (du kannst die Standardwerte beibehalten) und klicke auf Anwendung erstellen.

Dein Server ist nun erfolgreich bei Kinsta installiert. Klicke im linken Menü auf Domains und kopiere die primäre Domain. Dies ist der URL-Endpunkt deines Servers.

Erstelle eine React-Anwendung zur Anzeige der Issues

Als Nächstes verwendest du React, um das Frontend deiner Anwendung zu erstellen, und CSS, um sie zu gestalten. Befolge die folgenden Schritte, um ein React-Projekt mit Vite zu erstellen:

  1. Lege ein neues React-Projekt mit dem Namen jira-todo an: 
    npx create-vite jira-todo --template react
  2. Navigiere zu dem Projektverzeichnis und installiere die notwendigen Abhängigkeiten: 
    npm install
  3. Starte den Entwicklungsserver: 
    npm run dev

Issues vom Server abrufen

  1. Lösche den Inhalt der App.jsx und füge den folgenden Code hinzu:
function App() {

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

   </div>
 );
}

export default App;
  1. Bevor du mit dem Abrufen der Ausgaben beginnst, speichere die Server-URL von Kinsta in einer .env-Datei im Stammverzeichnis deiner Anwendung:
VITE_SERVER_BASE_URL="your-hosted-url"
  1. Hol dir die URL in App.jsx, indem du die folgende Zeile am Anfang der Datei hinzufügst:
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL
  1. Erstelle in deiner Komponente eine asynchrone Funktion namens fetchData und stelle eine GET-Anfrage an den Endpunkt /issues/all auf dem Express-Server. Sobald du eine Antwort erhältst, parse sie als JSON und speichere die Daten in einem Statuswert namens 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;

Beachte, dass du den useEffect Hook verwendest, um die Funktion fetchData auszuführen, wenn die Komponente gemountet wird.

Rendering der Issues aus Jira im Browser

  1. Jetzt kannst du die Rückgabeanweisung deiner Komponente so ändern, dass sie über die Issues iteriert und sie im Browser auflistet:
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. Um diese Anwendung zu gestalten, füge den folgenden CSS-Code zur App.css hinzu:
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. Importiere dann App.css in index.js, um die Stile anzuwenden:
import './App.css'

Wenn du jetzt deine Anwendung startest, solltest du in deinem Browser eine Liste der dir zugewiesenen Aufgaben mit ihrem Status und ihrer Frist sehen:

Ein Screenshot der React-Anwendungsseite
Liste der Jira-Aufgaben, die einem Benutzer zugewiesen sind

Bereitstellen deiner React-Anwendung auf Kinsta

Um die Dinge einfach zu halten, verwende das Static Site Hosting von Kinsta, um deine Anwendung bereitzustellen. Mit dem Static Site Hosting von Kinsta kannst du deine Websites in eine statische Website umwandeln und die statischen Dateien bereitstellen, um eine schnelle Bereitstellung der Inhalte und minimale Ausfallzeiten zu gewährleisten.

Erstelle ein Repository auf GitHub, um deinen Quellcode zu veröffentlichen. Sobald dein Repository fertig ist, befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta mit deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Statische Websites und dann auf Website hinzufügen.
  4. Wähle das Repository und den Zweig aus, von dem aus du bereitstellen möchtest.
  5. Vergebe einen eindeutigen Namen für deine Website.
  6. MyKinsta erkennt die Build-Einstellungen für dieses React-Projekt automatisch. Die folgenden Einstellungen sind vorausgefüllt:
    • Build-Befehl: npm run build
    • Node-Version: 18.16.0
    • Verzeichnis veröffentlichen: dist
  1. Füge die URL deines Servers als Umgebungsvariable mit VITE_SERVER_BASE_URL hinzu.
  2. Zum Schluss klickst du auf Website erstellen.

Und das war’s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erhältst einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. Wenn du zur Domain deiner Website navigierst, siehst du eine Liste von Jira-Problemen. Du kannst später deine eigene Domain und dein SSL-Zertifikat hinzufügen, wenn du möchtest.

Als Alternative zum Static Site Hosting kannst du dich für das Anwendungs-Hosting von Kinsta entscheiden, das eine größere Hosting-Flexibilität, eine breitere Palette von Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu gehören z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und umfassende Analysen, die Echtzeit- und historische Daten umfassen.

Zusammenfassung

In diesem Leitfaden hast du gelernt, wie du eine Express-Anwendung erstellst, um zugewiesene Jira Issues über die Jira REST API abzurufen. Außerdem hast du eine React-Frontend-Anwendung mit deiner Express-Anwendung verbunden, um diese Issues im Browser anzuzeigen.

Diese App ist eine rudimentäre Demonstration dessen, was du mit der Jira REST API erreichen kannst. Du kannst deine Anwendung mit Funktionen erweitern, mit denen du erledigte Aufgaben markieren, erweiterte Filterfunktionen anwenden und vieles mehr.

Außerdem kannst du mit Kinsta sowohl deinen Server als auch die Website in einem Dashboard hosten und unsere verschiedenen Dienste nutzen. Teste das robuste und flexible Webhosting von Kinsta für alle deine Anwendungen.

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).