Fermer

avril 16, 2018

Création d'un PWA avec Vue et Kendo UI17 minutes de lecture

Building a PWA with Kendo UI and Vue.JS


Un voyage guidé par GIF à travers la création de PWA en utilisant des composants de Kendo UI pour une vitesse maximale. Commencez avec le modèle PWA pratique de Vue CLI, recrutez des techniciens de maintenance et voyez ce que vous finirez par construire!

Les applications Web progressives (PWA) nous aident à créer des applications Web plus accessibles et attrayantes. Nous avons quelques bons articles pour vous aider à en savoir plus sur les PVA: cette série de Raymond Camden ou ou ce superbe article de Vue.js de Brandon Satrom . Aujourd'hui, nous pouvons sauter dans la création d'un PWA en utilisant le modèle PWA pratique de la Vue CLI. Nous allons d'abord créer une application en utilisant les composants de l'interface utilisateur de Kendo, ce qui nous aidera à construire rapidement une application web réactive et accessible.

Pas à pas

Le code 👩💻

Quelle est la qualité du contrôle de version? , amirite ?! Pour ce projet, vous vérifiez tout le code à ce repo . Il y aura aussi un emoji (🐙) de pieuvre pratique à la fin de chaque section qui vous reliera à un commit git montrant tous les changements de code pour cette section. Ok, c'est le temps de codage!

Il est temps de créer

La vue CLI a un grand modèle PWA pour nous aider à démarrer avec un squelette d'application PWA Vue. La première étape consiste à installer globalement la vue CLI en utilisant i pour l'installation et le drapeau -g pour le global.

npm i vue-cli -g

 a gif installer la vue cli

Avec l'outil CLI on peut l'utiliser pour créer un projet en utilisant la commande vue init . Puisque nous créons un PWA, nous transmettrons pwa pour le modèle et le nom de notre projet

 vue init  < template >   < nom du projet > 

 un gif créant un projet vue cli

Une fois le projet créé, vous verrez qu'il nous invite à changer dans le répertoire du projet et à installer les dépendances en exécutant npm install ou juste npm je pour faire court. Devinez ce que nous allons faire ensuite. Suivez les instructions bien sûr! Quel genre de rebelles pensez-vous que nous sommes?

  cd  gif-guide_pwa-kendoui-vue
 npm  je

 un gif de dépendances de npm d 'installation

Maintenant que nous avons tout ce dont nous avons besoin pour lancer le projet squelette, nous pouvons l' utiliser en utilisant npm run dev . projet en cours « />

Un projet est né 👶! Savoir que nous avons un bon projet en cours nous donnera un bon point de départ pour briser les choses, hum, je veux dire, personnaliser les choses. Ajoutons rapidement une fonctionnalité amusante en utilisant les composants de l'interface utilisateur de Kendo.

🐙 Bonjour? C'est le code 😋 Cliquez sur le pieuvre pour la première validation.

UI Components For You & Me! 📅

L'application que nous créons aujourd'hui nous donnera les premiers pas en permettant aux utilisateurs de noter les émotions qu'ils ressentent chaque jour. Pour l'instant, nous allons faire une place à l'utilisateur pour fixer une date, choisir parmi une petite liste d'emojis et voir un graphique des émotions enregistrées. Voici la liste des composants que nous utiliserons aujourd'hui:

Installation des composants

Comme pour la plupart des composants de l'interface utilisateur de Kendo, la première étape consiste à installer les bibliothèques de composants. Pour la bibliothèque Vue, nous allons également installer la bibliothèque Kendo UI. Je veux aussi du style, de l'UX et de l'accessibilité. Heureusement, tout cela (et plus encore) vient avec l'installation de l'un des thèmes UI Kendo . Pour ce projet, nous utiliserons le thème Material actuellement en bêta .

Cela peut être installé dans une commande d'installation npm :

 npm i @progress / kendo-boutons-vue-wrapper
      @ progress / kendo-charts-vue-wrapper
      @ progress / kendo-dateinputs-vue-wrapper
      @ progress / kendo-dropdowns-vue-wrapper
      @ progress / kendo-theme-material
      @ progrès / kendo-ui 

 un gif installer des composants de kendo

🐙 Moar code!

Mon principal!

Nous avons des bibliothèques! Dans le fichier main.js nous pouvons importer uniquement les composants que nous utiliserons pour ce projet dans chacune des bibliothèques installées.

 gif de main.js édite

nous utilisons tout ce que nous avons importé, y compris les installeurs de composants que nous allons passer à Vue.use () .

 gif d'utilisation et d'ajout de composants

C'est ce que le fichier complet ressemble à maintenant:

 // src / main.js

importer Vue de 'vue'
importer une application à partir de './App'
import {
  Button, ButtonsInstaller
} à partir de '@ progress / kendo-buttons-vue-wrapper'
import {
  Chart, ChartInstaller
} à partir de '@ progress / kendo-charts-vue-wrapper'
import {
  DatePicker, DateinputsInstaller
} à partir de '@ progress / kendo-dateinputs-vue-wrapper'
import {
  DropDownList, DropdownsInstaller
} depuis '@ progress / kendo-dropdowns-vue-wrapper'
import '@ progrès / kendo-theme-matériel / dist / all.css'
import '@ progress / kendo-ui'

Vue.config.productionTip = false
Vue.use (ButtonsInstaller)
Vue.use (ChartInstaller)
Vue.use (DateinputsInstaller)
Vue.use (DropdownsInstaller)

/ * eslint-disable non-nouveau * /
nouvelle Vue ({
  el: '#app',
  modèle: '',
  Composants: {
    App,
    Bouton,
    Graphique,
    Sélecteur de date,
    La liste déroulante
  }
}) 

🐙 Le main.js change de commit

Les fichiers .vue

Pour mettre réellement ces composants dans le jeu, nous devons éditer l'application .vue et fichiers Hello.vue . Avec le fichier App.vue nous allons principalement supprimer des éléments, en ajoutant quelques en-têtes et le nouveau composant que nous allons créer

 un gif d'édition du fichier

Voici ce que le App.vue ressemble à maintenant:

 // src / App.vue

%MINIFYHTMLd48bab77c6fc591988dfd7568f4e790f14%

🐙 La ​​modification du App.vue change

Template Time ⏰

Nous allons juste éditer et changer le nom du Hello.vue pour le rendre un peu plus facile. A l'intérieur, nous allons supprimer le code existant

 un gif de suppression de choses

Ensuite, nous pouvons ajouter chaque composant qui sera rendu sur la page. À l'intérieur d'un

nous appellerons l'enregistrement des émotions nous ajoutons l'endroit pour choisir une date et une émotion. Tout d'abord, sera le composant DatePicker . Voici ce que nous définissons pour le DatePicker :

  • v-model : Liaison bidirectionnelle de Vue pour garder la date à jour quand elle est changée
  • min : pour la date la plus éloignée que l'utilisateur peut choisir
  • max : la date la plus récente que l'utilisateur peut choisir
  • valeur : ce qui est placé dans la zone de texte, nous utiliserons le [v1959035] v-model pour ce format
  • : comment la date sera affichée

 un gif de l'ajout du DatePicker

Le composant suivant est la liste déroulante . Nous allons le peupler avec quelques emojis pour les utilisateurs à choisir. Les configurations que nous allons changer ici sont:

  • v-model : pour garder une trace de la valeur que l'utilisateur choisit
  • data-source : le tableau des choix que nous passerons à la liste
  • index : l'index du défaut, donc 0 serait la première chose dans notre tableau

 un gif d'ajout de la liste déroulante

Enfin, nous allons ajouter le bouton Soumettre la nouvelle émotion et faire un nouveau

pour ajouter un composant graphique pour visualiser les émotions ajoutées. Pour le bouton Kendo UI, il suffit d'ajouter un écouteur d'événement click avec @click . Lorsque cet événement est déclenché, nous voulons qu'il appelle la méthode addEmotion qui mettra à jour le compte de l'émotion choisie. Le composant graphique aura plus de configurations:

  • série-default-type : c'est le type de graphique, par ex. tarte donut etc.
  • chart-area-background : la valeur par défaut est un fond blanc, ici nous ne voulons pas d'arrière-plan donc nous le laissons vide
  • série : les données à afficher sous forme de graphique
  • info-bulle : réglage si l'infobulle est visible et quelles informations elle montre

 un gif d'ajout du bouton et du graphique

Voila, la moitié supérieure (section du modèle) du fichier du composant EmotionInput :

 // src / components / EmotionInput.vue

🐙 Lookey ici! Les composants sont ajoutés au modèle 😃

Au-delà du modèle

Nous devons maintenant donner des valeurs à toutes ces différentes configurations que nous avons faites. Quel meilleur endroit pour commencer qu'avec les données que nous transmettons à notre composant. Ici, nous retournons les variables que nous avons utilisées à l'envers comme composant émotionDate minDate maxDate emotionArray émotionSélectionné et info-bulle . Nous ajouterons également quelques variables qui seront utilisées à l'intérieur de la méthode pour incrémenter la fréquence de chaque émotion choisie: happyFeels sadFeels funnyFeels et angryFeels . Ce sont aussi ce qui est utilisé dans les données de la série pour le graphique

 un gif d'ajout de données

La méthode que nous ajoutons ici est celle assignée à l'événement click sur notre bouton. Fondamentalement, il est passé le this.emotionSelected qui est, grâce à v-model mis à jour quand un utilisateur choisit une émotion de la liste déroulante. Sur la base de quelle émotion est sélectionnée, elle incrémente le nombre de cette émotion

 un gif de l'ajout de la méthode addEmotion

Enfin, afin de toujours mettre à jour les données pour le composant chart, nous utilisons propriétés calculées . À l'intérieur calculé nous avons créé la série que nous avions assignée à la configuration de notre carte. De cette façon, lorsque addEmotion met à jour l'une des émotions, le tableau de données est également mis à jour. Cela signifie que le graphe sera mis à jour avec chaque émotion ajoutée.

 un gif d'ajout de propriétés calculées

Maintenant, la moitié inférieure, ou section de script du fichier EmotionInput.vue ressemblera à ceci :

 // src / components / EmotionInput.vue

...
%MINIFYHTMLd48bab77c6fc591988dfd7568f4e790f15%

Si vous avez toujours votre application en cours d'exécution en arrière-plan ou exécutez npm start vous pouvez voir l'application qui fonctionne.

 un gif de l'application qui fonctionne!

🐙 Le commit pour la section de script amusant que nous avons ajouté!

Vous avez l'air bien: style supplémentaire

Vraiment rapidement pour rendre notre application encore plus belle, nous allons ajouter un peu de style. Pour styliser l'application globale, nous allons d'abord ajouter un style au fichier App.vue .

 un gif de style app.vue

Ensuite, pour le style de composant spécifique, nous éditons le Fichier: EmotionInput.vue 💁.

 a gif de

Jetez un oeil aux sections style de chacun de ces fichiers:

 // src / App.vue

...

 // src / components / EmotionInput.vue

...

L'exécution de notre application avec npm start nous permettra de voir ce que nous avons maintenant!

 un gif de l'application en cours d'exécution

🐙 Stylin 'change de code .

S'impliquer dans le manifeste de l'application 💅

Le manifeste de l'application est un excellent point de départ pour les PWA car il s'agit d'un simple fichier JSON qui vous permet d'ajouter des fonctionnalités impressionnantes. Vous pouvez trouver ce fichier dans le répertoire static . Si vous regardez à l'intérieur dist / index.html après avoir construit votre projet, vous pouvez rechercher le manifeste pour voir comment il est chargé. Sur d'autres projets, vous pouvez l'ajouter simplement en le reliant comme ceci, dans le de votre document

Ce sont les valeurs que nous allons assigner dans notre manifeste:

  • nom : Ceci est décrit comme le lisible par un humain sur MDN, il peut être utilisé lorsque votre application est listée, mais le nom abrégé sera utilisé à la place si ce nom est trop long à afficher.
  • abrégé : Bien , parle du diable 😈 C'est le nom qui sera généralement affiché dans des endroits comme l'écran d'accueil d'un utilisateur où il n'y a pas assez d'espace pour le nom . PLUS, IL SUPPORTE EMOJI !! ✨👏🎊🙌
  • icônes : Les icônes sont un tableau composé d'objets image avec src tailles et type valeurs. Cela détermine quelles icônes représentent votre application sur différentes plates-formes, comme lorsqu'un utilisateur ajoute votre application à son écran d'accueil.
  • start_url : Lorsqu'un utilisateur lance votre application, il s'agit de l'URL qu'il chargera. Cette URL doit être relative à l'origine du site
  • afficher : Ce paramètre astucieux vous permet de choisir une application en plein écran en utilisant standalone || fullscreen et en supprimant le chrome du navigateur, conservez-le et réglez-le sur le navigateur OU conservez-le minimal avec minimal-ui .
  • background_color : Un peu explicite, cela définit la couleur de fond de votre application. Le principal avantage de l'utiliser est de donner à votre utilisateur une transition en douceur de l'ouverture de l'application et lorsque l'application est chargée en montrant un changement de couleur afin qu'ils sachent que quelque chose se passe
  • theme_color : La couleur du thème de l'application peut affecter la façon dont l'application est affichée en fonction du système d'exploitation. Par exemple, avec Android lorsque vous regardez l'application dans le bac de l'application, il aura cette couleur comme couleur de la bordure de l'application

 un gif d'édition pour le manifeste

Comme vous pouvez le voir dans ce GIF, il y a un beaucoup d'options d'icônes qui peuvent être ajoutées au fichier manifest.json . Habituellement, je prends juste une image et la redimensionne et l'enregistre dans le bon nom de fichier. Ici, je viens de choisir un visage pensant Emoji PNG et le redimensionner pour chaque image d'icône existante

 un gif des icônes

Maintenant que nous avons toutes les icônes et le manifeste d'application mis en place nous pouvons tête à notre application et voir les changements. Si vous ouvrez Outils de développement (ici, nous utilisons Chrome), et cliquez sur l'onglet Application, vous verrez un onglet Manifest sur la gauche. Ici vous pouvez voir où le fichier Manifest vit avec toutes les valeurs que nous avons assignées. Cela vous donne aussi un aperçu de ce à quoi ressemblent vos icônes.

 un gif de l'onglet manifeste des outils de développement

En fin de compte, le fichier manifeste de l'application ressemblera à ceci. Rappelez-vous, vous pouvez revenir en arrière et en ajouter d'autres!

De static / manifest.json :

 {
  "nom": "émotions-en-vue",
  "short_name": "😃😢🤣😡",
  "icônes": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "autonome",
  "background_color": "# E8DC36",
  "theme_color": "# 5A9CE8"
} 

🐙 Le code du manifeste d'application change

👁 Travailleur du service pour la mise en cache hors ligne

Nous avons maintenant la possibilité de faire notre application plein écran, lui donner des emojis et des icônes pour les écrans d'accueil. ? Avec Service Workers il y a beaucoup de grands progrès qui peuvent être ajoutés à votre application. Le fichier Service Worker est un script exécuté séparément de votre application en arrière-plan entre votre application et votre réseau. Pour nous lancer, la vue CLI nous permet en fait de nous confier un Service Worker qui met en cache certaines de nos ressources pour une fonctionnalité hors ligne. Jetez un coup d'oeil!

 un gif montrant le fichier de service worker

Les techniciens de service peuvent être un peu intimidants mais il est bon de se souvenir qu'ils sont juste fichiers JavaScript. Si vous regardez à travers c'est principalement en utilisant des promesses et si des déclarations pour écouter des événements. C'est aussi progressif. Si vous avez remarqué, il y a une ligne dans le fichier qui vérifie si serviceWorker est supporté.

 if ('serviceWorker' dans le navigateur ... 

Donc, si vous ajoutez un Service Worker il ne cassera pas votre application 👍 Il y a beaucoup plus de Travailleurs de Service donc je recommande fortement de lire plus comme cet excellent article sur les Travailleurs de Service de Raymond Camden ou de vérifier ce podcast Je viens de le faire avec Jake Archibald Matt Gaunt Patrick Kettner et Dan Shaw

Voyons voir Pour commencer, nous voulons construire notre application en exécutant npm run build .

 un gif shpwing npm run build

Déployer, Déployer!

Le Cela signifie que nous avons tout ce dont nous avons besoin pour déployer notre application dans le répertoire dist . n application, et aujourd'hui, nous allons utiliser le Firebase CLI . Pour l'utiliser, installez-le d'abord globalement avec npm.

 npm install -g firebase-tools 

Ensuite, à partir du répertoire de votre projet, lancez firebase init . Il vous guidera à travers quelques étapes. Tout d'abord, il suffit de cocher Hosting choisir un projet (j'en ai déjà fait un dans ma Firebase Console), puis assigner le répertoire dist car les fichiers que nous voulons héberger se trouvent à l'intérieur. Il y a plus d'options pour faire de votre application un SPA (application d'une seule page) et réécrire le index.html mais je viens de dire non à tout cela pour l'instant.

Une fois la configuration terminée vous devez faire est firebase deploy chaque fois que vous voulez redéployer votre application.

 un gif de firebase deploy

Déploiement terminé! Nous pouvons jeter un oeil à notre application hébergée. Pour voir ce qui se passe avec Service Worker, revenez à l'onglet Application dans les Outils de développement. Lorsque l'onglet Manifest était sur le côté gauche, il existe également un onglet Service Workers. En cliquant sur ce que vous pouvez voir les informations de notre Service Worker et que c'est enregistré. Par défaut, la case 'Update on reload' est cochée afin que nous soyons sûrs de garder les choses à jour. C'est un excellent endroit pour déboguer vos techniciens de service.

Pour voir la mise en cache en action, nous cliquerons sur la case à cocher hors ligne pour nous déconnecter du réseau. N'oubliez pas de vous déconnecter complètement de votre propre réseau Wi-Fi ou réseau pour voir comment votre application est réellement hors connexion. Si vous remarquez que nous rechargeons, l'image d'arrière-plan n'est plus là car nous la saisissions depuis un autre site (mes photos google) qui ne peut être atteint sans un réseau. Au-delà, tout fonctionne comme il se doit. Merci, Service Worker 😃👍

 Un gif présentant la fonctionnalité hors ligne

Il y a beaucoup de mises en garde avec la mise en cache, donc ça vaut la peine de faire des recherches avant que votre utilisateur cache tout votre site 😋. Voici quelques articles que je recommande:

🐙 Validation des nouveaux fichiers d'installation de Firebase.

Donezo! ✅

Nous utilisons une application Web progressive dans Vue 👀 !! Il y a beaucoup de mesures que nous pouvons continuer à prendre pour rendre nos applications plus PWA-y. Par exemple, nous pouvons utiliser l'API Push pour créer un technicien de service qui envoie des notifications push pour permettre à un utilisateur de consigner son émotion pour la journée. Nifty, c'est ça? Voici un tas de ressources amusantes pour vous aider à construire une application plus robuste avec plus de composants et plus de PWA-y avec plus d'info PWA:


Les commentaires sont désactivés en mode prévisualisation.
[ad_2]
Source link

0 Partages