# Les DAFS & Internet --- ## Qui suis-je ? - Jérémie Pardou - Développeur chez Baserow - jeremie@baserow.io Note: Pauses, Évaluation, Déroulé de la journée, Interactif, covid, présentiel. --- ## Objectifs de la capsule - Découvrir le métier des DAFS - Apprendre à collaborer --- ## Programme - Les **DAFS** - Les **grands principes** d'Internet - **Comment fonctionne** Internet ? - Un peu d’**économie** - Les **outils** pour les DAFS - **Collaborer** avec les autres # les DAFS --- ## Préambule **Brainstorming** : qu'est-ce qu'un·e DAFS ? Note: - Quelles sont ses compétences ? - Et ses qualités --- ## Ses compétences - Une [licorne ?](http://www.commitstrip.com/fr/2016/11/07/which-full-stack-developer-are-you/) - Un·e **spécialiste** du Web - Développe des applications Web - Full-stack ? = **multi-disciplinaire** : - Front-end - Back-end - Un peu Devops - [Oui tout ça…](https://github.com/kamranahmedse/developer-roadmap) Notes: - https://roadmap.sh/ --- ## Ses qualités C'est une personne : - Autodidacte - Curieuse - Autonome - Rigoureuse - Flexible Note: - Paradoxe autodidacte ! - Les technos évoluent vite --- ## Son avenir - Sénior - Lead dev - Responsable technique - Scrum master - Chef·fe de projet ? - … # Un·e spécialiste du Web ? --- ## My name is net, Internet ! - Qu'est-ce qu'Internet ? - Quels sont les grands principes d'Internet ? - Quelles sont les institutions qui font tourner Internet ? Note: ## Activité : réflexions --- ## L'entre réseaux C'est un réseau de réseaux ! --- ## Les grands principes - Neutralité ? - Décentralisé ? --- ## La gouvernance Que désignent les termes suivants : - IETF - RFC - ISOC - ICANN - AFNIC - W3C - CNIL Note: Activité : À chercher ensemble. --- ## Un peu de terminologie 1 - Comment les machines communiquent-elles ? - Comment se reconnaissent-elles ? - Que devons nous connaître d'un site ? - Quel lien y a t-il entre les deux ? - Comment est fait ce lien ? - ... Note: Activité : À chercher seul. --- ## Réponses - terminologie 1 - Avec les protocoles [TCP/UDP et IP](https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet) - Par l'adresse IP[V4](https://fr.wikipedia.org/wiki/IPv4) ou IP[V6](https://fr.wikipedia.org/wiki/IPv6) - Son [nom de domaine](https://fr.wikipedia.org/wiki/Nom_de_domaine) - Grâce aux fameux [serveurs DNS](https://fr.wikipedia.org/wiki/Domain_Name_System) - ... --- ## Un peu de terminologie 2 - ... - Comment les DAFS peuvent-ils configurer ce lien ? - De quoi est fait un site ? - Comment un navigateur récupère-t-il le contenu d'un site ? - Comment trouvons-nous les sites ? - Qu'est-ce que le Web ? - C'est quoi une application Web ? Note: Activité : À chercher seul. --- ## Réponses - terminologie 2 - ... - Par un [registraire de nom de domaine](https://fr.wikipedia.org/wiki/Bureau_d%27enregistrement) - D'[HTML](https://fr.wikipedia.org/wiki/Hypertext_Markup_Language) et d'autres choses - Grâce au protocol [HTTP](https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol) - Via un [moteur de recherche](https://fr.wikipedia.org/wiki/Moteur_de_recherche) - C'est la [partie visible](https://fr.wikipedia.org/wiki/World_Wide_Web) de l'iceberg - C'est ce que nous allons voir… Note: - Importance du choix du moteur de recherche # C'est quoi une application Web ? --- ## Une application web c'est… Elle est composée : - D'un **backend** : le serveur web - Et d'un **frontend** : l'application qui s'execute sur le navigateur, le client --- ## C'est quoi un serveur web ? - Un logiciel… - qui écoute des _requêtes_ HTTP(s)… - et qui sait y répondre. - La réponse est simplement du texte - au format HTML, JSON, XML,… - mais également des images, vidéos. Notes: Les fichiers sont transférés au format original, pas forcément du texte. --- ## Anatomie d'une requête HTTP - C'est du texte également - Transmis par le client au serveur distant via le réseau Internet - Pour demander le contenu d'une ressource via son _URL_ - Ou une action sur cette ressource --- ## L'URL ? - [Uniform Ressource Locator](https://en.wikipedia.org/wiki/URL) - Identifie de façon unique une ressource sur un serveur --- ## Le port logiciel ? - Permet de distinguer [plusieurs interlocuteurs](
) - Une requête faite sur un port est dirigée vers une application en particulier --- ## Mais que fait le client ? - C'est le navigateur - Il dialogue avec le serveur - Il interprète le HTML, CSS, Javascript, affiche les images, … - Il réagit aux actions de l'utilisateur --- ## La requête ![requete](images/serveurCom_1.png) --- ## La réponse ![requete](images/serveurCom_2.png) --- ## C'est quoi une application Web ? - Un ensemble de textes et médias - au format HTML, JSON, XML, Js, CSS, image, … - C'est un outil qui permet de simplifier le travail - En général multi-utilisateur --- # Que fait le DAFS dans tout ça ? 1/3 Il réalise le **backend** : - l'application sur le serveur… - qui va répondre aux requêtes envoyées par le client. --- # Que fait le DAFS dans tout ça ? 2/3 Et le **frontend** : - l'application que le navigateur affiche à l'utilisateur… - qui va réagir aux actions de l'utilisateur - et éventuellement déclencher des requêtes… --- # Que fait le DAFS dans tout ça ? 3/3 Et il participe au **déploiement** : - La logique qui permet de publier l'application, - la mettre à jour, - La superviser, - … --- ## Tchatons ensemble **Activité** : Utilisons netcat et telnet pour dialoguer. Notes: ``` nc -vl 8090 telnet localhost 8090 # ctrl+maj+] pour arreter # Avec ngrok ./ngrok tcp 8090 ``` Ce type de dialogue est exactement le même que celui entre le serveur et le client --- ## Sous le capot ![](images/detailcom.png) --- ## Soyons le client **Activité** : dialoguons en HTTP avec le serveur http://perdu.com avec telnet Notes: Dialoguons avec le serveur http://perdu.com telnet 208.97.177.124 80 GET http://perdu.com/ HTTP/1.0 HEAD http://perdu.com/ HTTP/1.0 --- ## Devenons le serveur **Activité** : créons un serveur qui donne l'heure avec netcat Notes: Pour faire un serveur qui donne l'heure. ``` while true; do echo -e "HTTP/1.1 200 OK\r\n$(date --rfc-email)\r\n\r\n
hello world from $(hostname) on $(date --rfc-email)
" | nc -vl 8090 -q 1 done ``` Puis faire des modifications dans le contenu pour voir les différences apparaître --- ## Quand on navigue ? **Activité** : de la recherche à la récupération d'une page, simulons les différentes étapes du fonctionnement d'Internet. Note: Activité : à faire ensemble. Au tableau. - Rôles : L'utilisateur, Le navigateur de l'utilisateur, Serveur HTTP google, Serveur DNS, Serveur HTTP du site cible --- ## La requête DNS en détail ![DNS](./images/dns.png) --- ## Résolvons des noms de domaine **Activité** : utilisons dig. Note: ``` dig baserow.com ``` # My Internet is rich --- ## Internet et économie - La bulle Internet - Web 2.0 - Le Cloud - Économie collaborative - Uberisation - l'IOT - Big data - Les GAFAM - L'essor du Nocode --- ## Comment gagnent-ils leur vie ? - Leboncoin - ~Leguide~ idealo - Cdiscount - Candycrush - Google - Facebook - Netflix - ... Note: - Activité : Réflexions. # Internet, ouvre toi ! --- ## Internet, la caverne d'Ali baba - Quels outils/services pouvez-vous trouver sur Internet ? - Une vraie caverne d’Ali Baba ![alibaba](./images/ali_baba.jpg) --- ## Allons dans la caverne **Activité** : découvrons les outils. Note: Activité : classer les liens selon le groupe. --- ## Quelques outils 1/2 - Les CMS - Les moteurs de wiki - Les services pour la création d’IHM - Les services de gestion de projet - Les plate-formes d’hébergement de code - Les outils de veille - Les moocs et tutoriels - Les services de partage et stockage de fichiers - ... --- ## Quelques outils 2/2 - ... - Les outils de nocode - Les outils collaboratifs - Hébergeurs et/ou registrar - Réseaux sociaux - Conférence Audio/video - Les frameworks front - Les frameworks back - Les bases de données # Collaborer avec les autres --- ## Le logiciel libre - Indispensable aujourd'hui - L'importance de la licence - Et des forges --- ## Et l'open data - [Grande opportunité](https://www.data.gouv.fr) - Peu exploité --- ## Les licences Il existe beaucoup de [licences](https://fr.wikipedia.org/wiki/Licence_de_logiciel) : - GPL like - BSD like - … --- ## Les forges logicielles - Gitlab - Github - Et les autres... [Sur wikipedia...](https://fr.wikipedia.org/wiki/Forge_%28informatique%29) --- ## À quoi servent-elles ? - Centraliser le code - Gérer les défauts - Gérer les versions - Collaborer - Gérer les tâches - Documenter --- ## Terminologie 1/2 - Issue - Milestone - Board - CI / CD - ... Notes: En français : - Tickets - Objectif / Version - Panneau - Intégration continue --- ## Terminologie 2/2 - ... - Fork - Workflow - MR/PR - Code review --- ## Comment les utiliser ? - Tout dépend du projet - Plusieurs workflows possibles --- ## Plusieurs acteurs - Les contributeurs - Les reviewers - Les responsables projet - Les responsables fonctionnel --- ## Proposition de workflow - S'attribuer une issue - Travailler sur son fork - Créer une PR quand le travail est terminé - Attendre la review - Répondre aux commentaires --- ## D'autres tâches - Trier / organiser les issues - Créer des issues - Commenter les issues - Écrire de la documentation - Faire des tutoriels vidéo - ... --- ## Contribuons **Activité** : contribuons à un projet sur [Github](https://github.com/jrmi/test-github-promo-2023-2024). Notes: - [Github] Créez votre compte - [Github] Créer une issue pour rajouter un fichier - [Github] S'attribuer l'issue - [Github] Créer un fork - [Terminal] Cloner le fork - [Terminal] Faire la modification (voir procédure git) et la pousser - [Github] Créer la Pull Request - [Github] Demander la validation Pour publier le changement: ``` sudo apt install git # Pour installer git git config --global user.name "
" git config --global user.email "
" git clone
git add
git commit -m "Ajout du fichier
" git push ``` --- # Pour la prochaine fois - [Une vidéo courte](https://www.youtube.com/watch?v=hwP7WQkmECE) - [Une video plus longue](https://www.youtube.com/watch?v=USjZcfj8yxE) - [Un playground](https://learngitbranching.js.org) --- # Des questions ?