推出 Gweather - 一款带有 Gif 的微型天气应用程序！

部署一个全栈应用程序，为您提供实时天气更新。

我收到了很多反馈，说我之前构建的应用示例非常适合学习 AWS Amplify，因为它展示了如何将所有组件组合在一起，最终构建一个真正的应用。考虑到这一点，我决定展示我最喜欢的 Amplify 功能之一：使用无服务器函数支持 GraphQL 解析器。这几乎允许你使用任何数据源，这真是一个强大的功能！

它的作用

Gweather 是一款微型天气应用程序，提供以下功能：

• 🌎 使用地理定位获取天气数据
• ⛈ 微天气更新
• 🌠 与天气相关的 Giphy 图片
• 👮‍ 已认证
• 🔥 无服务器后端
• 🚀 GraphQL
• 💻几分钟内部署后端

工作原理

该应用程序的代码位于此处。

该项目使用 AWS AppSync 提供无服务器 GraphQL api，该 api 由获取天气和 gif 数据的无服务器函数支持。

在项目中，您会注意到一个名为 的文件夹amplify。此文件夹包含可在任何人的帐户中重新部署的应用后端。在该amplify文件夹中，您会看到一个backend文件夹。在此文件夹中，您将看到三个主要功能的配置：

• 身份验证服务（由 Amazon Cognito 提供支持）
• GraphQL API（使用 AWS AppSync 构建）
• 函数（使用 AWS Lambda 构建）

在该backend/api文件夹中，您将看到 GraphQL API 配置以及基本GraphQL Schema。

这是基础的 GraphQL Schema。你会看到基础 Schema 如下所示：

type Query {
  weather(lat: Float!, lon: Float!): Weather
    @function(name: "getweather-${env}")
}

type Weather {
  timezone: String
  current: WeatherSummary!
  hourly: WeatherSummary!
  weekly: WeatherSummary!
  icon: String!
  temperature: Int!
  feelsLike: Int!
  gif: String!
}

type WeatherSummary {
  summary: String!
  icon: String!
}

如果您以前从未使用过 Amplify，您可能不知道该指令。它是Amplify CLI 的GraphQL Transform@function库的一部分。

@function - 使用此指令装饰任何字段以使用无服务器函数作为 AppSync 解析器。

部署应用程序

要运行该应用，您需要Giphy API和Dark Sky API的 API 密钥。两者都有免费计划，足以运行此应用。

部署后端并运行应用程序

1. 克隆 repo 并安装依赖项

~ git clone https://github.com/kkemple/qweather.git
~ cd gweather
~ npm install

1. 使用您的 Dark Sky API 和 Giphy API 密钥更新无服务器功能amplify/backend/function/getweather/src/index.js

const buildDarkSkyUrl = (lat, lon) =>
  `https://api.darksky.net/forecast/[key]/${lat},${lon}`;

const buildGiphyUrl = tag =>
  encodeURI(
    `https://api.giphy.com/v1/gifs/random?api_key=[key]S&tag=${tag}&rating=G`
  );

1. 初始化 Amplify 项目

~ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y

1. 模拟后端以确保应用程序正常运行

amplify mock

1. 启动应用程序

~ expo start

1. 推送至 AWS

~ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N
> We already have the GraphQL code generated for this project, so generating it here is not necessary.

自定义 GraphQL 架构

此架构可编辑。如果您需要其他字段或基本类型，可以通过执行以下操作来更新后端：

更新模式（位于 amplify/backend/api/gweatherapp/schema.graphql）。

重新部署后端

amplify push

应用程序中有一个设置页面，一个有趣的挑战是允许用户存储位置并为预测设置一个位置！

如果您或您认识的任何人需要帮助来启动和运行此应用程序，请通过Twitter与我联系，我很乐意提供帮助！