GitPod-Tutorial

Visual Studio Code für den Browser

05.07.2023
Von 
Matthew Tyson ist Java-Entwickler und schreibt unter anderem für unsere US-Schwesterpublikation Infoworld.com.
GitPod bietet eine vollwertige Entwicklungsumgebung auf Cloud-Basis. So gehen Sie erste Schritte.
Cloud Development Enviroments (CDEs) wie GitPod können Sie in Sachen Softwareentwicklung weiterbringen.
Cloud Development Enviroments (CDEs) wie GitPod können Sie in Sachen Softwareentwicklung weiterbringen.
Foto: fran_kie - shutterstock.com

Die Cloud hat viele Aspekte der Softwareentwicklung revolutioniert. Eine der interessantesten Tool-Kategorien, die dieser Entwicklung entsprungen sind, sind Cloud Development Environments (CDEs). Genau wie Integrated Development Environments (IDEs) bieten sie Zugriff auf eine vollwertige Entwicklungsumgebung - allerdings über den Browser. Dabei ist die Open-Source-Plattform GitPod.io eine der überzeugendsten CDE-Optionen. Im Folgenden lesen Sie, wie die ersten Schritte mit dem Cloud-basierten Dev-Tool in der Praxis gelingen.

Gitpod: React-App erstellen

Geht es um Dev-Tools, wollen die User vor allem eines: weniger Komplexität. Und GitPod macht es in der Tat sehr einfach, ein neues Projekt zu starten. Die einzige Voraussetzung dafür ist ein GitPod-Account, der (für öffentliche Repositories) kostenlos ist. Hinweis: Falls Sie bereits ein Github-Konto besitzen, können Sie auch das (per SSO) für den Login nutzen.

So sieht GitPod nach dem ersten Login aus.
So sieht GitPod nach dem ersten Login aus.
Foto: Foundry / Matthew Tyson

Zu Testzwecken laden wir nun eine bestehende React-Anwendung in GitPod. Dazu nutzen wir das Open React Template von GitHub.

Die Schaltfläche New Workspace öffnet ein Fenster, das Ihnen ermöglicht, GitHub-Repositories zu durchsuchen oder eine URL für ein spezifisches Repository anzugeben. Die von GitPod verlangte URL des Git-Klons finden Sie im Projekt, indem Sie in den Projektdetails auf die Schaltfläche Code klicken:

Hier finden Sie die Git-Clone-URL.
Hier finden Sie die Git-Clone-URL.
Foto: Foundry / Matthew Tyson

Die URL lautet:

Ins Dialogfeld eingefügt, müssen Sie nur noch auf das Projekt klicken, das zurückgegeben wird und anschließend die Standard-Settings akzeptieren. Nun wird das Repository automatisch in GitPod importiert, die Entwicklungsumgebungs-Ansicht geöffnet und das Projekt ausgeführt.

Das React-Projekt im Dev-Modus.
Das React-Projekt im Dev-Modus.
Foto: Foundry / Matthew Tyson

Im Grunde funktioniert GitPod wie eine Browser-Version von Visual Studio Code (VS Code): Im unteren Bereich befindet sich das Shell-Terminal. Werfen wir einen Blick auf den Output des Projekts. Ein Klick auf die Registerkarte PORTS führt zu einer Liste mit allen Anwendungen und den jeweiligen Ports, die sie nutzen. Im Fall der React-Anwendung ist das Port 3000. In der Address-Spalte sehen Sie die URL, unter der Sie die Anwendung live einsehen können.

Die React-App in der Live-Ansicht.
Die React-App in der Live-Ansicht.
Foto: Foundry / Matthew Tyson

Ganz ohne weiteres Zutun hat GitPod in diesem Zuge einige Informationen über das Beispielprojekt zu Tagegefördert - etwa:

  • welche Art von virtueller Maschine zu verwenden ist,

  • welche Services (wie Node.js und NPM) erforderlich sind und

  • welche Befehlssyntax das Projekt im Entwicklungsmodus startet (npm run start).

Die Informationen über das Projekt hält GitPod in einer .gitpod.yaml-Datei fest. Wenn Sie auf die Registerkarte Terminal im laufenden Projekt klicken, es mit der Tastenkombination STRC + C anhalten und dann das Verzeichnis (ls) betrachten, können Sie das .gitpod.yaml-File einsehen. Das dürfte sich dann in etwa wie folgt gestalten:

Listing 1: GitPod-Projektdetails

gitpod /workspace/open-react-template (master) $ cat .gitpod.yml

# This configuration file was automatically generated by Gitpod.

# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)

# and commit this file to your remote git repository to share the goodness with others.

# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart

tasks:

- init: npm install && npm run build

command: npm run start

Standardmäßig verwendet GitPod ein Docker-Image namens workspace-full, das diverse Programmiersprachen und Tools enthält. In unserem Fall sind wir darauf angewiesen, dass Node und NPM installiert sind. GitPod hostet viele gängige Use-Case-Images auf seinem Docker Hub. Mehr über Workspaces und gitpod.yaml erfahren Sie darüber hinaus in der GitPod-Dokumentation.

GitPod: Workspaces und Projekte aufsetzen

Trotz Forderungen seitens der Community gibt es bislang keine Möglichkeit, einen neuen Workspace direkt über GitPod zu erstellen - Ihr Startpunkt bildet bislang immer ein bestehendes Git-Repository. Sie können also auch einfach über Ihr GitHub-Konto ein neues, leeres Projekt erstellen und es in GitPod importieren.

GitPod setzt dabei sowohl auf Workspaces als auch auf Projects:

  • ein Workspace ist eine flüchtige Entität, die für Development-Aufgaben verwendet wird.

  • ein Project ist hingegen ein permanenter Container für Workspaces.

Bei der Verwendung eines Workspace ist das Git-Repository, das ihm zugrunde liegt, die long-term persistence. Workspaces werden nach 24 Stunden der Inaktivität automatisch heruntergefahren und nach 14 Tagen endgültig gelöscht. Projects bleiben hingegen gespeichert und können auf unbestimmte Zeit wiederverwendet werden.

Ein interessantes Ergebnis des CDE-Konzepts, wie es sich in GitPod manifestiert, ist die Reproduzierbarkeit von Workspaces. So wird es zum Kinderspiel, identische Workspaces zwischen Entwicklern einzurichten - das vielleicht stärkste Argument für ein Cloud Development Environment. Auf der Contra-Seite steht indes, dass CDEs für Unternehmen im Regelfall nicht kostenlos sind - im Gegensatz zu traditionellen IDEs.

Wie Visual Studio Code wird auch GitPod Sie dazu ermutigen, hilfreiche Erweiterungen hinzuzufügen. Das funktioniert ganz ähnlich wie VS Code auf dem Desktop - mit einigen Ergänzungen, die auf eine gemanagte, gehostete Umgebung ausgerichtet sind.

GitPod: Breakpoints in Java setzen

Versuchen wir nun, einen Breakpoint in Java-Code zu setzen. Dazu öffnen wir einen neuen Workspace. Für dieses Beispiel nutzen wir folgendes Repository:

  • github.com/gitpod-samples/spring-petclinic

Dabei haben Sie auch die Möglichkeit, den Editor und VM-Typ zu definieren. Wir verwenden den Standard-Editor - die weiteren Optionen sind Desktop-IDEs wie:

  • Eclipse,

  • VS Code und

  • IntelliJ.

GitPod kann diese mit den von Ihnen festgelegten Optionen für Sie starten. Die Auswahlmöglichkeiten für VMs ähneln denen der großen Cloud-Computing-Plattformen. Ist der Workspace fertig eingerichtet, sehen Sie darin die Demo-App der Spring PetClinic.

Die PetClinic-Applikation und die von ihr genutzten Ports.
Die PetClinic-Applikation und die von ihr genutzten Ports.
Foto: Foundry / Matthew Tyson

Diese Anwendung demonstriert diverse Funktionen, beispielsweise wie verschiedene Services parallel ausgeführt werden können.

Beim Blick auf die Ports zeigt sich:

  • Port 8080 ist die Hauptanwendung und

  • Port 35279 ist der Spring-Actuator-Dienst, der dazu dient, die Applikation zu überwachen.

Jetzt zum Breakpoint und dem zugehörigen Trigger: Klicken Sie auf die Schaltfläche Explorer im linken Menü. Dann öffnen Sie die OwnerController.java-Datei unter folgendem Pfad:

  • src/main/java/org/springframework/samples/petclinic/owner/OwnerController.java

Setzen Sie nun einen Breakpoint wie in der folgenden Abbildung zu sehen:

So setzen Sie mit GitPod einen Breakpoint in Java-Code.
So setzen Sie mit GitPod einen Breakpoint in Java-Code.
Foto: Foundry / Matthew Tyson

Wir befinden uns nun innerhalb der processCreationForm()-Methode, in der die Calls, um einen neuen Haustierbesitzer zu erstellen durch das Spring Rest Endpoint Mapping geroutet werden: @PostMapping("/owners/new").

Ist der Breakpoint gesetzt, müssen Sie die Anwendung im Debug-Modus neu starten. Nutzen Sie dazu Strg + C und navigieren Sie anschließend zur PetClinicApplication.java-Datei. Innerhalb der main()-Methode finden Sie die Run- und Debug-Links. Klicken Sie auf letzteres.

Run und Debug in GitPod.
Run und Debug in GitPod.
Foto: Foundry / Matthew Tyson

Sobald das Programm gestartet ist, öffnen Sie die Anwendung und klicken Sie erst auf Find Owners, dann auf New Owner. Daraufhin wird das entsprechende Formular geöffnet. Geben Sie die Informationen ein und klicken Sie auf Add Owner.

Den Breakpoint aktivieren.
Den Breakpoint aktivieren.
Foto: Foundry / Matthew Tyson

Dadurch werden der PetOwner-Controller und der von uns gesetzte Breakpoint getriggert. Die CDE erwartet Sie bereits:

Der pausierte Debugger.
Der pausierte Debugger.
Foto: Foundry / Matthew Tyson

GitPod bricht eine Lanze für CDEs

GitPod bietet eine voll funktionsfähige, browserbasierte IDE und Shell-Zugang in einem einfach zu verwaltenden Paket. Im Vergleich zu einer lokalen IDE erfordert die Plattform jedoch auch, sich ein bisschen umzustellen: So müssen Sie sich etwa um den Status der Persistenz Gedanken machen. Auch die Konfiguration eines Rechners über die Shell kann etwas anders aussehen. Diese Aspekte betreffen allerdings alle verteilten Cloud-Umgebungen.

Letztendlich sind sie jedoch auch von Vorteil, besteht doch eine der größten Hoffnungen in Sachen CDE darin, dass Entwickler reproduzierbare, vorkonfigurierte Umgebungen erstellen, die gemeinsam genutzt werden können - statt etwas, das nur auf einem Rechner funktioniert. Wenn sie richtig verstanden und eingesetzt wird, kann eine CDE wie GitPod eine großartige Ergänzung für Ihren Gesamtansatz in Sachen Softwareentwicklung sein. (fm)

Dieser Beitrag basiert auf einem Artikel unserer US-Schwesterpublikation Infoworld.