# Lala Lee 作品集

## 星宇航空官網 (Nuxt/Vue2)

星宇航空官網：https://www.starlux-airlines.com/

主要負責動態頁面開發，包括：航班搜尋/行程管理/班機時刻/班機動態

### 專案技術重點

#### 使用 Nuxt 結構


#### Web Accessibility (a11y)

* 為因應美國航線，前端開發需符合 W3C 制定之 WCAG(無障礙網頁內容標準規範)
* 利用role及aria-*屬性定義出讓ScreenReader能獲得完整語義資訊做出正確的報讀。

#### 內容管理及多國語系

* 串接 SDL Tridion Sites 做為內容管理系統(CMS)
* 多國語系官網1.0使用Lokalise，2.0則使用SDL提供的Restful API，搭配 Nuxt i18n。

#### 介面設計

* UI Framework 使用 Tailwind(Utility-First)，搭配Vue的Component System概念，易於開發出隨插即用的畫面元件。

#### 上版流程

* 團隊有自己的Git Workflow，dev/uat/master分支對應於部署環境，使用Jenkins/ArgoCD 實現CICD

##### Git Workflow


<div style="page-break-after: always;"></div>

##### CICD架構


<div style="page-break-after: always;"></div>

#### 模組化重構

* 將 axios 依據功能做模組化的設計
* 將 i18n 程式結構 設定成更有擴充彈性的架構


<div style="page-break-after: always;"></div>

#### 研究新技術能力

* 加上 Storybook 整理元件庫，未來更易於重複使用及擴充


<div style="page-break-after: always;"></div>

### 主要開發畫面

#### 航班搜尋


<div style="page-break-after: always;"></div>

#### 行程管理


<div style="page-break-after: always;"></div>

#### 班機時刻


<div style="page-break-after: always;"></div>

#### 班機動態


<div style="page-break-after: always;"></div>

## 星宇航空 Email 版型專案 (Vue)

此專案是維護現有專案，交接到我手中後加上了自動化的處理，未來只需專注於版型開發即可

### 交接前人工作業說明

雖然已用Vue做出共用元件做切版開發，但還是有人工作業的地方可以做優化
* 輸出純HTML時要手動打開Render後的HTML，轉存一份
* 再使用VSCODE的CSS INLINE外掛把外部樣式檔插到每個元素的inline style
* 再手動發信給自己確認是否符合使用者需的設計

### 交接後使用Gulp+Node做以上流程的自動化

* gulp html-render 使用 puppeteer 自動render及轉存
* gulp html-inline 使用 gulp-inline 自動完成
* gulp html-sendmail 使用自己開發的sendmail程式自動完成寄信
* 以上流程用一次指令完成，集成為 gulp-outputs，使用參數來指定功能

gulp html-outputs --filepath '在assets/jira下依照JIRA單號生成的html檔案' 

// --filepath 必需要指定，否則無法生成對應的檔案
// --env 不指定的話，預設產出dev檔名，圖檔對應img-dev
//   若要正式環境圖檔則要指定 --env 'prod'
// --sendmail true 不指定的話只會產生檔案不會一併發mail
//   如果有指定會依據mailConfig的資訊，使用sendmail程式做Mail發送
// --subject 不指定的話會使用 js/mail/mail-config 內的subject
//   要自訂則使用 --subject 'Your Mail Subjects'

**我就懶，一鍵搞定**

使用 inquirer 自製可讓使用者與命令列互動的腳手架產生功能

npm run generate:edm


## 長榮航空機務無紙化操作系統(Angular)

### 機務檢查紙本表單

https://masco.com.lb/wp-content/plugins/documents/A320%20PREFLIGHT-TRANSIT.pdf

### 機務無紙化操作系統

#### 後台上稿系統 wireframe




<div style="page-break-after: always;"></div>

#### 前台機務檢查系統 wireframe

| 航班列表 | 機務檢查表單 |
| -------- | -------- |
|| 

#### FrontEnd 前端技術點

* 航機檢查作業的執行方式分為有線及離線
* 無論是在 RWD 還是 App Webview 上操作，都是同一套網頁內容。
* 在 RWD 網頁 是呼叫 API 存取資料
* 在 APP Webview 是呼叫 Native 存取資料
* 雖然呼叫的對像不同，但透過自行開發的 AppUtil 中介服務
包裝成統一的Observable Callback。
* 實作細節可參考 [FrontEnd與Native的串接](https://hackmd.io/p5Bn8mRsQGGnSMDSWSJ1gg)

this.appUtil.requestLocation().subscribe(position => {
    // RWD是使用 HTML geolocation，Webview 是呼叫APP回傳經緯度
    // 元件在使用AppUtil時，不需要知道其呼叫的對像皆可得到一致的結果
}

* 按下「Check And Sign」，會驗證輸入內容。(後台上稿的Condition)

## 野村投信 (Angular)

野村系列六大網站 (已上線)

* 野村官網：
https://www.nomurafunds.com.tw/Web/Content/
* ROBO理財官網：
https://www.nomurafunds.com.tw/Web/RoboContent
* 野村交易網（需登入)
* ROBO理財交易（需登入)
* 官網、交易網 後台上稿系統 (企業內部使用)
* ROBO理財官網、交易網 後台上稿系統 (企業內部使用)

> 共用元件及服務 使用 Git Submodule 做模組共享
> 此主題有分享在 2017 Angular Taiwan 社群小聚

| 野村官網 | ROBO理財官網 |
| -------- | -------- |
|| 

<div style="page-break-after: always;"></div>

## 其他前端相關專案

### 使用 jQuery + jQueryMobile 開發

#### 野村理財通 Hybrid App (已上架)


#### 亞太電信行動客服 Hybrid App (已上架)


<div style="page-break-after: always;"></div>

#### 便利資訊功能頁面 (已上架)

可依照主題配色，供各專案 Mobile App 的 Webview 串接

目前上架APP：台灣銀行、土地銀行、郵局、華南銀行、聯邦銀行


### 使用 AngularJS 搭配 Gulp 及 Webpack 開發

* 官方帳號系統 (企業內部專案)
* RWD行動網頁建置系統 (已上線)


<div style="page-break-after: always;"></div>

## 社群/鐵人賽/教育訓練

### Angular Taiwan / Angular 線上讀書會

### 2017 COSCUP Workshop Angular

https://forum.angular.tw/t/coscup-workshop-angular/466

### 2017 Angular Taiwan 社群小聚

[https://2017.angular.tw/#schedule](https://2017.angular.tw/#schedule)


{%youtube aePF-YSfiDM%}
https://youtu.be/aePF-YSfiDM

<div style="page-break-after: always;"></div>

### 2020年第12屆iThome鐵人賽 佳作 - 玩轉 Storybook

https://ithelp.ithome.com.tw/users/20130417/ironman/3608


### 教育訓練

＊ 多次公司大型內訓 Angular框架 開發實務 （每次參與人數：20人）
＊ 昇恆昌教育訓練 Angular框架開發實務（參與人數：5人）

#### Angular教育訓練教材整理

* [Angular框架開發實務 教育訓練](https://hackmd.io/@lala-lee-md/angular-workshop-4)
* 第一堂：Angular環境、TypeScript&ES6、Component、Data Binding
* 第二堂：Component Interaction、Directives、Pipes、NgModule
* 第三堂：Service、Routing
* 第四堂：RxJS、Form、Lifecycle Hooks
* [Service Worker 概念篇](https://hackmd.io/@lala-lee-md/service-worker-basic)
* [FrontEnd 與 Native 的串接](https://hackmd.io/@lala-lee-md/FrontEnd2Native)