教程 6 - 將其放在網路上！

除了支援行動平台外，Toga 還支援網頁！使用與部署桌面和行動應用程式相同的 API，您可以將應用程式部署為單頁 Web 應用程式。

概念驗證

Toga Web 後端是所有 Toga 後端中最不成熟的。它已經足夠成熟，可以展示一些功能，但它可能有缺陷，並且會缺少其他平台上可用的許多小部件。此時，Web 部署應被視為 概念驗證 - 足以演示可以做什麼，但不足以依賴認真的開發。

如果您對本教學的這一步有疑問，可以跳到下一頁。

部署為 Web 應用程式

部署為單頁 Web 應用程式的過程遵循相同的熟悉模式 - 建立應用程序，然後建立應用程序，然後運行它。然而，Briefcase 有點聰明，如果您嘗試運行應用程序，並且 Briefcase 確定該應用程式尚未針對目標平台創建或構建，它將為您執行創建和構建步驟。由於這是我們第一次運行該應用程式的網絡，我們可以使用一個命令執行所有三個步驟：

(beeware-venv) $ briefcase run web

[helloworld] Generating application template...
Using app template: https://github.com/beeware/briefcase-web-static-template.git, branch v0.3.18
...

[helloworld] Installing support package...
No support package required.

[helloworld] Installing application code...
Installing src/helloworld... done

[helloworld] Installing requirements...
Writing requirements file... done

[helloworld] Installing application resources...
...

[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done

[helloworld] Created build/helloworld/web/static

[helloworld] Building web project...
...

[helloworld] Built build/helloworld/web/static/www/index.html

[helloworld] Starting web server...
Web server open on http://127.0.0.1:8080

[helloworld] Web server log output (type CTRL-C to stop log)...
===========================================================================

這將開啟一個網頁瀏覽器，指向 http://127.0.0.1:8080 ：

Hello World 教學 6 對話框，在瀏覽器中

如果您輸入您的姓名並按一下該按鈕，將會出現一個對話方塊。

這個怎麼用？

此 Web 應用程式是一個靜態網站 - 單一 HTML 來源頁面，帶有一些 CSS 和其他資源。 Briefcase 已啟動本機 Web 伺服器來提供此頁面，以便您的瀏覽器可以查看該頁面。如果您想將此網頁投入生產，您可以將 www 資料夾的內容複製到任何可以提供靜態內容的 Web 伺服器上。

但是當你按下按鈕時，你正在運行 Python 程式碼……這是如何運作的？ Toga 使用 PyScript 在瀏覽器中提供 Python 解譯器。 Briefcase 將應用程式的程式碼打包為 PyScript 可以在瀏覽器中載入的輪子。載入頁面後，應用程式程式碼在瀏覽器中運行，使用瀏覽器 DOM 建立 UI。當您按一下某個按鈕時，該按鈕會在瀏覽器中執行事件處理程式碼。

下一步

雖然我們現在已經在桌面、行動和網路上部署了這個應用程序，但該應用程式相當簡單，並且不涉及任何第三方程式庫。我們可以在我們的應用程式中包含 Python 套件索引 (PyPI) 中的函式庫嗎？前往 教學 7 找出…