DEV Community: Ashton Jones

Building a Flutter Chat Application with Stream: Building the App (Part 3)

Ashton Jones — Tue, 20 Oct 2020 13:13:13 +0000

This article is part of a series on building a fully functional Flutter app with Stream. All other parts, as well as the finished code, can be found below.

Part 1: Introduction

Part 2: Configuration

SpikeChat Github Project

Since the configuration is all done, it is time to get to coding 👨🏻‍💻. Let’s do it!

App Flow:

Here is how the app works. When someone opens it for the first time, they need to enter a passcode to continue. Once they enter the passcode, they get to choose a username. After choosing a username, they are authenticated and brought to the Spikeball chat screen.

After opening the app for the first time, they are brought to a screen that shows their username and allows them to go to the Spikeball chat screen. When they click ‘continue’, they are re-authenticated with the app using their original username they set.

Let’s dive into the code and see how this works!

main.dart

The main.dart file is pretty simple. All I do is initialize the shared preferences and decide which screen to load depending if they have already entered the passcode or not.

If they have not entered the passcode (using the app for the first time), they will be brought to the Entry Screen:

Once they successfully enter the passcode, I set the ‘isValidated’ setting in shared preferences to true. So next time they open the app, they will not have to enter it again. If they do not enter the correct passcode, they will not be able to access the app, thus I know that only my friends who I share the passcode with will be able to use the app.

Here’s the code for the Entry Point screen:

If they have already entered the passcode, I load the HomeScreen. If it is the first time opening the app, I have them set their username and create a user with the username. If they have already set a username, I show the username and a continue button to go to the chat. Again, I use shared preferences to save the username, so I can re-authenticate my friend with the username they already set.

Below is the code for Home.dart:

Authenticating the User with Stream

To authenticate the user, I use the start_jwt plugin to generate a token with the Stream app secret. The Stream client has an argument ‘tokenProvider’ which allows us to pass a function we want to use to generate an authentication token. I put all the code into a separate class ‘ChatModel’. Although I am not implementing the provider functionality, I made this class extend it in case I want to build upon this app in the future and add multiple chats, which would would be a great use case for provider.

When my friend enters a username, I authenticate the client and set the user. I call the setUserWithProvider method on the client, set the id as the username they entered, set the channel type to ‘mobile’, and name the channel “Spikeball”. Channels represent chat rooms. The ‘extraData’ parameter can be used to set additional fields such as images.

*await *client.setUserWithProvider(User(
    id: 'id_$userId',
    extraData: {
      'name': '$userId',
      'image': 'https://picsum.photos/100/100'
    }));

*final *channel = client
    .channel('mobile', id: 'Spikeball', extraData: {
  'image':
      'https://scheels.scene7.com/is/image/Scheels/85375900555?wid=400&hei=400&qlt=50'
});
channel.watch();

Similarly when returning to the app, I authenticate the user with nearly identical code. The only difference is that I use the username they already entered, so they do not have to enter it again and so another user is not created:

*await *client.setUserWithProvider(User(
    id: 'id_${sharedPrefs.username}',
    extraData: {
      'name': '${sharedPrefs.username}',
      'image': 'https://picsum.photos/100/100'
    }));

*final *channel =
    client.channel('mobile', id: 'Spikeball', extraData: {
  'image':
      'https://scheels.scene7.com/is/image/Scheels/85375900555?wid=400&hei=400&qlt=50'
});
channel.watch();

Using the Stream Chat Widgets

Implementing the Stream chat widgets is pretty simple. We just need to put a ‘StreamChat’ widget at the top of the widget tree and pass the client to it, add a ‘StreamChannel’ widget as the child and specify the channel, and add the (visual) Stream chat widgets we want to use; those will be the widgets in the ‘ChannelPage’ widget I created.

Navigator.*of*(context).push(MaterialPageRoute(
      builder: (_) => StreamChat(
            client: client,
            child: StreamChannel(
              channel: channel,
              child: ChannelPage(),
            ),
          )));
}

ChannelPage widget:

In the ChannelPage widget, I ‘ChannelHeader’ is a Stream widget for an AppBar, ‘MessageListView’ is where the messages are displayed, and ‘MessageInput’ is the text input field where messages are typed.

Here is what it looks like:

Implementing Shared Preferences

If you are curious about how I implemented shared preferences, I followed this article to make shared preferences easily accessible from anywhere in the app. I just created an ‘init’ method that I call in main.dart to initialize shared preferences and created getters and setters for the username and validation. I can access _sharedPreferences anywhere in my code.

Here’s the code for my shared preferences:

The Final Product:

Resources:

Troubleshooting

There are currently some bugs with building the Android APK, but if you run the app on an Android emulator or device, it should work just fine. I also needed to update Gradle to the latest version to get the Android app to work. If you have any other issues, please comment on this post- I’d be happy to help :)

Hi, I’m Ash 👋🏼 Let’s connect!

🌐 ashtonjones.dev|👥 @tjgrapes |✉️ ashtonjonesdev@gmail.com

👨‍💻 Google Certified Android Engineer |
✍ Writer |
🧘‍♂️ Stoic && Meditator

📱 Need an app built? Contact me here.

Building a Flutter Chat Application with Stream: Configuration (Part 2)

Ashton Jones — Tue, 20 Oct 2020 13:11:00 +0000

Building a Flutter Chat Application with Stream: Configuration (Part 2)

This article is part of a series on building a fully functional Flutter app with Stream. All other parts, as well as the finished code, can be found below.

Part 1: Introduction

Part 3: Building the App

SpikeChat Github Project

Configuration:

There is quite a bit of configuration I had to do before I could start using Stream’s SDK. Below is a synopsis of all the configuration:

Pubspec.yaml dependencies
Configuration of Stream App
Code for constants class
Co-dependencies configuration for iOS
Code for authorization configuration using start_jwt

Pubspec.yaml Dependencies

In order to use Stream, I needed to add the stream_chat_flutter, along with flutter_file_picker, video_player, and image_picker, which are required to enable full functionality of Stream’s APIs on iOS.

Configuration of Stream App

First, I needed to create an account with Stream. They allow developers a 30 day trial period to try out their Chat and Feed APIs.

After creating an account, I created a Stream project called “SpikeChat” for my Flutter application with development mode selected. After creating the app, an app key and app secret is generated, which will be used to authenticate the app with Stream.

Next, I created a chat type called “mobile” by selecting the app then clicking chat-> chat overview-> add chat type.

In order to allow users to write and read (send and see) messages, I had to scroll down to permissions and add the “user” in “roles” to give users the same access as the administrator.

Configuration for Constants class:

After configuring the Stream app, I put the Stream app key and secret in a constants class that are used when authenticating with the Stream client:

Co-dependencies Configuration for iOS:

In order to get the full functionality of Stream to work on iOS, I had to do some additional configuration. I needed to add permissions to the info.plist file, highlighted between the comments below. Most of the co-dependencies are good to go with Android, but you may need to do some additional configuration if you are targeting older APIs. If you want to read more in depth about why you need these and ensure you are correctly configured for Android, check out the stream_chat_flutter plugin’s readme.

Code for Authorization Configuration Using start_jwt

I was stuck for awhile trying to figure out how to authorize my app with Stream’s APIs. Unfortunately, the documentation for authentication on Flutter is lacking. This was pretty frustrating because I was stuck for a couple days and unable to move forward.

Luckily I was able to figure out how to implement authentication. In order to authenticate the user, I used the start_jwt plugin to generate a JSON web token with my Stream app secret. The method ‘tokenProvider’ uses the Stream app secret to create a token, and also adds the username to the client. I explain more about how this works in part 3.

Up Next:

In part 3, I’ll explain how I built the app using Stream’s widgets.

If you want to follow along, here is the SpikeChat project:
(https://github.com/ashtonjonesdev/spike_chat)

Resources:

Hi, I’m Ash 👋🏼 Let’s connect!

🌐 ashtonjones.dev|👥 @tjgrapes |✉️ ashtonjonesdev@gmail.com

👨‍💻 Google Certified Android Engineer |
✍ Writer |
🧘‍♂️ Stoic && Meditator

📱 Need an app built? Contact me here.

Building a Flutter Chat Application with Stream: Introduction (Part 1)

Ashton Jones — Tue, 20 Oct 2020 13:08:40 +0000

This article is part of a series on building a fully functional Flutter app with Stream. All other parts, as well as the finished code, can be found below.

Part 2: Configuration

Part 3: Building the App

SpikeChat Github Project

Introduction

I discovered Stream’s chat API and challenged myself to build a fully functional Flutter messaging app with it.

I decided to build SpikeChat, a group chat application for me and my friends to plan times to play Spikeball.

Experience

Stream made it effortless to build a messaging application with Flutter! They have their own Flutter widgets that you use to build the chat features. At first, I thought I would have to build my own database (i.e. Cloud Firestore) to keep the chat in sync on multiple devices. But Stream’s SDK already has local persistent storage AND cloud storage, which means you are not required to implement a database layer.

However, the Flutter documentation is a bit lacking, so I needed to do some work to figure out how to authorize a client with their API. In this series, I’ll explain everything you will need to know to build a fully functional Flutter chat app with Stream.

SpikeChat Overview

A fully functional chat application built with Flutter and Stream!

I wanted to keep the messaging app simple, so I build the application with one channel (chat room) called “Spikeball”

The chat contains the following features, which come by default with Stream’s SDK:

✅ Join the chat room
✅ Send text, images, audio, and video in the chat
✅ React to messages (i.e. heart react) and see the reaction count
✅ See when the chat was last active

However, there is quite a bit of configuration in order to get everything to work on both iOS and Android, which I will cover in part 2.

The app requires a passcode in order to enter the chat. I did this as simple a way to implement a private chat only my friends and I can join, without over-engineering the application. The user will not be able to get past this first screen if they do not have the passcode. For the intents of this application, it is sufficient.

After entering the correct passcode, my friend gets to choose a username. I use the username to authenticate him/her with the Stream client and create a user for the channel with that username.

After that’s done, they are logged into the application and brought to the Spikeball chat screen. The chat screen is built using Stream’s Flutter chat widgets. Here, my friends and I can send messages, photos, videos, and audio. We can see when the chat was last active, who sent messages, and react to messages, all in real time.

Up Next:

In part 2, I’ll explain how to configure the Stream client and other parts of the project.

If you want to follow along, here is the SpikeChat project:
(https://github.com/ashtonjonesdev/spike_chat)

Resources:

Hi, I’m Ash 👋🏼 Let’s connect!

🌐 ashtonjones.dev|👥 @tjgrapes |✉️ ashtonjonesdev@gmail.com

👨‍💻 Google Certified Android Engineer |
✍ Writer |
🧘‍♂️ Stoic && Meditator

📱 Need an app built? Contact me here.

https://www.twitter.com/FlutterComm

Looking for Flutter Roles

Ashton Jones — Fri, 25 Sep 2020 13:30:43 +0000

Hey everyone, I am looking for a new role as a Flutter developer or Flutter developer advocate. My expertise is in Flutter and native Android mobile app development.

My skillset includes:

Flutter (Flutter SDK, Dart)
Native Android (Android SDK, Java)
Firebase (Cloud Firestore, Authentication)
Google and Apple Authentication
Google Play Store and Apple App Store (Uploading and configuring apps)
Observer patterns (Provider- Flutter; LiveData and Observer- Android)
Material Design
Writing
Entrepreneurship

I am looking for roles where I can grow my skills, work remotely, and have autonomy. If you know of any opportunities, please let me know!

https://ashtonjones.dev/#/

Cloud Firestore Basics in Flutter: How to Get, Add, Edit, and Delete Data in Cloud Firestore, Demonstrated in a Real Flutter App

Ashton Jones — Mon, 17 Aug 2020 14:50:55 +0000

In this post, I will be demonstrating how to do the basic database operations in
Cloud Firestore in a Flutter app, using a published app I built as a practical
example.

You will learn how to implement the core database operations in Cloud
Firestore: how to get (read), add (write), edit, and delete data in the database
in a Flutter app.

Note: This article does not cover setting up Cloud Firestore, Firebase
Authentication/Sign in for Flutter, and documents/collections in Cloud
Firestore, which are prerequisites for this tutorial. *If you are unfamiliar
with these topics, *I highly encourage you to read the Cloud Firestore
plugin’s Readme and check out this
code lab to setup Firebase with
Flutter,
check out the _Reply project as a
guide, and watch this video
to learn about documents and collections in Cloud
Firestore
before returning to this article.

_Reply App Background

_Reply is a
Flutter app I built from scratch and published to the Google Play Store and
Apple App Store. This is a rebuild of my previous native Android app
“Reply”; I rebuilt
it using Flutter to make it available on both iOS and Android.

I will use this app to provide clear, practical examples of how to implement the
core Cloud Firestore operations.

I have the code available on
Github and you can download
the app on the Google Play
Store
and the Apple App
Store.

_Reply helps you easily create your own custom, pre-defined messages through
any platform.

With the app, you create your custom message templates which you can categorize
based on the type of message (i.e. personal, social, and business messages).
Each tab corresponds to a category.

Once you create your own messages, you can preview, send, edit, and delete them
using the main button in the bottom right corner.

Registering and Signing in Users

You can also use Firebase Authentication to register and sign in users. If you
are implementing Firebase Authentication for the first time, I recommend reading
the _Reply source code, which
will show you how to implement the following:

Sign in with email and password
Sign in with Google
Sign in with Apple
Sign out
Register with email and password

All of these methods can be found in the project’s AuthService.dart
class.

❗️❗️Please note that authenticating/signing/registering a user does NOT create
a user for you in the database.

Signing in a user and creating a user in the database are two separate
operations you must implement.

This can be confusing because once a user has signed in, you will see an
authenticated user with a uid within the Authentication tab in the Firebase
console. These are the Firebase users. *After a successful initial sign in or
registration, a *FirebaseUser** is created and signed into the app.** A
FirebaseUser contains data such as name (called ‘display name’), email, and an
automatically generated uid to identify the FirebaseUser.

Before we start adding user data to the database, we first need to create users
which we will save the user data to in the database. This should be done after
registering/signing in to the app and only if it is a new user.

To create users in our actual database, we will use the data provided by the
*FirebaseUser*s to create users in our database; namely, we will use the
*uid and the name.*

Checking For New Users

After a successful sign in, we should have a FirebaseUser signed in.

We do not need to check if it is a new user when signing in with email, because
if the account does not exist, we will show a message to first register the
account:

To check if it is a new user when signing in, we will *compare the creation
time stamp and last sign in time stamp of the *FirebaseUser. This is what we
will do for the sign in with Google and sign in with Apple options. We can do
this like so:

(firebaseUser.metadata.creationTime
        .difference(firebaseUser
            .metadata.lastSignInTime)
        .abs() <
    Duration(seconds: 1))

Let’s take a look at how this is done when signing in with Google.

When the sign in with Google button is pressed, we will execute the following.
Notice how after the user has been authenticated (signed in) with Google, we
compare the creation time and last sign in time to check if it is a new user. If
a user is signing in for the first time, we create a new user in the database,
passing the FirebaseUser to the method so we can utilize the data it contains.

Note:* I ran into a quirk when comparing the creation time and last sign in
time. For some reason during the initial sign in, the time stamps were off by a
thousandth of a second, when they should have been the same. Thus, I could not
compare them using equality, because they were always off. To address this, I
compared the difference between the two, checking to see if there is at least a
one second difference.*

Creating a New User in the Database

To create a new user in the database, we will do the following:

Use the authenticated FirebaseUser to get the user’s name and email.
Create a collection called “users” and add a user (a document) to it, setting the document id as the FirebaseUser uID, the name field as the FirebaseUser’s display name, and the email field as the FirebaseUser’s email.

If done successfully, we should see a users collection with a user document:

Each document in Cloud Firestore has a document ID to identify it. We use the
*setData method instead of the add method so we can explicitly set a
document ID instead of it being automatically generated. We do this to easily
retrieve the document later. However, please be aware this could cause potential
conflicts.*

When a user is signed to our app, we can call:

FirebaseUser firebaseUser = FirebaseAuth.instance.currentUser()

Since we set the document ID (for the document of the FirebaseUser) to be the
same as the corresponding FirebaseUser uID , we can simply retrieve the document
using the FirebaseUser’s uid:

firestoreInstance.collection(
).document(firebaseUser.uid).updateData({
// Update document
)}

Now let’s get to the meat of this article and learn how to work with data and
the database.

Adding Data to the Database

Setting Up Security Rules

Setting up Cloud Firestore Security Rules is important to keep your users’ data
secure. Furthermore, if you don’t change the initial security rules, your app‘s
Cloud Firestore database access will expire after 30 days. I recommend reading
how to structure security
rules to
apply the appropriate restrictions to your app. The following set of rules
ensure that only authenticated users can read and write their own data:

Adding Initial Data

Before we get into the add feature of _Reply, let’s learn how to add data when
we first create users in the database. This is useful to have placeholder data,
such as welcome messages when the user first signs in:

Placeholder message in _Reply

In this case, we want to add placeholder messages when the user is first created
so we can show welcome messages.

We are going to use the MessageCard model class to add messages. Notice the
toJson() and fromJson() methods. *To add custom objects to Cloud Firestore
in Flutter, we must first serialize the data. *In this case, we are
serializing the inside the *MessageCard model class, converting our objects
into a map that Cloud Firestore will accept.*

If you would like to read more about serialization in Flutter, check out this
post.

Now we can simply add fields when we are saving the user to the database. Here
we are adding 5 new fields, one for each category of messages, and adding
MessageCards (messages) that display the user’s name, using the toJson()
method to serialize the data.

Adding Data to an Existing Document

Add Message in _Reply

Adding data to Cloud Firestore can be implemented in multiple different ways.

The *add, setData, and updateData, and updateData +
FieldArray.union methods can all be used to add data.*

I recommend reading the
documentation
to fully understand when to use each add method, but here is a brief overview:

add(): Add a document with an auto-generated id
setData(): Add or overwrite a document with an explicit id. If the document does not exist, it will be created. If the document does exist, its contents will be overwritten with the newly provided data
updateData(): Add fields to document without overwriting the entire document
updateData() + FieldArray.union():Add an element to an array field of a document.

Adding New Data to an Existing Array Field

Now we are going to learn how to add data. This is how data is added in _Reply
when a user adds a new message.

Since we created placeholder data, we already have a fields for the messages,
which are lists. In Cloud Firestore, lists are stored as arrays, so we are
actually working with an array field.

In this case, we have to update an existing array field; we must add an element
(message) to the list while retaining the existing elements (messages). To do
this, we use updateData + FieldArray.arrayUnion.

Notice we must first serialize the data using the *toJson() method to save
the data to the database. To store it as a list of items instead of a map, we
convert the map to a list.*

If executed correctly, we should see the new message added to the existing array
field. (In this case, the personalMessages field)

Deleting Data From the Database

Deleting data from Cloud Firestore can be implemented in multiple different
ways.

Again, I recommend reading the
documentation
to get a full grasp of when to use each method. Here is a brief overview:

delete(): Delete data from a document
updateData() + FieldValue.delete(): Delete a field from a document
updateData() + FieldArray.remove(): Remove an element from an array field within a document

Similar to the add message case, we need to update an existing array field; we
must remove an element (message) from the list while retaining the existing
elements (messages). To do this, we use updateData() + FieldArray.remove().

If implemented correctly, the message should be deleted and the field,
personalMessages, should still contain the other messages. Here we removed the
the “Get Together” message, which happened to be 1st element in the array field.

Editing Data in the Database

Continuing with our trend, editing data also has multiple implementations and
use cases. Let’s take a look:

updateData(): Update fields of a document without overwriting the entire document
setData() with merge:trueUpdate fields in a document or create it if it do not exist
updateData() + FieldValue.arrayRemove() + updateData() + FieldValue.arrayUnion():Update elements in an array field within a document
updateData() + FieldValue.increment():Increment a numeric field within a document

For the _Reply app, what we need to do is replace the old message with the
new message. To do this, we will use updateData() + FieldValue.arrayRemove() + updateData() + FieldValue.arrayUnion():

Notice what is going on here. To update the message, we are actually just
deleting the old value, then adding a new one- a clever way to edit something.

Getting Data From the Database

Now that we have data in the database, we can retrieve it. I saved getting data
for last because it is the most cumbersome and complex data operation to
implement.

Fortunately, there is really only one method we need to know when getting data:
get().

Here is what we need to do to retrieve our data:

We first create an empty List to hold the data we will get from our database
We then query the database for the data we need
Since the data is returned to us as a Map, we need to convert it to MessageCard objects so we can easily retrieve the data; to do this, we use the fromJson() method in our MessageCard class
Once our data is converted to MessageCard objects, we can get the data we need; in this case, we are retrieving the MessageCards and adding them to a list.
Finally, we return the list of messages to show them in the UI

Since the data returned from Cloud Firestore will be a Map, we need to convert
it to deserialize it and convert it to a custom object. This is the opposite
of what we had to do when saving the MessageCard objects to Cloud Firestore. We
use the fromJson() method to do this.

Conclusion

Let’s recap. We learned how to:

Check for new users upon sign in
Create new users in a Cloud Firestore Database
Set basic security rules
Add placeholder data for our users
Add new data to the database
Delete data in the database
Edit data in the database
Get data from the database

I know that was a lot, but you made it!

Now you can truly be a (Fire)base User. 🔥

Resources

https://github.com/ashtonjonesdev/reply_flutter
https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html?index=..%2F..index#6
https://www.youtube.com/watch?v=v_hR4K4auoQ&list=PLl-K7zZEsYLluG5MCVEzXAQ7ACZBCuZgZ&index=2&t=0s

Cloud Firestore Basics in Android: How to Get, Add, Edit, and Delete Data in Cloud Firestore in an Android App

Ashton Jones — Fri, 31 Jul 2020 17:40:03 +0000

In this post, I will be demonstrating how to do the basic database operations in
Cloud Firestore in an Android App, using a published app I built as a practical
example.

You will learn how to implement the core database operations in Cloud
Firestore: how to get (read), add (write), edit, and delete data in the database
in an Android app.

Note: This article does not cover setting up Cloud Firestore, Firebase
Authentication for Android, and documents/collections in Cloud Firestore, which
are prerequisites for this tutorial. *If you are unfamiliar with these topics,
*I highly encourage you to read Evana
Margain’s article to set up Cloud
Firestore,
read how to implement FirebaseUI for
authentication, and
watch this video to learn about documents and collections in Cloud
Firestore
before returning to this article.

Reply App Background

Reply is an
Android app I built from scratch and published to the Google Play Store. I will
use this app to provide clear, practical examples of how to implement the core
Cloud Firestore operations.

I have the code available on Github
and you can download the app
here.

Reply helps you easily create your own custom, pre-defined messages through any
platform.

With the app, you create your custom message templates which you can categorize
based on the type of message (i.e. personal, social, and business messages).
Each tab corresponds to a category.

Once you create your own messages, you can preview, send, edit, and delete them
using the main button in the bottom right corner.

Step 0: Creating Users in the Database

Before we start adding user data in the database, we first need to create users
which we will save the user data to in the database. This should be done after
registering/signing in to the app and only if it is a new user.

If you are using Cloud Firestore, you can also use Firebase Authentication to
register and sign in users. If you are implementing Firebase Authentication for
the first time, I recommend using
FirebaseUI, because
it provides a pre-built UI and requires less work.

❗️❗️Please note that authenticating/signing in a user does NOT create a user
for you in the database.

Signing in a user and creating a user in the database are two separate
operations you must implement.

This can be confusing because once a user has signed, you will see an
authenticated user with a uID in the Authentication tab in the Firebase console.
*These are the Firebase Users. *After a successful initial sign in or
registration, a FirebaseUser is created. A FirebaseUser contains data such as
name (called ‘display name’), email, and an automatically generated uID to
identify the FirebaseUser.

Reply Authentication in Firebase Console

To create users in our actual database, we will use the data provided by the
FirebaseUsers to create users in our database; namely, we will use the uID and
the name.

Before we begin adding users to the database, we need to create a simple User
model class. We will be using instances of this to create Users in our database.
*In other words, these are the objects we will actually be saving to Cloud
Firestore. *Since Cloud Firestore supports custom objects, we do not need to be
concerned about converting or serializing the data before saving it to the
database. For example, we can start with a simple model which will just contain
a name and a user ID:

If you are using FirebaseUI to sign in users, you should have code similar to
the gist below. The code below is from my app; the only difference between the
FirebaseUI Sign in
Example and my code
is that I put some of the code to handle the sign in response into a method.

The important parts to pay attention to are the IdpResponse and the current
FirebaseUser.

We are going to use the IdpResponse to check if it is a new user and the
FirebaseUser to create a user in the database using the FirebaseUser uID and
display name.

To check if we have a new user (signing in for the first time), we can call
isNewUser() on our IdpResponse. If it is a new user, we should create a user in
the database, using our User model class.

To create a new user in the database, we will do the following:

Get the current FirebaseUser. This should return the user who just signed in.
Create a new User object from our User model class, using the uID and the display name from the FirebaseUser to set the uID and name of the User object.
Create a collection called “users” and add a user (a document) to it, setting the document id as the FirebaseUser uID.

If done successfully, we should see a users collection with a user document:

Reply Cloud Firestore Database in Firebase Console

Each document in Cloud Firestore has a document ID to identify it. We use the
‘set’ method instead of the ‘add’ method so we can explicitly set a document ID
instead of it being automatically generated.

❗️❗️ *We set the document ID to be the same as the corresponding FirebaseUser
uID. We do this so we can easily retrieve the user data later.*

When a user is signed to our app, we can call:

FirebaseUser firebaseUser = FirebaseAuth.getInstance().getCurrentUser()

This will return the id of the signed in user.

Since we set the document ID (for the document of the FirebaseUser) to be the
same as the corresponding FirebaseUser uID , we can simply retrieve the document
(and thus, the data) by calling the following, passing in the signed in user’s
id:

DocumentReference userDocument = firebaseFirestore.collection("users").document(uID)

These calls are compartmentalized into methods below:

We will use these two methods over and over whenever we need to access data in
the database, as you will see shortly.

Now let’s get to the meat of this article and learn how to work with data and
the database.

Adding Data to the Database

Add Message in Reply

Adding data to Cloud Firestore can be implemented in multiple different
ways:

The ‘add’, ‘set’, and ‘update’, and ‘update + FieldArray.union’ methods can all
be used to add data.

I recommend reading the
documentation
to fully understand when to use each add method, but here is a brief overview:

‘add’: Add a document with an auto-generated id
‘set’: Add or overwrite a document with an explicit id. If the document does not exist, it will be created. If the document does exist, its contents will be overwritten with the newly provided data
‘update’: Add fields to document without overwriting the entire document
‘update + FieldArray.union’: Add an element to an array field of a document.

Adding initial data when we create the users in the database:

Before we get into the add feature of Reply, let’s learn how to add data when we
first create users in the database. This is useful to have placeholder data,
such as welcome messages when the user first signs in:

Placeholder message in Reply

To do this, we first need to add the data we want to our User model class. For
the Reply app, I added a message list for each category to show a placeholder
message in each one:

Reply User Model with Placeholder Data

Then when I created a User to save to Cloud Firestore, I added a placeholder
message to each list which displays their name:

Adding new data to an existing array field

Now we are going to learn how to add data. This is how data is added in Reply
when a user adds a new message.

Since we created placeholder data, we already have a fields for the messages,
which are lists. In Cloud Firestore, lists are stored as arrays, so we are
actually working with an array field.

In this case, we have to update an existing array field; we must add an element
(message) to the list while retaining the existing elements (messages). To do
this, we use ‘update + FieldArray.arrayUnion’.

Notice we are using the two methods I mentioned earlier to access data in the
database. Here they are in action. We are retrieving the user document which
corresponds to the user who is signed in.

If executed correctly, we should see the new message added to the existing array
field. (In this case, the personalMessages field)

Deleting Data From the Database:

Deleting data from Cloud Firestore can be implemented in multiple different
ways.

Again, I recommend reading the
documentation
to get a full grasp of when to use each method. Here is a brief overview:

‘delete’: Delete an entire document
‘update + FieldValue.delete’: Delete a field from a document
‘update + FieldValue.arrayRemove’: Remove an element from an array field within a document

Editing Data in the Database:

Continuing with our trend, editing data also has multiple implementations and
use cases. Let’s take a look:

‘update’: Update fields of a document without overwriting the entire document
‘update + dot notation’: Update nested fields within a document
‘update + FieldArray.union’ & ‘update + FieldArray.remove’: Update elements in an array field within a document
**‘update + FieldValue.increment’ & ‘update + FieldValue.decrement’: **Increment or decrement a numeric field within a document

For the Reply app, what we need to do is replace the old message with the new
message. To do this, we will use ‘update + FieldArray.union’ & ‘update +
FieldArray.remove’:

Notice what is going on here. To ‘update’ the message, we are actually just
deleting the old value, then adding a new one- a clever way to ‘edit’
something.

Getting Data From the Database:

Now that we have data in the database, we can retrieve it. I saved getting data
for last because it is the most cumbersome and complex data operation to
implement.

Fortunately, there is really only one method we need to know when getting data:
‘get’.

Here is what we need to do to retrieve our data:

We first create an empty ArrayList to hold the data we will get from our database
We then query the database for the data we need
Since the data is returned to us as a Map, we need to convert it to our User model class so we can easily retrieve the data; to do this, we use the ‘toObject’ method from the DocumentSnapshot class
Once our data is converted to a User object, we can get the data we need; in this case, we are retrieving the list of personal messages
Finally, we return the list of messages to show them in the UI

Whew, I know that was a lot, but you made it!

Now you can truly be a (Fire)base User. 🔥

If you learned something from this article, *please consider buying me a
coffee.*

Hi, I’m Ash 👋🏼 Let’s connect!

🌐 ashtonjones.dev | 👥
@TJgrapes | ✉️
ashtonjonesdev@gmail.com

👨‍💻 Google Certified Android
Engineer |
✍ Writer |
🧘‍♂️ Stoic && Meditator

📱 Need an app built? Contact me here.

Introducing: Torch

Ashton Jones — Mon, 18 May 2020 19:07:22 +0000

A simple app that helps you discover and stay focused on what is most important to you

Torch is an app I built that helps you stay focused on your primary goal, focus, or purpose in life.

Torch allows you to:

✅ Discover your torch with guiding questions
✅ Stay focused on your torch by limiting you to only being able to set one goal at a time
✅ Check-in daily to help you reflect if your actions are aligned with your goal
✅ Change your torch at any time
✅ See yourself progress by climbing up a mountain the more days you are aligned

In this post, I will explain the motivation behind the app and showcase its features. If you want to download it and use it while reading the article, you can download it here.

🚀 Motivation:

I personally like to build things I think are useful.

I had three main reasons to build this app:

Create a simple, focused "goal tracking" app:: I am someone who likes to focus on one major thing in my life at a time and give it 100% of my attention. There are plenty of goal-tracking apps, but they allow you to set multiple goals, which can be distract you from your most important. I was intentional when designing Torch to only allow one, overarching goal to be set at one time. I put goal tracking in quotes, because it focuses on progressing each day rather than achieving a certain outcome.

Build my portfolio: I am building my professional portfolio to showcase my Android development skills. Although it is a relatively small application, it shows I am able to develop entire Android apps on my own from the initial idea to publishing the completed app, implementing the UI, functionalities, logic, app architecture, database, and user experience along the way.

Practice my skills: I wanted to build another Android app that uses Android Architecture Components and MVVM architecture in conjunction with Firebase Cloud Firestore as the database to improve my skills. I learned more about working with data in Cloud Firestore, nested Navigation flows, and building an app using clean architecture.

🕹 Features

The app helps you discover your "torch"- the primary goal, focus, or purpose that is guiding you in life, and stay focused by aligning your actions with it.

Introduction

When the app is first opened, you will be guided through a series of questions to help you discover your torch:

At the end, you will have answered three questions that should help you discover you ultimate goal and set your torch:

Torch:

Once you set your torch, it will be displayed front and center when you open the app, which helps you stay focused. You can change your torch at any time, but you can only have one torch set at a time.

Progress:

You will have a daily notification that asks you if your actions were aligned with your torch.

As you continue to record your small wins each day, you will gradually climb up the mountain. Will you (align yourself for 100 days) reach the top?

Discover:

The discover section displays answers to all of the discovery questions you answered when you first opened the app, your current torch, and asks if there is a misalignment.

If you feel there is a misalignment or need to change your torch, you can choose 'yes' to re-evaluate and change your answers.

🖥 Technical Brief:

I built the app natively with Java, using Android Architecture Components (LiveData View Model, View Binding, and Navigation), MVVM architecture, Material Design, and Firebase Cloud Firestore. The app follows Google's recommended Single-Activity architecture and uses Navigation best practices to navigate through the app.

I used the following technologies to build the app:

MVVM Architecture
Java
Android SDK
ViewModel
LiveData
View Binding
Navigation Component
Firebase Authentication
Cloud Firestore
Material Design

If you are interested in the code for the app, you can find it here.

🙌🏼 Appreciation:

I want to thank my friend Jonathan Batchelor for his interest in the app and suggestions for the purpose discovery questions. Jonathan is really passionate about helping people find their purpose and is aspiring to build a mentorship program designed to empower youth in underprivileged communities through harnessing passion and purpose.

Check It Out:

You can download the app here.

I am always looking to improve it, so please feel free to send me feedback and leave a review on Google Play. I hope you enjoy using Reply! 😃

📱 Torch app

⌨️ Torch code

I'm going to use this awesome app called Reply to easily share Torch with all of my friends and post it on all my social platforms from mobile!

Check out my other apps.

I'm looking for Android development opportunities; contact me at ashtonjonesdev@gmail.com if you are looking for an Android developer or know of available positions!

Hi, I'm Ash 👋🏼 Let's connect!
🌐 ashtonjones.dev|👥 @tjgrapes |✉️ ashtonjonesdev@gmail.com
👨‍💻 Google Certified Android Engineer |
✍ Writer |
🧘‍♂️ Stoic && Meditator

Introducing: Reply

Ashton Jones — Sat, 16 May 2020 17:35:46 +0000

An Android app to easily send your own predefined messages through any platform.

Reply is an app I built which makes it easy to send your own predefined messages through any platform.

It allows you to:

✅ Create and store your own message templates
✅ Easily send your messages through any platform
✅ Organize your messages into categories
✅ Add, edit, and delete your messages
✅ Preview and edit your message before you send it
✅ Set a timer to remind you to reply with one of your messages at a later time

In this post, I will be explaining its features, use cases, and tips to help you get the most out of it.
If you want to download it and use it while reading the article, you can find it here.

🚀 Motivation:

I personally like to build things I think are useful.
I had three main reasons to build this app:

Solve a problem: I was tired of repeatedly typing the same message over and over and having to copy and paste the same message to each platform I wanted to post it to. And I know there are other people who feel the same. That frustration was a core motivator to create Reply, which makes it easy to send messages you frequently send through any platform.

Learn something new: I wanted to learn how to build an Android app that uses Android Architecture Components and MVVM architecture in conjunction with Firebase Cloud Firestore as the database. This was my first experience implementing a remote database in an Android application and using Firebase products. In addition to learning how to implement Cloud Firestore with Architecture Components and MVVM architecture, I learned how to authenticate users with Firebase, sign in and sign out users, implement complex Navigation flows using the Navigation component, and how to publish an app to the Google Play Store.

🕹 Features

I wanted to make Reply easy to use and as customizable as possible.

Add Messages

Adding messages is the core of the app! Add messages you frequently send or post to multiple platforms. You can edit or delete the messages at any time.

Preview Messages

Previewing a message is useful to remind yourself what the exact message is and if you need to edit it before sending.

Send Messages

The beauty of Reply is the flexibility to send your message through any platform you want (e.g. any messaging app, social media, email, etc.). Once you select where or who you are sending your message to, you still can edit it before sending it. The message is there for you, but can still be customized before posting or sending it.

Respond Later
If you need to send a message, but don't want to do it immediately, you can use the reply later feature to remind you to respond with one of your messages at a later time.

📱Use Cases:

Reply is most useful for people who frequently send identical messages through different or multiple platforms.

Commonly Sent Messages

Do you find yourself sending the same message repeatedly, composing it each time? If you have a message you send often, add it as a message to one of your categories to easily send it just by tapping it.

Conserve Mental Energy

Sometimes we just spend way too much time overthinking a message we need to send to someone. Especially if we are working, we want to minimize the disruption of our workflow. If you create a solid template to use, you will spend less brain power thinking of how to phrase your message. Remember, you can always edit your message before sending it to better fit the context and situation. Even better, you can use the respond later feature to remind you to reply at a later time with one of your messages.

Time-Saving

Typing and composing messages on phones is tedious and time-consuming. Utilizing this app can save you time, especially if you have multiple identical messages you frequently send.

Mass Texting

Mass texting is sending the same message to multiple people with individual chats for each person. Want to check-in monthly with your friends? Instead of copying and pasting the same message across your platforms and contacts, use a message template to effortlessly send out your message.

👉🏼 Pro Tips:

Here are some tips for you to get the most benefit out of Reply:

Think of all the identical, similar, or frequent messages you send and create templates for them (i.e. a message to introduce yourself).

Think of the processes where you repeat a certain series of messages and create a series of messages to have reusable templates (i.e. applying to jobs).

If you want to mass text (send the same message to multiple people using individual chats), go to your default messaging app and set the "Group conversation" setting to off. If you want to group text (send the same message to multiple people in one chat) leave this setting on.

Create groups in your contacts app to send a message to everyone in the group without having to select each person.

🖥 Technical Brief:

This is for the nerds (and recruiters).
I built the app natively with Java, using Android Architecture Components (LiveData View Model, View Binding, and Navigation), MVVM architecture, Material Design, and Firebase Cloud Firestore. The app follows Google's recommended Single-Activity architecture and uses Navigation best practices to navigate through the app.
I used the following technologies to build the app:

MVVM Architecture
Java
Android SDK
ViewModel
LiveData
View Binding
Navigation Component
Firebase Authentication
Cloud Firestore
Material Design

If you are interested in the code for the app, you can find it here.

🙌🏼 Recognition:

I want to thank the following people for enabling me to develop this app:
Elijah Dangerfield for his tutorial to implementing an Android app using MVVM with Firebase in Kotlin
Evana Margain for her series on connecting an Android app with Cloud Firestore in Java
Riyaz Ahamed for making implementing RecyclerView much easier and cleaner
Roberto Leinardi for recreating the awesome FAB from Google Inbox
Gaëlle Minisini for providing fantastic README examples
Thanks to your guides, libraries, and knowledge, I was able to build Reply.

Check It Out:

You can download the app here.
I am always looking to improve it, so please feel free to send me feedback and leave a review on Google Play. I hope you enjoy using Reply! 😃

📱 Reply app
⌨️ Reply code

I'm looking for Android development opportunities; contact me at ashtonjonesdev@gmail.com if you are looking for an Android developer or know of available positions!

Hi, I'm Ash 👋🏼 Let's connect!
🌐 ashtonjones.dev|👥 @tjgrapes |✉️ ashtonjonesdev@gmail.com
👨‍💻 Google Certified Android Engineer |
✍ Writer |
🧘‍♂️ Stoic && Meditator