一个APP的迭代(2) - 基础篇

本篇主要介绍做出最基础的功能APP

用户的基础需求

写日记

查看日记

修改日记

删除日记

无论多复杂的APP都是从最基础的功能开始的，例如像微信，一开始也就只有通讯录和聊天功能，后来逐渐迭代，就有了公众号、小程序等功能，万丈高楼平地起嘛。

这里我觉得，如果要打造一款产品，一开始就想得太远想得太多功能，我觉得也不太现实，毕竟精力与能力是有限的。

但从另一个角度来看，用户喜欢简单、有趣的产品。

4个基础需求：写日记、查看日记、修改日记、删除日记，创建以下三个页面

最基础的功能页面

写日记页面

查看日记页面

修改日记页面

前端技术方案 ，Cordova 、Angular2、Ionic2、TypeScript

创建ionic2项目参考 ionic2官网

Angular2 参考 Angular2中文网

TypeScript 参考 TypeScript中文网

是的，日记APP就这三个页面，写日记查看日记删日记，用户打开日记APP首先看到的是日记列表，日记列表的右下角有添加日记功能，点击日记列表项可以查看日记，长按日记列表项会弹出删除日记、修改日记的菜单。



看上去很简单，但是从技术的角度来看，一点也不简单，因为要考虑软件架构的问题。

功能细分

读取日记列表

读取单条日记列表

保存日记

修改日记

删除日记

日记数据是保存在本地的sqlite轻量级的数据库，还要单独为sqlite做一个简单的orm框架，orm框架是必须的，除非是打算做完这个版本APP就不做了。这里先做这个框架，TypeScript的类定义代码如下:

class Entity
{
constructor(dbname: string){}
init<T>(entityModel: { new(): T }): Entity{}
getDBName(): string{}
createTable(colums: Array<ColumnInfo> | any){}
insertDatas<T>(_data: Array<T>): Promise<boolean>{}
insertData<T>(data: T): Promise<boolean>{     }
where<T>(where: T | string){   }
async  updateData<T>(_data: T | string): Promise<boolean>{}
async  saveData(data: any): Promise<any> {     }
getData<T>(): Promise<Array<T>>{ }
doQuery<T>(sql: string): Promise<Array<T>>{    }
async  deleteData(): Promise<boolean>{ }
dropTable(){   }
onfail(t, e){   }
toArray<T>(obj): Array<T>{    }
toUpdateArray<T>(obj): Array<T>{   }
}

class ColumnInfo
{
name: string;
type: string;
}
class ColumnForceType
{
name: string;
type: string;
}

总共有1000多行代码，没错，单单是这个orm就要1000多行代码，主要是想告诉大家，即使是这三个简单的页面也要写很多基本代码。

可是这个ORM有什么用呢？因为可以这样用,见下面的代码：

定义一个表模型

import { attachment } from './attachment';
import { Table, Column, ColumnBoolean } from "../../Models/Library/Entity";

@Table("note_details")
export class note_details
{
constructor() { }
@Column('char(36) PRIMARY KEY  NOT NULL')
id: string;
@Column('varchar(255) DEFAULT NULL')
title: string;
@Column('text')
content: string;
@Column('varchar(50) DEFAULT NULL')
weather: string;
@Column('char(36) NOT NULL')
user_id: string;
@Column("DATETIME DEFAULT (datetime(CURRENT_TIMESTAMP,'+8 hour'))")
create_time: string
@Column("DATETIME DEFAULT (datetime(CURRENT_TIMESTAMP,'+8 hour'))")
update_time: string;
@Column("DATETIME DEFAULT (datetime(CURRENT_TIMESTAMP,'+8 hour'))")
modified_time: string;
@ColumnBoolean
@Column("bit(1) NOT NULL DEFAULT  'true'")
valid: boolean;
@Column("bit(1) NOT NULL DEFAULT  'false'")
is_sync: boolean;
photos: Array<attachment>;
}

还有一部代码没帖子出来，这里就略过了，ORM使用方法如下

//diaryInfoModel:note_details是一条记录
var noteDataBaseService = new DataBaseService(this.dbName, note_details);
var result =  noteDataBaseService.SaveRecordNative(diaryInfoModel);

用orm的好处是可以简化开发，开发效率高。

接下来实现日记类相关方法的代码：

export class DiaryService
{
constructor(){ }
async DeleteDiary(id: string): Promise<boolean>{}
async PushDiaryNative(diaryInfoModel: note_details): Promise<boolean>{    }
async FecthDiaryById(diaryId: string): Promise<note_details>  { }
async FecthDiarys(page: number): Promise<Array<note_details>> {}
}

封装了orm代码后，再去写业务类的代码就简法很多了





至此一款具有增删改查的文本日记类APP就大功告成了

最后你需要用ionic cordova命令编译成apk和签名，然后才能发布到应用市场。

cordova命令请参考cordova官网

很快就会有用户使用，用户使用的过程中会提一些很好的意见。

目前该app还只能本地使用，日记并不能备份到服务器，如遇换手机时就需要备份，然后在另一台手机还原了。

下一篇博文 网络篇 ，主要介绍在此功能上添加备份日记功能的迭代。

想要看效果的朋友，可以下载完整版 小励日记app 。