Erstellen und Bereitstellen KI-basierter Apps mit GitHub Spark

Einführung

Mit GitHub Spark kannst du deine Ziele in natürlicher Sprache beschreiben und erhältst eine vollständige Web-App mit Datenspeicherung, KI-Features und integrierter GitHub-Authentifizierung. Du kannst mit Prompts, visuellen Tools oder Code iterieren und das Ergebnis mit einem Klick in einer vollständig verwalteten Laufzeitumgebung bereitstellen.

Spark ist nahtlos mit GitHub integriert, sodass du deine Spark-Anwendung über einen synchronisierten GitHub-Codespace mit Copilot für die erweiterte Bearbeitung entwickeln kannst. Du kannst auch ein Repository für die Zusammenarbeit im Team erstellen und das GitHub-Ökosystem aus Tools und Integrationen nutzen.

In diesem Tutorial erfährst du, wie du eine App mit Spark erstellst und bereitstellst und ihre Features erkundest.

Voraussetzungen

• Ein GitHub-Konto mit Copilot Pro+.

Schritt 1: Erstellen deiner Web-App

In diesem Tutorial erstellst du eine einfache Marketingtool-App, für die Folgendes gilt:

• Der Benutzer gibt die Beschreibung eines Produkts ein, das er vermarkten möchte.
• Die App generiert einen Marketingtext und empfiehlt eine visuelle Strategie und eine Zielgruppe.

1. Navigieren Sie zu http://github.com/spark.

2. Gib im Eingabefeld eine Beschreibung deiner App ein. Zum Beispiel:

   Text

   Build an app called "AI-Powered Marketing Assistant."
   
   The app should allow users to input a brief description of a product or service. When the user submits their brief, send this information to a generative AI model with a prompt that asks the AI to return the following:
      - Persuasive and engaging marketing copy for the product or service.
      - A visual strategy for how to present the product/service (e.g., suggested imagery, colors, design motifs, or mood).
      - A recommendation for the ideal target audience.
   The app should display these three elements clearly and in an organized manner.  The app should look modern, fresh and engaging.
   

   Tipp

   • Sei spezifisch, und gib so viele Details wie möglich an, um die besten Ergebnisse zu erzielen. Du kannst Copilot Chat verwenden, um deinen ersten Prompt zu optimieren oder Verbesserungen vorzuschlagen.
   • Alternativ kannst du ein Markdown-Dokument im Eingabefeld einfügen, um Spark mit mehr Kontext zu deinen Vorstellungen zu versorgen.

3. Optional kannst du ein Bild hochladen, um Spark eine visuelle Referenz für deine App bereitzustellen. Auch mit Modellen, Skizzen oder Screenshots kannst du Spark eine Vorstellung davon geben, was du erstellen möchtest.

4. Klicke auf , um deine App zu erstellen.

   Hinweis

   Spark generiert immer eine Typescript- und React-App.

Schritt 2: Optimieren und Erweitern deiner App

Sobald Spark deine App generiert hat, kannst du sie im Livevorschaufenster testen. Von hier aus kannst du deine App mit natürlicher Sprache, Steuerelementen zur visuellen Bearbeitung oder Code durchlaufen und erweitern.

1. Wenn du mithilfe von natürlicher Sprache Änderungen an deiner App vornehmen möchtest, gib in der linken Randleiste auf der Registerkarte „Iterate“ deine Anweisungen in das Haupteingabefeld ein, und übermittle sie dann.
2. Optional kannst du auf der Registerkarte „Iterate“ direkt über dem Eingabefeld auf einen der „Vorschläge“ klicken, um deine App weiterzuentwickeln.
3. Spark benachrichtigt dich automatisch, wenn Fehler erkannt werden. Um die Fehler zu beheben, klicke auf der Registerkarte „Iterate“ über dem Eingabefeld auf Fix All.
4. Optional kannst du auf Code klicken, um den zugrunde liegenden Code anzuzeigen und zu bearbeiten. Im Codebearbeitungsbereich sind Copilot-Codevervollständigungen integriert.
5. Um gezielte Änderungen an einem bestimmten Element deiner App vorzunehmen, klicke auf das Zielsymbol in der oberen rechten Ecke. Zeige dann auf ein Element im Livevorschaubereich, und wähle es aus.

Schritt 3: Anpassen der Formatierung deiner App

Als Nächstes kannst du die Formatierung der App mithilfe der integrierten Spark-Tools ändern. Alternativ kannst du den Code direkt bearbeiten.

1. So änderst du die Gesamtdarstellung der App:

   • Klicke auf die Registerkarte Theme, um Typografie, Farben, Rahmenradius, Abstände und andere visuelle Elemente anzupassen.
   • Wähle aus den vorab generierten Designs aus, um den Gesamtstil deiner App schnell und einfach zu ändern.

2. Um visuelle Bearbeitungen gezielt an einer bestimmten Komponente vorzunehmen, klicke auf das Zielsymbol, und wähle dann im Vorschaubereich ein Element der App aus. Formatierungssteuerelemente für dieses bestimmte Element werden in der linken Randleiste angezeigt.

3. Optional kannst du Formatvorlagen im Code bearbeiten:

   • Klicke auf , um den Code-Editor zu öffnen.

   • Ändere CSS, Tailwind CSS oder benutzerdefinierte Variablen für eine differenzierte Steuerung (z. B. Auffüllung, Abstände, Schriftarten, Farben).

     Tipp

     Du kannst benutzerdefinierte Schriftarten (wie Google Fonts) importieren oder erweiterte Formatvorlagen direkt im Spark-Code-Editor hinzufügen. Frage Copilot Chat nach Schritt-für-Schritt-Anleitungen, wenn du mit der Formatierungssyntax nicht vertraut bist.

4. Klicke auf die Registerkarte Assets, um Ressourcen hochzuladen, die du in deiner App anzeigen möchtest.

   • Füge Bilder, Logos, Videos, Dokumente oder andere Ressourcen hinzu, um deine App zu personalisieren.
   • Weise nach dem Hochladen Spark auf der Registerkarte „Iterate“ an, wie diese Ressourcen in deine App integriert werden sollen.

Schritt 4: Speichern und Verwalten von Daten

Wenn Spark erkennt, dass in deiner App Daten gespeichert werden müssen, wird automatisch ein Datenspeicher mithilfe eines Schlüssel-Wert-Speichers eingerichtet.

Füge deiner Marketing-App Datenspeicherung hinzu, damit Benutzer ihre bevorzugten Marketingtexte speichern und später wieder darauf zugreifen können:

1. Verwende auf der Registerkarte „Iterate“ die folgende Anweisung, um Spark anzuleiten:

   Text

   Add a "Favorites" page where users can save and view their favorite marketing copy results.
   

2. Sobald die Generierung abgeschlossen ist, interagiere mit der App, um das Speichern und Abrufen von Favoriten zu testen.

3. Überprüfe die Registerkarte „Data“, um die gespeicherten Werte anzuzeigen und zu bearbeiten.

4. Wenn du explizit ausschließen möchtest, dass Spark Daten speichert, weise Spark an, „Daten lokal zu speichern“ oder „Daten nicht aufzubewahren“.

Schritt 5: Optimieren von KI-Funktionen

Durchlaufe als Nächstes die KI-Funktionen in deiner App, die von GitHub Models unterstützt werden.

Spark erkennt automatisch, wann KI für Features in deiner App erforderlich ist. Die Prompts für jedes KI-Feature werden automatisch generiert und in die am besten geeigneten Modelle integriert. Auch die API-Integration und LLM-Rückschlüsse werden für dich verwaltet.

1. Klicke auf die Registerkarte Prompts.
2. Überprüfe die Prompts, die Spark zur Unterstützung der einzelnen KI-Features, die in deiner App verwendet werden, generiert hat.
   • Im Fall deiner Marketing-App hat Spark drei separate Prompts generiert: Generierung von Marketingtexten, Empfehlung für die visuelle Strategie und Zielgruppenempfehlung.
3. Klicke auf die einzelnen Prompts, um sie anzuzeigen und zu bearbeiten, ohne in den Code wechseln zu müssen. Nimm Anpassungen entsprechend deinem Anwendungsfall vor.
4. Teste die App, um die aktualisierten Ergebnisse anzuzeigen.

Schritt 6: Bearbeiten und Debuggen mit Code und Copilot

Du kannst den Code deiner App direkt in Spark oder über einen synchronisierten GitHub-Codespace anzeigen oder bearbeiten.

1. So bearbeitest du Code in Spark:
   • Klicke auf Code.
   • Navigiere in der Dateistruktur, und nimm die gewünschten Änderungen vor. Dabei hast du Zugriff auf Copilot-Codevervollständigungen im Editor. Änderungen werden sofort im Livevorschaufenster angezeigt.
2. So nimmst du komplexere Bearbeitungen vor:
   • Klicke in der oberen rechten Ecke auf und dann auf Open codespace (eine Cloud-IDE mit umfassenden Funktionen), um einen Codespace auf einer neuen Browserregisterkarte zu starten.
   • Klicke im Codespace auf , um Copilot zu öffnen und komplexere Änderungen vorzunehmen.
     • Wähle im Promptfeld den Modus Agent aus, um Copilot für die autonome Erstellung, Überprüfung und Problembehandlung deines Codes zu aktivieren.
     • Wähle den Modus Edit für Copilot aus, um den Code deiner App zu überprüfen und Verbesserungen und Korrekturen vorzuschlagen.
     • Wähle den Modus Ask für Copilot aus, um den Code oder Fehler, die in Spark angezeigt werden, erläutern zu lassen und sie besser zu verstehen.
   • Änderungen, die du im Codespace vornimmst, werden automatisch mit Spark synchronisiert.

Schritt 7: Bereitstellen und Freigeben deiner App

Spark enthält eine vollständig integrierte Laufzeitumgebung, in der du deine App mit nur einem Klick bereitstellen kannst.

1. Klicke in der oberen rechten Ecke auf Publish.

2. Standardmäßig ist deine Spark-Anwendung privat und nur für dich zugänglich. Wähle unter „Visibility“ aus, ob deine Spark-Anwendung privat bleiben soll, oder stelle sie allen GitHub-Benutzern zur Verfügung.

   

3. Klicke auf Visit site, um zu deiner bereits öffentlichen, bereitgestellten App zu gelangen. Kopiere die URL deiner Website, um sie mit anderen zu teilen.

   Hinweis

   Wenn du deine App veröffentlichst, fügt Spark automatisch cloudbasierten Speicher und LLM-Rückschlüsse hinzu, die deine Anwendung als Teil der integrierten Laufzeit verwenden soll.

   Die URL für deine Spark-Anwendung wird basierend auf dem Namen der Anwendung generiert. Du kannst den Namen deiner App bearbeiten, und Spark verwaltet automatisch die Umleitung alter URLs zur neuesten URL.

Schritt 8: Einladen von Projektmitarbeitern über ein Repository

Nachdem du nun über eine funktionsfähige, bereitgestellte App verfügst, kannst du diese auf die gleiche Weise erweitern und gemeinsam bearbeiten wie bei jedem anderen GitHub-Projekt auch: indem du ein GitHub-Repository erstellst und mit deiner Spark-Anwendung verknüpfst.

1. Klicke in der oberen rechten Ecke auf und dann auf Create repository.
2. Klicke im daraufhin geöffneten Dialogfeld auf Create.

Unter deinem persönlichen Konto auf GitHub wird ein neues privates Repository erstellt, dessen Name auf dem Namen deiner Spark-Anwendung basiert.

Alle Änderungen, die vor der Erstellung des Repositorys an deiner Spark-Anwendung vorgenommen wurden, werden deinem Repository hinzugefügt. Du verfügst also über einen vollständigen Datensatz aller Änderungen und Commits, die seit der Erstellung an deiner Spark-Anwendung vorgenommen wurden.

Es besteht eine bidirektionale Synchronisierung zwischen deiner Spark-Anwendung und dem Repository, sodass Änderungen, die entweder in Spark oder im Mainbranch deines Repositorys vorgenommen wurden, automatisch an beiden Stellen übernommen werden.

Du kannst in deinem Repository auch Issues erstellen und sie Copilot-Programmier-Agent zuweisen, damit dieser Pull Requests für Korrekturen und Verbesserungen erstellt.

Nächste Schritte

Lerne weitere Möglichkeiten mit Spark kennen:

• Schnelles Erstellen von Prototypen für neue Ideen: Wenn du eine bestimmte Idee für ein Feature oder eine App hast, lade ein Modell, eine Skizze oder einen Screenshot hoch. Du kannst sogar eine Markdown-Dokumentation in Spark einfügen und Spark anweisen, deine Idee auszuarbeiten.
• Erstellen interner Tools für dich selbst und dein Team: Wenn es einen gemeinsamen Workflow oder Prozess gibt, der sich derzeit in einem Dokument oder einer Kalkulationstabelle befindet, erläutere ihn Spark. Spark wandelt ihn dann in eine interaktive Web-App um.

Weiterführende Themen

• Verantwortungsvolle Verwendung von GitHub Spark
• Informationen zur Abrechnung für GitHub Spark
• Lizenzbestimmungen für die Vorabversion von GitHub