开始使用 AWS

构建 Flutter 应用程序

使用 AWS Amplify 创建简单的 Flutter 应用程序

模块 2:初始化 Amplify

在此模块中,您将安装并配置 Amplify CLI。

简介

现在您已经实现了 Photo Gallery Flutter 应用程序,接下来就可以开始初始化您的 Amplify 项目了。

现在,您需要在计算机上安装 Amplify CLI 的 Amplify-Flutter 开发人员预览版。安装后,我们将在项目的根目录下初始化 Amplify、将 Amplify 依赖项安装到我们的项目中,并确保在每次运行应用程序时都正确配置了 Amplify。

您将学到的内容

  • 通过命令行初始化新的 Amplify 项目
  • 添加 Amplify 作为项目的依赖项
  • 在运行时初始化 Amplify 库

重要概念

Amplify CLI – Amplify CLI 可使您直接从您的终端创建、管理和删除 AWS 服务。

Amplify 库 – 您可以使用 Amplify 库通过 Web 应用程序或移动应用程序使用 AWS 服务。

 完成时间

10 分钟

 使用的服务

实施

  • 安装 Amplify CLI 开发人员预览版

    安装 AWS Amplify CLI 需要使用 Node.js,可以在此处下载

    要下载 CLI 的 Amplify-Flutter 开发人员预览版,请运行以下命令:

    npm install -g @aws-amplify/cli@flutter-preview

    运行 $ amplify --version,验证您当前使用的是否是 CLI 的 Flutter 预览版。您应看到如下内容:

    photo_gallery git:(master) ✗ amplify --version
    Scanning for plugins...
    Plugin scan successful
    4.26.1-flutter-preview.0

    如果尚未配置 Amplify CLI,请确保运行以下命令:

    amplify configure

    系统将指导您完成配置过程。您可以在此处获详细了解如何配置 CLI。

  • 初始化 Amplify

    要创建 Amplify 项目,必须在项目的根目录下初始化和配置该项目。

    导航到项目的根目录:

    cd path/to/your/project

    运行 $ ls -al,验证您是否在正确的目录中。您的输出应该如下所示:

    ➜  photo_gallery git:(master) ✗ ls -al
    total 80
    drwxr-xr-x  18 kiloloco  staff   576 Oct 19 18:07 .
    drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 ..
    drwxr-xr-x   4 kiloloco  staff   128 Oct 18 22:15 .dart_tool
    -rw-r--r--   1 kiloloco  staff   536 Oct 19 19:43 .flutter-plugins
    -rw-r--r--   1 kiloloco  staff  1422 Oct 19 19:43 .flutter-plugins-dependencies
    -rw-r--r--   1 kiloloco  staff   621 Oct 18 21:10 .gitignore
    drwxr-xr-x   6 kiloloco  staff   192 Oct 18 21:10 .idea
    -rw-r--r--   1 kiloloco  staff   305 Oct 18 21:10 .metadata
    -rw-r--r--   1 kiloloco  staff  3648 Oct 19 18:07 .packages
    -rw-r--r--   1 kiloloco  staff   543 Oct 18 21:10 README.md
    drwxr-xr-x  12 kiloloco  staff   384 Oct 18 21:10 android
    drwxr-xr-x   5 kiloloco  staff   160 Oct 18 22:20 build
    drwxr-xr-x  11 kiloloco  staff   352 Oct 19 19:04 ios
    drwxr-xr-x  11 kiloloco  staff   352 Oct 19 18:08 lib
    -rw-r--r--   1 kiloloco  staff   896 Oct 18 21:10 photo_gallery.iml
    -rw-r--r--   1 kiloloco  staff  6047 Oct 19 18:07 pubspec.lock
    -rw-r--r--   1 kiloloco  staff  2926 Oct 19 18:07 pubspec.yaml
    drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 test

    现在初始化您的 Amplify 项目:

    amplify init

    系统现在应提示您几个有关如何配置项目的问题。如果针对每个问题按 Enter 键,则它将提供每个问题的默认答案,并生成类似于以下内容的输出:

    ➜  photo_gallery git:(master) ✗ amplify init
    Note: It is recommended to run this command from the root of your app directory
    ? Enter a name for the project photogallery
    ? Enter a name for the environment dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building flutter
    Please tell us about your project
    ⚠️  Flutter project support in the Amplify CLI is in DEVELOPER PREVIEW.
    Only the following categories are supported:
     * Auth
     * Analytics
     * Storage
    ? Where do you want to store your configuration file? ./lib/
    Using default provider  awscloudformation
    
    For more information on AWS Profiles, see:
    https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
    
    ? Do you want to use an AWS profile? Yes
    ? Please choose the profile you want to use default

    在 CLI 在云中创建完您的项目后,您应该得到类似如下内容的输出:

    ✔ Successfully created initial AWS cloud resources for deployments.
    ✔ Initialized provider successfully.
    Initialized your environment successfully.
    
    Your project has been successfully initialized and connected to the cloud!

    如果在项目的根目录下运行 $ ls,您应该会注意到新文件 amplify.json 和文件夹 amplify 已添加到您的项目中。运行 $ ls lib 后,您还会看到新文件 amplifyconfiguration.dart 也已添加到项目中。

  • 向项目添加依赖项

    下一步是在项目中安装 Amplify 作为一个依赖项,以便连接库。

    回到 Visual Studio Code 中,打开 pubspec.yaml 并添加以下依赖项:

    ... # path:
    
    amplify_core: '<1.0.0'
    
    ... # dev_dependencies

    保存文件或在终端的应用程序根目录中运行 $ flutter pub get

    该过程的输出结果应如下所示:

    exit code 0

    对于 iOS,打开 Podfile (ios > Podfile) ,并将平台更新为 11.0 或更高版本:

    ... # Uncomment this line to define a global platform for your project
    
    platform :ios, '11.0'
    
    ... # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
  • 集成到您的应用程序中

    要使用 Amplify Flutter 库,务必要在使用任何类别前配置 Amplify。

    打开 main.dart 并在 _MyAppState 中添加 Amplify 的实例:

    ... // class _MyAppState extends State<MyApp> {
    
    final _amplify = Amplify();
    
    ... // final _authService = AuthService();

    现在创建一个函数来配置 Amplify:

    ... // build closing }
    
    void _configureAmplify() async {
      try {
        await _amplify.configure(amplifyconfig);
        print('Successfully configured Amplify 🎉');
      } catch (e) {
        print('Could not configure Amplify ☠️');
      }
    }
    
    ... // _MyAppState closing }

    该函数将传入由生成的文件 /lib/amplifyconfiguration.dart 提供的 amplifyconfig,并尝试利用我们可能需要使用的任何插件来配置我们的 Amplify 对象。我们将开始在以下模块中添加插件。

    现在,在 _MyAppState 的 initState() 中调用 _configureAmplify():

    ... // super.initState();
    
    _configureAmplify();
    
    ... // _authService.showLogin();

    现在运行应用程序后,您应该会在日志中看到以下内容:

    flutter: Successfully configured Amplify 🎉

结论

您已经在我们项目的根目录下对 Amplify 进行了初始化! 我们将在下一个模块中使用几行代码添加整个用户身份验证流。

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
关闭
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。
关闭

添加身份验证