11 KiB

Raw Blame History

Projek Sambungan Pelayar Bahagian 1: Semua Tentang Pelayar

Sketchnote oleh Wassim Chegham

Kuiz Pra-Kuliah

Pengenalan

Sambungan pelayar menambah fungsi tambahan kepada pelayar. Tetapi sebelum anda membina satu, anda perlu belajar sedikit tentang bagaimana pelayar berfungsi.

Tentang pelayar

Dalam siri pelajaran ini, anda akan belajar cara membina sambungan pelayar yang boleh digunakan pada pelayar Chrome, Firefox, dan Edge. Dalam bahagian ini, anda akan mengetahui bagaimana pelayar berfungsi dan menyusun elemen sambungan pelayar.

Tetapi apa sebenarnya pelayar? Ia adalah aplikasi perisian yang membolehkan pengguna akhir mengakses kandungan dari pelayan dan memaparkannya pada halaman web.

✅ Sedikit sejarah: pelayar pertama dipanggil 'WorldWideWeb' dan dicipta oleh Sir Timothy Berners-Lee pada tahun 1990.

Beberapa pelayar awal, melalui Karen McGrane

Apabila pengguna menyambung ke internet menggunakan alamat URL (Uniform Resource Locator), biasanya menggunakan Protokol Pemindahan Hiperteks melalui alamat http atau https, pelayar berkomunikasi dengan pelayan web dan mengambil halaman web.

Pada ketika ini, enjin rendering pelayar memaparkannya pada peranti pengguna, yang mungkin telefon bimbit, desktop, atau komputer riba.

Pelayar juga mempunyai keupayaan untuk menyimpan kandungan supaya ia tidak perlu diambil dari pelayan setiap kali. Ia boleh merekod sejarah aktiviti pelayaran pengguna, menyimpan 'cookies', iaitu data kecil yang mengandungi maklumat untuk menyimpan aktiviti pengguna, dan banyak lagi.

Perkara yang sangat penting untuk diingat tentang pelayar ialah ia tidak semuanya sama! Setiap pelayar mempunyai kekuatan dan kelemahan masing-masing, dan seorang pembangun web profesional perlu memahami cara membuat halaman web berfungsi dengan baik merentas pelayar. Ini termasuk menangani paparan kecil seperti telefon bimbit, serta pengguna yang berada di luar talian.

Satu laman web yang sangat berguna yang anda mungkin patut tandakan dalam pelayar pilihan anda ialah caniuse.com. Apabila anda membina halaman web, sangat membantu untuk menggunakan senarai teknologi yang disokong oleh caniuse supaya anda dapat menyokong pengguna anda dengan sebaik mungkin.

✅ Bagaimana anda boleh mengetahui pelayar mana yang paling popular di kalangan pengguna laman web anda? Periksa analitik anda - anda boleh memasang pelbagai pakej analitik sebagai sebahagian daripada proses pembangunan web anda, dan ia akan memberitahu anda pelayar mana yang paling banyak digunakan oleh pelayar popular.

Sambungan pelayar

Mengapa anda ingin membina sambungan pelayar? Ia adalah alat yang berguna untuk dilampirkan pada pelayar anda apabila anda memerlukan akses cepat kepada tugas yang sering anda ulangi. Sebagai contoh, jika anda sering perlu memeriksa warna pada pelbagai halaman web yang anda lawati, anda mungkin memasang sambungan pelayar pemilih warna. Jika anda sukar mengingati kata laluan, anda mungkin menggunakan sambungan pengurusan kata laluan.

Sambungan pelayar juga menyeronokkan untuk dibangunkan. Ia cenderung menguruskan sejumlah kecil tugas yang dilakukan dengan baik.

✅ Apakah sambungan pelayar kegemaran anda? Apakah tugas yang mereka lakukan?

Memasang sambungan

Sebelum anda mula membina, lihat proses membina dan menyebarkan sambungan pelayar. Walaupun setiap pelayar sedikit berbeza dalam cara mereka menguruskan tugas ini, prosesnya serupa pada Chrome dan Firefox seperti contoh pada Edge:

Nota: Pastikan untuk menghidupkan mod pembangun dan benarkan sambungan dari kedai lain.

Secara asasnya, prosesnya adalah:

bina sambungan anda menggunakan npm run build
navigasi dalam pelayar ke panel sambungan menggunakan butang "Tetapan dan banyak lagi" (ikon ...) di bahagian atas kanan
jika ia adalah pemasangan baru, pilih load unpacked untuk memuat naik sambungan baru dari folder binaannya (dalam kes kita ia adalah /dist)
atau, klik reload jika anda memuat semula sambungan yang telah dipasang

✅ Arahan ini berkaitan dengan sambungan yang anda bina sendiri; untuk memasang sambungan yang telah dikeluarkan ke kedai sambungan pelayar yang berkaitan dengan setiap pelayar, anda harus navigasi ke kedai tersebut dan pasang sambungan pilihan anda.

Mula

Anda akan membina sambungan pelayar yang memaparkan jejak karbon kawasan anda, menunjukkan penggunaan tenaga kawasan anda dan sumber tenaga tersebut. Sambungan ini akan mempunyai borang yang mengumpul kunci API supaya anda boleh mengakses API CO2 Signal.

Anda perlukan:

kunci API; masukkan e-mel anda dalam kotak di halaman ini dan satu akan dihantar kepada anda
kod untuk kawasan anda yang sepadan dengan Peta Elektrik (contohnya di Boston, saya menggunakan 'US-NEISO').
kod permulaan. Muat turun folder start; anda akan melengkapkan kod dalam folder ini.
NPM - NPM adalah alat pengurusan pakej; pasang secara tempatan dan pakej yang disenaraikan dalam fail package.json anda akan dipasang untuk digunakan oleh aset web anda

✅ Ketahui lebih lanjut tentang pengurusan pakej dalam modul pembelajaran yang hebat ini

Luangkan masa untuk melihat kod asas:

✅ Setelah anda mempunyai kunci API dan kod kawasan anda, simpan di suatu tempat dalam nota untuk kegunaan masa depan.

Bina HTML untuk sambungan

Sambungan ini mempunyai dua paparan. Satu untuk mengumpul kunci API dan kod kawasan:

Dan yang kedua untuk memaparkan penggunaan karbon kawasan:

Mari kita 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 ditentukan:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

Ini adalah borang di mana maklumat yang disimpan akan dimasukkan dan disimpan ke storan tempatan.

Seterusnya, buat kawasan hasil; di bawah tag borang terakhir, tambahkan beberapa div:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

Pada ketika ini, anda boleh mencuba binaan. Pastikan untuk memasang kebergantungan pakej sambungan ini:

npm install

Perintah ini akan menggunakan npm, Pengurus Pakej Node, untuk memasang webpack untuk proses binaan sambungan anda. Webpack adalah pembundel yang mengendalikan penyusunan kod. Anda boleh melihat output proses ini dengan melihat dalam /dist/main.js - anda akan melihat kod telah dibundel.

Buat masa ini, sambungan harus dibina dan, jika anda menyebarkannya ke Edge sebagai sambungan, anda akan melihat borang dipaparkan dengan kemas.

Tahniah, anda telah mengambil langkah pertama ke arah membina sambungan pelayar. Dalam pelajaran seterusnya, anda akan menjadikannya lebih berfungsi dan berguna.

🚀 Cabaran

Lihat kedai sambungan pelayar dan pasang satu ke pelayar anda. Anda boleh memeriksa failnya dengan cara yang menarik. Apa yang anda temui?

Kuiz Pasca-Kuliah

Kuiz pasca-kuliah

Ulasan & Kajian Kendiri

Dalam pelajaran ini, anda belajar sedikit tentang sejarah pelayar web; ambil peluang ini untuk belajar tentang bagaimana pencipta World Wide Web membayangkan penggunaannya dengan membaca lebih lanjut tentang sejarahnya. Beberapa laman web yang berguna termasuk:

Sejarah Pelayar Web

Sejarah Web

Temu bual dengan Tim Berners-Lee

Tugasan

Gayakan semula sambungan anda

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk memastikan ketepatan, sila ambil maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.

11 KiB Raw Blame History