Implementierung

• Installieren der Amplify-CLI-Entwickler-Vorschau

  AWS Amplify CLI hängt von der zu installierenden Node.js ab, die hier zu finden ist.

  Führen Sie die folgenden Schritte aus, um die Amplify-Flutter-Entwickler-Vorschau-Version der CLI herunterzuladen:
  

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

  Überprüfen Sie, ob Sie jetzt die Flutter-Vorschau-Version der CLI verwenden, indem Sie $ amplify --version ausführen. Sie sollten so etwas sehen:
  

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

  Wenn Sie Ihre Amplify CLI noch nicht konfiguriert haben, führen Sie diese aus:
  

  amplify configure

  Sie werden durch den Konfigurationsprozess geführt. Weitere Informationen zum Konfigurieren der CLI finden Sie hier.
  

• Amplify starten

  Um ein Amplify-Projekt zu erstellen, müssen Sie das Projekt im Stammverzeichnis Ihres Projekts initialisieren und konfigurieren.

  Navigieren Sie zur Root Ihres Projekts:
  

  cd path/to/your/project

  Überprüfen Sie, ob Sie sich im richtigen Verzeichnis befinden, indem Sie $ ls -al ausführen. Ihre Ausgabe sollte in etwa so aussehen:
  

  ➜  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

  Initialisieren Sie jetzt Ihr Amplify-Projekt:
  

  amplify init

  Sie sollten nun mit mehreren Fragen zur Konfiguration Ihres Projekts konfrontiert werden. Wenn Sie für jede Frage die Eingabetaste drücken, wird die Standardantwort für jede Frage ausgegeben, was zu einer Ausgabe führt, die ähnlich wie diese aussehen sollte:
  

  ➜  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

  Nachdem die CLI das Einpacken Ihres Projekts in die Cloud abgeschlossen hat, sollten Sie eine Ausgabe wie diese erhalten:
  

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

  Wenn Sie $ ls im Stammverzeichnis Ihres Projekts ausführen, sollten Sie feststellen, dass eine neue Datei amplify.json und ein neuer Ordner amplify zu Ihrem Projekt hinzugefügt wurden. Wenn Sie $ ls lib ausführen, werden Sie außerdem feststellen, dass auch dort eine neue Datei amplifyconfiguration.dart hinzugefügt wurde.
  

• Abhängigkeiten zu Ihrem Projekt hinzufügen

  Der nächste Schritt ist die Installation von Amplify als Abhängigkeit in unserem Projekt, damit wir eine Schnittstelle zu den Bibliotheken herstellen können.

  Zurück in Visual Studio Code, öffnen Sie pubspec.yaml und fügen Sie die folgende Abhängigkeit hinzu:
  

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

  Entweder speichern Sie die Datei oder führen Sie $ flutter pub get im Terminal im Hauptverzeichnis Ihrer Anwendung aus.
  

  Der Prozess sollte mit der folgenden Ausgabe abgeschlossen werden:
  

  exit code 0

  Für iOS öffnen Sie das Podfile (ios > Podfile) und aktualisieren Sie die Plattform auf 11.0 oder höher:
  

  ... # 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.

• In Ihre App integrieren

  Für die Verwendung der Amplify Flutter-Bibliothek ist es wichtig, dass Amplify konfiguriert wird, bevor eine der Kategorien verwendet wird.

  Öffnen Sie main.dart und fügen Sie eine Instance von Amplify in _MyAppState hinzu:
  

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

  Erstellen Sie jetzt eine Funktion zur Konfiguration von Amplify:
  

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

  Diese Funktion wird in amplifyconfig übergeben, das von der generierten Datei /lib/amplifyconfiguration.dart bereitgestellt wird, und versucht, unser Amplify-Objekt mit allen Plugins zu konfigurieren, die wir eventuell verwenden müssen. Wir werden damit beginnen, Plugins in den folgenden Modulen hinzuzufügen.

  Rufen Sie jetzt _configureAmplify() in initState() von _MyAppState auf:
  

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

  Führen Sie nun die Anwendung aus und Sie sollten Folgendes in Ihren Protokollen gedruckt sehen:
  

  flutter: Successfully configured Amplify 🎉