Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

[五載復相逢,軟體二三事] 印刷 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/

Sam Huang (sailplaneTW)

June 16, 2021
Tweet

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