LabEx VM WebIDE Interface

​

WebIDE-Vorschau

1. Schreiben und Debuggen von Code in verschiedenen Programmiersprachen (Java, JavaScript, Python usw.)
2. Webentwicklungsprojekte mit Live-Vorschaufunktionen, siehe Erstellen Sie Ihre erste HTML-Seite in WebIDE
3. Verwalten von Projektdateien und -verzeichnissen über eine intuitive Benutzeroberfläche
4. Integrierte Terminaloperationen für Befehlszeilenaufgaben

​

Umgebungslayout

1. Linke Seitenleiste:
   • Dateiexplorer für die Projektnavigation
   • Suchfunktion
   • Quellcodeverwaltung für Git-Operationen
   • Erweiterungsfenster
2. Editorbereich: Hauptarbeitsbereich für die Codierung
3. Unteres Bedienfeld: Terminal, Probleme und Ausgabe
4. Statusleiste: Schneller Zugriff auf Einstellungen und Live-Vorschau
5. Obere Menüleiste: Datei, Bearbeiten, Ansicht und andere Optionen

​

Terminalzugriff

1. Klicken Sie auf das -Symbol in der linken unteren Ecke und wechseln Sie zur Registerkarte “Terminal”.
2. Verwenden Sie das obere Menü: Terminal > Neues Terminal

​

HTML-Vorschau

1. Klicken Sie in der WebIDE auf die Schaltfläche “Go Live” in der unteren rechten Ecke.
2. Eine neue Browser-Registerkarte wird mit Ihrer gerenderten HTML-Seite geöffnet.
3. Oder Sie können auf die Registerkarte “Web 8080” klicken, um die Vorschau zu öffnen.
4. 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.
5. 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 Beispiel https://xxx.labex.io/another-file.html.
6. 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.

• 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

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:

1. Erstellen Sie eine neue Java-Datei über den Explorer
2. Schreiben Sie Ihren Java-Code mit Syntaxhervorhebung
3. Kompilieren und ausführen im Terminal:

Copy

javac MyClass.java
java MyClass

4. Anzeigen von Kompilierungsfehlern und -warnungen in Echtzeit

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:

1. Erstellen Sie HTML-, CSS- und JavaScript-Dateien
2. Klicken Sie auf die Schaltfläche “Go Live” in der unteren rechten Ecke
3. 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

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:

1. Erstellen Sie eine Python-Datei im Explorer
2. Schreiben Sie Ihren Python-Code mit:
   • Syntaxhervorhebung
   • Codevervollständigung
   • Fehlererkennung
3. Führen Sie Ihr Skript im Terminal aus:

Copy

python3 script.py

4. Verwenden Sie den integrierten Debugger für die schrittweise Ausführung

​

Häufig gestellte Fragen

Wie greife ich auf meine Webanwendung zu?

LabEx VM stellt Ihre Webprojekte automatisch bereit:

1. Standardport 8080:
   • Klicken Sie auf die Registerkarte “Web 8080” oben in der LabEx VM
   • Ihre Anwendung ist über eine öffentliche URL zugänglich
2. 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?

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?

Ja, Sie können zusätzliche Tools mit dem Ubuntu-Paketmanager installieren:

Copy

sudo apt update
sudo apt install package-name

Für sprachspezifische Paketmanager:

• Node.js/npm:

Copy

npm install package-name

• Python/pip:

Copy

pip install package-name

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?

Die WebIDE bietet verschiedene Möglichkeiten zur Dateiverwaltung:

1. Dateien hochladen:
   • Ziehen Sie Dateien per Drag & Drop in den Explorer
   • Verwenden Sie den Upload/Download nach Rechtsklick im Explorer
   
2. Dateien herunterladen:
   • Klicken Sie mit der rechten Maustaste auf die Datei im Explorer
   • Wählen Sie “Herunterladen”
3. 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.