Milestone 4

Configure Azure IoT Hub and Web PubSub for real-time bidirectional communication
Implement device simulators with interactive keyboard controls that send telemetry to IoT Hub
Build Azure Functions REST API with WebSocket broadcasting via Azure Web PubSub
Display real-time telemetry data in an Expo app using native WebSocket connections
Execute cloud-to-device (C2D) commands with instant feedback via WebSocket updates
Implement authentication with protected routes and role-based access control

🔍 Context

In this milestone, you’ll integrate your IoT devices from Connected Objects (6P3) with your Expo app. Since working directly with physical hardware can be challenging during development, you’ll create device simulators that mock your reterminal subsystems. This allows you to:

Develop and test your Expo app independently of hardware availability
Verify your Azure IoT Hub configuration works correctly
Test bidirectional communication (Device-to-Cloud and Cloud-to-Device)
Iterate quickly without hardware debugging

In Milestone 5, you’ll replace these simulators with your actual reterminal subsystems.

Architecture Overview

Here’s how the components communicate:

Device-to-Cloud (D2C): Simulator sends telemetry → IoT Hub → Event Hub Listener → Web PubSub broadcasts → Expo app receives via WebSocket (real-time)
Cloud-to-Device (C2D): Expo app sends command → Azure Function → IoT Hub → Simulator executes → Sends immediate telemetry → Updates app via WebSocket
Interactive Events: Keyboard press in simulator → Immediate telemetry → WebSocket push → Instant app update (< 100ms latency)

This architecture uses native WebSocket protocol along with Azure Web PubSub to provide a scalable WebSocket infrastructure. It also enables bidirectional real-time communication with instant feedback, with HTTP endpoints available as fallback via manual refresh.

📦 Understanding the Starter Template

You’ll start with the iot-hub-starter template which provides the foundational structure while requiring you to customize for your specific devices.

What’s Provided

Complete authentication system (login, protected routes, user roles)
WebSocket real-time connection setup with Azure Web PubSub
Tab-based navigation (one tab per team member’s device)
Type-safe patterns with comprehensive examples
Working device simulator example (temperature/humidity/motion/door/LED)
Azure Function middleware with Event Hub listener and Web PubSub broadcasting
CORS utilities and error handling

What You’ll Build

Each team member is responsible for one device tab:

Define YOUR device’s telemetry structure (based on 6P3 hardware)
Customize the device simulator for YOUR sensors/actuators
Build YOUR device’s UI in your assigned tab
Implement commands for YOUR device’s actuators (if applicable)

For M4, each student works independently. You’ll have your own Azure IoT Hub, your own customized device simulator, your own Azure Function deployment, and your assigned tab in the shared Expo app repo. For M5, you’ll merge into one shared Azure infrastructure.

Expected Project Structure

Directoryiot-hub-starter/
- Directoryapp/ Expo App (SHARED REPO)
  - Directoryapp/(tabs)/
    device1.tsx ← Student 1 edits THIS
    device2.tsx ← Student 2 edits THIS
    device3.tsx ← Student 3 edits THIS
    _layout.tsx Tab navigation
  - Directoryconfig/
    devices.ts ← ALL students configure their device IDs
  - Directorytypes/
    telemetry.ts ← ALL students add their device interface
    commands.ts ← ALL students add their command types
  - Directoryservices/
    api.ts
    signalr.ts
  - Directorycontexts/
    AuthContext.tsx
- Directoryazure-function/ Individual for M4, merged for M5
  - Directorysrc/
    Directoryfunctions/
    getTelemetry.ts
    sendCommand.ts
    negotiate.ts
    eventHubListener.ts
    types.ts ← Students coordinate types here too
- Directorydevice-simulators/
  - Directorydevice-simulator-example/ Reference - each student copies
    simulator.ts Complete working example
    .env.example
    README.md Customization guide
  - Directorydevice-simulator-NAME1/ ← Student 1’s customized simulator
    …
  - Directorydevice-simulator-NAME2/ ← Student 2’s customized simulator
    …
  - Directorydevice-simulator-NAME3/ ← Student 3’s customized simulator
    …

🌿 Part 0: Branch

Before starting, one team member needs to set up the starter template in your shared repository.

Designate one team member to set up the branch (this person will be “Team Lead” for setup only).
Team Lead: Download the starter template from Moodle and extract it to a temporary location on your computer.
Team Lead: In your team’s project repository, create and switch to a new branch:
Terminal window
```
1
git checkout -b milestone-4
```
Team Lead: Drag the following folders from the extracted starter template into your repository root:
- app/ (Expo app with tabs)
- azure-function/ (REST API middleware)
- device-simulator-example/ (reference implementation)

Team Lead: Commit and push the starter template:

1
git add app/ azure-function/ device-simulator-example/
2
git commit -m "Add Milestone 4 starter template"
3
git push -u origin milestone-4

Other team members: Pull the milestone-4 branch:
Terminal window
```
1
git fetch
2
git checkout milestone-4
```
All team members: Verify you have the three folders (app/, azure-function/, device-simulator-example/) in your local repository before proceeding to Part 1.

☁️ Part 1: Azure Setup

You should have already completed this in your Connected Objects course, but if not, follow the Getting Started with Azure instructions.

Log into portal.azure.com with your student account and confirm you have Azure for Students credits available.
If you haven’t already created an IoT Hub in 6P3:
- Search for “IoT Hub” in the Azure Portal
- Click Create
- Use the Free F1 tier (1 per subscription, 8,000 messages/day)
- Choose a region close to you (East US, *NOT Canada East!)
- Note your IoT Hub name (e.g., w26-telemetry-hub)
Create a device identity for YOUR device:

Each team member will set up their own IoT hub, and each will add the devices of their teammates.
- Navigate to your IoT Hub → Devices → Add Device
- Use descriptive device IDs (see naming convention below)
- Device ID examples: subsystem1, subsystem2, subsystem3
- Save your device’s Primary Connection String (you’ll need this for Part 2)
Navigate to Azure Portal and create a Web PubSub service:
- Search for “Web PubSub” and click Create
- Resource group: Same as your IoT Hub
- Name: w26-telemetry-hub
- Region: East US
- Pricing tier: Free (make sure you manually change to this!)
- After creation, go to Keys and copy the Connection string
You’ll need three types of connection strings:

Event Hub-compatible endpoint (for reading D2C telemetry):
- IoT Hub → Built-in endpoints → Event Hub-compatible endpoint
- Copy the full connection string
Service connection string (for sending C2D commands):
- IoT Hub → Shared access policies → service policy
- Copy the Primary connection string
Web PubSub connection string (for real-time broadcasting):
- Web PubSub resource → Keys → Connection string (primary)
In the .env files from the starter code:
- device-simulator-YOURNAME/.env → Your device connection string
- azure-function/.env → follow the instructions in the comments
Never commit .env files to Git!

Deeper Dive: Azure Cost Estimates

With the Free F1 tier IoT Hub (8,000 messages/day) and Flex Consumption Azure Functions plan:

Device sending data every 30 seconds = 2,880 messages/day per device
You can support ~2-3 simulators within the free tier
Azure Functions has 1 million free executions/month
Estimated cost for this milestone: $0 (within free tiers)

If you exceed limits, costs are minimal (~$0.25/day for F1 overflow). Monitor usage in Azure Portal.

🎮 Part 2: Device Simulator

You’ll customize the provided example simulator to match YOUR 6P3 device.

Overview

The device-simulator-example demonstrates a complete working simulator with:

Temperature/humidity sensor (readings)
Fan control (actuator)
LED control (actuator)
Motion sensor (event-based)
Door sensor (event-based)
Keyboard controls (‘m’ for motion, ‘d’ for door, ‘f’ for fan toggle, etc.)

Your task is to adapt this pattern to YOUR 6P3 device.

Requirements

Telemetry (Device-to-Cloud)

Customize for YOUR device’s sensors (based on 6P3 hardware)
Use MQTT protocol (already configured in example)
Send telemetry at regular intervals (default: 30 seconds)
Keyboard controls required: Adapt example triggers for YOUR device
Include timestamp in each message
State changes trigger immediate telemetry for instant app feedback

Commands (Cloud-to-Device)

Implement at least one command handler for YOUR device’s actuators
Commands should affect telemetry data (e.g., motor speed command → speed reading changes)
Send immediate telemetry after executing command
Return success/failure status to the caller

Keyboard Controls

Implement at least one keyboard trigger for YOUR device
Examples to adapt:
- Motor controller: Press +/- to increase/decrease speed
- LED: Press r/g/b for colors
- Sensor: Press s to force a reading
Keyboard events send immediate telemetry for testing
Display help menu with YOUR keyboard mappings

Implementation Steps

Copy the example:

1
cd iot-hub-starter
2
cp -r device-simulator-example device-simulator-YOURNAME
3
cd device-simulator-YOURNAME

Replace YOURNAME with your name or device type (e.g., device-simulator-alice).

Before customizing, understand what’s provided:
- Connection management: MQTT connection to IoT Hub with automatic reconnection
- Telemetry generation: generateTelemetry() function with mock sensor data
- Command handlers: onDeviceMethod() for C2D commands
- Keyboard controls: Interactive testing with readline
- Graceful shutdown: Clean disconnect on SIGINT/SIGTERM

Copy .env.example to .env:

1
cp .env.example .env

Edit .env with YOUR device connection string from Part 1:

1
DEVICE_CONNECTION_STRING=HostName=YOUR-HUB.azure-devices.net;DeviceId=YOUR-DEVICE;SharedAccessKey=YOUR-KEY
2
TELEMETRY_INTERVAL=30000

In simulator.ts, find the state variables section (~line 45):

1
// TODO: CUSTOMIZE - Device State Variables
2
// Example for motor controller:
3
let motorSpeed: number = 0; // 0-100 RPM
4
let motorDirection: 'forward' | 'reverse' | 'stopped' = 'stopped';
5
let temperature: number = 25.0; // Motor temperature

Replace with YOUR device’s sensors/actuators based on your 6P3 hardware.

Update generateTelemetry() function (~line 80):

1
function generateTelemetry() {
2
  return {
3
    deviceId: process.env.DEVICE_ID || 'unknown',
4
    // YOUR device fields here
5
    motorSpeed,
6
    motorDirection,
7
    temperature: parseFloat(
8
      (temperature + (Math.random() - 0.5) * 2).toFixed(1)
9
    ),
10
    timestamp: new Date().toISOString(),
11
  };
12
}

Match the structure to your physical device capabilities.

Replace fan/LED commands with YOUR actuators (~line 190):

1
// Example: Motor speed control
2
client.onDeviceMethod('SetMotorSpeed', async (request, response) => {
3
  const { speed } = request.payload || {};
4
  console.log(`🎛️  Command: SetMotorSpeed(${speed})`);
5

6
  if (!speed || speed < 0 || speed > 100) {
7
    response.send(400, { error: 'Speed must be 0-100' });
8
    return;
9
  }
10

11
  motorSpeed = speed;
12
  response.send(200, {
13
    message: `Motor speed set to ${speed}`,
14
    motorSpeed,
15
  });
16
  // Send immediate telemetry for instant app feedback
17
  await sendTelemetry(`command: SetMotorSpeed(${speed})`, false);
18
});

Implement handlers for all YOUR device’s actuators.

Update keyboard mappings (~line 355):

1
switch (key.name) {
2
  case '+':
3
    motorSpeed = Math.min(100, motorSpeed + 10);
4
    console.log(`\n⬆️  Motor speed increased: ${motorSpeed}`);
5
    await sendTelemetry('keyboard: speed increase', false);
6
    break;
7
  case '-':
8
    motorSpeed = Math.max(0, motorSpeed - 10);
9
    console.log(`\n⬇️  Motor speed decreased: ${motorSpeed}`);
10
    await sendTelemetry('keyboard: speed decrease', false);
11
    break;
12
  case 'h':
13
    console.log('\n🎮 Keyboard Controls:');
14
    console.log('  [+] - Increase motor speed');
15
    console.log('  [-] - Decrease motor speed');
16
    console.log('  [h] - Show help');
17
    console.log('  [q] - Quit');
18
    break;
19
}

Make controls intuitive for YOUR device type.

Install Dependencies
Terminal window
```
1
bun install
```
Test Your Simulator
Terminal window
```
1
bun start
```
Verify it’s working:
- Simulator connects successfully (see ”✅ Connected” message)
- Telemetry sends every 30 seconds (see ”📤 Sent” messages)
- Keyboard controls respond (press ‘h’ for help)
Verify data reaches IoT Hub (optional but recommended):
- Azure Portal → Your IoT Hub → Metrics → Check “Telemetry messages sent” count increases
- OR run Azure CLI: az iot hub monitor-events --hub-name YOUR-HUB-NAME (see Monitoring section)
Update README.md in your simulator folder:
- What device you’re simulating
- What sensors/actuators you’ve implemented
- Keyboard control mapping
- Command list with examples

For complete implementation details, see the Device Simulator README in the appropriate subfolder.

Customization Checklist

⚡ Part 3: REST API with Azure Functions

Build a middleware layer using Azure Functions that exposes a simple REST API for your Expo app. This approach is simpler and more secure than connecting Expo directly to IoT Hub.

Required Endpoints

GET /api/telemetry (HTTP fallback)

Returns current telemetry and recent history for all devices
Reads from in-memory store (populated by Event Hub Listener)
Used for initial data load and manual refresh

POST /api/negotiate (WebSocket connection)

Returns Web PubSub connection URL with JWT token
Used by Expo app to establish WebSocket connection
Hub name must match Event Hub Listener configuration

POST `/api/devices/{deviceId}/command`

Sends cloud-to-device command to specified device
Uses IoT Hub Service Client to invoke direct methods
Returns command result (success/failure)

Event Hub Listener (background process)

Subscribes to IoT Hub Event Hub-compatible endpoint
Stores telemetry in memory (last ~20 readings)
Broadcasts to Web PubSub for real-time WebSocket push to all connected clients

Implementation Steps

Navigate to the azure-function folder and install dependencies:
Terminal window
```
1
cd azure-function
2
bun install
```

Copy local.settings.json.example to local.settings.json:

1
cp local.settings.json.example local.settings.json

Edit local.settings.json with YOUR connection strings from Part 1:

1
{
2
  "IsEncrypted": false,
3
  "Values": {
4
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
5
    "FUNCTIONS_WORKER_RUNTIME": "node",
6
    "EVENT_HUB_CONNECTION_STRING": "Endpoint=sb://...",
7
    "EVENT_HUB_CONSUMER_GROUP": "$Default",
8
    "IOT_HUB_SERVICE_CONNECTION_STRING": "HostName=...",
9
    "WEB_PUBSUB_CONNECTION_STRING": "Endpoint=https://..."
10
  }
11
}

Follow the instructions in azure-function/src/types.ts to define your interface. Coordinate with teammates while editing to avoid conflicts.
Deploy to Azure:
- Install the Azure Functions VS Code extension (if not already installed)
- Right-click on the azure-function folder in VS Code
- Select Deploy to Function App
- Choose Create new Function App (or select existing)
- Choose Flex Consumption plan (free tier)
- Wait for deployment to complete
Danger
If you get a “subscription” based error:
1. Go to Subscriptions > Settings > Resource Providers
2. Make sure Microsoft.Web, Microsoft.Resources, Microsoft.Storage, Microsoft.Insights, and Microsoft.OperationalInsights are all set to “Registered”.
3. In VS Code, make sure the last line of azure-function/package.json reads "main": "dist/src/functions/*.js".
4. Try deploying again by hitting CMD/CTRL+SHIFT+P and running “Azure Functions: Deploy to Function App…”.
5. If it asks about a Dockerfile, click “Code”
6. Select “Node 22”
7. Select “Secrets”
If you’re still not able to get it to work, try using the Azure CLI:
Terminal window
```
1
az login
2

3
az storage account create \
4
  --name <pick-a-storage-account-name> \
5
  --resource-group <your-resource-group-name> \
6
  --location eastus \
7
  --sku Standard_LRS
8

9
az functionapp create \
10
  --name <pick-a-function-app-name> \
11
  --resource-group <your-resource-group-name> \
12
  --consumption-plan-location eastus \
13
  --runtime node \
14
  --runtime-version 22 \
15
  --functions-version 4 \
16
  --storage-account <same-storage-account-name-from-above>
17

18
cd azure-function/
19

20
bunx func azure functionapp publish <same-function-app-name-from-above>
```
In Azure Portal → Your Function App → Environment variables:
- Add EVENT_HUB_CONNECTION_STRING (from Part 1)
- Add EVENT_HUB_CONSUMER_GROUP (value: $Default)
- Add IOT_HUB_SERVICE_CONNECTION_STRING (from Part 1)
- Add WEB_PUBSUB_CONNECTION_STRING (from Part 1)
Never hardcode connection strings in your code! Always use environment variables.
Copy your Function App URL (e.g., https://your-app.azurewebsites.net) - you’ll need this for Part 4.

For M4, you only need YOUR simulator running. But if you want to test multi-device:

1
# Terminal 1: Student 1's simulator
2
cd device-simulator-alice && bun start
3

4
# Terminal 2: Student 2's simulator
5
cd device-simulator-bob && bun start
6

7
# Terminal 3: Student 3's simulator
8
cd device-simulator-charlie && bun start

The Event Hub Listener automatically handles multiple devices. The WebSocket broadcasts all telemetry, and the Expo app filters by device ID.

Deeper Dive: Why In-Memory Storage?

For this milestone, storing telemetry in memory is sufficient:

Pros: Simple, fast, no database costs
Cons: Data lost on cold starts (Azure Functions recycle after inactivity)

For production apps, consider:

Azure Cosmos DB (NoSQL)
Azure Table Storage (cheap)
Azure SQL Database
Time Series Insights

📱 Part 4: Expo App - Your Device Tab

Overview

The Expo app uses tabs, one per team member. You’ll build YOUR device’s UI in your assigned tab while your teammates build theirs independently.

The starter template provides:

Complete authentication (login, protected routes, roles)
Tab navigation structure (app/(tabs)/)
WebSocket integration for real-time updates
Example tab (device1.tsx) with comprehensive instructions

Requirements

Your Responsibilities

Build UI in YOUR assigned tab (device1.tsx, device2.tsx, or device3.tsx)
Define YOUR device’s TypeScript interfaces
Filter telemetry for YOUR device ID
Display YOUR device’s sensor readings
Implement command controls for YOUR actuators (if applicable)
Test YOUR tab independently

Team Responsibilities

Authentication system (already complete)
WebSocket connection (already setup)
API client (already configured)
Type coordination in shared files

4.1 Setup Your Device Tab

Identify if you’re tab 1, 2, or 3.

Edit config/devices.ts:

1
// Each student configures their device ID here
2
export const MY_DEVICE_ID = 'temp-sensor-alice'; // YOUR device ID from Azure

Update .env file:

1
EXPO_PUBLIC_API_URL=https://YOUR-FUNCTION-APP.azurewebsites.net/api
2
EXPO_PUBLIC_DEVICE_ID=temp-sensor-alice

Restart Expo after changing .env! (bun run start --clear)

4.2 Test WebSocket Data FIRST

Run your simulator:
Terminal window
```
1
cd device-simulator-YOURNAME
2
bun start
```

Run Expo app:

1
cd app
2
bun install  # First time only
3
bun run start

Press i for iOS or a for Android.

Username: owner
Password: owner123

Navigate to YOUR tab. Look at the console output in VS Code terminal:

1
📡 Raw telemetry received: {
2
  "deviceId": "temp-sensor-alice",
3
  "timestamp": "2026-05-03T14:30:00.000Z",
4
  "temperature": 22.4,
5
  "humidity": 65.2,
6
  "fanStatus": "off"
7
}
8
✅ Data for MY device: {...}

Copy this JSON structure, you’ll use it in the next step!

Press a key in your simulator (e.g., ‘f’ to toggle fan). You should see:
- Instant console output in the Expo terminal (< 1 second)
- WebSocket badge shows ”🔴 Live” in the app
If you don’t see updates, troubleshoot WebSocket connection before continuing.

4.3 Define Your Types

Based on the console output, define your interface in types/telemetry.ts:

1
// Base interface (already provided)
2
export interface BaseTelemetry {
3
  deviceId: string;
4
  timestamp: string;
5
}
6

7
// Student 1: Temperature Sensor - ADD THIS
8
export interface TempSensorTelemetry extends BaseTelemetry {
9
  deviceId: 'temp-sensor-alice'; // Literal type for discrimination
10
  temperature: number;
11
  humidity: number;
12
  fanStatus?: 'on' | 'off';
13
}
14

15
// Add to union type at the bottom:
16
export type TelemetryReading =
17
  | TempSensorTelemetry
18
  | MotorTelemetry
19
  | LEDTelemetry;

TypeScript can now discriminate: if (data.deviceId === 'temp-sensor-alice') narrows type to TempSensorTelemetry. Each student adds ONE interface. Announce in team chat before editing!

4.4 Build Your UI

In YOUR device tab file (device1.tsx, device2.tsx, or device3.tsx):

Look for the TODO around line 195:

194
/* TODO: Replace this JSON dump with actual UI components */
195
<Text>{JSON.stringify(data, null, 2)}</Text>;

Replace with sensor readings:

1
/* Current sensor readings */
2
<View style={styles.section}>
3
  <Text style={styles.sectionTitle}>🌡️ Current Readings</Text>
4

5
  <View style={styles.card}>
6
    <Text style={styles.label}>Temperature</Text>
7
    <Text style={styles.value}>{data.temperature?.toFixed(1)}°C</Text>
8
  </View>
9

10
  <View style={styles.card}>
11
    <Text style={styles.label}>Humidity</Text>
12
    <Text style={styles.value}>{data.humidity?.toFixed(1)}%</Text>
13
  </View>
14
</View>;

Add actuator status (if applicable):

1
{
2
  data.fanStatus && (
3
    <View style={styles.section}>
4
      <Text style={styles.sectionTitle}>🌀 Fan Status</Text>
5
      <Text
6
        style={[
7
          styles.status,
8
          data.fanStatus === 'on' && styles.statusOn,
9
        ]}
10
      >
11
        {data.fanStatus.toUpperCase()}
12
      </Text>
13
    </View>
14
  );
15
}

Add command controls (for owners only):

1
{
2
  user?.role === 'owner' && (
3
    <View style={styles.section}>
4
      <Text style={styles.sectionTitle}>🎮 Controls</Text>
5

6
      <View style={styles.buttonRow}>
7
        <Pressable
8
          style={[
9
            styles.button,
10
            isExecutingCommand && styles.buttonDisabled,
11
          ]}
12
          onPress={() => handleCommand('TurnFanOn', {})}
13
          disabled={isExecutingCommand}
14
        >
15
          <Text style={styles.buttonText}>Turn Fan On</Text>
16
        </Pressable>
17

18
        <Pressable
19
          style={[
20
            styles.button,
21
            isExecutingCommand && styles.buttonDisabled,
22
          ]}
23
          onPress={() => handleCommand('TurnFanOff', {})}
24
          disabled={isExecutingCommand}
25
        >
26
          <Text style={styles.buttonText}>Turn Fan Off</Text>
27
        </Pressable>
28
      </View>
29
    </View>
30
  );
31
}

Define your commands in types/commands.ts following the examples.

Implement handleCommand function. It’s already provided in the template, but customize for YOUR commands:

1
async function handleCommand(method: string, payload: any) {
2
  setIsExecutingCommand(true);
3
  try {
4
    await sendCommand(MY_DEVICE_ID, method, payload);
5
    // Success - NO alert popup! WebSocket will update UI
6
  } catch (error) {
7
    // Only show alert on ERROR
8
    Alert.alert('Command Failed', error.message);
9
  } finally {
10
    setIsExecutingCommand(false);
11
  }
12
}

4.5 Optional: Add Charts

Skip this if your device doesn’t need historical visualization (e.g., simple on/off switches). You can use charts for temperature over time, motor speed history, sensor readings, etc.

Install the library:

1
bun add react-native-chart-kit react-native-svg

Add to your tab:

1
import { LineChart } from 'react-native-chart-kit';
2
import { Dimensions } from 'react-native';
3

4
const screenWidth = Dimensions.get('window').width;
5

6
// In your component:
7
{
8
  history.length > 0 && (
9
    <View style={styles.section}>
10
      <Text style={styles.sectionTitle}>📈 Temperature History</Text>
11
      <LineChart
12
        data={{
13
          labels: history.slice(-10).map((r) =>
14
            new Date(r.timestamp).toLocaleTimeString('en-US', {
15
              hour: '2-digit',
16
              minute: '2-digit',
17
            })
18
          ),
19
          datasets: [
20
            {
21
              data: history
22
                .slice(-10)
23
                .map((r) => r.temperature || 0),
24
              color: (opacity = 1) =>
25
                `rgba(59, 130, 246, ${opacity})`, // Blue for device 1
26
              strokeWidth: 2,
27
            },
28
          ],
29
        }}
30
        width={screenWidth - 32}
31
        height={220}
32
        chartConfig={{
33
          backgroundColor: '#ffffff',
34
          backgroundGradientFrom: '#ffffff',
35
          backgroundGradientTo: '#ffffff',
36
          decimalPlaces: 1,
37
          color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
38
          labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
39
          style: {
40
            borderRadius: 16,
41
          },
42
        }}
43
        bezier
44
        style={styles.chart}
45
      />
46
    </View>
47
  );
48
}

🛠️ Common Issues & Solutions

Deeper Dive: Troubleshooting Tips

“Module not found: azure-iot-device”

Run bun install in YOUR device-simulator directory
Verify package.json includes the dependency

“Connection refused” when testing Azure Function locally

Ensure bun start is running in azure-function directory
Check port 7071 is not in use
Verify local.settings.json has correct connection strings

“Failed to fetch telemetry” in Expo app

Check EXPO_PUBLIC_API_URL in your .env file matches YOUR Azure Function URL
Verify YOUR Azure Function is deployed and accessible (test with curl)
Check CORS headers in Azure Function responses
Restart Expo dev server after changing .env file: bun run start --clear

WebSocket shows “⚠️ Manual Refresh” instead of ”🔴 Live”

Verify Web PubSub service is created in YOUR Azure Portal
Check WEB_PUBSUB_CONNECTION_STRING is set in YOUR Azure Function app settings
Test negotiate endpoint: curl https://YOUR-function.azurewebsites.net/api/negotiate
Check Expo console for WebSocket connection errors
Verify hub name is “telemetry” in both negotiate.ts and eventHubListener.ts

Telemetry not updating in real-time

Verify WebSocket connection is established (check console logs)
Check Event Hub Listener is running and broadcasting to Web PubSub
Verify device simulator is running and sending data
Check Azure Portal → IoT Hub → Metrics for message count
Check Azure Function logs for broadcasting errors
Test with keyboard press in simulator (should see instant update)
Fall back to manual pull-to-refresh if needed

Commands not working

Verify IOT_HUB_SERVICE_CONNECTION_STRING is set in Azure Function app settings
Check simulator has command handlers registered with onDeviceMethod()
Check Azure Function logs for error details
Verify device ID in API call matches simulator device ID

“WebSocket connection failed” or “Protocol error”

Do NOT use @microsoft/signalr library - Azure Web PubSub uses native WebSocket protocol
Use native WebSocket API: new WebSocket(url)
Message format: {type: 'message', dataType: 'json', data: {...}}
Check negotiate endpoint returns correct URL with JWT token

AsyncStorage errors in Expo

Verify version is 2.2.0 for SDK 54 compatibility
Run bun install after changing version
Clear Expo cache: bunx expo start --clear

“Property ‘status’ does not exist” TypeScript error in sendCommand

Azure SDK returns nested result: use result.result?.status || result.status
See azure-function README for correct parsing

Keyboard controls not working in simulator

Ensure process.stdin.setRawMode(true) is called
Check readline.emitKeypressEvents(process.stdin) is set up
Run simulator directly in terminal (not through VS Code debugger)
Test with simple key like ‘h’ for help menu

“My tab doesn’t show any data”

Check console logs - is telemetry being received?
Verify YOUR device ID matches in:
- Simulator .env (DEVICE_CONNECTION_STRING)
- config/devices.ts (MY_DEVICE_ID)
- Azure IoT Hub device identity
Check filtering logic in your tab: if (data.deviceId === MY_DEVICE_ID)
Run YOUR simulator and verify it’s sending telemetry

“I see other students’ data in my tab”

Check your filtering logic - should filter by YOUR device ID only
Verify you’re using MY_DEVICE_ID from config/devices.ts
TypeScript discriminated unions help: if (data.deviceId === 'temp-sensor-alice')

“Git conflict in types/telemetry.ts”

Communicate with your teammate
Combine both interfaces in the union type
Test both tabs after resolving
See “Merge Conflicts - How to Resolve” section above

“Simulator connects but commands don’t work”

Verify command handler is registered: client.onDeviceMethod('YourCommand', ...)
Check command method name matches exactly (case-sensitive)
Check device ID in command API call matches YOUR simulator
Look at simulator console for command reception logs

“Azure CLI monitor-events not working”

Install Azure CLI: brew install azure-cli (macOS) or download for Windows
Login: az login (opens browser)
Install IoT extension: az extension add --name azure-iot
Use correct hub name: az iot hub monitor-events --hub-name YOUR-HUB-NAME
If you see “No messages received”, verify simulator is running and sending telemetry
Check IoT Hub Metrics in Portal to confirm messages are arriving

📊 Grading Criteria

You have the option of demoing either in-person during our May 14 class, or via pre-recorded video. In either case, all members must be present for their demo. This means all members are present in class, or all members speak through their part in the shared recording.

If you decide to record a video, then you must adhere to this process:

All team members hop on a Teams call together
Select More actions > Record and transcribe > Start recording
Take turns sharing your screens and going through the rubric below to show me how each criteria is met
Keep it to 5 minutes MAX per person
Select More actions > Record and transcribe > Stop recording
After a few moments, the recording should show up in your group chat
Hit the share icon and share it with Vik

Walkthrough

Sign into your Microsoft account to see me walk through, in real time, what I’m expecting from you. Ensure the quality is set to max if the video is blurry.

If the above video doesn’t work, try accessing it here.

Azure Setup (2 points)

Criteria	Points
IoT Hub device identity configured with descriptive name	0.5
Azure Function deployed and accessible	0.5
Azure Web PubSub connection string configured	0.5
Demo shows IoT Hub metrics or Azure CLI monitoring	0.5

Method 1: Azure Portal Metrics (easiest, required)

Go to Azure Portal → Your IoT Hub
Click the Device to cloud messages chart that should be pinned under “Usage”
Click Local Time: on the top right
- Set Time range to “Last 30 minutes”
- Set Time granularity to “1 minute”
- Click “Apply”
You should see the graph updating in real time every minute

Method 2: Azure CLI (ideal, but not required)

Install Azure CLI with brew install azure-cli (macOS) or download for Windows.

1
# Login
2
az login
3

4
# Install IoT extension
5
az extension add --name azure-iot
6

7
# Show events from your IoT Hub
8
az iot hub monitor-events --hub-name YOUR-HUB-NAME --output table

Device Simulator (4 points)

Criteria	Points
Simulator customized for your 6P3 device	1.0
Telemetry structure matches your defined TypeScript interface	1.0
Keyboard controls work and are relevant to your device type	1.0
Commands work correctly for your actuators (if applicable)	1.0

TypeScript Types (1 points)

Criteria	Points
Interface defined in `types/telemetry.ts` with correct structure	1.0

Expo App Tab (7 points)

Criteria	Points
Tab displays your sensor data with clear labels	1.0
Real-time WebSocket updates work	2.0
UI is clean, intuitive, and appropriate for your device	1.0
Commands work with instant visual feedback (if applicable)	1.0
At least 2 types of users (ex. admin and non-admin) that have distinct authorization	2.0

Milestone 4

🔍 Context

Architecture Overview

📦 Understanding the Starter Template

What’s Provided

What You’ll Build

Expected Project Structure

🌿 Part 0: Branch

☁️ Part 1: Azure Setup

🎮 Part 2: Device Simulator

Overview

Requirements

Telemetry (Device-to-Cloud)

Commands (Cloud-to-Device)

Keyboard Controls

Implementation Steps

Customization Checklist

⚡ Part 3: REST API with Azure Functions

Required Endpoints

GET /api/telemetry (HTTP fallback)

POST /api/negotiate (WebSocket connection)

POST /api/devices/{deviceId}/command

Event Hub Listener (background process)

Implementation Steps

📱 Part 4: Expo App - Your Device Tab

Overview

Requirements

Your Responsibilities

Team Responsibilities

4.1 Setup Your Device Tab

4.2 Test WebSocket Data FIRST

4.3 Define Your Types

4.4 Build Your UI

4.5 Optional: Add Charts

🛠️ Common Issues & Solutions

📊 Grading Criteria

Walkthrough

Azure Setup (2 points)

Method 1: Azure Portal Metrics (easiest, required)

Method 2: Azure CLI (ideal, but not required)

Device Simulator (4 points)

TypeScript Types (1 points)

Expo App Tab (7 points)

POST `/api/devices/{deviceId}/command`