[干货]如何在一天之内完成一款具备cool属性的Android产品<简诗>

96
作者 wingjay
2015.10.05 14:12* 字数 2080

简诗

2016/12/02 更新:
新文章《我的第一款全栈side project》介绍了我在开发简诗 v2.0 中对Android端及服务端累积的一些经验。

2016/11/09 更新:
v2.0正式版下载地址:http://fir.im/vd1r
该正式版中本人添加了服务端,支持了注册登录、数据同步和截屏分享,而且添加了不少很有意思的小功能。
Android 和 Server 源码: https://github.com/wingjay/jianshi

一、简介

实现一款具备cool属性的产品是众多独立开发者都渴望的。
然而,很多独立开发者之所以迟迟无法下手,并非热情不够,而是对于整个开发流程的未知与畏惧。而本文就是介绍本人耗时一天左右完成的一款Android产品的开发流程,从idea,到产品原型及设计,再到code架构与编写
希望读者看完后能对独立开发有不同的认识,然后挥舞起手中的键盘,开发出很cool的个人产品。

二、开发流程

1. idea
首先,你要有一个idea。好的想法来自哪呢?生活。多观察生活中点滴,每当你对现有事物有要抓狂的感觉时,往往就意味着一个绝妙idea的诞生。

当然,不要再闹`只差一个程序员`的系列笑话啦!

举个例子,本人有点文艺情怀,非常希望有个好的记录工具让我以一种优雅而复古的方式记录文字。然而,现有的记录工具大都集社交、多种信息流为一体,绚丽的界面反而让我感觉到一种缺失,找不回曾经字字斟酌的写作感觉。
所以,本文要介绍的就是我为自己开发的一款(自认为)优雅、简洁的写作应用

2. 产品原型和设计稿

这一关,很多开发者不重视且不擅长。

不过也能理解,一般而言,developer更加注重代码层面的美观,逻辑的抽象与性能的优化。然而,作为独立开发者,我们的目标是一款受用户喜爱的产品,而不仅是深藏巷中的好酒。而用户对一款产品最直观的感受,就是界面与交互,只有当用户对UI、UX满意之后,才会去深入感受产品的功能与速度。

 所以,一位合格的独立开发者,一定会在第一时间找到自身产品的槽点然后骂骂咧咧又毫不犹豫地把它修掉。

文末,本人推荐了一些相关的工具,可以帮助开发者快速设计产品原型。
本文的设计草稿来源于Kevin《Producter》一书中的想法,下图为草稿图纸。


小记设计稿


从设计图纸中可以看出,该设计很古典、简洁,而又不失个性,正好是我所追求的。
ok,下面开始写代码!

3. Android架构
各位看官不要急着啪啪啪敲键盘,先思考下这个app会涉及到哪些技术细节,以防后知后觉。

a. 自定义View,容易发现,该产品有三个特点,一是`红点按钮`,二是`竖排文字`,需要自己写新的view来实现;
   三是`字体`,设计稿采用了`康熙字典体`与`文悦古仿宋`。
b. SQLiteDabase数据库.这款产品核心功能是`写和读`,第一版本暂不作服务器端开发(后续本人会抽空实现后台)。
c. 时间,内部的时间会以`中文繁体`的形式显示给用户,如`2015.10.6`会显示成`二零一五年 十月 六日`,
   所以需要实现一个`时间转换器`把数字转换为繁体时间格式。
d. 还有一个容易被忽视的,`布局`。设计稿里看似排版简洁,实际下了很大功夫在`文字排版及间距设计`上。
   作为一款记录工具,文字排版可谓是核心一环,直接影响用户体验。

基本点

4. Code实现
好了,下面就开始舞动键盘啦。

  • 想好产品的名字,本款产品直接命名为<简诗>,寓意简单的小诗,简单的生活
  • Android studio创建一个新工程。包名 com.wingjay.jianshi
  • 创建需要的Activity。这里包含了SplashActivity[产品介绍页], MainActivity[主页面], EditActivity[编辑界面], ViewActivity[浏览界面]。这些是主要的,其它的后续再加。
  • 先完成视图层的实现。
    • SplashActivity[最初产品介绍页] 可以放一张简洁的介绍页面,用handler定时1秒钟跳转到主页面。
    • MainActivity[主页面],先实现竖排文字VerticalTextView,原理很简单,给每个文字字符后加'\n'即可。然后实现红点按钮RedPointView,写一个红色circle shape作为背景,允许更改里面的text内容。
    • EditActivity[编辑界面]ViewActivity[浏览界面] 布局简单,主要包含两个EditText 和 一个RedPointView来执行保存等,这里我们先不实现竖排文字编辑,只要横排即可。
    • 字体,本人采用了TpldKhangXiDictTrial.otf暂时作为主要字体,不过,在编辑和浏览界面的字体仍保持系统默认,防止有些字体丢失之类问题。
  • 然后进行逻辑层的实现。
    • 时间转换器,即将数字时间转化为繁体中文时间,2015.10.6->二零一五年 十月 六日,对于,可逐个字符转换:2->,0->。对于,若小于10则逐个转换,但大于等于10要注意,如11->十一而非一一21->二十一而非二一
    • 获取时间戳,上面讲了将数字时间转换为繁体时间,那么如何获取数字时间呢?这里采用Joda Time 来获取时间如getYear(), getMonthOfYear(), getDayOfMonth()即可。在数据库及应用内部使用的都是Joda Time转换来的秒级时间戳,只有在显示给用户时才把时间戳传给转换器去显示。
  • 最后是数据层的实现

    • 数据库设计,我们要设计一张日记表,包含了

      • id自增长
      • device_id设备id,以后如果要添加帐号及上传服务器可以此标记每个日记来源
      • title,content记录内容
      • created_time, modified_time 更改时间,存储以秒为基准的时间戳
      • deleted_flag 删除标记,若为1则表示删除
    • SQLiteDatabase,需要实现两个类:DbOpenHelperDbUtilDbOpenHelper继承SQLiteOpenHelper,主要负责db的创建更新和对外提供db实例来进行读写。DbUtil主要封装db操作,如读取日记getDiary(long diaryId),该函数会利用DbOpenHelper获取SQLiteDatabase实例来进行读写。

三、粗糙版demo

完成上面几个步骤后,基本可以搭建产品demo,正常实现记录与阅读的功能。而且产品也具有一定味道,不至于湮没大众。读者只需要进行一些bug调试工作即可。
下面给大家看第一版粗糙的demo


介绍页

主界面

阅读页

编辑页

四、改进版demo

当然,上面有点粗糙,而且不支持竖排文字,这是原版设计风格的一大缺失,所以本人在改进版中支持用户选择竖排浏览方式,而且作为一款新产品,获取用户的反馈是极为重要的,故也添加反馈入口(由于没搭后台,只能先让用户以邮件形式反馈😭)。
下面是改进版的demo截屏。


介绍页

主界面

支持左右滑动的竖排方式浏览

支持上下滑动的横排方式浏览

设置界面

简诗-new icon.png

五、下载及版权

  1. 36Kr NEXT推荐。
    稀土掘金 推荐
    [稀土掘金日报] andriod开发新资源新干货
  2. apk 下载网址:JianShi lastest version in Fir.im
  3. 源代码:简诗——GitHub,欢迎各位fork并和我一起丰富简诗
  4. Follow me. 欢迎在Github上follow我哦,😄
  5. 若有幸简诗得到各位喜爱,希望能把邮箱发给本人(私信),之后若有更新会通知你的😄
  6. 设计草稿创意使用已获得作者Kevin同意
  7. 本产品用作分享与学习,若转载须征得本人同意,勿作任何商业用途

六、服务端

本人从2016/09月开始进行服务端的开发,最新的代码请关注 https://github.com/wingjay/jianshi

目前已经完成了v2.0的服务端开发。

如果读者有任何意见,可以与本人联系:yinjiesh@126.com

感谢!

七、必备工具推荐

谢谢!

wingjay

GitHub: https://github.com/wingjay
微博: http://weibo.com/u/1625892654


cool things