咖啡因我!构建一个无服务器的应用程序,找到最近的星巴克。
该项目结合星巴克和无服务器,在DynamoDB上使用VueJS和地理空间查询来提供快速咖啡修复。
詹姆斯贝西克 BlockedUnblockFollowFollowing 03月27日
在https://caffeinate.jbes.dev/上测试一下
如果您构建移动应用程序或任何位置感知软件,您将很快遇到一个难题 - 如何找到"最近"或"最远"的东西。
幸运的是,有一个名为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号
联系邮箱:public@space-explore.com
(未经同意,请勿转载)