在前面的文章已經介紹過強大的後端應用Xano,接下來將要介紹一款在美國相當知名的前端工具—Retool。

ℹ️
前端(Front end):對常見的網頁應用程式來說,「前端」泛指可供使用者所直接看見的程式語言或框架,比較著重在資料如何快速取得並展現,因此很注重使用者體驗。較常使用的程式語言有HTML、CSS、JavaScript。
後端(Back end):與前端相對應,「後端」則是注重在資料如何取得和儲存,包含如何有效率地進行邏輯運算,因此會牽涉到與資料庫的連結。常見的程式語言很多,例如PHP、ASP.NET、JAVA、Python等。

Retool是一款強大的Low Code 低程式碼前端開發工具,其主要特色是透過拖拉式的網頁元件,以及方便的API串接工具,可以串接許多後端資料庫,例如PostgreSQL、MySQL、MongoDB、BigQuery、Redis、SAP Hana、Amazon S3、REST API、Google Sheets等等非常豐富。以往企業內部App專案需要IT部門支援時,經常需要層層審批且工作進度經常被開發部門延遲,無法在步調節奏很快的商業環境中即時解決問題。

Retool 強調透過它們的平台能飛快開發內部應用程式(Internal tools),非IT背景的專案人員自己也能成為開發者,不需要太高超的技術,就能完成軟體開發。因此Retool這個低程式碼開發工具可以說是為建造者所生,為建造者所創(Built for builders, by builders.)

About us
Retool is a fast way to build internal tools. We help thousands of companies of all sizes build mission critical apps to run their businesses.

企業內部應用程式(Internal tools)最常見的問題是,使用者要如何操作資料庫(即CRUD)? 通常必須有個前端介面供使用者能夠看見資料、操控資料。以多數人熟悉的Excel為例,我們可以直接在Excel工作簿上看到我們存取的資料,並且能夠透過一系列的工具與函數來操作資料、對數字進行加減乘除的運算。如果沒有一個親民易用的介面能夠讓使用者操作,即便有了強大的資料庫也是徒勞。那麼該如何製作一個好用的使用者介面呢?

以多數人熟悉的網頁應用程式為例(Web Apps),開發者除了必須撰寫靜態的Html、Css程式碼,以及控制動態的JavaScript,最後再把程式部署在雲端伺服器,對於非程式設計背景的人而言,技術門檻可說是非常高的。

筆者在沒有接觸過no code以前,曾經去學習使用Python Django開發網頁應用程式,過程中的一些軟體設計原則不談,例如:MVC架構,光是靜態的HTML與CSS就要花費許多時間(雖然有很多模板可以套用),要能立即使用網頁應用程式更加不容易。如下圖所示,傳統的前端開發都需要撰寫大量的Html代碼,入門門檻高。

而當我遇到Retool之後,這些問題一切都迎刃而解了!接下來將介紹Retool這項好用的前端開發工具,只要用拖拉的方式就可以迅速建立Web App 介面囉!

Retool

強大且快速的Low Code 低代碼前端開發工具

Retool有提供慷慨的免費方案可以使用,對於入門學習者相當友善,進階後可參考不同價格的付費方案有更多功能可以應用,詳情請參考連結

一、操作介面

如圖1所示,上方兩個比較重要的是App列表與DB資料庫列表,右方點擊「create new」可以新增專案資料夾與app,下方可檢視app,並進行編輯預覽。圖3.1.1~3.1.3為不同資料庫設定的範例,連接資料庫一般要設定資料庫主機(Host)與埠號(Port),Rest API要設定Base URL或其他參數,Google Sheets則可以用Service Account或OAuth 2.0的方式授權給Retool進行串接。

以上這些設定同樣都可以另外在APP編輯頁面中設定,差別在於統一管理,例如只有一個API的時候,只要在Base URL中設定好,其餘只要帶參數即可,便於管理。

圖1.Retool介面

點擊Resources,進入到串接資料庫的設定頁面,如圖2所示。點擊「create new」可以新增想要串接的資料庫或Rest API,下方可以看見Google Sheet也可以當作資料庫來源。

圖2. DB設定介面
圖3.1.1資料庫設定範例
圖3.1.2.Rest API設定範例
圖3.1.3.Google Sheets設定範例

二、功能介紹

在App列表中建立空白範本後,點擊Edit進行編輯。圖4.2主要可以區分為四大區塊,依序為:網頁元件關係圖、網頁頁面設計區、網頁元件拖曳區、資料庫API設定區。上方有視窗開關按鈕可以開啟或隱藏特定區域。

1.網頁元件關係圖:可檢視網頁中各元件的階層對應關係
2.網頁頁面設計區:可在3的區域將網頁元件(components)拖拉至此,並進行編輯,例如表格元件(table)、按鈕(button)等。
3.網頁元件拖曳區:即各類型的網頁元件,包含例如表格(table)、按鈕(button)、文字數字輸入(text Input)、圖表(chart)、頁籤(tabs)......等等,將其拖曳至2區域中可進行元件設計。
4.資料庫/api設定區域:可設定後端資料庫或Rest api,資料則會透過選染(Render)的方式展現在2區域所設計的網頁元件中。
圖4.1
圖4.2
圖4.3.將網頁元件拖曳至編輯區

網頁元件列舉:

開啟右方面板(Right panel),基本上常見的網頁元件在Retool上都都找得到,例如文數字輸入Input、下拉選單(Select)、選項(radio)、頁籤(tabs)、容器(container)......等等。控制面板可以設定元件的串接資料(Data)、屬性(Properties)與CSS Style。

後端資料庫串接:

開啟下方控制面板(Bottom panel),點擊「+New」,選擇「Resource query」,可選擇要串接的資料庫或REST API,若連接DB,可以使用SQL語言來操作資料,若選擇REST API則可以將API URL貼入下方,並選擇GET或POST等方法,必要時也可以在URL_paramaters或Body輸入API參數。

資料傳遞:

若後端資料庫連接正確(或api)無誤,資料可以透過參數傳遞至前端網頁元件,以下圖為例,資料庫查詢名稱query1連結成功,並以SQL語言取得資料,前端網頁元件table_1的data參數可以「{{query1.data}}」帶入,資料便會渲染在網頁的table中。

ℹ️
在Retool中,資料參數的寫法需要兩個成對波浪括弧「{{ }}」將元件的資料包住,例如表格資料會是:「{{ table_1.data }}」,若語法正確,Retool會以綠色字體呈現。

三、應用

Retool已經累積了一定數量的開發者,因此成立了專屬社群—The Retool Community,開發者們可以隨時在社群裡交流與發問問題,甚至解決別人的問題,因此不少作品都已經被當成模板供大家使用,有興趣的朋友可以直接點擊連結,這些模板已經嵌入在網頁上,可以直接試玩!

下圖是我們團隊透過Retool串接Xano後端資料庫開發出的內部ERP系統。有了Retool,你也可以快速開發出一套前端介面供使用者操作資料庫,可以編輯、存取、修改、刪除資料。

Quickstart
Build your first Retool app in minutes.

四、結語

Retool是一套強大、易用的Low Code 前端開發工具,透過模組化的網頁元件,省去了撰寫Html和Css的時間,而且具有非常彈性而且擴充功能極廣的API工具,可以在最短的時間內開發出符合自己業務所需的系統。No Code時代來臨,人人都可以成為開發者,Retool為建造者所生,為建造者所創(Built for builders, by builders.)。由於篇幅有限,加上Retool擁有極為豐富的文件與教學內容,在此無法一一列舉說明,有興趣的朋友可以參考官方文件或是搜尋Youtube,也歡迎我們聯絡,一起加入No Code 開發者行列吧!

分享這篇文章