缘起

不久前在知乎读到一篇文章,讲如何激励自己每天进步。链接 (我最开始看到的文章好像不是这篇,当时还看到作者讲自己最开始是用秒表当计分器的事,如果有人恰好知道的话欢迎评论区放一下链接)

那篇知乎文章最后讲到了作者将自己的想法和别合作做成了App。几年前做出一款产品,直到去年文章还有更新。不过最近在我自己的手机上用不了了。正好借此机会,自己做一个。

现在各种各样自我管理、打卡的 App 也不少了。有一些新点子,一边做一边规划一边修改吧。

(更新:现在第一个可用版本完成后,自己每天坚持在用,在记录自己的生活,感觉还不错,还发现一些有趣的趋势,比如自己有段时间狂刷鬼灭之刃、经常叫外卖,分数直线下降hhh)

想法

这个项目大致可以称为 TODO List 升级版。添加的功能有:

  • 项目记分功能
  • 每日任务和单次任务
  • 任务记录
  • 分数变化趋势图

核心功能之外,还有用户注册登录相关的模块。一套项目做下来,有了一个完整的、有意义的项目,也能够学习相关的技术。并且,前后端分离,每一端都可以用不同的技术来实现,如果想要学习什么技术,就可以拿这个项目来练手。

技术

选这些纯粹是为了想学习一下。一边读文档一边开发吧。

桌面应用:Electron
因为自己每天还是用电脑的时间比较多,加上正想了解一下 Electron,然后自己 macOS、Linux、Windows 三个系统都有,测试也方便。现在在 Ubuntu 和 Mac 上测试过可以用。

UI 组件: React.js
前端小白目前还只会 React,为了不再增加额外的学习成本,UI 组件部分就先暂时沿用自己熟悉的框架。当整个项目大致成型之后,可以用 Vue 来重写一遍,借机学习一下。

状态管理:Mobx
研究生最后 Capstone 课程的大项目用了 Redux,当时由于时间紧迫,忙于学习具体如何实现,并确保代码能够正常运行,做出项目原型,有不少地方都是一知半解。而且 Redux 一写就要先写很多模板代码,要添加或者修改什么功能的时候,就要写很多代码。那时候就对 Redux 印象不太好。正巧那时候看到 Medium 有一篇文章讲 MobX,看了看官方文档的简介,觉得写起来确实比较简洁,思想也很容易理解。

(项目做完以后,发现状态管理的基本思想都是相通的,回过头去再看 Redux 背后的思想也挺容易理解的。代码还是要多写,以后再写别的项目试试 Redux。)

后端: Node.js (Express) + MongoDB
后端的功能比较简单,沿用之前项目用的技术,比较熟悉。

一切从创建一个 SPA 开始

想法、技术选型大致确定了,饼画得比较大。但是,一切都还要从创建项目开始。

创建 App

在 Github 上建了个 Repo 之后克隆到本地,然后使用 create-react-app 在同目录中创建了 React 应用。

git clone [your repo link]

npx create-react-app ./repo-name

code repo-name/

然后就在 VS Code 里开心地开发啦

最开始的结构

列出一些主要文件:

src/
    App.js
    App.css
    index.js

最开始就是修改 App.js。三个按钮一个显示框,使用了 antd 的一些组件。

// App.js
import React, { Component } from 'react';
import './App.css';
import { Row, Button, Icon } from 'antd';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      score: 0
    }
    this.increase = this.increase.bind(this)
    this.decrease = this.decrease.bind(this)
  }

  increase(){
    this.setState({
      score: this.state.score + 1
    })
  }

  decrease(){
    this.setState({
      score: this.state.score - 1
    })
    console.log(this.state.score)
  }

  render() {
    return (
      <div className="App">
        <Row>
          <Button className="operation" onClick={this.increase}>
            <Icon type="plus" />
          </Button>
        </Row>
        <Row>
          <Button className="operation" onClick={this.decrease}>
            <Icon type="minus" />
          </Button>
        </Row>
        <div className="score">
          <h2>{this.state.score}</h2>
        </div>
      </div>
    );
  }
}

export default App;

极简的项目架构写好了,下一篇主要记录使用 LocalStorage 实现部分数据管理功能的探索。