Jira is een populaire tool voor projectbeheer waarmee je taken binnen een project kunt bijhouden. Maar als je aan een groot project werkt, kan je Jira dashboard onoverzichtelijk worden naarmate het aantal taken en teamleden toeneemt.

Om dit issue aan te pakken, kun je de Jira REST API gebruiken om een vereenvoudigde To-Do List applicatie te genereren die je toegewezen taken en hun deadlines weergeeft. Met de API kun je programmatisch communiceren met Jira om issues aan te maken, op te vragen, bij te werken en te verwijderen en om toegang te krijgen tot gebruikersgegevens en projectdetails.

Deze tutorial helpt je bij het ontwikkelen van een takenlijst applicatie met Node.js als server om issues op te halen uit je Jira account en een React applicatie om ze weer te geven. Je leert ook hoe je zowel de frontend als de server naar Kinsta kunt hosten.

Vereisten

Om mee te kunnen doen, heb je nodig:

De backend bouwen met Node.js en Express

Express is een populair Node.js framework dat een gestroomlijnde omgeving biedt voor het bouwen van server-side applicaties. Express vereenvoudigt de afhandeling van routes en vergemakkelijkt interacties met externe bronnen, zoals API’s, databases en frontend applicaties.

Volg de onderstaande stappen om de server in te stellen:

  1. Maak een nieuwe map aan en navigeer erheen. Initialiseer vervolgens Node.js door het onderstaande commando uit te voeren: 
    npm init -y

    Dit commando maakt een package.json bestand aan met de standaardinstellingen in de root van de map van je app.

  2. Installeer vervolgens alle noodzakelijke dependencies voor je project door het volgende commando uit te voeren: 
    npm install express dotenv axios

    Het bovenstaande commando installeert het volgende:

    • express – Een minimaal Node.js framework voor het bouwen van API’s.
    • dotenv – Een module die .env variabelen naar process.env laadt zodat je ze veilig kunt gebruiken.
    • axios – Een op promises gebaseerde HTTP client voor Node.js. Je gebruikt het om API calls naar Jira te doen.
  3. Zodra de installatie is gelukt, maak je een .env bestand aan in de root van je project en voeg je het PORT nummer toe: 
    PORT=3000

    Dit is het poortnummer waar de server naar luistert. Je kunt het wijzigen in een poort naar keuze.

  4. Maak een index.js bestand in de hoofdmap van je project en voeg de volgende code toe om Express te importeren, een instantie van een Express applicatie te maken en je server te 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. Voeg ten slotte in je package.json bestand een script toe om je server te starten: 
    "scripts": {
   "start": "node index"
  },

    Nu kun je het startscript in je terminal uitvoeren:

    npm run start

    Dit commando start je server. Je zou de volgende tekst gelogd in de terminal moeten zien:

    Server is running on port 3000

    Nu de server draait, kun je je Jira app configureren.

Een Jira app configureren

Om de Jira REST API te gebruiken, moet je een gebruikersaccount authenticeren met je Jira site. De to-do app API die je bouwt gebruikt basisverificatie met een Atlassian account e-mailadres en API token.

Zo stel je dat in:

  1. Maak een Jira account aan of log in als je er al een hebt.
  2. Navigeer naar het beveiligingsgedeelte van je Atlassian profiel en klik op Create API token.
  3. Voer in het dialoogvenster dat verschijnt een Label in voor je token (bijvoorbeeld “jira-todo-lijst”) en klik op Create.
  4. Kopieer het token naar je klembord.
  5. Sla tot slot het API Token op in je .env bestand: 
    JIRA_API_TOKEN="your-api-token"

    Nu heb je toegang tot de Jira API met basisauthenticatie.

Routes instellen om issues op te halen uit Jira

Nu je een Jira applicatie hebt geconfigureerd. Laten we routes instellen om issues op te halen uit Jira in je Node.js server.

Om een verzoek naar de Jira API te starten, moet je het Jira API token gebruiken dat je in het .env bestand hebt opgeslagen. Haal het API token op met process.env en wijs het toe aan een variabele met de naam JIRA_API_TOKEN in je index.js bestand:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Nu moet je de URL van het endpoint definiëren voor je API verzoek. Deze URL bevat je Jira domein en een Jira Query Language (JQL) statement. Het Jira domein verwijst naar de URL van je Jira organisatie en ziet eruit als org.atlassian.net, waarbij org de naam van je organisatie is. JQL daarentegen is een querytaal voor interactie met issues in Jira.

Begin met het toevoegen van het Jira domein aan het .env bestand:

JIRA_DOMAIN="your-jira-domain"

Je moet ook je Jira e-mail opslaan in het .env bestand, omdat dit wordt gebruikt voor autorisatie wanneer je een verzoek indient bij Jira:

JIRA_EMAIL="your-jira-email"

Voeg vervolgens beide omgevingsvariabelen toe en construeer de URL van het endpoint met behulp van het domein en het volgende JQL statement. Deze query filtert issues met de status “In progress” of “Te do” voor de ingelogde gebruiker en ordent ze vervolgens op 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}`;

Voordat je een route aanmaakt, moet je ook Axios importeren in je index.js bestand:

const axios = require("axios")

Je kunt nu een route maken die een GET verzoek naar de Jira API doet en de issues retourneert. Voeg in index.js de volgende code toe:

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

Gebruik nu de methode axios.get om een GET verzoek te doen naar de Jira REST API. Je maakt de Authorization header door je Jira e-mail en API token te base64 encoderen:

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

Wacht op de respons van de Jira API en sla het op in een variabele. De respons bevat een propery genaamd issues, die een array van issue-objecten bevat:

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

Vervolgens itereer je over de issues array, extraheer je alleen de relevante informatie over de to-do items en retourneer je deze in een JSON respons:

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

Als je een verzoek doet aan http://localhost:3000/issues/all, zou je een JSON object moeten ontvangen dat de issues bevat:

curl localhost:3000/issues/all

Je kunt zelfs nog een stap verder gaan door een provider als SendGrid en een cron job te gebruiken om dagelijks e-mails te versturen met de aan jou toegewezen taken.

Je Node.js applicatie hosten op Kinsta

Voordat je je applicatie op Kinsta host, moet je Cross-Origin Resource Sharing (CORS) inschakelen om een access-control-allow-origin fout te voorkomen omdat je de backend en de frontend op verschillende domeinen host. Om dit te doen:

  1. Installeer het cors npm pakket door dit commando in je terminal uit te voeren: 
    npm install cors
  2. Importeer het pakket vervolgens in index.js. 
    const cors = require('cors')
  3. Configureer vervolgens CORS als middleware om het in te schakelen voor elk inkomend verzoek. Voeg de volgende code toe bovenaan je index.js bestand: 
    app.use(cors());

    Je kunt nu HTTP verzoeken naar je server sturen vanaf een ander domein zonder CORS fouten tegen te komen.

Vervolgens push je je code naar een Git provider van je voorkeur (Bitbucket, GitHub of GitLab) en volg je onderstaande stappen om het te hosten:

  1. Log in of maak een account aan om je MyKinsta dashboard te bekijken.
  2. Autoriseer Kinsta met je Git provider.
  3. Klik op Applicaties in de linker zijbalk, klik dan op Applicatie toevoegen.
  4. Selecteer de repository en de branch waarvan je wilt deployen.
  5. Geef je app een unieke naam en kies een datacenterlocatie.
  6. Voeg de omgevingsvariabelen toe. Het is niet nodig om de PORT als omgevingsvariabele toe te voegen, omdat Kinsta dit automatisch afhandelt. Vink de vakjes aan naast Beschikbaar tijdens runtime en Beschikbaar tijdens bouwproces:

    Een formulier voor het toevoegen van sleutelwaardeparen van omgevingsvariabelen
    Kinsta app omgevingsvariabelen.

  7. Controleer de overige informatie (je kunt de standaardwaarden laten staan) en klik op Applicatie maken.

Je server is nu succesvol gedeployd op Kinsta. Klik in het linkermenu op Domeinen en kopieer het primaire domein. Dit is het URL endpoint van je server.

Een React applicatie maken om de issues weer te geven

Vervolgens gebruik je React om de frontend van je app te bouwen en CSS om deze te stylen. Volg de onderstaande stappen om een React project te maken met Vite:

  1. Maak een nieuw React project met de naam jira-todo: 
    npx create-vite jira-todo --template react
  2. Navigeer naar de projectmap en installeer de benodigde dependencies: 
    npm install
  3. Start de ontwikkelserver: 
    npm run dev

Issues ophalen van de server

  1. Wis de inhoud in App.jsx en voeg de volgende code toe:
function App() {

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

   </div>
 );
}

export default App;
  1. Voordat je begint met het ophalen van de issues, sla je de server URL van Kinsta op in een .env bestand in de root van de map van je app:
VITE_SERVER_BASE_URL="your-hosted-url"
  1. Haal de URL op in App.jsx door de volgende regel bovenaan het bestand toe te voegen:
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL
  1. Maak in je component een async functie met de naam fetchData en doe een GET verzoek naar het /issues/all endpoint op de Express server. Zodra je een antwoord hebt ontvangen, parse je het als JSON en sla je de gegevens op in een statuswaarde met de naam 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;

Merk op dat je de useEffect hook gebruikt om de fetchData functie uit te voeren wanneer het component mount.

De issues vanuit Jira weergeven in de browser

  1. Nu kun je het return statement van je component aanpassen om de issues te itereren en ze in de browser te tonen:
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. Om deze toepassing te stijlen, voeg je de volgende CSS code toe aan 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;
}
  1. Importeer vervolgens App.css in index.js om de stijlen toe te passen:
import './App.css'

Als je nu je applicatie start, zou je een lijst met aan jou toegewezen taken met hun status en deadline in je browser moeten zien:

Lijst met Jira taken die aan een gebruiker zijn toegewezen.
Lijst met Jira taken die aan een gebruiker zijn toegewezen.

Je React applicatie deployen op Kinsta

Om het eenvoudig te houden, gebruik je Kinsta’s Statische Site Hosting om de applicatie te deployen. Kinsta’s Statische Site Hosting helpt bij het bouwen van je sites tot een statische site en deployt de statische bestanden om een snelle levering van content en minimale downtime te garanderen.

Maak een repository aan op GitHub om je sourcecode te pushen. Zodra je repo klaar is, volg je deze stappen om je statische site te deployen naar Kinsta:

  1. Log in of maak een account aan om je MyKinsta dashboard te bekijken.
  2. Autoriseer Kinsta met je Git provider.
  3. Klik op Statische sites op de linker zijbalk, klik dan op Site toevoegen.
  4. Selecteer de repository en de branch waarvan je wilt deployen.
  5. Geef je site een unieke naam.
  6. MyKinsta detecteert automatisch de bouwinstellingen voor dit React project. Je ziet de volgende instellingen al ingevuld:
    • Build commando: npm run build
    • Node versie: 18.16.0
    • Publish directory: dist
  1. Voeg de URL van je server toe als omgevingsvariabele met VITE_SERVER_BASE_URL.
  2. Klik ten slotte op Site maken.

En dat is het! Je hebt nu binnen een paar seconden een gedeployde site. Er wordt een link gegeven om toegang te krijgen tot de gedeployde versie van je site. Als je naar het domein van je site navigeert, zie je een lijst met Jira issues. Je kunt later je eigen domein en SSL certificaat toevoegen als je dat wilt.

Als alternatief voor Static Site Hosting kun je ervoor kiezen om je statische site te deployen met Kinsta’s Applicatie Hosting, dat een grotere hostingflexibiliteit, een breder scala aan voordelen en toegang tot robuustere functies biedt. Bijvoorbeeld schaalbaarheid, custom deployments met behulp van een Dockerfile en uitgebreide analyses met real-time en historische gegevens.

Samenvatting

In deze handleiding heb je geleerd hoe je een Express app maakt om toegewezen Jira issues op te halen met behulp van de Jira REST API. Daarnaast heb je een React frontend applicatie aan je Express applicatie gekoppeld om deze issues in de browser weer te geven.

Deze app is een simpele demonstratie van wat je kunt bereiken met Jira REST API. Je kunt je app uitbreiden met functionaliteit waarmee je voltooide taken kunt markeren, geavanceerde filtering kunt uitvoeren en nog veel meer.

Met Kinsta kun je bovendien zowel je server als de site hosten in één dashboard met behulp van onze verschillende services. Bekijk Kinsta’s solide, flexibele webhosting voor al je applicaties.

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).