为了账号安全,请及时绑定邮箱和手机立即绑定

如何一周快速开发上线App?

标签:
WebApp React.JS

本文转自@vczero:http://aissues.com/book.php?id=38385589-D7DA-4988-BA7B-C85EE0464481

最近跟一些同学交流,发现很多同学都有想开发一款上线App的念头。

但是,很多情况下,却没有行动。有很多原因,一个是没有时间,工作太忙;另一个是没有想好怎么做;更多的是不知道一款开发上线App需要多少时间,整个流程是怎么样的。

16年年初那段时间,答应慕课网的乐老师录制一门React Native实战的视频课程http://coding.imooc.com/class/69.html。正好,前段时间写了一个简单的App Demo:寻找附近的厕所。所以,在5月份找了一个周末把App开发上线,6月份的一个周末录制完视频。

第一篇 先回答自己几个问题

首先,在开发App之前,我需要回答自己几个问题。

第一个问题:你的课程的定位初衷是什么?如何结合已有的代码?

当时,考虑到看视频教学的同学大多是初学者居多,因为整个App的涉及知识深度不应该太深。因此,选择可以快速上手的技术是比较合适的。那么,如何节省自己的时间?那就是结合之前写的Demo。

第2个问题:视频录制的节奏?

因为《快速开发App》的技术选型选择了React Native。而React Native变化较快,当时发现0.26+版本的语法都是ES6的。因此,决定选择0.30作为开发版本和录制课程的版本。当时,还存在一个问题,如果视频录制一个月的话,RN 2周一版本迭代,同学们学习起来切换版本的成本太高。因此,选择一个周末就要录制完成。这样,后续视频处理流程就会快一些,也不至于同学们学习的版本落后太多。

第3个问题:冷启动课程的必要性

我个人觉得课程有3类是十分必要的。第一类是:入门实战类。它们可以很好的辅助开发者快速进入某个领域进行研发。第二类是:深入型。可以在某项技术相对成熟的时候,帮助开发者了解内部的实现原理。第三类是:整个产品研发/技术流程类。它们可以往上更加抽象,让开发者可以很好的审视一个产品的诞生、运营等。而,这里,我选择第3类中的某一个细分领域:审视开发一款上线App的整个流程。

冷启动是一个比较大的命题,而,我认为在冷启动的期间,可以低成本的设计整个研发流程是十分有价值的。因此,我觉得这样一个项目可以【更好的冷启动】。

第4个问题:开放源代码?

首先,整个项目十分轻量,也都是使用的开源技术。并且,我不会把它作为商业项目来对待,因此,开源了。地址是:https://github.com/vczero/toilet。同时,也很高兴看到一个同学把我的项目重新实现了一遍,写了一个Android版本。慕课网的老师问我开源会不会影响销量,我说,这个没事。我更希望的是看视频的同学可以在github上协作交流,这个对同学们有好处。而课程定价100多,我觉得也合理,同学们不会有压力。只是,希望能够对某些同学有一些益处

第二篇 关于产品

产品的由来

有一天在上班的途中,突然肚子不舒服,需要急需找到附近的卫生间。有过类似经历的同学,应当知道那种如狂风暴雨来的突然,如黑云密布那种无助......(省略号不代表什么,不要多想)为此,实现了该App。

如何借助现有的技术

对于开发者来说,开发一款App,涉及到的条件还是蛮多的。比如需要服务接口、需要后台编辑系统、需要运营工具等。因此,该案例借助了高德开放平台的免费资源、七牛的免费图片存储、微信公众号的文章编辑系统、阿里云服务部署等。这一切,对于开发一款小型的App已经足够。如果能够极大的运用时代的福利,我们将极大的缩小开发App的时间。希望该项目能给想快速开发App的同学参考且带来益处。

从产品角度设计

我需要考虑该App的使用场景是如何的?因为开发者在找卫生间的时候是急需的,因此,整个App功能不能太复杂。并且,一打开App, 我们就应该能够看到附近的卫生间。同时,很多人使用地图比较少,不清楚方位,这是个十分尴尬的场景。因此,必须要开发导航到卫生间的功能。

还有一点担心,Apple可能会因为App功能过于简单会审核不通过,因此增加阅读和天气模块。在上卫生间的同时,能够阅读一些资讯。

第三篇 效果预览

App已经在苹果市场上线。前段时间,还有一个传统行业的同学邮件我,问愿不愿一起做。目前,我只是把它当作一个低频的工具使用。下面,上几张图:

1

(附近的卫生间)

2

(阅读功能)

3

(实时天气功能)

其实,可以扫描下面的二维码(或者搜索“厕所在哪”)下载。上面的截图为了压缩,所以显示的不清晰。

图片描述

第4篇 如何利用现有的资源

整个App开发只花了2天多的时间,得益于现在互联网可以有很多免费的平台使用。首先,我们来看一下,整个App的业务架构。如下图:

fm

同样,说到产品技术架构,从几个角度展开。思路开阔了,写代码都不是特别难的问题。

开发一个App需要一个后台,没时间开发怎么办?

这里的后台系统,我分为3部分结合使用。第一部分是微信公众号。因为阅读模块,需要展示一些文章。因为,文章的编辑系统使用的是微信公众号。如下图,厕所在哪App的文章就是微信公众号里的文章。

粘贴图片

第二部分就是图片存放在哪?

其实市面可选的图片云服务有很多,这里选择七牛云,可以很好的使用免费空间存储App的图片数据。一般情况下,七牛提供的空间和流量对于小型App是足够的。

第三部分,有文章后台编辑系统了,有图片上传了,那么数据接口怎么办呢?

这里,我使用的是Node.js开发了一个简易的后台系统。是不是需要数据库呢?No, 对于维护一个小的App, 数据库的成本太高。第一不好维护,第二开发者上手比较困难,第三自己的阿里云服务器开一个MongoDB会占用很大内存。因此,这里,使用的使用json文件存储。毕竟也没有涉及到用户数据和大量的数据。 整个后台系统使用简单,就维护几个配置文件。如下图,是后台系统的主界面。

粘贴图片

而后台系统也只干一件事,就是将微信的文章链接和七牛的图片链接维护成一个对象,写进服务端json文件。例如阅读模块-互联网数据的配置如下图:

粘贴图片

是不是后台系统太简单了,这整个开发布会超过半天的。最后客户端读取的数据都是从json文件中来,数据结构可参考:http://123.57.39.116:3000/data/read?type=config

客户端如何开发?

这里选择了React Native。因为RN开发起来的确效率比较高,同时动态性不错,可以比较及时的发布jsbundle文件。整个相对对jsbundle做了本地存储和版本判别,可以参考开源代码。

地图模块如何开发?

其实,很多不了解地图研发的同学,会觉得地图开发是一件特别困难的事。其实,API和接口都比较容易。只要花心思看即可。这里使用高德开发平台,因为它提供的数据很准确和丰富,调用接口也没有什么限制。可以参考:http://lbs.amap.com/

为什么使用Webview?

整个项目不仅使用了RN,还使用webview。因为,一个项目中肯定会涉及到很多技术,而Webview一般情况下是少不了了, 这里,作为演示整个App开发流程是合理的。也给开发节省了不少时间。

讲了上面那么多,有研发基础的同学,应该刻印了解到开发一款App不需要特别复杂的系统。而很多技术的使用也不叫简单。所有,更多的技术细节可以参考:https://github.com/vczero/toilet。目前,该项目也有136的同学关注,希望对大家【冷启动】开发App有一丁点儿益处

如果,有同学需要观看视频的可以到慕课网http://coding.imooc.com/class/69.html观看。建议,是对整个App流程不了解的同学,有一定编程基础,但是没发开发完整App的同学观看,会一行行代码讲解。如果需要深入某个领域技术细节的同学,建议看其他教程。

祝好,早日上架自己的App。

点击查看更多内容
52人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消