Case Study: Creating a chat room with Angular

Introduction

The goal of this project was to create an application that sends and receives messages in real time. This was written using the Angular framework, made pretty with UI Bootstrap and uses a Firebase database for storage.

Why Angular?

Angular is a JavaScript framework for building primarily CRUD (create, read, update, delete) applications. Angular is ideal for single-page applications (SPAs) which means the page doesn't have to refresh every time you click on something (think Gmail). 

It can be easy to confuse a framework with a library so let's quickly look at the differences.

A library, like jQuery, is a collection of pre-written code that you link to. This code simplifies common tasks and functions. 

A framework, such as Angular, provides the structure of an application. The framework determines how the application works in general and the code we write fills in the details.

Milestones

1) The Setup

The first step was setting up the development environment. This included installing NodeJS to locally serve up the application. Bloc helps make the configuration process a bit easier by providing a starter project repository. After pulling this down and renaming it, it was pushed back up to GitHub. 

From here I added Angular, UI-Router and AngularFire to the project by including it in the body of index.html. After this a controller and template were made so I could then test the application using npm start then viewing it on the local host. 

That completed the initial configuration, allowing me to push it up to GitHub and start building out the application. 

2) As a user, I want to see a list of available chat rooms

The goal here was to make it so a user can see a list of available chat rooms. I started off by creating a handful of "fake" rooms in firebase so there was something to query and display on the site. 

After this, I created a Room factory in Angular that defines all Room-related API queries. Next, I had to create a controller to display the queried rooms in the view. The controller was injected with the Room service then I displayed the rooms in the template using ng-repeat. 

3) As a user, I want to create chat rooms    

In this checkpoint, I started off by creating room objects with AngularFire. From here UI Bootstrap's service was injected to allow for the easy creation of a simple modal form to submit new room's data using ngSubmit. 

The Bootstrap library was included in the index.html, the proper dependencies were injected and the methods were added. At this point, I was able to view the array of rooms update in real time. 

4) As a user, I want to see a list of messages in each chat room

The first step in this checkpoint was creating a container to display an individual room's content. This was done by styling a container for holding a list of messages to the right of the list of available chat rooms. The active room is stored in a $scope object in the main controller to allow the title of the active room to change every time you visit a click one.  

Next I had to associate messages with a room. This was done by using a reference to the parent data (the room) in the child data from Firebase. I created a few messages manually to test querying messages. 

From here I created a message factory in angular that defined all messaged related API queries. I used the child() method on the $firebaseArray service to query messages. Since messages depend on the ID of a room I had to pass in an argument into the getByRoomId method that contains the roomId associated with a rooms message. 

5) As a user, I want to set my username to display in chat rooms

The challenge now was to efficiently store a username. A common way to store a string in a browser is using cookies. Angular has an external module to do this (ngCookies). 

The next step was requiring each user to enter a username when they visit Bloc Chat for the first time. I created an angular module using the .run() block to make sure that the username is set when the app is initialized. This was done by injecting the $cookies service into the run block's dependencies to check for the presence of a cookie holding the username. 

If there isn't a username present I made it so another UI Bootstrap modal pops up requiring a user to enter one. No cancel option was provided so the user has to create one to proceed. 

6) As a user, I want to send messages associated with my username in a chat room

Sending messages is fun but it would be useless if we didn't know who the messages were coming from. To make this happen I added a method to my Message factory called send that took a message object as an argument and submitted it to the Firebase server. 

To make sure the messages that a user sends are associated with their username I used the username property and populated it by injecting the $cookies service and referencing the current user object on it. 

Conclusion

This was a great introduction to Angular. I feel like I have a good high-level understanding of the various components that make it work but not enough knowledge to build out an app from scratch. I'm excited to move onto studying the Ruby on Rails framework where I'll be diving much deeper into the details. 
 

Utility

I'm often tempted to spend a large sum of money to upgrade to a new fancy truck. Something with more power, better handling and better features than my debt free, low maintenance 09 Jeep Wrangler.

The daydream drags on for a while and then reality starts to set in.

Utility is defined as the state of being useful, profitable, or beneficial. So often temptation lures us into purchases that have little to no utilitarian benefit.

Vehicles serve different purposes for different people but for me I want something that is reliable, fun to drive and ascetically appealing. My debt free, clunky jeep does exactly that. I could spend $30,000 more on a beautiful new truck but in the end it brings marginal utility.

Stoic philosophy encourages people to think hard about what they fear most and then attempt to live that situation. When you do this you find out that what you feared most isn't that bad.

Imagine an economic collapse where you lose your job and your house. That would be awful, right? I thought about this recently and most likely I would move in with family members, we would share resources, and get by with the same level of happiness if not more due to greater personal connection.

We spend a lot of money to live in isolation but if we had to we could spend much less, live as a group and reap even greater utility from the situation.

Make conscious choices that add value to your life and enjoy the dividends for years to come.

Lizard Brain and Herd Mentality

"Outside, this time, there were cops, rushing over with guns and taking up positions. ... Like a lot of liberals, I’d spent the last couple of years more or less loathing the police, after a lifetime of feeling suspicious and uncomfortable; suddenly, I felt this desperate, yearning love for them. This is when you want the police; this is when you want to love the police."


I'm in awe that 99% of the time society is stable and harmonious when you consider how little it takes to trigger our lizard brain reaction and herd mentality.

We evolved for hundreds of thousands of years being afraid of the noise that lies just behind the fire light...the threat that is close which you cannot see.

It's hard to create a plan of attack when you don't know what you're fighting.

Case in point... http://nymag.com/daily/intelligencer/2016/08/the-terrifying-jfk-airport-shooting-that-wasnt.html

Tobias Blake

Cigarette burns,

I'll be here. 

Lock me up

in this jail. 

Show me love

glimpse of hope. 

Freedom reigns  

exploding night. 

Joyful days  

sunshine breeze.  

Shaken bones  

troubled heart.  

Pass it shall.  

I'll be here.  

 

Setting Expectations

Setting expectations when entering any new relationship can help prevent future disagreements.

This is true whether you're hiring a new employee or falling in love.

Clear expectations allow you to live without ambiguity.

They also have a unique way of becoming a self fulfilling prophecy.

Getting Pushed Around

Values, respect and kindness should be pre-requisites in business but sadly they are not.

The majority of people that you deal with will be kind hearted and well intentioned. But others hide behind the veil of attorneys in an attempt to extract every penny out of a situation.

When the time comes you have to stand up for what is right.

Systems

We (I) can come up with wonderful excuses just before bed and right after the alarm goes off.

Success comes from creating systems instead of relying on will power.

Set up incentives so you can't fail. Create stakes to hold you accountable.

Life is a practice. Enjoy the ride.

Practice

Writing is one of the best way to sort out your thoughts. 

In May of 2015 I started writing a weekly newsletter to an email list of about 12,000 LaBonne's customers. This has been one of the most impactful things that I have done since coming back to the company. 

Having a weekly writing deadline has made me a better thinker and it has also improved my mental agility. 

Seth Godin has been an inspiration to me for many years. He often challenges people to take the plunge and write a blog post daily. 

What stands in the way, becomes the way. 

See you tomorrow.

 

How to stop complaining

The economy sucks, I don't get paid enough, my girlfriend doesn't talk to me, I hate when it snows, I can't lose any weight, there isn't enough time in the day...thanks Obama. 

These complaints sound familiar, right? 

Let's get real for a second...a complaint is a frustrated wish that you are not willing to do anything about. According to Neil Strauss, these frustrated wishes are a signal that you are managing your life poorly. This includes all negative talk about others and yourself. 

There are two types of complaints. Type 1 are complaints that you have control over. An example of this is "I can't lose any weight". Type 2 are complaints that are outside of your control, for example: "I hate when it snows". 

We all complain, but the reality is that complaints do nothing to serve us. They are a disease that unconsciously infects everyone within earshot. Complaints are easy, anyone can toss a negative remark into the mix or join in on a complainy conversation. Complaints are also lazy. They are an admission to the fact that you are not willing to take responsibility for your own thoughts and actions. 

how to stop complaining

The diagram above is a simple flow chart that looks at the complaint process. Are you feeling the desire to complain? Is there any action you can take to eliminate the "frustrated wish" that you are feeling? If yes, great! Now you don't have to complain because you are working towards fixing the frustrated wish. If no, this is still great because you know that it's outside of your control and a waste of your time and mental energy to complain about it. 

So now you know how bad complaints are, but how to we go about fixing the problem? 

Put your money where your mouth is: 30 day challenge

Every time you complain you have to give the person you are closest to $1. This includes complaints about yourself (you are your own worst enemy), complaints about others and even complaints about things completely outside of your control (like the weather). For the next 30 days keep a handful of singles in your pocket because each time you go to complain you will be giving your hard earned cash away. 

I did this a couple years ago and it had a profound effect on me. Very quickly I realized how often I would complain, even about pointless little things. I think I gave away around $7 all within the first week but after that I was cured. I started to notice a complaint bubbling up but would catch and act on it before it would surface. I simply became more mindful about my own thoughts which led to real life actions that would benefit me. 

So, are you up for the challenge? If so let me know in the comments and I'll reach out at some point to hold you accountable. 

Onward and upward,

Rob