Nozioni di base su AWS

Creazione di un'applicazione Flutter

Creazione di una semplice applicazione Flutter utilizzando AWS Amplify

Modulo 2: inizializzazione di Amplify

In questo modulo installerai e configurerai la CLI di Amplify.

Introduzione

Ora che hai implementato l'applicazione della galleria di foto di Flutter, puoi passare all'inizializzazione del progetto Amplify.

A questo punto, nel tuo computer dovrà essere installata la versione dell'anteprima per sviluppatori di Amplify-Flutter dell'interfaccia a riga di comando (CLI) di Amplify. Una volta installata, inizializzeremo Amplify nella directory radice del progetto, installeremo le dipendenze Amplify nel progetto e ci assicureremo che Amplify sia configurato in maniera corretta durante ogni esecuzione dell'applicazione.

Avrai modo di approfondire i seguenti aspetti

  • Inizializzazione di un nuovo progetto Amplify dalla riga di comando
  • Aggiunta di Amplify come dipendenza del progetto
  • Inizializzazione delle librerie Amplify al momento del runtime

Concetti chiave

CLI di Amplify: la CLI di Amplify consente di creare, gestire e rimuovere i servizi AWS direttamente dal terminale.

Librerie Amplify: le librerie di Amplify consentono di interagire con i servizi AWS da un'applicazione Web o mobile.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • Installazione dell'anteprima per sviluppatori dell'interfaccia a riga di comando (CLI) di Amplify

    L'interfaccia a riga di comando (CLI) di AWS Amplify per la sua installazione dipende dal Node.js, che si trova qui.

    Per scaricare la versione dell'anteprima per sviluppatori di Amplify-Flutter dell'interfaccia a riga di comando (CLI), esegui i seguenti comandi:

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

    Verifica di utilizzare la versione dell'anteprima di Flutter dell'interfaccia a riga di comando eseguendo $ amplify --version. Dovresti visualizzare qualcosa di simile:

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

    Se non hai ancora configurato l'interfaccia a riga di comando di Amplify, assicurati di eseguire questo comando:

    amplify configure

    Verrai guidato attraverso il processo di configurazione. Per ulteriori informazioni sulla configurazione dell'interfaccia a riga di comando, vedi qui.

  • Inizializzazione di Amplify

    Per creare un progetto Amplify, devi inizializzare e configurare il progetto nella directory radice del tuo progetto.

    Passa alla radice del tuo progetto:

    cd path/to/your/project

    Verifica di trovarti nella directory corretta eseguendo $ ls -al . L'output dovrebbe avere il seguente aspetto:

    ➜  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

    Ora inizializza il tuo progetto Amplify:

    amplify init

    Ti verranno poste numerose domande su come configurare il progetto. Se premi il tasto Invio per ogni domanda, darai la risposta predefinita a ciascuna domanda e l'output risulterà simile a questo:

    ➜  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

    Dopo che l'interfaccia a riga di comando ha terminato la creazione del progetto nel cloud, l'output dovrebbe essere simile a questo:

    ✔ 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 esegui $ ls nella directory radice del progetto, dovresti notare un nuovo file amplify.json; inoltre, al progetto è stata aggiunta una cartella amplify. L'esecuzione di $ ls lib ti rivelerà inoltre che è stato aggiunto anche un nuovo file amplifyconfiguration.dart.

  • Aggiunta di dipendenze al progetto

    La fase successiva prevede l'installazione di Amplify come dipendenza nel progetto, in modo da poterti interfacciare con le librerie.

    Torna a Visual Studio Code, apri pubspec.yaml e aggiungi la seguente dipendenza:

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

    Salva il file o esegui $ flutter pub get nel terminale nella directory radice dell'applicazione

    Il processo dovrebbe terminare con il seguente output:

    exit code 0

    Per iOS, apri il Podfile (ios > Podfile) e aggiorna la piattaforma alla versione 11.0 o successiva:

    ... # 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.
  • Integrazione nell'applicazione

    Per utilizzare la libreria di Amplify Flutter Library, è importante che Amplify sia configurato prima di utilizzare le categorie.

    Apri main.dart e aggiungi un'istanza di Amplify in _MyAppState:

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

    Ora crea una funzione per configurare Amplify:

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

    Questa funzione verrà trasferita in amplifyconfig, fornita dal file di configurazione /lib/amplifyconfiguration.dart, e tenterà di configurare l'oggetto Amplify con eventuali plug-in che potrebbe essere necessario utilizzare. Inizieremo ad aggiungere plug-in nei seguenti moduli.

    Ora chiama _configureAmplify() in initState() di _MyAppState:

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

    Quindi esegui l'applicazione; nei log dovrebbe comparire il seguente messaggio:

    flutter: Successfully configured Amplify 🎉

Conclusione

Hai inizializzato Amplify nella directory radice del progetto! Nel prossimo modulo, aggiungeremo un intero flusso di autenticazione utente usando poche righe di codice.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Aggiungi autenticazione