滴滴出行 DoKit 2.0 - 泛前端开发者的百宝箱
給我一個支點,我將撬動整個地球。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??--阿基米德
有了DoKit,我將幫你節(jié)省出一個年假。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? --***泛前端開發(fā)者
9月17日,滴滴開源項目DoraemonKit在 GitHub上的star數(shù)突破10000,成為滴滴首個star數(shù)破萬的開源項目。
DoKit 是一個功能集合面板,能夠讓每一個App快速接入一些常用的或者你沒有實現(xiàn)的一些輔助開發(fā)工具、測試效率工具、視覺輔助工具,而且能夠完美在 DoKit 面板中接入你已經(jīng)實現(xiàn)的與業(yè)務(wù)緊密耦合的一些非通有的輔助工具,功能強大,接入方便,便于擴展。
自從去年10月15號對外發(fā)布,不到一年的時間里,DoKit 的成長也非常迅速:從初步的13項工具到現(xiàn)在30余項工具。star數(shù)量進入全球開源項目前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ā)進入了新的時代,各種各樣的輪子層出不窮。但是在線下輔助開發(fā)工具這一塊貌似還是一片空白,并沒有好的解決方案。
想象這樣一個場景:
當(dāng)大雄正在和胖虎(產(chǎn)品經(jīng)理)撕逼打得不可開交的時候,UI同學(xué)跑過來了。
靜香:“大雄,大雄,你為什么不按設(shè)計稿來,你這個按鈕的顏色明顯不對啊,綠得不夠鮮艷啊”。
大雄:“不可能啊,我就是按照設(shè)計稿來的啊,顏色值不是"#00FF7F"嗎,有可能是手機屏幕的問題,這個是冷屏。”
靜香:“我不管,肯定是你開發(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小姐姐為了一個像素爭吵。為了廣大程序員的福利,我和我的團隊終于把DoKit的價格打了下來。DoKit來了,他將出現(xiàn)在每一個開發(fā)者的屏幕中,為你節(jié)省出一個年假的時間。
Dokit誕生記
某天當(dāng)大雄正在對Dokit進行功能升級的時候,靜香突然跑了過來。
靜香:“大雄,大雄,聽說你最近開發(fā)了一個Dokit,他們都說很厲害,用了以后都快節(jié)省出一個年假了,你快給我看看,我年假都快用完了。”
(此時大雄的臉上露出一絲的傲嬌的表情,心想:曾經(jīng)你們對我愛搭不理,現(xiàn)在我讓你們高攀不起。)
大雄:“沒有,沒有,都是一些小功能,主要都是團隊的功勞。”
(說著說著掏出了剛買的xxx旗艦機,首款真5G、大浴霸攝像頭,瀑布屏......。扯遠(yuǎn)了,拉回來,拉回來。)
大雄:“你看桌面這個圖標(biāo),它又大又圓,我們姑且叫它"哆啦A夢"吧。它將出現(xiàn)在你每一個頁面之中,為開發(fā)者提供了快速到達工具列表頁面的入口,下面就讓我來詳細(xì)介紹里面的幾個主要工具的相關(guān)功能吧。”
(以下對話虛構(gòu),如有雷同,純屬巧合)
常用工具篇
常用工具篇之沙盒瀏覽
測試小姐姐:“大雄,大雄,急,剛剛發(fā)生了一個線上bug,用戶信息對不上導(dǎo)致訂單支付失敗,我在測試環(huán)境回歸了一下功能并且復(fù)現(xiàn)了bug,我懷疑是本地保存的數(shù)據(jù)有問題,可是咱們這邊的開發(fā)都已經(jīng)下班了,你幫我想想辦法吧。”?
大雄:“別急別急,慢慢來,讓我打開Dokit的沙盒瀏覽看下。你看,長按可以進行文件分享和刪除,點擊能進入看到文件內(nèi)容詳情,果然,你看這個訂單id字段保存了null數(shù)據(jù),難怪會支付失敗。趕快讓他們回來加班改bug。以后再有數(shù)據(jù)問題的時候你再也不用去找移動端小哥哥通過IDE查看了,分分鐘又節(jié)省出一段晚餐的時間。”?
測試小姐姐:“嗯,我馬上打電話讓他們回來加班。這個Dokit好厲害啊,來,大雄,晚上的雞腿賞給你了。”
常用工具篇之位置模擬
測試小姐姐:“大雄,大雄,老板說我們app的定位好像有點問題,讓我回歸下這個功能,我拿著手機在辦公室都溜達好幾圈了,但是它一點反應(yīng)都沒有,再這樣下去讓老板看到還以為我偷懶呢,你快幫我想想辦法吧,晚餐我把大雞腿分給你吃。”?
大雄:“這還不簡單啊,你讓你們的開發(fā)小哥哥接入Dokit,打開模擬定位開關(guān),拖動定位圖標(biāo),一鍵幫你修改GPS經(jīng)緯度。你再也不用繞著辦公室溜達了,不過你這么胖,是該多運動運動了”。?
話剛說完,測試小姐姐投來了一個眼神,大雄卒......
常用工具篇之DBView
領(lǐng)導(dǎo):“大雄啊,我最近發(fā)現(xiàn)一個神器,集成了它以后,只要手機和PC處于同一局域網(wǎng)環(huán)境內(nèi),它就能直接將手機中app的數(shù)據(jù)庫展現(xiàn)在pc的瀏覽器上進行修改,能極大的提升開發(fā)效率。但是它有一點不好就是我每次都要跳出去查看手機的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)親自找到我下達任務(wù),我還不得好好表現(xiàn)啊,完成得好,升級加薪還不是妥妥的。)?
經(jīng)過一個下午的努力,大雄終于搞定了這個功能并且取了一個高大上的名字:DBView,屁跌屁跌的跑到領(lǐng)導(dǎo)那邀功去了。
性能監(jiān)控篇
測試小姐姐:“大雄,大雄,最近老有用戶反應(yīng)我們的app操作不夠流暢,而且流量走得很多,領(lǐng)導(dǎo)下命令了,下一個版本新功能先緩緩,我們重點對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)過一個多禮拜的熬夜加班,大雄團隊通過各種方式優(yōu)化了app的性能,尤其在低端機上進行了大量的測試,性能確實得到了大幅提升。這下終于可以交差了。?
在周五的例行周會上,大雄代表團隊對這次優(yōu)化方案的成果進行了匯報,并對比了優(yōu)化前后的各項性能指標(biāo)。?
領(lǐng)導(dǎo)看著大雄凌亂而發(fā)膩的頭發(fā)以及熊貓眼對大雄說:“大雄啊,你們團隊這次表現(xiàn)很出色啊,諾,我特意給你們申請了一波團建費用,你帶兄弟們?nèi)ァ按蟊= 卑?#xff0c;啊不,是放松放松,畢竟身體是革命的本錢啊。”?
正當(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)化。” 大雄強行頂著快要睜不開的雙眼,心想:我就知道哪有這么好的事,原來是后面還有活等著我呢,可是誰讓他是領(lǐng)導(dǎo)呢,畢竟下禮拜又要還房貸了。但是公司那么多app,一個個優(yōu)化下去,什么時候是個頭啊。我得想個一勞永逸的辦法,讓性能優(yōu)化提前到業(yè)務(wù)開發(fā)過程中去,要是測試的同學(xué)也能直接參與進來那就好了。?
于是經(jīng)過一個周末的思考和調(diào)研并結(jié)合前段時間的性能優(yōu)化經(jīng)驗,大雄制定了一整套解決方案。又經(jīng)過了一個禮拜沒日沒夜的加班,大雄團隊將這套解決方案集成到了Dokit中,果然效果顯著。這下大雄團隊終于有時間可以去“大保健”了。
視覺工具篇
靜香:“喂,大雄,這么巧你也來這家店吃晚飯啊,我這邊還有個位置了,要不你過來一起坐吧。”?
女神竟然主動邀請大雄一起吃晚飯,這么好的機會怎么能錯過呢。?
剛坐下沒多久靜香久開口了:“大雄啊,聽說你前段時間開發(fā)的性能優(yōu)化方案在團隊內(nèi)廣受好評啊,我們UI組也想要一個差不多的工具。你上次教我的那個去什么開發(fā)者調(diào)試選項里去打開布局邊界什么的,真是太難用了。每家手機廠商打開的地方好像都不一樣,真是急死我了。你看我的需求是這樣的:
1、能看到控件的顏色。
2、控件是否對齊、居中。
3、最好能看到UI的層級。
巴拉巴拉...... ”?
大雄心想著我們團隊一個產(chǎn)品經(jīng)理都應(yīng)付不過來了,現(xiàn)在又來了一個。但是誰讓她是女神呢,大雄只能苦笑著答應(yīng)了下來。?
忘了是第幾個加班的周末,大雄終于完成了女神的需求。禮拜一一大早大雄就拿著手機跑到了靜香的位置上開始炫耀并得到了認(rèn)可和表揚。大雄趁機約女神去看剛上映的漫威大片。看著靜香臉上那燦爛的笑容,大雄覺得這個周末過得特別值。原來程序員的快樂就是這么簡單。
Weex工具篇
周五本就是個值得期待的日子,對于大雄尤其如此,經(jīng)歷過多少個孤獨的夜晚和期待,終于等到了和靜香去看電影。等待下班的過程總是相當(dāng)漫長,好不容易熬到了下班點。大雄合上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)強大,無所不能,問能不能讓我們在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、掃碼快速進入Weex調(diào)試模式
可是此刻的大雄心急如焚,心里一直惦記著的是8點半的電影。
領(lǐng)導(dǎo):“對了,大雄,下個月的晉升名單我已經(jīng)幫你提交上去了,加油!”
一掃剛才的陰霾,大雄露出了無比燦爛的微笑。在道謝完領(lǐng)導(dǎo)以后,大雄飛奔著去了電影院,在電影開始的前一秒他坐在了女神的身旁。
Dokit,一個愛情事業(yè)雙豐收的神器,你還在等什么?聽我的,集成它!
開發(fā)者自定義篇
一天大雄照常打開電腦準(zhǔn)備進行寫代碼,發(fā)現(xiàn)QQ上有一個閃爍的陌生頭像。原來是社區(qū)里的一個兄弟在對接了Dokit以后覺得效果特別好,但是他們團隊想要自定義某些功能,可是在翻遍了文檔以后發(fā)現(xiàn)沒有相關(guān)介紹,于是就找上了大雄。大雄回顧了以下代碼,發(fā)現(xiàn)以前忙著寫功能,忽視了代碼的結(jié)構(gòu)并沒有統(tǒng)一的對外api實現(xiàn)。正好這次有機會,大雄對代碼進行一波重構(gòu)。如果你也想要在Dokit中加入自己的自定義功能或者想要參與Dokit的功能開發(fā),可以參考下面的實現(xiàn):
Android版
實現(xiàn)IKit接口,就是你在工具面板上看到的入口。
public class KitDemo implements IKit {@Overridepublic int getCategory() {return Category.BIZ;}@Overridepublic int getName() {return R.string.dk_kit_demo;}@Overridepublic int getIcon() {return R.mipmap.dk_sys_info;}@Overridepublic void> DokitIntent dokitIntent = new DokitIntent(DemoDokitView.class);dokitIntent.mode = DokitIntent.MODE_SINGLE_INSTANCE;DokitViewManager.getInstance().attach(dokitIntent);}@Overridepublic void>} }同時繼承AbsDokitView,就是你在桌面上看到的懸浮窗。
public class DemoDokitView extends AbsDokitView {@Overridepublic void>}@Overridepublic View> return LayoutInflater.from(context).inflate(R.layout.dk_demo, rootView, false);}@Overridepublic void> TextView tvClose = findViewById(R.id.tv_close);tvClose.setOnClickListener(new View.OnClickListener() {@Overridepublic void> DokitViewManager.getInstance().detach(DemoDokitView.this);//ToastUtils.showShort("關(guān)閉");}});}@Overridepublic 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";@Overridepublic void> super.onCreate();List<IKit> kits = new ArrayList<>();kits.add(new KitDemo());DoraemonKit.install(this, kits);} }iOS版
詳見添加自定義測試模塊到Doraemon面板中
Dokit小程序版已經(jīng)上路
DoKit 微信小程序研發(fā)助手SDK對外發(fā)布:https://juejin.im/post/5d9bf252518825095c3c5e32。
項目成員
項目組成員里面有設(shè)計師、android開發(fā)、iOS開發(fā)、小程序開發(fā),大家利用自己業(yè)務(wù)之余的時間一起努力,才有了DoKit的今天。
外部貢獻者
huakucha、HuginChen、feng562925462、azhon、rex26、csc-EricWu、dengyuhan、0xd-cc、k373379320、fabcz、y500、Knight-ZXW、boai、klone1127、DeveloperLY、sagdragon、ccworld1000
感謝每一位同學(xué)的付出。
Dokit的明天需要你的參與
官方長期激勵方案
https://github.com/didi/DoraemonKit/issues/256
編程·思維·職場
歡迎掃碼關(guān)注
總結(jié)
以上是生活随笔為你收集整理的滴滴出行 DoKit 2.0 - 泛前端开发者的百宝箱的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ckfinder 配置 php,GitH
- 下一篇: NLP基础笔记1——中文分词技术