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.
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.
Yeoman (optional): Web scaffolding tool for constructing web apps.
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.1bower install angularfire --save-dev
- 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
".read":"auth != null",
".read":"auth != null && auth.uid == $uid",
".write":"auth != null && auth.uid == $uid"
".read": "auth != null && root.child('channels').child($id).val().contains(auth.uid)",
".write": "auth != null && root.child('channels').child($id).val().contains(auth.uid)"
".read":"auth != null",
".read":"auth != null && data.val().contains(auth.uid)",
".write":"auth != null"
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.