Claude Code يقضي تمامًا على جميع وكالات Shopify
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00أصبح إعداد متاجر Shopify أسهل من أي وقت مضى لأنك الآن ببساطة تدمجه مع
00:00:04وكلاء الذكاء الاصطناعي الذين تستخدمهم للبرمجة وتدعهم يتولون كل شيء. لكن ربط Claude code بـ
00:00:09متجرك ليس كافياً بحد ذاته. للحصول في النهاية على متجر لا يبدو تقليدياً مثل
00:00:14كل متاجر Shopify الأخرى، تحتاج إلى دمجه مع بضع قطع أساسية في إعدادك.
00:00:19بحلول نهاية هذا الفيديو، ستعرف سير العمل الكامل الذي يمكنك استخدامه لإعداد
00:00:23خط أنابيب Shopify الخاص بك من البداية إلى النهاية لتبدأ في بيع منتجاتك على الفور.
00:00:28تحتاج إلى اتباع بضع خطوات للتحضير لبناء متجرك. أول
00:00:32شيء تحتاجه هو حساب شريك Shopify، لذا اذهب إلى المتصفح وقم بالتسجيل. حساب الشريك
00:00:37مهم لأنه يمنحك الوصول إلى أدوات التطوير التي تتيح لك تجربة
00:00:41المنصة. إنها أساساً بيئة تجريبية لمتاجرك، حيث يمكنك بناء تطبيقك بالطريقة التي
00:00:46تريدها عادةً، مع إتاحة أدوات التطوير مثل المدفوعات الوهمية ومستخدمي الاختبار حتى
00:00:51تتمكن من اختبار التطبيق قبل إطلاقه. ولاحقاً، إذا اعتقدت أن تطبيقك جاهز للبدء
00:00:56في البيع، ما عليك سوى إضافة تكاملات الدفع ويمكنك بسهولة نقل حساب التطوير إلى
00:01:01حساب التاجر حيث يمكنك البدء في بيع منتجات حقيقية لأشخاص حقيقيين.
00:01:05الآن بمجرد إنشاء التطبيق في المشروع، حان الوقت لتثبيت Shopify CLI. يمكنك القيام بذلك عن طريق
00:01:10نسخ أمر التثبيت من مستندات CLI وتشغيله في الطرفية. بمجرد تشغيله،
00:01:15سيُطلب منك الاختيار بين تطبيق React أو تطبيق امتداد. اخترنا تطبيق React لأنه
00:01:20ما نطور فيه غالباً ومن الأسهل تخصيص التطبيق بهذه الطريقة. بعد ذلك، يمكنك اختيار
00:01:26اللغة التي تريد استخدامها وقد اخترنا TypeScript بسبب ميزات أمان النوع والأمان
00:01:31مقارنة بـ JavaScript. بمجرد الانتهاء من هذا الإعداد، سيتم تثبيت جميع التبعيات اللازمة لـ
00:01:37تشغيل التطبيق. بعد إدخال التبعيات، سيكون المشروع جاهزاً وعند تشغيله،
00:01:41سترى قالباً أساسياً للتطبيق يمكنك من خلاله البدء في إجراء المزيد من التغييرات. لذا بمجرد تثبيت CLI،
00:01:46هناك أشياء أخرى تحتاج إلى تثبيتها، بدءاً من مجموعة أدوات Shopify AI التي
00:01:51تضيف إلى عملية البناء. الجزء الأكثر أهمية فيها هو MCP وأمر التثبيت الخاص بـ
00:01:56MCP لجميع وكلاء برمجة الذكاء الاصطناعي يمكن العثور عليه في المستندات. بما أننا استخدمنا Claude code، فقد نسخنا الأمر
00:02:03الخاص بـ Claude وقمنا بتثبيت MCP ويمكنك القيام بالشيء نفسه مع أي أداة برمجة تختارها. بمجرد تثبيت MCP
00:02:08فإنه يكشف عن أدواته لـ Claude، لكن MCP وحده ليس كافياً لأن جميع الأدوات الموجودة فيه
00:02:14موجودة أساساً لمساعدة Claude على البناء بشكل أفضل. لا يملك MCP أي طريقة لدفع التغييرات إلى متجرك الذي يعمل
00:02:19في السحابة. إنه يحتوي فقط على مستندات ومعرفة حول Shopify API جنباً إلى جنب مع عمليات التحقق الأخرى. لذا
00:02:25هذا الإعداد لم يكن كافياً للبناء بمفرده. ولهذا السبب يهم CLI لأنه
00:02:30في الواقع الجسر بين تطبيق Shopify والإعداد المحلي. بصرف النظر عن MCP، تحتاج أيضاً إلى
00:02:35تثبيت الملحق (plugin). الملحق مهم لأنه يحتوي على وكلاء ومهارات متعددة مجمعة معاً.
00:02:40يمكنك تثبيته باتباع أوامر التثبيت. بعد تشغيل أوامر التثبيت،
00:02:44قم بتشغيل أمر إعادة تحميل الملحقات وسيكون جميع الوكلاء والمهارات جاهزين للاستخدام.
00:02:49الآن تم الانتهاء من الإعداد الرئيسي، ولكن قبل أن تبدأ بالفعل في البناء، تحتاج إلى تحضير المشروع
00:02:53نفسه. أول شيء يجب إعداده هو ملف Claude.md، وهو في الأساس الملف لتوجيه
00:02:59الوكيل بشأن الممارسات التي تريد منه اتباعها. يحتوي ملف Claude.md الذي أضفناه على جميع أفضل الممارسات التي
00:03:05نتحدث عنها دائماً. لدينا فيديو كامل مخصص حول هذا حيث نستعرض أفضل الممارسات لـ
00:03:10ملف Claude.md، والذي يمكنك التحقق منه على القناة. بصرف النظر عن Claude.md، تحتاج إلى بعض
00:03:15الأشياء الأخرى في مكانها أيضاً. افتراضياً، يقوم Claude بإنشاء ملفات SVG ويستخدمها كعناصر نائبة للصور. ولكن
00:03:21ملفات SVG هذه لن تفي بمرئيات متجرنا، لذلك أنشأنا مهارة لسد الفجوة. أنشأنا
00:03:26مهارة توليد الصور Gemini، والتي تتيح لأي وكيل تقوم بتثبيتها فيه استدعاء Gemini CLI و
00:03:32مطالبته بإنشاء صور للموقع الإلكتروني. تحتوي المهارة على تعليمات حول كيفية استدعاء Gemini CLI
00:03:38ومكان حفظ الصور التي تم إنشاؤها. ولأن Gemini CLI يحتوي على ميزة توليد صور مدمجة، فلا
00:03:44حاجة لمفتاح API منفصل، لذا يمكنك استخدام هذه المهارة مباشرة بمجرد الاعتماد على مصادقة Gemini CLI
00:03:50بصرف النظر عن توليد الصور، قمنا أيضاً ببناء مهارة أخرى لراحتنا. مهارة النموذج الأولي
00:03:55تعمل بطريقة تجعل الوكيل، كلما طلبت منه تغييراً في التصميم، ينشئ أولاً ملف HTML
00:04:01يمكنك معاينته، وبمجرد معاينته، يطبق هذا التغيير على تصميم التطبيق. ملف
00:04:05skill.md يحتوي على تفاصيل حول سير العمل بأكمله مقسماً إلى مرحلتين. بمجرد وضع هذه المهارات في مكانها،
00:04:11هناك بعض الخطافات (hooks) التي تقوم أيضاً بتهيئة وتوصيلها في settings.json داخل مجلد .claud
00:04:17هذه الخطافات تعمل أساساً كحواجز حماية لـ Claude. على سبيل المثال، يمكن لبرنامج pre-tool المستخدم
00:04:22إيقاف Claude قبل أن يدفع التغييرات مباشرة إلى التطبيق دون موافقتك. يمكنك تهيئة العديد من
00:04:28الخطافات كما تريد. لذا مع وجود هذا الإعداد، كنا مستعدين لبناء التطبيق فعلياً. ولكن قبل أن نمضي
00:04:33قدماً، لنستمع إلى كلمة من راعينا، Willow Voice. إذا كنت تقضي معظم يومك في كتابة رسائل البريد الإلكتروني،
00:04:37رسائل Slack، المستندات، والمطالبات، فأنت تعمل ببطء أكبر مما تحتاج. Willow Voice يتيح لك
00:04:42التحدث بدلاً من الكتابة في أي مكان على جهاز الكمبيوتر الخاص بك، ويظهر النص فوراً. إنه ليس مثل
00:04:47الإملاء المدمج الذي يخطئ في كل كلمة أخرى. Willow أدق بثلاث مرات، و
00:04:52يقوم فعلياً بتنسيق كل شيء بشكل صحيح مع الفقرات والهيكل. أفضل جزء هو أنه يتكيف مع ما
00:04:57تفعله؛ رسمي عند كتابة بريد إلكتروني، غير رسمي عند استخدام Slack، وتقني عند كتابة الأكواد.
00:05:02إنه يتعلم كيف تكتب بمرور الوقت بحيث تبدو المخرجات وكأنها أنت، وليس روبوتاً. أكثر من 100,000 محترف
00:05:07يستخدمونه يومياً، وهو حاصل على شهادة SOC2 مع الامتثال لـ HIPAA وعدم الاحتفاظ بالبيانات، لذا تظل كلماتك
00:05:13خاصة. لقد كنت أستخدمه خلال الأسبوع الماضي، والعودة إلى الكتابة تبدو بطيئة بشكل مؤلم الآن.
00:05:18قم بتنزيل Willow Voice مجاناً باستخدام الرابط الموجود في الوصف. الآن بعد أن أصبح هذا في مكانه، يمكنك
00:05:23فقط مطالبة Claude بما تريد بناءه. تحتاج إلى وصف الصفحة المقصودة التي تريدها،
00:05:27تماماً مثل كيفية ذكرنا للأسلوب الذي أردنا أن تتبعه الصفحة المقصودة. ولأننا كنا قد
00:05:31قمنا بتهيئة المهارة، فقد قام بتحميل مهارة النموذج الأولي أولاً. لذا بدلاً من إجراء التغييرات مباشرة على
00:05:36التطبيق الفعلي، كتب كود HTML قام فيه بإنهاء التصميم، ثم انتظر موافقتنا.
00:05:41كما قام بفتح التصميم في علامة تبويب جديدة حتى نتمكن من معاينته. الإصدار الأول الذي بناه
00:05:46بدا نظيفاً وعمل بشكل جيد بصرياً، لكنه استخدم أقساماً نائبة على الصفحة المقصودة حيث كانت
00:05:51الصور يجب أن تذهب. بما أننا قمنا بتثبيت مهارة توليد الصور، كان ينبغي عليه تحميل
00:05:55ذلك مباشرة واستخدام توليد الصور في المقام الأول. لذلك طالبناه مرة أخرى باستخدام مهارة توليد
00:06:00الصور وبالفعل توليد صور لتلك الأقسام النائبة. بعد أن قدمنا تلك المطالبة،
00:06:05أطلق العديد من Gemini CLIs من خلال أداة bash وفتحها في وضع YOLO حتى لا يتم حظر Gemini CLI
00:06:12بواسطة أي مطالبة إذن. أطلق Claude عدة طرفيات وبدأت جميعها
00:06:17في توليد الصور بالتوازي. يستغرق توليد الصور وقتاً أطول، لذا عليك انتظار انتهائه.
00:06:22بمجرد جاهزية الصور، يمكنك التحقق من الموقع وسيبدو أكثر صقلاً. وبما أن
00:06:27مطالبات توليد الصور كانت أيضاً تحت سيطرة Claude، فإن الصور تطابقت مع نمط واجهة المستخدم بشكل جيد جداً.
00:06:33الآن مع إضافة المرئيات، أصبح الموقع مكتملاً. يمكنك التكرار على التصميم في هذه
00:06:38النقطة. نظراً لأننا لم نعد نملك المزيد من التغييرات، طلبنا من Claude المتابعة وتنفيذ التطبيق في المتجر.
00:06:43سيسألك بضعة أسئلة تتعلق بكيفية رغبتك في تنفيذ التطبيق، مثل ما إذا كنت
00:06:48تريد مزامنته مع المتجر الحي أم لا، وهو ما قمنا به، لذا اخترنا ذلك الخيار. بمجرد إجابتك على أسئلته،
00:06:53شرع في تحويل تصميم HTML إلى التطبيق نفسه، ليس مباشرة إلى التطبيق الرئيسي،
00:06:58بل إلى تطبيق التطوير الذي أنشأناه. لقد قلد التصميم واحداً تلو الآخر ويمكنك معاينة التطبيق
00:07:03بنفسك لترى أنه قد قلد التصميم تماماً. الآن، كان من الجيد أننا استخدمنا معاينة HTML
00:07:08قبل تنفيذه فعلياً في التطبيق لأن هذه العملية تستغرق الكثير من الوقت. وإذا كنت
00:07:13تتكرر على التصميم باستخدام هذه العملية، لكان ذلك قد أهدر الكثير من الوقت والرموز (tokens). كان النموذج الأولي
00:07:18بـ HTML أسرع وأسهل بكثير في التكرار معه. أيضاً، إذا كنت تستمتع بمحتوانا، ففكر في
00:07:23الضغط على زر الـ hype لأنه يساعدنا في إنشاء المزيد من المحتوى مثل هذا والوصول إلى المزيد من الأشخاص.
00:07:28حتى هذه النقطة، التطبيق متزامن مع رابط المتجر الفعلي. التصميم الذي بنيته للتو موجود على
00:07:34الخادم المحلي للمعاينة على الجهاز المحلي كما أنه موجود داخل معاينة السمة (theme preview)، حيث
00:07:39قام بشحن السمة أساساً إلى تطبيق التطوير حتى نتمكن من معاينته مباشرة. إنه ليس الإصدار النهائي،
00:07:44إنه مجرد مسودة. لذا أخبرناه ببساطة بمزامنة المباشر وقد استخدم Shopify CLI وأدوات MCP
00:07:50لمزامنة التصميم مع الرابط الرئيسي الذي تم تهيئته لمتجر Shopify. وبعد هذا،
00:07:55سيكون Claude قد حدث التصميم مباشرة على تطبيقك. الآن، بالمثل، يمكنك أن تطلب منه تحديث جميع
00:08:00الصفحات الأخرى على موقعك الإلكتروني وسيتبع نفس العملية. سيقوم أولاً بعمل نموذج أولي للأقسام،
00:08:05ثم تحديثها في التطبيق الفعلي ثم مزامنتها مع المتجر المستضاف. ولكن هناك بعض الأشياء
00:08:10التي ستحتاج إلى القيام بها في متجرك لجعله جاهزاً. في هذه المرحلة، لن تتمكن من إضافة
00:08:14منتجات لأن تحديث المنتجات وجعلها جاهزة للتنفيذ يتطلب Shopify admin
00:08:20API. لا يمكن القيام بذلك بدون admin API لأن هذا هو ما يمنحك الوصول إلى الأجزاء الرئيسية من
00:08:25المتجر مثل صفحة نبذة عن المنتجات وميزات الإدارة الأخرى. حتى الآن، كنا نقوم فقط
00:08:30بإجراء تغييرات على السمة وتطبيق تلك السمة على المتجر نفسه للمرئيات. لربط
00:08:35admin API، تحتاج إلى مصادقته مع المتجر باستخدام Shopify CLI. بمجرد إدخال
00:08:41أمر المصادقة مع رابط المصادقة الخاص بك، سيفتح المتصفح حيث يمكنك إجراء المصادقة. بعد
00:08:46ذلك، ستتمكن من إنشاء صفحات متعلقة بالمتجر وسيستخدم Shopify MCP وأداة CLI
00:08:52معاً لتحديث الأقسام الأخرى من الصفحة. الآن، يمكنك أن تطلب منه إضافة منتجات أخرى إلى
00:08:56متجرك حتى تتمكن من البدء في البيع. ولكن لإضافة منتجات، تحتاج إلى تهيئة الأذونات
00:09:01لمتجر Shopify حتى يتمكن من الوصول إلى الأدوات عبر admin API. إضافة منتجات تحتاج إلى المزيد
00:09:06من الأذونات غير تلك التي قدمناها سابقاً. لقد أضفنا فقط إذن كتابة المحتوى، ولكن لإضافة
00:09:11منتجات، نحتاج إلى أذونات إضافية مثل كتابة المنتجات وقراءة وكتابة المنشورات.
00:09:16لذا، تحتاج إلى تشغيل أمر المصادقة مرة أخرى ولكن مع أذونات إضافية. بمجرد القيام بذلك،
00:09:20يمكنك أن تطلب من Claude إضافة منتجات إلى موقعك. وبمجرد قيامه بذلك، يمكنك التحقق من التطبيق ورؤية
00:09:25المنتجات المدرجة هناك مع جاهزية المتجر بتفاصيل المنتجات وميزات العربة و
00:09:30يمكنك أيضاً التحقق من المنتجات في لوحة الإدارة. لكن من يزور متجرك لن يتمكن حتى الآن من إجراء
00:09:35عمليات شراء في هذه المرحلة. لكي يكون المتجر جاهزاً فعلياً لبيع المنتجات، تحتاج إلى إضافة تفاصيل
00:09:40الدفع حتى يمكن معالجة المدفوعات. ستحتاج أيضاً إلى اختيار خطة لأنه ما لم تفعل ذلك،
00:09:45فإن أي شخص يزور متجرك سيحتاج إلى إدخال كلمة مرور لمشاهدته، وهو أمر غير مجدٍ بالطبع. لذا،
00:09:51بمجرد اختيار خطتك، ستتمكن من البدء في بيع منتجاتك. الآن، دليل الإعداد الكامل
00:09:55وجميع المهارات التي تم إنشاؤها هنا يمكن العثور عليها في AI Labs Pro لهذا الفيديو ولجميع فيديوهاتنا السابقة
00:10:02حيث يمكنك تنزيلها واستخدامها لمشاريعك الخاصة. إذا وجدت قيمة في ما نفعله
00:10:07وتريد دعم القناة، فهذه هي أفضل طريقة للقيام بذلك. الرابط موجود في الوصف.
00:10:11هذا يوصلنا إلى نهاية هذا الفيديو. إذا كنت ترغب في دعم القناة ومساعدتنا في مواصلة صنع
00:10:16فيديوهات مثل هذه، يمكنك القيام بذلك باستخدام زر super thanks أدناه. كما هو الحال دائماً،
00:10:20شكراً لكم على المشاهدة وسأراكم في الفيديو القادم.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video