狗

狗联网：如何打造一个价值 50 美元的物联网狗项圈来定位你的宠物

2025-06-08

狗联网：如何打造一个价值 50 美元的物联网狗项圈来定位你的宠物

我喜欢业余项目。它们让我有机会发挥创造力，并以新的方式探索物联网 (IoT) 等技术。幸运的是，我的下一个项目很快就找到了；宠物主人常遇到的一个难题催生了物联网狗项圈的概念。

我的狗狗在后院待了一会儿。当我决定把它带回家时，却怎么也找不到它！我找了好几分钟，还叫了它的名字，最后发现它在树荫下打盹。如果你对这种场景很熟悉，那么这篇文章就是为你准备的！

在本教程中，我将向您展示如何设置构建物联网狗项圈所需的硬件。我们还将逐步讲解如何构建用于呼叫和定位宠物的前端和后端 Web 应用。我们将使用 Arduino Uno、Johnny-Five JavaScript 机器人与物联网平台、Heroku以及其他一些组件。到最后，您将能够更加熟练地将 JavaScript 技能应用于硬件。希望您能从中获得无穷乐趣！准备好了吗？出发！

您需要的硬件

以下是构建物联网狗项圈所需的硬件和资源列表：

Arduino Uno ($21)
压电蜂鸣器($9)
无线通信器($10)
电源($6)
面包板和电线（可选：$9）
Heroku 爱好测功机 ($0)
外壳（任何可以容纳电子设备并适合狗项圈的东西）

** 价格当然会变动。

设置前端

一个优秀的副项目能让你自由地尝试一些平时工作中不会做的事情。秉承这一原则，这个物联网项目的前端只是一个按钮，上面有一些文字，用来控制蜂鸣器的开关——无需使用 React 或 Angular 之类的框架。我们将使用一个 HTML 文件、一个 CSS 文件和一个纯 JavaScript 文件来编写代码。

保持前端简洁意味着您可以根据自己的喜好自定义最终输出。这也是一个绝佳的机会，让您回归基础，并记住所有代码最终编译成什么样！

在根文件夹中，创建以下三个文件：

  • 索引.html
  • 索引.css
  • index.js

索引.html

我们现在开始编写 index.html 文件的代码：

<!DOCTYPE html>

<html>

   <head>

       <link rel="stylesheet" href="./index.css">

       <title>Find My Dog</title>

   </head>

   <body>

       <header>I have no clue where they went.</header>

       <main>

           <button id='beeper-btn' type="button">Activate the noise</button>

       </main>

       <script src="./index.js"></script>

   </body>

</html>
Enter fullscreen mode Exit fullscreen mode

这里最重要的是在按钮元素上添加 id 属性。除此之外，您可以随意向页面添加其他元素，以适合您的风格。

索引.css

现在，让我们编写 CSS 文件：

body {

   font-family: 'Lato', 'Trebuchet MS', sans-serif;

}

header, main {

   text-align: center;

}

header {

   font-size: 36px;

}

button {

   background-color: rgb(255, 0, 0);

   border: unset;

   font-size: 24px;

   margin-top: 24px;

   padding: 12px;

}

button:hover {

   background-color: rgba(255, 0, 0, 0.5);

   font-size: 24px;

}
Enter fullscreen mode Exit fullscreen mode

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

页面的基本形式

如果您确实进行了编辑，那么输出可能会略有不同。不过不用担心——这正是业余项目最大的优点之一！您可以使用一些极简风格，例如上面的例子，也可以尝试一些更酷炫的 CSS 功能。

index.js

现在是时候编写一些基本的 JavaScript 代码了。最棒的是？你不需要安装任何依赖项！

   const beeperBtn = document.querySelector('#beeper-btn');

   let isBeeperActivated = false;

   const toggleBeeper = () => {

       isBeeperActivated = !isBeeperActivated;



       isBeeperActivated ?  

       fetch('http://localhost:3000/api/startBeeper')

           .then(console.log) 

       :

       fetch('http://localhost:3000/api/stopBeeper')

           .then(console.log) 

   }

   beeperBtn.addEventListener('click', toggleBeeper);
Enter fullscreen mode Exit fullscreen mode

该文件仅做三件事：

  1. 它向index.html中的按钮添加了一个“onclick”事件监听器。
  2. 它设置一个名为“isBeeperActivated”的状态变量。
  3. 当单击按钮时，它会改变状态并调用适当的后端端点。

说实话……我花了好长时间才想起如何在框架之外让 JavaScript 文件和 HTML 文件协同工作。这也是业余项目如此棒的另一个原因。它们不仅能让你有机会学习新知识，还能让你练习一些你可能很久没用过的基本知识。

设置硬件

如果你已经做到了这一步，恭喜你——你已经完成了这个项目的整个前端！现在，让我们来处理硬件。在本节中，我们将演示如何使用 Arduino Uno、扬声器和其他组件来设置你的面包板。

首先，让我们确保您的 Arduino Uno 已准备好与 Johnny-Five 平台配合使用。您需要将标准 Firmata 代码上传到您的开发板。最简单的方法是通过 Arduino IDE 进行上传。如果您以前从未使用过 Arduino，也不用担心；这是一种直接点击式的上传方式。这里有一个很棒的上传流程演示。它将向您展示如何找到 Arduino IDE 自带的标准 Firmata 代码示例，以及如何将代码上传到您的 Arduino。

接下来，你需要让你的 Arduino 与 HC 05 蓝牙模块配合使用。这是我在这部分使用的教程。你会看到将 HC 05 连接到 Arduino 的原理图，以及你需要上传的草图，以便 HC 05 与 Arduino 的串口通信。完成此步骤后，重新上传标准 Firmata 草图并连接到 Johnny-Five。

设置好开发板后，您可以使用电池组为其供电，并连接压电蜂鸣器。将电池组的红线连接到开发板的Vin引脚，将黑线连接到开发板电源侧的GND引脚之一。HC 05 模块应连接到 5V 引脚和另一个GND引脚。最后，您可以将压电蜂鸣器连接到 13 引脚和GND引脚。

硬件组件特写
Arduino Uno、压电蜂鸣器、电源和 HC 05 连接的特写

想让线路更整洁？试试用面包板和跳线，这样更容易追踪连接。注意：这会改变外壳的尺寸。说到这……

把所有组件组装好后，就可以把它们放进外壳里了。确保电池组方便取放，方便开关。我选择把电池组放在一个小袋子里，再放进一个盒子里。这是处理硬件的最佳方式吗？当然不是！不过记住，除了你之外，没人会看到这么多东西。所以，尽情发挥你的创意吧。我选择了一个 SweetTarts 盒子。（它完美地展现了我家狗狗的个性。）

五金外壳糖果盒
我的硬件外壳

盒子里没有糖果，只有电子产品
外壳内部一览

设置后端

呼！如果你已经做到这里，不妨给自己一个赞——你刚刚完成了硬件部分！是不是有点难？现在，我们来看看这个物联网项目的最后一段代码：Node 后端。

我选择在 Heroku 上部署我的应用；它快速、简单，而且或许最重要的是，这类部署完全免费。您可以在这里注册一个账户。当然，您也可以随意使用任何您喜欢的服务。注册后，请确保您已安装 Heroku CLI，以便稍后部署应用。您可以在这里找到安装说明：https://devcenter.heroku.com/articles/heroku-cli#download-and-install

现在打开终端并使用以下命令检查 Heroku CLI 是否正确安装：

heroku --version
Enter fullscreen mode Exit fullscreen mode

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

heroku login
Enter fullscreen mode Exit fullscreen mode

这会将你重定向到一个网页，你可以在其中使用你的 GitHub 凭证登录。现在，你已经完成了所有设置，可以将这个应用直接部署到 Heroku 了。

但首先，你需要安装一些软件包才能使其正常工作。在根文件夹中，创建以下新文件：

  • 服务器.js
  • 进程文件

现在，打开终端，准备安装所有需要的软件包。我更喜欢npm，但你也可以使用 yarn。

npm install cors express johnny-five
Enter fullscreen mode Exit fullscreen mode

这些是您唯一需要的软件包，就像设置任何其他 Node 应用程序一样。

服务器.js

您需要创建两个端点来控制蜂鸣器的开启和关闭。这些端点是您在前端获取请求中引用的。打开您的server.js文件并添加以下代码：

const { Board, Led } = require('johnny-five');

const cors = require('cors');

const express = require('express');

const PORT = process.env.PORT || 3000;

const app = express();


app.use(cors());

app.use(express.json());

app.use(express.urlencoded({ extended: false }));


const board = new Board({

 port: "COM4",

});


let beeper;


board.on("ready", () => {

 console.log("Ready!");

 beeper = new Led(13);

});


app.get('/api/startBeeper', (req, res) => {

   console.log('on');

   beeper.on();

   res.send({

       message: 'on'

   });

});


app.get('/api/stopBeeper', (req, res) => {

   console.log('off');

   beeper.off();

   res.send({

       message: 'off'

   });

});

app.listen(PORT, () => {

 console.log(`endpoints running on port ${PORT}`);

});
Enter fullscreen mode Exit fullscreen mode

这段代码设置了一个普通的 Express 应用，并将其连接到localhost:3000。它还会创建一个Board对象的新实例，以便您可以连接到 Arduino 并声明一个代表蜂鸣器的变量。您需要获取蓝牙地址，并在开发板的port选项中使用它。这将允许您在部署到 Heroku 服务器后连接到开发板。然后，它会使用on方法和ready选项启动Board。在此代码块中，您可以向控制台发送一条消息，以便知道开发板应该处于开启状态。

最后，你需要设置beeper的值。我将其定义为 LED，因为我们只需要向开发板发送一个简单的“高/低”信号即可使其工作。在硬件方面，通常情况下，保持简单会更好。Beeper也连接到引脚 13，与物理接口类似。

后端的最后一部分是写入两个端点。由于我们通过点击前端的按钮来打开或关闭蜂鸣器，因此一个端点会打开蜂鸣器，另一个端点会关闭蜂鸣器。

我通常不会在代码中保留console.log文件，但它们确实有助于调试。有时，硬件会立即工作。有时，可能需要进行一些调整才能使所有功能协同工作。这段代码可以帮助您应对这两种情况，并且包含使蜂鸣器正常工作所需的一切。如果您记住了端点名称，实际上甚至不需要前端！

Johnny-Five 使用Board对象施展了一些魔法。当你调用board.on()方法时，只要 HC 05 模块和 Arduino 有电，它就会自动查找并连接到该模块的蓝牙地址。一旦代码连接到实体电路板，Johnny-Five 就会根据你传递给LED对象的引脚号来查找实体蜂鸣器。当你点击前端的按钮时，它会调用相应的端点，向引脚 13 发送高电平或低电平信号，从而打开或关闭蜂鸣器。

进程文件

最后，在 Procfile 中输入以下内容。这是 Heroku 专用的文件，用于指定应用启动时要执行的命令。在本例中，我们将 Web 进程定义为服务器。

网络：节点服务器.js

如果您只想使用惯用的 Node 而不使用任何 Heroku 特定文件，则可以使用package.json文件中的start字段。

现在，您终于可以部署您的应用程序了，这样您就可以随时随地找到您的狗。

部署物联网狗项圈应用程序

我们快完成了！到目前为止，你可能已经在这个物联网项目上投入了几个小时，所以让我们充分利用它吧。由于狗狗可能在任何地方消失，因此最好将你的应用部署到可以随时随地访问的位置。

Heroku 中的初始仪表板
Heroku 中的初始仪表板

我选择通过 Heroku CLI 部署，将我的应用连接到 Heroku。Heroku 提供了简洁易用的说明，可帮助您快速设置和上线。您需要确保更改以下几项，包括：

  • 您在根 index.js 文件中进行的 API 调用现在应该引用您在 Heroku 中使用的 URL 和端口。
  • 您需要在项目根目录下添加一个 package.json 文件，其代码如下。这样，Heroku 就能知道如何在生产环境中运行您的应用。
{

   "name": "dog-locator",

   "version": "0.1.0",

   "scripts": {

       "build": "npm install",

       "dev": "npm run build && npm run start",

       "start": "node server.js"

   },

   "dependencies": {

       "concurrently": "^5.1.0", 

              "cors": "^2.8.5",

       "express": "^4.17.1",

       "johnny-five": "^1.4.0",

       "path": "^0.12.7"

   }

}
Enter fullscreen mode Exit fullscreen mode

完成所需设置后，即可部署应用程序。应用程序将搜索 HC 05 并找到用于连接的蓝牙地址。部署前，请确保 Arduino 和 HC 05 已通电，否则初始连接可能会出现一些错误。

如果您想克隆该项目的代码，可以从 GitHub 获取：https://github.com/flippedcoder/arduino-johnny-five-locator

现在打开终端，准备使用 Heroku CLI。由于您已经安装并登录，因此您应该能够运行以下命令在 Heroku 上创建一个新的空应用程序：

heroku create
Enter fullscreen mode Exit fullscreen mode

然后运行以下命令将项目直接部署到 Heroku：

git push heroku master
Enter fullscreen mode Exit fullscreen mode

在最后一行推送项目后，您应该会在终端中看到类似这样的内容，然后您的项目就会上线！

Heroku 中的项目日志
从终端部署到 Heroku 的项目日志

说实话，我喜欢在这个平台上部署业余项目，因为 CI/CD 是我的弱项之一，而这个平台是一个很好的练习！而且有了这个应用，无论我走到哪里都能轻松找到我的狗。

我的狗不回应我的呼唤
他就在那儿

您下一步要建造什么？

恭喜！您现在拥有一个功能齐全的物联网狗项圈，它可以随时随地帮您找到您的爱宠！现在就来测试一下吧。玩捉迷藏……在后院跑来跑去……扔飞盘……做任何您平时和狗狗一起做的事情。最重要的是确保新项圈适合您和狗狗的生活方式。

现在你已经完成了你的物联网狗项圈，只剩下一个问题：你接下来要做什么？这些努力需要时间、耐心和毅力，然而，这个过程往往充满乐趣，回报丰厚。我希望这个小项目能给你一些关于下一步工作的想法。

如果你正在基于此项目构建新内容，或者只是想查看代码，可以在这里找到。如果你需要下一个物联网项目的灵感，我强烈推荐以下资源：

https://www.instructables.com/circuits/
https://learn.adafruit.com/
https://www.coursera.org/learn/iot

别忘了我在Twitter上！我大部分有用的内容都发在那里。

链接链接 https://dev.to/flippedcoding/the-internet-of-dogs-how-to-build-a-50-iot-dog-collar-that-locates-your-pet-5d5p
Devto 翻译
PREV
通过 BrainJS 在 UI/UX 中使用机器学习
NEXT
最常用的 CSS 计量单位解释