滴滴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);
    }
}
複製代碼