在實驗後的階段我們會使用到一個問卷，這種問卷就是一種讓實驗後的受試者可以回答一些感受上的問題，或是回答在Presence 與 Fatigue 感受上的一些問題，今天我想做一個有趣的實作。也就是針對我們在 Unity 中回答後的一些問題回傳到 Google From 上去將其顯示與紀錄，同時也了解一下 Google Form 整體的使用規則與儲存資料的一些小方法，當然今天還會碰到一些網頁的問題，使用上很簡單大概是不會有甚麼問題XDDD。

接下來就讓我們實作一個簡單的小專題該目標就是輸入我們的姓名、手機號碼、信箱並回傳到我們的Google Form 上。

場景建置

1. 首先先將 UI 決定好，這邊我們將會設定三個 Unity 的 InputField 去幫助我們輸入資料。整體的介面如同以下形式呈現。 我們會需要 InputField, Toggle button, text, Panel(目前不需要)。

2. 我們在環境中新增一張照片，點選後將其Texture Type 調整為 Sprite (2D and UI)，將我們的 Ima下載的照片調整到Image 中的 Source Image 內。
   
   

3. 開始設計我們的 UI，並且將我們所需要使用到的各項 Input 元件置入到環境中。整個設計的樣式如下，依照個人喜好即可。
   

Google Form 建置

1. 接著就到 Google 新增一個 Google Form 。
   

2. 新增該Google form 的內容。
   

3. 接著按右上角眼睛的圖示，這個就會預覽目前的form 內容。
   

4. 預設的樣子。
   

5. 在這個畫面當中按右鍵來點選 "檢視網頁原始碼”。
   

6. 1. 接下來會跳出一行程式碼，後續尋找 form action 的位置的 url。 擷取目前的這行指令。目的就是為了要讓我們在Unity 中透過該URL 去尋找我們的Google Form。
      

撰寫腳本

首先我們新增一個腳本，ConnectGoogle.cs 在一個空白腳本上

我們接下來會學習到以下的內容:

1. 了解如何取得來自 InputField 輸入的內容。
2. 理解如何透過 Unity 實現串接到 Google form 的試算表中。
3. 理解 Toggle 的使用。

• 首先宣告一個 Toggle 的陣列，讓我們知道哪個Toggle 會被觸發。

public Toggle[] toggleArr = new Toggle[3];      // all have 3 toggles

• 會需要使用到 InputField 所以這邊就要宣告三個 GameObject 來代替我們三個 InputField 後續再透過該三個 InputField 去取得User 輸入的內容。

	public GameObject userName;
    public GameObject phone;
    public GameObject email;;

• 取得各項String 的變數。

// get string
    private string name;
    private string phone;
    private string email;
    private string gender;

• 後面再將我們最重要 Google Form 的 URL 宣告一個變數複製上去。

[SerializeField]
    private string connectURL = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSetCRbABNpRf7lRYLTPwSrcv4aCypOnO8hux7H_biWBH3222A/formResponse";

• 接著我們要知道哪一個Toggle 被觸發的話就使用簡單的尋找哪個為 IsOn 即可。若找到就直接將該Toggle 的名稱存取在 gender 上。

foreach(var i in toggleArr)
        {
            if(i.isOn)
            {   
                gender = i.name;
            }
        }

• 目前先撰寫這樣

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ConnectGoogle : MonoBehaviour
{
    public Toggle[] toggleArr = new Toggle[3];
    
    // InputField
    private GameObject nameInput;
    private GameObject phoneInput;
    private GameObject emailInput;

    // get string
    private string name;
    private string phone;
    private string email;
    private string gender;

    [SerializeField]
    private string connectURL = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSetCRbABNpRf7lRYLTPwSrcv4aCypOnO8hux7H_biWBH3222A/formResponse";



    void Update()
    {
        foreach(var i in toggleArr)
        {
            if(i.isOn)
            {   
                gender = i.name;
            }
        }
    }
 }

與 Google Form 實現串接

1. 這時候我們要先回去 Google form 中取得 entry 的號碼，也就是相依在各個輸入進 InputField 的文本。 一樣在唯獨頁面，按下右鍵接著點選 "檢查”。
   
   

2. 後續去ctrl F尋找 “entry.” 就會看到這四個 entry 的 ID 。
   

3. 獲取這幾個Entry ID 後我們回到 Unity 開始撰寫該 IEnumerator function。目的就是要去串聯在 Google Form 中的各項問題。

// connect to the google form 
    IEnumerator Post(string _name, string _phone, string _email, string _gender)
    {
        WWWForm form1 = new WWWForm();
        form1.AddField("entry.1853649617", _name);
        form1.AddField("entry.1126305671", _phone);
        form1.AddField("entry.1578833563", _email);
        form1.AddField("entry.328455469", _gender);

        byte[] rawData = form1.data;
        WWW www = new WWW(connectURL, rawData);
        
        yield return www;
    }

4. 接下來我們要傳送該內部的結果給Google Form，這邊因為要取得 InputField 的東西所以就需要寫成這樣。

name = nameInput.GetComponent<InputField>().text;
phone = phoneInput.GetComponent<InputField>().text;
email = emailInput.GetComponent<InputField>().text;

5. 將所有資料的結果準備好後我們就可以Call back 回 Post IEnumerator。

StartCoroutine(Post(name, phone, email, gender));       // call back to the Post IEnumerator

6. 完整的程式碼為

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ConnectGoogle : MonoBehaviour
{
    public Toggle[] toggleArr = new Toggle[3];
    
    // InputField
    public GameObject nameInput;
    public  GameObject phoneInput;
    public GameObject emailInput;

    // get string
    private string name;
    private string phone;
    private string email;
    private string gender;

    [SerializeField]
    private string connectURL = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSetCRbABNpRf7lRYLTPwSrcv4aCypOnO8hux7H_biWBH3222A/formResponse";



    void Update()
    {
        
    }


    // connect to the google form 
    IEnumerator Post(string _name, string _phone, string _email, string _gender)
    {
        WWWForm form1 = new WWWForm();
        form1.AddField("entry.1853649617", _name);
        form1.AddField("entry.1126305671", _phone);
        form1.AddField("entry.1578833563", _email);
        form1.AddField("entry.328455469", _gender);

        byte[] rawData = form1.data;
        WWW www = new WWW(connectURL, rawData);
        
        yield return www;
    }

    // want to send by button, set public!
    public void SendTOGoogleForm() 
    {
        name = nameInput.GetComponent<InputField>().text;
        phone = phoneInput.GetComponent<InputField>().text;
        email = emailInput.GetComponent<InputField>().text;
        foreach(var i in toggleArr)
        {
            if(i.isOn)
            {   
                gender = i.name;
            }
        }
        StartCoroutine(Post(name, phone, email, gender));       // call back to the Post IEnumerator

    }
 }

Scene UI處理

1. 首先我們要將我們的 Scripts 拉到 FromCanvas 上面。接著就是要把各個物件與 Toggle 放上去。接著整個樣是在設計一下。請注意到 Toggle 有變動。
   
   

2. 點選我們右下角的按鈕，並且將該包含有腳本的空白物件 ConnectManager 放進去 OnClick 事件中。
   

3. 在 No Function 點選後會有下拉選單，我們這邊選擇該 ConnectGoogle，請注意到說我們選擇的void Function 必須要是 public 的型態。
   

4. 這邊修改一下 Toggle，我們新增一個 ToggleGroup 空白物件並且新增一個 Component，就叫做 Toggle Group。後續將我們的Toggle 都放進去該 Toggle Group 中。
   
   

5. 取消勾選其中兩個 Toggle 的 Is On，並且注意到一定要記得將剛剛新增的 ToggleGroup 放進到每個 Toggle 中的 Group 裡面，如下:
   

6. 這樣我們點選任一Toggle 就僅會有一個為 IsOn。
   

7. 執行後我們輸入一些資訊在內部中，並且點選 Send Button。
   

8. 完成後開始執行點選 send 後會發現 google form 會立即更新。一直點選就會一直 Send 資料到我們的 Google Form 中。
   

9. 接著按右邊右上角的 Sheet，會產生相生一個 Excel Sheet。
   

10. 這樣就完成了XDDD，後續也可以直接拿來當作與遠端的資料庫儲存的方式。
    

結論:

1. 今天了解到如何在 Unity 中輸入基本資料並上傳到Google Form 上。幫助我們快速的在雲端建立一個基本資料庫，儲存受試者的一些資料。
2. 透過Google Form 儲存資料的方法其實也可以作為一個資料的儲存地。
3. 今天也教一些基本UI 的使用，比如 InputField 的使用。