تطبيق عملي لبناء مساعد ذكاء اصطناعي يعرض المعلومات بأمان

جهز المشروع وحدد وظيفة ضيقة

تحتاج إلى أساسيات HTML وJavaScript وفهم العمليات غير المتزامنة، ومشروع مسموح لك باستخدامه. عند توصيل الخدمة فعليًا، استخدم حسابك الفردي الذي تم التحقق منه ودومين HTTPS مسجلًا وSDK الموثق. قد يستغرق التحقق من الحساب نحو عشرة أيام؛ يمكنك خلالها بناء الواجهة وتجربتها محليًا بإجابات وهمية.

استخدم بطاقة المعلومات الخيالية التالية: ورشة لتنظيم مكتب المذاكرة تقام عبر الإنترنت يوم الثلاثاء الساعة 18:00 بتوقيت القاهرة، ومدتها 60 دقيقة. لا تتضمن البطاقة سعرًا أو عدد مقاعد أو سياسة إلغاء. مهمة المساعد شرح هذه المعلومات. إذا اخترع مقعدًا متاحًا أو أكد حجزًا، تعتبر الإجابة فاشلة حتى لو كانت صياغتها مقنعة.

أنشئ واجهة للسؤال والإجابة النصية

أضف المثال إلى صفحة التدريب، وحمل SDK قبل كود تطبيقك. لا تضف دالة تهيئة أو مفتاحًا سريًا. أكمل الدخول بعد ضغط المستخدم بنفسه؛ لا تفتح نافذة دخول تلقائيًا مع تحميل الصفحة. يفعل معالج الدخول زر السؤال بعد النجاح ويعطله عند الخروج.

<form id="helper-form">
  <label for="question">Question about the example workshop</label>
  <input id="question" name="question" maxlength="600" required>
  <button type="submit" disabled>Ask</button>
</form>
<p id="helper-status" role="status"></p>
<p id="helper-answer"></p>
<script src="https://api.gammal.tech/sdk-web.js"></script>
<!-- Place your application script after the SDK. -->

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

أرسل سؤالًا واحدًا واعرض الرد كنص

ضع الكود التالي بعد عناصر الواجهة وSDK. يفترض المثال أن المستخدم سجل الدخول بالفعل. تعيد الدالة ai.ask نصًا، وتقبل إعدادات منها system_prompt وmax_tokens كما توضح وثائق API الرسمية.

const form = document.getElementById('helper-form');
const status = document.getElementById('helper-status');
const answer = document.getElementById('helper-answer');
const button = form.querySelector('button'); button.disabled = !GammalTech.isLoggedIn();
const card = 'You are Gammal Tech Assistant. Fictional workshop: Tuesday 18:00 Cairo time, online, 60 minutes. '
  + 'Topic: arranging a study desk. No seat availability is supplied. '
  + 'Answer only from these facts. For unknowns say you do not know. '
  + 'Do not book, take payment, or claim to change any record.';
let pending = false;
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (!GammalTech.isLoggedIn()) { status.textContent = 'Please sign in first.'; return; }
  const message = form.elements.question.value.trim();
  if (pending || !message || message.length > 600) return;
  pending = true;
  button.disabled = true;
  answer.textContent = '';
  status.textContent = 'Checking your question...';
  try {
    const reply = await GammalTech.ai.ask(message, {
      system_prompt: card, max_tokens: 300
    });
    answer.textContent = reply;
    status.textContent = 'Review this answer before relying on it.';
  } catch {
    status.textContent = 'The helper is unavailable. Please try later.';
  } finally {
    pending = false; button.disabled = !GammalTech.isLoggedIn();
  }
});

حالة الانتظار تقلل الإرسال المتكرر بالخطأ، لكنها لا تمنع مستخدمًا ضارًا من إرسال طلبات خارج الواجهة. لا تضف حلقة إعادة محاولات تلقائية؛ لدى SDK آلية لمحاولات الشبكة. يستخدم المثال textContent لعرض الرد، ولذلك تظهر العلامات كحروف بدل تفسيرها على أنها عناصر HTML. ترجم رسائل الحالة إذا كانت واجهتك عربية، دون كشف تفاصيل الخطأ التقني للزائر.

اختبر السلوك قبل الاتصال الفعلي

ابدأ بإجابات محلية تجريبية تضعها في عنصر العرض، وتأكد من وضوح ظهورها. بعد ذلك، إذا وافق صاحب المشروع على الاستخدام المباشر وميزانيته، جرب الحالات نفسها مع الخدمة. سجل السؤال والسلوك المتوقع وما شاهدته والنتيجة. لا تضع في ورقة الاختبار بيانات حقيقية أو توكنات.

لا تجعل التعليمات مصدرًا للصلاحية

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

اجعل وظيفة المساعد مقتصرة على الشرح. لا تنفذ مخرجاته ككود ولا تحولها إلى HTML ولا تستخدمها لمنح صلاحية. للأسئلة المجهولة، اعرض وسيلة تواصل عامة يختارها صاحب المشروع. لا تدع المساعد يدعي أنه أرسل رسالة أو حجز موعدًا. عرض إجابة مضللة بأمان لا يجعلها صحيحة؛ سلامة العرض ودقة الإجابة نتيجتان مختلفتان في التقييم.

افهم التكلفة ورسائل الخدمة

وفق المعلومات المعلنة في 12 أكتوبر 2026، يتاح 200 سؤال للمستخدمين المسجلين شهريًا لكل مشروع، ثم 0.20 جنيه للسؤال. أول استدعاء لذكاء اصطناعي الضيف يستهلك المتبقي من الحصة المجانية للمسجلين؛ راجع الاستخدام الفعلي والرصيد. تحقق من معلومات المنصة الحالية قبل الاتصال. يستخدم هذا المثال طريقة المستخدم المسجل فقط.

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

جهز حزمة تقييم توضح ما تعلمته

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

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

أسئلة شائعة

هل التعليمات القوية تمنع حقن التعليمات بالكامل؟

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

هل يجب أن أنفق أموالًا حتى أكمل التطبيق؟

لا. يمكنك بناء الواجهة وتقييمها بإجابات محلية موضحة بأنها تجريبية. الاتصال بالطريقة المباشرة خطوة اختيارية تحتاج إلى موافقة صاحب المشروع وميزانية محددة.