كيف تبني تطبيق بـ Claude خطوة بخطوة

ما هي الأداة ولمن

Claude مساعد ذكاء اصطناعي عام من Anthropic، وليس أداة بناء تطبيقات مخصصة. لكنه يكتب الكود، ويعرض ما يكتبه كـ artifact، أي نافذة بجانب المحادثة تشغّل الصفحة أو الأداة فتجرّبها فورًا. وهذا يكفي لبناء تطبيقات صغيرة كاملة تعمل في المتصفح.

الفرق المهم عن أدوات البناء: Claude يعطيك الكود والمعاينة، لكنه لا يجهّز لك خادمًا ولا قاعدة بيانات ولا استضافة بنطاقك. أنت من يحفظ الملف ويشغّله وينشره.

• يناسب من يتعلم البرمجة ويريد أن يفهم كل سطر.
• ويناسب صاحب عمل يحتاج أداة صغيرة لنفسه: حاسبة، نموذج، جدول متابعة.
• ويناسب المبرمج كشريك تفكير يكتب أجزاء ويراجع أخرى.

قبل أن تبدأ

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

جهّز على جهازك: متصفحًا حديثًا، ومحرر نصوص (حتى المفكرة تكفي لملف HTML واحد)، ومجلدًا للمشروع.

الخطوات

المثال: حاسبة ضريبة القيمة المضافة 15% لمؤسسة صغيرة في المدينة المنورة، تحسب الضريبة والإجمالي لكل فاتورة وتتذكر آخر مبلغ.

1. 1

   اطلب خطة قبل الكود

   اكتب: «قبل أن تكتب أي كود، اقترح الشاشات والحقول وطريقة الحساب، وانتظر موافقتي». تصحيح الخطة أسهل من تصحيح كود.

2. 2

   حدد شكل التسليم

   اطلب «ملف HTML واحد فيه CSS و JavaScript، دون مكتبات خارجية». الملف الواحد يظهر كـ artifact ويعمل عندك بنقرتين.

3. 3

   جرّب المعاينة كمستخدم

   أدخل مبالغ حقيقية: 100، 87.50، صفر، رقم سالب. لاحظ التقريب وظهور الأرقام.

4. 4

   أرسل ملاحظة واحدة في كل رسالة

   «التقريب يجب أن يكون لخانتين عشريتين» رسالة، و«امنع الأرقام السالبة» رسالة أخرى. الرسائل المجمّعة العشوائية تجعل Claude يعيد كتابة أجزاء لا تحتاج تغييرًا.

5. 5

   اطلب حفظ البيانات في المتصفح

   Claude لا يوفر قاعدة بيانات لتطبيقك، فاطلب localStorage لحفظ آخر المدخلات على الجهاز نفسه. هذا يناسب أداة شخصية، لا نظامًا يشترك فيه فريق.

6. 6

   انسخ الكود إلى ملف

   أنشئ ملفًا باسم index.html، والصق فيه الكود كاملًا، واحفظه بترميز UTF-8 حتى تظهر العربية صحيحة.

7. 7

   شغّله على جهازك

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

   npx serve .

8. 8

   قرر الخطوة التالية

   إن بقيت الأداة لك وحدك فقد انتهيت. وإن أردت نشرها على نطاق، فتابع في من محادثة Claude إلى موقع حي.

<!doctype html>
<html lang="ar" dir="rtl">
<head><meta charset="utf-8"><title>حاسبة الضريبة</title></head>
<body>
  <label>المبلغ قبل الضريبة <input id="amount" type="number" min="0" step="0.01"></label>
  <p>الضريبة 15%: <bdi id="vat">0.00</bdi> ر.س</p>
  <p>الإجمالي: <bdi id="total">0.00</bdi> ر.س</p>
  <script>
    const r2 = (n) => Math.round(n * 100) / 100;
    const amount = document.getElementById("amount");
    amount.value = localStorage.getItem("lastAmount") || "";
    function update() {
      const a = Math.max(0, Number(amount.value) || 0);
      const vat = r2(a * 0.15);
      document.getElementById("vat").textContent = vat.toFixed(2);
      document.getElementById("total").textContent = r2(a + vat).toFixed(2);
      localStorage.setItem("lastAmount", amount.value);
    }
    amount.addEventListener("input", update);
    update();
  </script>
</body>
</html>

نصائح للعربي

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

• اطلب <meta charset="utf-8"> في رأس الملف، فبدونه قد تظهر العربية رموزًا غريبة عند فتحه من جهازك.
• الأرقام المالية تُعرض بأرقام غربية ومعزولة داخل bdi حتى لا يقفز «ر.س» إلى الطرف الآخر.
• اطلب أسماء متغيرات بالإنجليزية ونصوص واجهة بالعربية، فهذا أسهل في الصيانة.
• إن أردت خطًا عربيًا من Google Fonts فاذكره بالاسم، مثل Cairo أو Changa.

حدود يجب أن تعرفها

• لا قاعدة بيانات ولا تسجيل دخول مدمج: لم نجد في صفحات Claude الرسمية قاعدة بيانات أو نظام دخول للتطبيقات، فأي بيانات مشتركة تحتاج خدمة خارجية تبنيها بنفسك.
• لا استضافة بنطاقك: يمكن نشر artifact برابط يفتحه أي شخص، لكن لم نجد ربط نطاق خاص به.
• حدود الاستخدام: المجانية تتجدد كل 5 ساعات وأسبوعيًا، وجلسة تعديل طويلة قد تصل الحد.
• أنت المشغّل: تثبيت الحزم وتشغيل الخادم وحل أخطاء الجهاز عليك.
• طول المحادثة: مع كثرة النسخ يصعب تتبع آخر نسخة صحيحة، فاحفظ كل نسخة تعمل في ملف.

وللإنصاف: لتطبيق صغير تريد أن تفهمه سطرًا سطرًا، الحوار مع Claude طريقة تعلم ممتازة، ومعاينة artifacts تجعل التجربة فورية.

متى تختار أوترا

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

وإن كانت لديك محادثة Claude فيها كود جاهز، ففي انقل من Claude طريقة البدء منه.