在大学里不同专业有着不同的 “最高境界” ,机械类与强电类专业学生追求的是 “机电合一” ,弱电类专业学生追求的是 “软硬结合” 。我作为华南农业大学的弱电类学生,追求软硬结合,既懂点硬件,也懂点软件(在硬件行业里也可称为“上位机开发”),一个人能解决一个产品整个研发过程,所有创意想法基本都能靠自己去实现。在这里,以物联网项目为主方向分享web开发教程,适合硬件开发人员学习的web开发教程,重点讲软件部分。

整个物联网项目简介

 现在,我想做一个完整的物联网项目,首先要搞清所有环节。当年我毕业设计(2017年毕业)的项目示意图:
物联网项目
 一个物联网项目如图所示,从左到右分别是用于采集数据的硬件传感器,硬件主控芯片、用于传输数据的通信模块、用于存诸数据与提供访问请求的 服务器 、用于将数据展示出来并提供操作的可视化界面(就是HTML客户端,即浏览器上的网页显示,后面简称 界面 )。
 服务器这概念多说一下,因为后面会反复用到,在大一大二我们做的纯硬件项目大约是这样的:硬件采集完数据,传输到LCD显示屏直接显示出来,这并没有所谓的服务器这一说。而平时手机打开网页,所显示的图片文件都是数据,所有数据都存放在一台电脑里。这台电脑不仅存放了这些数据,而且能够在你请求获取这些数据时把数据传输给你(提供服务)。这台电脑就是存放在数据中心机房里的服务器,持续稳定地24小时不间断地运行,为用户提供服务。由专门的运维人员进行管理维护,这些云服务器可以在阿里云、腾讯云等云服务器厂商租用(当然你也可以自己买一台真实的服务器扔在自己家里玩)。
 但写教程的过程中发现,用当年我毕设的方案来讲解,难度比较高。硬件方面STM32有一定门槛的,一般大学生到了大三能用它做一两个项目都被称为大神了(top5,电子科大等学校除外)。硬件与服务器通信协议上,我选择了websocket协议(当年机智云很火,我模仿了它),而整个ESP8266官方固件开发相对较难(就是它浪费了我很多时间)。主要难度在这两点,经过研究探索,硬件改用nodemcu(十几块钱就能淘宝到),并使用Arduino IDE进行开发降低硬件门槛。通信协议上使用TCP协议。具体可看教程demo1
demo1示例

教程目的与特点

  • 此教程第一大写作目的是为了装逼。(其实这毕设难度不高,论深度不过是硬件基础加web开发基础,但一个人全套做下来,学习量以及工作量是极大的,毕竟这能拆成两个勉强混水过关的毕业设计,一个用来参加电子类专业的毕设审评,另一个用来参加计算机类专业的毕设审评。后来发现有比我早几年就做得更好的大神,phodal是一个很高产的全能型大神,值得大家关注。)
  • 为了把踩过的坑挑出来,指引出一条正确的道路,减少大家走弯路的时间精力。(当年真的是苦,每天8小时+,还不知道自己能不能成功实现目标的情况下,各种技术选型时的尝试,搞了接近四个月,那是一种咬着牙长跑的痛苦感,能逼出眼泪的无奈,这也是为什么我愿意花大量时间写这教程的原因,不忍心让想实现软硬结合的各位再吃这种苦了。)
  • 整个教程面向完全零基础读者,所以尽量傻瓜式演示,保证读者在没任何基础的情况下跟着做一定能做得出来。如果你跟着做不出来,务必进QQ群(638456092)来提问,我会亲自回答并且完善教程!!

 在github上获取整个项目的最新完整代码:
获取全部源码

技术选型

物联网项目
 我们再看看怎么开发,仍然从左向右地看,硬件部分自己买模块自己画PCB板自己焊接各种折腾。通信模块一般就是购买WIFI模块、以太网模块、NB-IOT模块等等。相信左边大家都懂,大家都搞过硬件就不多说了,右边的软件部分就想不通了。数据经过通信模块是怎么传输到服务器里呢?又是怎么从服务器获取数据展现出来?可视化用户界面客户端怎么开发?用户点击客户端怎么才能操作硬件?
 当年我就是怀着这堆疑问边学边做,痛苦地走了不少弯路才搞清这些方向路线问题。我在这里直接解答,好让大家有个方向。首先,每台云服务器都有自己的地址(IP地址),硬件通信以及软件客户端向这个IP地址进行通信,就能传输数据。
 要想折腾物联网,必须要学习计算机网络,TCP/IP协议基础这些知识,只有搞明白才能更好地开发。网络基础知识要先学习,物联网物联网,先要懂网。
 现在到界面,有很多种:PC端桌面应用(VB、C++、C## 结合图形库进行开发)、平板与手机(安卓系统的用JAVA,苹果系统object-c、Swift)、浏览器网页(HTML、CSS、Javascript)。

到底要学什么

 首先,网络基础 知识必须要学。其次到客户端与服务器开发就选择语言的问题了。当年我查遍所有语言并进行对比之后得出结论:JavaScript
 因为实现全栈(web开发专用语,网页被称为前端,服务器应用称为后端,前后端都会开发的被称为全栈)的最低学习成本的语言是 JavaScript,一门语言JavaScript搞定网页,PC端软件,后台服务器,手机APP的开发,基本所有界面客户端都能用JS开发。 不用学PHP,不用学C#,不用学JAVA。人的精力是有限的,切换语言是需要精力的,JavaScript虽然在各场景不是最好的语言,但是对于一个人负责全部来说却是 所需最低精力的!

无所不能的JS

场景 本教程所用语言 其它语言 备注
网页制作 HTML、CSS、JavaScript
PC端桌面应用 HTML、CSS、JavaScript + Electron C## 或 C++ 加图形库
安卓Android HTML、CSS、JavaScript + cordova JAVA加图形库
苹果IOS HTML、CSS、JavaScript + cordova Swift
微信小程序 WXML、WXSS、JavaScript WXML、WXSS与HTML、CSS类似
后端服务器 Nodejs PHP 或 Java等等 Nodejs的语法仍是 JavaScript

 界面开发上,大前端统一江湖就大势所趋 。原本只用于网页开发的 HTML、CSS、Javascript 三件套实在是开发速度快,成品多,容易做出很炫的界面,已经从网页走向了全平台,不管是windows、Mac的桌面应用,还是安卓苹果APP,微信小程序等等都是用这三件套。

 由于你想一个人完成两个人的事,所以要学习的内容相对较多,现在列出所学习的表格:

方向 第一阶段 第二阶段 第三阶段
网络 计算机网络基础 IP协议基础
TCP协议基础
HTTP协议基础

MQTT协议基础
客户端开发 HTML、CSS、JS基础
JQuery基础
chrome调试技巧
数据可视化基础
Electron基础
微信小程序基础
服务器开发 linux基础
nodejs基础
nginx基础
mongodb基础
硬件 nodemcu基础

 内容比较多,而且全是 各种基础 。因为一天只有24小时,你不可能同时成为网络专家、客户端开发专家、服务器开发专家、硬件开发专家,这是不可能的。学习的路线比较长,最忌漫无目的地学习,会导致学习效率低下,容易走太多弯路浪费宝贵的时间,所以记住一点 遇到问题解决不了,才带着问题去学习相关的内容。 为了解决问题而学习,而不是先学习后解决问题,因为你很有可能会发现学习的东西并不一定在日后解决问题时会用到,导致浪费时间精力。例如,你深入研究学习了如何搞高并发,如何写多线程,超牛逼的技术,后来你发现这些牛逼的技术对于这个项目来说,一点用都没有,因为这些技术只有到了用户量大了的情况下才会出现的问题,而你极有可能会遇不到。
学习技巧

正式开始

  • demo1,演示了最简的系统,实现软件显示硬件的数据,可控制硬件执行动作。(还有个demo0.1,代码更简洁,建议在研究demo1前先研究demo0.1。)
  • 计算机网络基础
     先了解基本的网络知识,半个小时吧。
  • nodemcu基础
     了解nodemcu与开发,两三个小时吧。
  • HTML、CSS、JS基础
     了解界面开发的三件套基础知识,结合其它教程自学,大约两三个星期,能做出基本的网页界面。
  • chrome开发者工具
     学习怎么调试网页,分析别人网页,拥有分析并模仿别人的网页的能力
  • Jquery、Bootstrap基础
     学习Jquery、Bootstrap基础。并尝试模仿别人网页,检验学习成果。
  • nodejs基础
     了解nodejs开发、ES6语法、express框架,结合其它教程自学,大约两个星期
  • 模仿demo1,尽可能地自行实现demo1效果,大约几天。
     为了让后端程序部署到云服务器里,你还需要学习linux基础并购买云服务器。
  • linux基础

  • demo2,在demo1的基础上,demo2添加了MongoDB数据库、实时显示数据(websocket协议)、数据可视化(Echart图表)功能。
    通过手机控制LED灯开关
  • 数据可视化基础
  • HTTP协议基础:里面讨论了HTTP轮询的不足与websocket协议的最简例子。

整个教程看似内容很少,实质上是需要读者阅读七八本书以及结合其它教程一起学习,其实需要读者学习的内容是极其之多,本教程只是演示最简单的实例给大家一个例子以参考,有利于进行正确有效的学习,少走弯路。
推荐书籍

FAQ

  1. 我只懂硬件,想做一个小程序能显示数据,能简单控制,想知道具体要怎么搞?
    答:把本教程demo1搞定,你就能清楚明白要怎么搞了。
  2. 请问要实现自己搭物联网平台大约需要多久?
    答:我当时为了做毕设,从零搞起也就几个月的事,里面包含了大量走弯路的时间,当然功能也不完善,前端界面做得很简陋,也就能显示数据能实现控制而已。如果你按这教程走,少了走弯路的时间,遇到迷茫时提问,一般来说两个月左右(每天投入8小时以上)就能搞出来一个demo1与demo2的效果。如果你是那种没有任何编程经验的萌新,毕竟光学习怎么写代码都需要一个时间与过程,所以需要更长的时间。
  3. 有没有现成的相关代码,能快速复制粘贴很快就做一个简单的?
    答:后台管理系统参考vue-element-adminNodeclub论坛,软硬件之间的通信参考demo2
  4. 请问能做电脑上位机程序吗?
    答:电脑上位机程序其实就是PC桌面应用,以前的常见做法是C#/JAVA 加一个图形库进行开发,如果用JS可使用Electron进行开发,界面仍然是网页制作的那一套。
  5. 为什么我提的问题,没人回答?
    答:因为你缺失提问技巧,请先搜索“提问的智慧”,学习后你就知道怎么正确提问,让别人有回答的欲望 。
    提问的智慧
  6. 我是新手,连硬件都没接触过,应该怎么学?
    答:此教程讲硬件讲得比较少,没接触过硬件的要么是大学新生还没学习到,要么本身专业与硬件没关。对于还没接触过硬件都又想学硬件的朋友来说,可以学习 Ardiunuo ,号称电子积木,非常适合硬件新手入门,相关教程也十分丰富。