Call Us Today! 1.508.596.8735|info@routerabbit.com

CareChat: Build a chat app in minutes!

CareChat: Build a chat app in minutes!

CareChat: Build a chat app in minutes!

In this post, we will show you how to build a simple chat app quickly with Firebase and AngularJS.

What is CareChat?
It’s a communication channel suited for customer service type use case — allows Customer Service representative to chat with Customers (but Customers can’t talk among themselves). The demo app has two roles, User and Administrator. User represents Customer while Admin represents Customer Service Representative.

Technology Stack

AngularJS: Is an awesome open-source JavaScript framework to create Single Page Application. It does a great job in maintaining client-side scripts in a structured manner and it also reduces the load on server thereby improving the user experience.

Firebase: Firebase powers app’s back-end, including data storage, user authentication, static hosting, and more. Firebase frees up the developer to focus on creating extraordinary user experiences as Firebase does the heavy lifting on the back-end.

Before proceeding further, take a look at a simple chat app which can be used in different use cases such as Customer Care or for Doctor-Patient communication.

Demo: CareChat
Source Code: Github

Libraries Required:

Yeoman (optional): Web scaffolding tool for constructing web apps.
AngularJS: JavaScript framework – can be used from CDN or downloaded and added to project.
Firebase Javascript: Javascript API – can be used from CDN or downloaded and added to project.
AngularFire Plugin: AngularJS binding for Firebase – add it as bower dependency

  • Create Yeoman App based on Angular generator & add Firebase and AngularFire bower component
    After creating Yeoman application with “yo angular care-chat” add Firebase and AngularFire as JS dependencies.
  • Set up Firebase app environment at Firebase.com
    Login to Firebase.com site with valid credential & create an APP. Enable authentication from “Login & Auth” tab & check “Enable Email & Password Authentication” checkbox.Configure the Firebase rules so that customers can’t see each other butCustomer Service representative can. Also,Customer Service representative is the only one who should be able to talk to various customers. Firebase rules are at-most important configuration for security requirement. To configure the rules, move to manage section and navigate to “Security & Rules” tab.
    Copy below JSON and paste them in Firebase

For more information on Firebase rules, visit https://www.firebase.com/docs/security/guide/

  • AngularJS code to interact with Firebase server Inject “firebase” as Angular dependency in your app.js file — your app.js file should contain this code. Create firebase object JavaScript object in Application Controller to be used across the application. You can even add this object in rootScope. To register a new user To sign in user To update existing user details To test the app, register and login with multiple users (in different browsers). After login, you will receive some user data from the server containing “uid” (uid created by Firebase database server to maintain user identity). Need to add some details in users schema like name, email, phone, age, address, etc. Firebase saves records in JSON objects. It also provides a unique key to each record.

    Create channels to start chat sessions between users. A channel indicates a chat session (In our app patients or customers can’t chat with each other while doctors or customer care representative can chat with everyone). To create channel we have created a schema of channel collection. i.e our channel consist of combination of doctor uid and user uid.

    After login, fetch channels list & chats in that channel. To add a chat message we will use $add method given inside the $scope.chats prototype returned from Firebase server. Add method append data to array of chats. Please have look at running Demo at https://care-chat.firebaseapp.com
2017-05-22T13:09:53+00:00
  • Nice app! Thank you!

  • I am an African

    This is great, possible if I can register users, on my own front end then have them login with my own front end then we have the chat app inside the password protected dashboard?

    • Yes correct. It will be all private chat without modifying any server side code.

      • I am an African

        Thanks for the reply.. so if I edit the code, will it be possible to make the admin be the only one that can start a chat to a user and users, can not start chat they just reply when the admin send them messages.

        • You need to modify the firebase rules also for that. Happy coding.