19 KiB

Raw Blame History

Projek Sambungan Pelayar Bahagian 1: Semua Tentang Pelayar

Sketchnote oleh Wassim Chegham

Kuiz Pra-Kuliah

Pengenalan

Sambungan pelayar adalah aplikasi mini yang meningkatkan pengalaman melayari web anda. Seperti visi asal Tim Berners-Lee tentang web interaktif, sambungan memperluaskan keupayaan pelayar melebihi paparan dokumen biasa. Daripada pengurus kata laluan yang menjaga keselamatan akaun anda hingga pemilih warna yang membantu pereka mendapatkan warna yang sempurna, sambungan menyelesaikan cabaran melayari harian.

Sebelum kita membina sambungan pertama anda, mari kita fahami bagaimana pelayar berfungsi. Sama seperti Alexander Graham Bell perlu memahami penghantaran bunyi sebelum mencipta telefon, mengetahui asas pelayar akan membantu anda mencipta sambungan yang berintegrasi dengan lancar dengan sistem pelayar sedia ada.

Pada akhir pelajaran ini, anda akan memahami seni bina pelayar dan mula membina sambungan pertama anda.

Memahami Pelayar Web

Pelayar web pada dasarnya adalah penafsir dokumen yang canggih. Apabila anda menaip "google.com" ke dalam bar alamat, pelayar melakukan siri operasi kompleks - meminta kandungan dari pelayan di seluruh dunia, kemudian menganalisis dan memaparkan kod tersebut menjadi halaman web interaktif yang anda lihat.

Proses ini mencerminkan bagaimana pelayar web pertama, WorldWideWeb, direka oleh Tim Berners-Lee pada tahun 1990 untuk menjadikan dokumen berhiperpautan dapat diakses oleh semua orang.

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

Beberapa pelayar awal, melalui Karen McGrane

Bagaimana Pelayar Memproses Kandungan Web

Proses antara memasukkan URL dan melihat halaman web melibatkan beberapa langkah yang diselaraskan yang berlaku dalam beberapa saat:

sequenceDiagram
    participant User
    participant Browser
    participant DNS
    participant Server
    
    User->>Browser: Types URL and presses Enter
    Browser->>DNS: Looks up server IP address
    DNS->>Browser: Returns IP address
    Browser->>Server: Requests web page content
    Server->>Browser: Sends HTML, CSS, and JavaScript
    Browser->>User: Renders complete web page

Apa yang dicapai oleh proses ini:

Menterjemah URL yang boleh dibaca manusia kepada alamat IP pelayan melalui pencarian DNS
Mewujudkan sambungan selamat dengan pelayan web menggunakan protokol HTTP atau HTTPS
Meminta kandungan halaman web tertentu dari pelayan
Menerima markup HTML, gaya CSS, dan kod JavaScript dari pelayan
Memaparkan semua kandungan menjadi halaman web interaktif yang anda lihat

Ciri Teras Pelayar

Pelayar moden menyediakan pelbagai ciri yang boleh dimanfaatkan oleh pembangun sambungan:

Ciri	Tujuan	Peluang Sambungan
Enjin Pemaparan	Memaparkan HTML, CSS, dan JavaScript	Pengubahsuaian kandungan, suntikan gaya
Enjin JavaScript	Melaksanakan kod JavaScript	Skrip tersuai, interaksi API
Storan Tempatan	Menyimpan data secara tempatan	Pilihan pengguna, data cache
Tumpukan Rangkaian	Mengendalikan permintaan web	Pemantauan permintaan, analisis data
Model Keselamatan	Melindungi pengguna daripada kandungan berbahaya	Penapisan kandungan, peningkatan keselamatan

Memahami ciri-ciri ini membantu anda:

Mengenal pasti di mana sambungan anda boleh menambah nilai paling banyak
Memilih API pelayar yang sesuai untuk fungsi sambungan anda
Merancang sambungan yang berfungsi dengan cekap dengan sistem pelayar
Memastikan sambungan anda mengikuti amalan terbaik keselamatan pelayar

Pertimbangan Pembangunan Merentas Pelayar

Pelayar yang berbeza melaksanakan piawaian dengan sedikit variasi, sama seperti bagaimana bahasa pengaturcaraan yang berbeza mungkin mengendalikan algoritma yang sama secara berbeza. Chrome, Firefox, dan Safari masing-masing mempunyai ciri unik yang perlu dipertimbangkan oleh pembangun semasa pembangunan sambungan.

💡 Petua Pro: Gunakan caniuse.com untuk memeriksa teknologi web mana yang disokong di pelbagai pelayar. Ini sangat berguna semasa merancang ciri sambungan anda!

Pertimbangan utama untuk pembangunan sambungan:

Uji sambungan anda di pelayar Chrome, Firefox, dan Edge
Sesuaikan dengan API sambungan pelayar dan format manifest yang berbeza
Tangani ciri prestasi dan had yang berbeza
Sediakan alternatif untuk ciri khusus pelayar yang mungkin tidak tersedia

✅ Wawasan Analitik: Anda boleh menentukan pelayar mana yang lebih disukai oleh pengguna anda dengan memasang pakej analitik dalam projek pembangunan web anda. Data ini membantu anda memprioritaskan pelayar mana yang perlu disokong terlebih dahulu.

Memahami Sambungan Pelayar

Sambungan pelayar menyelesaikan cabaran melayari web biasa dengan menambah fungsi secara langsung ke antara muka pelayar. Daripada memerlukan aplikasi berasingan atau aliran kerja yang kompleks, sambungan menyediakan akses segera kepada alat dan ciri.

Konsep ini mencerminkan bagaimana perintis komputer awal seperti Douglas Engelbart membayangkan mempertingkatkan keupayaan manusia dengan teknologi - sambungan mempertingkatkan fungsi asas pelayar anda.

Kategori sambungan popular dan manfaatnya:

Alat Produktiviti: Pengurus tugas, aplikasi mencatat nota, dan penjejak masa yang membantu anda kekal teratur
Peningkatan Keselamatan: Pengurus kata laluan, penyekat iklan, dan alat privasi yang melindungi data anda
Alat Pembangun: Pemformat kod, pemilih warna, dan utiliti penyahpepijat yang memudahkan pembangunan
Peningkatan Kandungan: Mod membaca, pemuat turun video, dan alat tangkapan skrin yang meningkatkan pengalaman web anda

✅ Soalan Refleksi: Apakah sambungan pelayar kegemaran anda? Apakah tugas khusus yang mereka lakukan, dan bagaimana mereka meningkatkan pengalaman melayari anda?

Memasang dan Mengurus Sambungan

Memahami proses pemasangan sambungan membantu anda menjangkakan pengalaman pengguna apabila orang memasang sambungan anda. Proses pemasangan adalah standard di pelayar moden, dengan sedikit variasi dalam reka bentuk antara muka.

Penting: Pastikan untuk mengaktifkan mod pembangun dan benarkan sambungan dari kedai lain semasa menguji sambungan anda sendiri.

Proses Pemasangan Sambungan Pembangunan

Apabila anda sedang membangun dan menguji sambungan anda sendiri, ikuti aliran kerja ini:

# Step 1: Build your extension
npm run build

Apa yang dicapai oleh arahan ini:

Menyusun kod sumber anda menjadi fail yang sedia untuk pelayar
Menggabungkan modul JavaScript ke dalam pakej yang dioptimumkan
Menjana fail sambungan akhir dalam folder /dist
Menyediakan sambungan anda untuk pemasangan dan ujian

Langkah 2: Navigasi ke Sambungan Pelayar

Buka halaman pengurusan sambungan pelayar anda
Klik butang "Tetapan dan lebih lagi" (ikon ...) di bahagian atas kanan
Pilih "Sambungan" dari menu dropdown

Langkah 3: Muatkan Sambungan Anda

Untuk pemasangan baru: Pilih load unpacked dan pilih folder /dist anda
Untuk kemas kini: Klik reload di sebelah sambungan yang telah dipasang
Untuk ujian: Aktifkan "Mod Pembangun" untuk mengakses ciri penyahpepijat tambahan

Pemasangan Sambungan Produksi

✅ Nota: Arahan pembangunan ini khusus untuk sambungan yang anda bina sendiri. Untuk memasang sambungan yang diterbitkan, lawati kedai sambungan pelayar rasmi seperti Microsoft Edge Add-ons store.

Memahami perbezaannya:

Pemasangan pembangunan membolehkan anda menguji sambungan yang belum diterbitkan semasa pembangunan
Pemasangan dari kedai menyediakan sambungan yang telah disemak, diterbitkan dengan kemas kini automatik
Sideloading membolehkan pemasangan sambungan dari luar kedai rasmi (memerlukan mod pembangun)

Membina Sambungan Jejak Karbon Anda

Kami akan mencipta sambungan pelayar yang memaparkan jejak karbon penggunaan tenaga di kawasan anda. Projek ini menunjukkan konsep pembangunan sambungan penting sambil mencipta alat praktikal untuk kesedaran alam sekitar.

Pendekatan ini mengikuti prinsip "belajar dengan melakukan" yang terbukti berkesan sejak teori pendidikan John Dewey - menggabungkan kemahiran teknikal dengan aplikasi dunia nyata yang bermakna.

Keperluan Projek

Sebelum memulakan pembangunan, mari kumpulkan sumber dan keperluan yang diperlukan:

Akses API Diperlukan:

Kunci API CO2 Signal: Masukkan alamat e-mel anda untuk menerima kunci API percuma anda
Kod kawasan: Cari kod kawasan anda menggunakan Peta Elektrik (contohnya, Boston menggunakan 'US-NEISO')

Alat Pembangunan:

Node.js dan NPM: Alat pengurusan pakej untuk memasang keperluan projek
Kod permulaan: Muat turun folder start untuk memulakan pembangunan

✅ Ketahui Lebih Lanjut: Tingkatkan kemahiran pengurusan pakej anda dengan modul pembelajaran komprehensif ini

Memahami Struktur Projek

Memahami struktur projek membantu mengatur kerja pembangunan dengan cekap. Seperti bagaimana Perpustakaan Alexandria diatur untuk pengambilan pengetahuan yang mudah, pangkalan kod yang terstruktur dengan baik menjadikan pembangunan lebih efisien:

project-root/
├── dist/                    # Built extension files
│   ├── manifest.json        # Extension configuration
│   ├── index.html           # User interface markup
│   ├── background.js        # Background script functionality
│   └── main.js              # Compiled JavaScript bundle
└── src/                     # Source development files
    └── index.js             # Your main JavaScript code

Memecahkan apa yang dicapai oleh setiap fail:

manifest.json: Menentukan metadata sambungan, kebenaran, dan titik masuk
index.html: Mencipta antara muka pengguna yang muncul apabila pengguna mengklik sambungan anda
background.js: Mengendalikan tugas latar belakang dan pendengar acara pelayar
main.js: Mengandungi kod JavaScript akhir yang digabungkan selepas proses binaan
src/index.js: Menyimpan kod pembangunan utama anda yang akan disusun menjadi main.js

💡 Petua Organisasi: Simpan kunci API dan kod kawasan anda dalam nota yang selamat untuk rujukan mudah semasa pembangunan. Anda akan memerlukan nilai-nilai ini untuk menguji fungsi sambungan anda.

✅ Nota Keselamatan: Jangan sekali-kali memasukkan kunci API atau kelayakan sensitif ke dalam repositori kod anda. Kami akan menunjukkan cara mengendalikannya dengan selamat dalam langkah seterusnya.

Mencipta Antara Muka Sambungan

Sekarang kita akan membina komponen antara muka pengguna. Sambungan ini menggunakan pendekatan dua skrin: skrin konfigurasi untuk persediaan awal dan skrin hasil untuk paparan data.

Ini mengikuti prinsip pendedahan progresif yang digunakan dalam reka bentuk antara muka sejak zaman awal pengkomputeran - mendedahkan maklumat dan pilihan dalam urutan logik untuk mengelakkan pengguna berasa terbeban.

Gambaran Keseluruhan Paparan Sambungan

Paparan Persediaan - Konfigurasi pengguna kali pertama:

Paparan Hasil - Paparan data jejak karbon:

Membina Borang Konfigurasi

Borang persediaan mengumpulkan data konfigurasi pengguna semasa penggunaan awal. Setelah dikonfigurasi, maklumat ini akan disimpan dalam storan pelayar untuk sesi masa depan.

Dalam fail /dist/index.html, tambahkan struktur borang ini:

<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>

Apa yang dicapai oleh borang ini:

Mencipta struktur borang semantik dengan label yang sesuai dan persatuan input
Mengaktifkan fungsi autolengkap pelayar untuk pengalaman pengguna yang lebih baik
Memerlukan kedua-dua medan diisi sebelum penyerahan menggunakan atribut required
Mengatur input dengan nama kelas deskriptif untuk memudahkan penggayaan dan penargetan JavaScript
Menyediakan arahan yang jelas untuk pengguna yang sedang menyediakan sambungan buat kali pertama

Membina Paparan Hasil

Seterusnya, cipta kawasan hasil yang akan memaparkan data jejak karbon. Tambahkan HTML ini di bawah borang:

<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>

Memecahkan apa yang disediakan oleh struktur ini:

loading: Memaparkan mesej pemuatan semasa data API sedang diambil
errors: Menunjukkan mesej ralat jika panggilan API gagal atau data tidak sah
data: Menyimpan data mentah untuk tujuan penyahpepijat semasa pembangunan
result-container: Memaparkan maklumat jejak karbon yang diformat kepada pengguna
clear-btn: Membolehkan pengguna menukar kawasan mereka dan mengkonfigurasi semula sambungan

Menyediakan Proses Binaan

Sekarang mari kita pasang keperluan projek dan uji proses binaan:

npm install

Apa yang dicapai oleh proses pemasangan ini:

Memuat turun Webpack dan keperluan pembangunan lain yang dinyatakan dalam package.json
Mengkonfigurasi rantaian alat binaan untuk menyusun JavaScript moden
Menyediakan persekitaran pembangunan untuk membina dan menguji sambungan
Mengaktifkan ciri penggabungan kod, pengoptimuman, dan keserasian merentas pelayar

💡 Wawasan Proses Binaan: Webpack menggabungkan kod sumber anda dari /src/index.js ke dalam /dist/main.js. Proses ini mengoptimumkan kod anda untuk produksi dan memastikan keserasian pelayar.

Menguji Kemajuan Anda

Pada tahap ini, anda boleh menguji sambungan anda:

Jalankan arahan binaan untuk menyusun kod anda
Muatkan sambungan ke dalam pelayar anda menggunakan mod pembangun
Sahkan bahawa borang dipaparkan dengan betul dan kelihatan profesional
Periksa bahawa semua elemen borang sejajar dengan betul dan berfungsi

Apa yang telah anda capai:

Membina struktur HTML asas untuk sambungan anda
Mencipta antara muka konfigurasi dan hasil dengan markup semantik yang betul
Menyiapkan aliran kerja pembangunan moden menggunakan alat standard industri
Menyediakan asas untuk menambah fungsi interaktif JavaScript

Anda telah menyelesaikan fasa pertama pembangunan sambungan pelayar. Seperti bagaimana Wright bersaudara perlu memahami aerodinamik sebelum mencapai penerbangan, memahami konsep asas ini mempersiapkan anda untuk membina ciri interaktif yang lebih kompleks dalam pelajaran seterusnya.

Cabaran Ejen GitHub Copilot 🚀

Gunakan mod Ejen untuk menyelesaikan cabaran berikut: Deskripsi: Tingkatkan sambungan pelayar dengan menambah ciri pengesahan borang dan maklum balas pengguna untuk memperbaiki pengalaman pengguna semasa memasukkan kunci API dan kod wilayah.

Arahan: Buat fungsi pengesahan JavaScript yang memeriksa sama ada medan kunci API mengandungi sekurang-kurangnya 20 aksara dan sama ada kod wilayah mengikuti format yang betul (seperti 'US-NEISO'). Tambahkan maklum balas visual dengan menukar warna sempadan input kepada hijau untuk input yang sah dan merah untuk input yang tidak sah. Juga tambahkan ciri togol untuk menunjukkan/sembunyikan kunci API demi keselamatan.

Ketahui lebih lanjut tentang mod ejen di sini.

🚀 Cabaran

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

Kuiz Selepas Kuliah

Kuiz selepas kuliah

Ulasan & Kajian Kendiri

Dalam pelajaran ini, anda telah belajar sedikit tentang sejarah pelayar web; ambil peluang ini untuk mengetahui 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

Ubah suai sambungan anda

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

19 KiB Raw Blame History