نظرة متعمقة في Shopify الهيدروجين و Shopify الأكسجين

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

بعض الميزات البارزة التي يجب أن تعرفها عن Shopify Hydrogen و Shopify Oxygen

نظرة عامة على Shopify الهيدروجين

Shopify Hydrogen ، الذي تم الإعلان عنه في Unite 2021 هو إطار عمل React جديد يتيح للمطورين إنشاء متاجر Shopify فريدة من نوعها حقًا. الهيدروجين عبارة عن نظام أساسي قائم على React و JavaScript يوفر للتجار أدوات ومكونات قوية. تسمح لك هذه السعة الإضافية بالبدء من الألف إلى الياء وإنشاء متجر مخصص وفريد ​​من نوعه.

كيف Shopify يعمل الهيدروجين

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

إطار عمل الهيدروجين: Shopify Hydrogen يقدم البرنامج المساعد Vite الذي يتضمن العرض من جانب الخادم (SSR) ، والبرمجيات الوسيطة للترطيب ، وتحويلات الكود لمكونات العميل.

مكونات واجهة مستخدم الهيدروجين: الهيدروجين عبارة عن مجموعة من المكونات والخطافات والأدوات المساعدة التي تدعم ميزات ومفاهيم Shopify.

مصادر المعلومات: تم تصميم الهيدروجين للعمل مع البيانات من Shopify's Storefront API. البيانات المقدمة للمكونات والخطافات والأدوات المساعدة لها شكل يطابق ويلتزم بأنواع GraphQL الخاصة بواجهة برمجة تطبيقات Storefront.

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

بعض أفضل الممارسات التي يجب اتباعها لإعداد الهيدروجين

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

• أداء
• إمكانية الوصول
• اختبارات

هناك مبادئ إرشادية لـ Shopify تطوير الهيدروجين

إذن ، ما هو Shopify Oxygen؟

ببساطة ، Oxygen هي خدمة الاستضافة التي تقدمها Shopify لتمكينك من استضافة المتاجر التي تنشئها باستخدام الهيدروجين.

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

الفوائد التي ستحصل عليها بالتأكيد عند استخدام Shopify الهيدروجين

يقدم Shopify Hydrogen المزايا التالية إذا كنت تفكر في إنشاء واجهة متجر مخصصة.

نموذج المتجر التجريبي

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

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

تحسينات الأداء

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

• للسرعة والأداء ، توجد عناصر تحكم مدمجة في التخزين المؤقت للتعامل مع المعلومات الديناميكية وتقليل استدعاءات API.
• يتحمل جانب الخادم مسؤولية تقليل العبء الأولي.
• مكونات خادم React عبارة عن تدفق لجلب البيانات وعرضها لمشاريع React التي لها رأي. تجربة التطوير باستخدام مكونات خادم React أفضل بكثير. يتم عرض المكونات بسرعة ، مما يتيح لك رؤية عملك أثناء إنشائه.

تطور سريع

يستخدم الهيدروجين كومة التكنولوجيا الأساسية الخاصة بـ Shopify ومهارات التجارة لتسريع عملية التطوير. إنه يعمل جنبًا إلى جنب مع Storefront API لتوفير استرداد سريع للبيانات.

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

React.js

Shopify أيد React.js كمستقبل للتجارة الديناميكية والسريعة والشخصية. ويمكنك أن تراهن على أن قرار Shopify للاستثمار في React يعد بيانًا مهمًا للصناعة. إنه يمنح React.js مصداقية أكبر كمستقبل التجارة أو إلى أين تتجه الأشياء.

ستتلقى مجموعة أدوات البداية ، والتي تتضمن العناصر التالية  

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

يمكن لفريقك المساعدة في بناء الهيدروجين

Shopify يبحث عن المساعدة من مجتمع تطوير التجارة الإلكترونية. بمساعدة Shopify ، يمكنك تصميم رؤية المنتج من البداية إذا كان لديك فريق تطوير داخلي قوي.

يمكن إعادة استخدام المكونات التي تقوم بإنشائها

بمجرد أن تبدأ باستخدام مجموعة أدوات بدء التشغيل ، ستتمكن من تصميم أجزاء مبكرة يمكنك إعادة استخدامها حسب الحاجة في جميع أنحاء موقعك النهائي.

ومع ذلك ، عليك مواجهة بعض العيوب المحتملة لـ Shopify Hydrogen

سير عمل ثقيل للمطورين قمت بإنشائه من الألف إلى الياء  

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

لا يوجد حاليا متجر معاينة متاح

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

يستخدم مكونات خادم React

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

ستحتاج إلى ربط نظام إدارة المحتوى الخاص بك (CMS)

اليوم ، يتعاون Shopify و Sanity لتقديم قدرة نظام إدارة المحتوى (CMS) لمتاجر الهيدروجين. Sanity هو نظام إدارة محتوى تابع لجهة خارجية موجه للمطورين ، مما يسمح للفرق بإنشاء مخططات بيانات المحتوى (الصور والنصوص ومقاطع الفيديو) لإدارة المحتوى منخفض التعليمات البرمجية.

دعم التطبيقات اليوم ضئيل للغاية

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

لا يزال الهيدروجين بعيدًا عن أن يكون بديلاً للسائل

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

استنتاج

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