# How to build -- UI Descriptor Extractor
[Toc]

## 環境
- Git
- nodeJs
- Visual Studio Code

<!-- :::warning
### :warning: 以下方法適用於舊版的 Monitor Tool
- 新版的 Monitor Tool 已改名為 [UI Descriptor Extractor](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor.git)，請參考 [README.md](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor/-/tree/develope) 的建置步驟。
::: -->
:::warning
新版的 Monitor Tool 已改名為 [UI Descriptor Extractor](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor.git)，兩者 build 方法相同，文章仍然可用，可參考 [README.md](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor/-/tree/develope) 的建置步驟。
:::

## 1. Clone Repository from GitLab
### 1.1 前往 [GitLab](http://140.115.59.165/) 網站 [Ar Project](http://140.115.59.165/ar-project) 群組中 [UI Descriptor Extractor](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor)

:::info
方法一：前往 [GitLab](http://140.115.59.165/) 網站，從第 **`1.`** 點開始做
方法二：前往 [Ar Project](http://140.115.59.165/ar-project) 群組，從第 **`4.`** 點開始做
方法三：前往 [UI Descriptor Extractor](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor)，從第 **`6.`** 點開始做
:::

1. 前往 [GitLab](http://140.115.59.165/) 網站，登入帳號

2. 點選左上角 `Groups` 中的 `Your groups`

進入 `Your groups` 的畫面

3. 點選 `Ar Project`

4. 進入 `Ar Project` 群組的畫面

5. 點選 `Tool` 之下 `UI Descriptor Extractor`

6. 進入 `UI Descriptor Extractor` 的畫面

### 1.2 複製 Repository 的 url
1. 點擊 `Clone` 之下的 Clone with HTTP 的 `Copy URL`

### 1.3 Clone 到 local
1. 在電腦上選擇一個位置存放 local repository

2. 開啟 terminal (cmd/powershell)

powershell 的畫面

3. 在 terminal 輸入 clone 的指令 `git clone [url]`
> 需在可登入 GitLab 的情況下執行 (即 ip 是可以登入 GitLab 的)


clone 完的 terminal 畫面

clone 完的 folder

## 2. 開啟專案
### 2.1 用 Visual Studio Code 開啟 UI Descriptor Extractor 專案
1. 進入 `ui descriptor extractor` folder

2. 按右鍵選擇以 Visual Studio Code 開啟

`Visual Studio Code` 開啟專案畫面

## 3. 開啟 Backend Server
<!-- :::info
此步驟適用於新版的 UI Descriptor Extractor
::: -->

請參考文章： [如何執行 Backend Server](https://hackmd.io/@oolabsoftwarear/Sy5W_FX33#版本)，內容提到專案對應的 BackendServer 版本，請按照文章指導的方式運行。
（關於對應的 Backend Serser 版本，也可參考各專案 Repository 的 README.md 文件）

<!--
~~[如何執行 Backend Server](https://hackmd.io/@oolabsoftwarear/Sy5W_FX33)~~
**（因目前backend-server與monitor tool 版本無法相容，暫不支持該方法）**

1. 請一樣前往 [文章](https://hackmd.io/@oolabsoftwarear/Sy5W_FX33) 但只執行此項「1. Clone Repository from GitLab」
2. 切換 branch：**refactoring-model**
3. 前往 **./BackendServer/SigSpec/**
4. 執行 **generate-api-spec-and-run-backend-server.cmd**
-->

## 4. 編譯 & 執行
### 4.1 下載相關套件
1. 開啟 terminal

terminal 開啟的畫面

2. 在 terminal 輸入 `npm install`
> 需在可登入 GitLab 的情況下執行 (即 ip 是可以登入 GitLab 的)


完成的畫面

### 4.2 執行
1. 在 terminal 輸入 `npm start`

2. 執行成功的畫面
Backend Server 有執行

Backend Server 未執行 (請到 [開啟 Backend Server](##3-開啟-Backend-Server) 執行 Backend Server)