Démarrer avec Dashboard 2 EN

Le tableau de bord FlowFuse est disponible dans le gestionnaire de palettes Node-RED. Pour l'installer :

• Ouvrez le menu en haut à droite de Node-RED
• Cliquez sur « Gérer la palette »
• Accédez à l'onglet « Installer »
• Recherchez « node-red-dashboard »
• Installez le paquet @flowfuse/node-red-dashboard (et non node-red/node-red-dashboard).

Meteo Dashboard2 Nodered

Avant de commencer, assurez-vous d'avoir:

• Nœud-RED Instance: Vous avez besoin de Node-RED en cours d'exécution quelque part. L'option la plus facile est FlowFuse, prenez un essai gratuit et vous obtenez une instance hébergée dans le cloud prête à partir. Pas de configuration de serveur, pas de tracas de transfert de port.
• Compte OpenWeatherMap: Inscrivez-vous à openweathermap.org. Le niveau gratuit vous donne suffisamment d'appels API pour ce projet.

Tout d'abord, installez le package de tableau de bord:

• Cliquez sur le menu hamburger dans le coin supérieur droit
• Sélectionner Gérer la palette
• Allez dans l'onglet Installer
• Type @flowfuse/node-red-dashboard dans la zone de recherche
• Cliquez sur le bouton d'installation à côté

Attends que ça finisse. Vous verrez un tas de nouveaux nœuds de tableau de bord apparaître dans votre barre latérale gauche, des choses comme ui-gauge, ui-text, ui-chart. C'est comme ça que tu sais que ça a marché.

Connectez-vous à votre compte OpenWeather. Une fois que vous êtes connecté:

• Allez dans votre section de compte
• Trouver des clés API
• Copiez la clé par défaut (ou générez une nouvelle)
• Enregistrez-le dans un fichier texte ou une application de note.

Tout d'abord, nous devons nous connecter à l'API météo et nous assurer qu'elle fonctionne.

• Faites glisser un noeud injectable sur la toile
• Double-cliquez pour le configurer
• Changer Répéter de “aucun” à “intervalle”
• Réglez-le pour répéter toutes les 5 secondes (ou n'importe quel intervalle que vous préférez)
• Cochez la case Inject une fois après et réglez-la sur 0,1 seconde, cela déclenchera le flux immédiatement lorsque vous le déployez
• Cliquez sur Terminé

• Faites glisser un nœud de requête http vers la droite
• Faites glisser un nœud de débogage à droite du nœud de requête http
• Double-cliquez sur le nœud de requête http pour ouvrir ses paramètres:
• Assurez-vous que la méthode est définie sur GET
• Dans le champ URL, collez: https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric
• Remplacer YOUR_API_KEYavec la clé API réelle que vous avez copiée à partir d'OpenWeatherMap ( CLE API Fablab = a5f6703b627bb2f166637747a9d26906)
• Remplacer London avec votre ville si vous voulez
• Sélectionnez le retour comme JSON analysé.

• Cliquez sur Terminé

Le units=metric vous donne Celsius. Changez-le pour units=imperialpour Fahrenheit. Pour plus de détails sur les paramètres que vous pouvez utiliser, consultez la documentation de l'API OpenWeatherMap. Maintenant, câblez les nœuds ensemble en cliquant et en faisant glisser du côté droit du nœud d'injection vers le côté gauche du nœud de requête http, puis du nœud de requête http au nœud de débogage.

Cliquez sur le bouton Déployer en haut à droite et ouvrez le panneau de débogage sur la barre latérale droite s'il n'est pas déjà ouvert.

Vous devriez voir un objet JSON avec des données météorologiques, la température, l'humidité, la vitesse du vent, la description, et plus encore. Il s'agit des données brutes qui reviennent de l'API.

Si vous voyez une erreur 401, votre clé API peut toujours être activée. Attendez 10-15 minutes et essayez à nouveau, ou vérifiez à nouveau la clé au cas où elle serait invalide ou mal tapée

Maintenant que vous obtenez des données de l'API, vous devez extraire les valeurs spécifiques que vous souhaitez afficher. Nous utiliserons un nœud de fonction pour retirer la température, l'humidité, la description de la météo et la vitesse du vent.

• Faites glisser un nœud de fonction et ajoutez le code suivant et connectez-le au nœud de requête http:

requetemeteo.json

// Extract the data we need
const temp = msg.payload.main.temp;
const humidity = msg.payload.main.humidity;
const description = msg.payload.weather[0].description;
const windSpeed = msg.payload.wind.speed;
const city = msg.payload.name;
 
// Create separate messages for each value
return [
    { payload: city, topic: "city" },
    { payload: description, topic: "description" },
    { payload: temp, topic: "temperature" },
    { payload: humidity, topic: "humidity" },
    { payload: windSpeed, topic: "wind" },
];

• Réglez les sorties du nœud de fonction (dans l'onglet Configuration) à 5, car la fonction retournera cinq messages distincts.

• Cliquez sur Terminé