2022年1月22日 星期六

LAB-16A:Node-Red write data to Google Spreadsheet-Method A :by Http Request

Topic :

如何透過Node-Red 將資料存入GoogleSpreadsheet

前言:三種方法,本文寫的是第二種Http Request(因為撰稿時其他兩種尚未完成)

經過上網查詢到有2種方法,但應該還有其他第三種。
第一種:是透過 Google Cloud 專案之API 建立授權 JSON填入,
第二種:是藉由Http Request 透過Google Form 的連動介面輸入SpreadSheet。
第三種:是 透過 Google SpreadSheet 的 Google App Script 建立GAS內預設函數 doPost() 來處理 http 的請求,然後進行寫入Google SpreadSheet。

環境:

(1)Node-Red version V 2.0.5

(2)開發環境套件使用:fChart -- 從  <Node -Red 視覺化開發工具> 作者 陳會安 ,所提供站台下載使用。

(3)作業系統: Windows 10 Version 20H2

(4)laptop NB:ASUS VivoBook S14 (Core i5 ,8th Gen)-製造年份2018年11月

(5)瀏覽器 :Google Chrome 版本 97.0.4692.99 (正式版本) (64 位元)

(6)Google SpreadSheet


設計邏輯: 

透過建立google Form ,運用其後端權限,來存取Google SpreadSheet。

設定步驟:

SpreadSheet :

(S1) 建立SpreadSheet : 打開 google SpreadSheet =>建立一個 SpreadSheet, 建立並輸入欄位名稱。-圖1


(S2)建立Google Form 表單 : 從SpreadSheet 功能表 > 工具 > 建立新表單 ,建立一個Googel Form (如此做法,SpreadSheet 會與表單自動建立連結 ,也就是Link 連動)圖2 圖3




(S3)抓取Prefill 網址: 按右上角 ...按鈕,然後按下選取 [取得預先填入的連結]。接下來 填入表單各項資料,直到填完表單,然後最底下可以看見[取得連結]。>> b然後按[複製連結]按鈕就取得 表單預備入資料的網址超鏈結。圖4



(S4)存檔 [預先填入鏈結] 路徑 於記事本或word等(總之存起來等會需要修改)。圖5



Node-Red:

(N1)建立flow : flow tab 頁面里面,建立 Inject -> function ->Http Request ->debug 流程。 圖6



(N2) inject 時間戳 Node: 維持不變 。圖7



(N3)function Node內容: 建立data {} (變數+大括號=JavaScript物件),然後根據SpreasSheet 有多少欄位要填入,建立對應的變數值指定。我寫的範例如下: 圖8

var data={}

data.name="Tony"

data.age="50"

data.title="manager"

data.dep="PD"

msg.payload=data

return msg;


(N4) Http Request 請求 Node:  
 a. 將 S5 步驟內的 HTTPS:// 內修改一些項目  (黃底的需要修改,綠底顯示參數&參數)-如圖9 


 a-I. prefill 改成 FormResponse 
 a-II. 所有參數值 分別改成對應 參數物件屬性值, 例如ex:  {{payload.name}}
 a-II 將[ 改完後的全路徑 ] 拷貝,填入<Http Request >Node 的 URL 欄位。--如圖10

Trial 運行

(T1) 打開Debug小蟲標籤 & 連動要寫入的Google SpreadSheet,準備觀察運行結果。--圖11


(T2) 確定Node彼此間線連接,各<Node 元件>右上角 沒有 紅色三角形。

(T3) 按下Deploy(部屬-也就是發行/運行),然後Node 皆無異常,視窗上方出現部屬成功。-圖13



(T4) 按下 Inject 注入一次的動作,觀察 Google SpreadSheet & debug 視窗是否有顯示正常數值。然後多按幾次看是否有連續出現(3次-4次)。-圖14



完成-----以上即完成此次的練習


整合延伸

1.整合 Dashboard 模組的 <Form > node元件 輸入
2.整合其他Form 的Http post 的資料抓取>SpreadSheet 







沒有留言:

張貼留言