- 瞭解 Web 應用以及它們與行動應用的區別
- 瞭解用於編碼和構建 Web 應用的不同選項
- 安裝必要的軟體以構建 Web 應用程式
以下是本課的活動：
WEB 應用程式
對於您的 Technovation 專案，您可以選擇構建行動應用程式或 Web 應用程式。
對於以前參加過Technovation並正在尋找新挑戰的參與者，或者對於具有編碼經驗的新參與者，您可以考慮為您的Technovation專案製作一個Web應用程式。
許多參與者會選擇使用我們推薦的應用程式構建器之一 App Inventor 或 Thunkable 構建行動應用程式。如果您不熟悉編碼，或者知道要使用App Inventor或Thunkable編寫應用程式，則可以跳過這節課！
製作 Web 應用程式涉及基於文本的編碼，並且比使用 App Inventor 或 Thunkable 進行基於塊的編碼更高級。
讓我們先回顧一下移動應用程式、Web 應用程式和漸進式 Web 應用程式之間的區別。
移動應用
- 在手機上本地運行的程式
- 在設備上下載並安裝
- 可以訪問手機的功能，例如 GPS 和相機
- 特定於平台（iOS 或 Android）
- 使用特定語言進行編碼以匹配操作系統
Web 應用程式
- 看起來很像移動應用程式
- 在 Internet 瀏覽器中運行
- 不是特定設備（iOS 或 Android）的原生設備
- 通常使用 HTML、CSS、Javascript 和 Python 進行編碼
- 離線時無法運行
漸進式 Web 應用程式
- 特殊類型的 Web 應用，即移動應用程式和 Web 應用程式之間的混合體
- 在瀏覽器中運行
- 也可以像常規行動應用程式一樣安裝在行動裝置上
- 即使使用者處於離線狀態，也可以運行
請注意，Web 應用不同於網站。網站是靜態的，使用 HTML 和 CSS 編碼。Web 應用是動態的和不斷變化的，基於使用者輸入和其他外部交互。 對於您的Technovation專案，網站是不可接受的。
我們將探討一些用於創建 Web 應用程式的初學者選項。
與我們為行動應用程式介紹的應用程式構建平臺的一大區別是，您將使用基於文字的程式設計語言而不是基於塊的語言創建 Web 應用程式。
有兩種主要語言用於創建 Web 應用程式。
JAVASCRIPT的
Javascript 或 JS 是一種腳本語言。這意味著代碼是在運行時執行的，而不是像移動應用程式那樣被編譯。這就像一個演員在每次演出時都在演出中貫穿她的劇本。
Javascript 通常與 HTML 和 CSS 結合使用來製作網站。HTML 和 CSS 用於製作靜態網站，這些網站可以呈現資訊但不會改變。Javascript 增加了交互性以及網站根據外部因素更改和更新的能力。一個動態的、互動式的網站本質上是一個網路應用程式。
蟒
Python 是一種非常流行的通用程式設計語言。Python 既是一種程式設計語言 ，也 是一種腳本語言，因此它可以被編譯運行，但也可以在運行時執行。
它被視為一種簡單、通用的語言，新編碼人員可以使用。它被用於軟體開發的許多不同方面。一個領域是 Web 開發。另一個是機器學習。因此，Python 是學習和開發更高級的 AI Web 應用程式的絕佳選擇。
在本課程中，我們將專注於使用 Python 製作 Web 應用程式。為了使用 Python 輕鬆構建 Web 應用程式，我們將使用一個名為 Streamlit 的框架。 Streamlit 允許您使用很少的代碼構建強大的互動式 Web 應用程式。 它專門研究涉及數據的應用程式，並允許您輕鬆使用 Python 機器學習庫將 AI 整合到您的應用程式中。
以下是一些主要功能。
- 對於擁有大量基於塊的編碼經驗並正在尋找新挑戰的人來說，這是個不錯的選擇
- 適合做過一些基於文本的編碼的人
- 非常通用的語言被廣泛使用
- 您需要在電腦上安裝軟體
- Python 和關聯的庫
- 代碼編輯器
- Streamlit 確實可以選擇使用 Github 在瀏覽器中運行
- 我們不會在此課程中介紹此選項
- 你可以用它來使用人工智慧
- 用於構建和使用機器學習模型的最常用語言
- 我們將在本課程中使用 Jupyter Notebooks 進行模型構建
開始
要為您的 Technovation 專案編寫 Web 應用程式，您將需要：
- 一台電腦或筆記型電腦
- 上網
您應該對在 Mac 或 Linux 上使用「終端」視窗以及在 Windows 上使用「終端」或命令提示符有所適應。如果您沒有經驗，甚至不知道終端窗口是什麼，請在繼續進行活動之前查看這些初學者視頻。
觀看適用於您的操作系統的視頻。
我們將介紹開發 Web 應用程式的兩種選項。您可以在電腦或筆記型電腦上進行編碼，也可以在雲端中對所有內容進行編碼。您可以選擇任一選項，但建議您選擇一個選項並在 Technovation 專案中堅持使用它。了解如何使用上面的終端指令對於任一選項都會派上用場。
以下是每種方法的一些優點和缺點。
在您的電腦上
優點：
- 文件保存在您的電腦上
- 學習使用Visual Studio Code，非常流行的IDE
- 您將學到很多關於使用終端機視窗、安裝軟體包等的知識
- 完全控制並選擇所使用的軟體
- 無需始終訪問互聯網即可進行編碼
缺點：
- 與您的團隊共享文件和程式碼並不容易
- 安裝軟體包可能非常令人沮喪，並且可能需要花費大量時間進行設置
- 如果電腦崩潰，可能會遺失文件
在雲端
優點：
- 文件儲存在雲端
- 無需在您的電腦上安裝任何東西
- 自動連結到 Github 以用於投資組合目的
- 易於團隊共享和編碼
缺點：
- 沒有本地使用軟體的經驗
- 對網路連線的依賴
根據您想要在電腦上本地編碼還是在雲端編碼，選擇活動 A 或活動 B。
活動 A：開始在電腦上使用 PYTHON
安裝軟體和代碼啟動器應用程式
- 步驟1： 安裝 Python。這是一套適用於 Window、Mac 或 Linux 的很好的 說明 。
- 步驟2： 安裝代碼編輯器和 Streamlit。此 視頻 演示如何安裝 Visual Studio Code ，然後安裝 Streamlit 以從代碼編輯器運行它。
- 步驟3： 按照此 視頻在 VS Code 環境中運行一個非常簡單的 Streamlit Web 應用。
- 通過截取您的第一個 Web 應用程式的螢幕截圖來慶祝，並將其連同註釋一起發送給您的導師！
活動 B：開始在雲端使用 PYTHON
關鍵術語的審查
- Web 應用程式 – 看起來像移動應用程式但在 Internet 瀏覽器中運行並使用 HTML、CSS 和 Javascript 或 Python 編碼的應用程式
反射
恭喜您嘗試了一些基於文本的編碼！這裡有一些反思問題供你與你的團隊和你的導師一起考慮。
其他資源
您需要參考文件和支援以獲取使用 Python 和 Streamlit 的説明。以下是一些不錯的起點。
- Python.org 初學者指南 中有一些很好的連結，可以學習更多的 Python。
- Streamlit 的應用庫
- Nileg Production 的完整 Streamlit 課程播放清單
