滴滴DoKit2.0 - 泛前端開發(fā)者的百寶箱

給我一個支點(diǎn)上鞠，我將撬動整個地球。
--阿基米德

有了DoKit芯丧，我將幫你節(jié)省出一個年假芍阎。
--***泛前端開發(fā)者

Dokit圖標(biāo)

9月17日椒袍，滴滴開源項目DoraemonKit 在 GitHub上的star數(shù)突破10000，成為滴滴首個star數(shù)破萬的開源項目。

下文統(tǒng)一簡稱為Dokit

github star

DoKit 是一個功能集合面板钥星，能夠讓每一個App快速接入一些常用的或者你沒有實現(xiàn)的一些輔助開發(fā)工具、測試效率工具秽誊、視覺輔助工具炫狱，而且能夠完美在 DoKit 面板中接入你已經(jīng)實現(xiàn)的與業(yè)務(wù)緊密耦合的一些非通有的輔助工具鄙早，功能強(qiáng)大，接入方便省古，便于擴(kuò)展白嘁。

自從去年10月15號對外發(fā)布彭谁，不到一年的時間里唱矛，DoKit 的成長也非常迅速：從初步的13項工具到現(xiàn)在30余項工具。star數(shù)量進(jìn)入全球開源項目前1000的行列；目前超過 4500+ 的 App 接入使用，其中包括BAT等知名大廠用戶蚌卤；多次被各個主流技術(shù)媒體和知名公眾號報道锦聊；超過 20+ 天上榜 Github Trendeing芽淡；多次收到內(nèi)外部用戶的好評反饋抚岗；以及40位contributors提供的107條來自于外部開發(fā)者的PR件已。

DoKit2.0來了

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

想當(dāng)初移動開發(fā)剛開始萌芽的時候一切都還處于混沌狀態(tài)鸠姨，我們沒有輪子祟峦，所有的功能需求全靠自己的雙手一磚一磚碼起來。后來隨著社區(qū)的發(fā)展家肯，各種輪子開始出現(xiàn)在移動端開發(fā)的代碼里龄砰，為我們節(jié)省了大部分的時間，我們也終于可以抽空和自己的女神聊聊天讨衣，幻想著下班后的幸福生活换棚。有人說“這個世界是靠懶人來推動的”，而程序員肯定是這里面的佼佼者反镇，我們封裝了各種輪子來方便自己和他人固蚤，只為了少寫幾行代碼。近幾年來歹茶，移動開發(fā)進(jìn)入了新的時代夕玩，各種各樣的輪子層出不窮你弦。但是在線下輔助開發(fā)工具這一塊貌似還是一片空白，并沒有好的解決方案燎孟。

想象這樣一個場景：

當(dāng)大雄正在和胖虎（產(chǎn)品經(jīng)理）撕逼打得不可開交的時候禽作，UI同學(xué)跑過來了。

靜香：“大雄揩页，大雄旷偿，你為什么不按設(shè)計稿來，你這個按鈕的顏色明顯不對啊爆侣，綠得不夠鮮艷啊”萍程。

大雄：“不可能啊，我就是按照設(shè)計稿來的啊累提，顏色值不是"#00FF7F"嗎尘喝，有可能是手機(jī)屏幕的問題，這個是冷屏斋陪。”

靜香:“我不管置吓，肯定是你開發(fā)的時候沒有對著設(shè)計稿來无虚，你給我看下代碼顏色值⊙苊”

于是此時大雄處于胖虎和靜香的雙面夾擊下一臉無奈友题。俗話說得好：“Talk is cheap，Show me the code”戴质。雖然最終我們通過代碼驗證了自己的清白度宦，可是類似的場景每天都在發(fā)生。

可是我們是誰告匠？我們可是要改變世界的一群人戈抄，我們的目標(biāo)可是星辰大海。在長時間的斗爭中后专，我們默不作聲划鸽，一行一行的通過代碼在掌握著主動權(quán)。終于有一天DoKit誕生了戚哎，當(dāng)我們屏幕中出現(xiàn)那個小圖標(biāo)的時候裸诽，我的嘴角露出了一絲微笑，我知道我終將贏下這場戰(zhàn)斗型凳。下班后當(dāng)我在和女神在電影院的時候丈冬，而你卻還在和UI小姐姐為了一個像素爭吵。為了廣大程序員的福利甘畅，我和我的團(tuán)隊終于把DoKit的價格打了下來埂蕊。DoKit來了实夹，他將出現(xiàn)在每一個開發(fā)者的屏幕中，為你節(jié)省出一個年假的時間粒梦。

工具面板

Dokit誕生記

某天當(dāng)大雄正在對Dokit進(jìn)行功能升級的時候亮航，靜香突然跑了過來。

靜香：“大雄匀们，大雄缴淋，聽說你最近開發(fā)了一個Dokit，他們都說很厲害泄朴，用了以后都快節(jié)省出一個年假了重抖，你快給我看看，我年假都快用完了祖灰≈优妫”

（此時大雄的臉上露出一絲的傲嬌的表情，心想：曾經(jīng)你們對我愛搭不理局扶，現(xiàn)在我讓你們高攀不起恨统。）

大雄：“沒有，沒有三妈，都是一些小功能畜埋，主要都是是團(tuán)隊的功勞〕肫眩”

（說著說著掏出了剛買的xxx旗艦機(jī)悠鞍，首款真5G、大浴霸攝像頭模燥，瀑布屏......咖祭。扯遠(yuǎn)了，拉回來蔫骂，拉回來么翰。）

大雄：“你看桌面這個圖標(biāo)，它又大又圓纠吴，我們姑且叫它"哆啦A夢"吧硬鞍。它將出現(xiàn)在你的每一個頁面之中，為開發(fā)者提供了快速到達(dá)工具列表頁面的入口戴已，下面就讓我來詳細(xì)介紹里面的幾個主要工具的相關(guān)功能吧固该。”

(以下對話虛構(gòu)糖儡，如有雷同伐坏，純屬巧合)

常用工具篇

常用工具

常用工具篇之沙盒瀏覽

測試小姐姐:“大雄，大雄握联，急桦沉，剛剛發(fā)生了一個線上bug每瞒，用戶信息對不上導(dǎo)致訂單支付失敗，我在測試環(huán)境回歸了一下功能并且復(fù)現(xiàn)了bug纯露，我懷疑是本地保存的數(shù)據(jù)有問題剿骨，可是咋們這邊的開發(fā)都已經(jīng)下班了，你幫我想想辦法吧埠褪∨ɡ”

大雄：“別急別急，慢慢來钞速，讓我打開Dokit的沙盒瀏覽看下贷掖。你看，長按可以進(jìn)行文件分享和刪除渴语，點(diǎn)擊能進(jìn)入看到文件內(nèi)容詳情苹威，果然，你看這個訂單id字段保存了null數(shù)據(jù)驾凶，難怪會支付失敗牙甫。趕快讓他們回來加班改bug。以后再有數(shù)據(jù)問題的時候你再也不用去找移動端小哥哥通過IDE查看了狭郑，分分鐘又節(jié)省出一段晚餐的時間腹暖。”

測試小姐姐:“嗯翰萨，我馬上打電話讓他們回來加班。這個Dokit好厲害啊糕殉，來亩鬼，大雄，晚上的雞腿賞給你了阿蝶■ǚ妫”

常用工具篇之位置模擬

位置模擬

測試小姐姐：“大雄，大雄羡洁，老板說我們app的定位好像有點(diǎn)問題玷过，讓我回歸下這個功能，我拿著手機(jī)在辦公室都溜達(dá)好幾圈了筑煮，但是它一點(diǎn)反應(yīng)都沒有辛蚊，再這樣下去讓老板看到還以為我偷懶呢，你快幫我想想辦法吧真仲，晚餐我把大雞腿分給你吃袋马。”

大雄：“這還不簡單啊秸应，你讓你們的開發(fā)小哥哥接入Dokit虑凛，打開模擬定位開關(guān)碑宴，拖動定位圖標(biāo)，一鍵幫你修改GPS經(jīng)緯度桑谍。你再也不用繞著辦公室溜達(dá)了延柠，不過你這么胖，是該多運(yùn)動運(yùn)動了”锣披。

話剛說完贞间，測試小姐姐投來了一個眼神，大雄猝......

常用工具篇之DBView

數(shù)據(jù)庫調(diào)試

領(lǐng)導(dǎo)：“大雄啊盈罐，我最近發(fā)現(xiàn)一個神器榜跌，集成了它以后，只要手機(jī)和PC處于同一局域網(wǎng)環(huán)境內(nèi)盅粪，它就能直接將手機(jī)中app的數(shù)據(jù)庫展現(xiàn)在pc的瀏覽器上進(jìn)行修改钓葫，能極大的提升開發(fā)效率。但是它有一點(diǎn)不好就是我每次都要跳出去查看手機(jī)的wifi的ip地址票顾，嚴(yán)重影響我的開發(fā)節(jié)奏啊础浮，你看看能不能幫我集成到Dokit里，直接打開就能看到當(dāng)前的Wifi的ip地址奠骄。這是它的github地址：https://github.com/amitshekhariitbhu/Android-Debug-Database豆同。”

大雄：“好的含鳞，領(lǐng)導(dǎo)影锈，沒問題，包在我身上蝉绷，保證完成任務(wù)鸭廷。”

（畢竟下個月的晉升提名就要開始了熔吗，好不容易領(lǐng)導(dǎo)親自找到我下達(dá)任務(wù)辆床，我還不得好好表現(xiàn)啊，完成的好桅狠，升級加薪還不是妥妥的讼载。）

經(jīng)過一個下午的努力，大雄終于搞定了這個功能并且取了一個高大上的名字:DBView,屁跌屁跌的跑到領(lǐng)導(dǎo)那邀功去了中跌。

性能監(jiān)控篇

性能監(jiān)控模塊

測試小姐姐：“大雄咨堤，大雄，最近老有用戶反應(yīng)我們的app操作不夠流暢晒他，而且流量走得很多吱型，領(lǐng)導(dǎo)下命令了，下一個版本新功能先緩緩陨仅，我們重點(diǎn)對app的性能和接口來一波優(yōu)化津滞，畢竟用戶就是上帝铝侵，上帝用得不爽了，我們也就失業(yè)了触徐∵湎剩”

大雄：“好的，好的撞鹉，我這上禮拜剛買的房子開始還房貸疟丙，我可不想就這樣失業(yè)了。我們馬上開會討論并調(diào)研性能優(yōu)化方案鸟雏∠斫迹”

1、Google:Android性能優(yōu)化

2孝鹊、charles抓包

3炊琉、合并相關(guān)接口

4、優(yōu)化布局層級

5又活、解決大部分的內(nèi)存泄漏

6苔咪、耗時功能異步加載

7、壓縮圖片大小

......

經(jīng)過一個多禮拜的熬夜加班柳骄，大雄團(tuán)隊通過各種方式優(yōu)化了app的性能团赏，尤其在低端機(jī)上進(jìn)行了大量的測試，性能確實得到了大幅提升耐薯。這下終于可以交差了舔清。

在周五的例行周會上,大雄代表團(tuán)隊對這次優(yōu)化方案的成果進(jìn)行了匯報，并對比了優(yōu)化前后的各項性能指標(biāo)曲初。

領(lǐng)導(dǎo)看著大雄凌亂而發(fā)膩的頭發(fā)以及熊貓眼對大雄說：“大雄啊鸠踪，你們團(tuán)隊這次表現(xiàn)很出色啊，諾复斥，我特意給你們申請了一波團(tuán)建費(fèi)用，你帶兄弟們?nèi)ァ按蟊＝　卑尚得剑〔荒慷В欠潘煞潘桑吘股眢w是革命的本錢啊纷捞×『纾”

正當(dāng)大雄開心的準(zhǔn)備領(lǐng)賞的時候，領(lǐng)導(dǎo)又發(fā)話了主儡。
領(lǐng)導(dǎo)：“大雄啊奖唯，我覺得你們這次的性能優(yōu)化方案效果特別好，你看我們現(xiàn)在業(yè)務(wù)迭代這么快糜值，隔壁兄弟部門他們忙著寫業(yè)務(wù)呢丰捷，沒有時間搞優(yōu)化啊坯墨，要不你幫著他們優(yōu)化優(yōu)化性能吧〔⊥”

大雄：“應(yīng)該的捣染，應(yīng)該的，都是同一個公司的嘛停巷，等下開會完以后我們就著手準(zhǔn)備優(yōu)化耍攘。”
大雄強(qiáng)行頂著快要睜不開的雙眼畔勤，心想：我就知道哪有這么好的事蕾各，原來是后面還有活等著我呢，可是誰讓他是領(lǐng)導(dǎo)呢庆揪，畢竟下禮拜又要還房貸了式曲。但是公司那么多app，一個個優(yōu)化下去嚷硫，什么時候是個頭啊检访。我得想個一勞永逸的辦法，讓性能優(yōu)化提前到業(yè)務(wù)開發(fā)過程中去仔掸，要是測試的同學(xué)也能直接參與進(jìn)來那就好了脆贵。

于是經(jīng)過一個周末的思考和調(diào)研并結(jié)合前段時間的性能優(yōu)化經(jīng)驗，大雄制定了一整套解決方案起暮。又經(jīng)過了一個禮拜沒日沒夜的加班卖氨，大雄團(tuán)隊將這套解決方案集成到了Dokit中，果然效果顯著负懦。這下大雄團(tuán)隊終于有時間可以去“大保健”了筒捺。

視覺工具篇

視覺工具

靜香:“喂，大雄纸厉，這么巧你也來這家店吃晚飯啊系吭，我這邊還有個位置了，要不你過來一起坐吧颗品】铣撸”

女神竟然主動邀請大雄一起吃晚飯，這么好的機(jī)會怎么能錯過呢躯枢。

剛坐下沒多久靜香久開口了:“大雄啊则吟，聽說你前段時間開發(fā)的性能優(yōu)化方案在團(tuán)隊內(nèi)廣受好評啊，我們UI組也想要一個差不多的工具锄蹂。你上次教我的那個去什么開發(fā)者調(diào)試選項里去打開布局邊界什么的氓仲，真是太難用了。每家手機(jī)廠商打開的地方好像都不一樣，真是急死我了敬扛。你看我的需求是這樣的：

1晰洒、能看到控件的顏色。<br />
2舔哪、控件是否對齊欢顷、居中。<br />
3捉蚤、最好能看到UI的層級抬驴。<br />
巴拉巴拉......
”

大雄心想著我們團(tuán)隊一個產(chǎn)品經(jīng)理都應(yīng)付不過來了，現(xiàn)在又來了一個缆巧。但是誰讓她是女神呢布持，大雄只能苦笑著答應(yīng)了下來。

忘了是第幾個加班的周末陕悬，大雄終于完成了女神的需求题暖。禮拜一一大早大雄就拿著手機(jī)跑到了靜香的位置上開始炫耀并得到了認(rèn)可和表揚(yáng)。大雄趁機(jī)約女神去看剛上映的漫威大片捉超‰事保看著靜香臉上那燦爛的笑容，大雄覺得這個周末過得特別值拼岳。原來程序員的快樂就是這么簡單枝誊。

Weex工具篇

Weex專區(qū)

周五本就是個值得期待的日子，對于大雄尤其如此惜纸，經(jīng)歷過多少個孤獨(dú)的夜晚和期待叶撒，終于等到了和靜香去看電影。等待下班的過程總是相當(dāng)漫長耐版，好不容易熬到了下班點(diǎn)祠够。大雄合上MBP的瞬間下意識的瞄了一眼領(lǐng)導(dǎo)的辦公室，辦公室的門緩緩的被推開粪牲，大雄突然有一種不祥的預(yù)感古瓤。

領(lǐng)導(dǎo)：“大雄啊，準(zhǔn)備下班了嗎腺阳？”

大雄：“沒沒沒湿滓，剛準(zhǔn)備下樓吃飯，領(lǐng)導(dǎo)有啥吩咐舌狗？”

領(lǐng)導(dǎo)：“也沒啥事，這不最近公司新開了個業(yè)務(wù)線嗎扔水，為了開發(fā)效率痛侍，采用了weex技術(shù)棧，聽說我們這邊的Dokit相當(dāng)強(qiáng)大，無所不能主届，問能不能讓我們在Dokit中幫他們也集成幾個工具赵哲，提升一下他們的開發(fā)效率【。”

大雄：“好的枫夺，沒問題，領(lǐng)導(dǎo)绘闷。我準(zhǔn)備.....”

（話還沒說完）

領(lǐng)導(dǎo)：“沒問題就好橡庞，剛好下班了，一起吃個飯吧印蔗，我們聊聊相關(guān)功能扒最。”

（吃飯中......）

經(jīng)過一個多小時的晚飯時間华嘹，weex工具的相關(guān)功能是確定了吧趣。

1、Weex中Js的console日志過濾
2耙厚、weex緩存查看
3强挫、weex頁面信息和性能信息
4、掃碼快速進(jìn)入Weex調(diào)試模式

可是此刻的大雄心急如焚薛躬，心里一直惦記著的是8點(diǎn)半的電影俯渤。

領(lǐng)導(dǎo)：“對了，大雄泛豪，下個月的晉升名單我已經(jīng)幫你提交上去了稠诲，加油!”

一掃剛才的陰霾，大雄露出了無比燦爛的微笑。在道謝完領(lǐng)導(dǎo)以后荐操，大雄飛奔著去了電影院震嫉，在電影開始的前一秒他坐在了女神的身旁。

Dokit劝萤，一個愛情事業(yè)雙豐收的神器，你還在等什么?

聽我的慎璧，集成它床嫌！

開發(fā)者自定義篇

一天大雄照常打開電腦準(zhǔn)備進(jìn)行寫代碼，發(fā)現(xiàn)QQ上有一個閃爍的陌生頭像胸私。原來是社區(qū)里的一個兄弟在對接了Dokit以后覺得效果特別好厌处，但是他們團(tuán)隊想要自定義某些功能，可是在翻遍了文檔以后發(fā)現(xiàn)沒有相關(guān)介紹岁疼，于是就找上了大雄阔涉。大雄回顧了以下代碼，發(fā)現(xiàn)以前忙著寫功能，忽視了代碼的結(jié)構(gòu)并沒有統(tǒng)一的對外api實現(xiàn)瑰排。正好這次有機(jī)會贯要，大雄對代碼進(jìn)行一波重構(gòu)。如果你也想要在Dokit中加入自己的自定義功能或者想要參與Dokit的功能開發(fā)椭住，可以參考下面的實現(xiàn)：

Android版

實現(xiàn)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("關(guān)閉");
            }
        });
    }

    @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);
    }
}