Le meetup Trello French UG du 27 octobre 2015 a présenté la création d'une extension Chrome utilisant l'API Trello pour améliorer la gestion de projet. Les participants ont identifié des besoins tels que la visibilité sur l'avancement des projets et la coordination des équipes, soulignant l'importance d'une vue d'ensemble et d'une fonctionnalité de calendrier. Des défis techniques liés à l'intégration de l'extension, ainsi que des succès en termes d'interactions et de téléchargements, ont également été partagés.

1. 1er
Meetup Trello French UG
27.10.2015 #trellomeetup
Extending Trello
Création d'une extension Chrome avec l'API Trello

2. Team
kontest

3. Extending Trello
Création d'une extension Chrome avec l'API Trello

4. chez kontest

5. DANGER

9. + =
Chrome, notre
navigateur préféré
Trello, notre outil préféré

10. elegantt

12. Objectif : Outiller les project managers sur Trello
Besoin 1 : Tenir les délais
● Super pouvoir : Voir l'avancement des projets en cours
Besoin 2 : Coordonner les projets
● Super pouvoir : Donner de la visibilité à l'ensemble de l'équipe
Elegantt Trello Edition

13. Répondre à nos propres besoins et ceux des utilisateurs de Trello
"The only place Trello falls short for me
is the lack of a top level view, and
being able to put everything on one
calendar I could filter down from there
would be incredible."
"YES... This would really help with
PROJECT MANAGEMENT! It would
make it so easy to see what everyone
is doing, without wasting so much
time!"
"I'd love to be able to combine all my
boards from one organization into one
calendar within trello.”

14. Benchmark sur les extensions

15. Key features
● Gantt automatique : kanban
● Visuel
● Real Time
● Non-intrusif
Source : sondage Trello France - 2015

18. Injection HTML/CSS/JS & accès aux Chrome APIs (tabs, notifs, history...)
● manifest (permissions)
● content scripts
● background scripts
● CSP : inline JS / whitelisted remotes (https only) / eval
https://developer.chrome.com/extensions
Chrome Extension

19. Made with
● générateur Yeoman
● AngularJS
○ angular-gantt
○ angular-trello
● Trello API (OAuth, REST, WebHooks)
TrelloApi.Authenticate().then(function(){});
TrelloApi.cards(cardId).then(function(){});
TrelloApi.Rest('GET', 'members/me').then(function(){});

20. ● Se fondre dans le DOM Trello
○ CSS : easy
○ JS : moins easy
● Pas de serveurs !
○ pas de WebHooks
○ limitations API
○ Mutation Observers
● Stockage des data
Challenges techniques

22. Beta interne

23. Beta externe

24. Product Hunt
Lundi 19 octobre

27. Du 21 au 26 Octobre :
● TOP40 All time (sur 21 891 Hunts)
● 48 013 Visiteurs uniques
● 7 481 Installations
● 10 089 Activations
● 474 115 Intéractions

29. A retenir
1. Toucher l’utilisateur là où il se trouve
2. Concentrez-vous sur la résolution de leur besoin clé
3. Soyez généreux avec l’éco-système

30. Merci pour votre écoute !
A bientôt sur elegantt.com/trello