ما هو تطبيق Shopify وكيفية بناء واحد

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

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

كيف يقارن تطبيق Shopify بتطبيق الويب

منظورنا حول هذا الموضوع هو أن تطبيق Shopify يعمل إلى حد كبير مثل تطبيق الويب القياسي ولكنه مرتبط بشدة بمنصة Shopify عبر واجهة برمجة التطبيقات. هذا له عدة آثار:

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

‍

من منظور التاجر ، يمكننا القول أن Shopify هو برنامج كخدمة (SaaS) ، وكذلك Shopify تطبيقات. هذا يعني أن التاجر لا يحتاج إلى التفاعل مع أي نوع من التعليمات البرمجية لتثبيت التطبيق الخاص بك.

Shopify مكونات التطبيق

نحدد ثلاثة مكونات منطقية يشتمل عليها تطبيق Shopify عادةً:

• مشرف التاجر
• معالجة Webhook
• تطبيق مواجه للعملاء (واجهة مستخدم واجهة المحل)

من بين هؤلاء الثلاثة ، الأخير ليس مطلوبًا بالضرورة. يعتمد ذلك على الوظيفة التي تريد توفيرها للتجار. على سبيل المثال ، يتكون تطبيقنا Candy Rack من المكونات الثلاثة ، بينما يتكون Loyal فقط من الجزأين الأولين.

مشرف التاجر

مدير التاجر هو لوحة تحكم حيث يقوم التاجر بإعداد التطبيق وتكوينه. يوصي Shopify بخدمة مسؤول التاجر داخل واجهة Shopify (ما يسمى بالتطبيق المضمن). هذا يعني أنك تقوم بتضمين التطبيق في إدارة Shopify باستخدام iframe.

تأتي التطبيقات المضمنة مع العديد من القيود:

• نظرًا لكيفية عمل المصادقة ، فأنت مقيد إلى حد ما ببنية التطبيق أحادية الصفحة (على الرغم من إمكانية الحلول الجزئية بمساعدة Turbolinks أو Inertia.js).
• قد يكون من المفيد استخدام React لكتابة الواجهة الأمامية حيث توجد مكتبات مقدمة من Shopify: تتأكد مكتبة Polaris UI من أن UX الخاص بك متوافق مع بقية Shopify المسؤول ويعمل جسر التطبيقات كجسر أمامي يوفر Shopify بيانات السياق لتطبيقك يعمل في إطار iframe.

يعد Merchant admin أيضًا أول نقطة اتصال بين تطبيقك والتاجر ، وهو المكان الذي يتم فيه معالجة عملية التثبيت. التثبيت يعني في الأساس الحصول على أذونات الوصول إلى بيانات متجر التاجر عبر OAuth.

إنه أيضًا جزء من التطبيق حيث تتعامل مع الفواتير في حالة عدم تقديم طلبك مجانًا.

معالجة Webhook

Webhooks هي الطريقة التي يقوم بها Shopify بإعلام تطبيقك بالأحداث المختلفة التي تحدث في المتاجر حيث تم تثبيته: على سبيل المثال ، إنشاء طلب جديد أو تحديث المنتج. أنت من يقرر الأحداث التي ستشترك فيها.

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

‍

تطبيق مواجه للعملاء (واجهة مستخدم واجهة المحل)

في حالة تمديد التطبيق الخاص بك Shopify Storefront (مما يعني أنه يجلب ميزات جديدة لعملاء المتجر) ، فأنت بحاجة إلى "إدراجه" في المتجر الأمامي. للقيام بذلك ، تحتاج إلى إخبار Shopify عبر واجهة برمجة التطبيقات لحقن مورد JavaScript في المتجر الأمامي. هناك طريقتان شائعتان لذلك: علامة البرنامج النصي وكتلة تضمين التطبيق. هناك أيضًا إمكانية لتوسيع سمة واجهة المتجر مباشرةً مع بعض المكونات المرئية باستخدام App Blocks (يُشار إليها أيضًا باسم أقسام التطبيقات).

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

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

تطور Shopify تطوير التطبيقات

بينما أخبرتك من قبل أن إنشاء تطبيق Shopify هو في الأساس تطوير تطبيق ويب ، فإن هذا البيان صحيح جزئيًا فقط. في عام 2021 ، قدمت Shopify مفهوم امتدادات الخروج. قبل ذلك ، لم يكن من الممكن توسيع وظائف الخروج باستخدام تطبيق Shopify. في هذا الجانب ، تختلف تجربة المطور مقارنةً بتطبيق الويب لأنه يحدث في بيئة محدودة للغاية (على سبيل المثال ، يمكنك استخدام مجموعة محددة فقط من مكونات React المعدة مسبقًا) ، ويتم التعامل مع عمليات الإنشاء والإصدار بواسطة Shopify.

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

كومة التكنولوجيا Digismoothie

‍

يمكنك معرفة المزيد حول التقنيات التي نستخدمها من هذه المقالة.

استنتاج

آمل أن تكون قد تعلمت ما يعنيه إنشاء تطبيق Shopify من منظور تقني وما هي التقنيات التي يمكن استخدامها.

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