# 法蘭克的探索筆記 > 法蘭克的探索筆記 - 探索軟體世界，紀錄開發點滴 --- ## 頁面 - [作品集](https://blog.frankchen.tw/portfolio/): 作品集 - 法蘭克的探索筆記 --- ## 文章 - [【 Flutter 學習筆記 】 MaterialApp vs CupertinoApp](https://blog.frankchen.tw/flutter-study-materialapp-vs-cupertinoapp/): MaterialApp 和 CupertinoApp 是 Flutter 的根 Widget，分別遵循 Google Material Design 和 Apple iOS Human Interface Guidelines。兩者各自定義了應用程式的外觀、行為和導航，並提供應用級服務。核心區別在於他們設計系統的遵循性。 - [【 n8n 管理工具 App 】掌上 n8n：隨時隨地掌控您的自動化工作流程！](https://blog.frankchen.tw/n8n-management-tools-app-n8n-automation-of-local-control-at-times/): n8n 管理工具 App 將於 Google Play 上線，旨在讓用戶隨時隨地監控和管理 n8n 自動化 工作流程 ；具備安全連線、儀表板概覽和工作流程管理等功能，此 App 邀請用戶參加封閉測試並提供意見以改進產品。未來將增加更多功能。 - [【 Flutter 學習筆記 】 StatefulWidget vs StatelessWidget](https://blog.frankchen.tw/flutter-study-writing-statefulwidget-vs-statelesswidget/): 【 Flutter 學習筆記 】 StatefulWidget vs StatelessWidget 法蘭克的探索筆記 Flutter - [Node.js 專案容器化 (Docker)](https://blog.frankchen.tw/node-js-project-containerization-docker/): Node.js 專案容器化 (Docker) 法蘭克的探索筆記 Docker - [本地端執行 Vercel 生成的 Web 應用程式](https://blog.frankchen.tw/run-the-web-application-generated-by-vercel-locally/): 本地端執行 Vercel 生成的 Web 應用程式 法蘭克的探索筆記 Node.js - [Flutter: 透過 Firebase Authentication 使用 Google 帳號登入](https://blog.frankchen.tw/flutter-uses-google-account-login-via-firebase-authentication/): Flutter: 透過 Firebase Authentication 使用 Google 帳號登入 法蘭克的探索筆記 Flutter - [如何使用 Certbot 建立免費的 SSL 網域憑證](https://blog.frankchen.tw/create-free-ssl-domain-certificates-using-certbot/): 現今網路傳輸服務普遍要求使用 HTTPS，以確保安全性。然而，SSL 憑證 每年需支付維護費用，對個人使用者來說負擔較重。本文將引導讀者如何在 Ubuntu 上搭配 Nginx 使用 Certbot 申請 免費 SSL 憑證 及設置自動續期。 --- # # Detailed Content ## 頁面 > 作品集 - 法蘭克的探索筆記 - Published: 2025-05-27 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/portfolio/ International Symposium on Engineering and Technology 2020 官方網站 作品連結：https://frankchen. tw/portfolio/ISET2020/ International Symposium on Engineering and Technology 2021 官方網站 作品連結：https://frankchen. tw/portfolio/ISET2021/ International Symposium on P... --- --- ## 文章 > MaterialApp 和 CupertinoApp 是 Flutter 的根 Widget，分別遵循 Google Material Design 和 Apple iOS Human Interface Guidelines。兩者各自定義了應用程式的外觀、行為和導航，並提供應用級服務。核心區別在於他們設計系統的遵循性。 - Published: 2025-06-23 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/flutter-study-materialapp-vs-cupertinoapp/ - 分類: Flutter - 標籤: flutter MaterialApp 和 CupertinoApp 是 Flutter 的根 Widget，分別遵循 Google Material Design 和 Apple iOS Human Interface Guidelines。兩者各自定義了應用程式的外觀、行為和導航，並提供應用級服務。核心區別在於他們設計系統的遵循性。 MaterialApp 定義 CupertinoApp Flutter 應用程式的根部Widget，他提供一整套 Google Material Design 設計規範的基礎架構和行為。可以把它想像成一個「Material Design 應用程式的預建框架和說明書」。 核心作用 定義應用程式整體外觀和行為：包含了應用程式的基礎主題、導航機制和許多開箱即用的功能。 整合 Material Design 元件：它是使用所有 Material 前綴的 Widget (如：Scaffold, AppBa... --- > n8n 管理工具 App 將於 Google Play 上線，旨在讓用戶隨時隨地監控和管理 n8n 自動化 工作流程 ；具備安全連線、儀表板概覽和工作流程管理等功能，此 App 邀請用戶參加封閉測試並提供意見以改進產品。未來將增加更多功能。 - Published: 2025-06-20 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/n8n-management-tools-app-n8n-automation-of-local-control-at-times/ - 分類: n8n - 標籤: automation, n8n, 工作流程, 自動化 n8n 管理工具 App 將於 Google Play 上線，旨在讓用戶隨時隨地監控和管理 n8n 工作流程。具備安全連線、儀表板概覽和工作流程管理等功能，此 App 邀請用戶參加封閉測試並提供意見以改進產品。未來將增加更多功能。 前言：告別電腦束縛，自動化盡在掌握！ 身處數位時代，n8n 自動化工作流程已成為許多企業和個人提升效率的利器。然而，您是否曾因為不在電腦前，因沒有管理工具App，而錯過即時監控工作流程或處理緊急狀況的時機呢？ 好消息來了！法蘭克（也就是我本人！）開發的「n8n 管理工具」App，即將在 Google Play 上線！這款 App 旨在打破空間限制，讓您隨時隨地、輕鬆直覺地監控與管理您的 n8n 工作流程和執行紀錄。 為什麼您需要「n8n 管理工具」App？ 這款 App 不僅僅是一個簡單的監控工... --- > 【 Flutter 學習筆記 】 StatefulWidget vs StatelessWidget 法蘭克的探索筆記 Flutter - Published: 2025-06-19 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/flutter-study-writing-statefulwidget-vs-statelesswidget/ - 分類: Flutter - 標籤: flutter 簡單來說，在 Flutter 中，StatefulWidget 是動態的頁面，StatelessWidget 就如同字面上的的意思，是個靜態的頁面。 StatefulWidget 定義 一個需要管理內部狀態的 Widget，表示內部的某個屬性需要在生命週期內根據使用者的響應做改變。 使用時機 內部需要動態變化：Widget 顯示的內容或屬性需要根據應用程式內部運行狀態或使用者想要改變。 需要使用者響應變化：Widget 需要響應用戶得點擊、拖動、輸入等操作更新UI。 需要管理內部數據：Widge... --- > Node.js 專案容器化 (Docker) 法蘭克的探索筆記 Docker - Published: 2025-06-15 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/node-js-project-containerization-docker/ - 分類: Docker - 標籤: docker, nodejs 前言 Node. js 可以直接在本機執行，但若是要在其他系統上執行，那邊的環境就需要再重新安裝。容器化後的好處就是可以直接執行，只要該系統上有 Docker，就能輕鬆部署。 本篇將教你怎麼將 Node. js 容器化，以 Ubuntu 系統為例。 系統配置 Ubuntu: 22. 04 LTS Docker: 28. 2. 2 什麼是 Docker Docker 是一個開源平台，用於自動化應用程式的部署、擴展和管理。它使用容器的概念，將應用程式及其所有依賴項（程式碼、運行時、系統工具、函式庫等... --- > 本地端執行 Vercel 生成的 Web 應用程式 法蘭克的探索筆記 Node.js - Published: 2025-06-14 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/run-the-web-application-generated-by-vercel-locally/ - 分類: Node.js - 標籤: nodejs, Ubuntu, v0.dev, vercel 前言 現在有很多 AI 相關的應用如雨後春筍般出現，Vercel 旗下的 v0. dev 提供一個線上的環境供使用者可以透過自然語言設計自己的 Web 應用，且在建立完成後還可以一鍵發佈，縮減產品上線步驟。 接下來我將一步步帶你如何在自己的伺服器上執行 v0. dev 生成的 Web 應用程式，本篇教學以 Ubuntu 系統為主。 系統環境 Ubuntu: 22. 04 LTS Node. js: 22. 16 pnpm: 10. 12. 1 安裝套件 安裝 Node. js 建議使用 Node... --- > Flutter: 透過 Firebase Authentication 使用 Google 帳號登入 法蘭克的探索筆記 Flutter - Published: 2025-06-13 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/flutter-uses-google-account-login-via-firebase-authentication/ - 分類: Flutter - 標籤: firebase, flutter, google 前言 在學習 Flutter 串接 Firebase Authentication 服務，記錄一下操作過程。 原始碼：https://github. com/haunchen/google_signin_example 創建 Firebase 專案 前往 Firebase 透過 Google 登入後，創建一個專案。 專案名稱可以隨意取，好辨別的都可以，這邊以「flutter-firebase-test」為專案名稱。取好名稱後，勾選接受條款，即可點擊”繼續”。 近期剛好 Google 在 Goog... --- > 現今網路傳輸服務普遍要求使用 HTTPS，以確保安全性。然而，SSL 憑證 每年需支付維護費用，對個人使用者來說負擔較重。本文將引導讀者如何在 Ubuntu 上搭配 Nginx 使用 Certbot 申請 免費 SSL 憑證 及設置自動續期。 - Published: 2025-05-28 - Modified: 2025-06-22 - URL: https://blog.frankchen.tw/create-free-ssl-domain-certificates-using-certbot/ - 分類: SSL - 標籤: Certbot, Let's Encrypt, Nginx, SSL, Ubuntu 現今網路傳輸服務普遍要求使用 HTTPS，以確保安全性。然而，SSL 憑證 每年需支付維護費用，對個人使用者來說負擔較重。本文將引導讀者如何在 Ubuntu 上搭配 Nginx 使用 Certbot 申請免費 SSL 憑證及設置自動續期。 前言 現今因安全性問題大多的網路傳輸服務都會要求以 https 方式傳送 (ex: Line Bot Webhook、Google Cloud Redirect URL)，但去申請一個 SSL 憑證 每年需要繳維護費，對於個人使用者來說，這筆維護費可能就吃不消了。 剛好近期把個人網站建置好了，順便記錄一下申請 SSL 憑證 的過程，接下來我將一步步引導你透過 Certbot 向 Let's Encrypt 申請 免費 SSL 憑證 。 這篇文章將以Ubuntu 搭配 Nginx 為例，教大家如何... --- ---