滴滴DoKit2.0 - 泛前端开发者的百宝箱

给我一个支点，我将撬动整个地球。
--阿基米德

有了DoKit，我将帮你节省出一个年假。
--***泛前端开发者

Dokit图标

9月17日，滴滴开源项目DoraemonKit 在 GitHub上的star数突破10000，成为滴滴首个star数破万的开源项目。

下文统一简称为Dokit

github star

DoKit 是一个功能集合面板，能够让每一个App快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具，而且能够完美在 DoKit 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具，功能强大，接入方便，便于扩展。

自从去年10月15号对外发布，不到一年的时间里，DoKit 的成长也非常迅速：从初步的13项工具到现在30余项工具。star数量进入全球开源项目前1000的行列；目前超过 4500+ 的 App 接入使用，其中包括BAT等知名大厂用户；多次被各个主流技术媒体和知名公众号报道；超过 20+ 天上榜 Github Trendeing；多次收到内外部用户的好评反馈；以及40位contributors提供的107条来自于外部开发者的PR。

DoKit2.0来了

Github地址：https://github.com/didi/DoraemonKit

想当初移动开发刚开始萌芽的时候一切都还处于混沌状态，我们没有轮子，所有的功能需求全靠自己的双手一砖一砖码起来。后来随着社区的发展，各种轮子开始出现在移动端开发的代码里，为我们节省了大部分的时间，我们也终于可以抽空和自己的女神聊聊天，幻想着下班后的幸福生活。有人说“这个世界是靠懒人来推动的”，而程序员肯定是这里面的佼佼者，我们封装了各种轮子来方便自己和他人，只为了少写几行代码。近几年来，移动开发进入了新的时代，各种各样的轮子层出不穷。但是在线下辅助开发工具这一块貌似还是一片空白，并没有好的解决方案。

想象这样一个场景：

当大雄正在和胖虎（产品经理）撕逼打得不可开交的时候，UI同学跑过来了。

静香：“大雄，大雄，你为什么不按设计稿来，你这个按钮的颜色明显不对啊，绿得不够鲜艳啊”。

大雄：“不可能啊，我就是按照设计稿来的啊，颜色值不是"#00FF7F"吗，有可能是手机屏幕的问题，这个是冷屏。”

静香:“我不管，肯定是你开发的时候没有对着设计稿来，你给我看下代码颜色值。”

于是此时大雄处于胖虎和静香的双面夹击下一脸无奈。俗话说得好：“Talk is cheap，Show me the code”。虽然最终我们通过代码验证了自己的清白，可是类似的场景每天都在发生。

可是我们是谁？我们可是要改变世界的一群人，我们的目标可是星辰大海。在长时间的斗争中，我们默不作声，一行一行的通过代码在掌握着主动权。终于有一天DoKit诞生了，当我们屏幕中出现那个小图标的时候，我的嘴角露出了一丝微笑，我知道我终将赢下这场战斗。下班后当我在和女神在电影院的时候，而你却还在和UI小姐姐为了一个像素争吵。为了广大程序员的福利，我和我的团队终于把DoKit的价格打了下来。DoKit来了，他将出现在每一个开发者的屏幕中，为你节省出一个年假的时间。

工具面板

Dokit诞生记

某天当大雄正在对Dokit进行功能升级的时候，静香突然跑了过来。

静香：“大雄，大雄，听说你最近开发了一个Dokit，他们都说很厉害，用了以后都快节省出一个年假了，你快给我看看，我年假都快用完了。”

（此时大雄的脸上露出一丝的傲娇的表情，心想：曾经你们对我爱搭不理，现在我让你们高攀不起。）

大雄：“没有，没有，都是一些小功能，主要都是是团队的功劳。”

（说着说着掏出了刚买的xxx旗舰机，首款真5G、大浴霸摄像头，瀑布屏......。扯远了，拉回来，拉回来。）

大雄：“你看桌面这个图标，它又大又圆，我们姑且叫它"哆啦A梦"吧。它将出现在你的每一个页面之中，为开发者提供了快速到达工具列表页面的入口，下面就让我来详细介绍里面的几个主要工具的相关功能吧。”

(以下对话虚构，如有雷同，纯属巧合)

常用工具篇

常用工具

常用工具篇之沙盒浏览

测试小姐姐:“大雄，大雄，急，刚刚发生了一个线上bug，用户信息对不上导致订单支付失败，我在测试环境回归了一下功能并且复现了bug，我怀疑是本地保存的数据有问题，可是咋们这边的开发都已经下班了，你帮我想想办法吧。”

大雄：“别急别急，慢慢来，让我打开Dokit的沙盒浏览看下。你看，长按可以进行文件分享和删除，点击能进入看到文件内容详情，果然，你看这个订单id字段保存了null数据，难怪会支付失败。赶快让他们回来加班改bug。以后再有数据问题的时候你再也不用去找移动端小哥哥通过IDE查看了，分分钟又节省出一段晚餐的时间。”

测试小姐姐:“嗯，我马上打电话让他们回来加班。这个Dokit好厉害啊，来，大雄，晚上的鸡腿赏给你了。”

常用工具篇之位置模拟

位置模拟

测试小姐姐：“大雄，大雄，老板说我们app的定位好像有点问题，让我回归下这个功能，我拿着手机在办公室都溜达好几圈了，但是它一点反应都没有，再这样下去让老板看到还以为我偷懒呢，你快帮我想想办法吧，晚餐我把大鸡腿分给你吃。”

大雄：“这还不简单啊，你让你们的开发小哥哥接入Dokit，打开模拟定位开关，拖动定位图标，一键帮你修改GPS经纬度。你再也不用绕着办公室溜达了，不过你这么胖，是该多运动运动了”。

话刚说完，测试小姐姐投来了一个眼神，大雄猝......

常用工具篇之DBView

数据库调试

领导：“大雄啊，我最近发现一个神器，集成了它以后，只要手机和PC处于同一局域网环境内，它就能直接将手机中app的数据库展现在pc的浏览器上进行修改，能极大的提升开发效率。但是它有一点不好就是我每次都要跳出去查看手机的wifi的ip地址，严重影响我的开发节奏啊，你看看能不能帮我集成到Dokit里，直接打开就能看到当前的Wifi的ip地址。这是它的github地址：https://github.com/amitshekhariitbhu/Android-Debug-Database。”

大雄：“好的，领导，没问题，包在我身上，保证完成任务。”

（毕竟下个月的晋升提名就要开始了，好不容易领导亲自找到我下达任务，我还不得好好表现啊，完成的好，升级加薪还不是妥妥的。）

经过一个下午的努力，大雄终于搞定了这个功能并且取了一个高大上的名字:DBView,屁跌屁跌的跑到领导那邀功去了。

性能监控篇

性能监控模块

测试小姐姐：“大雄，大雄，最近老有用户反应我们的app操作不够流畅，而且流量走得很多，领导下命令了，下一个版本新功能先缓缓，我们重点对app的性能和接口来一波优化，毕竟用户就是上帝，上帝用得不爽了，我们也就失业了。”

大雄：“好的，好的，我这上礼拜刚买的房子开始还房贷，我可不想就这样失业了。我们马上开会讨论并调研性能优化方案。”

1、Google:Android性能优化

2、charles抓包

3、合并相关接口

4、优化布局层级

5、解决大部分的内存泄漏

6、耗时功能异步加载

7、压缩图片大小

......

经过一个多礼拜的熬夜加班，大雄团队通过各种方式优化了app的性能，尤其在低端机上进行了大量的测试，性能确实得到了大幅提升。这下终于可以交差了。

在周五的例行周会上,大雄代表团队对这次优化方案的成果进行了汇报，并对比了优化前后的各项性能指标。

领导看着大雄凌乱而发腻的头发以及熊猫眼对大雄说：“大雄啊，你们团队这次表现很出色啊，诺，我特意给你们申请了一波团建费用，你带兄弟们去“大保健”吧，啊不，是放松放松，毕竟身体是革命的本钱啊。”

正当大雄开心的准备领赏的时候，领导又发话了。
领导：“大雄啊，我觉得你们这次的性能优化方案效果特别好，你看我们现在业务迭代这么快，隔壁兄弟部门他们忙着写业务呢，没有时间搞优化啊，要不你帮着他们优化优化性能吧。”

大雄：“应该的，应该的，都是同一个公司的嘛，等下开会完以后我们就着手准备优化。”
大雄强行顶着快要睁不开的双眼，心想：我就知道哪有这么好的事，原来是后面还有活等着我呢，可是谁让他是领导呢，毕竟下礼拜又要还房贷了。但是公司那么多app，一个个优化下去，什么时候是个头啊。我得想个一劳永逸的办法，让性能优化提前到业务开发过程中去，要是测试的同学也能直接参与进来那就好了。

于是经过一个周末的思考和调研并结合前段时间的性能优化经验，大雄制定了一整套解决方案。又经过了一个礼拜没日没夜的加班，大雄团队将这套解决方案集成到了Dokit中，果然效果显著。这下大雄团队终于有时间可以去“大保健”了。

视觉工具篇

视觉工具

静香:“喂，大雄，这么巧你也来这家店吃晚饭啊，我这边还有个位置了，要不你过来一起坐吧。”

女神竟然主动邀请大雄一起吃晚饭，这么好的机会怎么能错过呢。

刚坐下没多久静香久开口了:“大雄啊，听说你前段时间开发的性能优化方案在团队内广受好评啊，我们UI组也想要一个差不多的工具。你上次教我的那个去什么开发者调试选项里去打开布局边界什么的，真是太难用了。每家手机厂商打开的地方好像都不一样，真是急死我了。你看我的需求是这样的：

1、能看到控件的颜色。<br />
2、控件是否对齐、居中。<br />
3、最好能看到UI的层级。<br />
巴拉巴拉......
”

大雄心想着我们团队一个产品经理都应付不过来了，现在又来了一个。但是谁让她是女神呢，大雄只能苦笑着答应了下来。

忘了是第几个加班的周末，大雄终于完成了女神的需求。礼拜一一大早大雄就拿着手机跑到了静香的位置上开始炫耀并得到了认可和表扬。大雄趁机约女神去看刚上映的漫威大片。看着静香脸上那灿烂的笑容，大雄觉得这个周末过得特别值。原来程序员的快乐就是这么简单。

Weex工具篇

Weex专区

周五本就是个值得期待的日子，对于大雄尤其如此，经历过多少个孤独的夜晚和期待，终于等到了和静香去看电影。等待下班的过程总是相当漫长，好不容易熬到了下班点。大雄合上MBP的瞬间下意识的瞄了一眼领导的办公室，办公室的门缓缓的被推开，大雄突然有一种不祥的预感。

领导：“大雄啊，准备下班了吗？”

大雄：“没没没，刚准备下楼吃饭，领导有啥吩咐？”

领导：“也没啥事，这不最近公司新开了个业务线吗，为了开发效率，采用了weex技术栈，听说我们这边的Dokit相当强大，无所不能，问能不能让我们在Dokit中帮他们也集成几个工具，提升一下他们的开发效率。”

大雄：“好的，没问题，领导。我准备.....”

（话还没说完）

领导：“没问题就好，刚好下班了，一起吃个饭吧，我们聊聊相关功能。”

（吃饭中......）

经过一个多小时的晚饭时间，weex工具的相关功能是确定了。

1、Weex中Js的console日志过滤
2、weex缓存查看
3、weex页面信息和性能信息
4、扫码快速进入Weex调试模式

可是此刻的大雄心急如焚，心里一直惦记着的是8点半的电影。

领导：“对了，大雄，下个月的晋升名单我已经帮你提交上去了，加油!”

一扫刚才的阴霾，大雄露出了无比灿烂的微笑。在道谢完领导以后，大雄飞奔着去了电影院，在电影开始的前一秒他坐在了女神的身旁。

Dokit，一个爱情事业双丰收的神器，你还在等什么?

听我的，集成它！

开发者自定义篇

一天大雄照常打开电脑准备进行写代码，发现QQ上有一个闪烁的陌生头像。原来是社区里的一个兄弟在对接了Dokit以后觉得效果特别好，但是他们团队想要自定义某些功能，可是在翻遍了文档以后发现没有相关介绍，于是就找上了大雄。大雄回顾了以下代码，发现以前忙着写功能，忽视了代码的结构并没有统一的对外api实现。正好这次有机会，大雄对代码进行一波重构。如果你也想要在Dokit中加入自己的自定义功能或者想要参与Dokit的功能开发，可以参考下面的实现：

Android版

实现IKit接口，就是你在工具面板上看到的入口。

public class KitDemo implements IKit {
    @Override
    public int getCategory() {
        return Category.BIZ;
    }

    @Override
    public int getName() {
        return R.string.dk_kit_demo;
    }

    @Override
    public int getIcon() {
        return R.mipmap.dk_sys_info;
    }

    @Override
    public void onClick(Context context) {
        DokitIntent dokitIntent = new DokitIntent(DemoDokitView.class);
        dokitIntent.mode = DokitIntent.MODE_SINGLE_INSTANCE;
        DokitViewManager.getInstance().attach(dokitIntent);
    }

    @Override
    public void onAppInit(Context context) {

    }
}

同时继承AbsDokitView，就是你在桌面上看到的悬浮窗。

public class DemoDokitView extends AbsDokitView {
    @Override
    public void onCreate(Context context) {

    }

    @Override
    public View onCreateView(Context context, FrameLayout rootView) {
        return LayoutInflater.from(context).inflate(R.layout.dk_demo, rootView, false);
    }

    @Override
    public void onViewCreated(FrameLayout rootView) {
        TextView tvClose = findViewById(R.id.tv_close);
        tvClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                DokitViewManager.getInstance().detach(DemoDokitView.this);
                //ToastUtils.showShort("关闭");
            }
        });
    }

    @Override
    public void initDokitViewLayoutParams(DokitViewLayoutParams params) {
        params.width = DokitViewLayoutParams.WRAP_CONTENT;
        params.height = DokitViewLayoutParams.WRAP_CONTENT;
        params.gravity = Gravity.TOP | Gravity.LEFT;
        params.x = 200;
        params.y = 200;
    }
}

最后在Application的OnCreate中通过以下方法注入即可：

public class App extends Application {
    private static final String TAG = "App";

    @Override
    public void onCreate() {
        super.onCreate();
        List<IKit> kits = new ArrayList<>();
        kits.add(new KitDemo());
        DoraemonKit.install(this, kits);
    }
}