Gyakorlat – Altair-webterminál üzembe helyezése

Befejeződött

Ebben a gyakorlatban egy statikus webalkalmazást fog üzembe helyezni az Altair webterminálhoz.

1. lépés: Az AltairWebTerminal adattár létrehozása

Hozza létre az AltairWebTerminal adattárat az AzureSphereAltair8800.terminal GitHub-sablonból.

  1. Nyissa meg az AzureSphereAltair800.terminal adattárat a webböngészőből.

  2. Kattintson a Sablon használata lehetőségre.

  3. Nevezze el az altairWebTerminal adattárat.

  4. Válassza a Privát lehetőséget.

  5. Válassza az Adattár létrehozása sablonból lehetőséget.

  6. Hagyja nyitva a másolt adattárat a webböngészőben.

2. lépés: Az AltairWebTerminal adattár klónozása

Klónozza az AltairWebTerminal adattárat a GitHub-fiókjából a számítógépre.

  1. Másolja ki az AltairWebTerminal adattár címét a Kód, majd az AltairWebTerminal adattár vágólap ikonjának kiválasztásával.

    Screenshot that shows an example of the open AltairWebTerminal repo.

  2. A parancssori ablakban klónozza az AltairWebTerminal adattárat a számítógépre az alábbi parancs futtatásával:

    git clone <AltairWebTerminal_Repository_Address>
    

    Ne feledje, hogy beillesztheti az AltairWebTerminal adattár címét a vágólapról.

3. lépés: Az Altair webes terminálprojekt megnyitása

  1. Nyissa meg a Visual Studio Code-ot.
  2. Válassza a Fájl>megnyitása mappát.
  3. Nyissa meg a számítógépre klónozott AltairWebTerminal mappát.

4. lépés: Az Azure Static Web Apps bővítmény telepítése

A Visual Studio Code-ban telepítse az Azure Static Web Apps bővítményt az alábbi helyek egyikéről:

  • Nyissa meg a Bővítmény marketplace-t.
  • A Visual Studio Code-ban keressen rá az Azure Static Web Appsre a Bővítmény marketplace-en.

5. lépés: Az Altair webes terminál üzembe helyezése

  1. Most, hogy telepítette a bővítményt, a Visual Studio Code-ban válassza ki az F1 billentyűt.

  2. Adja meg a statikus webalkalmazás létrehozását, és válassza az Azure Static Web Apps: Statikus webalkalmazás létrehozása... (Speciális).

  3. Válassza ki előfizetését.

  4. Ha szükséges, a parancssorban jelentkezzen be a GitHub-fiókjával.

  5. Válassza az Új erőforráscsoport létrehozása lehetőséget.

  6. Nevezze el az AltairWebTerminal erőforráscsoportot.

  7. A statikus webalkalmazás nevére írja be az AltairWebTerminal nevet.

  8. Az SKU-hoz válassza az Ingyenes lehetőséget.

  9. Válassza ki az egyéni buildbeállítást.

  10. Az alkalmazáskód helyéhez írjon be egy perjel karaktert (/).

  11. A build kimeneti helyén hagyja üresen az értéket.

  12. Az új erőforrás helyéhez válassza ki a statikus webalkalmazás előnyben részesített helyét.

6. lépés: A GitHub-művelet megtekintése

A Visual Studio Code előugró ablakában válassza a Műveletek megnyitása a GitHubon lehetőséget.

A művelet futtatása körülbelül két percet vesz igénybe. Ha a GitHub-művelet befejeződött, az állapotjelző zöldre változik.

Screenshot that shows an example of a completed GitHub action.

7. lépés: Az Altair webes terminál beállításainak létrehozása

  1. A GitHub-művelet állapotának törléséhez zárja be és nyissa meg újra a Visual Studio Code-ot.

  2. Válassza a Fájl>megnyitása mappát.

  3. Nyissa meg az AltairWebTerminal mappát, amelyet már klónozott a számítógépre, majd nyissa meg az Altair webes terminál API-mappáját .

  4. Nevezze át a local.settings.sample.json fájlt a local.settings.json fájlra.

  5. Nyissa meg a local.settings.json fájlt.

    Az MQTT-közvetítő konfigurációja előre fel van töltve a test.mosquitto.org nyilvános MQTT-közvetítőhöz.

  6. Konfigurálja az Azure IoT Central beállításait a korábban mentett Azure IoT Central API-jogkivonat és URL-cím használatával.

  7. Frissítse a következő tulajdonságok értékeit:

    • IOT_CENTRAL_API_TOKEN
    • IOT_CENTRAL_URL

Ha végzett, a local.settings.json fájl tartalmának a következőhöz hasonlóan kell kinéznie:

Screenshot that shows an example of your local.settings.json file.

8. lépés: Az Altair webes terminál helyi beállításainak feltöltése

  1. Továbbra is a Visual Studio Code-ban válassza az F1 billentyűt.

  2. Írja be a statikus helyi fájlt, majd válassza az Azure Static Web Apps: Upload Local Gépház (Helyi Gépház feltöltése) lehetőséget.

  3. Válassza ki előfizetését.

  4. Statikus webalkalmazás esetén adja meg a létrehozott altairWebTerminal nevet.

  5. A környezethez írja be az Production (Éles) nevet.

A rendszer feltölti az Altair webes terminálbeállítást.

9. lépés: Felhasználók meghívása az Altair webes terminálra

A biztonság védelme érdekében az Altair webterminálhoz hitelesített felhasználókra van szükség. Ez azt jelenti, hogy meg kell hívnia a felhasználókat, beleértve magát is az Altair webterminál statikus webalkalmazására.

  1. Jelentkezzen be az Azure Portalra.

  2. A bal oldali panelen válassza az Összes erőforrás lehetőséget.

    Screenshot of the Azure portal 'All resources' command on the left pane.

  3. A bal felső sarokban lévő erőforrásszűrő mezőbe írja be az altairwebterminal parancsot.

    Screenshot of the Azure portal resource filter box and results list, displaying the AltairWebTerminal static web app.

  4. A szűrőeredmények listájában a Név területen válassza az AltairWebTerminal lehetőséget.

  5. A bal oldali panelen válassza a Szerepkörkezelés, majd a Meghívás lehetőséget.

    Screenshot that shows how to copy the invite link.

  6. A Meghívó létrehozása hivatkozás panelen tegye a következőket:

    a. Hitelesítésszolgáltatóként válassza ki a szolgáltatót.
    b. E-mail-címként adja meg az e-mail-címét vagy a felhasználói leíróját.
    c. Szerepkör esetén adja meg a felhasználókat.
    d. Válassza a Létrehozás lehetőséget.
    e. A Meghívás hivatkozás mellett másolja a következő lépésben használni kívánt hivatkozást.

A következő lehetőségek közül választhat:

  • Ha a meghívó hivatkozása az Ön számára készült:

    a. Illessze be a hivatkozást a böngésző címsorába.
    b. Hitelesítés az e-mail-cím vagy a felhasználói leíró használatával.
    c. Hozzájárulás megadása.

  • Ha a meghívó hivatkozása valaki másnak szól, küldje el a hivatkozást a hitelesítéshez és a hozzájárulás megadásához.

11. lépés: az Altair webes terminál Csatlakozás az Azure Sphere-eszközre

Hitelesítés után csatlakozzon az Altair emulátorhoz. Először be kell szereznie az eszköz nevét az Azure IoT Centralban:

  1. A böngészőben nyissa meg az Azure IoT Centralt.
  2. Válassza az Eszközök lapot, válassza az Altairt az Azure Sphere-sablonban , majd válassza ki az Azure Sphere-eszközt.
  3. Másolja ki az eszköz nevét.
  4. A böngésző Webes terminál lapján illessze be az eszköz nevét, majd válassza Csatlakozás.
  5. Adja hozzá az Altair Web Terminal lapot a böngésző kedvenceihez.

Az MQTT-közvetítő állapotüzenete Csatlakozás változik. Ha a webes terminál sikeresen csatlakozott, az állapot Csatlakozás módosul.

Screenshot that shows that the web terminal has connected successfully to the MQTT broker.