Self introduction
王琪驊 (Emily Wang)
About Me
--- 持續學習、自省
4+ 年以上的網頁前後端開發經驗,曾參與開發 BIM / 影音電商 SaaS 服務 / IS 工具等,並熟悉 Scrum 開發流程
2 年以上程式教學經驗,進行超過 30+ 位學員一對一諮詢
擅長跨部門協作,具備良好的團隊合作與溝通表達能力,並且熱愛透過技術解決問題

專案簡介
鋼構設計流程自動化
曾在外部讀書會分享於此專案上應用 design pattern ,相關的說明與 sample code 請見此:Design pattern 在專案上的應用 (slides.com)



結構分析軟體
BIM 整合軟體
鋼接頭檢核軟體
Data Standardlization
Via API
ref:
https://bit.ly/3e58D9I; https://bit.ly/3gTVIJt; https://bit.ly/3aUQglT
- Mainframe
- Coordinate
- Connection
專案簡介
Lodestar 內容商務系統
我在目前公司主要是做 SaaS 系統的功能擴充與開發,應用程式的核心架構分為前台、後台與後端,前端 repo 皆為開源專案
後端的部分,我參與了多個外部系統串接的需求,主要的架構設計為使用 class 封裝外部 api 的操作 (詳見下頁
class PaypalClient {
appId: string
dryRun: boolean
environment: any | null
constructor(appId: string) {
this.appId = appId
this.dryRun = Boolean(process.env.NODE_ENV !== 'production')
}
public setup = async () => {
// ...
}
public createOrder = async (orderDetails: CreateOrderRequestBody) => {
// ...
}
public captureOrder = async (paypalOrderId: string) => {
// ...
}
}跨境金流 PayPal 串接
// ...
const host = await getAppHost(appId)
const paypalClient = new PaypalClient(appId)
try {
await paypalClient.setup()
} catch (error) {
return res.redirect(`https://${host}/orders/${orderId}?code=E_SETUP_PAYPAL&error=${error.message}`)
}
// capture order
let capturedOrderResponse: OrderResponse | any
try {
capturedOrderResponse = await paypalClient.captureOrder(paymentId)
} catch (error) {
return res.redirect(`https://${host}/orders/${orderId}?code=E_PAYPAL_CAPTURE&error=${error.message}`)
}封裝外部 api 之 Client class
在 controller 內使用 client
外部 CRM 串接
class VitalClient {
appId: string
private _baseUri: string = ''
private _storeName: string = ''
private _apiKey: string = ''
private _apiBaseCaller: AxiosInstance = axios
constructor(appId: string) {
this.appId = appId
}
public init = async () => {
const appModules = await getAppModules(this.appId)
if (!appModules.includes('vital_crm')) {
throw new Error(`app: ${this.appId} did not support vital crm. Please add vital_crm module`)
}
// ...
this._baseUri = 'https://www.videgree.com/' + this._storeName
this._apiBaseCaller = axios.create({
headers: {
Authorization: `ApiKey ${this._apiKey}`,
},
baseURL: this._baseUri,
})
}
private _composeMemberData = (memberData: { email: string; name: string; id: string }) => {
// ...
}
private _composeOrderData = (orderData) => {
// ...
}
public insertMember = async (memberData: { [key: string]: any }) => {
// memberData to vital req.body
}
public updateMember = async (memberData: { [key: string]: any }) => {
// ...
}
public insertOrUpdateOrder = async (orderData) => {
// ...
}
}封裝外部 api 之 Client class
// ...
private static _handleMemberInsertOrUpdate = async (event: TriggerEvent) => {
// get app Id if there have vital_crm module
const appId = event.data.new?.app_id
const appModules = await getAppModules(appId)
if (!appModules.includes('vital_crm')) return
// get vitalClient
const vitalClient = new VitalClient(appId)
try {
await vitalClient.init()
} catch (error) {
throw new Error(`vital Client init failed: ${error.stack}`)
}
const newMemberData = event.data.new || {}
const vitalCustomerNo = newMemberData?.metadata?.vital?.CustomerNo
// insert
if (!vitalCustomerNo) {
await vitalClient.insertMember(newMemberData)
return
}
// update
await vitalClient.updateMember(newMemberData)
}外部 CRM 串接
在 event trigger 內使用 client

公司內部 code review,由我畫系統架構圖,並與 scrum team 講解目前的架構
Thank you!
Any Question?
self-introduction-v3
By Emily W
self-introduction-v3
- 152