{"id":26442,"date":"2021-11-09T14:59:00","date_gmt":"2021-11-09T13:59:00","guid":{"rendered":"https:\/\/device-insight.com\/?post_type=developers-blog&#038;p=26442"},"modified":"2024-04-17T16:46:54","modified_gmt":"2024-04-17T14:46:54","slug":"visualize-data-from-azure-iot-hub-using-react-and-ux4iot","status":"publish","type":"developers-blog","link":"https:\/\/device-insight.com\/en\/developers-blog\/visualize-data-from-azure-iot-hub-using-react-and-ux4iot\/","title":{"rendered":"Visualize data from Azure IoT Hub using React and ux4iot"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"26442\" class=\"elementor elementor-26442\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"developers-blog\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b4f828b devel_blog_title elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b4f828b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1786bf7e blog_col\" data-id=\"1786bf7e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fa4243a elementor-align-left devel_blog_back_btn ha-has-bg-overlay elementor-widget elementor-widget-button\" data-id=\"fa4243a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"hm hm-arrow-left1\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Back<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-612acb44 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"612acb44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Visualize data from Azure IoT Hub using React and ux4iot<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-539cc96 elementor-widget elementor-widget-post-info\" data-id=\"539cc96\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-6345c40 elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-custom\">\n\t\t\t\t\t\t\t\t\t\tStefan Hudelmaier\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-a6f20de elementor-inline-item\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.linkedin.com\/in\/stefan-hudelmaier\/\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-linkedin\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-custom\">\n\t\t\t\t\t\t\t\t\t\thttps:\/\/www.linkedin.com\/in\/stefan-hudelmaier\/\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-b86a0c7 elementor-inline-item\" itemprop=\"datePublished\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date\">\n\t\t\t\t\t\t\t\t\t\t<time>2021\/11\/09<\/time>\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-808e92e elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/device-insight.com\/en\/developers_blog_category\/azure\/\" class=\"elementor-post-info__terms-list-item\">Azure<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17c17f87 elementor-widget elementor-widget-text-editor\" data-id=\"17c17f87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-selectable-paragraph=\"\">Imagine you have data coming in from an IoT device, e.g. a temperature sensor, and you want to visualize the values. You also want your frontend to live-update as soon as new data arrives. You could use something like Grafana or IoT Central, but then you are stuck in an existing UI and cannot influence the user experience very much. ux4iot gives you complete freedom over the user interface, while making access to IoT data very easy.<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-de1fb1a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"de1fb1a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-44e83259 blog_col\" data-id=\"44e83259\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2453a39a elementor-widget elementor-widget-text-editor\" data-id=\"2453a39a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It\u2018s basically a pretty direct connection from your frontend to your devices (via Azure IoT Hub \u2014 ok, so it\u2019s actually <em class=\"kl\">not<\/em> a direct connection, but it <em class=\"kl\">feels<\/em> like one). For React, you get a hook called <code class=\"gm km kn ko kp b\">useTelemetry<\/code> so that every time a new temperature value arrives, your local state is updated and your components are re-rendered.<\/p><p id=\"f2c7\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">Sounds promising? Alright, let\u2019s try it out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78ea6c07 elementor-widget elementor-widget-heading\" data-id=\"78ea6c07\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Getting started<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66dc428 elementor-widget elementor-widget-text-editor\" data-id=\"66dc428\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The easiest way to setup a ux4iot instance is by going to the <a class=\"au kq\" href=\"https:\/\/github.com\/deviceinsight\/ux4iot-quickstart\" target=\"_blank\" rel=\"noopener ugc nofollow\">quick-start repo<\/a> and pushing the \u201cDeploy to Azure Button\u201d. This will take you to the deployment page where you can select the Resource group and region to deploy to.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15d7e9ce elementor-widget elementor-widget-image\" data-id=\"15d7e9ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"580\" height=\"429\" src=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/azure-custom-deplyment.png\" class=\"attachment-medium_large size-medium_large wp-image-26513\" alt=\"Form in Azure Portal for creating a custom deployment\" srcset=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/azure-custom-deplyment.png 700w, https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/azure-custom-deplyment-300x222.png 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Deploying a ux4iot instance and Azure IoT Hub<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c8e5631 elementor-widget elementor-widget-text-editor\" data-id=\"3c8e5631\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"43a5\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">After you hit \u201cCreate\u201d it takes a couple of minutes until the deployment is complete. The result is a new Azure IoT Hub and a ux4iot instance. Both are already wired together, so no additional configuration is necessary.<\/p><p id=\"2dd3\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">You should see the both IoT Hub and the ux4iot instance in the Azure Portal:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c2abff elementor-widget elementor-widget-image\" data-id=\"4c2abff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"580\" height=\"386\" src=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/ux4iot-resource-group.png\" class=\"attachment-medium_large size-medium_large wp-image-26446\" alt=\"ux4iot custom resource along with the IoT Hub in the Azure resource group\" srcset=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/ux4iot-resource-group.png 700w, https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/ux4iot-resource-group-300x200.png 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-506bdd8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"506bdd8\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1dfad7f blog_col\" data-id=\"1dfad7f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0554f80 elementor-widget elementor-widget-heading\" data-id=\"0554f80\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">React app<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3b411e elementor-widget elementor-widget-text-editor\" data-id=\"a3b411e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We now need a React application. This is easily accomplished by using <a class=\"au kq\" href=\"https:\/\/github.com\/facebook\/create-react-app\" target=\"_blank\" rel=\"noopener ugc nofollow\">create-react-app<\/a> (if you do not want to perform the steps yourself, you can find the finished project on <a class=\"au kq\" href=\"https:\/\/github.com\/stefan-hudelmaier\/ux4iot-example\" target=\"_blank\" rel=\"noopener ugc nofollow\">GitHub<\/a>):<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e56fdeb elementor-widget elementor-widget-ha-source-code happy-addon ha-source-code happy-addon-pro\" data-id=\"e56fdeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ha-source-code.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"ha-source-code prism\" data-lng-type=\"bash\" data-after-copy=\"Copied\">\n\t\t\t<pre>\n\t\t\t\t\t\t\t<button class=\"ha-copy-code-button\">Copy to clipboard<\/button>\n\t\t\t\t\t\t\t<code class=\"language-bash\">\n\t\t\t\t\tnpx create-react-app temp-visualizer\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a0ddb0 elementor-widget elementor-widget-text-editor\" data-id=\"3a0ddb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"ce5b\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">The <code class=\"gm km kn ko kp b\">ux4iot-react<\/code> NPM package must be added the project:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dc7269 elementor-widget elementor-widget-ha-source-code happy-addon ha-source-code happy-addon-pro\" data-id=\"6dc7269\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ha-source-code.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"ha-source-code prism\" data-lng-type=\"bash\" data-after-copy=\"Copied\">\n\t\t\t<pre>\n\t\t\t\t\t\t\t<button class=\"ha-copy-code-button\">Copy to clipboard<\/button>\n\t\t\t\t\t\t\t<code class=\"language-bash\">\n\t\t\t\t\tcd temp-visualizer\nnpm install ux4iot-react\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b068526 elementor-widget elementor-widget-text-editor\" data-id=\"b068526\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"3f65\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">Replace the file <code class=\"gm km kn ko kp b\">App.js<\/code> with this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-721a2f9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"721a2f9\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d3b47ba\" data-id=\"d3b47ba\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ad925b2 elementor-widget elementor-widget-ha-source-code happy-addon ha-source-code happy-addon-pro\" data-id=\"ad925b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ha-source-code.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"ha-source-code prism\" data-lng-type=\"javascript\" data-after-copy=\"Copied\">\n\t\t\t<pre>\n\t\t\t\t\t\t\t<button class=\"ha-copy-code-button\">Copy to clipboard<\/button>\n\t\t\t\t\t\t\t<code class=\"language-javascript\">\n\t\t\t\t\timport &#039;.\/App.css&#039;;\nimport {Ux4iotContextProvider, useTelemetry} from &quot;ux4iot-react&quot;;\n\nconst UX4IOT_ADMIN_CONNECTION_STRING = &#039;YOUR_ADMIN_CONNECTION_STRING&#039;;\n\nconst TemperatureView = props =&gt; {\n    const temperature = useTelemetry(&#039;simulated-device&#039;, &#039;temperature&#039;);\n    return &lt;div&gt;{temperature}&lt;\/div&gt;;\n}\n\nfunction App() {\n    return (\n        &lt;div className=&quot;App&quot;&gt;\n            &lt;Ux4iotContextProvider\n                options={{ adminConnectionString: UX4IOT_ADMIN_CONNECTION_STRING }}\n            &gt;\n                &lt;TemperatureView \/&gt;\n            &lt;\/Ux4iotContextProvider&gt;\n        &lt;\/div&gt;\n    );\n}\n\nexport default App\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d638cd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d638cd\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1df4b9b blog_col\" data-id=\"1df4b9b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e255bec elementor-widget elementor-widget-text-editor\" data-id=\"e255bec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"3f65\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">Nothing fancy, it just displays the most recent temperature value in a <code class=\"gm km kn ko kp b\">div<\/code> . Retrieve the connection string from the Azure Portal (see screenshot below) and insert it in line 5.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fbcaae elementor-widget elementor-widget-image\" data-id=\"5fbcaae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"580\" height=\"587\" src=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string.png\" class=\"attachment-medium_large size-medium_large wp-image-26451\" alt=\"Retrieving the Admin connection string for a ux4iot instance\" srcset=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string.png 700w, https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string-297x300.png 297w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Retrieving the Admin connection string for a ux4iot instance<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8ff380 elementor-widget elementor-widget-text-editor\" data-id=\"c8ff380\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"307a\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">Now, you can start the React application locally:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dbc448 elementor-widget elementor-widget-ha-source-code happy-addon ha-source-code happy-addon-pro\" data-id=\"5dbc448\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ha-source-code.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"ha-source-code prism\" data-lng-type=\"bash\" data-after-copy=\"Copied\">\n\t\t\t<pre>\n\t\t\t\t\t\t\t<button class=\"ha-copy-code-button\">Copy to clipboard<\/button>\n\t\t\t\t\t\t\t<code class=\"language-bash\">\n\t\t\t\t\tnpm run start\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8649aae elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8649aae\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-29aae98 blog_col\" data-id=\"29aae98\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-afd8369 elementor-widget elementor-widget-heading\" data-id=\"afd8369\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Simulating device data<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b50f40 elementor-widget elementor-widget-text-editor\" data-id=\"8b50f40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"934d\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">All that\u2019s missing now is some data. Let\u2019s create some.<\/p><p id=\"97c2\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">I have built a very simple <a class=\"au kq\" href=\"https:\/\/github.com\/stefan-hudelmaier\/simulated-temperature-sensor\" target=\"_blank\" rel=\"noopener ugc nofollow\">simulator of a temperature sensor<\/a> that sends a value to IoT Hub every 3 seconds. You can start it with Docker:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35ced0a elementor-widget elementor-widget-image\" data-id=\"35ced0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"580\" height=\"587\" src=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string.png\" class=\"attachment-medium_large size-medium_large wp-image-26451\" alt=\"Retrieving the Admin connection string for a ux4iot instance\" srcset=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string.png 700w, https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string-297x300.png 297w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Retrieving the Admin connection string for a ux4iot instance<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb88aba elementor-widget elementor-widget-text-editor\" data-id=\"fb88aba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"307a\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">Now, you can start the React application locally:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0cfce5 elementor-widget elementor-widget-ha-source-code happy-addon ha-source-code happy-addon-pro\" data-id=\"d0cfce5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ha-source-code.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"ha-source-code prism\" data-lng-type=\"bash\" data-after-copy=\"Copied\">\n\t\t\t<pre>\n\t\t\t\t\t\t\t<button class=\"ha-copy-code-button\">Copy to clipboard<\/button>\n\t\t\t\t\t\t\t<code class=\"language-bash\">\n\t\t\t\t\tdocker run --rm -ti \\\n    -e DEVICE_CONNECTION_STRING=&quot;HostName=...&quot; \\\n    ghcr.io\/stefan-hudelmaier\/simulated-temperature-sensor:main\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bb502d9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bb502d9\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4b6e4b6 blog_col\" data-id=\"4b6e4b6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c60524 elementor-widget elementor-widget-heading\" data-id=\"9c60524\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">See it in action<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c8a1ae elementor-widget elementor-widget-text-editor\" data-id=\"5c8a1ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Create a device called <code class=\"gm km kn ko kp b\">simulated-device<\/code> in the IoT Hub that you deployed earlier. Copy the connection string of the device and use it as the value of the <code class=\"gm km kn ko kp b\">DEVICE_CONNECTION_STRING<\/code> environment variable in the snippet above.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3ef18d elementor-widget elementor-widget-image\" data-id=\"c3ef18d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"348\" src=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string-of-device.png\" class=\"attachment-medium_large size-medium_large wp-image-26457\" alt=\"Getting the connection string of an IoT Hub device in the Azure Portal\" srcset=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string-of-device.png 700w, https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/getting-connection-string-of-device-300x180.png 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Getting the connection string of an IoT Hub device<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b88ac0 elementor-widget elementor-widget-text-editor\" data-id=\"7b88ac0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"8510\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">The temperature sensor simulator will start sending data. You should see the value automatically updated in the React application.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6514905 elementor-widget elementor-widget-image\" data-id=\"6514905\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"561\" src=\"https:\/\/device-insight.com\/wp-content\/uploads\/2022\/09\/data-simulation-and-react-app.gif\" class=\"attachment-full size-full wp-image-26460\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">The data simulator is on the left, the React application is on the right<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7657f1b elementor-widget elementor-widget-text-editor\" data-id=\"7657f1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"4b61\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">While it admittedly looks rather plain, I hope you see the potential: You can design the UI any way you want and still have convenient access to live IoT data.<\/p><p id=\"8ad2\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">Subscribing to telemetry values is only one feature of ux4iot, it can also be used for Direct Methods, Device Twin management, monitoring the online state of a device, etc. I will cover these in a future post. The same goes for the access control aspects, which we have ignored in this introduction to ux4iot as well.<\/p><p id=\"7dfe\" class=\"pw-post-body-paragraph jn jo ij jp b jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk ic gn\" data-selectable-paragraph=\"\">You can find the end result of the described steps on <a class=\"au kq\" href=\"https:\/\/github.com\/stefan-hudelmaier\/ux4iot-example\" target=\"_blank\" rel=\"noopener ugc nofollow\">GitHub<\/a>. And some further reading:<\/p><ul class=\"\"><li id=\"f064\" class=\"lr ls ij jp b jq jr ju jv jy lt kc lu kg lv kk lw lx ly lz gn\" data-selectable-paragraph=\"\">Documentation for ux4iot: <a class=\"au kq\" href=\"https:\/\/docs.ux4iot.com\" target=\"_blank\" rel=\"noopener ugc nofollow\">https:\/\/docs.ux4iot.com<\/a><\/li><li id=\"a8cd\" class=\"lr ls ij jp b jq ma ju mb jy mc kc md kg me kk lw lx ly lz gn\" data-selectable-paragraph=\"\">ux4iot on the <a class=\"au kq\" href=\"https:\/\/azuremarketplace.microsoft.com\/en-us\/marketplace\/apps\/deviceinsightgmbh-4961725.ux4iot\" target=\"_blank\" rel=\"noopener ugc nofollow\">Azure Marketplace<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7917c55c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7917c55c\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-78099873 blog_col\" data-id=\"78099873\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-753c7837 elementor-widget elementor-widget-heading\" data-id=\"753c7837\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Recommended posts<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc8065b elementor-widget elementor-widget-shortcode\" data-id=\"dc8065b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"teasers teasers-single-post\"><div class=\"teasers__container\"><div class=\"teasers__single-teaser teasers__single-teaser--developer\"><div class=\"teasers__content\"><div class=\"date__box\"><div class=\"date__box-name date__box-name--developers\">Stefan Hudelmaier<\/div><div class=\"date__box-date date__box-date--developers\">2023\/01\/25<\/div><div><a href=\"https:\/\/device-insight.com\/en\/developers_blog_category\/azure\/\" class=\"date__box-button date__box-button--developers\">Azure<\/a><\/div><\/div><h2 class=\"headline\"><a href=\"https:\/\/device-insight.com\/en\/developers-blog\/vetting-azure-managed-applications-through-ci-cd\/\">Vetting Azure Managed Applications through CI\/CD<\/a><\/h2><div class=\"description\">How to speed up reviews for Azure Managed Applications with the right validity checks.<\/div><\/div><\/div><div class=\"teasers__single-teaser teasers__single-teaser--developer\"><div class=\"teasers__content\"><div class=\"date__box\"><div class=\"date__box-name date__box-name--developers\">Stefan Hudelmaier<\/div><div class=\"date__box-date date__box-date--developers\">2023\/01\/03<\/div><div><a href=\"https:\/\/device-insight.com\/en\/developers_blog_category\/azure\/\" class=\"date__box-button date__box-button--developers\">Azure<\/a><\/div><\/div><h2 class=\"headline\"><a href=\"https:\/\/device-insight.com\/en\/developers-blog\/azure-managed-applications-and-tags\/\">Managed Applications and tags<\/a><\/h2><div class=\"description\">How to set tags of a managed resource group when deploying Azure Managed Applications.<\/div><\/div><\/div><\/div><\/div>\r\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>How to access IoT data easily and benefit from complete freedom over your user interface.<\/p>\n","protected":false},"author":13,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false},"tags":[141],"developers_blog_category":[138],"class_list":["post-26442","developers-blog","type-developers-blog","status-publish","hentry","tag-azure","developers_blog_category-azure"],"acf":[],"_links":{"self":[{"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/developers-blog\/26442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/developers-blog"}],"about":[{"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/types\/developers-blog"}],"author":[{"embeddable":true,"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/users\/13"}],"version-history":[{"count":46,"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/developers-blog\/26442\/revisions"}],"predecessor-version":[{"id":36230,"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/developers-blog\/26442\/revisions\/36230"}],"wp:attachment":[{"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/media?parent=26442"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/tags?post=26442"},{"taxonomy":"developers_blog_category","embeddable":true,"href":"https:\/\/device-insight.com\/en\/wp-json\/wp\/v2\/developers_blog_category?post=26442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}