开始使用 Pico W

Mangs

387人浏览 · 2022-08-15 08:35:25

Mangs · 2022-08-15 08:35:25 发布

构建您的第一台联网设备

本指南将向您展示如何使用全新的 Pico W,将其安全地连接到 Internet,并从 Web 界面控制它——全部使用 Python。

我们要:

通过安装 Anvil 固件,设置您的 Pico W 以使用 Anvil
使用 Anvil 构建您的 Web 应用程序
将 Pico W 连接到 Web 应用程序
更新您的网络应用程序以从网络调用您的 Pico W
在网络上发布您的应用程序

让我们开始吧!

设置您的 Pico W

要让您的 Pico W 准备好使用,您需要安装 Anvil 固件。您只需执行一次。

首先,从这里的下载 UF2 固件文件。

要将其安装到您的 Pico W,您需要通过 USB 以 固件安装模式 将其连接到您的计算机,这允许您从计算机上的文件安装新固件。要在固件安装模式下连接 Pico W,您需要在将其插入计算机时按住 BOOTSEL 按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ElaL6pe3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -started/bootsel-button.png)

这是 Pico W 上的 BOOTSEL 按钮所在的位置。

按住 BOOTSEL 按钮将 Pico 连接到计算机后,它将在您的计算机上显示为驱动器:

[ 在固件安装模式下作为驱动器安装在计算机上的 Pico W 的屏幕截图。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--nDJS76YA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/大容量存储模式-pico.png)

这是您的 Pico W 在固件安装模式下的显示方式。

要安装 Anvil 固件,请将您下载的 UF2 文件复制到您的 Pico W。完成复制和处理后,您的 Pico 将自动重新启动并再次作为驱动器重新出现在您的计算机上(可能具有不同的卷名)。如果你检查现在里面有什么文件,你会看到一个boot.py和一个main.py。

如果 USB 驱动器未出现,请查看参考文档的故障排除部分以获取帮助。

[ 作为驱动器安装在计算机上的 Pico W 的屏幕截图,现在安装了 Anvil 固件并显示了两个文件。文件的名称是 boot.py 和 main.py。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--YbVWeYKY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -started/pico-as-flash-drive.png)

这是安装 Anvil 固件后 Pico W 的显示方式。

而已!您现在已经将 Anvil 固件安装(或“刷新”)到您的 Pico W 上,您可以开始构建了。

构建您的 Anvil 应用程序

接下来,您将构建将驱动您的 Pico W 的 Web 界面。完成后,您将能够单击此应用程序中的一个按钮,并看到 Pico W 上的灯闪烁!

如果您以前与 Web 开发有过纠葛,这听起来可能令人生畏——但不要担心。您将在 Python 中完成这一切,在anvil.works使用拖放式 UI 设计器和在线编辑器。

现在,您需要做的就是创建一个新的 Anvil 应用程序并获取一个上行链路密钥以将其链接到您的 Pico。

创建 Anvil 应用程序

前往Anvil Editor创建一个新的应用程序(您需要一个 Anvil 帐户 - 它是免费的!)。在编辑器的登录页面上,单击“创建新应用”,然后单击“空白应用”。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--kaIhrD0L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -started/new-blank-app.png)

从出现的对话框中,选择“材料设计”。

[ Anvil 应用程序主题选项的屏幕截图。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--LpHuJvaR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/材料设计.png)

您现在将看到的是一个新的、空白的 Anvil 应用程序。现在,我们需要做的就是添加上行链路,这是您的应用程序与您的 Pico 通信的方式。为此,请单击左下方的“+”图标。

[ Anvil Editor 的屏幕截图,添加新服务的按钮以橙色突出显示。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--yvRNrbb0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/选择新服务.png)

从列表中选择上行链路:

[ 可用服务列表的屏幕截图,“上行链路”以橙色突出显示。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--zg38r_IL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/选择-uplink.png)

在出现的对话框中,单击“启用服务器上行链路”。

[ Uplink 对话框的屏幕截图,“Enable server Uplink”按钮以橙色突出显示。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--euAUqbGS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -启动/启用-服务器-uplink.png)

这将生成一个您可以复制的身份验证密钥:

[ Uplink 对话框的屏幕截图,Uplink key 部分以橙色突出显示。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--JmnBQOLM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -started/uplink-key.png)

从该对话框中复制上行链路密钥 - 稍后您将需要它。 (您始终可以通过单击编辑器右上角的“上行链接”按钮来恢复此对话框。)

好的——你现在有一个网络应用程序。是时候将您的 Pico 连接到它了!

将 Pico W 连接到 Web 应用程序

通过 USB 将您的 Pico W 连接到您的计算机(_不要_这次按住 BOOTSEL 按钮!)。如您之前所见,它将显示为一个新驱动器,包含两个.py文件:boot.py和main.py。

[ 作为驱动器安装的 Pico W 的屏幕截图,其中包含两个 Python 文件,称为 boot.py 和 main.py。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--YbVWeYKY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -started/pico-as-flash-drive.png)

这就是安装 Anvil 固件后 Pico W 在计算机上的外观。

现在是时候编辑这些文件来配置您的应用了。

将您的 WiFi 网络详细信息添加到`boot.py`

要让您的 Pico 在启动时连接到互联网,您需要向其提供您的网络详细信息。打开boot.py,您会在最顶部找到一个部分,您可以在其中添加以下详细信息:

#############################################
# Provide your Wifi connection details here #
#############################################

WIFI_SSID = "<put your network name here>"
WIFI_PASSWORD = "<put your wifi password here>"

#############################################

进入全屏模式退出全屏模式

保存并关闭该文件。现在,当您的 Pico W 启动时,它会自动连接到您提供的网络。

将上行链路密钥添加到`main.py`

为了让您的 Pico W 了解您刚刚创建的 Anvil 应用程序,您需要为其提供上行链路密钥。打开main.py:在import语句的正下方,您将看到可以添加密钥的部分:

# Replace this string with your Uplink key!
UPLINK_KEY = "<put your Uplink key here>"

进入全屏模式退出全屏模式

编辑代码以使用您应用的真实上行链路密钥。现在,当您的 Pico 启动并连接到互联网时,它将能够侦听来自您的 Anvil 应用程序的输入。

了解`main.py`文件

您的上行链路密钥并不是main.py中唯一的东西。您还可以在这里定义您的 Pico 可以运行的功能。首先,有一个pico_fn功能,它所做的只是稍微来回切换 Pico 上的 LED。

@anvil.pico.callable_async
async def pico_fn(n):
    # Output will go to the Pico W serial port
    print(f"Called local function with argument: {n}")

    # Blink the LED and then double the argument and return it.
    for i in range(10):
        led.toggle()
        await a.sleep_ms(50)
    return n * 2

进入全屏模式退出全屏模式

anvil.pico.callable_async装饰器让您的 Anvil 应用程序知道此函数可用于从 Web 调用。

现在,你们都准备好了!保存您的代码,然后重新启动您的 Pico W。您会看到 LED 缓慢闪烁,直到 WiFi 连接,然后在与 Anvil 的连接建立时快速闪烁。

您可能希望连接到 USB 串行设备以查看 Pico 的输出 - 有关详细信息,请参阅 Pico W 文档](https://datasheets.raspberrypi.com/picow/connecting-to-the-internet-with-pico-w.pdf)的[的第 3.3 节。

当连接到 Pico W 的串口时,运行 Anvil 固件意味着您有时不会自动看到 MicroPython 提示。只需按 Ctrl-C 停止它正在执行的任何操作(例如在将凭据添加到boot.py之前无法连接到 Wifi),就会出现提示。

更新您的应用程序以调用您的 Pico W

在 Anvil 编辑器中打开您的 Anvil 应用程序。从右侧的组件工具箱中,将 Button 组件拖放到您的页面上。目前,您无需担心更改其任何属性。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9lU84S5I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://anvil-website-static.s3.eu -west-2.amazonaws.com/pico/add-button.gif)

现在,在编辑器中双击该按钮,您将被带到单击该按钮时运行的新 Python 函数。您需要做的就是让该函数调用 Pico 上main.py文件中的函数,为此,您可以像这样使用anvil.server.call():

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    anvil.server.call('pico_fn', 18) # Choose any number you like!

进入全屏模式退出全屏模式

[ 有人在 Anvil 编辑器中双击应用程序页面上的按钮,并被带到按下该按钮时将运行的代码的 GIF。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--1eXKfhxo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://anvil-website-static.s3.eu -west-2.amazonaws.com/pico/add-function.gif)

现在,要查看它的实际效果,请单击编辑器右上角的“运行”按钮。这将运行您的应用程序,如果您现在单击该按钮,您将看到 Pico W 上的 LED 闪烁。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--j3Z-VHfE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://anvil-website-static.s3 .eu-west-2.amazonaws.com/pico/run-app-hit-button.gif)

您已经成功地从您的网络应用程序调用了您的 Pico 上的一个函数!

在网络上发布您的应用程序

最后一步是让您的应用程序在公共网络上可用。为此,请单击编辑器右上角的“发布”按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xN8MZQjJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/发布按钮.png)

在下一个对话框中单击“发布此应用”:

[ “发布”对话框的屏幕截图,其中“发布此应用”以橙色突出显示。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--9UbxCBqi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/发布-应用程序-dialog.png)

就是这样 - 您的应用程序已上线!

Anvil 会自动为您的应用生成 URL,但您可以在对话框中使用“更改 URL”按钮选择不同的 URL:

[ “发布”对话框的屏幕截图,URL 部分以橙色突出显示。 ](https://res.cloudinary.com/practicaldev/image/fetch/s--eXyW2ROU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://anvil.works/pico/img/get -开始/选择-url.png)