lijy91 (Lijy91)

「daza.io」个人全端开源项目的 Android & iOS 客户端都上线了

lijy91 — Sun, 11 Dec 2016 21:52:04 +0800

「daza.io」是一款基于技能树（正在实现）的技术内容聚合应用，根据你的技能对内容进行筛选，让你在这个信息过载的时代里更高效地获取你所需的内容。

自上次发文章之后已经过了 2 个月了，我也在 11 月 19 号结束了一个人的旅行（历时 59 天）回到了深圳，专心于完成这个全端项目的客户端开发，终于在 12 月 2 号 iOS 版上线 AppStore，12 月 7 号 Android 上线到 GooglePlay。

最初我将 iOS 版定价为 1 元，但是后来和一朋友聊天时聊到这个项目能为用户提供什么价值的问题，后来想想目前这个项目能给用户提供的价值是有限的，所以就调为免费的了。

访问网站

获取源码

Star ! Star ! Star !

应用截图

Android 的界面布局与 iOS 版基本保持一致，但均采用了原生的控件实现，这里就不放截图了。

获取

快速获取（自动识别系统）： http://a.app.qq.com/o/simple.jsp?pkgname=io.daza.app

iOS 版

Android 版

已上架多个国内主流应用市场

一些小技巧

以下是我觉得比较值得分享的小技巧。

设计

对于我来说 UI 才是最头痛的，在没有设计师帮忙的情况下一切都得自己来了，下面是我在做 UI 时的一些经验。

选用成熟的配色方案
使用相同风格的图标（尽量使用比较全的图标库）
尽量保持简洁的界面设计（实用至上）
与系统风格保持一致
合适的字体尺寸以及边距等
设计要符合使用场景（很多使用侧边栏导航的应用就是反面教材）

我在项目里使用了 Material Design 提供的配色（Blue Grey）和图标，在两个系统上看起来都非常的和谐。

参考资源

第三方服务

使用第三方服务就是为了减少研发成本，但一定要慎重选用。下面介绍这个项目使用的一些第三方服务。

DaoCloud > 使用了 Docker 镜像构建，自有主机功能。 > 当前项目已经完全实现自动部署。
阿里云 > 使用了 ECS 云主机
七牛云 > 使用了云存储，免费 SSL 证书
云巴 > 使用了推送服务
GrowingIO > 用于统计
BugHD > 用于 Crash 收集
AdMob > 广告

API

使用了 REST 风格进行设计，每个接口所返回的数据结构均保持一致。

数据结构示例：

{
    "code": 0,
    "message": "...",
    "errors": [
        {
            "code": 10000,
            "field": "user",
            "message": "用户 不存在。"
        }
    ],
    "pagination": {
        "total": 10,
        "per_page": 10,
        "current_page": 1,
        "last_page": 1,
        "from": 1,
        "to": 10
    },
    "data": {
        ...
    }
}

code: 错误码 > 当错误码不为 0 时代表发生错误。
message: 错误消息
errors: 错误列表 > 当发生多个错误时返回错误列表，客户端根据列表返回的进行相应的处理。
pagination: 分页对象 > 仅当 data 字段为数组时才返回。 "total": 总数 "per_page": 每页显示数量 "current_page": 当前页码 "last_page": 最后一页面页码 "from": 开始Id "to": 结束Id
data: 数据（对象 / 数组） > 在实现时使用泛型对 data 进行处理。

泛型数据处理示例（Java）：

public class Result<T> {

    private int code;
    private String message;
    private List<Error> errors;
    private Pagination pagination;
    private T data;

    public Result() {
    }

    public boolean isSuccessful() {
        return this.code == 0;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public List<Error> getErrors() {
        return errors;
    }

    public void setErrors(List<Error> errors) {
        this.errors = errors;
    }

    public Pagination getPagination() {
        return pagination;
    }

    public void setPagination(Pagination pagination) {
        this.pagination = pagination;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}

// 当 data 为 User 时的示例
new Result<User>();
// 当 data 为 User 列表时的示例
new Result<ArrayList<User>>();

客户端

文章详情（WebView 交互）

文章详情页面因为排版相关原因，并没有采用原生的开发方式，而是直接加载一个外部链接

外部链接：

https://daza.io/in-app/articles/{id}

因为 WebView 此时是没有保存用户状态的，所以需要将客户端的用户登录 Token 相关信息传递给 WebView，即在加载完毕后执行 JavaScript 代码写入。

Java:

// 开启 JavaScript 及 localStorage支持
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);

// 页面加载完毕后将相关数据保存到localStorage里。
public void onPageFinished(WebView view, String url) {
    String script = "javascript:";
    if (Auth.check()) {
        script += "localStorage.setItem('auth.id', '" + Auth.id() + "');\n";
        script += "localStorage.setItem('auth.user', '" + Auth.user().toJSONString() + "');\n";
        script += "localStorage.setItem('auth.jwt_token', '" + Auth.jwtToken().toJSONString() + "');\n";
    } else {
        script += "localStorage.clear();\n";
    }
    mWebView.loadUrl(script);
}

完整代码： https://github.com/lijy91/daza-android/blob/master/app/src/main/java/io/daza/app/ui/InAppBrowserActivity.java

Swift:

func webViewDidFinishLoad(webView: UIWebView) {
    if (!Auth.check()) {
        return
    }
    let standardUserDefaults = NSUserDefaults.standardUserDefaults()

    let authId = Auth.id();
    let authUser = standardUserDefaults.stringForKey("auth.user")
    let authJwtToken = standardUserDefaults.stringForKey("auth.jwt_token")
    var script = ""
    script += "localStorage.setItem('auth.id', '\(authId)');\n"
    script += "localStorage.setItem('auth.user', '\(authUser!)');\n"
    script += "localStorage.setItem('auth.jwt_token', '\(authJwtToken!)');\n"
    webView.stringByEvaluatingJavaScriptFromString(script)
}

完整代码： https://github.com/lijy91/daza-ios/blob/master/Daza/Controllers/InAppBrowserController.swift

DeepLink 支持

支持 DeepLink 后在 WebView 里直接可以通过自定义的 URL 来打开相应的页面，避免与 WebView 更麻烦的操作。

目前支持的链接：

daza://users/{user_id}
daza://topics/{topic_id}
daza://articles/{article_id}
daza://articles/{article_id}/comments

由于安卓的 WebView 不支持这个 DeepLink，所以需要做一些处理：

public WebViewClient mWebViewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if (url.startsWith("daza://")) {
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.setData(Uri.parse(url));
            startActivity(intent);
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
}

关于作者

目前正处于自由职业的状态，如果有 API 或者客户端的需求欢迎加我微信

如果你有什么好想法想告诉我，或者想加入讨论组（注明加入讨论组），请加我微信。

捐赠

如果你觉得我的工作对你有帮助，那你可以为项目捐赠运营费用。

「daza.io」这将是我独立完成全端开发的项目

lijy91 — Thu, 13 Oct 2016 17:13:47 +0800

最近三年的工作经历，让我有机会接触到不同技术栈的项目，并且从中积累了不少各个技术栈的开发经验，虽然技术深度不够，但可以用不同技术视角去思考项目的设计和开发，例如：以客户端开发的视角去思考 API 的设计、用客户端开发的思路去开发前端项目等，然而这些经验都分散在了我这两年半时间里做的大大小小的项目里。

所以我希望可以将我的这些经验归纳总在「daza.io」这个项目里，它的实质是一个内容聚合项目（参考了即刻的形式），用程序去收集一些可能感兴趣的文章，并通过其他用户对于文章的评判，以达到筛选到优质内容，提高学习效率。

另外它还有另外一个作为，为我的其他小项目提供数据。最简单的一个例子就是最近在写的个人博客，其中有一个模块就是用地图展示我旅行的足迹，数据就是来源于它。

我的进步离不开开源，所以「daza.io」也是全部开源的

「daza.io」是打杂的拼音，也是对一种自嘲，其实个人感觉敢自称自己是打杂的人综合能力都是挺强的。

主页：http://daza.io
接口：http://api.daza.io

LOGO

LOGO 是请我一个设计师朋友设计的，个人非常喜欢他的设计，与他合作的两年来也得到了挺多关于设计及用户体验上的经验。

网站截图

技术栈

REST

本人是非常喜欢文档先行的工作方式的，先用文档将思路整理一遍，然后在开发的时候再次完善。这次我在对比了多个文档工具最终选择了 Swagger。

Swagger

查看文档： http://api.daza.io/docs

后端（API Only）

在最终采用 Laravel 之前，我一度已经在使用 Sails.js 开发了，但由于考虑到代码被其他项目重用及市场现状，并且上半年负责的项目刚好使用了 Laravel。

Laravel 5.3
MySQL

前端

使用了现在非常火的 Vue.js 框架开发，肯定有人会问，现在 Vue.js 2.0 都已经发布了，为什么不用 2.0 写。那是因为这个项目在 5 月就已经创建了，所以在现在在使用 2.0 进行开发自己的个人博客项目，一但把 1.x 和 2.0 的一些差异了解得差不多后就会升级。

Vue.js 1.x
vuex
vue-router
vue-resource
vue-validator

客户端

iOS

使用 Swift 2.3 进行开发，基本参考了今日头条和即刻的设计，目前已经完成主要功能。

备注：将会以付费软件的形式发布到 AppStore

Android

尚未开始！

部署

项目其实通过 Docker + DaoCloud 实现了自动化部署，只要把代码推送到 GitHub，DaoCloud 将会自动构建并部署。

Docker
DaoCloud
七牛云存储

项目地址

加入讨论

如果你对这个项目有兴趣，想吐槽，想提建议，为项目提供服务，欢迎加以下讨论群。

关于我

欢迎同行交流或者有好工作机会的朋友加我微信。

支持一下

如果你觉得我的代码写得还不错对你有帮助，请扫下面二维码。

利用 Alfred 快速访问 Coding 项目

lijy91 — Fri, 22 Jan 2016 10:32:17 +0800

对于一个所有项目数已经 60+ 的重度 Coding 用户来说，每次需要找到一个项目时是非常痛苦的，这个问题在 2015 年中的时候已经反馈过张老板了，给出的解决方案也不尽理想。所以才有了这个插件的诞生~~~

使用

依赖

本插件依赖 Node.js 以及 Alfred 2

P.S. 你必需购买 Powerpack 才能使用本插件

安装

下载插件到本地，并双击安装

配置

获取 Token 后按以下方法配置 Token

方法 1（推荐）

$ cd ~/
$ touch .acw_config.json

编辑 ~/.acw_config.json 文件，设置 Token

{
    "token": "<access_token>"
}

方法二

打开 Alfred 设置界面 -> 选择 Workflows -> 选择左侧 Coding.Net 项目 -> 双击 Script Filter（Coding 图标）

编辑 Script 增加 -t 参数

/usr/local/bin/node main.js -q "{query}" -t "<access_token>"

使用

option + space 启动 Alfred 2
输入前缀 c 再输入搜索关键字即可以
输入 c -c 即可以清空数据缓存

项目

项目托管在 GitHub，欢迎大家来提意见 https://github.com/lijy91/alfred-coding-workflow

作者

lijy91 如果你喜欢这个插件，并且你还有码币，欢迎来打赏我