Cómo crear una interfaz de usuario para su aplicación 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 conocimientos de HTML, CSS o codificación con un marco respaldado por JavaScript es el paquete Streamlit.

En este tutorial de Streamlit, veremos cómo puede crear una hermosa aplicación con Python y Dockerfile para el desarrollo de aplicaciones de 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 hermosas aplicaciones sin ningún conocimiento de desarrollo front-end.

Esto nos libera de participar en cualquier marco 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 codifica secuencias de comandos de Python que se ejecutan regularmente en una máquina con un programador de tareas 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 ha desarrollado un paquete que puede manejarlo por usted.

Creación de una aplicación Streamlit: Primeros pasos

Vamos a crear una aplicación simple que reciba consultas de autocompletado para una palabra clave básica de la API pública de Google.

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

También supondré que ha instalado Python antes y conoce los conceptos básicos de la programación de Python.

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

  • Aplicaciones.
  • Streamlit.
  • Autenticador Streamlit.
  • PyYAML.

También importaremos una biblioteca Python estándar:

Puede encontrar el código del tutorial en el repositorio de plantillas de inicio de Streamlit en Github.

Instalación del paquete Streamlit

En primer lugar, prefiero crear un entorno virtual ejecutando python3 -m venv .env y luego instalar 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 a 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 búsquedas relacionadas con Google. etc. .

Obtener consultas de autocompletar de Google

Para hacer solicitudes, necesitamos usar el paquete de 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 JSON estándar, el paquete de solicitudes para realizar solicitudes y Streamlit para construir nuestra aplicación.

A continuación, definí una función para obtener las consultas de autocompletado de Google como una lista de cadenas.

Usé la función de reemplazo dos veces para simplificar las cosas, pero puede usar la biblioteca re para usar la expresión regular.

"""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

Por ahora, hemos instalado el paquete Streamlit y configurado nuestra función para descargar las consultas de autocompletar de Google. Ahora, construyamos 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, al navegar a la URL http://localhost:8501/, puede ver la aplicación.

Sí, está vacío 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 su aplicación Streamlit

Agreguemos un encabezado a nuestra aplicación. Como puede ver arriba, ingresé a Streamlit como st.

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

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

Botón siempre de vuelta a la aplicación StreamlitCaptura de pantalla del autor, octubre de 2022

Ahora nuestra aplicación se parece a la imagen de abajo. 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 luego usar la palabra clave de entrada 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 esté presente 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

Así que agregamos un encabezado, una línea de texto y un campo de texto de entrada para obtener la palabra clave del usuario.

Ahora necesitamos ejecutar nuestra función de escritura y crear un botón de descarga para que el usuario envíe los resultados a 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 un encabezado, texto, entrada de texto y un botón de descargaCaptura de pantalla del autor, octubre de 2022

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

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

El código del módulo de 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 icono favorito de la aplicación es el icono de Streamlit.

Para cambiar el título y el favicon, necesitamos 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, encuentro que el tema abierto contrasta mejor y no quiero que mi equipo dedique tiempo a aprender 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 usuario 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 pip3 install streamlit-authenticator e importe el paquete a su aplicación.

Recomendamos leer la documentación del paquete del autenticador Streamlit para comprender mejor lo que sucede.

importar streamlit_authenticator como stauth

Ahora cree un archivo config.yaml para importar 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 necesitamos codificar las contraseñas con unidades Hasher. Prefiero abrir un IPython y ejecutar la siguiente línea de código.

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

Crear widget de inicio de sesión

Ahora necesitamos 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 pip3 install pyyaml ​​​​e importarlo con import yaml.

Luego cree un objeto de autenticación y represente el módulo de conexió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')

Desarrolla tu aplicación Streamlit con Docker

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

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

Antes del Dockerfile, creemos el archivo require.txt. Para hacer esto, podemos usar el comando pip3 congelar > requisitos.txt.

Dockerfile optimizado

Para desarrollar nuestra aplicación, estoy usando 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 increíble interfaz de usuario con Python puro e implementarla con Docker.

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

Más recursos:


Imagen destacada: Yaran/Shutterstock

Previous post Script de exclusión de ubicación para ahorrar dinero para Google Ads
Next post Cómo funciona el algoritmo de Facebook

Deja una respuesta