From 8516e36f1be45e3cd5263eb129f30015df3ffc65 Mon Sep 17 00:00:00 2001 From: CRTao Date: Tue, 2 Mar 2021 15:30:09 +0800 Subject: [PATCH] translate lesson 5 to zh-tw --- .../translations/README.zh-tw.md | 167 +++++++++++++ .../translations/assignment.zh-tw.md | 11 + .../translations/README.zh-tw.md | 224 ++++++++++++++++++ .../translations/assignment.zh-tw.md | 11 + .../translations/README.zh.tw.md | 160 +++++++++++++ .../translations/assignment.zh-tw.md | 9 + .../translations/README.zh-tw.md | 28 +++ 7 files changed, 610 insertions(+) create mode 100644 5-browser-extension/1-about-browsers/translations/README.zh-tw.md create mode 100644 5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md create mode 100644 5-browser-extension/translations/README.zh-tw.md diff --git a/5-browser-extension/1-about-browsers/translations/README.zh-tw.md b/5-browser-extension/1-about-browsers/translations/README.zh-tw.md new file mode 100644 index 00000000..7b931577 --- /dev/null +++ b/5-browser-extension/1-about-browsers/translations/README.zh-tw.md @@ -0,0 +1,167 @@ +# 瀏覽器擴充功能專案 Part 1：關於瀏覽器 + +![瀏覽器繪圖筆記](../images/sketchnote.jpg) +> 由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 繪製 + +## 課前測驗 + +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23) + +### 大綱 + +瀏覽器擴充功能新增額外的功能給瀏覽器。在你建立之前，你應該學習瀏覽器是如何運作的。 + +### 關於瀏覽器 + +在這一系列的課程中，你會學習如何建立瀏覽器擴充功能，運作在 Chrome、Firefox 與 Edge 瀏覽器上。在這一章中，你會探索瀏覽器是如何運作，建立瀏覽器擴充功能的內容。 + +但到底何謂瀏覽器？它是幫助用戶顯示伺服器內容到網頁上的程式軟體。 + +✅ 小歷史：第一個網頁瀏覽器為 'WorldWideWeb'，由 Timothy Berners-Lee 爵士於 1990 年建立。 + +![早期的瀏覽器](../images/earlybrowsers.jpg) +> 這邊有一些早期的瀏覽器，請參考[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) + +用戶使用網址 URL (Uniform Resource Locator) 位置連上網路，通常以 `http` 或 `https` 位置開頭使用超文本傳輸協定(Hypertext Transfer Protocol)，瀏覽器便能與該伺服器溝通並抓取網頁的資料。 + +這時，瀏覽器轉譯引擎會呈現到用戶的裝置上，可以是手機、桌機或是筆記型電腦。 + +瀏覽器也有能力暫存內容，不需要每一次都向伺服器請求內容。瀏覽器儲存用戶的瀏覽紀錄、儲存 'cookies'，一種包含用戶活動資訊的小型資料。 + +請記得一件重要的事，各家瀏覽器並不會相同！每一種瀏覽器都有各自的長處短處，專業的網頁開發人員必須了解如何讓網頁在不同瀏覽器上運作正常。這包含處理手機的小視窗，處理離線用戶的行為。 + +這邊有一個值得加到你書籤的實用網頁：[caniuse.com](https://www.caniuse.com)。當你在建構網頁時，你可以查詢 caniuse 技術支援清單，確保你能提供用戶最佳的使用體驗。 + +✅ 你知道你的網頁用戶最常使用什麼瀏覽器嗎？檢查你的分析程式，你可以安裝各種分析程式當作是你開發的一種環節，它們會告訴你那些瀏覽器最常被使用。 + +## 瀏覽器擴充功能 + +為什麼你需要建立瀏覽器擴充功能？它能附加在瀏覽器上，讓你快速地重複執行部分功能。舉例來說，如果你需要在網頁中檢查你所互動的顏色，你或許需要顏色選擇器擴充功能；如果你有記憶帳號密碼的困擾，你可能需要密碼管理擴充功能。 + +瀏覽器擴充功能在開發上也很有趣。它們有效地管理並執行少部分任務課題。 + +✅ 你最喜歡哪一項瀏覽器擴充功能？它們提供了什麼功能？ + +### 安裝擴充功能 + +在你建立擴充功能以前，先看看建制與安裝瀏覽器擴充功能的流程。每一種瀏覽器在管理套件上可能有些不同，Edge上的管理過程就與 Chrome 與 Firefox 相似： + +![Edge 瀏覽器開啟 edge://extensions 中的設定選單截圖](../images/install-on-edge.png) + +大體而言，過程為： + +- 指令 `npm run build` 建制你的管理套件 +- 在瀏覽器中的延伸模組區點擊右上方的「更多設定」按鈕 +- 如果這是新的套件，選擇 `load unpacked` 從資料夾上傳新的擴充套件(在我們的例子中， `/dist` ) +- 如果這是已安裝的套件，點擊 `reload` 按鈕 + +✅ 上述教學步驟讓你導入自己建立的擴充功能；若要安裝已公開的套件，你可以前往瀏覽器擴充功能商店，逛逛這些[商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)並安裝你選擇的套件。 + +### 展開行動 + +你打算寫一套擴充功能來顯示你國家的碳足跡，顯示國家的能源使用量與可用能源量。套件內會有 API Key 來存取網頁 CO2 Signal 的 API。 + +**你需要：** + +- [一組 API key](https://www.co2signal.com/)：在網頁上輸入你的電子信箱，它會寄一組鑰匙給你 +- 給[Electricity Map](https://www.electricitymap.org/map)使用的[國家區域代碼](http://api.electricitymap.org/v3/zones) (舉個例子，在波士頓使用'US-NEISO') +- [程式碼](../../start)，下載 `start` 資料夾，你需要修改裡面的程式碼檔案。 +- [NPM](https://www.npmjs.com)，NPM 是一套軟體包管理工具，在本地安裝的軟體包會被列在 `package.json` 檔案中，成為網頁利用的資源。 + +✅ 從[這個優質的學習套件](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)中，學習更多關於軟體包管理。 + +花點時間看一下程式檔案結構 + +dist + -|manifest.json (defaults set) + -|index.html (前端 HTML) + -|background.js (background JS) + -|main.js (built JS) +src + -|index.js (你的 JS 程式碼) + +✅ 當你取得你的 API Key 與國家區域代碼後，紀錄在筆記中給之後的課程使用。 + +### 建立給擴充功能使用的 HTML + +這套擴充功能有兩個重點。一個是取得 API Key 與國家區域代碼： + +![在瀏覽器擴充功能中，顯示 API key與國家區域代碼的輸入欄截圖](../images/1.png) + +與顯示國家的碳排放量： + +![在瀏覽器擴充功能中，顯示 US-NEISO 地區碳排放量與石化燃料比例截圖](../images/2.png) + +讓我們開始建立輸入欄位的 HTML 與它的 CSS 吧。 + +在資料夾 `/dist` 中，建立輸入表單與結果顯示區域。在檔案 `index.html` 中，規劃表單區域： + +```HTML +
+
+

New? Add your Information

+
+
+ + +
+
+ + +
+ +
+``` +這個表單儲存你的輸入資訊並儲存到 Local Storage 中。 + +接下來，建立結果輸出區。在 form tag 後面新增一些 divs： + +```HTML +
+
loading...
+
+
+
+

Region:

+

Carbon Usage:

+

Fossil Fuel Percentage:

+
+ +
+``` +這時，你可以試著建制這個專案。請確保安裝擴充套建的軟體依賴套件，輸入： + +``` +npm install +``` + +這項指令會使用 NPM (Node Package Manager)安裝 webpack 給你的擴充套件建制過程中使用。Webpack 是一個處理程式編譯的工具組合包。你可以在 `/dist/main.js` 看到它的執行後的結果 ── 程式碼已經被打好包了。 + +到目前為止，擴充套件已經被建制，如果你導入此套件到 Edge 中也能完整地呈現出來。 + +恭喜你，你已經達成建立擴充套件的第一步驟。在接下來的課程中，你會新增更多功能，讓它更加的實用。 + +--- + +## 🚀 挑戰 + +逛逛瀏覽器擴充商店，安裝一套擴充功能到你的瀏覽器中。你可以查看它的檔案群。你發現了什麼？ + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24) + +## 複習與自學 + +這堂課中你學到了一些瀏覽器的歷史。趁這個機會閱讀更多它的歷史，學習網際網路的發明者是如何構思網路的應用。這邊有一些實用的網頁： + +[瀏覽器的歷史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) + +[網路的歷史](https://webfoundation.org/about/vision/history-of-the-web/) + +[與 Tim Berners-Lee 的訪談](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want) + +## 作業 + +[重新造型你的套件](assignment.zh-tw.md) + diff --git a/5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md b/5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md new file mode 100644 index 00000000..2b7dc4d9 --- /dev/null +++ b/5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 重新造型你的套件 + +## 簡介 + +本課程的擴充套件已經包含了造型設定，但你不需要非得使用它們。改寫它的 CSS 檔來重新構築擴充插件的造型。 + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | -------------------------- | -------------- | ------------ | +| | 新造型能正常地套用在程式中 | 造型規劃不完整 | 套件出現問題 | \ No newline at end of file diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md new file mode 100644 index 00000000..a11d2c09 --- /dev/null +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md @@ -0,0 +1,224 @@ +# 瀏覽器擴充功能專案 Part 1：呼叫 API，使用 Local Storage + +## 課前測驗 + +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25) + +### 大綱 + +在這堂課中，藉由傳遞你的擴充功能表單並顯示結果來呼叫 API。此外，你會了解如何儲存資料到瀏覽器的 Local Storage 中給未來使用。 + +✅ 請參考下列程式碼段，加入程式碼到檔案適當的位置 + +### 設定控制擴充功能的元素： + +現在你有已建好的 HTML 表單與結果區 `
`。接下來，你需要在 `/src/index.js` 做一些處理，一點一點地構築出你的擴充功能。參考[前一堂課程](../../1-about-browsers/translations/README.zh-tw.md)來設置你的專案與了解建制過程。 + +處理 `index.js` 檔案，建立一些 `const` 變數來儲存不同用途的數值： + +```JavaScript +// 表單區域 +const form = document.querySelector('.form-data'); +const region = document.querySelector('.region-name'); +const apiKey = document.querySelector('.api-key'); + +// 結果區域 +const errors = document.querySelector('.errors'); +const loading = document.querySelector('.loading'); +const results = document.querySelector('.result-container'); +const usage = document.querySelector('.carbon-usage'); +const fossilfuel = document.querySelector('.fossil-fuel'); +const myregion = document.querySelector('.my-region'); +const clearBtn = document.querySelector('.clear-btn'); +``` + +這些區域會被 CSS class 給參考，它們在前一堂課中已經被你設定好了。 + +### 新增監聽者 + +接下來，新增提交與重置表單的事件監聽者與按鈕，讓使用者能提交表單或是點擊重置鈕時，事件會發生。新增初始化呼叫處理到應用中，在檔案的最下方新增： + +```JavaScript +form.addEventListener('submit', (e) => handleSubmit(e)); +clearBtn.addEventListener('click', (e) => reset(e)); +init(); +``` + +✅ 注意提交事件與點擊事件的寫法，事件是如何被傳入到 handleSubmit 或是 reset 函式中的。你能在不改變功能的情況下，改寫成較長的格式嗎？你比較喜歡哪一種寫法？ + +### 建立 init() 函式與 reset() 函式： + +現在你需要建立函式 init()，處理應用程式的初始化部分： + +```JavaScript +function init() { + //如果任何東西存在 localStorage 中，取出來 + const storedApiKey = localStorage.getItem('apiKey'); + const storedRegion = localStorage.getItem('regionName'); + + //設定 icon 為通用綠色 + //todo + + if (storedApiKey === null || storedRegion === null) { + //如果沒有 keys，顯示表單 + form.style.display = 'block'; + results.style.display = 'none'; + loading.style.display = 'none'; + clearBtn.style.display = 'none'; + errors.textContent = ''; + } else { + //localStorage 有 saved keys/regions，顯示結果 + displayCarbonUsage(storedApiKey, storedRegion); + results.style.display = 'none'; + form.style.display = 'none'; + clearBtn.style.display = 'block'; + } +}; + +function reset(e) { + e.preventDefault(); + //只清除 local storage 國家區域代碼 + localStorage.removeItem('regionName'); + init(); +} + +``` +在函式中，有一些有趣的邏輯。閱讀它們，你看出發生什麼事嗎？ + +- 兩個 `const` 被設定為檢查用戶是否有儲存 APIKey 與國家區域代碼在 local storage 中。 +- 若兩者皆為 null，將造型設為 'block' 來顯示表單 +- 隱藏 results、loading 與 clearBtn，設定 error 文字為空字串 +- 若存在 key 與代碼，開始新的流程： + - 呼叫 API 取得碳排放資訊 + - 隱藏結果區域 + - 隱藏表單 + - 顯示重置按鈕 + +在下一步之前，你可以學習一些瀏覽器的重要成員：[LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)。 LocalStorage 是瀏覽器儲存字串的有效方法，以 `key-value` 配對兩兩一組。這種儲存型態可以被 JavaScript 管理並控制瀏覽器的資料。LocalStorage 沒有期限，而另一款網頁儲存 SessionStorage 會在瀏覽器關閉時清除內容。不同的儲存方式有各自的優缺點。 + +> 注意 ── 你的瀏覽器擴充套件有自己的 local storage。主瀏覽器視窗是不同的個體，兩者會做各自的行為。 + +你設定 APIKey 紀錄字串數值。你可以在 Edge 瀏覽器上「檢查」一個網頁 (右鍵瀏覽器來檢查)，在 Applications 標籤中觀察儲存區的使用情況。 + +![Local storage 區域](../images/localstorage.png) + +✅ 想想那些情況你不需要儲存資料到 LocalStorage 中。總體而言，將 API Keys 放在 LocalStorage 是個很糟糕的想法！你知道為什麼嗎？在我們的例子中，我們的應用程式是以教學為目的，並不會發布在應用程式商店中，所以我們選擇此中處理方式。 + +你可以發現網頁 API 能處理 LocalStorage，使用 `getItem()`、`setItem()` 或是 `removeItem()`。它們廣泛地支援不同的瀏覽器。 + +在建立函式 `init()` 中的函式 `displayCarbonUsage()` 之前，我們先建立表單提交初始化的功能。 + +### 處理表單提交 + +建立函式 `handleSubmit`，接收事件參數 `(e)`。終止網頁移轉的事件(在本例子中，我們終止瀏覽器刷新的處理)並呼叫新的函式 `setUpUser`，傳送參數 `apiKey.value` 與 `region.value`。藉由這個方式，你能將兩個初始表單的數值正確地移轉到適合的位置。 + +```JavaScript +function handleSubmit(e) { + e.preventDefault(); + setUpUser(apiKey.value, region.value); +} +``` +✅ 刷新你的記憶 ── 上堂課中的 HTML 檔案開頭有兩個輸入區域，它們的 `values` 被存到 `const` 中，並且被定為 `required`，表示瀏覽器禁止使用者輸入空值。 + +### 設定使用者 + +來到函式 `setUpUser`，這裡你能找到 apiKey 與 regionName 被存到 Local Storage 中。新增函式： + +```JavaScript +function setUpUser(apiKey, regionName) { + localStorage.setItem('apiKey', apiKey); + localStorage.setItem('regionName', regionName); + loading.style.display = 'block'; + errors.textContent = ''; + clearBtn.style.display = 'block'; + //建立初始化呼叫 + displayCarbonUsage(apiKey, regionName); +} +``` +這個函式設定當 API 被呼叫時，顯示讀取訊息。到這裡，你即將建立這個擴充功能專案最重要的函式！ + +### 顯示碳排放量 + +最後，是時候查詢 API 了！ + +在前往下一步前，我們先來討論何謂 API。API，[Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)，是網頁開發者工具箱內最重要的成員。它們提供程式標準的互動模式與溝通介面，舉例來說，如果你建立一個需要存取資料庫的網頁，資料庫方可能就有人建立了 API 供你使用。API 有各式各樣的種類，最普遍使用的為[REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/)。 + +✅ 'REST' 全名為 'Representational State Transfer'，提供各式各樣 URL 形式來抓取資料。對網路開發者的 API 種類做一點研究，什麼形式的 API 最吸引你？ + +這條函式中有一個重要到值得紀錄的事情。第一點為[關鍵字 `async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)。讓你的函式非同步地執行，在行為完成前做等待，譬如資料被回傳。 + +這裡有一個簡短的影片介紹 `async`： + +[![Async 與 Await 處理 promises 物件](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async 與 Await 處理 promises 物件") + +> 點擊上方圖片以觀賞關於 async/await 的影片。 + +建立新的函式來詢問 C02Signal 的 API： + +```JavaScript +import axios from '../node_modules/axios'; + +async function displayCarbonUsage(apiKey, region) { + try { + await axios + .get('https://api.co2signal.com/v1/latest', { + params: { + countryCode: region, + }, + headers: { + 'auth-token': apiKey, + }, + }) + .then((response) => { + let CO2 = Math.floor(response.data.data.carbonIntensity); + + //calculateColor(CO2); + + loading.style.display = 'none'; + form.style.display = 'none'; + myregion.textContent = region; + usage.textContent = + Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)'; + fossilfuel.textContent = + response.data.data.fossilFuelPercentage.toFixed(2) + + '% (percentage of fossil fuels used to generate electricity)'; + results.style.display = 'block'; + }); + } catch (error) { + console.log(error); + loading.style.display = 'none'; + results.style.display = 'none'; + errors.textContent = 'Sorry, we have no data for the region you have requested.'; + } +} +``` + +這是一個挺大的函式，發生了什麼事？ + +- 遵循程式實踐過程，你使用關鍵字 `async` 讓函式非同步地作行為。函式內的 `try/catch` 區塊會在 API 回傳資料時回傳 promise 物件。因為我們無法控制 API 會多快地回應訊息(甚至無法回應訊息！)，你需要處理這種不確定性的時序關係。 +- 藉由提供 API Key 訪問 co2signal API 以取得你的地區資料。要使用這把鑰匙，你必須在網頁標頭中新增認證參數。 +- 當 API 回應時，你將各種物件填入回傳的數值，並輸出到畫面上中。 +- 如果發生錯誤，或沒有結果產生，輸出錯誤訊息。 + +✅ 非同步程式設計是一種實用的工具。閱讀[更多使用方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)設定非同步程式的程式碼。 + +恭喜你！當你建制你的專案(`npm run build`)並在瀏覽器上刷新功能，你有個可以運作的應用套件了！現在只差圖示無法正常顯示，我們會在下一堂課中修正它。 + +--- + +## 🚀 挑戰 + +我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？ + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26) + +## 複習與自學 + +這堂課你學會關於 LocalStorage 與 API，它們對資深網頁開發者提供很大的幫助。你能想想這兩樣東西如何彼此相互合作呢？想想你會如何建構你的網頁，讓 API 得以使用你所儲存的資料。 + +## 作業 + +[認領一項 API](assignment.zh-tw.md) + diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md new file mode 100644 index 00000000..c40fea7c --- /dev/null +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 認領一項 API + +## 大綱 + +API 可以是很好玩的。這裡有[許多公開 API 的清單](https://github.com/public-apis/public-apis)。挑選一項 API，建立一個網頁擴充功能來解決問題。問題可以很小，如找不到足夠的寵物照片，這時你可以嘗試使用[dog CEO API](https://dog.ceo/dog-api/))；或是解決更大問題。好好享受吧！ + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | --------------------------------------------- | ------------------------ | ------------ | +| | 使用上述清單內的 API 建立完整的瀏覽器擴充功能 | 建立部分的瀏覽器擴充功能 | 套件存在問題 | \ No newline at end of file diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md new file mode 100644 index 00000000..93ea7a7a --- /dev/null +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md @@ -0,0 +1,160 @@ +# 瀏覽器擴充功能專案 Part 1：學習背景工作與效能 + +## 課前測驗 + +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27) + +### 大綱 + +在前兩堂課程中，你學會如何建立表單、顯示 API 回覆的資料在結果區塊中，這是網頁處理網頁資訊的標準行為。你甚至學會了如何非同步性地抓取資料。你的擴充套件就快完成了。 + +它只剩管理背景工作：包括刷新套件的圖示顏色，我們來討論瀏覽器是如何處理這類的工作。也讓我們探討你所建立的網頁，瀏覽器會多有效地處理其中的內容。 + +## 網頁處理效能的基礎 + +> "網頁處理效能攸關兩件事：網頁多快地載入，與程式多快地執行。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) + +關於如何讓你的網頁能快速地運作在各類裝置、各個使用者以及各種情況，是一件難以想像的龐大主題。這裡有一些要點確保你在開發網頁或是擴充功能時，銘記在心。 + +第一件事為確保網頁收集關於網頁效能的資料，在瀏覽器的開發者工具中可以實現它。在 Edge 中，選擇「設定及更多」按鈕(瀏覽器上三個點的圖示)，並選擇更多工具 > 開發人員工具並開啟 Performance 分頁。你也可以使用鍵盤快捷鍵，Windows 上的 `Ctrl` + `Shift` + `I` 與 Mac 上的 `Option` + `Command` + `I` 來開啟開發人員工具。 + +Performance 分頁包括了效能分析工具。開啟一個網頁，例如 https://www.microsoft.com，點擊 'Record' 按鈕並重新整理網頁。停止錄製後你就能取得網頁的 'script'、'render' 與 'paint' 的過程與資訊： + +![Edge 性能分析工具](../images/profiler.png) + +✅ 造訪[Microsoft 文件](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)觀看 Edge 的 Performance 分頁資訊 + +> 提示：要取得真正的網頁開啟時間，記得清除你的瀏覽器快取。 + +選擇一樣網頁在載入時，時間列中出現的事件物件。 + +觀看它的總覽面板並截圖你的網頁效能。 + +![Edge 性能分析工具截圖](../images/snapshot.png) + +檢查 Event Log 面板，是否有網頁事件花超過 15 毫秒： + +![Edge event log](../images/log.png) + +✅ 了解你的性能分析工具！在這個網頁中，開啟開發者工具，檢查是否有任何 bottleneck。什麼是載入最久的物件？哪個又是最快的？ + +## 效能分析 + +總體而言，每一位網頁開發者一定要注意一些「有問題的地方」，避免在發布作品時有令人意想不到的驚喜。 + +**資產(Asset)大小**：過去幾年來，網頁「變重」了，也因此變慢了。有些負擔來自於圖片的使用。 + +✅ 查詢[Internet Archive](https://httparchive.org/reports/page-weight)，看看過去的網頁負擔等資訊。 + +一個好的習慣是確保你的圖片有做最佳化，呈現合理的檔案大小及解析度影像給你的使用者。 + +**DOM 查找元素(Traversal)**：瀏覽器必須依照你的程式碼建立 Document Object Model，請確保你的 tags 最小化，網頁只使用必須的功能與造型。另外，過量的網頁 CSS 也可以被最佳化，舉例來說，造型樣板只用在單頁上，而非全域上。 + +**JavaScript**：每一位 JavaScript 開發者會觀察 'render-blocking' 腳本，它會在 DOM 查找與瀏覽器呈現前被載入好。請考慮使用 `defer` 在你的程式碼中，我們的盆栽盒專案就有實踐這行。 + +✅ 在[網頁測速網](https://www.webpagetest.org/)上測試一些網頁，學習確認網頁效能的基本檢查。 + +現在你了解瀏覽器如何呈現你所提供的資產，我們來看看我們的擴充功能最後需要補齊的項目： + +### 建立函式計算顏色 + +編輯 `/src/index.js`，新增函式 `calculateColor()` 在一系列為了 DOM 存取的 `const` 變數之後： + +```JavaScript +function calculateColor(value) { + let co2Scale = [0, 150, 600, 750, 800]; + let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; + + let closestNum = co2Scale.sort((a, b) => { + return Math.abs(a - value) - Math.abs(b - value); + })[0]; + console.log(value + ' is closest to ' + closestNum); + let num = (element) => element > closestNum; + let scaleIndex = co2Scale.findIndex(num); + + let closestColor = colors[scaleIndex]; + console.log(scaleIndex, closestColor); + + chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } }); +} +``` + +發生了什麼事？你傳遞了 API 回傳的二氧化碳濃度數值，計算出它最適合對應的顏色矩陣索引位置。之後，你將這個顏色數值傳給了 chrome runtime。 + +chrome.runtime 有[一個 API](https://developer.chrome.com/extensions/runtime)處理所有的背景工作，你的擴充套件借助了此功能： + +> "在應用程式中，使用 chrome.runtime API 來接收背景頁面，回傳關於 manifest 的資訊，監聽並回應事件。你也可以利用此 API 轉換 URL 的相對路徑成絕對路徑。" + +✅ 如果你正打算開發此專案給 Edge 瀏覽器上使用，你會訝異你使用的是 chrome API。新的 Edge 瀏覽器執行在 Chromium browser 引擎上，所以你也能使用這些工具。 + +> 注意，如果你想要剖析瀏覽器擴充功能，請在擴充套件上執行開發者工具，它與瀏覽器主視窗為不同的個體。 + +### 設定圖示預設顏色 + +現在，在函式 `init()` 中，利用呼叫 chrome `updateIcon` 設定圖示顏色為通用綠： + +```JavaScript +chrome.runtime.sendMessage({ + action: 'updateIcon', + value: { + color: 'green', + }, +}); +``` +### 呼叫函式、執行呼叫 + +接下來，在 C02Signal API 回傳的 promise 物件下方呼叫函式： + +```JavaScript +//let CO2... +calculateColor(CO2); +``` +最後，在檔案 `/dist/background.js` 中，新增事件監聽者給這些背景行為的呼叫： + +```JavaScript +chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { + if (msg.action === 'updateIcon') { + chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + } +}); +//參考 energy lollipop extension，很好的程式！ +function drawIcon(value) { + let canvas = document.createElement('canvas'); + let context = canvas.getContext('2d'); + + context.beginPath(); + context.fillStyle = value.color; + context.arc(100, 100, 50, 0, 2 * Math.PI); + context.fill(); + + return context.getImageData(50, 50, 100, 100); +} +``` +在此程式中，你建立了事件監聽者給任何前到背景工作管理者的訊息。若 'updateIcon' 被呼叫，則接下來的程式會被執行，利用 Canvas API 繪製出對應顏色的圖示。 + +✅ 你會學習更多關於 Canvas API 在往後的[太空遊戲課程](../../6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md)。 + +現在，重新建制你的擴充功能(`npm run build`)，刷新並運行你的套件，觀察圖示的顏色變化。現在是時候去跑腿或是洗碗嗎？現在你知道了！ + +恭喜你，你已經建立了一款實用的瀏覽器擴充功能，並學到更多瀏覽器的運作方式與監測它的效能分析。 + +--- + +## 🚀 挑戰 + +調查一些悠久的開源網站，並根據它們的 GitHub 歷史，你能分辨它們過去幾年以來效能上的調整嗎？什麼它們是共同的痛點？ + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28) + +## 複習與自學 + +請考慮註冊[performance newsletter](https://perf.email/) + +調查瀏覽器測量網頁效能的方法，查看開發者工具內的 Performance 分頁。你能找到什麼巨大的差別嗎？ + +## 作業 + +[分析網頁效能](assignment.zh-tw.md) + diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md new file mode 100644 index 00000000..8f733b7e --- /dev/null +++ b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md @@ -0,0 +1,9 @@ +# 分析網頁效能 + +請提供一份詳細的報告，點出一個網頁效能上的問題點。分析網頁緩慢的原因並提供改善它的方案。不要只依賴瀏覽器工具，做一點研究尋找更多幫助你的工具。 + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | ---------------------------------- | -------------- | ------------ | +| | 詳細的報告包括非瀏覽器的第三方工具 | 呈現出標準報告 | 報告內容有限 | \ No newline at end of file diff --git a/5-browser-extension/translations/README.zh-tw.md b/5-browser-extension/translations/README.zh-tw.md new file mode 100644 index 00000000..79fb9e0e --- /dev/null +++ b/5-browser-extension/translations/README.zh-tw.md @@ -0,0 +1,28 @@ +# 建立瀏覽器擴充功能 + +建立瀏覽器擴充功能是個好玩且有趣的方式來思考應用程式的執行效能，包含各式各樣類型的網頁資產。這堂學習模組介紹了瀏覽器運作方式、如何架設擴充功能、建立表單、呼叫 API、使用 Local Storage 和測量網頁效能的方法並增進它。 + +你會建立一個支援在 Edge、Chrome 與 Firefox 的瀏覽器擴充功能。這個擴充功能就像小型的網頁，專門滿足特定課題：利用[C02 Signal API](https://www.co2signal.com)檢查地區的電力使用與碳排濃度，回傳地區的碳足跡。 + +這款特設擴充功能允許使用者在輸入完 API Key 與國家地區代碼到表單後，取得當地電力使用量與其他資訊，決定使用者後續的行為。舉例來說，在地區高電力用量時，你可能會延後烘衣機的使用(增加碳排)。 + +### 主題 + +1. [關於瀏覽器](../1-about-browsers/translations/README.zh-tw.md) +2. [表單與 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md) +3. [背景工作與效能](../3-background-tasks-and-performance/translations/README.zh-tw.md) + +### 成就 + +![綠能瀏覽器擴充功能](extension-screenshot.png) + +## 參與人員 + +網頁碳排放追蹤的發想出自於 Asim Hussain，微軟綠能雲端倡導小組的領導人與[Green Principles](https://principles.green/)的作者。這源自於一個[網頁專案](https://github.com/jlooper/green)。 + +擴充功能的結構受[Adebola Adeniran 的 COVID 擴充功能](https://github.com/onedebos/covtension)啟發。 + +「點」圖示系統的概念參考[Energy Lollipop](https://energylollipop.com/)的加州排放擴充功能。 + +這些課程由 [Jen Looper](https://www.twitter.com/jenlooper) 用滿滿的 ♥️ 來編寫。 +