[五載復相逢，軟體二三事] 印刷 ERP 電商開發 - GatsbyJS 使用分享

Medium Post : https://revteltech.pse.is/hiprint-medium-from-speakerdeck

---
忻旅科技：https://www.revtel.tech
開發分享：https://medium.com/revtel-tech

奕果雲端數位：https://www.eculture.tech
---
產業升級及轉型是個老生常談的話題
擴充銷售渠道到線上是個很直覺的做法
但不同業態的電商差異頗大
一旦牽涉到 ERP 就往往難以收尾
這裡我們會分享一下開發印刷業系統的經驗
此外也會分享 GatsbyJS 這個框架
結合他的特性打造良好瀏覽體驗的客製系統

延伸分享 - 理想印制 https://www.lixiangprint.com.tw/

Transcript

1. 印刷 ERP 電商開發 GatsbyJS 使用分享 RevtelTech Sam 五載復相逢，軟體二三事
2. 五載復相逢，軟體二三事 - 以分享來試著替自己的一些過往經驗做個小結 可能的題材：React Native / 軟體規劃開發 重點比較不完全在技術上 - 比較想聊聊技術/管理/領域/商業上的平衡 - 只是一家之言，也未必是最佳解 活動緣起
3. 理想印制 LixiangPrint 提供客製化陶瓷杯墊、客製化珪藻土杯墊、客製化珪藻土地 墊、客製化提袋、客製化抱枕、客製化馬克杯、客製化扇子、名 片印刷、海報輸出、大圖輸出、各式卡片印刷等服務。杯墊紙 盒印刷、晶透浮雕上光等印刷特殊加工皆可完美處理!
4. Agenda 03 背景介紹 公司 / 個人 01 02 04 05 06 專案概述 理想印制整體介紹 開發分享 架構及流程 議題討論 開發過程中的一些思考 總結 簡單結論 Q&A 問題回答
5. 背景介紹 01
6. 專注在系統的規劃跟開發，跟 domain 對接做商務的探索 ( https://www.revtel.tech ) - 自身 domain - 好咖嚴選 Hecafe - https://hecafe.com.tw/ - 區塊鏈 x IoT NFC solution - 台製NFC冷錢包「Inigma」 - 奕果雲端數位 HiPrint - 客戶 domain - 電商、醫療、金融及旅宿等超過十個業態 - 提供「顧問諮詢」「開發執行」「維運協力」 - Web / APP / IoT / BlockChain Open Source - ReactConf.TV - video collection by React https://reactconf.tv/ - NFC on React Native - react-native-nfc-manager / react-native-nfc-rewriter 忻旅科技 RevtelTech
7. 忻旅科技共同創辦人 - 工程師 / 技術管理 / 公司營運 - 嵌入式系統 / Web / App / BlockChain - 開放式嵌入式課程 - Firmware Development - Linux / Android Platform - Android Native APP - Angular / React - Cordova / React Native - BlockChain - 近年比較常協助技術規劃及 產品設計 (有些分享在 https://medium.com/revtel-tech ) Sam Huang
8. 專案概述 02
9. 亂入一個聚會認識了從事印刷業的前輩而開始這個合作 - 印刷業可能是傳統產業，但未必是夕陽產業 - 確實有行業先行者以產業轉型成功，取得重大成功，如健豪雲端數位網 理想印制 - 業內老字號 - 全客製來打造隨選產品 → 升級到線上銷售模式 印刷產業升級/轉型
10. 電商？不只是電商？ - 電商往往只是 ERP 的一個延伸 ( 為什麼適合自己的電商系統這麼難找？ https://pse.is/revteltech-why_choosing_ec_is_difficult ) - 內在邏輯複雜，不同於一般電商。如商品及審稿 最終整套系統包含以下部分 - 消費者下單之 RWD 前台：涵蓋會員 / 購物 / 部落格等邏輯 - 營運團隊使用的後台：涵蓋稿件製作 / 物流管理 / 退貨金流等邏輯 - 工程團隊使用的後台： raw data 層級協助後續營運開發 - Restful API interface：為未來更完整數據分析及 APP 開發等打基礎 功能概觀
11. 邏輯真的跟一般電商系統差異大太，乾脆從頭搭建 - 開發至今約一年半，中間還經歷計價模型重構 - 系統逾半年前上線，持續精進改善中 - 成立「奕果雲端數位」協助印刷行業上下游進行轉型 開發成果
12. 開發分享 03
13. 系統架構 前端 (GatsbyJS / CDN) - EC 網 - Dashboard 後端 (AWS) - Microservice - App Server Admin - App Server 用
14. 第一次聽到我猜百分之九十的人是想到這個 ... Gatsby 介紹
15. 基於 React 的一套前端框架，幾個有趣的特點 - Static site generation：甚至能直接在 github 部署 - 整合多種資料源，markdown / graghql 等 - 套件生態系完整，如 gatsby image - 多元的 starter project 適合哪些人 - 想快速搭建部落格等邏輯比較單純的網站 - 很要求網站效能 方案成熟度 - 目前 github 50.5 k star - 2019 年 15 M 的 A 輪募資，2020 年 28 M 的 B 輪募資 - 已經不只是靜態框架，目前已經從前端框架往後一直演變成包含雲端平台 - build / host / cloud functions GatsbyJS
16. 問題：我們是怎麼決定資料該放在哪一層的？ - 電商：Logo / User Profile / Product List + Detail JamStack = Pre-rendering + Enhancing with JavaScript + Supercharging with services - 網站：由 SSG 靜態建制，託管至 CDN - 資料：建制時期拉取資料，和 Headless CMS 等技術搭配 - 擴充：跟微服務等架構整合 ⇒ 幾個技術特性 - 前端無 server - 安全性較高 - 架構朝低耦合方向走 JamStack
17. 我們的技術迭代方式 - 原則：觀察去年、前年被驗證的技術，對應到需求上做比較 - 過程：在開發方案中設法沈澱，低耦合的開發架構一直都是我們的課題 - 搭建自己的 service farm，eg. Auth / Push / Blog / Payment / ... - 考慮技術的泛用性， APP / Web / ... GatsbyJS - 大概以此搭建過 15 個方案以上，含電商 / 部落格 / 官網 / 影音管理 / … - 整合 netlify 方案做到全自動部署及測試 - Open Source Project - ReactConf.TV - https://reactconf.tv/ Revtel with GatsbyJS
18. 主要問題在於如何掌握商務邏輯：系統 = 人 + 軟體 - 需求對齊的困難：你不會知道你不知道的事情 - 比如一些涉及第三方服務是否該處理 error handling 或紀錄 - 解法對齊的困難：你不一定知道別人可能不知道的事情 - 比如一些捷徑功能的設計 從以下兩點設法處理 - 技術選型：利用目前架構降低困難 - 設定好 CICD，提早驗證 - 業務邏輯盡量打散到 microservice - 一些變數的設定多考慮 build time 的分責 - 開發模式：揉合 waterfall 及 agile 的想法居中調整流程 開發大原則
19. 問題：設計電商系統 內的品項計價模型 - 前台 EC 站要能夠試算，且可能的多數流量來自此模組 - 參數極多，不同品項間計價差異大（如零售及杯墊就很不同） - 後端價調整頻繁，且有一次大量修改的可能（如因為原料商成本改變） - 系統具有紅利及運費折抵的功能 方向： - 將計價功能拉成獨立 microservice，並用 testcase 確保前端整合沒問題 - 拉出 spec 層用以統合各種可能算法，最後發覺有七八種算法 - 部分 spec 資訊抽象化出來讓前端做畫面編排參考 - 營運上的商品修改支援 excel 及 dashboard 修改兩種方式，以雙格式達到上資料的最佳化 - 開發流程上在一開始就需要先將這七八種算法固定下來，藉以收斂可能之外溢 - 不夠完善的地方由協作流程來補齊 舉例：價格計算模組怎麼設計
20. Gatsby 本身 - gatsby-config.js / gatsby-node.js / gatsby-browser.js / gatsby-ssr.js - 最後編譯完的靜態檔案在 public/ 擴充 - 圍繞在 gatsby-node 周邊搭建自己的 plugin system … build time 擷取 - 搭配 node 的（如 index.js / packge.json）做 config 的配置 - 搭配自己的 script 工具：如靜態資訊的複製 - 商品資訊上傳後會觸發系統重新編譯（整合在 dashboard） - 但要人為放行 - 有問題時可以退版 System Overview
21. Source
22. Netlify
23. 議題討論 04
24. 技術導入重點在於思考方式及文化的改變而不完全在技能上 - JQuery → Angular → React / Vue ⇒ React vs. React Native - IAAS / PAAS / SAAS 盡量用「架構」而不是「工程」來解決問題！ - Build time：可以讓很多事情「優雅的」脫離 Runtime - 效能 / scalability - 由思考「資料」在哪產生的內在討論 - 如 Infra / project 技術導入的後續影響
25. 一言以蔽之，重要但非必要 很大部份是工程問題，但做什麼、做多少卻沒標準答案 - 做什麼：問題如何定義及技術特性 - 做多少：資源考量 ⇒ 是個持續性工程，需設法掌握每件事的天花板 專案實踐：分階段性進行導入 - 開發階段 - 有意義之 URL 的設計 - Static site generation 對 seo 友善，於 Build time 取得頁面資料時一併產生 - GA ec module - 營運階段： - 持續調整：每頁的 API 組成 - 營運優化：其他客製化事件 - GA / SEO 的思考
26. 總結 05
27. 邊界定義 重點在於後面的心法導入 技術選型 不要追求一次性完成 架構導向 設法以架構而非工程解決問題 總結
28. Q&A 06
29. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. Please keep this slide for attribution. THANKS Does anyone have any questions? https://www.revtel.tech https://www.facebook.com/RevtelTech