Compilando e implantando aplicativos habilitados para IA com GitHub Spark

Introdução

Com o GitHub Spark, você pode descrever o que deseja em linguagem natural e obter um aplicativo Web fullstack com armazenamento de dados, recursos de IA e autenticação do GitHub integrada. Você pode iterar usando prompts, ferramentas visuais ou código e, em seguida, implantar com um clique em um runtime totalmente gerenciado.

O Spark é totalmente integrado ao GitHub para que você possa desenvolver seu spark por meio de um codespace do GitHub sincronizado com o Copilot para edição avançada. Você também pode criar um repositório para colaboração em equipe e aproveitar o ecossistema de ferramentas e integrações do GitHub.

Este tutorial orientará você durante todo o ciclo de vida da criação e implantação de um aplicativo com Spark e exploração de seus recursos.

Pré-requisitos

• Uma conta do GitHub com licença do Copilot Pro+ ou do Copilot Enterprise.

Etapa 1: Criar seu aplicativo Web

Para este tutorial, criaremos um aplicativo de ferramenta de marketing simples, em que:

• O usuário insere uma descrição de um produto que deseja comercializar.
• O aplicativo gera um texto de marketing e recomenda uma estratégia visual e um público-alvo.

1. Navegue até https://github.com/spark.

2. No campo de entrada, insira uma descrição para o aplicativo. Por exemplo:

   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.
   

   Dica

   • Seja específico e forneça o máximo de detalhes possível para os melhores resultados. Você pode pedir Bate-papo do Copilot para refinar ou sugerir melhorias no prompt inicial.
   • Como alternativa, arraste um documento de markdown para o campo de entrada para fornecer ao Spark mais contexto sobre o que você espera construir.

3. Opcionalmente, carregue uma imagem para fornecer Spark uma referência visual para seu aplicativo. Simulações, esboços ou capturas de tela funcionam para fornecer Spark uma ideia do que você deseja criar.

4. Clique para criar seu aplicativo.

   Observação

   O Spark sempre gerará um aplicativo em TypeScript e React.

Etapa 2: Refinar e expandir o aplicativo

Depois de Spark terminar de gerar seu aplicativo, você pode testá-lo na janela de visualização ao vivo. Nela você pode iterar e expandir seu aplicativo usando linguagem natural, controles de edição visual ou código.

1. Para fazer alterações em seu aplicativo usando linguagem natural, na guia "Iterar" na barra lateral à esquerda, insira instruções no campo de entrada principal e envie.
2. Opcionalmente, clique em uma das "Sugestões" diretamente acima do campo de entrada na guia "Iterar" para desenvolver seu aplicativo.

3.        Spark alerta automaticamente sobre erros detectados. Para corrigir os erros, clique em **Corrigir Tudo** acima do campo de entrada na guia "Iterar".
   

4. Opcionalmente, clique em Código para exibir e editar o código subjacente. O painel de edição de código tem sugestões embutidas do Copilot integradas.
5. Para fazer alterações direcionadas a um elemento específico do aplicativo, clique no ícone de alvo no canto superior direito e, em seguida, passe o mouse e selecione um elemento no painel de visualização dinâmica.

Etapa 3: Personalizar o estilo do seu aplicativo

Em seguida, vamos alterar o estilo do seu aplicativo usando as ferramentas integradas do Spark. Você também pode editar o código diretamente.

1. Altere a aparência geral do aplicativo:

   • Clique na guia Tema para ajustar a tipografia, as cores, o raio da borda, o espaçamento e outros elementos visuais.
   • Escolha entre temas pré-gerados para atualizar facilmente o estilo geral do aplicativo.

2. Para direcionar as edições visuais a um componente específico, clique no ícone de alvo e selecione um elemento do aplicativo no painel de visualização. Os controles de estilo relacionados a esse elemento específico serão exibidos na barra lateral à esquerda.

3. Você também pode editar estilos no código:

   • Clique para abrir o editor de código.

   • Modifique CSS, use Tailwind CSS ou variáveis personalizadas para obter um controle refinado (por exemplo, preenchimento, espaçamento, fontes, cores).

     Dica

     Você pode importar fontes personalizadas (como o Google Fonts) ou adicionar estilos avançados diretamente no editor de código do Spark. Peça Bate-papo do Copilot orientação passo a passo se você não estiver familiarizado com a sintaxe de estilo.

4. Clique na guia Assets para carregar ativos que você deseja exibir em seu aplicativo.

   • Adicione imagens, logotipos, vídeos, documentos ou outros ativos para personalizar seu aplicativo.
   • Uma vez carregadas, instrua o Spark sobre como você deseja incorporar esses ativos no seu aplicativo na guia “Iterar”.

Etapa 4: Armazenar e gerenciar dados

Se Spark detectar a necessidade de armazenar dados em seu aplicativo, ele configurará automaticamente o armazenamento de dados para você usando um repositório de chave-valor.

Para nosso aplicativo de marketing, vamos adicionar armazenamento de dados para que os usuários possam salvar seus textos favoritos de marketing e acessá-los facilmente novamente mais tarde.

1. Use a seguinte instrução na guia "Iterar" para orientar Spark:

   Copilot prompt

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

2. Interaja com o aplicativo quando terminar de gerar para testar o salvamento e a recuperação de favoritos.

3. Verifique a guia "Dados" para exibir e editar os valores armazenados.

4. Se você explicitamente não quiser Spark salvar dados, ajuste Spark para "armazenar dados localmente" ou "desativar a persistência de dados".

Etapa 5: Refinar recursos de IA

Em seguida, vamos iterar sobre os recursos de IA incluídos no nosso aplicativo, que são da plataforma GitHub Models.

          Spark detecta automaticamente quando a IA é necessária para recursos em seu aplicativo. Ele gerará automaticamente os prompts para cada recurso de IA, integrará com os modelos mais adequados e gerenciará a integração da API e a inferência de LLM para você.

1. Clique na guia Prompts.
2. Revise os prompts que o Spark gerou para viabilizar cada um dos recursos de IA usados no seu aplicativo.
   • No caso do nosso aplicativo de marketing, há três prompts separados que Spark gerou para nós (geração de conteúdo publicitário, recomendação de estratégia visual e recomendação de público-alvo).
3. Clique em cada prompt para exibir e editar sem precisar entrar no código. Faça ajustes de acordo com seu caso de uso.
4. Teste o aplicativo para ver os resultados atualizados.

Etapa 6: Editar e depurar com código e Copilot

Você pode exibir ou editar o código do aplicativo diretamente dentro Spark ou por meio de um codespace sincronizado GitHub .

1. Para editar o código em Spark:
   • Clique em Código.
   • Navegue pela árvore de arquivos e faça qualquer edição, com acesso a sugestões em linha do Copilot no editor. As alterações são refletidas instantaneamente na janela de visualização dinâmica.
2. Para fazer edições mais avançadas:
   • No canto superior direito, clique e clique em Abrir codespace (um IDE de nuvem completo) para iniciar um codespace em uma nova guia do navegador.
   • Uma vez dentro do codespace, clique para abrir Copilot para fazer alterações mais avançadas.
     • Na caixa de prompt, selecione o modo Agente para habilitar Copilot a criação, revisão e solução de problemas de seu código de forma autônoma.
     • Selecione o modo Editar para Copilot examinar o código do aplicativo e sugerir melhorias e correções.
     • Escolha o modo Perguntar de Copilot para explicar e ajudá-lo a entender o código ou quaisquer erros que você veja em Spark.
   • As alterações feitas no codespace são automaticamente sincronizadas com Spark.

Etapa 7: Implantar e compartilhar seu aplicativo

          Spark vem com um ambiente de runtime totalmente integrado que permite implantar seu aplicativo em um clique.

1. No canto superior à direita, clique em Publicar.

2. Por padrão, o spark será privado e só ficará acessível para você. Em "Visibilidade", escolha se deseja que o seu spark permaneça privado ou que esteja disponível para membros de uma organização específica em GitHub, ou para todos os usuários no GitHub.

   

3. Em "Acesso a Dados", escolha se deseja fornecer acesso de somente leitura ou de gravação ao seu aplicativo para outros usuários.

   Escolha somente leitura para permitir que outras pessoas vejam seu aplicativo, sem permitir que criem, editem ou excluam conteúdo.

   Por exemplo, se você criou um aplicativo de calendário da família e deseja que os usuários o vejam, mas não deseja que possam criar, editar ou excluir eventos, escolha somente leitura para que os usuários não possam modificar o armazenamento de dados do spark.

4. Clique em Visitar site para acessar seu aplicativo implantado e em funcionamento. Copie a URL do site para compartilhar com outras pessoas.

   Quando você publica seu aplicativo, Spark inclui automaticamente armazenamento em nuvem e inferência LLM para que seu aplicativo utilize como parte do tempo de execução integrado.

   A URL do spark é gerada com base no nome do seu spark. Você pode editar o nome do aplicativo e Spark gerenciará automaticamente o redirecionamento de URLs antigas para sua URL mais recente.

Etapa 8: Convidar colaboradores com um repositório

Agora que você tem um aplicativo funcional implantado, pode continuar criando e colaborando em seu aplicativo da mesma maneira que faria com qualquer outro projeto GitHub, ao criar e vincular um repositório GitHub ao spark.

1. No canto superior direito, clique e clique em Criar repositório.
2. Na caixa de diálogo que é aberta, clique em Criar.

Um novo repositório privado é criado na sua conta pessoal no GitHub, com o nome do repositório baseado no nome do seu spark.

Todas as alterações feitas no spark antes da criação do repositório serão adicionadas ao repositório para que você tenha um registro completo de todas as alterações e commits feitas ao spark desde sua criação.

Há uma sincronização bidirecional entre o seu spark e o repositório, de modo que alterações feitas tanto no Spark quanto na ramificação principal do seu repositório são automaticamente refletidas em ambos os locais.

Você também pode criar problemas em seu repositório e atribuí-los para agente de nuvem Copilot que ele possa elaborar solicitações de pull para correções e melhorias.

Próximas etapas

Explore mais ideias que você pode criar com Spark. * Crie protótipos de novas ideias rapidamente: se você tiver uma ideia específica para um recurso ou aplicativo, carregue um mockup, esboço, captura de tela ou até mesmo cole uma documentação em markdown Spark e peça Spark para criar sua ideia. * Crie ferramentas internas para você e sua equipe: se você tiver um fluxo de trabalho ou processo comum que atualmente está em um documento ou planilha, explique seu fluxo de trabalho ou processo Spark e Spark possa transformá-lo em um aplicativo Web interativo.

Leitura adicional

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