In diesem Tutorial lernst du, wie du eine To-Do-Listen-Anwendung mit Node.js<\/a> 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. Um mitzumachen, brauchst du:<\/p>\n Express<\/a> ist ein beliebtes Node.js-Framework, das eine optimierte Umgebung f\u00fcr die Entwicklung serverseitiger Anwendungen bietet. Express vereinfacht die Handhabung von Routen und erleichtert die Interaktion mit externen Ressourcen, wie APIs, Datenbanken und Frontend-Anwendungen.<\/p>\n Befolge die folgenden Schritte, um den Server einzurichten:<\/p>\n Dieser Befehl erstellt eine package.json-Datei<\/strong> mit den Standardeinstellungen im Stammverzeichnis deiner Anwendung.<\/li>\n Mit dem obigen Befehl wird Folgendes installiert:<\/p>\n Dies ist die Portnummer, auf die der Server h\u00f6rt. Du kannst sie in einen Port deiner Wahl \u00e4ndern.<\/li>\n Jetzt kannst du das Startskript in deinem Terminal ausf\u00fchren:<\/p>\n Dieser Befehl startet deinen Server. Du solltest den folgenden Text im Terminal sehen:<\/p>\n Wenn der Server l\u00e4uft, kannst du jetzt deine Jira-Anwendung konfigurieren.<\/li>\n<\/ol>\n 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.<\/p>\n Hier erf\u00e4hrst du, wie du es einrichtest:<\/p>\n Jetzt kannst du mit der einfachen Authentifizierung auf die Jira-API zugreifen.<\/li>\n<\/ol>\n Jetzt hast du eine Jira-Anwendung konfiguriert. Richten wir nun Routen ein, um Issues von Jira in deinem Node.js Server zu holen.<\/p>\n Um eine Anfrage an die Jira API zu stellen, musst du das Jira API-Token verwenden, das du in der .env-Datei<\/strong> gespeichert hast. Rufe das API-Token mit Jetzt musst du die Endpunkt-URL f\u00fcr deine API-Anfrage festlegen. Diese URL enth\u00e4lt deine Jira-Dom\u00e4ne und eine Jira Query Language<\/a> (JQL)-Anweisung. Die Jira-Dom\u00e4ne bezieht sich auf die URL f\u00fcr deine Jira-Organisation und sieht aus wie Beginne damit, die Jira-Dom\u00e4ne zur .env-Datei<\/strong> hinzuzuf\u00fcgen:<\/p>\n Du musst auch deine Jira-E-Mail in der .env-Datei<\/strong> speichern, da sie f\u00fcr die Autorisierung bei einer Anfrage an Jira verwendet wird:<\/p>\n Als N\u00e4chstes f\u00fcgst 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\u00fcr den angemeldeten Benutzer und ordnet sie dann nach Status:<\/p>\n Bevor du eine Route erstellst, musst du auch Axios in deine index.js-Datei importieren:<\/p>\n Du kannst jetzt eine Route erstellen, die eine GET-Anfrage an die Jira API stellt und die Issues zur\u00fcckgibt. F\u00fcge in index.js<\/strong> den folgenden Code ein:<\/p>\n Verwende nun die Methode Erwarte die Antwort von der Jira API und speichere sie in einer Variablen. Die Antwort enth\u00e4lt eine Eigenschaft namens Als N\u00e4chstes durchl\u00e4ufst du das Array Wenn du eine Anfrage an Du kannst sogar noch weiter gehen, indem du einen Anbieter wie SendGrid und einen Cron-Job verwendest, um t\u00e4glich E-Mails mit den dir zugewiesenen Aufgaben zu versenden.<\/p>\n Bevor du deine Anwendung auf Kinsta hostest, aktiviere das Cross-Origin Resource Sharing (CORS)<\/a>, um einen Jetzt kannst du HTTP-Anfragen von einer anderen Domain an deinen Server senden, ohne dass CORS-Fehler auftreten.<\/li>\n<\/ol>\n Als N\u00e4chstes pusht du deinen Code zu einem bevorzugten Git-Anbieter (Bitbucket<\/a>, GitHub<\/a> oder GitLab<\/a>) und befolgst die folgenden Schritte, um ihn zu hosten:<\/p>\n Dein Server ist nun erfolgreich bei Kinsta installiert. Klicke im linken Men\u00fc auf Domains<\/strong> und kopiere die prim\u00e4re Domain. Dies ist der URL-Endpunkt deines Servers.<\/p>\n Als N\u00e4chstes 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<\/a> zu erstellen:<\/p>\n Beachte, dass du den Wenn du jetzt deine Anwendung startest, solltest du in deinem Browser eine Liste der dir zugewiesenen Aufgaben mit ihrem Status und ihrer Frist sehen:<\/p>\n Um die Dinge einfach zu halten, verwende das Static Site Hosting<\/a> 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\u00e4hrleisten.<\/p>\n Erstelle ein Repository auf GitHub, um deinen Quellcode zu ver\u00f6ffentlichen<\/a>. Sobald dein Repository fertig ist, befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:<\/p>\n Und das war’s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erh\u00e4ltst einen Link, \u00fcber 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\u00e4ter deine eigene Domain<\/a> und dein SSL-Zertifikat<\/a> hinzuf\u00fcgen, wenn du m\u00f6chtest.<\/p>\n Als Alternative zum Static Site Hosting kannst du dich f\u00fcr das Anwendungs-Hosting<\/a> von Kinsta entscheiden, das eine gr\u00f6\u00dfere Hosting-Flexibilit\u00e4t, eine breitere Palette von Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu geh\u00f6ren z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und umfassende Analysen<\/a>, die Echtzeit- und historische Daten umfassen.<\/p>\n In diesem Leitfaden hast du gelernt, wie du eine Express-Anwendung erstellst, um zugewiesene Jira Issues \u00fcber die Jira REST API abzurufen. Au\u00dferdem hast du eine React-Frontend-Anwendung mit deiner Express-Anwendung verbunden, um diese Issues im Browser anzuzeigen.<\/p>\n Diese App ist eine rudiment\u00e4re 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.<\/p>\n
\nVoraussetzungen<\/h2>\n
\n
Wie du das Backend mit Node.js und Express aufbaust<\/h2>\n
\n
npm init -y<\/code><\/pre>\nnpm install express dotenv axios<\/code><\/pre>\n\n
express<\/a><\/code> – Ein minimales Node.js-Framework zur Erstellung von APIs.<\/li>\ndotenv<\/a><\/code> – Ein Modul, das .env<\/code> Variablen auf process.env<\/code> l\u00e4dt, damit du sicher auf sie zugreifen kannst.<\/li>\naxios<\/a><\/code> – Ein auf Versprechen basierender HTTP-Client f\u00fcr Node.js. Du verwendest ihn, um API-Aufrufe an Jira zu t\u00e4tigen.<\/li>\n<\/ul>\n<\/li>\nPORT<\/code> Nummer hinzu:\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>\nSo konfigurierst du eine Jira Anwendung<\/h3>\n
\n
JIRA_API_TOKEN=\"your-api-token\"<\/code><\/pre>\nEinrichten von Routen zum Abrufen von Issues aus Jira<\/h3>\n
process.env<\/code> ab und weise es einer Variablen namens JIRA_API_TOKEN<\/code> in deiner index.js-Datei<\/strong> zu:<\/p>\nconst JIRA_API_TOKEN = process.env.JIRA_API_TOKEN<\/code><\/pre>\norg.atlassian.net<\/code>, wobei org<\/code> der Name deiner Organisation ist. JQL hingegen ist eine Abfragesprache f\u00fcr die Interaktion mit Issues in 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>, um eine GET-Anfrage an die Jira REST API zu stellen. Du erstellst den Authorization<\/code> Header, indem du deine Jira-E-Mail und dein API-Token base64-encodierst:<\/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>, die ein Array von Issue-Objekten enth\u00e4lt:<\/p>\nconst data = await response.json();\nconst { issues } = data;<\/code><\/pre>\nissues<\/code>, extrahierst nur die relevanten Informationen \u00fcber die Aufgaben und gibst sie als JSON-Antwort zur\u00fcck:<\/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> stellst, solltest du ein JSON-Objekt erhalten, das die Aufgaben enth\u00e4lt:<\/p>\ncurl localhost:3000\/issues\/all<\/code><\/pre>\nHosten deiner Node.js-Anwendung auf Kinsta<\/h3>\n
access-control-allow-origin<\/code> Fehler zu vermeiden, da du das Backend und das Frontend auf unterschiedlichen Domains hostest. Um dies zu tun:<\/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
![\"Kinsta-Anwendungs-Umgebungsvariablen\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/kinsta-environment-variables.png\")
Erstelle eine React-Anwendung zur Anzeige der Issues<\/h2>\n
\n
jira-todo<\/code> an:\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>\nIssues vom Server abrufen<\/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> und stelle eine GET-Anfrage an den Endpunkt \/issues\/all<\/code> auf dem Express-Server. Sobald du eine Antwort erh\u00e4ltst, parse sie als JSON und speichere die Daten in einem Statuswert namens 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> Hook verwendest, um die Funktion fetchData<\/code> auszuf\u00fchren, wenn die Komponente gemountet wird.<\/p>\nRendering der Issues aus Jira im Browser<\/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![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/jira-react-application.png\")
Bereitstellen deiner React-Anwendung auf 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> hinzu.<\/li>\nZusammenfassung<\/h2>\n