برنامه نویسی

# با استفاده از API های منبع باز مانند Wakatime برای ردیابی آمار برنامه نویسی خود در پروژه های خود

مقدمه

API های منبع باز راهی عالی برای ادغام داده های مفید در پروژه های شما ارائه می دهند. Wakatime یکی از چنین API است که به توسعه دهندگان کمک می کند تا فعالیت برنامه نویسی خود را در پروژه ها و زبان های مختلف ردیابی کنند. در این مقاله ، ما چگونگی واکشی آمار برنامه نویسی از Wakatime را بررسی می کنیم و از آنها در یک برنامه React برای تجسم زمان کدگذاری با استفاده از Chart.js استفاده خواهیم کرد.

مرحله 1: کلید API Wakatime خود را دریافت کنید

برای دسترسی به API Wakatime ، به یک کلید API نیاز دارید. این مراحل را برای دریافت آن دنبال کنید:

  1. به Wakatime بروید.
  2. وارد سیستم شوید و به سمت خود حرکت کنید تنظیمات حساببشر
  3. زیر کلید API، کلید را کپی کنید.

مرحله 2: داده های Wakatime API را واگذار کنید

Wakatime نقاط پایانی مختلفی را ارائه می دهد ، اما برای این مثال ، ما از آن استفاده خواهیم کرد /users/current/stats/last_7_days نقطه پایانی برای به دست آوردن آمار برنامه نویسی برای هفته گذشته.

مثال درخواست API

curl -H "Authorization: Bearer YOUR_API_KEY" \
     https://wakatime.com/api/v1/users/current/stats/last_7_days
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

پاسخ نمونه

{
  "stats": {
    "data": {
      "languages": [
        { "name": "JavaScript", "total_seconds": 14400 },
        { "name": "Python", "total_seconds": 7200 }
      ],
      "projects": [
        { "name": "Portfolio Website", "total_seconds": 10800 },
        { "name": "To-Do App", "total_seconds": 3600 }
      ]
    }
  }
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

مرحله 3: آمار Wakatime را در یک برنامه React واگذار و نمایش دهید

حال ، بیایید یک Statistics.tsx مؤلفه در یک برنامه React برای واکشی و نمایش این داده ها با استفاده از Chart.js.

وابستگی ها را نصب کنید

دستور زیر را برای نصب Axios و Chart.js اجرا کنید:

npm install axios chart.js react-chartjs-2
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

ایجاد کردن Statistics.tsx

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const Statistics: React.FC = () => {
  const [chartData, setChartData] = useState({ labels: [], datasets: [] });
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:10000/api/stats");
        console.log("Raw API Response:", response.data);

        const apiData = response.data?.stats?.data;
        if (!apiData || !apiData.languages || !apiData.projects) {
          console.warn("⚠️ No valid data found in API response.");
          return;
        }

        setChartData({
          labels: apiData.languages.map((lang) => lang.name),
          datasets: [
            {
              label: "Hours Spent",
              data: apiData.languages.map((lang) => lang.total_seconds / 3600),
              backgroundColor: "rgba(54, 162, 235, 0.6)",
            },
          ],
        });

        setProjects(apiData.projects.map((project) => ({
          name: project.name,
          timeSpent: `${Math.floor(project.total_seconds / 3600)} hrs`,
          link: `/projects/${encodeURIComponent(project.name)}`,
        })));
      } catch (error) {
        console.error("❌ Error fetching WakaTime data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="p-6">
      <h2 className="text-3xl font-bold">Coding Stats (Last 7 Days)h2>
      <div>
        <Bar data={chartData} options={{ responsive: true }} />
      div>
      <h3 className="text-2xl">Projectsh3>
      {projects.length > 0 ? (
        projects.map((project, index) => (
          <a key={index} href={project.link} className="block p-2">
            {project.name} - {project.timeSpent}
          a>
        ))
      ) : (
        <p>No project data available.p>
      )}
    div>
  );
};

export default Statistics;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

مرحله 4: برنامه React خود را اجرا کنید

اطمینان حاصل کنید که سرور API شما در حال اجرا است و سپس برنامه React خود را شروع کنید:

npm start
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

به مرورگر خود بروید و بررسی کنید /statistics مسیر برای دیدن تجسم.

پایان

با ادغام API منبع باز Wakatime ، می توانید فعالیت برنامه نویسی خود را پیگیری کنید ، زبانهای مورد استفاده خود را تجسم کنید و زمان پروژه را کنترل کنید-همه در داخل داشبورد سفارشی خود! 🚀

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا