Conceitos básicos da AWS

Criar uma aplicação Flutter

Criar uma aplicação Flutter simples usando o AWS Amplify

Módulo 2: Inicializar o Amplify

Neste módulo, você instalará e configurará a CLI do Amplify.

Introdução

Depois de implementar o aplicativo Galeria de Fotos do Flutter, você poderá inicializar seu projeto do Amplify.

Nesse momento, você precisará ter a versão de visualização do desenvolvedor do Amplify-Flutter da CLI do Amplify instalada na sua máquina. Após instalado, inicializaremos o Amplify no diretório raiz de nosso projeto, instalaremos as dependências do Amplify em nosso projeto e garantiremos que o Amplify esteja configurado corretamente durante cada execução do aplicativo.

O que você aprenderá

  • Inicializar um novo projeto do Amplify a partir da linha de comando
  • Adicionar o Amplify como uma dependência do seu projeto
  • Inicializar bibliotecas do Amplify em tempo de execução

Principais conceitos

CLI do Amplify – A CLI do Amplify permite criar, gerenciar e remover serviços da AWS diretamente do seu terminal.

Bibliotecas do Amplify – As bibliotecas do Amplify permitem interagir com serviços da AWS a partir de uma aplicação móvel ou Web.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • Instalar visualização do desenvolvedor da CLI do Amplify

    A CLI do AWS Amplify depende do Node.js a ser instalado, que se encontra aqui.

    Para fazer download da versão de visualização de desenvolvedor do Amplify-Flutter da CLI, execute o seguinte:

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

    Verifique se agora você está usando a versão de visualização do Flutter da CLI executando $ amplify --version. Você deverá ver algo como:

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

    Se você ainda não configurou a CLI do Amplify, execute:

    amplify configure

    Você será orientado no processo de configuração. Acesse aqui para obter mais informações sobre como configurar a CLI.

  • Inicializar o Amplify

    Para criar um projeto do Amplify, você precisa inicializar e configurar o projeto no diretório raiz do projeto.

    Navegue até a raiz do projeto:

    cd path/to/your/project

    Verifique se você está no diretório correto executando $ ls -al . A saída deve ter esta aparência:

    ➜  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

    Inicialize seu projeto do Amplify:

    amplify init

    Você deverá responder várias perguntas sobre como configurar seu projeto. Se você pressionar a tecla Enter para cada pergunta, aparecerá a resposta padrão para cada pergunta, resultando em uma saída equivalente a:

    ➜  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

    Quando a CLI terminar de criar seu projeto na nuvem, você receberá uma saída como esta:

    ✔ 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!

    Se você executar $ ls no diretório raiz do projeto, note que um novo arquivo amplify.json e uma pasta amplify foram adicionados ao projeto. A execução de $ ls lib também revelará que um novo arquivo amplifyconfiguration.dart também foi adicionado.

  • Adicionar dependências ao projeto

    A próxima etapa é instalar o Amplify como uma dependência em nosso projeto para fazer interface com as bibliotecas.

    De volta ao Visual Studio Code, abra pubspec.yaml e adicione a seguinte dependência:

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

    Salve o arquivo ou execute $ flutter pub get no terminal no diretório raiz do seu aplicativo

    O processo deve terminar com a seguinte saída:

    exit code 0

    No iOS, abra o Podfile (ios > Podfile) e atualize a plataforma para 11.0 ou 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 no seu aplicativo

    Para usar a biblioteca do Amplify Flutter, é importante que o Amplify seja configurado antes de usar categorias.

    Abra main.dart e adicione uma instância do Amplify em _MyAppState:

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

    Agora crie uma função para configurar o Amplify:

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

    Essa função passará amplifyconfig, fornecido pelo arquivo gerado /lib/amplifyconfiguration.dart, e tentará configurar nosso objeto do Amplify com plugins que talvez precisem ser usados. Começaremos a adicionar plugins nos módulos a seguir.

    Agora chame _configureAmplify() em initState() de _MyAppState:

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

    Execute o aplicativo e deverá aparecer o seguinte impresso em seus logs:

    flutter: Successfully configured Amplify 🎉

Conclusão

Você inicializou o Amplify no diretório raiz do nosso projeto! No próximo módulo, adicionaremos um fluxo de autenticação de usuário inteiro com apenas algumas linhas de código.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Adicionar autenticação