كيفية بناء تطبيق تفاعل CRUD مع التخزين السحابي Supabase

أحدثت React ثورة في الطريقة التي يبني بها المطورون واجهات مستخدم لتطبيقات الويب. توفر البنية القائمة على المكونات والنحو التعريفي أساسًا قويًا لإنشاء تجارب مستخدم تفاعلية وديناميكية.

بصفتك مطور React ، فإن إتقان كيفية تنفيذ عمليات CRUD (إنشاء ، قراءة ، تحديث ، حذف) يعد خطوة أولى حاسمة نحو بناء حلول ويب قوية وفعالة.

تعرف على كيفية إنشاء تطبيق React CRUD بسيط ، باستخدام Supabase Cloud Storage كحل خلفي.

Supabase Backend كخدمة الحل

موفرو Backend-as-a-Service (BaaS)، مثل Supabase ، تقدم بديلاً مناسبًا لبناء خدمة خلفية كاملة من البداية لتطبيقات الويب الخاصة بك. من الناحية المثالية ، توفر هذه الحلول نطاقًا واسعًا من خدمات الواجهة الخلفية المبنية مسبقًا والتي تعد ضرورية لإعداد نظام خلفية فعال لتطبيقات الويب React الخاصة بك.

باستخدام BaaS ، يمكنك استخدام ميزات مثل تخزين البيانات وأنظمة المصادقة والاشتراكات في الوقت الفعلي والمزيد دون الحاجة إلى تطوير هذه الخدمات وصيانتها بشكل مستقل.

من خلال دمج حلول BaaS مثل Supabase في مشروعك ، يمكنك تقليل وقت التطوير والشحن بشكل كبير مع الاستمرار في الاستفادة من الخدمات الخلفية القوية.

قم بإعداد مشروع التخزين السحابي Supabase

للبدء ، توجه إلى موقع ويب Supabase، والتسجيل للحصول على حساب.

1. بمجرد التسجيل للحصول على حساب ، قم بتسجيل الدخول إلى حسابك لوحة القيادة صفحة.
2. اضغط على مشروع جديد زر.
3. املأ تفاصيل المشروع وانقر فوق إنشاء مشروع جديد.
4. مع إعداد المشروع ، حدد وانقر فوق محرر SQL زر الميزة في لوحة الميزات الموجودة في الجزء الأيسر.
5. قم بتشغيل عبارة SQL أدناه في ملف محرر SQL لإنشاء جدول تجريبي. سيحتفظ بالبيانات التي ستستخدمها مع تطبيق React.

   يخلقطاولة منتجات (
    معرف كبير تم إنشاؤه افتراضيًا كمفتاح أساسي للهوية ،
    نص الاسم
    نص الوصف
   );

قم بإعداد تطبيق React CRUD

أنشئ تطبيق React، وانتقل إلى الدليل الجذر ، وأنشئ ملفًا جديدًا ، .env، لتعيين بعض متغيرات البيئة. توجه إلى قاعدة Supabase الخاصة بك إعدادات الصفحة ، افتح ملف API ، وانسخ قيم عنوان المشروع و مفتاح مجهول العام. الصقها في ملف env الخاص بك:

REACT_APP_SUPABASE_URL = عنوان URL الخاص بالمشروع
REACT_APP_SUPABASE_ANON_KEY = مفتاح مجهول عام

بعد ذلك ، قم بتشغيل هذا الأمر لتثبيت مكتبة JavaScript الخاصة بـ Supabase في مشروع React الخاص بك:

npm install @ supabase / supabase-js

تكوين عميل قاعدة Supabase

في ال src الدليل ، قم بإنشاء ملف utils / SupabaseClient.js الملف والكود أدناه:

يستورد {createClient} من"@ supabase / supabase-js"; 
مقدار ثابت supabaseURL = process.env. REACT_APP_SUPABASE_URL ،
مقدار ثابت supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY ،
يصدّرمقدار ثابت supabase = createClient (supabaseURL ، supabaseAnonKey) ؛

ينشئ هذا الرمز مثيل عميل Supabase من خلال توفير عنوان URL لـ Supabase ومفتاح anon عام ، مما يسمح لتطبيق React بالتواصل مع واجهات برمجة تطبيقات Supabase وتنفيذ عمليات CRUD.

يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.

تنفيذ عمليات CRUD

الآن بعد أن نجحت في إعداد التخزين السحابي لـ Supabase ومشروع React الخاص بك ، قم بتنفيذ عمليات CRUD في تطبيق React الخاص بك.

1. أضف البيانات إلى قاعدة البيانات

افتح ال src / App.js file ، احذف كود React boilerplate ، وأضف ما يلي:

يستورد {useState ، useEffect} من'تتفاعل';
يستورد برودوكت كارد من"./components/ProductCard";
يستورد {supabase} من"./utils/SupabaseClient";
يستورد"./App.css";
يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت [name، setName] = useState ('');
مقدار ثابت [description، setDescription] = useState ('');
غير متزامنوظيفةأضف منتج() {
يحاول {
مقدار ثابت {البيانات ، الخطأ} = انتظر supabase
 .من('منتجات')
 .إدراج({
 اسم اسم،
 الوصف: الوصف
 })
 .أعزب()؛
لو (خطأ) يرمي خطأ؛
نافذة او شباك.location.reload () ؛
 } يمسك (خطأ) {
 تنبيه (رسالة خطأ) ؛
 }
 }

يعرّف هذا الرمز ملف أضف منتج المعالج التي تُدرج بشكل غير متزامن سجلًا جديدًا في ملف منتجات الجدول في قاعدة البيانات السحابية. إذا نجحت عملية الإدراج ، فسيتم إعادة تحميل الصفحة لتعكس قائمة المنتجات المحدثة.

2. قراءة البيانات من قاعدة البيانات السحابية

حدد دالة معالج لجلب البيانات المخزنة من قاعدة البيانات.

مقدار ثابت [products، setProducts] = useState ([]) ؛
غير متزامنوظيفةgetProducts() {
يحاول {
مقدار ثابت {البيانات ، الخطأ} = انتظر supabase
 .من('منتجات')
 .يختار('*')
 .حد(10);
لو (خطأ) يرمي خطأ؛
لو (البيانات! = باطل) {
 setProducts (البيانات) ؛
 }
 } يمسك (خطأ) {
 تنبيه (رسالة خطأ) ؛
 }
 }
 useEffect (() => {
 getProducts () ؛
 }, []);

يقوم هذا الرمز بجلب البيانات من قاعدة البيانات بشكل غير متزامن. يسترد استعلام الجلب جميع البيانات من جدول المنتجات ، ويحد من النتائج بحد أقصى 10 سجلات ، ويحدث منتجات' الحالة مع البيانات المسترجعة.

ال useEffectرد فعل هوك يدير ال getProducts تعمل عندما يتصاعد المكون. يضمن هذا جلب بيانات المنتجات وعرضها عند تقديم المكون في البداية. أخيرًا ، أضف الكود الذي يعرض عناصر JSX المدخلة على المتصفح للسماح للمستخدمين بإضافة منتجات إلى قاعدة بيانات Supabase وعرض المنتجات الحالية التي تم جلبها من قاعدة البيانات.

يعود (
 <>

"رأس حاوية">
منتجات المتجر </h3>
 </div>
 </header>


أضف بيانات المنتجات إلى قاعدة بيانات Supabase </h3>


"إنشاء-منتج-حاوية">


اسم المنتج </label>
 اكتب ="نص"
 معرف ="اسم"
 onChange = {(e) => setName (e.target.value)}
 />
وصف المنتج </label>
 اكتب ="نص"
 معرف ="وصف"
 onChange = {(e) => setDescription (e.target.value)}
 />


 addProduct ()}>
 أضف منتج
 </button>
 </div>
 </div>




المنتجات الحالية في قاعدة البيانات </h3>

"حاوية قائمة المنتجات">
 خريطة {products.map ((منتج) => (



 </div>
 ))}
 </div>
 </>
 );
}

البيانات التي تم جلبها في ملف مجموعة المنتجات يتم تمريرها كدعامات وعرضها ديناميكيًا داخل ملف برودوكت كارد المكون باستخدام خريطة وظيفة.

3. تحديث وحذف البيانات الموجودة في قاعدة البيانات

إنشاء ملف المكونات / ProductCard.js ملف في /src الدليل. قبل تحديد وظائف المعالج ، دعنا نرى الحالات وعناصر JSX التي ستنفذها في هذا المكون.

يستورد {useState} من'تتفاعل';
يستورد {supabase} من"../utils/SupabaseClient";
يستورد"./productcard.styles.css";
يصدّرتقصيروظيفةبرودوكت كارد(الدعائم) {
مقدار ثابت المنتج = المنتج الدعائم ؛
مقدار ثابت [edit، setEditing] = useState (خطأ شنيع);
مقدار ثابت [name، setName] = useState (product.name) ؛
مقدار ثابت [description، setDescription] = useState (product.description) ؛
يعود (
"بطاقة المنتج">


 {تحرير خطأ شنيع? (


{product.name} </h5>


{product.description} </p>
"زر الحذف" onClick = {() => deleteProduct ()}> حذف المنتج </button>
"زر التحرير" onClick = {() => setEditing (حقيقي)}> تحرير المنتج </button>
 </div>
 ): (


تحرير المنتج </h4>
"زر الرجوع للخلف" onClick = {() => setEditing (خطأ شنيع)}> رجوع </button>


"اسم"> اسم المنتج </label>
 اكتب ="نص"
 معرف ="اسم"
 defaultValue = {product.name}
 onChange = {(e) => setName (e.target.value)} />
"وصف"> وصف المنتج </label>
 اكتب ="نص"
 معرف ="وصف"
 defaultValue = {product.description}
 onChange = {(e) => setDescription (e.target.value)} />


"زر التحديث" onClick = {() => updateProduct ()}> تحديث المنتج في Supabase DB </button>
 </div>)}
 </div>
 </div>
 );
}

غير متزامنوظيفةتحديث المنتج() {
يحاول {
مقدار ثابت {البيانات ، الخطأ} = انتظر supabase
 .من('منتجات')
 .تحديث({
 اسم اسم،
 الوصف: الوصف
 })
 .eq ('بطاقة تعريف'، معرف المنتج)؛
لو (خطأ) يرمي خطأ؛
نافذة او شباك.location.reload () ؛
 } يمسك (خطأ) {
 تنبيه (رسالة خطأ) ؛
 }
}

غير متزامنوظيفةحذف المنتج() {
يحاول {
مقدار ثابت {البيانات ، الخطأ} = انتظر supabase
 .من('منتجات')
 .يمسح()
 .eq ('بطاقة تعريف'، معرف المنتج)؛
لو (خطأ) يرمي خطأ؛
نافذة او شباك.location.reload () ؛
 } يمسك (خطأ) {
 تنبيه (رسالة خطأ) ؛
 }
}