Streamlit เริ่มต้นสร้าง Web App ง่ายๆด้วยภาษา Python โค้ดแค่ 3 บรรทัด

อยากสร้าง Simple Web App ง่ายๆด้วยตัวเอง แต่ไม่รู้จะเริ่มยังไง?

บทความนี้แอดมาแนะนำวิธีการเขียน Web App ง่ายๆด้วย Python + Streamlit เขียนแค่สามบรรทัด เสร็จเลย!

เมื่อวานนี้แอดมีโอกาสได้ live Intro to Streamlit 101 กับ Data Professor อ.เอิร์ล ทำช่อง YouTube Channel มีผู้ติดตามมากกว่า 130K คน (ส่วนใหญ่เป็นฝรั่งหมดเลย ตอนแรกแอดนึกว่า อ. ไม่ใช่คนไทย 555+)

ตอนนี้ อ. ทำงานเป็น Developer Advocate ของ Streamlit/ Snowflake

Snowflake เพิ่งปิดดีลซื้อ Streamlit ไปเมื่อต้นปี 2022 ที่ผ่านมา มูลค่าสูงถึง $800 ล้าน USD – TechCrunch

อ.เอิร์ล มาแชร์การเขียน streamlit เบื้องต้น เรียนจบต้องรีบเขียนสรุปเลย สนุกมาก สมัยก่อน web app ไม่ง่ายแบบนี้เลย ใครเคยเขียน django หรือ flask มาบ้างน่าจะรู้ดี 555+

เดี๋ยวเรามาเริ่มกันที่การ download และติดตั้ง streamlit ผ่าน pip กันก่อน

Get Streamlit

ก่อนเริ่มใช้งาน streamlit เราต้องมีของสามอย่าง (prerequisites) คือ

• IDE/ Text Editor ของแอดใช้เป็น VS Code
• Python เวอร์ชัน 3.7+
• Pip (Package Manager)

ถ้าใครอยากทำตาม tutorial นี้ สามารถดาวน์โหลด Python และ VS Code ได้ฟรี ใช้เวลาติดตั้ง 2 นาทีเสร็จเลย เสร็จแล้วเปิด terminal ขึ้นมา รัน command pip install streamlit

pip install streamlit

👏 อ.เอิร์ลแนะนำ streamlit documetation คืออธิบายละเอียดมาก แอดว่าค่อนข้างอ่านง่ายเลยเมื่อเทียบกับ doc อื่นๆ ทำตามได้ไม่ยาก อ. บอกว่า skill ที่สำคัญมากของ developers คือการอ่าน text/ doc ให้คล่องๆ

Documentation is your best friend.

Data Professor

Start Coding Our App

การใช้งาน streamlit คือง่ายมาก

เปิด VS Code สร้างไฟล์ app.py แล้วก็ import streamlit ได้เลย ตั้งชื่อย่อเป็น st

ใช้ functions อย่าง st.header() หรือ st.write() เพื่อแสดงผล text ใน app ของเรา

และ app เราเขียนแค่ 3 บรรทัดก็รันได้เลย เหลือเชื่อ 555+

import streamlit as st 

st.header("Hello World 👏")

st.write("This is my first app")

มาลองรัน first app ของเราด้วยกันครับ

Run App

เปิด Terminal ขึ้นมา แล้วพิมพ์ command run ตามด้วยชื่อไฟล์ .py ที่เราเขียน

streamlit run app.py

Screenshot การรัน streamlit_app.py ใน terminal

Local URL: http://localhost:8501
Network URL: http://192.168.1.36:8501

Streamlit ใช้ port 8501 เป็น default

เปิด web browser ขึ้นมาก็จะเห็น app ที่เราเขียนไว้เลย ง่ายเหลือเชื่อ

ถ้าเรา edit app.py ของเราใน VS Code เช่น เปลี่ยน text หรือเพิ่ม widget ใหม่ๆเข้ามา ตัว streamlit เป็น hot reload ด้วย คือเราไม่ต้องปิด/เปิด server ให้เสียเวลา สามารถเลือก option always run ได้เลย

Tip – ถ้าต้องการปิด server กลับไปที่ terminal ใน VS Code แล้วกด CTRL+C

Load Dataset

ข้อดีของ streamlit คือมันสามารถ integrate เข้ากับ data analysis workflow แบบ seamless เลย เราสามารถเพิ่ม code pandas ใน app.py เพื่อโหลดข้อมูล และใช้ streamlit แสดงผลข้อมูลเหล่านั้นได้ทันที

import pandas as pd

url = "https://raw.githubusercontent.com/mwaskom/seaborn-data/master/penguins.csv"

df = pd.read_csv(url)
df2 = df.groupby('species')['body_mass_g'].mean()

หลังจากเราเตรียมข้อมูลเสร็จแล้ว มาลอง plot chart ง่ายๆกันบ้าง one liner บรรทัดเดียวจบ อ่ะหืม

st.bar_chart(df2)

ตัวอย่าง bar chart ที่ได้จากฟังก์ชัน st.bar_chart() เป็นแบบ interactive ด้วย

Tip – อย่าลืมกด save app.py ไม่งั้น browser จะไม่ render change ที่เราเขียนเพิ่มเมื่อกี้

Chart Elements

ถ้าอยากได้ charts แบบอื่นๆนอกจาก bar ก็ทำได้ง่ายๆ แค่รู้ชื่อฟังก์ชัน st.___() ที่ต้องการ เช่น

• st.line_chart()
• st.area_chart()
• st.bar_chart()
• st.map()

ดูตัวอย่าง chart elements แบบต่างๆของ streamlit ได้ที่ documentation/charts ตัว streamlit รองรับ chart libraries หลายตัวใน Python เช่น matplotlib, plotly, bokeh

Input Widgets

ใน streamlit เราสามารถเพิ่ม input widgets ใน web app ของเรา ไว้ให้ users เล่นได้ด้วย i.e. interactivity หรือใช้รับ input จาก users เก็บค่าเป็นตัวแปรไว้ใช้ทำ data transformation หรือเปลี่ยนการแสดงผลชาร์ท

ตัวอย่าง input widgets ที่นิยมใช้ใน streamlit เช่น

• Radio
• Select Box
• Multi-Select
• Text Input
• Number Input
• Date Input
• File Uploader

ลองเขียนโค้ดสร้างปุ่ม radio ให้ users เลือก genre ที่ต้องการได้

genre = st.radio(
     "What's your favorite movie genre",
     ('Comedy', 'Drama', 'Documentary'))

st.write(f"You selected {genre}")

Tip – เขียน if-else เพื่อเปลี่ยนการแสดงผลบน web app ตาม input ที่ user เลือกได้ด้วย

Theme Customization

ถ้าเราต้องการเปลี่ยน theme ให้เราสร้างไฟล์ชื่อ .streamlit/config.toml ใน app folder ของเรา เสร็จแล้วใส่รายละเอียดตามนี้ สามารถเปลี่ยนสีและ font เบื้องต้นได้สบายๆ

[theme]
primaryColor="#F63366"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#262730"
font="sans serif"

Final Thought

👏 อันนี้เป็นตัวอย่าง app.py แบบเต็มๆในบทความนี้ code สั้นมาก แต่ได้ app สวยมาก

สรุป ถ้าอยากเริ่มทำ app ด้วย streamlit ต้องเข้าใจเรื่องต่อไปนี้ (แบบ basics ก็ทำได้แล้ว)

• Basic Python
• Pandas ไว้อ่านไฟล์ dataset ง่ายๆ เช่น csv text sql
• Input widgets
• Chart widgets

	import streamlit as st
	import pandas as pd
	st.header("Hello World 👏")
	st.write("This is my first app")
	url = "https://raw.githubusercontent.com/mwaskom/seaborn-data/master/penguins.csv "
	df = pd.read_csv(url)
	df2 = df.groupby('species')['body_mass_g'].mean()
	st.bar_chart(df2)
	genre = st.radio(
	"What's your favorite movie genre",
	('Comedy', 'Drama', 'Documentary'))
	if genre == 'Comedy':
	st.write('You selected comedy.')
	elif genre == 'Drama':
	st.write('You selected drama.')
	else:
	st.write("Wow! You like documentary.")

view raw streamlit_app_new.py hosted with ❤ by GitHub

เราสามารถ deploy app ของเราบน streamlit cloud ฟรีเลย ตอนนี้ได้แบบ unlimited public apps ด้วย

Recorded Video

Data analyst ที่เขียน web app ได้ด้วย! แอดว่าเท่ไม่เบาเลย 555+

ถ้าใช้ streamlit เก่งๆ แอดว่าเราน่าจะสร้าง web app + dashboard จบในตัวเองได้เลย

สำหรับเพื่อนๆที่สนใจเรียนแบบเต็มๆ ลองดูวีดีโอ Intro to Streamlit 101 with Data Professor ใช้เวลาประมาณ 1.50 ชั่วโมง ได้ความรู้เยอะมากๆ มีประโยชน์สุดๆ ขอบคุณ อ.เอิร์ล มากๆครับที่มาแชร์ความรู้

ปล. ต้องเชิญอาจารย์มา collab ด้วยกันบ่อยๆแล้ว 555+ ถ้าใครอยากเรียน streamlit ให้ลึกกว่านี้ comment บอกแอดได้ในโพสต์นี้เลยนะครับ 🔥