Construyendo un frontend usando solo Python

El desarrollo frontend puede ser una tarea desalentadora, incluso una pesadilla, para los desarrolladores centrados en el backend. Al principio de mi carrera, la línea entre frontend y backend era difusa, y se esperaba que todos manejaran ambos. El CSS, en particular, siempre fue una lucha constante; sentía que era una misión imposible.

Aunque disfruto trabajando en el frontend, el CSS sigue siendo un desafío complejo para mí, especialmente porque lo aprendí a base de prueba y error. El meme de Peter Griffin luchando por abrir persianas captura perfectamente mi experiencia aprendiendo CSS.

Pero hoy, todo cambia. Herramientas como Streamlit han revolucionado el juego para desarrolladores como yo, que prefieren la comodidad de la pantalla negra del terminal. Se acabaron los días de pelear con líneas de código que parecen mensajes crípticos de extraterrestres (¡me refiero a ti, CSS!).
Como siempre dice el Doctor Károly Zsolnai-Fehér de Two Minute Papers, "¡Qué tiempo para estar vivos!"

Con Streamlit, podéis construir una aplicación web completa usando solo código en Python.
¿Queréis verlo en acción? Abrochaos el cinturón, porque estoy a punto de compartir mi intento de crear el frontend para SQLZilla usando esta increíble herramienta.

Para instalarlo, simplemente abrid vuestro terminal y lanzad este hechizo:

pip install streamlit

(O también podéis añadirlo a vuestro archivo requirements.txt.)

Cread un archivo llamado app.py y añadid este fragmento de código para mostrar un título de "SQLZilla":

import streamlit as st

st.title("SQLZilla")

¡Ejecutad la demostración!

Volved a abrir vuestro terminal y escribid este comando para activar vuestra creación:

streamlit run app.py

¡Voilà! Vuestra aplicación de Streamlit debería aparecer en vuestro navegador web, mostrando con orgullo el título "SQLZilla".

Para mostrar una imagen, carguemos un fichero (small_logo.png) con la imagen que queráis, en el mismo directorio en que se encuentra el programa app.py.

Para mostrar esa imagen basta entonces con usar el método image. Para centrarla, simplemente creé 3 columnas y la añadí al centro (¡creativo que estoy!).

   st.title("SQLZilla")

   left_co, cent_co, last_co = st.columns(3)
   with cent_co:
       st.image("small_logo.png", use_column_width=True)

Para gestionar configuraciones y resultados de consultas, podéis usar el estado de la sesión. Aquí tenéis cómo guardar valores de configuración y almacenar resultados de consultas:

if 'hostname' not in st.session_state:
    st.session_state.hostname = 'sqlzilla-iris-1'
if 'user' not in st.session_state:
    st.session_state.user = '_system'
if 'pwd' not in st.session_state:
    st.session_state.pwd = 'SYS'
# Add other session states as needed

Para conectar SQLZilla a una base de datos InterSystems IRIS, podéis usar SQLAlchemy. Primero, instalad SQLAlchemy con:

pip install sqlalchemy
pip install sqlalchemy-iris

El paquete sqlalchemy-iris se lo debemos al trabajo realizado por @Dimitry Maslennikov y tenéis más información en SQLAlchemy-iris en OpenExchange. Basicamente nos permitirá usar el dialecto "iris" cuando nos conectemos con sqlalchemy a un IRIS.

Luego, configurad la conexión en vuestro archivo app.py:

from sqlalchemy import create_engine
import pandas as pd

# Replace with your own connection details
engine = create_engine(f"iris://{user}:{password}@{host}:{port}/{namespace}")

def run_query(query):
    with engine.connect() as connection:
        result = pd.read_sql(query, connection)
        return result

Una vez que os hayáis conectado a la base de datos, podéis usar Pandas y Streamlit para mostrar los resultados de vuestras consultas. Aquí tenéis un ejemplo de cómo mostrar un DataFrame en vuestra aplicación de Streamlit:

if 'query' in st.session_state:
    query = st.session_state.query
    df = run_query(query)
    st.dataframe(df)

Para hacer que vuestra aplicación sea más interactiva, podéis usar st.rerun() para actualizar la aplicación cada vez que cambie la consulta:

if 'query' in st.session_state and st.button('Run Query'):
    df = run_query(st.session_state.query)
    st.dataframe(df)
    st.rerun()

Podéis encontrar varios componentes de Streamlit para usar. En SQLZilla, añadí una versión del editor de código ACE llamada streamlit-code-editor:

from code_editor import code_editor

editor_dict = code_editor(st.session_state.code_text, lang="sql", height=[10, 100], shortcuts="vscode")

if len(editor_dict['text']) != 0:
    st.session_state.code_text = editor_dict['text']

Dado que el asistente de SQLZilla está escrito en Python, simplemente llamé a la clase:

from sqlzilla import SQLZilla

def assistant_interaction(sqlzilla, prompt):
    response = sqlzilla.prompt(prompt)
    st.session_state.chat_history.append({"role": "user", "content": prompt})
    st.session_state.chat_history.append({"role": "assistant", "content": response})

    if "SELECT" in response.upper():
        st.session_state.query = response

    return response

¡Felicidades! Habéis creado vuestro propio SQLZilla. Seguid explorando Streamlit y mejorad vuestra aplicación con más características. Y si os gusta SQLZilla, ¡votad por este increíble asistente que convierte texto en consultas!