In this article I want to explain you how to deploy the project architecture on an azure web app service plan. Let's see shortly the architecture.
Data come from smartphones and are collected using generic sensors API. The smartphone collects values with a certain frequency (ex. 20 Hz), and stores front end side an object with last 5 sec values. Every 5 second this variable is sent as a json with a standard POST to a middleware. The middleware uses Azure SDK to send all the collected values to Azure IoT hub. You can deploy this middleware both locally or on a new Azure web app plan. The dashboard backend collects values from the Azure IoT hub using Azure Event Hub, process those values (1 activity/sec) and exposes to the dashboard with a REST interface. The dashboard now collects and shows the activity values.
Edge basedIt's just like the first case, but data processig runs on the frontend javascript side, so again every 5 seconds the elaborated values are sent with a POST to the middleware. The middleware forwards just like before the messages to the Azure IoT Hub using Azure SDK. Unlike the prevoius case, this time the dashboard backend collects the values but does not do any process - just expose the already processed values to the dashboard.
How to run it:
git clone https://github.com/stefanofoti/iot-assignment
Edit the code, replace with your
IoT Event Hub details in the dashboard BE,
Replace your event hub endpoint
private readonly static string s_eventHubsCompatibleEndpoint = "YOUR_ENDPOINT";
You can get it in this way:
az iot hub show --query properties.eventHubEndpoints.events.endpoint --name {your IoT Hub name}
Replace your IoT event hub compatible path
private readonly static string s_eventHubsCompatiblePath = "YOUR_PATH";
You can get it in this way:
az iot hub show --query properties.eventHubEndpoints.events.path --name {your IoT Hub name}
Replace your sas key:
private readonly static string s_iotHubSasKey = "YOUR_KEY";
You can get it in this way:
az iot hub policy show --name service --query primaryKey --hub-name {your IoT Hub name}
Replace also the device connections strings for each device in the collecting app middleware.
How to try it locally?
Be sure you have the.NET Core sdk correctly installed. You need at least version.NET Core 3.1 to correctly run both the part of the project.
Move to the collecting app folder
cd activity-collecting-app/
dotnet restore
dotnet run
Open a new terminal in the cloned folder and move to the dashboard folder
cd activity-cloud-dashboard/
dotnet restore
dotnet run
Now the dashboard is available at:
https://localhost:5002/
While the activity collecting app is running on you machine on port 8080:
https://localhost:8080/
If you have port 8080 open and no firewall blocking ingoing connections, you should already be able to connect to the dashboard from your smartphone, so open your phone browser and type:
https://{YOUR_PC_IP_ADDRESS}:8080/
You should see the collecting app. Pressing the start button the page will start REST posting the collected row values every 5 seconds to the middleware. If eerything works fine, you should see some log messages in the middleware process running on your PC.
How to debug in case of errors?
It is easy to access the Javascript smartphone log using Chrome devices. Type chrome://inspect/#devices on your chrome desktop browser, connect your Android smartphone to the PC - be sure you installed ADB drivers and developer options are ebabled on your mobile. Again, if things work as they should, you should not see any red message.
From your pc, surf to the dashboard. You should see your values.
In order to deploy it on Azure as a Web Application, just keep on going as below.
Set user credential for deployment, so open the azure terminal and:
az webapp deployment user set --user-name <username> --password <password>
Create a Application Service plan
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE
Create the application
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --deployment-local-git
You should get an output with your local git where to push your data
"deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
In your local terminal
git remote add azure <deploymentLocalGitUrl-from-create-step>
git push azure master
And the deploy will start!
Once finished your dashboard will be available at:
http://<app_name>.azurewebsites.net/
If you want, you can also deploy the middleware and collecting webpage on Azure. Just repeat those steps again pushing the collecting app this time.
Comments
Please log in or sign up to comment.