Estás leyendo la publicación: Tutorial simplificado para SEO: 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 un front-end 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 conoce los conceptos básicos 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.
“””Una aplicación Streamlit para obtener las consultas de autocompletado de Google “”” importar solicitudes de importación json importar streamlit como st def google_autocomplete(palabra clave: str) -> lista[str]: “””Obtenga consultas de autocompletado de Google para una palabra clave semilla Args: palabra clave (str): La palabra clave semilla Devuelve: lista[str]: Una lista de las consultas de autocompletar “”” google_autocomplete_api: str = “https://www.google.com/complete/search” google_autocomplete_params: dict = { “q”: palabra clave, “cp”: 8, “cliente”: “gws-wiz”, “xssi”: “t”, “hl”: “en-US” } respuesta = solicitudes.get(google_autocomplete_api, params=google_autocomplete_params) list_google_autocomplete_uncleaned: lista[list] = json.loads((respuesta.contenido).decode(“UTF-8”)[5:])[0]
list_google_autocompletar_limpiado: lista[str] = [
element[0].replace(‘‘, ”).replace(‘‘, ”) for element in list_google_autocomplete_uncleaned ]devuelve 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.
Captura 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”).
Recuerde que después de editar su archivo streamlit_app.py y guardarlo, aparece un ícono en la esquina superior derecha de la página, y debe presionar para ver los cambios de la aplicación sin actualizar la página.
Captura 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.
Captura 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”).
Captura 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( “¿Cuál es su palabra clave inicial?”)
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.
si input_google_autocompletar_palabra clave: salida_lista_google_autocompletar: lista[str] = google_autocomplete( input_google_autocomplete_keyword) Captura 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(“Descargar el resultado”, (“\n”).join(output_list_google_autocomplete)) Captura 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.
Captura 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” ) Captura 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” Captura 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.
credenciales: nombres de usuario: primerUsuario: correo electrónico: primerusuario@gmail.com nombre: El primer nombre de usuario contraseña: 12345 # Debe reemplazarse con la contraseña cifrada segundoUsuario: correo electrónico: segundousuario@gmail.com nombre: El segundo nombre de usuario contraseña: 111213 # Debe ser reemplazado con la cookie de contraseña cifrada: días_de_caducidad: 30 clave: alguna_clave_de_firma nombre: alguna_nombre_de_cookie preautorizada: correos electrónicos: – 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.
con open(“./config.yaml”) como archivo: config = yaml.load(file, Loader=yaml.SafeLoader) autenticador = stauth.Authenticate(config[“credentials”]configuración[“cookie”][“name”]configuración[“cookie”][“key”]configuración[“cookie”][“expiry_days”]configuración[“preauthorized”]
) nombre, estado_autenticación, nombre de usuario = autenticador.login(“Iniciar sesión”, “principal”) Captura 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’) # NUESTRO CÓDIGO DE LA APLICACIÓN VIENE AQUÍ elif authentication_status == False: st.error(‘Username/password is incorrecta’) elif authentication_status == Ninguno: st.warning(‘ Porfavor introduzca su nombre de usuario y contraseña’)
Implemente la aplicación Streamlit con Docker
Ahora estamos en el paso 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.
DESDE python:3.9.10 WORKDIR /app COPY . . EJECUTAR pip3 install -r requisitos.txt CMD [“streamlit”, “run”, “streamlit_app.py”]
EXPONER 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:
