ElectronJS : créer un compteur d’abonné sur Raspberry Pi

Il y a quelques mois, j’avais écrit un article sur la mise en place d’un compteur d’abonné de vos réseaux sociaux en jQuery avec SocketIO.

Aujourd’hui, j’ai décidé de remettre à jour cette fonctionnalité, utile si vous voulez imiter les compteurs d’abonnés Smiirl. Cette fois-ci, l’application sera développée avec ElectronJS, un « framework » pour développer des applications « desktop » multi-plateformes avec JavaScript, HTML et CSS.

Le projet est disponible sur GitHub en libre service, mais je vais détailler pas-à-pas les étapes nécessaires à la mise en place de ce compteur sur un Raspberry Pi et un écran (qu’il va falloir acheter ici).

Je n’expliquerais pas comment installer votre Raspberry Pi et l’écran Kuman mais je vous expliquerai plutôt comment configurer et construire l’application pour qu’elle soit exécutable sur Raspbian (le système d’exploitation qui tourne sur un Raspberry Pi).

Cloner le dépôt GitHub

Pour commencer, je vous propose de cloner le dépôt GitHub qui contient les sources de l’application. Pour cela, rendez-vous sur cette page : github.com/YubiGeek/Social-Counter

Clonez le dépôt GitHub avec la commande suivante, dans votre répertoire de travail :

git clone git@github.com:YubiGeek/Social-Counter.git

Installation du projet

Ouvrez le projet avec votre IDE (Integrated Development Environment) préféré et installez les dépendances nécessaire à l’utilisation de l’application, voici la commande pour les installer :

yarn install

Si Yarn (un gestionnaire de paquets NodeJS, comme NPM) n’est pas installé sur votre ordinateur, vous pouvez toujours l’installer avec la commande :

npm install yarn --global

Une fois les dépendances installées, vous pouvez commencer à étudier les sources du projet, les modifier si ça vous chante.

Configuration du projet

Avant de démarrer l’application, il faut créer un fichier de configuration à la racine du projet, pour cela, renommez le fichier d’exemple « config.json.example » par « config.json ».

Vous allez devoir le compléter par les identifiants de connexion aux API des réseaux sociaux.

• Twitter : pour Twitter, il vous suffit de vous rendre sur developer.twitter.com/en/apps et de générer une application avec une clé publique et secrète pour votre application, et des « credentials » pour votre compte, notez les 4 clés et complétez-les dans le fichier de configuration.
• Facebook : pour Facebook, générez un jeton d’accès à votre page Facebook, un tutoriel a déjà été écrit sur le blog pour générer et obtenir un jeton d’accès qui n’expire pas.
• Instagram : pour Instagram, il existe une page Web qui vous permet de générer un jeton d’accès à votre compte Instagram facilement : instagram.pixelunion.net

Construire l’application (dev)

Une fois que votre fichier de configuration est complété entièrement, vous pouvez démarrer l’application avec la commande suivante :

yarn run dev

Cette commande va construire (build) l’application et la rendre dans un environnement de développement, avec la console du développeur ouverte. Notez que ce que vous allez voir n’est pas la version finale de votre application.

Vous pouvez désormais admirer l’application en fonctionnement. Si vous double-cliquez sur l’interface (où sont positionnés les compteurs), la fenêtre se mettra en plein écran (utile pour l’écran du Raspberry Pi, il suffira de double-tapoter sur l’écran pour mettre l’application en plein écran).

A chaque fois qu’un compteur sera changé, soit par le désabonnement d’une personne, soit par l’abonnement d’un nouvel abonné, il sera animé, avec une bordure dessinée progressivement, et un secouement de droite à gauche.

Construire l’application (prod)

Pour construire l’application et l’utiliser sur Windows, Linux et Mac par exemple, il suffira de saisir cette commande :

yarn run build --all

J’ai eu quelques problème à faire fonctionner l’application avec ElectronJS sur Raspbian et son architecture ARM, je vous conseille de construire l’application avec la commande suivante :

yarn run build --armv7l

Une fois l’application « buildé », il vous suffit d’exporter les fichiers vers votre Raspberry Pi et de lancer l’application ElectronJS.

Vous pouvez aller plus loin en lançant l’application automatiquement au démarrage du Raspberry Pi. Pour ce faire, il suffit d’exécuter le fichier au démarrage de la session, en ajoutant une ligne dans le fichier « .profile » correspondant à l’utilisateur « pi ».