Construindo um frontend usando apenas Python

Desenvolvimento de frontend pode ser uma tarefa muito difícil, especialmente para desenvolvedores focados em backend. Mais cedo na minha carreira, as linhas entre frontend e backend eram borradas, e se experava de todos que conseguissem manejar ambos. CSS em particular era um desafio constante, parecia uma missão impossível.

Apesar de eu aproveitar trabalho de frontend, CSS ainda é um desafio complexo para mim, especialmente porque aprendi por tentativa e erro. O meme do Peter Griffin com dificuldade para abrir persianas captura perfeitamente minha experiência aprendendo CSS

Porém, hoje, tudo vai mudar. Ferramentas como o Streamlit revolucionaram o jogo para desenvolvedores como eu, que preferem o conforto de uma tela preta do terminal. Foram-se os dias de luta com linhas de código que parecem mensagens criptografadas de alienígenas (estou olhando para você, CSS!). Como o Doctor Károly Zsolnai-Fehér, de Two Minute Papers, sempre diz, "que momento para estar vivo!". Com Streamlit, você pode construir uma aplicação web inteira somente usando código Python. Quer ver isso em ação? Prepare-se, porque eu estou prestes a mostrar minha tentativa de criar um frontend para o SQLZilla com essa ferramenta incrível.

Para instalar, simplesmente abra seu terminal e lance esse feitiço:

pip install streamlit

(Ou você pode adicionar isso no seu arquivo requirements.txt.)

Crie um arquivo, app.py e adicione esse code snippet para exibir um tíitulo "SQLZilla":

import streamlit as st

st.title("SQLZilla")

Rode o Show!

Abra seu terminal de novo e digite este comando para ativar sua criação:

streamlit run app.py

Voila!Seu app Streamlit deve aparecer no seu browser, orgulhosamente exibindo o título "SQLZilla."

Adicione um a imagem usando o método image. Para centralizá-la eu só criei 3 colunas e adicionei ela no centro (que vergonha!)

   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 administrar configurações e resultados de queries, você pode usar session_state. Aqui está uma forma de salvar os valores de configuração e guardar resultados de queries:

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 o SQLZilla a uma base de dados InterSystems, você pode usar SQLAlchemy. Primeiro, instale SQLAlchemy com:

pip install sqlalchemy

Então, configure a conexão no seu arquivo app.py:

from sqlalchemy import create_engine
import pandas as pd

# Substitua com os detalhes da sua conexão
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

Uma vez conectado na base de dados, você pode usar Pandas e Streamlit para exibir os resultados de suas queries. Aqui está um exemplo de como exibir um DataFrame no seu app Streamlit:

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

Para deixar seu app mais interativo, você pode usar st.rerun()para atualizar o aplicativo sempre que a query mudar:

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

VocÇe pode encontrar vários componentes Streamlit para usar. No SQLZilla, eu adicionei o editor de código ACE na versão chamada 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']

Já que o assistente SQLZilla é escrito em Python, eu só chamei a classe:

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

Parabéns! Você construiu seu próprio SQLZilla. Continue explorando o Streamlit e melhore seu app com mais recursos. E se gostar do SQLZilla, vote por esse assistente incrível que converte seus textos em queries!