ホームページ > ウェブフロントエンド > jsチュートリアル > 究極のガイド: GitHub API を使用して完全な問題追跡ツールを構築する

究極のガイド: GitHub API を使用して完全な問題追跡ツールを構築する

Barbara Streisand
リリース: 2024-10-31 10:33:53
オリジナル
1065 人が閲覧しました

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

このガイドは、GitHub API と統合された自動化された効率的な 問題トラッカー を作成するのに役立ちます。課題の作成、割り当て、通知などを設定する方法をステップバイステップで学習します。


1.ステップ 1: GitHub パーソナル アクセス トークン (PAT) を取得します

プライベート リポジトリにアクセスしたり、レート制限を回避するには、パーソナル アクセス トークン (PAT) が必要です。

トークンの生成方法:

  1. 設定 > に移動します。開発者設定 > GitHub アカウントのパーソナル アクセス トークン
  2. 新しいトークンを生成をクリックします。
  3. リポジトリなどの権限を選択します (リポジトリ アクセス用)。
  4. トークンを保存します。コードでの承認に必要になります。

2. ステップ 2: 基本的な問題追跡ツールを作成する

このコードを使用すると、GitHub API 経由で任意のリポジトリに問題を作成できます。

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');
ログイン後にコピー
ログイン後にコピー

? 仕組み:

  • 「YourGitHubUsername」と「my-repo」を自分のユーザー名とリポジトリ名に置き換えます。
  • この関数は新しい問題をリポジトリに投稿します。
  • コンソール ログで問題のリンクを確認してください。

3. ステップ 3: 課題の割り当てを自動化する

すべての問題がチーム メンバーに自動的に割り当てられるようにします。この手順により時間を節約し、説明責任を確保できます。

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');
ログイン後にコピー
ログイン後にコピー

? これが行うこと:

  • 問題を作成した後、この機能を使用して、チームメンバーに割り当てします。
  • 42 を割り当てたい問題番号に置き換えます。

4. ステップ 4: 管理を改善するために未解決の問題を取得する

すべての未解決の問題を追跡することは、プロジェクトを効率的に管理するために不可欠です。このコードを使用して、すべての未解決の問題をリストします。

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');
ログイン後にコピー

? それがどのように役立つか:

  • リポジトリ内のすべての未解決の問題を取得します。
  • ダッシュボードに表示したり、開発者に通知を送信したりできます。

5.ステップ 5: 古い問題を監視し、アラートを送信する

長期間未解決のままになっている問題についてのアラートを作成します。 cron ジョブを設定して、このコードを定期的に (毎日など) 実行し、Slack または電子メールで通知を送信します。

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');
ログイン後にコピー

? これが行うこと:

  • 指定された日数よりも古い古い問題を特定します。
  • この機能を Slack、Discord、または電子メール アラートで使用して、チーム メンバーに通知します。

6. ステップ 6: キーワードに基づいて問題ラベルを自動化する

単純なキーワード一致を使用して、内容に基づいて問題に自動的にラベルを付けます。これにより、問題を即座に分類することができます。

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');
ログイン後にコピー
ログイン後にコピー

? 使用法:

  • 関連する問題に「バグ」や「機能リクエスト」などのラベルを自動的に追加します。
  • これを テキスト分析と組み合わせて、問題のタイトルまたは説明内のキーワード (「エラー」、「リクエスト」など) を検出します。

7. ステップ 7: 問題を表示するダッシュボードを構築する

JavaScript と GitHub API を使用して ダッシュボード を作成し、未解決の問題をすべて Web ページに表示します。課題のステータス、割り当て、ラベルを視覚化できます。

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');
ログイン後にコピー
ログイン後にコピー

? 仕組み:

  • このコードは、Web ベースのダッシュボードに問題を動的に表示します。
  • CSS でスタイルを設定して、視覚的に魅力的なものにします。

8. ステップ 8: 問題追跡ツールを導入する

導入オプション:

  1. Vercel/Netlify: 静的ダッシュボードの展開に最適です。
  2. Heraku: 定期的なアラートが必要なバックエンド サービスに最適です。
  3. GitHub アクション: GitHub で直接タスクを自動化します (コミット時に問題を作成するなど)。

9. 結論

GitHub API を使用して 問題トラッカー を構築することで、プロジェクト管理を自動化し、生産性を向上させ、説明責任を確保します。小規模なプロジェクトを管理している場合でも、大規模なオープンソース リポジトリを管理している場合でも、これらの自動化ツールを使用すると時間を節約し、チームの計画を順調に進めることができます。

以上が究極のガイド: GitHub API を使用して完全な問題追跡ツールを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート