印刷業專屬電商 HiPrint 開發分享— 以 GatsbyJS 打造高速 ERP / EC

閱讀時間約 4 分鐘
投影片:https://revteltech.pse.is/lixiang-hiprint-sharing
理想印制:https://www.lixiangprint.com.tw
奕果雲端數位:https://www.eculture.tech/
奕果雲端數位 fb:https://www.facebook.com/EcultureTech/
2021 年中開始台灣面臨了嚴峻的疫情挑戰,大家的活動範圍突然被限縮到很小。在這個情況之下來點線上交流似乎是個不錯的選擇。
這次分享內容是關於之前打造的高速客製化電商 — 理想印制 ( https://www.lixiangprint.com.tw )。在往下看之前大家可以體驗一下網站的速度~
這篇文章我們擷取了一部分的講座內容,以此作為一個紀錄。
理想印制|客製你的理想|一件也能做

活動緣起

正逢公司成立近五年,「五載復相逢」也是個機會跟自己的初心說說話了挑。選了一些議題來整理,以印刷轉型打頭陣似乎是個好選擇。
但不知怎的直播設定很不順暢,原訂七點半開始的活動硬生生八點才開始。對有來參加活動的觀眾感到抱歉,手忙腳亂的耽誤了大家的寶貴時間。
感謝大家不離不棄的沒拋棄我們

系統概觀

簡單介紹一下理想印制,主打高度客製又追求在品質及價格間取得平衡。 如果大家有客製禮品的需求挺推薦他們的。這個合作上除幫他們開發了新電商系統之外,亦成立奕果雲端數位來協助印刷業轉型。
整個系統我們包含了
  • 消費者下單之 RWD 前台:涵蓋會員 / 購物 / 部落格等邏輯
  • 營運團隊使用的後台:涵蓋稿件製作 / 物流管理 / 退貨金流等邏輯
  • 工程團隊使用的後台:raw data 層級協助後續營運開發
  • Restful API interface:為未來更完整數據分析及 APP 開發等打基礎
粗略的系統架構如下
前端站全站緩存以追求高效能需求

JAMStack — Pre-rendering + Enhancing with JavaScript + Supercharging with services

先談談 JAMStack。JAMStack 是一種建構網站的方法,它拉近了靜態網站與 SSR 之間的功能差距,同時保持了靜態網站高性能、低成本、高安全性的關鍵優勢,同時也保有了非常好的開發者體驗。
所以一個標準的姿勢是,藉由 SSG (Static Site Generation,如 GatsbyJS)讓前端站為靜態,如此一來可以做到全站緩存、無前端 Server。並在靜態站產生時期將所需的資料抓進來(可透過 GraghQL、Restful API、Markdown 等各種形式)。執行時期再跟 microservice 等架構做互動
這裡有個滿重要的問題是「編譯時期 (build time) 你能做哪些事?」,假如設計得當,你的網站系統就能取得很優異的效能。想像一下,對電商來說,如果在每次商品變動後都編譯一次網站,那你的站幾乎在任何時刻都是靜態的。所謂的動態,在一定程度上就是連續的靜態改變

System Arch = GatsbyJS + MicroService

在 JAMStack 的思維之下,我們以 GatsbyJS 讓前端變成全靜態站,並將如價格試算等邏輯放在 MicroService 中以處理可能的流量變化。在開發過程中我們也搭配 Netlify 做到全自動的 CI/CD,如此一來能很有效的讓 Aigile 在執行時沒有阻力。
雖然是開玩笑的圖,但適當時候讓用戶測試也是有意義的
此外我們未來也預期將系統做重複販售,所以也圍繞在 gatsby-node 周邊搭建了自己的 plugin 系統。這使一個新的 instance 能在設置完參數後在幾分鐘便部署完成。

盡量用「架構」而不是「工程」來解決問題

當我們導入一個新的技術或系統時,要特別注意其背後的思考模型。過度關注在技能本身往往容易失焦。
比如在 JAMStack 的思考中,如果你注意到能以 Build Time 時的操作來融合全靜態系統及 SSR 的差異。善用這個架構就能在一定程度上不只取得效能收益,也能在 SEO 等方面上得到一定優勢。
當然真實世界開發通常是揉合了技術/商業目標/資源/管理的複雜議題,但盡量貼合架構本身,才能很好的發揮技術選型的優勢。

結論

這個系統仍在持續完善中,落在我們目標範圍的 issue 跟 feature 還一大堆。但相信持續努力會讓我們的技術及系統本身更加完善。如果您對這個系統或技術有興趣,也歡迎跟我們交流。
為什麼會看到廣告
18會員
33內容數
從超過 50 個合作經驗中擷取在系統開發、顧問及營運上的經驗及心得
留言0
查看全部
發表第一個留言支持創作者!
Sam Huang的沙龍 的其他內容
軟體開發一個很迷人的地方是可以在架空的世界(電腦世界)中重新思考、解構並處理真實世界的問題。但要怎樣真正有效的解決問題就很看各家功力了。 這篇文章我們暫且放下溝通及流程規劃的議題,聚焦來看看純粹領域差異造成的困難以及該怎麼面對。 回顧過往曾經觸碰過的領域真的滿多,茲列舉幾個
外部顧問至少要有兩個價值 1. 不被內在阻力限制的觀察角度 團體在運作過程會有些明顯或隱性的內部阻力,其可能來自科層結構或組織慣性。這時候外部視角往往可以比較中立。 2. 有局中人沒有的資訊儲備及來源 「燈下黑」一直是需要避免的陷阱,局中人往往會因為不具備需要的資訊而很難做出客觀且正確的決定。
我們來聊一下如果要做 NFT 電商該怎麼做
以甜點作為品味生活的點綴,這對很多人來說是再直覺不過的事情了。隨著技術的進步,各行各業都在以技術協助本業提升,講數位轉型有時候過於沈重,從數位化及數位優化開始是個好的選擇。 這裡來介紹一下法朋烘焙甜點坊電商,上線至今創下多次數分鐘內達成數百萬業績的成果! 整體的開發要點在於真正解決甜點銷售的痛點。
近幾年看到蠻多光怪陸離的開發鬼故事,也見識過各種奇醜無比的失事原因
踏入工程師生涯也十幾個年頭了,這些年工作主體逐漸從開發轉向諮詢規劃。遊走於兩者之間總會碰到一些相持不下的時刻,比如 PM 覺得某某功能很重要,可工程部門一直想要說服說這個做不了。處理得好就是雙贏,處理得不好往往就是不歡而散。 當一個新的產品及服務放到你面前的時候,你是怎麼去理解一個產品的?
軟體開發一個很迷人的地方是可以在架空的世界(電腦世界)中重新思考、解構並處理真實世界的問題。但要怎樣真正有效的解決問題就很看各家功力了。 這篇文章我們暫且放下溝通及流程規劃的議題,聚焦來看看純粹領域差異造成的困難以及該怎麼面對。 回顧過往曾經觸碰過的領域真的滿多,茲列舉幾個
外部顧問至少要有兩個價值 1. 不被內在阻力限制的觀察角度 團體在運作過程會有些明顯或隱性的內部阻力,其可能來自科層結構或組織慣性。這時候外部視角往往可以比較中立。 2. 有局中人沒有的資訊儲備及來源 「燈下黑」一直是需要避免的陷阱,局中人往往會因為不具備需要的資訊而很難做出客觀且正確的決定。
我們來聊一下如果要做 NFT 電商該怎麼做
以甜點作為品味生活的點綴,這對很多人來說是再直覺不過的事情了。隨著技術的進步,各行各業都在以技術協助本業提升,講數位轉型有時候過於沈重,從數位化及數位優化開始是個好的選擇。 這裡來介紹一下法朋烘焙甜點坊電商,上線至今創下多次數分鐘內達成數百萬業績的成果! 整體的開發要點在於真正解決甜點銷售的痛點。
近幾年看到蠻多光怪陸離的開發鬼故事,也見識過各種奇醜無比的失事原因
踏入工程師生涯也十幾個年頭了,這些年工作主體逐漸從開發轉向諮詢規劃。遊走於兩者之間總會碰到一些相持不下的時刻,比如 PM 覺得某某功能很重要,可工程部門一直想要說服說這個做不了。處理得好就是雙贏,處理得不好往往就是不歡而散。 當一個新的產品及服務放到你面前的時候,你是怎麼去理解一個產品的?
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
【創業好了沒】EP140 用印花說台灣的故事,美學符碼新「台」味!feat 印花樂 共同創辦人 邱瓊玉
Thumbnail
我們從5月初開始就非常的忙碌,尋找印刷廠商,決定紙張,修改檔案以符合印刷規範,試印顏色與字體,下單匯款並取貨。上星期陸續收到印刷品了。
Thumbnail
#被動收入 #POD #印刷業轉型 #按需打印 一、POD是什麼? 我在找被動收入來源的時候查到了「POD」這個關鍵字,也就是「按需打印(Print On Demand)」,創作者可以在平台上傳自己的作品,買家可以在平台上挑選自己喜歡的圖案,下單印製成T-shirt、手機殼、馬克杯、貼紙...
Thumbnail
「放點子數位印刷」-負責人余昌展,高職、大學皆就讀會計系,就學期間即開始累積創業「軟實力」,把在會計領域學習到的觀念、概念,運用在一路的創業歷程,畢業退伍後即創立「放點子數位印刷」,昌展彈性思辨的能力、居安思危的思考模式,帶領放點子數位,即使在印刷產業逐漸式微的時代,仍能突破重圍、穩定成長、持續拓店
Thumbnail
【電子產業_電子零組件_印刷電路板PCB】 【電子產業_電子零組件_印刷電路板PCB+有發行可轉債】
Thumbnail
關於電影與歌曲的文化背景 這首歌曲以輕古典的方式寫成,從一對源於《羅摩衍那》的詩句開始唱起;劇情也特別安排由這位學識豐富的角色唱出許多饒富深意的詩句、底蘊優雅的Tarana(蘇菲詩人Amir Khusro創作,以源自波斯語和阿拉伯語的無意義音符元素歌唱)、北印度音樂的唱名Sargam...
Thumbnail
在 1/18 的可動軍偶市場,近年來華人的作品大大崛起,吸引了海內外玩家們的注意。 例如以下幾個系列: 【酸雨戰爭】 Acid Rain World,是香港設計師劉斯杰 Kit Lau 的作品,以獨特的硬派軍武風格,搭配上特殊的變形機能,迅速地在全球累積了為數眾多的狂熱粉絲。我在 2014 年就開始
Thumbnail
書是廣泛、多元的,用讀書會討論,可以創造出另一個讓組織成員對話甚至收斂想法、聚焦的場域,是工作情境下未必能做到的。持續從書中吸收與累積,在這個以知識、創意決勝負的時代,肯定也是有幫助的積累。 找一個『專業讀書人』幫你突破門檻、省下時間,對於企業來說,應該是可以評估的教育訓練或增進內部溝通品質的方式。
Thumbnail
反智與反知識為何成為社會的主流?我們又該如何因應? 近幾年來英國脫歐、川普勝選美國總統等等,愈來愈多的真實事件似乎讓我們發現到反知識似乎成為社會的主流,而且敵視專家似乎形成一股不小的勢力。本書便來解釋這種反知識的成因、並且提出因應之道。
Thumbnail
觀察台灣過往許多危機事件的爆發加劇或降溫消弭、企業形象好感加分或厭惡扣分,常只取決於一句話講對還是說錯的微小距離! 話一出口,企業的吉凶禍福也常就此定局。 但很奇妙的,許多人還是並不重視發言技巧與管理的細膩專業,總是在面對弔詭輿情環境時,採用率性而為我口說我心...
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
【創業好了沒】EP140 用印花說台灣的故事,美學符碼新「台」味!feat 印花樂 共同創辦人 邱瓊玉
Thumbnail
我們從5月初開始就非常的忙碌,尋找印刷廠商,決定紙張,修改檔案以符合印刷規範,試印顏色與字體,下單匯款並取貨。上星期陸續收到印刷品了。
Thumbnail
#被動收入 #POD #印刷業轉型 #按需打印 一、POD是什麼? 我在找被動收入來源的時候查到了「POD」這個關鍵字,也就是「按需打印(Print On Demand)」,創作者可以在平台上傳自己的作品,買家可以在平台上挑選自己喜歡的圖案,下單印製成T-shirt、手機殼、馬克杯、貼紙...
Thumbnail
「放點子數位印刷」-負責人余昌展,高職、大學皆就讀會計系,就學期間即開始累積創業「軟實力」,把在會計領域學習到的觀念、概念,運用在一路的創業歷程,畢業退伍後即創立「放點子數位印刷」,昌展彈性思辨的能力、居安思危的思考模式,帶領放點子數位,即使在印刷產業逐漸式微的時代,仍能突破重圍、穩定成長、持續拓店
Thumbnail
【電子產業_電子零組件_印刷電路板PCB】 【電子產業_電子零組件_印刷電路板PCB+有發行可轉債】
Thumbnail
關於電影與歌曲的文化背景 這首歌曲以輕古典的方式寫成,從一對源於《羅摩衍那》的詩句開始唱起;劇情也特別安排由這位學識豐富的角色唱出許多饒富深意的詩句、底蘊優雅的Tarana(蘇菲詩人Amir Khusro創作,以源自波斯語和阿拉伯語的無意義音符元素歌唱)、北印度音樂的唱名Sargam...
Thumbnail
在 1/18 的可動軍偶市場,近年來華人的作品大大崛起,吸引了海內外玩家們的注意。 例如以下幾個系列: 【酸雨戰爭】 Acid Rain World,是香港設計師劉斯杰 Kit Lau 的作品,以獨特的硬派軍武風格,搭配上特殊的變形機能,迅速地在全球累積了為數眾多的狂熱粉絲。我在 2014 年就開始
Thumbnail
書是廣泛、多元的,用讀書會討論,可以創造出另一個讓組織成員對話甚至收斂想法、聚焦的場域,是工作情境下未必能做到的。持續從書中吸收與累積,在這個以知識、創意決勝負的時代,肯定也是有幫助的積累。 找一個『專業讀書人』幫你突破門檻、省下時間,對於企業來說,應該是可以評估的教育訓練或增進內部溝通品質的方式。
Thumbnail
反智與反知識為何成為社會的主流?我們又該如何因應? 近幾年來英國脫歐、川普勝選美國總統等等,愈來愈多的真實事件似乎讓我們發現到反知識似乎成為社會的主流,而且敵視專家似乎形成一股不小的勢力。本書便來解釋這種反知識的成因、並且提出因應之道。
Thumbnail
觀察台灣過往許多危機事件的爆發加劇或降溫消弭、企業形象好感加分或厭惡扣分,常只取決於一句話講對還是說錯的微小距離! 話一出口,企業的吉凶禍福也常就此定局。 但很奇妙的,許多人還是並不重視發言技巧與管理的細膩專業,總是在面對弔詭輿情環境時,採用率性而為我口說我心...