LabEx VM WebIDE Interface
Die LabEx WebIDE bietet eine moderne, VS Code-ähnliche Entwicklungsumgebung für Codierungsaufgaben. Sie basiert auf Ubuntu 22.04 und bietet eine vertraute Oberfläche zum Schreiben, Kompilieren und Ausführen von Code in mehreren Programmiersprachen.
WebIDE-Vorschau
Die WebIDE-Umgebung ist besonders nützlich für:
- Schreiben und Debuggen von Code in verschiedenen Programmiersprachen (Java, JavaScript, Python usw.)
- Webentwicklungsprojekte mit Live-Vorschaufunktionen, siehe Erstellen Sie Ihre erste HTML-Seite in WebIDE
- Verwalten von Projektdateien und -verzeichnissen über eine intuitive Benutzeroberfläche
- Integrierte Terminaloperationen für Befehlszeilenaufgaben
Umgebungslayout
Die WebIDE-Oberfläche besteht aus mehreren Schlüsselkomponenten:
- Linke Seitenleiste:
- Dateiexplorer für die Projektnavigation
- Suchfunktion
- Quellcodeverwaltung für Git-Operationen
- Erweiterungsfenster
- Editorbereich: Hauptarbeitsbereich für die Codierung
- Unteres Bedienfeld: Terminal, Probleme und Ausgabe
- Statusleiste: Schneller Zugriff auf Einstellungen und Live-Vorschau
- Obere Menüleiste: Datei, Bearbeiten, Ansicht und andere Optionen
Terminalzugriff
Sie können das Terminal auf zwei Arten öffnen:
- Klicken Sie auf das -Symbol in der linken unteren Ecke und wechseln Sie zur Registerkarte “Terminal”.
- Verwenden Sie das obere Menü: Terminal > Neues Terminal
HTML-Vorschau
So zeigen Sie Ihre HTML-Datei in der Vorschau an:
- Klicken Sie in der WebIDE auf die Schaltfläche “Go Live” in der unteren rechten Ecke.
- Eine neue Browser-Registerkarte wird mit Ihrer gerenderten HTML-Seite geöffnet.
- Oder Sie können auf die Registerkarte “Web 8080” klicken, um die Vorschau zu öffnen.
- Wenn sich Ihr Projekt in einem Unterverzeichnis befindet, können Sie darauf zugreifen, indem Sie auf den Namen des Unterverzeichnisses im Explorer klicken. Dann wird automatisch die Datei
index.html
in diesem Verzeichnis in der Vorschau angezeigt. - Wenn Ihr Projekt mehrere HTML-Dateien hat, einschließlich
index.html
, können Sie den Dateinamen an die URL anhängen, um ihn direkt in der Vorschau anzuzeigen. Zum Beispielhttps://xxx.labex.io/another-file.html
. - Sie können die Vorschau in einer neuen Registerkarte öffnen, indem Sie auf die Schaltfläche “In neuem Tab öffnen” klicken. Dadurch wird die Vorschau in einer neuen Browser-Registerkarte geöffnet.
“Go Live” wird automatisch:
- Einen Webserver starten
- Echtzeit-Updates bereitstellen, wenn Sie Ihren Code ändern
Tipps: LabEx VM hostet die Vorschau auf Port 8080. Sie können den Vorschaulink mit anderen teilen, um Ihre Arbeit zu präsentieren. Nachdem Ihre Lab-VM gestoppt wurde, funktioniert der Vorschaulink nicht mehr.
Nutzungsszenarien
Java-Entwicklungsbeispiel
Java-Entwicklungsbeispiel
Ihr erstes Java-Lab
Dies ist ein Java-Lab-Beispiel, das zeigt, wie man ein einfaches Java-Programm mit der LabEx WebIDE schreibt, kompiliert und ausführt.
Arbeiten mit Java-Projekten in WebIDE:
- Erstellen Sie eine neue Java-Datei über den Explorer
- Schreiben Sie Ihren Java-Code mit Syntaxhervorhebung
- Kompilieren und ausführen im Terminal:
- Anzeigen von Kompilierungsfehlern und -warnungen in Echtzeit
Webentwicklungsbeispiel
Webentwicklungsbeispiel
Ihr erstes HTML-Lab
Dies ist ein HTML-Lab-Beispiel, das zeigt, wie man eine einfache Webseite mit der LabEx WebIDE erstellt.
Für Frontend-Entwicklungsaufgaben:
- Erstellen Sie HTML-, CSS- und JavaScript-Dateien
- Klicken Sie auf die Schaltfläche “Go Live” in der unteren rechten Ecke
- Greifen Sie auf Ihre Webseite zu über:
- Web 8080-Registerkarte oben in der LabEx VM
- Erstellen Sie neue Port-Vorschau-Registerkarten mit der +-Schaltfläche
Hinweis: Ihr Projekt wird automatisch auf eine öffentliche URL auf dem LabEx-Server bereitgestellt, wodurch es über die Web-Registerkarten zugänglich ist.
Python-Entwicklungsbeispiel
Python-Entwicklungsbeispiel
Erstellen Sie einen Astronauten-Namensschild-Prozessor
Dies ist eine Python-Challenge-Beispiel, das zeigt, wie man Astronautennamen mit der LabEx WebIDE verarbeitet.
Für die Python-Programmierung:
- Erstellen Sie eine Python-Datei im Explorer
- Schreiben Sie Ihren Python-Code mit:
- Syntaxhervorhebung
- Codevervollständigung
- Fehlererkennung
- Führen Sie Ihr Skript im Terminal aus:
- Verwenden Sie den integrierten Debugger für die schrittweise Ausführung
Häufig gestellte Fragen
Wie greife ich auf meine Webanwendung zu?
Wie greife ich auf meine Webanwendung zu?
LabEx VM stellt Ihre Webprojekte automatisch bereit:
-
Standardport 8080:
- Klicken Sie auf die Registerkarte “Web 8080” oben in der LabEx VM
- Ihre Anwendung ist über eine öffentliche URL zugänglich
-
Benutzerdefinierte Ports:
- Klicken Sie auf die +-Schaltfläche, um neue Port-Vorschau-Registerkarten zu erstellen
- Jeder Port erhält seine eigene öffentliche URL
- Nützlich für die Ausführung mehrerer Dienste (z. B. Frontend und Backend)
Hinweis: Im Gegensatz zur lokalen Entwicklung greifen Sie nicht direkt auf localhost zu, da LabEx in der Cloud ausgeführt wird.
Was sind die wichtigsten Tastenkombinationen?
Was sind die wichtigsten Tastenkombinationen?
Häufige Verknüpfungen in der WebIDE:
-
Dateioperationen
- Neue Datei: Strg+N
- Speichern: Strg+S
- Suchen: Strg+F
- Ersetzen: Strg+H
-
Bedienfeld-Steuerelemente
- Seitenleiste umschalten: Strg+B
- Terminal umschalten: Strg+`
- Befehlspalette: Strg+Umschalt+P
-
Editor-Funktionen
- Multi-Cursor: Alt+Klick
- Alle Vorkommnisse auswählen: Strg+Umschalt+L
- Dokument formatieren: Umschalt+Alt+F
Kann ich zusätzliche Tools oder Pakete installieren?
Kann ich zusätzliche Tools oder Pakete installieren?
Ja, Sie können zusätzliche Tools mit dem Ubuntu-Paketmanager installieren:
Für sprachspezifische Paketmanager:
- Node.js/npm:
- Python/pip:
Denken Sie daran, dass Installationen temporär sind und beim Beenden Ihrer Sitzung zurückgesetzt werden.
Wie gehe ich mit Datei-Uploads und -Downloads um?
Wie gehe ich mit Datei-Uploads und -Downloads um?
Die WebIDE bietet verschiedene Möglichkeiten zur Dateiverwaltung:
-
Dateien hochladen:
- Ziehen Sie Dateien per Drag & Drop in den Explorer
- Verwenden Sie den Upload/Download nach Rechtsklick im Explorer
-
Dateien herunterladen:
- Klicken Sie mit der rechten Maustaste auf die Datei im Explorer
- Wählen Sie “Herunterladen”
-
Kopieren/Einfügen:
- Textinhalte können direkt zwischen Ihrem lokalen Rechner und der WebIDE kopiert werden
- Binärdateien sollten die Upload/Download-Funktionen verwenden
Denken Sie daran, dass alle Dateien temporär sind und beim Beenden Ihrer Sitzung verloren gehen.