Flutter sur AWS Amplify

Un rapide démarrage - comment créer un projet Flutter fullstack sur AWS Amplify.

Quand

Amplify est une plateforme très utile pour l’hébergement d’applications fullstack.

Parmi d’autres tutoriels, voici un rapide démarrage pour créer un nouveau projet Flutter qui s’intégrera bien avec AWS Amplify.

Installation

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Node.js v18.17 ou version ultérieure - (Installer Node.js avec NVM)
• npm v9 ou version ultérieure
• git v2.14.1 ou version ultérieure (Installer quelques outils charmants pour Linux)
• Vous devrez également créer un compte AWS, si vous n’en avez pas encore un. AWS Amplify fait partie du Free Tier d’AWS.
• Une version stable de Flutter - (Installer Flutter)
• Configurez votre compte AWS pour l’utiliser avec les instructions d’Amplify. (voir ci-dessous)

Si vous avez un profil IAM, attachez la politique gérée AmplifyBackendDeployFullAccess à votre utilisateur IAM. Sinon - voir ci-dessous configure...

Pour les informations à jour, consultez https://docs.amplify.aws/flutter/start/quickstart/

Configurez votre compte AWS pour l’utiliser avec les instructions d’Amplify

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

1. Créer un utilisateur avec des autorisations Amplify

Connectez-vous au tableau de bord AWS pour accéder à la page IAM Identity Center et choisissez Activer.

Une boîte de dialogue s’ouvrira, vous invitant à “Choisir comment configurer IAM Identity Center dans votre environnement AWS.”

2. Sélectionnez Activer avec AWS Organizations et choisissez Continuer.

Ensuite, nous allons automatiser un certain nombre d’étapes qui simulent les opérations de création d’un utilisateur dans le console IAM Identity Center.

3. Pour commencer, ouvrez CloudShell, situé dans le pied de la console.

4. Colliez la commande suivante dans le terminal CloudShell et entrez une adresse e-mail que vous souhaitez associer à ce compte AWS :

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

Enter email address: <your-email-address>

5. Maintenant, exécutez la commande suivante

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. Pour valider que cela a fonctionné, exécutez la commande suivante dans le CloudShell. Si

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

Vous devriez voir

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

Maintenant, créez un mot de passe pour l’utilisateur que vous utiliserez à l’étape suivante.

7. Dans le console IdC, allez à Utilisateurs > amplify_admin > Réinitialiser le mot de passe > Envoyez un e-mail à l’utilisateur avec des instructions pour réinitialiser le mot de passe.

8. Vérifiez votre e-mail (assurez-vous également de vérifier votre dossier spam). Cliquez sur le lien Réinitialiser le mot de passe et choisissez un mot de passe de votre choix. Lors de la connexion, assurez-vous d’utiliser amplify-admin comme nom d’utilisateur.

9. Maintenant, configurez un profil AWS lié à l’utilisateur que vous venez de créer sur votre machine locale. Il existe plusieurs options pour obtenir les identifiants de l’utilisateur IAM Identity Center, mais nous utiliserons le assistant de configuration de l’AWS CLI.

10. Installer aws cli

11. Ouvrez votre terminal, vous êtes prêt à configurer un profil AWS qui utilise l’utilisateur SSO. Utilisez les informations du CloudShell pour remplir les informations suivantes.

aws configure sso

| Nom de session SSO (Recommandé) : amplify-admin
| URL de démarrage SSO : <URL DE DÉMARRAGE DE LA SESSION>
| Région SSO : <votre-région>
| Portée d'enregistrement SSO [sso:account:access] : <laissez vide>
| Tentative d'ouvrir automatiquement la page d'autorisation SSO dans votre navigateur par défaut.
| Si le navigateur ne s'ouvre pas ou si vous souhaitez utiliser un autre appareil pour autoriser cette demande, ouvrez l'URL suivante :
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Puis entrez le code :
|
| QUELQUE-CODE

12. Après avoir fourni ces informations, le navigateur s’ouvrira automatiquement pour vous demander de vous connecter avec le nom d’utilisateur et le mot de passe que vous avez créés et de configurer un appareil multifactoriel pour l’authentification.

13. Maintenant, retournez au terminal et entrez les informations suivantes :

Le seul compte AWS disponible pour vous est : <votre-id-de-compte-aws>
Utilisation de l'ID de compte <votre-id-de-compte-aws>
Le seul rôle disponible pour vous est : amplify-policy
Utilisation du nom de rôle "amplify-policy"
Région par défaut du client CLI [us-east-1] : <votre-région>
Format de sortie par défaut CLI [Aucun] :

Assurez-vous de définir le nom du profil sur default. Sinon, souvenez-vous du nom de profil généré automatiquement ; vous en aurez besoin plus tard.

Si vous avez déjà un profil par défaut configuré - il vous proposera un autre nom de profil

Nom du profil CLI [amplify-policy-<votre-id-de-compte-aws>] : default
Pour utiliser ce profil, spécifiez le nom du profil à l'aide de --profile, comme indiqué :

aws s3 ls --profile default

14. Si vous inspectez ~/.aws/config, vous devriez maintenant voir le profil SSO :

nano ~/.aws/config

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

15. Bootstrap de votre compte AWS

Maintenant, vous êtes prêt à utiliser ce profil AWS avec AWS Amplify.

Ouvrez votre projet Amplify et démarrez le sandbox.

C’est l’étape suivante!!! sans projet, cela ne fonctionnera pas.

Si vous avez plusieurs profils locaux ou si vous avez nommé votre profil autrement que default, vous pouvez spécifier un profil avec –profile.

npx ampx sandbox

ou

npx ampx sandbox --profile <nom-du-profil>

Créer une application Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

Créer le backend Amplify

npm create amplify@latest -y

L’exécution de cette commande générera les fichiers du backend Amplify dans votre projet actuel avec les fichiers suivants ajoutés :

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

la sortie ressemblera à :

Installation des dépendances de développement :
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Installation des dépendances :
 - aws-amplify

✔ Dépendances de développement installées
✔ Dépendances installées
✔ Fichiers de modèle créés
Nouveau projet créé avec succès !

Bienvenue sur AWS Amplify !
 - Commencez par exécuter npx ampx sandbox.
 - Exécutez npx ampx help pour obtenir la liste des commandes disponibles.

Amplify collecte des données d'utilisation anonymes générales du CLI. La participation est facultative, et vous pouvez vous désinscrire en utilisant npx ampx configure telemetry disable. Pour en savoir plus sur les données d'utilisation, consultez https://docs.amplify.aws/react/reference/telemetry

vous voyez ? vous pouvez exécuter…

npx ampx configure telemetry disable

Maintenant configurez le sandbox cloud par développeur d’Amplify

Pour déployer votre backend, utilisez le sandbox cloud par développeur d’Amplify. Cette fonctionnalité fournit un environnement backend séparé pour chaque développeur d’une équipe, idéal pour le développement et les tests locaux. Pour exécuter votre application avec un environnement sandbox, vous pouvez exécuter la commande suivante :

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

ou

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

Ajout de l’authentification

Le scaffolding initial a déjà un backend d’authentification prédéfini dans le fichier amplify/auth/resource.ts. Nous l’avons configuré pour prendre en charge la connexion par e-mail et mot de passe, mais vous pouvez l’étendre pour prendre en charge une variété de mécanismes de connexion, notamment Google, Amazon, Sign In With Apple et Facebook.

La façon la plus rapide d’obtenir votre expérience de connexion en marche est d’utiliser notre composant d’interface utilisateur Authenticator disponible dans la bibliothèque Amplify UI.

Pour utiliser l’Authenticator, vous devez ajouter les dépendances suivantes à votre projet :

pubspec.yaml :

dependencies:
  amplify_flutter: ^2.0.0       # pour connecter votre application aux ressources Amplify.
  amplify_auth_cognito: ^2.0.0  # pour connecter votre application aux ressources Amplify Cognito.
  amplify_authenticator: ^2.0.0 # pour utiliser les composants d'interface utilisateur Amplify.

Après avoir ajouté les dépendances, vous devez exécuter la commande suivante pour installer les dépendances :

flutter pub get

Mettez à jour votre fichier main.dart pour utiliser les composants d’interface utilisateur 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("Erreur lors de la configuration d'Amplify : ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Configuration réussie');
  } on Exception catch (e) {
    safePrint('Erreur lors de la configuration d'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('Application TODO'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Et maintenant, regardez cette beauté, la page d’authentification est ici :

et AWS Cognito effectue déjà la vérification de l’e-mail

Pas beaucoup à l’intérieur, mais tout de même :

Liens utiles

• Déployer Flutter avec backend sur l’hébergement AWS Amplify
• Réinstallation de Linux
• Feuille de triche Bash
• Installer Node.js
• Installer Flutter
• Feuille de triche Flutter (Dart)
• Dockeriser une application Flutter Web avec une build Flutter dockerisée et Nginx