TUTORIALS

How to Build a 1-on-1 Angular Chat App

Gospel Darlington

View GitHub Repo
May 18, 2021
1-On-1 Chat With Angular
A One-On-One Chat With Angular

Has it been a dream of yours to build a chat app? If your answer is yes then you are in luck to fulfill that dream. Being a developer in a world where that is getting ready to colonize other planets with no experience in building chat systems is foul play. Luckily, the CometChat SDK has made the process of integrating communication features in your app a lot simpler. Ride along with me as I guide you into fulfilling your age-old dream.

Prerequisites

To follow this tutorial, you must have at least a rudimentary understanding of the operations of the Angular framework. This will help you to speedily comprehend this educational material.

Installing The App Dependencies

First, you need to have NodeJs installed on your machine, you can go to the website to do that.

Second, you need to also have the Angular-CLI installed on your computer using the command below.
npm install -g @angular/cli

Next, create a new project with the name one-on-one-chat-app.
ng new one-on-one-chat-app

The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

Last, install these essential dependencies for our project using the command below.
ng add @angular/fire

Now that we're done with the installations, let's move on to building our one-on-one-chat-app solution.

Installing CometChat SDK

  1. Head to CometChat's developer dashboard to create an account.
  2. From the dashboard, add a new app called "one-on-one-chat-app".
  3. Select this newly added app from the list.
  4. From the Quick Start copy the APP_ID, REGION and AUTH_KEY. These will be used later.
  5. Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
  6. Get the Angular CLI installed on your machine by entering this command on your terminal. npm install -g @angular/cli
  7. Open the "environment.ts" file in the project.
  8. Import and inject your secret keys in the app.config.ts file containing your CometChat and Firebase below on the next heading.
  9. Copy the same settings into the "environment.prod.ts" as well.
  10. Run the following command to install the CometChat SDK.
  11. Make sure to exclude app.config.ts in your gitIgnore file from being exposed online.
  12. Run the below code on the terminal -
    npm install @cometchat-pro/chat@2.3.0 --save

The Environment Variables

The setup below spells out the format for configuring the environment.ts files for this project.

The App Config File

The setup below shows how to configure the app.config.ts file for proper usage in our project. Make sure you create this file in the src directory before pasting in the codes below.

Setting Up CometChat UI Kit

  1. Visit the CometChat Angular UI Kit page
  2. Download the Kit by clicking on the first purple button with “Angular UI Kit”.
  3. Extract the folder within the downloaded zipped file and rename to "cometchat-pro-angular-ui-kit”.
  4. Copy or cut the folder to your src directory within your project.
  5. Head on to angular.json file and paste the following code in the styles block. "node_modules/@ctrl/ngx-emoji-mart/picker.css", "src/cometchat-pro-angular-ui-kit/CometChatWorkspace/projects/angular-chat-ui-kit/src/css/styles.scss", "src/styles.css"
  1. Head to console and run this code below. npm i @ctrl/ngx-emoji-mart@1.0.6

Nice, that’s all we need for now, let’s proceed to other settings.

Setting Up Firebase Project

Head to Firebase create a new project and activate the email and password authentication service. This is how you do it.

To begin using Firebase, you’ll need a Gmail account. Head over to Firebase and create a new project.

Firebase Console Create Project
Firebase Console Create Project

Firebase provides support for authentication using different providers. For example Social Auth, phone numbers as well as the standard email and password method. Since we’ll be using the email and password authentication method in this tutorial, we need to enable this method for the project we created in Firebase, as it is by default disabled.

Under the authentication tab for your project, click the sign-in method and you should see a list of providers Firebase currently supports.

Firebase Authentication Options
Firebase Authentication Options

Next, click the edit icon on the email/password provider and enable it.

Firebase Enabling Authentication
Firebase Enabling Authentication


Next, you need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick web as the platform.

1-on-1 angular chat app project firebase
One-on-One-Chat-App Project Page

Once you’re done registering the application, you’ll be presented with a screen containing your application credentials. Take note of the second script tag as we’ll be using it shortly in our Angular application.
Congratulations, now that you're done with the installations, let's do some configurations.

Setting Up The Router

The app-routing.module.ts file has all the routes available in our app along with their security clearance.

Project Structure

The image below reveals the project structure. Make sure you see the folder arrangement before proceeding.

Project Structure of angular chat app
Project Structure

Now let's make the rest of the project components as seen in the image above.

The App Component

The following code is a wrapper around our app within the angular-router enabling quick navigation. For each route, this component navigates our app to the appropriate URL.

The App Module

Paste the codes in your app.module.ts file, this is a very important file that bundles all the components we will be using for our project.

The Registration Component

The Registration Component of angular chat app
The Registration Component

This component combines the power of firebase auth-service and CometChat such that whenever a new user signs up for our app, the user’s details are captured by firebase and also registered on our CometChat account. The code below explains it in detail.

So, whenever a user registers in our app, automatically, he or she is simultaneously registered on our CometChat account. Here is the full code that explains it all.

Next, we’ll jump into the Login component and its underlining functionalities.

The Login Component

The Login Component of angular chat app
The Login Component

The Login component follows the characteristics of the Registration component. For example, if a user named Sarah registered on our app, she is then navigated to the login page to sign in. Because CometChat also has her details, she will also be signed in by CometChat the moment she logs into our app. The piece of code below demonstrates this process better.

Once a user is successfully logged in, he is then redirected to the home page. The route-guard within the app.routing-module.ts ensures that only authenticated users are permitted to access the home page. The following scripts below describes the overall operations of the login component.

The Profile Component

The Profile Component of angular chat app
The Profile Component

The profile component is charged with the responsibility of updating user data which will reflect across our app. One of the primary tasks of this component is to change a user's profile.

Even more, our profile component also has one last surprise for us, it can change the theming of our app. This improves the aesthetics of our app and gives the user more options on their profile preference.

In the registration component, once a user signs up, we generated a placeholder avatar for him using the initial of his name. The profile component allows a user to update their avatar to their preferred choice. Here is the full code performing this operation.

The Chat Component

The Chat Component of angular chat app
The Chat Component

The chat component is the main meat of this application as It embodies the CometChat UI Kit. Other than the artistic design it carries and the centering of the chat interface in the middle of the screen, it leverages the CSS grid functionality to properly center our chat on the page.

Furthermore, it displays the UI Kit built by the CometChat development team. It has all the components you will need to put together a chat interface in a few minutes. I tell you, this UI Kit makes the development process almost painless.

Just follow the script below and you'll be mind-blown about the power of this kit.

Once you are done pasting the codes as directed, save and run the command below to start your application -

ng serve --open

After a few seconds of building in the terminal, your app should be up and running.

Congratulations, you just built a angular chat app, great job!!!

Conclusion

In conclusion, this tutorial has educated you with the knowledge needed to build a 1-on-1 angular chat application using CometChat's SDK & UI Kit. You've learned how to use the CometChat SDK for creating and updating users via login, registration, and profile components. You've learned how to integrate the CometChat UI Kit in your app, bringing out the full beauty of the chat app.

Now it's time you start developing your 1-on-1 chat apps using the knowledge you've obtained from this lesson. Chat integration has just gotten better, why reinvent the wheel, jump in and start building more app. Log in to CometChat's developer dashboard to start building your chat app for free.


About Author

Gospel Darlington is a remote full-stack web developer, prolific in Frontend and API development. He takes a huge interest in the development of high-grade and responsive web applications. He is currently exploring new techniques for improving progressive web applications (PWA). Gospel Darlington currently works as a freelancer and spends his free time coaching young people on how to become successful in life. His hobbies include inventing new recipes, book writing, songwriting, and singing.

What Is CometChat?

The most robust suite of cloud-hosted text, voice and video solutions on the market. CometChat seamlessly integrates onto websites and apps quickly and securely, powering digital communities across the globe.

Related Posts

No items found.