Lee Stott
2daab5271b
|
3 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 3 weeks ago | |
| assignment.md | 3 weeks ago | |
README.md
Naršyklės plėtinio projektas 1 dalis: Viskas apie naršykles
Eskizas sukurtas Wassim Chegham
Klausimai prieš paskaitą
Įvadas
Naršyklės plėtiniai prideda papildomų funkcijų naršyklei. Tačiau prieš kuriant plėtinį, verta šiek tiek sužinoti, kaip naršyklės atlieka savo darbą.
Apie naršyklę
Šioje pamokų serijoje išmoksite kurti naršyklės plėtinį, kuris veiks „Chrome“, „Firefox“ ir „Edge“ naršyklėse. Šioje dalyje sužinosite, kaip veikia naršyklės, ir sukursite naršyklės plėtinio struktūrą.
Bet kas iš tikrųjų yra naršyklė? Tai programinė įranga, leidžianti galutiniam vartotojui pasiekti turinį iš serverio ir rodyti jį tinklalapiuose.
✅ Šiek tiek istorijos: pirmoji naršyklė vadinosi „WorldWideWeb“ ir ją 1990 m. sukūrė seras Timotis Berners-Lee.
Kai kurios ankstyvosios naršyklės, šaltinis Karen McGrane
Kai vartotojas prisijungia prie interneto naudodamas URL (Uniform Resource Locator) adresą, paprastai per Hypertext Transfer Protocol su http arba https adresu, naršyklė bendrauja su žiniatinklio serveriu ir gauna tinklalapį.
Šiuo metu naršyklės atvaizdavimo variklis rodo jį vartotojo įrenginyje, kuris gali būti mobilusis telefonas, stacionarus kompiuteris ar nešiojamasis kompiuteris.
Naršyklės taip pat gali talpinti turinį, kad jo nereikėtų kiekvieną kartą gauti iš serverio. Jos gali įrašyti vartotojo naršymo istoriją, saugoti „sausainėlius“ (mažus duomenų fragmentus, kuriuose yra informacija apie vartotojo veiklą) ir dar daugiau.
Labai svarbu prisiminti, kad naršyklės nėra vienodos! Kiekviena naršyklė turi savo privalumų ir trūkumų, o profesionalus žiniatinklio kūrėjas turi suprasti, kaip užtikrinti, kad tinklalapiai gerai veiktų įvairiose naršyklėse. Tai apima mažų ekranų, tokių kaip mobiliojo telefono, palaikymą, taip pat vartotojų, kurie yra neprisijungę, poreikius.
Labai naudinga svetainė, kurią tikriausiai turėtumėte įtraukti į savo mėgstamos naršyklės žymes, yra caniuse.com. Kurdami tinklalapius, galite naudotis „caniuse“ palaikomų technologijų sąrašais, kad geriausiai palaikytumėte savo vartotojus.
✅ Kaip galite sužinoti, kurios naršyklės yra populiariausios tarp jūsų svetainės vartotojų? Patikrinkite savo analizės duomenis – galite įdiegti įvairias analizės programas kaip savo žiniatinklio kūrimo proceso dalį, ir jos parodys, kurios naršyklės yra dažniausiai naudojamos.
Naršyklės plėtiniai
Kodėl verta kurti naršyklės plėtinį? Tai patogus įrankis, kurį galima pridėti prie naršyklės, kai reikia greitai atlikti pasikartojančias užduotis. Pavyzdžiui, jei dažnai reikia tikrinti spalvas įvairiuose tinklalapiuose, galite įdiegti spalvų parinkiklio plėtinį. Jei sunku prisiminti slaptažodžius, galite naudoti slaptažodžių valdymo plėtinį.
Naršyklės plėtinius taip pat smagu kurti. Jie paprastai atlieka ribotą skaičių užduočių, kurias atlieka labai gerai.
✅ Kokie yra jūsų mėgstamiausi naršyklės plėtiniai? Kokias užduotis jie atlieka?
Plėtinių diegimas
Prieš pradėdami kurti, pažvelkite į naršyklės plėtinio kūrimo ir diegimo procesą. Nors kiekviena naršyklė šiek tiek skiriasi, procesas „Chrome“ ir „Firefox“ yra panašus į šį pavyzdį „Edge“ naršyklėje:
Pastaba: Įsitikinkite, kad įjungėte kūrėjo režimą ir leidote plėtinius iš kitų parduotuvių.
Iš esmės procesas bus toks:
- sukurkite savo plėtinį naudodami
npm run build - naršyklėje eikite į plėtinių skydelį naudodami mygtuką „Nustatymai ir daugiau“ (piktograma
...) viršutiniame dešiniajame kampe - jei tai naujas diegimas, pasirinkite
load unpacked, kad įkeltumėte naują plėtinį iš jo kūrimo aplanko (mūsų atveju tai yra/dist) - arba spustelėkite
reload, jei atnaujinate jau įdiegtą plėtinį
✅ Šios instrukcijos taikomos jūsų pačių sukurtiems plėtiniams; norėdami įdiegti plėtinius, kurie jau yra išleisti naršyklės plėtinių parduotuvėje, turėtumėte apsilankyti šiose parduotuvėse ir įdiegti norimą plėtinį.
Pradėkite
Jūs sukursite naršyklės plėtinį, kuris rodys jūsų regiono anglies pėdsaką, pateikdamas jūsų regiono energijos suvartojimą ir energijos šaltinį. Plėtinys turės formą, kuri surinks API raktą, kad galėtumėte pasiekti CO2 Signal API.
Jums reikės:
- API rakto; įveskite savo el. pašto adresą šiame puslapyje ir jums bus atsiųstas raktas
- kodo jūsų regionui, atitinkančio Electricity Map (pavyzdžiui, Bostone naudoju „US-NEISO“)
- pradinio kodo. Atsisiųskite aplanką
start; užbaigsite kodą šiame aplanke - NPM – NPM yra paketų valdymo įrankis; įdiekite jį lokaliai, ir paketai, išvardyti jūsų
package.jsonfaile, bus įdiegti naudojimui jūsų žiniatinklio projekte
✅ Sužinokite daugiau apie paketų valdymą šiame puikiame mokymosi modulyje
Skirkite minutę peržiūrėti kodo bazę:
dist
-|manifest.json (numatytosios reikšmės nustatomos čia)
-|index.html (HTML žymėjimas čia)
-|background.js (JS foninis kodas čia)
-|main.js (sukurtas JS)
src
-|index.js (jūsų JS kodas čia)
✅ Kai turėsite savo API raktą ir regiono kodą, išsaugokite juos kur nors užrašuose, kad galėtumėte naudoti ateityje.
Sukurkite HTML plėtiniui
Šis plėtinys turi dvi peržiūras. Viena skirta API rakto ir regiono kodo surinkimui:
Ir kita – regiono anglies suvartojimo rodymui:
Pradėkime nuo formos HTML kūrimo ir jos stiliaus pritaikymo naudojant CSS.
Aplanke /dist sukursite formą ir rezultatų sritį. Faile index.html užpildykite nurodytą formos sritį:
<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>
Tai yra forma, kurioje jūsų išsaugota informacija bus įvesta ir išsaugota vietinėje saugykloje.
Toliau sukurkite rezultatų sritį; po paskutinės formos žymos pridėkite keletą div elementų:
<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>
Šiuo metu galite pabandyti sukurti projektą. Įsitikinkite, kad įdiegėte šio plėtinio paketų priklausomybes:
npm install
Ši komanda naudos npm, „Node Package Manager“, kad įdiegtų „webpack“ jūsų plėtinio kūrimo procesui. Šio proceso išvestį galite pamatyti aplanke /dist/main.js – pamatysite, kad kodas buvo sujungtas.
Kol kas plėtinys turėtų būti sukurtas, ir jei jį įdiegsite „Edge“ kaip plėtinį, pamatysite tvarkingai rodomą formą.
Sveikiname, jūs žengėte pirmuosius žingsnius kuriant naršyklės plėtinį. Kitose pamokose padarysite jį funkcionalesnį ir naudingesnį.
🚀 Iššūkis
Apsilankykite naršyklės plėtinių parduotuvėje ir įdiekite vieną plėtinį į savo naršyklę. Galite įdomiais būdais išnagrinėti jo failus. Ką atrandate?
Klausimai po paskaitos
Apžvalga ir savarankiškas mokymasis
Šioje pamokoje sužinojote šiek tiek apie žiniatinklio naršyklės istoriją; pasinaudokite šia galimybe sužinoti, kaip Pasaulinio tinklo išradėjai įsivaizdavo jo naudojimą, skaitydami daugiau apie jo istoriją. Naudingos svetainės:
Žiniatinklio naršyklių istorija
Užduotis
Atsakomybės apribojimas:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.