Je fais suite au tutoriel sur la création d’un compteur d’abonné vocal pour les réseaux sociaux que j’ai développé sur mon Raspberry Pi dernièrement. Dans ce tutoriel, je vous propose de développer ce même compteur avec un affichage sur une page Web.

Compteur d’abonné visuel pour les réseaux sociaux

Prémices de notre projet NodeJS

Pour développer notre projet, nous aurons besoin d’installer des dépendances, pour cela, il suffit d’utiliser la commande suivante : npm install <paquet>

Liste des dépendances à installer :

  • fb : la dépendance utilisée pour l’API Facebook
  • instagram-node : la dépendance utilisée pour l’API Instagram
  • twitter : la dépendance utilisée pour l’API Twitter
  • node-schedule : un planificateur de tâches pour exécuter les actions
  • express : une dépendance pour une infrastructure Web minimaliste, souple et rapide pour NodeJS
  • http : une dépendance nécessaire avec ExpressJS
  • q : une librairie de promesse
  • socket.io : permet une communication bidirectionnelle en temps réel fondée sur des événements

Installez donc ces dépendances avec la commande suivante : npm install fb express instagram-node twitter node-schedule http q socket.io --save

Une fois installées, nous pourrons les inclure dans notre projet.

Créez un dossier dans votre répertoire de développement habituel. Puis créez votre premier fichier NodeJS que nous appellerons par exemple index.js

Ajoutez-y ces premières lignes :

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

Compteur d’abonné pour Twitter

Créez un autre dossier « providers/ » dans le répertoire de votre projet et ajoutez votre premier fichier : twitter.js

var Twitter = require('twitter'); // On inclut la librairie Twitter
var Q = require('q'); // On inclut la librairie q (promesse)
var config = require('../config'); // On inclut le fichier config.json
 
// Connexion à Twitter
var client = new Twitter({
    consumer_key: config.twitter.consumer_key, // consumer_key
    consumer_secret: config.twitter.consumer_secret, // consumer_secret
    access_token_key: config.twitter.access_token_key, // access_token_key
    access_token_secret: config.twitter.access_token_secret // access_token_secret
});
 
// Export du code avec la méthode get()
exports.get = function(callback) {
    // Création d'une promesse
    var deferred = Q.defer();
 
    // On récupère les credentials du compte Twitter
    client.get('account/verify_credentials', {}, function (error, data, response) {
        if(!error && data && data.followers_count) {
            // Résolution de la promesse, on retourne le nombre d'abonné Twitter
            deferred.resolve(data.followers_count);
        } else {
            // Erreur sur la promesse
            deferred.reject(error);
        }
    });
 
    deferred.promise.nodeify(callback);
    return deferred.promise;
};

On ajoute la ligne suivante dans notre fichierindex.js :

On ajoute à présent quelques lignes au projet afin d’accéder à une page Web avec ExpressJS. Cette page Web permettra de visualiser les compteurs d’abonné. Chaque résultat récupéré via le serveur sera renvoyé sur la page Web.

app.get('/', function(req, res){ // Ajout d'une page Web à notre projet (racine)
    res.sendFile(__dirname + '/index.html'); // On renvoie la page index.html
});

io.on('connection', function(socket) { // On détecte les connexions au serveur

    console.log('Nouvelle connexion au serveur !');

    setInterval(function () {

        twitter.get(function (error, result) { // On récupère le résultat du nombre d'abonné
            if(!error && result) {
                io.emit('refresh counter twitter', result); // On renvoie le résultat sur notre page Web avec SocketIO
            } else {
                console.error('Twitter:', error); // Oups, une erreur !
            }
        });

    }, 60000); // On boucle ces récupérations toutes les minutes

    socket.on('disconnect', function () { // On détecte les déconnexion du serveur
        console.log('Déconnexion du serveur'); // Quelqu'un s'est déconnecté
    });

});

http.listen(3000, function(){ // On héberger notre serveur Web sur le port 3000 (vous pouvez changer ce port à volonté)
    console.log('Écoute sur le port 3000');
});

Créez désormais une page HTML que nous appellerons index.html

Placez-y le code HTML nécessaire à l’utilisation d’une page Web, puis insérez ce code suivant :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

Un peu de CSS pour styliser tout ça :

h2 {
    font: normal 60px 'Roboto', sans-serif;
    text-align: center;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.counter {
    zoom: 0.5;
    -moz-transform: scale(0.5);
    display: inline-block;
    width: auto;
}

Le code HTML du compteur Twitter

<div class="centered">
    <div class="container">
        <div class="row">
            <div id="twitter" class="col-md-4 col-md-offset-4 text-center">
                <div class="jumbotron">
                    <h2><i class="fa fa-twitter fa-fw"></i> Twitter</h2>
                    <span class="counter twitter">0</span>
                </div>
            </div>
        </div>
    </div>
</div>
$(document).ready(function () {

    var counterTwitter = $('.counter.twitter').FlipClock(0, { // On instancie FlipClock() pour afficher le compteur à zéro
        clockFace: 'Counter',
        minimumDigits: 3
    });

    var socket = io(); // On instancie SocketIO

    socket.on('refresh counter twitter', function (counter) { // On détecte l'événement "refresh counter twitter"
        counterTwitter.setTime(counter); // On définie le compteur Twitter avec le nombre d'abonné récupéré par le biais du serveur
    });

});

Pour voir le projet en entier (avec Twitter, Facebook, et Instagram), vous pouvez vous rendre sur le Github du projet : github.com/yubigeek/Raspi-Social-Monitor-Visual

Raspberry Pi : un compteur d’abonné visuel pour les réseaux sociaux
Voter pour cet article
4 commentaires
  1. Bonsoir !
    L’idée est super bonne mais par contre le tuto est carrément pas complet du tout ! On voit tu fais appel à un fichier config, tu n’écris aucune ligne pour le créer, les keys pour Twitter, facebook et instagram tu en parles pas alors c’est essentiel pour recevoir nos infos…. Bref, un titre qui nous fait lire l’article mais on reste complètement sur notre faim ! J’écris ici en commentaire mais c’est valable pour les autres tutos : comment concevoir un bot, un compteur d’abonné …..

      1. Bonjour ! Alors, il y a deux solutions : ou je suis idiot, où j’ai beaucoup perdu en logique de programmation…
        Je n’arrive à rien faire du tout… Et pourtant, je m’inspire des fichiers disponible… À chaque fois, le compteur est à zéro.
        Est-ce que quelqu’un pourrait m’aider et m’expliquer comment mettre en place un tel compteur ?
        J’aimerai tant réaliser ce projet, Rien que pour une satisfaction personnelle ^^ Ça fait quelques jours que je passe mon temps libre dessus est toujours le même résultat…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscrivez vous à notre newsletter

Soyez informé des derniers articles sur YubiGeek. Saisissez votre adresse email et validez le formulaire. Un email de confirmation vous sera communiqué.

Vous devriez également aimer

Kalliope : un assistant vocal pour votre Raspberry Pi (installation)

Aujourd’hui, je vous propose de découvrir Kalliope, un assistant vocal développé par Nicolas…

Installer un serveur Web avec Nginx & PHP 7.0 sur un Raspberry Pi

Il y a quelques temps, on vous présentait le Raspberry Pi, le nano-ordinateur…

Raspberry Pi : comment concevoir un bot qui dicte la météo chaque jour ?

Cette semaine a été remplie d’article pour votre Raspberry Pi, aujourd’hui on…

Installer un serveur MySQL avec MariaDB sur un Raspberry Pi

MariaDB est un système de gestion de base de données édité sous…