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

时间 2019-11-07

原文原文链接

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

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

复制代码

9月17日，滴滴开源项目DoraemonKit 在 GitHub上的star数突破10000，成为滴滴首个star数破万的开源项目。
下文统一简称为Dokit
前端

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

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

DoKit2.0来了

Github地址：github.com/didi/Doraem…git

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

想象这样一个场景： github

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

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

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

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

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

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

Dokit诞生记

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

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

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

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

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

大雄：“你看桌面这个图标，它又大又圆，咱们姑且叫它"哆啦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的性能和接口来一波优化，毕竟用户就是上帝，上帝用得不爽了，咱们也就失业了。”

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

一、Google:Android性能优化
二、charles抓包
三、合并相关接口
四、优化布局层级
五、解决大部分的内存泄漏
六、耗时功能异步加载
七、压缩图片大小
......

通过一个多礼拜的熬夜加班，大雄团队经过各类方式优化了app的性能，尤为在低端机上进行了大量的测试，性能确实获得了大幅提高。这下终于能够交差了。
在周五的例行周会上,大雄表明团队对此次优化方案的成果进行了汇报，并对比了优化先后的各项性能指标。
领导看着大雄凌乱而发腻的头发以及熊猫眼对大雄说：“大雄啊，大家团队此次表现很出色啊，诺，我特地给大家申请了一波团建费用，你带兄弟们去“大保健”吧，啊不，是放松放松，毕竟身体是革命的本钱啊。”
正当大雄开心的准备领赏的时候，领导又发话了。领导：“大雄啊，我以为大家此次的性能优化方案效果特别好，你看咱们如今业务迭代这么快，隔壁兄弟部门他们忙着写业务呢，没有时间搞优化啊，要不你帮着他们优化优化性能吧。”
大雄：“应该的，应该的，都是同一个公司的嘛，等下开会完之后咱们就着手准备优化。” 大雄强行顶着快要睁不开的双眼，心想：我就知道哪有这么好的事，原来是后面还有活等着我呢，但是谁让他是领导呢，毕竟下礼拜又要还房贷了。可是公司那么多app，一个个优化下去，何时是个头啊。我得想个一劳永逸的办法，让性能优化提早到业务开发过程当中去，要是测试的同窗也能直接参与进来那就行了。
因而通过一个周末的思考和调研并结合前段时间的性能优化经验，大雄制定了一整套解决方案。又通过了一个礼拜没日没夜的加班，大雄团队将这套解决方案集成到了Dokit中，果真效果显著。这下大雄团队终于有时间能够去“大保健”了。

视觉工具篇

静香:“喂，大雄，这么巧你也来这家店吃晚饭啊，我这边还有个位置了，要不你过来一块儿坐吧。”
女神居然主动邀请大雄一块儿吃晚饭，这么好的机会怎么能错过呢。
刚坐下没多久静香久开口了:“大雄啊，据说你前段时间开发的性能优化方案在团队内广受好评啊，咱们UI组也想要一个差很少的工具。你上次教个人那个去什么开发者调试选项里去打开布局边界什么的，真是太难用了。每家手机厂商打开的地方好像都不同，真是急死我了。你看个人需求是这样的：
一、能看到控件的颜色。
二、控件是否对齐、居中。
三、最好能看到UI的层级。
巴拉巴拉...... ”
大雄心想着咱们团队一个产品经理都应付不过来了，如今又来了一个。可是谁让她是女神呢，大雄只能苦笑着答应了下来。
忘了是第几个加班的周末，大雄终于完成了女神的需求。礼拜一一大早大雄就拿着手机跑到了静香的位置上开始炫耀并获得了承认和表扬。大雄趁机约女神去看刚上映的漫威大片。看着静香脸上那灿烂的笑容，大雄以为这个周末过得特别值。原来程序员的快乐就是这么简单。

Weex工具篇

周五本就是个值得期待的日子，对于大雄尤为如此，经历过多少个孤独的夜晚和期待，终于等到了和静香去看电影。等待下班的过程老是至关漫长，好不容易熬到了下班点。大雄合上MBP的瞬间下意识的瞄了一眼领导的办公室，办公室的门缓缓的被推开，大雄忽然有一种不祥的预感。
领导：“大雄啊，准备下班了吗？”
大雄：“没没没，刚准备下楼吃饭，领导有啥吩咐？”
领导：“也没啥事，这不最近公司新开了个业务线吗，为了开发效率，采用了weex技术栈，据说咱们这边的Dokit至关强大，无所不能，问能不能让咱们在Dokit中帮他们也集成几个工具，提高一下他们的开发效率。”
大雄：“好的，没问题，领导。我准备.....”
（话还没说完）
领导：“没问题就好，恰好下班了，一块儿吃个饭吧，咱们聊聊相关功能。”
（吃饭中......）
通过一个多小时的晚饭时间，weex工具的相关功能是肯定了。

一、Weex中Js的console日志过滤
二、weex缓存查看
三、weex页面信息和性能信息
四、扫码快速进入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);
    }
}
复制代码