# Create barcode apps

1. 建立一個新的專案，這邊我們將它命名為`Barcode Scanner`

2. 專案建立完成後，先點擊空白的地方，將Page name更改為`1. Barcode Scanned`

然後點擊左上角，可以瀏覽專案中所有的頁面(Canvas)，以及目前所在的頁面。我們接下來還需要2個頁面，將他們分別命名為`2. Show Barcode`和`3. Search Table`。

接下來會個別說明每個頁面的功能，以及需要的元件和參數：

## 0. Connect REST API
>實務上要串接需要透過Barcode查詢的資料，這邊是使用[SAP Business Accelerator Hub](https://api.sap.com/)上面提供的其中一個OData API [Sales Quotation (A2X)](https://api.sap.com/api/API_SALES_QUOTATION_SRV/tryout)作為範例，裡面包含了多筆訂單資料，而我們透過鏡頭掃描讀取的Barcode，會用來查詢資料中的"Sales Quotation"欄位。

切換到Data介面，點擊"Create Data Entity"，選擇"OData integration"。


選擇Basic Authentication，輸入Username和Password。
:::warning
很遺憾，這邊牽涉到特定單位的隱私，所以不能將我使用的案例分享上來。
:::
在Base API URL貼上：`https://my414445-api.s4hana.cloud.sap:443/sap/opu/odata/sap/API_SALES_QUOTATION_SRV`，然後按下Varify URL：

:::success
出現CORS的訊息表示雖然能使用此API，但功能會因為平台而有所限制，可能無法正常顯現。
:::

打開左側的A_SalesQuotation，在Authentication type選擇"Basic Authentication"，然後在Common Request Header填入以下資訊：

| Header name | Header value |
| ----------- | ------------ |
| Account | 前面輸入的Username |
| Password| 前面輸入的Password |


接著在左側點選A_SalesQuotation下方的"list"，再選擇上方的"Test"，輸入剛才的Username和Password後，點擊下方的Run Test按鈕，如果有出現Status：OK，就表示API可以通了。


回到UI Canvas介面，切換到Variable，在左側選取Data Variable，建立一個新變數，並在右側補上Basic Authentication的Username和Password。

## 1. Barcode Scanned
>APP的首頁，需要讓使用者可以打開相機掃描條碼，或是不打開相機手動輸入Barcode；相機掃描到的Barcode會直接顯示在下一頁的輸入欄。

將1個標題(Title)和1個內文(Text)放到頁面裡，並修改裡面的Content

要讓2個按鈕並排，需要先放一個Row元件，再將按鈕放進去，這兩個按鈕的功能分別是：
* Open Camera：打開相機，掃描讀取條碼內容。
* Enter manually：不打開相機，直接切換到第二頁。


然後我們要先建立一個App Variable，將它命名為`codeNumber`，顧名思義就是要儲存Barcode的內容，並且要可以跨頁面使用，所以選擇建立App Variable。

接著，開始設定Open Camera按鈕的邏輯，但在這之前，要先去Marketplace下載`Scan QR/barcode`的邏輯元件，簡單來說就是讀取條碼的套件。

整個Open Camera的邏輯區塊如下：

==Scan QR/barcode==
不用設定，只是連接它的元件要連在最上面的節點，好像會有影響。

==Set App Variable==
1. 點選Variable name的圖示 -> 應該也只有App Variable可以選 -> 選擇`codeNumber` -> 按下Save。
2. 點選Assigned value的圖示 -> 選擇Output value of another node -> 選擇Scan QR/barcode -> 選擇QR barcode content -> 按下Save。

==Toast==
提示使用者有讀取到Barcode，在Toast message輸入"Get Barcode!"

==Open Page==
抓到Barcode後，就要立刻切換到下一頁：點選Page的圖示 -> 選擇`2. Show Barcode` -> 按下Save。

至於Enter manually的按鈕，只要加上Open Page的元件，讓它點擊後能切換到`2. Show Barcode`就好了。

## 2. Show Barcode
>這個頁面需要顯示codeNumber的內容給使用者檢查。

這一頁基本上將元件放一放就可以了。包含一個標題(Title)，一個輸入欄(Input Field)和兩個按鈕(Row & Button)，輸入欄的預設內容(Value)，設定為`codeNumber`。

* Search Table：切換到`3. Search Table`
* Scan again：回到`1. Barcode Scanned`

| Search Table | Scan again |
| -------- | -------- |
|  |  |

:::info
**Open page 和 Navigate back 的差異**

前者是"**開啟一個新頁面**"，後者是"**回到上一頁**"，效果等同於左上角的返回鍵。
如果每次都使用"Open Page"去切換頁面，
返回鍵的順序就會亂掉，且分頁過多有可能影響到程式的效能。
Navigate back回到前一頁後，就會自動將前面開啟的分頁關閉，
也可以透過參數調整要返回的頁數；
若能善用的話，操作體驗可能會比較舒適。
:::

## 3. Search Table
>這一頁我們需要用到在步驟0建立的A_SalesQuotation變數，將資料串接到表格上，並以codeNumber作為篩選條件。

首先去marketplace，下載==Basic table with data adapter==：

然後將元件放上去，兩個按鈕的功能主要是返回到第一頁和第二頁而已。在表格的部分，我們需要去設定他的Table Resource，以及將Display spinner on load和Enable sorting都設為True。

在Field Configuration的部分，勾選要顯示在表格裡的欄位，最多可以選10個。

在Properties的部分，設定Basic Authentication，輸入A_SalesQuotation的Username和Password；Filter conditions是設定表格的篩選條件，我們希望它只顯示==Sales Quotation = codeNumber==的資料。

:::warning
要注意的是，相機鏡頭與Basic table with data adapter在Web的預覽介面無法正常使用，目前只有在[SAP Build Apps Preview](https://play.google.com/store/apps/details?id=com.sap.appgyver.preview.release&hl=zh_HK)可以正常使用。
:::

按下Save，這樣APP的部分就做好了。

# Deploy on Work Zone
https://developers.sap.com/tutorials/build-apps-deply.html

## Build your App
切換到Launch介面，選擇Build your app：

在Web App下方點擊Build，選擇"MTAR"，Client Runtime Version選擇最新的版本，Version輸入一個版本號碼就好，比如`1.0.0`。

接著在Web App下方的History，他的Status一開始會顯示'created'，然後變成'queued'；等到它變成'==delivered=='就表示建立完成了。

:::info
Runtime Version理論上不會變化，上面那是兩個不同案例的截圖。
:::

點擊Deploy MTA，選擇`us10-001`的endpoint，然後按下Authorize BTP deployments。

然後選擇"**Sign in with default identify provider**"，確認全部勾選後按下Authorize。

之後在Deploy MTA的選項中，us10-001的端點就可以選擇底下的Organization和Space：

:::danger
如果選到其他端點(比如us10)，在按下"Sign in with default identify provider"後，會出現找不到Space的狀況：
:::

如果有出現Command line在跑，就表示正在部屬，當部屬完成後，就會回傳給你一串網址。

這時回到Subaccount的Instance and Subscribtions，就會多出一個`buildapps<App編號>-destination`的instance。

:::danger
**如果部屬時遇到CSRF Token not found：**
那可能就要先回去Booster，啟動"Get Started with SAP Build Apps - Detailed Account Setup"。
:::

---

## Upload to Work Zone
接下來就可以前往Work Zone Standard，首先在站點目錄(最上面的圖示)先建立一個新的站點，這邊我們將它命名為`JobCore`。

然後去Content Channels，點選右邊圖示更新HTML5 Apps的內容。

更新完後再點選左側的Content Manager，按下Content Explore，再選擇HTML5，這時就可以看到剛才在Build Apps部屬的專案。勾選後，按下右上角的Add。

回到Content Manager，就可以看到新加入的App了。

接下來，我們要讓這個App可以在Web介面上顯示與操作。
1. 在Content Manager點選Overview (如果沒有的話，就先按Create建立一個Page，將它命名為"Overview")，在應用程式的區塊加入我們剛才部屬的`Poke`，然後按下Save。
(圖片中那三個應用程式不用管它，那是其它案例要用的。)

2. 在Content Manager點選Everyone，打開`Poke`的Assignment Status，然後按下Save。

3. 在Content Manager點選Home (如果沒有的話，就先點選Create建立一個Space，命名為"Home"，裡面應該已經有內建被我們命名為Overview的Page)，打開Overview的Assignment Status，然後按下Save。

到這邊環境就設置完成了，點選左側的站點目錄，按下圖中紅色方框內的圖示進入站點，就可以看到剛才加入的`Poke`了。
:::info
如果看不到的話，點選上圖黃色方框內的齒輪圖示，將"顯示"的地方改成"**空間和頁面-新體驗**"，然後按下Save。
:::
:::warning
**點擊`Poke`進入應用程式時，可能會先看到Internal Server Error的頁面。**

目前實驗的推測是，他可能加載的非-常-慢，大約1~3天後就會正常顯示了。
:::