سوپا بیس کلاؤڈ اسٹوریج کے ساتھ CRUD ری ایکٹ ایپلیکیشن کیسے بنائیں

آپ جیسے قارئین MUO کو سپورٹ کرنے میں مدد کرتے ہیں۔ جب آپ ہماری سائٹ پر لنکس کا استعمال کرتے ہوئے خریداری کرتے ہیں، تو ہم ملحق کمیشن حاصل کر سکتے ہیں۔ مزید پڑھ.

React نے ویب ایپلیکیشنز کے لیے ڈویلپرز کے صارف انٹرفیس بنانے کے طریقے میں انقلاب برپا کر دیا ہے۔ اس کے اجزاء پر مبنی فن تعمیر اور اعلانیہ نحو انٹرایکٹو اور متحرک صارف کے تجربات تخلیق کرنے کے لیے ایک طاقتور بنیاد فراہم کرتے ہیں۔

ایک React ڈویلپر کے طور پر، CRUD (تخلیق کریں، پڑھیں، اپ ڈیٹ کریں، حذف کریں) آپریشنز کو نافذ کرنے کے طریقے پر مہارت حاصل کرنا مضبوط اور موثر ویب حل بنانے کی جانب ایک اہم پہلا قدم ہے۔

دن کی ویڈیو کا میک یوز مواد کے ساتھ جاری رکھنے کے لیے اسکرول کریں۔

Supabase Cloud Storage کو اپنے بیک اینڈ حل کے طور پر استعمال کرتے ہوئے، ایک سادہ React CRUD ایپلیکیشن بنانے کا طریقہ سیکھیں۔

سوپا بیس بیک اینڈ بطور سروس حل

بیک اینڈ-ایس-اے-سروس (BaaS) فراہم کرنے والے Supabase کی طرح، آپ کی ویب ایپلیکیشنز کے لیے شروع سے ہی مکمل طور پر جدید بیک اینڈ سروس بنانے کا ایک آسان متبادل پیش کرتے ہیں۔ مثالی طور پر، یہ حل پہلے سے تیار کردہ بیک اینڈ سروسز کی ایک وسیع رینج فراہم کرتے ہیں جو آپ کے React ویب ایپلیکیشنز کے لیے ایک موثر بیک اینڈ سسٹم قائم کرنے کے لیے ضروری ہیں۔

آئی فون کے اوپر اورنج ڈاٹ۔

BaaS کے ساتھ، آپ ان سروسز کو آزادانہ طور پر تیار کرنے اور برقرار رکھنے کی ضرورت کے بغیر ڈیٹا اسٹوریج، تصدیقی نظام، ریئل ٹائم سبسکرپشنز، اور بہت کچھ جیسی خصوصیات استعمال کر سکتے ہیں۔

BaaS سلوشنز جیسے Supabase کو اپنے پروجیکٹ میں ضم کر کے، آپ مضبوط بیک اینڈ سروسز سے فائدہ اٹھاتے ہوئے ترقی اور ترسیل کے وقت کو نمایاں طور پر کم کر سکتے ہیں۔

سوپا بیس کلاؤڈ اسٹوریج پروجیکٹ مرتب کریں۔

شروع کرنے کے لیے، کی طرف بڑھیں۔ سوپا بیس کی ویب سائٹ ، اور ایک اکاؤنٹ کے لیے سائن اپ کریں۔

اکاؤنٹ کے لیے سائن اپ کرنے کے بعد، اپنے اکاؤنٹ میں لاگ ان کریں۔ ڈیش بورڈ صفحہ
پر کلک کریں نیا کام بٹن
پروجیکٹ کی تفصیلات پُر کریں اور پر کلک کریں۔ نیا پروجیکٹ بنائیں .
پروجیکٹ سیٹ اپ کے ساتھ، منتخب کریں اور کلک کریں۔ ایس کیو ایل ایڈیٹر بائیں پین کے فیچرز پینل پر فیچر بٹن۔
میں ذیل میں SQL بیان چلائیں ایس کیو ایل ایڈیٹر ڈیمو ٹیبل بنانے کے لیے۔ اس میں وہ ڈیٹا ہوگا جسے آپ React ایپلیکیشن کے ساتھ استعمال کریں گے۔
```
 create table products ( 
  id bigint generated by default as identity primary key, 
  name text, 
  description text 
);
```

ایک React CRUD ایپلیکیشن مرتب کریں۔

ایک React ایپلی کیشن بنائیں ، روٹ ڈائرکٹری پر جائیں، اور ایک نئی فائل بنائیں، env ، کچھ ماحولیاتی متغیرات کو ترتیب دینے کے لئے۔ اپنے سوپا بیس کی طرف جائیں۔ ترتیبات صفحہ، کھولیں API سیکشن، اور کے لیے اقدار کاپی کریں۔ پروجیکٹ URL اور عوامی کلید . ان کو اپنی env فائل میں چسپاں کریں:

 REACT_APP_SUPABASE_URL = project URL 
REACT_APP_SUPABASE_ANON_KEY = public anon key

اگلا، اپنے React پروجیکٹ میں Supabase کی JavaScript لائبریری کو انسٹال کرنے کے لیے اس کمانڈ کو چلائیں۔

بیرونی ہارڈ ڈرائیو کو غیر مقفل کرنے کا طریقہ

 npm install @supabase/supabase-js

سوپا بیس کلائنٹ کو ترتیب دیں۔

میں src ڈائریکٹری، ایک نیا بنائیں utils/SupabaseClient.js فائل اور نیچے کوڈ:

 import { createClient } from '@supabase/supabase-js';  
const supabaseURL = process.env.REACT_APP_SUPABASE_URL; 
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY; 
export const supabase = createClient(supabaseURL, supabaseAnonKey);

یہ کوڈ Supabase URL اور ایک عوامی anon کلید فراہم کرکے ایک Supabase کلائنٹ مثال بناتا ہے، جس سے React ایپلیکیشن کو Supabase APIs کے ساتھ بات چیت کرنے اور CRUD آپریشنز کرنے کی اجازت ملتی ہے۔