Using Azure IoT Central API in React App

This is a simple tutorial how to using Azure IoT Central API in React App.

- Wiznet W5100S-EVB-Pico

- Microsoft Azure Central

1. Set value

Setting Host API Setting Authorization.

REACT_APP_FUNCTION_CENTRAL_ENDPOINT = "Insert your API"; 
REACT_APP_FUNCTION_CENTRAL_TOKEN = "Insert your auth token";

2. Caution

REACT_APP must be included in the variable name.

• ‘Axios’ is an HTTP asynchronous communication library that utilizes the Promise API for browsers and Node.js.
• You can use ‘Fetch’

import axios from "axios";

• Declare the API and auth token set in .env file.

const apiEndpoint = process.env.REACT_APP_FUNCTION_CENTRAL_ENDPOINT;
const apiToken = process.env.REACT_APP_FUNCTION_CENTRAL_TOKEN;

• Write a function that retrieves a value using the API

const getMonitorData = async (param) => {
  const config = {
    method: "GET",
    data: JSON.stringify(param),
    headers: {
      Authorization: apiToken,
    },
    url: `${apiEndpoint}/.../${param}?api-version=1.0`, // insert your API
  };

  try {
    const { data } = await axios(config);
    console.log("get monitor data");
    return data;
  } catch (error) {
    console.log(error);
    return false;
  }
};