Flutter su AWS Amplify

Un quickstart - come creare progetto Flutter fullstack su AWS Amplify piattaforma.

Quando

Amplify è una piattaforma molto utile per l’hosting di applicazioni full stack.

Tra gli altri howtos Ecco un quickstart per avviare un nuovo progetto Flutter che si integrerebbe bene con AWS Amplify.

Installazione

Prima di iniziare, assicurati di avere installati i seguenti elementi:

• Node.js v18.17 o successivo - (Installare Node.js con NVM)
• npm v9 o successivo
• git v2.14.1 o successivo (Installare alcuni bei strumenti per Linux)
• Dovrai anche creare un account AWS, se non ne hai uno già. AWS Amplify fa parte del AWS Free Tier.
• Una versione stabile di Flutter - (Installare Flutter)
• Configura il tuo account AWS per utilizzarlo con le istruzioni di Amplify. (vedi di seguito)

Se hai un profilo IAM, assegna alla tua utenza IAM il policy gestito AmplifyBackendDeployFullAccess.

altrimenti - vedi di seguito configure...

Per le informazioni aggiornate vedi https://docs.amplify.aws/flutter/start/quickstart/

Configura il tuo account AWS per utilizzarlo con le istruzioni di Amplify

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

1. Crea un utente con le autorizzazioni di Amplify

Accedi al AWS Console per accedere alla pagina IAM Identity Center e scegli Abilita.

Si aprirà un dialogo che ti chiederà di “Scegliere come configurare IAM Identity Center nel tuo ambiente AWS.”

2. Seleziona Abilita con AWS Organizations e scegli Continua.

Ora automatizzeremo un certo numero di passaggi che simulano le operazioni di creazione di un utente nel console IAM Identity Center.

3. Per iniziare, apri CloudShell, che si trova nel piè di pagina della console.

4. Incolla il seguente comando nel terminale CloudShell e inserisci un indirizzo email che desideri associare a questo account AWS:

read -p "Enter email address: " user_email # premi invio

Enter email address: <your-email-address>

5. Ora esegui il seguente 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. Per verificare che funzioni, esegui il seguente comando nel CloudShell. Se

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

Dovresti vedere

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

Ora crea una password per l’utente necessaria per il passo successivo.

7. Nel console IdC, vai a Utenti > amplify_admin > Resetta password > Invia un’email all’utente con le istruzioni per reimpostare la password.

8. Controlla la tua email (assicurati di controllare anche la cartella spam). Clicca sul link di reimpostazione della password e scegli una password a tua scelta. Quando ti registri, assicurati di utilizzare amplify-admin come nome utente.

9. Ora, configura un profilo AWS collegato all’utente appena creato sul tuo computer locale. Ci sono diverse opzioni per ottenere le credenziali dell’utente IAM Identity Center, ma utilizzeremo il wizard di configurazione del CLI AWS.

10. Installare aws cli

11. Apri il tuo terminale, sei pronto per configurare un profilo AWS che utilizza l’utente SSO. Utilizza le informazioni da CloudShell per compilare le informazioni di seguito.

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. Dopo aver fornito queste informazioni, il browser si aprirà automaticamente per chiederti di accedere con il nome utente e la password appena creati e configurare un dispositivo multifattore per l’autenticazione.

13. Ora torna al terminale e inserisci le seguenti informazioni:

L'unico account AWS disponibile per te è: <your-aws-account-id>
Utilizzando l'ID account <your-aws-account-id>
L'unico ruolo disponibile per te è: amplify-policy
Utilizzando il nome del ruolo "amplify-policy"
CLI default client Region [us-east-1]: <your-region>
CLI default output format [None]:

Assicurati di impostare il nome del profilo su default. Oppure ricorda il nome del profilo generato automaticamente; ti servirà più tardi.

Se hai già un profilo default configurato - ti offrirà un altro nome di profilo

CLI profile name [amplify-policy-<your-aws-account-id>]: default
Per utilizzare questo profilo, specifica il nome del profilo utilizzando --profile, come mostrato:

aws s3 ls --profile default

14. Se esamini ~/.aws/config, dovresti ora vedere il profilo 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 del tuo account AWS

Ora sei pronto per utilizzare questo profilo AWS con AWS Amplify.

Apri il tuo progetto Amplify e avvia il sandbox.

questo è il passo successivo!!! senza progetto non funzionerà.

Se hai più profili locali o hai assegnato un nome diverso dal default al tuo profilo, puoi specificare un profilo utilizzando –profile.

npx ampx sandbox

o

npx ampx sandbox --profile <profile-name>

Crea un’app Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

Crea il backend Amplify

npm create amplify@latest -y

L’esecuzione di questo comando creerà i file del backend Amplify nel tuo progetto corrente con i seguenti file aggiunti:

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

l’output sarà simile 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

vedi? puoi eseguire…

npx ampx configure telemetry disable

Ora configura il sandbox cloud per sviluppatore di Amplify

Per distribuire il backend utilizza il sandbox cloud per sviluppatore di Amplify. Questa funzione fornisce un ambiente backend separato per ogni sviluppatore in un team, ideale per lo sviluppo e i test locali. Per eseguire l’applicazione con un ambiente sandbox, puoi eseguire il seguente comando:

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

o

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

Aggiungere l’autenticazione

L’architettura iniziale ha già un backend preconfigurato per l’autenticazione definito nel file amplify/auth/resource.ts. Abbiamo configurato per supportare l’accesso tramite email e password, ma puoi estenderlo per supportare una varietà di meccanismi di accesso, tra cui Google, Amazon, Sign In With Apple e Facebook.

Il modo più rapido per avviare l’esperienza di accesso è utilizzare il componente UI Authenticator disponibile nella libreria Amplify UI.

Per utilizzare l’Authenticator, devi aggiungere le seguenti dipendenze al tuo progetto:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # per collegare l'applicazione alle risorse Amplify.
  amplify_auth_cognito: ^2.0.0  # per collegare l'applicazione alle risorse Amplify Cognito.
  amplify_authenticator: ^2.0.0 # per utilizzare i componenti UI Amplify.

Dopo aver aggiunto le dipendenze, devi eseguire il seguente comando per installarle:

flutter pub get

Aggiorna il file main.dart per utilizzare i componenti UI di 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("Errore durante la configurazione di Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Configurazione riuscita');
  } on Exception catch (e) {
    safePrint('Errore durante la configurazione di 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('Applicazione TODO'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

E ora guarda questa bellezza, la pagina di autenticazione è qui:

e AWS Cognito esegue già la verifica dell’email

Non molto dentro, ma comunque:

Link utili

• Distribuisci Flutter con backend su AWS Amplify hosting
• Reinstalla Linux
• Scheda di riferimento Bash
• Installare Node.js
• Installare Flutter
• Scheda di riferimento Flutter (Dart)
• Dockerizzazione di un’app Flutter Web con build Dockerizzati di Flutter e Nginx