[突發專案] 攻防定番？｜vocus 自製工具復活與試用 Flet 套件開發新介面
文前碎碎唸
正如所預測的，不久前方格子個人頁面大改版後，我在 [突發專案] 強化懶懶病良藥？｜自做方格子 iOS 小工具 - Flask、爬蟲，與 Widgy 這篇中，所製作的爬蟲後台也隨之炸裂，間接地也導致手機上的小工具就此失去了作用。
世界瞬間空白（？
雖然說這種你修我改的攻防遊戲，對於外掛類工具的製作者來說，應該是家常便飯的戲碼了，但看著這些不再顯示的數據，不免還是有些失落。
雖然我可以就此打住，默默的將這個小工具從桌面移除⋯
但好勝心，終究還是戰勝了理智，該是時候再次動工啦（？
後台修整
其實說起來，讓之前那套流程失效的主要原因，就是在這次改版中拔掉了所依賴的 RSS 資料來源，而導致爬蟲中斷。
RSS 選項不見了⋯
因此就要重新在頁面中，湊齊所需的七顆龍珠（？）才能夠救回整個流程。
不過，因為只是重新尋找對應元件，所以細部內容就不再多贅述。
因為今天的重點，是在新的介面改造上喔！
套件整形術
其實這次的整修紀錄，某部分也是因為近期找到 Flet 這個好用的套件。
Flet 官方文件
簡單來說，Flet 是一個以 Flutter （由 Google 開發的一種跨平台邏輯架構）為基礎的介面框架。
開發者可以透過它在專案中以熟悉的 Python 形式，寫出的好看，又能整合軟硬體能力的使用者介面。
另外，這個套件還提供便利的打包工具，可藉由 Flutter 本身具備的跨平台特性，將專案匯出成可執行於四大桌面系統的獨立軟體、Web應用，甚至是針對兩大手機系統的 APP 等⋯至少理論上是如此。
總之，這次計畫就是要透過這個套件，重製一下之前以 Tkintr 編寫的版本啦！
根本重頭來
首先，有寫過 Python 的人應該都明白，要使用套件的話，當然就是要先安裝啦，這裡直接透過 Pip 指令即可。
pip install flet不過要特別注意的是，由於這是個新的套件，更新頗為頻繁，許多功能都還在陸續完善中。
因此要確定安裝下來的盡量要是最新版本，以避免缺少官方說明文件中的功能。
完成安裝後，接者就來建立我們程式的第一個視窗吧，下面這段程式是節錄自官方文件中提供的基礎視窗架構。
import flet as ft
# Define main Page
def main(page: ft.Page):
# Create New Text Object and Set Color to Green
t = ft.Text(value="Hello, world!", color="green")
# Add Text Object "t" to main page
page.controls.append(t)
# Call Update Page
page.update()
# Run Main Page
ft.app(target=main)
依序說明的話，就是：
- 定義一個產生頁面的函式。
- 在函式內新增一個顏色為綠色的文字項目。
- 將這個文字項目新增到頁面上，然後呼叫重整頁面功能。
- 最後以 Flet 套件的 app 函式呼叫執行這個介面。
直接執行程式後，就會看到像這樣的視窗跳出來，恭喜你完成第一個 Python Flet APP 啦！
最基礎的視窗
而如果同時要塞多個元件到視窗中，像是搜尋列上的輸入框及送出鈕的話，同樣可以在視窗中新增多個控制元件後，再以 Row 結構做排列。
def main(page: ft.Page):
# Define a TextField Object
txtin = ft.TextField(
label="Input",
autofocus=True,
expand=True,
)
# Define a Button Object
sndbt = ft.ElevatedButton(
content=ft.Container(
content=ft.Column(
[
ft.Text(value="◈", size=50),
],
alignment=ft.MainAxisAlignment.CENTER,
spacing=5,
)
),
)
# Define Main Page With Row Structure
manpg = ft.Row(
[
txtin,
sndbt,
],
alignment=ft.MainAxisAlignment.CENTER,
expand=True,
)
# Add Row Structure to Main Page and Update
page.controls.append(manpg)
page.update()
ft.app(target=main)
執行後結果如下，看起來很簡單吧。
包含輸入框與按鈕的介面
其實在撰寫 Flet 視窗時，只要記得它是一層一層的容器結構及元件所組成的。
而元件本身除了它所包含的子元件（如上面範例中 Row 所包含的 TextField 及 Button）外，還可以附帶定義自身特性的參數。
這樣就可以比較容易的去理解，該如何以文字方式去編排腦中所想像的理想介面。
另外，在 Flet 的官方文件 中，也有提供許多不同的元件說明及範例，甚至還有一些小型專案可以參考。
比較完整的專案範例
內容可以說是十分詳細，初學者也能直接依照其中程式碼來自行修改。
新介面設計
接著先來回顧一下，之前一代改版前的介面模樣吧。
前一版計數器，現已失效
現在看來，確實是十分單調且陽春，再加上新的後台有新增除最後發布時間外的其他項目，因此就藉機重新設計一下編排方式吧！
至於目前爬蟲所能抓取到的資訊，則如下列清單所示：
- 距上次發文經過經過的時間
- 個人頁面追蹤人數（不含沙龍）
- 發表文章數（不含沙龍貼文）
再加上作為抓取依據的使用者 ID，總共會有四個項目需要塞進視窗中。
而經過多次修改測試後，最終決定的版本，就長得像下圖這樣。
包含的元件其實不多，主要就是將所要顯示的四項資訊，各自用 Container 包起來，再分別用 Column 及 Row 架構去排列相對位置。
如果簡單寫出程式的話，大概會像是這樣：
# Only Page Update Function
def updpg(usr,gath):
# Info From vocus
disp = {
"⟳":str(gath["last_pub"]),
"☻":str(gath["follower"]),
"✎":str(gath["article"])
}
# Buffer List for Container Row
ilst = []
# For Loop to Create Container for Each Item
for ico,val in disp.items():
ilst.append(
# Create Container
ft.Container(
content=ft.Text(value=ico+" "+val),
alignment=ft.alignment.center,
border_radius=ft.border_radius.all(5),
)
)
# Define Row Structure for Container List
infr = ft.Row(
ilst,
spacing=10,
alignment=ft.MainAxisAlignment.CENTER,
)
# Create Container for User ID
usrnm = ft.Container(
content=ft.Text(value=usr.upper()),
margin=5,
padding=10,
alignment=ft.alignment.center,
border_radius=5,
border=ft.border.all(3, elcol),
)
# Create Column Structure for Main Page
mpg = ft.Column(
# Add User ID Container and Info Row
[
usrnm,
infr,
],
spacing=10,
)
# Add Column Item to Page and Update
page.add(mpg)
page.update()
接著以這個範例做進一步修改調整後，就可以作出如下圖的結果了。
Flet 重新建構版本
看起來是不是比之前的陽春版精緻的多了呢（自己講 XD）。
另外附註一下，上述程式碼僅包含主要結構，已刪去部分定義外觀之次要參數，因此直接執行可能不會與展示結果相同。
發布收工⋯嗎？
完工之後，各位朋友應該會想說，接下來的步驟，應該就是跟上次一樣，打包發布成執行檔，讓大家下載使用了吧？
錯，並沒有！
其實原本我也是這麼想的，但就在照著官網的匯出教學，依序安裝所需的 VSCode、Flutter、Android Studio 等開發工具，並使用內建的打包指令之後⋯
接著就是 Debug 地獄的開始，各種奇怪的錯誤接踵而至，最後輸出的執行檔也無法順利啟動，雖然不確定到底是自己系統環境，還是套件本身的問題，但嘗試數次後，依然完全無法有所進展。
最後回去仔細閱讀官網的說明文件後，終於在近期的 Roadmap 公告中看到這樣的字句。
提到了會針對打包指令做進一步最佳化
果然，終究還是因為這個套件太年輕了，看來它的打包功能還尚未如想像中那麼完整，所以只能猜測是其中未知的錯誤所導致，畢竟也很少有其他相關資訊能夠參考。
依目前情況來看，除非自己就具備魔改套件的能力，不然也就只能等待開發團隊持續完善了。
結語
雖然這次的成品，在建立的過程中遭遇到不少的阻礙，但就成果來看，我個人認為 Flet 確實是個蠻值得等待的套件。
因為它解決了開發者過去需要切換多程式語言，如 Flutter 原生的 Dart 語言，或是各系統的底層語言，才能跨平台開發的痛點，僅用一套 Python 就能打天下。
雖然要實際匯出還是有一定但書，像是 Apple 生態系統的包裝，依然只能在 Mac 執行，以及行動裝置上運作的只能是純 Python 所撰寫的套件等。
但光憑開發者們能在不大量修改原始邏輯的情況下，快速部署至多平台上執行，並同時維持相似的介面體驗這點，就值得讓人一試了。
也希望這個套件能趕快成熟，讓跨平台開發流程更便利。
後續補充
就在撰寫及整理完今天這篇文章後，我又嘗試了官方文件中較舊的打包方式，終於成功輸出為 Windows 系統使用的 EXE 執行檔了！
而根據說明內容，舊的打包方式使用的，其實就是我在前一版時相同的 Pyinstaller 打包套件，果然有些時候，舊版的還是相對比較可靠（？）。
[最新打包工具]
- flet build {target_type}
- 可輸出為 Web、Windows、Mac、Andriod、iOS 等
- 使用 Flutter SDK，但執行時仍會有錯誤，或甚至無法進行
[舊版打包工具]
- flet pack {py_file.py}
- 僅能輸出為 Windows 或 Mac 應用
- 使用 Pyinstaller，目前測試可成功
總之，這裡就提供新的版本讓大家試玩看看啦，使用方法與前版大致相同，僅輸入改為使用者 ID 即可查詢。
Unzip Password- [ 點我下載 ] ->Mercteria@vocus
另外，除了同樣只有 Windows 版本外，還有一個已知問題就是整體檔案不知為何爆肥，可能是因為打包時系統沒有特別篩去不相關的套件內容吧，在意者請斟酌。
《全文。終了》
本篇參與的主題活動
你可能也想看
