Relay 功能

Relay 「Environment」把 Relay 運作所需要的設定、快取儲存庫、還有網路處理結合在一起。

目錄 Show

簡單範例 #
添加 handlerProvider #
範例影片展示
接線與實作
基本操作
網頁燈泡圖片控制繼電器
相關參考
聯絡我們

大部分應用程式會建立一個 Environment 實例並從頭到尾使用它。不過在一些特定的狀況下，你可以會想要為了不同的目的建立多個 environment。例如，你可以在任何時候使用者登入登出時建立一個新的 environment 實例，來防止不同使用者的資料被快取在一起。同樣地，一個被伺服器 render 的應用程式可以針對每個請求建立新的 environment 實例，這樣的話每個請求都能有自己的快取，使用者的資料就不會互相覆蓋。或者，你可能有許多的產品或功能在一個大型應用程式中，而你希望每一個可以有針對特定產品的網路處理或是快取。

簡單範例 #

要在 Relay Modern 中建立一個 environment 實例，只要使用 RelayModernEnvironment 類別：

const {
  Environment,
  Network,
  RecordSource,
  Store,
} = require('relay-runtime');

const source = new RecordSource();
const store = new Store(source);
const network = Network.create(); 
const handlerProvider = null;

const environment = new Environment({
  handlerProvider, 
  network,
  store,
});

關於建立 Network 的細節，請查看 NetworkLayer 指南。

一旦你有了一個 environment 了，你就可以把它傳進你的 QueryRenderer 實例，或是藉由 commitUpdate 函數 (查看「Mutations」) 傳進 mutation。

添加 handlerProvider #

上面的範例沒有設定 handlerProvider，這代表會使用預設所提供的。Relay Modern 配備了幾個內建的處理程序，它們透過特殊的功能還增強核心，例如：處理 connection (它不是標準的 GraphQL 功能，不過是 Facebook 使用的一組 pagination 慣例，被詳細的規範在 Relay Cursor Connections Specification 之中，並完善的被 Relay 支援) 以及 viewer 欄位 (它也不是標準的 GraphQL schema 功能，不過在 Facebook 中被廣泛地使用)。

如果你想要提供自己的 handlerProvider，你可以這樣做：

const {
  ConnectionHandler,
  ViewerHandler,
} = require('relay-runtime');

function handlerProvider(handle) {
  switch (handle) {
    
    case 'connection': return ConnectionHandler;
    case 'viewer': return ViewerHandler;
  }
  throw new Error(
    `handlerProvider: No handler provided for ${handle}`
  );
}

繼電器

繼電器是一種電子控制器件，它具有控制系統和被控制系統，通常應用於自動控制電路中，是用較小的電流去控制較大電流的一種「自動開關」，在電路中起著自動調節、安全保護、轉換電路等作用。當我們開始用 Webduino 控制繼電器，就可以非常簡單的做出利用網頁控制的智慧插座或自動開關。

範例影片展示

接線與實作

開始接線前，先認識一下繼電器，繼電器的內部構造有一個電磁鐵，

在沒有訊號提供時，內部的簧片會在上方，這時候「常閉」與「公共端」是通路，「常開」和「公共端」是斷路。
當電磁鐵透過訊號通電，就會將內部的簧片往下吸附，此時「常閉」與「公共端」變成斷路，「常開」和「公共端」變成通路。

藉由這個方式，我們就可以很容易的控制電器用品的開和關。

因為是用小電流控制大電流，所以在這個範例會用到兩組電源，其中一組電源提供 Webduino 開發板使用，另外一組電源則是供應繼電器使用。在繼電器上頭有紅燈綠燈的一側，具有三個腳位，將 VCC 接在 Webduino 3.3V 的腳位，GND 接在 GND 的腳位，IN 接在 9 的位置，繼電器的另外一側需要用十字螺絲起子來接線 ( 因為這一側通常會接大電流的電器 )，將風扇的其中一條電線接在繼電器的「常開」，另外一條電線和電源接上，而電源的另外一條線則接在繼電器的「公共端」。

由於 Webduino 支援開發板種類只會越來越多，接線圖先使用馬克一號與 Fly 示範，對於其他開發板來說，只要 IN 接數位腳 ( 數字 )，仍會有一樣的效果。

馬克一號接線示意圖：

Fly 接線示意圖：

繼電器的大電流一端的接線，利用十字螺絲起子，將電線旋緊。

實際接線照片：

斷路時繼電器會亮紅色的燈，通路時會亮綠色的燈。

基本操作

打開 Webduino Blockly 編輯工具 ( https://blockly.webduino.io )，在畫面中放入開發板積木，填入 Device ID，在開發板內放入繼電器的積木，腳位設定 11，變數名稱設定為 relay。

開發板的積木在「開發板控制」目錄下，繼電器相關積木在「輸入輸出 > 繼電器」的目錄下。

如果要讓繼電器打開 ( 使其通電 )，在繼電器積木的後方，放入「relay 設定狀態 on」的積木。

由於繼電器和 LED 一樣，都是透過數位腳的 1 和 0 控制開和關，所以把繼電器的積木，換成 LED 的積木一樣是可以運作的。不過繼電器不支援「強弱」，只能純粹的開、關、閃爍。

填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以看到繼電器通電，連接繼電器的電扇或電器也會啟動。

範例解答 ( 雲端平台 )：https://blocklypro.webduino.io/#XBBjwdKybm
範例解答 ( 體驗版 )：https://goo.gl/rYRsRk

網頁燈泡圖片控制繼電器

更進一步我們可以透過網頁操控 LED，這時可以打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「點擊燈泡」，畫面裡會打開一個內嵌的網頁燈泡圖片，在左側的積木目錄內，可以看到最下方出現了一個「點擊燈泡」的選單，點選展開可以看到操控網頁燈泡圖片的控制積木。

接著為了確保開發板上線的時候，繼電器和網頁燈泡圖片的狀態一致 ( 都是關或都是開 )，先放入 relay 狀態為 off 和燈泡狀態為 off 的積木，讓它們一開始都是熄滅的狀態。

把「點擊燈泡執行」的積木放到畫面中，放入邏輯「如果、否則」的積木，邏輯積木可以點選「藍色小齒輪」，增加判斷的條件 ( 如下圖 )。

如果否則的積木在「基本功能 > 邏輯」目錄下，點擊燈泡執行的積木在「點擊燈泡」目錄下。

在第一個邏輯判斷，放入「燈泡現在狀態是 on」的積木，表示「如果燈泡圖片是亮燈的」，執行的內容就將燈泡圖片狀態設為 off，relay 也設為 off，反之「如果燈泡圖片是熄滅的」，執行的內容就將燈泡圖片狀態設為 on，relay 狀態也設為 on。

其實更簡單的方法是直接用 LED 的積木來控制繼電器，透過「狀態切換」可以直接切換把 off 狀態變成 on，把 on 變成 off。

填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，並開始點按網頁互動區裡的燈泡圖片，就可以輕鬆地控制連接繼電器的電器了。

使用 LED 操控的解答：https://goo.gl/7ZfVXR
使用繼電器操控的解答：https://goo.gl/QPt3Ef

聯絡我們

如果對於 Webduino 產品有興趣，歡迎透過下列方式購買：

個人線上購買：https://store.webduino.io/ ( 支援信用卡、超商取貨付款 )
企業＆學校採購：來信或來電 07-3388511。

如果對於這篇教學有任何問題或建議，歡迎透過下列方式聯繫我們：

Email： ( 如對於產品有使用上的問題，建議透過 Email 附上照片或影片聯繫 )
Facebook 粉絲團：https://www.facebook.com/webduino/
Facebook 技術討論社團：https://www.facebook.com/groups/webduino/