客戶通訊錄專案

＊開發一個移動端應用，用來訪客拍照儲存，並記錄訪客詳細資訊

開發步驟

• 主要有5個大步驟：
• 步驟一：建立新專案後調整預設主頁
• 步驟二：設計一個提交表單來儲存訪客資訊
• 步驟三：拍照
• 步驟四：儲存說客資訊和照片
• 步驟五：顯示儲存的資訊
• 完整的開發操作演示：

• 開發的專案案例下載---可以網盤下載案例匯入開發工具對應操作演示進行學習

開啟開發工具建立專案準備開發

• 執行TERSUS開發工具，Windows系統中選名稱為Tersus Visual Programming Platform的程式; Mac電腦中執行Tersus
  程式
• · 如果是第一次執行程式，則會顯示一個歡迎使用的頁面，顯示如何快速開發一個專案，在頁面中新增按鈕，彈出“Hello World”的一個資訊彈窗；關閉此頁面後才能進入專案開發
• · 注意如果是WIN10系統，需要以管理員方式開啟TERUS軟體進行無程式碼軟體開發，否則會有一個如下的彈窗，提示“Workspace”---開發工具預設的專案資料夾---不能訪問（在使用中或不能生成，請選擇另一個）

• 專案資料夾：可以用管理員開啟後在工具的選單欄中選File---Switch Workspace來選擇非系統盤的一個資料夾設定為專案檔案
• 新建一個專案，命名為“KEHU”
• 新建方式：File -> New Tersus Project
• 彈窗中輸入專案名稱“KEHU”
• 專案模板中選“New Mobile Application”
• 點選“Finish”完成新建
• 開發區中顯示底層系統顯示元件：不同模板中有不同的平臺顯示塊，New Mobile Application模板包括**<Mobile View>、<Tablet View>和<Desktop View>**三個顯示塊
• 移動端顯示塊中開發：本專案我們只使用移動端顯示塊，所以可以刪除**和Desktop View**兩個顯示塊，刪除時直接選中按刪除鍵，會提示刪除物件是專案中唯一物件，是否同時刪除專案檔案目錄中的檔案，可以選是徹底刪除減少檔案冗餘內容，然後可以儲存專案更新內容：可以點選選單欄中的Save按鈕、或直接按Ctrl+s快捷鍵、或選單中選File -> Save來儲存

正式開發

• 雙擊退開發區中的**<Mobile View>**顯示塊進入其內部
• 有一個預設新增的的名稱為“Page1”的頁面，對此頁面元件重新命名為“客戶”
• · 可以選中頁面後按F2快捷鍵開啟重新命名視窗，也可以右鍵單擊頁面元件，在彈出的選單中選“Rename”在彈出的重新命名視窗中設定名稱，輸入新名稱後窗口中點選“Finish”完成設定
• 雙擊“客戶”頁面元件進入頁面內容開發，雙擊Header頁面頭部顯示欄，將右側Button名稱的按鈕改名為“新客戶”，刪除左側Prev按鈕
• 此時可以點選開發工具執行按鈕
• 在本地瀏覽器執行檢視開發結果

可以在瀏覽器中輸入http://localhost:8080/KEHU/mobile.html

將在瀏覽器中顯示手機模擬器介面：

• 此部分開發演示：

設計一個提交表單來儲存訪客資訊

• 當用戶點選主頁面右上角的“新客戶”按鈕時，跳轉至一個“新增新客戶”名稱的資訊新增頁面，在此頁面中放入資訊提交元件、輸入框子元件用於儲存客戶資訊，如姓名、公司名稱等
• 雙擊主頁面右上角的“新客戶”按鈕、然後雙擊“On Click”行為處理元件，這個元件中設計的邏輯是使用者點選按鈕時程式執行的處理內容
• “On Click”行為處理元件中從顯示類元件選項板中點選一個
• “Page Dialog頁”普通移動端頁面元件，再次點選“On Click”行為處理元件內部任意位置放入，並命名為“新客戶資訊”
• · 預設在剛放入一個元件時，激活了命名功能可直接輸入名稱，如果放入後執行了點選或回車等處理，則退出命名狀態，元件分配了預設名稱，此時可選中元件按“F2”或右鍵單擊選“Rename”來重新命名
• 雙擊“新客戶資訊”頁頁元件，再雙擊進入“Content”頁面內容顯示塊元件中，從顯示類元件選項板中點選“表單”元件再點選要放置的位置放入
• 在表單元件上雙擊，然後其中設計以下內容：
• 在表單元件內部右鍵單擊，彈出的選單中選Add Element---Text Labeled Field，命名為“姓名：”（命名方式參考“新客戶資訊”的命名方式說明），注意加的冒號是中文方式輸入的，否，英文部分符號不可以做名稱，不能做名稱時有自動提示
• 同上再新增另兩個同樣的子元件並命名為“職務：”和“公司：”
• 儲存開發內容
• 此頁面設計如下（表單元件各內部子元件拖放放大以方便顯看）

• 然後開啟執行的瀏覽器中的頁面，頁面自動重新整理顯示如下：

• 開發操作演示：

拍照設計

• 進入客戶資訊提交的表單元件中，從顯示類元件中點選放入一個“Button按鈕”元件，並命名為“新增照片”，雙擊進入按鈕的“On Click”行為處理元件中，我們在此設計使用者點選按鈕時觸發呼叫手機的拍照功能
• 雙擊“新增照片”按鈕外部表單元件，則進入表單元件內部，從顯示類元件選項板中點選“Image圖片”元件，放於按鈕上方但是三個辦玫框元件下部，用於顯示拍照所得的照片
• 雙擊“新增照片”按鈕，再雙擊進入按鈕的“On Click”行為處理元件，從顯示類元件選項板中點選“Take Picture拍照”元件放入
• 以下處理來顯示拍照獲取的照片：
• 右鍵單擊“On Click”行為處理元件任意位置，在彈出的選單中選Add Ancestor Reference---Form，這樣新增一個Form的父引用物件，這個父級引用物件中有圖片物件，可以將拍照的結果傳給圖處理的路徑變數
• 連線傳值：選項板最上部點選Flow傳值流程元件，或英文輸入法下按“f”鍵，選點拍照元件的輸出，再連向Form父引用物件的圖片下的SRC地址變數完成傳值處理
• 圖片下的SRC變數可以點選父級引用物件中圖片右上角的“+”號來展開顯示，或是雙擊圖片物件來展開
• 以上傳值處理完成後，執行時，拍照的照片實際存放於應用記憶體中，但有一個地址，這個地址由拍照元件輸出，並傳入顯示圖片元件的路徑變數中，此時當拍照完成時，就可以重新整理顯示內容顯示照片
• 拍照並顯示的設計開發如下：

• 儲存後開啟執行中的瀏覽器專案頁面，會自動重新整理顯示儲存的新開發的內容

注意如查不在手動端執行，則會提示拍照功能不可用，是否選用預設樣例圖片

• 此部分開發操作演示：

儲存客戶資訊及照片

使用客戶端的儲存方式

• 我們的應用是一個獨立的在手機上執行的應用程式，這類應用將資料儲存在手機本地，參考“離線應用及本地資料庫”一節的說明
• 為儲存資料，我們使用的是瀏覽器的HTML5的資料庫儲功能

設計資料結構

• 雙擊進入以下元件：<Mobile View>/客戶/新客戶/新客戶資訊/Header/Button元件
• 將按鈕“Button”改名為“儲存”，按鈕“Prev”改名為“返回”，雙擊進入“儲存”按鈕的“On Click”行為處理元件中，從行為處理類元件中點選“Action普通行為處理元件”，然後點選開發區中左上位置放入並命名為“生成記錄”
• 雙擊進入“生成記錄” 行為處理元件，在此設計包含客戶資訊內容和圖片的資料結構：
• “生成記錄”行為處理元件內，從資料型別元件中點選“Data Structure資料結構”元件放入，命名為“KEHU”
• 資料結構中新增4個客戶資訊元件：
• 新增一個字元型別資料變數元件，命名為“XingMing”，新增方式為：點選資料型別類的元件中的字元資料型別/變數元件，然後點選“Data Structure資料結構”元件內部即可，放入元件後即輸入名稱命名
• 同上新增第二個字元型別資料變數元件，命名為“ZhiWu”
• 新增第三個字元型別資料變數元件，命名為“GongSi”
• 新增第四個字元型別資料變數元件，命名為“ZhaoPian”
• 將父級頁面中各輸入框的資料傳入“KEHU”資料結構
• 用連線傳值元件連線：“新客戶資訊”頁面的父級引用物件/Content/Form/姓名：/Text Field/傳至“KEHU”資料結構的“XingMing”元件
• 用連線傳值元件連線：“新客戶資訊”頁面的父級引用物件/Content/Form/職務：/Text Field/傳至“KEHU”資料結構的“ZhiWu”元件
• 用連線傳值元件連線：“新客戶資訊”頁面的父級引用物件/Content/Form/公司：/Text Field/傳至“KEHU”資料結構的“GongSi”元件
• 用連線傳值元件連線：“新客戶資訊”頁面的父級引用物件/Content/Form/Image/傳至“KEHU”資料結構的“ZhaoPian”元件
• 為“生成記錄” 行為處理元件新增一個輸出元件，用記執行此段邏輯後返回客戶記錄：
• 從元件選項板頂部選“Exit輸出”元件，或英文輸入法時快捷鍵“e”來選中元件
• 然後在“生成記錄” 行為處理元件右側邊框中間再次點選新增一個輸出元件
• 新增一個連線傳值，將“KEHU”資料結構連至剛剛新增的輸出元件
• 開發完成的“生成記錄”行為處理元件如下：

儲存資料結構內容

• 現在設計儲存全部客戶資訊的資料結構
• 右鍵單擊“KEHU”資料結構，在彈出的選單中選“Copy”
• 雙擊元件外部，一路退回到“<Mobile View>”中的“客戶”頁面元件中，從資料型別類元件中點選“Data Structure”資料結構變數放入，並命名為“KEHU LieBiao”，這個資料結構中將置所有新增的客戶記錄
• 在“KEHU LieBiao”資料結構中新增“KEHU”資料結構（在剛新增的資料結構中右鍵單擊在彈出的選單中選“Paste”(Reuse)來新增前面複製的“KEHU”資料結構），同時“KEHU”資料結構改為複數狀態（選中後英文輸入法下用快捷鍵“r”，或右鍵單擊資料結構，在彈出的選單中選“Repetitive”）

設計儲存全部客戶資訊的邏輯

• 將新增新客戶頁面儲存時生成的客戶記錄進行儲存處理：
• 雙擊進入以下元件：<Mobile View>/客戶/新客戶/新客戶資訊/Header/儲存/On Click
• 從選項板行為處理元件類元件中點選“Action普通行為處理”元件，或在英文輸入法下用快捷鍵“a”呼叫元件，點選放入“On Click”中，命名為“儲存客戶資訊”；新增一個輸入元件---用快捷鍵“t”或點選元件選項板頂部的“Trigger輸入”元件的方式新增，命名為“jilu”；將之前開發的“生成記錄”的輸出用連線傳值至“jilu”輸入元件
• 雙擊進入“儲存客戶資訊”行為處理元件，新增一個“客戶”頁面的父級引用物件：在“儲存客戶資訊”行為處理元件內右鍵單擊在選單中選Add Ancestor Reference---客戶，即可新增成功，並將“jilu”輸入元件連線傳值至“客戶”頁面的父級引用物件中的“KEHU LieBiao”中的“KEHU”資料結構物件

• 以上完成的設計在執行時，會將客戶資訊存入應用的“KEHU LieBiao”資料結構物件中，但是這個只是在執行時的程式的記憶體中儲存，我們需要將這些資訊存入瀏覽器的本地儲存中：
• 在“儲存客戶資訊”行為處理元件中，新增一個名稱為“儲存客戶資訊列表”的行為處理元件，並新增一個“列表”的輸入元件
• 將“客戶”頁面的父級引用物件中的“KEHU LieBiao”連線傳值至“儲存客戶資訊列表”的“列表”的輸入元件
• 雙擊進入“儲存客戶資訊列表”的行為處理元件，新增一個“客戶列表”名稱的字元常量---在元件選項板中常數常量型別元件中點選字元常量元件，點選開發區需要的位置放入，並命名為“客戶列表”；新增一個“Create Json生成Json文字”元件---從整合功能類的元件中點選放入開發區；新增一個“Store儲存”元件---從顯示行為類的元件中點選放入開發區，按如下圖示連線傳值處理：

生成Json文字生成的是“客戶列表”資料結構全部資訊的字元內容

儲存處理是將生成的字元內容存入瀏覽器的儲存系統中

這是一個有效儲存方式，但不能用於大量資料的儲存處理

• 儲存管理的最後一步是在使用者點選儲存並由程式執行完存入資訊的處理後，關閉“新客戶資訊”頁面，返回顯示程式的“客戶”主頁面：
• 雙擊“儲存客戶資訊列表”的行為處理元件外部，退出至儲存/On Click，新增一個“Close Window關閉視窗”元件---從顯示行為類的元件中點選放入開發區
• 右鍵單擊“儲存客戶資訊列表”的行為處理元件，在彈出的選單中選Add Element---<Done>，這個是當邏輯處理完成時輸出一個空值
• 右鍵單擊“Close Window關閉視窗”元件，在彈出的選單中選Add Element---Control，這個是當有任意物件包括空值傳入時，觸發半閉此關閉視窗元件所在的頁面或彈窗等視窗
• 將以上兩步新增的輸出和輸入元件連線來完成流程控制---當儲存客戶資訊執行完成後關閉新增客戶資訊頁面

• 儲存以上開發內容後，返回至瀏覽器執行的專案頁面，頁面會自動重新整理載入最新開發結果
• 此時，如果在新增客戶資訊頁面輸入一些資訊，點選“儲存”按鈕，資訊就會在本地儲存，下次開啟應用時儲存資訊依然有效
• 本地儲存的完整開發操作演示：

主頁面列表顯示客戶資訊

• 當我們點選“新客戶資訊”頁面右上角的儲存按鈕執行完儲存新客戶資訊後，返回顯示程式的“客戶”主頁面，此時主頁面還是空的，我們將在此設計主頁面內容顯示邏輯
• 雙擊進入<Mobile View>移動端顯示塊中的“客戶”頁面，雙擊進入“Content”頁面顯示內容元件
• 雙擊進入“Content”中“List”列表顯示元件，列表顯示元件中預設有一個複數狀態的列表專案元件，名稱為“List Item 1”，重新命名為“列表專案”
• 在“List”列表元件中，我們設計頁面顯示同時進行一個邏輯處理來獲取全部客戶資訊再顯示到列表顯示元件中：
• 在“List”列表元件中新增一個“顯示客戶資訊”的行為處理元件---從行為處理類元件中點選“Action普通行為處理”元件，或英文輸入法下快捷鍵“a”，然後點選開發區中任一位置放入，同時命名為“顯示客戶資訊”
• 雙擊進入新增的“顯示客戶資訊”行為處理元件，同樣方式新增兩個行為處理元件，分別命名為“獲取全部客戶資訊”和“轉換顯示資訊”；為“獲取全部客戶資訊”新增一個“客戶列表”輸出元件---從元件選項板頂部點選輸出元件或英文輸入法下快捷鍵“e”，再次點點“獲取全部客戶資訊”的右側邊框線中間任意位置新增輸入元件；同樣方式為“轉換顯示資訊”新增“列表專案”輸出元件和“客戶資訊”輸入元件各一個
• 在“顯示客戶資訊”行為處理元件中新增一個“客戶”頁面的父級引用物件---在“顯示客戶資訊”行為處理元件內右鍵單擊在彈出選單中選Show in Repository Explorer，會在左側專案目錄中定位到“客戶”頁面元件，拖入開發區即是重複呼叫此元件或叫複用此物件
• 雙擊退回“客戶”主頁面，右鍵單擊“KEHU LieBiao”資料結構，彈出選單中選“Copy”，再雙擊進入“顯示客戶資訊”行為處理元件，右鍵單擊任一位置在彈出的選單中選“Paste（Resue）”來利用此物件，將“獲取全部客戶資訊”的“客戶列表”輸出元件線連傳值（快捷鍵“f”）至上一步複用的“KEHU LieBiao”資料結構
• 將“KEHU LieBiao”資料結構連線傳入“客戶”頁面的父級引用物件中的“KEHU LieBiao”資料結構，執行時即將獲取的客戶資訊全部存入此資料結構的記憶體中；再將“KEHU LieBiao”資料結構中的“KEHU”資料結構傳入“轉換顯示資訊”的“客戶資訊”輸入元件，將“轉換顯示資訊”的“列表專案”輸出元件和“客戶”頁面的父級引用物件中的列表中的“列表專案”複數狀態子元件物件
• 至此開發的內容為：

設計獲取全部客戶資訊的處理邏輯

• 雙擊進入“獲取全部客戶資訊”行為處理元件，在此設計從瀏覽器本地儲存中提取儲存的資料，對應的是“新客戶資訊”頁面中的儲存按鈕中的存入資料處理邏輯
• 複製在“新客戶資訊”頁面中的儲存按鈕中的儲存邏輯中“客戶列表”名稱的字元常量，然後在此進行復用（可以在專案目錄中找到常量拖入複用）
• 新增一個“Retrieve讀取本地鍵值”元件---從顯示處理類元件中點選元件，然後在開發區點選放入，將“客戶列表”名稱的字元常量連線傳入<Key>輸入元件，這樣就是從本地儲存中提取存入的資訊資料的json文字
• 新增一個“Parse Json生成Json資料視覺化物件”元件---從整合功能類元件中點選元件，然後在開發區點選放入，將“Retrieve”元件的<Value>輸出元件與“Parse Json”元件的<JSON Text>輸入元件連線傳值，再將“Parse Json”元件的<Value>輸出元件連線傳值到“獲取全部客戶資訊”的“客戶列表”輸出元件
• 開發區中開發內容為：

資料結構中的資訊顯示到列表

• 雙擊進入“轉換顯示資訊”行為處理元件，在此設計客戶資訊記錄資料結構轉為顯示內容的處理邏輯，注意每一條記錄處理一次，輸入多少記錄，處理多少次，此時應將此處理元件轉為複數狀態---選中元件，右鍵單擊在彈出的選單中選“Repetitive”或在英文輸入法下點選快捷鍵“r”
• 從目錄中找到“客戶資訊”輸入元件對應的“KEHU”資料結構---右鍵單擊輸入元件，在彈出的選單中選Show in Repository Explorer，會在專案目錄區定位到新增的選中元件，拖入開發區左側，將“客戶資訊”輸入元件連線傳至拖入的“KEHU”資料結構
• 同上方式找到“列表專案”的專案目錄中已新增元件，拖入開發區右側，並連線傳至“列表專案”輸出元件
• 將“KEHU”資料結構的子元件變數值傳入“列表專案”顯示元件的顯示值中：
• “KEHU”資料結構的“XingMing”變數連線傳至“列表專案”下Details下的Title的值<Value>變數中
• “KEHU”資料結構的“ZhiWu”變數連線傳至“列表專案”下Details下的Description的值<Value>變數中
• “KEHU”資料結構的“ZhaoPian”變數連線傳至“列表專案”下圖片的路徑<SRC>變數中
• 開發區中開發內容為：

• 包括下部重新整理功能開發的操作演示

儲存資料後自動重新整理“客戶”頁面顯示最新全部客戶資訊

• 我們還需要設計一個邏輯，在“新增新客戶”資訊頁面的“儲存”按鈕點選後，執行資訊儲存到本地儲存並關閉“新增新客戶”資訊頁面後，對顯示的主頁面內容進行重新整理，這樣就會在主頁面中顯示最新新增的客戶資訊
• 雙擊進入以下元件：<Mobile View>/客戶/新客戶/新客戶資訊/Header/儲存/On Click
• 新增一個名稱為“重新整理客戶資訊列表”的行為處理元件---從行為處理為的元件中點選“Action”普通行為處理元件或英文輸入法下快捷鍵“a”，然後點選開發區On Click的右上，命名為“重新整理客戶資訊列表”
• 為“重新整理客戶資訊列表”右鍵單擊在彈出的選單中選Add Elements---Control，這樣新增一個控制輸入元件，將“儲存客戶資訊”的<Done>輸入元件連線至“重新整理客戶資訊列表”的控制輸入元件，這樣就是儲存資訊完成後，進行“重新整理客戶資訊列表”的邏輯處理
• 雙擊進入“重新整理客戶資訊列表”，新增一個“客戶”頁面的父級引用物件---在“顯示客戶資訊”行為處理元件內右鍵單擊在彈出選單中選Show in Repository Explorer，會在左側專案目錄中定位到“客戶”頁面元件，拖入開發區即是重複呼叫此元件或叫複用此物件
• 新增一個“Refresh重新整理”元件，將“客戶”頁面的父級引用物件連線傳值至“Refresh重新整理”元件的“Element”輸入元件

執行測試

• 我們開啟瀏覽器中執行的專案頁面，如果未開啟，則可以點選開發工具的
• 執行按鈕重新載入開啟
• 可以輸入內容進行測試

功能拓展

• 為了讓此應用更加實用，可以需要開發更多功能：
• 主頁面顯示公司名稱，也可以設計在“轉換顯示資訊”邏輯中新增將姓名和公司名合併為一個字串中間用空格隔開然後傳入顯示專案的標題值中
• 新增一個修改客戶資訊的功能，比如在列表專案的圖片中新增一個<On Click>名稱的行為處理元件，然後放入修改客戶資訊頁面，使用者點選客戶照片就可以彈出修改頁面
• 新增刪除客戶資訊的功能
• 資訊儲存在伺服器端的資料庫中
• 新增不同型別頁面顯示不同型別客戶資訊，可以篩選查詢客戶資訊
• 更多功能...

*****

本文為TERSUS無程式碼開發手冊文章，供參考學習使用，在有需要詳細瞭解對應內容時細看學習，敬請關注並轉發文章

參考我們手冊第一個文章中的2分鐘的計算器功能的拖放連線開發演示，可學會無程式碼開發是如何開發軟體的

想學無程式碼軟體開發的學員請先學習3小時免費教學視訊，3小時內可學會開發並開發出一套管理軟體系統，然後看手冊及其他視訊來進階提高快速成