快速上手

# FastWeb快速上手

適用平臺： Web(桌面)，App(移動端)

該文件旨在讓使用者能夠實現從獲取安裝包后從安裝至開發環境的搭建測試的初步流程操作。在使用本產品前，你需要知道什麼是FastWeb，以及它的運行原理。

# 1. FastWeb簡介

FastWeb是由愛招飛推出的一款整合WEB與APP功能的低程式碼開發平臺，其應用與服務通過網頁的方式提供，您可以在FastWeb提供的開發平臺中進行簡單的設計，只需幾行程式碼就可以實現一個表單功能。同時可以線上上編寫業務邏輯，實現無感知的實時升級。系統提供完整的使用者以及許可權管理功能，無需再自行開發相關功能，使開發人員或者實施維護人員能在開發過程中更專注于業務本身。自帶翻譯功能可以更方便地為模板提供多語言支援。

# 2. FastWeb運行方式

FastWeb以程式的方式運行，所有的設定以及開發均在瀏覽器上進行，通過訪問指定的埠就可以進行相關設定。FastWeb使用的所有用戶數據以及模板數據均儲存在資料庫中，模板設計以及進行系統設定時儲存的內容會進入資料庫中，在系統使用者呼叫模板時實時載入，以全動態的方式顯示。

# 3. 運行及登錄

# 3.1. 運行程式

按照FastWeb安裝配置中的方式安裝完成後，雙擊運行桌面上的FastWeb快捷方式以打開程式，該程式在啟動後會顯示在螢幕右下角的托盤處。

如果是首次啟動，通常會彈出如下圖所示的警報提示，此處需勾選專用網路以及公用網路，然後單擊[允許訪問(A)]

# 3.2. 產品註冊

FastWeb安裝完成時的產品型別為運行版，運行版狀態下不能登錄，在產品註冊后才會啟用。

在FastWeb的安裝目錄下找到並雙擊ConfigTool.exe。打開配置中心界面。

在配置中心界面中，點選 關於，打開軟體註冊界面。

在產品註冊頁面，將本機機器碼複製至剪下板中。與愛招飛產品網站或實施服務商取得聯繫獲取註冊金鑰。獲取註冊金鑰時請提供註冊單位資訊以及註冊郵箱，機器碼等資訊，註冊金鑰將在後續通過郵箱發送。

獲取到註冊金鑰后，將註冊金鑰填寫至對應欄位，點選 [註冊] 按鈕，授權資訊中會顯示註冊單位資訊，點選 [確定] 按鈕關閉註冊界面，完成註冊。

# 3.3. 登錄

使用本機瀏覽器打開網址http://localhost:8888/?logintype=1 (opens new window)，訪問FastWeb登錄界面。該界面下是以開發使用者的模式進行訪問，預設的登錄使用者為admin，登錄密碼為123456。填寫完成後，單擊[登錄]按鈕進入開發模式下的用戶界面。

注意

FastWeb在未註冊企業版或雲端版的狀態下，無法登錄至用戶界面。

登錄后的界面如上圖所示，界面左側為功能表導航欄，右側為模組顯示欄位，用於顯示左側功能表導航欄繫結的模組。

# 4. 第一個WEB程式(HelloWorld)

接下來，我們將在FastWeb上實現PC網頁端的HelloWorld。

# 4.1. 新增模組

# 4.1.1. 展開系統工具功能表

點選功能表導航欄中的[系統工具]右側的小箭頭展開其中的功能表欄，其中的功能表專案如下圖所示。

# 4.1.2. 進入模組列表

單擊展開功能表欄中的[模組列表(Web)]專案，打開模組列表(Web)選項卡。該選項卡中列出了系統中包含的Web模組列表。可在該界面下對模組進行管理。

# 4.1.3. 新增模組

點選模組左上角的[新增]按鈕，打開新增模組的界面，在該界面下填寫組別、標題、開發使用者等資訊。此處修改組別為實體，編號與標題均命名為HelloWorld，選擇開發使用者為admin。

填寫完成後的樣例如下圖所示，填寫完成後點選[儲存]以完成新增模組的操作。

# 4.2. 模組設計

模組儲存完成後，新增的模組會被自動選中，此時可點選上方的[模組設計]按鈕進入到模組設計界面。

# 4.2.1. 拖放控制元件

拖放控制元件的操作如下：(1)點選標準選項卡中的第二個圖示(TUgButton)，即選擇該元件。(2)點選控制元件設計區域，將控制元件放置於下方設計區域的位置中。放置完成後顯示效果圖如下。

# 4.2.2. 修改屬性

模組設計界面的左下角顯示目前選中的控制元件的屬性以及事件資訊，現在需要對剛才拖放的按鈕進行屬性修改，比如將按鈕上的字改為其他自定義的內容。操作方式如下。

(1)在控制元件設計區域單擊該按鈕以選中該控制元件，此時屬性列表中顯示的是按鈕對應的屬性內容。(2)通過滑鼠滾輪滾動查詢其中的屬性，找到Caption，將其右側的內容由原先的UgButton01修改爲HelloWorld。

# 4.2.3. 新增事件

控制元件包含一些操作可用於觸發相應的事件。接下來設定事件觸發，操作方式如下。

(1)在控制元件設計區域單擊該按鈕以選中該控制元件。(2)左側的屬性列表上方單擊[事件]選項卡，切換至事件列表，該列表中列出了該控制元件可用的事件。(3)在OnClick右側的編輯框中雙擊以新增該事件。此時界面會由界面跳轉至程式，並在程式編輯欄中顯示編輯的程式資訊，其中包含了UgButton01OnClick事件。

# 4.2.4. 填寫程式

在procedure UgButton01OnClick(sender: tobject);中的begin和end區域填寫程式，填寫的內容如下：

  ShowMessage('HelloWorld');

填寫完成的程式編輯區樣式如下：

# 4.2.5. 儲存除錯

程式填寫完成後，點選模組左上角的第二個按鈕（下圖所示①處），將該模板儲存至資料庫。等待該按鈕變為灰色，儲存完成。單擊其左側的按鈕（下圖所示②處）以開啟除錯運行。

除錯運行的界面如下圖所示，點選視窗中的[HelloWorld]按鈕，彈出新的訊息提示框並顯示HelloWorld。

在該界面下，點選[確定]以關閉訊息提示框。接著點選除錯窗體右上角的X以關閉該視窗返回至設計界面。最後點選該模組設計界面的標籤右上角的X以關閉模組設計。

# 4.3. 功能表設計

在確保[系統工具]功能表欄處於展開的情況下，單擊其中的[功能表列表(Web)]，打開功能表列表界面。如果[系統工具]功能表欄處於收起狀態，點選其右側的小箭頭以展開其中的功能表列表。功能表列表中以樹形結構展示其中包含的功能表節點。

# 4.3.1. 新增功能表欄

點選功能表列表中的根，然後點選左上角的[新增]按鈕，打開新增功能表對話方塊。

其中填寫功能表名稱為HelloWorld，選擇其對應的呼叫模組為HelloWorld，選擇呼叫模式為mtPage。填寫完成的專案如下圖所示，確認無誤后，點選[儲存]按鈕以儲存功能表欄的新增。

# 4.4. 設定使用者許可權

單擊功能表欄中[系統工具]右側的小箭頭以收起該專案，點選下方的[系統管理]右側的小箭頭以展開其中的功能表欄，點選[角色設定]打開角色設定界面。

# 4.4.1. 選擇角色

點選模組中的[前項]、[後項]按鈕，將角色名稱切換成系統管理員。如果角色名稱在打開模組時預設為系統管理員則不需要點選任何按鈕。

# 4.4.2. 修改許可權

確認角色名稱為系統管理員無誤后，點選[修改]按鈕，下方的表格進入編輯模式，可在許可權中對功能表欄目進行勾選。被勾選的功能表專案會在系統使用者模式下顯示在左側功能表欄中。

# 4.4.3. 勾選功能表

在WEB Root中查詢到HelloWorld功能表，對其許可權列中進行勾選，勾選時該表格會自動重新整理以確認勾選其上級功能表。

# 4.4.4. 儲存修改

點選上方右側的[儲存]按鈕以儲存許可權的修改。此時會有提示框提示修改成功。

# 4.5. 設定使用者

在確保[系統管理]功能表欄處於展開的情況下，單擊其中的[使用者設定]，打開使用者設定界面。如果[系統管理]功能表欄處於收起狀態，點選其右側的小箭頭以展開其中的功能表列表。功能表列表中以樹形結構展示其中包含的功能表節點。

# 4.5.1. 新增使用者

點選[新增]按鈕，界面如下圖所示。

# 4.5.2. 填寫所屬部門

單擊所屬部門編輯框，打開選擇部門對話方塊，此處選擇部門1，點選[確定]按鈕返回界面。

# 4.5.3. 填寫使用者相關資訊

填寫使用者名稱稱與使用者全稱，設定密碼型別。使用者名稱稱為登錄時使用的使用者名稱。使用者全稱為使用者的別稱，此處設定使用者名稱稱為test_user，使用者全稱為測試使用者，使用者密碼為123。

其中的使用者密碼在輸入時單擊使用者密碼框會顯示輸入框，在其中輸入密碼，點選[確定]即可。

# 4.5.4. 勾選登錄型別

單擊允許登錄型別編輯框，在彈出的請選擇登錄型別對話方塊中勾選User，點選[確定]。

# 4.5.5. 啟用使用者

單擊 啟用 選框，以啟用使用者登錄功能。

# 4.5.6. 勾選角色

為test_user使用者勾選角色，將其右側的勾選處打勾。

# 4.5.7. 儲存修改

確認完成後，點選上方的[儲存]按鈕。出現數據儲存成功的對話方塊時，數據儲存完成。

# 4.6. 測試登錄

使用本機瀏覽器訪問http://localhost:8888/ (opens new window)，進入到登錄界面，在登錄使用者處輸入test_user，登錄密碼處輸入123，點選[登錄]按鈕，進入到演示界面。

點選左側功能表導航的HelloWorld，打開模組。點選模組中的HelloWorld按鈕，顯示包含HelloWorld內容的訊息框。至此WEB程式的快速上手已完成，關於FastWeb中的WEB相關內容可參考FastWeb功能介紹。

# 5. 第一個APP程式(HelloWorld)

接下來，我們將在FastWeb上實現APP網頁端的HelloWorld。

# 5.1. 新增模組

# 5.1.1. 展開系統工具功能表

點選功能表導航欄中的[系統工具]右側的小箭頭展開其中的功能表欄，其中的功能表專案如下圖所示。

# 5.1.2. 進入模組列表

單擊展開功能表欄中的[模組列表(App)]專案，打開模組列表(App)選項卡。該選項卡中列出了系統中包含的App模組列表。可在該界面下對模組進行管理。

# 5.1.3. 新增模組

點選模組左上角的[新增]按鈕，打開新增模組的界面，在該界面下填寫組別、編號、標題、開發使用者等資訊。此處修改編號與標題為HelloWorld，選擇開發使用者為admin。

填寫完成後的樣例如下圖所示，填寫完成後點選[儲存]以完成新增模組的操作。

# 5.2. 模組設計

模組儲存完成後，新增的模組會被自動選中，此時可點選上方的[模組設計]按鈕進入到模組設計界面。

# 5.2.1. 拖放控制元件

拖放控制元件的操作如下：(1)點選標準選項卡中的第三個圖示(TUgAppButton)，即選擇該元件進行放置。(2)點選控制元件設計區域，將控制元件放置於該點選區域的位置中。放置完成後顯示效果圖如下。

# 5.2.2. 修改屬性

模組設計界面的左下角顯示目前選中的控制元件的屬性以及事件資訊，現在需要對剛才拖放的按鈕進行屬性修改，比如將按鈕上的字改為其他自定義的內容。

(1)在控制元件設計區域單擊該按鈕以選中該控制元件，此時屬性列表中顯示的是按鈕對應的屬性內容。(2)通過滑鼠滾輪滾動查詢其中的屬性，找到Caption，將其右側的內容修改爲HelloWorld。

# 5.2.3. 新增事件

控制元件包含一些操作可用於觸發相應的事件。

# 5.2.4. 填寫程式

在procedure UgAppButton01OnClick(sender: tobject);中的begin和end區域填寫程式，填寫的內容如下：

  ShowMessage('HelloWorld');

填寫完成的程式編輯區樣式如下：

# 5.2.5. 儲存除錯

除錯運行的界面如下圖所示，點選視窗中的[HelloWorld]按鈕，彈出新的訊息提示框並顯示HelloWorld。

在該界面下，點選[OK]以關閉訊息提示框。接著點選除錯窗體右上角的X以關閉該視窗返回至設計界面。

# 5.3. 功能表設計

在確保[系統工具]功能表欄處於展開的情況下，單擊其中的[功能表列表(App)]，打開功能表列表(App)界面。如果[系統工具]功能表欄處於收起狀態，點選其右側的小箭頭以展開其中的功能表列表。功能表列表中以樹形結構展示其中包含的功能表節點。

# 5.3.1. 新增功能表欄

點選功能表列表中的根，然後點選左上角的[新增]按鈕，打開新增功能表對話方塊。

其中填寫功能表名稱為HelloWorld，功能表圖示設定為 home，選擇其對應的呼叫模組為HelloWorld，選擇呼叫模式為mtPage。填寫完成的專案如下圖所示，確認無誤后，點選[儲存]按鈕以儲存功能表欄的新增。

# 5.4. 設定使用者許可權

# 5.4.1. 選擇角色

點選模組中的[前項]、[後項]按鈕，將角色名稱切換成系統管理員。如果角色名稱在打開模組時預設為系統管理員則不需要點選任何按鈕。

# 5.4.2. 修改許可權

# 5.4.3. 勾選功能表

在APP Root中查詢到HelloWorld功能表，對其許可權列中進行勾選，勾選時該表格會自動重新整理以確認勾選其上級功能表。

# 5.4.4. 儲存修改

點選上方右側的[儲存]按鈕以儲存許可權的修改。此時會有提示框提示修改成功。

# 5.5. 設定使用者

使用者設定可參照 Web程式設定使用者的方式進行設定，如在Web程式中已建立過使用者的此處可略過。

# 5.6. 使用移動設備訪問

在使用移動設備訪問前，需要知道本機的IP地址，並確保移動設備與本機處於同一個區域網絡中。以下給出在Windows中檢視本機IP地址的方法。

# 5.6.1. 檢視本機IP地址

按下鍵盤上的Windows+R組合按鍵，打開運行對話方塊。在編輯框中輸入cmd，單擊[確定]按鈕，打開命令提示符界面。

在命令提示符中輸入ipconfig，輸入完成後按下Enter按鍵，以下會列出所有網絡卡的相關資訊，選擇與移動設備處於同一網路的網絡卡，檢視其IPv4地址，例如本示例中顯示的IP地址為192.168.0.122，請記住您使用命令查詢到的IP地址，在接下來的訪問中會使用到。

# 5.6.2. 移動設備訪問

使用移動設備打開瀏覽器，在位址列中輸入http://您的IP地址:8888/m (opens new window)，將其中的IP地址修改爲您在命令提示符中查詢到的IP地址，例如192.168.0.122，打開的網頁頁面如下圖所示。

在登錄使用者欄輸入test_user，在登錄密碼欄輸入123，輸入完成後，點選[登錄]按鈕。

進入界面后，點選主頁欄左側的按鈕以展開功能表欄。

點選功能表欄中的HelloWorld，打開頁面。

該頁面中，點選[HelloWorld]按鈕，彈出顯示HelloWorld的訊息框。

至此APP端HelloWorld程式演示完畢。

# 6. 結論

通過上述操作，您已經實現了FastWeb基礎環境的搭建以及模組的設計運行，如果需要詳細瞭解FastWeb中的相關功能可以參閱FastWeb功能說明(WEB)以及FastWeb功能說明(APP)。

# 7. 常見問題

# 7.1. 本地能訪問，其他設備無法訪問

遇到該情況，請先檢查程式是否已經啟動，然後再檢查防火墻設定。

由於程式運行在本地，如需要開放FastWeb給區域網中的其他設備以進行訪問需要設定防火墻。通常再程式首次運行時，防火墻設定中已進行新增，如後期需自行增加防火墻相關設定，可按照下述方式進行操作。

# 7.1.1. 打開控制面板

按下鍵盤上的Windows+R組合按鍵，打開運行對話方塊。在編輯框中輸入control，單擊[確定]按鈕，打開控制面板界面。

# 7.1.2. 選擇防火墻設定

打開的控制面板將檢視方式更改為大圖示，然後點選[Windows Defender防火墻]，

在如地獄面中選擇高級設定。

# 7.1.3. 選擇入站規則

彈出高級安全Windows Defender防火墻視窗，在其中點選入站規則。

其中入站規則中顯示了當前防火墻包含的所有入站規則列表。

# 7.1.4. 新增入站規則

在高級安全Windows Defender防火墻視窗中顯示入站規則列表時，點選新建規則...。

# 7.1.5. 選擇規則型別

彈出新建入站規則嚮導視窗，在要建立的規則型別中，選擇程式(P)。選擇完成後，點選[下一步(N)]按鈕。

# 7.1.6. 選擇應用規則程式

在視窗中選擇規則應用的程式。此處先選擇此程式路徑(T)，然後單擊右側的[瀏覽(R)...]按鈕，打開檔案選擇界面。

在檔案選擇界面選擇程式檔案所在的目錄地址，預設的地址通常為C:\Program Files\IsoFace\FastWeb，在該目錄下單擊選擇FastWebClient.exe或者FastWebClient（不顯示檔案後綴名的情況下的選擇項），然後點選[打開(O)]。

返回至如地獄面，程式路徑中包含了剛才選擇的程式，確認後點擊[下一步(N)]按鈕。

# 7.1.7. 指定操作

在該界面下選擇操作的型別，選擇允許連線(A)，單擊[下一步(N)]按鈕。

# 7.1.8. 選擇應用規則

在該界面下，選擇應用的規則，請將所有的選項進行勾選，單擊[下一步(N)]按鈕。

# 7.1.9. 設定規則名稱

填寫規則名稱，此處填寫名稱為FastWeb，點選[完成(F)]按鈕，至此防火墻規則設定完畢。

← 安裝配置桌面功能→