Jen Looper
4 years ago
parent
80d643cedb
commit
cff6a681cd
@ -0,0 +1,168 @@
|
||||
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 1: ब्राउज़रों के बारे में सभी
|
||||
|
||||
|
||||
> स्केचनोट [वसीम चैघाम](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) द्वारा
|
||||
|
||||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23?loc=hi)
|
||||
|
||||
### परिचय
|
||||
|
||||
ब्राउज़र एक्सटेंशन ब्राउज़र में अतिरिक्त कार्यक्षमता जोड़ते हैं। लेकिन इससे पहले कि आप एक निर्माण करें, आपको थोड़ा सीखना चाहिए कि ब्राउज़र कैसे अपना काम करते हैं।
|
||||
|
||||
### ब्राउजरके बारे मे
|
||||
|
||||
पाठों की इस श्रृंखला में, आप सीखेंगे कि एक ब्राउज़र एक्सटेंशन कैसे बनाया जाए जो क्रोम, फ़ायरफ़ॉक्स और एज ब्राउज़र पर काम करेगा। इस भाग में, आपको पता चलेगा कि ब्राउज़र कैसे काम करते हैं और ब्राउज़र एक्सटेंशन के तत्वों को मचान बनाते हैं।
|
||||
|
||||
लेकिन वास्तव में एक ब्राउज़र क्या है? यह एक सॉफ्टवेयर एप्लिकेशन है जो एक अंतिम उपयोगकर्ता को सर्वर से सामग्री का उपयोग करने और इसे वेब पेजों पर प्रदर्शित करने की अनुमति देता है।
|
||||
|
||||
✅ थोड़ा इतिहास: पहला ब्राउज़र 'वर्ल्डवाइडवेब' कहलाता था और 1990 में सर टिमोथी बर्नर्स-ली द्वारा बनाया गया था।
|
||||
|
||||
|
||||
> थोड़ी शुरुआती ब्राउजर , [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) द्वारा
|
||||
|
||||
जब कोई उपयोगकर्ता URL (यूनिफ़ॉर्म रिसोर्स लोकेटर) पते का उपयोग करके इंटरनेट से जुड़ा होता है, तो आमतौर पर एक `http` या `https` पते के माध्यम से हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल का उपयोग करते हुए, ब्राउज़र एक वेब सर्वर के साथ संचार करता है और एक वेब पेज प्राप्त करता है।
|
||||
|
||||
इस बिंदु पर, ब्राउज़र का रेंडरिंग इंजन इसे उपयोगकर्ता के डिवाइस पर प्रदर्शित करता है, जो मोबाइल फोन, डेस्कटॉप या लैपटॉप हो सकता है।
|
||||
|
||||
ब्राउज़रों के पास सामग्री को कैश करने की क्षमता भी होती है ताकि इसे हर बार सर्वर से पुनर्प्राप्त न करना पड़े। वे उपयोगकर्ता की ब्राउज़िंग गतिविधि के इतिहास को रिकॉर्ड कर सकते हैं, 'कुकीज़' को स्टोर कर सकते हैं, जो डेटा के छोटे टुकड़े हैं जिसमें उपयोगकर्ता की गतिविधि को संग्रहीत करने के लिए उपयोग की जाने वाली जानकारी होती है, और बहुत कुछ।
|
||||
|
||||
ब्राउज़रों के बारे में याद रखने वाली एक महत्वपूर्ण बात यह है कि वे सभी समान नहीं हैं! प्रत्येक ब्राउज़र की अपनी ताकत और कमजोरियां होती हैं, और एक पेशेवर वेब डेवलपर को यह समझने की आवश्यकता होती है कि वेब पेजों को अच्छी तरह से क्रॉस-ब्राउज़र कैसे करें। इसमें मोबाइल फोन जैसे छोटे व्यूपोर्ट को संभालना शामिल है, साथ ही एक उपयोगकर्ता जो ऑफ़लाइन है।
|
||||
|
||||
वास्तव में एक उपयोगी वेबसाइट जिसे आपको संभवतः उस ब्राउज़र में बुकमार्क करना चाहिए जिसे आप उपयोग करना चाहते हैं [caniuse.com](https://www.caniuse.com)। जब आप वेब पेज बना रहे होते हैं, तो कैनुएज़ की समर्थित तकनीकों की सूचियों का उपयोग करना बहुत मददगार होता है ताकि आप अपने उपयोगकर्ताओं का सर्वोत्तम समर्थन कर सकें।
|
||||
|
||||
✅ आप कैसे बता सकते हैं कि आपकी वेब साइट के उपयोगकर्ता आधार के साथ कौन से ब्राउज़र सबसे लोकप्रिय हैं? अपने एनालिटिक्स की जाँच करें - आप अपनी वेब डेवलपमेंट प्रक्रिया के हिस्से के रूप में विभिन्न एनालिटिक्स पैकेज स्थापित कर सकते हैं, और वे आपको बताएंगे कि विभिन्न लोकप्रिय ब्राउज़रों द्वारा ब्राउज़रों का सबसे अधिक उपयोग क्या किया जाता है।
|
||||
|
||||
## ब्राउजर इक्स्टेन्शन
|
||||
|
||||
आप ब्राउज़र एक्सटेंशन क्यों बनाना चाहेंगे? जब आप उन कार्यों तक त्वरित पहुँच की आवश्यकता होती है, जिन्हें आप दोहराना चाहते हैं, तो आपके ब्राउज़र से जुड़ना एक आसान बात है। उदाहरण के लिए, यदि आप अपने आप को विभिन्न वेब पृष्ठों पर रंगों की जांच करने की आवश्यकता महसूस करते हैं, जिनके साथ आप बातचीत करते हैं, तो आप एक रंग-पिकर ब्राउज़र एक्सटेंशन स्थापित कर सकते हैं। यदि आपको पासवर्ड याद रखने में समस्या है, तो आप पासवर्ड-प्रबंधन ब्राउज़र एक्सटेंशन का उपयोग कर सकते हैं।
|
||||
|
||||
ब्राउज़र एक्सटेंशन को विकसित करने में बहुत मज़ा आता है। वे उन कार्यों की एक सीमित संख्या का प्रबंधन करते हैं जो वे अच्छा प्रदर्शन करते हैं।
|
||||
|
||||
✅ आपके पसंदीदा ब्राउज़र एक्सटेंशन क्या हैं? वे कौन से कार्य करते हैं?
|
||||
|
||||
### एक्सटेंशन स्थापित करना
|
||||
|
||||
निर्माण शुरू करने से पहले, एक ब्राउज़र एक्सटेंशन के निर्माण और तैनाती की प्रक्रिया पर एक नज़र डालें। हालांकि प्रत्येक ब्राउज़र इस कार्य को प्रबंधित करने के तरीके में थोड़ा भिन्न होता है, प्रक्रिया Chrome और फ़ायरफ़ॉक्स पर इस उदाहरण के समान है एज पर:
|
||||
|
||||
|
||||
|
||||
संक्षेप में, प्रक्रिया होगी:
|
||||
|
||||
- `npm run build` के साथ अपना इक्स्टेन्शन बनाए
|
||||
- शीर्ष पर दाईं ओर "Settings and more" बटन (`... 'आइकन) का उपयोग करके एक्सटेंशन फलक में ब्राउज़र में नेविगेट करें
|
||||
- यदि यह एक नया इंस्टॉलेशन है, तो इसके बिल्ड फोल्डर से एक नया एक्सटेंशन अपलोड करने के लिए `load unpacked` चुनें (हमारे मामले में यह `/dist`) है
|
||||
- या, यदि आप पहले से स्थापित एक्सटेंशन को पुनः लोड कर रहे हैं तो `reload` पर क्लिक करें
|
||||
|
||||
ये निर्देश आपके द्वारा बनाए गए एक्सटेंशन से संबंधित हैं; प्रत्येक ब्राउज़र से जुड़े ब्राउज़र एक्सटेंशन स्टोर पर जारी किए गए एक्सटेंशन को स्थापित करने के लिए, आपको उन [स्टोर](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) पर नेविगेट करना चाहिए और अपनी पसंद का एक्सटेंशन इंस्टॉल करना चाहिए।
|
||||
|
||||
### शुरू हो जाओ
|
||||
|
||||
आप एक ऐसे ब्राउज़र एक्सटेंशन का निर्माण करने जा रहे हैं जो आपके क्षेत्र के कार्बन पदचिह्न को प्रदर्शित करता है, जो आपके क्षेत्र के ऊर्जा उपयोग और ऊर्जा के स्रोत को दर्शाता है। एक्सटेंशन में एक फ़ॉर्म होगा जो एपीआई की एकत्र करता है ताकि आप एक्सेस कर सकें
|
||||
CO2 सिग्नल की एपीआई।
|
||||
|
||||
**आपको चाहिए:**
|
||||
|
||||
- [एज एपीआई की](https://www.co2signal.com/); इस पृष्ठ पर बॉक्स में अपना ईमेल दर्ज करें और एक आपको भेजा जाएगा
|
||||
- [अपने क्षेत्र के लिए कोड](http://api.electricitymap.org/v3/zones) [विद्युत मानचित्र](https://www.electricitymap.org/map) के अनुरूप (बोस्टन में, उदाहरण के लिए, I) 'US-NEISO' का उपयोग करें)।
|
||||
- [स्टार्टर कोड](../start)। `start` फ़ोल्डर डाउनलोड करें; आप इस फ़ोल्डर में कोड पूरा कर लेंगे।
|
||||
- [एनपीएम](https://www.npmjs.com) -एनपीएम एक पैकेज प्रबंधन उपकरण है; इसे स्थानीय रूप से स्थापित करें और आपके वेब एसेट द्वारा उपयोग के लिए `package.json` फ़ाइल में सूचीबद्ध पैकेज इंस्टॉल किए जाएंगे
|
||||
|
||||
✅ इस [उत्कृष्ट लर्न मॉड्यूल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) में पैकेज प्रबंधन के बारे में अधिक जानें
|
||||
|
||||
कोडबेस के माध्यम से देखने के लिए एक मिनट लें:
|
||||
|
||||
dist
|
||||
-|manifest.json (डिफ़ॉल्ट यहा सेट करे)
|
||||
-|index.html (फ्रंट-एंड HTML मार्कअप यहाँ)
|
||||
-|background.js (पृष्ठभूमि JS यहाँ)
|
||||
-|main.js (बिलट JS)
|
||||
src
|
||||
-|index.js (आपका JS कोड यहा जाता है)
|
||||
|
||||
✅ एक बार जब आपके पास आपकी एपीआई की और क्षेत्र कोड काम आ जाए, तो भविष्य में उपयोग के लिए उन्हें किसी नोट में स्टोर करें।
|
||||
|
||||
### एक्सटेंशन के लिए HTML बनाएँ
|
||||
|
||||
इस विस्तार के दो विचार हैं। एपीआई की और क्षेत्र कोड इकट्ठा करने के लिए एक:
|
||||
|
||||
|
||||
|
||||
और क्षेत्र के कार्बन उपयोग को प्रदर्शित करने वाला दूसरा:
|
||||
|
||||
|
||||
|
||||
आइए एचटीएमएल के निर्माण के लिए फॉर्म के साथ शुरुआत करें और इसे सीएसएस के साथ स्टाइल करें।
|
||||
|
||||
`/dist` फ़ोल्डर में, आप एक फॉर्म और एक परिणाम क्षेत्र का निर्माण करेंगे। `index.html` फ़ाइल में, परिसीमित प्रपत्र क्षेत्र को आबाद करें:
|
||||
|
||||
```HTML
|
||||
<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>
|
||||
```
|
||||
यह वह रूप है जहां आपकी सहेजी गई जानकारी इनपुट होगी और स्थानीय संग्रहण में सहेजी जाएगी।
|
||||
|
||||
अगला, परिणाम क्षेत्र बनाएं; अंतिम फॉर्म टैग के तहत, कुछ divs जोड़ें:
|
||||
|
||||
```HTML
|
||||
<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>
|
||||
```
|
||||
इस बिंदु पर, आप एक निर्माण की कोशिश कर सकते हैं। इस एक्सटेंशन के पैकेज निर्भरता को स्थापित करना सुनिश्चित करें:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
यह कमांड आपके एक्सटेंशन के निर्माण की प्रक्रिया के लिए वेबपैक स्थापित करने के लिए, npm पैकेज मैनेजर का उपयोग करेगा। वेबपैक एक बंडल है जो संकलन कोड को संभालता है। आप इस प्रक्रिया के आउटपुट को `/dist/main.js` में देखकर देख सकते हैं - आप देख सकते हैं कि कोड को बंडल कर दिया गया है।
|
||||
|
||||
अभी के लिए, एक्सटेंशन का निर्माण होना चाहिए और, यदि आप इसे एज में एक्सटेंशन के रूप में तैनात करते हैं, तो आपको एक फॉर्म बड़े करीने से दिखाई देगा।
|
||||
|
||||
बधाई हो, आपने ब्राउज़र एक्सटेंशन बनाने की दिशा में पहला कदम उठाया है। बाद के पाठों में, आप इसे और अधिक कार्यात्मक और उपयोगी बनाएंगे।
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
ब्राउज़र एक्सटेंशन स्टोर पर एक नज़र डालें और अपने ब्राउज़र में एक इंस्टॉल करें। आप इसकी फाइलों को दिलचस्प तरीके से जांच सकते हैं। तुम क्या खोजते हो?
|
||||
|
||||
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
|
||||
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
इस पाठ में आपने वेब ब्राउज़र के इतिहास के बारे में थोड़ा सीखा; वर्ल्ड वाइड वेब के अन्वेषकों ने इसके इतिहास के बारे में और अधिक पढ़कर इसका उपयोग कैसे किया, इसके बारे में जानने का यह अवसर लें। कुछ उपयोगी साइटों में शामिल हैं:
|
||||
|
||||
[वेब ब्राउजर का इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)
|
||||
|
||||
[वेब का इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[टिम बर्नर्स-ली के साथ एक इंटरव्यू](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)
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[अपने इक्स्टेन्शन को रीस्टाइल करें](assignment.hi.md)
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
# Restyle uw extensie
|
||||
|
||||
## Instructies
|
||||
|
||||
De codebase voor deze extensie wordt compleet geleverd met stijlen, maar u hoeft ze niet te gebruiken; maak uw extensie uw eigen door deze te restylen door het css-bestand te bewerken.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||
| | Code wordt ingediend met functionele nieuwe stijlen | Styling is niet compleet | Stijlen zijn buggy |
|
||||
@ -0,0 +1,11 @@
|
||||
# 重新造型你的套件
|
||||
|
||||
## 簡介
|
||||
|
||||
本課程的擴充套件已經包含了造型設定，但你不需要非得使用它們。改寫它的 CSS 檔來重新構築擴充插件的造型。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | -------------------------- | -------------- | ------------ |
|
||||
| | 新造型能正常地套用在程式中 | 造型規劃不完整 | 套件出現問題 |
|
||||
@ -0,0 +1,224 @@
|
||||
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 2: एक एपीआई को कॉल करें, स्थानीय भंडारण का उपयोग करें
|
||||
|
||||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25?loc=hi)
|
||||
|
||||
### परिचय
|
||||
|
||||
इस पाठ में, आप अपने ब्राउज़र एक्सटेंशन के फ़ॉर्म को सबमिट करके एक एपीआई कॉल करेंगे और अपने ब्राउज़र एक्सटेंशन में परिणाम प्रदर्शित करेंगे। इसके अलावा, आप भविष्य के संदर्भ और उपयोग के लिए अपने ब्राउज़र के स्थानीय भंडारण में डेटा कैसे संग्रहीत कर सकते हैं, इसके बारे में जानेंगे।
|
||||
|
||||
✅ अपना कोड कहां रखना है, यह जानने के लिए उपयुक्त फाइलों में क्रमांकित खंडों का पालन करें
|
||||
|
||||
### एक्सटेंशन में हेरफेर करने के लिए तत्वों को सेट करें:
|
||||
|
||||
इस समय तक आपने अपने ब्राउज़र एक्सटेंशन के लिए फॉर्म और <div> के लिए HTML बना लिया है। अब से, आपको `/src/index.js` फ़ाइल में काम करना होगा और बिट द्वारा अपना एक्सटेंशन बिट बनाना होगा। अपनी परियोजना स्थापित करने और निर्माण की प्रक्रिया पर [पिछले पाठ](../../1-about-browsers/translations/README.hi.md) देखें।
|
||||
|
||||
अपने `index.js` फ़ाइल में काम करना, विभिन्न क्षेत्रों से जुड़े मूल्यों को धारण करने के लिए कुछ `const` चर बनाकर शुरू करें:
|
||||
|
||||
```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');
|
||||
```
|
||||
|
||||
इन सभी क्षेत्रों को उनके सीएसएस वर्ग द्वारा संदर्भित किया जाता है, जैसा कि आपने इसे पिछले पाठ में HTML में सेट किया था।
|
||||
|
||||
### लिस्टेनेर जोड़े
|
||||
|
||||
इसके बाद, ईवेंट श्रोताओं को फ़ॉर्म और स्पष्ट बटन में जोड़ें, जो फ़ॉर्म को रीसेट करता है, ताकि यदि कोई उपयोगकर्ता फ़ॉर्म को सबमिट करता है या उस रीसेट बटन को क्लिक करता है, तो कुछ घटित होगा, और फ़ाइल के निचले भाग में ऐप को आरंभीकृत करने के लिए कॉल जोड़ें:
|
||||
|
||||
```JavaScript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
✅ ध्यान दें कि शॉर्टहैंड एक सबमिट या क्लिक करने के लिए सुनने के लिए प्रयोग किया जाता है, और यह कैसे घटना को हैंडल या रीसेट कार्यों के लिए पारित किया जाता है। क्या आप इस शॉर्टहैंड के बराबर लंबे प्रारूप में लिख सकते हैं? आप क्या पसंद करेंगे?
|
||||
|
||||
### Init() फ़ंक्शन और reset() फ़ंक्शन का निर्माण करें:
|
||||
|
||||
अब आप उस फ़ंक्शन का निर्माण करने जा रहे हैं जो एक्सटेंशन को इनिशियलाइज़ करता है, जिसे init() कहा जाता है:
|
||||
|
||||
```JavaScript
|
||||
function init() {
|
||||
//if anything is in localStorage, pick it up
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
//set icon to be generic green
|
||||
//todo
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
//if we don't have the keys, show the form
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
//if we have saved keys/regions in localStorage, show results when they load
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
//clear local storage for region only
|
||||
localStorage.removeItem('regionName');
|
||||
init();
|
||||
}
|
||||
|
||||
```
|
||||
इस फ़ंक्शन में, कुछ दिलचस्प तर्क है। इसके माध्यम से पढ़ना, क्या आप देख सकते हैं कि क्या होता है?
|
||||
|
||||
- यदि उपयोगकर्ता ने APIKey और क्षेत्र कोड को स्थानीय संग्रहण में संग्रहीत किया है, तो यह जांचने के लिए दो `const` लगाए गए हैं।
|
||||
- यदि उनमें से कोई भी नल है, तो अपनी शैली को 'ब्लॉक' के रूप में प्रदर्शित करने के लिए रूप बदलकर दिखाएं
|
||||
- रिजल्ट, लोडिंग और clearBtn को छिपाएं और किसी भी एरर टेक्स्ट को खाली स्ट्रिंग पर सेट करें
|
||||
- यदि कोई की और क्षेत्र मौजूद है, तो एक दिनचर्या शुरू करें:
|
||||
- कार्बन उपयोग डेटा प्राप्त करने के लिए एपीआई को कॉल करें
|
||||
- परिणाम क्षेत्र छिपाएँ
|
||||
- फॉर्म को छिपाएं
|
||||
- रीसेट बटन दिखाएं
|
||||
|
||||
आगे बढ़ने से पहले, ब्राउज़रों में उपलब्ध एक बहुत ही महत्वपूर्ण अवधारणा के बारे में सीखना उपयोगी है: [लोकलस्टोरेज](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).लोकलस्टोरेज, ब्राउज़र में स्ट्रिंगस को 'की-वैल्यू' पेयर के रूप में स्टोर करने का एक उपयोगी तरीका है। इस प्रकार के वेब स्टोरेज को ब्राउजर में डेटा को मैनेज करने के लिए जावास्क्रिप्ट द्वारा मैनिपुलेट किया जा सकता है। लोकलस्टोरीज की समय सीमा समाप्त नहीं होती है, जबकि ब्राउजर के बंद होने पर एक अन्य तरह का वेब स्टोरेज, स्टोरेज साफ हो जाता है। विभिन्न प्रकार के भंडारण में उनके उपयोग के पक्ष और विपक्ष हैं।
|
||||
|
||||
> नोट - आपके ब्राउज़र एक्सटेंशन का अपना स्थानीय भंडारण है; मुख्य ब्राउज़र विंडो एक अलग उदाहरण है और अलग-अलग व्यवहार करता है।
|
||||
|
||||
उदाहरण के लिए, आपने अपने APIKey को एक स्ट्रिंग मान दिया है, और आप देख सकते हैं कि यह एज पर "एक वेब पेज का निरीक्षण" (आप एक ब्राउज़र का निरीक्षण करने के लिए राइट-क्लिक कर सकते हैं) पर सेट है और एप्लिकेशन टैब पर जाकर भंडारण देख सकते हैं।
|
||||
|
||||
|
||||
|
||||
✅ उन स्थितियों के बारे में सोचें जहां आप लोकलस्टोरेज में कुछ डेटा स्टोर नहीं करना चाहेंगे। सामान्य तौर पर, लोकलस्टेज में एपीआई कीज रखना एक बुरा विचार है! क्या आप देख सकते हैं क्यों? हमारे मामले में, चूंकि हमारा ऐप विशुद्ध रूप से सीखने के लिए है और ऐप स्टोर में तैनात नहीं किया जाएगा, इसलिए हम इस पद्धति का उपयोग करेंगे।
|
||||
|
||||
ध्यान दें कि आप लोकलस्टोरेज में हेरफेर करने के लिए वेब एपीआई का उपयोग करते हैं, या तो `getItem()`, `setItem()` या `removeItem()` का उपयोग करके। यह ब्राउज़रों में व्यापक रूप से समर्थित है।
|
||||
|
||||
`DisplayCarbonUsage()` फ़ंक्शन का निर्माण करने से पहले जिसे `init()` कहा जाता है, चलो प्रारंभिक फॉर्म सबमिशन को संभालने के लिए कार्यक्षमता का निर्माण करते हैं।
|
||||
|
||||
### फॉर्म सबमिट करें
|
||||
|
||||
एक फ़ंक्शन बनाएं जिसे `handleSubmit` कहा जाता है जो एक ईवेंट तर्क `(e)` को स्वीकार करता है । ईवेंट को प्रचार करने से रोकें (इस मामले में, हम ब्राउज़र को रिफ्रेश होने से रोकना चाहते हैं) और एक नया फ़ंक्शन, `setUpUser`, तर्कों में गुजरते हुए `apiKey.value` और `region.value` को कॉल करें। इस प्रकार, आप उन दो मानों का उपयोग करते हैं, जो प्रारंभिक फ़ील्ड के माध्यम से लाए जाते हैं जब उपयुक्त फ़ील्ड पॉपुलेट किए जाते हैं।
|
||||
|
||||
```JavaScript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
✅ अपनी मेमोरी को रीफ़्रेश करें - आपने अंतिम पाठ में जो HTML सेट किया है, उसमें दो इनपुट फ़ील्ड हैं, जिनके `value` को फ़ाइल के शीर्ष पर स्थापित किए गए `const` के माध्यम से कैप्चर किया गया है, और वे दोनों `required` हैं, इसलिए ब्राउज़र उपयोगकर्ताओं को रोकता है शून्य मानों को इनपुट करने से।
|
||||
|
||||
### उपयोगकर्ता सेट करें
|
||||
|
||||
`SetUpUser` फ़ंक्शन पर चलते हुए, यहां वह स्थान है जहां आप apiKey और क्षेत्रनाम के लिए स्थानीय संग्रहण मान सेट करते हैं। एक नया फ़ंक्शन जोड़ें:
|
||||
|
||||
```JavaScript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
//make initial call
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
यह फ़ंक्शन API को दिखाने के लिए एक लोडिंग संदेश सेट करता है। इस बिंदु पर, आप इस ब्राउज़र एक्सटेंशन के सबसे महत्वपूर्ण कार्य को बनाने पर पहुंचे हैं!
|
||||
|
||||
### कार्बन उपयोग प्रदर्शित करें
|
||||
|
||||
अंत में यह एपीआई क्वेरी करने का समय है!
|
||||
|
||||
आगे जाने से पहले, हमें एपीआई पर चर्चा करनी चाहिए। एपीआई, या [एप्लीकेशन प्रोग्रामिंग इंटरफेस] (https://www.webopedia.com/TERM/A/API.html), वेब डेवलपर के टूलबॉक्स का एक महत्वपूर्ण तत्व है। वे एक दूसरे के साथ बातचीत और इंटरफ़ेस करने के लिए कार्यक्रमों के लिए मानक तरीके प्रदान करते हैं। उदाहरण के लिए, यदि आप एक वेब साइट का निर्माण कर रहे हैं, जिसे डेटाबेस से क्वेरी करने की आवश्यकता है, तो किसी ने आपके उपयोग के लिए एक एपीआई बनाया होगा। जबकि कई प्रकार के API हैं, जिनमें से एक सबसे लोकप्रिय है [REST API](https://www.smashingmagazine.com/2018/01/understanding-use-rest-api/)
|
||||
|
||||
✅ 'REST' शब्द 'Representational State Transfer' के लिए है और इसमें डेटा लाने के लिए विभिन्न कॉन्फ़िगर किए गए URL का उपयोग करने की सुविधा है। डेवलपर्स के लिए उपलब्ध विभिन्न प्रकार के एपीआई पर थोड़ा शोध करें। क्या प्रारूप आपको अपील करता है?
|
||||
|
||||
इस फ़ंक्शन के बारे में ध्यान देने योग्य महत्वपूर्ण बातें हैं। पहले [`async` कीवर्ड](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) को नोटिस करें। अपने कार्यों को लिखना ताकि वे अतुल्यकालिक रूप से चलाते हैं इसका मतलब है कि वे एक कार्रवाई की प्रतीक्षा करते हैं, जैसे डेटा लौटाए जाने से पहले, पूरा होने से पहले।
|
||||
|
||||
यहाँ `async` के बारे में एक त्वरित वीडियो है:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "promises के प्रबंधन के लिए Async और Await")
|
||||
|
||||
> Async/wait के वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||
|
||||
C02Signal API को क्वेरी करने के लिए एक नया फ़ंक्शन बनाएँ:
|
||||
|
||||
```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.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
यह एक बड़ा फंगक्शन है। यहाँ क्या चल रहा है?
|
||||
|
||||
- सर्वोत्तम कार्यप्रणालियों का पालन करते हुए, आप इस फ़ंक्शन का उपयोग करने के लिए एक `async` कीवर्ड का उपयोग करते हैं। फ़ंक्शन में एक `try/catch` ब्लॉक होता है क्योंकि यह एक वादा लौटाएगा जब एपीआई डेटा लौटाएगा। चूँकि आपके पास उस गति पर नियंत्रण नहीं है जो एपीआई प्रतिक्रिया देगा (यह प्रतिक्रिया नहीं दे सकता है!), आपको इस अनिश्चितता को असंगत रूप से कॉल करने की आवश्यकता है।
|
||||
- आप अपने API की का उपयोग करके अपने क्षेत्र का डेटा प्राप्त करने के लिए co2signal API की क्वेरी कर रहे हैं। उस की का उपयोग करने के लिए, आपको अपने हेडर मापदंडों में एक प्रकार के प्रमाणीकरण का उपयोग करना होगा।
|
||||
- एपीआई के जवाब देने के बाद, आप इस डेटा को दिखाने के लिए अपने स्क्रीन के कुछ हिस्सों में इसके रिस्पॉन्स डेटा के विभिन्न तत्वों को असाइन करते हैं।
|
||||
- यदि कोई त्रुटि है, या कोई परिणाम नहीं है, तो आप एक त्रुटि संदेश दिखाते हैं।
|
||||
|
||||
✅ Asyncronous प्रोग्रामिंग पैटर्न का उपयोग करना आपके टूलबॉक्स में एक और बहुत उपयोगी उपकरण है। [विभिन्न तरीकों के बारे में](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) पढ़ें आप इस प्रकार के कोड को कॉन्फ़िगर कर सकते हैं।
|
||||
|
||||
बधाई हो! यदि आप अपना एक्सटेंशन बनाते हैं (`npm run build`) और इसे अपने एक्सटेंशन पेन में रिफ्रेश करें, तो आपके पास काम करने का एक्सटेंशन है! केवल एक चीज जो काम नहीं कर रही है वह आइकन है, और आप इसे अगले पाठ में ठीक कर देंगे।
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
हमने इन पाठों में अब तक कई प्रकार के एपीआई पर चर्चा की है। एक वेब एपीआई चुनें और गहराई से शोध करें कि यह क्या प्रदान करता है। उदाहरण के लिए, [HTML ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है?
|
||||
|
||||
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
|
||||
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
आपने इस पाठ में लोकलस्टोरेज और एपीआई के बारे में सीखा, दोनों पेशेवर वेब डेवलपर के लिए बहुत उपयोगी हैं। क्या आप सोच सकते हैं कि ये दोनों चीजें एक साथ कैसे काम करती हैं? इस बारे में सोचें कि आप एक वेब साइट को कैसे आर्किटेक्ट करेंगे जो एक एपीआई द्वारा उपयोग की जाने वाली वस्तुओं को संग्रहीत करेगी।
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[एक एपीआई अपनाएं](assignment.hi.md)
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
# Adopteer een API
|
||||
|
||||
## Instructies
|
||||
|
||||
API's kunnen erg leuk zijn om mee te spelen. Hier is een [lijst met vele gratis](https://github.com/public-apis/public-apis). Kies een API, en bouw een browserextensie die een probleem oplost. Het kan een zo klein probleem zijn als u niet genoeg foto's van huisdieren hebt (dus probeer de [dog CEO API](https://dog.ceo/dog-api/)) of iets groters - veel plezier!
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||
| | Een volledige browserextensie wordt ingediend met behulp van een API uit de bovenstaande lijst | Er is een gedeeltelijke browserextensie ingediend | De inzending bevat bugs |
|
||||
@ -0,0 +1,161 @@
|
||||
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 3: पृष्ठभूमि कार्य और प्रदर्शन के बारे में जानें
|
||||
|
||||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27?loc=hi)
|
||||
|
||||
### परिचय
|
||||
|
||||
इस मॉड्यूल के अंतिम दो पाठों में, आपने सीखा कि एपीआई से प्राप्त डेटा के लिए एक फॉर्म और डिस्प्ले क्षेत्र कैसे बनाया जाए। यह वेब पर वेब उपस्थिति बनाने का एक बहुत ही मानक तरीका है। आपने यह भी सीखा कि कैसे डेटा को असंगत रूप से संभालना है। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
|
||||
|
||||
यह कुछ पृष्ठभूमि कार्यों को प्रबंधित करने के लिए बना हुआ है, जिसमें एक्सटेंशन के आइकन का रंग ताज़ा करना शामिल है, इसलिए यह इस बारे में बात करने का एक शानदार समय है कि ब्राउज़र इस तरह के कार्य का प्रबंधन कैसे करता है। आइए इन ब्राउज़र कार्यों के बारे में अपनी वेब परिसंपत्तियों के प्रदर्शन के संदर्भ में सोचते हैं क्योंकि आप इन्हें बनाते हैं।
|
||||
|
||||
## वेब प्रदर्शन मूल बातें
|
||||
|
||||
> "वेबसाइट का प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [जैक ग्रॉसबरत](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
सभी प्रकार की स्थितियों में, सभी प्रकार के उपयोगकर्ताओं के लिए, आपकी वेब साइटों को सभी प्रकार के उपकरणों पर तेज़ी से तेज़ बनाने का विषय, बहुत ही विशाल है। यहां कुछ बिंदुओं को ध्यान में रखा जाता है क्योंकि आप या तो एक मानक वेब परियोजना या एक ब्राउज़र एक्सटेंशन का निर्माण करते हैं।
|
||||
|
||||
अपनी साइट को कुशलतापूर्वक चलाने के लिए सबसे पहले आपको यह सुनिश्चित करने की आवश्यकता है कि उसके प्रदर्शन के बारे में डेटा इकट्ठा किया जाए। ऐसा करने का पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल में है।. एज में, आप "Settings and more" बटन (ब्राउज़र के शीर्ष दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools> Developer Tools पर नेविगेट करें और प्रदर्शन टैब खोलें। आप विंडोज पर कीबोर्ड शॉर्टकट `Ctrl` +` शिफ्ट` + `I` या मैक पर डेवलपर विकल्प खोलने के लिए `Option` + `Command` +` I` का भी उपयोग कर सकते हैं।
|
||||
|
||||
प्रदर्शन टैब में एक प्रोफ़ाइल उपकरण होता है। एक वेब साइट खोलें (उदाहरण के लिए, https://www.microsoft.com) और 'Record' बटन पर क्लिक करें, फिर साइट को रीफ़्रेश करें। किसी भी समय रिकॉर्डिंग बंद कर दें, और आप साइट को 'स्क्रिप्ट', 'रेंडर' और 'पेंट' से उत्पन्न रूटीन को देख पाएंगे:
|
||||
|
||||
|
||||
|
||||
✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
|
||||
|
||||
> युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
|
||||
|
||||
आपके पृष्ठ लोड होने पर होने वाली घटनाओं को ज़ूम करने के लिए प्रोफ़ाइल समयरेखा के तत्वों का चयन करें।
|
||||
|
||||
प्रोफ़ाइल टाइमलाइन के एक भाग का चयन करके और सारांश फलक को देखकर अपने पृष्ठ के प्रदर्शन का एक स्नैपशॉट प्राप्त करें:
|
||||
|
||||
|
||||
|
||||
यह देखने के लिए कि क्या कोई घटना 15 ms से अधिक समय की नहीं है, इवेंट लॉग फलक की जाँच करें:
|
||||
|
||||
|
||||
|
||||
✅ अपने प्रोफाइलर को जाने! इस साइट पर डेवलपर टूल खोलें और देखें कि क्या कोई अड़चन है। सबसे धीमी गति से लोड होने वाली ऐसेट क्या है? सबसे तेज?
|
||||
|
||||
## प्रोफाइल की जाँच
|
||||
|
||||
सामान्य तौर पर कुछ "समस्या वाले क्षेत्र" होते हैं, जो हर वेब डेवलपर को साइट बनाते समय देखना चाहिए, ताकि उत्पादन में तैनात होने के समय बुरा आश्चर्य न हो।
|
||||
|
||||
**एसेट आकार**: पिछले कुछ वर्षों में वेब 'भारी' हो गया है, और इस तरह धीमा है। इस वजन का कुछ छवियों के उपयोग के साथ क्या करना है।
|
||||
|
||||
✅ पृष्ठ भार और अधिक के ऐतिहासिक दृश्य के लिए [इंटरनेट आर्काइव](https://httparchive.org/reports/page-weight) देखें।
|
||||
|
||||
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी छवियों को अनुकूलित किया जाए, आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन पर वितरित किया जाए।
|
||||
|
||||
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपने डॉक्यूमेंट ऑब्जेक्ट मॉडल का निर्माण करना होता है, इसलिए यह आपके टैग को कम से कम रखने के लिए अच्छे पेज प्रदर्शन के हित में है, केवल पेज का उपयोग करके और स्टाइल करके। इस बिंदु पर, एक पृष्ठ से जुड़े अतिरिक्त सीएसएस को अनुकूलित किया जा सकता है; उदाहरण के लिए, केवल एक पृष्ठ पर उपयोग की जाने वाली शैलियों को मुख्य शैली पत्रक में शामिल करने की आवश्यकता नहीं है।
|
||||
|
||||
**जावास्क्रिप्ट**: Eबहुत ही जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स को देखना चाहिए, जिन्हें बाकी डोम से पहले लोड किया जाना चाहिए और उन्हें ब्राउजर में चित्रित किया जा सकता है। अपनी इनलाइन स्क्रिप्ट के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि टेरारियम मॉड्यूल में किया जाता है)।
|
||||
|
||||
✅ साइट के प्रदर्शन को निर्धारित करने के लिए की जाने वाली सामान्य जाँचों के बारे में अधिक जानने के लिए [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) पर कुछ साइटों को आज़माएँ।
|
||||
|
||||
अब जब आपके पास यह विचार है कि ब्राउज़र आपके द्वारा भेजी जाने वाली संपत्ति को कैसे प्रदान करता है, तो आइए आखिरी कुछ चीजों पर गौर करें जिन्हें आपको अपने विस्तार को पूरा करने के लिए करना है:
|
||||
|
||||
### रंग की गणना करने के लिए एक फ़ंक्शन बनाएं
|
||||
|
||||
`/src/index.js` में कार्य करना,` const` वैरिएबल की श्रृंखला के बाद `calculateColor()` नामक एक फंक्शन जोड़ें, जिससे आप 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 } });
|
||||
}
|
||||
```
|
||||
|
||||
यहाँ क्या चल रहा है? आप पिछले पाठ में पूर्ण की गई एपीआई कॉल से एक मूल्य (कार्बन की तीव्रता) में पास होते हैं, और फिर आप गणना करते हैं कि रंगों के सरणी में प्रस्तुत सूचकांक के लिए इसका मूल्य कितना करीब है। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
|
||||
|
||||
Chrome.runtime में [एपीआई](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के पृष्ठभूमि कार्यों को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
|
||||
|
||||
> "पृष्ठभूमि पृष्ठ को पुनः प्राप्त करने के लिए chrome.runtime API का उपयोग करें, प्रकट के बारे में विवरण लौटाएं, और ऐप या एक्सटेंशन जीवनचक्र में घटनाओं के लिए सुनें और जवाब दें। आप URL के सापेक्ष पथ को पूरी तरह से योग्य URL में बदलने के लिए भी इस API का उपयोग कर सकते हैं।"
|
||||
|
||||
✅ यदि आप एज के लिए इस ब्राउज़र एक्सटेंशन को विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम एपीआई का उपयोग कर रहे हैं। नया एज ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलता है, जिससे आप इन उपकरणों का लाभ उठा सकते हैं।
|
||||
|
||||
> ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो एक्सटेंशन के भीतर से dev टूल लॉन्च करें, क्योंकि यह उसका अपना अलग ब्राउज़र उदाहरण है।
|
||||
|
||||
### एक डिफ़ॉल्ट आइकन रंग सेट करें
|
||||
|
||||
अब, `init()`फंक्शन में, आइकॉन को फिर से क्रोम के `updateIcon` एक्शन को कॉल करके शुरू करने के लिए जेनेरिक ग्रीन होने के लिए सेट करें:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### फ़ंक्शन को कॉल करें, कॉल निष्पादित करें
|
||||
|
||||
इसके बाद, उस फ़ंक्शन को कॉल करें जिसे आपने C02Signal API द्वारा दिए गए वादे से जोड़कर बनाया है:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
और अंत में, `/dist/background.js` में, इन बैकग्राउंड एक्शन कॉल के लिए श्रोता जोड़ें:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//borrowed from energy lollipop extension, nice feature!
|
||||
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);
|
||||
}
|
||||
```
|
||||
इस कोड में, आप बैकएंड टास्क मैनेजर में आने वाले किसी भी संदेश के लिए श्रोता जोड़ रहे हैं। यदि इसे 'अपडेटआईकॉन' कहा जाता है, तो अगला कोड चलाया जाता है, कैनवस एपीआई का उपयोग करके उचित रंग का एक आइकन खींचने के लिए।
|
||||
|
||||
✅ आप [अंतरिक्ष खेल के पाठों](../../../6-space-game/2-drawing-to-canvas/translations/README.hi.md) में कैनवस एपीआई के बारे में अधिक जानेंगे
|
||||
|
||||
आप स्पेस जीएनओ में कैनवस एपीआई के बारे में अधिक जानेंगे, अपने एक्सटेंशन का पुनर्निर्माण करेंगे (`npm run build`), अपने एक्सटेंशन को रीफ्रेश और लॉन्च करें, और रंग परिवर्तन देखें। क्या यह गलत काम चलाने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
|
||||
|
||||
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और इस बारे में अधिक जानकारी प्राप्त की है कि ब्राउज़र कैसे काम करता है और इसके प्रदर्शन को कैसे प्रोफाइल करता है।
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
कुछ ओपन सोर्स वेब साइटों की जांच करें जो बहुत पहले से हैं, और, उनके GitHub इतिहास के आधार पर, देखें कि क्या आप यह निर्धारित कर सकते हैं कि प्रदर्शन के लिए वे वर्षों में कैसे अनुकूलित किए गए थे, यदि बिल्कुल। सबसे आम दर्द बिंदु क्या है?
|
||||
|
||||
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
|
||||
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
[प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें
|
||||
|
||||
कुछ ऐसे तरीकों की जाँच करें जो ब्राउज़र अपने वेब टूल में प्रदर्शन टैब के माध्यम से वेब प्रदर्शन को गेज करते हैं। क्या आपको कोई बड़ा अंतर लगता है?
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[प्रदर्शन के लिए एक साइट का विश्लेषण करें](assignment.hi.md)
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
# Analyseer een site op prestaties
|
||||
|
||||
Geef een gedetailleerd rapport van een website, met de gebieden waar de prestaties problematisch zijn. Analyseer waarom de site traag is en wat u zou kunnen doen om deze te versnellen. Vertrouw niet alleen op de browsertools, maar doe wat onderzoek naar andere tools die u kunnen helpen bij uw rapportage
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Er wordt een rapport gepresenteerd met details die niet alleen uit browsertools zijn gehaald, maar ook uit tools van derden, indien beschikbaar | Er wordt een basisrapport gepresenteerd | Er wordt een minimaal rapport gepresenteerd |
|
||||
@ -0,0 +1,9 @@
|
||||
# 分析網頁效能
|
||||
|
||||
請提供一份詳細的報告，點出一個網頁效能上的問題點。分析網頁緩慢的原因並提供改善它的方案。不要只依賴瀏覽器工具，做一點研究尋找更多幫助你的工具。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | ---------------------------------- | -------------- | ------------ |
|
||||
| | 詳細的報告包括非瀏覽器的第三方工具 | 呈現出標準報告 | 報告內容有限 |
|
||||
@ -0,0 +1,28 @@
|
||||
# Een browserextensie bouwen
|
||||
|
||||
Het bouwen van browserextensies is een leuke en interessante manier om na te denken over de prestaties van uw apps terwijl u een ander type webitem bouwt. Deze module bevat lessen over hoe browsers werken en hoe u een browserextensie implementeert, hoe u een formulier bouwt, een API aanroept en lokale opslag gebruikt, en hoe u de prestaties van uw website peilt en deze verbetert.
|
||||
|
||||
U bouwt een browserextensie die werkt op Edge, Chrome en Firefox. Deze extensie, die lijkt op een mini-website die is afgestemd op een zeer specifieke taak, controleert de [C02 Signal API](https://www.co2signal.com) voor het elektriciteitsverbruik en de koolstofintensiteit van een bepaalde regio en geeft een lezing over de ecologische voetafdruk van de regio.
|
||||
|
||||
Deze extensie kan door een gebruiker ad-hoc worden genoemd zodra een API-sleutel en regiocode in een formulier zijn ingevoerd om het lokale elektriciteitsverbruik te bepalen en daardoor gegevens te bieden die de elektriciteitsbeslissingen van een gebruiker kunnen beïnvloeden. Het kan bijvoorbeeld de voorkeur hebben om het gebruik van een wasdroger (een koolstofintensieve activiteit) uit te stellen tijdens een periode van hoog elektriciteitsverbruik in uw regio.
|
||||
|
||||
### Onderwerpen
|
||||
|
||||
1. [Over de browser](../1-about-browsers/translations/README.nl.md)
|
||||
2. [Formulieren en lokale opslag](../2-forms-browsers-local-storage/translations/README.nl.md)
|
||||
3. [Achtergrondtaken en prestaties](../3-background-tasks-and-performance/translations/README.nl.md)
|
||||
|
||||
### Credits
|
||||
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
Het idee voor deze web-koolstoftrigger werd aangedragen door Asim Hussain, hoofd bij Microsoft van het Green Cloud Advocacy-team en auteur van de [Green Principles](https://principles.green/). Het was oorspronkelijk een [websiteproject](https://github.com/jlooper/green).
|
||||
|
||||
De structuur van de browserextensie werd beïnvloed door [de COVID-extensie van Adebola Adeniran](https://github.com/onedebos/covtension).
|
||||
|
||||
Het concept achter het 'punt'-pictogramsysteem werd gesuggereerd door de pictogramstructuur van de [Energy Lollipop](https://energylollipop.com/) browserextensie voor Californische emissies.
|
||||
|
||||
Deze lessen zijn geschreven met ♥ door [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
Loading…
Reference in new issue