木辛老師來了，本節課咱們一起把Flutter開發環境搭建起來吧！
請點擊右上角“關注”按鈕關注我們喲：跟著木辛老師學習Flutter基礎編程知識，變身快樂的編程達人吧~
大家好！木辛老師又來了！
緊接著上次咱們說的，繼續吧！
我們說過，Flutter可以創建非常不錯的APP，不僅能夠運行在Web端、桌面端還能運行在Android和iOS平臺的手機端（這個相當的不錯！）。
激動吧！顫動吧！但是不要著急，木辛老師還要繼續說些基礎的東西！
要不，看圖文之前先買本書吧，哇哈哈！
比如：
好多問題呀！
是放棄探索還是繼續踩坑？
……
在我努力思考了一小會會之后，我決定繼續踩坑！佛曰：你不踩坑誰踩坑！
好吧！讓我開始吧！
在本次內容里，木辛老師會通過更多的圖文將剛才提到的問題都詳細講解一下，雖然這都是很基礎，也很可能是只需要操作一遍的內容，但是大家了解這個過程還是很有必要的。
不過在此之前呢，需要先把兩個最重要的問題說清楚：
木辛老師說
在這里提醒大家一點，作為發展速度非常快的IT行業，不論是開發工具還是語言本身，特別是一些新興的玩意兒，每天都會發生著或大或小的變化和改進。所以，一旦你開始接觸這個玩意兒，就一定記得經常去提供這個工具或者語言的組織或者社區逛逛，以獲取到最新的更新和注意事項。否則，你會發現很多時候，之前正常運行的工具或者程序，突然間就失靈了，這可不是危言聳聽的事情。
說到開發工具，可謂是每個開發人員都繞不開的坎，有一個開發“利器”，不僅能夠產生事半功倍的效果，還能讓人心情愉悅。所以，選擇一個好的、順手的、功能強大的工具，是每一個開發人員起步的標配。
但是有一點需要大家注意，工具千千萬，不如自己的習慣，不需要去追求最新、最炫、最酷的工具，只要找到適合自己的就可以。
當然了，在本教程中，木辛老師會選擇自己熟悉的工具，如果和你的不一樣，也不要著急，每個工具原理都是一樣的，無非就是命令行和圖形化的區別；也無非是快捷鍵和按鈕的不同。也就這樣吧！
如果實在、實在不知道如何使用你自己的“利器”完成一些編程工作的話，那就Google唄、Baidu唄。所以，不要著急，你碰到的問題別人肯定也碰到了，而且絕大部分已經完美解決了。
SO，甩開膀子，放開手，干吧！
不管你是選擇哪種工具，Flutter SDK是必不可少的，沒有這個玩意兒，肯定玩不轉Flutter。
Flutter SDK包含了Flutter的編譯器、項目創建工具、配套的測試工具還有一籮筐的完善Flutter的各種“小利器”。有了這個，就可以順利的開始Flutter的開發啦！
好了，多的不說了，咱們開始安裝SDK吧。
要想獲取更多的Flutter SDK的安裝信息，請移步它的官網，也就是下邊這個網站。
如果你覺得查看中文版本的文檔不夠原汁原味，那么也可以移步到其英文官網地址
木辛老師很多時候還是很喜歡看中文版本的文檔，除了可以看得速度很快（自己的英文水平自己知道），還因為現在很多翻譯人員的水平都非常高了，已經能夠用更加通俗易懂的文字描述出原文的意思了。
再次為奮戰在翻譯第一線的同學們致以最高的敬意，是你們的努力才使得我們這些英文戰五渣得以快速的學習到很多國外的前沿的知識。謝謝Thanks?(?ω?)?！
那么，應該如何安裝Flutter的SDK？
本來吧，木辛老師打算把SDK的下載和安裝過程詳細地列出來，不過在看到文檔的那一刻就放棄了，因為文檔寫得實在是太詳細、太完美了，根本就不用我再來贅述。
大家只要跟著文檔一步一步做就可以了，理論上不會出現任何問題。
但是，這里還是需要大家注意一點：一定要看好自己的電腦系統，是MacOS還是Windows還是Linux哈。
雖然這一步非常簡單，也極易不容易出錯，但是大家還是要重視哈，畢竟只有了堅實的基礎，才能蓋出摩天大廈，加油！
到目前為止，大家應該已經安裝好SDK了，接下來我們需要有一個可以編寫程序的可視化工具。
雖然，編寫Flutter項目是不需要IDE的，也就是說使用記事本也可以，但是實際上，很少人會直接使用這種簡單的工具去完成一個程序的開發。
為什么捏？
因為效率的問題！畢竟人的精力是有限的，而編程這個事業是無限的，木辛老師一直提倡把有限的精力投入到無限的編程事業中，所以，如何最大化生產效率是最應該優先考慮的事情。
但是，也有人說了，只有從最最基本的文本編輯器開始編程，才能深入地體會這一門編程語言的精髓，才能能徹底掌握，才能記牢函數名，關鍵字。
但是，木辛老師還是建議大家使用IDE。
你想啊，沒有任何語法補全和智能提示的編輯器，要完成一系列函數的調用是多么的麻煩。還不說現在的編程語言的函數名越來越長（絕大部分程序員對函數起名還是不容樂觀的），越來越多，就以獲取用戶信息這種情況，有多少接口開發人員喜歡提供一籮筐的方法呢？
getXXXByID()
getXXXByUserName()
getXXXByDate()
getXXXByxxxx()
頭疼吧？反正我是不喜歡用純文本編輯器編寫程序（我已經預見到有很多人要噴我啦哈哈）。
大家噴完之后，可以繼續看如下文字啦：
為什么不建議大家使用純文本編輯器編寫程序呢？
其實，總而言之，言而總之，之所以使用IDE，就是要降低你學習新編程語言的門檻，才能讓你很輕松入門，只有入門之后才好更進一步的深入。
但是，在使用IDE的時候，大家也要有分寸喲，不要一上來就去深挖IDE的各個功能和插件擴展，只需要熟練使用基本功能就可以啦。
比如：創建項目，調試，運行，查看日志就可以了吧，復雜的功能隨著你的使用慢慢的就掌握了。
好了，接下來先看看有哪些我覺得（我覺得哈）比較合適的工具吧
我比較喜歡這兩個工具，也一直在用，推薦給大家試試。當然了，還是那句話選擇自己喜歡的，如果不好選擇，就跟著木辛老師一起用這兩個。
但是，如果你非得選擇其中一個，就是強迫癥，那怎么辦呢？
木辛老師給你支個招：選擇Android Studio，畢竟都是Google的親戚，相互之間還不親密一些嘛，對吧！
關于這一塊，木辛老師還是比較頭疼的。因為如果想使用IDE，且能夠正常地做出Flutter項目，需要在IDE中安裝插件，以Android Studio為例：
Flutter插件安裝頁面
Dart插件安裝頁面
就是這兩個貨！
有了這兩個插件，你就可以使用Android Studio橫掃一切，帶著Flutter應用飛起來啦。
那么，怎么安裝呢？
自此，Android Studio中安裝Flutter 插件的工作就完美收工了。
大家先不要著急去創建Flutter項目，準備工作還沒有徹底完成。比如說，創建模擬器。
如果你手頭正好有一臺Android或者iOS手機，那么，你就可以直接跳過本段內容，進入下一階段的學習。但是，如果你恰巧沒有對應的手機，但是又極度想調試下對應平臺上，你的軟件的運行情況，只能是通過模擬器了。
模擬器呢，應該就是一個虛擬存在的設備，在你的工作電腦上運行。它和真正的手機很像，比如它也可以運行程序，測試、調試程序等等。不同平臺的模擬器可能會有那么一丟丟的區別，Whatever！好用就行！
為了能夠全面測試Android和iOS平臺上軟件的運行情況，我們需要創建兩個類型的模擬器：xCode的iOS虛擬機和AVD的Android虛擬機。
iOS 模擬器
好了，乖！先打住。你用的是一臺Win10的機器，是不能運行iOS模擬器的，這一點你一定要知道，并且不要為此而苦惱，這也是沒有辦法的一個事情。不過，雖然你沒有MAC設備，但是木辛老師有啊，你可以看著木辛老師的教程體會一下iOS軟件開發哈（不要扔雞蛋，也不要寄刀片吖）。
現在開始打開iOS模擬器。
簡單的三步，就可以啟動模擬器了。快來看看打開的是什么樣的吧！
Android模擬器
接下來，是啟動Android模擬器。在Android Studio中找到AVD Manager點擊打開。
打開之后呢，你會看到已經創建過的模擬器。如果你初來乍到，這里可就只是空空如也啦。
已經創建過呢，就可以直接用；沒有創建過呢，咱就新建一個。
點擊“+Create Virtual Device...”會打開一個新的彈出框。
選擇你喜歡的硬件設備，比如Pixel2，點擊“Next”。
接著，會打開另一個框框：這里需要你選擇自己喜歡的操作系統，比如：Pie，點擊“Next”。
最后打開的這個是確認頁面，比如你可以修改模擬器的名字，選擇是豎屏還是橫屏等等，最后點擊“Finish”。
完成！一個新的模擬器就誕生了。
模擬器已準備就行，我們還需繼續努力，完成下邊的一些收尾工作。
為了讓Flutter開發工具時刻保持最新的狀態，我們需要時刻關注它的更新情況。雖然，按照以往的開發經驗：不要輕易的升級，不要輕易的升級，不要輕易的升級！
但是有時候，有潔癖的我們還是忍不住點擊升級按鈕，同時為了能消除掉小紅點（微信說你呢，哈哈）而興奮不已！
那么在Flutter這里，應該如何進行呢？
有一個很有力的工具可以幫助我們，它就是flutter doctor。為什么有力呢？因為它不僅能夠檢查我們本地的工具版本、開發環境、檢查依賴等等，就好比是稱職的健康醫生一樣保護我們不受疾病的困擾。
如何執行這個命令工具呢？
打開Android Studio的命令行工具，在屏幕的最下方，有個“Terminal”，點擊即可以打開。
然后在這里輸入一個命令：
? flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel dev, 1.26.0-17.2.pre, on macOS 11.2.1 20D74 darwin-x64, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[?] Xcode - develop for iOS and macOS
[?] Chrome - develop for the web
[?] Android Studio (version 4.1)
[?] IntelliJ IDEA Community Edition (version 2020.2.1)
[?] VS Code (version 1.53.2)
[?] Connected device (1 available)
? No issues found!
? flutter-tetris-master哈哈，看來我的各項體檢指標都是合格滴，棒棒噠，繼續保持！
當然了，有很多時候，還有會檢查出很多問題的，比如：
[!] Xcode - develop for iOS and macOS (Xcode X.Y)
? Xcode requires additional components to be installed in order to run.
Launch Xcode and install additional required components when prompted.
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.這就要求我們安裝Xcode的擴展組件了，可以通過執行如下命令解決：
xcode-select --install而提示的第二條，一般情況下我們會選擇忽略，只要你準備好模擬器一般就不會出現這種問題。
雖然，執行flutter doctor可以查百病，但是一旦flutter有更新的話，這個命令還是沒辦法的。所以，此時我們需要另一個命令：
? flutter upgrade
Upgrading Flutter to 1.27.0-4.0.pre from 1.26.0-17.2.pre in /Users/flutter...
Downloading Dart SDK from Flutter engine 1d537824d6d29bf9967172d32450ef0671097cef...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
0 200M 0 866k 0 0 2851k 0 0:01:11 --:--:-- 0:01:11 2841k
3 200M 3 6630k 0 0 5073k 0 0:00:40 0:00:01 0:00:39 5069k
5 200M 5 11.7M 0 0 5231k 0 0:00:39 0:00:02 0:00:37 5229k
8 200M 8 17.1M 0 0 5311k 0 0:00:38 0:00:03 0:00:35 5310k
11 200M 11 22.5M 0 0 5362k 0 0:00:38 0:00:04 0:00:34 5360k
14 200M 14 28.3M 0 0 5479k 0 0:00:37 0:00:05 0:00:32 5638k
17 200M 17 34.0M 0 0 5534k 0 0:00:37 0:00:06 0:00:31 5653k
19 200M 19 39.3M 0 0 5518k 0 0:00:37 0:00:07 0:00:30 5650k
22 200M 22 44.9M 0 0 5536k 0 0:00:36 0:00:08 0:00:28 5685k
25 200M 25 50.5M 0 0 5559k 0 0:00:36 0:00:09 0:00:27 5729k
27 200M 27 55.7M 0 0 5543k 0 0:00:36 0:00:10 0:00:26 5611k
30 200M 30 61.2M 0 0 5547k 0 0:00:36 0:00:11 0:00:25 5563k
……
Upgrading engine...
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Material fonts... 671ms
Downloading Material fonts... 473ms
Downloading android-arm-profile/darwin-x64 tools... 567ms
Downloading android-arm-release/darwin-x64 tools... 641ms
Downloading android-arm64-profile/darwin-x64 tools... 929ms
Downloading android-arm64-release/darwin-x64 tools... 547ms
Downloading android-x64-profile/darwin-x64 tools... 727ms
Downloading android-x64-release/darwin-x64 tools... 501ms
Downloading android-x86 tools... 4.1s
Downloading android-x64 tools... 3.9s
Downloading android-arm tools... 1,987ms
Downloading android-arm-profile tools… 952ms
……
Flutter 1.27.0-4.0.pre ? channel dev ? https://github.com/flutter/flutter.git
Framework ? revision f8cd24de95 (6 days ago) ? 2021-02-16 11:24:17 -0800
Engine ? revision 1d537824d6
Tools ? Dart 2.13.0 (build 2.13.0-30.0.dev)
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel dev, 1.27.0-4.0.pre, on macOS 11.2.1 20D74 darwin-x64, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[?] Xcode - develop for iOS and macOS
[?] Chrome - develop for the web
[?] Android Studio (version 4.1)
[?] IntelliJ IDEA Community Edition (version 2020.2.1)
[?] VS Code (version 1.53.2)
[?] Connected device (1 available)
? No issues found!這個命令在執行的時候，可以能會需要一些時間，大家不要著急，慢慢等待就可以啦。當然有時候會因為某些不可知的網絡原因，自己Google下唄。
寫到這里，咱們的準備工作終于完成了，接下里要做的事情就是。。。。。休息！休息！休息！
估計各位看官看到這里也有些累了吧，那咱們就先到這里！
雖然到目前為止，還沒有看到自己創建的Flutter項目的樣子，不過經過這么多準備之后，大家內心也應該充實了很多了吧，畢竟曙光就在。。。。。下一篇內容里！
請大家關注木辛老師的課程喲，獲取更多編程知識和編程技巧。接下來，木辛老師和大家一步一步的學習Flutter知識吧。
快樂編程，快樂成長！
咱們下節課再見，88~
《英雄聯盟》官方近日發布了客戶端更新的日志報告。官方表示客戶端Chromium Embedded Framework，是聯盟客戶端架構的核心網絡瀏覽器的版本更新，這是今年的重點項目。目前官方正重新審視比賽結束（EOG）頁面，也在著手解決進入英雄選擇頁面延遲問題。
我們承諾不定期分享聯盟客戶端性能與可靠性更新工作的進展。
概要：2021年第一季度，我們開啟了升級Chromium Embedded Framework（CEF）的道路。目前仍有部分工作有待完成，預計在第二季度末可以完成新版CEF，為玩家帶來更多便利。
升級Chromium Embedded Framework（CEF）
上次我們提到過，近期的重大項目之一，是客戶端Chromium Embedded Framework（CEF），也就是聯盟客戶端架構的核心網絡瀏覽器的版本更新。坦白而言，上次我們低估了這項工作的重要性。無論從直接受益，還是為其他優化賦能的角度來看，CEF升級都是影響力最大的一項客戶端優化。
CEF上次升級是在2019年11月（版本74），而撰寫本文時，最新的版本是CEF 90。CEF升級（目標是CEF 90）將帶來以下好處：
● 減少客戶端崩潰
○ 過時的CEF版本在部分硬件上表現不佳。早期數據表明，大部分崩潰都是由CEF版本過時造成的。我們堅信升級后，玩家遭遇的崩潰次數會降低。
● 兼容性優化
○ CEF團隊在大量硬件組合上對新版本進行了詳細測試。聯盟客戶端可以免費享受這些測試的成果。
● WebSocket性能加速
○ 聯盟客戶端包含兩大部分：“前端”部分與用戶進行視覺交互，“后臺”部分規模小得多，負責后臺運行、從服務器調取數據和追蹤客戶端的所有信息，以便向用戶呈現正確的最終結果。后臺的工作舉例：
■ “這位玩家在設置中選擇了游戲中關閉客戶端，現在已經進入游戲了，關閉前端，游戲結束后再打開。”
■ “這位玩家剛剛打開了藏品標簽。里面應該都有哪些英雄?”
○ 簡而言之，WebSocket就是前端與后臺連接的管道。拓寬管道，減少轉彎和打結的地方，數據傳輸就能更多更快，這正是新版本的CEF可以為我們帶來的好處。尤其是對使用較早硬件的玩家，WebSocket的優化對改善大批數據傳輸（如游戲結束、英雄選擇）的效果更為明顯。與我們的CEF版本相比，優化幅度可達到：
■ Windows速度加快4.1倍
■ Mac速度加快7.8倍
● 動畫性能優化
○ 具體說來，是根據數據生成的動畫效果，如游戲結束頁面的經驗條（還有許多類似的地方）。這些動畫從技術上來說是一種內存泄漏，因此長進程中的客戶端整體性能也會有所提升。
● FPS提升——延遲降低，點擊響應速度加快
● 開發難度更低（就是更快、更可靠）
○ 更多避免較長游戲進程中發生內存泄漏的方法
○ 一種新的衡量標準，更好地提供關于客戶端在屏幕上呈現信息所需時間的數據
● CPU使用更智能
○ 在客戶端當前CEF版本（74）中，一種叫做“網絡服務（Network Service）”的功能首次登場，將所有網絡請求通過一條線路輸入CPU，這樣其他線路就可以完成更多任務，比如加載內容等。由于這個功能在我們上次更新CEF時，才剛剛推出，來不及進行測試，因此并沒有啟用。下一次升級時，就可以籌劃在聯盟中支持該功能了。
● JavaScript性能優化
○ 新的CEF版本對處理JavaScript的v8引擎進行了大幅優化。例如兼容性優化，只需升級版本就可獲取。
上個季度我們的工作重點是升級現有網絡組件（比如視頻嵌入、彈窗提醒等等網站技術），使其版本與新CEF版本兼容，確保升級CEF本身不會引發任何問題。我們希望這些組件的升級能夠實現無縫體驗，所以大家應該沒注意到在過去幾個補丁中逐步推出的升級。這些升級涉及到大量代碼，因此偶爾也會出現測試中漏掉的小問題，但都立刻處理掉了。
完成這些組件升級最多還需要幾周時間，隨后我們就可以開始升級CEF本身，并期望在2021年7月末完成。
社交面板
上次我們提到的另一個重點區域是社交面板。我們的長期計劃是將社交面板從ComponentJS（舊架構）遷移到Ember。目前我們的精力還集中在CEF升級上，因此這項工作暫時擱置，但我們已經完成了Ember遷移所需的部分早期步驟，CEF升級完成后就會繼續。
以下是工作重點轉移到CEF升級前，我們解決的一些社交面板的主要問題：
1. 社交面板無法連接
2. 好友列表無法加載，狀態顯示不正確，好友數據問題
3. 玩家在普通游戲中時，懸浮卡片不顯示排位信息
4. 啟動時在斷開連接、憂傷的魄羅和好友列表加載之間亂跳
內存占用和JavaScript錯誤情況更新
我們也在繼續關注同一會話內進行的游戲的內存占用情況。我們很高興看到，從補丁10.25之后，游戲的平均內存占用下降了約30MB，整體內存不足崩潰數量也在持續下降。
最后，我們想說說JavaScript錯誤。上一篇文章中，我們提供的拳頭各地區玩家遇到的JS錯誤數據有誤。10.25版本中，這個數字達到了驚人的2.65億。好在玩家實際遭遇的錯誤數量并沒有改變，只是我們測量的手段變了，從而進一步意識到了這個問題的緊迫性。此后，我們的每個補丁平均降低了1.4億次錯誤，并有信心可以繼續減少錯誤數量。
目前的計劃
盡管我們近期的首要重點是CEF升級，但也在規劃2021年的其他項目。
● 上文中提到的將社交面板遷移到Ember
● 重新審視比賽結束（EOG）頁面。去年底和今年初，我們處理了比賽結束的幾個主要問題，但仍存在有待改進的地方。許多玩家仍然反映存在返回客戶端時間過長和/或比賽結束頁面死機的問題。項目開始后，第一步是摸清客戶端與游戲內引擎和服務的所有互動，隨后考慮如何優化體驗。EOG調用了許多客戶端團隊之外的服務，我們需要與其他團隊配合，一同進行優化。
● 進入英雄選擇頁面延遲。這個問題在部分地區報告頻率很高，說明玩家的網絡連接情況是很重要的因素（不同地區的網絡基礎設施情況各異）。雖然我們對網絡問題可做的不多，但仍會與競技團隊合作，盡量在客戶端內確保玩家在合理的時間內進入英雄選擇頁面。
● 長會話中的客戶端穩定性。去年年底我們發現了內存泄漏，導致客戶端隨著玩家打開多個游戲或客戶端長時間空閑時，占用內存越來越多的緊急問題。經過更全面的跟進，我們將尋求更直觀的方法，讓玩家得以保持剛剛登錄客戶端時的體驗，無論他們已經玩了多少局游戲或是客戶端開啟了多長時間。這部分修復工作可能還會不斷強化，解決更多難對付的內存泄漏問題，但我們還需要對照其他短期解決方案進行衡量。
這次要說的就是這些了！當然，我們工作的一大動力，就是來自各種渠道的反饋，包括定期玩家調查。歡迎大家繼續反映需要改進的客戶端問題，以及對您的體驗影響最大的改進！