Web 應用：深入瞭解

初級部課程 Web 應用：深入瞭解
  • 製作一個顯示圖像和播放聲音的 Web 應用程式
  • 瞭解如何使用 Jupyter Notebooks 在 Python 中製作數據圖
  • 使用 Streamlit 製作數據儀錶板 Web 應用程式

以下是本課的活動：

流光

使用 Streamlit 和 Python 製作 Web 應用程式很簡單。與基於塊的編碼平臺一樣，Streamlit 平臺包含許多元件和小部件，只需一行代碼即可將其添加到您的應用程式中。大部分代碼已經為您編寫和打包，因此您可以專注於應用程式的目標，而不是陷入大量困難的代碼中。 

為了練習使用 Streamlit，我們將從 Thunkable 和 App Inventor 中獲取一個行動應用程式範例，並展示如何使用 Streamlit 在 Web 應用程式表單中構建相同的應用程式。 

活動 1：SOUNDBOARD 應用程式

預計時間：30 分鐘

編寫 Streamlit Web 應用代碼

  1. 按下下面的按鈕以下載製作應用程式所需的資產（圖像和聲音檔）。
  2. 跟隨 一 使用這些影片來創建一個簡單的音板應用程序，按下按鈕時會播放聲音。
  3. 將第四個人添加到您的應用中。尋找要添加到應用程式的圖像和短聲音檔。以下是一些著名演講 的連結 。
下載資產檔

使用數據

Python 語言適用於數據。Python 有許多專門製作的庫，允許編碼人員讀取、操作和繪製數據。當與 Streamlit 平台結合使用時，編碼人員可以輕鬆製作為使用者分析和顯示數據的應用程式。此外，您還可以採取下一步措施，將數據集和機器學習模型整合到應用中。

數據圖表

大多數程式師和數據科學家在 Python 中處理數據都是使用稱為 Notebooks 的軟體。最受歡迎的 Notebook 介面之一是 Jupyter Notebook。根據 Kaggle 2022 年調查結果 ，Jupyter Notebooks 是最受歡迎的數據科學互動式開發環境 （IDE），被超過 80% 的受訪者使用。 

Jupyter Notebook 在瀏覽器中運行，儘管還有其他介面。例如，它可以直接集成到Visual StudioCode中。 

運行代碼的筆記本後面的引擎稱為 內核。對於 Python，您將使用 ipython 內核。 

筆記本允許您編寫文本以及 Python 代碼。文字是使用 Markdown 語言編寫的，使用簡單的命令來格式化文字。這是添加筆記本中包含的代碼的標題和說明的好方法。

您也可以直接在筆記本中執行 Python 代碼。 

Jupyter Notebook 代碼單元的螢幕截圖

類似於您可能在學校使用的物理筆記本，Jupyter Notebooks 是記筆記、使用數據項目組織您的想法以及探索資訊的好方法。執行代碼的附加功能允許您以受控和有組織的方式試驗 Python 代碼。 

Jupyter Notebooks 可説明您在跳轉到可視化代碼編輯器以構建實際應用之前規劃和測試 Web 應用的不同方面。

PYTHON 庫

您需要在代碼中使用許多庫來構建 Web 應用。 庫 是執行特定任務的預編寫代碼的集合。程式設計庫非常強大，這意味著您的應用程式只需幾行代碼就可以完成強大的操作。 

對於 Python，大多數庫都要求您首先在電腦上安裝它們，然後在 Python 腳本檔中導入所需的庫。 

使用數據所需的庫示例是 numpy 和 pandas。

Pandas 使您的應用程式可以輕鬆處理大量數據。它將數據放入稱為 DataFrame 的東西中，您的應用將與 DataFrame 一起工作。 Numpy 有許多函數用於對 DataFrame 中的數據執行數值運算。

此外，還有許多繪圖和繪圖庫，允許用戶可視化數據。Python 中最受歡迎的可視化庫是 matplotlib、 plotly 和 seaborn。 

以下活動將使用所有這些庫。該活動將從音樂和心理健康調查中獲取數據集，以創建一個數據儀錶板應用程式，該應用程式以不同的方式顯示數據，供使用者交互。

活動 2：數據儀錶板

預計時間：90 分鐘

構建 Streamlit Web 應用程式

根據您是在電腦上還是在雲端進行編碼，請遵循相應的影片集。
  • 在您的電腦上：
    1. 按照此視頻（第 1 部分）安裝並運行 Jupyter Notebook。點擊下面的鏈接下載筆記本檔。
    2. 按照此視頻（第 2 部分）使用 Streamlit 構建數據儀錶板應用程式。
  • 在雲端：
    1. 請依照此影片（第 1 部分）在 Github Codespaces 中執行 Jupyter Notebook。
    2. 按照此影片（第 2 部分）使用 Streamlit.io 建立資料儀表板應用程式。
輪到你了： 在您的資料儀表板中再新增一張圖表。您可以從原始 Jupyter Notebook 中的其他一些圖表中進行選擇，或者在 Jupyter Notebook 中製作新的繪圖/圖表，然後將程式碼整合到 Streamlit 以將其新增到儀表板中。
下載筆記本

反射

恭喜，您在 Streamlit 中製作了兩個 Web 應用程式！問問自己以下問題：

反射
您在安裝或運行 Jupyter Notebook 或 Streamlit 時是否遇到任何問題？
當你遇到問題時，你是如何克服問題的？
你如何在你的專案中運用這節課中的想法？

關鍵術語的審查

  • Jupyter Notebook – 流行的數據科學互動式開發環境，通過 Python 編碼處理數據
  • 內核 – 一個運行並充當 Jupyter Notebooks 背後的引擎的進程
  • Markdown 語言 – 一種允許您輕鬆格式化文本以使其更具可讀性的語言
  • 庫 – 執行特定任務的預編寫代碼的集合

其他資源

Jupyter 筆記本

 

流光

上一課
返回課程
下一課