原文
正文
創(chuàng)建一個(gè)新的 Flutter 項(xiàng)目是一件好事ーー新鮮的代碼庫树酪、沒有遺留代碼(還沒有)、空安全性蒲赂、您最喜歡的軟件包的最新版本等等。但是與此同時(shí),您應(yīng)該在項(xiàng)目開始時(shí)做出關(guān)鍵的決策,這些決策將為未來奠定基礎(chǔ)池户,例如工具、包凡怎、文件結(jié)構(gòu)校焦、狀態(tài)管理解決方案、測(cè)試計(jì)劃统倒。否則寨典,這個(gè)項(xiàng)目最終會(huì)變成另一碗意大利面和肉丸。為了避免這種情況房匆,我準(zhǔn)備了一個(gè)列表耸成,在我看來,這個(gè)項(xiàng)目中最重要的元素應(yīng)該盡早決定浴鸿。我希望它能幫助你井氢,因此ーー快樂的閱讀!
1. 靜態(tài)程序分析
[圖片上傳失敗...(image-9c979b-1632839796433)]
I will not write messy code ( 我不會(huì)寫亂七八糟的代碼(source 來源)
Linter 是一個(gè)靜態(tài)分析工具岳链,用于識(shí)別和標(biāo)記代碼中的編程錯(cuò)誤花竞、警告和樣式缺陷,以便您修復(fù)它們掸哑。在 Flutter 上下文中约急,這是最容易實(shí)現(xiàn)的東西之一,也是保持代碼干凈的最有用的東西之一苗分。
有很多不同的規(guī)則可以讓你的代碼遵循厌蔽,但是我建議你使用一個(gè)預(yù)先定義的規(guī)則,它已經(jīng)遵循了基于 Dart 樣式指南的最佳實(shí)踐:
https://dart-lang.github.io/linter/lints/index.html
https://dart.dev/guides/language/effective-dart/style
無論選擇哪個(gè)包俭嘁,都可以在 analysisservices _ options. yaml 文件中添加或刪除任何特定的靜態(tài)分析規(guī)則躺枕。
2. 本地化(l10n)
本地化 [來源](https://marcosantadev.com/wp-content/uploads/Localization_Tips.jpg
什么是本地化(簡(jiǎn)稱 l10n) ?
本地化是對(duì)產(chǎn)品或服務(wù)的調(diào)整供填,以滿足特定語言拐云、文化或期望人群的“外觀和感覺”的需要ー TechTarget
建立一個(gè)用戶感覺自然的應(yīng)用程序是必要的,例如使用正確的翻譯近她、日期和貨幣格式叉瘩、文本方向。因此粘捎,本地化是一個(gè)基本的工具薇缅。即使您正在構(gòu)建單個(gè)區(qū)域/語言應(yīng)用程序危彩,我仍然建議您盡早實(shí)現(xiàn)本地化,從而將文本與 UI 代碼分離開來泳桦。因此汤徽,可以在不影響代碼的情況下對(duì)它們進(jìn)行重用和調(diào)整。
Flutter documentation 精巧地解釋了國際化應(yīng)用程序的過程灸撰。如果缺省方式看起來太復(fù)雜谒府,或者您需要一些有用的擴(kuò)展和幫助器方法,那么有一些流行的第三方包浮毯,比如 easy_localization 完疫,可以幫助您完成本地化過程。
3. 環(huán)境(有一些味道)
Programming environments 來源
我敢打賭债蓝,當(dāng)有人在生產(chǎn)中損壞數(shù)據(jù)或刪除整個(gè)用戶表時(shí)壳鹤,您至少已經(jīng)從您的環(huán)境中聽說過一個(gè)案例(沒有雙關(guān)意思)。相信我饰迹,這一點(diǎn)也不好玩芳誓。因此,為你的項(xiàng)目創(chuàng)建不同的環(huán)境是一個(gè)很好的實(shí)踐:
(本地)環(huán)境ー用來讓你抓狂: 在代碼中做實(shí)驗(yàn)蹦锋,直接在數(shù)據(jù)庫中更改數(shù)據(jù)兆沙,使用快捷鍵并硬編碼認(rèn)證標(biāo)記或提供模擬數(shù)據(jù)欧芽。玩得開心莉掂,并提供這些功能
幫助您驗(yàn)證代碼中的更改恍涂,用“真實(shí)”數(shù)據(jù)(通常在這種環(huán)境中使用生產(chǎn)數(shù)據(jù)快照)測(cè)試特性沪摄,并在將應(yīng)用程序發(fā)布到生產(chǎn)環(huán)境之前驗(yàn)證它。如果你的團(tuán)隊(duì)中有質(zhì)量保證工程師口锭,這就是他們發(fā)光發(fā)熱的地方
環(huán)境ー由真實(shí)用戶使用的環(huán)境曲楚,其中數(shù)據(jù)損壞是不可接受的(請(qǐng)始終進(jìn)行備份)
擁有這樣的環(huán)境可以幫助您在這些更改到達(dá)用戶手中之前安全地實(shí)驗(yàn)和驗(yàn)證特性厘唾。
現(xiàn)在,另一個(gè)部分——味道龙誊。不抚垃,不,我們不是在討論甜的趟大、咸的或酸的東西ーー這只是在編程中用來描述應(yīng)用程序的不同構(gòu)建變體的另一個(gè)術(shù)語鹤树。例如,您希望使圖標(biāo)和標(biāo)題逊朽、 API 端點(diǎn)或任何其他配置對(duì)于每個(gè)特定環(huán)境都不同罕伯。為此,您需要定義一種不同的“味道”叽讳,這種味道在為特定環(huán)境構(gòu)建應(yīng)用程序時(shí)使用追他。這里有一些關(guān)于如何為 create flavours for Flutter 坟募。
4. 持續(xù)集成和持續(xù)交付
持續(xù)集成階段(CI)和持續(xù)交付集成階段(CD)source 來源
在引入不同的環(huán)境之后,自然而然的下一步是自動(dòng)化構(gòu)建邑狸、測(cè)試和發(fā)布應(yīng)用程序的過程懈糯。CI/CD 本身就是一個(gè)相當(dāng)復(fù)雜的主題,無論如何我都不是這個(gè)領(lǐng)域的專家单雾,因此我建議搜索一些關(guān)于如何使應(yīng)用程序開發(fā)的不同階段自動(dòng)化的其他資源昂利。
然而,有很多 NoOps 解決方案是與 Flutter 兼容的铁坎,所以你可以輕松自動(dòng)化你的開發(fā)過程:
- Appcircle;
- Codemagic 代碼魔法;
- Bitrise;
- VS App Center (還沒有 Flutter 集成蜂奸,但是有一些資源可以幫助你設(shè)置所有的東西)
這些解決方案中的任何一個(gè)都可以解決問題ーー簡(jiǎn)單地說,選擇一個(gè)符合你的需要和預(yù)算的方案硬萍。
5. 后端代碼
( 另一個(gè)關(guān)于后端的迷因(source 來源)
您是否已經(jīng)用任何特殊的或者不那么花哨的編程語言實(shí)現(xiàn)了后端扩所?很好,您可以跳過這一步朴乖,但我仍然建議您查看一些云解決方案祖屏,以供將來參考。
在簡(jiǎn)化版本中买羞,應(yīng)用程序的后端部分有兩個(gè)選項(xiàng):
- 使用您喜歡的任何編程語言和框架實(shí)現(xiàn)自定義后端解決方案袁勺,但是稍后將處理所有DevOps 讓你的代碼和數(shù)據(jù)可以從應(yīng)用程序中訪問
- 使用任何云解決方案來加速開發(fā)過程,并將大部分 DevOps 留給云供應(yīng)商
如果你覺得第二個(gè)選擇很有吸引力畜普,可以從支持 Flutter 的云平臺(tái)中選擇一些:
云平臺(tái)為您的應(yīng)用程序提供身份驗(yàn)證期丰、數(shù)據(jù)庫、存儲(chǔ)吃挑、 API 選項(xiàng)和許多其他特性钝荡。如果您只需要驗(yàn)證這個(gè)想法并快速構(gòu)建 MVP,而不需要花費(fèi)大量時(shí)間在成熟的后端解決方案上舶衬,那么上述任何一個(gè)都是一個(gè)很好的選擇埠通。
6. 日志記錄,崩潰數(shù)據(jù)和分析
[圖片上傳失敗...(image-752f56-1632839796433)]
( 哎呀逛犹,出問題了source 來源)
伐木被低估了ーー在這里端辱,我說過了!一切都很好虽画,直到出現(xiàn)問題舞蔽,你需要了解這方面的信息。當(dāng)我們討論什么應(yīng)該記錄狸捕,什么不應(yīng)該記錄時(shí)喷鸽,總有一個(gè)灰色地帶。但有一件事情始終是明確的: 您必須知道應(yīng)用程序何時(shí)崩潰以及問題的原因灸拍。你收集的關(guān)于這個(gè)事件的數(shù)據(jù)越多做祝,就越容易發(fā)現(xiàn)和解決這個(gè)問題砾省。
像 Sentry, Firebase Crashlytics, Datadog 、 Datadog 這樣的服務(wù)可以幫助你記錄最重要的數(shù)據(jù)混槐、崩潰報(bào)告编兄,甚至在你的應(yīng)用程序或相關(guān)服務(wù)出現(xiàn)故障時(shí)設(shè)置通知。
另一種類型的日志記錄是收集用戶數(shù)據(jù)用于分析目的声登。當(dāng)您構(gòu)建一個(gè)全新的狠鸳、可能是一流的產(chǎn)品時(shí),了解用戶的需求悯嗓、他們的行為以及他們?nèi)绾问褂脩?yīng)用程序是至關(guān)重要的件舵。為此,各種分析工具可以集成到您的 Flutter 應(yīng)用程序脯厨,如 Firebase Analytics 分析铅祸,App Center Analytics 中心分析和許多更多。
7. 應(yīng)用程序 branding
[圖片上傳失敗...(image-db380-1632839796433)]
Material theming ( Material 主題化(source 來源)
任何應(yīng)用程序或品牌的主要目標(biāo)之一就是獲得認(rèn)可合武。使用正確的顏色調(diào)色板临梗,標(biāo)志,圖標(biāo)稼跳,設(shè)計(jì)元素盟庞,內(nèi)容,字體汤善,有時(shí)甚至布局使你的產(chǎn)品脫穎而出什猖。這就是應(yīng)用程序的品牌化,在開始的時(shí)候準(zhǔn)備好基本的部分將會(huì)在整個(gè)項(xiàng)目中節(jié)省你很多時(shí)間萎津。
如果你已經(jīng)準(zhǔn)備好了你的 UI 原型或者設(shè)計(jì)組件卸伞,現(xiàn)在是時(shí)候把它們轉(zhuǎn)移到你的應(yīng)用程序中并定義主題---- 顏色抹镊、字體锉屈、形狀等等。為了方便起見垮耳,一個(gè)叫 Mike Rydstrom 的好人為這個(gè) flex_color_scheme 方案創(chuàng)建了一個(gè)出色的包颈渊。
8. 項(xiàng)目結(jié)構(gòu)和狀態(tài)管理
( Flutter 狀態(tài)管理(source 來源)
是的,有爭(zhēng)議的那個(gè)终佛。需要澄清的是俊嗽,根本沒有所謂的“最佳國家管理解決方案”或“最佳應(yīng)用程序架構(gòu)”——如果有人不這么認(rèn)為,請(qǐng)記住铃彰,他們可能也會(huì)先把牛奶倒進(jìn)碗里绍豁,然后再倒麥片。這是最糟糕的部分ーー我不能教你最好的方法牙捉。我只能提供幾個(gè)選項(xiàng)或分享我的偏好竹揍。
下一個(gè) Flutter 項(xiàng)目的幾個(gè)文件結(jié)構(gòu)選項(xiàng):
- Clean Architecture 清潔的建筑 — ー清晰的關(guān)注點(diǎn)分離敬飒,是否長(zhǎng)久存在。老實(shí)說芬位,我不喜歡這樣无拗。我覺得這個(gè)概念中有太多的抽象,可能會(huì)減緩開發(fā)進(jìn)程
- Layered Architecture 分層建筑 ー依賴于將數(shù)據(jù)昧碉、業(yè)務(wù)和表示邏輯分為不同層次的想法英染。這樣的文件結(jié)構(gòu)對(duì)于中小型項(xiàng)目來說工作得很好,但是我覺得當(dāng)項(xiàng)目增長(zhǎng)時(shí)被饿,這些層會(huì)變得越來越不堪重負(fù)
- Modular Architecture (I have described this concept 模塊化體系結(jié)構(gòu)(我已經(jīng)描述了這個(gè)概念here 這里) ー把程式碼分割成不同功能的模組四康,以便不同的模組互相作用。這是我最喜歡的一個(gè)ー它與集團(tuán)國家管理解決方案(TEAM BLoC狭握,YEAH!)順利地工作對(duì)于大型項(xiàng)目來說箭养,規(guī)模很大。然而哥牍,它也帶來了一些挑戰(zhàn)毕泌,比如公共邏輯放在哪里,不同的模塊應(yīng)該如何通信等等
關(guān)于《 Flutter 》中的國家管理問題嗅辣,我想我們已經(jīng)到了可以把整個(gè)會(huì)議都用來討論這個(gè)問題的時(shí)候了撼泛,但是事后還沒有最后的答案。我只想補(bǔ)充一點(diǎn)澡谭,選擇一個(gè)你覺得最舒服的愿题。你可以在 here 找到一個(gè)全面的選項(xiàng)列表。
9. 代碼生成
Code generation ( 代碼生成(source 來源)
如果您想簡(jiǎn)化一些步驟并節(jié)省一些開發(fā)時(shí)間蛙奖,您可以在項(xiàng)目中使用代碼生成潘酗。少編碼,多交付雁仲! Code less, deliver more
有一系列不同的工具可以使用仔夺,無論是處理本地化、資產(chǎn)攒砖、解析 JSON缸兔、生成模型類、實(shí)現(xiàn)服務(wù)定位器吹艇、路由惰蜜,還是處理不可變狀態(tài)。唯一要做的就是調(diào)查可用的工具和包受神,并選擇最好的工具和包來滿足您的項(xiàng)目需求抛猖。
對(duì)于一個(gè)快速 Flutter 項(xiàng)目啟動(dòng),我建議檢查出 Very Good CLI 。這將節(jié)省您幾個(gè)小時(shí)的配置(不幸的是财著,我已經(jīng)學(xué)會(huì)了艱難的方式)养交。
此外,上個(gè)月我還做了一個(gè)關(guān)于 code generation 的演講ーー它可能是 Flutter 代碼生成旅程的起點(diǎn)瓢宦,所以看看吧碎连!
10. 測(cè)試策略
Application testing ( 應(yīng)用程式測(cè)試(source 來源)
用測(cè)試來覆蓋 100% 的代碼是好還是壞?當(dāng)然驮履,這很棒鱼辙,但是代價(jià)是什么呢?這樣想的話玫镐,您可能會(huì)掉進(jìn)一個(gè)注定要陷入困境的深淵倒戏,在那里您花費(fèi)更多的時(shí)間編寫測(cè)試,而不是開發(fā)特性恐似。為了避免這種情況杜跷,您需要一個(gè)測(cè)試策略。
不要誤會(huì)我的意思ー用測(cè)試覆蓋代碼是一件好事矫夷,而且代碼中越隱蔽的地方葛闷,在實(shí)現(xiàn)新特性時(shí)就越安全。只是双藕,在我看來淑趾,與編寫測(cè)試所花費(fèi)的時(shí)間相比,您應(yīng)該找到測(cè)試仍然為您帶來更多價(jià)值的平衡點(diǎn)忧陪。例如扣泊,這是我的測(cè)試策略:
- Business logic (services, repositories, BLoCs) should be covered 85-100% in 業(yè)務(wù)邏輯(服務(wù)、存儲(chǔ)庫嘶摊、集群)應(yīng)該在unit/integration tests 單元/集成測(cè)試 ー這是所有應(yīng)用程序中最重要的部分延蟹,因此我看到了測(cè)試的很大價(jià)值;
- Widget tests 小部件測(cè)試 應(yīng)該包含所有可重用的 UI 組件。當(dāng)單個(gè)組件被正確測(cè)試時(shí)叶堆,您可以開始測(cè)試單個(gè)屏幕阱飘,但是不要太詳細(xì)
- End-to-end tests 端到端測(cè)試, 涵蓋了主要的應(yīng)用程序流以及與 UI 的交互。沒有深層次的魔法ーー只是經(jīng)歷一些關(guān)鍵的工作流程蹂空。它們包含的屏幕越多越好
- 當(dāng)整個(gè)用戶界面準(zhǔn)備就緒并實(shí)現(xiàn)時(shí)ーgolden tests 黃金試驗(yàn) 確保 UI 不會(huì)受到以后更改的影響
老實(shí)說俯萌,我仍然在測(cè)試中尋找中庸之道,但是相信我上枕,你會(huì)在一個(gè)又一個(gè)項(xiàng)目中做得更好。
11. 自述文件
[圖片上傳失敗...(image-1c780c-1632839796433)]
Make a README ( 自述文件(source 來源)
你沒聽錯(cuò)弱恒,文件辨萍。README 文件是項(xiàng)目中最重要的文檔,尤其是在團(tuán)隊(duì)中工作時(shí)。
您是否剛剛引入了一個(gè)需要代碼生成的新解決方案锈玉?您是否剛剛添加了一個(gè)有用的 bash 腳本來自動(dòng)完成這個(gè)過程爪飘?您是否實(shí)現(xiàn)了一個(gè)必須在項(xiàng)目中的任何地方使用的全局記錄器?我們無法讀取你的思想ーー在 README 文件中提到這一點(diǎn)拉背!
沒有太多的文檔(至少我沒有遇到過這種情況) 师崎,只有缺乏關(guān)于項(xiàng)目和代碼的信息。所有生成椅棺、測(cè)試和運(yùn)行代碼的命令犁罩、各種文件結(jié)構(gòu)決策、圖表两疚、外部工具和服務(wù)床估、關(guān)于不同環(huán)境的信息(沒有 SECRET KEYS)都應(yīng)該放在這里,并保存在一個(gè)單獨(dú)的地方诱渤。這是一個(gè)無聊的工作丐巫,但卻是一個(gè)非常有價(jià)值的工作!
Phew, what a ride… ( 這車真不錯(cuò)... .source 來源)
就是這樣! 謝謝你花時(shí)間閱讀這篇文章勺美。
我錯(cuò)過了什么嗎? 在評(píng)論中提及吧! 在構(gòu)建一個(gè)新的 Flutter 應(yīng)用程序時(shí)递胧,你的清單是什么?
? 貓哥
微信群 ducafecat
往期
開源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新聞客戶端
https://github.com/ducafecat/flutter_learn_news
strapi 手冊(cè)譯文
微信討論群 ducafecat
系列集合
譯文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
開源項(xiàng)目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 編程語言基礎(chǔ)
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基礎(chǔ)入門
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 實(shí)戰(zhàn)從零開始 新聞客戶端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 組件開發(fā)
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578