CS498: Undergraduate Project. A scalable full-stack cross-platform messaging component. Under the guidance of. Prof. T.V.

Transcription

1 CS498: Undergraduate Project A scalable full-stack cross-platform messaging component Submitted by , Harpreet Singh, hsinghg@iitk.ac.in Under the guidance of Prof. T.V. Prabhakar Department of Computer Science and Engineering INDIAN INSTITUTE OF TECHNOLOGY KANPUR Spring Semester

2 Abstract Messaging protocols like IRC and XMPP have traditionally formed the backbone of internet chat services. However, because of poor interoperability and user experience, these protocols have gradually given way to closed-source chat platforms like Slack and HipChat with their own proprietary chat protocols, which generally don't integrate well with other independently developed software platforms like IIT Kanpur's MOOCs platform. In this project, we showcase a scalable full-stack messaging component that works equally well on Web, desktop platforms and on mobile devices like Android/iOS and can also be integrated easily with any open-source platform like MOOCs. 1. Introduction Let us start with our 3-generation division criteria of messaging platforms. Generation-1( ) includes platforms such as IRC, XMPP, ICQ etc. Generation-2(2008-Now) included Whatsapp et all. Generation-3(Now) includes services such as Slack, HipChat and so on We start with the Zulip[2] application as an example of a 3 rd generation messaging platform, and use their web app as-is. The backend is coded in Python and uses the Zephyr[1] protocol, which overcomes most of IRC s issues. For their mobile-apps, a cornerstone of a 3 rd generation messaging platform, I took their zulip-mobile[3] repository and coded a lot of improvements on it to bring it to almost feature-parity with other chatting apps like Slack etc. For coding these improvements, we used react-native, a technology backed by Facebook that is used for their mobile apps like Admanager and Groups-manager. The details of improvements made in the mobile apps are in the next section. The screenshots and source code details are in the subsequent sections after that. 2. Work done on the mobile apps i. Ability to mark posts as read/unread Coded an ability into both ios and Android apps to easily skim the posts and be able to sync this information across the mobile and desktop platforms. ii. Native look and feel Added a native navigation bar, footer text-box, and both left and right swipe detection, all of which works natively on both Android and ios.

3 iii. Performance profiling Did performance profiling for both Android and ios apps using the native Android Studio and XCode tools, improved FPS and made scrolling much more responsive. iv. Sentry integration for proper debugging Added Sentry integration for proper debugging on all supported devices using react-nativesentry and Fastlane. Consequently, number of bugs was reduced by a large amount. v. Upgraded react-native to v0.43 Earlier version of react-native in use was 0.38 which was substantially older and much less optimized for Android s API25. Updating react-native to v0.45 seems to have solved a lot of the performance and compatibility issues with Android Nougat devices. vi. Complete overhaul of the navigation library The navigation component in use was NavigationExperimental, which I took out and added in react-native s official navigation system, React Navigation, which works much better and will be supported for the next few years, while NavigationExperimental will not be supported after some months. vii. ios style private message counter A private message counter instantly lets the user know if they have received any new and unread private messages. viii. User typing indicator A WhatsApp-style User is typing indicator for all group and private chats ix. OAuth-login functionality This allows our app to have a login system connected to either Google or Facebook or Github or any other OAuth provider. x. Added an about page for all courses This lets the instructor write a few paragraphs about what the course is about, it s prerequisites and any other relavant information. xi. Ability to star messages

4 All users now can star any message for their own perusal later at any point in time. xii. Common status-bar component The existing zulip-mobile app included 3 separate status-bar components to be used depending on platform. In keeping with react-native s Write it once ideology, I combined these 3 into 1 common status-bar component. xiii. Deep-linking Added in-app deep-linking support via branch.io s private sdk s. xiv. UI overhaul and other bugfixes Improved the UI on both Android and ios using flex-boxes and fixed other small bugs as well. xv. Added tests for most of the react-native codebase. Accomplished this using Coverage to improve and add tests for most of the codebase. xvi. Multi-account support Similar to Slack, I implemented multi-account support using simple flags and ensured such changes would not be affected by down-stream commits from zulip-mobile s repository. 3. Live Demo of web and mobile apps I have put a live demo of the web application on where I welcome everyone to test it. Android and ios apps can be tested after building from source code, which is available on my Github account (id-harpsha).

5 4. Screenshots Web: Android:

6 ios: 5. Future Work & Feedback Now that chat is almost completely implemented, the next steps in moving the entirety of MOOCs to a mobile app would be to port the video player over. I believe this step can easily be accomplished by react-native through a webview with native hooks for a better experience. 6. References [1] [2] [3]