البرمجة بالانطباع (Vibe Coding) للمبتدئين: كيف بنيت كشك تصوير باستخدام Claude

أنا كاتب، ولست مبرمجاً. مهاراتي التقنية تتوقف عند أساسيات HTML من عام 1999.

لكنني قمت للتو ببناء أداة حقيقية وفعالة.

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

استخدمت أسلوباً يسمى Vibe coding مع Claude. إليكم كيف فعلت ذلك وما تعلمته.

الاستراتيجية

أردت شيئاً موثوقاً للفعاليات المباشرة. نصحني Claude بالابتعاد عن أطر العمل المعقدة. وبدلاً من ذلك، قمنا ببناء ملف index.html واحد.

  • يستخدم HTML وCSS وJavaScript في ملف واحد.
  • لا توجد خطوات بناء أو عمليات تثبيت.
  • يتم استضافته مجاناً على GitHub Pages.
  • يحتوي على أجزاء أقل متحركة، مما يجعل من الصعب تعطله.

البناء التقني

يستخدم التطبيق HTML canvas لدمج صورة السيلفي مع إطار PNG شفاف. يحدث هذا بالكامل داخل المتصفح.

  • صورة المستخدم لا تغادر جهازه أبداً.
  • هذا يحمي الخصوصية تلقائياً.
  • أضفت إيماءات مثل "القرص للتكبير" (pinch-to-zoom) لتسهيل محاذاة الصورة.

لإدارة الإطارات دون الحاجة إلى خادم معقد، استخدمت Supabase.

  • يقوم المنظمون برفع الإطارات إلى حاوية تخزين (storage bucket).
  • يشاهدها المشاركون عبر رابط عام.
  • تتم إدارة الأمان من خلال سياسات قاعدة البيانات، وليس عبر كلمات مرور مخفية.

عقبات المبتدئين

تساعد البرمجة بالانطباع (Vibe coding) في بناء الهيكلية، ولكن يجب عليك الانتباه للتفاصيل التشغيلية:

  • خمول قاعدة البيانات (Database Sleep): تتوقف مشاريع Supabase المجانية عن العمل بعد فترة من عدم النشاط. يجب عليك "إيقاظها" قبل الفعالية.
  • تلوث الـ Canvas (Canvas Tainting): قد يؤدي تحميل الصور من مصدر مختلف إلى تعطل وظيفة الحفظ. قمت بإصلاح ذلك باستخدام إعدادات crossOrigin.
  • تجربة المستخدم على الهاتف (Mobile UX): في الهواتف، استخدمت قائمة المشاركة الأصلية (native share sheet). يتيح ذلك للمستخدمين حفظ الصور مباشرة في معرض الصور بضغطة واحدة.

نصيحتي لك

إذا كنت ترغب في تجربة ذلك، فاتبع هذه القواعد:

  • اختر مشروعاً بحدود واضحة. كشك التصوير هدف محدد، أما تطبيق التواصل الاجتماعي فهو كبير جداً.
  • اطلب من الذكاء الاصطناعي شرح "السبب". المنطق وراء الكود أهم من الكود نفسه.
  • اقرأ الفروقات (diffs). لا تسمح للذكاء الاصطناعي بتغيير موقعك دون مراجعة التغييرات أولاً.

لا تعني البرمجة بالانطباع (Vibe coding) أنك لا تفهم مشروعك، بل تعني أن الذكاء الاصطناعي يتولى التعامل مع القواعد اللغوية (syntax) بينما تتولى أنت التعامل مع المنطق والمفاضلات (tradeoffs).

المصدر: https://dev.to/mlh/vibe-coding-for-beginners-how-i-built-a-working-photo-booth-web-app-with-claude-8ib

مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi