### *Webinaire* # l'open source en pratique ### *session 2* --- ## Qui suis-je ? Maël THOMAS Référent technique à la FabMob Développeur chez ecolab @ BetaGouv --- ## Avant de commencer :::info * webinaire filmé (vidéo sur le wiki pour les absents) * tout le monde coupe son micro... * ... et utilise la fonction "main levée" 🖐 pour demander la parole * vous pouvez réagir avec les boutons :white_check_mark: ou :negative_squared_cross_mark: * n'hésitez pas à mettre vos questions dans le chat à tout moment ::: --- ## Et vous ? :::info * on va faire un tour de table à l'écrit dans le chat : dites-nous en 2 mots qui vous êtes * vous pouvez aussi mettre votre entreprise / organisation directement dans votre nom de participant : `Maël [FabMob]` ::: --- **Notre sujet** : l'open source en pratique. Note: Ce qui suit sera bien sûr influencé par ma vision, ma pratique. --- ### Programme 1) Rappel de la session 1 2) Notre sujet pratique : les "cartes minute vélo" 2) Existe-t-il un générateur de cartes ? 2) Contribuer via Gitlab et Github --- 💭 n'hésitez pas à tout moment à poser des questions sur le chat si je n'ai pas été clair sur un concept ou un terme technique --- ### Rappel de la session 1 - définition de l'open source - comment chercher et créer un projet open source ? - comment estimer l'intérêt d'un projet existant sur Github [📼 vidéo de la session 1](https://www.youtube.com/watch?v=uC6NdLZJZVs) [📘 script de la session 1](https://pad.fabmob.io/Pxt96o7dRoqR89VrsaQcXQ?view) ---  --- Aujourd'hui : contribuer à un projet via GitLab --- ### Notre objectif : généraliser les "cartes minute vélo"  --- Popularisée par Le Parisien pendant les grèves 2019. Comme toujours, Paris d'abord... Note: d'autres datent de 2016 http://carfree.fr/index.php/2016/06/16/des-cartes-de-temps-de-trajets-a-velo/ --- Quelques autres villes ont suivi pendant le confinement : Rennes, Orléans, Sophia Antipolis, Charleville-Mezières Rappel : il y a 40k communes en France --- Sortie il y a 2 jours, très belle carte de Lyon grâce à lavilleavelo.org  --- Deux solutions : - créer une carte à la main sur Gimp ou Inkscape - coder une carte automatique ⭐ --- 1) Chercher "carte temps vélo" sur google images. [lien](https://www.google.com/search?q=carte+temps+v%C3%A9lo&hl=fr&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi0woGOoNbpAhVwxYUKHYaEBUUQ_AUoAXoECAwQAw&biw=1296&bih=761) --- 2) Chercher "générateur de carte temps vélo" [lien](https://www.google.com/search?bih=761&biw=1296&hl=fr&ei=g4XPXu3pAY6KareAHg&q=g%C3%A9n%C3%A9rateur+de+carte+temps+v%C3%A9lo&oq=g%C3%A9n%C3%A9rateur+de+carte+temps+v%C3%A9lo) Aïe, pas grand chose... --- 2) Chercher "carte temps vélo **github**" Bingo 🎉 https://tempsvelocharleville.netlify.app --- Encore mieux, poser la question à la FabMob ou explorer son [wiki](https://wiki.lafabriquedesmobilites.fr/wiki/Accueil) ---  --- ## De quoi on dispose Deux bases de code : - https://gitlab.com/taflevelo/temps-velo - https://github.com/joachimesque/paris-a-velo (2 alternatives fonctionnelles, c'est super 🐓) --- ### `joachimesque/paris-a-velo` Très bien documenté : [README.md](https://github.com/joachimesque/paris-a-velo#transposer-cette-carte-pour-une-autre-ville) --- Très belle carte... mais il faut : - télécharger un fond de carte SVG - lister chaque point et chaque segment (📈) - calculer nous-même les temps de trajet --- ### `taflevelo/temps-velo` Très bien documenté aussi : [README.md](https://gitlab.com/taflevelo/temps-velo#change-update) Avantage : tout est automatisé. 📁 liste des points d'intérêt -> ⚙ -> carte sur le Web --- ## Comment contribuer ? --- ### 1) Poser des questions Direction l'onglet *issues* (tickets). Il faut voir cet onglet comme un forum. https://github.com/joachimesque/paris-a-velo/issues https://gitlab.com/taflevelo/temps-velo/issues --- ### 2) Améliorer la documentation Direction le fichier *README.md* (LISEZMOI). https://github.com/joachimesque/paris-a-velo/ https://gitlab.com/taflevelo/temps-velo/issues --- README.md **.md** Kesako ? **M**ark**d**own : Un format standard pour écrire du texte avec **du gras** ou de *l'italique* ou encore : - des - listes ➡ Cette présentation est elle-même écrite en .md --- 💡 Allons corriger une petite faute dans le README.md de [`temps-velo`](https://gitlab.com/taflevelo/temps-velo/issues) --- Le Wiki [exemple](https://github.com/betagouv/mon-entreprise/wiki/Conventions-collectives-et-accords) --- ## Modifier la donnée --- Le code est compliqué (il faut être développpeur) ... mais les développeurs ont séparé la donnée du code --- 📁 points.csv *ma liste de points d'intérêt* -> ⚙ *un serveur va exécuter le code* -> https://laem.gitlab.io/temps-velo *ma carte sur le Web* --- Les formats de donnée : - CSV - JSON - YAML --- CSV ```csv zoom, requête, nom 11, "Gare Montparnasse, Paris", "Montparnasse" 11, "Place de la Réunion, Paris", "Place de la Réunion" ``` --- JSON ```json [ {"zoom": 11, "requête": "Gare Montparnasse, Paris", "nom: "Montparnasse" }, {"zoom": 11, "requête": "Place de la Réunion, Paris", "nom: "Place de la Réunion" } ] ``` --- YAML ```yaml - zoom: 11 requête: Gare Montparnasse, Paris nom: Montparnasse - zoom: 11 requête: Place de la Réunion, Paris nom: Place de la Réunion ``` *~~La Rolls~~ le vélo hollandais des formats de donnée* --- ### Modifier les points d'une ville --- https://gitlab.com/laem/temps-velo/ - Cliquer sur 📁 `data`.  - Cliquer sur une des villes, puis sur  - Cliquer sur "Fork" --- - améliorer ou ajouter une ligne - saisir un "Message de commit" - cliquer sur ✅`Commit changes` - cliquer sur ✅`Submit demande de fusion` --- ### Ajouter une ville --- - bouton ➕ > nouveau fichier - ajouter les points (par ex. copier-coller d'une autre ville) - 🔁 Répéter l'opération de `Demande de fusion` --- 🍹 Admirer le résultat sur le Web ▶https://laem.gitlab.io/temps-velo/ --- Ce projet de code est-il terminé, bouclé ? Non, jamais. - du style pour des cartes plus jolies - ajouter d'autres villes - améliorer la performance - mettre l'option "cycliste sportif" - ... --- # Questions et discussion Et :camera: --- <style> .reveal.reveal img, .reveal.reveal .graphviz { border: none; box-shadow: none; max-height: 250px; overflow: hidden; } .reveal h1, .reveal h2, .reveal h3, .reveal h4 { color: #5eb8e0; font-weight: semi-bold; } .reveal code { background: #9dcdd7; border-radius: .2rem; background: #9dcdd7; border-radius: 1rem; padding: 0.4rem 0.6rem; } .reveal p, .reveal ul, .reveal li, .reveal body { color: #18457B; font-size: 3rem; font-family: 'Roboto', sans-serif; } .reveal a { color: #2975D1; } .reveal em { font-size: 85%; font-style: normal; color: #18457Baa; } </style>