Merge branch 'SueNimoh' of https://github.com/Susan56789/Web-Dev-For-Beginners into SueNimoh
Susan Wairimu
3 years ago
commit
83ef95ebad
@ -0,0 +1,27 @@
|
||||
# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
|
||||
#
|
||||
# You can adjust the behavior by modifying this file.
|
||||
# For more information, see:
|
||||
# https://github.com/actions/stale
|
||||
name: Mark stale issues and pull requests
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: '35 8 * * *'
|
||||
|
||||
jobs:
|
||||
stale:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
issues: write
|
||||
pull-requests: write
|
||||
|
||||
steps:
|
||||
- uses: actions/stale@v3
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
stale-issue-message: 'This issue has not seen any action for a while! Closing for now, but it can be reopened at a later date.'
|
||||
stale-pr-message: 'This PR has not seen any action for a while! Closing for now, but it can be reopened at a later date.'
|
||||
stale-issue-label: 'no-issue-activity'
|
||||
stale-pr-label: 'no-pr-activity'
|
||||
@ -0,0 +1,198 @@
|
||||
# வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்
|
||||
|
||||
இந்த பாடம் நிரலாக்க மொழிகளின் அடிப்படைகளை உள்ளடக்கியது. இங்கே உள்ளடக்கப்பட்டுள்ள தலைப்புகள் இன்று பெரும்பாலான நவீன நிரலாக்க மொழிகளுக்கு பொருந்தும். 'வர்த்தககருவிகள்' பிரிவில், நீங்கள் ஒரு டெவலப்பராக உங்களுக்கு உதவும் பயனுள்ள மென்பொருள் பற்றி அறிந்து கொள்வீர்கள்.
|
||||
|
||||
|
||||
> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
|
||||
|
||||
## விரிவுரைக்கு முந்தைய வினாடி வினா
|
||||
[விரிவுரைக்கு முந்தைய வினாடி வினா](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=ta)
|
||||
|
||||
## அறிமுகம்
|
||||
|
||||
இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்:
|
||||
|
||||
- நிரலாக்க என்றால் என்ன?
|
||||
- நிரலாக்க மொழிகளின் வகைகள்
|
||||
- ஒரு நிரலின் அடிப்படை கூறுகள்
|
||||
- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி
|
||||
|
||||
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) பற்றி எடுத்துக் கொள்ளலாம்!
|
||||
|
||||
## நிரலாக்க என்றால் என்ன??
|
||||
|
||||
நிரலாக்கம் (குறியீட்டு முறை என்றும் அழைக்கப்படுகிறது) என்பது கணினி அல்லது மொபைல் சாதனம் போன்ற சாதனத்திற்கு அறிவுறுத்தல்களை எழுதும் செயல்முறையாகும். இந்த வழிமுறைகளை நிரலாக்க மொழியுடன் எழுதுகிறோம், இது சாதனத்தால் விளக்கப்படுகிறது. இந்த அறிவுறுத்தல்களின் தொகுப்புகள் பல்வேறு பெயர்களால் குறிப்பிடப்படலாம், ஆனால் *நிரல்*, *கணினி நிரல்*, *பயன்பாடு (பயன்பாடு)*, மற்றும் *செயல்படுத்தக்கூடிய* ஆகியவை சில பிரபலமான பெயர்கள்
|
||||
|
||||
*நிரல்* என்பது குறியீடு டன் எழுதப்பட்ட தாக இருக்கலாம்; வலைத்தளங்கள், விளையாட்டுகள் மற்றும் தொலைபேசி பயன்பாடுகள் திட்டங்கள். குறியீட்டை எழுதாமல் ஒரு நிரலை உருவாக்க முடியும் என்றாலும், அடிப்படை தர்க்கம் சாதனத்திற்கு விளக்கப்படுகிறது மற்றும் அந்த தர்க்கம் பெரும்பாலும் குறியீட்டுடன் எழுதப்பட்டது. *இயங்கும்* அல்லது *செயல்படுத்தும் குறியீடு* என்று ஒரு நிரல் வழிமுறைகளை செயல்படுத்துகிறது. நீங்கள் தற்போது இந்த பாடத்தை படிக்கும் சாதனம் உங்கள் திரையில் அச்சிட ஒரு நிரலை இயக்குகிறது.
|
||||
|
||||
✅ ஒரு சிறிய ஆராய்ச்சி செய்யுங்கள்: உலகின் முதல் கணினி நிரலாளராக யார் கருதப்படுகிறார்கள்?
|
||||
|
||||
## நிரலாக்க மொழிகள்
|
||||
|
||||
நிரலாக்க மொழிகள் ஒரு முக்கிய நோக்கத்தை வழங்குகின்றன: டெவலப்பர்கள் ஒரு சாதனத்திற்கு அனுப்புவதற்கான வழிமுறைகளை உருவாக்கவேண்டும். சாதனங்கள் மட்டுமே பைனரி (1 கள் மற்றும் 0 கள்) புரிந்து கொள்ள முடியும், மற்றும் *மிகவும்* டெவலப்பர்கள் தொடர்பு கொள்ள மிகவும் திறமையான வழி அல்ல. நிரலாக்க மொழிகள் மனிதர்களுக்கும் கணினிகளுக்கும் இடையிலான தகவல் தொடர்புக்கான ஒரு வாகனமாகும்.
|
||||
|
||||
நிரலாக்க மொழிகள் வெவ்வேறு வடிவங்களில் வருகின்றன மற்றும் வெவ்வேறு நோக்கங்களுக்காக சேவை செய்யலாம். எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட் முதன்மையாக வலை பயன்பாடுகளுக்கு பயன்படுத்தப்படுகிறது, அதே நேரத்தில் பாஷ் முதன்மையாக இயக்க முறைமைகளுக்கு பயன்படுத்தப்படுகிறது.
|
||||
|
||||
*குறைந்த நிலை மொழிகள்* பொதுவாக வழிமுறைகளை விளக்குவதற்கு ஒரு சாதனத்திற்கு *உயர் மட்ட மொழிகளை* விட குறைவான படிகள் தேவைப்படுகின்றன. எனினும், உயர் மட்ட மொழிகளை பிரபலமாக்குவது அவற்றின் வாசிப்பு மற்றும் ஆதரவு ஆகும். ஜாவாஸ்கிரிப்ட் ஒரு உயர் மட்ட மொழியாகக் கருதப்படுகிறது.
|
||||
|
||||
பின்வரும் குறியீடு ஜாவாஸ்கிரிப்ட் கொண்ட உயர் நிலை மொழிக்கும் ஏஆர்எம் அசெம்பிளி குறியீட்டுடன் குறைந்த நிலை மொழிக்கும் இடையிலான வித்தியாசத்தை விளக்குகிறது.
|
||||
|
||||
```javascript
|
||||
let number = 10
|
||||
let n1 = 0, n2 = 1, nextTerm;
|
||||
|
||||
for (let i = 1; i <= number; i++) {
|
||||
console.log(n1);
|
||||
nextTerm = n1 + n2;
|
||||
n1 = n2;
|
||||
n2 = nextTerm;
|
||||
}
|
||||
```
|
||||
|
||||
```c
|
||||
area ascen,code,readonly
|
||||
entry
|
||||
code32
|
||||
adr r0,thumb+1
|
||||
bx r0
|
||||
code16
|
||||
thumb
|
||||
mov r0,#00
|
||||
sub r0,r0,#01
|
||||
mov r1,#01
|
||||
mov r4,#10
|
||||
ldr r2,=0x40000000
|
||||
back add r0,r1
|
||||
str r0,[r2]
|
||||
add r2,#04
|
||||
mov r3,r0
|
||||
mov r0,r1
|
||||
mov r1,r3
|
||||
sub r4,#01
|
||||
cmp r4,#00
|
||||
bne back
|
||||
end
|
||||
```
|
||||
|
||||
நம்பினால் நம்புங்கள், *அவர்கள் இருவரும் ஒரே காரியத்தைச் செய்கிறார்கள்*: 10 வரை ஒரு ஃபிபோனச்சி வரிசையை அச்சிடுதல்.
|
||||
|
||||
✅ ஒரு ஃபிபோனச்சி வரிசை யானது [வரையறுக்கப்பட்ட](https://en.wikipedia.org/wiki/Fibonacci_number) எண்களின் தொகுப்பாகும், இது ஒவ்வொரு எண்ணும் 0 மற்றும் 1 இல் இருந்து தொடங்கும் இரண்டு முந்தைய எண்களின் தொகையாகும்.
|
||||
|
||||
## நிரலின் கூறுகள்
|
||||
|
||||
நிரலில் உள்ள ஒரே ஒரு அறிவுறுத்தல் *அறிக்கை* என்று அழைக்கப்படுகிறது, மேலும் வழக்கமாக ஒரு கேரக்டர் அல்லது வரி இடைவெளி யைக் கொண்டிருக்கும், இது அறிவுறுத்தல் முடிவடையும் இடத்தில் குறிக்கிறது, அல்லது *நிறுத்தப்படும்*. ஒரு நிரல் எவ்வாறு முடிவடைகிறது என்பது ஒவ்வொரு மொழிக்கும் மாறுபடும்.
|
||||
|
||||
பெரும்பாலான நிரல்கள் ஒரு பயனர் அல்லது வேறு இடங்களிலிருந்து தரவைப் பயன்படுத்துவதை நம்பியுள்ளன, அங்கு அறிக்கைகள் அறிவுறுத்தல்களை மேற்கொள்ள தரவை நம்பலாம். ஒரு நிரல் எவ்வாறு நடந்துகொள்ளுகிறது என்பதை தரவு மாற்றலாம், எனவே நிரலாக்க மொழிகள் பின்னர் பயன்படுத்தக்கூடிய தரவை தற்காலிகமாக சேமிக்க ஒரு வழியுடன் வருகின்றன. இந்த தரவு *மாறிகள்* என்று அழைக்கப்படுகிறது. மாறிகள் என்பது ஒரு சாதனத்தின் நினைவகத்தில் தரவை சேமிக்க அறிவுறுத்தும் அறிக்கைகள். நிரல்களில் உள்ள மாறிகள் இயற்கணிதத்தில் உள்ளதைப் போலவே உள்ளன, அங்கு அவை ஒரு தனித்துவமான பெயரைக் கொண்டுள்ளன, மேலும் அவற்றின் மதிப்பு காலப்போக்கில் மாறலாம்.
|
||||
|
||||
சில அறிக்கைகள் ஒரு சாதனத்தால் செயல்படுத்தப்படாது என்று ஒரு வாய்ப்பு உள்ளது. இது பொதுவாக டெவலப்பர் எழுதும் போது வடிவமைப்பு அல்லது எதிர்பாராத பிழை ஏற்படும் போது தற்செயலாக இருக்கும். ஒரு பயன்பாட்டின் இந்த வகை கட்டுப்பாடு அதை மிகவும் வலுவானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. பொதுவாக சில முடிவுகள் நிறைவேற்றப்படும் போது கட்டுப்பாட்டில் இந்த மாற்றங்கள் நிகழ்கின்றன. ஒரு நிரல் எவ்வாறு இயங்குகிறது என்பதைக் கட்டுப்படுத்த நவீன நிரலாக்க மொழிகளில் ஒரு பொதுவான அறிக்கை 'என்றால்.. வேறு ' அறிக்கை.
|
||||
|
||||
|
||||
✅ அடுத்தடுத்த பாடங்களில் இந்த வகை அறிக்கையைப் பற்றி மேலும் அறிந்து கொள்வீர்கள்
|
||||
|
||||
## வர்த்தககருவிகள்
|
||||
|
||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||
|
||||
> 🎥 கருவியாக்கல் பற்றிய வீடியோவிற்கு மேலே உள்ள படத்தை கிளிக் செய்யவும்
|
||||
|
||||
இந்தப் பிரிவில், உங்கள் தொழில்முறை வளர்ச்சிப் பயணத்தைத் தொடங்கும்போது நீங்கள் மிகவும் பயனுள்ளதாக க் காணக்கூடிய சில மென்பொருளைப் பற்றி நீங்கள் கற்றுக்கொள்வீர்கள்.
|
||||
|
||||
ஒரு **வளர்ச்சி சூழல்** மென்பொருள் எழுதும் போது ஒரு டெவலப்பர் அடிக்கடி பயன்படுத்தும் கருவிகள் மற்றும் அம்சங்கள் ஒரு தனிப்பட்ட தொகுப்பு ஆகும். இந்த கருவிகளில் சில ஒரு டெவலப்பர் குறிப்பிட்ட தேவைகளுக்கு தனிப்பயனாக்கப்பட்டிருக்கின்றன, மேலும் ஒரு டெவலப்பர் வேலை அல்லது தனிப்பட்ட திட்டங்களில் முன்னுரிமைகளை மாற்றினால் அல்லது அவர்கள் வேறு நிரலாக்க மொழியைப் பயன்படுத்தும்போது காலப்போக்கில் மாறலாம். வளர்ச்சி சூழல்கள் அவற்றைப் பயன்படுத்தும் டெவலப்பர்களைப் போலவே தனித்துவமானவை.
|
||||
|
||||
### ஆசிரியர்கள்
|
||||
|
||||
மென்பொருள் உருவாக்கத்திற்கான மிக முக்கியமான கருவிகளில் ஒன்று ஆசிரியர். ஆசிரியர்கள் நீங்கள் உங்கள் குறியீட்டை எழுதும் இடம் மற்றும் சில நேரங்களில் உங்கள் குறியீட்டை இயக்கும் இடம்.
|
||||
|
||||
டெவலப்பர்கள் ஒரு சில கூடுதல் காரணங்களுக்காக ஆசிரியர்களை நம்பியுள்ளனர்:
|
||||
|
||||
- *பிழைநீக்குதல்* குறியீடு மூலம், வரி வரி மூலம் நுழைவதன் மூலம் பிழைகள் மற்றும் பிழைகளைக் கண்டறிதல். சில ஆசிரியர்கள் பிழைநீக்கதிறன்களைக் கொண்டுள்ளனர், அல்லது குறிப்பிட்ட நிரலாக்க மொழிகளுக்காக தனிப்பயனாக்கலாம் மற்றும் சேர்க்கலாம்.
|
||||
- *தொடரியல் சிறப்பித்துக் காட்டுதல்* வண்ணங்கள் மற்றும் உரை வடிவமைப்பை குறியீட்டுக்கு சேர்க்கிறது, படிக்க எளிதாக்குகிறது. பெரும்பாலான ஆசிரியர்கள் தனிப்பயனாக்கப்பட்ட தொடரியல் சிறப்பம்சத்தை அனுமதிக்கிறார்கள்.
|
||||
- *விரிவாக்கங்கள் மற்றும் ஒருங்கிணைப்புகள்* டெவலப்பர்கள், டெவலப்பர்கள், அடிப்படை ஆசிரியர் கட்டமைக்கப்படாத கூடுதல் கருவிகள் அணுகசிறப்பு என்று சேர்த்தல். உதாரணமாக, பல டெவலப்பர்கள் தங்கள் குறியீட்டை ஆவணப்படுத்தவும், அது எவ்வாறு செயல்படுகிறது என்பதை விளக்கவும் ஒரு வழி தேவை, மேலும் எழுத்துப்பிழைகளை சரிபார்க்க ஒரு எழுத்துப்பிழை காசோலை நீட்டிப்பை நிறுவும். இந்த சேர்த்தல் பெரும்பாலான ஒரு குறிப்பிட்ட ஆசிரியர் உள்ள பயன்படுத்த நோக்கம், மற்றும் பெரும்பாலான ஆசிரியர்கள் கிடைக்கும் நீட்டிப்புகள் தேட ஒரு வழி கொண்டு வருகின்றன.
|
||||
- *தனிப்பயனாக்கு* பெரும்பாலான ஆசிரியர்கள் மிகவும் தனிப்பயனாக்கலாம், மேலும் ஒவ்வொரு டெவலப்பரும் தங்கள் தேவைகளுக்கு ஏற்ற தங்கள் சொந்த தனித்துவமான வளர்ச்சி சூழலைக் கொண்டிருப்பார்கள். பலர் டெவலப்பர்கள் தங்கள் சொந்த நீட்டிப்புகளை உருவாக்க அனுமதிக்கிறார்கள்.
|
||||
|
||||
#### பிரபலமான ஆசிரியர்கள் மற்றும் வலை மேம்பாட்டு நீட்டிப்புகள்
|
||||
|
||||
- [விஷுவல் ஸ்டுடியோ குறியீடு](https://code.visualstudio.com/)
|
||||
- [குறியீடு எழுத்துப்பிழை சரிபார்ப்பி](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||
- [லிவ் ஷர்](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||
- [ப்ரெட்திர் - குறியீடு பொருள்](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||
- [அணு](https://atom.io/)
|
||||
- [எழுத்துப்பிழை-சரிபார்த்தல்](https://atom.io/packages/spell-check)
|
||||
- [டெலிடைப்](https://atom.io/packages/teletype)
|
||||
- [அணு அழகுபடுத்தல்](https://atom.io/packages/atom-beautify)
|
||||
|
||||
### மேய்வான்களில்
|
||||
|
||||
மற்றொரு முக்கியமான கருவி உலாவி. வலை டெவலப்பர்கள் தங்கள் குறியீடு இணையத்தில் எவ்வாறு இயங்குகிறது என்பதைக் கண்காணிக்க உலாவியை நம்பியுள்ளனர், இது ஹெச்டிஎம்எல் போன்ற எடிட்டரில் எழுதப்பட்ட ஒரு வலைப் பக்கத்தின் காட்சி கூறுகளைக் காணவும் பயன்படுத்தப்படுகிறது.
|
||||
|
||||
பல உலாவிகள் *டெவலப்பர் கருவிகள்* (தேவ்டூல்ஸ்) உடன் வருகின்றன, அவை டெவலப்பர்கள் தங்கள் பயன்பாட்டைப் பற்றிய முக்கியமான நுண்ணறிவுகளை சேகரிக்கவும் கைப்பற்றவும் உதவுவதற்கு பயனுள்ள அம்சங்கள் மற்றும் தகவல்களின் தொகுப்பைக் கொண்டுள்ளன. எடுத்துக்காட்டாக: வலைப்பக்கத்தில் பிழைகள் இருந்தால், அவை எப்போது நிகழ்ந்தன என்பதை அறிவது சில நேரங்களில் உதவியாக இருக்கும். இந்த தகவலை ப்வுசர் மூலம் கைப்பற்ற, ஒரு உலாவியில் உள்ள தேவ்டூல்களை உள்ளமைக்கலாம்.
|
||||
|
||||
#### பிரபலமான உலாவிகள் மற்றும் தேவ்டூல்ஸ்
|
||||
|
||||
- [விளிம்பு](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [குரோம்](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [பயர்பாக்ஸ்](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
### கட்டளை வரி கருவிகள்
|
||||
|
||||
சில டெவலப்பர்கள் தங்கள் தினசரி பணிகளுக்கு குறைவான வரைகலை பார்வையை விரும்புகிறார்கள் மற்றும் இதை அடைய கட்டளை வரியை நம்புகிறார்கள். குறியீட்டை உருவாக்குவதற்கு குறிப்பிடத்தக்க அளவு தட்டச்சு தேவைப்படுகிறது, மேலும் சில டெவலப்பர்கள் விசைப்பலகையில் தங்கள் ஓட்டத்தை சீர்குலைக்க விரும்பவில்லை, மேலும் டெஸ்க்டாப் ஜன்னல்களுக்கு இடையில் பரிமாற்றம் செய்ய விசைப்பலகை குறுக்குவழிகளைபயன்படுத்துவார்கள், வெவ்வேறு கோப்புகளில் வேலை செய்வார்கள், கருவிகளைப் பயன்படுத்துவார்கள்.பெரும்பாலான பணிகளை சுட்டிமூலம் முடிக்கலாம், ஆனால் கட்டளை வரியைப் பயன்படுத்துவதன் ஒரு நன்மை என்னவென்றால், சுட்டி மற்றும் விசைப்பலகைக்கு இடையில் மாற்றவேண்டிய அவசியம் இல்லாமல் கட்டளை வரி கருவிகளைக் கொண்டு நிறைய செய்ய முடியும். கட்டளை வரிமற்றொரு நன்மை அவர்கள் கட்டமைக்கமுடியும் என்று மற்றும் நீங்கள் உங்கள் விருப்ப கட்டமைப்பு சேமிக்க முடியும், பின்னர் அதை மாற்ற, மேலும் புதிய வளர்ச்சி இயந்திரங்கள் அதை இறக்குமதி.வளர்ச்சி சூழல்கள் ஒவ்வொரு டெவலப்பருக்குமிகவும் தனித்துவமானவை என்பதால், சிலர் கட்டளை வரியைப் பயன்படுத்துவதைத் தவிர்ப்பார்கள், சிலர் அதை முற்றிலும் நம்புவார்கள், சிலர் இரண்டின் கலவையை விரும்புகிறார்கள்.
|
||||
|
||||
### பிரபலமான கட்டளை வரி விருப்பங்கள்
|
||||
|
||||
நீங்கள் பயன்படுத்தும் இயக்க முறைமையின் அடிப்படையில் கட்டளை வரிக்கான விருப்பங்கள் வேறுபடும்.
|
||||
|
||||
*💻 = இயக்க முறைமையில் முன்நிறுவல் வருகிறது..*
|
||||
|
||||
#### விண்டோஸ்
|
||||
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [கட்டளை வரி](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (சி.எம்.டி என்றும் அழைக்கப்படுகிறது) 💻
|
||||
- [விண்டோஸ் முனையம்](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [புதினா](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [முனையம்](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [ஐடெர்ம்](https://iterm2.com/)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [பாஸ்](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [கேடிஇ கான்சோல்](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
#### பிரபலமான கட்டளை வரி கருவிகள்
|
||||
|
||||
- [கிட்](https://git-scm.com/) (💻 பெரும்பாலான இயக்க முறைமைகளில்)
|
||||
- [என்பிஎம்](https://www.npmjs.com/)
|
||||
- [யர்ன்](https://classic.yarnpkg.com/en/docs/cli/)
|
||||
|
||||
### ஆவணச்சான்று வழக்காட்சி
|
||||
|
||||
ஒரு டெவலப்பர் புதிய ஒன்றைக் கற்றுக்கொள்ள விரும்பும்போது, அதை எவ்வாறு பயன்படுத்துவது என்பதைக் கற்றுக்கொள்ள அவர்கள் பெரும்பாலும் ஆவணத்திற்குத் திரும்புவார்கள். டெவலப்பர்கள் கருவிகள் மற்றும் மொழிகளை எவ்வாறு சரியாகப் பயன்படுத்துவது என்பதன் மூலம் அவர்களுக்கு வழிகாட்டவும், அது எவ்வாறு செயல்படுகிறது என்பது பற்றிய ஆழமான அறிவைப் பெறவும் பெரும்பாலும் ஆவணங்களை நம்பியுள்ளனர்.
|
||||
|
||||
#### வலை அபிவிருத்தி பற்றிய பிரபலமான ஆவணப்படுத்தல்
|
||||
|
||||
- [மொசில்லா டெவலப்பர் நெட்வொர்க் (எம்டிஎன்)](https://developer.mozilla.org/docs/Web), [பயர்பாக்ஸ்](https://www.mozilla.org/firefox/) வெளியீட்டாளர்களான மொசில்லாவிலிருந்து.
|
||||
- [முன்னணி முதுநிலை](https://frontendmasters.com/learn/)
|
||||
- [Web.dev](https://web.dev), கூகிள் இருந்து, [குரோம்](https://www.google.com/chrome/) வெளியீட்டாளர்கள்.
|
||||
- [மைக்ரோசாப்ட் இன் சொந்த டெவலப்பர் ஆவணம்](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [மைக்ரோசாப்ட் எட்ஜ்](https://www.microsoft.com/edge)
|
||||
|
||||
✅ சில ஆராய்ச்சிகளை செய்யுங்கள்: இப்போது நீங்கள் ஒரு வலை டெவலப்பரின் சூழலின் அடிப்படைகளை அறிந்திருக்கிறீர்கள், அதை ஒரு வலை வடிவமைப்பாளரின் சூழலுடன் ஒப்பிட்டு வேறுபடுத்திப் பாருங்கள்.
|
||||
---
|
||||
|
||||
## 🚀 அறைகூவல்
|
||||
|
||||
சில நிரலாக்க மொழிகளை ஒப்பிடுக. ஜாவாஸ்கிரிப்ட் எதிராக ஜாவா வின் தனித்துவமான பண்புகள் யாவை? எப்படி கோபோல் எதிராக கோ பற்றி?
|
||||
|
||||
## விரிவுரைக்குப் பிந்தைய வினாடி வினா
|
||||
[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=ta)
|
||||
|
||||
## ஆய்வு & சுய ஆய்வு
|
||||
|
||||
நிரலாளர் களுக்கு கிடைக்கும் பல்வேறு மொழிகளில் ஒரு பிட் படிக்கவும். ஒரு மொழியில் ஒரு வரியை எழுத முயற்சிக்கவும், பின்னர் அதை மற்ற இரண்டு மொழிகளில் மீண்டும் செய்ய முயற்சிக்கவும். நீங்கள் என்ன கற்றுக்கொள்கிறீர்கள்?
|
||||
|
||||
## வகுத்தமைத்தல்
|
||||
|
||||
[ஆவணத்தைப் படித்தல்](assignment.ta.md)
|
||||
@ -0,0 +1,12 @@
|
||||
# ஆவணத்தைப் படித்தல்
|
||||
|
||||
## செயல்துறைக்கட்டளை
|
||||
|
||||
ஒரு வலை டெவலப்பர் தேவைஎன்று பல கருவிகள் உள்ளன [வாடிக்கையாளர் பக்க கருவிகளுக்கு எம்டிஎன் இன் ஆவணங்கள்](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).பாடத்தில் உள்ளடக்கப்படாத 3 கருவிகளைத் தேர்ந்தெடுத்து, ஒரு வலை டெவலப்பர் ஏன் அதைப் பயன்படுத்துவார் என்பதை விளக்கவும், இந்த வகையின் கீழ் வரும் ஒரு கருவியைத் தேடவும் மற்றும் அதன் ஆவணங்களைப் பகிர்ந்து கொள்ளவும். எம்டிஎன் ஐ ஆவணத்தில் ஒரே கருவி உதாரணத்தைப் பயன்படுத்த வேண்டாம்.
|
||||
|
||||
|
||||
## இயல் மேல்வரி
|
||||
|
||||
பின்பற்றத்தக்க | போதிய | தேவை மேம்பாடு
|
||||
--- | --- | -- |
|
||||
|வலை உருவாக்குநர் ஏன் கருவியைப் பயன்படுத்துவார் என்பதை விளக்கினார்| எப்படி விளக்கினார், ஆனால் டெவலப்பர் ஏன் கருவியைப் பயன்படுத்துவார் என்று அல்ல| ஒரு டெவலப்பர் கருவியை எவ்வாறு அல்லது ஏன் பயன்படுத்துவார் என்பதைக் குறிப்பிடவில்லை |
|
||||
@ -0,0 +1,325 @@
|
||||
# கிட்ஹப் அறிமுகம்
|
||||
|
||||
இந்த பாடம் கிட்ஹப் அடிப்படைகளை உள்ளடக்கியது, உங்கள் குறியீட்டில் மாற்றங்களை நடத்த மற்றும் நிர்வகிக்க ஒரு தளம்.
|
||||
|
||||
|
||||
> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
|
||||
|
||||
|
||||
## விரிவுரைக்கு முந்தைய வினாடி வினா
|
||||
[ விரிவுரைக்கு முந்தைய வினாடி வினா](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=ta)
|
||||
|
||||
## அறிமுகம்
|
||||
|
||||
இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்:
|
||||
|
||||
- உங்கள் இயந்திரத்தில் நீங்கள் செய்யும் வேலையைக் கண்காணித்தல்
|
||||
- மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல்
|
||||
- திறந்த மூல மென்பொருள் பங்களிக்க எப்படி
|
||||
|
||||
### முன் நிபந்தனைகள்
|
||||
|
||||
நீங்கள் தொடங்குவதற்கு முன், கிட் நிறுவப்பட்டதா என்பதை நீங்கள் சரிபார்க்க வேண்டும். முனைய வகை:
|
||||
`git --version`
|
||||
|
||||
கிட் நிறுவப்படவில்லை என்றால், [கிட் பதிவிறக்க](https://git-scm.com/downloads) . பின்னர், முனையத்தில் உங்கள் உள்ளூர் கிட் சுயவிவரத்தை அமை:
|
||||
|
||||
* `git config --global user.name "your-name"`
|
||||
* `git config --global user.email "your-email"`
|
||||
|
||||
கிட் ஏற்கனவே உள்ளமைக்கப்பட்டதா என்பதை சரிபார்க்க நீங்கள் தட்டச்சு செய்யலாம்:
|
||||
`git config --list`
|
||||
|
||||
நீங்கள் ஒரு கிட்ஹப் கணக்கு, ஒரு குறியீட்டு ஆசிரியர் (விஷுவல் ஸ்டுடியோ குறியீடு போன்றவை) வேண்டும், மேலும் உங்கள் முனையத்தைத் திறக்க வேண்டும் (அல்லது: கட்டளை செயலழைப்பு).
|
||||
|
||||
நீங்கள் ஏற்கனவே இல்லை என்றால் [github.com](https://github.com/) செல்லவும் மற்றும் ஒரு கணக்கை உருவாக்கவும், அல்லது உள்நுழைந்து உங்கள் சுயவிவரத்தை நிரப்பவும்.
|
||||
|
||||
|
||||
✅ கிட்ஹப் உலகின் ஒரே குறியீடு களஞ்சியம் அல்ல; மற்றவர்கள் இருக்கிறார்கள், ஆனால் கிட்ஹப் நன்கு அறியப்பட்டவர்
|
||||
|
||||
### முன்னேற்பாடு செய்தல்
|
||||
|
||||
உங்கள் உள்ளூர் இயந்திரத்தில் (மடிக்கணினி அல்லது பிசி) ஒரு குறியீட்டு திட்டத்துடன் ஒரு கோப்புறை மற்றும் கிட்ஹப்பில் ஒரு பொது களஞ்சியம் ஆகிய இரண்டும் உங்களுக்குத் தேவைப்படும், இது மற்றவர்களின் திட்டங்களுக்கு எவ்வாறு பங்களிக்க வேண்டும் என்பதற்கு ஒரு எடுத்துக்காட்டாக இருக்கும்.
|
||||
|
||||
---
|
||||
|
||||
## குறியீடு மேலாண்மை
|
||||
|
||||
சில குறியீட்டு திட்டத்துடன் உள்நாட்டில் ஒரு கோப்புறை உள்ளது என்று வைத்துக்கொள்வோம், மேலும் உங்கள் முன்னேற்றத்தை கிட் - பதிப்பு கட்டுப்பாட்டு அமைப்பு பயன்படுத்தி கண்காணிக்க த் தொடங்க வேண்டும். சிலர் கிட் பயன்படுத்தி உங்கள் எதிர்கால சுய ஒரு காதல் கடிதம் எழுத ஒப்பிட்டு. நாட்கள் அல்லது வாரங்கள் அல்லது மாதங்களுக்குப் பிறகு உங்கள் ஒப்புக்கொள்ளும் செய்திகளைப் படிக்கும்போது, நீங்கள் ஏன் ஒரு முடிவை எடுத்தீர்கள், அல்லது ஒரு மாற்றத்தை "திரும்பப் பெறுகிறீர்கள்" என்பதை நீங்கள் நினைவுகூர முடியும் - அதாவது, நீங்கள் நல்ல "செய்திகளைச் செய்யுங்கள்" என்று எழுதும்போது.
|
||||
|
||||
### பணி: ஒரு களஞ்சியத்தை உருவாக்கவும் மற்றும் குறியீட்டை செய்யவும்
|
||||
|
||||
1. **கிட்ஹப் இல் களஞ்சியத்தை உருவாக்கவும்** கிட்ஹப், களஞ்சியங்கள் தாவலை, அல்லது வழிசெலுத்தல் பட்டியில் மேல் வலது இருந்து, **புதிய ரெப்போ ** பொத்தானை கண்டுபிடிக்க.
|
||||
|
||||
1. உங்கள் களஞ்சியத்திற்கு (கோப்புறை) ஒரு பெயரைக் கொடுங்கள்
|
||||
1. தேர்ந்தெடுக்கவும் **create repository**.
|
||||
|
||||
1. **உங்கள் பணி கோப்புறைக்கு செல்லவும்**. உங்கள் முனையத்தில், கோப்புறைக்கு மாறவும் (கோப்பகம் என்றும் அழைக்கப்படுகிறது) நீங்கள் கண்காணிக்கத் தொடங்க விரும்புகிறீர்கள். மாதிப் படிவம்:
|
||||
|
||||
```bash
|
||||
cd [உங்கள் கோப்புறையின் பெயர்]
|
||||
```
|
||||
|
||||
1. **ஒரு கிட் களஞ்சியத்தை துவக்கு**. உங்கள் திட்ட வகை:
|
||||
|
||||
```bash
|
||||
git init
|
||||
```
|
||||
|
||||
1. **நிலையை சரிபார்க்கவும்**. உங்கள் களஞ்சிய வகையின் நிலையை சரிபார்க்க:
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
வெளியீடு இந்த மாதிரி ஏதாவது இருக்க முடியும்:
|
||||
|
||||
```output
|
||||
Changes not staged for commit:
|
||||
(use "git add <file>..." to update what will be committed)
|
||||
(use "git checkout -- <file>..." to discard changes in working directory)
|
||||
|
||||
modified: file.txt
|
||||
modified: file2.txt
|
||||
```
|
||||
பொதுவாக ஒரு `git status` கட்டளை, கோப்புகளில் _சேமிக்கதயாராக உள்ளது_ ரெப்போஅல்லது நீங்கள் தொடர்ந்து இருக்க விரும்பும் மாற்றங்களைக் கொண்டுள்ளது போன்ற விஷயங்களைஉங்களுக்குச் சொல்கிறது.
|
||||
|
||||
1. **கண்காணிப்பு அனைத்து கோப்புகளை சேர்க்க**
|
||||
இது ஸ்டேஜிங் கோப்புகள் / ஸ்டேஜிங் பகுதியில் கோப்புகளைச் சேர்ப்பது என்றும் அழைக்கப்படுகிறது.
|
||||
|
||||
```bash
|
||||
git add .
|
||||
```
|
||||
`git add` பிளஸ் `.` வாதம் உங்கள் கோப்புகள் அனைத்தும் கண்காணிக்க மாறும் என்பதைக் குறிக்கிறது.
|
||||
|
||||
1. **கண்காணிப்புக்காக தேர்ந்தெடுக்கப்பட்ட கோப்புகளைச் சேர்க்கவும்**
|
||||
|
||||
```bash
|
||||
git add [கோப்பு அல்லது கோப்புறை பெயர்]
|
||||
```
|
||||
|
||||
ஒரே நேரத்தில் அனைத்து கோப்புகளையும் செய்ய விரும்பாத போது, தேர்ந்தெடுக்கப்பட்ட கோப்புகளை மட்டுமே ஸ்டேஜிங் பகுதியில் சேர்க்க இது உதவுகிறது.
|
||||
|
||||
1. **அனைத்து கோப்புகளையும் நிலைநீக்கு**
|
||||
|
||||
```bash
|
||||
git reset
|
||||
```
|
||||
|
||||
இந்த கட்டளை அனைத்து கோப்புகளையும் ஒரே நேரத்தில் நிலைநீக்க உதவுகிறது.
|
||||
|
||||
|
||||
1. **ஒரு குறிப்பிட்ட கோப்பை நிலைநீக்கு**
|
||||
|
||||
```bash
|
||||
git reset [கோப்பு அல்லது கோப்புறை பெயர்]
|
||||
```
|
||||
|
||||
அடுத்த கமிட் செய்ய விரும்பாத ஒரு குறிப்பிட்ட கோப்பை மட்டும் ஒரே நேரத்தில் கட்டமைக்க இந்த கட்டளை நமக்கு உதவுகிறது.
|
||||
|
||||
1. **உங்கள் வேலையை த் தொடருதல்**. இந்த கட்டத்தில் நீங்கள் _ஸ்டேஜிங் பகுதி_ என்று அழைக்கப்படும் கோப்புகளை சேர்த்துள்ளீர்கள். உங்கள் கோப்புகளை கிட் கண்காணிக்கும் இடம். மாற்றத்தை நிரந்தரமாக்க, கோப்புகளை _கமிட்_ செய்ய வேண்டும். அவ்வாறு செய்ய நீங்கள் `git commit` கட்டளையுடன் ஒரு _கமிட்_ உருவாக்குகிறீர்கள். ஒரு _கமிட்_ உங்கள் ரெப்போ வரலாற்றில் ஒரு சேமிப்பு புள்ளி யை குறிக்கிறது. _கமிட்_ உருவாக்க பின்வருவனவை தட்டச்சு செய்யவும்:
|
||||
|
||||
|
||||
```bash
|
||||
git commit -m "first commit"
|
||||
```
|
||||
|
||||
இது உங்கள் கோப்புகள் அனைத்தையும் ஒப்புக்கொள்கிறது, "முதலில் ஒப்புக்கொள்ளுங்கள்" என்ற செய்தியைச் சேர்க்கிறது. எதிர்காலத்தில் செய்திகளைச் செய்ய நீங்கள் என்ன வகையான மாற்றத்தை செய்தீர்கள் என்பதை தெரிவிக்க உங்கள் விளக்கத்தில் இன்னும் விளக்கமாக இருக்க விரும்புகிறீர்கள்.
|
||||
|
||||
1. **உங்கள் உள்ளூர் கிட் ரெப்போவை கிட்ஹப் உடன் இணைக்கவும்**. ஒரு கிட் ரெப்போ உங்கள் இயந்திரத்தில் நல்லது, ஆனால் ஒரு கட்டத்தில் நீங்கள் எங்காவது உங்கள் கோப்புகளை காப்புப்பிரதி எடுக்க விரும்புகிறீர்கள், மேலும் உங்கள் ரெப்போவில் உங்களுடன் வேலை செய்ய மற்ற நபர்களை அழைக்கவும் விரும்புகிறீர்கள். அவ்வாறு செய்ய ஒரு பெரிய இடம் கிட்ஹப் ஆகும். நாம் ஏற்கனவே கிட்ஹப்பில் ஒரு ரெப்போவை உருவாக்கியுள்ளோம் என்பதை நினைவில் கொள்ளுங்கள், எனவே நாம் செய்ய வேண்டிய ஒரே விஷயம் கிட்ஹப் உடன் எங்கள் உள்ளூர் கிட் ரெப்போவை இணைக்க வேண்டும். `git remote add` என்ற கட்டளை அதைச் செய்யும். பின்வரும் கட்டளையை தட்டச்சு செய்யவும்:
|
||||
|
||||
> குறிப்பு, நீங்கள் கட்டளையை தட்டச்சு செய்வதற்கு முன், உங்கள் கிட்ஹப் ரெப்போ பக்கத்திற்கு சென்று களஞ்சியத்தை கண்டுபிடிக்கவும். நீங்கள் கீழே உள்ள கட்டளையில் பயன்படுத்துவீர்கள். ```https://github.com/username/repository_name.git``` என்பதை உங்கள் கிட்ஹப் யுஆர்எல் மூலம் மாற்றவும்.
|
||||
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/username/repository_name.git
|
||||
```
|
||||
|
||||
இது ஒரு _தொலை__ அல்லது இணைப்பை உருவாக்குகிறது, "தோற்றம்" என்று பெயரிடப்பட்டது, நீங்கள் முன்பு உருவாக்கிய கிட்ஹப் களஞ்சியத்தை சுட்டிக்காட்டுகிறது.
|
||||
|
||||
1. **கீதுப் க்கு உள்ளூர் கோப்புகளை அனுப்பவும்** இதுவரை நீங்கள் உள்ளூர் ரெப்போ மற்றும் கிட்ஹப் ரெப்போ இடையே ஒரு _இணைப்பு_ உருவாக்கியுள்ளீர்கள். பின்வரும் கட்டளை `git push`உடன் இந்த கோப்புகளை கிட்ஹப் க்கு அனுப்புவோம், இது போன்றது:
|
||||
|
||||
> குறிப்பு, உங்கள் கிளை பெயர் முன்னிருப்பாக வேறுபட்டிருக்கலாம் ```main```.
|
||||
|
||||
```bash
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
இது உங்கள் "main" கிளையில் உள்ள உங்கள் உறுதிகளை கிட்ஹப் க்கு அனுப்புகிறது.
|
||||
|
||||
2. **மேலும் மாற்றங்களைச் சேர்க்க**. நீங்கள் மாற்றங்களைதொடர்ந்து செய்ய விரும்பினால், அவற்றை கிட்ஹப் க்கு தள்ளவிரும்பினால், பின்வரும் மூன்று கட்டளைகளைப் பயன்படுத்த வேண்டும்:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "உங்கள் ஒப்புக்கொள்ளும் செய்தியை இங்கே தட்டச்சு செய்யவும்"
|
||||
git push
|
||||
```
|
||||
> உதவிக்குறிப்பு, நீங்கள் கிட்ஹப்பில் காண்பிக்க விரும்பாத கோப்புகளைத் தடுக்க ஒரு `.gitignore` கோப்பை நீங்கள் ஏற்றுக்கொள்ள விரும்பலாம் - அதே கோப்புறையில் நீங்கள் சேமித்து வைக்கும் குறிப்புகள் கோப்பு போல, ஆனால் ஒரு பொது களஞ்சியத்தில் இடமில்லை. [.gitignore templates](https://github.com/github/gitignore) இல் `.gitignore` கோப்புகளுக்கான வார்ப்புருக்களை நீங்கள் காணலாம்
|
||||
|
||||
#### செய்திகளை ஒப்புக்கொள்
|
||||
|
||||
|
||||
ஒரு பெரிய கிட் கமிட் சப்ஜெக்ட் லைன் பின்வரும் வாக்கியத்தை நிறைவு செய்யும்:
|
||||
பயன்படுத்தப்பட்டால், இந்த உறுதி <உங்கள் பொருள் வரி இங்கே>
|
||||
|
||||
பொருள் கட்டாயபயன்படுத்த, தற்போதைய: "மாற்றம்" "மாற்ற" அல்லது "மாற்றங்கள்".
|
||||
பொருள் போன்ற, உடலில் (விரும்பினால்) மேலும் கட்டாய பயன்படுத்த, தற்போதைய பதற்றம். உடல் மாற்றம் உந்துதல் சேர்க்க வேண்டும் மற்றும் முந்தைய நடத்தை இந்த மாறாக வேண்டும். நீங்கள் `ஏன்` விளக்குகிறீர்கள், `எப்படி` அல்ல.
|
||||
|
||||
✅ கிட்ஹப் சுற்றி உலாவ சில நிமிடங்கள் எடுத்துக் கொள்ளுங்கள். நீங்கள் ஒரு பெரிய ஒப்புக்கொள்ளசெய்தி கண்டுபிடிக்க முடியும்? நீங்கள் ஒரு மிகவும் குறைந்த ஒரு கண்டுபிடிக்க முடியும்? ஒரு கமிட் செய்தியில் தெரிவிக்க மிகவும் முக்கியமான மற்றும் பயனுள்ள தகவல் என்று நீங்கள் நினைக்கிறீர்கள்?
|
||||
|
||||
### பணி: ஒத்துழைக்க
|
||||
|
||||
கிட்ஹப்பில் விஷயங்களை வைப்பதற்கான முக்கிய காரணம் மற்ற டெவலப்பர்களுடன் ஒத்துழைப்பதை சாத்தியமாக்குகிறது.
|
||||
|
||||
## மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல்
|
||||
|
||||
உங்கள் களஞ்சியத்தில், பரிந்துரைக்கப்பட்ட சமூக தரங்களுடன் உங்கள் திட்டம் எவ்வாறு ஒப்பிடுகிறது என்பதைப் பார்க்க `நுண்ணறிவு > சமூகம்` செல்லவும்.
|
||||
|
||||
இங்கே உங்கள் கிட்ஹப் ரெப்போ மேம்படுத்த முடியும் என்று சில விஷயங்கள் உள்ளன:
|
||||
- **விளக்கம்**. உங்கள் திட்டத்திற்கான விளக்கத்தைச் சேர்த்தீர்களா?
|
||||
- **ரீட்மே**. நீங்கள் ஒரு ரீட்மேசேர்த்தீர்களா? கிட்ஹப் ஒரு [ரீட்மே](https://docs.github.com/articles/about-readmes/) எழுதுவதற்கான வழிகாட்டலை வழங்குகிறது
|
||||
- **பங்களிப்பு வழிகாட்டுதல்**. உங்கள் திட்டத்தில் [பங்களிப்பு வழிகாட்டுதல்கள்](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) உள்ளதா,
|
||||
- **நடத்தை விதிகள்**. அ [நடத்தை விதிகள்](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||
- **உரிமம்**. ஒருவேளை மிக முக்கியமாக, ஒரு [உரிமம்](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||
|
||||
|
||||
இந்த வளங்கள் அனைத்தும் புதிய குழு உறுப்பினர்களுக்கு பயனளிக்கும். உங்கள் குறியீட்டைப் பார்ப்பதற்கு முன்பு புதிய பங்களிப்பாளர்கள் பார்க்கும் விஷயங்கள் பொதுவாக உள்ளன, உங்கள் திட்டம் அவர்கள் தங்கள் நேரத்தை செலவழிக்க சரியான இடம் தானா என்பதைக் கண்டறிய.
|
||||
|
||||
✅ ரீட்மே கோப்புகள், அவை தயாரிக்க நேரம் எடுத்துக்கொண்டாலும், பெரும்பாலும் பிஸியான பராமரிப்பாளர்களால் புறக்கணிக்கப்படுகின்றன. குறிப்பாக விளக்கப்பட்ட ஒரு உதாரணத்தை நீங்கள் கண்டுபிடிக்க முடியுமா? குறிப்பு: நீங்கள் முயற்சி செய்ய விரும்பும் சில [நல்ல ரீ.ஈ.டி.எம்.இ.க்களை உருவாக்க உதவும் கருவிகள்](https://www.makeareadme.com/) உள்ளன.
|
||||
|
||||
### பணி: சில குறியீட்டை ஒன்றுசேர்
|
||||
|
||||
பங்களிப்பு ஆவணங்கள் மக்கள் திட்டத்திற்கு பங்களிக்க உதவுகின்றன. நீங்கள் என்ன வகையான பங்களிப்புகளைத் தேடுகிறீர்கள் மற்றும் செயல்முறை எவ்வாறு செயல்படுகிறது என்பதை இது விளக்குகிறது. பங்களிப்பாளர்கள் கீதுப் மீது உங்கள் ரெப்போபங்களிக்க முடியும் படிகள் ஒரு தொடர் மூலம் செல்ல வேண்டும்:
|
||||
|
||||
1. **உங்கள் ரெப்போவை ஃபோர்கிங்** ஒருவேளை நீங்கள் மக்கள் உங்கள் திட்டத்தை _ஃபோர்க்_ வேண்டும். ஃபோர்கிங் என்பது அவர்களின் கிட்ஹப் சுயவிவரத்தில் உங்கள் களஞ்சியத்தின் பிரதியை உருவாக்குவதாகும்.
|
||||
1. **குளோன்**. அங்கிருந்து அவர்கள் தங்கள் உள்ளூர் இயந்திரத்திற்கு திட்டத்தை குளோன் செய்வார்கள்.
|
||||
1. **ஒரு கிளை உருவாக்க**. நீங்கள் அவர்களின் வேலைக்கு ஒரு _கிளை_ உருவாக்க அவர்களை கேட்க வேண்டும்.
|
||||
1. **ஒரு பகுதியில் தங்கள் மாற்றத்தை கவனம் செலுத்தவும்**. பங்களிப்பாளர்களை ஒரு நேரத்தில் ஒரு விஷயத்தில் தங்கள் பங்களிப்புகளை ஒருமுகப்படுத்தும்படி கேளுங்கள் - அந்த வழியில் நீங்கள் அவர்களின் வேலையில் _ஒன்றிணைக்க_ வாய்ப்புகளை அதிகமாக உள்ளது. அவர்கள் ஒரு பிழை சரி எழுத கற்பனை, ஒரு புதிய அம்சம் சேர்க்க, மற்றும் பல சோதனைகள் புதுப்பிக்க - நீங்கள் விரும்பினால் என்ன, அல்லது மட்டுமே 3 வெளியே 2 செயல்படுத்த முடியும், அல்லது 3 மாற்றங்கள் 1?
|
||||
|
||||
✅ நல்ல குறியீட்டை எழுதுவதற்கும் அனுப்புவதற்கும் கிளைகள் குறிப்பாக முக்கியமான ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். வழக்குகள் என்ன பயன் என்று நீங்கள் நினைக்கலாம்?
|
||||
|
||||
> குறிப்பு, நீங்கள் உலகில் பார்க்க விரும்பும் மாற்றமாக இருங்கள், உங்கள் சொந்த வேலைக்கும் கிளைகளை உருவாக்குங்கள். நீங்கள் செய்யும் எந்தவொரு உறுதிப்படமும் நீங்கள் தற்போது "சரிபார்க்கப்பட்ட" கிளையில் செய்யப்படும். எந்த கிளை என்று பார்க்க `git status` பயன்படுத்தவும்.
|
||||
|
||||
பங்களிப்பாளர் பணிப்பாய்வின் மூலம் செல்லலாம். பங்களிப்பாளர் ஏற்கனவே _ஃபோர்க்_ மற்றும் _குளோன்_ ரெப்போவை வைத்திருக்கிறார் என்று வைத்துக்கொள்ளுங்கள், எனவே அவர்கள் தங்கள் உள்ளூர் இயந்திரத்தில் வேலை செய்ய தயாராக ஒரு கிட் ரெப்போவை வைத்திருக்கிறார்கள்:
|
||||
|
||||
1. **ஒரு கிளை உருவாக்க**. `git branch` என்ற கட்டளையைப் பயன்படுத்தி, அவர்கள் பங்களிக்க வேண்டிய மாற்றங்களைக் கொண்ட ஒரு கிளையை உருவாக்கவும்:
|
||||
|
||||
```bash
|
||||
git branch [கிளை பெயர்]
|
||||
```
|
||||
|
||||
1. **வேலை செய்யும் கிளைக்கு மாறவும்**. குறிப்பிட்ட கிளைக்கு மாறி, பணி கோப்பகத்துடன் புதுப்பிக்கவும் `git switch`:
|
||||
|
||||
```bash
|
||||
git switch [கிளை பெயர்]
|
||||
```
|
||||
|
||||
1. **வேலை செய்யுங்கள்**. இந்த கட்டத்தில் நீங்கள் உங்கள் மாற்றங்களை சேர்க்க விரும்புகிறீர்கள். பின்வரும் கட்டளைகளுடன் அதைப் பற்றி கிட் சொல்ல மறக்க வேண்டாம்:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "என் மாற்றங்கள்"
|
||||
```
|
||||
|
||||
உங்கள் நலனுக்காகவும், நீங்கள் உதவி செய்யும் ரெப்போவின் பராமரிப்பாளராகவும், உங்கள் உறுதிக்கு ஒரு நல்ல பெயரைக் கொடுப்பதை உறுதி செய்யுங்கள்.
|
||||
|
||||
1.**உங்கள் வேலையை `main` கிளையுடன் இணைக்கவும்**. ஒரு கட்டத்தில் நீங்கள் வேலை செய்து விட்டீர்கள், உங்கள் வேலையை `main` கிளையுடன் இணைக்க விரும்புகிறீர்கள். `main` கிளை இதற்கிடையில் மாறியிருக்கலாம், எனவே பின்வரும் கட்டளைகளுடன் சமீபத்தியதை முதலில் புதுப்பிக்கவும்:
|
||||
|
||||
```bash
|
||||
git switch main
|
||||
git pull
|
||||
|
||||
```
|
||||
|
||||
இந்த கட்டத்தில், உங்கள் பணிக்கிளையில் மாற்றங்கள் எளிதாக _இணைவுகள்_ செய்ய முடியாத சூழ்நிலைகளில் ஏதேனும் _இணை_, இருப்பதை உறுதி செய்ய விரும்புகிறீர்கள். எனவே பின்வரும் கட்டளைகளை இயக்கவும்:
|
||||
|
||||
```bash
|
||||
git switch [கிளை பெயர்]
|
||||
git merge main
|
||||
```
|
||||
|
||||
|
||||
இது உங்கள் கிளையில் `main` இருந்து அனைத்து மாற்றங்களையும் கொண்டு வரும் மற்றும் வட்டம் நீங்கள் தொடர முடியும். இல்லையெனில்,கிட் _confused_ எங்கே என்று விஎஸ் குறியீடு உங்களுக்கு சொல்லும், மேலும் எந்த உள்ளடக்கம் மிகவும் துல்லியமானது என்று சொல்ல பாதிக்கப்பட்ட கோப்புகளை மாற்றவும்.
|
||||
|
||||
1. 1. **உங்கள் வேலையை கிட்ஹப்**க்கு அனுப்பவும். உங்கள் வேலையை கிட்ஹப் க்கு அனுப்புவது என்பது இரண்டு விஷயங்களைக் குறிக்கிறது. உங்கள் கிளையை உங்கள் ரெப்போவுக்குத் தள்ளி, பின்னர் ஒரு பேஆர், புல் கோரிக்கையைத் திறக்கவும்.
|
||||
|
||||
```bash
|
||||
git push --set-upstream origin [கிளை பெயர்]
|
||||
```
|
||||
மேலே கட்டளை உங்கள் முட்கரண்டி ரெப்போ கிளை உருவாக்குகிறது.
|
||||
|
||||
1. **ஒரு பேஆர்** திறக்கவும். அடுத்து, நீங்கள் ஒரு பேஆர் ஐ திறக்க விரும்புகிறீர்கள். நீங்கள் கிட்ஹப் மீது ஃபோர்க்செய்யப்பட்ட ரெப்போவுக்கு வழிசெலுத்துவதன் மூலம் அதைச் செய்கிறீர்கள். நீங்கள் ஒரு புதிய பேஆர் ஐ உருவாக்க விரும்புகிறீர்களா என்று கேட்கும் கிட்ஹப்பில் ஒரு அறிகுறியைப் பார்ப்பீர்கள், அதை கிளிக் செய்து, செய்தி தலைப்பை மாற்றக்கூடிய ஒரு இடைமுகத்திற்கு நீங்கள் அழைத்துச் செல்லப்படுகிறீர்கள், அதற்கு மிகவும் பொருத்தமான விளக்கத்தை க்கொடுங்கள். இப்போது நீங்கள் ஃபோர்க் செய்த ரெப்போவின் பராமரிப்பாளர் இந்த பேஆர் ஐப் பார்ப்பார், _விரல்கள் கடந்து_ அவர்கள் பாராட்டுவார்கள் மற்றும் உங்கள் பேஆர் ஐ இணைப்பார்கள். நீங்கள் இப்போது ஒரு பங்களிப்பாளராக இருக்கிறீர்கள், நீங்கள் :)
|
||||
|
||||
1. **சுத்தம்**. நீங்கள் வெற்றிகரமாக ஒரு பேஆர் ஐ இணைத்த பிறகு _சுத்தம்_ நல்ல நடைமுறையாகக் கருதப்படுகிறது. உங்கள் உள்ளூர் கிளை மற்றும் நீங்கள் கிட்ஹப் க்கு தள்ளிய கிளை இரண்டையும் சுத்தம் செய்ய விரும்புகிறீர்கள். முதலில் பின்வரும் கட்டளையுடன் அதை உள்நாட்டில் நீக்குவோம்:
|
||||
|
||||
```bash
|
||||
git branch -d [கிளை பெயர்]
|
||||
```
|
||||
|
||||
நீங்கள் அடுத்த ஃபோர்க்செய்யப்பட்ட ரெப்போவிற்கு கிட்ஹப் பக்கம் செல்வதை உறுதி செய்து, நீங்கள் அதை தள்ளிய தொலைதூர கிளையை அகற்றவும்.
|
||||
|
||||
`புல் கோரிக்கை` ஒரு முட்டாள்தனமான சொல் போல் தெரிகிறது, ஏனென்றால் உண்மையில் நீங்கள் திட்டத்தில் உங்கள் மாற்றங்களை தள்ள விரும்புகிறீர்கள். ஆனால் பராமரிப்பாளர் (திட்ட உரிமையாளர்) அல்லது முக்கிய குழு திட்டத்தின் "முக்கிய" கிளையுடன் இணைப்பதற்கு முன் உங்கள் மாற்றங்களை கருத்தில் கொள்ள வேண்டும், எனவே நீங்கள் உண்மையில் ஒரு பராமரிப்பவரிடமிருந்து ஒரு மாற்ற முடிவைக் கோருகிறீர்கள்.
|
||||
|
||||
ஒரு இழு கோரிக்கை மதிப்புரைகள், கருத்துக்கள், ஒருங்கிணைந்த சோதனைகள் மற்றும் பலவற்றுடன் ஒரு கிளையில் அறிமுகப்படுத்தப்பட்ட வேறுபாடுகளை ஒப்பிட்டு விவாதிக்க ும் இடம். ஒரு நல்ல இழுப்பு கோரிக்கை ஒரு ஒப்புக்கொள்ளும் செய்தி போன்ற கிட்டத்தட்ட அதே விதிகளைப் பின்பற்றுகிறது. எடுத்துக்காட்டாக, உங்கள் வேலை ஒரு சிக்கலைத் சரிசெய்யும்போது, சிக்கல் டிராக்கரில் உள்ள ஒரு பிரச்சினைக்கு நீங்கள் ஒரு குறிப்பைச் சேர்க்கலாம். இது ஒரு `#` பயன்படுத்தி செய்யப்படுகிறது, அதைத் தொடர்ந்து உங்கள் பிரச்சினையின் எண்ணிக்கை. உதாரணமாக `#97`.
|
||||
|
||||
🤞அனைத்து காசோலைகளும் கடந்து, திட்ட உரிமையாளர்(கள்) உங்கள் மாற்றங்களை திட்டத்தில் இணைக்க வேண்டும் என்று விரல்கள் கடந்து விட்டன🤞
|
||||
|
||||
கிட்ஹப்பில் உள்ள தொடர்புடைய தொலைநிலை கிளையிலிருந்து அனைத்து புதிய ஒப்புக்களுடன் உங்கள் தற்போதைய உள்ளூர் பணிகிளையைப் புதுப்பிக்கவும்:
|
||||
|
||||
`git pull`
|
||||
|
||||
## திறந்த மூலத்திற்கு எவ்வாறு பங்களிக்க வேண்டும்
|
||||
|
||||
முதலில், உங்களுக்கு ஆர்வமுள்ள கிட்ஹப்பில் ஒரு களஞ்சியத்தை (அல்லது **ரெப்போ**) காணலாம், அதற்கு நீங்கள் ஒரு மாற்றத்தை பங்களிக்க விரும்புகிறீர்கள். அதன் உள்ளடக்கங்களை உங்கள் இயந்திரத்தில் நகலெடுக்க விரும்புகிறீர்கள்..
|
||||
|
||||
✅ 'தொடக்க நட்பு' ரெப்போஸைக் கண்டுபிடிக்க ஒரு நல்ல வழி ['நல்ல முதல் பிரச்சினை' என்ற குறிச்சொல்மூலம் தேடுவதாகும்](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
|
||||
|
||||
|
||||
|
||||
குறியீட்டை நகலெடுக்க பல வழிகள் உள்ளன. ஒரு வழி களஞ்சியத்தின் உள்ளடக்கங்களை "குளோன்" செய்வது, HTTPஎஸ், எஸ்எஸ்ஹெச், அல்லது கிட்ஹப் சிஎல்ஐ (கட்டளை வரி இடைமுகம்) பயன்படுத்தி.
|
||||
|
||||
உங்கள் முனையத்தைத் திறந்து களஞ்சியத்தை இவ்வாறு குளோன் செய்யுங்கள்:
|
||||
`git clone https://github.com/புரொஜக்ட்யுஆர்எல்`
|
||||
|
||||
திட்டத்தில் வேலை செய்ய, சரியான கோப்புறைக்கு மாறவும்:
|
||||
`cd புரொஜக்ட்யுஆர்எல்`
|
||||
|
||||
நீங்கள் [கோட்ஸ்பேஸ்](https://github.com/features/codespaces), கிட்ஹப்பின் உட்பொதிக்கப்பட்ட குறியீடு ஆசிரியர் / கிளவுட் மேம்பாட்டு சூழல் அல்லது [கிட்ஹப் டெஸ்க்டாப்](https://desktop.github.com/) பயன்படுத்தி முழு திட்டத்தையும் திறக்கலாம்
|
||||
|
||||
இறுதியாக, நீங்கள் ஒரு ஜிப் செய்யப்பட்ட கோப்புறையில் குறியீட்டைப் பதிவிறக்கலாம்.
|
||||
|
||||
### கிட்ஹப் பற்றி இன்னும் சில சுவாரஸ்யமான விஷயங்கள்
|
||||
|
||||
நீங்கள் கீதுப்-இல் உள்ள எந்தவொரு பொது களஞ்சியத்தையும் நட்சத்திர, பார்வை மற்றும் /அல்லது "முட்கரண்டி" செய்யலாம். மேல்-வலது கீழ்-கீழ் மெனுவில் உங்கள் நட்சத்திரகளஞ்சியங்களை நீங்கள் காணலாம். இது புக்மார்க்கிங் போன்றது, ஆனால் குறியீட்டுக்கு.
|
||||
|
||||
திட்டங்கள் ஒரு சிக்கல் டிராக்கர் வேண்டும், பெரும்பாலும் "சிக்கல்கள்" தாவலில் கிட்ஹப் இல்லையெனில் சுட்டிக்காட்டப்படாவிட்டால், அங்கு மக்கள் திட்டம் தொடர்பான சிக்கல்களைவிவாதிக்கிறார்கள். மற்றும் புல் கோரிக்கைகள் தாவல் மக்கள் விவாதிக்க மற்றும் முன்னேற்றத்தில் இருக்கும் மாற்றங்களை மதிப்பாய்வு எங்கே உள்ளது.
|
||||
|
||||
திட்டங்கள் மன்றங்கள், அஞ்சல் பட்டியல்கள் அல்லது ஸ்லாக், டிஸ்ட்டர் அல்லது ஐஆர்சி போன்ற அரட்டை சேனல்களிலும் விவாதம் நடத்தலாம்.
|
||||
|
||||
✅ உங்கள் புதிய கிட்ஹப் ரெப்போவைச் சுற்றி பாருங்கள் மற்றும் சில விஷயங்களை முயற்சிக்கவும், எடிட்டிங் அமைப்புகள், உங்கள் ரெப்போவில் தகவலைச் சேர்த்தல், மற்றும் ஒரு திட்டத்தை உருவாக்குதல் (ஒரு கன்பன் பலகை போன்றது). நீங்கள் செய்ய முடியும் நிறைய இருக்கிறது!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 அறைகூவல்
|
||||
|
||||
ஒருவருக்கொருவர் குறியீட்டில் வேலை செய்ய ஒரு நண்பருடன் ஜோடி சேரவும். ஒரு திட்டத்தை கூட்டாக உருவாக்கவும், ஃபோர்க் குறியீடு, கிளைகளை உருவாக்கவும், மாற்றங்களை இணைக்கவும்.
|
||||
|
||||
## விரிவுரைக்குப் பிந்தைய வினாடி வினா
|
||||
[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=ta)
|
||||
|
||||
## ஆய்வு & சுய ஆய்வு
|
||||
|
||||
மேலும் வாசிக்க [திறந்த மூல மென்பொருளுக்கு பங்களிப்பு](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
|
||||
|
||||
[கிட் ஏமாற்றுதாள்](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
|
||||
பயிற்சி, பயிற்சி, பயிற்சி. கிட்ஹப் [lab.github.com](https://lab.github.com/) வழியாக கிடைக்கும் சிறந்த கற்றல் பாதைகளைக் கொண்டுள்ளது:
|
||||
|
||||
- [கிது முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
|
||||
|
||||
நீங்கள் இன்னும் மேம்பட்ட ஆய்வகங்கள் காண்பீர்கள்.
|
||||
|
||||
## வகுத்தமைத்தல்
|
||||
|
||||
முழுமையான [கிட்ஹப் பயிற்சி ஆய்வகத்தில் முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
@ -0,0 +1,18 @@
|
||||
# இணைய அபிவிருத்தியுடன் தொடங்குதல்
|
||||
|
||||
பாடத்திட்டத்தின் இந்தப் பிரிவில், தொழில்முறை மேம்பாட்டாளராக ஆவதற்கு முக்கியமான திட்ட அடிப்படையிலான கருத்துக்கள் உங்களுக்கு அறிமுகப்படுத்தப்படும்.
|
||||
|
||||
### தலைப்புகள்
|
||||
|
||||
1. [வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்](../1-intro-to-programming-languages/README.md)
|
||||
2. [கிட்ஹப் அறிமுகம்](../2-github-basics/README.md)
|
||||
3. [அணுகல்தன்மையின் அடிப்படைகள்](../3-accessibility/README.md)
|
||||
|
||||
### கடன்கள்
|
||||
|
||||
வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம் ♥️ எழுதியவர் [ஜாஸ்மின் கிரீன்வே](https://twitter.com/paladique/)
|
||||
|
||||
கிட்ஹப் அறிமுகம் ♥️ எழுதியவர் [ஃப்ளோர் டிரீஸ்](https://twitter.com/floordrees/)
|
||||
|
||||
அணுகல்தன்மையின் அடிப்படைகள் ♥️ எழுதியவர் [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/)
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
# ஜாவாஸ்கிரிப்ட் அறிமுகம்
|
||||
|
||||
ஜாவாஸ்கிரிப்ட் என்பது இணையத்தின் மொழி. இந்த நான்கு பாடங்களில், நீங்கள் அதன் அடிப்படைகளை கற்றுக்கொள்வீர்கள்
|
||||
|
||||
### தலைப்புகள்
|
||||
|
||||
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/) ஆகியோர் ♥️ எழுதப்பட்டன
|
||||
@ -0,0 +1,31 @@
|
||||
# என் நிலப்பரப்பு: ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஹெச்டிஎம்எல், சிஎஸ்எஸ் மற்றும் டோம் கையாளுதல் பற்றி அறிய ஒரு திட்டம் 🌵🌱
|
||||
|
||||
ஒரு சிறிய இழுவை மற்றும் குறியீடு தியானம் கைவிட.ஒரு சிறிய ஹெச்டிஎம்எல், ஜேஎஸ் மற்றும் சிஎஸ்எஸ் மூலம், நீங்கள் ஒரு வலை இடைமுகத்தை உருவாக்கலாம், அதை பாணிசெய்யலாம், மற்றும் ஒரு தொடர்பு சேர்க்கலாம்.
|
||||
|
||||
|
||||
|
||||
# பாடங்கள்
|
||||
|
||||
1. [ஹெச்டிஎம்எல் அறிமுகம்](../1-intro-to-html/README.md)
|
||||
2. [சிஎஸ்எஸ் அறிமுகம்](../2-intro-to-css/README.md)
|
||||
3. [டோம் மற்றும் ஜேஎஸ் மூடல்களுக்கு அறிமுகம்](../3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
### கடன்கள்
|
||||
|
||||
[ஜென் லூப்பர்](https://www.twitter.com/jenlooper) ♥️ எழுதினார்
|
||||
சிஎஸ்எஸ் வழியாக உருவாக்கப்பட்ட நிலப்பரப்பு ஈர்க்கப்பட்டது
|
||||
|
||||
சி.எஸ்.எஸ் வழியாக உருவாக்கப்பட்ட நிலப்பரப்பு ஜாகுப் மந்த்ராவின் கண்ணாடி [கோடெபென்](https://codepen.io/Rotarepmi/pen/rjpNZY). ஜாடியால் ஈர்க்கப்பட்டது
|
||||
|
||||
இந்த கலைப்படைப்பு புரோகிரியேட்பயன்படுத்தி [ஜென் லூப்பரால்](http://jenlooper.com) வரையப்பட்டது
|
||||
|
||||
## உங்கள் நிலப்பரப்பு பயன்படுத்தவும்
|
||||
|
||||
அஸூர் ஸ்டேடிக் வெப் ஆப்ஸ் பயன்படுத்தி உங்கள் டெரரியத்தை இணையத்தில் பயன்படுத்தலாம் அல்லது வெளியிடலாம்.
|
||||
|
||||
1. இந்த ரெப்போவை ஃபோர்க் செய்யுங்கள்
|
||||
2. இந்த பொத்தானை அழுத்தவும்
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
|
||||
3. உங்கள் பயன்பாட்டை உருவாக்கும் வழிகாட்டி வழியாக நடக்கவும். பயன்பாட்டு வேர் `/solution` அல்லது உங்கள் கோட்பேஸின் வேர் என்று நீங்கள் அமைக்கிறீர்கள் என்பதை உறுதிப்படுத்தவும்.இந்த பயன்பாட்டில் ஏபிஐ இல்லை, எனவே அதை சேர்ப்பது பற்றி கவலைப்பட வேண்டாம்.உங்கள் ஃபோர்க் செய்யப்பட்ட ரெப்போவில் ஒரு கீட்ஹப் கோப்புறை உருவாக்கப்படும், இது அஸூர் ஸ்டேடிக் வெப் ஆப்ஸின் சேவையை உருவாக்கவும் உங்கள் பயன்பாட்டை ஒரு புதிய யுஆர்எல் க்கு வெளியிடவும் உதவும்.
|
||||
@ -0,0 +1,31 @@
|
||||
# நிகழ்வு-இயக்கப்படும் நிரலாக்கம் - ஒரு தட்டச்சு விளையாட்டு உருவாக்க
|
||||
|
||||
## அறிமுகம்
|
||||
|
||||
தட்டச்சு என்பது டெவலப்பரின் மிகவும் குறைவாக மதிப்பிடப்பட்ட திறன்களில் ஒன்றாகும். உங்கள் தலையிலிருந்து உங்கள் எடிட்டருக்கு விரைவாக எண்ணங்களை மாற்றும் திறன் படைப்பாற்றல் சுதந்திரமாக ஓட அனுமதிக்கிறது. கற்றுக்கொள்வதற்கான சிறந்த வழிகளில் ஒன்று விளையாட்டை விளையாடுவது!
|
||||
|
||||
> எனவே, தட்டச்சு விளையாட்டை உருவாக்குவோம்!
|
||||
|
||||
நீங்கள் இதுவரை உருவாக்கிய ஜாவாஸ்கிரிப்ட், ஹெச்டிஎம்எல் மற்றும் சிஎஸ்எஸ் திறன்களைப் பயன்படுத்தி தட்டச்சு விளையாட்டை உருவாக்கப் போகிறீர்கள். விளையாட்டு ஒரு சீரற்ற மேற்கோள் வீரர் வழங்கும் (நாங்கள் பயன்படுத்துகிறோம் [ஷெர்லாக் ஹோம்ஸ்](https://en.wikipedia.org/wiki/Sherlock_Holmes) மேற்கோள்கள்) மற்றும் வீரர் துல்லியமாக அதை தட்டச்சு செய்ய எவ்வளவு நேரம் எடுக்கும்
|
||||
|
||||
|
||||
|
||||
|
||||
## முன்நிபந்தனைகள்
|
||||
|
||||
பின்வரும் கருத்துகளை நீங்கள் நன்கு அறிந்திருப்பீர்கள் என்று இந்தப் பாடம் கருதுகிறது:
|
||||
|
||||
- உரை உள்ளீடு மற்றும் பொத்தான் கட்டுப்பாடுகளை உருவாக்குதல்
|
||||
- சிஎஸ்எஸ் மற்றும் வகுப்புகளைப் பயன்படுத்தி பாணிகளை அமைத்தல்
|
||||
- ஜாவாஸ்கிரிப்ட் அடிப்படைகள்
|
||||
- ஒரு வரிசையை உருவாக்குதல்
|
||||
- ஒரு சீரற்ற எண்ணை உருவாக்குதல்
|
||||
- நடப்பு நேரத்தைப் பெறுதல்
|
||||
|
||||
## பாடம்
|
||||
|
||||
[நிகழ்வு உந்துதல் நிரலாக்கத்தைப் பயன்படுத்தி தட்டச்சு விளையாட்டை உருவாக்குதல்](../README.md)
|
||||
|
||||
## கடன்கள்
|
||||
|
||||
[கிறிஸ்டோபர் ஹாரிசன்](http://www.twitter.com/geektrainer) அன்புடன் ♥️ எழுதினார்
|
||||
@ -0,0 +1,30 @@
|
||||
# Programação Orientada a Eventos - Construa um Jogo de Digitação
|
||||
|
||||
## Introdução
|
||||
|
||||
A digitação é uma das habilidades mais subestimadas do desenvolvedor. A capacidade de transferir rapidamente os pensamentos da sua cabeça para o seu editor permite que a criatividade flua livremente. Uma das melhores maneiras de aprender é jogar um jogo!
|
||||
|
||||
>Então, vamos construir um jogo de digitação!
|
||||
|
||||
Você usará as habilidades de JavaScript, HTML e CSS que desenvolveu até agora para criar um jogo de digitação. O jogo apresentará ao jogador uma citação aleatória (estamos usando [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) citações) e quanto tempo o jogador leva para digitá-lo com precisão. Você usará as habilidades de JavaScript, HTML e CSS que desenvolveu até agora para criar um jogo de digitação.
|
||||
|
||||
|
||||
|
||||
## Pré-requisitos
|
||||
|
||||
Esta lição pressupõe que você esteja familiarizado com os seguintes conceitos:
|
||||
|
||||
- Criação de textos de entrada e controles de botão
|
||||
- CSS e configuração de estilos usando classes
|
||||
- Noções básicas de JavaScript
|
||||
- Criação de array
|
||||
- Criação de número aleatório
|
||||
- Obtenção da hora atual
|
||||
|
||||
## Lição
|
||||
|
||||
[Criando um jogo de digitação usando programação orientada a eventos](./typing-game/README.md)
|
||||
|
||||
## Créditos
|
||||
|
||||
Escrito com ♥️ por [Christopher Harrison](http://www.twitter.com/geektrainer)
|
||||
@ -0,0 +1,29 @@
|
||||
# உலாவி நீட்டிப்பை உருவாக்குதல்
|
||||
|
||||
உலாவி நீட்டிப்புகளை உருவாக்குவது ஒரு வேடிக்கையான மற்றும் சுவாரஸ்யமான வழியாகும், அதே நேரத்தில் உங்கள் பயன்பாடுகளின் செயல்திறனைப் பற்றி சிந்திக்க வும், அதே நேரத்தில் வேறு வகையான வலை சொத்தை உருவாக்கவும்.உலாவிகள் எவ்வாறு வேலை செய்கின்றன மற்றும் உலாவி நீட்டிப்பை எவ்வாறு பயன்படுத்துவது, ஒரு படிவத்தை எவ்வாறு உருவாக்குவது, ஒரு ஏபிஐ ஐ அழைப்பது மற்றும் உள்ளூர் சேமிப்பகத்தை எவ்வாறு பயன்படுத்துவது மற்றும் உங்கள் வலைத்தளத்தின் செயல்திறனை எவ்வாறு அளவிடுவது மற்றும் அதை எவ்வாறு மேம்படுத்துவது என்பது பற்றிய பாடங்கள் இந்த தொகுதியில் அடங்கும்.
|
||||
|
||||
எட்ஜ், குரோம் மற்றும் பயர்பாக்ஸில் செயல்படும் உலாவி நீட்டிப்பை உருவாக்குவீர்கள். இந்த நீட்டிப்பு, ஒரு குறிப்பிட்ட பணிக்கு ஏற்ப வடிவமைக்கப்பட்ட ஒரு மினி வலைத் தளத்தைப் போன்றது, ஒரு குறிப்பிட்ட பிராந்தியத்தின் மின்சார பயன்பாடு மற்றும் கார்பன் தீவிரத்திற்காக [சி02 சிக்னல் ஏபிஐ](https://www.co2signal.com) சரிபார்க்கிறது, மேலும் பிராந்தியத்தின் கார்பன் தடத்தில் ஒரு வாசிப்பை அளிக்கிறது.
|
||||
|
||||
இந்த நீட்டிப்பு ஒரு பயனர் மூலம் தற்காலிக என்று அழைக்கலாம் ஒரு ஏபிஐ விசை மற்றும் பிராந்திய குறியீடு உள்ளூர் மின்சார பயன்பாட்டை தீர்மானிக்க ஒரு வடிவத்தில் உள்ளீடு மற்றும் அதன் மூலம் ஒரு பயனரின் மின்சார முடிவுகளை பாதிக்கக்கூடிய தரவை வழங்குகிறது. உதாரணமாக, உங்கள் பகுதியில் அதிக மின்சார பயன்பாடு காலத்தில் ஒரு துணி உலர்த்தி (ஒரு கார்பன் தீவிர செயல்பாடு) இயங்கும் தாமதப்படுத்த விரும்பத்தக்கதாக இருக்கலாம்.
|
||||
|
||||
### தலைப்புகளை
|
||||
|
||||
1. [உலாவி பற்றி](../1-about-browsers/README.md)
|
||||
2. [படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](../2-forms-browsers-local-storage/README.md)
|
||||
3. [பின்னணி பணிகள் மற்றும் செயல்திறன்](../3-background-tasks-and-performance/README.md)
|
||||
|
||||
### கடன்கள்
|
||||
|
||||
|
||||
|
||||
## கடன்கள்
|
||||
|
||||
இந்த வலை கார்பன் தூண்டுதலுக்கான யோசனை ஆசிம் ஹுசைன், கிரீன் கிளவுட் அட்வோசி குழுவின் மைக்ரோசாப்ட் முன்னணி மற்றும் [பசுமை கொள்கைகள்](https://principles.green/) ஆசிரியர் ஆகியோரால் வழங்கப்பட்டது. இது முதலில் ஒரு [வலை திட்டம்](https://github.com/jlooper/green).
|
||||
|
||||
உலாவி விரிவாக்கத்தின் கட்டமைப்பு [அடெபோலஅடெரானின் கோவிட் நீட்டிப்பு](https://github.com/onedebos/covtension) மூலம் தாக்கம் செலுத்தியது.
|
||||
|
||||
கலிபோர்னியா உமிழ்வுகளுக்கான [எனர்ஜி லாலிபாப்](https://energylollipop.com/) உலாவி நீட்டிப்பின் ஐகான் கட்டமைப்பால் 'டாட்' ஐகான் அமைப்புக்குபின்னால் உள்ள கருத்து பரிந்துரைக்கப்பட்டது.
|
||||
|
||||
|
||||
இந்த பாடங்கள் [ஜென் லூப்பர்](https://www.twitter.com/jenlooper) அன்புடன் எழுதப்பட்டன
|
||||
|
||||
@ -0,0 +1,388 @@
|
||||
# Construisez un jeu spatial, partie 3: Ajout de mouvement
|
||||
|
||||
## Quiz préalable
|
||||
|
||||
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33?loc=fr)
|
||||
|
||||
Les jeux ne sont pas très amusants tant que vous n'avez pas des extraterrestres qui courent à l'écran! Dans ce jeu, nous utiliserons deux types de mouvements:
|
||||
|
||||
- **Mouvement clavier/souris**: lorsque l'utilisateur interagit avec le clavier ou la souris pour déplacer un objet à l'écran.
|
||||
- **Mouvement induit par le jeu**: lorsque le jeu déplace un objet avec un certain intervalle de temps.
|
||||
|
||||
Alors, comment déplacer les choses sur un écran? Tout est question de coordonnées cartésiennes: nous changeons l'emplacement (x,y) de l'objet puis redessinons l'écran.
|
||||
|
||||
Généralement, vous devez suivre les étapes suivantes pour accomplir un *mouvement* sur un écran:
|
||||
|
||||
1. **Définir un nouvel emplacement** pour un objet; cela est nécessaire pour percevoir l'objet comme ayant bougé.
|
||||
2. **Effacer l'écran**, l'écran doit être dégagé entre les tirages. Nous pouvons l'effacer en dessinant un rectangle que nous remplissons avec une couleur de fond.
|
||||
3. **Redessiner l'objet** au nouvel emplacement. En faisant cela, nous accomplissons finalement le déplacement de l'objet d'un endroit à l'autre.
|
||||
|
||||
Voici à quoi cela peut ressembler dans le code:
|
||||
|
||||
```javascript
|
||||
//définir l'emplacement du héros
|
||||
hero.x += 5;
|
||||
// effacer le rectangle qui accueille le héros
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
// redessiner le fond du jeu et le héros
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
ctx.fillStyle = "black";
|
||||
ctx.drawImage(heroImg, hero.x, hero.y);
|
||||
```
|
||||
|
||||
✅ Pouvez-vous penser à une raison pour laquelle redessiner votre héros plusieurs images par seconde pourrait entraîner des coûts de performance? Apprenez en plus sur les [alternatives à ce modèle](https://www.html5rocks.com/en/tutorials/canvas/performance/).
|
||||
|
||||
## Gérer les événements du clavier
|
||||
|
||||
Vous gérez les événements en attachant des événements spécifiques au code. Les événements de clavier sont déclenchés sur toute la fenêtre tandis que les événements de souris comme un `clic` peuvent être liés au clic sur un élément spécifique. Nous utiliserons des événements de clavier tout au long de ce projet.
|
||||
|
||||
Pour gérer un événement, vous devez utiliser la méthode `addEventListener()` de la fenêtre et lui fournir deux paramètres d'entrée. Le premier paramètre est le nom de l'événement, par exemple `keyup`. Le deuxième paramètre est la fonction qui doit être invoquée à la suite de l'événement en cours.
|
||||
|
||||
Voici un exemple:
|
||||
|
||||
```javascript
|
||||
window.addEventListener('keyup', (evt) => {
|
||||
// `evt.key` = représentation sous forme de chaîne de la clé
|
||||
if (evt.key === 'ArrowUp') {
|
||||
// faire quelque chose
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Pour les événements clés, il existe deux propriétés sur l'événement que vous pouvez utiliser pour voir quelle touche a été pressée:
|
||||
|
||||
- `key`, il s'agit d'une représentation sous forme de chaîne de la touche enfoncée, par exemple `ArrowUp`
|
||||
- `keyCode`, c'est une représentation numérique, par exemple `37`, correspond à `ArrowLeft`.
|
||||
|
||||
✅ La manipulation des événements clés est utile en dehors du développement de jeux. A quelles autres utilisations pensez-vous pour cette technique?
|
||||
|
||||
### Touches spéciales: une mise en garde
|
||||
|
||||
Il y a des touches *spéciales* qui affectent la fenêtre. Cela signifie que si vous écoutez un événement `keyup` et que vous utilisez ces touches spéciales pour déplacer votre héros, il effectuera également un défilement horizontal. Pour cette raison, vous voudrez peut-être *désactiver* ce comportement de navigateur intégré lorsque vous créez votre jeu. Vous avez besoin d'un code comme celui-ci:
|
||||
|
||||
```javascript
|
||||
let onKeyDown = function (e) {
|
||||
console.log(e.keyCode);
|
||||
switch (e.keyCode) {
|
||||
case 37:
|
||||
case 39:
|
||||
case 38:
|
||||
case 40: // Touches directionnelles
|
||||
case 32:
|
||||
e.preventDefault();
|
||||
break; // Espace
|
||||
default:
|
||||
break; // ne pas bloquer d'autres clés
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
```
|
||||
|
||||
Le code ci-dessus garantira que les touches fléchées et la touche espace ont leur comportement *par défaut* désactivé. Le mécanisme *shut-off* se produit lorsque nous appelons `e.preventDefault()`.
|
||||
|
||||
## Mouvement induit par le jeu
|
||||
|
||||
Nous pouvons faire bouger les choses d'elles-mêmes en utilisant des minuteries telles que la fonction `setTimeout()` ou `setInterval()` qui met à jour l'emplacement de l'objet à chaque tick ou intervalle de temps. Voici à quoi cela peut ressembler:
|
||||
|
||||
```javascript
|
||||
let id = setInterval(() => {
|
||||
//déplacer l'ennemi sur l'axe y
|
||||
enemy.y += 10;
|
||||
})
|
||||
```
|
||||
|
||||
## La boucle du jeu
|
||||
|
||||
La boucle de jeu est un concept qui est essentiellement une fonction invoquée à intervalles réguliers. C'est ce qu'on appelle la boucle de jeu car tout ce qui doit être visible pour l'utilisateur est attiré dans la boucle. La boucle de jeu utilise tous les objets de jeu qui font partie du jeu, les dessinant tous à moins que, pour une raison quelconque, ils ne fassent plus partie du jeu. Par exemple, si un objet est un ennemi qui a été touché par un laser et qui explose, il ne fait plus partie de la boucle de jeu en cours (vous en apprendrez plus à ce sujet dans les leçons suivantes).
|
||||
|
||||
Voici à quoi ressemble généralement une boucle de jeu, exprimée en code:
|
||||
|
||||
```javascript
|
||||
let gameLoopId = setInterval(() =>
|
||||
function gameLoop() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawHero();
|
||||
drawEnemies();
|
||||
drawStaticObjects();
|
||||
}, 200);
|
||||
```
|
||||
|
||||
La boucle ci-dessus est invoquée toutes les `200` millisecondes pour redessiner le canevas. Vous avez la possibilité de choisir le meilleur intervalle qui a du sens pour votre jeu.
|
||||
|
||||
## Continuer le jeu spatial
|
||||
|
||||
Vous allez prendre le code existant et l'étendre. Soit commencez par le code que vous avez complété au cours de la partie I, soit utilisez le code de la [Partie II - starter](../your-work).
|
||||
|
||||
- **Déplacer le héros**: vous ajouterez du code pour vous assurer de pouvoir déplacer le héros à l'aide des touches fléchées.
|
||||
- **Déplacer les ennemis**: vous devrez également ajouter du code pour vous assurer que les ennemis se déplacent de haut en bas à un rythme donné.
|
||||
|
||||
## Étapes recommandées
|
||||
|
||||
Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Vous démarrez votre projet dans le dossier `your_work` en tapant:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis; rien ne bouge - pour l'instant!
|
||||
|
||||
### Ajouter un code
|
||||
|
||||
1. **Ajouter des objets dédiés** pour `hero` et `enemy` et `game object`, ils doivent avoir les propriétés `x` et `y`. (Rappelez-vous la partie sur l'[héritage ou la composition](../../translations/README.fr.md)).
|
||||
|
||||
*CONSEIL* `game object` (l'objet de jeu) doit être celui avec `x` et `y` et la possibilité de se dessiner sur un canevas.
|
||||
|
||||
>astuce: commencez par ajouter une nouvelle classe GameObject avec son constructeur délimité comme ci-dessous, puis dessinez-la sur le canevas:
|
||||
|
||||
```javascript
|
||||
|
||||
class GameObject {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.dead = false;
|
||||
this.type = "";
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.img = undefined;
|
||||
}
|
||||
|
||||
draw(ctx) {
|
||||
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Maintenant, étendez ce GameObject pour créer le héros et l'ennemi.
|
||||
|
||||
```javascript
|
||||
class Hero extends GameObject {
|
||||
constructor(x, y) {
|
||||
...it needs an x, y, type, and speed
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
class Enemy extends GameObject {
|
||||
constructor(x, y) {
|
||||
super(x, y);
|
||||
(this.width = 98), (this.height = 50);
|
||||
this.type = "Enemy";
|
||||
let id = setInterval(() => {
|
||||
if (this.y < canvas.height - this.height) {
|
||||
this.y += 5;
|
||||
} else {
|
||||
console.log('Stopped at', this.y)
|
||||
clearInterval(id);
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. **Ajoutez des gestionnaires d'événements de touche** pour gérer la navigation des touches (déplacez le héros vers le haut/bas vers la gauche/la droite)
|
||||
|
||||
*RAPPELEZ-VOUS* que c'est un système cartésien, le haut à gauche est `0,0`. N'oubliez pas également d'ajouter du code pour arrêter *le comportement par défaut*
|
||||
|
||||
>astuce: créez votre fonction onKeyDown et attachez-la à la fenêtre:
|
||||
|
||||
```javascript
|
||||
let onKeyDown = function (e) {
|
||||
console.log(e.keyCode);
|
||||
...add the code from the lesson above to stop default behavior
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
```
|
||||
|
||||
Vérifiez la console de votre navigateur à ce stade et regardez les frappes enregistrées.
|
||||
|
||||
3. **Implémentez** le [modèle Pub Sub](../../translations/README.fr.md), cela gardera votre code propre pendant que vous suivez les parties restantes.
|
||||
|
||||
Pour faire cette dernière partie, vous pouvez:
|
||||
|
||||
1. **Ajouter un écouteur d'événement** sur la fenêtre:
|
||||
|
||||
```javascript
|
||||
window.addEventListener("keyup", (evt) => {
|
||||
if (evt.key === "ArrowUp") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_UP);
|
||||
} else if (evt.key === "ArrowDown") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_DOWN);
|
||||
} else if (evt.key === "ArrowLeft") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_LEFT);
|
||||
} else if (evt.key === "ArrowRight") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
1. **Créez une classe EventEmitter** pour publier et vous abonner aux messages:
|
||||
|
||||
```javascript
|
||||
class EventEmitter {
|
||||
constructor() {
|
||||
this.listeners = {};
|
||||
}
|
||||
|
||||
on(message, listener) {
|
||||
if (!this.listeners[message]) {
|
||||
this.listeners[message] = [];
|
||||
}
|
||||
this.listeners[message].push(listener);
|
||||
}
|
||||
|
||||
emit(message, payload = null) {
|
||||
if (this.listeners[message]) {
|
||||
this.listeners[message].forEach((l) => l(message, payload));
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. **Ajoutez des constantes** et configurez l'EventEmitter:
|
||||
|
||||
```javascript
|
||||
const Messages = {
|
||||
KEY_EVENT_UP: "KEY_EVENT_UP",
|
||||
KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
|
||||
KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
|
||||
KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
|
||||
};
|
||||
|
||||
let heroImg,
|
||||
enemyImg,
|
||||
laserImg,
|
||||
canvas, ctx,
|
||||
gameObjects = [],
|
||||
hero,
|
||||
eventEmitter = new EventEmitter();
|
||||
```
|
||||
|
||||
1. **Initialiser le jeu**
|
||||
|
||||
```javascript
|
||||
function initGame() {
|
||||
gameObjects = [];
|
||||
createEnemies();
|
||||
createHero();
|
||||
|
||||
eventEmitter.on(Messages.KEY_EVENT_UP, () => {
|
||||
hero.y -= 5;
|
||||
})
|
||||
|
||||
eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
|
||||
hero.y += 5;
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
|
||||
hero.x -= 5;
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
|
||||
hero.x += 5;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
1. **Configurer la boucle de jeu**
|
||||
|
||||
Refactorisez la fonction window.onload pour initialiser le jeu et mettre en place une boucle de jeu sur un bon intervalle. Vous ajouterez également un faisceau laser:
|
||||
|
||||
```javascript
|
||||
window.onload = async () => {
|
||||
canvas = document.getElementById("canvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
heroImg = await loadTexture("assets/player.png");
|
||||
enemyImg = await loadTexture("assets/enemyShip.png");
|
||||
laserImg = await loadTexture("assets/laserRed.png");
|
||||
|
||||
initGame();
|
||||
let gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawGameObjects(ctx);
|
||||
}, 100)
|
||||
|
||||
};
|
||||
```
|
||||
|
||||
5. **Ajoutez du code** pour déplacer les ennemis à un certain intervalle
|
||||
|
||||
Refactoriser la fonction `createEnemies()` pour créer les ennemis et les pousser dans la nouvelle classe gameObjects:
|
||||
|
||||
```javascript
|
||||
function createEnemies() {
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
const enemy = new Enemy(x, y);
|
||||
enemy.img = enemyImg;
|
||||
gameObjects.push(enemy);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
et ajoutez une fonction `createHero()` pour faire un processus similaire pour le héros.
|
||||
|
||||
```javascript
|
||||
function createHero() {
|
||||
hero = new Hero(
|
||||
canvas.width / 2 - 45,
|
||||
canvas.height - canvas.height / 4
|
||||
);
|
||||
hero.img = heroImg;
|
||||
gameObjects.push(hero);
|
||||
}
|
||||
```
|
||||
|
||||
et enfin, ajoutez une fonction `drawGameObjects()` pour démarrer le dessin:
|
||||
|
||||
```javascript
|
||||
function drawGameObjects(ctx) {
|
||||
gameObjects.forEach(go => go.draw(ctx));
|
||||
}
|
||||
```
|
||||
|
||||
Vos ennemis devraient commencer à avancer sur votre vaisseau spatial héros!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Comme vous pouvez le constater, votre code peut se transformer en 'code spaghetti' lorsque vous commencez à ajouter des fonctions, des variables et des classes. Comment pouvez-vous mieux organiser votre code pour qu'il soit plus lisible? Esquissez un système pour organiser votre code, même s'il réside toujours dans un seul fichier.
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
|
||||
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34?loc=fr)
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
Pendant que nous écrivons notre jeu sans utiliser de frameworks, il existe de nombreux frameworks de canevas basés sur JavaScript pour le développement de jeux. Prenez le temps de faire quelques [lectures à ce sujet](https://github.com/collections/javascript-game-engines).
|
||||
|
||||
## Affectation
|
||||
|
||||
[Commentez votre code](assignment.fr.md)
|
||||
@ -0,0 +1,297 @@
|
||||
# Construire un jeu spatial Partie 4: Ajouter un laser et détecter les collisions
|
||||
|
||||
## Quiz préalable
|
||||
|
||||
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=fr)
|
||||
|
||||
Dans cette leçon, vous apprendrez à tirer des lasers avec JavaScript! Nous ajouterons deux choses à notre jeu:
|
||||
|
||||
- **Un laser**: ce laser est tiré depuis le vaisseau de vos héros et verticalement vers le haut
|
||||
- **La détection de collision**, dans le cadre de la mise en œuvre de la possibilité de *tirer*, nous ajouterons également quelques règles de jeu intéressantes:
|
||||
- **Le laser frappe l'ennemi**: L'ennemi meurt s'il est touché par un laser
|
||||
- **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de l'écran
|
||||
- **Collision entre ennemis et héros**: Un ennemi et le héros sont détruits s'ils se frappent
|
||||
- **L'ennemi touche le bas de l'écran**: Un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran
|
||||
|
||||
En bref, vous -- *le héros* -- devez frapper tous les ennemis avec un laser avant qu'ils ne parviennent à se déplacer vers le bas de l'écran.
|
||||
|
||||
✅ Faites une petite recherche sur le tout premier jeu vidéo jamais écrit. Quelle était sa fonctionnalité?
|
||||
|
||||
Soyons héroïques ensemble!
|
||||
|
||||
## La détection de collision
|
||||
|
||||
Comment fait-on la détection de collision? Nous devons penser à nos objets de jeu comme des rectangles se déplaçant. Pourquoi vous pourriez vous demander? Eh bien, l'image utilisée pour dessiner un objet de jeu est un rectangle: il a un `x`, `y`, `width` et `height`.
|
||||
|
||||
Si deux rectangles, c'est-à-dire un héros et un ennemi *se croisent*, vous avez une collision. Ce qui devrait arriver alors dépend des règles du jeu. Pour implémenter la détection de collision, vous avez donc besoin des éléments suivants:
|
||||
|
||||
1. Un moyen d'obtenir une représentation rectangulaire d'un objet de jeu, quelque chose comme ça:
|
||||
|
||||
```javascript
|
||||
rectFromGameObject() {
|
||||
return {
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. Une fonction de comparaison, cette fonction peut ressembler à ceci:
|
||||
|
||||
```javascript
|
||||
function intersectRect(r1, r2) {
|
||||
return !(r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top);
|
||||
}
|
||||
```
|
||||
|
||||
## Comment détruire les objets
|
||||
|
||||
Pour détruire des objets dans un jeu, vous devez faire savoir au jeu qu'il ne doit plus afficher cet objet dans la boucle de jeu qui se déclenche à un certain intervalle. Une façon de faire est de marquer un objet de jeu comme *mort* quand quelque chose se passe, comme ceci:
|
||||
|
||||
```javascript
|
||||
// la collision s'est produite
|
||||
enemy.dead = true
|
||||
```
|
||||
|
||||
Ensuite, vous procédez au tri des objets *morts* avant de repeindre l'écran, comme ceci:
|
||||
|
||||
```javascript
|
||||
gameObjects = gameObject.filter(go => !go.dead);
|
||||
```
|
||||
|
||||
## Comment tirons-nous un laser
|
||||
|
||||
Tirer un laser se traduit par répondre à un événement clé et créer un objet qui se déplace dans une certaine direction. Nous devons donc effectuer les étapes suivantes:
|
||||
|
||||
1. **Créez un objet laser**: du haut du vaisseau de notre héros, celui-ci commence à se déplacer vers le haut de l'écran lors de sa création.
|
||||
2. **Attacher un code à un événement clé**: nous devons choisir une touche du clavier qui représente le joueur tirant le laser.
|
||||
3. **Créez un objet de jeu qui ressemble à un laser** lorsque la touche est enfoncée.
|
||||
|
||||
## Cooldown sur notre laser
|
||||
|
||||
Le laser doit se déclencher à chaque fois que vous appuyez sur une touche, comme *espace* par exemple. Pour éviter que le jeu ne produise trop de lasers en peu de temps, nous devons résoudre ce problème. La solution consiste à implémenter un soi-disant *cooldown*(temps de recharge), une minuterie, qui garantit qu'un laser ne peut être tiré aussi souvent. Vous pouvez implémenter cela de la manière suivante:
|
||||
|
||||
```javascript
|
||||
class Cooldown {
|
||||
constructor(time) {
|
||||
this.cool = false;
|
||||
setTimeout(() => {
|
||||
this.cool = true;
|
||||
}, time)
|
||||
}
|
||||
}
|
||||
|
||||
class Weapon {
|
||||
constructor {
|
||||
}
|
||||
fire() {
|
||||
if (!this.cooldown || this.cooldown.cool) {
|
||||
// produire un laser
|
||||
this.cooldown = new Cooldown(500);
|
||||
} else {
|
||||
// ne rien faire - il n'a pas encore refroidi.
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
✅ Reportez-vous à la leçon 1 de la série de jeux spatiaux pour vous rappeler des *temps de recharge*
|
||||
|
||||
## Que construire
|
||||
|
||||
Vous allez prendre le code existant (que vous avez dû nettoyer et refactoriser) de la leçon précédente et l'étendre. Commencez par le code de la partie II ou utilisez le code de la [partie III - démarreur](../../your-work).
|
||||
|
||||
> astuce: le laser avec lequel vous allez travailler est déjà dans votre dossier assets et référencé par votre code
|
||||
|
||||
- **Ajoutez la détection de collision**, lorsqu'un laser entre en collision avec quelque chose, les règles suivantes doivent s'appliquer:
|
||||
1. **Le laser touche l'ennemi**: l'ennemi meurt s'il est touché par un laser
|
||||
2. **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de notre écran
|
||||
3. **Collision ennemi et héros**: un ennemi et le héros sont détruits s'ils se frappent
|
||||
4. **L'ennemi touche le bas de l'écran**: un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran
|
||||
|
||||
## Étapes recommandées
|
||||
|
||||
Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Vous démarrez votre projet dans le dossier `your_work` en tapant:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis, rien ne bouge - pour le moment :).
|
||||
|
||||
### Ajouter un code
|
||||
|
||||
1. **Configurez une représentation rectangulaire de votre objet de jeu, pour gérer les collisions** Le code ci-dessous vous permet d'obtenir une représentation rectangulaire d'un `GameObject`. Modifiez votre classe GameObject pour l'étendre:
|
||||
|
||||
```javascript
|
||||
rectFromGameObject() {
|
||||
return {
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
2. **Ajouter du code qui vérifie la collision** Il s'agira d'une nouvelle fonction qui teste si deux rectangles se croisent:
|
||||
|
||||
```javascript
|
||||
function intersectRect(r1, r2) {
|
||||
return !(
|
||||
r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
3. **Ajouter une capacité de tir laser **
|
||||
1. **Ajouter un message d'événement clé**. La touche *espace* devrait créer un laser juste au-dessus du vaisseau héros. Ajoutez trois constantes dans l'objet Messages:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
|
||||
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
|
||||
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
|
||||
```
|
||||
|
||||
1. **Manipuler la touche espace**. Modifiez la fonction keyup `window.addEventListener` pour gérer les espaces:
|
||||
|
||||
```javascript
|
||||
} else if(evt.keyCode === 32) {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
|
||||
}
|
||||
```
|
||||
|
||||
1. **Ajouter des auditeurs**. Modifiez la fonction `initGame()` pour vous assurer que le héros peut se déclencher lorsque la barre d'espace est enfoncée:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
|
||||
if (hero.canFire()) {
|
||||
hero.fire();
|
||||
}
|
||||
```
|
||||
|
||||
et ajoutez une nouvelle fonction `eventEmitter.on()` pour assurer le comportement lorsqu'un ennemi entre en collision avec un laser:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
})
|
||||
```
|
||||
|
||||
1. **Déplacez l'objet**, assurez-vous que le laser se déplace progressivement vers le haut de l'écran. Vous allez créer une nouvelle classe Laser qui étend `GameObject`, comme vous l'avez fait auparavant:
|
||||
|
||||
```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)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. **Gérer les collisions**, Implémenter les règles de collision pour le laser. Ajouter une fonction `updateGameObjects()` qui teste les objets en collision pour les hits
|
||||
|
||||
```javascript
|
||||
function updateGameObjects() {
|
||||
const enemies = gameObjects.filter(go => go.type === 'Enemy');
|
||||
const lasers = gameObjects.filter((go) => go.type === "Laser");
|
||||
// laser hit something
|
||||
lasers.forEach((l) => {
|
||||
enemies.forEach((m) => {
|
||||
if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
|
||||
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
|
||||
first: l,
|
||||
second: m,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
gameObjects = gameObjects.filter(go => !go.dead);
|
||||
}
|
||||
```
|
||||
|
||||
Assurez-vous d'ajouter `updateGameObjects()` dans votre boucle de jeu dans `window.onload`.
|
||||
|
||||
4. **Mettez en place un temps de recharge (cooldown)** sur le laser, de sorte qu'il ne peut être tiré qu'un certain temps.
|
||||
|
||||
Enfin, modifiez la classe de héros afin qu'elle puisse se recharger:
|
||||
|
||||
```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;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
À ce stade, votre jeu a quelques fonctionnalités! Vous pouvez naviguer avec vos touches fléchées, tirer un laser avec votre barre d'espace et les ennemis disparaissent lorsque vous les frappez. Bien joué!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Ajoutez une explosion! Jetez un œil aux ressources du jeu dans [le référentiel Space Art](../../solution/spaceArt/readme.txt) et essayez d'ajouter une explosion lorsque le laser frappe un extraterrestre
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
|
||||
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=fr)
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
Faites des expériences avec les intervalles de votre jeu à ce stade. Que se passe-t-il lorsque vous les modifiez? En savoir plus sur les [événements de minutage JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
|
||||
|
||||
## Affectation
|
||||
|
||||
[Explorer les collisions](assignment.fr.md)
|
||||
@ -0,0 +1,31 @@
|
||||
# விண்வெளி விளையாட்டை உருவாக்கு
|
||||
|
||||
மேலும் மேம்பட்ட ஜாவாஸ்கிரிப்ட் அடிப்படைகளை கற்பிக்க ஒரு விண்வெளி விளையாட்டு
|
||||
|
||||
இந்த பாடத்தில் உங்கள் சொந்த விண்வெளி விளையாட்டை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் கற்றுக்கொள்ளலாம். நீங்கள் எப்போதாவது "விண்வெளி படையெடுப்பாளர்கள்" விளையாட்டை விளையாடியிருந்தால், இந்த விளையாட்டு அதே யோசனையைக் கொண்டுள்ளது: மேலே இருந்து கீழே வரும் அரக்கர்கள் மீது ஒரு விண்கலம் மற்றும் தீ. இங்கே முடிக்கப்பட்ட விளையாட்டு எப்படி இருக்கும்:
|
||||
|
||||
|
||||
|
||||
இந்த ஆறு பாடங்களில் நீங்கள் பின்வருவனவற்றைக் கற்றுக்கொள்ளலாம்:
|
||||
|
||||
- **தொடர்பு** ஒரு திரையில் விஷயங்களை வரைய கேன்வாஸ் உறுப்பு
|
||||
- **புரிந்து** கார்ட்டீசியன் ஒருங்கிணைப்பு அமைப்பு
|
||||
- **கற்றுக்கொள்ளுங்கள்** பராமரிக்க மற்றும் நீட்டிக்க எளிதான ஒலி விளையாட்டு கட்டிடக்கலை உருவாக்க பப்-துணை முறை
|
||||
- **நெம்புகோலியக்கம்** ஒத்திசைவு / விளையாட்டு வளங்களை ஏற்ற காத்திருக்கிறது
|
||||
- **கையாள** விசைப்பலகை நிகழ்வுகள்
|
||||
|
||||
## கண்ணோட்டம்
|
||||
|
||||
- புனைவி
|
||||
- [ஜாவாஸ்கிரிப்ட் மூலம் விளையாட்டுகளை உருவாக்குவதற்கான அறிமுகம்](../1-introduction/README.md)
|
||||
- Practice
|
||||
- [கேன்வாஸ் வரைதல்](../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/.
|
||||
நீங்கள் விளையாட்டுகளை உருவாக்குகிறீர்கள் என்றால், இவை சில தீவிரமான நல்ல சொத்துக்கள், நிறைய இலவசம் மற்றும் சில பணம் செலுத்தப்படுகின்றன.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue