從好奇心學習JSON解析與認識Web developer的Network

相信各位有不管是不是開發者，應該都會好奇打開一下傳說中的Google developer tools看看是什麼東西。
新手或是沒碰過的你，可能打開來之後發現這是什麼東西！！然後就關掉了…
但事實上裡面的功能並沒有想像中的那麼複雜，重點是當下的你有沒有需要用到。
因此我在這裡設立情境，讓你能夠透過好奇心去了解這個功能主要是要做什麼。

Instagram

相信各位有聽過Instagram吧？不知道你會不會好奇，當Instagram每次在載入網頁的時候，到底會做什麼事情？
其實你可以打開chrome的developer tools查看，所以請跟我做

打開Instagram首頁
打開developer tools
你可以使用Fn+F12打開
點選Network
這個時候你會看到很多複雜的Name，不要急，這些並不是我想讓你看的。
點選Clear
清楚所有Name
點選Instagram首頁隨便一個人的Profile頁面
查看Name的變化
這個時候你會看到Network有在跑一些東西出來，你應該會看到有一個Name叫做：?__a=1，請點選他
查看Request URL
以yahoo為例，Request為：
1
https://www.instagram.com/yahoo/?__a=1
點選Preview
查看get到的JSON資料，你可以看到裡面的graphQL的資料。
graphQL的介紹，以後有機會再跟大家談，這邊先討論JSON的資料。
再來以下我們就可以來研究資料了。

解析JSON

JSON資料

你可以在圖片中看到很多使用者的資料，基本上後端傳道這個頁面會用到的資料都可以在這邊查到。要驗證的話，你可以將這些data對應前端的layout呈現查看。例如：

biography = 介紹
username = 名稱
edge_follow = 追蹤的數量
edge_followed_by = 被追蹤的數量

解析文章

比較特別的是，如果我們想要查看這個頁面的文章資料
那我們可以查看edge_owner_to_timeline_media

你會發現當Profile被載入的當下，就會一口氣載入12筆文章的資料。
例如：
我們可以點選第一筆資料（index: 0）
在這邊可以查看到一些蠻重要的資料

edge_media_to_comment: 留言數
is_video: 圖片或是影片
video_view_count: 影片的瀏覽數
owner: 文章屬於誰的
media_preview: 圖片
edge_media_to_caption: 文章
shortcode: 網址短碼

解析留言內容

再來我們一樣按下clear清除Network的紀錄，直接點選隨便一篇文章進去。
你會發現Network又有變化了，這次打的API是：https://www.instagram.com/p/CA1V5fFFTNJ/?__a=1
這次到裡面的JSON查看，你會發現可以查看更多資料，包含以下：
edge_media_to_parent_comment: 留言內文

我們可以在這裡面查看這個使用者留言的狀態，包含留言時間, 內文……

其他可參考的API

如果你想要查看tag某使用者的貼文有哪些，可以使用

1	https://www.instagram.com/explore/tags/<tag-name>/?__a=1

抓取下一頁的資料

因為每次query API都是一頁12筆資料，如果要繼續讀取其他資料的話，可以查看以下參數
has_next_page: 是否還有下一頁的資料
如果是true的話，可以透過end_cursor來抓取下一頁的資料
舉例來說，你可以透過&來串連其他參數：

1	https://www.instagram.com/explore/tags/swiftui/?__a=1&end_cursor=<token>

如何應用這些API

通常在設計網頁或是統計資料，比較麻煩的事情都是在如何得到資料？
但是隨著時代的演變，很多軟體為了便民，會提供RESTful API或是近日流行的GraphQL給予開發者使用。
例如我們時尚使用的wordpress, medium, facebook……。
以上面的例子來說，我們如果想要結合產品，例如把資料放在自己的主網經過修飾後呈現，既可以變出更多的花樣。
例如：104高手的內文下方，就用到 wordpress API來擷取wordpress文章的data再修飾成網站的元素。