业余时间如何开发一个 App？出于好奇心 QiShare 带你体验一下 _ 创作者训练营第二期
官网适配了桌面端浏览器以及手机浏览器
桌面端
手机端
iOS
iPhoneX 运行主要页面如下：
Android
红米 9 运行主要页面如下：
技术栈
基础设施
总计：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 里调整大小和颜色。
ge)
最后如果想给 App 增加的炫酷效果，比如加一些动画，对于移动端来说非常熟悉的是 airbnb 开源的 lottie 库，可以运行设计师导出的 json 格式的动画。json 文件怎么来？可以用 lottie files ，有非常多的免费的可在线编辑的动画。
好了，经过以上一番折腾设计基本就搞定了，接下来就是开发阶段。
2. App 开发
这部分其实没什么好说的，按照上面的设计，按部就班开发就好了。由于是 Flutter 开发，开发工具可以选择 Android Studio 或者 VSCode，简单看一下 App 的项目结构吧，由于官网也是 Flutter 开发，不做过多介绍，主要是打包的时候 build web 版本就行。
3. 接口开发
这里有一个问题是先开发接口还是先写页面，我个人习惯是先写好页面再开发接口。这里说几个遇到的问题：
本想做手机号/验证码登录，后改为免费的网易企业邮箱/验证码。
本来想做微信第三方登录，认证微信开发者的过程中发现微信对于个人开发者认证不是特别友好，也放弃了。
还有其他大大小小的问题，都通过曲线救国的方式解决了。
用到的主要技术有：
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论