Pythonのみを使用してフロントエンドを構築する

バックエンドに重点を置く開発者にとって、フロントエンド開発は困難な、さらには悪夢のような作業になる可能性があります。私のキャリアの初期には、フロントエンドとバックエンドの境界があいまいで、誰もが両方を扱うことが期待されていました。特に CSS は絶えず苦労しました。それは不可能な使命のように感じました。

私はフロントエンドの仕事を楽しんでいますが、CSS は私にとって依然として複雑な課題であり、特に試行錯誤の中で学んだものです。ブラインドを開けるのに苦労しているピーター グリフィンのミームは、CSS を学習した私の経験を完璧に表現しています。

しかし今日、すべてが変わります。 Streamlit のようなツールは、端末の黒い画面の快適さを好む私のような開発者にとって、ゲームに革命をもたらしました。宇宙人からの不可解なメッセージのように見えるコード行と格闘する日々は終わりました (CSS さん、あなたを見ています!)。
Two Minute Papers のカーロリ・ジョルナイ＝フェヘル医師がいつも言うように、「生きているとはなんと素晴らしい時だろう!」
Streamlit を使用すると、Python コードだけを使用して Web アプリケーション全体を構築できます。
実際に動作しているところを見てみたいですか?このすばらしいツールを使用して SQLZilla のフロントエンドを作成する試みをこれから共有するので、しっかりしてください。

インストールするには、ターミナルを開いて次の呪文を唱えるだけです:

pip install streamlit

(または、requirements.txt ファイルに追加することもできます。)

ファイル app.py を作成し、次のコード スニペットを追加して「SQLZilla」のタイトルを表示します。

import streamlit as st

st.title("SQLZilla")

ショーを実行してください!

ターミナルを再度開き、次のコマンドを入力して作成を有効にします:

streamlit run app.py

出来上がり！ Streamlit アプリが Web ブラウザーに表示され、「SQLZilla」というタイトルが誇らしげに表示されます。

image メソッドを使用して画像を追加します。中央に配置するには、3 つの列を作成して中央に追加するだけです (恥ずかしいです)

   st.title("SQLZilla")

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

構成とクエリ結果を管理するには、セッション状態を使用できます。構成値を保存し、クエリ結果を保存する方法は次のとおりです:

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

SQLZilla を InterSystems IRIS データベースに接続するには、SQLAlchemy を使用できます。まず、SQLAlchemy を次のようにインストールします。

pip install sqlalchemy

次に、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

データベースに接続したら、Pandas と Streamlit を使用してクエリの結果を表示できます。以下は、Streamlit アプリで DataFrame を表示する方法の例です:

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

アプリをよりインタラクティブにするために、クエリが変更されるたびに st.rerun() を使用してアプリを更新できます。

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

使用できるさまざまな Streamlit コンポーネントを見つけることができます。 SQLZilla に、streamlit-code-editor:
という ACE コード エディターのバージョンを追加しました。

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']

SQLZilla アシスタントは Python で記述されているため、クラスを呼び出しました。

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

おめでとうございます!独自の SQLZilla を構築しました。 Streamlit の探索を続けて、より多くの機能を追加してアプリを強化してください。 SQLZilla が気に入ったら、テキストをクエリに変換するこの素晴らしいアシスタントに投票してください!

以上がPythonのみを使用してフロントエンドを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。