版權(quán)聲明：本文原創(chuàng)發(fā)布于公眾號(hào) wingjay，轉(zhuǎn)載請(qǐng)務(wù)必注明出處！ http://www.itdecent.cn/p/cf496fc408b2

簡詩

2016/12/02 更新：
新文章《我的第一款全棧side project》介紹了我在開發(fā)簡詩 v2.0 中對(duì)Android端及服務(wù)端累積的一些經(jīng)驗(yàn)。

2016/11/09 更新：
v2.0正式版下載地址：http://fir.im/vd1r 。
該正式版中本人添加了服務(wù)端，支持了注冊登錄、數(shù)據(jù)同步和截屏分享，而且添加了不少很有意思的小功能。
Android 和 Server 源碼： https://github.com/wingjay/jianshi

一、簡介

實(shí)現(xiàn)一款具備cool屬性的產(chǎn)品是眾多獨(dú)立開發(fā)者都渴望的。
然而，很多獨(dú)立開發(fā)者之所以遲遲無法下手，并非熱情不夠，而是對(duì)于整個(gè)開發(fā)流程的未知與畏懼。而本文就是介紹本人耗時(shí)一天左右完成的一款A(yù)ndroid產(chǎn)品的開發(fā)流程,從idea，到產(chǎn)品原型及設(shè)計(jì)，再到code架構(gòu)與編寫。
希望讀者看完后能對(duì)獨(dú)立開發(fā)有不同的認(rèn)識(shí)，然后揮舞起手中的鍵盤，開發(fā)出很cool的個(gè)人產(chǎn)品。

二、開發(fā)流程

1. idea
首先，你要有一個(gè)idea。好的想法來自哪呢？生活。多觀察生活中點(diǎn)滴，每當(dāng)你對(duì)現(xiàn)有事物有要抓狂的感覺時(shí)，往往就意味著一個(gè)絕妙idea的誕生。

當(dāng)然，不要再鬧`只差一個(gè)程序員`的系列笑話啦！

舉個(gè)例子，本人有點(diǎn)文藝情懷，非常希望有個(gè)好的記錄工具讓我以一種優(yōu)雅而復(fù)古的方式記錄文字。然而，現(xiàn)有的記錄工具大都集社交、多種信息流為一體，絢麗的界面反而讓我感覺到一種缺失，找不回曾經(jīng)字字斟酌的寫作感覺。
所以，本文要介紹的就是我為自己開發(fā)的一款(自認(rèn)為)優(yōu)雅、簡潔的寫作應(yīng)用。

2. 產(chǎn)品原型和設(shè)計(jì)稿

這一關(guān)，很多開發(fā)者不重視且不擅長。

不過也能理解，一般而言，developer更加注重代碼層面的美觀，邏輯的抽象與性能的優(yōu)化。然而，作為獨(dú)立開發(fā)者，我們的目標(biāo)是一款受用戶喜愛的產(chǎn)品，而不僅是深藏巷中的好酒。而用戶對(duì)一款產(chǎn)品最直觀的感受，就是界面與交互，只有當(dāng)用戶對(duì)UI、UX滿意之后，才會(huì)去深入感受產(chǎn)品的功能與速度。

 所以，一位合格的獨(dú)立開發(fā)者，一定會(huì)在第一時(shí)間找到自身產(chǎn)品的槽點(diǎn)然后罵罵咧咧又毫不猶豫地把它修掉。

文末，本人推薦了一些相關(guān)的工具，可以幫助開發(fā)者快速設(shè)計(jì)產(chǎn)品原型。
本文的設(shè)計(jì)草稿來源于Kevin在《Producter》一書中的想法，下圖為草稿圖紙。

小記設(shè)計(jì)稿

3. Android架構(gòu)
各位看官不要急著啪啪啪敲鍵盤，先思考下這個(gè)app會(huì)涉及到哪些技術(shù)細(xì)節(jié)，以防后知后覺。

a. 自定義View，容易發(fā)現(xiàn)，該產(chǎn)品有三個(gè)特點(diǎn)，一是`紅點(diǎn)按鈕`，二是`豎排文字`，需要自己寫新的view來實(shí)現(xiàn)；
   三是`字體`，設(shè)計(jì)稿采用了`康熙字典體`與`文悅古仿宋`。
b. SQLiteDabase數(shù)據(jù)庫.這款產(chǎn)品核心功能是`寫和讀`，第一版本暫不作服務(wù)器端開發(fā)(后續(xù)本人會(huì)抽空實(shí)現(xiàn)后臺(tái))。
c. 時(shí)間，內(nèi)部的時(shí)間會(huì)以`中文繁體`的形式顯示給用戶，如`2015.10.6`會(huì)顯示成`二零一五年 十月 六日`，
   所以需要實(shí)現(xiàn)一個(gè)`時(shí)間轉(zhuǎn)換器`把數(shù)字轉(zhuǎn)換為繁體時(shí)間格式。
d. 還有一個(gè)容易被忽視的，`布局`。設(shè)計(jì)稿里看似排版簡潔，實(shí)際下了很大功夫在`文字排版及間距設(shè)計(jì)`上。
   作為一款記錄工具，文字排版可謂是核心一環(huán)，直接影響用戶體驗(yàn)。

基本點(diǎn)

4. Code實(shí)現(xiàn)
好了，下面就開始舞動(dòng)鍵盤啦。

• 想好產(chǎn)品的名字，本款產(chǎn)品直接命名為<簡詩>，寓意簡單的小詩，簡單的生活。

• Android studio創(chuàng)建一個(gè)新工程。包名 com.wingjay.jianshi。

• 創(chuàng)建需要的Activity。這里包含了SplashActivity[產(chǎn)品介紹頁], MainActivity[主頁面], EditActivity[編輯界面], ViewActivity[瀏覽界面]。這些是主要的，其它的后續(xù)再加。

• 先完成視圖層的實(shí)現(xiàn)。

  • SplashActivity[最初產(chǎn)品介紹頁] 可以放一張簡潔的介紹頁面，用handler定時(shí)1秒鐘跳轉(zhuǎn)到主頁面。
  • MainActivity[主頁面]，先實(shí)現(xiàn)豎排文字VerticalTextView，原理很簡單，給每個(gè)文字字符后加'\n'即可。然后實(shí)現(xiàn)紅點(diǎn)按鈕RedPointView，寫一個(gè)紅色circle shape作為背景，允許更改里面的text內(nèi)容。
  • EditActivity[編輯界面] 和 ViewActivity[瀏覽界面] 布局簡單，主要包含兩個(gè)EditText 和 一個(gè)RedPointView來執(zhí)行保存等，這里我們先不實(shí)現(xiàn)豎排文字編輯，只要橫排即可。
  • 字體，本人采用了TpldKhangXiDictTrial.otf暫時(shí)作為主要字體，不過，在編輯和瀏覽界面的字體仍保持系統(tǒng)默認(rèn)，防止有些字體丟失之類問題。

• 然后進(jìn)行邏輯層的實(shí)現(xiàn)。

  • 時(shí)間轉(zhuǎn)換器，即將數(shù)字時(shí)間轉(zhuǎn)化為繁體中文時(shí)間，2015.10.6->二零一五年 十月 六日，對(duì)于年，可逐個(gè)字符轉(zhuǎn)換：2->二,0->零。對(duì)于月和日，若小于10則逐個(gè)轉(zhuǎn)換，但大于等于10要注意，如11->十一而非一一， 21->二十一而非二一。
  • 獲取時(shí)間戳，上面講了將數(shù)字時(shí)間轉(zhuǎn)換為繁體時(shí)間，那么如何獲取數(shù)字時(shí)間呢？這里采用Joda Time 來獲取時(shí)間如getYear(), getMonthOfYear(), getDayOfMonth()即可。在數(shù)據(jù)庫及應(yīng)用內(nèi)部使用的都是Joda Time轉(zhuǎn)換來的秒級(jí)時(shí)間戳，只有在顯示給用戶時(shí)才把時(shí)間戳傳給轉(zhuǎn)換器去顯示。

• 最后是數(shù)據(jù)層的實(shí)現(xiàn)

  • 數(shù)據(jù)庫設(shè)計(jì)，我們要設(shè)計(jì)一張日記表，包含了

• id自增長

• device_id設(shè)備id，以后如果要添加帳號(hào)及上傳服務(wù)器可以此標(biāo)記每個(gè)日記來源

• title,content記錄內(nèi)容

• created_time, modified_time 更改時(shí)間，存儲(chǔ)以秒為基準(zhǔn)的時(shí)間戳

• deleted_flag 刪除標(biāo)記，若為1則表示刪除

  • SQLiteDatabase，需要實(shí)現(xiàn)兩個(gè)類：DbOpenHelper 和 DbUtil。DbOpenHelper繼承SQLiteOpenHelper，主要負(fù)責(zé)db的創(chuàng)建更新和對(duì)外提供db實(shí)例來進(jìn)行讀寫。DbUtil主要封裝db操作，如讀取日記getDiary(long diaryId)，該函數(shù)會(huì)利用DbOpenHelper獲取SQLiteDatabase實(shí)例來進(jìn)行讀寫。

三、粗糙版demo

完成上面幾個(gè)步驟后，基本可以搭建產(chǎn)品demo，正常實(shí)現(xiàn)記錄與閱讀的功能。而且產(chǎn)品也具有一定味道，不至于湮沒大眾。讀者只需要進(jìn)行一些bug調(diào)試工作即可。
下面給大家看第一版粗糙的demo

介紹頁

主界面

閱讀頁

編輯頁

四、改進(jìn)版demo

當(dāng)然，上面有點(diǎn)粗糙，而且不支持豎排文字，這是原版設(shè)計(jì)風(fēng)格的一大缺失，所以本人在改進(jìn)版中支持用戶選擇豎排瀏覽方式，而且作為一款新產(chǎn)品，獲取用戶的反饋是極為重要的，故也添加反饋入口(由于沒搭后臺(tái)，只能先讓用戶以郵件形式反饋??)。
下面是改進(jìn)版的demo截屏。

介紹頁

主界面

支持`左右滑動(dòng)`的豎排方式瀏覽

支持`上下滑動(dòng)`的橫排方式瀏覽

設(shè)置界面

簡詩-new icon.png

五、下載及版權(quán)

1. 36Kr NEXT推薦。
   稀土掘金 推薦
   [稀土掘金日?qǐng)?bào)] andriod開發(fā)新資源新干貨
2. apk 下載網(wǎng)址：JianShi lastest version in Fir.im
3. 源代碼：簡詩——GitHub，歡迎各位fork并和我一起豐富簡詩。
4. Follow me. 歡迎在Github上follow我哦，??
5. 若有幸簡詩得到各位喜愛，希望能把郵箱發(fā)給本人(私信)，之后若有更新會(huì)通知你的??
6. 設(shè)計(jì)草稿創(chuàng)意使用已獲得作者Kevin同意
7. 本產(chǎn)品用作分享與學(xué)習(xí)，若轉(zhuǎn)載須征得本人同意，勿作任何商業(yè)用途

六、服務(wù)端

本人從2016/09月開始進(jìn)行服務(wù)端的開發(fā)，最新的代碼請(qǐng)關(guān)注 https://github.com/wingjay/jianshi。

目前已經(jīng)完成了v2.0的服務(wù)端開發(fā)。

如果讀者有任何意見，可以與本人聯(lián)系：yinjiesh@126.com。

感謝！

七、必備工具推薦

• 產(chǎn)品原型制作
  • Sketch，最佳原型制作工具
  • Dribbble，養(yǎng)成一雙發(fā)現(xiàn)并懂得美的眼睛
  • 新奇-Get quickly inspiration!
• 顏色搭配及icon制作
  • ColorHunt-色彩搭配
  • icon在線制作
• 移動(dòng)應(yīng)用分發(fā)
  • Fir.im
  • 豌豆莢
  • play store

謝謝！

wingjay

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