学习如何在Flutter中使用AWS Amplify

尼耳多
833 阅读9分钟

在本教程中，您将了解什么是AWS Amplify以及如何在构建Flutter待办事项应用时使用它。

如今，大多数组织都使用亚马逊网络服务（AWS）来过渡到基于云的模式，提供90多种服务和产品，用于快速、高效、无服务器和安全地开发Web和移动应用程序。

其中一项服务是AWS Amplify，它以一个简化和抽象的平台来帮助网络和移动开发者，正在获得关注。它带有一套工具和服务，为用户提供了配置后端、连接应用、部署静态网络应用以及在AWS控制台之外管理上下文的选项。

在本教程中，你将学习如何做以下工作。

  • 将Amplify添加到Flutter应用程序中
  • 生成数据模型
  • 集成和配置Amplify
  • 连接到云端

注意，本教程假设您对Flutter有一定的了解。如果您是Flutter的新手，请通过官方文档来了解它。

然而，在继续之前，请确保你有以下要求。

  • Git v2.14.1 或更高版本
  • npm v5.x 或更高版本
  • Node.js v12.x或更高版本
  • Flutter v2.0.0或更高版本（稳定版）
  • AWS账户（创建AWS账户）

开始使用Amplify

从这里下载包含所有预建UI的启动程序，因为你目前将专注于学习Amplify。

在你的编辑器中打开它，构建并运行该应用程序。

Beginner to-do app AWS

现在，你需要安装Amplify CLI，它是一个工具链，用于配置为你的后端提供所需的服务，如下所示。

npm install -g @aws-amplify/cli

注意，你正在使用-g 全局安装Amplify CLI。

安装完成后，使用下面的命令来配置Amplify。

amplify configure

注意，上述配置会要求你登录到AWS控制台。

接下来，Amplify CLI会要求你创建一个IAM用户，如下所示。

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

亚马逊IAM（身份和访问管理）使您能够在AWS中管理用户和用户权限。你可以在这里了解更多关于亚马逊IAM的信息。

现在，进入控制台，创建一个具有管理员权限的用户，以利用各种AWS资源。

Set Up AWS in Flutter

在用户创建后，抓住accessKeyId 和secretAccessKey ，因为Amplify CLI会要求你提供这些来连接CLI与创建的IAM用户。

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

在接下来的步骤中，你将开始设置你的项目并在其中初始化Amplify。

设置项目

在您的Flutter应用程序中添加Amplify

在pubspec的依赖项中添加Amplify插件，如下所示。

amplify_flutter: ^0.2.0
amplify_datastore: ^0.2.0
amplify_datastore_plugin_interface: ^0.2.4

可以使用你的IDE保存它来安装插件，或者使用下面的命令来安装。

flutter pub get

更新目标iOS平台和Android版本

通过导航到 /ios 目录并更新Podfile，将目标iOS平台更新为13.0或更高版本。

platform :ios, '13.0'

通过导航到android/app 目录并更新build.gradle ，将Android SDK的版本更新为21或更高。

minSdkVersion 21

现在，你就可以使用Amplify了。

创建数据模型

创建数据模型

现在，你需要创建一个数据模型，它将被你的博客应用所利用。这些模型被创建为GraphQL模式。

导航到Amplify管理，选择数据功能。

Amplify Admin Data Feature

接下来，选择待办事项列表模式，并点击创建新模式。

To-Do List Schema AWS

添加字段和类型

  • 要添加一个新字段，点击To-do模式下的添加字段。
  • 将这个字段的名称设为isTaskCompleted。
  • 对于这个字段的类型，选择布尔值
  • 在检查器面板（右侧面板）中，选择Is required，使这个字段成为必填字段。

isTaskCompleted AWS

接下来，在你的应用程序中点击本地测试。

生成数据模型

现在完成部署步骤。

  1. 你在构建什么类型的应用程序？继续提供以下信息，并点击下一步。

    • 平台。跨平台
    • 框架/语言。Flutter

  2. (可选）创建一个新的应用程序。 如果已经创建了Flutter应用程序，请跳过此步骤

  3. 安装Amplify CLI以拉动数据模型。A mplify CLI已经配置好了，所以继续在你的项目根部运行所提供的命令，然后点击下一步：

    amplify pull --sandboxId <UUID>
    1. 其余的Amplify集成和部署的步骤将在本教程的后面介绍，所以现在点击部署到AWS并抓住登录部署AWS的链接。

到现在为止，一些新的目录和文件已经被添加到你的应用程序的根目录中。要检查生成的GraphQL模式，请导航到amplify\backend\api\amplifyDatasource\schema.graphql ，你应该看到以下内容。

type Todo @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  description: String
  isTaskCompleted: Boolean!
}

注意，你可以在这里了解更多GraphQl模式。

现在，你的模型已经成功生成，可以在todorocket\lib\models 。

Folder Structure AWS

整合Amplify

现在，你将整合Amplify DataStore并使用生成的模型。

更新todo_view.dart ，以初始化Amplify库，如下所示。

// Amplify Flutter Packages
import 'package:amplify_flutter/amplify.dart';
import 'package:amplify_datastore/amplify_datastore.dart';

// Generated in the previous step
import 'models/ModelProvider.dart';
import 'amplifyconfiguration.dart';

更新_TodosViewState 类中的_configureAmplify 方法，如下所示。

  final AmplifyDataStore _dataStorePlugin =
      AmplifyDataStore(modelProvider: ModelProvider.instance);

Future<void> _configureAmplify() async {
    try {
      await Amplify.addPlugins([_dataStorePlugin]);

      await Amplify.configure(amplifyconfig);
    } catch (err) {
      debugPrint('Erro occured while configuring Amplify $err');
    }
  }

在这里，你做了以下工作。

  1. 创建了AmplifyDataStore object,_dataStorePlugin 。
  2. 更新了_configureAmplify 方法，使用_dataStorePlugin 来配置Amplify。

接下来，创建一个Todo 的类型列表，并更新构建方法的body属性，如下所示。

List<Todo> _todos = [];

@override
  Widget build(BuildContext context) {
    ...
      // body: const Center(child: CircularProgressIndicator()),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : TodosList(todos: _todos),
    ...
  }
}

在这里，你正在检查Amplify是否被配置。重新启动你的应用程序，现在你会看到一条消息，而不是一个进度指示器。

Checking Amplify Configuration

现在，你需要更新_fetchTodos 方法，在本地使用CRUD API，使用DataStore 。

Future<void> _fetchTodos() async {
    try {
      List<Todo> updatedTodos = await Amplify.DataStore.query(Todo.classType);

      // update the UI state to reflect fetched todos
      setState(() {
        _todos = updatedTodos;
      });
    } catch (e) {
      print('An error occurred while querying Todos: $e');
    }
  }

在上面的代码中，你正在为所有的todo 条目使用一个DataStore.query() ，并将结果分配给_todos 列表。如果你现在重新启动你的项目，你将不会看到任何todo 项目，因为我们还没有使用保存查询。

创建一个待办事项

主屏幕中的添加按钮可以导航到添加待办事项表单视图，该视图在点击保存按钮时不做任何操作。你需要解决这个问题，以便你能在主屏幕上看到一个Todo 。

更新_saveTodo 方法，如下所示。

Future<void> _saveTodo() async {
    String name = _nameController.text;
    String description = _descriptionController.text;

    Todo newTodo =
        Todo(name: name, description: description, isTaskCompleted: false);

    try {
      await Amplify.DataStore.save(newTodo);
      Navigator.pop(context);
    } catch (e) {
      debugPrint('Error occured while saving Todo $e');
    }
  }

在这里，你创建了一个newTodo 对象，并使用DataStore 保存它。如果你现在试图保存一个Todo ，你会被重定向到主屏幕。然而，即使在重新启动应用程序后，你也不能看到任何新的Todo 。所以为了解决这个问题，你需要创建一个查询来列出所有的对象。

查询Todos

更新_TodosViewState 类中的_initializeApp 方法，如下所示。

Future<void> _initializeApp() async {

  await _configureAmplify();

  await _fetchTodos();

  setState(() {
    _isLoading = false;
  });
}

注意，你也可以在_configureAmplify 方法之后使用.then 。

在上面的代码中，你调用了_fetchTodos 方法来从Amplify配置后的DataStore 中获取所有的Todos 。

接下来，更新_fetchTodos 方法，如下所示。

Future<void> _fetchTodos() async {
    try {
      List<Todo> updatedTodos = await Amplify.DataStore.query(Todo.classType);

      setState(() {
        _todos = updatedTodos;
      });
    } catch (e) {
      print('An error occurred while querying Todos: $e');
    }
  }

在这里，你通过传递Todo classType 到DataStore 来查询所有的Todo 条目，并更新UI状态以显示获取的数据。

如果你现在重新启动你的应用程序，你可以看到你添加的Todos 。然而，如果你创建了一个新的Todo ，你将不会在主屏幕上看到它们，除非你重新启动你的应用程序。现在你将解决这个问题，并进行实时的Todo 创建。

聆听Todo 更新

Amplify DataStore提供了一种方法来订阅你的模型的数据更新。

现在，在_TodosViewState 下添加一个StreamSubscription。

 late StreamSubscription _subscription;

在这里，你创建了一个对Todo 模型更新事件的订阅，以后会在运行时被初始化。

接下来，更新dispose 方法，如下所示。

@override
void dispose() {
  _subscription.cancel();
  super.dispose();
}

在上面的代码中，当状态被从树上删除时，你取消了订阅。

接下来，更新_initializeApp 方法，如下所示。

Future<void> _initializeApp() async {

  await _configureAmplify();

  _subscription = Amplify.DataStore.observe(Todo.classType).listen((event) {
    _fetchTodos();
  });

  await _fetchTodos();

  setState(() {
    _isLoading = false;
  });
}

在上面的代码中，你通过传递Todo classType 到Amplify.DataStore.observe(), 来监听Todo 的更新，当一个更新事件到来时，你会获取待办事项列表。

如果你重新启动你的应用程序并开始添加新的Todo ，它们将开始在你的主屏幕上弹出。

现在，在你完成你的Todo 之后会发生什么？你需要将该Todo 标记为已完成，如果你注意到，你可以看到Todo 项目上的一个复选框。所以现在你需要在你的任务完成后更新你的Todo 。

更新Todo

在DataStore ，你不能直接操作一条记录，因为DataStore 中的模型是不可变的。所以要更新一条记录，你将使用copyWith方法。

现在，更新TodoItem 类中的_toggleIsComplete 方法，如下图。

Future<void> _toggleIsComplete() async {
    Todo updatedTodo = todo.copyWith(isTaskCompleted: !todo.isTaskCompleted);
    try {
      await Amplify.DataStore.save(updatedTodo);
    } catch (e) {
      print('An error occurred while saving Todo: $e');
    }
  }

在这里，你正在创建一个你想要更新的Todo 的新实例，但要更新更多的属性，然后再次将新实例传递给 Amplify.DataStore.**save**()来更新。

现在，重新启动你的应用程序，你现在能够在你的Todo 的完整和不完整状态之间进行切换了。此外，如果你愿意，你也可以删除一个Todo 。

删除一个Todo

删除一个Todo ，比更新它要容易得多，因为你不需要复制对象来删除它。因此，要从现有的项目中删除一个Todo ，你可以使用长按手势或根据你的喜好来改变。

现在，更新TodoItem 中的_deleteTodo 方法，如下所示。

void _deleteTodo(BuildContext context) async {
    try {
      await Amplify.DataStore.delete(todo);
    } catch (e) {
      print('An error occurred while deleting Todo: $e');
    }
  }

在上面的代码中，你正在将Todo 对象传递给DataStore.delete() ，以便从DataStore 删除数据。

重新加载一次你的应用程序，你应该能够长按一个项目来删除它。现在你手中有一个功能齐全的CRUD应用程序了。

接下来，你将把你的应用程序连接到AWS。

连接到云端

为了部署你的Amplify沙盒后端，返回沙盒链接并登录你的AWS账户。

Connecting to AWS Cloud

创建应用程序后端

要创建您的应用程序后端，请在创建表格中提供数据。

  1. 给予您的应用程序名称
  2. 选择您的部署区域
  3. 单击 "确认部署

Create AWS App Backend

接下来，AWS将开始部署你的后端，当状态显示为部署 完成后，点击编辑后端，打开你的管理界面。

Edit AWS Backend

添加认证

由于你的To-do模型指定了一个@auth 指令，我们需要首先添加认证。从左边的面板，选择认证。点击使用默认值进行部署。

Admin UI Authentication

用部署的环境更新本地项目

认证部署后，点击右上方的本地设置说明。

Local Setup Instructions

现在，复制命令，在你的本地拉动后端，并运行它。

这将提示您使用Amplify CLI登录Amplify管理界面；点击是。

之后根据你的选择进行。

amplify pull --appId <appId> --envName staging

? Choose your default editor:
    `<your editor of choice>`
? Choose the type of app that you're building
    `flutter`
? Where do you want to store your configuration file?
    `./lib/`
? Do you plan on modifying this backend?
    `Yes`

添加更多的插件

现在我们需要添加一些额外的插件，这些插件将确保DataStore ，以获得它与云端通信所需的API权限。

amplify_api: ^0.2.0
amplify_auth_cognito: ^0.2.0

在你的 pubspec.yaml 中添加上述依赖项，并做flutter pub get 。

接下来，在你在_TodosViewState 类中配置Amplify之前添加这些插件，并更新_configureAmplify 方法。

final AmplifyAPI _apiPlugin = AmplifyAPI();
final AmplifyAuthCognito _authPlugin = AmplifyAuthCognito();

Future<void> _configureAmplify() async {
    try {
      await Amplify.addPlugins([_dataStorePlugin, _apiPlugin, _authPlugin]);

      await Amplify.configure(amplifyconfig);
    } catch (err) {
      debugPrint('Erro occured while configuring Amplify $err');
    }
  }

因为Amplify只能配置一次，所以你现在需要进行完全重启（停止并重启应用），而不是仅仅热重启。然后你就完成了!

Todorocket Demo

总结

你可以在这里找到启动器和最终项目。在本教程中，你了解了AWS Amplify以及如何轻松地使用DataStore来构建一个有特色的CRUD应用程序。然而，这仅仅是个开始，你可以从AWS文档中了解更多关于认证、存储、功能、REST/GraphQl APIs和更多的库。

我们希望你喜欢这个教程。如果你有任何疑问，请随时与我们联系。谢谢!

The postLearning how to use AWS Amplify in Flutterappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝