Creación e implementación de aplicaciones con tecnología de inteligencia artificial con GitHub Spark

Presentación

Con GitHub Spark, puedes describir lo que quieras en lenguaje natural y obtener una aplicación web de pila completa con almacenamiento de datos, características de IA y autenticación de GitHub integrada. Puedes iterar mediante mensajes, herramientas visuales o código, y después implementar con un clic en un runtime totalmente administrado.

Spark se integra perfectamente con GitHub, por lo que puedes desarrollar tu instancia de spark desde un codespace deGitHub sincronizado con Copilot para la edición avanzada. También puedes crear un repositorio para la colaboración en equipo y aprovechar el ecosistema de herramientas e integraciones de GitHub.

Este tutorial le guiará a través del ciclo de vida completo de la creación e implementación de una aplicación con Spark y la exploración de sus características.

Requisitos previos

• Una GitHub cuenta con licencia Copilot Pro+ o Copilot Enterprise.

Paso 1: Creación de la aplicación web

En este tutorial, se creará una aplicación de herramienta de marketing sencilla, donde:

• El usuario escribe una descripción de un producto que quiere comercializar.
• La aplicación genera una copia de marketing y recomienda una estrategia visual y un público de destino.

1. Vaya a https://github.com/spark.

2. En el campo de entrada, escribe una descripción de la aplicación. Por ejemplo:

   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.
   

   Sugerencia

   • Debe ser específica y proporcionar tantos detalles como sea posible para obtener los mejores resultados. Puede pedir a Copilot Chat que refine o sugiera mejoras en el mensaje inicial.
   • Como alternativa, coloque un documento en formato markdown en el campo de entrada para proporcionar Spark más contexto sobre lo que espera crear.

3. Opcionalmente, cargue una imagen para proporcionar Spark una referencia visual para la aplicación. Los simulacros, bocetos o capturas de pantalla sirven para ofrecer a Spark una idea de lo que desea construir.

4. Haga clic para compilar tu aplicación.

   Nota:

          Spark siempre generará una aplicación TypeScript y React.
   

Paso 2: Retoque y ampliación de la aplicación

Una vez Spark que termine de generar tu aplicación, puedes probarla en la ventana de vista previa en vivo. Desde aquí, puedes iterar y expandir la aplicación mediante lenguaje natural, controles de edición visual o código.

1. Para realizar cambios en la aplicación mediante lenguaje natural, en la pestaña "Iterate" de la barra lateral izquierda, escribe las instrucciones en el campo de entrada principal y, después, envíalas.
2. Opcionalmente, haz clic en una de las "Suggestions" situadas directamente encima del campo de entrada en la pestaña "Iterate" para desarrollar la aplicación.

3.        Spark le avisa automáticamente de los errores detectados. Para corregir los errores, haz clic en **Fix Al** encima del campo de entrada en la pestaña "Iterate".
   

4. Opcionalmente, haga clic en Código para ver y editar el código subyacente. El panel de edición de código tiene Copilot sugerencias en línea integradas.
5. Para realizar cambios concretos en un elemento específico de la aplicación, haz clic en el icono de destino en la esquina superior derecha y, después, mantén el puntero sobre un elemento en el panel de vista previa activa y selecciónalo.

Paso 3: Personalización del estilo de la aplicación

A continuación, vamos a cambiar el estilo de tu aplicación con las herramientas integradas de Spark. Como alternativa, puedes editar el código directamente.

1. Cambia la apariencia general de la aplicación:

   • Haz clic en la pestaña Theme para ajustar la tipografía, los colores, el radio del borde, el espaciado y otros elementos visuales.
   • Elige entre temas generados previamente para actualizar fácilmente el estilo general de la aplicación.

2. Para dirigir las ediciones visuales a un componente específico, haz clic en el cono de destino y, después, selecciona un elemento de la aplicación en el panel de vista previa. Los controles de estilo relacionados con ese elemento específico se mostrarán en la barra lateral de la izquierda.

3. Opcionalmente, edita los estilos en el código:

   • Haga clic para abrir el editor de código.

   • Modifica CSS, Tailwind CSS o variables personalizadas para un control específico (por ejemplo, relleno, espaciado, fuentes, colores).

     Sugerencia

     Puedes importar fuentes personalizadas (como Google Fonts) o agregar estilos avanzados directamente en el editor de código de Spark. Pida Copilot Chat instrucciones paso a paso si no está familiarizado con la sintaxis de estilo.

4. Haga clic en la pestaña Assets para cargar los recursos que desea surface en la aplicación.

   • Agrega imágenes, logotipos, vídeos, documentos u otros recursos para personalizar la aplicación.
   • Una vez cargado, indique Spark cómo desea incorporar esos recursos en la aplicación en la pestaña "Iterate".

Paso 4: Almacenamiento y administración de los datos

Si Spark detecta la necesidad de almacenar datos en la aplicación, configurará automáticamente el almacenamiento de datos para usted mediante un almacén de clave-valor.

Para nuestra aplicación de marketing, agregaremos capacidad de almacenamiento para que los usuarios puedan guardar sus textos favoritos de marketing y acceder a ellos de nuevo más adelante.

1. Use las instrucciones siguientes en la pestaña "Iteración" para guiar Spark:

   Copilot prompt

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

2. Interactúa con la aplicación una vez que haya terminado de generar para probar el guardado y la recuperación de favoritos.

3. Comprueba la pestaña "Data" para ver y editar los valores almacenados.

4. Si no desea Spark guardar datos explícitamente, pida Spark que "almacene los datos localmente" o "no conserve los datos".

Paso 5: Retoque de las funcionalidades de inteligencia artificial

A continuación, vamos a trabajar en las capacidades de inteligencia artificial incluidas en nuestra aplicación, que están basadas en GitHub Models.

          Spark detecta automáticamente cuándo se necesita inteligencia artificial para las características de la aplicación. Generará automáticamente los mensajes de cada característica de inteligencia artificial, se integrará con los modelos más adecuados y administrará la integración de API y la inferencia de LLM en tu nombre.

1. Haz clic en la pestaña Prompts.
2. Revise las indicaciones generadas Spark para alimentar cada una de las características de IA que se usan en la aplicación.
   • En el caso de nuestra aplicación de marketing, se han generado tres avisos Spark independientes para nosotros (generación de copias de marketing, recomendación de estrategia visual y recomendación de audiencia de destino).
3. Haz clic en cada uno de los mensajes para verlo y editarlo sin necesidad de acceder al código. Realiza ajustes para adecuarlos a tu caso de uso.
4. Prueba la aplicación para ver los resultados actualizados.

Paso 6: Editar y depurar con código y Copilot

Puedes ver o editar el código de la aplicación directamente en Spark o a través de un espacio de código sincronizado GitHub .

1. Para editar código en Spark:
   • Haga clic en Código.
   • Navegue por el árbol de archivos y realice las modificaciones, con acceso a las sugerencias en línea de Copilot en el editor. Los cambios se reflejan al instante en la ventana de vista previa dinámica.
2. Para realizar modificaciones más avanzadas:
   • En la esquina superior derecha, haga clic en , y a continuación, haga clic en Abrir codespace (un IDE completo en la nube) para iniciar un espacio de código en una nueva pestaña del navegador.
   • Una vez dentro del espacio de código, haga clic para abrir Copilot para realizar cambios más avanzados.
     • En el cuadro de solicitud, seleccione Modo de agente para habilitar Copilot la compilación, revisión y solución de problemas del código de forma autónoma.
     • Seleccione Modo de edición para Copilot revisar el código de la aplicación y sugerir mejoras y correcciones.
     • Elija el modo "Preguntar" de para que explique y le ayude a comprender el código o los errores que se encuentren en .
   • Los cambios realizados en el espacio de código se sincronizan automáticamente con Spark.

Paso 7: Implementación y uso compartido de la aplicación

          Spark incluye un entorno de tiempo de ejecución totalmente integrado que permite implementar la aplicación en un solo clic.

1. En la esquina superior derecha, haz clic en Publish.

2. De manera predeterminada, la instancia de spark será como privada y solo accesible para ti. En "Visibilidad", elige si quieres que tu spark permanezca privado o esté disponible para los miembros de una organización específica en GitHub, o para todos los usuarios de GitHub.

   

3. En "Data Access", elija si quiere conceder a otros usuarios acceso de solo lectura o de escritura a tu aplicación.

   Elige solo lectura para permitir que otros usuarios vean la aplicación, sin permitirles crear, editar o eliminar contenido.

   Por ejemplo, si has creado una aplicación de calendario familiar y deseas que los usuarios vean la aplicación, pero no quieres que puedan crear, editar o eliminar eventos, elige solo lectura para que los usuarios no puedan modificar el almacén de datos de Spark.

4. Haz clic en Visit site para acceder a la aplicación implementada en directo. Copia la dirección URL del sitio para compartirla con otros usuarios.

   Cuando publicas tu aplicación, Spark incluye automáticamente el almacenamiento basado en la nube y la inferencia de LLM para que la aplicación utilice como parte del entorno de ejecución integrado.

   La dirección URL de la instancia de spark se genera en función del nombre de la instancia de spark. Puede editar el nombre de la aplicación y Spark administrará automáticamente el reenrutamiento de direcciones URL antiguas a la dirección URL más reciente.

Paso 8: Invitación a colaboradores con un repositorio

Ahora que tiene una aplicación funcional desplegada, puede seguir desarrollando y colaborando en la aplicación de la misma manera que lo haría con cualquier otro GitHub proyecto, creando y vinculando un GitHub repositorio a su spark.

1. En la esquina superior derecha, haga clic en y, a continuación, haga clic en Crear repositorio.
2. En el cuadro de diálogo que se abre, haz clic en Create.

Se crea un nuevo repositorio privado en su cuenta personal en GitHub, con el nombre del repositorio basado en el nombre de su spark.

Los cambios realizados en la instancia de spark antes de la creación del repositorio se agregarán al repositorio para que tengas un registro completo de todos los cambios y confirmaciones realizados en la instancia de spark desde su creación.

Hay una sincronización bidireccional entre Spark y el repositorio, por lo que los cambios realizados ya sea en Spark o en la rama principal del repositorio se reflejan automáticamente en ambos lugares.

También puede crear incidencias en su repositorio y asignarlas a agente en la nube de Copilot para que pueda redactar pull requests para correcciones y mejoras.

Pasos siguientes

Descubre más ideas que puedes desarrollar con Spark: * Prototipo de nuevas ideas rápidamente: si tiene una idea específica para una característica o aplicación, cargue un boceto, croquis, captura de pantalla o incluso pegue una documentación de Markdown en Spark y pida Spark que cree su idea. * Crear herramientas internas para usted y su equipo: si tiene un flujo de trabajo o proceso común que se encuentra actualmente en un documento o hoja de cálculo, explique el flujo de trabajo o el proceso a Spark y Spark puede convertirlo en una aplicación web interactiva.

Información 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)