الدليل الشامل لبناء Magento 2 PWA

نشرت: 2022-04-20

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

بادئ ذي بدء ، تحتاج إلى معرفة تطبيق الويب التقدمي

ماجنتو بوا

إذن ما هو تطبيق الويب التقدمي بالضبط؟

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

بعض الميزات البارزة لتطبيق الويب التقدمي

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

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

استخدام ميزات الهاتف : تتمتع PWAs بالكثير من الاحتمالات للوصول إلى ميزات الجهاز على Android وقليلًا أقل على iOS. يُثري استخدام الكاميرات أو نظام تحديد المواقع العالمي (GPS) أو ماسحات بصمات الأصابع بطريقة تشبه التطبيقات تجربة المستخدم.

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

الأمان : باستخدام بروتوكول HTTPS ، تكون البيانات آمنة بسبب التشفير ، وبالتالي يصعب اعتراضها وتغييرها. علاوة على ذلك ، يرى المستخدمون أن HTTPS ضمانًا لسلامة وموثوقية الناشرين. وتعطي Google نقاطًا إضافية في ترتيب البحث لاستخدامها.

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

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

الآن ، ما هو Magento 2 ولماذا أصبح أكثر شهرة؟

ماجنتو 2

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

إذن ، ما الذي يميز Magento 2 عن Magento 1؟ ما الميزات الجديدة التي يقدمها على الطاولة؟

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

تفتقر Magento 1 إلى الميزات التي يقدمها منافسوها ، مثل استجابة الأجهزة المحمولة ، بالإضافة إلى وجود منحنى تعليمي عالٍ وحالات تباطؤ كبيرة.

يتم تناول العديد من هذه المشكلات في Magento 2. وهناك بعض الفروق المهمة:

  • يدعم أحدث إصدارات PHP ، مما قد يؤدي إلى إبطاء موقعك.
  • يتم دعم CSS3 و HTML5 و MySQL.
  • أوقات تحميل أسرع للصفحة (في المتوسط ​​20٪ أسرع) من Magento 1.
  • هل الموقع مناسب للجوّال؟
  • لديه واجهة إدارة أكثر سهولة في الاستخدام للموظفين غير الفنيين.
  • يقلل عدد الخطوات في عملية السداد من ست خطوات في Magento 1 إلى خطوتين في Magento 2.

من المهم أن نفهم أن Magento 2 يأتي بثلاث إصدارات مختلفة.

  • Magento 2 Open Source (المعروف سابقًا باسم Magento 2 Open Source): يمكن لأي شخص تنزيل هذا المنتج مجانًا من موقع Magento الإلكتروني. بعد ذلك ، يمكن للمستخدم تثبيت Magento ، لكنهم مسؤولون عن جميع رسوم الاستضافة والدعم والتطوير.
  • Magento 2 Commerce (في مكان العمل) - يتضمن هذا الخيار المتميز داخل الشركة ميزات ودعمًا إضافيًا. بسبب السعر الشهري المرتفع ، يمكن للشركات الأكبر فقط اعتماده. (ستتم مناقشة التكاليف بمزيد من التفصيل أدناه).
  • Magento 2 Commerce Cloud - إصدار مستضاف على السحابة من Magento 2 Commerce يحتوي على جميع إمكانات إصدار Enterprise المحلي دون الحاجة إلى الاستضافة الذاتية.

لماذا كان تطبيق PWA In Magento 2 هو الاتجاه مؤخرًا؟

ماجنتو 2 PWA

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

تجربة مستخدم محسنة على الأجهزة المحمولة

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

انخفاض تكلفة التطوير والصيانة مقارنة بالتطبيقات الأصلية  

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

جهاز اللا أدريه

أكبر ميزة لـ Magento 2 PWA التي يمكنك رؤيتها هي حيادية الجهاز. بصراحة هذا يعني أن مثل هذه البرامج متوافقة مع أي جهاز ومتصفح. يمكن للعملاء التسوق على أجهزتهم المفضلة في متجر على الإنترنت.

المركز الأول في Google SERP

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

قابل للربط

هذه خاصية أخرى تشترك فيها PWAs والمواقع الإلكترونية. يمكنه الاحتفاظ بالمعلومات وإعادة تحميل حالتها بفضل توفر معرف الموارد الموحد (URI). يمكن للعملاء حفظ روابط Magento 2 PWA الخاصة بك ، ومشاركة عناوين URL ، وحتى إعادة تحميل نفس الصفحات التي حفظوها في علامات التبويب. تعمل التطبيقات التقدمية بشكل مشابه لمواقع الويب التقليدية في هذه الحالة.

لا توجد تحديثات من جانب المستخدم

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

عملية دون اتصال

القدرة على العمل دون اتصال بالإنترنت هي أفضل ميزة لـ Magento 2 PWA. يمكن للمستخدمين الوصول إلى المحتوى الذي شاهدوه عبر الإنترنت حتى إذا لم يكن لديهم وصول إلى الإنترنت. أصبح هذا ممكنًا من خلال آلية التخزين المؤقت المدمجة ، والتي تحفظ المعلومات حول جميع الصفحات المعروضة تلقائيًا.

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

دفع الإخطارات

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

حماية

Magento 2 PWAs آمنة تمامًا. سيكون بروتوكول HTTPS مسؤولاً عن أمن البيانات وحمايتها من الرجل في الوسط. كما أنه يحظر تعديل المحتوى والتسوق.

لا توجد متطلبات متجر التطبيقات

لا يتعين عليك تلبية جميع معايير Google Play و App Store مع Magento PWA. إذا كان تطبيقك لا يفي بالمتطلبات ، فقد يتم حظره أو إزالته من متجر التطبيقات. علاوة على ذلك ، لا يقدمون إشعارًا مسبقًا ، مما يترك لك فرصة ضئيلة لحل المشكلات.

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

ثم كيف يتم بناء Magento 2 PWA بشكل فعال؟

كيفية دمج تطبيق الويب التقدمي PWA-in-Magento 2

هناك ثلاثة خيارات لتكامل Magento PWA لمالكي متاجر Magento للنظر فيها:

قم بتثبيت ملحقات Magento 2 PWA

هذا هو أبسط نهج لتضمين وظائف تطبيق الويب التقدمي في موقع Magento الحالي الخاص بك. يمكنك الآن الاختيار من بين مجموعة متنوعة من ملحقات Magento 2 PWA (المجانية والمتميزة) من مصادر مختلفة.

الإيجابيات: وحدات Magento 2 PWA غير مكلفة (تتراوح من 0.00 دولار إلى 150 دولار). بالإضافة إلى ذلك ، يستغرق تثبيت هذه الإضافات على موقعك بضع ساعات فقط.

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

PWA الخاص بك باستخدام Magento 2 PWA Studio

تم إصدار Magento 2.3 PWA Studio لمساعدتنا في تطوير ونشر وصيانة واجهة PWA لمواقع Magento 2.

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

السلبيات: Magento 2 PWA Studio عبارة عن مجموعة من الأدوات لمساعدتك في إنشاء PWAs. لا يزال هناك الكثير الذي يتعين القيام به. ضع في اعتبارك واجهة متجر Venia (PWA Studio demo) ، وهي بسيطة للغاية وتفتقر إلى العديد من ميزات Magento الافتراضية.

قم بتحويل موقعك إلى PWA باستخدام Magento 2 PWA Theme

إن Magento 2 PWA Theme عبارة عن حل تكامل PWA غني بالميزات مبني على Magento 2.3 PWA Studio و ReactJS و GraphQL. يتكون من جزأين: واجهة متجر PWA كبيرة وواجهة برمجة تطبيقات مدمجة تربط واجهة المتجر بالواجهة الخلفية لماجينتو.

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

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

كم ستدفع كل طريقة؟

كما ذكرنا ، هناك ثلاث طرق لتحويل مواقع Magento 2 إلى PWA ، والتي ترتبط بتكاليف مختلفة:

ملحقات Magento 2 PWA:  

يجب عليك شراء الوحدة (حتى 150 دولارًا) والدفع مقابل خدمة التثبيت (أو تثبيت الامتداد وتكوينه بنفسك).

ستوديو ماجنتو 2 PWA:

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

موضوع Magento 2 PWA:

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

استنتاج

ننتقل بك خلال هذه المقالة على أمل أن: لديك نظرة عامة على Magento 2 PWA وكيفية إنشائها. مع الكثير من الميزات المذهلة ، من الجدير بالتأكيد القفز إلى زيادة فعالية متجرك عبر الإنترنت. لذلك ، يمكن لعملك أن يلبي طلب العملاء ويجلب المزيد من الفرص للتطور في بيئة الإنترنت. ومع ذلك ، إذا كنت لا تزال مرتبكًا بشأن هذه التكنولوجيا ، فإن Magesolution على استعداد لتكون شريكًا لمساعدة عملك. مع العديد من الخبرات في هذا المجال ، نحن واثقون من تقديم أفضل خدمة: Magento Progressive Web Application Development . لذلك ، إذا كانت لديك أي أسئلة ، فاتصل بنا للحصول على مزيد من المعلومات.