- Student: Ahmed Ibrahim
- Github: @ahmedibrahim404
- LinkedIn: Ahmed Ibrahim
- Organisation: Rocket.Chat
- Mentors: Jean Brito, Gabriel Casals
Rocket.Chat Standalone Desktop Messaging cross-platforms Applet
All the work done can be found here on this Repository Google Summer of Code Project could be found here
The project aims at helping users to achieve a better experience while chatting by focusing only at featuring what they need to only CHAT.
The Rocket.Chat client is a big window that has many features which won't be used by a user who just wants to chat, so our goal is to feature only important features to chat. What we offer for this is creating a simpler desktop application where there is a simple channels list on a little window and each chat will open in another separated window, making it possible to talk with people without opening a big window, and therefore making the usage of Rocket.chat more seamless.
The application will be deployable on all platforms supported by Electron - Windows, Mac, Linux, and more
This project makes extensive use of Rocket.Chat's In-App Chat APIs (REST APIs) and the JavaScript SDK that Rocket.Chat offers.
- ElectronJS: For the development of desktop GUI applications
- ReactJS: For frontend UI & Development
Within the community-bonding period, I started to dig deeper into Rocket.Chat APIs and how to use them properly and make a very quick PoC of how this project will look like to make the work clear from begin.
PR #1
- Initialized the application using ElectronJs, ReactJS, and Electron-Forge
- Implemented a code-fixed login with a
.envfile
PR #2
- Implemented the Channels List UI and functionalities
- Add interfaces for User and Room
- Integrate Routing System with the application
PR #3
- Implement Chat Window pop-up when clicked over on the channels list by triggering an
Electron IPCEvent - Retrieve all the Room Info into the Chat Window e.g. (Username, Avatar Link, ...etc)
PR #4
- Implement a method to login via the auth token within each new opened chat window (to use the same authentication headers)
- Establish real-time connection with each room (via Real-time Rocket.Chat API)
- Implement a method to retrieve the last few messages of the room with pagination
PR #5
- Install needed libraries
@rocket.chat/fuselage,@rocket.chat/message-parserandemojione - Implement all different Message Body Render Components e.g. (Markdown, Font Styles, Emojis, Mentions, ...etc)
PR #6
- Enable the user to send real-time messages for each opened room
- Implement messages actions component enabling the user to edit/delete messages
PR #7
- Upgrade SDK to the last version
- Refactor all needed parts to work with the last SDK version
- Add background for message while being edited and ESC to cancel
- Some Enhancements to the UI/UX
PR #8
- Add realtime part to the main channel list to keep chats sorted (w.r.t. last message date)
- Add status component to Profile Image (online/offline/busy/away) and keep it realtime changed
- Mark channels as read when entered/new message sent and seen
PR #9
- Implement Attachments Loaders to Chat e.g. (Video, Audio, Image, Message Quote, ...etc)
- Implement methods to store/retrieve logged-in server url
- Install Redux to handle complex state managements
PR #10
- Implemented a feature to parse the message threads
- Add option to open a thread in the message dropdown
PR #11
- Implement Login UI using host URi, (username or email) and password
- Integrate UI with the login functionality
- Implement auto-login whenever app is opened using the auth-token
- Create Dropdown and include logout functionality to it
PR #12
- Implement Emoji Picker within the Chat Windows
- Provide all emojis used by
emojionelibrary
PR #13
- Enable User to send messages with attachments e.g. (video, audio, files, ...etc)
- Save last user window size preference and open it next time
PR #14
- Implement Set Status Functionality (Online/Away/Busy/Offline) on the User Dropdown
- Mark opened channels on the channels list
- Implement Unread messages count badge on the channels list
- Implement Tray Ucon to show/quit the application
- Added Badge on the Tray Icon to display notifications number
- Trigger sound when new message is sent
PR #17
- Implement Search Functionality enabling user to search for users/channels and start new DM/Join new Channel
Project Demo could be found here on Rocket.Chat Youtube Channel
Most of the work pre-defined for GSoC on the proposal is completed, but I aim to keep contributing/maintaining this project and get it published as soon as possible. We -me and my mentors- have a Trello board that contains most of the needed features and bugs fixes that needs to be done.
Here is some things that needs to be done:
- Improve the User Interface of Chats Window, and Channels List
- Write Unit Tests for the whole application UI & functionalities
- Brining more features from Rocket.Chat to our Standalone Application (Examples could be found on the Trello board)
I learnt a lot during my journey at GSoC, and here are somethings that I learnt:
- Enhanced my frontend development experience a lot (Especially using React.js)
- How to read an API docuemntation and get what I need
- Better Usage of Git & GitHub
- Enhancing communication skills
- Better understanding on how remote working is.
- Getting feedback from mentors
- Time Management
I am very grateful to my mentors (Jean Brito and Gabriel Casals), and all Rocket.Chat for this opportunity. I really appreciate they putting time to mentor me, helping me to get this project done. It would have been impossible without them. I have learnt many things in the duration of the project from them and look forward to keep connected to Rocket.Chat and my mentors and contributing to this awesome Organization!