Die Arbeitsumgebung
Zuerst richten wir unsere Arbeitsumgebung für das Entwickeln im Web ein. Dazu gehört ein Glitch-Account und optional die Entwicklungsumgebung Visual Studio Code.
Last updated
Was this helpful?
Zuerst richten wir unsere Arbeitsumgebung für das Entwickeln im Web ein. Dazu gehört ein Glitch-Account und optional die Entwicklungsumgebung Visual Studio Code.
Last updated
Was this helpful?
In diesem Modul geht es um das Entwickeln moderner Webanwendungen. Wir wollen auf möglichst einfache Weise verstehen, wie Webanwendungen funktionieren und was wir benötigen, um eigene zu erstellen. Eine Sache benötigen wir in jedem Softwareprojekt zuallererst: Eine geeignete Entwicklungsumgebung, die wir auch IDE (Integrated Development Environment) nennen.
Einer der beliebtesten und am einfachsten nutzbaren IDEs für Softwareprojekte nicht nur im Web-Umfeld ist Visual Studio Code (kurz: VS Code). Das Programm wurde von Microsoft entwickelt und wird der Community als Open-Source-Software zur Verfügung gestellt.
Glitch hat eine Erweiterung für VS Code entwickelt, die es ermöglicht, Glitch-Projekte auch lokal auf dem Laptop in VS Code zu bearbeiten. Das bietet etwa den Vorteil, dass die Formatierungsfunktion, aber auch andere nützliche Funktionen von VS Code genutzt werden können.
Ladet euch Visual Studio Code für eurer Betriebssystem herunter und installiert es.
Für die Webentwicklung mit Visual Studio Code empfehle ich die folgenden Erweiterungen zu installieren:
Glitch ist eine Online-Entwicklungsumgebung und läuft vollständig online und im Browser. Das hat viele Vorteile:
Es muss keine Software installiert werden, ein moderner Browser wie Chrome reicht aus.
Man arbeitet immer mit der aktuellsten Version der Software.
Die Zusammenarbeit im Team wird erleichtert.
Die Nutzung von Glitch ist kostenlos und nur erweiterte Features wie private Projekte oder dedizierte Rechenkapazitäten sind kostenpflichtig.
Ihr könnt in Glitch mit wenigen Klicks eure eigenen Web-Projekte anlegen und von überall auf euren Code zugreifen. Ihr benötigt nur einen Browser sowie eine Verbindung ins Internet. Zudem könnt ihr euer Team mit einem Klick zu eurem Projekt einladen und so zusammen daran arbeiten.
Erstellt euch jetzt einen kostenfreien Glitch-Account. Ladet ein Foto hoch, damit man euch in kollaborativen Projekten schnell erkennen kann.
Um VS Code zusammen mit euren Glitch-Projekten nutzen zu können, könnt ihr eine Erweiterung für Visual Studio installieren. Klickt dazu in VS Code links auf das Symbol für die Erweiterungen und gebt anschließend "glitch" in das Suchfeld ein. Die Erweiterung mit dem Fischsymbol ist die Richtige, klickt dort ganz rechts auf den kleinen grünen Button "Install".
Nach ein paar Minuten ist die Erweiterung fertig installiert. Ihr könnt nun mit dem Shortcut Strg + Shift + P das Suchfeld für Kommandos aufrufen und dort "glitch" eingeben. Es werden alle Kommandos für die Glitch-Erweiterung aufgeführt.
Zuerst müsst ihr euch anmelden, am einfachsten geht das über den Browser. Nachdem ihr euch angemeldet habt, könnt ihr mit dem Befehl Glitch: Open Project ein Projekt aus eurem Glitch-Account direkt in VS Code öffnen und editieren.
Das war es schon! Nachdem wir den Glitch-Account haben und mit Visual Studio Code zusätzlich einen lokalen Editor installiert haben, können wir mit der Webentwicklung loslegen. Schauen wir uns im ersten Schritt an, was wir erreichen wollen.
Nachdem ihr euch einen Account für Glitch angelegt habt, schaut euch das Video an, um einen Überblick über das Werkzeug zu erhalten.
: eine Erweiterung für lokales Hosten eines Webservers.
: eine Erweiterung für das einfachere Schreiben von HTML- und CSS-Code.
Noch vor ein paar Jahren sind die meisten Neuanfänger in der Webentwicklung schon an der Einrichtung einer IDE gescheitert. Als Alternative zu VS Code gibt es ein umfangreiches Angebot aus der Cloud, das uns ohne Installations- oder Konfigurationsaufwand mit dem Entwickeln loslegen lässt. Dazu zählt auch .
