Bài viết kỷ niệm 5 năm ngày ChatWork ra đời!

... và chúc mừng Chat++ release version 5.0.0

... From Chat++'s Creators with Love! ...

About ChatWork

Mở đầu bài viết, mình xin được giới thiệu về ChatWork, những điều có thể bạn chưa biết.

ChatWork là một sản phẩm của Công ty cổ phần ChatWork (ChatWork株式会社), tiền thân của nó là công ty cổ phần EC Studio.

ES Studio được thành lập bởi hai anh em Yamamoto, từ năm 2000. Hiện tại họ cũng đang giữ vai trò là CEO và CTO của công ty.

Ngày 1/3/2011, ES Studio ra mắt sản phẩm thuộc dạng Cloud Chat Tool, với những tính năng được giới thiệu rằng sẽ khắc phục được những nhược điểm, cũng như những điểm khó dùng của email truyền thống, hay skype ... Đó chính là ChatWork.

ChatWork dần trở thành sản phẩm chiến lược của công ty, và đến ngày 15/6/2012, ES Studio quyết định "thay tên đổi họ" sang một cái tên đơn giản và thân thuộc hơn: ChatWork! Hiện tại ChatWork ngoài trụ sở chính ở Tokyo, còn có một chi nhánh ở Thung Lũng Silicon nữa.

Tính đến thời điểm cuối tháng 1 năm 2016, đã có hơn 90.000 công ty tại 204 quốc gia và vùng lãnh thổ sử dụng ChatWork, với tổng cộng hơn 1 tỉ message được gửi đi.

Tuy nhiên, ChatWork không phải là một công ty có số lượng nhân viên lớn. Theo mình biết thì chắc tầm 50 người. Và họ có kế hoạch đạt được mục tiêu 100 nhân viên trong vòng 2 năm tới.

Nếu bạn quan tâm đến những tin tức về ChatWork, bạn có thể check tại ChatWork Blog, và ChatWork Creator's Note

About Chat++

• Homepage
• Github
• Chrome Web Store

Mặc dù được ra đời với mục đích là khắc phục những nhược điểm, những điểm khó dùng của các công cụ trước đó, tuy nhiên bản thân ChatWork cũng không phải là hoàn hảo (thực tế cũng chẳng có service nào là hoàn hảo cả). Vẫn còn những điểm ChatWork làm chưa tốt, và Chat++ ra đời nhằm giúp giải quyết một vài (vâng, chỉ là một vài điểm) trong số đó, để giúp bạn có thể sử dụng ChatWork được dễ dàng, thuận tiện, và vui vẻ hơn.

Hãy cùng lật lại một chút về lịch sử ra đời và phát triển của Chat++:

• Tiền thân của Chat++ bắt nguồn từ ý tưởng muốn thêm Emoticons vào ChatWork, được thực hiện bởi Nguyễn Anh Tiến @vigov5 . Phiên bản sơ khai đầu tiên là CWEP (ChatWork Emoticon Plus) 0.1.1, ra đời ngày 29/5/2014. CWEP ban đầu chỉ được sử dụng nội bộ trong một số nhóm, và xuất hiện cả "dị bản" để áp ứng nhu cầu sử dụng nhiều emoticons khác nhau. =))
• Tháng 9 năm 2014, CWEP được remake lần đầu, và được đưa lên Chrome Web Store với tên gọi YACEP (Yet Another Chatwork Emoticon Plus), với ý tưởng ban đầu là "Một Extension, Nhiều Emoticons Data".
• Tồn tại được tầm 3 tháng, đến 31/12/2014, YACEP được rename thành Chat++ như ngày hôm nay, sau khi được bổ sung hàng loạt các tính năng mới bên cạnh tính năng Emoticons truyền thống, đặc biệt là tính năng Mention, hay hỗ trợ nhiều bộ Emoticon Data.
• 5/2/2015 Update Chat++ phiên bản 2. 5/3/2015 Update Chat++ phiên bản 3. Phiên bản 4 không có kế hoạch release, Chat++ bị ngừng phát triển.
• 1/7/2015 Chat++ bất ngờ được public trên Web Store mà không có kế hoạch gì từ trước cả!
• 22/7/2015 Chat++ phiên bản 4 được release sau có hơn 2 tuần phát triển
• 1/3/2016 Chat++ phiên bản 5 được release nhân dịp kỷ niệm 5 năm ngày ChatWork ra đời.

Hiện tại, với hơn 1400 users sử dụng thường xuyên, Chat++ có thể nói là extension cho ChatWork phổ biến nhất. Nếu bạn vào Chrome Web Store và search từ khoá "Chatwork" thì Chat++ sẽ là kết quả xuất hiện đầu tiên ở phần Extension đấy

Ngoài ra, Chat++ thậm chí cũng đã từng được giới thiệu trên Blog của ChatWork

Với mong muốn phát triển Chat++ với nhiều tính năng hữu ích hơn nữa, mình xin được viết bài này nhằm giới thiệu về cơ chế hoạt động phía Client của ChatWork, cũng như cách thức mà Chat++ bổ sung các tính năng mới vào. Hy vọng từ đó các bạn sẽ có hứng thú và rồi trở thành Contributor cho Chat++.

Dive into ChatWork Javascript

Nguyên lý hoạt động của Chat++, hay nói rộng ra là các Browser Extensions khác, nhìn chung rất đơn giản, đó là tìm cách can thiệp vào các xử lý Javascript của trang Web. Thế nên để hiểu được về Chat++, trước tiên bạn cần tìm hiểu về Javascript của ChatWork trước đã.

Đầu tiên, hãy click chuột phải vào trang ChatWork của bạn, chọn "View Page Source". Ở trang source code đó, hãy kéo xuống dưới cùng, bạn sẽ thấy một đường link javascript kiểu như: <script src="./javascript/new/chatwork_all_ja.min.js?1456698897"></script>. Đó chính là file chứa tất cả code js của ChatWork.

Tiếp theo, hãy download file này về. Do file js đó đã được minify, thế nên bạn cần một công cụ để beautify nó, hiểu một cách đơn giản là bạn cần căn chỉnh, indent lại toàn bộ code để dễ đọc hơn. Bạn có thể google ra cả đống công cụ giúp thực hiện việc như thế, như http://jsbeautifier.org/ chẳng hạn.

Sau khi đã làm cho file js trở nên "sạch đẹp" hơn, ta bắt đầu tìm hiểu nội dung của nó. Với file js mình đang dùng để tham khảo tại thời điểm thực hiện bài viết này, thì nó "chỉ" dài 17768 dòng. Đặc biệt, tên biến cũng đã được convert hết về dạng a, b, c ... Thế nên bước đầu tiếp cận với nó chắc sẽ gặp đôi chút khó khăn.

Tuy nhiên một điều may mắn là tên các hàm vẫn còn được giữ nguyên, và tên các hàm được sử dụng vốn rất sáng sủa, thế nên bạn vẫn sẽ hiểu được người ta viết những gì. Đương nhiên là để đọc được hết hơn 17000 dòng code là rất khó, thế nên bạn sẽ cần một chút tư duy với Javascript, chút khả năng phán đoán (xem liệu hàm mình cần tìm có tên là gì, nằm ở đâu), và kỹ năng tìm kiếm nữa.

Hãy cùng nhìn qua một số điểm chính:

• Đầu tiên là các khái niệm quan trọng về "Room", "Message", và "Account". Mọi thứ đều được quản lý bằng id. Room thì sẽ có room_id, message thì sẽ có message_id, hay tài khoản của bạn thì sẽ có account_id. Khi bạn chuyển đổi giữa các room thì đường dẫn trên ô địa chỉ sẽ bị thay đổi, nó có dạng như https://www.chatwork.com/#!rid345345, ở đó 345345 sẽ là id của room hiện tại của bạn. Khi bạn muốn mention một ai đó, bạn chọn người đó thông qua chức năng To của ChatWork thì sẽ nhận được một dòng text kiểu như [To:645435] Tran Duc Thang, ở đó 645435 chính là account id của user bạn muốn mention. Hay khi bạn reply một message thì sẽ nhận được một đoạn text có dạng [Reply aid=645435 to=5555999-1155556666] Tran Duc Thang, trong đó 645435 là account id của người bạn đang reply, 5555999 là room id nơi mà message bạn reply tồn tại, và cuối cùng 1155556666 chính là message_id của message đó.

• Hãy cùng kéo xuống cuối cùng của file js, bạn sẽ thấy một số biến global được khai báo. Đây sẽ là những chìa khoá chính giúp bạn can thiệp vào code của ChatWork. Cụ thể như sau:

var PLATFORM = "web",
CW = new ChatWork(client_ver),
AC = new Account(myid),
FL = new File,
TK = new Task,
RL = new RoomList,
RD = new RoomDialog,
RS = new RoomSub,
ST = new Setting,
CS = new ChatSend,
SC = new Search,
AL = new Analytics,
RM = null,
TM = THEME.blue,

Xử lý js của ChatWork được chia ra làm các thành phần quan trọng như ChatWork (quản lý các thông tin cơ bản của ChatWork), Account (quản lý các thông tin liên quan đến Account người dùng), RoomList (quản lý các thông tin liên quan đến danh sách Room), ChatSend (quản lý các thông tin liên quan đến phần gửi chat), Room (quản lý các thông tin liên quan đến Room hiện tại) ...

• Để nghịch chơi với code js của ChatWork, bạn có thể bật phần console của trình duyệt lên, và dùng các biến như CW, AC, RL ... để lấy thông tin mình muốn. Ví dụ như gõ AC.myid vào console của trình duyệt, bạn sẽ nhận được account id của mình, hay gõ RM.id thì bạn sẽ nhận được id của room hiện tại.

• Ngoài ra, đi kèm với mỗi một function (theo dạng class) ở trên là một function view. Ví dụ như ta sẽ có ChatWorkView quản lý các thành phần liên quan đến hiển thị. Bạn có thể truy cập đến biến này thông qua property view. Chẳng hạn như RL.view sẽ giúp bạn truy có thể truy cập đến các hàm trong RoomListView.

Decode Chat++ Features

Sau khi đã có những kiến thức cơ bản về phần js ở trên, giờ bạn có thể dễ dàng hiểu được xem Chat++ can thiệp vào các tính năng của ChatWork như thế nào. Hãy cùng điểm qua các tính năng của Chat++ nhé.

Emoticons

Đây là tính năng đầu tiên từ thời xưa của Chat++. Trải qua nhiều lần update thì nó đã trở nên ổn định hơn, hiện nay Chat++ cũng đã support sử dụng nhiều bộ data emoticons khác nhau, và ai cũng có thể tạo ra bộ data cho riêng mình.

Tuy nhiên về cơ chế của chức năng này thì lại khá đơn giản. Nếu đọc qua phần code của function ChatWork, bạn sẽ thấy có một biến dùng để lưu lại các thông tin về emoticons, như với text nào thì sẽ replace bằng ảnh nào. Bạn có thể truy cập nó thông qua CW.reg_cmp.

Tất cả những gì Chat++ làm là đẩy các thông tin về emoticons bên ngoài vào trong cái mảng đó, còn công việc thay thế text để hiện emoticon thì hoàn toàn vẫn là xử lý của ChatWork.

Mentions

Đây là tính năng lớn nhất của Chat++, và cũng là tính năng khó khăn nhất, đòi hỏi xử lý javascript nhiều nhất, trong khi phần sử dụng thông tin từ ChatWork là không thật sự nhiều.

Chat++ dùng RM.getSortedMemberList() để lấy ra danh sách id các user trong Room, hay dùng AC.contact_list để lấy ra toàn bộ users trong danh sách bạn bè.

Tiếp đó là sử dụng một số thư viện phục vụ cho việc lấy ra vị trí của con trỏ hiện tại trong ô chat, hay tìm kiếm xấp xỉ (bằng cách sử dụng Fuse.js).

Shortcut

ChatWork vốn support sẵn một vài phím tắt nhưng quả thật như thế là chưa đủ =)) Chat++ bổ sung vào đó những phím tắt hữu ích khác, chẳng hạn như phím tắt để reply message, quote message, hay để chuyển room ...

Việc đó đơn giản được thực hiện qua cơ chế đăng ký bởi hàm CW.view.registerKeyboardShortcut() mà ChatWork cung cấp sẵn, bên cạnh đó là các xử lý liên quan đến message (thông qua RM.timeline), hay room (thông qua RL). Thêm một số xử lý có phần chi tiết một chút bằng jQuery, ta sẽ đạt được những gì mình muốn.

Room Information

Một trong những tính năng đơn giản nhất. Do chỉ đơn thuần là hiện ra thông tin về Room hiện tại, thế nên những xử lý bên trong của nó cũng không có gì đặc biệt cho lắm, RM.chat_num để lấy ra tổng số message của room, RM.task_num để lấy ra tổng số task của room, RM.mytask_num để lấy ra tổng số task của bản thân trong room, hay RM.file_num để lấy ra tổng số file trong room.

View Enhancer

Chat++ có 2 sự cải tiến lớn về mặt hiển thị view. Đó là tính năng thumbnail và code highlight.

Trong khi thumbnail được thực hiện đơn thuần bằng cách sử dụng regex để bắt link và sau đó là chèn thêm tag <img> và phía sau của link đó, thì code highlight được thực hiện bằng cách sử dụng thư viện highlightjs. Tuy nhiên cũng phải nói là ChatWork đã làm sẵn cho chúng ta thẻ [code][/code] rồi, những gì Chat++ làm chỉ là highlight đoạn code ở trong tag <code> vốn đã được ChatWork tạo ra.

Để thực hiện 2 tính năng trên, Chat++ đã sử dụng một kỹ thuật có phần hơi tricky, đó là viết đè lên hàm vốn có của ChatWork. Chẳng hạn như để can thiệp vào việc hiển thị message ở trong Room, ta có thể làm như sau:

TimeLineView.prototype.getMessagePanelOld = TimeLineView.prototype.getMessagePanel;
TimeLineView.prototype.getMessagePanel = function(a, b) {
    let message_panel = this.getMessagePanelOld(a, b); // Call to the original one!
    // From here, we will work with `message_panel`
    return new_message_panel;
};

Một số tính năng khác như quick info tag, quick title tag, notification disabler ... cũng đều hoạt động dựa trên nguyên lý này.

Become a Contributor

• Chat++ là một extension cho Chrome (và sắp tới có thể là cả Firefox nữa), thế nên trước tiên bạn cần có một chút kiến thức về Chrome Extension. Nếu không có nhu cầu, hay không có thời gian để tìm hiểu quá nhiều, thì bạn chỉ cần biết cách chạy một extension từ local là được. (like)
• Fork Chat++ trên Github
• Hãy chắc chắn rằng máy của bạn đã có nodejs. Dùng npm install để cài đặt các node modules.
• Code của Chat++ được viết bằng ECMAScript 2015. Hãy tìm hiểu một chút về những tính năng mới trong phiên bản javascript này nhé. Bạn có thể tham khảo ở bài viết này
• Chat++ sử dụng gulp để build code, transform code bằng babeljs. Bạn cần chạy lệnh gulp để build code từ thư mục src, thư mục chứa các code Javascript của bạn.
• Về cấu trúc bên trong thư mục src thì gồm có:
  • Thư mục extensions: Chứa các file js liên quan hoạt động của extension như contentscript.js, background.js.
  • Thư mục internals: Chứa các file js sẽ được inject vào trong ChatWork. Nếu bạn muốn thêm những tính năng mới vào cho ChatWork, thì đây chính là thư mục mà bạn cần làm việc chính.
  • Thư mục externals: Chứa các file js được sử dụng bởi các trang bên ngoài ChatWork, như trang Popup, các trang option, setting của Chat++.
  • Thư mục helpers: Chứa các file js dùng chung, được sử dụng ở nhiều nơi.
  • Thư mục libs: Chứa các thư viện của bên thứ ba mà Chat++ sử dụng.
• Code được build bởi gulp sẽ được lưu trong thư mục build, thư mục này chính là extension hoàn chỉnh. Nếu bạn chạy extension ở local, thì đây chính là thư mục bạn cần load vào Chrome.
• Chat++ sử dụng ESLint để check coding conventions, với parser là babel-eslint. Hãy cài đặt chúng trước.

npm install -g eslint babel-eslint

• Kiểm tra file .eslintrc.json để xem những rules mà Chat++ đang tuân thủ. Nội dung chi tiết của các rules đó có thể check tại trang ESLint Rules Document.
• Chạy npm test hoặc eslint src để check code của bạn.
• Gửi pull request đến nhánh develop tại repository của Chat++

Hy vọng qua bài viết này, các bạn sẽ hiểu biết thêm nhiều về ChatWork cũng như Chat++. Nếu bạn có ý tưởng, hay có hứng thú muốn đóng góp những tính năng mới cho Chat++, hãy liên hệ với mình nhé.

... From Chat++'s Creators with Love! ...