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

بناء تطبيق SaaS متكامل باستخدام React و Supabase و Stripe

Majd Muhtaseb15‏/09‏/202515 دقيقة

مقدمة

يمكن أن يكون بناء تطبيق SaaS من الصفر مهمة شاقة. تسهل هذه المقالة العملية من خلال إرشادك خلال بناء SaaS أساسي باستخدام React و Supabase و Stripe. تتعامل React مع واجهة المستخدم، وتوفر Supabase خلفية قابلة للتطوير، وتدير Stripe المدفوعات.

إعداد Supabase

أولاً، قم بإنشاء مشروع جديد على Supabase. ستحتاج إلى عنوان URL الخاص بـ Supabase ومفتاح anon. قم بتخزينها في ملف .env الخاص بك:

SUPABASE_URL=عنوان_URL_الخاص_بك_في_Supabase
SUPABASE_ANON_KEY=مفتاح_anon_الخاص_بك_في_Supabase

قم بإنشاء جدول users مع عمودين على الأقل: id (UUID، مفتاح أساسي) و email. قم بتمكين Row Level Security (RLS) وقم بتكوين السياسات للسماح للمستخدمين بالوصول فقط إلى بياناتهم الخاصة.

الواجهة الأمامية React مع المصادقة

استخدم create-react-app أو إعداد React المفضل لديك. قم بتثبيت @supabase/supabase-js:

npm install @supabase/supabase-js

أنشئ ملف 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);

قم بتنفيذ المصادقة باستخدام طرق auth الخاصة بـ Supabase. فيما يلي مكون تسجيل بسيط:

import { useState } from 'react';
import { supabase } from './supabaseClient';

function SignUp() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { data, error } = await supabase.auth.signUp({
      email: email,
      password: password,
    });

    if (error) {
      console.error('خطأ في التسجيل:', error);
    } else {
      console.log('تم التسجيل بنجاح:', data);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="البريد الإلكتروني" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="كلمة المرور" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">تسجيل</button>
    </form>
  );
}

export default SignUp;

دمج Stripe للمدفوعات

قم بتثبيت stripe و @stripe/react-stripe-js:

npm install @stripe/stripe-js @stripe/react-stripe-js

قم بإنشاء حساب Stripe واحصل على مفتاح النشر والمفتاح السري. حدد خطط التسعير الخاصة بك داخل Stripe.

على الخادم الخاص بك (على سبيل المثال، Supabase Edge Function أو Node.js API)، قم بإنشاء نقطة نهاية تستخدم Stripe Secret Key لإنشاء Stripe Checkout Session. ستقوم هذه الجلسة بإعادة توجيه المستخدم إلى Stripe لإدخال معلومات الدفع الخاصة به.

مثال (باستخدام Node.js و Express):

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const express = require('express');
const app = express();

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: 'YOUR_STRIPE_PRICE_ID', // استبدل بمعرف السعر الفعلي الخاص بك
        quantity: 1,
      },
    ],
    mode: 'subscription',
    success_url: `${YOUR_DOMAIN}/success`,
    cancel_url: `${YOUR_DOMAIN}/cancel`,
  });

  res.redirect(303, session.url);
});

app.listen(4242, () => console.log('يعمل على المنفذ 4242'));

في تطبيق React الخاص بك، استخدم @stripe/react-stripe-js لإعادة توجيه المستخدم إلى Stripe. ستحتاج إلى تحميل Stripe.js باستخدام مفتاح النشر الخاص بك:

import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('YOUR_STRIPE_PUBLISHABLE_KEY');

function App() {
  return (
    <Elements stripe={stripePromise}>
      {/* المكونات الخاصة بك التي تستخدم Stripe */}
    </Elements>
  );
}

قم بإنشاء زر يستدعي نقطة النهاية /create-checkout-session.

التعامل مع Webhooks

قم بتكوين Stripe webhooks للاستماع إلى الأحداث مثل checkout.session.completed و customer.subscription.created. استخدم webhooks هذه لتحديث قاعدة بيانات Supabase الخاصة بك لتعكس حالة اشتراك المستخدم. يضمن ذلك أنه يمكنك التحكم في الوصول إلى الميزات بناءً على مستوى الاشتراك. تحقق بشكل آمن من توقيعات webhook لمنع التلاعب.

خاتمة

يوفر هذا الدليل إطارًا أساسيًا لبناء تطبيق SaaS. يمكنك التوسع في هذا الأساس عن طريق إضافة المزيد من الميزات، وتنفيذ معالجة أكثر قوة للأخطاء، وتحسين الأداء. تذكر إعطاء الأولوية لأفضل ممارسات الأمان طوال عملية التطوير.