前言
本文仅仅是作者在业余时间从零到产生需求到开发一个 App 的个人总结与记录。开发过程中使用了 Google 的跨平台开发框架 Flutter ，移动端和官网都采用 Flutter 来实现，目前来看应该是成本最低的开发方式了。如有异议，请各位大佬轻拍，理性讨论。
为什么要从零到开发一个App
-
从正式成为程序员的第一天起就有一个开发自己作品的梦想，这也是最重要的原因。
-
对抗各种公众号贩卖的焦虑。与其睡前刷刷抖音，不如用这点时间写写代码。对自己的技术进行总结和沉淀。当然这一点出于是对写代码的热情。
-
验证跨端技术在不同端的体验到底如何。
基于以上几点，就有最终开发上线的 App《乐记》，先来看一下最终上线的成果。
最终成果
如果你看下面的截图或者听 App 的名字，应该可以猜出是音乐相关的 App 。为什么叫《乐记》呢？因为《乐记》是我国最早的一部具有比较完整体系的音乐理论著作。而我写的 App 也是我学习乐理过程的记录，因此得名。目前它的主要功能有：
- 乐理列表/详情
- 节拍器
- 登录/注册
- 意见反馈
- 其他
为什么写这么一个 App 呢？几年前和一个老师学过一段时间吉他，在学的过程中老师告诉怎么弹就怎么弹，不知道和弦为什么这么按，也不懂按出来究竟是什么音，即使能弹出来也感到很困惑。因此研究了一段时间的乐理，并作了一些记录。当然乐理是非常庞大的一个体系，目前整理的都是最基本的一些内容，后续会随着学习的深入逐步把内容完善。无论是练习吉他或者其他一些乐器，亦或是一个人开发一个 App 都需要坚持与不断的练习和思考。虽然目前吉他水平也就是弹唱《平凡之路》，但我想会一直坚持下去。等五六十岁的时候和大爷们一起在街边嗨起来。
言归正传，看一下目前开发出来的产品：
官网
官网适配了桌面端浏览器以及手机浏览器
桌面端
手机端
iOS
iPhoneX运行主要页面如下：
Android
红米9运行主要页面如下：
技术栈
| 项目 | 技术栈 | 备注 |
|---|---|---|
| 《乐记》服务端 | SpringBoot（Java） | App端接口 |
| 《乐记》Android/iOS版本 | Flutter | Android/iOS应用 |
| 《乐记》官网 | SpringBoot+Flutter | 地址：music.jiudian.link/ |
基础设施
| 项目 | 价格 | 备注 |
|---|---|---|
| 腾讯云服务器 | 998 RMB | 2核CPU、4G内存、50G高性能云硬盘 |
| 阿里云域名 | 58 RMB | 有效期一年 |
| 苹果开发者账号 | 668 RMB | 有效期一年 |
总计：1724 RMB
开发历程
在确定了想法之后，下一步就是如何开发了，在技术栈选择上，由于要同时支持 iOS 和 Android 系统，所以跨平台方案成为第一选择。目前市面上相对来说比较成熟的移动端跨平台开发方案有 React Native、Weex、Flutter 等。由于前两者都是使用前端的技术栈开发，作者是一名 Android 开发，并且在工作中接触过 Flutter 开发，因此首选 Flutter 作为移动端的技术方案。在开发移动端的过程中 Flutter 2.0 正式发布，Flutter Web 也进入了稳定版，因此也用 Flutter 开发了 Web 版官网。
关于后端技术选择，如果是 Android 开发者可以选择最熟悉的使用 Java ，也就是 SpringBoot 来作为服务端方案，作者最开始工作的前几年用 Spring 相关技术做过一段时间后端开发。而作为一个小项目的后端来说 SpringBoot 提供好的各种 starter 可以很快帮我搭建起整个环境。
选择好技术栈之后，我创建了如下几个项目
- music_backend：SpringBoot项目，提供 App 需要的接口
- music_frontend：SpringBoot项目，用于运行官网
- music_md：整理的乐理文档
- music_theory：Flutter 项目，也就是上面看到的打包出 Android/iOS 的项目
- music_web ：Flutter 项目，官网
我基本上就是按照下面顺序开发的《乐记》这个App。
1. 设计页面
上来就聊这个问题，是因为对我来说这是最难的。下面介绍下我是如何解决页面设计的。
首先我要解决整个 App 的配色问题这里推荐一个网站 Color Hunt ，上面有各种各样的颜色带搭配可以选择，而且有颜色的代码。
选好了主题色，接下来需要有一个 App 整体的设计。这里可参考的网站比较多，我常看的有 花瓣网 和 dribbble
设计网站的设计只是一个参考，最终还需要根据自己 App 的内容、风格和自己的喜好再进行调整。有时候我也需要自己画一些页面。就有了下面的工具 Adobe XD，Adobe XD 是快速且功能强大的 UI/UX 设计和协作工具，最重要的是它是免费的。用它还可以很方便的导出移动端的多倍图。下面是我用它画的闪屏页面，当然这个需要花点时间熟悉一些基本操作。
有了以上几个工具基本差不多了，然后就是应用的 icon ，比如设置页面，我选择的是阿里的 IconFont。有非常多的可商用的 icon 和插画。并且可以直接复制到 Adobe XD，然后在 Adobe XD 里调整大小和颜色。
最后如果想给 App 增加的炫酷效果，比如加一些动画，对于移动端来说非常熟悉的是 airbnb 开源的 lottie 库，可以运行设计师导出的 json 格式的动画。json 文件怎么来？可以用 lottie files ，有非常多的免费的可在线编辑的动画。
好了，经过以上一番折腾设计基本就搞定了，接下来就是开发阶段。
2. App 开发
这部分其实没什么好说的，按照上面的设计，按部就班开发就好了。由于是 Flutter 开发，开发工具可以选择 Android Studio 或者 VSCode，简单看一下 App 的项目结构吧，由于官网也是 Flutter 开发，不做过多介绍，主要是打包的时候 build web 版本就行。
3. 接口开发
这里有一个问题是先开发接口还是先写页面，我个人习惯是先写好页面再开发接口。这里说几个遇到的问题：
- 本想做手机号/验证码登录，后改为免费的网易企业邮箱/验证码。
- 本来想做微信第三方登录，认证微信开发者的过程中发现微信对于个人开发者认证不是特别友好，也放弃了。
还有其他大大小小的问题，都通过曲线救国的方式解决了。
用到的主要技术有：
- SpringBoot：基本Web开发框架
- JPA+MySql：数据存储
- Redis：缓存邮箱验证码
- SpringSecurity+JWT：用户鉴权
- 网易企业邮箱服务：自定义域名发送邮件
看下服务端的项目结构：
4. 联调
联调部分基本是是写好一个页面和一个接口就调一下。因为都是我自己，也没有沟通成本，这块还是比较顺畅的。
5. 服务部署
这块比较做的并不如公司那样规范，比如代码仓库没有关联 CI/CD 工具。这个主要是得在服务器搭建打包代码的环境，一是不想再占用服务器资源，二是一个人就目前的部署方式也可以接受。基本是本地打包然后上传到服务器部署。还有就是一些服务器的监控目前也没有做，这部分之后看情况再优化。
因为在服务器上有多个服务，现在是通过 Nginx 做一层代理，通过不同的二级域名转发到不同的服务。
再有就是我的域名之前是在阿里云买的，后来腾讯云优惠比较大，云服务器又搞到了腾讯云。需要用阿里云的云解析服务把在阿里云的域名解析到腾讯云。此外腾讯云提供了一年有效期的免费 HTTPS 证书。
6. 其他琐事
看似一个小小的 App，其实琐事非常非常多。比如：
-
上架 App Store 各种麻烦的审核机制。新的苹果开发者账号提交的App还有一段时间的莫名其妙的被拒，这种情况只能等。
-
腾讯云服务器备案，提供各种材料
困难
如何自驱
对我来说最困难的只有一点即自我驱动。如何让自己长期坚持去完成一件事情，如何在别人在看电影的时候继续写代码。其实在很早之前已经因为驱动力不足导致不止一个类似的 App 烂尾了。这次就想死磕一下自己。每天晚上定一个任务拆分后小目标，基本上一个小时就能完成。最终虽然不完美但还是开发出来了。上线之后的感觉也是成就感满满，就像是一个困扰多日的 BUG 在解决的一瞬间。
未来：
欢迎关注 QiShare，一起交流，一起进步。
