咖啡因我！构建一个无服务器的应用程序，找到最近的星巴克。

咖啡因我！构建一个无服务器的应用程序，找到最近的星巴克。

该项目结合星巴克和无服务器，在DynamoDB上使用VueJS和地理空间查询来提供快速咖啡修复。

如果您构建移动应用程序或任何位置感知软件，您将很快遇到一个难题 - 如何找到"最近"或"最远"的东西。

幸运的是，有一个名为geohashing的公共域地理编码解决方案。在关于 云大师的 这篇文章中 ，我之前解释了如何使用它来构建后端地理搜索解决方案。在这个项目中，我们将使用该方法创建一个Web应用程序前端，可以帮助您找到步行距离内的所有星巴克位置。

此练习的代码在两个GitLab repos中提供，由 后端 和 前端 分隔 。

快速回顾一下DynamoDB的Geo Library

Geohashing通过将世界划分为一系列 嵌套网格来工作 - 哈希的每个字符标识一个正方形并大大减少搜索空间。只需一个5个字符的字符串，我们就可以在地球上找到一个5公里x 5公里的广场。

对于邻近搜索，可能需要搜索多个方格，以便算法有效地处理 查找相邻方块 。构建地理空间数据库的主要决定是确定散列的长度（即平方大小），以平衡 搜索的平方 数与每个方格中的结果数。

好的，足够的理论---你真正需要知道的是，有一种算法可以解决这个棘手的问题，它已经整齐地捆绑到一个NPM包中。 DynamoDB 的 Geo Library 将计算哈希值，管理基础DynamoDB表，并支持针对位置列表的查询。

导入星巴克位置列表

证明几乎所有问题的答案都在某个地方的git repo中，我找到了一份 美国星巴克的位置 列表（如果你想知道的话，这个列表中有8,902个）。我们的第一个任务是使用Geo Library将其导入DynamoDB ---在我们这样做之前，我们需要初始化表： 来自 后端GitLab repo 中的local / setup.js。

此样板文件设置了一个5个字符的哈希长度和一个表名，让库完成其余的工作---自代码等待直到创建过程完成后，运行此函数需要几秒钟。

现在我们已准备好加载位置。 loadTable函数有两个部分---第一步是将JSON文件中的列表加载到为Geo Library准备好的JSON结构中： 来自 后端GitLab repo 中的local / setup.js。

准备好之后，我们使用库将数据批量加载到DynamoDB中： 来自GitLab仓库中的local / setup.js。

功能完成后，您可以在AWS控制台中或使用CLI命令查看结果：

aws dynamodb describe-table --table-name askJames-wheresStarbucks`

然后我们可以测试查询函数，看看它如何使用以下代码执行，从控制台运行 node query ： 来自GitLab repo中的local / query.js。

控制台输出将显示在纬度和经度位置1公里范围内有10个星巴克位置：

部署无服务器后端

下载 后端服务 的repo 并运行 npm install 以安装所需的软件包。在同一目录中，运行 node index 将允许您在本地计算机上运行Express服务器以查看其工作原理。

我建议 下载Postman 来测试API ---简单的界面使调试变得轻而易举。从邮递员，如果您使用下面显示的原始主体POST到http：// localhost：3001 /，您将收到来自地理图书馆的回复：

index.js中 的代码只是我们之前测试的查询的包装器，提取所提供的纬度和经度参数并返回响应。目前，您正在针对云中的DynamoDB表进行本地测试 - 现在让我们将函数推送到Lambda。

在发布之前，将先前创建的DynamoDB表的ARN复制到根目录中的serverless.yaml文件中。此处设置的权限过于宽泛，因此您应将ARN粘贴到第26行，以确保该功能只能访问此一个表。

要部署，请从命令行运行 sls deploy 并记下生成的端点。如果将端点粘贴到Postman并重新运行测试，您将获得相同的查询结果，但这次该函数在Lambda上运行：

建立前端

设置它有三个步骤：

• 克隆 GitLab repo 并运行 npm install 以在同一目录中设置项目。
• 您需要一个Google Maps API密钥，您可以 在此处 申请。将此键粘贴到main.js（第9行）。如果您计划公开发布此内容（就像我一样），请在部署后返回并将您的密钥限制为仅使用您正在使用的域名（这样可以防止API配额被盗）。
• 将您之前的API Gateway端点粘贴到App.vue中（第56行）。

我们正在使用 Vue 以最少的工作量创建交互式前端。所有自定义代码都存在于src / App.vue中，但让我介绍一下关键部分。前端的整个布局如下所示：

这使用 Vue Google Maps 包绘制地图并管理标记。此处使用了三种Google Maps组件：

• 地图本身（GmapMap）：我将缩放设置为15（20个），将样式设置为"terrain"（避开那些山丘！），最重要的是告诉它在单击时触发updateCenter功能。
• 标记（GmapMarker）：这些是显示位置的红色图钉。更改 标记 数组后，此代码将遍历列表并在地图上放置新标记。
• 圆圈（GMapCircle）：浅蓝色圆圈显示用户点击周围1公里半径，突出显示当前搜索的范围。

当用户单击地图时，它将调用下面显示的 updateCenter 方法：

此代码使用Axios库调用API Gateway端点，并将位置结果放入Google Map标记中。每当这些标记发生变化时，Vue模板就会绑定到这个数组，因此知道更新显示 - 无需调用刷新。

您可以通过从同一目录中的命令行键入 npm run serve 并访问http：// localhost：8080 /来在本地运行此代码。

当您准备发布到生产环境时，运行 npm run build 来创建分发文件（在dist文件夹中）。如果将这些副本复制到S3存储桶设置为静态网站，则您将部署完全无服务器的解决方案。

喝咖啡的时间

虽然本教程旨在查找1公里范围内的所有星巴克位置，但它可用于查找某一距离内 任何 位置的位置。例如，我的客户在2英里内可以到达哪里？或者哪些照片是在5英里范围内拍摄的？

DynamoDB提供了大规模的持续性能，并且在这种应用程序中表现出色，而Geo Library则抽象了管理geohashing的复杂性。由于https://caffeinate.jbes.dev，现在剩下的就是放松一下星巴克并找到我最近的位置。

感谢您的关注。如果您对评论有任何疑问，请与我们联系！

这个故事发表在 The Startup ，Medium的最大创业出版物上，随后是+438,678人。

订阅 此处 接收 我们的头条新闻 。

查看英文原文

查看更多文章

公众号：银河系1号

联系邮箱：[email protected]

（未经同意，请勿转载）