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

بناء تطبيق React غير خادم مع Vercel و FaunaDB

المؤلفMajd Muhtaseb02‏/05‏/202512 دقيقة
بناء تطبيق React غير خادم مع Vercel و FaunaDB

مقدمة

تزداد شعبية الهندسة المعمارية غير الخادم بسبب قابليتها للتوسع وفعاليتها من حيث التكلفة. ستوجهك هذه المقالة خلال بناء تطبيق React بسيط، ونشره على Vercel، وربطه بـ FaunaDB.

المتطلبات الأساسية

  • تثبيت Node.js و npm
  • حساب Vercel
  • حساب FaunaDB

إعداد تطبيق React

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

npx create-react-app my-serverless-app
cd my-serverless-app

دمج FaunaDB

قم بتثبيت برنامج تشغيل FaunaDB JavaScript:

npm install faunadb

أنشئ ملف .env في جذر مشروعك وأضف مفتاح FaunaDB السري الخاص بك:

FAUNADB_SECRET=<مفتاح_FaunaDB_الخاص_بك>

هام: لا تقم أبدًا بتضمين ملف .env الخاص بك في التحكم في الإصدار.

الآن، قم بإنشاء ملف باسم fauna.js في الدليل src لتهيئة عميل FaunaDB:

// src/fauna.js
import faunadb from 'faunadb';

const q = faunadb.query;
const client = new faunadb.Client({
  secret: process.env.REACT_APP_FAUNADB_SECRET,
});

export { client, q };

ملاحظة: حتى يتمكن تطبيق React من قراءة متغيرات البيئة، يجب أن تسبقها بـ REACT_APP_. تذكر إعادة تسمية FAUNADB_SECRET في ملف .env الخاص بك إلى REACT_APP_FAUNADB_SECRET.

إنشاء مكون بسيط

لنقم بإنشاء مكون بسيط يجلب البيانات من FaunaDB. أولاً، قم بإنشاء مجموعة في FaunaDB باسم "todos". ثم أنشئ فهرسًا باسم "all_todos".

// src/components/Todo.js
import React, { useState, useEffect } from 'react';
import { client, q } from '../fauna';

function Todo() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const result = await client.query(
          q.Map(
            q.Paginate(q.Match(q.Index("all_todos"))),
            q.Lambda("X", q.Get(q.Var("X")))
          )
        );
        setTodos(result.data.map(todo => ({ id: todo.ref.id, ...todo.data })));
      } catch (error) {
        console.error('Error fetching todos:', error);
      }
    };

    fetchTodos();
  }, []);

  return (
    <div>
      <h2>مهام</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default Todo;

قم بتعديل App.js الخاص بك لتضمين مكون Todo

import React from 'react';
import Todo from './components/Todo';

function App() {
  return (
    <div className="App">
      <Todo />
    </div>
  );
}

export default App;

تذكر إضافة حقل text إلى عناصر مهمتك عند إنشائها في FaunaDB حتى يتم عرض المكون أعلاه بشكل صحيح.

النشر إلى Vercel

  1. قم بتثبيت التعليمات البرمجية الخاصة بك في مستودع Git (على سبيل المثال، GitHub).
  2. أنشئ مشروع Vercel وقم بتوصيله بمستودع Git الخاص بك.
  3. أضف متغير البيئة REACT_APP_FAUNADB_SECRET إلى إعدادات مشروع Vercel الخاص بك.

ستقوم Vercel بنشر تطبيقك تلقائيًا كلما دفعت تغييرات إلى مستودع Git الخاص بك.

خاتمة

لقد نجحت في بناء ونشر تطبيق React غير خادم باستخدام Vercel و FaunaDB. يوفر هذا أساسًا متينًا لبناء تطبيقات غير خادم أكثر تعقيدًا.