Aplicaciones web: a fondo

  • Crearás una aplicación web que muestre imágenes y reproduzca sonidos
  • Aprenderás a crear gráficos de datos en Python con Jupyter Notebooks
  • Crearás una aplicación web de panel de datos con Streamlit

STREAMLIT

Crear una aplicación web con Streamlit y Python es muy sencillo. Al igual que las plataformas programación basadas en bloques, la plataforma Streamlit incluye muchos componentes y widgets que pueden añadirse a tu aplicación con una sola línea de código. La mayor parte del código ya está escrito y empaquetado para que puedas centrarte en los objetivos de tu aplicación, en lugar de enredarte en un montón de código difícil. 

Para practicar el uso de Streamlit, tomaremos uno de nuestros ejemplos de aplicación móvil de Thunkable y App Inventor, y mostraremos cómo se puede construir la misma aplicación en forma de aplicación web utilizando Streamlit. 

ACTIVIDAD 1: APLICACIÓN DE CAJA DE SONIDOS

Tiempo estimado: 30 minutos

Programa una aplicación web Streamlit

  1. Haz clic en el botón de abajo para descargar los recursos (imágenes y archivos de sonido) necesarios para crear la aplicación.
  2. Siga un de estos vídeos para crear una sencilla aplicación Soundboard que reproduzca sonidos al pulsar un botón.
  3. Añade una cuarta persona a tu aplicación. Busca una imagen y un breve archivo de sonido para añadirlos a la aplicación. Aquí tienes un enlace a algunos discursos famosos.
Descargar los archivos

TRABAJANDO CON DATOS

El lenguaje Python funciona bien con datos. Python tiene muchas bibliotecas creadas específicamente para permitir a los programadores leer, manipular y representar datos. Cuando se combina con la plataforma Streamlit, los programadores pueden crear fácilmente aplicaciones que analicen y muestren datos a los usuarios. Y puedes dar el siguiente paso para incorporar conjuntos de datos y modelos de aprendizaje automático en una aplicación.

gráficos de datos

La mayoría de los programadores y científicos de datos trabajan con datos en Python utilizando un software llamado Notebooks. Una de las interfaces de Notebook más populares es Jupyter Notebook. Según los resultados de la encuesta de Kaggle en 022, Jupyter Notebooks es el entorno de desarrollo interactivo (IDE) de ciencia de datos más popular, utilizado por más del 80% de los encuestados. 

Jupyter Notebook se ejecuta en un navegador, aunque existen otras interfaces. Por ejemplo, puede integrarse directamente en Visual Studio Code. 

El motor detrás del notebook que ejecuta el código se llama kernel. Para Python, usarás el kernel ipython. 

Los notebooks te permiten escribir tanto texto como código Python. El texto se escribe utilizando un lenguaje markdowncon comandos sencillos para dar formato al texto. Es una buena manera de añadir cabeceras y explicaciones del código incluido en el notebook.

También puedes ejecutar código Python directamente en el notebook. 

jupyter notebook captura de pantalla de las celdas de código

Similar a un cuaderno físico que podrías usar en la escuela, los Jupyter Notebooks son una gran manera de tomar notas, organizar tus pensamientos con un proyecto de datos y explorar información. La función añadida de ejecutar código te permite experimentar con código Python de forma controlada y organizada. 

Los Jupyter Notebooks te ayudan a planificar y probar distintos aspectos de tu aplicación web antes de pasar al editor de código visual para crear la aplicación real.

BIBLIOTECAS DE PYTHON

Hay muchas bibliotecas que necesitarás utilizar en tu código para construir tu aplicación web. Una biblioteca es una colección de código pre-escrito que realiza tareas particulares. Las bibliotecas de programación son muy potentes y permiten que tu aplicación haga cosas muy potentes con unas pocas líneas de código. 

Para Python, la mayoría de las bibliotecas requieren que primero las instales en tu ordenador, y luego en tu archivo de script de Python, importarás las bibliotecas que necesites. 

Un ejemplo de bibliotecas que necesitarás para utilizar datos son numpy y pandas.

Pandas permite a tu aplicación trabajar fácilmente con grandes cantidades de datos. Pone los datos en algo llamado dataframe, y tu aplicación trabaja con el dataframe. Numpy tiene muchas funciones para realizar operaciones numéricas con los datos del dataframe.

Además, existen muchos trazadores y gráficos bibliotecas, que permiten a los usuarios visualizar los datos. Los programas de visualización más populares bibliotecas en Python son matplotlib, plotlyy seaborn

La siguiente actividad utilizará todos estos bibliotecas. La actividad tomará un conjunto de datos de una encuesta sobre música y salud mental para crear una aplicación de panel de datos que muestre los datos de diferentes maneras para que el usuario interactúe con ellos.

ACTIVIDAD 2: PANEL DE DATOS

Tiempo estimado: 90 minutos

Crea una aplicación web Streamlit

Dependiendo de si estás en programación en tu ordenador o en la nube, sigue el conjunto de vídeos apropiado.
  • En tu ordenador:
    1. Siga este video (Parte 1) para instalar y ejecutar el Jupyter Notebook. Haga clic en el siguiente enlace para descargar el archivo del bloc de notas.
    2. Sigue este video (Parte 2) para construir la aplicación de panel de datos utilizando Streamlit.
  • En la nube:
    1. Siga este video (Parte 1) para ejecutar el Jupyter Notebook en Github Codespaces.
    2. Siga este video (Parte 2) para construir la aplicación de tablero de datos utilizando Streamlit.io.
Tu turno: Añade un gráfico más a tu panel de datos. Puede elegir entre algunos de los otros gráficos del sitio web original Jupyter Notebook, o crear un nuevo gráfico en Jupyter Notebook, y luego integrar el código en Streamlit para añadirlo al panel de control.
Descargar el Notebook

REFLEXIÓN

Enhorabuena, ¡has creado dos aplicaciones web en Streamlit! Hazte estas preguntas:

reflexión
¿Has tenido algún problema al instalar o ejecutar Jupyter Notebook o Streamlit?
¿Cómo superaste los problemas cuando te topaste con ellos?
¿Cómo puedes utilizar las ideas de esta lección en tu proyecto?

REVISIÓN DE TÉRMINOS CLAVE

  • Jupyter Notebook - popular entorno de desarrollo interactivo de ciencia de datos para trabajar con datos mediante Python programación
  • Kernel - un proceso que se ejecuta y actúa como motor de Jupyter Notebooks
  • Lenguaje Markdown - un lenguaje que permite formatear texto fácilmente para que sea más legible
  • Biblioteca - colección de código preescrito que realiza determinadas tareas

RECURSOS ADICIONALES

Jupyter Notebooks

 

Streamlit