Mit Visual Studio Code und Codey im Webbrowser programmieren Google Project IDX – Browser-basierte Entwicklungsumgebung

Von Thomas Joos 4 min Lesedauer

Anbieter zum Thema

Die browserbasierte Entwicklungsumgebung Project IDX von Google ermöglicht die Entwicklung von Webanwendungen oder Full-Stack-Multiplattform-Apps. Interessant ist die Integration von KI, um die Entwicklung von Programmen zu vereinfachen.

Google IDX erlaubt es, direkt im Browser zu programmieren und die Apps in virtuellen Maschinen zu testen.
Google IDX erlaubt es, direkt im Browser zu programmieren und die Apps in virtuellen Maschinen zu testen.
(Bild: Joos / Google)

Project IDX von Google ermöglicht die Entwicklung kompletter Anwendungen direkt im Webbrowser. Neben Webanwendungen, Container-Apps und Multiplattform-Programmen können mit Project IDX auch Android- und iOS-Apps entwickelt werden.

Erstellen eines neuen Arbeitsbereichs in Google Project IDX.
Erstellen eines neuen Arbeitsbereichs in Google Project IDX.
(Bild: Joos / Google)

Bei Web-Apps kann eine Vorschau direkt im Fenster angezeigt werden, bei anderen Anwendungen erfolgt die Vorschau über verschiedene Simulatoren, aber ebenfalls im Browserfenster. Interessant ist das Projekt auch für Teams, die gemeinsam an Code arbeiten. Der Fokus von Google Project IDX liegt auf der Entwicklung von Full-Stacks.

IDE auf Basis von VS Code und Codey-KI

Basis von Project IDX ist Visual Studio Code. Dadurch ist die Entwicklungsumgebung von Anfang an stabil und performant. Google hat also keine eigene IDE entwickelt, sondern setzt auf den zur IDE erweiterbaren Open-Source-Editor von Microsoft.

Erweiterungen für Microsoft Visual Studio Code sind auch in Project IDX verfügbar.
Erweiterungen für Microsoft Visual Studio Code sind auch in Project IDX verfügbar.
(Bild: Joos / Google)

Wer bereits mit Visual Studio Code vertraut ist, kann sofort mit der Entwicklung beginnen. Ein weiterer Vorteil ist, dass innerhalb von Project IDX zahlreiche Erweiterungen zur Verfügung stehen, die es auch für Visual Studio Code gibt. Parallel dazu können Developer Programme in der Linux-VM eines Projekts installieren, wie auf herkömmlichen Linux-Systemen.

Google IDX arbeitet mit Google Firebase Hosting und Google Cloud Functions. Innerhalb von Projektfenstern kann eine direkte Verbindung zu den Diensten hergestellt werden, um den eigenen Code schnell und einfach bereitzustellen. Hier können Developer ihre Webanwendungen hosten und auch auf dynamische Inhalte und Microservices setzen.

Installationen sind dabei nicht erforderlich, nach dem Aufrufen der Seite können Entwicklerinnen und Entwickler sofort mit der Arbeit beginnen. Derzeit befindet sich das Projekt in der (Alpha-)Preview-Phase. Es ist zu erwarten, dass der Funktionsumfang im Rahmen der Preview noch deutlich zunehmen wird.

In Google IDX kann Code aus GitHub eingebunden werden. Dazu stehen Import-Assistenten für komplette GitHub-Repositories zur Verfügung. Natürlich können mit IDX auch neue Projekte entwickelt werden. Dazu stellt Google verschiedene Templates für die unterstützten Frameworks zur Verfügung. So können Developer bestehende Projekte mit Google IDX weiterentwickeln.

Google IDX erlaubt es, direkt im Browser zu programmieren und die Apps in virtuellen Maschinen zu testen.
Google IDX erlaubt es, direkt im Browser zu programmieren und die Apps in virtuellen Maschinen zu testen.
(Bild: Joos / Google)

Zum Testen der Anwendungen ist es möglich, VMs zu verwenden, und natürlich sind Simulatoren für die Android-Entwicklung enthalten. Jeder Workspace erhält beispielsweise automatisch Zugriff auf eine Linux-VM. Auch für iOS können Applikationen entwickelt werden. Hier stehen Simulatoren zur Verfügung. Dadurch können sich Entwickler ihre Anwendung im Browser anschauen, ohne etwas auf dem PC installieren zu müssen.

Angular, Flutter, React und mehr mit dem IDX-Projekt

Frameworks wie Angular, Flutter, React, Svelte, Vue und andere sind bereits in IDX enthalten. Derzeit können Developer mit Python, Go, JavaScript oder Dart arbeiten. Das Google Flutter-Framework basiert auf Dart.

Erstellung eines neuen Arbeitsbereichs für die Entwicklung im Google Project IDX.
Erstellung eines neuen Arbeitsbereichs für die Entwicklung im Google Project IDX.
(Bild: Joos / Google)

Es ist zu erwarten, dass in Zukunft weitere Frameworks integriert werden. Besonders wichtig für IDX ist die auf PaLM-2 (Pathways Language Model) basierende KI Codey. Diese ist, ähnlich wie GitHub Copilot, für das Programmieren und Korrigieren von Code optimiert. Codey-KIs ermöglichen die automatische, KI-gestützte Vervollständigung von Code. Die Integration der KI erfolgt über einen Chatbot, der im Prinzip ähnlich wie ChatGPT funktioniert.

Der Bot kann im aktuellen Zustand allerdings nicht direkt den Code im Kontext verändern und erkennt derzeit auch nicht, wenn Entwickler einen Bereich des Codes markieren und dazu Fragen oder Verbesserungswünsche haben. Wenn die KI über das Chat-Fenster Code entwickelt, müssen Entwickler diesen in die Zwischenablage kopieren und in das Code-Fenster einfügen. Wenn der von der KI erstellte Code lizenzpflichtig ist, zeigt der Chatbot dies im Fenster an. Google selbst gibt jedoch an, dass sich die KI in Project IDX noch in einem sehr frühen Entwicklungsstadium befindet.

Die Integration der KI erfolgt über ein Chatfenster auf der rechten Seite der Oberfläche.
Die Integration der KI erfolgt über ein Chatfenster auf der rechten Seite der Oberfläche.
(Bild: Joos / Google)

PaLM 2 wird in Android Studio und in der Google Cloud eingesetzt. Es ist zu erwarten, dass der Funktionsumfang von Codey in Zukunft noch deutlich erweitert wird. Codey hilft dabei, den Code von einer Programmiersprache in eine andere sowie in Plug-ins zu konvertieren. Generell kann Codey, ähnlich wie Copilot, markierten Code erklären und dokumentieren.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

Project IDX in der Praxis: Arbeitsbereich anlegen

Sobald über den Wizard in Project IDX ein Workspace auf Basis eines der vorhandenen Frameworks erstellt wurde, kann direkt im Browser mit der Entwicklung begonnen werden. Es sind keine weiteren Schritte notwendig.

Ein Workspace besteht aus einer Linux-VM inklusive Terminal. Dadurch lassen sich über ein Webbrowser-Fenster innerhalb eines Terminal-Fensters nahezu alle Linux-Befehle verwenden, die auf herkömmlichen Linux-Installationen zur Verfügung stehen, zum Beispiel Editoren wie VIM. Damit ist es möglich, Konfigurationsdateien für Webapplikationen oder andere Anwendungen direkt im Browser zu bearbeiten.

Bei der Programmierung kann in IDX mit verschiedenen Tabs gearbeitet werden. Dadurch können Entwickler in einem Tab programmieren und in einem anderen eine Vorschau der Anwendung anzeigen. Dies funktioniert nicht auf der Ebene des Browsers. Die Tab-Funktion ist direkt in IDX integriert, so dass jeder Tab innerhalb des IDX-Workspace auf den Code zugreifen kann, der zum Workspace gehört.

Im Chat-Fenster der KI können Entwickler die KI programmieren lassen. Wenn Fehler im eigenen Code auftreten, kann die Fehlermeldung kopiert und in das Chatfenster eingefügt werden. Der Chatbot analysiert diese und hilft bei der Fehlerbehebung.

Im aktuellen Entwicklungsstand ändert die KI jedoch nicht den Code, sondern zeigt im Chatfenster nur Hinweise an, wie der Fehler behoben werden kann. Das Chatfenster verlinkt jedoch auf Dateien im Projekt, in die Code eingefügt werden muss oder die für die Fehlerbehebung im konkreten Fall relevant sind.

Cloud Code und Duet KI-IDE Plug-ins für KI-Integration in Dritt-IDEs

Parallel zum Projekt IDX stellt Google seine Cloud Code und Duet KI-IDE Plug-ins für Dritt-IDEs zur Verfügung. Diese bringen Codey und KI-Funktionalität in andere IDEs. Generell unterstützen die Plugins viele bekannte IDEs wie VSCode, JetBrains IDEs, Cloud Workstations und Cloud Shell Editor. Gleichzeitig bieten die Plugins Unterstützung für GCP. So können Entwickler beispielsweise die Erstellung von Konfigurationsdateien automatisieren und damit vereinfachen.

(ID:49778716)