البدء مع Node.js و Express و React: بناء واجهة برمجة تطبيقات قوية

اليوم، نحن نغوص في عالم Node.js و Express و React المثير. سواء كنت مبرمجًا ذو خبرة أو مبتدئًا، ستساعدك هذه التدوينة في بناء واجهة برمجة تطبيقات قوية باستخدام هذه التقنيات الشهيرة. سنغطي الأساسيات، وسنستعرض كيفية إعداد بيئتك، وسنستكشف كيف تعمل هذه الأدوات معًا. بالإضافة إلى ذلك، سنوضح لك كيف يمكن لـ Apidog أن يجعل حياتك أسهل. لذا، احضر وجبتك الخفيفة المفضلة للبرمجة، ولنبدأ!

لماذا Node.js و Express و React؟

قبل أن نبدأ، دعنا نتحدث عن أسباب أهمية Node.js و Express و React بالنسبة لك.

Node.js

Node.js هو بيئة تشغيل تتيح لك تشغيل JavaScript على جانب الخادم. إنه مبني على محرك JavaScript V8 التابع لمتصفح Chrome، مما يجعله سريعًا وفعالًا. باستخدام Node.js، يمكنك بناء تطبيقات الشبكة القابلة للتوسع، والتعامل مع عدة طلبات في وقت واحد، واستخدام لغة برمجة واحدة (JavaScript) لتطوير كل من العميل وخادم.

Express

Express هو إطار تطبيق ويب بسيط ومرن لـ Node.js. يوفر مجموعة قوية من المميزات لبناء التطبيقات الويب والمحمولة. باستخدام Express، يمكنك بسهولة إعداد خادم، وإدارة المسارات، والتعامل مع طلبات واستجابة HTTP. إنه العمود الفقري للعديد من تطبيقات Node.js ويكمل React بشكل ممتاز.

React

React هي مكتبة JavaScript لبناء واجهات المستخدم. يتم صيانتها بواسطة Facebook ومجتمع من المطورين والشركات. تتيح لك React إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام وإدارة حالة تطبيقك بكفاءة. عند الجمع بين Node.js و Express، يمكنك بناء تطبيقات ويب ديناميكية وتفاعلية بسهولة.

إعداد بيئة التطوير الخاصة بك

للبدء، ستحتاج إلى إعداد بيئة التطوير الخاصة بك. إليك دليل خطوة بخطوة:

تثبيت Node.js: انتقل إلى موقع Node.js وقم بتنزيل أحدث إصدار. اتبع تعليمات التثبيت لنظام التشغيل الخاص بك.

تثبيت npm: يأتي npm (مدير حزم Node) مع Node.js. يمكنك التحقق مما إذا كان مثبتًا عن طريق تشغيل npm -v في الطرفية الخاصة بك.

إعداد مشروع جديد: أنشئ دليلًا جديدًا لمشروعك وانتقل إليه في الطرفية الخاصة بك. قم بتهيئة مشروع Node.js جديد عن طريق تشغيل npm init. اتبع المطالبات لإنشاء ملف package.json.

تثبيت Express: قم بتشغيل npm install express لتثبيت Express.

تثبيت React: ستستخدم Create React App لإعداد مشروع React جديد. قم بتشغيل npx create-react-app client لإنشاء تطبيق React جديد في دليل client.

تثبيت Apidog: لتسهيل تطوير واختبار واجهات برمجة التطبيقات، سنستخدم Apidog. يمكنك تنزيله مجانًا من موقع Apidog.

بناء واجهة برمجة التطبيقات الخاصة بك باستخدام Node.js و Express

الآن بعد إعداد بيئتك، دعنا نبني واجهة برمجة تطبيقات بسيطة باستخدام Node.js و Express.

الخطوة 1: إعداد خادم Express

قم بإنشاء ملف جديد يسمى server.js في الدليل الجذر لمشروعك. أضف الكود التالي لإعداد خادم Express أساسي:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('مرحبًا بالعالم!');
});

app.listen(port, () => {
  console.log(`الخادم يعمل على http://localhost:${port}`);
});

قم بتشغيل node server.js في الطرفية الخاصة بك. يجب أن ترى "الخادم يعمل على http://localhost:3000". افتح متصفحك وانتقل إلى http://localhost:3000 لرؤية "مرحبًا بالعالم!".

الخطوة 2: إنشاء مسارات واجهة برمجة التطبيقات

بعد ذلك، دعنا ننشئ بعض مسارات واجهة برمجة التطبيقات. في ملف server.js الخاص بك، أضف الكود التالي لإنشاء واجهة برمجة تطبيقات بسيطة تعيد قائمة المستخدمين:

const users = [
  { id: 1, name: 'جون دو' },
  { id: 2, name: 'جين دو' },
  { id: 3, name: 'سام سميث' }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

الآن، عندما تنتقل إلى http://localhost:3000/api/users، سترى استجابة JSON مع قائمة المستخدمين.

الخطوة 3: الاتصال بقاعدة بيانات

لجعل واجهة برمجة التطبيقات لدينا أكثر ديناميكية، دعنا نتصل بقاعدة بيانات. سنستخدم MongoDB كمثال. أولاً، ستحتاج إلى تثبيت mongoose عن طريق تشغيل npm install mongoose.

قم بإنشاء ملف جديد يسمى db.js وأضف الكود التالي للاتصال بـ MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'خطأ في الاتصال:'));
db.once('open', () => {
  console.log('متصل بـ MongoDB');
});

module.exports = db;

في ملف server.js الخاص بك، قم باستيراد ملف db.js للاتصال بقاعدة البيانات:

const db = require('./db');

الآن، دعنا ننشئ نموذج Mongoose لمستخدمينا. أنشئ ملفًا جديدًا يسمى user.js وأضف الكود التالي:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

في ملف server.js الخاص بك، قم بتحديث المسار /api/users لجلب المستخدمين من قاعدة البيانات:

const User = require('./user');

app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

يمكنك الآن إضافة وتحديث وحذف المستخدمين من قاعدة بيانات MongoDB الخاصة بك، وستعكس واجهة برمجة التطبيقات الخاصة بك هذه التغييرات ديناميكيًا.

دمج React مع Node.js و Express

الآن وقد أعددنا واجهة برمجة التطبيقات الخاصة بنا، دعنا ندمجها مع الواجهة الأمامية لـ React.

الخطوة 1: إعداد الوكيل

لتقديم الطلبات إلى واجهة برمجة التطبيقات الخاصة بنا من واجهة React، سنقوم بإعداد وكيل. افتح ملف client/package.json وأضف السطر التالي:

"proxy": "http://localhost:3000"

الخطوة 2: جلب البيانات من واجهة برمجة التطبيقات

في تطبيق React الخاص بك، دعنا ننشئ مكونًا يقوم بجلب البيانات من واجهة برمجة التطبيقات وعرضها. افتح ملف client/src/App.js واستبدل محتوياته بالكود التالي:

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="App">
      <h1>المستخدمون</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

قم بتشغيل npm start في دليل client لبدء خادم تطوير React. يجب أن ترى قائمة المستخدمين المحملة من واجهة برمجة التطبيقات الخاصة بك معروضة على الصفحة.

اختبار واجهة برمجة التطبيقات الخاصة بك باستخدام Apidog

الآن بعد أن لديك واجهة برمجة تطبيقات عاملة وواجهة React أمامية، حان الوقت لاختبار واجهة برمجة التطبيقات الخاصة بك. Apidog أداة رائعة لذلك.

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: في محرر الاختبار، أدخل عنوان URL لنقطة النهاية الخاصة بواجهة برمجة التطبيقات، حدد طريقة HTTP، وأضف أي رؤوس أو معلمات أو بيانات جسم تحتاج إليها. على سبيل المثال، يمكنك اختبار المسار الذي يعيد رسالة بسيطة أنشأناها سابقًا:

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

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

الخاتمة

تهانينا! لقد قمت ببناء واجهة برمجة تطبيقات قوية باستخدام Node.js و Express و React بنجاح. لقد تعلمت كيفية إعداد بيئة التطوير الخاصة بك، وإنشاء مسارات واجهة برمجة التطبيقات، والاتصال بقاعدة بيانات، ودمج React مع الخلفية الخاصة بك. بالإضافة إلى ذلك، اكتشفت كيف يمكن لـ Apidog تبسيط اختبار واجهة برمجة التطبيقات الخاصة بك.

تذكر، هذه مجرد البداية. هناك countless ways to extend and improve your application. يمكنك إضافة المصادقة، تطبيق طرق أكثر تعقيدًا، وتعزيز واجهتك الأمامية بميزات إضافية.