كل ما تحتاج لمعرفته حول استوديو Magento PWA

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

لمحة عامة عن استوديو PWA

ما هو تطبيق الويب التقدمي؟

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

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

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

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

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

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

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

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

مخطط Magento PWA Studio

أصل Magento PWA Studio

أصدرت Magento مجموعة من الأدوات لجميع التجار الذين يديرون متاجر عبر الإنترنت. Magento PWA Studio هو اسم هذه المجموعة من الأدوات. سيوفر تجار التجزئة عبر الإنترنت الكثير من الوقت والمال لتطوير تطبيقات أصلية لجميع أنظمة التشغيل المختلفة.

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

يمكن للتجار الاستفادة من هندسة الواجهة الأمامية السريعة وفتح واجهات برمجة تطبيقات الويب. إنه يساعد على تحويل متاجرهم إلى ما أصبح بسرعة المعيار الجديد.

PWA Buildpack

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

واجهة محل PWA

PWA Storefront ، المعروف أيضًا باسم Venia Storefront ، هو دليل على صحة مفهوم PWA تم إنشاؤه باستخدام أدوات Peregrine و PWA Buildpack. عند التعرف على Magento PWA Studio وما يمكن أن يحققه ، تعرض واجهة المتجر عينات من صفحات الفئات وتفاصيل المنتج.

القطامي

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

بعض الميزات البارزة في Magento PWA Studio

ReactJS - يعمل ReactJS بشكل جيد جدًا ويوفر تجربة تسوق وتجربة مطور ممتازة.

بديل الشاشة الرئيسية - يوفر Magento PWA متجرًا يمكن تنزيله على الشاشة الرئيسية. سيبدو ويعمل كتطبيق محلي

يعمل دون اتصال - يمكن لتطبيقات الويب PWA أن تعمل دون اتصال بالإنترنت أو عبر الإنترنت.

خلفية قوية - توفر الخلفية الداخلية القوية لـ Magento تجربة مستخدم سلسة مع بعض المشكلات.

الميزة عند استخدام Magento PWA Studio

أدوات تطوير شاملة

يوفر Magento Studio أدوات تطوير PWA التي هي أحدث ما توصلت إليه التكنولوجيا وتتضمن وثائق شاملة. يمكن للمستخدمين ترتيب بيئات تطوير PWA المحلية الخاصة بهم بسرعة.

خطوه سهله

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

GraphQL

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

دعم المجتمع

Magento هي عبارة عن منصة تجارة إلكترونية معروفة ، والتي نتج عنها مجتمع عالمي كبير من مستخدمي Magento PWA والمتعاونين معها.

بنية وإطار استوديو Magento PWA

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

منشئ استوديو Magento PWA جاهز للاستخدام

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

عناصر Premade قابلة للتكيف

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

توجيه بسيط تمامًا وتخزين مؤقت

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

Magento PWA Studio والسلبيات التي ستحتاج إلى التغلب عليها

منصة واحدة

إذا كنت ترغب في امتلاك Magento Studio ، فأنت بحاجة إلى تشغيل كل متجر على Magento 2.3 والإصدارات الأحدث. على الرغم من أنه ليس من الضروري القلق بشأن التوافق ، إلا أنه مقيد تمامًا.

عدم التوافق

عندما يتعلق الأمر بالتوافق ، فإن ميزة GraphicQL في Magento Studios تجعلها غير مناسبة للإصدارات السابقة.

مشاكل دعم iOS

لا يدعم Magento إشعارات iOS PWA ولن يعمل مع أجهزة iOS غير المتصلة بالإنترنت.

قضايا التحقق من الصحة

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

كيفية تثبيت Magento PWA Studio (مع الإصدار 2

الخطوة 1: قم بتثبيت أحدث إصدار من Magento

لتثبيت Magento PWA Studio ، يجب أن يكون لديك إصدار Magento 2.3.x مثبت أولاً. لا يمكنك تثبيت Magento PWA Studio Project (2.3) بدونه ، لأنه لا يوجد إصدار آخر من Magento يدعمه.

الخطوة 2: قم بتثبيت NodeJS

بعد ذلك ، ستحتاج إلى تثبيت NodeJS (الإصدار> = 10.14.1). إذا لم تكن معتادًا على هذه التقنية ، فاستخدم الأمر المذكور أدناه. (هذا فقط لمستخدمي Linux.)

sudo apt-get install nodejs

بادئ ذي بدء ، تحتاج إلى التحقق من إصدار Node: node -v

بعد ذلك ، راجع إصدار NPM: npm -v

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

تنظيف ذاكرة التخزين المؤقت sudo npm -f

تثبيت sudo npm -gn

سودو ن مستقر

الخطوة 3: قم بتثبيت وتشغيل Node JS

بعد التثبيت وتشغيل NodeJS ، سيتعين عليك تثبيت Yarn (Yarn> = 1.13.0). قم بتشغيل الأمر التالي لتثبيت الخيوط. (ينطبق فقط على Linux OS).

sudo npm تثبيت الغزل -g

تحقق الآن من إصدار الغزل:

الغزل -v

الخطوة الرابعة:

الآن بعد أن تم تثبيت Yarn ، قم بنسخ مستودع PWA إلى دليل التطوير الخاص بك.

استنساخ بوابة: https://github.com/magento-research/pwa-studio.git

الخطوة الخامسة:

تبعًا لهذه الخطوة ، قم بتثبيت تبعيات المشروع عن طريق تشغيل الأمر التالي.

تثبيت الغزل

الخطوة 6: قم بإنشاء ملف .env

لإنشاء ملف .env ، قم بتشغيل الأمر التالي من دليل جذر PWA-

(بالنسبة للموضوع Venia ، يمكنك استخدام Magento المثبت بواسطتك أو Magento الافتراضي 2.3.1. هنا نستخدم الإعداد الافتراضي.)

MAGENTO_BACKEND_URL = ”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/” yarn buildpack create-env-file packs / venia-concept

يمكنك أيضًا إنشاء ملف .env وتعيين قيمة MAGENTO_BACKEND_URL المخصصة باستخدام الأمر التالي:

MAGENTO_BACKEND_URL = ”https: // YOUR_MAGENTO_BACKEND_URL /” yarn buildpack create-env-file packs / venia-concept

الخطوة 7: قم بتثبيت شهادة SSL

قم بتثبيت شهادة SSL أثناء تشغيل PWA على مسار آمن ، يمكنك تشغيل أمر إنشاء أصل مخصص لإنشاء شهادة SSL:

إنشاء حزم بناء الغزل الغزل حسب الطلب الحزم / مفهوم فينيا

الخطوة 8: تثبيت نموذج بيانات Venia

يمكنك أيضًا تثبيت بيانات عينة Venia ، وهناك برنامج نصي باش متاح بالفعل في حزم / venia-concept / publishVeniaSampleData.sh

نشر bashVeniaSampleData.sh

لتثبيت بيانات نموذجية في Magento ، قم بتشغيل الأوامر التالية:

إعداد بن / ماجنتو: ترقية

بن / مفهرس ماجنتو: reindex

قم ببناء جميع القطع الأثرية لموضوعك الآن عن طريق تشغيل-

بناء المدى الغزل

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

للتطوير-

مشاهدة تشغيل الغزل: فينيا

لتشغيل المطور الكامل PWA Studio

مشاهدة تشغيل الغزل: كل شيء

لبناء القطع الأثرية وتشغيل استوديو PWA إلى مرحلة-

مرحلة تشغيل الغزل والبناء والغزل: فينيا

تم الآن تثبيت PWA بنجاح. عند تشغيل الأوامر المذكورة أعلاه ، سترى عنوان URL حيث يعمل PWA. ثم سيشير إلى ما إذا كان التثبيت ناجحًا أم لا

استنتاج

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