Apprendre le développement web avec la communauté du Nexus du Web

Le Nexus du Web

Le Nexus du web a été créé par deux développeurs web titulaires d’un doctorat en informatique afin de rassembler une communauté de développeurs de tous niveaux pour les intégrer dans la conception, la réalisation puis la gestion de projets ayant un intérêt public. Nous pensons que tous ceux qui sont intéressés par le développement web trouveront ainsi un cadre permettant de parfaire leurs compétences tout en participant à des projets d’intérêt public.

Le principal projet actuellement géré par le Nexus du Web est un projet de journal-web libre appelé "l'Affranchi". Il s’agit d’un blog multi-auteurs avec possibilité de commenter les articles et une gestion participative de la sélection des articles. Cela permet de publier un journal-web où les journalistes sont totalement libres puisqu’ils n’ont nullement à suivre une ligne éditoriale préalablement définie.

Nous espérons que de nouveaux projets d’intérêt public démarreront prochainement.

Faut-il apprendre à programmer ?

Il faut bien évidemment apprendre à programmer pour développer des applications web. Il est malheureusement utile maintenant de le préciser tant nous sommes matraqués par des slogans, déconnectés de la réalité, sur les miracles accomplis par l’intelligence artificielle. L’expression « intelligence artificielle » est utilisée à tort et à travers au détriment du mot « informatique » qui tend à disparaître. S’il fallait croire tous ces discours, des sites web pourraient être développés, avec l’IA, à partir d’une simple description en langage naturel des fonctionnalités et du design du site. Bien sûr, les slogans de ce genre sont intéressés. Il s’agit toujours de vendre des produits présentés comme faisant des miracles. Les miracles ne se réalisent jamais, même quand vous avez payé pour les attendre. Avec un premier module, on vous donne la base de l’application (Bing ! Vous payez). Avec un second module, cela prend un peu forme (Bing ! Vous payez encore). Après quelques itérations, vous croyez posséder quelque chose, mais l’année suivante (re-bing !), il faut encore payer. À vrai dire, vous n’obtiendrez rien de satisfaisant ainsi. C’est impossible !

Faut-il se passer de l’Intelligence artificielle ?

S’il est vain d’attendre que l’IA dispense le développeur web d’un apprentissage, il est cependant certain que l’IA sera d’une grande utilité tout au long de cet apprentissage et aussi pour développer chaque projet. Il faut apprendre à utiliser les outils de l’IA sans attendre de miracle, mais en sachant que c’est une aide précieuse qui permet de gagner énormément de temps. Vous pouvez et vous devez d’emblée apprendre à décrire le site web que vous voulez réaliser et demander à une application d’IA de vous guider. Le très classique ChatGPT ou l'un de ses concurrents (Google Gemini, GitHub Copilot)  peut vous rendre ce service. Il faut apprendre aussi pour cela à lui poser les questions pertinentes. Mettez-vous d’emblée au travail avec ces seuls conseils et vous avancerez. En effet, pour construire une application web, il faut réfléchir avant à ses fonctionnalités, à son design… Le seul fait de commencer cette démarche avec une application d’IA vous fera progresser.

Comment mener à bien votre apprentissage ?

Vous voulez sans doute la liste des langages de programmation et autres langages formels que vous devrez découvrir. Il faudrait d’ailleurs y ajouter tous les autres outils dont vous aurez besoin, notamment pour manipuler une base de données. Il faudrait encore ajouter tous les frameworks utiles avec leurs divers plugins. Je peux le faire, mais cela risque fort de démoraliser ou de rebuter les débutants. Cela n’aurait d’ailleurs pas une grande signification. Quand j’étudiais l’informatique, nous plaisantions à propos de ceux qui mettent dans leur CV la liste des langages de programmation qu’ils maîtrisent. La prétendue maîtrise consiste souvent à être capable d’afficher « Hello world ! » avec un langage. Il faut assurément un peu plus que cela pour qu’un outil de programmation soit vraiment utile.

Je préfère répondre à la question : comment mener à bien cet apprentissage ? Voilà ma réponse :

Pour apprendre le développement web, il faut réaliser des sites web de plus en plus complexes. Vous avancerez alors en vous lançant des défis personnels et en les partageant. Cela vous motivera, car vous aurez à cœur, à chaque étape, de prouver que vous pouvez réaliser votre engagement. Vous progresserez d’un challenge à l’autre. En faisant cela, dans le cadre de la communauté que nous mettons en place avec le Nexus du Web, vous pourrez échanger et apprendre des autres tout en les inspirant.

Il faut vous lancer des défis réalisables. Il faudra commencer par des sites web simples. Nous distinguons, les simples sites web et les applications web sur ce critère : avec ou sans gestion d’une base de données sur le serveur. Les sites web simples ont pour fonction de donner des informations à ceux qui les consultent. Ces informations peuvent concerner une entreprise, une association, un service… Maitrisez d’abord la réalisation de site de ce type avant de vous lancer dans les applications web.

Concevez et réalisez vos premiers sites web

Vous ferez votre premier site web avec deux langages formels, l’HTML et le CSS (feuille de style). A cette étape, vous n'apprendrez pas le totalité de l'HTML car vous n'aurez pas à gérer les formulaires. Laissez donc de côté, momentanément, tout ce qui concerne les formulaires. Vous ferez un second site avec toujours l’HTML mais en prenant un framework de front-end c'est-à-dire un framework qui concerne essentiellement l'apparence du site, son désign, l'ergonomie. Il remplacera le recours au CSS. Actuellement, car cela évolue rapidement, il faudra prendre TailWindCSS complété par DaisyUI.

Vous serez déjà en mesure de faire un site web descriptif de bonne facture. 

Vous apprendrez ensuite quelques notions de Javascript. Le but sera d’en utiliser quelques éléments. Vous saurez chercher sur le web les scripts dont vous avez besoin. Vous apprendrez à les tester et à les intégrer à votre application. Vous pourrez par exemple proposer des rollovers (l’aspect d’un élément change quand le curseur de la souris passe dessus). Un autre exemple : vous pourrez proposer qu’une image s'agrandisse en cliquant dessus.

Jusqu’à ce point, votre site web aura quelques éléments dynamiques grâce au javascript mais il ne pourra pas être en relation avec une base de données.

Abordez la conception des applications web

Pour passer à des applications qui gèrent les bases de données, le pas à franchir est énorme. Vous ne pourrez pas maîtriser toutes les nouvelles notions nécessaires du jour au lendemain. Il vous sera cependant possible de faire une application web avec quelques recettes, c'est-à-dire en étant guidé par un enseignant compétent, mais sans nécessairement maîtriser tout ce que vous utiliserez. Ce sera par de multiples retours en arrière que vous complèterez vos connaissances jusqu’à parvenir à une totale maîtrise. Dans toute cette démarche, l’IA vous sera grandement utile. Elle viendra compléter ou remplacer ce qu’un enseignant peut vous apporter. À vous de poser les questions pertinentes et de savoir rebondir pour demander des compléments d’informations.

Vous commencerez par apprendre à gérer les formulaires avec du code HTML. C'est en effet avec des formulaires que des informations sont envoyées sur une base de données. Vous devrez avoir quelques notions sur les différents protocoles de communications (HTTP, HTTPS) et leurs méthodes de requêtes (principalement GET et POST). Cela est indispensable pour savoir gérer les échanges d'informations entre les utilisateurs et les serveurs. Plus tard, vos compétences, dans ce domaine s'étendront à connaître tout ce qui se passe depuis une requête HTTP jusqu'à l'affichage en retour dans le navigateur du client qui a envoyé cette requête. Vous saurez alors ce que sont les noms de domaine, les serveurs DNS, les serveurs web, la mise en cache, SLL... Vous devrez apprendre à concevoir et à gérer une base de données avec les tables et les relations. Cet apprentissage se fera, lui aussi, avec une progression. Votre première base de données n’aura qu’une table : les utilisateurs. Vous apprendrez à ajouter des colonnes (des champs) à cette table. Vous apprendrez alors à utiliser MySQL et PhpMyAdmin. Vous étudierez le langage d’interrogation de bases de données : SQL.

À cette étape, il faudra aussi découvrir sérieusement un vrai langage de programmation : le PHP. Il faudra que vous soyez guidé pour suivre une progression. Votre présence parmi notre communauté du web vous permettra de trouver tous les conseils et informations dont vous aurez besoin pour cela.

Votre première application se fera en deux temps. Vous reprendrez l’un de vos sites web de l’étape précédente et vous ajouterez la possibilité pour des utilisateurs de se connecter à votre application. Les utilisateurs connectés auront des accès supplémentaires par rapport aux simples visiteurs. Certaines informations ne pourront être vues que par eux. Dans un premier temps, vous ne ferez que la gestion des utilisateurs. Vous la ferez d’ailleurs en la complexifiant en plusieurs étapes. Il faudra d’emblée installer, avec un framework supplémentaire, toute l’authentification (inscription, connexion, déconnexion, changement du mot de passe…). Le choix du framework nécessaire pour cela est délicat. J'y consacrerai un article. Vous ajouterez la gestion des avatars (photos) puis des textes de présentation. Ainsi, chaque utilisateur pourra lire les renseignements sur les autres utilisateurs mais l'accès à ces renseignements pourra être limité aux utilisateurs inscrits..

Dans un deuxième temps, vous donnerez la possibilité aux utilisateurs de commenter vos pages web. Vous permettrez ainsi l’instauration d’un dialogue entre l’administrateur du site et les utilisateurs ou entre les utilisateurs. Vous introduirez pour cela deux autres tables dans votre base de données : les articles et les commentaires.

Pour faire tout cela, vous aurez besoin d’un framework de back-end. Ce sera, compte tenu de l’état de l’art actuel, Laravel.

Devenez un expert

Vous arriverez rapidement à réaliser un blog. Vous pourrez ensuite vous joindre à notre projet plus complexe en participant à la réalisation de l’Affranchi.

Jusqu’à maintenant, vous avez appliqué quelques recettes chaque fois que vous avez introduit de nouveaux types de données : les utilisateurs, les articles, les commentaires… Vous savez le faire mais cela n’est pas suffisant. Dans le même temps, vous avez progressé dans l’apprentissage du langage de programmation PHP. Vous avez abordé les concepts de la programmation objet.

Vous devez maintenant prendre du recul avec les concepts de modélisation des données en distinguant nettement le modèle objet et le modèle relationnel.

Pour que les données soient persistantes, il faut les sauver sur le disque dur de l’ordinateur. Elles sont alors organisées avec des tables selon le modèle relationnel. Vous utilisez pour cela un SGBDR (Système de Gestion de Bases de Données Relationnel). Nous avons choisi MYSQL associé à PhpMyAdmin.

Pour tous les calculs qui sont effectués sur l’ordinateur lors des sessions vous utilisez les concepts de la modélisation objet grâce au langage PHP.

Chaque fois que vous introduisez un nouveau type de données vous implantez un modèle objet et vous donnez, en même temps, à l’ensemble du logiciel, constitué pour une grande partie par votre framework (Laravel), la possibilité de traduire le modèle objet en modèle relationnel. Vous précisez le format de chaque table dans ce qu’on appelle une « migration ». Vous permettez ainsi que les données du modèle objet migrent vers le modèle relationnel. Vous n’avez rien d’autre à faire en ce qui concerne le modèle relationnel. La « traduction » dans les deux sens est assurée par un module de Laravel. Ce module a pour nom Eloquent. C’est un ORM (Objet-Relationnel Mapping). Il assure la traduction, entre la base de données relationnelles (Modèle relationnel) et le Modèle objet géré avec le langage de programmation orienté objet (PHP). Cela contribue à la sécurité des données qui sont ainsi séparées de toute la partie qui effectuent les calculs.

Vous maîtriserez d’autres grands principes qui contribuent à la sécurité de l’ensemble d’une application. Il s’agit, par divers cloisonnements, de compliquer la tâche des individus malveillants qui tenteraient d’accéder aux données. L’architecture logicielle MVC (Modèle Vue Contrôleur) est, de ce point de vue, un gage essentiel de sécurité. Je ne ferai pas ici un exposé sur cette architecture. C’est aussi un concept qu’il faut maîtriser pour devenir expert.

Pour suivre tout cet itinéraire, il vous sera grandement utile d’être intégré dans une communauté de développeurs web.

Perfectionnez-vous

L'apprentissage ne s'arrête jamais. Vous devrez toujours vous perfectionner. De plus, il faut sans arrêt suivre l'évolution des frameworks et autres outils sans crandre d'en changer. Vos techniques de travail évolueront en même temps que vous intégrerez de nouveaux outils. Être un développeur web expert est un métier qui garantit un salaire de l'ordre de 50 000 €. Il faut comparer avec les salaires des chercheurs en informatiques.

Je me permets à ce sujet une petite digression. Je me souviens qu'un directeur adjoint du CNRS, nommé Bernard Victorri, m'avez proposé un salaire de 1500€ par mois alors que j'avais un doctorat d'informatique et que j'étais le chercheur le plus compétent dans un domaine clef du TAL (Traitement Automatique des Langues) : "le calcul de la référence" ! Avec ce salaire dérisoire, cet individu pensait pouvoir s'approprier mes recherches. N'y parvenant pas, il s'est finalement renié, en expliquant que le TAL n'avait plus d'avenir. Il est maintenant ridiculisé, sa prophétie étant contredite par les performances des ChatBots-IA. Mais, toujours autant mégalo, il rédige, sans aucune honte, une page de Wikipédia à sa propre gloire et s'exhibe sur deux vidéos où il s'écoute parler en étant manifestement ravi de sa propre performance. Sur l'une d'elle il exhibe son reniement de prétendu chercheur en TAL et sur l'autre, qui est essentiellement un document sonore avec une introduction folklorique, il exhibe son reniement d'ex-"révolutionnaire-maoïste" devenu grand lèche-bottes réactionnaire. C'est assurément un imposteur qui se fait parfois passer pour un linguiste, parfois pour un informaticien alors qu'il n'a que des diplômes de mathématicien. Pour faire passer cette supercherie, il singe Platon ou Xénophon en se présentant comme "un élève de Culioli". Il ne peut tout de même pas prétendre être un disciple de Socrate ! Je ferme ici cette parenthèse qui, je le reconnais, m'a procuré un certain soulagement. Mon propos principal est de montrer que la compétence dans le développement web est récompensée par des salaires nettement plus élévés que ceux des chercheurs en informatique. Il ne faut cependant pas croire que cela s'obtient sans peine.

Vous devrez maitriser les meilleurs outils qui favorisent un travail d'équipe sans conflit, en particuler : Git et GitHub. Avec Git, chaque développeur a sa propre tâche et, grâce à l'utilisation de branches, il peut travailler sans interférence avec ses coéquipiers. Une fois la tâche terminée, il peut fusionner les nouvelles fonctionnalités avec la version principale de l'application (branche master). Il faudra introduire cet outil dans votre pratique, assez tôt dans votre progression, même si vous n'avez pas à travailler en équipe. Git vous permettra de garder un historique de votre travail et de sauvegardre votre code source dans un état que vous pourrez ensuite fusionner avec d'autres fonctionnalités que vous aurez développées en parallèle. En quelque sorte, vous collaborez avec vous-même en développant séparément plusieurs fonctionnalités d'une même application. Chacun des modules que vous avez développés séparément sera traité par Git comme s'ils avaient été conçus et réalisés par des développeurs différents. Git vous sera aussi grandement utile au moment où vous voudrez déployer votre application c'est-à-dire l'installer sur un serveur web afin qu'elle soit accessible sur internet.

Vous devrez aussi apprendre à utiliser Heroku pour simplifier la phase du déploiement des applications en automatisant de nombreuses tâches, telles que la configuration du serveur, la gestion des bases de données et la mise à l’échelle automatique de l’application en fonction du trafic. Heroku permet de faire évoluer facilement en puissance et en capacité les bases de données. Vous devrez ajouter JawsDB pour que Heroku puisse gérer une base de données avec MySQL. Heroku s’intègre facilement avec Git et GitHub. Il offre une variété d’add-ons et de microservices prêts à l’emploi (système de cache, stockage, notifications, logging, …) qui peuvent être facilement intégrés à l’application pour ajouter des fonctionnalités telles que la surveillance, la sécurité, les services de messagerie.

Vous devrez aussi apprendre à développer en commençant chaque étape par la mise en place d'une batterie de test. Il faudra maîtriser pour cela un nouvel outil comme Pest. Il s'agit d'écrire à l'avance ce que vous voulez que fasse votre application à l'issue d'une étape de développement. Vous décrivez ce que sera la sollicitation de l'utilisateur et ce que vous attendez en réponse comme comportement de votre application. Les tests sont ainsi automatisés et s’assurent que chaque unité fonctionne comme prévu, que chaque fonction renvoie les résultats attendus. Vous n'aurez plus à tester systématiquement le fonctionnement "à la main" de chaque étape du développement. Vous lancez une batterie de test et celle-ci vous signale, selon le cas, que le test est réussi (commentaire en vert), que le test n'a pas pu être effectué (commentaaire en orange) ou que le test a échoué (commentaire en rouge).

La maîtrise des bons outils changent complètement la méthode de développement. Un programmeur de haut niveau n'a pas la même conception de son travail qu'un débutant.

Rejoignez le Nexus du Web

Le Nexus du Web, c’est une communauté ouverte à tous ceux qui veulent apprendre, créer, coder et partager autour du développement web. Que vous soyez débutant, ou déjà à l’aise avec quelques outils, vous trouverez ici un cadre motivant pour progresser en construisant de vrais projets.

Nous avons indiqué quels sont les frameworks que nous avons choisi. La communauté du Nexus du Web mènera une veille technologique pour remettre ces choix en question au fur et à mesure des évolutions. Nous choisissons aujourd’hui TaiwindCSS, auquel nous ajoutons DaisyUI, comme framework de front-end. Trois ans auparavant nous aurions opté pour Bootstrap. Nous choisissons Laravel comme framework principal de back-end. Quelques temps auparavant, nous aurions hésité à faire ce choix. Nous aurions pu opter pour Django ou Ruby on Rails qui restent populaires. Pour les applications en une seule page Réact et VueJS sont aussi appréciés mais il nous semble préférable de nous en tenir à nos frameworks pour toutes les applications. Il faut aussi choisir un outil supplémentaire (starter kit) pour l'authentification. Laravel offre trois options : Laravel seul, Laravel avec Breeze ou Laravel avec Jetstream. Nous choisissons Jetstream qui est le plus performant mais nous savons que ce choix entraine de nombreuses difficultés et que nous sommes probablement une minorité à nous en tenir à cette option. C'est la solution qui offre un maximum de sécurité avec notamment la possibilité de faire une authentification à deux facteurs et la gestion des sessions. Il est possible, en prenant l'option Jetstream, de proposer la fermeture de toutes les sessions ouvertes par un utilisateur y compris quand elles sont ouvertes sur plusieurs ordinateurs.

Notre ambition est simple : apprendre ensemble en concevant et en réalisant. Pas à pas, chacun peut avancer, aider les autres, recevoir des conseils, partager ses réussites comme ses erreurs, et participer à des projets concrets, utiles et porteurs de sens.

En tant que bénévole ou stagiaire, vous aurez l’opportunité de participer à la création d’applications web innovantes en vous impliquant dans des projets numériques collectifs à fort impact social.

Vous progresserez dans un contexte de travail à distance et d’intelligence collective.

Vous n’êtes pas seul : le Nexus du Web est là pour vous accompagner dans votre apprentissage, avec bienveillance et exigence. Ensemble, nous allons plus loin. Rejoignez-nous dès maintenant et faites partie de cette aventure collective.