You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/tutorials/control/air-quality-fleet.md
+22-21Lines changed: 22 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ cost: 200
24
24
---
25
25
26
26
In this tutorial you will learn how to set up a fleet of devices for yourself or third parties to collect air quality data.
27
-
You will then create a web app that shows the most recent reading for any device a user has access to.
27
+
You will then create a web application that shows the most recent reading for any device a user has access to.
28
28
29
29
{{< alert title="Learning Goals" color="info" >}}
30
30
@@ -59,20 +59,20 @@ In this section we'll set up one air sensing machine as our development device.
59
59
{{< table >}}
60
60
{{% tablestep number=1 %}}
61
61
62
-
Navigate to the [Viam app](https://app.viam.com) in a web browser.
62
+
Navigate to [Viam](https://app.viam.com) in a web browser.
63
63
Create an account and log in.
64
64
65
65
{{% /tablestep %}}
66
66
{{% tablestep number=2 %}}
67
67
68
-
Click the dropdown in the upper-right corner of the **FLEET** page and use the **+** button to create a new organization for your air quality machine company.
68
+
Click the dropdown in the upper-right corner of the **FLEET** page and use the **+** button to create a new {{< glossary_tooltip term_id="organization" text="organization" >}} for your air quality machine company.
69
69
Name the organization and click **Create**.
70
70
71
71
{{% /tablestep %}}
72
72
{{% tablestep number=3 %}}
73
73
74
74
Click **FLEET** in the upper-left corner of the page and click **LOCATIONS**.
75
-
A new location called `First Location` is automatically generated for you.
75
+
A new {{< glossary_tooltip term_id="location" text="location" >}} called `First Location` is automatically generated for you.
76
76
Use the **...** menu next to edit the location name to `Development`, then click **Save**.
77
77
78
78
{{% /tablestep %}}
@@ -90,8 +90,8 @@ For example, if you are using a Raspberry Pi, SSH to it and [enable serial commu
90
90
{{% /tablestep %}}
91
91
{{% tablestep number=5 %}}
92
92
93
-
Add a new [_{{< glossary_tooltip term_id="machine" text="machine" >}}_](/operate/get-started/basics/#what-is-a-machine) using the button in the top right corner of the **LOCATIONS** tab in the app.
94
-
Follow the **Set up your machine part** instructions to install `viam-server` on the machine and connect it to the Viam app.
93
+
Add a new [_{{< glossary_tooltip term_id="machine" text="machine" >}}_](/operate/get-started/basics/#what-is-a-machine) using the button in the top right corner of the **LOCATIONS** tab.
94
+
Follow the **Set up your machine part** instructions to install `viam-server` on the machine and connect it to Viam.
95
95
96
96
When your machine shows as connected, continue to the next step.
97
97
@@ -205,7 +205,7 @@ Let's create a dashboard for its measurements next.
205
205
206
206
The [Viam TypeScript SDK](https://ts.viam.dev/) allows you to build custom web interfaces to interact with your machines.
207
207
For this project, you'll use it to build a page that displays air quality sensor data for a given location.
208
-
You'll host the website on Viam Apps.
208
+
You'll host the website as a Viam Application.
209
209
210
210
The full code is available for reference on [GitHub](https://github.com/viam-labs/air-quality-fleet/blob/main/main.ts).
211
211
@@ -276,12 +276,12 @@ npm install
276
276
{{% /tablestep %}}
277
277
{{< /table >}}
278
278
279
-
### Access machines from your app
279
+
### Access machines from your application
280
280
281
-
Viam apps provide access to a machine by placing its API key in your local storage.
281
+
Viam applications provide access to a machine by placing its API key in your local storage.
282
282
You can access the data from your browser's local storage with the following code.
283
283
284
-
Currently, Viam apps only provide access to single machines but in future you will be able to access entire locations or organizations.
284
+
Currently, Viam applications only provide access to single machines but in future you will be able to access entire locations or organizations.
Open the app in your browser at `http://127.0.0.1:8000/`.
413
+
Open the application in your browser at `http://127.0.0.1:8000/`.
414
414
415
415
Then, open developer tools, go to the console and paste the copied JavaScript code to set your cookies.
416
416
@@ -424,7 +424,8 @@ Now that you have the connection code, you are ready to add code that establishe
424
424
{{< table >}}
425
425
{{% tablestep number=1 %}}
426
426
427
-
You'll first create a client to obtain the organization and location ID. Then you'll get a `dataClient` instance which accesses all the data in your location, and then query this data to get only the data tagged with the `air-quality` tag you applied with your data service configuration.
427
+
You'll first create a client to obtain the organization and location ID.
428
+
Then you'll get a `dataClient` instance which accesses all the data in your location, and then query this data to get only the data tagged with the `air-quality` tag you applied with your data service configuration.
428
429
The following code also queries the data for a list of the machines that have collected air quality data so that later, depending on the API key used with the code, your dashboard can show the data from any number of machines.
429
430
430
431
Paste the following code into the main function of your <file>main.ts</file> script, directly after the `locationID` line, in place of `// <Insert data client and query code here in later steps>`:
@@ -753,9 +754,9 @@ You can find all the code in the [GitHub repo for this tutorial](https://github.
753
754
Great work.
754
755
You've learned how to configure a machine and you can view its data in a custom TypeScript dashboard.
755
756
756
-
### Deploy the app to Viam apps
757
+
### Deploy the application as a Viam application
757
758
758
-
Let's deploy this dashboard so you don't have to run it locally.
759
+
Let's deploy this dashboard as a Viam-hosted application so you don't have to run it locally.
759
760
This will also allow others to use the dashboard.
760
761
761
762
{{< table >}}
@@ -779,7 +780,7 @@ This will also allow others to use the dashboard.
779
780
}
780
781
```
781
782
782
-
In the [Viam app](https://app.viam.com), navigate to your organization settings through the menu in upper right corner of the page.
783
+
In [Viam](https://app.viam.com), navigate to your organization settings through the menu in upper right corner of the page.
783
784
Find the **Public namespace** and copy that string.
784
785
Replace `<your-namespace>` with your public namespace.
785
786
@@ -808,7 +809,7 @@ For subsequent updates run these commands again with an updated version number.
0 commit comments