aws 小程序_带有AWS后端的Flutter应用程序第1部分基本设置

最新推荐文章于 2022-09-23 15:32:45 发布

weixin_26741491

最新推荐文章于 2022-09-23 15:32:45 发布

阅读量328

点赞数

文章标签： python java 小程序 ViewUI

原文链接：https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-1-basic-setup-7e1dd53e9161

版权

aws 小程序

Firebase has become the de-facto backend solution for Flutter applications because of its ease-of-use. However, the new Amplify Flutter provides an alternative for developers who prefer an AWS backend.

由于Firebase的易用性，它已成为Flutter应用程序的实际后端解决方案。但是，新的Amplify Flutter为喜欢AWS后端的开发人员提供了另一种选择。

In late August, AWS Amplify announced the release of the developer preview for the Flutter framework. The features provided are not yet ready for production, so don’t ditch Firebase just yet.

8月下旬，AWS Amplify宣布发布Flutter框架的开发人员预览版。提供的功能尚未投入生产 ，因此请不要放弃Firebase。

什么是AWS Amplify？ (What is AWS Amplify?)

From the Github repo:

从Github仓库中：

AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service.

AWS Amplify提供了跨不同类别的云操作的声明性且易于使用的界面。我们的默认实现可与Amazon Web Services(AWS)一起使用，但是AWS Amplify被设计为可打开并可插入任何自定义后端或服务。

So basically, it makes it A LOT easier to use AWS Amplify as a backend to your Flutter applications.

因此，基本上，使用AWS Amplify作为Flutter应用程序的后端非常容易。

到目前为止，我们可以做什么？ (What can we do with Amplify (so far)?)

Authentication — Create user authentication experiences with Amazon Cognito
身份验证 —使用Amazon Cognito创建用户身份验证体验
Analytics — Collect analytics data with Amazon Pinpoint
分析 —使用Amazon Pinpoint收集分析数据
Storage — Store user content with Amazon S3
存储 —使用Amazon S3存储用户内容

我们该如何设置？ (How can we set this up?)

The prerequisites for this tutorial are as follows:

本教程的前提条件如下：

Flutter version 1.20.0 or higher
扑版本1.20.0或更高
Node.js v10.0 or higher
Node.js v10.0或更高版本
npm v5.0 or later
npm v5.0或更高版本
git v2.14.1 or later
吉特 v2.14.1或更高版本

The following tutorial series assumes that you are using Android Studio as your IDE.

以下教程系列假定您将Android Studio用作IDE。

Install the Amplify-Flutter Developer Preview version of the Amplify CLI by running:

通过运行以下命令安装Amplify CLI的Amplify-Flutter Developer Preview版本：

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

Next, you must create an AWS account and select the ‘free tier’ (unless you are feeling brave).

接下来，您必须创建一个AWS账户并选择“免费套餐”(除非您感到勇敢)。

将用户添加到IAM (Add User to IAM)

Before going any further, we need to add a new user to AWS Identity and Access Management (IAM) which we will use for the rest of this tutorial.

在继续之前，我们需要向AWS Identity and Access Management(IAM)添加一个新用户，该用户将在本教程的其余部分中使用。

Navigate to the IAM Portal and select ‘Add User’. Make sure you have selected the proper region (top right).

导航到IAM门户，然后选择“添加用户”。确保选择了正确的区域(右上方)。

You will be guided through a series of steps to create your user:

将指导您完成一系列创建用户的步骤：

Keep these two access keys handy, you will need them soon!

请将这两个访问密钥放在手边，您将很快需要它们！

创建新的Flutter项目 (Create New Flutter Project)

Open your Android IDE, and create a new default Flutter app.

打开您的Android IDE，然后创建一个新的默认Flutter应用。

初始化放大项目 (Initialize Amplify Project)

From the integrated terminal in Android Studio, initialize your Amplify project:

在Android Studio的集成终端中，初始化Amplify项目：

amplify init

This command will guide you through a series of steps to initialize your project. It should look something like this (depending on your region and preferred text editor):

该命令将指导您完成一系列步骤以初始化您的项目。它应该看起来像这样(取决于您所在的地区和首选的文本编辑器)：

When asked whether you want to set up a new user, select NO since we already did that in the previous step. Use the accessKeyId and SecretAccessKey you obtained at the end of the user setup to complete this step:

当系统询问您是否要设置新用户时，请选择“否”，因为在上一步中我们已经这样做了。使用在用户设置结束时获得的accessKeyId和SecretAccessKey来完成此步骤：

When you are finished with the setup, amplify should output:

完成设置后，放大应输出：

放大文件 (Amplify Files)

Our local application is now connected to the cloud — great work! If you explore your project directory a little bit, you will notice that Amplify has created a few folders and configuration files that are used to manage your project.

现在，我们的本地应用程序已连接到云-辛苦了！如果稍微浏览一下项目目录，您会注意到Amplify已创建了一些文件夹和配置文件，用于管理您的项目。

The first thing you should know is that your .gitignore has been modified to exclude some of the files that amplify has created:

您应该知道的第一件事是，您的.gitignore已被修改为排除放大创建的某些文件：

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplify-build-config.json
amplify-gradle-config.json
amplifytools.xcconfig

lib/amplifyconfiguration.dart: manages identity and authentication to your cloud project. Contains sensitive information.
lib / amplifyconfiguration.dart ：管理云项目的身份和身份验证。包含敏感信息。
amplify/backend: contains lots of metadata about your cloud instance and any services you may have enabled (we haven’t enabled anything yet)
放大/后端 ：包含有关您的云实例以及您可能已启用的任何服务的大量元数据(我们尚未启用任何功能)

In general, you won’t need to modify any of these files yourself — that is the beauty with Amplify — all of the nitty-gritty configurations are done automagically through the amplify cli, pretty cool right?

通常，您不需要自己修改这些文件中的任何一个-这就是Amplify的优点-所有的细节配置都是通过amplify cli自动完成的，很酷吧？

配置我们的应用 (Configuring our App)

Now that all the boring stuff is out of the way — we can start using Amplify in our app. Let’s start with a simple app that doesn’t include any services (authentication, analytics, etc…) but simply configures itself with our cloud instance.

现在，所有无聊的内容都已解决，我们可以开始在应用程序中使用Amplify。让我们从一个简单的应用程序开始，该应用程序不包含任何服务(身份验证，分析等)，而只是通过我们的云实例进行自我配置。

In your pubspec.yaml add:

在您的pubspec.yaml中添加：

amplify_core: '<1.0.0'

This will give us access to the core Amplify packages. Here is a simple main.dart that will launch an app, connect it to your Amplify cloud instance, and output a message indicating success.

这将使我们能够访问核心Amplify软件包。这是一个简单的main.dart，它将启动一个应用程序，将其连接到您的Amplify云实例，并输出一条指示成功的消息。

import 'package:amplify_core/amplify_core.dart';
import 'package:flutter/material.dart';


import 'amplifyconfiguration.dart';


void main() {
  runApp(MaterialApp(
    home: MyApp(),
    routes: {},
  ));
}


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  // gives our app awareness about whether we are succesfully connected to the cloud
  bool _amplifyConfigured = false;


  // Instantiate Amplify
  Amplify amplifyInstance = Amplify();


  @override
  void initState() {
    super.initState();


    // amplify is configured on startup
    _configureAmplify();
  }


  void _configureAmplify() async {
    if (!mounted) return;


    await amplifyInstance.configure(amplifyconfig);
    try {
      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print(e);
    }
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Amplify Core example app'),
            ),
            body: ListView(padding: EdgeInsets.all(10.0), children: <Widget>[
              Center(
                child: Column(children: [
                  const Padding(padding: EdgeInsets.all(5.0)),
                  Text(_amplifyConfigured ? "configured" : "not configured"),
                ]),
              )
            ])));
  }
}

After running our app on an emulated device, if everything worked we should see the following render on our screen:

在模拟设备上运行我们的应用程序后，如果一切正常，我们应该在屏幕上看到以下渲染：

Congrats! You now have the humble beginnings to a Flutter application with Amplify as a back-end.

恭喜！现在，您具有以Amplify作为后端的Flutter应用程序的卑微起点。

If you simply want the code for this tutorial, head over to the gist I set up.

如果您只是想要本教程的代码，请转到我设置的要点。

Moving Forward

向前进

If you have read this far, thanks! Be sure to follow to get all of the newest information on Amplify Flutter. In the next part of this series, we will be adding AWS Cognito to our project to achieve a nice user sign-up/sign-in experience.

如果您已经阅读了本文，谢谢！请务必遵循以获取有关“放大颤振”的所有最新信息。在本系列的下一部分中，我们将添加AWS Cognito 到我们的项目中，以获得良好的用户注册/登录体验。

翻译自: https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-1-basic-setup-7e1dd53e9161

aws 小程序

weixin_26741491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
aws 小程序_带有AWS后端的Flutter应用程序第1部分基本设置

aws 小程序Firebase has become the de-facto backend solution for Flutter applications because of its ease-of-use. However, the new Amplify Flutter provides an alternative for developers who prefer an AWS ...
复制链接

扫一扫