DEV Community: FlutterArticles

Making a Google Drive Clone | Flutter and AWS

FlutterArticles — Wed, 30 Sep 2020 20:09:59 +0000

Let’s make a file-sharing application — affectionately named Doogle Grive — to show off what we can accomplish with Flutter and Amplify.

*NOTE: Amplify Flutter is still in developer preview and is not recommended for production use at this time. *

Introducing Doogle Grive

Demonstration of the App

Amplify is great, you won’t be 4 nested maps deep in a JSON config trying to bit twiddle your way to a working full-stack application.

Some Background

What is Amplify?

Put simply, Amplify is a toolset that makes it easy (as in, one-click easy) to set up an AWS backend for your mobile application. That might sound a little too good to be true. Honestly, you still need to write some code, but at least you won’t be 4 nested maps deep in a JSON config trying to bit twiddle your way to a working full-stack application.

Why should I care?

Up until now, Flutter developers have been somewhat restricted to the Google ecosystem of backend resources. This has some pitfalls, particularly for people who are AWS aficionados or already have AWS deployed systems that they want to be integrated with a Flutter app.

With AWS officially supporting Amplify for Flutter, there is only room for growth in the *Futter w/ AWS *universe, so learning the fundamentals has some serious upside potential.

Enough talk, let’s get into it.

Setting up Amplify

For super-detailed installation instructions, check out this article I wrote on the topic. I’ll give you speedier instructions in this article, don’t blink or you might miss it.

Create an AWS account

Head over to the AWS portal and create an account under the ‘free’ plan.

Install the Amplify CLI

You will need flutter, node.js, npm, and git, then it is as simple as:

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

Initialize your Flutter project

In the root directory of your flutter project, run:

amplify init

This will guide you through the setup process for your application. Once that is complete, run:

amplify add auth

amplify add analytics

amplify add storage

Configuration Code

Our application contains some code that adds the AWS plugins we want to use. In this case, we need Authentication, Analytics, and of course, Storage. All powered by our omnipresent pal in the sky — AWS.

  void configureAmplify() async {
    if (!mounted) return;

    try {
      AmplifyAnalyticsPinpoint analyticsPlugin = AmplifyAnalyticsPinpoint();
      AmplifyAuthCognito authPlugin = AmplifyAuthCognito();
      AmplifyStorageS3 storage = AmplifyStorageS3();

      // Authentication -> AWS Cognito
      // Analytics -> AWS Pinpoint
      // Storage -> AWS S3
      amplifyInstance.addPlugin(
          authPlugins: [authPlugin],
          analyticsPlugins: [analyticsPlugin],
          storagePlugins: [storage]);

      await amplifyInstance.configure(amplifyconfig);
    } catch (e) {
      print(e.toString());
    }
  }

If any of that confused you or gave you trouble, check out this video or this article (also made by me), or the official docs

Introducing the UI

Time to crack the knuckles and start coding. If you want to follow along, ‘checkout’ **this commit **in the repo.

This app is designed to make the AWS logic as clear as possible — so it is minimal in its design.

Login and Signup — using open-source for all its worth

The Login UI is built using the flutter_login package, which makes it super trivial to make an interactive user interface.

Not bad eh? All we have to do is specify the callbacks to achieve the functionality we want. We will do this in the next part though.


FlutterLogin(
              logo: 'images/trash_can.png',
              onLogin: // SIGN IN FUNCTION,
              onSignup: // REGISTER FUNCTION ,
              onRecoverPassword: (_) => null,
              onSubmitAnimationCompleted: // PORTAL FUNCTION,
              title: 'Doogle Grive')

Confirmation

psst…you can probably skip this section, its just a simple input form to submit the confirmation code.

Still here? Fine, I will show you the confirmation UI and its code.

Super-Confirmation Form


Center(
            child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: TextField(
                onChanged: (text) {
                  code = text;
                },
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20),
                      borderSide: BorderSide(color: Colors.teal),
                    ),
                    hintText: 'Enter your confirm code here...'),
              ),
            ),
            RaisedButton(onPressed: confirmUser, child: Text("Submit Code")),
            RaisedButton(
              onPressed: () {
                Navigator.pushReplacement(
                    context, MaterialPageRoute(builder: (_) => Login()));
              },
              child: Text("Go Back"),
            ),
          ],
        )),

AWS Cognito will send a 6 digit confirmation code to the signup email, and upon entering this code the user is granted access to their account.

Bucket Viewer™

The BucketViewer™ UI is all about displaying the cloud files that belong to the current user.

We will render each file on the UI as a Card, the end result looks something like this:

We have an icon representing the file type, the name of the file, and IconButtons for downloading and deleting the file.

  Widget fileViewer(StorageItem file) {
    return Card(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
              flex: 3,
              child: Row(
                children: [
                  getFileIcon(file.key.split('/').last),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(file.key.split('/')[1]),
                  )
                ],
              )),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.cloud_download),
                  onPressed: () {downloadFile(file);},
                ),
                IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {deleteFile(file);},
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

TLDR: The widget is constructed using the cloud data (of typeStorageItem ), and the buttons trigger some more of our cloud functions called downloadFile anddeleteFile . Don’t worry, we will cover these soon.

Each of our files is displayed in a ListView widget, which gives us the scroll-ability we desire. The ListView widget is rendered by a FutureBuilder, which waits on the result of one of our trusty AWS API calls. Take a look at the final result and the UI code:

Scrollable File List


FutureBuilder(
              future: listFiles(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.builder(
                    physics: AlwaysScrollableScrollPhysics(),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return fileViewer(snapshot.data[index]);
                    },
                    itemCount: snapshot.data.length,
                  );
                } else {
                  return ListView();
                }
              },
            )

So our yet-to-be-revealed listFiles function creates a Future containing a List , which in turn gets converted into a UI object when the Future is ready. When the UI is still waiting on the result of our function, an empty list is displayed.

One last thing, a handy logout button in the top right corner to log our user out.

Logout Button

Okay okay okay, I know what you are thinking…you came here to learn about AWS and I keep showing you basic Flutter UI code. Let's get to the good stuff.

Powering our UI with AWS

Authentication Functions featuring AWS Cognito

Our authentication service is provisioned using AWS Cognito, which is accessible via calls to Amplify.Auth.methodName . Let’s walk through the functions that power our authentication.

Sign Up

This is the first function used by a prospective user. We sign up using the name (in our case an email) and password submitted in our login form. It is simple, and it is supposed to be.


  Future<String> _registerUser(LoginData data) async {
    try {
      Map<String, dynamic> userAttributes = {
        "email": data.name,
      };
      SignUpResult res = await Amplify.Auth.signUp(
          username: data.name,
          password: data.password,
          options: CognitoSignUpOptions(userAttributes: userAttributes));

      _userName = data.name;

      _isSignedUp = res.isSignUpComplete;

      return null;
    } on AuthError catch (e) {
      print(e);
      return "Register Error: " + e.toString();
    }
  }

After signing up our first use, run amplify auth console to explore our Cognito managed user pool.

An unconfirmed user added to the user pool

We still need to confirm our user somehow, which segues us into…

Confirm

Pretty self-explanatory on this one. A confirmation code is sent to our user’s signup email and they enter it to activate their account.

  confirmUser() async {
    SignUpResult res = await Amplify.Auth.confirmSignUp(
        username: this.widget.username,
        confirmationCode: code.trim()
    );
  }

Confirming our code

In your Cognito console, your user should now have the status of CONFIRMED.

Sign In

This is more or less the same as the signup. Note how we are keeping track of the results of our API calls using _isSignedIn and _isSignedUp to eventually decide what screen to send our user to after they are finished with our login page. I don’t show this function in this article, but check out the repo if you are curious.


  Future<String> _signIn(LoginData data) async {
    try {
      SignInResult res = await Amplify.Auth.signIn(
        username: data.name,
        password: data.password,
      );

      _isSignedin = res.isSignedIn;
    } on AuthError catch (e) {
      print(e);
      Alert(context: context, type: AlertType.error, title: "Login Failed")
          .show();
      return 'Log In Error: ' + e.toString();
    }
  }

Logout

We log our user out and then issue a call to pushReplacement to pop the current page of the stack and replace it with the **Login **page.


  logout() async {
    try {
      Amplify.Auth.signOut();

      Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => Login()));
    } on AuthError catch (e) {
      Alert(
          context: context,
          type: AlertType.error,
          desc: "Error Logging Out: " + e.toString());
    }
  }

Upload File

There are a few important things that happen here.

First, we get the user that is currently logged in using the auth package in the call to getCurrentUser()**. **We use this username along with the filename to create a unique key for our file, then we upload it.

setState()and the uploading flag allow us to change the appearance of the upload-file button while our file is uploading. A small detail but a nice touch for our application.

Finally, we submit an analytics event to Amazon Pinpoint that tracks the number of bytes a user has uploaded.


  void uploadFile() async {
    File file = await FilePicker.getFile();
    AuthUser user = await Amplify.Auth.getCurrentUser();

    try {
      if (file.existsSync()) {
        setState(() {
          uploading = true;
        });

        final key = user.username + '/' + file.path.split('/').last;

        await Amplify.Storage.uploadFile(key: key, local: file);

        // log an upload event, tracking the amount of bytes uploaded
        AnalyticsEvent event = AnalyticsEvent("file_upload_event");

        event.properties.addStringProperty("user", user.username);
        event.properties.addIntProperty("file_size", file.lengthSync());

        Amplify.Analytics.recordEvent(event: event);
        Amplify.Analytics.flushEvents();

        setState(() {
          uploading = false;
        });
      }
    } catch (e) {
      Alert(
          context: context,
          type: AlertType.error,
          desc: "Error Uploading File: " + e.toString());
    }
  }

Download File

First, we use DownloadsPathProvider to get the target directory for our download.

getUrl fetches the download URL for our file, which will expire after 1 hour because of the expires option in GetUrlOptions.

The calls to checkPermission and FlutterDownloader check the app’s download permissions and then downloads the file. For more details, check out the FlutterDownloader documentation or the GitHub repo for the full codebase.

  void downloadFile(StorageItem item) async {
    try {
      var dir = await DownloadsPathProvider.downloadsDirectory;
      var url = await Amplify.Storage.getUrl(
          key: item.key, options: GetUrlOptions(expires: 3600));

      await checkPermission();

      await FlutterDownloader.enqueue(
        url: url.url,
        fileName: item.key.split('/').last,
        savedDir: dir.path,
        showNotification: true,
        openFileFromNotification: true,
      );
    } catch (e) {
      print(e.toString());
    }
  }

Delete File

Deleting a file works in much the same way as adding a file, we use the item key to remove the file from the cloud. The calls to setState trigger a rebuild that populates the interface with an up-to-date file list.


  void deleteFile(StorageItem item) async {
    try {

      await Amplify.Storage.remove(
        key: item.key,
      );

    } catch (e) {
      Alert(
          context: context,
          type: AlertType.error,
          desc: "Error Deleting File: " + e.toString()).show();
    }
  }

List Files

This is the moneymaker…

Our storage bucket contains every single user’s files all stored in a bucket, meaning that they aren’t organized in any kind of database-like way.

Since we can’t query a bucket, we have to filter our files based on user.username . With a single command (line 7), we can filter the complete list of files into a list that contains **only **files that belong to the current user.

Remember the FutureBuilder UI from earlier? This list is the future — when it is ready, the UI draws all of our files.

  Future<List<StorageItem>> listFiles() async {
    try {
      ListResult res = await Amplify.Storage.list();
      AuthUser user = await Amplify.Auth.getCurrentUser();

      List<StorageItem> items = res.items
          .where((e) => e.key.split('/').first.contains(user.username))
          .toList();

      return items;
    } catch (e) {
      Alert(
          context: context,
          type: AlertType.error,
          desc: "Error Listing Files: " + e.toString()).show();

      // return an empty list if something fails
      return List<StorageItem>(0);
    }
  }

RESULTS

Uploading a file works as expected.

Launch the analytics platform using amplify analytics console . For a more detailed look on using AWS analytics check out this article that I wrote.

The number of uploaded bytes are being tracked in Amazon Pinpoint

Future Work

Going from a bucket to a datastore is the next logical evolution of this app. Adding a feature to give another user (referenced by email) access to a particular file would also be a useful addition

If you want to take a stab at adding a new feature, feel free to open a pull request on the git repo — If you have read this far I trust that you have the perseverance to make a worthwhile contribution.

Amplify for Flutter is still a novel technology — and it shows in the lack of online content. In the coming months, I will produce more applications that use Amplify and demonstrate how to implement many of the core features modern apps require.

Until then, enjoy your open-source file storage app.

Acknowledgments and Sources

Flutter Apps with AWS Amplify Backend: Part 4 — Storage

FlutterArticles — Thu, 10 Sep 2020 00:38:36 +0000

Flutter Apps with AWS Amplify Backend: Part 4 — Storage

Manage user content using Amazon S3

What is Amplify Storage?

The Amplify Storage category provides an interface for managing user content for your app in […] storage buckets. The Storage category comes with default built-in support for Amazon Simple Storage Service (S3).

NOTE: Amplify Flutter is still in developer preview and is not recommended for production use at this time.

What Will We Be Making?

In this tutorial, we will be creating a simple application that uses the basic features of Amplify Storage. We will be able to upload an image, download it, and delete it using the Amplify API.

Example Usage of App

Prerequisites

The only thing you need for this tutorial is the app you created in Part 1 of this tutorial series.

If you don’t want to read part 1 and you are already familiar with Amplify Flutter, then simply create a new Flutter application and connect it to a cloud instance of Amplify.

Let’s Dive In

Create a Basic Amplify Project

If you are using the app you created in Part 1, you can skip this step.

Otherwise, create a new flutter project, and from the project directory run:

amplify init

Setup the Backend

The backend can be set up entirely through the amplify cli:

amplify add storage

Follow the setup wizard to add storage to your application

Checking on our resources

To check on our project’s cloud resources, run:

amplify console

This will launch your project’s console in your browser.

Authentication and File storage are configured for our project

Integrate Storage Features

Add the amplify packages to your pubspec.yaml.

dependencies:
  file_picker: '^1.8.0+1'
  amplify_core: '<1.0.0'
  amplify_auth_cognito: '<1.0.0'

  amplify_storage_s3: '<1.0.0'

Next, include the necessary packages in your main.dart file:

import 'package:file_picker/file_picker.dart';
import 'package:amplify_core/amplify_core.dart';
import 'package:amplify_storage_s3/amplify_storage_s3.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';

Initializing Amplify Storage

If you don’t want to be bored with the specifics of setting up this application from scratch, take a look at the gist here or the repo for the completed code.

First, let’s set up a barebones main.dart for you to work with:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:amplify_core/amplify_core.dart';
import 'package:amplify_storage_s3/amplify_storage_s3.dart';
import 'amplifyconfiguration.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isAmplifyConfigured = false;
  String _uploadFileResult = '';
  String _getUrlResult = '';
  String _removeResult = '';
  Amplify amplify = new Amplify();

  @override
  void initState() {
    super.initState();

    configureAmplify();
  }

  void configureAmplify() async {
    // First add plugins (Amplify native requirements)
    AmplifyStorageS3 storage = new AmplifyStorageS3();
    AmplifyAuthCognito auth = new AmplifyAuthCognito();
    amplify.addPlugin(authPlugins: [auth], storagePlugins: [storage]);

    // Configure
    await amplify.configure(amplifyconfig);

    setState(() {
      _isAmplifyConfigured = true;
    });
  }

  void _upload() async {
  }

  void getUrl() async {
  }

  void _download() async {
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Amplify Flutter Storage Application'),
        ),
        body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            RaisedButton(
            onPressed: _upload,
            child: const Text('Upload File'),
          ),],

          ),
        ),
      ),
    );
  }
}

As always, we want to configure our Amplify plugin. The only thing different between the previous tutorials is which plugins we will be adding. In this case, we want both AmplifyStorageS3 and AmplifyAuthCognito.

Uploading Files

To upload a file from your computer to your emulated device, simply drag and drop a file over the emulator.

You will also need to implement your _upload() function as follows:

  void _upload() async {
    try {
      print('In upload');
      File local = await FilePicker.getFile(type: FileType.image);
      final key = 'ExampleKey';
      Map<String, String> metadata = <String, String>{};
      metadata['name'] = 'vennify_logo';
      metadata['desc'] = 'A photo of the vennify logo';
      S3UploadFileOptions options = S3UploadFileOptions(
          accessLevel: StorageAccessLevel.guest, metadata: metadata);
      UploadFileResult result = await Amplify.Storage.uploadFile(
          key: key, local: local, options: options);
      setState(() {
        _uploadFileResult = result.key;
      });
    } catch (e) {
      print('UploadFile Err: ' + e.toString());
    }
  }

This will upload a file to the cloud with the key ‘ExampleKey’ which we can use later to download or interact with the file.

‘ExampleKey’ file (our logo image) has been successfully added to our bucket

Downloading Our File

Okay, so we have a file now in our S3 bucket. Let’s say we want to render this image in our app. There are a couple of ways to do this, but for now, I will show you the easier of the two.


  void _getUrl() async {
    try {
      print('In getUrl');
      String key = "ExampleKey";
      S3GetUrlOptions options = S3GetUrlOptions(
          accessLevel: StorageAccessLevel.guest, expires: 10000);
      GetUrlResult result =
      await Amplify.Storage.getUrl(key: key, options: options);

      setState(() {
        _getUrlResult = result.url;
      });
    } catch (e) {
      print('GetUrl Err: ' + e.toString());
    }
  }

The _getUrl() *function basically searched through our S3 bucket for a file with the key ‘ExampleKey’ and fetches the URL for this file. Using this URL, we can then load the image. In our example, once the URL is fetched, *setState() *is called, which rebuilds a *NetworkImage in our widget tree, thus displaying our photo.

Don’t forget to add a button that executes *getUrl() *when pressed. You can always take a look at the repo if you are just interested in the completed code.

Pretty cool right? In your implementation, you may want to obtain the key (in this case it is hardcoded as ExampleKey) differently.

Deleting Files

Deleting files is very similar to uploading them. Like most of these storage functions, you interact with your files based on their key. Therefore, to delete a file in your bucket you just need its key.


  void remove() async {
    try {
      String key = "ExampleKey";
      RemoveOptions options =
      RemoveOptions(accessLevel: StorageAccessLevel.guest);
      RemoveResult result =
      await Amplify.Storage.remove(key: key, options: options);

      setState(() {
        _removeResult = result.key;
      });
      print('_removeResult:' + _removeResult);
    } catch (e) {
      print('Remove Err: ' + e.toString());
    }
  }

Moving Forward

Congratulations! You now have covered all of the basics of storage using S3, and if you have read the other parts of this series, you have also dabbled with Analytics using Pinpoint and Authentication with Cognito.

Now that we have the basics pinned down, future articles will feature a combination of these services to create more fully-featured applications.

This Series

Part 1: Basic Setup

Part 2: Authentication

Part 3: Analytics

Part 4: Storage

Flutter Apps with AWS Amplify Backend: Part 3 — Analytics

FlutterArticles — Thu, 10 Sep 2020 00:31:55 +0000

Flutter Apps with AWS Amplify Backend: Part 3 — Analytics

How to generate event-driven analytics for your Flutter application

What is Amplify Analytics

The Analytics category enables you to collect analytics data for your App. The Analytics category comes with built-in support for Amazon Pinpoint

NOTE: Amplify Flutter is still in developer preview and is not recommended for production use at this time.

An Amplify Pinpoint Dashboard for our application

Why you need Analytics

High-quality analytics is a crucial component of any respectable app. They provide insight into how many users are on your app, and more importantly, HOW they are using their app.

Many apps lose users because of a disconnect between what the developer THINKS their users want, and what users ACTUALLY want. By obtaining actual data on how users are interacting with your app, developers can stop ‘developing-blind’.

Enough Preaching, Let’s Get Started

Prerequisites

The only thing you need for this tutorial is the app you created in Part 1 of this tutorial series.

If you don’t want to read part 1 and you are already familiar with Amplify Flutter, then simply create a new Flutter application and connect it to a cloud instance of Amplify.

Create a Basic Amplify Project

If you are using the app you created in Part 1, you can skip this step.

Otherwise, create a new flutter project, and from the project directory run:

amplify init

Setup the Backend

The backend can be set up entirely through the amplify cli:

amplify add auth
amplify add analytics

Your console should look something like this

As always, run *amplify add push *to push your local changes to the cloud. You should know that enabling analytics will automatically enable authentication (if it hasn’t been added already).

Integrate the Packages

Add the amplify packages to your pubspec.yaml.

dependencies:
  amplify_core: '<1.0.0'
  amplify_analytics_pinpoint: '<1.0.0'
  amplify_auth_cognito: '<1.0.0'

Next, include the necessary packages in your main.dart file:

import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_core/amplify_core.dart';

Initializing Amplify Analytics

I am working hand in hand with the official documentation to create this application. However, the documentation is actually out of date currently and the suggested code snippets need to be modified before being included in your codebase. In other words: copy-pasting isn’t always your friend.

If you don’t want to be bored with the nitty-gritty of a step by step tutorial, the completed main.dart can be found here. For those of you who want to soldier on with me: let’s dive in.

First, let’s set up a barebones main.dart for you to work with:

import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_core/amplify_core.dart';

import 'package:flutter/material.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  bool _amplifyConfigured = false;

  // Instantiate Amplify
  Amplify amplifyInstance = Amplify();

  @override
  void initState() {
    super.initState();

    // amplify is configured on startup
    _configureAmplify();
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the

    super.dispose();
  }

  void _configureAmplify() async {
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Your initialization method (called once at app startup) should look something like this:

  void _configureAmplify() async {
    if (!mounted) return;

    // add all of the plugins we are currently using
    // in our case... just one - Auth
    AmplifyAuthCognito authPlugin = AmplifyAuthCognito();
    AmplifyAnalyticsPinpoint analyticsPlugin = AmplifyAnalyticsPinpoint();

    amplifyInstance.addPlugin(
        authPlugins: [authPlugin], analyticsPlugins: [analyticsPlugin]);

    await amplifyInstance.configure(amplifyconfig);
    try {
      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print(e);
    }
  }

If you read Part 2 of this series, you will notice that the only change is the new analyticsPlugin being added to our amplifyInstance. After this step, your application is now ready to log events. Before we do that though, let’s launch your analytics console:

amplify console analytics

This will launch the analytics console in your browser — a super nice platform for monitoring app activity.

We haven’t logged any events yet — hence the emptiness.

Logging our First Events

There are many different ways to create events for Amazon Pinpoint. All created events are batched and flushed to the network every 30 seconds by default. If you want to change how often your app sends updates, you can modify the *autoFlushEventsInterval *field in your amplifyconfiguration.json.

To get started, we will create a simple page with a button that logs an event every time it is pressed. Add the following code snippet to your main.dart to implement the simple app.

  void _createEvent() {
    // simply logs a test event
    AnalyticsEvent event = AnalyticsEvent("test_event");

    event.properties.addBoolProperty("boolKey", true);
    event.properties.addDoubleProperty("doubleKey", 10.0);
    event.properties.addIntProperty("intKey", 10);
    event.properties.addStringProperty("stringKey", "stringValue");

    Amplify.Analytics.recordEvent(event: event);
    Amplify.Analytics.flushEvents();

    print("event logged");
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          body: Center(
            child: RaisedButton(
              onPressed: _createEvent,
              child: Text("Create Event"),
            ),
          ),
        ));
  }

Launch the app. Since we allowed unauthenticated users to send analytics events, we should be able to simply press our *Create Event *button and send events to the Amazon Pinpoint.

Notice the console messages which indicate successful event transfers

Navigate to your analytics console (via amplify analytics console), and head over to your events dashboard.

There, you should see that your dashboard has some new events registered (sometimes it can take a couple of minutes to update).

In my case… I pressed the button a lot.

You can filter your events using the filter dropdown. The events can be filtered based on the event type, as well as the event attributes and values. In my experience, it can take a while for the dashboard to update with the event types and attributes, so be patient.

Filtering based on event attributes

You can also filter based on the characteristics of the machine that your app is running on. This is particularly useful for identifying which types of phones your users have to create testing plans.

Endpoint attributes

Adding Custom Endpoint Attributes

Depending on the nature of your application, it may be useful to add custom endpoint attributes if you need more information about your users. For example, perhaps you want to differentiate between different subscription plans of your users. To do that, we can add properties by creating a new AnalyticsUserProfile:


  void _identifyUser() async {
    AnalyticsUserProfile analyticsUserProfile = new AnalyticsUserProfile();
    analyticsUserProfile.name = _userId + "_name";
    analyticsUserProfile.plan = _plan + "_plan";

    Amplify.Analytics.identifyUser(
        userId: _userId, userProfile: analyticsUserProfile);
  }

This adds a name and subscription plan to the endpoint’s analytics profile.

I also added some UI to control the *_userId *and *_plan *fields. To see the complete code, head over to the GitHub repo.

Add a name and subscription plan, and add them as endpoint properties

Now, when events are created from this device, they will be accompanied by the endpoint attributes of {“name”: “jackSparrow”, “plan”: “Premium”}.

Back in our console, we can now filter based on our new custom attributes.

Custom.plan and Custom.name are our new custom attributes

Location Data

If you desire location data from your user’s as an endpoint attribute, it can be painlessly added:

  void _identifyUser() async {
    // adds location data to our analytics profile

    AnalyticsUserProfileLocation analyticsUserLocation =
        new AnalyticsUserProfileLocation();
    analyticsUserLocation.latitude = 5;
    analyticsUserLocation.longitude = 5;
    analyticsUserLocation.postalCode = "90210";
    analyticsUserLocation.city = "BeverlyHills";
    analyticsUserLocation.region = "California";
    analyticsUserLocation.country = "USA";

    analyticsUserProfile.location = analyticsUserLocation;

    Amplify.Analytics.identifyUser(
        userId: _userId, userProfile: analyticsUserProfile);
  }

Finishing Up

Congrats on making it this far! If you simply want the completed code from this tutorial, head over to the GitHub repo. You will still need to perform the Amplify initialization (in fact, you may need to run amplify delete) to remove my Amplify folders.

So… what’s next?

In this tutorial, we simply scratched the surface of what is possible with Amazon Pinpoint in your Flutter application. In future tutorials, we will explore the full array of features that we can leverage to track monetization, leverage AI to issue data-driven recommendations, and foster a deeper understanding of how users are interacting with our app.

Until then, check out my other tutorials in this series to nail down the basics with Amplify for Flutter. Coming up next: storage.

This Series

Part 1: Basic Setup

Part 2: Authentication

Part 3: Analytics

Part 4: Storage

Flutter apps With AWS Amplify Backend: Part 2 — Authentication

FlutterArticles — Thu, 10 Sep 2020 00:20:58 +0000

Flutter apps With AWS Amplify Backend: Part 2 — Authentication

Setting up authentication in a Flutter application is easy with the help of AWS Cognito, now available through Amplify Flutter. If you haven’t check out Part 1 of this series, I suggest you do that first.

What are we making?

We will be making a simple registration and login system for a Flutter application that uses AWS Cognito as the authentication backend.

The login is very low latency

As always, you can find the code for this tutorial at our Github repo.

What do we need?

The only thing you need for this tutorial is the app you created in Part 1 of this tutorial series, which is just a sample app with *amplify *initialized.

If you don’t want to read part 1 and you are already familiar with Amplify Flutter, then simply create a new Flutter application and connect it to a cloud instance of Amplify.

Let’s Get Started

Create a Basic Amplify Project

If you are using the app you created in Part 1, you can skip this step.

Otherwise, create a new flutter project, and from the project directory run:

amplify init

Add AWS Cognito to our Project

From the integrated terminal, run

amplify add auth

This adds AWS Cognito* *to your project. After following the setup wizard, your terminal should look something like this:

Note that we are going to be using emails as the authentication method. I will cover the other methods in future tutorials.

Next, follow the instructions given in the terminal and run amplify push to deploy authentication to your cloud project.y

Checking on the Status of our Resources

You can check the status of your cloud resources by running amplify status.

At this point, a user pool should have been created in the cloud for your AWS Cognito service. Go to your user pools (make sure you select your region) and you should see a new user pool.

Interacting with Cloud Resources

A few steps are needed to interact with the cloud, if you just want the final result and don’t care about the step-by-step, go here for a checkpoint commit.

Many of these code snippets are derived from the AWS documentation. I will give explanations about what each logical component does, and provide you with a working example of a login form.

Add packages to pubspec.yaml

This gives us access to the dart packages for amplify.

amplify_core: '<1.0.0'
amplify_auth_cognito: '<1.0.0'

Amplify Initialization

This code snippet initializes our authentication plugin (and any other plugins we may have) and sets our apps flags so that we can handle an unsuccessful cloud connection in our app.

void _configureAmplify() async {
  if (!mounted) return;

  // add all of the plugins we are currently using
  // in our case... just one - Auth
  AmplifyAuthCognito authPlugin = AmplifyAuthCognito();
  amplifyInstance.addPlugin(authPlugins: [authPlugin]);

  await amplifyInstance.configure(amplifyconfig);
  try {
    setState(() {
      _amplifyConfigured = true;
    });
  } catch (e) {
    print(e);
  }
}

3. Register a User

Registering a user makes use of text controllers (not shown here). Once again, state flags (isSignUpComplete in this case) are set based on the result of the SignUp operation.

  Future<String> _registerUser(LoginData data) async
  {
    try {
      Map<String, dynamic> userAttributes = {
        "email": emailController.text,
      };
      SignUpResult res = await Amplify.Auth.signUp(
          username: data.name,
          password: data.password,
          options: CognitoSignUpOptions(
              userAttributes: userAttributes
          )
      );
      setState(() {
        isSignUpComplete = res.isSignUpComplete;
        print("Sign up: " + (isSignUpComplete ? "Complete" : "Not Complete"));
      });
    } on AuthError catch (e) {
      print(e);
      return "Register Error: " + e.toString();
    }
  }

4. Sign In a User

  Future<String> _signIn(LoginData data) async {
    try {
      SignInResult res = await Amplify.Auth.signIn(
        username: data.name,
        password: data.password,
      );
      setState(() {
        isSignedIn = res.isSignedIn;
      });

      if (isSignedIn)
        Alert(context: context, type: AlertType.success, title: "Login Success").show();

    } on AuthError catch (e) {
      print(e);
      Alert(context: context, type: AlertType.error, title: "Login Failed").show();
      return 'Log In Error: ' + e.toString();
    }
  }

And that’s it! Those are all of the logical building blocks that we will use to create a nice signup and login interface. The only thing left to do is integrate these components into a user interface, which we will do next.

Flutter Login

For convenience, we will use a flutter package called flutter_login to make our first integration quick and painless. As with all things in life, KISS.

Main.dart

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_core/amplify_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  // gives our app awareness about whether we are succesfully connected to the cloud
  bool _amplifyConfigured = false;

  // Instantiate Amplify
  Amplify amplifyInstance = Amplify();

  // controllers for text input
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  bool isSignUpComplete = false;
  bool isSignedIn = false;

  @override
  void initState() {
    super.initState();

    // amplify is configured on startup
    _configureAmplify();
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the
    // widget tree.
    emailController.dispose();
    passwordController.dispose();

    super.dispose();
  }

  void _configureAmplify() async {
    if (!mounted) return;

    // add all of the plugins we are currently using
    // in our case... just one - Auth
    AmplifyAuthCognito authPlugin = AmplifyAuthCognito();
    amplifyInstance.addPlugin(authPlugins: [authPlugin]);

    await amplifyInstance.configure(amplifyconfig);
    try {
      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print(e);
    }
  }

  Future<String> _registerUser(LoginData data) async
  {
    try {
      Map<String, dynamic> userAttributes = {
        "email": emailController.text,
      };
      SignUpResult res = await Amplify.Auth.signUp(
          username: data.name,
          password: data.password,
          options: CognitoSignUpOptions(
              userAttributes: userAttributes
          )
      );
      setState(() {
        isSignUpComplete = res.isSignUpComplete;
        print("Sign up: " + (isSignUpComplete ? "Complete" : "Not Complete"));
      });
    } on AuthError catch (e) {
      print(e);
      return "Register Error: " + e.toString();
    }
  }

  Future<String> _signIn(LoginData data) async {
    try {
      SignInResult res = await Amplify.Auth.signIn(
        username: data.name,
        password: data.password,
      );
      setState(() {
        isSignedIn = res.isSignedIn;
      });
    } on AuthError catch (e) {
      print(e);
      return 'Log In Error: ' + e.toString();
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: FlutterLogin(
          logo: 'assets/vennify_media.png',
          onLogin: _signIn,
          onSignup: _registerUser,
          onRecoverPassword: (_) => null,
          title:'Flutter Amplify'
      ),
    );
  }
}

Of course, add the following lines to your **pubspec.yaml **to enable our new packages:

flutter_login: '<1.0.0'
rflutter_alert: '^1.0.3'

You will need to add your own image to assets for the flutter_login logo

Testing User Registration

To register a new user, simply use the intuitive flutter_login interface to submit a new user request to Amplify Cognito.

Use a fake email, or a real one..your choice.

Navigate to your user pool and you should see a new user that was created:

In this case, I created two users

Select one of the users in your pool. Notice that the status is ‘UNCONFIRMED’. In this tutorial, we will be confirming our users manually simply by tapping on the ‘Confirm User’ button. In a future tutorial, I will demonstrate how to confirm users automatically using a verification code sent to their phone or email.

Tap ‘Confirm User’ to activate the new account

Testing User Login

Let’s try to login using the user that we just created.

Login and login success

This gif is mandatory

Wrapping Up

Still with me? At this point, we have a very basic authentication system for our app that leverages AWS Cognito. There are still several other topics to explore in regards to authentication, but they are beyond the scope of this tutorial. Some other challenges we need to tackle include:

Authentication based on different credential types
Automatic confirmation of users
2FA and custom authentication processes

I hope to cover these topics in detail in a future article. Until then, let’s continue on our journey of nailing down the basics of AWS Amplify with Flutter. Next up — analytics.

This Series

Part 1: Basic Setup

Part 2: Authentication

Part 3: Analytics

Part 4: Storage

Flutter apps with AWS Amplify Backend: Part 1 — Basic Setup

FlutterArticles — Thu, 10 Sep 2020 00:11:25 +0000

Flutter apps with AWS Amplify Backend: Part 1 — Basic Setup

Firebase has become the de-facto backend solution for Flutter applications because of its ease-of-use. However, the new Amplify Flutter provides an alternative for developers who prefer an AWS backend.

In late August, AWS Amplify announced the release of the developer preview for the Flutter framework. The features provided are not yet ready for production, so don’t ditch Firebase just yet.

What is AWS Amplify?

From the Github repo:

AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service.

So basically, it makes it A LOT easier to use AWS Amplify as a backend to your Flutter applications.

What can we do with Amplify (so far)?

Authentication— Create user authentication experiences with Amazon Cognito
Analytics— Collect analytics data with Amazon Pinpoint
Storage— Store user content with Amazon S3

How can we set this up?

The prerequisites for this tutorial are as follows:

Flutter version 1.20.0 or higher
Node.js v10.0 or higher
npmv5.0 or later
gitv2.14.1 or later

The following tutorial series assumes that you are using Android Studio as your IDE.

Install the Amplify-Flutter Developer Preview version of the Amplify CLI by running:

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

Next, you must create an AWS account and select the ‘free tier’ (unless you are feeling brave).

Add User to IAM

Before going any further, we need to add a new user to AWS Identity and Access Management (IAM) which we will use for the rest of this tutorial.

Navigate to the IAM Portal and select ‘Add User’. Make sure you have selected the proper region (top right).

You will be guided through a series of steps to create your user:

Grant yourself programmatic access and name your project.

Create a new permissions group

Create a group with AdministratorAccess

Review Settings

User creation Success

Keep these two access keys handy, you will need them soon!

Create New Flutter Project

Open your Android IDE, and create a new default Flutter app.

Create a new flutter application

Initialize Amplify Project

From the integrated terminal in Android Studio, initialize your Amplify project:

amplify init

This command will guide you through a series of steps to initialize your project. It should look something like this (depending on your region and preferred text editor):

When asked whether you want to set up a new user, select NO since we already did that in the previous step. Use the *accessKeyId *and *SecretAccessKey *you obtained at the end of the user setup to complete this step:

When you are finished with the setup, *amplify *should output:

Amplify Files

Our local application is now connected to the cloud — great work! If you explore your project directory a little bit, you will notice that Amplify has created a few folders and configuration files that are used to manage your project.

New Files

The first thing you should know is that your .gitignore has been modified to exclude some of the files that amplify has created:

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplify-build-config.json
amplify-gradle-config.json
amplifytools.xcconfig

lib/amplifyconfiguration.dart: manages identity and authentication to your cloud project. Contains sensitive information.
amplify/backend: contains lots of metadata about your cloud instance and any services you may have enabled (we haven’t enabled anything yet)

In general, you won’t need to modify any of these files yourself — that is the beauty with Amplify — all of the nitty-gritty configurations are done automagically through the amplify cli, pretty cool right?

Configuring our App

Now that all the boring stuff is out of the way — we can start using Amplify in our app. Let’s start with a simple app that doesn’t include any services (authentication, analytics, etc…) but simply configures itself with our cloud instance.

In your **pubspec.yaml **add:

amplify_core: '<1.0.0'

This will give us access to the core Amplify packages. Here is a simple main.dart that will launch an app, connect it to your Amplify cloud instance, and output a message indicating success.

import 'package:amplify_core/amplify_core.dart';
import 'package:flutter/material.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
    routes: {},
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // gives our app awareness about whether we are succesfully connected to the cloud
  bool _amplifyConfigured = false;

  // Instantiate Amplify
  Amplify amplifyInstance = Amplify();

  @override
  void initState() {
    super.initState();

    // amplify is configured on startup
    _configureAmplify();
  }

  void _configureAmplify() async {
    if (!mounted) return;

    await amplifyInstance.configure(amplifyconfig);
    try {
      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Amplify Core example app'),
            ),
            body: ListView(padding: EdgeInsets.all(10.0), children: <Widget>[
              Center(
                child: Column(children: [
                  const Padding(padding: EdgeInsets.all(5.0)),
                  Text(_amplifyConfigured ? "configured" : "not configured"),
                ]),
              )
            ])));
  }
}

After running our app on an emulated device, if everything worked we should see the following render on our screen:

Congrats! You now have the humble beginnings to a Flutter application with Amplify as a back-end.

If you simply want the code for this tutorial, head over to the gist I set up.

Moving Forward

If you have read this far, thanks! Be sure to follow to get all of the newest information on Amplify Flutter. In the next part of this series, we will be adding AWS Cognito to our project to achieve a nice user sign-up/sign-in experience.

This Series

Part 1: Basic Setup

Part 2: Authentication

Part 3: Analytics

Part 4: Storage