作者 | AJ Gordon

責(zé)編 | Carol

頭圖 | CSDN? 付費(fèi)下載于視覺中國

出品 | CSDN云計(jì)算（ID：CSDNcloud）

本文主要介紹如何利用Python的Streamlit庫和Heroku云平臺(tái)來做一個(gè)交互式數(shù)據(jù)分析Web應(yīng)用。開發(fā)環(huán)境如下：

• Windows10系統(tǒng)

• Anaconda3（python3.7.4）

• Git（2.26.0.windows.1）

• Heroku賬號(hào)

• 梯子（Heroku需翻墻才可訪問）

Streamlit

根據(jù)Streamlit官方文檔介紹，它是一個(gè)開放源代碼的Python庫，可以輕松地為機(jī)器學(xué)習(xí)和數(shù)據(jù)科學(xué)構(gòu)建漂亮的自定義web應(yīng)用程序。也就是說，即使你對web開發(fā)并不熟悉，但只要利用它，就可以很容易搭建出一個(gè)Web。

通過“pip install streamlit”進(jìn)行安裝，再執(zhí)行“streamlit hello”。若安裝成功，默認(rèn)瀏覽器會(huì)自動(dòng)打開或輸入“l(fā)ocalhost:8501”，會(huì)彈出如下圖界面。

圖1?安裝成功界面

Streamlit用于數(shù)據(jù)可視化的話，主要模塊有：Cache，Interactive widgets，Charts。

1)?Cache

Streamlit遵循由上至下的運(yùn)行順序，所以每次代碼中有進(jìn)行任何更改，都會(huì)重新開始運(yùn)行一遍，會(huì)十分耗時(shí)。@st.cache會(huì)對封裝起來的函數(shù)進(jìn)行緩存，避免二次加載。如果函數(shù)中的代碼發(fā)生變動(dòng)，cache會(huì)重新加載一遍并緩存起來。假如將代碼還原到上一次版本，由于先前的數(shù)據(jù)已經(jīng)緩存起來了，所以不會(huì)進(jìn)行二次加載。

import?streamlit?as?st import?timest.write("Loading....") start_time?=?time.clock() @st.cache() def?expensive_computation(a,?b):time.sleep(5)return?a?**?ba?=?2 b?=?21 res?=?expensive_computation(a,?b)st.write("Result:",?res) end_time?=?time.clock() st.write("耗時(shí)：%0.1f 秒"?%?(end_time-start_time))

圖2 Cache

2)?Interactive widgets

Streamlit提供多種組件，如滑塊，選擇框和按鈕等交互組件。利用組件可以靈活地展示數(shù)據(jù)，這一點(diǎn)類似很多BI工具提供的功能。

import?streamlit?as?st import?pandas?as?pd import?time#?按鈕 st.subheader("按鈕") if?st.button('Say?hello'):st.write('Why?hello?there') #?復(fù)選框 st.subheader("復(fù)選框") agree?=?st.checkbox('I?agree') if?agree:st.write('Great!') #?單選框 st.subheader("單選框") genre?=?st.radio("What's?your?favorite?movie?genre",('Comedy',?'Drama',?'Documentary')) if?genre?==?'Comedy':st.write('You?selected?comedy.') else:st.write("You?didn't?select?comedy.") #?選擇框 st.subheader("選擇框") option?=?st.selectbox('How?would?you?like?to?be?contacted?',('Email',?'Home?phone',?'Mobile?phone')) st.write('You?selected:',?option) #?多選框 st.subheader("多選框") options?=?st.multiselect('What?are?your?favorite?colors', ('Green',?'Yellow',?'Red',?'Blue'),'Yellow') st.write('You?selected:',?options) #?滑塊 st.subheader("滑塊") age?=?st.slider('How?old?are?you?',?0,?130,?25) st.write("I'm?",?age,?'years?old') #?數(shù)值輸入框 st.subheader("數(shù)值輸入框") number?=?st.number_input('Insert?a?number') st.write('The?current?number?is?',?number) #?加載數(shù)據(jù) uploaded_file?=?st.file_uploader("Choose?a?CSV?file",?type="csv") if?uploaded_file?is?not?None:data?=?pd.read_csv(uploaded_file)st.write(data) #?進(jìn)度條 my_bar?=?st.progress(0) for?percent_complete?in?range(100):time.sleep(0.1)my_bar.progress(percent_complete?+?1)

圖3 Interactive widgets?

3)?Charts

Streamlit圖庫底層基于Matplotlib庫搭建，一些常見的圖表如折線圖，條形圖，關(guān)系圖等，都可以直接傳遞數(shù)據(jù)生成圖表。此外還增加了deck.gl，可以用于繪制3D地圖。

import?streamlit?as?st import?pandas?as?pd import?numpy?as?np #?折線圖 st.subheader("折線圖") chart_data?=?pd.DataFrame(np.random.randn(20,?3),columns=['a',?'b',?'c'])st.line_chart(chart_data) #?面積圖 st.subheader("面積圖") chart_data?=?pd.DataFrame(np.random.randn(20,?3),columns=['a',?'b',?'c'])st.area_chart(chart_data) #?條形圖 st.subheader("條形圖") chart_data?=?pd.DataFrame(np.random.randn(50,?3),columns=["a",?"b",?"c"])st.bar_chart(chart_data) #?3D圖 st.subheader("3D圖") df?=?pd.DataFrame(np.random.randn(1000,?2)?/?[50,?50]?+?[37.76,?-122.4],columns=['lat',?'lon'])st.deck_gl_chart(viewport={'latitude':?37.76,'longitude':?-122.4,'zoom':?11,'pitch':?50,},layers=[{'type':?'HexagonLayer','data':?df,'radius':?200,'elevationScale':?4,'elevationRange':?[0,?1000],'pickable':?True,'extruded':?True,},?{'type':?'ScatterplotLayer','data':?df,}]) #?關(guān)系圖 st.subheader("關(guān)系圖") st.graphviz_chart('''digraph?{run?->?intrintr?->?runblrunbl?->?runrun?->?kernelkernel?->?zombiekernel?->?sleepkernel?->?runmemsleep?->?swapswap?->?runswaprunswap?->?newrunswap?->?runmemnew?->?runmemsleep?->?runmem} ''') #?地圖 st.subheader("地圖") df?=?pd.DataFrame(np.random.randn(1000,?2)?/?[50,?50]?+?[37.76,?-122.4],columns=['lat',?'lon'])st.map(df)

圖4 Charts?

Heroku

Heroku是一個(gè)支持多種編程語言的云平臺(tái)，如Java，Node.js和Python等等。注冊賬號(hào)需要翻墻，并且需使用gmail郵箱注冊。用戶每月可享受1000小時(shí)免費(fèi)時(shí)長，以及512M內(nèi)存，若應(yīng)用超過30分鐘沒訪問會(huì)自動(dòng)休眠，重新訪問即可喚醒。然后，需要下載Heroku CLI命令行工具，下載以后可以使用命令行直接部署。

圖5 Heroku支持的語言

圖6?Heroku CLI下載頁面

?

應(yīng)用部署實(shí)例

首先，新建一個(gè)文件“Streamlit_Demo.py”。

import?streamlit?as?st import?pandas?as?pd import?numpy?as?npst.title('Uber?pickups?in?NYC')DATE_COLUMN?=?'date/time' DATA_URL?=?('https://s3-us-west-2.amazonaws.com/''streamlit-demo-data/uber-raw-data-sep14.csv.gz')@st.cache def?load_data(nrows):data?=?pd.read_csv(DATA_URL,?nrows=nrows)lowercase?=?lambda?x:?str(x).lower()data.rename(lowercase,?axis='columns',?inplace=True)data[DATE_COLUMN]?=?pd.to_datetime(data[DATE_COLUMN])return?datadata_load_state?=?st.text('Loading?data...') data?=?load_data(100) data_load_state.text("Done!?(using?st.cache)")if?st.checkbox('Show?raw?data'):st.subheader('Raw?data')st.write(data)st.subheader('Number?of?pickups?by?hour') hist_values?=?np.histogram(data[DATE_COLUMN].dt.hour,?bins=24,?range=(0,24))[0] st.bar_chart(hist_values)hour_to_filter?=?st.slider('hour',?0,?23,?17) filtered_data?=?data[data[DATE_COLUMN].dt.hour?==?hour_to_filter]st.subheader('Map?of?all?pickups?at?%s:00'?%?hour_to_filter) st.map(filtered_data)

然后，再新建三個(gè)文件：Procfile，requirements.txt，setup.sh。這三個(gè)文件是部署Streamlit必備的，缺一不可。

1)?Procfile

#代碼的執(zhí)行語句web:?sh?setup.sh?&&?streamlit?run?Streamlit_Demo.py

2)?requirements.txt

#?代碼所需的庫及其版本streamlit==0.56.0pandas==0.25.1numpy==1.16.5

3)?setup.sh

#?配置mkdir?-p?~/.streamlit/echo?"\[server]\n\headless?=?true\n\port?=?$PORT\n\enableCORS?=?false\n\\n\"?>?~/.streamlit/config.toml

最后，配置文件和代碼準(zhǔn)備好后，可以保存在本機(jī)demo路徑下。再按照以下步驟進(jìn)行部署：

1)?進(jìn)入項(xiàng)目路徑，先登錄heroku，輸入“heroku login”后按下空格鍵，默認(rèn)瀏覽器會(huì)自動(dòng)打開，輸入heroku賬號(hào)和密碼后關(guān)閉即可。

cd?demoheroku?login

2)?創(chuàng)建一個(gè)新應(yīng)用，輸入”heroku create xx”，heroku規(guī)定應(yīng)用名稱開頭結(jié)尾只能是小寫字母，并且全名只能包含小寫字母，數(shù)字和破折號(hào)。也可以只輸入”heroku create”，會(huì)自動(dòng)命名一個(gè)應(yīng)用。

heroku?create?streamlit-demo-01#?或者#?heroku?create

3)?初始化git代碼庫，并遠(yuǎn)程操控heroku。

git?initheroku?git:remote?–a?streamlit-demo-01git?add?.git?commit?-m?"Initialize?Project"#?若git出現(xiàn)"git?Please?tell?me?who?you?are."，運(yùn)行以下兩條命令，再重新執(zhí)行commit:#?git?config?user.name?"heroku用戶名"#?git?config?user.email?"heroku注冊郵箱"

4)?上傳代碼到heroku代碼庫。

git?push?heroku?master

5)?執(zhí)行”heroku open”打開部署好的應(yīng)用，若打開后出現(xiàn)”?Application error”，需要自行排查是否缺失文件或文件內(nèi)容有誤，筆者一開始因?yàn)槿鄙佟眘etup.sh”文件導(dǎo)致部署失敗。另外，筆者直接從github clone后也會(huì)報(bào)錯(cuò)，所以是在本機(jī)新建文件和文件夾的，項(xiàng)目有上傳至“

https://github.com/guoxulong/streamlit_demo

heroku?open

6)?部署完成后，輸入“https://streamlit-demo-01.herokuapp.com/”（需翻墻）就能夠訪問這個(gè)Web。?

圖7 部署完成界面

總結(jié)

總體上來講，相比較用Django框架開發(fā)Web，Streamlit開發(fā)一個(gè)交互式應(yīng)用會(huì)更輕松，雖然功能還不完善，但對于數(shù)據(jù)分析可視化來說已經(jīng)滿足了，而且只需要掌握Streamlit庫的用法就可以實(shí)現(xiàn)。

作者簡介：

AJ Gordon，對爬蟲/機(jī)器學(xué)習(xí)/數(shù)據(jù)建模/可視化均有所涉獵的數(shù)據(jù)分析師

【END】

推薦閱讀

• 一文帶你從頭認(rèn)識(shí)什么是「緩存」！
  

• 在 520 這天，竟然有人把 Docker講清楚了？ | 原力計(jì)劃

• 如何使用 SQL Server FILESTREAM 存儲(chǔ)非結(jié)構(gòu)化數(shù)據(jù)？這篇文章告訴你！

• 平安科技王健宗：所有 AI 前沿技術(shù)，都可以在聯(lián)邦學(xué)習(xí)中大展身手！

• 踢翻這碗狗糧：程序員花 7 個(gè)月敲出 eBay，只因女票喜歡糖果盒！

• 又一年5.20，用Python助力程序員脫單大攻略（視頻版）

• 斗地主嗎？能學(xué)區(qū)塊鏈那種！ | 原力計(jì)劃

真香，朕在看了！

總結(jié)

以上是生活随笔為你收集整理的实操来了！一文告诉你如何用 Streamlit 和 Heroku 开发 Web的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。