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.
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.
Since you are developing a web app, select Web.
Select PHP as the runtime i.e. your web app will be coded in PHP. Click Continue.
Enter web App Name as Weather-Monitoring-WebApp (this should be unique across Bluemix). Click Finish.
Bluemix will create a new web app and provide its URL.
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.
From the list of services provided, select the cloudantNoSQLDB service. Click Add.
Since a new service has been added/bounded to your web app, so Bluemix will need to restage the application.
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.
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.
Your account has been created, click Continue.
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.
Your Git repository is ready, click Close.
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.
From Dashboard > Weather-Monitoring-WebApp > Overview, click on Edit Code button to open the code.
Select index.php from the tree to load the code.
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
[code lang=”PHP”]
<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>
[/code]
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.
[code]
{
"require":
{
"sag/sag":"dev-master"
}
}
[/code]
Environment variables for the application can be viewed from Dashboard > Weather-Monitoring-WebApp > Environment Variables.
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.
Your code is still not deployed. You need to Push these changes to the build.
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.
Once both Build and Deploy stages have passed, your application with latest code changes is available.
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.
