Flutter no AWS Amplify

Um início rápido: como criar um projeto fullstack Flutter na plataforma Flutter fullstack project on AWS Amplify.

Quando

Amplify é uma plataforma muito útil para hospedagem de aplicações full stack.

Entre outros tutoriais, aqui está um guia rápido sobre como iniciar um novo projeto Flutter que se integre perfeitamente com o AWS Amplify.

Instalação

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

• Node.js v18.17 ou superior - (Instalar Node.js com NVM)
• npm v9 ou superior
• git v2.14.1 ou superior (Instalar algumas ferramentas úteis para Linux)
• Você também precisará criar uma conta AWS, caso ainda não tenha. 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 em configure....

Para informações atualizadas, consulte 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 na Console AWS para acessar a página IAM Identity Center e escolha “Ativar”.

Uma janela será aberta, solicitando que você “Escolha como configurar o IAM Identity Center em seu ambiente AWS.”

2. Selecione “Ativar com AWS Organizations” e escolha “Continuar”.

A seguir, vamos automatizar várias etapas que simulam as operações de configuração de um usuário na console do IAM Identity Center.

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

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

read -p "Enter email address: " user_email # pressione 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ê deve 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 será necessária para o próximo passo.

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

8. Verifique seu e-mail (certifique-se também de verificar sua pasta de spam). Clique no link “Redefinir senha” e escolha uma senha de sua preferência. Ao fazer login, certifique-se de usar amplify-admin como nome de usuário.

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

10. Instalar aws cli

11. Abra seu terminal; você está pronto para configurar um perfil AWS que use o usuário SSO. Use as informações do CloudShell para preencher os dados 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]: <deixe em branco>
| Tentando abrir automaticamente a página de autorização SSO em seu navegador padrão.
| Se o navegador não abrir ou se você deseja usar um dispositivo diferente para autorizar esta solicitação, abra a seguinte URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Em seguida, insira o código:
|
| 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 a senha que acabou de criar e configure um dispositivo de autenticação multifator.

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 como “default”. 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
To use this profile, specify the profile name using --profile, as shown:

aws s3 ls --profile default

14. Se você inspecionar ~/.aws/config, deverá agora ver 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. Inicialize sua conta AWS

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

Abra seu projeto Amplify e inicie o sandbox.

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

Se você tiver vários perfis locais ou nomeou seu perfil de forma diferente de “default”, pode especificar um perfil com –profile.

npx ampx sandbox

ou

npx ampx sandbox --profile <profile-name>

Criar aplicativo Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

Criar backend Amplify

npm create amplify@latest -y

Executar este comando criará os arquivos de backend do Amplify em 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á semelhante a:

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 em nuvem per-desenvolvedor do Amplify

Para implantar seu backend, use o sandbox em nuvem per-desenvolvedor do Amplify. Este recurso fornece um ambiente de backend separado para cada desenvolvedor em uma equipe, ideal para desenvolvimento e testes locais. Para executar sua aplicação com um ambiente 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>

Adicionando Autenticação

A estrutura inicial já possui 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 vários 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 nosso componente de UI 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 sua aplicação aos recursos do Amplify.
  amplify_auth_cognito: ^2.0.0  # para conectar sua aplicação aos recursos do Amplify Cognito.
  amplify_authenticator: ^2.0.0 # para usar os componentes de UI do Amplify.

Após adicionar as dependências, você precisa executar o seguinte comando para instalá-las:

flutter pub get

Atualize seu arquivo main.dart para usar os componentes de UI 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("Error configuring Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Successfully configured');
  } on Exception catch (e) {
    safePrint('Error configuring 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('TODO Application'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

E agora olhe para essa beleza: a página de autenticação está aqui:

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

Não há muito conteúdo, mas ainda assim:

Links úteis

• Implantar Flutter com backend para hospedagem AWS Amplify
• Reinstalar Linux
• Bash Cheat Sheet
• Instalar Node.js
• Instalar Flutter
• Flutter (Dart) Cheat Sheet
• Dockerising Flutter Web app with dockerised Flutter build and Nginx