mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-22 06:12:55 +02:00
Merge branch 'main' into loc-query-strings-fix
This commit is contained in:
RP1458
GitHub
@@ -69,7 +69,7 @@ CO2 Signal's API.
|
||||
- the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
|
||||
- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
|
||||
|
||||
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-4621-cxa)
|
||||
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
Take a minute to look through the codebase:
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@ API de CO2 Signal.
|
||||
- el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta.
|
||||
- [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web
|
||||
|
||||
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-4621-cxa)
|
||||
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
Tómate un minuto para revisar el código base:
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
|
||||
- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
|
||||
|
||||
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-4621-cxa)では、パッケージ管理の詳細を学ぶことができます。
|
||||
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。
|
||||
|
||||
コードベースに目を通してみてください。
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
- [starter code](../start). `start` 폴더를 다운로드하세요; 이 폴더에서 코드를 완성하게됩니다.
|
||||
- [NPM](https://www.npmjs.com) - NPM은 패키지 관리 도구입니다. 로컬에 설치하고 `package.json` 파일에 나열된 패키지를 웹 어셋에서 사용하도록 설치합니다.
|
||||
|
||||
✅ 이 [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-4621-cxa)에서 패키지 관리에 대해 자세히 알아보세요
|
||||
✅ 이 [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)에서 패키지 관리에 대해 자세히 알아보세요
|
||||
|
||||
잠시 시간을 내어 코드베이스를 보세요:
|
||||
|
||||
|
||||
168
5-browser-extension/1-about-browsers/translations/README.ms.md
Normal file
168
5-browser-extension/1-about-browsers/translations/README.ms.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# Projek Pelanjutan Penyemak Imbas Bahagian 1: Semua mengenai Penyemak Imbas
|
||||
|
||||
|
||||
> Sketchnote karya [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
|
||||
[Kuiz Pra Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
|
||||
|
||||
### Pengenalan
|
||||
|
||||
Sambungan penyemak imbas menambah fungsi tambahan pada penyemak imbas. Tetapi sebelum anda membuatnya, anda harus mengetahui sedikit tentang bagaimana penyemak imbas melakukan kerja mereka.
|
||||
|
||||
### Mengenai penyemak imbas
|
||||
|
||||
Dalam siri pelajaran ini, anda akan belajar bagaimana membina pelanjutan penyemak imbas yang akan berfungsi pada penyemak imbas Chrome, Firefox dan Edge. Di bahagian ini, anda akan mengetahui cara penyemak imbas berfungsi dan memaparkan elemen pelanjutan penyemak imbas.
|
||||
|
||||
Tetapi apakah sebenarnya penyemak imbas itu? Ini adalah aplikasi perisian yang memungkinkan pengguna akhir mengakses kandungan dari pelayan dan memaparkannya di laman web.
|
||||
|
||||
✅ Sejarah sedikit: penyemak imbas pertama dipanggil 'WorldWideWeb' dan dicipta oleh Sir Timothy Berners-Lee pada tahun 1990.
|
||||
|
||||
|
||||
> Beberapa penyemak imbas awal, melalui [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
|
||||
|
||||
Apabila pengguna tersambung ke internet menggunakan alamat URL (Uniform Resource Locator), biasanya menggunakan Hypertext Transfer Protocol melalui alamat `http` atau `https`, penyemak imbas berkomunikasi dengan pelayan web dan mengambil halaman web.
|
||||
|
||||
Pada titik ini, mesin rendering penyemak imbas memaparkannya pada perangkat pengguna, yang mungkin merupakan telefon bimbit, desktop, atau komputer riba.
|
||||
|
||||
Penyemak imbas juga memiliki kemampuan untuk menyimpan konten sehingga tidak perlu diambil dari pelayan setiap masa. Mereka dapat mencatat sejarah aktiviti menyemak imbas pengguna, menyimpan 'kuki', yang merupakan sekumpulan kecil data yang mengandungi maklumat yang digunakan untuk menyimpan aktiviti pengguna, dan banyak lagi.
|
||||
|
||||
Perkara yang sangat penting untuk diingat mengenai penyemak imbas ialah semuanya tidak sama! Setiap penyemak imbas mempunyai kelebihan dan kekurangannya, dan pembangun web profesional perlu memahami cara membuat laman web berfungsi dengan baik di antara penyemak imbas. Ini merangkumi pengendalian ruang pandang kecil seperti telefon bimbit, dan juga pengguna yang berada di luar talian.
|
||||
|
||||
Laman web yang sangat berguna yang mungkin anda tandakan dalam penyemak imbas apa pun yang anda mahu gunakan ialah [caniuse.com](https://www.caniuse.com). Semasa anda membina laman web, sangat berguna untuk menggunakan senarai teknologi yang disokong oleh caniuse sehingga anda dapat menyokong pengguna anda dengan sebaik-baiknya.
|
||||
|
||||
✅ Bagaimanakah anda dapat mengetahui penyemak imbas apa yang paling popular dengan pangkalan pengguna laman web anda? Periksa analisis anda - anda boleh memasang pelbagai pakej analitik sebagai sebahagian daripada proses pengembangan web anda, dan mereka akan memberitahu anda penyemak imbas apa yang paling banyak digunakan oleh pelbagai penyemak imbas yang popular.
|
||||
|
||||
## Pelanjutan Penyemak Imbas
|
||||
|
||||
Mengapakah anda mahu membina pelanjutan penyemak imbas? Adalah berguna untuk melampirkan pada penyemak imbas anda apabila anda memerlukan akses cepat ke tugas yang cenderung anda ulang. Contohnya, jika anda perlu memeriksa warna di pelbagai laman web yang anda berinteraksi, anda mungkin memasang pelanjutan penyemak imbas pemilih warna. Sekiranya anda menghadapi masalah mengingat kata laluan, anda mungkin menggunakan pelanjutan penyemak imbas pengurusan kata laluan.
|
||||
|
||||
Pelanjutan penyemak imbas juga senang dikembangkan. Mereka cenderung menguruskan sejumlah tugas yang mereka laksanakan dengan baik.
|
||||
|
||||
✅ Apakah pelanjutan penyemak imbas kegemaran anda? Tugas apa yang mereka laksanakan?
|
||||
|
||||
### Memuat turun pelanjutan penyemak imbas
|
||||
|
||||
Sebelum anda mula membina, lihatlah proses membina dan menggunakan pelanjutan penyemak imbas. Walaupun setiap penyemak imbas sedikit berbeza dalam cara mereka menguruskan tugas ini, prosesnya serupa di Chrome dan Firefox dengan contoh ini di Edge:
|
||||
|
||||
|
||||
|
||||
Pada dasarnya, prosesnya adalah:
|
||||
|
||||
- buat pelanjutan anda menggunakan `npm build`
|
||||
- arahkan di penyemak imbas ke panel pelanjutan menggunakan butang "Tetapan dan lain-lain" (ikon `...`) di kanan atas
|
||||
- jika ia adalah pemasangan baru, pilih `load unpacked` untuk memuat naik ekstensi baru dari folder buildnya (dalam kes kami adalah `/ dist`)
|
||||
- atau, klik `reload` jika anda memuat semula pelanjutan yang sudah dipasang
|
||||
|
||||
✅ Arahan ini berkaitan dengan sambungan yang anda buat sendiri; untuk memasang pelanjutan yang telah dilepaskan ke kedai pelanjutan penyemak imbas yang berkaitan dengan setiap penyemak imbas, anda harus menavigasi ke [kedai](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) dan pasang pelanjutan pilihan anda.
|
||||
|
||||
### Bermula Di Sini
|
||||
|
||||
Anda akan membina pelanjutan penyemak imbas yang memaparkan jejak karbon wilayah anda, menunjukkan penggunaan tenaga wilayah anda dan sumber tenaga. Pelanjutan penyemak imbas tersebut akan mempunyai bentuk yang mengumpulkan kunci API sehingga anda dapat mengaksesnya
|
||||
CO2 Signal's API.
|
||||
|
||||
**Keperluan:**
|
||||
|
||||
- [kunci API](https://www.co2signal.com/); masukkan e-mel anda di dalam kotak di halaman ini dan satu akan dihantar kepada anda
|
||||
- [kod untuk wilayah anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Elektrik](https://www.electricitymap.org/map) (di Boston, misalnya, Saya menggunakan 'US-NEISO').
|
||||
- [kod pemula](../start). Muat turun folder `start`; anda akan melengkapkan kod dalam folder ini.
|
||||
- [NPM](https://www.npmjs.com) - NPM adalah alat pengurusan pakej; memasangnya secara tempatan dan pakej yang disenaraikan dalam fail `package.json` anda akan dipasang untuk digunakan oleh aset web anda
|
||||
|
||||
✅ Ketahui lebih lanjut mengenai pengurusan pakej dalam [modul pembelajaran yang sangat baik](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/)
|
||||
|
||||
Luangkan masa sebentar untuk melihat pangkalan kode:
|
||||
|
||||
dist
|
||||
-|manifest.json (lalai ditetapkan di sini)
|
||||
-|index.html (front-end HTML markup di sini)
|
||||
-|background.js (latar belakang JS di sini)
|
||||
-|main.js (membina JS)
|
||||
src
|
||||
-|index.js (kod JS anda ada di sini)
|
||||
|
||||
✅ Setelah anda mempunyai kunci API dan kod Wilayah yang berguna, simpan di suatu tempat dalam nota untuk penggunaan masa depan.
|
||||
|
||||
### Bina HTML untuk pelanjutan penyemak imbas
|
||||
|
||||
Pelanjutan penyemak imbas ini mempunyai dua pandangan. Satu untuk mengumpulkan kunci API dan kod wilayah:
|
||||
|
||||
|
||||
|
||||
Dan yang kedua untuk memaparkan penggunaan karbon di rantau ini:
|
||||
|
||||
|
||||
|
||||
Mari mulakan dengan membina HTML untuk borang dan menggayakannya dengan CSS.
|
||||
|
||||
Dalam folder `/ dist`, anda akan membina borang dan kawasan hasil. Dalam fail `index.html`, isikan kawasan borang yang digambarkan:
|
||||
|
||||
```HTML
|
||||
<form class="form-data" autocomplete="on">
|
||||
<div>
|
||||
<h2>Baru? Tambahkan Maklumat anda</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label for="region">Nama Wilayah</label>
|
||||
<input type="text" id="region" required class="region-name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="api">Kunci API anda dari tmrow</label>
|
||||
<input type="text" id="api" required class="api-key" />
|
||||
</div>
|
||||
<button class="search-btn">Hantar</button>
|
||||
</form>
|
||||
```
|
||||
Ini adalah bentuk di mana maklumat yang anda simpan akan dimasukkan dan disimpan ke simpanan tempatan.
|
||||
|
||||
Seterusnya, buat kawasan hasil; di bawah tag borang akhir, tambahkan beberapa divs:
|
||||
|
||||
```HTML
|
||||
<div class="result">
|
||||
<div class="loading">loading...</div>
|
||||
<div class="errors"></div>
|
||||
<div class="data"></div>
|
||||
<div class="result-container">
|
||||
<p><strong>Wilayah: </strong><span class="my-region"></span></p>
|
||||
<p><strong>Penggunaan Karbon: </strong><span class="carbon-usage"></span></p>
|
||||
<p><strong>Peratusan Bahan Bakar Fosil: </strong><span class="fossil-fuel"></span></p>
|
||||
</div>
|
||||
<button class="clear-btn">Tukar wilayah</button>
|
||||
</div>
|
||||
```
|
||||
Pada ketika ini, anda boleh mencuba binaan. Pastikan memasang pergantungan pakej pelanjutan ini:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Perintah ini akan menggunakan npm, Pengurus Pakej Node, untuk memasang paket web untuk proses pembuatan pelanjutan anda. Webpack adalah bundler yang mengendalikan menyusun kod. Anda dapat melihat output proses ini dengan melihat di `/dist/main.js` - anda melihat kodnya telah digabungkan.
|
||||
|
||||
Buat masa ini, pelanjutan penyemak imbas perlu dibina dan, jika anda menyebarkannya ke Edge sebagai pelanjutan, anda akan melihat borang yang dipaparkan dengan kemas.
|
||||
|
||||
Tahniah, anda telah mengambil langkah pertama untuk membina pelanjutan penyemak imbas. Dalam pelajaran seterusnya, anda akan menjadikannya lebih berfungsi dan berguna.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Lihatlah kedai pelanjutan penyemak imbas dan pasang satu di penyemak imbas anda. Anda boleh memeriksa failnya dengan cara yang menarik. Apa yang anda dapati?
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
[Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
|
||||
|
||||
## Mengkaji dan Belajar Sendiri
|
||||
|
||||
Dalam pelajaran ini anda belajar sedikit mengenai sejarah penyemak imbas web; ambil kesempatan ini untuk mengetahui bagaimana pencipta World Wide Web membayangkan penggunaannya dengan membaca lebih banyak mengenai sejarahnya. Beberapa laman web yang berguna termasuk:
|
||||
|
||||
[Sejarah Penyemak Imbas Web](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
|
||||
|
||||
[Sejarah Tentang Web](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[Temu ramah dengan 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)
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Mengayakan semula penlanjut penyemak imbas](assignment.ms.md)
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
# Mengayakan semula penlanjut penyemak imbas
|
||||
|
||||
## Arahan
|
||||
|
||||
Pangkalan kode untuk peluasan ini dilengkapi dengan gaya, tetapi anda tidak perlu menggunakannya; jadikan peluasan anda sendiri dengan menyusun semula dengan mengedit fail cssnya.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||
| | Kod dihantar dengan gaya baharu yang berfungsi | Gaya tidak lengkap | Gaya mempunyai pepijat |
|
||||
@@ -12,11 +12,11 @@
|
||||
|
||||
### 拡張機能で操作する要素の設定:
|
||||
|
||||
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。
|
||||
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja.md) を参照してください。
|
||||
|
||||
`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
// フォームフィールド
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
@@ -38,7 +38,7 @@ const clearBtn = document.querySelector('.clear-btn');
|
||||
|
||||
次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
@@ -50,7 +50,7 @@ init();
|
||||
|
||||
今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function init() {
|
||||
//何かがローカルストレージにある場合は、それをピックアップします。
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
@@ -112,7 +112,7 @@ API キーに文字列の値を設定して、例えば Edge では Web ペー
|
||||
|
||||
イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
@@ -124,7 +124,7 @@ function handleSubmit(e) {
|
||||
|
||||
次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
@@ -153,7 +153,7 @@ function setUpUser(apiKey, regionName) {
|
||||
|
||||
C02Signal API に問い合わせを行うための新しい関数を作成します:
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
import axios from '../node_modules/axios';
|
||||
|
||||
async function displayCarbonUsage(apiKey, region) {
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
# Projek Pelanjutan Penyemak Imbas Bahagian 2: Panggil API, gunakan Penyimpanan Tempatan
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
|
||||
[Kuiz Pra Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
|
||||
|
||||
### Pengenalan
|
||||
|
||||
Dalam pelajaran ini, anda akan memanggil API dengan menyerahkan borang pelanjutan penyemak imbas anda dan memaparkan hasilnya dalam pelanjutan penyemak imbas anda. Di samping itu, anda akan belajar bagaimana anda boleh menyimpan data di storan tempatan penyemak imbas anda untuk rujukan dan penggunaan di masa hadapan.
|
||||
|
||||
✅ Ikuti segmen bernombor dalam fail yang sesuai untuk mengetahui di mana meletakkan kod anda
|
||||
|
||||
### Sediakan elemen untuk dimanipulasi dalam pelanjutan:
|
||||
|
||||
Pada masa ini anda telah membina HTML untuk bentuk dan hasilnya `<div>` untuk pelanjutan penyemak imbas anda. Mulai sekarang, anda perlu bekerja dalam fail `/src/index.js` dan membina pelanjutan anda sedikit demi sedikit. Rujuk [pelajaran sebelumnya](../../about-browser/README.md) untuk menyiapkan projek anda dan pada proses pembinaan.
|
||||
|
||||
Bekerja dalam fail `index.js` anda, mulakan dengan membuat beberapa pemboleh ubah `const` untuk menahan nilai yang berkaitan dengan pelbagai bidang:
|
||||
|
||||
```JavaScript
|
||||
// form fields
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
const apiKey = document.querySelector('.api-key');
|
||||
|
||||
// results
|
||||
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');
|
||||
```
|
||||
|
||||
Semua bidang ini dirujuk oleh kelas css mereka, semasa anda memasangnya dalam HTML pada pelajaran sebelumnya.
|
||||
|
||||
### Tambah pendengar
|
||||
|
||||
Seterusnya, tambahkan pendengar acara ke formulir dan butang kosong yang mengatur ulang borang, sehingga jika pengguna menyerahkan borang atau mengklik butang set semula itu, sesuatu akan terjadi, dan tambahkan panggilan untuk menginisialisasi aplikasi di bahagian bawah fail:
|
||||
|
||||
```JavaScript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
✅ Perhatikan singkatan yang digunakan untuk mendengarkan acara kirim atau klik, dan bagaimana peristiwa itu diteruskan ke pemegang Fungsi hantar atau set semula. Bolehkah anda menulis setara dengan singkatan ini dalam format yang lebih panjang? Yang mana satu pilihan anda?
|
||||
|
||||
### Bangun fungsi init() dan fungsi reset():
|
||||
|
||||
Sekarang anda akan membina fungsi yang menginisialisasi pelanjutan, yang dipanggil init():
|
||||
|
||||
```JavaScript
|
||||
function init() {
|
||||
//jika ada di localStorage
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
//tetapkan ikon menjadi hijau generik
|
||||
//todo
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
//jika kami tidak mempunyai kunci, tunjukkan borangnya
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
//jika kita telah menyimpan kunci / kawasan di localStorage, tunjukkan hasilnya ketika dimuat
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
//kosongkan simpanan tempatan untuk wilayah sahaja
|
||||
localStorage.removeItem('regionName');
|
||||
init();
|
||||
}
|
||||
|
||||
```
|
||||
Dalam fungsi ini, terdapat beberapa logik yang menarik. Bacalah, anda dapat melihat apa yang berlaku?
|
||||
|
||||
- dua `const` disiapkan untuk memeriksa sama ada pengguna telah menyimpan kod APIKey dan wilayah di storan tempatan.
|
||||
- jika salah satu daripadanya adalah nol, tunjukkan borang dengan mengubah gaya untuk ditampilkan sebagai 'blok'
|
||||
- sembunyikan hasilnya, muat, dan clearBtn dan tetapkan teks ralat ke rentetan kosong
|
||||
- jika ada kunci dan wilayah, mulailah rutin untuk:
|
||||
- hubungi API untuk mendapatkan data penggunaan karbon
|
||||
- menyembunyikan kawasan hasil
|
||||
- sembunyikan borang
|
||||
- tunjukkan butang set semula
|
||||
|
||||
Sebelum meneruskan, berguna untuk mengetahui konsep yang sangat penting yang terdapat dalam penyemak imbas: [LocalStorage] https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage adalah cara yang berguna untuk menyimpan rentetan dalam penyemak imbas sebagai pasangan `kunci-nilai` . Jenis storan web ini dapat dimanipulasi oleh JavaScript untuk menguruskan data di penyemak imbas. LocalStorage tidak akan habis masa berlakunya, sementara SessionStorage, jenis penyimpanan web lain, akan dihapus apabila penyemak imbas ditutup. Pelbagai jenis storan mempunyai kebaikan dan keburukan terhadap penggunaannya.
|
||||
|
||||
> Catatan - pelanjutan penyemak imbas anda mempunyai storan tempatan sendiri; tetingkap penyemak imbas utama adalah contoh yang berbeza dan berkelakuan secara berasingan.
|
||||
|
||||
Anda menetapkan APIKey anda agar mempunyai nilai rentetan, misalnya, dan anda dapat melihatnya diatur di Edge dengan "memeriksa" laman web (anda boleh mengklik kanan penyemak imbas untuk memeriksa) dan pergi ke tab Aplikasi untuk melihat penyimpanan.
|
||||
|
||||
|
||||
|
||||
✅ Fikirkan situasi di mana anda TIDAK mahu menyimpan beberapa data di LocalStorage. Secara umum, meletakkan Kunci API di LocalStorage adalah idea yang tidak baik! Bolehkah anda melihat mengapa? Dalam kes kami, kerana aplikasi kami adalah semata-mata untuk belajar dan tidak akan digunakan ke kedai aplikasi, kami akan menggunakan kaedah ini.
|
||||
|
||||
Perhatikan bahawa anda menggunakan Web API untuk memanipulasi LocalStorage, baik dengan menggunakan `getItem()`, `setItem()` atau `removeItem()`. Ia disokong secara meluas di penyemak imbas.
|
||||
|
||||
Sebelum membina fungsi `displayCarbonUsage()` yang dipanggil di `init()`, mari kita bina fungsi untuk menangani penyerahan borang awal.
|
||||
|
||||
### Mengendalikan penghantaran borang
|
||||
|
||||
Buat fungsi yang disebut `handleSubmit` yang menerima argumen peristiwa `(e)`. Hentikan peristiwa daripada menyebarkan (dalam hal ini, kami ingin menghentikan penyemak imbas menyegarkan) dan panggil fungsi baru, `setUpUser`, meneruskan argumen `apiKey.value` dan `region.value`. Dengan cara ini, anda menggunakan dua nilai yang dibawa melalui bentuk awal apabila medan yang sesuai diisi.
|
||||
|
||||
```JavaScript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
✅ Refresh memori anda - HTML yang anda tetapkan dalam pelajaran terakhir mempunyai dua medan input yang `value` nya ditangkap melalui `const` yang anda tetapkan di bahagian atas fail, dan keduanya `required` sehingga penyemak imbas berhenti pengguna daripada memasukkan nilai nol.
|
||||
|
||||
### Sediakan pengguna
|
||||
|
||||
Beralih ke fungsi `setUpUser`, di sinilah anda menetapkan nilai penyimpanan tempatan untuk apiKey dan regionName. Tambahkan fungsi baru:
|
||||
|
||||
```JavaScript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
//buat panggilan awal
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
Fungsi ini menetapkan mesej memuat untuk ditunjukkan semasa API dipanggil. Pada ketika ini, anda telah berjaya membuat fungsi terpenting pelanjutan penyemak imbas ini!
|
||||
|
||||
### Paparkan Penggunaan Karbon
|
||||
|
||||
Sebelum melangkah lebih jauh, kita harus membincangkan API. API, atau [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), adalah elemen penting dari kotak alat pembangun web. Mereka menyediakan cara standard untuk program berinteraksi dan saling berinteraksi antara satu sama lain. Sebagai contoh, jika anda membuat laman web yang perlu membuat pertanyaan pada pangkalan data, seseorang mungkin telah membuat API untuk anda gunakan. Walaupun terdapat banyak jenis API, salah satu yang paling popular adalah [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
|
||||
|
||||
✅ Istilah 'REST' adalah singkatan dari 'Representational State Transfer' dan ciri menggunakan URL yang dikonfigurasikan dengan pelbagai untuk mengambil data. Lakukan sedikit kajian mengenai pelbagai jenis API yang tersedia untuk pembangun. Format apa yang menarik bagi anda?
|
||||
|
||||
Terdapat perkara penting yang perlu diperhatikan mengenai fungsi ini. Perhatikan dahulu kata kunci [`async` kata kunci](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Menulis fungsi anda supaya mereka berjalan secara tidak segerak bermakna mereka menunggu tindakan, seperti data yang dikembalikan, diselesaikan sebelum meneruskan.
|
||||
|
||||
Inilah video ringkas mengenai `async`:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async dan Await untuk menguruskan promises")
|
||||
|
||||
> Klik gambar di atas untuk video mengenai async/await.
|
||||
|
||||
Buat fungsi baru untuk meminta API C02Signal:
|
||||
|
||||
```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.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Ini adalah fungsi besar. Apa yang berlaku di sini?
|
||||
|
||||
- mengikuti amalan terbaik, anda menggunakan kata kunci `async` untuk menjadikan fungsi ini berkelakuan tidak segerak. Fungsi tersebut mengandungi blok `try/catch` kerana akan mengembalikan janji ketika API mengembalikan data. Oleh kerana anda tidak mempunyai kawalan terhadap kelajuan yang akan ditanggapi oleh API (ia sama sekali tidak bertindak balas!), Anda perlu mengatasi ketidakpastian ini dengan memanggilnya secara tidak segerak.
|
||||
- anda meminta API co2signal untuk mendapatkan data wilayah anda, menggunakan Kunci API anda. Untuk menggunakan kunci itu, anda mesti menggunakan jenis pengesahan dalam parameter tajuk anda.
|
||||
- setelah API bertindak balas, anda menetapkan pelbagai elemen data responsnya ke bahagian-bahagian skrin yang anda siapkan untuk menunjukkan data ini.
|
||||
- jika ada ralat, atau jika tidak ada hasil, anda akan menunjukkan mesej ralat.
|
||||
|
||||
✅ Menggunakan corak pengaturcaraan tak segerak adalah alat lain yang sangat berguna dalam kotak alat anda. Baca untuk[mengenai pelbagai cara](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) anda boleh mengkonfigurasi jenis kod ini.
|
||||
|
||||
Tahniah! Sekiranya anda membina pelanjutan anda (`npm run build`) dan menyegarkannya di panel pelanjutan anda, anda mempunyai sambungan yang berfungsi! Satu-satunya perkara yang tidak berfungsi ialah ikon, dan anda akan memperbaikinya pada pelajaran seterusnya.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Kami telah membincangkan beberapa jenis API setakat ini dalam pelajaran ini. Pilih API web dan teliti secara mendalam apa yang ditawarkannya. Sebagai contoh, perhatikan API yang tersedia dalam penyemak imbas seperti [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Apa yang menjadikan API hebat pada pendapat anda?
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
[Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
|
||||
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Anda belajar mengenai LocalStorage dan API dalam pelajaran ini, keduanya sangat berguna untuk pembangun web profesional. Bolehkah anda berfikir bagaimana kedua-dua perkara ini berfungsi bersama? Fikirkan bagaimana anda akan membina laman web yang akan menyimpan item yang akan digunakan oleh API.
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Menggunakan API](assignment.ms.md)
|
||||
@@ -0,0 +1,11 @@
|
||||
# Menggunakan API
|
||||
|
||||
## Arahan
|
||||
|
||||
API sangat menyeronokkan untuk dimainkan. Berikut adalah [senarai banyak percuma](https://github.com/public-apis/public-apis). Pilih dan API, dan buat pelanjutan penyemak imbas yang menyelesaikan masalah. Masalah kecil mungkin kerana tidak mempunyai gambar haiwan peliharaan yang cukup (jadi, cubalah [API CEO anjing](https://dog.ceo/dog-api/)) atau sesuatu yang lebih besar - bersenang-senang!
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||
| | Pelanjutan penyemak imbas yang lengkap dihantar menggunakan API dari senarai di atas | Pelanjutan penyemak imbas separuh dihantar | Penyerahan mempunyai pepijat |
|
||||
@@ -22,7 +22,7 @@ The Performance tab contains a Profiling tool. Open a web site (try, for example
|
||||
|
||||
|
||||
|
||||
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-4621-cxa) on the Performance panel in Edge
|
||||
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge
|
||||
|
||||
> Tip: to get a true reading of your web site's startup time, clear your browser's cache
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra
|
||||
|
||||
|
||||
|
||||
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-4621-cxa) en el panel Rendimiento en Edge
|
||||
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) en el panel Rendimiento en Edge
|
||||
|
||||
> Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
|
||||
|
||||
✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/?WT.mc_id=academic-4621-cxa) を参照してください。
|
||||
✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/?WT.mc_id=academic-13441-cxa) を参照してください。
|
||||
|
||||
> ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
@@ -93,7 +93,7 @@ chrome.runtime には、あらゆる種類のバックグラウンドタスク
|
||||
|
||||
ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
@@ -105,14 +105,14 @@ chrome.runtime.sendMessage({
|
||||
|
||||
次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
|
||||
@@ -22,7 +22,7 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고
|
||||
|
||||
|
||||
|
||||
✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-4621-cxa)를 방문하세요
|
||||
✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)를 방문하세요
|
||||
|
||||
> Tip: 웹 사이트의 시작 시간을 순수하게 보려면, 브라우저의 캐시를 지우세요
|
||||
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
# Projek Pelanjutan Penyemak Imbas Bahagian 3: Ketahui mengenai Tugas dan Prestasi Latar Belakang
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
|
||||
[Kuiz Pra Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Pengenalan
|
||||
|
||||
Dalam dua pelajaran terakhir modul ini, anda belajar bagaimana membuat borang dan kawasan paparan untuk data yang diambil dari API. Ini adalah kaedah yang sangat standard untuk membuat kehadiran web di web. Anda juga belajar bagaimana menangani pengambilan data secara tidak serentak. Sambungan penyemak imbas anda hampir selesai.
|
||||
|
||||
Masih perlu untuk menguruskan beberapa tugas latar belakang, termasuk menyegarkan warna ikon pelanjutan, jadi ini adalah masa yang tepat untuk membincangkan bagaimana penyemak imbas menguruskan tugas seperti ini. Mari fikirkan tugas penyemak imbas ini dalam konteks prestasi aset web anda semasa anda membuatnya.
|
||||
|
||||
## Asas Prestasi Web
|
||||
|
||||
> "Prestasi laman web adalah mengenai dua perkara: seberapa pantas halaman dimuat, dan seberapa pantas kod di dalamnya berjalan." - [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
Topik bagaimana membuat laman web anda sangat cepat di semua jenis peranti, untuk semua jenis pengguna, dalam semua jenis situasi, sangat mengejutkan. Berikut adalah beberapa perkara yang perlu diingat semasa anda membina projek web standard atau pelanjutan penyemak imbas.
|
||||
|
||||
Perkara pertama yang perlu anda lakukan untuk memastikan laman web anda berjalan dengan cekap adalah mengumpulkan data mengenai prestasinya. Tempat pertama untuk melakukan ini adalah dengan alat pembangun penyemak imbas web anda. Di Edge, anda boleh memilih butang "Tetapan dan lain-lain" (ikon tiga titik di kanan atas penyemak imbas), kemudian arahkan ke Lebih Banyak Alat> Alat Pembangun dan buka tab Prestasi. Anda juga boleh menggunakan pintasan papan kekunci `Ctrl` + `Shift` + `I` pada Windows, atau `Option` + `Command` + `I` di Mac untuk membuka alat pembangun.
|
||||
|
||||
Tab Prestasi mengandungi alat Profil. Buka laman web (cuba, misalnya, https://www.microsoft.com) dan klik butang 'Rakam', kemudian muat semula laman web tersebut. Hentikan rakaman pada bila-bila masa, dan anda akan dapat melihat rutin yang dihasilkan untuk 'script', 'render', dan 'cat' laman web ini:
|
||||
|
||||
|
||||
|
||||
✅ Lawati [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) pada panel Performance di Edge
|
||||
|
||||
> Petua: untuk mendapatkan bacaan sebenar mengenai masa permulaan laman web anda, kosongkan cache penyemak imbas anda
|
||||
|
||||
Pilih elemen garis masa profil untuk memperbesar peristiwa yang berlaku semasa halaman anda dimuat.
|
||||
|
||||
Dapatkan gambaran prestasi halaman anda dengan memilih bahagian garis masa profil dan melihat panel ringkasan:
|
||||
|
||||
|
||||
|
||||
Periksa panel Log Peristiwa untuk melihat apakah ada acara yang mengambil masa lebih dari 15 ms
|
||||
|
||||
|
||||
|
||||
✅ Kenali profiler anda! Buka alat pembangun di laman web ini dan lihat apakah ada kesulitan. Apakah aset pemuatan paling lambat? Paling pantas?
|
||||
|
||||
## Pemeriksaan profil
|
||||
|
||||
Secara umum ada beberapa "masalah" yang harus diperhatikan oleh setiap pembangun web ketika membangun laman web, untuk mengelakkan kejutan buruk ketika tiba waktunya untuk digunakan.
|
||||
|
||||
**Saiz aset**: Web menjadi 'lebih berat', dan dengan itu lebih perlahan, sejak beberapa tahun kebelakangan. Sebilangan berat ini ada kaitannya dengan penggunaan gambar.
|
||||
|
||||
✅ Lihat melalui [Arkib Internet](https://httparchive.org/reports/page-weight) untuk melihat sejarah berat halaman dan banyak lagi.
|
||||
|
||||
Amalan yang baik adalah memastikan gambar anda dioptimumkan, disampaikan pada ukuran dan resolusi yang tepat untuk pengguna anda.
|
||||
|
||||
**DOM traversals**: Penyemak imbas harus membina Model Objek Dokumennya berdasarkan kod yang anda tulis, jadi demi prestasi halaman yang baik untuk memastikan tag anda minimum, hanya menggunakan dan menggayakan apa yang diperlukan oleh halaman. Hingga saat ini, lebihan CSS yang dikaitkan dengan halaman dapat dioptimumkan; gaya yang hanya perlu digunakan pada satu halaman tidak perlu disertakan dalam helaian gaya utama, misalnya.
|
||||
|
||||
**JavaScript**: Setiap pengembang JavaScript harus menonton skrip 'render-blocking' yang mesti dimuat sebelum sisa DOM dapat dilalui dan dicat ke penyemak imbas. Pertimbangkan untuk menggunakan `defer` dengan skrip sebaris anda (seperti yang dilakukan dalam modul Terrarium).
|
||||
|
||||
✅ Cubalah beberapa laman web di [laman web Uji Kelajuan Web](https://www.webpagetest.org/) untuk mengetahui lebih lanjut mengenai pemeriksaan biasa yang dilakukan untuk menentukan prestasi laman web.
|
||||
|
||||
Setelah anda mempunyai idea tentang bagaimana penyemak imbas memberikan aset yang anda hantar kepadanya, mari kita lihat beberapa perkara terakhir yang perlu anda lakukan untuk menyelesaikan peluasan anda:
|
||||
|
||||
### Buat fungsi untuk mengira warna
|
||||
|
||||
Bekerja di `/src/index.js`, tambahkan fungsi yang disebut `calculColor ()` setelah rangkaian pemboleh ubah `const` yang anda tetapkan untuk mendapatkan akses ke DOM:
|
||||
|
||||
```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 } });
|
||||
}
|
||||
```
|
||||
|
||||
Apa yang berlaku di sini? Anda memasukkan nilai (intensiti karbon) dari panggilan API yang anda selesaikan pada pelajaran terakhir, dan kemudian anda mengira seberapa dekat nilainya dengan indeks yang disajikan dalam array warna. Kemudian anda menghantar nilai warna yang paling hampir ke masa krom.
|
||||
|
||||
The chrome.runtime mempunyai [API](https://developer.chrome.com/extensions/runtime) yang menangani semua jenis tugas latar belakang, dan pelanjutan anda memanfaatkan:
|
||||
|
||||
> "Gunakan API chrome.runtime untuk mengambil halaman latar belakang, mengembalikan butiran tentang manifes, dan mendengarkan dan menanggapi peristiwa dalam aplikasi atau kitaran hayat pelanjutan. Anda juga dapat menggunakan API ini untuk menukar jalur relatif URL menjadi sepenuhnya- URL yang berkelayakan."
|
||||
|
||||
✅ Sekiranya anda mengembangkan pelanjutan penyemak imbas ini untuk Edge, mungkin mengejutkan anda bahawa anda menggunakan API krom. Versi penyemak imbas Edge yang lebih baru dijalankan pada enjin penyemak imbas Chromium, jadi anda dapat memanfaatkan alat ini.
|
||||
|
||||
> Perhatikan, jika anda ingin membuat profil pelanjutan penyemak imbas, lancarkan alat dev dari dalam pelanjutan itu sendiri, kerana ia adalah contoh penyemak imbas tersendiri.
|
||||
|
||||
### Tetapkan warna ikon lalai
|
||||
|
||||
Sekarang, dalam fungsi `init()`, tetapkan ikon menjadi hijau generik untuk dimulakan dengan memanggil sekali lagi tindakan `updateIcon` chrome:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Panggil fungsi, laksanakan panggilan
|
||||
|
||||
Seterusnya, panggil fungsi yang baru anda buat dengan menambahkannya pada janji yang dikembalikan oleh C02Signal API:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
Dan akhirnya, di `/dist/background.js`, tambahkan pendengar untuk panggilan tindakan latar ini:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//dipinjam dari pelanjutan lollipop, ciri menarik
|
||||
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);
|
||||
}
|
||||
```
|
||||
Dalam kod ini, anda menambahkan pendengar untuk sebarang mesej yang datang ke pengurus tugas backend. Sekiranya disebut 'updateIcon', maka kod seterusnya dijalankan, untuk menggambar ikon warna yang tepat menggunakan Canvas API.
|
||||
|
||||
✅ Anda akan mengetahui lebih lanjut mengenai Canvas API dalam [pelajaran Space Game](../../space-game/drawing-to-canvas/README.md).
|
||||
|
||||
Sekarang, buat semula pelanjutan anda (`npm run build`), muat semula dan lancarkan peluasan anda, dan perhatikan perubahan warnanya. Adakah masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!
|
||||
|
||||
Tahniah, anda telah membina pelanjutan penyemak imbas yang berguna dan mengetahui lebih lanjut mengenai cara penyemak imbas berfungsi dan bagaimana profil prestasinya.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Selidiki beberapa laman web sumber terbuka telah lama wujud, dan, berdasarkan sejarah GitHub mereka, lihat apakah anda dapat menentukan bagaimana mereka dioptimumkan selama bertahun-tahun untuk prestasi, jika tidak. Apakah titik kesakitan yang paling biasa?
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
[Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Pertimbangkan untuk mendaftar ke [buletin prestasi](https://perf.email/)
|
||||
|
||||
Selidiki beberapa cara penyemak imbas mengukur prestasi web dengan melihat tab prestasi di alat web mereka. Adakah anda menemui perbezaan besar?
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Menganalisis laman web untuk prestasi](assignment.ms.md)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Menganalisis laman web untuk prestasi
|
||||
|
||||
Berikan laporan terperinci dari laman web, menunjukkan kawasan di mana prestasi bermasalah. Analisis mengapa laman web ini perlahan dan apa yang anda boleh lakukan untuk mempercepatnya. Jangan hanya bergantung pada alat penyemak imbas, tetapi lakukan kajian mengenai alat lain yang dapat membantu laporan anda
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Laporan disajikan dengan perincian yang diambil bukan hanya dari alat penyemak imbas tetapi dari alat pihak ketiga jika ada | Laporan asas dibentangkan | Laporan minimum dibentangkan |
|
||||
@@ -20,6 +20,6 @@
|
||||
"webpack-cli": "^3.3.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2"
|
||||
"axios": "^0.21.1"
|
||||
}
|
||||
}
|
||||
|
||||
27
5-browser-extension/solution/translation/README.ms.md
Normal file
27
5-browser-extension/solution/translation/README.ms.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# Sambungan Penyemak Imbas Carbon Trigger: Kod Lengkap
|
||||
|
||||
Menggunakan API Isyarat C02 tmrow untuk mengesan penggunaan elektrik, bina pelanjutan penyemak imbas sehingga anda dapat memperoleh peringatan di penyemak imbas anda tentang betapa berat penggunaan elektrik wilayah anda. Menggunakan pelanjutan ini secara khusus akan membantu anda membuat pertimbangan mengenai aktiviti anda berdasarkan maklumat ini.
|
||||
|
||||
|
||||
|
||||
## Bermula Dari Sini
|
||||
|
||||
Anda perlu memasang [npm] (https://npmjs.com). Muat turun salinan kod ini ke folder di komputer anda.
|
||||
|
||||
Pasang semua pakej yang diperlukan:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Bina pelanjutan dari webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari sana, pilih 'Load Unpacked' untuk memuat sambungan baru. Buka folder 'dist' pada permintaan dan pelanjutan akan dimuat. Untuk menggunakannya, anda memerlukan kunci API untuk API Isyarat CO2 ([dapatkan satu di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda di dalam kotak di halaman ini) dan [kod untuk wilayah anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Elektrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US- NEISO').
|
||||
|
||||
|
||||
|
||||
Setelah kunci API dan wilayah dimasukkan ke antara muka peluasan, titik berwarna di bar pelanjutan penyemak imbas akan berubah untuk mencerminkan penggunaan tenaga wilayah anda dan memberi anda petunjuk mengenai aktiviti berat yang sesuai untuk anda lakukan. Konsep di sebalik sistem 'dot' ini diberikan kepada saya oleh [pelanjutan penyemak imbas Lollipop Tenaga](https://energylollipop.com/) untuk pelepasan California.
|
||||
27
5-browser-extension/start/translations/README.ms.md
Normal file
27
5-browser-extension/start/translations/README.ms.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# Pelanjutan Penyemak Imbas Carbon Trigger: Starter Code
|
||||
|
||||
Menggunakan API Isyarat C02 tmrow untuk mengesan penggunaan elektrik, bina pelanjutan penyemak imbas sehingga anda dapat memperoleh peringatan di penyemak imbas anda tentang betapa berat penggunaan elektrik wilayah anda. Menggunakan pelanjutan ini secara khusus akan membantu anda membuat pertimbangan mengenai aktiviti anda berdasarkan maklumat ini.
|
||||
|
||||
|
||||
|
||||
## Bermula Dari Sini
|
||||
|
||||
Anda perlu memasang [npm](https://npmjs.com). Muat turun salinan kod ini ke folder di komputer anda.
|
||||
|
||||
Pasang semua pakej yang diperlukan:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Bina pelanjutan dari webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari sana, pilih 'Load Unpacked' untuk memuat sambungan baru. Buka folder 'dist' pada permintaan dan pelanjutan akan dimuat. Untuk menggunakannya, anda memerlukan kunci API untuk API Isyarat CO2 ([dapatkan satu di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda di dalam kotak di halaman ini) dan [kod untuk wilayah anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Elektrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US- NEISO').
|
||||
|
||||
|
||||
|
||||
Setelah kunci API dan wilayah dimasukkan ke antara muka peluasan, titik berwarna di bar pelanjutan penyemak imbas akan berubah untuk mencerminkan penggunaan tenaga wilayah anda dan memberi anda petunjuk mengenai aktiviti berat yang sesuai untuk anda lakukan. Konsep di sebalik sistem 'dot' ini diberikan kepada saya oleh [pelanjutan penyemak imbas Lollipop Tenaga](https://energylollipop.com/) untuk pelepasan California.
|
||||
@@ -8,13 +8,13 @@ Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築しま
|
||||
|
||||
### トピック
|
||||
|
||||
1. [ブラウザについて](1-about-browsers/translations/README.ja.md)
|
||||
2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md)
|
||||
3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md)
|
||||
1. [ブラウザのすべて](../1-about-browsers/translations/README.ja.md)
|
||||
2. [API の呼び出し、ローカルストレージの使用](../2-forms-browsers-local-storage/translations/README.ja.md)
|
||||
3. [バックグラウンドタスクとパフォーマンスについて学ぶ](../3-background-tasks-and-performance/translations/README.ja.md)
|
||||
|
||||
### クレジット
|
||||
|
||||
|
||||
|
||||
|
||||
## クレジット
|
||||
|
||||
|
||||
27
5-browser-extension/translations/README.ms.md
Normal file
27
5-browser-extension/translations/README.ms.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# Membina pelanjutan penyemak imbas
|
||||
|
||||
Membina pelanjutan penyemak imbas adalah cara yang menyeronokkan dan menarik untuk memikirkan prestasi aplikasi anda sambil membina pelbagai jenis aset web. Modul ini merangkumi pelajaran tentang cara penyemak imbas berfungsi dan cara menyebarkan pelanjutan penyemak imbas, cara membuat borang, memanggil API, dan menggunakan storan tempatan, dan bagaimana mengukur prestasi laman web anda dan memperbaikinya.
|
||||
|
||||
Anda akan membina pelanjutan penyemak imbas yang berfungsi di Edge, Chrome, dan Firefox. Sambungan ini, seperti laman web mini yang disesuaikan dengan tugas yang sangat spesifik, memeriksa [C02 Signal API](https://www.co2signal.com) untuk mengetahui penggunaan elektrik dan intensiti karbon wilayah tertentu, dan mengembalikan membaca mengenai jejak karbon di rantau ini.
|
||||
|
||||
Sambungan ini dapat disebut ad hoc oleh pengguna setelah kunci API dan kod wilayah dimasukkan ke dalam bentuk untuk menentukan penggunaan elektrik tempatan dan dengan itu menawarkan data yang dapat mempengaruhi keputusan elektrik pengguna. Sebagai contoh, lebih baik menangguhkan penggunaan pengering pakaian (aktiviti sengit karbon) dalam tempoh penggunaan elektrik yang tinggi di wilayah anda.
|
||||
|
||||
### Topik
|
||||
|
||||
1. [Mengenai penyemak imbas](1-about-browsers/README.md)
|
||||
2. [Borang dan simpanan tempatan](2-forms-browsers-local-storage/README.md)
|
||||
3. [Latar belakang tugas dan prestasi](3-background-tasks-and-performance/README.md)
|
||||
|
||||
### Kredit
|
||||
|
||||
|
||||
|
||||
## Kredit
|
||||
|
||||
Idea untuk pencetus karbon web ini ditawarkan oleh Asim Hussain, ketua pasukan Microsoft dari Green Cloud Advocacy dan pengarang [Prinsip Hijau](https://principles.green/). Pada mulanya ia adalah [projek laman web](https://github.com/jlooper/green).
|
||||
|
||||
Struktur pelanjutan penyemak imbas dipengaruhi oleh [peluasan COVID Adebola Adeniran](https://github.com/onedebos/covtension).
|
||||
|
||||
Konsep di sebalik sistem ikon 'dot' dicadangkan oleh struktur ikon pelanjutan penyemak imbas [Energy Lollipop](https://energylollipop.com/) untuk pelepasan California.
|
||||
|
||||
Pelajaran ini ditulis dengan ♥ ️ oleh [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
Reference in New Issue
Block a user