Construire un magasin d'alimentation à l'aide de l'interface utilisateur de Kendo et de Vue

Notre boutique de fruits en ligne est un exemple simple de la façon dont les applications peuvent être créées facilement à l'aide d'une bibliothèque comme Vue.js et les composants de Kendo UI.

Kendo UI est une bibliothèque utilisée pour développer des applications à un rythme relativement plus rapide. rythme avec précision; il fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery, Angular, React et Vue, et est livré avec de nombreux composants pour créer des graphiques, des tableaux de données et des pages glisser-déposer.

Vue.js est un cadre de développement frontal pour développer une gamme d'applications sur différentes plates-formes. En plus de son intégration simple, de sa documentation détaillée et de sa flexibilité, Vue vous permet d'étendre le langage de modèle avec vos composants. Vue fournit également des bibliothèques pour le routage et la gestion des états, et nous utiliserons cette dernière dans cet article.

Dans ce didacticiel, nous construisons un marché en utilisant Vue et Kendo UI; notre magasin présente aux utilisateurs une gamme de fruits délicieux; il permet également aux utilisateurs d'ajouter et de supprimer des articles du panier. Nous allons créer le magasin à l'aide des composants de l'interface utilisateur de Kendo et d'un serveur minimal utilisant Express pour servir les produits à l'application.

Pour suivre ce didacticiel, une compréhension de base de Vue et Node.js est nécessaire. Veuillez vous assurer que Node et npm sont installés avant de commencer.

Si vous n'avez aucune connaissance préalable de Vue, veuillez suivre la documentation officielle ici . Revenez et terminez l'article après avoir parcouru la documentation.

Nous utiliserons ces outils pour créer notre application:

Voici une démo du produit final:

Initialisation de l'application et installation des dépendances du projet

Pour commencer, nous utilisons vue-cli pour amorcer notre application. Tout d'abord, nous installerons la CLI en exécutant npm install -g @ vue / cli dans un terminal.

Pour créer un projet Vue à l'aide de la CLI, nous exécuterons la commande suivante: [19659012] vue create vue-shop

Après avoir exécuté cette commande, plutôt que de sélectionner la configuration par défaut, nous opterons pour la configuration manuelle. Nous faisons cela parce que nous voulons ajouter un préprocesseur CSS dans notre application et la gestion des états en utilisant Vuex . Suivez la capture d'écran ci-dessous:

Le reste des invites peut être configuré comme il vous convient le mieux.

Ensuite, exécutez les commandes suivantes dans le dossier racine de le projet d'installation des dépendances.

 //  installe  les dépendances requises pour construire le serveur
 npm   install  analyseur de corps express

// dépendances frontales
 npm   install  @ progress / kendo-theme-default

Démarrez le serveur de développement d'applications en exécutant npm run serve dans un terminal situé dans le dossier racine de votre projet.

Un onglet de navigateur doit s'ouvrir sur http: // localhost: 8080. La capture d'écran ci-dessous doit être similaire à ce que vous voyez dans votre navigateur:

Construction de notre serveur

Nous allons créer notre serveur en utilisant Express . Express est un framework web rapide, sans opinion et minimaliste pour Node.js .

Créez un fichier appelé server.js à la racine du projet et mettez-le à jour avec l'extrait de code ci-dessous

 const  express  =   require  ( 'express' ) ; 
 const  bodyParser  =   require  ( 'body-parser' ) ; 

 const  app  =   express  () ; [19659031] const  port  =  process .  env .  PORT  ||   4000 ; 
 const  produits  =   nécessitent  ( «./ products» ) ; 

app .  use  ( bodyParser .  json  () ) ; 
app .  use  ( bodyParser .  urlencoded  ( { extended :   false  } [19659027]) ) ; 
app .  use  ( ( req  res  next )   =>   { 
  res .  header  ( 'Access-Control-Allow-Origin'   '*' ) ; 
  res .  header  (
     'Access-Control-Allow-Headers' 
     'Origin, X-Requested-With, Content-Type, Accept' 
   ) ; 
   suivant  () ; 
} ) ; 

app .  get  ( '/ products'   ( req  res )   => [19659064] {
  res .  json  ( products ) ; 
} ) ; 

app .  écoute  ( port   ()   =>   {
  console .  log  ( `Serveur démarré sur le port  $ { port }  `  ) [19659027]; 
} ) ; 

Les appels à notre terminal proviennent d'une origine différente. Par conséquent, nous devons nous assurer que nous incluons les en-têtes CORS ( Access-Control-Allow-Origin ). Si vous n'êtes pas familier avec le concept des en-têtes CORS, vous pouvez trouver plus d'informations ici .

La configuration ci-dessus est standard pour les applications Node, rien de particulier pour notre application.

Nous créons un serveur pour fournir des données à notre application afin que nous puissions voir comment Effects peut être utilisé pour récupérer des ressources externes afin de peupler le magasin.

Créez un fichier nommé products.js contenant les produits de notre magasin. Ouvrez le fichier et remplissez-le avec le code ci-dessous:

 module .  exports  =   [
   {
     "name" :   "Apples "
    " prix ":   23,54 
    " image ":  " https://images.pexels.com/photos/39028 /apples-fruit-red-juicy-39028.jpeg?cs=srgb&dl=apples-food-fruits-39028.jpg&fm=jpg"[19659027Often[19659082Often"description"[19659027d'unepomme"
  } 
   {
    " name ":  " Lemons "
    " price ":   10.33 
     "image" :   "https://images.pexels.com/photos/1898261/pexels-photo-1898261.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w= 400 "
    " description ":  " Grandes tranches de citron "
  } 
   {
    " nom ":  " Grand plat "
    " prix ":   12.13 [19659082] "image" :   "https://images.pexels.com/photos/37316/kaki-fruit-orange-subject.jpg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400" [19659027]
     "description" :   "Repas sain servi avec un accompagnement de protéines" 
  } 
   {
     "name" :   ] "Mangues" 
     "prix" :   10.33 
     "image" :   "https://images.pexels.com/ photos / 918643 / pexels-photo-918643.jpeg? auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Un joli tableau de mangues slushy. " 
  } 
   {
     "name" :   "Berries!" 
     "price" :   10.33  , 
     "image" :   "https://images.pexels.com/photos/1334131/pexels-photo-1334131.jpeg?cs=srgb&dl=abundance-berries-close-up-1334131 .jpg & fm = jpg & auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " de scription ":  " Berry abondance "
  } 
   {
    " name ":  " Coconut drink "
    " prix ":   10.33 
    " image ":  " https://images.pexels.com/photos/1030973/pexels-photo-1030973.jpeg? cs = srgb & dl = baies-berry-chia-1030973.jpg & fm = jpg & auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Boisson rafraîchissante à la noix de coco avec des fraises 
  } 
   {
     "name" :   "Fruits" 
     "price" :   16.43 
     "image" :   "https://images.pexels.com/photos/103662/background-bitter-breakfast-bright-103662.jpeg?cs=srgb&dl=citrus-close-up- food-103662.jpg & fm = jpg & auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Une sélection de fruits révélatrice "
  } 
   {
     "nom" [19659027]:   "Bananes" 
     "price" :   16.43 
     "image" :   "https: // images .pexels.com / photos / 1093038 / pexels-photo-1093038.jpeg? auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Un tas de bananes "
  } 
   {
    " name ":  " Mangez sainement "
    " price ":   16.43 [19659027]
     "image" :   "https://images.pexels.com/photos/142520/pexels-photo-142520.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400 "
    " description ":  " Maïs, poivrons, tomates et pois "
  } 
   {
    " name ": [19659077] "Tomatoes sprite" 
     "price" :   16.43 
     "image" :   "https: //images.pexels. com / photos / 533288 / pexels-photo-533288.jpeg? auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "[1 9659027]
     "description" :   "Une tomate va avec n'importe quel plat" 
  } 
] 

Remarque: Les images proviennent de https: // pexels.com .

Démarrez le serveur en exécutant la commande suivante dans un terminal dans le dossier du projet:

 node server.js

Vue d’accueil

Pour commencer, nous allons définir les vues de l’application, à partir de la page d’accueil. La page d'accueil contient la grille des produits. Créez un fichier nommé Home.vue dans le dossier src / components . Ouvrez le fichier et mettez-le à jour à l'aide des extraits ci-dessous. Nous allons diviser les extraits de composants en trois pour le modèle le script et le style .

Tout d'abord, le modèle . Copiez le contenu suivant dans le fichier src / components / Home.vue :

 < template > 
   < div   class  = [19659027] " main "  > 
     < section   class  =  " bannières "  [19659027]> 
       < div   v-for  =  " banner in banner "   : key  =  " banner.src "  > 
         < img  : src  =  " banner.src "   : alt  =  " banner.alt "  > 
       </  div > 
     </  section > 
     < section   class  =  " product-area "  > 
      
     </  section > 
   </  div [19659027]> 
 </  modèle >  

Dans l'extrait ci-dessus, nous avons défini une zone pour les bannières et la grille de produits. La zone des bannières contient quatre images de bannières. Nous allons créer le composant de grille de produit plus loin dans le didacticiel.

Stylisation du composant Home

Ensuite, nous allons mettre en forme la page d'accueil, la zone de la bannière pour être exacte. Nous allons donner aux images une hauteur définie et donner au conteneur une largeur maximale.

Ensuite, nous allons créer la propriété de données banners avec un tableau d'images. Ouvrez le fichier home.component.ts et mettez-le à jour pour qu'il ressemble à l'extrait ci-dessous:

Puisque nous utiliserons des polices externes, nous mettrons à jour le fichier public / index.html avec une balise link :

  
    
    
    
     <link rel = "icon" href = " favicon.ico ">
    
    
  
  
    
    
 
    
  

Ensuite, nous sélectionnerons Muli comme famille de polices par défaut; nous annulerons également le remplissage par défaut et la marge sur les éléments body et html . Ouvrez le fichier App.vue et mettez à jour la zone de style avec le contenu suivant:

Ensuite, nous allons créer et rendre un composant d'en-tête dans notre application avant de commencer à travailler sur la grille de produits.

Le composant d'en-tête affiche le logo de l'application et le nombre d'articles dans le panier . Nous avons calculé la valeur cart du magasin Vuex.

Créez un fichier Header.vue dans le dossier src / components . Ouvrez le fichier et suivez le processus en trois étapes de création du composant ci-dessous:

Tout d'abord, nous allons créer la section template :

Ensuite, nous allons styliser l'en-tête dans la section style . Mettez à jour le fichier à l'aide de l'extrait ci-dessous:

Enfin, nous inclurons la section script :

 < template > 
   ...
 </  modèle >  

 < style   lang  =  " scss "    scoped > 
   ... 
  </  style >  

 < script > 
   export   par défaut   {
  nom :   "En-tête" 
  calculé :   {
     chariot  ()   {
      
    } 
  } 
} ; 
  </  script > 

App Component

Après avoir créé les composants Home et Header l'étape suivante consiste à effectuer le rendu les composants du composant racine App . Ouvrez le fichier App.vue dans le répertoire src / . Mettez à jour la section modèle pour afficher à la fois En-tête et Accueil les composants et la section script pour créer le chariot property.

Démarrez le serveur d'applications en exécutant la commande suivante: npm serve .

Ensuite, accédez à http: // localhost: 8080 sur votre navigateur, vous devriez voir quelque chose de similaire à la capture d'écran ci-dessous: [19659004]

Remarque: Assurez-vous d'utiliser vos propres images préférées ici.

Ensuite, nous allons configurer la boutique Vuex en créant l'état par défaut de l'application et la définition des actions et mutations pour l'application.

Gestion de l'état de l'application

Pour garantir les meilleures pratiques pour l'application et s'assurer que l'application adopte un flux de données unidirectionnel, nous ' Je vais utiliser la bibliothèque Vuex . Vuex est une bibliothèque de gestion d'état pour les applications Vue.js. Il sert de magasin pour tous les composants d'une application; cela garantit que l'état ne peut être muté que de manière prévisible.

La Vue-CLI génère déjà le fichier store.js pour nous, donc tout ce que nous devons faire est de définir l'état initial de notre application et de créer les mutations et actions requises pour mettre à jour correctement l'état.

Ouvrez le fichier src / store.js et mettez à jour le contenu en suivant l'extrait ci-dessous: [19659432] // src / store.js

importer Vue depuis 'vue';
importer Vuex depuis 'vuex';
Vue.use (Vuex);
exporter le nouveau Vuex.Store par défaut ({
Etat: {
éléments: [],
chariot: [],
},
mutations: {
loadSuccess (état, charge utile = []) {
state.items = [...state.items, ...payload];
},
addToCart (état, élément = {}) {
state.cart = [...state.cart, item];
},
removeFromCart (état, élément = {}) {
state.cart = [
...state.cart.filter((product) => product.name !== item.name),
];
},
},
Actions: {
loadItems ({commit}, éléments) {
commit ('loadSuccess', éléments);
},
addToCart ({commit}, élément) {
commit ('addToCart', élément);
},
removeFromCart ({commit}, élément) {
commit ('removeFromCart', élément);
},
},
});

Tout d'abord, nous devons définir l'état initial de l'application; notre application affiche une liste d'éléments et permet également aux utilisateurs d'ajouter et de supprimer des éléments du panier de sorte que le initialState de notre application comporte un tableau vide de items et un tableau vide cart .

Les actions sont généralement utilisées pour décrire des événements dans l'application lorsqu'un événement est déclenché; un événement correspondant est distribué pour gérer les événements déclenchés. Les actions sont similaires aux mutations dans Vue.js; la différence est que les actions commettent des mutations.

Dans l'extrait de code ci-dessus, nous avons créé trois actions:

• loadItems : Nous envoyons cette action lorsque nous souhaitons remplir le magasin avec des éléments du serveur.
• addToCart : L'action addToCart est envoyée pour ajouter un article au panier; elle commet une mutation de nom similaire.
• removeFromCart : Cette action prend un élément comme second argument et le supprime du panier.

Les mutations sont de pures fonctions qui font passer l'état de votre application de l'un à l'autre. Il est similaire à un événement, ce qui signifie qu'il obtient un type et un gestionnaire . La fonction handler est l'endroit où nous effectuons la transition de l'état de l'application.

Dans l'extrait de code ci-dessus, nous avons défini trois fonctions de mutation:

• loadSuccess : Dans cette méthode, nous chargeons le items avec les produits récupérés sur le serveur.
• addToCart : La méthode addToCart prend un article et l'ajoute au tableau cart . [19659437] removeFromCart : Cette méthode obtient un élément et le filtre hors du panier .

Ensuite, nous allons créer le composant pour rendre les produits et travailler également sur la fonctionnalité d'ajout au panier. Restez à l'écoute.

Affichage de la liste des produits

Créez les fichiers suivants dans le répertoire src / components : Product.vue pour afficher les fiches produits individuelles et ProductList. vue pour afficher une liste de fiches produit.

Après avoir créé ces fichiers, ouvrez le fichier Product.vue et mettez à jour avec le code ci-dessous. Commencez par la section modèle :

Ici, nous avons deux boutons pour ajouter et supprimer un article du panier. Un drapeau inCart est utilisé pour déterminer lequel des boutons afficher. Nous avons également utilisé le jeu d’icônes de Kendo UI pour définir le bouton d’icône du panier. L'interface utilisateur de Kendo a un riche ensemble d'icônes qui sont disponibles ici . Ils sont faciles à configurer et à personnaliser.

Stylisons le composant en ajoutant une section de style dans le fichier du composant:

Ensuite, nous allons ajouter la section script pour créer les variables et méthodes utilisées dans la section template .

Le composant Produit prend un seul produit d'étai ; cet objet contient des détails sur le produit que nous rendons.

La méthode addToCart prend un paramètre ( item ); nous expédions cette méthode avec un article à ajouter au panier. Après avoir expédié l'article, nous définissons la propriété inCart sur true . Cet indicateur permet d'afficher le bouton «Ajouter au panier» lorsque true et le bouton «Remove from cart» lorsque false .

Pendant ce temps, le removeFromCart method envoie un article à supprimer du panier et met à jour la propriété inCart en false .

Ensuite, nous allons rendre le composant Product dans le Composant ProductList . Ouvrez le fichier ProductList.vue et mettez à jour la section template pour rendre le Product similaire et la zone script pour écouter les événements personnalisés depuis le composant Product :

Le composant de liste de produits reçoit un tableau products du composant Home . Il parcourt ensuite le tableau products en utilisant le composant Product pour rendre chaque élément du tableau.

Après avoir effectué cette modification, l'étape suivante consiste à rendre le composant de liste de produits dans le composant Home.vue . Nous mettrons également à jour le composant Home pour récupérer les produits du serveur et le composant Header pour vous abonner au panier .

Ouvrez le Home.vue et affichez le composant de liste de produits dans l'élément avec l'attribut de classe product-area :

Tout d'abord, nous récupérons les produits en faisant une requête au serveur à l'aide de l'API Fetch dans le cycle de vie du composant monté . Après avoir récupéré les produits avec succès, nous envoyons un événement pour peupler le magasin avec les produits renvoyés par le serveur.

Nous nous sommes également abonnés à la propriété items du magasin; cela maintient notre composant synchronisé avec le magasin Vuex.

Enfin, nous mettrons à jour le composant Header pour vous abonner au tableau cart du magasin; cela met à jour l'en-tête avec le nombre d'articles dans le panier.

Après cette modification, si vous accédez à http: // localhost: 8080, vous devriez voir toutes les dernières modifications que nous avons apportées, y compris la possibilité d'ajouter et de supprimer un article du panier. Vous devriez également voir le nombre d'articles dans le panier lorsqu'un article est ajouté ou retiré du panier.

Remarque: Assurez-vous que le serveur de développement Vue fonctionne sur le port 8080 et que le serveur fonctionne sur le port 4000 .

Conclusion

Dans ce didacticiel, nous avons créé une boutique de fruits en ligne qui sert les fruits les plus frais. Nous avons utilisé Vuex pour gérer l'état de notre application. Notre boutique est un exemple simple de la façon dont les applications peuvent être créées facilement à l'aide d'une bibliothèque comme Vue.js et les composants de Kendo UI.