> ## Documentation Index > Fetch the complete documentation index at: https://docs.arkatech.fr/llms.txt > Use this file to discover all available pages before exploring further. # Installation de l'environnement Ce guide a pour objectif d'aligner l'environnement de travail de toute l'équipe pour le TP. Nous allons installer les outils nécessaires, configurer **Node.js (LTS)** avec **npm**, installer les extensions indispensables pour **WebStorm**, et initialiser nos configurations sur **Apidog**. *** # 1. Les Outils Principaux : Utilité et Installation ## 🖥️ WebStorm (IDE Frontend & API) **Utilité :** C'est un environnement de développement intégré (IDE) ultra-complet de JetBrains, spécialisé dans l'écosystème JavaScript/TypeScript. Il offre une autocomplétion intelligente, une gestion de Git intégrée et un terminal performant. * **Fonctionnement :** Il analyse le code en temps réel pour détecter les erreurs, formater le code selon les bonnes pratiques et automatiser les refactorisations (renommage de variables, imports automatiques). * **Téléchargement :** [Télécharger WebStorm](https://www.jetbrains.com/fr-fr/webstorm/download) *💡 Astuce : Au premier lancement, choisissez l'option* *"Non-commercial use"* (Usage non-commercial) pour l'utiliser gratuitement. ### 🗄️ DataGrip (Gestionnaire de Base de Données) * **Utilité :** C'est l'outil de JetBrains dédié aux bases de données. Il permet de se connecter à PostgreSQL, d'explorer les tables, d'exécuter des requêtes SQL et de visualiser les données graphiquement. * **Fonctionnement :** Il se connecte via un driver à votre conteneur PostgreSQL local ou distant et fournit une interface visuelle pour administrer la base sans taper de lignes de commande complexes. * **Téléchargement :** [Télécharger DataGrip](https://www.jetbrains.com/fr-fr/datagrip/download) *💡 Astuce : Tout comme WebStorm, cochez* *"Non-commercial use"* au démarrage pour bénéficier de la gratuité. ### 🐳 Docker Desktop (Conteneurisation) * **Utilité :** Permet de lancer des applications et services (comme notre base PostgreSQL) dans des environnements isolés appelés "conteneurs". Cela évite d'avoir à installer PostgreSQL "en dur" sur vos machines et garantit que tout le monde a exactement la même version. * **Fonctionnement :** Il lit un fichier de configuration `docker-compose.yml`) et télécharge une image officielle (ex: Postgres 16) pour l'exécuter instantanément en tâche de fond. * **Téléchargement :** [Télécharger Docker Desktop](https://www.docker.com/products/docker-desktop) ### 🐕 Apidog (Requêtes et Documentation API) * **Utilité :** Outil tout-en-un pour concevoir, tester et documenter les APIs. Il remplace avantageusement Postman en intégrant nativement la génération de documentation et le mock de données. * **Fonctionnement :** Il envoie des requêtes HTTP (GET, POST, etc.) vers votre serveur NestJS local et affiche la réponse (JSON, codes de statut) de manière structurée. * **Téléchargement :** [Télécharger Apidog](https://apidog.com) *** ## 📦 2. Tutoriel : Installation de Node.js (LTS) et NPM Pour éviter les conflits de versions entre collègues, nous installons la version **Node.js LTS (Long Term Support)**. ### 🪟 Méthode pour Windows (Via NVM-Windows) Il est fortement déconseillé d'installer Node via le site officiel directement, car changer de version plus tard devient complexe. Nous utilisons **NVM** (Node Version Manager). 1. **Télécharger NVM :** Allez sur le [GitHub de nvm-windows](https://github.com/coreybutler/nvm-windows/releases), téléchargez le fichier `nvm-setup.exe` (de la dernière version) et installez-le. 2. **Ouvrir un terminal** (PowerShell ou Invite de commandes) **en mode Administrateur**. 3. **Installer Node LTS :** Tapez la commande suivante pour installer la version LTS actuelle : ```bash theme={null} nvm install lts ``` 4. **Activer la version :** ```bash theme={null} nvm use lts ``` 5. **Vérifier l'installation :** ```bash theme={null} node -v npm -v ``` ### 🐧 Méthode pour Linux (Ubuntu / Debian / Mint) Sur Linux, nous utilisons également `nvm` pour éviter d'utiliser `sudo` avec npm, ce qui casse souvent les permissions. 1. **Installer NVM :** Ouvrez votre terminal et exécutez le script d'installation officiel : ```bash theme={null} curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh) | bash ``` 2. **Recharger le terminal :** Fermez et réouvrez votre terminal, ou tapez : ```bash theme={null} source ~/.bashrc ``` 3. **Installer Node LTS :** ```bash theme={null} nvm install --lts ``` 4. **Vérifier l'installation :** ```bash theme={null} node -v npm -v ``` *** ## 🔌 3. Plugins WebStorm Indispensables Pour installer un plugin dans WebStorm : `Settings/Preferences` (Ctrl+Alt+S) -> `Plugins` -> Onglet `Marketplace` -> Chercher le plugin -> `Install`. | Nom du Plugin | Utilité / Pourquoi l'installer ? | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Prettier** | **Indispensable pour le code propre.** Il reformate automatiquement votre code (indentation, points-virgules, guillemets) à chaque sauvegarde. Tout le monde aura ainsi exactement le même style de code. | | **Docker** | Permet de gérer vos conteneurs Docker (les allumer, les éteindre, voir les logs de la base Postgres) directement depuis un onglet dans WebStorm, sans ouvrir l'application Docker Desktop. | | **Dotenv (...)** | Ajoute la coloration syntaxique et l'autocomplétion pour les fichiers `.env` (où nous stockerons les identifiants de la base de données). | | **NestJS Toolkit** | Ajoute des raccourcis et facilite la navigation entre les modules, contrôleurs et services spécifiques à l'architecture NestJS. | *** ## 🚀 4. Premières Configurations : Premier appel API avec Apidog Une fois que notre projet NestJS tourne en local (généralement sur le port `3000`), voici comment configurer Apidog pour tester le point d'accès (endpoint) "Hello World". ### Étape 1 : Créer un projet dans Apidog 1. Ouvrez Apidog et connectez-vous (ou utilisez le mode invité). 2. Cliquez sur **"New Project"**. 3. Nommez-le (ex: `TP Fullstack`) et choisissez le type **HTTP**. ### Étape 2 : Configurer l'Environnement (Bonne pratique) Au lieu d'écrire `http://localhost:3000` manuellement dans chaque requête, on crée une variable d'environnement : 1. En haut à droite, cliquez sur l'icône d'engrenage ou sur le menu déroulant des environnements (par défaut **"No Environment"**). 2. Cliquez sur **"Manage Environments"** -> **"New Environment"**. 3. Nommez-le `Local`. 4. Dans la section **Base URL**, ajoutez une ligne : * Name : `Général` (ou laissez vide pour l'URL par défaut) * URL : `http://localhost:3000` 5. Cliquez sur **Save**. Sélectionnez ensuite `Local` dans le menu déroulant en haut à droite. ### Étape 3 : Créer et exécuter la première requête API 1. Dans la barre latérale gauche, cliquez sur le bouton **"+"** à côté de *API* puis sur **"New API"**. 2. **Configuration de la requête :** * Méthode HTTP : **GET** (dans le menu déroulant). * URL : Tapez simplement `/` (Apidog va automatiquement préfixer avec l'URL de votre environnement local, ce qui donnera `http://localhost:3000/`). * Nom de la requête : Changez "New API" en `Hello World`. 3. **Tester :** Cliquez sur l'onglet **"Run"** (ou le bouton bleu **Send**). 4. **Résultat :** Dans la partie inférieure (*Response*), vous devriez voir le statut `200 OK` et le texte renvoyé par NestJS : `"Hello World!"`.