Introducción a AWS

Crear una aplicación Flutter

Crear una aplicación Flutter sencilla con AWS Amplify

Módulo 2: inicializar Amplify

En este módulo, instalará y configurará la CLI de Amplify.

Introducción

Ahora que ha implementado la aplicación de galería de fotos de Flutter, puede comenzar a inicializar su proyecto de Amplify.

En este punto, necesitará tener instalada la versión de vista previa para desarrolladores de Amplify-Flutter de la CLI de Amplify en su máquina. Una vez instalada, inicializaremos Amplify en el directorio raíz de nuestro proyecto, instalaremos las dependencias de Amplify en nuestro proyecto y nos aseguraremos de que Amplify esté configurado correctamente durante cada ejecución de nuestra aplicación.

Lo que aprenderá

  • Inicializar un proyecto de Amplify nuevo desde la línea de comando
  • Agregar Amplify como una dependencia para su proyecto
  • Inicializar bibliotecas de Amplify en el tiempo de ejecución

Conceptos clave

CLI de Amplify: la CLI de Amplify le permite crear, administrar y retirar servicios de AWS directamente de su terminal.

Bibliotecas de Amplify: las bibliotecas de Amplify le permiten interactuar con los servicios de AWS desde una aplicación web o móvil.

 Tiempo de realización

10 minutos

 Servicios utilizados

Implementación

  • Instalar la vista previa para desarrolladores de la CLI de Amplify

    La CLI de AWS Amplify depende de la instalación de Node.js, que se puede encontrar aquí.

    Para descargar la versión de vista previa para desarrolladores de Amplify-Flutter de la CLI, ejecute lo siguiente:

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

    Verifique que ahora esté usando la versión de vista previa de Flutter de la CLI mediante la ejecución de $ amplify --version. Debería ver algo como esto:

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

    Si aún no ha configurado la CLI de Amplify, asegúrese de ejecutar esto:

    amplify configure

    Lo guiaremos a través del proceso de configuración. Puede consultar aquí para obtener más información sobre cómo configurar la CLI.

  • Inicializar Amplify

    Para crear un proyecto de Amplify, debe inicializar y configurar el proyecto en el directorio raíz de su proyecto.

    Diríjase a la raíz de su proyecto:

    cd path/to/your/project

    Verifique que está en el directorio correcto mediante la ejecución de $ ls -al . El resultado debería verse así:

    ➜  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

    Ahora inicialice su proyecto de Amplify:

    amplify init

    Ahora deberían aparecer varias preguntas sobre cómo configurar su proyecto. Si presiona la tecla Enter (Intro) para cada pregunta, dará la respuesta predeterminada, lo que da un resultado que debería verse parecido a esto:

    ➜  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

    Una vez que la CLI haya terminado de crear su proyecto en la nube, debería obtener un resultado como este:

    ✔ 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 ejecuta $ ls en el directorio raíz de su proyecto, debería notar que se han agregado un nuevo archivo amplify.json y la carpeta amplify a su proyecto. Además, la ejecución de $ ls lib revelará que también se ha agregado un nuevo archivo amplifyconfiguration.dart.

  • Agregar dependencias a su proyecto

    El siguiente paso es instalar Amplify como una dependencia en nuestro proyecto para que podamos interactuar con las bibliotecas.

    Al volver a Visual Studio Code, abra pubspec.yaml y agregue la siguiente dependencia:

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

    Guarde el archivo o ejecute $ flutter pub get en la terminal en el directorio raíz de su aplicación

    El proceso debería terminar con el siguiente resultado:

    exit code 0

    En iOS, abra el Podfile (ios> Podfile) y actualice la plataforma a 11.0 o superior:

    ... # 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.
  • Integrar en su aplicación

    Para usar la biblioteca Flutter de Amplify, es importante que Amplify esté configurado antes de que se use cualquiera de las categorías.

    Abra main.dart y agregue una instancia de Amplify en _MyAppState:

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

    Ahora cree una función para configurar Amplify:

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

    Esta función pasará amplifyconfig, que proporcionó el archivo generado /lib/amplifyconfiguration.dart, e intentará configurar nuestro objeto de Amplify con cualquier complemento que necesitemos usar. Comenzaremos a agregar complementos en los siguientes módulos.

    Ahora llame a _configureAmplify() en initState() de _MyAppState:

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

    Ahora ejecute la aplicación y debería ver lo siguiente impreso en sus registros:

    flutter: Successfully configured Amplify 🎉

Conclusión

¡Ha inicializado Amplify en el directorio raíz de nuestro proyecto! En el siguiente módulo, agregaremos todo un flujo de autenticación de usuarios con solo algunas líneas de código.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

Agregar autenticación