Personne ne te dit ÇA avant d'utiliser Claude Code et Codex

Pour exceller avec des outils comme Claude et Codex en développement, il est essentiel de maîtriser certaines connaissances de base. Cette vidéo se propose de les présenter pour améliorer significativement votre niveau. **1. Comprendre le Terminal** Le terminal est une interface textuelle pour interagir avec l'ordinateur, sans souris. Il exécute des commandes. Par exemple, pour naviguer dans un dossier, on utilise `cd` (change directory). `cd Documents` permet d'accéder au dossier "Documents". Le terminal est plus rapide et précis une fois l'habitude prise, et Claude ou Codex peuvent aider à écrire ces commandes. **2. Arborescence des Dossiers et Fichiers** La structure des projets est organisée en dossiers (bleus) et fichiers (blancs). Chaque fichier a un chemin unique. - Les dossiers contiennent d'autres fichiers ou dossiers. - Les fichiers sont des éléments individuels, comme `index.js` ou `utils.js`. - `package.json` est un fichier de configuration du projet (nom, version, commandes). - `.env` est crucial pour la sécurité ; il contient les informations sensibles comme les mots de passe et clés API (ex: Stripe), qui ne doivent jamais être exposées. **3. Commandes Essentielles du Terminal** - `pwd` (print working directory) : affiche l'emplacement actuel dans l'arborescence. - `ls` (list) : affiche les fichiers et dossiers du répertoire courant. `ls -a` montre plus d'informations et les fichiers cachés (ceux qui commencent par un point). - `cd` (change directory) : permet de changer de répertoire. `cd src` pour aller dans le dossier `src`, `cd ..` pour remonter d'un niveau. - `mkdir` (make directory) : crée un nouveau répertoire. `mkdir composants` crée un dossier "composants". - `rm` (remove) : supprime des fichiers. Attention, cette commande est destructive. `rm readme.md` supprime le fichier `readme.md`. **4. Poste de Travail et Node.js** Pour coder avec Cloud Code ou Codex, vous utiliserez le terminal pour les commandes et **Node.js** comme moteur pour exécuter le projet sur votre machine. Node.js permet d'exécuter du JavaScript en dehors du navigateur et est indispensable. Il est gratuit et doit être installé. **5. Anatomie d'un Projet Typique** Un projet est un dossier avec une structure conventionnelle : - `src` : contient le code source du projet. C'est le cœur de l'application. - `node_modules` : contient les dépendances du projet (bouts de code gratuits développés par d'autres). On n'y touche pas manuellement. - `package.json` : liste le nom du projet et ses dépendances. Il indique les morceaux de code externes dont le projet dépend. - `.env` : fichier très important pour la sécurité, contenant les clés secrètes (clés API, mots de passe). Il ne doit jamais être partagé publiquement. **6. Développement Local vs. Production** - **Local** : le code s'exécute sur votre ordinateur, accessible via `localhost` (souvent sur le port 3000). C'est un environnement sûr pour développer sans risque, car votre code n'est pas public. - **Production** : une fois l'application terminée, elle est déployée sur un serveur en ligne, accessible à tous via une adresse web réelle (ex: `monsite.com`). C'est l'étape de déploiement. **7. Contrôle de Version avec Git** Git est un système de contrôle de version essentiel pour la gestion de projets. - **Commit** : C'est une "photo" de l'état actuel du projet à un instant T, accompagnée d'un commentaire descriptif. Chaque commit est un point de restauration. - **Historique** : Git ne sauvegarde pas des fichiers, mais des états. Cela permet de revenir facilement à une version antérieure du projet en cas de problème. - **Repository local et distant** : Le repository est le projet avec tout son historique Git. Il peut être en local (sur votre ordinateur) ou distant (sur une plateforme comme GitHub). GitHub permet de sauvegarder votre projet en ligne, protégeant votre travail en cas de perte de votre machine. - **Zones de Git** : 1. **Working directory** : l'état actuel des fichiers sur votre machine. 2. **Staging area** : une zone où vous sélectionnez les fichiers que vous souhaitez inclure dans le prochain commit (`git add`). 3. **Repository local** : où les commits sont enregistrés. - **Fichier `.gitignore`** : Liste les fichiers et dossiers que Git doit ignorer et ne jamais versionner (ex: `.env`, `node_modules`). C'est crucial pour la sécurité et pour éviter de versionner des fichiers trop lourds ou temporaires. - **`git log`** : Affiche l'historique des commits dans le terminal. - **Branches** : Des copies indépendantes du code (univers parallèles) où l'on peut expérimenter sans affecter la version principale. Une fois les changements prêts, on les fusionne (`merge`) dans la branche principale (souvent appelée `main`). - **`git push` et `git pull`** : `git push` envoie les modifications du repository local vers le repository distant (GitHub). `git pull` récupère les modifications du repository distant vers le local. - **GitHub** : Plus qu'un simple cloud de stockage, c'est une plateforme de collaboration avec historique, revue de code, gestion de projet. - **Pull Request (PR)** : Une proposition de changement sur GitHub, souvent issue d'une branche séparée. Elle permet à d'autres développeurs de relire, commenter et valider les modifications avant de les fusionner dans la branche principale. Cloud Code et Codex peuvent automatiser la création de branches et de PR. **8. Fonctionnement d'une Application (Architecture en Couches)** Une application est un millefeuille de couches : - **Utilisateur/Navigateur** : L'interface avec laquelle l'utilisateur interagit. - **Frontend** : L'aspect visuel de l'application (ce que l'on voit dans le navigateur). Il est construit avec HTML, CSS et JavaScript. - **HTML** : Définit la structure et le contenu (titres, paragraphes, boutons). - **CSS** : Améliore le design (couleurs, polices, mise en page). Tailwind CSS est un framework populaire pour styliser rapidement. - **JavaScript** : Ajoute de l'interactivité. - **Backend** : Le "cerveau invisible" qui tourne sur un serveur. Il contient la logique métier (règles, calculs, sécurité), reçoit les requêtes du frontend et interagit avec la base de données. - **Base de données (BDD)** : Stocke les informations de manière persistante (utilisateurs, commandes, messages). Une BDD est comme un classeur Excel : chaque feuille est une table (ex: clients, produits), chaque ligne est un enregistrement (un client), et chaque colonne est un champ (nom, email). Les tables peuvent être liées par des "clés étrangères". Les opérations courantes sont `SELECT` (lire), `INSERT` (ajouter), `UPDATE` (modifier), `DELETE` (supprimer). Un ORM (Object-Relational Mapping) comme Prisma simplifie l'interaction avec la BDD en utilisant JavaScript au lieu du SQL brut. - **Services externes** : Des services tiers intégrés via des API (ex: Stripe pour les paiements, Resend pour les emails, Supabase/PostgreSQL pour les BDD, Vercel pour le déploiement, Cloudflare pour le stockage de fichiers). **9. Authentification** C'est le mécanisme qui permet à l'application de savoir qui est connecté et de protéger les données. - L'utilisateur saisit son email et mot de passe. - Le frontend envoie ces identifiants au backend. - Le backend vérifie en base de données. - Si correct, le backend génère un **token JWT** (JSON Web Token) qui prouve l'identité de l'utilisateur. - Un **cookie** est souvent créé et envoyé au navigateur pour maintenir la session de l'utilisateur (fonctionnalité "se souvenir de moi"). **10. API et Secrets** - **API (Application Programming Interface)** : C'est une interface standardisée qui permet à deux programmes de communiquer. C'est comme un serveur de restaurant qui prend votre commande (requête) et la transmet à la cuisine (service externe), puis vous ramène le plat (réponse). - **Clés API** : Des identifiants uniques fournis par les services externes pour s'identifier. Elles sont ultra-sensibles et doivent être stockées dans le fichier `.env` et jamais sur GitHub. - **Format JSON** : Un format texte structuré couramment utilisé pour échanger des données entre services via des API. - **Webhooks** : À l'inverse d'une API où votre application appelle le service, un webhook est le service qui appelle votre application. Par exemple, Stripe peut notifier votre backend via un webhook quand un paiement réussit ou échoue, permettant une réaction en temps réel sans avoir à "demander en boucle" (polling) via une API. C'est plus efficace et moins coûteux. **11. NPM et PNPM** - **Packages** : Des bouts de code écrits par d'autres développeurs, prêts à l'emploi. Ils permettent de ne pas réinventer la roue (ex: React, Prisma). - **`package.json`** : Fichier d'identité du projet qui liste les dépendances (les packages nécessaires au projet). - **Gestionnaires de packages** : NPM, Yarn, PNPM sont des outils pour gérer ces dépendances (installer, mettre à jour, supprimer). `npm install` (ou `pnpm install`) télécharge tous les packages listés dans `package.json` et les place dans le dossier `node_modules`. - **`node_modules`** : Ce dossier est énorme et ne doit pas être versionné sur GitHub (il est ajouté au `.gitignore`). - **PNPM** : Recommandé pour sa rapidité, son économie d'espace et sa meilleure sécurité contre les attaques de chaîne d'approvisionnement. **12. Gestion des Erreurs** Les erreurs sont des messages qui indiquent ce qu'il faut corriger. Il est crucial d'apprendre à les lire et à comprendre ce qu'elles signifient. Cloud Code ou Codex peuvent aider à les interpréter. **13. Déploiement** C'est le processus de rendre votre application accessible au public, en la passant du développement local à un serveur en ligne. - **Vercel** : Un outil moderne et souvent gratuit pour le déploiement de frontends et d'applications full-stack. Il est facile à utiliser et s'intègre bien avec Git. - **Workflow de déploiement** : 1. Commits en local. 2. Push du code sur GitHub. 3. Connexion à Vercel (ou autre service de déploiement) qui détecte les changements. 4. Installation automatique des packages. 5. Build (construction) du site. 6. Déploiement automatique en production. - **Variables d'environnement** : Les secrets (clés API) sont configurés directement dans l'outil de déploiement (ex: Vercel) et non dans le code source sur GitHub, assurant leur sécurité. - **Nom de domaine** : Après le déploiement, vous pouvez acheter un nom de domaine personnalisé pour votre application (ex: `monsite.com` au lieu de `monsite.vercel.app`). Ces connaissances fondamentales permettent de développer des applications plus efficacement et en toute sécurité, en comprenant les actions des outils d'IA comme Claude et Codex.