小狐狸事務所: 使用 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 方便手機照相連線 :

關於短網址服務參考 :

# 免費的短網址服務

3. 將 Web app 嵌入網頁中 :

上面建立的 App 可嵌入於網頁的 iframe 框架中, 在 "Publish this app" 發布視窗底下有現成的 Javascript 程式碼與網頁碼 :

這是在手機測試的結果, 還不錯.

參考 :

# https://anvil.works/learn/tutorials/hello-world

小狐狸事務所

2019年9月6日星期五

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

沒有留言:

張貼留言

2019年9月6日 星期五

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

沒有留言:

張貼留言

2019年9月6日星期五