Mesh 201 教學課程第 5 章：取得實時天氣數據

發行項
08/21/2024

在本章中，我們會移至 Station 4，您將瞭解如何使用 Mesh Cloud Scripting 從內部或公用來源取得數據，然後在場景中的 3D 內容中將其可視化。如我們在第 1 章中所討論，這裡的前提是，您體驗中的出席者可以使用這個站來了解他們正在考慮建造風力發電場的三個位置的天氣狀況。出席者將能夠按兩下互動式地球，並從三個位置檢視即時天氣數據。

站 4 和 5 位於上一個月臺的另一端 Sphere 露台。

__________________________________

設定此月臺

若要完成此月臺，您必須將密鑰插入某些程式代碼中，讓您能夠存取天氣數據 API。現在讓我們取得此金鑰，讓您稍後不需要中斷工作流程。

流覽至 weatherapi.com 註冊頁面。
在該頁面上，依照指示註冊試用方案。

您必須開啟他們傳送的電子郵件、啟用您的帳戶，然後登入其網站。
在 [ 歡迎返回] 頁面上，按兩下 [專業加號方案]。
在本教學課程中，不需要有付費方案。 按兩下 [免費] 底下的 [降級] 按鈕，然後在快顯的對話框中，按兩下 [關閉]。
在 [儀錶板] 下方的左側功能表中，選取 [API]。
選取 [API 金鑰] 字段旁的 [複製] 按鈕，然後將密鑰貼到文字編輯器中，然後儲存文字檔。

如果複製作業成功，[複製] 按鈕上的文字會變更為 [複製]。

新增 Mesh 雲端文本預製專案

開啟 StartingPoint 場景。
在 [階層] 中，以滑鼠右鍵按兩下空白空間，然後在操作功能表中，選取 [Mesh Toolkit>設定雲端腳本]。

這會新增名為 Mesh Cloud Scripting 的 GameObject，其具有附加相同名稱的元件。

您想要控制雲端腳本的任何 GameObject，都必須新增為 Mesh 雲端腳本 GameObject 的子系。

注意：Mesh 雲端腳本元件包含名為 Enable Visual Scripting 的屬性。這可讓Mesh雲端腳本與視覺腳本通訊。您可以將此保留為未選取狀態。

新增月臺 4 的預製專案

在 [專案] 資料夾中，流覽至 Assets>MeshCloudScripting，然後將 4 - GlobeWithCloudScripting 拖曳至 [階層]，並將其作為子物件放置至 Mesh Cloud Scripting。

這個預製專案提供文本框和名為 Earth 的巢狀預製專案，其中包含地球的模型。
調整您的檢視，以便您直接在前面查看站 4。

插入 weatherapi.com 的 API 金鑰

在 [ 階層] 中，選取 Mesh Cloud Scripting GameObject。
在偵測器中，流覽至 Mesh Cloud Scripting 元件，然後按兩下 [開啟應用程式資料夾]。

這會開啟資料夾，其中包含 Windows 檔案總管中 Mesh 雲端腳本的檔案。
開啟名為 appsettings 的檔案。 在程式代碼編輯器中UnityLocalDev.json。檔案中的最後四行程式代碼包含組態設定。

您不需要為此第一行執行任何動作...

"WEATHER_API_URI": "http://api.weatherapi.com/v1/current.json?key="

...但在下一行中，將 [在這裡貼上天氣 API 金鑰] 文字取代為您稍早複製的 API 金鑰。

您可以忽略最後兩行，我們將在下一章中使用這些行。
儲存並關閉 JSON 檔案。

更新 csproj 檔案

在顯示 Mesh Cloud Scripting 檔案的 [檔案總管] 視窗中，開啟程式代碼編輯器中名為 StartingPoint.csproj 的檔案。
複製下列文字：

<ItemGroup> <Folder Include="WeatherAPI\" /> </ItemGroup>

...然後將它貼到位於檔案結尾的檔案中 </Project> 。

這可確保我們從本機 WeatherAPI 資料夾包含一些腳本。
儲存並關閉檔案。

新增可讓地球互動的程序代碼

在顯示 Mesh Cloud Scripting 檔案的 [檔案總管] 視窗中，開啟程式代碼編輯器中名為 App.cs 的檔案。

我們將做的第一件事是確保當出席者按兩下全球時，天氣數據的顯示會重新整理。
在App.cs檔案中，尋找位於方法內的 StartAsync() 第一個「在這裡貼上程式代碼」批注。

複製以下程式碼。

    var refreshButton = _app.Scene.FindFirstChild("Earth", true) as TransformNode;
    var refreshButtonNode = refreshButton?.FindFirstChild<InteractableNode>(true);

    if (refreshButtonNode != null)
    {
        refreshButtonNode.Selected += async (_, _) =>
        {
            await GetCurrentWeather(_latlong);
        };
    }

將您剛才找到的「在這裡貼上程式碼」批註取代為您複製的程序代碼。

程式碼會執行下列操作：
- 使用場景中的 Earth GameObject 初始化 refreshButton 變數。
- 使用附加至 Earth GameObject 的 InteractableNode，初始化 refreshButtonNode 變數。（如果場景中的 GameObject 有 附加的 Mesh Interactable Setup 元件，地球會新增 Mesh Cloud Scripting InteractableNode。
- 當出席者按兩下全球時，它會引發InteractableNode的 Selected 事件，並呼叫 GetCurrentWeather 方法。這會產生 HTTP 要求以取得天氣數據。
儲存檔案。