- Fang an, mit einem No-Code-Tool eine funktionierende KI-gestützte App zu entwickeln.
- Erfahre, wie Web-Apps Daten mithilfe des Browserspeichers speichern.
- Verstehe, wie KI ein Partner fürs Denken sein kann, nicht als Ersatz fürs Denken.
- Lerne, wie du dein Projekt mit GitHub verbindest, damit dein Code nie verloren geht.
- Eine funktionierende Founder's Toolkit-App, die in Github Codespaces erstellt wurde und Folgendes enthält:
- Modul zur Speicherung von Feedback, um die ersten Beiträge der Stakeholder zu organisieren
- Ein Modul, das eine „dritte Meinung“ einbringt und deine Problemdefinition hinterfragt.
- Ein GitHub-Repository mit deinem Founder's Toolkit-Projekt, wo dein Code gespeichert wird
- Die Schüler verstehen grundlegende KI-Konzepte und haben sich in den Unterrichtseinheiten zum Thema Unternehmertum (KI-Bewusstsein und unternehmerisches Denken) mit KI-Tools beschäftigt.
- Keine Vorkenntnisse in Programmierung oder Prompt Engineering nötig
Von der Erkundung zur Umsetzung
Bisher hast du in diesem Lehrplan gelernt, was KI ist und wie sie die Welt verändert. Du hast auch schon unternehmerisch gedacht, als du dein ursprüngliches Problem mit Freunden und Familie geteilt und sie gefragt hast:
- Können sie dieses Problem nachvollziehen?
- Welche Aspekte finden sie am wichtigsten?
- Welche Fragen oder Bedenken hast du?
- Was verstehst du an diesem Problem nicht?
Du hast sie dazu ermutigt, gegen den Strom zu schwimmen, und dir Notizen zu ihrem Feedback gemacht.
Jetzt ist es an der Zeit, KI einzusetzen. Du hast wertvolle Ideen, aber die sind wahrscheinlich über Notizen, Nachrichten und dein Gedächtnis verstreut. Und obwohl Freunde und Familie ehrlich sein können, halten sie sich bei den schwierigsten Fragen vielleicht trotzdem zurück.
KI als dein Denkpartner
Ein Denkpartner hilft dir dabei, Ideen zu erkunden, bessere Fragen zu stellen und Dinge zu erkennen, die du vielleicht übersehen würdest. KI kann das überraschend gut, und viele erfolgreiche Unternehmen nutzen sie bereits auf diese Weise. Um KI effektiv einzusetzen, musst du jedoch ihre Stärken und Grenzen verstehen.
In den ersten beiden technischen Einheiten lernst du, KI mithilfe vonVibe-Coding als Denkpartner einzusetzen.Beim Vibe-Coding bedeutet, dass du in einfacher Sprache beschreibst, was du willst, und die KI dann die Funktionen für dich generiert. In dieser Lektion werden wir Vibe Coding mit Github Copilot nutzen, um eine Founder's Toolkit-App zu erstellen, eine App, die dir helfen kann, dein eigenes Projekt zu verbessern.
Wichtig: Die KI-Tools, die du entwickelst, sollen menschliches Feedback ergänzen, nicht ersetzen. Du hast bereits mit echten Menschen gesprochen, was unerlässlich ist. KI fügt eine dritte Perspektive hinzu und hilft dir, das Gehörte zu verstehen.
Erste Schritte mit GitHub
Für das ganze Programm benutzt du GitHub und nutzen viele seiner Funktionen, einschließlich seiner Speichermöglichkeiten.
Neben der Hauptfunktion der Codeverwaltung hat Github auch den KI-AgentenGithub Copilot und die Cloud-Coding-Plattform Codespaces. Wir werden Codespacesverwenden, eine Entwicklungsumgebung, die in deinem Browser läuft. Du kannst Copilot in natürlicher Sprache mitteilen, was du erstellen möchtest, und den in Codespaces erstellten Code anzeigen, um ihn zu verstehen, zu testen und schließlich bereitzustellen.
Wir können sie hier beschreiben:
- GitHub => Die Startseite deines Projekts, so ähnlich wie Google Drive für Code
- Codespaces => Dein Arbeitsbereich wie Google Docs, aber zum Erstellen von Apps
- Copilot => Dein KI-Partner beim Programmieren, der deine Ideen in funktionierenden Code verwandelt
GitHub löst viele Probleme bei der Produktentwicklung. Es ist eine Plattform, wo Entwickler hauptsächlich Code speichern und teilen, aber in letzter Zeit hat sie sich zu einem KI-Codierungspartner entwickelt und ein Teil ihrer Mission ist es, die Softwareentwicklung für alle zugänglich zu machen. Deshalb haben sie in mehr KI-Fähigkeiten investiert, um alle zu unterstützen, und es gibt kostenlose Tarife mit großzügigen Limits.
Los geht's:
- Wenn du schon ein Github-Konto hast, kannst du diese Schritte überspringen. Ansonsten geh einfachzu github.com
- Klick auf „Anmelden“ und mach einfach die Schritte mit (es ist kostenlos und dauert nur etwa 2 Minuten).
- Benutze eine E-Mail-Adresse, die du regelmäßig checkst, und wir empfehlen dir, einen professionellen Benutzernamen zu wählen, da dieser Name das ist, was andere Entwickler sehen, wenn ihr irgendwann zusammenarbeitet.
Wenn du an einer Schule oder Universität eingeschrieben bist, melde dich für ein GitHub Education-Studentenkonto Studierendenkonto an. Mit dem „Student Developer Pack“ erhältst du ein kostenloses GitHub Pro-Konto, unbegrenzte Repositories und mehr Copilot-Credits. Außerdem bekommst du Zugang zu kostenlosen Entwickler-Tools von Drittanbietern.
Dein Feedback speichern
Halt dein Arbeitsblatt Lektion : Unternehmerisches Denken” und deine Interviewnotizen bereit.
In diesen Aktivitäten richtest du deine Entwicklungsumgebung ein und erstellst einen Feedback-Sammler, um die gesammelten Eingaben zu organisieren.
AKTIVITÄT 1
Starte deine Entwicklungsumgebung
Geschätzte Zeit: 15 Minuten
1. Öffne Github und mach dein erstes Repository.
Ein Repository (oder „Repo“) ist der zentrale Ort für dein Projekt auf GitHub.
- Lass uns eins erstellen , indem wir auf „Repository erstellen“ oder „Neu“ klicken .
- Gib einen Repo-Namen und eine Beschreibung dazu.
- Für einen Namen kannst du was wie „AIVA Founders Toolkit” nehmen , aber es muss einzigartig sein, also füge eine eigene Kennung hinzu.
- Für eine Beschreibungreicht die App „AIVA Founder's Toolkit ” aus.
- Wähle in der Konfiguration Folgendes aus:
- Sichtbarkeit = Privat, damit nur du das Repository sehen kannst
- Readme = Ja, damit Github automatisch eine Standarddatei erstellt, die für die Dokumentation verwendet wird.
- Füge eine .gitignore-Datei hinzu = Node
- Lizenz hinzufügen = MIT-Lizenz
Wir werden in späteren Einheiten näher darauf eingehen, was diese Details bedeuten. Wenn du etwas davon verpasst hast, ist das kein Problem, da wir sie später manuell hinzufügen können.
2. Einen neuen Zweig anlegen
- Klick auf den „main “-Zweig oben links in deinem Repo, um die Liste der verfügbaren Zweige anzuzeigen.
- Auswählen „Zweige anzeigen“ und dann einen neuen Zweig.
- Gib dem neuen Zweig einen Namen. Der Name ist nur für dich, also kannst du ihn beliebig wählen, aber es ist hilfreich, einen aussagekräftigen Namen zu wählen, wie z. B. tech-unit-1.
Dieser Schritt ist optional, aber wir empfehlen dir, bei größeren Updates immer an neuen Branches zu arbeiten. In späteren Einheiten werden wir genauer auf bewährte Vorgehensweisen eingehen.
3. Wähl den Zweig aus und öffne Codespaces.
Wir haben einen Zweig erstellt, wo eine Version des Codes gespeichert wird. Jetzt wollen wir mit dem Codieren in einer Entwicklungsumgebung mit Codespaces anfangen.
- Geh zu dem Zweig, den du gerade erstellt hast. Klick dazu einfach auf den Namen des Zweigs im Fenster „Alle Zweige anzeigen“.
- Klick auf den grünen „Code“ und wähle Neuen Codespace erstellen
- Warte, bis Github die Entwicklungsumgebung eingerichtet hat.
Du wirst sehen, dass dein Browser ein Fenster öffnet, das ein Programmier-Entwicklungswerkzeug ist, das wie Visual Studio Code aussieht und funktioniert. Das ist dein Entwicklungsarbeitsbereich, in dem wir mit dem Programmieren anfangen werden.
4. Schau dir die Benutzeroberfläche an
Sobald Codespaces geladen ist, wirst du sehen, dass es viele Panels gibt:
- Datei-Explorer: Deine Projektdateien
- Editor: Hier kannst du Dateien in der Vorschau anzeigen und bearbeiten.
- Terminal: Wo du Befehle ausführst
- Github Copilot: Hier sagst du der KI, dass sie dir beim Erstellen helfen soll.
- Oberes Bedienfeld: mit Menüleiste und Suchfunktion
Wichtige Hinweise:
- Dein Code wird schon in Codespaces gespeichert: Anders als bei anderen Tools, bei denen du deine Arbeit verlieren könntest, wird alles, was du in Codespaces machst, automatisch gespeichert. Irgendwann musst du deine Änderungen in deinem Repository-Zweig auf Github selbst festschreiben, aber du kannst Codespaces schließen und wieder öffnen, und dein Code ist immer noch da.
- Codespaces, die 30 Tage lang nicht benutzt werden, werden gelöscht.
- Es gibt noch mehr Funktionen: Du musst dich jetzt nicht mit diesen Registerkarten und Fenstern beschäftigen. Sie zeigen andere Arbeitsabläufe im Entwicklungsprozess, die wir in späteren Einheiten behandeln werden.
Jetzt, wo du deine Entwicklungsumgebung in Codespaces eingerichtet hast, kannst du in weniger als 10 Minuten mit der Erstellung einer funktionierenden App loslegen.
Grundlagen der Prompt-Technik
Du wirst KI nutzen, um diese funktionierende App zu entwickeln.
Hier ist die wichtigste Erkenntnis: KI ist nur so gut wie die Anweisungen, die du ihr gibst.
Wenn du vage Anweisungen gibst, bekommst du vage Ergebnisse. Wenn du konkrete, gut strukturierte Anweisungen gibst, bekommst du nützliche, zielgerichtete Ergebnisse.
Prompt Engineering ist das Schreiben von Anweisungen, die die KI dazu bringen, nützliche, spezifische Ergebnisse zu liefern. Wenn du deine Anweisungen verbesserst, machst du deine App besser. Es gibt viele Techniken, um KI-Anweisungen zu verbessern. Es gibt unzählige Bücher zu diesem Thema.
Aber im Grunde genommen beinhalten die meisten Techniken Folgendes:
Kontext
Zum Beispiel
„Gib mir Feedback zu meiner Idee.“
Mit Kontext:
„Ich bin ein Jungunternehmer und beschäftige mich mit dem Problem der Lebensmittelverschwendung in Schulkantinen. Ich habe zwei Schüler interviewt, die täglich damit konfrontiert sind. Gib mir Feedback zu meiner Idee.“
Ausgabestruktur
Zum Beispiel
„Nenne ein paar Herausforderungen.“
Mit Kontext:
„Nenne genau 3 Herausforderungen, jede in einem einzigen Satz mit weniger als 20 Wörtern.“
Klangregelung
Zum Beispiel
„Sag mir, was an meiner Idee nicht stimmt.“
Mit Kontext:
„Sei ein unterstützender Business-Mentor. Zeig mir die Schwächen meiner Idee auf und sag mir, wie ich sie beheben kann.“
Willst du mehr über Prompt Engineering erfahren? Schau dir den Anhang und die Links unter „Weitere Ressourcen“ an.
AKTIVITÄT 2
Eine Funktion zum Speichern von Feedback einrichten
Geschätzte Zeit: 30 Minuten
1. Öffne Github und deinen Codespace aus Aktivität 1.
Wenn du es schon geöffnet hast, kannst du diesen Schritt überspringen. Ansonsten
- Melde dich bei Github an.
- Klick oben links auf das Hamburger-Menü und wähl im Dropdown-Menü „Codespaces“ aus.
- Wenn das Codespaces-Fenster aufmacht, klick einfach auf den zufälligen Namen, den Github deinem Codespace gegeben hat, um ihn wieder zu öffnen.
2. Sag der KI, sie soll deinen „Feedback-Speicher“ aufbauen.
Fang mit dieser einfachen Textanweisung unten in der Chat-Eingabeaufforderung an.
Das ist eine Eingabeaufforderung, die du an Github Copilot gibst. Github Copilot nimmt deine Anweisungen entgegen und macht zusätzliche Annahmen, um Lücken zu füllen.
Kopiere den Text und füge ihn genau so ein, wie er in der Chat-Eingabeaufforderung im Github Copilot-Fenster auf der rechten Seite angezeigt wird.
Mach mal 'ne einfache App, mit der Unternehmer Feedback von zwei Leuten zu ihren groben Geschäftsideen sammeln können.
– Der Titel sollte „AI Founder’s Toolkit” lauten.
– Die Nutzer müssen das Problem eingeben, das sie lösen wollen, und dann das Feedback von zwei Leuten zu diesem Problem.
Tipp:
Es ist echt schwierig, den Überblick über alle aktuellen Modelle und Funktionen von GitHub Copilot zu behalten. Seit dem 7. Januar 2025 hat GitHub verschiedene LLM-Modelle, aber die Modellauswahl ist standardmäßig auf „Auto“ eingestellt. So kannst du flexibel das Modell auswählen, das für dich am besten passt und vielleicht am besten für die jeweilige Aufgabe geeignet ist. Wir empfehlen dir, die Modellauswahl zu aktivieren, um eine Auswahl zu haben und das Modell zu wählen, das dir am besten gefällt. Du musst die Nutzungsbedingungen akzeptieren, indem du auf „Use AI Features“ (KI-Funktionen verwenden) klickst, um die Modellauswahl zu aktivieren. Dies ist zwar nicht erforderlich (trotz des verwirrenden Button-Textes), um die KI-Funktionen zu nutzen, aber es ist erforderlich, um die Modellauswahl zu ermöglichen.
3. Warte, bis deine App von der KI erstellt wurde.
Copilot erstellt deine App und zeigt dir den Fortschritt an.
Das kann je nach unseren Anweisungen etwa 1–2 Minuten dauern. Du siehst, wie der Code in Echtzeit geschrieben wird, und kannst so lernen, wie das KI-Modell wie ein Softwareentwickler/Unternehmer denkt.
Du sagst dem KI-Modell in einfachen Worten, was du willst. Das KI-Modell liest deine Beschreibung und macht den Code automatisch. Das nennt man „No-Code-Entwicklung”, weil du die App beschreibst, anstatt sie zu programmieren.
Die KI macht verschiedene Annahmen, wie zum Beispiel, dass sie eine Web-App mit einem gängigen Framework wie HTML, CSS und Javascript baut. Sie kümmert sich auch um die stilistischen Details, die du nicht angegeben hast, wie die Auswahl von Farben, Schriftarten und Layout. Du musst den Code nicht verstehen; schau einfach zu, wie er funktioniert, und lass dir Ideen kommen, was du später noch hinzufügen kannst.
Wenn du das zum ersten Mal machst, wirst du vielleicht gefragt, ob du bestimmte Berechtigungen erlauben willst, wie zum Beispiel das Erstellen, Bearbeiten oder Löschen von Dateien ODER sogar das Ausführen bestimmter Befehle in deinem Namen.
Wichtiger Tipp:
Im Laufe deiner Entwicklung wirst du vielleicht feststellen, dass du mehr Kontrolle darüber haben möchtest, was das Programm macht, um das Risiko zu verringern, dass es außer Kontrolle gerät. Du kannst also mit den Einstellungen herumspielen, mit denen du dich am wohlsten fühlst. Professionelle Entwickler erlauben oft einfache Befehle wie „editieren”, die leicht rückgängig gemacht werden können, haben aber detailliertere Kontrollen für Bash-Befehle, da deren Ausführung in API-Kosten teurer sein kann. In späteren Einheiten werden wir darauf eingehen.
4. Test deine App
Da es sich um eine Web-App handelt, hat sie dich vielleicht gefragt, ob du ihr erlaubst, eine Web-App zu öffnen (siehe Screenshot unten), was wir in den vorherigen Schritten aktivieren sollten.
Sobald Copilot die Codierung der App abgeschlossen hat, kannst du mit dem Testen beginnen, indem du:
- Starte die App, indem du„python3 -m http.server 8000”in das Terminalfenster unten auf dem Bildschirm eingibst. Das ist die einfachste Methode, um deine Starter-App auszuführen.
- Es öffnet sich ein neuer Browser-Tab, in dem deine App läuft.
- Du kannst dein Problem hier beschreiben.
- Füge Feedback von all deinen ersten Freunden und Familienmitgliedern aus dem Arbeitsblatt „Unternehmerische Denkweise“ hinzu.
- Klick hier, um das Feedback zu speichern.
- Schau mal, ob die Infos im Ausgabefeld auftauchen.
Fehlerbehebung:
Wenn deine App nicht angezeigt wird:
- Du kannst Copilot fragen: „Wie starte ich meine App?“ oder „Hilf mir beim Debuggen, warum ich das Formular nicht sehen kann, und finde alle identifizierten Probleme“.Das nennen wir KI-gestütztes Debugging , was du in späteren Einheiten lernen wirst.
Wenn deine App nicht geladen wird:
- Versuch mal, die Seite neu zu laden. Wenn das nicht klappt, fang einfach von vorne an.
Wenn das Ergebnis nicht so ist, wie du es dir vorgestellt hast:
- Das ist okay. Du wirst später lernen, wie du Anpassungen vornehmen kannst.
5. Verfeinere deine Eingabeaufforderung
Das KI-Modell, das wir für unsere App benutzt haben, ist echt stark. Die Annahmen, die es gemacht hat, könnten zu Ergebnissen führen, die du nicht willst, aber der Prozess und die Ergebnisse könnten uns helfen, die App weiter zu verbessern, um die Ergebnisse zu optimieren.
Bei uns hat die KI einfach angenommen, dass die Infos gespeichert werden und dem Nutzer die Möglichkeit gegeben, sie nach der Eingabe als CSV-Datei zu speichern. Bei dir hat es vielleicht anders funktioniert. Aber wir müssen unsere Anweisungen genauer und präziser machen, damit wir das bekommen, was wir wollen.
Kopiere die unten angezeigte Eingabeaufforderung und füge sie in die Chat-Eingabeaufforderung im Github Copilot-Fenster auf der rechten Seite deines Codespaces-Bildschirms ein.
Füge noch eine Zeile zur Eingabeaufforderung hinzu, um die Anweisungen noch klarer zu machen und deine App noch besser zu machen!
Verbessere diese App, die Unternehmern dabei hilft, Feedback von zwei Interessengruppen zu meinen groben Geschäftsideen zu sammeln.
Die App sollte Folgendes haben:
– Ein Titel oben: „AI Founders Toolkit“
– Ein Untertitel: „Fang an, Feedback zu meinem Problem zu sammeln.“
– Ein Textfeld, wo ich mein Problem eingeben und mein geschäftliches Problem beschreiben kann, das ich lösen will.
– Ein Abschnitt für „Stakeholder 1” mit Textfeldern für:
- Können sie dieses Problem nachvollziehen?
- Welche Aspekte finden sie am wichtigsten?
- Welche Fragen oder Bedenken hast du?
- Was verstehst du an diesem Problem nicht?
– Ein Abschnitt für „Stakeholder 2” mit denselben vier Textfeldern
– Ein Knopf mit der Aufschrift „Problem und Feedback speichern“
– Ein Bereich, wo nur das eingegebene Problem und das Feedback von den Beteiligten angezeigt werden.
4. Test deine App nochmal
Sobald Copilot die App aktualisiert hat, kannst du den Browser-Tab, in dem die App läuft, neu laden, um die Änderungen zu sehen.
Denk dran: Wenn du Probleme mit der App hast oder die Ausgabe nicht richtig aussieht, frag Copilot um Hilfe, um das Problem zu lösen.
6. Speichere deine Änderungen
Lass deine App laufen und teste sie, bis du mit dem Ergebnis zufrieden bist.
Auch wenn Codespaces deinen Code speichert, müssen wir alle Änderungen trotzdem in unserem Github-Repository committen. Committen und Pushing laden die Code-Änderungen in dein Repository hoch. Sobald sie gepusht sind, werden sie dauerhaft in Github gespeichert und nachverfolgt.
Zum Committen und Pushen:
- Klick im linken Bereich auf Quellcodeverwaltung .
- Unter dem Registerkarte „Änderungen“ eine Commit-Nachricht manuell hinzufügen oder die KI nutzen, um eine für dich zu erstellen.
Für uns hat die KI eine coole Commit-Nachricht geschrieben:
3. Du bekommst vielleicht die Meldung „Es gibt keine vorbereiteten Änderungen zum Übernehmen“. Wenn ja, klick auf Ja , um die Änderungen zu übernehmen.
4. Klick auf „Änderungen synchronisieren“ , um die Codepace-Plattform mit Github zu synchronisieren.
5. Geh zurück zu Github, zu deinem Repository und deinem Branch, um zu checken, ob die Dateien dort angezeigt werden. Es sollten alle Dateien angezeigt werden, die erstellt, geändert oder gelöscht wurden. Es gibt hier einige Ausnahmen (Tipp: Dateien, die in der Datei „gitignore“ aufgeführt sind).
Dieser Schritt stellt sicher, dass deine Änderungen im Branch gespeichert werden, und verringert das Risiko, dass deine Arbeit verloren geht, falls etwas mit deiner Codespace-Umgebung passiert. In späteren Lektionen lernst du, was diese „Git“-Befehle sind.
Du hast gerade eine App entwickelt!
Nimm dir einen Moment Zeit, um zu würdigen, was du gerade gemacht hast.
Dieser Feedback-Speicher bietet dir einen übersichtlichen Ort, um alle gesammelten Rückmeldungen zu speichern, und du wirst ihn während des gesamten Programms immer weiter füllen.
Wichtige Hinweise:
- Du hast keinen Code geschrieben. Du hast nur beschrieben, was du wolltest.
- Die KI hat Annahmen getroffen, um Details zu ergänzen, die du nicht angegeben hast (Farben, Layout, Platzhaltertext usw.).
In unserem Fall hat es ein paar Sachen hinzugefügt, die wir in unseren Anweisungen nicht angegeben hatten, wie zum Beispiel:
- Platzhaltertexte für jeden Texteintrag
- Schaltfläche „Feedback bearbeiten“
- Eine Erfolgsmeldung, nachdem das Feedback abgeschickt wurde
Deine Ergebnisse können anders aussehen als die deiner Freunde und sogar anders aussehen, wenn du neue Apps erstellst und die gleichen Eingabeaufforderungen hinzufügst, und das ist okay. Die KI versteht deine Anweisungen und trifft Designentscheidungen. Wenn dir diese nicht gefallen, kannst du jederzeit um Änderungen bitten oder diese selbst im Code vornehmen.
Daten speichern
Im Moment verschwinden jedes Mal, wenn du deine App aktualisierst, alle deine Daten. Das ist für ein echtes Tool nicht so praktisch.
In der nächsten Aktivität fügst du lokalen Speicher hinzufügen, damit sie komplexere Daten aus deiner App speichern kann.
Lokaler Speicher schützt alle eingegebenen Daten, während du im Browser arbeitest. Dein Code ist schon sicher auf GitHub, wenn du Codespaces benutzt hast, aber jetzt werden deine eingegebenen Daten sicher im Browser gespeichert, sodass du darauf zugreifen kannst.
Wie Web-Apps Daten speichern
Wenn du eine Web-App entwickelst (wie die, die Google AI Studio erstellt), kannst du aus Sicherheitsgründen keine Dateien direkt auf dem Computer eines Nutzers speichern. Stattdessen nutzen Web-Apps Browser-Speicher, eine eingebaute Funktion, mit der Websites Daten lokal in deinem Browser speichern können.
Um deiner App mehr Speicher hinzuzufügen, müssen wir ein paar grundlegende Sachen verstehen:
- Die WAS: Arten von Browserspeichern
- Die WIE: Wie werden die Daten gespeichert?
- Die WO: Wo werden die Daten gespeichert?
Was ist lokaler Browserspeicher?
Es gibt zwei Hauptarten von Browserspeicher:
- Lokaler Speicher: Die Daten bleiben auch nach dem Schließen des Browsers gespeichert.
- Sitzungsspeicher: Die Daten verschwinden, wenn du den Browser-Tab schließt.
Für unser Gründer-Toolkit nutzen wir beide Optionen, damit dein Feedback zwischen den Sitzungen erhalten bleibt.
Wie funktioniert das?
Der Browserspeicher speichert Daten als Schlüssel-Wert-Paare, ähnlich wie in einem Wörterbuch, wo jede Information einen Namen (den Schlüssel) und einen Wert hat.
Zum Beispiel:
- Schlüssel => Problem
- Wert => „Bauern können ihre Sachen nicht verkaufen“
Sowohl der Schlüssel als auch der Wert müssen Text (Zeichenfolgen) sein und werden als JSON gespeichert. JSON (JavaScript Object Notation) ist ein Standardformat, um Daten darzustellen, das sowohl für Menschen als auch für Computer leicht zu lesen ist.
Die ganze JSON-Struktur wird als einzelner String-Wert in localStorage gespeichert, mit weiteren Verschachtelungen, wenn es mehr Schlüssel-Wert-Paare gibt.
Wenn du zum Beispiel ein Problem und Feedback von zwei Leuten speicherst, könnte das zu dieser JSON-Zeichenkette führen:
{
"problem": "Farmers from local rural communities can't sell their farming goods",
"feedback": [
{"person": "J Smith", "resonates": "Yes, sees it daily"},
{"person": "M Jones", "resonates": "Note sure it's a big issue"}
]
}
Wo werden die Daten gespeichert?
Lokaler Speicher befindet sich in deinem Browser und unterscheidet sich von lokalen Dateien auf einem Computer.
Du kannst es tatsächlich im Browser sehen. Hier erfährst du, wie du es mit Chrome als Browser sehen kannst.
- Klick mit der rechten Maustaste irgendwo auf einer beliebigen Website und wähl „Untersuchen“ (oder drück F12).
- Klick auf die „Anwendung“ (in Chrome).
- Such nach „Lokaler Speicher“ in der Seitenleiste
- Klick drauf, um deine gespeicherten Daten zu sehen (vielleicht hast du noch nichts gespeichert, dann ist es leer).
Einschränkung:
Der Browser-Speicher wird nicht zwischen verschiedenen Geräten synchronisiert. Wenn du den Computer wechselst oder deine Browser-Daten löschst, sind deine Infos weg. In späteren Lektionen lernst du etwas über Cloud-Speicher, um dieses Problem zu lösen.
Das heißt, wenn du den Computer wechselst, einen anderen Browser benutzt oder deine Browserdaten durch Aktualisieren der Seite löschst, gehen deine gespeicherten Infos verloren. In späteren Lektionen lernen wir dauerhaftere Speicheroptionen wie Datenbanken und Cloud-Speicher kennen.
JSON ist die Art und Weise, wie die meisten Apps Daten speichern und austauschen. LLMs können JSON-Dateien auch sehr gut lesen und interpretieren. Wenn du das jetzt lernst, legst du den Grundstein für viele Fähigkeiten, wie zum Beispiel:
- Benutzereinstellungen speichern
- Zwischenspeichern von laufenden Arbeiten, damit Nutzer keine Daten verlieren
- Daten zwischen Geräten synchronisieren (in späteren Einheiten)
- Verbindung zu externen Diensten und APIs
AKTIVITÄT 3
Lokalen Speicher hinzufügen
Geschätzte Zeit: 20 Minuten
1. Öffne Github Codespaces
Geh auf Github.com, such deine Codespaces und öffne die Codespaces für deine Founder's Toolkit-App.
2. Sag der KI, dass sie lokalen Speicher hinzufügen soll.
Kopier diese Eingabeaufforderung und füge sie in den Copilot-Chat ein, der sich im rechten Fensterbereich befinden sollte.
Nachdem du das Problem und dein Feedback abgeschickt hast, mach einen neuen Eintrag und speicher alle Daten im lokalen Speicher des Browsers.
– Mach Felder für das Problem und jede Feedback-Antwort in einer übersichtlichen Art und Weise.
– Nachdem der Nutzer die Infos gespeichert hat, sollten die eingegebenen Datensätze unter dem Eingabeformular erscheinen.
3. Testdaten-Persistenz
Sobald die KI den Code hinzugefügt hat, kannst du mit dem Testen anfangen, indem du dein Problem und dein Feedback einreichst.
- Schreib dein Problem und dein Feedback für jeden Beteiligten rein.
- Klick hier, um Probleme und Feedback zu speichern
- Aktualisiere die Seite (drück einfach F5, klick auf den Aktualisieren-Button deines Browsers oder klick auf den Button „App neu laden“ in Codespaces oben rechts über dem Vorschaufenster).
- Schau mal, ob deine eingegebenen Daten da sind.
- Wenn es nicht angezeigt wird, nutze Copilot, um das Problem zu lösen und es zum Laufen zu bringen.
Du solltest sehen können, was Copilot gemacht hat, wenn es fertig ist.
Für uns hat die KI Code hinzugefügt, der Folgendes gemacht hat:
- Das Skript script.js aktualisiert.
- Hab die Formulareingaben in eine JSON-formatierte Zeichenfolge mit den entsprechenden Schlüsseln umgewandelt und einen Zeitstempel hinzugefügt.
- In deinem Browser lokal gespeichertes JSON
- Ruft die Daten ab, wenn die App geladen wird.
Um das zu checken, mach einfach die Schritte oben (WO sind die Daten gespeichert?) , um die Entwicklertools in deinem Browser zu öffnen und den lokalen Speicher zu überprüfen. Unten siehst du, wie das bei uns in lokalen Speicher mit dem Schlüssel „feedback_records”
Hier ist eine übersichtlichere Ansicht der erstellten JSON-Datei.
[
{
"problem": "Farmers in rural Chiapas, Mexico struggle to sell their farming products at fair prices",
"stakeholder1": {
"resonate": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"aspects": "Finding buyers who pay fairly and on time, not months later.",
"concerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missing": "Many farmers don't have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonate": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"aspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"concerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missing": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-07T23:08:35.579Z"
},
{
"problemStatement": "farmers selling their products",
"stakeholder1": {
"resonance": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"importantAspects": "Finding buyers who pay fairly and on time, not months later.",
"questionsConcerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missingPoints": "Many farmers don’t have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonance": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"importantAspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"questionsConcerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missingPoints": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-03T19:27:37.272Z"
}
]
4. Speichere deine Änderungen
- Geh im linken Bereich auf „Quellcodeverwaltung“.
- Gib eine Beschreibung der Änderungen ein und klick auf die Schaltfläche „Commit“, um diese Änderungen in deinem Repository zu speichern.
- Änderungen synchronisieren.
Jetzt kannst du Feedback von Nutzern für dein Projekt eingeben und speichern. Das wird dir beim Weiterführen deines Projekts helfen. Wir werden diese Founder's Toolkit-App in späteren Lektionen weiter ausbauen, um mehr Fähigkeiten im Umgang mit KI zu erwerben.
Einschränkungen beim Browser-Speicher
Es gibt ein paar wichtige Sachen, die du über den lokalen Speicher im Browser wissen solltest:
Was es gut kann
- Speichert Daten zwischen Seitenaktualisierungen
- Schnell und einfach
- Funktioniert auch offline
- Kein Konto/Login nötig
Was es nicht macht
- Sichert nicht in die Cloud und synchronisiert nicht zwischen Geräten.
- Kann gelöscht werden, wenn du die Browserdaten löschst.
- Funktioniert nur im selben Browser
Reflexion
Du hast viel Zeit damit verbracht, eine Founder's Toolkit-App zu programmieren, um verschiedene Infos zu speichern und zusammenzufassen. Hier sind ein paar Fragen, über die du nachdenken solltest:
Wichtige Begriffe
- GitHub: Eine Plattform, die zum Speichern und Teilen von Code gestartet wurde.
- Codespaces: Eine Funktion der GitHub-Plattform, mit der du eine Entwicklungsumgebung nutzen kannst, die VS Code in deinem Browser ausführt, um deinen Code zu laufen zu lassen.
- GitHub Copilot: Ein KI-Coding-Assistent, der Codes basierend auf Beschreibungen in natürlicher Sprache generiert und von LLMs unterstützt wird.
- Repository (Repo): Ein Ordner für dein Projekt auf GitHub, der alle deine Code-Dateien enthält und in verschiedene Zweige unterteilt ist, in denen du mit anderen Entwicklern zusammenarbeiten kannst.
- Gründer-Toolkit: Die App, die sich weiterentwickelt, während die Schüler die technischen Einheiten durcharbeiten.
- Vibe-Coding: Beschreib einfach, was du willst, und lass die KI den Code machen. Auch „No-Code-Entwicklung” genannt.
- Browserspeicher: Eine eingebaute Funktion, mit der Web-Apps Daten direkt in deinem Browser speichern können, ohne dass ein Server nötig ist.
- localStorage: Eine Art von Browserspeicher, der auch nach dem Schließen des Browsers erhalten bleibt. Deine Daten bleiben so lange gespeichert, bis du sie löschst.
- sessionStorage: Eine Art von Browserspeicher, der während einer einzelnen Seitensitzung gespeichert bleibt. Die Daten werden gelöscht, wenn der Tab oder das Browserfenster geschlossen wird.
- JSON (JavaScript Object Notation): Ein Standardformat zum Organisieren von Daten, das sowohl für Menschen als auch für Computer lesbar ist. Wird „Jason“ ausgesprochen.
- Schlüssel-Wert-Paar: Eine Art, Daten zu speichern, bei der jedes Stück einen Namen (den Schlüssel) und einen Wert hat. Wie ein Etikett auf einem Ordner.
- Prompt Engineering: Das Schreiben von klaren, spezifischen Anweisungen, die der KI helfen, nützliche Ergebnisse zu liefern.
- Nicht deterministisch: KI macht nicht immer das Gleiche, auch wenn die Eingaben gleich sind. Jede Antwort kann ein bisschen anders sein.
Zusätzliche Ressourcen
- Lerne Prompting: Kostenloser, umfassender Kurs
- Googles Leitfaden für schnelles Design: Offizielle Tipps von Google
- GitHub Copilot: Hier erfährst du mehr über die Funktionen von Copilot, einschließlich Tipps, wie du ein Power-User wirst.
- Git-Anleitungen: Infos zur Nutzung von GitHub und zum Ausführen von Git-Befehlen, um Projekte zu verwalten
Anhang
Prompt-Engineering
Prompt Engineering ist der Prozess, bei dem man coole Eingabeaufforderungen macht, um KI-Modelle dabei zu helfen, genaue und passende Antworten zu generieren.
Es wird hauptsächlich für textbasierte KI- und Natural Language Processing (NLP)-Aufgaben genutzt.
Das Ziel ist, die Eingabeaufforderungen clever zu schreiben, damit das Modell Ergebnisse liefern kann, die genau zu den Bedürfnissen der Nutzer passen.
Was sind Eingabeaufforderungen?
- Prompts sind kurze Textabschnitte, die einem KI-Modell Kontext und Richtung geben.
- Sie helfen dem Modell dabei, Antworten zu generieren, die zu dem, was der Nutzer will, passen.
Gute Aufforderungen sollten
- Gib klare Anweisungen, ohne zu viele Infos zu geben.
- Sei nicht zu allgemein oder zu detailliert.
- Mach das Ziel und den Kontext des Benutzers klar.
Warum ist Prompt Engineering wichtig?
- Spezifische Eingabeaufforderungen helfen dem Modell, die Aufgabenanforderungen besser zu verstehen.
- Führt zu Ergebnissen, die ziemlich genau den gewünschten Ergebnissen entsprechen.
- Bessere Eingabeaufforderungen bedeuten effektivere NLP-Aufgaben und besser trainierte Modelle für zukünftige Aufgaben.
Genau wie wenn du einem talentierten, aber unerfahrenen Assistenten Anweisungen gibst, gibst du klare, präzise Anweisungen, um das gewünschte Ergebnis zu erzielen.
Techniken
Prompt Engineering ist mehr als nur das Erstellen von Prompts – es ist ein Spielplatz voller Tools, mit denen du die Arbeit mit LLMs für bestimmte Ziele anpassen kannst.
Stufe 1: Grundlegend
- Sei konkret
- Kontext bereitstellen
- Gib Beispiele
- Einmalige Eingabeaufforderung – Gib mal ein Beispiel für Input/Output.
- Beispiel:
„Text: Jane Smith, 45, ist Softwareentwicklerin in London.
JSON: „name”: „Jane Smith”, „age”: 45, „role”: „Web Developer”, „city”: „London”
Text: John Doe, 29, ist Student in Paris.
JSON: [Neue Eingabe hier]
- Beispiel:
- Few-Shot-Prompting – Gib ein paar Beispiele, damit LLM das Muster lernen kann.
- Nützlich für kompliziertere Aufgaben, bei denen mehrere Beispiele helfen könnten.
- Einmalige Eingabeaufforderung – Gib mal ein Beispiel für Input/Output.
- Gib das Format an
- Iterativ verfeinern
Stufe 2: Mittelstufe (Bei Bedarf verwenden)
- Gedankengang – frag den LLM, seine Argumentation und/oder Schritte zu zeigen
- Rollenverteilung – zum Beispiel „Du bist ein Experte …“
- Negative Aufforderung – z. B. „Nicht einbeziehen ...“
- Temperaturregelung – zum Beispiel Kreativität vs. Beständigkeit
Stufe 3: Fortgeschritten (optional, für später)
- Selbstkonsistenz – Frag nach mehreren Ergebnissen und lass dann das LLM das „beste“ Ergebnis auswählen.
- Baum der Gedanken – fordert LLM auf, mehrere Denkansätze zu prüfen, um eine endgültige Antwort zu finden
- Retrieval Augmented Generation (RAG) – bittet LLM, externe Infos zu nutzen, um einen besseren Kontext zu schaffen
Hier ist eine komplette Liste von Techniken, um Leute zum Reden zu bringen: https://www.ibm.com/think/topics/prompt-engineering-techniques
