L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Construire un tableau de bord avec jQuery, Socket.io et Kendo UI
Dans ce tutoriel, nous allons créer une application de création de graphiques en temps réel. En utilisant notre application, les utilisateurs peuvent visualiser les données sur leur tableau de bord en temps réel sans avoir à rafraîchir leur navigateur. Nous utiliserons Socket.io et nodeJS comme serveur pour obtenir les mises à jour en temps réel et les interfaces HTML, CSS, jQuery et Kendo pour la création de l'interface utilisateur.
Real Les applications temps réel sont des programmes qui fonctionnent dans un laps de temps que l'utilisateur perçoit comme immédiat, actuel ou instantané. Sur Facebook, lorsque vous envoyez un message, le destinataire le reçoit sans avoir à actualiser son navigateur. Sur Instagram, lorsque quelqu'un aime votre photo, vous recevez immédiatement une invite sans aucune action de votre part. D'autres exemples d'applications en temps réel sont les graphiques en direct, les jeux multijoueurs, les outils de gestion de projet et de collaboration et les services de surveillance.
Dans ce didacticiel, nous allons créer une application de graphique en temps réel. En utilisant notre application, les utilisateurs peuvent visualiser les données sur leur tableau de bord en temps réel sans avoir à rafraîchir leur navigateur. Nous utiliserons Socket.io et nodeJS comme serveur pour obtenir les mises à jour en temps réel et les interfaces HTML, CSS, jQuery et Kendo pour la création de l'interface utilisateur.
Conditions préalables
Pour suivre ce didacticiel, une compréhension de base de jQuery et de Node.js est requise. Assurez-vous également d'avoir au moins la version de nœud 8+ installée sur votre ordinateur de développement avant de commencer. Des connaissances HTML / CSS sont également recommandées mais non obligatoires
Pour créer l'application requise, voici quelques outils que nous allons utiliser:
Initialisation de l'application
Lorsque vous traitez avec des données statiques ou des données qui ne sont pas régulièrement mises à jour, la création du tableau de bord avec HTML, CSS et jQuery peut constituer la meilleure solution. Toutefois, lorsque vous traitez avec des données fréquemment mises à jour, vous avez besoin de systèmes en temps réel. Nous utiliserons Socket.io pour maintenir ouverte la ligne de communication entre notre serveur et le client. Nous allons utiliser Node car nous pouvons facilement créer un serveur minimal avec Express. Nous utiliserons une configuration très minimale pour ce projet. Enfin, nous utiliserons le composant graphique de Kendo UI pour réduire la quantité de code que nous allons écrire pour en créer un personnalisé.
Créez un dossier appelé kendoUIChart et créez un fichier package.json . à l'intérieur. Maintenant, ajoutez le code suivant:
{
"name" : "Kendouichart"
"version" : "1.0.0" [100"19659013]
"description" : "Application simple construite avec node.js et socket.io"
"main" : "app.js "
" scripts ": {
" test ": " echo "Erreur: aucun test spécifié " && exit 1 " ,
"début" : "application nœud"
}
"auteur" : "Votre nom"
"licence" : "ISC"
"dépendances" : {
"express" : "^ 4.16.2"
"socket.io" : "^ 2.2.0"
}
Maintenant, lorsque vous exécutez npm Install il exécute le script et installe toutes nos dépendances. S'il a fonctionné correctement, vous devriez maintenant voir un dossier node_modules et un fichier package-lock.json . Maintenant que cela est fait, passons à l’écriture et commençons à écrire du code.
Dans le répertoire racine, créez un fichier app.js . Ce fichier sera le point d’entrée de notre application. Créez ensuite un dossier public dans lequel nous allons stocker notre fichier HTML et nos actifs statiques. À l'intérieur, créez un fichier index.html et un répertoire js puis initialisez un fichier chart.js dans le répertoire.
Notre structure de dossiers est actuellement devrait ressembler à ceci:
kendouichart /
node_modules /
public /
js /
cartes . js
index . html
app . js
paquet . json
paquet - verrou . json
Ouvrez le fichier app.js et ajoutez-y le code suivant:
const express = require ( 'express' )
const app = express ( )
app . utilisez ( express . statique ( "public" ) )
serveur = app . écoutez ( 3000 ) ;
Ici, nous avons besoin d'Express et de l'initialiser. Nous allons ensuite l'utiliser pour servir les fichiers dans notre dossier public. Maintenant, chaque fois que vous tapez npm start dans le terminal, les fichiers du dossier public deviennent sa page d’accueil. C’est tout pour notre serveur de base avec Express, allons maintenant créer notre application en temps réel. Nous reverrons ce fichier lorsque nous serons prêts à ajouter des fonctionnalités temps réel.
Création du tableau de bord avec le composant graphique de l'interface Kendo UI
Ouvrez votre fichier index.html dans le dossier public et ajoutez le lignes de code suivantes:
< html >
< head >
< link rel = " feuille de style " href = " https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css " >
< link rel = " feuille de style " href = " https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css " >
< link rel = " feuille de style " href = " https://kendo.cdn.telerik.com /2019.1.220/ styles / kendo.default.min.css " >
< link rel = " feuille de style " ] href = " https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css " . > Dans notre fichier d'index, nous avons importé 3 éléments:
- La feuille de style par défaut de l'interface utilisateur de Kendo.
- La dernière version de jQuery.
- Version simplifiée de tous les composants centraux de Kendo UI.
Le principal avantage de l'approche CDN est que vos utilisateurs peuvent utiliser une version en cache apprêtée de Kendo UI Core ou de jQuery s'ils ont visité d'autres sites à l'aide du cadre.
L’utilisation de l’autre méthode d’installation présente l’avantage de pouvoir uniquement importer les composants dont vous avez besoin pour votre application, ce qui permet d’optimiser la vitesse de traitement des pages. Cependant, pour cette démonstration, nous nous en tiendrons à notre approche CDN.
Nous devons ensuite créer un div où Kendo UI placera la carte, puis initialiser la carte Kendo UI dans notre fichier js.
Ajouter les lignes suivantes de code au corps du corps de votre index.html :
< div id = " exemple " >
< div class = " démo-section k-content large " >
< div id = " carte " > </ div >
</ div >
</ div >
< script src = " /js/charts.js " > </ script [19659013]>
Ouvrez maintenant votre fichier chart.js et ajoutez les lignes de code suivantes:
function init () {
const blogComments = [ {
"blog" : "Mon blog"
"jour" : "Jour 1"
"valeur" : 3
"userColor" : "# ffd600"
} {
"blog" : "Mon blog"
"jour" : "Jour 2"
"valeur" : 7
"userColor" : [19659014] "# ffd600"
} {
"blog" : "Mon blog"
"jour" : [19659014] "Jour 3"
"valeur" : 12
"userColor" : "# ffd600"
]. 19659013] {
"blog" : "Mon blog"
"jour" : "Jour 4" [19659196] "valeur ": 15
" userColor ": " # ffd600 "
} {
" blog " ]: "Mon blog"
"jour" : "Jour 5"
"valeur" : 6 ]
"userColor" : "# ffd600"
} ] ;
function createChart () {
$ ( "# chart" ) . kendoChart ( {
source de données : {
data : blogComments
}
titre : {
align : "gauche"
text : "Commentaires par jour"
}
légende : {
visible : false
}
seriesDefaults : {
type : "colonne"
étiquettes : {
visible : true
background : "transparent"
}
}
série : [ {
champ : "valeur"
catégorieField : "jour"
colorField : "userColor"
} ]
valueAxis : {
max : 28
majorGridLines : {
visible : false
}
visible : false
}
categoryAxis : {
majorGridLines : {
visible : false
}
ligne : {
visible : false
}
}
} ) ;
}
$ ( document ). 19659013]. ready ( createChart ) ;
$ ( document ) . bind ( "kendo: skinChange" createChart ) ;
}
$ ( init ) ; 19659060] Dans ce fichier, nous créons une fonction appelée init puis nous définissons un tableau pour contenir les données à afficher dans le graphique. Enfin, nous appelons la fonction kendoChart et la passons à notre source de données, après quoi nous l'initialisons.
Lancez maintenant votre application en tapant npm start sur votre terminal. Visitez http: // localhost: 3000 dans votre navigateur et vous devriez voir ceci:
Passer au temps réel avec Socket.io
Nous disposons actuellement d'une application opérationnelle. Ensuite, nous devons le faire en temps réel en utilisant Socket.io . Nous avons déjà installé Socket.io comme l’une de nos dépendances de noeuds. Il ne nous reste donc qu’à l’initialiser dans notre app.js et à écrire certaines fonctions. Ouvrez votre fichier app.js et ajoutez-y le code suivant:
const blogComments = [ {
"blog" : "Mon blog"
"jour" : "Jour 1"
"valeur" : 3
"userColor" : "# ffd600"
} {
"blog" : "Mon blog"
"jour" : "Jour 2" ,
"valeur" : 7
"userColor" : "# ffd600"
} {[19659196] "blog" : "Mon blog"
"jour" : "Jour 3"
"valeur" : 12
"userColor" : "# ffd600"
} {
"blog" : "Mon blog"
"jour" : "Jour 4"
"valeur" : 15
. "userColor" [19659013]: "# ffd600"
} {
"blog" : "Mon blog"
"jour" ]: "Jour 5"
"valeur" : 6
"userColor" : "# ffd600"
]} ] ;
fonction échange ( arr ) {
retour [ arr [1965 0 ] arr [ 1 ] arr [ 2 ] [] ] arr [ 3 ] arr [ 4 ] ] = 3 ] - = arr [ 4 ] arr [ 3 ] ar [ ] 2 ] arr [ 1 ] arr [ 0 ] [19659013]] ;
}
const io = require ( "socket.io" ) ( serveur )
io . sur ( 'connection' fonction ( prise ) {
setInterval ( function () {
var data = échange ( blogComments )
socket . diffusion . emit ( 'updateChart' données ) ;
} , 4000 ) ;
} ) ;
Dans notre app.js nous déclarons notre tableau de commentaires de blog. Nous créons ensuite une fonction simple swap pour échanger le contenu du tableau. Nous faisons cela pour simuler un changement de données. Après cela, nous importons la bibliothèque server.io . Nous écoutons chaque connexion et appelons la méthode setInterval toutes les quatre secondes pour échanger les commentaires du blog et émettre les données à nos clients (navigateurs).
Pour visualiser ce changement, nous devons mettre à jour notre . ] index.html et fichiers charts.js .
Ouvrez votre fichier index.html et ajoutez ce code avant la fermeture de la balise body:
< script src = " /socket.io/socket.io.js " > </ script >
< script >
let socket = io ( 'http: // localhost' ) ;
socket . sur ( 'connect' function () {} ) ;
socket . sur ( "événement" fonction ( données ) {} ) ;
prise . sur ( 'disconnect' function () {} ) ;
</ script >
Ouvrez votre fichier charts.js et mettez-le à jour en:
let socket ;
function init () {
socket = io . connectez ( "http: // localhost: 3000" ) ;
socket . sur ( 'updateChart' ( données ) => {
fonction ] createChart () {
$ ( "# chart" ) . kendoChart ( [
source de données : {
données : données
}
titre : {
align : "gauche"
text : "Commentaires par jour"
}
légende : {
visible : false
}
seriesDefaults : {
type : "colonne"
étiquettes : {
visible : true
background : "transparent"
}
}
série : [ {
champ : "valeur"
catégorieField : "jour"
colorField : "userColor"
} ]
valueAxis : {
max : 28
majorGridLines : {
visible : false
}
visible : false
}
categoryAxis : {
majorGridLines : {
visible : false
}
ligne : {
visible : false
}
}
} ) ;
}
$ ( du document ). 19659013]. ready ( createChart ) ;
$ ( document ) . bind ( "kendo: skinChange" createChart ) ;
} ) ;
}
$ ( init ) ;
Tout ce que nous faisons dans notre fichier chart.js consiste à permuter la source de données contre des données provenant du serveur.
Lancez votre application en tapant npm start dans le répertoire du projet de votre terminal. Ouvrez http: // localhost: 3000 et vous verrez la carte mise à jour en temps réel.
N / B: Tous les fichiers utilisés dans ce tutoriel. peut être trouvé ici .
Conclusion
Dans ce tutoriel, nous avons appris à utiliser jQuery, Node.js, HTML et le composant graphique de Kendo UI pour créer une application de graphique en temps réel. Cette connaissance peut vous aider à créer des applications en temps réel plus complexes. Assurez-vous de consulter les documents Socket.io et de poster des commentaires pour plus de clarté sur les parties que vous ne comprenez pas. Code heureux.
Source link