gsoc 任务
The project I worked on at GSoC 2020 was a full-screen composer for Rocket.Chat mobile app. A full-screen composer is a larger text area that usually covers a large portion of the screen to provide a good user experience when typing large texts. The user who needs the full-screen composer wants to inform, teach something, warn, or even share an idea. That’s why most mobile apps with this type of composer are social networks like Twitter, Facebook, Linkedin, and Slack that is Chat app in the same way that Rocket.Chat mobile app.
我在GSoC 2020上从事的项目是Rocket.Chat移动应用的全屏作曲家。 全屏撰写器是一个较大的文本区域，通常会覆盖屏幕的很大一部分，以便在键入大文本时提供良好的用户体验。 需要全屏作曲家的用户想要告知，教导，警告甚至分享想法。 这就是为什么大多数使用这种作曲器的移动应用程序都是Twitter，Facebook，Linkedin和Slack等社交网络(即聊天应用程序)的方式与Rocket.Chat移动应用程序相同。
什么是作曲家？ (What is a composer?)
First of all, we need to know what a composer is. A composer is the text area, generally among buttons to the application’s functionalities to send messages or post something. This tool can be seen in chat apps or social networks where there is the necessity of input some text. For example, this is the current composer of Rocket.Chat mobile app.
首先，我们需要知道什么是作曲家。 作词者是文本区域，通常位于应用程序功能的按钮之间，以发送消息或发布内容。 可以在需要输入一些文本的聊天应用程序或社交网络中看到此工具。 例如，这是Rocket.Chat移动应用程序的当前作曲家。
全屏作曲家 (Full-Screen composer)
Full screen composer is a kind of composer, but this composer can cover the whole screen making the process of writing large texts more easy and fast. The user can see all text and format that it is written. Here is the main proposal of the project, The new Full-Screen composer in Rocket.Chat mobile app.
全屏作曲家是一种作曲家，但是该作曲家可以覆盖整个屏幕，从而使编写大文本的过程更加轻松快捷。 用户可以看到所写的所有文本和格式。 这是该项目的主要建议，即Rocket.Chat移动应用中的新全屏作曲家。
实现全屏作曲家的方法 (Approaches to reach a Full-Screen composer)
react-native-reanimated combined with react-native-gesture-handler was my first approach to implement a full-screen composer. This library is an excellent tool for a smooth transition between the main composer and the full-screen composer. With this library, I could control the velocity of the animation, the transition, and the whole animation directions.
react-native-reanimated与react-native-gesture-handler相结合是我实现全屏作曲家的第一种方法。 该库是在主作曲家和全屏作曲家之间平滑过渡的出色工具。 使用该库，我可以控制动画的速度，过渡和整个动画方向。
I used an Animated View to put the large text area. To open and close the full-screen composer, I used a swipe gesture and a button to open and close this full-screen composer. But I found difficulty because the first idea was to open the full composer from the main composer. To do this, we needed to sync the position of the two composers. This was a problem to keep our layout responsive so I went to another approach.
我使用了动画视图来放置大文本区域。 要打开和关闭全屏作曲家，我使用了滑动手势和按钮来打开和关闭此全屏作曲家。 但是我发现困难，因为第一个想法是从主要作曲家那里打开完整的作曲家。 为此，我们需要同步两个作曲家的位置。 这是使我们的布局保持响应速度的问题，因此我采用了另一种方法。
react-native-modal was my second approach and more successful. This library can be used with the same behavior as the react-native-reanimated in this case. This behavior is an Animated View that grows from bottom to top to cover the whole screen and contains our large text area and the buttons for actions under it. This library has an easy way to control the animation and transition between the composers.
react-native-modal是我的第二种方法，比较成功。 在这种情况下，可以使用与本机复活的行为相同的库。 此行为是一个动画视图 ，该动画视图从底部到顶部逐渐扩大以覆盖整个屏幕，并且包含我们的大文本区域以及在其下方进行操作的按钮。 该库具有控制作曲者之间的动画和过渡的简单方法。
From here, I had a better idea of what I needed to do. After talking to my GSoC mentors, We decided to open/close the full-screen composer, just using buttons. Then we faced some challenges and problems and started to improve our full-screen composer.
从这里开始，我对需要做的事情有了更好的了解。 与我的GSoC导师交谈之后，我们决定仅使用按钮即可打开/关闭全屏撰写器。 然后，我们面临一些挑战和问题，并开始改进全屏作曲家。
在作曲家之间共享数据 (Sharing data between composers)
The main data that we need to share between composers is the text that the user is typing. To pass this text between composers, we use a class property to store the text inside of the class and the same function to update this text. To provide the user the effect of transition, we start the property text with an empty string this.text = “” and use it as the default value to both composers.
我们需要在作曲家之间共享的主要数据是用户键入的文本。 要在作曲家之间传递此文本，我们使用class属性将文本存储在类内部，并使用相同的函数更新此文本。 为了向用户提供过渡效果，我们以空字符串this.text =“”开始属性文本，并将其用作两个作曲家的默认值。
途中遇到的问题 (Problems encountered on the way)
The main problem that I needed to deal with in this project was to keep the reference to the right composer. On Android, we use the react-native-keyboard-input to show the user the emoji keyboard. To do this, the library needs a ref of our current composer. When this reference was wrong, the composer had an unexpected behavior like empty spaces on the screen or even the emoji keyboard in the wrong place, and the emojis don’t update in the composer.
在这个项目中我需要处理的主要问题是保持对正确的作曲家的引用。 在Android上，我们使用react-native-keyboard-input向用户显示表情符号键盘。 为此，图书馆需要我们当前作曲家的参考。 当此引用有误时，作曲家会有意外的行为，例如屏幕上的空白区域或表情符号键盘在错误的位置，并且表情符号在作曲家中不会更新。
故事书 (Storybook)
Another tool that Rocket.Chat mobile app uses is the storybook, A library to list and make unit tests of the components. To avoid the regression of tests, I implemented the storybook to the main composer and full-screen composer components.
另一个工具Rocket.Chat移动应用程序采用的是故事书 ，图书馆的组件列表并进行单元测试。 为避免测试退化，我将故事书应用于主要的作曲家和全屏作曲家组件。
其他作品 (Other works)
During the GSoC period, I started working hard on the Full-Screen composer, but after finishing the project and submitting a pull request to review, I began to work on other app priorities. I fixed some bugs and created new features to the app, I have some works under review and some works are in production. In short, these are some of my jobs:
在GSoC期间，我开始着手全屏撰写器的工作，但是在完成项目并提交请求请求进行审查之后，我开始着手处理其他应用程序的优先事项。 我修复了一些错误，并为该应用创建了新功能，我正在审查一些作品，一些作品正在生产中。 简而言之，这些是我的一些工作：
- Created a list of history servers that the user connected before. This feature makes a more comfortable process of login frequently used servers for the user. 创建用户之前连接的历史服务器列表。 此功能使用户可以更方便地登录常用服务器。
- Added a Bio and Nickname fields to the user profile in the app. 在应用程序的用户个人资料中添加了个人简介和昵称字段。
- A new feature to clear cookies of webview when logged from OAuth, to avoid saving data and enter to the app if the user doesn’t want to do it. 一种新功能，可清除从OAuth登录时的Webview Cookie，从而避免保存数据并在用户不想执行操作时进入应用程序。
- Created a view to improve the list of the message’s reactions. 创建了一个视图以改善消息React的列表。
- Created the possibility to close the banner on top of a room view. 创建了在房间视图顶部关闭横幅的可能性。
In total, I made around 20 contributions to Rocket.Chat mobile app, I will leave the complete list of pull requests at the end.
总共，我为Rocket.Chat移动应用程序贡献了大约20个内容，最后我将保留拉取请求的完整列表。
结论 (Conclusion)
Reaching the end of the GSoC period, We have a full-screen composer to the Rocket.Chat mobile app with a smooth transition and good performance using react-native-modals, We did some experiments of new layouts to both composers, but we decided to keep the current design. The pull request of the Full-Screen composer still under review.
到GSoC阶段结束时，我们有了Rocket.Chat移动应用程序的全屏作曲者，使用react-native- modals可以平稳过渡并具有良好的性能，我们对这两个作曲者进行了一些新布局的实验，但我们决定保持当前设计。 全屏作曲家的拉取请求仍在审核中。
This project waits for review, but we have great results in the implementation and aggregate an excellent tool for the users. It’s a pleasure to be part of this.
该项目有待审核，但我们在实施中取得了丰硕的成果，并为用户提供了一个出色的工具。 成为其中的一部分很高兴。
The Rocket.Chat company provided me with experiences in addition to creating code as an improvement in my communication, my organization, confidence to show my work to different people who could teach me a lot
Rocket.Chat公司为我提供了丰富的经验，不仅可以创建代码，还可以改善我的沟通，组织，信心，向可以教给我很多知识的其他人展示我的工作
This project was my first step in a big open source project, and after this period of GSoC, I want to keep being an active contributor to open source.
这个项目是我在大型开源项目中的第一步，在这段GSoC之后，我希望继续成为开源的积极贡献者。
重要连结 (Important Links)
全屏作曲家的拉取请求 (Pull Request for the Full-Screen Composer)
提到的图书馆 (Libraries mentioned)
我的其他作品 (My other works)
gsoc 任务
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
