Wizualizowanie danych z czujników w czasie rzeczywistym z usługi Azure IoT hub przy użyciu funkcji Web Apps w usłudze Azure App ServiceVisualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service

Diagram end-to-end

Uwaga

Przed rozpoczęciem tego samouczka, wykonaj symulatora w trybie online urządzenia Raspberry Pi samouczka lub jednym z samouczków urządzenia; na przykład Raspberry Pi w środowisku node.js.Before you start this tutorial, complete the Raspberry Pi online simulator tutorial or one of the device tutorials; for example, Raspberry Pi with node.js. W tych artykułach skonfiguruj swoje urządzenia Azure IoT i Centrum IoT hub i wdrożysz przykładową aplikację do uruchamiania na urządzeniu z systemem.In these articles, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. Aplikacja wysyła dane zebrane czujnika do usługi IoT hub.The application sends collected sensor data to your IoT hub.

Omawiane zagadnieniaWhat you learn

W tym samouczku dowiesz się, jak wizualizować dane czujników w czasie rzeczywistym usługi IoT hub odbierze, uruchamiając aplikację internetową, która jest hostowana w usłudze web app.In this tutorial, you learn how to visualize real-time sensor data that your IoT hub receives by running a web application that is hosted on a web app. Jeśli chcesz wypróbować jej możliwości do wizualizacji danych w usłudze IoT hub za pomocą usługi Power BI, zobacz usługa Power BI umożliwia wizualizowanie danych z czujników w czasie rzeczywistym z usługi Azure IoT Hub.If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.

Co należy zrobićWhat you do

  • Tworzenie aplikacji internetowej w witrynie Azure portal.Create a web app in the Azure portal.
  • Przygotuj usługi IoT hub na dostęp do danych, dodając grupy odbiorców.Get your IoT hub ready for data access by adding a consumer group.
  • Konfigurowanie aplikacji sieci web, które można odczytać danych z czujników z Centrum IoT hub.Configure the web app to read sensor data from your IoT hub.
  • Przekaż aplikację sieci web hostowane przez aplikację internetową.Upload a web application to be hosted by the web app.
  • Otwórz aplikację sieci web, aby wyświetlić dane w czasie rzeczywistym temperatury i wilgotności z usługi IoT hub.Open the web app to see real-time temperature and humidity data from your IoT hub.

Co jest potrzebneWhat you need

Tworzenie aplikacji internetowejCreate a web app

  1. W witryny Azure portal, kliknij przycisk Utwórz zasób > sieci Web i mobilność > aplikacji sieci Web.In the Azure portal, click Create a resource > Web + Mobile > Web App.

  2. Wprowadź unikatową nazwę zadania, sprawdź subskrypcję, określ grupę zasobów i lokalizację, wybierz Przypnij do pulpitu nawigacyjnego, a następnie kliknij przycisk Utwórz.Enter a unique job name, verify the subscription, specify a resource group and a location, select Pin to dashboard, and then click Create.

    Zaleca się wybrać tej samej lokalizacji co grupa zasobów.We recommend that you select the same location as your resource group.

    Tworzenie aplikacji internetowej

Dodaj grupę odbiorców do usługi IoT hubAdd a consumer group to your IoT hub

Grupy konsumentów są używane przez aplikacje do pobierania danych z usługi Azure IoT Hub.Consumer groups are used by applications to pull data from Azure IoT Hub. W tym samouczku utworzysz grupy odbiorców do użycia przez najbliższych usługi platformy Azure można odczytać danych z usługi IoT hub.In this tutorial, you create a consumer group to be used by a coming Azure service to read data from your IoT hub.

Aby dodać grupę odbiorców do Centrum IoT hub, wykonaj następujące kroki:To add a consumer group to your IoT hub, follow these steps:

  1. W witrynie Azure Portal otwórz swoje centrum IoT Hub.In the Azure portal, open your IoT hub.

  2. W okienku po lewej stronie kliknij wbudowanych punktach końcowych, wybierz opcję zdarzenia w górnym okienku i wprowadź nazwę w polu grupy konsumentów w okienku po prawej stronie.In the left pane, click Built-in endpoints, select Events on the top pane, and enter a name under Consumer groups on the right pane. Kliknij przycisk Zapisz po zmianie domyślny czas wygaśnięcia wartość i zwrócić go do oryginalnej wartości.Click Save after you change the Default TTL value and return it back to the original value.

    Utwórz grupę odbiorców w usłudze IoT hub

Konfigurowanie aplikacji sieci web, które można odczytać danych z usługi IoT hubConfigure the web app to read data from your IoT hub

  1. Otwórz aplikację sieci web, po prostu aprowizowanej.Open the web app you’ve just provisioned.

  2. Kliknij przycisk ustawienia aplikacji, a następnie w obszarze ustawienia aplikacji, Dodaj następujące pary klucz/wartość:Click Application settings, and then, under App settings, add the following key/value pairs:

    KluczKey WartośćValue
    Azure.IoT.IoTHub.ConnectionStringAzure.IoT.IoTHub.ConnectionString Uzyskany z wiersza polecenia platformy AzureObtained from Azure CLI
    Azure.IoT.IoTHub.ConsumerGroupAzure.IoT.IoTHub.ConsumerGroup Nazwa grupy konsumentów, dodanego do usługi IoT hubThe name of the consumer group that you add to your IoT hub
    WEBSITE_NODE_DEFAULT_VERSIONWEBSITE_NODE_DEFAULT_VERSION 8.9.48.9.4

    Dodawanie ustawień aplikacji sieci web za pomocą pary klucz/wartość

  3. Kliknij przycisk ustawienia aplikacjiw obszarze ustawienia ogólne, Przełącz Web sockets opcji, a następnie kliknij przycisk Zapisz.Click Application settings, under General settings, toggle the Web sockets option, and then click Save.

    Przełącz opcję gniazda sieci Web

Przekaż aplikację sieci web hostowane przez aplikację sieci webUpload a web application to be hosted by the web app

W witrynie GitHub wprowadziliśmy dostępności aplikacji sieci web, która wyświetla dane czujników w czasie rzeczywistym z Centrum IoT hub.On GitHub, we've made available a web application that displays real-time sensor data from your IoT hub. To wszystko, co należy zrobić, konfigurowanie aplikacji sieci web, aby pracować z repozytorium Git, pobrać aplikację sieci web z witryny GitHub i przekaż go na platformę Azure dla aplikacji sieci web do hosta.All you need to do is configure the web app to work with a Git repository, download the web application from GitHub, and then upload it to Azure for the web app to host.

  1. W aplikacji sieci web kliknij opcje wdrażania > wybierz źródło > lokalnego repozytorium Git, a następnie kliknij przycisk OK.In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.

    Konfigurowanie wdrożenia aplikacji sieci web do użycia lokalnego repozytorium Git

  2. Kliknij przycisk poświadczenia wdrożenia, Utwórz nazwę użytkownika i hasło do użycia, aby nawiązać połączenie z repozytorium Git na platformie Azure, a następnie kliknij przycisk Zapisz.Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.

  3. Kliknij przycisk Przeglądi zanotuj wartość ustawienia adres url klonowania Git.Click Overview, and note the value of Git clone url.

    Pobierz adres URL klonowania Git aplikacji sieci web

  4. Otwórz polecenie lub okno terminalu na komputerze lokalnym.Open a command or terminal window on your local computer.

  5. Pobieranie aplikacji internetowej z usługi GitHub, a następnie przekaż go na platformę Azure dla aplikacji sieci web do hosta.Download the web app from GitHub, and upload it to Azure for the web app to host. Aby to zrobić, uruchom następujące polecenia:To do so, run the following commands:

    git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
    cd web-apps-node-iot-hub-data-visualization
    git remote add webapp <Git clone URL>
    git push webapp master:master
    

    Uwaga

    <Adres URL klonowania Git> jest adres URL repozytorium Git w Przegląd stronie aplikacji sieci web.<Git clone URL> is the URL of the Git repository found on the Overview page of the web app.

Otwórz aplikację sieci web, aby wyświetlić dane w czasie rzeczywistym temperatury i wilgotności z usługi IoT hubOpen the web app to see real-time temperature and humidity data from your IoT hub

Na Przegląd strony aplikacji sieci web, kliknij adres URL, aby otworzyć aplikację sieci web.On the Overview page of your web app, click the URL to open the web app.

Pobierz adres URL aplikacji sieci web

Powinien zostać wyświetlony w czasie rzeczywistym dane temperatury i wilgotności z usługi IoT hub.You should see the real-time temperature and humidity data from your IoT hub.

Wyświetlanie w czasie rzeczywistym temperatury i wilgotności strona aplikacji internetowej

Uwaga

Upewnij się, że przykładowa aplikacja jest uruchomiona na urządzeniu.Ensure the sample application is running on your device. Jeśli nie, zostanie wyświetlony pusty wykres, możesz zapoznać się z samouczkami, w obszarze skonfigurować na twoim urządzeniu.If not, you will get a blank chart, you can refer to the tutorials under Setup your device.

Kolejne krokiNext steps

Aplikacji sieci web została pomyślnie użyta, wizualizowanie danych z czujników w czasie rzeczywistym z usługi IoT hub.You've successfully used your web app to visualize real-time sensor data from your IoT hub.

Aby uzyskać alternatywny sposób wizualizować dane z usługi Azure IoT Hub, zobacz usługa Power BI umożliwia wizualizowanie danych z czujników w czasie rzeczywistym z usługi IoT hub.For an alternative way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.

Aby kontynuować, aby rozpocząć pracę z usługą Azure IoT Hub i zapoznać się z wszystkie rozszerzone scenariusze IoT, zobacz następujące tematy:To continue to get started with Azure IoT Hub and to explore all extended IoT scenarios, see the following: