用JS打造一款记帐APP——开篇序

多年前用php写过web版记账，近期用React框架写了记账APP并开源到了github上。这个系列文章用来记录记帐APP的开发过程与心得。
虽然是一款简单功能的小软件，但五脏俱全。有WebApp/NativeApp/Restful API，覆盖了比较多的JS框架和组件库，本系列教程会对开发过程中用到的JS框架进行系统的分析和学习，并对开源组件的使用做专门的教程学习，甚至会有自己造轮子的篇幅。意在帮助大家系统的对React框架深入学习和应用。

项目Github地址

• KeepAccounts

App下载体验

• android

• ios 由于诸多限制暂未上线

  
  
  logo

开发环境

• macOS
• node
• npm
• atom
  注：如连接无法打开请使用代理

项目技术栈

• 前端webApp：react & redux
• 前端nativeApp：react-native & redux
• 后端API: node.js(Koa2)
• 数据库：MongoDB (Mongoose)
• 缓存：Redis
• web打包: webpack

项目教程大纲

项目涉及的内容比较多，我会定期推出相关文章教程来一步一步学习用JS来开发一款APP。大纲规划由以下内容完成，

1.React基础篇

手工构建react项目目录结构，一步一步配置webpack

2.React组件篇

详细讲解项目中引用的第三方组件库的使用方法及构建思想

3.React业务逻辑篇

使用第三方组件来构建项目的业务逻辑

4.React高级篇

自建组件并引用到项目中

5.Koa2基础篇

搭建Koa2项目目录，构建后端API数据接口,开发模式与生产模式启动配置

6.Koa2组件篇

使用第三方组件来完成token登陆,引用Mongoose来连接管理MongoDB数据库，配置路由及code数据接口

7.数据库MongoDB基础篇

讲解对数据库MongoDB的安装、配置、权限管理、创建

8.数据库MpngoDB应用篇

讲解在Koa2中使用Mongoose来连接管理MongoDB中的数据库内容

9.React Native基础篇

初始化项目，目录结构解析，引入Redux与第三方UI库

10.React Native应用篇

使用Navigator来构建场景过渡，使用react-native-elements库来构建tab

11.React Native高级篇

微信登陆功能的实现，webView的应用，原生app与web进行通信，体验app中的混合开发

写这教程的初衷

首先面向前端初级开发者，通过系列教程的学习，对React框架有整体认识并能自主完成开发，在JS全栈工程师道路上更进一步。其次，面向更多普通人能够把记帐这件事重视起来，让记帐成为一种习惯，进而学会理财和投资，实现财富自由。从我开始影响身边的人，从每个学习本教程的工程师开始影响我们身边的人。

记账最直接的作用就是摸清收入、支出的具体情况，看看自己到底挣了多少钱，花了多少钱，钱都花在什么地方。还可以知道维持正常的日常生活需要多少钱，剩下的钱可以考虑进行消费和投资，这是个人财务规划的基础。

微信每周一篇写作践行群

每周一篇写作践行群自愿加入，入群即表示同意一起写作一起成长，大家互相赞赏鼓励！