GithubHelp home page GithubHelp logo

hello-nrfcloud / web Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 20.28 MB

Retrieve real-time data from your long-range Nordic Semiconductor Development Kit within seconds

Home Page: https://hello.nrfcloud.com

License: BSD 3-Clause "New" or "Revised" License

TypeScript 96.82% JavaScript 0.28% CSS 2.90%
nordicsemiconductor cellular-iot hello-nrfcloud nrf-asset-tracker iot

web's Introduction

hello.nrfcloud.com

GitHub Actions semantic-release Renovate @commitlint/config-conventional code style: prettier ESLint: TypeScript

Retrieve real-time data from your Nordic Semiconductor Development Kit within seconds.

Setup

Install the dependencies:

npm ci

Run

npm start

Running the tests

End-to-end tests are run completely without a backend using Vite's built-in dev server to serve the data.

Deploy an instance of the AWS Map resources and export the map settings as environment variables MAP_REGION, MAP_NAME, and MAP_API_KEY before running it.

Note: It's currently not possible to run test for multiple browsers in parallel since the webServer > cannot be defined per project, and there is a state in the backend mock server that gets manipulated by the tests. So by default only the chrome project is run

npm run test:e2e

Run the Playwright code generator

npx playwright codegen

Debug individual tests

PWDEBUG=1 npx playwright test e2e-tests/

Interact with the e2e backend

See ./e2e-tests/README.e2e-server.md

Deploy

npx cdk bootstrap
npx cdk deploy --all

Create map resources

Deploy https://github.com/hello-nrfcloud/aws-map and follow the instructions to acquire the necessary parameters to display the map.

Continuous Deployment with GitHub Actions

Create a GitHub environment production.

Store the registry endpoint as a GitHub Action variable:

gh variable set REGISTRY_ENDPOINT --env production --body "<registry endpoint>"
# If using a custom domain name
gh variable set DOMAIN_NAME --env production --body "<domain name>"

Store the role used for continuous deployment as a secret:

CD_ROLE_ARN=`aws cloudformation describe-stacks --stack-name ${STACK_NAME:-hello-nrfcloud-web} | jq -r '.Stacks[0].Outputs[] | select(.OutputKey == "gitHubCdRoleArn") | .OutputValue'`
gh secret set AWS_ROLE --env production --body "${CD_ROLE_ARN}"

Store the stack name and the region as a variable:

gh variable set STACK_NAME --env production --body "${STACK_NAME:-hello-nrfcloud-web}"
gh variable set AWS_REGION --env production --body "eu-west-1"

Continuous integration

Deploy an instance of the AWS Map resources to the CI AWS account and store the map settings as variables:

# Make sure that the `ci` environment exists in this repo
gh variable set MAP_REGION --env ci --body "<mapRegion>"
gh variable set MAP_NAME --env ci --body "<mapName>"
gh variable set MAP_API_KEY --env ci --body "<apiKey>"

web's People

Contributors

coderbyheart avatar mlopezj avatar renovate[bot] avatar simensrostad avatar

Stargazers

 avatar

Watchers

 avatar  avatar

web's Issues

Link to 'troubleshooting tips'

When displaying the orange banner indicating that there is a problem with the device, the following text is displayed.

"Please make sure to follow the troubleshooting tips."

It may be better to make a hyper link out of the 'troubleshooting tips' and point users to the troubleshooting tips. If we dont have such a page, then it is better to remove the text.

Show nRFCloud.com device PIN

DKs come with a certificate for nRFCloud.com and for users to be able to associate their device, we need to show the PIN for those models that don't have it on the sticker.

Note: Thingy:91 with Solar Shield has PIN on sticker

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

  • WARN: Fallback to renovate.json file as a preset is deprecated, please use a default.json file instead.

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

  • chore(deps): update dependency @bifravst/eslint-config-typescript to v6.1.16
  • chore(deps): update dependency nock to v14.0.0-beta.14
  • chore(deps): update dependency tsx to v4.19.1
  • fix(deps): update proto (@hello.nrfcloud.com/proto-map, @sinclair/typebox)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/deploy.yaml
  • actions/checkout v4
  • actions/setup-node v4
  • actions/cache v4
  • aws-actions/configure-aws-credentials v4
.github/workflows/test-and-release.yaml
  • actions/checkout v4
  • actions/setup-node v4
  • actions/checkout v4
  • actions/setup-node v4
  • actions/cache v4
  • actions/upload-artifact v4
  • actions/checkout v4
  • actions/setup-node v4
.github/workflows/update-repo-info.yaml
  • actions/checkout v4
  • ubuntu 22.04
npm
package.json
  • @hello.nrfcloud.com/proto 14.3.14
  • @hello.nrfcloud.com/proto-map 16.1.4
  • @sentry/browser 8.30.0
  • @sinclair/typebox 0.33.9
  • classnames 2.5.1
  • code-128-encoder 3.1.1
  • compare-versions 6.1.1
  • date-fns 3.6.0
  • e118-iin-list 4.1.4
  • html5-qrcode 2.3.8
  • lodash-es 4.17.21
  • lucide-preact 0.441.0
  • maplibre-gl 4.7.0
  • nanoid 5.0.7
  • preact 10.24.0
  • qrcode 1.5.4
  • semver 7.6.3
  • svg-country-flags 1.2.10
  • yaml 2.5.1
  • @aws-sdk/client-cloudformation 3.651.1
  • @aws-sdk/client-cloudfront 3.651.1
  • @aws-sdk/client-iam 3.651.1
  • @babel/plugin-syntax-import-assertions 7.25.6
  • @bifravst/cloudformation-helpers 9.1.1
  • @bifravst/eslint-config-typescript 6.1.15
  • @bifravst/from-env 3.0.2
  • @bifravst/prettier-config 1.1.0
  • @commitlint/config-conventional 19.5.0
  • @playwright/test 1.46.1
  • @preact/preset-vite 2.9.1
  • @swc/core 1.7.26
  • @types/lodash-es 4.17.12
  • @types/node 22.5.5
  • @types/qrcode 1.5.5
  • @types/semver 7.5.8
  • @types/websocket 1.0.10
  • aws-cdk 2.158.0
  • aws-cdk-lib 2.158.0
  • bootstrap 5.3.3
  • cdk 2.158.0
  • chalk 5.3.0
  • commitlint 19.5.0
  • glob 11.0.0
  • husky 9.1.6
  • lint-staged 15.2.10
  • nock 14.0.0-beta.11
  • playwright 1.46.1
  • preact-render-to-string 6.5.11
  • rehype-format 5.0.0
  • rehype-stringify 10.0.0
  • remark 15.0.1
  • remark-extract-frontmatter 3.2.0
  • remark-frontmatter 5.0.0
  • remark-rehype 11.1.0
  • tsmatchers 5.0.2
  • tsx 4.19.0
  • vike 0.4.195
  • websocket 1.0.35
  • node >=20.0.0
  • npm >=9.0.0

  • Check this box to trigger a request for Renovate to run again on this repository

Add support for GNSS location

Allow user to enable / disable GNSS location. This may be useful for the Solar Thingy in case the device is outdoors.

  • show GNSS location on map

Show "last updated" values on entering the URL/device

When opening the url for a device, frontend should show the last known values/location for the different parameters.
and under we show the "time" for when it was last real time updated:
image

This will provide a better user experience when opening demonstrating (to avoid waiting until new values are sent to the frontend)

[History] allow to navigate to previous interval

I want to see the detail data for the previous hour.

Currently the history chart only allows to switch between different periods ("last hour", "last day", etc):

image

The component needs to be extended to allow to navigate to previous (and optionally later) periods.

  • add navigation to previous period
  • add navigation to next period (if not on latest)
  • query history API with start time of selected period (depends on hello-nrfcloud/backend#867)

Difficult to see the map in daylight

The map layer used has very low contrast, so it's very difficult to see roads and buildings when outdoors in daylight. When evaluating the device outdoors, it would be nice to have a "normal" map layer with colors and more contrast.

Custom device type

it would be good to have an option to add a "custom" or "unspecified" device.

Add update interval configuration

Add a way to put the device in a less aggressive mode so it sends updates to the cloud only every 10 minutes or every hour. However, this has implications on the responsiveness of the device with the current firmware which is based on asset_tracker_v2: the device will not react to configuration changes immediately while it is offline.

Always unlock fullscreen map

Locking/unlocking the map makes sense on a scrollable web page, but I don't understand why it's needed in a full screen view of the map. It's also auto-locked when loading the full-screen view. Can it be removed?

Provide KConfig options to configure added device

That could look like this:

# use a sec tag that can be safely overwritten
CONFIG_NRF_CLOUD_SEC_TAG=42
# hard-code client id
CONFIG_NRF_CLOUD_CLIENT_ID_SRC_COMPILE_TIME=y
CONFIG_NRF_CLOUD_CLIENT_ID="foo-bar"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.