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

lijy91 发布于 1月前
无人欣赏。

「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 时的一些经验。

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

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

参考资源

  • https://material.io/icons
  • https://material.google.com/style/color.html

第三方服务

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

  • 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 {

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(); // 当 data 为 User 列表时的示例 new Result<ArrayList>(); ```

客户端

文章详情(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或者客户端的需求欢迎加我微信

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

捐赠

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

暂无回复
登录 或者 注册
格式建议
  • 本站使用 Markdown 格式,想了解这一格式请阅读:《用Markdown语法写文章》
  • 内容框下有实时预览框,请预览后发帖。
  • 文字前面请不要空4个英文空格
  • 每段文字之间请回两次车
  • 贴代码前点击左侧工具栏的“贴代码”按钮(
    ),然后在出现的“enter code here”处贴入你的代码。
  • 回复特定回复的时候,请点击该回复右侧的回复链接,系统将自动创建楼号和@通知。
  • @他人的时候注意,id后面请加一个空格。
  • 使用左侧工具栏“贴链接”按钮(
    )创建的优酷、土豆、youtube视频链接,将自动生成播放区域,不需要使用其他包含方式。
  • 如果要创作长篇格式复杂的帖子,本站建议Mac用户使用Mou软件,离线写好,贴入即可。