狗的互联网：如何建立一个50美元的物联网狗圈，找到你的宠物

[ lt;html>



4





5

<头>



6





7

<链接rel="样式表"href="./index.css">



8





9

<标题>查找我的狗</标题>



10





11

• <身体>



14





15

<头>我不知道他们去了哪里.</头>



16





17

<主>



18





19

<按钮ID= "蜂鸣器-btn"类型="按钮">激活噪音</按钮>



20





21

[ <脚本 src="./index.js"></脚本>



24





25

</车身>



26





27

</html>










到目前为止很容易，对吧？这里最重要的事情是在按钮元素上具有该id属性。此外，请随意向页面添加更多元素，使其适合您的风格。
索引.css
现在，让我们编写 CSS 文件：



Css
 

正文]



2





3

字体家庭'拉托''特雷布切特MS'无衬线;



4





5

}



6





7

标头主|



8





9

文本对齐中心;



10





11

标头]



14





15

字体大小36px;



16





17

}



18





19

按钮|



20





21

背景色rgb（25500）;



22





23

字体大小： 24px;



26





27

边距顶部24px;



28





29

填充12px;



30





31

}



32





33

按钮：悬停|



34





35



36





37

字体大小24px;



38





39

}









如果您未对index.html和index.css文件进行任何编辑，则页面应如下所示：




如果确实进行了编辑，则输出可能看起来有点不同。不用担心，但是，这是侧项目最好的方面之一！您可以使用最小的东西，如上面所示的示例，或者你可以得到一些鸽友，并尝试一些很酷的CSS功能。
索引.js
现在是时候编写一些基本的JavaScript了。最好的部分？您无需安装任何依赖项！



Javascript
 




























xxxxxxx

1


25










             
          




1

同心蜂鸣器 =文档。查询选择器（"#beeperbtn"）;



2





3

锥]切换比器 = （） =gt; |



6





7

是蜂活=！是蜂贝激活;



8





9

 



10





11

是蜂围激活？



12





13

取（'http://localhost:3000/api/startBeeper'）



14





15

然后（控制台。日志）



16





17

:



18





19

取（'http://localhost:3000/api/stopBeeper'）



20





21

.然后（控制台。日志）



22





23

}



24





25

添加事件侦听器（"单击"，切换Beper）;









此文件仅执行三项操作：

它将一个"点击"事件侦听器添加到从index.html的按钮。
它设置一个状态变量，称为"isBeper激活"。
单击该按钮时，它会更改状态并调用相应的后端终结点。

老实说...我花了相当长的时间才记住如何让我的JavaScript文件在框架之外使用我的HTML文件。这是另一个原因，为什么侧项目是如此真棒。它们不仅给你学习新事物的机会，而且还允许您练习一些你一段时间可能没有使用的基础知识。
设置硬件
如果你已经做到了这一点，恭喜你——你已经完成了这个项目的整个前端！现在，让我们来保管硬件。在本节中，我们将介绍如何使用 Arduino Uno、扬声器和其他组件设置面包板。
首先，让我们确保您的 Arduino Uno 准备好与约翰尼-五平台合作。您需要将标准芬达草图上传到您的主板。最简单的方法是通过Arduino IDE。如果你以前从未和Arduino合作过，不要烦恼;这是一种直接点击式上传类型。下面是此过程的一个惊人的演练。它将向您展示如何找到与 Arduino IDE 一起附带的标准芬达草图示例，以及将草图上传到 Arduino 的过程。
接下来，您需要让 Arduino 使用 HC 05 蓝牙模块。以下是我用于此部分的教程。您将看到用于将 HC 05 连接到 Arduino 的示意图，以及要使 HC 05 与 Arduino 串行端口通信而必须上传的草图。完成此步骤后，重新上传标准芬达草图并连接到约翰尼五号。
设置电路板后，您可以使用电池组向其添加电源，并连接压电蜂鸣器。将电池组的红色导线连接到电路板的Vin引脚及其黑色导线到电源侧的主板GND引脚之一。您的 HC 05 模块应连接到5V引脚和另一个GND引脚

想要保持布线清洁？尝试使用面包板和跳线，以便更轻松地跟踪您的连接。注意：这将更改套管的大小。说到这...
将组件拼凑在一起后，即可将其放入套管中。确保您的电池组是可访问的，以便您可以打开和关闭电池组。我选择把我的小包放在一个盒子里。这是处理硬件的最佳方式吗？哎呀，不！但请记住，除了你，没有人会看到这么多。所以，请随时获得超级创意。我选择去一个甜塔盒子。（它完美地代表了我的狗的个性。


设置后端
呼！如果你已经做到了这一点，给自己一个拍背 - 你刚刚完成了硬件部分！不是太难吧？现在，让我们开始了解此 IoT 项目的最后一段代码：节点后端。
我选择在Heroku上部署我的应用程序;它快速，简单，也许最重要的是，免费的东西这样的事情。您可以在此处注册帐户。但随意使用任何你喜欢的服务。注册后，请确保安装了 Heroku CLI，以便以后可以部署应用heroku.com/articles/heroku-cli#download-and-install"rel="不跟随"目标="_blank"\https：//devcenter.heroku.com/文章/heroku-cli_下载和安装
现在打开一个终端，检查 Heroku CLI 是否正确安装，并具有以下命令：



Java
 




























xxxxxxx

1










             
          




1

赫库-版本




















接下来，您需要使用以下命令登录到 Heroku 帐户：



Java
 


























xxxxxxx

1










             
          




1

heroku登录名
















这将将您重定向到一个网页，您可以在其中使用 GitHub 凭据登录。现在，您已设置一切，以将此应用程序直接部署到 Heroku。
但首先，您需要安装一些软件包才能完成此工作。在根文件夹中，创建以下新文件：

服务器.js
普罗奇菲

现在，打开一个终端，并准备安装所有你需要的软件包。我更喜欢npm，但随意使用纱线。



Java
 


























xxxxxxx

1










             
          




1

npm安装cors快递约翰尼-五
















这些是您需要的唯一包，就像设置任何其他 Node 应用一样。
服务器.js
您需要创建两个终结点来控制蜂网何时打开或关闭。这些是在这些提取请求中前端引用的终结点。打开服务器.js文件并添加以下代码：



Java
 


});
让蜂子;
板.on（"就绪"，（） > |
控制台.log（"准备好了！
蜂蜂器 = 新 Led（13）;
});
应用程序.get（'/api/startBeper'，（req，res） => |
控制台.log（'上'）;
蜂蜂器（）;
res.send（*
消息：'打开'
});
});
应用程序.get（'/api/stopBeper'，（req，res） => |
控制台.log（"关闭"）;
蜂蜂器（）;
res.send（*
消息："关闭"
});
});
应用程序.listen（端口，（） > |
控制台.log（"在端口 $_PORT_'上运行的终结点）;"
});

"数据朗="文本/x-java"*


























xxxxxxx

1


82










             
          




1

康斯特板莱德=要求（'约翰尼五';



3
孔科–要求（'cors'）;


4





5

康斯特快递=要求（'快递'）;



6





7

constPORT=进程。env.端口|3000;



8





9

 



11
const应用程序=快速（）;


12





13

 



14





15

应用程序.使用（胸围）;（



16





17

应用程序.使用（快递。json（））;



18




应用程序。使用（快递。url编码（*扩展： false *）;



20





21

 



22





23

康斯特板=新板（*



24





25

端口"COM4"，



26





27


28



29

 



30





31

让蜂子;



32





33

 



34





35

板。上（"就绪"> |



36




控制台。日志（"准备好了！



38





39

 



40





41

蜂蜂=新Led（13）;



42





43

});



44





45

 



47
应用程序.获取（'/api/起始比器'，（reqres[gt; ]


48





49

控制台。日志（"打开"）;



50





51

蜂贝器。上（）;



52





53

res.发送（*



54




消息： '打开'



56





57

});



58





59

});



60





61

 



62





63

应用程序.获取（'/api/停止比珀'，（reqres[gt; ]



65
控制台。日志（"关闭"）;


66





67

蜂贝器。关闭（）;



68





69

res.发送（*



70





71

消息"关闭"



72




   });



74





75

});



76





77

应用程序.听（波特> |



78





79

控制台。日志（"running在端口上运行的终结点 "[端口 ]"）;



80





81


82










此代码设置一个正常的快递应用程序，并将其连接到本地主机：3000。它还创建一个新的 Board对象实例，以便您可以连接到 Arduino 并声明表示蜂鸟的变量。您需要获取蓝牙地址，并将其用于主板的端口选项。这将允许您在部署到 Heroku 服务器后连接到主板。然后，它启动板与on方法和就绪选项。在此代码块中，您可以向控制台发送消息，以便知道主板应该打开。
最后，您需要设置蜂网的值。我将其定义为 LED，因为我们只需要一个简单的"高/低"信号发送到电路板，使其工作。在硬件方面，通常最好保持简单。蜂网还连接到引脚 13，类似于其物理对应物。
后端的最后一部分是编写两个终结点。由于我们打开和关闭蜂圈，点击前端按钮，一个端点将其打开，另一个端将其关闭。
我通常不会离开控制台.log在我的代码中，但这些真的可以帮助调试。有时，硬件会立即工作。其他时候，为了一切运转，可能需要稍加修补。此代码为这两种方案做好准备，并且是蜂蜂器工作所需的一切。从技术上讲，如果您记住端点名称，您甚至不需要前端！
约翰尼五对板对象做了一些魔法。当您调用board.on（）方法时，只要有电源，它会自动查找并连接到 HC 05 模块的蓝牙地址和 Arduino。代码连接到物理板后，Johnny-Five 会根据传递给LED对象的引脚号查找物理蜂王。单击前端的按钮时，它会调用相应的终结点，将高信号或低信号发送到引脚 13，从而打开或关闭蜂王。
普罗奇菲
最后，在Procfile中输入以下内容。这是 Heroku 专门使用的文件，该文件指定应用在启动时要执行的命令。在这种情况下，我们将 Web 进程定义为服务器。



Java
 
























xxxxxxx

1










             
          




1

Web节点服务器。js
















如果只想使用不需要任何 Heroku 特定文件的惯用节点，则可以使用包.json 文件中的起始字段。
现在，您可以最终部署应用，以便随时随地找到您的狗。
部署 IoT 狗圈应用
我们快完了！至此，您可能已为此 IoT 项目投入了几个小时，因此让我们充分利用它。由于狗可以消失在任何地方，所以谨慎部署你的应用程序，这样你就可以访问它任何地方。