تعزيز أداء الماجنتو الأمامي مع ReactJS

الماجنتو

Magento هي عبارة عن منصة PHP مفتوحة المصدر لبناء حلول التجارة الإلكترونية. تم بناؤه بواسطة شركة Magento (التي أصبحت الآن جزءًا من Adobe) ، ويستخدمها أكثر من 350،000 مطور في جميع أنحاء العالم. وهو يتيح إنشاء واجهات متاجر رقمية قابلة للتخصيص بدرجة كبيرة لأغراض العمل من عميل إلى آخر. Magento 2 ، الإصدار المحول من Magento E-commerce Platform ، يأتي بهندسة معمارية جديدة وهيكل ترميز وتصميم قاعدة بيانات.

أ) نظرة عامة

تم بناء منصة Magento على PHP و MySQL. خلال عمرها 10 سنوات (الإصدار 1.0 الذي تم إصداره في مارس 2008 والإصدار 2.0 في نوفمبر 2015 ، فقد خضع للتغيرات من حيث الهيكل وأنماط التطوير وهو الآن في نسخته الرئيسية الثانية ، Magento 2.

يتكون هيكل Magento من جزأين رئيسيين ، أحدهما هو النهاية الخلفية ، مع قاعدة البيانات و MySQL ، وواجهات النموذج والبيانات والخدمات ، كما يتضح في الشكل 3. هذه ترتبط مباشرة وتستخدم في كتل Magento ، تخطيطات ، والقوالب ، والتي سيتم تعريفها على أنها الواجهة الأمامية للتطبيق.

ب) البحث عن المنتج

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

في Magento ، يستخدم البحث عادةً MySQL أو Solr أو Elasticsearch لفهرسة الكتالوج. تحدد فهرسة الكتالوج النتائج التي يتم إرجاعها إلى واجهة المتجر عند إدخال مصطلح بحث جديد أو تغيير خيارات التصفية من النتائج التي تم جمعها بالفعل.

ج) ElasticSearch

Elasticsearch هو محرك بحث مجاني ومفتوح المصدر مبني على Apache Lucene. يتم استخدامه بشكل خاص عند التعامل مع كميات كبيرة من البيانات وعند الحاجة إلى استرداد تلك البيانات بسرعة. عند استخدام MySQL ، قد يستغرق البحث عن البيانات وقتًا طويلاً جدًا عند وجود الكثير من البيانات. وبالتالي ، فإن نقطة البيع الرئيسية لـ Elasticsearch هي مضاعفة سرعة الاستعلام بالمئات. إنه يعمل عن طريق فهرسة البيانات في مستندات تحتوي على مفاتيح وقيم ويأتي مع واجهة برمجة تطبيقات تسمح باسترداد هذه المستندات المفهرسة.

عند استخدامها في متجر Magento ، يتم فهرسة الكتالوج في عقدة Elasticsearch. يمكن تكوينه بسهولة عن طريق تمكينه وتحديده من لوحة المشرف الخاصة بالمحل وعنوان IP ومنفذ المضيف حيث توجد عقدة Elasticsearch.

د) البحث API

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

لتقديم طلب ، يجب على العميل إرسال طلب GET إلى مسار محدد مرفق بالعنوان URL الأساسي للمتجر. المسار هو / بقية / V1 / البحث /؟ التي يتم إلحاق معايير البحث.

2. ReactJS

أ) التفاعل كأداة

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

بخلاف حلول JavaScript القديمة ، والتي تتضمن إطلاق التغييرات يدويًا على الصفحة ، فإن React "يعرف" متى تحتاج واجهة المستخدم إلى تحديث وإعادة تقديمها على الصفحة عندما تتغير حالات المكونات. الفكرة الرئيسية التي تميز React عن المكتبات أو الأُطُر الأخرى (مثل AngularJS و Knockout) هي استخدام "DOM الظاهري" ، مما يعزز الأداء من خلال تقليل عدد التغييرات التي تحدث على DOM.

ب) رد فعل DOM الظاهري

DOM من React الظاهري هي من الناحية الفنية ما يبدو عليه. إنه DOM الذي يتم إنشاؤه عندما يتم عرض المكونات وعندما تتغير الحالات. تتمثل الطريقة المستخدمة في إنشاء DOM ظاهري جديد عندما يحتاج بعض العناصر إلى إعادة التقديم ومقارنته بتمثيل DOM ظاهري آخر للحالة السابقة للتطبيق ، مما يجعل "الفرق" باستخدام خوارزمية وإعادة التقديم في DOM فقط العناصر التي تحتاج إلى تغيير.

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

ج) مكتبة إدارة الدولة

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

3. رد فعل وماجنتو

يستخدم Magento 2.3 أداة جديدة تسمى PWA Studio. إنها أداة متقدمة لتطبيق الويب تتيح للمطورين العمل مع Magento بطريقة "مقطوعة الرأس" ، مما يعني أن الواجهة الأمامية غير مرتبطة مباشرة بالواجهة الخلفية ويتم الاتصال من خلال واجهات برمجة التطبيقات.

حتى الآن ، تم إنشاء واجهة المستخدم Magento باستخدام ما يسمى "كتل" التي لديها قالب (ملف phtml) وكتلة PHP. غالبًا ما يتم عرض البيانات على الصفحة أثناء تحميل هذه النماذج والنماذج والواجهات القادمة من الواجهة الخلفية.

يستخدم PWA Studio React و Redux و webpack للتنمية.

أ) ما هو تطبيق الويب التقدمي (PWA)؟

يعد تطبيق Progressive Web App بمثابة تطبيق ويب يستخدم إمكانيات الويب (HTML و CSS و Javascript) لتقديم تجربة مستخدم رائعة تحاكي التطبيقات الأصلية. بشكل أكثر تحديدًا ، يمكن أن تعمل PWA كالتطبيق الأصلي مع أيقونة على الشاشة الرئيسية للجوال ، صفحة البداية (بعد فتح التطبيق) ، عرض ملء الشاشة ، إشعارات الدفع ، وما إلى ذلك.

يجب أن تضمن جميع PWAs ثلاثة معايير أساسية: سريعة (الاستجابة لتفاعلات المستخدم على الفور تقريبًا) ، وموثوقة (تكون قادرة على العمل في ظل ظروف شبكة سيئة) والانخراط (تقديم تجربة سلسة تشبه التطبيق).

هناك بعض الاختلافات الرئيسية بين PWA والتطبيق الأصلي:

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

ب) الماجنتو و PWA

في عام 2017 ، تعاونت Magento مع Google لجلب أفضل ميزات PWA إلى نظام Magento بحلول نهاية عام 2018. تم إصدار Magento 2.3 في 28 نوفمبر 2018 ، مع الكثير من التحديثات المثيرة للإعجاب وكانت Magento PWA واحدة منها.

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

ج) لماذا يجب علينا تطبيق PWA في Magento 2؟

جذب تكامل تطبيق الويب التقدمي اهتمامًا كبيرًا من مستخدمي Magento ، لا سيما عند إصدار Magento 2 PWA Studio. فيما يلي ثلاث دوافع أساسية لتحويل موقع الويب الخاص بك إلى Magento PWA:

• تجربة مستخدم محسّنة على أجهزة الجوّال: إن الحصول على PWA على هاتف المستخدمين ليس بالأمر السهل ، ولا يلزم تنزيله ، لكنه فقط الباب قبل أن يختبروا وظائف مذهلة مثل الوضع غير المتصل بالإنترنت (الوصول إلى التطبيق حتى عند فقدان الاتصال بالإنترنت) ، مزامنة الخلفية (تأجيل الإجراءات حتى يكون اتصال الشبكة مستقرًا) وميزات أخرى تشبه التطبيق.
• تكلفة تطوير وصيانة أقل مقارنة بالتطبيقات الأصلية: بالنسبة للتطبيقات الأصلية ، سيتعين عليك تطوير تطبيقين منفصلين (أحدهما لنظام iOS والآخر لنظام Android) ، مما يؤدي إلى مضاعفة الوقت والجهد لتطوير التطبيق وصيانته. من ناحية أخرى ، هناك حاجة إلى قاعدة بيانات واحدة لإنشاء PWA التي يمكن تشغيلها بغض النظر عن نظام التشغيل.
• موقع PWA في Magento 2 ليس مجرد اتجاه ساخن ، بل سيكون مستقبل التطبيقات: لقد تبنت العديد من متاجر Magento هذه التكنولوجيا ووجدت أن رضا مستخدمي الهاتف المحمول قد تحسن بشكل كبير.

د) لماذا تركز Magento على PWAs؟

يوضح الرسم البياني أعلاه أن 63.5٪ من مبيعات التجارة الإلكترونية في عام 2018 تمت عبر الهواتف المحمولة والأجهزة اللوحية. في عام 2019 ، من المتوقع أن تصل المبيعات عبر الأجهزة المحمولة إلى 67.2٪.

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

ه) كيف يمكن Magento PWA تحسين الأعمال التجارية عبر الإنترنت؟

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

التوافق عبر الأنظمة الأساسية - يمكن تشغيل PWAs بسلاسة على جميع متصفحات الجوال والأنظمة الأساسية المستخدمة على نطاق واسع تقريبًا. يتضمن ذلك المتصفحات مثل Chrome و Safari و Edge و Firefox. قاعدة بيانات الويب الفردية تكفي للعمل على منصات متعددة ، بما في ذلك أجهزة سطح المكتب. وبالتالي ، لا يتعين على الشركات تطوير التطبيقات والمحافظة عليها من أجل منصات مختلفة. علاوة على ذلك ، لا يلزم تحديث PWAs من متجر التطبيقات. يمكن تسليم التحديثات في الوقت الحقيقي تمامًا مثل موقع الويب.

تصميم استجابة - تنفيذ PWA سيؤدي إلى تجربة متسقة عبر أجهزة مثل سطح المكتب والهواتف المحمولة وأجهزة الكمبيوتر اللوحي. هذا سوف يساعد في تحسين تجربة العملاء. قالت Google إن المواقع التي تتميز بتصميم ويب سريع الاستجابة ستحتل المرتبة الأفضل في نتائج بحث Google. وبالتالي ، فإن تنفيذ PWA يمكن أن يجعل الموقع أعلى مرتبة في نتائج بحث Google.

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

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

إعلامات الدفع - إعلامات الدفع هي الرسائل التي يتم إرسالها كإعلامات من التطبيق. يقال إن زيادة المشاركة بنسبة تصل إلى 88 ٪. تعد إعلامات الدفع مهمة لشركات التجارة الإلكترونية لإطلاع العملاء على آخر العروض والعروض وتحديثات الطلبات.

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

و) ما هي الفوائد التي يمكن لـ PWAs أن تعد بها لشركات التجارة الإلكترونية؟

نظرًا لأن PWAs تجمع بين أفضل ما في العالمين - التطبيق الأصلي وشبكة الجوال ، فإنها تحل مشكلتين هامتين تواجههما صناعة التجارة الإلكترونية في نفس الوقت:

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

ü زيادة عدد المستخدمين - يقوم العملاء بتنزيل تطبيقات الأجهزة المحمولة الخاصة بشركات التجارة الإلكترونية المعروفة فقط. مع PWAs ، يمكن للعملاء إضافة PWA من المتجر عبر الإنترنت إلى الشاشة الرئيسية لهواتفهم بنقرة زر واحدة.

ز) طرق لتحويل موقع Magento 2 إلى PWA؟

• تثبيت Magento 2 PWA Extensions
• إنشاء PWA الخاصة باستخدام Magento 2 PWA Studio
• تحويل الموقع إلى PWA باستخدام Magento 2 PWA Theme

ح) دراسات حالة PWA

ALIEXPRESS

AliExpress هي واحدة من أكبر شركات التجارة الإلكترونية ، ليس فقط في الصين ولكن على الصعيد العالمي. بمجرد تنفيذ PWA ، رأوا النتائج في أيام. كانت هناك زيادة بنسبة 74 ٪ في الوقت الذي يقضيه على موقعه على شبكة الإنترنت ، وتضاعف عدد مرات مشاهدة الصفحة.

فليبكارت

Flipkart هو أكبر متجر للتجارة الإلكترونية في الهند وأطلق Flipkart Lite باسم PWA.

زاد وقت المستخدمين في الموقع إلى 3.5 دقائق مع PWA ، في وقت سابق كان 70 ثانية في حالة التطبيق الأصلي. زادت نسبة المشاركة إلى 40٪ وتمت رؤية تحويل أكبر بنسبة 70٪ من العملاء الذين وصلوا عبر ميزة "إضافة إلى الشاشة الرئيسية". انخفض استخدام البيانات أيضًا إلى الثلث.

OLX

تعد OLX سوقًا رائدًا في الهند ، وكانت معدلات الارتداد مرتفعة لشبكة الجوال. كان نصف حركة المرور الخاصة بهم من شبكة الجوال ، واختاروا PWA لحل مشاكلهم.

بعد تنفيذ PWA ، انخفض معدل الارتداد بنسبة 80 ٪ ، وارتفع معدل النقر إلى الظهور (CTR) على الإعلانات بنسبة 146 ٪. بمساعدة إشعارات الدفع ، ارتفع معدل المشاركة بنسبة 250 ٪.

Jumia

يعد Jumia أحد متاجر التجارة الإلكترونية الشائعة في إفريقيا ، وبعد مشاهدة فوائد PWA ، قام بتطبيق PWA على عملياته الأخرى مثل Jumia Travel. زادت حركة المرور إلى PWA الخاصة بهم بمقدار 12 مرة أكثر من حركة المرور المدمجة للتطبيقات الأصلية - كل من Android و iOS. تم تقليل استخدام البيانات بمقدار خمس مرات وبيانات أقل بمقدار 2x لإكمال المعاملة الأولى. بالإضافة إلى ذلك ، تم تقليل مساحة تخزين البيانات المطلوبة بمقدار 25 مرة.

كونجا

كونجا لاعب كبير في نيجيريا ، واستخدموا PWA لتقليل استهلاك البيانات. من خلال تطبيق PWA ، استغرق التحميل الأولي بيانات أقل بنسبة 92٪ وإكمال المعاملة الأولى التي تتطلب بيانات أقل بنسبة 82٪.

الشركات التي تستخدم ميزات محدودة من PWA

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

طيران برلين

استخدمت AirBerlin وظيفة PWA في وضع عدم الاتصال لتقديم دعم موثوق به دون اتصال بالإنترنت لعملائها في المطارات. تمت إضافة الدعم دون اتصال وتقليل وقت التحميل الأولي إلى أقل من ثانية. سمح ذلك لركابهم بالوصول إلى تفاصيل بطاقة الصعود على متن الطائرة أو الرحلة دون الاتصال بالإنترنت.

واشنطن بوست

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