Utilisation de Vue.js pour créer un tableau de bord météo interactif avec des API

La création d'un tableau de bord avec des données API est souvent une affaire complexe. Le choix de votre pile technologique, l'intégration d'API, la sélection des graphiques appropriés et l'amélioration des styles CSS peuvent devenir délicats. Ce didacticiel est un guide étape par étape expliquant comment vous aider à créer un tableau de bord météo dans Vue.js à l’aide des données de l’API.

(Cet article est sponsorisé.) Dans ce didacticiel, vous allez créer un tableau de bord météo simple à partir de rien. Ce sera une application client qui n'est ni un exemple «Hello World», ni une taille et une complexité trop intimidantes.

L'ensemble du projet sera développé à l'aide des outils de Node.js + npm écosystème. En particulier, nous nous appuierons fortement sur les API Dark Sky pour les données, sur la Vue.js pour tous les travaux lourds et sur la FusionCharts pour la visualisation des données.

Conditions préalables

Nous espérons que vous connaissez déjà les éléments suivants:

• HTML5 et CSS3 (nous utiliserons également les fonctionnalités de base fournies par Bootstrap ;
• JavaScript (en particulier la manière d'utiliser ES6 dans la langue);
• Node.js et npm (les bases de l'environnement et de la gestion des paquets sont tout à fait correctes).

En plus de celles mentionnées ci-dessus, ce serait super si vous connaissez Vue.js ou tout autre framework JavaScript similaire.Nous ne pensons pas que vous connaissiez FusionCharts – il est si facile à utiliser que vous l'apprendrez à la volée!

Enseignements attendus

Vos principaux enseignements de ce projet seront les suivants:

1. Comment planifier ementing un bon tableau de bord
2. Comment développer des applications avec Vue.js
3. Comment créer des applications pilotées par les données
4. Comment visualiser les données avec FusionCharts

En particulier, chacune des sections vous rapproche les objectifs d'apprentissage:

1. Tableau de bord Introduction à la météo
   Ce chapitre vous donne un aperçu des différents aspects de l'entreprise.
2. Créer le projet
   Dans cette section, vous allez apprendre à créer projetez à partir de zéro à l'aide de l'outil de ligne de commande Vue
3. Personnalisation de la structure de projet par défaut
   L'échafaudage de projet par défaut que vous obtenez dans la section précédente ne suffit pas; Ici, vous apprendrez les éléments supplémentaires nécessaires pour le projet d'un point de vue structurel.
4. Acquisition et traitement des données
   Cette section est la base même du projet; tout le code critique pour l'acquisition et le traitement des données de l'API est présenté ici. Attendez-vous à consacrer un maximum de temps à cette section
5. Visualisation des données avec FusionCharts
   Une fois que toutes les données et autres éléments mobiles du projet sont stabilisés, cette section est dédiée à la visualisation des données à l'aide de FusionCharts et d'un peu de CSS.

1. Le flux de travail du tableau de bord

Avant de plonger dans la mise en œuvre, il est important que notre plan soit clair. Nous divisons notre plan en quatre aspects distincts:

Exigences

Quelles sont nos exigences pour ce projet? En d’autres termes, quelles sont les choses que nous souhaitons présenter dans notre tableau de bord météo? Gardant à l'esprit que notre public cible est probablement de simples mortels avec des goûts simples, nous aimerions leur montrer ce qui suit:

• Détails du lieu pour lequel ils veulent voir le temps, ainsi que quelques informations de base sur le temps. Comme il n’existe pas d’exigences strictes, nous verrons plus loin les détails ennuyeux. Cependant, à ce stade, il est important de noter que nous devrons fournir au public un champ de recherche afin qu'il puisse fournir des informations sur l'emplacement de son intérêt.
• Informations graphiques sur la météo de leur lieu d'intérêt, tel que:
  • Variations de température pour le jour de la requête
  • Points forts du temps actuel:
    • Vitesse et direction du vent
    • Visibilité
    • Indice UV

Note : Les données obtenues à l'aide de l'API fournissent des informations sur de nombreux autres aspects de la météo. Nous avons choisi de ne pas les utiliser toutes afin de minimiser le code.

Structure

Sur la base des exigences, nous pouvons structurer notre tableau de bord comme indiqué ci-dessous:

Données

Notre tableau de bord est aussi bon que les données que nous avons, car il n’y aura pas de jolies visualisations sans données appropriées. De nombreuses API publiques fournissent des données météorologiques. Certaines sont gratuites, d'autres non. Pour notre projet, nous allons collecter des données à partir de l'API Dark Sky . Cependant, nous ne pourrons pas interroger directement le point de terminaison de l'API à partir de l'extrémité client. Ne vous inquiétez pas, nous avons une solution de contournement qui sera révélée juste au bon moment! Une fois que nous aurons obtenu les données pour le lieu recherché, nous effectuerons quelques traitements et formatages de données – vous savez, le type de détails techniques qui nous aident à payer les factures. dans FusionCharts. Il existe très peu de bibliothèques JavaScript dans le monde aussi capables que FusionCharts. Parmi les nombreuses offres de FusionCharts, nous n'en utiliserons que quelques-unes – toutes écrites en JavaScript, mais fonctionnant de manière transparente lorsqu'elles sont intégrées à l'encapsuleur Vue pour FusionCharts .

Armés de la vue d'ensemble, se salir les mains – il est temps de concrétiser les choses! Dans la section suivante, vous créerez le projet de base Vue, sur lequel nous bâtirons davantage.

2. Création du projet

Pour créer le projet, procédez comme suit:

1. Installez Node.js + npm
   ( Si Node.js est installé sur votre ordinateur, ignorez cette étape. )
   Node.js est fourni avec npm, vous n'avez donc pas besoin d'installer npm séparément. En fonction du système d'exploitation, téléchargez et installez Node.js conformément aux instructions données ici .

   Une fois installé, vérifiez que le logiciel fonctionne correctement et quelles en sont les versions. . Pour tester cela, ouvrez la ligne de commande / terminal et exécutez les commandes suivantes:

    node --version
   npm --version
    

2. Installation des packages avec npm
   Une fois que vous avez activé npm, exécutez la commande suivante pour installer les packages de base nécessaires à notre projet:

    npm install -g vue @ 2 vue-cli @ 2
   

3. Initialisez le projet d'échafaudage avec vue-cli
   En supposant que l'étape précédente s'est bien déroulée, l'étape suivante consiste à utiliser le vue-cli – une ligne de commande outil de Vue.js, pour initialiser le projet. Pour ce faire, exécutez ce qui suit:

• Initialisez l'échafaudage avec le modèle webpack-simple.

   vue init webpack-simple vue_weather_dashboard
          

  On vous posera un tas de questions – accepter les valeurs par défaut pour tous sauf la dernière question suffira pour ce projet; répondez N pour le dernier.
          

  
  

  N'oubliez pas que même si webpack-simple est excellent pour le prototypage rapide et les applications légères comme le nôtre, il n'est pas particulièrement adapté aux applications sérieuses ou au déploiement de la production. Si vous souhaitez utiliser un autre modèle (bien que nous le déconseillions si vous êtes un débutant), ou si vous souhaitez nommer votre projet autrement, la syntaxe est la suivante:
          

   vue init [template-name] [project-name]
          

• Accédez au répertoire créé par vue-cli pour le projet.

   cd vue_weather_dashboard
          

• Installez tous les packages mentionnés dans le package package.json créé à l'aide de l'outil vue-cli pour le modèle webpack-simple .
          

   npm install
          

• Lancez le serveur de développement et voyez votre projet Vue par défaut fonctionner dans le navigateur!

   npm run dev
           

Si vous êtes nouveau dans Vue.js prenez un moment pour savourer votre dernier exploit. Vous avez créé une petite application Vue et son exécution sous localhost: 8080 ! ] Une capture d’écran du site Vue.js « />

Brève explication de la structure de projet par défaut

Il est temps de jeter un coup d'œil à la structure du répertoire vue_weather_dashboard afin de bien comprendre les bases avant de commencer à le modifier. ] La structure ressemble à ceci:

 vue_weather_dashboard
| --- LISEZMOI.md
| --- node_modules /
| | --- ...
| | --- ...
| | --- [many npm packages we installed]
| | --- ...
| | --- ...
| --- package.json
| --- package-lock.json
| --- webpack.config.js
| --- index.html
| --- src
| | --- App.vue
| | --- atouts
| | | --- logo.png
| | --- main.js

Bien qu'il soit tentant de ne pas vous familiariser avec les fichiers et les répertoires par défaut, si vous êtes nouveau dans Vue, nous vous recommandons vivement de regarder au moins le contenu de ces fichiers. Cela peut être une bonne séance d’enseignement et susciter des questions que vous devriez approfondir vous-même, en particulier les fichiers suivants:

• package.json et un simple coup d’œil sur son cousin . json
• webpack.config.js
• index.html
• src / main.js
• src / App.vue

Une brève explication de chacun des fichiers et répertoires montrés dans l’arborescence est donnée ci-dessous:

• README.md
  Aucun prix à deviner – c’est principalement pour les humains lisez et comprenez les étapes nécessaires à la création de l'échafaudage du projet .
• node_modules /
  Il s'agit du répertoire dans lequel npm télécharge les packages nécessaires au démarrage du projet. Les informations sur les packages nécessaires sont disponibles dans le fichier package.json .
• package.json
  Ce fichier est créé à l'aide de l'outil vue-cli basé sur les exigences du pack Web -simple contient des informations sur les packages npm (y compris leurs versions et d'autres détails) qui doivent être installés. Examinez de près le contenu de ce fichier – c’est là que vous devriez vous rendre et éventuellement éditer pour ajouter / supprimer les paquetages nécessaires au projet, puis lancer npm install. En savoir plus sur package.json ici .
• package-lock.json
  Ce fichier est créé par npm et est principalement destiné à la gestion d'un journal contenant des éléments téléchargés et téléchargés par npm. installé.
• webpack.config.js
  Il s’agit d’un fichier JavaScript contenant la configuration de webpack – un outil regroupant différents aspects de notre projet (code, ressources statiques, configuration, environnements, mode d’utilisation, etc.). ), et réduit avant de le servir à l'utilisateur. L’avantage est que tous les éléments sont liés automatiquement et que l’expérience utilisateur s’améliore considérablement en raison de l’amélioration des performances de l’application (les pages sont rapidement servies et chargées sur le navigateur). Comme vous le constaterez peut-être plus tard, il s’agit du fichier à inspecter lorsque quelque chose dans le système de construction ne fonctionne pas comme prévu. De plus, lorsque vous souhaitez déployer l'application, il s'agit de l'un des fichiers clés à modifier (plus d'informations ici ).
• index.html
  Ce fichier HTML sert de matrice. (ou vous pouvez dire, modèle) où les données et le code doivent être incorporés de façon dynamique (c'est ce que fait Vue principalement), puis transmis à l'utilisateur.
• src / main.js
  Ce fichier JavaScript contient un code principalement gère les dépendances de niveau supérieur / projet et définit le composant Vue le plus élevé. En bref, il orchestre le code JavaScript pour l’ensemble du projet et sert de point d’entrée à l’application. Modifiez ce fichier lorsque vous devez déclarer des dépendances à l'échelle du projet sur certains modules de noeud ou si vous souhaitez modifier quelque chose à propos du composant Vue le plus élevé du projet.
• src / App.vue
  nous parlions du «composant Vue le plus élevé», nous parlions essentiellement de ce fichier. Chaque fichier .vue du projet est un composant et les composants sont liés hiérarchiquement. Au début, nous n’avions qu’un seul fichier .vue c’est-à-dire App.vue en tant que composant unique. Mais nous allons bientôt ajouter d'autres composants à notre projet (en suivant principalement la structure du tableau de bord) et les lier conformément à notre hiérarchie souhaitée, avec App.vue étant l'ancêtre de tous. Ces fichiers .vue contiendront du code dans un format que Vue voudrait que nous écrivions. Ne vous inquiétez pas, ce sont du code JavaScript écrit qui maintient une structure qui peut nous garder sain d’esprit et organisé. Vous avez été prévenu – à la fin de ce projet, si vous êtes nouveau dans Vue, vous risquez de devenir accro au modèle & mdash; script & mdash; style façon d'organiser le code!

Maintenant que nous avons créé la base, il est temps de:

• Modifiez les modèles et modifiez un peu les fichiers de configuration afin que le projet se comporte exactement comme nous le souhaitons. 19659015] Créez de nouveaux fichiers .vue et implémentez la structure du tableau de bord avec le code Vue.

Nous les apprendrons dans la section suivante, qui va être un peu longue et qui nécessite un peu d'attention. Si vous avez besoin de caféine ou d’eau, ou si vous voulez vous libérer, le moment est venu!

3. Personnalisation de la structure de projet par défaut

Il est temps de modifier les fondements fournis par le projet échafaudé. Avant de commencer, assurez-vous que le serveur de développement fourni par webpack est en cours d'exécution. L’avantage d’exécuter ce serveur en continu est que toutes les modifications que vous apportez au code source (que vous enregistrez et actualisez la page Web) soient immédiatement répercutées sur le navigateur.

Si vous souhaitez démarrer le serveur de développement, exécutez simplement la commande suivante depuis le terminal (en supposant que votre répertoire actuel est le répertoire du projet):

 npm run dev

Dans les sections suivantes, nous allons modifier certains des fichiers existants et en ajouter de nouveaux.
Elle sera suivie de brèves explications sur le contenu de ces fichiers, de manière à vous donner une idée de ce que ces modifications sont censées faire.

Modifier les fichiers existants

index.html

Notre application est littéralement une simple l'application de page, car il n'y a qu'une seule page Web qui est affichée sur le navigateur. Nous en reparlerons plus tard, mais commençons par notre premier changement: modifier le texte dans la balise

Avec cette petite révision, le fichier HTML ressemble à ce qui suit:

Prenez un moment pour actualiser la page Web à l'adresse localhost: 8080 et voir le changement reflété dans la barre de titre de l'onglet du navigateur – il devrait indiquer «Vue Weather Dashboard». Cependant, il s’agissait simplement de vous montrer comment procéder pour apporter des modifications et vérifier s’il fonctionne. Nous avons plus de choses à faire!

Cette page HTML simple manque beaucoup de choses que nous souhaitons dans notre projet, notamment les suivantes:

• Quelques méta-informations
• Les liens au format CDN vers Bootstrap (framework CSS)
• vers feuille de style personnalisée (à ajouter dans le projet)
• Pointeurs sur l'API de géolocalisation de Google Maps à partir de la balise

Enregistrez le fichier et actualisez la page Web. Vous avez peut-être remarqué une légère secousse pendant le chargement de la page - cela est principalement dû au fait que le style de page est maintenant contrôlé par Bootstrap et que les éléments de style tels que les polices, l'espacement, etc. sont différents de ceux par défaut. plus tôt (si vous n’êtes pas sûr, revenez à la valeur par défaut et voyez la différence.)

Note : Avant de poursuivre, l'URL de l'API Google Maps contient une clé qui est une propriété de FusionCharts. Pour le moment, vous pouvez utiliser cette clé pour construire le projet, car nous ne voulons pas que vous vous perdiez dans ce type de détails infimes (qui peuvent être une source de distraction lorsque vous êtes nouveau). Cependant, nous vous incitons vivement à générer et utiliser votre propre clé d’API Google Maps une fois que vous avez progressé et que vous êtes à l’aise pour prêter attention à ces petits détails.

package.json

Au moment de la rédaction, nous avons utilisé certaines versions des packages npm pour notre projet, et nous savons avec certitude que ces éléments fonctionnent ensemble. Cependant, au moment où vous exécutez le projet, il est fort possible que les dernières versions stables des packages que npm télécharge pour vous ne soient pas les mêmes que ceux que nous utilisions, ce qui pourrait casser le code (ou faire des choses au-delà). notre contrôle). Il est donc très important d’avoir exactement le même fichier package.json qui a été utilisé pour générer ce projet, afin que notre code / explications et les résultats obtenus soient cohérents.

Le fichier package.json devrait être:

 {
 "name": "vue_weather_dashboard",
 "description": "Un projet Vue.js",
 "version": "1.0.0",
 "author": "FusionCharts",
 "licence": "MIT",
 "privé": vrai,
 "scripts": {
   "dev": "cross-env NODE_ENV = développement webpack-dev-server --open --hot",
   "build": "cross-env NODE_ENV = pack de production --progress --hide-modules"
 },
 "dépendances": {
   "axios": "^ 0.18.0",
   "babel": "^ 6.23.0",
   "babel-cli": "^ 6.26.0",
   "babel-polyfill": "^ 6.26.0",
   "fusioncharts": "^ 3.13.3",
   "moment": "^ 2.22.2",
   "moment-fuseau horaire": "^ 0.5.21",
   "vue": "^ 2.5.11",
   "vue-fusioncharts": "^ 2.0.4"
 },
 "liste de navigateurs": [
   "> 1%",
   "2 dernières versions",
   "not ie 

Nous vous encourageons à parcourir le nouveau package.json et à déterminer quelles sont les fonctions de différents objets du json. Vous préférerez peut-être modifier la valeur de l'auteur" "clé de votre nom. De plus, les paquets mentionnés dans les dépendances se révéleront au bon moment dans le code. Pour le moment, il suffit de savoir que:

• babel - les paquets associés permettent de gérer correctement le code de style ES6 par le navigateur;
• axios traite les demandes basées sur la promesse ;
• moment et moment -timezone sert à la manipulation de la date / heure;
• fusioncharts et vue-fusioncharts sont responsables du rendu des graphiques:
• vue pour des raisons évidentes.

webpack.config.js

Comme pour package.json nous vous suggérons de maintenir un webpa ck.config.js qui correspond à celui que nous avons utilisé pour construire le projet. Cependant, avant d’apporter des modifications, nous vous recommandons de comparer soigneusement le code par défaut du fichier webpack.config.js et le code fourni ci-dessous. Vous remarquerez quelques différences - google les et avoir une idée de base de ce qu'ils signifient. Comme l'explication détaillée des configurations de WebPack dépasse le cadre de cet article, vous êtes autonome à cet égard.

Le fichier personnalisé webpack.config.js est le suivant:

 var chemin = require ('path')
var webpack = require ('webpack')

module.exports = {
 entrée: ['babel-polyfill', './src/main.js'],
 sortie: {
   path: path.resolve (__ dirname, './dist'),
   publicPath: '/ dist /',
   nom du fichier: 'build.js'
 },
 module: {
   règles: [
     {
       test: /.css$/,
       use: [
         'vue-style-loader',
         'css-loader'
       ],
     }, {
       test: /.vue$/,
       loader: 'vue-loader',
       options: {
         chargeurs: {
         }
         // autres options de vue-loader allez ici
       }
     },
     {
       test: /.js$/,
       chargeur: 'babel-loader',
       exclure: / node_modules /
     },
     {
       test: /.(png|jpg|gif|svg)$/,
       loader: 'chargeur de fichiers',
       options: {
         nom: "[name]. [ext]? [hash]"
       }
     }
   ]
 },
 résoudre: {
   alias: {
     'vue $': 'vue / dist / vue.esm.js'
   },
   extensions: ['*', '.js', '.vue', '.json']
 },
 devServer: {
   historyApiFallback: true,
   noInfo: true,
   superposition: vrai,
   hôte: '0.0.0.0',
   port: 8080
 },
 performance: {
   allusions: faux
 },
 devtool: '# eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
 module.exports.devtool = '# source-map'
 // http://vue-loader.vuejs.org/fr/workflow/production.html
 module.exports.plugins = (module.exports.plugins || []). concat ([
   new webpack.DefinePlugin({
     'process.env': {
       NODE_ENV: '"production"'
     }
   }),
   new webpack.optimize.UglifyJsPlugin({
     sourceMap: true,
     compress: {
       warnings: false
     }
   }),
   new webpack.LoaderOptionsPlugin({
     minimize: true
   })
 ])
}

Avec les modifications apportées au projet webpack.config.js il est impératif d'arrêter le serveur de développement en cours d'exécution ( Ctrl + C ). et redémarrez-le avec la commande suivante exécutée à partir du répertoire du projet après avoir installé tous les packages mentionnés dans le fichier package.json :

 npm install

npm run dev

Avec cela, se termine l'épreuve consistant à peaufiner les configurations et à s'assurer que les bons packages sont en place. Cependant, cela marque également le chemin de la modification et de l'écriture de code, ce qui est un peu long mais aussi très enrichissant!

src / main.js

Ce fichier est la clé de l'orchestration de haut niveau du projet - il est voici ce que nous définissons:

• Quelles sont les dépendances de niveau supérieur (où obtenir les packages npm les plus importants nécessaires);
• Comment résoudre les dépendances, ainsi que les instructions à Vue pour l'utilisation de plugins / wrappers, le cas échéant; [19659015] Instance Vue qui gère le composant le plus important du projet: src / App.vue (fichier nodal .vue ).

Conformément à nos objectifs pour le src / main.js le code devrait être:

 // Importez les dépendances et les modules nécessaires.
importer Vue de 'vue';
importer l'application depuis './App.vue';
importer des FusionCharts à partir de 'fusioncharts';
importer des graphiques à partir de "fusioncharts / fusioncharts.charts";
importer des widgets à partir de 'fusioncharts / fusioncharts.widgets';
importer des PowerCharts à partir de 'fusioncharts / fusioncharts.powercharts';
importer FusionTheme à partir de 'fusioncharts / themes / fusioncharts.theme.fusion';
importer VueFusionCharts à partir de 'vue-fusioncharts';

// Résoudre les dépendances
Les graphiques (FusionCharts);
PowerCharts (FusionCharts);
Widgets (FusionCharts);
FusionTheme (FusionCharts);

// Enregistrer globalement les composants pour une utilisation dans l'ensemble du projet
Vue.use (VueFusionCharts, FusionCharts);

// Instancie l'instance Vue qui contrôle l'application
nouveau Vue ({
 el: '#app',
 rendre: h => h (App)
})

src / App.vue

Il s'agit de l'un des fichiers les plus importants de l'ensemble du projet. Il représente le composant le plus haut de la hiérarchie - l'ensemble de l'application elle-même. Pour notre projet, cette composante fera le gros du travail, que nous explorerons plus tard. Pour l'instant, nous voulons supprimer le passe-partout par défaut et mettre quelque chose de propre.

Si vous connaissez encore mieux la façon dont Code a organisé le code, il serait préférable de se faire une idée de la structure générale au sein du . ] .vue fichiers. Les fichiers .vue se composent de trois sections:

• Modèle
  C'est ici que le modèle HTML de la page est défini. Outre le code HTML statique, cette section contient également la méthode d’incorporation de contenu dynamique de Vue à l’aide des doubles accolades {{}} .
• Script
  Le code JavaScript qui régit cette section est la responsabilité de la génération contenu dynamique qui va et se repose dans le modèle HTML aux endroits appropriés. Cette section est principalement un objet qui est exporté et comprend:
  • Données
    Il s'agit d'une fonction elle-même, qui renvoie généralement certaines données souhaitées encapsulées dans une structure de données intéressante.
  • Méthodes
    Un objet qui consiste en une ou plusieurs fonctions / méthodes, chacune qui manipule généralement les données d’une manière ou d’une autre, et contrôle également le contenu dynamique du modèle HTML.
  • Calculée
    Tout comme l’objet méthode décrit ci-dessus avec une distinction importante: toutes les fonctions de l’objet méthode sont identiques. sont exécutées à chaque appel de l'une d'entre elles, les fonctions de l'objet calculé se comportent beaucoup plus judicieusement et s'exécutent si et seulement si cet appel a été appelé.
• Style
  Cette section concerne le style CSS qui s'applique au code HTML de la page (écrit dans un modèle) - placez le bon vieux CSS ici pour rendre vos pages superbes!

Conserver le paradigme ci-dessus l'esprit, personnalisons le code au minimum dans App.vue :

N'oubliez pas que l'extrait de code ci-dessus sert simplement à vérifier que App.vue utilise notre propre code. Il faudra ensuite beaucoup de modifications, mais enregistrez d'abord le fichier et actualisez la page sur le navigateur.

À ce stade, c’est probablement une bonne idée de demander de l’aide en outillage. Consultez la Vue devtools pour Chrome et si vous n’avez pas beaucoup de problèmes à utiliser Google Chrome comme navigateur par défaut pour le développement, installez l’outil et jouez un peu avec lui. Cela s'avérera extrêmement pratique pour le développement ultérieur et le débogage, lorsque la situation deviendra plus compliquée.

Répertoires et fichiers supplémentaires

La ​​prochaine étape consistera à ajouter des fichiers supplémentaires afin que la structure de notre projet soit complète. Nous ajouterions les répertoires et les fichiers suivants:

Note : Enregistrez les fichiers .svg avec hyperliens dans votre projet.

Créez les répertoires et les fichiers. mentionné ci-dessus. La structure finale du projet doit ressembler (rappelez-vous de supprimer les dossiers et les fichiers de la structure par défaut désormais inutiles):

 vue_weather_dashboard /
| --- LISEZMOI.md
| --- node_modules /
| | --- ...
| | --- ...
| | --- [many npm packages we installed]
| | --- ...
| | --- ...
| --- package.json
| --- package-lock.json
| --- webpack.config.js
| --- index.html
| --- src /
| | --- App.vue
| | --- css /
| | | --- style.css
| | --- actifs /
| | | --- calendar.svg
| | | --- location.svg
| | | --- location.svg
| | | --- winddirection.svg
| | | --- windspeed.svg
| | --- main.js
| | --- composants /
| | | --- Content.vue
| | | --- Highlights.vue
| | | --- TempVarChart.vue
| | | --- UVIndex.vue
| | | --- Visibility.vue
| | | --- WindStatus.vue

Il peut y avoir d'autres fichiers, tels que .babelrc .gitignore .editorconfig etc. dans le dossier racine du projet. Vous pouvez les ignorer en toute sécurité pour le moment.

Dans la section suivante, nous allons ajouter un contenu minimal aux nouveaux fichiers ajoutés et tester leur fonctionnement.

src / css / style.css [19659115] Bien que cela ne soit pas très utile immédiatement, copiez le code suivant dans le fichier:

 @import url ("https://fonts.googleapis.com/css?family=Roboto:300,400,500");

:racine {
   taille de police: 62,5%;
}

corps {
   famille de polices: Roboto;
   poids de la police: 400;
   largeur: 100%;
   marge: 0;
   taille de la police: 1.6rem;
}

#sidebar {
   position: relative;
   affichage: flex;
   direction de flexion: colonne;
   image d'arrière-plan: gradient linéaire (-180deg, # 80b6db 0%, # 7da7e2 100%);
}

#chercher {
   text-align: center;
   hauteur: 20vh;
   position: relative;
}

# location-input {
   hauteur: 42px;
   largeur: 100%;
   opacité: 1;
   bordure: 0;
   border-radius: 2px;
   couleur de fond: rgba (255, 255, 255, 0.2);
   marge supérieure: 16px;
   padding-left: 16px;
   couleur: #ffffff;
   taille de la police: 1.8rem;
   hauteur de ligne: 21px;
}

# location-input: focus {
   contour: aucun;
}

:: espace réservé {
   couleur: #FFFFFF;
   opacité: 0,6;
}

#météo actuelle {
   couleur: #ffffff;
   taille de police: 8rem;
   hauteur de ligne: 106px;
   position: relative;
}

# météo actuelle> span {
   couleur: #ffffff;
   taille de la police: 3.6rem;
   hauteur de ligne: 42px;
   alignement vertical: super;
   opacité: 0,8;
   en haut: 15px;
   position: absolue;
}

# weather-desc {
   taille de la police: 2.0rem;
   couleur: #ffffff;
   poids de la police: 500;
   hauteur de ligne: 24px;
}

#possibility {
   couleur: #ffffff;
   taille de police: 16px;
   poids de la police: 500;
   hauteur de ligne: 19px;
}

# max-detail,
# min-detail {
   couleur: #ffffff;
   taille de la police: 2.0rem;
   poids de la police: 500;
   hauteur de ligne: 24px;
}

# max-detail> i,
# min-detail> i {
   style de police: normal;
   hauteur: 13.27px;
   largeur: 16.5px;
   opacité: 0,4;
}

# max-detail> span,
# min-detail> span {
   couleur: #ffffff;
   famille de polices: Roboto;
   taille de la police: 1.2rem;
   hauteur de ligne: 10px;
   alignement vertical: super;
}

# max-summary,
# min-summary {
   opacité: 0,9;
   couleur: #ffffff;
   taille de la police: 1.4rem;
   hauteur de ligne: 16px;
   marge supérieure: 2px;
   opacité: 0,7;
}

# search-btn {
   position: absolue;
   à droite: 0;
   en haut: 16px;
   rembourrage: 2px;
   z-index: 999;
   hauteur: 42px;
   largeur: 45px;
   couleur de fond: rgba (255, 255, 255, 0.2);
   bordure: aucune;
}

# contenu du tableau de bord {
   text-align: center;
   hauteur: 100vh;
}

# date-desc,
# location-desc {
   couleur: #ffffff;
   taille de la police: 1.6rem;
   poids de la police: 500;
   hauteur de ligne: 19px;
   marge inférieure: 15 px;
}

# date-desc> img {
   en haut: -3px;
   position: relative;
   marge droite: 10px;
}

# location-desc> img {
   en haut: -3px;
   position: relative;
   marge gauche: 5px;
   marge droite: 15px;
}

# location-detail {
   opacité: 0,7;
   couleur: #ffffff;
   taille de la police: 1.4rem;
   hauteur de ligne: 20px;
   marge gauche: 35px;
}

.centered {
   position: fixe;
   en haut: 45%;
   à gauche: 50%;
   transformer: traduire (-50%, -50%);
}

.max-desc {
   largeur: 80px;
   float: gauche;
   marge droite: 28px;
}

.temp-max-min {
   marge supérieure: 40px
}

# contenu du tableau de bord {
   couleur de fond: # F7F7F7;
}

.custom-card {
   background-color: #FFFFFF! important;
   bordure: 0! important;
   margin-top: 16px! important;
   margin-bottom: 20px! important;
}

.custom-content-card {
   background-color: #FFFFFF! important;
   bordure: 0! important;
   margin-top: 16px! important;
   margin-bottom: 0px! important;
}

.header-card {
   hauteur: 50vh;
}

.content-card {
   hauteur: 43vh;
}

.card-divider {
   marge supérieure: 0;
}

.content-header {
   couleur: # 8786A4;
   taille de la police: 1.4rem;
   hauteur de ligne: 16px;
   poids de la police: 500;
   remplissage: 15px 10px 5px 15px;
}

.highlights-item {
   hauteur minimale: 37vh;
   hauteur maximale: 38vh;
   couleur de fond: #FFFFFF;
}


.card-heading {
   couleur: RGB (33, 34, 68);
   taille de la police: 1.8rem;
   poids de la police: 500;
   hauteur de ligne: 21px;
   text-align: center;
}

.card-sous-rubrique {
   couleur: # 73748C;
   taille de la police: 1.6rem;
   hauteur de ligne: 19px;
}

.card-value {
   couleur: # 000000;
   taille de la police: 1.8rem;
   hauteur de ligne: 21px;
}

span text {
   poids de la police: 500! important;
}

hr {
   rembourrage en haut: 1.5px;
   rembourrage en bas: 1px;
   marge inférieure: 0;
   marge supérieure: 0;
   hauteur de ligne: 0.5px;
}

Écran @média uniquement et (largeur minimale: 768 pixels) {
   #sidebar {
       hauteur: 100vh;
   }

   #Info {
       position: fixed;
       bottom: 50px;
       largeur: 100%;
       padding-left: 15px;
   }

   .wrapper-right {
       margin-top: 80px;
   }
}

@media only screen and (min-width:1440px) {
   #sidebar {
       width: 350px;
       max-width: 350px;
       flex: auto;
   }

   #dashboard-content {
       width: calc(100% — 350px);
       max-width: calc(100% — 350px);
       flex: auto;
   }
}

src/assets/

In this directory, download and save the .svg files mentioned below:

src/components/Content.vue

This is what we call a dumb component — a placeholder, that is there just to maintain the hierarchy, and essentially passes on data to its child components.

Remember that there is no technical bar for writing all our code in the App.vue file, but we take the approach of splitting up the code by nesting the components for two reasons:

• To write clean code, which aids readability and maintainability;
• To replicate the same structure that we will see on screen, i.e., the hierarchy.

Before we nest the component defined in Content.vue within the root component App.vuelet’s write some toy (but educational) code for Content.vue:

In the code, carefully observe and understand the following:

• Within the tag (where we obviously write some JavaScript code), we define an object that is exported (made available to other files) by default. This object contains a function data()that returns an array object called childComponentswith its elements being names of the component files that should be nested further.
• Within the tag (where we write some HTML template), the thing of interest is the
  .
  • Within the unordered list, each list item should be names of the intended child components, as defined in the array object childComponents. Moreover, the list should automatically extend till the last element of the array. Seems like we should write a for-loop, isn’t it? We do that by using the v-for directive provided by Vue.js. The v-for directive:
    • Acts as an attribute of the
    • tag, iterates through the array, renders the names of the child components where the iterator is mentioned within the {{ }} brackets (where we write the text for the list items).

• Defining and the dataFor now, we want some static data to play with — an object containing hard-coded values about different aspects of weather will just be fine! We create an object called weather_data and return it from the data() function of App.vue. The weather_data object is given in the snippet below:

weather_data: {
        location: "California",
        temperature: {
          current: "35 C",
        },
        highlights: {
          uvindex: "3",
          windstatus: {
            speed: "20 km/h",
            direction: "N-E",
          },
          visibility: "12 km",
        },
      },

• Passing the data from the parentTo pass the data, we need a destination where we want to send the data! In this case, the destination is the Content.vue component, and the way to implement it is to:

With the data defined and passed from the source (parent component), it is now the child’s responsibility to receive the data and render it appropriately, as explained in the next two steps.

• Receiving the data by the child
  The child component, in this case Content.vuemust receive the weather_data object send to it by the parent component App.vue. Vue.js provides a mechanism to do so — all you need is an array object called propsdefined in the default object exported by Content.vue. Each element of the array props is a name of the data objects it wants to receive from its parent. For now, the only data object that it is supposed to receive is weather_data from App.vue. Thus, the props array looks like:

• Rendering the data in the page
  Now that we have ensured receiving the data, the last task we need to complete is to render the data. For this example, we will directly dump the received data on the web page, just to illustrate the technique. However, in real applications (like the one we are about to build), data normally goes through lots of processing, and only the relevant parts of it are displayed in ways that suits the purpose. For example, in this project we will eventually get raw data from the weather API, clean and format it, feed the data to the data structures necessary for the charts, and then visualize it. Anyway, to display the raw data dump, we will just use the {{ }} brackets that Vue understands, as shown in the snippet below:

It’s now time to assimilate all the bits and pieces. The code for Content.vue — at its current status — is given below:

After making the changes discussed above, refresh the webpage on the browser and see how it looks. Take a moment to appreciate the complexity that Vue handles — if you modify the weather_data object in App.vueit gets silently conveyed to Content.vueand eventually to the browser displaying the webpage! Try by changing the value for the key location.

Although we have learned about props and data binding using static data, we will be using dynamic data collected using web APIs in the application, and will change the code accordingly.

Summary

Before we move on to the rest of the .vue files, let’s summarize what we have learnt while we wrote the code for App.vue and components/Content.vue:

• The App.vue file is what we call the root component — the one that sits at the top of the component hierarchy. The rest of the .vue files represents components that are its direct child, grandchild, and so on.
• The Content.vue file is a dummy component — its responsibility is to pass on the data to levels below and maintain the structural hierarchy, so that our code remains consistent with the philosophy “*what we see is what we implement*”.
• The parent-child relationship of component does not happen out of thin air — you must register a component (either globally or locally, depending on the intended usage of the component), and then nest it using custom HTML tags (whose spellings are the exact same as that of the names with which the components has been registered).
• Once registered and nested, data is passed on from parent to child components, and the flow is never reverse (bad things will happen if the project architecture allows backflow). The parent component is the relative source of the data, and it passes down relevant data to its children using the v-bind directive for the attributes of the custom HTML elements. The child receives the data intended for it using props, and then decides on its own what to do with the data.

For the rest of the components, we will not indulge in detailed explanation — we will just write the code based on the learnings from the above summary. The code will be self-evident, and if you get confused about the hierarchy, refer to the diagram below:

The diagram says that TempVarChart.vue and Highlights.vue are the direct child of Content.vue. Thus, it might be a good idea to prepare Content.vue for sending data to those components, which we do using the code below:

Once you save this code, you will get errors — don’t worry, it is expected. It will be fixed once you have the rest of the component files ready. If it bothers you not to be able to see the output, comment out the lines containing the custom element tags and .

For this section, this is the final code of Content.vue. For the rest of this section, we will reference to this codeand not the previous ones that we wrote for learning.

src/components/TempVarChart.vue

With its parent component Content.vue passing on the data, TempVarChart.vue must be set up to receive and render the data, as shown in the code below:

src/components/Highlights.vue

This component will also receive data from App.vue — its parent component. After that, it should be linked with its child components, and relevant data should be passed on to them.

Let’s first see the code for receiving data from the parent:

At this point, the web page looks like the image below:

Now we need to modify the code of Highlights.vue to register and nest its child components, followed by passing the data to children. The code for it is as follows:

Once you save the code and see the web page, you are expected to see errors in the Developer Console tool provided by the browser; they appear because although Highlights.vue is sending data, nobody is receiving them. We are yet to write the code for the children of Highlights.vue.

Observe that we have not done much of the data processing, i.e, we have not extracted the individual factors of weather data that goes under the Highlights section of the dashboard. We could have done that in the data() function, but we preferred to keep Highlights.vue a dumb component that just passes on the entire data dump it receives to each of the children, who then own their own extracts what is necessary for them. However, we encourage you to try out extracting data in the Highlights.vueand send relevant data down to each child component — it’s a good practice exercise nonetheless!

src/components/UVIndex.vue

The code for this component receives the data dump of highlights from Highlights.vueextracts the data for UV Index, and renders it on the page.

src/components/Visibility.vue

The code for this component receives the data dump of highlights from Highlights.vueextracts the data for Visibility, and renders it on the page.

src/components/WindStatus.vue

The code for this component receives the data dump of highlights from Highlights.vueextracts the data for Wind Status (speed and direction), and renders it on the page.

After adding the code for all the components, take a look at the web page on the browser.

Not to dishearten, but all these toiling was just to link the components in hierarchy, and test out whether data flow is happening between them or not! In the next section, we will throw away most of the code we have written so farand add a lot more pertaining to the actual project. However, we will certainly retain the structure and nesting of the components; the learnings from this section will allow us to build a decent dashboard with Vue.js.

4. Data Acquisition And Processing

Remember the weather_data object in App.vue? It had some hard-coded data that we used to test whether all the components are working correctly, and also to help you learn some basic aspects of Vue application without getting bogged down in the details of real-world data. However, it’s now time that we shed our shell, and step out into the real world, where data from the API will dominate most of our code.

Preparing Child Components To Receive And Process Real Data

In this section, you will get code dump for all the components except App.vue. The code will handle receiving real data from App.vue (unlike the code we wrote in the previous section to receive and render dummy data).

We strongly encourage to read the code of each component carefully, so that you form an idea of what data each of those components are expecting, and will eventually use in visualization.

Some of the code, and the overall structure, will be similar to the ones you have seen in the previous structure — so you will not face something drastically different. However, the devil is in the details! So examine the code carefully, and when you have understood them reasonably well, copy the code to the respective component files in your project.

Note: All the components in this section are in the src/components/ directory. So each time, the path will not be mentioned — only the .vue file name will be mentioned to identify the component.

Content.vue

The following changes have been made from the previous code:

• In the text and data within {{ }} has been removed, since we are now just receiving data and passing down to the children, with no rendering specific this component.
• In the export default {}:
  • The props have been changed to match the data objects that will be send by the parent: App.vue. The reason for changing the props is that App.vue itself will display some of the data it acquires from the weather API and other online resources, based on the search query of the user, and pass on the rest of the data. In the dummy code we wrote earlier, App.vue was passing on the entire dummy data dump, without any discrimination, and the props of Content.vue was set up accordingly.
  • The data() function now returns nothing, as we are not doing any data manipulation in this component.

TempVarChart.vue

This component is supposed to receive detailed temperature projections for the rest of the current day, and eventually display them using FusionCharts. But for the time being, we will display them only as text on the webpage.

Highlights.vue

The changes made from the previous code are:

• In the the text and the data within {{ }} has been removed, because this is a dumb component, just like Content.vuewhose only job is to pass on the data to children while maintaining the structural hierarchy. Remember that dumb components like Highlights.vue and Content.vue exists to maintain the parity between the visual structure of the dashboard, and the code we write.

UVIndex.vue

The changes made to the previous code are as follows:

• In the and
the div id has been changed to uvIndexwhich is more readable.
• In the export default {}the data() function now returns a string object uvIndexwhose value is extracted from the highlights object received by the component using props. This uvIndex is now temporarily used to display the value as text within the . Later on, we will plug in this value to the data structure suitable for rendering a chart.

Visibility.vue

The only change made in this file (with respect to its previous code) is that the definition of the visibility object returned by the data() function now contains toString() at its end, since the value received from the parent will be a floating point number, which needs to be converted into string.

WindStatus.vue

The changes made to the previous code are as follows:

• Throughout the file, windstatus has been renamed as windStatusto promote readability and also to be in sync with the the highlights object that App.vue provides with actual data.
• Similar naming changes have been made for the speed and direction — the new ones are windSpeed and windDirection.
• A new object derivedWindDirection has come into play (also provided by App.vue in the highlights bundle).

For now, the received data is rendered as text; later, it will be plugged in to the data structure necessary for visualization.

Testing With Dummy Data

Resorting to dummy data repeatedly might be a bit frustrating for you, but there are some good reasons behind it:

• We have made a lot of changes to the code of each component, and it’s a good idea to test whether those changes are breaking the code. In other words, we should check that whether the data flow is intact, now that we are about to move to more complex parts of the project.
• The real data from the online weather API will need lot of massaging, and it might be overwhelming for you to juggle between the code for data acquisition and processing, and the code for smooth data flow down the components. The idea is to keep the quantum of complexity under control, so that we have a better understanding of the errors we might face.

In this section, what we do is essentially hardcode some json data in the App.vuewhich will obviously be replaced with live data in the near future. There are a lot of similarity between the dummy json structure, and the json structure we will use for the actual data. So it also provides you a rough idea of what to expect from the real data, once we encounter it.

However, we admit that this is far from the ideal approach one might adopt while building such a project from scratch. In the real world, you will often start with the real data source, play around with it a bit to understand what can and should be done to tame it, and then think about the appropriate json data structure to capture the relevant information. We intentionally shielded you from all those dirty work, since it takes you farther from the objective — learning how to use Vue.js and FusionCharts to build a dashboard.

Let’s now jump into the new code for App.vue:

The changes made to the code with respect to its previous version are as follows:

• The name of the child component has been changed to dashboard-content, and accordingly the custom HTML element in the has been revised. Note that now we have two attributes — highlights and tempVar — instead of a single attribute that we used earlier with the custom element. Accordingly, the data associated with those attributes have also changed. What’s interesting here is that we can use the v-bind: directive, or its shorthand : (as we have done here), with multiple attributes of a custom HTML element!
• The data() function now returns the filename object (that existed earlier), along with two new objects (instead of the old weather_data): tempVar and highlights. The structure of the json is appropriate for the code we have written in the child components, so that they can extract the data pieces they need from the dumps. The structures are quite self-explanatory, and you can expect them to be quite similar when we deal with live data. However, the significant change that you will encounter is the absence of hardcoding (obvious, isn’t it) — we will leave the values blank as the default state, and write code to dynamically update them based on the values we will receive from the weather API.

You have written a lot of code in this section, without seeing the actual output. Before you proceed further, take a look at the browser (restart the server with npm run devif necessary), and bask in the glory of your achievement. The web page that you should see at this point looks like the image below:

Code For Data Acquisition And Processing

This section is going to be the meat of the project, with all the code to be written in App.vue for the following:

• Location input from the user — an input box and a call-to-action button is sufficient;
• Utility functions for various tasks; these functions will be called later in various parts of the component code;
• Getting detailed geolocation data from Google Maps API for JavaScript;
• Getting detailed weather data from the Dark Sky API;
• Formatting and processing the geolocation and weather data, which will be passed on to the child components.

The subsections that follows illustrates how we can implement the tasks laid out for us in the above points. With some exceptions, most of them will follow the sequence.

Input From The User

It’s quite obvious that the action starts when the user provides the name of the place for which the weather data needs to be displayed. For this to happen, we need to implement the following:

• An input box for entering the location;
• A submit button that tells our application that the user has entered the location and it’s time to do the rest. We will also implement the behavior when processing starts upon hitting Enter.

The code we show below will be restricted to the HTML template part of App.vue. We will just mention the name of the method associated with the click events, and define them later in the methods object of the