Suchen und Verstehen von Beispielcode

Inwiefern kann ich meine Kenntnisse durch Code auf GitHub erweitern?

Das Lernen durch Projekte auf GitHub stellt eine großartige Möglichkeit dar, sich neue Techniken anzueignen und für eigene Projekte inspirieren zu lassen.

Da Millionen öffentlich verfügbarer Repositorys auf GitHub verfügbar sind, kann es jedoch überfordernd sein, Code zu finden, der für das Projekt geeignet ist. Selbst wenn du das perfekte Repository gefunden hast, kann es schwierig sein, die Codebasis nach nützlichen Beispielen zu durchsuchen.

Anstatt zu versuchen, ein ganzes Projekt zu verstehen, besteht ein besserer Ansatz darin, einzelne Features oder Funktionen auszuwählen und herauszufinden, wie sie funktionieren. Du kannst die Suchfunktion von Copilot Chat und GitHub verwenden, um nach einem Feature zu suchen und damit die Codebasis zu durchlaufen. Dies ist eine großartige Möglichkeit, um zu lernen, wie das Feature vom Back-End bis zum Front-End funktioniert.

In diesem Leitfaden erfährst du mithilfe eines Beispielszenarios, wie du Daten aus Dateien auf einer Jekyll-Website lädst und anzeigst. Anschließend kannst du die Tipps und Techniken auf andere Projekte und Programmiersprachen anwenden.

Suchen eines Beispielprojekts

Der erste Schritt besteht darin, das richtige Projekt zu finden, das als Lerngrundlage dient.

Verwenden von Copilot Chat zum Identifizieren eines Repositorys

Die schnellste Möglichkeit, ein Projekt mit Code zu finden, von dem du lernen kannst, besteht darin, Copilot Chat aufzufordern, Repositorys zurückzugeben, die deinen Anforderungen entsprechen.

Öffne Copilot Chat, und starte einen allgemeinen Chat. Stelle dann die folgende Frage:

Kannst du einige beliebte Repositorys suchen, die Jekyll zum Anzeigen von Daten aus Dateien im Repository verwenden?

Copilot gibt Links zu relevanten Repositorys zurück, und du kannst Folgefragen zu den Repositorys stellen.

Oft fügt Copilot am Ende der Antwort einen Link zur GitHub-Suche mit weiteren Ergebnissen ein. Als Nächstes überprüfst du diese Ergebnisse.

Verwenden der Suche zum Identifizieren weiterer Optionen

Wenn Copilot einen Link zu den Suchergebnissen eingefügt hat, klicke auf diesen Link. Falls kein Link angegeben wurde, erstelle deine eigene Suchanfrage, indem du die folgenden Schritte befolgst.

1. Navigiere zu Advanced search.
2. Verwende im Abschnitt „Advanced search“ die Dropdownliste „Written in this language“, um eine Programmiersprache auszuwählen. Wähle für die Jekyll-Website die Option „HTML“ aus.
3. Optional kannst du unter „Repositories options“ neben „With this many stars“ >150 eingeben. Dies hilft dir dabei, beliebte Repositorys zu finden, die wahrscheinlich gut organisiert sind.
4. Klicke oben auf der Seite auf Search.

Auswählen eines Projekts

Nach dem Überprüfen der Ergebnisse von Copilot und der Suche entscheidest du dich, das Repository github/choosealicense.com zu verwenden. Dieses Repository enthält den Quellcode für die Jekyll-Website zum Auswählen einer Lizenz, auf der Informationen zu Open-Source-Lizenzen verfügbar sind.

Du interessierst dich besonders für die Seite zu den Lizenzen, auf der beliebte Open-Source-Lizenzen aus Datendateien angezeigt werden.

Orientierung im Projekt

Bevor du dich mit dem Code zum Anzeigen von Datendateien beschäftigst, mache dich zunächst grundsätzlich mit dem Repository vertraut.

Es kann schwierig sein, einen Ausgangspunkt zu ermitteln, wenn du ein Repository zum ersten Mal öffnest. Obwohl alle Projekte auf individuelle Weise organisiert sind, gibt es allgemeine Dokumentationsmethoden, die dir in der Regel dabei helfen, dich zurechtzufinden.

Datei „README.md“

Es empfiehlt sich immer, die Datei README.md zu lesen, bei der es sich um die Startseite eines Repositorys handelt und die automatisch unter der Liste der Dateien gerendert wird. Die bereitgestellten Informationen hängen von den jeweils für die Verwaltung verantwortlichen Personen ab, aber oft sind Informationen zum Projekt, der Erstellung auf lokalen Computern und Links zur Dokumentation enthalten.

Im Repository github/choosealicense.com erklärt die Datei „README.md“, wo sich die Lizenzdateien (/_licenses) befinden, welche Attribute die jeweiligen Lizenzen haben können und wie du die Website auf deinem Computer aufrufen kannst.

Verwenden von Copilot Chat

Wenn die Datei „README.md“ nicht die gewünschten Informationen enthält, kannst du Copilot auffordern, dir bei der Navigation durch das Repository und der Suche nach Funktionen zu helfen.

Klicke zum Öffnen von Copilot Chat auf das GitHub Copilot-Symbol neben der Suchleiste, und stelle deine Frage. Zum Beispiel:

Was ist die Hauptstartseite für diese Jekyll-Website?

Wenn du Copilot Fragen zu einem Repository stellst, kann das Tool die relevanten Dateien zurückgeben, ihre Rolle hinsichtlich der Funktionalität erklären und Links einschließen.

Wiki des Repositorys

Eine weitere Informationsquelle ist das Wiki des Repositorys. Hierbei handelt es sich um einen Abschnitt des Repositorys speziell für das Hosten der Dokumentation. Bei jedem Repository auf GitHub besteht die Möglichkeit, ein Wiki zu verwenden, aber nicht für jedes Repository wird diese Option genutzt. Um auf das Wiki zuzugreifen, klicke auf die Registerkarte Wiki im Repository.

Releases

Wenn der Quellcode des Repositorys in eine ausführbare Datei integriert ist, verwenden einige Personen, die das Repository verwalten, die Releases des Repositorys, um Binärdateien zu veröffentlichen. Du kannst diese Binärdateien herunterladen und ausführen, um während dem Erkunden der Codebasis zu untersuchen, wie die Anwendung funktioniert, ohne das Projekt selbst erstellen zu müssen.

Du findest die Releases eines Repositorys auf der Randleiste rechts neben der Liste der Dateien und der README.md-Datei.

Interne Dokumentation

Du kannst auch im Inhalt des Repositorys nach der internen Dokumentation suchen. Dies kann eine einzelne Markdowndatei oder ein Verzeichnis voller Markdowndateien sein. Du kannst nach gängigen Bezeichnungen wie „docs“, „documentation“, „wiki“, „resources“, „help“ oder „manual“ suchen.

Navigieren im Quellcode

Da du nun die Gesamtstruktur des Repository kennst, kannst du die GitHub-Suche verwenden, um nach der spezifischen gewünschten Funktion zu suchen.

Wenn du dich in einem Repository befindest und in das Suchfeld oben auf der Seite klickst, fügt GitHub automatisch den Suchqualifizierer repo hinzu, sodass die Suchergebnisse auf das angezeigte Repository beschränkt sind.

Zunächst musst du wissen, wonach du suchen möchtest. Dies kann eine Zeichenfolge mit eindeutigem Text für das untersuchte Feature sein. Du kannst auch die HTML-Quelle der Seite überprüfen und ein bestimmtes class- oder id-Attribut ermitteln.

In deinem Beispiel suchst du oben auf der Lizenzseite mithilfe der Abfrage repo:github/choosealicense "If you’re looking for a reference table?" nach dem Text. Daraufhin wird ein Ergebnis angezeigt: eine Datei namens licenses.html.

Jetzt kannst du das Ergebnis auswählen und weitere Untersuchungen anstellen. licenses.html ist die Quelle der Seite für Lizenzen, nach der du gesucht hast. Die gesuchte Zeichenfolge wird angezeigt, und jede der Lizenzen ist im folgenden Code enthalten:

{% include license-overview.html license-id="agpl-3.0" %}

Verstehen des Quellcodes

Nachdem du nun den gewünschten spezifischen Code gefunden hast, kannst du ihn genauer untersuchen, um ihn zu verstehen.

Stellen von Fragen an Copilot Chat zum Code

Du kannst Copilot verwenden, um mehr über eine Datei oder sogar bestimmte Codezeilen zu erfahren. Copilot kombiniert Informationen zur Programmiersprache mit dem Kontext aus dem Repository, um deine Fragen detailliert zu beantworten.

Bitte Copilot um eine Erklärung, was in Zeile 11 mit dem {% include %}-Tag geschieht. Klicke auf die Zeilennummer. Klicke anschließend rechts neben der Zeile auf . Stelle im Chatfenster die folgende Frage:

Was geschieht in dieser Zeile?

Copilot erklärt, dass die Zeile die license-overview.html-Datei enthält und "agpl-3.0" als anzuzeigende license-id übergibt.

Lesen von Kommentaren

Kommentare sind von Menschen erstellte, lesbare Anmerkungen, die du nutzen kannst, um den Code zu verstehen. Sie werden nicht ausgeführt. Sie sind in der Regel durch Zeichen wie // oder /* getrennt.

Es gibt einige Arten von Kommentaren, nach denen du suchen kannst:

• Zeile: Einzeilige Kommentare, die beschreiben, welchen Zweck eine bestimmte Zeile erfüllt
• Block: Mehrzeilige Kommentare, die beschreiben können, welchen Zweck eine gesamte Funktion oder Datei erfüllt
• Datei: Blockkommentar am Anfang einer Datei, der einen Überblick über diesen bestimmten Teil der Codebasis bietet

Nachschlagen von Informationen zu Funktionen in der Programmiersprachenreferenz

Für jede Programmiersprache ist eine Onlinereferenz verfügbar, in der jeder Aspekt der Sprache erläutert wird.

Wenn du eine Suchmaschine für die Suche nach der Programmiersprache und der Funktion verwendest, sollte ein Link zur Referenzseite dieser Funktion angezeigt werden.

Wenn du in deinem Beispiel in einer Suchmaschine nach jekyll include suchst, sollte die Seite zur Includes-Dokumentation in der Jekyll-Dokumentation zurückgegeben werden. Wenn du dich weiter mit der Jekyll-Dokumentation beschäftigst, wird deutlich, dass die Lizenzen selbst eine Sammlung im _licenses-Verzeichnis sind.

Zusammengefasst lässt sich also Folgendes sagen: Die licenses.html-Datei enthält /_includes/license-overview.html für jede angezeigte Lizenz. Die /_includes/license-overview.html-Datei gleicht die für eine Lizenz bereitgestellte license-id in der /_licenses-Sammlung ab und rendert die Details.

Experimentieren mit kleinen Änderungen

Wenn du das Projekt lokal auf deinem Computer ausführen kannst, empfiehlt es sich, kleine Änderungen vorzunehmen, um herauszufinden, was passiert.

Du kannst zunächst Text ändern und anschließend größere Änderungen vornehmen (z. B. Experimentieren mit Funktionen und Dateien, um festzustellen, wie diese miteinander interagieren).

Suche die license-overview.html-Datei im _includes-Verzeichnis, und nimm dann Änderungen vor, um zu ermitteln, wie die Lizenz angezeigt wird. Du kannst auch testen, wie die Lizenz jeweils aus der Sammlung geladen wird.

Du hast die Möglichkeit, die Metadaten am Anfang einer der Lizenzdateien zu ändern, die in license-overview.html angezeigten Attribute zu bearbeiten oder sogar eigene Attribute hinzuzufügen. Wenn du deine Änderungen vorgenommen hast, kannst du die Funktionalität testen, indem du die Anweisungen in der README.md-Datei befolgst, um sie im Browser anzuzeigen.

Anwenden der neuen Kenntnisse

Das Repository github/choosealicense.com ist ein gutes Beispiel für ein großes Jekyll-Projekt und zeigt, was mit Jekyll und GitHub Pages möglich ist. Kannst du all das anwenden, was du hinsichtlich der Struktur des Repositorys, der Verwendung von Sammlungen und der Methode zum Einschließen von Lizenzdaten gelernt hast, um dein eigenes Projekt zu erstellen?

Nächste Schritte

Da du nun verstehst, wie der Beispielcode funktioniert, solltest du ihn in deinem eigenen Projekt wiederverwenden. Das Wiederverwenden von Code ist ein wichtiger Teil der Softwareentwicklung, aber es müssen bestimmte Schritte befolgt werden, um sicherzustellen, dass die Vorgänge ordnungsgemäß und gesetzeskonform ausgeführt werden. Ein vollständiges Tutorial findest du unter Wiederverwenden des Codes anderer Personen in deinen Projekten.