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

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

转到James Beswick的个人资料 詹姆斯贝西克 BlockedUnblockFollowFollowing 03月27日
在https://caffeinate.jbes.dev/上测试一下

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

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

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

快速回顾一下DynamoDB的Geo Library

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

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

好的,足够的理论---你真正需要知道的是,有一种算法可以解决这个棘手的问题,它已经整齐地捆绑到一个NPM包中。 DynamoDBGeo 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号

联系邮箱:public@space-explore.com

(未经同意,请勿转载)