الذكاء الاصطناعي في تطوير الويب: كيفية دمج ChatGPT في مشروعك

19 حزيران 2025

الذكاء الاصطناعي في تطوير الويب: كيفية دمج ChatGPT في مشروعك

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

1. لماذا تستخدم ChatGPT؟

بإمكان ChatGPT أن يساعدك على:

بناء بوتات دردشة ذكية للدعم أو المساعدة
توليد محتوى ديناميكي مثل الرسائل أو الأوصاف
اقتراح أكواد، ترجمة، أو تلخيص المحتوى
تحسين مدخلات المستخدم بتفاعلات لحظية

2. إنشاء مشروع React وNode.js

ابدأ بمشروع كامل:

npx create-react-app chatgpt-ui
mkdir chatgpt-server
cd chatgpt-server
npm init -y
npm install express openai cors dotenv

3. إعداد واجهة OpenAI

أضف الاتصال بـ OpenAI API في الخادم:

// server/index.js
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const { OpenAI } = require('openai');

const app = express();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

app.use(cors());
app.use(express.json());

app.post('/chat', async (req, res) => {
  const { message } = req.body;
  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{ role: 'user', content: message }],
    });
    res.json({ reply: response.choices[0].message.content });
  } catch (err) {
    res.status(500).send(err.message);
  }
});

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

4. واجهة React للدردشة

أنشئ واجهة بسيطة للدردشة:

// src/App.js
import { useState } from 'react';

function App() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    const response = await fetch('http://localhost:3001/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: input }),
    });
    const data = await response.json();
    setMessages([...messages, { user: input, bot: data.reply }]);
    setInput('');
  };

  return (
    <div className="chat-container">
      <h2>مساعد ChatGPT</h2>
      <div className="chat-messages">
        {messages.map((msg, idx) => (
          <div key={idx}>
            <p><strong>أنت:</strong> {msg.user}</p>
            <p><strong>المساعد:</strong> {msg.bot}</p>
          </div>
        ))}
      </div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={sendMessage}>إرسال</button>
    </div>
  );
}

export default App;

5. إعداد مفتاح API بأمان

احفظ مفتاح OpenAI في ملف .env ولا تنشره علنًا:

// .env
OPENAI_API_KEY=مفتاح-API-الخاص-بك

استخدم خدمات مثل Vercel أو Railway لنشر المشروع مع متغيرات بيئة آمنة.

6. (اختياري) بناء مكون إضافي (Plugin) لـ ChatGPT

لدمج أعمق داخل واجهة ChatGPT الرسمية، يمكنك إنشاء Plugin خاص بك:

// مثال ملف manifest
{
  "schema_version": "v1",
  "name_for_model": "restaurant_menu_plugin",
  "description_for_model": "عرض قائمة طعام اليوم في مطعم",
  "auth": { "type": "none" },
  "api": {
    "type": "openapi",
    "url": "https://yourdomain.com/openapi.yaml"
  }
}

الخلاصة

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

كيفية دمج ChatGPT في مشروعك