Pourquoi ce cours

Séance 1 · ~15 min

Les slides du chapitre (PDF)PDF

• Situer ce cours entre 5XCOS et le stage, et dire ce que vous saurez faire en sortant.
• Nommer les quatre projets du cours dans leur ordre, et ce que chacun ajoute au précédent.
• Appliquer les règles du cours : quand vous bloquez, ce que vous remettez, comment vous utilisez l'IA.

Bienvenue. Il y a deux semaines, vous terminiez 5XCOS : vous aviez appris à faire parler un serveur, avec des routes, des contrôleurs, des modèles, et des pages que Laravel assemblait avant de les envoyer au navigateur. Dans ce cours, vous allez apprendre à faire répondre l'écran. Vous connaissez ces sites qui changent sous la souris sans jamais recharger, où la liste se filtre pendant que vous tapez, où la page suivante arrive sans clignotement : c'est ce que vous saurez construire en janvier, avec les outils Laravel que vous venez d'apprendre, plus Vue et Inertia.

Et vous ne le ferez pas sur un exemple inventé. Le premier projet est votre propre portfolio, le site que vous enverrez pour décrocher un stage. Il sera en ligne à la fin du mois de novembre, à votre nom, avec vos projets dedans. Les trois projets suivants viendront s'y ranger. Ce chapitre dit d'où vous partez, où vous arrivez, par quelles étapes, et avec quelles règles du jeu. Quinze minutes, puis on construit.

1. D'où vous partez, où vous arrivez#

Vous arrivez de 5XCOS avec une application Laravel écrite en Blade. Vous savez déclarer des routes, écrire des contrôleurs, des modèles et leurs relations, des migrations et des formulaires validés. Vous avez mis une page en forme avec Tailwind CSS, écrit des tests Pest et mis un projet en ligne chez OVH. Le serveur fabrique tout le HTML, et le navigateur recharge la page entière à chaque clic.

En sortant, vous saurez construire une application complète avec Laravel, Inertia et Vue. Vue est un framework JavaScript, c'est-à-dire un ensemble d'outils qui impose une façon d'organiser le code. Vue construit l'interface dans le navigateur à partir de composants, des fichiers qui regroupent le HTML et le JavaScript d'un morceau de page. Inertia est une bibliothèque qui relie vos contrôleurs Laravel à ces composants : le contrôleur reste en PHP, la page s'écrit en Vue. Votre application aura des comptes protégés et des tests. Elle sera en ligne, livrée à un client et présentée à l'oral.

Ce cours vient après 5XCOS et avant votre stage. Le premier projet est votre portfolio, le site qui dit qui vous êtes et montre ce que vous avez construit. Vous l'enverrez pour demander un stage, puis un emploi. Les projets suivants s'y ajouteront.

2. Les quatre temps#

Le cours se découpe en quatre temps. Chaque temps a son projet et se termine par une remise.

1. Le portfolio, seul, en cinq séances. Vous construisez un back-office, la partie protégée du site où vous encodez vos projets, et les pages publiques qui les montrent.
2. Le Tamagotchi troué, seul, en quatre séances. Vous recevez une application complète, avec des comptes, mais pleine de failles, des erreurs qui laissent un visiteur faire ce qu'il ne devrait pas. Des tests rouges, des tests qui échouent, signalent ce qui ne va pas. Vous corrigez les failles, vous ajoutez des fonctionnalités et vous la mettez en ligne.
3. Une application de gestion de l'école, en binôme, en sept séances. Vous choisissez un sujet parmi cinq. Vous rédigez un cahier des charges, le document qui liste ce que l'application doit faire avec un critère pour chaque besoin. Le professeur joue le client et valide ce cahier des charges avant que vous écriviez du code. Vous travaillez à deux sur un même dépôt, et chaque modification est relue par l'autre.
4. Le clone GPT, seul, en sept séances et l'oral. Vous construisez une application de discussion branchée sur un modèle de langage, le programme qui rédige les réponses de ChatGPT ou de Claude. Ce projet est l'examen.

L'ordre ajoute une difficulté à la fois. Le portfolio n'a qu'un auteur et du contenu à publier : vous apprenez Inertia et Vue sans gérer d'autres utilisateurs. Le Tamagotchi ajoute des comptes, donc des failles, puisque chaque joueur ne doit voir et modifier que ce qui lui appartient. Le binôme ajoute une équipe et un client, avec un dépôt partagé et un besoin à négocier. Le clone GPT réunit tout et y ajoute un modèle de langage. C'est le seul projet dont l'application appelle un modèle.

3. Fourni, montré, fait seul#

Dans chaque temps, une partie du travail vous est fournie, une autre vous est montrée une fois, et le reste, vous le faites seuls. D'un temps à l'autre, la part fournie diminue et la part que vous faites seuls augmente.

Le kit est le projet de départ que laravel new crée avec Vue, déjà équipé de la connexion et d'une trentaine de composants. Un gabarit est un document à compléter.

Temps	Fourni	Montré une fois	Fait seul
1. Portfolio	le kit, la grille d'analyse, les gabarits du cahier des charges, de la fiche projet et de la planche de direction artistique, l'éditeur de texte riche, le guide de mise en ligne	installer le kit et afficher une page, la connexion, le formulaire de création, l'envoi d'une image, les premiers tests, le formulaire de contact, la mise en ligne	l'analyse de portfolios, le cahier des charges, la modification et la suppression, la direction artistique, la page publique
2. Tamagotchi	l'application entière et ses tests rouges	la première faille, corrigée de bout en bout	les autres failles, les fonctionnalités ajoutées, la mise en ligne
3. Binôme	cinq sujets, un projet de départ configuré mais vide, le gabarit du cahier des charges	le travail à deux sur un même dépôt, la relecture d'une modification de l'autre	le cahier des charges, l'estimation, l'application, l'accessibilité et le cadre légal d'une page publique, le README
4. Clone GPT	le code qui affiche la réponse au fur et à mesure qu'elle arrive	l'appel au modèle de langage, l'affichage de sa réponse mise en forme	tout le reste : le cahier des charges, l'interface de discussion, la mise en ligne, le rapport, l'oral

4. Une séance#

Une séance dure quatre heures. Elle commence par un peu de théorie : un chapitre court, présenté avec son exemple. Vous travaillez ensuite sur votre projet, avec les critères du chapitre sous les yeux, et le professeur passe entre les postes. Après chaque remise, une séance s'ouvre sur un retour collectif : ce qui revient d'un projet à l'autre, et ce qui manquait.

5. Quand vous bloquez#

Montrez ce que vous avez essayé : le code, la commande lancée et le message d'erreur exact. Vous recevez d'abord une piste, par exemple le fichier à ouvrir ou la question à vous poser. Si la piste ne suffit pas après un vrai essai, vous recevez la solution, expliquée pas à pas. N'attendez pas la fin de la séance pour montrer un blocage qui dure.

6. Les règles du cours#

Le kit tel quel, du JavaScript dans vos composants. Le kit est écrit en TypeScript, un JavaScript auquel on ajoute des types. Vous ne le réécrivez pas. Dans les pages et les composants que vous ajoutez, vous écrivez du JavaScript, le langage que vous connaissez déjà.

OVH. Chaque projet est mis en ligne dans votre dossier chez OVH. C'est un hébergement mutualisé, un serveur partagé entre de nombreux sites, le même que celui de 5XCOS.

Un README installable. Le README est le fichier placé à la racine du dépôt qui présente le projet. Le vôtre donne les commandes qui installent le projet sur une machine neuve, et une autre personne doit pouvoir les suivre sans vous poser de question. Dans le temps 3, un autre binôme installe votre projet à partir de votre README.

L'IA, permise et déclarée. Les assistants sont permis : une IA à qui vous parlez et qui répond, dans un chat comme ChatGPT ou Claude, ou dans l'éditeur, comme l'autocomplétion de VS Code ou de Copilot. C'est vous qui écrivez dans vos fichiers. Les agents de code, les programmes qui écrivent eux-mêmes dans votre projet et lancent des commandes à votre place, ne le sont pas. Un agent en lecture seule, qui lit votre projet pour répondre à vos questions sans rien y changer, est permis. Tout ce qui est permis est déclaré : vous tenez un carnet IA du premier au dernier projet, et vous joignez à chaque remise une déclaration d'usage, qui dit quels outils vous avez utilisés et pour quelles tâches.

Le carnet IA reçoit au moins une entrée par temps. Chaque entrée note l'outil, ce que vous lui avez demandé, ce que vous avez gardé de sa réponse et comment vous l'avez vérifié. Un test lancé, une page de documentation lue ou la page ouverte dans le navigateur sont des vérifications. Si vous n'avez utilisé aucun outil pendant un temps, l'entrée le dit en une ligne. Le gabarit du carnet : Carnet IA (Word)DOCX ou PDFPDF, trois pages, une par paire de temps.

Chaque ligne remise doit pouvoir être expliquée. Pour chaque ligne de votre code, vous savez dire ce qu'elle fait et pourquoi elle est là. Si ce n'est pas le cas, comprenez-la ou retirez-la avant la remise. À l'oral de l'examen, les questions portent sur votre propre code.

7. L'évaluation#

Les trois premiers projets reçoivent une note à leur remise, chacun avec sa grille. Cette note vous dit où vous en êtes, et elle ne compte pas dans la note finale. La note du cours est celle de l'examen : le clone GPT, remis avec un rapport et présenté à un oral, et l'oral occupe la dernière séance.

À retenir#

• Le cours compte quatre projets : le portfolio, le Tamagotchi troué, l'application du binôme et le clone GPT.
• D'un temps à l'autre, la part fournie diminue et la part faite seuls augmente.
• Quand vous bloquez, montrez le code, la commande et le message d'erreur exact.
• Les assistants sont permis et déclarés, dans le chat comme dans l'éditeur ; les agents de code ne le sont pas, sauf en lecture seule.
• Vous savez expliquer chaque ligne que vous remettez.