Youtube & Twitch - Alerts | Notif's pour Youtube et Twitch ! - Luc Mergault

Youtube & Twitch – Alerts | Notif’s pour Youtube et Twitch !

Retour sur Youtube & Twitch – Alerts, une extension pour navigateur qui vise à régler les problèmes de notifications récurent que subissent ces plateformes.

Cet article est une archive du 3 Juin 2018 ( En savoir plus ).

Informations

Début de réalisation : 10 Juillet 2017
Fin de réalisation : 21 Novembre 2017

Salut à toutes et à tous !

Aujourd’hui, je suis très heureux de vous écrire cet article !!

Cet article va présenter un des projets dont je suis le plus fier ( Dans la catégorie des projets personnels, à l’heure où j’écris cet article ).

Cela faisait longtemps que j’avais commencé à imaginer une extension pour navigateur Web vous notifiant des news de vos suivis ( Youtube & Twitch ) !

Dit comme ça, ce n’est pas très vendeur. Je m’explique !

Une extension pour Youtube ?

Dans un premier temps, il faut savoir que j’ai pensé à beaucoup d’idées avant d’en arriver à la version actuelle.

On peut notamment noter une extension / un site internet permettant la même chose, mais seulement pour les musiques et les clips.

Une autre idée était de créer une sorte de site Web pour Youtube, qui permettrait de regrouper toutes les news de ses suivis sur une seule page.

Au final, j’ai pris le meilleur de ces idées, pour en venir à ( De mon point de vue ), l’extension ultime !

L’extension ultime pour Youtube ?

Donc concrètement, l’extension permet beaucoup de choses extrêmement intéressantes.

La première est évidemment de notifier les utilisateurs des news de leurs suivis ( Notification popup classique ).

Ensuite, si par exemple vous ne souhaitez pas regarder une new tout de suite, et bien pas de soucis !

Toutes les news ( Que vous n’avez pas vues ) sont enregistrées dans l’extension. Elles sont par la suite facilement visibles sur le popup de l’extension.

Synchronisation des données

Autre point très intéressant, si vous vous créez un compte, vous pourrez synchroniser toutes les données de votre compte sur autant d’appareils que vous le souhaitez ( A l’exception des news déjà reçues ).

Sur l’extension, il existe trois statuts d’utilisateurs :

Basique : C’est le statut par défaut lorsque vous installez l’extension. Assez limité, vous ne pourrez enregistrer que 25 suivis, qui ont au moins 100 abonnés.
Inscrit : Ce statut est obtenable en se créant un compte ( Très simple : un mail et un mot de passe ). Une fois le compte créé, votre limite de suivis passe à 100 et il n’y a plus de limite sur le nombre d’abonnés. Vous bénéficiez aussi de la synchronisation.
Premium : Dernier de la liste, c’est le seul statut payant : 5€ à vie, vous bénéficiez de beaucoup plus d’avantages. La limite de suivis passe en illimité ( Théorique ), vous avez aussi la possibilité de créer des filtres, d’annuler la suppression d’un suivi, et j’en passe ( Je vous invite à regarder ça directement sur la page de présentation ).

Encore plus de fonctions ?

Là, nous avons, je trouve, une base déjà bien solide !

Mais ce n’est pas tout, voici une bonne liste des fonctions de l’extension :

Plusieurs paramètres pour chaque suivi. Ajouter aux favoris ( Ils seront affichés en premiers lorsqu’ils auront des news ), Activer / désactiver la réception des notifications, activer / désactiver l’ouverture automatique des news.
Possibilité de créer des filtres sur les paramètres de notification et d’auto ouverture ( Premium ).
Toutes vos news non lues sont retrouvables très simplement sur la fiche du suivi dans l’extension.
Possibilité de synchroniser vos données sur plusieurs appareils ( Inscrit ).
Fonction de recherche ( Parmi les suivis et les news ).
Possibilité de changer le thème de l’extension ( Couleur ).
Pleins de paramètres relatifs à l’extension et son fonctionnement.
Possibilité d’utiliser des raccourcis clavier pour certaines actions ( Premium ).
Il est important de préciser que l’extension n’est pas affectée par les problèmes de notification connus sur Youtube.
Et d’autres ( Certaines beaucoup moins importantes ).

Utiliser l’extension sur Youtube ?

Pour enregistrer des suivis, rien de plus simple, il vous suffit de vous rendre sur la page de celui-ci ( Youtube ou Twitch ), et de cliquer sur ce bouton :

Youtube :

Twitch :

Et voilà, le suivi est enregistré par l’extension !

Un gros challenge !

Outre tout cela, ce projet était vraiment un pur plaisir à développer.

Déjà parce que c’était un projet que j’avais en tête depuis très longtemps, mais aussi parce que c’était un vrai challenge à développer.

En effet, je n’ai pas fait les choses à moitié !

J’avais plusieurs contraintes que je voulais respecter.

L’une de celles-ci était de ne pas utiliser les API ( Youtube et Twitch ) directement ( Coté client ), pour vraiment limiter au maximum le nombre d’appels vers celles-ci ( Sachant qu’il y a un nombre limité d’appels, et qu’il serait vite dépassé si j’avais utilisé l’appel coté client ).

Du coup pour pallier à ce problème, j’ai pensé à un système alternatif.

Pour faire simple, quand un suivi va être enregistré, il sera enregistré en base de données ( Sauf s’il l’est déjà ).

C’est ensuite avec cette base de données, que le serveur va rechercher les news de tous les suivis enregistrés.

Et voilà, au lieu de faire un appel à l’API par suivi, pour chaque utilisateur, je fais un seul appel pour chaque suivi.

La deuxième contrainte était de gérer les différents statuts utilisateurs.

Ça peut paraitre simple, mais en réalité, ça m’a demandé toute une partie de recherches sur comment développer un système simple et efficace.

Au final, je pense m’en être plutôt bien sorti, surtout sur la partie utilisateur basique / inscrit.

Conclusion

Pour développer tout ça, j’ai dû utiliser plusieurs langages de programmation :

HTML / CSS / JavaScript : Utilisé pour gérer toute la partie extension du client ( Front-end ).
PHP / SQL : Utilisé pour gérer toute l’API, permettant elle-même d’interagir entre l’interface client et le serveur ( Back-end ).
Node.JS : Utilisé pour toute la partie détection de news / actualisation des suivis ( Back-end ).