Cara Membuat Aplikasi Frontend Vue.js Shopify dengan Polaris

Diterbitkan: 2019-06-17

Catatan: artikel ini adalah tentang membangun aplikasi satu halaman Vue.js di atas aplikasi Laravel yang dibuat dalam artikel ini. Sebelum membaca ini, pastikan Anda telah membaca artikel sebelumnya tentang membangun aplikasi dengan Laravel karena kami akan menggunakan kode yang ada.

Apa itu Vue.js?

Vue.js adalah kerangka kerja ujung depan JavaScript, sebanding dengan kerangka kerja serupa seperti React dan awalnya berasal dari AngularJS. Dibandingkan dengan kerangka kerja lain, kerangka ini dirancang untuk menjadi agak lebih ringan, sehingga Anda dapat menggunakannya hanya sebagai lapisan presentasi jika diinginkan - tetapi dapatkah Anda juga menskalakannya secara besar-besaran dengan manajemen status penuh atau menggunakan kerangka kerja di atas Vue seperti itu? sebagai Nuxt.js. Anda dapat mengetahui info lebih lanjut tentang Vue.js di sini.

Apa itu Polaris?

Polaris adalah kerangka kerja desain UI Shopify, sebanding dengan kerangka kerja UI lainnya seperti Bootstrap atau SemanticUI. Di Eastside Co, kami memiliki port pustaka Vue.js untuk UI yang konsisten di aplikasi kami.

Menyiapkan Vue.js untuk kompilasi

Vue hadir dengan Laravel di luar kotak, tetapi ada beberapa penyesuaian yang akan membuat pengembangan lebih mudah. Laravel hadir dengan Laravel Mix yang merupakan pembungkus rapi di sekitar Webpack. Webpack mengkompilasi semua aset frontend Anda ke apa yang ingin Anda sajikan ke browser klien - Laravel hadir dengan implementasi ini dengan banyak default yang dipanggang. Mari kita sedikit mengoptimalkan output Webpack. Buka webpack.mix.js di root proyek Anda. Ubah ke:

 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” });

Di sini kami telah memberi tahu webpack untuk file alias dalam folder resources/assets/js untuk digunakan dalam pernyataan impor, dan untuk mengenali ekstensi .vue dan .js sehingga kami tidak perlu menggunakan nama file lengkap di JavaScript. Opsi devtool juga membuat wepack menghasilkan peta sumber untuk JS yang dikompilasi untuk membantu debugging di browser lebih cepat.

Kami sekarang dapat menjalankan npm untuk menginstal dependensi front end kami, dan menjalankan server untuk melihat perubahan pada file JavaScript kami. Buka terminal dan ketik:

 Npm install Npm run dev

Sekarang, kita perlu menghubungkan rute Laravel dasar kita ke aplikasi Vue kita.

Menyiapkan Vue.js di Laravel

Kita perlu sedikit tweaking untuk mendapatkan scaffolding yang layak dari Laravel ke Vue. Hal pertama yang perlu kita lakukan adalah mengimpor Vue ke dalam template Twig dasar, lalu membuat titik masuk untuk aplikasi kita.

Agar kita tidak bingung, mari kita buat rute baru, metode pengontrol, dan templat ranting.

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

Karena Vue akan menggunakan titik akhir yang kita buat di Laravel, kita telah membuang ShopifyAPI - tetapi ini akan digunakan nanti. Sekarang kita perlu menghubungkan Vue ke template Twig baru kita, yang kita beri nama vueapp. Buat file berikut:

 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>

Token CSRF penting - Laravel memberikan token ke Vue untuk mencegah pemalsuan permintaan lintas situs. Ada beberapa hal lain yang terjadi di sini - pertama, <div id=”app”> adalah tag div tempat kita mengikat Vue, dan <app-entry> adalah komponen Vue khusus yang belum kita buat, jadi kami akan segera membangunnya.

Membangun Perancah Vue

Selanjutnya, kita perlu membangun titik masuk aplikasi untuk aplikasi kita. Kami memperlakukannya seperti sebuah komponen, tetapi meletakkannya di luar folder komponen yang dipanggang karena ini adalah titik masuk ujung depan untuk sisa Vue. Buat file baru:

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

Jadi, bagian terakhir adalah mendaftarkan komponen <app-entry> di bootloader Vue. Menuju ke

sumber daya/js/app.js

Ada banyak komentar di sini dari kode boilerplate Laravel - hapus semua kode dan ganti dengan yang berikut:

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

Jadi, komponen entri kami telah dimuat, dan Vue telah di-boot, terikat ke aplikasi div id. Muat rute di browser Anda:

http://localhost:8000/vueapp

Dan kita dapat melihat dengan browser devtools terbuka bahwa vue diinisialisasi. Kami siap!

Membuat titik akhir API

Sekarang kita memiliki titik masuk, kita akan membuat komponen baru yang akan menampilkan daftar produk. Sebelum kita dapat membuat komponen frontend, kita perlu membuat titik akhir API yang secara efektif akan menjadi proxy dari API Shopify.

Laravel hadir dengan root dasar /api/ yang dikonfigurasi secara otomatis untuk panggilan API, dengan logika terpisah dari rute HTTP. Tambahkan baris berikut:

 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; }

Arahkan ke titik akhir Anda dan Anda akan mendapatkan kembali datanya:

Itu saja untuk titik akhir API - kami tidak menggunakan otorisasi apa pun karena ini adalah panduan dasar, tetapi Anda dapat melihat https://laravel.com/docs/5.7/authentication untuk info lebih lanjut tentang implementasi auth khusus termasuk dasar, pembawa token dan oAuth.

Membuat Komponen dan Mengambil Data API

Mari buat komponen tempat kita akan merender produk - buat file baru di direktori komponen:

 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>

Sekarang daftarkan komponen di Vue:

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

Dan jatuhkan komponen ke dalam template aplikasi kita:

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

Ada beberapa hal yang perlu dijelaskan dengan template Vue sebelum kita dapat mengambil produk dari titik akhir api dan mengulanginya. Pertama, logika di balik tag <script> - setiap komponen Vue memiliki siklus hidup yang dapat digunakan pada berbagai tahap dan memungkinkan Anda untuk memancarkan peristiwa, mengatur pengamat; apa pun yang Anda perlukan dapat dikodekan di sini.

Anda dapat mengetahui lebih lanjut tentang komponen pengkodean di sini. Kami telah memulai dengan hanya menambahkan metode data(), yang mengembalikan data yang akan Anda gunakan atau ikat ke komponen. Kami telah menamai kunci di sini apidata dan membuatnya sebagai string kosong - alasannya adalah bahwa itu akan menjadi tempat produk disimpan untuk komponen - setelah kami membuat kode dalam pengambilan setelah modul dimuat dalam siklus hidup.

Untuk mengisi data ini, kita akan menambahkan sebuah metode, menggunakan aksioma yang akan dipanggil ketika metode create() dijalankan dalam siklus hidup.

 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>

Produk sekarang akan tersedia untuk template di bawah apidata - menggunakan loop v-for Vue, kita dapat mengulangi array di template:

Rendering di Polaris

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

Muat halaman dan bingo! Berikut adalah produk kami yang diberikan:

Saat mengembangkan di Vue, ekstensi devtools Vue sangat berguna untuk debugging. Anda dapat melihat alat-alat ini di sini.

Jika kita menggunakan devtools, kita dapat melihat nilai yang telah diambil oleh objek data apidata kita (yaitu, respons API yang telah dilemparkan ke array):

Mengait di Polaris

Jadi bagian terakhir kami adalah menggunakan port Vue Polaris EastsideCo untuk merender produk kami. Kami menginstal perpustakaan Polaris melalui npm:

 Npm install @eastsideco/polaris-vue

Kemudian kami mengikatnya ke aplikasi Vue kami:

 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', });

Kami sekarang akan memiliki akses ke tag HTML kustom bernama polaris - Anda dapat melihat daftar lengkap tag porting pada halaman dokumen di http://demo.polaris-vue.eastsideco.io/

Template kami sekarang di-refactored agar terlihat seperti ini:

 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>

Ada banyak hal yang terjadi di sini, jadi mari kita uraikan -

Pembuka <div> hanyalah sebuah wadah - ini karena komponen Vue.js selalu membutuhkan elemen root. Kami kemudian mendefinisikan wadah CSS untuk halaman menggunakan <polaris-page> .

Itu sistem tata letak didefinisikan dengan cukup baik dalam dokumen yang disebutkan sebelumnya.

Namun <polaris-resource-list> merupakan komponen yang lebih kompleks - dibutuhkan prop yang diteruskan, yang dalam hal ini kita meneruskan respons ke titik akhir API yang kita buat. Daftar sumber daya kemudian memiliki slot tercakup, di mana kita membuat <polaris-resource-list-item> . Di dalam slot, Anda menentukan slot lain - "item" (anggap ini sebagai iterasi pada loop foreach sebagai penjelasan sederhana) dan kemudian seluruh ruang lingkup slot (yaitu apidata) dinamai sebagai props slot. Jadi, untuk mendapatkan akses pada saat ini ke properti iterasi saat ini, kami menggunakan props.item. Atribut ini seperti atribut-satu dan media diuraikan oleh komponen dan dirender di perpustakaan polaris. Hasilnya adalah daftar produk dasar:

Dan itu dia - daftar produk yang dicolokkan ke Vue Polaris.

Anda dapat menemukan copy pekerjaan dari kode demo ini di repo kami di https://github.com/EastsideCo/polaris-vue.

Di Eastside Co, kami memiliki tim pengembangan aplikasi, jadi jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi kami!