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 🎉