RoboDomo Client

RoboDomo is an IoT framework for developers. This GUI is a web client designed to work on tablets and phones either as a mobile app or as a persistent dashboard for controlling IoT automation.

Getting Started

RoboDomo Client uses the MQTT protocol to get and set IoT status messages. We built in a demo mode that showcases functionalities without having to set up any servers that connect to actual things.

Demo Environment

You need to pass environment variable REACT_APP_DEMO=true to enable the demo.

An easy way to do that is by creating a .env file in project root. Simply add a line with:

REACT_APP_DEMO=true

See .env.sample for more information.

Note: .env.sample is an example file. It's not going to be recognized by the app. You will need to create your own .env file some or all of the content in .env.sample.

Connecting to MQTT

The app will attempt to connect to ws://robodomo:80 (using Web Sockets) by default. You can change the hostname or the port with environment variables:

• REACT_APP_MQTT_HOST=robodomo
• REACT_APP_MQTT_PORT=80

Refer to .env.sample for more info.

Setting up a MQTT server

Clone docker-scripts repository. You can use docker-compose or provided shell scripts to launch docker containers.

At minimum, the setup requires the following containers:

• db (MongoDB)
• mqtt
• config

The config microservice contains your configuration, which gets stored in the database. You can use Config and Macro samples from https://github.com/RoboDomo/config. Put them in ./config/robodomo folder of your docker-scripts project.

You can instantitate the service like this:

docker-compose up config

Since config depends on db and mqtt, it will boot all of the needed services automatically.

Troubleshooting

If you set the DEMO flag to true, but you're still getting errors, it's possible that there's a caching issue. Environment variables change the code that gets bundled and you may need to delete cache to pick up the changes. Simply delete the node_modules/.cache folder.

rm -rd ./node_modules/.cache

How it works

The client uses EventEmitter to subscribe to MQTT messages. The UI is reactive and responds instantaneously.

Examples

Incoming status messages

smartthings/Sliding Door/contact closed
smartthings/Bathroom Sensor/motion inactive
smartthings/Office Dimmer/level 48
nest/Falsetto/Hallway Thermostat/status/target_temperature_f 77

Setting values

smartthings/Outside Light/switch/set off
autelis/set/poolsp 89
macros/run Good Morning

You can see MQTT traffic logged in the console of your browser's DevTools.

Testing

Simulating MQTT Traffic

When NODE_ENV=testing or REACT_APP_DEMO=true then you can use global method SEND_MQTT_MESSAGE to simulate incoming MQTT messages.

SEND_MQTT_MESSAGE("smartthings/Bedroom Light/level", 90);

SEND_MQTT_MESSAGE(
  "weather/92109/status/astronomy",
  JSON.stringify({
    sunrise: 1561380120.848,
    sunset: 1561431600.849,
    moonrise: "12:34AM",
    moonset: "12:16PM",
    moonPhase: -0.633,
    moonPhaseDesc: "Waning gibbous",
    iconName: "cw_waning_gibbous",
    city: "Mission Beach",
    latitude: 32.76,
    longitude: -117.23,
    utcTime: 1561359600,
  })
);

E2E testing on mobile devices is brought to you by BrowserStack.

Modus Create

Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

This project is part of Modus Labs.

Licensing

This project is MIT licensed.