الفصل الأول: المقدمة: من النص إلى الواجهة التفاعلية

رحلة فهم الأساسيات والتحول الجوهري في بناء التطبيقات الحديثة.

مرحبًا بك في بداية رحلة استثنائية. في هذا المساق، لن نتعلم مجرد أدوات جديدة؛ بل سنشهد ونبني معًا تحولًا جذريًا في فلسفة تطوير الواجهات الأمامية. لطالما كان المطور يكتب الشيفرة التي تحدد السلوك بشكل صارم ومحدد مسبقًا. اليوم، ننتقل إلى نموذج جديد، حيث يكتب المطور التعليمات (Prompts) التي توجه ذكاءً اصطناعيًا لتوليد السلوك التفاعلي والديناميكي على الطاير. هذه ليست مجرد تقنية إضافية، بل هي نقلة نوعية من "كيفية التنفيذ" إلى "وصف النتيجة المرجوة".

1.1 العصر الجديد: الواجهات المولدة بالذكاء الاصطناعي

تخيل أنك تريد بناء مساعد ذكي داخل تطبيقك يجيب على أسئلة العملاء. الطريقة التقليدية تتطلب:

• تصميم واجهة معقدة (شريط إدخال، زر إرسال، منطقة عرض).
• كتابة منطق كامل للتعامل مع الطلبات (HTTP Requests) لخادم API.
• معالجة حالات التحميل، والأخطاء، وتنسيق الردود يدويًا.
• تحديث كل هذا الكود إذا أردت تغيير سلوك المساعد.

مع النموذج الجديد، يصبح التركيز على وصف مهمة المساعد وشخصيته، بينما تتولى أدوات مثل Vercel AI SDK التعقيدات من أجلك. أنت تحدد "ماذا" تريد، والأدوات المتقدمة تحقق "كيف" تحققه.

1.2 حجر الأساس: فهم نموذج الدفق (Streaming)

قلب تجربة الواجهات المولدة بالذكاء الاصطناعي هو مفهوم الدفق (Streaming). بدلاً من انتظار نموذج اللغة الكبير (LLM) لإنشاء الرد الكامل ثم إرساله مرة واحدة، نستقبل الرد حرفًا حرفًا، أو كلمة كلمة، فور توليدها من قبل النموذج. هذا يحول التجربة من "انتظار" إلى "مشاهدة عملية التفكير".

1.2.1 المقارنة: الطريقة التقليدية مقابل الدفق

لنلق نظرة على الفرق من خلال تشبيه بسيط:

• الطريقة التقليدية (طلب-انتظار-رد): مثل إرسال رسالة بريد إلكتروني والانتظار يومًا كاملاً للرد. التطبيق يتجمد (أو يعرض دوامة تحميل) حتى وصول جميع البيانات.
• طريقة الدفق (Streaming): مثل محادثة هاتفية حية. تسمع الكلمات فور نطقها من الطرف الآخر. هذا يخلق إحساسًا فوريًا بالاستجابة والتفاعلية.

من الناحية التقنية، في الطريقة التقليدية، نتعامل مع رد كامل من الـ API. مع الدفق، نتعامل مع تدفق (Stream) من أجزاء النص (Chunks). إليك كود توضيحي:

// مثال: الطريقة التقليدية (بدون دفق)
async function getTraditionalResponse(prompt) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ prompt: prompt })
  });
  // ننتظر هنا حتى يكتمل الرد كله من الخادم
  const completeData = await response.json();
  // الآن فقط نعرضه للمستخدم
  return completeData.reply;
}

// مثال: طريقة الدفق (مع Vercel AI SDK)
import { streamText } from 'ai';

async function handleStreamingRequest(prompt) {
  // `streamText` ترجع كائن تدفق (ReadableStream) فورًا
  const result = await streamText({
    model: openai('gpt-4'),
    prompt: prompt,
  });

  // يمكننا بدء عرض الأجزاء للمستخدم فور وصولها
  for await (const chunk of result.textStream) {
    // `chunk` هنا جزء صغير من النص (مثل كلمة أو بضع أحرف)
    console.log(chunk); // يعرض في الواجهة فورًا
  }
}
    

في المثال الثاني، حلقة `for await...of` تستهلك تدفق البيانات. بمجرد أن يولد النموذج جزءًا من النص، يرسله الخادم على الفور، ويمكن للتطبيق الأمامي عرضه دون انتظار الباقي. هذا هو السر وراء تجربة المحادثة السلسة في ChatGPT وأشباهه.

1.3 لماذا هذه المجموعة بالتحديد؟ React، Next.js 15، و Vercel AI SDK

اخترنا هذه الثلاثية لأنها تشكل معًا الطريق الأقصر والأكثر قوة من فكرة في رأسك إلى تطبيق تفاعلي ذكي على الإنترنت.

1.3.1 React: مكتبة واجهات المستخدم التصريحية

React تمنح