Flutter en AWS Amplify

Un rápido inicio - cómo crear proyecto Flutter fullstack en AWS Amplify plataforma.

Cuando

Amplify es una plataforma muy útil para alojar aplicaciones full stack.

Entre otros cómo hacerlo Aquí hay un rápido inicio para crear un nuevo proyecto Flutter que se integrará bien con AWS Amplify.

Instalación

Antes de comenzar, asegúrate de tener instalado lo siguiente:

• Node.js v18.17 o posterior - (Instalar Node.js con NVM)
• npm v9 o posterior
• git v2.14.1 o posterior (Instalar algunas herramientas encantadoras para Linux)
• También necesitarás crear una cuenta de AWS, si aún no tienes una. AWS Amplify forma parte del Free Tier de AWS.
• Una versión estable de Flutter - (Instalar Flutter)
• Configura tu cuenta de AWS para usar con las instrucciones de Amplify. (ver más abajo)

Si tienes un perfil IAM, adjunta la política gestionada AmplifyBackendDeployFullAccess al usuario IAM. de lo contrario - ver más abajo configurar...

Para información actualizada, consulta https://docs.amplify.aws/flutter/start/quickstart/

Configura tu cuenta de AWS para usar con las instrucciones de Amplify

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

1. Crea un usuario con permisos de Amplify

Inicia sesión en la consola de AWS para acceder a la página de IAM Identity Center y elige Habilitar.

Se abrirá un diálogo que te pedirá que “Elijas cómo configurar IAM Identity Center en tu entorno de AWS.”

2. Selecciona Habilitar con AWS Organizations y elige Continuar.

A continuación, automatizaremos un número de pasos que simulan las operaciones de configurar un usuario en la consola de IAM Identity Center.

3. Para comenzar, abre CloudShell, ubicado en el pie de la consola.

4. Pega el siguiente comando en el terminal de CloudShell y introduce una dirección de correo electrónico que desees asociar con esta cuenta de AWS:

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

Enter email address: <your-email-address>

5. Ahora, ejecuta el siguiente 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 esto funcionó, ejecuta el siguiente comando en CloudShell. Si

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

Deberías ver

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

Ahora crea una contraseña para el usuario que necesitarás para el siguiente paso.

7. En el consola de IdC, navega a Usuarios > amplify_admin > Restablecer contraseña > Envía un correo electrónico al usuario con instrucciones para restablecer la contraseña.

8. Revisa tu correo electrónico (asegúrate también de revisar tu carpeta de spam). Haz clic en el enlace de Restablecer contraseña y elige una contraseña de tu elección. Al iniciar sesión, asegúrate de usar amplify-admin como nombre de usuario.

9. Ahora, configura un perfil de AWS que esté vinculado al usuario que acabas de crear en tu máquina local. Hay varias opciones para obtener credenciales de usuario de IAM Identity Center, pero usaremos el asistente de configuración de AWS CLI.

10. Instalar aws cli

11. Abre tu terminal, estás listo para configurar un perfil de AWS que use al usuario SSO. Usa la información de CloudShell para completar la información a continuación.

aws configure sso

| Nombre de sesión SSO (Recomendado): amplify-admin
| URL de inicio de sesión SSO: <URL DE INICIO DE SESIÓN>
| Región SSO: <tu-región>
| Ámbitos de registro SSO [sso:account:access]: <dejar en blanco>
| Intentando abrir automáticamente la página de autorización SSO en tu navegador predeterminado.
| Si el navegador no se abre o deseas usar un dispositivo diferente para autorizar esta solicitud, abre la siguiente URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Luego introduce el código:
|
| ALGÚN-CÓDIGO

12. Después de proporcionar esta información, el navegador se abrirá automáticamente pidiéndote que inicies sesión con el nombre de usuario y contraseña que acabas de crear y configure un dispositivo de autenticación multifactor.

13. Ahora regresa al terminal y introduce la siguiente información:

La única cuenta de AWS disponible para ti es: <tu-identificador-de-cuenta-de-aws>
Usando el identificador de cuenta <tu-identificador-de-cuenta-de-aws>
La única función disponible para ti es: amplify-policy
Usando el nombre de la función "amplify-policy"
Región predeterminada del CLI [us-east-1]: <tu-región>
Formato de salida predeterminado del CLI [Ninguno]:

Asegúrate de establecer el nombre del perfil en default. Alternativamente, recuerda el nombre del perfil generado automáticamente; lo necesitarás más tarde.

Si ya tienes un perfil predeterminado configurado - te ofrecerá otro nombre de perfil

Nombre del perfil CLI [amplify-policy-<tu-identificador-de-cuenta-de-aws>]: default
Para usar este perfil, especifique el nombre del perfil usando --profile, como se muestra:

aws s3 ls --profile default

14. Si inspeccionas ~/.aws/config, ahora deberías ver el perfil SSO:

nano ~/.aws/config

[profile default]
sso_session = amplify-admin
sso_account_id = <tu-identificador-de-cuenta-de-aws>
sso_role_name = AdministratorAccess
region = <tu-región>
[sso-session amplify-admin]
sso_start_url = https://xxxxxx.awsapps.com/start#
sso_region = <tu-región>
sso_registration_scopes = sso:account:access

15. Inicializa tu cuenta de AWS

Ahora estás listo para usar este perfil de AWS con AWS Amplify.

Abre tu proyecto de Amplify y inicia el entorno de prueba.

¡Eso es el siguiente paso!!! sin proyecto esto no funcionará.

Si tienes múltiples perfiles locales o nombraste tu perfil algo diferente a default, puedes especificar un perfil con –profile.

npx ampx sandbox

o

npx ampx sandbox --profile <nombre-del-perfil>

Crear app Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

Crear backend de Amplify

npm create amplify@latest -y

Al ejecutar este comando, se crearán archivos del backend de Amplify en tu proyecto actual con los siguientes archivos añadidos:

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

la salida será algo así como

Instalando 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

Instalando dependencias:
 - aws-amplify

✔ DevDependencies instaladas
✔ Dependencias instaladas
✔ Archivos de plantilla creados
Se ha creado correctamente un nuevo proyecto!

Bienvenido a AWS Amplify!
 - Comienza ejecutando npx ampx sandbox.
 - Ejecuta npx ampx help para ver una lista de comandos disponibles.

Amplify recopila datos anónimos de telemetría sobre el uso general de la CLI. La participación es opcional, y puedes optar por no participar usando npx ampx configure telemetry disable. Para obtener más información sobre la telemetría, visita https://docs.amplify.aws/react/reference/telemetry

¿ves? puedes ejecutar…

npx ampx configure telemetry disable

Ahora configura el entorno de prueba en la nube de Amplify por desarrollador

Para desplegar tu backend, usa el entorno de prueba en la nube de Amplify por desarrollador. Esta característica proporciona un entorno de backend separado para cada desarrollador en un equipo, ideal para el desarrollo y pruebas locales. Para ejecutar tu aplicación con un entorno de prueba, puedes ejecutar el siguiente comando:

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

o

npx ampx sandbox --outputs-format dart --outputs-out-dir lib --profile <nombre-del-perfil>

Añadiendo autenticación

La plantilla inicial ya tiene un backend de autenticación preconfigurado definido en el archivo amplify/auth/resource.ts. Lo hemos configurado para admitir el inicio de sesión con correo electrónico y contraseña, pero puedes extenderlo para admitir una variedad de mecanismos de inicio de sesión, incluyendo Google, Amazon, Iniciar sesión con Apple y Facebook.

La forma más rápida de poner en marcha tu experiencia de inicio de sesión es usar nuestro componente de interfaz de usuario Authenticator disponible en la biblioteca de Amplify UI.

Para usar el Authenticator, necesitas agregar las siguientes dependencias a tu proyecto:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # para conectar tu aplicación con los recursos de Amplify.
  amplify_auth_cognito: ^2.0.0  # para conectar tu aplicación con los recursos de Cognito de Amplify.
  amplify_authenticator: ^2.0.0 # para usar los componentes de interfaz de usuario de Amplify.

Después de agregar las dependencias, necesitas ejecutar el siguiente comando para instalar las dependencias:

flutter pub get

Actualiza tu archivo main.dart para usar los componentes de interfaz de usuario de 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 configurando Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Configuración exitosa');
  } on Exception catch (e) {
    safePrint('Error configurando 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('Aplicación TODO'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Y ahora mira esta belleza, la página de autenticación está aquí:

y AWS Cognito ya realiza la verificación del correo electrónico

No hay mucho dentro, pero aún así:

Enlaces útiles

• Desplegar Flutter con backend a AWS Amplify hosting
• Reinstalar Linux
• Hoja de trucos de Bash
• Instalar Node.js
• Instalar Flutter
• Hoja de trucos de Flutter (Dart)
• Dockerizando una aplicación Flutter Web con build de Flutter dockerizado y Nginx