Cómo crear una interfaz de usuario para su aplicación de Python


Python es uno de los lenguajes de programación comunes para automatizar procesos de SEO.

Una de las mejores bibliotecas para crear una interfaz para nuestras aplicaciones sin ningún conocimiento de HTML, CSS o codificación con un marco basado en JavaScript es el paquete Streamlit.

En este tutorial de Streamlit, profundizaremos en cómo puede crear una hermosa aplicación con Python y Dockerfile para implementar su aplicación Streamlit.

¿Qué es Streamlit?

Streamlit es un marco de aplicación de código abierto (un paquete de Python) que nos brinda el poder de crear aplicaciones atractivas sin ningún conocimiento de desarrollo de front-end.

Esto nos libera de involucrarnos en cualquier marco de trabajo front-end o codificación en HTML, CSS y JavaScript.

Utiliza Python puro para desarrollar su front-end.

¿Cuándo será útil la biblioteca Streamlit?

En primer lugar, si está codificando secuencias de comandos de Python que se ejecutan regularmente en una máquina con un programador de trabajos como cron, Streamlit no es útil para usted.

Pero si está desarrollando una herramienta que desea compartir con los miembros de su equipo, por ejemplo, una aplicación de investigación de palabras clave, puede usar Streamlit.

Además, si necesita un método de autenticación de usuario, la comunidad Streamlit desarrolló un paquete que puede manejarlo por usted.

Crear una aplicación Streamlit: Primeros pasos

Vamos a crear una aplicación simple que obtenga consultas de autocompletado para una palabra clave inicial de la API pública de Google.

Antes de comenzar, cree una carpeta en su máquina y asígnele el nombre que desee.

Además, asumiré que ha instalado Python antes y sabe los fundamentos de la programación de Python.

Para todo el proceso, necesitamos usar estas bibliotecas de Python:

  • Peticiones.
  • Streamlit.
  • Autenticador Streamlit.
  • PyYAML.

Además, importaremos una biblioteca estándar de Python:

El código del tutorial se puede encontrar en mi Repositorio de plantillas de inicio Streamlit en Github.

Instalación del paquete Streamlit

En primer lugar, prefiero crear un entorno virtual ejecutando python3 -m venv .env y luego instalando el paquete Streamlit ejecutando pip3 install streamlit.

Ahora cree un script de Python. Llamémoslo streamlit_app.py.

En proyectos complejos que tienen demasiadas funciones, prefiero tener archivos de script de Python separados para mis diferentes funciones y luego importarlos en streamlit_app.py o crear una aplicación separada con Flask o FastAPI.

Por ejemplo, en una aplicación de investigación de palabras clave, tengo un script de Python para diferentes funciones que obtienen datos de Semrush, un script para obtener los 10 o 20 mejores resultados de Google, un script para obtener el autocompletado de Google y las búsquedas relacionadas con Google, etc. .

Obtenga las consultas de autocompletado de Google

Para realizar solicitudes, necesitamos usar el paquete Solicitudes. Para obtener este paquete, debe ejecutar solicitudes de instalación de pip3.

Además, para analizar la respuesta de la API de autocompletar, necesitamos importar la biblioteca JSON estándar de Python.

En primer lugar, importamos la biblioteca estándar JSON, el paquete Requests para realizar solicitudes y Streamlit para crear nuestra aplicación.

Luego, definí una función para obtener las consultas de autocompletar de Google como una lista de cadenas.

Usé la función de reemplazo dos veces para mantener todo simple, pero puede usar la biblioteca re para usar expresiones regulares.

"""A Streamlit app for getting the Google autocomplete queries
"""
import json

import requests
import streamlit as st

def google_autocomplete(keyword: str) -> list[str]:
    """Get Google autocomplete queries for a seed keyword

    Args:
        keyword (str): The seed keyword

    Returns:
        list[str]: A list of the autocomplete queries
    """
    google_autocomplete_api: str = "https://www.google.com/complete/search"
    google_autocomplete_params: dict = {
        "q": keyword,
        "cp": 8,
        "client": "gws-wiz",
        "xssi": "t",
        "hl": "en-US"
    }

    response = requests.get(google_autocomplete_api, params=google_autocomplete_params)

    list_google_autocomplete_uncleaned: list[list] = json.loads((response.content).decode("UTF-8")[5:])[0]
    list_google_autocomplete_cleaned: list[str] = [
        element[0].replace('<b>', '').replace('</b>', '')
        for element in list_google_autocomplete_uncleaned
        ]

    return list_google_autocomplete_cleaned

La aplicación Streamlit

Hasta ahora, hemos instalado el paquete Streamlit y definido nuestra función para obtener las consultas de autocompletado de Google. Ahora, vamos a crear la aplicación real.

Para ver la aplicación Streamlit, debemos ejecutar Streamlit con el comando run streamlit_app.py en la terminal para ejecutar nuestra aplicación localmente. Después de ejecutar este comando, yendo a la URL http://localhost:8501/, puede ver la aplicación.

Sí, está en blanco porque no le agregamos ningún encabezado, etc.

Ejecutar la aplicación Streamlit desde una terminalCaptura de pantalla del autor, octubre de 2022

Agregue un encabezado a la aplicación Streamlit

Agreguemos un encabezado a nuestra aplicación. Como ves arriba, importé el Streamlit como st.

Ahora llamando a la función st.title(), podemos agregar un encabezado a la página con un estilo de título. Digamos st.title («Esta es una aplicación SEO de siguiente nivel»).

Recuerda que luego de editar tu archivo streamlit_app.py y guardarlo, aparece un ícono en la esquina superior derecha de la página, y debes presionar Siempre regresa para ver los cambios de la aplicación sin actualizar la página.

Siempre botón de retorno en la aplicación StreamlitCaptura de pantalla del autor, octubre de 2022

Ahora nuestra aplicación se parece a la imagen de debajo. Si el tema de su sistema es oscuro, su aplicación tiene un tema oscuro.

Una mirada a una aplicación Streamlit con encabezadoCaptura de pantalla del autor, octubre de 2022

Agregar texto a la aplicación Streamlit

Para agregar un párrafo de texto a la aplicación, debe usar la función st.write(). Por ejemplo, st.write(“Haz realidad tus ideas”).

aplicación steamlitCaptura de pantalla del autor, octubre de 2022

Agregue una entrada de texto a la aplicación Streamlit

Como viste en la función de autocompletar de Google, había un argumento llamado “palabra clave”.

Este argumento debe provenir de la entrada del usuario.

Para obtener la entrada del usuario, podemos usar un campo de entrada de texto en Streamlit. Con st.text_input() podemos agregar una entrada de texto. Por ejemplo, st.text_input(“¿Cuál es su palabra clave inicial?”).

Además, para poder usar la palabra clave de entrada más tarde para pasar a nuestra función, debemos asignarla a una variable.

input_google_autocomplete_keyword: str = st.text_input(
    "What is your seed keyword?")

Ahora queremos ejecutar nuestra aplicación cuando haya una palabra clave de entrada. Aquí, usamos una declaración if para verificar si la variable está vacía o no.

if input_google_autocomplete_keyword:
    output_list_google_autocomplete: list[str] = google_autocomplete(
        input_google_autocomplete_keyword)
Una mirada a una aplicación Streamlit con encabezado, texto y entrada de textoCaptura de pantalla del autor, octubre de 2022

Descargar desde la aplicación Streamlit

Por lo tanto, hemos agregado un encabezado, una línea de texto y un campo de texto de entrada para obtener la palabra clave inicial del usuario.

Ahora debemos ejecutar nuestra función escrita y hacer un botón de descarga para que el usuario obtenga los resultados en un archivo de texto.

if output_list_google_autocomplete:
        st.download_button("Download the output",
                           ("n").join(output_list_google_autocomplete))
Una mirada a una aplicación Streamlit con encabezado, texto, entrada de texto y botón de descargaCaptura de pantalla del autor, octubre de 2022

¡Construimos nuestra aplicación simple! Cambiemos el título de la aplicación y el favicon.

Antes de eso, veamos el código de la sección de la aplicación Streamlit hasta ahora.

El código de la sección de la aplicación StreamlitCaptura de pantalla del autor, octubre de 2022

Cambiar el título de la aplicación y el Favicon

El título predeterminado de la aplicación es streamlit_app · Streamlit, y el ícono favorito de la aplicación es el ícono de Streamlit.

Para cambiar el título y el favicon, debemos usar st.set_page_config().

Además, prefiero que el diseño de la aplicación sea amplio (puedes probarlo).

st.set_page_config(
    page_title="Oh My App!",
    page_icon="😎",
    layout="wide"
)
La aplicación Streamlit en el navegadorCaptura de pantalla del autor, octubre de 2022

Establecer el tema predeterminado de la aplicación

El tema de la aplicación se basa en la configuración del sistema del usuario, pero personalmente, la mayoría de las veces, descubro que el tema claro tiene un mejor contraste, y no quiero que mi equipo dedique su tiempo a averiguar cómo cambiar el tema de la aplicación.

Para establecer un tema predeterminado para la aplicación Streamlit, primero debe crear una carpeta y nombrarla .streamlit. Dentro de esta carpeta, cree un archivo y asígnele el nombre config.toml.

Dentro de config.toml debe insertar las siguientes líneas para configurar el tema predeterminado de su aplicación.

[theme]
base = "light"
El código del archivo confing.toml para personalizar el tema de la aplicación StreamlitCaptura de pantalla del autor, octubre de 2022

Autenticación de usuarios en Streamlit

Imagine que después de implementar su aplicación, alguien descubre la URL de la aplicación y accede a ella.

Para proteger su aplicación, debe autorizar a los usuarios antes de que puedan usar la aplicación, como la mayoría de los SASS que usamos todos los días.

Para una aplicación Streamlit, podemos usar el paquete Streamlit-Authenticator. Para instalarlo, en el terminal ubicado en la carpeta de su aplicación, escriba el comando pip3 install streamlit-authenticator e importe el paquete a su aplicación.

te recomiendo que leas el Documentación del paquete de autenticación Streamlit para tener una mejor comprensión de lo que está pasando.

importar streamlit_authenticator como stauth

Ahora cree un archivo config.yaml para insertar las credenciales de nuestros usuarios.

credentials:
  usernames:
    firstUser:
      email: firstuser@gmail.com
      name: The first username
      password: 12345 # Must be replaced with the hashed password
    secondUser:
      email: seconduser@gmail.com
      name: The second username
      password: 111213 # Must be replaced with the hashed password
cookie:
  expiry_days: 30
  key: some_signature_key
  name: some_cookie_name
preauthorized:
  emails:
    - my@gmail.com

Como puede ver en el documento del paquete, ahora debemos cifrar las contraseñas con los módulos Hasher. Prefiero abrir un IPython y ejecutar la siguiente línea de código.

hash_passwords = stauth.Hasher([‘12345’, ‘111213’]).generar()

Creación de un widget de inicio de sesión

Ahora debemos crear un widget de inicio de sesión donde los usuarios puedan ingresar su nombre de usuario, contraseña y luego iniciar sesión en la aplicación.

Primero, debe instalar el paquete PyYAML con el comando pip3 install pyyaml ​​e importarlo con import yaml.

Luego cree un objeto de autenticación y represente el módulo de inicio de sesión.

with open("./config.yaml") as file:
    config = yaml.load(file, Loader=yaml.SafeLoader)

authenticator = stauth.Authenticate(
    config["credentials"],
    config["cookie"]["name"],
    config["cookie"]["key"],
    config["cookie"]["expiry_days"],
    config["preauthorized"]
)

name, authentication_status, username = authenticator.login("Login", "main")
El widget de inicio de sesión de StreamlitCaptura de pantalla del autor, octubre de 2022

Mostrar la aplicación a los usuarios que iniciaron sesión correctamente

Ahora podemos usar la variable authentication_status para ver la aplicación para nuestros usuarios que iniciaron sesión correctamente.

if authentication_status:
    authenticator.logout('Logout', 'main')
    # OUR APP CODE COMES HERE
elif authentication_status == False:
    st.error('Username/password is incorrect')
elif authentication_status == None:
    st.warning('Please enter your username and password')

Implemente la aplicación Streamlit con Docker

Ahora estamos en el camino final del desarrollo de nuestra aplicación.

Puede usar diferentes servicios para implementar su aplicación, como AWS, Google Cloud, Azure, Heroku, DigitalOcean, etc.

Antes del Dockerfile, creemos el archivo requirements.txt. Para hacerlo, podemos usar el comando pip3 freeze > requirements.txt.

Dockerfile optimizado

Para implementar nuestra aplicación, uso Python 3.9.10.

FROM python:3.9.10
WORKDIR /app
COPY . .
RUN pip3 install -r requirements.txt
CMD ["streamlit", "run", "streamlit_app.py"]
EXPOSE 8501

Envolver

En este tutorial, vimos cómo podemos crear una interfaz de usuario impresionante con Python puro e implementarla con Docker.

Para obtener más información sobre los diferentes widgets de Streamlit, consulte su bien documentado Referencia de la API.

Más recursos:


Imagen destacada: Yaran/Shutterstock





Consultar el artículo en la publicación original

Cómo crear una interfaz de usuario para su aplicación de Python
A %d blogueros les gusta esto: