Heim  >  Artikel  >  Web-Frontend  >  Ultimativer Leitfaden: Erstellen Sie einen vollständigen Issue Tracker mit der GitHub-API

Ultimativer Leitfaden: Erstellen Sie einen vollständigen Issue Tracker mit der GitHub-API

Barbara Streisand
Barbara StreisandOriginal
2024-10-31 10:33:53999Durchsuche

Ultimate Guide: Build a Complete Issue Tracker with the GitHub API

Dieser Leitfaden hilft Ihnen bei der Erstellung eines automatisierten, effizienten Issue-Trackers, der in die GitHub-API integriert ist. Sie erfahren Schritt für Schritt, wie Sie die Problemerstellung, Zuweisungen, Benachrichtigungen und mehr einrichten!


1. Schritt 1: Holen Sie sich Ihr GitHub Personal Access Token (PAT)

Um auf private Repositories zuzugreifen oder Ratenbeschränkungen zu vermeiden, benötigen Sie ein Personal Access Token (PAT).

So generieren Sie ein Token:

  1. Gehen Sie zu Einstellungen > Entwicklereinstellungen > Persönliche Zugriffstoken in Ihrem GitHub-Konto.
  2. Klicken Sie auf Neues Token generieren.
  3. Wählen Sie Berechtigungen wie Repo (für Repository-Zugriff) aus.
  4. Speichern Sie das Token – Sie benötigen es für die Autorisierung in Ihrem Code.

2. Schritt 2: Erstellen Sie einen einfachen Issue-Tracker

Mit diesem Code können Sie über die GitHub-API ein Problem in jedem Ihrer Repositorys erstellen.

async function createIssue(owner, repo, title, body, token) {
  const url = `https://api.github.com/repos/${owner}/${repo}/issues`;
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Authorization: `token ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ title, body }),
  });

  const issue = await response.json();
  console.log(`Issue Created: ${issue.html_url}`);
}

createIssue('YourGitHubUsername', 'my-repo', 'Bug Report', 'Details about the bug.', 'your_token');

? So funktioniert es:

  • Ersetzen Sie „YourGitHubUsername“ und „my-repo“ durch Ihren Benutzernamen und Repository-Namen.
  • Diese Funktion postet ein neues Problem im Repository.
  • Überprüfen Sie das Konsolenprotokoll auf den Problemlink.

3. Schritt 3: Problemzuweisung automatisieren

Stellen Sie sicher, dass jedes Problem automatisch einem Teammitglied zugewiesen wird. Dieser Schritt kann Zeit sparen und die Verantwortlichkeit gewährleisten.

async function assignIssue(owner, repo, issueNumber, assignees, token) {
  const url = `https://api.github.com/repos/${owner}/${repo}/issues/${issueNumber}`;
  const response = await fetch(url, {
    method: 'PATCH',
    headers: {
      Authorization: `token ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ assignees }),
  });

  const updatedIssue = await response.json();
  console.log(`Issue Assigned: ${updatedIssue.html_url}`);
}

assignIssue('YourGitHubUsername', 'my-repo', 42, ['assignee_username'], 'your_token');

? Was das bewirkt:

  • Verwenden Sie diese Funktion nach dem Erstellen eines Problems, um es einem Teammitglied zuzuweisen.
  • Ersetzen Sie 42 durch die Ausgabenummer, die Sie zuweisen möchten.

4. Schritt 4: Offene Probleme für ein besseres Management abrufen

Die Verfolgung aller offenen Probleme ist für die effiziente Verwaltung eines Projekts unerlässlich. Verwenden Sie diesen Code, um alle ungelösten Probleme aufzulisten.

async function getOpenIssues(owner, repo, token) {
  const url = `https://api.github.com/repos/${owner}/${repo}/issues?state=open`;
  const response = await fetch(url, {
    headers: { Authorization: `token ${token}` },
  });

  const issues = await response.json();
  console.log(`Total Open Issues: ${issues.length}`);
  issues.forEach(issue => console.log(`#${issue.number}: ${issue.title}`));
}

getOpenIssues('YourGitHubUsername', 'my-repo', 'your_token');

? Wie es hilft:

  • Ruft alle offenen Probleme im Repository ab.
  • Sie können sie in einem Dashboard anzeigen oder Benachrichtigungen an Entwickler senden.

5. Schritt 5: Überwachen Sie veraltete Probleme und senden Sie Benachrichtigungen

Erstellen Sie Benachrichtigungen für Probleme, die zu lange ungelöst bleiben. Legen Sie einen Cron-Job fest, um diesen Code regelmäßig (z. B. jeden Tag) auszuführen und Benachrichtigungen über Slack oder E-Mail zu senden.

async function checkStaleIssues(owner, repo, daysOld, token) {
  const url = `https://api.github.com/repos/${owner}/${repo}/issues?state=open`;
  const response = await fetch(url, {
    headers: { Authorization: `token ${token}` },
  });

  const issues = await response.json();
  const today = new Date();

  issues.forEach(issue => {
    const createdDate = new Date(issue.created_at);
    const ageInDays = (today - createdDate) / (1000 * 60 * 60 * 24);

    if (ageInDays > daysOld) {
      console.log(`Stale Issue: #${issue.number} - ${issue.title}`);
      // Send alert logic here (e.g., Slack or email notification)
    }
  });
}

checkStaleIssues('YourGitHubUsername', 'my-repo', 7, 'your_token');

? Was das bewirkt:

  • Identifiziert veraltete Probleme, die älter als die angegebene Anzahl von Tagen sind.
  • Verwenden Sie diese Funktion mit Slack-, Discord- oder E-Mail-Benachrichtigungen, um Teammitglieder zu benachrichtigen.

6. Schritt 6: Problembezeichnungen basierend auf Schlüsselwörtern automatisieren

Kennzeichnen Sie Probleme automatisch anhand ihres Inhalts mithilfe einer einfachen Schlüsselwortzuordnung. Dies kann helfen, Probleme sofort zu kategorisieren.

async function createIssue(owner, repo, title, body, token) {
  const url = `https://api.github.com/repos/${owner}/${repo}/issues`;
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Authorization: `token ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ title, body }),
  });

  const issue = await response.json();
  console.log(`Issue Created: ${issue.html_url}`);
}

createIssue('YourGitHubUsername', 'my-repo', 'Bug Report', 'Details about the bug.', 'your_token');

? Verwendung:

  • Automatisch Fügen Sie relevante Probleme mit Labels wie „Fehler“ oder „Funktionsanforderung“ hinzu.
  • Kombinieren Sie dies mit der Textanalyse, um Schlüsselwörter (z. B. „Fehler“, „Anfrage“) im Titel oder in der Beschreibung des Problems zu erkennen.

7. Schritt 7: Erstellen Sie ein Dashboard zur Anzeige von Problemen

Erstellen Sie ein Dashboard mit JavaScript und der GitHub-API, um alle offenen Probleme auf einer Webseite anzuzeigen. Sie können Problemstatus, Zuweisungen und Beschriftungen visualisieren.

async function assignIssue(owner, repo, issueNumber, assignees, token) {
  const url = `https://api.github.com/repos/${owner}/${repo}/issues/${issueNumber}`;
  const response = await fetch(url, {
    method: 'PATCH',
    headers: {
      Authorization: `token ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ assignees }),
  });

  const updatedIssue = await response.json();
  console.log(`Issue Assigned: ${updatedIssue.html_url}`);
}

assignIssue('YourGitHubUsername', 'my-repo', 42, ['assignee_username'], 'your_token');

? So funktioniert das:

  • Dieser Code zeigt Probleme dynamisch in einem webbasierten Dashboard an.
  • Gestalten Sie es mit CSS, um es optisch ansprechend zu gestalten.

8. Schritt 8: Stellen Sie Ihren Issue Tracker bereit

Bereitstellungsoptionen:

  1. Vercel/Netlify: Perfekt für die Bereitstellung statischer Dashboards.
  2. Heroku: Ideal für Back-End-Dienste, die regelmäßige Benachrichtigungen benötigen.
  3. GitHub-Aktionen: Automatisieren Sie Aufgaben direkt in GitHub (z. B. Erstellen von Problemen bei Commits).

9. Fazit

Durch die Erstellung eines Issue-Trackers mit der GitHub-API automatisieren Sie das Projektmanagement, verbessern die Produktivität und stellen die Verantwortlichkeit sicher. Unabhängig davon, ob Sie kleine Projekte oder große Open-Source-Repositories verwalten, können diese Automatisierungstools Zeit sparen und Ihr Team auf dem Laufenden halten.

Das obige ist der detaillierte Inhalt vonUltimativer Leitfaden: Erstellen Sie einen vollständigen Issue Tracker mit der GitHub-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn