利用OutSystems開發 Web 應用程式非常簡單。如果您有包含資料的 Excel 檔案，則可以將其匯入資料庫並快速建立企業級應用程式來管理資料。如果您沒有準備好 Excel 檔案，請不要擔心，我們會為您提供樣本檔案。

要使用從Excel檔案匯入的資料建立應用程式，您需要：

• 建立資料庫模型，並將Excel檔案中的資料匯入資料庫；
• 建立一個螢幕列出資料庫中資料；
• 建立一個螢幕，允許建立新資料和更新現有記錄；
• 實現從資料庫中刪除記錄的功能；
• 釋出您的應用程式；
• 讓我們開工吧！在這個例子中，我們將使用提供的Excel聯絡資訊，建立一個簡單的聯絡人管理應用。

建立一個web應用

讓我們建立一個新的聯絡人資訊管理的 Web 應用。應用程式包含一個或多個模組，應用程式的不同部分可以封裝在一個模組中。您可以在模組中設計資料模型，執行邏輯以及設計應用程式的 UI 介面。

在Service Studio中，單擊New Application，選擇Web App，選擇Top Menu模板並將其命名為“Contact Portal”。

在新的Contact Portal應用程式中，建立一個Web Responsive模組，並命名為‘ContactPortal’。

從Excel檔案建立資料庫表格

OutSystems 將您的應用程式資料儲存在關係資料庫中。這就是說建立應用程式的第一步是定義資料模型。

為此，我們將使用已包含以下聯絡資訊的Excel檔案：

• 姓名
• 地址
• 出生日期
• 郵箱

在 ContactPortal 模組中，開啟右上角的 Date 選項卡，右鍵單擊Entities資料夾，選擇 Import Entities from Excel…”，然後在目錄中選擇預設情況下可用的Contacts.xlsx示例檔案C:\Program Files\OutSystems\Development Environment 11.0\Service Studio\TutorialResources.

匯入Excel檔案時，OutSystems會建立一個數據庫表（在OutSystems中稱為Entity），其中包含必要的列（在OutSystems中稱為Attributes）以將資料儲存在資料庫中。

在程式後臺，OutSystems將 Excel 的每行資料都匯入資料庫中。釋出應用程式後，將自動執行由Excel資料的填充資料庫。

建立一個螢幕列出聯絡人

現在我們可以建立一個螢幕列出所有聯絡人。

開啟右上角的Interface選項卡，然後雙擊UIFlow目錄下的MainFlow。然後，將Contact從Data選項卡拖放到Main Editor視窗中的空白區域。

這將建立一個螢幕，其中包含一次顯示50個聯絡人的列表，以及分頁和搜尋功能。

建立一個螢幕用以建立和編輯聯絡人

建立一個螢幕用於建立和編輯記錄與建立列表螢幕一樣便捷，因此你只需要重複上一步即可。

開啟MainFlow視窗，將 Contact從Data選項卡拖放到Main Editor視窗中的空白區域。

這將建立一個新視窗，其中包含用於建立新記錄或編輯現有記錄。 OutSystems還添加了伺服器端邏輯，支援自動建立和編輯記錄。

允許刪除聯絡人

要實現管理聯絡人的應用程式，我們現在只缺少刪除功能。讓我們來實現！

雙擊螢幕ContactDetail按鈕將其開啟。將Button小部件從工具箱拖放到螢幕的Cancel按鈕右側，右鍵單擊新按鈕，然後選擇Link to New ‘DeleteContact’ Screen Action。

OutSystems新增伺服器端邏輯以支援刪除聯絡人記錄並將該按鈕與該邏輯相關聯。

釋出你的Web應用

現在我們只需要讓應用程式上線。單擊1-Click Publish按鈕將應用程式釋出到您的環境中。

部署應用程式後，單擊Open in Browser在瀏覽器中開啟，在瀏覽器中測試應用程式。