Erstellen und Bereitstellen von KI-basierten 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.

Dieses Lernprogramm führt Sie durch den vollständigen Lebenszyklus des Erstellens und Bereitstellens einer App mit Spark und erkunden deren Features.

Voraussetzungen

• Ein GitHub Konto mit Copilot Pro+ oder Copilot Enterprise Lizenz.

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 https://github.com/spark.

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

   Copilot prompt

   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. Sie können Copilot-Chat bitten, Ihre anfängliche Eingabeaufforderung zu verfeinern oder Verbesserungen vorzuschlagen.
   • Alternativ können Sie ein Markdowndokument in das Eingabefeld einfügen, um Spark mehr Kontext zu Ihrem Projekt zu geben.

3. Laden Sie optional ein Bild hoch, um einen visuellen Verweis für Ihre App bereitzustellen Spark . Mocks, Skizzen oder Screenshots, alle funktionieren, um Spark eine Vorstellung davon zu geben, was Sie erstellen möchten.

4. Klicken Sie hier , um Ihre App zu erstellen.

   Hinweis

          Spark generiert immer eine Typescript- und React-App.
   

Schritt 2: Optimieren und Erweitern deiner App

Nachdem Spark ihre App generiert hat, können Sie sie im Livevorschaufenster testen. Von hier aus kannst du deine App mit natürlicher Sprache, visuellen Bearbeitungselementen oder Code iterieren 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 Sie automatisch über erkannte Fehler. Um die Fehler zu beheben, klicke auf der Registerkarte „Iterate“ über dem Eingabefeld auf **Fix All**.
   

4. Klicken Sie optional auf "Code ", um den zugrunde liegenden Code anzuzeigen und zu bearbeiten. Der Codebearbeitungsbereich enthält Copilot Inlinevorschläge.
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 ändern wir die Gestaltung Ihrer App mithilfe der integrierten Tools von Spark. 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:

   • Klicken Sie, 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. Fragen Sie Copilot-Chat nach einer schrittweisen Anleitung, wenn Sie mit der Formatierungssyntax nicht vertraut sind.

4. Klicken Sie auf die Registerkarte Assets, um Vermögenswerte hochzuladen, die Sie in Ihrer App anzeigen möchten.

   • Füge Bilder, Logos, Videos, Dokumente oder andere Ressourcen hinzu, um deine App zu personalisieren.
   • Weisen Sie Spark nach dem Hochladen an, wie diese Ressourcen in der „Iterieren”-Registerkarte in Ihre App integriert werden sollen.

Schritt 4: Speichern und Verwalten von Daten

Wenn Spark erkannt wird, dass Daten in Ihrer App gespeichert werden müssen, wird automatisch die Datenspeicherung für Sie mithilfe eines Schlüsselwertspeichers eingerichtet.

Für unsere Marketing-App fügen wir Datenspeicherung hinzu, damit Benutzer ihre bevorzugten Marketingtexte speichern und später problemlos erneut darauf zugreifen können.

1. Verwenden Sie die folgende Anweisung auf der Registerkarte "Iterieren", um Spark zu leiten.

   Copilot prompt

   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 Sie Daten explizit nicht speichern möchtenSpark, bitten Sie Spark sie, entweder "Daten lokal zu speichern" oder "Daten nicht beizubehalten".

Schritt 5: Optimieren von KI-Funktionen

Als Nächstes iterieren wir über die KI-Funktionen, die in unserer App enthalten sind und von GitHub Models unterstützt werden.

          Spark Erkennt automatisch, wann KI für Features in Ihrer App benötigt wird. 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üfen Sie die Ingabeaufforderungen Spark , die generiert werden, um die einzelnen KI-Features zu nutzen, die in Ihrer App verwendet werden.
   • Bei unserer Marketing-App gibt es drei separate Prompts, die Spark für uns erstellt hat (Marketingkopiengenerierung, visuelle Strategieempfehlung 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 zu sehen.

Schritt 6: Bearbeiten und Debuggen mit Code und Copilot

Sie können den Code Ihrer App direkt in Spark oder über einen synchronisierten GitHub Codespace anzeigen oder bearbeiten.

1. So bearbeiten Sie Code in Spark:
   • Klicken Sie auf "Code".
   • Navigiere im Dateibaum und nimm Änderungen vor, während du Zugriff auf Copilot-Inlinevorschläge im Editor hast. Änderungen werden sofort im Livevorschaufenster angezeigt.
2. So nimmst du komplexere Bearbeitungen vor:
   • Klicken Sie in der oberen rechten Ecke auf , dann auf Codespace öffnen (eine vollständig ausgestattete Cloud-IDE), um einen Codespace in einem neuen Browser-Tab zu starten.
   • Nachdem Sie im Codebereich sind, klicken Sie , um Copilot zu öffnen und erweiterte Änderungen vorzunehmen.
     • Wählen Sie im Eingabeaufforderungsfeld den Agent-Modus aus, um Copilot den Code autonom zu erstellen, zu überprüfen und zu beheben.
     • Wählen Sie den Bearbeitungsmodus aus Copilot , um den Code Ihrer App zu überprüfen und Verbesserungen und Korrekturen vorzuschlagen.
     • Wählen Sie den Modus Fragen aus Copilot, um den Code oder alle Fehler in Spark zu erklären und besser zu verstehen.
   • Änderungen, die Sie im Codespace vornehmen, werden automatisch mit Spark synchronisiert.

Schritt 7: Bereitstellen und Freigeben deiner App

          Spark enthält eine vollständig integrierte Laufzeitumgebung, mit der Sie Ihre App mit nur einem Klick bereitstellen können.

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ählen Sie unter "Sichtbarkeit" aus, ob Ihre Spark privat bleiben soll, oder ob sie Mitgliedern einer bestimmten Organisation auf GitHub oder allen GitHub Benutzern zur Verfügung gestellt werden soll.

   

3. Wählen Sie unter "Datenzugriff" aus, ob Sie anderen Benutzern nur Lesezugriff oder Schreibzugriff auf Ihre App gewähren möchten.

   Wähle read-only aus, damit weitere Benutzer deine App anzeigen können, ohne Inhalte erstellen, bearbeiten oder löschen zu können.

   Beispiel: Wenn du eine Familienkalender-App erstellt hast und möchtest, dass Benutzer die App anzeigen, jedoch keine Ereignisse erstellen, bearbeiten oder löschen können, wähle read-only aus, damit Benutzer den Spark-Datenspeicher nicht ändern können.

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

   Wenn Sie Ihre App veröffentlichen, fügt Spark automatisch cloudbasierten Speicher und die LLM-Inferenz für Ihre Anwendung als Teil der integrierten Runtime ein.

   Die URL für deine Spark-Anwendung wird basierend auf dem Namen der Anwendung generiert. Sie können den Namen Ihrer App bearbeiten und Spark das erneute Weiterleiten alter URLs an Ihre neueste URL automatisch verwalten.

Schritt 8: Einladen von Projektmitarbeitern über ein Repository

Nachdem Sie nun über eine funktionsfähige, bereitgestellte App verfügen, können Sie weiterhin auf die gleiche Weise wie bei jedem anderen GitHub Projekt erstellen und daran zusammenarbeiten, indem Sie ein GitHub Repository mit Ihrem Spark erstellen und verknüpfen.

1. Klicken Sie in der oberen rechten Ecke auf und dann auf Repository erstellen.
2. Klicke im daraufhin geöffneten Dialogfeld auf Create.

Unter Ihrem persönlichen Konto GitHub wird ein neues, privates Repository erstellt, dessen Name auf dem Namen Ihres Spark 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 gibt eine bidirektionale Synchronisierung zwischen Ihrem Spark und dem Repository, sodass Änderungen, die entweder in Spark oder im Mainbranch Ihres Repositorys vorgenommen werden, automatisch an beiden Orten widergespiegelt werden.

Sie können auch Probleme in Ihrem Repository erstellen und diese Copilot Cloudagent zuweisen, damit sie Pullanforderungen für Korrekturen und Verbesserungen entwerfen können.

Nächste Schritte

Entdecken Sie weitere Ideen, die Sie mit Spark umsetzen können: * Schnelles Erstellen neuer Ideen: Wenn Sie eine bestimmte Idee für ein Feature oder eine App haben, laden Sie ein Modell, eine Skizze, einen Screenshot oder sogar eine Markdowndokumentation Spark hoch, und bitten Spark Sie, Ihre Idee zu erstellen. * Erstellen Sie interne Tools für sich und Ihr Team: Wenn Sie über einen gemeinsamen Workflow oder Prozess verfügen, der sich derzeit in einem Dokument oder einer Kalkulationstabelle befindet, erläutern Sie Ihren Workflow oder Prozess und SparkSpark können ihn in eine interaktive Web-App umwandeln.

Weitere Informationen

•         [AUTOTITLE](/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark)
  

•         [AUTOTITLE](/copilot/concepts/copilot-billing/about-billing-for-github-spark)
  

•         [AUTOTITLE](/free-pro-team@latest/site-policy/github-terms/github-pre-release-license-terms)