# How to Subscript Build Apps
https://mp.weixin.qq.com/s/8mt4Hz0kQNCwqZm-cBupGg

# 💻 Intro

## Adding view components
https://vimeo.com/835692195
從左側欄位拖曳到UI Canva即可。點擊元件上的複製圖示可以產生相同條件的新元件，Label / Content是預設呈現在APP上的內容。

## Preview on device
https://vimeo.com/835692105
點選上方的LAUNCH，選擇"Preview your app"，這邊有兩種預覽APP的方式：

1. ==網頁==
點選"Open Web Preview"。
2. ==手機==
用手機到Play商店 / Apple Store下載 "SAP Build Apps Preview"，
進入APP後，點選"SAP Build Apps"的區塊，它會產生一組PIN code，在電腦上將它輸入，就可以登入你的帳號，預覽Build Apps的專案。
:::info
**如果PIN code出現錯誤？**
可能是BTP subaccount當初國家是設定US，但Build Apps預設的國家是EU所導致。

遇到這種情況，可以在手機進入"SAP Build Apps Preview"的頁面下方，點選 "Other login options"，在 "Login with PIN code"改選擇 "SAP Build Apps US10"，再點選Generate code去產生PIN code，這樣應該就可以連上了。
:::

## Change text content
https://vimeo.com/835692233
修改元件的Label / Content (點選元件後，位於右側的PROPERTY欄位)

## Create component styles
https://vimeo.com/835692260
點選元件後，選擇右側的STYLE欄位，可以套用預設的格式設定，也可以在選取格式後，點選Edit去編輯新的格式，再點選NEW STYLE儲存。

## Add logic
https://vimeo.com/835692292
點選元件後，選擇下方的"Add logic to..."，會有一塊類似拼圖的工作區，可以從左側選擇觸發事件(Event)後要執行的動作，像是跳出警示區塊(Alert)，或是切換頁面(Open Page)等。

# 💻 Logic

## Create logic flows
https://vimeo.com/834710979
練習如何連接邏輯控制的元件。圖片範例為點擊文字後，跳出一個Confirm視窗，選擇Yes / No會出現不同的提示視窗(Toast)。
(手機版無法截圖)

## Use output of previous node in logic
https://vimeo.com/834711035
連接相機，並在拍攝完後顯示儲存路徑。
:::info
**Alert設定：**
點選Dialog Title下方圖示，選擇"Output value Of another node"，選擇以下資訊：

| Select logic node | Select node output |
| ----------------- | -------- |
| Take Photo | Path |

完成後按下SAVE。
:::

## Create branching logic
https://vimeo.com/840446390
讓兩個元件的狀態產生互動。圖片範例為checkbox在勾選與未勾選的狀況下，按下按鈕後跳出的Toast訊息會有所不同。
If的上方是有勾選(True)的情況，下方是未勾選(False)的情況。
:::info
**If condition設定：**
點選Conditions下方圖示，選擇"Component properties"，再選擇 "Another component's property or output value"後，選取以下的資訊：

| Select component | Select component property |
| ----------------- | -------- |
| Checkbox field 1 | Checkbox field 1(Value) |

完成後按下SAVE。
:::

## Navigate to another page
https://vimeo.com/834711201
建立一個跳轉到其他頁面的按鈕。為此要先建立一個New Pages：
:::success
1. 點選左上角的連結，進入到選擇頁面的區域。
2. 點選"ADD NEW PAGE"，輸入新頁面的名稱。
:::
建立完成後回到原本的Home Page，建立一個按鈕，在邏輯元件的工作區連接Open Page，在右側的"Page"選擇你剛才建立的新頁面，或是其它頁面都可以。

## Add a flow function from the Marketplace
https://vimeo.com/834711265
在邏輯元件的工作區點擊MARKETPLACE，這裡可以下載一些功能更多元、更複雜的特殊元件，就像是程式的函數(Function)。

輸入 **"Open URL"**，找到元件後點擊進入，然後點擊右上角的Install(圖片範例為已下載完畢的畫面)，然後點選右上角EXIT。
回到Home Page，建立一個新按鈕，在邏輯元件的工作區左側選擇INSTALLED，連接剛才下載的Open URL，再編輯右側的URL to Open，輸入你要連結的網址就可以了。

# 💻 Variable

## Using variables
https://vimeo.com/834711344
將頁面右上角的介面從view切換到Variable：

建立一個Page Variable，這是一個可以在單一頁面使用的變數，旁邊可以設定變數的名稱、類型和內容，這邊我們將它命名為`WelcomeMessage`：

切換回View介面，選擇一個元件，點擊Content底下的圖標，選擇"Data and Variable"，然後選擇"Page Variable"，點選`WelcomeMessage`，然後按下SAVE，這樣變數內容就會成為元件的Content了；隨著變數修改，上面的內容也會跟著改變。

## Changing variables with logic
https://vimeo.com/834711408
結合邏輯元件去進行變數的修改。建立一個新按鈕，在邏輯元件的工作區連接"Set Page Variable"，設定要修改的變數，以及要填入的Assign Value。

當我們點擊按鈕時，變數內容就會改變，顯示的Text也就跟著改變。

## Two-way bound variables
https://vimeo.com/834711464
同步修改與更新變數。首先切換到Variable介面，建立一個APP Variable，設定它的名稱、格式與內容。這邊我們將它命名為`name`。

回到View介面，建立一個Text與Input Field元件，將它們的Content與Value都設定成`name`。
1. 選擇元件，點選右側Content / Value下方的圖標。
2. 選擇"Data and Variable"
3. 選擇"APP Variable"
4. 選擇`name`，然後按下SAVE。這時Text與Input Field顯示的內容，應該都一樣是`name`的內容。

此時修改Input Field的內容，Text就會同步更新。

## Page parameters
https://vimeo.com/834711539
建立一個新頁面，這邊我們將它命名為`France`。
然後在新頁面切換到Variable介面，建立一個Page Parameter，這邊我們將它命名為`parameter`：

回到View介面，將Text元件的Content設定成`parameter`：
1. 選擇元件，點選右側Content下方的圖標。
2. 選擇"Data and Variable"
3. 選擇"Page Parameter"
4. 選擇`parameter`，然後按下SAVE。


而Title元件的Content，設定成`name`。

回到Home Page，建立一個按鈕，並將Content設定為Button 1，在邏輯元件的工作區連接Open Page。Page設定為剛才新建的頁面`France`，此時**Parameter將會變成可以編輯的狀態，因為在`France`，我們有設定Page Parameter。**

這時點擊Parameter下方的圖標，選擇Static Text並任意輸入一段文字。

然後複製Button 1，修改Content設定為Button 2，再將Open Page的文字修改成和Button 1不一樣的內容：

點擊按鈕跳轉到`France`時，Title會讀取`name`，Text則會讀取按鈕中設定`parameter`的內容。

## Use sensor variables
https://vimeo.com/834711617
顯示動態的資訊，例如GPS定位、氣壓、磁場值、加速度值、角速度等。
首先，到MARKETPLACE下載"Start compass poller"，這是一個可以用來擷取指南針方位資訊的Function，圖片為下載後的畫面。

回到Home Page，添加一個按鈕，在邏輯元件的工作區，連接剛才下載的Start Compass Poller。

添加一個Text元件，將它的Content設定成Start compass poller擷取的方位數值：
1. 選擇元件，點選右側Content下方的圖標。
2. 選擇"Data and Variable"
3. 選擇"Senser Variable"
4. 選擇"Compass information"
5. 選擇"heading"，然後按下SAVE。

:::warning
理論上這樣Text就會隨時更新方位角度的數值了。奇怪的是，即使在手機預覽，數字依然沒有出現。不曉得是手機本身的問題，還是系統顯示有什麼狀況。
:::

# 💻 Data
到這邊Home Page應該幾乎全滿了，所以新建一個頁面，這邊我們命名為`America`。

## Creating data
https://vimeo.com/834711673
在最上方Menu點擊DATA，然後點擊"Create Data Entity"。這邊我們將新建的Data命名為`reminder`。

點擊ADD NEW建立新的Field，這邊我們命名為`reminderText`，Field Type選擇"Text"。

回到UI CANVAS，進入MARKETPLACE，搜尋"Create Form"並下載。然後按右上角EXIT回到UI CANVAS。

在左側選取INSTALLED欄位，將剛才下載的Create Form放進頁面。點及右側的Form Data，選取`reminder`，在Field Configuration的部分，只留下`reminderText`就好，然後點擊右上角"Save and Exit"離開介面。

這個表單的功用是「新建一筆資料」，所以我們可以增添一個Toast，讓使用者在新增資料後，可以知道它的資料已經送出。
(由於是資料建立後才提醒，所以要連接recordCreated Component。)

## Listing data
https://vimeo.com/834711767
進入MARKETPLACE，搜尋"Basic List"並下載。然後按右上角EXIT回到UI CANVAS，將剛才下載的Basic List加入頁面。

在右側 List Resource 點擊 Edit Configuration，點擊`reminder`，在Field Configuration的部分，將id拖曳到"content"和"id"，reminderText拖曳到"title"。

在"label"欄位，點擊右邊的閃電圖示，輸入`""`後按下Submit。然後點選右上角Save and Exit。

最後將右側Refresh Data改為True。這樣在用上面的表單新增資料時，下面的清單就會同步更新資料。

## Show single data record
https://vimeo.com/834711859
建立一個新頁面，這邊我們將它命名為`Japan`。然後切換到variable介面，建立一個Page Parameter，這邊我們將它命名為`reminderID`。

回到View介面，進入MARKETPLACE，搜尋"Single Record"並下載。

將Single Record加入到頁面，編輯右側的Record Data，選擇`Reminder`。

選擇Field Configuration旁邊的Properties，點選下面Record Identifier的圖標進行編輯。
1. 選擇"Object with Properties"
2. 點擊ID下方的圖標，選擇"Data and Variable"
3. 選擇"Page Parameter"
4. 選擇`reminderID`，按下SAVE。
5. 按下SAVE，然後點擊右上角"Save and Exit"


回到頁面`America`，在下方的Basic List，展開邏輯元件的工作區，連接Open Page，右側的Page設定為`Japan`，點選Parameter的`reminderID`下方圖標進行設定：
1. 選擇"Formula"
2. 選擇"Create Formula"
3. 輸入`self.tappedItem.id`，然後按下SAVE。

此時當我們點進`America`的資料清單時，就會跳轉到`Japan`，並將該筆資料id和reminderText，以清單的形式列出。

## Updating records
https://vimeo.com/834711978
來到`Japan`頁面，然後進入MARKETPLACE，搜尋"Update Form"並下載。
然後將它加入到頁面，編輯右側的Form Data，選擇`reminder`。在Field Configuration只選擇`reminderText`就好。
旁邊的Properties，點選下面Record Identifier的圖標進行編輯：
1. 選擇"Object with Properties"
2. 點擊ID下方的圖標，選擇"Data and Variable"
3. 選擇"Page Parameter"
4. 選擇`reminderID`，按下SAVE。
5. 按下SAVE，然後點擊右上角"Save and Exit"

這樣就建立好一個修改資料用的表單了。只要送出表單，該筆資料的reminderText就會修改成新送出的內容。

最後，可以在表單的按鈕新增跳轉頁面功能，並用Toast元件提醒使用者資料已被修改。

## Use REST API to list data
https://vimeo.com/834712073

:::success
1. 選擇最上方導覽列的DATA
2. 點擊SAP Build Apps classic data entities底下的"Create Data Entity"
3. 選擇"REST API direct integration"
:::

在Base的區塊，填入以下範例資訊：
| Resource ID | Resource URL |
| ----------------- | -------- |
| `User01` | https://restcountries.com/v2 |

在左側選取"GET Colletion (GET)"，並在Relative path結尾加上"/all"

在上方選取Test，點擊Run Test，只要出現"Status OK"就代表串接成功。這時**點選"Set Schema From Response"後，再點擊"Save Data Entity"**。

回到UI CANVAS，切換到Variable介面，選擇Data Variables，點擊"Add Data Variable"，選擇`User01`，這邊我們將它重新命名為`User01_List`。

回到View介面，將List Item加入到頁面，並點擊圖標設定"Repeat With"、"Primary Label"和"Seconary Label"三個欄位：

:::success
**Repeat With：**
1. 選擇"Data and Variables"
2. 選擇"Data Variable"
3. 選擇`User01_List`，然後按下Save。
:::

:::success
**Primary Label：**
1. 選擇"Data item in Repeat"
2. 選擇`current`
3. 選擇"name"，然後按下Save。
:::

:::success
**Secondary Label：**
1. 選擇"Data item in Repeat"
2. 選擇`current`
3. 選擇"alpha2Code"，然後按下Save。
:::

當出現資料清單時，就表示串接完成了。

# 💻 Formula

## Dymanic Text
https://vimeo.com/834712228
這裡先新建一個頁面，我們將它命名為`Germany`。然後切換到Variable介面，選擇Page Variable，建立兩個新變數`firstname`和`lastname`。

其中Initial Value的部分，我們將`firstname`設定為`Stephen`，`lastname`設定為`Curry`。

回到View介面，調整Title元件的Content：
1. 點擊圖標
2. 選擇"Formula"
3. 點擊Formula下方的清單按鈕(通常預設是寫著Headline)
4. 在輸入欄填入`pageVars.firstname + " " + pageVars.lastname`，然後按下Save。

之後，在頁面加入兩個Input Field元件，並調整他們的Value:
1. 點擊圖標
2. 選擇"Data and Variable"
3. 選擇"Page Variable"
4. 選擇`firstname`，然後按下Save。
5. 在另外一個Input Field執行步驟1 - 4，只是步驟4改成選擇`lastname`。

預覽的結果如下：
修改Input Field的內容，上面的文字就會同步更新：

## Simple Math
https://vimeo.com/834712331

建立一個點擊的計數器：切換到Variable介面，新增一個Page Variable，這邊我們將它命名為`Counter`，**並將Variable value type設定為"Number"**：

切換回View，設定Text元件的Content：
1. 點擊圖標
2. 選擇"Data and Variable"
3. 選擇"Page Variable"
4. 選擇`Counter`，然後按下Save。

點選下方展開Text的邏輯元件工作區，連接"Set Page Variable"，並設定它的Assign Value：
1. 點擊圖標
2. 選擇"Formula"
3. 點擊Formula下方的清單按鈕(通常預設是寫著"0")
4. 在輸入欄填入`pageVars.Counter + 1`，然後按下Save。


如此只要點擊Text元件，呈現的數字就會+1。

## Using formula functions
https://vimeo.com/834712397
使用Build Apps內建的函數功能：選擇顯示變數內容的Title元件，調整它的Content，將輸入欄的內容改成`CAPITALIZE(pageVars.firstname + " " + pageVars.lastname)`，然後按下Save：

這個函數的功能是，將輸入內容的開頭自動改成大寫：

## Use the IF function
https://vimeo.com/834712457
加入條件控制：選擇作為計數器的Text元件，調整它的Content，將輸入欄的內容改成`IF(pageVars.Counter < 1, "Click Me !", pageVars.Counter)`

如此一來，當計數器數值為0，還沒被點擊時，就會先顯示"Click Me!"的提示文字。