咖啡因我！构建一个无服务器的应用程序，找到最近的星巴克。
该项目结合星巴克和无服务器，在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
（未经同意，请勿转载）
