「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Pythonのみを使用してフロントエンドを構築する

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

2024 年 11 月 5 日に公開
ブラウズ:743

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

私はフロントエンドの仕事を楽しんでいますが、特に試行錯誤を通じて CSS を学んだので、CSS は私にとって依然として複雑な課題です。ブラインドを開けるのに苦労しているピーター グリフィンのミームは、CSS を学習した私の経験を完璧に捉えています。
Building a frontend using only Python

しかし今日、すべてが変わります。 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」というタイトルが誇らしげに表示されます。

画像メソッドを使用して画像を追加します。中央に配置するには、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 が気に入ったら、テキストをクエリに変換するこの素晴らしいアシスタントに投票してください!

リリースステートメント この記事は次の場所に転載されています: https://dev.to/intersystems/building-a-frontend-using-only-python-2ndn?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3