Lokales Entwickeln deines Projekts

Übersicht

Lokale Entwicklung bedeutet das Einrichten und Ausführen deines Projekts auf deinem eigenen Computer anstatt in der Cloud oder auf einem Remoteserver. Wenn du lokal entwickelst, kannst du ohne Internetverbindung an deinem Code arbeiten und experimentieren, ohne dass sich das auf die Liveanwendung auswirkt.

Die zum Konfigurieren einer lokalen Entwicklungsumgebung erforderlichen Schritte sind für jedes Projekt abhängig von Programmiersprachen, Frameworks, Tools und Abhängigkeiten unterschiedlich. In diesem Leitfaden werden die Kernkompetenzen vermittelt, die zum Einrichten eines Projekts erforderlich sind. Hierzu wird mit einer clientseitigen Beispielanwendung gearbeitet, die auf HTML, CSS und JavaScript basiert. Du kannst dieselben Fähigkeiten anschließend in Zukunft auf weitere Projekte übertragen.

Installieren wichtiger Entwicklungstools

Bevor du beginnen kannst, musst du einige wichtige Tools installieren, die für die lokale Entwicklung häufig verwendet werden.

Klonen und Öffnen des Repositorys in VS Code

Erstelle zunächst eine Kopie des Repositorys auf deinem Computer, indem du es klonen.

Klone zunächst das Repository „new2code/client-side-web-application“. Über diesen Link wird in VS Code ein Dialogfeld geöffnet, mit dem das Repository geklont werden kann.
Wähle einen Speicherort aus, um das Repository auf deinem Computer zu speichern, und klicke dann auf Select as Repository Destination.
Öffne das Repository, wenn du dazu aufgefordert wirst.

Installieren von Projektanforderungen

Öffne Copilot Chat, und weise Copilot mit dem folgenden Prompt an, die Ressourcen zu identifizieren, die du für die Installation benötigst.
Text
```
What do I need to install to develop this project locally? 
```
```
What do I need to install to develop this project locally? 
```
In diesem Beispiel antwortet Copilot, dass Node.js für dieses Projekt erforderlich ist. Node.js ermöglicht das Ausführen von JavaScript-Code auf deinem Computer und stellt Tools für die Webentwicklung bereit.
Frage Copilot, wie du die Projektanforderungen installieren kannst, und führe anschließend die Schritte aus, um diese auf deinem Computer zu installieren.

In diesem Beispiel könnte die Frage folgendermaßen lauten: „Wie installiere ich Node.js?“ Copilot stellt Anweisungen zum Aufrufen von https://nodejs.org/ und zum Herunterladen des Installationsprogramms bereit.

Installieren von Projektabhängigkeiten

Nachdem du die erforderliche Software installiert hast, ist ein Verständnis darüber erforderlich, wie du sie für dieses bestimmte Projekt verwenden kannst.

Überprüfe zunächst die Infodatei. Die meisten Projekte enthalten im Stammverzeichnis eine Infodatei, in der die Einrichtung und Ausführung des Projekts erläutert wird. Bei diesem Projekt erfährst du durch die Infodatei und die Frage an Copilot, dass der nächste Schritt darin besteht, die Abhängigkeiten des Projekts mithilfe von npm zu installieren, dem Paket-Manager von Node.js.

Öffne die Befehlspalette, indem du STRG+UMSCHALT+P (Windows/Linux) oder BEFEHL+UMSCHALT+P (Mac) drückst.
Geben Sie Terminal: Create New Terminal ein, und drücken Sie die EINGABETASTE.
Füge auf der Registerkarte „Terminal“ den folgenden Befehl ein.
Bash
```
npm install
```
```
npm install
```

Da dieses Projekt Node.js verwendet, wurde npm install verwendet, um die package.json-Datei zu lesen und alle Abhängigkeiten herunterzuladen, die das Projekt für eine ordnungsgemäße Funktionsweise benötigt. Andere Projekttypen verwenden unterschiedliche Befehle. Beispielsweise könnten Python-Projekte pip install -r requirements.txt verwenden, und Ruby-Projekte könnten bundle install verwenden.

Wenn die Infodatei keine Informationen über die Installation von Abhängigkeiten enthält, kannst du Folgendes tun:

Suche nach Konfigurationsdateien: Verschiedene Projekte verwenden unterschiedliche Dateien, um ihre Abhängigkeiten aufzulisten. Beispielsweise verwenden Node.js Projekte package.json, Python-Projekte verwenden requirements.txt, und Ruby-Projekte verwenden Gemfile.
Frage Copilot: Versuche Prompt wie „Was ist der nächste Schritt zum Einrichten dieses Projekts, nachdem ich Node.js installiert habe?“

Ausführen und Entwickeln deines Projekts

Nachdem deine Entwicklungsumgebung eingerichtet ist, kannst du den Entwicklungsserver starten und ihn verwenden, um in der Vorschau Änderungen an deinem Code anzuzeigen.

Finde heraus, wie du das Projekt startest, indem du die Infodatei in deinem Projektordner überprüfst.

In diesem Beispiel wird im Abschnitt „Schritte für die lokale Ausführung“ der Infodatei erläutert, dass du den Entwicklungsserver mit dem Befehl npm start starten kannst. Gib in deinem Terminal den folgenden Befehl ein.
Bash
```
npm start
```
```
npm start
```
Ermittle anhand der Terminalausgabe, wo der lokale Server verfügbar ist. Dadurch kannst du herausfinden, dass der lokale Server auf http://localhost:8080 verfügbar ist. Navigiere in deinem Browser zu dieser Adresse.
Nimm eine kleine Änderung am Code vor: Bearbeite beispielsweise den Text in der HTML-Datei, oder ändere in der CSS-Datei eine Farbe. Speichern Sie die Änderungen.
Überprüfe die Projektdokumentation oder die Terminalausgabe, um nachzuvollziehen, wie deine Änderungen angezeigt werden. Einige Projekte werden automatisch aktualisiert, nachdem du die Änderungen gespeichert hast, während für weitere Projekte das Browserfenster aktualisiert werden muss.

Aktualisiere für dieses Projekt dein Browserfenster, damit deine Änderungen angezeigt werden.

Wenn die Infodatei nicht die benötigten Informationen enthält, überprüfe die Konfigurationsdateien auf verfügbare Befehle. Du kannst ebenfalls Copilot Chat mit dem folgenden Prompt fragen.

Text

How do I start this project locally?

How do I start this project locally?

Wie geht es weiter?

Nachdem du deine erste lokale Entwicklungsumgebung erfolgreich eingerichtet hast, ist es an der Zeit, diese Fähigkeiten auf verschiedene Projekttypen zu übertragen.

Üben mit einem weiteren Projekt: Versuche, ein weiteres Projekt mit unterschiedlichen Anforderungen einzurichten. Beispiel: Die Python-Webanwendung von @new2code verwendet Python und Flask anstelle von Node.js.

Mit den in diesem Tutorial enthaltenen Informationen kannst du Folgendes ausführen:

Klonen des Repositorys mit VS Code
Copilot fragen, welche Tools und Abhängigkeiten du installieren musst
Lesen der Infodatei, um nachzuvollziehen, wie das Projekt ausgeführt wird
Ausführen der Anwendung in deinem Browser

Diese Übung hilft dir, Muster in verschiedenen Technologien zu erkennen und Vertrauen in deine Fähigkeit aufzubauen, um jedes Projekt lokal einzurichten.

In diesem Artikel