小狐狸事務所: 使用 Anvil 平台佈署 Web 應用程式

2019年9月6日星期五

使用 Anvil 平台佈署 Web 應用程式

這幾天在研究 Python 前端解決方案時意外找到 Anvil 這個平台, 它是一個以 Python 為基礎的網頁應用平台 (Python only), 使用所視即所得 GUI 介面可以很快建立網頁 app 介面, 只要將 app 網址嵌入自己的專案網頁中即可.

Anvil 提供免費帳戶, 可建立無限制個數的輕流量雲端 App, 但 App 上會有 Anvil 的 Banner, 若要去除 Banner 或擁有完整 Python 功能可付費購買, 分級價目表如下 :

Individual 帳戶每個月要 49 美元有點貴, 若只是小專案或者測試用途, 免費帳戶應該就夠用了.

1. 註冊帳號 :

首先按 "Sign up for free" 進入註冊頁面 :

輸入 E-mail 與登入密碼, 勾選 "Agree to terms" 即可, 它會發出一封確認信到信箱, 按信中的確認連結後馬上就能使用了 :

2. 建立 App :

以所申請之帳號登入 Anvil 後, 按 "Create App" 鈕, 選擇預設之主題樣式 "Material Design" 即可, 點選後會進入 App 設計頁面 : :

此即為所視即所得設計頁面, 左邊是 App 專案設定框, 中間是網頁內容面板, 也就是放置網頁元素的地方, 右邊則是工具箱, 可從工具箱裡直接拖曳網頁元件到中間的版面上.

以建立一個 Say Hello 的 App 為例, 我們需要一個 Label 顯示 "請輸入名字", 一個文字欄位讓使用者輸入名字, 然後一個確定按鈕, 按下去會顯示 "Hello, xxxx".

中間的網頁內容面板上預設已經有一個表單 (Form), 最上方有一個 title 與 link, 分別用來放置 App 的標題與相關超連結 (例如官網網址等). 從右邊工具箱中拖曳一個 Label 元件到上方標題後, 將工具箱往下拉到 "Property" 區, 在 Text 欄位中輸入 "Hello 測試" 作為 App 標題 :

接著依序加入一個內容為 "請輸入名字" 的標籤 (Label), 一個文字欄位 (TexBox), 一個內容設定為 "說哈囉" 的按鈕 (Button), 以及另一個用來顯示結果的標籤 (內容不用設, 要由程式來設定) 如下 :

最後點選 "說哈囉" 按鈕後, 將右側工具箱拉到最後的 "EVENT" 區, 按 "Click" 點選 "self.button_1" 會從 "Design" 模式切到 "Code" 模式, 裡面已定義了一個 button_1_click() 空函數 (內容為 pass) :

將函數內容改為如下 :

def button_1_click(self, **event_args):
"""This method is called when the button is clicked"""
self.label_3.text = "Hello," + self.text_box_1.text

亦即標籤 3 (label_3) 的內容為 "Hello, " 串接文字欄位 (text_box_1) 中所輸入之名字. 這樣就完 App 設計了, 按最上面的 "Run" 鈕即可執行此 App :

按右上角的 "Publish this app" 會產生此 App 的網址以便讓用戶存取 :

按 "Copy" 複製此 App 連結 :

# https://PDEFCXQREVM7EQ65.anvil.app/MK74HFFBOVVWNFVNOSMUVDUM

由於產生的 App 網址不易記憶, 可用短網址服務來做對應 :

# https://lihi1.cc/FDfSI

lihi.io 服務有提供 QR Code 方便手機照相連線 :