從流程圖到 Thunkable app：Google 圖書資訊查詢

Posted By Ted Lee on 9 月 17, 2024 in 教學文, 程式教育 | 0 comments

圖 1：查詢 Google 圖書資訊 app

會安老師在他的 Thunkable 系列的最後一個投影片「10_Thunkable跨平台行動開發(專案實例).pdf」的 14~20 頁中，舉出了「Google 圖書資訊查詢」的簡易示例。本文將從「流程圖」的觀點來展示 app 設計的歷程。註：本例需要以 Thunkable 的「Snap to Place」舊介面來實作，因為新介面不提供「Web API」和「Alert」元件。

問題說明

如圖 1，我們在 app 畫面上輸入 Google 圖書（Google Books）的查詢關鍵字（例如：陳會安）後，便能將查詢的結果（書籍縮圖、書名、作者）顯示在畫面上。

我們在地端（client）的行動載具上的 app 填寫妥以下雲端 Google 圖書所提供的 API 格式後發給 Google 圖書的伺服器（server），就可以收到圖 2 查詢回應（response）的 JSON（JavaScript Object Notation）檔。

https://www.googleapis.com/books/v1/volumes?q=圖書查詢關鍵字&參數

例如：https://www.googleapis.com/books/v1/volumes?q=陳會安&maxResults=1&projection=lite，其中，圖書查詢關鍵字是「陳會安」，參數是「maxResults=1」和「projection=lite」（以 & 串接）。