كيفية بناء Vue.js Shopify تطبيق الواجهة الأمامية مع Polaris

نشرت: 2019-06-17

ملاحظة: تتناول هذه المقالة إنشاء تطبيق Vue.js صفحة واحدة أعلى تطبيق Laravel الذي تم إنشاؤه في هذه المقالة. قبل قراءة هذا ، تأكد من قراءة المقالة السابقة حول إنشاء تطبيق باستخدام Laravel لأننا سنستخدم هذا الكود الحالي.

ما هو Vue.js؟

Vue.js هو إطار عمل للواجهات الأمامية لجافا سكريبت ، يمكن مقارنته بأطر مماثلة مثل React ومشتق في الأصل من AngularJS. بالمقارنة مع الأطر الأخرى ، فقد تم تصميمه ليكون أخف إلى حد ما ، بحيث يمكنك استخدامه كطبقة عرض فقط إذا كنت ترغب في ذلك - ولكن يمكنك أيضًا توسيع نطاقها على نطاق واسع باستخدام إدارة الحالة الكاملة أو استخدام إطار عمل فوق Vue مثل مثل Nuxt.js. يمكنك معرفة المزيد من المعلومات حول Vue.js هنا.

ما هو بولاريس؟

Polaris هو إطار تصميم واجهة المستخدم الخاص بـ Shopify ، يمكن مقارنته بأطر واجهة المستخدم الأخرى مثل Bootstrap أو SemanticUI. في Eastside Co ، لدينا منفذ Vue.js للمكتبة للحصول على واجهة مستخدم متسقة في تطبيقاتنا.

إعداد Vue.js للترجمة

يأتي Vue مع Laravel خارج الصندوق ، ولكن هناك بعض التخصيصات التي ستجعل التطوير أسهل. يأتي Laravel مع Laravel Mix وهو غلاف أنيق حول Webpack. يجمع Webpack جميع أصول الواجهة الأمامية وصولاً إلى ما تريد تقديمه لمتصفح العميل - يأتي Laravel مع تطبيق لهذا مع الكثير من الإعدادات الافتراضية. دعنا نحسن إخراج Webpack قليلاً. افتح webpack.mix.js في جذر مشروعك. قم بتغييره إلى:

 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ resolve: { extensions: [ '.js', '.vue', ], alias: { '@': path.resolve(__dirname, 'resources/assets/js'), }, }, devtool: “inline-source-map” });

لقد أخبرنا هنا حزمة الويب بملفات الأسماء المستعارة داخل مجلد الموارد / الأصول / js لاستخدامها في عبارات الاستيراد ، وللتعرف على امتدادات .vue و .js حتى لا نحتاج إلى استخدام أسماء ملفات كاملة في JavaScript. يجعل خيار devtool أيضًا wepack ينشئ خرائط مصدر لـ JS المترجمة للمساعدة في تصحيح الأخطاء في المتصفح بشكل أسرع.

يمكننا الآن تشغيل npm لتثبيت تبعيات الواجهة الأمامية ، وتشغيل خادم لمراقبة التغييرات في ملفات JavaScript الخاصة بنا. توجه إلى المحطة واكتب:

 Npm install Npm run dev

الآن ، نحتاج إلى ربط مسار Laravel الأساسي الخاص بنا بتطبيق Vue.

إعداد Vue.js في Laravel

نحتاج إلى بعض التغيير والتبديل للحصول على سقالة مناسبة من Laravel إلى Vue. أول الأشياء التي يتعين علينا القيام بها هي استيراد Vue إلى قالب Twig الأساسي ، ثم إنشاء نقطة دخول لتطبيقنا.

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

 routes/web.php Route::get('/vueapp', 'ShopifyController@vueapp'); app/Http/Controllers/ShopifyController.php public function vueapp() { return view('vueapp'); }

نظرًا لأن Vue سيستخدم نقطة نهاية أنشأناها في Laravel ، فقد تخلصنا من ShopifyAPI - ولكن سيتم استخدام هذا لاحقًا. نحتاج الآن إلى توصيل Vue بقالب Twig الجديد الخاص بنا ، والذي أطلقنا عليه اسم vueapp. قم بإنشاء الملف التالي:

 resources/views/vueapp.twig <!DOCTYPE html> <html> <head> <title>My VueJs app</title> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div> <app-entry></app-entry> </div> <script src="{{ asset('js/app.js') }}"></script> </body> </html>

رمز CSRF مهم - يمرر Laravel رمزًا مميزًا إلى Vue لمنع تزوير الطلبات عبر المواقع. هناك شيئان آخران يحدثان هنا - أولاً ، <div id=”app”> هي علامة div التي نربط Vue بها ، و <app-entry> هو مكون Vue مخصص لم نقم ببنائه بعد ، لذا سنقوم ببناء ذلك قريبًا.

بناء السقالات

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

 resources/js/AppEntry.vue <template> <p>App Entry Point</p> </template> <script> export default { mounted() { console.log('Rendered app entry point') } } </script>

لذلك ، الجزء الأخير هو تسجيل مكون <app-entry> في أداة تحميل التشغيل Vue. رئيس ل

الموارد / js / app.js

يوجد الكثير من التعليقات هنا من كود Laravel boilerplate - احذف كل التعليمات البرمجية واستبدلها بما يلي:

 require('./bootstrap'); window.Vue = require('vue'); Vue.component('app-entry', require('./AppEntry.vue').default); const app = new Vue({ el: '#app', });

لذلك ، تم تحميل مكون الإدخال الخاص بنا ، وتم تمهيد Vue ، حيث يتم ربطه بتطبيق div id. قم بتحميل المسار في متصفحك:

http: // localhost: 8000 / vueapp

ويمكننا أن نرى مع فتح أدوات تطوير المتصفح أن vue قد تمت تهيئته. نحن جاهزون للعمل!

إنشاء نقطة نهاية API

الآن لدينا نقطة دخول ، سننشئ مكونًا جديدًا يعرض قائمة بالمنتجات. قبل أن نتمكن من إنشاء مكون الواجهة الأمامية ، سنحتاج إلى إنشاء نقطة نهاية API والتي ستكون بشكل فعال وكيلًا من Shopify's API.

يأتي Laravel مع جذر أساسي / api / مهيأ تلقائيًا لاستدعاءات API ، مع منطق منفصل عن مسارات HTTP. أضف السطر التالي:

 routes/api.php Route::get('/products', 'ShopifyController@products'); We've not created the 'products' method in the ShopifyController, so let's create it: app/Http/Controllers/ShopifyController.php public function products() { $shopifyApi = app('ShopifyAPI'); $products = $shopifyApi->call('GET', '/admin/products.json'); return (array) $products; }

انتقل إلى نقطة النهاية الخاصة بك ويجب أن تحصل على البيانات مرة أخرى:

هذا كل شيء بالنسبة لنقطة نهاية واجهة برمجة التطبيقات - نحن لا نستخدم أي ترخيص لأن هذا دليل أساسي ، ولكن يمكنك التحقق من https://laravel.com/docs/5.7/authentication لمزيد من المعلومات حول عمليات التنفيذ المخصصة بما في ذلك الأساسي ، الحامل الرموز المميزة و oAuth.

إنشاء مكون وجلب بيانات API

لنقم بإنشاء المكون الذي سنعرض المنتجات فيه - أنشئ ملفًا جديدًا في دليل المكونات:

 resources/js/components/ProductComponent.vue <template> <div id=”root element”>Vue components always need one root element</div> </template> <script> export default { mounted() { console.log('Component loaded') }, data() { return { apidata: "" } }, } </script>

الآن قم بتسجيل المكون في Vue:

 resources/js/app.js Vue.component('shopify-products', require('./components/ProductsComponent.vue').default);

وقم بإفلات المكون في نموذج التطبيق الخاص بنا:

 <template> <div> <shopify-products></shopify-products> </div> </template>

هناك بعض الأشياء التي يجب شرحها باستخدام نموذج Vue قبل أن نتمكن من جلب المنتجات من نقطة نهاية API والتكرار فوقها. أولاً ، المنطق وراء علامة <script> - لكل مكون Vue دورة حياة يمكن الاستفادة منها في مراحل مختلفة وتمكنك من بث الأحداث وتعيين المراقبين ؛ أي شيء تحتاجه يمكن ترميزه هنا.

يمكنك معرفة المزيد عن مكونات الترميز هنا. لقد بدأنا بمجرد إضافة طريقة data () ، التي تُرجع البيانات التي ستستخدمها أو تربطها بالمكون. لقد قمنا بتسمية مفتاح هنا apidata وقمنا بإنشائه كسلسلة فارغة - والسبب في ذلك هو أنه سيكون مكان تخزين المنتجات للمكونات - بمجرد أن نقوم بعملية الجلب بعد تحميل الوحدة النمطية في دورة الحياة.

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

 resources/js/components/ProductComponent.vue <script> export default { mounted() { console.log('Component loaded') }, created() { this.fetchProducts() }, data() { return { apidata: "" } }, methods: { fetchProducts() { axios.get('/api/products').then(response => { this.apidata = response.data.products }) } } } </script>

ستتوفر المنتجات الآن للقالب تحت apidata - باستخدام حلقة Vue's v-for ، يمكننا التكرار عبر المصفوفة في القالب:

التقديم في Polaris

 <template> <div> <div class="card" v-for="product in apidata"> <h5>{{ product.title }}</h5> <p>{{ product.body_html }}</p> </div> </div> </template>

تحميل الصفحة والبنغو! فيما يلي منتجاتنا المقدمة:

عند التطوير في Vue ، يكون امتداد Vue devtools مفيدًا للغاية لتصحيح الأخطاء. يمكنك رؤية هذه الأدوات هنا.

إذا استخدمنا devtools ، يمكننا أن نرى القيمة التي أخذها كائن بيانات apidata (أي استجابة API التي تم تحويلها إلى مصفوفة):

التثبيت في بولاريس

لذا يتمثل الجزء الأخير في استخدام منفذ Vue Polaris التابع لشركة EastsideCo لعرض منتجاتنا. نقوم بتثبيت مكتبة Polaris عبر npm:

 Npm install @eastsideco/polaris-vue

ثم نربطها بتطبيق Vue:

 resources/js/app.js require('./bootstrap'); import PolarisVue from '@eastsideco/polaris-vue/lib/polaris-vue'; import PolarisVueCss from '@eastsideco/polaris-vue/lib/polaris-vue.css'; window.Vue = require('vue'); Vue.component('app-entry', require('./AppEntry.vue').default); Vue.component('shopify-products', require('./components/ProductsComponent.vue').default); Vue.use(PolarisVue); const app = new Vue({ el: '#app', });

سيكون لدينا الآن وصول إلى علامات HTML المخصصة التي تحمل اسم Polaris - يمكنك مشاهدة قائمة كاملة بالعلامات المنقولة على صفحة المستندات على http://demo.polaris-vue.eastsideco.io/

تمت إعادة هيكلة نموذجنا الآن ليبدو كما يلي:

 resources/js/components/ProductsComponent.vue <template> <div> <polaris-page> <polaris-card sectioned title="My Shopify Vue App"> Uses EastsideCo port of Polaris to Vue </polaris-card> <polaris-card sectioned> <polaris-layout-section> <polaris-resource-list :items="apidata"> <template slot="item" slot-scope="props"> <polaris-resource-list-item :attribute-one="props.item.title" :attribute-two="props.item.created_at" :media="props.item.image"> </polaris-resource-list-item> </template> </polaris-resource-list> </polaris-layout-section> </polaris-card> </polaris-page> </div> </template>

هناك الكثير مما يحدث هنا ، لذلك دعونا نقسمه -

الفتح <div> هو مجرد حاوية - وهذا لأن مكونات Vue.js تحتاج دائمًا إلى عنصر جذر. ثم نحدد حاوية CSS للصفحة باستخدام <polaris-page> .

ال تم تعريف نظام التخطيط بشكل جيد في المستندات المذكورة سابقًا.

ومع ذلك ، يعد <polaris-resource-list> مكونًا أكثر تعقيدًا - فهو يأخذ خاصية تم تمريرها ، والتي في هذه الحالة نقوم بتمرير الاستجابة لنقطة نهاية API التي أنشأناها. تحتوي قائمة الموارد بعد ذلك على فتحة محددة النطاق ، حيث نقوم بإنشاء <polaris-resource-list-item> . داخل الفتحة ، يمكنك تحديد فتحة أخرى - "عنصر" (فكر في هذا كتكرار عبر حلقة foreach كتفسير بسيط) ثم يتم تسمية النطاق الكامل للفتحة (وهو apidata) باسم دعائم الفتحة. لذلك ، للوصول في هذه المرحلة إلى خصائص التكرارات الحالية ، نستخدم props.item. يتم تحليل هذه السمات مثل السمة الأولى والوسائط بواسطة المكون وعرضها في مكتبة بولاريس. والنتيجة هي قائمة المنتجات الأساسية:

وها نحن - قائمة بالمنتجات الموصولة بـ Vue Polaris.

يمكنك العثور على نسخة عمل من هذا الرمز التجريبي على الريبو الخاص بنا على https://github.com/EastsideCo/polaris-vue.

في Eastside Co ، لدينا فريق لتطوير التطبيقات ، لذا إذا كانت لديك أي أسئلة ، فلا تتردد في الاتصال بنا!