A continuación, se presenta el flujo de trabajo detallado para desarrollar y desplegar una aplicación de Streamlit utilizando GitHub Codespaces y Copilot.

Este flujo está diseñado para ser una guía práctica y clara, ideal para los cursos de “Estadística Aplicada” y “Programación de Computadoras”.

Flujo de Trabajo: GitHub Codespaces + Copilot para Streamlit

Aquí tienes el desglose paso a paso, con explicaciones y los prompts sugeridos para que GitHub Copilot sea tu asistente de programación. 🤖

1. Crear el Repositorio en GitHub

Explicación Breve: El repositorio es la carpeta central de tu proyecto en la nube. Inicializarlo con estos tres archivos es una buena práctica para asegurar que el proyecto sea comprensible, limpio y legalmente claro desde el inicio.

  • README.md: Es la portada de tu proyecto. Explica qué hace, cómo instalarlo y cómo usarlo. Es fundamental para que otros (o tu “yo” del futuro) entiendan el proyecto rápidamente.
  • .gitignore: Es una lista de archivos y carpetas que Git debe ignorar. Evita que subas al repositorio archivos innecesarios como entornos virtuales (.venv), archivos de caché de Python (__pycache__) o credenciales secretas, manteniendo el repositorio limpio y seguro.
  • LICENSE: Define los permisos y restricciones legales del proyecto. Indica cómo otros pueden usar, modificar y distribuir tu código. La licencia MIT es una opción popular por ser muy permisiva.

Pasos y Comandos:

  1. Ve a GitHub y crea un nuevo repositorio.
  2. Nómbralo (por ejemplo, mi-app-streamlit).
  3. Marca la casilla “Add a README file”.
  4. Haz clic en el menú desplegable “Add .gitignore” y selecciona la plantilla “Python”.
  5. Haz clic en el menú desplegable “Choose a license” y selecciona la que prefieras (ej. MIT License).
  6. Finalmente, haz clic en “Create repository”.

Prompt Sugerido para Copilot: En este paso no se usa Copilot directamente, ya que la interfaz de GitHub facilita la creación de estos archivos.

2. Activar el IDE Codespaces

Explicación Breve: GitHub Codespaces es un entorno de desarrollo completo que se ejecuta en la nube. Te proporciona un editor de código (VS Code) y un terminal listos para usar, directamente desde tu navegador. Esto elimina la necesidad de instalar todo en tu máquina local y garantiza un entorno consistente para todos los que trabajen en el proyecto.

Pasos y Comandos:

  1. En la página de tu repositorio recién creado, haz clic en el botón verde “< > Code”.
  2. Selecciona la pestaña “Codespaces”.
  3. Haz clic en “Create codespace on main”. Espera unos momentos mientras GitHub prepara tu entorno.

3. Instalar la Extensión de Python

Explicación Breve: Aunque el entorno de Codespaces es muy completo, instalar la extensión oficial de Python de Microsoft mejora la experiencia de desarrollo. Ofrece autocompletado inteligente (IntelliSense), depuración, análisis de código (linting) y formato automático, haciendo tu trabajo más eficiente.

Pasos y Comandos:

  1. Una vez que Codespaces cargue, ve al panel de Extensiones en la barra lateral izquierda (el ícono de los bloques).
  2. En la barra de búsqueda, escribe Python.
  3. Busca la extensión publicada por Microsoft y haz clic en “Install”.

Prompt Sugerido para Copilot: Este es un paso manual en la interfaz de VS Code, por lo que no se requiere un prompt para Copilot.

4. Crear el Entorno Virtual

Explicación Breve: Un entorno virtual es una carpeta que contiene una instalación aislada de Python y sus paquetes. Usar uno (como .venv) es crucial para evitar conflictos de dependencias entre proyectos. Cada proyecto tendrá sus propias versiones de librerías, garantizando que lo que funciona hoy, siga funcionando mañana.

Pasos y Comandos: Abre un terminal en Codespaces (Ctrl + Shift + Ñ o desde el menú “Terminal” > “New Terminal”) y ejecuta el siguiente comando:

python3 -m venv .venv

Esto crea una carpeta llamada .venv en tu proyecto. El .gitignore que creaste en el paso 1 ya está configurado para ignorar esta carpeta.

Prompt Sugerido para Copilot: Puedes pedirle a Copilot Chat que te recuerde el comando:

@workspace ¿Cuál es el comando para crear un entorno virtual de Python llamado .venv en el terminal?

5. Activar el Entorno Virtual

Explicación Breve: Crear el entorno no es suficiente; necesitas “activarlo” para que tu sesión de terminal lo utilice. Al activarlo, cualquier paquete que instales con pip se guardará dentro de la carpeta .venv y no en el sistema global. Notarás que el nombre del entorno (.venv) aparece al inicio de la línea de comandos.

Pasos y Comandos: En el mismo terminal, ejecuta:

source .venv/bin/activate

Prompt Sugerido para Copilot: Puedes preguntar a Copilot Chat:

@workspace ¿Cómo activo mi entorno virtual .venv en un terminal de Linux?

6. Crear y Usar requirements.txt

Explicación Breve: El archivo requirements.txt lista todos los módulos de Python que tu proyecto necesita para funcionar. Esto hace que tu proyecto sea reproducible. Cualquier persona (incluido el servicio de Streamlit Cloud) puede instalar todas las dependencias exactas con un solo comando.

Pasos y Comandos:

  1. Crea el archivo. Puedes hacerlo manualmente o con el comando touch requirements.txt.

  2. Abre requirements.txt y añade las librerías que necesitarás. Para una app básica de Streamlit, podrías empezar con:

    streamlit
pandas
plotly

  3. Ahora, instala todo lo que listaste en tu entorno virtual activado con este comando:

    pip install -r requirements.txt

Prompt Sugerido para Copilot: Abre el archivo requirements.txt y pide a Copilot que lo llene:

Añade las dependencias necesarias para una aplicación de Streamlit que utilice pandas y plotly para la visualización de datos.

7. Crear la Aplicación app.py

Explicación Breve: Este será el archivo principal de Python que contendrá el código de tu aplicación web. Streamlit lo leerá para generar la interfaz interactiva.

Pasos y Comandos:

  1. Crea un nuevo archivo llamado app.py.
  2. Pega o escribe el código de tu aplicación.
  3. Para probarla, ejecuta en el terminal: bash streamlit run app.py Codespaces te mostrará una notificación para abrir la app en una nueva pestaña del navegador.

Prompt Sugerido para Copilot: Abre el archivo app.py y usa un prompt como este para que Copilot genere el código por ti:

Crea una aplicación de Streamlit simple. Debe tener un título principal, un encabezado secundario, y usar pandas para crear un DataFrame de ejemplo con datos de ventas por mes. Finalmente, muestra esos datos en una tabla y en un gráfico de barras interactivo usando Plotly.

8. Confirmar y Sincronizar Cambios con GitHub

Explicación Breve: Una vez que tu aplicación funciona en Codespaces, es hora de guardar tu progreso en el repositorio de GitHub. Este proceso tiene tres etapas:

  1. Stage (Añadir): Seleccionas los archivos que quieres guardar en la “instantánea”.
  2. Commit (Confirmar): Creas la instantánea con un mensaje descriptivo.
  3. Push (Sincronizar): Envías tus commits locales al repositorio remoto en GitHub.

Pasos y Comandos:

  1. Ve a la pestaña “Source Control” en la barra lateral izquierda (el ícono de la bifurcación).
  2. Añade un mensaje de commit descriptivo en la caja de texto (ej. “feat: Creación inicial de la app Streamlit”).
  3. Haz clic en el botón “Commit”. Es posible que te pregunte si quieres añadir todos los cambios (“stage”), dile que sí.
  4. Finalmente, haz clic en “Sync Changes” o “Push” para subir todo a tu repositorio de GitHub.

Prompt Sugerido para Copilot: Copilot puede ayudarte a escribir mensajes de commit claros y estandarizados. Haz clic en el ícono de la chispa ✨ en el cuadro de mensaje de commit y te sugerirá uno automáticamente. O bien, puedes pedírselo en el chat:

@workspace Escribe un mensaje de commit convencional para describir la creación de una aplicación de Streamlit con su archivo de requerimientos y un entorno virtual configurado.

¡Y listo! Con estos 8 pasos, has configurado un entorno de desarrollo profesional en la nube, has creado una aplicación web con la ayuda de IA y la has subido a GitHub, dejándola preparada para ser desplegada en Streamlit Cloud. ✨