上篇“【物联网(IoT)开发】Arduino 入门 Hello World（LED闪烁）”只是通过将一段程序烧录到Arduino开发板上控制LEC闪烁，没有任何连网动作，也就是说断开网络提供电源依然还可以工作。本文将介绍如何开发一个应用程序，以便使用适用于物联网 (Internet of Things, IoT) 的技术。我们的应用程序通过串口收集数据，将其存储在一个 Web 服务器上，然后在网页上实时显式结果，并可以在网页上控制LED的开关。
构建一个类似的应用程序的前提条件
对于第 1 部分，您需要：
一个 Bluemix 帐户，您还没有？ 点击这里注册，已经有，点击这里登录；
对 HTML（超文本标记语言）的基本了解；
对CSS （层叠样式表）的基本了解；
对JavaScript（一种直译式脚本语言）的基本了解；
对Python 编程的基本了解；
对MySQL数据库及管理工具的基本了解；
对SQL语言的基本了解；
对于第 2 部分，您需要：
一个 Arduino NANO 或其他兼容 Arduino 的主板
可选：Arduino Ethernet Shield
一个LED灯（发光二极管）
一些母母跳线（female-female jumper wire）
Python 2.7.x
我提供了所有必要代码，但对这些技术的基本了解有助于您理解有关的细节，但不是必须如此。
也无需拥有使用 Arduino 或任何其他类型的微型控制器主板的经验。
步骤 1. 创建您的Python应用程序
1、在 Bluemix 用户界面中，转至“仪表板”。
2、单击创建应用程序。
3、单击 Web，然后按照指导经验来选择入门模板，指定名称以及选择编码方式。
输入应用程序名称
应用程序名称是唯一的，接下来要通过它做为二级域名来访问你的应用！
点击完成之后，需要等待一会儿，然后可以看到下图的界面
这时就可以访问你刚刚创建的应用了。如下图：
步骤 2. 添加数据库服务
可以通过单击 Bluemix 用户界面中应用程序“概述”上的添加服务或 API，将服务添加到应用程序中。也可以使用 cf 命令行界面。请参阅处理应用程序的可用选项。
在服务列表中选择数据库（ClearDB MySQL Database）
您可以指定服务的名称，也可以使用默认的；
如果你事先已经创建了数据库服务，也可以直接绑定：
获取服务信息
进入自己的应用程序》概述页面，找到已经添加的服务，点击“显示凭证”，可以查看服务的具体信息：
拿到凭证，我们就可以通过MySQL的客户端管理工具来连接管理数据库了：
1、连接数据库
如果你还没有安装Navicat for MySQL管理工具，请参考：MySQL学习（二）图形界面管理工具Navicat for MySQL安装和使用
2、创建数据表
注意：我们是没有权限创建数据库的，只能用默认创建好的；
只需要创建一张非常简单的表，来保存状态和控制命令
[sql] view plain copy
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `led_status`
-- ----------------------------
DROP TABLE IF EXISTS `led_status`;
CREATE TABLE `led_status` (
`id` bigint(20) NOT NULL,
`status` varchar(10) DEFAULT NULL,
`control` varchar(10) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of led_status
-- ----------------------------
INSERT INTO `led_status` VALUES ('1', '0', '0');
步骤 3. 准备开发环境及硬件环境
有关开发环境搭建的细节，请参考下面的文章：
《Python入门》Windows 7下Python Web开发环境搭建笔记
《Python入门》第一个Python Web程序——简单的Web服务器
《Python入门》Linux 下 Python Web开发环境搭建笔记
【物联网(IoT)开发】Arduino IDE(集成开发环境)下载及安装
【物联网(IoT)开发】Arduino NANO,UNO 驱动安装
本文使用的硬件环境非常简单，请参考：
【物联网(IoT)开发】Arduino 入门 Hello World（LED闪烁）
步骤 4.编写代码
1、下载初始Hello World示例代码
你可以下载入门示例参考，也可以完全自己写！
进入您的应用程序，点击左侧的开始编码，在右侧点击“下载入门模板代码”。
也可以通过添加Git来下载代码。
2、使其在本地运行
1、将下载的入门模板代码解压到一个目录，打开命令行窗口，切换到这个目录下
可以看出代码结构是很简单的；
2、执行命令：Python server.py
3、在浏览器中访问：http://localhost:8000/
3、编写代码
本文涉及到三部分代码
1）、烧录到Arduino开发板上的代码，用于接收串口的命令控制LED状态，并实时输出LED的状态
[plain] view plain copy
String blink_flag = "1";
// the setup function runs once when you press reset or power the board
void setup() {
// initialize digital pin 13 as an output.
pinMode(2, OUTPUT);
Serial.begin(9600);
}
// the loop function runs over and over again forever
void loop() {
String rx_buffer;
rx_buffer=Serial.readString();
if (rx_buffer.length() == 1){
blink_flag = rx_buffer;
}
if (blink_flag.compareTo("1")){
digitalWrite(2, LOW); // turn the LED on (HIGH is the voltage level)
//delay(1000); // wait for a second
}else{
digitalWrite(2, HIGH); // turn the LED off by making the voltage LOW
//delay(1000); // wait for a second
}
Serial.print(",");
Serial.print(blink_flag);
delay(100);
}
前端页面：index.html
[html] view plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【物联网(IoT)开发】使用 Arduino 和 Python在 Bluemix 上开发一个 IoT 应用程序之控制LED灯开关 - 无知人生，记录点滴</title>
<style>
body {
margin:0; padding:0;
}
a{
text-decoration:none;
color:black;
}
div.div_id {
float:left;
clear:left;
width:60px;
height:27px;
border-bottom:solid 1px #808080;
text-align:center;
line-height:27px;
}
div.div_item {
float:left;
clear:none;
width:260px;
height:27px;
border-bottom:solid 1px #808080;
text-align:left;
line-height:27px;
}
div.div_radio {
float:left;
clear:none;
width:60px;
height:27px;
border-bottom:solid 1px #808080;
text-align:left;
line-height:27px;
display:none;
}
div.div_num {
float:left;
clear:right;
width:260px;
height:27px;
border-bottom:solid 1px #808080;
text-align:left;
line-height:27px;
display:none;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT language=javascript>
$(document).ready(function(){
setInterval(loadLedStatus,1000);
});
//通过AJAX加载LED状态信息
function loadLedStatus(){
$.ajax({
type: "GET",
url: "ledinfo",
dataType:"html",
async: false,
success: function(data){
if (data == "1"){
$("#divctnr").html("<img src=\"led1.png\" />");
$("#button1").hide();
$("#button2").show();
}else{
$("#divctnr").html("<img src=\"led0.png\" />");
$("#button2").hide();
$("#button1").show();
}
console.log(data);
},
error: function(data){
console.log(data);
console.log( "加载LED信息失败: " + data.responseText );
}
});
}
//通过AJAX调用后台保存LED信息
function execControl(status){
$("#button1").hide();
$.ajax({
type: "POST",
url: "ledcontrol",
dataType:"html",
data: {"id":status},
success: function(data){
console.log(data);
},
error: function(data){
console.log(data);
console.log( "命令发送失败: " + data.responseText );
}
});
}
</SCRIPT>
</head>
<body>
<div>
<a href="http://blog.csdn.net/testcs_dn" target="_blank" title="无知人生，记录点滴 不积硅步，无以至千里；不积小流，无以成江海……">
<img src="banner.png" border=0 />
</a>
</div>
<div style="width:640px; height:40px; border-bottom:solid 1px #808080;text-align:center;">
<a href="http://blog.csdn.net/testcs_dn/article/details/49965993"><h3>您可以在这里监控和控制LED灯的点亮或关闭</h3></a>
</div>
<table id="Wrapper" style="padding: 0px; margin: 0px; min-height:300px; text-align: center; background-color: rgb(255, 255, 255);">
<tr>
<td>
<form>
<div id="divctnr"></div>
</form>
</td>
<td>
<div style="width:640px; height:40px; text-align:center; float:left; clear:both; margin-top:15px;">
<input type="button" id="button1" name="button1" value="点亮" onclick="execControl(1)" style="display:none; width:200px; height:45px; font-size:36px; font-weight:bold;" />
<input type="button" id="button2" name="button2" value="关闭" onclick="execControl(0)" style="display:none; width:200px; height:45px; font-size:36px; font-weight:bold;" />
</div>
</td>
</tr>
</table>
<hr />
<div style="margin:auto; text-align:center; line-height:28px;">
云服务器：<a href="https://console.ng.bluemix.net/home/" target="_blank" title="IBM Bluemix 数字创新平台" style="">
IBM Bluemix 数字创新平台
</a><br />
服务提供：<a href="https://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/language-translation/api/v2/#introduction" target="_blank" title="IBM Watson Developer Cloud" style="">
IBM Watson Developer Cloud
</a>
</div>
<div style="margin:auto; text-align:center; line-height:28px;">
<a href="http://blog.csdn.net/testcs_dn" target="_blank" title="无知人生，记录点滴 不积硅步，无以至千里；不积小流，无以成江海……" style="">
Powered by:testcs_dn(微wx笑)<br />
无知人生，记录点滴 不积硅步，无以至千里；不积小流，无以成江海……
</a>
</div>
<br /><br /><br />
<div id="divout"></div>
</body>
</html>
请点击左下角的“阅读原文”查看完整内容。
===========文档信息============
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
