العودة للمقالات

بناء لوحات معلومات تفاعلية باستخدام React و Functions بدون خادم

Majd Muhtaseb03‏/07‏/20257 دقيقة

مقدمة

تُعد لوحات المعلومات التفاعلية طريقة قوية لتصور البيانات والتفاعل معها. توضح هذه المقالة كيفية إنشاء لوحة معلومات بسيطة وفعالة باستخدام React للواجهة الأمامية ووظائف بدون خادم (تحديدًا AWS Lambda) للخلفية. يوفر هذا التصميم قابلية التوسع وفعالية التكلفة وسهولة النشر.

إعداد الواجهة الأمامية لـ React

أولاً ، قم بإنشاء تطبيق React جديد:

npx create-react-app my-dashboard
cd my-dashboard

قم بتثبيت المكتبات الضرورية:

npm install axios chart.js react-chartjs-2

أنشئ مكون Dashboard.js:

// src/Dashboard.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';

const Dashboard = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/.netlify/functions/getData'); // يفترض إعداد وظائف Netlify
        setData(response.data);
      } catch (error) {
        console.error("Error fetching data: ", error);
      }
    };

    fetchData();
  }, []);

  if (!data) {
    return <div>جاري التحميل...</div>;
  }

  const chartData = {
    labels: data.map(item => item.timestamp),
    datasets: [
      {
        label: 'القيمة',
        data: data.map(item => item.value),
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgba(255, 99, 132, 0.2)',
      },
    ],
  };

  const chartOptions = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };

  return (
    <div>
      <h1>لوحة المعلومات</h1>
      <Line data={chartData} options={chartOptions} />
    </div>
  );
};

export default Dashboard;

تنفيذ وظيفة بدون خادم (AWS Lambda)

يستخدم هذا المثال AWS Lambda مع API Gateway.

// netlify/functions/getData.js (لمثال نشر Netlify)
exports.handler = async (event, context) => {
  // استبدل هذا بمنطق استرجاع البيانات الخاص بك (على سبيل المثال ، من قاعدة بيانات)
  const data = [
    { timestamp: '2024-01-01', value: 10 },
    { timestamp: '2024-01-02', value: 15 },
    { timestamp: '2024-01-03', value: 13 },
    { timestamp: '2024-01-04', value: 20 },
    { timestamp: '2024-01-05', value: 18 },
  ];

  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*" // مطلوب لدعم CORS للعمل
    },
    body: JSON.stringify(data),
  };
};

انشر الوظيفة على AWS Lambda وقم بتكوين نقطة نهاية API Gateway لتشغيلها. أو استخدم خدمة مثل Netlify أو Vercel التي تبسط نشر الوظيفة.

التكامل مع React

قم بتكوين تطبيق React الخاص بك لاستدعاء نقطة نهاية API Gateway. في مثال React أعلاه ، تُعد نقطة النهاية / .netlify/functions/getData عنصر نائب لوظائف Netlify. إذا كنت تستخدم AWS API Gateway ، فقم بتعديل نقطة النهاية وفقًا لذلك.

خاتمة

يوفر هذا المثال إطارًا أساسيًا لبناء لوحات معلومات تفاعلية. يمكنك توسيعه عن طريق إضافة المزيد من التصورات المعقدة ومصادر البيانات وتفاعلات المستخدم. تعد الوظائف بدون خادم حلاً فعالاً من حيث التكلفة وقابل للتطوير للتعامل مع استرجاع البيانات ومعالجتها في تطبيقات الويب الحديثة.