基与 Blessed 的 Wechaty 命令行文本客户端软件（仿IRC）

[huan]

开源软件供应链点亮计划

“开源软件供应链点亮计划-暑期2021”（以下简称 暑期2021）是由中科院软件所与 openEuler 社区共同举办的一项面向高校学生的暑期活动，旨在鼓励在校学生积极参与开源软件的开发维护，促进国内优秀开源软件社区的蓬勃发展。

根据项目的难易程度和完成情况，参与者还可获取“开源软件供应链点亮计划-暑期2021”活动奖金和奖杯。

官网：https://summer.iscas.ac.cn

Wechaty

Wechaty 是一个开源聊天机器人框架SDK，具有高度封装、高可用的特性，支持NodeJs, Python, Go 和Java 等多语言版本。在过去的5年中，服务了数万名开发者，收获了 Github 的 9600 Star。同时配置了完整的DevOps体系并持续按照Apache 的方式管理技术社区。

Wechaty 官网暑期2021项目入口：https://wechaty.js.org/docs/ospp/2021/

项目名称

基于 Blessed 的 Wechaty 命令行文本客户端软件（防IRC）

Wishlist: https://github.com/wechaty/wishlist/issues/47

背景介绍

Wechaty 社区目前已经支持微信、Whatsapp、企业微信、飞书等常见流行即时通讯工具，并且能够通过多语言 SDK （比如 Python Wechaty） 进行调用。

Blessed 是一个 curses-like library with a high-level terminal interface API for node.js. 基于 Blessed 能够快速的完成命令行文本节目的开发：

通过 blessed-contrib 可以快速的 Build dashboards (or any other application) using ASCII/ANSI art and javascript， 达到 Friendly to terminals, ssh, and developers. Extends blessed with custom drawille and other widgets 的使用效果。

我们在本次 Summer 2021 的项目中，Wechaty 希望可以实现对一个基于 Blessed 的 CLI 命令行文本客户端，通过 Wechaty 的基础支持，实现一个能够作为 WeChat, WeCom, Lark, Whatsapp 等所有 Wechaty 支持的 IM 的命令行文本客户端。

客户端的界面设计和交互，可以仿照 Linux 命令行的 IRC 客户端：

See more IRC client from here

我们 Wechaty 社区已经有了一些基于 Blessed 的项目和代码，可以参考： Wechaty Twins Bot

需求介绍

仿照 Linux 命令行终端的 IRC 文本客户端，实现一个基于 Wechaty 的即时通讯工具客户端，通过 Wechaty 支持所有现有的 Wechaty Puppet Providers，比如微信、企业微信、飞书、Whatsapp等。

在初期开发中，能够实现文本消息的接收和发送，即可完成原型验证 POC 。

项目难度

中（奖金：9,000元）

导师联系方式

李卓桓：Creator of Wechaty, Tencent TVP of Chatbot (huan@chatie.io)

项目产出目标

1. 每日代码 commit
2. 每周提交一份 report （回复本 issue）
3. 每两周一次在线会议
4. 发布 Git Repo wechaty-cli
5. 完成完整的联系人列表、聊天对话管理、群列表、群对话管理。
6. 完成联系人管理、群管理，达到接近现有的 IRC 客户端功能的完整程度
7. 配置 GitHub Actions 实现自动化测试* （可选）

项目技术栈

1. TypeScript programming language
2. Git
3. Blessed

参考链接

1. "I'm connected from my VT100" - Chuck Norris https://irc.gitter.im/

[chinggg]

This is my draft proposal. You can comment to give some suggestions and I will improve it.

[huan]

@chinggg Welcome, your proposal is good!

Please register yourself with the official system at https://portal.summer-ospp.ac.cn/summer/ now so that we will not miss the deadline.

Here are some more complicated examples (Just FYI):

1. Facenet Manager: A CLI for classifying images. It has menus, inputs, images support, with a good OO design. link
2. Bless Contrib: lots of components that can work out-of-the-box: link
3. Render bless in the Web browser with React: link

[huan]

明天（19日，周六）晚上20点社区召开暑期 2021 kick off 的在线会议，会议地点见 meeting notes。

meeting notes 地址 https://bit.ly/2zpi2XG ，请暑期 2021 的同学们注意参加：注册、添加介绍自己的 agenda 和准备 slides。

[huan]

[chinggg]

[基于 Blessed 的 Wechaty 命令行文本客户端软件] 进度报告

日期：2021-07-04

本周完成的成果

1. 创建仓库并初始化项目，目前代码在 dev 分支
2. 直接运行 bot 显示消息

本周遇到的困难和需要配合的地方

1. 难以确定代码组织和架构选型
2. 不熟悉 TypeScript 中接口等概念
3. 不熟悉异步编程范式

下周的开发计划和预计成果

1. 确定架构与所用技术
2. 显示联系人列表
3. 重构代码框架

其他需要说明和同步的事项

1. 发现了 基于 blessed 的 Telegram Console Client，需求与本项目较为匹配，其设计模式较易理解，界面和与聊天软件对接都有单独的目录，其中与聊天软件对接还使用了 RxJs，是否有必要学习 RxJS 并用于 wechaty-cli
2. 是否有必要独立出一个登录界面以适应不同的 puppet 达到让用户可选择不同聊天软件的效果，如有必要则再考虑该功能的优先程度

[chinggg]

[基于 Blessed 的 Wechaty 命令行文本客户端软件] 进度报告

日期：2021-07-04

本周完成的成果

1. 学习响应式编程相关概念与 RxJS 的基本操作
2. 在维持现有事件驱动模式的基础上重构代码，将回调函数独立出来使结构更清晰
3. 测试了 Contacts 和 Rooms 的显示
4. 使左侧栏可通过鼠标拖动和键盘上下滚动

本周遇到的困难和需要配合的地方

1. 难以理解 Event, Promise, Observable 三者的异同和适用场景
2. 类的设计，如何组织 screen 以及其他组件，过度封装反而可能导致代码冗长？比如需要 getElement() 方法才能进行操作
3. 目前界面布局是 contrib.grid({rows: n, cols: m, screen: screen}) 划分窗格区域，再 grid.set(x, y, dx, dy, widget)，好处是可以直观地让各部件按比例占位，但 grid, screen 和 widgets 之间的嵌套关系不是很直观，grid 的构造函数中有 screen，grid.set() 又传入 widget，似乎 grid 才是关键，不知由此应该怎样设计类。如果直接用 screen.append() 是否会更方便。
4. bot 的事件和前端交互的事件，如何转化为 Observable 并引入恰当的 Operator 再由何种 Observer 订阅？console-tg-client 的操作看不懂

   export const updates$ = new ReplaySubject<IUpdateEvent>();
   export const error$ = new Subject<any>();
   export const render$ = new BehaviorSubject<void>(null);

下周的开发计划和预计成果

1. 优先解决架构问题，使用面向对象设计和 RxJS 重构并完成现有功能
2. 三日后即开始军训，在此之前提交完成初期报告

其他需要说明和同步的事项

目前效果如下（透明度是我终端软件自带） 希望架构设计能够得到指点

[huan]

Thank you very much for the report, your progress is great!

1. I have a design for encapsulating the UI two years ago, you can see it at https://github.com/huan/node-facenet/tree/master/src/manager/ui and see if it helps.
2. for RxJS, Wechaty has an official module https://github.com/wechaty/wechaty-redux which you definitely should take a look at.

I'd like to schedule a 30 minutes zoom meeting for our project after you have finished the 初期报告. Looking forward to reading your blog post, and discussing it with you!

[chinggg]

@huan Thanks! In fact I have tried to run node-facenet but it always fails when installing, throwing error like Failed at the sharp@0.20.8 install script in Node 14 and 12. When I switch to Node 8, there is another error Could not find a version that satisfies the requirement tensorflow==1.7 (from versions: 2.5.0rc0, 2.5.0rc1, 2.5.0rc2, 2.5.0rc3, 2.5.0, 2.6.0rc0)

[huan]

Yes, the node-facenet package has been out of date for a while.

I'd like to suggest that you just read the source code and see if it can inspire you some.

We can add it to our meeting agenda tomorrow.

P.S. Please check in yourself and add the topics to the agenda in our meeting notes

[huan]

中期成果审核意见

• 项目完成度：刘靖同学能够按照既定计划进行开源项目开发，目前进度与计划相符；
• 学生参与度：能够积极参与项目开发，主动调研新技术和解决现有问题。
• 代码贡献量：完成了代码 Repo 的设立和 NPM 包发布，代码功能可以正常运行，贡献量适中
• 综合评价及建议：项目进展顺利，希望接下来能够完善用户交互UI体验，尽快将模块发布给社区进行 alpha 测试。

[chinggg]

[基于 Blessed 的 Wechaty 命令行文本客户端软件] 进度报告

日期：2021-08-22

本周完成的成果

1. 发布 NPM 包 wechaty/cli#5
2. 重构少量代码，使用 argparse 以解析命令行参数 wechaty/cli#5
3. 选中联系人或群聊时，仅展示对应消息
4. 选中群聊时，获取并在右侧展示群聊成员

本周遇到的困难和需要配合的地方

1. 不熟悉 NPM 发布的规范和自动化流程
2. 查看了 node-facenet 的类设计，暂时还无法运用到本应用中，现在功能还少，引入会让代码更复杂而不直观

下周的开发计划和预计成果

1. 完成期中博客和视频展示
2. 添加开屏效果
3. 丰富右侧面板的功能
4. 支持发送消息

其他需要说明和同步的事项

目前效果如下，明显看出显示有瑕疵，应该与 blessed log 组件的底层实现有关，中文出现叠词，显示过长消息时更容易出现字符残留漂移的现象

[huan]

Please follow https://github.com/wechaty/summer/issues/79#issuecomment-899086777 and make sure you have:

1. RSVP by registering yourself to https://docs.google.com/document/d/1fVCk8qRYc4RKGMf2UY5HOe07hEhPUOpGC34v88GEFJg/edit#heading=h.5ztnno5qivcb (by adding your name below the "Attendees")
2. Submit your mid-term demo day presentation blog & video & slide in the meeting notes.

Pleaset let me know when you have get it done, thank you very much.

[chinggg]

期中汇报：https://www.youtube.com/watch?v=xPsAwLglVdM 期中 Live Coding：https://www.youtube.com/watch?v=1U0ONeHV7z8

[lijiarui]

Hi @chinggg Please upload the video to bilibili or Tencent as well, Thanks.

[lijiarui]

ping @chinggg Please upload the video to bilibili or Tencent as well, Thanks.

[huan]

ping @chinggg for the weekly update.

[chinggg]

[基于 Blessed 的 Wechaty 命令行文本客户端软件] 进度报告

日期：2021-09-09

本周完成的成果

1. 完成期中汇报和博客
2. 消息的发送

本周遇到的困难和需要配合的地方

1. 开学初期时间略紧张
2. 以 NPM 方式安装后依赖不全，需要自行处理依赖

下周的开发计划和预计成果

1. 完善 NPM 的使用方式
2. 尝试使用 react-blessed

其他需要说明和同步的事项

[huan]

Thank you very much for the update!

I'll try to npm install our cli later and to see how good it works.

And, I will really be exciting with the react-blessed if we can integrate our cli with it!

[chinggg]

Thank you very much for the update!

I'll try to npm install our cli later and to see how good it works.

And, I will really be exciting with the react-blessed if we can integrate our cli with it!

Have you ever used react-blessed with typescript(ts-node)? The tutorial uses babel and javascript, I cannot find projects to learn from which combine the two technologies.

[huan]

TypeScript will be absolutely fine with them.

I'll have a look at that tutorial and to see how can we integrate wechaty cli with react.

[huan]

Browserify Wechaty CLI

After I watched the react-blessed tutorial, I realized that this is for running React for CLI.

You can learn a lot from a great repo blessed contributions, extensions, typings, and documentation created by @cancerberoSgx, with great examples with TypeScript + React + Blessed:

1. Gallary (npm run start-gallery) - https://github.com/cancerberoSgx/accursed/blob/master/spec/blessed/gallery/main.tsx
2. Great example/demos: https://asciinema.org/a/KcOrsgaP3vwhNPAic776MY9yi
3. A TypeScript + React TreeView example: https://github.com/cancerberoSgx/accursed/blob/master/guides/blessed-custom-element-lightweight.md

What I was talking about before is to run Wechaty CLI in the browser on a webpage.

Here's how to do it, please feel free to check it out:

• https://github.com/chjj/blessed/issues/168
• https://github.com/cancerberoSgx/accursed/blob/master/guides/browserify.md

Improve UI/UE for Wechaty CLI

I have just enhanced the cli with dual-ESM-CJS-module support and fixed some minor bugs.

It seems the CLI works great! Here's how to use it:

npm install --global wechaty-cli
wechaty-cli

However, the user interface and experience need to be improved a lot, could you please make a plan for it?

Thank you very much!

[chinggg]

@huan Thanks for improving NPM config and finding the great repo accursed ! Though it provide lots of document and code, I cannot run the demo now and tsc will emit many errors on the .tsx files like below.

For the UI/UX improvement, I plan to use menu(with single character as key) for users to select, just as dockly does. It can provide stable user experience on Windows as well, where mouse click does not work.

[huan]

dockly looks great!

[chinggg]

[基于 Blessed 的 Wechaty 命令行文本客户端软件] 进度报告

日期：2021-09-17

本周完成的成果

1. 增加了多功能菜单栏
2. 通过菜单栏实现在不同组件中切换
3. 在菜单栏中加入“刷新”功能，bot ready 后联系人和群聊获取不全可手动刷新
4. 在菜单栏中把显示群聊成员作为可弹出窗口
5. 实现了活跃聊天的记录（未 push），考虑将其作为右侧面板的内容

本周遇到的困难和需要配合的地方

1. 原本计划这周练习使用 react-blessed，但最终还是在改进 UI/UX，也正是在不断添加组件和交互的过程中，才体现出使用 react 等框架的必要，现在的代码虽然大致分为 ui 和 bot 两部分，但并不能真正做到分离，bot.ts 中还是混杂了许多用来处理界面的代码
2. accursed 似乎自成一个体系，该作者自行实现了大量代码才实现了 react tsx 等功能，还在试图研究中

下周的开发计划和预计成果

1. 继续完善 UI/UX，比如联系人/群管理等
2. 如有时间再练习使用 react-blessed

其他需要说明和同步的事项

关于 rightPanel 的内容，我原本想用来显示 个人详情/群聊成员，但前者似乎不适合长条形框体和树形元素结构。故而我考虑将其用作显示活跃聊天（收到消息的聊天）的面板，大部分聊天可能都处于僵尸状态，用户可以通过该面板快速跳转到真正活跃的群聊，征求 @huan 的意见

[huan]

Thanks for the update.

Have you started writing the mid-term blog post? Please let me know when you can finish it because it is required by our program.

Refer to:

• https://github.com/wechaty/summer/issues/79#issuecomment-899023310

[chinggg]

@huan What do you think about this UI?

[huan]

Looks good!

Do you have a roadmap / plan for publishing this new version? I'd like to try it as soon as possible.

[chinggg]

Looks good!

Do you have a roadmap / plan for publishing this new version? I'd like to try it as soon as possible.

Have published v0.2.5

For more complete UI improvement roadmap. see https://github.com/wechaty/cli/issues/17

[chinggg]

The final report is in wechaty/wechaty.js.org#1322 Because I have been busy in hometown since 9/30, I have not completed the videos now, but it should be down before the meeting at 10/9.

[lijiarui]

@chinggg You should make GitHub Action green in wechaty/wechaty.js.org#1322 as soon as possible.

As the Wechaty community requested, you should finish the blog before the meeting. Finish the blog means your PR is merged instead of just create a PR.

[huan]

结项审核

• 项目完成度：刘靖同学能够按照既定计划进行开源项目开发，目前进度与计划相符；
• 学生参与度：能够积极参与项目开发，主动调研新技术和解决现有问题。
• 代码贡献量：完成了代码 Repo 的设立和 NPM 包发布，代码功能可以正常运行，贡献量优秀
• 综合评价及建议：项目进展顺利，希望接下来能够继续完善用户交互UI体验，通过社区反馈继续开发新功能

希望同学未来可以不但继续自己参与维护社区代码，还可以多带动身边的同学参加，在开源项目中发挥更加积极的作用。