In this guide:
- Introduction
- IoT devices: Thingsee IoT sensors
- PHASE 1: Create a web application
- PHASE 2: Visualize your data
- PHASE 3: Add AI powered chatbot to your application using Watson Assistant
- PHASE 4: Connect with external APIs using Weather Insights
-
IBM Cloud account
- Create a free account www.bluemix.net
This lab was created for Smart Homes Mimmitkoodaa workshop fall 2018. The idea is to show how to create a smart home application that uses artificial intelligence and connects with external APIs. Video tutorial, including simulated data, will be available December 2018.
IBM Cloud is a suite of cloud computing services from IBM that offers both platform as a service (PaaS) and infrastructure as a service (IaaS). A full-stack cloud platform with over 170 products and services covering data, serverless, containers, AI, IoT and blockchain. https://www.ibm.com/cloud/
In this lab we are going to use Thingsee sensors created by Haltian (https://thingsee.com/). Thingsee IoT devices are wireless and easy to plug & play. The sensors can be pre-configured to send data to any cloud. For the purpose of this lab sensors are pre-configured to send data to Watson IoT Platform, part of IBM Cloud.
There are three types of sensors distance, environment and presence. The gateway collects the data to send it to the cloud.
Thingsee DISTANCE is a wireless IoT sensor for measuring container fill rates, asset presence on location and more. Thingsee distance measures the sensor's distance to a surface in real time. You can use the sensor for various facility management applications, asset tracking, parking facility solutions and more.
Thingsee ENVIRONMENT sensor measures temperature, humidity, air pressure, light level, movement and impacts. You can also detect magnets and even get device location using network RSSI location.
Thingsee PRESENCE is a wireless IoT sensor for measuring people presence through the facility. Thingsee Presence IoT sensor measures the presence of people in real time. You can use the sensor for facility management and security applications, for example.
Node-RED is a visual tool for wiring the internet of things - connecting hardware devices, APIs and online services in a new and interesting way. Node-RED provides a browser-based flow editor that makes it easy to wire together flows using the wide range nodes in the palette. Flows can be then deployed to the runtime in a single click.
In a browser navigate to https://bluemix.net
Select 'LOG IN' then enter your login information and press 'SIGN IN'. You should see your dashboard.
Select the 'CATALOG' view.
Locate the Node-RED starter service, under Starter Kit, and click on it.
Enter a name for your application, for example: mysmarthome (host will automatically be completed). The hostname must be unique on IBM Cloud, so please if you use the example name add your initials or a number. Be creative and try to make a unique name then click 'CREATE'.
Your application is now staging and will be up and running in a short while. Click 'OVERVIEW' to see information about your application. The application will be ready in a couple of minutes. If you want to check the progress click on the LOGS icon on the left side menu. Go back to Overview tab to see your app dashboard.
Note: If you are using Lite accounts your application will be in an awake mode. That means that if after 10 days your application has not been used IBM will stop it.
When fully staged, click on the Visit app URL, next to the green or half green circle, this launches the Node-RED main page.
Configure your Node-RED editor. In this section, you will set up a username and password to protect your flow. We are working in the public cloud that means that anyone can access your application through a web browser, set a username and password to protect your code.
Write an username and a password of your choice and click 'Next'. Remember that it does not have to be related to your IBM Cloud ID. Let the browser remember the password if you are using your own laptop, it will come in handy later.
Now click Go to your Node-RED flow editor to open the flow editor.
When using Node-RED we build our apps using this graphical editor interface to wire together the blocks we need. We can simply drag and drop the blocks from the left menu into the workspace in the center of the screen and connect them to create a new flow.
We are going to add new nodes to the Node-RED palette directly from the Node-RED window. For this lab we need the following nodes:
- node-red-dashboard
- node-red-node-openweathermap
In the Node-RED window click on the three lines on the top right corner and in the menu, click on the "Manage palette". This will open the node menu where you can add new nodes to your application.
You will see the nodes that are installed by default and if you go to the 'install' tab you can search for any node package and add it directly to your app.
Search for the dashboard nodes by writing 'dashboard'. This will return multiple node packages, you need to install the package 'node-red-dashboard'. Find it in the search results and click on install.
This will prompt a window to confirm the installation. Click on install and wait few minutes. Click "Done" to close the left side menu.
After few seconds you will see the new nodes in your Node-RED palette.
Remember to repeat this process to install node-red-node-openweathermap package.
In this section we will build a simple flow to connect with our sensor data and create a web visualization.
Copy the content of the visualization_UI.json file. Open the file URL. Visualization UI code
Use the keyboard shortcuts to select all content and copy it.
OSx Cmd+A --> Cmd+C
Windows Ctrl+A --> Ctrl+C
Import the flow by simply clicking on the 3 white lines on the top right corner of the Node-RED window. Import - Clipboard.
Paste the text you copied from the file.
This flow reads sensor data from the Watson IoT Platform and creates a visualization in your application's user interface. The code will create a new tab called Environment with a flow like this:
You will need to do some editing. Double click on the blue IBM IoT node and click on the pen icon.
The sensors are pre-configured to send data to Watson IoT platform. At this moment all sensors send data to a service created by me (Sandra). Here the credentials to read the data coming from the sensors:
API KEY: a-jwql3u-qmhoi8sdzy
API TOKEN: OSxT5QVJYxItsV*K4y
Enter the credentials above to start reading the data from the IoT platform. Then click on Update and Done.
To save data into a database double click on blue Environment node.
The service will automatically connect with your database, included in the Node-RED starter kit, and the sensor data will be stored in a Cloudant database. Then click Done.
Deploy your application changes from the Deploy button on the top right side of the screen.
The dashboard nodes added an UI to our Node-RED application.
To access the UI go to: http://yourAppName.eu-gb.mybluemix.net/ui - UK
Remember that if you are in US, Germany Sydney the address will look slightly different: http://yourAppName.mybluemix.net/ui - US South
http://yourAppName.eu-de.mybluemix.net/ui - Germany
http://yourAppName.au-syd.mybluemix.net/ui - Sydney
COLOR
It is also possible to change the looks of your user interface in the dashboard tab. 😊 In Node-RED go to the Dashboard tab in the left side menu to change the theme of your user interface.
Click on the color and select the main color for your web app. You can change the Light, dark or even custom template to customize the colors of your app.
Fantastic! Your web app is ready. Now you can observe your Smart Home dashboard. 👍
In this phase we are going to add a chatbot to our application, powered by Watson Assistant. Through the chatbot you will be able to get information about the sensor data in your "Smart Home" environment.
With IBM Watson™ Assistant service you can build a solution that understands natural-language input and uses machine learning to respond to customers in a way that simulates a conversation between humans.
Go to your IBM Cloud account and open the catalog. Look for Watson Assistant service and click on it.
Choose the region and space where you want the service to be created. In new accounts it will automatically select your resource group, usually named as default.
You don't need to change the name if you don't want to, just click on 'Create'.
Once the service is created click on 'Launch tool' to access it.
In the home tab you have videos and tutorials on how to get started building dialoges. Feel free to explore them. Let's move to the Skills tab.
The natural-language processing happens inside a skill, which is a container for all of the artifacts that define the conversation flow for an application.
You can create a new skill and start from scratch or import an existing conversation. Download assistant conversation from here: https://ibm.box.com/v/assistantUI
Click on the 'Create new' button and then click on the import skill tab.
When you import a skill, you can choose to import only the intents and entities, which can be useful if you want to build a new dialog using the same training data. In this case we will import everything. Click on 'Choose JSON file ' button and find the file you just downloaded. Then click on Import.
As you make changes to your dialog, you can test it at any time to see how it responds to input. From the Dialog tab, click the conversation bubble icon. In the chat panel, type some text and then press Enter. Check the response to see if the dialog correctly interpreted your input and chose the right response.
The chat window indicates what intents and entities were recognized in the input. In the dialog editor pane, the currently active node is highlighted
Feel free to create new intents for your bot.
Once you have tested the dialoge, it's time to collect the credentials to take them to our Node-RED application. Click on the Skills name and go back to the Skills overview.
Click on the 3 dots in your IoT-Assistant to open a menu and then click on View API details.
Copy the credentials and save them for later. You will need the Workspace ID (skill), username ('apikey') and password.
Back to Node-RED window
Open a new tab in Node-RED by clicking on the + sign.
Now copy the content of the assistant_UI.json file. Open the file URL. Assistant UI code
Use the keyboard shortcuts to select all content and copy it.
OSx Cmd+A --> Cmd+C
Windows Ctrl+A --> Ctrl+C
Import the flow by simply clicking on the 3 white lines on the top right corner of the Node-RED window. Import -> Clipboard. Paste the content in the Flow 2 tab. This is the flow we are importing:
Time to do some editing! 😃
Double click on the blue assistant node to edit the node with your own credentials saved in the previous step. Add your username, password and workspace ID.
Finally we need to confirm that the blue IoT node is reading the data correctly. Double click on the blue IBM IoT node and click on the pen icon. If you see the credentials all should work, if the credentials are missing add the API key and API token shown below.
API KEY: a-jwql3u-qmhoi8sdzy
API TOKEN: OSxT5QVJYxItsV*K4y
Once you have edited all the nodes click on the Deploy button to save the changes in your application.
Go back to the UI and talk with your bot! Change the tab by clicking on the three lines and going to the Assistant tab.
You can ask the bot about IoT and even ask what is the temperature in the room. The bot is connected to the sensors in your "Smart Home" environment.
Remember, to go back to your web app (in UK region) http://yourAppName.eu-gb.mybluemix.net/ui - UK
You can connect your application with any available API. In this case we are going to connect Watson Assistant to the weather data. This way our bot will be able to tell us the weather anywhere in the world.
Normally, I would use Weather Company Data service available on IBM Cloud. This service lets you integrate weather data from The Weather Company into your application. It has a free tier, but it is not available for Lite accounts. If you have an upgraded account you can use the Weather Company service. Feel free to ask me for the code. 😊
For this lab we are using Open Weather Map data https://openweathermap.org/. Note: An API key is required to use these nodes. You can register and obtain your own API key, or use the one available for this workshop.
Copy the content of the weather_UI.json file. Open the file URL. Weather UI code
Use the keyboard shortcuts to select all content and copy it.
OSx Cmd+A --> Cmd+C
Windows Ctrl+A --> Ctrl+C
Import the flow to Node-RED by simply clicking on the 3 white lines on the top right corner of the Node-RED window. Import -> Clipboard. Paste the content to the Flow 2 tab. This is the flow we are importing:
This flow gets weather information from Open Weather Map API. The location comes through the chatbot from the user. Then the city name goes to Google Maps API to get the coordinates and longitude & latitude are sent to the weather service. Finally it is visualized in the UI.
Remember Connect the node "Weather response" with the node "Bot response".
We need to edit the yellow Open Weather Map node and add the API key.
API KEY: 3a1ac87a062142df79f4177302bd7ab9
Now connect the grey link node coming from the Switch node with the grey link node starting the weather flow. To do that double click on the grey link node:
Connect weather-In with weather-Out and click on Done.
Lastly we need to edit the location of the weather widget in our user interface. Click on the dashboard tab in the left side menu and you will see there is two Assistant tab. One contains the bot and last value visualization, created in the last phase, and the other contains the weather.
Drag the weather widget to the Assistant above so it's part of the same tab than the other widgets. It should now look like this:
Click on Deploy and go to the UI to check the changes! Now your UI should look like this:
Congrats! You finished the lab. 👏 Here, take a 🍭. You deserve it!!