Flutter no AWS Amplify

Um quickstart - como criar projeto fullstack Flutter no AWS Amplify plataforma.

Quando

O Amplify é uma plataforma muito útil para hospedagem de aplicações fullstack.

Entre outros howtos Aqui está um quickstart para criar um novo projeto Flutter que se integrará bem com o AWS Amplify.

Instalar

Antes de começar, certifique-se de ter instalado o seguinte:

• Node.js v18.17 ou posterior - (Instalar Node.js com NVM)
• npm v9 ou posterior
• git v2.14.1 ou posterior (Instalar algumas ferramentas maravilhosas para linux)
• Você também precisará criar uma conta AWS, se ainda não tiver. O AWS Amplify faz parte do AWS Free Tier.
• Uma versão estável do Flutter - (Instalar Flutter)
• Configure sua conta AWS para usar com as instruções do Amplify. (veja abaixo)

Se você tiver um perfil IAM, anexe a política gerenciada AmplifyBackendDeployFullAccess ao seu usuário IAM. caso contrário - veja abaixo configure...

Para informações atualizadas, veja https://docs.amplify.aws/flutter/start/quickstart/

Configure sua conta AWS para usar com as instruções do Amplify

https://docs.amplify.aws/flutter/start/account-setup/

1. Crie um usuário com permissões do Amplify

Faça login no Console AWS para acessar a página de Identity Center do IAM e escolha Habilitar.

Um diálogo será aberto, solicitando que você “Escolha como configurar o IAM Identity Center no seu ambiente AWS.”

2. Selecione Habilitar com AWS Organizations e escolha Continuar.

Agora, vamos automatizar um número de etapas que simulam as operações de configurar um usuário no console do IAM Identity Center.

3. Para começar, abra o CloudShell, localizado no rodapé do console.

4. Cole o seguinte comando no terminal do CloudShell e insira um endereço de e-mail que deseja associar a esta conta AWS:

read -p "Enter email address: " user_email # hit enter

Enter email address: <your-email-address>

5. Agora, execute o seguinte comando

response=$(aws sso-admin list-instances)
ssoId=$(echo $response | jq '.Instances[0].IdentityStoreId' -r)
ssoArn=$(echo $response | jq '.Instances[0].InstanceArn' -r)
email_json=$(jq -n --arg email "$user_email" '{"Type":"Work","Value":$email}')
response=$(aws identitystore create-user --identity-store-id $ssoId --user-name amplify-admin --display-name 'Amplify Admin' --name Formatted=string,FamilyName=Admin,GivenName=Amplify --emails "$email_json")
userId=$(echo $response | jq '.UserId' -r)
response=$(aws sso-admin create-permission-set --name amplify-policy --instance-arn=$ssoArn --session-duration PT12H)
permissionSetArn=$(echo $response | jq '.PermissionSet.PermissionSetArn' -r)
aws sso-admin attach-managed-policy-to-permission-set --instance-arn $ssoArn --permission-set-arn $permissionSetArn --managed-policy-arn arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess
accountId=$(aws sts get-caller-identity | jq '.Account' -r)
aws sso-admin create-account-assignment --instance-arn $ssoArn --target-id $accountId --target-type AWS_ACCOUNT --permission-set-arn $permissionSetArn --principal-type USER --principal-id $userId

6. Para validar que isso funcionou, execute o seguinte comando no CloudShell. Se

printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

Você deverá ver

Start session url: https://d-XXXXXXXXXX.awsapps.com/start
Region: us-east-1
Username: amplify-admin

Agora, crie uma senha para o usuário que precisaremos para o próximo passo.

7. No console do IdC, navegue até Usuários > amplify_admin > Redefinir senha > Envie um e-mail ao usuário com instruções para redefinir a senha.

8. Verifique seu e-mail (certifique-se também de verificar a pasta de spam). Clique no link de redefinição de senha e escolha uma senha de sua escolha. Ao fazer login, certifique-se de usar amplify-admin como o Nome de Usuário.

9. Agora, configure um perfil AWS que está vinculado ao usuário que você acabou de criar no seu computador local. Existem algumas opções para obter credenciais do usuário do IAM Identity Center, mas usaremos o assistente de configuração do AWS CLI.

10. Instalar aws cli

11. Abra seu terminal, você está pronto para configurar um perfil AWS que usa o usuário SSO. Use as informações do CloudShell para preencher as informações abaixo.

aws configure sso

| SSO session name (Recommended): amplify-admin
| SSO start URL: <START SESSION URL>
| SSO region: <your-region>
| SSO registration scopes [sso:account:access]: <leave blank>
| Attempting to automatically open the SSO authorization page in your default browser.
| If the browser does not open or you wish to use a different device to authorize this request, open the following URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Then enter the code:
|
| SOME-CODE

12. Após fornecer essas informações, o navegador abrirá automaticamente solicitando que você faça login com o nome de usuário e senha que acabou de criar e configure um dispositivo de autenticação multifatorial.

13. Agora, retorne ao terminal e insira as seguintes informações:

The only AWS account available to you is: <your-aws-account-id>
Using the account ID <your-aws-account-id>
The only role available to you is: amplify-policy
Using the role name "amplify-policy"
CLI default client Region [us-east-1]: <your-region>
CLI default output format [None]:

Certifique-se de definir o nome do perfil para padrão. Alternativamente, lembre-se do nome do perfil gerado automaticamente; você precisará disso mais tarde.

Se você já tiver um perfil padrão configurado - ele oferecerá outro nome de perfil

CLI profile name [amplify-policy-<your-aws-account-id>]: default
Para usar este perfil, especifique o nome do perfil usando --profile, conforme mostrado:

aws s3 ls --profile default

14. Se você inspecionar ~/.aws/config, você deverá ver agora o perfil SSO:

nano ~/.aws/config

[profile default]
sso_session = amplify-admin
sso_account_id = <your-aws-account-id>
sso_role_name = AdministratorAccess
region = <your-region>
[sso-session amplify-admin]
sso_start_url = https://xxxxxx.awsapps.com/start#
sso_region = <your-region>
sso_registration_scopes = sso:account:access

15. Bootstrap sua conta AWS

Agora você está pronto para usar este perfil AWS com o AWS Amplify.

Abra seu projeto Amplify e inicie o sandbox.

esse é o próximo passo!!! sem projeto isso não funcionará.

Se você tiver múltiplos perfis locais ou nomeou seu perfil algo diferente de padrão, você pode especificar um perfil com –profile.

npx ampx sandbox

ou

npx ampx sandbox --profile <profile-name>

Criar app Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

Criar backend Amplify

npm create amplify@latest -y

Executar este comando vai estruturar os arquivos do backend Amplify no seu projeto atual com os seguintes arquivos adicionados:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

a saída será parecida com

Installing devDependencies:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Installing dependencies:
 - aws-amplify

✔ DevDependencies installed
✔ Dependencies installed
✔ Template files created
Successfully created a new project!

Welcome to AWS Amplify!
 - Get started by running npx ampx sandbox.
 - Run npx ampx help for a list of available commands.

Amplify collects anonymous telemetry data about general usage of the CLI. Participation is optional, and you may opt-out by using npx ampx configure telemetry disable. To learn more about telemetry, visit https://docs.amplify.aws/react/reference/telemetry

você vê? você pode executar…

npx ampx configure telemetry disable

Agora configure o sandbox de nuvem por desenvolvedor do Amplify

Para implantar seu backend, use o sandbox de nuvem por desenvolvedor do Amplify. Este recurso fornece um ambiente de backend separado para cada desenvolvedor em uma equipe, ideal para desenvolvimento local e testes. Para executar seu aplicativo com um ambiente de sandbox, você pode executar o seguinte comando:

npx ampx sandbox --outputs-format dart --outputs-out-dir lib

ou

npx ampx sandbox --outputs-format dart --outputs-out-dir lib --profile <profile-name>

Adicionar Autenticação

A estrutura inicial já tem um backend de autenticação pré-configurado definido no arquivo amplify/auth/resource.ts. Configuramos para suportar login com e-mail e senha, mas você pode estendê-lo para suportar uma variedade de mecanismos de login, incluindo Google, Amazon, Sign In With Apple e Facebook.

A maneira mais rápida de colocar sua experiência de login em funcionamento é usar o componente de interface do usuário Authenticator disponível na biblioteca Amplify UI.

Para usar o Authenticator, você precisa adicionar as seguintes dependências ao seu projeto:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # para conectar seu aplicativo aos recursos do Amplify.
  amplify_auth_cognito: ^2.0.0  # para conectar seu aplicativo aos recursos do Amplify Cognito.
  amplify_authenticator: ^2.0.0 # para usar os componentes da interface do usuário do Amplify.

Após adicionar as dependências, você precisa executar o seguinte comando para instalar as dependências:

flutter pub get

Atualize seu arquivo main.dart para usar os componentes da interface do usuário do Amplify

main.dart:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplify_outputs.dart';

Future<void> main() async {
  try {
    WidgetsFlutterBinding.ensureInitialized();
    await _configureAmplify();
    runApp(const MyApp());
  } on AmplifyException catch (e) {
    runApp(Text("Erro ao configurar o Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Configuração bem-sucedida');
  } on Exception catch (e) {
    safePrint('Erro ao configurar o Amplify: $e');
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SignOutButton(),
                Text('Aplicativo TODO'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

E agora veja esta beleza, a página de autenticação está aqui:

e o AWS Cognito já faz a verificação de e-mail

Não muito dentro, mas ainda:

Links úteis

• Implantar Flutter com backend no AWS Amplify hosting
• Reinstalar linux
• Dica rápida de Bash
• Instalar Node.js
• Instalar Flutter
• Flutter (Dart) Dica rápida
• Dockerizando uma aplicação Flutter Web com build dockerizado do Flutter e Nginx