由于我对Dota 2感兴趣，并且有一个免费的Dota 2统计API可供使用，因此我决定基于此API创建一个Web应用程序。 通过使用我从创建第一个Angular应用程序中获得的技能，以及对API调用和lambda的更多了解，我得以实现此目标。
什么是API？
API代表应用程序编程接口。 通常，它用作“中间人”，允许两个服务相互通信。 如上所述，出于我的Web应用程序的目的，我使用了一个称为OpenDota API的免费API。
Web应用程序的结构：
本文中描述的Web应用程序将由3个主要部分组成：
- 主要应用
- 比赛细节
- 玩家细节
目标是能够互换搜索球员和比赛。 这将通过能够找到给定玩家的最近比赛的细节或给定任何比赛来找到该比赛内的球员的信息来完成。
我在构建Web应用程序方面的大部分知识都来自《 Angular教程：英雄之旅》，因此，如果您没有使用angular的经验，那么这将是一个不错的起点。
为了开始这个项目，我想创建match-details组件，用户可以在其中输入任何匹配ID，并输出有关该匹配的一些详细信息。 对我来说幸运的是，OpenDota API进行了一些调用，这在执行此操作时非常有用。 可以在文档中找到：
使用此URL，我应该能够对OpenDota API进行“获取”调用，并根据这些调用检索信息。 要使此工作正常进行的第一步是导入HTTPClient，这必须在主“ app.module.ts”中完成：
此外，“ HttpClient模块”将需要添加到导入列表中。 应当指出，“ HttpClient”仍然需要导入到每个需要它的组件中。
现在已经导入了HTTPClient，我们可以在match-details组件中运行以下代码：
为了理解这里发生的事情，我将分解函数“ this.http.get（）”的每个部分，它们是实际的API调用本身。 这样，您就可以调用给定的URL，在这种情况下，URL为：
https://api.opendota.com/api/matches/this.matchId
可以看出，这与Dota 2 API文档中的URL相同（其中“ this.matchID”只是一串标识给定匹配项的数字）。 使用此呼叫信息可以找到比赛。
现在，最重要的是subscription（）函数，您可以从匹配中提取所需的信息，这种类型的请求特别需要此信息，因为它发生并且需要异步更新。
此外，应注意“ =>”符号，这被称为箭头函数，当应用程序在这种情况下执行“ get”调用时，它提供了调用其他函数的位置。 现在，我们需要此“获取”调用提供的所有数据，因此我们可以使用“ this.result = matchdata”，其中“ this.result”仅是我们的match-tails HTML文件的引用以调用该数据。
最后要关注的部分是“ console.log（）”函数，在这种情况下，它仅回显“ this.result”中的内容，这非常有用，因为它向控制台显示了您想要的所有信息及其通用格式。例如，当运行此功能时，会将其打印到控制台：
此时可能会按下一个按钮，它将调用getMatchData（）函数。 它将能够使用特定（硬编码）匹配项来更新Matches“结果”变量。
但是，由于我希望能够输入任何有效的匹配项并手动进行更新，因此我在输入框的帮助下使用了HTML文件。
“输入”允许用户在一个小容器中键入信息，而“ ngModel”为该输入提供2种方式的绑定，这意味着在此处更新时，它也会在源处进行更新。 通过添加一个在“单击”上运行getMatchData（）的按钮，您可以从任何有效匹配的API中检索数据。
因此，既然我已经能够从任何给定的比赛中接收数据，那么我如何实际有效地使用这些数据？ 作为一个简单的示例，当获取匹配数据时，现在将其发送到“结果”以进行显示，您可能想要执行以下操作。
此代码段的第一行是“ * ngIF”，这是通过这种方式完成的，因为这意味着您只有在有“结果” /如果您实际上试图检索匹配数据的情况下，才显示匹配数据上面的控制台的片段显示您可以显示的第一件事是“ match_id”，因此为了直接显示此“ {{result.match_id}}”而使用。
这与存储在数组/列表中的数据类似，例如通过查看控制台输出，其中一个输出是“ radiant_px_adv”，它是一个数组：
为了访问此数据，可能使用以下HTML代码：
可以看出，使用了“ * ngFor”。 该代码显示“ result.radiant_xp_adv”中每个元素“ xp”的迭代。 它使用“
- ”标签将其显示在列表中，该标签创建由“
- ”包围的元素列表，这意味着在此情况下，每个元素“ xp”均被显示。
现在可以接收原始数据了，必须处理什么数据？ 下面是一个简单的示例：
此代码与原始代码之间的唯一区别是，它在“ =>”操作中运行了一个名为“ victoryFunction（）”的函数。 通过执行此操作，该函数可以接收最初为布尔值的“ result.radiant_win”数据，并以更新另一个变量以显示更有意义的结果的方式对其进行处理。 可以简单地显示此结果，如下所示：
比赛搜索完成后，将使用通过进行比赛搜索获得的类似技术来创建球员搜索。 完成此操作后，需要将其分为单独的路径/路由，这可以借助“路由模块”来完成。
该路由器模块基本上只匹配播放器详细信息和匹配详细信息页面，并将其与适当的组件链接。
正确设置此路由器模块后，重要的是更改组件中的代码以使其与此匹配，这的第一步是导入适当的库。
完成此操作后，就需要更新构造函数和ngOnInit（）。 如下所示：
更新了“ ngOnInit（）”函数，以使用新创建的“ getRouteId”函数，因为路由器需要根据路由的ID做不同的事情。 然后，通过检索该路线ID并获取相应ID的玩家数据来实现处理路线ID的能力。
最后，为了允许通过“比赛细节”代码中的链接找到玩家，“比赛细节” HTML代码将使用相应的球员细节页面的“ routerLink”进行更新。 一个示例如下所示：
Lambda是允许您在不使用任何管理服务器的情况下运行代码的功能。 这些功能非常有用，因为它们可以根据运行时间进行收费，从而可以动态扩展。
为了创建python Lambda，需要在服务器上安装无服务器框架。 可以在这里找到指南。
完成此操作后，可以通过命令行运行以下命令：
sls create --template aws-python --path myService这给出了可以部署的python文件的模板。 但是，为了使其能够与Web应用程序一起使用，需要进行一些小的更改。首先，将“ -http”代码添加到yml文件中，如下所示：
这基本上意味着，部署此功能后，将可以通过以“ / hello-world”结尾的链接在Internet上对其进行访问。 由于该链接具有“方法：获取”，因此也可以在此链接上执行“获取”调用。 最后，“ CORS：true”允许“跨源资源共享”。 这是必不可少的，因为它允许将有限的资源共享到我们的Web应用程序。
请注意，如果python文件保持原样，则此CORS将不起作用。 为了使其功能正常，应将头代码添加到响应的头中，如下所示：
下一步是部署代码，可以通过命令行完成部署：
sls deploy完成此操作后，它将为您提供服务信息，在此服务信息中，如果正确执行了每个步骤，则应返回一个端点。
现在可以在角度应用程序中使用此端点，如以下示例所示：
在HTML中：
如预期的那样，按下按钮后，您会在控制台中收到以下响应：
当我想了解不同类型的调用并在页面中添加“复活节彩蛋”时，我想为lambda创建一个“发布”调用。 第一步是编辑yml文件以采用新功能，如下所示：
在handler.py文件中，添加了再见方法，其目的是获取输入并检查是否将“ l33t”发布到了lambda。
如果发布了“ l33t”，它将输出到特定图像的链接，否则将输出到另一个图像的链接至“主体”的“输出”部分。 该代码显示在下面：
然后使用以下方法再次部署它：
sls deploy完成此操作后，即可创建“ postDataToLambda（）”函数。 它类似于“ getDataFromLambda（）”，主要区别是post接受输入，在本例中为“ postInput”。
为了使其正常工作，需要依次添加一些HTML代码：
在这种情况下，我们知道“ lambdaDataSent.output”将生成图像，因此使用“
”标签来显示“ lambdaDataSent”结果的图像。
当按下不带“ l33t”作为输入的按钮时，您将获得与最低Dota 2等级相关的徽章图像：
但是，当张贴“ l33t”时，将导致Dota 2的最高等级徽章：
总的来说，创建此Dota 2 App的经历非常有趣，我不仅可以学习有关API和Lambda的用法，还可以提高我的Angular技能。 我对所取得的进步感到满意，并为能在Web应用程序中随时间实现更多的变化和想法而感到兴奋。
的GitHub：
- Dota 2应用
- 无服务器Lambda链接
网站：
最后，要在更新后在线查看此网站，请转到此处。
