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

WBOY
リリース: 2024-08-29 06:34:02
オリジナル
293 人が閲覧しました

バックエンドに重点を置く開発者にとって、フロントエンド開発は困難な、さらには悪夢のような作業になる可能性があります。私のキャリアの初期には、フロントエンドとバックエンドの境界があいまいで、誰もが両方を扱うことが期待されていました。特に 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」というタイトルが誇らしげに表示されます。

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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!