ChatRo–Instant Messaging Application

I always create tutorials for this blog. This time I want to break the ice and share something else, and I guess I’m going to continue writing these types of post whenever I have a personal project or maybe a formal project if the product owner allows me to write something about it.

In this post I’m going to share about ChatRo, a web application that allows for team collaboration through instant messaging, file sharing, and file management.

 

Login

Everybody knows about this one. No need to trouble you from reading.

image

 

Registration

This is where users invited via email can register. After registering the user will automatically be added into the group as long as the link on the email is the one that is used to get into the application.

image

 

Instant Messaging

This is where users that belong to the same group can interact with each other through a chat box. Documents, pictures, audio and video files can also be shared to the users currently on the session through this form. Any user who are on the current session can end the session, not just the user who created the session. Every user can only participate in one session at a time.

image

Creating a new session is done by clicking on create session link and specifying the group and session name. The group name is an auto-suggest field which fetches all of the groups to which the current user belongs.

image

 

Group Management

This is where users can create new groups or manage existing groups.

image

 

Group Invite

Anyone can be invited into a group via email.

image

Existing members of other groups can also be invited. This is an auto-suggest text field that fetches all the users of the chatRo.

image

The invited user isn’t automatically added to the group. He has to accept or decline the request. Either way, the notification will stay on the home tab until the user decides to decline or accept the invite.

image

New groups can also be created.

image

 

 File Sharing

This can be used to share files to the other members of a session. In the screenshot below I’m uploading an Ebook from Makeuseof.

image

After the file has finished uploading, a message will automatically be created pointing out to the file that has been uploaded.

image

Clicking on the magnifying glass icon will preview the file. As of the time of writing of this article there’s still no preview for the front page of a pdf file, its just a link that the user can click to view the pdf file on the browsers built-in reader. But if there’s no built-in reader, it will just download the file into the local disk.

image

If the uploaded file is images it will be previewed with a download link on top of the image preview.

image

There’s also a preview for excel files.

image

Audio files can also be played as well, brought to you by html5 <audio> tag.

image

Lastly, video files can also be viewed brought to you by html5 <video> tag.

image

Yes it’s good that were able to play mp3, mp4 and other html5 compatible files but this magic still doesn’t work on some browsers. As of the time of writing of this article, I only managed to make it work for Chrome.

 

Archive

Once a session is ended it goes into the archives. This is simply a box where you can view the conversations in previous sessions. It’s only used for viewing previous sessions so there isn’t actually a link for the files that are mentioned in the conversation. These files can be viewed in the files tab.

image

 

Files

There’s also a separate tab for viewing all of the files that were uploaded. This disregards the session to which the file was uploaded. It is simply a box wherein you can search for previously uploaded files of the people that are in your group.

image

 

Conclusion

I guess that’s it, if you want to test, contribute, fork this software then you could visit its GitHub page. All the files that you need are already in there, you could also go through the README file if you want to learn more about this application.

ChatRo

There’s still a lot of bugs and a lot of room for improvement and additional features, I’d really appreciate it if someone could contribute to this project. If you have some questions regarding this project feel free to ask them on the comments section. Thanks for reading!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s