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

بناء تطبيق SaaS كامل باستخدام React و Node.js ووظائف Serverless

Majd Muhtaseb14‏/06‏/20258 دقيقة

مقدمة

تقدم هذه المقالة نهجًا مبسطًا لإنشاء تطبيق SaaS بسيط. سنركز على المكونات الأساسية: واجهة أمامية تعتمد على React ، وواجهة خلفية (API) Node.js ، ووظائف serverless للتعامل مع مهام معينة بكفاءة. يسمح هذا الهيكل بقابلية التوسع وفعالية التكلفة.

التقنيات المستخدمة

• الواجهة الأمامية: React
• الواجهة الخلفية: Node.js (Express)
• Serverless: AWS Lambda (أو ما شابه ذلك مثل Netlify Functions و Vercel Functions)
• قاعدة البيانات: MongoDB (أو أي قاعدة بيانات مفضلة)

واجهة برمجة التطبيقات الخلفية (Node.js مع Express)

أولاً ، قم بإعداد خادم Node.js Express أساسي. فيما يلي مثال مبسط لتسجيل المستخدم:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 3001;

app.use(bodyParser.json());

app.post('/api/register', (req, res) => {
  // منطق التسجيل الأساسي (مثال ، لا يوجد تفاعل فعلي مع قاعدة البيانات)
  const { username, password } = req.body;
  if (username && password) {
    console.log(`تم تسجيل المستخدم: ${username}`);
    res.status(201).json({ message: 'تم تسجيل المستخدم بنجاح!' });
  } else {
    res.status(400).json({ error: 'اسم المستخدم وكلمة المرور مطلوبان.' });
  }
});

app.listen(port, () => {
  console.log(`الخادم يستمع على المنفذ ${port}`);
});

الواجهة الأمامية React

قم بإنشاء مكون React للتفاعل مع واجهة برمجة التطبيقات الخلفية:

import React, { useState } from 'react';

function RegistrationForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch('/api/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password }),
    });

    if (response.ok) {
      alert('تم التسجيل بنجاح!');
    } else {
      alert('فشل التسجيل.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        اسم المستخدم:
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      </label>
      <br />
      <label>
        كلمة المرور:
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </label>
      <br />
      <button type="submit">تسجيل</button>
    </form>
  );
}

export default RegistrationForm;

وظائف Serverless (مثال - AWS Lambda)

يوضح هذا القسم استخدام وظيفة serverless لمهمة بسيطة ، مثل إرسال بريد إلكتروني ترحيبي.

يفترض أن لديك AWS CLI مُعدًا ومكوّنًا.

1. إنشاء ملف Node.js (على سبيل المثال ، sendEmail.js):

exports.handler = async (event) => {
  // استبدل بمنطق إرسال البريد الإلكتروني الفعلي (على سبيل المثال ، باستخدام Nodemailer و AWS SES)
  console.log('إرسال بريد إلكتروني ترحيبي إلى:', event.email);

  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'تم إرسال بريد إلكتروني ترحيبي!' }),
  };
};

2. ضغط الملف: zip sendEmail.zip sendEmail.js

3. إنشاء وظيفة Lambda (باستخدام AWS CLI):

aws lambda create-function \
    --function-name sendWelcomeEmail \
    --zip-file fileb://sendEmail.zip \
    --runtime nodejs18.x \
    --handler sendEmail.handler \
    --role arn:aws:iam::YOUR_ACCOUNT_ID:role/YOUR_LAMBDA_EXECUTION_ROLE

استبدل YOUR_ACCOUNT_ID و YOUR_LAMBDA_EXECUTION_ROLE بمعرف حساب AWS الفعلي الخاص بك ومعرف ARN لدور IAM.

4. استدعاء الوظيفة (من الواجهة الأمامية React أو الواجهة الخلفية Node.js):

ستحتاج إلى استخدام AWS SDK في الواجهة الأمامية أو الواجهة الخلفية لاستدعاء وظيفة Lambda هذه. يتضمن ذلك إعداد بيانات اعتماد AWS بشكل مناسب.

خاتمة

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