સુપાબેસ, રિએક્ટ, એસ્ટ્રો, અને ક્લાઉડફ્લેર સાથે એક સ્લીક બ્લોગ બનાવવો – ભાગ 1: સુપાબેસ સાથે શરૂ કરવું

બરાબર, ચાલો કાર્ય શરૂ કરીએ! અમે અમારા બ્લોગ-બાંધકામ યાત્રાના પ્રથમ ભાગમાં જઈ રહ્યા છીએ જ્યાં અમે સુપાબેસ સાથે જાડા થઈશું. અહીંથી તમામ જાદુ શરૂ થાય છે—તમારું બેકએન્ડ. આ ભાગમાં, અમે એક સુપાબેસ પ્રોજેક્ટ શરૂ કરીશું, અમારા જરૂરી ટેબલ્સ (Posts અને UserProfile) બનાવશું, અને સંબંધો સ્થાપિત કરીશું જે દરેકને મીઠું બનાવશે. તમારા હાથ ગંદા કરવા માટે તૈયાર છો? ચાલો કરો.

અમે શું આવરીશું:

ભાગ 1: સુપાબેસ સાથે શરૂ કરવું

• સુપાબેસ પ્રોજેક્ટ સેટ કરવું
• Posts ટેબલ બનાવવું
• UserProfileટેબલ બનાવવું
• ટેબલ્સ વચ્ચે સંબંધો સ્થાપિત કરવું

ભાગ 2: નીતિઓ, ફંક્શન્સ, અને ટ્રિગરો સાથે તમારા ડેટાબેઝને ફાઈન-ટ્યૂનિંગ કરવું

• ફંક્શન્સ અને ટ્રિગરો સાથે ઑટોમેટિંગ
• ટેબલ દ્વારા સુરક્ષિત કરવું તમારા ડેટાને રો-લેવલ સુરક્ષા (RLS) નીતિઓ સાથે
• અનન્ય ID ના અપડેટને અટકાવવું
• વપરાશકર્તા પ્રોફાઇલ્સમાં ઇમેઇલની સુસંગતતા સુનિશ્ચિત કરવી
• ઇન્ડેક્સ સાથે તમારા ડેટાબેઝને ઓપ્ટિમાઇઝ કરવું

ભાગ 3: તમારા એડમિન ઇન્ટરફેસને સેટ કરવું

• એસ્ટ્રો અને રિએક્ટ સાથે પ્રોજેક્ટ સેટઅપ કરવો.
• એન્વાયર્નમેન્ટ વેરિયબલ્સ કન્ફિગર કરવું.
• સુપાબેસ યુટિલિટીઝ બનાવવી.
• એડમિન ઇન્ટરફેસ બનાવવું.

ભાગ 4: ફ્રન્ટએન્ડને સુપાબેસ સાથે કનેક્ટ કરવું

• ઇનિશિયલાઈઝિંગ ટેઇલવિન્ડ CSS
• બ્લૉગ લેઆઉટ બનાવવું
• બ્લૉગ લિસ્ટ અને પોસ્ટ કોમ્પોનન્ટ્સ બનાવવું
• હોમપેજ સેટઅપ કરવો
• બ્લૉગ પોસ્ટ રૂટ બનાવવો

ભાગ 5: ક્લાઉડફ્લેર સાથે બ્લોગને ડિપ્લોય કરવું

• ક્લાઉડફ્લેર અકાઉન્ટ સેટ કરવું
• ક્લાઉડફ્લેર પર તમારા એસ્ટ્રો સાઇટને ડિપ્લોય કરવું
• સુરક્ષિત ઍક્સેસ માટે DNS અને SSL કોન્ફિગર કરવું

1. સુપાબેસ પ્રોજેક્ટ સેટ કરવું

પ્રથમ વાત—જો તમે સુપાબેસ વિશે સુન્યું ન હોય, તો તે ફાયરબેસ જેવું છે પરંતુ એક કૂલ પોસ્ટગ્રેસ બેકબોન સાથે. તે તમને ડેટાબેસ, ઓથેન્ટિકેશન, અને સ્ટોરેજ એક જ સુપરી પેકેજમાં આપે છે. આપણા બ્લોગ માટે યોગ્ય છે, નહીં?

કદમ 1: સાઇન અપ કરો અને પ્રોજેક્ટ બનાવો

સુપાબેસ પર જાઓ અને સાઇન અપ કરો. એકવાર તમે લોગિન થઇ ગયા પછી:

• નવી પ્રોજેક્ટ બનાવો: તેને એક નામ આપો, એક મજબૂત પાસવર્ડ સેટ કરો (તમે જાણો છો કે શું કરવું છે), અને તમારા શ્રોતાઓ જ્યાં વધારે સમય વિતાવે છે તે નજીકનો વિસ્તાર પસંદ કરો.
• પ્રોજેક્ટ સેટિંગ્સ: તમારા પ્રોજેક્ટ તૈયાર થયા પછી, તમારા API કી અને URL નોંધો. તે આવક-જાવક સાથે જોડાવા માટે આગળ જવું છે, જ્યારે આપણે બેકએન્ડને અમારી રિએક્ટ ફ્રન્ટએન્ડ સાથે કનેક્ટ કરીશું.

કદમ 2: SQL એડિટર માં ઊંડાણમાં જાઓ

સુપાબેસ તમને ડેશબોર્ડમાં જ આ નેટ SQL એડિટર આપે છે. અહીં અમે અમારા ડેટાબેસ સ્કીમા સેટ કરવા જઈ રહ્યા છીએ.

2.Posts ટેબલ બનાવવું

દરેક બ્લોગને તેની પોસ્ટ્સ સાચવવા માટે એક સ્થળની જરૂર છે, અને ત્યાં અમારા Posts ટેબલ કામ આવે છે. આ ટેબલ પોસ્ટના શિર્ષકથી લઈને સામગ્રી, છબીઓ, અને લખકરની ID સુધીની બધું રાખશે.

અહીં છે શરૂ કરવા માટે SQL:

CREATE TABLE Posts (
    id uuid PRIMARY KEY DEFAULT uuid_generate_v4(), -- Primary key, auto-generated UUID
    title text NOT NULL, -- Title of the post, cannot be null
    featured_images jsonb DEFAULT '[]'::jsonb, -- featured_images as json object for the post
    slug text NOT NULL, -- URL-friendly identifier, can be duplicated
    unique_id text NOT NULL UNIQUE, -- Unique identifier, must be unique across all posts
    excerpt text, -- excerpt of the post
    content text, -- Content of the post
    author uuid REFERENCES auth.users(id) ON DELETE SET NULL, -- Foreign key linked to Auth.Users table, sets to NULL if user is deleted
    author_profile uuid REFERENCES UserProfile(id) ON DELETE SET NULL, -- Foreign key linked to Auth.Users table, sets to NULL if user is deleted
    created_at timestamp with time zone DEFAULT now(), -- Timestamp for when the post was created
    updated_at timestamp with time zone DEFAULT now(), -- Timestamp for when the post was last updated
    deleted_at timestamp with time zone, -- Timestamp for soft delete (optional)
    publish_date timestamp with time zone DEFAULT now() -- Date and time when the post should be published
);

અહીં શું થઈ રહ્યું છે?

• id uuid PRIMARY KEYદરેક પોસ્ટને અનન્ય ID મળે છે, UUIDs માટે.
• featured_images jsonbઅમે છબીઓને JSON ઓબજેક્ટ્સ તરીકે સાચવી રહ્યા છીએ—તે વધુ છબીઓ સાથે સજાવટ કરવા માટે યોગ્ય છે.
• slug અને unique_id: આ તમારા URLsને સ્વચ્છ અને SEO-મૈત્રીપર્વક બનાવે છે.
• authorauth.users ટેબલ (જે સુપાબેસ તમારા માટે સેટ કરે છે) ની સરખામણી કરવી જેથી એTrack રાખી શકાય કે કોણે શું લખ્યું.

3. UserProfile ટેબલ બનાવવું

હવે, ચાલો ખાતરી કરીએ કે અમારા લેખકોમાં થોડી વ્યક્તિગતતા છે. UserProfile ટેબલ વપરાશકર્તાનો નામ, બાયોગ્રાફી, અને અન્ય પ્રોફાઇલ સંબંધિત વસ્તુઓ સાચવશે.

CREATE TABLE UserProfile (
    id uuid PRIMARY KEY DEFAULT uuid_generate_v4(), -- Primary key, auto-generated UUID
    user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE, -- Foreign key linked to auth.users table, cascades on delete
    name text NOT NULL, -- Name of the user, cannot be null
    bio text, -- Optional bio field for user profile
    email text NOT NULL, -- Email of the user, copied from auth.users
    created_at timestamp with time zone DEFAULT now(), -- Timestamp for when the profile was created
    updated_at timestamp with time zone DEFAULT now() -- Timestamp for when the profile was last updated
);

વિશ્લેષણ:

• user_id: આauth.users ટેબલમાં વપરાશકર્તાની ID સાથે લિંક કરે છે, જેથી અમે પોસ્ટ્સને તેમના લેખકો સાથે કનેક્ટ કરી શકીએ.
• bio: લેખક વિશે થોડુંક, કારણ કે દરેક સારો બ્લોગ “લેખક વિશે” વિભાગની જરૂર છે.

4. ટેબલ્સ વચ્ચે સંબંધો સ્થાપિત કરવું

હવે કે આપણે અમારા ટેબલ્સ તૈયાર કરી લીધા છે, હવે સમય આવી ગયો છે કે તેમને એકબીજાની સાથે વાત કરાવવી.

• વિદેશી કીઓ: અમે પહેલેથી જ અમારા વિદેશી કીઓ સેટ કરી લીધા છે (author માં Posts અને user_id માં UserProfile). આ તમારા ટેબલ્સ વચ્ચેના પુલ છે.
• જોઇન્સ: જ્યારે આપણે ડેટા માટે ક્વેરી કરવા શરૂ કરીએ છીએ, ત્યારે આ સંબંધો અમને દરેક વખતે પોસ્ટ મેળવતા લેખકનું નામ અને બાયોગ્રાફી ખેંચવા દે છે. આ બધું જોડાયું છે, અને સુપાબેસ દરેકને સુમેળમાં રાખવું સુલભ બનાવે છે.

ભાગ 1નો સમાપન

બૂમ! અમે અમારા બ્લોગની મફત કણક તૈયાર કરી છે. તમારું સુપાબેસ પ્રોજેક્ટ તૈયાર છે, તમારા ટેબલ્સ તૈયાર છે, અને સંબંધો સેટ છે. આગામી ભાગમાં, અમે સુપાબેસના રો-લેવલ સિક્યુરિટી (RLS) નો ઉપયોગ કરીને સામગ્રીને ઍક્સેસને લોક કરવા dive કરીશું. તત્ક્ષણિક રહો, અને તમારું ટર્મિનલ ગરમ રાખો—અમે તો બસ શરૂ કરી રહ્યા છીએ!

આગળ: ભાગ 2 – રોલ આધારિત ઍક્સેસ કંટ્રોલ લાગુ કરવું

અમે ખાતરી કરીશું કે ફક્ત યોગ્ય આંખો જ યોગ્ય સામગ્રી જોઈ શકે છે, અને આ સરળ, સુરક્ષિત, અને સંલગ્ન રહેશે.

ઝડપથી ઊંડાણમાં જવું છે?

તમારા પ્રોજેક્ટ સેટ કરવા વિશે વધુ માટે સુપાબેસ દસ્તાવેજોને તપાસો, અથવા ભાગ 2 માટે રાહ જુઓ જ્યાં અમે તમારા બ્લોગની સામગ્રીને સુરક્ષિત કરવાની બધી વિગતોમાં જઈશું!