Nouvel outil d'import multi-plateformes

Bonjour,

J’ai créé une application web qui permet d’importer un événement dans Mobilizon depuis son URL.

L’import supporte les pages des événements facebook, helloasso, dice, shotgun, eventbrite et fera son possible pour créer un événement depuis un post instagram. En dehors de ces plateformes l’outil essaiera de trouver les balises meta standards et les données structurées d’événement schema.org dans les scripts json-ld pour créer l’événement.

L’import essaie de récupérer un maximum de données (dates et horaires, titre, description, cover, adresse, coordonnées GPS, lien vers la billetterie et organisateurs) et permet de les modifier avant l’enregistrement avec une interface intuitive (enfin j’espère).

L’outil permet de se connecter à n’importe quel compte Mobilizon et de publier dans un compte personnel ou dans un groupe.

Une version de test est disponible ici : https://import.mobilizon.webworkers.agency/

J’aimerais beaucoup avoir des retours sur son fonctionnement alors n’hésitez pas à l’utiliser !

Le code source est disponible ici pour le front-end et ici pour le back-end.

5 Likes

Bonjour, je trouve ça génial et cela me donne plein d’idées pour mon projet d’autonomie d’information locale :slight_smile: Popurrais tu expliquer en quelques mots ton processus ?

Bonjour et merci :heart_hands: ! Je ne sais pas si tu parles du processus qui m’a amené à créer l’appli ou si tu parles de son fonctionnement technique. Dans le doute je vais expliquer les deux, ça pourra toujours servir de documentation et j’avais de toute façon prévu de publier quelque part mon travail exploratoire et mes motivations :wink:

Concernant la raison d’être de cette application, je compte mettre en ligne une instance Mobilizon pour les structures locales qui organisent des événements et qui passent presque toutes par facebook ou instagram pour les diffuser :nauseated_face:. J’ai vu qu’il y avait un outil d’import disponible (qui semble ne plus fonctionner depuis quelques semaines :cry:) mais ça ne me convenait pas vraiment.

Je voulais que l’import soit plus complet avec notamment la récupération de l’artwork de l’événement car le visuel est souvent très important ainsi que les infos sur la localisation. Je voulais aussi que le processus soit plus souple et qu’on puisse modifier et compléter les données. Et enfin je voulais que l’appli soit plus intégrée à mon instance Mobilizon. Pour cela j’ai fait en sorte que l’utilisateur n’ait pas à renseigner l’adresse de son instance si celle-ci est passée dans l’URL. De cette façon on peut mettre le lien avec l’URL de l’instance directement dans le menu de l’instance et l’appli sait alors directement à quelle instance se connecter.

Côté technique, j’ai en fait développé 2 applications : une interface utilisateur (le client) qui coordonne tout et une appli serveur dont la mission est de récupérer les données des événements sur les différentes plateformes. J’aurais aimé que tout se fasse côté client dans le navigateur mais techniquement ce n’est pas possible à cause des limitations liées à la sécurité intégrées aux navigateurs (CORS pour les intimes). Il y aussi le fait que certaines plateformes détectent la façon dont on “charge” leurs pages et qu’elles peuvent bloquer l’accès aux données (voir plus bas). D’un autre côté ça pourrait me permettre plus tard d’avoir des statistiques anonymes sur l’utilisation de l’application (par exemple savoir quelles sont les plateformes les plus utilisées et détecter les bugs).

Concernant l’application client (l’interface utilisateur), le fonctionnement est très simple, elle va utiliser l’API d’une instance Mobilizon pour authentifier l’utilisateur (avec oAuth) et récupérer ses identités et ses groupes ainsi que la configuration de l’instance. Elle va ensuite demander à l’appli serveur d’aller “scraper” les données de l’événement avec l’URL fournie par l’utilisateur puis elle va mettre tout ça en forme pour les afficher dans un grand formulaire. Enfin, une fois validé, elle va envoyer l’événement à l’API de l’instance Mobilizon pour l’enregistrer. Un jeu d’enfant grâce à l’API de Mobilizon :face_blowing_a_kiss:.

Côté appli serveur (le scrapeur), c’est là que ça se complique en particulier pour facebook et instagram qui font tout pour empêcher qu’on vienne récupérer les données :face_with_steam_from_nose:. Il n’y a plus d’API disponible pour accéder aux événements sur ces deux plateformes (ou alors les conditions d’accès sont hors de portée) et le code source de la page est conçu de telle façon à ce qu’un outil automatisé ne puisse pas se repérer dans la page et donc ne puisse pas trouver les info recherchées.

Cependant à y regarder de plus près les données intéressantes sont quand même disponibles de façon structurée directement dans la page initialement chargée (sous la forme d’objets JSON) afin d’optimiser le chargement (et donc économiser un appel à l’API). Évidemment ce n’est pas idéal car la structure de ces données est d’une part assez complexe avec pas mal de cas différents à prévoir et, d’autre part, est susceptible d’évoluer auquel cas il faudra réadapter le code de l’appli :weary_face:. Ce préchargement pourrait également être purement et simplement supprimé…

Il faut aussi noter que ces plateformes vont chercher à savoir comment sont chargées les pages pour en tirer certaines infos : qui charge la page ? une vraie personne ? un robot ? est-ce que c’est google pour le référencement ? est-ce que c’est un robot qui vient “voler” du contenu (oui :squinting_face_with_tongue:) ? Évidemment le but du jeu consiste à se faire passer pour un utilisateur légitime :disguised_face: : soit une vraie personne, soit un moteur d’indexation. Après avoir essayé de nombreuses combinaisons il semble que ce qui fonctionne le mieux est de se faire passer pour un utilisateur non connecté de façon à avoir toutes les données (une page très simplifiée est servie aux moteurs de recherche) et à éviter les mécanismes de sécurité (les challenges du type “êtes-vous un robot ?” :robot:) qui sont compliqués à contourner. Pour cela j’ai utilisé un programme qui “simule” le fonctionnement d’un “vrai navigateur” (puppeteer).

J’ai également essayé de charger les pages facebook avec l’identifiant de session d’un vrai utilisateur (moi-même) mais la plateforme comprend vite que quelque chose cloche quand l’adresse IP change. J’ai abandonné cette option sachant que venir scraper le contenu et ainsi enfreindre les CGU de Meta en étant identifié personnellement n’est pas forcément une très bonne idée :woman_police_officer:.

Au final on peut accéder aux données voulues mais cela demande pas mal de ressources serveur liées à l’instanciation de puppeteer. Il faut aussi garder en tête que la protection qui est mise en place par ces plateformes pour empêcher l’accès aux données par des robots pourrait facilement être renforcée à tout moment et l’application pourrait ne plus fonctionner :scream:.

A noter également que certaines plateformes (bizarrement pas celles de Meta, sûrement parce qu’ils ont pléthore de ressources) sont très restrictives par rapport aux adresses IP qui viennent les visiter. J’ai donc ajouté dans mon code la possibilité de passer par un proxy, c’est à dire un service (payant… :money_with_wings:) qui permet de charger les pages avec une adresse IP qui n’est pas identifiable comme venant d’un pays étranger ou d’un datacenter afin de maximiser les chances de ne pas être bloqué. Je verrai si je continue de payer un proxy sachant que le blocage ne concernait qu’une seule plateforme (je ne sais plus laquelle). Il existe aussi des proxy gratuits mais leur efficacité est moindre… à tester.

Concernant le format des données, en dehors de facebook et instagram qui gardent jalousement leurs précieuses données (qui sont en fait les nôtres :zany_face:), on peut noter que toutes les autres plateformes intègrent des meta-données facilement lisibles sous forme de scripts json-ld avec la plupart des informations intéressantes. Les données sont décrites avec le vocabulaire issu de schema.org qui a été popularisé par Google qui l’utilise pour le référencement (oui parfois les GAFAM encouragent l’interopérabilité :winking_face_with_tongue:). On peut se satisfaire des données récupérées de cette façon mais pour Hello Asso j’ai quand même créé un script qui vient chercher des données supplémentaires dans le code HTML de la page afin d’avoir des données encore plus complètes.

Toujours concernant le format des données il faut préciser qu’Instagram est un cas particulier car à aucun moment la plateforme ne prévoit de pouvoir enregistrer des événements en tant que tels. Elle est malgré tout très utilisée à cette fin et je voulais donc l’intégrer au projet. Comme les dates et horaires des événements ne sont pas identifiés en tant que tels, j’ai créé un algorithme assez sommaire mais qui fonctionne la plupart du temps pour reconnaître les dates et horaires dans la description du post. Notez que ça ne fonctionne que pour du texte en français. L’algo analyse également la description de l’image du post destinée à l’accessibilité générée par l’IA de Meta (enfin un bon usage des LLM ? :face_with_raised_eyebrow:).

En parlant d’IA, j’ai évidemment pensé à passer par une IA qui lirait directement la page pour isoler les éléments intéressants et m’éviter ainsi tous ces longs et fastidieux développements. J’ai choisi de ne pas le faire pour des raisons éthiques. Je pense que ce n’est pas la direction à suivre si on utilise un projet comme Mobilizon mais ça n’est que mon avis et je reste ouvert au débat. (Side note très éloignée du sujet : Intégrer un serveur MCP à Mobilizon pour que les événements enregistrés soient accessibles aux assistants IA, une hérésie ? :thinking:).

Et puisqu’on parle d’éthique, certains pourraient se demander si ça ne soulève pas un problème éthique de venir piller le contenu d’un site comme Hello Asso. Pour ma part je pense que la finalité rend l’action tout à fait légitime et que de toute façon l’utilisateur intéressé par l’événement se rendra sur la plateforme pour acheter ses tickets (avec une jolie commission inch allah). D’ailleurs l’outil d’import place automatiquement le lien de l’événement sur la plateforme en tant que lien vers la billetterie :innocent:.

Voilà, j’aurais sans doute d’autres choses à raconter mais je vais m’arrêter là étant donné que la question précisait “en quelques mots” :sweat_smile:. Néanmoins je pense que toutes ces explications pourront servir à quelqu’un qui aurait un projet similaire.

2 Likes

Waow, merci pour ces retours et même si j’ai pas mal de lacunes techniques, j’ai à peu près compris et surtout ta démarche pour sortir des RS ! Alors voilà, ce que j’ai fait. Ma problématique était de rassembler les actualités disponibles dans ma région (Nord Drome et alentours) pour les rendre accessible à un seul endroit. Car même s’il existe déjà des initiatives comme Apidae via les offices de tourisme, il reste beaucoup beaucoup d’informations sur des sites internet, facebook et autres réseaux digitaux.

Quelles actualités ? Ce qui concerne l’alimentation locale (dromeadhere.tv fait la promotion du consommer local alimentaire). La pluaprt de ses infos sont sur facebook sur les pages des producteurs et circuits courts.

Comment faire ? J’ai utilisé RSS.app pour générer des liens rss de sites internet, pages facebook et autres. J’ai ensuite installé un n8n local qui récupère ses flux et les envoie dans un workflow permettant d’extraire les informations, de les reformater, filtrer et trier puis de créer un json (ensuite posé sur mon serveur web). Mon application sur flutterflow n’a plus qu’à appeler ce json.

J’ai déjà un serveur videos sous peertube mais je ne suis pas tech et incapable d’intégrer de nouveaux outils dans ce serveur … mais mastodon reste un objectif.

Je suis donc non seulement admiratif mais j’aimerais avoir un pote comme toi pour aller plus loin dans ma démarche d’intégrer de l’open source en local au service du consommer local avec l’idée qu’un jour, personne ne se posera plus la question de ou poser ses actualités. Ce serait d’ailleurs un beau projet pour un groupe constitué ! Merci encore … c’est inspirant !

1 Like

Wow je viens de tester et c’est assez génial! Super clean et intuitif. Merci d’avoir mis cet outil à disposition (et de l’avoir développé :slight_smile:

J’ai testé avec une page “allociné” sur https://kids.keskonfai.com/, j’ai pas encore joué plus mais je compte l’utiliser.

Si tu es d’accord on peut le documenter sur Mobilizon.org aux côtés de l’import tool de Framasoft/Kaihuri.

Tu parles d’une version de test mais c’est assez abouti!

J’ai des retours / liste au père noël si ça t’intéresse.

Merci @dromeadhere ! Bravo pour ton initiative ! Ça me fait beaucoup penser à https://openproduct.fr/ (voir Simon D. : « Un annuaire des producteurs locaux en Open-Source… » - Piaille ).

Je ne connaissais pas RSS.app. J’aime bien l’idée ^^

Merci @Lahax !

Je n’ai pas fait d’intégration spécifique pour Allociné mais ils intègrent pas mal de meta données Open Graph donc l’outil d’import est capable d’en récupérer une partie. Je vois qu’ils intègrent aussi des coordonnées GPS dans ce même format, ce n’est pas reconnu pour l’instant mais je vais l’intégrer.

Bien sûr, je serais ravi que mon projet soit documenté sur Mobilizon.org ! Dis-moi si tu souhaites que je fournisse une doc utilisateur. Il y a quelques subtilités qui mériteraient sans doute d’être éclaircies ^^.

Je parlais d’une version de test car j’ai déployé l’application sur un domaine qui me sert à tester. Je vais peut-être la bouger ailleurs en production, il faut que j’y réfléchisse.

Je suis à l’écoute des retours, n’hésite pas :wink:

Hello!

J’ai ajouté ton outil dans la doc: Import events in Mobilizon - Mobilizon . Dis moi si tu vois quelque chose à modifier - j’ai mis le lien vers ta version de test car c’est plus parlant qu’un git mais je peux le retirer ou le modifier.

Si tu fais une documentation utilisateur je rajouterai le lien - perso ça m’a semblé intuitif :slight_smile:

Voici ma wish list:

-possibilité de chercher l’adresse avec le geocodeur (en particulier le “Hat” est très pratique, on n’a en général pas à saisir d’adresse, juste renseigner le nom du lieu Geocoders - Mobilizon )
-création de l’événement en brouillon, pour pouvoir vérifier le rendu, les options, ajouter des tags…) avant de le publier
-retenir les choix précédents quand on fait « importer un nouvel événement » (ex: profil choisi)
-gestion des flux ICS (avec création automatique des événements au fur et à mesure qu’ils sont créés - ce qui est géré par l’autre import tool il me semble)
-interface en anglais of course

Et je m’emballe un peu: application mobile pour pouvoir partager une URL vers cette application, comme on le fais vers une appli de mail ou de chat (plus facile comme parcours utilisateur que de copier l’URL puis d’ouvrir l’import tool puis de coller l’URL)

Merci vraiment pour ce super outil.

Salut @Lahax,

Super ! Je pense que tu peux juste ajouter une indication qui peut servir aux admin qui veulent afficher un lien vers l’application et que celle-ci pointe directement vers leur instance : on peut ajouter le paramètre domain à l’URL, par exemple : https://import.mobilizon.webworkers.agency/?domain=https://mobilizon.fr. De cette façon l’utilisateur n’a pas besoin de renseigner l’URL de l’instance.

En ce qui concerne la wish list :

  • Autocomplétion avec le géocodeur : la fonctionnalité est implémentée et utilise le géocodeur de l’instance à laquelle l’utilisateur est connecté. Néanmoins il est possible que le retour de l’API soit différent en fonction du géocodeur et que ça n’ait pas fonctionné avec ton instance. Tu as testé avec https://kids.keskonfai.com/ ?
  • Mode brouillon : super idée, je vais étudier sa faisabilité.
  • Mettre en mémoire les choix précédents : C’est surtout un problème d’UX. J’ai préféré refaire confirmer l’identité / groupe à l’utilisateur pour éviter les erreurs. Peut-être ajouter l’option à la fin de l’import de pouvoir publier dans le même groupe ?
  • Gestion automatisée des flux ICS : Je note mais ça nécessiterait une automatisation côté serveur. Pour l’instant je me concentre sur la logique d’import au coup par coup depuis le client mais il y a un gros potentiel dans la création automatique que ce soit depuis ICS ou Facebook.
  • Traduction : oui ^^ D’ailleurs est-ce que tu sais si Mobilizon est très utilisé en dehors du public français ?
  • application mobile : Je n’ai pas compris :sweat_smile: Tu peux expliquer le parcours utilisateur ?

Merci pour ta réponse!

J’ai ajouté l’info sur l’URL, c’est encore mieux!

Je l’ai ajouté en page externe dans Keskonfai, encore merci pour ce chouette outil.

J’ai retesté le geocoding, j’ai réussi à trouver l’adresse, mais j’ai l’impression que c’était moins tolérant sur les approximations. En tous cas ça a marché.

Garder les choix en optionnel pourrait-être un bon compromis.

Ou par défaut ça m’irait aussi. Surtout si tu proposes de publier d’abord en brouillon, les gens pourront contrôler qu’ils n’ont pas fait d’erreur et corriger l’organisateur si besoin.

J’ai pas de stats mais je pense qu’au moins une moitié des utilisateurs sont hors francophonie.

Le parcours utilisateur pour l’application mobile serait:

1 / Je suis sur un événement facebook.

2 / Je clique sur “Partage” dans facebook.

3/ Parmi les applis proposées, il y a “Mobilizon Import tool”, je choisis et je fais OK.

4 / Mobilizon import tool s’ouvre avec l’événement partagé sur la page “create”.

5 / Quelques clics en plus et mon événement est en ligne sur Mobilizon.

La il faudra vraiment pouvoir choisir un profil par défaut :wink:

Je t’avais prévenu que je m’emballais un peu :wink:

Je viens d’essayer à partir de facebook (https://www.facebook.com/events/1318243569605898/) mais je n’ai pas réussi à créer l’événement.

Impossible de saisir la date (quand je la saisie, elle disparaît) et comme c’est une info obligatoire j’ai du abandonner.

Bizarre!

Sur Mobilizon on a eu plein de problèmes de date, et on a fini par utiliser le composant standard HTML, maintenant plus de soucis!

Si tu penses que tu peux aider à corriger ce problème mais que tu as besoin de plus d’infos (screenshot, etc) dis le moi.

Concernant ton dernier message, je viens de jeter un coup d’oeil. Bien sûr ça fonctionne chez moi avec Firefox :laughing: Tu utilises quel navigateur ? La date de facebook n’est pas récupérée ?

J’avoue que j’ai un peu zappé les tests cross-browser et visiblement l’input pour les dates est pas très pratique sur chrome.

Sinon merci pour les autres retours.

Pour le geocoding, je pense que c’est surtout un problème d’UX. Par exemple si une ville est trouvée dans l’adresse sur Facebook elle va être mise dans le champ dans le le formulaire de l’appli et intégrée dans la chaîne de caractères recherchée pour le geocoding. Bien souvent ajouter cet élément amène de moins bons résultats… Il faudrait effacer ces éléments quand on recherche une adresse. La solution proposée sur l’interface de Mobilizon ne me paraît pas idéale non plus. A réfléchir…

Ok pour le reste et pour l’appli il faut que je me documente mais apparemment il doit être possible pour une application web (comme la mienne) d’apparaître dans la liste des appli de partage.

1 Like

Merci pour ta réponse.

Pour le geocoding, la ville indiquée sur facebook été récupérée. C’est pas mal! J’ai utilisé le bouton “modifier” et bien effacé avant de ressaisir. Maintenant après plusieurs tests je trouve que ça fonctionne bien comme sur Keskonfai… C’était peut-être juste une question de prise en main de ma part. C’est cool!

Pour la date, c’est vraiment étrange… Je suis bien sur Firefox. On s’est mis à deux dessus pour voir si je n’avais pas la berlue, on a essayé plein de trucs, mais rien à en tirer. C’est bizarre, hier je n’avais pas eu de soucis. J’ai fait une video. Je te tiendrai au courant si je fais d’autres tentatives qui marchent ou qui marchent pas.

Je serai curieuse d’avoir des retours d’autres personnes qui testent ton importeur!