# 新芽專案

## 9Floor

https://paper.dropbox.com/doc/Working-Doc-3ggbONcJV8mbHQb136ild

**正式機**

* 連線資訊
- URL：9floor.co

**測試機**

* 連線資訊
- URL：https://9floorCo-Living.25demo.com

**Sitemap & Wireframe **

**Flow **

front：https://9floorco-living.25demo.com
backend：https://9floorco-living.25demo.com/backend
api doc：https://9floorco-living.25demo.com/backend/api/documentation

## 104 人資法寶

時程表：

https://docs.google.com/spreadsheets/d/1HsuwlbcgmiHVV-lxK3voPKo6lR7TTqDXlXLWJ5fRmJ0/edit#gid=1077778022

---

定稿 UI ：

https://drive.google.com/drive/folders/1NEGLKnuyG9AKxO69zbPHvTi_CD2dxIaD?usp=sharing

---

### 2.0 前端開發文件

## 部署相關
- demo branch 為測試機，內部開發用 https://104hrdictionary.25demo.com/
- staging branch 為 staging 測試機，客戶測試用 https://104hrdictionarybeta.25demo.com/
- master branch 為正式機 https://hrlaw.104.com.tw/
> 104 正式機需要請蘇胡手動上 aws
> master ci 成功執行完時會觸發 [aws-beanstalk-ci](https://fox.25sprout.com:10088/104hrdictionary/aws-beanstalk-ci/pipelines)
> aws-beanstalk-ci 確定通過之後，請蘇胡幫忙上到 aws 才能成功部署到正式機

## 開發相關
網站使用 react-starter 進行開發，
react-starter 架構說明可參考程式 readme https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/README.md

---

### 全站設定
[src/util/siteConfig.js](https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/util/siteConfig.js) 設定了全站 header 顯示 / footer 顯示及頁面名稱等共用設定

> - hideHeader: 隱藏 header
> - hideFooter: 隱藏 footer
> - pageName: header 上顯示的頁面名稱
> - withSearchBar: header 顯示 search bar
> - withHotSearch: 顯示熱門搜尋關鍵字
> - socialShare: 分享設定
> - withNavigation: 顯示 navigation (搜尋頁上子分類那排)
> - canScrollToTop: 顯示滑到頂端的按紐

---

### 全站共用的 layout (Page / SplitedPage)

104 hr 網站除了首頁外，大部分頁面都具有相似的版型，
而且都需要處理 loading / error / searching / not found 等狀態
所以開發上使用 `Page` 和 `SplitedPage` 兩種 layout 處理每個頁面相同的部分

#### Page Layout
Page (/src/layouts/Page) 為單一區塊 layout
支援 Content 和 Filter 兩種 component 作為參數
> - Content 是頁面內容的主體，是必需的參數
> - Filter 是資料內容上方的篩選器，不是必要的參數，如果頁面不需要 filter 可以不帶

並且支援 `normal` `loading` `searching` `notFound` `error` `noData` 六種狀態，預設為 `normal`
> - normal: 顯示參數 Content 的內容
> - loading 顯示 "資料讀取中" 畫面
> - searching: 顯示 "搜尋中" 畫面
> - notFound: 顯示 "找不到符合搜尋字詞" 畫面
> - error: 顯示 "系統忙碌中" 畫面
> - noData: 顯示 "目前沒有資料" 畫面

使用範例可以在 storybook 中查看

#### SplitedPage Layout
Page (/src/layouts/SplitedPage) 為左右兩區塊畫面的 layout
支援 Left / Right / Filter / Bottom 四種 component 作為參數
> - Left 是頁面內容的主體，是畫面的左邊部分，是必需的參數
> - Right 是畫面的右邊部分，通常是相關推薦內容，也是必需的參數
> - Filter 是資料內容上方的篩選器，不是必要的參數，如果頁面不需要 filter 可以不帶
> - Bottom 是頁面下方的內容，通常是 104 外連連結，不是必要的參數，如果不需要可以不帶

和 Page 一樣支援 `normal` `loading` `searching` `notFound` `error` `noData` 六種狀態，預設為 `normal`
使用範例可以在 storybook 中查看

---

#### 全站共用的 component InfinityContentHOC
104 所有的列表頁都有 scroll 到頁面底端讀取更多資料的需求，
所以這部份抽離成 HOC 處理。
InfinityContentHOC 接收要無限延長的小單位 Component 作為參數，
以及幾個 props `className` `data` `pageLoading` `canUpdate` `updating` `updateData` `parentProps`，
> - data: InfinityContent 要顯示的所有資料內容，是一個 list
> - canUpdate: 控制當使用者滑到頁面底端時，能否讀取更多資料的 boolean
> - updating: 顯示資料更新中動畫的 boolean
> - updateData: 讀取資料的 function (當 canUpdate == true 且使用者滑到頁面最底端的時候會觸發)
> - parentProps: 要傳遞給 data component 的 props

可以搭配 redux 控制 InfinityContent 的資料讀取。
使用範例可以在 storybook 或 [WritingList 實際使用範例](https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/components/organisms/WritingList/index.js) 中查看

---
### 第三方資料處理
法律和知識資料結構非常複雜，資料處理可以參考底下三個檔案
- [src/actions/search.js](https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/actions/search.js)
- [src/actions/knowledge.js](https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/actions/knowledge.js)
- [src/actions/law.js](https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/actions/law.js)
- [src/util/law.js](https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/util/law.js)

---
### 搜尋資料 highlight
搜尋結果需要對關鍵字進行 highlight，後端應該會將關鍵字以 `<span class="highlight"></span>` 的方式帶資料給前端
如果資料比較複雜，如法律 / 知識這類資料，
後端沒有對關鍵字進行包裝的，
可以使用 util/search 中的 `resolveKeyString` 和 `checkMeetKeyword` 進行處理
範例可以參考 https://fox.25sprout.com:10088/104hrdictionary/website/blob/demo/src/actions/search.js#L108

---

### 推播
[FCM](/gmwatue6Q-CLqDlDorFmRg)

### 效能議題
[效能議題](/ZNlt329gSNi3yVL4kybEmg)

## 25sprout-201812-projectmatracking

### 網址
google sheet: https://docs.google.com/spreadsheets/d/1JZvHQi5bLqex0iNb9WCUScBLCrLSAXPb6A1F-Ld0jjw/edit#gid=0 <br>
gitlab issue: 無權限進入，網址問PM <br>
問卷: https://25sprout.surveycake.com/s/Kp0dA <br>

### 環境

1. 進到 google app script 的 [dashboard](https://script.google.com/home)，然後登入公司的 Google 帳號，最後請 Lee 把專案加入到你的帳號內，就可以在下圖中看到 **PM MA Tracker 測試**

2. 進入程式碼修改

> **程式碼.gs** 可以看成 **index.js**，**doPost()** function 在Google App Script中是整個程式碼的進入點

> 每隻檔案的 function 宣告是 global的，顧名思義，**程式碼.gs** 的 **doPost()** 不需 export，**testing.gs** 也不須 import **doPost()** 函式，**doPost()** 就可以在 **testing.gs** 中呼叫

3. 修改完程式後要測試，**testing.gs** 有 4 支methods 可以跑專案的測試

或是可以用 Postman 測試 api，當call一次api，google sheet就會新增一筆資料，PM的 gitlab project wall也會新增一筆 issue

4. 確認無誤就部署


### User Story
PM的專案每次結案時要記錄客戶的方案與報價支橫的資料，所以PM會透過此系統上傳資料

1. PM填問卷 -> 送出
1. 問卷 call Google App Script 的 API(其實就是部署完拿到的網址)
1. Google App Script 處理問填答的資料，並送資料到對應的 Google Sheet
1. Google App Script 會透過我們撰寫的落籍去判斷要新增資料在 MA sheet 還是 主機&網域 sheet 還是 兩個 sheet都要新增
1. Google App Script 同時也會 Call gitlab api 去發 issue 到特定的專案，issue 的 label、內容、排版都是由程式控制

Ex: 程式判斷PM在問卷想新增一筆MA資料


## 元祐

https://yuanyu.25demo.com/
Header Navi 與 footer Navi 滾動到特定section
多國語系處理
Banner串接Youtube API 做輪播，透過後台控制輪播放的是照片還是圖片
Histroy section: call api 做輪播，難在動畫效果，timeline要保值第二個點是active，會自動數秒數跑圈圈條，打斷時計時器(按按鈕/按dot)要重來，每個年份的事件是動態的，可能一個或兩個，所以在action那邊設計了很多事件跟Edge case處理

## 91App
https://apitest9.91app.com/virtual-try-on/
串接 91 API
顏色的排序
完美相機處理好照片檔案截圖，分享到FB，還要加上浮水印logo
效能issue
手機上底較不能正常work

## automation 串接
Ex: beanfun：做一頁式網頁，嵌入到App webview，手機上點擊填寫物卷，
要把會員資料跟ssid帶入surveycake做自動填寫欄位，過程中要處理加解密，要處理一些畫面像是RSA，到問卷中若少資料會有錯誤畫面，送出問卷後又成功畫面

#### 純HTML/CSS/JS切版某一格section
ACER

#### 賽諾非

### 專案架構


### 開發專案流程

1. clone 專案

git clone [e-mail]:sanofi/sanofi_easiscore/web.git

2. install 專案

yarn install

3. 起動 server，本地開發

yarn run serve

> http://localhost:9090

### 部署應用程式流程

1. 安裝 clasp

npm install -g @google/clasp

> https://github.com/google/clasp

2. 用以下指令登入 專案對應的 google 帳號

 clasp login

3. 檢查 clasp id 是否跟專案符合，符合才部署到對應的空間

**.clasp.json**

{"scriptId":"1aJUbevgT7CQDIeFHPkaDpiCJh8o2e8fQB68xKzNGTvGlCuqlk1BaK2kN"}

4. 執行部屬

npm run deploy


> 最後 command line 會報錯，那個不用理它，不影響部署

5. 進到 google app script 的 [dashboard](https://script.google.com/home)

6. 進到程式碼平台，部署裡面已經被打包過的程式

7. 版本每次都要按新增，下面選公開(這樣進到你網站的人都不需要被強制先登入Google，才可以瀏覽網站)

8. 取得網站網址

#### 補充 - 查找專案的clasp id


### 部署程式到 Google App Script 有發現的地雷

- scrollTop 無法使用，因為前端被嵌入在 google 的 iframe 內
- 上傳的程式碼只接受副檔名是 .html 跟 .gs(js也可以)
- 無法部署其他圖片等靜態檔案，所以圖片只能雲端用連結代替
- google app script 的寄信功能因為有夾帶檔案的部分，會被google認定為可疑檔案，造成google帳號被鎖
- RWD 必須由小寫到大，跟平常開發專案由電腦版開發到手機版不一樣
- 部署後，因為適用google的網址服務，所以前端被嵌入在 google 的 iframe 內，有一欄 灰色的 Bar 是無法被移除的

### 上正式機注意事項

因為正式機網站有兩個，一個是正式使用，一個是備用

- 移除Header 的 UAT 字樣



- 更換 banner 圖片(**components/Home/banner.vue 18行**)

黑白 banner: https://s3-ap-northeast-1.amazonaws.com/sanofi.surveycake.com/asset/pic/2019-11-07-04-55-51-43207ddd1d6da2e8c3f4728cad6a19b7.png

彩色 banner: https://s3-ap-northeast-1.amazonaws.com/sanofi.surveycake.com/asset/pic/2019-10-14-06-55-47-a93525992c75a11cee708cc7089c8db3.png

- 更換對應的寄件者email跟副本email (**client/util/rawMailBody.js 2 & 4行**)
- 更換對應的 google sheet 網址接口 (**server/src/api.js 18行**)
- 更換clasp id (**.clasp.json**)
- ga code
- 升級 Footer 的版本號

> 詳細上正式機的注意事項相關資訊看這: https://fox.25sprout.com:10088/sanofi/sanofi_easiscore/pm_sanofi_easiscore/-/issues/252

### Google App Script 基本語法

### AWS SES

[AWS連結](https://sanofi-25sprout.signin.aws.amazon.com/console)

- 登入帳號密碼找 DevOp 申請
- AWS Lambda 的 Code 放在 [Decoder](https://fox.25sprout.com/sanofi/sanofi_easiscore/decoder) 做備份

Step 1. 選定 Lambda 服務
Step 2. 在 Lambda 上開啟函式
Step 3. 修改 api 內容，儲存 / 測試

### Reference

- [AWS SES 文件](https://aws.amazon.com/tw/premiumsupport/knowledge-center/lambda-send-email-ses/)
- [SES 語法 - SendRawEmail](https://docs.aws.amazon.com/ses/latest/APIReference/API_SendRawEmail.html)
- [Building Single Page Apps on Google Apps Script](https://blog.gsmart.in/single-page-apps-vue-bootstrap-on-google-apps-script/)
- [參考範例Demo](https://script.google.com/macros/s/AKfycbylsxNmt7PKk_zsqdCvnsw9KUH4rxxHFWYIqHPw3uoMLMkXqQ4/exec)
- [參考範例程式碼](https://script.google.com/d/1x-TuR2Q3erubSjF67nty_01pEpUTKUr2Z_qje27fhNM3_F9CMAWjsQPX/edit?usp=sharing)