Come creare un'app Vue.js Shopify Frontend con Polaris

Pubblicato: 2019-06-17

Nota: questo articolo riguarda la creazione di un'app Vue.js a pagina singola sopra l'app Laravel creata in questo articolo. Prima di leggere questo, assicurati di aver letto l'articolo precedente sulla creazione di un'app con Laravel poiché utilizzeremo quel codice esistente.

Cos'è Vue.js?

Vue.js è un framework front-end JavaScript, paragonabile a framework simili come React e originariamente derivato da AngularJS. Rispetto agli altri framework, è progettato per essere un po' più leggero, in modo da poterlo utilizzare solo come livello di presentazione solo se lo desideri, ma puoi anche ridimensionarlo in modo massiccio con la gestione dello stato completo o utilizzare un framework su Vue come come Nuxt.js. Puoi trovare maggiori informazioni su Vue.js qui.

Cos'è Polaris?

Polaris è il framework di progettazione dell'interfaccia utente di Shopify, paragonabile ad altri framework dell'interfaccia utente come Bootstrap o SemanticUI. In Eastside Co abbiamo un port della libreria Vue.js per un'interfaccia utente coerente nelle nostre app.

Configurazione di Vue.js per la compilazione

Vue viene fornito con Laravel pronto all'uso, ma ci sono alcune personalizzazioni che renderanno più facile lo sviluppo. Laravel viene fornito con Laravel Mix che è un involucro pulito attorno a Webpack. Webpack compila tutte le tue risorse frontend fino a ciò che desideri servire al browser del client: Laravel viene fornito con un'implementazione di questo con molte impostazioni predefinite integrate. Ottimizziamo un po' l'output di Webpack. Apri webpack.mix.js nella radice del tuo progetto. Cambialo in:

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

Qui abbiamo detto a webpack di alias file all'interno della cartella resources/assets/js da utilizzare nelle istruzioni di importazione e di riconoscere le estensioni .vue e .js in modo che non sia necessario utilizzare nomi di file completi in JavaScript. L'opzione devtool consente inoltre a wepack di generare mappe di origine per il nostro JS compilato per facilitare il debug nel browser più velocemente.

Ora possiamo eseguire npm per installare le nostre dipendenze front-end ed eseguire un server per controllare le modifiche ai nostri file JavaScript. Vai al terminale e digita:

 Npm install Npm run dev

Ora, dobbiamo collegare il nostro percorso Laravel di base alla nostra app Vue.

Configurazione di Vue.js in Laravel

Abbiamo bisogno di un piccolo ritocco per ottenere un'impalcatura decente da Laravel a Vue. Le prime cose che dobbiamo fare sono importare Vue in un modello Twig di base, quindi creare un punto di ingresso per la nostra app.

Per non confondere le cose, creiamo un nuovo percorso, metodo controller e modello di ramoscello.

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

Poiché Vue utilizzerà un endpoint che creiamo in Laravel, abbiamo abbandonato ShopifyAPI, ma questo verrà utilizzato in seguito. Ora dobbiamo connettere Vue al nostro nuovo modello Twig, che abbiamo chiamato vueapp. Crea il seguente file:

 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>

Il token CSRF è importante: Laravel passa un token a Vue per prevenire falsi di richieste tra siti. Ci sono un paio di altre cose che accadono qui: in primo luogo, <div id=”app”> è il tag div a cui stiamo vincolando Vue e <app-entry> è un componente Vue personalizzato che non abbiamo ancora creato, quindi lo costruiremo a breve.

Costruzione di impalcature Vue

Successivamente, dobbiamo creare il nostro punto di ingresso dell'app per la nostra app. Lo stiamo trattando come un componente, ma si trova fuori dalla cartella dei componenti incorporati in quanto è il punto di ingresso del front-end per il resto di Vue. Crea un nuovo file:

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

Quindi, l'ultima parte è registrare il componente <app-entry> nel bootloader Vue. Vai a

risorse/js/app.js

Ci sono molti commenti qui dal codice standard di Laravel: elimina tutto il codice e sostituiscilo con il seguente:

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

Quindi, il nostro componente di ingresso è stato caricato e Vue è stato avviato, essendo associato all'app div id. Carica il percorso nel tuo browser:

http://localhost:8000/vueapp

E possiamo vedere con il nostro browser devtools aperto che vue è inizializzato. Siamo operativi!

Creazione di un endpoint API

Ora abbiamo un punto di ingresso, creeremo un nuovo componente che visualizzerà un elenco di prodotti. Prima di poter creare il componente frontend, dovremo creare un endpoint API che sarà effettivamente un proxy dall'API di Shopify.

Laravel viene fornito con una radice di base /api/ configurata automaticamente per le chiamate API, con logica separata dai percorsi HTTP. Aggiungi la seguente riga:

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

Passa al tuo endpoint e dovresti recuperare i dati:

Questo è tutto per l'endpoint API: non stiamo utilizzando alcuna autorizzazione in quanto si tratta di una guida di base, ma puoi consultare https://laravel.com/docs/5.7/authentication per ulteriori informazioni sulle implementazioni di autenticazione personalizzate tra cui base, bearer token e oAuth.

Creazione di un componente e recupero dei dati dell'API

Creiamo il componente in cui eseguiremo il rendering dei prodotti: crea un nuovo file nella directory dei componenti:

 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>

Ora registra il componente in Vue:

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

E rilascia il componente nel nostro modello di app:

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

Ci sono alcune cose da spiegare con il modello Vue prima di poter recuperare i prodotti dall'endpoint API e passarci sopra. In primo luogo, la logica dietro il tag <script> : ogni componente Vue ha un ciclo di vita che può essere sfruttato in varie fasi e consente di emettere eventi, impostare osservatori; tutto ciò di cui avrai bisogno può essere codificato qui.

Puoi trovare maggiori informazioni sui componenti di codifica qui. Abbiamo iniziato semplicemente aggiungendo il metodo data(), che restituisce i dati che utilizzerai o legherai al componente. Abbiamo chiamato una chiave qui apidata e l'abbiamo creata come una stringa vuota - il motivo è che sarà il punto in cui i prodotti sono archiviati per i componenti - una volta che abbiamo codificato in un recupero dopo che il modulo è stato caricato nel ciclo di vita.

Per riempire questi dati, aggiungeremo un metodo, utilizzando axios che verrà chiamato quando il metodo create() viene eseguito nel ciclo di vita.

 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>

I prodotti saranno ora disponibili per il modello sotto apidata - usando il ciclo v-for di Vue, possiamo scorrere l'array nel modello:

Rendering in Polare

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

Carica la pagina e bingo! Ecco i nostri prodotti resi:

Durante lo sviluppo in Vue, l'estensione Vue devtools è estremamente utile per il debug. Puoi vedere questi strumenti qui.

Se usiamo devtools, possiamo vedere il valore che ha preso il nostro oggetto dati apidata (cioè la risposta dell'API che è stata lanciata su un array):

Aggancio in Polaris

Quindi la nostra parte finale è usare il port Vue Polaris di EastsideCo per rendere i nostri prodotti. Installiamo la libreria Polaris tramite npm:

 Npm install @eastsideco/polaris-vue

Quindi lo colleghiamo alla nostra app 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', });

Ora avremo accesso ai tag HTML personalizzati con nome polaris: puoi vedere un elenco completo dei tag trasferiti nella pagina dei documenti all'indirizzo http://demo.polaris-vue.eastsideco.io/

Il nostro modello è ora rifattorizzato per assomigliare a questo:

 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>

C'è molto da fare qui, quindi analizziamolo -

L'apertura <div> è solo un contenitore, questo perché i componenti Vue.js necessitano sempre di un elemento radice. Definiamo quindi un contenitore CSS per la pagina utilizzando <polaris-page> .

Il il sistema di layout è definito abbastanza bene nei documenti menzionati in precedenza.

Il <polaris-resource-list> tuttavia è un componente più complesso: richiede un prop passato, che in questo caso stiamo passando nella risposta all'endpoint API che abbiamo creato. L'elenco delle risorse ha quindi uno slot con ambito, in cui stiamo creando un <polaris-resource-list-item> . All'interno dello slot, definisci un altro slot - "item" (pensa a questo come un'iterazione su un ciclo foreach come una semplice spiegazione) e quindi l'intero ambito dello slot (che è apidata) viene chiamato come props dello slot. Quindi, per avere accesso a questo punto alle proprietà delle iterazioni correnti, utilizziamo props.item. Questi attributi come attributo-uno e media vengono analizzati dal componente e visualizzati nella libreria polaris. Il risultato è un elenco di prodotti di base:

Ed eccoci qui: un elenco di prodotti collegati a Vue Polaris.

Puoi trovare una copia funzionante di questo codice demo sul nostro repository all'indirizzo https://github.com/EastsideCo/polaris-vue.

In Eastside Co abbiamo un team di sviluppo di app, quindi se hai domande non esitare a metterti in contatto!