从零开发上线一款App需要多少钱？终于有答案了！

前言

多少有点标题党，开发一个 App 的成本肯定和需求的复杂程度有关。本文仅仅是作者在从零到产生需求到开发一个 App 的个人总结与记录。开发过程中使用了 Google 的跨平台开发框架 Flutter ，移动端和官网都采用 Flutter 来实现，目前来看应该是成本最低的开发方式了。如有异议，请各位大佬轻拍，理性讨论。

为什么要从零到开发一个App

• 从正式成为程序员的第一天起就有一个开发自己作品的梦想，这也是最重要的原因。
• 对抗各种公众号贩卖的焦虑。与其睡前刷刷抖音，不如用这点时间写写代码。对自己的技术进行总结和沉淀。当然这一点是对写代码的热情。
• 作为程序员经常被其他行业的亲戚朋友问：开发一个淘宝或者写一个游戏多少钱，应该很简单吧，那我就用亲身实践来解答这个问题。

基于以上几点，就有最终开发上线的 App《乐记》，先来看一下最终上线的成果。

最终成果

如果你看下面的截图或者听 App 的名字，应该可以猜出是音乐相关的 App 。为什么叫《乐记》呢？因为《乐记》是我国最早的一部具有比较完整体系的音乐理论著作。而我写的 App 也是我学习乐理过程的记录，因此得名。目前它的主要功能有：

• 乐理列表/详情
• 节拍器
• 登录/注册
• 意见反馈
• 其他

为什么写这么一个 App 呢？几年前和一个老师学过一段时间吉他，在学的过程中老师告诉怎么弹就怎么弹，不知道和弦为什么这么按，也不懂按出来究竟是什么音，即使能弹出来也感到很困惑。因此研究了一段时间的乐理，并作了一些记录。当然乐理是非常庞大的一个体系，目前整理的都是最基本的一些内容，后续会随着学习的深入逐步把内容完善。无论是练习吉他或者其他一些乐器，亦或是一个人开发一个 App 都需要坚持与不断的练习和思考。虽然目前吉他水平也就是弹唱《平凡之路》，但我想会一直坚持下去。等五六十岁的时候和大爷们一起在街边嗨起来。

言归正传，看一下目前开发出来的产品：

官网

https://music.jiudian.link/

官网适配了桌面端浏览器以及手机浏览器

桌面端

手机端

iOS

iPhoneX运行主要页面如下：

Android

红米9运行主要页面如下：

开发成本

这块主要分为两部分硬件成本（云服务器等归为这部分）和人力成本。

技术栈

基础设施

总计：1724 RMB

人力成本

对于互联网公司来说，人力成本几乎是最高的，这部分根据程序员及其他岗位的工作年限不同，薪资差距非常大。因此这部分相对来说比较主观。我根据拉勾2021年3月1日发布的《互联网人薪资报告》1-2月的月薪来估算这部分。

这部分是粗略计算的，提交代码的时间都是在周末和晚上（特别喜欢在晚上夜深人静的时候写代码，特别有感觉😄），因此并没用特别精确的统计，估算如下：

总计：17500 RMB

至此我们算出了开发《乐记》的成本：1724 + 17500 = 19224 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 页面，什么时候联调。我基本上就是按照下面顺序开发的《乐记》这个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. 接口开发

这里有一个问题是先开发接口还是先写页面，我个人习惯是先写好页面再开发接口。这里说几个遇到的问题：

• 本想做手机号/验证码登录，后改为免费的网易企业邮箱/验证码（迫于贫穷的无奈之举，虽然短信包也不是特别贵，可毕竟成本已经接近2w了不是😂）。
• 本来想做微信第三方登录，认证微信开发者的过程中发现微信对于个人开发者认证不是特别友好，也放弃了。

还有其他大大小小的问题，都通过曲线救国的方式解决了。

用到的主要技术有：

1. SpringBoot：基本Web开发框架
2. JPA+MySql：数据存储
3. Redis：缓存邮箱验证码
4. SpringSecurity+JWT：用户鉴权
5. 网易企业邮箱服务：自定义域名发送邮件

看下服务端的项目结构：

4. 联调

联调部分基本是是写好一个页面和一个接口就调一下。因为都是我自己，也没有沟通成本，这块还是比较顺畅的。

5. 服务部署

这块比较做的并不如公司那样规范，比如代码仓库没有关联 CI/CD 工具。这个主要是得在服务器搭建打包代码的环境，一是不想再占用服务器资源，二是一个人就目前的部署方式也可以接受。基本是本地打包然后上传到服务器部署。还有就是一些服务器的监控目前也没有做，这部分之后看情况再优化。

因为在服务器上有多个服务，现在是通过 Nginx 做一层代理，通过不同的二级域名转发到不同的服务。

再有就是我的域名之前是在阿里云买的，后来腾讯云优惠比较大，云服务器又搞到了腾讯云。需要用阿里云的云解析服务把在阿里云的域名解析到腾讯云。此外腾讯云提供了一年有效期的免费 HTTPS 证书。

6. 其他琐事

看似一个小小的 App，其实琐事非常非常多。比如：

• 上架 App Store 各种麻烦的审核机制。新的苹果开发者账号提交的App还有一段时间的莫名其妙的被拒，这种情况只能等。
• 腾讯云服务器备案，提供各种材料，来来回回大概十几天
• 不满于之前的设计，反反复复的修改
• 上架 Android 商店，估计大部分都需要软著，暂时先放弃

困难：

如何自驱

技术上的困难其实都不能算困难。对我来说最困难的就是自我驱动。如何让自己长期坚持去完成一件事情，如何在别人在看电影的时候继续写代码。《乐记》第一次提交代码是在去年的十一假期，至今也有大半年时间了。其实在很早之前已经因为驱动力不足导致不止一个类似的 App 烂尾了。这次就想死磕一下自己。每天晚上定一个任务拆分后小目标，基本上一个小时就能完成。最终虽然不完美但还是开发出来了。上线之后的感觉也是成就感满满，就像是一个困扰多日的 BUG 在解决的一瞬间。