Fermer

octobre 7, 2019

Construire un tableau de bord avec jQuery, Socket.io et Kendo UI10 minutes de lecture

JavaScriptT Dark_870x220


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:

 visualisation des données en temps réel 1

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 " . >    

Source link