Démarrer avec AWS

Créer une application Flutter

Créer une application Flutter simple avec AWS Amplify

Module 2 : Initialiser Amplify

Dans ce module, vous installerez et configurerez l'interface de ligne de commande (CLI) Amplify.

Introduction

Maintenant que vous avez mis en œuvre l'application Photo Gallery Flutter, vous pouvez passer à l'initialisation de votre projet Amplify.

À ce stade, vous aurez besoin que la version préliminaire d'Amplify-Flutter destinée aux développeurs de l'Interface en ligne de commande d'Amplify soit installée sur votre ordinateur. Une fois installée, nous initialiserons Amplify dans le répertoire racine de votre projet, nous installerons les dépendances Amplify dans votre projet et nous vérifierons qu'Amplify est correctement configuré à chaque exécution de votre application.

Ce que vous apprendrez

  • Initialisation d'un nouveau projet Amplify à partir de la ligne de commande
  • Ajout d'Amplify en tant que dépendance dans votre projet
  • Initialisation des bibliothèques Amplify à l'exécution

Concepts clés

Interface de ligne de commande Amplify – L'interface de ligne de commande Amplify vous permet de créer, de gérer et de supprimer des services AWS directement à partir de votre terminal.

Bibliothèques Amplify  : ces bibliothèques vous permettent d'interagir avec les services AWS à partir d'une application mobile ou web.

 Durée

10 minutes

 Services utilisés

Implémentation

  • Installation d'une version préliminaire d'interface en ligne de commande AWS Amplify destinée aux développeurs

    L'interface en ligne de commande AWS Amplify est soumise à l'installation de Node.js, que vous pouvez trouver ici.

    Pour télécharger la version préliminaire destinée aux développeurs d'Amplify-Flutter de l'interface en ligne de commande, exécutez ce qui suit :

    npm install -g @aws-amplify/cli@flutter-preview

    Confirmez que vous utilisez désormais la version préliminaire de Flutter de l'interface en ligne de commande en exécutant $ amplify --version. Elle doit se présenter comme suit :

    photo_gallery git:(master) ✗ amplify --version
    Scanning for plugins...
    Plugin scan successful
    4.26.1-flutter-preview.0

    Si vous n'avez pas encore configuré votre interface en ligne de commande AWS Amplify, assurez-vous d'exécuter ce qui suit :

    amplify configure

    Vous serez guidé tout au long du processus de configuration. Pour de plus amples informations concernant la configuration de l'interface en ligne de commande, rendez-vous ici.

  • Initialisation d'Amplify

    Pour créer un projet Amplify, vous devez initialiser et configurer le projet dans le répertoire racine de votre projet.

    Naviguez jusqu'à la racine de votre projet :

    cd path/to/your/project

    Vérifiez que vous êtes dans le bon répertoire en exécutant $ ls -al . Le résultat devrait ressembler à ceci :

    ➜  photo_gallery git:(master) ✗ ls -al
    total 80
    drwxr-xr-x  18 kiloloco  staff   576 Oct 19 18:07 .
    drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 ..
    drwxr-xr-x   4 kiloloco  staff   128 Oct 18 22:15 .dart_tool
    -rw-r--r--   1 kiloloco  staff   536 Oct 19 19:43 .flutter-plugins
    -rw-r--r--   1 kiloloco  staff  1422 Oct 19 19:43 .flutter-plugins-dependencies
    -rw-r--r--   1 kiloloco  staff   621 Oct 18 21:10 .gitignore
    drwxr-xr-x   6 kiloloco  staff   192 Oct 18 21:10 .idea
    -rw-r--r--   1 kiloloco  staff   305 Oct 18 21:10 .metadata
    -rw-r--r--   1 kiloloco  staff  3648 Oct 19 18:07 .packages
    -rw-r--r--   1 kiloloco  staff   543 Oct 18 21:10 README.md
    drwxr-xr-x  12 kiloloco  staff   384 Oct 18 21:10 android
    drwxr-xr-x   5 kiloloco  staff   160 Oct 18 22:20 build
    drwxr-xr-x  11 kiloloco  staff   352 Oct 19 19:04 ios
    drwxr-xr-x  11 kiloloco  staff   352 Oct 19 18:08 lib
    -rw-r--r--   1 kiloloco  staff   896 Oct 18 21:10 photo_gallery.iml
    -rw-r--r--   1 kiloloco  staff  6047 Oct 19 18:07 pubspec.lock
    -rw-r--r--   1 kiloloco  staff  2926 Oct 19 18:07 pubspec.yaml
    drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 test

    Initialisez maintenant votre projet Amplify :

    amplify init

    Vous devriez maintenant être invité à répondre à quelques questions sur la façon dont vous souhaitez configurer votre projet. Si vous appuyez sur Entrée à chaque question, la réponse par défaut sera sélectionnée pour chaque question, et vous devriez obtenir un résultat de ce type :

    ➜  photo_gallery git:(master) ✗ amplify init
    Note: It is recommended to run this command from the root of your app directory
    ? Enter a name for the project photogallery
    ? Enter a name for the environment dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building flutter
    Please tell us about your project
    ⚠️  Flutter project support in the Amplify CLI is in DEVELOPER PREVIEW.
    Only the following categories are supported:
     * Auth
     * Analytics
     * Storage
    ? Where do you want to store your configuration file? ./lib/
    Using default provider  awscloudformation
    
    For more information on AWS Profiles, see:
    https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
    
    ? Do you want to use an AWS profile? Yes
    ? Please choose the profile you want to use default

    Une fois que l'interface en ligne de commande a fini de créer votre projet dans le cloud, vous devriez obtenir un résultat de ce type :

    ✔ Successfully created initial AWS cloud resources for deployments.
    ✔ Initialized provider successfully.
    Initialized your environment successfully.
    
    Your project has been successfully initialized and connected to the cloud!

    Si vous exécutez $ ls dans le répertoire racine de votre projet, vous devriez remarquer qu'un nouveau fichier amplify.json et un nouveau dossier amplify ont été ajoutés à votre projet. L'exécution de $ ls lib permettra également de découvrir qu'un nouveau fichier amplifyconfiguration.dart y a été ajouté.

  • Ajout de dépendances à votre projet

    La prochaine étape consiste à installer Amplify comme dépendance dans notre projet afin que nous puissions établir une interface avec les bibliothèques.

    De retour dans Visual Studio Code, ouvrez pubspec.yaml et ajoutez la dépendance suivante :

    ... # path:
    
    amplify_core: '<1.0.0'
    
    ... # dev_dependencies

    Sauvegardez le fichier ou lancez $ flutter pub dans le terminal à la racine de votre application

    À la fin du processus, vous devriez obtenir le résultat suivant :

    exit code 0

    Pour iOS, ouvrez le Podfile (ios > Podfile) et mettez à jour la plateforme à la version 11.0 ou ultérieure :

    ... # Uncomment this line to define a global platform for your project
    
    platform :ios, '11.0'
    
    ... # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
  • Intégration dans votre application

    Pour utiliser la bibliothèque Amplify Flutter, il est essentiel de configurer Amplify en amont de toute utilisation des catégories.

    Ouvrez main.dart et ajoutez une instance d'Amplify dans _MyAppState :

    ... // class _MyAppState extends State<MyApp> {
    
    final _amplify = Amplify();
    
    ... // final _authService = AuthService();

    Maintenant, créez une fonction pour configurer Amplify :

    ... // build closing }
    
    void _configureAmplify() async {
      try {
        await _amplify.configure(amplifyconfig);
        print('Successfully configured Amplify 🎉');
      } catch (e) {
        print('Could not configure Amplify ☠️');
      }
    }
    
    ... // _MyAppState closing }

    Cette fonction passera dans amplifyconfig, fourni par le fichier généré /lib/amplifyconfiguration.dart, et tentera de configurer notre objet Amplify avec les plugins dont nous pourrions avoir besoin. Nous commencerons l'ajout de plugins dans les modules suivants.

    Pour l'heure, appelez _configureAmplify() sous initState() dans _MyAppState :

    ... // super.initState();
    
    _configureAmplify();
    
    ... // _authService.showLogin();

    Puis exécutez l'application et vous devriez voir les éléments suivants enregistrés dans vos journaux :

    flutter: Successfully configured Amplify 🎉

Conclusion

Vous venez d'initialiser Amplify dans le répertoire racine de votre projet ! Dans le prochain module, nous ajouterons un flux complet d'authentification des utilisateurs avec seulement quelques lignes de code.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Ajouter une authentification