查看: 8948|回复: 2

[8月赛] 【云上的你】从头搭建一个第三方平台管理硬件

[复制链接]

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2017-8-1 23:59:54 | 显示全部楼层 |阅读模式
本帖最后由 longgh 于 2017-8-2 09:20 编辑

    大家好!感谢大家阅读此贴!    之前接触过一些智能硬件(不知道大家有没有听过microduino),也接触过一些云平台,后台又搞过一些web开发。一天翻阅开发者文档时,为何不将之前学过的东西结合一下,做一个简单的小demo,让对物联网有兴趣的同学,不仅在整个过程中,对物联网架构有一个大致认识,也能接触到硬件软件的知识。所以,本贴将一步一步,从头搭建一个第三方平台来管理硬件。
    PS:本贴一切宗旨都是为了让大家有一个大致学习和动手的机会,所以并不复杂,但是希望各位同学明白,往往越简单的东西,其实是经过无数人的悉心封装,化繁为简。有兴趣的同学可以多深入研究,这是很有意义的。

###############################################################
一、硬件接入OneNet
    硬件:麒麟座Mini + wifi模块
10.jpg
    登录OneNet平台,注册。
1.jpg

    注册设备,最后一项接入设备协议请选择EDP。
2.png

    注册完后,你将获得你的API-Key。
3.png

    注册设备,你将获得设备ID。
4.png 5.png

    使用微信公众账号将设备接入wifi。    图缺

    修改API-Key和设备号。
6.png

    显示在线。
7.png

    试试发送指令。
8.png

    黄灯亮起!成功!硬件接入完毕。
9.jpg


###############################################################
二、搭建平台    本帖使用了Thinkphp作为开发框架,从来没有接触过web开发的同学,可以稍稍看看用户手册,尤其是路由。否则,不容易理解服务器如何根据地址获取资源。

    搭建本地环境,因为是开发一个简易的本地web项目,所以需要服务器运行环境,这里我们选择xampp集成环境。完成安装,点击运行apache(服务器)和mysql(数据库)。
11.png
    在浏览器中输入本机地址,出现此页面,集成环境就安装正常了
12.png

    然后为了快速建站,且简单易懂,本贴选择了国内的php框架——Thinkphp。从网上下载压缩包,将文件解压至服务器入口,再次运行浏览器,输入本机地址。
13.png     14.png

    Okay!web项目已经跑起来了,咱们改改入口页面,也就是开始修改后台代码了。(Thinkphp采用mvc架构,每个页面有控制器和模板,想要显示正确,需要二者通力配合)
    先修改控制器,意思就是渲染一个名叫index.html模板,展示在浏览器中。(项目会在帖子结尾贴出)
15.png

    修改模板(如果没有请按照项目路径创建,不然会报错哦)
16.png

    再次运行,看看效果,比原来好看点。。。。
17.png

    看到右上角的login了吗?下一步来实现登录功能。在模板中加入一个a标签(点击跳转登录页面)。if判断用户是否已经登录,未登录则显示“login”,已登录则显示“logout”。
18.png

    因为要跳转到登录页面,所以我们要建一个新的控制器和新的模板来显示登录页面。如图,创建AuthController和它的视图,注意路径哦!
19.png     22.png

    然后先把代码放一放,休息休息,用xampp集成的mysql图形管理工具——phpmyadmin,来创建记录用户登录信息的数据表。在地址栏中输入“localhost\phpmyadmin”,选择使用的数据库,创建一张新表,并设置字段。这里只做简单示范,所以只取三个字段,足够判断登录。
21.png     20.png

    点击插入,为系统添加第一个用户!


    ok!数据创建完毕,现在我们来配置服务器连接数据库的信息。在指定目录下,创建db配置信息。(相关数据库信息,如账、密码、地址,请自行修改)
23.png

    然后,将db文件加载。
24.png

    回到登录界面的模板上来,这里需要一个表单,给用户填写信息提交。看看效果。
25.png     26.png

    模板完成,我们需要写一个js,来发送ajax请求验证用户信息。jQuerry对ajax的封装非常简洁明了,这里我们引入jQuerry来辅助完成ajax请求。
27.png     28.png

    终于轮到控制器了,我们需要一个可以连接数库来验证信息的方法。如图。(其实按照mvc架构的话,c只是作为功能的转发,本身并不直接进行数据库之类的实际操作,不过由于项目简单,这里实际将mvc变成了vc)。将传来的信息与数据库做比对,符合则种session,返回正确信息;不符合返回错误信息。
29.png

    试一试。故意输错;输入正确。
30.png     31.png

    再做一个注销功能。
32.png     33.png

    至此,一个拥有完整的简易用户系统就完成了。下面就是拉取设备信息,对设备发出指令了。让我们先给登录的用户一些功能,比如设备,命令。效果。
34.png     35.png
    然后,利用OneNet平台的官方PHP-SDK,来实现设备的信息拉取和控制设备。

36.png

    这下,点击设备,浏览器将打印出设备信息;点击命令将点亮黄灯。
37png.png

    一个简单的第三方管理硬件系统搭建完成!

    the End
    后来发现没有做拦截,已经在源码中将拦截方法补上了,这里就不过多赘述了。

22.png

IOT@Mobile.zip

1.19 MB, 下载次数: 2143

项目源码

回复

举报

51

主题

161

帖子

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2017-8-7 10:43:47 | 显示全部楼层
66666666666666~~~

4

主题

44

帖子

101

积分

注册会员

Rank: 2

积分
101
发表于 2017-8-3 23:25:16 | 显示全部楼层
很强!!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表