Cara Menambah Statistik Sumbangan GitHub pada Apl React Anda

Ingin mempamerkan aktiviti GitHub anda dalam portfolio React anda? Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat komponen React yang memaparkan jumlah sumbangan GitHub anda menggunakan API GraphQL GitHub, lengkap dengan caching yang cekap. Mari kita bina sesuatu yang keren! ?

Apa yang Kami Akan Bina

Kami akan mencipta komponen React yang:

• Ambil sumbangan GitHub anda dari 2020 hingga sekarang
• Termasuk kedua-dua sumbangan awam dan swasta
• Melaksanakan caching sisi klien untuk mengoptimumkan prestasi
• Menunjukkan keadaan pemuatan semasa mengambil
• Mengendalikan ralat dengan anggun

Prasyarat

Sebelum kami bermula, anda memerlukan:

1. Token Akses Peribadi GitHub (dengan baca:skop pengguna)
2. Projek React disediakan (menggunakan Create React App, Next.js atau persediaan pilihan anda)
3. Pengetahuan asas tentang cangkuk React dan operasi async

Langkah 1: Menyediakan Token GitHub

Mula-mula, buat fail .env dalam akar projek anda dan tambahkan token GitHub anda:

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here

Langkah 2: Mencipta Utiliti Mengambil Data

Buat fail baharu bernama githubApi.js:

export async function fetchGithubCommits(username) {
  const GITHUB_TOKEN = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
  const CACHE_KEY = `github-commits-${username}`;
  const CACHE_TTL = 3600; // 1 hour in seconds

  if (!GITHUB_TOKEN) {
    console.error("No GitHub token found!");
    throw new Error("GitHub token is required");
  }

  const cachedData = getCachedData(CACHE_KEY);
  if (cachedData) {
    return cachedData.value;
  }

  try {
    const currentYear = new Date().getFullYear();
    const startYear = 2020;
    let totalCommits = 0;

    for (let year = startYear; year <= currentYear; year++) {
      const query = `
        query($username: String!, $from: DateTime!, $to: DateTime!) {
          user(login: $username) {
            contributionsCollection(from: $from, to: $to) {
              totalCommitContributions
              restrictedContributionsCount
            }
          }
        }
      `;

      const response = await fetch("https://api.github.com/graphql", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${GITHUB_TOKEN}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query,
          variables: {
            username,
            from: `${year}-01-01T00:00:00Z`,
            to: `${year}-12-31T23:59:59Z`,
          },
        }),
      });

      const data = await response.json();
      if (data.errors) {
        throw new Error(data.errors[0].message);
      }

      const yearCommits =
        (data.data?.user?.contributionsCollection?.totalCommitContributions || 0) +
        (data.data?.user?.contributionsCollection?.restrictedContributionsCount || 0);

      totalCommits += yearCommits;
    }

    setCachedData(CACHE_KEY, totalCommits, CACHE_TTL);
    return totalCommits;
  } catch (error) {
    console.error("Error fetching GitHub commits:", error);
    throw error;
  }
}

function setCachedData(key, value, ttl) {
  const item = {
    value,
    timestamp: Date.now(),
    ttl: ttl * 1000,
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getCachedData(key) {
  try {
    const item = localStorage.getItem(key);
    if (!item) return null;

    const parsedItem = JSON.parse(item);
    const now = Date.now();

    if (now - parsedItem.timestamp > parsedItem.ttl) {
      localStorage.removeItem(key);
      return null;
    }

    return parsedItem;
  } catch {
    return null;
  }
}

export function invalidateCommitsCache(username) {
  localStorage.removeItem(`github-commits-${username}`);
}

Langkah 3: Mencipta Komponen Reaksi

Buat fail baharu bernama GitHubStats.js:

import React, { useState, useEffect } from 'react';
import { fetchGithubCommits } from './githubApi';

const GitHubStats = ({ username }) => {
  const [commits, setCommits] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchStats = async () => {
      try {
        setLoading(true);
        setError(null);
        const totalCommits = await fetchGithubCommits(username);
        setCommits(totalCommits);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchStats();
  }, [username]);

  if (loading) {
    return <div>Loading GitHub stats...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className="github-stats">
      <h2>GitHub Contributions</h2>
      <p>Total commits since 2020: {commits.toLocaleString()}</p>
    </div>
  );
};

export default GitHubStats;

Langkah 4: Menambah Gaya

Jom tambah beberapa penggayaan asas. Cipta GitHubStats.css:

.github-stats {
  padding: 20px;
  border-radius: 8px;
  background-color: #f6f8fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.github-stats h2 {
  margin: 0 0 15px 0;
  color: #24292e;
}

.github-stats p {
  font-size: 1.2em;
  color: #586069;
}

Langkah 5: Menggunakan Komponen

Kini anda boleh menggunakan komponen dalam apl anda:

import GitHubStats from './GitHubStats';

function App() {
  return (
    <div className="App">
      <h1>My Developer Portfolio</h1>
      <GitHubStats username="your-github-username" />
    </div>
  );
}

Menjadikannya Lebih Baik: Ciri Lanjutan

1. Menambah Butang Muat Semula

Kemas kini GitHubStats.js untuk memasukkan pilihan muat semula manual:

import React, { useState, useEffect } from 'react';
import { fetchGithubCommits, invalidateCommitsCache } from './githubApi';

const GitHubStats = ({ username }) => {
  // ... previous state declarations ...

  const handleRefresh = async () => {
    invalidateCommitsCache(username);
    await fetchStats();
  };

  return (
    <div className="github-stats">
      <h2>GitHub Contributions</h2>
      <p>Total commits since 2020: {commits.toLocaleString()}</p>
      <button onClick={handleRefresh} disabled={loading}>
        {loading ? 'Refreshing...' : 'Refresh Stats'}
      </button>
    </div>
  );
};

2. Menambah Pecahan Tahun demi Tahun

Kami boleh mengubah suai komponen untuk menunjukkan sumbangan setahun:

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here

Petua Prestasi

1. Strategi Caching: Pelaksanaan semasa menyimpan cache data selama sejam. Laraskan CACHE_TTL berdasarkan keperluan anda.
2. Sempadan Ralat: Pertimbangkan untuk membalut komponen dalam Sempadan Ralat untuk mengendalikan ralat yang tidak dijangka dengan anggun.
3. Memuatkan Keadaan: Tambahkan pemuat rangka dan bukannya teks "Memuatkan..." yang ringkas untuk UX yang lebih baik.

Isu dan Penyelesaian Biasa

1. Isu CORS: Pastikan anda menggunakan titik akhir dan pengepala API GitHub yang betul.
2. Kebenaran Token: Pastikan token GitHub anda mempunyai kebenaran yang diperlukan.
3. Penghadan Kadar: Kendalikan had kadar API GitHub dengan menyemak baki had kadar dalam pengepala respons.

---

Anda kini mempunyai komponen statistik GitHub yang berfungsi sepenuhnya dalam apl React anda! Pelaksanaan ini menyediakan asas kukuh yang boleh anda bina. Beberapa idea untuk penambahbaikan:

• Tambah lebih banyak statistik GitHub (seperti bintang, PR, isu)
• Buat perwakilan visual menggunakan carta
• Tambah animasi untuk memuatkan dan kemas kini
• Laksanakan pengendalian ralat yang lebih terperinci

Ingat untuk memastikan token GitHub anda selamat dan jangan sekali-kali memasukkannya ke repositori anda. Selamat mengekod! ?

Atas ialah kandungan terperinci Cara Menambah Statistik Sumbangan GitHub pada Apl React Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!