Polaris ile Vue.js Shopify Frontend Uygulaması Nasıl Oluşturulur

Yayınlanan: 2019-06-17

Not: Bu makale, bu makalede oluşturulan Laravel uygulamasının üstüne bir Vue.js tek sayfa uygulaması oluşturma hakkındadır. Bunu okumadan önce, mevcut kodu kullanacağımızdan, Laravel ile bir uygulama oluşturmaya ilişkin önceki makaleyi okuduğunuzdan emin olun.

Vue.js nedir?

Vue.js, React gibi benzer çerçevelerle karşılaştırılabilir ve orijinal olarak AngularJS'den türetilmiş bir JavaScript ön uç çerçevesidir. Diğer çerçevelerle karşılaştırıldığında, biraz daha hafif olacak şekilde tasarlanmıştır, böylece onu yalnızca isterseniz yalnızca bir sunum katmanı olarak kullanabilirsiniz - ancak tam durum yönetimi ile kitlesel olarak ölçeklendirebilir veya Vue'nun üstünde bir çerçeve kullanabilir misiniz? Nuxt.js olarak. Vue.js hakkında daha fazla bilgiyi burada bulabilirsiniz.

Polaris nedir?

Polaris, Bootstrap veya SemanticUI gibi diğer UI çerçeveleriyle karşılaştırılabilir, Shopify'ın UI tasarım çerçevesidir. Eastside Co'da, uygulamalarımızda tutarlı bir kullanıcı arayüzü için kitaplığın bir Vue.js bağlantı noktasına sahibiz.

Derleme için Vue.js kurulumu

Vue, kutudan çıktığı gibi Laravel ile birlikte gelir, ancak geliştirmeyi kolaylaştıracak bazı özelleştirmeler vardır. Laravel, Webpack çevresinde düzgün bir sarıcı olan Laravel Mix ile birlikte gelir. Webpack, tüm ön uç varlıklarınızı müşterinin tarayıcısına sunmak istediklerinize göre derler - Laravel, bunun bir çok varsayılan ayarıyla birlikte bir uygulamasıyla birlikte gelir. Webpack'in çıktısını biraz optimize edelim. Projenizin kökünde webpack.mix.js dosyasını açın. Bunu şu şekilde değiştirin:

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

Burada, JavaScript'te tam dosya adlarını kullanmamıza gerek kalmaması için web paketine, import ifadelerinde kullanılmak üzere kaynaklar/varlıklar/js klasöründeki dosyalara takma ad vermesini ve .vue ve .js uzantılarını tanımasını söyledik. Devtool seçeneği ayrıca wepack'in tarayıcıda daha hızlı hata ayıklamaya yardımcı olması için derlenmiş JS'miz için kaynak haritalar oluşturmasını sağlar.

Artık ön uç bağımlılıklarımızı kurmak için npm'yi çalıştırabilir ve JavaScript dosyalarımızdaki değişiklikleri izlemek için bir sunucu çalıştırabiliriz. Terminale gidin ve şunu yazın:

 Npm install Npm run dev

Şimdi, temel Laravel rotamızı Vue uygulamamıza bağlamamız gerekiyor.

Laravel'de Vue.js kurulumu

Laravel'den Vue'ya düzgün bir iskele elde etmek için biraz ince ayar yapmamız gerekiyor. Yapmamız gereken ilk şey, Vue'yu temel bir Twig şablonuna aktarmak, ardından uygulamamız için bir giriş noktası oluşturmak.

İşleri karıştırmamak için yeni bir route, controller method ve twig template oluşturalım.

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

Vue, Laravel'de oluşturduğumuz bir uç noktayı kullanacağı için ShopifyAPI'yi kaldırdık - ancak bu daha sonra kullanılacak. Şimdi Vue'yu vueapp olarak adlandırdığımız yeni Twig şablonumuza bağlamamız gerekiyor. Aşağıdaki dosyayı oluşturun:

 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 belirteci önemlidir - Laravel, siteler arası istek sahteciliğini önlemek için bir belirteci Vue'ye iletir. Burada olan birkaç şey daha var - ilk olarak, <div id=”app”> Vue'yu bağladığımız div etiketidir ve <app-entry> henüz oluşturmadığımız özel bir Vue bileşenidir, bu nedenle bunu birazdan kuracağız.

Vue İskele Yapısı

Ardından, uygulamamız için uygulama giriş noktamızı oluşturmamız gerekiyor. Ona bir bileşen gibi davranıyoruz, ancak Vue.js'nin geri kalanı için ön uç giriş noktası olduğu için pişmiş bileşenler klasörünün dışında oturuyoruz. Yeni bir dosya oluşturun:

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

Bu nedenle, son kısım, <app-entry> bileşenini Vue önyükleyicisine kaydettirmektir. Başlamak

kaynaklar/js/app.js

Burada Laravel ortak kodundan bir çok yorum var - tüm kodu silin ve aşağıdaki ile değiştirin:

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

Böylece, giriş bileşenimiz yüklendi ve Vue, div kimliği uygulamasına bağlı olarak önyüklendi. Rotayı tarayıcınıza yükleyin:

http://localhost:8000/vueapp

Ve tarayıcı devtools açıkken vue'nun başlatıldığını görebiliriz. Çalışıyoruz!

API uç noktası oluşturma

Şimdi bir giriş noktamız var, bir ürün listesi oluşturacak yeni bir bileşen oluşturacağız. Ön uç bileşenini oluşturabilmemiz için, Shopify'ın API'sinden etkin bir şekilde proxy olacak bir API uç noktası oluşturmamız gerekecek.

Laravel, HTTP yollarından ayrı bir mantıkla API çağrıları için otomatik olarak yapılandırılmış bir /api/ temel kök ile birlikte gelir. Aşağıdaki satırı ekleyin:

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

Uç noktanıza gidin ve verileri geri almalısınız:

API uç noktası için bu kadar - bu temel bir kılavuz olduğundan herhangi bir yetkilendirme kullanmıyoruz, ancak temel, taşıyıcı dahil olmak üzere özel kimlik doğrulama uygulamaları hakkında daha fazla bilgi için https://laravel.com/docs/5.7/authentication adresine göz atabilirsiniz. belirteçler ve oAuth.

Bir Bileşen Oluşturma ve API Verilerini Alma

Ürünleri oluşturacağımız bileşeni oluşturalım - bileşenler dizininde yeni bir dosya oluşturun:

 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>

Şimdi bileşeni Vue'ya kaydedin:

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

Ve bileşeni uygulama şablonumuza bırakın:

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

Ürünleri api uç noktasından getirip üzerlerinde dolaşmadan önce Vue şablonuyla açıklamamız gereken birkaç şey var. İlk olarak, <script> etiketinin arkasındaki mantık - her Vue bileşeninin, çeşitli aşamalarda yararlanılabilen ve olayları yaymanızı, izleyicileri ayarlamanızı sağlayan bir yaşam döngüsü vardır; ihtiyacınız olan her şey burada kodlanabilir.

Kodlama bileşenleri hakkında daha fazla bilgiyi burada bulabilirsiniz. Kullanacağınız veya bileşene bağlayacağınız verileri döndüren data() yöntemini ekleyerek başladık. Burada bir anahtarı apidata olarak adlandırdık ve onu boş bir dize olarak oluşturduk - bunun nedeni, modül yaşam döngüsüne yüklendikten sonra bir getirme işleminde kodladığımızda, ürünlerin bileşenler için depolandığı yer olacak olmasıdır.

Bu verileri doldurmak için, yaşam döngüsünde oluşturulan() yöntemi yürütüldüğünde çağrılacak olan axios'u kullanarak bir yöntem ekleyeceğiz.

 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>

Ürünler artık apidata altındaki şablonda mevcut olacak - Vue'nun v-for döngüsünü kullanarak, şablondaki diziyi yineleyebiliriz:

Polaris'te İşleme

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

Sayfayı yükle ve bingo! İşte ortaya çıkan ürünlerimiz:

Vue'da geliştirme yaparken, Vue devtools uzantısı hata ayıklama için son derece kullanışlıdır. Bu araçları burada görebilirsiniz.

Devtools kullanırsak, apidata veri nesnemizin aldığı değeri görebiliriz (yani API'nin bir diziye aktarılan yanıtı):

Polaris'te takılmak

Bu yüzden son bölümümüz, ürünlerimizi ortaya çıkarmak için EastsideCo'nun Vue Polaris portunu kullanmaktır. Polaris kütüphanesini npm ile kuruyoruz:

 Npm install @eastsideco/polaris-vue

Sonra onu Vue uygulamamıza bağlarız:

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

Artık polaris adlı özel HTML etiketlerine erişimimiz olacak - taşınan etiketlerin tam listesini http://demo.polaris-vue.eastsideco.io/ adresindeki dokümanlar sayfasında görebilirsiniz.

Şablonumuz şimdi şöyle görünecek şekilde yeniden düzenlendi:

 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>

Burada oldukça fazla şey oluyor, hadi parçalayalım -

<div> açılışı yalnızca bir kapsayıcıdır - bunun nedeni Vue.js bileşenlerinin her zaman bir kök öğeye ihtiyaç duymasıdır. Daha sonra <polaris-page> kullanarak sayfa için bir CSS kapsayıcı tanımlarız.

bu layout sistemi, daha önce bahsedilen dokümanlarda oldukça iyi tanımlanmıştır.

Ancak <polaris-resource-list> daha karmaşık bir bileşendir - geçirilen bir prop alır, bu durumda oluşturduğumuz API uç noktasına yanıtı iletiyoruz. Kaynak listesi daha sonra, içinde bir <polaris-resource-list-item> oluşturduğumuz kapsamlı bir yuvaya sahiptir. Slot içinde, başka bir slot tanımlarsınız - “item” (bunu basit bir açıklama olarak bir foreach döngüsü üzerinde bir yineleme olarak düşünün) ve sonra slotun tüm kapsamı (apidatadır) slotun props olarak adlandırılır. Dolayısıyla, bu noktada mevcut yinelemelerin özelliklerine erişmek için props.item kullanıyoruz. Öznitelik-bir ve ortam gibi bu öznitelikler, bileşen tarafından ayrıştırılır ve polaris kitaplığında işlenir. Sonuç, temel bir ürün listesidir:

Ve işte buradayız - Vue Polaris'e takılı ürünlerin bir listesi.

Bu demo kodunun çalışan bir kopyasını https://github.com/EastsideCo/polaris-vue adresindeki depomuzda bulabilirsiniz.

Eastside Co'da bir uygulama geliştirme ekibimiz var, bu nedenle herhangi bir sorunuz varsa bizimle iletişime geçmekten çekinmeyin!