تصميم تطبيق إنتاج منفصل على شوبيفاي Shopify – تطبيقات الويب

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

المشكلة

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

عملية إنشاء تطبيق جديد في لوحة التحكم بارتنر partner dashboard والاتصال مع التطبيق الجديد تتم تلقائيًا عند إنشاء تطبيق جديد باستخدام واجهة سطر أوامر شوبيفاي Shopify CLI عبر (npm init @shopify/app@latest).

وبعد ذلك، حالما تطلق خادم التطوير عن طريق تشغيل الأمر npm run dev، ستعمل واجهة سطر أوامر شوبيفاي Shopify CLI على تحديث عنوان الويب URL في إعدادات التطبيق للإشارة إلى عنوان الويب URL الجديد، وهو ما ينقل الطلبات إلى ذ لديك.

عند نقل التطبيق إلى مرحلة الإنتاج، سيتعيّن عليك تحديث عنوان الويب URL للتطبيق يدويًا مع عناوين الويب URL التي تستضيف تطبيقك عليها؛ لذا لا يُنصح باستخدام التطبيق نفسه في مراحل التطوير المتقدمة، لأن تفعيل الأمر npm run dev سيؤدي إلى تحديث عناوين الويب URL للإشارة إلى خادم التطوير المحلي لديك، مما يؤدي إلى تعطل التطبيق، وهذه نقطة مهمة يجب أخذها في الحسبان خلال تطوير تطبيقات شوبيفاي.

توضح الصورة أدناه ما ذكرته منصة شوبيفاي في أدلتها الرسمية حول الموضوع السابق:

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

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

الحل

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

الجزء الأول: التطبيق

أنشئ تطبيقًا جديدًا من لوحة تحكم بارتنر partner dashboard واستخدم معرف العميل ID الذي أُنشئ حديثًا وكلمة سر العميل لنقل التطبيق إلى مرحلة الإنتاج، وإليك فيما يلي شرحًا مفصلًا أكثر:

1. إنشاء تطبيق جديد

أنشئ تطبيقًا جديدً يدويًا في لوحة تحكم شوبيفاي بارتنر Shopify Partner Dashboard، ويمكنك متابعة لقطات الشاشة أدناه لفهم الخطوات جيدًا:

2. استخدام بيانات اعتماد التطبيق الجديد خلال إنشاء التطبيق في مرحلة الإنتاج

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

على سبيل المثال، إذا كنت تريد نشر تطبيق باستخدام fly.io، فستحتاج إلى إضافة بيانات اعتماد التطبيق الجديد في ملف fly.toml.

سيؤدي الآن تفعيل الأمر npm run dev على جهازك المحلي إلى إنشاء التطبيق الجديد وربطه مع التطبيق الأقدم في لوحة التحكم بارتنر partner dashboard. لكن عند نقل التطبيق إلى مرحلة الإنتاج (مثلًا باستخدام الأمر flyctl Publish --build-arg في fly.io)، فسيؤدي ذلك إلى إنشاء التطبيق وتوصيله مع التطبيق الجديد في لوحة تحكم بارتنر partner dashboard.

الجزء الثاني: امتداد قالب التطبيق

عملية نقل امتداد قالب التطبيق إلى مرحلة الإنتاج عملية واضحة ومباشرة، فعوضًا عن استخدام الأمر npm run، يجب عليك استخدام الأمر

npm run deploy -- --reset

سيؤدي هذا إلى مسح الإعدادات المحفوظة لأمر النشر، وهو أمر ضروري لأن الامتداد أُنشئ في تطبيق أقدم، وعند استخدام الأمر --reset سيطالبك Shopify CLI باختيار التطبيق الذي تريد نشر امتداد قالب التطبيق عليه.

لاحظ أن هذه الخطوة لا تؤثر على الإعدادات المحفوظة للأمر npm run dev، مما يعني أن تفعيله سيستمر في نشر امتداد قالب التطبيق في التطبيق الاختباري الأقدم.

في الختام

باتباع هذه الخطوات، سيكون بإمكانك تحقيق النتائج المرجوّة، إذ يؤدي تشغيل الأمر npm run dev إلى نقل كل من التطبيق وامتداد قالب التطبيق إلى مرحلة اختبار التطبيق؛ بينما يؤدي تشغيل الأمر npm runploy -- --reset إلى نقل امتداد قالب التطبيق فقط إلى مرحلة الإنتاج، وفي الأخير، يؤدي تشغيل نص التفعيل مثل flyctl Publish --build-arg إلى نقل التطبيق فقط إلى مرحلة الإنتاج.

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

ترجمة -وبتصرّف- للمقال Design a Separate Production App in Shopify لصاحبه Aditya Malani.

اقرأ أيضًا