物联网mqtt前端怎么开发_物联网世界中的前端开发

绝地灬酷狼 2022-12-03 01:51 257阅读 0赞

物联网mqtt前端怎么开发

![IoTWeek\_Gray][IoTWeek_Gray]

*It’s IoT Week at SitePoint! All week we’re publishing articles focused on the intersection of the internet and the physical world, so keep checking the [IoT tag][] for the latest updates.*

*这是SitePoint的IoT周！* *我们整周都在发布有关互联网与物理世界交汇点的文章，因此请继续检查[IoT标签][IoT tag]以获取最新更新。*

The world wide web has continuously developed and morphed throughout its 27-year history. How we display and style content has gone through various phases throughout this time, the most recent of which was the emergence of a *responsive web* — one web that adapts to fit multiple browsers and device sizes. When it comes to a web with an ever growing number of “Internet of Things” (IoT) devices such as Raspberry Pis, smartwatches, personal assistants that work solely via voice, and so much more — the potential of the responsive web is going to be tested.

整个27年的历史中，万维网一直在不断发展和变化。 在这段时间里，我们如何显示和设置内容样式经历了多个阶段，最近的阶段是*响应式Web*的出现-一种可适应多种浏览器和设备尺寸的Web。 当涉及到具有不断增长的“物联网”(IoT)设备(例如Raspberry Pi，智能手表，仅通过语音工作的个人助手等)的网络时，响应式网络的潜力将会被测试。

The IoT means even more varied devices out there in the wild that could potentially try to load content from the web. We need to ensure that the web remains as accessible and usable to those devices if we are to avoid another big segmentation like we had in the early battles between mobile and desktop. The last thing we want is one web designed for the IoT and one for the mobile and desktop web.

物联网意味着野外有更多种类的设备，它们可能潜在地尝试从Web加载内容。 如果我们要避免像在移动设备和台式机之间的早期战争中那样发生另一次大规模细分，我们需要确保这些设备可以访问和使用网络。 我们想要的最后一件事是为物联网设计的网站，以及为移动和桌面网站设计的网站。

## 哪些物联网设备可以显示网络？ **(**What IoT Devices Might Display The Web?**)** ##

A lot of developers don’t quite realise the potentially broad number of devices that are likely to try to display web content to people in the future.

许多开发人员并未完全意识到将来可能会尝试向人们显示Web内容的大量设备。

### 带有小显示器的计算设备 **(**Computing Devices With Small Displays**)** ###

![Raspberry Pi Screen from Adafruit][]

A [2.8″ Touchscreen for Raspberry Pi from Adafruit][2.8_ Touchscreen for Raspberry Pi from Adafruit]

[Adafruit的Raspberry Pi 2.8英寸触摸屏][2.8_ Touchscreen for Raspberry Pi from Adafruit]

Devices such as [Raspberry Pis with tiny screens from 2.4″ and higher][Raspberry Pis with tiny screens from 2.4_ and higher] have Wi-Fi, ethernet and even 3G/4G connections, giving them plenty of potential for displaying web content. This content may come in the form of web pages from the world wide web, or it may come in the form of local web pages for embedded device manuals, web-based device control pages and local dashboard style web page displays.

[具有2.4英寸及更高的超小屏幕的Raspberry Pis之类的][Raspberry Pis with tiny screens from 2.4_ and higher]设备具有Wi-Fi，以太网甚至3G / 4G连接，使它们有足够的潜力来显示Web内容。 此内容可能以来自万维网的网页的形式出现，也可能以嵌入式设备手册的本地网页，基于Web的设备控制页面和本地仪表板样式的网页显示的形式出现。

### 智能手表 **(**Smartwatches**)** ###

![The Android Wear web browser from appfour][]

appfour’s [Android Wear Web Browser][]

appfour的[Android Wear网络浏览器][Android Wear Web Browser]

Smartwatches can have even smaller displays, with a whole range of different color ranges and screen resolutions. While the Apple Watch doesn’t have a web browser yet, Android has a [Web Browser for Android Wear][Android Wear Web Browser] by Appfour and there’s every possibility that over time more smartwatch web browsers may be on the horizon (assuming someone cracks how to design the app in a way that’s easy to use!). At the very least, if the web is to be truly responsive and accessible everywhere, we should be ready for this possibility. What happens if in the future someone is reading an email on their smartwatch and they click a web link? A simple web browser client on a powerful smartwatch isn’t too farfetched.

智能手表甚至可以具有更小的显示屏，并具有各种不同的颜色范围和屏幕分辨率。 尽管Apple Watch还没有网络浏览器，但Android拥有Appfour的[Android Wear Web浏览器，][Android Wear Web Browser]而且随着时间的推移，很有可能会出现更多的智能手表网络浏览器(假设有人破解了如何在智能手机中设计应用程序)易于使用的方式！)。 至少，如果要使Web真正响应并在任何地方都可以访问，我们应该为这种可能性做好准备。 如果将来有人在智能手表上阅读电子邮件并单击Web链接怎么办？ 功能强大的智能手表上的简单网络浏览器客户端并不太牵强。

### 语音助理 **(**Personal Assistants Over Voice**)** ###

![Amazon Echo][]

The Amazon Echo (Image Source: [Amazon][])

亚马逊回声(图片来源： [亚马逊][Amazon] )

One new trend in computing is the smart voice assistant, such as Apple’s Siri, Amazon Echo’s Alexa, Google Now and Microsoft Cortana. These assistants’ role in the home will be to turn lights on and off, set alarms, adjust the thermostat temperature and so on. These services also respond to voice commands and questions with data they retrieve from various places online — usually this involves pairing each company’s databases of information with the details it can get about the person using the service itself. For those interested in the area, I’ve covered how to get started building your own simple artificial intelligence assistants here at SitePoint in the past, including a piece on [Five Simple Ways to Build Artificial Intelligence in 2016][] and a series on [How to Build Your Own AI Assistant Using Api.ai][].

计算的一种新趋势是智能语音助手，例如Apple的Siri，Amazon Echo的Alexa，Google Now和Microsoft Cortana。 这些助手在家里的作用是打开和关闭灯，设置警报，调节恒温器温度等。 这些服务还会对语音命令和问题以及从网上各个地方检索到的数据进行响应-通常这涉及将每个公司的信息数据库与使用该服务本身的人员所能获得的详细信息配对。 对于那些对该领域感兴趣的人，我已经介绍了过去如何在SitePoint上开始构建自己的简单人工智能助手，包括一篇关于[2016年构建人工智能的五种简单方法的文章][Five Simple Ways to Build Artificial Intelligence in 2016]以及关于[如何构建自己的][How to Build Your Own AI Assistant Using Api.ai] [人工智能][Five Simple Ways to Build Artificial Intelligence in 2016]的一系列文章。 [使用Api.ai拥有AI助手][How to Build Your Own AI Assistant Using Api.ai] 。

Over time, with improvements in artificial intelligence and machine learning, these assistants just might scour the web for information and read it back to us.

随着时间的流逝，随着人工智能和机器学习的改进，这些助手可能会在网上搜寻信息并将其读回给我们。

To allow this to be possible, the web needs to be accessible to bots who will plan on reading the information out, rather than displaying it visually. Ideally, web pages should already be structured to suit this for screen readers, however adoption of accessible markup is often an after thought today. The emergence of personal assistant AI services just might help change that.

为了使这种可能性成为可能，机器人将需要访问网络，这些机器人将计划读出信息，而不是直观地显示信息。 理想情况下，应该已经将网页的结构设计为适合屏幕阅读器，但是如今采用可访问标记通常是人们深思熟虑的。 个人助理AI服务的出现可能有助于改变这一状况。

### 全新的展示 **(**Entirely New Displays**)** ###

The computer displays of the future, when it comes to the Internet of Things, could include a range of new and pretty fantastic possibilities. Think about devices like smart mirrors, smart windows, smart car dashboards — these will occur just casually throughout our lives, but how nicely will the web display on them? A whole range of new design decisions arise — to display content on a mirror/window, you might need to have more contrast between colors. Mirror/window displays could have a limited color range which web developers will need to account for? It’s going to be a whole new (and exciting) world.

当涉及到物联网时，未来的计算机显示器可能会包含一系列新颖而奇妙的可能性。 考虑一下诸如智能后视镜，智能窗户，智能汽车仪表板之类的设备-这些将在我们的整个生活中随随便便出现，但是网络在它们上的显示效果如何？ 出现了一系列新的设计决策-要在镜子/窗口上显示内容，您可能需要使颜色之间具有更大的对比度。 镜像/窗口显示的颜色范围可能有限，Web开发人员需要考虑这些颜色范围？ 这将是一个全新的(令人兴奋的)世界。

![Mercedes Benz Dashboard Prototype][]

A Mercedes Benz dashboard prototype (Image Credit: [Mercedes Benz][])

梅赛德斯奔驰仪表板原型(图片来源： [奔驰][Mercedes Benz] )

## 未来证明我们CSS和标记 **(**Future Proofing Our CSS and Markup**)** ##

There are a few key areas which I think web developers will need to pay close attention to in the future, if we are to have a web that plays nicely with new technology.

我认为，如果我们要拥有一个可以很好地与新技术配合使用的网站，我认为网络开发人员将来需要密切关注一些关键领域。

### 真正响应式CSS **(**Truly Responsive CSS**)** ###

Web pages will need to adapt and be relatively readable on tiny displays. Detecting incredibly small display resolutions is likely to be the key here from a CSS perspective. Will the CSS approach to a tiny display be similar to a mobile site? Or will we need to create new rules and standards that help display text in a larger font? New standards for restructuring layout for tiny screens using techniques like flexbox? New standards for styling menus on a tiny display? Only time will tell but a few select web developers are likely to end up pioneering this effort and it will be fascinating to see what the community comes up with.

网页将需要适应并且在小显示器上相对可读。 从CSS的角度来看，检测非常小的显示分辨率可能是关键。 小型显示器CSS方法会类似于移动网站吗？ 还是我们需要创建新的规则和标准来帮助以更大的字体显示文本？ 使用flexbox之类的技术来调整小屏幕布局的新标准？ 在小型显示器上设置菜单样式的新标准？ 只有时间会证明一切，但是一些精选的Web开发人员很可能最终会率先进行这项工作，并且看到社区的想法将非常着迷。

### `<picture>`元素 **(**The `<picture>` Element**)** ###

The picture element allows us to specify multiple images to display depending on the resolution and device type. The final version of this spec will be key to ensuring a smoothly running web when loading pages on what might be rather low powered devices on slower connections, and on devices with very small resolutions that may not cope with displaying large images.

图片元素使我们可以根据分辨率和设备类型指定要显示的多个图像。 该规范的最终版本对于确保在连接速度较慢的低功率设备以及分辨率极低的设备(可能无法显示大图像)上加载页面时确保网页平稳运行至关重要。

### JavaScript依赖是危险的 **(**JavaScript Reliance Is Dangerous**)** ###

When looking at lower powered devices and personal assistant devices that will read out web page content, they may not necessarily run JavaScript or be able to handle it to the same extent as a smartphone or desktop tablet. If your website relies on JavaScript to pull in its data without any fallbacks, newer IoT devices might struggle to access it. Ensuring the web works without JavaScript is still a worthwhile endeavor!

在查看能读取网页内容的低功耗设备和个人助理设备时，它们可能不一定运行JavaScript或能够以与智能手机或台式平板电脑相同的程度来处理它。 如果您的网站依靠JavaScript提取其数据而没有任何回退，则更新的IoT设备可能会难以访问它。 确保没有JavaScript的网络作品仍然是一项值得努力的工作！

### WAI-ARIA和其他辅助功能技术 **(**WAI-ARIA and Other Accessibility Techniques**)** ###

Techniques already in place to make the web accessible for those with disabilities will also make the web accessible for artificial intelligence, personal assistants and other voice-based technologies. Building websites with [WAI-ARIA][] and other accessibility techniques in mind from the start today could help lessen the amount of rework in future. It’s also incredibly useful for those with disabilities today and is good practice nonetheless. We’ve covered this in some detail over at [How to Use ARIA Effectively with HTML5][] and [Avoiding Redundancy with WAI-ARIA in HTML Pages][].

使残疾人可以访问网络的现有技术也将使人工智能，个人助理和其他基于语音的技术可以访问该网络。 从今天开始就考虑使用[WAI-ARIA][]和其他可访问性技术来构建网站可以帮助减少将来的返工量。 对于当今的残疾人士来说，它也是非常有用的，而且还是一种很好的做法。 我们已经在“ [如何在HTML5中有效使用ARIA][How to Use ARIA Effectively with HTML5]和[如何][How to Use ARIA Effectively with HTML5] [在HTML Pages中通过WAI-ARIA避免冗余”中][Avoiding Redundancy with WAI-ARIA in HTML Pages]对此进行了详细介绍。

### 颜色和设计选择 **(**Color and Design Choices**)** ###

Mirror and window based displays are likely to need high contrast between colors in your design to ensure it is legible against the more varied background of a bathroom scene, a sky or other room… etc.

基于镜子和窗户的显示器可能需要在设计中的不同颜色之间具有较高的对比度，以确保在浴室场景，天空或其他房间等更多样化的背景下清晰可见。

Displays such as smart mirrors may display content similar to “high contrast mode” on current day operating systems, the mode which inverts the colors of your screen and turns up the contrast. In order to display on such a different style of display, smart mirrors may need to adopt a similar technique. If your web designs are built to display well in high contrast mode and have strong contrast between colors in your theme, this shouldn’t be too much of an issue.

诸如智能镜之类的显示器可能会显示类似于当前操作系统上的“高对比度模式”的内容，该模式会反转屏幕的颜色并提高对比度。 为了在这种不同风格的显示器上显示，智能镜可能需要采用类似的技术。 如果您的网页设计能够在高对比度模式下很好地显示，并且主题中的颜色之间具有很强的对比度，那么这应该不是问题。

![SitePoint on a Smart Mirror][]

My artist’s impression of a high contrast SitePoint on [Max Braun’s concept smart mirror][Max Braun_s concept smart mirror]

我的画家对[Max Braun概念智能镜][Max Braun_s concept smart mirror]上的高对比度SitePoint的印象

## DOM复杂度 **(**DOM Complexity**)** ##

While desktop PCs and smartwatches are able to handle complicated DOM structures with lots of nested elements and CSS transitions, it’s entirely likely that IoT devices and wearables will struggle with these. Keeping a clean structure with your DOM elements might be more important than ever for performance on new devices.

尽管台式机和智能手表能够处理带有大量嵌套元素和CSS过渡的复杂DOM结构，但IoT设备和可穿戴设备很可能会为此而苦苦挣扎。 对于新设备的性能而言，保持DOM元素的结构整洁可能比以往任何时候都更为重要。

## 测试将变得艰难 **(**Testing Is Going To Get Tough**)** ##

It’s already pretty difficult to test your website on the range of smartphones, tablets, smart TVs and desktop OSes out there — as the Internet of Things and other technological advances continue (virtual and augmented reality are coming too!), it’s going to become increasingly difficult to test thoroughly on absolutely everything. Adopting web standards, accessibility standards and the ideas mentioned above should help make web designs as accessible as possible.

在各种智能手机，平板电脑，智能电视和台式机操作系统上测试您的网站已经非常困难-随着物联网和其他技术进步的不断发展(虚拟现实和增强现实也将到来！)，它将越来越多很难对所有内容进行彻底的测试。 采用Web标准，可访问性标准和上述思想应有助于使Web设计尽可能地易于访问。

A level of foresight will be a necessary skill for professional web developers in the coming decade as they will need to envision how web designs will adjust and display on a range of devices without having physical access to test each one. Hopefully, emulators and automated tests will help out a little bit too.

对于专业的Web开发人员来说，具有远见卓识将是未来十年的必要技能，因为他们需要设想Web设计将如何在一系列设备上进行调整和显示，而无需实际测试每个设备。 希望仿真器和自动化测试也能有所帮助。

## 无所不在的API **(**The Omnipresent API**)** ##

A responsive web will not be the only web-based source of information for the Internet of Things. The responsive web will have a companion that is just as important and is something I’ve discussed before — [the Omnipresent API][]. This will be the server-side equivalent for the web that should enable fast iterations and adaptations for emerging technology in areas where web browsers themselves cannot reach. An omnipresent API is one that provides access to functionality and data from an application/service in a platform-agnostic way. A lack of omnipresent APIs, combined with a responsive web that cannot adapt fast enough, will lead to huge segmentation with every new piece of emerging technology.

响应式网络将不是物联网的唯一基于网络的信息源。 响应式网络将有一个同等重要的同伴，这也是我之前讨论过[的同伴-Omnipresent API][the Omnipresent API] 。 这将是Web的服务器端等效项，应在Web浏览器本身无法到达的区域中对新兴技术进行快速迭代和调整。 无所不在的API是一种以与平台无关的方式提供对来自应用程序/服务的功能和数据的访问的API。 缺少无所不在的API，再加上响应速度不够快的自适应Web，将导致每一项新兴技术的大规模细分。

It is crucial for both to co-exist. Our responsive web should be populated by content from omnipresent APIs that can then be adapted to work across the technology spectrum. Devices without a web browser should have apps that populate their content from an omnipresent API. Once a device has access to a web browser, that content should also be accessible via the responsive web. For more information on omnipresent APIs, have a read of my piece on [The Era of the Omnipresent API][the Omnipresent API].

两者共存至关重要。 我们的响应式网络应使用无所不在的API的内容填充，然后可以对其进行调整以使其适用于整个技术领域。 没有网络浏览器的设备应具有从无所不在的API填充其内容的应用。 设备访问网络浏览器后，该内容也应该可以通过响应网络访问。 有关无所不在API的更多信息，请阅读我关于无所不在API [时代的文章][the Omnipresent API] 。

## 结论 **(**Conclusion**)** ##

Front-end development practices on the web do not *need* to adapt in these ways to suit the Internet of Things and other evolutions in technology. However, I believe that if they do not, the web will become segmented into something used only on desktop and occasionally on mobile, just as the true potential of a responsive web was hampered by the prevalence of mobile apps. If the web does not adapt, we may instead see segmentation as wearable apps, IoT apps, Alexa apps and so on become their own silos — rather than sharing the common ecosystem of the web.

Web上的前端开发实践*不需要*以这些方式进行适应以适应物联网和其他技术发展。 但是，我相信，如果不这样做，网络将被细分为仅在台式机上使用的内容，偶尔在移动设备上使用，就像响应式网站的真正潜力被移动应用程序的普及所阻碍。 如果网络不适应，我们可能会将细分视为可穿戴应用程序，IoT应用程序，Alexa应用程序等成为自己的孤岛，而不是共享网络的共同生态系统。

What do you think about the future of front-end development and the web in the face of emerging technology like the Internet of Things? Let me know in the comments below, or get in touch with me on Twitter at [@thatpatrickguy][thatpatrickguy].

面对物联网等新兴技术，您如何看待前端开发和网络的未来？ 在下面的评论中让我知道，或者在Twitter上通过[@thatpatrickguy][thatpatrickguy]与我[联系][thatpatrickguy] 。

> 翻译自: [https://www.sitepoint.com/the-future-of-the-web-in-an-internet-of-things-world/][https_www.sitepoint.com_the-future-of-the-web-in-an-internet-of-things-world]

物联网mqtt前端怎么开发

[IoTWeek_Gray]: /images/20221123/778c83ac4ff34c39a69878348697adbc.png
[IoT tag]: https://www.sitepoint.com/tag/iot/
[Raspberry Pi Screen from Adafruit]: /images/20221123/bcfeba460018445487cb2ca544945a9a.png
[2.8_ Touchscreen for Raspberry Pi from Adafruit]: https://www.adafruit.com/products/1601
[Raspberry Pis with tiny screens from 2.4_ and higher]: https://www.adafruit.com/categories/804
[The Android Wear web browser from appfour]: /images/20221123/18f0e5838afe4ba1812fe26bd3d16fad.png
[Android Wear Web Browser]: https://play.google.com/store/apps/details?id=com.appfour.wearbrowser&hl=en
[Amazon Echo]: /images/20221123/f395b24d3d024922a9b40fd5321afb30.png
[Amazon]: https://www.youtube.com/watch?v=FQn6aFQwBQU
[Five Simple Ways to Build Artificial Intelligence in 2016]: https://www.sitepoint.com/five-simple-ways-to-build-artificial-intelligence-in-2016/
[How to Build Your Own AI Assistant Using Api.ai]: https://www.sitepoint.com/how-to-build-your-own-ai-assistant-using-api-ai/
[Mercedes Benz Dashboard Prototype]: /images/20221123/298d7a4166824f4abef246d2cd8bda5f.png
[Mercedes Benz]: https://www.mercedes-benz.com/en/mercedes-benz/design/the-car-as-a-medium/
[WAI-ARIA]: https://www.w3.org/TR/wai-aria-1.1/
[How to Use ARIA Effectively with HTML5]: https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
[Avoiding Redundancy with WAI-ARIA in HTML Pages]: https://www.sitepoint.com/avoiding-redundancy-wai-aria-html-pages/
[SitePoint on a Smart Mirror]: /images/20221123/8ec50c9c8f03452fb96058ad669a7f91.png
[Max Braun_s concept smart mirror]: https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.lnf3gdctt
[the Omnipresent API]: https://devdiner.com/opinion/the-era-of-the-omnipresent-api
[thatpatrickguy]: https://www.twitter.com/thatpatrickguy
[https_www.sitepoint.com_the-future-of-the-web-in-an-internet-of-things-world]: https://www.sitepoint.com/the-future-of-the-web-in-an-internet-of-things-world/