Streamlit入門
データベースの準備
弊社では，簡易的なWebアプリを作成するときに，streamlitを使っています．streamlitを使うことによって，より簡単に，かつ高速に簡易Webアプリを構築できるからです．
ここでは，streamlitとmongodbを用いた，簡単なCRUDアプリを作成していきます．
まず，データベースとしてNo SQL型のmongodbを使うのですが，ローカルにデータベースを作成するのは面倒なので，クラウドのmongodb atlasを使うことにします．
Pythonからmongodbに接続するために，pymongoパッケージをインストールしておきます．streamlitと同様に，pipで入れられます．
例として，都道府県の県庁所在地の緯度経度情報を入れたcust.csvというデータをデータベースに保存しましょう．
from pymongo import MongoClient
client = MongoClient(“接続文字列”)
db = client.test #テスト用database
cust_df = pd.read_csv(folder+”Cust.csv”, index_col=0)
db.cust_df.drop()
db.cust_df.create_index(“name”, unique =True)
db.cust_df.insert_many(cust_df.to_dict(“records”))
最後の５つを表示してみましょう．
| _id | name | lat | lon | |
|---|---|---|---|---|
| 42 | 5f3b5a3443d68ac629f7f02b | 熊本市 | 32.78972 | 130.74167 |
| 43 | 5f3b5a3443d68ac629f7f02c | 大分市 | 33.23806 | 131.61250 |
| 44 | 5f3b5a3443d68ac629f7f02d | 宮崎市 | 31.91111 | 131.42389 |
| 45 | 5f3b5a3443d68ac629f7f02e | 鹿児島市 | 31.56028 | 130.55806 |
| 46 | 5f3b5a3443d68ac629f7f02f | 那覇市 | 26.21250 | 127.68111 |
表示
それではデータをstreamlitで表示してみます．まず，必要なパッケージを読み込みます．
import streamlit as st
import pandas as pd
from pymongo import MongoClient
from pymongo.errors import DuplicateKeyError
mongodbとの接続は，streamlitのキャッシュ機能を用いて，１度だけ接続するようにしておきます．
@st.cache(hash_funcs={MongoClient: id})
def get_client():
return MongoClient(“接続文字列”)
クライアントと接続してtestデータベースのcust_dfコレクションからデータフレームを生成します．
client = get_client()
db = client.test
cust_df = pd.DataFrame.from_records(db.cust_df.find())
データフレームを表示するのは，単にwriteメソッドを呼ぶだけです．
st.write(cust_df)
これだけで，以下のようなGUIができます．
データの更新と削除
データはname列をユニークに設定しているので，それで検索して表示させるようにします．表示させたら，データの更新と削除を実装します．
name = st.text_input(“Input name to show”)
if st.checkbox(“Search”):
cust = db.cust_df.find_one({“name”:name})
if cust is not None:
new_name = st.text_input(“Name”, value = cust[“name”])
new_lat = st.number_input(“Latitude”, value = cust[“lat”],key=”new lat”)
new_lon = st.number_input(“Longitude”, value = cust[“lon”], key =”new lon”)
if st.button(“Update”):
cust[“name”] = new_name
cust[“lat”] = new_lat
cust[“lon”] = new_lon
try:
db.cust_df.save(cust)
st.success(“Data was successfully updated!”)
except DuplicateKeyError:
st.warning(“Name duplication error!”)
if st.button(“Delete”):
db.cust_df.remove( { “name”: new_name } )
st.success(“Data was successfully deleted!”)
else:
st.write(“No such name!”)
これで，データ更新と削除のGUIの完成です．
データの追加
データの追加も同様です．
if st.checkbox(“Add new data”):
new_name = st.text_input(“Name”)
new_lat = st.number_input(“Latitude”)
new_lon = st.number_input(“Longitude”)
if st.button(“Add”):
try:
db.cust_df.insert( { “name”: new_name, “lat”:new_lat, “lon”:new_lon } )
st.success(“Data was successfully inserted!”)
except DuplicateKeyError:
st.warning(“Name duplication error!”)
たった数行のコードで，以下のようなデータ追加のGUIができます．弊社では，こういった技術を用いて最適化のための簡易Webアプリを提供しています．ご興味をもたれた方は，こちらからご連絡下さい．
