بناء لوحات معلومات تفاعلية باستخدام React و Functions بدون خادم
مقدمة
تُعد لوحات المعلومات التفاعلية طريقة قوية لتصور البيانات والتفاعل معها. توضح هذه المقالة كيفية إنشاء لوحة معلومات بسيطة وفعالة باستخدام 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 ، فقم بتعديل نقطة النهاية وفقًا لذلك.
خاتمة
يوفر هذا المثال إطارًا أساسيًا لبناء لوحات معلومات تفاعلية. يمكنك توسيعه عن طريق إضافة المزيد من التصورات المعقدة ومصادر البيانات وتفاعلات المستخدم. تعد الوظائف بدون خادم حلاً فعالاً من حيث التكلفة وقابل للتطوير للتعامل مع استرجاع البيانات ومعالجتها في تطبيقات الويب الحديثة.