Erste Schritte mit AWS

Erstellen eine Flutter-Anwendung

Erstellen Sie eine einfache Flutter-Anwendung mit AWS Amplify

Modul 2: Amplify starten

In diesem Modul werden Sie die Amplify CLI installieren und konfigurieren.

Einführung

Nachdem Sie nun die Fotogalerie-Flutter-Anwendung implementiert haben, können Sie mit der Initialisierung Ihres Amplify-Projekts fortfahren.

Zu diesem Zeitpunkt müssen Sie die Amplify-Flutter Developer Preview-Version der Amplify CLI auf Ihrem Rechner installiert haben. Nach der Installation initialisieren wir Amplify im Stammverzeichnis unseres Projekts, installieren die Amplify-Abhängigkeiten in unserem Projekt und stellen sicher, dass Amplify bei jeder Ausführung unserer Amplify-Anwendung korrekt konfiguriert wird.

Lerninhalte

  • Initialisieren eines neuen Amplify-Projekts von der Befehlszeile aus
  • Amplify als Abhängigkeit für Ihr Projekt hinzufügen
  • Initialisieren von Amplify-Bibliotheken zur Laufzeit

Wichtige Konzepte

Amplify CLI – Mit der Amplify CLI können Sie AWS-Services direkt von Ihrem Terminal aus erstellen, verwalten und entfernen.

Amplify-Bibliotheken – Die Amplify-Bibliotheken ermöglichen Ihnen die Interaktion mit AWS-Services über eine Web- oder mobile Anwendung.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

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 🎉

Fazit

Sie haben Amplify im Stammverzeichnis unseres Projekts initialisiert! Im nächsten Modul fügen wir einen kompletten Benutzerauthentifizierungsfluss mit nur wenigen Codezeilen hinzu.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen

Authentifizierung hinzufügen