Nozioni di base su AWS
Creazione di un'applicazione Flutter
Creazione di una semplice applicazione Flutter utilizzando AWS Amplify

inizializzazione di 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 🎉