localizeflow[bot]
4 months ago
parent
ead445fa2c
commit
4967802566
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
|
||||
"translation_date": "2026-01-08T20:38:50+00:00",
|
||||
"source_file": "9-chat-project/solution/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಪರಿಹಾರವನ್ನು چلائیں
|
||||
|
||||
1. [backend](./backend/README.md) ಪ್ರಾರಂಭಿಸಿ
|
||||
1. ಈಗ [frontend](./frontend/README.md) ಪ್ರಾರಂಭಿಸಿ
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಅಸ್ವೀಕರಣ**:
|
||||
ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯನ್ನು ಪಡೆಯಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಮೀಕ್ಷಿತತೆಗಳು ಇರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆನ್ನು ಅಧಿಕಾರಿಕ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರಿತುಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ವಿಭ್ರಮಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರು ಅನೇಕರಾಗಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,19 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
|
||||
"translation_date": "2026-01-08T20:44:52+00:00",
|
||||
"source_file": "9-chat-project/solution/backend/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
ನಿಮ್ಮ ರನ್ಟೈಮ್ ಆಯ್ಕೆಮಾಡಿ
|
||||
|
||||
- [Python](./python/README.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಅತ್ಯಾವಶ್ಯಕ ಸೂಚನೆ**:
|
||||
ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯತ್ತ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸೂಕ್ತತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿರುವುದೇ ಅಧಿಕೃತ ವನರ್ಕವಾಗಿ ಪರಿಗಣಿಸಲು ಅಂತಿರಬೇಕು. ಬಹುಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಹುಡುಕಾಟಗಳು ಅಥವಾ ಅರ್ಥಪರ್ಯಾಯತಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
|
||||
"translation_date": "2026-01-08T20:46:04+00:00",
|
||||
"source_file": "9-chat-project/solution/backend/python/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಕೋಡ್ ಚಾಲನೆ
|
||||
|
||||
## ಸಜ್ಜಿನೋಕೊಳ್ಳು
|
||||
|
||||
ವರ್ಚ್ಯುಯಲ್ ಪರಿಸರವನ್ನು ರಚಿಸಿ
|
||||
|
||||
```sh
|
||||
python -m venv venv
|
||||
source ./venv/bin/activate
|
||||
```
|
||||
|
||||
## ಅವಶ್ಯಕತೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ
|
||||
|
||||
```sh
|
||||
pip install openai fastapi uvicorn python-dotenv
|
||||
```
|
||||
|
||||
## API ಅನ್ನು ಚಾಲನೆ ಮಾಡಿ
|
||||
|
||||
```sh
|
||||
# ವಿಧಾನ 1: ನೇರ ಕಾರ್ಯನ್ವಯಿಕೆ
|
||||
python api.py
|
||||
|
||||
# ವಿಧಾನ 2: ಉವಿಕಾರ್ನ್ ಬಳಸುತ್ತಿರುವದು
|
||||
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
||||
```
|
||||
|
||||
## API ಅನ್ನು ಪರೀಕ್ಷಿಸಿ
|
||||
|
||||
ಅಂತರಕ್ರಮಕಾರಿ API ಡಾಕ್ಯುಮೆಂಟೇಶನ್ಗೆ ಭೇಟಿ ನೀಡಿ: `http://localhost:5000/docs`
|
||||
|
||||
## ಮುಂಭಾಗವನ್ನು ಚಾಲನೆ ಮಾಡಿ
|
||||
|
||||
ನೀವು ಮುಂಭಾಗ ಫೋಲ್ಡರ್ನಲ್ಲಿ ನಿಲ್ಲುವಿಕೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
|
||||
|
||||
*app.js* ಅನ್ನು ಹುಡುಕಿ, `BASE_URL` ಅನ್ನು ನಿಮ್ಮ ಬ್ಯಾಕ್ಎಂಡ್ URL ಗೆ ಬದಲಾಯಿಸಿ
|
||||
|
||||
ಚಿತ್ರಣ ಮಾಡಿ
|
||||
|
||||
```
|
||||
npx http-server -p 8000
|
||||
```
|
||||
|
||||
ಚಾಟ್ನಲ್ಲಿ ಸಂದೇಶವನ್ನು ಲಿಖಿಸಿ ಪ್ರಯತ್ನಿಸಿ, ನೀವು ಪ್ರತಿಕ್ರಿಯೆ ನೋಡಬೇಕು (ನೀವು ಇದನ್ನು Codespace ನಲ್ಲಿ ಚಾಲನೆ ಮಾಡುತ್ತಿದ್ದೀರಾ ಅಥವಾ ಪ್ರವೇಶ ಟೋಕನ್ ಅನ್ನು ಸಜ್ಜುಗೊಳಿಸಿದ್ದೀರಾ ಎಂಬುದು ನಿರ್ಧಾರವಾಗುತ್ತದೆ).
|
||||
|
||||
## ಪ್ರವೇಶ ಟೋಕನ್ ಅನ್ನು ಸಜ್ಜುಗೊಳಿಸಿ (ನೀವು ಇದನ್ನು Codespace ನಲ್ಲಿ ಚಾಲನೆ ಮಾಡದಿದ್ದರೆ)
|
||||
|
||||
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) ಅನ್ನು ನೋಡಿ
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಎಚ್ಚರಿಕೆ**:
|
||||
ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ದಾಖಲೆವೇ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರವನ್ನು ಬಳಸುವಲ್ಲಿ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,23 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
|
||||
"translation_date": "2026-01-08T20:44:08+00:00",
|
||||
"source_file": "9-chat-project/solution/frontend/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಕೋಡ್ ಅನ್ನು ಚಲಾಯಿಸಿ
|
||||
|
||||
```sh
|
||||
npx http-server -p 3000
|
||||
```
|
||||
|
||||
`app.js` ನಲ್ಲಿ `BASE_URL` ಅನ್ನು ಹುಡುಕಿ ಮತ್ತು ಅದನ್ನು ಬ್ಯಾಕೆಂಡ್ URL ಗೆ ಹೊಂದುವಂತೆ ಬದಲಾಯಿಸಿ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಅस्वೀಕರಣ**:
|
||||
ಈ ದಸ್ತಾವೇಜು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಖಚಿತತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರದಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಸತ್ಯಾಪಿತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಮರುಳಿಕೆಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b0a9b4cccd918195f58224d5793da1a6",
|
||||
"translation_date": "2026-01-08T10:34:48+00:00",
|
||||
"source_file": "CODE_OF_CONDUCT.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಮೈಕ್ರೋಸಾಫ್ಟ್ ಓಪನ್ ಸೋರ್ಸ್ ನಡವಳಿಕೆ ನಿಯಮಾವಳಿ
|
||||
|
||||
ಈ ಪ್ರಾಜೆಕ್ಟ್ [ಮೈಕ್ರೋಸಾಫ್ಟ್ ಓಪನ್ ಸೋರ್ಸ್ ನಡವಳಿಕೆ ನಿಯಮಾವಳಿ](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) ಅನ್ನು ಅಳವಡಿಸಿಕೊಂಡಿದೆ.
|
||||
|
||||
ಸಂಪನ್ಮೂಲಗಳು:
|
||||
|
||||
- [ಮೈಕ್ರೋಸಾಫ್ಟ್ ಓಪನ್ ಸೋರ್ಸ್ ನಡವಳಿಕೆ ನಿಯಮಾವಳಿ](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [ಮೈಕ್ರೋಸಾಫ್ಟ್ ನಡವಳಿ ನಿಯಮಗಳ ಆಗಾಗ್ಗೆ ಕೇಳುವ ಪ್ರಶ್ನೆಗಳು (FAQ)](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
|
||||
- ಪ್ರಶ್ನೆಗಳು ಅಥವಾ ಚಿಂತೆಗಳಿದ್ದಲ್ಲಿ [opencode@microsoft.com](mailto:opencode@microsoft.com) ಸಂಪರ್ಕಿಸಿ
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ತ್ಯಾಜ್ಯ**:
|
||||
ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವದಲ್ಲೇ ದಸ್ತಾವೇಜನ್ನು ಪ್ರಾಮಾಣಿಕ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವಪೂರ್ಣ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಸೂಚಿಸಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಸಂಭವಿಸುವ ಭ್ರಮೆ ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳನ್ನು ನಾವು ಜವಾಬ್ದಾರಿಯಾಗಿರಲಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "777400e9f0336c7ee2f9a1200a88478f",
|
||||
"translation_date": "2026-01-08T10:14:42+00:00",
|
||||
"source_file": "CONTRIBUTING.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಕೊಡುಗೆ
|
||||
|
||||
ಈ ಯೋಜನೆ ಕೊಡುಗೆಗಳು ಮತ್ತು ಸೂಚನೆಗಳನ್ನು ಸ್ವಾಗತಿಸುತ್ತದೆ. ಹೆಚ್ಚಿನ ಕೊಡುಗೆಗಳಿಗೆ ನೀವು
|
||||
ನೀವು ಕೊಡುಗೆ ನೀಡಲು ಹಕ್ಕು ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ವಾಸ್ತವವಾಗಿ ನಮ್ಮಿಗೋ ಅಂದಾಯಿಸಲು ಅವಶ್ಯಕವಾಗಿರುವದೆ ಎಂದು ಘೋಷಿಸುವ ಕೊಡುಗೆದಾರರ ಪರವಾನಗಿ ಒಪ್ಪಂದ (CLA) ಅನ್ನು ಒಪ್ಪಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗೆ ಭೇಟಿ ನೀಡಿ
|
||||
[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
ನೀವು ಒಂದು ಪುಲ್ ವಿನಂತಿಯನ್ನು ಸಲ್ಲಿಸಿದಾಗ, CLA-ಬಾಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನೀವು CLA ಒದಗಿಸಬೇಕೇ ಇಲ್ಲವೇ ಎಂದು ನಿರ್ಧರಿಸಿ PR ಅನ್ನು ಸರಿಯಾಗಿ ಅಲಂಕರಿಸಲಿದೆ (ಉದಾ: ಲೇಬಲ್, ಕಾಮೆಂಟ್). ಬಾಟ್ ಒದಗಿಸುವ ಸೂಚನೆಗಳನ್ನು ಸರಳವಾಗಿ ಅನುಸರಿಸಿ. ನಮ್ಮ CLA ವನ್ನು ಬಳಸುವ ಎಲ್ಲಾ ಸಂಗ್ರಹಾಲಯಗಳಲ್ಲಿ ನೀವು ಇದನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ನಾವು ನಿಮ್ಮ ವಿನಂತಿಯನ್ನು ಉತ್ತಮವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನೀವು ಏಕೆ ಆ ಬದಲಾವಣೆಯನ್ನು ಮಾಡಿದ್ದಾರೆಂದು ನಮಗೆ ಹೇಳಲು ಸಹ ಪ್ರಯತ್ನಿಸಿ.
|
||||
|
||||
ಈ ಯೋಜನೆ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) ಅನ್ನು ಅಂಗೀಕರಿಸಿದೆ.
|
||||
ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗೆ [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) ನೋಡಿ
|
||||
ಅಥವಾ ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಪ್ರಶ್ನೆಗಳು ಅಥವಾ ಟಿಪ್ಪಣಿಗಳಿಗೆ [opencode@microsoft.com](mailto:opencode@microsoft.com) ಸಂಪರ್ಕಿಸಿ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಅತ್ಯಾವಶ್ಯಕ ನೋಟ್**:
|
||||
ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿಕೊಂಡು ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಮಗೆ ಶುದ್ದತೆಗಾಗಿ ಪ್ರಚಾರವಿದ್ದರೂ, ದಯವಿಟ್ಟು ಗಮನವಿರಲಿ, ಸ್ವಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದು. ಮೂಲ ಭಾಷೆಯ ತಲುಪಿದ ದಾಖಲೆ ಹಕ್ಕಿನ ಮೂಲವಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯ ಕಾರಣದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಸುದ್ದಿ Ош್ಠು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,144 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "5cf5e1ed51455fefed4895fcc4d6ba2a",
|
||||
"translation_date": "2026-01-08T10:48:32+00:00",
|
||||
"source_file": "Git-Basics/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
## ವೆಬ್-ಡೆವ್ ಆರಂಭಿಕರಿಗಾಗಿ GIT ಮೂಲಭೂತಗಳು👶
|
||||
|
||||
|
||||
## `Git` ಎಂದರೆ ಏನು?
|
||||
1. Git ಒಂದು ಹಂಚಿಕೆಗೊಳಿಸಿದ ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆ.
|
||||
2. ಸಂಪೂರ್ಣ ಕೋಡ್ಬೇಸ್ ಮತ್ತು ಇತಿಹಾಸವು ಪ್ರತಿಯೊಬ್ಬ ಡೆವಲಪರರ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ಲಭ್ಯವಿದ್ದು,
|
||||
ಇದು ಸುಲಭವಾಗಿ ಶಾಖೆಯನ್ನು ಮತ್ತು ಮಿಶ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
|
||||
3. ಇದು ಕಂಪ್ಯೂಟರ್ ಫೈಲ್ಗಳಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಯಾಗಿ (VCS) ಬಳಸಲಾಗುತ್ತದೆ.
|
||||
|
||||
* ಹಂಚಿಕೆಗೊಳಿಸಿದ ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ
|
||||
* ಅನೇಕ ಡೆವಲಪರ್ಗಳ ಕೆಲಸವನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ
|
||||
* ಯಾರು ಯಾವ ಬದಲಾವಣೆಗಳನ್ನು ಮತ್ತು ಯಾವಾಗ ಮಾಡಿದ್ದಾರೆ
|
||||
* ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಹಿಂದಕ್ಕೆ ಹೋಗಲು
|
||||
* ಸ್ಥಳೀಯ ಮತ್ತು ದೂರದ ರೆಪೋಗಳು
|
||||
|
||||
## GIT ಯೋಗ್ಯತೆಗಳು
|
||||
* ಕೋಡ್ ಇತಿಹಾಸವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ
|
||||
* ನಿಮ್ಮ ಫೈಲ್ಗಳ "ಸ್ನ್ಯಾಪ್ಶಾಟ್"ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ
|
||||
* ನೀವು "ಕಮಿಟ್" ಮಾಡಿಸುವ ಮೂಲಕ ಯಾವಾಗ ಸ್ನ್ಯಾಪ್ಶಾಟ್ ತೆಗೆದುಕೊಳ್ಳಬೇಕೆಂದು ನಿರ್ಧರಿಸುತ್ತೀರಿ
|
||||
* ನೀವು ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಯಾವುದೇ ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗೆ ಭೇಟಿ ನೀಡಬಹುದು
|
||||
* ನೀವು ಕಮಿಟ್ ಮಾಡುವ ಮೊದಲು ಫೈಲ್ಗಳನ್ನು ಹಂತದಲ್ಲಿ ಇಡಬಹುದು
|
||||
|
||||
### Git ಮತ್ತು GitHub ನಡುವೆ ವ್ಯತ್ಯಾಸ
|
||||
|
||||
| Git | GitHub |
|
||||
| ------- | ----------- |
|
||||
| Git ಒಂದು ಸಾಫ್ಟ್ವೇರ್ | GitHub ಒಂದು ಕ್ಲೌಡ್ ಸೇವೆ |
|
||||
| Git ವ್ಯವಸ್ಥೆಯ ಮೇಲೆ ಸ್ಥಳೀಯವಾಗಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ | GitHub ವೆಬ್ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ |
|
||||
| ಇದು ಕಮಾಂಡ್-ಲೈನ್ ಸಾಧನ | ಇದು ಗ್ರಾಫಿಕಲ್ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ |
|
||||
| Git ಲಿನಕ್ಸ್ ಮೂಲಕ ನಿರ್ವಹಿಸಲಾಗಿದೆ | GitHub ಮೈಕ್ರೋಸಾಫ್ಟ್ ಮೂಲಕ ನಿರ್ವಹಣೆ |
|
||||
| ಇದು ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ಮತ್ತು ಕೋಡ್ ಹಂಚಿಕೆಗೆ ಕೇಂದ್ರೀಕರಿಸಿದೆ | ಇದು ಕೇಂದ್ರಿತ ಮೂಲ ಕೋಡ್ ಹೋಸ್ಟಿಂಗ್ಗೆ ಕೇಂದ್ರೀಕರಿಸಿದೆ |
|
||||
| Git ತೆರವುಮಾಡಲ್ಪಟ್ಟ ಮೂಲಸೋರ್ಸ್ ಲೈಸೆನ್ಸ್ ಹೊಂದಿದೆ | GitHub ಉಚಿತ-ತಲೆ ಮತ್ತು ಬಳಕೆಗಾಗಿ ಪಾವತಿ ಆಯ್ಕೆಯನ್ನು ಒಳಗೊಂಡಿದೆ |
|
||||
| Git 2005 ರಲ್ಲಿ ಬಿಡುಗಡೆ | GitHub 2008 ರಲ್ಲಿ ಬಿಡುಗಡೆ |
|
||||
|
||||
## GIT ಸ್ಥಾಪನೆ
|
||||
* ಲಿನಕ್ಸ್(Debian)
|
||||
`$sudo apt-get install git`
|
||||
* ಲಿನಕ್ಸ್(Fedora)
|
||||
`$sudo yum install git`
|
||||
* Macಗಾಗಿ [ಡೌನ್ಲೋಡ್](http://git-scm.com/download/mac)
|
||||
* ವಿಂಡೋಸ್ಗೆ [ಡೌನ್ಲೋಡ್](http://git-scm.com/download/win)
|
||||
|
||||
|
||||
### ಸ್ಥಾಪನೆ ಪ್ರಕ್ರಿಯೆಯ ಹಂತಗಳು:
|
||||
1. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190359823-e421b976-515a-4565-990d-2f2e4e62977a.png"/>
|
||||
2. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360530-a7bfa681-47f4-4859-9b8a-4120e0cad348.png"/>
|
||||
3. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360760-30db7768-19e0-4848-a99d-a6c955e041e2.png"/>
|
||||
4. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360896-473e1e54-f083-4b5c-a5f0-539f70469142.png"/>
|
||||
5. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361144-bc670a2b-b776-4867-9785-7b509d416fbb.png"/>
|
||||
6. ನಂತರ ಮುಂದುವರಿದು ಮುಂದಿನ > ಮುಂದಿನ > ಮುಂದಿನ > <b>ಸ್ಥಾಪಿಸಿ</b>
|
||||
7. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361548-4b700d85-c7d5-4d26-90e7-e5cc3ce24311.png"/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### ಸ್ಥಾಪನೆಯ ನಂತರ git ಬಶ್ ಬಳಸಿ git ಅನ್ನು ಸಂರಚಿಸುವುದು
|
||||
1. `git config --global user.name 'ನಿಮ್ಮಹೆಸರು'`
|
||||
2. `git config --global user.email 'ನಿಮ್ಮಇಮೇಲ್'`
|
||||
___
|
||||
|
||||
|
||||
|
||||
## Git ಕಮಾಂಡ್ಗಳು
|
||||
___
|
||||
|
||||
### ಯೋಜನೆಗಳನ್ನು ಪಡೆಯುವುದು ಮತ್ತು ರಚಿಸುವುದು
|
||||
|
||||
| ಕಮಾಂಡ್ | ವಿವರಣೆ |
|
||||
| ------- | ----------- |
|
||||
| `git init` | ಸ್ಥಳೀಯ Git ರೆಪೋವನ್ನು ಪ್ರಾರಂಭಿಸಿ |
|
||||
| `git clone ssh://git@github.com/[username]/[repository-name].git` | ದೂರದ ರೆಪೋದಿಂದ ಸ್ಥಳೀಯ ಪ್ರತಿಯನ್ನು ರಚಿಸಿ |
|
||||
|
||||
### ಮೂಲ ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗಳು
|
||||
|
||||
| ಕಮಾಂಡ್ | ವಿವರಣೆ |
|
||||
| ------- | ----------- |
|
||||
| `git status` | ಸ್ಥಿತಿ ಪರಿಶೀಲಿಸಿ |
|
||||
| `git add [file-name.txt]` | ಹಂತದ ಪ್ರದೇಶಕ್ಕೆ ಫೈಲ್ ಸೇರ್ಪಡೆ ಮಾಡಿ |
|
||||
| `git add -A` | ಎಲ್ಲಾ ಹೊಸ ಮತ್ತು ಬದಲಾಗಿದ ಫೈಲ್ಗಳನ್ನು ಹಂತದ ಪ್ರದೇಶಕ್ಕೆ ಸೇರ್ಪಡೆ ಮಾಡಿ |
|
||||
| `git commit -m "[commit message]"` | ಬದಲಾವಣೆಗಳನ್ನು ಕಮಿಟ್ ಮಾಡಿ |
|
||||
| `git rm -r [file-name.txt]` | ಫೈಲ್ (ಅಥವಾ ಫೋಲ್ಡರ್) ತೆಗೆದುಹಾಕಿ |
|
||||
| `git push` | ರಿಮೋಟ್ ರೆಪೋಗೆ ಪುಷ್ ಮಾಡಿ |
|
||||
| `git pull` | ರಿಮೋಟ್ ರೆಪೋದಿಂದ تازಾ ಬದಲಾವಣೆಗಳನ್ನು ಪಲ್ಲು ಮಾಡಿ |
|
||||
|
||||
### ಶಾಖೆಗಳು ಮತ್ತು ಮಿಶ್ರಣ
|
||||
|
||||
| ಕಮಾಂಡ್ | ವಿವರಣೆ |
|
||||
| ------- | ----------- |
|
||||
| `git branch` | ಶಾಖೆಗಳ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸಿ (ಸ್ಟಾರ್ ಪ್ರಸ್ತುತ ಶಾಖೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ) |
|
||||
| `git branch -a` | ಎಲ್ಲಾ ಶಾಖೆಗಳನ್ನು ಪಟ್ಟಿಮಾಡಿ (ಸ್ಥಳೀಯ ಮತ್ತು ರಿಮೋಟ್) |
|
||||
| `git branch [branch name]` | ಹೊಸ ಶಾಖೆ ರಚಿಸಿ |
|
||||
| `git branch -D [branch name]` | ಶಾಖೆ ಅಳించು |
|
||||
| `git push origin --delete [branch name]` | ರಿಮೋಟ್ ಶಾಖೆಯನ್ನು ಅಳಿಸಿ |
|
||||
| `git checkout -b [branch name]` | ಹೊಸ ಶಾಖೆ ರಚಿಸಿ ಮತ್ತು ಅದಕ್ಕೆ ಬದಲಾಯಿಸಿ |
|
||||
| `git checkout -b [branch name] origin/[branch name]` | ರಿಮೋಟ್ ಶಾಖೆಯನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ ಮತ್ತು ಅದಕ್ಕೆ ಬದಲಾಯಿಸಿ |
|
||||
| `git branch -m [old branch name] [new branch name]` | ಸ್ಥಳೀಯ ಶಾಖೆಗೆ ಹೊಸ ಹೆಸರು ನೀಡಿ |
|
||||
| `git checkout [branch name]` | ಶಾಖೆಗೆ ಬದಲಾಯಿಸಿ |
|
||||
| `git checkout -` | ಕೊನೆಯದಾಗಿ ಪರಿಶೀಲಿಸಿದ ಶಾಖೆಗೆ ಬದಲಾಯಿಸಿ |
|
||||
| `git checkout -- [file-name.txt]` | ಫೈಲ್ಗೆ ಮಾಡಲಾದ ಬದಲಾವಣೆಗಳನ್ನು ತಿರಸ್ಕರಿಸಿ |
|
||||
| `git merge [branch name]` | ಶಾಖೆಯನ್ನು ಸಕ್ರಿಯ ಶಾಖೆಗೆ ಮಿಶ್ರಣ ಮಾಡಿ |
|
||||
| `git merge [source branch] [target branch]` | ಶಾಖೆಯನ್ನು ಗುರಿ ಶಾಖೆಗೆ ಮಿಶ್ರಣ ಮಾಡಿ |
|
||||
| `git stash` | ಕೆಟ್ಟ ಕಾರ್ಯಕ್ಷೇತ್ರದಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಸಾಂಗ್ರಹಿಸಿ |
|
||||
| `git stash clear` | ಎಲ್ಲಾ ಸಾಂಗ್ರಹಿಸಿದ ಪ್ರವೇಶಗಳನ್ನು ತೆಗೆದುಹಾಕಿ |
|
||||
|
||||
### ಯೋಜನೆ ಹಂಚಿಕೆ ಮತ್ತು ನವೀಕರಣ
|
||||
|
||||
| ಕಮಾಂಡ್ | ವಿವರಣೆ |
|
||||
| ------- | ----------- |
|
||||
| `git push origin [branch name]` | ರಿಮೋಟ್ ರೆಪೋಗೆ ಶಾಖೆಯನ್ನು ಪುಷ್ ಮಾಡಿ |
|
||||
| `git push -u origin [branch name]` | ಬದಲಾವಣೆಗಳನ್ನು ರಿಮೋಟ್ ರೆಪೋಗೆ ಪುಷ್ ಮಾಡಿ (ಮತ್ತು ಶಾಖೆಯನ್ನು ಸ್ಮರಿಸಿ) |
|
||||
| `git push` | ಬದಲಾವಣೆಗಳನ್ನು ರಿಮೋಟ್ ರೆಪೋಗೆ ಪುಷ್ ಮಾಡಿ (ಸ್ಮರಿಸಲಾದ ಶಾಖೆ) |
|
||||
| `git push origin --delete [branch name]` | ರಿಮೋಟ್ ಶಾಖೆಯನ್ನು ಅಳಿಸಿ |
|
||||
| `git pull` | ಸ್ಥಳೀಯ ರೆಪೋವನ್ನು ಅತ್ಯಂತ ಹೊಸ ಕಮಿಟ್ಗೆ ನವೀಕರಿಸಿ |
|
||||
| `git pull origin [branch name]` | ರಿಮೋಟ್ ರೆಪೋದಿಂದ ಬದಲಾವಣೆಗಳನ್ನು ಪಲ್ಲು ಮಾಡಿ |
|
||||
| `git remote add origin ssh://git@github.com/[username]/[repository-name].git` | ರಿಮೋಟ್ ರೆಪೋವನ್ನು ಸೇರಿಸಿ |
|
||||
| `git remote set-url origin ssh://git@github.com/[username]/[repository-name].git` | ರೆಪೋಗೆ SSH ಮೂಲಕ ಆಧಾರ ಶಾಖೆಯನ್ನು ಹೊಂದಿಸಿ |
|
||||
|
||||
### ಪರಿಶೀಲನೆ ಮತ್ತು ಹೋಲಿಕೆ
|
||||
|
||||
| ಕಮಾಂಡ್ | ವಿವರಣೆ |
|
||||
| ------- | ----------- |
|
||||
| `git log` | ಬದಲಾವಣೆಗಳನ್ನು ವೀಕ್ಷಿಸಿ |
|
||||
| `git log --summary` | ಬದಲಾವಣೆಗಳನ್ನು ವಿವರವಾಗಿ ವೀಕ್ಷಿಸಿ |
|
||||
| `git log --oneline` | ಬದಲಾವಣೆಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ವೀಕ್ಷಿಸಿ |
|
||||
| `git diff [source branch] [target branch]` | ಮಿಶ್ರಣವಾಗುವ ಮೊದಲು ಬದಲಾವಣೆಗಳ ಪೂರ್ವಾವಲೋಕನ |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ನೆನೆಪಿಸು:**
|
||||
ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಳತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲದ ದಸ್ತಾವೇಜ್ ಅದರ ಸ್ವಭಾವಿಕ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಸಾರಿಯಾದಂತೆ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸದರಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ pstmt್್ ಮೋಸಗಳನ್ನು ನಾವು ಹೊಣೆ ಹೊತ್ತುಕೊಳ್ಳುವುದಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,278 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
|
||||
"translation_date": "2026-01-08T10:42:11+00:00",
|
||||
"source_file": "README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
# ಪ್ರಾರಂಭಿಕರಿಗಾಗಿ ವೆಬ್ ಅಭಿವೃದ್ಧಿ - ಒಂದು ಪಠ್ಯಕ್ರಮ
|
||||
|
||||
Microsoft Cloud Advocates ರ 12-ವಾರಗಳ ವ್ಯಾಪಕ ಕೋರ್ಸ್ ಮೂಲಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಮೂಲತತ್ತ್ವಗಳನ್ನು ಕಲಿಯಿರಿ. 24 ಪಾಠಗಳ ಪ್ರತಿಯೊಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, CSS, ಮತ್ತು HTML ಗೆ ಕೈಗೊಳ್ಳುವ ಪ್ರಾಜೆಕ್ಟ್ಗಳ ಮೂಲಕ ಮುಳುಗಿತ್ತುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಟೆರಾರಿಯಂಗಳು, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳು, ಮತ್ತು ಅಗಲಿಕೆ ಆಟಗಳು. ಪ್ರಶ್ನೆಮಾರು, ಚರ್ಚೆಗಳು ಮತ್ತು ಉಪಯುಕ್ತ ಕಾರ್ಯಗಳನ್ನು ಮೂಲಕ ಭಾಗವಹಿಸಿ. ನಿಮ್ಮ ಕೌಶಲ್ಯಗಳನ್ನು ಸುಧಾರಿಸಿ ಮತ್ತು ನಮ್ಮ ಪರಿಣಾಮಕಾರಿ ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರಿತ ಪಾಠಶಾಲೆಯ ಮೂಲಕ ನಿಮ್ಮ ಜ್ಞಾನವನ್ನು ಹೆಚ್ಚು ಗಟ್ಟಿಗೊಳಿಸಿ. ನಿಮ್ಮ ಕೋಡಿಂಗ್ ಪ್ರಯಾಣವನ್ನು ಇಂದು ಪ್ರಾರಂಭಿಸಿ!
|
||||
|
||||
Azure AI Foundry Discord ಸಮುದಾಯವನ್ನು ಸೇರಿ
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
ಈ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರಾರಂಭಿಸಲು ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:
|
||||
1. **ಪ್ರತಿಯನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ**: ಕ್ಲಿಕ್ ಮಾಡಿ [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **ಪ್ರತಿಯನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Azure AI Foundry Discord ಗೆ ಸೇರಿ, ಪರಿಣಿತರ ಮತ್ತು ಸಹ ಡೆವಲಪರ್ಗಳನ್ನು ಭೇಟಿ ಮಾಡಿ**](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
### 🌐 ಬಹुभಾಷಾ ಬೆಂಬಲ
|
||||
|
||||
#### GitHub ಕ್ರಿಯೆಯಿಂದ (ಸ್ವಯಂಚಾಲಿತ ಮತ್ತು ಯಾವಾಗಲೂ ನವೀಕೃತ) ಬೆಂಬಲಿತವಾಗಿದೆ
|
||||
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
|
||||
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](./README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
|
||||
|
||||
> **ಸ್ಥಳೀಯವಾಗಿ ಕ್ಲೋನ್ ಮಾಡಬೇಕೆಂದು ಇಚ್ಛಿಸುವಿರಾ?**
|
||||
|
||||
> ಈ ರೆಪೊಸಿಟರಿ 50+ ಭಾಷೆ ಅನುವಾದಗಳನ್ನು ಹೊಂದಿದ್ದು, ಡೌನ್ಲೋಡ್ ಗಾತ್ರವನ್ನು ಬಹಳ ಹೆಚ್ಚಿಸುತ್ತದೆ. ಅನುವಾದಗಳಿಲ್ಲದೆ ಕ್ಲೋನ್ ಮಾಡಲು ಸ್ಪಾರ್ಸ್ ಔಟ್ಚಾರ್ಟ್ ಬಳಸಿ:
|
||||
> ```bash
|
||||
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
> cd Web-Dev-For-Beginners
|
||||
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
|
||||
> ```
|
||||
> ಇದು课程 ಪೂರ್ಣಗೊಳಿಸಲು ಬೇಕಾದ ಎಲ್ಲವನ್ನು ಹೆಚ್ಚು ವೇಗದ ಡೌನ್ಲೋಡ್ ಜೊತೆಗೆ ನಿಮಗೆ ನೀಡುತ್ತದೆ.
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
|
||||
|
||||
**ನಿಮಗೆ ಹೆಚ್ಚುವರಿ ಅನುವಾದ ಭಾಷೆಗಳ ಬೆಂಬಲ ಬೇಕಾದರೆ ಅವುಗಳ ಪಟ್ಟಿ ಇಲ್ಲಿದೆ [ಇಲ್ಲಿ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
#### 🧑🎓 _ನೀವು ವಿದ್ಯಾರ್ಥಿ ಆಗಿದ್ದೀರಾ?_
|
||||
|
||||
[**ವಿದ್ಯಾರ್ಥಿ ಹಬ್ ಪುಟ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ಗೆ ಭೇಟಿ ನೀಡಿ, ಇಲ್ಲಿ ನೀವು ಪ್ರಾರಂಭಿಕ ಸಂಪನ್ಮೂಲಗಳು, ವಿದ್ಯಾರ್ಥಿ ಪ್ಯಾಕ್ಗಳು ಮತ್ತು ಉಚಿತ ಪ್ರಮಾಣಪತ್ರ ವೋಚರ್ ಪಡೆಯುವ ಪರಿಹಾರಗಳನ್ನು ಕಾಣುವಿರಿ. ಇದು ಪ್ರತಿ ತಿಂಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ನೀವು ಇಷ್ಟಪಟ್ಟು ಬುಕ್ಮಾರ್ಕ್ ಮಾಡಿ ಸಮಯಕಾಲದಿಂದ ಪರಿಶೀಲಿಸುವ ಪುಟ.
|
||||
|
||||
### 📣 ಘೋಷಣೆ - ಹೊಸ GitHub Copilot Agent ಮೋಡ್ ಸವಾಲುಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು!
|
||||
|
||||
ಹೊಸ ಸವಾಲು ಸೇರಿಸಲಾಗಿದೆ, ಬಹುಚಿತ್ತಗಳಲ್ಲಿ "GitHub Copilot Agent Challenge 🚀" ಹುಡುಕಿ. ಇದು GitHub Copilot ಮತ್ತು Agent ಮೋಡ್ ಬಳಸಿ ನಿಮಗಾಗಿ ಹೊಸ ಸವಾಲು. ನೀವು Agent ಮೋಡ್ ಮೊದಲು ಬಳಸದಿದ್ದರೆ, ಇದು ಕೇವಲ ಪಠ್ಯ ರಚಿಸುವುದರಲ್ಲಿ ಮಾತ್ರ ಅಲ್ಲ, ಕಡತಗಳನ್ನು ಸೃಜಿಸುವುದು ಮತ್ತು ಸಂಪಾದಿಸುವುದು, ಆಜ್ಞೆಗಳನ್ನು ಚಾಲನೆ ಮಾಡುವುದೂ ಸಹ ಸಾಧ್ಯ.
|
||||
|
||||
### 📣 ಘೋಷಣೆ - _ಜನರೇಟಿವ್ AI ಬಳಸಿ ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್_
|
||||
|
||||
ಹೊಸ AI ಸಹಾಯಕ ಪ್ರಾಜೆಕ್ಟ್ ಸೇರಿಸಲಾಗಿದೆ, ಇದನ್ನು ಪರಿಶೀಲಿಸಿ [project](./9-chat-project/README.md)
|
||||
|
||||
### 📣 ಘೋಷಣೆ - _ಜನರೇಟಿವ್ AI ಬಗ್ಗೆ ಹೊಸ ಪಠ್ಯಕ್ರಮ_ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೆ ಬಿಡುಗಡೆ ಆಗಿದೆ
|
||||
|
||||
ನಮ್ಮ ಹೊಸ ಜನರೇಟಿವ್ AI ಪಠ್ಯಕ್ರಮವನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳಬೇಡಿ!
|
||||
|
||||
ಪ್ರಾರಂಭಿಸಲು [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ಗೆ ಭೇಟಿ ನೀಡಿ!
|
||||
|
||||
|
||||
|
||||
- ಮೂಲಭೂತದಿಂದ RAG ವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಆವರಿಸುವ ಪಾಠಗಳು.
|
||||
- ಜನರೇಟಿವ್ AI ಮತ್ತು ನಮ್ಮ ಸಹಯೋಗಿ ಅಪ್ಲಿಕೇಶನ್ ಮೂಲಕ ಐತಿಹಾಸಿಕ ಪಾತ್ರಗಳೊಂದಿಗೆ ಸಂವಾದ.
|
||||
- ಮನರಂಜನೆ ಮತ್ತು ಆಕರ್ಷಕ ಕಥನ, ನೀವು ಕಾಲ ಯಾತ್ರೆಯಲ್ಲಿ ಹೋಗುತ್ತೀರಿ!
|
||||
|
||||
|
||||
|
||||
ಪ್ರತಿಪಾಠದಲ್ಲಿ ಪೂರ್ಣಗೊಳಿಸುವ ಅಸೈನ್ಮೆಂಟ್, ಜ್ಞಾನ ಪರಿಶೀಲನೆ ಮತ್ತು ಸವಾಲು ಇರುತ್ತದೆ, ಇವುಡಿ ಕಲಿಕೆಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತವೆ ಹೀಗೆ:
|
||||
- ಪ್ರಾಂಪ್ಟ್ ಮತ್ತು ಪ್ರಾಂಪ್ಟ್ ಇಂಜಿನಿಯರಿಂಗ್
|
||||
- ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರ ಆಪ್ ಸೃಷ್ಟಿ
|
||||
- ಹುಡುಕು ಆಪ್ ಗಳು
|
||||
|
||||
ಪ್ರಾರಂಭಿಸಲು [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) ಗೆ ಭೇಟಿ ನೀಡಿ!
|
||||
|
||||
|
||||
|
||||
## 🌱 ಪ್ರಾರಂಭಿಸುವುದು
|
||||
|
||||
> **ಶಿಕ್ಷಕರು**, ಈ ಪಠ್ಯಕ್ರಮವನ್ನು ಹೇಗೆ ಬಳಸಬಹುದೆಂದು ನಾವು [ಕೆಲವು ಸಲಹೆಗಳನ್ನು](for-teachers.md) ಒಳಗೊಂಡಿದ್ದೇವೆ. ನೀವು ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ದಯವಿಟ್ಟು ನಮ್ಮ [ಚರ್ಚಾ ವೇದಿಕೆಯಲ್ಲಿ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ಹಂಚಿಕೊಳ್ಳಿ!
|
||||
|
||||
**[ಕಲಿಯುವವರು](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ಪ್ರತಿಯೊಂದು ಪಾಠಕ್ಕೂ ಮುಂಚೆ್ರ ಲೆక్చರ್ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಮಾಡಿ, ನಂತರ ಉಪನ್ಯಾಸದ ವಸ್ತುವನ್ನು ಓದಿ, ವಿವಿಧ ಚಟುವಟಿಕೆಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ನಂತರದ ಲೆಕ್ಚರ್ ಪ್ರಶ್ನೋತ್ತರದಿಂದ ನಿಮ್ಮ ಅರ್ಥಮಾತುಗಾರಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ.
|
||||
|
||||
ನಿಮ್ಮ ಕಲಿಕೆಯ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು, ನಿಮ್ಮ ಸಹಪಾಠಿಗಳೊಂದಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ಗಳ ಮೇಲೆ ಒಟ್ಟಾಗಿ ಕೆಲಸ ಮಾಡಿ! ಚರ್ಚೆಗಳನ್ನು ನಮ್ಮ [ಚರ್ಚಾ ವೇದಿಕೆಯಲ್ಲಿ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ಪ್ರೋತ್ಸಾಹಿಸಲಾಗುತ್ತದೆ, ಇಲ್ಲಿ ನಮ್ಮ ಮಧ್ಯಸ್ಥರ ತಂಡ ನಿಮ್ಮ ಪ್ರಶ್ನೆಗಳಿಗೆ ಉತ್ತರಿಸಲು ಲಭ್ಯವಿದ್ದುಹುದು.
|
||||
|
||||
ನಿಮ್ಮ ಶಿಕ್ಷಣವನ್ನು ಇನ್ನಷ್ಟು ವಿಸ್ತರಿಸಲು, ಹೆಚ್ಚುವರಿ ಅಧ್ಯಯನ ವಸ್ತುಗಳಿಗಾಗಿ ನಾವು [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಸಲಹೆ ಮಾಡುತ್ತೇವೆ.
|
||||
|
||||
### 📋 ನಿಮ್ಮ ಪರಿಸರವನ್ನು ಹೊಂದಿಸುವುದು
|
||||
|
||||
ಈ ಪಠ್ಯಕ್ರಮವು ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಸಿದ್ಧಪಡಿಸಿದೆಯು! ನೀವು ಪ್ರಾರಂಭಿಸುವಾಗ, ನೀವು ಈ ಪಠ್ಯಕ್ರಮವನ್ನು [Codespace](https://github.com/features/codespaces/) (_ಬ್ರೌಸರ್ ಆಧಾರಿತ, ಯಾವುದೇ ಇನ್ಸ್ಟಾಲ್ ಅಗತ್ಯವಿಲ್ಲದ ಪರಿಸರ_), ಅಥವಾ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ರಂತಹ ಟೆಕ್ಸ್ಟ್ ಎಡಿಟರ್ ಬಳಸಿ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ಸ್ಥಳೀಯವಾಗಿ ಓಡಿಸಬಹುದು.
|
||||
|
||||
#### ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಯನ್ನು ಸೃಷ್ಟಿಸಿ
|
||||
ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಸುಲಭವಾಗಿ ಉಳಿಸಲು, ನಿಮ್ಮದೇ ಪ್ರತಿಯನ್ನು ರಚಿಸುವುದು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಇದಕ್ಕೆ, ಈ ಪೇಜಿನ ಮೇಲ್ಭಾಗದಲ್ಲಿರುವ **Use this template** ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ಇದು ನಿಮ್ಮ GitHub ಖಾತೆಯಲ್ಲಿ ಪಠ್ಯಕ್ರಮದ ನಕಲೊಂದಿಗಿನ ಹೊಸ ರೆಪೊಸಿಟರಿ ಸೃಷ್ಟಿಸುತ್ತದೆ.
|
||||
|
||||
ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:
|
||||
1. **ಪ್ರತಿಯನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ**: ಈ ಪುಟದ ಬಲ-ಮೇಲ್ಭಾಗದಲ್ಲಿರುವ "Fork" ಬಟನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.
|
||||
2. **ಪ್ರತಿಯನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
|
||||
#### Codespace ನಲ್ಲಿ ಪಠ್ಯಕ್ರಮವನ್ನು ಓಡಿಸುವುದು
|
||||
|
||||
ನೀವು ಸೃಷ್ಟಿಸಿದ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ, **Code** ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು **Open with Codespaces** ಆಯ್ಕೆಮಾಡಿ. ಇದು ನಿಮಗಾಗಿ ಹೊಸ Codespace ಸೃಷ್ಟಿಸುವುದು.
|
||||
|
||||
|
||||
|
||||
#### ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ಸ್ಥಳೀಯವಾಗಿ ಪಠ್ಯಕ್ರಮವನ್ನು ಓಡಿಸುವುದು
|
||||
|
||||
ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ಈ ಪಠ್ಯಕ್ರಮವನ್ನು ಓಡಿಸಲು, ನಿಮ್ಮ ಬಳಿ ಒಂದು ಟೆಕ್ಸ್ಟ್ ಎಡಿಟರ್, ಬ್ರೌಸರ್ ಮತ್ತು ಕಮಾಂಡ್ ಲೈನ್ ಸಾಧನ ಬೇಕು. ನಮ್ಮ ಮೊದಲ ಪಾಠ, [ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಮತ್ತು ಉಪಕರಣಗಳ ಪರಿಚಯ](../../1-getting-started-lessons/1-intro-to-programming-languages), ನಿಮಗೆ ಈ ಸಾಧನಗಳಲ್ಲಿ ವಿವಿಧ ಆಯ್ಕೆಗಳನ್ನು ನೀಡುತ್ತದೆ, ಯಾವುದು ನಿಮ್ಮಿಗೆ ಸೂಕ್ತ ಎಂಬುದನ್ನು ಆಯ್ಕೆಮಾಡಲು.
|
||||
|
||||
ನಮ್ಮ ಶಿಫಾರಸು [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ಅನ್ನು ಎಡಿಟರ್ ಆಗಿ ಬಳಸುವುದು, ಇದು ಒಳಗೊಂಡ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ಸಹ ಹೊಂದಿದೆ. ನೀವು Visual Studio Code ಅನ್ನು [ಇಲ್ಲಿ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ಡೌನ್ಲೋಡ್ ಮಾಡಬಹುದು.
|
||||
|
||||
1. ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಯನ್ನು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ಗೆ ಕ್ಲೋನ್ ಮಾಡಿ. ಇದಕ್ಕಾಗಿ **Code** ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು URL ನಕಲಿಸಿ:
|
||||
|
||||
[CodeSpace](./images/createcodespace.png)
|
||||
ಆಮೇಲೆ, [ವಿಜ್ಞಾಪನಾಪೂರ್ಣ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ಅನ್ನು [ವಿಜುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ಒಳಗೆ ತೆರೆಯಿರಿ ಮತ್ತು ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ, `<your-repository-url>` ಅನ್ನು ನೀವು appena ನಕಲಿಸಿದ URL ಮೂಲಕ ಬದಲಾಯಿಸಿ:
|
||||
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
```
|
||||
|
||||
2. ವಿಸುಯಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ನಲ್ಲಿ ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ. ನೀವು ಇದು **ಫೈಲ್** > **ಒಪನ್ ಫೋಲ್ಡರ್** ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ನೀವು appena ಕ್ಲೋನ್ ಮಾಡಿದ ಫೋಲ್ಡರ್ ಆಯ್ಕೆಮಾಡಿ ಮಾಡಬಹುದು.
|
||||
|
||||
|
||||
> ಶಿಫಾರಸು ಮಾಡಲಾದ ವಿಶುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ ವಿಸ್ತರಣೆಗಳು:
|
||||
>
|
||||
> * [ಲೈವ್ ಸರ್ವರ್](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - ವಿಶುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ ಒಳಗೆ HTML ಪುಟಗಳನ್ನು ಪೂರ್ವದರ್ಶನ ಮಾಡಲು
|
||||
> * [ಕೋಪಿಲಾಟ್](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ನಿಮಗೆ ವೇಗವಾಗಿ ಕೋಡ್ ಬರೆಯಲು ಸಹಾಯ ಮಾಡಲು
|
||||
|
||||
## 📂 ಪ್ರತಿ ಪಾಠದಲ್ಲಿ ಒಳಗೊಂಡಿದ್ದು:
|
||||
|
||||
- ಐಚ್ಛಿಕ ಸ್ಕೆಚ್ನೋಟ್
|
||||
- ಐಚ್ಛಿಕ ಪೂರಕ ವೀಡಿಯೋ
|
||||
- ಪಾಠಕ್ಕೂ ಮುನ್ನ ತಯಾರಿ ಚುಟುಕು ಪ್ರಶ್ನೆಗಳು
|
||||
- ಬರೆದಿದೆ ಪಾಠ
|
||||
- ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರಿತ ಪಾಠಗಳಿಗೆ, ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಹಂತ ಹಂತ ಮಾರ್ಗದರ್ಶಿಗಳು
|
||||
- ಜ್ಞಾನ ತಪಾಸಣೆಗಳು
|
||||
- ಒಂದು ಸವಾಲು
|
||||
- ಪೂರಕ ಓದು
|
||||
- ನಿಯೋಜನೆ
|
||||
- [ಪಾಠದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/)
|
||||
|
||||
> **ಪ್ರಶ್ನೋತ್ತರಗಳ ಕುರಿತಾಗಿ ಒಂದು ಟಿಪ್ಪಣಿ**: ಎಲ್ಲಾ ಪ್ರಶ್ನೋತ್ತರಗಳು Quiz-app ಫೋಲ್ಡರ್ನಲ್ಲಿ ಇರಾರು, ಮೂರು ಪ್ರಶ್ನೆಗಳ 48 ಒಟ್ಟು ಪ್ರಶ್ನೋತ್ತರಗಳು. ಅವು ಇಲ್ಲಿದೆ [ಇಲ್ಲಿ](https://ff-quizzes.netlify.app/web/) ನೀವು Quiz ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಅಥವಾ Azure ಗೆ ನಿಯೋಜಿಸಬಹುದು; `quiz-app` ಫೋಲ್ಡರ್ ನ ಸೂಚನೆಗಳನ್ನು ಅನುಸರಿಸಿ.
|
||||
|
||||
## 🗃️ ಪಾಠಗಳು
|
||||
|
||||
| | ಪ್ರಾಜೆಕ್ಟ್ ಹೆಸರು | ಕಲಿಸಲಾದ ಕಲ್ಪನೆಗಳು | ಕಲಿಕೆಯ ಗುರಿಗಳು | ಲಿಂಕ್ ಮಾಡಿದ ಪಾಠ | ಲೇಖಕ |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | ಪ್ರಾರಂಭಿಸಲು | ಕಾರ್ಯಕ್ರಮ ರಚನೆ ಮತ್ತು ಉಪಕರಣಗಳ ಪರಿಚಯ | ಬಹುತೇಕ ಕಾರ್ಯಕ್ರಮ ಭಾಷೆಗಳ ಮೂಲ ತತ್ವಗಳನ್ನು ಮತ್ತು ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಕರು ತಮ್ಮ ಕೆಲಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವ ಸಾಫ್ಟ್ವೇರ್ ಬಗ್ಗೆ ಕಲಿಯಿರಿ | [ಕಾರ್ಯಕ್ರಮ ಭಾಷೆಗಳ ಪರಿಚಯ ಮತ್ತು ಉಪಕರಣಗಳು](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ಜಾಸ್ಮಿನ್ |
|
||||
| 02 | ಪ್ರಾರಂಭಿಸಲು | GitHubನ ಮೂಲಭೂತಗಳು, ತಂಡದೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಣೆ | ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟಿನಲ್ಲಿ GitHub ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು, ಕೋಡ್ ಬೇಸ್ ಮೇಲೆ ಇತರರೊಂದಿಗೆ ಸಹಯೋಗ ಮಾಡುವುದು | [GitHub ಪರಿಚಯ](./1-getting-started-lessons/2-github-basics/README.md) | ಫ್ಲೋರ್ |
|
||||
| 03 | ಪ್ರಾರಂಭಿಸಲು | ಪ್ರವೇಶಿತಾ | ವೆಬ್ ಪ್ರವೇಶಿತೆಯ ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಯಿರಿ | [ಪ್ರವೇಶಿತಾ ಮೂಲಭೂತಗಳು](./1-getting-started-lessons/3-accessibility/README.md) | ಕ್ರಿಸ್ಟೋಫರ್ |
|
||||
| 04 | JS ಮೂಲಭೂತಗಳು | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ಟೈಪ್ಸ್ | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ಟೈಪ್ಸ್ನ ಮೂಲಭೂತಗಳು | [ಡೇಟಾ ಟೈಪ್ಸ್](./2-js-basics/1-data-types/README.md) | ಜಾಸ್ಮಿನ್ |
|
||||
| 05 | JS ಮೂಲಭೂತಗಳು | ಫಂಕ್ಷನ್ಸ್ ಮತ್ತು ಪರಿಹಾರಗಳು | ಅನ್ವಯದ ತರ್ಕದ ಹರಿವನ್ನು ನಿರ್ವಹಿಸಲು ಫಂಕ್ಷನ್ಗಳು ಮತ್ತು ಪರಿಹಾರಗಳ ಕುರಿತು ಕಲಿಯಿರಿ | [ಫಂಕ್ಷನ್ಸ್ ಮತ್ತು ಪರಿಹಾರಗಳು](./2-js-basics/2-functions-methods/README.md) | ಜಾಸ್ಮಿನ್ ಮತ್ತು ಕ್ರಿಸ್ಟೋಫರ್ |
|
||||
| 06 | JS ಮೂಲಭೂತಗಳು | JS ಮೂಲಕ ನಿರ್ಣಯ ತೆಗೆದುಕೊಳ್ಳುವುದು | ನಿರ್ಣಯ ತೆಗೆದುಕೊಳ್ಳುವ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ ನೀವು ನಿಮ್ಮ ಕೋಡ್ನಲ್ಲಿ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದನ್ನು ಕಲಿಯಿರಿ | [ನಿರ್ಣಯಗಳು ತೆಗೆದುಕೊಳ್ಳುವುದು](./2-js-basics/3-making-decisions/README.md) | ಜಾಸ್ಮಿನ್ |
|
||||
| 07 | JS ಮೂಲಭೂತಗಳು | ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳು | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳನ್ನು ಬಳಸಿ ಡೇಟಾ ಕೆಲಸ ಮಾಡುವುದು | [ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳು](./2-js-basics/4-arrays-loops/README.md) | ಜಾಸ್ಮಿನ್ |
|
||||
| 08 | [ಟೆರಾರಿಯಂ](./3-terrarium/solution/README.md) | HTML ಪ್ರಾಯೋಗಿಕ | ಆನ್ಲೈನ್ ಟೆರಾರಿಯಂ ನಿರ್ಮಿಸಲು HTML ರಚಿಸಿ, ಲೇಔಟ್ ನಿರ್ಮಾಣದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ | [HTML ಪರಿಚಯ](./3-terrarium/1-intro-to-html/README.md) | ಜೆನ್ |
|
||||
| 09 | [ಟೆರಾರಿಯಂ](./3-terrarium/solution/README.md) | CSS ಪ್ರಾಯೋಗಿಕ | ಆನ್ಲೈನ್ ಟೆರಾರಿಯಂ ಶೈಲಿ ಮಾಡಲು CSS ಅನ್ನು ನಿರ್ಮಿಸಿ, ಪುಟವನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿ ಮಾಡುವ CSS ಮೂಲಭೂತಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ | [CSS ಪರಿಚಯ](./3-terrarium/2-intro-to-css/README.md) | ಜೆನ್ |
|
||||
| 10 | [ಟೆರಾರಿಯಂ](./3-terrarium/solution/README.md) | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲೋಶರ್ಸ್, DOM ಮಾನಿಪ್ಯುಲೇಶನ್ | ಡ್ರ್ಯಾಗ್/ಡ್ರಾಪ್ ಇಂಟರ್ಫೇಸ್ ಆಗಿ ಟೆರಾರಿಯಂ ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ಮಿಸಿ, ಕ್ಲೋಶರ್ಸ್ ಮತ್ತು DOM ಮಾನಿಪ್ಯುಲೇಶನ್ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ | [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲೋಶರ್ಸ್, DOM ಮಾನಿಪ್ಯುಲೇಶನ್](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | ಜೆನ್ |
|
||||
| 11 | [ಟೈಪಿಂಗ್ ಆಟ](./4-typing-game/solution/README.md) | ಟೈಪಿಂಗ್ ಆಟ ನಿರ್ಮಿಸಿ | ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆ್ಯಪ್ನ ತರ್ಕವನ್ನು ಚಾಲನೆ ಮಾಡಲು ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಕಲಿಯಿರಿ | [ಇವೆಂಟ್ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮ](./4-typing-game/typing-game/README.md) | ಕ್ರಿಸ್ಟೋಫರ್ |
|
||||
| 12 | [ಹಸಿರು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ](./5-browser-extension/solution/README.md) | ಬ್ರೌಸರ್ಗಳೊಂದಿಗೆ ಕೆಲಸ | ಬ್ರೌಸರ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಅವರ ಇತಿಹಾಸ ಮತ್ತು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯ ಮೊದಲ ಉಲ್ಲೇಖಗಳನ್ನು ಹೇಗೆ ವ್ಯಾಪಾರ ಮಾಡಬೇಕು ಕಲಿಯಿರಿ | [ಬ್ರೌಸರ್ ಗಳ ಕುರಿತು](./5-browser-extension/1-about-browsers/README.md) | ಜೆನ್ |
|
||||
| 13 | [ಹಸಿರು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ](./5-browser-extension/solution/README.md) | ರೂಪವನ್ನು ನಿರ್ಮಿಸುವುದು, API ಕರೆ ಮತ್ತು ಸ್ಥಳೀಯ ಸಂಗ್ರಹದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ನುಡಿಸುವುದು | API ಕರೆ ಮಾಡಲು ಮತ್ತು ಸ್ಥಳೀಯ ಸಂಗ್ರಹದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಬಳಸುವ ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಂಶಗಳನ್ನು ನಿರ್ಮಿಸಿ | [APIಗಳು, ರೂಪಗಳು, ಮತ್ತು ಸ್ಥಳೀಯ ಸಂಗ್ರಹ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | ಜೆನ್ |
|
||||
| 14 | [ಹಸಿರು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ](./5-browser-extension/solution/README.md) | ಬ್ರೌಸರ್ನ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಗಳು, ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ | ವಿಸ್ತರಣೆಯ ಐಕಾನ್ ನಿರ್ವಹಿಸಲು ಬ್ರೌಸರ್ನ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಗಳ ಬಳಕೆ; ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಮತ್ತು ಅದನ್ನು ಸುಧಾರಿಸುವ ಕೆಲವು ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ | [ಹಿನ್ನೆಲೆ ಕೆಲಸಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ](./5-browser-extension/3-background-tasks-and-performance/README.md) | ಜೆನ್ |
|
||||
| 15 | [ಸ್ಪೇಸ್ ಆಟ](./6-space-game/solution/README.md) | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನೊಂದಿಗೆ ಹೆಚ್ಚು ಉನ್ನತ ಆಟ ಅಭಿವೃದ್ಧಿ | ವರ್ಗಗಳು ಮತ್ತು ಸಂಯೋಜನೆಗಳ ಮೂಲಕ ವಾರ್ಸೆಗೆ ಸಂಬಂಧಿಸಿದ ದರಸ್ಥಿತಿಯನ್ನು ಮತ್ತು Pub/Sub ಮಾದರಿಯನ್ನು ಕುರಿತು ಕಲಿಯಿರಿ, ಆಟ ನಿರ್ಮಿಸಲು ತಯಾರಿ | [ಅಧಿಕೃತ ಆಟ ಅಭಿವೃದ್ಧಿಗೆ ಪರಿಚಯ](./6-space-game/1-introduction/README.md) | ಕ್ರಿಸ್ |
|
||||
| 16 | [ಸ್ಪೇಸ್ ಆಟ](./6-space-game/solution/README.md) | ಕ್ಯಾನ್ವಾಸ್ ರೇಖಾಚಿತ್ರ | ಪರದೆಯ ಮೇಲೆ ಅಂಶಗಳನ್ನು ರೇಖಿಸಲು ಬಳಕೆಯಲ್ಲಿರುವ ಕ್ಯಾಂವಾಸ್ API ಬಗ್ಗೆ ಕಲಿಯಿರಿ | [ಕ್ಯಾನ್ವಾಸ್ ರೇಖಾಚಿತ್ರ](./6-space-game/2-drawing-to-canvas/README.md) | ಕ್ರಿಸ್ |
|
||||
| 17 | [ಸ್ಪೇಸ್ ಆಟ](./6-space-game/solution/README.md) | ಪರದೆಯ ಮೇಲಿನ ಅಂಶಗಳನ್ನು ಚಲಿಸುವುದು | ಸಂತಲನ ಸಂಕೇತಗಳನ್ನು ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಿ ಅಂಶಗಳು ಚಲಿಸುವಿಕೆಯನ್ನು ಹೇಗೆ ಹೊಂದುತ್ತವೆ ಎಂಬುದನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ | [ಅಂಶಗಳು ಚಲಿಸುವಿಕೆ](./6-space-game/3-moving-elements-around/README.md) | ಕ್ರಿಸ್ |
|
||||
| 18 | [ಸ್ಪೇಸ್ ಆಟ](./6-space-game/solution/README.md) | ಘರ್ಷಣೆ ಗುರುತಿಸುವಿಕೆ | ಅಂಶಗಳು ಪರಸ್ಪರ ಸಂಸ್ಪರ್ಶ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಿಸಲು ಕೀಪ್ರೆಸ್ ಬಳಸಿ ಮತ್ತು ಆಟದ ಕಾರ್ಯಕ್ಷಮತೆ ಖಚಿತಪಡಿಸಲು ಕೂಲ್ಡೌನ್ ಫಂಕ್ಷನ್ ನೀಡುವುದು | [ಘರ್ಷಣೆ ಗುರುತಿಸುವಿಕೆ](./6-space-game/4-collision-detection/README.md) | ಕ್ರಿಸ್ |
|
||||
| 19 | [ಸ್ಪೇಸ್ ಆಟ](./6-space-game/solution/README.md) | ಅಂಕಗಳನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುವುದು | ಆಟದ ಸ್ಥಿತಿ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಆಧಾರಿತ ಗಣಿತ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ನಡೆಸುವುದು | [ಅಂಕಗಳನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುವುದು](./6-space-game/5-keeping-score/README.md) | ಕ್ರಿಸ್ |
|
||||
| 20 | [ಸ್ಪೇಸ್ ಆಟ](./6-space-game/solution/README.md) | ಆಟ ಕೊನೆಮಾಡಿ ಮತ್ತೆ ಪ್ರಾರಂಭಿಸುವುದು | ಆಟ ಮುಗಿಸುವುದು ಮತ್ತು ಮತ್ತೆ ಪ್ರಾರಂಭಿಸುವ ಬಗೆ, ಆಸ್ತಿಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು ಮತ್ತು ವ್ಯತ್ಯಯ ಮೌಲ್ಯಗಳನ್ನು ಮರುಸೆಟ್ ಮಾಡುವುದು | [ಕೊನೆಯಲ್ಲಿ ಸ್ಥಿತಿ](./6-space-game/6-end-condition/README.md) | ಕ್ರಿಸ್ |
|
||||
| 21 | [ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್](./7-bank-project/solution/README.md) | ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ HTML ಟೆಂಪ್ಲೇಟ್ಸ್ ಮತ್ತು ಮಾರ್ಗಗಳು | ಮಾರ್ಗದರ್ಶನ ಮತ್ತು HTML ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಹುಪುಟ ಡಿಝೈನ್ ಶಿಲ್ಪವನ್ನು ರಚಿಸುವ ಬಗ್ಗೆ ಕಲಿಯಿರಿ | [HTML ಟೆಂಪ್ಲೇಟ್ಸ್ ಮತ್ತು ಮಾರ್ಗಗಳು](./7-bank-project/1-template-route/README.md) | ಯೋಹಾನ್ |
|
||||
| 22 | [ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್](./7-bank-project/solution/README.md) | ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರ್ಮ್ ನಿರ್ಮಿಸಿ | ಫಾರ್ಮ್ಗಳು ರಚಿಸುವುದು ಮತ್ತು ಮಾನ್ಯತೆ ವಿಧಾನದ ಕೈಗಾರಿಕೆಗಳ ಬಗ್ಗೆ ಕಲಿಯಿರಿ | [ಫಾರ್ಮ್ಗಳು](./7-bank-project/2-forms/README.md) | ಯೋಹಾನ್ |
|
||||
| 23 | [ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್](./7-bank-project/solution/README.md) | ಡೇಟಾ ಪಡೆಯುವುದು ಮತ್ತು ಬಳಸುವ ವಿಧಾನಗಳು | ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಡೇಟಾ ಹೇಗೆ ಬರುತ್ತದೆ ಹಾಗೆಯೇ ಪಡೆಯುವುದು, ಸಂಗ್ರಹಿಸುವುದು ಮತ್ತು ತೊಡೆದು ಹಾಕುವುದು | [ಡೇಟಾ](./7-bank-project/3-data/README.md) | ಯೋಹಾನ್ |
|
||||
| 24 | [ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್](./7-bank-project/solution/README.md) | ರಾಜ್ಯ ನಿರ್ವಹಣೆಯ ಕಲ್ಪನೆಗಳು | ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ರಾಜ್ಯವನ್ನು ಹೇಗೆ ಉಳಿಸುತ್ತದೆ ಮತ್ತು ತಂತ್ರಜ್ಞಾನವನ್ನು ನಿರ್ವಹಿಸುವುದು | [ರಾಜ್ಯ ನಿರ್ವಹಣೆ](./7-bank-project/4-state-management/README.md) | ಯೋಹಾನ್ |
|
||||
| 25 | [ಬ್ರೌಸರ್ / VScode ಕೋಡ್](../../8-code-editor) | VScode ಜೊತೆಗೆ ಕಾರ್ಯನಿರ್ವಹಣೆ | ಕೋಡ್ ಸಂಪಾದಕ ಬಳುಕುವಿಕೆ ಕಲಿಯಿರಿ| [VScode ಕೋಡ್ ಸಂಪಾದಕ ಬಳಸು](./8-code-editor/1-using-a-code-editor/README.md) | ಕ್ರಿಸ್ |
|
||||
| 26 | [ಎಐ ಸಹಾಯಕರ](./9-chat-project/README.md) | ಎಐ ಜೊತೆಗೆ ಕಾರ್ಯನಿರ್ವಹಣೆ | ನಿಮ್ಮ ಸ್ವಂತ ಎಐ ಸಹಾಯಕರನ್ನು ನಿರ್ಮಿಸುವುದನ್ನು ಕಲಿಯಿರಿ | [ಎಐ ಸಹಾಯಕ ಪ್ರಾಜೆಕ್ಟ್](./9-chat-project/README.md) | ಕ್ರಿಸ್ |
|
||||
|
||||
## 🏫 ಪಡಗೋಗಿ
|
||||
|
||||
ನಮ್ಮ ಪಾಠಕ್ರಮವು ಎರಡು ಪ್ರಮುಖ ಪಠ್ಯಶಾಸ್ತ್ರೀಯ 원ಪದಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡಿದೆ:
|
||||
* ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರಿತ ಕಲಿಕೆ
|
||||
* ನಿಯಮಿತ ಪ್ರಶ್ನೋತ್ತರಗಳು
|
||||
|
||||
ಕಾರ್ಯಕ್ರಮವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, HTML ಮತ್ತು CSS ನ ಮೂಲ ತತ್ವಗಳನ್ನು ಮತ್ತು ನವೀನ ಸಾಧನಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಕಲಿಸುತ್ತದೆ, ಇವಳನ್ನು ಇಂದಿನ ವೆಬ್ ಅಭಿವೃದ್ಧಿಕಾರರು ಬಳಸುತ್ತಾರೆ. ವಿದ್ಯಾರ್ಥಿಗಳಿಗೆ ಟೈಪಿಂಗ್ ಆಟ, ವರ್ಚುವಲ್ ಟೆರಾರಿಯಂ, ಪರಿಸರ ಸ್ನೇಹಿ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ, ಸ್ಪೇಸ್ ಇನ್ವೇಡರ್ ಶೈಲಿಯ ಆಟ ಮತ್ತು ವ್ಯವಹಾರಗಳಿಗೆ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸುವ ಮೂಲಕ ಅನ್ವಯಿಕ ಅನುಭವವನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವ ಅವಕಾಶ ಸಿಗುತ್ತದೆ. ಸರಣಿಯ ಕೊನೆಯಲ್ಲಿ ವಿದ್ಯಾರ್ಥಿಗಳು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ದೃಢ ಆಳವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಹೊಂದುವರು.
|
||||
|
||||
> 🎓 ನೀವು ಈ ಪಠ್ಯಕ್ರಮದ ಮೊದಲ ಕೆಲವು ಪಾಠಗಳನ್ನು [ಲರ್ನ್ ಪಾಥ್](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ಮೂಲಕ ಮೈಕ್ರೋಸಾಫ್ಟ್ ಲರ್ನ್ನಲ್ಲಿ ತೆಗೆದುಕೊಳ್ಳಬಹುದು!
|
||||
|
||||
ವಿಷಯವು ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡುವ ಮೂಲಕ ಪ್ರಕ್ರಿಯೆಯನ್ನು ವಿದ್ಯಾರ್ಥಿಗಳಿಗೆ ಹೆಚ್ಚು ಆಸಕ್ತಿಕರವಾಗಿದೆ ಮಾಡುವಂತೆ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಕಲ್ಪನೆಗಳ ನೆನಪಿನಶೀಲತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭೂತಗಳಲ್ಲಿ ಹಲವು ಪ್ರಾರಂಭಿಕ ಪಾಠಗಳನ್ನು ಬರೆದಿದೆ ಮತ್ತು “[ಬಿಗಿನರ್ಸ್ ಸೀರಿಸ್ ಟು: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” ವೀಡಿಯೋಗಳ ಸಂಗ್ರಹದಿಂದ ವೀಡಿಯೋಗಳನ್ನು ಜೋಡಿಸಿದೆ, ಕೆಲವು ಲೇಖಕರು ಈ ಪಠ್ಯಕ್ರಮಕ್ಕೆ ಕೊಡುಗೆ ನೀಡಿದ್ದಾರೆ.
|
||||
|
||||
ಇನ್ನು, ತರಗತಿಯ ಮೊದಲು ಕಡಿಮೆ ಒತ್ತಡದ ಪ್ರಶ್ನೋತ್ತರವು ವಿದ್ಯಾರ್ಥಿಗಳ ಆಸಕ್ತಿಯನ್ನು ಕಲಿಕೆ ತತ್ತ್ವದ ಕಡೆಗೆ ಸ್ಥಾಪಿಸುತ್ತದೆ, ಮತ್ತು ನಂತರದ ಪ್ರಶ್ನೋತ್ತರವು ಇನ್ನಷ್ಟು ನೆನಪಿನಶೀಲತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಪಠ್ಯಕ್ರಮವನ್ನು ವ್ಯಕ್ತಿಗತಗೊಳಿಸಲು ಮತ್ತು ಮನರಂಜನೀಯವಾಗಿರುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ಪೂರ್ಣವಾಗಿ ಅಥವಾ ಭಾಗವಾಗಿ ತೆಗೆದುಕೊಳ್ಳಬಹುದು. ಪ್ರಾಜೆಕ್ಟ್ಗಳು ಸಣ್ಣದಾಗಿಇರದು ಮತ್ತು 12 ವಾರಗಳ ಚಕ್ರದ ಕೊನೆಯಲ್ಲಿ ಹೆಚ್ಚು ಜಟಿಲವಾಗುತ್ತವೆ.
|
||||
|
||||
ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳನ್ನು ಪರಿಚಯಿಸುವುದನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಬಿಟ್ಟುಬಿಟ್ಟಿದ್ದರೂ, ಮುಂದಿನ ಒಳ್ಳೆಯ ಹಾದಿಯಾಗಿದ್ದು ಈ ಪಠ್ಯಕ್ರಮವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ, ಮತ್ತೊಂದು ವೀಡಿಯೋ ಸಂಗ್ರಹದ ಮೂಲಕ ನೋಡ್.ಜೆಎಸ್ ಬಗ್ಗೆ ಕಲಿಯುವುದು: "[ಬಿಗಿನರ್ರ್ ಸೀರಿಸ್ ಟು: ನೋಡ್.ಜೆಎಸ್](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> ನಮ್ಮ [ನಡವಳಿ ಸಂಹಿತೆ](CODE_OF_CONDUCT.md) ಮತ್ತು [ಹಾಳು ಕೊಡುಗೆ](CONTRIBUTING.md) ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ವೀಕ್ಷಿಸಿ. ನಿಮ್ಮ ನಿರ್ಮಾಣಾತ್ಮಕ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನಾವು ಸ್ವಾಗತಿಸುವೆವು!
|
||||
|
||||
|
||||
## 🧭 ಅನ್ಲೈನ್ ಪ್ರವೇಶ
|
||||
|
||||
ನೀವು [Docsify](https://docsify.js.org/#/) ಬಳಸಿ ಈ ಮಾಹಿತಿಯನ್ನು ಆನ್ಲೈನ್ ಇಲ್ಲದೆ ಓದಲು ಸಾಧ್ಯ. ಈ ರೆಪೊವನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ, [Docsify ಇನ್ಸ್ಟಾಲ್](https://docsify.js.org/#/quickstart) ಮಾಡಿ ನಿಮ್ಮ ಸ್ಥಳೀಯ ಯಂತ್ರದಲ್ಲಿ, ನಂತರ ರುಟ್ ಫೋಲ್ಡರ್ನಲ್ಲಿ `docsify serve` ಅನ್ನು ಟೈಪ್ ಮಾಡಿ. ವೆಬ್ಸೈಟ್ 3000 ಪೋರ್ಟ್ನಲ್ಲಿ ನಿಮ್ಮ ಲೊಕಾಲ್ಹೋಸ್ಟ್ ಮೇಲೆ ಸೇವ್ ಆಗುತ್ತದೆ: `localhost:3000`.
|
||||
|
||||
## 📘 PDF
|
||||
|
||||
ಎಲ್ಲಾ ಪಾಠಗಳ PDF ಇವು [ಇಲ್ಲಿ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ಕಾಣಬಹುದು.
|
||||
|
||||
|
||||
## 🎒 ಇತರ ಕೋರ್ಸ್ಗಳು
|
||||
ನಮ್ಮ ತಂಡವು ಇತರ ಕೋರ್ಸುಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ! ನೋಡಿ:
|
||||
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
|
||||
### LangChain
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
|
||||
---
|
||||
|
||||
### ಅಜೂರ್ / ಎಡ್ಜ್ / MCP / ಏಜೆಂಟ್ಗಳು
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### ಜನರೇಟಿವ್ AI ಸರಣಿ
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### ಕೋರ್ ಲರ್ನಿಂಗ್
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### ಕೋಪೈಲಟ್ ಸರಣಿ
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
|
||||
|
||||
## ಸಹಾಯ ಪಡೆಯುವುದು
|
||||
|
||||
ನೀವು ಅಡಚಣೆ ಎದುರಿಸಿದರೆ ಅಥವಾ AI ಅಪ್ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಬಗ್ಗೆ ಯಾವುದೇ ಪ್ರಶ್ನೆಗಳಿದ್ದರೆ. MCP ಕುರಿತು ಚರ್ಚೆಗಳಲ್ಲಿ ಅಣುಹೊಡೆಯುವ ವಿದ್ಯಾರ್ಥಿಗಳು ಮತ್ತು ಅನುಭವಿಯ ಡೆವಲಪರ್ಗಳಿಗೆ ಸೇರಿ. ಇದು ಒಂದು ಬೆಂಬಲದ ಸಮುದಾಯ, ಇಲ್ಲಿ ಪ್ರಶ್ನೆಗಳು ಸ್ವಾಗತಾರ್ಹವಾಗಿದ್ದು, ಜ್ಞಾನವನ್ನು ಮುಕ್ತವಾಗಿ ಹಂಚಿಕೊಳ್ಳುತ್ತಾರೆ.
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
ನೀವು ಉತ್ಪನ್ನ ಫೀಡ್ಬ್ಯಾಕ್ ಅಥವಾ ನಿರ್ಮಾಣದ ಸಂದರ್ಭದಲ್ಲಿ ದೋಷಗಳು ಇದ್ದರೆ ಭೇಟಿ ನೀಡಿರಿ:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
|
||||
## ಪರವಾನಗಿ
|
||||
|
||||
ಈ ರೆಪೊಸಿಟರಿಯನ್ನು MIT ಪರವಾನಗಿ ಅಡಿಯಲ್ಲಿ ಪ್ರಕಾಶಿಸಲಾಗಿದೆ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ [LICENSE](../../LICENSE) ಫೈಲ್ ನೋಡಿ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ತ್ಯಾಜ್ಯ ಸೂಚನೆ**:
|
||||
ಈ ದಸ್ತಾವೇಜನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯತ್ತ ಪ್ರಯತ್ನ ಮಾಡುತ್ತಿರলেও, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅನಿನ್ಯಾಸಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕೃತ ಬಗೆಗಿನ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗೆ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡುಕೊಳ್ಳುವಿಕೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಗಳಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
|
||||
"translation_date": "2026-01-08T10:35:45+00:00",
|
||||
"source_file": "SECURITY.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
## ಭದ್ರತೆ
|
||||
|
||||
Microsoft ನಮ್ಮ ಸಾಫ್ಟ್ವೇರ್ ಉತ್ಪನ್ನಗಳು ಮತ್ತು ಸೇವೆಗಳ ಭದ್ರತೆಯನ್ನು ಗಂಭೀರವಾಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಇದರಲ್ಲಿ ನಮ್ಮ GitHub ಸಂಸ್ಥೆಗಳ ಮೂಲಕ ನಿರ್ವಹಿಸಲಾದ ಎಲ್ಲಾ ಮೂಲಕೋಡ್ ರೆಪೊಸಿಟರಿಗಳು ಸೇರಿವೆ, ಇದರಲ್ಲಿ [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), ಮತ್ತು [ನಮ್ಮ GitHub ಸಂಸ್ಥೆಗಳು](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon) ಸೇರಿವೆ.
|
||||
|
||||
ನೀವು ಯಾವುದೇ Microsoft-ಸ್ವದಂತ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ [Microsoft ಭದ್ರತಾ ಹಾಳಾಗುವಿಕೆಗೆ ವ್ಯಾಖ್ಯಾನಿಸಿರುವ](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon) ಭದ್ರತಾ ದೌರ್ಬಲ್ಯವನ್ನು ಕಂಡುಹಿಡಿದಿದ್ದೀರಿ ಎಂದು ನಂಬಿದರೆ, ದಯವಿಟ್ಟು ಕೆಳಗೆ ವಿವರಣೆಮಾಡಿದಂತೆ ಅದನ್ನು ನಮಗೆ ವರದಿ ಮಾಡಿ.
|
||||
|
||||
## ಭದ್ರತಾ ಸಮಸ್ಯೆಗಳನ್ನು ವರದಿ ಮಾಡುವುದು
|
||||
|
||||
**ದಯವಿಟ್ಟು ಸಾರ್ವಜನಿಕ GitHub ಸಮಸ್ಯೆಗಳ ಮೂಲಕ ಭದ್ರತಾ ದೌರ್ಬಲ್ಯಗಳನ್ನು ವರದಿ ಮಾಡಬೇಡಿ.**
|
||||
|
||||
ಬದಲಾಗಿ, ದಯವಿಟ್ಟು Microsoft ಭದ್ರತಾ ಪ್ರತಿಕ್ರಿಯೆ ಕೇಂದ್ರಕ್ಕೆ (MSRC) [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon) ನಲ್ಲಿ ವರದಿ ಮಾಡಿ.
|
||||
|
||||
ನೀವು ಲಾಗಿನ್ ಮಾಡದೆ ಸಲ್ಲಿಸಲು ಇಚ್ಛಿಸಿದರೆ, [secure@microsoft.com](mailto:secure@microsoft.com) ಗೆ ಇಮೇಲ್ ಕಳುಹಿಸಿ. ಸಾಧ್ಯವಾಗಿದ್ದರೆ, ನಮ್ಮ PGP ಕೀ ಬಳಸಿ ನಿಮ್ಮ ಸಂದೇಶವನ್ನು ಎನ್ಕ್ರಿಪ್ಟ್ ಮಾಡಿ; ಅದನ್ನು [Microsoft ಭದ್ರತಾ ಪ್ರತಿಕ್ರಿಯೆ ಕೇಂದ್ರ PGP ಕೀ ಪುಟ](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon) ನಿಂದ ಡೌನ್ಲೋಡ್ ಮಾಡಬಹುದು.
|
||||
|
||||
ನೀವು 24 ಗಂಟೆಗಳ ಒಳಗೆ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯಬೇಕು. ಯಾವುದೇ ಕಾರಣಕ್ಕಾಗಿ ಅದಾಗದಿದ್ದರೆ, ದಯವಿಟ್ಟು ನಾವು ನಿಮ್ಮ ಮೂಲ ಸಂದೇಶವನ್ನು ಪಡೆದಿದ್ದೇವೆ ಎಂದು ಖಚಿತಪಡಿಸಲು ಇಮೇಲ್ ಮೂಲಕ ಅನುಸರಿಸಿ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon) ನೋಡಿ.
|
||||
|
||||
ದಯವಿಟ್ಟು ಕೆಳಗಿನ ವಿನಂತಿಸಲಾದ ಮಾಹಿತಿಯನ್ನು (ನೀವು ನೀಡಬಹುದಾದಷ್ಟು) ಸೇರಿಸಿ, ಇದು ಸಮಸ್ಯೆಯ ಸ್ವಭಾವ ಮತ್ತು ವ್ಯಾಪ್ತಿಯನ್ನು ಉತ್ತಮವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ:
|
||||
|
||||
* ಸಮಸ್ಯೆಯ ಪ್ರಕಾರ (ಉದಾ: ಬಫರ್ ಓವರ್ಫ್ಲೋ, SQL ಇಂಜೆಕ್ಷನ್, ಕ್ರಾಸ್-ಸೈಟ್ ಸ್ಕ್ರಿಪ್ಟಿಂಗ್, ಇತ್ಯಾದಿ)
|
||||
* ಸಮಸ್ಯೆಯ ಪ್ರಕಟಣೆಗೆ ಸಂಬಂಧಿಸಿದ ಮೂಲ ಫೈಲ್ಗಳ ಸಂಪೂರ್ಣ ಮಾರ್ಗಗಳು
|
||||
* ಪ್ರಭಾವಿತ ಮೂಲ ಕೋಡ್ನ ಸ್ಥಳ (ಟ್ಯಾಗ್/ಬ್ರಾಂಚ್/ಕಮಿಟ್ ಅಥವಾ ನೇರ URL)
|
||||
* ಸಮಸ್ಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸಲು ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ವಿಶೇಷ ಸಂರಚನೆ
|
||||
* ಸಮಸ್ಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವ ಹೆಜ್ಜೆ ಹಂತದ ಸೂಚನೆಗಳು
|
||||
* ಸಾಬೀತು-ಆಫ್-ಕಾನ್ಸೆಪ್ಟ್ ಅಥವಾ ಎಕ್ಸ್ಪ್ಲಾಯಿಟ್ ಕೋಡ್ (ಸಾದ್ಯವಾದರೆ)
|
||||
* ಸಮಸ್ಯೆಯ ಪರಿಣಾಮ, ಹೇಗೆ ಆಕ್ರಮಣಕಾರಿ ಸಮಸ್ಯೆಯನ್ನು ದುರುಪಯೋಗ ಮಾಡಬಹುದು ಎಂಬುದರ ಒಳಗೊಂಡಂತೆ
|
||||
|
||||
ಈ ಮಾಹಿತಿ ನಿಮ್ಮ ವರದಿಯನ್ನು ವೇಗವಾಗಿ ವಿಂಗಡಿಸಲು ನಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
|
||||
|
||||
ನೀವು ಬಗ್ ಬೌಂಟಿಗಾಗಿ ವರದಿ ಮಾಡುತ್ತಿದ್ದರೆ, ಹೆಚ್ಚು ಸಂಪೂರ್ಣ ವರದಿಗಳು ಹೆಚ್ಚಿನ ಬೌಂಟಿ ಬಹುಮಾನಕ್ಕೆ ಸಹಾಯಮಾಡಬಹುದು. ದಯವಿಟ್ಟು ನಮ್ಮ [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) ಪುಟ ಭೇಟಿನೀಡಿ ನಮ್ಮ ಸಕ್ರಿಯ ಕಾರ್ಯಕ್ರಮಗಳ ಕುರಿತು ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗೆ.
|
||||
|
||||
## ಅಗತ್ಯ ಭಾಷೆಗಳು
|
||||
|
||||
ನಾವು ಎಲ್ಲಾ ಸಂವಹನಗಳು ಇಂಗ್ಲಿಷ್ನಲ್ಲಿ ಇರಬೇಕೆಂದು ಇಚ್ಛಿಸುತ್ತೇವೆ.
|
||||
|
||||
## ನೀತಿ
|
||||
|
||||
Microsoft [ಸಮನ್ವಿತ ದೌರ್ಬಲ್ಯ ಬಹಿರಂಗಪಡಿಸುವಿಕೆ](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) ತತ್ವವನ್ನು ಅನುಸರಿಸುತ್ತದೆ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ತಪ್ಪು ತಿಳಿಸುವಿಕೆ**:
|
||||
ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ, ಆದರೆ ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ದಸ್ತಾವೇಜು ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ನಂಬಿಕೆಸಂಚಿತ աղբյուրವಾಗಿರಬೇಕು. ಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಬಾಧಿತೃಟಟಕೆಗಳ ಅಥವಾ ತಪ್ಪಿನಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
|
||||
"translation_date": "2026-01-08T10:13:48+00:00",
|
||||
"source_file": "SUPPORT.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಬೆಂಬಲ
|
||||
|
||||
## ಸಮಸ್ಯೆಗಳನ್ನು ಹೇಗೆ ದಾಖಲಿಸಿ ಮತ್ತು ಸಹಾಯ ಪಡೆಯಿರಿ
|
||||
|
||||
ಈ ಯೋಜನೆ ದೋಷಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯ ವಿನಂತಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು GitHub Issues ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಕಲುಗಳನ್ನು ತಪ್ಪಿಸಲು ದಯವಿಟ್ಟು ಹೊಸ ಸಮಸ್ಯೆಗಳನ್ನು ದಾಖಲಿಸುವ ಮೊದಲು ಇExisting ಸಮಸ್ಯೆಗಳನ್ನು ಹುಡುಕಿ. ಹೊಸ ಸಮಸ್ಯೆಗಳಿಗಾಗಿ, ನಿಮ್ಮ ದೋಷ ಅಥವಾ ವೈಶಿಷ್ಟ್ಯ ವಿನಂತಿಯನ್ನು ಹೊಸ ಸಮಸ್ಯೆಯಾಗಿ ದಾಖಲಿಸಿ.
|
||||
|
||||
ಈ ಯೋಜನೆಯನ್ನು ಬಳಸುವುದು ಕುರಿತು ಸಹಾಯ ಮತ್ತು ಪ್ರಶ್ನೆಗಳಿಗೆ, ದಯವಿಟ್ಟು [ನಮ್ಮ ಕೊಡುಗೆ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು](CONTRIBUTING.md) ನೋಡಿ.
|
||||
|
||||
## ಮೈಕ್ರೋಸಾಫ್ಟ್ ಬೆಂಬಲ ಧೋರಣೆ
|
||||
|
||||
ಈ ಯೋಜನೆಗೆ ಬೆಂಬಲವು ಮೇಲ್ಕಾಣಿಸಿದ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಸೀಮಿತವಾಗಿದೆ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ವಿಮರ್ಶಾ ಪ್ರತ್ಯಯ**:
|
||||
ಈ ದಸ್ತಾವೇಜು [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯ ಬಗ್ಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸಮರ್ಥತೆಗಳ ಕಾಣಿಕೆಗಳಾಗಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಸ್ತಾವೇಜಿನ ಮೂಲ ಭಾಷೆಯ ಆವೃತ್ತಿಯೇ ಪ್ರಾಧಿಕಾರೀ ಮೂಲ ಎನ್ನುಕೊಳ್ಳಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶിപಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರದ ಬಳಕೆಗಳಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ದ್ವಂದ್ವಾಭಿವೃದ್ಧಿಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,23 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
|
||||
"translation_date": "2026-01-08T10:20:09+00:00",
|
||||
"source_file": "_404.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# ಕಾರ್ಯ ಪ್ರಗತಿಯಲ್ಲಿದೆ
|
||||
|
||||
ನಾವು ಈ ಪುಟ üzerinde ಕೆಲಸ ಮಾಡುತ್ತಿರುವೇವೆ. ದಯವಿಟ್ಟು ನಂತರಮೋದಲೋ ಸಮೀಕ್ಷಿಸಿ.
|
||||
|
||||
ನಿಮಗೆ ಯಾವುದೇ ಪ್ರಶ್ನೆಗಳಿದ್ದರೆ, ದಯವಿಟ್ಟು [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) ತೆರೆಯಿರಿ.
|
||||
|
||||
**[ಮನೆಗೆ ಹಿಂತಿರುಗಿ](../../../../../../..)**
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಹೆಚ್ಚಿನ ಮಾಹಿತಿ**:
|
||||
ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ದತೆಯನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಪ್ರೇರಿತ ಅಥವಾ ಯಂತ್ರ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೌಲಿಕ ದಸ್ತಾವೇಜಿನನ್ನೇ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸುವುದು ಸೂಕ್ತ. ಮಹತ್ವಪೂರ್ಣ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವಾಗ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಕಲ್ಪನೆಗಳು ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,36 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "3bd2f51ecf4ac9b39277cba748943793",
|
||||
"translation_date": "2026-01-08T11:39:36+00:00",
|
||||
"source_file": "docs/_navbar.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
- Translations
|
||||
- [English (United States)](../../../docs/README)
|
||||
- [বাংলা](../../../docs/README.bn)
|
||||
- [中文(中国)](../../../docs/README.zh-cn)
|
||||
- [中文(台湾)](../../../docs/README.zh-tw)
|
||||
- [Español](../../../docs/README.es)
|
||||
- [Français](../../../docs/README.fr)
|
||||
- [Ελληνικά](../../../docs/README.el)
|
||||
- [हिन्दी](../../../docs/README.hi)
|
||||
- [Bahasa Melayu](../../../docs/README.ms)
|
||||
- [മലയാളം](../../../docs/README.ml)
|
||||
- [தமிழ்](../../../docs/README.ta)
|
||||
- [తెలుగు](../../../docs/README.te)
|
||||
- [Bahasa Indonesia](../../../docs/README.id)
|
||||
- [Italiano](../../../docs/README.it)
|
||||
- [日本語](../../../docs/README.ja)
|
||||
- [Nederlands](../../../docs/README.nl)
|
||||
- [नेपाली](../../../docs/README.np)
|
||||
- [Português](../../../docs/README.pt)
|
||||
- [Русский](../../../docs/README.ru)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ತ್ಯಾಗಪತ್ರಿಕೆ**:
|
||||
ಈ ದಾಖಲೆವು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸುವಾಗ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ತೃಟಿಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂಬುದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ಈ ದಾಖಲೆ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರ ಶಿಫಾರಸು ಮಾಡಲ್ಪಡುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಮನೋಭಾವ ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳು ಕುರಿತು ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
|
||||
"translation_date": "2026-01-08T11:38:33+00:00",
|
||||
"source_file": "docs/_sidebar.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
- ಪರಿಚಯ
|
||||
- [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
|
||||
- [2](../1-getting-started-lessons/2-github-basics/README.md)
|
||||
- [3](../1-getting-started-lessons/3-accessibility/README.md)
|
||||
|
||||
- ಜೆಎಸ್ ಮೂಲಭೂತಗಳು
|
||||
- [4](../2-js-basics/1-data-types/README.md)
|
||||
- [5](../2-js-basics/2-functions-methods/README.md)
|
||||
- [6](../2-js-basics/3-making-decisions/README.md)
|
||||
- [7](../2-js-basics/4-arrays-loops/README.md)
|
||||
|
||||
- ಎಚ್ಟಿಎಮ್ಎಲ್, ಸಿಎಸ್ಎಸ್, ಜೆಎಸ್
|
||||
- [8](../3-terrarium/1-intro-to-html/README.md)
|
||||
- [9](../3-terrarium/2-intro-to-css/README.md)
|
||||
- [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
- ಟೈಪಿಂಗ್ ಗೇಮ್
|
||||
- [11](../4-typing-game/typing-game/README.md)
|
||||
|
||||
- ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆಂಶನ್
|
||||
- [12](../5-browser-extension/1-about-browsers/README.md)
|
||||
- [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
|
||||
- [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
|
||||
|
||||
- ಸ್ಪೇಸ್ ಗೇಮ್
|
||||
- [15](../6-space-game/1-introduction/README.md)
|
||||
- [16](../6-space-game/2-drawing-to-canvas/README.md)
|
||||
- [17](../6-space-game/3-moving-elements-around/README.md)
|
||||
- [18](../6-space-game/4-collision-detection/README.md)
|
||||
- [19](../6-space-game/5-keeping-score/README.md)
|
||||
- [20](../6-space-game/6-end-condition/README.md)
|
||||
|
||||
- ಬ್ಯಾಂಕ್ ಪ್ರಾಜೆಕ್ಟ್
|
||||
- [21](../7-bank-project/1-template-route/README.md)
|
||||
- [22](../7-bank-project/2-forms/README.md)
|
||||
- [23](../7-bank-project/3-data/README.md)
|
||||
- [24](../7-bank-project/4-state-management/README.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಜಾಬಿತೆ**:
|
||||
ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ,ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸതತ್ಯತೆಗಳಿರಬಹುದು ಎಂದು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ವದೇಶಿ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಗುರ್ತಿಸದ ಅಥವಾ ತಪ್ಪಾದ ಅರ್ಥಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,80 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2026-01-08T10:12:30+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
### ಶಿಕ್ಷಕರಿಗೆ
|
||||
|
||||
ನೀವು ಈ ಪಠ್ಯಕ್ರಮವನ್ನು ನಿಮ್ಮ ತರಗತಿಯಲ್ಲಿ ಬಳಸಲು ಸ್ವಾಗತಾರ್ಹರಾಗಿದ್ದೀರಿ. ಇದು GitHub Classroom ಮತ್ತು ಪ್ರಮುಖ LMS ವೇದಿಕೆಗಳೊಂದಿಗೆ ಸಿಹಿ ಸಮನ್ವಯವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಇದು ನಿಮ್ಮ ವಿದ್ಯಾರ್ಥಿಗಳೊಂದಿಗೆ ಸ್ವತಂತ್ರ ರಿಪೊ ಆಗಿಯೂ ಬಳಸಬಹುದು.
|
||||
|
||||
### GitHub Classroom ಜೊತೆಗೆ ಬಳಸಿ
|
||||
|
||||
ಪ್ರತಿ ಗುಂಪು ಪ್ರಕಾರ ಪಾಠಗಳು ಮತ್ತು ಹುದ್ದೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು, ಪ್ರತಿ ಪಾಠಕ್ಕೆ ಒಂದೊಂದು ರಿಪೊವನ್ನು ಸೃಷ್ಟಿಸಿ ಅಂತೆ GitHub Classroom ಪ್ರತಿ ಹುದ್ದೆಯನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಜೋಡಿಸಬಹುದು.
|
||||
|
||||
- ಈ ರಿಪೊವನ್ನು ನಿಮ್ಮ ಸಂಸ್ಥೆಗೆ ಫೋರ್ಕ್ ಮಾಡಿ.
|
||||
- ಪ್ರತಿ ಪಾಠಕ್ಕಾಗಿ ಪ್ರತ್ಯೇಕ ರಿಪೊ ಅನ್ನು ರಚಿಸಿ, ಪ್ರತಿ ಪಾಠದ ಫೋಲ್ಡರ್ನ ವಿಷಯಗಳನ್ನು ಅದರಲ್ಲಿಗೆ ಹೊರತಗೊಳ್ಳಿ.
|
||||
- ಆಯ್ಕೆ A: ಖಾಲಿ ರಿಪೊಗಳನ್ನು (ಪ್ರತಿ ಪಾಠಕ್ಕೆ ಒಂದು) ರಚಿಸಿ ಮತ್ತು ಪಾಠ ಫೋಲ್ಡರ್ ವಿಷಯಗಳನ್ನು ಪ್ರತಿಯೊಂದರಲ್ಲಿಗೆ ನಕಲು ಮಾಡಿ.
|
||||
- ಆಯ್ಕೆ B: If provenance is needed, use Git ಇತಿಹಾಸವನ್ನು ಉಳಿಸುವ ವಿಧಾನವನ್ನು ಅನುಸರಿಸಿ (ಉದಾ: ಫೋಲ್ಡರ್ ಅನ್ನು ಹೊಸ ರಿಪೊಗೆ ವಿಭಜಿಸುವುದು).
|
||||
- GitHub Classroom ನಲ್ಲಿ, ಪ್ರತಿ ಪಾಠಕ್ಕೆ ಒಂದು ಹುದ್ದೆ ಸೃಷ್ಟಿಸಿ ಮತ್ತು ಅದನ್ನು ಸೂಕ್ತ ಪಾಠ ರಿಪೊಗೆ ಸೂಚಿಸಿ.
|
||||
- ಶಿಫಾರಸು ಮಾಡಲಾದ ಸೆಟ್ಟಿಂಗ್ಗಳು:
|
||||
- ರಿಪೊ ವೀಕ್ಷಣೀಯತೆ: ವಿದ್ಯಾರ್ಥಿಗಳ ಕೆಲಸಕ್ಕೆ ಖಾಸಗಿ ಸೇವನೆ.
|
||||
- ಸ್ಟಾರ್ಟರ್ ಕೋಡ್ ಪಾಠ ರಿಪೊ ಮೂಲ ಶಾಖೆಯಿಂದ ಬಳಸಿ.
|
||||
- ಕ್ವಿಜ್ಗಳು ಮತ್ತು ಸಲ್ಲಿಕೆಗಳಿಗೆ ಇಷ್ಯೂಗಳು ಮತ್ತು ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಸೇರಿಸಿ.
|
||||
- ನಿಮ್ಮ ಪಾಠಗಳಲ್ಲಿ ಇದ್ದರೆ ಸ್ವಯಂಮತ್ಸರಿಗೆ ಮತ್ತು ಪರೀಕ್ಷೆಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ ಸನ್ನಿಹಿತಗೊಳಿಸಬಹುದು.
|
||||
- ಸಹಾಯಕ ನಿಯಮಗಳು:
|
||||
- ರಿಪೊ ಹೆಸರುಗಳು ಹೀಗೆ ಇರಲಿ: lesson-01-intro, lesson-02-html, ಇತ್ಯಾದಿ.
|
||||
- ಲೇಬಲ್ಗಳು: quiz, assignment, needs-review, late, resubmission.
|
||||
- ಗುಂಪುಗಳ ಪ್ರಕಾರ ಟ್ಯಾಗ್ಗಳು/ವಿಡೀಕರಣಗಳು (ಉದಾ: v2025-term1).
|
||||
|
||||
ಟಿಪ್: Git ಸಂಘರ್ಷಗಳ ತಡೆಗಾಗಿ ಸಿಂಕ್ ಮಾಡಲಾದ ಫೋಲ್ಡರ್ಗಳ ಒಳಗೆ (ಉದಾ: OneDrive/Google Drive) ರಿಪೊಗಳನ್ನು ಉಳಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ವಿಶೇಷವಾಗಿ Windows ನಲ್ಲಿ.
|
||||
|
||||
### Moodle, Canvas, ಅಥವಾ Blackboard ಜೊತೆ ಬಳಸಿ
|
||||
|
||||
ಈ ಪಠ್ಯಕ್ರಮದಲ್ಲಿ ಸಾಮಾನ್ಯ LMS ಕಾರ್ಯಪ್ರವಾಹಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದಾದ ಆಮದು ಪ್ಯಾಕೇಜ್ಗಳು ಸೇರಿವೆ.
|
||||
|
||||
- Moodle: ಪೂರ್ಣ ಕೋರ್ಸ್ ಲೋಡ್ ಮಾಡಲು Moodle ಅಪ್ಲೋಡ್ ಫೈಲ್ [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) ಬಳಸಿ.
|
||||
- Common Cartridge: ಹೆಚ್ಚಿನ LMS ಹೊಂದಾಣಿಕೆಗೆ Common Cartridge ಫೈಲ್ [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) ಬಳಸಿ.
|
||||
- ಟಿಪ್ಪಣಿಗಳು:
|
||||
- Moodle ಕ್ಲೌಡ್ಗೆ Common Cartridge ಬೆಂಬಲ ಸೀಮಿತವಾಗಿದೆ. ಮೇಲಿನ Moodle ಫೈಲ್ನ್ನು ವಿಷಯಪ್ರಕಾರ Canvas ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಬಹುದು.
|
||||
- ಆಮದು ನಂತರ, ನೀವು ಉಪನ್ಯಾಸ ಸಮಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಮೊಡ್ಯೂಲ್ಗಳು, ದಿನಾಂಕಗಳು ಮತ್ತು ಕ್ವಿಜ್ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.
|
||||
|
||||
|
||||
> Moodle ತರಗತಿಯಲ್ಲಿ ಪಠ್ಯಕ್ರಮ
|
||||
|
||||
|
||||
> Canvas ನಲ್ಲಿ ಪಠ್ಯಕ್ರಮ
|
||||
|
||||
### ರಿಪೊ ಅನ್ನು ನೇರವಾಗಿ ಬಳಸಿ (Classroom ಇಲ್ಲದೆ)
|
||||
|
||||
ನೀವು GitHub Classroom ಬಳಸಲು ಇಚ್ಛಿಸದಿದ್ದರೆ, ಈ ರಿಪೊದಿಂದಲೇ ಕೋರ್ಸ್ ನಡೆದುಕೊಳ್ಳಬಹುದು.
|
||||
|
||||
- ಸಹಕಾಲಿಕ/ಆನ್ಲೈನ್ ವಿನ್ಯಾಸಗಳು (Zoom/Teams):
|
||||
- ಸಣ್ಣ ಮಾರ್ಗದರ್ಶಕರಾಗಿರುವ ತಳಮಳಿಸುಗೆಗಳು ಜರುಗಿಸಿ; ಕ್ವಿಜ್ಗಳಿಗೆ ಬ್ರೇಕ್ಔಟ್ ರೂಮ್ಗಳನ್ನು ಬಳಸಿರಿ.
|
||||
- ಕ್ವಿಜ್ಗಳಿಗೆ ಸಮಯ ವಿಂಡೊನ್ನು ಪ್ರಕಟಿಸಿ; ವಿದ್ಯಾರ್ಥಿಗಳು ಉತ್ತರಗಳನ್ನು GitHub Issues ಮೂಲಕ ಸಲ್ಲಿಸುತ್ತಾರೆ.
|
||||
- ಸಹಕಾರ ಹುದ್ದೆಗಳಿಗೆ, ವಿದ್ಯಾರ್ಥಿಗಳು ಸಾರ್ವಜನಿಕ ಪಾಠ ರಿಪೊಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸಿ ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್ ತೆರೆಯುತ್ತಾರೆ.
|
||||
- ಖಾಸಗಿ/ಅಸಹಕರಿಶಾಲಿ ವಿನ್ಯಾಸಗಳು:
|
||||
- ವಿದ್ಯಾರ್ಥಿಗಳು ತಮ್ಮದೇ ಖಾಸಗಿ ರಿಪೊಗಳಿಗೆ ಪ್ರತಿ ಪಾಠವನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮನ್ನು ಸಹಕಾರಿಯಾಗಿ ಸೇರಿಸಿಕೊಳ್ಳುತ್ತಾರೆ.
|
||||
- ಇಷ್ಯೂಗಳು (ಕ್ವಿಜ್ಗಳು) ಮತ್ತು ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್ಗಳು (ಹುದ್ದೆಗಳು) ಮೂಲಕ ನೀವು ಅಥವಾ ಅವರು ತಮ್ಮ ಖಾಸಗಿ ರಿಪೊಗಳಲ್ಲಿನ ತರಗತಿ ರಿಪೊಗೆ ಸಲ್ಲಿಕೆ ಮಾಡುತ್ತಾರೆ.
|
||||
|
||||
### ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
|
||||
|
||||
- Git/GitHub ಮೂಲ बातें, Issues, ಮತ್ತು PRs ಬಗ್ಗೆ ಪರಿಚಯ ಪಾಠವನ್ನು ನೀಡಿರಿ.
|
||||
- ಎಲೈಗು-ಹಂತೀಯ ಕ್ವಿಜ್/ಹುದ್ದೆಗಳಿಗೆ Issues ನಲ್ಲಿ ಚೆಕ್ಲಿಸ್ಟ್ಗಳನ್ನು ಬಳಸಿರಿ.
|
||||
- ತರಗತಿ ನಿಯಮಗಳನ್ನು ಸ್ಥಾಪಿಸಲು CONTRIBUTING.md ಮತ್ತು CODE_OF_CONDUCT.md ಸೇರಿಸಿ.
|
||||
- ಪ್ರವೇಶ ಸಾಧನಗಳ ಸೂಚನೆಗಳು (alt ಪಠ್ಯ, ಕ್ಯಾಪ್ಶನ್ಗಳು) ಮತ್ತು ಮುದ್ರಣযোগ্য PDF ಗಳು ಒದಗಿಸಿ.
|
||||
- ಸರ್ವರಿಸು ಪ್ರತಿ ಅವಧಿಗೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ವರ್ಝನ್ ಮಾಡಿ ಮತ್ತು ಪ್ರಕಟಣೆಯ ನಂತರ ಪಾಠ ರಿಪೊಗಳನ್ನು ಸ್ಥಗಿತಗೊಳಿಸಿ.
|
||||
|
||||
### ಪ್ರತಿಕ್ರিয়া ಮತ್ತು ಬೆಂಬಲ
|
||||
|
||||
ನಾವು ಈ ಪಠ್ಯಕ್ರಮವು ನೀವು ಮತ್ತು ನಿಮ್ಮ ವಿದ್ಯಾರ್ಥಿಗಳು ಬಳಸಲು ಸಹಾಯಕವಾಗಿರಲು ಬಯಸುತ್ತೇವೆ. ದಯವಿಟ್ಟು ಈ ರಿಪೊದಲ್ಲಿ ಹೊಸ Issue ತೆರೆಯಿರಿ ದೋಷಗಳು, ವಿನಂತಿಗಳು, ಅಥವಾ ಸುಧಾರಣೆಗಳಿಗೆ, ಅಥವಾ Teacher Corner ನಲ್ಲಿ ಚರ್ಚೆ ಪ್ರಾರಂಭಿಸಿ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಬಾಧ್ಯತಾ ವಿವರಣೆ**:
|
||||
ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತೈರ್ಯತೆಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲದ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಲಾಗಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ತಜ್ಞ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಮಾಡಿಕೊಳ್ಳದ ಜೀವಮಾನಗಳಿಗೆ ನಾವು ಹೊಣೆ ಹೊರುವುದಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,67 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
|
||||
"translation_date": "2026-01-08T11:41:47+00:00",
|
||||
"source_file": "lesson-template/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# [ಪಾಠ ವಿಷಯ]
|
||||
|
||||
|
||||
|
||||
## [ಪೂರ್ವ-ವಾರ್ತಾ ಪ್ರಶ್ನೋತ್ತರ](../../../lesson-template/quiz-url)
|
||||
|
||||
[ನಾವು ಏನು ಕಲಿಯಲಿದ್ದೇವೆ ಎಂಬುದನ್ನು ವಿವರಿಸಿ]
|
||||
|
||||
### ಪರಿಚಯ
|
||||
|
||||
ಏನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಎಂದು ವಿವರಿಸಿ
|
||||
|
||||
> ನೋಟ್ಸ್
|
||||
|
||||
### ಪೂರ್ವಾವಶ್ಯಕತೆ
|
||||
|
||||
ಈ ಪಾಠಕ್ಕೂ ಮುಂಚೆ ಯಾವ ಹಂತಗಳನ್ನು ಕವರ್ ಮಾಡಿರಬೇಕು?
|
||||
|
||||
### ತಯಾರಿ
|
||||
|
||||
ಈ ಪಾಠವನ್ನು ಪ್ರಾರಂಭಿಸಲು ತಯಾರಿ ಹಂತಗಳು
|
||||
|
||||
---
|
||||
|
||||
[ವಿಷಯವನ್ನು ಕಂಟೆಂಟ್ ಬ್ಲಾಕ್ಗಳಲ್ಲಿ ಹಂತ ಹಂತವಾಗಿ ನಡೆಸಿ]
|
||||
|
||||
## [ವಿಷಯ 1]
|
||||
|
||||
### ಕಾರ್ಯ:
|
||||
|
||||
ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್ ಅನ್ನು ಹಂತ ಹಂತವಾಗಿ ಸುಧಾರಿಸಲು ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡಿ ಮತ್ತು ಹಂಚಿಕೊಳ್ಳುವ ಕೋಡಿನೊಂದಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ಮಿಸಿ:
|
||||
|
||||
```html
|
||||
code blocks
|
||||
```
|
||||
|
||||
✅ ಜ್ಞಾನ ಪರಿಶೀಲನೆ - ವಿದ್ಯಾರ್ಥಿಗಳ ಕೌಶಲ್ಯವನ್ನು ತೆರ Luizಟ ಪ್ರಶ್ನೆಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸಲು ಈ ಕ್ಷಣವನ್ನು ಉಪಯೋಗಿಸಿ
|
||||
|
||||
## [ವಿಷಯ 2]
|
||||
|
||||
## [ವಿಷಯ 3]
|
||||
|
||||
🚀 ಸವಾಲು: ತರಗತಿಯಲ್ಲಿ ಸಹಯೋಗದಲ್ಲಿ ಪ್ರಾಜೆಕ್ಟ್ ಸುಧಾರಿಸಲು ವಿದ್ಯಾರ್ಥಿಗಳಿಗೆ ಸವಾಲನ್ನು ಸೇರಿಸಿ
|
||||
|
||||
ಐಚ್ಛಿಕ: ಪೂರ್ಣಗೊಂಡ ಪಾಠದ UI-ಯ ಸ್ಕ್ರೀನ್ಶಾಟ್ ಅನ್ನು ಬೇಕಾದರೆ ಸೇರಿಸಿ
|
||||
|
||||
## [ಪೋಸ್ಟ್-ವಾರ್ತಾ ಪ್ರಶ್ನೋತ್ತರ](../../../lesson-template/quiz-url)
|
||||
|
||||
## ವಿಮರ್ಶೆ & ಸ್ವ-ಅಧ್ಯಯನ
|
||||
|
||||
**ನಿಬಂಧನೆ ಸಲ್ಲಿಸುವ ದಿನಾಂಕ [MM/YY]**: [ನಿಬಂಧನೆ ಹೆಸರು](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಅತ್ಯಂತ ಜಾಗೃತಿ ಸೂಚನೆ**:
|
||||
ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ ಏಐ ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ನಂಬಲಾದ ಮೂಲಮಾಹಿತಿಯಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗಳಿಕೆಗಳಿಗೆ ಅಥವಾ ಅಸಮಜಿಕೆಗಳಿಗೆ ನಾವು ಹೊಣೆ ಹೊಳ್ಳುವುದಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
|
||||
"translation_date": "2026-01-08T11:42:36+00:00",
|
||||
"source_file": "lesson-template/assignment.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
# [ನಿಯುಕ್ತಿಯ ಹೆಸರು]
|
||||
|
||||
## ಸೂಚನೆಗಳು
|
||||
|
||||
## ರೂಬ್ರಿಕ್
|
||||
|
||||
| ಮಾನದಂಡ | ಉದಾಹರಣೀಯ | ಯಥಾರ್ಥ | ಸುಧಾರಣೆಗೆ ಅಗತ್ಯವಿದೆ |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| | | | |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ಅस्वೀಕರಣ**:
|
||||
ಈ ದಸ್ತಾವೇಜು [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ಉಪಯೋಗಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಶ್ರದ್ಧೆಯಿಂದ ಸರಿಯಾಗಿರುವಂತೆ ಕೆಲಸ ಮಾಡಲಾಗುತ್ತಿದ್ದು ಸಹ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿರಿಸಿ. ಮೂಲ документы ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಅತ್ಯಾವಶ್ಯಕ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಪ misunderstandings ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗಿಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,52 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "ff47271e53637b2ba6ba72ad2b70f6d7",
|
||||
"translation_date": "2026-01-08T11:29:35+00:00",
|
||||
"source_file": "memory-game/README.md",
|
||||
"language_code": "kn"
|
||||
}
|
||||
-->
|
||||
ಈದು [Next.js](https://nextjs.org) ಪ್ರಾಜೆಕ್ಟ್ ಆಗಿದ್ದು, [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸೃಷ್ಟಿಸಲಾಗಿದೆ.
|
||||
|
||||
## ಪ್ರಾರಂಭಿಸುವುದು
|
||||
|
||||
ಮೊದಲು, ಡೆವೆಲಪ್ಮೆಂಟ್ ಸರ್ವರ್ ಅನ್ನು ಚಾಲನೆ ಮಾಡಿ:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# ಅಥವಾ
|
||||
yarn dev
|
||||
# ಅಥವಾ
|
||||
pnpm dev
|
||||
# ಅಥವಾ
|
||||
bun dev
|
||||
```
|
||||
|
||||
ನೀವು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ [http://localhost:3000](http://localhost:3000) ತೆರೆಯಿರಿ ಫಲಿತಾಂಶವನ್ನು ನೋಡಲು.
|
||||
|
||||
ನೀವು ಪುಟವನ್ನು ಸಂಪಾದಿಸುವುದನ್ನು `app/page.js` ಫೈಲ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಬಹುದು. ಫೈಲ್ ಅನ್ನು ಸಂಪಾದಿಸುವಂತೆ ಪುಟ ಸ್ವಯಂಚಾಲಿತವಾಗಿ تازهಗೊಳ್ಳುತ್ತದೆ.
|
||||
|
||||
ಈ ಪ್ರಾಜೆಕ್ಟ್ [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) ಅನ್ನು ಬಳಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ [Geist](https://vercel.com/font), Vercel ಗೆ ಹೊಸ ಫಾಂಟ್ ಕುಟುಂಬವನ್ನು ಅಕ串ಿಸುತ್ತದೆ ಮತ್ತು ಲೋಡ್ ಮಾಡುತ್ತದೆ.
|
||||
|
||||
## ಇನ್ನಷ್ಟು ಕಲಿಯಿರಿ
|
||||
|
||||
Next.js ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಲು, ಕೆಳಗಿನ ಸಂಪನ್ಮೂಲಗಳನ್ನು ನೋಡಿ:
|
||||
|
||||
- [Next.js ಪ್ರलेಖನ](https://nextjs.org/docs) - Next.js ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು API ಬಗ್ಗೆ ಕಲಿಯಿರಿ.
|
||||
- [Next.js ಕಲಿಕೆ](https://nextjs.org/learn) - ಇಂಟರಾಕ್ಟಿವ್ Next.js ತರಬೇತಿ.
|
||||
|
||||
ನೀವು [Next.js GitHub ಸಂಗ್ರಹಾಲಯ](https://github.com/vercel/next.js) ಅನ್ನು ಪರಿಶೀಲಿಸಬಹುದು - ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯೆಗಳು ಮತ್ತು ಕೊಡುಗೆಗಳು ಸ್ವಾಗತ.
|
||||
|
||||
## Vercel ನಲ್ಲಿ ನಿಯೋಜಿಸು
|
||||
|
||||
ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯೋಜಿಸಲು ಸುಲಭ ಮಾರ್ಗವಾಗಿದೆ [Vercel ಪ್ಲಾಟ್ಫಾರ್ಮ್](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) ಅನ್ನು ಬಳಸುವುದು, ಅದು Next.js ರಚನಕಾರರಿಂದ ಬಂದಿದೆ.
|
||||
|
||||
ನಮ್ಮ [Next.js ನಿಯೋಜನೆ ದಸ್ತಾವೇಜು](https://nextjs.org/docs/app/building-your-application/deploying) ನೋಡಿ ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗೆ.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ನಿರಾಕರಣ**:
|
||||
ಈ ದಾಖಲೆ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಿರಿ. ಮೂಲ ಭಾಷೆಯ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
||||
"translation_date": "2026-01-08T20:23:09+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# അസൈൻമെന്റ്: ആധുനിക വെബ് ഡവലപ്പ്മെന്റ് ടൂളുകൾ അന്വേഷിക്കൽ
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
വെബ് ഡവലപ്പ്മെന്റ് പരിസരത്ത് നൂറ്റുകണക്കിന് പ്രത്യേക ടൂളുകൾ ഉൾപ്പെടുന്നു, അവ ഡവലപ്പർമാർക്ക് അപ്ലിക്കേഷനുകൾ കാര്യക്ഷമമായി നിർമ്മിക്കാൻ, പരീക്ഷിക്കാൻ, സംരക്ഷിക്കാൻ സഹായിക്കുന്നു. ഈ പാഠത്തിൽ ഉൾപ്പെടുത്താത്ത, അതിന്റെ പൂരകമായ ടൂളുകൾ അന്വേഷിക്കുകയും മനസ്സിലാക്കുകയും ചെയ്യുക എന്നതാണ് നിങ്ങളുടെ പണി.
|
||||
|
||||
**നിങ്ങളുടെ ദൗത്യമായിരിക്കും:** ഈ പാഠത്തിൽ ഉൾക്കൊണ്ടിട്ടില്ലാത്ത **മൂന്നു ടൂൾസ്** തിരഞ്ഞെടുക്കുക (ഇവിടെ നൽകിയ കോഡ് എൻഡിറ്ററുകൾ, ബ്രൗസറുകൾ, കമാൻഡ് ലൈനിൽ ഉപയോഗിക്കുന്ന ടൂളുകൾ തിരഞ്ഞെടുക്കാതിരിക്കുക). ആധുനിക വെബ് ഡവലപ്പ്മെന്റ് പ്രവൃത്തിസ്രോതസ്സുകളിൽ പ്രത്യേക പ്രശ്നങ്ങൾ പരിഹരിക്കുന്ന ടൂളുകളിലാണ് ശ്രദ്ധ കേന്ദ്രീകരിക്കേണ്ടത്.
|
||||
|
||||
**ഓരോ ടൂളിനും നൽകേണ്ടത്:**
|
||||
|
||||
1. **ടൂൾ പേര്യും വിഭാഗവും** (ഉദാഹരണത്തിന് "Figma - ഡിസൈൻ ടൂൾ" അല്ലെങ്കിൽ "Jest - ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക्")
|
||||
2. **ഉദ്ദേശ്യം, പ്രയോക്ഷങ്ങളും** - 2-3 വാക്യത്തിൽ വെബ് ഡവലപ്പർ ഈ ടൂൾ ഉപയോഗിക്കുന്നതിന്റെ കാരണവും അത് പരിഹരിക്കുന്ന പ്രശ്നങ്ങളും വിശദീകരിക്കുക
|
||||
3. **അധികൃത ഡോക്യുമെന്റേഷൻ ലിങ്ക്** - ടൂളിന്റെ അധികൃത ഡോക്യുമെന്റേഷൻ അല്ലെങ്കിൽ വെബ്സൈറ്റിലേയ്ക്ക് ലിങ്ക് നൽകുക (പഠനസൈറ്റുകൾ അല്ല)
|
||||
4. **സാങ്കേതിക പ്രവർത്തന പശ്ചാത്തലം** - പ്രൊഫഷണൽ ഡവലപ്പ്മെന്റ് പ്രവൃത്തിസ്രോതസ്സിൽ ഈ ടൂൾ എങ്ങനെ ഉൾക്കൊള്ളുന്നു എന്ന് ഒന്ന് പറയുക
|
||||
|
||||
## നിർദേശിച്ച ടൂൾ വിഭാഗങ്ങൾ
|
||||
|
||||
ഈ വിഭാഗങ്ങളിൽ നിന്നുള്ള ടൂളുകൾ അന്വേഷിക്കുക:
|
||||
|
||||
| വിഭാഗം | ഉദാഹരണങ്ങൾ | അവ ചെയ്യുന്നത് |
|
||||
|----------|----------|--------------|
|
||||
| **ബിൽഡ് ടൂളുകൾ** | Vite, Webpack, Parcel, esbuild | പ്രൊഡക്ഷൻ വേണ്ടി കോഡ് ബണ്ടിൽ ചെയ്ത് ഓപ്റ്റിമൈസ് ചെയ്യുകയും വേഗത്തിലുള്ള ഡവലപ്പ്മെന്റ് സെർവറുകൾ നൽകുകയും ചെയ്യുന്നു |
|
||||
| **ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകൾ** | Vitest, Jest, Cypress, Playwright | കോഡ് ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുകയും ബഗുകൾ കണ്ടെത്തുകയും ചെയ്യുന്നു |
|
||||
| **ഡിസൈൻ ടൂളുകൾ** | Figma, Adobe XD, Penpot | മോകപ്പുകൾ, പ്രോട്ടോട്ടൈപ്പുകൾ, ഡിസൈൻ സിസ്റ്റങ്ങൾ സഹകരിച്ച് സൃഷ്ടിക്കുന്നു |
|
||||
| **ഡിപ്ലോയ്മെന്റ് പ്ലാറ്റ്ഫോമുകൾ** | Netlify, Vercel, Cloudflare Pages | സൈറ്റ് ഹോസ്റ്റ് ചെയ്ത് സ്വയം CI/CD ആണോട് വിതരണം ചെയ്യുന്നു |
|
||||
| **വർഷൻ കൺട്രോൾ** | GitHub, GitLab, Bitbucket | കോഡ് മാറ്റങ്ങൾ, സഹകരണം, പ്രോജക്ട് പ്രവൃത്തിസ്രോതസ്സുകൾ നിയന്ത്രിക്കുന്നു |
|
||||
| **CSS ഫ്രെയിംവർക്കുകൾ** | Tailwind CSS, Bootstrap, Bulma | മുൻകൂട്ടി തയ്യാറാക്കിയ കോംപോണന്റ് ലൈബ്രറികൾ ഉപയോഗിച്ച് സ്റ്റൈലിംഗ് വേഗത്തിലാക്കുന്നു |
|
||||
| **പ్యാക്കേജ് മാനേജർമാർ** | npm, pnpm, Yarn | കോഡ് ലൈബ്രറികൾ, ഡിപെൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്ത് മാനേജ് ചെയ്യുന്നു |
|
||||
| **ആക്സസിബിലിറ്റി ടൂളുകൾ** | axe-core, Lighthouse, Pa11y | ഉൾപ്പെടുത്തലുള്ള ഡിസൈൻ, WCAG പാലന പരിശോധന നടത്തുന്നു |
|
||||
| **API ഡവലപ്പ്മെന്റ്** | Postman, Insomnia, Thunder Client | ഡവലപ്പ്മെന്റിനിടെ APIകൾ പരീക്ഷിക്കുകയും ഡോക്യുമെന്റ് ചെയ്യുകയും ചെയ്യുന്നു |
|
||||
|
||||
## ഫോർമാറ്റ് ആവശ്യങ്ങൾ
|
||||
|
||||
**ഓരോ ടൂളിനും:**
|
||||
```
|
||||
### [Tool Name] - [Category]
|
||||
|
||||
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
||||
|
||||
**Documentation:** [Official website/documentation link]
|
||||
|
||||
**Workflow Integration:** [1 sentence about how it fits into development process]
|
||||
```
|
||||
|
||||
## ഗുണമേന്മ ഗൈഡ്ലൈനുകൾ
|
||||
|
||||
- **നിലവിലുള്ള ടൂളുകൾ തിരഞ്ഞെടുക്കുക**: 2025-ൽ സജീവമായി പരിപാലിക്കുകയും വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്നതുമായ ടൂളുകൾ തിരഞ്ഞെടുക്കുക
|
||||
- **പ്രാധാന്യമേൽക്കുക**: ടൂൾ എന്ത് ചെയ്യുന്നതാണ് ഞെളിയാക്കരുത്, പക്ഷേ അതിന്റെ പ്രത്യേക പ്രയോജനങ്ങൾ വിശദീകരിക്കുക
|
||||
- **കൃത്യമായ സാങ്കേതിക പശ്ചാത്തലം**: മന:പൂർവം സാങ്കേതിക ടീമുകൾ ഉപയോഗിക്കുന്ന ടൂളുകൾ പരിഗണിക്കുക, ഹോബിസ്റ്റുകൾ മാത്രം അല്ല
|
||||
- **വിവിധ വിഭാഗങ്ങൾ**: വ്യത്യസ്ത വിഭാഗത്തിൽ നിന്നുള്ള ടൂളുകൾ തിരഞ്ഞെടുക്കുക, പരിസരത്തിന്റെ വിപുലത കാണിക്കാൻ
|
||||
- **ആധുനിക പ്രസക്തി**: ഇപ്പോഴത്തെ വെബ് ഡവലപ്പ്മെന്റ് പ്രവണതകൾക്കും മികച്ച രീതികൾക്കും അനുയോജ്യമായ ടൂളുകൾ മുൻനിരയിൽ വയ്ക്കുക
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| ഉത്തമം | നന്നാണ് | മെച്ചപ്പെടുത്തലിന് ആവശ്യം |
|
||||
|-----------|------|-------------------|
|
||||
| **പ്രതിയായിട്ടും ടൂൾ ഉപയോക്താക്കളും അവ പരിഹരിക്കുന്ന പ്രശ്നങ്ങളും വ്യക്തമായി വിശദീകരിച്ചു** | **ടൂൾ എന്ത് ചെയ്യുന്നതെന്ന് വിശദീകരിച്ചു, പ്രയോജനത്തെ കുറിച്ചുള്ള ചില പശ്ചാത്തലങ്ങൾ വിട്ടുപോയി** | **ടൂളുകൾ അപരിചിതരായി എണ്ണിയിരിക്കുന്നു, അവയുടെ ഉദ്ദേശ്യം അല്ലെങ്കിൽ പ്രയോജനങ്ങൾ വ്യക്തമാക്കിയിട്ടില്ല** |
|
||||
| **എല്ലാ ടൂളുകളുടെ അധികൃത ഡോക്യുമെന്റേഷൻ ലിങ്കുകൾ നൽകിയിട്ടുണ്ട്** | **അധികം അധികൃത ലിങ്കുകൾ നൽകി, ചിലത് 1-2 പഠനസൈറ്റുകൾ** | **പ്രധാനമായും പഠനസൈറ്റുകളിൽ ആശ്രയിച്ചു, അധികൃത ഡോക്യുമെന്റേഷൻ കുറഞ്ഞു** |
|
||||
| **നിലവിലുള്ള, പ്രൊഫഷണൽ ഉപയോഗത്തിലുള്ള, വ്യത്യസ്ത വിഭാഗങ്ങളിൽ നിന്നുള്ള ടൂളുകൾ തിരഞ്ഞെടുക്കപ്പെട്ടു** | **നന്നായി ടൂളുകൾ തെരഞ്ഞെടുത്തു, എന്നാൽ വിഭാഗ വ്യത്യാസം സിമിതമായിരുന്നു** | **പഴയാ ടൂളുകൾ മാത്രം, അല്ലെങ്കിൽ ഒരേ വിഭാഗത്തിൽ നിന്നുള്ള ടൂളുകൾ മാത്രം** |
|
||||
| **ടൂളുകൾ ഡവലപ്പ്മെന്റ് പ്രവൃത്തിസ്രോതസ്സിൽ എങ്ങനെ ചേരുന്നു എന്നുള്ള മനസ്സിലാക്കൽ തെളിയിച്ചു** | **പ്രൊഫഷണൽ പ്രവൃത്തിസ്രോതസ്സിലെ ചില ബോധം കാണിച്ചു** | **ടൂൾ ഫീച്ചറുകളിലുള്ള ശ്രദ്ധ മാത്രമാണ്, പ്രവൃത്തിസ്രോതസ്സിലെ ഗൂഢനിർവചനങ്ങൾ ഇല്ല** |
|
||||
|
||||
> 💡 **അന്വേഷണ ഇനം:** വെബ് ഡവലപ്പർമാർക്ക് ജോബ് പോസ്റ്റിംഗുകളിൽ പ്രത്യക്ഷപ്പെടുന്ന ടൂളുകൾ അന്വേഷിക്കുക, ജനപ്രിയ ഡവലപ്പർ സർവേകൾ പരിശോധിക്കുക, യഥാർത്ഥത്തിൽ വിജയിച്ച ഓപ്പൺ സോഴ്സ് പ്രോജക്ടുകളിൽ ഉപയോഗിക്കുന്ന ഡിപെൻഡൻസികൾ കണ്ടുപിടിക്കുക!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകാര്യം**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എ.ഐ. ഭാഷാ പരിഭാഷാ സേവനം ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തിരിക്കുന്നു. ഞങ്ങൾ കാര്യക്ഷമതയിലേക്ക് ശ്രമിക്കുന്നുവെങ്കിലും, സ്വയമേറ്റ പരിഭാഷകളിൽ പിശകുകളും അസത്യതകളും ഉണ്ടാകാനുള്ള സാധ്യതയുണ്ട് എന്ന് കരുതുക. അതിനാൽ, യഥാർത്ഥ പ്രമാണം അതിന്റെ സ്വതന്ത്ര ഭാഷയിൽ തികച്ചും പ്രാമാണികമായ ഉറവിടമെന്ന നിലയിൽ പരിഗണിക്കണമെന്നും ശുപാർശ ചെയ്യുന്നു. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ഉപഭോഗിക്കുന്നത് ഉചിതമാണ്. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നതിനാൽ സൃഷ്ടമായ ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും തെറ്റായ വ്യഖ്യാനങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
||||
"translation_date": "2026-01-08T19:53:39+00:00",
|
||||
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
Translation for chunk 1 of 'assignment.md' skipped due to timeout.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അവകാശവകാശ ഒഴിവാക്കൽ**:
|
||||
ഈ ഡോക്യുമെന്റ് AI തർജ്ജമ സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജ്ജിമ ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്കായി ശ്രമിക്കുന്നതിനുശേഷവും, സ്വയമേവ നടത്തുന്ന തർജ്ജമയിൽ പിഴവുകൾ അല്ലെങ്കിൽ പിശകുകൾ ഉണ്ടായിരിക്കാമെന്നത് ദയവായി മനസിലാക്കുക. മൗലികമായി ഉള്ള അവിടെ പ്രമാണം ഉറപ്പുള്ള സൂത്രമായി പരിഗണിക്കേണ്ടതാണ്. നിർണായകമായ വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജമ നിർദേശിക്കപ്പെടുന്നു. ഈ തർജ്ജമ ഉപയോഗിക്കുന്നതിലൂടെ ഉദയിക്കുന്ന യാതൊരു തെറ്റുഅർത്ഥമാക്കലിനെയും ഞങ്ങൾ ഉത്തരവാദിത്വം ഏറ്റെടുക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "770d9f83dddc841c19f210dee5fe0712",
|
||||
"translation_date": "2026-01-08T11:40:19+00:00",
|
||||
"source_file": "1-getting-started-lessons/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# വെബ്ബ് വികസനത്തില് ആരംഭിക്കുക
|
||||
|
||||
പഠനക്രമത്തിലെ ഈ വിഭാഗത്തില്, പ്രൊഫഷണല് ഡെവലപ്പറായി മാറാന് പ്രാധാന്യമുള്ള പ്രോജക്ട് അടിസ്ഥാനമല്ലാത്ത ആശയങ്ങളിലേക്ക് നിങ്ങളെ പരിചയപ്പെടുത്തും.
|
||||
|
||||
### വിഷയങ്ങള്
|
||||
|
||||
1. [പ്രോഗ്രാമിംഗ് ഭാഷകളും വ്യാപാര ഉപകരണങ്ങളും - പരിചയം](1-intro-to-programming-languages/README.md)
|
||||
2. [GitHub പരിചയം](2-github-basics/README.md)
|
||||
3. [ആക്സസ്IBILിറ്റി അടിസ്ഥാനങ്ങള്](3-accessibility/README.md)
|
||||
|
||||
### ക്രെഡിറ്റുകള്
|
||||
|
||||
പ്രോഗ്രാമിംഗ് ഭാഷകളും വ്യാപാര ഉപകരണങ്ങളും - പരിചയം ജാസ്മിന് ഗ്രീനവേയ് എഴുതിയത് ♥️ ആയി [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
|
||||
GitHub പരിചയം ഫ്ലോര് ഡ്രീസ് എഴുതിയത് ♥️ ആയി [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
ആക്സസ്IBILിറ്റി അടിസ്ഥാനങ്ങള് ക്രിസ്റ്റോഫര് ഹാരിസണ് എഴുതിയത് ♥️ ആയി [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരാമർശം**:
|
||||
ഈ ഡോക്യുമെന്റ് AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതക്കായി ശ്രമിച്ചിട്ടുണ്ടെങ്കിലും, യന്ത്രം നിർവ്വചിക്കുന്ന വിവർത്തനങ്ങളിൽ പിഴവുകളും അപ്രത്യക്ഷതകളും ഉണ്ടാകാം എന്ന് ദയവായി മനസ്സിലാക്കിയിരിക്കുക. അതിന്റെ മാതൃഭാഷയിലുള്ള ആദ്യ ഡോക്യുമെന്റ് മാത്രമാണ് അവകാശപ്പെട്ട ഉറവിടം. അതീവപ്രധാനമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ ഉണ്ടായ നടത്താപരമായ തെറ്റുകളോ തെറ്റിദ്ധാരണകളോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,103 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "6fd645e97c48cd5eb5a3d290815ec8b5",
|
||||
"translation_date": "2026-01-08T12:43:33+00:00",
|
||||
"source_file": "2-js-basics/1-data-types/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# Data Types Practice: ഇ-കൊമേഴ്സ് ഷോപ്പിംഗ് കാർട്ട്
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
നീ സ്വപ്നം കണ്ടുക വാണിജ്യ വേഗതയേറിയ ഇ-കൊമേഴ്സ് ഷോപ്പിംഗ് കാൾട്ട് സിസ്റ്റം നിർമ്മിക്കുന്നു. ഈ അസൈൻമെന്റ് വ്യത്യസ്ത ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റാ ടൈപ്പുകൾ എങ്ങനെ പരസ്പരം ചേർന്ന് യഥാർത്ഥ ലോക അപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നുവെന്ന് മനസ്സിലാക്കാൻ സഹായിക്കും.
|
||||
|
||||
### നിങ്ങളുടെ പ്രവർത്തനം
|
||||
|
||||
ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റാ ടൈപ്പുകൾ ഒരു ഷോപ്പിംഗ് കാർട്ട് അപ്ലിക്കേഷനിൽ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് സമഗ്രമായി വിശകലനം ചെയ്യുക. ഏഴ് പ്രിമിറ്റീവ് ഡാറ്റാ ടൈപ്പുകളുടെയും ഒബ്ജക്റ്റിന്റെയും ഓരോതും താഴെ കാണിച്ച ഫോമാറ്റിൽ വിശദീകരിക്കുക:
|
||||
|
||||
1. **തിരിച്ചറിയുക** ഡാറ്റാ ടൈപ്പ് ഉം അതിന്റെ ലക്ഷ്യവും
|
||||
2. **വിവരണം നല്കുക** പ്രത്യേക ഷോപ്പിംഗ് കാർട്ട് ഫീച്ചറുകൾക്കായി ഈ ഡാറ്റാ ടൈപ്പ് മികച്ചതാ ഗണിക്കുന്നത്
|
||||
3. **പ്രായോഗിക കോഡ് ഉദാഹരണങ്ങൾ** ഉപയോഗിച്ച് ഡാറ്റാ ടൈപ്പ് പ്രവർത്തനം കാണിക്കുക
|
||||
4. **വിവരണം നല്കുക** ഈ ഡാറ്റാ ടൈപ്പ് ഷോപ്പിംഗ് കാർട്ടിലെ മറ്റ് ഭാഗങ്ങളുമായി എങ്ങനെ ചേർന്ന് പ്രവർത്തിക്കുന്നു
|
||||
|
||||
### ഉൾപ്പെടുത്തേണ്ട ഡാറ്റാ ടൈപ്പുകൾ
|
||||
|
||||
**പ്രിമിറ്റീവ് ഡാറ്റാ ടൈപ്പുകൾ:**
|
||||
- **String**: ഉൽപ്പന്നങ്ങളുടെ പേര്, വിവരണങ്ങൾ, ഉപയോക്തൃ വിവരങ്ങൾ
|
||||
- **Number**: വിലകൾ, അളവ്, നികുതി കണക്കുകൾ
|
||||
- **Boolean**: ഇനത്തിന്റെ ലഭ്യത, ഉപയോക്തൃ മുൻഗണനകൾ, കാർട്ട് നില
|
||||
- **Null**: അർഹിച്ചെങ്കിലും ഉദാത്തമായ മൂല്യങ്ങൾ (discount കോഡുകൾ ഉണ്ടായില്ലെങ്കിൽ)
|
||||
- **Undefined**: ആരംഭിക്കാത്ത മൂല്യങ്ങൾ അല്ലെങ്കിൽ നഷ്ടപ്പെട്ട ഡാറ്റ
|
||||
- **Symbol**: അഭ്യസ്ത വിചാരമുള്ള ഏകത്വ ചിഹ്നങ്ങൾ
|
||||
- **BigInt**: വലിയ സാമ്പത്തിക കണക്കുകൾ (ഉന്നത ഉപയോഗം)
|
||||
|
||||
**റഫറൻസ് ടൈപ്പുകൾ:**
|
||||
- **Object**: ഉൽപ്പന്ന വിശദാംശങ്ങൾ, ഉപയോക്തൃ പ്രൊഫൈലുകൾ, കാർട്ട് ഉള്ളടക്കം
|
||||
- **Array**: ഉൽപ്പന്നങ്ങളുടെ പട്ടിക, ഓർഡർ ചരിത്രം, വർഗ്ഗങ്ങൾ
|
||||
|
||||
### ഓരോ ഡാറ്റാ ടൈപ്പിനും ഉദാഹരണ ഫോർമാറ്റ്
|
||||
|
||||
ഓരോ ഡാറ്റാ ടൈപ്പിനും താഴെ പറയുന്ന രൂപത്തിലാണ് വിശദീകരിക്കുക:
|
||||
|
||||
```markdown
|
||||
## [Data Type Name]
|
||||
|
||||
**Purpose in Shopping Cart:** [Explain what this data type does]
|
||||
|
||||
**Why This Type:** [Explain why this is the best choice]
|
||||
|
||||
**Code Example:**
|
||||
```javascript
|
||||
// Your realistic code example here
|
||||
```
|
||||
|
||||
**യഥാർത്ഥ ലോക ഉപയോഗം:** [ഇത് പ്രായോഗികമായി എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് വിവരിക്കുക]
|
||||
|
||||
**ഇടപെടലുകൾ:** [ഈ ഡാറ്റാ ടൈപ്പ് മറ്റുള്ളവയുമായി എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് വിശദീകരിക്കുക]
|
||||
```
|
||||
|
||||
### Bonus Challenges
|
||||
|
||||
1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10)
|
||||
|
||||
2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing
|
||||
|
||||
3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons
|
||||
|
||||
### Submission Guidelines
|
||||
|
||||
- Create a markdown document with clear headings for each data type
|
||||
- Include working JavaScript code examples
|
||||
- Use realistic e-commerce scenarios in your examples
|
||||
- Explain your reasoning clearly for beginners to understand
|
||||
- Test your code examples to ensure they work correctly
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) |
|
||||
|----------|---------------------|---------------------|---------------------|------------------------------|
|
||||
| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations |
|
||||
| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional |
|
||||
| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated |
|
||||
| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors |
|
||||
| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized |
|
||||
| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted |
|
||||
|
||||
### Learning Objectives
|
||||
|
||||
By completing this assignment, you will:
|
||||
- ✅ **Understand** the seven JavaScript primitive data types and their uses
|
||||
- ✅ **Apply** data types to real-world programming scenarios
|
||||
- ✅ **Analyze** when to choose specific data types for different purposes
|
||||
- ✅ **Create** working code examples that demonstrate data type usage
|
||||
- ✅ **Explain** technical concepts in beginner-friendly language
|
||||
- ✅ **Connect** fundamental programming concepts to practical applications
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാഖ്യാനം**:
|
||||
ഈ ഡോക്യുമെന്റ് എ.ഐ. ഭാഷാപ്രവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തിയതാണ്. ശരിയായ വിവർത്തനത്തിനായി ഞങ്ങൾ ശ്രമിക്കുന്നുവെങ്കിലും, യന്ത്രം ചെയ്ത വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അമിതസംവേദനങ്ങൾ ഉണ്ടാകാവുന്നതാണ്. ഭാഷയുടെ മുൽരൂപം ആയ ഡോക്യുമെന്റ് മാത്രമേ വിചാരണീയമായ സ്രോതസ്സ് ആവുുന്നു. പ്രാധാന്യപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം റൊട്ട് നടത്തേണ്ടതാണ്. ഈ വിവർത്തനം ഉപയോഗിച്ച് ഉണ്ടായാവുന്ന തെറ്റിദ്ധാരണകൾക്കോ തെറ്റായ അർത്ഥവത്കരണങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,82 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "8328f58f4593b4671656ff8f4b2edbd9",
|
||||
"translation_date": "2026-01-08T12:30:23+00:00",
|
||||
"source_file": "2-js-basics/2-functions-methods/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ഫൺ വിത്ത് ഫങ്ഷൻസ്
|
||||
|
||||
## നിർദേശം
|
||||
|
||||
ഈ അസൈൻമെന്റിൽ, നിങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ഫങ്ഷനുകൾ, പാരാമീറ്ററുകൾ, ഡിഫോൾട്ട് മൂല്യങ്ങൾ, റിട്ടേൺ സ്റ്റേറ്റ്മെന്റുകൾ എന്നിവയെക്കുറിച്ച് പഠിച്ച് കൊണ്ടിരിക്കുന്ന ആശയങ്ങൾ ശക്തിപ്പെടുത്താൻ വ്യത്യസ്ത തരം ഫങ്ഷനുകൾ സൃഷ്ടിക്കാൻ പരിശീലനം നേടും.
|
||||
|
||||
`functions-practice.js` എന്ന പേരിൽ ഒരു ജാവാസ്ക്രിപ്റ്റ് ഫയൽ സൃഷ്ടിച്ച് താഴെ പറയുന്ന ഫങ്ഷനുകൾ നടപ്പിലാക്കുക:
|
||||
|
||||
### ഭാഗം 1: അടിസ്ഥാന ഫങ്ഷനുകൾ
|
||||
1. **`sayHello` എന്ന പേരിൽ ഒരു ഫങ്ഷൻ സൃഷ്ടിക്കുക** ഇത് ഒരു പാരാമീറ്ററും സ്വീകരിക്കാതെ "Hello!" എന്ന് കോൺസോളിൽ ലോഗ് ചെയ്യണം.
|
||||
|
||||
2. **`introduceYourself` എന്ന പേരിൽ ഒരു ഫങ്ഷൻ സൃഷ്ടിക്കുക** ഇത് `name` എന്ന പാരാമീറ്റർ സ്വീകരിച്ച് "Hi, my name is [name]" എന്ന സന്ദേശം കോൺസോളിൽ ലോഗ് ചെയ്യണം.
|
||||
|
||||
### ഭാഗം 2: ഡിഫോൾട്ട് പാരാമീറ്ററുകളുള്ള ഫങ്ഷനുകൾ
|
||||
3. **`greetPerson` എന്ന പേരിൽ ഒരു ഫങ്ഷൻ സൃഷ്ടിക്കുക** ഇത് രണ്ട് പാരാമീറ്ററുകൾ സ്വീകരിക്കും: `name` (ആവശ്യകം)നും `greeting` (ഐച്ഛികം, ഡിഫോൾട്ടായി "Hello"). ഫങ്ഷൻ "[greeting], [name]!" എന്ന സന്ദേശം കോൺസോളിൽ ലോഗ് ചെയ്യണം.
|
||||
|
||||
### ഭാഗം 3: മൂല്യങ്ങൾ റിട്ടേൺ ചെയ്യുന്ന ഫങ്ഷനുകൾ
|
||||
4. **`addNumbers` എന്ന പേരിൽ ഒരു ഫങ്ഷൻ സൃഷ്ടിക്കുക** ഇത് രണ്ട് പാരാമീറ്ററുകൾ (`num1` , `num2`) സ്വീകരിച്ച് അവരുടെ മൊത്തം മടക്കാൻ ആയിരിക്കണം.
|
||||
|
||||
5. **`createFullName` എന്ന പേരിൽ ഒരു ഫങ്ഷൻ സൃഷ്ടിക്കുക** ഇത് `firstName` , `lastName` പാരാമീറ്ററുകൾ സ്വീകരിച്ച് പൂർണ്ണ പേരിന്റെ ഒരു സ്ട്രിങ്ങായി മടക്കണം.
|
||||
|
||||
### ഭാഗം 4: എല്ലാം സംയോജിപ്പിക്കുക
|
||||
6. **`calculateTip` എന്ന പേരിൽ ഒരു ഫങ്ഷൻ സൃഷ്ടിക്കുക** ഇത് രണ്ട് പാരാമീറ്ററുകൾ സ്വീകരിക്കും: `billAmount` (ആവശ്യകം) , `tipPercentage` (ഐച്ഛികം, ഡിഫോൾട്ടായി 15). ഫങ്ഷൻ ടിപ്പ് തുക കണക്കാക്കി മടക്കണം.
|
||||
|
||||
### ഭാഗം 5: നിങ്ങളുടെ ഫങ്ഷനുകൾ പരീക്ഷിക്കുക
|
||||
പ്രതിയോരുത്തം നൽകുന്നതിനായി എല്ലാ ഫങ്ഷനുകളും വിളിച്ച്, ഫലം `console.log()` ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കുക.
|
||||
|
||||
**ഉദാഹരണ ടെസ്റ്റ് കോൾകൾ:**
|
||||
```javascript
|
||||
// നിങ്ങളുടെ ഫങ്ഷനുകൾ ഇവിടെ പരിശോധിക്കുക
|
||||
sayHello();
|
||||
introduceYourself("Sarah");
|
||||
greetPerson("Alex");
|
||||
greetPerson("Maria", "Hi");
|
||||
|
||||
const sum = addNumbers(5, 3);
|
||||
console.log(`The sum is: ${sum}`);
|
||||
|
||||
const fullName = createFullName("John", "Doe");
|
||||
console.log(`Full name: ${fullName}`);
|
||||
|
||||
const tip = calculateTip(50);
|
||||
console.log(`Tip for $50 bill: $${tip}`);
|
||||
```
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| മാനദണ്ഡം | പൂർണമായ ഉത്തമവുമായ | മതിയുള്ള | മെച്ചപ്പെടുത്തൽ ആവശ്യമായത് |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **ഫങ്ഷൻ സൃഷ്ടിയി** | 6 ഫങ്ഷനുകളും ശരിയായ ക്രമത്തിൽ ലേഖനം ചെയ്തും നാമകരണം പാലിച്ചും നടപ്പിലാക്കിയിരിക്കുന്നത് | 4-5 ഫങ്ഷനുകൾ ശരിയായ രീതിയിൽ നടപ്പിലാക്കിയിട്ടുണ്ട്, ചെറിയ ലിപി പിശകുകൾ തോന്നാം | 3 അല്ലെങ്കിൽ കുറവ് ഫങ്ഷനുകൾ നടപ്പിലാക്കപ്പെട്ടത് അല്ലെങ്കിൽ വലിയ ലിപി പിശകുകൾ |
|
||||
| **പാരാമീറ്ററുകൾ & ഡിഫോൾട്ട് മൂല്യങ്ങൾ** | ആവശ്യമായ പാരാമീറ്ററുകളും ഐച്ഛിക പാരാമീറ്ററുകളും ഡിഫോൾട്ട് മൂല്യങ്ങളും നിർദ്ദിഷ്ടമായി ശരിയായ വിഭാഗത്തിൽ ഉപയോഗിച്ചിരിക്കുന്നത് | പാരാമീറ്ററുകൾ ശരിയായ രീതിയിൽ ഉപയോഗിച്ചെങ്കിലും ഡിഫോൾട്ട് മൂല്യങ്ങളുമായി പ്രശ്നങ്ങൾ കാണാം | തെറ്റായ അല്ലെങ്കിൽ കാണാനാകാത്ത പാരാമീറ്റർ നടപ്പുവരുത്തൽ |
|
||||
| **റിട്ടേൺ മൂല്യങ്ങൾ** | റിട്ടേൺ ചെയ്യേണ്ട ഫങ്ഷനുകൾ ശരിയായ മൂല്യം മടക്കുന്നു, റിട്ടേൺ ചെയ്യരുത് എന്ന് പൊതുവെ അറിയപ്പെടുന്ന ഫങ്ഷനുകൾ പ്രവർത്തനങ്ങൾ മാത്രമേ ചെയ്യാറുള്ളൂ | കൂടുതൽ പിശകുകളില്ലാതെ റിട്ടേൺ മൂല്യങ്ങൾ ശരിയായത് | റിട്ടേൺ സ്റ്റേറ്റ്മെന്റുകളിൽ പ്രധാനം പ്രശ്നങ്ങൾ അപകടം |
|
||||
| **കോഡ് ഗുണനിലവാരം** | ശുചിത്വം പാലിച്ച ൽലേഖനം, അർഥപൂർണ്ണമായ വേരിയബിൾ നാമങ്ങൾ, ശരിയായ ഇൻഡെന്റേഷൻ | കോഡ് പ്രവർത്തിക്കുന്നു, എന്നാൽ മെച്ചപ്പെടുത്താൻ കഴിയും | കോഡ് വായിക്കാൻ കഠിനം അല്ലെങ്കിൽ ദുർബലമായ ഘടന |
|
||||
| **പരിശോധന** | എല്ലാ ഫങ്ഷനുകളും അനുയോജ്യമായ കോൾ ചെയ്തും ഫലം വ്യക്തമായി പ്രദർശിപ്പിച്ചും പരിശോധന | പല ഫങ്ഷനുകളും സീരിയൽ പരിശോധനയോടെ | പരിമിതമായ അല്ലെങ്കിൽ തെറ്റായ പരിശോധന |
|
||||
|
||||
## ബോണസ് ചലഞ്ചുകൾ (ഐച്ഛികം)
|
||||
|
||||
സ്വയം കൂടുതൽ വെല്ലുവിളിക്കാൻ ആഗ്രഹിക്കുന്നവർക്കായി:
|
||||
|
||||
1. **നിങ്ങളുടെ ഒരു ഫങ്ഷനിന്റെ അദ്ധൂതര ഫങ്ഷൻ വേരിയന്റ് സൃഷ്ടിക്കുക**
|
||||
2. **ഒരു ഫങ്ഷൻ മറ്റൊരു ഫങ്ഷൻ പാരാമീറ്ററായി സ്വീകരിക്കണം** (പാഠത്തിലെ `setTimeout` ഉദാഹരണങ്ങൾ പോലുള്ളതു)
|
||||
3. **ഇൻപുട്ട് വാലിഡേഷൻ ചേർക്കുക** നിങ്ങളുടെ ഫങ്ഷനുകൾ തെറ്റായ ഇൻപുട്ടുകൾ നന്നായി കൈകാര്യം ചെയ്യുന്നതായി ഉറപ്പാക്കാൻ
|
||||
|
||||
---
|
||||
|
||||
> 💡 **ടിപ്പ്**: നിങ്ങളുടെ ബ്രൗസറിന്റെ ഡെവലപ്പർ കോൺസോൾ (F12) തുറന്ന് `console.log()` പ്രസ്താവനകളുടെ ഔട്ട്പുട്ട് കാണാൻ മറക്കരുത്!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകാര്യപ്പെടുത്തൽ**:
|
||||
ഈ രേഖ AI തർജ്ജമ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിക്കുന്ന പോതു, സ്വാഭാവികമായും സ്വയം പ്രവർത്തിക്കുന്ന തർജ്ജമയിൽ പിശകുകൾ ഉണ്ടായിരിക്കാമെന്ന് ശ്രദ്ധിക്കുക. അതിനാൽ, യഥാർത്ഥ പത്രം അതിന്റെ മാതൃഭാഷയിൽ ഔദ്യോഗിക ഉറവിടമായി പരിഗണിക്കേണ്ടതാണ്. സുപ്രധാന വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ തർജ്ജമ നിർദ്ദേശിക്കുന്നു. ഈ തർജ്ജമ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതു ബോധവ്യത്യാസങ്ങൾക്കും അല്ലെങ്കിൽ വിവാചക പിശകുകൾക്കുമുള്ള ഉത്തരവാദിത്വം ഞങ്ങൾ ഏറ്റെടുക്കണമെന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,122 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "ffe366b2d1f037b99fbadbe1dc81083d",
|
||||
"translation_date": "2026-01-08T12:56:18+00:00",
|
||||
"source_file": "2-js-basics/3-making-decisions/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# തീരുമാനം എടുക്കൽ: വിദ്യാർത്ഥി ഗ്രേഡ് പ്രോസസർ
|
||||
|
||||
## പഠന ലക്ഷ്യങ്ങൾ
|
||||
|
||||
ഈ അസൈന്മെന്റിൽ, ഈ പാഠത്തിൽ നിന്നുള്ള തീരുമാനം എടുക്കലിന്റെ ആശയങ്ങളെ പ്രായോഗികമായി പ്രയോജനപ്പെടുത്തും, വ്യത്യസ്ഥ ഗ്രേഡിംഗ് സിസ്റ്റമുകളിൽ നിന്നുള്ള വിദ്യാർത്ഥികളുടെ ഗ്രേഡുകൾ പ്രോസസ്സ് ചെയ്യുന്ന ഒരു പ്രോഗ്രാം നിർമ്മിച്ച്. `if...else` സ്റ്റേറ്റ്മെന്റുകൾ, താരതമ്യ ഓപ്പറേറ്ററുകൾ, ലോജിക്കൽ ഓപ്പറേറ്ററുകൾ ഉപയോഗിച്ച് ഏത് വിദ്യാർത്ഥികളാണ് അവരുടെ കോഴ്സുകൾ പാസ്സാകുന്നത് എന്ന് നിശ്ചയിക്കും.
|
||||
|
||||
## വെല്ലുവിളി
|
||||
|
||||
നിങ്ങൾ வேலை ചെയ്യുന്നത് അടുത്തിടെ മറ്റൊരു സ്ഥാപനവുമായി ലയിച്ച ഒരു സ്കൂളിനുവേണ്ടിയാണ്. ഇപ്പോൾ നിങ്ങൾക്ക് രണ്ട് പൂർണ്ണമായും വ്യത്യസ്ത ഗ്രേഡിംഗ് സിസ്റ്റങ്ങളിലുള്ള വിദ്യാർത്ഥികളുടെ ഗ്രേഡുകൾ പ്രോസസ്സ് ചെയ്ത് ഏത് വിദ്യാർത്ഥികൾ പാസ്സാകുന്നുവെന്ന് നിർണ്ണയിക്കേണ്ടി വരും. ഇത് conditional logic പ്രായോഗികമായി പ്രയോജനപ്പെടുത്താനുള്ള ഒരു നല്ല അവസരമാണ്!
|
||||
|
||||
### ഗ്രേഡിംഗ് സിസ്റ്റങ്ങൾ മനസ്സിലാക്കൽ
|
||||
|
||||
#### ആദ്യ ഗ്രേഡിംഗ് സിസ്റ്റം (സാംഖ്യികം)
|
||||
- ഗ്രേഡുകൾ 1 മുതൽ 5 വരെയുള്ള സംഖ്യകളായി കൊടുക്കുന്നത്
|
||||
- **പാസ്സായ ഗ്രേഡ്**: 3 കു മുകൾ (3, 4, അല്ലെങ്കിൽ 5)
|
||||
- **ഫെയിലിംഗ് ഗ്രേഡ്**: 3 ന് താഴെ (1 അല്ലെങ്കിൽ 2)
|
||||
|
||||
#### രണ്ടാം ഗ്രേഡിംഗ് സിസ്റ്റം (അക്ഷര ഗ്രേഡുകൾ)
|
||||
- ഗ്രേഡുകൾ അക്ഷരങ്ങൾ ഉപയോഗിക്കുന്നു: `A`, `A-`, `B`, `B-`, `C`, `C-`
|
||||
- **പാസ്സായ ഗ്രേഡുകൾ**: `A`, `A-`, `B`, `B-`, `C`, `C-` (പട്ടികയിലുള്ള എല്ലാ അക്ഷര ഗ്രേഡുകളും പാസ്സിലാണ്)
|
||||
- **ഗమనിക്കുക**: ഈ സിസ്റ്റത്തിൽ `D` അല്ലെങ്കിൽ `F` പോലുള്ള ഫെയിലിംഗ് ഗുണങ്ങൾ ഉൾപ്പെടുന്നില്ല
|
||||
|
||||
### നിങ്ങളുടെ ജോലി
|
||||
|
||||
താഴെ നൽകിയ `allStudents` എന്ന അറായിൽ ഉള്ള എല്ലാ വിദ്യാർത്ഥികളെയും അവരുടെ ഗ്രേഡുകളെയും പരിഗണിച്ച്, അവരവരുടെയും അനുയോജ്യമായ ഗ്രേഡിംഗ് സിസ്റ്റം അനുസരിച്ച് പാസായ എല്ലാ വിദ്യാർത്ഥികളും ഉൾപ്പെടുന്ന പുതിയ അറായായ `studentsWhoPass` നിർമ്മിക്കുക.
|
||||
|
||||
```javascript
|
||||
let allStudents = [
|
||||
'A', // അക്ഷര റാങ്ക് - പാസായ
|
||||
'B-', // അക്ഷര റാങ്ക് - പാസായ
|
||||
1, // സംഖ്യ റാങ്ക് - പരാജയം
|
||||
4, // സംഖ്യ റാങ്ക് - പാസായ
|
||||
5, // സംഖ്യ റാങ്ക് - പാസായ
|
||||
2 // സംഖ്യ റാങ്ക് - പരാജയം
|
||||
];
|
||||
|
||||
let studentsWhoPass = [];
|
||||
```
|
||||
|
||||
|
||||
### പടിപടിയായ സമീപനം
|
||||
|
||||
1. `allStudents` അറായിയിൽ ഉള്ള ഓരോ ഗ്രേഡിനും പോയതിനായി ഒരു ലൂപ്പ് ക്രമീകരിച്ചു
|
||||
2. ഗ്രേഡ് തരം പരിശോധിക്കുക (അത് സംഖ്യയാണോ അക്ഷരമ吗?)
|
||||
3. യോജിച്ച ഗ്രേഡിംഗ് സിസ്റ്റം നിയമങ്ങൾ പ്രയോഗിക്കുക:
|
||||
- സംഖ്യകൾക്ക്: grade >= 3 എന്ന് പരിശോധിക്കുക
|
||||
- അക്ഷരങ്ങൾക്കായി: അത് സാധുവായ പാസ്സിംഗ് അക്ഷര ഗ്രേഡുകളിൽ ഒന്നാണോ എന്ന് പരിശോധിക്കുക
|
||||
4. പാസായ ഗ്രേഡുകൾ `studentsWhoPass` അറയിലേക്ക് ചേർക്കുക
|
||||
|
||||
### സഹായകരമായ കോഡ് സാങ്കേതിക വിദ്യകൾ
|
||||
|
||||
പാഠത്തിൽ നിന്നുള്ള താഴെ പറയുന്ന ജാവാസ്ക്രിപ്റ്റ് ആശയങ്ങൾ ഉപയോഗിക്കുക:
|
||||
|
||||
- **typeof ഓപ്പറേറ്റർ**: `typeof grade === 'number'` എന്നത് ഒരു സംഖ്യാ ഗ്രേഡാണെന്ന് പരിശോധിക്കാൻ
|
||||
- **താരതമ്യ ഓപ്പറേറ്ററുകൾ**: സംഖ്യാ ഗ്രേഡുകൾ താരതമ്യപ്പെടുത്താൻ `>=`
|
||||
- **ലോജിക്കൽ ഓപ്പറേറ്ററുകൾ**: പല അക്ഷര ഗ്രേഡ് വ്യത്യാസങ്ങൾ പരിശോധിക്കാൻ `||`
|
||||
- **if...else സ്റ്റേറ്റ്മെന്റുകൾ**: വ്യത്യസ്ത ഗ്രേഡിംഗ് സിസ്റ്റങ്ങൾ കൈകാര്യം ചെയ്യാൻ
|
||||
- **അറയ് മേധോഡുകൾ**: പാസായ ഗ്രേഡുകൾ പുതിയ അറയിലേക്ക് ചേർക്കാൻ `.push()`
|
||||
|
||||
### പ്രതീക്ഷിക്കുന്ന ഔട്ട്പുട്ട്
|
||||
|
||||
നിങ്ങളുടെ പ്രോഗ്രാം ഓടുമ്പോൾ, `studentsWhoPass` ഇത്തരമാകണം: `['A', 'B-', 4, 5]`
|
||||
|
||||
**എന്തുകൊണ്ട് ഈ ഗ്രേഡുകൾ പാസ്സ് ആണ്:**
|
||||
- `'A'`യും `'B-'`ും സാധുവായ അക്ഷര ഗ്രേഡുകളാണ് (ഈ സിസ്റ്റത്തിലെ എല്ലാ അക്ഷര ഗ്രേഡുകളും പാസ്സാണ്)
|
||||
- `4`യും `5`യും സംഖ്യാ ഗ്രേഡുകൾ 3 നും മേലുമുള്ളവയാണ്
|
||||
- `1`യും `2`യും ഫെയിൽ ആയിരിക്കുന്നത് കാരണം അവ 3 നും താഴെ സംഖ്യകൾ ആണ്
|
||||
|
||||
## നിങ്ങളുടെ പരിഹാരം പരിശോധിക്കൽ
|
||||
|
||||
വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ നിങ്ങളുടെ കോഡ് പരീക്ഷിക്കൂ:
|
||||
|
||||
```javascript
|
||||
// വ്യത്യസ്ത ഗ്രേഡ് കോമ്പിനേഷനുകളുമായി പരീക്ഷിക്കുക
|
||||
let testGrades1 = ['A-', 3, 'C', 1, 'B'];
|
||||
let testGrades2 = [5, 'A', 2, 'C-', 4];
|
||||
|
||||
// സാധുവായ ഗ്രേഡ് കോമ്പിനേഷനുകളിൽ നിങ്ങളുടെ പരിഹാരം പ്രവർത്തിക്കണം
|
||||
```
|
||||
|
||||
|
||||
## ബോണസ് വെല്ലുവിളികൾ
|
||||
|
||||
അടിസ്ഥാന അസൈന്മെന്റ് പൂർത്തിയാക്കിയ ശേഷം, ഈ വിപുലീകരണങ്ങൾ ശ്രമിക്കൂ:
|
||||
|
||||
1. **സാധുതയുള്ള പരിശോധന ചേർക്കുക**: അസാധുവായ ഗ്രേഡുകൾ പരിശോധിക്കുക (ഊര്ജ്ജിത സംഖ്യകൾ അല്ലെങ്കിൽ അസാധുവായ അക്ഷരങ്ങൾ പോലുള്ളവ)
|
||||
2. **സാങ്കേതിക കണക്കെടുപ്പ്**: എത്ര പേര് പാസ്സും എത്ര പേർ ഫെയിലും ആണെന്ന് എണ്ണുക
|
||||
3. **ഗ്രേഡ് പരിവർത്തനം**: എല്ലാ ഗ്രേഡുകളും ഒരു ഏക സംഖ്യാ സിസ്റ്റത്തിലേക്ക് പരിവർത്തനം ചെയ്യുക (A=5, B=4, C=3, തുടങ്ങിയവ)
|
||||
|
||||
## റൂബ്രിക
|
||||
|
||||
| ക്രൈറ്റീരിയ | മികച്ചത് (4) | സാരപരിചയം ഉള്ളത് (3) | വളർച്ചയിലുള്ളത് (2) | തുടക്കം (1) |
|
||||
|----------|---------------|----------------|----------------|---------------|
|
||||
| **പ്രവർത്തകത്വം** | പ്രോഗ്രാം രണ്ട് സിസ്റ്റങ്ങളിലെ എല്ലാ പാസ്സിംഗ് ഗ്രേഡുകളും ശരിയായി തിരിച്ചറിയുന്നു | ചെറിയ പ്രശ്നങ്ങളോടോ അതിരുകൾകൂടിയുള്ള സാഹചര്യങ്ങളോടോ പ്രോഗ്രാം പ്രവർത്തിക്കുന്നു | പ്രോഗ്രാം ഭാഗികമായി പ്രവർത്തിക്കുകയും, ലജിക് പിശകുകൾ ഉണ്ടാകുകയും ചെയ്യുന്നു | പ്രോഗ്രാം വലിയ പിശകുകളോടെയാണ് അല്ലെങ്കിൽ റൺ ചെയ്യാറില്ല |
|
||||
| **കോഡ് സ്ട്രക്ചർ** | ശുചിയായവും സുസ്ഥിരവുമായ if...else ലജിക് ഉപയോഗിച്ച് കോഡ് | അനുയോജ്യമായ conditional statements ഉള്ള നല്ല സ്ട്രക്ചർ | ചില സംഘടനാ പ്രശ്നങ്ങളുള്ള സ്വീകരിക്കാവുന്ന സ്ട്രക്ചർ | ദുരിതമായ സ്ട്രക്ചർ, ലജിക് പിന്തുടരാൻ ബുദ്ധിമുട്ട് |
|
||||
| **അഭിപ്രായങ്ങളുടെ ഉപയോഗം** | താരതമ്യ ഓപ്പറേറ്ററുകളുടെയും ലോജിക്കൽ ഓപ്പറേറ്ററുകളുടെയും conditional statements-ഉം ഫലപ്രദമായി ഉപയോഗിക്കുന്നു | പാഠത്തെ അടിസ്ഥാനമാക്കിയുള്ള നല്ല ഉപയോഗം, ചെറിയ വീഴ്ചകളോടുകൂടി | പാഠത്തിന്റെ ആശയങ്ങളിൽ ചില ഭാഗങ്ങൾ മാത്രം ഉപയോഗിച്ച്, പ്രധാന ഘടകങ്ങൾ നഷ്ടപ്പെട്ടു | പാഠത്തിന്റെ ആശയങ്ങളുടെ പരിമിതമായ ഉപയോഗം |
|
||||
| **സമസ്യ പരിഹാരം** | പ്രശ്നം ക്ലിയർ ആയി മനസ്സിലാക്കി സുന്ദരമായ പരിഹാര സമീപനം കാണിക്കുന്നു | നല്ല പ്രശ്ന പരിഹാര സമീപനം, ഉറച്ച ലജിക് | ചില ആശയക്കുഴപ്പം ഉള്ള മതിയായ പ്രശ്ന പരിഹാരം | വ്യക്തമല്ലാത്ത സമീപനം, മനസ്സിലാക്കിയതായി സംശയം |
|
||||
|
||||
## സമർപ്പണ മാർഗനിർദേശം
|
||||
|
||||
1. നൽകിയ ഉദാഹരണങ്ങളുമായി നിങ്ങളുടെ കോഡ് പൂർണമായും പരീക്ഷിക്കൂ
|
||||
2. പ്രത്യേകിച്ച് conditional statements-നെക്കുറിച്ച് നിങ്ങളുടെ ലജിക് വിശദീകരിക്കുന്ന അഭിപ്രായങ്ങൾ ചേർക്കൂ
|
||||
3. ഔട്ട്പുട്ട് പ്രതീക്ഷിക്കുന്ന ഫലം നൽകുന്നതായിരിക്കണം: `['A', 'B-', 4, 5]`
|
||||
4. ശൂന്യമായ അറേയോ അപ്രതീക്ഷിത ഡാറ്റാ തരം പോലുള്ള യാഥാർഥസന്ദർഭങ്ങൾ പരിഗണിക്കുക
|
||||
|
||||
> 💡 **പ്രോ ടിപ്**: സാധാരണതലത്തിൽ തുടങ്ങൂ! ആദ്യം അടിസ്ഥാന പ്രവൃത്തികര്മ്മം പ്രവർത്തിക്കുന്നവണ്ണം വരുത്തി, തുടർന്ന് കൂടുതൽ സങ്കീർണമായ സവിശേഷതകൾ ചേർക്കുക. ഈ പാഠത്തിൽ പഠിച്ച decision-making logic പ്രായോഗികമാക്കുകയാണ് ലക്ഷ്യം.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസാധുപ്പെടുത്തൽ**:
|
||||
ഈ ഡോക്യുമെന്റ് AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തിരിക്കുന്നു. നമ്മൾ യഥാർത്ഥതയ്ക്കായി പരിശ്രമിച്ചെങ്കിലും, ഓട്ടോമാറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അകൃത്യതകൾ ഉണ്ടാകാം എന്ന് ദയവായി ശ്രദ്ധിക്കുക. മാതൃഭാഷയിലുണ്ടായ મૂળ ഡോക്യുമെന്റ് മാത്രമാണ് അധികാരപരമായ ഉറവിടം എന്നതെന്ന് പരിഗണിക്കാൻ ആവശ്യമാണ്. അതിവശ്യമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർദേശം ചെയ്യുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽനിന്ന് പരസ്യമായ തെറ്റായ വ്യാഖ്യാനങ്ങൾ അല്ലെങ്കിൽ തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,124 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
|
||||
"translation_date": "2026-01-08T13:10:31+00:00",
|
||||
"source_file": "2-js-basics/4-arrays-loops/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# അറേകളും ലൂപുകളും അസൈൻമെന്റ്
|
||||
|
||||
## നിർദേശങ്ങൾ
|
||||
|
||||
അറേകളും ലൂപുകളും ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നതിനുള്ള അഭ്യാസം നടത്താൻ താഴെയുള്ള വ്യായാമങ്ങൾ പൂർത്തിയാക്കുക. ഓരോ വ്യായാമവുമും പാഠത്തിലുള്ള ആശയങ്ങളെ അടിസ്ഥാനമാക്കി വിവിധ ലൂപ് തരംകളും അറേ മെത്തഡുകളും പ്രയോഗിക്കാനാണ് ഉദ്ദേശിച്ചത്.
|
||||
|
||||
### വ്യായാമം 1: സംഖ്യാ പാറ്റേൺ ജനറേറ്റർ
|
||||
1-20 ൽ ഇടയിൽ എല്ലാ 3 ആം സംഖ്യയും പട്ടികപ്പെടുത്തുകയും കോൺസോളിൽ പ്രിന്റ് ചെയ്യുകയും ചെയ്യുന്ന പ്രോഗ്രാം സൃഷ്ടിക്കുക.
|
||||
|
||||
**ആവശ്യകതകൾ:**
|
||||
- ഇഷ്ടാനുസൃത വർധനവോടെ `for` ലോപ് ഉപയോഗിക്കുക
|
||||
- സംഖ്യകൾ ഉപയോക്തൃ സൗഹൃദ ഫോർമാറ്റിലാക്കി കാണിക്കുക
|
||||
- നിങ്ങളുടെ ലോജിക്ക് വിശദീകരിക്കുന്ന വിവരണാത്മക കമന്റുകൾ ചേർക്കുക
|
||||
|
||||
**പ്രതീക്ഷിച്ച ഔട്ട്പുട്ട്:**
|
||||
```
|
||||
3, 6, 9, 12, 15, 18
|
||||
```
|
||||
|
||||
> **ടിപ്പ്:** നിങ്ങളുടെ for ലൂപിലെ ഇറ്ററേഷൻ-എക്സ്പ്രഷൻ മാറ്റി സംഖ്യകൾ ഒഴിവാക്കുക.
|
||||
|
||||
### വ്യായാമം 2: അറേ വിശകലനം
|
||||
കുറഞ്ഞത് 8 വ്യത്യസ്ത സംഖ്യകൾ അടങ്ങിയ ഒരു അറേ സൃഷ്ടിച്ച് ഡാറ്റ വിശകലനം ചെയ്യുന്നതിനുള്ള ഫംഗ്ഷനുകൾ എഴുതുക.
|
||||
|
||||
**ആവശ്യകതകൾ:**
|
||||
- `numbers` എന്ന പേരിൽ 8 ലധികം മൂല്യങ്ങൾ ഉള്ള അറേ സൃഷ്ടിക്കുക
|
||||
- ഏറ്റവും വലിയ സംഖ്യ തിരിച്ചടയുന്ന `findMaximum()` ഫംഗ്ഷൻ എഴുതുക
|
||||
- ഏറ്റവും കുറഞ്ഞ സംഖ്യ തിരിച്ചടയുന്ന `findMinimum()` ഫംഗ്ഷൻ എഴുതുക
|
||||
- എല്ലാ സംഖ്യകളുടെയും മൊത്തം തിരിച്ചടയുന്ന `calculateSum()` ഫംഗ്ഷൻ എഴുതുക
|
||||
- ഓരോ ഫംഗ്ഷനും ടെസ്റ്റ് ചെയ്ത് ഫലം പ്രദർശിപ്പിക്കുക
|
||||
|
||||
**ബോണസ് ചോർഞ്ച്:** അറേയിൽ രണ്ടാമത്തേതായ ഏറ്റവും വലിയ സംഖ്യ കണ്ടെത്തുന്ന ഒരു ഫംഗ്ഷൻ സൃഷ്ടിക്കുക.
|
||||
|
||||
### വ്യായാമം 3: സ്ട്രിംഗ് അറേ പ്രോസസ്സിംഗ്
|
||||
നിങ്ങളുടെ ഇഷ്ടമുള്ള സിനിമകൾ/പുസ്തകങ്ങൾ/പാട്ടുകൾ അടങ്ങിയ ഒരു അറേ സൃഷ്ടിച്ച് വ്യത്യസ്ത ലൂപ് തരംകൾ പ്രയോഗിച്ച് പ്രവർത്തിക്കുക.
|
||||
|
||||
**ആവശ്യകതകൾ:**
|
||||
- കുറഞ്ഞത് 5 സ്ട്രിംഗ് മൂല്യങ്ങളുള്ള ഒരു അറേ സൃഷ്ടിക്കുക
|
||||
- സംഖ്യകളോടുകൂടി (1. ഇനം പേര്) ഉള്ളവ പ്രദർശിപ്പിക്കാൻ പരമ്പരാഗത `for` ലൂപ് ഉപയോഗിക്കുക
|
||||
- വസ്തുക്കൾ മുഴുവൻ അപ്പർകേസ് ആയി പ്രദർശിപ്പിക്കാൻ `for...of` ലോപ് ഉപയോഗിക്കുക
|
||||
- മൊത്തം അക്ഷരങ്ങളുടെ എണ്ണം കണക്കാക്കി പ്രദർശിപ്പിക്കാൻ `forEach()` മെത്തഡ് ഉപയോഗിക്കുക
|
||||
|
||||
**ഉദാഹരണ ഔട്ട്പുട്ട്:**
|
||||
```
|
||||
Traditional for loop:
|
||||
1. The Matrix
|
||||
2. Inception
|
||||
3. Interstellar
|
||||
|
||||
For...of loop (uppercase):
|
||||
THE MATRIX
|
||||
INCEPTION
|
||||
INTERSTELLAR
|
||||
|
||||
Character count:
|
||||
Total characters across all titles: 42
|
||||
```
|
||||
|
||||
### Exercise 4: Data Filtering (Advanced)
|
||||
വിദ്യാർത്ഥികളെ പ്രതിനിധീകരിക്കുന്ന ഒബ്ജക്റ്റുകളുടെ അറേ പ്രോസസ്സ് ചെയ്യുന്ന പ്രോഗ്രാം സൃഷ്ടിക്കുക.
|
||||
|
||||
**ആവശ്യകതകൾ:**
|
||||
- `name`, `age`, `grade` എന്ന പ്രോപ്പർട്ടികളുള്ള കുറഞ്ഞത് 5 വിദ്യാർത്ഥി ഒബ്ജക്റ്റുകൾ അടങ്ങിയ അറേ സൃഷ്ടിക്കുക
|
||||
- 18 വയസ്സിന് മുകളിൽ ഉള്ള വിദ്യാർത്ഥികളെ കണ്ടെത്താൻ ലൂപുകൾ ഉപയോഗിക്കുക
|
||||
- എല്ലാ വിദ്യാർത്ഥികളുടെ ശരാശരി ഗ്രേഡ് കണക്കുകൂട്ടുക
|
||||
- 85 ൽ മീതെ ഗ്രേഡ് ഉള്ള വിദ്യാർത്ഥികളുമായുള്ള പുതിയ അറേ സൃഷ്ടിക്കുക
|
||||
|
||||
**ഉദാഹരണ ഘടന:**
|
||||
```javascript
|
||||
const students = [
|
||||
{ name: "Alice", age: 17, grade: 92 },
|
||||
{ name: "Bob", age: 18, grade: 84 },
|
||||
// കൂടുതല് വിദ്യാര്ത്ഥികളെ ചേര്ക്കുക...
|
||||
];
|
||||
```
|
||||
|
||||
## നിങ്ങളുടെ കോഡ് ടെസ്റ്റിംഗ്
|
||||
|
||||
താങ്കളുടെ പ്രോഗ്രാമുകൾ ടെസ്റ്റ് ചെയ്യുന്നത്:
|
||||
1. ഓരോ വ്യായാമവും ബ്രൗസറിന്റെ കോൺസോളിൽ ഓടിക്കുക
|
||||
2. മെച്ചപ്പെടുത്തിയ ഫലങ്ങളുമായി ഔട്ട്പുട്ട് പൊരുത്തപ്പെടുന്നത് ഉറപ്പാക്കുക
|
||||
3. വ്യത്യസ്ത ഡാറ്റാ സെറ്റുകളോടെ ടെസ്റ്റ് ചെയ്യുക
|
||||
4. നിങ്ങളുടെ കോഡ് കാവൽ വ്യവസ്ഥകൾ (ఖാലി അറേകൾ, ഒറ്റ വസ്തുക്കൾ) കൈകാര്യം ചെയ്യുന്നതായിട്ടുള്ളതിനൊരു നിരീക്ഷണം നടത്തുക
|
||||
|
||||
## സമർപ്പണ മാർഗനിർദ്ദേശങ്ങൾ
|
||||
|
||||
താഴെപ്പറയുന്നവ സമർപ്പണത്തിൽ ഉൾപ്പെടുത്തുക:
|
||||
- ഓരോ വ്യായാമത്തിന്റേയും വിശദീകരണസഹിതമായ ജാവാസ്ക്രിപ്റ്റ് കോഡ്
|
||||
- പ്രോഗ്രാമുകൾ പ്രവർത്തിക്കുന്ന സ്ക്രീൻഷോട്ടുകൾ അല്ലെങ്കിൽ ടെക്സ്റ്റ് ഔട്ട്പുട്ട്
|
||||
- ഓരോ ടാസ്ക്കിനും ഏത് ലൂപ് തരം തിരഞ്ഞെടുക്കാൻ കാരണംകൂടി ചെറിയ വിശദീകരണം
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| മാനദണ്ഡങ്ങൾ | ഉത്തമം (3 പോയിന്റ്) | യോജിച്ച (2 പോയിന്റ്) | മെച്ചപ്പെടുത്തേണ്ടത് (1 പോയിന്റ്) |
|
||||
| -------- | -------------------- | ------------------- | --------------------------- |
|
||||
| **ഫംഗ്ഷണാലിറ്റി** | ബോണസ് ചോർഞ്ചുകളും ഉൾപ്പെടെ എല്ലാ വ്യായാമങ്ങളും ശരിയായി പൂർത്തിയാക്കിയത് | എല്ലാ ആവശ്യമായ വ്യായാമങ്ങളും ശരിയായി പ്രവർത്തിച്ചതു | ചില വ്യായാമങ്ങൾ അപൂർണ്ണമായതോ പിഴവുകളുള്ളതോ ഉണ്ടായതു |
|
||||
| **കോഡ് ഗുണമേന്മ** | സുതാര്യവും സുഗമവുമായ കോഡ് വിശദമായ വ്യത്യാസപ്പെട്ട വേരിയബിൾ പേരുകളോടൊപ്പം | കോഡ് പ്രവർത്തിച്ചെങ്കിലും കൂടുതൽ വൃത്തിയുള്ളതായിരിക്കേണ്ടത് | കോഡ് വിറക്തമായോ മനസ്സിലാക്കാൻ ബുദ്ധിമുട്ടുള്ളതായോ ഉള്ളത് |
|
||||
| **കമന്റുകൾ** | ലോജിക്കും തീരുമാനം സംബന്ധിച്ച വിശകലനവും ഉൾക്കൊള്ളുന്ന സമഗ്ര കമന്റുകൾ | അടിസ്ഥാന കമന്റുകൾ ഉണ്ടായിരിക്കുക | കുറഞ്ഞത് അല്ലെങ്കിൽ കമന്റുകളില്ല |
|
||||
| **ലൂപ് ഉപയോഗം** | വിവിധ ലൂപ് തരംകൾ പര്യാപ്തമായി പ്രയോഗിക്കുന്നതിന്റെ വ്യക്തമായ തെളിവ് | ലൂപുകൾ ശരിയായി ഉപയോഗിച്ചെങ്കിലും തരം വർണ്ണം കുറവ് | തെറ്റായോ കാര്യക്ഷമമല്ലാത്ത ലൂപ് ഉപയോഗം |
|
||||
| **ടെസ്റ്റിംഗ്** | വിവിധ സാഹചര്യങ്ങളടങ്ങിയ പൂർണ്ണമായ ടെസ്റ്റിംഗ് തെളിവ് | അടിസ്ഥാനമായ ടെസ്റ്റിംഗ് പ്രകടിപ്പിച്ചിരുന്നു | ടെസ്റ്റിംഗിന്റെ ചെറിയ തെളിവുണ്ടായതു മാത്രം |
|
||||
|
||||
## പ്രതിവിമർശന ചോദ്യങ്ങൾ
|
||||
|
||||
വ്യായാമങ്ങൾ പൂർത്തിയാക്കിയ ശേഷം, പരിഗണിക്കുക:
|
||||
1. ഏത് ലൂപ് തരം ഏറ്റവും സ്വാഭാവികമായി ഉപയോഗിക്കാൻ തോന്നി, കാരണം എന്ത്?
|
||||
2. അറേകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുമ്പോൾ നിങ്ങള് അനുഭവിച്ച വെല്ലുവിളികൾ എന്തെല്ലാമാണ്?
|
||||
3. ഈ കഴിവുകൾ യാഥാർത്ഥ്യ വെബ് ഡവലപ്പ്മെന്റ് പ്രധാന പദ്ധതികളിൽ എങ്ങനെ പ്രയോഗിക്കാവുന്നതാണ്?
|
||||
4. നിങ്ങളുടെ കോഡ് പ്രകടനം മെച്ചപ്പെടുത്താനുള്ള ശ്രമത്തിൽ എന്തെല്ലാം വ്യത്യാസങ്ങൾ വരുത്തുമായിരുന്നു?
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാപത്രം**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനമായ [കോപ് ട്രാൻസ്ലേറ്റർ](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ ശരിതവർത്തനം നേടാൻ ശ്രമിക്കുന്നുവെങ്കിലും, സ്വയംകൃതമായ വിവർത്തനങ്ങളിൽ പിഴവുകളും അശുദ്ധികളും ഉണ്ടായേക്കാമെന്ന് ദയവായി ശ്രദ്ധിക്കவும். ആ രേഖയുടെ മാതൃഭാഷയിൽ ഉള്ള യഥാർത്ഥ പകർപ്പ് പ്രാമാണികമായ സ്രോതസ്സായി കണക്കാക്കപ്പെടണം. അത്യന്താപേക്ഷിത വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യൻ ചെയ്യുന്ന വിവർത്തനം നിർദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിന് മൂലമുള്ള ഏതെങ്കിലും പ്രയാസങ്ങൾക്കും തെറ്റു വ്യാഖ്യാനങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cc9e70a2f096c67389c8acff1521fc27",
|
||||
"translation_date": "2026-01-08T10:45:07+00:00",
|
||||
"source_file": "2-js-basics/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ജാവാസ്ക്രിപ്റ്റ് പരിചയം
|
||||
|
||||
ജാവാസ്ക്രിപ്റ്റ് വെബിന്റെ ഭാഷയാണ്. ഈ നാല് പാഠങ്ങളിലൂടെ, നിങ്ങൾ അതിന്റെ അടിസ്ഥാനങ്ങൾ പഠിക്കും.
|
||||
|
||||
### വിഷയങ്ങൾ
|
||||
|
||||
1. [ചരങ്ങൾക്കും ഡാറ്റാ തരംകളും](1-data-types/README.md)
|
||||
2. [ഫംഗ്ഷനുകളും മേത്തഡുകളും](2-functions-methods/README.md)
|
||||
3. [ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് തീരുമാനം എടുക്കൽ](3-making-decisions/README.md)
|
||||
4. [അറേകളും ലൂപ്പുകളും](4-arrays-loops/README.md)
|
||||
|
||||
### ക്രെഡിറ്റുകൾ
|
||||
|
||||
ഈ പാഠങ്ങൾ ♥️ ഉള്ളിൽ നിന്ന് [ജാസ്മിൻ ഗ്രീൻവേ](https://twitter.com/paladique), [ക്രിസ്റ്റഫർ ഹാരിസൺ](https://twitter.com/geektrainer) жана [ക്രിസ് നോറിങ്](https://twitter.com/chris_noring) എഴുതിയവയാണ്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിവരണം**:
|
||||
ഈ ദസ്താവേസ് [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI തർജ്ജുമ സേവനം ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തതാണ്. കൃത്യതക്കായി ഞങ്ങൾ ശ്രമിച്ച ကြသော်, യന്ത്രം തർജ്ജമ ചെയ്യുന്നപ്പോൾ പിഴവുകളും അസൂയകളും ഉണ്ടായിരിക്കാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. പ്രധാന ഭാഷയിലെ അസൽ ദസ്താവേസാണ് അധികാരപരമായ ഉറവിടം എന്ന് പരിഗണിക്കണം. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യാവകാശ തർജ്ജുമ പരിഗണിക്കുക. ഈ തർജ്ജുമ ഉപയോഗത്തിൽ നിന്നും ഉണ്ടായേക്കാവുന്ന അർത്ഥക്കുറവുകൾക്കും തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,136 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bee6762d4092a13fc7c338814963f980",
|
||||
"translation_date": "2026-01-08T19:29:12+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# CSS പുനഃസംഘടന അസൈൻമെന്റ്
|
||||
|
||||
## ലക്ഷ്യം
|
||||
|
||||
നിങ്ങളുടെ ടെറിയറിയം പ്രോജക്ട് ആധുനിക CSS ലെയ്ഔട്ട് സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുന്നതുണ്ടാക്കുക! നിലവിലുള്ള അപ്സല്യൂട്ട് പോസിഷനിങ്ങ് സമീപനം പുനഃസംഘടിപ്പിച്ച് **Flexbox** അല്ലെങ്കിൽ **CSS Grid** ഉപയോഗിച്ച് കൂടുതൽ സംരക്ഷണയോഗ്യവും പ്രതികരണക്ഷമമായ ഡിസൈനും നടപ്പിലാക്കുക. ഈ അസൈൻമെന്റ് നിങ്ങളുടെ ടെറിയറിയംയുടെ ദൃശ്യ ആകര്ഷണം നിലനിർത്തിക്കൊണ്ട് ആധുനിക CSS സ്റ്റാൻഡേർഡുകൾ പ്രയോഗിക്കാൻ നിങളെ പ്രേരിപ്പിക്കുന്നു.
|
||||
|
||||
വിവിധ ലെയ്ഔട്ട് രീതികൾ എപ്പോൾ എങ്ങനെ ഉപയോഗിക്കണമെന്ന് മനസ്സിലാക്കുക ആധുനിക വെബ് ഡെവലപ്പ്മെന്റിന് അത്യന്താപേക്ഷിതമായ കഴിവാണ്. ഈ പ്രക്രിയ പരമ്പരാഗത പോസിഷനിങ്ങ് സാങ്കേതിക വിദ്യകളും സമകാലിക CSS ലെയ്ഔട്ട് സിസ്റ്റങ്ങളും തമ്മിലുള്ള പാലമാവുന്നു.
|
||||
|
||||
## അസൈൻമെന്റ് നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### ഘട്ടം 1: വിശകലനവും പദ്ധതി തയ്യാറെടുപ്പും
|
||||
1. **നിങ്ങളുടെ നിലവിലെ ടെറിയറിയം കോഡ് അവലോകനം ചെയ്യുക** - എവിടെ എവിടെ ആൽസല്യൂട്ട് പോസിഷനിങ്ങ് ഉപയോഗിച്ചിരിക്കുന്നുണ്ട് എന്ന് തിരിച്ചറിയുക
|
||||
2. **നിങ്ങളുടെ ലെയ്ഔട്ട് രീതിയ തിരഞ്ഞെടുക്കുക** - Flexbox അല്ലെങ്കിൽ CSS Grid നിങ്ങളുടെ ഡിസൈൻ ലക്ഷ്യങ്ങൾക്ക് എവിടെ യോജിക്കുന്നുവെന്ന് തീരുമാനിക്കുക
|
||||
3. **പുതിയ ലെയ്ഔട്ട് ഘടന സ്കെച്ചുചെയ്യുക** - കണ്ടെയ്നറുകളും പ്ലാന്റ് ഘടകങ്ങളും എങ്ങിനെയാണ് ക്രമീകരിക്കപ്പെടുന്നത് എന്ന് പദ്ധതി തയ്യാറാക്കുക
|
||||
|
||||
### ഘട്ടം 2: നടപ്പിലാക്കൽ
|
||||
1. **നിങ്ങളുടെ ടെറിയറിയം പ്രോജക്ടിന്റെ പുതിയ ഒരു പതിപ്പ്** വേര്പെടുത്തിയ ഫോൾഡറിൽ സൃഷ്ടിക്കുക
|
||||
2. ** എച്ച്ടിഎംഎൽ ഘടന** താങ്കളുടെ തെരഞ്ഞെടുക്കപ്പെട്ട ലെയ്ഔട്ട് രീതിക്ക് അനുസരിച്ച് അപ്ഡേറ്റ് ചെയ്യുക
|
||||
3. **CSS പുനഃസംഘടിപ്പിക്കുക** - അപ്സല്യൂട്ട് പോസിഷനിങ്ങ് ഒഴിവാക്കി Flexbox അല്ലെങ്കിൽ CSS Grid ഉപയോഗിക്കുക
|
||||
4. **ദൃശ്യ ഏകീകൃതത നിലനിർത്തുക** - പ്ലാന്റുകളും ടെറിയറിയം ജാറും ഏകദേശം അതേ സ്ഥാനങ്ങളിൽ കാണിക്കുന്നതായി ഉറപ്പാക്കുക
|
||||
5. **പ്രതികരണശേഷി നടപ്പിലാക്കുക** - വിവിധ സ്ക്രീൻ വലുപ്പങ്ങളിൽ നിങ്ങളുടെ ലെയ്ഔട്ട് സ്മൂതായി അനുയോജ്യമായി മാറണം
|
||||
|
||||
### ഘട്ടം 3: പരീക്ഷണം ಮತ್ತು ഡോക്യുമെന്റേഷൻ
|
||||
1. **ക്രോസ്-ബ്രൗസർ പരിശോധന** - Chrome, Firefox, Edge, Safari എന്നിവയിൽ ഡിസൈൻ ശരിയായി പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുക
|
||||
2. **പ്രതികരണപരിശോധന** - മൊബൈൽ, ടാബ്ലെറ്റ്, ഡെസ്ക്ടോപ്പ് സ്ക്രീൻ വലുപ്പങ്ങളിൽ ലെയ്ഔട്ട് പരിശോധിക്കുക
|
||||
3. **ഡോക്യുമെന്റേഷൻ** - CSS-ൽ നിങ്ങളുടെ ലെയ്ഔട്ട് തിരഞ്ഞെടുപ്പിന്റെ കാരണങ്ങൾ വിശദീകരിക്കുന്ന കമന്റുകൾ ചേർക്കുക
|
||||
4. **സ്ക്രീൻഷോട്ടുകൾ** - വിവിധ ബ്രൗസറുകളിലും സ്ക്രീൻ വലുപ്പങ്ങളിലും ടെറിയറിയം സ്ക്രീൻഷോട്ടുകൾ എടുക്കുക
|
||||
|
||||
## സാങ്കേതിക ആവശ്യകതകൾ
|
||||
|
||||
### ലെയ്ഔട്ട് നടപ്പിലാക്കൽ
|
||||
- **ഒന്ന് തിരഞ്ഞെടുക്കുക**: Flexbox അല്ലെങ്കിൽ CSS Grid (ഒരു ഘടകത്തിനുള്ളിൽ ഇരട്ട ഉപയോഗം ഒഴിവാക്കുക)
|
||||
- **പ്രതികരണ ഡീസൈൻ**: സ്ഥിരമായ പിക്സലുകൾക്കു പകരമായി എസ്-അനുപാതക യൂണിറ്റുകൾ (`rem`, `em`, `%`, `vw`, `vh`) ഉപയോഗിക്കുക
|
||||
- **പ്രവേശനക്ഷമത**: ശരിയായ സെമാന്റിക് HTML ഘടനയും alt ടെക്സ്റ്റും നിലനിർത്തുക
|
||||
- **കോഡ് ഗുണനിലവാരം**: ഏകീകൃത നാമകരണം പാലിച്ച് CSS ലജിക് പ്രകാരം ക്രമീകരിക്കുക
|
||||
|
||||
### ഉൾപ്പെടുത്തേണ്ട ആധുനിക CSS സവിശേഷതകൾ
|
||||
```css
|
||||
/* Example Flexbox approach */
|
||||
.terrarium-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plant-containers {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Example Grid approach */
|
||||
.terrarium-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 100vh;
|
||||
gap: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
### ബ്രൗസർ പിന്തുണ ആവശ്യകതകൾ
|
||||
- **Chrome/Edge**: ഏറ്റവും പുതിയ 2 പതിപ്പുകൾ
|
||||
- **Firefox**: ഏറ്റവും പുതിയ 2 പതിപ്പുകൾ
|
||||
- **Safari**: ഏറ്റവും പുതിയ 2 പതിപ്പുകൾ
|
||||
- **മൊബൈൽ ബ്രൗസറുകൾ**: iOS Safari, Chrome Mobile
|
||||
|
||||
## ഡെലിവറബിൾസ്
|
||||
|
||||
1. **അപ്ഡേറ്റു ചെയ്ത എച്ച്ടിഎംഎൽ ഫയൽ** മെച്ചപ്പെടുത്തിയ സെമാന്റിക് ഘടനയോടുകൂടി
|
||||
2. **പുനഃസംഘടിപ്പിച്ച CSS ഫയൽ** ആധുനിക ലെയ്ഔട്ട് സാങ്കേതിക വിദ്യകൾ ഉപയോഗിച്ച്
|
||||
3. **ക്രോസ്-ബ്രൗസർ പൊരുത്തം കാണിക്കുന്ന സ്ക്രീൻഷോട്ടുകളുടെ ശേഖരം**:
|
||||
- ഡെസ്ക്ടോപ്പ് ദൃശ്യങ്ങൾ (1920x1080)
|
||||
- ടാബ്ലെറ്റ് ദൃശ്യങ്ങൾ (768x1024)
|
||||
- മൊബൈൽ ദൃശ്യങ്ങൾ (375x667)
|
||||
- കുറഞ്ഞത് 2 വ്യത്യസ്ത ബ്രൗസറുകളിൽ നിന്നും
|
||||
4. **README.md ഫയൽ** രേഖപ്പെടുത്തുന്നത്:
|
||||
- നിങ്ങളുടെ ലെയ്ഔട്ട് തിരഞ്ഞെടുപ്പ് (Flexbox vs Grid) ആയും കാരണങ്ങളും
|
||||
- പുനഃസംഘടനയിടുമ്പോൾ നേരിട്ട വെല്ലുവിളികൾ
|
||||
- ബ്രൗസർ പൊരുത്തം കുറിപ്പുകൾ
|
||||
- കോഡ് പണിയേണ്ട വിധികൾ
|
||||
|
||||
## വിലയിരുത്തൽ റൂബ്രിക്ക്
|
||||
|
||||
| മാനദണ്ഡം | ഉത്തമം (4) | പ്രോഫിഷ്യന്റ് (3) | വികസനം (2) | തൊട്ടു തുടങ്ങിയവ (1) |
|
||||
|----------|--------------|----------------|--------------|--------------|
|
||||
| **ലെയ്ഔട്ട് നടപ്പിലാക്കൾ** | Flexbox/Grid എഡ്വാൻസഡ് ഫീച്ചറുകളോടെ സമ്പൂർണമായി പ്രതികരണക്ഷമമായി ഉപയോഗിച്ചത് | ശരിയായ നടപ്പിലാക്കലും നല്ല പ്രതികരണക്ഷമതയുമുള്ളത് | അടിസ്ഥാന നടപ്പിലാക്കൽ, ചെറിയ പ്രതികരണാശ്വാസ പ്രശ്നങ്ങൾ | അപൂർണ്ണമായോ തെറ്റായ ലെയ്ഔട്ട് നടപ്പിലാക്കൽ |
|
||||
| **കോഡ് ഗുണമേൻമ** | പരിപൂര്ണവും വിലയേറിയ കമന്റുകളും ഏകീകൃത നാമകരണവും ഉള്ള ശുഭ്രമായ CSS | നല്ല ക്രമീകരണവും ചില കമന്റുകളും ഉള്ളത് | പര്യാപ്തമായ ക്രമീകരണം, കുറവ് കമന്റുകൾ | കുഴപ്പമുള്ള ക്രമീകരണവും ബുദ്ധിമുട്ടുള്ള് വിവരണം |
|
||||
| **ക്രോസ്-ബ്രൗസർ പൊരുത്തം** | ആവശ്യമായ എല്ലാ ബ്രൗസറുകളിലും പൂർണ പൊരുത്തവും സ്ക്രീൻഷോട്ടുകളുമായി | നല്ല പൊരുത്തവും കുറച്ച് വ്യത്യാസങ്ങൾ രേഖപ്പെടുത്തി | ചില പൊരുത്ത പ്രശ്നങ്ങൾ, ജോലിയെ ബാധിക്കാത്തവ | പ്രധാന പൊരുത്ത പ്രശ്നങ്ങളും പരിശോധനയുടെ അഭാവം |
|
||||
| **പ്രതികരണ ഡിസൈൻ** | അകമഴിഞ്ഞ മൊബൈൽ-ഫസ്റ്റ് സമീപനവും സ്മൂത്ത് ബ്രേക്ക് പോയിന്റുകളും | നല്ല പ്രതികരണ ക്ഷമത, യോജിച്ച ബ്രേക്ക് പോയിന്റുകൾ | അടിസ്ഥാന പ്രതികരണ സ്വഭാവം, ചില ലെയ്ഔട്ട് പ്രശ്നങ്ങൾ | പരിമിതമോ തകരാറുള്ള പ്രതികരണം |
|
||||
| **ഡോക്യുമെന്റേഷൻ** | വിശദവും വിമർശനപരവുമായ README, വിശദീകരണങ്ങൾക്കും洞见കൾക്കും | ആവശ്യമായ എല്ലാ ഘടകങ്ങളും ഉൾക്കൊള്ളുന്ന നല്ല ഡോക്യുമെന്റേഷൻ | അടിസ്ഥാന രേഖപ്പെടുത്തലും കുറഞ്ഞ വിശദാംശങ്ങളും | അപൂർണ്ണമായോ ഇല്ലാത്ത ഡോക്യുമെന്റേഷൻ |
|
||||
|
||||
## സഹായകരമായ സ്രോതസ്സുകൾ
|
||||
|
||||
### ലെയ്ഔട്ട് മാർഗ്ഗനിർദേശങ്ങൾ
|
||||
- 📖 [Flexbox-ന് സമഗ്ര ഗൈഡ്](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
- 📖 [CSS Grid-ന് സമഗ്ര ഗൈഡ്](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
||||
- 📖 [Flexbox vs Grid - ശരിയായ ഉപകരണം തിരഞ്ഞെടുക്കുക](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
|
||||
|
||||
### ബ്രൗസർ പരിശോധന ഉപകരണങ്ങൾ
|
||||
- 🛠️ [Browser DevTools പ്രതികരണ മുഖം](https://developer.chrome.com/docs/devtools/device-mode/)
|
||||
- 🛠️ [Can I Use - സവിശേഷത പിന്തുണ](https://caniuse.com/)
|
||||
- 🛠️ [BrowserStack - ക്രോസ്-ബ്രൗസർ പരിശോധന](https://www.browserstack.com/)
|
||||
|
||||
### കോഡ് ഗുണമേൻമ ഉപകരണങ്ങൾ
|
||||
- ✅ [CSS വാലിഡേറ്റർ](https://jigsaw.w3.org/css-validator/)
|
||||
- ✅ [HTML വാലിഡേറ്റർ](https://validator.w3.org/)
|
||||
- ✅ [WebAIM കോൺട്രാസ്റ്റ് പരിശോധകൻ](https://webaim.org/resources/contrastchecker/)
|
||||
|
||||
## ബോണസ് വെല്ലുവിളികൾ
|
||||
|
||||
🌟 **അടുക്കളവായ ലെയ്ഔട്ടുകൾ**: നിങ്ങളുടെ ഡിസൈനിലെ വ്യത്യസ്ത ഭാഗങ്ങളിൽ Flexbox ഉം Grid ഉം കൂടി നടപ്പിലാക്കുക
|
||||
🌟 **അനിമേഷൻ ഏകീകരണം**: പുതിയ ലെയ്ഔട്ടിനോട് അനുയോജ്യമായ CSS ട്രാൻസിഷനുകൾ അല്ലെങ്കിൽ അനിമേഷനുകൾ ചേർക്കുക
|
||||
🌟 **ഡാർക്ക് മോഡ്**: CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ ആധാരമാക്കി തീം സ്വിച്ച് ചെയ്യാനുള്ള സംവിധാനങ്ങൾ നടപ്പിലാക്കുക
|
||||
🌟 **കണ്ടെയ്നർ ക്വെരീസ്**: ഘടക-നിരത പ്രതികരണക്ഷമതക്കായി ആധുനിക കണ്ടെയ്നർ ക്വെരി സാങ്കേതിക പാടികൾ ഉപയോഗിക്കുക
|
||||
|
||||
> 💡 **ഓർക്കുക**: പ്രവർത്തിപ്പിക്കാനുള്ള ലക്ഷ്യമല്ല, നിങ്ങളുടെ തെരഞ്ഞെടുത്ത ലെയ്ഔട്ട് രീതി ഈ പ്രത്യേക ഡിസൈൻ വെല്ലുവിളിക്ക് ഏറ്റവും മികച്ച പരിഹാരമാണെന്ന് മനസ്സിലാക്കുകയാണ് വാസ്തവത്തിൽ വേണ്ടത്!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**സ്പഷ്ടീകരണം**:
|
||||
ഈ രേഖ AI വിവർത്തനസേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിക്കുന്നതിനുപേറ്റും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകളും തെറ്റുകളും കാണപ്പെടാമെന്ന് ശ്രദ്ധയിൽ വയ്ക്കുക. മാതൃഭാഷയിലെ യഥാർഥ രേഖ മാത്രമാണ് കൂടുതൽ വിശ്വാസയോഗ്യമായ ഉറവിടം. നിർണായകമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം അനുയോജ്യമാണ്. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കോ ദുരവബോധങ്ങൾക്ക് ഞങ്ങൾ ഉത്തരവാദികൾ അല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
||||
"translation_date": "2026-01-08T19:07:04+00:00",
|
||||
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# DOM ഘടക അന്വേഷണ അസൈൻമെന്റ്
|
||||
|
||||
## അവലോകനം
|
||||
|
||||
DOM മാനിപ്പുലേഷന്റെ ശക്തിയെ നേരിട്ട് അനുഭവിച്ചശേഷം, DOM ഇന്റർഫേസുകളുടെ വ്യാപക ലോകം പരിശോധിക്കുന്ന സമയമായിരിക്കുന്നു. ഈ അസൈൻമെന്റ് നിങ്ങളുടെ അറിവ് DOM ഉപയോഗിച്ചുള്ള വ്യത്യസ്ത വെബ് സാങ്കേതികവിദ്യകൾ എങ്ങനെ സംവദിക്കുന്നുവെന്നതിൽ കൂടുതൽ ഗൗരവമാർന്നിരിക്കാൻ സഹായിക്കും, സ്രഷ്ടികൾഗന്ഥങ്ങൾ മാത്രം വലിപ്പിക്കുന്നതിനു മുകളിലാണ്.
|
||||
|
||||
## പഠന ലക്ഷ്യങ്ങൾ
|
||||
|
||||
ഈ അസൈൻമെന്റ് പൂർത്തിയാക്കിയാൽ നിങ്ങൾ:
|
||||
- ഒരു പ്രത്യേക DOM ഇന്റർഫേസ് ആഴത്തില് **പരിശോധിക്കുകയും** മനസിലാക്കുകയും ചെയ്യും
|
||||
- DOM മാനിപ്പുലേഷനിലെ യാഥാർത്ഥ്യപ്രകാരം **വിശ്ളേഷണം** ചെയ്യും
|
||||
- സിദ്ധാന്തപരമായ ആശയങ്ങളെ ഉപയോഗപരമായ പ്രയോഗങ്ങളുമായി **ബന്ധപ്പെടുത്തും**
|
||||
- സാങ്കേതിക പ്രമാണീകരണത്തിലും വിശ്ളേഷണത്തിലും **അഭ്യാസം** വളർത്തും
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### പടി 1: നിങ്ങളുടെ DOM ഇന്റർഫേസ് തിരഞ്ഞെടുക്കുക
|
||||
|
||||
MDN ന്റെ സമഗ്രമായ [DOM ഇന്റർഫേസുകളുടെ പട്ടിക](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) സന്ദർശിച്ച് നിങ്ങൾക്ക് താല്പര്യമുള്ള ഒരു ഇന്റർഫേസ് തിരഞ്ഞെടുക്കുക. വൈവിധ്യമാർന്നതിനു താഴെകാഴ്ചവച്ച വിഭാഗങ്ങളിൽ നിന്ന് തിരഞ്ഞെടുക്കാം:
|
||||
|
||||
**ആരംഭക സൗഹൃദ ഓപ്ഷനുകൾ:**
|
||||
- `Element.classList` - ഡൈനാമിക് CSS ക്ലാസുകൾ മാനേജുചെയ്യൽ
|
||||
- `Document.querySelector()` - പരിചയക്കാരനായ ഓબ્જക്ട് തിരയൽ
|
||||
- `Element.addEventListener()` - പൊയിന്റർ ഇവന്റുകൾ മുകളില് ഇവന്റ് കൈകാര്യം ചെയ്യൽ
|
||||
- `Window.localStorage` - ക്ലയന്റ്-സൈഡ് ഡേറ്റാ സൂക്ഷിക്കൽ
|
||||
|
||||
**ഇടവഴിയുള്ള സവാലുകൾ:**
|
||||
- `Intersection Observer API` - ഘടക ദൃശ്യത തിരിച്ചറിയൽ
|
||||
- `MutationObserver` - DOM മാറ്റങ്ങൾ നിരീക്ഷിക്കൽ
|
||||
- `Drag and Drop API` - നമുടെ പൊയിന്റർ അടിസ്ഥാനത്തിലുള്ള സമീപനത്തിന് ബദലായി
|
||||
- `Geolocation API` - ഉപയോക്തൃ സ്ഥലം പ്രാപ്തമാക്കൽ
|
||||
|
||||
**മുന്നോട്ട പരിശോധന:**
|
||||
- `Web Components` - കസ്റ്റം ഘടകങ്ങളും ഷാഡോ DOM ഉം
|
||||
- `Canvas API` - പ്രോഗ്രാമാറ്റിക് ഗ്രാഫിക്സ്
|
||||
- `Web Workers` - പിറകിലെ പ്രോസസ്സിംഗ്
|
||||
- `Service Workers` - ഓഫ്ലൈൻ സവിശേഷതകൾ
|
||||
|
||||
### പടി 2: ഗവേഷണവും ഡോക്യുമെന്റേഷനും
|
||||
|
||||
300-500 വാക്കുകളിൽ സമഗ്രമായ വിശ്ളേഷണം സൃഷ്ടിക്കുക, ഇതിൽ ഉൾപ്പെടുത്തുക:
|
||||
|
||||
#### സാങ്കേതിക അവലോകനം
|
||||
- നിങ്ങളുടെ തിരഞ്ഞെടുക്കുന്ന ഇന്റർഫേസ് എന്താണ് ചെയ്യുന്നത്, ആരംഭക്കാർക്ക് എളുപ്പമുള്ള ഭാഷയിൽ **വर्णിക്കുക**
|
||||
- അത് നൽകുന്ന പ്രധാന മെത്തഡുകൾ, പ്രോപ്പർട്ടികൾ, ഇവന്റ്സ് **വിവർത്തനം ചെയ്യുക**
|
||||
- ഇതിന്റെ ഉപയോഗം ലക്ഷ്യമാക്കുന്ന പ്രശ്നങ്ങളൊക്കെ **വിവരണം ചെയ്യുക**
|
||||
|
||||
#### യാഥാർത്ഥ്യപ്രഞ്ജലം നടപ്പിലാക്കൽ
|
||||
- നിങ്ങളുടെ ഇന്റർഫേസ് ഉപയോഗിക്കുന്ന ഒരു വെബ്സൈറ്റ് **കണ്ടുപിടിക്കുക** (കോഡ് പരിശോധിക്കോ ഉദാഹരണങ്ങൾ അന്വേഷിക്കോ ചെയ്യുക)
|
||||
- **കോഡ് ഉദാഹരണങ്ങളോടെ** പ്രത്യേക നടപ്പിലാക്കൽ രേഖപ്പെടുത്തുക
|
||||
- ഡെവലപ്പർമാർ ഈ സമീപനം തിരഞ്ഞെടുത്തത് എന്തുകൊണ്ടെന്ന് **വിശ്ളേഷിക്കുക**
|
||||
- ഇത് ഉപയോക്തൃ പരിചയത്തെ എങ്ങനെ മെച്ചപ്പെടുത്തുന്നു എന്ന് **വിവരണം ചെയ്യുക**
|
||||
|
||||
#### പ്രായോഗിക പ്രയോഗം
|
||||
- നമ്മുടെയോളുള്ള ടെരാറിയം പ്രോജക്റ്റിൽ ഉപയോഗിച്ച സാങ്കേതിക വിദ്യകളുമായി നിങ്ങളുടെ ഇന്റർഫേസിനെ **തുലന ചെയ്യുക**
|
||||
- നിങ്ങളുടെ ഇന്റർഫേസ് ടെരാറിയം പ്രവർത്തനങ്ങൾ എങ്ങനെ മെച്ചപ്പെടുത്താം എന്നും **സൂചന നൽകുക**
|
||||
- ഈ ഇന്റർഫേസ് മറ്റ് ഏത് പ്രോജക്റ്റുകൾക്ക് ഗുണപ്രദമാകുമെന്ന് **അങ്ങനെ തിരിച്ചറിയുക**
|
||||
|
||||
### പടി 3: കോഡ് ഉദാഹരണം
|
||||
|
||||
നിങ്ങളുടെ ഇന്റർഫേസ് പ്രവർത്തനത്തിൽ കാണിക്കുന്ന ലളിതവും പ്രവർത്തനക്ഷമവുമായ കോഡ് ഉദാഹരണം ഉൾപ്പെടുത്തുക. ഇത്:
|
||||
- **പ്രവർത്തനക്ഷമമായിരിക്കണം** - ടെസ്റ്റ് ചെയ്തപ്പോൾ ശരിയായി പ്രവർത്തിക്കണം
|
||||
- **വിവരസംയുക്തമായിരിക്കണം** - ഓരോ ഭാഗവും എന്താണെന്നും വിശദീകരിച്ചിരിക്കണം
|
||||
- **പ്രസക്തമായിരിക്കണം** - യാഥാർത്ഥ്യസന്നദ്ധമായ ഉപയോഗത്തിനൊപ്പം ബന്ധിപ്പിച്ചിരിക്കണം
|
||||
- **ആരംഭക സൗഹൃദമായിരിക്കണം** - വെബ് ഡെവലപ്മെന്റ് പഠിക്കുന്നവർക്കായി മനസ്സിലാക്കാവുന്നതായിരിക്കണം
|
||||
|
||||
## സമർപ്പണ ഫോർമാറ്റ്
|
||||
|
||||
നിങ്ങളുടെ സമർപ്പണം വ്യക്തമായ തലക്കെട്ടുകളിൽ ഘടിപ്പിക്കുക:
|
||||
|
||||
```markdown
|
||||
# [Interface Name] DOM Investigation
|
||||
|
||||
## What It Does
|
||||
[Technical overview]
|
||||
|
||||
## Real-World Example
|
||||
[Website analysis and implementation details]
|
||||
|
||||
## Code Demonstration
|
||||
[Your working example with comments]
|
||||
|
||||
## Reflection
|
||||
[How this connects to our terrarium project and future applications]
|
||||
```
|
||||
|
||||
## വിലയിരുത്തൽ ക്രമരഹിതം
|
||||
|
||||
| മാനദണ്ഡം | പ്രതിഭാസപരമായ (A) | പ്രാവিণ്യം (B) | വികസനഘട്ടം (C) | മെച്ചപ്പെടുത്തൽ ആവശ്യം (D) |
|
||||
|----------|------------------|--------------|---------------|--------------------------|
|
||||
| **സാങ്കേതിക ബോധനം** | ശരിയായ വ്യാഖ്യാനങ്ങൾ കൂടിയ ആഴത്തിലുള്ള മനസ്സിലാക്കൽ | ശരിയായ വിശദീകരണങ്ങളോടെ നല്ല ബോധനം | അടിസ്ഥാനബോധം ചില തെറ്റുകളും ഉൾക്കൊള്ളുന്നു | പെരുമാറ്റത്തിലെ വലിയ പിഴവുകൾ സഹിതം പരിമിതമായ ബോധനം |
|
||||
| **യാഥാർത്ഥ്യപരിശോധന** | സാങ്കേതിക നടപ്പിലാക്കൽ വ്യക്തമായ ഉദാഹരണങ്ങളോടെ വിശദമായി വിശ്ളേഷണം | യഥാർത്ഥ ഉദാഹരണമുണ്ടെങ്കിലും വിശ്ളേഷണം മിതമായത് | ഉദാഹരണം കാണിച്ചെങ്കിലും വിശ്ളേഷണത്തിൽ അപര്യാപ്തി | യാതൊരു വ്യക്തമായ ബന്ധവുമില്ല അകമന്ത്രി എന്തെങ്കിലും തെറ്റായ വിവരങ്ങൾ |
|
||||
| **കോഡ് ഉദാഹരണം** | പ്രവർത്തിക്കുന്ന, വിശദീകരണങ്ങൾ ചേർന്ന കോഡ് | പ്രവർത്തനക്ഷമമായി രേഖപ്പെടുത്തിയ കോഡ് | കോഡ് പ്രവർത്തിക്കുന്നു പക്ഷേ പരമാണ**)(&സമയം കുറവാണ് | കോഡിൽ പിശകുകൾ അല്ലെങ്കിൽ പോരായ്മകൾ |
|
||||
| **എഴുത്തിന്റെ ഗുണനിലവാരം** | വ്യക്തമായ, ആകർഷകമായ രചന, സാങ്കേതിക രേഖപത്രണം ശരിയായി | നന്നായി ക്രമീകരിച്ച സാങ്കേതിക എഴുത്ത് | ശരാശരി ക്രമീകരണം, വ്യക്തത മിതമാണ് | ക്രമീകരണം ദുർബലമാണ്, ആശയവിനിമയം अस्पष्टമാണ് |
|
||||
| **തർക്കാസ്പദ ചിന്തന** | ആശയങ്ങൾക്കിടയിൽ താക്ത്വപരമായ ബന്ധങ്ങളും സൃഷ്ടിപരമായ പ്രയോഗ നിർദ്ദേശങ്ങളും | നല്ല വിശ്ളേഷണചിന്തനവും ബന്ധപ്പെട്ട കാരണങ്ങൾ | കുറച്ചുകൂടി വിശകലനം ഉണ്ടായെങ്കിലും കൂടുതൽ ആഴമാകും | പരിമിതമായ സമഗ്രചിന്തന തെളിവ് |
|
||||
|
||||
## വിജയത്തിനുള്ള നിർദേശങ്ങൾ
|
||||
|
||||
**ഗവേഷണ തന്ത്രങ്ങൾ:**
|
||||
- പ്രാമാണികതയ്ക്കായി MDN പ്രമാണങ്ങൾ **ആരംഭിക്കുക**
|
||||
- GitHub അല്ലെങ്കിൽ CodePen-ൽ കോഡ് ഉദാഹരണങ്ങൾ **വേട്ടയാടി കണ്ടെത്തുക**
|
||||
- പ്രചാരമുള്ള വെബ്സൈറ്റുകൾ ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിച്ച് പരിശോധിക്കുക
|
||||
- ദൃശ്യ വിശദീകരണങ്ങൾക്ക് ട്യൂട്ടോറിയൽ വീഡിയോകൾ **നോട്ടം വെക്കുക**
|
||||
|
||||
**എഴുത്തുദ്ദേശങ്ങൾ:**
|
||||
- ഡോക്യുമെന്റേഷൻ പകര്ത്താതെ നിങ്ങളുടെ സ്വന്തം വാക്കുകൾ **ഉപയോഗിക്കുക**
|
||||
- വ്യക്തമായ ഉദാഹരണങ്ങളും കോഡ് സെപ്പറ്റുകളും ഉൾക്കൊള്ളിക്കുക
|
||||
- സാങ്കേതിക ആശയങ്ങൾ സുഹൃത്തിനൊപ്പം പങ്കുവെക്കുന്നത് പോലെ **വിവരണം ചെയ്യുക**
|
||||
- നിങ്ങളുടെ ഇന്റർഫേസിനെ വിപുലമായ വെബ് ഡെവലപ്പ്മെന്റ് ആശയങ്ങളുമായി **ബന്ധിപ്പിക്കുക**
|
||||
|
||||
**കോഡ് ഉദാഹരണ ആശയങ്ങൾ:**
|
||||
- ഇന്റർഫേസിന്റെ പ്രധാന സവിശേഷതകൾ പ്രദർശിപ്പിക്കുന്ന ലളിതമായ ഡെമോ **സൃഷ്ടിക്കുക**
|
||||
- രണ്ടു ചിന്തകൾ മുതൽ നമ്മുടെ ടെരാറിയം പ്രോജക്റ്റിൽ നിന്നുള്ള ആശയങ്ങളെ കണ്ടെത്തുക
|
||||
- ദൃശ്യ രൂപകൽപ്പനയേക്കാൾ പ്രവർത്തനക്ഷമതയിൽ **കേന്ദ്രപ്പെടുത്തുക**
|
||||
- കോഡ് ശരിയായി പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കാൻ **പരീക്ഷണങ്ങൾ നടത്തുക**
|
||||
|
||||
## സമർപ്പണ അവസാനം
|
||||
|
||||
[ഇവിടെ അവസാന തീയതി ചേർക്കുക]
|
||||
|
||||
## ചോദ്യങ്ങൾ?
|
||||
|
||||
ഈ അസൈൻമെന്റിന്റെ ഏതെങ്കിലും വശത്തെക്കുറിച്ച് കൂടുതൽ വ്യക്തത ആവശ്യമുണ്ടെങ്കിൽ, അഹംകാരം ഇല്ലാതെ ചോദിക്കുക! DOM എങ്ങനെ നമ്മുടെ ദിവസേന ഉപയോഗിക്കുന്ന സംവേദനാത്മക വെബ് അനുഭവങ്ങളെ സാധ്യമാക്കുന്നുവെന്ന് ഈ അന്വേഷണം നിങ്ങളുടെ അറിവ് കൂടുതൽ ഗൗരവമുള്ളതാക്കും.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**നിര്ദ്ദേശം**:
|
||||
ഈ ഡോക്യുമെന്റ് എഐ പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവര്ത്തനം ചെയ്തതാണ്. നാം കൃത്യതയിലേക്ക് ശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവര്ത്തനങ്ങളില് പിഴവുകള് അല്ലെങ്കില് അകമ്മതകള് ഉണ്ടാകാന് സാധ്യതയുള്ളതായി ദയവായി ശ്രദ്ധിക്കൂ. എഴുത്തിന്റെ മാതൃഭാഷയില് ഉള്ള ഉടനീളം ദസ്താവേജാണ് അധികാരം ലഭിക്കുന്ന ഉറവിടമെന്നുവെക്കേണ്ടത്. അത്യാവശ്യമായ വിവരങ്ങള്ക്കായി പ്രൊഫഷണല് മനുഷ്യ വിവര്ത്തനം നിര്ദേശിക്കുന്നു. ഈ വിവര്ത്തനത്തിന്റെ ഉപയോഗത്തില് നിന്നു ഉണ്ടാകാവുന്ന തെറ്റിദ്ധാരണകള്ക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങള്ക്കോ ഞങ്ങള് ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
|
||||
"translation_date": "2026-01-08T11:36:46+00:00",
|
||||
"source_file": "3-terrarium/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
## നിങ്ങളുടെ ടെറിയാറ്യം വിന്യസിക്കുക
|
||||
|
||||
നിങ്ങൾക്ക് **Azure Static Web Apps** ഉപയോഗിച്ച് നിങ്ങളുടെ ടെറിയാറ്യം വെബിലെ വെബ്സൈറ്റായി വിന്യസിക്കാനും പ്രസിദ്ധീകരിക്കാനും കഴിയും.
|
||||
|
||||
1. ഈ റപോ ഫോർക്കുചെയ്യുക
|
||||
|
||||
2. ഈ ബട്ടൺ അമർത്തുക 👇
|
||||
|
||||
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
||||
|
||||
3. നിങ്ങളുടെ ആപ്പ് സൃഷ്ടിക്കാൻ സജ്ജീകരണ വിസാർഡിനെ അനുഗമിക്കുക.
|
||||
- **App root** ആയി `/solution` അല്ലെങ്കിൽ നിങ്ങളുടെ കോഡ്بേസ്ന്റെ റൂട്ട് സെറ്റ് ചെയ്യുക.
|
||||
- ഈ ആപ്പിൽ API ഇല്ല, അതിനാൽ API കോൺഫിഗറേഷൻ ചെയ്യേണ്ടതില്ല.
|
||||
- Azure Static Web Apps നിങ്ങളുടെ ആപ്പ് നിർമ്മിക്കാൻ, പ്രസിദ്ധീകരിക്കാൻ സഹായിക്കുന്ന `.github` ഫോൾഡർ സ്വയം സൃഷ്ടിക്കും.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരാമർശം**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI ഭാഷാന്തം സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിക്കുന്നെങ്കിലും, യന്ത്ര വിവർത്തനങ്ങളിൽ പിഴവുകളും അർത്ഥവ്യത്യാസങ്ങളും ഉണ്ടായേക്കാമെന്നതു ശ്രദ്ധിക്കുക. യഥാർത്ഥ സ്ഥിതിചെയ്യുന്ന ഭാഷയിലെ ദസ്താവേജ് കൃത്യമായ ഉറവിടമായി കണക്കാക്കപ്പെടേണ്ടതാണ്. നിരൂപണ വിവരങ്ങൾക്ക് വിദഗ്ധ മനുഷ്യ വിവർത്തനം നിർദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽനിന്ന് ഉണ്ടാക്കുന്ന തെറ്റിദ്ധാരണകൾക്കും അർത്ഥവ്യത്യാസങ്ങൾക്കും біз პასუხદારല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "6329fbe8bd936068debd78cca6f09c0a",
|
||||
"translation_date": "2026-01-08T19:10:00+00:00",
|
||||
"source_file": "3-terrarium/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# എന്റെ ടെറാറിയം: ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് HTML, CSS, DOM മാനിപുലേഷൻ പഠിക്കാനുള്ള ഒരു പ്രോജക്ട് 🌵🌱
|
||||
|
||||
ഒരു ചെറിയ ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് കോഡ്-ധ്യാനം. ചെറിയ HTML, JS, CSS ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു വെബ് ഇന്റർഫേസ് നിർമ്മിക്കാൻ, അതിനെ സ്റ്റൈൽ ചെയ്യാൻ, ഒരു ഇന്ററാക്ഷൻ ചേർക്കാൻ കഴിയും.
|
||||
|
||||
|
||||
|
||||
## ക്രെഡിറ്റുകൾ
|
||||
|
||||
♥️ കൊണ്ട് എഴുതിയത് [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
CSS വഴി സൃഷ്ടിച്ച ടെറാറിയം Jakub Mandraയുടെ ഗ്ലാസ് ജാർ [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) ൽ നിന്നുള്ള പ്രചോദനമാണ്.
|
||||
|
||||
കലാസൃഷ്ടി Procreate ഉപയോഗിച്ച് [Jen Looper](http://jenlooper.com) കൈവയറ്റു വരച്ചതാണ്.
|
||||
|
||||
## നിങ്ങളുടെ ടെറാറിയം ഡിപ്ലോയ് ചെയ്യുക
|
||||
|
||||
Azure Static Web Apps ഉപയോഗിച്ച് നിങ്ങളുടെ ടെറാറിയം വെബിൽ ഡിപ്ലോയ് ചെയ്യാം അല്ലെങ്കിൽ പ്രസിദ്ധീകരിക്കാം.
|
||||
|
||||
1. ഈ റെപ്പോ ഫോർക്കുചെയ്യുക
|
||||
|
||||
2. ഈ ബട്ടൺ ഞെക്കുക
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. നിങ്ങളുടെ ആപ്പ് സൃഷ്ടിക്കുന്ന വിചാരണ പാതികയിലൂടെ നീങ്ങുക. ആപ്പ് റൂട്ട് `/solution` ആകുകയോ അല്ലെങ്കിൽ നിങ്ങളുടെ കോഡ്بേസ് റൂട്ട് ആകുകയോ എന്നതിൽ ഉറപ്പാക്കുക. ഈ ആപ്പിൽ API ഇല്ല, അതു ചേർക്കുന്നതിൽ ആശങ്കപ്പെടേണ്ടതില്ല. നിങ്ങളുടെ ഫോർക്കുചെയ്ത റെപ്പോയിൽ .github ഫോൾഡർ സൃഷ്ടിക്കും, ഇത് Azure Static Web Appsയുടെ ബിൽഡ് സർവീസ് നിങ്ങളുടെ ആപ്പ് പുതിയ URLലിലേക്ക് ബിൽഡ് ചെയ്ത് പ്രസിദ്ധീകരിക്കാൻ സഹായിക്കും.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകരണം**:
|
||||
ഈ പ്രമാണം AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്യപ്പെട്ടതാണ്. ഞങ്ങൾ ശരിവെപ്പിന് ശ്രമിക്കുന്നതെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടാകാമെന്ന് ദയവായി അറിയുക. മൗലിക പ്രമാണം അതിന്റെ സ്വദേശംഭാഷയിൽ ഔദ്യോഗികമായ സ്രോതസ്സായി കരുതപ്പെടണം. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റായ ധാരണകൾക്കും അർത്ഥാഘാതങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,290 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
|
||||
"translation_date": "2026-01-08T11:33:48+00:00",
|
||||
"source_file": "4-typing-game/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ഇവന്റ്-ഡ്രിറെൻ പ്രോഗ്രാമിംഗ് - ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം ഡവലപ്പ്മെന്റ് ജർണൽ
|
||||
section അടിസ്ഥാന ഘടകം
|
||||
ഗെയിം ഘടന ആസൂത്രണം ചെയ്യുക: 3: Student
|
||||
ഉപയോക്തൃ ഇന്റർഫേസ് ഡിസൈൻ ചെയ്യുക: 4: Student
|
||||
HTML ഘടകങ്ങൾ സജ്ജപ്പെടുത്തുക: 4: Student
|
||||
section സവിശേഷതകൾ
|
||||
ഉപയോക്തൃ ഇൻപുട്ട് കൈകാര്യം ചെയ്യുക: 4: Student
|
||||
സമയം മനസിലാക്കുക: 5: Student
|
||||
കൃത്യത കണക്കുകൂട്ടുക: 5: Student
|
||||
section ഫീച്ചറുകൾ
|
||||
കാഴ്ച വശ പ്രതികരണം ചേർക്കുക: 5: Student
|
||||
ഗെയിം ലോഗിക്ക് നടപ്പിലാക്കുക: 5: Student
|
||||
അനുഭവം മിനുക്കുക: 5: Student
|
||||
```
|
||||
## പരിചയം
|
||||
|
||||
എല്ലാ ഡെവലപ്പറും അറിയുന്ന, പക്ഷെ വിരളമായി സംസാരിക്കുന്ന ഒരു കാര്യം ഇതാണ്: വേഗത്തിൽ ടൈപ്പ് ചെയ്യുക ഒരു സൂപ്പർപവർ ആണ്! 🚀 ആശ്രയിക്കു - നിങ്ങളുടെ മസ്തിഷ്കത്തില് നിന്നുള്ള ആശയങ്ങൾ എത്ര വേഗം നിങ്ങളുടെ കോഡ് എഡിറ്ററിൽ എത്തിക്കുന്നത്, അത്രമേൽ നിങ്ങളുടെ സൃഷ്ടിപരമായ ചൈതന്യം ഒഴുകാൻ കഴിയും. ഇത്, നിങ്ങളുടെ ചിന്തകളും സ്ക്രീനുമിടയിലെ നേരിട്ടുള്ള പൈപ്ലൈനായി കണക്കാക്കാം.
|
||||
|
||||
```mermaid
|
||||
pie title ഗെയിം സവിശേഷതകൾ
|
||||
"അസ്തിത്വത്തിലുള്ള അഭിപ്രായം" : 25
|
||||
"പ്രവർത്തന ട്രാക്കിംഗ്" : 20
|
||||
"ഇന്ററാക്റ്റീവ് UI" : 20
|
||||
"ടൈമർ സിസ്റ്റം" : 15
|
||||
"ഉദ്ധരണി മാനേജുമെന്റ്" : 10
|
||||
"ഫലങ്ങൾ പ്രദർശനം" : 10
|
||||
```
|
||||
ഈ കഴിവ് മെച്ചപ്പെടുത്താനുള്ള ഏറ്റവും മികച്ച ഒരു മാർഗം അറിയാമോ? നിങ്ങൾ കണക്കാക്കിയത് പോലെ - നാം ഒരു ഗെയിം നിർമ്മിക്കാൻ പോകുന്നു!
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[പ്ലേയര് ഗെയിം ആരംഭിക്കുന്നു] --> B[യാദൃച്ഛിക ഉദ്ധരണി പ്രദര്ശിപ്പിച്ചു]
|
||||
B --> C[പ്ലേയര് അക്ഷരങ്ങള് ടൈപ്പ് ചെയ്യുന്നു]
|
||||
C --> D{അക്ഷരം ശരിയാണോ?}
|
||||
D -->|Yes| E[പച്ച ഹൈലൈറ്റ്]
|
||||
D -->|No| F[ചുവപ്പ് ഹൈലൈറ്റ്]
|
||||
E --> G[ശുദ്ധിതി അപ്ഡേറ്റ് ചെയ്യുക]
|
||||
F --> G
|
||||
G --> H{ഉദ്ധരണി പൂര്ത്തിയായി താലോ?}
|
||||
H -->|No| C
|
||||
H -->|Yes| I[വേട്ട വേഗം കണക്കാക്കുക]
|
||||
I --> J[ഫലങ്ങള് പ്രദര്ശിപ്പിക്കുക]
|
||||
J --> K[പിന്തുടരണമോ?]
|
||||
K -->|Yes| B
|
||||
K -->|No| L[ഗെയിം അവസാനിച്ചു]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style D fill:#fff3e0
|
||||
style E fill:#e8f5e8
|
||||
style F fill:#ffebee
|
||||
style I fill:#f3e5f5
|
||||
```
|
||||
> നല്ലൊരു ടൈപ്പിംഗ് ഗെയിം ഒത്തുചേർക്കാം!
|
||||
|
||||
നിങ്ങൾ പഠിച്ച ജാവാസ്ക്രിപ്റ്റ്, HTML, CSS കഴിവുകൾ പ്രയോഗിക്കാൻ തയ്യാറായി? നാം ഒരു ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കും, ഇതിൽ പ്രശസ്തമായ അന്വേഷണകാരൻ [ശെർലോക് ഹോംസ്](https://en.wikipedia.org/wiki/Sherlock_Holmes) ന്റെ യാദൃച്ചികമായ ഉദ്ധരണികളാൽ നിങ്ങൾക്ക് വെല്ലുവിളി നൽകും. ഗെയിം നിങ്ങൾ എത്ര വേഗം, എത്ര കൃത്യമായി ടൈപ്പ് ചെയ്യുമ്പോൾ ട്രാക്ക് ചെയ്യും - വിശ്വാസിക്കൂ, ഇത് നിങ്ങൾ കരുതുന്നതിലേക്കാളും കൂടുതലായി ആകര്ഷകമാണ്!
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((ടൈപ്പിംഗ് ഗെയിം വികസനം))
|
||||
User Interface
|
||||
Input Elements
|
||||
Visual Feedback
|
||||
Responsive Design
|
||||
Accessibility
|
||||
Game Logic
|
||||
Quote Selection
|
||||
Timer Management
|
||||
Accuracy Tracking
|
||||
Score Calculation
|
||||
Event Handling
|
||||
Keyboard Input
|
||||
Button Clicks
|
||||
Real-time Updates
|
||||
Game State Changes
|
||||
Performance Metrics
|
||||
Words Per Minute
|
||||
Character Accuracy
|
||||
Error Tracking
|
||||
Progress Display
|
||||
User Experience
|
||||
Immediate Feedback
|
||||
Clear Instructions
|
||||
Engaging Content
|
||||
Achievement System
|
||||
```
|
||||
|
||||
|
||||
## നിങ്ങൾ അറിയേണ്ടതെന്താണ്
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[ഉപയോക്തൃ നടപടി] --> B{സംഭവ തരം?}
|
||||
B -->|കീയോഡ് അമർത്തൽ| C[കീബോർഡ് സംഭവനം]
|
||||
B -->|ബട്ടൺ ക്ലിക്ക്| D[മൗസ് സമ്പ്രദായം]
|
||||
B -->|ടൈമർ| E[സമയം സംഭവനം]
|
||||
|
||||
C --> F[അക്ഷരം പരിശോധിക്കുക]
|
||||
D --> G[ഗെയിം ആരംഭിക്കുക/പുനഃക്രമീകരിക്കുക]
|
||||
E --> H[ടൈമർ അപ്ഡേറ്റ് ചെയ്യുക]
|
||||
|
||||
F --> I{ശരി ആണോ?}
|
||||
I -->|അതെ| J[ഹരിത നിറത്തിൽ ഹൈലൈറ്റ് ചെയ്യുക]
|
||||
I -->|വേറെ| K[ചുവപ്പ് നിറത്തിൽ ഹൈലൈറ്റ് ചെയ്യുക]
|
||||
|
||||
J --> L[സ്കോർ അപ്ഡേറ്റ് ചെയ്യുക]
|
||||
K --> L
|
||||
L --> M[ഗെയിം സ്ഥിതി പരിശോധിക്കുക]
|
||||
|
||||
G --> N[പുതിയ ഉദ്ധരണി സൃഷ്ടിക്കുക]
|
||||
H --> O[സമയം പ്രദർശിപ്പിക്കുക]
|
||||
|
||||
M --> P{ഗെയിം പൂർത്തിയായോ?}
|
||||
P -->|അതെ| Q[പരിണാമങ്ങൾ കാണിക്കുക]
|
||||
P -->|വേറെ| R[ഗെയിം തുടരുക]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style F fill:#e8f5e8
|
||||
style I fill:#fff3e0
|
||||
style Q fill:#f3e5f5
|
||||
```
|
||||
ആരാശ്സ് തുടങ്ങുന്നതിന് മുൻപായി, ഈ ആശയങ്ങളെ പറ്റി ഉറപ്പാക്കൂ (കോർത്തു പായാൻ സമയമുണ്ടെങ്കിൽ വിഷമിക്കേണ്ട, നമ്മല്ല എല്ലാവരും അതിലൂടെയാണ് കടന്നുപോയത്):
|
||||
|
||||
- ടെക്സ്റ്റ് ഇൻപുട്ടും ബട്ടൺ നിയന്ത്രണങ്ങളും സൃഷ്ടിക്കൽ
|
||||
- CSS ക്ലാസ്സുകളും സ്റ്റെൈലുകൾ ക്രമീകരിക്കൽ
|
||||
- ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനങ്ങൾ
|
||||
- ഒരു ആറെ സൃഷ്ടിക്കൽ
|
||||
- യാദൃച്ചിക സംഖ്യ നിർമ്മിക്കൽ
|
||||
- നിലവിലുള്ള സമയം ലഭ്യമാക്കൽ
|
||||
|
||||
ഈ എല്ലാം കുഴപ്പമേയെങ്കിൽ, അവർക്ക് നന്നായി! ചിലപ്പോൾ നിങ്ങളുടെ അറിവ് ഉറപ്പപെടാൻ ഏറ്റവും മികച്ച മാർഗം ഒരു പ്രോജക്ടിൽ ചാടിയും അതിലൂടെ പഠിക്കുന്നതുമാണ്.
|
||||
|
||||
### 🔄 **പാഠശാലാ പരിശോധന**
|
||||
**അടിസ്ഥാന വിലയിരുത്തൽ**: വികസനം തുടങ്ങുന്നതിന് മുമ്പ്, ഉറപ്പാക്കുക:
|
||||
- ✅ HTML ഫോമുകളും ഇൻപുട്ടും എങ്ങനെ പ്രവർത്തിക്കുന്നു
|
||||
- ✅ CSS ക്ലാസ്സുകളും സജീവ ശൈലിയും
|
||||
- ✅ ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലിസണറുകളും ഹാൻഡ്ലറുകളും
|
||||
- ✅ ആറെ മാനിപ്പുലേഷനും യാദൃച്ചിക തിരഞ്ഞെടുപ്പും
|
||||
- ✅ സമയം അളക്കും വിധവും കണക്കുകൂട്ടലുകളും
|
||||
|
||||
**വേഗം സ്വയംപരിജ്ഞാനം**: ഈ ആശയങ്ങൾ ഒരു ബഹിരാകാശ ഗെയിമിൽ എങ്ങനെ സംയോജിപ്പിച്ചിരിക്കുന്നുവെന്ന് നിങ്ങൾ വിശദീകരിക്കാമോ?
|
||||
- **ഇവന്റ്സ്** ഉപയോക്താക്കൾ കൺട്രോളുകളുമായി ഇടപഴകുമ്പോൾ ആകുമാണ്
|
||||
- **ഹാൻഡ്ലറുകൾ** ഇവന്റ് പ്രോസസ്സ് ചെയ്ത് ഗെയിം സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യും
|
||||
- **CSS** ഉപയോക്തൃ പ്രവർത്തനങ്ങൾക്ക് ദൃശ്യ പ്രതികരണം നൽകുന്നു
|
||||
- **സമയം** പ്രകടന അളവും ഗെയിം പുരോഗതിക്കും സാധ്യമാക്കുന്നു
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title ടൈപ്പിംഗ് ഗെയിം കഴിവുകൾ വികസനം
|
||||
x-axis തുടക്കക്കാരൻ --> വിദഗ്ധൻ
|
||||
y-axis സ്റ്റാറ്റിക് --> ഇന്ററാക്ടീവ്
|
||||
quadrant-1 പുരോഗമിച്ച ഗെയിമുകൾ
|
||||
quadrant-2 റിയൽ ടൈം ആപ്പുകൾ
|
||||
quadrant-3 അടിസ്ഥാന പേജ്
|
||||
quadrant-4 ഇന്ററാക്ടീവ് സൈറ്റുകൾ
|
||||
|
||||
HTML Forms: [0.3, 0.2]
|
||||
CSS Styling: [0.4, 0.3]
|
||||
Event Handling: [0.7, 0.8]
|
||||
Game Logic: [0.8, 0.9]
|
||||
Performance Tracking: [0.9, 0.7]
|
||||
```
|
||||
## ഈ കാര്യം നാം നിർമ്മിക്കാം!
|
||||
|
||||
[ഇവന്റ് ഡ്രിറെൻ പ്രോഗ്രാമിംഗ് ഉപയോഗിച്ച് ടൈപ്പിംഗ് ഗെയിം സൃഷ്ടിക്കൽ](./typing-game/README.md)
|
||||
|
||||
### ⚡ **അടുത്ത 5 മിനിറ്റിൽ ചെയ്യാൻ കഴിയും**
|
||||
- [ ] ബ്രൗസറിന്റെ കോൺസോൾ തുറന്ന് `addEventListener` ഉപയോഗിച്ച് കീബോർഡ് ഇവന്റ്സ് കേൾക്കാൻ ശ്രമിക്കുക
|
||||
- [ ] ലളിതമായ HTML പേജ് സൃഷ്ടിച്ച് ഇൻപുട്ട് ഫീൽഡ് ഉപയോഗിച്ച് ടൈപ്പിംഗ് തിരിച്ചറിയണം പരീക്ഷിക്കുക
|
||||
- [ ] ടൈറ്റായ ടെക്സ്റ്റും ലക്ഷ്യ ടെക്സ്റ്റും താരതമ്യം ചെയ്യുക കൊണ്ട് സ്ട്രിംഗ് മാനിപ്പുലേഷൻ അഭ്യാസം ചെയ്യുക
|
||||
- [ ] സമയ ഫങ്ക്ഷനുകൾ മനസ്സിലാക്കാൻ `setTimeout` പരീക്ഷിക്കുക
|
||||
|
||||
### 🎯 **ഈ മണിക്കൂറിൽ നേടാനാകുന്നത്**
|
||||
- [ ] പാഠശേഷി ക്വിസ് പൂർത്തിയാക്കി ഇവന്റ്-ഡ്രിറെൻ പ്രോഗ്രാമിംഗ് മനസ്സിലാക്കുക
|
||||
- [ ] വാക്കുകളുടെ സാധുത അടങ്ങിയ ടൈപ്പിംഗ് ഗെയിമിന്റെ അടിസ്ഥാന പതിപ്പ് നിർമ്മിക്കുക
|
||||
- [ ] ശരിയായതു തെറ്റായതു ടൈപ്പിങിന് ദൃശ്യ പ്രതികരണം ചേർക്കുക
|
||||
- [ ] വേഗതയും കൃത്യതയും അടിസ്ഥാനമാക്കിയുള്ള എളുപ്പമായ സ്കോറിംഗ് സിസ്റ്റം നടപ്പാക്കുക
|
||||
- [ ] CSS ഉപയോഗിച്ച് ഗെയിംക്ക് അതൃപ്തികരമായ ശൈലി നൽകുക
|
||||
|
||||
### 📅 **നിങ്ങളുടെ വാരാന്ത്യ ഗെയിം ഡെവലപ്പ്മെന്റ്**
|
||||
- [ ] മുഴുവൻ ടൈപ്പിംഗ് ഗെയിം എല്ലാ സവിശേഷതകളും ഒരുമച്ച് പൂർത്തിയാക്കുക
|
||||
- [ ] വാക്കുകൾക്കുള്ള പവിട്ട കഠിനത ലെവലുകൾ ചേർക്കുക
|
||||
- [ ] ഉപയോക്തൃ സ്ഥിതിവിവരങ്ങൾ ട്രാക്കിംഗ് നടപ്പിലാക്കുക (WPM, സമയം ഉണ്ടാകുന്ന കൃത്യത)
|
||||
- [ ] മികച്ച ഉപയോക്തൃ അനുഭവത്തിന് ശബ്ദഫലങ്ങളും അനിമേഷനുകളും സൃഷ്ടിക്കുക
|
||||
- [ ] മൊബൈൽ സൗഹൃദമായ ഗെയിം നിർമ്മിക്കുക
|
||||
- [ ] ഗെയിം ഓൺലൈനിൽ ഷെയർ ചെയ്ത് ഉപയോക്താക്കളുടെ അഭിപ്രായം ശേഖരിക്കുക
|
||||
|
||||
### 🌟 **നിങ്ങളുടെ മാസാന്ത ഇന്ററാക്ടീവ് ഡെവലപ്പ്മെന്റ്**
|
||||
- [ ] വ്യത്യസ്ഥ ഇടപെടൽ മാതൃകകൾ പരീക്ഷിച്ച് ഒട്ടനവധി ഗെയിമുകൾ നിർമ്മിക്കുക
|
||||
- [ ] ഗെയിം ലൂപ്പുകളെയും സ്റ്റേറ്റ് മാനേജ്മെന്റും പ്രകടന മെച്ചപ്പെടുത്തലും പഠിക്കുക
|
||||
- [ ] ഓപ്പൺ സോഴ്സ് ഗെയിം ഡെവലപ്പ്മെൻറ് പ്രോജക്ടുകൾക്കു സംഭാവന ചെയ്യുക
|
||||
- [ ] ഉയർന്നനിലയിലെ സമയ ബന്ധിത ആശയങ്ങളും മിതമായ അനിമേഷനുകളും ആസ്പദമാക്കുക
|
||||
- [ ] വിവിധ ഇന്ററാക്ടീവ് അപ്ലിക്കേഷനുകൾ പ്രദർശിപ്പിക്കുന്ന പോർട്ട്ഫോളിയോ സൃഷ്ടിക്കുക
|
||||
- [ ] ഗെയിം ഡെവലപ്പ്മെന്റിലും ഉപയോക്തൃ ഇടപെടലിലും താൽപ്പര്യമുള്ളവരെ മാർഗ്ഗനിർദേശപ്പെടുത്തി
|
||||
|
||||
## 🎯 നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം മാസ്റ്ററി ടൈമ്ലൈൻ
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title ഗെയിം ഡെവലപ്പ്മെന്റ് പഠന മുന്നേറ്റം
|
||||
|
||||
section സജ്ജീകരണം (10 മിനിറ്റുകൾ)
|
||||
Project Structure: HTML അടിസ്ഥാനഘടന
|
||||
: CSS സ്റ്റൈലിംഗ് സജ്ജീകരണം
|
||||
: JavaScript ഫയൽ സൃഷ്ടി
|
||||
|
||||
section ഉപയോക്തൃ ഇന്റർഫേസ് (20 മിനിറ്റുകൾ)
|
||||
Interactive Elements: ഇൻപുട്ട് ഫീൽഡുകൾ
|
||||
: ബട്ടൺ നിയന്ത്രണങ്ങൾ
|
||||
: പ്രദർശന പ്രദേശങ്ങൾ
|
||||
: പ്രതികരണക്ഷമമായ ലേഔട്ട്
|
||||
|
||||
section ഇവന്റ് ഹാൻഡലിംഗ് (25 മിനിറ്റുകൾ)
|
||||
User Interaction: കീബോർഡ് ഇവന്റുകൾ
|
||||
: മൗസ് ഇവന്റുകൾ
|
||||
: യഥാർത്ഥകാല പ്രത്യക്ഷപടി
|
||||
: സ്റ്റേറ്റ് മാനേജ്മെന്റ്
|
||||
|
||||
section ഗെയിം ലജിക് (30 മിനിറ്റുകൾ)
|
||||
Core Functionality: ഉദ്ധരണി നിർമ്മാണം
|
||||
: അക്ഷര താരതമ്യം
|
||||
: കൃത്യത കണക്കുകൂട്ടൽ
|
||||
: ടൈമർ നടപ്പാക്കൽ
|
||||
|
||||
section പ്രവർത്തന ട്രാക്കിങ് (35 മിനിറ്റുകൾ)
|
||||
Metrics & Analytics: WPM കണക്കുകൂട്ടൽ
|
||||
: പിഴവ് ട്രാക്കിങ്
|
||||
: പുരോഗതി ദൃശ്യവത്കരണം
|
||||
: ഫലങ്ങൾ പ്രദർശനം
|
||||
|
||||
section പാളിഷ് & വർധിപ്പിക്കൽ (45 മിനിറ്റുകൾ)
|
||||
User Experience: ദൃശ്യപ്രത്യക്ഷപടി
|
||||
: ശബ്ദപരമായ ഫലം
|
||||
: അനിമേഷനുകൾ
|
||||
: ആക്സസിബിലിറ്റി സവിശേഷതകൾ
|
||||
|
||||
section ഉദാത്ത സവിശേഷതകൾ (1 ആഴ്ച)
|
||||
Extended Functionality: ബുദ്ധിമുട്ട് നിലകൾ
|
||||
: ലീഡർബോർഡുകൾ
|
||||
: ഇഷ്ടാനുസൃത ഉദ്ധരണികൾ
|
||||
: മൾട്ടിപ്ലെയർ ഓപ്ഷനുകൾ
|
||||
|
||||
section പ്രൊഫഷണൽ നൈപുണ്യങ്ങൾ (1 മാസം)
|
||||
Game Development: പ്രവർത്തന പാരിപാട്യം മെച്ചപ്പെടുത്തൽ
|
||||
: കോഡ് ആർക്കിടെക്ചർ
|
||||
: പരിശോധന തന്ത്രങ്ങൾ
|
||||
: ഡിപ്ലോയ്മെന്റ് പാറ്റേണുകൾ
|
||||
```
|
||||
### 🛠️ നിങ്ങളുടെ ഗെയിം ഡെവലപ്പ്മെന്റ് ടൂൾകിറ്റ് സംക്ഷിപ്തം
|
||||
|
||||
ഈ പ്രോജക്ട് പൂർത്തിയായപ്പോൾ, നിങ്ങൾ കൈവരിക്കുന്നതാണ്:
|
||||
- **ഇവന്റ്-ഡ്രിറെൻ പ്രോഗ്രാമിംഗ്**: ഇൻപുട്ടിൽ പ്രതികരിക്കുന്ന പ്രതികരണക്ഷമമായ ഉപയോക്തൃ ഇന്റർഫേസുകൾ
|
||||
- **റിയൽ-ടൈം ഫീഡ്ബാക്ക്**: തത്സമയ ദൃശ്യവും പ്രകടന അപ്ഡേറ്റുകളും
|
||||
- **പ്രകടന അളവ്**: കൃത്യമായ ടൈമിംഗ്, സ്കോറിംഗ് സിസ്റ്റങ്ങൾ
|
||||
- **ഗെയിം സ്റ്റേറ്റ് മാനേജ്മെന്റ്**: അപ്പ്ലിക്കേഷൻ ഫ്ലോയും ഉപയോക്തൃ അനുഭവവും നിയന്ത്രിക്കൽ
|
||||
- **ഇന്ററാക്ടീവ് ഡിസൈൻ**: ആകർഷകവും ലഹരിമയാണ് ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കൽ
|
||||
- **ആധുനിക വെബ് APIകൾ**: സമ്പന്ന ഇടപെടലിനായി ബ്രൗസർ ശേഷികൾ ഉപയോഗിക്കുക
|
||||
- **ആക്സസിബിലിറ്റി മാതൃകകൾ**: എല്ലാ ഉപയോക്താക്കൾക്കും ഉൾപ്പെടുത്തുന്ന ഡിസൈൻ
|
||||
|
||||
**യഥാർത്ഥ ലോക പ്രയോഗങ്ങൾ**: ഈ കഴിവുകൾ നേരിട്ട് ബാധിക്കുന്നവ:
|
||||
- **വെബ് ആപ്ലിക്കേഷനുകൾ**: ഏതൊരു ഇന്ററാക്ടീവ് ഇന്റർഫേസ് അല്ലെങ്കിൽ ഡാഷ്ബോർഡ്
|
||||
- **അധ്യാപന സോഫ്റ്റ്വെയർ**: പഠന പ്ലാറ്റ്ഫോമുകളും കഴിവ് വിലയിരുത്തൽ ഉപകരണങ്ങളും
|
||||
- **പ്രോഡക്ടിവിറ്റി ഉപകരണങ്ങൾ**: ടെക്സ്റ്റ് എഡിറ്ററുകൾ, ഐ.ഡി.ഇകൾ, സഹകരണമുള്ള സോഫ്ട്വെയർ
|
||||
- **ഗെയിം വ്യവസായം**: ബ്രൗസർ ഗെയിമുകളും ഇന്ററാക്ടീവ് വിനോദങ്ങളും
|
||||
- **മൊബൈൽ ഡെവലപ്പ്മെന്റ്**: ടച്ച് അടിസ്ഥാനമാക്കിയ ഇന്റർഫേസുകളും ജസ്റ്റർ ഹാൻഡ്ലിംഗും
|
||||
|
||||
**അടുത്ത പടി**: ഉയർന്ന ഗെയിം ഫ്രെയിംവർക്കുകൾ, റിയൽ-ടൈം മൾട്ടിപ്ലേയറുകൾ അല്ലെങ്കിൽ സങ്കീർണ്ണ ഇന്ററാക്ടീവ് ആപ്ലിക്കേഷനുകൾ അന്വേഷിക്കാൻ തയ്യാറാണ്!
|
||||
|
||||
## ക്രെഡിറ്റ്സ്
|
||||
|
||||
♥️ കൂടെ എഴുതിയത് [ക്രിസ്റ്റോഫർ ഹാരിസൺ](http://www.twitter.com/geektrainer)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകരണം**:
|
||||
ഈ രേഖ AI ഭാഷാന്തര സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശരിയായ വിവർത്തനത്തിനായി ശ്രമിക്കുന്നുവെങ്കിലും, യന്ത്ര വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ ദോഷങ്ങൾ ഉണ്ടായിരിക്കാമെന്ന് ദയവായി മനസിലാക്കുക. പ്രാഥമിക ഭാഷയിൽ ഉള്ള യഥാർത്ഥ രേഖയെ അധികാരം ഉള്ള ഉറവിടമായി പരിഗണിക്കേണ്ടതാണ്. അത്യാവശ്യ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം ശുപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതെന്തെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T18:08:03+00:00",
|
||||
"source_file": "4-typing-game/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡറാണ്, അഭിരുചികരമായി ഒഴിവാക്കിയിട്ടുണ്ട്
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**തള്ളിപ്പറയൽ**:
|
||||
ഈ ഡോക്യുമെന്റ് AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നമുക്ക് കൃത്യത ലക്ഷ്യമിടলেও, സ്വയം നടത്തപ്പെടുന്ന വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അക്രമണകത മാത്രതാല്ലാത്ത അപാകതകൾ ഉണ്ടാകാമെന്ന് മനസ്സിലാക്കുക. പ്രഥമ ഭാഷയിലുള്ള മൗലിക ഡോക്യുമെന്റിനെ അധികാരമുള്ള ഉറവിടമായി പരിഗണിക്കേണ്ടതാണ്. അത്യന്താപേക്ഷിതമായ വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ വിവർത്തനം നിർദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിന്റെ ഫലമായി ഉണ്ടാവുന്ന എതെങ്കിലും തെറ്റിദ്ധാരണകളോ തെറ്റായ വ്യാഖ്യാനങ്ങളോക്കായി ഞങ്ങൾ നിർവാഹകത്വം ഏറ്റെടുക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,612 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "da8bc72041a2bb3826a54654ee1a8844",
|
||||
"translation_date": "2026-01-08T18:12:27+00:00",
|
||||
"source_file": "4-typing-game/typing-game/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ഇവന്റുകൾ ഉപയോഗിച്ച് ഒരു ഗെയിം സൃഷ്ടിക്കൽ
|
||||
|
||||
നിങ്ങൾ ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ അല്ലെങ്കിൽ ടെക്സ്റ്റ് ബോക്സിൽ ടൈപ്പ് ചെയ്യുമ്പോൾ വെബ്സൈറ്റുകൾ എങ്ങനെ അറിയുന്നു എന്ന് ഒരിക്കൽ നിങ്ങൾക്ക് വിചാരിച്ചിട്ടുണ്ടോ? അതാണ് ഇവന്റ് ഡ്രിവൻ പ്രോഗ്രാമിങ്ങിന്റെ മായാജാലം! നിങ്ങൾ ചെയ്യുന്ന ഓരോ കീസ്റ്റ്രോക്കും പ്രതികരിക്കുന്ന ഒരു ടൈപ്പിംഗ് വേഗം ഗെയിം നിർമ്മിച്ച് ഈ അടിസ്ഥാന കഴിവ് നേടുന്നതിന് ഇതു വർഗ്ഗം മികച്ച രീതിയാണ്.
|
||||
|
||||
വെബ് ബ്രൗസറുകൾ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡുമായി എങ്ങനെ "സംസരിക്കുന്നു" എന്ന് നിങ്ങൾ നേരിട്ട് കാണുകയും ചെയ്യും. നിങ്ങൾ ക്ലിക്ക് ചെയ്യുമ്പോഴും, ടൈപ്പ് ചെയ്യുമ്പോഴും, മൗസ് നീക്കുമ്പോഴും, ബ്രൗസർ ചെറു സന്ദേശങ്ങൾ (ഇവരെ ഇവന്റുകൾ എന്ന് വിളിക്കുന്നു) നിങ്ങളുടെ കോഡിലേക്ക് അയയ്ക്കുന്നു, നിങ്ങൾ മറുപടി എങ്ങനെ നൽകണമെന്ന് തീരുമാനിക്കാം!
|
||||
|
||||
നാം ഇവിടെ വായിക്കുന്നത് കൊണ്ട് നിങ്ങൾ ഒരു യാഥാർത്ഥ്യ ടൈപ്പിംഗ് ഗെയിം നിർമ്മിച്ചിരിക്കും, അത് നിങ്ങളുടെ വേഗതയും കൃത്യതയും ട്രാക്ക് ചെയ്യുന്നു. അതിലും പ്രധാനമായി, നിങ്ങൾ ഇവന്റ് ഡ്രിവൻ വെബ്സൈറ്റുകളുടെ അടിസ്ഥാന ആശയങ്ങൾ മനസ്സിലാക്കും. തുടങ്ങാം!
|
||||
|
||||
## ഉപദേശം മുൻകൂട്ടി ചോദ്യോത്തരങ്ങൾ
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21)
|
||||
|
||||
## ഇവന്റ് ഡ്രിവൻ പ്രോഗ്രാമിങ്ങ്
|
||||
|
||||
നിങ്ങളുടെ പ്രിയപ്പെട്ട ആപ്പ് അല്ലെങ്കിൽ വെബ്സൈറ്റ് - അത് എങ്ങനെ ജീവിക്കുന്നതും പ്രതികരണ ശേഷിയുള്ളതും ആണ് എന്നു നിങ്ങൾക്ക് തോന്നിക്കേണ്ടത് എന്താണെന്ന് ചിന്തിക്കൂ? നിങ്ങൾ ചെയ്യുന്നതിന് എങ്ങനെ അതു പ്രതികരിക്കുന്നു എന്നതാണ് കാര്യം! ഓരോ ട്യാപ്, ക്ലിക്ക്, സ്വൈപ്പ്, അല്ലെങ്കിൽ കീസ്റ്റ്രോക്കും നമ്മൾ "ഇവന്റ്" എന്ന് വിളിക്കുന്നതും സൃഷ്ടിക്കുന്നു, അതാണ് വെബ് ഡെവലപ്പ്മെന്റിന്റെ യഥാർത്ഥ മായാജാലം.
|
||||
|
||||
വെബിനുള്ള പ്രോഗ്രാമിങ്ങ് ഭേദമാക്കുന്നത് ഇതാണ്: ആരോ ആ ബട്ടൺ ക്ലിക്ക് ചെയ്യുമോ അല്ലെങ്കിൽ ടെക്സ്റ്റ് ബോക്സിൽ ടൈപ്പ് തുടങ്ങുമോ എന്ന് നമുക്ക് ഒരിക്കലും അറിയില്ല. അവർ ഉടനെ ക്ലിക്ക് ആകാം, അഞ്ചു മിനിറ്റ് കാത്തിരിക്കാം, ആദ്യങ്ങൾ എക്കാലവും ക്ലിക്ക് എവിടെയുമാകുമെന്നും! ഈ അനിശ്ചിതത്വം കൊണ്ട് നമ്മൾ നമ്മുടെ കോഡ് എഴുതുന്നത് വ്യത്യസ്ഥമായി ആലോചിക്കേണ്ടിവരും.
|
||||
|
||||
മുകളിൽ നിന്ന് താഴേക്ക് ഒരു രെസിപ്പി പോലെ ഓടുന്ന കോഡ് എഴുതുന്നത് പകരം, എന്തെങ്കിലും സംഭവിക്കാന് കാത്തിരിക്കുoതുകൊണ്ട് നിശ്ചലമായി നില്ക്കുന്ന കോഡ് എഴുതുന്നു. 1800 കളിൽ ടെലഗ്രാഫ് ഓപ്പറേറ്റർമാർ അവരുടെ മെഷീനുകളുടെ സമീപം ഇരുന്ന് സന്ദേശം കേബിളിലൂടെ വന്നവട്ടം പ്രതികരിക്കാൻ തയ്യാറായി നിന്നതുപോലെ.
|
||||
|
||||
അതിനാൽ "ഇവന്റ്" എന്ന് കൃത്യമായി എന്താണ്? അതത് സംഭവിക്കുന്ന ഒന്നാണ്! നിങ്ങൾ ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്താൽ - അത് ഒരു ഇവന്റ് ആണ്. നിങ്ങൾ ഒരു അക്ഷരം ടൈപ്പ് ചെയ്താൽ - അത് ഒരു ഇവന്റ് ആണ്. നിങ്ങൾ മൗസ് നീക്കുമ്പോൾ - അത് മറ്റൊരു ഇവന്റ് ആണ്.
|
||||
|
||||
ഇവന്റ് ഡ്രിവൻ പ്രോഗ്രാമിങ്ങ് നമ്മുടെ കോഡ് ലൈസൻ ചെയ്യാനും പ്രതികരിക്കാനും ഒരുക്കി വെക്കാൻ സഹായിക്കുന്നു. നാം **ഇവന്റ് ലിസ്സണറുകൾ** എന്ന പ്രത്യേക ഫംഗ്ഷനുകൾ സൃഷ്ടിക്കുന്നു, ഇവ നിശ്ചിത കാര്യങ്ങൾ സംഭവിക്കാൻ കാത്തിരിക്കുന്നു, സംഭവിക്കുമ്പോൾ പ്രവർത്തനക്ഷമമാകുന്നു.
|
||||
|
||||
ഇവന്റ് ലിസ്സണറുകളെ നിങ്ങൾ നിങ്ങളുടെ കോഡിന് വേണ്ടി ദ്വാരക്കണിഞ്ഞു കാത്തിരിക്കുന്ന ഡോർബെൽപോലെ കരുതാം. നിങ്ങൾ ഡോർബെൽ (`addEventListener()`) സെറ്റ് ചെയ്യുന്നു, ഏത് ശബ്ദം കേൾക്കണമെന്ന് (ഉദാ: 'click' അല്ലെങ്കിൽ 'keypress') പറയുന്നു, പിന്നെ ആരെങ്കിലും അത് തട്ടി വിളിച്ചതോടെ എന്ത് സംഭവിക്കുമെന്ന് (നിങ്ങളുടെ ഇഷ്ടാനുസൃത ഫങ്ഷൻ) വ്യക്തമാക്കുന്നു.
|
||||
|
||||
**ഇവന്റ് ലിസ്സണറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു:**
|
||||
- **നിശ്ചിത ഉപയോക്തൃ പ്രവർത്തനങ്ങൾ** വഴി കേൾക്കുന്നത്, ഉദാ: ക്ലിക്കുകൾ, കീസ്റ്റ്രോക്കുകൾ, മൗസ് ചലനങ്ങൾ
|
||||
- **നിശ്ചിത ഇവന്റ് സംഭവിക്കുമ്പോൾ** നിങ്ങളുടെ ഇഷ്ടാനുസൃത കോഡ് പ്രവർത്തിപ്പിക്കുന്നു
|
||||
- **ഉപയോക്തൃ ഇടപെടലുകൾക്ക്** ഉടൻ പ്രതികരിച്ച് സുഗമ അനുഭവം സൃഷ്ടിക്കുന്നു
|
||||
- **അതിരായ listener ഉപയോഗിച്ച്** ഒരേ എലമെന്റിൽ നിരവധി ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നു
|
||||
|
||||
> **കുറിപ്പ്:** ഇവന്റ് ലിസ്സണറുകൾ സൃഷ്ടിക്കാൻ അനേകം മാർഗ്ഗങ്ങൾ ഉണ്ട്. നിങ്ങൾ നാമരഹിത ഫംഗ്ഷനുകളോ, പേരുള്ളവയോ ഉപയോഗിക്കാം. `click` പ്രോപ്പർട്ടി സജ്ജീകരിക്കൽ പോലുള്ള ഷോർട്ട്കട്ടുകൾ ഉപയോഗിക്കാം, അല്ലെങ്കിൽ `addEventListener()` ഉപയോഗിക്കാം. ഈ പരിശീലനത്തിൽ നാം `addEventListener()`യും നാമരഹിത ഫംഗ്ഷനുകളും ഉപയോഗിക്കുകയാണ്, അതാണ് വെബ് ഡെവലപ്പർമാർ സാധാരണയായി ഉപയോഗിക്കുന്ന ഏറ്റവും സാധാരണമായ രീതിയെന്നും ഇത് ഏറ്റവും ലളിതവുമാണ്. `addEventListener()` എല്ലാ ഇവന്റുകൾക്കും പ്രവർത്തിക്കുന്നു, ഇവന്റ് നാമം പാരാമീറ്ററായി നൽകാം.
|
||||
|
||||
### സാധാരണ ഇവന്റുകൾ
|
||||
|
||||
വെബ് ബ്രൗസറുകൾ അനേകം വ്യത്യസ്ത ഇവന്റുകൾ കേൾക്കുവാൻ നിങ്ങൾക്ക് അനുവദിക്കുന്നു, എന്നാൽ ഭൂരിഭാഗം ഇന്ററാക്ടീവ് ആപ്പ്ലിക്കേഷനുകൾ ആവശ്യമായ ചില പ്രധാന ഇവന്റുകളിൽ അടിച്ചമർത്തുന്നു. ഈ അടിസ്ഥാന ഇവന്റുകൾ മനസ്സിലാക്കുന്നത് പ്രഗത്ഭ ഉപയോക്തൃ ഇടപെടലുകൾ നിർമ്മിക്കാൻ സഹായിക്കും.
|
||||
|
||||
ഒരു ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കുമ്പോൾ കേൾക്കാൻ ലഭ്യമായ [മിക്ക ഇവന്റുകളും](https://developer.mozilla.org/docs/Web/Events) ഉണ്ട്. അടിസ്ഥാനത്തിൽ ഒരു പേജിൽ ഉപയോക്താവ് ചെയ്യുന്ന ഏതൊരു പ്രവർത്തനവും ഒരു ഇവന്റ് ഉയർത്തും, ഇതു നിങ്ങളെ ഉപയോഗിച്ച് വളരെയധികം ശക്തി നൽകുന്നു ഉപയോക്തൃ അനുഭവം നിയന്ത്രിക്കാൻ. ഭാഗ്യം വശാൽ, സാധാരണയായി നിങ്ങൾക്ക് ചെറിയ ചില ഇവന്റുകൾ മാത്രം വേണ്ടതാണ്. ചില സാധാരണ ഇവന്റുകൾ (നമുക്ക് ഗെയിം സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കാനുള്ള രണ്ട് ഇവന്റുകൾ ഉൾപ്പെടെ):
|
||||
|
||||
| ഇവന്റ് | വിവരണം | സാധാരണ ഉപയോഗങ്ങൾ |
|
||||
|--------|----------|--------------------|
|
||||
| `click` | ഉപയോക്താവ് ഒന്നിനെ ക്ലിക്ക് ചെയ്തു | ബട്ടണുകൾ, ലിങ്കുകൾ, ഇന്ററാക്ടീവ് ഘടകങ്ങൾ |
|
||||
| `contextmenu` | ഉപയോക്താവ് മൗസിന്റെ വലത് ബട്ടൺ ക്ലിക്ക് ചെയ്തു | റൈറ്റ് ക്ലിക്ക് മെനുകളും കസ്റ്റം മെനുകളും |
|
||||
| `select` | ഉപയോക്താവ് ചില ടെക്സ്റ്റ് ഹൈലൈറ്റ് ചെയ്തു | ടെക്സ്റ്റ് എഡിറ്റിംഗ്, കോപി പ്രവർത്തനങ്ങൾ |
|
||||
| `input` | ഉപയോക്താവ് ടെക്സ്റ്റ് ഇൻപുട്ട് ചെയ്തു | ഫോറം പരിശോധന, റിയൽ-ടൈം സേച്ച് |
|
||||
|
||||
**ഈ ഇവന്റ് തരം മനസ്സിലാക്കുക:**
|
||||
- **ട്രിഗർ ചെയ്യുന്നു** ഉപയോക്താക്കൾ നിങ്ങളുടെ പേജിലെ നിശ്ചിത ഘടകങ്ങളുമായി ഇടപെടുമ്പോൾ
|
||||
- **നൽകുന്നു** ഇവന്റ് ഒബ്ജക്ടുകൾ വഴി ഉപയോക്താവിന്റെ പ്രവർത്തനങ്ങളുടെ വിശദാംശങ്ങൾ
|
||||
- **സാധ്യമാക്കുന്നു** പ്രതികരണശീലമുള്ള, ഇന്ററാക്ടീവ് വെബ് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നത്
|
||||
- **പ്രവർത്തിക്കുന്നു** വ്യത്യസ്ത ബ്രൗസറുകളിൽ, ഉപകരണങ്ങളിൽ സ്ഥിരമായി
|
||||
|
||||
## ഗെയിം സൃഷ്ടിക്കൽ
|
||||
|
||||
ഇവന്റുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് നിങ്ങൾ മനസ്സിലാക്കിയതിനുശേഷം, പ്രായോഗികമായി എന്തെങ്കിലും ഉപകാരപ്രദം നിർമ്മിക്കാം. നാം ഒരു ടൈപ്പിംഗ് വേഗം ഗെയിം സൃഷ്ടിക്കാം, ഇത് ഇവന്റ് ഹാൻഡ്ലിംഗിനെ പ്രദർശിപ്പിക്കുമ്പോൾ പ്രധാന ഡെവലപ്പർ കഴിവ് വികസിപ്പിക്കാനും സഹായിക്കും.
|
||||
|
||||
നാം ജാവാസ്ക്രിപ്റ്റിൽ ഇവന്റുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നതെന്ന് വിശദീകരിക്കാൻ ഒരു ഗെയിം സൃഷ്ടിക്കാം. നമ്മുടെ ഗെയിം ഒരു പ്ലെയറുടെ ടൈപ്പിംഗ് കഴിവ് പരിശോധിക്കും, എല്ലാ ഡെവലപ്പർമാർക്കും വേണമെന്ന് പരിഗണിക്കപ്പെടാത്ത ഒരു പ്രധാന കഴിവ്. രസകരമായ വസ്തുത: നാം ഇന്ന് ഉപയോഗിക്കുന്ന QWERTY കീബോർഡ് ലേഔട്ട് പിറവിപെടുത്തിയത് 1870 കളിൽ ടൈപ്പไรട്ടറുകൾക്കായി ആയിരുന്നു - ഇപ്പോഴും നല്ല ടൈപ്പിംഗ് കഴിവുകൾ പ്രോഗ്രാമർമാർക്ക് അതേ രീതിയിൽ പ്രയോജനപ്പെടുന്നു! ഗെയിമിന്റെ പൊതുവായ പ്രവാഹം ഇങ്ങനെ കാണാം:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[ക്ലിക്ക് ചെയ്യുക സ്റ്റാർട്ട്] --> B[അനിയന്ത്രിത ഉദ്ധരണം പ്രദർശിപ്പിക്കുന്നു]
|
||||
B --> C[പ്ലയർ ടെക്സ്റ്റ് ബോക്സിൽ ടൈപ്പ് ചെയ്യുന്നു]
|
||||
C --> D{പദം പൂർത്തിയാക്കിയോ?}
|
||||
D -->|അതെ| E[അടുത്ത പദം ഹൈലൈറ്റ് ചെയ്യുക]
|
||||
D -->|ഇല്ല| F{ഇപ്പോഴത്തെ വരെ ശരിയാണോ?}
|
||||
F -->|അതെ| G[സാധാരണ സ്റ്റൈലിംഗ് നിലനിർത്തുക]
|
||||
F -->|ഇല്ല| H[തെറ്റ് സ്റ്റൈലിംഗ് കാണിക്കുക]
|
||||
E --> I{ഉദ്ധരണം പൂർത്തിയായോ?}
|
||||
I -->|ഇല്ല| C
|
||||
I -->|അതെ| J[ലഭ്യമായ സമയത്തോടെ വിജയം സന്ദേശം കാണിക്കുക]
|
||||
G --> C
|
||||
H --> C
|
||||
```
|
||||
**ഞങ്ങളുടെ ഗെയിം എങ്ങനെ പ്രവർത്തിക്കും:**
|
||||
- **ആരംഭിക്കും** പ്ലേയർ സ്റ്റാർട്ട് ബട്ടൺ ക്ലിക് ചെയ്യുമ്പോൾ ഒരു യാദൃച്ഛിക ഉദ്ധരണം പ്രദർശിപ്പിച്ചു
|
||||
- **ട്രാക്ക് ചെയ്യും** പ്ലേയറിന്റെ ടൈപ്പിംഗ് പുരോഗതി വാക്കു വാക്കായി റിയൽ ടൈമിൽ
|
||||
- **മികച്ചവാക്കുകൾക്ക് ഹൈലൈറ്റ് നൽകും** പ്ലേയറുടെ ശ്രദ്ധ നിർദ്ദേശിക്കാൻ
|
||||
- **തീർച്ചയായ തെറ്റുകൾക്ക്** ഉടൻ ദൃശ്യഫീഡ്ബാക്ക് നൽകും
|
||||
- ** calculates** ഉദ്ധരണി പൂർത്തിയായപ്പോൾ മൊത്തം സമയം കണക്കാക്കി പ്രദർശിപ്പിക്കും
|
||||
|
||||
നമുക്ക് ഗെയിം നിർമ്മിക്കാം, ഇവന്റുകൾ കുറിച്ച് പഠിക്കാം!
|
||||
|
||||
### ഫയൽ ഘടന
|
||||
|
||||
കോഡിംഗ് തുടങ്ങുന്നതിന് മുമ്പ്, ക്രമത്ത് വരൂ! ആരംഭത്തിൽ ഒറ്റനോട്ടത്തിൽ മനസ്സിലാകുന്ന ഫയൽ ഘടന ഉണ്ടെങ്കിൽ പിന്നീട് ഇത്തരം പ്രശ്നങ്ങളിൽ കുറവ് ഉണ്ടായിരിക്കും, പ്രൊഫഷണൽ പ്രോജക്ടായി മാറുന്നതിന് ഇത് സഹായിക്കുന്നു. 😊
|
||||
|
||||
നാം മൂന്ന് ഫയലുകൾ മാത്രമാണ് സാദ്ധ്യമാക്കുന്നത്: `index.html` പേജ് ഘടനക്ക്, `script.js` ഗെയിം ലജിക്ക് കൈകാര്യം ചെയ്യാൻ, `style.css` എല്ലാം മനോഹരമായി കാണിക്കുന്നതിനായി. ഇതാണ് വെബ് പ്രവർത്തനത്തിന്റെ ക്ലാസിക് കൂട്ടുകെട്ട്!
|
||||
|
||||
** പുതിയ ഫോൾഡർ സൃഷ്ടിക്കാൻ കൺസോൾ അല്ലെങ്കിൽ ടെർമിനൽ തുറന്ന് താഴെ കാണിക്കുന്ന കമാൻഡ് നൽകുക:**
|
||||
|
||||
```bash
|
||||
# ലിനക്സ് അല്ലെങ്കിൽ മാക്ഓഎസ്
|
||||
mkdir typing-game && cd typing-game
|
||||
|
||||
# വിൻഡോസ്
|
||||
md typing-game && cd typing-game
|
||||
```
|
||||
|
||||
**ഈ കമാൻഡുകൾ എന്താണ് ചെയ്യുന്നത്:**
|
||||
- നിങ്ങളുടെ പ്രോജക്ട് ഫയലുകള്ക്ക് പുതിയ ഒരു ഡയറക്ടറി `typing-game` സൃഷ്ടിക്കുന്നു
|
||||
- പുതിയ ഡയറക്ടറിയിലേക്ക് സ്വയം ഓടുന്നു
|
||||
- ഗെയിം ഡെവലപ്പ്മെന്റിനായി ഒരു വൃത്തിയുള്ള വർക്ക്സ്പേസ് ഒരുക്കുന്നു
|
||||
|
||||
**വിഷ്വൽ സ്റ്റുഡിയോ കോഡ് തുറക്കൂ:**
|
||||
|
||||
```bash
|
||||
code .
|
||||
```
|
||||
|
||||
**ഈ കമാൻഡ്:**
|
||||
- നിലവിലെ ഡയറക്ടറിയിൽ വിഷ്വൽ സ്റ്റുഡിയോ കോഡ് ഓപ്പൺ ചെയ്യുന്നു
|
||||
- നിങ്ങളുടെ പ്രോജക്ട് ഫോൾഡർ എഡിറ്ററിൽ തുറക്കുന്നു
|
||||
- നിങ്ങൾക്ക് ആവശ്യമുള്ള എല്ലാ ഡെവലപ്പ്മെന്റ് ടൂൾസിലേക്ക് പ്രവേശനമനുവദിക്കുന്നു
|
||||
|
||||
**വിഷ്വൽ സ്റ്റുഡിയോ കോഡിൽ താഴെ പറയുന്ന പേരുകൾ ഉപയോഗിച്ച് ഫോൾഡറിൽ മൂന്ന് ഫയലുകൾ ചേർക്കുക:**
|
||||
- `index.html` - നിങ്ങളുടെ ഗെയിംയുടെ ഘടനയും ഉള്ളടക്കവും ഉൾക്കൊള്ളുന്നു
|
||||
- `script.js` - എല്ലാ ഗെയിം ലജിക്കും ഇവന്റ് ലിസ്സണറുകൾക്കും കൈകാര്യം ചെയ്യുന്നു
|
||||
- `style.css` - ദൃശ്യരൂപവും സ്റ്റൈലിംഗും നിർവചിക്കുന്നു
|
||||
|
||||
## ഉപയോക്തൃ ഇന്റർഫേസ് സൃഷ്ടിക്കുക
|
||||
|
||||
ഇപ്പോൾ നമുക്ക് ഗെയിമിലെ എല്ലാ പ്രവർത്തനങ്ങളും നടക്കാൻ പോകുന്ന സ്റ്റേജ് നിർമ്മിക്കാം! ഒരു സ്പേസ്ഷിപ്പിന്റെ കൺട്രോൾ പാനൽ ഡിസൈൻ ചെയ്യുന്നതുപോലെ ചിന്തിക്കൂ - പ്ലേയർമാർക്ക് വേണ്ടത് എല്ലാം അവരുടെ പ്രതീക്ഷിച്ചിടത്തേതായി ഉറപ്പാക്കണം.
|
||||
|
||||
ഗെയിംക്ക് വേണ്ടത് എന്താണെന്ന് നമുക്ക് ഉറപ്പാക്കാം. നിങ്ങൾ ഒരു ടൈപ്പിംഗ് ഗെയിം കളിക്കുകയാണെങ്കിൽ, സ്ക്രീൻ എന്തെല്ലാം കാണിക്കണമെന്നു നിങ്ങൾ ആഗ്രഹിക്കും? ഇതാ നമ്മുക്ക് വേണ്ടതെന്നുള്ളത്:
|
||||
|
||||
| UI ഘടകം | ലക്ഷ്യം | HTML ഘടകം |
|
||||
|----------|---------|-------------|
|
||||
| ഉദ്ധരണി പ്രദർശനം | ടൈപ്പ് ചെയ്യാനുള്ള ടെക്സ്റ്റ് കാണിക്കുന്നു | `<p>` `id="quote"` ഉപയോഗിച്ച് |
|
||||
| സന്ദേശ പ്രദേശം | നിലയും വിജയ സന്ദേശങ്ങളും കാണിക്കുന്നു | `<p>` `id="message"` ഉപയോഗിച്ച് |
|
||||
| ടെക്സ്റ്റ് ഇൻപുട്ട് | പ്ലേയർമാർ ഉദ്ധരണി ടൈപ്പ് ചെയ്യുന്നത് ഇവിടെ | `<input>` `id="typed-value"` ഉപയോഗിച്ച് |
|
||||
| സ്റ്റാർട്ട് ബട്ടൺ | ഗെയിം ആരംഭിക്കുന്നു | `<button>` `id="start"` ഉപയോഗിച്ച് |
|
||||
|
||||
**UI ഘടന മനസ്സിലാക്കുക:**
|
||||
- **ഉളളടക്കം** ലജിക് അനുസരിച്ച് മേൽനിന്ന് താഴേക്ക് ക്രമീകരിക്കുന്നു
|
||||
- **വ്യത്യസ്ത ഘടകങ്ങൾക്ക്** ജാവാസ്ക്രിപ്റ്റ് ലക്ഷ്യമിട്ട് μοναദ IDs നൽകുന്നു
|
||||
- **മുകളിലുള്ളവിധത്തിലുള്ള ദൃശ്യക്രമീകരണം** ഉപയോഗിക്ക്തുന്നു ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ
|
||||
- **സെമാന്റിക് HTML ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്നത്** ആക്സസിബിലിറ്റിക്കായി
|
||||
|
||||
ജാവാസ്ക്രിപ്റ്റിൽ അവ ഉപയോഗിക്കാൻ ഓരോ ഘടകത്തിനും IDs വേണം. നാം സൃഷ്ടിക്കാൻ പോകുന്ന CSS, ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾക്കും റഫറൻസുകൾ നമുക്ക് ചേർക്കണം.
|
||||
|
||||
`index.html` എന്ന പുതിയ ഫയൽ സൃഷ്ടിക്കുക. താഴെ കാണുന്ന HTML ചേർക്കുക:
|
||||
|
||||
```html
|
||||
<!-- inside index.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Typing game</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Typing game!</h1>
|
||||
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
|
||||
<p id="quote"></p> <!-- This will display our quote -->
|
||||
<p id="message"></p> <!-- This will display any status messages -->
|
||||
<div>
|
||||
<input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
|
||||
<button type="button" id="start">Start</button> <!-- To start the game -->
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**ഈ HTML ഘടന എന്ത് സാദ്ധ്യമാക്കുന്നു:**
|
||||
- സ്റ്റൈലിംഗിനായി `<head>`-ൽ CSS സ്റ്റൈൽഷീറ്റ് ബന്ധിപ്പിക്കുന്നു
|
||||
- ഉപയോക്താക്കൾക്ക് വ്യക്തമായ തലക്കെട്ടും നിർദേശങ്ങളും സൃഷ്ടിക്കുന്നു
|
||||
- ഡൈനാമിക് ഉള്ളടക്കത്തിനായി പ്രത്യേക IDs ഉള്ള പ്ലേസ്ഹോൾഡർ പാരഗ്രാഫുകൾ സജ്ജമാക്കുന്നു
|
||||
- ആക്സസിബിലിറ്റിക്കായി ഇൻപുട്ട് ഫീൽഡ് ഉൾക്കൊള്ളിക്കുന്നു
|
||||
- ഗെയിം ആരംഭിക്കാൻ സ്റ്റാർട്ട് ബട്ടൺ നൽകുന്നു
|
||||
- പരമാവധി പ്രകടനത്തിനായി അവസാനം ജാവാസ്ക്രിപ്റ്റ് ഫയൽ ലോഡ് ചെയ്യുന്നു
|
||||
|
||||
### ആപ്ലിക്കേഷൻ ആരംഭിക്കുക
|
||||
|
||||
ഡെവലപ്പ്മെന്റ് സമയത്ത് ആപ്ലിക്കേഷൻ രൂപം പരിശോധിക്കുന്നത് പിഴവുകൾ അർദ്ധമായി കണ്ടെത്താനും, പുരോഗതി യഥാർത്ഥ സമയത്ത് കാണാനും സഹായിക്കുന്നു. Live Server എന്ന വളരെ വിലപ്പെട്ട ഉപകരണം നിങ്ങൾ മാറ്റങ്ങൾ സേവ് ചെയ്യുമ്പോഴെല്ലാം ബ്രൗസർ ഓട്ടോമാറ്റിക്കായി പുതുക്കുന്നു, ഇതിലൂടെ വികസനം വളരെ കാര്യക്ഷമമാകും.
|
||||
|
||||
ഇത് ഏറ്റവും നല്ലത് ഇടനില ക്രമത്തിൽ വികസിപ്പിക്കുന്നത് ആണ്. നമുക്ക് ആപ്ലിക്കേഷൻ ആരംഭിക്കാം. വിഷ്വൽ സ്റ്റുഡിയോ കോഡിനായി ഒരു അതുല്യമായ എക്സ്റ്റൻഷൻ ഉണ്ട് അതാണ് [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ സാദ്ധ്യമായ പ്രാദേശികമായി ഹോസ്റ്റ് ചെയ്ത് നിങ്ങൾ സേവ് ചെയ്യുന്നപ്പോള് ബ്രൗസർ പുതുക്കും.
|
||||
|
||||
**[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) സ്ഥാപിക്കാൻ ലിങ്ക് ഓപ്പൺ ചെയ്ത് Install ക്ലിക്ക് ചെയ്യുക:**
|
||||
|
||||
**സ്ഥാപന സമയത്ത് നടക്കുന്നത്:**
|
||||
- നിങ്ങളുടെ ബ്രൗസർ വിസ്വൽ സ്റ്റുഡിയോ കോഡ് ഓപ്പൺ ചെയ്യാൻ പ്രോമ്പ്റ്റ് ചെയ്യുന്നു
|
||||
- എക്സ്റ്റൻഷൻ ഇൻസ്റ്റലേഷൻ പ്രക്രിയ വഴി നിങ്ങൾക്ക് മാർഗനിർദ്ദേശം നല്കുന്നു
|
||||
- ഇൻസ്റ്റലേഷൻ പൂർത്തിയാക്കാൻ വിസ്വൽ സ്റ്റുഡിയോ കോഡ് റീസ്റ്റാർട്ട് ആവശ്യമാകും
|
||||
|
||||
**ഇൻസ്റ്റാൾ ചെയ്തശേഷം, വിസ്വൽ സ്റ്റുഡിയോ കോഡിൽ Ctrl-Shift-P (അഥവാ Cmd-Shift-P) അമർത്തി കമാൻഡ് പാലറ്റ് തുറക്കുക:**
|
||||
|
||||
**കമാൻഡ് പാലറ്റ് മനസ്സിലാക്കുക:**
|
||||
- എല്ലാ VS കോഡ് കമാൻഡുകൾക്കും വേഗം ആക്സസ് നൽകുന്നു
|
||||
- നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ കമാൻഡുകൾ തിരയുന്നു
|
||||
- വേഗത്തിലുള്ള ഡെവലപ്പ്മെന്റിന് കീബോർഡ് ഷോർട്കട്ടുകൾ നൽകുന്നു
|
||||
|
||||
** "Live Server: Open with Live Server" ടൈപ്പ് ചെയ്യുക:**
|
||||
|
||||
**Live Server ചെയ്യുന്നത്:**
|
||||
- നിങ്ങളുടെ പ്രോജക്ട് ഫയലുകൾക്കായി പ്രാദേശിക ഡെവലപ്മെന്റ് സര്വദേശം ആരംഭിക്കുന്നു
|
||||
- നിങ്ങൾ സേവ് ചെയ്യുന്ന files നെ വെച്ചു ബ്രൗസർ ഓട്ടോമാറ്റിക് പുനരാരംഭിക്കുന്നു
|
||||
- സാധാരണ `localhost:5500` എന്ന പ്രാദേശിക URL വഴി ഫയലുകൾ സേവിക്കുന്നു
|
||||
|
||||
**ഒരു ബ്രൗസർ തുറക്കുക, `https://localhost:5500` സന്ദർശിക്കുക:**
|
||||
|
||||
ഇപ്പോൾ നിങ്ങൾ സൃഷ്ടിച്ച പേജ് കാണണം! കുറച്ച് പ്രവർത്തനക്ഷമത ചേർക്കാം.
|
||||
|
||||
## CSS ചേർക്കുക
|
||||
|
||||
ഇപ്പോൾ കാര്യങ്ങൾ മനോഹരമായി കാണിക്കണം! ദൃശ്യ ഫീഡ്ബാക്ക് ഉപയോക്തൃ ഇന്റർഫേസുകൾക്ക് പ്രാരംഭ കാലം മുതൽ അനിവാര്യമാണ്. 1980-കളിൽ ഗവേഷകർ കണ്ടെത്തിയത് ഒറ്റത്തവണ ദൃശ്യ ഫീഡ്ബാക്ക് ഉപയോക്തൃ പ്രകടനവും പിഴവുകളും ചെറുക്കുന്നതിൽ ഗണ്യമായ സഹായം ചെയ്യുന്നു. നാം ഇത് തന്നെ സൃഷ്ടിക്കാനാണ് പോകുന്നത്.
|
||||
|
||||
നമ്മുടെ ഗെയം എന്ത് സംഭവിക്കുകയാണ് എന്ന് പൂർണ്ണമായും വ്യക്തമാക്കണം. പ്ലേയർമാർ കൃത്യമായി ഏത് വാക്ക് ടൈപ്പ് ചെയ്യണമെന്നറിയണം, തെറ്റ് ഉണ്ടെങ്കിൽ ഉടൻ അത് കാണണം. ഇതാ ചില ലളിതമെങ്കിലും ഫലപ്രദമായ സ്റ്റൈലിംഗ്:
|
||||
|
||||
`style.css` എന്ന പുതിയ ഫയൽ സൃഷ്ടിച്ച് താഴെ കാണിക്കുന്ന സിന്താക്സ് ചേർക്കുക.
|
||||
|
||||
```css
|
||||
/* inside style.css */
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: lightcoral;
|
||||
border: red;
|
||||
}
|
||||
```
|
||||
|
||||
**ഈ CSS ക്ലാസുകൾ എന്താണെന്ന് മനസ്സിലാക്കുക:**
|
||||
- നല്ല ದೃശ്യനിർദ്ദേശത്തിനായി നിലവിലുള്ള വാക്ക് മഞ്ഞ ബാക്ക്ഗ്രൗണ്ടോടെ ഹൈലൈറ്റ് ചെയ്യുന്നു
|
||||
- ടൈപ്പിംഗ് പിഴവുകൾക്ക് ലളിതമായ കൊറൽ നിറമുള്ള ബാക്ക്ഗ്രൗണ്ട് സിഗ്നൽ നൽകുന്നു
|
||||
- ഉപയോക്താവിന്റെ ടൈപ്പിംഗ് പ്രവാഹം തടസ്സപ്പെടുത്താതെ ഉടൻ പ്രതികരണവും നൽകുന്നു
|
||||
- ആക്സസിബിലിറ്റിക്കായി വൈവിധ്യമാർന്ന നിറങ്ങൾ ഉപയോഗിക്കുന്നു, വ്യക്തമായ ദൃശ്യ പരസ്പരം
|
||||
|
||||
✅ CSS-ന് വരുമ്പോൾ നിങ്ങളുടെ പേജ് എങ്ങിനെയാണ് ഇഷ്ടപ്പെടുന്നതെന്ന് ലേഔട്ട് ചെയ്യാം. കുറച്ച് സമയം എടുക്കുക പേജ് കൂടുതൽ ആകർഷകമാക്കാൻ:
|
||||
|
||||
- വ്യത്യസ്ത ഫോണ്ട് തിരഞ്ഞെടുക്കുക
|
||||
- തലക്കെട്ടുകൾ നിറം കൊടുക്കുക
|
||||
- ഇനങ്ങളുടെ വലിപ്പം ക്രമീകരിക്കുക
|
||||
|
||||
## ജാവാസ്ക്രിപ്റ്റ്
|
||||
|
||||
ഇവിടെ കാര്യങ്ങൾ രസകരമാണ്! 🎉 ഞങ്ങൾക്കും HTML ഘടനയും CSS സ്റ്റൈലിംഗും ഉണ്ടാക്കി, പക്ഷെ ഇപ്പോള് നമ്മുടെ ഗെയിം ഒരു യന്ത്രമില്ലാത്ത മനോഹര കാറുപോലെ ആണ്. ജാവാസ്ക്രിപ്റ്റ് ആ എഞ്ചിൻ ആണ് - പ്ലേയർമാർ ചെയ്യുന്ന കാര്യങ്ങൾക്ക് പ്രതികരിക്കുന്നതും എല്ലാം പ്രവർത്തനക്ഷമമാക്കുന്നതുമായത്.
|
||||
|
||||
ഇവിടെ നിങ്ങളുടെ സൃഷ്ടി ജീവിക്കുന്നു. നാം അതെളുപ്പമാക്കാൻ ഘട്ടം ഘട്ടമായി നോക്കാം:
|
||||
|
||||
| ഘട്ടം | ഉദ്ദേശ്യം | നിങ്ങൾ പഠിക്കേണ്ടത് |
|
||||
|-------|----------|-----------------|
|
||||
| [സ്ഥിരങ്ങൾ സൃഷ്ടിക്കുക](../../../../4-typing-game/typing-game) | ഉദ്ധരണികളും DOM റഫറൻസുകളും സജ്ജമാക്കുക | വെരറിയബിൾ മാനേജ്മെന്റ്, DOM തിരഞ്ഞെടുപ്പ് |
|
||||
| [ഗെയിം ആരംഭിക്കാൻ ഇവന്റ് ലിസ്സണർ](../../../../4-typing-game/typing-game) | ഗെയിം ആരംഭിക്കൽ കൈകാര്യം ചെയ്യുക | ഇവന്റ് ഹാൻഡ്ലിംഗ്, UI അപ്ഡേറ്റുകൾ |
|
||||
| [ടൈപ്പിംഗിനുള്ള ഇവന്റ് ലിസ്സണർ](../../../../4-typing-game/typing-game) | ഉപയോക്തൃ ഇൻപുട്ട് റിയൽ-ടൈമിൽ ഹാൻഡിൽ ചെയ്യുക | ഇൻപുട്ട് പരിശോധനയും ഡൈനാമിക് ഫീഡ്ബാക്കും |
|
||||
|
||||
**ഈ ഘടനയുള്ള സമീപനം നിങ്ങൾക്ക്:**
|
||||
- കോഡ് ലജിക്കൽ, കൈകാര്യം ചെയ്യാക്കാവുന്ന ഭാഗങ്ങളായി ക്രമീകരിക്കാൻ സഹായിക്കുന്നു
|
||||
- ഫംഗ്ഷണാലിറ്റി ഘട്ടം ഘട്ടമായി നിർമ്മിക്കുമ്പോൾ എളുപ്പത്തിൽ ഡീബഗ് ചെയ്യാം
|
||||
- നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങൾ എങ്ങനെ ചേർന്ന് പ്രവർത്തിക്കുന്നതായി മനസ്സിലാക്കാം
|
||||
- ഭാവിയിലെ പ്രോജക്ടുകൾക്കായി പുനരുപയോഗയോഗ്യമായ മാതൃകകൾ സൃഷ്ടിക്കാൻ
|
||||
|
||||
പക്ഷെ ആദ്യം, `script.js` എന്ന ഒരു പുതിയ ഫയൽ സൃഷ്ടിക്കുക.
|
||||
|
||||
### സ്ഥിരങ്ങൾ ചേർക്കുക
|
||||
|
||||
പ്രവർത്തനത്തിലേയ്ക്ക് നമുക്ക് കുതിക്കുമുമ്പ് എല്ലാ വിഭവങ്ങളും ഒരുക്കാം! നാസ മിഷൻ കൺട്രോൾ എല്ലാ നിരീക്ഷണ സംവിധാനങ്ങളും തുടങ്ങും മുൻപ് ഒരുക്കുന്നതുപോലെ തന്നെ, ഒന്നും വൈകാതെ എല്ലാം തയ്യാറാക്കുമ്പോൾ കാര്യങ്ങൾ എളുപ്പമാകും. കളയേണ്ട വസ്തുക്കളെ വേറെയും തിരയുന്നതു ഒഴിവാക്കും, ടൈപോകളും കുറയും.
|
||||
|
||||
അടിസ്ഥാനപരമായി നമുക്ക് ആദ്യം സജ്ജമാക്കേണ്ടത്:
|
||||
|
||||
| ഡാറ്റ ടൈപ്പ് | ഉദ്ദേശ്യം | ഉദാഹരണം |
|
||||
| ഉദ്ധരണികളുടെ അരേ | ഗെയിമിനുവേണ്ടി എല്ലാ શક્ય ഉദ്ധരണികളും സൂക്ഷിക്കുക | `['Quote 1', 'Quote 2', ...]` |
|
||||
| വാക്കുകളുടെ അറേ | നിലവിലെ ഉദ്ധരണം വ്യക്തമായ വാക്കുകളായി വിഭജിക്കുക | `['When', 'you', 'have', ...]` |
|
||||
| വാക്കുകളുടെ ഇൻഡക്സ് | കളിക്കെട്ടാവുന്ന വാക്ക് ഏതാണ് എന്ന് ട്രാക്ക് ചെയ്യുക | `0, 1, 2, 3...` |
|
||||
| ആരംഭ സമയo | സ്കോറിംഗ് കണക്കാക്കാൻ elapsed സമയം കണക്കാക്കുക | `Date.now()` |
|
||||
|
||||
**നമ്മുടെ UI ഘടകങ്ങൾക്ക് റഫറൻസുകളും ആവശ്യമാണ്:**
|
||||
| ഘടകം | ഐഡി | ഉദ്ദ്ദേശ്യം |
|
||||
|---------|----|---------|
|
||||
| ടെക്സ്റ്റ് ഇൻപുട്ട് | `typed-value` | പ്ലെയറുകൾ ടൈപ്പുചെയ്യുന്നത് ഇവിടെ |
|
||||
| ഉദ്ധരണം പ്രദർശനം | `quote` | ടൈപ്പിക്കേണ്ട ഉദ്ധരണം കാണിക്കുന്നു |
|
||||
| സന്ദേശ മേഖല | `message` | നിലഅവകാശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു |
|
||||
|
||||
```javascript
|
||||
// script.js-ന്റെ ഉൾപരം
|
||||
// നമ്മുടെ എല്ലാം ഉദ്ധരണികൾ
|
||||
const quotes = [
|
||||
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
||||
'There is nothing more deceptive than an obvious fact.',
|
||||
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
||||
'I never make exceptions. An exception disproves the rule.',
|
||||
'What one man can invent another can discover.',
|
||||
'Nothing clears up a case so much as stating it to another person.',
|
||||
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
||||
];
|
||||
// കളിക്കാരൻ ഇപ്പോൾ ടൈപ്പ് ചെയ്യുകയാണ് എന്ന വാക്കിന്റെ പട്ടികയും സൂചികയും സൂക്ഷിക്കുക
|
||||
let words = [];
|
||||
let wordIndex = 0;
|
||||
// തുടക്ക സമയം
|
||||
let startTime = Date.now();
|
||||
// പേജിന്റെ ഘടകങ്ങൾ
|
||||
const quoteElement = document.getElementById('quote');
|
||||
const messageElement = document.getElementById('message');
|
||||
const typedValueElement = document.getElementById('typed-value');
|
||||
```
|
||||
|
||||
**ഈ സെറ്റ് അപ്പ് കോഡ് എന്ത് കൈപിടിക്കുന്നു എന്നു വിശദീകരിക്കുന്നു:**
|
||||
- **ശേഖരിക്കുന്നു** ഷെർലോക് ഹോംസിന്റെ ഉദ്ധരണികൾ `const` ഉപയോഗിച്ച്, കാരണം ഇനം മാറ്റമില്ല
|
||||
- **ക്രമീകരിക്കുന്നു** ട്രാക്കിങ് വേറിയബിൾസ് `let` ഉപയോഗിച്ച്, കാരണം ഗെയിം സമയത്ത് മാറാം
|
||||
- **ക്യാപ്പ്ചർ ചെയ്യുന്നു** DOM ഘടകങ്ങളുടെ റഫറൻസുകൾ `document.getElementById()` ഉപയോഗിച്ചു കാര്യക്ഷമമായ ആക്സസിന്
|
||||
- **സജ്ജമാക്കുന്നു** ഗെയിം ഫംഗ്ഷണാലിറ്റിക്ക് അടിസ്ഥാന ഘടകങ്ങൾ സുതാര്യമായ കണ്ണിയോട്
|
||||
- **സംഘടിപ്പിക്കുന്നു** ബന്ധപ്പെട്ട ഡാറ്റയും ഘടകങ്ങളും കോഡ് പരിപാലനത്തിന് എളുപ്പമുള്ള രീതിയിൽ
|
||||
|
||||
✅ നിങ്ങളുടെ ഗെയിമിന് കൂടുതൽ ഉദ്ധരണികൾ ചേർക്കുക
|
||||
|
||||
> 💡 **പ്രോ ടിപ്പ്**: ആവശ്യമുള്ളപ്പോൾ `document.getElementById()` ഉപയോഗിച്ച് എപ്പോഴും ഘടകങ്ങൾ ലഭ്യമാക്കാം. ഈ ഘടകങ്ങളെ സ്ഥിരമായി പരാമർശിക്കുമ്പോൾ typo ഒഴിവാക്കാൻ constants ഉപയോഗിക്കുക ഉത്തമം. [Vue.js](https://vuejs.org/) അല്ലെങ്കിൽ [React](https://reactjs.org/) പോലുള്ള ഫ്രെയിംവർക്ക്കൾ കേന്ദ്രീകരിച്ച കോഡ് മാനേജ്മെന്റിന് സഹായിക്കും.
|
||||
>
|
||||
**ഈ സമീപനം എങ്ങനെ മികച്ചതാണ്:**
|
||||
- **തെറ്റായ അക്ഷരങ്ങൾ ഒഴിവാക്കുന്നു** പല തവണ ഘടകങ്ങൾ പരാമർശിക്കുമ്പോൾ
|
||||
- **വരവായി വായനയ്ക്ക് സഹായിക്കുന്നു** വിശദമായ നിർദേശം നൽകുന്ന constant നാമങ്ങൾ കൊണ്ട്
|
||||
- **IDE പിന്തുണ മെച്ചപ്പെടുത്തുന്നു** ഓട്ടോകംപ്ലീറ്റ്, പിശക് പരിശോധിക്കുന്നതിൽ
|
||||
- **Refactoring എളുപ്പമാണ്** തുടർന്ന് ID മാറുമ്പോൾ
|
||||
|
||||
`const`, `let` & `var` ഉപയോഗിച്ച് ഒരു വീഡിയോകൾ നോക്കാൻ സമയം ചിലവിടുക
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
|
||||
|
||||
> 🎥 മുകളിൽ ചിത്രം 클릭 ചെയ്ത് വേരിയബിൾസിനെക്കുറിച്ചുള്ള വീഡിയോ കാണുക.
|
||||
|
||||
### സ്റ്റാർട്ട് ലൊജിക്ക് ചേർക്കുക
|
||||
|
||||
ഇവിടെ എല്ലാം പൊരുത്തപ്പെടുന്നു! 🚀 നിങ്ങൾ ആദ്യ യഥാർത്ഥ ഇവന്റ് ലിസ്റ്റണർ എഴുതാൻ പോകുന്നുണ്ട്, ബട്ടൺ ക്ലിക്കിന് കോഡ് പ്രതികരിക്കുന്നതിൽ സന്തോഷം ഉണ്ടാകും.
|
||||
|
||||
ആലോചിക്കൂ: ആരോ ഒരിടത്ത് "Start" ബട്ടൺ ക്ലിക്ക് ചെയ്യാനിരിക്കുകയാണ്, നിങ്ങളുടെ കോഡ് തയ്യാറാകണം. എപ്പോൾ ക്ലിക്ക് ചെയ്യും എന്ന് അറിയില്ല - ഉടൻ അല്ലെങ്കിൽ കോഫി എടുത്ത് തിരിച്ചു വന്നതിന് ശേഷം - എന്നാൽ ക്ലിക്ക് ചെയ്ത് കയ്യിൽ ഗെയിം തുടങ്ങും.
|
||||
|
||||
ഉപയോക്താവ് `start` ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഉദ്ധരണി തിരഞ്ഞെടുത്തു, UI സജ്ജമാക്കും, ഇപ്പോഴുള്ള വാക്കും സമയം ട്രാക്ക് ചെയ്യാനും പരിശീലനം തുടങ്ങും. താഴെ നൽകിയിരിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ചേർക്കുക; സ്ക്രിപ്റ്റ് ബ്ലോക്കിനു ശേഷം വിശദീകരിക്കുന്നു.
|
||||
|
||||
```javascript
|
||||
// script.js ന്റെ അവസാനം
|
||||
document.getElementById('start').addEventListener('click', () => {
|
||||
// ഒരു ക്വോട്ട് നേടുക
|
||||
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
||||
const quote = quotes[quoteIndex];
|
||||
// ക്വോട്ട് ഒരു വാക്കുകളുടെ അരേരിയിലെ ഇടുക
|
||||
words = quote.split(' ');
|
||||
// ട്രാക്ക് ചെയ്യുന്നതിനായി വാക്കുകളുടെ സൂചിക പുനരാരംഭിക്കുക
|
||||
wordIndex = 0;
|
||||
|
||||
// UI അപ്ഡേറ്റുകൾ
|
||||
// ഒരു ക്ലാസ് സജ്ജീകരിക്കാൻ സ്പാൻ ഘടകങ്ങളുടെ ഒരു അരേ സൃഷ്ടിക്കുക
|
||||
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
|
||||
// സ്ട്രിങ്ങിലാക്കുക, ക്വോട്ട് പ്രദർശനത്തിൽ innerHTML ആയി സജ്ജീകരിക്കുക
|
||||
quoteElement.innerHTML = spanWords.join('');
|
||||
// ആദ്യ വാക്ക് ഹൈലൈറ്റ് ചെയ്യുക
|
||||
quoteElement.childNodes[0].className = 'highlight';
|
||||
// മുൻ സന്ദേശങ്ങൾ മായ്ക്കുക
|
||||
messageElement.innerText = '';
|
||||
|
||||
// ടെക്സ്റ്റ്ബോക്സ് സജ്ജമാക്കുക
|
||||
// ടെക്സ്റ്റ്ബോക്സ് മായ്ക്കുക
|
||||
typedValueElement.value = '';
|
||||
// ഫോക്കസ് സജ്ജമാക്കുക
|
||||
typedValueElement.focus();
|
||||
// ഇവന്റ് ഹാൻഡ്ലർ സജ്ജമാക്കുക
|
||||
|
||||
// ടൈമർ തുടങ്ങുക
|
||||
startTime = new Date().getTime();
|
||||
});
|
||||
```
|
||||
|
||||
**കോഡ് ലൊജിക്ക് വിഭാഗങ്ങൾ ആയി വിഭജിക്കുക:**
|
||||
|
||||
**📊 വാക്ക് ട്രാക്കിങ് സജ്ജീകരണം:**
|
||||
- **തിരഞ്ഞെടുക്കുന്നു** വ്യത്യസ്തമായി ഒരോ സൃഷ്ടിക്കാൻ `Math.floor()` & `Math.random()` ഉപയോഗിച്ച് റാൻഡം ഉദ്ധരണം
|
||||
- **മാറ്റുന്നു** ഉദ്ധരണി വാക്കുകളുടെ അറേ ആയി `split(' ')` വഴി
|
||||
- **പുനഃക്രമീകരിക്കുന്നു** `wordIndex` നെ 0ൽ, കാരണം കളിക്കാർ ആദ്യ വാക്കിലൂടെ തുടങ്ങും
|
||||
- **ഉറപ്പാക്കുന്നു** പുതിയ റൗണ്ട് ഗെയിം നില
|
||||
|
||||
**🎨 UI സജ്ജീകരണം & പ്രദർശനം:**
|
||||
- **സൃഷ്ടിക്കുന്നു** `<span>` ഘടകങ്ങളുടെ അറേ, ഓരോ വാക്കും സ്വതന്ത്ര സ്റ്റൈലിംഗിനായി വട്ടിപ്പഴുക്ക് ചെയ്യും
|
||||
- **ചേർക്കുന്നു** ആ സ്പാൻ ഘടകങ്ങൾ ഒരൊറ്റ സ്ട്രിങായി DOM അപ്ഡേറ്റിന്
|
||||
- **പ്രധാനമാണ്** ആദ്യ വാക്ക് `highlight` CSS ക്ലാസ് ചേർത്ത്
|
||||
- **മാറ്റുന്നു** മുൻഗാമി സന്ദേശങ്ങൾ നീക്കി ക്ലീൻ സ്റ്റേറ്റ് നൽകുന്നു
|
||||
|
||||
**⌨️ ടെക്സ്റ്റ് ബോക്സ് ഒരുക്കൽ:**
|
||||
- **നീക്കം ചെയ്യുന്നു** നിലവിലെ ടെക്സ്റ്റ് ഇൻപുട്ടിൽ നിന്നും
|
||||
- **പ്രധാന ശ്രദ്ധ** ഇൻപുട്ട് ബോക്സിലേക്ക് നല്കി ഉടനടി ടൈപ്പ് ആരംഭിക്കാനായി
|
||||
- **തയാറാക്കുന്നു** പുതിയ ഗെയിം സെഷനായി
|
||||
|
||||
**⏱️ ടൈമർ ആരംഭിക്കൽ:**
|
||||
- **പിടിക്കുന്നു** നിലവിലെ സമയമുദ്ര `new Date().getTime()` ഉപയോഗിച്ച്
|
||||
- **സജ്ജമാക്കുന്നു** ടൈപ്പിംഗ് സ്പീഡ് കണക്കാക്കാനും സമയബന്ധിത പ്രവർത്തനം തുടങ്ങാനും
|
||||
- **തുടക്കുന്നു** പെർഫോർമൻസ് ട്രാക്കിംഗ്
|
||||
|
||||
### ടൈപ്പിംഗ് ലോജിക്ക് ചേർക്കുക
|
||||
|
||||
ഇപ്പോൾ ഗെയിമിന്റെ ഹൃദയം കൈകാര്യം ചെയ്യാം! ആദ്യമായി സങ്കീർണ്ണമെന്നുചിത്രം വരാമെങ്കിലും ഓരോ ഭാഗവും കിടിലനായിരുന്നു. ഒടുവിൽ മുഴുവനായും ലൊജികായി തോന്നും.
|
||||
|
||||
നാം നിർമിക്കുന്നത് ഏറെ ജടിലമാണ്: ഓരോ അക്ഷരം ടൈപ് ചെയ്യുമ്പോഴും, കോഡ് ചെക്ക് ചെയ്ത് ഫീഡ്ബാക് നൽകുകയും അടുത്ത് ചെയ്യേണ്ടത് നിരീക്ഷിക്കുകയും ചെയ്യും. 1970-കളിൽ WordStar പോലുള്ള വേഗത്തിലുള്ള പലര്ക്ക്实时 ഫീഡ്ബാക് നൽകിവന്ന മാതൃക കൂടിയാണ്.
|
||||
|
||||
```javascript
|
||||
// script.js ന് അവസാനം
|
||||
typedValueElement.addEventListener('input', () => {
|
||||
// ഇപ്പോഴത്തെ വാക്ക് നേടുക
|
||||
const currentWord = words[wordIndex];
|
||||
// നിലവിലെ മൂല്യം നേടുക
|
||||
const typedValue = typedValueElement.value;
|
||||
|
||||
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||
// വാക്യത്തിന്റെ അവസാനം
|
||||
// വിജയത്തെ പ്രദർശിപ്പിക്കുക
|
||||
const elapsedTime = new Date().getTime() - startTime;
|
||||
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
||||
messageElement.innerText = message;
|
||||
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
||||
// വാക്കിന്റെ അവസാനം
|
||||
// പുതിയ വാക്കിനായി typedValueElement ക്ലിയർ ചെയ്യുക
|
||||
typedValueElement.value = '';
|
||||
// അടുത്ത വാക്കിലേക്ക് നീങ്ങുക
|
||||
wordIndex++;
|
||||
// quote ൽ ഉള്ള എല്ലാ എലമെന്റുകൾക്കും ക്ലാസ് നാമം റീസെറ്റ് ചെയ്യുക
|
||||
for (const wordElement of quoteElement.childNodes) {
|
||||
wordElement.className = '';
|
||||
}
|
||||
// പുതിയ വാക്കിനെ ഹൈലൈറ്റ് ചെയ്യുക
|
||||
quoteElement.childNodes[wordIndex].className = 'highlight';
|
||||
} else if (currentWord.startsWith(typedValue)) {
|
||||
// നിലവിൽ ശരിയാണ്
|
||||
// അടുത്ത വാക്കിനെ ഹൈലൈറ്റ് ചെയ്യുക
|
||||
typedValueElement.className = '';
|
||||
} else {
|
||||
// പിശക് സ്ഥിതി
|
||||
typedValueElement.className = 'error';
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**ടൈപ്പിംഗ് ലോജിക്ക് ഫ്ലോ മനസ്സിലാക്കുക:**
|
||||
|
||||
ഫങ്ഷൻ വാട്ടർഫോൾ രീതിയിൽ, ഏറ്റവും പ്രത്യേകതയുള്ള സ്ഥിതികളിൽ നിന്ന് പൊതുവെകിലേക്ക് പരിശോധിക്കുന്നു. ഓരോ കാഴ്ച്ചയും വിശകലനം ചെയ്യാം:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[പ്ലെയർ അക്ഷരം ടൈപ്പ് ചെയ്യുന്നു] --> B[നിലവിലെ വാക്കും ടൈപ്പുചെയ്ത മൂല്യവും നേടുക]
|
||||
B --> C{ഉദ്ധരണി പൂർത്തിയായോ?}
|
||||
C -->|അതെ| D[സമയം കൂടി പൂർത്തിയാക്കിയ സന്ദേശം പ്രദർശിപ്പിക്കുക]
|
||||
C -->|ഇല്ല| E{വാക്ക് സ്പെയ്സോടെ പൂർത്തിയായോ?}
|
||||
E -->|അതെ| F[ഇൻപുട്ട് ക്ലിയർ ചെയ്യുക, അടുത്ത വാക്കിലേക്ക് മുoന്നു, ഹൈലൈറ്റ് അപ്ഡേറ്റ് ചെയ്യുക]
|
||||
E -->|ഇല്ല| G{ഇത്രവരെ ശരിയായി ടൈപ്പ് ചെയ്തിട്ടുണ്ടോ?}
|
||||
G -->|അതെ| H[പിശക് സ്റ്റൈലിംഗ് നീക്കം ചെയ്യുക]
|
||||
G -->|ഇല്ല| I[പിശക് സ്റ്റൈലിംഗ് കാണിക്കുക]
|
||||
```
|
||||
**🏁 ഉദ്ധരണം പൂര്ത്തിയായി (സിനിമ 1):**
|
||||
- **പരിശോദിക്കുന്നു** ടൈപ്പ് ചെയ്ത വാചകം നിലവിലെ വാക്ക് ഒപ്പം അവസാന വാക്കിലാണ് എന്ന്
|
||||
- **കണക്കാക്കുന്നു** സ്റ്റാർട്ട് സമയം മുതൽ ഇപ്പോൾ വരെ_elapsed_ സമയം ആയി
|
||||
- **മില്ലിസെക്കൻഡ് സെക്കന്റ് ആയി** 1,000ൽ 部ിഷിക്കു
|
||||
- **പ്രകടിപ്പിക്കുന്നു** വിജയ സന്ദേശം സമയത്തോടുകൂടി
|
||||
|
||||
**✅ വാക്ക് പൂര്ത്തിയായി (സിനിമ 2):**
|
||||
- **ഗ്രഹിക്കുന്നു** വാക്ക് പൂർത്തിയായപ്പോൾ ഇൻപുട്ട് സ്പേസ് കൊണ്ട് അവസാനിക്കുന്നതു
|
||||
- **സ്ഥാപിക്കുന്നു** നീക്കിയ ഇൻപുട്ട് മുഴുവനായും നിലവിലെ വാക്കുമായി ഒത്തിരിക്കുന്നു എന്ന്
|
||||
- **സോഷ കൾ വാക്ക് വേണ്ടി** ഇൻപുട്ട് ബോക്സ് ക്ലിയർ ചെയ്യുന്നു
|
||||
- **മുന്നോട്ട് നീങ്ങുന്നു** `wordIndex` വർദ്ധിപ്പിച്ച്
|
||||
- **പ്രകടിപ്പിക്കുന്നു** ഹൈലൈറ്റ് മാറ്റം എല്ലാ ക്ലാസ്സുകളും നീക്കി പുതുതായി
|
||||
|
||||
**📝 ടൈപ്പിംഗ് തുടരുന്നു (സിനിമ 3):**
|
||||
- **പരിശോധിക്കുന്നു** ഇപ്പോഴത്തെ വാക്ക് ടൈപ് ചെയ്തതിലൂടെ തുടങ്ങുന്നതായി
|
||||
- **നീക്കം ചെയ്യുന്നു** പിശക് ക്ലാസ്സ് നീക്കി സങ്കേതം ശരിയാണ് എന്ന് തെളിയിക്കാൻ
|
||||
- **അനുവദിക്കുന്നു** തുടരെ ടൈപ്പിങ്ങ് തടസ്സമില്ലാതെ
|
||||
|
||||
**❌ പിശക് സ്ഥിതി (സിനിമ 4):**
|
||||
- **പ്രവർത്തിക്കുന്നു** ടൈപ്പ് ചെയ്ത വാചകം പ്രതീക്ഷിക്കുന്ന വാക്കിന്റെ തുടക്കത്തിനൊപ്പം ഒത്തില്ലെങ്കിൽ
|
||||
- **ചേർക്കുന്നു** പിശക് CSS ക്ലാസ് ഉടൻ ദൃശ്യ പ്രതിഫലനത്തിന്
|
||||
- **സഹായിക്കുന്നു** കളിക്കാർ പിശകുകൾ അടിയന്തിരമായി കണ്ടെത്താനും പുനർത്തപ്പിക്കാനും
|
||||
|
||||
## നിങ്ങളുടെ അപ്ലിക്കേഷൻ പരിശോധിക്കുക
|
||||
|
||||
നിങ്ങൾ പൂർത്തിയാക്കി! 🎉 നിങ്ങൾ ഒരു യഥാർത്ഥ പ്രവർത്തനക്ഷമമായ ടൈപ്പിംഗ് ഗെയിം സംഭവാടകര ഫംഗ്ഷനിലൂടെയായി നിർമ്മിച്ചു. ഈ നേട്ടം വിലമതിക്കാൻ ചില നിമിഷം ചിരിച്ച് സ്വീകാര്യമാണ്.
|
||||
|
||||
ഇപ്പോൾ പരിശോധന യാഥാർത്ഥ്യത്തിൽ. ഇത് സാധാരണപ്രകാരം പ്രവർത്തിക്കുന്നുണ്ടോ? നമ്മൾ ഒന്നും മിണ്ടിയിട്ടില്ലേ? പൊതുവിൽ, ഉടൻ മിസ്സ് ആയാൽ സാധാരണംം, പരിചയസമ്പന്നരും അപാകതകൾ കണ്ടെത്താറുണ്ട് ഇത് വികസനമാണ്!
|
||||
|
||||
`start` ക്ലിക്ക് ചെയ്ത് ടൈപ്പിംഗ് ആരംഭിക്കൂ! ഇത് മുൻ കാണിച്ച ആനിമേഷനോട് ചുരുങ്ങിയ ലഹരിയിൽ കാണും.
|
||||
|
||||
|
||||
|
||||
**പരിശോധിക്കേണ്ട ഘടകങ്ങൾ:**
|
||||
- **നിർണയിക്കുന്നു** Start ക്ലിക്കു റാൻഡം ഉദ്ധരണി പ്രദർശിപ്പിക്കുന്നുണ്ടോ എന്ന്
|
||||
- **സഹായിക്കുന്നു** ടൈപ്പുചെയ്യുമ്പോൾ ഇപ്പോഴത്തെ വാക്ക് ശരിയായി ഹൈലൈറ്റ് ആകുന്നതെന്ന്
|
||||
- **പരിശോധിക്കുന്നു** തെറ്റായി ടൈപ്പിങ്ങിന് പിശക് സ്റ്റൈലുകൾ കാണിക്കപ്പെടുന്നുവോ
|
||||
- **ഉറപ്പാക്കുന്നു** വാക്ക് പൂർത്തിയായാൽ ഹൈലൈറ്റ് പ്രവേശിപ്പിക്കുന്നു
|
||||
- **പ്രവർത്തിക്കുന്നു** ഉദ്ധരണം പൂർത്തിയായി മെസേജ് സമയത്തോടെ പ്രദർശിപ്പിക്കുന്നു
|
||||
|
||||
**സാധാരണ ഡീബഗിംഗ് ടിപ്പുകൾ:**
|
||||
- **പരിശോധിക്കുക** ബ്രൗസറിന്റെ കോൺസോൾ (F12) ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾക്കായി
|
||||
- **ഉറപ്പാക്കുക** ഫയൽ നാമങ്ങൾ കെയ്സ്-സെൻസിറ്റീവ് ആയി ശരിയായിട്ടാണെന്ന്
|
||||
- **പരിശോധിക്കുക** ലൈവ് സർവർ പ്രവർത്തിക്കുന്നുവോ, പുതുക്കുന്നു എന്ന്
|
||||
- **വിവിധ ഉദ്ധരണികൾ ശ്രമിക്കുക** റാൻഡം തിരഞ്ഞെടുപ്പ് ശരിയാണെന്ന്
|
||||
|
||||
---
|
||||
|
||||
## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🎮
|
||||
|
||||
ഈ ചാലഞ്ച് പൂർത്തിയാക്കാൻ ഏജന്റ് മോഡ് ഉപയോഗിക്കുക:
|
||||
|
||||
**വിവരണം:** കളിക്കാരന്റെ പ്രകടനത്തെ അടിസ്ഥാനമാക്കി ഗെയിമിന്റെ ബുദ്ധിമുട്ട് ക്രമീകരിക്കുന്ന difficulty system ഔട്ട്പുട്ട് ചെയ്യുക. ഈ ചാലഞ്ചിൽ പുരോഗമന ഇവന്റ് കൈകാര്യം, ഡാറ്റ വിശകലനം, ഡൈനാമിക് UI അപ്ഡേറ്റ് പരിശീലനങ്ങൾ ഉൾപ്പെടും.
|
||||
|
||||
**പ്രോംപ്റ്റ്:** ടൈപ്പിംഗ് ഗെയിമിനായി difficulty adjustment system ഇത് നിർമിക്കുക:
|
||||
1. കളിക്കാരന്റെ ടൈപ്പിംഗ് സ്പീഡ് (മിനിറ്റിൽ വാക്കുകൾ) & ആക്യുറസി ശതമാനം ട്രാക്ക് ചെയ്യുക
|
||||
2. സജ്ജമാക്കുക മൂന്ന് difficulty നിലകൾ: Easy (സരള ഉദ്ധരണികൾ), Medium (നിലവിലുള്ള ഉദ്ധരണികൾ), Hard (പങ്കങ്ങൾ ഉൾപ്പെടുന്ന കഠിന ഉദ്ധരണികൾ)
|
||||
3. നിലവിലെ difficulty ലെവലും കളിക്കാരന്റെ സ്റ്റാറ്റിസ്റ്റിക്കുകളും UIയിൽ കാണിക്കുക
|
||||
4. 3 തുടർച്ചയായ നല്ല പ്രകടനങ്ങൾക്കു ശേഷം difficulty വർദ്ധിപ്പിക്കുന്ന streak കാപ്പി നടപ്പിലാക്കുക
|
||||
5. difficulty മാറ്റങ്ങൾ കാണിക്കാൻ ദൃശ്യ ഫീഡ്ബാക്ക് (നിറങ്ങൾ, ആനിമേഷനുകൾ) ചേർക്കുക
|
||||
|
||||
ഈ സവിശേഷത നടപ്പിലാക്കാൻ ആവശ്യമായ HTML ഘടകങ്ങൾ, CSS ഷൈലുകൾ, ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനുകൾ ചേർക്കുക. ശരിയായ പിശക് കൈകാര്യം ഉൾപ്പെടുത്തുക; ARIA ലേബലുകൾ ഉപയോഗിച്ച് ഗെയിം ആക്സസിബിൾ ആക്കുക.
|
||||
|
||||
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ഇവിടെ കൂടുതൽ പഠിക്കൂ.
|
||||
|
||||
## 🚀 ചാലഞ്ച്
|
||||
|
||||
നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം അടുത്ത നിലയിലേക്കു കൂട്ടാൻ തയ്യാറാണോ? ഇവന്റ് ഹാൻഡ്ലിംഗ് & DOM മാനിപुलेഷൻ കൂടുതൽ ആഴത്തിലുള്ള അറിവിനായി ഈ വർദ്ധിപ്പിച്ച സവിശേഷതകൾ പരീക്ഷിക്കൂ:
|
||||
|
||||
**കൂടുതൽ പ്രവർത്തനങ്ങൾ ചേർക്കുക:**
|
||||
|
||||
| സവിശേഷത | വിവരണം | പരിശീലനം കിട്ടുന്നത് |
|
||||
|---------|-------------|------------------------|
|
||||
| **ഇൻപുട്ട് നിയന്ത്രണം** | പൂർത്തിയായപ്പോൾ `input` ഇവന്റ് ലിസ്റ്റണർ ഡിസ്എബിള് ചെയ്ത്, ബട്ടൺ ക്ലിക്കിൽ അത് വീണ്ടും എനേബിൾ ചെയ്യുക | ഇവന്റ് മാനേജ്മെന്റ് & സ്റ്റേറ്റ് നിയന്ത്രണം |
|
||||
| **UI സ്റ്റേറ്റ് മാനേജ്മെന്റ്** | കളിക്കാരൻ ഉദ്ധരണം പൂർത്തിയാക്കിയാൽ ടൈപ് ബോക്സ് ഡിസ്എബിള് ചെയ്യുക | DOM പ്രോപ്പർട്ടി മാനിപുലേഷൻ |
|
||||
| **മോഡൽ ഡയലോഗ്** | വിജയം മെസേജ് അടങ്ങിയ മോഡൽ ഡയലോഗ് പ്രദർശിപ്പിക്കുക | മുൻനിര UI പാറ്റേണുകൾ & ആക്സസിബിലിറ്റി |
|
||||
| **ഹൈ സ്കോർ സിസ്റ്റം** | `localStorage` ഉപയോഗിച്ച് ഹൈ സ്കോർ സൂക്ഷിക്കുക | ബ്രൗസർ സ്റ്റോറേജ് APIകൾ & ഡാറ്റ സ്ഥിരത |
|
||||
|
||||
**നിർവ്വഹണ ടിപ്പുകൾ:**
|
||||
- സ്ഥിരതയ്ക്കായി `localStorage.setItem()`, `localStorage.getItem()` പഠിക്കുക
|
||||
- ഇവന്റ് ലിസ്റ്റണർ ഡൈനാമിക്കും ആയി ചേർക്കുന്നതിനും നീക്കം ചെയ്യുന്നതിലും പരിശീലിക്കുക
|
||||
- HTML dialog ഘടകങ്ങൾ അല്ലെങ്കിൽ CSS മോഡൽ പാറ്റേണുകൾ പരിശോദിക്കുക
|
||||
- ഫോം നിയന്ത്രണങ്ങൾ ഡിസ്എബിള് ചെയ്ത്, എനേബിള് ചെയ്യുമ്പോൾ ആക്സസിബിലിറ്റി പരിഗണിക്കുക
|
||||
|
||||
## പോസ്റ്റ്-ലെക്ചർ ക്വിസ്
|
||||
|
||||
[പോസ്റ്റ്-ലെക്ചർ ക്വിസ്](https://ff-quizzes.netlify.app/web/quiz/22)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം മാസ്റ്ററി ടൈംലൈൻ
|
||||
|
||||
### ⚡ **അടുത്ത 5 മിനിറ്റിൽ നിങ്ങള് ചെയ്യേണ്ടത്**
|
||||
- [ ] വിവിധ ഉദ്ധരണികളോടെ നിങ്ങളുടെ ടൈപ്പിംഗ് ഗെയിം ടെസ്റ്റ് ചെയ്യുക, സുതാര്യമായി പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന്
|
||||
- [ ] CSS സ്റ്റൈലിംഗ് പരിശ്രമിക്കുക - ഹൈലൈറ്റ് & പിശക് നിറങ്ങൾ മാറ്റി നോക്കുക
|
||||
- [ ] ബ്രൗസറിന്റെ DevTools (F12) തുറന്നു Console കാണുക കളിക്കുമ്പോൾ
|
||||
- [ ] ഒരു ഉദ്ധരണം അവസാനം വേഗത്തിൽ തീർക്കാൻ ശ്രമിക്കുക
|
||||
|
||||
### ⏰ **ഈ മണിക്കൂറിൽ നിങ്ങൾ സാധിക്കാവുന്നത്**
|
||||
- [ ] അറേയിൽ കൂടുതൽ ഉദ്ധരണികൾ ചേർക്കുക (തീർച്ചയായും ഇഷ്ടപുസ്തകങ്ങളിൽ നിന്നോ കൂടുതൽ സിനിമകളിൽ നിന്നോ)
|
||||
- [ ] ചാലഞ്ച് സെക്ഷനിൽ നിന്ന് localStorage ഹൈ സ്കോർ സിസ്റ്റം നടപ്പിലാക്കുക
|
||||
- [ ] ഓരോ ഗെയിമിനുശേഷം വാക്കുകൾ പ്രತಿ മിനിറ്റിൽ കാണിക്കുന്ന കല്കുലേറ്റർ നടപ്പാക്കുക
|
||||
- [ ] ശരിയായ ടൈപ്പ്, പിശക്, പൂർത്തീകരണം തുടങ്ങിയവയ്ക്ക് ഓഡിയോ ഫീൽഡ് ചേർക്കുക
|
||||
|
||||
### 📅 **നിങ്ങളുടെ ആഴ്ച്ച മുഴുവനായുള്ള യാത്ര**
|
||||
- [ ] ഒരേ സമയം ഒരുപ_accessor ഏറ്റവുമുള്ള മൾട്ടിപ്പ്ലെയർ പതിപ്പ് അധിഷ്ഠിതമാക്കുക
|
||||
- [ ] വ്യത്യസ്ത ബുദ്ധിമുട്ട് തലങ്ങൾ വേണ്ടി വ്യത്യസ്ത ഉദ്ധരണികൾ ഉപയോഗിക്കുക
|
||||
- [ ] ഉദ്ധരണിയുടെ പുരോഗതിയുടെ progress ബാർ ചേർക്കുക
|
||||
- [ ] വ്യക്തിഗത സ്ഥിതിവിവരങ്ങൾ ട്രാക്ക് ചെയ്യുന്ന യുസർ അക്കൗണ്ടുകൾ നടപ്പിലാക്കുക
|
||||
- [ ] ഉപയോക്താക്കളെ ഇഷ്ടാനുസൃതമായി സ്റ്റൈലിൻഗിന്റെ തീമുകൾ തെരഞ്ഞെടുക്കാം
|
||||
|
||||
### 🗓️ **നിങ്ങളുടെ മാസം മുഴുവൻ രൂപांतരം**
|
||||
- [ ] യഥാർത്ഥ മാനസിക സ്ഥിതി പരിശീലനത്തിനായി ഒരു ടൈപ്പിംഗ് കോഴ്സ് സൃഷ്ടിക്കുക
|
||||
- [ ] ഏത് അക്ഷരങ്ങൾ/വാക്കുകൾ കൂടുതലായ പിശക് സൃഷ്ടിക്കുന്നു എന്നത് വിശകലനം ചെയ്യുന്ന അനലിറ്റിക്സ് നിർമ്മിക്കുക
|
||||
- [ ] വിവിധ ഭാഷകൾക്കും കീബോർഡ് ലേ ഔട്ടുകൾക്കും പിന്തുണ ചേർക്കുക
|
||||
- [ ] സാഹിത്യമേഖലകളിൽ നിന്നുള്ള ഉദ്ധരണികൾ കോഴ്സിന്റേയും API മുഖേന ഇറക്കുമതി ചെയ്യുക
|
||||
- [ ] നിങ്ങളുടെ മെച്ചപ്പെട്ട ടൈപ്പിംഗ് ഗെയിം മറ്റുള്ളവർക്ക് ഉപയോഗിക്കാൻ പൊതുവായി പ്രസിദ്ധീകരിക്കുക
|
||||
|
||||
### 🎯 **അവസാന ഇടപാട് പരിശോധന**
|
||||
|
||||
**മുന്നോട്ട് പോകുന്നതിന് മുമ്പ്, ഒരു നിമിഷം ആഘോഷിക്കൂ:**
|
||||
- ഈ ഗെയിം നിർമ്മിക്കുമ്പോൾ ഏറ്റവും സന്തോഷകരമായ നിമിഷം ഏത്?
|
||||
- ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിംഗ് എങ്ങനെ അനുഭവപ്പെടുന്നു തുടങ്ങി ഇപ്പോൾ എങ്ങനെ?
|
||||
- ഈ ഗെയിംക്ക് വ്യക്തമായ ഒരു സവിശേഷത ചേർക്കാൻ നിങ്ങൾ ഏറ്റവും ആഗ്രഹിക്കുന്നത് എന്ത്?
|
||||
- ഇവന്റ് കൈകാര്യം ആശയങ്ങൾ മറ്റു പ്രോജക്ടുകളിൽ എങ്ങനെ പ്രയോഗിക്കാമെന്ന് നിങ്ങൾക്കു തോന്നുന്നു?
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title നിങ്ങളുടെ ഇവന്റ് പ്രോഗ്രാമിംഗ് ആത്മവിശ്വാസ യാത്ര
|
||||
section ഇന്ന്
|
||||
ഇവന്റുകൾ മനസ്സിലാക്കൽ: 3: You
|
||||
UI നിർമ്മിക്കൽ: 4: You
|
||||
ഇവന്റ് ലിസണറുകൾ എഴുതൽ: 5: You
|
||||
section ഈ ആഴ്ച
|
||||
ഫീച്ചറുകൾ ചേർക്കൽ: 4: You
|
||||
പ്രശ്നം തിരുത്തൽ: 5: You
|
||||
UX മെച്ചപ്പെടുത്തൽ: 4: You
|
||||
section അടുത്ത മാസം
|
||||
സങ്കീർണ്ണ ആപ്പുകൾ നിർമ്മിക്കൽ: 5: You
|
||||
മറ്റുള്ളവരെ പഠിപ്പിക്കൽ: 5: You
|
||||
ഫ്രെയിംവർക്ക് സൃഷ്ടിക്കൽ: 5: You
|
||||
```
|
||||
> 🌟 **ഓർമ്മിക്കുക**: ഇന്ററാക്ടീവ് വെബ്സൈറ്റുകളും ആപ്ലിക്കേഷനുകളുടെയും പവർ അടങ്ങിയ പ്രധാന ആശയങ്ങൾ നിങ്ങൾ ഈ സമയത്ത് കൈവരിച്ചു. ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിംഗ് വെബ് ജീവിച്ചിരിക്കുന്നതും പ്രതികരണശേഷിയുള്ളതും ആക്കുന്നു. ഓരോ തവണ നിങ്ങൾ ഒരു ഡ്രോപ്ഡൗൺ മെനു, ടൈപ്പിക്കൽ ഫോർം, ക്ലിക്ക് പ്രതികരിക്കുന്ന ഗെയിം കാണുമ്പോഴും നിങ്ങൾ അതിൻ്റെ മായാജാലം മനസ്സിലാക്കുന്നു. നിങ്ങൾ വെറും കോഡ് പഠിക്കുന്നില്ല - സൂക്ഷ്മവും ആകർഷകവുമായി അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നു! 🎉
|
||||
|
||||
---
|
||||
|
||||
## അവലോകനവും സ്വയം അധ്യയനവും
|
||||
|
||||
വെബ്ബ് ബ്രൗസറിലൂടെ ഡെവലപ്പറിന് ലഭ്യമായ [സകല ഇവന്റുകളും](https://developer.mozilla.org/docs/Web/Events) വായിച്ച് അവ ഉപയോഗിക്കേണ്ട സാഹചര്യങ്ങൾ ആലോചിക്കുക.
|
||||
|
||||
## അസൈന്മെന്റ്
|
||||
|
||||
[പുതിയ കീബോർഡ് ഗെയിം സൃഷ്ടിക്കുക](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസാധുതാ പ്രസ്താവന**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യത ലക്ഷ്യമിടുന്നുവെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റായ വിവരം ഉൾപ്പെടാം എന്ന് മനസിലാക്കണം. അസൽ രേഖയിലെ എഴുത്ത് ഭാഷയിൽ ഉള്ള പ്രമാണം മാത്രമേ അതിന്റേതായ പ്രാമാണികമായ ഉറവിടം ആയി കരുതപ്പെടൂ. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർബന്ധമായി നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങളുടെ ഉത്തരവാദിത്വം ഇല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,57 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "3eac59d70e2532a677a2ce6bf765485a",
|
||||
"translation_date": "2026-01-08T18:28:27+00:00",
|
||||
"source_file": "4-typing-game/typing-game/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# പുതിയ കീബോർഡ് ഗെയിം സൃഷ്ടിക്കുക
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
ടൈപ്പിംഗ് ഗെയിമുമായി ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിങ്ങിന്റെ അടിസ്ഥാനങ്ങൾ നിങ്ങൾ കൈക്കൊണ്ടതോടെ, നിങ്ങളുടെ സൃഷ്ടിപരംവശം പുറത്തുവരുമ്പോൾ! ഇവന്റ് ഹാൻഡ്ലിംഗ്, DOM മാനിപ്പുലേഷൻ, ഉപയോക്തൃ ഇടപെടൽ മേൽനോട്ട പാറ്റേണുകൾ എന്നിവയിലെ നിങ്ങളുടെ മനസിലാക്കലുകൾ പ്രദർശിപ്പിക്കുന്ന കീബോർഡ് അടിസ്ഥാനത്തിലുള്ള നിങ്ങളുടെ സ്വന്തം ഒരു ഗെയിം ഡിസൈൻ ചെയ്യുകയും നിർമ്മിക്കുകയുമാണ് ഇത്.
|
||||
|
||||
കീബോർഡ് ഇവന്റുകൾ ഉപയോഗിച്ച് പ്രത്യേക പ്രവൃത്തികൾ പൂർത്തിയാക്കുന്ന ഒരു ചെറിയ ഗെയിം സൃഷ്ടിക്കുക. ഇത് വ്യത്യസ്ത തരം ടൈപ്പിംഗ് ഗെയിം ആകാം, കീയിടലുകളിൽ സ്ക്രീനിൽ പിക്സലുകൾ ചിത്രീകരിക്കുന്ന ആർട്ട് ആപ്ലിക്കേഷൻ ആകാം, അറോറുകൾ നിയന്ത്രിക്കുന്ന ഒരു ലളിതമായ ആർകേഡ് ശൈലിയുടെ ഗെയിം ആകാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് സങ്കല്പിക്കാവുന്ന മറ്റ് സൃഷ്ടിപരമായ ആശയങ്ങളായിരിക്കും. സൃഷ്ടിപരമാകുകയായി വിചാരിക്കുകയും വ്യത്യസ്ത കീകൾ വ്യത്യസ്ത പ്രവൃത്തികൾ ട്രിഗർ ചെയ്യുമ്പോൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ധാരണയാക്കുക!
|
||||
|
||||
**നിങ്ങളുടെ ഗെയിം ഉൾപ്പെടുത്തേണ്ടത്:**
|
||||
|
||||
| ലാഭം | വിവരണം | ഉദ്ദേശ്യം |
|
||||
|-------------|-------------|---------|
|
||||
| **ഇവന്റ് ലിസണറുകൾ** | കുറഞ്ഞത് 3 വ്യത്യസ്ത കീബോർഡ് ഇവന്റുകൾക്ക് പ്രതികരിക്കുക | ഇവന്റ് ഹാൻഡ്ലിംഗിന്റെ മനസിലാക്കൽ പ്രദർശിപ്പിക്കുക |
|
||||
| **ദൃശ്യ പ്രതികരണം** | ഉപയോക്തൃ ഇൻപുട്ടിന് ഉടനെ ദൃശ്യ പ്രതികരണം നൽകുക | DOM മാനിപ്പുലേഷനിലെ നൂതനത കാണിക്കുക |
|
||||
| **ഗെയിം ലζίക്** | സ്കോർ ചെയ്യൽ, ലെവലുകൾ, അല്ലെങ്കിൽ പുരോഗതി മെക്കാനിസങ്ങൾ ഉൾപ്പെടുത്തുക | അപ്ലിക്കേഷൻ അവസ്ഥ നടപ്പാക്കൽ അഭ്യാസിക്കുക |
|
||||
| **ഉപയോക്തൃ ഇന്റർഫേസ്** | വ്യക്തമായ നിർദ്ദേശങ്ങളും സൗഹൃദ നിയമനിർമ്മിതികളും | ഉപയോക്തൃ അനുഭവ രൂപകല്പനാ നൈപുണ്യങ്ങൾ വികസിപ്പിക്കുക |
|
||||
|
||||
**പ്രവർത്തനപാരമായ സൃഷ്ടിപരമായ ആശയങ്ങൾ:**
|
||||
- **റിദം ഗെയിം**: കളിക്കാർ സംഗീതത്തിലോ ദൃശ്യ സൂചനകളിലോ വിരുദ്ധമായി കീകൾ അമർത്തുക
|
||||
- **പിക്സൽ ആർട്ട് ക്രിയേറ്റർ**: വ്യത്യസ്ത കീകൾ വ്യത്യസ്ത നിറങ്ങളും മാതൃകകളും പെയിന്റ് ചെയ്യുന്നു
|
||||
- **വേഡ് ബിൽഡർ**: കളിക്കാർ പ്രത്യേക ക്രമത്തിൽ അക്ഷരങ്ങൾ ടൈപ്പ് ചെയ്ത് വാക്കുകൾ സൃഷ്ടിക്കുന്നു
|
||||
- **സ്നേക്ക് ഗെയിം**: അറോഷർ കീകൾ ഉപയോഗിച്ച് ഒരു സ്നേക്ക് നിയന്ത്രിച്ച് ഇനങ്ങൾ ശേഖരിക്കുക
|
||||
- **മ്യൂസിക് സിന്തസൈസർ**: വ്യത്യസ്ത കീകൾ വ്യത്യസ്ത സംഗീത നോട്ടുകൾ അല്ലെങ്കിൽ ശബ്ദങ്ങൾ വായിക്കുക
|
||||
- **സ്പീഡ് ടൈപ്പിംഗ് വകഭേദങ്ങൾ**: വിഭാഗം-നിർദ്ദിഷ്ട ടൈപ്പിംഗ് (പ്രോഗ്രാമിംഗ് പദങ്ങൾ, വിദേശ ഭാഷകൾ)
|
||||
- **കീബോർഡ് ഡ്രമ്മർ**: വ്യത്യസ്ത കീകൾ drum ശബ്ദങ്ങൾക്ക് മാപ്പ് ചെയ്ത് ബീറ്റ് സൃഷ്ടിക്കുക
|
||||
|
||||
**അടിസ്ഥാന നിർദ്ദേശങ്ങൾ:**
|
||||
- **സാഹചര്യം** ലളിതമായി തുടങ്ങുകയും ഘടന ക്രമാനുസൃതമാക്കുകയും ചെയ്യുക
|
||||
- **മനോഹരവും പ്രതികരണമേറിയും ആയ നിയന്ത്രണങ്ങൾ** ലക്ഷ്യമാക്കുക
|
||||
- **ഗെയിം അവസ്ഥയും കളിക്കാരുടെ പുരോഗതിയും വ്യക്തമാക്കുന്ന ദൃശ്യ സൂചനകൾ ഉൾപ്പെടുത്തുക**
|
||||
- **വ്യത്യസ്ത ഉപയോക്താക്കളുമായി ഗെയിം പരീക്ഷിച്ച് അനുഭവസുലഭമാക്കുക**
|
||||
- **ഇവന്റ് ഹാൻഡ്ലിംഗ് തന്ത്രം വിശദീകരിക്കുന്ന মন্তব্যങ്ങൾ ഉപയോഗിച്ച് കോഡ് രേഖപ്പെടുത്തുക**
|
||||
|
||||
## മൂല്യനിർണയം
|
||||
|
||||
| മാനദണ്ഡം | മാതൃകാത്മകം | മതിയായ | മെച്ചപ്പെടുത്തൽ ആവശ്യമാണ് |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **പ്രവർത്തനം** | ബഹുമുഖ സവിശേഷതകളുള്ള പൂര്ണമായ, അയച്ചുയരുന്ന ഗെയിം | കീബോർഡ് ഇവന്റ് ഹാൻഡ്ലിംഗ് പ്രകടിപ്പിക്കുന്ന അടിസ്ഥാന സവിശേഷതകളുള്ള പ്രവർത്തനക്ഷമമായ ഗെയിം | പരിമിത സൗകര്യങ്ങളുള്ള അല്ലെങ്കിൽ ഗൗരവമായ പിഴവുകൾ ഉള്ള ഏറ്റവും ലളിതമായ നടപ്പാക്കലുകൾ |
|
||||
| **കോഡ് ഗുണമേന്മ** | മികച്ച രീതിയിൽ ഒർഗനൈസ്ഡ്, വിശദീകരണങ്ങളുള്ള, മികച്ച പ്രായോഗികതകളും മറ്റും ഉള്ള കാര്യക്ഷമമായ ഇവന്റ് ഹാൻഡ്ലിംഗ് ഉപയോഗിക്കുന്ന കോഡ് | ഇവന്റ് ലിസണറുകൾക്കും DOM മാനിപ്പുലേഷനും ശരിയായ ഉപയോഗം ഉറപ്പു വരുത്തുന്ന ശുദ്ധവും വായിക്കാൻ എളുപ്പവുമായ കോഡ് | ചില സംවිധാന പ്രശ്നങ്ങൾ അല്ലെങ്കിൽ കാര്യക്ഷമമല്ലാത്ത നടപ്പാക്കലുകൾ ഉൾപ്പെടുന്ന അടിസ്ഥാന കോഡ് ഘടന |
|
||||
| **ഉപയോക്തൃ അനുഭവം** | intuitiv കൺട്രോളുകൾ, വ്യക്തമായ പ്രതികരണം, പ്രൊഫഷണൽ തോന്നിക്കുന്ന ആകർഷകമായ ഗെയിംപ്ലേ | ഫംഗ്ഷണൽ ഇന്റർഫേസ്, മതിയായ ഉപയോക്തൃ മാർഗനിർദ്ദേശവും പ്രതികരണക്ഷമവും കൺട്രോളുകളും | അടിസ്ഥാന ഇന്റർഫേസ്, വ്യക്തമല്ലാത്ത നിർദ്ദേശങ്ങൾ, അല്ലെങ്കിൽ മെച്ചമില്ലാത്ത പ്രതികരണക്ഷമത |
|
||||
| **സൃഷ്ടിപരത്വം** | കീബോർഡ് ഇവന്റുകളുടെ നവീകരണ ഉപയോഗം കൊണ്ട് യഥാർത്ഥ ആശയം, സൃഷ്ടിപരമായ പ്രശ്ന പരിഹാരങ്ങളോടെ | പൊതു ഗെയിം സാമ്പ്രീതികൾക്കുള്ള രസകരമായ വ്യത്യാസം, നല്ല ഇവന്റ് ഹാൻഡ്ലിംഗ് ഉപയോഗം | അടിസ്ഥാന ആശയത്തിന്റെ ലളിതമായ നടപ്പാക്കലിൽ വിശാലമായ സൃഷ്ടിപരമാകൽ കുറവോടെ |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരിചിതീകരണം**:
|
||||
ഈ പ്രമാണം AI അർത്ഥം പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തു. നമുക്കു കൃത്യതയിലുള്ള ശ്രമമുണ്ടെങ്കിലും, യന്ത്രം ചെയ്ത പരിഭാഷയിൽ തവളപ്പിഴവുകൾ അല്ലെങ്കിൽ കൃത്യതക്കുറവ് ഉണ്ടാകാമെന്നുള്ളത് മനസ്സിലാക്കുക. പ്രമാണത്തിന്റെ മാതൃഭാഷയിലെ ഓറിയിജിനൽ പതിപ്പ് പ്രാമാണികമായ ഉറവിടമായി കണക്കാക്കണം. നിർണ്ണായകമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനുഷിക പരിഭാഷ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകുന്ന തെറ്റായ ബോധങ്ങൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,555 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "00aa85715e1efd4930c17a23e3012e69",
|
||||
"translation_date": "2026-01-08T15:44:37+00:00",
|
||||
"source_file": "5-browser-extension/1-about-browsers/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ബ്രൗസർ എക്സ്റ്റെൻഷൻ പ്രോജക്ട് ഭാഗം 1: ബ്രൗസറുകളെക്കുറിച്ചു മുഴുവന്
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷൻ വികസന യാത്ര
|
||||
section അടിസ്ഥാനം
|
||||
ബ്രൗസറുകൾ മനസിലാക്കുക: 3: Student
|
||||
എക്സ്റ്റെൻഷൻ തരങ്ങൾ പഠിക്കുക: 4: Student
|
||||
ഡെവലപ്പ്മെന്റ് സജ്ജീകരിക്കുക: 4: Student
|
||||
section വികസനം
|
||||
ഇന്റർഫേസ് നിർമ്മിക്കുക: 4: Student
|
||||
ഫംഗ്ഷണാലിറ്റി ചേർക്കുക: 5: Student
|
||||
ഡാറ്റ കൈകാര്യം ചെയ്യുക: 5: Student
|
||||
section സംയോജനം
|
||||
ബ്രൗസറിൽ പരീക്ഷിക്കുക: 5: Student
|
||||
പ്രശ്നങ്ങൾ ഡീബഗ് ചെയ്യുക: 4: Student
|
||||
അനുഭവം മെച്ചപ്പെടുത്തുക: 5: Student
|
||||
```
|
||||
|
||||
> സ്കെച്ച്നോട്ട് [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)ലെ
|
||||
|
||||
## പ്രീ-ലക്ചർ ക്വിസ്
|
||||
|
||||
[പ്രീ-ലക്ചർ ക്വിസ്](https://ff-quizzes.netlify.app/web/quiz/23)
|
||||
|
||||
### പരിചയം
|
||||
|
||||
ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ നിങ്ങളുടെ വെബ് ബ്രൗസിംഗ് അനുഭവം മെച്ചപ്പെടുത്തുന്ന മിനി ആപ്ലിക്കേഷനുകളാണ്. ടിം ബേർണേഴ്സ്-ലിയുടെ സംവേദനാത്മക വെബിന്റെ ആദിത്യ കാഴ്ചപ്പാടുപോലെ, എക്സ്റ്റെൻഷനുകൾ ലളിതമായ ഡോക്യുമെന്റ് കാണുന്നതിനെക്കാൾ വരെ ബ്രൗസറിന്റെ ശേഷികളെ വ്യാപിപ്പിക്കുന്നു. നിങ്ങളുടെ അക്കൗണ്ടുകൾ സുരക്ഷിതമാക്കുന്ന പാസ്വേഡ് മാനേജരുകളിൽ നിന്ന് ഡിസൈനർമാർക്ക് തണുത്ത നിറങ്ങൾ ലഭ്യമാക്കുന്ന കളർ പിക്കർമാരിലേക്ക്, എക്സ്റ്റെൻഷനുകൾ പ്രതിദിനം നേരിടുന്ന ബ്രൗസിംഗ് വെല്ലുവിളികൾ പരിഹരിക്കുന്നു.
|
||||
|
||||
നിങ്ങളുടെ ആദ്യ എക്സ്റ്റെൻഷൻ നിർമ്മിക്കാനുള്ള മുന്പ്, ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് മനസ്സിലാക്കാം. അലക്സാണ്ടർ ഗ്രഹാം ബെല്ലിനു ടെലിഫോൺ കണ്ടുപിടിക്കുന്നതിന് മുമ്പ് ശബ്ദ സംപ്രേഷണം മനസിലാകേണ്ടതുപോലെ, ബ്രൗസറിന്റെ അടിസ്ഥാനങ്ങൾ അറിവുള്ളത് നിലവിലുള്ള ബ്രൗസർ സംവിധാനങ്ങളോട് സുഗമമായി സംയോജിപ്പിക്കുന്ന എക്സ്റ്റെൻഷനുകൾ സൃഷ്ടിക്കാൻ സഹായിക്കും.
|
||||
|
||||
ഈ പാഠത്തിന്റെ അവസാനം, നിങ്ങൾ ബ്രൗസർ ആർക്കിടെക്ചർ മനസ്സിലാക്കി നിങ്ങളുടെ ആദ്യ എക്സ്റ്റെൻഷൻ നിർമ്മിക്കാൻ തുടങ്ങിയിരിക്കുമെന്ന് ഉറപ്പാക്കാം.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Browser Architecture))
|
||||
Core Components
|
||||
Rendering Engine
|
||||
JavaScript Engine
|
||||
Network Stack
|
||||
Storage APIs
|
||||
User Interface
|
||||
Address Bar
|
||||
Tab Management
|
||||
Bookmarks
|
||||
Extension Icons
|
||||
Extension System
|
||||
Manifest Files
|
||||
Content Scripts
|
||||
Background Pages
|
||||
Popup Windows
|
||||
Security Model
|
||||
Same-Origin Policy
|
||||
Permissions API
|
||||
Content Security
|
||||
Isolated Worlds
|
||||
Development Tools
|
||||
DevTools Integration
|
||||
Debug Console
|
||||
Performance Monitor
|
||||
Extension Inspector
|
||||
```
|
||||
## വെബ് ബ്രൗസറുകൾ മനസ്സിലാക്കുക
|
||||
|
||||
ഒരു വെബ് ബ്രൗസർ അടിസ്ഥാനപരമായി ഒരു സങ്കീർണ്ണമായ ഡോക്യുമെന്റ് വ്യാഖ്യാതാവാണ്. നിങ്ങൾ അഡ്രസ് ബാറിൽ "google.com" type ചെയ്യുന്നപ്പോൾ, ബ്രൗസർ നിരവധി പ്രവർത്തനങ്ങൾ നടത്തുന്നു - ലോകമെമ്പാടുമുള്ള സെർവറുകളിൽ നിന്നുള്ള ഉള്ളടക്കം അഭ്യർത്ഥിച്ച്, പിന്നീട് ആ കോഡ് വിശകലനം ചെയ്ത് നിങ്ങൾ കാണുന്ന സംവേദനാത്മക വെബ് പേജുകളായി മാറ്റുന്നു.
|
||||
|
||||
ഈ പ്രക്രിയ 1990-ൽ ടിം ബേർണേഴ്സ്-ലിയുടെ രൂപകല്പന ചെയ്ത ആദ്യ വെബ് ബ്രൗസർ, WorldWideWeb, എല്ലാവർക്കും ഹൈപ്പർലിങ്കുചെയ്ത ഡോക്യുമെന്റുകൾ ലഭ്യമാക്കുന്നതിന്റെ സമാനത ആണ്.
|
||||
|
||||
✅ **ചെറിയ ചരിത്രം**: ആദ്യ ബ്രൗസർ 'WorldWideWeb' എന്നായിരുന്നു, 1990-ൽ സാർ ടിമോത്തി ബേർണേഴ്സ്-ലിയുടെ സൃഷ്ടി.
|
||||
|
||||
|
||||
> ചില പ്രാരംഭ ബ്രൗസറുകൾ, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) വഴി
|
||||
|
||||
### ബ്രൗസറുകൾ വെബ് ഉള്ളടക്കം എങ്ങനെ പ്രോസസ്സുചെയ്യുന്നു
|
||||
|
||||
ഒരു URL type ചെയ്ത ശേഷം ഒരു വെബ് പേജ് കാണുന്നതുവരെ നിരവധി സമന്വയപ്പെടുത്തിയ ഘട്ടങ്ങൾ സെക്കന്റുകളിൽ സംഭവിക്കുന്നു:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Browser
|
||||
participant Extension
|
||||
participant DNS
|
||||
participant Server
|
||||
|
||||
User->>Browser: URL ടൈപ്പ് ചെയ്ത് Enter അമർത്തുന്നു
|
||||
Browser->>Extension: beforeRequestเหต്ุയതി ട്രിഗർ ചെയ്യുക
|
||||
Extension->>Extension: URL മാറ്റം ആവശ്യമാണോ എന്ന് പരിശോധിക്കുക
|
||||
Browser->>DNS: സെർവർ ഐപി വിലാസം തിരയുന്നു
|
||||
DNS->>Browser: ഐപി വിലാസം നൽകുന്നു
|
||||
Browser->>Server: വെബ് പേജ് ഉള്ളടക്കം അഭ്യർത്ഥിക്കുന്നു
|
||||
Server->>Browser: HTML, CSS, JavaScript അയയ്ക്കുന്നു
|
||||
Browser->>Extension: beforeResponseเหต്ุയതി ട്രിഗർ ചെയ്യുക
|
||||
Extension->>Extension: ഉള്ളടക്കം ആവശ്യമായെങ്കിൽ മാറ്റുക
|
||||
Browser->>User: പൂർണമായ വെബ് പേജ് റેન્ડർ ചെയ്യുന്നു
|
||||
Extension->>User: എക്സ്റ്റൻഷൻ UI അപ്ഡേറ്റുകൾ കാണിക്കുക
|
||||
```
|
||||
**ഈ പ്രക്രിയ എന്ത് ചെയ്യും:**
|
||||
- **URL** മനുഷ്യർക്ക് വായിക്കാൻ കഴിയുന്നതിനേ DNS ലുക്കപ്പ് വഴി സെർവർ IP വിലാസമായി മാറ്റുന്നു
|
||||
- **സുരക്ഷിത ബന്ധം സ്ഥാപിക്കുന്നു** HTTP അഥവാ HTTPS പ്രോട്ടോകോളുകൾ ഉപയോഗിച്ച് വെബ് സെർവറുമായി
|
||||
- **വിശിഷ്ട വെബ് പേജ് ഉള്ളടക്കം** സെർവറിൽ നിന്ന് അഭ്യർത്ഥിക്കുന്നു
|
||||
- **HTML മാർക്കപ്പ്, CSS സ്റ്റൈലിംഗ്, ജാവാസ്ക്രിപ്റ്റ് കോഡ്** സെർവറിൽ നിന്ന് സ്വീകരിക്കുന്നു
|
||||
- **എല്ലാ ഉള്ളടക്കവും സംവേദനാത്മകമായ വെബ് പേജായി** മാറ്റുന്നു
|
||||
|
||||
### ബ്രൗസർ കോർ ഫീച്ചറുകൾ
|
||||
|
||||
അവധി ബ്രൗസറുകൾ പ്രക്രിയയിൽ എക്സ്റ്റെൻഷൻ ഡെവലപ്പർമാർക്ക് ഉപയോഗപ്പെടുത്താവുന്ന ധാരാളം ഫീച്ചറുകൾ ഉണ്ട്:
|
||||
|
||||
| ഫീച്ചർ | ലക്ഷ്യം | എക്സ്റ്റെൻഷൻ അവസരങ്ങൾ |
|
||||
|---------|---------|------------------------|
|
||||
| **Rendering Engine** | HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് പ്രദർശിപ്പിക്കൽ | ഉള്ളടക്ക പരിഷ്ക്കരണം, സ്റ്റൈലിംഗ് സംയോജനം |
|
||||
| **JavaScript Engine** | ജാവാസ്ക്രിപ്റ്റ് കോഡ് നിർവഹണം | കസ്റ്റം സ്ക്രിപ്റ്റുകൾ, API ഇടപെടലുകൾ |
|
||||
| **Local Storage** | ഡാറ്റ ലൊക്കൽ ആയി സംരക്ഷിക്കൽ | ഉപയോക്തൃ പ്രാധാന്യങ്ങൾ, ക്യാഷ് ചെയ്ത ഡാറ്റ |
|
||||
| **Network Stack** | വെബ് അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നു | അഭ്യർത്ഥന നിരീക്ഷണം, ഡാറ്റ വിശകലനം |
|
||||
| **Security Model** | ഉപയോക്താക്കളെ ദുഷ്ട ഉള്ളടക്കം നിന്ന് സംരക്ഷിക്കുന്നു | ഉള്ളടക്ക ഫിൽറ്ററിങ്, സുരക്ഷാ മെച്ചപ്പെടുത്തലുകൾ |
|
||||
|
||||
**ഈ ഫീച്ചറുകൾ മനസ്സിലാക്കുന്നത് നിങ്ങളെ സഹായിക്കുന്നു:**
|
||||
- **എവിടെ ഏറ്റവും വിലക്കേടുള്ളതാണ് എന്ന് കണ്ടെത്തുക** എക്സ്റ്റെൻഷൻ ചേർക്കാനുള്ളിടം
|
||||
- **തികച്ചും അനുയോജ്യമായ ബ്രൗസർ API-കൾ തിരഞ്ഞെടുക്കുക** നിങ്ങളുടെ എക്സ്റ്റെൻഷന്റെ പ്രവർത്തനത്തിനായി
|
||||
- **ബ്രൗസർ സംവിധാനങ്ങളോടും സംയോജിച്ചുള്ള കാര്യക്ഷമമായ എക്സ്റ്റെൻഷനുകൾ ഡിസൈൻ ചെയ്യുക**
|
||||
- **എക്സ്റ്റെൻഷൻ ബ്രൗസർ സുരക്ഷാ മികച്ച രീതികൾ പാലിക്കുന്നതായി ഉറപ്പാക്കുക**
|
||||
|
||||
### ക്രോസ്-ബ്രൗസർ ഡെവലപ്മെന്റ് പരിഗണനകൾ
|
||||
|
||||
വിവിധ ബ്രൗസറുകൾ നിശ്ചിത സാങ്കേതികവിദ്യകൾ അല്പം വ്യത്യസ്തമായി നടപ്പിലാക്കുന്നു, പ്രോഗ്രാമിങ് ഭാഷകൾ ഒരേ ആൾഗോരിഥം വ്യത്യസ്തമായി കൈകാര്യം ചെയ്യുന്നതുപോലെ. ക്രോം, ഫയർഫോക്സ്, സഫാരി എന്നിവയിൽ ഓരോന്നിലും പ്രത്യേകതകൾ ഉണ്ട്, ഇത് എക്സ്റ്റെൻഷൻ വികസനത്തിൽ ഡെവലപ്പർ ശ്രദ്ധിക്കേണ്ടതാണ്.
|
||||
|
||||
> 💡 **പ്രൊ טיפ്**: [caniuse.com](https://www.caniuse.com) ഉപയോഗിച്ച് ഏത് വെബ് സാങ്കേതിക വിദ്യ ബ്രൗസറുകളിൽ പിന്തുണയ്ക്കപ്പെടുന്നുവെന്ന് പരിശോധിക്കുക. ഇത് നിങ്ങളുടെ എക്സ്റ്റെൻഷന്റെ ഫീച്ചറുകൾ പ്ലാൻ ചെയ്യുമ്പോൾ അനമോല്യം.
|
||||
|
||||
**എക്സ്റ്റെൻഷൻ ഡെവലപ്മെന്റിനുള്ള പ്രധാന പരിഗണനകൾ:**
|
||||
- **ക്രോം, ഫയർഫോക്സ്, എഡ്ജ്** ബ്രൗസറുകളിൽ നിങ്ങളുടെ എക്സ്റ്റെൻഷൻ പരീക്ഷിക്കുക
|
||||
- വ്യത്യസ്ത ബ്രൗസർ എക്സ്റ്റെൻഷൻ API-കളും മാനിഫെസ്റ്റ് ഫോർമാറ്റുകളും **അനുസരിക്കുക**
|
||||
- വ്യത്യസ്ത പ്രകടന സ്വഭാവങ്ങളും പരിധികളും **കാര്യംകൊണ്ട് കൈകാര്യംചെയ്യുക**
|
||||
- ലഭ്യമല്ലാത്ത ബ്രൗസർ-നിഷ്കർഷിത ഫീച്ചറുകൾക്കായി **വ്യാപാര മാർഗ്ഗങ്ങൾ നൽകുക**
|
||||
|
||||
✅ **ആനലിറ്റിക്സ്洞察നം**: നിങ്ങളുടെ വെബ് ഡെവലപ്മെന്റ് പ്രോജക്ടുകളിൽ ആനലിറ്റിക്സ് പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്ത് നിങ്ങളുടെ ഉപയോക്താക്കൾ ഏതു ബ്രൗസർ ഉപയോഗിക്കുന്നത് അറിയാം. ഇത് ആദ്യം പിന്തുണയ്ക്കേണ്ട ബ്രൗസറുകളുടെ മുൻഗണന നൽകാൻ സഹായിക്കും.
|
||||
|
||||
## ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ മനസ്സിലാക്കുക
|
||||
|
||||
ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ സാധാരണ വെബ് ബ്രൗസിംഗ് വെല്ലുവിളികൾ പരിഹരിച്ചുകൊണ്ട് ബ്രൗസർ ഇന്റർഫെയ്സിൽ പ്രവർത്തക്ഷമത കൂട്ടുന്നു. ഏറെ സങ്കീർണ്ണമായ മറ്റ് ആപ്ലിക്കേഷനുകൾ അല്ലെങ്കിൽ പ്രവർത്തനപ്രവാഹങ്ങൾ ആവശ്യമില്ലാതെ എക്സ്റ്റെൻഷനുകൾ ഉപകരണങ്ങൾക്കും ഫീച്ചറുകൾക്ക് തൽക്ഷണ പ്രവേശനം നൽകുന്നു.
|
||||
|
||||
ഈ ആശയം ആദ്യകാല കമ്പ്യൂട്ടർ പയൻസ് ഡഗ്ലസ് എംഗൽബാർട്ടിന്റെ മനുഷ്യ ശേഷികൾ സാങ്കേതികവിദ്യ ഉപയോഗിച്ച് വർദ്ധിപ്പിക്കാനുള്ള കാഴ്ചപ്പാടിനെ അനുസരിക്കുന്നു - എക്സ്റ്റെൻഷനുകൾ നിങ്ങളുടെ ബ്രൗസറിന്റെ അടിസ്ഥാന പ്രവർത്തക്ഷമത വർദ്ധിപ്പിക്കുന്നു.
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title ബ്രൗസർ എക്സ്റ്റൻഷൻ വിഭാഗങ്ങൾ
|
||||
x-axis ലളിതം --> സങ്കീർത്തം
|
||||
y-axis വ്യക്തിഗത ഉപയോഗം --> പ്രൊഫഷണൽ ടൂളുകൾ
|
||||
quadrant-1 ഡെവലപ്പർ ടൂളുകൾ
|
||||
quadrant-2 എന്റർപ്രൈസ് പരിഹാരങ്ങൾ
|
||||
quadrant-3 വ്യക്തിഗത ഉപകരണങ്ങൾ
|
||||
quadrant-4 ഉൽപ്പാദനക്ഷമത ആപ്ലിക്കേഷനുകൾ
|
||||
|
||||
Ad Blockers: [0.3, 0.2]
|
||||
Password Managers: [0.7, 0.3]
|
||||
Color Pickers: [0.4, 0.8]
|
||||
Code Formatters: [0.8, 0.9]
|
||||
Note Taking: [0.6, 0.5]
|
||||
Video Downloaders: [0.5, 0.2]
|
||||
Time Trackers: [0.7, 0.6]
|
||||
Screenshot Tools: [0.4, 0.4]
|
||||
```
|
||||
**പ്രസിദ്ധമായ എക്സ്റ്റെൻഷൻ വർഗ്ഗങ്ങളും അവയുടെ പ്രയോജനങ്ങളും:**
|
||||
- **പ്രോഡക്ടിവിറ്റി ടൂളുകൾ**: ടാസ്ക് മാനേജർമാർ, നോട്ടെടുക്കൽ ആപ്പുകൾ, സമയം റnowrapട്രാക്കർമാർ നിങ്ങളുടെ സംഘടനയിൽ സഹായിക്കുന്നു
|
||||
- **സുരക്ഷാ മെച്ചപ്പെടുത്തലുകൾ**: പാസ്വേര്ഡ് മാനേജർമാർ, അഡ്ബ്ലോക്കറുകൾ, ഗോപനീയതാ ഉപകരണങ്ങൾ നിങ്ങളുടെ ഡാറ്റ സംരക്ഷിക്കുന്നു
|
||||
- **ഡെവലപ്പർ ടൂളുകൾ**: കോഡ് ഫോർമാറ്ററുകൾ, കളർ പിക്കറുകൾ, ഡീബഗ്ഗിംഗ് ഉപകരണങ്ങൾ ഡെവലപ്മെന്റ് ലളിതമാക്കുന്നു
|
||||
- **ഉള്ളടക്കം മെച്ചപ്പെടുത്തൽ**: വായന മോഡുകൾ, വീഡിയോ ഡൌൺലോഡറുകൾ, സ്ക്രീൻഷോട്ട് ടൂളുകൾ നിങ്ങളുടെ വെബ് അനുഭവം മെച്ചപ്പെടുത്തുന്നു
|
||||
|
||||
✅ **പ്രതിഫലന ചോദ്യo**: നിങ്ങളുടെ പ്രിയപ്പെട്ട ബ്രൗസർ എക്സ്റ്റെൻഷനുകൾ ഏതൊക്കെയാണ്? അവ എന്ത് പ്രത്യേക ജോലികൾ ചെയ്യുന്നു, എങ്ങനെ നിങ്ങളുടെ ബ്രൗസിംഗ് അനുഭവം മെച്ചപ്പെടുത്തുന്നു?
|
||||
|
||||
### 🔄 **ശൈക്ഷിക പരിശോധന**
|
||||
**ബ്രൗസർ ആർക്കിടെക്ചർ മനസ്സിലാക്കൽ**: എക്സ്റ്റെൻഷൻ വികസനത്തിലേക്ക് പോകുന്നതിന് മുമ്പ്, നിങ്ങൾക്ക് കഴിയേണ്ടത്:
|
||||
- ✅ ബ്രൗസർ വെബ് അഭ്യർത്ഥനകൾ പ്രോസസ്സുചെയ്യുന്നതിനും ഉള്ളടക്കം എങ്ങനെ പ്രദർശിപ്പിക്കുന്നതും വിശദീകരിക്കുക
|
||||
- ✅ ബ്രൗസർ ആർക്കിടെക് ചറിന്റെ പ്രധാന ഘടകങ്ങൾ തിരിച്ചറിയുക
|
||||
- ✅ എക്സ്റ്റെൻഷനുകൾ ബ്രൗസർ പ്രവർത്തനക്ഷമതയുമായി എങ്ങനെ സംയോജിപ്പിക്കപ്പെടുന്നു എന്ന് മനസ്സിലാക്കുക
|
||||
- ✅ ഉപയോക്താക്കളെ സംരക്ഷിക്കുന്ന സുരക്ഷാ മോഡൽ തിരിച്ചറിയുക
|
||||
|
||||
**വേഗമുള്ള സ്വയംപരിശോധന**: URL ടൈപ്പ് ചെയ്ത് ഒരു വെബ് പേജ് കാണുന്നതുവരെ പാത നിങ്ങൾക്ക് പിന്തുടരാം?
|
||||
1. **DNS ലുക്കപ്പ്** URL IP വിലാസമായി മാറ്റുന്നു
|
||||
2. **HTTP അഭ്യർത്ഥന** സെർവറിൽ നിന്നുള്ള ഉള്ളടക്കം നേടുന്നു
|
||||
3. **പാഴ്സിംഗ്** HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് പ്രോസസ്സിംഗ്
|
||||
4. **റെൻഡറിംഗ്** അവസാന വെബ് പേജ് പ്രദർശിപ്പിക്കൽ
|
||||
5. **എക്സ്റ്റെൻഷനുകൾ** ബഹുമുഖ ഘട്ടങ്ങളിൽ ഉള്ളടക്കം മാറ്റാം
|
||||
|
||||
## എക്സ്റ്റെൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യൽ, നിയന്ത്രണം
|
||||
|
||||
എക്സ്റ്റെൻഷൻ ഇൻസ്റ്റാളേഷൻ പ്രക്രിയ മനസ്സിലാക്കുന്നത് ഉപയോക്തൃ അനുഭവം പ്രതീക്ഷിക്കാനും സഹായിക്കുന്നു. ഇന്നത്തെ ആധുനിക ബ്രൗസറുകളിൽ ഈ പ്രക്രിയ മാനദണ്ഡം പോലെ സാന്ദ്രമായി ഈന്റർഫെയ്സ് രൂപകല്പ്പനയിൽ ചെറിയ വ്യത്യാസങ്ങളോടെ ഉണ്ട്.
|
||||
|
||||
|
||||
|
||||
> **പ്രധാനത്തിന്**: നിങ്ങളുടെ സ്വന്തം എക്സ്റ്റെൻഷനുകൾ പരീക്ഷിക്കുമ്പോൾ ഡെവലപ്പർ മോഡ് സ്വിച്ച് ഓണാക്കി മറ്റു സ്റ്റോറുകളിൽ നിന്ന് എക്സ്റ്റെൻഷനുകൾ അനുവദിക്കുക.
|
||||
|
||||
### ഡെവലപ്പ്മെന്റ് എക്സ്റ്റൻഷൻ ഇൻസ്റ്റാളേഷൻ പ്രക്രിയ
|
||||
|
||||
സ്വന്തം എക്സ്റ്റെൻഷനുകൾ വികസിപ്പിക്കുകയും പരീക്ഷിക്കുകയും ചെയ്യുമ്പോൾ ഈ പ്രവൃത്തി പ്രവാഹം പിന്തുടരുക:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[കോഡ് എഴുതുക] --> B[വിസ്താരമാറ്റം നിർമ്മിക്കുക]
|
||||
B --> C{ആദ്യമായി ഇൻസ്റ്റാൾ ചെയ്യാമോ?}
|
||||
C -->|അതെ| D[അൺപാക്ക്ഡ് ലോഡ് ചെയ്യുക]
|
||||
C -->|ഇല്ല| E[വിസ്താരമാറ്റം പുനഃലോഡ് ചെയ്യുക]
|
||||
D --> F[ഫังก്ഷന്ലിറ്റി പരീക്ഷിക്കുക]
|
||||
E --> F
|
||||
F --> G{ശരിയായി പ്രവർത്തിക്കുന്നുവോ?}
|
||||
G -->|ഇല്ല| H[പിശകുകൾ ഡീബഗ് ചെയ്യുക]
|
||||
G -->|അതെ| I[ഉപയോഗങ്ങൾക്ക് തയ്യാറാണ്]
|
||||
H --> A
|
||||
I --> J[സ്റ്റോറിലേക്ക് പ്രസിദ്ധീകരിക്കുക]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style F fill:#e8f5e8
|
||||
style I fill:#f3e5f5
|
||||
style J fill:#fff3e0
|
||||
```
|
||||
```bash
|
||||
# ഘട്ടം 1: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ നിർമ്മിക്കുക
|
||||
npm run build
|
||||
```
|
||||
|
||||
**ഈ കമാൻഡ് എന്ത് ചെയ്യും:**
|
||||
- **ബ്രൗസർ പരിശീലിക്കാവുന്ന ഫയലുകളായി** നിങ്ങളുടെ സോഴ്സ് കോഡ് കമ്പൈൽ ചെയ്യുന്നു
|
||||
- **ജാവാസ്ക്രിപ്റ്റ് മാഡ്യൂളുകൾ** മികച്ച പാക്കേജുകളായി കൂട്ടിച്ചേർക്കുന്നു
|
||||
- **അവസാന എക്സ്റ്റെൻഷൻ ഫയലുകൾ** `/dist` ഫോൾഡറിൽ സൃഷ്ടിക്കുന്നു
|
||||
- **ഇൻസ്റ്റാളേഷൻ, ടെസ്റ്റിംഗ് വേണ്ടി** എക്സ്റ്റെൻഷൻ തയ്യാറാക്കുന്നു
|
||||
|
||||
**പടി 2: ബ്രൗസർ എക്സ്റ്റെൻഷൻ പരിപാലന പേജ് തുറക്കുക**
|
||||
1. നിങ്ങളുടെ ബ്രൗസറിന്റെ എക്സ്റ്റെൻഷൻ മാനേജ്മെന്റ് പേജ് **തുറക്കുക**
|
||||
2. മുകളിൽ വലതുവശം "Settings and more" ബട്ടൺ (`...` ഐക്കൺ) **ക്ലിക്ക് ചെയ്യുക**
|
||||
3. ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ നിന്ന് "Extensions" **തിരഞ്ഞെടുക്കുക**
|
||||
|
||||
**പടി 3: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യുക**
|
||||
- **പുതിയ ഇൻസ്റ്റാളേഷനുകൾക്കായി**: `load unpacked` തിരഞ്ഞെടുക്കുകയും `/dist` ഫോൾഡർ തിരഞ്ഞെടുക്കുകയും ചെയ്യുക
|
||||
- **അപ്ഡേറ്റുകൾക്കായി**: ഇതിനകം ഇൻസ്റ്റാൾ ചെയ്ത എക്സ്റ്റെൻഷന്റെ അടുത്തുള്ള `reload` ക്ലിക്ക് ചെയ്യുക
|
||||
- **പരിശോധനയ്ക്കായി**: കൂടുതൽ ഡീബഗ്ഗിംഗ് ഫീച്ചറുകൾക്ക് "Developer mode" എനേബിൾ ചെയ്യുക
|
||||
|
||||
### പ്രൊഡക്ഷൻ എക്സ്റ്റെൻഷൻ ഇൻസ്റ്റാളേഷൻ
|
||||
|
||||
> ✅ **കുറിപ്പ്**: ഈ ഡെവലപ്പ്മെന്റ് നിർദ്ദേശങ്ങൾ നിങ്ങളുടെ സ്വന്തം നിർമ്മിച്ച എക്സ്റ്റെൻഷനുകൾക്കായേയുള്ളതാണ്. പ്രസിദ്ധീകരിച്ച എക്സ്റ്റെൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ ഔദ്യോഗിക ബ്രൗസർ എക്സ്റ്റെൻഷൻ സ്റ്റോറുകൾ സന്ദർശിക്കുക, എ.ഗ., [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
|
||||
|
||||
**വ്യത്യാസം മനസ്സിലാക്കുക:**
|
||||
- **ഡെവലപ്പ്മെന്റ് ഇൻസ്റ്റാളേഷനുകൾ** വികസനത്തിനിടെ പ്രസിദ്ധീകരിക്കാത്ത എക്സ്റ്റെൻഷനുകൾ പരിശോധന നടത്താൻ അനുവദിക്കുന്നു
|
||||
- **സ്റ്റോർ ഇൻസ്റ്റാളേഷനുകൾ** പരിശാലനം കഴിഞ്ഞ പ്രസിദ്ധീകരിച്ച എക്സ്റ്റെൻഷനുകൾ സ്വയം അപ്ഡേറ്റ് ചെയ്യുന്നതോടൊപ്പം നൽകുന്നു
|
||||
- **സൈഡ്ലോഡിങ്** ഔദ്യോഗിക സ്റ്റോറിന് പുറത്തുനിന്നും എക്സ്റ്റെൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ അനുവദിക്കുന്നു (ഡെവലപ്പർ മോദ് ആവശ്യമാണ്)
|
||||
|
||||
## നിങ്ങളുടെ കാർബൺ പാദച്ചിഹ്നം എക്സ്റ്റെൻഷൻ നിർമ്മിക്കൽ
|
||||
|
||||
നിങ്ങളുടെ പ്രദേശത്തിന്റെ ഊർജ്ജ ഉപയോഗത്തിന്റെ കാർബൺ പാദം പ്രദർശിപ്പിക്കുന്ന ഒരു ബ്രൗസർ എക്സ്റ്റെൻഷൻ സൃഷ്ടിക്കും. ഈ പ്രോജക്റ്റ് എക്സ്റ്റെൻഷൻ വികസനത്തിന്റെ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ പ്രദർശിപ്പിക്കുന്നതായും പരിസ്ഥിതി ബോധവൽക്കരണത്തിന് പ്രായോഗികമായ ഉപകരണം ഒരുക്കുന്നതായും സേവിക്കും.
|
||||
|
||||
ജോൺ ഡ്യൂയിയുടെ വിദ്യാഭ്യാസ സിദ്ധാന്തങ്ങൾ പോലെ "നടന്ന് പഠിക്കുക" എന്ന തത്വം പിന്തുടരുന്ന സമീപനമാണ് ഇത് - സാങ്കേതിക കഴിവുകളും പ്രവർത്തിപ്പിക്കുന്ന യഥാർത്ഥ ലോക പ്രയോഗങ്ങളിലും സംയോജിപ്പിക്കുന്നു.
|
||||
|
||||
### പ്രോജക്റ്റ് ആവശ്യകതകൾ
|
||||
|
||||
വർക്ക് ആരംഭിക്കുമ്ബോൾ ആവശ്യമായ വിഭവങ്ങളും ആശ്രിതങ്ങളും ശേഖരിക്കാം:
|
||||
|
||||
**ആവശ്യമായ API ആക്സസ്:**
|
||||
- **[CO2 Signal API കി](https://www.co2signal.com/)**: നിങ്ങളുടെ ഇമെയിൽ വിലാസം നൽകുക, നിങ്ങളുടെ സൗജന്യ API കീ ലഭിക്കും
|
||||
- **[പ്രദേശിക കോഡ്](http://api.electricitymap.org/v3/zones)**: [Electricity Map](https://www.electricitymap.org/map) ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രദേശ കോഡ് കണ്ടെത്തുക (ഉദാ. Boston-ന് 'US-NEISO')
|
||||
|
||||
**ഡെവലപ്പ്മെന്റ് ഉപകരണങ്ങൾ:**
|
||||
- **[Node.js and NPM](https://www.npmjs.com)**: പ്രോജക്റ്റ് ആശ്രിതങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിനുള്ള പാക്കേജ് മാനേജർ
|
||||
- **[സ്റ്റാർട്ടർ കോഡ്](../../../../5-browser-extension/start)**: വികസനം ആരംഭിക്കാൻ `start` ഫോൾഡർ ഡൗൺലോഡ് ചെയ്യുക
|
||||
|
||||
✅ **കൂടുതൽ പഠിക്കൂ**: നിങ്ങളുടെ പാക്കേജ് മാനേജ്മെന്റ് കഴിവുകൾ മെച്ചപ്പെടുത്താൻ ഈ [സമ്പൂർണമായ Learn മൊഡ്യൂൾ](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) ഉപയോഗിക്കുക
|
||||
|
||||
### പ്രോജക്റ്റ് ഘടന മനസ്സിലാക്കൽ
|
||||
|
||||
പ്രോജക്റ്റ് ഘടന മനസ്സിലാക്കുന്നത് വികസന ജോലി കാര്യക്ഷമമാക്കുന്നതിന് സഹായിക്കുന്നു. അലക്സാൻഡ്രിയ ലൈബ്രറിയെല്ലാം അറിവ് എളുപ്പത്തിൽ തിരയാൻ ക്രമീകരിക്കപ്പെട്ടതുപോലെ, നല്ല ക്രമീകരിച്ച കോഡ് ബേസ് വികസനം കാര്യക്ഷമമാക്കും:
|
||||
|
||||
```
|
||||
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
|
||||
├── package.json # Project dependencies and scripts
|
||||
└── webpack.config.js # Build configuration
|
||||
```
|
||||
|
||||
**പ്രതിയോഗികളുടെ ബോധ്യത്തിൽ ഫയലുകൾ അധികം ചെയ്യുന്നത്:**
|
||||
- **`manifest.json`**: എക്സ്റ്റെൻഷന്റെ മmetadata, അനുമതികൾ, എൻട്രി പോയിന്റുകൾ നിർവ്വചിക്കുന്നു
|
||||
- **`index.html`**: എക്സ്റ്റെൻഷന് ക്ലിക്ക് ചെയ്തപ്പോൾ കാണുന്ന ഉപയോക്തൃ ഇന്റർഫേസ് സൃഷ്ടിക്കുന്നു
|
||||
- **`background.js`**: പശ്ചാത്തല ടാസ്കുകളും ബ്രൗസർ ഇവന്റ് ലിസ്സനറുകളും കൈകാര്യം ചെയ്യുന്നു
|
||||
- **`main.js`**: ബിൽഡ് പ്രക്രിയക്ക് ശേഷം അവസാനബന്ധിപ്പിച്ച ജാവാസ്ക്രിപ്റ്റ് ഫയൽ
|
||||
- **`src/index.js`**: പ്രധാന വികസന കോഡ്, ഇത് `main.js` ആയി കമ്പൈൽ ചെയ്യപ്പെടുന്നു
|
||||
|
||||
> 💡 **സംഘടന ടിപ്**: API കിയും പ്രദേശിക കോഡും സുരക്ഷിതമായ കുറിപ്പിൽ സൂക്ഷിക്കുക. വികസന സമയത്ത് ഈ മൂല്യങ്ങൾ എളുപ്പത്തിൽ കണ്ടെത്താം.
|
||||
|
||||
✅ **സുരക്ഷാ കുറിപ്പ്**: നിങ്ങളുടെ API കീകളും സენსിറ്റീവ് ക്രെഡൻഷ്യലുകളും കോഡ് റപ്പോസിറ്ററിയിൽ കമിറ്റ് ചെയ്യരുത്. അടുത്ത ഘട്ടങ്ങളിൽ ഈ സുരക്ഷിത കൈകാര്യം എങ്ങനെ നടത്താമെന്ന് കാണിക്കും.
|
||||
|
||||
## എക്സ്റ്റെൻഷൻ ഇന്റർഫേസ് സൃഷ്ടിക്കൽ
|
||||
|
||||
ഇപ്പോള് ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകങ്ങൾ നിർമ്മിക്കും. എക്സ്റ്റെൻഷൻ രണ്ട് സ്ക്രീൻ രീതിയിൽ പ്രവര്ത്തിക്കുന്നു: പ്രാരംഭ ക്രമീകരണത്തിനുള്ള കോൺഫിഗറേഷൻ സ്ക്രീൻ, ഡാറ്റ പ്രദർശനത്തിനുള്ള റിസൾട്സ് സ്ക്രീൻ.
|
||||
|
||||
ഈ സമീപനം ഇൻറർഫേസ് ഡിസൈനിലെ പ്രോഗ്രസീവ് ഡിസ്ക്ലോഷർ തത്വം പിന്തുടരുന്നു - ലളിതമായ ഓർഡറിൽ വിവരങ്ങളും ഓപ്ഷനുകളും വെളിപ്പെടുത്തി ഉപഭോക്താക്കളെ അമിതമായുള്ള ബാധ്യതയിൽ നിന്ന് രക്ഷിക്കുന്നു.
|
||||
|
||||
### എക്സ്റ്റെൻഷൻ കാഴ്ചകൾ അവലോകനം
|
||||
|
||||
**സെറ്റപ്പ് കാഴ്ച** - ആദ്യകാല ഉപയോക്തൃ ക്രമീകരണം:
|
||||
|
||||
|
||||
**ഫല കാഴ്ച** - കാർബൺ പാദച്ചിഹ്ന ഡാറ്റാ പ്രദർശനം:
|
||||
|
||||
|
||||
### ക്രമീകരണ ഫോം നിർമ്മിക്കല്
|
||||
|
||||
സെറ്റപ്പ് ഫോം ആദ്യ ഉപയോക്തൃ ഉപയോഗത്തിനിടെ ക്രമീകരണ ഡാറ്റ ശേഖരിക്കുന്നു. ക്രമീകരിച്ചതിനു ശേഷം, ഈ വിവരം ബ്രൗസർ സ്റ്റോറേജിൽ സംരക്ഷിക്കപ്പെടുന്നു ഭാവി സെഷനുകൾക്ക്.
|
||||
|
||||
`/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>
|
||||
```
|
||||
|
||||
**ഈ ഫോം എന്ത് ചെയ്യുന്നു:**
|
||||
- **സെമാന്റിക് ഫോം ഘടന** ശരിയായ ലേബലുകളും ഇൻപുട്ട് അസോസിയേഷനുകളും ചേർത്ത് സൃഷ്ടിക്കുന്നു
|
||||
- മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവത്തിന് ബ്രൗസർ ഓട്ടോ-കമ്പ്ലീറ്റ് ഫംഗ്ഷണാലിറ്റി കഴിയും
|
||||
- ജനനത്തിനുമുമ്പ് രണ്ട് ഫീൽഡുകളും പൂരിപ്പിക്കേണ്ടത് ആവശ്യമാണ് (`required` അറ്റ്രിബ്യൂട്ട് ഉപയോഗിച്ച്)
|
||||
- ലളിതമായ സ്റ്റൈലിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ലക്ഷ്യമിടുന്നതിനും വിവരിക്കുന്ന ക്ളാസ് നെയിമുകൾ ഉപയോഗിക്കുന്നു
|
||||
- എക്സ്റ്റെൻഷൻ ആദ്യം ക്രമീകരിക്കുന്ന ഉപയോക്താക്കള്ക്ക് വ്യക്തമായ നിർദ്ദേശങ്ങൾ നൽകുന്നു
|
||||
|
||||
### ഫല പ്രദർശനം നിർമ്മിക്കൽ
|
||||
|
||||
അടുത്തത്, കാർബൺ പാദച്ചിഹ്ന ഡാറ്റ പ്രദർശിപ്പിക്കുന്ന ഫലം ഏരിയ സൃഷ്ടിക്കുക. ഫോം താഴെ ഈ HTML ചേർക്കുക:
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
**ഈ ഘടന നൽകുന്നത്:**
|
||||
- **`loading`**: API ഡാറ്റ ലഭിക്കുന്നതിനിടെ ലോഡിംഗ് സന്ദേശം കാണിക്കുന്നു
|
||||
- **`errors`**: API വിളികൾ പരാജയപ്പെട്ടാൽ അല്ലെങ്കിൽ ഡാറ്റ അസാധുവായാൽ പിശകുകൾ പ്രദർശിപ്പിക്കുന്നു
|
||||
- **`data`**: ഡീബഗ്ഗിംഗിന് കോഴിക്കുള്ള വാസ്തവ ഡാറ്റ സൂക്ഷിക്കുന്നു
|
||||
- **`result-container`**: ഉപയോഗപ്രദമായ കാർബൺ പാദച്ചിഹ്ന വിവരങ്ങൾ ഫോർമാറ്റ് ചെയ്ത് കാണിക്കുന്നു
|
||||
- **`clear-btn`**: ഉപഭോക്താക്കൾക്ക് പ്രദേശം മാറ്റാനും എക്സ്റ്റെൻഷൻ വീണ്ടും ക്രമീകരിക്കാനും അനുവദിക്കുന്നു
|
||||
|
||||
### ബിൽഡ് പ്രക്രിയ സജ്ജമാക്കൽ
|
||||
|
||||
ഇപ്പോൾ പ്രോജക്റ്റ് ആശ്രിതങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്ത് ബിൽഡ് പ്രക്രിയ പരീക്ഷിക്കാം:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
**ഈ ഇൻസ്റ്റാളേഷൻ പ്രക്രിയ ചെയ്യുന്നത്:**
|
||||
- `package.json`ൽ സൂചിപ്പിച്ച വെബ്പാക്കും മറ്റ് ഡെവലപ്പ്മെന്റ് ആശ്രിതങ്ങളും അത下载് ചെയ്യുന്നു
|
||||
- ആധുനിക ജാവാസ്ക്രിപ്റ്റ് കമ്പൈലിംഗിനായി ബിൽഡ് ടൂൾചെയ്ന് ക്രമീകരിക്കുന്നു
|
||||
- എക്സ്റ്റെൻഷൻ നിർമ്മാണത്തിനും പരീക്ഷണത്തിനും ഡെവലപ്പ്മെന്റ് പരിസരം തയ്യാറാക്കുന്നു
|
||||
- കോഡ് ബണ്ട്ലിംഗ്, മെച്ചപ്പെടുത്തൽ, ക്രോസ്-ബ്രൗസർ അനുയോജ്യകത ലഭ്യമാക്കുന്നു
|
||||
|
||||
> 💡 **ബിൽഡ് പ്രക്രിയ വിവരം**: വെബ്പാക്ക് `/src/index.js` നിന്നുള്ള നിങ്ങളുടെ സോഴ്സ് കോഡ് `/dist/main.js` ആയി ബണ്ടിൾ ചെയ്യുന്നു. ഈ പ്രക്രിയ പ്രൊഡക്ഷൻ ന്റെ കാണിനും ബ്രൗസർ അനുയോജ്യതയ്ക്ക് ഏറ്റവും അനുയോജ്യമായി കോഡ് മെച്ചപ്പെടുത്തുന്നു.
|
||||
|
||||
### നിങ്ങളുടെ പുരോഗതി പരീക്ഷിക്കുക
|
||||
|
||||
ഇപ്പോൾ നിങ്ങൾക്ക് നിങ്ങളുടെ എക്സ്റ്റെൻഷൻ പരീക്ഷിക്കാം:
|
||||
1. **നടത്തുക** നിങ്ങളുടെ കോഡ് కంపൈൽ ചെയ്യാൻ build കമാൻഡ്
|
||||
2. **ലോഡ് ചെയ്യുക** വികസക മോഡ് ഉപയോഗിച്ച് ബ്രൗസറിൽ എക്സ്റ്റൻഷൻ
|
||||
3. **സ്ഥിരീകരിക്കുക** ഫॉर्म ശരിയായി പ്രദർശിപ്പിക്കുന്നതും പ്രൊഫഷണലായി കാണപ്പെടുന്നതും
|
||||
4. **പരിശോധിക്കുക** എല്ലാ ഫോർം ഘടകങ്ങളും ശരിയായി നിലനിൽക്കുന്നുവെന്ന്, പ്രവർത്തനക്ഷമമാണെന്ന്
|
||||
|
||||
**നിങ്ങൾ നേടിയതായി:**
|
||||
- **തയാറാക്കി** നിങ്ങളുടെ എക്സ്റ്റൻഷനിന്റെ അടിസ്ഥാന HTML ഘടന
|
||||
- **സൃഷ്ടിച്ചു** കോൺഫിഗറേഷൻ, ഫലം ഇന്റർഫേസുകൾ ശ്രേഷ്ടമായ സെമാന്റിക്ക് മാർക്കപ്പുമായി
|
||||
- **അട്ടിച്ചെറിഞ്ഞു** ആധുനിക ഡവലപ്പ്മെന്റ് വർക്ക്ഫ്ലോ സ്ഥാപനത്തിൽ നിലവാരപരമായ ടൂളുകൾ ഉപയോഗിച്ച്
|
||||
- **തയാറാക്കി** ഇൻററാക്ടീവ് ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷണാലിറ്റി ചേർക്കാനുള്ള ആധാരം
|
||||
|
||||
### 🔄 **പഠനപരപരിശോധന**
|
||||
**എക്സ്റ്റൻഷൻ വികസന പുരോഗതി**: തുടരെ പോകുന്നതിന് മുമ്പ് നിങ്ങളുടെ അറിവ് പരിശോധിക്കുക:
|
||||
- ✅ പ്രോജക്ട് ഘടനയിലെ ഓരോ ഫയലിന്റെയും ഉദ്ദേശ്യം വിശദീകരിക്കാൻ നിങ്ങൾക്ക് സാധിക്കുമോ?
|
||||
- ✅ build പ്രക്രിയ നിങ്ങളുടെ സോഴ്സ് കോഡ് എങ്ങനെ പരിവർത്തനം ചെയ്യുന്നതെന്ന് നിങ്ങൾക്ക് മനസ്സിലാണോ?
|
||||
- ✅ കോൺഫിഗറേഷനും ഫലങ്ങളും വ്യത്യസ്ത UI വിഭാഗങ്ങളിലേക്ക് തിരിച്ചറിയുന്നതിനുള്ള കാരണം എന്താണ്?
|
||||
- ✅ ഫോർം ഘടന അതിന്റെ ഉപയോഗപ്രദതക്കും ലഭ്യതക്കും എങ്ങനെ സഹായമാകുന്നു?
|
||||
|
||||
**ഡവലപ്പ്മെന്റ് വർക്ക്ഫ്ലോ ബോധം**: ഇനി നിങ്ങളൊക്കെ അനുസരിച്ചു കഴിയും:
|
||||
1. **സാധുവാക്കുക** നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ഇന്റർഫേസിനായി HTML, CSS മാറ്റങ്ങൾ
|
||||
2. **നടത്തുക** build കമാൻഡ് നിങ്ങളുടെ മാറ്റങ്ങൾ സംസ്കരിക്കാൻ
|
||||
3. **രീലോഡ് ചെയ്യുക** എക്സ്റ്റൻഷൻ ബ്രൗസറിൽ പുതുക്കലുകൾ പരീക്ഷിക്കാൻ
|
||||
4. **ഡീബഗ് ചെയ്യുക** ബ്രൗസർ ഡവലപ്പർ ടൂളുകൾ ഉപയോഗിച്ച് പ്രശ്നങ്ങൾ
|
||||
|
||||
നിങ്ങൾ ബ്രൗസർ എക്സ്റ്റൻഷൻ വികസനത്തിന് ആദ്യഘട്ടം പൂർത്തിയാക്കി. Wright സഹോദരങ്ങൾ പറക്കുന്നതിന് മുമ്പ് എയറോഡൈനാമിക്സ് മനസ്സിലാക്കേണ്ടതുപോലെ, ഈ അടിസ്ഥാന ആശയങ്ങൾ മനസ്സിലാക്കുന്നത് ഇനി കൂടുതൽ സങ്കീർണമായ ഇടപെടൽ ഫീച്ചറുകൾ നിർമ്മിക്കാൻ സഹായിക്കും.
|
||||
|
||||
## GitHub Copilot ഏജന്റ് ചലഞ്ച് 🚀
|
||||
|
||||
ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെ പറയുന്ന അനുബന്ധം പൂർത്തിയാക്കുക:
|
||||
|
||||
**വിവരണം:** API കീകൾ, മേഖലാ കോഡുകൾ നൽകുമ്പോൾ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ ഫോം സാധുത പരിശോധനയും ഫീഡ്ബാക്കും ചേർക്കുക.
|
||||
|
||||
**പ്രോമ്പ്റ്റ്:** API കീ ഫീൽഡ് കുറഞ്ഞത് 20 അക്ഷരങ്ങൾ ഉള്ളതായി പരിശോധിക്കുന്ന, മേഖലാ കോഡ് ശരിയായ ഫോർമാറ്റ് (ഉദാ: 'US-NEISO') പാലിക്കുന്നുവെന്ന് പരിശോധിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് സാധുത ഫംഗ്ഷനുകൾ സൃഷ്ടിക്കുക. ശരിയായ ഇൻപുട്ടുകൾക്ക് പഴുത്തു പോയ, തെറ്റായവയ്ക്ക് ചുവപ്പ് ബോർഡർ നിറം വിസ്വൽ ഫീഡ്ബാക്കായി നൽകുക. സുരക്ഷാലක්ෂണങ്ങളായി API കീ കാണിച്ചോ മറച്ചോ ചെയ്യാനുള്ള ടോഗിൾ ഫീച്ചറും ചേർക്കുക.
|
||||
|
||||
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) സംബന്ധിച്ച് കൂടുതൽ അറിയുക.
|
||||
|
||||
## 🚀 ചലഞ്ച്
|
||||
|
||||
ഒരു ബ്രൗസർ എക്സ്റ്റൻഷൻ സ്റ്റോർ പരിശോധിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ ഒന്നാമമായി ഇൻസ്റ്റാൾ ചെയ്യുക. അതിന്റെ ഫയലുകൾ താൽപര്യമുള്ള രീതികളിൽ പരിശോധിക്കുക. നിങ്ങൾ എന്താണ് കണ്ടെത്തുന്നത്?
|
||||
|
||||
## പോസ്റ്റ്-ലെക്ചർ ക്വിസ്
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/24)
|
||||
|
||||
## അവലോകനം & സ്വയം പഠനം
|
||||
|
||||
ഈ പാഠത്തിൽ നിങ്ങൾ വെബ് ബ്രൗസറിന്റെ ചരിത്രത്തെ കുറിച്ച് കുറച്ച് പഠിച്ചു; ലോകവ്യാപക വെബിന്റെ വെബ് കണ്ടുപിടുത്തക്കാരൻമാർ അതിന്റെ ഉപയോഗത്തെ എങ്ങനെ കണക്കാക്കി എന്നതിൽ കൂടുതൽ അറിയാൻ ഈ അവസരം ഉപയോഗിക്കുക. ചില ഉപകാരപ്രദമായ സൈറ്റുകൾ:
|
||||
|
||||
[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/)
|
||||
|
||||
[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[An interview with Tim Berners-Lee](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)
|
||||
|
||||
### ⚡ **അടുത്ത 5 മിനിറ്റുകൾക്കുള്ളിൽ നിങ്ങൾ ചെയ്യാവുന്ന കാര്യങ്ങൾ**
|
||||
- [ ] Chrome/Edge എക്സ്റ്റൻഷൻസ് പേജ് (chrome://extensions) തുറന്ന് ഇൻസ്റ്റാൾ ചെയ്ത എക്സ്റ്റൻഷനുകൾ പരിശോധിക്കുക
|
||||
- [ ] ഒരു വെബ് പേജ് ലോഡ് ചെയ്യുമ്പോൾ ബ്രൗസറിന്റെ DevTools നെറ്റ്വർക്ക് ടാബ് കാണുക
|
||||
- [ ] പേജ് സോഴ്സ് (Ctrl+U) കാണാൻ ശ്രമിക്കുക, HTML ഘടന അവലോകനം ചെയ്യുക
|
||||
- [ ] ഏതെങ്കിലും വെബ് പേജ് ഘടകം ഇൻസ്പെക്ട് ചെയ്ത് ദി CSS മാറ്റങ്ങൾ പരീക്ഷിക്കുക
|
||||
|
||||
### 🎯 **ഈ മണിക്കൂറിൽ നിങ്ങൾ നേടാവുന്ന കാര്യങ്ങൾ**
|
||||
- [ ] പോസ്റ്റ്-ലെക്ക്ചർ ക്വിസ് പൂർത്തിയാക്കി ബ്രൗസർ അടിസ്ഥാനങ്ങളിലായി മനസ്കരിക്കുക
|
||||
- [ ] ഒരു അടിസ്ഥാന manifest.json ഫയൽ ക്രിയേറ്റ് ചെയ്യുക ബ്രൗസർ എക്സ്റ്റൻഷന്വിനായി
|
||||
- [ ] ഒരു ലളിത "Hello World" എക്സ്റ്റൻഷൻ_popup പ്രദർശിപ്പിക്കുന്നതുമായുള്ള നിർമ്മിക്കുക
|
||||
- [ ] ഡവലപ്പർ മോഡിൽ നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്ത് പരീക്ഷിക്കുക
|
||||
- [ ] ലക്ഷ്യമിടുന്ന ബ്രൗസറിന്റെ എക്സ്റ്റൻഷൻ ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക
|
||||
|
||||
### 📅 **നിങ്ങളുടെ ആഴ്ചപോലുള്ള എക്സ്റ്റൻഷൻ യാത്ര**
|
||||
- [ ] യഥാർത്ഥ ഉപയോഗപ്രദതയുള്ള പ്രവർത്തനക്ഷമമായ ബ്രൗസർ എക്സ്റ്റൻഷൻ പൂരിപ്പിക്കുക
|
||||
- [ ] കണ്ടന്റ് സ്രിപ്റ്റുകൾ, ബാക്ക്ഗ്രൗണ്ട് സ്രിപ്റ്റുകൾ, പൊപ്പപ്പ് ഇടപെടലുകൾ പഠിക്കുക
|
||||
- [ ] സ്റ്റോറേജ്, ടാബുകൾ, മെസ്സേജിങ് പോലുള്ള ബ്രൗസർ APIs നുദ്ധരണ മുന്പു നേടുക
|
||||
- [ ] എക്സ്റ്റൻഷന്റെ ഉപയോക്തൃ സൗഹൃദ ഇന്റർഫേസുകൾ രൂപകല്പന ചെയ്യുക
|
||||
- [ ] വ്യത്യസ്ത വെബ്സൈറ്റുകളിൽ, സാഹചര്യങ്ങളിൽ നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പരിശോധിക്കുക
|
||||
- [ ] എക്സ്റ്റൻഷൻ ബ്രൗസർ സ്റ്റോറിലേക്ക് പ്രസിദ്ധീകരിക്കുക
|
||||
|
||||
### 🌟 **നിങ്ങളുടെ മാസാന്തം ബ്രൗസർ വികസനം**
|
||||
- [ ] വ്യത്യസ്ത ഉപയോക്തൃ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്ന നീണ്ടവർഗ്ഗ എക്സ്റ്റൻഷനുകൾ നിർമ്മിക്കുക
|
||||
- [ ] ഉന്നത ബ്രൗസർ API കളും സുരക്ഷാ മികച്ച രീതികളും പഠിക്കുക
|
||||
- [ ] ഓപ്പൺ സോഴ്സ് എക്സ്റ്റൻഷൻ പ്രോജക്ടുകളിൽ സംഭാവനകൾ നൽകുക
|
||||
- [ ] ക്രോസ്-ബ്രൗസർ കംപാറ്റിബിലിറ്റി, പ്രോഗ്രസീവ് എൻഹാൻസ്മെന്റ് കൈവരിക്കുക
|
||||
- [ ] മറ്റ് ഡവലപ്പർമാർക്കായി എക്സ്റ്റൻഷൻ വികസന ടൂളുകളും ടെംപ്ലേറ്റുകളും സൃഷ്ടിക്കുക
|
||||
- [ ] മറ്റു ഡവലപ്പർമാരെ സഹായിക്കുന്ന എക്സ്റ്റൻഷൻ വിദഗ്ധനായി വളരുക
|
||||
|
||||
## 🎯 നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റൻഷൻ പ്രാവീണ്യ സമയരേഖ
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title ബ്രൗസർ എക്സ്റ്റൻഷൻ ഡവലപ്മെന്റ് പുരോഗതി
|
||||
|
||||
section അടിസ്ഥാനം (15 നിമിഷം)
|
||||
Browser Understanding: കോർ ഘടന
|
||||
: റെൻഡറിംഗ് പ്രക്രിയ
|
||||
: എക്സ്റ്റൻഷൻ ഇന്റഗ്രേഷൻ പോയിന്റുകൾ
|
||||
|
||||
section സജ്ജീകരണം (20 നിമിഷം)
|
||||
Development Environment: പ്രോജക്ട് ഘടന
|
||||
: ബിൽഡ് ടൂളുകളുടെ കോൺഫിഗറേഷൻ
|
||||
: ബ്രൗസർ ഡവലപ്പർ മിൽഡും
|
||||
: എക്സ്റ്റൻഷൻ ലോഡിംഗ് പ്രക്രിയ
|
||||
|
||||
section ഇന്റർഫേസ് ഡിസൈൻ (25 നിമിഷം)
|
||||
User Experience: HTML ഘടന
|
||||
: CSS സ്റ്റൈലിംഗ്
|
||||
: ഫോം സാധൂകരണം
|
||||
: റെസ്പോൺസീവ് ഡിസൈൻ
|
||||
|
||||
section കോർ ഫംഗ്ഷണാലിറ്റി (35 നിമിഷം)
|
||||
JavaScript Integration: ഇവന്റ് ഹാൻഡ്ലിംഗ്
|
||||
: API ഇടപെടലുകൾ
|
||||
: ഡാറ്റ സംഭരണം
|
||||
: പിശക് കൈകാര്യം
|
||||
|
||||
section ബ്രൗസർ APIകൾ (45 നിമിഷം)
|
||||
Platform Integration: അനുമതി സിസ്റ്റം
|
||||
: സ്റ്റോറേജ് APIകൾ
|
||||
: ടാബ് മാനേജ്മെന്റ്
|
||||
: കോണ്ടക്സ്റ്റ് മെനുകൾ
|
||||
|
||||
section ആധുനിക ഫീച്ചറുകൾ (1 ആഴ്ച)
|
||||
Professional Extensions: പശ്ചാത്തല സ്ക്രിപ്റ്റുകൾ
|
||||
: കണ്ടന്റ് സ്ക്രിപ്റ്റുകൾ
|
||||
: ക്രോസ്-ബ്രൗസർ അനുയോജ്യത
|
||||
: പ്രവർത്തനക്ഷമത മെച്ചപ്പെടുത്തൽ
|
||||
|
||||
section പ്രസിദ്ധീകരണം (2 ആഴ്ച)
|
||||
Distribution: സ്റ്റോർ സമർപ്പണം
|
||||
: അവലോകന പ്രക്രിയ
|
||||
: ഉപയോക്തൃ പ്രതികരണം
|
||||
: അപ്ഡേറ്റ് മാനേജ്മെന്റ്
|
||||
|
||||
section വിദഗ്ധനിര (1 മാസം)
|
||||
Extension Ecosystem: ആധുനിക APIകൾ
|
||||
: സുരക്ഷ മികച്ച വേളകൾ
|
||||
: എന്റർപ്രൈസ് ഫീച്ചറുകൾ
|
||||
: ഫ്രെയിംവർക്ക് ഇന്റഗ്രേഷൻ
|
||||
```
|
||||
### 🛠️ നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ഡവലപ്പ്മെന്റ് ടൂള്കിറ്റ് സംക്ഷേപം
|
||||
|
||||
ഈ പാഠം പൂർത്തിയാക്കിയ ശേഷം നിങ്ങൾക്കുണ്ട്:
|
||||
- **ബ്രൗസർ ആർക്കിടെക്ചർ നോളedge**: റൻഡറിംഗ് എൻജിനുകൾ, സുരക്ഷാ മോഡലുകൾ, എക്സ്റ്റൻഷൻ ഇന്റഗ്രേഷൻ മനസ്സിലാക്കൽ
|
||||
- **ഡവലപ്പ്മെന്റ് എൻവയൺമെന്റ്**: Webpack, NPM എന്ന ആധുനിക ടൂൾചെയിൻ, ഡീബഗ് കഴിവുകൾ
|
||||
- **UI/UX അടിസ്ഥാനങ്ങൾ**: പ്രോഗ്രസീവ് ഡിസ്ക്ലോഷർ പാറ്റേൺ ഉപയോഗിച്ചുള്ള സെമാന്റിക് HTML ഘടന
|
||||
- **സുരക്ഷാ ബോധവൽക്കരണം**: ബ്രൗസർ അനുമതികളും സുരക്ഷിത ഡവലപ്പ്മെന്റ് ആചരണങ്ങളും മനസ്സിലാക്കൽ
|
||||
- **ക്രോസ്-ബ്രൗസർ ആശയങ്ങൾ**: സായൂഹ്യക്കുറിപ്പുകളും ടെസ്റ്റിങ്ങ് സമീപനങ്ങളും
|
||||
- **API ഇന്റഗ്രേഷൻ**: ബാഹ്യ ഡാറ്റ സ്രോതസുകളുമായി പ്രവർത്തിക്കുന്നതിന് മൂലാധാരം
|
||||
- **പ്രൊഫഷണൽ വർക്ക്ഫ്ലോ**: വ്യവസായ നിലവാരത്തിലുള്ള വികസന, ടെസ്റ്റിംഗ് രീതികൾ
|
||||
|
||||
**യഥാർത്ഥ ലോക അപേക്ഷകൾ**: ഈ നൈപുണ്യങ്ങൾ നേരിട്ട് ബാധിക്കുന്നു:
|
||||
- **വെബ് ഡവലപ്പ്മെന്റ്**: സിംഗിൾ-പേജ് അപ്ലിക്കേഷനുകളും പ്രോഗ്രസീവ് വെബ് ആപ്പുകളും
|
||||
- **ഡെസ്ക്ക്ടോപ് അപ്ലിക്കേഷനുകൾ**: Electron, വെബ് അധിഷ്ഠിത ഡെസ്ക്ക്ടോപ് സോഫ്റ്റ്വെയർ
|
||||
- **മൊബൈൽ ഡവലപ്പ്മെന്റ്**: വിപ്രിത ആപ്പുകളും വെബ് ആധിഷ്ഠിത മൊബൈൽ പരിഹാരങ്ങളും
|
||||
- **എന്റർപ്രൈസ് ടൂളുകൾ**: ആന്തരിക ഉൽപാദകത്വം, വർക്ക്ഫ്ലോ ഓട്ടോമേഷൻ
|
||||
- **ഓപ്പൺ സോഴ്സ്**: ബ്രൗസർ എക്സ്റ്റൻഷൻ പ്രോജക്ടുകളിലും വെബ് സ്റ്റാൻഡേർഡുകളിലും സംഭാവനകൾ
|
||||
|
||||
**അടുത്ത ഘട്ടം**: നിങ്ങൾക്ക് ഇപ്പോൾ ഇൻററാക്ടീവ് ഫംഗ്ഷണാലിറ്റി ചേർക്കാനും, ബ്രൗസർ APIs ഉപയോഗിച്ച് പ്രവർത്തിക്കാനും, ഉപയോക്തൃ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്ന എക്സ്റ്റൻഷനുകൾ സൃഷ്ടിക്കാനും സാധിക്കും!
|
||||
|
||||
## അസൈൻമെന്റ്
|
||||
|
||||
[നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പുനഃരൂപകൽപ്പന ചെയ്ത്](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയക്കുറിപ്പ്**:
|
||||
ഈ പ്രമാണം AI മൊഴിമാറ്റ സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. കൃത്യതയ്ക്ക് ഞങ്ങൾ ശ്രമിച്ചുവെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അസത്യതകൾ ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. അദ്യന്തഭാഷയിലുള്ള ആയസ്ഥമൽകാമ്പ്രമാണുള്ള പ്രമാണം അധികാരമുള്ള ഉറവിടമായി കരുതണം. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ വിവർത്തനം നിർദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽ നിന്നുണ്ടാകുന്ന യാതൊരു തെറ്റിദ്ധാരണകൾക്കും അല്ലെങ്കിൽ വ്യാഖ്യാനക്കുറവുകൾക്കുമായി ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b6897c02603d0045dd6d8256e8714baa",
|
||||
"translation_date": "2026-01-08T15:54:42+00:00",
|
||||
"source_file": "5-browser-extension/1-about-browsers/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# അസൈൻമെന്റ്: നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റൻഷൻ റീസ്റ്റൈൽ ചെയ്യുക
|
||||
|
||||
## അവലോകനം
|
||||
|
||||
നിങ്ങൾ നിങ്ങളുടെ കാർബൺ ഫെറ്റ്പ്രിന്റ് ബ്രൗസർ എക്സ്റ്റൻഷനിന്റെ HTML തളിക നിർമ്മിച്ചിട്ടുള്ളതോടെ, അത് ദൃശ്യപരമായി ആകർഷകവും ഉപയോക്തൃ സുഹൃത്തുമായിടുന്നതിനായി മാറ്റാൻ സമയമായി. മികച്ച ഡിസൈൻ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും നിങ്ങളുടെ എക്സ്റ്റൻഷനെ കൂടുതൽ പ്രൊഫഷണലും ആകർഷകവുമാക്കുകയും ചെയ്യും.
|
||||
|
||||
നിങ്ങളുടെ എക്സ്റ്റൻഷനിൽ അടിസ്ഥാന സിഎസ്എസ് സ്റ്റൈലിങ് നൽകിയിട്ടുണ്ട്, പക്ഷേ ഈ അസൈൻമെന്റ് നിങ്ങൾക്ക് വ്യക്തിഗത ശൈലിക്ക് അനുയോജ്യമായ പ്രത്യേക ദൃശ്യ ഐഡന്റിറ്റിയാണ് സൃഷ്ടിക്കാൻ പ്രേരിപ്പിക്കുന്നത്, അതേസമയം മികച്ച ഉപയോഗസൗകര്യം നിലനിർത്തുകയാണ് ലക്ഷ്യം.
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### ഭാഗം 1: നിലവിലെ ഡിസൈൻ വിശകലനം ചെയ്യുക
|
||||
|
||||
മാറ്റങ്ങൾ ചെയ്യുന്നതിന് മുൻപ്, നിലവിലുള്ള CSS ഘടന പരിശോധിക്കുക:
|
||||
|
||||
1. നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പ്രോജക്ടിലെ CSS ഫയലുകൾ **സ്ഥാനം കണ്ടെത്തുക**
|
||||
2. നിലവിലുള്ള സ്റ്റൈലിംഗ് സമീപനം, കളർ സ്കീം **സमीക്ഷിക്കുക**
|
||||
3. ലേയൗട്ട്, ടൈപ്പോഗ്രാഫി, ദൃശ്യ പരിധികളുടെ മെച്ചപ്പെടുത്തൽ സാധ്യതകൾ **അറിയുക**
|
||||
4. എങ്ങനെ ഡിസൈൻ ഉപയോക്തൃ ലക്ഷ്യങ്ങളെ (സർളമായ ഫോം പൂരിപ്പ്, വ്യക്തമായ ഡാറ്റാ പ്രദർശനം) പിന്തുണയ്ക്കുന്നു എന്നത് **പരിഗണിക്കുക**
|
||||
|
||||
### ഭാഗം 2: നിങ്ങളുടെ സ്വന്തം സ്റ്റൈലിങ് ഡിസൈൻ ചെയ്യുക
|
||||
|
||||
ഒരു ഏകീകൃത ദൃഷ്ടിപഥം സൃഷ്ടിക്കുക, ഇതിൽ ഉൾപ്പെടേണ്ടവ:
|
||||
|
||||
**കളർ സ്കീം:**
|
||||
- പരിസ്ഥിതിയുമായി ബന്ധപ്പെട്ട പ്രാഥമിക കളർ പალറ്റ് തിരഞ്ഞെടുക്കുക
|
||||
- ആക്സസിബിലിറ്റിക്ക് മതിയായ വ്യത്യാസം ഉറപ്പാക്കുക (WebAIMന്റെ കോൺട്രാസ്റ്റ് ചെക്കർ പോലെയുള്ള ഉപകരണങ്ങൾ ഉപയോഗിക്കുക)
|
||||
- വിവിധ ബ്രൗസർ തീമുകളിൽ കളറുകൾ എങ്ങനെ കാണപ്പെടും എന്നത് പരിഗണിക്കുക
|
||||
|
||||
**ടൈപ്പോഗ്രഫി:**
|
||||
- ചെറിയ എക്സ്റ്റൻഷൻ വലിപ്പത്തിൽ കൂടി വ്യവസ്ഥാപിതമായി ಓദ്യോഗ്യമായ ഫോണ്ടുകൾ തിരഞ്ഞെടുക്കുക
|
||||
- അനുയോജ്യമായ ഫോന്റ് വലിപ്പങ്ങളും ഭാരംകൊണ്ടും വ്യക്തമായ പരമ്പരസ്ഥാനം സ്ഥാപിക്കുക
|
||||
- ലൈറ്റ്, ഡാർക്ക് ബ്രൗസർ തീമുകളിൽ ടെക്സ്റ്റ് വായിക്കാൻ എളുപ്പമാക്കുക
|
||||
|
||||
**ലേയൗട്ട്, സ്പേയ്സിങ്ങ്:**
|
||||
- ഫോം ഘടകങ്ങളും ഡാറ്റാ പ്രദർശനവും ദൃശ്യപരമായി മെച്ചപ്പെടുത്തുക
|
||||
- കൃത്യമായ പാഡിങ്ങും മാര്ജിനും ചേർക്കുക വായന സുഗമമാക്കാൻ
|
||||
- വിവിധ സ്ക്രീൻ വലിപ്പങ്ങൾക്ക് പ്രതികരിക്കുന്ന ഡിസൈൻ പ്രിൻസിപ്പിളുകൾ പരിഗണിക്കുക
|
||||
|
||||
### ഭാഗം 3: നിങ്ങളുടെ ഡിസൈൻ പ്രയോഗിക്കുക
|
||||
|
||||
നിങ്ങളുടെ ഡിസൈൻ നടപ്പാക്കാൻ CSS ഫയലുകൾ മാറ്റം വരുത്തുക:
|
||||
|
||||
```css
|
||||
/* Example starting points for customization */
|
||||
|
||||
.form-data {
|
||||
/* Style the configuration form */
|
||||
background: /* your choice */;
|
||||
padding: /* your spacing */;
|
||||
border-radius: /* your preference */;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
/* Style the data display area */
|
||||
background: /* complementary color */;
|
||||
border: /* your border style */;
|
||||
margin: /* your spacing */;
|
||||
}
|
||||
|
||||
/* Add your custom styles here */
|
||||
```
|
||||
|
||||
**സ്റ്റൈൽ ചെയ്യേണ്ട പ്രധാന മേഖലകൾ:**
|
||||
- **ഫോം ഘടകങ്ങൾ**: ഇൻപുട്ട് ഫീൽഡുകൾ, ലേബലുകൾ, സബ്മിറ്റ് ബട്ടൺ
|
||||
- **ഫലങ്ങൾ പ്രദർശനം**: ഡാറ്റാ കണ്ടെയ്നർ, ടെക്സ്റ്റ് സ്റ്റൈലിങ്, ലോഡിങ്ങ് സ്റ്റേറ്റുകൾ
|
||||
- **ഇന്ററാക്ടീവ് ഘടകങ്ങൾ**: ഹോവർ ഇഫക്ടുകൾ, ബട്ടൺ സ്റ്റേറ്റുകൾ, ട്രാൻസിഷനുകൾ
|
||||
- **ആകെ ലേയൗട്ട്**: കണ്ടെയ്നർ സ്പേസിംഗ്, പശ്ചാത്തല നിറങ്ങൾ, ദൃശ്യ പരിധി
|
||||
|
||||
### ഭാഗം 4: പരിശോധനയും രൂപകൽപ്പനയും
|
||||
|
||||
1. `npm run build` ഉപയോഗിച്ച് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ കെട്ടിപ്പടുക്കുക
|
||||
2. പുതുക്കിയ എക്സ്റ്റൻഷൻ നിങ്ങളുടെ ബ്രൗസറിൽ ലോഡ് ചെയ്യുക
|
||||
3. എല്ലാ ദൃശ്യമുള്ള സ്റ്റേറ്റുകളും (ഫോം എൻട്രി, ലോഡിങ്, ഫലങ്ങൾ, പിശകുകൾ) **ടെസ്റ്റ് ചെയ്യുക**
|
||||
4. ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിച്ച് ആക്സസിബിലിറ്റി **സത്യാപിക്കുക**
|
||||
5. യഥാർത്ഥ ഉപയോഗം അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ **മെച്ചപ്പെടുത്തുക**
|
||||
|
||||
## സൃഷ്ടിമാതൃക ചവിട്ടുകുത്തലുകൾ
|
||||
|
||||
### അടിസ്ഥാനതരം
|
||||
- കളറുകളും ഫോണ്ടുകളും അപ്ഡേറ്റ് ചെയ്ത് ഏകീകൃത തീം സൃഷ്ടിക്കുക
|
||||
- ഇൻറർഫേസ് മുഴുവൻ സ്പേസിംഗ്, അലൈന്മെന്റ് മെച്ചപ്പെടുത്തുക
|
||||
- ഇന്ററാക്ടീവ് ഘടകങ്ങൾക്ക് സൂക്ഷ്മമായ ഹോവർ ഇഫക്റ്റുകൾ ചേർക്കുക
|
||||
|
||||
### മദ്ധ്യമതരം
|
||||
- നിങ്ങളുടെ എക്സ്റ്റൻഷനിനായി കസ്റ്റം ഐക്കണുകൾ അല്ലെങ്കിൽ ഗ്രാഫിക്സ് രൂപകൽപ്പന ചെയ്യുക
|
||||
- വിവിധ സ്റ്റേറ്റുകൾക്കിടയിൽ സ്മൂത്ത് ട്രാൻസിഷനുകൾ നടപ്പിലാക്കുക
|
||||
- API കോളുകൾക്കായി ഒരു പ്രത്യേക ലോഡിംഗ് ആനിമേഷൻ സൃഷ്ടിക്കുക
|
||||
|
||||
### ഉയർന്നതരം
|
||||
- നിരവധി തീം ഓപ്ഷനുകൾ (ലൈറ്റ്/ഡാർക്ക്/ഹൈ-കോൺട്രാസ്റ്റ്) രൂപകൽപ്പന ചെയ്യുക
|
||||
- വിവിധ ബ്രൗസർ വിൻഡോ വലിപ്പങ്ങൾക്ക് അനുയോജ്യമായി പ്രതികരിക്കുന്ന ഡിസൈൻ നടപ്പിലാക്കുക
|
||||
- ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്ന മൈക്രോ-ഇന്ററാക്ഷനുകൾ ചേർക്കുക
|
||||
|
||||
## സമർപ്പണ മാർഗ്ഗനിർദ്ദേശങ്ങൾ
|
||||
|
||||
നിങ്ങളുടെ പൂർത്തിയായ അസൈൻമെന്റിൽ ഉൾപ്പെടേണ്ടത്:
|
||||
|
||||
- നിങ്ങളുടെ കസ്റ്റം സ്റ്റൈലിങ് ഉൾപ്പെടെയുള്ള **മാറ്റം ചെയ്ത CSS ഫയലുകൾ**
|
||||
- വ്യത്യസ്ത സ്റ്റേറ്റുകളിൽ നിങ്ങളുടെ എക്സ്റ്റൻഷൻ കാഴ്ച നൽകുന്ന **സ്ക്രീൻഷോട്ടുകൾ** (ഫോം, ലോഡിങ്, ഫലങ്ങൾ)
|
||||
- നിങ്ങളുടെ ഡിസൈൻ തിരഞ്ഞെടുപ്പുകളും അവ ഉപയോക്തൃ അനുഭവം എങ്ങനെ മെച്ചപ്പെടുത്തുന്നുവെന്നും വിശദീകരിക്കുന്ന **ചുരുക്കം വിവരണം** (2-3 വാചകങ്ങൾ)
|
||||
|
||||
## വിലയിരുത്തൽ ക്രമീകരണം
|
||||
|
||||
| മാനദണ്ഡം | ആദർശ (4) | പ്രാവീണ്യം (3) | വികസനാധീന (2) | ആരംഭം (1) |
|
||||
|----------|---------------|----------------|----------------|----------------|
|
||||
| **ദൃശ്യ ഡിസൈൻ** | സൃഷ്ടിമാതൃക, ഏകീകൃത ഡിസൈൻ, ഉപയോഗസൗകര്യം വർദ്ധിപ്പിക്കുകയും ശക്തമായ ഡിസൈൻ സിദ്ധാന്തങ്ങളെ പ്രതിഫലിപ്പിക്കുകയും ചെയ്യുന്നു | നല്ല ഡിസൈൻ തിരഞ്ഞെടുപ്പുകളും പൊതു സ്ഥിരതയും വ്യക്തമായ ദൃശ്യമുള്ള പരമ്പരയും | അടിസ്ഥാന ഡിസൈൻ മെച്ചപ്പെടുത്തലുകൾ ചില സ്ഥിരതാ പ്രശ്നങ്ങളോടെ | ലഘുവായ അല്ലെങ്കിൽ അസമരം പരിഷ്കാരങ്ങൾ കൂടിയ ഡിസൈൻ |
|
||||
| **പ്രവർത്തനം** | എല്ലായ്പ്പോഴും വിവിധ സ്റ്റേറ്റുകളിലും ബ്രൗസർ പരിസരങ്ങളിലും സൈലുകൾ പൂർണ്ണമായും പ്രവർത്തിക്കുന്നു | ചെറിയ പ്രശ്നങ്ങളോടെ സൈലുകൾ സൈദ്ധാന്തികമായി പ്രവർത്തിക്കുന്നു | ചില പ്രദർശന പ്രശ്നങ്ങളോടെ ഭൂരിഭാഗം സൈലുകളും പ്രവർത്തിക്കുന്നു | ഉപയോഗപ്രവർത്തനത്തെ ബാധിക്കുന്ന ഗൗരവമായ പ്രശ്നങ്ങൾ |
|
||||
| **കോഡ് ഗുണമേൻമ** | ശുദ്ധവും നന്നായി ക്രമീകരിച്ച CSS, അർത്ഥവത്തായ ക്ലാസ് പേരുകൾ, കാര്യക്ഷമമായ സെലക്ടറുകൾ | ഉചിതമായ സെലക്ടറുകളും പ്രോപ്പർട്ടികളും ഉപയോഗിച്ചു നല്ല CSS ഘടന | ചില സംഘടനാ പ്രശ്നങ്ങളോടുകൂടിയ അംഗീകരനീയമായ CSS | ഭയർമായ CSS ഘടന അല്ലെങ്കിൽ Over-complex സ്റ്റൈലിങ് |
|
||||
| **ആക്സസിബിലിറ്റി** | മികച്ച കളർ കോൺട്രാസ്റ്റ്, വായിക്കാൻ എളുപ്പമുള്ള ഫോണ്ടുകൾ, ക്ഷാമികളായ ഉപയോക്താക്കളെ പരിഗണിക്കുന്നു | ചെറിയ മെച്ചപ്പെടുത്തൽ സാധ്യതകളുള്ള നല്ല ആക്സസിബിലിറ്റി | അടിസ്ഥാനമായ ആക്സസിബിലിറ്റി പരിഗണന, ചില പ്രശ്നങ്ങളോടെ | ആക്സസിബിലിറ്റി ആവശ്യകതകളിൽ പരിമിതമായ ശ്രദ്ധ |
|
||||
|
||||
## വിജയക്കുറിപ്പുകൾ
|
||||
|
||||
> 💡 **ഡിസൈൻ ടിപ്പ്**: സൂക്ഷ്മ മാറ്റങ്ങളോടെ ആരംഭിച്ച് കൂടുതൽ നാടകീയ സ്റ്റൈലിങ്ങിലേക്ക് മുന്നോട്ട് പോവുക. ടൈപ്പോഗ്രാഫി, സ്പേസിങ്ങിൽ ചെറിയ മെച്ചപ്പെടുത്തലുകൾ പൊതുവായി ഗുണമേൻമയിലുള്ള വലിയ വ്യത്യാസങ്ങൾ ഉണ്ടാക്കും.
|
||||
|
||||
**അനുസരിക്കാനുള്ള മികച്ച ആചാരങ്ങൾ:**
|
||||
- നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ലൈറ്റ്, ഡാർക്ക് ബ്രൗസർ തീമുകളിൽ രണ്ടിലും **ടെസ്റ്റ് ചെയ്യുക**
|
||||
- വേണ്ട scalability സാധ്യമാക്കാൻ റീലേറ്റീവ് യൂണിറ്റുകൾ (em, rem) **ഉപയോഗിക്കുക**
|
||||
- CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് സ്ഥിരതയുള്ള സ്പേസിങ് ** നിലനിർത്തുക**
|
||||
- വ്യത്യസ്ത ദൃശ്യമാന ആവശ്യങ്ങളുള്ള ഉപയോക്താക്കൾക്ക് എങ്ങനെയായിരിക്കും നിങ്ങളുടെ ഡിസൈൻ നോക്കിയിരിക്കും എന്ന് **പരിഗണിക്കുക**
|
||||
- ശരിയായ സിന്റാക്സ് പാലിക്കുന്നുവോ എന്ന് നിങ്ങളുടെ CSS **വാലിഡേറ്റ് ചെയ്യുക**
|
||||
|
||||
> ⚠️ **സാധാരണ പിഴവ്**: ദൃഷ്യ ആകർഷണത്തിനായി ഉപയോഗസൗകര്യം ബലിപം ചെയ്യരുത്. നിങ്ങളുടെ എക്സ്റ്റൻഷൻ സുന്ദരവും ഫംഗ്ഷണലുമായിരിക്കണം.
|
||||
|
||||
**ഓര്മ്മിക്കുക:**
|
||||
- പ്രധാന വിവരങ്ങൾ എളുപ്പം വായിക്കാൻ കഴിയുന്ന നിലയിൽ **നിർത്തുക**
|
||||
- ബട്ടണുകളും മറ്റു ഇന്ററാക്ടീവ് ഘടകങ്ങളും എളുപ്പത്തിൽ ക്ലിക്കുചെയ്യത്തക്കവണ്ണം **ഉണ്ട്**
|
||||
- ഉപയോക്താക്കളുടെ പ്രവർത്തനങ്ങൾക്ക് വ്യക്തമായ ദൃശ്യമുള്ള പ്രതികരണം **നൽകുക**
|
||||
- പ്ലേസ്ഹോൾഡർ ടെക്സ്റ്റ് മാത്രം അല്ല, യഥാർത്ഥ ഡേറ്റ ഉപയോഗിച്ച് നിങ്ങളുടെ ഡിസൈൻ **ടെസ്റ്റ് ചെയ്യുക**
|
||||
|
||||
ഉപയോഗസൗകര്യം കൂടിയ ദൃശ്യപരമായും പ്രകാശിക്കുന്നതുമായ ഒരു ബ്രൗസർ എക്സ്റ്റൻഷൻ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് സൌഭാഗ്യം!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിമർശനം**:
|
||||
ഈ പ്രമാണം AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ശരിയായി വിവർത്തനം ചെയ്യാൻ ഞങ്ങൾ ശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ തരിപ്പുകളോ നിർവ്വചന ദോഷങ്ങളോ ഉണ്ടാകാം എന്നും ദയവായി ശ്രദ്ധിക്കുക. പ്രാഥമിക പദം തന്നെ പ്രാമാണിക സ്രോതസ്സ് ആണെന്ന് കണക്കാക്കണം. നിർണായകമായ വിവരങ്ങൾക്കായി, പ്രൊഫഷണൽ മനുഷ്യ അവതർത്തനം നിർദ്ദേശിക്കപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽ നിന്നുണ്ടാകുന്ന യാതൊരു തെറ്റുകൾക്കും ഞങ്ങൾ ബാധ്യസ്ഥരാകുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,663 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "2b6203a48c48d8234e0948353b47d84e",
|
||||
"translation_date": "2026-01-08T15:10:10+00:00",
|
||||
"source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# Browser Extension Project ഭാഗം 2: ഒരു API കോളുചെയ്യുക, Local Storage ഉപയോഗിക്കുക
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title നിങ്ങളുടെ API സംയോജനം & സംഭരണം യാത്ര
|
||||
section അടിസ്ഥാനഘടകം
|
||||
DOM റഫറൻസുകൾ സജ്ജമാക്കുക: 3: Student
|
||||
ഇവന്റ് ലിസണറുകൾ ചേർക്കുക: 4: Student
|
||||
ഫോം സമർപ്പിക്കൽ കൈകാര്യം ചെയ്യുക: 4: Student
|
||||
section ഡേറ്റ മാനേജുമെന്റ്
|
||||
ലോക്കൽ സ്റ്റോറേജ് നടപ്പിലാക്കുക: 4: Student
|
||||
API കോൾസ് നിർമ്മിക്കുക: 5: Student
|
||||
അസിങ്ക്രൺ പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുക: 5: Student
|
||||
section ഉപയോക്തൃ അനുഭവം
|
||||
പിഴവ് കൈകാര്യംചെയ്യൽ ചേർക്കുക: 5: Student
|
||||
ലോഡിംഗ് സ്റ്റേറ്റുകൾ സൃഷ്ടിക്കുക: 4: Student
|
||||
ഇടപെടലുകൾ മെച്ചപ്പെടുത്തുക: 5: Student
|
||||
```
|
||||
## പ്രീ-ലെക്ചർ ക്വിസ്
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/25)
|
||||
|
||||
## പരിചയം
|
||||
|
||||
നിങ്ങള് തുടങ്ങിയത് ആ ബ്രൗസർ എക്സ്റ്റൻഷൻ ഓർമയുണ്ടോ? ഇപ്പോൾ നിങ്ങൾക്കൊരു സുന്ദരമായ ഫോം ഉണ്ട്, പക്ഷേ അത് ആധാരമായിട്ടാണ് നിലകൊള്ളുന്നത്. ഇന്ന് നാം അതിനെ സജീവമായി മാറ്റാനാണ് പോകുന്നത്, യാഥാർത്ഥ്യ ഡാറ്റയുമായി ബന്ധിപ്പിച്ച്, അത് ഓർമ്മിക്കുന്നതും ചേർത്തു.
|
||||
|
||||
അപ്പോളോ ദൗത്യ നിയന്ത്രണ കമ്പ്യൂട്ടറുകളെ ചിന്തിക്കുക - അവ ഓരേകമായ വിവരങ്ങൾ മാത്രം പ്രദർശിപ്പിക്കുന്നില്ല. അവ നിരന്തരം חלലാക്ഷയുമായി സംവദിച്ചു, ടെലിമെട്രി ഡാറ്റ പുതുക്കി, ദൗത്യത്തിന്റെ പ്രധാന പാരാമീറ്ററുകൾ ഓർക്കുകയും ചെയ്തു. ഇതാണ് നമ്മുടെ στόχος. നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ഇന്റർനെറ്റിൽ നിന്ന് യാഥാർത്ഥ്യ പരിസ്ഥിതി ഡാറ്റ പിടിക്കുകയും, അടുത്ത തവണയുള്ള ക്രമീകരണങ്ങൾ ഓർക്കുകയും ചെയ്യും.
|
||||
|
||||
API സംയോജനം സങ്കീർണ്ണമായിരിക്കാമെന്ന് തോന്നാം, പക്ഷേ ഇതു വളരെ എളുപ്പമാണ് - നിങ്ങളുടെ കോഡ് മറ്റ് സേവനങ്ങളുമായി സംസാരിക്കാൻ പഠിപ്പിക്കുന്നു. നിങ്ങൾ കാലാവസ്ഥാ ഡാറ്റ, സോഷ്യൽ മീഡിയ ഫീഡുകൾ, അല്ലെങ്കിൽ നാം ഇന്ന് ചെയ്യുന്നതുപോലെ കാർബൺ ഫുട്ഷ്പ്രിന്റ് വിവരങ്ങൾ എടുക്കുകയാണെങ്കിൽ, ഡിജിറ്റൽ ബന്ധങ്ങൾ സ്ഥാപിക്കുന്നത് അതാണ്. ബ്രൗസറുകൾ വിവരങ്ങൾ നിലനിർത്തുന്ന രീതികൾ - പുസ്തകങ്ങൾ എവിടെയാണെന്ന് ഓർക്കാൻ ലൈബ്രറികൾ എങ്ങനെ കാർഡ് കാറ്റലോഗുകൾ ഉപയോഗിച്ചതുപോലെ - നാം അവയെയും പരിശോധിക്കും.
|
||||
|
||||
ഈ പാഠത്തിന്റെ അവസാനം നിങ്ങൾക്ക് യഥാർത്ഥ ഡാറ്റ എടുക്കാവുന്ന, ഉപയോക്തൃ ഇഷ്ടങ്ങൾ സംരക്ഷിക്കുന്ന, മൃദുവായ അനുഭവം നൽകുന്ന ഒരു ബ്രൗസർ എക്സ്റ്റൻഷൻ ഉണ്ടാകും. തുടങ്ങാം!
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((ഡൈനാമിക് എക്സ്റ്റൻഷൻസ്))
|
||||
DOM Manipulation
|
||||
Element Selection
|
||||
Event Handling
|
||||
State Management
|
||||
UI Updates
|
||||
Local Storage
|
||||
Data Persistence
|
||||
Key-Value Pairs
|
||||
Session Management
|
||||
User Preferences
|
||||
API Integration
|
||||
HTTP Requests
|
||||
Authentication
|
||||
Data Parsing
|
||||
Error Handling
|
||||
Async Programming
|
||||
Promises
|
||||
Async/Await
|
||||
Error Catching
|
||||
Non-blocking Code
|
||||
User Experience
|
||||
Loading States
|
||||
Error Messages
|
||||
Smooth Transitions
|
||||
Data Validation
|
||||
```
|
||||
✅ നിങ്ങളുടെ കോഡ് ഏത് ഫയലിൽ ഏത് നമ്പർപ്പെട്ട ഭാഗത്തേക്ക് ഇടണമെന്ന് അറിയാൻ അനുയോജ്യമായ ഫയലിൽ നമ്പർപ്പെട്ട സეგმ്മെന്റുകൾ പിന്തുടരുക
|
||||
|
||||
## എക്സ്റ്റൻഷനിൽ കൈകാര്യം ചെയ്യേണ്ട ഘടകങ്ങൾ ക്രമീകരിക്കുക
|
||||
|
||||
നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഇൻറർഫേസ് കൈകാര്യം ചെയ്യാൻ തുടങ്ങുന്നതിനു മുൻപ്, അതിനായി പ്രത്യേകം HTML ഘടകങ്ങളിലേക്ക് റഫറൻസുകൾ വേണം. ഗാലിലിയോ ജുപിറ്ററിന്റെ ചന്ദ്രന്മാരെ അവലോകനം ചെയ്യുന്നതിനു മുമ്പ് ജുപിറ്ററിനെ കണ്ടെത്തി ശ്രദ്ധ കേന്ദ്രീകരിക്കേണ്ടതുപോലെ.
|
||||
|
||||
നിങ്ങളുടെ `index.js` ഫയലിൽ, ഓരോ പ്രധാന ഫോമുഘടകത്തിനും റഫറൻസ് പിടിക്കാൻ `const` വ്യത്യാസങ്ങൾ സൃഷ്ടിക്കാം. ഇതെങ്ങനെ ശാസ്ത്രജ്ഞർ അവരുടെ ഉപകരണങ്ങൾ ലേബലാക്കുന്നു എന്നതുപോലെ - എല്ലാ ലാബോറട്ടറിയും തിരയാതെ ആവശ്യമായതേ നേരിട്ട് ആക്സസ് ചെയ്യാൻ.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[JavaScript കോഡ്] --> B[document.querySelector]
|
||||
B --> C[CSS സെലക്ടറുകൾ]
|
||||
C --> D[HTML ഘടകങ്ങൾ]
|
||||
|
||||
D --> E[".form-data"]
|
||||
D --> F[".region-name"]
|
||||
D --> G[".api-key"]
|
||||
D --> H[".loading"]
|
||||
D --> I[".errors"]
|
||||
D --> J[".result-container"]
|
||||
|
||||
E --> K[ഫോം ഘടകം]
|
||||
F --> L[ഇൻപുട്ട് ഫീൽഡ്]
|
||||
G --> M[ഇൻപുട്ട് ഫീൽഡ്]
|
||||
H --> N[ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകം]
|
||||
I --> O[ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകം]
|
||||
J --> P[ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകം]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style D fill:#e8f5e8
|
||||
style K fill:#fff3e0
|
||||
style L fill:#fff3e0
|
||||
style M fill:#fff3e0
|
||||
```
|
||||
```javascript
|
||||
// ഫോം ഫീൽഡുകൾ
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
const apiKey = document.querySelector('.api-key');
|
||||
|
||||
// ഫലങ്ങൾ
|
||||
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');
|
||||
```
|
||||
|
||||
**ഈ കോഡ് ചെയ്യുന്നത്:**
|
||||
- CSS ക്ലാസ് സെലെക്ടറുകൾ ഉപയോഗിച്ച് `document.querySelector()` വഴി ഫോമുഘടകങ്ങൾ പിടിക്കുന്നു
|
||||
- പ്രദേശത്തിന്റെ പേര് மற்றும் API കീയുടെ ഇൻപുട് ഫീൽഡുകൾക്ക് റഫറൻസുകൾ സൃഷ്ടിക്കുന്നു
|
||||
- കാർബൺ ഉപയോഗ ഡാറ്റ പ്രദർശിപ്പിക്കുന്ന ഘടകങ്ങളിലും ബന്ധം സ്ഥാപിക്കുന്നു
|
||||
- ലോഡിംഗ് സൂചകങ്ങൾ, പിഴവു സന്ദേശങ്ങൾ പോലുള്ള UI ഘടകങ്ങൾ ക്രമീകരിക്കുന്നു
|
||||
- ഓരോ ഘടക റഫറൻസും `const` വ്യത്യാസങ്ങളിൽ സൂക്ഷിക്കുന്നു, പുനഃഉപയോഗത്തിന് എളുപ്പമാക്കും
|
||||
|
||||
## ഇവന്റ് ലിസ്റ്റനറുകൾ ചേർക്കുക
|
||||
|
||||
ഇപ്പോൾ നാം നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ഉപയോക്തൃ പ്രവർത്തനങ്ങൾക്ക് പ്രതികരിക്കട്ടെ. ഇവന്റ് ലിസ്റ്റനറുകൾ നിങ്ങളുടെ കോഡിന് ഉപയോക്തൃ ഇടപെടലുകൾ നിരീക്ഷിക്കാനുള്ള മാർഗമാണ്. ഇത് പൂർവ്വകാല ടെലിഫോൺ എക്സ്ചേഞ്ച് ഓപ്പറേറ്റർമാരെപോലെ - അവർ ഇപ്പോഴുണ്ടായ കോൾ കേട്ടുചേർത്ത് ശരിയായ സർക്യുട്ട് കണക്ട് ചെയ്തു.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Form
|
||||
participant JavaScript
|
||||
participant API
|
||||
participant Storage
|
||||
|
||||
User->>Form: പ്രദേശം/API കീ പൂരിപ്പിക്കുന്നു
|
||||
User->>Form: സമര്പ്പിക്കുക ക്ലിക്ക് ചെയ്യുന്നു
|
||||
Form->>JavaScript: submit ഇവന്റ് ട്രിഗര് ചെയ്യുന്നു
|
||||
JavaScript->>JavaScript: handleSubmit(e)
|
||||
JavaScript->>Storage: ഉപയോക്തൃ മുന്ഗാമികള് സൂക്ഷിക്കുക
|
||||
JavaScript->>API: കാര്ബണ് ഡാറ്റെടുത്തു വരുന്നു
|
||||
API->>JavaScript: ഡാറ്റ മടക്കുന്നു
|
||||
JavaScript->>Form: ഫലങ്ങളുമായി UI പുതുക്കുന്നു
|
||||
|
||||
User->>Form: ക്ലിയര് ബട്ടണ് ക്ലിക്ക് ചെയ്യുന്നു
|
||||
Form->>JavaScript: ക്ലിക്ക് ഇവന്റ് ട്രിഗര് ചെയ്യുന്നു
|
||||
JavaScript->>Storage: സൂക്ഷിച്ച ഡാറ്റ നീക്കംചെയ്യുക
|
||||
JavaScript->>Form: ആരംഭ ഘട്ടത്തിലേക്ക് റെസറ്റ് ചെയ്യുക
|
||||
```
|
||||
```javascript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
**ഈ ആശയങ്ങൾ മനസ്സിലാക്കുക:**
|
||||
- ഉപയോക്താക്കൾ എന്റർ അമർത്തുമ്പോൾ അല്ലെങ്കിൽ സമർപ്പിച്ചപ്പോൾ ട്രിഗർ ചെയ്യുന്നതിനായി ഫോമിന് സമിറ്റ് ലിസ്റ്റനർ അനുബന്ധിപ്പിക്കുന്നു
|
||||
- ക്ലിയർ ബട്ടണിൽ ക്ലിക്ക് ലിസ്റ്റനർ കണക്ട് ചെയ്യുന്നു, ഫോമും പുനഃക്രമീകരിക്കും
|
||||
- ഇവന്റ് ഒബ്ജെക്റ്റ് `(e)` കൈകാര്യം ചെയ്യുന്ന ഫംഗ്ഷനുകളിലേക്ക് നേരുന്നു
|
||||
- എക്സ്റ്റൻഷന്റെ ആരംഭാവസ്ഥ ക്രമീകരിക്കാൻ ഉടൻ `init()` ഫംഗ്ഷൻ വിളിക്കുന്നു
|
||||
|
||||
✅ ഇവിടെ ഉപയോഗിച്ചിട്ടുള്ള ചുരുക്കമായ അറോ ഫംഗ്ഷൻ സിന്തക്സിനോടുകൂടിയ അസ്പഷ്ടത ശ്രദ്ധിക്കുക. ഇത് പരമ്പരാഗത ഫംഗ്ഷൻ എക്സ്പ്രെഷനുകളുടെ പകരം ശുദ്ധമായ രീതിയാണ്, എങ്കിലും ഇരുവരും ശരിയായി പ്രവർത്തിക്കുന്നു!
|
||||
|
||||
### 🔄 **പഠന പരിശോധന**
|
||||
**ഇവന്റ് കൈകാര്യം ചെയ്യൽ മനസിലാക്കൽ**: ആരംഭത്തിലേകുന്നതിനു മുമ്പ്, നിങ്ങൾക്ക് ചെയ്തു നോക്കേണ്ടത്:
|
||||
- ✅ എങ്ങനെ `addEventListener` ഉപയോക്തൃ പ്രവർത്തനങ്ങളെ ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനുകളുമായി ബന്ധിപ്പിക്കുന്നു എന്ന് വിശദീകരിക്കുക
|
||||
- ✅ എന്തുകൊണ്ട് ഇവന്റ് ഒബ്ജെക്റ്റ് `(e)` കൈകാര്യം ചെയ്യുന്ന ഫംഗ്ഷനുകളിൽ അയയ്ക്കുന്നു എന്ന് മനസ്സിലാക്കുക
|
||||
- ✅ `submit`യ്ക്കും `click`യ്ക്കും തമ്മിലുള്ള വ്യത്യാസം തിരിച്ചറിയുക
|
||||
- ✅ `init()` ഫംഗ്ഷൻ എപ്പോഴും പ്രവർത്തിച്ചും എന്തുകൊണ്ട് അതുപോലെയാണ് എന്ന് വിവരിക്കുക
|
||||
|
||||
**ഏറ്റവും പെട്ടെന്ന് സ്വയം പരിശോധിക്കുക**: ഫോം സമർപ്പണത്തിൽ നിങ്ങൾ `e.preventDefault()` മറന്നാൽ എന്താകും?
|
||||
*ഉത്തരം: പേജ് പുനർ ലോഡ് ചെയ്യുകയും എല്ലാ ജാവാസ്ക്രിപ്റ്റ് സ്റ്റേറ്റ് നഷ്ടപ്പെട്ടു ഉപയോക്തൃ അനുഭവം തടസ്സപ്പെടും*
|
||||
|
||||
## സംരംഭാവസ്ഥയും പുനഃക്രമീകരണ ഫംഗ്ഷനുകളും നിർമ്മിക്കുക
|
||||
|
||||
നിങ്ങളുടെ എക്സ്റ്റൻഷന്റെ ആരംഭത്തിന്റെ യുക്തി നാം സൃഷ്ടിക്കാം. `init()` ഫംഗ്ഷൻ ഒരു കപ്പലിന്റെ നാവിഗേഷൻ സംവിധാനമായിരിക്കും - ഇതുവഴി നിലവിലെ നില പരിശോധിച്ച് ഇൻറർഫേസ് ക്രമീകരിക്കുന്നു. ആരെങ്കിലും നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ഉപയോഗിച്ചതാണോ എന്ന് നോക്കി അവരുടെ മുൻ ക്രമീകരണങ്ങൾ ലോഡ് ചെയ്യുന്നു.
|
||||
|
||||
`reset()` ഫംഗ്ഷൻ ശാസ്ത്രജ്ഞർ പരീക്ഷണങ്ങൾ തമ്മിൽ ഉപകരണങ്ങൾ പുനഃക്രമീകരിക്കുന്നത് പോലെ ഉപയോക്താക്കളെ പുതിയ തുടക്കം നൽകുന്നു.
|
||||
|
||||
```javascript
|
||||
function init() {
|
||||
// ഉപയോക്താവ് മുമ്പ് API ക്രെഡൻഷ്യലുകൾ സംഭരിച്ചു കൊണ്ടുണ്ടോ എന്ന് പരിശോധിക്കുക
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
// എക്സ്റ്റൻഷൻ ഐക്കൺ പൊതുവായ പച്ചയാക്കി (ഭാവിയിലെ പാഠത്തിനുള്ള പ്ലേസ്ഹോൾഡർ) സജ്ജമാക്കുക
|
||||
// TODO: അടുത്ത പാഠത്തിൽ ഐക്കൺ അപ്ഡേറ്റ് നടപ്പാക്കുക
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
// ആദ്യം ഉപയോഗിച്ചുസംഭവിക്കുന്നവർ: സജ്ജീകരണ ഫോം കാണിക്കുക
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
// മടങ്ങി വരുന്ന ഉപയോക്താവ്: അവരുടെ സംഭരിച്ച ഡാറ്റ സ്വയം ലോഡ് ചെയ്യുക
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
// ഉപയോക്താവിന് പുതിയ സ്ഥലം തിരഞ്ഞെടുക്കാൻ നിലവിലുള്ള പ്രദേശം മായ്ക്കുക
|
||||
localStorage.removeItem('regionName');
|
||||
// ആരംഭീകരണ പ്രക്രിയ പുനരാരംഭിക്കുക
|
||||
init();
|
||||
}
|
||||
```
|
||||
|
||||
**ഇവിടെ സംഭവിക്കുന്നത്:**
|
||||
- ബ്രൗസറിലെ ലോക്കൽ സ്റ്റോറേജിൽ സംഭരിച്ച API കീയും പ്രദേശവും കണ്ടെത്തുന്നു
|
||||
- പുതിയ ഉപയോക്താവാണോ അല്ലെങ്കിൽ മടങ്ങിച്ചെത്തുന്നയാളാണോ എന്ന് പരിശോധിക്കുന്നു
|
||||
- പുതിയ ഉപയോക്താക്കൾക്കായി സജ്ജീകരണ ഫോം കാണിക്കുകയും മറ്റു UI ഘടകങ്ങൾ മറയ്ക്കുകയും ചെയ്യുന്നു
|
||||
- മടങ്ങിച്ചെത്തുന്നവർക്കായി സൂക്ഷിച്ച ഡാറ്റ സ്വയം ലോഡ് ചെയ്യുകയും പുനഃക്രമീകരണ ഓപ്ഷൻ പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു
|
||||
- ലഭ്യമായ ഡാറ്റയുടെ അടിസ്ഥാനത്തിൽ ഉപയോക്തൃ ഇന്റർഫേസ് നില കൈകാര്യം ചെയ്യുന്നു
|
||||
|
||||
**Local Storage കാര്യങ്ങൾ:**
|
||||
- ബ്രൗസർ സെഷനുകൾക്കിടയിൽ ഡാറ്റ സംരക്ഷിക്കുന്നു (session storage പോലല്ലാത്തത്)
|
||||
- `getItem()`യും `setItem()`ഉം ഉപയോഗിച്ച് കീ-മൂല്യ ജോഡികളായി ഡാറ്റ സൂക്ഷിക്കുന്നു
|
||||
- ഒരു കിക്ക് നിലവിലില്ലായ്മയിൽ `null` തിരികെ നൽകുന്നു
|
||||
- ഉപയോക്തൃ ഇഷ്ടങ്ങളെയും ക്രമീകരണങ്ങളെയും ഓർക്കാൻ എളുപ്പമായ മാർഗ്ഗം നൽകുന്നു
|
||||
|
||||
> 💡 **ബ്രൗസർ സ്റ്റോറേജിന്റെ മനസ്സിലാക്കൽ**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) നിങ്ങളുടെ എക്സ്റ്റൻഷന് സ്ഥിരതയുള്ള ഓർമ നൽകുന്നു. പുരാതന അലക്സാന്ദ്രിയ ലൈബ്രറിയിലെ സ്ക്രോളുകൾ എങ്ങനെ സൂക്ഷിച്ചിരുന്നു എന്ന് ചിന്തിക്കുക - പാഠശാലക്കാർ പോയാലും തിരിച്ചുവന്നാലും വിവരങ്ങൾ ലഭ്യമായിരുന്നു.
|
||||
>
|
||||
> **പ്രധാന ശാസ്ത്രീയ സവിശേഷതകൾ:**
|
||||
> - ബ്രൗസർ അടച്ചതിനുശേഷവും ഡാറ്റ നിലനിൽക്കുന്നു
|
||||
> - കമ്പ്യൂട്ടർ പുനരാരംഭം, ബ്രൗസർ ക്രാഷ് എന്നിവയെല്ലാം സജീവമായി മറികടക്കുന്നു
|
||||
> - ഉപയോക്തൃ ഇഷ്ടങ്ങൾക്കായി വലിയ സംഭരണക്ഷമത നൽകുന്നു
|
||||
> - നെറ്റ്വർക്ക് വൈകിപ്പിക്കാതെ തൽക്ഷണ ആക്സസ് നല്കുന്നു
|
||||
|
||||
> **പ്രധാന കുറിപ്പ്**: നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റൻഷന് അതിന്റെ নিজത Local Storage ഉണ്ട്, സാധാരണ വെബ് പേജുകളിൽ നിന്നും വേർതിരിച്ചിരിക്കുന്നു. ഇത് സുരക്ഷ നൽകുകയും മറ്റ് വെബ്സൈറ്റുകളുമായി സംഘർഷം തടയുകയും ചെയ്യുന്നു.
|
||||
|
||||
ഡേറ്റ സംരക്ഷിച്ചതായി കാണാൻ, ബ്രൗസർ ഡിവലപ്പർ ടൂളുകൾ (F12) തുറന്ന് **Application** ടാബിലേക്കു പോവുക, പിന്നെ **Local Storage** സെക്ഷൻ വിപുലീകരിക്കുക.
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> CheckStorage: വിപുലീകരണം തുടങ്ങുന്നു
|
||||
CheckStorage --> FirstTime: സംഭരിച്ച ഡാറ്റ ഇല്ല
|
||||
CheckStorage --> Returning: ഡാറ്റ കണ്ടെത്തി
|
||||
|
||||
FirstTime --> ShowForm: ക്രമീകരണ ഫോം പ്രദർശിപ്പിക്കുക
|
||||
ShowForm --> UserInput: ഉപയോഗकर्ता ഡാറ്റ നൽകുന്നു
|
||||
UserInput --> SaveData: localStorage-ലേക്ക് സംഭരിക്കുക
|
||||
SaveData --> FetchAPI: കാർബൺ ഡാറ്റ നേടുക
|
||||
|
||||
Returning --> LoadData: localStorage-ലൊ നിന്ന് വായിക്കുക
|
||||
LoadData --> FetchAPI: കാർബൺ ഡാറ്റ നേടുക
|
||||
|
||||
FetchAPI --> ShowResults: ഡാറ്റ പ്രദർശിപ്പിക്കുക
|
||||
ShowResults --> UserAction: ഉപയോഗകൻ ഇടപെടുന്നു
|
||||
|
||||
UserAction --> Reset: ക്ലിയർ ബട്ടൺ അമർത്തി
|
||||
UserAction --> ShowResults: ഡാറ്റ കാണുക
|
||||
|
||||
Reset --> ClearStorage: സംഭരിച്ച ഡാറ്റ നീക്കം ചെയ്യുക
|
||||
ClearStorage --> FirstTime: ക്രമീകരണത്തിലേക്ക് മടങ്ങുക
|
||||
```
|
||||
|
||||
|
||||
> ⚠️ **സുരക്ഷാ പരിഗണന**: ഉത്പാദന പ്രയോഗങ്ങളിൽ, API കീകൾ LocalStorage-ൽ സൂക്ഷിക്കുന്നത് സുരക്ഷാ അപകടങ്ങൾ ഉണ്ടാക്കാം, കാരണം ജാവാസ്ക്രിപ്റ്റ് ഈ ഡാറ്റ ആക്സസ് ചെയ്യാം. പഠനത്തിന് ഇത് ശരിയാണെങ്കിലും, യാഥാർത്ഥ്യ հավելു മാത്രം കുട്ടികളായ ക്രെഡൻഷ്യലുകൾ സർവർ-സൈഡ് സംഭരണം ഉപയോഗിക്കണം.
|
||||
|
||||
## ഫോം സമർപ്പണം കൈകാര്യം ചെയ്യുക
|
||||
|
||||
ഇപ്പോൾ, ഒരാൾ നിങ്ങളുടെ ഫോമു സമർപ്പിക്കുമ്പോൾ സംഭവിക്കുന്നതിനെ കൈകാര്യം ചെയ്യാം. സാധാരണയായി, ഫോം സമർപ്പിക്കുമ്പോൾ ബ്രൗസർ പേജ് പുനഃലോഡു ചെയ്യും, പക്ഷേ നാം ഈ പ്രവൃത്തി തടയികൊണ്ട് മൃദുവായ അനുഭവം സൃഷ്ടിയ്ക്കും.
|
||||
|
||||
ഇത് ദൗത്യ നിയന്ത്രണം ബഹിരാകാശ കപ്പലുകളുമായി സംവദിക്കുന്ന രീതിയെ അനുസരിക്കുന്നു - ഓരോ സംവരണത്തിനും മുഴുവൻ സിസ്റ്റം പുനഃസജ്ജമാക്കാൻ പകരം, അവർ തുടർച്ചയായി പ്രവർത്തിച്ച് പുതിയ വിവരങ്ങൾ കൈകാര്യം ചെയ്യുന്നു.
|
||||
|
||||
ഫോം സമർപ്പണ ഇവന്റ് പിടിച്ച് ഉപയോക്തൃ ഇൻപുട്ട് എടുക്കുന്ന ഫംഗ്ഷൻ സൃഷ്ടിക്കുക:
|
||||
|
||||
```javascript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
|
||||
**മുകളിൽ നമ്മൾ ചെയ്തതു:**
|
||||
- പേജ് പുതുക്കപ്പെടുന്നത് തടയാൻ ഡീഫോൾട്ട് ഫോം സമർപ്പണം തടയുന്നു
|
||||
- API കീയും പ്രദേശം ഫീൽഡുകളിൽ നിന്നും ഉപയോക്തൃ മൂല്യങ്ങൾ എടുക്കുന്നു
|
||||
- ഫോമിന്റെ ഡാറ്റ `setUpUser()` ഫംഗ്ഷന് കൈമാറുന്നു പ്രോസസ് ചെയ്യാനായി
|
||||
- പേജ് പുനൽലോഡുകൾ ഒഴിവാക്കി സിംഗിൾ പേജ് അപ്ലിക്കേഷൻ ഉപയോഗാനുഭവം നിലനിർത്തുന്നു
|
||||
|
||||
✅ ശ്രദ്ധിക്കുക, നിങ്ങളുടെ HTML ഫോമിൽ `required` ആട്രിബ്യൂട്ട് അടങ്ങിയതിനാൽ, ഫോം സമർപ്പിക്കുന്നതിനു മുമ്പ് ബ്രൗസർ API കീയും പ്രദേശവും നൽകുന്നുണ്ടോ എന്ന് താനേ പരിശോധന നടത്തും.
|
||||
|
||||
## ഉപയോക്തൃ ഇഷ്ടങ്ങൾ ക്രമീകരിക്കുക
|
||||
|
||||
`setUpUser` ഫംഗ്ഷൻ ഉപയോക്താവിന്റെ ക്രെഡൻഷ്യലുകൾ സംരക്ഷിച്ച് ആദ്യം API കോളും ആരംഭിക്കുന്നു. ഇത് ക്രമീകരണത്തിൽ നിന്നും ഫലങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള മൃദുവായ മാറ്റത്തെ സൃഷ്ടിക്കുന്നു.
|
||||
|
||||
```javascript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
// ഭാവി സെഷനുകൾക്കായി ഉപയോക്തൃ ക്രഡൻഷ്യലുകൾ സംരക്ഷിക്കുക
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
|
||||
// ലോഡിങ് സ്റ്റേറ്റ് കാണിക്കാൻ UI അപ്ഡേറ്റ് ചെയ്യുക
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
|
||||
// ഉപയോക്തൃ ക്രഡൻഷ്യലുകൾ ഉപയോഗിച്ച് കാർബൺ ഉപയോഗം ഡാറ്റ നേടുക
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
|
||||
**കാൽപ്പനികമായി വാക്കുകൾ:**
|
||||
- API കീയും പ്രദേശവും ഭാവിയിലെ ഉപയോഗത്തിനു Local Storage-ൽ സൂക്ഷിക്കുന്നു
|
||||
- ഡാറ്റ എടുക്കുന്നതായി ഉപയോക്താക്കളെ അറിയിക്കാൻ ലോഡിംഗ് സൂചകം കാണിക്കുന്നു
|
||||
- മുൻ പിഴവ് സന്ദേശങ്ങൾ ഫ്ളാഷിൽ നിന്നും നീക്കം ചെയ്യുന്നു
|
||||
- ഉപയോക്താക്കൾക്ക് ക്രമീകരണങ്ങൾ പുനഃക്രമീകരിക്കാൻ ക്ലിയർ ബട്ടൺ പ്രദർശിപ്പിക്കുന്നു
|
||||
- യഥാർത്ഥ കാർബൺ ഉപയോഗ ഡാറ്റ എടുക്കാൻ API കോളു തുടങ്ങുന്നു
|
||||
|
||||
ഈ ഫംഗ്ഷൻ ഡാറ്റ സംരക്ഷണം കൂടാതെ UI അപ്ഡേറ്റുകളും ഏകദേശമായി കൈകാര്യം ചെയ്ത് സുതാര്യമായ അനുഭവം സൃഷ്ടിക്കുന്നു.
|
||||
|
||||
## കാർബൺ ഉപയോഗ ഡാറ്റ പ്രദർശിപ്പിക്കുക
|
||||
|
||||
ഇപ്പോൾ നാം എക്സ്റ്റൻഷനെ API മുഖാന്തിരം ബാഹ്യ ഡാറ്റാ ഉറവിടങ്ങളുമായി ബന്ധിപ്പിക്കാം. ഇത് আপনার എക്സ്റ്റൻഷനെ സ്വതന്ത്ര ഉപകരണത്തിൽ നിന്ന് ഇന്റർനെറ്റിൽ നിന്നും യഥാർത്ഥ സമയ വിവരങ്ങൾ ആക്സസ് ചെയ്യുന്നതായി മാറ്റുന്നു.
|
||||
|
||||
**API-കൾ മനസ്സിലാക്കൽ**
|
||||
|
||||
[APIs](https://www.webopedia.com/TERM/A/API.html) എങ്ങനെ വ്യത്യസ്ത ആപ്ലിക്കേഷനുകൾ തമ്മിൽ ആശയവിനിമയം നടത്തുന്നു എന്നാണ്. ഇത് 19-അം നൂറ്റാണ്ടിലെ ടെലിഗ്രാഫ് സംവിധാനത്തെപോലെ - ഓപ്പറേറ്റർമാർ ദൂരെ സ്റ്റേഷനുകളിലേക്ക് അഭ്യർത്ഥനകൾ അയച്ചും ആവശ്യപ്പെട്ട വിവരം ലഭിച്ചും. നിങ്ങൾ സോഷ്യൽ മീഡിയ പരിശോധിക്കുമ്പോഴും, വോയിസ് അസിസ്റ്റന്റിനോട് ചോദിക്കുമ്പോഴും, ഡെലിവറി ആപ്പ് ഉപയോഗിക്കുമ്പോഴും, API-കൾ ഈ ഡാറ്റ ഇടപാടുകൾ സാന്ദ്രമാക്കുന്നു.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[നിങ്ങളുടെ എക്സ്റ്റൻഷൻ] --> B[HTTP അഭ്യർത്ഥന]
|
||||
B --> C[CO2 സിഗ്നൽ API]
|
||||
C --> D{സാധുവായ അഭ്യർത്ഥനയാണോ?}
|
||||
D -->|അതെ| E[ഡാറ്റാബേസ് ചോദിക്കുക]
|
||||
D -->|അല്ല| F[പിശക് മടങ്ങിവെക്കുക]
|
||||
E --> G[കാർബൺ ഡാറ്റ]
|
||||
G --> H[JSON പ്രതികരണം]
|
||||
H --> I[നിങ്ങളുടെ എക്സ്റ്റൻഷൻ]
|
||||
F --> I
|
||||
I --> J[UI അപ്ഡേറ്റ് ചെയ്യുക]
|
||||
|
||||
subgraph "API Request"
|
||||
K[ഹെഡേഴ്സ്: auth-token]
|
||||
L[നിരക്കുകൾ: countryCode]
|
||||
M[രീതി: GET]
|
||||
end
|
||||
|
||||
subgraph "API Response"
|
||||
N[കാർബൺ തീവ്രത]
|
||||
O[ഫോസിൽ ഇന്ധന ശതമാനം]
|
||||
P[ടൈംസ്റ്റാംപ്]
|
||||
end
|
||||
|
||||
style C fill:#e8f5e8
|
||||
style G fill:#fff3e0
|
||||
style I fill:#e1f5fe
|
||||
```
|
||||
**REST API-കളെക്കുറിച്ചുള്ള പ്രധാന ആശയങ്ങൾ:**
|
||||
- REST എന്നത് 'Representational State Transfer' ആണ്
|
||||
- ഡാറ്റയുമായി ഇടപെടാൻ സ്റ്റാൻഡേർഡ് HTTP മേത്തഡുകൾ (GET, POST, PUT, DELETE) ഉപയോഗിക്കുന്നു
|
||||
- സാധാരണയായി JSON പോലുള്ള മുൻകൂട്ടി നിർവ്വചിച്ച ഫോർമാറ്റുകളിൽ ഡാറ്റ ലഭ്യമാക്കുന്നു
|
||||
- വിവിധ അഭ്യർത്ഥനകൾക്കുള്ള സ്ഥിരമായ URL അടിസ്ഥാനത്തിലുള്ള എൻഡ്പോയിന്റുകൾ നൽകുന്നു
|
||||
|
||||
✅ നാം ഇന്ന് ഉപയോഗിക്കുന്ന [CO2 Signal API](https://www.co2signal.com/) חש provides വൈദ്യുതി ഗ്രിഡുകളുടെ യഥാർത്ഥ സമയ കാർബൺ തീവ്രത ഡാറ്റ. ഇത് ഉപയോക്താക്കൾക്ക് തങ്ങളുടെ വൈദ്യുതി ഉപഭോഗത്തിന്റെ പരിസ്ഥിതി സ്വാധീനം മനസ്സിലാക്കാൻ സഹായിക്കുന്നു!
|
||||
|
||||
> 💡 **അസിങ്ക്രണസ് ജാവാസ്ക്രിപ്റ്റ് മനസ്സിലാക്കൽ**: [`async` കീബോർഡ്](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) നിങ്ങളുടെ കോഡിനു ഒരേ സമയം നിരവധി പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു. ഒരു സെർവറിൽ നിന്നുള്ള ഡാറ്റ ആവശ്യപ്പെടുമ്പോൾ, പൂർണ്ണമായി എക്സ്റ്റൻഷൻ തളർന്ന് കിടക്കരുത് - അത് എയർ ട്രാഫിക് കൺട്രോൾ ഒരു വിമാനത്താവളം മുഴുവനായി നിർത്തുന്നത് പോലെയാണ്.
|
||||
>
|
||||
> **പ്രധാന ഗുണങ്ങൾ:**
|
||||
> - ഡാറ്റ ലോഡാകുമ്പോഴും എക്സ്റ്റൻഷൻ പ്രതികരണശീലം നിലനിർത്തുന്നു
|
||||
> - നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾക്കിടയിൽ മറ്റ് കോഡുകൾക്ക് പ്രവർത്തനം തുടരുമാകുന്നു
|
||||
> - പാരമ്പര്യ കോൾബാക്ക് രീതികളേക്കാൾ കോഡ് വായിക്കാൻ എളുപ്പമാണ്
|
||||
> - നെറ്റ്വർക്ക് പിഴവുകൾ മെച്ചമാർന്ന രീതിയിൽ കൈകാര്യം ചെയ്യുന്നു
|
||||
|
||||
ഇവിടെ async-നെ കുറിച്ചുള്ള ഒരു ഷോർട്ട് വീഡിയോകും:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||
|
||||
> 🎥 async/await-നെപ്പറ്റി വീഡിയോ കാണാൻ മേൽ ചിത്രം ക്ലിക്ക് ചെയ്യുക.
|
||||
|
||||
### 🔄 **പഠന പരിശോധന**
|
||||
**Async പ്രോഗ്രാമിംഗിന്റെ മനസിലാക്കൽ**: API ഫംഗ്ഷനിലേക്ക് പോകുന്നതിന് മുമ്പ് സ്ഥിരീകരിക്കുക:
|
||||
- ✅ എന്തുകൊണ്ട് എക്സ്റ്റൻഷൻ മുഴുവൻ തടഞ്ഞ് നിർത്താതെ `async/await` ഉപയോഗിക്കുന്നു
|
||||
- ✅ നെറ്റ്വർക്ക് പിശകുകൾ `try/catch` ബ്ലോക്കുകൾ എങ്ങനെ നന്നായി കൈകാര്യം ചെയ്യുന്നു
|
||||
- ✅ സിങ്ക്രോണസ് vs അസിങ്ക്രോണസ് പ്രവർത്തനങ്ങൾ തമ്മിലുള്ള വ്യത്യാസം
|
||||
- ✅ API കോളുകൾ പരാജയപ്പെടാനാകാനുള്ള കാരണങ്ങളും അതു കൈകാര്യം ചെയ്യാനുള്ള മാർഗ്ഗങ്ങളും
|
||||
|
||||
**യഥാർത്ഥ ജീവിത ഉദാഹരണങ്ങൾ:**
|
||||
- **ഭക്ഷണം ഓർഡർ ചെയ്യൽ**: അടുക്കളയിൽ നിന്ന് കാത്തിരിക്കാതെ, പാസ്സായ രസീത് എടുത്ത് മറ്റൊക്കെ ചെയ്യുക
|
||||
- **ഇമെയിൽ അയക്കൽ**: അയയ്ക്കുമ്പോൾ അപ്ലിക്കേഷൻ തകരാതെ മറ്റൊരു ഇമെയിൽ തയ്യാറാക്കുക
|
||||
- **വെബ് പേജുകൾ ലോഡുചെയ്യൽ**: ചിത്രങ്ങൾ ഘട്ടം ഘട്ടമായി ലോഡ് ചെയ്തുകൊണ്ടിരിക്കുമ്പോൾ നിങ്ങൾ ഇതിനകം ടെക്സ്റ്റ് വായിക്കും
|
||||
|
||||
**API प्रमाणीकरण പ്രവാഹം**:
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Ext as വിപുലീകരണം
|
||||
participant API as CO2 സിഗ്നൽ API
|
||||
participant DB as ഡാറ്റാബേസ്
|
||||
|
||||
Ext->>API: ഒത്തതിരിവിന്റെ ടോക്കൺ കൊണ്ട് അഭ്യർത്ഥന
|
||||
API->>API: ടോക്കൺ സാധുതാക്കുക
|
||||
API->>DB: കാർബൺ ഡാറ്റ അന്വേഷിക്കുക
|
||||
DB->>API: ഡാറ്റ തിരികെ നൽകുക
|
||||
API->>Ext: JSON പ്രതികരണം
|
||||
Ext->>Ext: UI അപ്ഡേറ്റ് ചെയ്യുക
|
||||
```
|
||||
കാർബൺ ഉപയോഗ ഡാറ്റ എടുക്കാനും പ്രദർശിപ്പിക്കാനും ഫംഗ്ഷൻ സൃഷ്ടിക്കുക:
|
||||
|
||||
```javascript
|
||||
// ആധുനിക ഫെച്ച് API സമീപനം (പുറം ആശ്രിതങ്ങൾ ആവശ്യമില്ല)
|
||||
async function displayCarbonUsage(apiKey, region) {
|
||||
try {
|
||||
// CO2 Signal API-യിൽനിന്ന് കാർബൺ തീവ്രത ഡാറ്റ ഫെച്ച് ചെയ്യുക
|
||||
const response = await fetch('https://api.co2signal.com/v1/latest', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'auth-token': apiKey,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
// പ്രത്യേക മേഖലയ്ക്കായി ക്വറി പാരാമീറ്ററുകൾ ചേർക്കുക
|
||||
...new URLSearchParams({ countryCode: region }) && {
|
||||
url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
|
||||
}
|
||||
});
|
||||
|
||||
// API അഭ്യർത്ഥന വിജയകരമായിരുന്നോ എന്ന് പരിശോധിക്കുക
|
||||
if (!response.ok) {
|
||||
throw new Error(`API request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const carbonData = data.data;
|
||||
|
||||
// റൗണ്ടുചെയ്ത കാർബൺ തീവ്രത മൂല്യം കണക്കാക്കുക
|
||||
const carbonIntensity = Math.round(carbonData.carbonIntensity);
|
||||
|
||||
// ഫെച്ച് ചെയ്ത ഡാറ്റ ഉപയോഗിച്ച് ഉപയോക്തൃ ഇന്റർഫേസ് അപ്ഡേറ്റ് ചെയ്യുക
|
||||
loading.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
myregion.textContent = region.toUpperCase();
|
||||
usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
|
||||
fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
|
||||
results.style.display = 'block';
|
||||
|
||||
// TODO: calculateColor(carbonIntensity) - അടുത്ത പാഠത്തിൽ നടപ്പിലാക്കുക
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching carbon data:', error);
|
||||
|
||||
// ഉപയോക്തൃ സൗഹൃദമായ പിഴവ് സന്ദേശം പ്രദർശിപ്പിക്കുക
|
||||
loading.style.display = 'none';
|
||||
results.style.display = 'none';
|
||||
errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**ഇവിടെ സംഭവിക്കുന്നത്:**
|
||||
- ലൈബ്രറികൾ പോലുള്ള Axios-നെ ഒഴിവാക്കി, മോഡേൺ `fetch()` API ഉപയോഗിക്കുന്നു, ആശയവിനിമയത്തിന് വ്യക്തവും സ്വതന്ത്രവുമായ കോഡ് നൽകാൻ
|
||||
- API പരാജയം വേഗത്തിൽ പിടിക്കാൻ `response.ok` ഉപയോഗിച്ച് പിഴവുകൾ പരിശോധിക്കുന്നു
|
||||
- `async/await` ഉപയോഗിച്ച് അസിങ്ക്രണസ് പ്രവർത്തനങ്ങൾ ഡോക്യുമെന്റബിൾ രൂപത്തിൽ കൈകാര്യം ചെയ്യുന്നു
|
||||
- CO2 Signal API-വുമായുള്ള ഓതന്റിക്കേഷൻ `auth-token` ഹെഡർ വഴി നടത്തുന്നു
|
||||
- JSON മറുപടി ഡാറ്റ പാര്സ് ചെയ്ത് കാർബൺ തീവ്രത വിവരങ്ങൾ എടുക്കുന്നു
|
||||
- പല UI ഘടകങ്ങളിലും ചിട്ടപ്പെടുത്തിയ പരിസ്ഥിതി ഡാറ്റ അപ്ഡേറ്റുചെയ്യുന്നു
|
||||
- API കോളുകൾ പരാജയപ്പെടുമ്പോൾ ഉപയോക്തൃ സൗഹൃദപിഴവ് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു
|
||||
|
||||
**പ്രധാന മോഡേൺ ജാവാസ്ക്രിപ്റ്റ് തത്വങ്ങൾ ഈ ഫംഗ്ഷനിൽ കാണാം:**
|
||||
- ക്ലീൻ സ്ട്രിംഗ് ഫോർമാറ്റിംഗിനായി `${}` സിന്തക്സിൽ ടെംപ്ലേറ്റ് ലിറ്ററലുകൾ
|
||||
- പിഴവുകൾ കരുതുന്നതിനായി `try/catch` ബ്ലോക്കുകൾ
|
||||
- നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾ നിരീക്ഷിക്കാൻ `async/await` പാറ്റേൺ
|
||||
- API മറുപടിയിൽ നിന്നുള്ള പ്രത്യേക ഡാറ്റ എടുക്കാൻ ഒബ്ജക്ട് ഡിസ്ട്രക്ടറിംഗ്
|
||||
- ഒന്നിലധികം DOM മാനിപ്പുലേഷനുകൾക്കായി മെത്തഡ് ചെയിനിംഗ്
|
||||
|
||||
✅ ഈ ഫംഗ്ഷൻ പല വെബ് ഡെവലപ്പ്മെന്റ് തത്വങ്ങളും പ്രദർശിപ്പിക്കുന്നു - ബാഹ്യ സെർവറുകളുമായി സംവദിക്കൽ, ഓതന്റിക്കേഷൻ, ഡാറ്റ പ്രോസസ്സിംഗ്, ഇൻറർഫേസുകൾ അപ്ഡേറ്റ് ചെയ്യൽ, പിഴവുകൾ കരുതൽ എന്നിവ. പ്രൊഫഷണൽ ഡെവലപ്പർമാരുടെ അടിസ്ഥാന കഴിവുകൾ.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[API കോൾ ആരംഭിക്കുക] --> B[അഭ്യർത്ഥന നേടുക]
|
||||
B --> C{നെറ്റ്വർക്ക് വിജയകരമാണോ?}
|
||||
C -->|ഇല്ല| D[നെറ്റ്വർക്ക് പിശക്]
|
||||
C -->|അതെ| E{പ്രതികരണം ശരിയാണോ?}
|
||||
E -->|ഇല്ല| F[API പിശക്]
|
||||
E -->|അതെ| G[JSON പാഴ്സ് ചെയ്യുക]
|
||||
G --> H{ഡാറ്റ സാധുവാണോ?}
|
||||
H -->|ഇല്ല| I[ഡാറ്റ പിശക്]
|
||||
H -->|അതെ| J[UI അപ്ഡേറ്റ് ചെയ്യുക]
|
||||
|
||||
D --> K[പിശക് സന്ദേശം കാണിക്കുക]
|
||||
F --> K
|
||||
I --> K
|
||||
J --> L[ലോഡിംഗ് മറക്കുക]
|
||||
K --> L
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style J fill:#e8f5e8
|
||||
style K fill:#ffebee
|
||||
style L fill:#f3e5f5
|
||||
```
|
||||
### 🔄 **പഠന പരിശോധന**
|
||||
**സമ്പൂർണ്ണ സിസ്റ്റം മനസിലാക്കൽ**: മുഴുവൻ പ്രവാഹവും മനസ്സിലായുണ്ടെന്ന് സ്ഥിരീകരിക്കുക:
|
||||
- ✅ DOM റഫറൻസുകൾ എങ്ങനെ ജാവാസ്ക്രിപ്റ്റിന് ഇൻറർഫേസ് നിയന്ത്രിക്കാനുമാകുന്നു
|
||||
- ✅ ബ്രൗസർ സെഷനുകളിടയിൽ സ്ഥിരതയ്ക്ക് local storage എന്തുകൊണ്ട് നിർണ്ണായകമാണ്
|
||||
- ✅ എങ്ങനെ async/await API കോളുകൾ എളുപ്പത്തിൽ, എക്സ്റ്റൻഷൻ തടസ്സപ്പെടാതെ നടത്തുന്നു
|
||||
- ✅ API കോൾ പരാജയപ്പെട്ടപ്പോൾ എന്താകും; പിശകുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു
|
||||
- ✅ ഉപയോക്തൃ അനുഭവത്തിൽ ലോഡിംഗ് സ്റ്റേറ്റുകൾ, പിഴവ് സന്ദേശങ്ങൾ ഉൾപ്പെടുന്നതിന്റെ പ്രധാന്യം
|
||||
|
||||
🎉 **നിങ്ങൾ നേടിയെടുത്തത്:** ഇന്റർനെറ്റ് ബന്ധിപ്പിച്ചും യഥാർത്ഥ പരിസ്ഥിതി ഡാറ്റ സ്വീകരിക്കുന്ന,
|
||||
ഉപയോക്തൃ ക്രമീകരണങ്ങൾ സെഷനുകൾക്കിടയിൽ നിലനിർത്തുന്ന,
|
||||
പിഴവുകൾ gracefully കൈകാര്യം ചെയ്യുന്ന,
|
||||
നർത്തകമായ, പ്രൊഫഷണൽ യൂസർ അനുഭവം നൽകുന്ന ഒരു ബ്രൗസർ എക്സ്റ്റൻഷൻ നിർമിച്ചു.
|
||||
|
||||
നിങ്ങളുടെ പ്രവൃത്തി ചെക്ക് ചെയ്യാൻ `npm run build` ഓടിച്ച് ബ്രൗസറിൽ എക്സ്റ്റൻഷൻ റിഫ്രഷ് ചെയ്യുക. ഇനി നിങ്ങൾക്ക് പ്രായോഗികമായ ഒരു കാർബൺ ഫുട്പ്രിന്റ് ട്രാക്കർ ഉണ്ടായി. അടുത്ത പാഠം ഡൈനാമിക് ഐകൺ പ്രവർത്തനം ചേർക്കും.
|
||||
|
||||
---
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Agent മോഡ് ഉപയോഗിച്ച് താഴെ പറയുന്ന വെല്ലുവിളി പൂർത്തിയാക്കുക:
|
||||
**വിവരണം:** എറർ ഹാൻഡ്ലിംഗ് മെച്ചപ്പെടുത്തലുകളും ഉപയോക്തൃ അനുഭവ സവിശേഷതകളും ചേർത്തു ബ്രൗസർ എക്സ്റ്റൻഷൻ മെച്ചപ്പെടുത്തുക. API-കൾ, ലോക്കൽ സ്റ്റോറേജ്, DOM മാനിപ്പുലേഷൻ എന്നിവ ഇപ്പോൾ ഉപയോഗിക്കുന്ന ആധുനിക ജാവാസ്ക്രിപ്റ്റ് പാറ്റേണുകൾ ഉപയോഗിച്ച് ചെയ്യാൻ ഈ ചാലഞ്ച് സഹായിക്കും.
|
||||
|
||||
**പ്രോംപ്റ്റ്:** താഴെ പറയുന്ന സവിശേഷതകളുള്ള displayCarbonUsage ഫംഗ്ഷന്റെ മെച്ചപ്പെടുത്തിയ പതിപ്പ് ഉണ്ടാക്കുക: 1) ആഘാതകരമായ API കോൾഫെയില്യറുകൾക്കായി എക്സ്പോണൻഷ്യൽ ബാക്ക്ഓഫ് ഉപയോഗിച്ച് റീട്രൈ മെക്കാനിസം, 2) API കോൾ ചെയ്യുന്നതിനുമ മുൻപ്_REGION_ കോഡിന്റെ ഇൻപുട്ട് വെരിഫിക്കേഷൻ, 3) പ്രോഗ്രസ് സൂചിപ്പിക്കുന്ന ലോഡിംഗ് ആനിമേഷൻ, 4) API പ്രതികരവുകൾ localStorage-ലേക്ക് 30 മിനിറ്റുകൾക്കുള്ള കാലാവധി ടൈമ്സ്റ്റാമ്പിനൊപ്പം കാഷ് ചെയ്യൽ, 5) മുൻ API കോൾകളിൽ നിന്നുള്ള ചരിത്ര ഡാറ്റ പ്രദർശിപ്പിക്കുന്ന ഫീച്ചർ. ഫംഗ്ഷൻ പാരാമീറ്ററുകളും റിട്ടേൺ ടൈപ്പുകളും വിശദീകരിക്കുന്ന ടൈപ്പ്സ്ക്രിപ്റ്റ്-സ്റ്റൈൽ JSDoc കമന്റുകളും ചേർക്കുക.
|
||||
|
||||
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) സംബന്ധിച്ച് കൂടുതൽ അറിയൂ.
|
||||
|
||||
## 🚀 ചാലഞ്ച്
|
||||
|
||||
ബ്രൗസർ അടിസ്ഥാനമാക്കിയുള്ള APIs-ന്റെ സമ്പത്ത് അന്വേഷിച്ച് നിങ്ങളുടെ API പഠന പരിധി വിപുലീകരിക്കുക. താഴെയുള്ള ബ്രൗസർ APIs-ലിലുള്ള ഒരു API തിരഞ്ഞെടുക്കി സാങ്കേതിക പ്രദർശനം നിർമ്മിക്കുക:
|
||||
|
||||
- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - ഉപയോക്താവിന്റെ നിലവിലെ സ്ഥലം ലഭിക്കുക
|
||||
- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - ഡെസ്ക്ടോപ്പ് നോട്ടിഫിക്കേഷനുകൾ അയയ്ക്കുക
|
||||
- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - ഇന്ററാക്ടീവ് ഡ്രാഗ് ഇന്റർഫേസുകൾ സൃഷ്ടിക്കുക
|
||||
- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - അവലംബമുള്ള ലോക്കൽ സ്റ്റോറേജ് സാങ്കേതികവിദ്യകൾ
|
||||
- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequest-ന്റെ ആധുനിക പകരം
|
||||
|
||||
**ആശയങ്ങൾ പരിശോധിക്കുക:**
|
||||
- ഈ API യഥാർത്ഥ ലോക പ്രശ്നങ്ങൾ എങ്ങനെ പരിഹരിക്കുന്നു?
|
||||
- API പിഴവുകളും അതിരുകളും എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു?
|
||||
- ഈ API ഉപയോഗിക്കുന്നപ്പോൾ ഏതു സുരക്ഷാ പരിഗണനകൾ ഉണ്ട്?
|
||||
- വ്യത്യസ്ത ബ്രൗസറുകളിൽ ഈ API എത്രത്തോളം പിന്തുണയ്ക്കുന്നുണ്ട്?
|
||||
|
||||
നിങ്ങളുടെ ഗവേഷണത്തിന് ശേഷം, ഒരു API വികസകർക്കുള്ള സൗഹൃദവും വിശ്വസനീയവുമായ ലക്ഷണങ്ങൾ തിരിച്ചറിയുക.
|
||||
|
||||
## ലൈവ് ക്ലാസ് ശേഷം ക്വിസ്
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/26)
|
||||
|
||||
## റിവ്യൂ & സ്വയം പഠനം
|
||||
|
||||
ഈ പാഠത്തിൽ LocalStorage, APIs എന്നിവയെ കുറിച്ച് നിങ്ങൾ പഠിച്ചു, പ്രൊഫഷണൽ വെബ് ഡെവലപ്പർക്കും വളരെ പ്രയോജനപ്പെടുന്ന വിഷയങ്ങളാണ്. ഈ രണ്ട് കാരികളും എങ്ങനെ ചേർന്ന് പ്രവർത്തിക്കുന്നു എന്ന് ചിന്തിക്കൂ. API ഉപയോഗിക്കുന്ന ഒരു വെബ് സൈറ്റ് ആർക്കിടെക്ചർ എങ്ങനെ രൂപകൽപ്പന ചെയ്യുമെന്നു വിചാരിക്കൂ.
|
||||
|
||||
### ⚡ **അടുത്ത 5 മിനിറ്റിൽ ചെയ്യാൻ കഴിയുന്നതു**
|
||||
- [ ] DevTools Application ടാബ് തുറന്ന് ഏതെങ്കിലും വെബ്സൈറ്റിലെ localStorage പരിശോധിക്കുക
|
||||
- [ ] ഒരു ലളിതമായ HTML ഫോറം സൃഷ്ടിച്ച് ബ്രൗസറിലെ ഫോം വാലിഡേഷൻ പരീക്ഷിക്കുക
|
||||
- [ ] localStorage ഉപയോഗിച്ച് ഡാറ്റ സംഭരിച്ചു പുനരുദ്ധരിപ്പിക്കുക ബ്രൗസർ കൺസോളിൽ
|
||||
- [ ] നെറ്റ്വർക്കിനുള്ള ടാബ് വഴി സമർപ്പിക്കുന്ന ഫോം ഡാറ്റ പരിശോധിക്കുക
|
||||
|
||||
### 🎯 **ഈ മണിക്കൂറിൽ നേടാനാകുന്നതു**
|
||||
- [ ] പോസ്റ്റ്-ലക്ചർ ക്വിസ് പൂരിപ്പിച്ച് ഫോം ഹാൻഡ്ലിംഗ് ആശയങ്ങൾ മനസിലാക്കുക
|
||||
- [ ] ഉപയോക്തൃ മുൻഗണനകൾ സേവ് ചെയ്യുന്ന ബ്രൗസർ എക്സ്റ്റൻഷൻ ഫോർം നിർമ്മിക്കുക
|
||||
- [ ] ഉപകാരപ്രദമായ പിഴവു സന്ദേശങ്ങളോട് ക്ലയന്റ്-സൈഡ് ഫോം വാലിഡേഷൻ നടപ്പിലാക്കുക
|
||||
- [ ] ബ്രൗസർ എക്സ്റ്റൻഷൻ ഡാറ്റ സ്ഥിരപ്പെടുത്തുന്നതിനായി chrome.storage API ഉപയോഗിച്ച് പരിചയപ്പെടുക
|
||||
- [ ] സേവ് ചെയ്ത ഉപയോക്തൃ ക്രമീകരണങ്ങളെ പ്രതികരിക്കുന്ന ഉപയോക്തൃ ഇന്റർഫേയ്സ് സൃഷ്ടിക്കുക
|
||||
|
||||
### 📅 **നിങ്ങളുടെ ആഴ്ചക്കാല എക്സ്റ്റൻഷൻ നിർമ്മാണം**
|
||||
- [ ] ഫുൾ-ഫീച്ചർ ചെയ്ത ബ്രൗസർ എക്സ്റ്റൻഷൻ ഫോർം ഫംഗ്ഷണാലിറ്റി സഹിതം പൂർത്തിയാക്കുക
|
||||
- [ ] വിവിധ സ്റ്റോറേജ് ഓപ്ഷനുകൾ അഭ്യസിക്കുക: local, sync, session storage
|
||||
- [ ] ഓട്ടോകംപ്ലീറ്റ്, വാലിഡേഷൻ പോലുള്ള ഉയർന്ന തലത്തിലുള്ള ഫോം ഫീച്ചറുകൾ നടപ്പിലാക്കുക
|
||||
- [ ] ഉപയോക്തൃ ഡാറ്റയ്ക്ക് ഇറക്കുമതി/റഫായി ചുമത്തൽ ഫീച്ചറുകൾ ചേർക്കുക
|
||||
- [ ] വിവിധ ബ്രൗസറുകളിൽ എക്സ്റ്റൻഷൻ നന്നായി പരീക്ഷിക്കുക
|
||||
- [ ] എക്സ്റ്റൻഷന്റെ ഉപയോക്തൃ അനുഭവവും പിഴവ് കൈകാര്യംവും മെച്ചപ്പെടുത്തുക
|
||||
|
||||
### 🌟 **നിങ്ങളുടെ മാസം മുഴുവൻ വെബ് API മാസ്റ്ററി**
|
||||
- [ ] വിവിധ ബ്രൗസർ സ്റ്റോറേജ് APIs ഉപയോഗിച്ച് സമ്പീഠമായ അപ്ലിക്കേഷൻസ് നിർമ്മിക്കുക
|
||||
- [ ] ഓഫ്ലൈൻ-ഫസ്റ്റ് വികസന പാറ്റേണുകൾ പഠിക്കുക
|
||||
- [ ] ഡാറ്റ സ്ഥിരതയുള്ള ഓപ്പൺ സോഴ്സ് പ്രോജക്ടുകളിൽ സംഭാവന നൽകുക
|
||||
- [ ] പ്രൈവസി-കേന്ദ്രികമായ ഡവലപ്പ്മെന്റ്, GDPR അനുയോജ്യതയിൽ വിദഗ്ധത വികസിപ്പിക്കുക
|
||||
- [ ] ഫോം ഹാൻഡ്ലിംഗ്, ഡാറ്റ മാനേജ്മെന്റ് සඳහා പുനരുപയോഗിക്കാവുന്ന ലൈബ്രറികൾ സൃഷ്ടിക്കുക
|
||||
- [ ] വെബ് API-കൾക്കെന്തും എക്സ്റ്റൻഷൻ ഡവലപ്പ്മെന്റ് സംബന്ധിച്ച അറിവുകൾ പങ്കിടുക
|
||||
|
||||
## 🎯 നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ഡവലപ്പ്മെന്റ് മാസ്റ്ററി ടൈംലൈൻ
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title API ഇंटीഗ്രേഷൻ & സ്റ്റോറേജ് പഠന പുരോഗതി
|
||||
|
||||
section DOM അടിസ്ഥാനങ്ങൾ (15 മിനിട്ടുകൾ)
|
||||
ഘടക റഫറൻസുകൾ: querySelector ക്വാളിറ്റി
|
||||
: ഇവന്റ് ലിസ്നർ സെറ്റപ്പ്
|
||||
: സ്റ്റേറ്റ് മാനേജ്മെന്റ് അടിസ്ഥാനങ്ങൾ
|
||||
|
||||
section ലോക്കൽ സ്റ്റോറേജ് (20 മിനിട്ടുകൾ)
|
||||
ഡാറ്റ സ്ഥിരത: കീ-വാല്യൂ സ്റ്റോറേജ്
|
||||
: സെഷൻ മാനേജ്മെന്റ്
|
||||
: ഉപയോക്തൃ മുൻഗണന കൈകാര്യം
|
||||
: സ്റ്റോറേജ് പരിശോധന ഉപകരണങ്ങൾ
|
||||
|
||||
section ഫോം കൈകാര്യം (25 മിനിട്ടുകൾ)
|
||||
ഉപയോക്തൃ ഇൻപുട്ട്: ഫോം സ്ഥിരീകരണം
|
||||
: ഇവന്റ് തടയല്
|
||||
: ഡാറ്റ എക്സ്ട്രാക്ഷൻ
|
||||
: UI സ്റ്റേറ്റ് മാറ്റങ്ങൾ
|
||||
|
||||
section API ഇंटीഗ്രേഷൻ (35 മിനിറ്റുകൾ)
|
||||
പുറത്തുള്ള സംവരണം: HTTP അഭ്യർത്ഥനകൾ
|
||||
: സ്ഥിരീകരണ മാതൃകകൾ
|
||||
: JSON ഡാറ്റ പാഴ്സ് ചെയ്യല്
|
||||
: പ്രതികരണ കൈകാര്യം
|
||||
|
||||
section അസിങ്ക്രൺ പ്രോഗ്രാമിംഗ് (40 മിനിട്ടുകൾ)
|
||||
ആധുനിക ജാവാസ്ക്രിപ്റ്റ്: പ്രോമിസ് കൈകാര്യം
|
||||
: അസിങ്ക്/അവെയിറ്റ് മാതൃകകൾ
|
||||
: പിശക് മാനേജ്മെന്റ്
|
||||
: തടസ്സമില്ലാത്ത പ്രവർത്തനങ്ങൾ
|
||||
|
||||
section പിശക് കൈകാര്യം (30 മിനിട്ടുകൾ)
|
||||
ദൃഢമായ ആപ്ലിക്കേഷനുകൾ: ട്രൈ/കാച്ച് ബ്ലോക്കുകൾ
|
||||
: ഉപയോക്തൃ സൗഹൃദ സന്ദേശങ്ങൾ
|
||||
: മനോഹരമായ degragation
|
||||
: ഡീബഗിംഗ് സാങ്കേതികതകൾ
|
||||
|
||||
section ഉയർന്ന മാതൃകകൾ (1 ആഴ്ച)
|
||||
പ്രൊഫഷണൽ വികസനം: ക്യാഷിംഗ് തന്ത്രങ്ങൾ
|
||||
: നിരക്ക് പരിമിതികരണം
|
||||
: റിറ്റ്രൈ സംവിധാനം
|
||||
: പ്രകടന മെച്ചപ്പെടുത്തൽ
|
||||
|
||||
section പ്രൊഡക്ഷൻ നൈപുണ്യങ്ങൾ (1 മാസം)
|
||||
എന്റർപ്രൈസ് സവിശേഷതകൾ: സുരക്ഷിതത്വം മികച്ച പ്രവൃത്തികൾ
|
||||
: API പതിപ്പ് നിയന്ത്രണം
|
||||
: നിരീക്ഷണം & ലോഗിങ്
|
||||
: സ്കേബിള് ആർകിടെക്ചർ
|
||||
```
|
||||
### 🛠️ നിങ്ങളുടെ ഫുൾ-സ്റ്റാക്ക് ഡെവലപ്പ്മെന്റ് ടൂൾകിറ്റ് സംഗ്രഹം
|
||||
|
||||
ഈ പാഠം കഴിഞ്ഞ് നിങ്ങൾക്ക് ഇപ്പോൾ:
|
||||
|
||||
- **DOM മാടറിംഗ്**: സമ്യകമായ എലമെന്റ് ലക്ഷ്യമിടലും മാനിപ്പുലേഷനും
|
||||
- **സ്റ്റോറേജ് വിദഗ്ധത**: localStorage ഉപയോഗിച്ച് സ്ഥിരമായ ഡാറ്റ കൈകാര്യം ചെയ്യൽ
|
||||
- **API സംയോജനം**: റിയൽ ടൈം ഡാറ്റ ഫെട്ടിങ്, ഓതെൻറിക്കേഷൻ
|
||||
- **അസിങ്ക്രോണസ് പ്രോഗ്രാമിംഗ്**: ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ബ്ലോക്ക് ചെയ്യാത്ത പ്രവർത്തികൾ
|
||||
- **എറർ ഹാൻഡ്ലിംഗ്**: പരാജയങ്ങളെ സൗമ്യമായി കൈകാര്യം ചെയ്യുന്ന ശക്തമായ അപ്ലിക്കേഷനുകൾ
|
||||
- **ഉപയോക്തൃ അനുഭവം**: ലോഡിംഗ് സ്റ്റേറ്റുകൾ, വാലിഡേഷൻ, സുന്ദരമായ ഇടപെടലുകൾ
|
||||
- **ആധുനിക പാറ്റേണുകൾ**: fetch API, async/await, ES6+ ഫീച്ചറുകൾ
|
||||
|
||||
**പ്രൊഫഷണൽ കഴിവുകൾ**: നിങ്ങൾ നടപ്പിലാക്കിയ പാറ്റേണുകൾ ഉപയോഗിച്ചിരിക്കുന്നത്:
|
||||
- **വെബ് അപ്ലിക്കേഷനുകൾ**: ഒറ്റ-പേജ് ആപ്പുകൾ, ബാഹ്യ ഡാറ്റ ഉറവിടങ്ങൾ
|
||||
- **മൊബൈൽ ഡെവലപ്പ്മെന്റ്**: ഓഫ്ലൈൻ കഴിവുള്ള API-നിർമ്മിത ആപ്പുകൾ
|
||||
- **ഡെസ്ക്ടോപ്പ് സോഫ്റ്റ്വെയർ**: Electron ആപ്പുകൾ സ്ഥിരമായ സ്റ്റോറേജ് ഉപയോഗിച്ച്
|
||||
- **എൻറ്റർപ്രൈസ് സിസ്റ്റങ്ങൾ**: ഓതെൻറിക്കേഷൻ, കാഷിംഗ്, പിഴവ് കൈകാര്യം
|
||||
- **ആധുനിക ഫ്രെയിംവർക്കുകൾ**: React/Vue/Angular ഡാറ്റ മാനേജ്മെന്റ് പാറ്റേണുകൾ
|
||||
|
||||
**മുകളില് നിന്ന് അടുത്തതും:** കാഷിംഗ് രണനിയമങ്ങൾ, റിയൽ-ടൈം വെബ്സോക്കറ്റ് കണക്ഷനുകൾ, സങ്കീർണ സ്റ്റേറ്റ് മാനേജ്മെന്റ് പോലുള്ള മുൻനിര വിഷയങ്ങൾ അന്വേഷിക്കാൻ നിങ്ങൾ തയ്യാറാണ്!
|
||||
|
||||
## നിയോഗം
|
||||
|
||||
[Adopt an API](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**തള്ളിപ്പറച്ചിൽ**:
|
||||
ഈ ദസ്താവೇಜ് AI തർജ്ജമ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്കായി ശ്രമിക്കുന്നിട്ടും, യാന്ത്രിക തർജ്ജമയിൽ പിശകുകളോ തികച്ചും ശരിയല്ലാത്തവരോ ഉണ്ടാകാവുന്നതാണ്. നേരിട്ടുള്ള ഭാഷയിലെ മൗലിക ദസ്താവേജിനെ അധികാരപരമായ ഉറവിടമായി കാണണം. പ്രധാന വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജമ ശുപാർശ ചെയ്യുന്നു. ഈ തർജ്ജമ ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,109 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "25b8d28b8531352d4eb67291fd7824c4",
|
||||
"translation_date": "2026-01-08T15:18:16+00:00",
|
||||
"source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# API സ്വീകരിക്കുക
|
||||
|
||||
## അവലോകനം
|
||||
|
||||
APIകൾ സൃഷ്ടിപരമായ വെബ് വികസനത്തിന് അവസരങ്ങളുടെ അനന്ത ശൃംഖല തുറക്കുന്നു! ഈ അസൈൻമെന്റിൽ, നിങ്ങൾ ഒരു പുറംവിഭാഗ API തിരഞ്ഞെടുക്കുകയും ഒരു-browser-extension നിർമ്മിക്കുകയും ചെയ്യും, അത് യാഥാർത്ഥ്യ പ്രശ്നങ്ങൾ പരിഹരിക്കുകയോ ഉപയോക്താക്കൾക്ക് പ്രധാനമേയിട്ടുള്ള പ്രവർത്തനങ്ങൾ നൽകുകയോ ചെയ്യും.
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### ഘടകം 1: നിങ്ങളുടെ API തിരഞ്ഞെടുക്കുക
|
||||
ഈ ക്യൂറേറ്റഡ് [സെലക്ഷൻ: സൗജന്യ പൊതു APIകളുടെ പട്ടിക](https://github.com/public-apis/public-apis) ലിസ്റ്റിൽ നിന്നു ഒരു API തിരഞ്ഞെടുക്കുക. ഈ വിഭാഗങ്ങൾ പരിഗണിക്കുക:
|
||||
|
||||
**ആരംഭകർക്ക് പ്രിയപ്പെട്ട ഓപ്ഷനുകൾ:**
|
||||
- **വിനോദം**: [Dog CEO API](https://dog.ceo/dog-api/) - യാദൃച്ഛിക നായ ചിത്രങ്ങൾക്കായി
|
||||
- **വേളാമാനം**: [OpenWeatherMap](https://openweathermap.org/api) - ഇപ്പോഴത്തെ കാലാവസ്ഥാ ഡാറ്റക്കായി
|
||||
- **കോട്ട്സുകൾ**: [Quotable API](https://quotable.io/) - പ്രചോദനാത്മകമായി ഉള്ള ഉദ്ധരണികൾക്കായി
|
||||
- **വാർത്തകൾ**: [NewsAPI](https://newsapi.org/) - നിലവിലുള്ള ഹെഡ്ലൈനുകൾക്കായി
|
||||
- **വ്യാസങ്ങളുള്ള വസ്തുതകൾ**: [Numbers API](http://numbersapi.com/) - രസകരമായ സംഖ്യാശാസ്ത്ര വാസ്തവങ്ങൾക്കായി
|
||||
|
||||
### ഘടകം 2: നിങ്ങളുടെ എക്സ്ടൻഷൻ പദ്ധതീകരിക്കുക
|
||||
കോഡ് എഴുതാൻ മുമ്പാകെ, ഈ പദ്ധതീകരണ ചോദ്യങ്ങൾ ഉത്തരം നൽകുക:
|
||||
- നിങ്ങളുടെ എക്സ്ടൻഷൻ എതൊരു പ്രശ്നം പരിഹരിക്കുന്നു?
|
||||
- നിങ്ങളുടെ ലക്ഷ്യ ഉപയോക്താവ് ആരെ ആണ്?
|
||||
- നിങ്ങള് ഏതെന്ത് ഡാറ്റ ലോക്കൽ സ്റ്റോറേജിൽ സൂക്ഷിക്കും?
|
||||
- API പരാജയങ്ങളും നിരക്ക് പരിധികളും എങ്ങനെ കൈകാര്യം ചെയ്യും?
|
||||
|
||||
### ഘടകം 3: നിങ്ങളുടെ എക്സ്ടൻഷൻ നിർമ്മിക്കുക
|
||||
നിങ്ങളുടെ എക്സ്ടൻഷനിൽ ഉൾപ്പെടണം:
|
||||
|
||||
**ആവശ്യമായ സവിശേഷതകൾ:**
|
||||
- ആവശ്യമായ API പാരാമീറ്ററുകൾക്ക് ഫോം ഇൻപുട്ടുകൾ
|
||||
- ശരിയായ പിശക് കൈകാര്യംചെയ്യലോടുകൂടിയ API സംയോജനം
|
||||
- ഉപയോക്തൃ സ്വാതന്ത്ര്യങ്ങൾക്കോ API കീസിനോ വേണ്ടി ലോക്കൽ സ്റ്റോറേജ്
|
||||
- വൃത്തിയുള്ള, പ്രതികരണശീലമുള്ള ഉപയോക്തൃ ഇന്റർഫേസ്
|
||||
- ലോഡിംഗ് സ്റ്റേറ്റുകളും ഉപയോക്തൃ പ്രതികരണവും
|
||||
|
||||
**കോഡ് ആവശ്യങ്ങൾ:**
|
||||
- ആധുനിക ജാവാസ്ക്രിപ്റ്റ് (ES6+) ഫീച്ചറുകൾ ഉപയോഗിക്കുക
|
||||
- API വിളികളിൽ async/await നടപ്പിലാക്കുക
|
||||
- try/catch ബ്ലോക്കുകളോടെ ശരിയായ പിശക് കൈകാര്യംചെയ്യൽ ഉൾപ്പെടുത്തുക
|
||||
- നിങ്ങളുടെ കോഡ് വിശദീകരിക്കുന്ന പ്രസക്തമായ കമന്റുകൾ ചേർക്കുക
|
||||
- സ്ഥിരതയുള്ള കോഡ് ഫോർമാറ്റിംഗ് പാലിക്കുക
|
||||
|
||||
### ഘടകം 4: ടെസ്റ്റ് ചെയ്ത് മെച്ചപ്പെടുത്തുക
|
||||
- വ്യത്യസ്ത ഇൻപുട്ടുകളുമായി നിങ്ങളുടെ എക്സ്ടൻഷൻ ടെസ്റ്റുചെയ്യുക
|
||||
- അതിരുകൾ കൈകാര്യംചെയ്യുക (ഇന്റർനെറ്റ് ഇല്ല, അസാധുവായ API പ്രതികരണങ്ങൾ)
|
||||
- ബ്രൗസർ പുനരാരംഭിച്ച ശേഷം എക്സ്ടൻഷൻ പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുക
|
||||
- ഉപയോക്തൃ സുഹൃത്തായ പിശക് സന്ദേശങ്ങൾ ചേർക്കുക
|
||||
|
||||
## ബോണസ് വെല്ലുവിളികൾ
|
||||
|
||||
നിങ്ങളുടെ എക്സ്ടൻഷൻ അടുത്ത നിരത്തിലേക്ക് കൊണ്ടുപോകുക:
|
||||
- സമൃദ്ധമായ പ്രവർത്തനത്തിന് മൾട്ടി API എൻഡ്പോയിന്റുകൾ ചേർക്കുക
|
||||
- API വിളികൾ കുറക്കാൻ ഡാറ്റ കാഷിംഗ് നടപ്പിലാക്കുക
|
||||
- സാധാരണ പ്രവർത്തനങ്ങൾക്ക് കീബോർഡ് ഷോർട്ട്കട്ടുകൾ സൃഷ്ടിക്കുക
|
||||
- ഡാറ്റ എക്സ്പോർട്ട്/ഇംപോർട്ട് ഫീച്ചറുകൾ ചേർക്കുക
|
||||
- ഉപയോക്തൃ ഇഷ്ടാനുസൃത ഓപ്ഷനുകൾ നടപ്പിലാക്കുക
|
||||
|
||||
## സമർപ്പണ ആവശ്യകതകൾ
|
||||
|
||||
1. **സെലക്ട് ചെയ്ത API-യുമായി വിജയകരമായി സംയോജിപ്പിച്ച പ്രവർത്തനക്ഷമമായ ബ്രൗസർ എക്സ്ടൻഷൻ**
|
||||
2. **README ഫയൽ**, ഇത് വിശദീകരിക്കുന്നു:
|
||||
- ഏത് API തിരഞ്ഞെടുത്തുവെന്നും കാരണം
|
||||
- എങ്ങനെ ഇൻസ്റ്റാൾ ചെയ്യുക, എങ്ങനെ ഉപയോഗിക്കുക എന്ന്
|
||||
- ഏതെങ്കിലും API കീകൾ അല്ലെങ്കിൽ ക്രമീകരണങ്ങൾ ആവശ്യമാണോ
|
||||
- നിങ്ങളുടെ എക്സ്ടൻഷന്റെ പ്രവർത്തനത്തിൻറെ സ്ക്രീൻഷോട്ടുകൾ
|
||||
3. **വൃത്തിയുള്ള, കമന്റ് ചേർത്ത കോഡ്** ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ആചാരങ്ങൾ പാലിച്ച്
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| മാനദണ്ഡം | ഉത്തമം (90-100%) | പ്രാവീണ്യം (80-89%) | വികസിപ്പിക്കുകയാണ് (70-79%) | പ്രാരംഭം (60-69%) |
|
||||
|----------|---------------------|---------------------|---------------------|--------------------|
|
||||
| **API സംയോജനം** | പരിപൂർണ്ണ API സംയോജനം സമഗ്ര പിശക് കൈകാര്യംചെയ്യലിനും അതിരുകൾ നിയന്ത്രണത്തിനും | സഹജമായ പിശക് കൈകാര്യം ചേരുകകൂടിയുള്ള വിജയകരമായ API സംയോജനം | API പ്രവർത്തിക്കുന്നുണ്ടെങ്കിലും പിശക് കൈകാര്യംചെയ്യൽ കുറവാണ് | API സംയോജനം ഗൗരതമയമായ പ്രശ്നങ്ങളുണ്ട് |
|
||||
| **കോഡ് ഗുണമേന്മ** | വൃത്തിയുള്ള, നന്നായി കമന്റ് ചേർത്ത ആധുനിക ജാവാസ്ക്രിപ്റ്റ്, മികച്ച ആചാരങ്ങൾ പാലിച്ച് | ഉചിതമായ കമന്റുകളോടെയുള്ള നല്ല കോഡ് ഘടന | കോഡ് പ്രവർത്തിക്കുന്നുണ്ടെങ്കിലും മികച്ച ഘടന ആവശ്യം | പൊതുവെ പിഴച്ച കോഡ്, കുറഞ്ഞ കമന്റുകളോടെ |
|
||||
| **ഉപയോക്തൃ അനുഭവം** | ഉന്നത ഗുണമുള്ള ഇന്റർഫേസ്, മികച്ച ലോഡിംഗ് സ്റ്റേറ്റുകളും ഉപയോക്തൃ പ്രതികരണവും | അടിസ്ഥാന ഉപഭോക്തൃ പ്രതികരണമുള്ള നല്ല ഇന്റർഫേസ് | മിതമായ പ്രവർത്തനത്തോടെ അടിസ്ഥാന ഇന്റർഫേസ് | വൃഥാ അനുഭവം, ആശയക്കുഴപ്പം സൃഷ്ടിക്കുന്ന ഇന്റർഫേസ് |
|
||||
| **ലോക്കൽ സ്റ്റോറേജ്** | ഡാറ്റ സ്ഥിരീകരണവും മാനേജുമെന്റും ഉള്ള സങ്കീർണ്ണ ലോക്കൽ സ്റ്റോറേജ് ഉപയോഗം | പ്രധാന സവിശേഷതകൾക്കായി ശരിയായ ലോക്കൽ സ്റ്റോറേജ് നടപ്പാക്കൽ | അടിസ്ഥാന തലത്തിലുള്ള ലോക്കൽ സ്റ്റോറേജ് നടപ്പിലാക്കൽ | ലളിതം അല്ലെങ്കിൽ തെറ്റായ ലോക്കൽ സ്റ്റോറേജ് ഉപയോഗം |
|
||||
| **ഡോക്ക്യുമെന്റേഷൻ** | സെറ്റ് അപ്പ് നിർദ്ദേശങ്ങളും സ്ക്രീൻഷോട്ടുകളുമായുള്ള സമഗ്ര README | പ്രധാന ആവശ്യങ്ങൾ ഉൾക്കൊള്ളുന്ന നല്ല ഡോക്ക്യുമെന്റേഷൻ | ചില വിശദാംശങ്ങൾ ഇല്ലാത്ത അടിസ്ഥാന ഡോക്ക്യുമെന്റേഷൻ | വൃഥാ അല്ലെങ്കിൽ ഡോക്ക്യുമെന്റേഷൻ ഇല്ല |
|
||||
|
||||
## തുടങ്ങാനുള്ള ടിപ്പുകൾ
|
||||
|
||||
1. **സരളമായി തുടങ്ങുക**: സങ്കീർണ്ണമായ പ്രാമാണീകരണം വേണ്ടാത്ത API തിരഞ്ഞെടുക്കുക
|
||||
2. **ഡോക്യുമെന്റ് വായിക്കുക**: തിരഞ്ഞെടുക്കപ്പെട്ട APIയുടെ എൻഡ്പോയിന്റുകളും പ്രതികരണങ്ങളും വ്യക്തമായി മനസിലാക്കുക
|
||||
3. **UI പദ്ധതി നിർമ്മിക്കുക**: കോഡ് തുടങ്ങുന്നതിന് മുമ്പായി നിങ്ങളുടെ എക്സ്ടൻഷൻ ഇന്റർഫേസ് രൂപരേഖ ചെയ്യുക
|
||||
4. **നിരന്തരമായി ടെസ്റ്റ് ചെയ്യുക**: ഘടകങ്ങൾ ചേർക്കുമ്പോൾ സ്ഥിരമായി ടെസ്റ്റ് ചെയ്യുക
|
||||
5. **പിശകുകൾ കൈകാര്യംചെയ്യുക**: API വിളികൾ പരാജയപ്പെടാമെന്നു കരുതുകയും അനുയോജ്യമായി തയ്യാറാക്കുക
|
||||
|
||||
## ഉപകരണം
|
||||
|
||||
- [Browser Extension Documentation](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
|
||||
- [Fetch API Guide](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
|
||||
- [Local Storage Tutorial](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
|
||||
- [JSON Parsing and Handling](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)
|
||||
|
||||
പ്രയോജനപ്രദവും സൃഷ്ടിപരവുമായ ഒരു വസ്തു നിർമ്മിച്ച് സന്തോഷിക്കുക! 🚀
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസാധുത**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിക്കുന്നതിനിടയിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ ചില പിശകുകളോ അസാധുതകളോ ഉണ്ടായേക്കാമെന്ന് ദയവായി മനസിലാക്കുക. അതിന്റെ ഭാഷയിൽ ഉള്ള മൊഴിമൂല രേഖ തന്നെ അവകാശഭരണ രേഖയായി കണക്കാക്കപ്പെടണം. പ്രധാനമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനുഷിക വിവർത്തനം നിർദേശിച്ചിരിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽനിന്നുള്ള തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാനഭേദങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,109 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
||||
"translation_date": "2026-01-08T15:33:19+00:00",
|
||||
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# പ്രകടനത്തിനായി ഒരു സൈറ്റ് വിശകലനം ചെയ്യുക
|
||||
|
||||
## അസൈൻമെന്റ് അവലോകനം
|
||||
|
||||
പ്രകടന വിശകലനം ആധുനിക വെബ് ഡെവലപ്പർമാർക്കുള്ള ഒരു നിർണ്ണായക കഴിവാണ്. ഈ അസൈൻമെന്റിൽ, നിങ്ങൾ ബ്രൗസർ അടിസ്ഥാനത്തിലുള്ള ഉപകരണങ്ങളും തൃശ്ചര സേവനങ്ങളും ഉപയോഗിച്ച് ബോട്ടിൽനെക്കുകൾ കണ്ടെത്തുകയും ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ സമർപ്പിക്കുകയും ചെയ്യുന്ന ഒരു യഥാർത്ഥ വെബ്സൈറ്റിന്റെ സമഗ്ര പ്രകടന ഓഡിറ്റ് നടത്തും.
|
||||
|
||||
വെബ്ബ് പ്രകടന സിദ്ധാന്തങ്ങളെ നിങ്ങൾ മനസ്സിലാക്കിയതും പ്രൊഫഷണൽ വിശകലന ഉപകരണങ്ങൾ ഫലപ്രദമായി ഉപയോഗിക്കുന്ന കഴിവും മുന്നോട്ട് വച്ച സവിശേഷ പ്രവർത്തന റിപ്പോർട്ടാണ് നിങ്ങൾ നൽകേണ്ടത്.
|
||||
|
||||
## അസൈൻമെന്റ് നിർദ്ദേശങ്ങൾ
|
||||
|
||||
**ഒരു വെബ്സൈറ്റ് തിരഞ്ഞെടുക്കുക** വിശകലനത്തിന് - താഴെയുള്ള ഓപ്ഷനുകളിൽ ഒരു തിരഞ്ഞെടുക്കുക:
|
||||
- നിങ്ങൾ സ്ഥിരമായി ഉപയോഗിക്കുന്ന ഒരു ജനപ്രിയ വെബ്സൈറ്റ് (ന്യൂസ് സൈറ്റ്, സോഷ്യൽ മീഡിയ, ഇ-കൊമേഴ്സ്)
|
||||
- ഒരു ഓപ്പൺ-സോഴ്സ് പ്രോജക്റ്റ് വെബ്സൈറ്റ് (GitHub പേജുകൾ, ഡോക്യുമെന്റേഷൻ സൈറ്റുകൾ)
|
||||
- ഒരു പ്രാദേശിക ബിസിനസ്സ് വെബ്സൈറ്റ് അല്ലെങ്കിൽ പോർട്ട്ഫോളിയോ സൈറ്റ്
|
||||
- നിങ്ങളുടെ സ്വന്തം പ്രോജക്റ്റ് അല്ലെങ്കിൽ മുൻപത്തെ കോഴ്സ് വർക്ക്
|
||||
|
||||
**കൂടുതൽ ഉപകരണങ്ങൾ ഉപയോഗിച്ച് വിശകലനം നടത്തുക** കുറഞ്ഞത് മൂന്ന് വ്യത്യസ്ഥ കാഴ്ചപ്പാടുകൾ ഉപയോഗിച്ച്:
|
||||
- **ബ്രൗസർ ഡെവ്ടൂൾസ്** - Chrome/Edge Performance ടാബ് ഉപയോഗിച്ച് വിശദമായ പ്രൊഫൈലിംഗ് ചെയ്യുക
|
||||
- **ഓൺലൈൻ ഓഡിറ്റിംഗ് ഉപകരണങ്ങൾ** - Lighthouse, GTmetrix, അല്ലെങ്കിൽ WebPageTest ഉപയോഗിച്ച് ശ്രമിക്കുക
|
||||
- **നെറ്റ്വർക്ക് വിശകലനം** - റിസോഴ്സ് ലോഡിംഗ്, ഫയൽ വലുപ്പം, അഭ്യർത്ഥന പാറ്റേൺ പരിശോധിക്കുക
|
||||
|
||||
**നിങ്ങളുടെ കണ്ടെത്തൽ ഒരു സമഗ്ര റിപ്പോർട്ടിൽ രേഖപ്പെടുത്തുക**, ഇതിൽ ഉൾപ്പെടുത്തേണ്ടത്:
|
||||
|
||||
### പ്രകടന അളവുകൾ വിശകലനം
|
||||
- **ലോഡ് സമയ അളവുകൾ** പല ഉപകരണങ്ങളുടെയും കാഴ്ചപ്പാടുകളിൽ നിന്നുള്ളത്
|
||||
- **കോർ വെബ് വൈറ്റൽസ്** സ്കോറുകൾ (LCP, FID, CLS)യും അവയുടെ പാരാമീറ്ററും
|
||||
- **റിസോഴ്സ് വിഭജനം** ലോഡ് സമയത്തു ഏറ്റവും വളരെ സംഭാവന ചെയ്യുന്ന ആസ്തികൾ പ്രദർശിപ്പിക്കുന്നത്
|
||||
- **നെറ്റ്വർക്ക് വാട്ടർഫോൾ വിശകലനം** തടസ്സം സൃഷ്ടിക്കുന്ന റിസോഴ്സുകൾ തിരിച്ചറിയൽ
|
||||
|
||||
### പ്രശ്നങ്ങൾ തിരിച്ചറിയൽ
|
||||
- **നിശ്ചിത പ്രകടന ബോട്ടിൽനെക്കുകൾ** പിന്തുണയുള്ള ഡാറ്റസഹിതം
|
||||
- **മൂല കാരണ വിശകലനം** പ്രശ്നങ്ങൾ എന്തുകൊണ്ടാണ് സംഭവിക്കുന്നത് എന്ന് വിശദീകരിക്കുന്നു
|
||||
- **ഉപയോക്തൃ ബാധ വിലയിരുത്തൽ** പ്രശ്നങ്ങൾ യാഥാർത്ഥ്യ ഉപയോക്താക്കളെ എങ്ങനെയാണ് ബാധിക്കുന്നത്
|
||||
- **പ്രാധാന്യക്രമം** തീവ്രതയും പരിഹാരത്തിനുള്ള ബുദ്ധിമുട്ടും അടിസ്ഥാനമാക്കിയുള്ള പ്രശ്നങ്ങളുടെ ക്രമീകരണം
|
||||
|
||||
### ഒപ്റ്റിമൈസേഷൻ ശുപാർശകൾ
|
||||
- **നിശ്ചിതവും പ്രാബല്യവുമുള്ള മെച്ചപ്പെടുത്തലുകൾ** പ്രതീക്ഷിക്കുന്ന സ്വാധീനം
|
||||
- **പ്രതീഷ്ഠാപന തന്ത്രങ്ങൾ** നിർദേശിച്ച മാറ്റങ്ങൾക്ക്
|
||||
- **ആധുനിക മികച്ച പാരമ്പര്യങ്ങൾ** (lazy loading, compression എന്നിവ പോലുള്ളവ)
|
||||
- **തുടർന്നു പ്രവർത്തിക്കുന്ന പ്രകടന നിരീക്ഷണത്തിന് ഉപകരണങ്ങളും സാങ്കേതികവിദ്യകളും**
|
||||
|
||||
## ഗവേഷണ ആവശ്യകതകൾ
|
||||
|
||||
**ബ്രൗസർ ഉപകരണങ്ങളിൽ മാത്രം ആശ്രയിക്കരുത്** - നിങ്ങളുടെ വിശകലനം വികസിപ്പിക്കുക:
|
||||
|
||||
**മൂന്നാംകക്ഷി ഓഡിറ്റിംഗ് സേവനങ്ങൾ:**
|
||||
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - സമഗ്ര ഓഡിറ്റുകൾ
|
||||
- [GTmetrix](https://gtmetrix.com/) - പ്രകടനവും ഒപ്റ്റിമൈസേഷനും സംബന്ധിച്ച洞察ങ്ങൾ
|
||||
- [WebPageTest](https://www.webpagetest.org/) - യഥാർഥ ലോക പരീക്ഷണ സാഹചര്യങ്ങൾ
|
||||
- [Pingdom](https://tools.pingdom.com/) - ആഗോള പ്രകടന നിരീക്ഷണം
|
||||
|
||||
**പ്രത്യേകമായ വിശകലന ഉപകരണങ്ങൾ:**
|
||||
- [Bundle Analyzer](https://bundlephobia.com/) - JavaScript ബUNDLE വലുപ്പ വിശകലനം
|
||||
- [Image optimization tools](https://squoosh.app/) - ആസ്തി ഒപ്റ്റിമൈസേഷൻ അവസരങ്ങൾ
|
||||
- [Security headers analysis](https://securityheaders.com/) - സൈബർ സുരക്ഷ പ്രകടന സ്വാധീനം
|
||||
|
||||
## ഡെലിവറബിളുകൾ ഫോർമാറ്റ്
|
||||
|
||||
2-3 പേജുള്ള ഒരു പ്രൊഫഷണൽ റിപ്പോർട്ട് സൃഷ്ടിക്കുക, ഇതിൽ ഉൾപ്പെടുത്തേണ്ടത്:
|
||||
|
||||
1. **എക്സിക്യൂട്ടീവ് സഖ്യാരി** - പ്രധാന കണ്ടെത്തലുകളും ശുപാർശകളും
|
||||
2. **രീതിശാസ്ത്രം** - ഉപയോഗിച്ച ഉപകരണങ്ങളും പരിശോധന മാർഗ്ഗങ്ങളും
|
||||
3. **നിലവിലെ പ്രകടന വിലയിരുത്തൽ** - അടിസ്ഥാന അളവുകളും മാപനങ്ങളും
|
||||
4. **കണ്ടെത്തിയ പ്രശ്നങ്ങൾ** - സമഗ്ര പ്രശ്ന വിശകലനവും പിന്തുണയുള്ള ഡാറ്റയും
|
||||
5. **ശുപാർശകൾ** - മുൻഗണനാ അടിസ്ഥാനമുള്ള മെച്ചപ്പെടുത്തൽ തന്ത്രങ്ങൾ
|
||||
6. **പ്രതിഷ്ഠാപന റോഡ്മാപ്പ്** - ഘട്ടം ഘട്ടമായ ഒപ്റ്റിമൈസേഷൻ മാർഗ്ഗരേഖ
|
||||
|
||||
**ദൃശ്യ തെളിവ് ഉൾപ്പെടുത്തുക:**
|
||||
- പ്രകടന ഉപകരണങ്ങളും അളവുകളും കാണിക്കുന്ന സ്ക്രീൻഷോട്ടുകൾ
|
||||
- പ്രകടന ഡാറ്റ കാണിക്കുന്ന ചാർട്ടുകളും 그래ഫുകളും
|
||||
- സാധ്യമായിടത്തോളം മുൻപ്/ശേഷം താരതമ്യങ്ങൾ
|
||||
- നെറ്റ്വർക്ക് വാട്ടർഫോൾ ചാർട്ടുകളും റിസോഴ്സ് വിഭജനങ്ങളും
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| മാനദണ്ഡം | ഉത്തമം (90-100%) | മതിയായത് (70-89%) | മെച്ചപ്പെടുത്തേണ്ടതുണ്ട് (50-69%) |
|
||||
| -------- | ------------------- | ----------------- | -------------------------- |
|
||||
| **വിശകലന ആഴം** | 4+ ഉപകരണങ്ങൾ ഉപയോഗിച്ച് സമഗ്രമായ വിശകലനം, മൂല കാരണ വിശകലനം, ഉപയോക്തൃ ബാധ വിലയിരുത്തൽ | 3 ഉപകരണങ്ങൾ ഉപയോഗിച്ച് നല്ല വിശകലനം, വ്യക്തമായ അളവുകൾ, അടിസ്ഥാന പ്രശ്ന തിരിച്ചറിയൽ | 2 ഉപകരണങ്ങൾ ഉപയോഗിച്ച് അടിസ്ഥാന വിശകലനം, മൂല്യമിടൽ കുറഞ്ഞ പ്രശ്ന തിരിച്ചറിയൽ |
|
||||
| **ഉപകരണ വൈവിധ്യം** | ബ്രൗസർ ടൂളുകൾ + 3+ മൂന്നാം കക്ഷി സേവനങ്ങൾ, തുലനാത്മക വിശകലനവും洞察ങ്ങളും | ബ്രൗസർ ടൂളുകളും 2 മൂന്നാം കക്ഷി സേവനങ്ങളും ചില തുലനാത്മക വിശകലനം | ബ്രൗസർ ടൂളുകൾ + 1 മൂന്നാം കക്ഷി സേവനം, പരിമിതമായ താരതമ്യം |
|
||||
| **പ്രശ്ന തിരിച്ചറിയൽ** | 5+ നിശ്ചിത പ്രകടന പ്രശ്നങ്ങൾ, വിശദമായ മൂല കാരണവും കണക്കാക്കിയ സ്വാധീനം | 3-4 പ്രകടന പ്രശ്നങ്ങൾ, നല്ല വിശകലനം, ചില സ്വാധീനം അളവ് | 1-2 പ്രകടന പ്രശ്നങ്ങൾ, അടിസ്ഥാന വിശകലനം |
|
||||
| **ശുപാർശകൾ** | നിശ്ചിതവും പ്രായോഗികവുമായ ശുപാർശകൾ, നടപ്പിലാക്കൽ വിശദാംശങ്ങളും പ്രതീക്ഷിച്ച സ്വാധീനം, ആധുനിക മികച്ച അന്തിമങ്ങള് | നല്ല ശുപാർശകൾ, ചില നടപ്പിലാക്കൽ മാർഗ്ഗനിർദ്ദേശങ്ങൾ, പ്രതീക്ഷിച്ച ഫലം | അടിസ്ഥാന ശുപാർശകൾ, പരിമിതമായ നടപ്പിലാക്കൽ വിശദാംശങ്ങൾ |
|
||||
| **പ്രൊഫഷണൽ അവതരണം** | വ്യക്തമായ ഘടന, ദൃശ്യ തെളിവുകൾ, എക്സിക്യൂട്ടീവ് സഖ്യാരി, പ്രൊഫഷണൽ ഫോർമാറ്റിംഗ് | നല്ല സംഘടന, ചില ദൃശ്യ തെളിവുകൾ, വ്യക്തമായ ഘടന | അടിസ്ഥാന സംഘടന, കുറഞ്ഞ ദൃശ്യ തെളിവുകൾ |
|
||||
|
||||
## പഠന ഫലം
|
||||
|
||||
ഈ അസൈൻമെന്റ് പൂർത്തിയാക്കുന്നതിലൂടെ നിങ്ങൾ പ്രകടിപ്പിക്കുമെന്ന് പ്രതീക്ഷിക്കുന്നത്:
|
||||
- **പ്രൊഫഷണൽ പ്രകടന വിശകലന ഉപകരണങ്ങളും രീതി ശാസ്ത്രങ്ങളും** പ്രയോഗിക്കുക
|
||||
- **ഡേറ്റാ അധിഷ്ഠിത വിശകലന ഉപയോഗിച്ച്** പ്രകടന ബോട്ടിൽനെക്കുകൾ തിരിച്ചറിയുക
|
||||
- **കോഡ് ഗുണനിലവാരവും ഉപയോക്തൃ പരിചയവും** തമ്മിലുള്ള ബന്ധം വിശകലനം ചെയ്യുക
|
||||
- **നിശ്ചിതവും പ്രാവർത്തികവുമായ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ ശുപാർശ ചെയ്യുക**
|
||||
- **സാങ്കേതിക കണ്ടെത്തലുകൾ പ്രൊഫഷണൽ ഫോർമാറ്റിൽ** സമർപ്പിക്കുക
|
||||
|
||||
ഈ അസൈൻമെന്റ് പാഠത്തിൽ പഠിച്ച പ്രകടന ആശയങ്ങൾ ശക്തിപ്പെടുത്തുകയും പ്രായോഗിക കഴിവുകൾ വികസിപ്പിക്കുകയും ചെയ്യും, നിങ്ങൾ നിങ്ങളുടെ വെബ് ഡെവലപ്പ്മെന്റ് കരിയറിൽ തുടർച്ചയായി ഉപയോഗിക്കുന്നതാണ്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാപത്രം**:
|
||||
ഈ പ്രമാണം AI ഭാഷാന്തര സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തിയിരിക്കുന്നതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്കായി പരിശ്രമിക്കുന്നുണ്ടെങ്കിലും സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനത്തിൽ ചില പിശക്കളും തെറ്റുകളും ഉണ്ടാകാൻ സാധ്യതയുണ്ട്. അതുകൊണ്ട്, അസൽ പ്രമാണം അതിന്റെ മാതൃഭാഷയിൽയാണ് ഔദ്യോഗിക ഉറവിടമെന്നും അംഗീകരിക്കേണ്ടതാണ്. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതു തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "fab4e6b4f0efcd587a9029d82991f597",
|
||||
"translation_date": "2026-01-08T15:58:56+00:00",
|
||||
"source_file": "5-browser-extension/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കാർബൺ ട്രിഗർ ബ്രൗസർ എക്സ്റ്റൻഷൻ: പൂർത്തിയായ കോഡ്
|
||||
|
||||
tmrowയുടെ C02 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപഭോഗം ട്രാക്ക് ചെയ്ത്, നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെ നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം എത്ര ഭാരം കൂടിയാണെന്ന് ഓർമപ്പെടുത്തുന്ന ഒരു ബ്രൗസർ എക്സ്റ്റൻഷൻ നിർമ്മിക്കുക. ഈ എക്സ്റ്റൻഷൻ ഇടയ്ക്കിടെ ഉപയോഗിക്കുന്നത് ഈ വിവരത്തിന്റെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളെ സംബന്ധിച്ചുള്ള തീരുമാനം എടുക്കാൻ സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## ആരംഭിക്കൽ
|
||||
|
||||
നിങ്ങൾക്കു് [npm](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കണം. നിങ്ങളുടെ കമ്പ്യൂട്ടറിലെ ഒരു ഫോൾഡറിൽ ഈ കോഡിന്റെ ഒരു പകർപ്പ് ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
ആവശ്യമായ എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack ഉപയോഗിച്ച് എക്സ്റ്റൻഷൻ നിർമ്മിക്കുക
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലത്തുഭാഗത്തുള്ള 'മൂന്ന് ഒമ്മ' മෙනുവിൽ നിന്ന് Extensions പാനൽ കണ്ടെത്തുക. അതിൽ നിന്നു് 'Load Unpacked' എന്നത് തിരഞ്ഞെടുക്കുക പുതിയ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യുന്നതിനായി. సూచനയിൽ 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യും. ഇത് ഉപയോഗിക്കാൻ, CO2 Signal APIയ്ക്കുള്ള API കീ ആവശ്യമാണ് ([ഇവിടെ ഇമെയിൽ വഴി ഒന്നു നേടുക](https://www.co2signal.com/) - ഈ പേജിലെ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [Electricity Map](https://www.electricitymap.org/map) യുമായി അനുസൃതമുള്ള നിങ്ങളുടെ മേഖലയുടെ [കോഡ്](http://api.electricitymap.org/v3/zones) (ബോസ്റ്റണിൽ, ഉദാഹരണത്തിന്, ഞാന് 'US-NEISO' ഉപയോഗിക്കുന്നു).
|
||||
|
||||
|
||||
|
||||
API കീയും മേഖല രേഖപ്പെടുത്തുമ്പോൾ, ബ്രൗസർ എക്സ്റ്റൻഷൻ ബാറിലുള്ള വർണ്ണജഡ അംശം നിങ്ങളുടെ മേഖലയിലെ ഊർജ്ജ ഉപഭോഗം പ്രതിഫലിപ്പിക്കാൻ മാറുകയും, നിങ്ങൾക്ക് ഏതു ഊർജ്ജം അധികമുള്ള പ്രവർത്തനങ്ങൾ നടത്തുന്നതിന് അനുയോജ്യമാണ് എന്ന് സൂചിപ്പിക്കുകയും ചെയ്യും. ഈ 'അംശം' സംവിധാനം എന്നെ നൽകിയിരിക്കുന്നത് [Energy Lollipop എക്സ്റ്റൻഷൻ](https://energylollipop.com/) എന്നതാണ്, പ്രത്യേകിച്ച് കാലിഫോർണിയയിലെ ഉത്സർജ്ജങ്ങളുടെ കാര്യത്തിലാണ്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**നിരോധനilinx/റിയായി**:
|
||||
ഈ രേഖ AI പരിഭാഷ സേവനം [കോ-ഓപ് ട്രാൻസ്ലേറ്റർ](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം തികച്ചും കൃത്യത ലക്ഷ്യമിടുന്നുവെങ്കിലും, സ്വയമർപ്പിതമായ വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അപൂർവതകൾ ഉണ്ടായേക്കാമെന്ന 점 മനസ്സിലാക്കുക. മാതൃഭാഷയിൽ ഉള്ള അവിടുത്തെ മൗലിക രേഖയെ മാത്രമേ അധികാരപരമായ ഉറവിടമായി കണക്കാക്കാവൂ. നിർണായകമായ വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ പരിഭാഷ നിർദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ച് സംഭവിക്കുന്ന അവബോധക്കുറവുകൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദിത്വം ഏറ്റെടുക്കാറില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
|
||||
"translation_date": "2026-01-08T16:10:11+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.es.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കാർബൺ ട്രിഗർ ബ്രൗസർ എക്സ്റ്റെൻഷൻ: പൂർണ്ണ കോഡ്
|
||||
|
||||
TMROW-ന്റെ CO2 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം ട്രാക്ക് ചെയ്യുന്നതിനായി, നിങ്ങളുടെ പ്രദേശത്തെ വൈദ്യുതി ഉപഭോഗം നേരിട്ട് നിങ്ങളുടെ ബ്രൗസറിൽ ഓർമ്മപ്പെടുത്തുന്നതിനുള്ള ഒരു ബ്രൗസർ എക്സ്റ്റെൻഷൻ സൃഷ്ടിക്കുക. ഈ അഡ് ഹോക്ക് എക്സ്റ്റെൻഷൻ ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ പ്രവർത്തനങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള തീരുമാനങ്ങൾ എടുക്കാൻ സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## ആരംഭിക്കാൻ
|
||||
|
||||
[എന്.പി.എം](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കണം. നിങ്ങളുടെ കമ്പ്യൂട്ടറിലെ ഒരു ഫോൾഡറിലേക്ക് ഈ കോഡിന്റെ ഒരു കോപ്പി ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
അവശ്യമായ എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack ഉപയോഗിച്ച് എക്സ്റ്റെൻഷൻ നിർമ്മിക്കുക:
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge-ലിൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലത് കോണിലുള്ള 'മൂന്ന് പോയിന്റുകൾ' മെനു ഉപയോഗിച്ച് എക്സറ്റൻഷൻസ് പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് 'Unpackaged Load' തിരഞ്ഞെടുത്തു പുതിയ എക്സ്റ്റെൻഷൻ ലോഡ് ചെയ്യുക. ആവശ്യപ്പെട്ടപ്പോൾ 'dist' ഫോൾഡർ തുറക്കുക, അപ്പോൾ എക്സ്റ്റെൻഷൻ ലോഡ് ചെയ്യും. ഇത് ഉപയോഗിക്കാൻ, CO2 സിഗ്നൽ APIക്ക് ഒരു API കീ ആവശ്യമാണ് ([ഇവിടെ ഇമെയിൽ നൽകി എടുക്കുക](https://www.co2signal.com/) - ഇമെയിൽ പെട്ടിയിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [എലക്ട്രിസിറ്റിമാപ്](https://www.electricitymap.org/map)നുള്ള [നിങ്ങളുടെ മേഖലയ്ക്കുള്ള കോഡ്](http://api.electricitymap.org/v3/zones) (ഉദാഹരണത്തിന് ബോസ്റ്റണിൽ, 'US-NEISO' ആണ്).
|
||||
|
||||
|
||||
|
||||
API കീയും പ്രദേശവും എക്സ്റ്റെൻഷൻ ഇന്റർഫേസിൽ നൽകുന്നതോടെ, ബ്രൗസറിന്റെ എക്സ്റ്റെൻഷൻ ബാറിൽ ഉള്ള നിറമുള്ള പോയിന്റ് നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം പ്രതിഫലിപ്പിക്കാൻ മാറുകയും, ഉയർന്ന വൈദ്യുതി ഉപയോഗമുള്ള പ്രവർത്തനങ്ങൾക്ക് അനുയോജ്യമായ സൂചന നൽകുകയും ചെയ്യും. ഈ "പോയിന്റുകൾ" അടിസ്ഥാനമാക്കിയുള്ള സങ്കൽപ്പം കാൽഫോറ്നിയയ്ക്കുള്ള [Energy Lollipop](https://energylollipop.com/) എക്സ്റ്റെൻഷനാണ് എന്നെ പ്രചോദിപ്പിച്ചത്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയിപ്പ്**:
|
||||
ഈ രേഖ AI മെടമായുള്ള തര്ജ്ജമാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തര്ജ്ജമ ചെയ്തത് ആണ്. നമുക്ക് കൃത്യതയ്ക്ക് ശ്രമിച്ചിട്ടുള്ളതെങ്കിലും, സ്വയംചാലിതമായ തര്ജ്ജമകളില് പിശകുകളും അപൂര്ണതകളും ഉണ്ടാകാവുന്നതാണ്. മാതൃഭാഷയിലുള്ള പ്രാരംബിക രേഖ എന്റെസാധാരണമായ സ്രോതസരായി പരിഗണിക്കപ്പെടണം. അപകടസാധ്യതയുള്ള വിവരങ്ങള്ക്കായി പ്രൊഫഷണല് മാനവ തര്ജ്ജമ ശുപാര്ശ ചെയ്യുന്നുണ്ട്. ഈ തര്ജ്ജമ ഉപയോഗിച്ചതിനുള്ള ചില തെറ്റായ സമജങ്ങള് അല്ലെങ്കില് തെറ്റിച്ചുറപ്പുകള്ക്കായി ഞങ്ങള് ഉത്തരവാദിയല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9361268ca430b2579375009e1eceb5e5",
|
||||
"translation_date": "2026-01-08T16:12:18+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.fr.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# Carbon Trigger ബ്രൗസർ എക്സ്ടൻഷൻ: പൂർത്തിയായ കോഡ്
|
||||
|
||||
tmrow ൽ നിന്നുള്ള C02 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം നിരീക്ഷിക്കാൻ, നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപയോഗത്തെപ്പറ്റി നേരിട്ടുള്ള ഓർമ്മപ്പെടുത്തലിനായി ഒരു ബ്രൗസർ എക്സ്ടൻഷൻ സൃഷ്ടിക്കുക. ഈ പഴയകാല എക്സ്ടൻഷൻ ഉപയോഗിക്കുന്നത് ഈ വിവരങ്ങളുടെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് നീതിപാലനം നടത്താൻ സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## തുടക്കം
|
||||
|
||||
നിങ്ങൾക്ക് [npm](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്നത് ഉണ്ടായിരിക്കണം. നിങ്ങളുടെ കമ്പ്യൂട്ടറിലെ ഒരു ഫോൾഡറിൽ ഈ കോഡിൻറെ കോപ്പി ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
ആവശ്യമുള്ള എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Webpack ൽ നിന്നുള്ള എക്സ്ടൻഷൻ നിർമ്മിക്കുക
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുവശത്തുള്ള 'മൂന്നു പോയിന്റ്' മെനു ഉപയോഗിച്ച് ഇക്സ്റ്റൻഷൻസ് പാനൽ കണ്ടെത്തുക. അവിടെ നിന്നും 'Unpacked Extension Load' തിരഞ്ഞെടുക്കുക, പുതിയ എക്സ്ടൻഷൻ ലോഡ് ചെയ്യാൻ. പ്രോമ്പ്റ്റിൽ 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്ടൻഷൻ ലോഡ് ചെയ്യും. ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന നിങ്ങളുടെ പ്രദേശത്തേക്ക് അനുയോജ്യമായ CO2 സിഗ്നൽ API കേ (അവിടെ [ഇമെയിൽ വഴി ഒരു കീ നേടുക](https://www.co2signal.com/) - ഈ പേജിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകി) കൂടാതെ [ഇലക്ട്രിസിറ്റി മാപ്പിൽ](https://www.electricitymap.org/map) ഉള്ള [പ്രദേശ കോഡ്](http://api.electricitymap.org/v3/zones) ഉണ്ടാകണം (ബോസ്റ്റണിൽ, ഉദാഹരണത്തിന്, ഞാൻ 'US- NEISO' ഉപയോഗിക്കുന്നു).
|
||||
|
||||
|
||||
|
||||
API കിയും പ്രദേശവും എക്സ്ടൻഷൻ ഇന്റർഫേസിൽ നൽകുന്നതിനു ശേഷം, ബ്രൗസർ എക്സ്ടൻഷൻ ബാറിലുള്ള നിറമുള്ള പോയിന്റ് നിങ്ങളുടെ പ്രദേശം ഉപയോഗിക്കുന്ന വൈദ്യുതി തീവ്രതയെ പ്രതിബിംബിപ്പിക്കും, കൂടാതെ ഏത് ഊർജ്ജം കൂടുതൽ ഉപയോഗിക്കുന്ന പ്രവർത്തനങ്ങൾ ചെയ്യാൻ ശരിയായ സമയം എന്നതിന് നിങ്ങൾക്ക് സൂചകമാകും. ഈ 'പോയിന്റ്' സിസ്റ്റത്തിന്റെ ആശയം കാലിഫോർണിയൻ ഉமிழ്പൈനോടുള്ള [Energy Lollipop എക്സ്ടൻഷൻ](https://energylollipop.com/) ൽ നിന്നാണ് കിട്ടുന്നത്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിമർശന കുറിപ്പ്**:
|
||||
ഈ പ്രമാണം AI തർജ്ജമ സർവീസ് [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജ്ജമചെയ്തതാണ്. ഞങ്ങൾ ശരിതോറും ശ്രമിച്ചുവെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന തർജ്ജമകളിൽ പിഴവുകൾ അല്ലെങ്കിൽ പകഴിപ്പുകൾ ഉണ്ടാകാൻ സാധ്യതയുണ്ട്. മൗലിക പ്രമാണം അതിന്റെ സ്വന്തം ഭാഷയിൽ അസിസ്റ്റന്റ് സ്രോതസ്സായി കണക്കാക്കപ്പെടുന്നതാണ്. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജമ നിർദേശിക്കും. ഈ തർജ്ജമയുടെ ഉപയോഗത്തിൽ നിന്നു ഉണ്ടാകുന്ന ഏതു തെറ്റിദ്ധാരണകൾക്കും അല്ലെങ്കിൽ മറുപറയലുകൾക്കുമോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "dd58ae1b7707034f055718c1b68bc8de",
|
||||
"translation_date": "2026-01-08T16:07:47+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.hi.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കാർബൺ ട്രിലർ ബ്രൗസർ എക്സ്ടൻഷൻ: പൂർണ്ണമായ കോഡ്
|
||||
|
||||
വൈദ്യുതി ഉപയോഗം ട്രാക്ക് ചെയ്യുന്നതിനായി tmrow-യുടെ C02 സിഗ്നൽ API ഉപയോഗിച്ച് ഒരു ബ്രൗസർ എക്സ്ടൻഷൻ നിർമ്മിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ നിങ്ങളുടെ പ്രദേശത്തെ വൈദ്യുതി ഉപയോഗം എത്ര ഭാരമുള്ളതാണെന്നതിന് ഒരു റിമൈൻഡർ നൽകുക. ഈ താത്കാലിക എക്സ്ടൻഷൻ ഉപയോഗിക്കുന്നത് ഈ വിവരങ്ങൾ അടിസ്ഥാനമാക്കി നിങ്ങളുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് തീരുമാനങ്ങൾ എടുക്കുന്നതിന് സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## തുടങ്ങൽ
|
||||
|
||||
നിങ്ങൾക്ക് [npm](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്യേണ്ടതുണ്ട്. നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ ഒരു ഫോൾഡറിലേക്കു ഇത് കോഡിന്റെ ഒരു പകർപ്പ് ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
ആവശ്യമായ എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
വെബ്പാക്ക് ഉപയോഗിച്ച് എക്സ്ടൻഷൻ നിർമ്മിക്കുക
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുവശത്തുള്ള 'മൂന്ന് ഡോട്ട്' മেনൂ ഉപയോഗിച്ച് എക്സ്ടൻഷൻ പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് പുതിയ ഒരു എക്സ്ടൻഷൻ ലോഡ് ചെയ്യാൻ 'लोड अनपैक्ड' തിരഞ്ഞെടുക്കുക. പ്രോമ്പ്റ്റിൽ 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്ടൻഷൻ ലോഡ് ചെയ്യും. ഇത് ഉപയോഗിക്കാൻ, CO2 സിഗ്നലിന്റെ API ([ഈമെയിൽ വഴി ഇവിടെ ലഭ്യമാണ്](https://www.co2snal.com/) API കീ ലഭിക്കേണ്ടതാണ് - ഈ പേജിൽ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) ഒപ്പം [നിങ്ങളുടെ പ്രദേശത്തിനുള്ള കോഡ്](http://api.electricitymap.org/v3/zones) [എലക്ട്രിസിറ്റി മാപ്പ്](https://www.electricitymap.org/map) (ഉദാഹരണത്തിന്, ബോസ്റ്റണിൽ ഞാൻ 'US-NEISO' ഉപയോഗിക്കുന്നു).
|
||||
|
||||
|
||||
|
||||
ഒരു API കീയും പ്രദേശ ഡാറ്റയും എക്സ്ടൻഷൻ ഇന്റർഫേസിൽ നൽകുന്നതോടെ, ബ്രൗസർ എക്സ്ടൻഷൻ ബാറിലുള്ള നിറമുള്ള ഡോട്ട് നിങ്ങളുടെ പ്രദേശത്തിന്റെ എനർജി ഉപയോഗം പ്രതിഫലിപ്പിക്കാൻ മാറും, കൂടാതെ ഇനകൾ അനുസരിച്ച് എനർജി-ഭാരമുള്ള പ്രവർത്തനങ്ങൾ നടത്തുന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് സിഗ്നൽ നൽകും. ഈ 'ഡോട്ട്' സിസ്റ്റത്തിന്റെ ആശയം കലിഫോർണിയ മൂലക വികിരണങ്ങൾക്ക് [Energy Lollipop Extension](https://energylollipop.com/) വഴി ലഭിച്ചിട്ടുണ്ട്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ഡിസ്ക്ലേിമർ**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI തർജ്ജമ സേവനം ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തത് ആണ്. നാം സ്ട്രീവ് ചെയ്യുന്നുണ്ടെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന തർജ്ജമകളിൽ പിശകുകളും അ正確തകളില്ലായ്മകളും ഉണ്ടായേക്കാം. മാതൃഭാഷയിലുള്ള യഥാർത്ഥ രേഖയാണ് അധികാരം ഉള്ള ഉറവിടം എന്ന് പരിഗണിച്ചുകൊള്ളുകയുള്ളൂ. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യൻ ചെയ്ത തർജ്ജമ വേഞ്ഞിരിക്കുക. ഈ തർജ്മ ഉപയോഗത്തിലൂടെയുണ്ടാകുന്ന എന്തെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും തെറ്റായി വ്യാഖ്യാനിക്കുന്നതിനു ഞങ്ങൾ ഉത്തരവാദിത്വം ഏറ്റെടുത്തിട്ടില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9a6b22a2eff0f499b66236be973b24ad",
|
||||
"translation_date": "2026-01-08T16:17:46+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.it.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# Estensione del browser Carbon Trigger: കോഡ് തുടങ്ങേണ്ടത്
|
||||
|
||||
നാം tmrow-യുടെ Signal C02 API ഉപയോഗിച്ച് വൈദ്യുതിയുടെ ഉപയോഗം നിരീക്ഷിക്കാൻ ബ്രൗസർ എക്സ്ടൻഷൻ സൃഷ്ടിക്കും, അതിലൂടെ നിങ്ങളുടെ പ്രദേശത്ത് വൈദ്യുതി ഉപയോഗം എത്ര ഭാരമുള്ളതാണെന്ന് നേരിട്ട് നിങ്ങളുടെ ബ്രൗസറിൽ ഒരു ഓർമ്മപ്പെടുത്തൽ ഉണ്ടായിരിക്കും. ഈ പ്രത്യേക എക്സ്ടൻഷൻ ഉപയോഗിക്കുന്നത് ഈ വിവരങ്ങളുടെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങൾ മൂല്യനിർണയം ചെയ്യാൻ സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## തുടങ്ങാൻ
|
||||
|
||||
[npm](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടാകണം. ഈ കോഡിന്റെ ഒരു പകർപ്പ് നിങ്ങളുടെ കമ്പ്യൂട്ടറിലെ ഫോളഡറിലേക്ക് ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
ആവശ്യമുള്ള എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack-ൽ നിന്ന് എക്സ്ടൻഷൻ സൃഷ്ടിക്കുക
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലത് മൂലയിൽ ഉള്ള "മൂന്ന് പോയിന്റ്" മെനുവിൽ നിന്നു എക്സ്റ്റൻഷൻസ് പാനൽ खोजുക. നിലവിലുള്ളില്ലെങ്കിൽ, ഡവലപ്പർ മോഡ് (താഴെ ഇടത്) സജീവമാക്കുക. പുതിയ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യാൻ "അൺകോമ്പ്രസഡ് ലോഡ്" തിരഞ്ഞെടുക്കുക. പ്രോംപ്റ്റിൽ "dist" ഫോൾഡർ തുറക്കുക, എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്തിരിക്കും. ഉപയോഗിക്കാൻ, CO2 സിഗ്നൽ APIയുടെ API കീ ആവശ്യമുണ്ട് (ഇത് ഇവിടെ [ഇമെയിൽ വഴി ലഭ്യമാകുന്നു](https://www.co2signal.com/) - ഈ പേജിലെ പ്രദാനം ചെയ്തിട്ടുള്ള ഇമെയിൽ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [ഇലക്ട്രിസിറ്റി മാപ്പിനുള്ള](https://www.electricitymap.org/map) അനുയോജ്യമായ [പ്രദേശത്തിനുള്ള കോഡ്](http://api.electricitymap.org/v3/zones) (ഉദാ. ബോസ്റ്റനിൽ, "US-NEISO").
|
||||
|
||||
|
||||
|
||||
ഒരു പ്രാവശ്യം API കീയും പ്രദേശവും എക്സ്റ്റൻഷൻ ഇന്റർഫേസിൽ നൽകിവച്ചശേഷം, ബ്രൗസർ എക്സ്റ്റൻഷൻ ബാറിലുള്ള നിറമുള്ള ബിന്ദു പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപയോഗം പ്രതിഫലിപ്പിക്കാൻ മാറും, കൂടാതെ ഏത് ഉയർന്ന വിസ്തീർണ്ണമുള്ള പ്രവർത്തനങ്ങൾ പരീക്ഷിക്കാം എന്ന വിഷയത്തിൽ സൂചന നൽകും. ഈ "ബിന്ദു" അടിസ്ഥാനമായ സിസ്റ്റത്തിന്റെ ആശയം [Energy Lollipop എക്സ്റ്റൻഷൻ](https://energylollipop.com/)കളിൽ നിന്നാണ് ലഭിച്ചത്, കാലിഫോർണിയയിലെ ഉൽപ്പാദനങ്ങൾക്ക് വേണ്ടി.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിമർശന കുറിപ്പ്**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തിരിക്കുന്നു. ഞങ്ങൾ കൃത്യതയ്ക്ക് വേണ്ടി ശ്രമിച്ചിരിക്കുവെങ്കിലും, യാന്ത്രിക വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടായേക്കാമെന്നത് ദയവായി ശ്രദ്ധിക്കുക. ഉള്ളടക്കത്തിന്റെ സാക്കാ ഭാഷയിലെ യഥാർത്ഥ രേഖ ഔദ്യോഗിക ഉറവിടമായി പരിഗണിക്കേണ്ടതാണ്. അത്യാവശ്യ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽ നിന്നുള്ള യാതൊരു തെറ്റായ മനസ്സിലാക്കലുകൾക്കും അല്ലെങ്കിൽ തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
|
||||
"translation_date": "2026-01-08T16:14:08+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.ja.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# কার্বনট্রিগারব্রাউজার এক্সটেনশন: সম্পূর্ণ কোড
|
||||
|
||||
tmrow এর C02 সিগন্যাল API ব্যবহার করে বিদ্যুৎ ব্যবহার ট্র্যাক করার জন্য, আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের মাত্রা কত বেশি তা ব্রাউজারে রিমাইন্ডার হিসেবে প্রদর্শন করার জন্য ব্রাউজার এক্সটেনশন তৈরি করা হয়েছে। এই এক্সটেনশনটি অ্যাডহকভাবে ব্যবহার করে আপনি এই তথ্যের উপর ভিত্তি করে আপনার কার্যক্রম নির্ধারণ করতে পারবেন।
|
||||
|
||||
|
||||
|
||||
## はじめに
|
||||
|
||||
[npm](https://npmjs.com) ইন্সটল থাকা প্রয়োজন। এই কোডটি আপনার কম্পিউটারে একটি ফোল্ডারে ডাউনলোড করুন।
|
||||
|
||||
প্রয়োজনীয় সব প্যাকেজ ইন্সটল করুন।
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack থেকে এক্সটেনশন বিল্ড করুন।
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge এ ইন্সটল করতে, ব্রাউজারের উপরের ডানদিকের "তিনটি ডট" মেনু থেকে "এক্সটেনশন" প্যানেল খুঁজুন। সেখানে থেকে "Load Unpacked" নির্বাচন করে নতুন এক্সটেনশন লোড করুন। প্রম্পটে "dist" ফোল্ডার খুলুন এবং এক্সটেনশন লোড হবে। ব্যবহার করার জন্য, CO2 সিগন্যাল API এর API কী ([ইমেইল মারফত এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে ইমেইল টাইপ করুন) এবং [Electricity Map](https://www.electricitymap.org/map) অনুযায়ী [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) দরকার (বস্টনে, উদাহরণস্বরূপ, 'US-NEISO' ব্যবহার হয়)।
|
||||
|
||||
|
||||
|
||||
API কী এবং অঞ্চল এক্সটেনশন ইন্টারফেসে প্রবেশ করানো হলে, ব্রাউজার এক্সটেনশন বারে প্রদর্শিত রঙিন ডট পরিবর্তিত হবে এবং আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিবিম্ব দেখাবে, যা নির্দেশ করবে কোন ধরনের শক্তি প্রয়োজনীয় কার্যক্রম করাই উপযুক্ত। এই "ডট" সিস্টেমের ধারণাটি আমাকে দিয়েছে ক্যালিফোর্নিয়ার নির্গমনের জন্য [Energy Lollipop extension](https://energylollipop.com/)।
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരിഭാഷാ എണ്ണം**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ പരിഭാഷ സേവനം ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം ശരിയായ വിവർത്തനത്തിന് ശ്രമിച്ചിട്ടും, യന്ത്രം നിർവഹിക്കുന്ന പരിഭാഷയിൽ പിഴവുകളോ അച്ചടക്കക്കുറവുകളോ ഉണ്ടാകാമെന്ന് ശ്രദ്ധിക്കുക. മൊഴിയുടെ മാതൃഭാഷയിൽ ഉള്ള ഔദ്യോഗിക രേഖയെ സത്യസന്ധമായ ഉറവിടമായാണ് കാണേണ്ടത്. നിർണ്ണായക വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷ ഉപയോഗിച്ച് ഉണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാന പരപട്ടതികൾക്കും anyị ബാധ്യസ്ഥരല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "21b364c158c8e4f698de65eeac16c9fe",
|
||||
"translation_date": "2026-01-08T16:15:52+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.ms.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കാർബൺ ട്രിഗർ ബ്രൗസർ എക്സ്ടൻഷൻ: പൂർണ്ണ കോഡ്
|
||||
|
||||
CO2 സിഗ്നൽ tmrow API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം കണ്ടെത്താൻ, നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം എത്ര ഭാരമുള്ളതാണെന്ന് കണ്ടെത്താൻ ബ്രൗസറിൽ മുന്നറിയിപ്പ് ലഭിക്കുന്നതുവരെ ബ്രൗസർ എക്സ്ടൻഷൻ നിർമ്മിക്കുക. ഈ എക്സ്ടൻഷൻ പ്രത്യേകിച്ച് ഉപയോഗിക്കുന്നത് ഈ വിവരത്തിന്റെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് പരിഗണന നടത്താൻ സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## ഇതുവരെ തുടങ്ങുക
|
||||
|
||||
നിങ്ങൾക്ക് [npm](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കണം. ഈ കോഡിന്റെ പകർപ്പ് നിങ്ങളുടെ കമ്പ്യൂട്ടറിലെ ഫോൾഡറിൽ ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
ആവശ്യമുള്ള എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack ഉപയോഗിച്ച് എക്സ്ടൻഷൻ നിർമ്മിക്കുക
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുഭാഗത്ത് ഉള്ള 'മൂന്ന് ഡോട്ട്' മെനുവിൽ നിന്ന് എക്സ്റ്റൻഷനുകൾ പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് 'Load Unpacked' തിരഞ്ഞെടുക്കുക പുതിയ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യുന്നതിന്. ആവശ്യമായതു 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്ടൻഷൻ ലോഡ് ചെയ്യപ്പെടും. ഇത് ഉപയോഗിക്കാൻ, CO2 സിഗ്നൽ API-ക്കായി ഒരു API കീ ([ഇമെയിൽ വഴി ഇവിടെ നേടുക](https://www.co2signal.com/) - ഈ പേജിലെ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) ഉം [നിങ്ങളുടെ പ്രദേശം ക്വാളിഫൈ ചെയ്യുന്ന കോഡ്](http://api.electricitymap.org/v3/zones) ([എലക്ട്രിസിറ്റിമാപ്പ്](https://www.electricitymap.org/map) നു համապատասխանമായി) ഉണ്ടാവണം. (ഉദാഹരണംയായി Boston-ൽ ഞാൻ 'US-NEISO' ഉപയോഗിക്കുന്നു).
|
||||
|
||||
|
||||
|
||||
API കീയും പ്രദേശം ഇന്റഫേസിൽ നൽകുമ്പോൾ, ബ്രൗസർ എക്സ്ടൻഷന്റെ ബാറിൽ നിറമുള്ള ഡോട്ട് നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം പ്രതിഫലിപ്പിക്കും, നിങ്ങള്ക്ക് അനുയോജ്യമായ ഭാരമുള്ള പ്രവർത്തനങ്ങൾക്കായി സൂചന നൽകും. ഈ 'ഡോട്ട്' സിസ്റ്റത്തിന്റെ ആശയം California-ലെ Energy Lollipop [ബ്രൗസർ എക്സ്റ്റൻഷൻ](https://energylollipop.com/) എന്നതിനാൽ ലഭിച്ചിരിക്കുന്നു.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകര്പ്പു**:
|
||||
ഈ രേഖ AI വിവര്ത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. wirhs വഷളാക്കുന്നതിനായി പരിശ്രമിക്കുന്നു, എങ്കിലും ഓട്ടോമേറ്റഡ് വിവര്ത്തനങ്ങളില് പിഴവ് അല്ലെങ്കില് തെറ്റുകള് ഉണ്ടാകാമെന്ന് ശ്രദ്ധിക്കുക. അതിന്റെ മാതൃഭാഷയിലെ സ原ലേഖനം പ്രാമാണികമായ ഉറവിടമായി കണക്കാക്കപ്പെടേണ്ടതാണ്. അത്യാവശ്യമായ വിവരങ്ങള്ക്കായി, പ്രൊഫഷണല് മനുഷ്യ വിവര്ത്തനം ശിപാര്ശ ചെയ്യുന്നു. ഈ വിവര്ത്തന ഉപയോഗത്തില് ഉണ്ടാകുന്ന തെറ്റായ മനസ്സിലാക്കലുകള്ക്കും തെറ്റായ വ്യാഖ്യാനങ്ങള്ക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
|
||||
"translation_date": "2026-01-08T16:05:31+00:00",
|
||||
"source_file": "5-browser-extension/start/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കാർബൺ ട്രിഗർ ബ്രൗസർ വിപുലീകരണം: സ്റ്റാർട്ടർ കോഡ്
|
||||
|
||||
തെമ്മ്രോയുടെ CO2 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം മോണിറ്റർ ചെയ്യുന്നതിന്, നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെ നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപയോഗത്തിന്റെ ഗാഢതയെക്കുറിച്ച് ഓർമ്മിപ്പിക്കാൻ ഒരു ബ്രൗസർ വിപുലീകരണം നിർമ്മിക്കുക. ഈ വിപുലീകരണം ആവശ്യംപ്രകാരം ഉപയോഗിക്കുന്നത്, ഈ വിവരത്തിന്റെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളിൽ നീതിനിര്ണയം എടുക്കാൻ സഹായിക്കും.
|
||||
|
||||
|
||||
|
||||
## ആരംഭിക്കുന്നത്
|
||||
|
||||
[npm](https://npmjs.com) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്നത് ആവശ്യമുണ്ട്. ഈ കോഡ് നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ ഒരു ഫോൾഡറിൽ ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
ആവശ്യമായ എല്ലാ പാക്കേജുകളും ഇൻസ്റ്റാൾ ചെയ്യുക:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack ഉപയോഗിച്ച് വിപുലീകരണം നിർമ്മിക്കുക
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുവശത്തുള്ള 'മൂന്ന് പോയിന്റ്' മെനുവിൽ നിന്നുയർന്നുള്ള Extensions പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് 'Load Unpacked' തിരഞ്ഞെടുത്ത് പുതിയ ഒരു വിപുലീകരണം ലോഡ് ചെയ്യുക. പ്രോമ്പ്റ്റിൽ 'dist' ഫോൾഡർ തുറക്കുക, അതിലൂടെ വിപുലീകരണം ലോഡ് ചെയ്യും. ഉപയോഗിക്കാൻ, നിങ്ങൾക്ക് CO2 Signal API-ക്കായി ഒരു API കീ ([ഇമെയിൽ വഴി ഇവിടെ നേടുക](https://www.co2signal.com/) - ഈ പേജിലുള്ള ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [Electricity Map](https://www.electricitymap.org/map) ലെ നിങ്ങളുടെ മേഖലയുടെ [കോഡ്](http://api.electricitymap.org/v3/zones) വേണം (ബോസ്റ്റണിൽ ഉദാഹരണത്തിന്, ഞാൻ 'US-NEISO' ഉപയോഗിക്കുന്നു).
|
||||
|
||||
|
||||
|
||||
API കീയും പ്രദേശ കോഡും വിപുലീകരണ ഇന്റർഫേസിൽ നൽകുന്നതോടെ, ബ്രൗസർ വിപുലീകരണ ബാറിലെ കളർ ഡോട്ട് നിങ്ങളുടെ പ്രദേശത്തിന്റെ ഊർജ്ജ ഉപയോഗം പ്രതിഫലിപ്പിക്കാൻ മാറും, നിങ്ങൾക്ക് ഏത് ഊർജ്ജ-ഭാരമുള്ള പ്രവർത്തനങ്ങൾ ചെയ്യേണ്ടതാണെന്ന് സൂചിപ്പിക്കും. ഈ 'ഡോട്ട്' സിസ്റ്റത്തിന്റെ ആശയം കാലിഫോർണിയയുടെ ഇമിഷൻസിനുള്ള [Energy Lollipop extension](https://energylollipop.com/) എന്നതിൽ നിന്നാണ് ഞാൻ ഉൾക്കൊണ്ടത്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പ്രതिज്ഞാപത്രം**:
|
||||
ഈ ഡോക്യുമെന്റ് AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിച്ചിട്ടുണ്ടെങ്കിലും, യന്ത്രപരിഭാഷകളിൽ പിഴവുകളും തെറ്റുകളും ഉണ്ടാകാമെന്നു ദയവായി മനസിലാക്കുക. അടിസ്ഥാന ഭാഷയിൽ ഉള്ള അസൽ ഡോക്യുമെൻറ് മാത്രമേ ഔദ്യോഗികമെന്നുള്ള ഉറപ്പുള്ള ഉറവിടമാകൂ. നിർണായകമായ വിവരങ്ങൾക്കായി, പ്രൊഫഷണൽ മാനവ പരിഭാഷ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷ ഉപയോഗിച്ച് ഉണ്ടായ യഥാർത്ഥ അർത്ഥം തെറ്റായി ഗ്രഹിക്കുന്നതിനോ വ്യവഹാരമാറ്റങ്ങൾ ഉണ്ടാകുന്നതിനോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,38 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "c162b3b3a1cafc1483c8015e9b266f0d",
|
||||
"translation_date": "2026-01-08T14:49:21+00:00",
|
||||
"source_file": "6-space-game/3-moving-elements-around/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# നിങ്ങളുടെ കോഡ് കമന്റ് ചെയ്യുക
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
ശുദ്ധമായ, നന്നായി രേഖപ്പെടുത്തിയ കോഡ് നിങ്ങളുടെ പ്രോജക്റ്റുകൾ പരിപാലിക്കുകയും പങ്കിടുകയും ചെയ്യുന്നതിന് അത്യന്താപേക്ഷിതമാണ്. ഈ അസൈൻമെന്റിൽ, പ്രൊഫഷണൽ ഡെവലപ്പർമാരുടെ ഏറ്റവും 중요한 ശീലങ്ങളിൽ ഒന്നായ നിങ്ങളുടെ കോഡിന്റെ ഉദ്ദേശവും പ്രവർത്തന ശേഷിയും വിശദീകരിക്കുന്ന വ്യക്തമായ, സഹായകരമായ കമന്റുകൾ എഴുതുന്നതിൽ നിങ്ങൾ പ്രായോഗികമാകും.
|
||||
|
||||
നിങ്ങളുടെ ഗെയിം ഫോൾഡറിലെ നിലവിലുള്ള `app.js` ഫയൽ പരിശോധിക്കുക, അതിൽ കമന്റുകൾ ചേർക്കാനും അവ ശുചിത്വമാക്കാനും മാർഗങ്ങൾ കണ്ടെത്തുക. കോഡ് നിയന്ത്രണം വിട്ടുപോകുന്നത് വളരെ എളുപ്പമാണ്, ഇപ്പോൾ കമന്റുകൾ ചേർത്തുകൊണ്ട് വായിക്കാൻ എളുപ്പമുള്ള കോഡ് ഉറപ്പാക്കുന്നത് നന്ന് അവസരം.
|
||||
|
||||
**നിങ്ങളുടെ ചുമതലയിൽ ഉൾപ്പെടുന്നതുഃ**
|
||||
- കോഡിലെ ഓരോ പ്രധാന ഭാഗവും എന്ത് ചെയ്യുന്നതാണെന്ന് വിശദീകരിക്കുന്ന **കമന്റുകൾ ചേർക്കുക**
|
||||
- ഫങ്ഷനുകളുടെ ഉദ്ദേശവും പാരാമീറ്ററുകളും വ്യക്തമായി വിവരിക്കുന്ന **ഫങ്ഷനുകൾ രേഖപ്പെടുത്തുക**
|
||||
- കോഡ് **താരതമ്യബദ്ധമായി ലജിക്കൽ ബ്ലോക്കുകളിൽ** ഓർഗനൈസ് ചെയ്യുക, വിഭാഗ തലക്കെട്ടുകൾ ഉപയോഗിച്ച്
|
||||
- ഉപയോഗിക്കാത്തതായി കാണുന്ന അല്ലെങ്കിൽ ആവർത്തനമുള്ള കോഡ് **തെരെ്ത്തുക**
|
||||
- മാറ്റങ്ങൾക്കായി സുസ്ഥിരമായ പേരിടൽ സമ്പ്രദായം **ഉപയോഗിക്കുക**
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| മാനദണ്ഡങ്ങൾ | മികച്ചത് | മതിയായത് | മെച്ചപ്പെടുത്തേണ്ടത് |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **കോഡ് രേഖപ്പെടുത്തൽ** | `app.js` കോഡ് മുഴുവൻ പ്രധാന ഭാഗങ്ങൾക്കും ഫങ്ഷനുകൾക്കും വ്യക്തവും സഹായകരവുമായ വിശദവിവരണങ്ങളോടൊപ്പം കമന്റ് ചെയ്തിട്ടുണ്ടാകണം | `app.js` കോഡിൽ അധികাংশം ഭാഗങ്ങൾക്കായി അടിസ്ഥാന വിശദീകരണങ്ങളോടെ മതിയായ കമന്റ് ഉണ്ടായിരിക്കണം | `app.js` കോഡിൽ വളരെ കുറവ് കമന്റുകൾ മാത്രം ഉണ്ടാകാനും വ്യക്തമായ വിശദീകരണം ഇല്ലാതിരിക്കാം |
|
||||
| **കോഡ് ഓർഗനൈസേഷൻ** | കോഡ് ലജിക്കൽ ബ്ലോക്കുകളായി വിഭജിച്ച് സ്പഷ്ടമായ വിഭാഗ തലക്കെട്ടുകളും സ്ഥിരതയുള്ള ഘടനയും ഉള്ളതായിരിക്കും | കോഡിൽ ബന്ധപ്പെട്ട ഫംഗ്ഷനുകൾ അടിസ്ഥാന ഗ്രൂപ്പിംഗോടെ കുറച്ചു ഓർഗനൈസേഷൻ ഉള്ളതായിരിക്കും | കോഡ് ക്രമരഹിതമായും പിന്തുടരാൻ പ്രയാസമുള്ളതുമാകും |
|
||||
| **കോഡ് ഗുണനിലവ്** | എല്ലാ വെരിയബിളുകളുടെയും ഫങ്ഷനുകളുടെയും പേരിടൽ വിശദമായും സമ്പ്രദായബദ്ധവും, ഉപയോഗിക്കാത്ത കോഡ് ഇല്ല, സ്ഥിരതയുള്ള രീതി പാലിക്കുന്നു | അധികാംശ കോഡ് നല്ല പേരിടലുകൾ പാലിക്കുന്നതായി, കുറഞ്ഞ ഉപയോഗിക്കാത്ത കോഡും ഉണ്ട് | വേരിയബിളുകളുടെ പേരുകൾ അസ്പഷ്ടം, ഉപയോഗിക്കാത്ത കോഡ് ഉള്ളത്, ശൈലിയിൽ അനിയമിതത്വം |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരിസ്ഥിതി**:
|
||||
ഈ ദസ്താവേജ് AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് പ്രയത്നിക്കുന്നുണ്ടെങ്കിലും, ഓട്ടോമാറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകളോ അപ്രമാദങ്ങളോ ഉണ്ടാവാൻ സാധ്യതയുള്ളതാണ്. അസൽ പ്രമാണം അതിന്റെ സ്വന്തം ഭാഷയിൽ ആണ് ഔദ്യോഗിക ഉറവിടം എന്നാണ് കരുതുന്നത്. നിർണായക വിവരങ്ങളേക്കുറിച്ച് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന എന്തെങ്കിലും തെറ്റിദ്ധാരണകളോ വ്യാഖ്യാന വ്യത്യാസങ്ങളോ için ഞങ്ങൾ ഉത്തരവാദിത്വം കൈക്കൊള്ളുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,776 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
|
||||
"translation_date": "2026-01-08T13:30:34+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ഒരു സ്പെയ്സ് ഗെയിം നിർമ്മിക്കൽ ഭാഗം 4: ലേസർ ചേർക്കൽ ഒപ്പം ഘർഷണം കണ്ടെത്തൽ
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title നിങ്ങളുടെ കൂട്ടിയിടിപ്പ് കണ്ടെത്തൽ യാത്ര
|
||||
section ഫിസിക്സ് അടിസ്ഥാനങ്ങൾ
|
||||
വൃത്താകൃതികൾ മനസ്സിലാക്കുക: 3: Student
|
||||
ഇടപെടൽ ഗണിതം പഠിക്കുക: 4: Student
|
||||
കോഓർഡിനേറ്റ് സിസ്റ്റങ്ങൾ പിടിച്ചുപറി: 4: Student
|
||||
section ഗെയിം മെക്കാനിക്സ്
|
||||
ലേസർ ഫയർ ചെയ്യുന്നതു നടപ്പിലാക്കുക: 4: Student
|
||||
ഒബ്ജക്റ്റ് ജീവിതചക്രം ചേർക്കുക: 5: Student
|
||||
കൂട്ടിയിടിപ്പ് നിയമങ്ങൾ സൃഷ്ടിക്കുക: 5: Student
|
||||
section സിസ്റ്റം ഇന്റഗ്രേഷൻ
|
||||
കൂട്ടിയിടിപ്പ് കണ്ടെത്തൽ പ്രാവർത്തികമാക്കുക: 5: Student
|
||||
കാര്യക്ഷമത оптимൈസ്ചെയ്യുക: 5: Student
|
||||
ഇന്ററാക്ഷൻ സിസ്റ്റങ്ങൾ പരീക്ഷിക്കുക: 5: Student
|
||||
```
|
||||
## മുൻപുള്ള ക്ലാസിനുള്ള ക്വിസ്
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/35)
|
||||
|
||||
സ്റ്റാർ വാർസിലെ ലൂക്കിന്റെ പ്രോട്ടോൺ ടോർപ്പിഡോകൾ ഡെത്ത് സ്റ്റാറിന്റെ എക്സോസ്റ്റ് പോർട്ടിൽ എപ്പോൾ തൊട്ടു എന്ന് ചിന്തിക്കുക. ആ കൃത്യമായ ഘർഷണം ആലയ്ക്കു വിധി മാറ്റി! ഗെയിമുകളിൽ, ഘർഷണം കണ്ടെത്തൽ അതുപോലെ പ്രവർത്തിക്കുന്നു - ഒബ്ജക്റ്റുകൾ എപ്പോൾ ഇടപെടുകയാണ് എന്നതും തുടർന്ന് എന്താകും എന്നതും നിർണ്ണയിക്കുന്നു.
|
||||
|
||||
ഈ പാഠത്തിൽ, നിങ്ങളുടെ സ്പെയ്സ് ഗെയിമിലേക്ക് ലേസർ അമ്പുകൾ ചേർക്കുകയും ഘർഷണം കണ്ടെത്തൽ നടപ്പിലാക്കുകയും ചെയ്യും. NASAയുടെ മിഷൻ പ്ലാനർമാർ ബ്ളാസ്റ്റ് കഷണങ്ങൾ ഒഴിവാക്കി ബഹിരാകാശക്കപ്പലുകളുടെ ട്രാജക്ടറികൾ കണക്കാക്കുന്നതുപോലെ, നിങ്ങൾ ഗെയിം ഒബ്ജക്റ്റുകൾ എപ്പോൾ ഒട്ടും പരം സമാന്തരിക്കുന്നു എന്ന് കണ്ടെത്താൻ പഠിക്കും. നാം ഇത് ക്രമമായ ഘട്ടങ്ങളായി വിഭജിക്കും.
|
||||
|
||||
അവസാനിപ്പിച്ചപ്പോൾ, ലേസറുകൾ എനിമികൾ നശിപ്പിക്കുകയും ഘർഷണങ്ങൾ ഗെയിം ഇവന്റുകൾ പ്രേരിപ്പിക്കുകയും ചെയ്യുന്ന ഫംഗ്ഷണൽ കോംബാറ്റ് സിസ്റ്റം ഉണ്ടാകും. ഇതുപോലുള്ള ഘർഷണ സിദ്ധാന്തങ്ങൾ ഭൗതിക സിമുലേഷനുകളിൽ നിന്നുയർന്ന് ഇന്ററാക്ടീവ് വെബ് ഇന്റർഫേസുകൾ വരെ എല്ലായിടത്തും ഉപയോഗിക്കുന്നു.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((സഖ്യനിർണയം))
|
||||
Physics Concepts
|
||||
ചതുറ്റളവുകളുടെ അതിരുകൾ
|
||||
ഒത്തൊരുമയുടെ പരീക്ഷണങ്ങൾ
|
||||
കോഓർഡിനേറ്റ് സിസ്റ്റങ്ങൾ
|
||||
വേർതിരിവ് തർകങ്ങൾ
|
||||
Game Objects
|
||||
ലേസർ പ്രൊജക്ടൈലുകൾ
|
||||
ശത്രുവിന്റെ കപ്പലുകൾ
|
||||
ഹീറോ കഥാപാത്രം
|
||||
സഖ്യ മേഖലകൾ
|
||||
Lifecycle Management
|
||||
വസ്തു സൃഷ്ടി
|
||||
ചലനം تازهപ്പെടുത്തലുകൾ
|
||||
നശീകരണ അടയാളങ്ങൾ
|
||||
മെമ്മറി ശുചീകരണം
|
||||
Event Systems
|
||||
കീബോർഡ് ഇൻപുട്ട്
|
||||
സഖ്യ ഇവന്റുകൾ
|
||||
ഗെയിം സ്റ്റേറ്റ് മാറ്റങ്ങൾ
|
||||
ഓഡിയോ/വിസ്വൽ ഇഫക്റ്റുകൾ
|
||||
Performance
|
||||
ഫലപ്രദമായ ആൽഗോരിതങ്ങൾ
|
||||
ഫ്രെയിം നിരക്ക് ഓപ്റ്റിമൈസേഷൻ
|
||||
മെമ്മറി മാനേജ്മെന്റ്
|
||||
സ്ഥലം വിഭജനം
|
||||
```
|
||||
✅ ഏറ്റവും ആദ്യം എഴുതിയ കമ്പ്യൂട്ടർ ഗെയിമിനെ കുറിച്ച് ചെറിയൊരു റിസേർച്ച്ച് ചെയ്യുക. അതിന്റെ ഫംഗ്ഷണാലിറ്റി എന്തായിരുന്നു?
|
||||
|
||||
## ഘർഷണം കണ്ടെത്തൽ
|
||||
|
||||
ഘർഷണം കണ്ടെത്തൽ Apollo ല്യൂണാർ മോഡ്യൂളിലെ പ്രോക്സിമിറ്റി സെൻസറുകൾ പോലെ പ്രവർത്തിക്കുന്നു - കണുകൂടി ദൂരം പരിശോധിച്ച് ഒബ്ജക്റ്റുകൾ വളരെ അടുത്തുവന്നാൽ അലർട്ട് നൽകുന്നു. ഗെയിമുകളിൽ, ഈ സിസ്റ്റം ഒബ്ജക്റ്റുകൾ എപ്പോൾ ഇടപെടുകയാണ് എന്ന് നിർണ്ണയിക്കുകയും തുടർന്ന് എന്താകണം എന്ന് നിബന്ധിക്കുന്നു.
|
||||
|
||||
നാം ഉപയോഗിക്കുന്ന സമീപനം എല്ലാ ഗെയിം ഒബ്ജക്റ്റുകളെയും ഒരു ചതുരേക്കോണം (_rectangle_) ആയി കാണുന്നു, വിമാന ട്രാഫിക് നിയന്ത്രണ സിസ്റ്റങ്ങൾ എയർക്രാഫ്റ്റ് ട്രാക്ക് ചെയ്യുന്നതുപോലെ ലളിതമായ ജ്യാമിതീയ ആകൃതികൾ ഉപയോഗിക്കുന്നത് പോലെ. ഈ ചതുരേക്കോണ പద్ధതി എളുപ്പമുള്ളതെങ്കിലും കണക്ക് കാര്യക്ഷമവും കൂടുതലായി ഗെയിം ദ്രശ്യങ്ങളിൽ മികച്ചതാണ്.
|
||||
|
||||
### ചതുരേകോണ പ്രതിനിധാനം
|
||||
|
||||
എല്ലാ ഗെയിം ഒബ്ജക്റ്റിനും കോർഡിനേറ്റ് അതിരുകൾ വേണം, മാർസ് പാത്ത്ഫൈൻഡർ റോവർ മാരിയൻ ഭൂപ്രകൃതിയിലെ സ്ഥാനം മാപ്പ് ചെയ്തതുപോലെ. അതിരിനിർവ്വചനം ഇപ്രകാരം:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["🎯 ഗെയിം ഒബ്ജക്ട്"] --> B["📍 സ്ഥാനം (x, y)"]
|
||||
A --> C["📏 വലിപ്പങ്ങൾ (വീതി, ഉയരം)"]
|
||||
|
||||
B --> D["മുകൾ: y"]
|
||||
B --> E["ഇടത്: x"]
|
||||
|
||||
C --> F["താഴെ: y + ഉയരം"]
|
||||
C --> G["വലത്: x + വീതി"]
|
||||
|
||||
D --> H["🔲 ചതുരാകൃതിയുടെ പരിധികൾ"]
|
||||
E --> H
|
||||
F --> H
|
||||
G --> H
|
||||
|
||||
H --> I["സംഘർഷ കണ്ടെത്തൽ തയാറാണ്"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style H fill:#e8f5e8
|
||||
style I fill:#fff3e0
|
||||
```
|
||||
```javascript
|
||||
rectFromGameObject() {
|
||||
return {
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**ഇത് വിഭജിച്ചാൽ:**
|
||||
- **മുകളിൽ ഉള്ള അതിരു**: നിങ്ങൾക്ക് ഒബ्जക്റ്റ് ഉയരം ആരംഭിക്കുന്ന y- സ്ഥാനം
|
||||
- **ഇടത് അതിരു**: ദിശാനുയായ ഫലകം ആരംഭിക്കുന്ന x- സ്ഥാനം
|
||||
- **താഴെ അതിരു**: y-സ്ഥാനത്തേക്ക് ഉയരം ചേർക്കുക - ഒടുവിൽ എത്തുന്ന സ്ഥലം
|
||||
- **വലത് അതിരു**: x-സ്ഥാനത്തേക്ക് വീതി ചേർക്കുക - സമ്പൂർണ്ണ അതിരാണു ലഭിച്ചത്
|
||||
|
||||
### ഒട്ടുമെത്തിയാൽ പ്രവർത്തിക്കുന്ന ആൽഗോറിതം
|
||||
|
||||
ചതുരേക്കോണ ഒട്ടുമെത്തൽ കണ്ടെത്തൽ ഹൈബിൾ സ്പേസ് ടെലിസ്കോപ് ആകാശ വസ്തുക്കൾ ഒട്ടുമെത്തിച്ചിട്ടുണ്ടോ എന്ന് പരിശോധിക്കുന്ന പ്രക്രിയയിലേതുപോലെ ആണ് പ്രവർത്തിക്കുന്നത്. ഈ ആൽഗോറിതം ഓർമ്മപ്പെടുത്തുന്നു രാജ്ഡാർ സമ്പ്രദായം:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A["ചതുരഭുജം 1"] --> B{"വ്യത്യാസ പരിശോധനകൾ"}
|
||||
C["ചതുരഭുജം 2"] --> B
|
||||
|
||||
B --> D["R2 ഇടത് > R1 വലത്?"]
|
||||
B --> E["R2 വലതത് < R1 ഇടത്?"]
|
||||
B --> F["R2 മുകളിൽ > R1 താഴെയാണ്?"]
|
||||
B --> G["R2 താഴെ < R1 മുകളിൽ?"]
|
||||
|
||||
D --> H{"ഏത് ശരിയോ?"}
|
||||
E --> H
|
||||
F --> H
|
||||
G --> H
|
||||
|
||||
H -->|അതെ| I["❌ സ്പർശനം ഇല്ല"]
|
||||
H -->|ഇല്ല| J["✅ സ്പർശനം കണ്ടെത്തി"]
|
||||
|
||||
style B fill:#e3f2fd
|
||||
style I fill:#ffebee
|
||||
style J fill:#e8f5e8
|
||||
```
|
||||
```javascript
|
||||
function intersectRect(r1, r2) {
|
||||
return !(r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top);
|
||||
}
|
||||
```
|
||||
|
||||
**വിവരണമടിയിൽ വിലയിരുത്തൽ ചെയ്യുന്നത്:**
|
||||
- റെക്റ്റാംഗിൾ 2 പൂർണമായും റെക്റ്റാംഗിൾ 1-ന്റെ വലത് ഭാഗത്താണോ?
|
||||
- റെക്റ്റാംഗിൾ 2 പൂർണമായും റെക്റ്റാംഗിൾ 1-ന്റെ ഇടത് ഭാഗത്താണോ?
|
||||
- റെക്റ്റാംഗിൾ 2 പൂർണമായും റെക്റ്റാംഗിൾ 1-ന്റെ താഴെ ഭാഗത്താണോ?
|
||||
- റെക്റ്റാംഗിൾ 2 പൂർണമായും റെക്റ്റാംഗിൾ 1-ന്റെ മേൽ ഭാഗത്താണോ?
|
||||
|
||||
ഇവയിൽ ഒന്നും ശരിയല്ലെങ്കിൽ, റെക്റ്റാംഗിളുകൾ ഒട്ടുമെത്തിച്ചിരിക്കണം. ഇത് തന്നെയാണ് റഡാർ ഓപ്പറേറ്റർമാർ വിമാനങ്ങൾ സുരക്ഷിത ദൂരത്താണെന്ന് കണ്ടെത്തുന്നത് പോലെയാണ്.
|
||||
|
||||
## ഒബ്ജക്റ്റുകളുടെ ലൈഫ്സൈകിൾ മാനേജ്മെന്റ്
|
||||
|
||||
ഒരു ലേസർ ഒരു എനിമിയെ തൊട്ടാൽ, രണ്ടു ഒബ്ജക്റ്റുകളും ഗെയിമിൽ നിന്ന് അഴിക്കാൻ വേണം. പക്ഷേ, ലൂപ്പ് നടപ്പിലായി ഘട്ടത്തിൽ ഒബ്ജക്റ്റുകൾ നീക്കം ചെയ്യുന്നത് ക്രാഷ് സംഭവിക്കും - അപ്പോളോ ഗൈഡൻസ് കമ്പ്യൂട്ടറിൽ നേരിട്ട പാഠം. പകരം, "ഡീലക്ഷൻ മാർക്ക്" വഴികള് ഉപയോഗിച്ച് ഫ്രെയിമുകൾക്കിടയിൽ സുരക്ഷിതമായ നീക്കം നടപ്പാക്കുന്നു.
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Active: ഒബ്ജക്റ്റ് സൃഷ്ടിച്ചു
|
||||
Active --> Collided: ഘർഷണം കണ്ടെത്തി
|
||||
Collided --> MarkedDead: മരിച്ചതു true ആയി സജ്ജീകരിച്ചു
|
||||
MarkedDead --> Filtered: അടുത്ത ഫ്രെയിം
|
||||
Filtered --> [*]: ഒബ്ജക്റ്റ് നീക്കം ചെയ്തു
|
||||
|
||||
Active --> OutOfBounds: സ്ക്രീനിൽ നിന്നു പുറത്തേക്ക്
|
||||
OutOfBounds --> MarkedDead
|
||||
|
||||
note right of MarkedDead
|
||||
തുടരാൻ സുരക്ഷിതം
|
||||
നിലവിലെ ഫ്രെയിം
|
||||
end note
|
||||
|
||||
note right of Filtered
|
||||
ഫ്രെയിമുകൾക്കിടയിൽ
|
||||
ഒബ്ജക്റ്റുകൾ നീക്കം ചെയ്തത്
|
||||
end note
|
||||
```
|
||||
ഇങ്ങനെ ഒരു ഒബ്ജക്റ്റ് നീക്കംക്കായി മാർക്ക് ചെയ്യുന്നു:
|
||||
|
||||
```javascript
|
||||
// ഒബ്ജക്ട് നീക്കംചെയ്യാൻ സംചിഹ്നീകരിക്കുക
|
||||
enemy.dead = true;
|
||||
```
|
||||
|
||||
** എങ്ങനെ ഇത് പ്രവർത്തിക്കുന്നു:**
|
||||
- ഒബ്ജക്റ്റ് "മൂടിയ" എന്ന് അടയാളപ്പെടുത്തുന്നു പക്ഷേ ഉടൻ നീക്കംചെയ്യരുത്
|
||||
- നിലവിലെ ഗെയിം ഫ്രെയിം സുരക്ഷിതമായി പൂർത്തിയാക്കുന്നു
|
||||
- ഇപ്പോഴത്തെ ഇല്ലാതായ ഒന്നിനെ ഉപയോഗിക്കാൻ ശ്രമിച്ച് പിഴവ് വരുന്നതില്ല!
|
||||
|
||||
തിൻറെ തുടർന്ന് ഓരോ റൻഡർ ചക്രത്തിനും മുൻപ് മാർക്ക് ചെയ്ത ഒബ്ജക്റ്റുകൾ ഫിൽട്ടർ ചെയ്യുക:
|
||||
|
||||
```javascript
|
||||
gameObjects = gameObjects.filter(go => !go.dead);
|
||||
```
|
||||
|
||||
**ഈ ഫിൽട്ടർ ചെയ്യുന്നത്:**
|
||||
- "സജീവ" ഒബ്ജക്റ്റുകൾ മാത്രം ഉള്ള പുതുക്കിയ പട്ടിക സൃഷ്ടിക്കുന്നു
|
||||
- മരിച്ചവയും ഇല്ലാതാക്കുന്നു
|
||||
- ഗെയിം നീക്കമർച്ച് തുടരുന്നു
|
||||
- നശിച്ച ഒബ്ജക്റ്റുകൾ പെരുകാതിരിക്കാൻ സഹായിക്കുന്നു
|
||||
|
||||
## ലേസർ മെക്കാനിക്സ് നടപ്പിലാക്കൽ
|
||||
|
||||
ഗെയിമിലെ ലേസർ പ്രൊജക്ടൈലുകൾ സ്റ്റാർ ട്രെക്കിലെ ഫോട്ടോൺ ടോർപ്പിഡോകളുടെ പോലെ പ്രവർത്തിക്കുന്നു - അവ้วน സമാന്തര രേഖകളിൽ സഞ്ചരിക്കുമ്പോൾ ഒന്നിനെ തൊട്ടാൽ അവസാനിക്കും. ഓരോ സ്പേസ്ബാർ അമർത്തലും പുതിയ ലേസർ ഒബ്ജക്റ്റ് സൃഷ്ടിക്കുന്നു, അത് സ്ക്രീനിൽ താണ്ടിയടിക്കുന്നു.
|
||||
|
||||
ഇത് പ്രവർത്തിക്കാൻ ചില ഘടകങ്ങൾ ഏകോപിപ്പിക്കണം:
|
||||
|
||||
**നിർവ്വഹണ ഇനങ്ങൾ:**
|
||||
- **സൃഷ്ടിക്കുക** നായകന്റെ സ്ഥാനം മുതൽ ലേസർ ഒബ്ജക്റ്റുകൾ
|
||||
- **ഹാൻഡ്ൾ** കീബോർഡ് ഇന്റപുട്ട് ലേസർ സൃഷ്ടിക്കാനായി
|
||||
- **മാനേജ് ചെയ്യുക** ലേസർ നീക്കം ഒപ്പം ലൈഫ് സൈകിൾ
|
||||
- **നിർവ്വഹിക്കുക** ലേസർ പ്രൊജക്ടൈലുകളുടെ ദൃശ്യ പ്രതിനിധാനം
|
||||
|
||||
## ഷൂട്ടിംഗ് നിരക്ക് നിയന്ത്രണം നടപ്പിലാക്കൽ
|
||||
|
||||
അപരിമിതമായ ഷൂട്ടിംഗ് നിരക്കുകൾ ഗെയിം എൻജിൻ അത്തരമൊരു ഭ്രമം ആക്കി കളി വളരെ എളുപ്പമാക്കും. യഥാർത്ഥ ആയുധ സിസ്റ്റങ്ങൾക്കും തീവ്രമായ നിയന്ത്രണങ്ങൾ ഉണ്ട് - USS എൻറ്പ്രൈസിന്റെ ഫേസേഴ്സിനും ഷൂട്ടിംഗിനുണ്ടായ ഇടവേളകൾ പോലെ.
|
||||
|
||||
നാം കൂൾഡൗൺ സിസ്റ്റം നടപ്പിലെത്തിക്കും, ഇത് റെസ്പോൺസീവ് നിയന്ത്രണങ്ങളെ വെറും സ്പാം ക്ലിക്കിങ് തടയും:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Player
|
||||
participant Weapon
|
||||
participant Cooldown
|
||||
participant Game
|
||||
|
||||
Player->>Weapon: സ്പെയ്സ്ബാർ അമർത്തുക
|
||||
Weapon->>Cooldown: തണുത്തിട്ടുണ്ടോ എന്ന് പരിശോധിക്കുക
|
||||
|
||||
alt ആയുധം സജ്ജമാണ്
|
||||
Cooldown->>Weapon: തണുത്ത് = സത്യം
|
||||
Weapon->>Game: ലേസർ സൃഷ്ടിക്കുക
|
||||
Weapon->>Cooldown: പുതിയ കൂള്ഡൗൺ ആരംഭിക്കുക
|
||||
Cooldown->>Cooldown: തണുത്ത് = അസത്യം
|
||||
|
||||
Note over Cooldown: 500 എംഎസ് വരെ കാത്തിരിക്കുക
|
||||
|
||||
Cooldown->>Cooldown: തണുത്ത് = സത്യം
|
||||
else ആയുധം തണുത്തുകൊണ്ടിരിക്കുന്നു
|
||||
Cooldown->>Weapon: തണുത്ത് = അസത്യം
|
||||
Weapon->>Player: പ്രവർത്തനം ഇല്ല
|
||||
end
|
||||
```
|
||||
```javascript
|
||||
class Cooldown {
|
||||
constructor(time) {
|
||||
this.cool = false;
|
||||
setTimeout(() => {
|
||||
this.cool = true;
|
||||
}, time);
|
||||
}
|
||||
}
|
||||
|
||||
class Weapon {
|
||||
constructor() {
|
||||
this.cooldown = null;
|
||||
}
|
||||
|
||||
fire() {
|
||||
if (!this.cooldown || this.cooldown.cool) {
|
||||
// ലേസർ പ്രോജക്ടൈൽ സൃഷ്ടിക്കുക
|
||||
this.cooldown = new Cooldown(500);
|
||||
} else {
|
||||
// ആയുധം ഇപ്പോഴും തണുപ്പുകയാണ്
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**കൂൾഡൗൺ എങ്ങനെ പ്രവർത്തിക്കുന്നു:**
|
||||
- സൃഷ്ടിച്ചപ്പോൾ ആയുധം "ഹോട്ട്" ആയി ആരംഭിക്കുന്നു (ഇപ്പോൾ ഷൂട്ട് ചെയ്യാൻ കഴിയില്ല)
|
||||
- സമയ പരിധി കഴിഞ്ഞാൽ അത് "കൂൾ" ആകുന്നു (ഷൂട്ടിന് തയ്യാറാണ്)
|
||||
- ഷൂട്ടിങ്ങിന് മുമ്പ് പരിശോധിക്കുന്നു: "ആയുധം കൂൾ ആണോ?"
|
||||
- ഇത് സ്പാം ക്ലിക്കിങ് തടഞ്ഞു കൂട്ടിയതും റെസ്പോൺസീവ് നിയന്ത്രണങ്ങളോടെയാണ്
|
||||
|
||||
✅ സ്പേസ് ഗെയിം സീരീസിലെ പാഠം 1-നെ മത്സരിപ്പിക്കാൻ കൂൾഡൗൺ ഓർമ്മിക്കുക.
|
||||
|
||||
## ഘർഷണ സിസ്റ്റം നിർമ്മിക്കൽ
|
||||
|
||||
നിങ്ങളുടെ നിലവിലുള്ള സ്പെയ്സ് ഗെയിം കോഡ് വിപുലീകരിച്ച് ഘർഷണം കണ്ടെത്തൽ സിസ്റ്റം സൃഷ്ടിക്കും. ഇന്റർനാഷണൽ സ്പേസ് സ്റ്റേഷന്റെ സ്വയം ഘർഷണം ഒഴിവാക്കൽ സംവിധാനത്തിന്റെ പോലെയാണ് നിങ്ങളുടെ ഗെയിം ഒബ്ജക്റ്റുകളെ നിരന്തരം നിരീക്ഷിക്കുകയും ഒട്ടുമെത്തൽ സംഭവിക്കുമ്പോൾ പ്രതികരിക്കുകയും ചെയ്യും.
|
||||
|
||||
മുൻപത്തെ പാഠത്തിലെ കോഡിൽ നിന്നു തുടങ്ങി, ഘർഷണം കണ്ടെത്തൽ പ്രത്യേക നിയമങ്ങളോടെ ഒബ്ജക്റ്റുകൾ ഇടപെടലുകൾ നിയന്ത്രിക്കും.
|
||||
|
||||
> 💡 **പ്രൊ ടിപ്**: ലേസർ സ്പ്രൈറ്റ് നിങ്ങളുടെ അസറ്റുകൾ ഫോൾഡറിൽ ഇതിനകം ഉൾപ്പെടുത്തിയതിനാൽ എളുപ്പത്തിൽ നടപ്പിലാക്കാം.
|
||||
|
||||
### നടപ്പാക്കേണ്ട ഘർഷണ നിയമങ്ങൾ
|
||||
|
||||
**കേംമെറ്റിക്സ് ചേർക്കേണ്ടത്:**
|
||||
1. **ലേസർ എനിമിയെ തൊടുന്നു**: ലേസർ പ്രൊജക്ടൈൽ എനിമിയെ തൊടുമ്പോൾ നശിക്കുന്നു
|
||||
2. **ലേസർ സ്ക്രീൻ അതിരിലേറി**: ലേസർ മുകളിൽ എത്തുമ്പോൾ നീക്കം ചെയ്യുക
|
||||
3. **എനിമി ഒപ്പം നായകൻ ഘർഷിക്കുന്നു**: രണ്ടു ഒബ്ജക്റ്റുകളും ഒട്ടിയാൽ നശിക്കുന്നു
|
||||
4. **എനിമി താഴെയെത്തുന്നു**: സ്ക്രീൻ താഴെ എത്തിയാൽ ഗെയിം ഓവർ
|
||||
|
||||
### 🔄 **പഠന സ്ഥിതി പരിശോധന**
|
||||
**ഘർഷണം കണ്ടെത്തൽ അടിസ്ഥാനങ്ങൾ**: നടപ്പിലാക്കുന്നതിനുമുമ്പ് ഉറപ്പാക്കാം:
|
||||
- ✅ ചതുരേക്കോൺ അതിരുകൾ ഘർഷണ മേഖല നിർവ്വചിക്കുന്നത് എങ്ങനെ?
|
||||
- ✅ വേർതിരിയൽ പരിശോധന ഒട്ടുമെത്തൽ തുകൽക്കാൾ കാര്യക്ഷമമെന്ന് എന്തുകൊണ്ട്?
|
||||
- ✅ ഗെയിം ലൂപുകളിൽ ഒബ്ജക്റ്റ് ലൈഫ്സൈക്ൾ മാനേജ്മെന്റ് പ്രധാനത
|
||||
- ✅ ഇവന്റുകൾ ചലിക്കുന്ന ഘർഷണ പ്രതികരണങ്ങൾ എങ്ങനെ ഏകോപിപ്പിക്കുന്നു
|
||||
|
||||
**ഷോർട്ട് സെൽഫ്-ടെസ്റ്റ്**: ഒബ്ജക്റ്റുകൾ ഉടനടി നീക്കം ചെയ്താൽ എന്താകും?
|
||||
*ഉത്തരം: മിഡ്-ലൂപ്പ് ഡീലക്ഷന്റെ പിഴവ് അല്ലെങ്കിൽ ഐറ്ററേഷൻ ഒഴിവാക്കൽ സംഭവിക്കും*
|
||||
|
||||
**ഭൗതിക ബോധം**: നിങ്ങൾക്കു മനസ്സിലായി:
|
||||
- **കോഓർഡിനേറ്റ് സിസ്റ്റങ്ങൾ**: സ്ഥാനം വീതിയും അതിരുകൾ നിർണയിച്ചുവരുന്നു
|
||||
- **ഒട്ടുമെത്തൽ ലെജിക്**: ഘർഷണം കണ്ടെത്തലിന്റെ ഗണിത സിദ്ധാന്തങ്ങൾ
|
||||
- **പരഫോമൻസ് ഒപ്റ്റിമൈസേഷൻ**: റിയൽ-ടൈം സിസ്റ്റങ്ങൾക്കു പ്രയോജനം
|
||||
- **മെമ്മറി മാനേജ്മെന്റ്**: സുരക്ഷിതമായ ഒബ്ജക്റ്റ് ലൈഫ്സൈകിൾ രീതികൾ
|
||||
|
||||
## ഡെവലപ്മെന്റ് പരിസരം സജ്ജമാക്കൽ
|
||||
|
||||
സുഖവാർത്ത - എല്ലാ ആസറ്റുകളും നിഗൂഢ ഘടനകളും `your-work` സബ് ഫോളഡറിൽ സജ്ജമാണ്, നിങ്ങൾക്ക് ഇപ്പോൾ തണുത്ത ഘർഷണ ഫീച്ചറുകൾ ചേർക്കാം.
|
||||
|
||||
### പ്രോജക്റ്റ് ഘടന
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
**ഫയൽ ഘടന മനസ്സിലാക്കുക:**
|
||||
- ഗെയിം ഒബ്ജക്റ്റുകൾക്കുള്ള എല്ലാ സ്പ്രൈറ്റ് ചിത്രങ്ങളും ഉള്ളത്
|
||||
- പ്രധാന HTML ഡോക്യൂമെന്റും ജാവാസ്ക്രിപ്റ്റ് ആപ്പ് ഫയൽ ഉൾക്കൊള്ളുന്നു
|
||||
- പ്രാദേശിക ഡെവലപ്മെന്റ് സർവർ പാക്കേജ് കോൺഫിഗറേഷൻ
|
||||
|
||||
### ഡെവലപ്മെന്റ് സർവർ ആരംഭിക്കൽ
|
||||
|
||||
നിങ്ങളുടെ പ്രോജക്റ്റ് ഫോൾഡറിൽ പോയി ലോക്കൽ സർവർ ആരംഭിക്കുക:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
**ഈ കമാൻഡ് ക്രമം:**
|
||||
- പ്രോജക്റ്റ് ഡയറക്ടറിയിലേക്ക് മാറുന്നു
|
||||
- `http://localhost:5000` ലെ ലോക്കൽ HTTP സർവർ ആരംഭിക്കുന്നു
|
||||
- ഗെയിം ഫയലുകൾ ടെസ്റ്റിംഗിനും ഡെവലപ്മെന്റിനും സർവുചെയ്യുന്നു
|
||||
- ലൈവ് ഡെവലപ്മെന്റ് എളുപ്പമാക്കാൻ ഓട്ടോംറിലോഡ് സജ്ജീകരിക്കുന്നു
|
||||
|
||||
ബ്രൗസർ തുറന്ന് `http://localhost:5000` സന്ദർശിക്കുക; നായകൻ, എനിമികൾ സ്ക്രീനിൽ കാഴ്ചവെക്കും.
|
||||
|
||||
### ഘട്ടം ഘട്ടമായ നടപ്പാക്കൽ
|
||||
|
||||
നാസ ഓണറുകളായ വോയ്ജർ ബഹിരാകാശ ബോധിയുടെ പ്രോഗ്രാമിംഗുപോലെ നാം ഘർഷണം കണ്ടെത്തൽ ക്രമമായി നടപ്പിലാക്കാം, ഓരോ ഘടകവും ഉടനടി സൃഷ്ടിച്ച്.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["1. രേഖചതുരങ്ങളുടെ അതിരുകൾ"] --> B["2. ഇന്റേഴ്സക്ഷൻ കണ്ടെത്തൽ"]
|
||||
B --> C["3. ലേസർ സിസ്റ്റം"]
|
||||
C --> D["4. ഇവന്റ് കൈകാര്യംചെയ്യൽ"]
|
||||
D --> E["5. അപകടനിബന്ധനകൾ"]
|
||||
E --> F["6. കൂൾഡൗൺ സിസ്റ്റം"]
|
||||
|
||||
G["വസ്തു അതിരുകൾ"] --> A
|
||||
H["ഭൗതിക ആൽഗോരിതം"] --> B
|
||||
I["പ്രോജക്ടൈൽ സൃഷ്ടി"] --> C
|
||||
J["കീബോർഡ് ഇൻപുട്ട്"] --> D
|
||||
K["ഗെയിം ലജിക്"] --> E
|
||||
L["വേഗം നിയന്ത്രണം"] --> F
|
||||
|
||||
F --> M["🎮 സമ്പൂർണ്ണ ഗെയിം"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
style F fill:#fce4ec
|
||||
style M fill:#e1f5fe
|
||||
```
|
||||
#### 1. ചതുരേക്കോൺ ഘർഷണ അതിരുകൾ ചേർക്കുക
|
||||
|
||||
ആദ്യം, നിങ്ങളുടെ ഗെയിം ഒബ്ജക്റ്റുകൾ അതിരുകൾ നിർവ്വചിക്കുന്ന രീതിയെ പഠിപ്പിക്കൂ. ഇത് `GameObject` ക്ലാസിൽ ചേർക്കുക:
|
||||
|
||||
```javascript
|
||||
rectFromGameObject() {
|
||||
return {
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
**ഈ മെത്തേഡ് ചെയ്യുന്നത്:**
|
||||
- കൃത്യമായ അതിരുകൾ ഉള്ള ഒരു റ്റെക്റ്റാംഗിൾ ഒബ്ജക്റ്റ് സൃഷ്ടിക്കുന്നു
|
||||
- സ്ഥാനത്തും അളവുകളும் ചേർത്ത് താഴെയും വലത്തെയും കണക്കാക്കുന്നു
|
||||
- ഘർഷണം കണ്ടെത്തൽ ആൽഗോറിതങ്ങൾക്ക് ക്രമത്തിൽ ഡാറ്റ നൽകുന്നു
|
||||
- എല്ലാ ഗെയിം ഒബ്ജക്റ്റുകൾക്കും സ്ഥിരതയുള്ള ഇന്റർഫേസ് നൽകുന്നു
|
||||
|
||||
#### 2. ഒട്ടുമെത്തൽ കണ്ടെത്തൽ നടപ്പിലാക്കുക
|
||||
|
||||
ഇപ്പോൾ രണ്ട് റ്റെക്റ്റാംഗിൾ ഒട്ടുമെത്തുന്നുണ്ടോ എന്ന് കണ്ടെത്തുന്ന ഫംഗ്ഷൻ സൃഷ്ടിക്കുക:
|
||||
|
||||
```javascript
|
||||
function intersectRect(r1, r2) {
|
||||
return !(
|
||||
r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**ആൽഗോറിതം ചെയ്യുന്നത്:**
|
||||
- റ്റെക്റ്റാംഗിളുകൾ തമ്മിലുള്ള നാല് വേർതിരിയൽ ഘട്ടങ്ങൾ പരീക്ഷിക്കുന്നു
|
||||
- വേർതിരിയൽ സംഭവിച്ചാൽ 'false' തിരിച്ചുവിടുന്നു
|
||||
- വേർതിരിയൽ ഇല്ലെങ്കിൽ ഒട്ടുമെത്തൽ നിർദ്ദിഷ്ടമാക്കുന്നു
|
||||
- നെഗേഷൻ ലൊജിക് ഉപയോഗിച്ച് കാര്യക്ഷമ പരിശോധന
|
||||
|
||||
#### 3. ലേസർ ഷൂട്ടിംഗ് സിസ്റ്റം നടപ്പിലാക്കുക
|
||||
|
||||
ഇവിടെ രസകരമായ ഘട്ടം! ലേസർ ഷൂട്ടിംഗ് സിസ്റ്റം ക്രമീകരിക്കുക.
|
||||
|
||||
##### സന്ദേശ സ്ഥിരം വാക്കുകൾ
|
||||
|
||||
ക്ലാസുകൾ തമ്മിൽ സംവദിക്കാൻ വിവിധ ഈവന്റ് പേര് നിർവചിക്കുക:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
|
||||
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
|
||||
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
|
||||
```
|
||||
|
||||
**ചില സ്ഥിരം വാക്കുകൾ:**
|
||||
- അപ്പ്ലിക്കേഷനിൽ അവസാനത്തോളം ഈവന്റ് നാമങ്ങൾ ഒരുപോലാക്കുന്നു
|
||||
- ഗെയിം സിസ്റ്റങ്ങൾ തമ്മിൽ സ്ഥിരതയുള്ള ആശയവിനിമയം
|
||||
- ഈവന്റ് രജിസ്ട്രേഷനിൽ ടൈപ്പോ ഒഴിവാക്കുന്നു
|
||||
|
||||
##### കീബോർഡ് ഇൻപുട്ട് കൈകാര്യം
|
||||
|
||||
നിങ്ങളുടെ കീ ഇവന്റ് ലിസ്തനറിൽ സ്പേസ് കീ കണ്ടുപിടിക്കുക:
|
||||
|
||||
```javascript
|
||||
} else if(evt.keyCode === 32) {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
|
||||
}
|
||||
```
|
||||
|
||||
**ഈ ഇൻപുട്ട് ഹാൻഡ്ലർ:**
|
||||
- keyCode 32 ഉപയോഗിച്ച് സ്പേസ് കീ അമർത്തലുകൾ കണ്ടെത്തുന്നു
|
||||
- സ്റ്റാൻഡേർഡ് ഈവന്റ് സന്ദേശം പുറപ്പെടുവിക്കുന്നു
|
||||
- ഷൂട്ടിംഗ് ലോജിക് ഡിഗ്നൈമാക്കി വിടുന്നു
|
||||
|
||||
##### ഈവന്റ് ലിസ്തനർ സജ്ജമാക്കൽ
|
||||
|
||||
`initGame()` ഫംഗ്ഷനിൽ ഷൂട്ടിംഗ് പെരുമാറ്റം രജിസ്റ്റർ ചെയ്യുക:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
|
||||
if (hero.canFire()) {
|
||||
hero.fire();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**ഈ ഈവന്റ് ലിസ്തനർ:**
|
||||
- സ്പേസ് കീ സംഭവങ്ങൾക്ക് പ്രതികരിക്കുന്നു
|
||||
- ഷൂട്ടിംഗ് കൂൾഡൗൺ നില ഞെക്കുന്നു
|
||||
- അനുമതിയുള്ളപ്പോൾ ലേസർ സൃഷ്ടിക്കുന്നു
|
||||
|
||||
ലേസർ-എനമി ഘർഷണം കൈകാര്യം ചെയ്യുക:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
});
|
||||
```
|
||||
|
||||
**ഘർഷണം ഹാൻഡ്ലർ:**
|
||||
- രണ്ട് ഒബ്ജക്റ്റുകൾ ഉള്ള ഘർഷണം ഡാറ്റ സ്വീകരിക്കുന്നു
|
||||
- രണ്ട് ഒബ്ജക്റ്റും നീക്കം ചെയ്യാൻ അടയാളപ്പെടുത്തുന്നു
|
||||
- ശരിയായ ക്ലീനപ്പ് ഉറപ്പാക്കുന്നു
|
||||
|
||||
#### 4. ലേസർ ക്ലാസ് സൃഷ്ടിക്കുക
|
||||
|
||||
സ്വയം നീങ്ങുകയും ലൈഫ് സൈകിൾ മാനേജുമെന്റ് ചെയ്യുന്ന ലേസർ പ്രൊജക്ടൈൽ രൂപീകരിക്കുക:
|
||||
|
||||
```javascript
|
||||
class Laser extends GameObject {
|
||||
constructor(x, y) {
|
||||
super(x, y);
|
||||
this.width = 9;
|
||||
this.height = 33;
|
||||
this.type = 'Laser';
|
||||
this.img = laserImg;
|
||||
|
||||
let id = setInterval(() => {
|
||||
if (this.y > 0) {
|
||||
this.y -= 15;
|
||||
} else {
|
||||
this.dead = true;
|
||||
clearInterval(id);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**ക്ലാസ് നടപ്പിലാക്കൽ:**
|
||||
- GameObjectക്ലാസിൽ നിന്നു വൻദ്ധാനം ചെയ്യുന്നു
|
||||
- ലേസർ സ്പ്രൈറ്റിന് യോജിച്ച അളവുകൾ സജ്ജമാക്കുന്നു
|
||||
- സജ്ജീകരിച്ച setInterval() വഴി സ്വയം മുകളിൽ നീങ്ങുന്നു
|
||||
- സ്ക്രീൻ മുകളില് എത്തുമ്പോൾ സ്വയം നശിക്കുന്നു
|
||||
- സ്വയം അനിമേഷൻ ടൈമിംഗും ക്ലീനപ്പും കൈകാര്യം ചെയ്യുന്നു
|
||||
|
||||
#### 5. ഘർഷണം കണ്ടെത്തൽ സിസ്റ്റം നടപ്പിലാക്കുക
|
||||
|
||||
കൺപ്രഹെൻസീവ് ഘർഷണം കണ്ടെത്തൽ ഫംഗ്ഷൻ സൃഷ്ടിക്കുക:
|
||||
|
||||
```javascript
|
||||
function updateGameObjects() {
|
||||
const enemies = gameObjects.filter(go => go.type === 'Enemy');
|
||||
const lasers = gameObjects.filter(go => go.type === "Laser");
|
||||
|
||||
// ലേസർ-മതിലുകൾ തമ്മിലുള്ള കൂട്ടിയിടിപ്പ് പരിശോധിക്കുക
|
||||
lasers.forEach((laser) => {
|
||||
enemies.forEach((enemy) => {
|
||||
if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
|
||||
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
|
||||
first: laser,
|
||||
second: enemy,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// നശിച്ച വസ്തുക്കൾ നീക്കം ചെയ്യുക
|
||||
gameObjects = gameObjects.filter(go => !go.dead);
|
||||
}
|
||||
```
|
||||
|
||||
**ചടങ്ങിൽ:**
|
||||
- ഫിൽട്ടർ ചെയ്തു ലേസറുകളും എനമികളും ടെസ്റ്റ് ചെയ്യുന്നു
|
||||
- ഓരോ ലേസറിനും എല്ലാ എനമിയോടും ഒട്ടുമെത്തൽ പരിശോധിക്കുന്നു
|
||||
- ഒട്ടുമെത്തലുണ്ടായാൽ ഘർഷണം ഇവന്റ് പുറപ്പെടുവിക്കുന്നു
|
||||
- ഘർഷണം പൂർത്തിയാകുമ്പോൾ നശിച്ച ഒബ്ജക്റ്റുകൾ നീക്കം ചെയ്യുന്നു
|
||||
|
||||
> ⚠️ **മഹത്വം**: `window.onload`യിലെ പ്രധാന ഗെയിം ലൂപിൽ `updateGameObjects()` ചേർക്കുക ഘർഷണം കണ്ടെത്തൽ സജ്ജമാക്കാൻ.
|
||||
|
||||
#### 6. ഹീറോ ക്ലാസിൽ കൂൾഡൗൺ സിസ്റ്റം ചേർക്കുക
|
||||
|
||||
ഷൂട്ടിംഗ് മെക്കാനിക്സ് അടങ്ങുന്ന ഹീറോ ക്ലാസ് മെച്ചപ്പെടുത്തുക:
|
||||
|
||||
```javascript
|
||||
class Hero extends GameObject {
|
||||
constructor(x, y) {
|
||||
super(x, y);
|
||||
this.width = 99;
|
||||
this.height = 75;
|
||||
this.type = "Hero";
|
||||
this.speed = { x: 0, y: 0 };
|
||||
this.cooldown = 0;
|
||||
}
|
||||
|
||||
fire() {
|
||||
gameObjects.push(new Laser(this.x + 45, this.y - 10));
|
||||
this.cooldown = 500;
|
||||
|
||||
let id = setInterval(() => {
|
||||
if (this.cooldown > 0) {
|
||||
this.cooldown -= 100;
|
||||
} else {
|
||||
clearInterval(id);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
canFire() {
|
||||
return this.cooldown === 0;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**വികസിച്ച ഹീറോ ക്ലാസ്:**
|
||||
- കൂൾഡൗൺ ടൈമർ ശൂന്യത്തിൽ തുടങ്ങിയിരിക്കുന്നു (ഷൂട്ടിനു സജ്ജം)
|
||||
- നായകന്റെ ആകാശത്തിലേക്ക് ലേസർ ഒബ്ജക്റ്റുകൾ സൃഷ്ടിക്കുന്നു
|
||||
- തോക്ക് വേഗത നിയന്ത്രിക്കാൻ കൂൾഡൗൺ കാലം സജ്ജമാക്കുന്നു
|
||||
- ഇന്റർവൽ അടിസ്ഥാനത്തിൽ കൂൾഡൗൺ ടൈമർ കുറയ്ക്കുന്നു
|
||||
- `canFire()` വഴി ഷൂട്ടിംഗ് സാധ്യമായിരിക്കുന്നെന്ന് പരിശോധിക്കുന്നു
|
||||
|
||||
### 🔄 **പഠന സ്ഥിതി പരിശോധന**
|
||||
**സിസ്റ്റം പൂർണ്ണ ബോധം**: നിങ്ങളുടെ ഘർഷണ സിസ്റ്റം മേൽനോട്ടം ശരിയെന്ന് ഉറപ്പാക്കൂ:
|
||||
- ✅ ചതുരേക്കോൺ അതിരുകൾ എങ്ങനെ കാര്യക്ഷമ ഘർഷണം കണ്ടെത്തലിനുള്ള വഴിയൊരുക്കുന്നു?
|
||||
- ✅ ഒബ്ജക്റ്റ് ലൈഫ്സൈകിൾ മാനേജ്മെന്റ് ഗെയിം സ്ഥിരതയിൽ എന്തു പങ്ക് വഹിക്കുന്നു?
|
||||
- ✅ കൂൾഡൗൺ സിസ്റ്റം പ്രകടനം മെച്ചപ്പെടുത്തുന്നതെങ്ങിനെ തടയുന്നു?
|
||||
- ✅ ഇവന്റ് ഡ്രിവൺ ആർക്കിടെക്ചർ ഘർഷണം കൈകാര്യം ചെയ്യുന്നതിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നു?
|
||||
|
||||
**സിസ്റ്റം ഇന്റിഗ്രേഷൻ**: നിങ്ങളുടെ ഘർഷണം കണ്ടെത്തൽ:
|
||||
- **ഗണിത കൃത്യത**: റ്റെക്റ്റാംഗിൾ ഒട്ടുപിടിപ്പ് ആൽഗോറിതങ്ങൾ
|
||||
- **പ്രകടന മെച്ചപ്പെടുത്തൽ**: കാര്യക്ഷമ ടെസ്റ്റിംഗ് മാതൃകകൾ
|
||||
- **മെമ്മറി മാനേജ്മെന്റ്**: സുരക്ഷിത ഒബ്ജക്റ്റ് സൃഷ്ടിയും നശീകരണവും
|
||||
- **ഇവന്റ് ഏകോപനം**: ഡികപ്പിള്ഡ് സിസ്റ്റം ആശയവിനിമയം
|
||||
- **റിയൽ-ടൈം പ്രോസസ്സിംഗ്**: ഫ്രെയിം അധിഷ്ഠിത അപ്ഡേറ്റ് ചക്രങ്ങൾ
|
||||
|
||||
**പ്രൊഫഷണൽ പാറ്റേണുകൾ**: നിങ്ങൾ നടപ്പിലാക്കിയിരിക്കുന്നത്:
|
||||
- **പൃഥകിച്ച പിന്തുണകൾ**: ഫിസിക്സ്, റെൻഡറിംഗ്, ഇൻപുട്ട് വിഭജനം
|
||||
- **ഒബ്ജക്റ്റ്-ഓറിയന്റഡ് ഡിസൈൻ**: ഇൻഹെറിട്ടൻസ്, પોલിമോർഫിസം
|
||||
- **സ്റ്റേറ്റ് മാനേജ്മെന്റ്**: ഒബ്ജക്റ്റ് ലൈഫ്സൈകിൾ, ഗെയിം സ്റ്റേറ്റ് ട്രാക്കിംഗ്
|
||||
- **പ്രകടന മെച്ചപ്പെടുത്തൽ**: റിയൽ-ടൈം ആൽഗോറിതങ്ങൾ
|
||||
|
||||
### നിങ്ങളുടെ നടപ്പാക്കൽ പരീക്ഷിക്കുക
|
||||
|
||||
നിങ്ങളുടെ സ്പെയ്സ് ഗെയിം ഇപ്പോൾ പൂർണ്ണമായ ഘർഷണം കണ്ടെത്തലും കോംബാറ്റ് മെക്കാനിക്സും ഉൾക്കൊള്ളുന്നു. 🚀 ഈ പുതിയ ഫീച്ചറുകൾ പരീക്ഷിക്കുക:
|
||||
- അറോ കീകൾ ഉപയോഗിച്ച് നീക്കം നിയന്ത്രണം പരിശോദിക്കുക
|
||||
- സ്പേസ്ബാർ ഉപയോഗിച്ച് ലേസറുകൾ ഉത്ഭവിപ്പിക്കുക - കൂൾഡൗൺ സ്പാം ക്ലിക്കിങ് തടയുന്നുണ്ടെന്ന് ശ്രദ്ധിക്കുക
|
||||
- ലേസറുകൾ എനിമികളെ തൊടുമ്പോൾ സംഭവിക്കുന്ന ഘർഷണങ്ങൾ കാണുക
|
||||
- നശിച്ച ഒബ്ജക്റ്റുകൾ ഗെയിമിൽ നിന്നും അലയുന്നത് പരിശോധിക്കുക
|
||||
|
||||
നിങ്ങൾ ബഹിരാകാശ യാത്രകളെയും റോബോട്ടിക്സിനെ ആസ്പദമാക്കി ഉപയോഗിക്കുന്ന ഗണിത സിദ്ധാന്തങ്ങൾ ഉപയോഗിച്ച് ഘർഷണം കണ്ടെത്തൽ സിസ്റ്റം വിജയകരമായി നടപ്പിലാക്കിയിരിക്കുന്നു.
|
||||
|
||||
### ⚡ **അടുത്ത 5 മിനുട്ടിൽ ചെയ്യാവുന്നതുകൾ**
|
||||
- [ ] ബ്രൗസറിലെ ഡെവ്ടൂൾസ് খুলി, ഘർഷണം കണ്ടെത്തൽ ഫംഗ്ഷനിൽ ബ്രേക്ക്പോയിന്റുകൾ സെറ്റുചെയ്യുക
|
||||
- [ ] ലേസർ വേഗത അല്ലെങ്കിൽ എനമി നീക്കം മാറ്റി ഘർഷണ ഫലങ്ങൾ പരിശോധിക്കുക
|
||||
- [ ] വ്യത്യസ്ത കൂൾഡൗൺ മൂല്യങ്ങൾ പരീക്ഷിച്ച് ഷൂട്ടിംഗ് നിരക്ക് വിലയിരുത്തുക
|
||||
- [ ] കോൾഷൻ ഇവന്റുകൾ റിയൽ ടൈമിൽ ട്രാക്ക് ചെയ്യാൻ `console.log` സ്റ്റേറ്റ്മെന്റുകൾ ചേർക്കുക
|
||||
|
||||
### 🎯 **ഈ മണിക്കൂറിൽ თქვენ സാധ്യമാക്കാൻ കഴിയും**
|
||||
- [ ] പാഠത്തിനുശേഷമുള്ള ക്വിസ് പൂർത്തിയാക്കി കോൾഷൻ ഡിറ്റക്ഷൻ ആൽഗോരിതങ്ങൾ മനസിലാക്കുക
|
||||
- [ ] കോൾഷനുകൾ സംഭവിക്കുമ്പോൾ സ്ഫോടനങ്ങൾ പോലുള്ള ദൃശ്യ പ്രഭാവങ്ങൾ ചേർക്കുക
|
||||
- [ ] വിവിധ സ്വഭാവമുള്ള/projectiles ടൈപ്പുകൾ നടപ്പിലാക്കുക
|
||||
- [ ] കളിക്കാരന്റെ കഴിവുകൾ താൽക്കാലികമായി മെച്ചപ്പെടുത്തുന്ന പവർ-അപ്പുകൾ സൃഷ്ടിക്കുക
|
||||
- [ ] കോൾഷനുകൾ കൂടുതല് സന്തോഷമാക്കാൻ ശബ്ദ പ്രഭാവങ്ങൾ ചേർക്കുക
|
||||
|
||||
### 📅 **നിങ്ങളുടെ ആഴ്ചപ്പഴക്കം ഫിസിക്സ് പ്രോഗ്രാമിങ്**
|
||||
- [ ] പരിപൂണമായ കോൾഷൻ സിസ്റ്റങ്ങളോടുകൂടിയ പൂർണ്ണ സ്പേസ് ഗെയിം പൂർത്തിയാക്കുക
|
||||
- [ ] റെക്ടാംഗിളുകൾക്ക് മുകളിൽ ഉയർന്ന കോൾഷൻ ആകൃതികളായ (സർക്കിള്, പോളിഗൺ എന്നിവ) നടപ്പിലാക്കുക
|
||||
- [ ] യാഥാർത്ഥ്യമാണ് സ്ഫോടന പ്രഭാവങ്ങൾക്കായി പാർട്ടിക്കിൾ സിസ്റ്റങ്ങൾ ചേർക്കുക
|
||||
- [ ] കോൾഷൻ ഒഴിവാക്കൽ പ്രകടനമുള്ള കോംപ്ലക്സ് എനറ്മി പെരുമാറ്റം സൃഷ്ടിക്കുക
|
||||
- [ ] അനവധി ഒബ്ജക്ടുകളോടുള്ള മികച്ച പ്രകടനത്തിനായി കോൾഷൻ ഡിറ്റക്ഷൻ ഒപ്പോറ്ത്തിമൈസ് ചെയ്യുക
|
||||
- [ ] മോമെന്റം പോലുള്ള ഫിസിക്സ് സിമുലേഷൻ ചേർക്കുക, യാഥാർത്ഥ്യശെയ്യുന്ന ചലനം
|
||||
|
||||
### 🌟 **നിങ്ങളുടെ മാസംനാളത്തെ ഗെയിം ഫിസിക്സ് മാസ്റ്ററി**
|
||||
- [ ] പരിപൂർണ്ണ ഫിസിക്സ് എഞ്ചിനുകളും യാഥാർത്ഥ്യശെയ്യുന്ന സിമുലേഷനുകളും ഉള്ള ഗെയിമുകൾ നിർമ്മിക്കുക
|
||||
- [ ] 3D കോൾഷൻ ഡിറ്റക്ഷനും സ്ഥലം തിരിച്ചറിയൽ ആൽഗോരിതങ്ങളും പഠിക്കുക
|
||||
- [ ] ഓപ്പൺ സോഴ്സ് ഫിസിക്സ് ലൈബ്രറികളിലും ഗെയിം എഞ്ചിനുകളിലും സംഭാവന നൽകുക
|
||||
- [ ] ഗ്രാഫിക്സ്-ഇൻറൻസീവ് ആപ്ലിക്കേഷനുകൾക്കുള്ള പ്രകടന ഒപ്പോറ്ത്തിമൈസേഷൻ മാസ്റ്റർ ചെയ്യുക
|
||||
- [ ] ഗെയിം ഫിസിക്സും കോൾഷൻ ഡിറ്റക്ഷനും സംബന്ധിച്ച വിദ്യാഭ്യാസ ഉള്ളടക്കം സൃഷ്ടിക്കുക
|
||||
- [ ] പരിപൂർണ്ണ ഫിസിക്സ് പ്രോഗ്രാമിങ് കഴിവുകൾ പ്രദർശിപ്പിക്കുന്ന പോർട്ട്ഫോളിയോ നിർമ്മിക്കുക
|
||||
|
||||
## 🎯 നിങ്ങളുടെ കോൾഷൻ ഡിറ്റക്ഷൻ മാസ്റ്ററി ടൈംലൈൻ
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title കോളിഷൻ ഡിറ്റക്ഷൻ & ഗെയിം ഫിസിക്സ് പഠന പുരോഗതി
|
||||
|
||||
section അടിസ്ഥാനപരമായത് (10 മിനിറ്റ്)
|
||||
Rectangle Math: കോർഡിനേറ്റ് സിസ്റ്റങ്ങൾ
|
||||
: അതിർത്തി കണക്കുകൂട്ടലുകൾ
|
||||
: സ്ഥിതി പിന്തുടർച്ച
|
||||
: വലിപ്പം മാനേജ്മെന്റ്
|
||||
|
||||
section ആൾഗോരിതം രൂപകൽപ്പന (20 മിനിറ്റ്)
|
||||
Intersection Logic: വേർതിരിക്കൽ ടെസ്റ്റിംഗ്
|
||||
: ഒതുക്കം കണ്ടെത്തൽ
|
||||
: പ്രകടന മെച്ചപ്പെടുത്തൽ
|
||||
: എജ്ജ് കെയ്സ് കൈകാര്യം
|
||||
|
||||
section ഗെയിം നടപ്പ് (30 മിനിറ്റ്)
|
||||
Object Systems: ജീവിത ചക്രം മാനേജ്മെന്റ്
|
||||
: ഇവന്റ് കോർഡിനേഷൻ
|
||||
: സ്ഥിതി പിന്തുടർച്ച
|
||||
: മെമ്മറി ക്ലീനപ്പ്
|
||||
|
||||
section ഇന്ററാക്ടീവ് സവിശേഷതകൾ (40 മിനിറ്റ്)
|
||||
Combat Mechanics: പ്രോജക്ടൈൽ സിസ്റ്റങ്ങൾ
|
||||
: ആയുധം കൂൾഡൗണുകൾ
|
||||
: കേടു കണക്കുകൂട്ടൽ
|
||||
: ദൃശ്യ പ്രതികരണം
|
||||
|
||||
section മുൻശ്രേണി ഫിസിക്സ് (50 മിനിറ്റ്)
|
||||
Real-time Systems: ഫ്രെയിം റേറ്റ് ഓപ്റ്റിമൈസേഷൻ
|
||||
: സ്ഥലബന്ധിത വിഭജനം
|
||||
: കോളിഷൻ പ്രതികരണം
|
||||
: ഫിസിക്സ് സിമുലേഷൻ
|
||||
|
||||
section പ്രൊഫഷണൽ സാങ്കേതിക വിദ്യകൾ (1 ആഴ്ച)
|
||||
Game Engine Concepts: ഘടകം സിസ്റ്റങ്ങൾ
|
||||
: ഫിസിക്സ് പൈപ്പ്ലൈൻസ്
|
||||
: പ്രകടന പ്രഫൈലിംഗ്
|
||||
: ക്രോസ് പ്ലാറ്റ്ഫോം ഓപ്റ്റിമൈസേഷൻ
|
||||
|
||||
section വ്യവസായ പ്രയോഗങ്ങൾ (1 മാസം)
|
||||
Production Skills: വലിയ തോതിലുള്ള മെച്ചപ്പെടുത്തൽ
|
||||
: ടീമിന്റെ സഹകരണം
|
||||
: എഞ്ചിൻ വികസനം
|
||||
: പ്ലാറ്റ്ഫോം വിന്യാസം
|
||||
```
|
||||
### 🛠️ നിങ്ങളുടെ ഗെയിം ഫിസിക്സ് ടൂൾകിറ്റ് സംഗ്രഹം
|
||||
|
||||
ഈ പാഠം പൂർത്തിയാക്കിയശേഷം, നിങ്ങൾ ഇപ്പോൾ മാസ്റ്റർ ചെയ്കട് ചെയ്തു:
|
||||
- **കൊളിഷൻ ഗണിതശാസ്ത്രം**: റെക്ടാംഗിൾ ഇന്റേഴ്സെക്ഷൻ ആൽഗോരിതങ്ങളും കോഓർഡിനേറ്റ് സിസ്റ്റവും
|
||||
- **പ്രകടന ഒപ്പോറ്ത്തിമൈസേഷൻ**: റിയൽ-ടൈം ആപ്ലിക്കേഷനുകൾക്കുള്ള ഫലപ്രദമായ കോൾഷൻ ഡിറ്റക്ഷൻ
|
||||
- **ഒബ്ജക്ട് ലൈഫ്സൈക്കിൾ മാനേജ്മെന്റ്**: സുരക്ഷിതമായ സൃഷ്ടി, अपडेट്, നശീകരണ പാറ്റേൺസ്
|
||||
- **ഇവന്റ്ഡ്രിവൻ ആർക്കിടെക്ചർ**: കോൾഷൻ പ്രതികരണത്തിനായുള്ള അവിടറിഞ്ഞ സംവിധാനങ്ങൾ
|
||||
- **ഗെയിം ലൂപ്പ് ഇന്റഗ്രേഷൻ**: ഫ്രെയിം അടിസ്ഥാന ഫിസിക്സ് അപ്ഡേറ്റുകളും റെൻഡറിംഗ് കോർഡിനേഷനും
|
||||
- **ഇൻപുട്ട് സിസ്റ്റങ്ങൾ**: റേറ്റ് ലിമിറ്റിങ്ങോടും ഫീഡ്ബാക്കോടും കൂടിയ പ്രതികരണ ശക്തമായ നിയന്ത്രണങ്ങൾ
|
||||
- **മെമ്മറി മാനേജ്മെന്റ്**: ഫലപ്രദമായ ഒബ്ജക്ട് പൂളിംഗ്, ക്ലീനപ്പ് തന്ത്രങ്ങൾ
|
||||
|
||||
**യാഥാർത്ഥ ലോക ഉപയോഗങ്ങൾ**: നിങ്ങളുടെ കോൾഷൻ ഡിറ്റക്ഷൻ കഴിവുകൾ നേരിട്ട് ബാധിക്കുന്നു:
|
||||
- **ഇന്ററാക്ടിവ് സിമുലേഷനുകൾ**: ശാസ്ത്രീയ മോഡലിംഗും വിദ്യാഭ്യാസ ഉപകരണങ്ങളും
|
||||
- **യൂസർ ഇന്റർഫേസ് ഡിസൈൻ**: ഡ്രാഗ്-ആന്റ്-ഡ്രോപ്പ് ഇടപെടലുകളും ടച്ച് ഡിറ്റക്ഷനും
|
||||
- **ഡാറ്റാ വിസ്വലൈസേഷൻ**: ഇന്ററാക്ടിവ് ചാർട്ടുകളും ക്ലിക്കബിൾ ഘടകങ്ങളും
|
||||
- **മൊബൈൽ ഡെവലപ്പ്മെന്റ്**: ടച്ച് ജെഷ്ചർ തിരിച്ചറിയലും കോൾഷൻ കൈകാര്യം ചെയ്യലും
|
||||
- **റോബോട്ടിക്സ് പ്രോഗ്രാമിങ്**: പാത്ത് പ്ലാനിംഗ്, തടസ്സം ഒഴിവാക്കൽ
|
||||
- **കമ്പ്യൂട്ടർ ഗ്രാഫിക്സ്**: റേ ട്രേസിങ്ങും സ്ഥല പാഠ്യവ്യവസ്ഥകളും
|
||||
|
||||
**പ്രൊഫഷണൽ കഴിവുകൾ നേടിയത്**: നിങ്ങൾ ഇനി കഴിയും:
|
||||
- **ഡിസൈൻ** ഫലപ്രദമായ ആൽഗോരിതങ്ങൾ റിയൽ-ടൈം കോൾഷൻ ഡിറ്റക്ഷനിലേക്കായി
|
||||
- **ഇംപ്ലിമെന്റ്** ഒബ്ജക്ട് സങ്കീർണ്ണത അനുസരിക്കുന്ന ഫിസിക്സ് സിസ്റ്റങ്ങൾ
|
||||
- **ഡീബഗ്** ഗണിത സിദ്ധാന്തങ്ങൾ ഉപയോഗിച്ച് കോംപ്ലക്സ് ഇടപെടലുകൾ
|
||||
- **ഒപ്പോർറ്ത്തിമൈസ്** വ്യത്യസ്ത ഹാർഡ്വെയർ, ബ്രൗസർ കഴിവുകൾക്കായി പ്രകടനം
|
||||
- **ആർക്കിടെക്റ്റ്** തെളിയിച്ച ഡിസൈൻ പാറ്റേൺസ്ബദ്ധമായ സൂക്ഷ്മ ഗെയിം സിസ്റ്റങ്ങൾ
|
||||
|
||||
**ഗെയിം ഡെവലപ്പ്മെന്റ് ആശയങ്ങൾ മാസ്റ്റർ ചെയ്തു**:
|
||||
- **ഫിസിക്സ് സിമുലേഷൻ**: റിയൽ-ടൈം കോൾഷൻ ഡിറ്റക്ഷനും പ്രതികരണവും
|
||||
- **പ്രകടന എഞ്ചിനീയറിംഗ്**: ഇന്ററാക്ടിവ് ആപ്ലിക്കേഷനുകൾക്കുള്ള ഒപ്പോർറ്ത്തിമൈസ് ചെയ്ത ആൽഗോരിതങ്ങൾ
|
||||
- **ഇവന്റ് സിസ്റ്റങ്ങൾ**: ഗെയിം ഘടകങ്ങൾ തമ്മിലുള്ള അവിടറിഞ്ഞ ആശയവിനിമയം
|
||||
- **ഒബ്ജക്ട് മാനേജ്മെന്റ്**: ഡൈനാമിക് ഉള്ളടക്കത്തിന് ഫലപ്രദമായ ലൈഫ്സൈക്കിൾ പാറ്റേൺസ്
|
||||
- **ഇൻപുട്ട് ഹാൻഡ്ലിംഗ്**: അനുയായി ഫീഡ്ബാക്കോടെയുള്ള പ്രതികരണസാധ്യത
|
||||
|
||||
**അടുത്ത നില**: നിങ്ങൾക്കെ ഇപ്പോൾ Matter.js പോലുള്ള ആധുനിക ഫിസിക്സ് എഞ്ചിനുകൾ പരീക്ഷിക്കാനും, 3D കോൾഷൻ ഡിറ്റക്ഷൻ നടപ്പിലാക്കാനും, കോംപ്ലക്സ് പാർട്ടിക്കിൾ സിസ്റ്റങ്ങൾ നിർമ്മിക്കാനും ഒരുങ്ങി!
|
||||
|
||||
🌟 **അപാര നേട്ടം നേടി**: പ്രൊഫഷണൽ ഗ്രേഡ് കോൾഷൻ ഡിറ്റക്ഷനോടുകൂടിയ ഒരു പൂർണ്ണമായ ഫിസിക്സ് അടിസ്ഥാന ഇടപെടലുലളി നിങ്ങൾ നിർമ്മിച്ചു!
|
||||
|
||||
## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀
|
||||
|
||||
എജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെ പറയുന്ന വെല്ലുവിളി പൂർത്തിയാക്കുക:
|
||||
|
||||
**വിവരണം:** հերോ ഷിപ്പ് ഒത്തു ചേർന്നപ്പോൾ താൽക്കാലിക കഴിവുകൾ നൽകുന്ന പവർ-അപ്പുകൾ എത്രയും വേഗം സൃഷ്ടിക്കുന്ന പതിപ്പു ചേർത്ത് കോൾഷൻ ഡിറ്റക്ഷൻ സിസ്റ്റം മെച്ചപ്പെടുത്തുക.
|
||||
|
||||
**പ്രോംപ്റ്റ്:** GameObject-നെ പകർപ്പിച്ച് ഒരു PowerUp ക്ലാസ് സൃഷ്ടിക്കുക, ഹീറോയും പവർ-അപ്പുകളും തമ്മിലുള്ള കോൾഷൻ ഡിറ്റക്ഷൻ നടപ്പിലാക്കുക. অন্তിക്കായി രണ്ട് തരം പവർ-അപ്പുകൾ: ഒന്നു തീ വേഗത വർദ്ധിപ്പിക്കുന്നതും (കൂടാതെ കൂള്ഡൗൺ കുറയ്ക്കുന്ന), മറ്റൊന്ന് താൽക്കാലിക ഷീൽഡ് സൃഷ്ടിക്കുന്നത്. പവർ-അപ്പുകൾ ഓർത്തിരിക്കുകയും പദവി തിരഞ്ഞെടുക്കുകയും ചെയ്യുന്ന ലോഗിക് ഉൾപ്പെടുത്തുക.
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 🚀 വെല്ലുവിളി
|
||||
|
||||
ഒരു സ്ഫോടനം ചേർക്കുക! [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) ലെ ഗെയിം ആസറ്റുകൾ നോക്കി, ലേസർ ഒരു എലിയനെ തട്ടുമ്പോൾ സ്ഫോടനം ഉണ്ടാക്കാൻ ശ്രമിക്കുക
|
||||
|
||||
## പാഠാനന്തര ക്വിസ്
|
||||
|
||||
[പോസ്റ്റ്-ലെക്ചർ ക്വിസ്](https://ff-quizzes.netlify.app/web/quiz/36)
|
||||
|
||||
## അവലോകനം & സ്വയം പഠനം
|
||||
|
||||
ഇതുവരെ നിങ്ങളുടെ ഗെയിമിലെ ഇന്റർവലുകൾ പരീക്ഷിക്കുക. അവ മാറ്റുമ്പോൾ എന്ത് സംഭവിക്കുന്നു? [ജാവാസ്ക്രിപ്റ്റ് ടൈമിംഗ് ഇവന്റുകൾ](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) കുറിച്ച് കൂടുതൽ വായിക്കുക.
|
||||
|
||||
## അസൈൻമെന്റ്
|
||||
|
||||
[കോൾഷനുകൾ അവലോകനം ചെയ്യുക](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**സ്പഷ്ടീകരണം**:
|
||||
ഈ രേഖ AI പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതായിരിക്കുന്നു. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിക്കുന്നുണ്ടെങ്കിലും, автоматം വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അസാധുതകൾ ഉണ്ടായിരിക്കാമെന്ന് ദയവായി ജാഗ്രത പുലർത്തുക. അസൽ ഭാഷയിലെ അടിസ്ഥാനം രേഖയാണ് അംഗീകരിക്കേണ്ട പ്രാധാനിക ഉറവിടം. പ്രധാന വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ പരിഭാഷ നിർദേശിക്കുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ ഉണ്ടായേക്കാവുന്ന തെറ്റിദ്ധാരണകൾക്കോ അർത്ഥക്ഷതിയിൽ ഉണ്ടായേക്കാവുന്ന പ്രശ്നങ്ങൾക്ക് ഞങ്ങൾ ഉത്തരവാദിത്വം ഏറ്റെടുക്കുകയില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "124efddbb65166cddb38075ad6dae324",
|
||||
"translation_date": "2026-01-08T13:36:40+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കൂട്ടിയിടിത്തങ്ങൾ പരീക്ഷിക്കുക
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
വിവിധ തരം വസ്തു ഇടപെടലുകൾ പ്രദർശിപ്പിക്കുന്ന ഒരു കസ്റ്റം മിനി-ഗെയിം സൃഷ്ടിച്ച് നിങ്ങളുടെ കൂട്ടിയിടുത്തം കണ്ടെത്തൽ അറിവ് പ്രയോഗിക്കുക. സൃഷ്ടിപരമായ നടപ്പാക്കലിനും പരീക്ഷണത്തിലൂം മുഖേന നിങ്ങൾക്ക് കൂട്ടിയിടി മൈക്കാനിക്സ് മനസ്സിലാക്കാൻ ഈ ഏൽപ്പാട് സഹായിക്കും.
|
||||
|
||||
### പ്രോജക്ട് ആവശ്യകതകൾ
|
||||
|
||||
**ഇടപെടലുള്ള ചെറിയ ഇന്ററാക്ടീവ് ഗെയിം സൃഷ്ടിക്കുക:**
|
||||
- **കീബോർഡ് അല്ലെങ്കിൽ മൗസ് ഇൻപുട്ട് വഴി നിയന്ത്രിക്കാവുന്ന നിരവധി സഞ്ചരിക്കുന്ന വസ്തുക്കൾ**
|
||||
- **പാഠത്തിൽ നിന്നുള്ള ചതുരം ചേർത്തിടുന്ന സിദ്ധാന്തങ്ങൾ ഉപയോഗിച്ച് കൂട്ടിയിടിത്തം കണ്ടെത്തൽ സംവിധാനം**
|
||||
- **കൂട്ടിയിടുത്തങ്ങൾ സംഭവിക്കുന്നപ്പോൾ ദൃശ്യ പ്രതികരണം** (വസ്തു നശീകരണം, നിറം മാറ്റങ്ങൾ, ಪರಿಣಾಮങ്ങൾ)
|
||||
- **കൂട്ടിയിടിത്തങ്ങളെ അർത്ഥപൂർണവും ആകർഷകവുമാക്കുന്ന ഗെയിം നിയമങ്ങൾ**
|
||||
|
||||
### സൃഷ്ടിപരമായ നിർദ്ദേശങ്ങൾ
|
||||
|
||||
**ഈ ഘടനകളിൽ ഒന്നിൽ നടപ്പാക്കാൻ പരിഗണിക്കുക:**
|
||||
- **ആസ്റ്ററോയിഡ് ഫീൽഡ്**: അപകടകരമായ ബാഹ്യാവകാശമേഖല വഴി ഒരു കപ്പൽ നയിക്കുക
|
||||
- **ബമ്പർ കാർസ്**: ഭൗതിക ആധാരമുള്ള കൂട്ടിയിടുത്ത അരീന സൃഷ്ടിക്കുക
|
||||
- **മീറ്റിയോർ ഡിഫൻസ്**: ഭൂമിയെ വരവേൽക്കുന്ന ബഹിരാകാശ കല്ലുകളിൽനിന്നു രക്ഷിക്കുക
|
||||
- **ശേഖരണ ഗെയിം**: തടസ്സങ്ങൾ ഒഴിവാക്കി വസ്തുക്കൾ ശേഖരിക്കുക
|
||||
- **പ്രദേശം നിയന്ത്രണം**: സ്ഥലങ്ങള് സ്വന്തമാക്കാൻ ശ്രമിക്കുന്ന മത്സരിക്കുന്ന വസ്തുക്കൾ
|
||||
|
||||
### പ്രായോഗിക നടപ്പാക്കലുകൾ
|
||||
|
||||
**നിങ്ങളുടെ പരിഹാരം പ്രകടിപ്പിക്കുക:**
|
||||
- ചതുരം അടിസ്ഥാനമാക്കിയുള്ള കൂട്ടിയിടിത്തം കണ്ടെത്തലിന്റെ ശരിയായ ഉപയോഗം
|
||||
- ഉപയോക്തൃ ഇൻപുട്ടിനുള്ള സംഭവം പ്രേരിത പ്രോഗ്രാമിംഗ്
|
||||
- വസ്തു ജീവിതചക്രം മാനেজ്മെന്റ് (സൃഷ്ടിയും നശീകരണവും)
|
||||
- അനുയോജ്യമായ ക്ലാസ് ഘടനയോടെ വൃത്തിയുള്ള കോഡ് ഘടന
|
||||
|
||||
### ബോണസ് വെല്ലുവിളികൾ
|
||||
|
||||
**കൂടുതല് സവിശേഷതകളോടെ നിങ്ങളുടെ ഗെയിം വിപുലമാക്കുക:**
|
||||
- **കൂട്ടിയിടുത്തങ്ങൾ ഉണ്ടാകുമ്പോൾ പാർട്ടിക്കിൾ ഫലങ്ങൾ**
|
||||
- **വ müxtəlif കൂട്ടിയിടി തരം അടിസ്ഥാനമാക്കിയുള്ള ശബ്ദഫലങ്ങൾ**
|
||||
- **കൂട്ടിയിടി ഫലങ്ങളുടെ അടിസ്ഥാനത്തിലുള്ള സ്കോറിംഗ് സംവിധാനം**
|
||||
- **മസ്കല വ്യത്യസ്ത സ്വഭാവങ്ങളുള്ള നിരവധി കൂട്ടിയിടിത്ത തരം**
|
||||
- **കാലക്രമേണ ഉയർന്നുവരുന്ന വെല്ലുവിളികളുടെ ക്രമീകരണം**
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
| ക്രൈറ്റീരിയ | ഉത്തമം | യഥാർത്ഥം | മെച്ചപ്പെടുത്തൽ ആവശ്യമാണ് |
|
||||
|----------|-----------|----------|-------------------|
|
||||
| **കൂട്ടിയിടിത്തം കണ്ടെത്തൽ** | പല വസ്തു തരംമാരും സങ്കീർണ്ണ ഇടപെടൽ നിയമങ്ങളോടെ കൃത്യമായ ചതുരം അടിസ്ഥാനമാക്കിയുള്ള കൂട്ടിയിടിത്തം കണ്ടെത്തലും നടപ്പാക്കും | അടിസ്ഥാനക്കൂട്ടിയിടിത്തം ശരിയായി പ്രവർത്തിച്ച് ലഘുവായ വസ്തു ഇടപെടലുകൾ | കൂട്ടിയിടിത്തം കണ്ടെത്തലിൽ പ്രശ്നങ്ങൾ ഉണ്ടോ സ്ഥിരതയില്ല |
|
||||
| **കോഡ് ഗുണനിലവാരം** | ശരിയായ ക്ലാസ് ഘടന, അഭിപ്രേതമായ വെരിയബിൾ നാമങ്ങൾ, അനുയോജ്യമായ കമന്റുകൾ ഉൾപ്പടെ വൃത്തിയുള്ള, നന്നായി സംഘമാക്കിയ കോഡ് | ജോലി ചെയ്യുന്ന കോഡ് എന്നാൽ മികച്ച ഘടനയോ ഡോക്യുമെന്റേഷനോ വേണം | മനസ്സിലാക്കാൻ ബുദ്ധിമുട്ടുള്ള അല്ലെങ്കിൽ ദുർബ്ബലമായ ഘടനയുള്ള കോഡ് |
|
||||
| **ഉപയോക്തൃ ഇടപെടൽ** | സ്മൂത്ത് ഗെയിംപ്ലേ, വ്യക്തമായ ദൃശ്യപ്രതികരണം, ആകർഷക മേക്കനിക്സ്, പ്രതികരിക്കുന്ന നിയന്ത്രണങ്ങൾ | അടിസ്ഥാന നിര്ദേശങ്ങൾ പ്രവർത്തിക്കുന്നു, മതിയായ പ്രതികരണം | നിയന്ത്രണങ്ങൾ പ്രതികരിക്കാതെ അല്ലെങ്കിൽ ആശയക്കുഴപ്പം സൃഷ്ടിക്കുന്നു |
|
||||
| **സൃഷ്ടിപരത്വം** | പ്രത്യേകം സവിശേഷതകൾ, ദൃശ്യഭംഗി, നവീന കൂട്ടിയിടിത്ത സ്വഭാവങ്ങളോടെ ആസ്വാദനാത്മക ആശയം | ചില സൃഷ്ടിപരമായ ഘടകങ്ങളോടു കൂടിയ സ്റ്റാൻഡേർഡ് നടപ്പാക്കൽ | സൃഷ്ടിപരത്വം ഇല്ലാത്ത അടിസ്ഥാന പ്രവർത്തനക്ഷമത |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാപത്രം**:
|
||||
ഈ പ്രമാണം AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ ಶುದ್ಧതയ്ക്ക് പരിശ്രമിക്കുന്നുവെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അശുദ്ധികൾ ഉണ്ടായിരിക്കാമെന്ന് ശ്രദ്ധിക്കേണ്ടതാണ്. യഥാർത്ഥ പ്രമാണം അതിന്റെ സ്വഭാവത്തിലുള്ള ഭാഷയിൽ അധികാരപ്രദമായ ഉറവിടമായി പരിഗണിക്കപ്പെടണം. പ്രധാന വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകുന്ന തെറ്റിദ്ധാരണങ്ങൾക്ക് ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:00:06+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡർ ആണ്, ഉദ്ദേശപൂർവം ഒഴിവാക്കിയിരിക്കുന്നു
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**തള്ളി പറയൽ**:
|
||||
ഈ പ്രമാണം [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയുടെ ശ്രമം നടത്തുന്നുവെങ്കിൽ പോലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ ചില പിഴവുകൾ അല്ലെങ്കിൽ അശുദ്ധികൾ ഉണ്ടാകുമെന്ന് ദയവായി മനസിലാക്കുക. ലഘുവായ ഭാഷയിലുള്ള اصل പ്രമാണമാണ് ഔദ്യോഗികമായ ഉറവിടം. അത്യാവശ്യം വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനാൽ സൃഷ്ടമായ ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾ അല്ലെങ്കിൽ മറുവാചകങ്ങൾക്കായി ഞങ്ങൾ ബാധ్యత വഹിക്കില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T14:59:21+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/your-work/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡറാണ്, ഉദ്ദേശ്യപൂർവം ശൂന്യമായി വച്ച് നന്നിരിക്കുന്നു
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ഡിസ്ക്ലെയ്മർ**:
|
||||
ഈ രേഖ AI പരിഭാഷ സേവനം [കോ-ഓപ് ട്രാൻസ്ലേറ്റർ](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തിയതാണ്. നമുക്ക് സത്യസന്ധതയ്ക്കായി പരിശ്രമിച്ചാൽ പോലും, യന്ത്രം ചെയ്ത പരിഭാഷകളിൽ പിശകുകളും തെറ്റുകളും ഉണ്ടാകാമെന്ന് ദയവായി മനസ്സിലാക്കുക. ഈ രേഖയുടെ മാതൃഭാഷയിൽ ഉള്ള അസൽ പതിപ്പ് അതിന്റെ അധികാരമതിയായ ഉറവിടമാക്കിക്കണം. പ്രധാന വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ അനുശംസിക്കുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന യാതൊരുവിധം തെറ്റിദ്ധാരണകൾക്കോ ദുർവ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "81f292dbda01685b91735e0398dc0504",
|
||||
"translation_date": "2026-01-08T14:14:35+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# സ്കോറിംഗ് ഗെയിം നിർമ്മിക്കുക
|
||||
|
||||
## നിര്ദ്ദേശങ്ങള്
|
||||
|
||||
ജീവിതവും പോയിന്റുകളും സൃഷ്ടിപരമായ രീതിയില് പ്രദര്ശിപ്പിക്കുന്നൊരു ഗെയിം സൃഷ്ടിക്കുക. ജീവിതം ഹൃദയങ്ങളായി കാണിക്കുകയും, പോയിന്റുകള് സ്ക്രീന്റെ താഴ്തു മധ്യഭാഗത്ത് വലിയ സംഖ്യയായി കാണിക്കുകയും ചെയ്യുന്നത് ഒരു സൂചനയാണ്. [Free game resources](https://www.kenney.nl/) ഇവിടെ കണ്ടുപിടിക്കാം
|
||||
|
||||
# റൂബ്രിക്
|
||||
|
||||
| നിര്ണായകങ്ങൾ | ഉദാഹരണമായുള്ളത് | യഥേഷ്ടം | മെച്ചപ്പെടുത്തേണ്ടതാണ് |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | പൂർണ്ണ ഗെയിം അവതരിപ്പിച്ചത് | ഗെയിം ഭാഗികമായി അവതരിപ്പിച്ചത് | ഭാഗിക ഗെയിമിന് പിഴവുകൾ ഉണ്ട് |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകാര്യത**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്കായി പരിശ്രമിക്കുന്നെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അസംവരണം ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. സൈദ്ധാന്തികമായ ഉറവിടമായി യഥാഭാഷയിലെ اصل രേഖ തന്നെ കരുതേണ്ടതാണ്. നിർണായക വിവരങ്ങൾക്ക്, പ്രഫഷണൽ മാനവ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന തെറ്റായ വിവരണങ്ങൾക്കോ അറിവുകേടിനോ ഞങ്ങൾ ഉത്തരവാദികൾ അല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:03:14+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡറാണ്, ഉദ്ദേശപൂർവമായി ശൂന്യമായി വച്ചിരിക്കുന്നു
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അത്യന്താവശ്യ കുറിപ്പ്**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം നിഷ്ധിഷ്ടതയ്ക്ക് പരിശ്രമിച്ചുവെങ്കിലും, യന്ത്രത്തിന്റെ വിവർത്തനങ്ങളിൽ പിശകുകൾ അടങ്ങിയിരിക്കാമെന്നു ദയവായി മനസ്സിലാക്കുക. അതിന്റെ മാതൃഭാഷയിലുള്ള യഥാർത്ഥ രേഖ വിവരങ്ങളുടെ പ്രാമാണിക ഉറവിടമായി കണക്കാക്കപ്പെടണം. സുപ്രധാന വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മനുഷ്യവിവർത്തനം ശുപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകാവുന്ന തെറ്റുതിരുത്തലുകൾക്കും തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:02:29+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/your-work/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്হോൾഡറാണ്, സങ്കൽപ്പമാക്കി intentionally വിടുത്തിരിക്കുന്നത്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിശദീകരണം**:
|
||||
ഈ ദസ്താവേകം എഐ പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തിയതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിച്ചിരുന്നുവെങ്കിലും, യന്ത്രം സൃഷ്ടിക്കുന്ന പരിഭാഷയിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടാകാൻ സാധ്യതയുള്ളതാണ്. അതിനാൽ, മേന്മയുള്ള ഭാഷയിൽ ഉള്ള യഥാർത്ഥ ദസ്താവേകം ഔദ്യോഗിക ഉറവിടമായി കണക്കാക്കണം. അത്യന്താപേക്ഷിത വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ പരിഭാഷ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷ ഉപയോഗിച്ചതോടെ ഉണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കോ വ്യാഖ്യാനങ്ങളിൽ നിന്നുമുള്ള ബാധ്യത ഞങ്ങൾ ഏറ്റെടുക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,174 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "232d592791465c1678cab3a2bb6cd3e8",
|
||||
"translation_date": "2026-01-08T14:05:36+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ഒരു സാമ്പിൾ ഗെയിം നിർമ്മിക്കുക
|
||||
|
||||
## അസൈൻമെന്റ് അവലോകനം
|
||||
|
||||
നിങ്ങൾ സ്പേസ് ഗെയിമിലെ കളി അവസാനം നിബന്ധനകളും പുനരാരംഭ ഫംഗ്ഷണാലിറ്റിയും കൈകാര്യം ചെയ്യാൻ പഠിച്ചപ്പോൾ, ഇതേ ആശയങ്ങൾ പുതിയ ഒരു ഗെയിമിംഗ് അനുഭവത്തിൽ പ്രയോഗിക്കാൻ സമയം ആയിരിക്കുന്നു. വിവിധ അവസാനം നിബന്ധന പാറ്റേണുകളും പുനരാരംഭ മെക്കാനിക്സും പ്രദർശിപ്പിക്കുന്ന നിങ്ങളുടെ സ്വന്തമായ ഗെയിം രൂപകൽപ്പന ചെയ്ത് നിർമ്മിക്കേണ്ടതാണ്.
|
||||
|
||||
ഈ അസൈൻമെന്റ് ഗെയിം ഡിസൈനിനെക്കുറിച്ചും നിങ്ങള് ഭാവനാശക്തിയോടെ ചിന്തിക്കുകയും നിങ്ങൾ പഠിച്ച സാങ്കേതിക കഴിവുകൾ അഭ്യസിക്കുകയും ചെയ്യാൻ പ്രേരിപ്പിക്കുന്നു. നിങ്ങൾ വിജയം നേടിയിടത്തെയും പരാജയം സംഭവിക്കുന്നിടത്തെയും വ്യത്യസ്ത രംഗങ്ങൾ പരിശോധിക്കുകയും, പ്ലെയർ പുരോഗതിയും ആകർഷകമായ പുനരാരംഭ അനുഭവവും സൃഷ്ടിക്കുകയും ചെയ്യും.
|
||||
|
||||
## പ്രോജക്റ്റ് ആവശ്യകതകൾ
|
||||
|
||||
### മൈത്രീഗെയിം ഫീച്ചറുകൾ
|
||||
|
||||
നിങ്ങളുടെ ഗെയിമിൽ താഴെയുള്ള നിർബന്ധമായ ഘടകങ്ങൾ ഉൾപ്പെടുത്തണം:
|
||||
|
||||
**അവസാന നിബന്ധന വൈവിധ്യം**: ഗെയിം അവസാനിക്കും കുറഞ്ഞത് രണ്ട് വ്യത്യസ്ത മാർഗങ്ങൾ നടപ്പാക്കുക:
|
||||
- **പോയിന്റ് ভিত্তിയിലുള്ള വിജയം**: പ്ലെയർ നിർദ്ദിഷ്ട സ്കോർ തട്ടുക അല്ലെങ്കിൽ പ്രത്യേക വസ്തുക്കൾ ശേഖരിക്കുക
|
||||
- **ജീവിതം-അടിസ്ഥാനമാക്കിയ പരാജയം**: പ്ലെയർ എല്ലാ ലഭ്യമായ ജീവനുകളും ആരോഗ്യം നിലനിൽക്കലുകളും നഷ്ടപ്പെടുക
|
||||
- **ലക്ഷ്യം പൂർത്തീകരിക്കൽ**: എല്ലാ ശത്രുക്കളും തോൽപ്പിക്കുക, നിർദ്ദിഷ്ട വസ്തുക്കൾ ശേഖരിക്കുക, അല്ലെങ്കിൽ ലക്ഷ്യങ്ങൾ കൈവരിക്കുക
|
||||
- **സമയം അടിസ്ഥാനമാക്കിയുള്ളത്**: നിശ്ചിത ദൈർഘ്യം കഴിഞ്ഞു അല്ലെങ്കിൽ കൗണ്ട്ഡൗൺ പൂർത്തിയായാൽ ഗെയിം അവസാനിക്കും
|
||||
|
||||
**പുനരാരംഭ ഫംഗ്ഷണാലിറ്റി**:
|
||||
- **ഗെയിം സ്റ്റേറ്റ് ക്ലിയർ ചെയ്യുക**: മുൻ ഗെയിം ഒബ്ജെക്ടുകൾ എല്ലാം നീക്കം ചെയ്യുകയും വേരിയബിളുകൾ നിന്നു പുനഃസജ്ജമാക്കുകയും ചെയ്യുക
|
||||
- **സിസ്റ്റങ്ങൾ പുനഃസജ്ജമാക്കുക**: പുതിയ പ്ലെയർ സ്ഥിതിഗതികളും, ശത്രുക്കളും, ലക്ഷ്യങ്ങളും തുടങ്ങിയവ ഉപയോഗിച്ച് പുതിയ ഗെയിം ആരംഭിക്കുക
|
||||
- **ഉപയോഗപ്രദമായ നിയന്ത്രണങ്ങൾ**: ഗെയിം പുനരാരംഭിക്കാനുള്ള വ്യക്തമായ നിർദ്ദേശങ്ങൾ നൽകുക
|
||||
|
||||
**പ്ലെയർ പ്രതികരണം**:
|
||||
- **വിജയ സന്ദേശങ്ങൾ**: പ്ലെയർ വിജയങ്ങളെ ആഘോഷിച്ച് പോസിറ്റീവ് പ്രതികരണം നൽകുക
|
||||
- **പരാജയ സന്ദേശങ്ങൾ**: പുനരവലോകനത്തിനും പ്രോത്സാഹനത്തിനും സഹായിക്കുന്ന സന്ദേശങ്ങൾ നൽകുക
|
||||
- **പുരോഗതി സൂചികകൾ**: നിലവിലുള്ള സ്കോർ, ജീവൻ, അല്ലെങ്കിൽ ലക്ഷ്യത്തിലെ സ്ഥിതി കാണിക്കുക
|
||||
|
||||
### ഗെയിം ആശയങ്ങളും പ്രചോദനങ്ങളും
|
||||
|
||||
ഈ ഗെയിം ആശയങ്ങളിൽ ഒരുവനെ തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം സൃഷ്ടിക്കുക:
|
||||
|
||||
#### 1. കൺസോൾ അത്ഭുത ഗെയിം
|
||||
ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള അത്ഭുത ഗെയിം ഉണ്ടാക്കുക, യുദ്ധ യന്ത്രങ്ങൾ ഉൾപ്പെടുത്തി:
|
||||
|
||||
```
|
||||
Hero> Strikes with broadsword - orc takes 3p damage
|
||||
Orc> Hits with club - hero takes 2p damage
|
||||
Hero> Kicks - orc takes 1p damage
|
||||
Game> Orc is defeated - Hero collects 2 coins
|
||||
Game> ****No more monsters, you have conquered the evil fortress****
|
||||
```
|
||||
|
||||
**നടത്തേണ്ട പ്രധാന ഫീച്ചറുകൾ:**
|
||||
- **ടേൺ അടിസ്ഥാനത്തിലുള്ള യുദ്ധം** വ്യത്യസ്ത ആക്രമണ ഓപ്ഷനുകളോടെ
|
||||
- **ആരോഗ്യ പോയിന്റുകൾ** പ്ലെയറും ശത്രുക്കളും ഇരുവരും
|
||||
- **ഇൻവെൻററി സിസ്റ്റം** നാണയങ്ങൾ അല്ലെങ്കിൽ വസ്തുക്കൾ ശേഖരിക്കാൻ
|
||||
- **മൽട്ടിപ്പിൾ ശത്രു വര്ഗ്ഗങ്ങൾ** വ്യത്യസ്ത ബുദ്ധിമുട്ടുകളോടെ
|
||||
- **വിജയ нөхдение** എല്ലാ ശത്രുക്കളുമെല്ലാം തോൽപ്പിച്ചാൽ
|
||||
|
||||
#### 2. ശേഖരണ ഗെയിം
|
||||
- **ലക്ഷ്യം**: തടസ്സങ്ങൾ ഒഴിവാക്കി പ്രത്യേക വസ്തുക്കൾ ശേഖരിക്കുക
|
||||
- **അവസാന നിബന്ധനകൾ**: ലക്ഷ്യം വസ്തു ശേഖരണ എണ്ണം പൂർത്തിയാക്കുക അല്ലെങ്കിൽ എല്ലാ ജീവൻ നഷ്ടപ്പെടുക
|
||||
- **പുരോഗതി**: ഗെയിം പുരോഗമിക്കുന്നതിനൊപ്പം വസ്തുക്കൾ ശേഖരിക്കാൻ കഠിനത വർദ്ധിക്കും
|
||||
|
||||
#### 3. പസിൽ ഗെയിം
|
||||
- **ലക്ഷ്യം**: ഓരോ തലവും കൂടുതൽ കഠിനമായ പസിലുകൾ 풀ുക
|
||||
- **അവസാന നിബന്ധനകൾ**: എല്ലാ തലങ്ങളും പൂർത്തിയാക്കുക അല്ലെങ്കിൽ കളികൾ/സമയം കാര്യമായി തീർത്ത് പാകം
|
||||
- **പുനരാരംഭം**: ആദ്യ തലത്തിലേക്ക് റീസെറ്റ് ചെയ്ത് പുരോഗതി ശൂന്യമാക്കുക
|
||||
|
||||
#### 4. പ്രതിരോധ ഗെയിം
|
||||
- **ലക്ഷ്യം**: ശത്രുക്കളുടെ തരംഗങ്ങളിൽനിന്ന് നിങ്ങളുടെ അടിസ്ഥാനം സംരക്ഷിക്കുക
|
||||
- **അവസാന നിബന്ധനകൾ**: എല്ലാ തരംഗവും ജീവിച്ച് രക്ഷപ്പെടുക (വിജയം) അല്ലെങ്കിൽ അടിസ്ഥാനം നശിക്കുക (പരാജയം)
|
||||
- **പുരോഗതി**: ശത്രു തരങ്ങൾ കൂടുതൽ ബുദ്ധിമുട്ടും സംഖ്യയിലും വർദ്ധിക്കും
|
||||
|
||||
## നടപ്പാക്കൽ മാർഗനിർദ്ദേശങ്ങൾ
|
||||
|
||||
### ആരംഭിക്കൽ
|
||||
|
||||
1. **നിങ്ങളുടെ ഗെയിം ഡിസൈൻ പദ്ധതീകരിക്കുക**:
|
||||
- അടിസ്ഥാന ഗെയിംപ്ലേ ലൂപ്പ് രേഖപ്പെടുത്തുക
|
||||
- നിങ്ങളുടെ അവസാന നിബന്ധനകൾ വ്യക്തമായി നിർവചിക്കുക
|
||||
- പുനരാരംഭത്തിൽ പുനഃസജ്ജമാക്കേണ്ട ഡാറ്റ തിരിച്ചറിയുക
|
||||
|
||||
2. **നിങ്ങളുടെ പ്രോജക്ട് ഘടന ക്രമീകരിക്കുക**:
|
||||
```
|
||||
my-game/
|
||||
├── index.html
|
||||
├── style.css
|
||||
├── game.js
|
||||
└── README.md
|
||||
```
|
||||
|
||||
3. **നിങ്ങളുടെ കോർ ഗെയിം ലൂപ്പ് സൃഷ്ടിക്കുക**:
|
||||
- ഗെയിം സ്റ്റേറ്റ് ഇൻഷിയലൈസ് ചെയ്യുക
|
||||
- ഉപയോക്തൃ ഇൻപുട്ട് കൈകാര്യം ചെയ്യുക
|
||||
- ഗെയിം ലോജിക്ക് അപ്ഡേറ്റ് ചെയ്യുക
|
||||
- അവസാന നിബന്ധനകൾ പരിശോധിക്കുക
|
||||
- നിലവിലെ സ്ഥിതി റെണ്ടർ ചെയ്യുക
|
||||
|
||||
### സാങ്കേതിക ആവശ്യകതകൾ
|
||||
|
||||
**ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുക**:
|
||||
- വേരിയബിളുകൾ പ്രഖ്യാപിക്കുമ്പോൾ `const` കൂടാതെ `let` ഉപയോഗിക്കുക
|
||||
- നിലവിലുള്ള സ്ഥാനങ്ങളിൽ ആറോ ഫംഗ്ഷനുകൾ ഉപയോഗിക്കുക
|
||||
- ടെംപ്ലേറ്റ് ലിറ്ററൽസ്, ഡിസട്രക്ടറിംഗ് തുടങ്ങിയ ES6+ ഫീച്ചറുകൾ പ്രയോഗിക്കുക
|
||||
|
||||
**ഇവന്റ് ഡ്രിവൻ ആർകിടെക്ചർ**:
|
||||
- ഉപയോക്തൃ ഇടപെടലുകൾക്ക് ഇവന്റ് ഹാൻഡിലറുകൾ സൃഷ്ടിക്കുക
|
||||
- ഇവന്റുകൾ വഴിയായി ഗെയിം സ്റ്റേറ്റ് മാറ്റങ്ങൾ നടപ്പാക്കി
|
||||
- പുനരാരംഭ ഫംഗ്ഷണാലിറ്റിയുടെ ഭാഗമായ ഇവന്റ് ലിസണറുകൾ ഉപയോഗിക്കുക
|
||||
|
||||
**വൈകല്യരഹിതമായ കോഡ്**:
|
||||
- ഒറ്റ പ്രവർത്തനങ്ങളുള്ള ഫംഗ്ഷനുകൾ എഴുതുക
|
||||
- വ്യാകരണപരവും വ്യക്തവുമായ വേരിയബിൾ, ഫംഗ്ഷൻ നാമങ്ങൾ ഉപയോഗിക്കുക
|
||||
- ഗെയിം ലോജിക്, നിബന്ധനകൾ വിശദീകരിക്കുന്ന കമന്റുകൾ ചേർക്കുക
|
||||
- കോഡ് ലാജിക്കൽ സെക്ഷനുകളായി ഓർഗനൈസ് ചെയ്യുക
|
||||
|
||||
## സമർപ്പണ ആവശ്യകതകൾ
|
||||
|
||||
### സമർപ്പിക്കേണ്ടവ
|
||||
|
||||
1. **പൂർണ്ണ ഗെയിം ഫയലുകൾ**: ഗെയിം പ്രവർത്തിക്കാൻ ആവശ്യമായ എല്ലാ HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളും
|
||||
2. **README.md**: വിശദീകരിക്കുന്ന ഡോക്ക്യുമെന്റേഷൻ:
|
||||
- എങ്ങനെ ഗെയിം കളിക്കാം
|
||||
- ഏത് അവസാന നിബന്ധനകൾ നടപ്പാക്കി
|
||||
- പുനരാരംഭ നിർദ്ദേശങ്ങൾ
|
||||
- പ്രത്യേക ഫീച്ചറുകളും മെക്കാനിക്കുകളും
|
||||
3. **കോഡ് കമന്റുകൾ**: നിങ്ങളുടെ ഗെയിം ലോജിക്, ആ算法ങ്ങൾ വ്യക്തമായി വിശദീകരിക്കുന്ന കമന്റുകൾ
|
||||
|
||||
### പരീക്ഷണ പരിശോദന പട്ടിക
|
||||
|
||||
സമർപ്പിച്ച ശേഷം, നിങ്ങളുടെ ഗെയിം പരിശോധിക്കുക:
|
||||
|
||||
- [ ] ബ്രൗസർ കോൺസോളിൽ പിഴച്ചില്ലാതെ പ്രവർത്തിക്കുന്നുണ്ടോ
|
||||
- [ ] നിർദ്ദേശിച്ചപോലെ പല അവസാനം നിബന്ധനകളും നടപ്പിലാക്കിയിട്ടുണ്ടോ
|
||||
- [ ] ഗെയിം പുനരാരംഭം സുതാര്യമായി പ്രവർത്തിച്ചിട്ടുണ്ടോ
|
||||
- [ ] പ്ലെയർമാർക്ക് ഗെയിം നിലപാട് വ്യക്തമാക്കുന്ന പ്രതികരണം ലഭിക്കുന്നുണ്ടോ
|
||||
- [ ] ആധുനിക ജാവാസ്ക്രിപ്റ്റ് വാക്യസംരചനകളും മികച്ച പ്രവർത്തനരീതി പ്രയോഗിച്ചിട്ടുണ്ടോ
|
||||
- [ ] README.md ൽ സമഗ്രമായ ഡോക്ക്യുമെന്റേഷൻ ഉണ്ട്
|
||||
|
||||
## വിലയിരുത്തൽ മാപകം
|
||||
|
||||
| крИТЕРИЯ | ഉദാത്തമായ (4) | പ്രാവീണ്യമുള്ള (3) | വികസിപ്പിക്കുന്ന (2) | ആരംഭം (1) |
|
||||
|----------|----------------|-----------------|-----------------|--------------|
|
||||
| **ഗെയിം പ്രവര്ത്തനം** | അനേകം അവസാനം നിബന്ധനകളോടെ പൂർണ്ണ ഗെയിം, സുന്ദരമായ പുനരാരംഭം, മെച്ചപ്പെട്ട ഗെയിംപ്ലേ അനുഭവം | അടിസ്ഥാന അവസാന നിബന്ധനകളും പ്രവർത്തിക്കുന്ന പുനരാരംഭ സംവിധാനവും ഉള്ള പൂർണ്ണ ഗെയിം | ചില അവസാനം നിബന്ധനകൾ നടപ്പിലാക്കിയ ഭാഗിക ഗെയിം, പുനരാരംഭത്തിൽ ചെറിയ പ്രശ്നങ്ങൾ ഉണ്ടാകാം | പരിമിത പ്രവർത്തനക്ഷമതയുള്ള അപൂര്ണ്ണ ഗെയിം, സാരമായ പിശകുകൾ |
|
||||
| **കോഡ് ഗുണമേന്മ** | ആധുനിക ജാവാസ്ക്രിപ്റ്റ് പ്രയോഗിച്ച് ശുദ്ധവും ചിട്ടയുള്ള കോഡ്, സമഗ്ര കമന്റുകൾ, മികച്ച ഘടന | ആധുനിക സിന്തക്സും നല്ല കോഡ് സജ്ജീകരണവും ചേർന്ന നല്ല സ്റ്റൈൽ | ചില ആധുനിക രീതികളുള്ള അടിസ്ഥാന കോഡ്, കുറച്ച് കമന്റുകൾ | പഴയ സിന്തക്സും കോഡിലെയും ഘടനയിലും പിഴവുകൾ, കമന്റുകൾ ഇല്ലാതെ |
|
||||
| **ഉപയോക്തൃ അനുഭവം** | വ്യക്തതയുള്ള നിർദ്ദേശങ്ങളോടെ, മികച്ച പ്രതികരണവും ആകർഷകമായ അവസാനം/പുനരാരംഭം | മതിയായ നിർദ്ദേശങ്ങളും പ്രതികരണങ്ങളും ഉള്ള നല്ല ഗെയിംപ്ലേ | സൂക്ഷ്മ നിർദ്ദേശങ്ങളുമില്ല, ഗെയിം നിലപാട് സംബന്ധിച്ച കുറഞ്ഞ പ്രതികരണം | ആശയക്കുഴപ്പമുള്ള ഗെയിംപ്ലേ, അപ്രത്യാശിത ഉപയോക്തൃ പ്രതികരണം |
|
||||
| **സാങ്കേതിക നടപ്പിലാക്കൽ** | ഗെയിം വികസന സങ്കൽപ്പങ്ങളും ഇവന്റ് ഹാൻഡിലിംഗ്, സ്റ്റേറ്റ് മാനേജ്മെന്റ് എന്നിവയിൽ പൂർണമായ വിദഗ്ധത | ഗെയിം ആശയങ്ങളിൽ നല്ല ധാരണയോടെ ഊന്നിയ ഉൽപ്പാദനം | അടിസ്ഥാന ധാരണയും യോഗ്യമായ നടപ്പുകളും | പരിമിത ധാരണയോടെ വീഴ്ചയുള്ള ലളിത നടപ്പു |
|
||||
| **ഡോക്ക്യുമെന്റേഷൻ** | വ്യക്തവും സമഗ്രവുമായ README, മനസ്സിലാക്കാനാകുന്ന കോഡ്, കാര്യക്ഷമ പരിശോധനാ തെളിവുകൾ | വ്യക്തമായ നിർദ്ദേശങ്ങളുള്ള നല്ല ഡോക്ക്യുമെന്റേഷൻ | ലഘുവായ നിർദ്ദേശങ്ങളുള്ള അടിസ്ഥാന ഡോക്ക്യുമെന്റേഷൻ | ദയനീയമായ അല്ലെങ്കിൽ ഇല്ലാതിരുന്ന ഡോക്ക്യുമെന്റേഷൻ |
|
||||
|
||||
### ഗ്രേഡിങ് സ്കെയിൽ
|
||||
- **ഉദാത്തമായ (16-20 പോയിന്റുകൾ)**: സ്രഷ്ടാവായ ഫീച്ചറുകളോടെ പ്രതീക്ഷകൾ ചാരിട്ടു മികവ് തെളിയിക്കൽ
|
||||
- **പ്രാവീണ്യമുള്ള (12-15 പോയിന്റുകൾ)**: എല്ലാ ആവശ്യകതകളും പൂരിപ്പിച്ച് സ്ഥിരതയുള്ള നടപ്പാക്കൽ
|
||||
- **വികസിപ്പിക്കുന്ന (8-11 പോയിന്റുകൾ)**: മിക്ക ആവശ്യകതകളും പൂരിപ്പിച്ചതുമായ ചെറിയ പ്രശ്നങ്ങളുള്ള
|
||||
- **ആരംഭം (4-7 പോയിന്റുകൾ)**: ചില ആവശ്യങ്ങൾ മാത്രമേ പൂർത്തിയാക്കു, ഏറെ മെച്ചപ്പെടുത്തൽ ആവശ്യമായത്
|
||||
|
||||
## അധിക പഠന സാമഗ്രികൾ
|
||||
|
||||
- [MDN ഗെയിം ഡെവലപ്പ്മെന്റ് ഗൈഡ്](https://developer.mozilla.org/en-US/docs/Games)
|
||||
- [JavaScript ഗെയിം ഡെവലപ്പ്മെന്റ് ട്യൂട്ടോറിയലുകൾ](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
|
||||
- [Canvas API ഡോക്ക്യുമെന്റേഷൻ](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
|
||||
- [ഗെയിം ഡിസൈൻ പ്രിൻസിപ്പിൾസ്](https://www.gamasutra.com/blogs/)
|
||||
|
||||
> 💡 **പ്രൊ ടിപ്പ്**: ലളിതമായി ആരംഭിച്ച് ഘടകങ്ങൾ ക്രമാനുസരണം കൂട്ടിച്ചേർക്കുക. പിഴവുകൾ ഇല്ലാത്ത നല്ല രീതിയിൽ പെയിന്റ് ചെയ്ത ലളിത ഗെയിം ഒരു സങ്കീർണ്ണ ഗെയിമിനെക്കാൾ മെച്ചമാണു!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വ്യാഴിപ്പനം**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എ.ഐ. തർജ്ജമ सेव ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തതാണ്.ന്നാവശ്യത്തിൽ, ഞങ്ങൾ യഥാർത്ഥതയിലേക്ക് ശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമേറ്റഡ് തർജ്മയിൽ പിഴവുകൾ կամ അറിവുപിടിപ്പുകൾ ഉണ്ടായിരിക്കാം. ആരാധ്യമായ വിവരങ്ങൾക്കായി, പ്രൊഫഷണൽ മനുഷ്യ തർജ്മ നിർദ്ദേശിക്കപ്പെടുന്നു. ഈ തർജ്മയിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാനകേടുകൾക്കുമുള്ള ഉത്തരവാദിത്തം ഞങ്ങൾ ഏറ്റെടുക്കുന്നില്ല.
|
||||
മൂല രേഖ അതിന്റെ സ്വർണ്ണഭാഷയിലാണ് സുപ്രധാന സ്രീത്യം ആയി കണക്കാക്കപ്പെടുന്നതു.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:01:41+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡറാണ്, മനസിലാക്കി ഫലവത്താക്കാൻ വെറുതെ ഒഴിഞ്ഞിട്ടുള്ളത്
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**മായികുറിപ്പ്**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്കായി ശ്രമിച്ചിരിക്കുമ്പോഴും, സ്വയം പരീക്ഷിച്ച വിവർത്തനങ്ങളിൽ പിശകുകൾ ഉണ്ടായിരിക്കാം എന്നതിനുള്ള അറിവ് ആവശ്യമാണ്. പ്രাথমিক ഭാഷയിൽ ഉള്ള യഥാർത്ഥ രേഖ അവിശ്വസനീയമായ ഉറവിടമായി കണക്കാക്കപ്പെടണം. അത്യന്താപേക്ഷിതമായ വിവരങ്ങൾക്ക്, വിദഗ്ധ മനുഷ്യ വിവർത്തനം നിർദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന യാതൊരു തെറ്റിദ്ധാരണയ്ക്കും അല്ലെങ്കിൽ വ്യാഖ്യാനക്കുറവിനും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:00:53+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/your-work/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡറാണ്, ഉദ്ദേശപൂർവ്വം ഒഴിഞ്ഞവെച്ചു.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിവാദാരഹിത നിബന്ധനം**:
|
||||
ഈ രേഖ AI പരിഭാഷ സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തിയതാണ്. ഞങ്ങൾ 정확തയ്ക്കായി ശ്രമിച്ചെങ്കിലും, സ്വയം നിയന്ത്രിത പരിഭാഷകളിൽ പിഴവുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. അസൽ രേഖ അതിന്റെ ജന്മഭാഷയിൽ ഒരു മാന്യമായ സ്രോതസ്സ് എന്ന നിലയിൽ പരിഗണിക്കപ്പെടേണ്ടതാണ്. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗിച്ച് ഉള്ള തെറ്റു രണ്ടാം അർത്ഥ വികസനങ്ങളോ തെറ്റായ മനഃപൂർവശാലीदോഷങ്ങളോ ഉണ്ടായാൽ ഞങ്ങൾ ബാധ്യതയുമായിരിക്കും എന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,47 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "c40a698395ee5102715f7880bba3f2e7",
|
||||
"translation_date": "2026-01-08T11:10:27+00:00",
|
||||
"source_file": "6-space-game/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ഒരു സ്പേസ് ഗെയിം നിർമ്മിക്കുക
|
||||
|
||||
വളരെ മുന്നേറ്റത്തിലുള്ള ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനങ്ങളെ പഠിപ്പിക്കാൻ ഒരു സ്പേസ് ഗെയിം
|
||||
|
||||
ഈ പാഠത്തിൽ നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം സ്പേസ് ഗെയിം നിർമ്മിക്കാൻ പഠിക്കാം. നിങ്ങൾ "സ്പേസ് ഇൻവേഡേഴ്സ്" ഗെയിം കളിച്ചിട്ടുണ്ടെങ്കിൽ, ഈ ഗെയിമിനും ആ പഴയ ആശയമാണ്: ഒരു യാത്രാവാഹനം നിയന്ത്രിച്ച് മുകളിൽ നിന്നും ഇറങ്ങുന്ന മണ്ടന്മാരെ കുന്തിക്കൊണ്ടുപോകുക. പൂർത്തിയായ ഗെയിം ഇങ്ങനെ കാണപ്പെടും:
|
||||
|
||||
|
||||
|
||||
ഈ ആറ് പാഠങ്ങളിൽ നിങ്ങൾ താഴെ പറയുന്നവ പഠിക്കും:
|
||||
|
||||
- സ്ക്രീനിൽ ചിത്രങ്ങൾ വരയ്ക്കാൻ Canvas ഘടകവുമായി **ഇടപഴകുക**
|
||||
- കാർട്ടീഷ്യൻ കോർഡിനേറ്റ് സിസ്റ്റം **ബോധ്യപ്പെടുത്തുക**
|
||||
- പരിപാലനംക്കും വിപുലീകരിക്കാനും എളുപ്പമുള്ള ശബ്ദ ഗെയിം ഘടന സൃഷ്ടിക്കാൻ പബ്ലിഷ്-സബ്സ്ക്രൈബ് മാതൃക **പഠിക്കുക**
|
||||
- ഗെയിം വിഭവങ്ങൾ ലോഡ് ചെയ്യാൻ Async/Await **പ്രയോജനപ്പെടുത്തുക**
|
||||
- കീബോർഡ് ഇവന്റുകൾ ** കൈകാര്യം ചെയ്യുക**
|
||||
|
||||
## അവലോകനം
|
||||
|
||||
- സംവിധാനവും തിയറിയും
|
||||
- [JavaScript ഉപയോഗിച്ച് ഗെയിമുകൾ നിർമ്മിക്കുന്നതിനുള്ള പരിചയം](1-introduction/README.md)
|
||||
- പ്രായോഗികം
|
||||
- [Canvas-ലേക്ക് വരയ്ക്കൽ](2-drawing-to-canvas/README.md)
|
||||
- [സ്ക്രീനിൽ ഘടകങ്ങൾ നീട്ടിക്കൊണ്ടിരിക്കുക](3-moving-elements-around/README.md)
|
||||
- [ടक्कर കണ്ടെത്തൽ](4-collision-detection/README.md)
|
||||
- [സ്കോർ സൂക്ഷിക്കൽ](5-keeping-score/README.md)
|
||||
- [ഗെയിം അവസാനിപ്പിക്കൽും പുനരാരംഭവും](6-end-condition/README.md)
|
||||
|
||||
## ക്രെഡിറ്റുകൾ
|
||||
|
||||
ഇതിന് ഉപയോഗിച്ച അസറ്റുകൾ https://www.kenney.nl/ മുതലായവയിൽ നിന്നാണ്.
|
||||
നിങ്ങൾ ഗെയിം നിർമ്മിക്കുന്നതിൽ ആസ്വദിക്കുന്നുവെങ്കിൽ, ഇവ അതിസംവേദനാത്മകമായി നല്ല അസറ്റുകളാണ്, പലതും free ആണ്, ചിലത് paid ആണ്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അപരാഹ്നം**:
|
||||
ഈ രേഖ എഐ പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്കായി ശ്രമിക്കുകയും ചെയ്താലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അസംവേദനസാധ്യതകൾ ഉണ്ടാകാൻ ഇടയുണ്ട് എന്നതിൽ ശ്രദ്ധിക്കുക. ഈ രേഖയുടെ ആദ്യഭാഷയിലുള്ള അതിന്റെ മേന്മയുള്ളത് ആയ പ്രമാണം ആബദ്ധമായ സൂത്രവാക്യമായിരിക്കണം. അത്യാവശ്യമുള്ള വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനു് മൂലം ഉണ്ടാകുന്ന ഏത് തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T14:36:35+00:00",
|
||||
"source_file": "6-space-game/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
ഇത് ഒരു പ്ലേസ്ഹോൾഡറാണ്, ഉദ്ദേശപൂർവ്വം ഒഴിക്തമാണ്
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസാധുവാക്കൽ**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം നിർവാഹിക്കുന്നതിനായി നിഷ്മയത്വം പാലിച്ചാലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിഴവുകളും വീഴ്ചകളും ഉണ്ടാകാം എന്ന തിരിച്ചറിയുക. പ്രഥമ ഭാഷയിലെ യഥാർഥ രേഖയാണ് വിശ്വസനീയമായ ഉറവിടം. നിർണ്ണായക വിവരങ്ങൾക്ക്, നിപുണ മനുഷ്യവിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തന ഉപയോഗത്തിൽ നിന്നുണ്ടാകാവുന്ന തെറ്റുപറച്ചിലുകൾക്കും തെറ്റായി വ്യാഖ്യാനിക്കുന്നതിനും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
|
||||
"translation_date": "2026-01-08T17:11:00+00:00",
|
||||
"source_file": "7-bank-project/1-template-route/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# റൂട്ടിംഗ് മെച്ചപ്പെടുത്തുക
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
നിങ്ങൾ അടിസ്ഥാന റൂട്ടിംഗ് സംവിധാനം നിർമാണം പൂർത്തിയാക്കിയിരിക്കുന്നു, ഇപ്പോൾ അത് ഉപഭോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും മികച്ച ഡെവലപ്പർ ടൂൾസുകൾ നൽകുകയും ചെയ്യുന്ന പ്രൊഫഷണൽ ഫീച്ചറുകൾ ചേർത്തുകൊണ്ട് പ്രഗതി കൈക്കൊള്ളാൻ സമയം എത്തി. യഥാർത്ഥ ലോക അപ്ലിക്കേഷനുകൾക്ക് ഒരു ടെംപ്ലേറ്റ് മാറൽ മാത്രമല്ല, ഡൈനാമിക് പേജ് തലക്കെട്ടുകൾ, ലൈഫ്സൈക്കിൾ ഹൂക്കുകൾ, വിപുലമായ ആർക്കിടെക്ചറുകൾ എന്നിവ ആവശ്യമാണ്.
|
||||
|
||||
ഈ അസൈൻമെന്റിൽ, നിർമ്മിത റൂട്ടിംഗ് ഇംപ്ലമെന്റേഷനിൽ സാധാരണ പ്രൊഡക്ഷൻ വെബ് അപ്ലിക്കേഷനുകളിൽ കാണപ്പെടുന്ന രണ്ട് മുഖ്യ ഫീച്ചറുകൾ ചേർക്കും. ഈ മെച്ചപ്പെടുത്തലുകൾ നിങ്ങളുടെ ബാങ്കിംഗ് ആപ്പ് കൂടുതൽ പ്രൊഫഷണലായി തോന്നുകയും ഭാവി ഫംഗ്ഷനാലിറ്റിക്ക് ഒരു അടിസ്ഥാനവും നൽകുകയും ചെയ്യും.
|
||||
|
||||
റൂട്ടുകൾ പ്രഖ്യാപനത്തിൽ ഇപ്പോൾ ഉപയോഗിക്കാനുള്ള ടെംപ്ലേറ്റ് ഐഡി മാത്രമേ ഉണ്ടാകൂ. പക്ഷേ ഒരു പുതിയ പേജ് പ്രദർശിപ്പിക്കുമ്പോൾ.kannada ചില അധിക വിവരങ്ങൾ ആവശ്യമായേക്കാം. ഇരുവിഭാഗവും ചേർത്തുകൊണ്ട് നമ്മുടെ റൂട്ടിംഗ് പാലിക്കൽ മെച്ചപ്പെടുത്താം:
|
||||
|
||||
### ഫീച്ചർ 1: ഡൈനാമിക് പേജ് തലക്കെട്ടുകൾ
|
||||
**വെല്ലുവിളി:** ഓരോ ടെംപ്ലേറ്റിനും തലക്കെട്ടുകൾ നൽകുക, ടെംപ്ലേറ്റ് മാറുമ്പോൾ വിൻഡോ തലക്കെട്ട് ഈ പുതിയ തലക്കെട്ടിലേക്ക് അപ്ഡേറ്റ് ചെയ്യുക.
|
||||
|
||||
**എന്തുകൊണ്ട് ഇത് മാത്രം:**
|
||||
- **ഉപഭോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു** വേർവിവരമുള്ള ബ്രൗസർ ടാബ് തലക്കെട്ടുകൾ കാണിച്ച്
|
||||
- **ആക്സസിബിലിറ്റി വർധിപ്പിക്കുന്നു** സ്ക്രീൻ റീഡർമാർക്കും സഹായകര സാങ്കേതിക വിദ്യകൾക്കും
|
||||
- **ഉത്തമമായ ബുക്ക്മാർകിംഗ്, ബ്രൗസർ ഹിസ്റ്ററി ഇടപെടലുകൾ നൽകുന്നു**
|
||||
- **പ്രൊഫഷണൽ വെബ് ഡെവലപ്പ്മെന്റ് മികച്ച രീതികളനുസരിക്കുന്നു**
|
||||
|
||||
**ഇംപ്ലിമെന്റേഷൻ വീതി:**
|
||||
- **റൂട്ട്സ് ഒബ്ജക്ട് പരിധി വർദ്ധിപ്പിക്കുക** ഓരോ റൂട്ടിനും തലക്കെട്ട് വിവരങ്ങൾ ഉൾപ്പെടുത്തുക
|
||||
- **`updateRoute()` ഫംഗ്ഷൻ മാറ്റുക** ഡൈനാമിക് ആയി `document.title` അപ്ഡേറ്റ് ചെയ്യും
|
||||
- **ടീസ്റ്റുചെയ്യുക** സ്ക്രീനുകൾ മധ്യേ നാവിഗേറ്റ് ചെയ്താൽ തലക്കെട്ടുകൾ ശരിയായി മാറുന്നു എന്ന്
|
||||
|
||||
### ഫീച്ചർ 2: റൂട്ടും ലൈഫ്സൈക്കിൾ ഹുക്കുകൾ
|
||||
**വെല്ലുവിളി:** ടെംപ്ലേറ്റ് മാറിയതിനു ശേഷം ചില കോഡ് എക്സിക്യൂട്ട് ചെയ്യാനുള്ള ഓപ്ഷൻ ചേർക്കുക. ഡെവലപ്പർ കോൺസോളിൽ ഓരോ തവണ ഡാഷ്ബോർഡ് പേജ് കാണുമ്പോഴും `'Dashboard is shown'` പ്രിന്റ് ചെയ്യണം.
|
||||
|
||||
**എന്തുകൊണ്ട് ഇത് മാത്രം:**
|
||||
- **കസ്റ്റം ലജിക്ക് പ്രവർത്തിപ്പിക്കാൻ സഹായിക്കുന്നു** പ്രത്യേക റൂട്ടുകൾ ലോഡ് ചെയ്യുമ്പോൾ
|
||||
- **ആനലിറ്റിക്സ്, ലോഗിംഗ്, ഇൻഷ്യലൈസേഷൻ കോഡിനുള്ള ഹുക്കുകൾ നൽകുന്നു**
|
||||
- **കീഴിലെ കോംപ്ലക്സിറ്റി ഉള്ള റൂട്ടിങ് പെരുമാറ്റങ്ങൾക്കുള്ള നാമ്പ് സൃഷ്ടിക്കുന്നു**
|
||||
- **വെബ് ഡെവലപ്പ്മെന്റിലുള്ള ഓബ്സ്വർ പാറ്റേൺ കാണിക്കുന്നു**
|
||||
|
||||
**ഇംപ്ലിമെന്റേഷൻ വീതി:**
|
||||
- **റൂട്ടിംഗ് കോൺഫിഗറേഷനുകളിൽ ഓപ്ഷണൽ കോൾബാക്ക് ഫംഗ്ഷൻ ചേർക്കുക**
|
||||
- **ടെംപ്ലേറ്റ് റേൻഡറിങ്ങ് കഴിഞ്ഞ് കോൾബാക്ക് ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുക (ഉണ്ടെങ്കിൽ)**
|
||||
- **കോൾബാക്ക് നിർവചിച്ചിരിക്കുന്ന ഏതൊരു റൂട്ടിനും ഈ ഫീച്ചർ പ്രവർത്തിക്കാൻ ഉറപ്പാക്കുക**
|
||||
- **ഡാഷ്ബോർഡ് സന്ദർശിക്കുമ്പോൾ കോൺസോളിൽ മെസേജ് കാണാനുണ്ടെന്ന് പരിശോദിക്കുക**
|
||||
|
||||
## റുബ്രിക്
|
||||
|
||||
| ക്രൈട്ടീരിയ | ഉത്തമം | നല്ലത് | മെച്ചപ്പെടുത്തേണ്ടത് |
|
||||
| -------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
|
||||
| | ഇരുവരും ഫീച്ചറുകളും വിജയംകരമായി പ്രവർത്തിക്കുന്നു. തലക്കെട്ടു, കോഡ് ചേർക്കൽ പുതിയ третьാം റൂട്ടിലും `routes` ഡിക്ലറേഷനിൽ ലഭ്യമാകുന്നു. | ഇരുവരും ഫീച്ചറുകൾ പ്രവർത്തിക്കുന്നു, പക്ഷേ അത് ഹാർഡ്കോഡായി മാത്രമേ ഉള്ളൂ; `routes` ഡിക്ലറേഷൻ വഴി കോൺഫിഗർ ചെയ്യാൻ കഴിയുന്നില്ല. മൂന്നാം റൂട്ടിൽ തലക്കെട്ട്, കോഡ് ചേർക്കൽ പൂർണമായും അല്ലെങ്കിൽ ഭാഗികമായി പ്രവർത്തിക്കുന്നില്ല. | ഒന്നാം ഫീച്ചർ ഇല്ലാത്തത് അല്ലെങ്കിൽ ശരിയായി പ്രവർത്തിക്കുന്നില്ല. |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാവാക്ക്**:
|
||||
ഈ രേഖ AI തര്ജ്ജമാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തര്ജ്ജമ ചെയ്തതാണ്. ഞങ്ങള് നിര്വ്വികാരതക്കും കൃത്യതക്കും പ്രയത്നം ചെയ്യും എങ്കിലും, ഓട്ടോമേറ്റഡ് തര്ജ്ജമയില് തെറ്റുകളോ അക്യുറസിയില്ലായ്മയോ ഉണ്ടായിരിക്കാന് സാധ്യതവുണ്ട്. സ്വദേശീയ ഭാഷയില് ഉള്ള അസ്തിത്വത്തിലുള്ള പകർപ്പ് പ്രാധാന്യത്തോടെ കാണണമെന്നും കരുതുക. പ്രധാനമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ തര്ജ്ജമ ഉപയോഗിക്കണമെന്ന് ശിപാര്ശ ചെയ്യപ്പെടുന്നു. ഈ തര്ജ്ജമ ഉപയോഗിക്കുന്നതില്നിന്നുള്ള എളുപ്പമോ തെറ്റിദ്ധാരണയോ കാരണം ഞങ്ങൾക്ക് ഉത്തരവാദിത്വമില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,166 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
|
||||
"translation_date": "2026-01-08T16:36:56+00:00",
|
||||
"source_file": "7-bank-project/2-forms/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# നിങ്ങളുടെ ബാങ്ക് ആപ്പ് ആധുനിക CSS ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്യുക
|
||||
|
||||
## പ്രോജക്ട് അവലോകനം
|
||||
|
||||
നിങ്ങളുടെ പ്രവർത്തനക്ഷമമായ ബാങ്കിങ് ആപ്പിനെ ആകർഷകവുമായ, പ്രൊഫഷണൽ ലുക്കുള്ള വെബ് ആപ്പായി മാറ്റാൻ ആധുനിക CSS സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുക. ഒരു ഏകോപിത ഡിസൈൻ സിസ്റ്റം സൃഷ്ടിച്ച് ഉപയോഗകാർക്ക് മെച്ചപ്പെട്ട അനുഭവം നൽകുകയും ആക്സസിലബിലിറ്റിയും പ്രതികരണശേഷിയുള്ള ഡിസൈനും പാലിക്കുകയും ചെയ്യുക.
|
||||
|
||||
ഈ അസൈൻമെന്റ് നിങ്ങൾക്കെതിരെ ആധുനിക വെബ് ഡിസൈൻ പാറ്റേണുകൾ പ്രയോഗിക്കാൻ, സ്ഥിരതയുള്ള ദൃശ്യ ഐഡന്റിറ്റി നടപ്പാക്കാൻ, ഉപയോക്താക്കൾക്ക് ആകർഷകവും സുഖപ്രദവുമായ ഇന്റർഫേസ് സൃഷ്ടിക്കാൻ വെല്ലുവിളിയാക്കുന്നു.
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### ഘട്ടം 1: നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റ് സജ്ജമാക്കുക
|
||||
|
||||
**നിങ്ങളുടെ CSS അടിസ്ഥാന നിർമ്മിക്കുക:**
|
||||
|
||||
1. പ്രോജക്ട് റൂട്ടിൽ `styles.css` എന്ന പേരിൽ പുതിയ ഫയൽ **സൃഷ്ടിക്കുക**
|
||||
2. നിങ്ങളുടെ `index.html` ഫയലിൽ സ്റ്റൈൽഷീറ്റ് **ലിങ്ക് ചെയ്യുക**:
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
```
|
||||
3. CSS റിസെറ്റും ആധുനിക ഡിഫോൾട്ടുകളും **ആരംഭിക്കുക**:
|
||||
```css
|
||||
/* Modern CSS reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
```
|
||||
|
||||
### ഘട്ടം 2: ഡിസൈൻ സിസ്റ്റം ആവശ്യങ്ങൾ
|
||||
|
||||
**അദ്ദേഹം അവശ്യമായ ഡിസൈൻ ഘടകങ്ങൾ നടപ്പിലാക്കുക:**
|
||||
|
||||
#### കളർ പാളറ്റ്
|
||||
- **പ്രധാന നിറം**: ബട്ടണുകൾക്കും ഹൈലൈറ്റുകൾക്കും പ്രൊഫഷണൽ നിറം തിരഞ്ഞെടുക്കുക
|
||||
- **സെക്കണ്ടറി നിറം**: അക്ഷന്റുകൾക്കും സെക്കൻഡറി ആക്ഷനുകൾക്കുമായി സമചതുര നിറം
|
||||
- **ന്യൂട്രൽ നിറങ്ങൾ**: വാചകങ്ങൾ, ബോർഡറുകൾ, പശ്ചാത്തലങ്ങൾ എന്നിവയ്ക്കായി ഗ്രേ കളർ
|
||||
- **സക്സസ്/തെറ്റുകൾ നിറങ്ങൾ**: വിജയാവസ്ഥകൾക്കായി പച്ച, തെറ്റുകൾക്കായി ചുവപ്പ്
|
||||
|
||||
#### ടൈപ്പോഗ്രാഫി
|
||||
- **ഹെഡിംഗ് ഹയറാർക്കി**: H1, H2, H3 ഘടകങ്ങൾക്കിടയിലെ വ്യക്തമായ വ്യത്യാസം
|
||||
- **ബോഡി ടെക്സ്റ്റ്**: വായിക്കാൻ അനുയോജ്യമായ ഫോണ്ട് വലുപ്പം (കുറഞ്ഞത് 16px)യും യോജിച്ച വരിയിലെ ഉയരും
|
||||
- **ഫോം ലേബലുകൾ**: വ്യക്തമായ, ആക്സസിബിൾ വാചക സ്റ്റൈലിംഗ്
|
||||
|
||||
#### ലേയൗട്ട് & സ്പേസിംഗ്
|
||||
- **സ്ഥിരമായ സ്പേസിംഗ്**: സ്പേസിംഗ് സ്കെയിൽ ഉപയോഗിക്കുക (8px, 16px, 24px, 32px)
|
||||
- **ഗ്രിഡ് സിസ്റ്റം**: ഫോംകളും ഉള്ളടക്ക സെക്ഷനുകളുമായി ക്രമഘടിതമായ ലേയൗട്ട്
|
||||
- **റിസ്പോൺസീവ് ഡിസൈൻ**: മൊബൈൽ-ഫസ്റ്റ് സമീപനം ബ്രേക്ക്പോയിന്റുകളും
|
||||
|
||||
### ഘട്ടം 3: കമ്ബോണന്റ് സ്റ്റൈലിംഗ്
|
||||
|
||||
**ഈ പ്രത്യേക ഘടകങ്ങളെ സ്റ്റൈൽ ചെയ്യുക:**
|
||||
|
||||
#### ഫോങ്ങൾ
|
||||
- **ഇൻപുട്ട് ഫീൽഡുകൾ**: പ്രൊഫഷണൽ ബോർഡറുകൾ, ഫോകസ് സ്റ്റേറ്റുകൾ, വിശദീകരണ സ്റ്റൈലിംഗ്
|
||||
- **ബട്ടണുകൾ**: ഹോവർ ഇഫക്ട്സ്, ഡിസേബിൾഡ് സ്റ്റേറ്റുകൾ, ലോഡിംഗ് സൂചനകൾ
|
||||
- **ലേബലുകൾ**: വ്യക്തമായ പൊസിഷനിങ്ങും ആവശ്യമായ ഫീൽഡ് ഇൻഡിക്കേറ്ററുകളും
|
||||
- **തെറ്റ് സന്ദേശങ്ങൾ**: ദൃശ്യമാകുന്ന തെറ്റ് സ്റ്റൈലിംഗ്, സഹായകരമായ സന്ദേശങ്ങൾ
|
||||
|
||||
#### നാവിഗേഷൻ
|
||||
- **ഹെഡർ**: സുതാര്യവും ബ്രാൻഡഡ് നാവിഗേഷൻ ഏരിയ
|
||||
- **ലിങ്കുകൾ**: വ്യക്തമായ ഹോവർ സ്റ്റേറ്റുകളും ആക്ടീവ് ഇൻഡിക്കേറ്ററുകളും
|
||||
- **ലോഗോ/ടൈറ്റിൽ**: വ്യത്യസ്തമായ ബ്രാൻഡിംഗ് ഘടകം
|
||||
|
||||
#### ഉള്ളടക്ക മേഖലകൾ
|
||||
- **സെക്ഷനുകൾ**: വിവിധ മേഖലയെക്കിടയിൽ വ്യക്തമായ ദൃശ്യ വ്യത്യാസം
|
||||
- **കാർഡുകൾ**: കാർഡ് അടിസ്ഥാന ലേയൗട്ടുകൾ ഉപയോഗിക്കുന്ന പക്ഷം, ഷാഡോകളും ബോർഡറുകളും ഉൾപ്പെടുത്തുക
|
||||
- **പശ്ചാത്തലങ്ങൾ**: ശ്വാസകോശം നിറഞ്ഞ സ്ഥലവും സോഫ്റ്റ് പശ്ചാത്തലങ്ങളും അനുയോജ്യമായി ഉപയോഗിക്കുക
|
||||
|
||||
### ഘട്ടം 4: വികസിത ഫീച്ചറുകൾ (ഐച്ഛികം)
|
||||
|
||||
**ഈ ഉന്നത ഫീച്ചറുകൾ പരിഗണിക്കുക:**
|
||||
- **ഡാർക്ക് മോഡ്**: ലൈറ്റ്, ഡാർക്ക് തീമുകൾ തമ്മിൽ ടോഗിൾ ചെയ്യുക
|
||||
- **അനിമേഷനുകൾ**: സോഫ്റ്റ് ട്രാൻസിഷനുകളും മൈക്രോ-ഇന്ററാക്ഷനുകളും
|
||||
- **ലോഡിംഗ് സ്റ്റേറ്റുകൾ**: ഫോം സമർപ്പണ സമയത്ത് ദൃശ്യ പ്രതികരണം
|
||||
- **റിസ്പോൺസീവ് ഇമേജുകൾ**: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി ഓപ്റ്റിമൈസഡ് ഇമേജുകൾ
|
||||
|
||||
## ഡിസൈൻ പ്രേരണ
|
||||
|
||||
**ആധുനിക ബാങ്കിങ് ആപ്പിന്റെ സവിശേഷതകൾ:**
|
||||
- **ശുദ്ധവും ലഘുവുമായ ഡിസൈൻ** ധാരാളം വെള്ളിയിടം ഉപയോഗിച്ച്
|
||||
- **പ്രൊഫഷണൽ നിറം പദ്ധതികൾ** (നീല, പച്ച, അല്ലെങ്കിൽ സോപാന ഗ്രീഷ്മരമായ ന്യൂട്രൽ കളറുകൾ)
|
||||
- **വൈദഗ്ധ്യമുള്ള ദൃശ്യ പാളികൾ** വ്യക്തമായ കോള്യൂടു-ആക്ഷൻ ബട്ടണുകളോടെ
|
||||
- **ആക്സസിബിൾ കണ്ട്രാസ്റ്റ് അനുപാതങ്ങൾ** WCAG മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിച്ച്
|
||||
- **മൊബൈൽ-റിസ്പോൺസീവ് ലേയൗട്ടുകൾ** എല്ലാ ഉപകരണങ്ങളിലും പ്രവർത്തിക്കുന്നു
|
||||
|
||||
## സാങ്കേതിക ആവശ്യങ്ങൾ
|
||||
|
||||
### CSS ഓർഗനൈസേഷൻ
|
||||
```css
|
||||
/* 1. CSS Custom Properties (Variables) */
|
||||
:root {
|
||||
--primary-color: #007bff;
|
||||
--secondary-color: #6c757d;
|
||||
/* Add more variables */
|
||||
}
|
||||
|
||||
/* 2. Base Styles */
|
||||
/* Reset, typography, general elements */
|
||||
|
||||
/* 3. Layout */
|
||||
/* Grid, flexbox, positioning */
|
||||
|
||||
/* 4. Components */
|
||||
/* Forms, buttons, cards */
|
||||
|
||||
/* 5. Utilities */
|
||||
/* Helper classes, responsive utilities */
|
||||
|
||||
/* 6. Media Queries */
|
||||
/* Responsive breakpoints */
|
||||
```
|
||||
|
||||
### ആക്സസിബിലിറ്റി ആവശ്യങ്ങൾ
|
||||
- **നിറം കണ്ട്രാസ്റ്റ്**: സാധാരണ വാചകത്തിനായി കുറഞ്ഞത് 4.5:1 അനുപാതം ഉറപ്പാക്കുക
|
||||
- **ഫോകസ് ഇൻഡിക്കേറ്റർ**: കീബോർഡ് നാവിഗേഷനിനായി ദൃശ്യമാകുന്ന ഫോകസ് സ്റ്റേറ്റുകൾ
|
||||
- **ഫോം ലേബലുകൾ**: ഇൻപുട്ടുകൾക്ക് ശരിയായി അസോസിയേറ്റ് ചെയ്തിട്ടുള്ളവ
|
||||
- **റിസ്പോൺസീവ് ഡിസൈൻ**: 320px മുതൽ 1920px വരെ ഉള്ള സ്ക്രീനുകളിൽ ഉപയോഗയോഗ്യമായത്
|
||||
|
||||
## മೌಲ്യനിർണയ ക്രൈറ്റീരിയ
|
||||
|
||||
| ക്രൈറ്റീരിയ | ഉദാത്തം (A) | പ്രൊഫിഷ്യന്റ് (B) | വികസിച്ചു കൊണ്ടിരിക്കുന്നത് (C) | മെച്ചപ്പെടുത്തേണ്ടത് (F) |
|
||||
|----------|---------------|----------------|----------------|----------------------|
|
||||
| **ഡിസൈൻ സിസ്റ്റം** | സ്ഥിരമായ നിറങ്ങൾ, ടൈപ്പോഗ്രാഫി, സ്പേസിംഗ് എന്നിവയോട് കൂടിയ സമഗ്ര ഡിസൈൻ സിസ്റ്റം നടപ്പാക്കുന്നു | വ്യക്തമായ ഡിസൈൻ പാറ്റേണുകളും നല്ല ദൃശ്യ പാളിയും ഉള്ള സ്ഥിരമായ സ്റ്റൈലിംഗ് ഉപയോഗിക്കുന്നു | അടിസ്ഥാന സ്റ്റൈലിംഗ് ചില സ്ഥിരതാ പ്രശ്നങ്ങളോടെയോ ഡിസൈൻ ഘടകങ്ങൾ മറന്നോ ഉള്ളത് | കുറഞ്ഞ സ്റ്റൈലിംഗ്, സ്ഥിരതയില്ലാത്ത അല്ലെങ്കിൽ വിരുദ്ധ ഡിസൈൻ തിരഞ്ഞെടുപ്പുകൾ |
|
||||
| **ഉപയോക്തൃ അനുഭവം** | ലളിതവും പ്രൊഫഷണൽ ഇന്റർഫേസ്, മികച്ച ഉപയോഗസൗകര്യവും ദൃശ്യ ആകർഷണവും | വ്യക്തമായ നാവിഗേഷനും വായനയോഗ്യമായ ഉള്ളടക്കവും ഉള്ള നല്ല അനുഭവം നൽകുന്നു | അടിസ്ഥാന ഉപയോഗ സൌകര്യം, ചില UX മെച്ചപ്പെടുത്തലുകൾ ആവശ്യം | കുറവ് ഉപയോഗസൗകര്യം, നാവിഗിക്കാനും വായിക്കാനും പ്രയാസം |
|
||||
| **സാങ്കേതിക നടപ്പാക്കൽ** | ആധുനിക CSS സാങ്കേതികതകൾ, നന്നായി ഓർഗനൈസ്ഡ് കോഡ് ഘടന, മികച്ച പ്രാക്ടീസുകൾ പാലിക്കുന്നു | CSS ഫലപ്രദമായി നടപ്പിലാക്കി നല്ല ഓർഗനൈസേഷനും അനുയോജ്യമായ സാങ്കേതിക വിദ്യകളും | CSS ശരിയായി പ്രവർത്തിക്കുന്നു, പക്ഷേ ഓർഗനൈസേഷനിൽ കുറവോ ആധുനിക സമീപനങ്ങളിൽ കുറവോ | തെറ്റായ CSS നടപ്പാക്കൽ, സാങ്കേതിക പ്രശ്നങ്ങളോ ബ്രൗസർ പൊരുത്തക്കേടുകളോ |
|
||||
| **റിസ്പോൺസീവ് ഡിസൈൻ** | എല്ലാ ഉപകരണ വലുപ്പങ്ങളിലും മനോഹരമായി പ്രവർത്തിക്കുന്ന പൂർണ്ണ റിസ്പോൺസീവ് ഡിസൈൻ | ചെറിയ ചില പ്രശ്നങ്ങളോടെയുള്ള നല്ല റിസ്പോൺസീവ് വ്യവഹാരം | ചില ലേയൗട്ട് പ്രശ്നങ്ങളോടൊത്ത് അടിസ്ഥാന റിസ്പോൺസീവ് നടപ്പാക്കൽ | റിസ്പോൺസീവ് അല്ല, മൊബൈൽ ഉപകരണങ്ങളിൽ ഗൗരവമുള്ള പ്രശ്നങ്ങൾ |
|
||||
| **ആക്സസിബിലിറ്റി** | മികച്ച കീബോർഡ് നാവിഗേഷനും സ്ക്രീൻ റീഡർ പിന്തുണയും ഉള്ള WCAG മാർഗ്ഗനിർദേശങ്ങൾ പാലിക്കുന്നു | ശരിയായ കണ്ട്രാസ്റ്റും ഫോക്കസ് ഇൻഡിക്കേറ്ററുകളും ഉള്ള നല്ല ആക്സസിബിലിറ്റി | ചില ഘടകങ്ങൾ കുറവായിട്ടുള്ള അടിസ്ഥാന ആക്സസിബിലിറ്റി പരിഗണനകൾ | ദുർബല ഉപയോക്താക്കൾക്ക് പ്രയാസമുള്ള കുറവായ ആക്സസിബിലിറ്റി |
|
||||
|
||||
## സമർപ്പണ നിർദ്ദേശങ്ങൾ
|
||||
|
||||
**നിങ്ങളുടെ സമർപ്പണത്തിൽ ഉൾപ്പെടുത്തുക:**
|
||||
- **styles.css**: നിങ്ങളുടെ പൂര്ണ സ്റ്റൈൽഷീറ്റ്
|
||||
- **പുതുക്കിയ HTML**: നിങ്ങൾ ചെയ്ത ഏതെങ്കിലും HTML മാറ്റങ്ങൾ
|
||||
- **സ്ക്രീൻഷോട്ട്**: ഡെസ്ക്ടോപ്പിലും മൊബൈലിലും നിങ്ങളുടെ ഡിസൈൻ കാണിക്കുന്ന ചിത്രങ്ങൾ
|
||||
- **README**: നിങ്ങളുടെ ഡിസൈൻ തിരഞ്ഞെടുപ്പുകളും കളർ പാളറ്റും സംബന്ധിച്ച സാരാംശം
|
||||
|
||||
**ബോൺസ് പോയിന്റുകൾ:**
|
||||
- **CSS കസ്റ്റം പ്രോപർട്ടികൾ** പരിപാലനയോഗ്യമായ തീമിങ്ങിനായി
|
||||
- **Grid, Flexbox അല്ലെങ്കിൽ CSS അനിമേഷനുകൾ പോലുള്ള** പുരോഗമനസൗകര്യങ്ങൾ
|
||||
- **ഓപ്റ്റിമൈസ്ഡ് CSS, കുറഞ്ഞ ഫയർസൈസ് പോലുള്ള** പെർഫോമൻസ് പരിഗണനകൾ
|
||||
- **വിവിധ ബ്രൗസറുകളിൽ പൊരുത്തം ഉറപ്പാക്കുന്ന** ക്രോസ്-ബ്രൗസർ ടെസ്റ്റിംഗ്
|
||||
|
||||
> 💡 **പ്രൊ ടിപ്**: ആദ്യം മൊബൈൽ ഡിസൈൻ ആമുഖമാക്കുക, പിന്നീട് വലിയ സ്ക്രീനുകൾക്കായി മെച്ചപ്പെടുത്തുക. ഈ മൊബൈൽ-ഫസ്റ്റ് സമീപനം നിങ്ങളുടെ ആപ്പ് എല്ലാ ഉപകരണങ്ങളിലും മികച്ചതായി പ്രവർത്തിക്കുന്നതും ആധുനിക വെബ് ഡെവലപ്പ്മെന്റ് മികച്ച പ്രാക്ടീസുകൾ പിന്തുടരുന്നതുമാണ്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാചിത്രം**:
|
||||
ഈ ഡോക്യുമെന്റ് AI തർജ്ജമ സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജമചെയ്തതാണ്. നാം കൃത്യത തുടരാൻ ശ്രമിക്കുന്നുവെങ്കിലും, സ്വയമേവ പ്രവർത്തിക്കുന്ന തർജ്ജമയിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റായ വിവരങ്ങൾ ഉൾപ്പെടാം എന്നതിനെ ശ്രദ്ധിക്കുക. യാഥാർത്ഥ്യ ഭാഷയിലെ മൗലിക ഡോക്യുമെന്റ് മാത്രമാണ് നിർണ്ണായക ഉറവിടം. പ്രധാന വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മാനവ തർജ്ജമ നിർദ്ദേശിക്കുന്നു. ഈ തർജ്ജമ ഉപയോഗിച്ചതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകളോ വ്യാഖ്യാന പിഴവുകളോക്കായി ഞങ്ങൾ ഏത് ബാധ്യതയും ഏറ്റെടുക്കുന്നതില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,144 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "d0a02cb117e91a5b5f24178080068a3d",
|
||||
"translation_date": "2026-01-08T17:30:54+00:00",
|
||||
"source_file": "7-bank-project/3-data/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കോഡ് റിഫാക്ടറിങ്ങും ഡോക്യുമെന്റേഷനും അസൈൻമെന്റ്
|
||||
|
||||
## പഠനലക്ഷ്യങ്ങൾ
|
||||
|
||||
ഈ അസൈൻമെന്റ് പൂർത്തിയാക്കുമ്പോൾ, നിങ്ങളുടെ പ്രൊഫഷണൽ ഡെവലപ്പർമാർ ദിവസേന ഉപയോഗിക്കുന്ന അടിസ്ഥാന സോഫ്റ്റ്വേർ വികസന നൈപുണ്യങ്ങൾ അഭ്യസിക്കപ്പെടും. പരിപാലനയോഗ്യമായ കോഡ് ഒരുമിച്ച് ക്രമീകരിക്കുകയും, അബ്സ്ട്രാക്ഷൻ വഴി പുനരാവriti കുറയ്ക്കുകയും, ഭാവിയിലെ ഡെവലപ്പർമാർക്കായി (നിങ്ങളടക്കമുള്ള) നിങ്ങളുടെ പ്രവർത്തി ഡോക്യുമെന്റ് ചെയ്യുന്നതിനും നിങ്ങൾ പഠിക്കും.
|
||||
|
||||
വളരെ സുസ്ഥിരവും വിശകലനസൗകര്യമുള്ളും ഡോക്യുമെന്റ് ചെയ്ത കോഡ് എങ്ങനെ വേണമെന്നത് യഥാർത്ഥ വെബ് വികസന പദ്ധതികളിൽ അത്യാവശ്യം ആകുന്നു, ഇവിടങ്ങളിൽ നിരവധി ഡെവലപ്പർമാർ ചേർന്ന് പ്രവർത്തിക്കുകയും കോഡ്بേസ് സമയത്തോടെ വികസിക്കുകയും ചെയ്യുന്നു.
|
||||
|
||||
## അസൈൻമെന്റ് അവലോകനം
|
||||
|
||||
നിങ്ങളുടെ ബാങ്കിംഗ് ആപ്പിന്റെ `app.js` ഫയൽ ലോഗിൻ, രജിസ്ട്രേഷൻ, ഡാഷ്ബോർഡ് ഫംഗ്ഷനാലിറ്റികൾക്കൊപ്പം വളരെയധികം വികസിച്ചു. വായനയോഗ്യത, പരിപാലനശേഷി മെച്ചപ്പെടുത്താൻ, പുനരാവൃത്തി കുറക്കാൻ പ്രൊഫഷണൽ ഡെവലപ്പ്മെന്റ് രീതികൾ ഉപയോഗിച്ച് ഈ കോഡ് റിഫാക്ടർ ചെയ്യേണ്ട സമയം എത്തി.
|
||||
|
||||
## നിദേശങ്ങൾ
|
||||
|
||||
നിങ്ങളുടെ നിലവിലെ `app.js` കോഡ് മൂന്ന് പ്രധാന റിഫാക്ടറിംഗ് സാങ്കേതിക വിദ്യകൾ നടപ്പിലാക്കി പുനരൂഗ്മിപ്പിക്കുക:
|
||||
|
||||
### 1. കോൺഫിഗറേഷൻ കൺസ്റ്റന്റുകൾ തിരിച്ചു പിടിക്കുക
|
||||
|
||||
**ടാസ്ക്**: പുനരുപയോഗിക്കാവുന്ന സ്ഥിരം മൂല്യങ്ങളെ ഉൾപ്പെടുത്തി ഫയലിന്റെ മുകളിൽ ഒരു കോൺഫിഗറേഷൻ സെക്ഷൻ സൃഷ്ടിക്കുക.
|
||||
|
||||
**നടപ്പാക്കൽ നിർദേശം:**
|
||||
- പല സ്ഥലങ്ങളിലും ഹാർഡ്കോഡഡ് ആയി ഉപയോഗിക്കുന്ന സർവർ API ബേസ URL പിന്വലിക്കുക
|
||||
- പല ഫംഗ്ഷനുകളിലും കാണുന്ന പിശക് സന്ദേശങ്ങൾക്കായി സ്ഥിരം മൂല്യങ്ങൾ സൃഷ്ടിക്കുക
|
||||
- പല മാറ്റങ്ങളാണ് ഉപയോഗിക്കുന്ന റൂട്ട്പാതകളും എലിമെന്റ് ഐഡികളും തിരിച്ച് പിടിക്കാൻ പരിഗണിക്കുക
|
||||
|
||||
**ഉദാഹരണ ഘടന:**
|
||||
```javascript
|
||||
// കോൺഫിഗറേഷൻ സ്ഥിരാങ്കങ്ങൾ
|
||||
const API_BASE_URL = 'http://localhost:5000/api';
|
||||
const ROUTES = {
|
||||
LOGIN: '/login',
|
||||
DASHBOARD: '/dashboard'
|
||||
};
|
||||
```
|
||||
|
||||
### 2. ഏകീകൃത റിക്വസ്റ്റ് ഫംഗ്ഷൻ സൃഷ്ടിക്കുക
|
||||
|
||||
**ടാസ്ക്**: `createAccount()` നെ `getAccount()` ന്റെ ഇടയില് ആവർത്തിക്കുന്ന കോഡ് ഒഴിവാക്കി പുനരുപയോഗം ചെയ്യാവുന്ന `sendRequest()` ഫംഗ്ഷൻ നിർമിക്കുക.
|
||||
|
||||
**ആവശ്യകതകൾ:**
|
||||
- GET, POST റിക്വസ്റ്റുകൾ കൈകാര്യം ചെയ്യുക
|
||||
- ശരിയായ പിശക് കൈകാര്യം ചെയ്യൽ ഉൾപ്പെടുത്തുക
|
||||
- വിവിധ URL എന്റ്പോയിന്റുകൾ പിന്തുണയ്ക്കുക
|
||||
- ഓപ്ഷണൽ റിക്വസ്റ്റ് ബോഡി ഡാറ്റ സ്വീകരിക്കുക
|
||||
|
||||
**ഫംഗ്ഷൻ സിഗ്നേച്ചർ ഗൈഡൻസ്:**
|
||||
```javascript
|
||||
async function sendRequest(endpoint, method = 'GET', data = null) {
|
||||
// നിങ്ങളുടെ നടപ്പാക്കല ഇവിടെ
|
||||
}
|
||||
```
|
||||
|
||||
### 3. പ്രൊഫഷണൽ കോഡ് ഡോക്യുമെന്റേഷൻ ചേർക്കുക
|
||||
|
||||
**ടാസ്ക്**: നിങ്ങളുടെ ലജിക് "എന്തിന്" എന്നത് വ്യക്തമാക്കുന്ന വ്യക്തവും സഹായകരവുമായ കമന്റുകളോടെ നിങ്ങളുടെ കോഡ് ഡോക്യുമെന്റ് ചെയ്യുക.
|
||||
|
||||
**ഡോക്യുമെന്റേഷൻ സ്റ്റാൻഡേർഡുകൾ:**
|
||||
- ഫംഗ്ഷനുകളുടെ ഉദ്ദേശ്യം, പാരാമീറ്ററുകൾ, റിട്ടേൺ മൂല്യങ്ങൾ വിശദീകരിക്കുന്ന ഡോക്യുമെന്റേഷൻ ചേർക്കുക
|
||||
- സങ്കീർണമായ ലജിക് അല്ലെങ്കിൽ ബിസിനസ് നിയമങ്ങൾക്ക് ഇൻലൈൻ കമന്റുകൾ ഉൾപ്പെടുത്തുക
|
||||
- ബന്ധപ്പെട്ട ഫംഗ്ഷനുകൾ വിഭാഗങ്ങൾ ഉടനീളം കൂട്ടിച്ച് ക്രമീകരിക്കുക
|
||||
- പ്രസ്പക്ഷാർത്ഥമായ കോഡ് പാറ്റേണുകൾ അല്ലെങ്കിൽ ബ്രൗസർ-നിർദ്ദിഷ്ട വർക്ക്അറൗണ്ടുകൾ വിശദീകരിക്കുക
|
||||
|
||||
**ഉदാഹരണ ഡോക്യുമെന്റേഷൻ ശൈലി:**
|
||||
```javascript
|
||||
/**
|
||||
* Authenticates user and redirects to dashboard
|
||||
* @param {Event} event - Form submission event
|
||||
* @returns {Promise<void>} - Resolves when login process completes
|
||||
*/
|
||||
async function login(event) {
|
||||
// JavaScript ഉപയോഗിച്ച് കൈകാര്യം ചെയ്യാൻ നിശ്ചിത ഫോർം സമർപ്പണം തടയുക
|
||||
event.preventDefault();
|
||||
|
||||
// നിങ്ങളുടെ നടപ്പാക്കൽ...
|
||||
}
|
||||
```
|
||||
|
||||
## വിജയം നേടാനുള്ള മാനദണ്ഡങ്ങൾ
|
||||
|
||||
നിങ്ങളുടെ റിഫാക്ടർ ചെയ്ത കോഡ് ഈ പ്രൊഫഷണൽ ഡെവലപ്പ്മെന്റ് രീതികൾ പ്രകടിപ്പിക്കണം:
|
||||
|
||||
### ശ്രേഷ്ഠമായ നടപ്പാക്കൽ
|
||||
- ✅ **സ്ഥിരമാക്കിയ മൂല്യങ്ങൾ**: എല്ലാ മാജിക് സ്ട്രിംഗുകൾക്കും URLs-ക്കും വ്യക്തമായി നാമകരണം ചെയ്ത സ്ഥിരം മൂല്യങ്ങളായി വിടുന്നു
|
||||
- ✅ **DRY പ്രിൻസിപിൾ**: പൊതുവായ റിക്വസ്റ്റ് ലജിക് പുനരുപയോഗം ചെയ്യാവുന്ന `sendRequest()` ഫംഗ്ഷനിലേക്കായി ഏകോപിപ്പിച്ചു
|
||||
- ✅ **ഡോക്യുമെന്റേഷൻ**: ഉദ്ദേശ്യവും പാരാമീറ്ററുകളും വ്യക്തമായി വിശദീകരിക്കുന്ന JSDoc കമന്റുകൾ ഫംഗ്ഷനുകൾക്ക് ചേർത്തു
|
||||
- ✅ **ഓർഗനൈസേഷൻ**: കോഡ് ലജിക്കൽ ആയി വിഭാഗീകരിച്ചും സ്ഥിരം ഫോർമാറ്റിംഗിനോടെയും
|
||||
- ✅ **പിശക് കൈകാര്യം ചെയ്യൽ**: പുതിയ റിക്വസ്റ്റ് ഫംഗ്ഷൻ ഉപയോഗിച്ചും മെച്ചപ്പെട്ട പിശക് കൈകാര്യം ചെയ്യൽ
|
||||
|
||||
### ആവശ്യമായ നടപ്പാക്കൽ
|
||||
- ✅ **സ്ഥിരമാക്കിയ മൂല്യങ്ങൾ**: മിക്ക ആവർത്തിച്ചു വരുന്ന മൂല്യങ്ങൾ തിരികെ പിടിച്ചിട്ടുണ്ട്, ചെറിയ ഹാർഡ് കൊഡഡ് മൂല്യങ്ങൾ നിലനിൽക്കുന്നു
|
||||
- ✅ **ഫാക്ടറൈസേഷൻ**: അടിസ്ഥാന `sendRequest()` ഫംഗ്ഷൻ സൃഷ്ടിച്ചിട്ടുണ്ട് പക്ഷേ എല്ലാ എഡ്ജ് കേസ് കൈകാര്യം ചെയ്യാത്തിരിക്കാം
|
||||
- ✅ **കമന്റുകൾ**: പ്രധാനപ്പെട്ട ഫംഗ്ഷനുകൾ ഡോക്യുമെന്റ് ചെയ്തിട്ടുണ്ട്, ചില വിശദീകരണങ്ങൾ കൂടുതൽ പൂർണ്ണമായിരിക്കാം
|
||||
- ✅ **വായനാസൗകര്യം**: കോഡ് സാധാരണയായി നന്നായി ക്രമീകരിച്ചിട്ടുണ്ടെങ്കിലും മെച്ചപ്പെടുത്തൽ സാധ്യതകൾ ഉണ്ട്
|
||||
|
||||
### മെച്ചപ്പെടുത്തേണ്ടത്
|
||||
- ❌ **സ്ഥിരമാക്കിയ മൂല്യങ്ങൾ**: പല മാജിക് സ്ട്രിംഗുകളും URL-കളും ഫയലിലുടനീളം ഹാർഡ് കോഡഡ് തുടരുന്നു
|
||||
- ❌ **പുനരാവൃത്തി**: സമാന ഫംഗ്ഷനുകൾക്കിടയിൽ ഗണ്യമായ കോഡ് പുനരാവൃത്തി നിലനില്ക്കുന്നു
|
||||
- ❌ **ഡക്ക്യുമെന്റേഷൻ**: കോഡിന്റെ ഉദ്ദേശ്യം വിശദീകരിക്കാത്ത അപ്രാപ്തമായ അല്ലെങ്കിൽ അഭാവത്തിലുള്ള കമന്റുകൾ
|
||||
- ❌ **ഓർഗനൈസേഷൻ**: കോഡിന് വ്യക്തമായ ഘടനയും ലജിക്കൽ കൂട്ടിപ്പിടികളും ഇല്ല
|
||||
|
||||
## നിങ്ങളുടെ റിഫാക്ടർ ചെയ്ത കോഡ് പരീക്ഷിക്കുക
|
||||
|
||||
റിഫാക്ടറിങ്ങിന് ശേഷം, നിങ്ങളുടെ ബാങ്കിംഗ് ആപ്പ് ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പുനൽകുക:
|
||||
|
||||
1. **എല്ലാ ഉപയോക്തൃ പ്രവാഹങ്ങളും പരിശോധിക്കുക**: രജിസ്ട്രേഷൻ, ലോഗിൻ, ഡാഷ്ബോർഡ് പ്രദർശനം, പിശക് കൈകാര്യം ചെയ്യൽ
|
||||
2. **API കോളുകൾ ശരിയാണെന്ന് സ്ഥിരീകരിക്കുക**: നിങ്ങളുടെ `sendRequest()` ഫംഗ്ഷൻ അകൗണ്ട് സൃഷ്ടിക്കും തിരിച്ചുപിടിക്കും രണ്ട് പ്രവർത്തനങ്ങൾക്കും പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക
|
||||
3. **പിശക് സംഭവങ്ങൾ പരിശോധിക്കുക**: തെറ്റായ ക്രഡൻഷ്യലുകൾക്കായി, നെറ്റ്വർക്ക് പിശകുകൾ പോലുള്ള ഘടകങ്ങളിലെ പരീക്ഷണങ്ങൾ നടത്തുക
|
||||
4. **കൺസോൾ ഔട്ട്പുട്ട് പരിശോധിക്കുക**: റിഫാക്ടറിങ് സമയത്ത് പുതിയ പിശകുകൾ ഉണ്ടായിട്ടില്ലെന്ന് ഉറപ്പാക്കുക
|
||||
|
||||
## സമർപ്പിക്കൽ മാർഗ്ഗനിർദ്ദേശങ്ങൾ
|
||||
|
||||
നിങ്ങളുടെ റിഫാക്ടർ ചെയ്ത `app.js` ഫയൽ സമർപ്പിക്കൂ:
|
||||
- വ്യത്യസ്ത ഫംഗ്ഷനാലിറ്റികൾ ക്രമീകരിക്കുന്ന വ്യക്തമായ സെക്ഷൻ ഹെഡറുകളും
|
||||
- സുസ്ഥിരമായ കോഡ് ഫോർമാറ്റിംഗും ഇടവേളകളും
|
||||
- എല്ലാ ഫംഗ്ഷനുകൾക്കും പൂര്ണമായ JSDoc ഡോക്യുമെന്റേഷൻ
|
||||
- റിഫാക്ടറിംഗ് സമീപനം വിശദീകരിക്കുന്ന ചെറിയ കമന്റ് മുകളിൽ
|
||||
|
||||
**ബോണസ് ചലഞ്ച്**: നിങ്ങളുടെ ആപ്പിന്റെ ആര്ക്കിടെക്ചർ എങ്ങനെ വിവിധ ഫംഗ്ഷനുകൾ തമ്മിൽ പ്രവർത്തിക്കുന്നു എന്ന് വിശദീകരിക്കുന്ന ലഘുവായ കോഡ് ഡോക്യുമെന്റേഷൻ ഫയൽ (`CODE_STRUCTURE.md`) സൃഷ്ടിക്കുക.
|
||||
|
||||
## യഥാർത്ഥ ലോക ബന്ധം
|
||||
|
||||
ഈ അസൈൻമെന്റ് പ്രൊഫഷണൽ ഡെവലപ്പർമാർ സാധാരണയായി നടത്തുന്ന കോഡ് പരിപാലനത്തിന്റെ തരം പ്രതിഫലിപ്പിക്കുന്നു. വ്യവസായ സാഹചര്യങ്ങളിൽ:
|
||||
- **കോട് റിവ്യൂകൾ** ഈ അസൈൻമെന്റുപോലെ വായനാസൗകര്യവും പരിപാലന ശേഷിയും വിലയിരുത്തുന്നു
|
||||
- **ടെക്നിക്കൽ ഡെബ്റ്റ്** കോഡ് പിരമിച്ചും ഡോക്യുമെന്റ് ചെയ്യാതിരിക്കുന്നപ്പോൾ കൂടുന്നു
|
||||
- **ടീം സഹകരണം** പുതിയ ടീം അംഗങ്ങൾക്കുമായി സുസ്ഥിരവും ദൃഢവുമായ കോഡ് ആവശ്യമാണ്
|
||||
- **ബഗ് പരിഹാരങ്ങൾ** ശരിയായ അബ്സ്ട്രാക്ഷനുകളുള്ള നല്ല ക്രമീകരിച്ച കോഡ് ബേസുകളിൽ വളരെ എളുപ്പമാണ്
|
||||
|
||||
നിങ്ങൾ ഇവിടെ അഭ്യസിക്കുകയാണുള്ള നൈപുണ്യങ്ങൾ - സ്ഥിരം മൂല്യങ്ങൾ തിരികെ പിടിക്കൽ, പുനരാവൃത്തി ഒഴിവാക്കൽ, വ്യക്തമായ ഡോക്യുമെന്റേഷൻ എഴുതൽ - പ്രൊഫഷണൽ സോഫ്റ്റ്വേർ ഡെവലപ്പ്മെന്റിന് അനിവാര്യമാണ്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**നിരാകരണം**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ തർജ്ജമാ സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശുദ്ധതയ്ക്ക് പരിശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമാറ്റിക് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അസാകതകൾ ഉണ്ടാകാവുന്നതാണ്. അതിനാൽ, പ്രമാണത്തിന്റെ സ്വദേശം ഭാഷയിലുള്ള മൂല രേഖ പ്രാമാണിക മാർഗ്ഗമായാണ് കരുതേണ്ടത്. അതീവ പ്രധാന വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യൻ്റെ വിവർത്തനം ശിപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ച് ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും വ്യത്യാസങ്ങൾക്കും ഞങ്ങൾ ബാധ്യത വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,165 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "50a7783473b39a2e0f133e271a102231",
|
||||
"translation_date": "2026-01-08T17:55:36+00:00",
|
||||
"source_file": "7-bank-project/4-state-management/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# "ട്രാൻസാക്ഷൻ ചേർക്കുക" ഡയലോഗ് നടപ്പാക്കുക
|
||||
|
||||
## അവലോകനം
|
||||
|
||||
നിങ്ങളുടെ ബാങ്കിങ് ആപ്പിന് ഇപ്പോൾ ഉറച്ച സ്റ്റേറ്റ് മാനേജുമെന്റ്, ഡാറ്റ persistence ഉണ്ട്, പക്ഷേ യഥാർത്ഥ ബാങ്കിങ് ആപ്പുകൾക്ക് ആവശ്യമായ ഒരു നിർണായക ഫീച്ചർ ഇല്ല: ഉപയോക്താക്കൾ തങ്ങളുടെ സ്വയം ട്രാൻസാക്ഷനുകൾ ചേർക്കാൻ കഴിയുന്ന കഴിവ്. ഈ അസൈൻമെന്റിൽ, നിങ്ങൾ നിലവിലുള്ള സ്റ്റേറ്റ് മാനേജുമെന്റ് സിസ്റ്റത്തോട് ചേർന്ന് പ്രവർത്തിക്കുന്ന ഒരു പൂർണ്ണമായ "ട്രാൻസാക്ഷൻ ചേർക്കുക" ഡയലോഗ് നടപ്പിലാക്കും.
|
||||
|
||||
ഈ അസൈൻമെന്റ് നിങ്ങൾ നാല് ബാങ്കിങ് പാഠങ്ങളിൽ ശേഖരിച്ചിട്ടുള്ള എല്ലാം ഒന്നിച്ച് ക്രമീകരിക്കുന്നു: HTML ടെംപ്ലേറ്റിംഗ്, ഫോം കൈകാര്യം, API ഇന്റഗ്രേഷൻ, സ്റ്റേറ്റ് മാനേജുമെന്റ്.
|
||||
|
||||
## പഠന ലക്ഷ്യങ്ങൾ
|
||||
|
||||
ഈ അസൈൻമെന്റ് പൂർത്തിയാക്കുന്നതിലൂടെ, നിങ്ങൾ:
|
||||
- **ഉപയോക്തൃ സുഹൃത്തായ** ഡയലോഗ് ഇന്റർഫെയ്സ് സൃഷ്ടിക്കും
|
||||
- **ആക്സസിബിൾ** ഫോം ഡിസൈൻ കീബോർഡ്, സ്ക്രീൻ റീഡർ പിന്തുണയോടെ നടപ്പിലാക്കും
|
||||
- **ഇന്റഗ്രേറ്റ്** പുതിയ ഫീച്ചറുകൾ നിലവിലുള്ള സ്റ്റേറ്റ് മാനേജുമെന്റ് സംവിധാനത്തോട് ചേർന്ന്
|
||||
- **API** കമ്മ്യൂണിക്കേഷൻ, പിശക് കൈകാര്യം പ്രാക്ടീസ് ചെയ്യും
|
||||
- **ആധുനിക വെബ് ഡവലപ്മെന്റ് മാതൃകകൾ** യഥാർത്ഥ ഫീച്ചറുമായി പ്രയോഗിക്കും
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### ഘട്ടം 1: ട്രാൻസാക്ഷൻ ചേർക്കൽ ബട്ടൺ
|
||||
|
||||
ഡാഷ്ബോർഡ് പേജിൽ ഉപയോക്താക്കൾക്ക് എളുപ്പത്തിൽ കണ്ടെത്താനും அணுகാനും കഴിയുന്ന "Add Transaction" ബട്ടൺ **സൃഷ്ടിക്കുക**.
|
||||
|
||||
**ആവശ്യകതകൾ:**
|
||||
- ഡാഷ്ബോർഡിൽ ബട്ടൺ ഒത്തിടത്തിൽ **പിടിക്കുക**
|
||||
- വ്യക്തമായ, പ്രവർത്തി ഉദ്ദേശിക്കുന്ന ബട്ടൺ ടെക്സ്റ്റ് **ഉപയോഗിക്കുക**
|
||||
- നിലവിലുള്ള UI ഡിസൈനുമായി പൊരുത്തപ്പെടുന്ന വിധം ബട്ടൺ **സ്റ്റൈൽ ചെയ്യുക**
|
||||
- ബട്ടൺ കീബോർഡ് ഉപയോഗിച്ചു ഉണ്ടാകുന്നുണ്ടെന്ന് **നിശ്ചയിക്കുക**
|
||||
|
||||
### ഘട്ടം 2: ഡയലോഗ് നടപ്പാക്കൽ
|
||||
|
||||
നിങ്ങളുടെ ഡയലോഗ് നടപ്പാക്കുന്നതിന് ഈ രണ്ട് മാർഗങ്ങളിൽ ഒന്നിനെ തെരഞ്ഞെടുക്കുക:
|
||||
|
||||
**ഓപ്ഷൻ A: വ്യത്യസ്ത പേജ്**
|
||||
- ട്രാൻസാക്ഷൻ ഫോം വേണ്ടി പുതിയ HTML ടെംപ്ലേറ്റ് **സൃഷ്ടിക്കുക**
|
||||
- റൂട്ടിംഗ് സിസ്റ്റത്തിൽ പുതിയ റൂട്ടു **ചേർക്കുക**
|
||||
- ഫോം പേജിലേക്ക്-മാറ്റും തിരിഞ്ഛലും **നടപ്പാക്കുക**
|
||||
|
||||
**ഓപ്ഷൻ B: മോഡൽ ഡയലോഗ് (ശിപാർശ ചെയ്യുന്നു)**
|
||||
- ഡാഷ്ബോർഡിൽ നിന്ന് പുറത്ത് പോവാതെ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഡയലോഗ് **പ്രദർശിപ്പിക്കുക/മറച്ചിൽ ചെയ്യുക**
|
||||
- [`hidden` പ്രോപ്പർട്ടി](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) അല്ലെങ്കിൽ CSS ക്ലാസുകൾ ഉപയോഗിച്ച് നടപ്പാക്കുക
|
||||
- താരതമ്യമായ ഫോക്കസ് മാനേജുമെന്റ് ഉപയോഗിച്ച് സ്മൂത്ത് ഉപയോഗനുഭവം **സൃഷ്ടിക്കുക**
|
||||
|
||||
### ഘട്ടം 3: ആക്സസിബിലിറ്റി നടപ്പാക്കൽ
|
||||
|
||||
നിങ്ങളുടെ ഡയലോഗ് [മോഡൽ ഡയലോഗ് ആക്സസിബിലിറ്റി മാനദണ്ഡങ്ങൾ](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) പാലിക്കുന്നതായി **നിശ്ചയിക്കുക**:
|
||||
|
||||
**കീബോർഡ് നാവിഗേഷൻ:**
|
||||
- Esc കീ ഉപയോഗിച്ച് ഡയലോഗ് അടയ്ക്കാൻ പിന്തുണ **നൽകുക**
|
||||
- ഡയലോഗ് തുറന്നപ്പോൾ ഫോക്കസ് അതിനുള്ളിൽ കുടുങ്ങുക
|
||||
- ഡയലോഗ് അടച്ചപ്പോൾ ഫോകസ് ട്രിഗർ ബട്ടണിലേക്ക് **തിരിച്ച് നൽകുക**
|
||||
|
||||
**സ്ക്രീൻ റീഡർ പിന്തുണ:**
|
||||
- അനുയോജ്യമായ ARIA ലേബലുകളും റോളുകളും **ചേർക്കുക**
|
||||
- ഡയലോഗ് തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുന്നതായി സ്ക്രീൻ റീഡറുകൾക്ക് **അറിയിക്കുക**
|
||||
- ക്ലിയർ ആയ ഫോമിന്റെ ഫീൽഡ് ലേബലുകളും പിശക് സന്ദേശങ്ങളും **ഉണ്ടാക്കുക**
|
||||
|
||||
### ഘട്ടം 4: ഫോം രൂപകൽപ്പന
|
||||
|
||||
ട്രാൻസാക്ഷൻ ഡാറ്റ ശേഖരിക്കുന്ന HTML ഫോം **രൂപകൽപ്പന ചെയ്യുക**:
|
||||
|
||||
**ആവശ്യമായ ഫീൽഡുകൾ:**
|
||||
- **തിയതി**: ട്രാൻസാക്ഷൻ നടന്ന തീയതി
|
||||
- **വിവരണം**: ട്രാൻസാക്ഷൻ എന്തിനുവേണ്ടി
|
||||
- **തുക**: ട്രാൻസാക്ഷൻ വില (ഇൻകം പോസിറ്റീവ്, ചെലവ് നെഗറ്റീവ്)
|
||||
|
||||
**ഫോം സവിശേഷതകൾ:**
|
||||
- സമർപ്പിക്കാനുമുമ്പ് ഉപയോക്തൃ ഇൻപുട്ട് **സാധുവാക്കുക**
|
||||
- അസാധുവായ ഡാറ്റയ്ക്ക് വ്യക്തമായ പിശക് സന്ദേശങ്ങൾ **പ്രദർശിപ്പിക്കുക**
|
||||
- ഉപകാരപ്രദമായ പ്ലേസ്ഹോൾഡർ ടെക്സ്റ്റും ലേബലുകളും ഉൾക്കൊള്ളിക്കുക
|
||||
- നിലവിലുള്ള ഡിസൈനുമായി പൊരുത്തം പുലർത്തുന്ന വിധം **സ്റ്റൈൽ ചെയ്യുക**
|
||||
|
||||
### ഘട്ടം 5: API ഇന്റഗ്രേഷൻ
|
||||
|
||||
നിങ്ങളുടെ ഫോം ബാക്ക്എൻഡ് API-വുമായി **ബന്ധിപ്പിക്കുക**:
|
||||
|
||||
**നടപ്പാക്കൽ നടപടികൾ:**
|
||||
- ശരിയായ എന്റ്പോയിന്റും ഡാറ്റ ഫോർമാറ്റും അറിയാൻ [സെർവർ API സവിശേഷതകൾ](../api/README.md) **പരിശോധിക്കുക**
|
||||
- നിങ്ങളുടെ ഫോം ഇൻപുട്ടുകളിൽ നിന്നുള്ള JSON ഡാറ്റ **സൃഷ്ടിക്കുക**
|
||||
- API-യിലേക്ക് ആവശ്യമായ പിശക് കൈകാര്യം സഹിതം ഡാറ്റ **അയയ്ക്കുക**
|
||||
- ഉപയോക്താവിന് വിജയ/പരാജയ സന്ദേശങ്ങൾ **പ്രദർശിപ്പിക്കുക**
|
||||
- നെറ്റ്വർക്ക് പിശകുകൾ സൗമ്യമായി **കൈകാര്യം ചെയ്യുക**
|
||||
|
||||
### ഘട്ടം 6: സ്റ്റേറ്റ് മാനേജുമെന്റ് ഇന്റഗ്രേഷൻ
|
||||
|
||||
പുതിയ ട്രാൻസാക്ഷനോടെ നിങ്ങളുടെ ഡാഷ്ബോർഡ് **അപ്ഡേറ്റ് ചെയ്യുക**:
|
||||
|
||||
**ഇന്റഗ്രേഷൻ ആവശ്യകതകൾ:**
|
||||
- ട്രാൻസാക്ഷൻ വിജയകരമായി ചേർക്കുന്നതിന് ശേഷം അക്കൗണ്ട് ഡാറ്റ **റിഫ്രഷ് ചെയ്യുക**
|
||||
- പേജ് റീലോഡ് ആവാതെ ഡാഷ്ബോർഡ് പ്രദർശനം **അപ്ഡേറ്റ് ചെയ്യുക**
|
||||
- പുതിയ ട്രാൻസാക്ഷൻ ഉടൻ തന്നെ കാണപ്പെടുക
|
||||
- പ്രക്രിയ മുഴുവനും ശരിയായ സ്റ്റേറ്റ് സ്ഥിരത **ഉറപ്പാക്കുക**
|
||||
|
||||
## ടെക്നിക്കൽ സ്പെസിഫിക്കേഷനുകൾ
|
||||
|
||||
**API എന്റ്പോയിന്റ് വിശദാംശങ്ങൾ:**
|
||||
- ട്രാൻസാക്ഷൻ ഡാറ്റയ്ക്ക് ആവശ്യമായ JSON ഫോർമാറ്റ്
|
||||
- HTTP മെത്തഡും എന്റ്പോയിന്റ് URL ഉം
|
||||
- പ്രതീക്ഷിക്കുന്ന റസ്പോൺസ് ഫോർമാറ്റ്
|
||||
- പിശക് റസ്പോൺസ് കൈകാര്യം
|
||||
|
||||
ഉല്ലേഖനം: [സെർവർ API ഡോക്യുമെന്റേഷൻ](../api/README.md)
|
||||
|
||||
**പ്രതീക്ഷിച്ച ഫലം:**
|
||||
ഈ അസൈൻമെന്റ് പൂര്ത്തിയാക്കിയതിനു ശേഷം നിങ്ങളുടെ ബാങ്കിങ് ആപ്പിൽ പ്രൊഫഷണൽ രൂപത്തിലുള്ള ഒരു പൂർണ്ണമായ "Add Transaction" ഫീച്ചർ ഉണ്ടായിരിക്കണം:
|
||||
|
||||
|
||||
|
||||
## നിങ്ങളുടെ നടപ്പാക്കൽ ടെസ്റ്റ് ചെയ്യുക
|
||||
|
||||
**ഫങ്ഷണൽ ടെസ്റ്റിംഗ്:**
|
||||
1. "Add Transaction" ബട്ടൺ വ്യക്തമായി കാണപ്പെടുകയും ആക്സസിബിൾ ആയിരിക്കയും ചെയ്യും എന്ന് **പരിശോധിക്കുക**
|
||||
2. ഡയലോഗ് ശരിയായി തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുന്നത് **ടെസ്റ്റ് ചെയ്യുക**
|
||||
3. എല്ലാ ആവശ്യമായ ഫീൽഡുകൾക്കും ഫോമിന്റെ സാന്ദ്രീകരണം ശരിയാണെന്ന് **സ്ഥാപിക്കുക**
|
||||
4. വിജയകരമായ ട്രാൻസാക്ഷനുകൾ ഉടനടി ഡാഷ്ബോർഡിൽ കാണപ്പെടുന്നത് ** ഉറപ്പാക്കുക**
|
||||
5. അസാധുവായ ഡാറ്റക്കും നെറ്റ്വർക്ക് പ്രശ്നങ്ങൾക്കും പിശക് കൈകാര്യം തുടങ്ങുന്നതായി **നിശ്ചയിക്കുക**
|
||||
|
||||
**ആക്സസിബിലിറ്റി ടെസ്റ്റിംഗ്:**
|
||||
1. കീബോർഡ് മാത്രം ഉപയോഗിച്ച് മുഴുവൻ പ്രവാഹവും **നാവിഗേറ്റ് ചെയ്യുക**
|
||||
2. സ്ക്രീൻ റീഡർ ഉപയോഗിച്ച് ശരിയായ പരസ്യം ഉണ്ടെന്ന് **ടെസ്റ്റ് ചെയ്യുക**
|
||||
3. ഫോക്കസ് മാനേജുമെന്റ് ശരിയായി പ്രവർത്തിക്കുന്നുവെന്ന് **സ്ഥാപിക്കുക**
|
||||
4. എല്ലാ ഫോം ഘടകങ്ങൾക്കും അനുയോജ്യമായ ലേബലുകൾ ഉണ്ടെന്ന് **പരിശോധിക്കുക**
|
||||
|
||||
## മൂല്യനിർണയ രുബ്രിക്
|
||||
|
||||
| ക്രൈറ്റീരിയ | ഉത്തമം | മതിവരുന്ന | മെച്ചപ്പെടുത്തേണ്ടത് |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **ഫംഗ്ഷനാലിറ്റി** | ട്രാൻസാക്ഷൻ ഫീച്ചർ അത്യുത్తമമായ ഉപയോക്തൃ അനുഭവത്തോടെ പൂർണ്ണമായി പ്രവർത്തിക്കുന്നു; പാഠങ്ങളിൽ നിന്നുള്ള മികച്ച പ്രാക്ടിസുകൾ പാലിക്കുന്നു | ട്രാൻസാക്ഷൻ ഫീച്ചർ ശരിയായി പ്രവര്ത്തിക്കുന്നുവെങ്കിലും കുറച്ച് മികച്ച പ്രാക്ടിസുകള് പാലിക്കാതെ ചെറിയ ഉപയോഗപ്രശ്നങ്ങള് ഉണ്ടായിരിക്കും | ട്രാൻസാക്ഷൻ ഫീച്ചർ ഭാഗികമായി മാത്രം പ്രവർത്തിക്കുകയോ ഗൗരവമുള്ള ഉപയോഗപ്രശ്നങ്ങൾ ഉള്ളതു കൂടിയാകാം |
|
||||
| **കോഡ് ഗുണമേന്മ** | കോഡ് സജ്ജീകരിച്ച് നല്ലതായും, സ്ഥിരമായ പാറ്റേണുകൾ പാലിച്ചും, യോഗ്യമായ പിശക് കൈകാര്യം ഉൾപ്പെടുത്തിയും നിലവിലുള്ള സ്റ്റേറ്റ് മാനേജുമെന്റുമായി മികച്ച സാന്ദ്രതയോടെ ചേർക്കുന്നു | കോഡ് പ്രവർത്തിക്കുന്നുവെങ്കിലും ക്രമീകരണ പ്രശ്നങ്ങളും ഉറപ്പില്ലാത്ത പാറ്റേണുകളും ഉണ്ടായിരിക്കാം | കോഡിൽ ഗൗരവമായ ഘടനാപരമായ പ്രശ്നങ്ങളോ നിലവിലുള്ള പാറ്റേണുകളിൽ ചേർന്നുപോകാത്തതോ ഉണ്ടാകാം |
|
||||
| **ആക്സസിബിലിറ്റി** | കീബോർഡ് നാവിഗേഷൻ, സ്ക്രീൻ റീഡർ സാങ്കേതിക വിദ്യകൾ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നു; WCAG മാർഗനിർദേശങ്ങൾ പാലിക്കുന്ന മികച്ച ഫോകസ് മാനേജുമെന്റ് വാഗ്ദാനം ചെയ്യുന്നു | അടിസ്ഥാന ആക്സസിബിലിറ്റി ഫീച്ചറുകൾ നടപ്പാക്കിയിരിക്കുന്നു, പക്ഷേ കുറച്ച് കീബോർഡ് നാവിഗേഷൻ അല്ലെങ്കിൽ സ്ക്രീൻ റീഡർ പിന്തുണ കാണാനാകില്ല | ആക്സസിബിലിറ്റി പരിഗണനകൾ കുറഞ്ഞതോ ഇല്ലാതെയോ ആണ് |
|
||||
| **ഉപയോക്തൃ അനുഭവം** | ബോധ്യമായ, മെച്ചപ്പെട്ട ഇന്റർഫെയ്സ്; വ്യക്തമായ പ്രതികരണങ്ങൾ, സ്മൂട്ട് ഇന്ററാക്ഷനുകൾ, പ്രൊഫഷണൽ രൂപം | നല്ല ഉപയോക്തൃ അനുഭവം; ചെറിയ പ്രതികരണമോ ദൃശ്യ ഡിസൈൻ മെച്ചപ്പെടുത്തലോ ആവശ്യമുണ്ട് | കാര്യമായി ഉപയോക്തൃ അനുഭവം താഴ്ന്നതിനാൽ ആശയഭ്രാന്തി ഉണ്ടാകാം, പ്രതികരണമില്ലായ്മ |
|
||||
|
||||
## അധിക വെല്ലുവിളികൾ (ഓപ്ഷണൽ)
|
||||
|
||||
അടിസ്ഥാന ആവശ്യങ്ങൾ പൂർത്തിയാക്കിയശേഷം, ഈ മെച്ചപ്പെടുത്തലുകൾ പരിഗണിക്കുക:
|
||||
|
||||
**വനിതക ഫീച്ചറുകൾ:**
|
||||
- ട്രാൻസാക്ഷൻ വിഭാഗങ്ങൾ ചേർക്കൽ (ഭക്ഷണ, ഗതാഗതം, വിനോദം, മുതലായവ)
|
||||
- യാഥാർത്ഥ്യ സമയ ഫീഡ്ബാക്കോടെ ഇൻപുട്ട് സാധുത പരിശോധന
|
||||
- പവർ യൂസർമാർക്കുള്ള കീബോർഡ് ഷോർട്കട്ടുകൾ സൃഷ്ടിക്കൽ
|
||||
- ട്രാൻസാക്ഷൻ എഡിറ്റിംഗ്, ഡിലീഷൻ കഴിവുകൾ ചേർക്കൽ
|
||||
|
||||
**ഉന്നത ഇന്റഗ്രേഷൻ:**
|
||||
- അവസാനങ്ങളിൽ ചേർക്കപ്പെട്ട ട്രാൻസാക്ഷനുകൾക്കുള്ള undo ഫംഗ്ഷണാലിറ്റി നടപ്പാക്കൽ
|
||||
- CSV ഫയൽമാർഗ്ഗം ബൾക്ക് ട്രാൻസാക്ഷൻ ഇമ്പോർട്ട് ചേർക്കൽ
|
||||
- ട്രാൻസാക്ഷൻ തിരച്ചിൽ, ഫിൽട്ടർ സവിശേഷതകൾ സൃഷ്ടിക്കൽ
|
||||
- ഡാറ്റ എക്സ്പോർട്ട് ഫംഗ്ഷണാലിറ്റി നടപ്പാക്കൽ
|
||||
|
||||
ഈ ഓപ്ഷണൽ ഫീച്ചറുകൾ നിങ്ങൾക്ക് കൂടുതലായി ആധുനിക വെബ് ഡവലപ്മെന്റ് ആശയങ്ങൾ അഭ്യാസം നടത്താനും കൂടുതൽ പൂർണ്ണമായ ഒരു ബാങ്കിങ് ആപ്പ് സൃഷ്ടിക്കാനുമാകും!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിവാദം**:
|
||||
ഈ പ്രമാണം AI തിരച്ചിൽ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്കായി പരിശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമാറ്റഡ് വിവർത്തനങ്ങളിൽ തെറ്റുകളും അശുദ്ധികളും ഉണ്ടാകാം എന്നതു അറിയുക. ആങ്ങളിൽ പ്രമാണത്തിന്റെ മാതൃഭാഷയിലെ പ്രധാന പ്രമാണം മാത്രമാണ് പ്രാമുഖ്യ സൂത്രധാരമെന്നാണ് കരുതേണ്ടത്. നിർണ്ണായക വിവരങ്ങൾക്കായി, പ്രൊഫഷണൽ മാനവ വിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്ക് അല്ലെങ്കിൽ വിമർശനങ്ങൾക്ക് ഞങ്ങൾ ബാധ്യത വഹിക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,37 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "830359535306594b448db6575ce5cdee",
|
||||
"translation_date": "2026-01-08T11:30:42+00:00",
|
||||
"source_file": "7-bank-project/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# :dollar: ഒരു ബാങ്ക് നിർമ്മിക്കുക
|
||||
|
||||
ഈ പ്രോജക്ടിൽ, നിങ്ങൾ ഒരു خیالی ബാങ്ക് എങ്ങനെ നിർമ്മിക്കാമെന്ന് പഠിക്കും. ഈ പഠനങ്ങളിൽ ഒരു വെബ് ആപ്പ് എങ്ങനെൽയൗട്ട് ചെയ്യാം, റൂട്ടുകൾ എങ്ങനെ നൽകാം, ഫോമുകൾ നിർമ്മിക്കുക, സ്റ്റേറ്റ് മാനേജ് ചെയ്യുക, ബാങ്കിന്റെ ഡാറ്റ ലഭിക്കുന്ന API-യിൽ നിന്ന് ഡാറ്റ എങ്ങനെ ഫിച്ച് ചെയ്യാം എന്നതിനെക്കുറിച്ചുള്ള നിർദ്ദേശങ്ങൾ ഉൾបទമാണ്.
|
||||
|
||||
|  |  |
|
||||
|--------------------------------|--------------------------------|
|
||||
|
||||
## പാഠങ്ങൾ
|
||||
|
||||
1. [HTML ടെംപ്ലേറ്റുകളും വെബ് ആപ്പിലെ റൂട്ടുകളും](1-template-route/README.md)
|
||||
2. [ലോഗിൻ & രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക](2-forms/README.md)
|
||||
3. [ഡാറ്റ ഫിച്ചിംഗ് & ഉപയോഗിക്കുന്ന വിധികൾ](3-data/README.md)
|
||||
4. [സ്റ്റേറ്റ് മാനേജ്മെന്റ് ആശയങ്ങൾ](4-state-management/README.md)
|
||||
|
||||
### ക്രെഡിറ്റ്
|
||||
|
||||
ഈ പാഠങ്ങൾ :hearts: തയ്യാർ ചെയ്തത് [യോഹാൻ ലസോർസ](https://twitter.com/sinedied) ആണ്.
|
||||
|
||||
ഈ പാഠങ്ങളിൽ ഉപയോഗിക്കുന്ന [സ്വർവ്വർ API](/7-bank-project/api/README.md) എങ്ങനെ നിർമിക്കാമെന്ന് പഠിക്കാൻ താൽപര്യമുണ്ടെങ്കിൽ, [ഈ വീഡിയോകളുടെ സീരീസ്](https://aka.ms/NodeBeginner) (പ്രധാനമായും വീഡിയോകൾ 17 മുതൽ 21 വരെ) പിന്തുടരാം.
|
||||
|
||||
നിങ്ങൾക്ക് [ഈ ഇന്ററാക്റ്റീവ് ലേൺ ട്യൂട്ടോറിയൽ](https://aka.ms/learn/express-api) കാണാനും കഴിയും.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വാഭാവിക കുറിപ്പ്**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ചു വിവർത്തനം ചെയ്തതാണ്. നാം ശരിയായതിലേക്കുള്ള പരിശ്രമം നടത്താറായിരുന്നാലും, യന്ത്രവൽക്കൃത വിവർത്തനങ്ങളിൽ പിഴവുകളും തെറ്റുകളും ഉണ്ടായേക്കാമെന്ന് ദയവായി കരുതുക. പ്രാധാന്യമേറിയ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ഉപദേശിക്കുന്നു. ഓരിജിനൽ രേഖയുടെ സ്വതന്ത്ര ഭാഷയിൽ ഉള്ള ഉള്ളടക്കം ആണ് പ്രാമാണികമായ ഉറവിടം എന്ന് കരുതണം. ഈ വിവർത്തനം ഉപയോഗിച്ചതിനെത്തുടർന്ന് ഉണ്ടായ ഏതെങ്കിലും തെറ്റായ മനസ്സിലാക്കലുകൾക്കും തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,29 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
|
||||
"translation_date": "2026-01-08T18:07:05+00:00",
|
||||
"source_file": "7-bank-project/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# ബാങ്ക് ആപ്പ്
|
||||
|
||||
> വാനില്ല HTML5, CSS, ജാവാസ്ക്രിപ്റ്റ് എന്നിവ ഉപയോഗിച്ച് (ഫ്രെയിംവർക്ക്കളും ലൈബ്രറിയും ഉപയോഗിക്കാതെ) നിർമ്മിച്ച ബാങ്ക് ആപ്പ് പ്രോജക്റ്റിനുള്ള ഉദാഹരണ പരിഹാരം.
|
||||
|
||||
## ആപ്പ് റൺ ചെയ്യുന്നത്
|
||||
|
||||
ആദ്യം നിങ്ങൾക്കുണ്ടെന്ന് ഉറപ്പുവരുത്തുക [API സെർവർ](../api/README.md) പ്രവർത്തനസജ്ജമാണ്.
|
||||
|
||||
ആപ്പ് പ്രവർത്തിപ്പിക്കാൻ ഏതൊരു വെബ് സെർവർ ഉപയോഗിക്കാവുന്നതാണ്, എന്നാൽ API പ്രവർത്തിപ്പിക്കാൻ നിങ്ങൾക്ക് [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കണം എന്ന് കണക്കിലെടുത്ത്, നിങ്ങൾക്ക്:
|
||||
|
||||
1. ഈ റീപ്പോ ഗിറ്റ് ക്ലോൺ ചെയ്യുക.
|
||||
2. ഒരു ടെർമിനൽ തുറന്ന്, ഈ ഡയറക്ടറിയിലേക്ക് എത്തി, പിന്നീട് `npx lite-server .` നിർവഹിക്കുക. ഇതിലൂടെ പോർട്ട് `3000`ൽ ഒരു ഡെവലപ്പ്മെന്റ് വെബ് സെർവർ ആരംഭിക്കും
|
||||
3. ബ്രൗസറിൽ `http://localhost:3000` തുറന്ന് ആപ്പ് പ്രവർത്തിപ്പിക്കുക.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകരണം**:
|
||||
ഈ ഡോക്യുമെന്റ് [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ പരിഭാഷാ സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്കായി ശ്രമിച്ചാലും, യന്ത്ര പരിഭാഷകളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റായ വിവരങ്ങൾ ഉണ്ടാകാമെന്ന തീരുമാനം നിങ്ങൾ അറിയേണ്ടതാണ്. അവധിയായ ഭാഷയിലെ ഒറിജിനൽ ഡോക്യുമെന്റ് അതിന്റെ പ്രാധാന്യമുള്ള ഉറവിടമായി പരിഗണിക്കണം. അത്യാവശ്യ വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ പരിഭാഷ ശുപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നതിൽ നിന്ന് ഉണ്ടാകാവുന്ന എല്ലാ തെറ്റിദ്ധാരണകളിലേക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
|
||||
"translation_date": "2026-01-08T20:38:38+00:00",
|
||||
"source_file": "9-chat-project/solution/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# പരിഹാരമാരംഭിക്കുക
|
||||
|
||||
1. [backend](./backend/README.md) ആരംഭിക്കുക
|
||||
1. ഇപ്പോള് [frontend](./frontend/README.md) ആരംഭിക്കുക
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അനുമതി**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് പരിശ്രമിക്കുന്നുണ്ടെങ്കിലും, സ്വയംസംവേദനാത്മകമായ വിവർത്തനങ്ങളിൽ പിശകുകളും അകൃത്യതകളും ഉണ്ടാകാമെന്ന് ദയവായി മനസ്സിലാക്കുക. നിർദ്ദേശിച്ച ഭാഷയിൽ ഉള്ള 原始 രേഖയേയാണ് അതിന്റെ അധികാരമുള്ള ഉറവിടമായി കാണേണ്ടത്. പ്രധാന വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം ശുപാർശ ചെയ്തിരിക്കുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കോ തെറ്റായി വ്യാഖ്യാനികളാകുന്നതിനോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,19 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
|
||||
"translation_date": "2026-01-08T20:44:41+00:00",
|
||||
"source_file": "9-chat-project/solution/backend/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
നിങ്ങളുടെ റൺടൈം തിരഞ്ഞെടുക്കുക
|
||||
|
||||
- [Python](./python/README.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകം**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നമുക്ക് ശരിയായി നൽകാൻ ശ്രമിച്ചിട്ടുണ്ടെങ്കിലും, യന്ത്രവൽക്കരിച്ച വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അ正確തയെ ബാധിക്കുന്ന ഭാഗങ്ങൾ ഉണ്ടായേക്കാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. സ്വന്തം ഭാഷയിലെ അതിന്റെ മൗലിക രേഖയാണ് അധികാരപരമായ സ്രോതസ്സ് ആയി കണക്കാക്കേണ്ടത്. നിർണായക വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ വിവർത്തനം നിർദ്ദേശിക്കപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിനാൽ ഉണ്ടാകുന്ന തെറ്റായ ധാരണകൾക്കും വ്യാഖ്യാനക്കുറവുകൾക്കും ഞങ്ങൾ ഉത്തരവാദിയല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
Loading…
Reference in new issue