Création et déploiement d’applications basées sur l’IA avec GitHub Spark

Présentation

Avec GitHub Spark, vous pouvez décrire ce que vous voulez en langage naturel et obtenir une application web fullstack avec stockage de données, fonctionnalités d'IA et authentification GitHub intégrée. Vous pouvez itérer à l’aide d’invites, d’outils visuels ou de code, puis déployer en un clic sur un runtime entièrement managé.

Spark s'intègre parfaitement à GitHub, ce qui vous permet de développer votre spark via un espace de code GitHub synchronisé avec Copilot pour une édition avancée. Vous pouvez également créer un référentiel pour la collaboration en équipe et tirer parti de l'écosystème d'outils et d'intégrations de GitHub.

Ce tutoriel vous guidera à travers l'ensemble du cycle de vie de la création et du déploiement d'une application avec Spark, tout en explorant ses fonctionnalités.

Prérequis

• Un GitHub compte avec Copilot Pro+ ou Copilot Entreprise licence.

Étape 1 : Créez votre application web

Pour ce tutoriel, nous allons créer une simple application d'outil marketing, où :

• L'utilisateur saisit une description du produit qu'il souhaite commercialiser.
• L'application génère un texte marketing et recommande une stratégie visuelle ainsi qu'un public cible.

1. Accédez à https://github.com/spark.

2. Dans le champ de saisie, entrez une description de votre application. Voici un exemple :

   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.
   

   Conseil

   • Soyez spécifique et fournissez autant de détails que possible pour obtenir les meilleurs résultats. Vous pouvez demander à Copilot Chat d'affiner votre demande initiale ou de suggérer des améliorations.
   • Vous pouvez également déposer un document markdown dans le champ d’entrée afin de donner Spark davantage de contexte sur ce que vous souhaitez concevoir.

3. Si vous le souhaitez, chargez une image pour fournir Spark une référence visuelle pour votre application. Les maquettes, les croquis ou les captures d’écran fonctionnent tous pour fournir Spark une idée de ce que vous souhaitez créer.

4. Cliquez pour générer votre application.

   Remarque

          Spark génère toujours une application Typescript et React.
   

Étape 2 : Affiner et développer votre application

Une fois Spark que vous avez terminé la génération de votre application, vous pouvez la tester dans la fenêtre d’aperçu en direct. À partir d'ici, vous pouvez itérer et développer votre application en utilisant le langage naturel, les contrôles visuels ou le code.

1. Pour apporter des modifications à votre application en utilisant le langage naturel, sous l'onglet « Itérer » dans la barre latérale gauche, entrez vos instructions dans le champ principal, puis validez.
2. En option, cliquez sur l'une des « Suggestions » directement au-dessus du champ de saisie dans l'onglet « Itérer » pour développer votre application.

3.        Spark vous avertit automatiquement des erreurs détectées. Pour corriger les erreurs, cliquez sur **Tout corriger** au-dessus du champ de saisie dans l'onglet « Itérer ».
   

4. Si vous le souhaitez, cliquez sur Code pour afficher et modifier le code sous-jacent. Le panneau d’édition de code comporte Copilot des suggestions en ligne intégrées.
5. Pour apporter des modifications ciblées à un élément spécifique de votre application, cliquez sur l'icône en forme de cible en haut à droite, puis survolez et sélectionnez un élément dans le volet de prévisualisation.

Étape 3 : Personnaliser le style de votre application

Ensuite, nous allons modifier le style de votre application à l’aide Sparkdes outils intégrés. Vous pouvez également modifier directement le code.

1. Modifiez l'apparence générale de votre application :

   • Cliquez sur l'onglet Thème pour ajuster la typographie, les couleurs, le rayon des bordures, les espacements et d'autres éléments visuels.
   • Choisissez parmi les thèmes pré-générés pour mettre facilement à jour le style général de votre application.

2. Pour cibler des modifications visuelles sur un composant spécifique, cliquez sur l'icône cible, puis sélectionnez un élément de l'application dans le volet de prévisualisation. Les contrôles de style liés à cet élément spécifique apparaîtront dans la barre latérale gauche.

3. En option, modifiez les styles dans le code :

   • Cliquez pour ouvrir l’éditeur de code.

   • Modifiez le CSS, Tailwind CSS ou les variables personnalisées pour un contrôle précis (par exemple, marges internes, espacements, polices, couleurs).

     Conseil

     Vous pouvez importer des polices personnalisées (comme Google Fonts) ou ajouter des styles avancés directement dans l'éditeur de code Spark. Demandez Copilot Chat des instructions pas à pas si vous n’êtes pas familiarisé avec la syntaxe de style.

4. Cliquez sur l’onglet Assets pour charger des ressources que vous souhaitez mettre en avant dans votre application.

   • Ajoutez des images, logos, vidéos, documents ou autres ressources pour personnaliser votre application.
   • Une fois chargé, indiquez Spark comment vous souhaitez incorporer ces ressources dans votre application dans l’onglet « Itérer ».

Étape 4 : Stocker et gérer les données

Si Spark détecte la nécessité de stocker des données dans votre application, il configurera automatiquement pour vous un stockage des données à l’aide d’un magasin clé-valeur.

Pour notre application de marketing, ajoutons le stockage de données pour que les utilisateurs puissent enregistrer leurs textes marketing favoris et les retrouver facilement plus tard.

1. Utilisez l’instruction suivante sous l’onglet « Itérer » pour guider Spark:

   Copilot prompt

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

2. Interagissez avec l'application une fois qu'elle a terminé de générer du contenu pour tester l'enregistrement et la récupération des favoris.

3. Consultez l'onglet « Données » pour voir et modifier les valeurs stockées.

4. Si vous ne souhaitez Spark pas enregistrer explicitement de données, demandez Spark à « stocker des données localement » ou à « ne pas conserver les données ».

Étape 5 : Affiner les fonctionnalités d'IA

Nous allons ensuite itérer sur les fonctionnalités d’IA incluses dans notre application, qui sont alimentées par GitHub Models.

          Spark détecte automatiquement quand l’IA est nécessaire pour les fonctionnalités de votre application. Il génèrera automatiquement les invites pour chaque fonctionnalité d'IA, s'intégrera aux modèles les plus appropriés et gérera l'intégration API ainsi que l'inférence LLM pour vous.

1. Cliquez sur l'onglet Invites.
2. Passez en revue les invites générées Spark pour alimenter chacune des fonctionnalités IA utilisées dans votre application.
   • Dans le cas de notre application marketing, trois invites distinctes ont été générées pour nous Spark (génération de contenu marketing, recommandation de stratégie visuelle et recommandation pour l’audience cible).
3. Cliquez sur chaque invite pour l'afficher et la modifier sans avoir à changer le code. Faites des ajustements pour mieux correspondre à votre cas d'usage.
4. Testez l'application pour voir les résultats mis à jour.

Étape 6 : Modifier et déboguer avec du code et Copilot

Vous pouvez afficher ou modifier le code de votre application directement dans ou via Spark un espace de code synchronisé GitHub .

1. Pour modifier le code dans Spark:
   • Cliquez sur Code.
   • Naviguez dans l’arborescence des fichiers et apportez des modifications, avec accès aux suggestions en ligne de Copilot dans l’éditeur. Les modifications sont reflétées instantanément dans la fenêtre de prévisualisation en direct.
2. Pour effectuer des modifications plus avancées :
   • Dans le coin supérieur droit, cliquez sur , puis cliquez sur Ouvrir l’espace de code (un IDE cloud complet) pour lancer un espace de code dans un nouvel onglet de navigateur.
   • Une fois dans l’espace de code, cliquez pour ouvrir Copilot pour apporter des modifications plus avancées.
     • Dans la zone d’invite, sélectionnez Le mode Agent pour activer Copilot la génération, la révision et la résolution des problèmes de votre code de manière autonome.
     • Sélectionnez Le mode Modifier pour Copilot examiner le code de votre application et suggérer des améliorations et des correctifs.
     • Choisissez le mode « Demander » pour Copilot expliquer et vous aider à comprendre le code ou toute erreur que vous voyez dans Spark.
   • Les modifications apportées dans l’espace de code sont automatiquement synchronisées avec Spark.

Étape 7 : Déployer et partager votre application

          Spark est fourni avec un environnement d’exécution entièrement intégré qui vous permet de déployer votre application en un clic.

1. Dans le coin supérieur droit, cliquez sur S'abonner.

2. Par défaut, votre spark sera privé et accessible uniquement à vous. Sous « Visibilité », choisissez si vous souhaitez que votre spark reste privé ou le rendre disponible pour les membres d’une organisation spécifique sur GitHub, ou pour tous les GitHub utilisateurs.

   

3. Sous « Accès aux données », choisissez si vous souhaitez donner à d’autres utilisateurs un accès en lecture seule ou en écriture dans votre application.

   Choisissez en lecture seule pour permettre aux autres utilisateurs de consulter votre application, sans leur donner la possibilité de créer, modifier ou supprimer du contenu.

   Par exemple, si vous avez créé une application de calendrier familial et que vous souhaitez que les utilisateurs puissent la consulter sans pouvoir créer, modifier ou supprimer des événements, choisissez en lecture seule, afin qu'ils ne puissent pas modifier le magasin de données de votre spark.

4. Cliquez sur Visiter le site à passer à votre application en direct et déployée. Copiez l'URL de votre site pour la partager avec autrui.

   Lorsque vous publiez votre application, Spark inclut automatiquement le stockage cloud et l’inférence LLM pour que votre application soit utilisée dans le cadre du runtime intégré.

   L'URL de votre spark est générée en fonction du nom de ce dernier. Vous pouvez modifier le nom de votre application et Spark gérera automatiquement le réacheminement des anciennes URL vers votre URL la plus récente.

Étape 8 : Inviter des collaborateurs avec un dépôt

Maintenant que vous disposez d’une application fonctionnelle et déployée, vous pouvez continuer à générer et collaborer sur votre application de la même façon que vous le feriez avec n’importe quel autre GitHub projet, en créant et en liant un GitHub référentiel à votre spark.

1. Dans le coin supérieur droit, cliquez sur , puis cliquez sur Créer un dépôt.
2. Dans la boîte de dialogue qui s'ouvre, cliquez sur Créer.

Un nouveau référentiel privé est créé sous votre compte personnel sur GitHub, avec le nom du référentiel en fonction du nom de votre spark.

Toute modification apportée à votre spark avant la création du référentiel sera ajoutée à votre référentiel afin que vous disposiez d'un historique complet de toutes les modifications et validations effectuées sur votre spark depuis sa création.

Il existe une synchronisation bidirectionnelle entre votre spark et le référentiel, de sorte que les modifications apportées soit dans Spark soit dans la branche principale de votre référentiel sont automatiquement reflétées dans les deux emplacements.

Vous pouvez également créer des problèmes dans votre référentiel et les affecter afin Agent cloud Copilot qu’il puisse rédiger des demandes de tirage pour des correctifs et des améliorations.

Étapes suivantes

Explorez d’autres idées que vous pouvez créer avec Spark: * Prototypez rapidement de nouvelles idées : si vous avez une idée spécifique d’une fonctionnalité ou d’une application, chargez une maquette, un croquis, une capture d’écran ou même collez une documentation markdown dans Spark laquelle vous demandez Spark de créer votre idée. * Créez des outils internes pour vous-même et votre équipe : si vous disposez d’un flux de travail ou d’un processus commun qui se trouve actuellement dans un document ou une feuille de calcul, expliquez votre flux de travail ou processus Spark et Spark pouvez le transformer en application web interactive.

Pour aller plus loin

•         [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)