从0到1制作一个App

简介: 教你从零到一学习制作和开发一款自己的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 中文教程

关于AgileStudio

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

相关文章
|
XML Android开发 数据格式
Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)
Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)
525 0
Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)
|
数据安全/隐私保护
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
202 0
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
|
开发工具 数据安全/隐私保护 iOS开发
iOS上架App Store之Appuploader制作描述文件和证书
iOS上架App Store之Appuploader制作描述文件和证书
iOS上架App Store之Appuploader制作描述文件和证书
|
JavaScript
uniapp制作app顶部原生导航栏输入框的内容自动变化
uniapp制作app顶部原生导航栏输入框的内容自动变化
399 0
uniapp制作app顶部原生导航栏输入框的内容自动变化
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
261 0
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
|
存储 编解码
短视频app制作,做好音视频编码很重要
短视频app制作,做好音视频编码很重要
|
Windows
FL Studio20.9中文版免费制作音乐的软件app
互联网不发达之时,音乐制作似乎只适合音乐专业人士去完成,但是随着互联网的快速发展,一方面计算机普及到每家每户,另一方面音乐制作软件的发展,凭借一台计算机即可完成音乐制作。得益于互联网技术的快速发展,使得音乐制作成本大大降低,使得业余人士也能够将其发展为自己的兴趣爱好,下面将阐述什么是音乐制作。
762 0
短视频app制作,正确认识成品开发与定制开发
短视频app制作,正确认识成品开发与定制开发
制作条形码的手机App推荐
条形码自发明以来,给我们的生活带来极大便利,怎么才能快速的用手机创建条形码呢?下面就给大家介绍一款小编常用的制作条形码的App--二维码和条形码生成器。使用它,不仅可以制作条形码、制作二维码,还能快速扫描二维码和条形码,并且支持查看制作和扫描的历史,功能强大,关键还是免费的!
|
搜索推荐 UED
短视频app制作,小功能点的完善也很重要
短视频app制作,小功能点的完善也很重要