هذه المرة المشروع متجر لـ Tellu Hima، وهي علامة للبخور. الشعار والتغليف وحركات المنتجات، والمتجر، والمدفوعات، والإطلاق: بنيتُ كل ذلك بالذكاء الاصطناعي. إليك الفيديو، أو تابع القراءة للنسخة المكتوبة.
Play videoالجزء المثير ليس تشغيل المتجر، بل كل ما يقع بين قالب متجر يعمل وموقع يشبه علامتك التجارية فعلًا.
ما تحتاجه قبل أن تبدأ
أولًا، اسم للعلامة ونطاق (دومين). عادةً أسجّل نطاقاتي لدى Hostinger. ثم الأدوات:
- GitHub للشيفرة البرمجية
- Higgsfield لعناصر الهوية البصرية
- Claude كمساعد البرمجة الرئيسي
- Railway لاستضافة الموقع النهائي
- حساب PayPal للأعمال لاستقبال المدفوعات
لماذا ليس Stripe؟ يعمل Stripe جيدًا، لكنه غير متاح في كل مكان، وأردتُ أن أُظهر كيف تمضي قُدمًا مع PayPal إن لم يكن Stripe خيارًا متاحًا لك. وأيًّا كان اختيارك، تأكّد من أن حسابك يدعم المدفوعات التي تحتاج إلى قبولها قبل أن تبني أي شيء حوله.
العلامة: من الدخان إلى حرف S
بدأتُ بالقصة والإحساس الذي أردتُ أن تحمله العلامة، ثم طلبتُ من الذكاء الاصطناعي توليد صور مرجعية ومفاهيم أولية لأجد اتجاهًا قبل أن ألمس الشعار.
وُلد الشعار من الدخان المتصاعد من عود البخور المشتعل. ظللتُ أبسّط هذا الشكل حتى صار حرف S. ومن هناك بنيتُ البقية: الألوان الأساسية وطريقة تناسقها، ونقشًا لكل مجموعة منتجات، والتغليف والنماذج التجريبية. وأخيرًا نماذج ثلاثية الأبعاد وحركات للعلب، بمقاسات التغليف الحقيقية وبخامات قريبة من الأصل، لاستخدامها في الموقع.
كل عنصر في هذه المرحلة وُلّد بالذكاء الاصطناعي. كانت مهمتي تحديد الاتجاه، واختيار ما ينجح، والاستمرار في طلب التعديلات.
لكن توليد المزيد من الصور لا يصنع علامة وحده. ما زال عليك أن تسأل:
- هل تبدو هذه العناصر وكأنها تنتمي إلى عائلة واحدة؟
- هل يتّسق التغليف والألوان والموقع معًا؟
- هل يظل النموذج الذي يبدو رائعًا ناجحًا بالمقاس الحقيقي وبالخامة الحقيقية؟
هذه القرارات ما زالت تتطلب خبرة في التصميم. يتيح لي الذكاء الاصطناعي رؤية الفكرة أبكر بكثير، أما دوري فهو أن أقرر أي الأفكار تستحق المضي بها.
لماذا بنيتُ المتجر قبل تصميم الصفحات
عادةً أصمّم الصفحات أولًا ثم أبني. هذه المرة عكستُ الترتيب، لأنني بدأتُ من إطار عمل التجارة الإلكترونية الجاهز في Payload.
إذا صمّمتَ الصفحات أولًا، أو حتى بنيتها، ثم حاولتَ تركيب إطار تجارة إلكترونية جاهز تحتها، ستجد نفسك تدور في حلقة مفرغة: إمّا أن تلوي بنية الإطار لتنقذ التصميم، أو تلوي التصميم ليناسب الإطار.
لذلك طلبتُ من الذكاء الاصطناعي أولًا إعداد متجر Payload يعمل وتشغيل المسار الأساسي. بعدها تشكّل التصميم حول البنية الحقيقية للمتجر، مع إعادة عمل أقل بكثير.
الإعداد بسيط:
- أنشئ مجلدًا للمشروع على جهازك ومستودعًا جديدًا على GitHub.
- افتح Claude في ذلك المجلد وأرسل له متطلباتك، مع رابط المستودع في النهاية.
- كن واضحًا: ابنِ على إطار التجارة الإلكترونية في Payload، هذا نوع المتجر، هذه هي الصفحات، وهكذا يجب أن تعمل الطلبات ولوحة الإدارة.
ثم دعه يعمل. البناء الأول يستغرق بعض الوقت.
طلب تجريبي واحد، من البداية إلى النهاية
بعد جاهزية النسخة الأولى، تفقّدتُ واجهة المتجر وسجّلتُ الدخول إلى لوحة الإدارة للتأكد من أن الصفحات والوظائف الأساسية تعمل.
لكن التحميل ليس المقصود. السؤال الحقيقي: هل يكتمل الطلب؟ أضفتُ بيانات بيئة PayPal التجريبية (Sandbox) إلى ملف البيئة في المشروع، وأعدتُ تشغيل الخادم المحلي، واخترتُ منتجًا، وأتممتُ الشراء ودفعتُ بحساب مشترٍ تجريبي. نجحت عملية الدفع، وظهر الطلب نفسه في لوحة الإدارة.
هذا يثبت أن المسار الأساسي يعمل (طلب، دفع تجريبي، طلب في الخلفية)، لكن في بيئة اختبار فقط. قبل استقبال أموال حقيقية، ما زلت تحتاج إلى إعدادات التشغيل الفعلي وجولة أخرى من الفحص للمدفوعات وحالة الطلبات.
جعله يشبه العلامة
صار المتجر يعمل، لكنه بدا كقالب. ولتغيير ذلك استخدمتُ أدوات التصميم في Claude لوضع دليل تصميم للموقع.
قدّمتُ له ملخّص المشروع مع الشعار والألوان وصور المنتجات والتغليف وبقية عناصر الهوية. كلما كان الملخّص أدق، أحسن استخدامها: أي الصور تتصدّر، وكيف تُعرض المنتجات، وما الذي يبقى ثابتًا من صفحة إلى أخرى. وجاءني في المقابل مستند تصميم يتضمن مراجع للصفحات وإرشادات.
سلّمتُ ذلك إلى Claude Code، ووجّهته إلى المشروع المحلي والملفات المعنية، وبدأتُ محادثة جديدة في المجلد نفسه، ولصقتُ المستند وأضفتُ ملاحظاتي حول ما يجب تغييره بعد ذلك.
صار الشعار وصور المنتجات والأسلوب البصري جزءًا من الصفحات، ولم يعد الموقع يشبه القالب الذي بدأ منه في شيء.
من واجهة جميلة إلى متجر يمكن تشغيله
بقيت مهمتان: صقل الصفحات، وإضافة ما تحتاجه لتشغيل متجر فعلًا. والقائمة الثانية سهلٌ أن تُستهان بها:
- دول الشحن. جاء الإطار بقائمة دول عامة، فقلّصتُها إلى الدول التي نستطيع الشحن إليها فعلًا، حتى لا يطلب أحد شيئًا لا يمكننا توصيله.
- البريد الإلكتروني. لم يكن في النسخة الأولى أي خدمة بريد، فلا إشعارات بالطلبات ولا رسائل لاستعادة كلمة المرور. ربطتُ Resend لهذا الغرض.
- تسجيل الدخول عبر Google لتسهيل الدخول.
- تحسين محركات البحث وGoogle Analytics، مع إعدادات ملفات تعريف الارتباط ليتحكم الزوار في تفضيلاتهم.
- الأجزاء التي لا يراها أحد: الحماية من الروبوتات وتأمين الوصول إلى لوحة الإدارة.
لا شيء من هذا مثير، لكن الانتقال من نسخة تجريبية محلية إلى متجر حيّ يعني التفكير فيها كلها.
أما التصميم، فقد راجعتُ الموقع صفحةً صفحة. حدّد دليل التصميم الاتجاه، لكن النصوص والصور والتخطيط احتاجت إلى ضبط على الصفحات الحقيقية، فواصلتُ المراجعة وطلب التعديلات من الذكاء الاصطناعي حتى وصل إلى ما أريده للإطلاق.
أصبحت الصفحة الرئيسية شاشة كاملة واحدة بحركة افتتاحية مُعاد صياغتها، وحذفتُ الأقسام التي كانت تحتها. ونالت صفحة «من نحن» الاهتمام الأكبر: صور أكثر مولّدة بالذكاء الاصطناعي بروح العلامة، ومحتوى وتخطيط مُعاد كتابتهما لتتكامل القصة والمنتجات والصور.
وساعدني الذكاء الاصطناعي أيضًا في اختبار مسار الشراء كاملًا. وصلت رسالة تأكيد الطلب إلى بريد حقيقي، وظهر الطلب المطابق في لوحة الإدارة. أخيرًا ارتبطت الصفحات والطلبات والبريد ببعضها.
النشر على Railway
لدى Railway دليل نشر مكتوب خصيصًا لـ Claude. فتحتُه، وبدأتُ محادثة جديدة، وأعطيتُ Claude الرابط وطلبتُ منه اتباع الدليل لهذا المشروع.
عندما يتوقف ليسألك عن شيء، اقرأ جيدًا ما هو الخيار فعلًا: أي مشروع، وأي إعدادات، وما الذي عليك ملؤه بنفسك. توصية الذكاء الاصطناعي نقطة بداية جيدة، لكنها يجب أن تناسب مشروعك.
بعد النشر تحصل على رابط حيّ. راجع الصفحات الرئيسية ومسار الطلب مرة أخرى هناك؛ فعمل الموقع محليًا لا يضمن صحة إعدادات النشر. وقبل استقبال مدفوعات حقيقية، تأكّد من أن PayPal في وضع التشغيل الفعلي، وتحقق من الدفع والطلب في الخلفية وإشعار البريد.
الخطوة الأخيرة: اربط النطاق الذي سجّلته في البداية واضبط إعدادات DNS كما يرشدك Railway. وبعد تفعيل النطاق وHTTPS، افتح الموقع على نطاقك وافحصه مرة أخيرة.
ما أنصحك بأن تخرج به
الترتيب الذي نجح معي:
- حسم اتجاه العلامة.
- تشغيل المتجر ومسار الدفع.
- صقل التصميم واستكمال الميزات.
- النشر، ثم فحص كل شيء من جديد.
يستطيع الذكاء الاصطناعي إنجاز الكثير في كل مرحلة، لكن بعد كل مرحلة انظر إلى النتيجة الفعلية. هل التصميم متّسق؟ هل تكتمل الطلبات؟ هل تصل الرسائل؟ هل يعمل الموقع الحيّ؟
أي جزء تريدني أن أتعمّق فيه أكثر: تصميم العلامة، أم بناء المتجر، أم PayPal والنشر؟ أخبرني في تعليقات YouTube، واشترك في الأسفل لتصلك المقالة التالية.
