How to fetch JSON data to your Framer project?
最近在工作上，為了讓用戶研究時使用者能夠獲得更接近真實產品的互動體驗，有需要串接大量 real data 的需求，於是我便花了一點時間研究如何以低成本、高效率，並且又具備調整彈性的方式來達成這個需求。經過一輪的嘗試之後，我覺得 JSON data 是一個相當出色的解決方案。
What is JSON?
JSON 是一種輕量級的資料交換語言，以文字為基礎，透過簡單的 key & value 之間的配對並且結合物件與陣列的資料結構，能夠以簡潔、輕量的方式儲存資料並且易於讓人閱讀。
我該如何客製化自己的 JSON data?
效率與調整彈性是我在製作 Prototypes 時相當重視的兩個指標，因此根據我 survey 之後的結果，我發現透過 Google Sheets 編輯資料，再轉換為 JSON data 是最容易上手且具備調整彈性的方式，此外 Google Sheets 還有另一個獨特的優點，就是能夠與團隊成員一起共同協作的優勢，幫助資料的搜集更有效率。以下我將透過 Step-by-step 的方式引導大家，如何從 Google sheets 產生 JSON data，並實際運用在 Framer 的原型製作當中。
第一步：設計資料結構
在真的實際下去寫第一行 code 之前，請先想清楚你目前的專案是不是真的有需要用到 JSON 來儲存資料的需求，資料量、可調整彈性與資料類型都是幫助你進行決策的指標。一但經過評估後，你認為會需要使用 JSON data 的需求，接著便是著手規劃資料結構，思考有哪些物件（Object）、物件內有哪些屬性（Attribute）、物件名稱屬性名稱等等，一開始先做好全面性的盤點，能夠讓後續的作業更有效率。
在這裡我使用高中生為範例，需要儲存的物件（Object）為高中生，關於物件的屬性（Attribute）分別有學號（id）、姓名（name）、身高（height）、體重（weight）、學期成績（score）
第二步：建立一份 Google sheets
先在 Google 雲端硬碟內新增一份 Google sheets，接著在新建好的 Google sheets 裡面逐次輸入你剛才設計好的物件屬性，也就是 key 值。這邊給大家一個小建議，可以為物件屬性多加上一個 unique key（如果當前的物件屬性不具備的話），也就是每個物件會各自擁有一個獨一無二的 unique id，這能夠避免之後在存取資料的時候發生錯誤。
第三步：凍結物件屬性欄位並填入對應值（value）
匡選已經輸入好的 key 值的那一列，點擊上方工具列「檢視」，接著選擇「凍結」→「1列」。這樣一來 key 值便會 fix 在最上方的第一列的位置。
然後在下方輸入相對應的物件屬性值。這邊要注意一點，目前這個方法不支援中文輸入，因此在資料的設計上請盡量以英文為主。
第四步：編輯 script
點選工具 → 指令碼編輯器
這會為你開啟一個 Javascript 的編輯頁面。接著點擊這個 Github 網址，並將該 Github 中的程式碼完整複製到剛才開啟的 Javascript 編輯頁面，最後點擊磁碟片 icon 進行一個儲存的動作。
第五步：Export JSON data
存檔完之後，回到你已經填入資料的 Google sheets 頁面點擊重新整理，然後你應該就會在上方工具列的最右邊看到一個標題為 Export JSON 的新按鈕。點擊該按鈕並選擇 Export JSON for this sheet，接著就會 pop-up 一個新視窗，顯示你在 Google sheets 所填入的資料的 JSON 格式。將全部的資料複製下來，貼到任意一份空白的純文字檔（.txt）裡面，然後再進行一個儲存的動作。
第六步：建立 Framer project & Import JSON data
新建立一個 Framer project，接著將剛才儲存完畢的 JSON 純文字檔（.txt）搬移到該 Framer project 資料夾裡。更改 JSON 純文字檔的副檔名，從 .txt 改為 .json。
第七步：讀取 JSON data
然後我們就要開始寫 code 嘍！
讀取 JSON，並以陣列的形式儲存於 data 這個變數。
getData = “test.json”
data = JSON.parse Utils.domLoadDataSync getData接著，我們能夠以 for loop 的形式讀取 data 裡的資料。
for student in data
print student.id
print student.name
print student.height
總結
利用 JSON 作為 Framer 的資料存取方式，在處理較大量且具有一致資料結構的物件時相當具有優勢；此外在結合 Google sheets 的協同合作之後，能夠更有效率地進行事前資料的搜集與事後的修改與維護，推薦大家試玩一下，往後在遇到類似的需求時也可以真的應用到實際的作業流程當中。
