My first chatting program

Today (April 26) we finished the two-day sprint, making a chatting program with Firebase. On top of everything, I would like to say thank you to my coding partner, Kevin Park who has worked with me with patience to come up with an idea and the final prototype. Back-end was a big hurdle for me until this moment and I finally felt that I did something with server-side.

The first impression with Firebase was that it was structured very intuitively. Also it had easy-to-follow tutorials and API documentations that I could actually understand. A few months ago, when I tried learning Django, I found myself just lost in the middle of technical jargons in its official website. Since then, I lost my appetite for Back-end but now I want to try again thanks to this experience. Also I realized how convenient it is to see new messages appearing without refreshing.

We also learned about XSS attacks (and how giggling we could be when messing up with others’ web front views.) I could also figure out how “bower” works in terms of its installing dependencies (= all the files that should be installed in client-side computers in order to run the program) and how useful it could be in software development in the real field. It was interesting to see that it uses system-wide dependencies that each dependency (file) is not shared among other applications. Mostly, this is done for the version control: one program might require lower version of dependency than others.

For the remainder, I will summarize the key concepts in Bower:

Bower does not follow my intuition:

When “bower install jquery” is typed, my intuition was that it copies jquery.js or jquery.min.js file from the bower server and paste into my local “bower_components” folder. However, when I open a folder, it shows a list of seemingly-unnecessary files altogether.

‘All I wanted is just plain jquery.js file…’

It turned out that it installs all materials that have been packaged into bower server. Simply, when a programmer uploads jQuery on bower server, it has to be divided into certain segments so that bower can easily handle them. “bower install jquery” downloads these file pieces of jQuery on my local server (computer). At this point, I can assume that all other files except jquery.min.js and jquery.js are just there for their purpose that I do not have to worry about.

jquery.min.js is among many files under bower_components/jquery folder

But above all, this whole process would not be necessary if I use CDN links inside index.html file, isn’t it? Then why people do this? I guess at my level, this might seem right, but as a project becomes more complicated, this kind of package manager becomes essential.

2. .bowererrc file:

The core function of this file is to tell the bower where to install dependencies. Basically, this is written by the developer who uploads his project on bower and tell the users’ (including himself) computers where to install the files that he/she wants to be downloaded. On the root directory of your project file, make a file named .bowererrc and insert this line:

So it will install all files under your_root_folder/public/bower_components

3. Lastly, there is bower.json file:

This is where a developer defines his project dependencies. Simply, he lists all the files required for his program to run.

Look at “dependences” in this JSON file. Following numbers are versions

You might be wondering how all the other parts (name, version, homepage…) are created. I guess this is not automatically created. It’s manually typed(?).

— save: the file being installed now will be added to bower.json file. — save-dev is only for development version of the project. Jasmine is a javascript testing file that will be used for debugging pupose. In other words, it is not required to be installed on normal users’ computers.

After all of this process, the developer uploads his bower.json file along with other files on github. When a user clones this project and type bower install, he/she can download all necessary files under the folder name indicated in .bowererrc file. If you are a developer who want to link your project into bower system, you should “init bower” and create .bowererrc yourself and create bower.json manually or by using — save tag.

One more thing! For the design for our application, we used Bootstrap template that we could find on the web. At first, I did not like the idea of using an existing template for our app. That is due to my tendency to start from scratch, especially when practicing. However, I thought making a balance between coding partners is the essence of peer programming, and followed his suggestion. It turned out that, because we used Bootstrap for our prototype, we could go much further than we expected. This was the first time to re-consider about using a template for the design. Well, in fact, I already owe very much to the existing sources. I took a big advantage of Material Design when designing an android app.

p.s. This was my partner (QJin Cho) and me showcasing our dance party app. It was difficult to explain about how our code works at the spot, especially without good comments and variable names. Will keep honing on that skill.

from Code States Facebook Page