学习制作一个App

本文假定读者是想通过自己的学习和努力，从0到1去制作自己的一款APP产品。

我将从独立开发者的角度，尽可能描述一条可行的路径。

第一步：制作产品原型

产品原型

不懂开发的人可能觉得软件产品就只是程序员埋头吭哧吭哧搞出来的，但编码其实只是其中一个环节，并不是全部。你可以把产品原型理解为房子的设计图，简单的房子可能不需要设计，但稍微复杂一点的，都是离不开图纸的。

有些程序员想自己做个东西，也不需要和别人协作，觉得这个麻烦，就跳过这一步了。但我建议最好还是先做出原型来，它不仅可以帮助你把头脑中的想发快速呈现出来，更重要的是，在你设计原型的时候，你已经把产品在脑海中做了一遍了，这样对你在后面进行软件的模块设计的时候是有极大的好处的。

这里推荐几个做 App 产品原型的软件：墨刀 、Axure。如果不是特别清楚原型是什么东西的话，可以到墨刀的讨论区去看看，有一些分享的作品。

第二步：产品页面设计

这年头颜值越来越重要了，对于大部分开发者来说，可能做不到设计惊艳，但是要做到简洁大方并不是一件很难的事情。

秘诀就是要统一，统一好颜色、字体的使用场景，这样出来的视觉效果一般不会很差。

设计规范

这里有篇文章介绍了设计规范的内容，你可以去参考一下：APP界面设计规范编写指南。

还有一个就是图标的问题，阿里巴巴图标库有非常多图标，一般App都够用了。

一般来说，如果是我自己开发的应用，很少去动手设计页面，都是直接用一套成熟的设计规范，然后对着产品原型来动手编码了。比如 App 的就可以使用谷歌出品的 Material Design，后面提到的 Flutter 就已经内置了 Material Design 的 UI 组件了。

如果你要自己动手设计页面的话，在 mac 上面我推荐使用 sketch 。

第三步：代码编写

接下来就可以考虑开始动手干了。首先我们要先定一套技术方案，一般来说，我们做一个普通的App，需要搞定的东西有除了手机App，还有相关的API服务接口。

App 客户端

首先我们看一下App端，目前手机平台有两大阵营，一个是 Google 开源的 Android 系统，一个是苹果的 iOS 系统，它们使用的开发语言和开发工具都是不一样的。其中 Android 可以使用Java 或者 Kotlin 语言来原生开发，iOS可以使用 Objective-C 或者 Swift 语言。

如果你要两个平台都各做一个，那开发成本将会非常高。我建议你考虑直接采用跨平台的技术，比如Google 的 Flutter （Dart语言）或者 Facebook 的 Reactive Native （JavaScript语言）技术。

当然你要先调研一下你要做的产品在相关平台下实现有没有可行性，这方面可以咨询一下相关的技术专家。也可以按照经验原则，你在别的App看到的功能，一般都能实现。

无论你使用什么技术，一般来说在 App 端需要做的事情一般不外乎编写页面，编写交互逻辑和数据通信，一般采用HTTP协议。

这里涉及到的技术点比较多，我的经验是直接通过一个完整的Demo源码来边学边做是比较高效的学习方法，这个Demo最好足够简单，但是有完整的逻辑交互和通信过程，比如登录和数据列表。找Demo可以通过搜索引擎、GitHub、开源中国等平台。

还有一个值得分享的经验是要以官方文档作为主要参考和学习材料，资料够准确，你也会慢慢就能快速索引到相关知识点。遇到一些不懂的知识点要善于Google 或者百度，一门相对成熟的技术，网上都有很多资料的。

API 服务端

如果说App是可以看得见，摸得着的前端，那 API 就是看不到的后端了。这一块的技术就更复杂了，你的App用户是1000人，1W人，100W人，后面系统的设计复杂度是完全不一样的。当然，这里不去讨论负载均衡、分布式设计这些复杂的东西，当前我们能搭建一个简单的web服务就好了。

虽然我自己用 Java 比较多，但如果你是刚开始接触后端开发，你可以试一下 expressjs，上手很快，对于简单的接口开发是足够啦，语言是 JavaScript，刚好你可以结合一下使用 Reactive Native 来开发App，降低了不少学习和开发成本。

后台管理端

这个是用来方便你后面运营App用的，比如要录入一些资料，管理用户等。要完成这个，在懂得写接口的基础上，你还要学习怎么编写网页。

如果你前面的事情都能搞定，那 HTML 和 CSS 这些对你来说就是小菜一碟了。如果你还有精力的话，你可以顺便把 vuejs 也看一下，这里推荐一个后台模块：vue-element-admin。

如果实在学不动了，也可以用 boostrap + jquery 来搭建一套视觉还不错的后台系统。

到此，你的 App 就算是完成了，测试和上架那些就不提了。推广和运营又是另外一个话题了，有机会再聊。

补充学习资料：

1. Flutter实战
2. 阮一峰 JavaScript 教程
3. 廖雪峰 JavaScript 教程
4. HTML/Css W3School 中文教程

本文由 Agile Studio 原创，转载请添加原文链接：http://blog.nowait.xin/Learn-To-Build-An-App/

关于我们：

我们是一支由资深独立开发者和设计师组成的团队，成员均有扎实的技术实力和多年的产品设计开发经验，提供软件定制服务。