Twittorama

Visualiser un compte twitter sous forme de galerie

a marqué ce sujet comme résolu.
Auteur du sujet

Hello tout le monde !

Je poste rarement ici, alors c’est pas sans un certain frisson que je viens le faire ^^

Récemment, j’ai voulu me confronter au web. Étant développeur plutôt embarqué / système que web, vous vous doutez bien que c’était pas loin du défi pour moi ^^ Mais bon, mon experience de dev' ZdS m’a réconcilié avec toutes ces technos et mon amour de python m’a donnée envie d’essayer de développer un vrai petit projet, tout seul comme un grand dans mon coin. Du coup laissez moi vous présenter Twittorama !

Comme je le disais, l’idée derrière ce petit projet est d’avoir deux choses :

  • Un bac à sable concret pour faire du dev' web (parce que bon, les projets Hello World j’en ai un peu marre) ;
  • Le plaisir d’avoir réussi à porter un truc de l’état "d’idée-qui-me-plait" jusqu’à sa publication en ligne (et son évolution derrière).

Twittorama, qu’est ce que c’est ?

Twittorama est un peu site/service internet qui vous permet de visualiser les médias d’un compte twitter sous une forme de galerie. Certains comptes Twitter me plaise beaucoup pour leur caractère graphiques, mais visualiser leurs photos sous forme de liste avec du texte ne me plaît pas plus que ça. J’ai donc créer ce petit site qui exploite l’API Twitter pour créer des galeries d’images.

Par exemple, voici le compte de SpaceX vu sur Twittorama :

SpaceX sur Twittorama
SpaceX sur Twittorama

Lorsque vous cliquez sur une image, cette dernière s’affiche en grand et des liens pour la télécharger ou la voir sur Twitter sont proposés.

Point de vue technique

Point de vue de la technique, je fonctionne avec le micro-framework Flask en backend et du JQuery pour m’aider en frontend. Pas de framework CSS, c’est tout fait à la main de ce côté là !

Ne voulant pas m’enquiquiner à faire de l’admin serveur, je suis parti sur une solution d’hébergement mutualisé chez Gandi. Le code est quant à lui chez Gitlab (pas open source).

Évolutions à venir

J’ai encore pas mal de choses à faire avant d’être content, mais il faut bien se lancer publiquement à un moment ou à un autre sinon c’est la porte à l’abandon ! Parmis les choses qui m’intéresse à faire :

  • Corriger les moults bugs déjà identifié et les comportements sous-optimaux point de vue UX ;
  • Tirer parti de l’architecture CI/CD de Gitlab pour automatiser les mises en prod' ;
  • Essayer de passer sur du Vue.js (pour pouvoir jouer avec un framework js moderne) Ca c’est fait ! ;
  • Nettoyer mon js qui est très crade cf. point précédent ;
  • Faire un mécanisme de cache en BDD pour limiter les appels à l’API Twitter ;
  • Mettre en place les galeries par recherche de hashtags fait! ;
  • Implémenter un espace utilisateur pour pouvoir sauvegarder les images favorites ;
  • Violemment améliorer la page d’accueil à base de "Twittos of the week / month" par exemple ;
  • M’implémentez des outils de supervision de la consommation de l’API et autres métriques ;
  • Probablement d’autres trucs que j’ai plus en tête ;

Bref, j’ai de quoi m’occuper encore un moment ^^


Voilà pour mon dernier petit side-project en date ! Je suis content de vous le présenter, n’hésitez pas à m’en faire la critique (construite), je saurais vous écouter !

À bientôt !

https://twittorama.com/t/zestedesavoir
https://twittorama.com/t/eskimon_fr

Édité par Eskimon

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+12 -0

Cette réponse a aidé l’auteur du sujet

Ton projet est sympa !

Je plussoie vue.js, je suis en train de m’y remettre un peu, je trouve le framework vraiment super agréable et facile à prendre en main.

Une petite suggestion d’amélioration (si l’API twitter permet cela) : avoir une autocomplétion sur le champ de recherche d’un compte twitter, comme dans la barre de rechercher de twitter.

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Attributed to Samuel Johnson

+3 -0
Auteur du sujet

Hey mais c’est vraiment pas mal en fait !

.

Ton projet est sympa !

Merci :)

Une petite suggestion d’amélioration (si l’API twitter permet cela) : avoir une autocomplétion sur le champ de recherche d’un compte twitter, comme dans la barre de rechercher de twitter.

L’API le permet, je note cette idée !

Un moyen peut-être de s’y abonner par flux RSS ?

Tu imagines quoi ? Un flux qui te post les nouvelles images d’un compte ?

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+0 -0

Je n’utilise pas du tout twitter, mais tu m’a fait découvrir des trucs sympa qu’on peu trouver dessus :)

Pour Vue.js j’ai eu l’occasion de l’utiliser dans plusieurs projets, et c’est vraiment pas mal ;)

+0 -0

Sur mobile lorsqu’on clique sur une image :

  • On peut continuer à scroll le fil des images alors qu’on est sur une image. :O
  • C’est dommage de ne pas pouvoir cliquer sur la description ou le lien en dessous de la description. :(
  • Et c’est dommage de ne pas trouver dessous un bouton : répondre/tweetter/liker et même un système pour ne pas quitter la page serait top. :D

Et petit plus écolo : Mettre un chargement des images intelligent. :D

Sinon j’aime bien le projet. :D J’espère que c’est compatible avec beaucoup de compte Twitter (dans le sens où on ne tombe pas sur des images de type concours ou GIF que twitter nous propose d’ajouter dans un tweet).

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0
Auteur du sujet

Le chargement des images ne semble pas fonctionner sur Firefox 63.0.1 en navigation privée. Je plussoie Vue.js.

EtienneR

Comme disais Phigger un peu plus tôt :

Je me demandais pourquoi je ne voyais pas les images, j’ai fini par trouver. La protection anti-traqueurs de Firefox bloque le chargement des images :/

Phigger

Et je ne peux rien y faire. Les images sont chargées depuis les serveurs de Twitter, donc je ne peux pas contourner l’anti pistage de firefox.

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+1 -0

Si ca peut t’aider j’ai trouvé un bug : au scroll pour recharger une deuxième volée d’image , après chargement le deuxième set d’image s’affiche bizarrement :

Image utilisateur
Image utilisateur

Ma config : W10 / Firefox 63.0.1 64 Bits / Ublock Origin activé

+0 -0

Yeah ! J’aime beaucoup l’idée :)

Le rendu est super sympa ! Je suis un peu dans le même cas que toi, récemment j’ai fais un side-project et je me suis dis pourquoi pas en python. Un tutoriel sur le microframe work Flask ferait du bien à ZdS. Si un jour je le maitrise suffisament, alors j’essayerais d’en faire un.

Sinon, au niveau du site, je ne peux pas lancer une vidéo ni agrandir les images, je n’ai pas de souris et impossible d’y cliquer avec les plugins « d’accecibilités » ^^"
Une solution serait d’ajouter l’attribut tabindex=0 afin d’ajouter les images au navigation flow.

Mais même sans ça, ça en jete !

ache.one                 🦹         👾                                🦊

+0 -0
Auteur du sujet

Si ca peut t’aider j’ai trouvé un bug : au scroll pour recharger une deuxième volée d’image , après chargement le deuxième set d’image s’affiche bizarrement

@alliocha1805 C’est bizarre, ca c’est un truc que j’avais mais il y a bien longtemps. On dirait que le cache du serveur t’as servi un vieux fichier. Si tu veux retester, j’ai purgé ce dernier.

Ce que je voulais dire c’est que tous les comptes twitter n’ont pas une certaine cohésion dans leur média ;)

@A-312 Oui mais là ca sort de mon cadre de simple affichage ^^ (ou alors tu as une idée derrière la tête ?)

Chouette projet,

Par contre, ne jamais mettre Legal et Contact dans un infinite scroll ;)

elyppire

Merci :) Oui je sais, mais je savais pas où les mettre et comme ils étaient là au début ils ont pas rebougé ensuite ^^

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+0 -0

Si ca peut t’aider j’ai trouvé un bug : au scroll pour recharger une deuxième volée d’image , après chargement le deuxième set d’image s’affiche bizarrement

@alliocha1805 C’est bizarre, ca c’est un truc que j’avais mais il y a bien longtemps. On dirait que le cache du serveur t’as servi un vieux fichier. Si tu veux retester, j’ai purgé ce dernier.

Ce que je voulais dire c’est que tous les comptes twitter n’ont pas une certaine cohésion dans leur média ;)

@A-312 Oui mais là ca sort de mon cadre de simple affichage ^^ (ou alors tu as une idée derrière la tête ?)

Chouette projet,

Par contre, ne jamais mettre Legal et Contact dans un infinite scroll ;)

elyppire

Merci :) Oui je sais, mais je savais pas où les mettre et comme ils étaient là au début ils ont pas rebougé ensuite ^^

Eskimon

Effectivement ça fonctionne beaucoup mieux :D

+0 -0

Chouette projet.

J’aime bien l’idée et je trouve ça chouette.

On voit a quel point le compte Twitter de ZdS n’est pas très graphique.

Le code est quant à lui chez Gitlab (pas open source).

Par curiosité, pourquoi pas open source ? Ça pourrait intéresser des gens, voir aider a porter le projet sur autre chose que Twitter.

+0 -0
Auteur du sujet

Je me demande si on peut faire la même chose pour Mastodon, et si le projet peut réutiliser du code pour gérer les deux sources.

gasche

Je suppose que oui, très résemment le lead dev de mastodon a publié ca : https://mastodon.social/gallery/

Le code est quant à lui chez Gitlab (pas open source).

Par curiosité, pourquoi pas open source ? Ça pourrait intéresser des gens, voir aider a porter le projet sur autre chose que Twitter.

firm1

Parce que j’en suis pas très fier pour le moment, il est vraiment pas clean :ninja:

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte