Raspberry Pi : un compteur d’abonné visuel pour les réseaux sociaux

Raspberry Pi : un compteur d’abonné visuel pour les réseaux sociaux

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.

Raspberry Pi : un compteur d’abonné vocal pour les réseaux sociaux
Cela fait quelques temps que je « bidouille » mon Raspberry Pi, et j’y ai enfin trouvé une utilité : un compteur d’abonné vocal pour les réseaux sociaux. Je vous propose donc un petit tutoriel pour sa mise en place avec NodeJS. Installer NodeJS : un jeu d’enfantIl y a quelque temps, nous vous propo…

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

Installer NodeJS : un jeu d’enfant
Il y a quelque temps, nous vous proposions de créer un bot pour Twitter [https://www.yubigeek.com/api-streaming-twitter-bot-node-js/] avec la technologie NodeJS. Aujourd’hui, nous vous proposons de découvrir en détail cette technologie émergente au fur et à mesure des articles. Attention une bonne …

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>

PM2 : un gestionnaire de processus de production pour les applications NodeJS
Vous cherchez à laisser tourner vos applications NodeJS en processus sur votre machine de production ? PM2 est la solution à ce besoin, en effet, PM2 permet de laisser tourner des tâches/instances NodeJS sur les machines Linux/Windows/Mac en processus. Installer NodeJS : un jeu d’enfantIl y a quel…

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');
var Q = require('q');
var config = require('../config');

var client = new Twitter({
    consumer_key: config.twitter.consumer_key,
    consumer_secret: config.twitter.consumer_secret,
    access_token_key: config.twitter.access_token_key,
    access_token_secret: config.twitter.access_token_secret
});

exports.get = function(callback) {
    var deferred = Q.defer();

    client.get('account/verify_credentials', {}, function (error, data, response) {
        if(!error && data && data.followers_count) {
            deferred.resolve(data.followers_count);
        } else {
            deferred.reject(error);
        }
    });

    deferred.promise.nodeify(callback);

    return deferred.promise;
};

On ajoute la ligne suivante dans notre fichier index.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) {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
    console.log('Nouvelle connexion au serveur !');

    setInterval(function () {
        twitter.get(function (error, result) {

            if (!error && result) {
                io.emit('refresh counter twitter', result);
            } else {
                console.error('Twitter:', error);
            }
        });
    }, 60000);

    socket.on('disconnect', function () {
        console.log('Déconnexion du serveur');
    });
});

http.listen(3000, function () {
    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>

<script>
    $(document).ready(function () {
        var counterTwitter = $('.counter.twitter').FlipClock(0, {
            clockFace: 'Counter',
            minimumDigits: 3
        });

        var socket = io();

        socket.on('refresh counter twitter', function (counter) {
            counterTwitter.setTime(counter);
        });
    });
</script>

Pour voir le projet en entier (avec Twitter, Facebook, et Instagram), vous pouvez vous rendre sur le Github du projet...

YubiGeek/Raspi-Social-Monitor-Visual
Contribute to YubiGeek/Raspi-Social-Monitor-Visual development by creating an account on GitHub.
Maxence Rose

Écrit par Maxence Rose

Hyperactif du Web, fondateur de YubiGeek, passionné de technologie, de sciences, et fasciné par Google, j'écris ce que bon me semble et je teste pour vous les derniers services du Web.

Vous vous êtes abonné avec succès YubiGeek
Génial ! Ensuite, passez à la caisse complète pour obtenir un accès complet à tous les contenus premium.
Nous saluons votre retour ! Vous vous êtes connecté avec succès.
Succès ! Votre compte est entièrement activé, vous avez désormais accès à tout le contenu.