> ## Documentation Index > Fetch the complete documentation index at: https://support.labex.io/llms.txt > Use this file to discover all available pages before exploring further. # Interface WebIDE LabEx VM > Le WebIDE LabEx fournit un environnement de développement moderne, semblable à VS Code, pour les tâches de codage. Construit sur Ubuntu 22.04, il offre une interface familière pour écrire, compiler et exécuter du code dans plusieurs langages de programmation. ## Aperçu de WebIDE Aperçu de WebIDE L'environnement WebIDE est particulièrement utile pour : 1. Écrire et déboguer du code dans divers langages de programmation (Java, JavaScript, Python, etc.) 2. Projets de développement Web avec des capacités d'aperçu en direct, voir [Créez votre première page HTML dans WebIDE ](https://labex.io/tutorials/html-create-your-first-html-page-in-webide-451041) 3. Gestion des fichiers et des répertoires de projet via une interface intuitive 4. Opérations de terminal intégrées pour les tâches en ligne de commande ## Disposition de l'environnement L'interface WebIDE se compose de plusieurs composants clés : 1. Barre latérale gauche : * Explorateur de fichiers pour la navigation dans le projet * Fonction de recherche * Contrôle de source pour les opérations Git * Panneau des extensions 2. Zone de l'éditeur : Espace de travail de codage principal 3. Panneau inférieur : Terminal, problèmes et sortie 4. Barre d'état : Accès rapide aux paramètres et à l'aperçu en direct 5. Barre de menu supérieure : Fichier, Modifier, Afficher et autres options ## Accès au terminal Vous pouvez ouvrir le terminal de deux manières : 1. Cliquez sur l'icône dans le coin inférieur gauche et passez à l'onglet Terminal ; Accès au terminal 2. Utilisez le menu supérieur : Terminal > Nouveau terminal Accès au terminal ## Aperçu HTML Pour prévisualiser votre fichier HTML : 1. Dans le WebIDE, cliquez sur le bouton "Go Live" dans le coin inférieur droit. Bouton Go Live dans WebIDE 2. Un nouvel onglet de navigateur s'ouvrira avec votre page HTML rendue. Page HTML rendue dans l'onglet du navigateur 3. Ou, vous pouvez cliquer sur l'onglet "Web 8080" pour ouvrir l'aperçu. Aperçu de l'onglet Web 8080 de WebIDE 4. Si votre projet se trouve dans un sous-répertoire, vous pouvez y accéder en cliquant sur le nom du sous-répertoire dans l'explorateur, puis il prévisualisera automatiquement le fichier `index.html` dans ce répertoire. Aperçu du sous-répertoire WebIDE 5. Si votre projet contient plusieurs fichiers HTML, y compris `index.html`, vous pouvez ajouter le nom du fichier à l'URL pour le prévisualiser directement. Par exemple, `https://xxx.labex.io/another-file.html`. Aperçu de plusieurs fichiers HTML WebIDE 6. Vous pouvez ouvrir l'aperçu dans un nouvel onglet en cliquant sur le bouton "Ouvrir dans un nouvel onglet". Il ouvrira l'aperçu dans un nouvel onglet de navigateur. WebIDE Ouvrir dans un nouvel onglet "Go Live" va automatiquement : * Démarrer un serveur web * Fournir des mises à jour en temps réel au fur et à mesure que vous modifiez votre code > Conseils : LabEx VM héberge l'aperçu sur le port 8080. Vous pouvez partager le lien d'aperçu avec d'autres personnes pour présenter votre travail. Une fois votre lab vm arrêté, le lien d'aperçu ne fonctionnera plus. ## Scénarios d'utilisation Il s'agit d'un exemple de lab Java qui montre comment écrire, compiler et exécuter un programme Java simple à l'aide du WebIDE LabEx. Travailler avec des projets Java dans WebIDE : Développement Java 1. Créez un nouveau fichier Java via l'explorateur 2. Écrivez votre code Java avec la mise en évidence de la syntaxe 3. Compiler et exécuter dans le terminal : ```bash theme={null} javac MyClass.java java MyClass ``` 4. Afficher les erreurs et les avertissements de compilation en temps réel Il s'agit d'un exemple de lab HTML qui montre comment créer une page web simple à l'aide du WebIDE LabEx. Pour les tâches de développement frontend : Bouton Go Live 1. Créez des fichiers HTML, CSS et JavaScript 2. Cliquez sur le bouton "Go Live" dans le coin inférieur droit 3. Accédez à votre page web via : * Onglet Web 8080 en haut de la VM LabEx * Créez de nouveaux onglets d'aperçu de port à l'aide du bouton + Remarque : Votre projet est automatiquement déployé sur une URL publique sur le serveur LabEx, ce qui le rend accessible via les onglets Web. Il s'agit d'un exemple de défi Python qui montre comment traiter les noms d'astronautes à l'aide du WebIDE LabEx. Pour la programmation Python : Développement Python 1. Créez un fichier Python dans l'explorateur 2. Écrivez votre code Python avec : * Mise en évidence de la syntaxe * Achèvement du code * Détection d'erreurs 3. Exécutez votre script dans le terminal : ```bash theme={null} python3 script.py ``` 4. Utilisez le débogueur intégré pour une exécution pas à pas ## Questions fréquemment posées LabEx VM déploie automatiquement vos projets web : Aperçu Web 1. Port par défaut 8080 : * Cliquez sur l'onglet "Web 8080" en haut de la VM LabEx * Votre application sera accessible via une URL publique 2. Ports personnalisés : * Cliquez sur le bouton + pour créer de nouveaux onglets d'aperçu de port * Chaque port obtient sa propre URL publique * Utile pour exécuter plusieurs services (par exemple, frontend et backend) Remarque : Contrairement au développement local, vous n'accédez pas directement à localhost car LabEx s'exécute dans le cloud. Raccourcis courants dans le WebIDE : * **Opérations sur les fichiers** * Nouveau fichier : Ctrl+N * Enregistrer : Ctrl+S * Rechercher : Ctrl+F * Remplacer : Ctrl+H * **Contrôles du panneau** * Basculer la barre latérale : Ctrl+B * Basculer le terminal : Ctrl+\` * Palette de commandes : Ctrl+Maj+P * **Fonctionnalités de l'éditeur** * Multi-curseur : Alt+Clic * Sélectionner toutes les occurrences : Ctrl+Maj+L * Formater le document : Maj+Alt+F Oui, vous pouvez installer des outils supplémentaires à l'aide du gestionnaire de paquets Ubuntu : ```bash theme={null} sudo apt update sudo apt install package-name ``` Pour les gestionnaires de paquets spécifiques à un langage : * Node.js/npm : ```bash theme={null} npm install package-name ``` * Python/pip : ```bash theme={null} pip install package-name ``` N'oubliez pas que les installations sont temporaires et seront réinitialisées à la fin de votre session. Le WebIDE offre plusieurs façons de gérer les fichiers : 1. **Téléverser des fichiers :** * Faites glisser et déposez des fichiers dans l'explorateur * Utilisez le téléversement/téléchargement après un clic droit dans l'explorateur Téléverser des fichiers 2. **Télécharger des fichiers :** * Cliquez avec le bouton droit sur le fichier dans l'explorateur * Sélectionnez "Télécharger" 3. **Copier/Coller :** * Le contenu textuel peut être copié directement entre votre machine locale et le WebIDE * Les fichiers binaires doivent utiliser les fonctionnalités de téléversement/téléchargement N'oubliez pas que tous les fichiers sont temporaires et seront perdus à la fin de votre session.