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

PWA هو مجال واعد للتنمية في تطوير الشبكة. يقدم مطورو Magento 2 مجموعة من الأدوات الخاصة بهم لإنشاء تطبيق ويب عصري مخصص للهواتف المحمولة يتوافق مع تقاليد Magento ، وقد اتخذ مطورو Vue Storefront مسارًا لإنشاء واجهة عالمية يمكنها التفاعل مع مختلف الوصلات الخلفية عبر محولات (Magento ، WooComerce ، Odoo ،. ..). قبل بضعة أشهر ، جربت Magento's PWA Studio وتوصلت إلى استنتاج مفاده أن الحل لا يزال رطبًا. أحدثت النسخة التجريبية من Vue Storefront انطباعًا جيدًا عني وأردت أن أشعر بهذا الحل بشكل أكثر ارتباطًا.

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

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

هدف

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

بيئة العمل

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

لقد لعبت على الإصدار الصغير من نظام Linux Ubuntu 18.04 LTS 64 بت (وحدة المعالجة المركزية 2x 2198 ميجاهرتز وذاكرة الوصول العشوائي 2 جيجابايت و 10 جيجابايت).

إعداد بيئة العمل:

$ sudo -i # apt update # apt upgrade -y 

تثبيت nodejs و npm:

 # curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - # apt-get install -y nodejs # node --version && npm --version v12.13.0 6.12.0 

تركيب الغزل:

 # curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - # echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list # apt-get update && sudo apt-get install yarn # yarn --version 1.19.1 

تثبيت VSF

قبل تثبيت PM2 و vue-storefront / cli :

 # npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g 

لقد تركنا الجذر وننشئ إصدار التطبيق vue-storefront storefront 1.10.4 في الوضع اليدوي:

 # exit $ cd ~ $ vsf init Check avalilable versions ? Which version of Vue Storefront you'd like to install? Stable versions (recommended for production) ? Select specific version v1.10.4 ? Would you like to use friendly installer or install Vue Storefront manually? Manual installation Copying Vue Storefront files 

انتقل إلى الدليل الجذر للتطبيق وإنشاء تكوين محلي:

 $ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } } 

التكوين الأساسي موجود في ملف ./config/default.json . إنه يناسبنا باستثناء خيار server.host ، أي نحن بصدد الاتصال بالخادم عن بعد. تركت المنفذ ( server.port ) بشكل افتراضي - 3000.

بناء التطبيق

كان علي هنا أن أجرب ، في النهاية جئت إلى تسلسل الأوامر التالي:

 $ npm install $ yarn install $ yarn build $ yarn upgrade #    ,         

بدء وإيقاف التطبيق

 $ yarn start $ pm2 stop all 

اتصال التطبيق

عنوان التطبيق: http : //xxx.xxx.xxx.xxxhaps000/ ونتيجة لذلك ، لدينا رسالة خطأ:

استنتاج

نعم ، النتيجة ليست مؤثرة للغاية ، لكنها فعلت بدون magic خاص. Redis و ElasticSearch و GraphQL - تم تكوين كل هذا في ./config/default.json وهو مفقود حاليًا. كما يجب أن يكون هناك vue-storefront-api ووحدة لتكرار البيانات بين vue-storefront-api و Magento 2. أتمنى حقًا أن أكتب المزيد عنها.

هذا كل شيء الآن. شكرا للقراءة.