---
# System prepended metadata
title: Lala Lee 作品集
---
# 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
##### CICD架構
#### 模組化重構
* 將 axios 依據功能做模組化的設計
* 將 i18n 程式結構 設定成更有擴充彈性的架構
#### 研究新技術能力
* 加上 Storybook 整理元件庫，未來更易於重複使用及擴充
### 主要開發畫面
#### 航班搜尋
#### 行程管理
#### 班機時刻
#### 班機動態
## 星宇航空 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
#### 前台機務檢查系統 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理財官網 |
| -------- | -------- |
|| 
## 其他前端相關專案
### 使用 jQuery + jQueryMobile 開發
#### 野村理財通 Hybrid App (已上架)
#### 亞太電信行動客服 Hybrid App (已上架)
#### 便利資訊功能頁面 (已上架)
可依照主題配色，供各專案 Mobile App 的 Webview 串接
目前上架APP：台灣銀行、土地銀行、郵局、華南銀行、聯邦銀行
### 使用 AngularJS 搭配 Gulp 及 Webpack 開發
* 官方帳號系統 (企業內部專案)
* RWD行動網頁建置系統 (已上線)
## 社群/鐵人賽/教育訓練
### 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
### 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)