دليل دمج تطبيق الاختبار الطبي باستخدام GPT-5.2

ما الذي سنبنيه

في هذا الدرس التقني، سنقوم ببناء تطبيق اختبار طبي باستخدام Next.js و GPT-5.2 API من OpenAI. سيقوم هذا التطبيق بتوليد أسئلة اختبار طبية ديناميكية وتقديم تغذية راجعة في الوقت الحقيقي للمستخدمين بناءً على إجاباتهم. سيستفيد التطبيق من أحدث قدرات GPT-5.2 لصياغة الأسئلة وتحليل إجابات المستخدمين، مما يوفر تجربة تعليمية وتفاعلية.

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

الإعداد والتثبيت

لبدء العمل، نحتاج إلى إعداد مشروع Next.js جديد وتثبيت التبعيات اللازمة. سنقوم أيضًا بتكوين متغيرات البيئة لإدارة مفتاح API الخاص بنا بأمان.

npx create-next-app@latest medical-quiz-app --ts
cd medical-quiz-app
npm install openai

بعد ذلك، نحتاج إلى إعداد متغيرات البيئة لتخزين مفتاح OpenAI API الخاص بنا بأمان. قم بإنشاء ملف جديد باسم .env.local في الدليل الجذري لمشروعك وأضف مفتاح API الخاص بك كما يلي:

OPENAI_API_KEY=your_openai_api_key_here

الخطوة ١: إعداد مسار API

في هذه الخطوة، سنقوم بإعداد مسار API في تطبيق Next.js الخاص بنا للتعامل مع الطلبات إلى GPT-5.2 API. سيتم استخدام هذا لجلب أسئلة الاختبار والتحقق من الإجابات.

import { OpenAI } from 'openai';

const client = new OpenAI(process.env.OPENAI_API_KEY);

export async function POST(request: Request) {
  try {
    const { question } = await request.json();
    const response = await client.chat.completions.create({
      model: "gpt-5.2",
      messages: [{ role: "system", content: "You are a medical quiz generator." }, { role: "user", content: question }],
    });

    return new Response(JSON.stringify({ answer: response.choices[0].message.content }), {
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: 'Failed to fetch data from OpenAI' }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}

يحدد هذا الكود طريقة POST لمسار API الخاص بنا، والذي يستقبل سؤالاً من العميل، ويرسله إلى GPT-5.2 API، ويعيد الاستجابة المولدة. نتعامل مع الأخطاء بشكل مناسب عن طريق إعادة رمز الحالة ٥٠٠ مع رسالة خطأ إذا فشلت مكالمة API.

الخطوة ٢: إنشاء واجهة الاختبار

الآن بعد أن قمنا بإعداد مسار API الخاص بنا، دعونا ننشئ واجهة مستخدم لتطبيق الاختبار الخاص بنا. سنستخدم مكونات React لبناء واجهة بسيطة حيث يمكن للمستخدمين إرسال الأسئلة وتلقي التغذية الراجعة.

import { useState } from 'react';

export default function Quiz() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ question }),
    });
    const data = await response.json();
    setAnswer(data.answer);
  };

  return (
    <div>
      <h1>Medical Quiz</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
          placeholder="Enter your question"
        />
        <button type="submit">Submit</button>
      </form>
      {answer && <p>Answer: {answer}</p>}
    </div>
  );
}

يحافظ هذا المكون على حالة سؤال المستخدم والإجابة التي يتم إرجاعها من API. عندما يتم إرسال النموذج، يرسل السؤال إلى مسار API الخاص بنا ويحدث حالة الإجابة بالاستجابة.

الخطوة ٣: تحسين تجربة المستخدم

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

import { useState } from 'react';

export default function Quiz() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setLoading(true);
    setError('');
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question }),
      });
      const data = await response.json();
      setAnswer(data.answer);
    } catch (err) {
      setError('Failed to fetch data. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>Medical Quiz</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
          placeholder="Enter your question"
        />
        <button type="submit" disabled={loading}>Submit</button>
      </form>
      {loading && <p>Loading...</p>}
      {answer && <p>Answer: {answer}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

لقد أضفنا حالة تحميل للإشارة إلى متى تكون مكالمة API قيد التقدم وحالة خطأ لعرض أي مشكلات تنشأ. يضمن هذا أن يتم إعلام المستخدمين طوال تفاعلهم مع التطبيق.

اختبار تنفيذك

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

npm run dev

افتح متصفحك وانتقل إلى http://localhost:3000 للتفاعل مع تطبيق الاختبار الخاص بك. أدخل سؤالاً وأرسله لرؤية الاستجابة. تأكد من أن حالات التحميل والخطأ تتصرف كما هو متوقع.

ما الذي تبنيه بعد ذلك

• قم بتحسين الاختبار بأسئلة متعددة الخيارات وتحقق من اختيارات المستخدم مقابل الإجابات الصحيحة.
• دمج نظام تسجيل لتتبع أداء المستخدم عبر جلسات اختبار متعددة.
• أضف مصادقة المستخدم لحفظ نتائج الاختبار وتتبع التقدم بمرور الوقت.

فكر في كيفية تكييف هذا التطبيق للاستخدام في دول مجلس التعاون الخليجي، بما يتماشى مع مبادرات مثل رؤية السعودية ٢٠٣٠ أو الاستراتيجية الوطنية للذكاء الاصطناعي في الإمارات. يمكن أن تعزز التعاونات مع مقدمي الرعاية الصحية الإقليميين أو المؤسسات التعليمية من تأثير التطبيق ومداه.