Customize the Cat Tracker web applicationΒΆ

The next step is to customize the web application. The heart rate readings must be visualized in a new chart on the Cat Tracker web application.

To customize the web application, complete the following steps:

  1. Navigate to the web application directory created while deploying the cat tracker web application to AWS:

    cd ~/nrf-asset-tracker/cat-tracker-web-app
    # ~/nrf-asset-tracker/cat-tracker-web-app
    
  2. Run the development server:

    npm start
    
  3. Open the web application by typing http://localhost:3000 in the address bar and select the entry for the simulated cat.

    The Cat Tracker web application

    At this point, you can start modifying the web application and add a new chart section that displays the latest heart rate readings.

  4. Define the SQL query that fetches the data of interest from Timestream. As shown in the following image, you can use the Timestream Query Browser on the AWS Console for defining the query:

    Timestream query browser

    The following query selects the last 100 heart rate readings for the device:

    SELECT
    -- date and value are column names used in the React component that renders the chart
    time as date,
    measure_value::double as value
    FROM 'table'
    WHERE deviceId='catId'
    AND measure_name = 'heartrate'
    ORDER BY time DESC
    LIMIT 100
    

    To learn more about the syntax, see Timestream Query language.

  5. After defining the query, add a new chart to the Cat Tracker web application that displays the data in a line chart.

You can view the code for the necessary changes in the simulator-ui repository.

Cat Tracker web application showing the heart rate readings

Cat Tracker web application showing the heart rate readings

At this point, you have successfully customized the Cat Tracker web application.

If you want to save your changes to the Cat Tracker web application in your own repository, maintain a fork and add the source repository as upstream:

git remote add upstream https://github.com/NordicSemiconductor/asset-tracker-cloud-app-js

To pull the changes from the source repository, run the following commands and resolve all the conflicts:

git fetch upstream saga
git rebase upstream/saga