Comment créer une application frontale Vue.js Shopify avec Polaris

Publié: 2019-06-17

Remarque : cet article concerne la création d'une application Vue.js à page unique au-dessus de l'application Laravel créée dans cet article. Avant de lire ceci, assurez-vous d'avoir lu l'article précédent sur la création d'une application avec Laravel, car nous utiliserons ce code existant.

Qu'est-ce que Vue.js ?

Vue.js est un framework frontal JavaScript, comparable à des frameworks similaires tels que React et dérivé à l'origine d'AngularJS. Comparé aux autres frameworks, il est conçu pour être un peu plus léger, de sorte que vous ne pouvez l'utiliser que comme couche de présentation si vous le souhaitez - mais pouvez-vous également le mettre à l'échelle massivement avec une gestion complète de l'état ou utiliser un framework au-dessus de Vue tel comme Nuxt.js. Vous pouvez trouver plus d'informations sur Vue.js ici.

Qu'est-ce que Polaris ?

Polaris est le cadre de conception d'interface utilisateur de Shopify, comparable à d'autres cadres d'interface utilisateur tels que Bootstrap ou SemanticUI. Chez Eastside Co, nous avons un port Vue.js de la bibliothèque pour une interface utilisateur cohérente dans nos applications.

Configuration de Vue.js pour la compilation

Vue est livré avec Laravel prêt à l'emploi, mais certaines personnalisations faciliteront le développement. Laravel est livré avec Laravel Mix qui est un emballage soigné autour de Webpack. Webpack compile tous vos actifs frontaux jusqu'à ce que vous voulez servir au navigateur du client - Laravel est livré avec une implémentation de cela avec beaucoup de défauts intégrés. Optimisons un peu la sortie de Webpack. Ouvrez webpack.mix.js à la racine de votre projet. Changez-le en :

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

Ici, nous avons dit à webpack d'aliaser les fichiers dans le dossier resources/assets/js pour les utiliser dans les instructions d'importation, et de reconnaître les extensions .vue et .js afin que nous n'ayons pas besoin d'utiliser des noms de fichiers complets en JavaScript. L'option devtool permet également à wepack de générer des cartes source pour notre JS compilé afin d'accélérer le débogage dans le navigateur.

Nous pouvons maintenant exécuter npm pour installer nos dépendances frontales et exécuter un serveur pour surveiller les modifications apportées à nos fichiers JavaScript. Dirigez-vous vers le terminal et tapez:

 Npm install Npm run dev

Maintenant, nous devons connecter notre route Laravel de base à notre application Vue.

Configurer Vue.js dans Laravel

Nous devons peaufiner un peu afin d'obtenir un échafaudage décent de Laravel à Vue. Les premières choses que nous devons faire sont d'importer Vue dans un modèle Twig de base, puis de créer un point d'entrée pour notre application.

Pour ne pas confondre les choses, créons une nouvelle route, une méthode de contrôleur et un modèle de brindille.

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

Comme Vue va utiliser un point de terminaison que nous créons dans Laravel, nous avons abandonné ShopifyAPI - mais cela sera utilisé plus tard. Nous devons maintenant connecter Vue à notre nouveau modèle Twig, que nous avons nommé vueapp. Créez le fichier suivant :

 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>

Le jeton CSRF est important - Laravel transmet un jeton à Vue pour empêcher les falsifications de requêtes intersites. Il y a quelques autres choses qui se passent ici - premièrement, <div id=”app”> est la balise div à laquelle nous lions Vue, et <app-entry> est un composant Vue personnalisé que nous n'avons pas encore construit, donc nous allons construire cela sous peu.

Construction d'échafaudages Vue

Ensuite, nous devons créer notre point d'entrée d'application pour notre application. Nous le traitons comme un composant, mais en le plaçant en dehors du dossier des composants intégrés, car il s'agit du point d'entrée frontal pour le reste de Vue. Créez un nouveau fichier :

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

Ainsi, la dernière partie consiste à enregistrer le composant <app-entry> dans le chargeur de démarrage Vue. Se diriger vers

ressources/js/app.js

Il y a beaucoup de commentaires ici à partir du code passe-partout de Laravel - supprimez tout le code et remplacez-le par ce qui suit :

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

Ainsi, notre composant d'entrée a été chargé et Vue a été démarré, étant lié à l'application div id. Chargez l'itinéraire dans votre navigateur :

http://localhost:8000/vueapp

Et nous pouvons voir avec notre navigateur devtools ouvert que vue est initialisé. Nous sommes opérationnels !

Création d'un point de terminaison d'API

Maintenant que nous avons un point d'entrée, nous allons créer un nouveau composant qui affichera une liste de produits. Avant de pouvoir créer le composant frontal, nous devrons créer un point de terminaison d'API qui sera effectivement un proxy de l'API de Shopify.

Laravel est livré avec une racine de base /api/ configurée automatiquement pour les appels d'API, avec une logique séparée des routes HTTP. Ajoutez la ligne suivante :

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

Accédez à votre point de terminaison et vous devriez récupérer les données :

C'est tout pour le point de terminaison de l'API - nous n'utilisons aucune autorisation car il s'agit d'un guide de base, mais vous pouvez consulter https://laravel.com/docs/5.7/authentication pour plus d'informations sur les implémentations d'authentification personnalisées, y compris basic, bearer jetons et oAuth.

Créer un composant et récupérer les données de l'API

Créons le composant dans lequel nous allons rendre les produits - créez un nouveau fichier dans le répertoire des composants :

 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>

Enregistrez maintenant le composant dans Vue :

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

Et déposez le composant dans notre modèle d'application :

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

Il y a quelques choses à expliquer avec le modèle Vue avant de pouvoir récupérer des produits à partir du point de terminaison de l'api et les parcourir en boucle. Premièrement, la logique derrière la <script> - chaque composant Vue a un cycle de vie qui peut être exploité à différentes étapes et vous permet d'émettre des événements, de définir des observateurs ; tout ce dont vous aurez besoin peut être codé ici.

Vous pouvez en savoir plus sur le codage des composants ici. Nous avons commencé par simplement ajouter la méthode data(), qui renvoie les données que vous utiliserez ou lierez au composant. Nous avons nommé une clé ici apidata et l'avons créée en tant que chaîne vide - la raison en est qu'elle sera là où les produits sont stockés pour les composants - une fois que nous avons codé dans une récupération après le chargement du module dans le cycle de vie.

Pour remplir ces données, nous allons ajouter une méthode, utilisant axios qui sera appelée lors de l'exécution de la méthode created() dans le cycle de vie.

 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>

Les produits seront désormais disponibles pour le modèle sous apidata - en utilisant la boucle v-for de Vue, nous pouvons parcourir le tableau dans le modèle :

Rendu dans Polaris

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

Chargez la page et bingo ! Voici nos produits rendus:

Lors du développement dans Vue, l'extension Vue devtools est extrêmement utile pour le débogage. Vous pouvez voir ces outils ici.

Si nous utilisons les devtools, nous pouvons voir la valeur que notre objet de données apidata a pris (c'est-à-dire la réponse de l'API qui a été convertie en tableau) :

Accrochage à Polaris

Notre dernière partie consiste donc à utiliser le port Vue Polaris d'EastsideCo pour rendre nos produits. Nous installons la bibliothèque Polaris via npm :

 Npm install @eastsideco/polaris-vue

Ensuite, nous le lions dans notre application 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', });

Nous aurons désormais accès aux balises HTML personnalisées nommées polaris - vous pouvez voir une liste complète des balises portées sur la page de documentation à l'adresse http://demo.polaris-vue.eastsideco.io/

Notre modèle est maintenant refactorisé pour ressembler à ceci :

 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>

Il se passe beaucoup de choses ici, alors décomposons-le -

L'ouverture <div> n'est qu'un conteneur - c'est parce que les composants Vue.js ont toujours besoin d'un élément racine. Nous définissons ensuite un conteneur CSS pour la page en utilisant <polaris-page> .

le Le système de mise en page est assez bien défini dans les documents mentionnés précédemment.

Le <polaris-resource-list> est cependant un composant plus complexe - il prend un prop transmis, qui dans ce cas, nous transmettons la réponse au point de terminaison API que nous avons créé. La liste de ressources a alors un slot délimité, dans lequel nous créons un <polaris-resource-list-item> . Dans le slot, vous définissez un autre slot - "item" (considérez cela comme une itération sur une boucle foreach comme une explication simple), puis toute la portée du slot (qui est apidata) est nommée comme props du slot. Donc, pour accéder à ce stade aux propriétés des itérations actuelles, nous utilisons props.item. Ces attributs tels que l'attribut un et le média sont analysés par le composant et rendus dans la bibliothèque polaris. Le résultat est une liste de produits de base :

Et nous y sommes - une liste de produits connectés à Vue Polaris.

Vous pouvez trouver une copie de travail de ce code de démonstration sur notre repo à https://github.com/EastsideCo/polaris-vue.

Chez Eastside Co, nous avons une équipe de développement d'applications, donc si vous avez des questions, n'hésitez pas à nous contacter !