Part 4 of this series on IBM® Internet of Things Foundation (IoTF) teaches you how to create a web app that loads data from the database and displays it in graphical format.

In this tutorial you are going to develop a PHP-based web app that loads data from Cloudant NoSQL DB and displays it in a DOJO chart that you developed in part 1 of this series.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Learning Objectives

At the end of this tutorial you will be able to:

  • Create a PHP web app
  • Load data from Cloudant NoSQL DB
  • Display data in a DOJO chart

IBM IoTF Setup

Login to Bluemix, you will be redirected to the Dashboard.

To create a new web app, from Dashboard click on Create App.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Since you are developing a web app, select Web.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Select PHP as the runtime i.e. your web app will be coded in PHP. Click Continue.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Enter web App Name as Weather-Monitoring-WebApp (this should be unique across Bluemix). Click Finish.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Bluemix will create a new web app and provide its URL.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Go to Overview of Weather-Monitoring-WebApp. Next, you will need to bind the Cloudant service that was created in part 1 and then configured in part 3. Click on + BIND A SERVICE OR API.

Note: If you add a new Cloudant service then your web app will not have access to the device data that has been stored.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

From the list of services provided, select the cloudantNoSQLDB service. Click Add.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Since a new service has been added/bounded to your web app, so Bluemix will need to restage the application.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Once restaging is complete, you will see the cloudantNoSQLDB service in web app Overview. Now that the database is connected, you need to create a PHP page that will load and display device data in a chart.

Note: You have three options for coding, use Eclipse, CLI or DevOps. With Eclipse and CLI you need to setup the code on your machine and then upload it to Bluemix, while IBM® DevOps provides you the necessary tools in the cloud to code, track, build and deploy from a single location without having to worry about any of the environment details. This tutorial uses DevOps.

Click on Add Git button to add/create a new code repository for your app.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

If you have not already signed up for DevOps then you will first be required to sign up for an account. Enter a unique alias for your account. Review and if you agree then accept the Terms of Use. Click Create.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Your account has been created, click Continue.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Now that your DevOps account has been created and linked to your IBM ID, you will be taken back to Git repository creation screen. You can tell DevOps if you want it to populate the repo with starter code and enable default deployment method or not. Click Continue.

CodifyThings-Getting-Started-IBM-Internet-Things-Bluemix-416

Your Git repository is ready, click Close.

CodifyThings-Getting-Started-IBM-Internet-Things-Bluemix-417

From Dashboard > Weather-Monitoring-WebApp > Overview, click on the web app URL and if you selected to populate Git repository with starter app package then you should see a Hello world! page displayed.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

From Dashboard > Weather-Monitoring-WebApp > Overview, click on Edit Code button to open the code.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Select index.php from the tree to load the code.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Replace the default code with the one provided below. The code performs following functions.

  • Loads Cloudant database information from Environment Variables > VCAP_SERVICES (see screenshot after the code)
  • Connects to Cloudant database using SAG (a CouchDB client API)
  • Creates and displays a DOJO chart with two series, one for temperature and the other for humidity
<html lang="en">

<head>
<title>Weather Monitoring Dashboard</title>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>

<script>
<?php require('vendor/autoload.php'); $services_json = json_decode(getenv('VCAP_SERVICES'),true); $VcapSvs = $services_json["cloudantNoSQLDB"][0]["credentials"]; $username = $VcapSvs["username"]; $password = $VcapSvs["password"]; try { $sag = new Sag($username . ".cloudant.com"); $sag->login($username, $password);

$sag->setDatabase("weather-db");

$currentRow = 0;
echo "var humidityData = [";

$resultCount = $sag->getAllDocs()->body->total_rows;

foreach($sag->getAllDocs()->body->rows as $row)
{
$currentRow = $currentRow + 1;

$id = $row->id;
$value = $sag->get($id)->body->d->humidity;

echo $value;

if($currentRow < $resultCount) { echo ","; } } echo "];"; $currentRow = 0; echo "var tempData = ["; $resultCount = $sag->getAllDocs()->body->total_rows;

foreach($sag->getAllDocs()->body->rows as $row)
{
$currentRow = $currentRow + 1;

$id = $row->id;
$value = $sag->get($id)->body->d->tempC;

echo $value;

if($currentRow < $resultCount) { echo ","; } } echo "];"; } catch(Exception $e) { echo ' [INFO] There was an error getting data from Cloudant '; echo $e->getMessage();
}
?>

require([
// Basic Chart Class
"dojox/charting/Chart",

// Orange Theme
"dojox/charting/themes/PlotKit/orange",

// Plot Lines
"dojox/charting/plot2d/Lines",

// Load Legend, Tooltip, and Magnify classes
"dojox/charting/widget/Legend",
"dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/Magnify",

// Markers
"dojox/charting/plot2d/Markers",

// Default x/y Axes
"dojox/charting/axis2d/Default",

// Wait for DOM to be ready
"dojo/domReady!"
], function(Chart, theme, LinesPlot, Legend, Tooltip, Magnify)
{
// Create chart within it's "holding" node
var chart = new Chart("chartNode");

// Set the theme
chart.setTheme(theme);

// Add the only/default plot
chart.addPlot("default", {
type: LinesPlot,
markers: true,
labels: true,
labelStyle: "outside"
});

// Add axes
chart.addAxis("x");
chart.addAxis("y", { min: -50, max: 270, vertical: true, fixLower: "major", fixUpper: "major" });

// Add the series of data
chart.addSeries("Humidity", humidityData);
chart.addSeries("Temperature (C)", tempData);

// Create the tooltip
var tip = new Tooltip(chart,"default");

// Create the magnifier
var mag = new Magnify(chart,"default");

// Render the chart
chart.render();

// Create the legend
var legend = new Legend({ chart: chart }, "legend");
});
</script>
</head>

<body style="background-color: #F5EEE6">
<div style="align: center;"><font size="5px">Weather Monitoring Dashboard</font></div>
<div id="chartNode" style="width:800px;height:400px;"></div>
<div id="legend"></div>
<script type="text/javascript">
init();
</script>
</body>
</html>

As mentioned earlier, the code uses SAG API to connect with Cloudant. You need to add the following dependency in composer.json otherwise the code will not work.

{
"require":
{
"sag/sag":"dev-master"
}
}

Environment variables for the application can be viewed from Dashboard > Weather-Monitoring-WebApp > Environment Variables.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

DevOps automatically saves all the progress, but it does not deploy it. So, you will need to commit the code changes to Git repository first. Add a comment, select all files and then click Commit.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Your code is still not deployed. You need to Push these changes to the build.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Switch to Build & Deploy screen. As soon as you push the code, a new build will be created and then deployed to the server.

Note: During Deploy stage, your application will not be accessible.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Once both Build and Deploy stages have passed, your application with latest code changes is available.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix

Click on the URL from Dashboard > Weather-Monitoring-WebApp > Overview section to open your web app, you should see a web page similar to the one below.

CodifyThings - Getting Started with IBM Internet of Things Foundation (IoTF) and Bluemix