البرمجة

تطوير تطبيق اختبرني بالذكاء الاصطناعي

اخر تحديث 15/05/2025
19 تمت قراءة 4 دقيقة

تطوير تطبيق “اختبرني” باستخدام ChatGPT ولغة JavaScript مع Node.js

في عصر تسارع التكنولوجيا والاعتماد المتزايد على أدوات الذكاء الاصطناعي، بات تطوير تطبيقات تفاعلية تعليمية ضرورة حيوية في العديد من المجالات. ومن بين أبرز الابتكارات التقنية الحديثة، تبرز التطبيقات التي تعتمد على قدرات النماذج اللغوية الكبيرة مثل ChatGPT، والتي تتيح إنشاء تجارب تعليمية شخصية وفعّالة. تطبيق “اختبرني” هو أحد النماذج المقترحة لتوظيف الذكاء الاصطناعي في المجال التربوي، ويهدف إلى مساعدة المستخدمين على اختبار معلوماتهم في مختلف المجالات من خلال حوارات ذكية وتفاعلية تعتمد على قدرات ChatGPT المتقدمة.

يُعد هذا المقال دليلاً تقنياً موسعاً يتناول بناء تطبيق “اختبرني” باستخدام لغة JavaScript وبيئة التشغيل Node.js، إضافة إلى دمج واجهة برمجية تعتمد على نموذج ChatGPT المقدم من OpenAI.

مواضيع ذات صلة

المفهوم العام لتطبيق “اختبرني”

يهدف تطبيق “اختبرني” إلى تقديم اختبارات ذكية وتفاعلية للمستخدمين بأسلوب حواري يعتمد على الذكاء الاصطناعي. يتم طرح الأسئلة للمستخدم وفق فئة معينة مثل (العلوم، الجغرافيا، التاريخ، البرمجة، إلخ)، وتُقيّم الإجابات بشكل فوري مع تقديم تغذية راجعة، وشرح عند الحاجة، بطريقة ودية تعتمد على المعالجة اللغوية الطبيعية.

المكونات الرئيسية للتطبيق

قبل الغوص في تفاصيل الكود والبرمجة، من المهم تفصيل المكونات الهيكلية التي يقوم عليها التطبيق:

المكون الوصف
الواجهة الأمامية تُبنى باستخدام HTML, CSS, وJavaScript وتعرض للمستخدم أسئلة وأجوبة بشكل تفاعلي
الخادم الخلفي (Backend) يُبنى باستخدام Node.js وExpress.js ويتعامل مع الطلبات ومعالجة البيانات
واجهة OpenAI API تستخدم لاستدعاء قدرات ChatGPT لإنشاء الأسئلة، تصحيح الإجابات، وتقديم شرح فوري
قاعدة البيانات لتخزين بيانات المستخدمين، نتائجهم، وتصنيفهم حسب الأداء
وحدة تسجيل الدخول تتيح للمستخدم إنشاء حساب أو الدخول لتتبع الأداء عبر الزمن

البنية التقنية للتطبيق

1. إعداد بيئة العمل

  • تثبيت Node.js

  • تهيئة مشروع جديد باستخدام الأمر:

    bash
    npm init -y

  • تثبيت الحزم الضرورية:

    bash
    npm install express axios dotenv cors body-parser

2. إعداد الاتصال مع OpenAI API

تُستخدم مكتبة Axios للتفاعل مع OpenAI. يتم إنشاء ملف .env لتخزين المفتاح السري:

ini
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

ثم نُعد وحدة API:

javascript
// openai.js
const axios = require('axios');
require('dotenv').config();

const askChatGPT = async (prompt) => {
  const response = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-4',
      messages: [{ role: 'user', content: prompt }],
    },
    {
      headers: {
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
        'Content-Type': 'application/json'
      }
    }
  );
  return response.data.choices[0].message.content;
};

module.exports = askChatGPT;

تصميم منطق الأسئلة والأجوبة

1. مولد الأسئلة

لإنشاء سؤال تلقائي حسب مجال معين، يتم إرسال طلب لـ ChatGPT على النحو التالي:

javascript
const generateQuestion = async (topic) => {
  const prompt = `أنشئ سؤالًا واحدًا في موضوع ${topic} مع 4 خيارات للإجابة، وحدد الخيار الصحيح فقط`;
  const response = await askChatGPT(prompt);
  return response;
};

2. تصحيح إجابة المستخدم

يمكن أيضاً إرسال إجابة المستخدم إلى ChatGPT لتصحيحها وتقديم تغذية راجعة:

javascript
const checkAnswer = async (question, userAnswer) => {
  const prompt = `السؤال هو: "${question}". المستخدم أجاب: "${userAnswer}". هل الإجابة صحيحة؟ إذا لم تكن صحيحة، فاشرح السبب وأعطِ الجواب الصحيح.`;
  const result = await askChatGPT(prompt);
  return result;
};

تطوير الواجهة الخلفية باستخدام Express.js

javascript
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const askChatGPT = require('./openai');

const app = express();
app.use(cors());
app.use(bodyParser.json());

app.post('/generate-question', async (req, res) => {
  const { topic } = req.body;
  const question = await askChatGPT(`أنشئ سؤالًا في ${topic} مع 4 خيارات للإجابة`);
  res.json({ question });
});

app.post('/check-answer', async (req, res) => {
  const { question, userAnswer } = req.body;
  const feedback = await askChatGPT(`السؤال: ${question}\nالإجابة: ${userAnswer}\nهل هي صحيحة؟`);
  res.json({ feedback });
});

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

تصميم الواجهة الأمامية (Frontend)

الهيكل العام (HTML):

html
html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>اختبرنيtitle>
  <link rel="stylesheet" href="style.css">
head>
<body>
  <h1>تطبيق اختبرنيh1>
  <select id="topic">
    <option value="التاريخ">التاريخoption>
    <option value="الجغرافيا">الجغرافياoption>
    <option value="البرمجة">البرمجةoption>
  select>
  <button onclick="getQuestion()">ابدأ الاختبارbutton>
  <div id="question">div>
  <input type="text" id="answer" placeholder="أدخل إجابتك">
  <button onclick="check()">تحقق من الإجابةbutton>
  <div id="feedback">div>

  <script src="script.js">script>
body>
html>

السكريبت (JavaScript):

javascript
async function getQuestion() {
  const topic = document.getElementById('topic').value;
  const response = await fetch('http://localhost:3000/generate-question', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ topic })
  });
  const data = await response.json();
  document.getElementById('question').innerText = data.question;
}

async function check() {
  const question = document.getElementById('question').innerText;
  const answer = document.getElementById('answer').value;
  const response = await fetch('http://localhost:3000/check-answer', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ question, userAnswer: answer })
  });
  const data = await response.json();
  document.getElementById('feedback').innerText = data.feedback;
}

التوسعات المستقبلية المقترحة

1. إضافة تصنيف حسب مستوى المستخدم

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

2. إدخال قاعدة بيانات MongoDB أو PostgreSQL

لتخزين المستخدمين، مستوياتهم، عدد الإجابات الصحيحة والخاطئة، والإحصاءات الزمنية لكل اختبار.

3. إدارة الحسابات

إضافة نظام تسجيل دخول وتسجيل حسابات باستخدام JWT لضمان الخصوصية وتتبع تقدم كل مستخدم.

4. تحليل الأداء

توفير لوحة تحكم للمستخدم تظهر تطور مستواه مع رسوم بيانية تعرض عدد الإجابات الصحيحة في كل موضوع.

تحديات التكامل مع ChatGPT

رغم المزايا الكبرى لاستخدام نموذج لغوي مثل ChatGPT، إلا أن هناك بعض التحديات:

  • الحاجة للتحكم في نبرة الإجابة والتأكد من ملاءمتها لكل فئة عمرية.

  • ضمان عدم توليد محتوى غير مناسب أو خارج النطاق.

  • تقليل زمن الاستجابة عند استخدام واجهات OpenAI، خصوصاً عند الطلبات المتكررة.

للتغلب على ذلك، يُنصح بتخزين الأسئلة المُتكررة محلياً (Caching) لتقليل عدد مرات استدعاء API.

الاعتبارات الأمنية

  • استخدام HTTPS في النسخ المنشورة للعامة.

  • تأمين مفتاح API عبر البيئة، وعدم تضمينه في الواجهة الأمامية.

  • منع إرسال مدخلات المستخدم إلى الخادم دون فحص أولي لمنع هجمات XSS أو Injection.

خلاصة

يجمع تطبيق “اختبرني” بين القدرة الهائلة للذكاء الاصطناعي التوليدي ممثلاً في ChatGPT، والبنية السلسة والمرنة التي توفرها JavaScript وNode.js. مثل هذا المشروع يمكن أن يشكل حجر الأساس لتطبيقات تعليمية ذات طابع شخصي وتفاعلي. من خلال دمج أدوات الذكاء الاصطناعي، يمكن تطوير حلول تعليمية مبتكرة تُسهم في بناء تجربة معرفية متميزة وفعّالة، مع قدرة عالية على التخصيص والتوسع. ومع استمرار تطور النماذج اللغوية والواجهات البرمجية، سيكون بالإمكان بناء أنظمة اختبار ذكية تتفوق على النماذج التقليدية من حيث الفهم، التفاعل، والنتائج التعليمية المرجوة.

المراجع:

  1. OpenAI API Documentation: https://platform.openai.com/docs

  2. Node.js Documentation: https://nodejs.org/en/docs

اخر تحديث 15/05/2025
19 تمت قراءة 4 دقيقة