# Mradi wa Kiendelezi cha Kivinjari Sehemu ya 1: Yote Kuhusu Vivinjari  > Mchoro na [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Jaribio la Kabla ya Somo [Jaribio la kabla ya somo](https://ff-quizzes.netlify.app/web/quiz/23) ### Utangulizi Viendelezi vya kivinjari vinaongeza utendaji wa ziada kwenye kivinjari. Lakini kabla ya kujenga kimoja, unapaswa kujifunza kidogo kuhusu jinsi vivinjari vinavyofanya kazi. ### Kuhusu Kivinjari Katika mfululizo huu wa masomo, utajifunza jinsi ya kujenga kiendelezi cha kivinjari ambacho kitafanya kazi kwenye vivinjari vya Chrome, Firefox, na Edge. Katika sehemu hii, utagundua jinsi vivinjari vinavyofanya kazi na kuunda vipengele vya kiendelezi cha kivinjari. Lakini kivinjari ni nini hasa? Ni programu ya kompyuta inayomruhusu mtumiaji kufikia maudhui kutoka kwa seva na kuyaonyesha kwenye kurasa za wavuti. ✅ Historia fupi: kivinjari cha kwanza kiliitwa 'WorldWideWeb' na kiliundwa na Sir Timothy Berners-Lee mwaka 1990.  > Baadhi ya vivinjari vya awali, kupitia [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) Wakati mtumiaji anapounganisha kwenye mtandao kwa kutumia anwani ya URL (Uniform Resource Locator), kawaida kupitia Hypertext Transfer Protocol kwa anwani ya `http` au `https`, kivinjari huwasiliana na seva ya wavuti na kuchukua ukurasa wa wavuti. Kwa wakati huu, injini ya uonyeshaji ya kivinjari huonyesha ukurasa huo kwenye kifaa cha mtumiaji, ambacho kinaweza kuwa simu ya mkononi, kompyuta ya mezani, au kompyuta mpakato. Vivinjari pia vina uwezo wa kuhifadhi maudhui (cache) ili yasihitaji kuchukuliwa kutoka kwa seva kila wakati. Vinaweza kurekodi historia ya shughuli za kuvinjari za mtumiaji, kuhifadhi 'cookies', ambazo ni vipande vidogo vya data vinavyohifadhi taarifa za shughuli za mtumiaji, na zaidi. Jambo muhimu sana la kukumbuka kuhusu vivinjari ni kwamba havifanani! Kila kivinjari kina nguvu na udhaifu wake, na msanidi wa wavuti mtaalamu anahitaji kuelewa jinsi ya kufanya kurasa za wavuti zifanye kazi vizuri kwenye vivinjari tofauti. Hii ni pamoja na kushughulikia maonyesho madogo kama vile simu ya mkononi, pamoja na mtumiaji ambaye yuko nje ya mtandao. Tovuti muhimu sana ambayo unapaswa kuiweka alama kwenye kivinjari unachopendelea ni [caniuse.com](https://www.caniuse.com). Unapojenga kurasa za wavuti, ni msaada mkubwa kutumia orodha za teknolojia zinazoungwa mkono za caniuse ili kusaidia watumiaji wako vyema. ✅ Unawezaje kujua ni vivinjari gani vinavyotumika zaidi na watumiaji wa tovuti yako? Angalia takwimu zako - unaweza kusakinisha vifurushi mbalimbali vya takwimu kama sehemu ya mchakato wako wa maendeleo ya wavuti, na vitakuambia ni vivinjari gani vinavyotumika zaidi. ## Viendelezi vya Kivinjari Kwa nini ungependa kujenga kiendelezi cha kivinjari? Ni zana rahisi ya kuambatisha kwenye kivinjari chako unapohitaji kufikia haraka kazi unazofanya mara kwa mara. Kwa mfano, ikiwa unajikuta ukihitaji kuangalia rangi kwenye kurasa mbalimbali za wavuti unazotumia, unaweza kusakinisha kiendelezi cha kivinjari cha kuchagua rangi. Ikiwa unapata shida kukumbuka nywila, unaweza kutumia kiendelezi cha usimamizi wa nywila. Viendelezi vya kivinjari pia ni vya kufurahisha kuviendeleza. Kwa kawaida hushughulikia idadi ndogo ya kazi ambazo huzifanya vizuri. ✅ Ni viendelezi gani vya kivinjari unavyovipenda? Vinatenda kazi gani? ### Kusakinisha Viendelezi Kabla ya kuanza kujenga, angalia mchakato wa kujenga na kusambaza kiendelezi cha kivinjari. Ingawa kila kivinjari kinatofautiana kidogo katika jinsi kinavyosimamia kazi hii, mchakato ni sawa kwenye Chrome na Firefox kama mfano huu kwenye Edge:  > Kumbuka: Hakikisha kuwasha hali ya msanidi programu na kuruhusu viendelezi kutoka maduka mengine. Kwa ufupi, mchakato utakuwa: - jenga kiendelezi chako kwa kutumia `npm run build` - nenda kwenye kivinjari kwenye sehemu ya viendelezi kwa kutumia kitufe cha "Mipangilio na zaidi" (alama ya `...`) kwenye kona ya juu kulia - ikiwa ni usakinishaji mpya, chagua `load unpacked` kupakia kiendelezi kipya kutoka kwenye folda yake ya ujenzi (katika kesi yetu ni `/dist`) - au, bonyeza `reload` ikiwa unasasisha kiendelezi kilichosakinishwa tayari ✅ Maelekezo haya yanahusu viendelezi unavyojijengea; ili kusakinisha viendelezi vilivyotolewa kwenye duka la viendelezi vya kivinjari linalohusiana na kila kivinjari, unapaswa kwenda kwenye [maduka hayo](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) na kusakinisha kiendelezi unachokipenda. ### Anza Utajenga kiendelezi cha kivinjari kinachoonyesha alama ya kaboni ya eneo lako, ikionyesha matumizi ya nishati ya eneo lako na chanzo cha nishati hiyo. Kiendelezi kitakuwa na fomu inayokusanya API key ili uweze kufikia API ya CO2 Signal. **Unahitaji:** - [API key](https://www.co2signal.com/); ingiza barua pepe yako kwenye kisanduku kwenye ukurasa huu na utatumiwa moja - [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, ninatumia 'US-NEISO'). - [msimbo wa kuanzia](../../../../5-browser-extension/start). Pakua folda ya `start`; utakuwa unakamilisha msimbo kwenye folda hii. - [NPM](https://www.npmjs.com) - NPM ni zana ya usimamizi wa vifurushi; isakinishe ndani ya nchi na vifurushi vilivyoorodheshwa kwenye faili yako ya `package.json` vitasakinishwa kwa matumizi na mali zako za wavuti ✅ Jifunze zaidi kuhusu usimamizi wa vifurushi katika [moduli hii bora ya kujifunza](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) Chukua dakika moja kupitia msingi wa msimbo: dist -|manifest.json (chaguo-msingi zimewekwa hapa) -|index.html (alama za mbele za HTML ziko hapa) -|background.js (JS ya nyuma iko hapa) -|main.js (JS iliyojengwa) src -|index.js (msimbo wako wa JS unaenda hapa) ✅ Mara tu unapokuwa na API key yako na msimbo wa eneo tayari, hifadhi mahali fulani kwenye kumbukumbu kwa matumizi ya baadaye. ### Jenga HTML kwa Kiendelezi Kiendelezi hiki kina maonyesho mawili. Moja la kukusanya API key na msimbo wa eneo:  Na la pili kuonyesha matumizi ya kaboni ya eneo:  Tuanzie kwa kujenga HTML ya fomu na kuipamba kwa CSS. Kwenye folda ya `/dist`, utajenga fomu na eneo la matokeo. Katika faili ya `index.html`, jaza eneo la fomu lililowekwa alama: ```HTML
``` Hii ni fomu ambapo taarifa zako zilizohifadhiwa zitaingizwa na kuhifadhiwa kwenye hifadhi ya ndani. Kisha, tengeneza eneo la matokeo; chini ya tagi ya mwisho ya fomu, ongeza divs kadhaa: ```HTMLRegion:
Carbon Usage:
Fossil Fuel Percentage: