開發 storyblok 的美好過程

是 storyblok 不是 storybook 喔，啟初我在剛剛接觸的時候，也以它們是一樣的東西，但他們是完全不一的東西。

起步

• 想法啟蒙
  • 主管分享過去的 cms 的管理經驗，透過 json 的方式來儲存和傳遞 content 內容 (還不知道 headless cms 是什麼？)
• admin 開發
  • 當時候還想說要另外作一個服務，為了可以順利的產出 webapi 的 JSON
  • 思考用 iframe 的方式，作一個額外的服務，產出 JSON 傳回 admin 儲存。
  • iframe 可以透過 message 的 event 來傳遞資料給 parent，bla … bla …
• 三方服務
  • admin 開發時間過久，因此接到「聖旨」，需要研究三方服務，盡快達成目的。
  • 研究 headless cms (開始接觸到這個單字)
• study headless cms
  • 最受歡迎的 Headless CMS 介紹
  • 比較三方 headless 的 cms
• 選擇 storyblok
• develop

我選了 Storyblok

為什麼選擇了它？

• 可預覽畫面

• 操作簡單

  • 靈活應變大部分的場景

    

  • 簡單的操作流程

    

• component 重複使用的概念強。(只有它可以在 richText 裡面引用 component，其它家都是產出 html 像是 tinyMCE 的套件)

  • why-storyblok say “Storyblok's headless architecture empowers developers to effortlessly work with and adapt to any technology. Deliver content to any frontend faster with API-enhanced performance and industry-leading security. Storyblok is designed to be easily customized and extendable around your organization's specific workflows. Storyblok is the ultimate CMS solution for all your content.”

• release content 功能

• contentfull 是一個更有名的 headless 服務，但是第一次使用起來，沒有辦法直接透過 api 打到我想要的 JSON 資料，要透過付錢才可以拿到 api 的資料，不然只有 preview 的功能。

官方的 why-storyblok

Why Storyblok

開發過程

1. storyblok app 介面操作研究
2. 思考測試環境、開發流程
3. 前端專案 modules 規劃
4. 研究 api 使用
   1. • Content Delivery API (取得內容) -
   2. • Management API (編輯管理內容)
   3. • GraphQL API

🚧 過程中其實反覆寫了幾個版本。主要因為 cms 的 slug 是否要完全匹配 url ，各個頁面共用 cms 的 component

Storyblok roadmap

Roadmap | Storyblok

---

Evaluating & Planned

Improved selection functionality within Option Fields

Enables users to create new options within Single Option and Multi-Option fields faster by removing the confirmation step.

Smartling Integration

This custom Storyblok app enables direct connection with the Smartling translation service.

---

In Development & Released

bla... bla...

Summary

1. 選擇比努力重要 (如果我們是用 admin 開發的話，跟本就是一個災難)
2. api 規劃功能齊全，在取得資料上可以透過各式個樣的 filter 方式去取得所需之資料
   1. link 中的 component 資料
   2. author
   3. folder 裡面的資料
3. 彈性的去組建你所需要的資料內容

來硬體的工程師，從來沒有想過說，可以在軟業導入一個這麼大的東西進到專案中，沒有什麼太多深厚底子的我，可以完成這件事情，我也是深感驕傲。

我寫下段話給自已，也是給我未來的自己看的。充滿著對於導入 Storyblok 到我們專案的回憶和感激之情。回想起當初採用這個強大的內容管理系統的決定，我們可以看到它帶給我們的種種好處和美好回憶。

首先，我要感謝整個團隊在導入過程中的努力和奉獻。我們共同面對了挑戰，克服了困難，並且在這個旅程中相互支持。每一位成員的貢獻都是無價的，使得我們能夠成功地導入 Storyblok 並發揮其最大的潛力。

回顧過去的日子，我們可以明顯感受到 Storyblok 為我們的專案帶來的巨大效益。它提供了一個直觀且易於使用的界面，讓我們能夠輕鬆管理和編輯網站的內容。不再需要依賴開發人員進行每次修改，我們能夠快速更新和調整內容，提供更好的使用者體驗。

此外，Storyblok 的靈活性和可擴展性也為我們的專案帶來了無限的可能性。它允許我們根據需求進行自定義和擴展，無論是創建多語言網站、建立豐富的內容模塊，還是與其他工具和平台進行無縫集成，我們都能夠輕鬆實現。

除了功能上的優勢，我們還要感謝 Storyblok 團隊提供的卓越支援和文檔資源。他們不僅提供了清晰明瞭的文檔，還定期更新並增加新的功能和改進。我們在導入過程中遇到的問題得到了及時的回饋和解決，這使得我們能夠更好地理解和利用 Storyblok 的潛力。

最後，我想向所有支持我們的夥伴和用戶致以最誠摯的感謝。你們的信任和支持使我們能夠在專案中成功地運用 Storyblok。我們很榮幸能夠與你們

參考圖片

relation_ref 用法參考文章