Hello, I am Airing, the Founder & Developer of the Twin Diary project. The mini-program version of the project won the first prize in the 2018 C4 - WeChat Mini-Program Application Development Competition, while the iOS version won the first prize in the 2018 C4 - Mobile Application Innovation Competition. Currently, the cumulative registered users have reached 10,000+, and the project is still under continuous development and maintenance.
This article will briefly summarize the work our team has done throughout the entire product development process, with a focus on introducing the methods of product development and team management.
I divide the entire product development into the following four steps:
- Project Initiation
- Design
- Development
- Maintenance
As you can see, these four steps form a closed loop in the project process, allowing the product to develop in a healthy manner. Next, I will talk specifically about the content of these four steps.
1. Project Initiation#
Project initiation is the first and most important part of all stages, and I believe it is similar to the role of a "Product Manager". Although I am the Founder, the discussion of the product is still a collaborative effort with everyone. Specifically, this stage has two parts:
- Product Brainstorming
- Document Organization
1.1 Product Brainstorming#
First, I will propose my ideas to the team and create a discussion area for everyone to participate in. We are a very large interest group, although only three of us are involved in the development of Twin Diary, but during the product brainstorming, all team members have put forward their own insights and suggestions. For example, the following image is the content we discussed during the team development.
Here, our team uses "Yuque" as the product, but the tool can be chosen freely. I think Tencent Documents is also very convenient. The important thing is to form electronic records. If you only discuss in a WeChat group or have a simple offline conversation, it will be inefficient and equivalent to no discussion.
1.2 Document Organization#
The second step is to organize the brainstorming documents and write related development documents, including but not limited to:
- Requirement Document
- Product Document
- Model Document
- Interface Document
PS. This is our team's document library, for reference only: Oh Bear | Yuque
2. Design#
We use Sketch as the design tool, but we don't directly send the source files to the development team because Sketch is quite expensive and only supports macOS. Instead, we use Lanhu. We initially used Yuque's drawing board, but found it to be too difficult to use. In Lanhu, the design drafts can be shared, and team members can be invited to provide feedback.
The content of the design drafts includes:
- Specifications
- Prototypes
- UI
- Slicing
The specifications focus on color, component, and font specifications. The prototypes provide more interactive instructions. Here, we use annotations to provide detailed explanations of the interactions on the UI. However, using Flinto directly is also possible. Flinto is more intuitive, but developers may not fully understand the content provided by the design team.
3. Development#
This section shares the core part of product development: project development. I will share a bit more content in this section, but it may be a bit scattered. It mainly includes three parts:
- Planning and Recording
- Development Tools
- Recommendations
3.1 Planning and Recording#
Before development, I usually create a to-do list to list the various requirements or technical points of the project. This gives me an intuitive understanding of the overall project and helps me arrange and plan my development tasks. I use Notion for this purpose. I divide the product into 8 parts according to important modules, and then write a to-do list for each part to avoid having a single file with a long to-do list.
Of course, the to-do list is not just for recording tasks. It serves as a development diary. I personally like to record difficult problems encountered during development and their solutions, or resources used. I believe that development is a process of learning and growth, not just completing business requirements. Recording is convenient for future organization into blog posts or quickly locating similar problems. If not recorded, it is easy to forget. Therefore, keeping a development diary is very effective for learning.
3.2 Development Tools#
For WeChat Mini-Program development, I recommend using VS Code + extensions + real device mode for developers who are familiar with development. I think this workflow is efficient and less prone to errors. "Efficiency" refers to the efficiency of VS Code itself, and "errors" refers to the fact that the simulator sometimes has different effects from real devices.
Here, I would like to recommend my own VS Code configuration:
I like to place the file explorer on the right side for two reasons: first, the left side is the area where people pay attention, so the code editor should be placed there; second, I can hide the file explorer by pressing Cmd + B without changing the position of the editor. If it is placed on the left, the editor will shift when hidden, which is uncomfortable for the eyes.
For extensions, I use several interesting ones:
- Color Highlight: Visualizes color values as colors, making it easier for front-end developers to work with styles.
- TODO Highlight: Highlights TODO and FIXME.
- miniapp: Autocompletes Mini-Program tags and attributes.
- Bracket Pair Colorizer: Colors matching brackets, which is very convenient.
- Image preview: Allows previewing images on URIs in the code. I use it to check if I have referenced resources correctly.
- REST Client: HTTP testing, convenient for development, sharing, and mocking.
I use the Winter is Coming Theme + Material Icon Theme for the theme. I personally think the default dark theme is very nice.
3.3 Recommendations#
If it is collaborative development, I recommend using the Git History + Eslint plugins. Of course, Eslint is also necessary for individual development. We use this set of Commit Commitment Specification.
Don't forget to add tracking points during development, such as some statistics. The locations to be tracked should be determined based on the project's needs. For example, PV and UV are automatically tracked by Mini-Program, but other projects still need to be tracked. Alternatively, plan the Nginx log and analyze it. If it is a front-end and back-end separation, front-end developers can use mockjs to create mock interfaces that comply with the interface document.
4. Maintenance#
For user feedback, we automatically submit selected feedback to GitHub issues and assign labels and priorities to them. This is the main repository of our open-source project: oh-bear/2life.
As you can see, the issues are quite messy, so we need to use GitHub projects to create a task board.
By the way, I recommend a small tool called Devhub, which can easily check the issues of the projects you are responsible for.
For these issues, you can create periodic documents, returning to the "Project Initiation" step and starting development for the next minor version.
As you can see, I have never chosen to use Gantt chart software. Although Gantt charts are more intuitive, I don't like to fill them with tasks and create a sense of work pressure. Most importantly, we are not working, we are just developing for fun, so it's better to follow our own preferences.
Alright, that's all for this sharing. I am Airing, and my personal blog is: https://me.ursb.me. Welcome to visit and communicate~