Condividi tramite


Esercitazione di Mesh 201 Capitolo 5: Ottenere dati meteo live

In questo capitolo si passerà alla stazione 4 in cui si apprenderà come usare lo scripting del cloud mesh per ottenere dati da origini interne o pubbliche e quindi visualizzarli in un contesto 3D nella scena. Come abbiamo discusso nel capitolo 1, la premessa qui è che i partecipanti nella vostra esperienza possono usare questa stazione per conoscere le condizioni meteorologiche in tre località in cui stanno considerando la costruzione di un parco eolico. I partecipanti potranno fare clic su un globo interattivo e visualizzare i dati meteo live dalle tre località.

Le stazioni 4 e 5 si trovano sull'altra estremità della Terrazza Sphere dalle stazioni precedenti.

__________________________________

Configurazione per questa stazione

Per completare questa stazione, è necessario inserire una chiave in un codice che consentirà di accedere all'API dati meteo. È ora possibile ottenere questa chiave in modo che non sia necessario interrompere il flusso di lavoro in un secondo momento.

  1. Passare alla pagina di iscrizione weatherapi.com.

  2. In questa pagina seguire le istruzioni per iscriversi al piano di valutazione.

    __________________________________

    Dovrai aprire il messaggio di posta elettronica che inviano, attivare il tuo account e quindi accedere al loro sito.

  3. Nella pagina Di benvenuto fare clic su "Pro Plus Plan".

    __________________________________

  4. Per questa esercitazione non è necessario avere un piano a pagamento. Fare clic sul pulsante Downgrade in "Gratuito", quindi nella finestra di dialogo visualizzata fare clic su Chiudi.

    __________________________________

  5. Nel menu a sinistra in Dashboard selezionare API.

    __________________________________

  6. Selezionare il pulsante Copia accanto al campo Chiave API, quindi incollare la chiave in un editor di testo e quindi salvare il file di testo.

    __________________________________

    Se l'operazione di copia ha esito positivo, il testo nel pulsante Copia viene modificato in Copia.

Aggiungere il prefab mesh cloud scripting

  1. Aprire la scena StartingPoint .

  2. In Hierarchy (Gerarchia) fare clic con il pulsante destro del mouse su uno spazio vuoto e quindi scegliere Mesh Toolkit>Set up Cloud Scripting (Configura script cloud).

    __________________________________

    In questo modo viene aggiunto un GameObject denominato Mesh Cloud Scripting con un componente con lo stesso nome associato.

    __________________________________

    Qualsiasi GameObject che si intende avere sotto il controllo dello scripting cloud deve essere aggiunto come elemento figlio al GameObject di scripting cloud mesh.

    Nota: il componente Mesh Cloud Scripting contiene una proprietà denominata Enable Visual Scripting. Ciò consente agli script cloud mesh di comunicare con gli script visivi. È possibile lasciare questa opzione deselezionata.

Aggiungere il prefab per Station 4

  1. Nella cartella Progetto passare ad Asset>MeshCloudScripting e quindi trascinare 4 - GlobeWithCloudScripting nella gerarchia e inserirlo come oggetto figlio in Mesh Cloud Scripting.

    __________________________________

    Questo prefab fornisce la casella di informazioni di testo e un prefab annidato denominato Earth che contiene il modello per il globo.

    __________________________________

  2. Regolare la visualizzazione in modo che tu sia direttamente di fronte alla Stazione 4.

    __________________________________

Inserire la chiave API per weatherapi.com

  1. Nella gerarchia selezionare Mesh Cloud Scripting GameObject.

  2. In Inspector (Controllo) passare al componente Mesh Cloud Scripting (Scripting cloud mesh) e quindi fare clic su Apri cartella dell'applicazione.

    __________________________________

    Verrà aperta la cartella contenente i file per lo scripting cloud mesh in Windows Esplora file.

  3. Aprire il file denominato appsettings. UnityLocalDev.json nell'editor di codice. Le ultime quattro righe di codice nel file contengono le impostazioni di configurazione.

    __________________________________

    Non c'è bisogno di fare nulla per questa prima riga ...

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

    ... ma nella riga successiva sostituire il testo "Incolla chiave API Meteo qui" con la chiave API copiata in precedenza.

    __________________________________

    È possibile ignorare le ultime due righe, che verranno usati nel capitolo successivo.

  4. Salvare e chiudere il file JSON.

Aggiornare il file csproj

  1. Nella finestra Esplora file che visualizza i file mesh cloud scripting aprire il file denominato StartingPoint.csproj nell'editor di codice.

    __________________________________

  2. Copiare il testo seguente:

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

    ... e quindi incollarlo nel file appena sopra </Project> alla fine del file.

    __________________________________

    In questo modo si garantisce di includere alcuni script dalla cartella WeatherAPI locale.

    __________________________________

  3. Salva e chiudi il file.

Aggiungere codice che rende interattivo il globo

  1. Nella finestra Esplora file che visualizza i file mesh cloud scripting aprire il file denominato App.cs nell'editor di codice.

    __________________________________

    La prima cosa che faremo è assicurarsi che quando un partecipante fa clic sul globo, i display dei dati meteo vengono aggiornati.

  2. Nel file App.cs trovare il primo commento "Incolla codice qui" che si trova all'interno del StartAsync() metodo .

    __________________________________

  3. Copia il codice seguente.

        var refreshButton = _app.Scene.FindFirstChild("Earth", true) as TransformNode;
        var refreshButtonNode = refreshButton?.FindFirstChild<InteractableNode>(true);
    
        if (refreshButtonNode != null)
        {
            refreshButtonNode.Selected += async (_, _) =>
            {
                await GetCurrentWeather(_latlong);
            };
        }
    
  4. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

    Il codice esegue le seguenti attività:

    • Inizializza la variabile refreshButton con Earth GameObject nella scena.
    • Inizializza la variabile refreshButtonNode con l'oggetto InteractableNode associato a Earth GameObject. Se un GameObject nella scena ha un Componente Di configurazione con interazione mesh collegato, che fa terra , il componente aggiunge un mesh cloud scripting InteractableNode.
    • Quando un partecipante fa clic sul globo, genera l'evento Selected di InteractableNode e chiama il metodo GetCurrentWeather. Verrà generata una richiesta HTTP per ottenere i dati meteo.
  5. Salvare il file.

Testare il lavoro

  1. Nell'editor di Unity salvare il progetto e quindi premere il pulsante Riproduci.

  2. L'avatar viene generato sul lato della terrazza sphere che contiene le prime tre stazioni. Passa al lato opposto della Terrazza Sphere e poi posizionati di fronte alla Stazione 4.

    __________________________________

  3. Per visualizzare i dati meteo, fare clic in un punto qualsiasi del globo. La temperatura, la velocità media del vento e la velocità massima del vento sono mostrate per tre città: 1) Wind, Nigeria, 2) Dublino, Irlanda e 3) Redmond, WA.

    __________________________________

  4. Al termine, premere di nuovo il pulsante Riproduci per uscire dalla modalità di riproduzione.

Passaggi successivi