Créer un frontend uniquement à l'aide de Python

Pour les développeurs axés sur le backend, le développement du frontend peut être une tâche intimidante, voire cauchemardesque. Au début de ma carrière, les frontières entre frontend et backend étaient brouillées et tout le monde était censé s'occuper des deux. Le CSS, en particulier, a été une lutte constante ; il a été ressenti comme une mission impossible.

Bien que j'apprécie le travail sur le front-end, CSS reste un défi complexe pour moi, d'autant plus que je l'ai appris par essais et erreurs. Le mème de Peter Griffin s'efforçant d'ouvrir des stores illustre parfaitement mon expérience de l'apprentissage du CSS.

Mais aujourd'hui, tout est changé. Des outils comme Streamlit ont révolutionné le jeu pour les développeurs qui, comme moi, préfèrent le confort de l'écran noir d'un terminal. Fini le temps où l'on se débattait avec des lignes de code qui ressemblaient à des messages cryptiques d'extraterrestres (je te regarde, CSS!).
Comme le dit toujours le docteur Károly Zsolnai-Fehér de Two Minute Papers, "Quelle époque pour être en vie !".
Avec Streamlit, vous pouvez créer une application web complète en utilisant uniquement du code Python.
Voulez-vous le voir à l'œuvre? Attachez vos ceintures, car je suis sur le point de partager ma tentative de création d'un frontend pour SQLZilla en utilisant cet outil génial.

Pour l'installer, il suffit d'ouvrir votre terminal et de lancer le sort suivant:

pip install streamlit

(Ou vous pouvez l'ajouter à votre fichier requirements.txt.)

Créez un fichier, app.py et ajoutez cet extrait de code pour afficher un titre "SQLZilla":

import streamlit as st

st.title("SQLZilla")

L'événement est à vous!

Ouvrez à nouveau votre terminal et tapez la commande suivante pour activer votre création:

streamlit run app.py

Voila! Votre application Streamlit devrait apparaître dans votre navigateur web, affichant fièrement le titre "SQLZilla".

Ajoutez une image en utilisant la méthode d'image, pour la centraliser j'ai juste créé 3 colonnes et je les ajouté au centre (honte à moi)

   st.title("SQLZilla")

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

Pour gérer les configurations et les résultats des requêtes, vous pouvez utiliser l'état de la session. Vous trouverez ci-dessous la manière d'enregistrer les valeurs de configuration et de stocker les résultats des requêtes:

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

Pour connecter SQLZilla à une base de données IRIS InterSystems, vous pouvez utiliser SQLAlchemy. Tout d'abord, installez SQLAlchemy avec:

pip install sqlalchemy

Ensuite, configurez la connexion dans votre fichier app.py:

from sqlalchemy import create_engine
import pandas as pd

# Remplacez par vos propres données de connexion
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

Une fois connecté à la base de données, vous pouvez utiliser Pandas et Streamlit pour afficher les résultats de vos requêtes. Voici un exemple d'affichage d'un DataFrame dans votre application Streamlit:

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

Pour rendre votre application plus interactive, vous pouvez utiliser st.rerun() pour rafraîchir l'application à chaque changement de la requête:

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

Vous pouvez trouver des composants Streamlit variés à utiliser. Dans SQLZilla, j'ai ajouté une version de l'éditeur de code ACE appelée 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']

Comme l'assistant SQLZilla est écrit en Python, j'ai simplement appelé la 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

Bravo! Vous avez créé votre propre SQLZilla. Continuez à explorer Streamlit et améliorez votre application avec d'autres fonctionnalités. Et si vous aimez SQLZilla, votez pour cet incroyable assistant qui convertit le texte en requêtes!