黑蛋從NASA系外行星資料庫網站產出客戶所要求的資料報表後，開始整理要跟PM貳婰舞開工作進度報告會議的簡報，他心想：何不試試用Streamlit來呈現報告內容？

首先，他開啟一個命名為exoplanet_data_intro.py的Python script，引入streamlit套件後，分別用st.title、st.header及st.subheader三個內建元件來呈現app的主題、內容的主標題及副標題。

# exoplanet_data_intro.py
import streamlit as st

st.title('太陽系外行星資料簡介')
st.header('什麼是太陽系外行星?')
st.header('可以從哪裡取得太陽系外行星的資料？')
st.subheader('NASA系外行星資料庫')

接著，他用能呈現底色為淺藍色的文字區塊元件st.info，來簡介太陽系外行星及NASA系外行星資料庫。因為可在該元件中使用markdown語法，所以他也加了相關連結。另外，他也留意到，之後若要單純以markdown語法撰文，可以用st.markdown。

# exoplanet_data_intro.py
import streamlit as st

st.title('太陽系外行星資料簡介')

st.header('什麼是太陽系外行星?')
st.info('水星、金星、地球、火星、木星、土星、天王星、海王星都是繞行太陽這個恆星的行星，而位於太陽系之外、不繞行太陽轉的行星，稱為[太陽系外行星](https://zh.wikipedia.org/zh-tw/%E5%A4%AA%E9%99%BD%E7%B3%BB%E5%A4%96%E8%A1%8C%E6%98%9F)，也常簡稱為系外行星。')

st.header('可以從哪裡取得太陽系外行星的資料？')
st.subheader('NASA系外行星資料庫')
st.info('[NASA系外行星資料庫](https://exoplanetarchive.ipac.caltech.edu/)網站提供多個與系外行星相關的資料表，讓人查詢系外行星名稱、所繞行的恆星名稱、發現年份、發現方法、繞行恆星一圈的軌道週期、距離地球多遠、質量大小…等資訊。此[頁面](https://exoplanetarchive.ipac.caltech.edu/docs/TAP/usingTAP.html)能查閱各資料表欄位所代表的意義。')

進一步地，黑蛋以st.image加上圖片解說，並且用st.file_uploader及st.dataframe製作前幾天夢到、呈現使用者上傳的CSV檔內容的功能。為了不讓頁面太過雜亂，他還用了st.expander來收合展開資訊。

# exoplanet_data_intro.py
import streamlit as st
import pandas as pd

with st.expander('圖片解說'):
	st.image(
		'https://media.heptabase.com/v1/images/e336080b-183d-4940-892f-a27e91a48b9b/d1a626a7-f228-41aa-9a87-767301f596b0/NASAExoplanetArchive.png',
		caption='NASA系外行星資料庫網站首頁。點擊左上角的「Confirmed Planets」可以查看「Planetary Systems」資料表，而「Planetary Systems Composite Data」資料表可從右下角進入。'
	)
	st.image(
		'https://media.heptabase.com/v1/images/e336080b-183d-4940-892f-a27e91a48b9b/8da2f51f-ddae-4b0a-845f-b3d667fc9e3f/ConfirmedPlanetsTable.png',
		caption='「Planetary Systems」資料表，不同研究團隊針對同一個行星所作的研究結果會在這張表分別列出。'
	)
	st.image(
		'https://media.heptabase.com/v1/images/e336080b-183d-4940-892f-a27e91a48b9b/51772e03-2a3e-48bb-9a40-0cc24a00bf21/PlanetarySystemsCompositeDataTable.png',
	caption='「Planetary Systems Composite Data」資料表，能一行綜觀同個行星的所有欄位值。點擊左上方的「Download Table」可將資料表以CSV格式匯出。'
	)

with st.expander('上傳從NASA系外行星資料庫所匯出的CSV檔，以呈現資料表'):
	uploaded_csv = st.file_uploader('選擇要上傳的CSV檔')
	if uploaded_csv is not None:
		exoplanet_table = pd.read_csv(uploaded_csv)
		st.text('系外行星資料表')
		st.dataframe(exoplanet_table)

最後，他用st.set_page_config設定app在瀏覽器頁籤所呈現的標題及favicon，並將原本預設置中的內容改成滿版後，用Streamlit製作的「簡報」就完成啦，整個Python script及「簡報」內容如下：

# exoplanet_data_intro.py
import streamlit as st
import pandas as pd


page_title = '太陽系外行星資料簡介'
st.set_page_config(page_title=page_title, page_icon=':star', layout='wide')
st.title(page_title)

st.header('什麼是太陽系外行星?')
st.info('水星、金星、地球、火星、木星、土星、天王星、海王星都是繞行太陽這個恆星的行星，而位於太陽系之外、不繞行太陽轉的行星，稱為[太陽系外行星](https://zh.wikipedia.org/zh-tw/%E5%A4%AA%E9%99%BD%E7%B3%BB%E5%A4%96%E8%A1%8C%E6%98%9F)，也常簡稱為系外行星。')

st.header('可以從哪裡取得太陽系外行星的資料？')
st.subheader('NASA系外行星資料庫')
st.info('[NASA系外行星資料庫](https://exoplanetarchive.ipac.caltech.edu/)網站提供多個與系外行星相關的資料表，讓人查詢系外行星名稱、所繞行的恆星名稱、發現年份、發現方法、繞行恆星一圈的軌道週期、距離地球多遠、質量大小…等資訊。此[頁面](https://exoplanetarchive.ipac.caltech.edu/docs/TAP/usingTAP.html)能查閱各資料表欄位所代表的意義。')
with st.expander('圖片解說'):
	st.image(
		'https://media.heptabase.com/v1/images/e336080b-183d-4940-892f-a27e91a48b9b/d1a626a7-f228-41aa-9a87-767301f596b0/NASAExoplanetArchive.png',
		caption='NASA系外行星資料庫網站首頁。點擊左上角的「Confirmed Planets」可以查看「Planetary Systems」資料表，而「Planetary Systems Composite Data」資料表可從右下角進入。'
	)
	st.image(
		'https://media.heptabase.com/v1/images/e336080b-183d-4940-892f-a27e91a48b9b/8da2f51f-ddae-4b0a-845f-b3d667fc9e3f/ConfirmedPlanetsTable.png',
		caption='「Planetary Systems」資料表，不同研究團隊針對同一個行星所作的研究結果會在這張表分別列出。'
	)
	st.image(
		'https://media.heptabase.com/v1/images/e336080b-183d-4940-892f-a27e91a48b9b/51772e03-2a3e-48bb-9a40-0cc24a00bf21/PlanetarySystemsCompositeDataTable.png',
	caption='「Planetary Systems Composite Data」資料表，能一行綜觀同個行星的所有欄位值。點擊左上方的「Download Table」可將資料表以CSV格式匯出。'
	)

with st.expander('上傳從NASA系外行星資料庫所匯出的CSV檔，以呈現資料表'):
	uploaded_csv = st.file_uploader('選擇要上傳的CSV檔')
	if uploaded_csv is not None:
		exoplanet_table = pd.read_csv(uploaded_csv)
		st.text('系外行星資料表')
		st.dataframe(exoplanet_table)

對了，黑蛋還發現一個小撇步，在Streamlit app右上角按「Always rerun」後，就不用每次修改程式時都還要重整頁面囉。

此系列文由蘇羿豪撰寫，以「創用CC 姓名標示 4.0(CC BY 4.0)國際版授權條款」釋出。此系列文也同步在Matters及Mirror平台連載。