为您的圣诞灯构建一个React Native应用

可以将您和您的家连接到互联网的产品不乏问题。 每个麦克风都带有连接到您的网络的另一个粗略WiFi设备和另一组麦克风，每个麦克风都在家里监听其特殊的触发词。 与其邀请更多的数字陌生人进入我们的家，还不如保留一个由我们制作的数字化作品的个人花园。 在今天的帖子中，我们将构建一个微型网络应用程序（以及iPhone / Android应用程序！）来控制仅在您在家并连接到家庭网络时才起作用的圣诞灯。 这是一种ARM64设备，具有四个内置USB端口，旨在在边缘进行机器学习。 我们将其用作Z-Wave USB记忆棒的服务器。 Z-Wave是用于家庭自动化的协议。 对于我们来说重要的是，它与您的WiFi分开运行。 就我而言，我将其连接到最多2个室外电灯开关，以打开和关闭我的圣诞灯。

电灯开关带有防水罩，上面有一个手动按钮。您可以按按钮启用配对模式，也可以手动打开和关闭灯。

通常，我不会尝试为如此小的项目构建iPhone应用程序。

但是，Expo使您在手机上运行代码成为一种很好的体验。他们会通过应用和命令行自动构建并推送到您的手机。

我们要做的第一件事是检查以确保我们在Jetson Nano的USB驱动器上安装并运行了Z-Wave记忆棒。

每次使用Z-Wave时，我都会忘记有关Z-Wave网络模型如何工作的细节。因此，我喜欢打开一个IPython会话，并开始使用网络：

从openzwave.option导入openzwave从openzwave.network导入ZWaveOption导入ZWaveNetwork＃确保这些Z-wave命令被刷新并带有时间.sleep＃另外，/ dev / ttyACM0是我的USB端口的Z-Stick选项的名称= ZWaveOption（＆＃39; / dev / ttyACM0＆＃39;）选项。 lock（）network = ZWaveNetwork（options）＃接下来的两行在import IPython IPython行中启动IPython会话。嵌入（）

从这里开始，我开始记住事情是如何工作的，并看到list（network.nodes.keys（））为我提供了连接到Z-Wave网络的节点的列表。因为我在IPython中，所以我也可以在每个对象之间切换以查看可用的功能。

一些Z-Wave设备内置有多个开关，每个开关都可能带有自己的调光器。要获取交换机，我们需要做一个列表（network.nodes [node] .get_switches.keys（））。

将所有内容放在一起，然后可以使用set_switch函数调用在每个节点上设置状态：

node_list =节点列表中节点的列表（网络节点）（键）。switch =列表（网络节点。node。get_switches）。key（）如果​​开关：如果更改[＆＃39; state＆＃39; ] ==＆＃39; ON＆＃39; ：网络。节点[node]。 set_switch（开关[0]，True）else：网络。节点[node]。 set_switch（开关[0]，False）

现在，我知道如何实现更改，我可以在Flask中构建一个API来提供更改：

@ app.route（＆＃39; / state＆＃39;，方法= [＆＃39; GET＆＃39;，＆＃39; POST＆＃39;]）def get_state（）：如果有请求。方法==＆＃39; GET＆＃39; ：node_list =列表（network.nodes.keys（））ON = false表示node_list中的节点：switch =列表（network.nodes [node] .get_switches（）。keys）如果switchs：state = network。节点[node]。 get_switch_state（切换[0]），如果state：ON = True，则在ON时继续：返回jsonify（{＆＃39; state＆＃39;：＆＃39; ON＆＃39;}）返回jsonify（{＆＃39; state＆＃ 39;：＆＃39; OFF＆＃39;}）change = request。 json node_list = node_list中的节点的列表（网络。节点。键（））：开关=列表（网络。节点[node]。get_switches（）。键（））if开关：如果更改[＆＃39; state＆＃39 ; ] ==＆＃39; ON＆＃39; ：网络。节点[node]。 set_switch（开关[0]，True）else：网络。节点[node]。 set_switch（开关[0]，False）时间。睡眠（2）返回jsonify（变化）

我添加了一个time.sleep，因为Z-Wave网络传播状态可能需要一些时间。两秒钟可能太长了，无法入睡，但是，嘿，它有效了，我并不着急。

同样，对于如此小的项目，构建应用程序通常是太多的工作。但是自从我构建了一个应用程序已经有一段时间了，而且我一直在听说React React，所以我决定试一试。

我很惊讶能够在不到一个小时的时间内在手机上构建应用程序的内置版本。有一个名为Expo的新平台，可以处理通常与部署iPhone应用程序相关的所有繁重工作。

确实，由于我的“应用”非常小（实际上是一个按钮，并且只有一个状态为“开”或“关”），因此除了基本的示例应用程序外，我实际上没有太多事情要做：

从＆＃39; react＆＃39;导入React，{useState，useEffect} ;从＆＃39; react-native＆＃39;导入{StyleSheet，Text，View，Button，Alert} ;导出默认功能App（）{const [currentState，setCurrentState] = useState（0）; const handlePress = e => {const newState =（currentState ==＆＃39; ON＆＃39;）？ ＆＃39; OFF＆＃39; ：＆＃39; ON＆＃39; const data = {＆＃39; state＆＃39; ：newState} const requestOptions = {方法：＆＃34; POST＆＃34; ，标题：{＆＃34; Content-Type＆＃34; ：＆＃34; application / json＆＃34; }，正文：JSON。 stringify（data）}获取（＆＃39; http：//192.168.1.44：8050 / state＆＃39;，requestOptions）。然后（response =＆gt; response。json（））。然后（res =＆gt; setCurrentState（res。state））}} useEffect（（）=＆gt; {获取（＆＃39; http：//192.168.1.44：8050 / state＆＃39;）。 res。json（））。then（data =＆gt; {setCurrentState（data。state）;}）}，[]）; return（＆lt;视图样式= {样式。容器}＆gt;＆lt;文本＆gt;灯光当前是{currentState}＆lt; / Text＆gt;＆lt;按钮标题=＆＃34;切换灯光＆＃34; onPress = {handlePress} /＆gt;＆lt; / View＆gt;）; } const styles = StyleSheet。创建（{容器：{flex：1，backgroundColor：＆＃39;＃fff＆＃39;，alignItems：＆＃39; center＆＃39;，justifyContent：＆＃39; center＆＃39;，}，}）;

在这里，您可以在局域网上看到对我的Flask应用的API的调用。我为Jetson Nano设置了静态IP地址，并在非标准端口8050上运行Flask服务器。之所以这样做，是因为我在Nano上运行了其他Flask应用。

打开应用程序后，将向/ state资源发出GET请求。它返回一个JSON对象以及Z-Wave开关的当前状态。如果一个打开，则网络被视为打开。

从这里，我们可以按一个按钮来翻转状态。这会向/ state资源发出POST请求，并带有所需的新状态。

我可以通过expo build：ios在手机上将应用程序从终端构建到Expo App。完成后，我可以打开Expo应用程序并控制我的圣诞灯。

所有代码都是开源的，并存在于Github上。 我没有提到它，但是Flask应用程序中还有一个视图，您也可以在浏览器中访问该视图来控制灯光。 您可以在/网址中看到它。 我鼓励您使您的应用看起来比我的更好，并分享结果。