泛前端開發者的百寶箱

給我一個支點,我將撬動整個地球。

--阿基米德

有了DoKit,我將幫你節省出一個年假。

--***泛前端開發者

2019年9月17日,滴滴開源項目DoraemonKit在 GitHub上的star數突破10000,成為滴滴首個star數破萬的開源項目。

DoKit 2.0 - 泛前端開發者的百寶箱

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 2.0 - 泛前端開發者的百寶箱

Dokit誕生記

某天當大雄正在對Dokit進行功能升級的時候,靜香突然跑了過來。

靜香:“大雄,大雄,聽說你最近開發了一個Dokit,他們都說很厲害,用了以後都快節省出一個年假了,你快給我看看,我年假都快用完了。”

(此時大雄的臉上露出一絲的傲嬌的表情,心想:曾經你們對我愛搭不理,現在我讓你們高攀不起。)

大雄:“沒有,沒有,都是一些小功能,主要都是團隊的功勞。”

(說著說著掏出了剛買的xxx旗艦機,首款真5G、大浴霸攝像頭,瀑布屏......。扯遠了,拉回來,拉回來。)

大雄:“你看桌面這個圖標,它又大又圓,我們姑且叫它"哆啦A夢"吧。它將出現在你每一個頁面之中,為開發者提供了快速到達工具列表頁面的入口,下面就讓我來詳細介紹裡面的幾個主要工具的相關功能吧。”

(以下對話虛構,如有雷同,純屬巧合)


常用工具篇

DoKit 2.0 - 泛前端開發者的百寶箱

常用工具篇之沙盒瀏覽
DoKit 2.0 - 泛前端開發者的百寶箱

測試小姐姐:“大雄,大雄,急,剛剛發生了一個線上bug,用戶信息對不上導致訂單支付失敗,我在測試環境迴歸了一下功能並且復現了bug,我懷疑是本地保存的數據有問題,可是咱們這邊的開發都已經下班了,你幫我想想辦法吧。”

大雄:“別急別急,慢慢來,讓我打開Dokit的沙盒瀏覽看下。你看,長按可以進行文件分享和刪除,點擊能進入看到文件內容詳情,果然,你看這個訂單id字段保存了null數據,難怪會支付失敗。趕快讓他們回來加班改bug。以後再有數據問題的時候你再也不用去找移動端小哥哥通過IDE查看了,分分鐘又節省出一段晚餐的時間。”

測試小姐姐:“嗯,我馬上打電話讓他們回來加班。這個Dokit好厲害啊,來,大雄,晚上的雞腿賞給你了。”

常用工具篇之位置模擬
DoKit 2.0 - 泛前端開發者的百寶箱

測試小姐姐:“大雄,大雄,老闆說我們app的定位好像有點問題,讓我回歸下這個功能,我拿著手機在辦公室都溜達好幾圈了,但是它一點反應都沒有,再這樣下去讓老闆看到還以為我偷懶呢,你快幫我想想辦法吧,晚餐我把大雞腿分給你吃。”
大雄:“這還不簡單啊,你讓你們的開發小哥哥接入Dokit,打開模擬定位開關,拖動定位圖標,一鍵幫你修改GPS經緯度。你再也不用繞著辦公室溜達了,不過你這麼胖,是該多運動運動了”。
話剛說完,測試小姐姐投來了一個眼神,大雄卒......

常用工具篇之DBView
DoKit 2.0 - 泛前端開發者的百寶箱

領導:“大雄啊,我最近發現一個神器,集成了它以後,只要手機和PC處於同一局域網環境內,它就能直接將手機中app的數據庫展現在pc的瀏覽器上進行修改,能極大的提升開發效率。但是它有一點不好就是我每次都要跳出去查看手機的wifi的ip地址,嚴重影響我的開發節奏啊,你看看能不能幫我集成到Dokit裡,直接打開就能看到當前的Wifi的ip地址。這是它的github地址:https://github.com/amitshekhariitbhu/Android-Debug-Database。”
大雄:“好的,領導,沒問題,包在我身上,保證完成任務。”
(畢竟下個月的晉升提名就要開始了,好不容易領導親自找到我下達任務,我還不得好好表現啊,完成得好,升級加薪還不是妥妥的。)
經過一個下午的努力,大雄終於搞定了這個功能並且取了一個高大上的名字:DBView,屁跌屁跌的跑到領導那邀功去了。

性能監控篇

DoKit 2.0 - 泛前端開發者的百寶箱

DoKit 2.0 - 泛前端開發者的百寶箱

測試小姐姐:“大雄,大雄,最近老有用戶反應我們的app操作不夠流暢,而且流量走得很多,領導下命令了,下一個版本新功能先緩緩,我們重點對app的性能和接口來一波優化,畢竟用戶就是上帝,上帝用得不爽了,我們也就失業了。”
大雄:“好的,好的,我這上禮拜剛買的房子開始還房貸,我可不想就這樣失業了。我們馬上開會討論並調研性能優化方案。”
1、Google:Android性能優化


2、charles抓包
3、合併相關接口
4、優化佈局層級
5、解決大部分的內存洩漏
6、耗時功能異步加載
7、壓縮圖片大小
......
經過一個多禮拜的熬夜加班,大雄團隊通過各種方式優化了app的性能,尤其在低端機上進行了大量的測試,性能確實得到了大幅提升。這下終於可以交差了。
在週五的例行週會上,大雄代表團隊對這次優化方案的成果進行了彙報,並對比了優化前後的各項性能指標。
領導看著大雄凌亂而發膩的頭髮以及熊貓眼對大雄說:“大雄啊,你們團隊這次表現很出色啊,諾,我特意給你們申請了一波團建費用,你帶兄弟們去“大保健”吧,啊不,是放鬆放鬆,畢竟身體是革命的本錢啊。”
正當大雄開心的準備領賞的時候,領導又發話了。領導:“大雄啊,我覺得你們這次的性能優化方案效果特別好,你看我們現在業務迭代這麼快,隔壁兄弟部門他們忙著寫業務呢,沒有時間搞優化啊,要不你幫著他們優化優化性能吧。”
大雄:“應該的,應該的,都是同一個公司的嘛,等下開會完以後我們就著手準備優化。” 大雄強行頂著快要睜不開的雙眼,心想:我就知道哪有這麼好的事,原來是後面還有活等著我呢,可是誰讓他是領導呢,畢竟下禮拜又要還房貸了。但是公司那麼多app,一個個優化下去,什麼時候是個頭啊。我得想個一勞永逸的辦法,讓性能優化提前到業務開發過程中去,要是測試的同學也能直接參與進來那就好了。

於是經過一個週末的思考和調研並結合前段時間的性能優化經驗,大雄制定了一整套解決方案。又經過了一個禮拜沒日沒夜的加班,大雄團隊將這套解決方案集成到了Dokit中,果然效果顯著。這下大雄團隊終於有時間可以去“大保健”了。

視覺工具篇

DoKit 2.0 - 泛前端開發者的百寶箱

DoKit 2.0 - 泛前端開發者的百寶箱

靜香:“喂,大雄,這麼巧你也來這家店吃晚飯啊,我這邊還有個位置了,要不你過來一起坐吧。”
女神竟然主動邀請大雄一起吃晚飯,這麼好的機會怎麼能錯過呢。
剛坐下沒多久靜香久開口了:“大雄啊,聽說你前段時間開發的性能優化方案在團隊內廣受好評啊,我們UI組也想要一個差不多的工具。你上次教我的那個去什麼開發者調試選項裡去打開佈局邊界什麼的,真是太難用了。每家手機廠商打開的地方好像都不一樣,真是急死我了。你看我的需求是這樣的:
1、能看到控件的顏色。
2、控件是否對齊、居中。
3、最好能看到UI的層級。
巴拉巴拉...... ”
大雄心想著我們團隊一個產品經理都應付不過來了,現在又來了一個。但是誰讓她是女神呢,大雄只能苦笑著答應了下來。
忘了是第幾個加班的週末,大雄終於完成了女神的需求。禮拜一一大早大雄就拿著手機跑到了靜香的位置上開始炫耀並得到了認可和表揚。大雄趁機約女神去看剛上映的漫威大片。看著靜香臉上那燦爛的笑容,大雄覺得這個週末過得特別值。原來程序員的快樂就是這麼簡單。

Weex工具篇

DoKit 2.0 - 泛前端開發者的百寶箱

週五本就是個值得期待的日子,對於大雄尤其如此,經歷過多少個孤獨的夜晚和期待,終於等到了和靜香去看電影。等待下班的過程總是相當漫長,好不容易熬到了下班點。大雄合上MBP的瞬間下意識地瞄了一眼領導的辦公室,辦公室的門緩緩的被推開,大雄突然有一種不祥的預感。
領導:“大雄啊,準備下班了嗎?”
大雄:“沒沒沒,剛準備下樓吃飯,領導有啥吩咐?”


領導:“也沒啥事,這不最近公司新開了個業務線嗎,為了開發效率,採用了weex技術棧,聽說我們這邊的Dokit相當強大,無所不能,問能不能讓我們在Dokit中幫他們也集成幾個工具,提升一下他們的開發效率。”
大雄:“好的,沒問題,領導。我準備.....”
(話還沒說完)
領導:“沒問題就好,剛好下班了,一起吃個飯吧,我們聊聊相關功能。”
(吃飯中......)
經過一個多小時的晚飯時間,weex工具的相關功能是確定了。

1、Weex中Js的console日誌過濾

2、weex緩存查看

3、weex頁面信息和性能信息

4、掃碼快速進入Weex調試模式

可是此刻的大雄心急如焚,心裡一直惦記著的是8點半的電影。

領導:“對了,大雄,下個月的晉升名單我已經幫你提交上去了,加油!”

一掃剛才的陰霾,大雄露出了無比燦爛的微笑。在道謝完領導以後,大雄飛奔著去了電影院,在電影開始的前一秒他坐在了女神的身旁。

Dokit,一個愛情事業雙豐收的神器,你還在等什麼?聽我的,集成它!

開發者自定義篇

一天大雄照常打開電腦準備進行寫代碼,發現QQ上有一個閃爍的陌生頭像。原來是社區裡的一個兄弟在對接了Dokit以後覺得效果特別好,但是他們團隊想要自定義某些功能,可是在翻遍了文檔以後發現沒有相關介紹,於是就找上了大雄。大雄回顧了以下代碼,發現以前忙著寫功能,忽視了代碼的結構並沒有統一的對外api實現。正好這次有機會,大雄對代碼進行一波重構。如果你也想要在Dokit中加入自己的自定義功能或者想要參與Dokit的功能開發,可以參考下面的實現:

Android版

實現IKit接口,就是你在工具面板上看到的入口。

<code>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>       DokitIntent dokitIntent = new DokitIntent(DemoDokitView.class);       dokitIntent.mode = DokitIntent.MODE_SINGLE_INSTANCE;       DokitViewManager.getInstance().attach(dokitIntent);  }    @Override   public void>  }}/<code>

同時繼承AbsDokitView,就是你在桌面上看到的懸浮窗。

<code>public class DemoDokitView extends AbsDokitView {   @Override   public void>  }    @Override   public View>       return LayoutInflater.from(context).inflate(R.layout.dk_demo, rootView, false);  }    @Override   public void>       TextView tvClose = findViewById(R.id.tv_close);       tvClose.setOnClickListener(new View.OnClickListener() {           @Override           public void>               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;  }}/<code>

最後在Application的OnCreate中通過以下方法注入即可:

<code>public class App extends Application {   private static final String TAG = "App";    @Override   public void>       super.onCreate();       List<ikit> kits = new ArrayList<>();       kits.add(new KitDemo());       DoraemonKit.install(this, kits);  }}/<ikit>/<code>
iOS版

詳見添加自定義測試模塊到Doraemon面板中

Dokit小程序版已經上路

DoKit 微信小程序研發助手SDK對外發布:https://juejin.im/post/5d9bf252518825095c3c5e32。

項目成員

DoKit 2.0 - 泛前端開發者的百寶箱

項目組成員裡面有設計師、android開發、iOS開發、小程序開發,大家利用自己業務之餘的時間一起努力,才有了DoKit的今天。

外部貢獻者

huakucha、HuginChen、feng562925462、azhon、rex26、csc-EricWu、dengyuhan、0xd-cc、k373379320、fabcz、y500、Knight-ZXW、boai、klone1127、DeveloperLY、sagdragon、ccworld1000

感謝每一位同學的付出。


Dokit的明天需要你的參與


分享到:


相關文章: