{"meta":{"title":"Suchen und Verstehen von Beispielcode","intro":"Verbessere deine Programmierfähigkeiten mithilfe von Beispielcode auf GitHub.","product":"Erste Schritte","breadcrumbs":[{"href":"/de/get-started","title":"Erste Schritte"},{"href":"/de/get-started/learning-to-code","title":"Programmieren lernen"},{"href":"/de/get-started/learning-to-code/finding-and-understanding-example-code","title":"Suchen von Beispielcode"}],"documentType":"article"},"body":"# Suchen und Verstehen von Beispielcode\n\nVerbessere deine Programmierfähigkeiten mithilfe von Beispielcode auf GitHub.\n\n## Inwiefern kann ich meine Kenntnisse durch Code auf GitHub erweitern?\n\nDas Lernen durch Projekte auf GitHub stellt eine großartige Möglichkeit dar, **sich neue Techniken anzueignen** und **für eigene Projekte inspirieren zu lassen**.\n\nDa 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.\n\nAnstatt zu versuchen, ein ganzes Projekt zu verstehen, besteht ein besserer Ansatz darin, einzelne Features oder Funktionen auszuwählen und herauszufinden, wie sie funktionieren. Die Suchfunktionalität von Copilot Chat und GitHub kann verwendet werden, 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.\n\nIn 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.\n\n## Suchen eines Beispielprojekts\n\nDer erste Schritt besteht darin, das richtige Projekt zu finden, das als Lerngrundlage dient.\n\n### Verwenden Sie Copilot Chat, um ein Repository zu identifizieren.\n\nDie schnellste Möglichkeit, ein Projekt mit Code zu finden, von dem du lernen kannst, besteht darin, [Copilot Chat](https://github.com/copilot) aufzufordern, Repositorys zurückzugeben, die deinen Anforderungen entsprechen.\n\nÖffne [Copilot Chat](https://github.com/copilot), und starte einen allgemeinen Chat. Stelle dann die folgende Frage:\n\n> Kannst du einige beliebte Repositorys suchen, die Jekyll zum Anzeigen von Daten aus Dateien im Repository verwenden?\n\nCopilot gibt Links zu relevanten Repositorys zurück, und du kannst Folgefragen zu den Repositorys stellen.\n\nOft fügt Copilot am Ende der Antwort einen Link zur GitHub-Suche mit weiteren Ergebnissen ein. Als Nächstes überprüfen wir diese Ergebnisse.\n\n### Verwenden der Suche zum Identifizieren weiterer Optionen\n\nWenn Copilot einen Link zu den Suchergebnissen eingefügt hat, klicke auf diesen Link. Falls nicht, formuliere eine eigene Suchanfrage, indem du die folgenden Schritte befolgst.\n\n1. Navigiere zu [Advanced search](https://github.com/search/advanced).\n2. Verwende im Abschnitt „Erweiterte Optionen“ die Dropdownliste „Geschrieben in dieser Sprache“, um eine Programmiersprache auszuwählen. Wähle für die Jekyll-Website die Option „HTML“ aus.\n3. Optional kannst du unter „Repository-Optionen“ neben „With this many stars“ `>150` eingeben. Dies hilft dir dabei, beliebte Repositorys zu finden, die wahrscheinlich gut organisiert sind.\n4. Klicke oben auf der Seite auf **Search**.\n\n> \\[!TIP]\n> Du kannst die Suchergebnisse weiter eingrenzen, indem du der Suchanfrage Themen und Text hinzufügst. Für `topic:jekyll \"blog\"` werden beispielsweise Repositorys zurückgegeben, für die die Besitzenden einen Bezug zu Jekyll angegeben haben und die das Wort „blog“ im Repositorynamen oder der Beschreibung enthalten. Eine Liste beliebter Themen findest du unter [Themen auf GitHub](https://github.com/topics).\n\n### Auswählen eines Projekts\n\nNach der Überprüfung der Ergebnisse von Copilot und der Suche entscheiden wir uns, das Repository [`github/choosealicense.com`](https://github.com/github/choosealicense.com) zu verwenden. Dieses Repository enthält den Quellcode für [Choose a License](https://choosealicense.com/), eine Jekyll-Website, die Informationen zu open source Lizenzen teilt.\n\nWir interessieren uns besonders für die Seite [Licenses](https://choosealicense.com/licenses/), die beliebte open source Lizenzen aus Datendateien anzeigt. <!-- markdownlint-disable-line search-replace -->\n\n## Orientierung im Projekt\n\nBevor du dich mit dem Code zum Anzeigen von Datendateien beschäftigst, mache dich zunächst grundsätzlich mit dem Repository vertraut.\n\nEs 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.\n\n### Datei „README.md“\n\nEs 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 enthaltenen Informationen können je nach Verantwortlichen für die Projektverwaltung variieren, aber oft findet man Informationen zum Projekt, zur Durchführung auf dem eigenen Rechner und Links zur Dokumentation.\n\nIm Repository [`github/choosealicense.com`](https://github.com/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.\n\n### Verwenden von Copilot Chat\n\nWenn 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.\n\nKlicke zum Öffnen von Copilot Chat neben der Suchleiste auf das Symbol **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-copilot\" aria-label=\"Copilot\" role=\"img\"><path d=\"M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z\"></path><path d=\"M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z\"></path></svg>**, und stelle deine Frage. Zum Beispiel:\n\n> Was ist die Hauptstartseite für diese Jekyll-Website?\n\nWenn 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.\n\n### Wiki des Repositorys\n\nEine 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. Klicke im Repository auf die Registerkarte **<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-book\" aria-label=\"book\" role=\"img\"><path d=\"M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z\"></path></svg> Wiki**, um auf das Wiki zuzugreifen.\n\n### Veröffentlichungen\n\nWenn 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.\n\nDu findest die Releases eines Repositorys auf der Randleiste rechts neben der Liste der Dateien und der README.md-Datei.\n\n### Interne Dokumentation\n\nDu 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.\n\n## Navigieren im Quellcode\n\nDa du nun die Gesamtstruktur des Repository kennst, kannst du die GitHub-Suche verwenden, um nach der spezifischen gewünschten Funktion zu suchen.\n\nWenn 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.\n\nZunä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.\n\nIn deinem Beispiel suchst du oben auf der [Lizenzseite](https://choosealicense.com/licenses/) mithilfe der Abfrage [`repo:github/choosealicense \"If you’re looking for a reference table?\"`](https://github.com/search?q=repo%3Agithub%2Fchoosealicense.com+%22If+you%E2%80%99re+looking+for+a+reference+table%22\\&type=code) nach dem Text. Daraufhin wird ein Ergebnis angezeigt: eine Datei namens `licenses.html`.\n\nJetzt können wir auf das Ergebnis klicken und tiefer eintauchen!\n[\n`licenses.html`\n](https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html) ist die Quelle der Seite „Lizenzen“, nach der wir gesucht haben. Die gesuchte Zeichenfolge wird angezeigt, und jede der Lizenzen ist im folgenden Code enthalten:\n\n```markdown\n{% include license-overview.html license-id=\"agpl-3.0\" %}\n```\n\n## Verstehen des Quellcodes\n\nNachdem du nun den gewünschten spezifischen Code gefunden hast, kannst du ihn genauer untersuchen, um ihn zu verstehen.\n\n### Frage an Copilot Chat zu dem Code\n\nDu 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.\n\nLassen Sie uns Copilot fragen, was in Zeile 11 mit dem `{% include %}`-Tag passiert. Klicke auf die Zeilennummer. Klicke dann rechts von der Zeile auf <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-copilot\" aria-label=\"Ask Copilot about this snippet\" role=\"img\"><path d=\"M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z\"></path><path d=\"M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z\"></path></svg>. Stelle im Chatfenster die folgende Frage:\n\n> Was geschieht in dieser Zeile?\n\nCopilot erklärt, dass die Zeile die `license-overview.html`-Datei einschließt und `\"agpl-3.0\"` als `license-id` zum Anzeigen übergibt.\n\n> \\[!TIP]\n> Wenn du eine Antwort von Copilot Chat nicht verstehst, kannst du das Tool immer darum bitten, die Antwort zu vereinfachen oder einen bestimmten Teil davon ausführlicher zu erläutern.\n\n### Lesen von Kommentaren\n\nKommentare 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.\n\nEs gibt einige Arten von Kommentaren, nach denen du suchen kannst:\n\n* **Zeile:** Einzeilige Kommentare, die beschreiben, welchen Zweck eine bestimmte Zeile erfüllt\n* **Block:** Mehrzeilige Kommentare, die beschreiben können, welchen Zweck eine gesamte Funktion oder Datei erfüllt\n* **Datei:** Blockkommentar am Anfang einer Datei, der einen Überblick über diesen bestimmten Teil der Codebasis bietet\n\n### Nachschlagen von Funktionen in Programmiersprachreferenzen\n\nFür jede Programmiersprache ist eine Onlinereferenz verfügbar, in der jeder Aspekt der Sprache erläutert wird.\n\nWenn du eine Suchmaschine für die Suche nach der Programmiersprache und der Funktion verwendest, sollte ein Link zur Referenzseite dieser Funktion angezeigt werden.\n\nIn unserem Beispiel sollte die Suche nach `jekyll include`in einer Suchmaschine die [\"Includes“-Dokumentation](https://jekyllrb.com/docs/includes/) in der Jekyll-Dokumentation zurückgeben. Wenn du dich weiter mit der Jekyll-Dokumentation beschäftigst, wird deutlich, dass die Lizenzen selbst eine [Sammlung](https://jekyllrb.com/docs/collections/) im [`_licenses`](https://github.com/github/choosealicense.com/tree/gh-pages/_licenses)-Verzeichnis sind.\n\n> \\[!TIP] Wenn du eine Funktion in der Referenz zu einer Programmiersprache nicht finden kannst, ist es wahrscheinlich, dass die Funktion in der Codebasis selbst definiert ist. Fordern Sie [GitHub Copilot](https://github.com/copilot) auf, danach zu suchen.\n\nZusammengefasst lässt sich also Folgendes sagen: Die [`licenses.html`](https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html)-Datei enthält [`/_includes/license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html) für jede angezeigte Lizenz. Die [`/_includes/license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html)-Datei wird mit der bereitgestellten `license-id` für eine Lizenz in der [`/_licenses`](https://github.com/github/choosealicense.com/tree/gh-pages/_licenses)-Sammlung abgeglichen und die Details werden angezeigt.\n\n### Experimentieren mit kleinen Änderungen\n\nWenn du das Projekt lokal auf deinem Computer ausführen kannst, empfiehlt es sich, kleine Änderungen vorzunehmen, um herauszufinden, was passiert.\n\nDu 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).\n\nSuche die [`license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/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.\n\nDu 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.\n\n### Anwenden der neuen Kenntnisse\n\nDas Repository [`github/choosealicense.com`](https://github.com/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\n## Nächste Schritte\n\nDa 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](/de/get-started/learning-to-code/reusing-other-peoples-code-in-your-projects)."}