最近看到YouTube博主Simon Høiberg分享了如何利用無程式碼工具打造Web3 SaaS產品。Simon是位住瑞士的軟體工程師，也是一家SaaS公司的創辦人。
簡介
Simon介紹的產品是CryptoView（cryptoview.webflow.io），幫助管理加密貨幣投資組合。該產品整合了多種工具，包括Webflow、Memberstack、Stripe、Airtable和Zapier，達到數據同步的目的，一切均無需編程。
第一步-建立官網 (Webflow)
使用Webflow，一個無程式碼的網站建設工具，Simon輕鬆搭建了產品的官網。Webflow擁有豐富的模板，可以直观、快速地建設網站。
在Webflow中，用戶可以編輯內容、更換圖片，所有操作都是所見即所得。Simon在此基礎上進一步調整網站內容，使其更符合CryptoView的特點。
接著，Simon展示了如何使用Webflow創建用戶系統，包括註冊和登錄功能。
整個產品會包含官網展示頁、價格套餐介紹頁面、登錄系統和自定義用戶數據等部分，在前端部分用到的無程式碼工具是Webflow，訂閱和用戶系統會使用Memberstack、付費系統會用到Stripe，當然這裡還會用到資料庫Airtable來存儲用戶數據，最後用Zapier來連接這些無程式碼工具，做到數據的傳輸和同步。所有的這些開發都不需要寫一行程式碼（可能還是會有一點點哈哈）。整個無程式碼技術棧就如下圖所示：
在Webflow 註冊好賬號后，點擊「New Site」按鈕來創建一個新的 網站，在這裡你可以選擇從現有的模版創建或者是直接創建一個空白 網站。Webflow上有一個模版商城，裡面包含付費或者免費的模版，在影片里，Simon選擇購買了一個79美金的SaaS模版直接創建了網站。
完成創建后，你可以在編輯器介面雙擊任意文字框，來編輯裡面的內容，同時可以上傳並替換相關的頁面圖片，也可以更改頁面上各種組件和按鈕的樣式。一切都是通過拖拉拽的方式，不需要寫一行程式碼，而且所見即所得，幫助你快速完成一個官網展示頁的搭建。在這個步驟中，Simon更改了模版中的文字內容，同時刪除了不必要的欄目和導航，還把一些圖片通過Figma加上了跟加密貨幣相關的圖標，讓整個網站看起來更加符合產品的調性。
在完成官網展示頁面樣式的調整后，點擊右上角的「Publish」按鈕，稍等片刻，你就可以通過域名訪問你的網站了，整個過程非常簡單快速，你不需要擔心 伺服器的部署和運維問題，這也是無程式碼工具的魅力之一，在降低開發難度的同時，大大提升了開發效率。
在完成官網展示頁面后，下一步要做的就是創建「用戶系統」了，這個系統可以實現用戶的註冊登陸和訂閱付費功能。首先在Webflow中創建兩個新頁面——註冊頁和登陸頁。大多數Webflow的模版都自帶了「密碼功能頁」，所以你可以選擇複製這個模版頁布局到新的頁面中，然後修改它。在完成這兩個頁面創建后，記得要將官網右上角登陸和註冊按鈕的超連結修改為這兩個新頁面，同時把「價格展示頁」中的「Start」按鈕超連結修改為跳轉到註冊頁面。完成上述操作后，點擊右上角「Publish」按鈕，來發布並預覽一下，看看跳轉是否順利。
02.使用者系統建立 (MemberStack)
我們接下來需要使用Memberstack（www.memberstack.com）這個工具。它是一款專為Webflow開發者設計的工具，能在Webflow中進行使用者管理和付費整合。註冊並登入後，在「Select a site building tool」選項中選擇「Webflow」。之後輸入你的網站名稱，接著在「Do you need to accept payments?」中選「Yes I do」，並選擇「USD」作為收款幣種。
下一步是「Create a membership」。點選此按鈕後，你可以設定相關的「會員訂閱計畫」，如收費價格、是否提供試用期以及會員期限等。在此，需要特別設定「非付費用戶的訪問權限」。透過這個設定，你可以限制非付費使用者的網址權限，如果他們試圖訪問被限制的網址，會跳出付費提示視窗。
最後，我們要將Memberstack的設定與Webflow的網站連結。點選「Install header code」，複製頁面上的程式碼。然後返回Webflow，點選左上角的「Project Settings」，接著選擇「Custom Code」，並將程式碼貼上。值得注意的是，在Webflow中這項功能需要付費訂閱才能使用。
之後，我們需要返回Memberstack以建立註冊和登入表單，並將這兩個表單與Webflow的相對應頁面連結。點選「Forms & Fields」，在此頁面可以設定使用者註冊時所需填寫的資料，如電郵、密碼或手機號碼等。為了連結Memberstack和Webflow的使用者資訊，我們需要特別新增一個ID欄位，並設為隱藏。
下一步，將Memberstack的Email和Password欄位的Name和Value屬性複製到Webflow的Email和Password輸入框的「Custom attributes」內。同時也將註冊表單的Name和Value複製到Webflow對應的表單內。完成後，點選右上角的「Publish」，來查看是否能夠成功註冊並登入。經過測試，Simon在Memberstack看到了他所註冊的賬戶資訊。
最後，我們要將Memberstack的使用者資料與Webflow同步。首先，在Webflow進入「CMS Collection」來建立一個內容管理系統的集合。此處有兩個基本欄位：Name和Slug。Slug是URL尾部用於區分不同使用者頁面的參數。還需要增加兩個欄位，一個存放Email，另一個存放我們的加密貨幣資料，選擇「Plain Text」即可。完成後，點選右上角建立。完成CMS後，Webflow會自動生成一個使用者主頁，根據需求調整該頁面的文本內容和樣式。
至此，我們已完成所有為資訊同步所需的配置準備。下一步，我們將利用 Zapier 來打通整個系統。
03.數據連接及整合 (Zapier)
Zapier 是一款不需要程式設計知識的自動化工具，能夠整合並連接不同應用程序的 API，實現各應用間的數據同步和互動。
此處，我們會使用 Zapier 來達到下圖所示的數據連接功能。當用戶在註冊頁面上建立帳號後，系統會自動在 Memberstack 中生成用戶數據，然後透過 Zapier 設定觸發事件，在 Webflow 的 CMS 中也創建同樣的用戶數據，並將「Webflow Member ID」同步到 Memberstack 中。
接下來，我們進入設定階段。在 Zapier 的官方網站 (www.zapier.com) 建立帳號後，點選左上角的「Create Zap」，在「App Event」中搜尋 Memberstack，並在「Trigger Event」選「New Member」。回到 Memberstack，選擇左側選單中的「Power-ups」，再點選「Integrations」中的 Zapier，並將「API Key」複製後粘貼到 Zapier。點擊繼續後，在動作設定中搜尋並選擇 Webflow，再選「Action Event」中的「Create Live Item」。接著 Zapier 會彈出窗口，讓你輸入 Webflow 的帳號和密碼以完成授權。之後，你需要選擇你的網站、CMS收集器以及相關的用戶資料。這裡，我們要設定Memberstack ID 作為 URL 連結中的 Slug。接著，動作選擇「Memberstack」，並選「Update Member」。這時你可以將 Webflow 的 Member ID 同步到 Memberstack。完成這些步驟後，打開 Zapier 的右上角開關，回到註冊頁面，嘗試創建新帳號以檢查同步是否成功。如果操作成功，你應該可以在 Webflow 的 CMS 看到新建的帳號數據，同時在 Memberstack 也可以看到已同步的 Webflow Member ID。
到目前為止，不需要任何程式碼，我們已成功搭建了官方網站、註冊和登入頁，以及用戶系統。由於時間限制，Simon 未在此影片中完整展示整個 SaaS 產品的建設。在下一集，他會詳細解釋 Stripe 的付費流程 和具體的 SaaS 功能開發，請大家期待。
結語
本期我們分享了如何使用 無程式碼或低程式碼工具建構 SaaS 產品 的過程。近年來，LCNC（Low Code，No Code）工具 的快速崛起，正在逐步改變軟體開發的環境。不僅適用於企業的內外部應用建設，還有各種 API 整合工具 和一鍵部署工具，都極大地豐富了開發者的工具集。
我們相信，在不久的未來，更多這類的無代碼或低代碼工具會賦予更多人軟體開發的能力，通過直觀的拖放和所見即所得的方式，不只降低開發的門檻，同時也賦予用戶更大的彈性和擴展性。無程式碼的進展，就如同從最初的匯編語言到 C 語言，再到 Java 和 Python 的進化，每一代的進步都使得更多的人加入開發的行列。未來，我們還將分享更多有關 SaaS 產業 和 Low Code/ No Code 工具 的分析、教學和最新產品介紹，於 Tendmey 與 Tenten Blog 敬請關注！
What's next?
你是正在打造 Web3 的新創嗎? Tenten 替與許多 Crypto, NFT, Web3 新創合作打造項目，了解更多我們的 Web3 經驗
