diff --git a/translated_images/1.b6da8c1394b07491.hr.png b/translated_images/1.b6da8c1394b07491.hr.png new file mode 100644 index 000000000..6a84d2241 Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.hr.png differ diff --git a/translated_images/1.b6da8c1394b07491.lt.png b/translated_images/1.b6da8c1394b07491.lt.png new file mode 100644 index 000000000..1270cbc1e Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.lt.png differ diff --git a/translated_images/1.b6da8c1394b07491.my.png b/translated_images/1.b6da8c1394b07491.my.png new file mode 100644 index 000000000..7e9691026 Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.my.png differ diff --git a/translated_images/1.b6da8c1394b07491.sl.png b/translated_images/1.b6da8c1394b07491.sl.png new file mode 100644 index 000000000..bbc78269e Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.sl.png differ diff --git a/translated_images/1.b6da8c1394b07491.ta.png b/translated_images/1.b6da8c1394b07491.ta.png new file mode 100644 index 000000000..29f173d02 Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.ta.png differ diff --git a/translated_images/1.b6da8c1394b07491.uk.png b/translated_images/1.b6da8c1394b07491.uk.png new file mode 100644 index 000000000..f34f12f4a Binary files /dev/null and b/translated_images/1.b6da8c1394b07491.uk.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.hr.png b/translated_images/1.cc07a5cbe114ad1d.hr.png new file mode 100644 index 000000000..8d00dd08e Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.hr.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.lt.png b/translated_images/1.cc07a5cbe114ad1d.lt.png new file mode 100644 index 000000000..f5fecd9c5 Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.lt.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.my.png b/translated_images/1.cc07a5cbe114ad1d.my.png new file mode 100644 index 000000000..a0be9f746 Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.my.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.sl.png b/translated_images/1.cc07a5cbe114ad1d.sl.png new file mode 100644 index 000000000..e1d584d86 Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.sl.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.ta.png b/translated_images/1.cc07a5cbe114ad1d.ta.png new file mode 100644 index 000000000..275ab774b Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.ta.png differ diff --git a/translated_images/1.cc07a5cbe114ad1d.uk.png b/translated_images/1.cc07a5cbe114ad1d.uk.png new file mode 100644 index 000000000..beb8f6d3f Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d.uk.png differ diff --git a/translated_images/2.1dae52ff08042246.hr.png b/translated_images/2.1dae52ff08042246.hr.png new file mode 100644 index 000000000..944019f06 Binary files /dev/null and b/translated_images/2.1dae52ff08042246.hr.png differ diff --git a/translated_images/2.1dae52ff08042246.lt.png b/translated_images/2.1dae52ff08042246.lt.png new file mode 100644 index 000000000..3be900f13 Binary files /dev/null and b/translated_images/2.1dae52ff08042246.lt.png differ diff --git a/translated_images/2.1dae52ff08042246.my.png b/translated_images/2.1dae52ff08042246.my.png new file mode 100644 index 000000000..c620de22a Binary files /dev/null and b/translated_images/2.1dae52ff08042246.my.png differ diff --git a/translated_images/2.1dae52ff08042246.sl.png b/translated_images/2.1dae52ff08042246.sl.png new file mode 100644 index 000000000..a2c504790 Binary files /dev/null and b/translated_images/2.1dae52ff08042246.sl.png differ diff --git a/translated_images/2.1dae52ff08042246.ta.png b/translated_images/2.1dae52ff08042246.ta.png new file mode 100644 index 000000000..a933ffc0d Binary files /dev/null and b/translated_images/2.1dae52ff08042246.ta.png differ diff --git a/translated_images/2.1dae52ff08042246.uk.png b/translated_images/2.1dae52ff08042246.uk.png new file mode 100644 index 000000000..9004584cd Binary files /dev/null and b/translated_images/2.1dae52ff08042246.uk.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hr.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hr.png new file mode 100644 index 000000000..07f0f57f8 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hr.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.lt.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.lt.png new file mode 100644 index 000000000..76e0510fd Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.lt.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.my.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.my.png new file mode 100644 index 000000000..2987eed9f Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.my.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.sl.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.sl.png new file mode 100644 index 000000000..45ebfd85d Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.sl.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ta.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ta.png new file mode 100644 index 000000000..8f5f99822 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ta.png differ diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.uk.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.uk.png new file mode 100644 index 000000000..d6b1fd2a6 Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.uk.png differ diff --git a/translated_images/background.148a8d43afde5730.hr.png b/translated_images/background.148a8d43afde5730.hr.png new file mode 100644 index 000000000..7b43a0de6 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.hr.png differ diff --git a/translated_images/background.148a8d43afde5730.lt.png b/translated_images/background.148a8d43afde5730.lt.png new file mode 100644 index 000000000..7dc2fd493 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.lt.png differ diff --git a/translated_images/background.148a8d43afde5730.my.png b/translated_images/background.148a8d43afde5730.my.png new file mode 100644 index 000000000..ed0ae9259 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.my.png differ diff --git a/translated_images/background.148a8d43afde5730.sl.png b/translated_images/background.148a8d43afde5730.sl.png new file mode 100644 index 000000000..58c046d6f Binary files /dev/null and b/translated_images/background.148a8d43afde5730.sl.png differ diff --git a/translated_images/background.148a8d43afde5730.ta.png b/translated_images/background.148a8d43afde5730.ta.png new file mode 100644 index 000000000..8338a8134 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.ta.png differ diff --git a/translated_images/background.148a8d43afde5730.uk.png b/translated_images/background.148a8d43afde5730.uk.png new file mode 100644 index 000000000..0bc68dfe3 Binary files /dev/null and b/translated_images/background.148a8d43afde5730.uk.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.hr.png b/translated_images/backgroundColor.e19c3c60768150c8.hr.png new file mode 100644 index 000000000..3bd93a532 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.hr.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.lt.png b/translated_images/backgroundColor.e19c3c60768150c8.lt.png new file mode 100644 index 000000000..3bd93a532 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.lt.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.my.png b/translated_images/backgroundColor.e19c3c60768150c8.my.png new file mode 100644 index 000000000..3bd93a532 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.my.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.sl.png b/translated_images/backgroundColor.e19c3c60768150c8.sl.png new file mode 100644 index 000000000..3bd93a532 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.sl.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.ta.png b/translated_images/backgroundColor.e19c3c60768150c8.ta.png new file mode 100644 index 000000000..3bd93a532 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.ta.png differ diff --git a/translated_images/backgroundColor.e19c3c60768150c8.uk.png b/translated_images/backgroundColor.e19c3c60768150c8.uk.png new file mode 100644 index 000000000..3bd93a532 Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8.uk.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.hr.png b/translated_images/browser-console.efaf0b51aaaf6778.hr.png new file mode 100644 index 000000000..35c49be00 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.hr.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.lt.png b/translated_images/browser-console.efaf0b51aaaf6778.lt.png new file mode 100644 index 000000000..776d3dc76 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.lt.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.my.png b/translated_images/browser-console.efaf0b51aaaf6778.my.png new file mode 100644 index 000000000..b9a251144 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.my.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.sl.png b/translated_images/browser-console.efaf0b51aaaf6778.sl.png new file mode 100644 index 000000000..00a2902f7 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.sl.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.ta.png b/translated_images/browser-console.efaf0b51aaaf6778.ta.png new file mode 100644 index 000000000..e00291075 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.ta.png differ diff --git a/translated_images/browser-console.efaf0b51aaaf6778.uk.png b/translated_images/browser-console.efaf0b51aaaf6778.uk.png new file mode 100644 index 000000000..71e5706a7 Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf6778.uk.png differ diff --git a/translated_images/browser.60317c9be8b7f84a.hr.jpg b/translated_images/browser.60317c9be8b7f84a.hr.jpg new file mode 100644 index 000000000..cef7412f0 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.hr.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.lt.jpg b/translated_images/browser.60317c9be8b7f84a.lt.jpg new file mode 100644 index 000000000..0f79dc310 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.lt.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.my.jpg b/translated_images/browser.60317c9be8b7f84a.my.jpg new file mode 100644 index 000000000..0e181fd37 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.my.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.sl.jpg b/translated_images/browser.60317c9be8b7f84a.sl.jpg new file mode 100644 index 000000000..9cd4a32c3 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.sl.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.ta.jpg b/translated_images/browser.60317c9be8b7f84a.ta.jpg new file mode 100644 index 000000000..826b6ac7d Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.ta.jpg differ diff --git a/translated_images/browser.60317c9be8b7f84a.uk.jpg b/translated_images/browser.60317c9be8b7f84a.uk.jpg new file mode 100644 index 000000000..7ba79a3b7 Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84a.uk.jpg differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.hr.png b/translated_images/canvas.fbd605ff8e5b8aff.hr.png new file mode 100644 index 000000000..0faf371f3 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.hr.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.lt.png b/translated_images/canvas.fbd605ff8e5b8aff.lt.png new file mode 100644 index 000000000..9e0518afb Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.lt.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.my.png b/translated_images/canvas.fbd605ff8e5b8aff.my.png new file mode 100644 index 000000000..c4f09201e Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.my.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.sl.png b/translated_images/canvas.fbd605ff8e5b8aff.sl.png new file mode 100644 index 000000000..d46c38253 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.sl.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.ta.png b/translated_images/canvas.fbd605ff8e5b8aff.ta.png new file mode 100644 index 000000000..bfe090bef Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.ta.png differ diff --git a/translated_images/canvas.fbd605ff8e5b8aff.uk.png b/translated_images/canvas.fbd605ff8e5b8aff.uk.png new file mode 100644 index 000000000..6f8a05012 Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff.uk.png differ diff --git a/translations/ta/7-bank-project/3-data/assignment.md b/translations/ta/7-bank-project/3-data/assignment.md index 8e1c37c64..4104d89f8 100644 --- a/translations/ta/7-bank-project/3-data/assignment.md +++ b/translations/ta/7-bank-project/3-data/assignment.md @@ -1,29 +1,144 @@ -# உங்கள் கோ드를 மறுசீரமைத்து கருத்துரைகளைச் சேர்க்கவும் +# குறியீட்டுத் திருத்தம் மற்றும் ஆவணம் பணிகள் -## வழிமுறைகள் +## கற்றல் நோக்கங்கள் -உங்கள் கோட்படம் வளர்ந்துகொண்டே இருக்கும் போது, அதை வாசிக்க எளிதாகவும் பராமரிக்க எளிதாகவும் இருக்க, உங்கள் கோடுகளை அடிக்கடி மறுசீரமைக்க வேண்டும். உங்கள் `app.js` கோடின் தரத்தை மேம்படுத்த, கருத்துரைகளைச் சேர்த்து மறுசீரமைக்கவும்: +இந்த பணியை முடிப்பதன் மூலம், நீங்கள் தொழில்முனைவர் சோதனையாளர்கள் தினமும் பயன்படுத்தும் அவசியமான மென்பொருள் மேம்பாட்டுத் திறன்களை பயிற்சி பெறுவீர்கள். நீண்டநேர பயன்பாட்டிற்கு ஏற்ப குறியீட்டை அமைக்க, மறுபடியும் எழுதுதலை குறைக்க உரிய செயற்பாடுகளை கற்றுக்கொள்ளவும், உங்கள் பணி எதிர்கால மேம்பாட்டாளர்களுக்காக (உட்பட உங்கள் தானேயும்!) ஆவணம் உருவாக்கவும் கற்றுக்கொள்வீர்கள். -- சர்வர் API அடிப்படை URL போன்ற நிலையான மதிப்புகளை பிரிக்கவும் -- ஒரே மாதிரியான கோடுகளை ஒருங்கிணைக்கவும்: உதாரணமாக, `createAccount()` மற்றும் `getAccount()` இரண்டிலும் பயன்படுத்தப்படும் கோடுகளை ஒருங்கிணைக்க `sendRequest()` என்ற ஒரு செயல்பாட்டை உருவாக்கலாம் -- கோடுகளை வாசிக்க எளிதாக இருக்க reorganize செய்யவும், மேலும் கருத்துரைகளைச் சேர்க்கவும் +சுத்தம் செய்யப்பட்ட, நல்ல முறையில் ஆவணம் செய்யப்பட்ட குறியீடு என்பது பல மேம்பாட்டாளர்கள் சேர்ந்து பணியாற்றும் மற்றும் குறியீட்டு தளங்கள் காலப்போக்கில் வளர்க்கப்படும் உண்மைப் புவி வலை பயன்பாட்டு அட்டவணைகளுக்கு மிகவும் அவசியமாகும். -## மதிப்பீட்டு அளவுகோல் +## பணியின் கண்ணோட்டம் -| அளவுகோல் | சிறந்தது | போதுமானது | மேம்பாடு தேவை | -| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| | கோடு கருத்துரைகள் சேர்க்கப்பட்டு, வெவ்வேறு பிரிவுகளில் நன்றாக ஒழுங்குபடுத்தப்பட்டு, வாசிக்க எளிதாக உள்ளது. நிலையான மதிப்புகள் பிரிக்கப்பட்டு, ஒருங்கிணைக்கப்பட்ட `sendRequest()` செயல்பாடு உருவாக்கப்பட்டுள்ளது. | கோடு சுத்தமாக உள்ளது, ஆனால் மேலும் கருத்துரைகள், நிலையான மதிப்புகளை பிரித்தல் அல்லது ஒருங்கிணைப்பு மூலம் மேம்படுத்தலாம். | கோடு குழப்பமாக உள்ளது, கருத்துரைகள் சேர்க்கப்படவில்லை, நிலையான மதிப்புகள் பிரிக்கப்படவில்லை மற்றும் கோடு ஒருங்கிணைக்கப்படவில்லை. | +உங்கள் வங்கியாளர்ப்பயன்பாட்டின் `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} - Resolves when login process completes + */ +async function login(event) { + // ஜாவாச்கிரிப்டுடன் கையாள தொடங்குவதற்கு பிற்போக்கு படிவ சமர்ப்பிப்பை தடுக்கும் + event.preventDefault(); + + // உங்கள் செயலாக்கம்... +} +``` + +## வெற்றிமிகு அளவுகோல்கள் + +உங்கள் திருத்தப்பட்ட குறியீடு கீழ்க்காணும் தொழில்முறை மேம்பாட்டு நடைமுறைகளை காட்ட வேண்டும்: + +### சிறந்த செயல்பாடு +- ✅ **நிலைகளும் வடிவமைப்பும்**: அனைத்து முக்கியச் சரங்களை மற்றும் URL-களை தெளிவான பெயர்களுடன் நிலையாக பிரித்தெடுக்கப்பட்டுள்ளது +- ✅ **DRY கொள்கை**: பொது கோரிக்கை தத்துவம் மீண்டும் பயன்படுத்தக்கூடிய `sendRequest()` செயல்பாட்டில் ஒற்றி ஒருங்கிணைக்கப்பட்டுள்ளன +- ✅ **ஆவணப்படுத்தல்**: செயல்பாடுகள் நோக்கம் மற்றும் அளவுருக்களை விளக்கும் தெளிவான JSDoc கருத்துக்களுடன் உள்ளன +- ✅ **அமைப்பு**: குறியீடு பகுதி தலைப்புகளுடன் இயக்க வழக்கு முறையில் தொகுக்கப்பட்டுள்ளது மற்றும் ஒருமைத்தன்மை கொண்ட வடிவமைப்பு உள்ளது +- ✅ **பிழை கையாளுதல்**: புதிய கோரிக்கை செயல்பாட்டை பயன்படுத்தி மேம்பட்ட பிழை கையாளுதல் உள்ளது + +### போதுமான செயல்பாடு +- ✅ **நிலைகள்**: பெரும்பாலான மீண்டும் பயன்படுத்தப்படும் மதிப்புகள் பிரிக்கப்பட்டுள்ளன, சில சிறிய நேரடிப் மதிப்புக்களே உள்ளன +- ✅ **வகுத்தல்**: அடிப்படை `sendRequest()` செயல்பாடு உருவாக்கப்பட்டுள்ளது, ஆனால் அனைத்து மாறுபாடுகளையும் கையாளக் கூடாது +- ✅ **கருத்துக்கள்**: முக்கிய செயல்பாடுகள் ஆவணப்படுத்தப்பட்டுள்ளன, சில விளக்கங்கள் இன்னும் முழுமையாக இருக்கலாம் +- ✅ **வாசிப்புத் தன்மை**: குறியீடு பொதுவாக நன்கு ஒழுங்குபடுத்தப்பட்டுள்ளதுடன் மேம்படுத்த வேண்டிய பகுதிகள் உள்ளன + +### மேம்படுத்த வேண்டியது +- ❌ **நிலைகள்**: கோப்பில் பல முக்கிய சரங்கள் மற்றும் URL-கள் நேரடியாக உள்ளன +- ❌ **மறு எழுதுதல்**: ஒற்றுமையான செயல்களுக்கு இடையில் அதிகளவிலான குறியீட்டு நகல் உள்ளது +- ❌ **ஆவணப்படுத்தல்**: குறியீட்டின் நோக்கம் விளக்காத அல்லது போதும் அளவில் இல்லாத கருத்துக்கள் +- ❌ **அமைப்பு**: குறியீடு தெளிவான அமைப்பு மற்றும் காரணமான குழுவாக்கம் இல்லாமல் உள்ளது + +## உங்கள் திருத்தப்பட்ட குறியீட்டை சோதனை செய்யவும் + +திருத்தத்திற்குப் பிறகு, உங்கள் வங்கியாளர் பயன்பாடு சரியான முறையில் இயங்குகிறதா என்பதை உறுதிப்படுத்துக: + +1. **எல்லா பயனர் ஓட்டுகளும் சோதனை செய்யவும்**: பதிவு, உள்நுழைவு, டாஷ்போர்ட் காட்சி மற்றும் பிழை கையாளுதல் +2. **API அழைப்புகளை சரிபார்க்கவும்**: உங்கள் `sendRequest()` செயல்பாடு கணக்கு உருவாக்கவும் பெறவும் சரியாக செயல்படுவதை உறுதிப்படுத்த +3. **பிழை நிலைகள் சோதனை செய்யவும்**: தவறான அங்கீகார விவரங்கள் மற்றும் நெட்வொர்க் பிழைகளுடன் சோதனை செய்யவும் +4. **கான்சோல் வெளியீட்டை பரிசீலனை செய்யவும்**: திருத்தத்தின் போது புதிய பிழைகள் அறிமுகம் செய்யப்படவில்லை என்பதைக் கண்டறியவும் + +## சமர்ப்பிக்க வழிகாட்டல்கள் + +உங்கள் திருத்தப்பட்ட `app.js` கோப்பை பின்வருமாறு சமர்ப்பிக்கவும்: +- வெவ்வேறு செயல்பாடுகளை ஒழுங்குபடுத்தும் தெளிவான பிரிவு தலைப்புகள் +- ஒருமைத்தன்மையான குறியீடு வடிவமைப்பு மற்றும் இடைவெளிகள் +- அனைத்து செயல்பாடுகளுக்குமான முழுமையான JSDoc ஆவணங்கள் +- மேல் பகுதியில் உங்கள் திருத்த முறையை விளக்கும் சுருக்கமான கருத்து + +**விரும்பத்தக்க சவால்**: உங்கள் பயன்பாட்டின் கட்டமைப்பையும் வெவ்வேறு செயல்பாடுகள் ஒன்றிணைந்து எப்படி வேலை செய்கின்றன என்பதையும் விளக்கும் எளிய குறியீடு ஆவணத் தொகுப்பை (`CODE_STRUCTURE.md`) உருவாக்கவும். + +## உண்மை உலகின் தொடர்பு + +இந்த பணி தொழில்முறை மேம்பாட்டாளர்கள் அடிக்கடி செய்யும் குறியீட்டு பராமரிப்பு வகையை பிரதிபலிக்கிறது. தொழில்துறை சூழலில்: +- **குறியீடு ஆய்வுகள்** இந்த பணிக்கு ஒத்த வாசிப்புத் திறன் மற்றும் பராமரிப்பு திறனை மதிப்பிடும் +- **தொழில்நுட்ப கடன்** குறியீடு முறையாக திருத்தப்பட்டு ஆவணம் செய்யப்படாதபோது கூடும் +- **குழு ஒத்துழைப்பு** தெளிவாக மற்றும் நன்கு ஆவணப்படுத்தப்பட்ட குறியீடுக்கு சார்ந்தது, புதிய குழு உறுப்பினர்கள் அதை புரிந்துகொள்ள முடியும் +- **பிழை சரிசெய்தல்கள்** தரமான பன்முக குறியீட்டு தளங்களில் உள்ள வெற்றியளவில் எளிதாக இருக்கும் + +நீங்கள் இங்கே பயிற்சி பெறும் திறன்கள் - நிலையானவற்றை பிரித்தெடுக்கும், மறுபடியை நீக்கும் மற்றும் தெளிவான ஆவணப்படுத்தலை எழுதுதல் - தொழில்முறை மென்பொருள் மேம்பாட்டிற்கு அடிப்படையாகும். --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கிறோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**கவனிப்பு**: +இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற ஏ.ஐ. மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சி செய்கிறோம் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். உண்மையான ஆவணத்தின் சொந்த மொழி தான் அதிகாரபூர்வமான ஆதாரமாக கருதி கொள்ளப்பட வேண்டும். முக்கியத் தகவல்களுக்காக, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கின்றோம். இந்த மொழிபெயர்ப்பின் பயன்படுத்தியதனால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்றுக் கொள்ளமாட்டோம். + \ No newline at end of file diff --git a/translations/ta/7-bank-project/4-state-management/README.md b/translations/ta/7-bank-project/4-state-management/README.md index 6e75be23b..b91f8a6ab 100644 --- a/translations/ta/7-bank-project/4-state-management/README.md +++ b/translations/ta/7-bank-project/4-state-management/README.md @@ -1,73 +1,242 @@ -# வங்கி பயன்பாட்டை உருவாக்குதல் பகுதி 4: நிலை மேலாண்மை கருத்துக்கள் +# வங்கி செயலியை உருவாக்குதல் பகுதி 4: நிலை பராமரிப்புக் கருத்துக்கள் -## முன்-வகுப்பு வினாடி வினா +## ⚡ அடுத்த 5 நிமிடங்களில் நீங்கள் செய்யக்கூடியவை -[முன்-வகுப்பு வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/47) +**பிஸியான மேம்படுத்துநர்களுக்கான விரைவு துவக்க பாதை** -### அறிமுகம் +```mermaid +flowchart LR + A[⚡ 5 நிமிடங்கள்] --> B[நிலையின் பிரச்சனைகளை கண்டறிதல்] + B --> C[மைய நிலை பொருளை உருவாக்கு] + C --> D[updateState செயல்பாட்டை சேர்க்கவும்] + D --> E[உடனடி மேம்பாடுகளை காணவும்] +``` +- **நிமிடம் 1**: தற்போதைய நிலை பிரச்சனையை சோதிக்கவும் - உள்நுழையவும், பக்கத்தை புதுப்பிக்கவும், வெளியேறுவதை கவனிக்கவும் +- **நிமிடம் 2**: `let account = null` என்பதை `let state = { account: null }` உடன் மாற்றவும் +- **நிமிடம் 3**: கட்டுப்படுத்தப்பட்ட புதுப்பிப்புகளுக்கான எளிய `updateState()` செயல்பாட்டை உருவாக்கவும் +- **நிமிடம் 4**: ஒரு செயல்பாட்டை புதிய முறைக்கு புதுப்பிக்கவும் +- **நிமிடம் 5**: மேம்பட்ட கணிப்பாய்வு மற்றும் பிழைத்திருத்த செயல்திறனை சோதிக்கவும் + +**விரைவு டயக்னோஸ்டிக் சோதனை**: +```javascript +// முன்பு: பரபரப்பான நிலை +let account = null; // புதுப்பிக்கும் போது தொலைந்தது! + +// பிறகு: மையமிடப்பட்ட நிலை +let state = Object.freeze({ account: null }); // கட்டுப்படுத்தப்பட்டதும் கண்காணிக்கக்கூடியதும்! +``` + +**இது ஏன் முக்கியம்**: 5 நிமிடங்களில், குழப்பமான நிலை நிருவாகத்திலிருந்து கணிப்பாய்வான, பிழைத்திருத்தக்கூடிய வடிவங்களுக்கு மாற்றம் நிகழ்வதை நீங்கள் அனுபவிப்பீர்கள். இது சிக்கலான செயலிகளைக் காப்பாற்றும் அடித்தளமாகும். + +## 🗺️ நிலை பராமரிப்பு நிபுணத்துவத்தின் உங்கள் கற்றல் பயணம் + +```mermaid +journey + title கலப்பு நிலைமையிலிருந்து தொழில்முறை கட்டமைப்புக்கு + section பிரச்சனைகளை கண்டறிதல் + Identify state loss issues: 3: You + Understand scattered updates: 4: You + Recognize architecture needs: 6: You + section கட்டுப்பாட்டை மையமாக்கல் + Create unified state object: 5: You + Implement controlled updates: 7: You + Add immutable patterns: 8: You + section நிலைத்தன்மையை சேர்க்கும் + Implement localStorage: 6: You + Handle serialization: 7: You + Create session continuity: 9: You + section تازگیயை சமநிலை படுத்தல் + Address data staleness: 5: You + Build refresh systems: 8: You + Achieve optimal balance: 9: You +``` +**உங்கள் பயண இலக்கு**: இந்த பாடம் முடிவில், நீங்கள் நிலைத்தன்மை, தரவு تازگی மற்றும் கணிப்பாய்வான புதுப்பிப்புகளை கையாளக்கூடிய தொழில்நுட்ப தரமான நிலை நிர்வாக அமைப்பை கட்டியெழுப்புவீர்கள் - தயாரிப்பு செயலிகளில் பயன்படுத்தப்படும் அதே முறைகள். + +## முன்-பாட பரிசோதனை + +[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/47) + +## அறிமுகம் -ஒரு வலை பயன்பாடு வளரும்போது, அனைத்து தரவோட்டங்களை கண்காணிப்பது சவாலாக மாறுகிறது. எந்த குறியீடு தரவுகளைப் பெறுகிறது, எந்த பக்கம் அதை பயன்படுத்துகிறது, எங்கு மற்றும் எப்போது அதை புதுப்பிக்க வேண்டும்... இது பராமரிக்க கடினமான குழப்பமான குறியீடாக மாறுவது எளிது. குறிப்பாக, உங்கள் பயன்பாட்டின் பல்வேறு பக்கங்களில் தரவுகளைப் பகிர்ந்து கொள்ள வேண்டிய போது, உதாரணமாக பயனர் தரவுகள். *நிலை மேலாண்மை* என்ற கருத்து அனைத்து வகையான நிரல்களில் எப்போதும் இருந்தது, ஆனால் வலை பயன்பாடுகள் சிக்கலானதாக வளர்ந்ததால், இது தற்போது வளர்ச்சியின் போது கவனிக்க வேண்டிய முக்கிய அம்சமாக மாறியுள்ளது. +நிலை நிர்வாகம் என்பது வோயேஜர் விண்வெளி கப்பல் ஓட்ட நிர்வாகத்தின்போல் – எல்லாம் நன்றாக இயங்கும் போது, அது அங்கே இருப்பதை நீங்கள் כמעט கவனிக்க மாட்டீர்கள். ஆனால் பிரச்சனைகள் வரும்போது, அது நட்சத்திர இடைவெளி சென்றடைவதற்கு இடையூறு ஆகும். வலை மேம்பாட்டில், நிலை என்பது உங்கள் செயலிக்கு நினைவில் வைக்க வேண்டிய அனைத்து விஷயங்களையும் குறிக்கும்: பயனர் உள்நுழைவு நிலை, படிவ தரவு, வழிசெலுத்தல் வரலாறு மற்றும் தற்காலிக இடைமுக நிலைகள். -இந்த இறுதி பகுதியில், நாம் உருவாக்கிய பயன்பாட்டை மீண்டும் பரிசீலித்து, நிலை மேலாண்மையை எப்படி மேம்படுத்துவது என்பதைப் பார்ப்போம், இது எந்த நேரத்திலும் உலாவி புதுப்பிக்க ஆதரவு அளிக்கவும், பயனர் அமர்வுகளுக்கு இடையே தரவுகளை நிலைத்திருக்கவும் உதவுகிறது. +உங்கள் வங்கி செயலி எளிய உள்நுழைவு படிவத்திலிருந்து ஒரு மேல்அடுக்கு செயலியாக வளர்ச்சியடைந்தபோது, சில பொதுவான சவால்களை எதிர்கொண்டிருக்கலாம். பக்கத்தை புதுப்பித்தால் பயனர்கள் திடீரென்று வெளியேறுகிறார்கள். உலாவி மூடியால் அனைத்து முன்னேற்றமும் மறைந்து விடுகிறது. ஒரு பிழையை பிழைத்திருத்தும்போது, பல செயல்பாடுகள் ஒரே தரவின் வெவ்வேறு மாற்றங்களை செய்யவும் வேட்டைபிடிக்கவும் நீங்கள் போதிய நேரம் செலவிடுகிறீர்கள். -### முன்-தரப்பு +இவை மோசமான கோடிங் குறியீடுகள் அல்ல – செயலிகள் ஒரு குறிப்பிட்ட சிக்கல்தன்மை எல்லையை எட்டும் போது நிகழ்கின்ற இயல்பான வளர்ச்சிப் பாட்டுக்கள். அனைத்து மேம்படுத்துநர்களும், அவற்றின் செயலிகள் "கருத்துக் குறிப்பில்" இருந்து "தயாரிப்பு தயாராக" மாறும்போது இந்த சவால்களை சந்திக்கின்றனர். -இந்த பாடத்திற்கான [தரவு பெறுதல்](../3-data/README.md) பகுதியை நீங்கள் முடித்திருக்க வேண்டும். மேலும், [Node.js](https://nodejs.org) நிறுவி, [சர்வர் API](../api/README.md) ஐ உள்ளூர் இயக்க வேண்டும், இதனால் நீங்கள் கணக்கு தரவுகளை நிர்வகிக்க முடியும். +இந்த பாடத்தில், உங்கள் வங்கி செயலியை நம்பகமான, தொழில்திறன் வாய்ந்த செயலியாக மாற்றும் மைய நிலை நிர்வாக அமைப்பை செயல்படுத்த போகிறோம். தரவு ஓட்டங்களை கணிப்பாய்வாக, பயனர் அமர்வுகளை தக்கவைத்துக்கொண்டு, நவீன வலை செயலிகளில் தேவையான மென்மையான பயனர் அனுபவத்தைக் உருவாக்க நீங்கள் கற்றுக்கொள்வீர்கள். -சர்வர் சரியாக இயங்குகிறதா என்பதை நீங்கள் இந்த கட்டளையை ஒரு டெர்மினலில் இயக்கி சோதிக்கலாம்: +## முன்னுரிமைகள் + +நிலை நிர்வாகக் கருத்துக்களில் மூழ்குவதற்கு முன், உங்கள் மேம்பாட்டு சூழல் சரியாக அமைக்கப்பட்டிருப்பதையும் உங்கள் வங்கி செயலியின் அடித்தளம் தயார் இருப்பதையும் உறுதிப்படுத்திக் கொள்ளுங்கள். இந்த பாடம் தொடரின் முந்தைய பகுதிகளின் கொள்கைகளும் குறியீடுகளும் நேரடியாக அடிப்படையாக பயன் படுத்துகிறது. + +தொடர்வதற்கு முன் கீழ்க்காணும் கூறுகள் தயார் என்பதை உறுதி செய்யவும்: + +**தேவைப்படும் அமைப்பு:** +- [டேட்டா பெறும் பாடம்](../3-data/README.md) முடித்து உங்கள் செயலி கணக்கு தரவை வெற்றிகரமாக ஏற்றவும் மற்றும் காட்டு வேண்டும் +- உங்கள் கணினியில் [Node.js](https://nodejs.org) ஐ நிறுவவும், பின்னணி API ஐ இயக்குவதற்காக +- கணக்கு தரவு செயல்பாடுகளை கையாள [server API](../api/README.md) ஐ உள்ளூர் முறையில் துவக்கவும் + +**உங்கள் சூழலை சோதனை செய்ய:** + +கீழ்க்காணும் கட்டளையை டெர்மினலில் இயக்கி உங்கள் API சேவையகம் சரியாக இயங்குகிறதா எனப் பார்க்கவும்: ```sh curl http://localhost:5000/api -# -> should return "Bank API v1.0.0" as a result +# -> "Bank API v1.0.0" என்பதை ஒரு முடிவாக வழங்க வேண்டும் +``` + +**இந்த கட்டளை என்ன செய்கிறது:** +- உங்கள் உள்ளூர் API சேவையகத்திற்கு GET கோரிக்கை அனுப்புகிறது +- இணைப்பு சரியானதா என்று சோதிக்கவும் சேவையகம் பதிலளிக்கிறதா என்று உறுதிப்படுத்துகிறது +- எல்லாம் சரியாக இருந்தால் API பதிப்பு தகவலை திருப்பி அளிக்கிறது + +## 🧠 நிலை நிர்வாக கட்டமைப்பின் சாராம்சம் + +```mermaid +mindmap + root((நிலை மேலாண்மை)) + Current Problems + Session Loss + பக்கம் புதுப்பிப்பு பிரச்சினைகள் + உலாவி மூடு தாக்கம் + மாறி மீட்டமைப்பு பிரச்சினைகள் + Scattered Updates + பல திருத்தம் புள்ளிகள் + பிழைத்திருத்தல் சவால்கள் + முன்கூட்டியே கணிக்க இயலாத நடத்தை + Incomplete Cleanup + புகுபதிகை நிலை பிரச்சினைகள் + நினைவக கசிவு + பாதுகாப்பு கவலைகள் + Centralized Solutions + Unified State Object + ஒரே உண்மையின் மூலாதாரம் + கணிக்கக்கூடிய அமைப்பு + விரிவாக்கக்கூடிய அடிப்படைக் கட்டமைப்பு + Controlled Updates + மாற்றப்படாத முறைகள் + Object.freeze பயன்பாடு + செயல்பாடு அடிப்படையிலான மாற்றங்கள் + State Tracking + வரலாறு மேலாண்மை + பிழை காண்பிப்பு + மாற்றம் கண்காணிப்பு + Persistence Strategies + localStorage Integration + அமர்வு தொடர்ச்சி + JSON தொடர் வடிவமாற்றம் + தானாக ஒத்திசைவு + Data Freshness + சேவையகம் புதுப்பிப்பு + பழைய தரவு கையாளல் + சமநிலை முன்னேற்றம் + Storage Optimization + குறைந்தபட்ச தரவு + செயல்திறன் கவனம் + பாதுகாப்பு கருதுகோள்கள் ``` +**மூலக் கொள்கை**: தொழில்திறனான நிலை நிர்வாகம் கணிப்பாய்வு, நிலைத்தன்மை மற்றும் செயல்திறனை சமநிலைப்படுத்தி எளிதாக நம்பகமான பயனர் அனுபவங்களை உருவாக்குகிறது, எளிய தொடர்புகளிலிருந்து சிக்கலான செயலி ஓட்டங்களுக்குப் பரவுகிறது. --- -## நிலை மேலாண்மையை மீண்டும் பரிசீலிக்கவும் +## தற்போதைய நிலை பிரச்சனைகளை கண்டறிதல் -[முந்தைய பாடத்தில்](../3-data/README.md), நாங்கள் `account` என்ற உலகளாவிய மாறியைப் பயன்படுத்தி, தற்போதைய உள்நுழைந்த பயனரின் வங்கி தரவுகளை உள்ளடக்கிய அடிப்படை நிலை கருத்தை அறிமுகப்படுத்தினோம். ஆனால், தற்போதைய செயல்பாட்டில் சில குறைகள் உள்ளன. டாஷ்போர்டில் இருக்கும் போது பக்கத்தை புதுப்பிக்க முயற்சிக்கவும். என்ன நடக்கிறது? +ஷெர்லக் ஹோம்ஸ் போல குற்றப்பகுதியை பரிசோதிப்பதுபோல், பயனர் அமர்வுகள் மறைந்துபோகும் மர்மத்தை தீர்க்க முதலிலேயே நாம் நிகழ்க்கும் நிலை நிர்வாக சிக்கல்களை சரியாக புரிந்து கொள்ளவேண்டும். -தற்போதைய குறியீட்டில் 3 பிரச்சினைகள் உள்ளன: +நாம் உள்ளீடு நிலை நிர்வாக சிக்கல்களை வெளிப்படுத்தும் எளிய பரிசோதனையை நடத்துவோம்: -- நிலை நிலைத்திருக்கவில்லை, உலாவி புதுப்பிப்பு உங்களை மீண்டும் உள்நுழைவு பக்கத்திற்கு அழைத்துச் செல்கிறது. -- நிலையை மாற்றும் பல செயல்பாடுகள் உள்ளன. பயன்பாடு வளரும்போது, இது மாற்றங்களை கண்காணிக்க கடினமாக்கும், மேலும் ஒன்றை புதுப்பிக்க மறக்க எளிதாக இருக்கும். -- நிலை சுத்தம் செய்யப்படவில்லை, எனவே நீங்கள் *Logout* கிளிக் செய்தால், உள்நுழைவு பக்கத்தில் இருந்தாலும் கணக்கு தரவுகள் இன்னும் அங்கே இருக்கும். +**🧪 இந்த டயக்னோஸ்டிக் சோதனையை முயற்சி செய்யவும்:** +1. உங்கள் வங்கி செயலியில் உள்நுழைந்து டாஷ்போர்டுக்கு சென்று +2. உலாவி பக்கத்தை புதுப்பிக்கவும் +3. உள்நுழைவு நிலைக்கு என்ன ஆகிறது என்பதைக் கவனிக்கவும் -இந்த பிரச்சினைகளை ஒன்றொன்றாக தீர்க்க குறியீட்டை புதுப்பிக்கலாம், ஆனால் இது குறியீட்டு மடிப்பை உருவாக்கும் மற்றும் பயன்பாட்டை பராமரிக்க கடினமாக்கும். அல்லது சில நிமிடங்கள் இடைவேளை எடுத்து, எங்கள் உத்தியை மீண்டும் பரிசீலிக்கலாம். +நீங்கள் மீண்டும் உள்நுழைவு திரைக்கு திருப்பப்படுகிறீர்கள் என்றால், நீங்கள் பாரம்பரிய நிலைத்தன்மை பிரச்சனையை கண்டறிந்துள்ளீர்கள். இது நிகழும் காரணம், தற்போதைய நிறைவேற்றல் பயனர் தரவை ஜாவாஸ்கிரிப்ட் மாறிலிகள் இல் வைக்கிறது, அவை ஒவ்வொரு பக்க புதுப்பிப்பும் மீண்டும் இனி நிரலாகிறது. -> இங்கே நாம் உண்மையில் எந்த பிரச்சினைகளை தீர்க்க முயற்சிக்கிறோம்? +**தற்போதைய நிறைவேற்றல் பிரச்சனைகள்:** -[நிலை மேலாண்மை](https://en.wikipedia.org/wiki/State_management) என்பது இந்த இரண்டு குறிப்பிட்ட பிரச்சினைகளை தீர்க்க ஒரு நல்ல அணுகுமுறையை கண்டுபிடிப்பது பற்றியது: +எமது [முந்தைய பாடம்](../3-data/README.md) இலிருந்து எடுக்கப்பட்ட எளிய `account` மாறி பயனர் அனுபவத்தையும் குறியீடு பராமரிப்பையும் பாதிக்கும் மூன்று முக்கிய சிக்கல்களை உருவாக்குகிறது: -- பயன்பாட்டில் தரவோட்டங்களை புரிந்துகொள்ள எளிதாக எப்படி வைத்திருக்கலாம்? -- பயனர் இடைமுகத்துடன் நிலை தரவுகளை எப்போதும் ஒத்திசைக்க (மற்றும் மாறாக) எப்படி வைத்திருக்கலாம்? +| பிரச்சனை | தொழில்நுட்ப காரணம் | பயனர் தாக்கம் | +|---------|---------|----------------| +| **அமர்வு இழப்பு** | பக்கம் புதுப்பிப்பு ஜாவாஸ்கிரிப்ட் மாறிலிகளை அழிக்கிறது | பயனர்கள் அடிக்கடி மீண்டும் அடையாளப்படுத்த வேண்டும் | +| **பரவலாக புதுப்பிப்புகள்** | பல செயல்பாடுகள் நேரடியாக நிலையை மாற்றுகின்றன | பிழைத்திருத்தம் கடினமாகிறது | +| **முழுமையாக சுத்தம் செய்யப்படவில்லை** | வெளியேறுதல் அனைத்து நிலை வாசகங்களையும் அழிக்காது | பாதுகாப்பு மற்றும் தனியுரிமை பிரச்சனைகள் | -இந்தவற்றை கவனித்துக்கொண்ட பிறகு, உங்களிடம் இருக்கும் பிற பிரச்சினைகள் ஏற்கனவே தீர்க்கப்பட்டிருக்கலாம் அல்லது தீர்க்க எளிதாக மாறியிருக்கலாம். இந்த பிரச்சினைகளை தீர்க்க பல்வேறு அணுகுமுறைகள் உள்ளன, ஆனால் **தரவை மற்றும் அதை மாற்றும் வழிகளை மையமாக்குதல்** என்ற பொதுவான தீர்வுடன் நாம் செல்லலாம். தரவோட்டங்கள் இவ்வாறு செல்லும்: +**கட்டமைப்பு சவால்:** -![HTML, பயனர் நடவடிக்கைகள் மற்றும் நிலை இடையே தரவோட்டங்களை காட்டும் வரைபடம்](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ta.png) +டைட்டானிக்கின் பிரிவுகளுக்கான வடிவமைப்பைப் போல, எதிகண்டியில் பல பிரிவுகள் கூட குறுகிய நேரத்தில் தண்ணீரால் நிரம்புவதைப்போல், தனித்தனியாக இந்த பிரச்சனைகளைக் குணமாக்குவது அடிப்படை கட்டமைப்பு சிக்கலை தீர்க்கமாட்டாது. ஒரு விரிவான நிலை நிர்வாக தீர்வை நாம் உருவாக்க வேண்டும். -> தரவு தானாகவே பார்வை புதுப்பிப்பைத் தூண்டும் பகுதியை இங்கே நாம் கையாளமாட்டோம், ஏனெனில் இது [செயல்திறன் நிரலாக்கம்](https://en.wikipedia.org/wiki/Reactive_programming) என்ற மேம்பட்ட கருத்துகளுடன் தொடர்புடையது. நீங்கள் ஆழமான ஆய்வுக்கு தயாராக இருந்தால், இது ஒரு நல்ல தொடர்ச்சியான பொருள். +> 💡 **நாம் உண்மையில் என்ன செய்ய முயல்கிறோம்?** -✅ நிலை மேலாண்மைக்கு பல்வேறு அணுகுமுறைகளுடன் பல நூலகங்கள் உள்ளன, [Redux](https://redux.js.org) ஒரு பிரபலமான விருப்பமாகும். இது பெரும்பாலான வலை பயன்பாடுகளில் நீங்கள் எதிர்கொள்ளக்கூடிய சாத்தியமான பிரச்சினைகள் மற்றும் அதை எப்படி தீர்க்கலாம் என்பதைப் புரிந்துகொள்ள ஒரு நல்ல வழியாக இருக்கும். +[நிலை நிர்வாகம்](https://en.wikipedia.org/wiki/State_management) என்பது இரண்டு அடிப்படைக் புதிர்களை தீர்க்கும் பொருள்: -### பணிக்கூற்று +1. **என் தரவு எங்கே?**: எவற்றைப் பற்றி நாம் தெரிந்து கொள்ள வேண்டும் மற்றும் அவை எங்கிருந்து வருகிறது என்பது +2. **அனைவர் ஒரே பக்கத்தில் உள்ளவரா?**: பயனர்கள் காணும் விஷயங்கள் உண்மையில் நிகழ்வதுடன் பொருந்துகிறதா என்பதை உறுதிப்படுத்தல் -சிறிது மறுசீரமைப்புடன் தொடங்குவோம். `account` அறிவிப்பை மாற்றவும்: +**எங்கள் செயல்திட்டம்:** + +நாம் தலை சுற்றி ஓடுவதைவிட, ஒரு **மைய நிலை நிர்வாக** அமைப்பை உருவாக்கப்போகிறோம். முக்கியமான அனைத்து விஷயங்களையும் ஒருவரே ஒழுங்குபடுத்துவார் போல கற்பனை செய்யுங்கள்: + +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.ta.png) + +```mermaid +flowchart TD + A[பயனர் நடவடிக்கை] --> B[சம்பவ செயலியை] + B --> C[அமைப்பு நிலைமை செயலி] + C --> D{நிலை சட்டப்பூர்வமாக உள்ளது?} + D -->|சட்டபூர்வம்| E[புதிய நிலை உருவாக்கு] + D -->|சட்டம் தவறானது| F[பிழை கையாளுதல்] + E --> G[Object.freeze] + G --> H[உள்ளூர்நிலந்திர்க்கு புதுப்பி] + H --> I[UI புதுப்பிப்பை செயல்படுத்து] + I --> J[பயனர் மாற்றங்களை பார்க்கிறார்] + F --> K[பயனர் பிழையை பார்க்கிறார்] + + subgraph "நிலை மேலாண்மை அடுக்கு" + C + E + G + end + + subgraph "நிலைத்தன்மை அடுக்கு" + H + L[localStorage] + H -.-> L + end +``` +**இந்த தரவு ஓட்டத்தை புரிந்து கொள்வது:** +- அனைத்து செயலி நிலைகளை ஒரே இடத்தில் மையம் செய்கிறது +- அனைத்து நிலை மாற்றங்களும் கட்டுப்படுத்தப்பட்ட செயல்பாடுகள் வழியாகப் பரிமாறப்படுகிறது +- UI தற்போதைய நிலை உடன் ஒத்திசைவாக இருக்கிறது +- தரவு நிர்வாகத்திற்கு தெளிவான, கணிப்பாய்வான வார்ப்புருவை வழங்குகிறது + +> 💡 **தொழில்முறை அறிவுரை**: இந்த பாடம் அடிப்படைக் கருத்துக்களை கவனமாகக் குறிப்பிடுகிறது. சிக்கலான செயலிகளுக்கு, [Redux](https://redux.js.org) போன்ற நூலகங்கள் கூடுதல் முன்னேற்றமான நிலை நிர்வாக அம்சங்களை வழங்குகின்றன. இந்த அடிப்படை கருத்துக்களைப் புரிந்துகொள்வது எந்த நிலை நிர்வாக நூலகத்தையும் கையாள்வதற்கு உதவும். + +> ⚠️ **மேம்பட்ட பொருள்**: நிலை மாற்றங்களால் தானாக UI புதுப்பிப்புகள் ஏற்படுவது [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) கருத்துக்களை உள்ளடக்கியதால், நாங்கள் இதைப் பேசவில்லை. இது உங்கள் கற்றல் பயணத்திற்கான அடுத்த சிறந்த படியாகக் கருதலாம்! + +### பணிகள்: நிலை அமைப்பை மையமாக்குதல் + +பரவலாக உள்ள நிலை நிர்வாகத்தை மையமாக்கப்பட்ட அமைப்பாக மாற்றுவதைத் தொடங்குவோம். முதல் படி, பின்னர் வரும் அனைத்து மேம்பாடுகளுக்கும் அடித்தளம் அமைக்கும். + +**படி 1: மைய நிலை பொருளை உருவாக்கவும்** + +எளிய `account` அறிவிப்பை மாற்றவும்: ```js let account = null; ``` -இதுடன்: +மைது அமைப்புடைய நிலை பொருளுடன்: ```js let state = { @@ -75,29 +244,110 @@ let state = { }; ``` -இருப்பIdea என்பது அனைத்து பயன்பாட்டு தரவுகளையும் ஒரு நிலை பொருளில் மையமாக்குவது. தற்போதைக்கு நிலையில் `account` மட்டுமே உள்ளதால் இது அதிகம் மாறாது, ஆனால் இது வளர்ச்சிகளுக்கு பாதையை உருவாக்குகிறது. +**இந்த மாற்றம் ஏன் முக்கியம்:** +- அனைத்து செயலி தரவுகளையும் ஒரே இடத்தில் மையமாக்குகிறது +- எதிர்காலத்தில் கூடுதல் நிலை சொத்துக்களைச் சேர்க்க கட்டமைப்பு தயார் செய்கிறது +- நிலை மற்றும் பிற மாறிலிகள் இடையே தெளிவான எல்லை உருவாக்குகிறது +- உங்கள் செயலி வளரும்போது பரவலாக கணிப்பாய்வான மாதிரியை உருவாக்குகிறது -இதைப் பயன்படுத்தும் செயல்பாடுகளையும் புதுப்பிக்க வேண்டும். `register()` மற்றும் `login()` செயல்பாடுகளில், `account = ...` ஐ `state.account = ...` என மாற்றவும்; +**படி 2: நிலை அணுகும் முறைகளை புதுப்பிக்கவும்** -`updateDashboard()` செயல்பாட்டின் மேல் பகுதியில், இந்த வரியைச் சேர்க்கவும்: +புதிய நிலை அமைப்பைப் பயன்படுத்த உங்கள் செயல்பாடுகளை புதுப்பியுங்கள்: + +**`register()` மற்றும் `login()` செயல்பாடுகளில்**, கீழ்க்காணும் மாற்றத்தை செய்யவும்: +```js +account = ... +``` +இதை மாற்றி: +```js +state.account = ... +``` + +**`updateDashboard()` செயல்பாட்டில்**, இதை மேலே சேர்க்கவும்: ```js const account = state.account; ``` -இந்த மறுசீரமைப்பு தனியாக அதிக மேம்பாடுகளை கொண்டு வரவில்லை, ஆனால் அடுத்த மாற்றங்களுக்கு அடித்தளத்தை அமைப்பதே நோக்கம். +**இந்த மாற்றங்கள் என்ன செய்கின்றன:** +- உள்ளமைவினை மேம்படுத்தி முன்னதாக இருந்த செயல்பாடுகளை பராமரிக்கிறது +- உங்கள் குறியீட்டை மேம்பட்ட நிலை நிர்வாகத்திற்கு தயாராக்குகிறது +- நிலை தரவுகளுக்கு அணுகுவதற்கான ஒரே மாதிரியை உருவாக்குகிறது +- மைய நிலை புதுப்பிப்புகளுக்கான அடித்தளத்தை நிறுவுகிறது + +> 💡 **குறிப்பு**: இந்த மறுசீரமைப்பு உடனே பிரச்சனைகளை தீர்க்காது, ஆனால் வரும் சக்திவாய்ந்த மேம்பாடுகளுக்கான அடிப்படையை உருவாக்குகிறது! + +### 🎯 கல்வி சோதனை: மையப்படுத்தல் கொள்கைகள் + +**பொறுப்புடன் சிந்தியுங்கள்**: நீங்கள் தற்போது மையப்படுத்தப்பட்ட நிலை நிர்வாகத்தின் அடித்தளத்தை உருவாக்கியுள்ளீர்கள். இது மிக முக்கியமான கட்டமைப்பு தீர்மானம். + +**மிக விரைவான சுய மதிப்பீடு**: +- நிலையை ஒரே பொருளில் மையமாக்குவது பரவலான மாறிலிகளைக் க்கு மேல் எப்படி சிறந்தது என்று விவரிக்க முடிகிறதா? +- நீங்கள் ஒரு செயல்பாட்டை `state.account` பயன்படுத்த மாற்ற மறந்தால் என்ன நடக்கும்? +- இந்த மாதிரி உங்கள் குறியீட்டை மேம்பட்ட அம்சங்களுக்கு எப்படி தயார் செய்கிறது? + +**உண்மையான உலக தொடர்பு**: நீங்கள் கற்ற மையப்படுத்தல் மாதிரி Redux, Vuex, React Context போன்ற நவீன கட்டமைப்புகளின் அடித்தளம். நீங்கள் பெரிய செயலிகளில் பயன்படுத்தப்படும் அதே கட்டமைப்புக் கோலோசனையை உருவாக்கி வருகிறீர்கள். + +**சவால் கேள்வி**: பயனர் விருப்பங்களை (தீம், மொழி) சேர்க்க வேண்டியிருந்தால், அதை நிலை அமைப்பில் எங்கு சேர்ப்பீர்கள்? இது எப்படி பரவுகிறது? + +## கட்டுப்படுத்தப்பட்ட நிலை புதுப்பிப்புகளை செயல்படுத்தல் + +நமது நிலை மையமாக்கப்பட்ட நிலையில் இருப்பதால், அடுத்த படி தரவு மாற்றங்களுக்கான கட்டுப்படுத்தப்பட்ட முறைகளை ஏற்படுத்துவதாகும். இது கணிப்பாய்வான நிலை மாற்றங்களையும் எளிய பிழைத்திருத்தத்தையும் உறுதிசெய்கிறது. + +இந்த அடிப்படைக் கொள்கை விமான போக்குவரத்து கண்காணிப்பைப் போன்றது: பல செயல்பாடுகள் தனித்தனியாக நிலையை மாற்ற அனுமதிப்பதற்குப் பதிலாக, அனைத்து மாற்றங்களும் ஒரே கட்டுப்படுத்தப்பட்ட செயல்பாட்டின் வழியாக செல்லும். இது எப்போது மற்றும் எப்படி மாற்றங்கள் நிகழ்ந்தன என்று தெளிவான கண்காணிப்பை வழங்குகிறது. + +**இறுக்கமான நிலை நிர்வாகம்:** -## தரவு மாற்றங்களை கண்காணிக்கவும் +நாம் `state` பொருளை [*மேலோட்ட*](https://en.wikipedia.org/wiki/Immutable_object) என்று கருதியிருப்போம், அதாவது நேரடியாக அதை மாற்ற மாட்டோம். ஒவ்வொரு மாற்றமும் புதிதாக ஒரு புதிய நிலை பொருளை உருவாக்கும். -நாம் `state` பொருளை எங்கள் தரவுகளை சேமிக்க பயன்படுத்திய பிறகு, அடுத்த படியாக புதுப்பிப்புகளை மையமாக்க வேண்டும். எந்த மாற்றங்கள் எப்போது நிகழ்கின்றன என்பதை கண்காணிக்க எளிதாக செய்ய வேண்டும். +இந்த அணுகுமுறை நேரடியாக மாற்றங்களை விட ஆரம்பத்தில் சற்று செயல்திறன் இழப்பு போலும், அது பிழைத்திருத்தம், சோதனை, மற்றும் செயலி கணிப்பாய்வுக்கு மிகப் பெரிய நன்மைகளை வழங்கும். -`state` பொருளில் மாற்றங்கள் செய்ய தவிர்க்க, அதை [*மாறாதது*](https://en.wikipedia.org/wiki/Immutable_object) எனக் கருதுவது நல்ல நடைமுறையாகும், அதாவது அதை முழுமையாக மாற்ற முடியாது. இதனால், நீங்கள் அதில் ஏதாவது மாற்ற விரும்பினால் புதிய state பொருளை உருவாக்க வேண்டும். இதைச் செய்வதன் மூலம், நீங்கள் எதிர்பாராத [பக்க விளைவுகள்](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) பற்றிய பாதுகாப்பை உருவாக்குகிறீர்கள், மேலும் உங்கள் பயன்பாட்டில் undo/redo போன்ற புதிய அம்சங்களை செயல்படுத்துவதற்கான வாய்ப்புகளைத் திறக்கிறீர்கள், மேலும் பிழையை சரிசெய்ய எளிதாகவும் செய்கிறீர்கள். உதாரணமாக, நீங்கள் state இல் செய்யப்பட்ட ஒவ்வொரு மாற்றத்தையும் பதிவு செய்து, பிழையின் மூலத்தைப் புரிந்துகொள்ள மாற்றங்களின் வரலாற்றை வைத்திருக்கலாம். +**இறுக்கமான நிலை நிர்வாகத்தின் நன்மைகள்:** -JavaScript இல், [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) ஐப் பயன்படுத்தி ஒரு மாறாத பதிப்பை உருவாக்கலாம். மாறாத பொருளில் மாற்றங்களைச் செய்ய முயற்சித்தால், ஒரு εξαίρεση எழுப்பப்படும். +| நன்மை | விளக்கம் | தாக்கம் | +|---------|-------------|--------| +| **கணிப்பாய்வு** | மாற்றங்கள் கட்டுப்படுத்தப்பட்ட செயல்பாடுகளின் மூலம் மட்டுமே நிகழும் | பிழைத்திருத்தம் மற்றும் சோதனை எளிது | +| **வரலாறு கண்காணிப்பு** | ஒவ்வொரு மாற்றத்துக்கும் புதிய பொருள் உருவாகிறது | Undo/Redo செயல்பாடுகளை அனுமதிக்கும் | +| **புற விளைவுகளைக் தடுப்பு** | தவறுதலாக மாற்றங்கள் ஏற்படாது | மர்மமான பிழைகளை தடுக்கும் | +| **செயல்திறன் மேம்பாடு** | நிலை மாற்றம் உண்மையாக எப்போது ஏற்பட்டது என்பதை கண்டறிய எளிது | திறமையான UI புதுப்பிப்புகளைத் தருகிறது | -✅ *கூடுகூறாக* மற்றும் *ஆழமாக* மாறாத பொருளின் வித்தியாசம் என்ன என்பதை நீங்கள் அறிந்தீர்களா? [இங்கே](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) படிக்கலாம். +**`Object.freeze()` மூலம் JavaScript இல் இயங்கும் இறுக்கம்:** -### பணிக்கூற்று +JavaScript வழங்கும் [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) பின்வரும் பணி செய்கிறது: + +```js +const immutableState = Object.freeze({ account: userData }); +// immutableState ஐ மாற்ற எந்த முயலும் பிழையை ஏற்படுத்தும் +``` + +**இங்கே என்ன நடக்கிறது என்பதைப் பிரிக்கவும்:** +- நேரடி சொத்து குறியீடு அல்லது அகற்றல்களைத் தடுக்கும் +- மாற்ற முயற்சிகள் ஏற்பட்டால் தவறுகளைத் தூக்கும் +- நிலை மாற்றங்கள் கட்டுப்படுத்தப்பட்ட செயல்பாடுகளின் வழியே மட்டுமே நிகழ வேண்டும் என்பதை உறுதி செய்கிறது +- நிலையை புதுப்பிக்கும் விதத்தில் தெளிவான ஒப்பந்தத்தை உருவாக்குகிறது + +> 💡 **விவரிப்புக் களம்**: [MDN ஆவணத்தில்](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) *மேலோட்ட* மற்றும் *ஆழமான* இறுக்கமான பொருட்களின் வேறுபாட்டை அறிக. சிக்கலான நிலை அமைப்புகளுக்கு இந்த வேறுபாடு மிக முக்கியம். + +```mermaid +stateDiagram-v2 + [*] --> StateV1: ஆரம்ப நிலை + StateV1 --> StateV2: updateState('account', newData) + StateV2 --> StateV3: updateState('account', anotherUpdate) + StateV3 --> StateV4: updateState('preferences', userSettings) + + note right of StateV1 + Object.freeze() + மாற்ற முடியாதது + பிழைத்திருத்தக்கூடியது + end note + + note right of StateV2 + புதிய பொருள் உருவாக்கப்பட்டது + முந்தைய நிலை பாதுகாக்கப்பட்டது + கணிக்கக்கூடிய மாற்றங்கள் + end note +``` +### பணிகள் புதிய `updateState()` செயல்பாட்டை உருவாக்குவோம்: @@ -110,9 +360,9 @@ function updateState(property, newData) { } ``` -இந்த செயல்பாட்டில், நாம் ஒரு புதிய state பொருளை உருவாக்கி, முந்தைய state இல் இருந்து தரவுகளை [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) ஐப் பயன்படுத்தி நகலெடுக்கிறோம். பின்னர், state பொருளின் குறிப்பிட்ட சொத்தை புதிய தரவுடன் [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` ஐப் பயன்படுத்தி மேம்படுத்துகிறோம். இறுதியாக, `Object.freeze()` ஐப் பயன்படுத்தி பொருளை மாற்றங்களைத் தடுக்க பூட்டுகிறோம். தற்போதைக்கு state இல் `account` சொத்து மட்டுமே சேமிக்கப்பட்டுள்ளது, ஆனால் இந்த அணுகுமுறையுடன் state இல் தேவையான சொத்துகளை நீங்கள் சேர்க்கலாம். +இந்த செயல்பாட்டில், நமது கடந்த நிலை பொருளிலிருந்து தரவை நகல் செய்து புதிய நிலை பொருளை உருவாக்குகிறோம், [*பரவல் (`...`) இயக்கி*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) பயன்படுத்தி. பிறகு, `[property]` குறியீட்டைப் பயன்படுத்தி அந்த நிலை பொருளின் குறிப்பிட்ட சொத்தைக் புதிய தரவு மூலம் மாற்றுகிறோம். கடைசியில், `Object.freeze()` யைப் பயன்படுத்தி அந்த பொருளை மாற்றமுடியாததாக அடைக்கிறோம். நமது நிலையில் மட்டும் இப்போது `account` சொத்து உள்ளதோடு, இந்த முறையில் நீங்கள் தேவையான என்ன சொத்துக்களையும் சேர்க்க முடியும். -நாங்கள் state ஆரம்பத்தையும் புதுப்பிக்க வேண்டும், ஆரம்ப நிலை உறுதியாக உறுதிப்படுத்தவும்: +நாம் மேலும் `state` தொடக்க நிலையை வளர்ச்சி உறுதி செய்ய நிரந்தரமாக மறுவிசேசம் செய்யப்போகிறோம்: ```js let state = Object.freeze({ @@ -120,19 +370,19 @@ let state = Object.freeze({ }); ``` -அதன் பிறகு, `register` செயல்பாட்டை `state.account = result;` ஒதுக்கீட்டை மாற்றி: +பிறகு, `register` செயல்பாட்டில் `state.account = result;` பொறுத்துப்பொருள் பின்வரும் மாற்றவும்: ```js updateState('account', result); ``` -`login` செயல்பாட்டுடன் இதையே செய்யவும், `state.account = data;` ஐ மாற்றி: +அதேபோல், `login` செயல்பாட்டிலும் `state.account = data;` என்பதை இப்படி மாற்றவும்: ```js updateState('account', data); ``` -இப்போது பயனர் *Logout* ஐ கிளிக் செய்தால் கணக்கு தரவுகள் அழிக்கப்படாத பிரச்சினையை சரிசெய்ய வாய்ப்பு கிடைத்துள்ளது. +பயனர் *வெளியேறு* பொத்தானை கிளிக் செய்தபோது கணக்கு தரவு அழிக்கப்படாத பிரச்சனையை இப்போது சரி செய்ய நேர்ந்துள்ளது. புதிய `logout()` செயல்பாட்டை உருவாக்கவும்: @@ -143,33 +393,420 @@ function logout() { } ``` -`updateDashboard()` இல், `return navigate('/login');` என்ற வழிமாற்றத்தை `return logout();` என மாற்றவும்; +`updateDashboard()` இல், பரிமாற்றத்தை `return navigate('/login');` இருந்து `return logout();` ஆக மாற்றவும்; + +புதிய கணக்கை பதிவு செய்து, வெளியேறி மீண்டும் உள்நுழையும் முயற்சியை செய்து எல்லாம் சரியாகச் செயல்படுகிறதா என்பதை உறுதிப்படுத்தவும். + +> குறிப்பு: `updateState()` இன் பக்கத்தில் `console.log(state)` சேர்க்கவும் உலாவியின் மேம்பாட்டு கருவிகளில் கன்சோலை திறந்து அனைத்து நிலை மாற்றங்களையும் பார். + +## தரவு நிலைத்தன்மை அமலாக்கம் + +முந்தைய பரிசோதனையில் கண்டறிந்த அமர்வு இழப்பு பிரச்சனையை தீர்க்க சுற்றுச்சூழல் நிலைத்தன்மை வேண்டும், இது உலாவி அமர்வுகளில் பயனர் நிலையை பாதுகாத்து வைக்க உதவும். இது நமது செயலியை தற்காலிக அனுபவத்திலிருந்து நம்பகமான தொழில்திறன் வாய்ந்த கருவியாக மாற்றும். + +அக்டமிக் கடிகாரங்கள் மின் துண்டிப்பு நேரத்திலும் நேரத்தைக் கணக்கிடத் தொடர்ந்து நினைவகத்தில் தரவை சேமித்து வைத்திருக்கிறதுபோல், வலை செயலிகளும் முக்கிய பயனர் தரவுகளை உலாவி அமர்வுகளுக்கு மத்தியில் நீடித்த சேமிப்பு முறைகளை கொண்டிருக்க வேண்டியதுதான். + +**தரவுத்தள நிலைத்தன்மைக்கான தந்திரவியல் கேள்விகள்:** + +நிலைத்தன்மையை செயல்படுத்துவதற்கு முன், இந்த முக்கிய அம்சங்களை கவனியுங்கள்: + +| கேள்வி | வங்கி செயலி சூழல் | தீர்மானம் மீது தாக்கம் | +|----------|-------------------|----------------| +| **தரவு நுண்ணறிவானதா?** | கணக்கு இருப்பு, பரிமாற்ற வரலாறு | பாதுகாப்பான சேமிப்பு முறைகளைத் தேர்வு செய்க | +| **எவ்வளவு காலம் இருக்க வேண்டும்?** | புகுபதிகை நிலை மற்றும் தற்காலிக UI விருப்பங்கள் | பொருத்தமான சேமிப்பு காலத்தை தேர்வு செய்க | +| **சேவையகம் இதனை தேவைப்படுகின்றதா?** | அங்கீகார டோக்கன்கள் மற்றும் UI அமைப்புகள் | பகிர்வு தேவைகளை தீர்மானிக்கவும் | + +**உலாவி சேமிப்பு விருப்புகள்:** + +நவீன உலாவிகள் பல்வேறு சேமிப்பு முறைகளை வழங்குகின்றன, ஒவ்வொன்றும் வேறு பயன்பாடுகளுக்காக வடிவமைக்கப்பட்டுள்ளது: + +**முதன்மை சேமிப்பு APIகள்:** + +1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: நிலையான [முக்கிய/மதிப்பு சேமிப்பு](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) + - **திடமான** தரவை உலாவி அமர்வுகள் முழுவதும் நிரந்தரமாக வைத்திருக்கிறது + - உலாவி மறுதொடக்கம் மற்றும் கணினி ரீபூட்டுகளையும் **தாண்டி நிலைத்திருக்கிறது** + - குறிப்பிட்ட வலைத்தள டொமைனுக்கே **உரிமையளிக்கப்பட்டது** + - பயனர் விருப்பங்கள் மற்றும் புகுபதிகை நிலைகளுக்கு **சரியானது** + +2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: தற்காலிக அமர்வு சேமிப்பு + - செயல்பாட்டில் இருக்கும்போது localStorage போல **வேலை செய்கிறது** + - உலாவி தாவல் மூடப்பட்டபோது தானாக **சுத்தம் செய்யப்படுகிறது** + - நிலைத்திருக்கக் கூடாது என்ற தற்காலிக தரவுக்கு **சரி** + +3. **[HTTP குக்கீகள்](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: சேவையகம் பகிரும் சேமிப்பு + - ஒவ்வொரு சேவையகம் கோரிக்கையுடனும் தானாக **இறக்குமதி செய்யப்படுகிறது** + - [அங்கீகார](https://en.wikipedia.org/wiki/Authentication) டோக்கன்களுக்கு **இனியவை** + - அளவுக்கு கட்டுப்பாடுகள் உள்ளன மற்றும் செயல்திறன் பாதிக்கலாம் + +**தரவு தொடர் வடிவமைப்பு தேவைகள்:** + +`localStorage` மற்றும் `sessionStorage` இரண்டிலும் [Strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) மட்டுமே சேமிக்கப்படுகின்றன: + +```js +// பொருட்களை சேமிப்பதற்காக JSON ஊற்றுக்களை மாற்றவும் +const accountData = { user: 'john', balance: 150 }; +localStorage.setItem('account', JSON.stringify(accountData)); + +// மீட்டெடுக்கும் போது JSON ஊற்றுக்களை மீண்டும் பொருட்களாக பதிப்பிக்கவும் +const savedAccount = JSON.parse(localStorage.getItem('account')); +``` + +**தொடர்வாக்கு புரிதல்:** +- ஜாவாஸ்கிரிப்ட் ஒப்ஜெக்ட்களை JSON வெள்ளிக்கோவுகளாக மாற்றுகிறது [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) மூலம் +- JSONயிலிருந்து ஒப்ஜெக்ட்களை மீண்டும் உருவாக்குகிறது [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) மூலம் +- சிக்கலான உள்ளடக்க கொண்ட ஒப்ஜெக்ட்கள் மற்றும் வரிசைகளை தானாக கையாள்கிறது +- செயல்பாடுகள், வரையறையற்ற மதிப்புகள் மற்றும் சுற்றுச்சூழல் மேற்கோள்களில் தோல்வி பெறுகிறது + +> 💡 **மேம்பட்ட விருப்பம்**: பெரிய தரவு தொகுதிகளுடன் கூடிய சிக்கலான ஆஃப்லைன் செயலிகளுக்கு [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) பரிந்துரைக்கப்படுகிறது. இது முழுமையான கிளையண்ட்-சைடு தரவுத்தொகுதியாகும், ஆனால் நடைமுறைக்கு சிக்கலானது. + +```mermaid +quadrantChart + title உலாவி சேமிப்பு விருப்பங்கள் + x-axis குறைந்த சிக்கல் --> அதிக சிக்கல் + y-axis குறுகிய காலம் --> நீண்ட காலம் + + quadrant-1 தொழில்முறை கருவிகள் + quadrant-2 எளிதான நிலைத்தன்மை + quadrant-3 தற்காலிக சேமிப்பு + quadrant-4 முன்னேற்றப்பட்ட அமைப்புகள் + + localStorage: [0.3, 0.8] + sessionStorage: [0.2, 0.2] + HTTP Cookies: [0.6, 0.7] + IndexedDB: [0.9, 0.9] + Memory Variables: [0.1, 0.1] +``` +### பணி: localStorage நிலைத்தன்மையை செயல்படுத்துக + +பயனாளர்கள் வெளிநுழைவதற்கு முன் நிலைத்திருக்கும் சேமிப்பை செயல்படுத்துவோம். கணக்கு தகவலை உலாவி அமர்வுகள் முழுவதும் `localStorage` இல் சேமிப்போம். + +**படி 1: சேமிப்பு கட்டமைப்பை வரையறுக்கவும்** + +```js +const storageKey = 'savedAccount'; +``` + +**இந்த நிலையானது என்ன வழங்குகிறது:** +- சேமிக்கப்பட்ட தரவுக்கு ஒருங்கிணைந்த அடையாளத்தை உருவாக்குகிறது +- சேமிப்பு முக்கிய தொடுப்பில் எழுத்துப்பிழைகளைத் தவிர்க்கிறது +- தேவையென்றால் சேமிப்பு தொடுப்பை எளிதாக மாற்ற முடிகிறது +- பராமரிக்க எளிதான சிறந்த நடைமுறைகளை பின்பற்றுகிறது + +**படி 2: தானாக நிலைத்தன்மை சேர்க்கவும்** + +`updateState()` செயல்பாட்டின் இறுதியில் இந்த வரியை சேர்க்கவும்: + +```js +localStorage.setItem(storageKey, JSON.stringify(state.account)); +``` + +**இங்கே நிகழ்வதை விவரித்தல்:** +- கணக்கு ஒப்ஜெக்டை JSON வெள்ளிக்கோவாக மாற்றுகிறது சேமிப்புக்கு +- ஒருங்கிணைந்த சேமிப்பு தொடுப்பைப் பயன்படுத்தி தரவை சேமிக்கிறது +- நிலை மாற்றங்கள் நேர்ந்தவுடன் தானாக இயங்குகிறது +- சேமிக்கப்பட்ட தரவு எப்போதும் தற்போதைய நிலைக்கு ஒத்திசைக்கப்படுகிறது + +> 💡 **கட்டமைப்பு பயன்பாடு**: அனைத்து நிலை புதுப்பிப்புகளும் `updateState()` மூலம் மையப்படுத்தப்பட்டதால், நிலைத்தன்மைச் சேர்க்க ஒரு வரியால் போதும். இது நல்ல கட்டமைப்பு தீர்வுகளின் வலுவை காண்பிக்கிறது! + +**படி 3: செயலியில் ஏற்றும்போது நிலையை மீட்டெடுக்கவும்** + +சேமிக்கப்பட்ட தரவை மீட்டெடுக்க ஆரம்ப செயல்பாட்டை உருவாக்குக: + +```js +function init() { + const savedAccount = localStorage.getItem(storageKey); + if (savedAccount) { + updateState('account', JSON.parse(savedAccount)); + } + + // நமது முந்தைய துவக்க குறியீடு + window.onpopstate = () => updateRoute(); + updateRoute(); +} + +init(); +``` + +**ஆரம்ப செயல்முறையைப் புரிந்துகொள்ளல்:** +- முந்தைய சேமிக்கப்பட்ட கணக்கு தரவை localStorage இலிருந்து பெறுகிறது +- JSON வெள்ளிக்கோவை மீண்டும் ஜாவாஸ்கிரிப்ட் ஒப்ஜெக்டாக மாற்றுகிறது +- கட்டுப்பாட்டுடன் நிலையை புதுப்பிக்கிறது +- பக்க சேர் முன்னர் பயனர் அமர்வு தானாக மீட்டெடுக்கப்படுகிறது +- தடம் புதுப்பிப்புகளுக்கு முன் செயல்படுகிறது + +**படி 4: இயல்புநிலை பாதையை மேம்படுத்தவும்** + +`updateRoute()` இல் இதைப் பதிலாக இடுக: + +```js +// மாற்று: return navigate('/login'); +return navigate('/dashboard'); +``` + +**இந்த மாற்றம் நியாயமான காரணங்கள்:** +- புதிய நிலைத்துறை முறையைச் சிறப்பாகப் பயன்படுத்துகிறது +- அங்கீகாரச் சோதனைகளை கையாளும் டாஷ்போர்டுக்கு வாய்ப்பு தருகிறது +- சேமிக்கப்படாத அமர்வு இருந்தால் தானாக புகுபதிகைக்கு மாற்றுகிறது +- பயனர் அனுபவத்தை மெல்லியதாக மாற்றுகிறது + +**உங்கள் செயல்பாட்டை சோதனை செய்ய:** + +1. உங்கள் வங்கி செயலியில் புகுபதிகை செய்யவும் +2. உலாவி பக்கத்தை மீண்டும் துவக்கவும் +3. நீங்கள் புகுபதிகை செய்யப்பட்டிருப்பது மற்றும் டாஷ்போர்டில் இருப்பதை உறுதிப்படுத்தவும் +4. உலாவியை மூடி மீண்டும் திறக்கவும் +5. செயலி ஓருபக்கம் செல்லவும் மற்றும் நீங்கள் இன்னும் உள்நுழைந்திருப்பதை உறுதிப்படுத்தவும் + +🎉 **வெற்றி பெற்றுள்ளீர்கள்**: நீங்கள் நிலையான நிலை மேலாண்மையை வெற்றிகரமாக செயல்படுத்தியுள்ளீர்கள்! உங்கள் செயலி ஒரு தொழில்முறை வலை செயலியைப் போல நடக்கிறது. + +### 🎯 கல்வி சரிபார்ப்பு: நிலைத்தன்மை கட்டமைப்பு + +**கட்டமைப்பு புரிதல்**: நீங்கள் பயனர் அனுபவத்தையும் தரவு நிர்வாக சிக்கலையும் சமமாக உருவாக்கும் நிலைத்துறை நிலையை செயல்படுத்தியுள்ளீர்கள். + +**முக்கிய கருத்துக்கள் கற்றல்:** +- **JSON தொடர் வடிவம்**: சிக்கலான ஒப்ஜெக்ட்களை சேமிக்கக்கூடிய சரங்கள் ஆக மாற்றுதல் +- **தானாக ஒத்திசைவு**: நிலை மாற்றங்கள் நிலைத்துவரை துவக்குதல் +- **அமர்வு மீட்பு**: இடையூறுகளுக்குப் பிறகு செயலிகள் பயனர் சூழலை மீட்டெடுக்க முடியும் +- **மையப்படுத்தப்பட்ட நிலைத்தன்மை**: ஒரே புதுப்பிப்பு செயல்பாடு அனைத்து சேமிப்பையும் கையாள்கிறது + +**தொழில் தொடர்பு**: இந்த நிலைத்துறை முறை பரிந்துரைப்படுத்தப்பட்ட வலை செயலிகள் (PWA), ஆஃப்லைன் முதன்மையான செயலிகள் மற்றும் நவீன மொபைல் வலை அனுபவங்களுக்கு அடிப்படையாகப் பொதுவாக உள்ளது. நீங்கள் தயாரிப்புத் தரப்பட்ட திறன்களை கட்டி கொண்டிருக்கிறீர்கள். -புதிய கணக்கை பதிவு செய்து, வெளியேறி மீண்டும் உள்நுழைந்து, அனைத்தும் சரியாக வேலை செய்கிறதா என்பதைச் சரிபார்க்கவும். +**போக்கு கேள்வி**: ஒரே சாதனத்தில் பல பயனர் கணக்குகளைச் சமாளிக்க நீங்கள் இந்த முறையை எப்படி திருத்துவீர்கள்? தனியுரிமை மற்றும் பாதுகாப்பு பாதிப்புகளை கவனியுங்கள். -> குறிப்புரை: `updateState()` இன் கீழே `console.log(state)` ஐச் சேர்த்து, உலாவியின் மேம்பாட்டு கருவிகளில் உள்ள கன்சோலைத் திறக்கவும், அனைத்து state மாற்றங்களையும் பார்க்கலாம். +## நிலைத்தன்மையும் தரவு புதியதன்மையும் சமநிலை -## நிலையை நிலைத்திருக்கவும் +நமது நிலைத்துறை சிஸ்டம் பயனர் அமர்வுகளைத் தொடர்ந்து பராமரிக்கிறது, ஆனால் புதிய சிக்கலை உருவாக்குகிறது: தரவு பழுதுபாராமை. பல பயனர்கள் அல்லது செயலிகள் ஒரே சேவையகத் தரவை மாற்றும்போது உள்ளூர் கேச் செய்த தகவல் பழுதடைந்து விடும். -பெரும்பாலான வலை பயன்பாடுகள் சரியாக வேலை செய்ய தரவுகளை நிலைத்திருக்க வேண்டும். அனைத்து முக்கியமான தரவுகளும் பொதுவாக ஒரு தரவுத்தொகுப்பில் சேமிக்கப்படும் மற்றும் சர்வர் API மூலம் அணுகப்படும், எங்கள் வழக்கில் பயனர் கணக்கு தரவுகள் போன்றவை. ஆனால் சில நேரங்களில், உலாவியில் இயங்கும் கிளையன்ட் பயன்பாட்டில் சில தரவுகளை நிலைத்திருக்கவும், சிறந்த பயனர் அனுபவத்திற்காக அல்லது ஏற்றுதல் செயல்திறனை மேம்படுத்தவும் இது சுவாரஸ்யமாக இருக்கும். +இந்த நிலை, வைகிங் வழிசெலுத்திகள் சேமித்துள்ள நட்சத்திர வரைபடங்களையும் தற்போதைய விண்மீன் பார்வைகளையும் இணைத்து பயன்படுத்தியதைப் போன்றது. வரைபடங்கள் திடமாக இருந்தாலும், வழிசெலுத்திகள் மாற்றங்களைக் கவனித்து புதுப்பித்த பார்வைகளை தேவைப்படுத்தினர். அதுபோல, நமது செயலிக்கு நிலையான பயனர் நிலை மற்றும் தற்போதைய சேவையகத் தரவுகள் இரண்டும் தேவை. -உங்கள் உலாவியில் தரவுகளை நிலைத்திருக்க விரும்பும்போது, சில முக்கியமான கேள்விகளை நீங்கள் உங்களிடம் கேட்க வேண்டும்: +**🧪 தரவு புதியதன்மை பிரச்சனை கண்டறிதல்:** -- *தரவு நுண்ணறிவாக உள்ளதா?* பயனர் கடவுச்சொற்கள் போன்ற எந்த நுண்ணறிவு தரவையும் கிளையன்டில் சேமிக்க தவிர்க்க வேண்டும். -- *இந்த தரவை எவ்வளவு காலத்திற்கு நீங்கள் வைத்திருக்க வேண்டும்?* இந்த தரவை தற்போதைய அமர்விற்காக மட்டுமே அணுக திட்டமிடுகிறீர்களா அல்லது அதை நிரந்தரமாகச் சேமிக்க விரும்புகிறீர்களா? +1. `test` கணக்கில் டாஷ்போர்டில் உள்நுழைக +2. வேறு மூலத்திலிருந்து பரிவர்த்தனை ஆகும் செயல்பாட்டைப் பின்வரும் டெர்மினல் கட்டளையை இயக்கவும்: -தகவல்களை ஒரு v -[பாடத்திற்குப் பின் வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/48) +```sh +curl --request POST \ + --header "Content-Type: application/json" \ + --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \ + http://localhost:5000/api/accounts/test/transactions +``` + +3. உலாவியில் உங்கள் டாஷ்போர்டைப் புதுப்பிக்கவும் +4. புதிய பரிவர்த்தனைக் காண்பீர்களா என கவனிக்கவும் + +**இந்த சோதனை வழங்குவது:** +- உள்ளூர் சேமிப்பில் "பழையது" ஆகிவிட்டதை காட்டுகிறது +- உங்கள் செயலிக்கெல்லாம் வெளியில் தரவு மாற்றங்கள் இருப்பதை மாற்றுகிறது +- நிலைத்தன்மை மற்றும் தரவுத் புதியதன்மை இடையேயான மோதலை வெளிப்படுத்துகிறது + +**தரவு பழுதுபாராமை பிரச்சனை:** + +| பிரச்சனை | காரணம் | பயனர் தாக்கம் | +|---------|-------|-------------| +| **பழைய தரவு** | localStorage தானாக காலாவதி ஆகாது | பயனர்கள் பழைய தகவலைக் காண்கிறார்கள் | +| **சேவையக மாற்றங்கள்** | பிற செயலிகள்/பயனர்கள் ஒரே தரவை மாற்றுகின்றனர் | பல்வேறு தளங்களில் ஒரே தரவு மாறுபடும் | +| **கேச் மற்றும் உண்மை** | உள்ளூர் கேச் சேவையக நிலைக்கு பொருத்தமில்லை | மோசமான பயனர் அனுபவம் மற்றும் குழப்பம் | + +**தீர்வு நெறிமுறை:** + +நாம் "பக்க ஏற்றும்போது புதுப்பி" னு ஒரு முறையை நடுவில் கொண்டு வருவோம், இது நிலைத்தன்மைக்கும் புதிய தரவைப் பெறுதலுக்கும் சமநிலை நிலை பற்றிய அணுகுமுறை ஆகும். இது விரிவான பயனர் அனுபவத்தையும் தரவு துல்லியத்தையும் உறுதிசெய்கிறது. + +```mermaid +sequenceDiagram + participant U as பயனர் + participant A as செயலி + participant L as உள்ளூர்தொகுப்பு + participant S as சேவையகம் + + U->>A: செயலியை திறக்கிறது + A->>L: சேமிக்கப்பட்ட நிலையை ஏற்றுகொள் + L-->>A: பெட்டியிலுள்ள தரவைத் திருப்பி வையங்கு + A->>U: உடனடி UI காட்டு + A->>S: புதிய தரவை எடு + S-->>A: தற்போதைய தரவைத் திருப்பிவருக + A->>L: பெட்டியை புதுப்பி + A->>U: புதிய தரவை UI இல் புதுப்பி +``` +### பணி: தரவு புதுப்பிப்பு சிஸ்டம் செயல்படுத்துக + +நமது நிலைத்துறை நிர்வாகத்தின் நன்மைகளைப் பேணி, சேவையகத்திலிருந்து புதிய தரவை தானாக பெறும் முறையை உருவாக்குவோம். + +**படி 1: கணக்கு தரவு புதுப்பிப்பாளர் உருவாக்குக** -## பணிக்கூற்று +```js +async function updateAccountData() { + const account = state.account; + if (!account) { + return logout(); + } + + const data = await getAccount(account.user); + if (data.error) { + return logout(); + } + + updateState('account', data); +} +``` + +**இந்த செயல்பாட்டின் லாஜிக் புரிதல்:** +- பயனர் தற்போது உள்நுழைந்துள்ளதா என்று (state.account உள்ளது) சரிபார்க்கிறது +- செல்லாவிட்டால் வெளிநுழைவிற்கு மாற்றுகிறது +- `getAccount()` என்ற உள்ளிருக்கும் செயல்பாட்டைப் பயன்படுத்தி சேவையகத்திலிருந்து புதிய கணக்கு தரவை பெறுகிறது +- சேவை பிழைகள் ஏற்படினால், தவறான அமர்வுகளை வெளியேற்றுகிறது +- நமது கட்டுப்பாடுள்ள புதுப்பிப்பு முறையில் நிலையை புதிய தரவுடன் புதுப்பிக்கிறது +- `updateState()` மூலம் தானாக localStorage நிலைத்தன்மையை தூண்டும் -["Add transaction" உரையாடலை செயல்படுத்தவும்](assignment.md) +**படி 2: டாஷ்போர்டு புதுப்பிப்பு கையாள்கை உருவாக்குக** -பணிக்கூற்றை முடித்த பிறகு கிடைக்கும் உதாரண முடிவு இதோ: +```js +async function refresh() { + await updateAccountData(); + updateDashboard(); +} +``` + +**இந்த புதுப்பிப்பு செயல்பாடு செய்வதம்:** +- தரவு புதுப்பிப்பு மற்றும் UI புதுப்பிப்பு செயல்முறைகளை ஒருங்கிணைக்கிறது +- புதிய தரவு ஏற்றப்படுவதற்காக காத்திருந்து பின்னர் காட்சியமைப்பை மாற்றுகிறது +- டாஷ்போர்டு தற்போதைய தகவலை பகிர்கிறதை உறுதிசெய்கிறது +- தரவு நிர்வாகமும் UI புதுப்பிப்பும் தெளிவாக பிரிக்கப்பட்டுள்ளன + +**படி 3: பாதை அமைப்புடன் இணைப்பு** + +உங்கள் பாதை அமைப்பை புதுப்பித்து, தானாக இந்த புதுப்பிப்பை இயங்க வையுங்கள்: -!["Add transaction" உரையாடல் உதாரணத்தை காட்டும் ஸ்கிரீன்ஷாட்](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ta.png) +```js +const routes = { + '/login': { templateId: 'login' }, + '/dashboard': { templateId: 'dashboard', init: refresh } +}; +``` + +**இந்த இணைப்பின் செயல்விளக்கம்:** +- டாஷ்போர்டு பாதை ஏற்றும்போது புதுப்பிப்பு செயல்பாட்டை இயக்குகிறது +- பயனர் டாஷ்போர்டுக்கு செல்லும் போது எப்போதும் புதிய தரவு காட்டப்படுகிறது +- முன்னைய பாதை அமைப்பும் தொடர்கிறது; தரவு புதியதன்மை சேர்க்கப்பட்டுள்ளது +- பாதை குறிப்பிட்ட ஆரம்பப்படுத்தல் முறைக்கு ஒரே மாதிரி வழங்குகிறது + +**தரவு புதுப்பிப்பு முறையை சோதனை செய்ய:** + +1. உங்கள் வங்கி செயலியில் உள்நுழைக +2. முன்பு கூறிய curl கட்டளையை இயக்கி புதிய பரிவர்த்தனையை உருவாக்கவும் +3. உங்கள் டாஷ்போர்டு பக்கத்தை புதுப்பிக்கவும் அல்லது விட்டு மீண்டும் செல்லவும் +4. புதிய பரிவர்த்தனை உடனடியாக தோன்றுகிறதா என்பதை உறுதிசெய்க + +🎉 **சரியான சமநிலை அடைந்தது**: உங்கள் செயலி நிலைத்துறை மென்மையான அனுபவத்தையும் புதிய சேவை தரவுகளின் துல்லியத்தையும் இணைத்துக் கொண்டுள்ளது! + +## 📈 உங்கள் நிலை நிர்வாக திறனின் முன்னேற்ற காலவரிசை + +```mermaid +timeline + title தொழில் நிலை மேலாண்மை பயணம் + + section சிக்கல் அறிதல் + State Issues Diagnosis + : சேஷன் இழப்பு பிரச்சினைகளை கண்டறிதல் + : பரவலாக உள்ள புதுப்பிப்பு பிரச்சினைகளை புரிதல் + : கட்டமைப்புக்கான தேவைகளை அடையாளம் காண்தல் + + section Architecture Foundation + Centralized State Design + : ஒருங்கிணைந்த நிலை பொருட்களை உருவாக்குதல் + : கட்டுப்படுத்தப்பட்ட புதுப்பிப்பு முறைகளை அமற்படுத்துதல் + : மாறாத அடிப்படைகள் ஏற்பாடு செய்தல் + + Predictable Updates + : Object.freeze() பயன்படுத்துதல் கற்றல் + : பிழை கண்டறிய எளிதான அமைப்புகளை உருவாக்குதல் + : பரவலான மாதிரிகள் உருவாக்குதல் + + section Persistence Mastery + localStorage Integration + : JSON தொடர் நிரலாக்கத்தை கையாள்தல் + : தானாக ஒத்திசைவு செய்வதைக் கையாள்தல் + : சேஷன் தொடர்ச்சியை உருவாக்குதல் + + Data Freshness Balance + : பழுப்படіння சவால்களை முகாமைத்தல் + : புதுப்பிப்பு அமைப்புகளை உருவாக்குதல் + : திறன் மற்றும் துல்லியத்தை 최்ஷான்மை செய்யுதல் + + section Professional Patterns + Production-Ready Systems + : பிழை கையாள்தலை அமற்படுத்துதல் + : பராமரிக்கக்கூடிய கட்டமைப்புகளை உருவாக்குதல் + : தொழில் தர சிறந்த நடைமுறைகளை பின்பற்றுதல் + + Advanced Capabilities + : கட்டமைப்பு ஒருங்கிணைப்புக்கு தயார் + : சிக்கலான நிலை தேவைகளுக்கு தயாராக 있음 + : நேரடி விடய கனவை அடிப்படையாகக் கொண்டது +``` +**🎓 பட்டமளிக்கும் கட்டம்**: நீங்கள் ரெடக்ஸ், Vuex மற்றும் மற்ற தொழில்முறை நிலை நூலகங்களின் கொள்கைகளைப் பயன்படுத்தி ஒரு முழுமையான நிலை நிர்வாக அமைப்பை வெற்றிகரமாக உருவாக்கியுள்ளீர்கள். இந்த முறைகள் எளிய செயலிகளிலிருந்து நிறுவன செயலிகள் வரை பருமனமாக செயல்படுகின்றன. + +**🔄 அடுத்த நிலை திறன்கள்:** +- நிலை நிர்வாக கட்டமைப்புகளை (Redux, Zustand, Pinia) கற்றுக்கொள்ள தயாராகவும் +- WebSockets உடன் நேரடியான அம்சங்களை செயல்படுத்த தயாராகவும் +- ஆஃப்லைன் முதன்மையான முன்னேற்றமான வலை செயலிகளைக் கட்டமைக்கவும் +- நிலை இயந்திரங்கள் மற்றும் பின்வட்டாரிகளின் மேம்பட்ட கோட்பாடுகளுக்கான அடித்தளத்தை அமைக்கவும் + +## GitHub Copilot முகவர் சவால் 🚀 + +முகவர் முறையைப் பயன்படுத்தி அடுத்த சவாலை நிறைவேற்றுக: + +**விளக்கம்:** வங்கிப் செயலிக்கு undo/redo செயல்பாடுகளுடன் கூடிய ஒரு முழுமையான நிலை நிர்வாக அமைப்பை உருவாக்குக. இந்த சவால் நிலை வரலாறு கண்காணிப்பு, மாற்றமற்ற புதுப்பிப்புகள் மற்றும் பயனர் இடைமுக ஒத்திசைவு ஆகிய மேம்பட்ட நிலை நிர்வாகக் கொள்கைகளைப் பயிற்சி செய்வதற்கு உதவும். + +**உள்ளடக்கம்:** +1) முந்தைய அனைத்து நிலைகளையும் கண்காணிக்கும் நிலை வரலாறு வரிசை, +2) undo மற்றும் redo செயல்பாடுகள் முந்தைய நிலைகளுக்கு முடியுமான வளைத்தோடும், +3) undo/redo அம்சங்களுக்கு டாஷ்போர்டில் UI பொத்தான்கள், +4) நினைவக பிரச்சனைகளை தவிர்க்க அதிகபட்ச வரலாறு வரிசை 10, +5) பயனர் வெளியேறுவோதே வரலாறு சுத்தப்படுத்தல். undo/redo பண்புகள் கணக்கு இருப்பு மாற்றங்களுடன் வேலை செய்ய மற்றும் உலாவி புதுப்பிப்புகளைக் கையாண்டு நிலைத்திருக்க வேண்டும். + +[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) பற்றி மேலதிகமாக அறியும். + +## 🚀 சவால்: சேமிப்பை மேம்படுத்தல் + +உங்கள் செயல்முறை இப்போது பயனர் அமர்வுகளை, தரவு புதுப்பிப்பை மற்றும் நிலை நிர்வாகத்தையும் திறம்பட கையாள்கிறது. இருப்பினும், நமது தற்போதைய அணுகுமுறை சேமிப்பு திறன் மற்றும் செயல்திறனுக்கு இடையே மிகச்சரியான சமநிலை உள்ளதா என்று பரிசீலனை செய்யவும். + +சதுரங்க ஆடவர்களைப் போன்று, முக்கிய துண்டுகள் மற்றும் அகற்றக்கூடிய குதிரைகள் இடையேயான வேறுபாட்டை உணர்ந்து, சிறந்த நிலை நிர்வாகம் எந்த தரவு நிலையாக இருக்க வேண்டும் மற்றும் எந்த தரவு எப்போதும் சேவையகத்திலிருந்து புதியதாக வேண்டும் என்று கண்டறிவது அவசியம். + +**திறப்பு பகுப்பாய்வு:** + +தற்போதைய localStorage செயல்பாட்டைப் மதிப்பீடு செய்து பின்வரும் கேள்விகளைச் சிந்திக்கவும்: +- பயனர் அங்கீகாரத்தை பராமரிக்க தேவையான குறைந்தபட்சத் தகவல் என்ன? +- எந்த தரவு அடிக்கடி மாறுகிறது எனவே உள்ளூர் கேசிங் பலனின்றி இருக்கும்? +- சேமிப்பு மேம்படுத்தல் செயல்திறனை உடைத்துச் செலாமல் பயனர் அனுபவத்தை எப்படி மேம்படுத்த முடியும்? + +இத்தகைய கட்டமைப்பு ஆராய்ச்சி, பயனையும் திறனையும் கவனிக்கும் அனுபவமுள்ள மேம்பாடு செய்பவர்களைப் பிரிக்கிறது. + +**இடைநிலை திட்டம்:** +- நிலையாக இருக்க வேண்டிய அத்தியாவசிய தரவை அடையாளம் காண்க (மிகவும் பயனர் அடையாளம் மட்டும் இருக்கலாம்) +- உங்கள் localStorage செயல்பாட்டை முக்கிய அமர்வு தரவை மட்டும் சேமிப்பதற்காக மாற்றுக +- டாஷ்போர்டு பயணங்களில் எப்போதும் சேவையகத்திலிருந்து புதிய தரவை ஏற்றுக +- உங்கள் மேம்படுத்தப்பட்ட முறையால் பயனர் அனுபவம் கையாளப்படுவதை சோதிக்கவும் + +**மேம்பட்ட கருத்து:** +- முழு கணக்கு தரவு மற்றும் அங்கீகார டோக்கன்கள் ஒருங்கிணைப்புகளுக்குள் உருவாகும் நன்மைகள் மற்றும் தீமைகள் தொடர்பான ஒப்பீடு +- உங்கள் முடிவுகள் மற்றும் காரணங்களை அடுத்த குழுவினருக்கு ஆவணப்படுத்தவும் + +இந்த சவால் பயனர் அனுபவமும் செயலி திறனும் இரண்டையும் கவனிக்கும் தொழில்முறை மேம்பாட்டாளராக நீங்கள் சிந்திக்க உதவும். வெகுவாக விரும்பாமல் ஆராயவும்! + +## பாடக்குழு உதவி வினாடி வினா + +[பாடக்குழு உதவி வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/48) + +## பணிகள் + +["பரிவர்த்தனைச் சேர்" உரையாடலை செயல்படுத்துக](assignment.md) + +பணியை முடித்த பின் ஒரு உதாரண முடிவு: + +![ஒரு உதாரண "பரிவர்த்தனைச் சேர்" உரையாடலைக் காண்கிற ஸ்கிரீன் ஷாட்](../../../../translated_images/dialog.93bba104afeb79f1.ta.png) --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**பிரதிபादन குறிச்சொல்**: +இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) பயன்படுத்தி மொழிபெயர்க்கப்பட்டது. நாங்கள் துல்லியத்திற்காக முயற்சி செய்யும் போதும், தானியங்கி மொழிபெயர்ப்பில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து கவனியுங்கள். தனது மூலப் பண்டத்தில் உள்ள ஆவணம் அதிகாரப்பூர்வமான மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கான, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டிலிருந்து எழும் எந்தவொரு தவறுபடுத்தல்கள் அல்லது தவறான புரிதல்களுக்கு நாங்கள் பொறுப்பாளர் அல்ல. + \ No newline at end of file diff --git a/translations/ta/7-bank-project/4-state-management/assignment.md b/translations/ta/7-bank-project/4-state-management/assignment.md index 526e8502c..aa408b194 100644 --- a/translations/ta/7-bank-project/4-state-management/assignment.md +++ b/translations/ta/7-bank-project/4-state-management/assignment.md @@ -1,39 +1,165 @@ # "பரிவர்த்தனை சேர்க்க" உரையாடலை செயல்படுத்தவும் +## அவலோகம் + +உங்கள் வங்கி செயலி இப்போது உறுதியான மாநில மேலாண்மை மற்றும் தரவுத்தள நிலைத்தன்மையைக் கொண்டுள்ளது, ஆனால் அது உண்மையான வங்கி செயலிகளுக்கு தேவையான ஒரு முக்கிய அம்சத்தை இல்லாமல் உள்ளது: பயனர்கள் தங்களுடைய சொந்த பரிவர்த்தனைகளை சேர்க்கும் திறன். இந்த பணியில், நீங்கள் உங்கள் தற்போதைய மாநில மேலாண்மை அமைப்புடன் தனித்தனியாக இணைக்கக்கூடிய முழுமையான "பரிவர்த்தனை சேர்க்க" உரையாடலை செயல்படுத்துவீர்கள். + +இந்த வேலை நீங்கள் நான்கு வங்கி பாடங்களில் கற்றுக்கொண்ட அனைத்தையும் ஒருங்கிணைக்கிறது: HTML வார்ப்புரு, படிவ கையாளல், API ஒருங்கிணைப்பு மற்றும் மாநில மேலாண்மை. + +## கற்றல் இலக்குகள் + +இந்த பணியை முடித்தால், நீங்கள்: + +- **உரையாடல் இடைமுகத்தை** பயனர் நட்பானவாறு உருவாக்குவீர்கள் +- விசைப்பலகை மற்றும் திரை அதிபர் ஆதரவு கொண்ட அணுகல்திறனுள்ள படிவ வடிவமைப்பை **செயல்படுத்துவீர்கள்** +- புதிய அம்சங்களை உங்கள் தற்போதைய மாநில மேலாண்மைக்கு **இணைத்திடுவீர்கள்** +- API தொடர்பு மற்றும் பிழை கையாளலை **பயிற்சி செய்வீர்கள்** +- நவீன வலை வளர்ச்சி முறைமைகளை உண்மையான அம்சத்திற்கு **விண்ணப்பிப்பீர்கள்** + ## வழிமுறைகள் -எங்கள் வங்கி பயன்பாட்டில் இன்னும் ஒரு முக்கிய அம்சம் இல்லை: புதிய பரிவர்த்தனைகளை உள்ளிடும் சாத்தியம். -முந்தைய நான்கு பாடங்களில் நீங்கள் கற்றுக்கொண்ட அனைத்தையும் பயன்படுத்தி, "பரிவர்த்தனை சேர்க்க" உரையாடலை செயல்படுத்தவும்: +### படி 1: பரிவர்த்தனை சேர்க்க பொத்தான் + +உங்கள் டாஷ்போர்ட் பக்கத்தில் பயனர்கள் எளிதாக காணவும் அணுகவும் கூடிய "பரிவர்த்தனை சேர்க்க" பொத்தானை **உருவாக்கவும்**. + +**தேவைகள்:** +- பொத்தானை டாஷ்போர்டில் பொருத்தமான இடத்தில் **வைக்கவும்** +- தெளிவான, செயல்-நோக்கிய பொத்தானின் உரையை **பயன்படுத்தவும்** +- உங்கள் தற்போதைய UI வடிவமைப்புடன் பொருந்தும் வகையில் பொத்தானை **அழகுசெய்யவும்** +- பொத்தான் விசைப்பலகை மூலம் அணுகக்கூடியதாக இருக்க **உறுதி செய்யவும்** + +### படி 2: உரையாடல் செயல்படுத்தல் + +உங்கள் உரையாடலை செயல்படுத்த இந்த இரண்டு முறைமைகளில் ஒன்றைத் தேர்ந்தெடுக்கவும்: + +**விருப்பம் A: தனித்தானே பக்கம்** +- பரிவர்த்தனை படிவத்திற்கான புதிய HTML வார்ப்புருவை **உருவாக்கவும்** +- உங்கள் வழிச்செலுத்தல் அமைப்பில் புதிய வழியை **சேர்க்கவும்** +- படிவ பக்கத்திற்கும் அதிலிருந்து திருப்புதல் வழிச்செலுத்தல்களை **செயல்படுத்தவும்** + +**விருப்பம் B: மாடல் உரையாடல் ( adviseren )** +- கவனத்தை நகர்த்தாமல் உங்களுக்கு JavaScript பயன்படுத்தி உரையாடலை காட்ட/மறைக்கவும் +- [`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/) உறுதிப்படுத்தவும்: + +**விசைப்பலகை வழிச்செலுத்தல்:** +- உரையாடலை மூட Escape விசையை ஆதரிக்கவும் +- உரையாடல் திறந்திருக்கும் போது கவனம் அதன் உள்ளே இருப்பதை உறுதிப்படுத்தவும் +- உரையாடல் மூடும் போது கவனத்தை முயற்சி பொத்தானுக்கு திருப்பவும் + +**திரை வாசிப் படை ஆதரவு:** +- பொருத்தமான ARIA லேபிள்கள் மற்றும் பங்கு சேர்க்கவும் +- உரையாடல் திறப்பு/மூடு நிகழ்வுகளை திரை வாசிப் படைக்கு அறிவிக்கவும் +- தெளிவான படிவ புல லேபிள்கள் மற்றும் பிழை செய்திகளை வழங்கவும் + +### படி 4: படிவ உருவாக்கல் + +பரிவர்த்தனை தரவுகளை சேகரிக்க ஒரு HTML படிவத்தை **வடிவமைக்கவும்**: + +**தேவையான புலங்கள்:** +- **தேதி**: பரிவர்த்தனை நடந்த தேதி +- **விளக்கம்**: பரிவர்த்தனை செய்கின்ற விபரம் +- **தொகை**: பரிவர்த்தனை மதிப்பு (வருமானம் இருப்பின் நேர்மறை, செலவுகள் இருப்பின் எதிர்மறை) + +**படிவ அம்சங்கள்:** +- சமர்ப்பிப்புக்கு முன் பயனர் உள்ளீட்டை **சரிபார்க்கவும்** +- தவறான தரவுக்கு தெளிவான பிழை செய்திகள் **அறிவிக்கவும்** +- உதவிகரமான இடைமுகத் திருத்தங்கள் மற்றும் லேபிள்களை உள்ளடக்கவும் +- உங்கள் தற்போதைய வடிவமைப்புடன் **தொகுத்தமைக்கவும்** + +### படி 5: API ஒருங்கிணைப்பு + +உங்கள் படிவத்தை பின்னணி API-க்கு இணைக்கவும்: + +**செயல்படுத்தும் படிகள்:** +- [சேவையகம் API குறிப்புகளை](../api/README.md) சரிபார்த்து தொடுப்பும் தரவுப் படிவத்தைப் பெறவும் +- உங்கள் படிவ உள்ளீடுகளிருந்து JSON தரவை உருவாக்கவும் +- பொருத்தமான பிழை கையாளலுடன் API-க்கு தரவை அனுப்பவும் +- பயனருக்கு வெற்றி/தோல்வி செய்திகளை காட்டவும் +- நெட்வொர்க் பிழைகளை மென்மையாக கையாளவும் + +### படி 6: மாநில மேலாண்மை ஒருங்கிணைப்பு + +புதிய பரிவர்த்தனையுடன் உங்கள் டாஷ்போர்டை புதுப்பிக்கவும்: + +**ஒருங்கிணைப்பு தேவைகள்:** +- பரிவர்த்தனை வெற்றிகரமாக சேர்க்கப்பட்ட பிறகு கணக்குத் தரவைக் குதிக்கவும் +- பக்கம் மறுதொகுப்பு இல்லாமல் டாஷ்போர்ட் காட்சி புதுப்பிக்கவும் +- புதிய பரிவர்த்தனை உடனடியாக தெரியும் வகையில் செய்யவும் +- முழு செயல்முறை முழுவதும் சரியான மாநில நிலைத்தன்மையை பராமரிக்கவும் + +## தொழில்நுட்ப விவரங்கள் + +**API தொடுப்பு விவரங்கள்:** +[சேவையகம் API நிரலாக்கக் குறிப்புகளை](../api/README.md) பார்க்கவும்: +- பரிவர்த்தனை தரவிற்கான தேவையான JSON வடிவமைப்பு +- HTTP முறை மற்றும் தொடுப்பு URL +- எதிர்பார்க்கப்பட்ட பதில் வடிவமைப்பு +- பிழை பதில் கையாளல் + +**எதிர்பார்க்கும் முடிவு:** +இந்த பணியை நிறைவு செய்த பிறகு, உங்கள் வங்கி செயலியில் தொழில்முறை தோற்றமும் செயல்பாடும் கொண்ட முழுமையான "பரிவர்த்தனை சேர்க்க" அம்சம் இருக்க வேண்டும்: + +![ஒரு எடுத்துக்காட்டு "பரிவர்த்தனை சேர்க்க" உரையாடலை காட்டும் ஸ்கிரின்ஷாட்](../../../../translated_images/dialog.93bba104afeb79f1.ta.png) + +## உங்கள் செயல்பாட்டை சோதனை செய்தல் + +**செயல்பாட்டு சோதனை:** +1. "பரிவர்த்தனை சேர்க்க" பொத்தான் தெளிவாகக் காணப்படுகிறது மற்றும் அணுகக்கூடியதா என்பதை **சரிபார்க்கவும்** +2. உரையாடல் சரியாக திறக்கும் மற்றும் மூடும் என்பதை **சோதிக்கவும்** +3. அனைத்து தேவையான புலங்களுக்குமான படிவ சரிபார்ப்பு வேலை செய்கிறதா என்று **உறுதி செய்யவும்** +4. வெற்றிகரமான பரிவர்த்தனைகள் உடனடியாக டாஷ்போர்டில் தோன்றுகின்றனவா என்பதை **பரிசோதிக்கவும்** +5. தவறான தரவு மற்றும் நெட்வொர்க் பிரச்சினைகளுக்கான பிழை கையாளல் வேலை செய்கிறதா என்பதை **உறுதிப்படுத்தவும்** + +**அணுகல்திறன் சோதனை:** +1. முழு செயல்முறையையும் விசைப்பலகை மட்டும் பயன்படுத்தி **வழிசெலுத்தவும்** +2. திரை வாசிப்பான் மூலம் சோதனை செய்து சரியான அறிவிக்கைகள் வருகிறதா என்பதை **சரிபார்க்கவும்** +3. கவனம் மேலாண்மை சரியாக இருக்கிறதா என்று **தகவலடையவும்** +4. அனைத்து படிவ கூறுகளும் பொருத்தமான லேபிள்களைக் கொண்டுள்ளதா என்பதை **தயாராய்வார்** + +## மதிப்பீட்டுக் குறியீடு -- டாஷ்போர்டு பக்கத்தில் "பரிவர்த்தனை சேர்க்க" பொத்தானை சேர்க்கவும் -- HTML டெம்ப்ளேட் கொண்ட புதிய பக்கத்தை உருவாக்கவும் அல்லது டாஷ்போர்டு பக்கத்தை விட்டு செல்லாமல் உரையாடல் HTML ஐ காட்ட/மறைக்க JavaScript ஐ பயன்படுத்தவும் (அதற்காக [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) பண்பை அல்லது CSS வகைகளை பயன்படுத்தலாம்) -- உரையாடலுக்கான [keyboard மற்றும் screen reader accessibility](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) ஐ சரியாக கையாளவும் -- உள்ளீட்டு தரவுகளை பெற HTML படிவத்தை செயல்படுத்தவும் -- படிவ தரவுகளிலிருந்து JSON தரவுகளை உருவாக்கி API க்கு அனுப்பவும் -- புதிய தரவுடன் டாஷ்போர்டு பக்கத்தை புதுப்பிக்கவும் +| நிபந்தனை | சிறந்தது | போதுமானது | மேம்படுத்த வேண்டும் | +| -------- | --------- | -------- | ----------------- | +| **செயல்திறன்** | பரிவர்த்தனை அம்சம் சிறந்த பயனர் அனுபவத்துடன் முற்றிலும் செயல்படுகிறது மற்றும் பாடங்களின் அனைத்து சிறந்த நடைமுறைகளையும் பின்பற்றுகிறது | பரிவர்த்தனை அம்சம் சரியாக இயங்குகிறது ஆனால் சில சிறந்த நடைமுறைகளை பின்பற்றாதவையாக இருக்கலாம் அல்லது சிறு பாவனை பிரச்சினைகள் இருக்கலாம் | பரிவர்த்தனை அம்சம் பகுதி மட்டுமே செயல்படுகிறது அல்லது அதன் usability-ல் மிகப்பெரிய பிரச்சினைகள் உள்ளன | +| **குறியீட்டு தரம்** | குறியீடு நன்கு அமைக்கப்பட்டுள்ளது, நெறியிடப்பட்ட முறைமைகள் பின்பற்றப்பட்டு, சரியான பிழை கையாளல் உள்ளது மற்றும் தற்போதைய மாநில மேலாண்மையுடன் இணைந்து செயல்படுகிறது | குறியீடு வேலை செய்கிறது ஆனால் அமைப்பு பிரச்சினைகள் அல்லது தற்போதைய குறியீட்டுடன் ஒத்திசையாமை இருக்கலாம் | குறியீடில் கட்டமைப்பு பிரச்சினைகள் மிகுந்ததால் அல்லது தற்போதைய முறைமைகளுடன் இணைக்கப்படவில்லை | +| **அணுகல்திறன்** | முழு விசைப்பலகை வழிசெலுத்தல் ஆதரவு, திரை வாசிப்பான் பொருத்தம் மற்றும் WCAG வழிகாட்டுதல்களுடன் சிறந்த கவனம் மேலாண்மை | அடிப்படையான அணுகல்திறன் அம்சங்கள் செயல்படுத்தப்பட்டிருக்கலாம் ஆனால் சில விசைப்பலகை வழிசெலுத்தல் அல்லது திரை வாசிப்பான் அம்சங்கள் இல்லாமை இருக்கலாம் | இலிமிட்டோ அல்லது எந்த அணுகல்திறன் கருதுகோள்களும் அமல்படுத்தப்பட்டுள்ளதில்லை | +| **பயனர் அனுபவம்** | புரிந்துகொள்ள எளிதான, துல்லியமான இடைமுகம், தெளிவான பின்னூட்டத்துடன், மென்மையான தொடர்புகள் மற்றும் தொழில்முறை தோற்றம் | சிறந்த பயனர் அனுபவம் ஆனால் பின்னூட்டம் அல்லது பார்வை வடிவமைப்பில் சிறு இடைகள் உள்ளன | குழப்பமான இடைமுகம் அல்லது பயனர் பின்னூட்டமின்மை உடைய குறைபாடான பயனர் அனுபவம் | -எந்த API ஐ அழைக்க வேண்டும் மற்றும் எதிர்பார்க்கப்படும் JSON வடிவம் என்ன என்பதை அறிய [சர்வர் API விவரக்குறிப்புகளை](../api/README.md) பார்க்கவும். +## கூடுதல் சவால்கள் (விருப்பமானவை) -பாடத்தை முடித்த பிறகு பெறப்படும் ஒரு எடுத்துக்காட்டு முடிவை இங்கே காணலாம்: +அடிப்படை தேவைகள் முடிந்த பிறகு, இந்த மேம்படுத்தல்களை பரிசீலிக்கவும்: -![எடுத்துக்காட்டு "பரிவர்த்தனை சேர்க்க" உரையாடலைக் காட்டும் ஸ்கிரீன்ஷாட்](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ta.png) +**மேம்பட்ட அம்சங்கள்:** +- பரிவர்த்தனை வகைகள் சேர்க்கவும் (உணவு, போக்குவரத்து, பொழுதுபோக்கு, மற்றும் பிற) +- நேரடி பின்னூட்டத்துடன் உள்ளீடு சரிபார்ப்பை செயல்படுத்தவும் +- சக்திவாய்ந்த பயனர்களுக்கான விசைப்பலகை மாற்றுருக்கள் உருவாக்கவும் +- பரிவர்த்தனை திருத்தம் மற்றும் நீக்குதல் செயல்பாடுகளைக் கொண்டு வரவும் -## மதிப்பீடு +**மேம்பட்ட ஒருங்கிணைப்பு:** +- சமீபத்தில் சேர்ந்த பரிவர்த்தனைகளுக்கான முன்னோக்கி செயல்பாட்டை அமல்படுத்தவும் +- CSV கோப்புகளிலிருந்து மிகப்பெரிய பரிவர்த்தனை இறக்குமதி சேர்க்கவும் +- பரிவர்த்தனை தேடல் மற்றும் வடிகட்டும் திறன்களை உருவாக்கவும் +- தரவு ஏற்று செயல்பாட்டை செயல்படுத்தவும் -| அளவுகோல் | சிறந்தது | போதுமானது | மேம்பாடு தேவை | -| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------| -| | பரிவர்த்தனை சேர்க்கும் செயல்பாடு பாடங்களில் காணப்பட்ட சிறந்த நடைமுறைகளை முழுமையாக பின்பற்றி செயல்படுத்தப்பட்டுள்ளது. | பரிவர்த்தனை சேர்க்கும் செயல்பாடு செயல்படுத்தப்பட்டுள்ளது, ஆனால் பாடங்களில் காணப்பட்ட சிறந்த நடைமுறைகளை பின்பற்றவில்லை அல்லது பகுதியளவில் மட்டுமே செயல்படுகிறது. | பரிவர்த்தனை சேர்க்கும் செயல்பாடு முற்றிலும் செயல்படவில்லை. | +இந்த விருப்ப அம்சங்கள் உங்கள் வலை வளர்ச்சி திறன்களை மேம்படுத்தவும் முழுமையான வங்கி செயலியை உருவாக்கவும் உதவும்! --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**மறுப்பு**: +இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. சரியான்தன்மைக்காக முயற்சிப்பினும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுக்கள் ஏற்படலாம் என்பதை தயவுசெய்து அறிவீர்கள். அதன் சொந்த மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். மிக முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்தரிக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்தியதால் ஏற்படும் எந்தவொரு புரிதல் தவறுகளுக்கும் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பல்லோம். + \ No newline at end of file diff --git a/translations/ta/7-bank-project/README.md b/translations/ta/7-bank-project/README.md index 213a41f08..f6fe4fe9c 100644 --- a/translations/ta/7-bank-project/README.md +++ b/translations/ta/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: இந்த திட்டத்தில், நீங்கள் ஒரு கற்பனை வங்கியை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்வீர்கள். இந்த பாடங்கள் ஒரு வலை பயன்பாட்டை அமைப்பது மற்றும் வழிகள் வழங்குவது, படிவங்களை உருவாக்குவது, நிலையை நிர்வகிப்பது, மற்றும் API-இல் இருந்து வங்கியின் தரவுகளை பெறுவது போன்ற வழிமுறைகளை உள்ளடக்கியது. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ta.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ta.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.ta.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.ta.png) | |--------------------------------|--------------------------------| ## பாடங்கள் diff --git a/translations/ta/8-code-editor/1-using-a-code-editor/README.md b/translations/ta/8-code-editor/1-using-a-code-editor/README.md index 99509b6b4..9f933a980 100644 --- a/translations/ta/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ta/8-code-editor/1-using-a-code-editor/README.md @@ -1,175 +1,639 @@ -*** +# குறியீட்டு நிரலாக்கி பயன்படுத்துவது: VSCode.dev க்கான சிறந்த பயிற்சி + +*தி மாட்ரிக்ஸ்* திரைப்படத்தில் நீயோ ஒரு பெரிய கணினி முனையத்துடன் இணைக்கப்பட்டு டிஜிட்டல் உலகத்தை அணுகினதை நினைவிருக்கிறதா? இன்றைய வலை வளர்ச்சி கருவிகள் அது மாறான கதை – எங்கிருந்தும் அணுகக்கூடிய அற்புதமான திறன்கள். VSCode.dev என்பது உலாவியில் இயங்கும் குறியீட்டு நிரலாக்கி, இணைய இணைப்புடன் எந்த சாதனத்திலும் தொழில்முறை வளர்ச்சி கருவிகளை கொண்டுவரும். + +புத்தக அச்சிடும் எந்திரம் அவசியம் இல்லாமல் பொதுமக்களுக்கு புத்தகங்களை கொண்டு வந்ததைப்போல், VSCode.dev குறியீட்டினை பொது மக்களுக்கு உரிமையாக்குகிறது. நூலக கணினி, பள்ளி ஆய்வகம் அல்லது உலாவி கிடைக்கும் எங்கும் நீங்கள் பணியாற்ற முடியும். ஏதுமில்லை நிறுவற்புகளும், “எனக்கு எனது தனியுரிமை அமைப்பு வேண்டும்” என்ற வரம்புகளும். + +இந்த பாடத்தின் முடிவில், நீங்கள் VSCode.dev ஐ எவ்வாறு பாவிக்க செல்லுவது, உலாவியில் நேரடியாக GitHub சேமிப்பகங்களை திறந்து பணியாற்றுவது, மற்றும் பதிப்பு கட்டுப்பாட்டிற்கான Git பயன்பாட்டை புரிந்துகொள்வீர்கள் – இவை தொழில்முறை வளர்ப்பாளர்கள் தினசரி பயன்படுத்தும் திறன்கள். + +## ⚡ அடுத்த 5 நிமிடங்களில் நீங்கள் செய்யக்கூடியவை + +**பிஸி வளர்ப்பாளர்களுக்கான விரைவு துவக்கம்** + +```mermaid +flowchart LR + A[⚡ 5 நிமிடங்கள்] --> B[https://vscode.dev பார்க்கவும்] + B --> C[GitHub கணக்கை இணைக்கவும்] + C --> D[எந்தவொரு சேமிப்பகத்தையும் திறக்கவும்] + D --> E[உடனடியாக திருத்தச் தொடங்கவும்] +``` +- **நிமிடம் 1**: [vscode.dev](https://vscode.dev)க்கு செல் – நிறுவல் தேவையில்லை +- **நிமிடம் 2**: உங்கள் GitHub கணக்கில் உள்நுழைந்து சேமிப்பகங்களை இணை +- **நிமிடம் 3**: URL மோசடி முயற்சி செய்: எந்த repos URLயிலும் `github.com` ஐ `vscode.dev/github` ஆக மாற்று +- **நிமிடம் 4**: புதிய கோப்பை உருவாக்கு, உருவாக்கும் போது பாங்கு வண்ணமயமாகிறது +- **நிமிடம் 5**: மாற்றம் செய்யவும் Source Control பலகையில் இருந்து commit செய் + +**விரைவு சோதனை URL**: +``` +# Transform this: +github.com/microsoft/Web-Dev-For-Beginners + +# Into this: +vscode.dev/github/microsoft/Web-Dev-For-Beginners +``` + +**ஏன் இது முக்கியம்**: 5 நிமிடத்தில் நீங்கள் எங்கிருந்து வேண்டுமானாலும் தொழில்முறை கருவிகளுடன் குறியீட்டை உருவாக்கும் சுதந்திரத்தை அனுபவிப்பீர்கள். இது வளர்ச்சியின் எதிர்காலத்தை குறிக்கும் – அணுகக்கூடியது, சக்திவாய்ந்தது, உடனடி. + +## 🗺️ மேகம் அடித்த வளர்ச்சி பயணம் + +```mermaid +journey + title உள்ளூர் அமைப்பில் இருந்து கிளவுட் வளர்ச்சியில் நிபுணத்துவம் + section தளம் புரிந்துகொள்ளல் + வலைதளம் அடிப்படை தொடர்பானத் திருத்தத்தை கண்டுபிடி: 4: You + GitHub சூழலை இணைத்தல்: 6: You + இடைமுகம் வழிசெலுத்தலில் நிபுணத்துவம் பெறு: 7: You + section கோப்பு மேலாண்மை திறன்கள் + கோப்புகளை உருவாக்கி ஒழுங்குபடுத்து: 5: You + எழுத்துத்தள வண்ணமயமுபடுத்தல் மூலம் திருத்து: 7: You + திட்ட கட்டமைப்புகளை வழிசெல்: 8: You + section பதிப்பு கட்டுப்பாட்டு நிபுணத்துவம் + Git இணைப்பை புரிந்துகொள்: 6: You + செயல்பாடு கமிட்டுப் பயிற்சி மேற்கொள்: 8: You + ஒத்துழைப்பு வடிவமைப்புகளை நிபுணப்படுத்து: 9: You + section தொழில்முறை தனிப்பயன் + சக்திவாய்ந்த நீட்சிகளை நிறுவு: 7: You + வளர்ச்சிப் பரிமாணத்தை அமைக்க: 8: You + தனிப்பட்ட செயல்முறை உருவாக்கு: 9: You +``` +**உங்கள் பயண இலக்கு**: இந்த பாடத்தின் முடிவில், நீங்கள் தொழில்முறை மேகம் அடித்த வளர்ச்சி சூழலை முழுமையாக கையாளக்கூடியவர் ஆகி இருக்கும், அது எந்த சாதனத்திலும் வேலை செய்யும், பெரிய தொழில் நிறுவனங்களில் பயன்படுத்தப்படும் கருவிகளுடன் குறியீடு செய்வதற்கு உதவும். + +## நீங்கள் கற்றுக்கொண்டிட போகும் விஷயங்கள் + +கூடுகாட்டி பின்பற்றுவதற்கு பிறகு, நீங்கள் முடியும்: + +- VSCode.dev இல் இரண்டாம் வீட்டுப்போல் வழிசெல்ல – தேவைப்படும் அனைத்தையும் இழந்துவிடாமல் கண்டுபிடி +- எந்த GitHub சேமிப்பகத்தையும் உலாவியில் திறந்து உடனடியாக திருத்த ஆரம்பி (இது அதிசயகரமானது!) +- Git பயன்படுத்தி உங்கள் மாற்றங்களை கண்காணித்து முன்னேற்றத்தை பாதுகாப்பது +- விருப்ப விரிவாக்கங்களுடன் உங்கள் நிரலாக்கியை வேகமாகவும் மகிழ்ச்சியுடனும் மாற்று +- திட்ட கோப்புகளை நம்பிக்கையுடன் உருவாக்க மற்றும் அழகு செய்ய + +## உங்களிடம் என்ன தேவை + +தேவைகள் வெறும் சில: + +- ஒரு இலவச [GitHub கணக்கு](https://github.com) (தேவையானால் உருவாக்க வழிகாட்டுவோம்) +- வலை உலாவிகளுக்கு அடிப்படை அறிவு +- GitHub அடிப்படைகள் பாடம் பயனுள்ளதாக இருக்கும், ஆனால் அவசியமில்லை + +> 💡 **GitHub புதியவரா?** கணக்கு உருவாக்குவது இலவசம் மற்றும் சில நிமிடங்களில் முடியும். நூலக அட்டை போல உலகக் நூலகங்களில் புத்தகம் வாசிப்பதற்கு அனுமதி தருவது போல, GitHub கணக்கு இணையத்தின் முழுவதும் உள்ள குறியீட்டு சேமிப்பகங்களை அணுக உதவும். + +## 🧠 மேகம் அடித்த வளர்ச்சி சூழல் அறிமுகம் + +```mermaid +mindmap + root((VSCode.dev தலைமை)) + Platform Benefits + Accessibility + உபகரண தன்னாட்சி + நிறுவல் தேவையில்லை + உடனடி புதுப்பிப்புகள் + உலகளாவிய அணுகல் + Integration + GitHub இணைப்பு + களஞ்சிய ஒத்திசைவு + அமைப்புகள் நிலைத்தன்மை + ஒத்துழைப்பு தயார் + Development Workflow + File Management + திட்ட அமைப்பு + இலக்கணம் ஒளிர்வு + பலடுக்கு திருத்தம் + தானாகச் சேமிப்பு வசதிகள் + Version Control + Git ஒருங்கակցை + பரிபாட்டு வேலைப்பாடுகள் + கிளை நிர்வாகம் + மாற்றங்கள் கண்காணிப்பு + Customization Power + Extensions Ecosystem + உற்பத்தித்தன்மை கருவிகள் + மொழி ஆதரவு + தீம் விருப்பங்கள் + தனிப்பயன் சுருக்கங்கள் + Environment Setup + தனிப்பட்ட விருப்பங்கள் + பணியிட கட்டமைப்பு + கருவி ஒருங்கிணைவு + பணிச்சூழல் மேம்பாடு + Professional Skills + Industry Standards + பதிப்பு கட்டுப்பாடு + குறியீட்டு தரம் + ஒத்துழைப்பு + ஆவணப்படுத்தல் + Career Readiness + தொலைதூர வேலை + மேகம் அபிவிருத்தி + குழு திட்டங்கள் + திறந்த மூலக் குறியீடு +``` +**முக்கியக் கொள்கை**: மேகம் அடித்த வளர்ச்சி சூழல்கள் குறியீட்டின் எதிர்காலம் – தொழில்முறை கருவிகள் அணுகக்கூடியவை, ஒத்துழைப்புடையவை, மற்றும் தளங்களின் அடிப்படையில் இல்லாதவை. + +## இணைய அடிப்படை குறியீட்டு நிரலாக்கிகள் ஏன் அவசியம் + +இணையம் இன்றி, பல பல்கலைக் கழக ஆய்வாளர்கள் எளிதில் ஆராய்ச்சி பகிரவில்லை. பின்னர் 1960களில் ARPANET தோன்றினது,தொலை விலான கணினிகளை இணைத்தது. இணைய அடிப்படையிலான குறியீட்டு நிரலாக்கிகள் அதே கொள்கையை பின்பற்றுகின்றன – சக்திவாய்ந்த கருவிகளை எந்த இடத்தில் நீங்கள் இருந்தாலும் கொண்டு வருவது. + +ஒரு குறியீட்டு நிரலாக்கி, உங்கள் வளர்ச்சி பணிக்கிடையாக செயல்படுகிறது, இதில் குறியீட்டை நீங்கள் எழுத, திருத்த, மற்றும் கோப்புகளை ஒழுங்குபடுத்தலாம். எளிய உரை நிரலாக்கிகளுக்கு மாறாக, தொழில்முறை குறியீட்டு நிரலாக்கிகள் பாங்கு வண்ணமயக்கவும், பிழை கண்டறியும் மற்றும் திட்ட மேலாண்மை அம்சங்கள் வழங்குகின்றன. + +VSCode.dev இந்த சக்திகளை உலாவியில் கொண்டு வருகிறது: + +**இணைய அடிப்படை திருத்தம் மூல விளைவுகள்:** + +| அம்சம் | விளக்கம் | நடைமுறை நன்மை | +|---------|-------------|----------| +| **தள பரிசுத்தன்மை** | உலாவியுள்ள எந்த சாதனத்திலும் இயங்கும் | வித்தியாசமான கணினிகளிலிருந்து சாதகமான வேலை | +| **நிறுவல் தேவையில்லை** | இணைய URL மூலம் அணுகும் | மென்பொருள் நிறுவலைத் தவிர்க்கும் | +| **தானியங்கி புதுப்பிப்புகள்** | எப்போதும் சமீபத்திய பதிப்பு இயங்கும் | புதிய அம்சங்களை கைமுறையாக புதுப்பிக்க வேண்டாம் | +| **சேமிப்பக ஒருங்கிணைப்பு** | நேரடி GitHub கூடை | உள்ளூர் கோப்புகள் இல்லாமல் குறியீடு திருத்தவும் | + +**நடைமுறை விளைவுகள்:** +- வித்தியாசமான சூழல்களில் வேலை தொடர்ச்சி +- இயங்கு முறை இல்லாமல் ஒரே மைய இடைமுகம் +- உடனடி ஒத்துழைப்பு திறன் +- குறைவான உள்ளூர் சேமிப்பு தேவை + +## VSCode.dev ஐ ஆராய்ச்சி + +மேரி கியூரி ஆய்வகத்தில் சிக்கலான கருவிகள் இருந்தபோலும், VSCode.dev ஒரு உலாவி இடைமுகத்தில் தொழில்முறை வளர்ச்சி கருவிகளை அழுத்துகிறது. இந்த இணைய செயலி மேசை குறியீட்டு நிரலாக்கிகளின் அதே அடிப்படையான செயல்திறனை வழங்குகிறது. + +உலாவியில் [vscode.dev](https://vscode.dev) ஐ திறந்து தொடங்கு. இடைமுகம் பதிவிறக்கம் அல்லது அமைப்பு இல்லாமல் ஏற்றப்படும் – மேகம் கணினி கொள்கையின் நேரடி அலகு. + +### உங்கள் GitHub கணக்குடன் இணைப்பு + +அலெக்சாண்டர் கிராஹாம் பெல்லின் தொலைபேசி தொலைதூரங்களை இணைத்த போல, உங்கள் GitHub கணக்கை இணைப்பது VSCode.dev மற்றும் உங்கள் குறியீட்டு சேமிப்பகங்களை இணைக்கும் பாலம் ஆகும். GitHub உடன் உள்நுழைவதற்கான அழைப்பை நீங்கள் ஏற்கவும் பரிந்துரைக்கப்படுகிறது. + +**GitHub ஒருங்கிணைப்பு வழங்குகிறது:** +- நிரலாக்கியில் உங்கள் சேமிப்பகங்களுக்கு நேரடி அணுகல் +- சாதனங்களுக்கு தாண்டி ஒருங்கிணைந்த அமைப்புகள் மற்றும் விரிவாக்கங்கள் +- GitHubக்கு சேமிப்புத் திட்டத்தின் ஒருங்கிணைந்த வேலைநெறி +- தனிப்பட்ட வளர்ச்சி சூழல் + +### உங்கள் புதிய பணிக்கிடையை அறிதல் + +எல்லாம் ஏற்றப்பட்டதும், நீங்கள் அழகாக சுத்தமான ஒரு பணிக்கிடையை பார்வையிடுவீர்கள், இது உங்களை உங்கள் குறியீடுங்கு கவனம் செலுத்த எளிதாக்கும்! + +![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ta.png) + +**கார்த்திடம் சுற்றியபடியே:** +- **செயற்பாட்டு பட்டை** (இடதுபுறம் பட்டை): முக்கியத் திசைநிலை, Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, மற்றும் Settings ⚙️ உள்ளது +- **பக்கவட்டம்** (அதனுடன் அடுத்த பக்கம்): நீங்கள் தேர்ந்தெடுத்துள்ளதை வைத்து தொடர்புடைய தகவலை காட்டும் +- **நிரலாக்க மண்டலம்** (நடுத்தர பகுதி): இங்கே மந்திரம் நடக்கும் – உங்கள் முக்கிய குறியீட்டு பகுதி + +**சற்று நேரம் செலுத்து ஆராய:** +- செயற்பாட்டு பட்டை ஐகான்களை எட்டு கிளிக் செய்து செயல்பாட்டை பார் +- பக்கவட்டம் எண்ணற்ற தகவல்களை மாற்றிக் காட்டுவதை கவனித்துப் பார் – அருமை! +- Explorer பார்வை (📁) தான் நீங்கள் அதிக நேரம் செலவிடும் இடம், அதற்கு பழகிக் கொள்ளுங்கள் + +```mermaid +flowchart TB + subgraph "VSCode.dev இடைமுக கட்டமைப்பு" + A[செயற்பாட்டு பட்டை] --> B[ஆய்வாளர் 📁] + A --> C[தேடல் 🔍] + A --> D[மூல கட்டுப்பாடு 🌿] + A --> E[விரிவாக்கங்கள் 🧩] + A --> F[அமைப்புகள் ⚙️] + + B --> G[கோப்பு மரம்] + C --> H[காண் & மாற்று] + D --> I[கிட் நிலை] + E --> J[விரிவாக்க சந்தை] + F --> K[கட்டமைப்பு] + + L[பக்க பட்டை] --> M[சூழல் பற்றுணர்வு பலகை] + N[எடிட்டர் பகுதி] --> O[குறியீட்டு கோப்புகள்] + P[வழிமுறை/வெளியீடு] --> Q[கட்டளை வரி] + end +``` +## GitHub சேமிப்பகங்களை திறக்குதல் -# கோட் எடிட்டர் பயன்படுத்துவது: [VSCode.dev](https://vscode.dev) கற்றல் +இணையம் இன்றி முன்பு ஆய்வாளர்கள் நூலகங்களுக்கு பயணம் செய்து ஆவணங்களை அணுகுங்கள். GitHub சேமிப்பகங்கள் அதே போல – தொலைத்தில் சேமிக்கப்பட்ட குறியீடு தொகுப்புகள். VSCode.dev அந்தப் பழைய பாரம்பரிய வழியை தவிர்க்கிறது, உள்ளூரில் பதிவிறக்காமே திருத்த அனுமதிக்கிறது. -**வரவேற்கிறோம்!** -இந்த பாடம் உங்களை [VSCode.dev](https://vscode.dev)—இந்த சக்திவாய்ந்த, வலை அடிப்படையிலான கோட் எடிட்டரை அடிப்படையிலிருந்து மேம்பட்ட பயன்பாட்டிற்கு அழைத்துச் செல்கிறது. நீங்கள் எந்த நிறுவலுமின்றி உலாவியில் இருந்து நேரடியாக கோடுகளை திருத்துவது, திட்டங்களை நிர்வகிப்பது, மாற்றங்களை கண்காணிப்பது, நீட்சிகளை நிறுவுவது மற்றும் தொழில்முறை போல ஒத்துழைப்பது போன்றவற்றை நம்பிக்கையுடன் கற்றுக்கொள்வீர்கள். +இந்த திறன், எந்த பொது சேமிப்பகத்தையும் உடனடியாக பார்வை, திருத்தம் அல்லது பங்களிப்பதற்கு வழி செய்கிறது. சேமிப்பகங்களை திறக்கும் இரண்டு முறைகள்: -*** +### முறை 1: கிளிக் செய்து திறக்கல் -## கற்றல் நோக்கங்கள் +VSCode.dev இல் புதியபடையாக இருந்து ஒரு குறிப்பிட்ட சேமிப்பகத்தை திறக்க இது சிறந்தது. எளிமையானதும் துவக்கத்திற்கானதும்: -இந்த பாடத்தின் முடிவில், நீங்கள்: +**இங்கே செய்முறை:** -- எந்த திட்டத்திலும், எங்கிருந்தும் திறம்பட ஒரு கோட் எடிட்டரைப் பயன்படுத்த முடியும் -- உள்ளமைக்கப்பட்ட பதிப்பு கட்டுப்பாட்டுடன் உங்கள் பணியை எளிதாக கண்காணிக்க முடியும் -- எடிட்டர் தனிப்பயனாக்கங்கள் மற்றும் நீட்சிகளுடன் உங்கள் மேம்பாட்டு பணியை மேம்படுத்த முடியும் +1. [vscode.dev](https://vscode.dev)ல் போவதற்கு +2. வரவேற்பு திரையில் "Open Remote Repository" பொத்தானை காணவும் கிளிக் செய்யவும் -*** + ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ta.png) -## முன் தேவைகள் +3. எந்த GitHub சேமிப்பக URLயை வேண்டுமானாலும் ஒட்டவும் (உதாரணம்: `https://github.com/microsoft/Web-Dev-For-Beginners`) +4. Enter அழுத்தி மாயத்தை பாருங்கள்! -தொடங்க, **ஒரு இலவச [GitHub](https://github.com) கணக்கிற்கு பதிவு செய்யுங்கள்**, இது உங்களுக்கு கோட் ரெப்போசிடரிகளை நிர்வகிக்கவும், உலகளாவிய அளவில் ஒத்துழைக்கவும் உதவும். உங்களிடம் கணக்கு இல்லையெனில், [இங்கே உருவாக்கவும்](https://github.com/). +**திறமையான குறிப்பு - கட்டளை பட்டி சுருக்கம்:** -*** +ஒரு குறியீட்டு குருவாக உணர விரும்புகிறீர்களா? இக் கீபோர்டு சுருக்கத்தை முயற்சி: Ctrl+Shift+P (அல்லது Macஇல் Cmd+Shift+P) கட்டளை பட்டி திறக்கும்: -## ஏன் ஒரு வலை அடிப்படையிலான கோட் எடிட்டரை பயன்படுத்த வேண்டும்? +![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.ta.png) -**கோட் எடிட்டர்** போன்ற VSCode.dev உங்கள் கோடுகளை எழுத, திருத்த மற்றும் நிர்வகிக்க ஒரு கட்டளைக் களமாக செயல்படுகிறது. எளிய இடைமுகம், ஏராளமான அம்சங்கள் மற்றும் உலாவி மூலம் உடனடி அணுகல் ஆகியவற்றுடன், நீங்கள்: +**கட்டளை பட்டி உங்கள் எல்லா செயல்களுக்கும் தேடுபொறி போல:** +- "open remote" என நுழைக்கும் போது தொடர்புடைய சேமிப்பகம் திறப்பு காட்டும் +- சமீபத்தில் திறந்த சேமிப்பகங்களை நினைவில் வைக்கின்றது (மிக உதவிகரமாக உள்ளது!) +- பயன்படுத்த பழகினால் இறைவேம்போல் குறியீடு எழுதும் உணர்வு +- இது VSCode.dev இன் "ஹே Siri, குறியீட்டிற்கு" பதிப்பு -- எந்த சாதனத்திலும் திட்டங்களைத் திருத்தலாம் -- நிறுவல் சிக்கல்களை தவிர்க்கலாம் -- உடனடியாக ஒத்துழைத்து பங்களிக்கலாம் +### முறை 2: URL மாற்றுவது -VSCode.dev-ஐ நீங்கள் நன்கு கையாளத் தெரிந்த பிறகு, எங்கிருந்தும், எப்போது வேண்டுமானாலும் கோடிங் பணிகளைச் செய்ய தயாராக இருப்பீர்கள். +HTTP மற்றும் HTTPS protocol மாறுவது போல், VSCode.dev URL வடிவம் GitHub முகவரியை பிரதிபலிக்கும். எந்த GitHub சேமிப்பகம் URLயும் VSCode.dev இல் நேரடியாக திறக்க மாற்ற முடியும். -*** +**URL மாற்ற மாதிரி:** -## VSCode.dev-ஐ தொடங்குவது எப்படி +| சேமிப்பக வகை | GitHub URL | VSCode.dev URL | +|----------------|---------------------|----------------| +| **பொது சேமிப்பகம்** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` | +| **தனிப்பட்ட திட்டம்** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` | +| **எந்த தரவுக்கூடம்** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` | -**[VSCode.dev](https://vscode.dev)**-க்கு செல்லுங்கள்—நிறுவல் தேவையில்லை, பதிவிறக்கம் தேவையில்லை. GitHub-இல் உள்நுழைவது முழு அணுகலை திறக்கிறது, அதில் உங்கள் அமைப்புகள், நீட்சிகள் மற்றும் ரெப்போசிடரிகளை ஒத்திசைக்கவும் அடங்கும். கேட்கப்பட்டால், உங்கள் GitHub கணக்கை இணைக்கவும். +**விளக்கம்:** +- `github.com` ஐ `vscode.dev/github` ஆக மாற்று +- மற்ற URL பகுதிகள் மாற்றாதே +- எந்த பொது சேமிப்பகத்திலும் வேலை செய்கிறது +- உடனடி திருத்த பயன்பாடு தருகிறது -ஏற்றப்பட்ட பிறகு, உங்கள் பணிமனை இவ்வாறு இருக்கும்: +> 💡 **உயிர் மாற்றும் சலுகை**: உங்கள் விருப்பமான சேமிப்பகங்களின் VSCode.dev பதிப்புகளை புத்தகமாக்குங்கள். என் புத்தகங்களில் "என் போர்ட்ஃபோலியோ திருத்து" மற்றும் " ஆவண திருத்து" போன்றவை உள்ளன, நேரடியாக திருத்துகளுக்கு போக! -![Default VSCode.dev](../images/default-vscode-dev மூன்று முக்கிய பகுதிகளைக் கொண்டுள்ளது இடமிருந்து வலமாக: -- **செயல்பாட்டு பட்டை:** 🔎 (தேடல்), ⚙️ (அமைப்புகள்), கோப்புகள், மூலக் கட்டுப்பாடு போன்ற ஐகான்கள். -- **சைட்பார்:** செயல்பாட்டு பட்டை ஐகான் தேர்ந்தெடுக்கப்பட்டதன் அடிப்படையில் சூழலை மாற்றுகிறது (இயல்பாக *Explorer* ஆக இருக்கும்). -- **எடிட்டர்/கோட் பகுதி:** வலது பக்கம் மிகப்பெரிய பகுதி—இங்கு நீங்கள் கோடுகளை திருத்தவும் காணவும் முடியும். +**எந்த முறையை பயன்படுத்தலாம்?** +- **இடைமுகம் வழி**: நீங்கள் ஆராய்வதற்கோ அல்லது சரியான சேமிப்பக பெயர்கள் நினைவில்லாதபோது சிறந்தது +- **URL பாவனை**: எங்கே செல்லவென்று தெரிந்துவிட்டால் வேகமாக அனுக -அம்சங்களை ஆராய ஐகான்களை கிளிக் செய்யவும், ஆனால் உங்கள் இடத்தைத் திரும்பப் பெற _Explorer_க்கு திரும்பவும். +### 🎯 கல்வி சோதனை: மேகம் அடிப்படையிலான அணுகல் -*** +**சிந்தனை இடுங்கவும்**: நீங்கள் இணைய உலாவியில் குறியீட்டு சேமிப்பகங்களை திறக்கும் இரண்டு முறைகளை கற்றுக்கொண்டீர்கள். இது வளர்ச்சியில் இயல்பான மாற்றம். -## GitHub ரெப்போசிடரியை திறக்க +**விரைவான சரிபார்ப்பு:** +- இணைய அடிப்படை திருத்தம் "வளர்ச்சி சூழல் அமைப்பு" தேவையை எவ்வாறு அகற்றுகிறது? +- URL மாற்ற முறை உள்ளூர் git க்ளோனுக்கு காட்டிலும் என்ன நன்மையை வழங்குகிறது? +- இந்த அணுகல் திறந்த மூல திட்டங்களில் பங்களிப்பை எப்படி மாற்றும்? -### முறை 1: எடிட்டரிலிருந்து +**உண்மை உலக இணைப்பு**: GitHub, GitLab, Replit போன்ற நிறுவனங்கள் இந்த மேகம் முதன்மையிலான கொள்கைகளில் தங்கள் வளர்ச்சி தளங்களை கட்டியுள்ளன. இவை தொழில்முறை வளர்ச்சி அணிகளின் வேலைப்பாடுகளை நீங்கள் கற்று வருகிறீர்கள். -1. [VSCode.dev](https://vscode.dev)க்கு செல்லவும். **"Open Remote Repository"** என்பதை கிளிக் செய்யவும். +**சவால் கேள்வி**: மேகம் அடித்த வளர்ச்சி பள்ளிகளில் குறியீடு கற்றலை எப்படி மாற்றலாம்? சாதன தேவைகள், மென்பொருள் மேலாண்மை மற்றும் ஒத்துழைப்பு வாய்ப்புகளை கவனியுங்கள். - ![Open remote repository](../../../../8-code-editor/images/open-remote-repository _Command Palette_ (Ctrl-Shift-P, அல்லது Mac-ல் Cmd-Shift-P) பயன்படுத்தவும். +## கோப்புகள் மற்றும் திட்டங்களுடன் பணியாற்றுதல் - ![Palette Menu](../images/palette-menu.pngopen remote repository.” - - விருப்பத்தைத் தேர்ந்தெடுக்கவும். - - உங்கள் GitHub ரெப்போ URL ஐ (எ.கா., `https://github.com/microsoft/Web-Dev-For-Beginners`) ஒட்டவும் மற்றும் Enter அழுத்தவும். +சேமிப்பகம் திறந்துவிட்டதுபோல், ஆரம்பிக்கலாம்! VSCode.dev உங்களுக்கு தேவையான அனைத்தையும் கொடுக்கிறது – குறியீட்டு கோப்புகளை உருவாக்க, திருத்த, ஒழுங்குபடுத்து. உங்கள் டிஜிட்டல் கனவு தொழிற்சாலையாக இது இருக்கிறது – தேவையான கருவிகள் எல்லாம் அருகில் இருக்கும். -வெற்றிகரமாக இருந்தால், முழு திட்டமும் ஏற்றப்பட்டு திருத்தத்திற்குத் தயாராக இருக்கும்! +வாராந்திர பணிகளின் அடிப்படையான வேலைகளுக்கு ஆகையா நுழைக. -*** +### புதிய கோப்புகளை உருவாக்குதல் -### முறை 2: URL மூலம் உடனடியாக +வடிவமைப்பாளரின் அலுவலகத்தில் வரைபடங்கள் கட்டமைப்பது போல, VSCode.dev இல் கோப்புகளை உருவாக்க கூர்மையான முறையில் நடந்து கொள்ளிறது. அனைத்து வழக்கமான வலை வளர்ச்சி கோப்புச் சுருக்கங்களையும் இது ஆதரிக்கிறது. -எந்த GitHub ரெப்போ URL-யையும் `github.com` ஐ `vscode.dev/github` ஆக மாற்றி நேரடியாக VSCode.dev-ல் திறக்கவும். -எ.கா.: +**கோப்பு உருவாக்கம் பணிகள்:** -- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners` -- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners` +1. Explorer பக்கவட்டத்தில் இலக்கு கோப்புறைக்கு செல்லவும் +2. கோப்புறையின் பெயருக்குத் தெறிக்கும் போது “புதிய கோப்பு” ஐகானை காணவும் (📄+) +3. கோப்பின் பெயர் மற்றும் சரியான நீட்சியை உள்ளீடு செய்க (`style.css`, `script.js`, `index.html`) +4. Enter அழுத்தி கோப்பை உருவாக்கவும் -இந்த அம்சம் எந்த திட்டத்திற்கும் விரைவான அணுகலை அதிகரிக்கிறது. +![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.ta.png) -*** +**பெயரிடல் நடைமுறைகள்:** +- கோப்பின் குறிக்கோளை வெளிப்படுத்தும் விளக்கமான பெயர்கள் வையுங்கள் +- சரியான பாங்கு வண்ண மயக்கும் நீட்சிகள் அடங்கும் +- முழு திட்டம் முழுவதும் ஒருங்கிணைந்த பெயரிடல் +- இடைவெளி பதிலாக சிறிய எழுத்துக்கள் மற்றும் - பாவனை -## உங்கள் திட்டத்தில் கோப்புகளை திருத்துவது +### கோப்புகளை திருத்தி சேமிக்கும் -உங்கள் ரெப்போ திறந்தவுடன், நீங்கள் செய்யக்கூடியவை: +இங்கே உண்மையான பொழுது தொடங்குகிறது! VSCode.dev தொகுப்பாளர் உதவிகளுடன் நுட்பமான மற்றும் நிவாரணமிக்க நிரலாக்க அனுபவத்தை வழங்குகிறது. இது உங்கள் குறியீட்டு உதவியாளராகிய ஒரு போல. -### 1. **புதிய கோப்பை உருவாக்கவும்** -- *Explorer* சைட்பாரில், உங்கள் விருப்பமான கோப்புறையிலோ அல்லது மூலத்தில் சென்று செல்லவும். -- _‘New file ...’_ ஐகானை கிளிக் செய்யவும். -- உங்கள் கோப்பிற்கு பெயர் கொடுத்து, **Enter** அழுத்தவும், உடனடியாக உங்கள் கோப்பு தோன்றும். +**திருத்த செய்யும் செயற்பாடு:** -![Create a new file](../images/create-new-file 2. **கோப்புகளை திருத்தவும் மற்றும் சேமிக்கவும்** +1. Explorer இல் எந்த கோப்பும் கிளிக் செய்து முக்கிய பகுதியில் திற +2. எழுத ஆரம்பித்து நீ விசுப்படம், பரிந்துரைகள் மற்றும் பிழை கண்டறிதல் அனுபவிக்க +3. Ctrl+S (Windows/Linux) அல்லது Cmd+S (Mac) மூலம் ஏற்றவும் – தானாக சேமிப்பும் உள்ளது! -- *Explorer*ல் ஒரு கோப்பை கிளிக் செய்து, அதை கோட் பகுதியில் திறக்கவும். -- தேவையான மாற்றங்களைச் செய்யவும். -- VSCode.dev உங்கள் மாற்றங்களை தானாகவே சேமிக்கிறது, ஆனால் நீங்கள் Ctrl+S அழுத்தி கையேடு முறையில் சேமிக்கலாம். +![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ta.png) -![Edit a file](../images/edit-a-file.png. **மாற்றங்களை கண்காணித்து, கமிட் செய்யவும்** +**நீ குறியீடு எழுதும் போது நடக்கும் அற்புதங்கள்:** +- குறியீடு அழகான நிறம் கொண்டது, வாசிக்க எளிது +- VSCode.dev எழுதும் போது முடிப்புகளை பரிந்துரைக்கும் (ஆட்டோ கரெக்ட் போல், ஆனால் நுண்ணறிவு) +- நீங்கள் சேமிக்க பொதவாக பிழைகள் மற்றும் துண்டுகளைக் கண்டறியும் +- பல கோப்புகளை உலாவித் தாவல்களில் திறந்து வைக்க முடியும் +- எல்லாம் பின்னணியில் தானாக சேமிக்கப்படுகிறது -VSCode.dev இல் **Git** பதிப்பு கட்டுப்பாடு ஒருங்கிணைக்கப்பட்டுள்ளது! +> ⚠️ **விரைவான குறிப்பு**: தானாக சேமிப்பும் இருந்தாலும் Ctrl+S அல்லது Cmd+S அழுத்துவது நல்ல பழக்கம். அது உடனடி சேமிப்பையும் பிழை சரிபார்ப்பையும் செயல்படுத்துகிறது. -- _'Source Control'_ ஐகானை கிளிக் செய்து செய்த மாற்றங்களைப் பார்வையிடவும். -- `Changes` கோப்புறையில் உள்ள கோப்புகள் சேர்க்கைகள் (பச்சை) மற்றும் நீக்கங்கள் (சிவப்பு) ஆகியவற்றைக் காட்டும். - ![View changes](../images/working-tree.png கோப்புகளின் அருகில் உள்ள `+` ஐ கிளிக் செய்து கமிட் செய்ய தயாராக மாற்றங்களைச் சேர்க்கவும். -- தேவையற்ற மாற்றங்களை undo ஐகானை கிளிக் செய்து **நிராகரிக்கவும்**. -- தெளிவான கமிட் செய்தியை உள்ளீடு செய்து, பின்பு கமிட் மற்றும் புஷ் செய்ய டிக் மார்க் ஐ கிளிக் செய்யவும். +### Git உடன் பதிப்பு கட்டுப்பாடு -GitHub இல் உங்கள் ரெப்போசிடரிக்கு திரும்ப, மேல் இடது மூலையில் உள்ள ஹாம்பர்கர் மெனுவைத் தேர்ந்தெடுக்கவும். +பண்டைய பிஷாப்புகள் ஆய்வு பரப்புகளின் விவரக் குறிப்புகளை உருவாக்கியபோல், Git உங்கள் குறியீடு மாற்றங்களை காலமாக கண்காணிக்க உதவுகிறது. இது திட்ட வரலாற்றை பாதுகாக்கும் மற்றும் தேவையான போது முன் பதிப்புகளுக்கு திரும்ப உதவும். VSCode.dev ஒருங்கிணைக்கப்பட்ட Git அம்சத்துடன் வருகிறது. -![Stage & commit changes](../images/edit-vscode.dev நீட்சிகளுடன் மேம்படுத்தவும் +**Source Control இடைமுகம்:** -நீட்சிகள் VSCode.dev-க்கு மொழிகள், தீம்கள், டிபக்கர்கள் மற்றும் உற்பத்தி கருவிகளைச் சேர்க்க அனுமதிக்கின்றன—உங்கள் கோடிங் வாழ்க்கையை எளிதாக்கவும், மகிழ்ச்சியாக்கவும். +1. செயற்பாட்டு பட்டையில் உள்ள 🌿 ஐக்கானை கிளிக்கவும் +2. மாற்றிய கோப்புகள் "Changes" பகுதியில் காணப்படும் +3. நிறம் மூலம் மாற்றவகைகள் குறிக்கப்படும்: பசுமை சேர்க்கைகள், சிவப்பு அகற்றல்கள் + +![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.ta.png) + +**உங்கள் பணியை சேமிக்கும் (commit பணிகளின் வேலைநெறி):** + +```mermaid +flowchart TD + A[கோப்புகளில் மாற்றங்கள் செய்யவும்] --> B[மூலக் கட்டுப்பாட்டில் மாற்றங்களை பார்க்கவும்] + B --> C[+ கிளிக் செய்து மாற்றங்களை மேடையில் வைக்கவும்] + C --> D[விவரமான சமர்ப்பிப்பு செய்தியை எழுதவும்] + D --> E[சமர்ப்பிக்க✔க் கிளிக் செய்யவும்] + E --> F[மாற்றங்கள் GitHubக்கு தள்ளப்பட்டது] +``` +```mermaid +stateDiagram-v2 + [*] --> Modified: கோப்புகளை தொகுக்கவும் + Modified --> Staged: நிலைக்கு + கிளிக் செய்யவும் + Staged --> Modified: நிலை குறைக்க - கிளிக் செய்யவும் + Staged --> Committed: செய்தியைச் சேர்த்து உறுதி செய்க + Committed --> [*]: GitHub-க்கு ஒத்திசைவு செய்யவும் + + state Committed { + [*] --> LocalCommit + LocalCommit --> RemotePush: தானாக ஒத்திசைவு + } +``` +**உங்கள் படி படியாக செயல்முறை:** +- நீங்கள் சேமிக்க வேண்டிய கோப்புகளின் பக்கத்துள்ள "+" ஐக்கானை கிளிக் செய்க (இது "நிலைக்கு கொண்டுவருதல்" ஆகும்) +- நீங்கள் அனைத்து சேமிப்புக்கான மாற்றங்களையும் சரிபார்த்து மகிழ்ச்சியாயிருக்கிறீர்கள் என்பதை இருமுறை சரிபார்க்கவும் +- நீங்கள் என்ன செய்தீர்கள் என்று விளக்க ஒரு குறுகிய குறிப்பு எழுதுங்கள் (இது உங்கள் "கமிட் மெசேஜ்") +- அனைத்தையும் GitHub-க்கு சேமிக்க சரிபார்க்கும் பட்டனை கிளிக் செய்யவும் +- நீங்கள் ஏதாவது கருத்தை மாற்றினால், இடைநீக்கம் ஐகான் மாற்றங்களை நிராகரிக்க உதவும் + +**சிறந்த கமிட் மெசேஜ்களை எழுதுவது (இது நீங்கள் நினைக்கும் அளவிற்கு கடினமல்ல!):** +- நீங்கள் என்ன செய்தீர்கள் என்பதை மட்டும் விவரிக்கவும், உதாரணமாக "Add contact form" அல்லது "Fix broken navigation" +- குறுகியதும் இனிமையானதும் ஆக்கவும் – ஒரு ட்வீட் அளவு, ஒரு கட்டுரை போல அல்ல +- "Add", "Fix", "Update", அல்லது "Remove" போன்ற செயல்பாட்டு சொல்ல்களால் தொடங்கவும் +- **நல்ல உதாரணங்கள்**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility" + +> 💡 **விரைவான வழிசெலுத்தும் குறிப்பு**: உங்கள் GitHub சேமிப்பு வீட்டுக்கு திரும்பவும் உங்கள் கணினி சூழல் மற்றும் திட்ட இடத்தை இணைக்கும் வழி போல உள்ள ☐ ஹாம்பர்கர் மெனு (☰) மேலே இடது பக்கத்தில் உள்ளது! + +## நீட்டிப்புகளுடன் செயல்பாட்டை மேம்படுத்தல் + +ஓர் கைவினையாளர் பணியகம் பல்வேறு பணிகளுக்கான சிறப்பு கருவிகள் கொண்டதுபோல், VSCode.dev ஐ குறிப்பிட்ட திறன்களைச் சேர்க்கும் நீட்டிப்புகளுடன் தனிப்பயனாக்க முடியும். இந்த சமூகவளேற்றப்பட்ட பிளகின்கள் பொதுவான வளர்ச்சி தேவைகளை, உதாரணமாக கோட் வடிவமைப்பு, நேரடி முன்னிலைப்படுத்தல் மற்றும் மேம்பட்ட Git ஒருங்கிணைப்பை தீர்க்கின்றன. + +நீட்டிப்பு சந்தை உலகெங்கும் உள்ள டெவலப்பர்களால் உருவாக்கப்பட்ட ஆயிரக்கணக்கான இலவச கருவிகளை தாங்குகிறது. ஒவ்வொரு நீட்டிப்பும் குறிப்பிட்ட வேலைப்பாட்டு சவால்களை தீர்க்கும், உங்களுக்கு தனிப்பயனாக்கப்பட்ட வளர்ச்சி சூழலை கட்டமைப்பதற்கு உதவுகிறது. + +```mermaid +mindmap + root((விரிவாக்க சூழல்)) + அவசியமான வகைகள் + உற்பத்தித்தன்மை + Live Server + Auto Rename Tag + Bracket Pair Colorizer + GitLens + குறியீடு தரம் + Prettier + ESLint + Spell Checker + Error Lens + மொழி ஆதரவு + HTML CSS Support + JavaScript ES6 + Python Extension + Markdown Preview + தீம்கள் & UI + Dark+ Modern + Material Icon Theme + Peacock + Rainbow Brackets + கண்டுபிடிப்பு முறைகள் + பிரபலமான தரவரிசைகள் + Download Counts + User Ratings + Recent Updates + Community Reviews + பரிந்துரைகள் + Workspace Suggestions + Language-based + Workflow-specific + Team Standards +``` +### உங்கள் சிறந்த நீட்டிப்புகளை கண்டறிதல் + +நீட்டிப்பு சந்தை முற்போக்காக ஒழுங்குபடுத்தப்பட்டுள்ளதால், நீங்கள் தேவைப்படும் ஒன்றை தேடியீர்கள் என்றால் தவறாமல் அது எளிதாகக் காணலாம். இது குறிப்பிட்ட கருவிகள் மற்றும் நீங்கள் அறிந்திருக்க கூடாத குளிர்ந்த சின்னங்களை கண்டுபிடிக்க உதவுகிறது! + +**சந்தைக்கு செல்லும் வழி:** + +1. செயல்பாட்டு பட்டியில் உள்ள நீட்டிப்பு ஐகானை (🧩) கிளிக் செய்யவும் +2. சுற்றி பார்க்கவும் அல்லது ஏதாவது சிறப்பான ஒன்றை தேடவும் +3. ஆர்வமான ஒன்றை தேர்ந்தெடுக்கவும் அதன் விவரங்களை அறிய + +![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.ta.png) + +**அங்கு நீங்கள் காணப்போகும் விஷயங்கள்:** + +| பகுதி | உள்ளடக்கம் | உதவிகரமானவை | +|----------|---------|----------| +| **நிறுவப்பட்டவை** | நீங்கள் ஏற்கனவே சேர்த்த நீட்டிப்புகள் | உங்கள் தனிப்பட்ட குறியீட்டு கருவி | +| **பிரபலமானவை** | பொதுமக்களின் விருப்பங்கள் | பெரும்பாலும் டெவலப்பர்கள் நம்பும் | +| **பரிந்துரைக்கபட்டவை** | உங்கள் திட்டத்துக்கு புத்திசாலி பரிந்துரைகள் | VSCode.dev வழங்கும் உதவிகள் | + +**உலகளவில் எளிதாக்கம்:** +- ஒவ்வொரு நீட்டிப்பும் மதிப்பீடுகள், பதிவிறக்கம் எண்ணிக்கை, மற்றும் யாவற்றின் பயனர் விமர்சனங்களை காட்டும் +- ஒவ்வொருவருக்கும் படங்கள் மற்றும் தெளிவான விளக்கங்கள் கிடைக்கும் +- எல்லாம் பொருந்தக்கூடிய தகவல்களுடன் தெளிவாக குறிக்கப்பட்டுள்ளது +- ஒத்த நீட்டிப்புகள் பரிந்துரைக்கப்படுகின்றன, நீங்கள் விருப்பங்களை ஒப்பிடலாம் + +### நீட்டிப்புகளை நிறுவுதல் (இது மிக எளிமையானது!) + +உங்கள் தொகுப்பாளருக்கு புதிய திறன்களைச் சேர்ப்பது ஒரு பொத்தானை அழுத்துவதுதான். நீட்டிப்புகள் சில விநாடிகளில் நிறுவப்பட்டு உடனே செயல்பட்டு தொடங்குகின்றன – மீண்டும் துவக்கமோ காத்திருக்குமோ தேவையில்லை. + +**செய்ய வேண்டியது:** + +1. நீங்கள் விரும்பும் ஒன்றைத் தேடுங்கள் ("live server" அல்லது "prettier" என தேட முயற்சிக்கவும்) +2. ஆர்வமாக தோன்றும் ஒன்றை தேர்ந்தெடுத்து மேல் விவரங்களைப் பார்வையிடவும் +3. அது என்ன செய்கிறது என வாசித்து மதிப்பீடுகளை பார்வையிடவும் +4. நீலம் நிற "Install" பொத்தானை அழுத்தி முடித்துவிடவும்! + +![Installing extensions](../../../../8-code-editor/images/install-extension.gif) + +**பின்னணியில் நடக்கும் நிகழ்வுகள்:** +- நீட்டிப்பு தானாகத் தரவிறக்கப்பட்டு அமைக்கப்படுகிறது +- புதிய அம்சங்கள் உடனே உங்கள் முகப்பில் தோன்றும் +- உடனான செயல்பாட்டுடன் (மிக வேகமானது!) +- நீங்கள் உள்நுழைந்திருந்தால், நீட்டிப்பு அனைத்து சாதனங்களுடனும் ஒத்திசைவு செய்யும் + +**நான் பரிந்துரைக்கும் சில நீட்டிப்புகள்:** +- **Live Server**: நீங்கள் கோடீடு செய்யும் போது உங்கள் தளம் நேரத்தில் புதுப்பிக்கிறது (இது ஜாதுக்களத்துக்குரியது!) +- **Prettier**: உங்கள் குறியீட்டை தானாக சுத்தமாக மற்றும் தொழில்முறை தோற்றமாக மாற்றுகிறது +- **Auto Rename Tag**: ஒரு HTML குறியீட்டை மாற்றினால் அதன் இணைப்பு தானாக மாற்றம் பெறும் +- **Bracket Pair Colorizer**: உங்கள் முடிச்சுகளுக்கு வண்ணம் பார்க்க வசதியாக்கிறது +- **GitLens**: உங்களுக்கு பிரத்யேகமான பல உதவி தகவல்களுடன் Git இயல்புகளை மேம்படுத்துகிறது + +### உங்கள் நீட்டிப்புகளை தனிப்பயனாக்குதல் + +பல நீட்டிப்புகள் நீங்கள் விரும்பும் முறையில் செயல்பட அமைப்புகளை கொண்டுள்ளன. இது கார் இருக்கை மற்றும் கண்ணாடிகளை சரிசெய்யும் சிந்தனையைப் போல் – ஒவ்வொருவருக்கும் தனிப்பட்ட விருப்பங்கள் உள்ளன! + +**நீட்டிப்பு அமைப்புகளை மாற்றுக:** + +1. நீட்டிப்புகள் போர்ட்டலில் உங்கள் நிறுவப்பட்ட நீட்டிப்பை கண்டுபிடிக்கவும் +2. அதன் பெயருக்கு அருகில் உள்ள சிறிய குழாய் ஐகானை (⚙️) தேடவும் மற்றும் கிளிக் செய்யவும் +3. "Extension Settings" ஐத் தேர்ந்தெடுக்கவும் +4. உங்கள் வேலைப்பாட்டுக்கு பொருந்தும் வரை மாற்றங்கள் செய்யவும் + +![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ta.png) + +**மாதிரியான அமைப்புகள்:** +- உங்கள் குறியீடு எப்படி வடிவமைக்கப்படுகிறது (Tabs vs Spaces, வரி நீளம், மற்றும் போன்றவை) +- பட்டன்களை ஒருங்கிணைக்கும் விசைப் பண்புகள் +- நீட்டிப்பு எந்த கோப்புகள் வகைகளுடன் வேலை செய்ய வேண்டும் +- சுத்தமாக வைத்திருக்க சிறப்பு அம்சங்களை இயக்கல் அல்லது முடக்கு + +### நீட்டிப்புகளை ஒழுங்குபடுத்தல் + +மிகவும் குளிர்ந்த நீட்டிப்புகளை கண்டுபிடித்து, உங்கள் தொகுப்பை சீரான நிலையில் வைத்திருக்க விரும்புவீர்கள். VSCode.dev இதை மிக எளிதாக்கியுள்ளது. + +**நீட்டிப்பு மேலாண்மை விருப்பங்கள்:** + +| நீங்கள் செய்யக்கூடியது | எப்போது உதவிகரமாக இருக்கும் | சிறந்த யுக்தி | +|--------|---------|----------| +| **மூடல்** | ஒரு நீட்டிப்பு சிக்கலை உண்டாக்குகிறதா என்று சோதிக்க | நீக்கம் செய்யாமல் வைக்க சிறந்தது | +| **நீக்கம்** | தேவையில்லாத நீட்டிப்புகளை முற்றிலும் அகற்ற | உங்கள் சூழலை சுத்தமாகவும் வேகமாகவும் வைத்திருக்கும் | +| **புதுப்பித்தல்** | சமீபத்திய அம்சங்கள் மற்றும் பிழை திருத்தங்களைப் பெற | பொதுவாக தானாக நடைபெறும், ஆனாலும் சரிபார்க்கவும் | + +**நான் நீட்டிப்புகளை நிர்வகிப்பது:** +- சில மாதங்களுக்கு ஒரு முறை இன்ஸ்டால் செய்தவற்றை பரிசீலித்து பயன்படாததை அகற்றுகிறேன் +- எல்லா நீட்டிப்புகளும் புதுப்பிக்கிறேன், புதிய அம்சங்கள் மற்றும் பாதுகாப்பு திருத்தங்கள் கிடைக்கும் +- எதையாவது மெதுவானதாக இருந்தால், அந்த நீட்டிப்பை தற்காலிகமாக முடக்கி சோதிப்பேன் +- பெரிய புதுப்பிப்புகளில் உள்ள மாற்றங்களையும் புதிய அம்சங்களையும் வாசிப்பேன் + +> ⚠️ **செயல்திறன் குறிப்பு**: நீட்டிப்புகள் அருமை, ஆனால் பல அதிகமாக இருந்தால் மெதுவாக்கலாம். உங்களுக்கு நேர்மையான உதவியளிப்பவைகளைக் கவனியுங்கள், பயனற்றவற்றை நீக்க இருந்து பயப்பட வேண்டாம். + +### 🎯 கல்விப் பரிசீலனை: வளர்ச்சி சூழலின் தனிப்பயனாக்கல் + +**முப்பாடு புரிதல்**: சமூகவழியாக உருவாக்கப்பட்ட நீட்டிப்புகளைப் பயன்படுத்தி தொழில்முறை வளர்ச்சி சூழலை தனிப்பயனாக்க கற்றுக்கொண்டீர்கள். இது நிறுவன வளர்ச்சி குழுக்களும் பயன்படுத்தும் சீரமைப்பு கருவித்தளங்களைக் காட்டுகிறது. + +**முக்கிய கருத்துக்கள்:** +- **நீட்டிப்பு கண்டுபிடிப்பு**: குறிப்பிட்ட வளர்ச்சி சவால்களை தீர்க்கும் கருவிகளை கண்டறிதல் +- **சூழல் அமைப்பு**: தனிப்பட்ட அல்லது குழு விருப்பங்களுக்கு கருவிகளை ஏற்படுத்தல் +- **செயல்திறன் மேம்பாடு**: செயல்பாடு மற்றும் அமைப்பு செயல்திறனை சமநிலைப்படுத்தல் +- **சமூகவிழா கூட்டாண்மை**: உலகளாவிய டெவலப்பர் சமூகவால் உருவாக்கப்பட்ட கருவிகள் + +**தொழில் தொடர்பு**: நீட்டிப்பு சூழல்கள் VS Code, Chrome DevTools, மற்றும் நவீன IDEகளுக்கு முக்கியமான வளர்ச்சி தளங்கள். நீட்டிப்புகளை மதிப்பீடு செய்து நிறுவுவதும் அமைப்பதும் தொழில்முறை வளர்ச்சி பணிச்சூழல்களுக்கு அவசியம். + +**பின்விளைவு கேள்வி**: 10 டெவலப்பர் குழுவிற்கு பொதுவான வளர்ச்சி சூழலை எப்படி அமைத்துக்கொள்ள விருப்பமாயிருக்கிறீர்கள்? ஒருங்கிணைப்பு, செயல்திறன் மற்றும் தனிப்பட்ட விருப்பங்களை கருத்தில் கொள்ளவும். + +## 📈 உங்கள் மேகம் அடிப்படையுடைய வளர்ச்சி நிபுணத்துவ காலவரிசை + +```mermaid +timeline + title தொழில்முனைவோன் மேக வளர்ச்சி பயணம் + + section தளம் அடிப்படைகள் + மேக வளர்ச்சி புரிதல் + : வலை அடிப்படையிலான தொகுப்பு கருத்துக்களை தலைமை நடத்தவும் + : GitHub ஒருங்கிணைப்பு முறைகளை இணைக்கவும் + : தொழில்முறை இடைமுகங்களை செயல்படுத்தவும் + + section பணிசெயல் தேர்ச்சி + கோப்பு & திட்ட மேலாண்மை + : ஒழுங்கமைக்கப்பட்ட திட்ட அமைப்புகளை உருவாக்கவும் + : குறிச்சொல் விளக்க நன்மைகளை ஆசியுங்கள் + : பன்முக கோப்பு தொகுப்பு பணிசெயல்களை கையாளவும் + + பதிப்பு கட்டுப்பாட்டு ஒருங்கிணைப்பு + : Git காட்சி முறைகளை புரிந்துகொள்ளவும் + : உருவாக்கிக் குறிப்பு நடைமுறைகள் பயிற்சி பெறவும் + : மாற்றம் கண்காணிப்பு பணிசெயல்களை தலைமை நடத்தவும் + + section சூழல் தனிப்பயன் + நீட்டிப்பு உயிரியல் முறைகள் + : பயன்முறையில் நீட்டிப்புகளை கண்டறியவும் + : வளர்ச்சி விருப்பங்களை அமைக்கவும் + : செயல்திறன் மற்றும் செயல்பாடு இடையிலான சமநிலையை மேம்படுத்தவும் + + தொழில்முறை அமைப்பு + : அதே நிலை பணிசெயல்களை உருவாக்கவும் + : மீண்டும் பயன்படுத்தக்கூடிய அமைப்புகளை உருவாக்கவும் + : குழு நடைமுறைகளை நிறுவவும் + + section தொழில் தயாரி + மேக முதன்மை வளர்ச்சி + : தொலைதூர வளர்ச்சி நடைமுறைகளை தலைமை நடத்தவும் + : கூட்டு பணிசெயல்கள் புரிந்து கொள்ளவும் + : தளமில்லா திறன்களை உருவாக்கவும் + + தொழில்முறை நடைமுறைகள் + : தொழில் தரநிலைகளை பின்பற்றவும் + : பராமரிக்கக்கூடிய பணிசெயல்களை உருவாக்கவும் + : குழு சூழலுக்கு தயார் ஆகவும் +``` +**🎓 பட்டம் பெறும் அங்கம்**: தொழில்முறை டெவலப்பர்கள் பயன்படுத்தும் இதே கருவிகள் மற்றும் பணிச்சூழல்களைப் பயன்படுத்தி மேகவழி வளர்ச்சியில் நீங்கள் சாதனை சூட்டியுள்ளீர்கள். இவை மென்பொருள் வளர்ச்சியின் எதிர்காலத்தை அங்கீகரிக்கும். + +**🔄 அடுத்த நிலை திறன்கள்**: +- மேம்பட்ட மேகவழி வளர்ச்சி தளங்களை (Codespaces, GitPod) ஆராய தயாராக இருக்கிறீர்கள் +- பரவலாகப் பகிரப்பட்ட வளர்ச்சி குழுக்களில் பணியாற்ற தயாராக இருக்கிறீர்கள் +- உலகளாவிய திறந்த மூல திட்டங்களுக்கு பங்களிக்கத் தயாராக இருக்கிறீர்கள் +- நவீன DevOps மற்றும் தொடர்ச்சியான ஒருங்கிணைவு நடைமுறைகளுக்கு அடித்தளத்தை வைத்துள்ளீர்கள் + +## GitHub Copilot முகவர் சவாலை 🚀 + +NASA விண்வெளி அதிரட்டுகளை நிர்வகிப்பது போல அமைந்த முறையில், இந்த சவால் VSCode.dev திறன்களை முழுமையான பணிச்சூழலில் தொழில்திறன் காட்டுகிறது. + +**நோக்கம்:** VSCode.dev-ஐ திறமையாக பயன்படுத்தி முழுமையான இணைய வளர்ச்சி பணிச்சூழலை நிறுவுதல். + +**திட்ட தேவைகள்:** முகவர் முறையைக் கொண்டு பின்வரும் பணிகளை செய்து முடிக்கவும்: +1. ஒருவழி இருக்கும் சேமிப்பிடத்தை கிளோன்செய் அல்லது புதியதாய்ச் சீரமைக்கவும் +2. HTML, CSS மற்றும் JavaScript கோப்புகளுடன் செயல்படும் திட்ட கட்டமைப்பை நிறுவவும் +3. வளர்ச்சியை மேம்படுத்தும் மூன்று நீட்டிப்புகளை நிறுவி அமைக்கவும் +4. விளக்கமான கமிட் செய்திகளுடன் பதிப்பு கட்டுப்பாட்டை பயிற்சி செய்யவும் +5. அம்ச கிளைகளையும் உருவாக்கி மாற்றங்களை செய்யவும் +6. README.md கோப்பில் செயல்முறை மற்றும் கற்றல்கள் எழுதவும் + +இந்த பயிற்சி VSCode.dev கருத்துக்களை ஓர் நடைமுறை பணிச்சூழலில் ஒருங்கிணைக்கிறது. + +மேலும் அறிய [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). + +## பணிகளுக்கான தவணை + +இந்த திறன்களை உண்மையான சூழலில் தேர்ச்சி பெறும் விதமாக பயன்படுத்துங்கள்! நான் ஒரு வேலை திட்டம் கொண்டுள்ளேன், அது நீங்கள் கற்ற உங்கள் அனைத்தையும் நடைமுறையில் செய்ய உதவும்: [VSCode.dev பயன்படுத்தி ஒரு தொழில்முறை ਰெஸ்யூம் இணையதளம் உருவாக்கவும்](./assignment.md) + +இந்த பணியில் உங்கள் உலாவியில் முழுமையாக தொழில்முறை ரெஸ்யூம் இணையதளத்தை உருவாக்க படி நடக்கும். நீங்கள் அனைத்து VSCode.dev அம்சங்களையும் பயன்படுத்தப் போகிறீர்கள், இறுதியில் அழகானதான மற்றும் நம்பகமான இணையதளம் பெறுவீர்கள். + +## தொடர்ந்தும் ஆராய்ந்து உங்கள் திறன்களை வளர்த்துக்கொள்ளுங்கள் + +நீங்கள் ஒரு வலுவான அடித்தளத்தை பெற்றுள்ளீர்கள், ஆனால் இன்னும் குளிர்ந்தவை நிறைய இருக்கின்றன! உங்கள் VSCode.dev திறன்களை அடுத்த கட்டத்திற்கு கொண்டு செல்ல சில வளங்களும் யோசனைகளும்: + +**அதிகாரம் பெற்ற ஆவணங்கள்:** +- [VSCode வலை ஆவணங்கள்](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – உலாவியில் அடிப்படையிலான திருத்தத்துக்கு முழு கையேடு +- [GitHub Codespaces](https://docs.github.com/en/codespaces) – மேகத்தில் கூடுதலான சக்தி தேவையானபோது + +**பின்பு முயற்சிக்க சிறந்த அம்சங்கள்:** +- **விசைக்குறிப்புகள்**: குறியீடு நிஞ்ஜாவாக உணர்த்தும் முக்கிய திறமைகள் +- **வேலைப்பாசறை அமைப்புகள்**: வெவ்வேறு வகை திட்டங்களுக்கு வேறுபட்ட சூழல்கள் அமைப்பது +- **பல ரூட் வேலைப்பாசறைகள்**: ஒரே நேரத்தில் பல சேமிப்பிடங்களில் பணியாற்றுதல் (மிகவும் பயனுள்ளது!) +- **டெர்மினல் ஒருங்கிணைப்பு**: உலாவியிலேயே கட்டளை வரிசை கருவிகள் அணுக + +**பயிற்சி யோசனைகள்:** +- திறந்த மூல திட்டங்களில் பங்கேற்று VSCode.dev பயன்படுத்தி உதவுங்கள் – தரமான பங்களிப்பு! +- வெவ்வேறு நீட்டிப்புகளை முயற்சி செய்து உங்கள் சிறந்த அமைப்பை கண்டறியவும் +- நீங்கள் பெரும்பாலும் கட்டும் தளங்கள் மாதிரி திட்ட வார்ப்புருக்களை உருவாக்கவும் +- கிளைவு மற்றும் இணைப்பு போன்ற Git பணிச்சூழல் முறைகளை பயிற்சி செய்யவும் – குழு திட்டங்களில் இது தங்கம் போலவும் -### நீட்சிகளை உலாவுதல் மற்றும் நிர்வகித்தல் - -- செயல்பாட்டு பட்டையில் **Extensions icon** ஐ கிளிக் செய்யவும். -- _'Search Extensions in Marketplace'_ பெட்டியில் ஒரு நீட்சியைத் தேடவும். - - ![Extension details](../images/extension-details: - - **Installed**: நீங்கள் சேர்த்த அனைத்து நீட்சிகளும் - - **Popular**: தொழில்துறை பிரபலங்கள் - - **Recommended**: உங்கள் பணிமுறைக்கு ஏற்றவாறு பரிந்துரைக்கப்பட்டவை - - ![View extensions]( - - - -*** - -### 1. **நீட்சிகளை நிறுவவும்** - -- தேடலில் நீட்சியின் பெயரை உள்ளீடு செய்து, அதை கிளிக் செய்து, எடிட்டரில் விவரங்களைப் பார்வையிடவும். -- பக்கப்பட்டையிலோ அல்லது முக்கிய கோட் பகுதியில் **நீல Install பொத்தானை** அழுத்தவும். - - ![Install extensions](../images/install-extension 2. **நீட்சிகளை தனிப்பயனாக்கவும்** - -- உங்கள் நிறுவப்பட்ட நீட்சியைத் தேடவும். -- **Gear icon** ஐ கிளிக் செய்யவும் → _Extension Settings_ ஐத் தேர்ந்தெடுத்து உங்கள் விருப்பங்களுக்கு ஏற்ப அமைப்புகளைச் சரிசெய்யவும். - - ![Modify extension settings](../images/extension-settings 3. **நீட்சிகளை நிர்வகிக்கவும்** -நீங்கள் செய்யக்கூடியவை: - -- **Disable:** ஒரு நீட்சியை தற்காலிகமாக முடக்கு, ஆனால் அதை நிறுவியவாறு வைத்திரு -- **Uninstall:** தேவையில்லாதால் நிரந்தரமாக நீக்கு - - நீட்சியைத் தேடவும், Gear ஐகானை அழுத்தி, ‘Disable’ அல்லது ‘Uninstall’ ஐத் தேர்ந்தெடுக்கவும், அல்லது கோட் பகுதியில் உள்ள நீல பொத்தான்களைப் பயன்படுத்தவும். - -*** - -## பணிக்குறிப்பு - -உங்கள் திறன்களை சோதிக்க: [vscode.dev பயன்படுத்தி ஒரு ரெஸ்யூமே வலைத்தளத்தை உருவாக்கவும்](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md) - -*** - -## மேலும் ஆராய்ச்சி மற்றும் சுயபயிற்சி +--- -- [அதிகாரப்பூர்வ VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) மூலம் மேலும் ஆழமாக ஆராயவும். -- மேம்பட்ட பணிமனை அம்சங்கள், விசைப்பலகை குறுக்குவழிகள் மற்றும் அமைப்புகளை ஆராயவும். +**நீங்கள் உலாவி அடிப்படையிலான வளர்ச்சியில் தேர்ச்சி பெற்றுள்ளீர்கள்!** 🎉 போக்குவரத்து சாதனங்கள் கண்டுபிடிக்கப்பட்டதால் விஞ்ஞானிகள் தொலைவு இடங்களில் ஆய்வு செய்ததைப் போல, VSCode.dev இணைய இணைப்புடைய எந்த சாதனத்திலிருந்தும் தொழில்முறை குறியீட்டுத் திறனை வழங்குகிறது. -*** +இந்த திறன்கள் தற்போதைய தொழில் நடைமுறைகளைக் காட்டுகின்றன – பல தொழில்முறை டெவலப்பர்கள் தந்திரக் கூடிய அணுகல் மற்றும் சுருக்கமான படைப்புத் திறனுக்காக மேகவழி வளர்ச்சி சூழல்களைப் பயன்படுத்துகின்றனர். நீங்கள் தனிப்பட்ட திட்டங்களிலிருந்து பெரிய குழு ஒத்துழைப்புக்கு வரைக்கும் பரப்பளவை கூடிய நடைமுறையை கற்றுக்கொண்டீர்கள். -**இப்போது நீங்கள் எங்கிருந்தும், எந்த சாதனத்திலும், VSCode.dev பயன்படுத்தி கோடிங் செய்ய, உருவாக்க, மற்றும் ஒத்துழைக்க தயாராக இருக்கிறீர்கள்!** +அடுத்த வளர்ச்சி திட்டத்தில் இந்த நுட்பங்களைப் பயன்படுத்துங்கள்! 🚀 --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் நோக்கம் துல்லியமாக இருக்க வேண்டும் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது துல்லியமின்மைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**நினைவூட்டல்**: +இந்த ஆவணம் AI மொழி மாற்று சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழி மாற்றப்பட்டுள்ளது. நாங்கள் துல்லியத்துக்காக முயற்சித்தாலும், தானாகவே செய்யப்பட்ட மொழி மாற்றங்களில் தவறுகள் அல்லது பிழைகள் ஏற்படலாம் என்பதை தயவுசெய்து கவனிக்கவும். உள்ளூர் மொழியில் உள்ள அடிப்படையான ஆவணம் அதிகாரபூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழி மாற்றத்தின் பயன்பாட்டினால் உண்டாகும் ஏதேனும் தவறான புரிதல்கள் அல்லது தவறுணர்வுகளுக்கு நாம் பொறுப்பேற்கவில்லை. + \ No newline at end of file diff --git a/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md index 18a05ab9e..fffbc486a 100644 --- a/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md @@ -1,247 +1,575 @@ -# vscode.dev பயன்படுத்தி ஒரு ரெச்யூம்-வலைத்தளம் உருவாக்குங்கள் +# VSCode.dev பயன்படுத்தி ஒரு ரெசுமே வலைத்தளத்தை உருவாக்கவும் -_ஒரு வேலைவாய்ப்பு வழங்குநர் உங்கள் ரெச்யூமை கேட்கும்போது, நீங்கள் அவர்களுக்கு ஒரு URL அனுப்பினால் எவ்வளவு அருமையாக இருக்கும்?_ 😎 +உங்கள் திறன்கள் மற்றும் அனுபவத்தை கோர்த்துக்காட்டும், பரிணாமம் மிகுந்த, நவீன வடிவில் ஒரு தொழில்முறை ரெசுமே வலைத்தளத்தை உருவாக்கி உங்கள் தொழில் வாய்ப்புகளை மாற்றி அமைக்கவும். பாரம்பரிய PDF கோப்புகளை அனுப்புவதற்கு பதிலாக, பணியமர்த்துநர்களுக்கு தகுதிகள் மற்றும் உங்கள் வலை மேம்பாட்டு திறன்களை காட்டும் சுருக்கு, பதிலளிக்கும் வலைத்தளத்தை வழங்குவதை கற்பனை செய்யவும். -## நோக்கங்கள் +இந்த கைமுறைப் பணிக்கான பணிகள் உங்களுடைய VSCode.dev திறன்களை முழுமையாக பயன்படுத்த ஊக்குவிக்கிறது, மேலும் உங்கள் உலாவியில் உட்பட, சேமிப்பகம் உருவாக்குதல் முதல் வெளியீடு வரை முழுமையான வலை மேம்பாட்டு பணிமுறைபாட்டைப் பெறுவீர்கள். -இந்த பணியை முடித்த பிறகு, நீங்கள் கற்றுக்கொள்வீர்கள்: +இந்த திட்டத்தை நிறைவு செய்தவுடன், உங்களுக்கு தொழில்முறை ஆன்லைன் உருவம் கிடைக்கும், அதை சாத்தியமான பணியாளர்களுடன் எளிதில் பகிரலாம், உங்கள் திறன்கள் வளர்ந்தால் புதுப்பிக்கலாம், நேர்த்தியான தனிப்பட்ட பிராண்ட்டுக்கு ஏற்ப அமைக்கலாம். இதுவே உண்மையான உலக வலை மேம்பாட்டு திறன்களை வெளிப்படுத்தும் நடைமுறைத் திட்டம். -- உங்கள் ரெச்யூவை வெளிப்படுத்த ஒரு வலைத்தளத்தை உருவாக்குவது +## கற்றல் இலக்குகள் -### முன் தேவைகள் +இந்த பணியை முடித்த பிறகு, நீங்கள் מסוגலாக முடியும்: -1. ஒரு GitHub கணக்கு. [GitHub](https://github.com/) க்கு சென்று, உங்களிடம் கணக்கு இல்லையெனில், ஒரு கணக்கை உருவாக்கவும். +- **VSCode.dev** பயன்படுத்தி முழுமையான வலை மேம்பாட்டு திட்டத்தை உருவாக்கவும் மற்றும் பராமரிக்கவும் +- அரசியல் HTML உறுப்புகள் கொண்டு தொழில்முறை வலைத்தளத்தை **உருவாக்கவும்** +- நவீன CSS தொழில்நுட்பங்களுடன் பதிலளிக்கும் வடிவமைப்பினை **அழகு படுத்தவும்** +- அடிப்படை வலை தொழில்நுட்பங்களை பயன்படுத்தி பரிணாம அம்சங்களை **இயக்கு** +- பகிரக்கூடிய URL மூலம் அணுகக்கூடிய நேரடி வலைத்தளத்தை **வெளியிடவும்** +- மேம்பாட்டுப் பணியில் பதிப்புக் கட்டுப்பாட்டின் சிறந்த நடைமுறைகளை **திருவிழிக்கவும்** -## படிகள் +## முன்னோடிகள் -**படி 1:** ஒரு புதிய GitHub Repository உருவாக்கி, அதற்கு `my-resume` என்று பெயரிடுங்கள். +இந்த பணியைத் தொடங்குவதற்கு முன், சோதனை செய்யவும்: -**படி 2:** உங்கள் Repositoryயில் ஒரு `index.html` கோப்பை உருவாக்குங்கள். நாம் github.com இல் குறைந்தது ஒரு கோப்பை சேர்க்க வேண்டும், ஏனெனில் நீங்கள் vscode.dev இல் ஒரு காலியான Repositoryயை திறக்க முடியாது. +- GitHub கணக்கு (தயவு செய்து [github.com](https://github.com/) இல் கணக்கொன்றை உருவாக்கவும்) +- VSCode.dev பாட நெறியின் இடைமுகக் வழிசென்று அடிப்படைக் செயல்பாடுகள் முடித்தல் +- HTML கட்டமைப்பு மற்றும் CSS அழகுபடுத்தல் கருத்துக்களை அடிப்படையிலான புரிதல் -`creating a new file` இணைப்பை கிளிக் செய்து, `index.html` என்று பெயரை தட்டச்சு செய்து, `Commit new file` பொத்தானை தேர்வு செய்யவும். +## திட்ட அமைப்பு மற்றும் சேமிப்பகம் உருவாக்கல் -![github.com இல் புதிய கோப்பை உருவாக்கவும்](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ta.png) +உங்கள் திட்டத்தின் அடித்தளத்தை அமைக்க தொடங்குவோம். இந்த செயல்முறை எவ்வாறு திட்டங்கள் எளிய சேமிப்பகத் துவக்கம் மற்றும் கட்டுமான திட்டமிடுதலுடன் ஆரம்பிக்கப்படுகின்றன என்பதைக் காட்டுகிறது. -**படி 3:** [VSCode.dev](https://vscode.dev) ஐ திறந்து, `Open Remote Repository` பொத்தானை தேர்வு செய்யவும். +### படி 1: GitHub சேமிப்பகத்தை உருவாக்கவும் -நீங்கள் உங்கள் ரெச்யூம் தளத்திற்காக உருவாக்கிய Repositoryயின் URL ஐ நகலெடுத்து, உள்ளீட்டு பெட்டியில் ஒட்டவும்: +ஒரு அர்ப்பணிக்கப்பட்ட சேமிப்பகம் அமைத்தல் உங்கள் திட்டம் சரியான வகையில் ஒழுங்குபடுத்தப்பட்டு பதிப்புக் கட்டுப்பாட்டுக்குள் இருப்பதை உறுதிசெய்கிறது. -_`your-username` ஐ உங்கள் GitHub பயனர் பெயருடன் மாற்றவும்._ +1. **[GitHub.com](https://github.com) இல் உள்நுழைக** +2. மேல் வலப்புறம் காணப்படும் பச்சை "New" பொத்தானை அல்லது "+" ஐ கிளிக் செய்யவும் +3. உங்கள் சேமிப்பகத்திற்கு `my-resume` என்று பெயர்criptive்றுக (அல்லது உங்கள் விருப்பப்படி `john-smith-resume` போன்ற தனிப்பட்ட பெயர்) +4. சுருக்கமான விளக்கம் சேர்க்கவும்: "HTML மற்றும் CSS கொண்டு செய்யப்பட்ட தொழில்முறை ரெசுமே வலைத்தளம்" +5. "பொது" என்பதைக் தேர்வு செய்து உங்கள் ரெசுமே பணியாளர்களுக்கு அணுகக்கூடியதாக்கவும் +6. "README கோப்பை சேர்க்கு" என்பதை தேர்வுசெய்க +7. அமைப்பை நிறைவு செய்ய "Create repository" கிளிக் செய்யவும் +> 💡 **சேமிப்பகம் பெயரிடல் அறிவுரை**: திட்டத்தின் நோக்கத்தை தெளிவாக குறிக்கிற வீடியான மற்றும் தொழில்முறைமான பெயர்களைப் பயன்படுத்தவும். இது பணியாளர்களுடன் பகிரும்போது அல்லது போர்ட்போலியோ மதிப்பாய்வுகளில் உதவும். + +### படி 2: திட்ட கட்டுமானத்தை தொடங்கு + +VSCode.dev நிறுவுதலில் குறைந்தது ஒரு கோப்பு தேவை என்பதால், முதலில் GitHub இல் உங்கள் முதன்மை HTML கோப்பை உருவாக்குவோம், பின்னர் வலைத் தொகுப்பிலே மாற்றுவோம். + +1. புதிய சேமிப்பகத்தில் "creating a new file" இணைப்பை கிளிக் செய்யவும் +2. கோப்புப் பெயராக `index.html` எனத் தட்டச்சு செய்யவும் +3. இந்த ஆரம்ப HTML கட்டுமானத்தைக் சேர்க்கவும்: + +```html + + + + + + Your Name - Professional Resume + + +

Your Name

+

Professional Resume Website

+ + ``` -https://github.com/your-username/my-resume -``` -✅ வெற்றிகரமாக இருந்தால், உங்கள் திட்டத்தையும், index.html கோப்பையும் உலாவியில் உள்ள உரை திருத்தியில் திறந்துவிடலாம். +4. "Add initial HTML structure" என கமிட் செய்தலை எழுது +5. "Commit new file" கிளிக் செய்து மாற்றங்களைச் சேமிக்கவும் + +![GitHub இல் ஆரம்ப கோப்பை உருவாக்குதல்](../../../../translated_images/new-file-github.com.c886796d800e8056.ta.png) + +**இந்த ஆரம்ப அமைப்பு எதை நிறைவேற்றுகிறது:** +- உரிய HTML5 ஆவண கட்டமைப்பை அரசியல் உறுப்புகளுடன் **உருவாக்குகிறது** +- பதிலளிக்கும் வடிவமைப்புக்கான viewport meta தகுதியை உள்ளடக்குகிறது +- உலாவி டாப்களில் காணப்படும் விளக்கமான பக்கம் தலைப்பை அமைக்கிறது +- தொழில்முறை உள்ளடக்கம் ஏற்பாடு செய்ய அடித்தளத்தை உருவாக்குகிறது + + +## VSCode.dev இல் பணியாற்றுதல் + +இப்போது உங்கள் சேமிப்பகம் அடித்தளம் தயாரும், முதன்மை மேம்பாட்டு பணிக்காக VSCode.dev இல் மாற்றுவோம். இந்த வலை அடிப்படையிலான தொகுப்பியில் தொழில்முறை வலை மேம்பாட்டிற்கு தேவையான அனைத்து கருவிகளும் உள்ளன. + +### படி 3: VSCode.dev இல் உங்கள் திட்டத்தை திறக்கவும் + +1. புதிய உலாவி தாவலில் [vscode.dev](https://vscode.dev) செல்லவும் +2. வரவேற்பு திரையில் "Open Remote Repository" கிளிக் செய்யவும் +3. GitHub இல் உங்கள் சேமிப்பக URLஐ நகலெடுத்து உள்ளீட்டுப் புலத்தில் ஒட்டவும் + + வடிவம்: `https://github.com/your-username/my-resume` + + *`your-username` என்பதற்கு உங்கள் GitHub பயனர் பெயரை மாற்றவும்* + +4. Enter தட்டவும் மற்றும் உங்கள் திட்டத்தை ஏற்றவும் + +✅ **வெற்றி குறியியல்**: உங்கள் திட்ட கோப்புகள் எக்ஸ்ப்ளோரரில் மற்றும் `index.html` முதன்மை தொகுப்பியில் திருத்தத்திற்கு கிடைக்கும். -![புதிய கோப்பை உருவாக்கவும்](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ta.png) +![VSCode.dev இல் திட்டம் ஏற்றப்பட்டது](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ta.png) -**படி 4:** `index.html` கோப்பை திறந்து, கீழே உள்ள குறியீட்டை உங்கள் குறியீட்டு பகுதியில் ஒட்டவும் மற்றும் சேமிக்கவும். +**இந்த இடைமுகத்தில் நீங்கள் பார்க்கும் விஷயங்கள்:** +- **எக்ஸ்ப்ளோரர் பக்கவுரு**: சேமிப்பகம் கோப்புகள் மற்றும் கோப்புறை அமைப்பை காட்சிப்படுத்தும் +- **தொகுப்பாய்வு பகுதி**: தேர்ந்தெடுக்கப்பட்ட கோப்புகளின் உள்ளடக்கத்தை திருத்தக் காட்டும் +- **செயற்பாட்டு பட்டை**: மூலக் கட்டுப்பாடு மற்றும் நீட்டிப்புக்கள் போன்ற அம்சங்களுக்கு அணுகல் +- **நிலைக் பட்டை**: இணைப்பு நிலை மற்றும் தற்போதைய கிளைப் பற்றிய தகவல் + +### படி 4: உங்கள் ரெசுமே உள்ளடக்கத்தை உருவாக்கவும் + +`index.html` இல் உள்ள இடமதிப்புகளை முழுமையான ரெசுமே கட்டமைப்பால் மாற்றவும். இந்த HTML உங்கள் தகுதிகளை தொழில்முறை முறையில் முன்னிறுத்தும் அடித்தளம்.
- உங்கள் ரெச்யூம் வலைத்தளத்தின் உள்ளடக்கத்திற்கான HTML குறியீடு. +முழுமையான HTML ரெசுமே கட்டமைப்பு + +```html + + + + + + + + Your Name - Professional Resume + + + - - - - - - உங்கள் பெயரை இங்கே எழுதுங்கள்! - - - -
-
-
-

தொடர்பு

- -

- - உங்கள் மின்னஞ்சலை இங்கே எழுதுங்கள் -

-

- - உங்கள் பயனர் பெயரை இங்கே எழுதுங்கள்! -

-

- - உங்கள் பயனர் பெயரை இங்கே எழுதுங்கள்! -

-
-
-

திறன்கள்

- -
    -
  • திறன் 1!
    • -
  • திறன் 2!
    • -
  • திறன் 3!
    • -
  • திறன் 4!
    • -
-
-
-

கல்வி

- -

உங்கள் பாடத்திட்டத்தை இங்கே எழுதுங்கள்!

-

- உங்கள் கல்வி நிறுவனத்தை இங்கே எழுதுங்கள்! -

-

- தொடக்கம் - முடிவு தேதி -

-
-
-
-
-

பற்றி

- -

உங்களைப் பற்றிய ஒரு குறிப்பு எழுதுங்கள்!

-
-
-

வேலை அனுபவம்

- -

வேலை தலைப்பு

-

- அமைப்பின் பெயரை இங்கே எழுதுங்கள் | தொடங்கும் மாதம் – முடியும் மாதம் -

-
    -
  • பணி 1 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!
    • -
  • பணி 2 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!
    • -
  • உங்கள் பங்களிப்பின் விளைவுகள்/தாக்கங்களை எழுதுங்கள்
    • - -
-

வேலை தலைப்பு 2

-

- அமைப்பின் பெயரை இங்கே எழுதுங்கள் | தொடங்கும் மாதம் – முடியும் மாதம் -

-
    -
  • பணி 1 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!
    • -
  • பணி 2 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!
    • -
  • உங்கள் பங்களிப்பின் விளைவுகள்/தாக்கங்களை எழுதுங்கள்
    • - -
-
-
-
- - +
+ + +
+
+

ABOUT

+

Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.

+
+ +
+

WORK EXPERIENCE

+
+

Job Title

+

Company Name | Start Date – End Date

+
    +
  • Describe a key accomplishment or responsibility
    • +
  • Highlight specific skills or technologies used
    • +
  • Quantify impact where possible (e.g., "Improved efficiency by 25%")
    • +
+
+ +
+

Previous Job Title

+

Previous Company | Start Date – End Date

+
    +
  • Focus on transferable skills and achievements
    • +
  • Demonstrate growth and learning progression
    • +
  • Include any leadership or collaboration experiences
    • +
+
+
+ +
+

PROJECTS

+
+

Project Name

+

Brief description of what the project accomplishes and technologies used.

+ View Project +
+
+
+
+ + +```
-உங்கள் ரெச்யூம் விவரங்களை HTML குறியீட்டில் உள்ள _placeholder text_ ஐ மாற்றி சேர்க்கவும். +**தனிப்பயனாக்கும் வழிகாட்டல்கள்:** +- அனைத்து இடமதிப்பு உரைகளையும் உங்கள் உண்மையான தகவல்களால் மாற்றவும் +- உங்கள் அனுபவ நிலை மற்றும் தொழில் திசையில் பொருந்துமாறு பகுதிகள் மாற்றிக் கொள்ளவும் +- தேவையானவை சேர்க்கவும் அல்லது அகற்றவும் (உதாரணம்: சான்றிதழ்கள், தன்னமர்வோர் வேலை, மொழிகள்) +- உங்கள் உண்மையான சுயவிவர மற்றும் திட்டங்களுக்கான இணைப்புகளை சேர்க்கவும் -**படி 5:** My-Resume கோப்புறை மீது மிதக்க, `New File ...` ஐகானை கிளிக் செய்து, உங்கள் திட்டத்தில் 2 புதிய கோப்புகளை உருவாக்கவும்: `style.css` மற்றும் `codeswing.json` கோப்புகள். +### படி 5: ஆதரவு கோப்புகளை உருவாக்கவும் -**படி 6:** `style.css` கோப்பை திறந்து, கீழே உள்ள குறியீட்டை ஒட்டவும் மற்றும் சேமிக்கவும். +தொழில்முறை வலைத்தளங்களுக்கு ஒருங்கிணைந்த கோப்பு அமைப்புகள் தேவை. முழுமையான திட்டத்திற்கு தேவையான CSS ஸ்டைல்ஷீட் மற்றும் கட்டமைப்பு கோப்புகளை உருவாக்கவும். + +1. எக்ஸ்ப்ளோரர் பக்கவுரலில் உங்கள் திட்ட கோப்புறை பெயரின் மேல் சிய.hover செய்யவும் +2. காணும் "New File" ஐகானை (📄+) கிளிக் செய்யவும் +3. கீழ்காணும் கோப்புகளை தானாக உருவாக்கவும்: + - `style.css` (அழகுபடுத்தல் மற்றும் வடிவமைப்பிற்காக) + - `codeswing.json` (முன்காட்சிப்படுத்தல் நீட்டிப்பு கட்டமைப்பு) + +**CSS கோப்பு உருவாக்கல் (`style.css`):**
- தளத்தின் அமைப்பை வடிவமைக்க CSS குறியீடு. - - body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 16px; - max-width: 960px; - margin: auto; - } - h1 { - font-size: 3em; - letter-spacing: .6em; - padding-top: 1em; - padding-bottom: 1em; - } - - h2 { - font-size: 1.5em; - padding-bottom: 1em; - } - - h3 { - font-size: 1em; - padding-bottom: 1em; - } - main { - display: grid; - grid-template-columns: 40% 60%; - margin-top: 3em; - } - header { - text-align: center; - margin: auto 2em; - } - - section { - margin: auto 1em 4em 2em; - } - - i { - margin-right: .5em; - } - - p { - margin: .2em auto - } - - hr { - border: none; - background-color: lightgray; - height: 1px; - } - - h1, h2, h3 { - font-weight: 100; - margin-bottom: 0; - } - #mainLeft { - border-right: 1px solid lightgray; - } - +தொழில்முறை CSS அழகுபடுத்தல் + +```css +/* Modern Resume Styling */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 16px; + line-height: 1.6; + max-width: 960px; + margin: 0 auto; + padding: 20px; + color: #333; + background-color: #f9f9f9; +} + +/* Header Styling */ +header { + text-align: center; + margin-bottom: 3em; + padding: 2em; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + font-size: 3em; + letter-spacing: 0.1em; + margin-bottom: 0.2em; + font-weight: 300; +} + +.role { + font-size: 1.3em; + font-weight: 300; + margin: 1em 0; +} + +/* Main Content Layout */ +main { + display: grid; + grid-template-columns: 35% 65%; + gap: 3em; + margin-top: 3em; + background: white; + padding: 2em; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +/* Typography */ +h2 { + font-size: 1.4em; + font-weight: 600; + margin-bottom: 1em; + color: #667eea; + border-bottom: 2px solid #667eea; + padding-bottom: 0.3em; +} + +h3 { + font-size: 1.1em; + font-weight: 600; + margin-bottom: 0.5em; + color: #444; +} + +/* Section Styling */ +section { + margin-bottom: 2.5em; +} + +#mainLeft { + border-right: 1px solid #e0e0e0; + padding-right: 2em; +} + +/* Contact Links */ +section a { + color: #667eea; + text-decoration: none; + transition: color 0.3s ease; +} + +section a:hover { + color: #764ba2; + text-decoration: underline; +} + +/* Icons */ +i { + margin-right: 0.8em; + width: 20px; + text-align: center; + color: #667eea; +} + +/* Lists */ +ul { + list-style: none; + padding-left: 0; +} + +li { + margin: 0.5em 0; + padding: 0.3em 0; + position: relative; +} + +li:before { + content: "▸"; + color: #667eea; + margin-right: 0.5em; +} + +/* Work Experience */ +.job, .project { + margin-bottom: 2em; + padding-bottom: 1.5em; + border-bottom: 1px solid #f0f0f0; +} + +.company { + font-style: italic; + color: #666; + margin-bottom: 0.5em; +} + +/* Responsive Design */ +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + gap: 2em; + } + + #mainLeft { + border-right: none; + border-bottom: 1px solid #e0e0e0; + padding-right: 0; + padding-bottom: 2em; + } + + h1 { + font-size: 2.2em; + } + + body { + padding: 10px; + } +} + +/* Print Styles */ +@media print { + body { + background: white; + color: black; + font-size: 12pt; + } + + header { + background: none; + color: black; + box-shadow: none; + } + + main { + box-shadow: none; + } +} +```
-**படி 6:** `codeswing.json` கோப்பை திறந்து, கீழே உள்ள குறியீட்டை ஒட்டவும் மற்றும் சேமிக்கவும். +**கட்டமைப்பு கோப்பு உருவாக்கல் (`codeswing.json`):** - { +```json +{ "scripts": [], "styles": [] - } +} +``` + +**CSS அம்சங்களைப் புரிந்துகொள்வது:** +- பதிலளிக்கும், தொழில்முறை வடிவமைப்பு க்கான CSS கிரிட் பயன்பாடு +- கிரேடியன்ட் தலைப்புகளுடன் நவீன நிற திட்டங்கள் +- நேரடி விளைவுகள் மற்றும் மென்மையான மாற்றங்களைக்கொண்ட ஹோவர் விளைவுகள் +- அனைத்து சாதன அளவுகளுக்கும் வேலை செய்யும் பதிலளிக்கும் வடிவமைப்பு +- PDF உருவாக்கத்திற்கு அச்சிட சக்திவாய்ந்த அமைப்புகள் + + +### படி 6: நீட்டிப்புகள் நிறுவுதல் மற்றும் கட்டமைத்தல் + +நீட்டிப்புகள் உங்கள் மேம்பாட்டு அனுபவத்தை நேரடி முன்னோட்ட வசதிகள் மற்றும் மேம்பட்ட பணிமுறை கருவிகளால் அதிகரிக்கின்றன. CodeSwing நீட்டிப்பு வலை தொழில்முறைத் திட்டங்களுக்கு மிகவும் பயனுள்ளதாகும். + +**CodeSwing நீட்டிப்பை நிறுவுதல்:** -**படி 7:** `Codeswing extension` ஐ நிறுவி, குறியீட்டு பகுதியில் ரெச்யூம் வலைத்தளத்தை காண்பிக்கவும். +1. செயல்பாட்டுப் பட்டியில் (🧩) நீட்டிப்புகள் ஐகானை கிளிக் செய்யவும் +2. சந்தைத் தேடல் பொட்டியில் "CodeSwing" என தேடவும் +3. தேடல் முடிவுகளில் CodeSwing நீட்டிப்பை தேர்ந்தெடுக்கவும் +4. நீல "Install" பொத்தானை கிளிக் செய்யவும் -_`Extensions`_ ஐகானை செயல்பாட்டு பட்டியில் கிளிக் செய்து, Codeswing என தட்டச்சு செய்யவும். விரிவாக்கப்பட்ட செயல்பாட்டு பட்டியில் _நீல நிற install button_ ஐ கிளிக் செய்து அல்லது விரிவாக்கத்தை தேர்வு செய்த பிறகு குறியீட்டு பகுதியில் தோன்றும் install button ஐ பயன்படுத்தி நிறுவவும். விரிவாக்கத்தை நிறுவியவுடன், உங்கள் திட்டத்தில் ஏற்பட்ட மாற்றங்களை கவனிக்கவும் 😃 +![CodeSwing நீட்டிப்பு நிறுவுதல்](../../../../8-code-editor/images/install-extension.gif) -![Extensions ஐ நிறுவவும்](../../../../8-code-editor/images/install-extension.gif) +**CodeSwing வழங்கும் வசதிகள்:** +- தொகுக்கும்போது உங்கள் வலைத்தளத்தின் நேரடி முன்னோட்டை இயக்குக +- கைமுறையான புதுப்பிப்பின்றி மாற்றங்களை நேரடியாக காட்சிப்படுத்துக +- HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் உள்ளிட்ட பல கோப்பு வகைகளை ஆதரிக்கிறது +- ஒருங்கிணைக்கப்பட்ட மேம்பாட்டு சூழல் அனுபவத்தை வழங்குகிறது -விரிவாக்கத்தை நிறுவிய பிறகு, உங்கள் திரையில் இதை காணலாம். +**நிறுவின்பின் உடனடியான விளைவுகள்:** +CodeSwing நிறுவப்பட்டவுடன், தொகுப்பாளரிலேயே உங்கள் ரெசுமே வலைத்தளத்தின் நேரடி முன்னோட்டை காட்டும். மாற்றங்களைச் செய்தபோது உங்கள் தளம் எப்படி தோன்றுகிறது என்பது தெளிவாக பார்க்க முடியும். -![Codeswing விரிவாக்கம் செயல்பாட்டில்](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ta.png) +![CodeSwing நீட்டிப்பின் நேரடி முன்னோட்டை](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ta.png) -நீங்கள் செய்த மாற்றங்களில் திருப்தி அடைந்தால், `Changes` கோப்புறையில் மிதக்கவும், `+` பொத்தானை கிளிக் செய்து மாற்றங்களை நிலைப்படுத்தவும். +**வளர்ந்த இடைமுகத்தைப் புரிந்து கொள்ள:** +- **வெட்டு காட்சியமைப்பு**: ஒரு பக்கத்தில் நீங்கள் எழுதும் குறியீடு மற்றும் மற்ற பக்கத்தில் நேரடி முன்னோட்டை காட்சி +- **நேரடி புதுப்பிப்புகள்**: தட்டச்சு செய்தவுடன் உடனான ஆப்டேட்கள் +- **பரிணாம முன்னோட்டை**: இணைப்புகள் மற்றும் தொடர்புகளை சோதிக்க உகந்தது +- **மொபைல் சிமுலேஷன்**: பதிலளிக்கும் வடிவமைத்தை சோதிக்கும் திறன் -ஒரு commit செய்தி _(நீங்கள் திட்டத்தில் செய்த மாற்றத்தின் விளக்கம்)_ தட்டச்சு செய்து, `check` ஐ கிளிக் செய்து உங்கள் மாற்றங்களை commit செய்யவும். உங்கள் திட்டத்தில் வேலை முடிந்தவுடன், மேலே இடது மூலையில் உள்ள ஹாம்பர்கர் மெனு ஐகானை தேர்வு செய்து GitHub இல் உள்ள Repositoryக்கு திரும்பவும். +### படி 7: பதிப்புக் கட்டுப்பாடு மற்றும் வெளியீடு -வாழ்த்துக்கள் 🎉 சில படிகளில் நீங்கள் vscode.dev ஐப் பயன்படுத்தி உங்கள் ரெச்யூம் வலைத்தளத்தை உருவாக்கி விட்டீர்கள். +உங்கள் ரெசுமே வலைத்தளம் முடிந்தவுடன், Git ஐபயன்படுத்தி உங்கள் பணியை சேமித்து ஆன்லைனில் வெளியிடுங்கள். -## 🚀 சவால் +**மாற்றங்களை கமிட் செய்வது:** -நீங்கள் மாற்றங்களைச் செய்ய அனுமதி உள்ள ஒரு தொலைவிலுள்ள Repositoryயைத் திறந்து, சில கோப்புகளை புதுப்பிக்கவும். அடுத்ததாக, உங்கள் மாற்றங்களுடன் ஒரு புதிய கிளையை உருவாக்கி, ஒரு Pull Request ஐ உருவாக்க முயற்சிக்கவும். +1. செயல்பாட்டுப் பட்டியில் (🌿) மூலக் கட்டுப்பாடு ஐகானை கிளிக் செய்யவும் +2. நீங்கள் உருவாக்கிய மற்றும் மாற்றிய கோப்புகளை "Changes" பகுதியில் பரிசீலிக்கவும் +3. ஒவ்வொரு கோப்பின் பக்கத்தில் உள்ள "+" ஐகானை கிளிக் செய்து மாற்றங்களை நிலைப்படுத்தவும் +4. விளக்கமான கமிட் செய்தலை எழுதவும், உதாரணம்: + - "பதிலளிக்கும் வடிவமைப்புடன் முழுமையான ரெசுமே வலைத்தளத்தை சேர்த்து" + - "தொழில்முறை ஸ்டைலிங் மற்றும் உள்ளடக்க கட்டமைப்பை அமற்றல்" +5. ✓ (சரிபார்ப்பு) ஐகானை கிளிக் செய்து உங்கள் மாற்றங்களை கமிட் செய்து புஷ் செய்யவும் -## மதிப்பீடு & சுயபயிற்சி +**சிறந்த கமிட் செய்தல் மாதிரிகள்:** +- "தொழில்முறை ரெசுமே உள்ளடக்கம் மற்றும் ஸ்டைலிங் சேர்க்கப்பட்டது" +- "மொபைல் பொருத்தத்துக்கான பதிலளிக்கும் வடிவமைப்பு செயல்படுத்தப்பட்டது" +- "தொடர்பு தகவல்கள் மற்றும் திட்ட இணைப்புகள் புதுப்பிக்கப்பட்டன" + +> 💡 **தொழில்முறை அறிவுரை**: நல்ல கமிட் செய்தல்கள் உங்கள் திட்டத்தின் வளர்ச்சியை பின்தொடரவும், சிறிய விபரங்களில் கவனம் செலுத்துகிறீர்கள் என்பதை நிரூபிக்கும் - இது பணியாளர்களுக்கு விருப்பமானது. + +**பதிப்பிடப்பட்ட தளத்தை அணுகுதல்:** +கமிட் செய்த பிறகு, மேல்திரையில் இடது மூலமுகத்தில் உள்ள ஹாம்பர்கர் மெனு (☰) மூலம் GitHub சேமிப்பகத்திற்கு திரும்பலாம். உங்கள் ரெசுமே வலைத்தளம் பதிப்புக் கட்டுப்பாடுடன் தயாராக வெளியிடமுடியும் அல்லது பகிரப்படலாம். + +## முடிவுகள் மற்றும் அடுத்த படிகள் + +**வாழ்த்துக்கள்! 🎉** நீங்கள் வெற்றிகரமாக VSCode.dev கொண்டு ஒரு தொழில்முறை ரெசுமே வலைத்தளத்தை உருவாக்கி முடித்துள்ளீர்கள். உங்கள் திட்டம் இதையை நிரூபிக்கிறது: + +**தொழில்நுட்ப திறன்கள்:** +- **சேமிப்பகம் மேலாண்மை**: முழுமையான திட்ட கட்டமைப்பை உருவாக்கி ஒழுங்குபடுத்தியது +- **வலை மேம்பாடு**: நவீன HTML5 மற்றும் CSS3 பயன்படுத்தி பதிலளிக்கும் வலைதளத்தை உருவாக்கியது +- **பதிப்புக் கட்டுப்பாடு**: பொருத்தமான Git பணிமுறையை அமற்படுத்தியது +- **கருவி திறன்**: VSCode.dev இடைமுகமும் நீட்டிப்பு அமைப்பும் சிறப்பாக பயன்படுத்தப்பட்டது + +**தொழில்முறை பெறுமதிகள்:** +- **ஆன்லைன் உருவம்**: உங்கள் தகுதிகளைக் காட்டும் பகிரக்கூடிய URL +- **நவீன வடிவம்**: பாரம்பரிய PDF ரெசுமே க்கு பதிலாக பரிணாம மாற்று +- **பிரமாணப்படுத்தப்பட்ட திறன்கள்**: உங்கள் வலை மேம்பாட்டு திறன்களுக்கான தெளிவான சான்று +- **எளிய புதுப்பிப்புகள்**: தொடர்ச்சியாக மேம்படுத்தவும் செம்மைப்படுத்தவும் செய்யக்கூடிய அடித்தளம் + +### வெளியீடு விருப்பங்கள் + +உங்கள் ரெசுமே பணியாளர்களுக்கு அணுகக்கூடியதாக பின்வரும் ஹோஸ்டிங் விருப்பங்களை பரிசீலிக்கவும்: + +**GitHub Pages (பரவலாய் பரிந்துரைக்கப்படுகிறது):** +1. GitHub இல் உங்கள் சேமிப்பகம் அமைப்புகளுக்கு செல்லவும் +2. "Pages" பகுதியை கீழே இடம் பார்த்து செல் +3. "Deploy from a branch" தேர்ந்தெடுத்து "main" கிளையை தேர்வு செய்யவும் +4. உங்கள் தளம் `https://your-username.github.io/my-resume` இல் கிடைக்கும் + +**மாற்று தளங்கள்:** +- **Netlify**: தானியங்கி வெளியீடு மற்றும் தனிப்பயன் டொமைன்கள் +- **Vercel**: நவீன ஹோஸ்டிங் அம்சங்களுடன் வேகமான வெளியீடு +- **GitHub Codespaces**: இடைமுக முன்னோட்டத்துடன் மேம்பாட்டு சூழல் + +### மேம்பாட்டு பரிந்துரைகள் + +உங்கள் திறன்களை வளர்க்க, கீழ்க்காணும் அம்சங்களைச் சேர்க்க முயற்சிக்கவும்: + +**தொழில்நுட்ப மேம்பாடுகள்:** +- **JavaScript தகவல் பரிணாமம்**: மென்மையான ஸ்க்ரோல்லிங் அல்லது பரிணாம கூறுகள் சேர்க்கவும் +- **இருண்ட / வெளிர் தீம் மாற்றி**: பயனர் விருப்பத்திற்கு தீம் மாற்றி அம்சம் உருவாக்கவும் +- **தொடர்பு படிவம்**: நேரடி தொடர்புக்கு படிவ சரிபார்ப்புடன் செயல்படுத்தவும் +- **திட்டங்கள் பகுதி**: ஹோவ் விளைவுகளும் மோடல் பாப்பப்புகளும் கொண்ட பகுதி உருவாக்கவும் +- **பிளாக் பகுதி**: உங்கள் கற்றல் பயணத்தை குறிக்கும் குறைந்தது 3 மாதிரி பதிவுகளுடன் சேர்க்கவும் +- **SEO மேம்பாடு**: பொருத்தமான மெட்டா டேக், கட்டமைக்கப்பட்ட தரவு மற்றும் செயல்திறன் மேம்பாடு +- **GitHub Pages அல்லது Netlify மூலம் மேம்படுத்தப்பட்ட தளத்தை வெளியிடு** +- **README.md இல் அனைத்து புதிய அம்சங்களையும் திரை படங்களுடன் விவரிக்கவும்** + +உங்கள் மேம்படுத்தப்பட்ட வலைதளம் பதிலளிக்கும் வடிவமைப்பு, JavaScript பரிணாமம் மற்றும் தொழில்முறை வெளியீட்டு பணிமுறை ஆகியவற்றை அதிகாரப்பூர்வமாகக் காட்ட வேண்டும். + +## சவால் நீட்டிப்பு + +உங்கள் திறன்களை இன்னும் விரிவுபடுத்த தயாரா? கீழ்க்காணும் சவால்களை முயற்சிக்கவும்: + +**📱 மொபைல் முதன்மை மறுவரைவோடு:** CSS Grid மற்றும் Flexbox பயன்படுத்தி உங்கள் தளத்தை முற்றிலும் மறுவடிவமைக்கவும் + +**🔍 SEO மேம்பாடு:** முழுமையான SEO உடன் மெட்டா டேக்க்கள், கட்டமைக்கப்பட்ட தரவு மற்றும் செயல்திறன் மேம்பாடு செயல்படுத்தவும் + +**🌐 பல மொழி ஆதரவு:** பல மொழிகளுக்கு ஆதரவு கொண்ட சர்வதேசப்படுத்தல் அம்சங்கள் சேர்க்கவும் + +**📊 பகுப்பாய்வு ஒருங்கிணைப்பு:** பயணியர் ஈடுபாட்டைப் பதிவு செய்ய கூகுள் அனலிடிக்ஸ் சேர்க்கவும் மற்றும் உள்ளடக்கத்தை மேம்படுத்தவும் + +**🚀 செயல்திறன் மேம்பாடு:** அனைத்து பிரிவுகளிலும் *Lighthouse* செயல்திறன் மதிப்பெண்களில் சரியான மதிப்பெண்களை பெறும் நிலைக்கு கொண்டு செல் + +## மதிப்பாய்வு மற்றும் தன்னிலை ஆய்வு + +உங்கள் அறிவை விரிவுபடுத்த கீழ்காணும் வளங்களைப் பயன்படுத்தவும்: + +**உயர் மட்ட VSCode.dev அம்சங்கள்:** +- [VSCode.dev கையேடு](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - வலைதள அடிப்படை தொகுப்பு முழுமையான வழிகாட்டி +- [GitHub Codespaces](https://docs.github.com/en/codespaces) - மேக மேம்பாட்டு சூழல்கள் + +**வலை மேம்பாட்டு சிறந்த நடைமுறைகள்:** +- **பதிலளிக்கும் வடிவமைப்பு**: நவீன அமைப்பிற்கு CSS கிரிட் மற்றும் Flexbox ஆகியவற்றை படித்தறிந்து கொள்ளவும் +- **அணுகல்**: ஒருங்கிணைந்த வலை வடிவமைப்பிற்கான WCAG வழிகாட்டுதல்களை கற்கவும் +- **செயல்்திறன்**: கணையம் மேம்பாட்டிற்காக Lighthouse போன்ற கருவிகள் பற்றிக் கற்றுக்கொள்ளவும் +- **SEO**: தேடல் இயந்திர மேம்பாடு அடிப்படைகளை புரிந்து கொள்ளவும் + +**தொழில் வளர்ச்சி:** +- **போர்ட்ஃபோலியோ கட்டமைத்தல்**: பல்வேறு திறன்களை காட்ட கூடுதல் திட்டங்களை உருவாக்கவும் +- **திறந்த மூல**: இணைந்து பணிபுரிய பிராஜெக்ட்களில் பங்குபெறவும் +- **நெட்வொர்க்கிங்**: உங்கள் ரெசியூமி வலைத்தளத்தை டெவலப்பர் சமூகங்களில் பகிர்ந்து கருத்துக்களை பெறவும் +- **தொடர் கற்றல்**: வலை வளர்ச்சி போக்குகள் மற்றும் தொழில்நுட்பங்களில் புதுப்பிக்கப்பட்டிருங்கள் + +--- -[VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) மற்றும் அதன் பிற அம்சங்கள் பற்றிய மேலும் படிக்கவும். +**உங்கள் அடுத்த படிகள்:** உங்கள் ரெசியூமி வலைத்தளத்தை நண்பர்கள், குடும்பம் அல்லது வழிகாட்டிகளுடன் பகிர்ந்து கருத்துக்களை பெறுங்கள். அவர்களின் பரிந்துரைகளை பயன்படுத்தி உங்கள் வடிவமைப்பை மேம்படுத்தி திருத்துங்கள். இது வெறும் ரெசியூமி அல்ல என்பதை நினைவில் வையுங்கள் – இது ஒரு வலை டெவலப்பராக உங்கள் வளர்ச்சியின் ஒரு அறிகுறி! --- -**அறிவிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கிறோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் சொந்த மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்களுக்கும் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**அறிவுறுத்தல்**: +இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. துல்லியத்தை நோக்கி முயலினாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து அறிந்து கொள்ளுங்கள். உள்ளூர் மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கான முறையாக, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பின் பயன்படுத்தலால் உருவாகக்கூடிய எந்த தவறான புரிதல்கள் அல்லது வழு விளக்கங்களுக்கு நாங்கள் பொறுப்பு ஏற்கவில்லை. + \ No newline at end of file diff --git a/translations/ta/9-chat-project/README.md b/translations/ta/9-chat-project/README.md index 74f5d0e0f..a33675e97 100644 --- a/translations/ta/9-chat-project/README.md +++ b/translations/ta/9-chat-project/README.md @@ -1,35 +1,213 @@ -# சந்தை திட்டம் +# AIயுடன் கூடிய ஒரு உரையாடல் உதவியாளரை உருவாக்குதல் -இந்த சந்தை திட்டம் GitHub Models பயன்படுத்தி ஒரு Chat Assistant உருவாக்குவது எப்படி என்பதை காட்டுகிறது. +1960களில் ஸ்டார் ட்ரெக் படத்தில் экиப் அணி கப்பலின் கணினியுடன் சளையாக உரையாடி, சிக்கலான கேள்விகளை கேட்டு ஆழமான பதில்களைப் பெறுகின்றனர் என்று நினைத்தீர்களா? 1960களின்纯ியல் கற்பனை போன்று தெரிந்தது இப்போது நீங்கள் ஏற்கனவே அறிந்துள்ள வலை தொழில்நுட்பங்களைப் பயன்படுத்தி உருவாக்க முடியும். -இது முடிந்த திட்டம் எப்படி இருக்கும் என்பதை இங்கே காணலாம்: +இந்த பாடத்தில், நாங்கள் HTML, CSS, JavaScript மற்றும் சில பின்னணி ஒருமை பணிகளைப் பயன்படுத்தி AI உரையாடல் உதவியாளரை உருவாக்குவோம். நீங்கள் கற்றுக்கொண்ட அதே திறன்கள், குறித்த சூழலைப் புரிந்து, பொருத்தமான பதில்களை உருவாக்கக்கூடிய சக்திவாய்ந்த AI சேவைகளுடன் எப்படி இணைக்கப்படுகின்றன என்று கண்டுபிடிப்பீர்கள். -![சந்தை பயன்பாடு](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ta.png) +AI என்பது தகவலை மட்டும் தேடி கண்டுபிடிப்பதல்ல, அதை உங்கள் குறிப்பிட்ட கேள்விகளுக்கு ஏற்ப ஒழுங்குபடுத்தப்பட்ட பதில்களாக உருவாக்கும் ஒரு விரிவான நூலகத்தைப் பெறுவது போன்றதாக நினைத்துக் கொள்ளுங்கள். ஆயிரக்கணக்கான பக்கங்கள் வழியே தேடுவதற்குப் பதிலாக நீங்கள் நேரடி மற்றும் சூழல்பூர்வ பதில்களைப் பெறுவீர்கள். -சில பின்னணி தகவல்கள், Generative AI பயன்படுத்தி Chat Assistant உருவாக்குவது AI பற்றி கற்றுக்கொள்வதற்கான சிறந்த வழியாகும். இந்த பாடத்தில், Generative AI-யை ஒரு வலை பயன்பாட்டில் ஒருங்கிணைப்பது எப்படி என்பதை நீங்கள் கற்றுக்கொள்வீர்கள். தொடங்குவோம். +இந்த ஒருங்கிணைவு தெரிந்த வலை தொழில்நுட்பங்கள் மூலமாக நிகழ்கிறது. HTML உரையாடல் இடைமுகத்தை உருவாக்குகிறது, CSS காட்சியமைப்பை கையாள்கிறது, JavaScript பயனர் தொடர்புகளை நிர்வகிக்கிறது, மற்றும் பின்னணி API அனைத்தையும் AI சேவைகளுடன் இணைக்கிறது. இது ஒரு இசைக்குழுவின் வெவ்வேறு பகுதிகள் ஒன்றிணைந்து இசை உருவாக்கும் போல் உள்ளது. -## Generative AI-யுடன் இணைப்பு +நாம் இயற்கை மனித தொடர்புக்கும் முறைமையான கணினி செயல்பாட்டுக்கும் இடையில் ஒரு பாலம் கட்டிக்கொண்டு இருக்கிறோம். நீங்கள் AI சேவைகள் ஒருங்கிணைப்பின் தொழில்நுட்ப அமலாக்கத்தையும், தொடர்புகளை உணர்வுக்குரியதாகக் காட்டும் வடிவமைப்பு முறைப்பாடுகளையும் கற்றுக்கொள்வீர்கள். -பின்புறத்தில், GitHub Models-ஐ பயன்படுத்துகிறோம். இது AI-யை இலவசமாக பயன்படுத்த அனுமதிக்கும் சிறந்த சேவையாகும். அதன் Playground-க்கு சென்று, உங்கள் தேர்ந்தெடுத்த பின்புற மொழிக்கு பொருந்தும் குறியீட்டை எடுக்கவும். இது [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) இல் எப்படி இருக்கும்: +இந்த பாடத்தின் கடைசியில், AI ஒருங்கிணைவு ஒரு மர்மமான செயல்முறை போல் அல்லாமல், நீங்கள் வேலை செய்வதற்கான மற்றொரு API போல உணர வேண்டியதாய் இருக்கும். நீங்கள் ChatGPT மற்றும் Claude போன்ற பயன்பாடுகளை இயக்கும் அடிப்படை மாதிரிகளை அறிந்து கொள்வீர்கள், அதே வலை மேம்பாட்டு கொள்கைகளைப் பயன்படுத்தி. -![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ta.png) +## ⚡ அடுத்த 5 நிமிடங்களில் நீங்கள் செய்யக்கூடியவை -நாம் கூறியபடி, "Code" tab-ஐ தேர்ந்தெடுத்து உங்கள் runtime-ஐ தேர்ந்தெடுக்கவும். +**பிஸியான டெவலப்பர்கள் குழப்பமின்றி தொடங்கும் வழி** -![Playground தேர்வு](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ta.png) +```mermaid +flowchart LR + A[⚡ 5 நிமிடங்கள்] --> B[GitHub டோக்கனைப் பெறவும்] + B --> C[AI விளையாட்டு மைதானத்தை சோதிக்கவும்] + C --> D[Python குறியீட்டை நகலெடுக்கவும்] + D --> E[AI பதில்களைப் பார்க்கவும்] +``` +- **நிமிடம் 1**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) சென்று தனிப்பட்ட அணுகல் டோக்கனை உருவாக்கவும் +- **நிமிடம் 2**: Playground இடைமுகத்தில் நேரடியாக AI தொடர்புகளை சோதிக்கவும் +- **நிமிடம் 3**: "Code" டாப் கிளிக் செய்து Python குறியீட்டை பிரதிபதிக்கவும் +- **நிமிடம் 4**: உங்கள் டோக்கன் கொண்டு கோடை உள்ளூரில் இயக்கவும்: `GITHUB_TOKEN=your_token python test.py` +- **நிமிடம் 5**: உங்கள் சொந்த குறியீட்டிலிருந்து முதன்முறையாக AI பதிலை உருவாகும் நிலையில் காண்க + +**விரைவான சோதனை குறியீடு**: +```python +import os +from openai import OpenAI + +client = OpenAI( + base_url="https://models.github.ai/inference", + api_key="your_token_here" +) + +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Hello AI!"}], + model="openai/gpt-4o-mini" +) + +print(response.choices[0].message.content) +``` + +**ஏன் இது முக்கியம்**: 5 நிமிடங்களில், நீங்கள் நிரல்பூர்வ AI தொடர்பின் மாயாவை அனுபவிப்பீர்கள். இது நீங்கள் பயன்படுத்தும் அனைத்து AI பயன்பாடுகளுக்கு அடிப்படை கட்டுமான அணியை பிரதிபலிக்கிறது. + +உங்கள் இறுதி திட்டம் எப்படி இருக்கும் என்று இங்கே காணலாம்: + +![பயனர் மற்றும் AI உதவியாளருக்கு இடையேயான உரையாடலைக் காண்பிக்கும் உரையாடல் செயலி இடைமுகம்](../../../translated_images/screenshot.0a1ee0d123df681b.ta.png) + +## 🗺️ AI பயன்பாட்டுத் தயாரிப்பில் உங்கள் கற்றல் பயணம் + +```mermaid +journey + title வலை மேம்பாட்டிலிருந்து AI ஒருங்கிணைப்புக்கு + section AI அடிப்படைகளைப் புரிந்துகொள்வது + உருவாக்கும் AI கோட்பாடுகளை கண்டறிதல்: 4: You + GitHub மாதிரிகள் வெப்தளத்தை ஆராய்தல்: 6: You + AI அளவுருக்கள் மற்றும் ஊர்வார்த்தைகளைجادத்தில் உத்தரவாதமாகுதல்: 8: You + section பின்னணி ஒருங்கிணைப்பு + Python API சேவையகத்தை கட்டமைக்கவும்: 5: You + AI செயல்பாட்டு அழைப்புகளை அமல்படுத்தவும்: 7: You + அகினசிவான செயல்பாடுகளை கையாளுதல்: 8: You + section முன் முனை மேம்பாடு + சமய.chat இடைமுகம் உருவாக்கவும்: 6: You + நேரடி தொடர்புகளை ஆக்கபூர்வமாக கையாளவும்: 8: You + பதிலளிக்கும் பயனர் அனுபவத்தை கட்டமைக்கவும்: 9: You + section தொழில்முறை பயன்பாடு + முழுமையான AI அமைப்பை அமல்படுத்தவும்: 7: You + செயல்திறன் மாதிரிகளை மேம்படுத்தவும்: 8: You + உற்பத்தி தயாரான பயன்பாட்டை உருவாக்கவும்: 9: You +``` +**உங்கள் பயணக் குறிக்கோள்**: இந்த பாடத்திற்க்கு முடிவில், நண்பர்களான ChatGPT, Claude, மற்றும் Google Bard போன்ற நவீன AI உதவியாளர்களை இயக்கும் அதே தொழில்நுட்பங்களையும் முறைப்பாடுகளையும் பயன்படுத்தி ஒரு முழுமையான AI இயக்கப்பட்ட பயன்பாட்டை உருவாக்கி முடிப்பீர்கள். + +## AIஐ புரிந்துகொள்வது: மர்மத்திலிருந்து திறமைக்கு + +குறியீட்டிற்கு முன், நாம் என்னோடு பணியாற்றுகிறோம் என்பதைப் புரிந்துகொள்ளலாம். நீங்கள் முன்பே APIகளைப் பயன்படுத்தியிருந்தால், அடிப்படை முறைப்படி: ஒரு கோரிக்கை அனுப்பி பதில் பெறுவது என்பதை அறிவீர்கள். + +AI APIகள் அதே பொதுவான அமைப்பைப் பின்பற்றுகின்றன, ஆனால் தரவுத்தளத்தில் முன்பே சேமிக்கப்பட்ட தரவை தேர்வு செய்வதற்குப் பதிலாக, அது மிகப்பெரிய உரை தரவுகளிலிருந்து கற்றுமிகுந்த வார்த்தை முறைமைகள் அடிப்படையில் புதிய பதில்களை உருவாக்குகிறது. இது நூலகக் கையேடு மற்றும் அறிவுள்ள நூலகருக்கு இடையேயான வித்தியாசம் போன்று உள்ளது - நூலகர் பல மூலங்களிலிருந்து தகவலை இணைத்து புரிந்துகொள்ள முடியும். + +### "பெருக்கம் செய்கAI" என்றால் என்ன? + +ரோசெட்டா ஸ்டோன் என்றும் அழைக்கப்படும் பழங்கால செருகிப்பொதிவுகளை அறிந்த பேரா訳ர்களுக்கு புதிய மொழி ஐயத்தைக் கற்றுக்கொள்ள உதவியது போன்றது. AI மாதிரிகள் அதேபோல் பணிபுரிகின்றன - ஒட்டுமொத்த உரைகளில் முறைமைகளை கண்டறிந்து மொழி செயல்பாடு எவ்வாறு இருப்பதைச் புரிந்து கொண்டே, அந்த முறைமைகளைக் கொண்டு புதிய கேள்விகளுக்கு பொருத்தமான பதில்களை உருவாக்குகின்றன. + +**எனக்கு இது எளிய ஒப்புமையாக ஒழுங்குபடுத்தக்கூடியது:** +- **சம்பிரதாய தரவுத்தளம்**: உங்கள் பிறப்புச் சான்றிதழைப் கேட்டல் போல - நீங்கள் எப்போதும் அதே ஆவணத்தைக் பெறுவீர்கள் +- **தேடல் இயந்திரம்**: நூலகரிடமிருந்து பூனைகள் பற்றிய புத்தகங்கள் தேடுவது போல – அவர்கள் கிடைக்கும் அனைத்தையும் காட்டுவார்கள் +- **பெருக்கம் செய்கAI**: அறிவுள்ள நண்பரைப் பற்றிப் பேசுவது போல – உங்கள் கேள்விக்கு ஏற்ப தனது சொந்த வார்த்தைகளில் சுவாரஸ்யமான தகவல்களை பகிர்கிறார் + +```mermaid +graph LR + A[உங்கள் கேள்வி] --> B[க مصنوعية நுண்ணறிவு மாதிரி] + B --> C[வடிவம் அறிதல்] + C --> D[உள்ளடக்க உருவாக்கம்] + D --> E[சார்புடைய பதில்] + + F[பயிற்சி தரவு
புத்தகங்கள், கட்டுரைகள், இணைய] --> B +``` +### AI மாதிரிகள் எப்படி கற்கின்றன (எளிய விளக்கம்) -### Python பயன்படுத்துதல் +AI மாதிரிகள் நூல்கள், கட்டுரைகள் மற்றும் உரையாடல்களிடமிருந்து படித்த மிகப்பெரிய தரவுத்தொகுப்புகளைப் பயன்படுத்தி கற்றுக்கொள்ளும். இதன் மூலம், அவை பின்வரும் முறைமைகளை அடையாளம் காண்கின்றன: +- எழுத்துச் தொடர்பில் எண்ணங்கள் எவ்வாறு அமைந்துள்ளன +- எது எப்பொழுது பொதுவாக சேர்வதாக இருக்கிறது +- உரையாடல்கள் பொதுவாக எப்படி உருட்டுகின்றன +- நேர்த்தியான மற்றும் நடுத்தர உரையாடல்களில் ஏற்பட்ட வேறுபாடுகள் -இந்தக் கட்டத்தில் Python-ஐ தேர்ந்தெடுக்கிறோம், இதனால் இந்தக் குறியீட்டை எடுக்கிறோம்: +**இது போன்றது தொல்லியல் ஆராய்ச்சியாளர்கள் பழங்கால மொழிகளைச் சொல்லிசொல்லும் முறையில் புரிந்து கொள்வது**: ஆயிரக்கணக்கான எடுத்துக்காட்டுகளை பகுக்கி இலக்கணம், சொற்பொருள் மற்றும் பண்பாட்டு சூழலைப் புரிந்து, புதிய உரைகளை அந்தக் கற்றுமை முறைமைகளைக் கொண்டு விளக்கத் திரும்ப இயல்படுகின்றனர். + +### ஏன் GitHub Models? + +நாம் GitHub Models ஐப்பயன்படுத்துகிறோம், ஏனெனில் இது எங்கள் சொந்த AI அடிப்படையை ஏற்படுத்தாமல் (நீங்கள் அதை இப்போது செய்ய விரும்பமாட்டீர்கள்!) தொழில்துறை நிலை AIக்கு அணுகலை அளிக்கிறது. இது வானிலை API ஒன்றை உங்கள் சொந்த உள்ளூர்தொடர்புகளை அமைப்பது போல அல்லாமல் பயன்படுத்துவதால் மென்மையானது. + +இது ஒரு விதத்தில் "AI-சிறப்புச் சேவை" ஆகும், மற்றும் சிறந்த பகுதி என்னவென்றால்? தொடங்குவதற்கு இலவசம், அதனால் நோக்கம் இருக்காமல் செலவு இலக்கு இல்லாமல் பரிசோதனை செய்யலாம். + +```mermaid +graph LR + A[முன் முனையச் சந்தை UI] --> B[உங்கள் பின் முனைய API] + B --> C[GitHub மாதிரிகள் API] + C --> D[ஏ.ஐ மாதிரி செயலாக்கம்] + D --> C + C --> B + B --> A +``` +நாம் GitHub Models ஐ பின்னணி ஒருங்கிணைப்பிற்கு பயன்படுத்துவோம், இது ஒருபுறம் தொழில்நுட்ப ரீதியாக திறனுடைய AI திறன்களை, மற்றும் மேம்படுத்திய பயன்பாட்டின் விளக்கத்தை வழங்குகிறது. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) என்பது நீங்கள் பல AI மாதிரிகளையும் சோதித்து, அவற்றின் திறன்களை புரிந்து கொண்டுவிட்டு கோடிங்கில் அமல்படுத்தவைக்க உதவும் இடமாகும். + +## 🧠 AI பயன்பாட்டு வளர்ச்சி சூழல் + +```mermaid +mindmap + root((AI Development)) + Understanding AI + Generative Models + Pattern Recognition + Content Generation + Context Understanding + Response Synthesis + AI Parameters + Temperature Control + Token Limits + Top-p Filtering + System Prompts + Backend Architecture + API Integration + GitHub Models + Authentication + Request Handling + Error Management + Python Infrastructure + FastAPI Framework + Async Operations + Environment Security + CORS Configuration + Frontend Experience + Chat Interface + Real-time Updates + Message History + User Feedback + Loading States + Modern Web Tech + ES6 Classes + Async/Await + DOM Manipulation + Event Handling + Professional Patterns + Security Best Practices + Token Management + Input Validation + XSS Prevention + Error Boundaries + Production Readiness + Performance Optimization + Responsive Design + Accessibility + Testing Strategies +``` +**மூலம் கோட்பாடு**: AI பயன்பாட்டு வளர்ச்சி பாரம்பரிய வலை மேம்பாட்டுத் திறன்களுடன் AI சேவைகள் ஒருங்கிணைப்பைப் பொருத்தி, இயற்கை மற்றும் சுறுசுறுப்பான பயன்பாடுகளை உருவாக்குகிறது. + +![GitHub Models AI Playground இடைமுகம் மாதிரி தேர்வு மற்றும் சோதனை பகுதி](../../../translated_images/playground.d2b927122224ff8f.ta.png) + +**Playground யைப் பயனுள்ளதாக 만드는வைகள்:** +- GPT-4o-mini, Claude மற்றும் பிற AI மாதிரிகளை சோதிக்கவும் (இல்லையெனில் இலவசம்!) +- உங்கள் எண்ணங்களையும் குறிப்புகளையும் குறியீடு எழுதுவதற்கு முன் சோதிக்கவும் +- உங்கள் விருப்பத்திற்கேற்ற மொழியில் தயாரான குறியீடுகளைப் பெறு +- படைப்பாற்றல் நிலை மற்றும் பதில் நீளம் போன்ற அமைப்புகளை மாற்றி அவை வெளியீட்டிற்கு எப்படி பாதிப்பை ஏற்படுத்துகிறதென்று பார் + +சிறிது விளையாடிவிட்டு, "Code" டாப் கிளிக் செய்து உங்கள் நிரல் மொழியைத் தேர்வுசெய்து அமலாக்க குறியீட்டை பெறலாம். + +![Playground தேர்வு - வெவ்வேறு நிரல் மொழிகளுக்கான குறியீடு உற்பத்தி விருப்பங்கள்](../../../translated_images/playground-choice.1d23ba7d407f4758.ta.png) + +## பைதான் பின்தள ஒருமை அமல்படுத்தல் + +இப்போது Python மூலம் AI ஒருங்கிணைப்பை செயல்படுத்துவோம். Python அதன் எளிய ஒழுங்கு மற்றும் சக்திவாய்ந்த நூலகங்களுக்காக AI பயன்பாடுகளுக்கு சிறந்தது. நாம் GitHub Models Playground இலிருந்து குறியீட்டைப் பெற்று அதை மீண்டும் பயன்படுத்தக்கூடிய, தயாரிப்பு தரமான செயல்பாட்டைப் போற்றுவோம். + +### அடிப்படை செயல்பாட்டை புரிந்துகொள்வது + +Playground இலிருந்து Python குறியீட்டை எடுக்கும்போது, இதைப்போன்ற ஒன்றைப் பெறுவீர்கள். முதலில் அதிகமாக தெரிந்தால் கவலைப்பட வேண்டாம் – அதனை ஒருசில துண்டுகளில் இணைந்து எடுத்துச் செல்லலாம்: ```python """Run this model in Python @@ -39,8 +217,8 @@ CO_OP_TRANSLATOR_METADATA: import os from openai import OpenAI -# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. -# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens +# மாதிரியை அங்கீகரிப்பதற்கு, உங்கள் GitHub அமைப்புகளில் தனிப்பட்ட அணுகல் குறியீட்டை (PAT) உருவாக்க வேண்டும். +# உங்கள் PAT குறியீட்டை உருவாக்குவதற்கான வழிமுறைகளை இங்கே பின்பற்றவும்: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens client = OpenAI( base_url="https://models.github.ai/inference", api_key=os.environ["GITHUB_TOKEN"], @@ -66,335 +244,2144 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -இந்தக் குறியீட்டை சுத்தமாக்கி, மீண்டும் பயன்படுத்தக்கூடியதாக மாற்றுவோம்: +**இந்தக் குறியீட்டில் என்ன நடக்கிறது:** +- **நாம் இறக்குமதி செய்கிறோம்** தேவையான கருவிகள்: சூழல் மாறிலிகளை வாசிக்க `os` மற்றும் AI உடன் பேச `OpenAI` +- **நாம் அமைத்துக்கொள்கிறோம்** OpenAI கிளையண்டை நேரடி OpenAIக்கு பதிலாக GitHub AI சேவைகள் நோக்கி +- **நாம் அங்கீகாரம் அளிக்கிறோம்** ஒரு தனிப்பட்ட GitHub டோக்கன் இடமிருந்து (அதனை பற்றி பின்னர்!) +- **நாம் உரையாடலை அமைக்கிறோம்** வெவ்வேறு "பாத்திரங்களுடன்" – இது ஒரு நாடக காட்சியை அமைப்பது போன்றது +- **நாம் AIக்கு** கேட்டறிக்கையை அனுப்புகிறோம் சில முறைமையமைக்கும் அளவைகளுடன் +- **நாம் பெறுகிறோம்** அனைத்து தரவிலிருந்தும் உண்மையான பதில் உரையை + +### செய்தி பாத்திரங்களைப் புரிந்துகொள்வது: AI உரையாடல் கட்டமைப்பு + +AI உரையாடல்கள் தனித்த "பாத்திரங்கள்" பயந்து அமைகின்றன, அவை தனித்த தேவைகளை மேற்கொள்கின்றன: ```python -def call_llm(prompt: str, system_message: str): - response = client.chat.completions.create( - messages=[ - { - "role": "system", - "content": system_message, - }, - { - "role": "user", - "content": prompt, - } - ], - model="openai/gpt-4o-mini", - temperature=1, - max_tokens=4096, - top_p=1 - ) +messages=[ + { + "role": "system", + "content": "You are a helpful assistant who explains things simply." + }, + { + "role": "user", + "content": "What is machine learning?" + } +] +``` + +**இது நாடகம் நடத்துவது போல இருக்கிறது:** +- **அமைப்பு பாத்திரம்**: நடிகருக்கான மேடை வழிகாட்டி – AI எப்படி நடந்து கொள்ள வேண்டும், என்ன தன்மை கொண்டவராக வேண்டும், எப்படி பதிலளிக்க வேண்டும் என்பதைக் கூறுகிறது +- **பயனர் பாத்திரம்**: உங்கள் பயன்பாட்டை பயன்படுத்தும் நபரின் கேள்வி அல்லது செய்தி +- **உதவியாளர் பாத்திரம்**: AI வழங்கும் பதில் (இதை நீங்கள் அனுப்பமாட்டீர்கள், ஆனால் உரையாடல் வரலாற்றில் காணப்படுகிறது) + +**உண்மையான உலகுக் காணொளி**: நீங்கள் ஒரு நண்பரை ஒரு கூட்டத்தில் அறிமுகப்படுத்துகிறீர்கள் என்று நினைத்தால்: +- **அமைப்பு செய்தி**: "இவர் என் நண்பர் சரா, அவர்ப் பெரிய மருத்துவர்; மருத்துவக் கருத்துகளை எளிமையாக விளக்க சிறந்தவர்" +- **பயனர் செய்தி**: " தடுப்பூசிகள் எப்படி வேலை செய்கின்றன என்று விளக்க முடியுமா?" +- **உதவியாளர் பதில்**: சரா அன்புடன் மருத்துவராக பதிலளிக்கிறார்; வழக்கறிஞராய் அல்லது சமையல்காரராக அல்ல + +### AI அளவுகோல்களைப் புரிந்துகொள்வது: பதிலளிக்கும் பாணி சரிசெய்தல் + +AI API அழைப்புகளில் உள்ள எண் அடிப்படையிலான அளவுகோல்கள் மாதிரி பதில்களை எப்படி உருவாக்குமென்பதை கட்டுப்படுத்தும். இந்த அமைப்புகள் வெவ்வேறு பயன்பாடுகளுக்கு AI நடத்தையை மாற்ற அனுமதிக்கின்றன: + +#### வெப்பநிலை (0.0 முதல் 2.0 வரை): படைப்பாற்றல் கட்டுப்பாடு + +**அது என்ன செய்கிறது**: AI பதில்கள் எவ்வளவு படைக்கோள் அல்லது முன்கூட்டியே நினைத்தவையாக இருக்க வேண்டும் என்பதை கட்டுப்படுத்துகிறது. + +**இது ஒரு ஜாஸ் இசைப்பாட்டாளரின் உருக்கமாட்டின் அளவைக் காட்டுவதாக நினைக்கவும்:** +- **வெப்பநிலை = 0.1**: ஒரே அதே மெல்லிசையை ஒவ்வொரு முறையும் வாசித்தல் (மிகவும் கணிப்பாயிருக்கும்) +- **வெப்பநிலை = 0.7**: சிறிது வகைமாற்றிகளுடன் நடுநிலை படைப்பாற்றல் +- **வெப்பநிலை = 1.5**: முழுமையான பரிசோதனை ஜாஸ், எதிர்பாராத திருப்பங்களுடன் (மிகவும் கணிப்பாய் அல்லாதது) + +```python +# மிகவும் முன்னறிவிக்கப்பட்ட பதில்கள் (உண்மையான கேள்விகளுக்காக நல்லவை) +response = client.chat.completions.create( + messages=[{"role": "user", "content": "What is 2+2?"}], + temperature=0.1 # பெரும்பாலும் "4" என்று கூறும் +) + +# படைப்பாற்றலான பதில்கள் (முதல் யோசனைக்காக நல்லவை) +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Write a creative story opening"}], + temperature=1.2 # தனித்துவமான, எதிர்பாராத கதைகள் உருவாக்கும் +) +``` + +#### மிக அதிக அளவு குறியீடுகள் (1 முதல் 4096+): பதில் நீளம் கட்டுப்பாடு + +**அது என்ன செய்கிறது**: AI பதிலின் நீளத்திற்கு வரம்பை அளிக்கிறது. + +**குறியீடுகளை சுட்டிக்காட்டுகையில் அவற்றை சுமார் வார்த்தைகளாகக் கருதுங்கள்** (சுமார் 1 குறியீடு = ஆங்கிலத்தில் 0.75 வார்த்தை): +- **max_tokens=50**: சுருக்கமான மற்றும் இனிமையான (எழுத்துச் செய்தி போல) +- **max_tokens=500**: ஒரு நல்ல பத்தி அல்லது இரண்டு +- **max_tokens=2000**: எடுத்துக்காட்டுகளுடன் விரிவான விளக்கம் + +```python +# குறுகிய, சுருக்கமான பதில்கள் +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Explain JavaScript"}], + max_tokens=100 # சுருக்கமான விளக்கத்தை கட்டாயப்படுத்துகிறது +) + +# விரிவான, முழுமையான பதில்கள் +response = client.chat.completions.create( + messages=[{"role": "user", "content": "Explain JavaScript"}], + max_tokens=1500 # எடுத்துக்காட்டுகளுடன் விரிவான விளக்கங்களை அனுமதிக்கிறது +) +``` + +#### Top_p (0.0 முதல் 1.0): கவனம் அளவுகோல் + +**அது என்ன செய்கிறது**: AI மிகையான சாத்தியமான பதில்களில் எவ்வளவு கவனம் செலுத்துகிறது என்பதை கட்டுப்படுத்துகிறது. + +**AIக்குக் ஒரு பெரும் சொற்பொருட்கள் தொகுப்பு உள்ளது; ஒவ்வொரு வார்த்தைக்கும் வாய்ப்பு மதிப்பீடு உள்ளது என்று கற்பனை செய்யவும்:** +- **top_p=0.1**: மிக அதிக வாய்ப்பு உள்ள 10% வார்த்தைகளே கருதி பதில் (மிகவும் கவனமுடன்) +- **top_p=0.9**: 90% சாத்தியமான வார்த்தைகளைக் கருதுதல் (மேலும் படைப்பாற்றல்) +- **top_p=1.0**: அனைத்தையும் கருதி பதிலளித்தல் (அதிகபட்ச விதிவிலக்குகள்) + +**உதாரணமாக**: நீங்கள் "வானம் பொதுவாக..." என்று கேட்கக்கூடியதாகக் கொண்டால், +- **குறைந்த top_p**: உறுதிப்படுத்தி "நீலம்" என்று சொல்கிறது +- **உயர் top_p**: "நீலம்", "மேகமூடியது", "வெப்பமானது", "மாற்றம்", "அழகு" போன்ற பல பதில்களைக் கூறக் கூடும் + +### அனைத்தையும் ஒன்றாக சேர்த்து: வெவ்வேறு பயன்பாடுகளுக்கான அளவுகோல் சேர்க்கைகள் + +```python +# உண்மையான, தொடர்ச்சியான பதில்களுக்காக (ஆவணக்காரர் போல) +factual_params = { + "temperature": 0.2, + "max_tokens": 300, + "top_p": 0.3 +} + +# படைப்பாற்றல் எழுத்து உதவிக்காக +creative_params = { + "temperature": 1.1, + "max_tokens": 1000, + "top_p": 0.9 +} + +# உரையாடல், உதவியுள்ள பதில்கள் (சமநிலை) +conversational_params = { + "temperature": 0.7, + "max_tokens": 500, + "top_p": 0.8 +} +``` + +```mermaid +quadrantChart + title எഐ அளவுரு மேம்பாட்டு அட்டவணை + x-axis குறைந்த படைப்பாற்றல் --> உயர் படைப்பாற்றல் + y-axis குறுகிய பதில் --> நீண்ட பதில் + + quadrant-1 படைப்பாற்றல் உள்ளடக்கம் + quadrant-2 விரிவான பகுப்பாய்வு + quadrant-3 சீக்கிரம் உண்மைகள் + quadrant-4 உரையாடல் எஐ + + Documentation Bot: [0.2, 0.3] + Customer Service: [0.4, 0.4] + General Assistant: [0.7, 0.5] + Creative Writer: [0.9, 0.9] + Brainstorming Tool: [0.8, 0.8] +``` +**இந்த அளவுகோல்கள் ஏன் முக்கியம் என்பதைக் கண்டறிதல்**: வெவ்வேறு பயன்பாடுகள் வெவ்வேறு வகையான பதில்களை வேண்டுகின்றன. வாடிக்கையாளர் சேவை பாட்டி உறுதிப்படுத்தல் மற்றும் உண்மையான பதில்களை எதிர்பார்க்கும் (குறைந்த வெப்பநிலை) ஆனால் படைப்பாற்றல் எழுத்தாளர் ஒரு நினைவுப்படைவாய்ந்த மற்றும் வித்தியாசமான பாணியை எதிர்பார்க்கும் (அதிக வெப்பநிலை). இந்த அளவுகோல்களைப் புரிந்துகொள்வது AI உடன் உங்கள் மூல காரணிகளையும் பதிலளிக்கும் பாணியையும் கட்டுப்படுத்து. - return response.choices[0].message.content ``` -இந்த `call_llm` செயல்பாட்டுடன், prompt மற்றும் system prompt-ஐ எடுத்துக்கொண்டு, செயல்பாடு முடிவில் முடிவைத் திருப்புகிறது. +**Here's what's happening in this code:** +- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI +- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly +- **We authenticate** using a special GitHub token (more on that in a minute!) +- **We structure** our conversation with different "roles" – think of it like setting the scene for a play +- **We send** our request to the AI with some fine-tuning parameters +- **We extract** the actual response text from all the data that comes back -### AI Assistant-ஐ தனிப்பயனாக்குதல் +> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`. -AI Assistant-ஐ தனிப்பயனாக்க விரும்பினால், system prompt-ஐ இவ்வாறு நிரப்புவதன் மூலம் அதன் நடத்தை எப்படி இருக்க வேண்டும் என்பதை குறிப்பிடலாம்: +### Creating a Reusable AI Function + +Let's refactor this code into a clean, reusable function that we can easily integrate into our web application: ```python -call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") +import asyncio +from openai import AsyncOpenAI + +# Use AsyncOpenAI for better performance +client = AsyncOpenAI( + base_url="https://models.github.ai/inference", + api_key=os.environ["GITHUB_TOKEN"], +) + +async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."): + """ + Sends a prompt to the AI model asynchronously and returns the response. + + Args: + prompt: The user's question or message + system_message: Instructions that define the AI's behavior and personality + + Returns: + str: The AI's response to the prompt + """ + try: + response = await client.chat.completions.create( + messages=[ + { + "role": "system", + "content": system_message, + }, + { + "role": "user", + "content": prompt, + } + ], + model="openai/gpt-4o-mini", + temperature=1, + max_tokens=4096, + top_p=1 + ) + return response.choices[0].message.content + except Exception as e: + logger.error(f"AI API error: {str(e)}") + return "I'm sorry, I'm having trouble processing your request right now." + +# Backward compatibility function for synchronous calls +def call_llm(prompt: str, system_message: str = "You are a helpful assistant."): + """Synchronous wrapper for async AI calls.""" + return asyncio.run(call_llm_async(prompt, system_message)) ``` -## அதை ஒரு Web API மூலம் வெளிப்படுத்துதல் +**இந்த மேம்பட்ட செயல்பாட்டைக் கற்றுக்கொள்வது:** +- **ரெண்டு அளவுருக்களைக் பெறுக**: பயனரின் கேள்வி மற்றும் விருப்ப அமைப்பு செய்தி +- **பொதுவான அமைப்பு செய்தி** இரண்டு வழங்குகிறது உதவியாளரின் பொது நடத்தைக்காக +- **Python வகுப்புருவ வணிகங்களை** அளிக்கிறது, குறியீட்டு ஆவணத்திற்கான மேம்பாடு +- **விருப்பமான செயற்திட்ட விளக்கத்தைக் கொண்டுள்ளதோடு** +- **முற்றிலும் பதில் உள்ளடக்கத்தையே** மட்டுமே மாற்றிக் கொள்கிறது, நமது வலை API ஐ எளிதாக்க +- **மற்றும் ஒரே மாதிரிப் பெயர்பொறிகளை** பயன்படுத்தியுள்ளதன் மூலம் AI நடத்தையானது நிலைத்திருக்கிறது + +### அமைப்பு செய்திகளின் அதிசயம்: AI தன்மையை நிர்ணயம் செய்தல் + +அளவுகோல்கள் AI எப்படி சிந்திக்கும் என்பதை நிர்வகிக்கும்; அமைப்பு செய்திகள் AI யார் என்று சிந்திக்க வைக்கின்றன. உண்மையில் இது AIயுடன் வேலை செய்வதில் மிகவும் கவர்ச்சியான பகுதியாகும் - நீங்கள் AIக்கு முழுமையான தன்மை, அனுபவ நிலை மற்றும் தொடர்பு பாணியை பரிசளிக்கிறீர்கள். + +**நடிகர்களுக்கு வெவ்வேறு வேடங்களில் வேடமிடுவது போல் அமைப்பு செய்திகளைபற்றி எண்ணுங்கள்**: ஒரு பொதுவான உதவியாளரை வைத்திருக்காமல், நீங்கள் வெவ்வேறு சூழல்களுக்கான சிறப்பு நிபுணர்களை உருவாக்கலாம். பொறுமையான ஆசிரியர் விரும்புகிறீர்களா? படைப்பாற்றல் மூளைstorm நண்பர்? கடுமையான வணிக ஆலோசகர்? அமைப்பு செய்தியை மட்டும் மாற்றுங்கள்! + +#### அமைப்பு செய்திகள் இவ்வளவு சக்திமிக்கதென்பது ஏன் + +AI மாதிரிகள் பல எண்ணற்ற உரையாடல்களில் வேடங்களையும் அனுபவ நிலைகளையும் கற்றுக்கொண்டுள்ளன. நீங்கள் AIக்கு ஒரு குறிப்பிட்ட வேடம் அளிப்பது போன்றது – அதற்கான அனைத்து கற்கையான முறைமைகள் இயங்க ஆரம்பிக்கும். + +**இது AIக்கு மெத்தட் நடிப்பினைப்போன்றது**: ஒரு நடிகரிடம் "நீ ஒரு அறிவாளி முதிய பேராசிரியர்" என்று சொன்னால், அவர் உடல்நிலை, சொற்பொழிவு மற்றும் நடத்தை தானாக மாற்றிக் கொள்கிறார்; AI மொழித் தொடரப்பாடுகளோடு மிகவும் அதேபோல் செய்கிறது. -சிறந்தது, நாம் AI பகுதியை முடித்துவிட்டோம், அதை Web API-யுடன் ஒருங்கிணைப்பது எப்படி என்பதை பார்ப்போம். Web API-க்கு, Flask-ஐ பயன்படுத்துகிறோம், ஆனால் எந்தவொரு வலை framework-ஐ பயன்படுத்தலாம். இதற்கான குறியீட்டை பார்ப்போம்: +#### செயல்படக்கூடிய அமைப்பு செய்திகளை உருவாக்குதல்: கலை மற்றும் அறிவியல் -### Python பயன்படுத்துதல் +**சிறந்த அமைப்பு செய்தியின் உடன்படிக்கை**: +1. **பாத்திரம் / அடையாளம்**: AI யார்? +2. **பண்புகள்**: என்ன அறிவு வைத்தவர்? +3. **தொடர்பு பாணி**: எப்படி பேசுகின்றார்? +4. **குறிப்பிட்ட வழிகாட்டிகள்**: எதைக் கவனிக்க வேண்டும்? + +```python +# ❌ குழப்பமான அமைப்பு கூட்டு +"You are helpful." + +# ✅ விரிவான, விளைவுடைய அமைப்பு கூட்டு +"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics." +``` + +#### சூழல் கொண்ட அமைப்பு செய்தி உதாரணங்கள் + +பல்வேறு அமைப்பு செய்திகளால் எவ்வாறு வெவ்வேறு AI தன்மைகள் உருவாக்கப்படுகின்றன என்பதைப் பார்ப்போம்: + +```python +# உதாரணம் 1: இருபிடியும் ஆசிரியர் +teacher_prompt = """ +You are an experienced programming instructor who has taught thousands of students. +You break down complex concepts into simple steps, use analogies from everyday life, +and always check if the student understands before moving on. You're encouraging +and never make students feel bad for not knowing something. +""" + +# உதாரணம் 2: सिर्जனைக் கூட்டாளி +creative_prompt = """ +You are a creative writing partner who loves brainstorming wild ideas. You're +enthusiastic, imaginative, and always build on the user's ideas rather than +replacing them. You ask thought-provoking questions to spark creativity and +offer unexpected perspectives that make stories more interesting. +""" + +# உதாரணம் 3: వ్యూహాత్మక వ్యాపார સલાહકાર +business_prompt = """ +You are a strategic business consultant with an MBA and 20 years of experience +helping startups scale. You think in frameworks, provide structured advice, +and always consider both short-term tactics and long-term strategy. You ask +probing questions to understand the full business context before giving advice. +""" +``` + +#### அமைப்பு செய்தியைக் காண்பதில் நேரடி சோதனை + +அதே கேள்வியை வெவ்வேறு அமைப்பு செய்திகளோடு சோதித்து அதிகமான வேறுபாடுகளை காண்போம்: + +**கேள்வி**: "என் வலை செயலியில் பயனர் அங்கீகாரத்தை எப்படி கையாள்வது?" + +```python +# ஆசிரியரின் முன்னோட்டி: +teacher_response = call_llm( + "How do I handle user authentication in my web app?", + teacher_prompt +) +# பொது பதில்: "சிறந்த கேள்வி! அத்துணை உறுதிப்பாட்டைப் படிகள் அடிப்படையில் பிரிப்போம். +# இதைப் nightclub பாதுகாவலர் அடையாள அட்டை சோதிப்பதுபோல எண்ணுங்கள்..." + +# வணிக முன்னோட்டத்துடன்: +business_response = call_llm( + "How do I handle user authentication in my web app?", + business_prompt +) +# பொது பதில்: "துரித நோக்கில், அத்துணை உறுதிப்பாடு பயனர் நம்பகத்தன்மை மற்றும் ஒழுங்கு பதிலளிப்புக்கு மிகவும் முக்கியமானது. +# பாதுகாப்பு, பயனர் அனுபவம் மற்றும் பரிமாணத்திற்கு உகந்த ஒரு கட்டமைப்பை விளக்கவுள்ளேன்..." +# பயனர் அனுபவம் மற்றும் பரிமாணத்தை கருத்தில் கொண்டு..." +``` + +#### மேம்பட்ட அமைப்பு செய்தி நுட்பங்கள் + +**1. சூழல் அமைத்தல்**: AIக்கு பின்னணி தகவலைத் தருக +```python +system_prompt = """ +You are helping a junior developer who just started their first job at a startup. +They know basic HTML/CSS/JavaScript but are new to backend development and databases. +Be encouraging and explain things step-by-step without being condescending. +""" +``` + + +**2. Output Formatting**: கேட்பவருக்கான பதில்களின் அமைப்பை AI-க்கு சொல்லவும் +```python +system_prompt = """ +You are a technical mentor. Always structure your responses as: +1. Quick Answer (1-2 sentences) +2. Detailed Explanation +3. Code Example +4. Common Pitfalls to Avoid +5. Next Steps for Learning +""" +``` + +**3. Constraint Setting**: AI செய்யக் கூடாது என்பவற்றை வரையறுக்கவும் +```python +system_prompt = """ +You are a coding tutor focused on teaching best practices. Never write complete +solutions for the user - instead, guide them with hints and questions so they +learn by doing. Always explain the 'why' behind coding decisions. +""" +``` + +#### உங்கள் உரையாடல் உதவியாளர் காரணமாக இது ஏன் முக்கியம் + +கணினி செயலாற்றல் தொடக்கங்கள் உங்கள் சிறப்பு AI உதவியாளர்களை உருவாக்குவதற்கு அதிஉயர்ந்த அதிகாரம் தருகிறது: +- **வாடிக்கையாளர் சேவை பாட்டி**: உதவிகரமான, பொறுமையான, கொள்கை அறிவாளர் +- **கல்வி பயிற்றுனர்**: ஊக்குவிக்கிற, படி படியான, புரிதலைச் சரிபார்க்கும் +- **சமர்பணியாளர்**: கற்பனைமிக்க, எண்ணங்களை மேம்படுத்தும், "என்னவாகிறது?" என்று கேட்கும் +- **தொழில்நுட்ப நிபுணர்**: துல்லியமான, விரிவான, பாதுகாப்பு குறித்த கவனமான + +**முக்கிய அறிமுகம்**: நீங்கள் வெறும் AI API-யை அழைக்கவில்லை – நீங்கள் உங்கள் குறிப்பிட்ட பயன்பாட்டுக்கு ஏற்ற தனிப்பயன் AI தன்மையை உருவாக்குகிறீர்கள். இதுவே நவீன AI பயன்பாடுகளை பொதுவானவையாக அல்லாமல் தனித்துவமான மற்றும் பயனுள்ளதாக உணர வைக்கிறது. + +### 🎯 கல்வித் தகவல்: AI தன்மையாக்குதல் நிரல்பாகம் + +**நின்று சிந்தியுங்கள்**: நீங்கள் ஏற்கனவே முறைமை தொடக்கங்களின் மூலம் AI தன்மைகளை நிரல் எழுத கற்றுக்கொண்டீர்கள். இது நவீன AI பயன்பாட்டு அபிவிருத்தியில் அடிப்படையான திறனாகும். + +**விரைவான சுய மதிப்பீடு**: +- முறைமை தொடக்கங்கள் சாதாரண பயனர் செய்திகளிடமிருந்து எவ்வாறு வேறுபடுகின்றன என்று நீங்கள் விளக்கமளிக்க முடியுமா? +- வெப்பநிலை மற்றும் top_p அளவுருக்கள் இடையேயான வேறுபாடு என்ன? +- குறிப்பிட்ட பயன்பாட்டுக்கு (குறியீடு பயிற்றுநர் போன்றதற்கு) முறைமை தொடக்கத்தை எப்படி உருவாக்குவீர்கள்? + +**உண்மையான உலக இணைப்பு**: நீங்கள் கற்ற முறைமை தொடக்கக் கலைகளும் AI-ன் முக்கிய பயன்பாடுகளில் பயன்படுத்தப்படுகின்றன - GitHub Copilot-ன் குறியீட்டு உதவியிலிருந்து ChatGPT-ன் உரையாடல் இடைமுகத்திற்கும். பெரும் தொழில்நுட்ப நிறுவனங்களில் AI தயாரிப்பு அணிகள் பயன்படுத்தும் அதே மாதிரிகளை நீங்கள் கற்றுக் கொண்டுள்ளீர்கள். + +**பயிற்சி கேள்வி**: விவசாயிகள் மற்றும் நிபுணர்கள் போன்ற வெவ்வேறு பயனர் வகைகளுக்கு வெவ்வேறு AI தன்மைகளை எப்படி வடிவமைப்பீர்கள்? ஒரே அடிப்படை AI மாதிரியுடன் வெவ்வேறு மக்கள் குழுக்களை என்ன வகையில் தொலைத்தொடர்பு கலை (prompt engineering) மூலம் சேவை செய்ய முடியும் என்பதை பரிசீலியுங்கள். + +## FastAPI உடன் வலை API கட்டமைக்கல்: உங்கள் அதிவேக AI தொடர்பு மையம் + +இப்போது உங்கள் முன் முனைப்பு மற்றும் AI சேவைகளை இணைக்கும் பின்புறத்தைக் கட்டமைப்போம். நாங்கள் FastAPI-யைப் பயன்படுத்துவோம், இது நவீன Python கட்டமைப்பு ஆகும் மற்றும் AI பயன்பாடுகளுக்கான API-களை சிறப்பாக கட்டமைக்கிறது. + +FastAPI இந்த வகைத் திட்டத்திற்கு பல நன்மைகளை வழங்குகிறது: ஒரே நேரத்தில் கோரிக்கைகளை கையாள async ஆதரவு, தானியங்கி API ஆவண உமிழ்வு மற்றும் சிறந்த செயல்திறன். உங்கள் FastAPI சர்வர் முன் முனை நோக்கி வரும் கோரிக்கைகளைப் பெற்று, AI சேவைகளுடன் தொடர்பு கொண்டு, வடிவமைக்கப்பட்ட பதில்களை வழங்கும் இடைக்கால இடமாக செயல்படுகிறது. + +### AI பயன்பாடுகளுக்கான FastAPI-ஐ ஏன் தேர்வு செய்ய வேண்டும்? + +நீங்கள் யோசிக்கலாம்: "நான் AI-யை நேரடியாக என் முன் முனை JavaScript-இல் அழைக்க முடியாது?" அல்லது "Flask, Django-வுக்கு பதிலாக FastAPI ஏன்?" சிறந்த கேள்விகள்! + +**இங்கே FastAPI நமக்கு ஏற்ற காரணங்கள்:** +- **இயல்புநிலை async**: ஒரே நேரத்தில் பல AI கோரிக்கைகளை நிறுத்தாமல் கையாளும் திறன் +- **தானியங்கி ஆவணங்கள்**: `/docs`-ஐப் பார்வையிடுக மற்றும் அற்புதமான, இடையிடை API ஆவணங்களை இலவசமாகப் பெறுக +- **உள்ளமைவு சரிபார்ப்பு**: பிழைகளை முன்கூட்டியே பிடிக்கும் +- **விசித்திரமாக வேகம் மிகுந்தது**: Python கட்டமைப்புகளுக்குள் மிக வேகமான ஒன்று +- **நவீன Python**: Python இன் அண்மையில் வந்த சிறந்த அம்சங்களை பயன்படுத்துகிறது + +**மற்றும் நமக்கு பின்புறம் தேவைப்படுவதற்கான காரணம்:** + +**பாதுகாப்பு**: உங்கள் AI API விசை கடவுச்சொல் போன்றது – நீங்கள் அதை முன் முனை JavaScript-இல் வைத்தால், உங்கள் வலைத்தள மூலக் குறியீட்டை பார்ப்பவர்கள் அதை திருடி உங்கள் AI கிரெடிட்ஸைப் பயன்படுத்தலாம். பின்புறம் நுண்ணறிவு சான்றுகளை பாதுகாப்பாக வைத்திருக்கிறது. + +**கட்டுப்பாடு மற்றும் இரேட்டிங்**: பின்புறம் பயனர்கள் எவ்வளவு முறை கோரிக்கை செய்யலாம் என்பதை நீங்கள் கட்டுப்படுத்த, பயனர் அங்கீகாரம் செய்ய மற்றும் பயன்பாட்டை கண்காணிக்க லாகிங் சேர்க்க உதவுகிறது. + +**தரவு செயலாக்கம்**: உரையாடலை சேமிக்க, பொருந்தாத உள்ளடக்கத்தை வடிகட்ட அல்லது பல AI சேவைகளைக் கொக்கியூன்றக ஆகியவற்றை செய்ய பின்புறம் இவை நடைபெறும். + +**இந்த அமைப்பு ஒரு கிளையன்ட்-செர்வர் மாதிரியைப் போன்றது:** +- **முன் முனைப்பு**: பயனர் இடைமுக அடுக்கு +- **பின்புற API**: கோரிக்கை கையாளும் மற்றும் வழித்தட அமைப்பு அடுக்கு +- **AI சேவை**: வெளிப்புற கணினி மற்றும் பதில் உருவாக்கம் +- **சுற்றுப்புற மாறிலிகள்**: பாதுகாப்பான வரையறைகளும் சான்றுகளும் + +### கோரிக்கை-பதில் ஓட்டத்தைப் புரிந்து கொள்வது + +பயனர் ஒரு செய்தி அனுப்பும்போது என்ன நடக்கிறது என்பதை பின்தொடர்வோம்: + +```mermaid +sequenceDiagram + participant User as 👤 பயனர் + participant Frontend as 🌐 முன்னணி + participant API as 🔧 FastAPI சேவையகம் + participant AI as 🤖 எஐ சேவை + + User->>Frontend: "வணக்கம் எஐ!" என்று தட்டச்சு செய்கிறார் + Frontend->>API: POST /hello {"message": "வணக்கம் எஐ!"} + Note over API: கோரிக்கையை சரிபார்க்கிறது
கணினி உத்தரவைக் சேர்க்கிறது + API->>AI: வடிவமைக்கப்பட்ட கோரிக்கையை அனுப்புகிறது + AI->>API: எஐ பதிலை அளிக்கிறது + Note over API: பதிலை செயலாக்குகிறது
சந்திப்பை பதிவு செய்கிறது + API->>Frontend: {"response": "வணக்கம்! எப்படி உதவலாம்?"} + Frontend->>User: எஐ செய்தியை காட்சி படுத்துகிறது +``` +**ஒவ்வொரு படியும் புரிந்து கொள்வது:** +1. **பயனர் தொடர்பு**: ஒருவர் உரையாடல் இடைமுகத்தில் உரை தட்டச்சு செய்கிறது +2. **முன் முனை கையாளல்**: JavaScript உள்ளீட்டை JSON வடிவில் மாற்றுகிறது +3. **API சரிபார்ப்பு**: FastAPI Pydantic மாதிரிகள் மூலம் கோரிக்கையை தானாக சரிபார்க்கிறது +4. **AI ஒருங்கிணைப்பு**: பின்புறம் சூழல் (முறைமை தொடக்கம்) சேர்க்கப்பட்டு AI சேவையை அழைக்கிறது +5. **பதில் கையாளல்**: API AI பதிலை பெறுகிறது மற்றும் தேவையானால் அதை மாற்றக்கூடியது +6. **முன் முனை காட்சிப்படுத்தல்**: JavaScript உரையாடலில் பதிலை காட்டுகிறது + +### API கட்டமைப்பைப் புரிந்து கொள்வது + +```mermaid +sequenceDiagram + participant Frontend + participant FastAPI + participant AI Function + participant GitHub Models + + Frontend->>FastAPI: POST /hello {"message": "வணக்கம் AI!"} + FastAPI->>AI Function: call_llm(message, system_prompt) + AI Function->>GitHub Models: API request + GitHub Models->>AI Function: AI response + AI Function->>FastAPI: response text + FastAPI->>Frontend: {"response": "வணக்கம்! நான் எப்படி உதவ வாய்ப்பு?"} +``` +```mermaid +flowchart TD + A[பயனர் உள்ளீடு] --> B[முன்னணி சோதனை] + B --> C[HTTP POST கோரிக்கை] + C --> D[FastAPI வழியமைப்பர்] + D --> E[Pydantic சோதனை] + E --> F[AI செயல்பாடு அழைப்பு] + F --> G[GitHub மாதிரிகள் API] + G --> H[பதில் செயலாக்கம்] + H --> I[JSON பதில்] + I --> J[முன்னணி புதுப்பிப்பு] + + subgraph "பாதுகாப்பு அடுக்கு" + K[CORS மத்திகை] + L[பருவ நிலை மாறிகள்] + M[பிழை நிர்வாகம்] + end + + D --> K + F --> L + H --> M +``` +### FastAPI பயன்பாட்டை உருவாக்குதல் + +API-யை படி படியாக கட்டிக்கொள். கீழ்காணும் FastAPI குறியீட்டுடன் `api.py` என்ற கோப்பை உருவாக்கவும்: ```python # api.py -from flask import Flask, request, jsonify +from fastapi import FastAPI, HTTPException +from fastapi.middleware.cors import CORSMiddleware +from pydantic import BaseModel from llm import call_llm -from flask_cors import CORS +import logging + +# பதிவேற்றத்தை அமைக்கவும் +logging.basicConfig(level=logging.INFO) +logger = logging.getLogger(__name__) + +# FastAPI பயன்பாட்டை உருவாக்கவும் +app = FastAPI( + title="AI Chat API", + description="A high-performance API for AI-powered chat applications", + version="1.0.0" +) + +# CORS ஐ அமைக்கவும் +app.add_middleware( + CORSMiddleware, + allow_origins=["*"], # தயாரிப்பிற்காக சரியாக அமைக்கவும் + allow_credentials=True, + allow_methods=["*"], + allow_headers=["*"], +) + +# கோரிக்கை/பதில் செல்லுபடியானதற்கான Pydantic மாதிரிகள் +class ChatMessage(BaseModel): + message: str + +class ChatResponse(BaseModel): + response: str + +@app.get("/") +async def root(): + """Root endpoint providing API information.""" + return { + "message": "Welcome to the AI Chat API", + "docs": "/docs", + "health": "/health" + } + +@app.get("/health") +async def health_check(): + """Health check endpoint.""" + return {"status": "healthy", "service": "ai-chat-api"} + +@app.post("/hello", response_model=ChatResponse) +async def chat_endpoint(chat_message: ChatMessage): + """Main chat endpoint that processes messages and returns AI responses.""" + try: + # செய்திகள் எடுக்கும் மற்றும் செல்லுபடியானவை + message = chat_message.message.strip() + if not message: + raise HTTPException(status_code=400, detail="Message cannot be empty") + + logger.info(f"Processing message: {message[:50]}...") + + # AI சேவையை அழைக்கவும் (குறிப்பு: call_llm சிறந்த செயல்திறற்காக async ஆக இருக்க வேண்டும்) + ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.") + + logger.info("AI response generated successfully") + return ChatResponse(response=ai_response) + + except HTTPException: + raise + except Exception as e: + logger.error(f"Error processing chat message: {str(e)}") + raise HTTPException(status_code=500, detail="Internal server error") + +if __name__ == "__main__": + import uvicorn + uvicorn.run(app, host="0.0.0.0", port=5000, reload=True) +``` + +**FastAPI நடைமுறையைப் புரிந்து கொள்வது:** +- **FastAPI மற்றும் Pydantic** இணைப்பு மூலம் நவீன வலை கட்டமைப்பின் செயல்பாடுகளைக் கொண்டு வருதல் மற்றும் தரவு சரிபார்ப்பு +- **தானியங்கி API ஆவணங்களை உருவாக்குதல்** (`/docs`-இல் கிடைக்கும் சர்வர் இயங்கும் போது) +- **CORS மிடில்வேரை இயக்குதல்** வேறு தோற்றங்கள் கொண்ட முன் முனை கோரிக்கைகளை அனுமதிக்க +- **கோரிக்கை/பதில் சரிபார்ப்பு மற்றும் ஆவணங்களுக்கான Pydantic மாதிரிகள் வரையறுத்தல்** +- **சிறந்த செயல்திறனை நோக்கிய async முடிச்சுகளை பயன்படுத்துதல்** +- **HTTP நிலை குறியீடுகள் மற்றும் பிழை கையாளுதல் HTTPException மூலம் செயல்படுத்து** +- **கண்காணிப்பு மற்றும் பிழைத்திருத்தத்திற்கு கட்டமைக்கப்பட்ட பதிவு பதிவேற்றம்** +- **சேவை நிலையை கண்காணிக்க ஆரோக்கியச் சோதனை முடிச்சுக்கள்** + +**பாரம்பரிய கட்டமைப்புகளுக்கு FastAPI-யின் முக்கிய நன்மைகள்:** +- **தானியங்கி சரிபார்ப்பு**: Pydantic மாதிரிகள் தரவு அச்சுற்றுப்பமாக செயலாக்கத்திற்கு முன் உறுதிப்படுத்தும் +- **இடையிடை ஆவணங்கள்**: `/docs`-இல் தானாக உருவான, சோதிக்கக்கூடிய API ஆவணங்களைப் பார்க்கவும் +- **வகை பாதுகாப்பு**: Python வகை குறிப்புகள் நேரடி பிழைகளைக் குறைத்து குறியீட்டு தரத்தை மேம்படுத்தும் +- **Async ஆதரவு**: ஒரே நேரத்தில் பல AI கோரிக்கைகளை தடையின்றி கையாளும் +- **செயல்திறன்**: நேரடி பயன்பாடுகளுக்காக கோரிக்கைகள் வேகமாக செயலாக்கப்படுகின்றன + +### CORS: வலை பாதுகாப்பு காவலர் + +CORS (Cross-Origin Resource Sharing) என்பது ஒரு கட்டிடத்தில் பார்வையாளர்கள் நுழைய அனுமதிக்கப்படுகிறார்கள் என்று பார்த்துக்கொள்ளும் பாதுகாப்பு காவலரைப் போன்றது. இது உங்கள் பயன்பாட்டை எப்படி பாதிக்கிறது என்பதையும் புரிந்து கொள்வோம். + +#### CORS என்ன மற்றும் அது ஏன் உள்ளது? + +**சிக்கல்**: உங்கள் வங்கியின் வலைத்தளத்திற்கு எந்த ஒரு வலைத்தளமும் உங்கள் அனுமதியின்றி உங்கள் சார்பாக கோரிக்கைகள் செய்யும் போது அது ஒரு பாதுகாப்புக் குறைபாடாக அதிகரிக்கும்! உலாவிகள் இதைக் காக்கும் விதமாக "Same-Origin Policy" ஐ இயல்புநிலையாக பயன்படுத்துகின்றன. + +**Same-Origin Policy**: உலாவிகள் ஒரு வலைப்பக்கத்தை அதே டொமைன், போர்ட் மற்றும் நெறிமுறை கொண்ட வலைத்தளத்திலிருந்து மட்டுமே கோரிக்கைகள் செய்ய அனுமதிக்கின்றன. + +**உண்மை உலக உவமை**: இது குடியிருப்பு கட்டிட பாதுகாப்பைப் போன்றது – அங்கு ஒரே குடியிருப்பவர்கள் (அதே தோற்றம்) மட்டுமே கட்டிடம் செல்ல முடியும். நண்பர் (வேறு தோற்றம்) வர வேண்டும் என்றால், பாதுகாப்பு காவலர் அனுமதிக்க வேண்டும். + +#### உங்கள் அபிவிருத்தி சூழலில் CORS + +அபிவிருத்தி நேரத்தில் உங்கள் முன் முனை மற்றும் பின்புறம் வெவ்வேறு போர்ட்களில் இயங்குகின்றன: +- முன் முனை: `http://localhost:3000` (அல்லது நேரடியாக HTML திறக்கும் போது file://) +- பின்புறம்: `http://localhost:5000` + +இவை ஒரே கணினியில் இருந்தாலும் "வேறுபட்ட தோற்றங்கள்" என கருதப்படுகின்றன! + +```python +from fastapi.middleware.cors import CORSMiddleware + +app = FastAPI(__name__) +CORS(app) # இது உலாவிகளுக்கு சொல்லுகிறது: "வேறு மூலங்களும் இந்த APIக்கு கோரிக்கைகள் செய்யலாம்" +``` + +**CORS அமைப்பு நடைமுறையில் என்ன செய்கிறது:** +- **API பதில்களில் சிறப்பு HTTP தலைப்புகளைச் சேர்க்கிறது, இது உலாவிகளுக்கு "இந்த வெவ்வேறு தோற்ற கோரிக்கை அனுமதிக்கப்படுகிறது" என்பதை தெரிவிக்கிறது** +- **"Preflight" கோரிக்கைகளை கையாள்கிறது (உலாவிகள் சில நேரங்களில் உண்மையான கோரிக்கைக்கு முன் அனுமதியை பரிசோதிக்கிறது)** +- **உங்கள் உலாவியில் "CORS கொள்கையின் தரவால் தடைக்கப்பட்டது" என்ற பிழையை தடுக்கும்** + +#### CORS பாதுகாப்பு: அபிவிருத்தி மற்றும் தயாரிப்பு + +```python +# 🚨 மேம்பாடு: அனைத்து மூலங்களையும் அனுமதிக்கிறது (சௌகரியமாக இருந்தாலும் பாதுகாப்பற்றது) +CORS(app) + +# ✅ உற்பத்தி: உங்கள் குறிப்பிட்ட முன்காட்சி களஞ்சியத்தை மட்டும் அனுமதிக்கவும் +CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"]) + +# 🔒 முன்னேற்றம்: பல்வேறு சூழல்களுக்கு வேறு மூலங்கள் +if app.debug: # மேம்பாட்டு முறையில் + CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"]) +else: # உற்பத்தி முறையில் + CORS(app, origins=["https://yourdomain.com"]) +``` + +**ஏன் இது முக்கியம்**: அபிவிருத்தியில், `CORS(app)` உங்கள் முன் கதவை பூட்டாமல் விட்டு வெளியே விட்டது போல – வசதியானது ஆனால் பாதுகாப்பற்றது. தயாரிப்பில் API-யை எந்த வலைத்தளங்கள் அணுகக்கூடியவை என்று நீங்கள் நிச்சயமாக குறிப்பிட விரும்புகிறீர்கள். + +#### பொதுவான CORS நிலைமைகள் மற்றும் தீர்வுகள் + +| நிலைமை | சிக்கல் | தீர்வு | +|----------|---------|----------| +| **உள்ளூர் அபிவிருத்தி** | முன் முனை பின்புறத்தை அணுக முடியாது | FastAPI-யில் CORSMiddleware சேர்க்கவும் | +| **GitHub Pages + Heroku** | பிரயோஜனப்படுத்திய முன் முனை API-யை அணுக முடியாது | உங்கள் GitHub Pages URL ஐ CORS தோற்றங்களில் சேர்க்கவும் | +| **சுயமான டொமைன்** | தயாரிப்பில் CORS பிழைகள் | உங்கள் டொமைனை பொருந்தும் வகையில் CORS தோற்றங்களை புதுப்பிக்கவும் | +| **மொபைல் செயலி** | செயலி வலை API-யை அணுக வீற்றிருக்காது | உங்கள் செயலி டொமைன் சேர்க்கவும் அல்லது கவனமாக `*` பயன்படுத்தவும் | + +**திறமையான ஆலோசனை**: உலாவியின் Developer Tools இல் நிழல் தாவலில் CORS தலைப்புகளைப் பார்க்கலாம். பதிலில் `Access-Control-Allow-Origin` போன்ற தலைப்புகளைத் தேடுங்கள். + +### பிழைக் கையாளல் மற்றும் சரிபார்ப்பு + +எப்போதும் நமது API உரிய பிழை கையாளலைச் சேர்த்துள்ளது கவனிக்கவும்: + +```python +# நாங்கள் ஒரு செய்தியை பெற்றிருக்கிறோம் என்பதை சரிபார்க்கவும் +if not message: + return jsonify({"error": "Message field is required"}), 400 +``` + +**முக்கிய சரிபார்ப்பு நெறிமுறைகள்:** +- **கோரிக்கைகள் செயலாக்கத்திற்கு முன் தேவையான புலங்களை சரிபார்க்கிறது** +- **JSON வடிவில் அர்த்தமுள்ள பிழை செய்திகள் வழங்குகிறது** +- **சரி HTTP நிலை குறியீடுகள் (கெட்ட கோரிக்கைக்கு 400) பயன்படுத்துகிறது** +- **முன் முனை அபிவிருத்தாளர்களுக்கு தெளிவான மறுமொழியை வழங்குகிறது** + +## உங்கள் பின்புறத்தை அமைத்து இயக்குதல் + +நாம் AI ஒருங்கிணைப்பு மற்றும் FastAPI சர்வரை தயார் செய்துள்ளோம், இப்போது அனைத்தையும் இயக்கு. அமைப்பில் Python சார்ந்த சார்பு தொகுதிகள் நிறுவுதல், சுற்றுப்புற மாறிலிகள் வடிவமைத்தல் மற்றும் அபிவிருத்தி சர்வர் துவக்குதல் உள்ளன. + +### Python சுற்றுச்சூழல் அமைப்பு + +Python அபிவிருத்தி சூழலை அமைப்போம். மெய்ப்பிப்பகங்கள் (virtual environments) Manhattan திட்டத்தின் பிரிக்கப்பட்ட அணுகுமுறையைப் போன்றவை – ஒவ்வொரு திட்டத்துக்கும் தனித்தனியான சூழல், கருவிகள் மற்றும் சார்புகள்; இதனால் திட்டங்களுக்கு இடையேயும் முரண்பாடுகள் தவிர்க்கப்படுகின்றன. + +```bash +# உங்கள் பேக்எண்ட் அடைவை நோக்கிச் செல்க +cd backend + +# ஒரு மெய்யமைப்பை உருவாக்குக (உங்கள் திட்டத்திற்கான சுத்தமான அறையை உருவாக்குவது போன்று) +python -m venv venv + +# அதனை செயல்படுத்துக (லினக்ஸ்/மேக்) +source ./venv/bin/activate + +# விண்டோஸில், இதைப் பயன்படுத்துக: +# venv\Scripts\activate + +# நல்ல பொருட்களை நிறுவுக +pip install openai fastapi uvicorn python-dotenv +``` + +**நாம் இப்போது செய்ததை** +- **தனித்த Python வளையை உருவாக்கினோம், இதில் வேறு எந்த சூழலையும் பாதிக்காமல் தொகுதிகள் நிறுவலாம்** +- **தெர்மினலில் இந்த ஆனநிலை இயங்க எச்சரிக்கப்பட்டது** +- **அத்தியாவசியங்களை நிறுவினோம்: OpenAI AI க்கு, FastAPI வலை APIக்கு, Uvicorn இயக்கவும், python-dotenv பாதுகாப்பான இரகசிய மேலாண்மைக்கு** + +**முக்கிய சார்புகளை விளக்குதல்:** +- **FastAPI**: நவீன, வேகமான வலை கட்டமைப்பு மற்றும் தானியங்கி API ஆவணம் உடன் +- **Uvicorn**: FastAPI பயன்பாடுகளை இயக்கும் மிக வேகமான ASGI சர்வர் +- **OpenAI**: GitHub மாடல்கள் மற்றும் OpenAI API ஒருங்கிணைப்புக்கான அதிகாரபூர்வ நூலகம் +- **python-dotenv**: .env கோப்புகளில் இருந்து சுற்றுப்புற மாறிலிகளை பாதுகாப்புடன் ஏற்றும் + +### சுற்றுப்புற அமைப்பு: இரகசியங்களை பாதுகாக்கும் + +நமது API-யைத் தொடங்குவதற்கு முன், வலை அபிவிருத்தியில் மிகவும் முக்கியமான பாடம் ஒன்று பற்றி பேச வேண்டும்: உங்கள் இரகசியங்களை உண்மையிலேயே எப்படி மறைக்க வேண்டும். சுற்றுப்புற மாறிலிகள் என்பது பாதுகாப்பான வால்ட் போன்றது, அதில் உங்கள் பயன்பாடு மட்டுமே அணுக முடியும். + +#### சுற்றுப்புற மாறிலிகள் என்றால் என்ன? + +**சுற்றுப்புற மாறிலிகளை பாதுகாப்பான வைர அஞ்சலகப் பெட்டியைப் போல நினைக்கவும்** – அங்கே உங்கள் மதிப்பு பொருட்களை வைக்கிறீர்கள், மட்டும் நீங்கள் (மற்றும் உங்கள் செயலி) அதைப் பெற கீ-வை வைத்திருக்கிறீர்கள். நேரடியாக குறியீட்டில் இரகசிய தகவலை எழுதி வைக்காமல் (எங்கு யாரும் பார்க்கக்கூடியது), அதை சுற்றுப்புறத்தில் பாதுகாப்பாக வைக்கிறீர்கள். + +**வேறுபாடு இவ்வாறு உள்ளது:** +- **தவறான வழி**: உங்கள் கடவுச்சொல்லை ஸ்டிக்கி நோட்டில் எழுதி திரையில் ஒட்டுவது +- **சரி வழி**: உங்கள் கடவுச்சொல்லை பாதுகாப்பான கடவுச்சொல் மேலாளரில் வைப்பது + +#### சுற்றுப்புற மாறிலிகள் ஏன் முக்கியம் + +```python +# 🚨 இதை எப்போதும் செய்ய வேண்டாம் - API சாவி அனைவருக்கும் தெரியப்போகும் +client = OpenAI( + api_key="ghp_1234567890abcdef...", # இது எவரும் திருடக்கூடும்! + base_url="https://models.github.ai/inference" +) + +# ✅ இதை செய்யுங்கள் - API சாவி பாதுகாப்பாக சேமிக்கப்பட வேண்டும் +client = OpenAI( + api_key=os.environ["GITHUB_TOKEN"], # உங்களுடைய செயலி மட்டுமே இதை அணுக முடியும் + base_url="https://models.github.ai/inference" +) +``` + +**கடவுச்சொல்லை நேரடியாக குறியீட்டில் இடும்போது என்ன நடக்கும்:** +1. **நுண்ணறிவு கட்டுப்பாடு வெளிப்பாடுகள்**: உங்கள் Git-அணுகலில் அனைவரும் உங்கள் API விசையைப் பார்க்க முடியும் +2. **பொது ரெப்போசிடரிகள்**: GitHub-க்கு அனுப்பினால், உங்கள் விசை இணையத்தில் அனைவரும் காணலாம் +3. **அணி பகிர்வு**: ஒரே திட்டத்தில் பணியாற்றும் மற்றவரும் உங்கள் தனிப்பட்ட API விசையைப் பெறுவர் +4. **பாதுகாப்புக் களவுகள்**: API விசை திருடப்பட்டால், அவர்கள் உங்கள் AI கிரெடிட்ஸைப் பயன்படுத்துகிறார்கள் + +#### உங்கள் சுற்றுப்புற கோப்பை அமைத்தல் + +`.env` என்ற கோப்பை உங்கள் பின்புறமாக உள்ள கோப்புறையில் உருவாக்குங்கள். இக்கோப்பு உங்கள் இரகசியங்களை உள்ளே வைத்திருக்கும்: + +```bash +# .env கோப்பு - இதை Git இற்கு யாரும் சேர்க்க கூடாது +GITHUB_TOKEN=your_github_personal_access_token_here +FASTAPI_DEBUG=True +ENVIRONMENT=development +``` + +**.env கோப்பைப் புரிந்து கொள்வது:** +- **ஒவ்வொரு வரியிலும் ஒரு இரகசியம்**, `KEY=value` வடிவில் +- **சமமாக்கல் சின்ன்வு சுற்றிலும் இடைவெளி கூடாது** +- **மதிப்புகளுக்கு சாவடி ("") தேவையில்லை (முழுமையாக பொதுவாக)** +- **கருத்துக்கள்** தொடக்கம் வரி `#` கொண்டு + +#### உங்கள் GitHub தனிப்பட்ட அணுகல் குறியீட்டை உருவாக்குதல் + +GitHub குறிப்பிட்ட குறியீடு உங்கள் பயன்பாட்டுக்கு GitHub-ன் AI சேவைகளைப் பயன்படுத்த அனுமதி தரும் தனிப்பட்ட கடவுச்சொல் போல: + +**தொகுப்பாக குறியீடு உருவாக்க நடவடிக்கைகள்:** +1. **GitHub அமைப்புகள் செல்** → Developer settings → Personal access tokens → Tokens (classic) +2. **"Generate new token (classic)" கிளிக் செய்க** +3. **காலாவதி அமைக்கவும்** (சோதனைக்கு 30 நாட்கள், தயாரிப்புக்கு நீண்ட காலம்) +4. **உட்பிரிவுகளை தேர்வு செய்க**: "repo" மற்றும் தேவையான பிற அனுமதிகளை குறிக்கவும் +5. **குறியீட்டை உருவாக்கி உடனே நகல் எடுக்கவும் (மீண்டும் காண முடியாது!)** +6. **உங்கள் .env கோப்பில் ஒட்டவும்** + +```bash +# உங்கள் டோக்கன் எப்படி இருக்கும் என்பதன் உதாரணம் (இது போலி!) +GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R +``` + +#### Python-இல் சுற்றுப்புற மாறிலிகள் ஏற்றுதல் + +```python +import os +from dotenv import load_dotenv -app = Flask(__name__) -CORS(app) # * example.com +# .env கோப்பிலிருந்து சூழல் மாறிலிகளை ஏற்றவும் +load_dotenv() + +# இப்போது நீங்கள் அவற்றை பாதுகாப்பாக அணுகலாம் +api_key = os.environ.get("GITHUB_TOKEN") +if not api_key: + raise ValueError("GITHUB_TOKEN not found in environment variables!") + +client = OpenAI( + api_key=api_key, + base_url="https://models.github.ai/inference" +) +``` + +**இந்த குறியீடு என்ன செய்கிறது:** +- **உங்கள் .env கோப்பை ஏற்றுகிறது மற்றும் மாறிலிகளை Python-க்கு கிடைக்கச்செய்கிறது** +- **தேவைப்பட்ட குறியீடு உள்ளது என்பதை சரிபார்க்கிறது (சிறந்த பிழை கையாளல்!)** +- **குறியீடு இல்லாதால் தெளிவான பிழையை எழுப்புகிறது** +- **குறியீட்டை பாதுகாப்பாக பயன்படுத்துகிறது, குறியீட்டில் வெளியிடாது** + +#### Git பாதுகாப்பு: .gitignore கோப்பு + +`.gitignore` கோப்பு Git-க்கு எந்த கோப்புகளை கவனிக்க வேண்டாமென சொல்லும்: + +```bash +# .gitignore - இந்த வரிகளைக் காண்பிக்கவும் +.env +*.env +.env.local +.env.production +__pycache__/ +venv/ +.vscode/ +``` + +**இது ஏன் அவசியம்**: `.env`-ஐ `.gitignore`-இல் சேர்ப்பதால், Git உங்கள் சுற்றுப்புற கோப்பை புறக்கணித்து உங்கள் இரகசியங்கள் தவறவிட்டு GitHub-க்கு அனுப்பப்படாமல் தடுக்கும். -@app.route("/", methods=["GET"]) -def index(): - return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload" +#### வேறுபட்ட சூழல்கள், வேறுபட்ட இரகசியங்கள் +தொழில்முறை செயலிகள் வேறுபட்ட சூழல்களுக்கு வேறுபட்ட API விசைகளை பயன்படுத்துகின்றன: + +```bash +# .env.development +GITHUB_TOKEN=your_development_token +DEBUG=True + +# .env.production +GITHUB_TOKEN=your_production_token +DEBUG=False +``` + +**ஏன் இது முக்கியம்**: உங்கள் அபிவிருத்தி சோதனைகள் உங்கள் தயாரிப்பு AI பயன்பாட்டை பாதிக்காமல் இருக்க வேண்டும், மேலும் வெவ்வேறு சூழல்களுக்கு வேறுபட்ட பாதுகாப்பு மட்டங்கள் வேண்டும். + +### உங்கள் அபிவிருத்தி சர்வரை துவக்குதல்: FastAPI-யை உயிரூட்டுதல் +இப்போது சுவாரஸ்யமான தருணம் வருகிறது – உங்கள் FastAPI அபிவிருத்தி சேவையகத்தை தொடங்கி, உங்கள் AI ஒருங்கிணைப்பை உயிருடன் பார்க்கும் தருணம்! FastAPI, Uvicorn என்ற மிக வேகமான ASGI சேவையகத்தை பயன்படுத்துகிறது, இது குறிப்பாக async Python பயன்பாடுகளுக்காக வடிவமைக்கப்பட்டுள்ளது. + +#### FastAPI சேவையகத் தொடக்க செயல்முறையை புரிந்து கொள்வது + +```bash +# முறை 1: நேரடி Python செயல்பாடு (தானாக மீள்பதிவு செய்யும் வசதி உடன்) +python api.py + +# முறை 2: Uvicorn ஐ நேரடியாக பயன்படுத்தல் (மேலும் கட்டுப்பாடு) +uvicorn api:app --host 0.0.0.0 --port 5000 --reload +``` + +இந்தக் கட்டளையை நீங்கள் இயக்கும் போது, பின்னணி செயல்பாடுகள் இங்கேயிருக்கின்றன: + +**1. Python உங்கள் FastAPI பயன்பாட்டை ஏற்றுகிறது**: +- தேவையான அனைத்து நூலகங்களையும் இறக்குமதிசெய்கிறது (FastAPI, Pydantic, OpenAI போன்றவை) +- உங்கள் `.env` கோப்பிலிருந்து சுற்றுச்சூழல் மாறிலிகளை ஏற்றுகிறது +- தானாக உருவாகும் ஆவணங்களுடன் FastAPI பயன்பாட்டு எடுத்துக்காட்டை உருவாக்குகிறது + +**2. Uvicorn ASGI சேவையகத்தை கட்டமைக்கிறது**: +- async வினவலை கையாளும் திறனுடன், போர்ட் 5000ஐ பிணைக்கிறது +- தானாக சரிபார்ப்புடன் வினவை வழிமாற்றத்தை ஏற்படுத்துகிறது +- அபிவிருத்திக்கு ஹாட் ரிலோட்ஸை இயக்குகிறது (கோப்புகள் மாற்றப்பட்டால் மீண்டும் துவங்கும்) +- தொடர்புடைய API ஆவணங்களை உருவாக்குகிறது + +**3. சேவையகம் கேட்க தொடங்குகிறது**: +- உங்கள் டெர்மினல் இவ்வாறு காட்டும்: `INFO: Uvicorn running on http://0.0.0.0:5000` +- சேவையகம் பல இணைந்து உள்ள AI வினவல்களை கையாள முடியும் +- தானாக உருவாக்கப்பட்ட ஆவணங்கள் `http://localhost:5000/docs` இல் பதிவிறக்கத்திற்குக் காத்திருக்கின்றன + +#### அனைத்தும் சரியாக இயங்கும் போது நீங்கள் காண வேண்டியது + +```bash +$ python api.py +INFO: Will watch for changes in these directories: ['/your/project/path'] +INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit) +INFO: Started reloader process [12345] using WatchFiles +INFO: Started server process [12346] +INFO: Waiting for application startup. +INFO: Application startup complete. +``` + +**FastAPI வெளிப்பாட்டை புரிந்து கொள்வது:** +- **மாற்றங்களை கவனிக்கும்**: அபிவிருத்திக்காக தானாக மீள்பூட்டல் இயங்கும் +- **Uvicorn இயக்கத்தில்**: உயர் செயல்திறன் ASGI சேவையகம் செயலில் உள்ளது +- **மீள்பூட்டும் செயல்முறை தொடங்கியது**: கோப்பு கவனிப்பான் தானாக மீண்டும் துவங்க உதவும் +- **பயன்பாடு தொடங்கி முடிந்தது**: FastAPI பயன்பாடு வெற்றிகரமாக தொடங்கியது +- **தொடர் ஆவணங்கள் கிடைக்கின்றன**: `/docs` இல் தானாக API ஆவணங்களை பார்க்கலாம் + +#### உங்கள் FastAPI ஐ சோதிப்பதற்கான பல சமர்த்தமான முறைகள் + +FastAPI பல வசதியான வழிகளை வழங்குகிறது, அதில் தானாக உருவாகும் தொடர்புடைய ஆவணங்களும் அடங்கும்: + +**முறை 1: தொடர்புடைய API ஆவணங்கள் (பரிந்துரைக்கப்படுகிறது)** +1. உலாவியில் `http://localhost:5000/docs` ஐ திறக்கவும் +2. உங்கள் அனைத்து முடிவுகளும் ஆவணங்கள் வடிவில் Swagger UI இல் தோன்றும் +3. `/hello` கிளிக் செய்யவும் → "Try it out" → ஒரு சோதனை செய்தியை உள்ளிடவும் → "Execute" +4. பதிலை நேரடியாக உலாவியில் சரியாக காட்டப்படும் + +**முறை 2: அடிப்படை உலாவிக் சோதனை** +1. முதன்மை முடிவுக்கு `http://localhost:5000` செல்லவும் +2. சேவையகத்தின் நிலையை பார்க்க `http://localhost:5000/health` செல்லவும் +3. இது உங்கள் FastAPI சேவையகம் சரியாக இயங்கிவருவதை உறுதி செய்கிறது + +**முறை 2: கட்டளை வரி சோதனை (மேம்பட்டது)** +```bash +# கர்ளுடன் சோதனை செய்க (கிடைக்கும் என்றால்) +curl -X POST http://localhost:5000/hello \ + -H "Content-Type: application/json" \ + -d '{"message": "Hello AI!"}' + +# எதிர்பார்க்கப்படும் பதில்: +# {"response": "வணக்கம்! நான் உங்கள் AI உதவியாளன். இன்று எப்படி உதவலாம்?"} +``` + +**முறை 3: Python சோதனை ஸ்கிரிப்ட்** +```python +# test_api.py - உங்கள் API ஐ சோதிக்க இந்த கோப்பை உருவாக்கவும் +import requests +import json + +# API முடிவுநிலையை சோதிக்கவும் +url = "http://localhost:5000/hello" +data = {"message": "Tell me a joke about programming"} + +response = requests.post(url, json=data) +if response.status_code == 200: + result = response.json() + print("AI Response:", result['response']) +else: + print("Error:", response.status_code, response.text) +``` + +#### பொதுவான தொடக்கக் கோளாறுகளை சரி செய்யுதல் + +| பிழை செய்தி | அதன் பொருள் | சரி செய்வது எப்படி? | +|---------------|---------------|------------| +| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI நிறுவப்படவில்லை | உங்கள் வேர்ச்சுவல் சுற்றுச்சூழலில் `pip install fastapi uvicorn` ஐ இயக்கவும் | +| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI சேவையகம் நிறுவப்படவில்லை | உங்கள் வேர்ச்சுவல் சுற்றுச்சூழலில் `pip install uvicorn` ஐ இயக்கவும் | +| `KeyError: 'GITHUB_TOKEN'` | சுற்றுச்சூழல் மாறி கிடைக்கவில்லை | உங்கள் `.env` கோப்பையும் `load_dotenv()` அழைப்பையும் சரிபார்க்கவும் | +| `Address already in use` | போர்ட் 5000 வேலையில் உள்ளது | போர்ட் 5000ஐ பயன்படுத்தும் மற்ற செயலிகளை நிறுத்துக அல்லது போர்ட்டை மாறுங்கள் | +| `ValidationError` | வேண்டுகோள் தரவு Pydantic மாதிரிக்கு பொருந்தவில்லை | உங்கள் வேண்டுகோள் வடிவம் எதிர்பார்க்கப்படும் வடிவத்துடன் பொருந்துகிறதா எனச் சரிபார்க்கவும் | +| `HTTPException 422` | செயல்படுத்த இயலாத உருவாக்கம் | வேண்டுகோள் சோதனையில் தவறு, சரியான வடிவத்திற்கு `/docs` ஐ பார்வையிடவும் | +| `OpenAI API error` | AI சேவை அங்கீகாரத்தில் பிழை | உங்கள் GitHub டோக்கன் சரியானதா மற்றும் ஏற்ற பிறப்புரிமைகள் உள்ளதா என உறுதி செய்யவும் | + +#### அபிவிருத்தி சிறந்த நடைமுறைகள் + +**ஹாட் ரிலோடிங்**: Python கோப்புகளை சேமிக்கும் பொழுது FastAPI மற்றும் Uvicorn தானாக மீள்பூட்டலை வழங்குகின்றன. இதனால் உங்கள் குறியீட்டை திருத்தி உடனுக்குடன் சோதிக்க முடியும், தங்களே மீண்டும் துவக்க தேவையில்லை. + +```python +# சூடான மறுமூட்டலை தெளிவாக இயக்கு +if __name__ == "__main__": + app.run(host="0.0.0.0", port=5000, debug=True) # debug=True சூடான மறுமூட்டலை இயக்கிறது +``` + +**அபிவிருத்திக்கு பதிவு செய்தல்**: என்ன நடக்கிறது என்பதை புரிந்துகொள்ள பதிவு சேர்: + +```python +import logging + +# பதிவு அமைக்கவும் +logging.basicConfig(level=logging.INFO) +logger = logging.getLogger(__name__) @app.route("/hello", methods=["POST"]) def hello(): - # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") + + logger.info(f"Received message: {message}") + + if not message: + logger.warning("Empty message received") + return jsonify({"error": "Message field is required"}), 400 + + try: + response = call_llm(message, "You are a helpful and friendly assistant.") + logger.info(f"AI response generated successfully") + return jsonify({"response": response}) + except Exception as e: + logger.error(f"AI API error: {str(e)}") + return jsonify({"error": "AI service temporarily unavailable"}), 500 +``` - response = call_llm(message, "You are a helpful assistant.") - return jsonify({ - "response": response - }) +**எதற்கு பதிவு உதவும்**: அபிவிருத்தி காலத்தில் எந்தவொரு கோரிக்கைகளும் வரும், AI எதை பதிலளிக்கிறது, கோளாறுகள் எங்கு வந்துள்ளன என்று jūs தெளிவாகக் காணலாம். இது பிழைத்திருத்தத்தை விரைவாக்குகிறது. -if __name__ == "__main__": - app.run(host="0.0.0.0", port=5000) +### GitHub Codespaces க்கான கட்டமைப்பு: கிளவுட் அபிவிருத்தி எளிதாக்கப்பட்டது + +GitHub Codespaces என்பது எந்த உலாவியிடமிருந்தும் அணுகக்கூடிய கிளவுட் உள்ளிலுள்ள சக்திவாய்ந்த அபிவிருத்தி கணினி போன்றது. Codespaces இல் வேலை பார்க்க உங்கள் பின்னணி முன் நிறுத்தத்துடன் சரியாக இணைக்க சில اضافي படிகளும் தேவை. + +#### Codespaces நெட்வொர்க் புரிந்து கொள்வது + +ஒரு உள்ளூர் அபிவிருத்தி சூழலில் எல்லாம் ஒரே கணினியில் இயங்குகிறது: +- Backend: `http://localhost:5000` +- Frontend: `http://localhost:3000` (அல்லது file://) + +Codespaces இல், உங்கள் அபிவிருத்தி சூழல் GitHub சேவையகங்களில் இயங்கும், எனவே "localhost" என்பதற்கு வேறு பொருள் உண்டு. GitHub தானாக உங்கள் சேவைகளுக்கு பொதுபயன்பாட்டு URLகளை உருவாக்குகிறது, எனினும் நீங்கள் அவைகளை சரிசெய்ய வேண்டும். + +#### Codespaces கட்டமைப்புக்கான படிப்படியாக வழிகாட்டல் + +**1. உங்கள் பின்னணி சேவையகத்தை தொடங்கு**: +```bash +cd backend +python api.py ``` -இங்கே, நாம் ஒரு Flask API உருவாக்கி, "/" மற்றும் "/chat" என்ற இயல்பான வழியை வரையறுக்கிறோம். பின்னணி கேள்விகளை frontend மூலம் அனுப்புவதற்காக "/chat" வழி பயன்படுத்தப்படுகிறது. +FastAPI/Uvicorn தொடக்கச் செய்தி Codespace சூழலில் இயங்குவதை நீங்கள் காண்பீர்கள். -*llm.py* ஐ ஒருங்கிணைக்க, இதை செய்ய வேண்டும்: +**2. போர்ட் பாக்கி நிலைமை அமைக்க**: +- VS Code கீழ் பகுதியில் "Ports" தாவலைத் தேடவும் +- 5000 போர்ட்டைப் பட்டியலில் கண்டுபிடிக்கவும் +- போர்ட் 5000ஐ வலது கிளிக் செய்யவும் +- "Port Visibility" → "Public" ஐ தேர்ந்தெடுக்கவும் -- `call_llm` செயல்பாட்டை இறக்குமதி செய்யவும்: +**ஏன் பொதுவாக்க வேண்டும்?** Codespace போர்ட்டுகள் இயல்பாக தனிப்பட்டவை (நீங்கள் மட்டுமே அணுகலாம்). பொதுவாக்க மேசையால் உங்கள் முன்னணி (உலாவியில் இயங்கும்) உங்கள் பின்னணியுடன் தொடர்பு கொள்ள முடியும். - ```python - from llm import call_llm - from flask import Flask, request - ``` +**3. உங்கள் பொது URLஐப் பெறுக**: +போர்ட்டை பொதுவாக்கிய பிறகு, உங்களுக்கு கீழ்க்காணும் மாதிரியான URL தோன்றும்: +``` +https://your-codespace-name-5000.app.github.dev +``` -- "/chat" வழியில் அதை அழைக்கவும்: +**4. உங்கள் முன்னணி கட்டமைப்பை புதுப்பிக்கவும்**: +```javascript +// உங்கள் முன் முனை app.js இல், BASE_URL ஐ புதுப்பிக்கவும்: +this.BASE_URL = "https://your-codespace-name-5000.app.github.dev"; +``` - ```python - @app.route("/hello", methods=["POST"]) - def hello(): - # get message from request body { "message": "do this taks for me" } - data = request.get_json() - message = data.get("message", "") +#### Codespace URLகள் பற்றி அறிவது - response = call_llm(message, "You are a helpful assistant.") - return jsonify({ - "response": response - }) - ``` +Codespace URLகள் முன்கூட்டியே கணிக்கப்பட்ட முறையில் இருக்கும்: +``` +https://[codespace-name]-[port].app.github.dev +``` - இங்கே, JSON உடலிலிருந்து `message` சொத்தை பெறுவதற்காக வரும் கோரிக்கையை பகுப்பாய்வு செய்கிறோம். அதன் பிறகு, LLM-ஐ இந்த அழைப்புடன் அழைக்கிறோம்: +**இதன் உட்பிரிவுகள்:** +- `codespace-name`: உங்கள் Codespace தனித்தகுதி அடையாளம் (பொதுவாக உங்கள் பயனர்பெயர் உட்பட உள்ளது) +- `port`: உங்கள் சேவையின் இயக்க போர்ட் எண் (FastAPI பயன்பாட்டிற்கு 5000) +- `app.github.dev`: Codespace பயன்பாடுகளுக்கான GitHub டொமைன் - ```python - response = call_llm(message, "You are a helpful assistant") +#### Codespace அமைப்பை சோதனை செய்தல் - # return the response as JSON - return jsonify({ - "response": response - }) - ``` +**1. பின்னணியை நேரடியாகச் சோதிக்கவும்**: +பொது URLஐ புதிய உலாவி தாவலில் திறக்கவும். கீழ்காணும் தோற்றத்தை காண வேண்டும்: +``` +Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field. +``` -சிறந்தது, நாம் தேவையானதை செய்துவிட்டோம். +**2. உலாவி அபிவிருத்தி கருவிகள் மூலம் சோதிக்கவும்**: +```javascript +// உலாவி கன்சோலை திறந்து உங்கள் API ஐ சோதிக்கவும் +fetch('https://your-codespace-name-5000.app.github.dev/hello', { + method: 'POST', + headers: {'Content-Type': 'application/json'}, + body: JSON.stringify({message: 'Hello from Codespaces!'}) +}) +.then(response => response.json()) +.then(data => console.log(data)); +``` -## Cors அமைத்தல் +#### Codespaces மற்றும் உள்ளூர் அபிவிருத்தி ஒப்பீடு -நாம் CORS, cross-origin resource sharing போன்றவற்றை அமைத்துள்ளோம் என்பதை குறிப்பிட வேண்டும். இதன் பொருள், backend மற்றும் frontend வெவ்வேறு ports-ல் இயங்குவதால், frontend backend-ஐ அழைக்க அனுமதிக்க வேண்டும். +| அம்சம் | உள்ளூர் அபிவிருத்தி | GitHub Codespaces | +|--------|-------------------|-------------------| +| **அமைப்பு நேரம்** | நீண்டது (Python, சார்புகளைக் நிறுவுதல்) | உடனடி (முன்பே கட்டமைக்கப்பட்ட சூழல்) | +| **URL அணுகல்** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` | +| **போர்ட் கட்டளைமைப்பு** | தானாக இயங்கும் | கைமுறையால் (போர்ட்டை பொதுவாக்கவும்) | +| **கோப்பு நிலைத்தன்மை** | உள்ளூர்மேஷின் | GitHub சேமிப்பகங்கள் | +| **ஒத்துழைப்பு** | சூழலைப் பகிர்வது கடினம் | Codespace இணைப்பை எளிதில் பகிரலாம் | +| **இணையத் தேவையுடையது** | AI API அழைப்புகளுக்கு மட்டும் | எல்லாவற்றுக்கும் தேவை | -### Python பயன்படுத்துதல் +#### Codespace அபிவிருத்தி குறிப்புகள் -*api.py* இல் இதை அமைக்கும் ஒரு குறியீடு உள்ளது: +**Codespaces இல் சுற்றுச்சூழல் மாறிகள்**: +உங்கள் `.env` கோப்பு Codespaces இலும் அதேவிதமாக இயங்கும், இன்னும் கூட Codespace உடனடியாக சுற்றுச்சூழல் மாறிகளை அமைக்க முடியும்: -```python -from flask_cors import CORS +```bash +# தற்போதைய அமர்வுக்கான சுற்றுச்சூழல் மாறியை அமைக்கவும் +export GITHUB_TOKEN="your_token_here" -app = Flask(__name__) -CORS(app) # * example.com +# அல்லது நிலைத்தன்மைக்காக .bashrc-இல் சேர்க்கவும் +echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc ``` -இப்போது "*" என்று அனைத்து origin-களையும் அனுமதிக்க அமைக்கப்பட்டுள்ளது, இது கொஞ்சம் பாதுகாப்பற்றது, அதை உற்பத்திக்கு செல்லும்போது கட்டுப்படுத்த வேண்டும். +**போர்ட் மேலாண்மை**: +- Codespaces, உங்கள் பயன்பாடு ஒரு போர்ட்டை கேட்கத் தொடங்கும் போது தானாக கண்டறியும் +- நீங்கள் பல போர்ட்டுக்களை ஒரே நேரத்தில் முன்வைத்து அனுப்பலாம் (கீழே ஒரு தரவுத்தளத்தையும் சேர்க்க விரும்பினால் பயனுள்ளது) +- உங்களுடைய Codespace இயங்கும் வரை போர்ட்டுகள் அணுகக்கூடியவையாக இருக்கும் -## உங்கள் திட்டத்தை இயக்கவும் +**அபிவிருத்தி வேலைநடவடிக்கை**: +1. VS Code இல் குறியீட்டு மாற்றங்களை செய்யவும் +2. FastAPI தானாக மீள்பூட்டும் (Uvicorn ரீலோடு முறையின் மூலம்) +3. பொது URL மூலம் உடனுக்குடன் மாற்றங்களை சோதிக்கவும் +4. தயார் எனில் commit செய்து push செய்யவும் -உங்கள் திட்டத்தை இயக்க, முதலில் backend-ஐ தொடங்க வேண்டும், பின்னர் frontend-ஐ தொடங்க வேண்டும். +> 💡 **நுட்பக் குறிப்பு**: அபிவிருத்தி நடைபெறும் போதெல்லாம் உங்கள் Codespace பின்னணி URL ஐ புக் மார்க் செய்யுங்கள். Codespace பெயர்கள் நிலைத்த நிலையைவைத்திருப்பதால், அதே Codespace பயன்படுத்தும் வரை URL மாறாது. -### Python பயன்படுத்துதல் +## முன்னணி சந்தை இடைமுகம் உருவாக்குதல்: மனிதர்கள் AI ஐ சந்திக்கும் இடம் -சரி, *llm.py* மற்றும் *api.py* உள்ளது, backend-இன் மூலம் இதை எப்படி வேலை செய்ய வைக்கலாம்? இரண்டு விஷயங்களை செய்ய வேண்டும்: +இப்போது நாம் பயனர் இடைமுகத்தை உருவாக்கப் போகிறோம் – இது உங்கள் AI உதவியாளருடன் மக்கள் எப்படி தொடர்பு கொள்கிறார்கள் என்பதைக் காட்டும் பகுதி. இயங்கும் iPhone இன் இடைமுக வடிவமைப்பைப் போலவே, நுட்பமான தொழில்நுட்பங்களை உடல்சார் மற்றும் இயல்பானதாக மாற்ற கவனம் செலுத்துகிறோம். -- Dependencies-ஐ நிறுவவும்: +### நவீன முன்னணி கட்டமைப்பை புரிந்து கொள்வது - ```sh - cd backend - python -m venv venv - source ./venv/bin/activate +எங்கள் சந்தை இடைமுகம் "ஒரே பக்கம் பயன்பாடான" (Single Page Application - SPA) ஈடுபாட்டை பெற்றது. பழைய முறையைப் போல ஒவ்வொரு கிளிக்கிலும் புதிய பக்கம் ஏற்றப் பிறகு, எங்கள் செயலி மென்மையாகவும் விரைவாகவும் புதுப்பிக்கிறது: - pip install openai flask flask-cors openai - ``` +**பழைய வலைத்தளங்கள்**: புத்தகம் வாசிப்பதைப் போல – புதிய பக்கங்கள் போட்டுவைக்கிறீர்கள் +**எங்கள் சந்தை செயலி**: உங்கள் தொலைபேசியைப் பயன்படுத்துவது போல் – அனைத்தும் சிலமாகவும் துரிதமாகவும் அப்டேட் ஆகிறது + +```mermaid +graph TD + A[பயனர் செய்தி உருவாக்குகிறார்] --> B[ஜாவாஸ்கிரிப்ட் உள்ளீட்டை பிடிக்கிறது] + B --> C[தரவை சரிபார்த்து வடிவமைக்கவும்] + C --> D[பின்புற API க்கு அனுப்பு] + D --> E[ஏற்று நிலையை காட்டவும்] + E --> F[AI பதிலை பெறுக] + F --> G[சாட் இடைமுகத்தை புதுப்பிக்கவும்] + G --> H[அடுத்த செய்திக்கு தயாராக உள்ளது] +``` +```mermaid +classDiagram + class ChatApp { + +messages: HTMLElement + +form: HTMLElement + +input: HTMLElement + +sendButton: HTMLElement + +BASE_URL: string + +API_ENDPOINT: string + + +constructor() + +initializeEventListeners() + +handleSubmit(event) + +callAPI(message) + +appendMessage(text, role) + +escapeHtml(text) + +scrollToBottom() + +setLoading(isLoading) + } + + ChatApp --> DOM : மாற்றுகிறது + ChatApp --> FastAPI : கோரிக்கைகளை அனுப்புகிறது +``` +### முன்னணி அபிவிருத்தியின் மூன்று தூண்கள் -- API-ஐ தொடங்கவும்: +எந்த முன்னணி பயன்பாடு – எளிய வலைத்தளங்களிலிருந்தும் Discord அல்லது Slack போலக் கடுமையான செயலிகளிலுள்ளவையும் – மூன்று அடிப்படை தொழில்நுட்பங்களின் மீதும் கட்டப்பட்டுள்ளது. இவை வலைப்பக்கத்தில் நீங்கள் பார்க்கும் மற்றும் தொடர்பு கொள்வதற்கான அடித்தளத்திலிருக்கும்: - ```sh - python api.py - ``` +**HTML (கட்டமைப்பு)**: இது உங்கள் அடித்தளம் +- எவை எவற்றுள் உள்ளன என்பதை தீர்மானிக்கிறது (பட்டன்கள், உரை பகுதிகள், கட்டானர்கள்) +- உள்ளடக்கத்திற்கு பொருள் கொடுக்கிறது (இது தலைப்பு, இது படிவம் என்று) +- மற்ற அனைத்தும் இதன் அடிப்படையில் கட்டப்பட்டது - Codespaces-ல் இருந்தால், editor-இன் கீழ் Ports-க்கு செல்லவும், அதில் right-click செய்து "Port Visibility" ஐ கிளிக் செய்து "Public" ஐ தேர்ந்தெடுக்கவும். +**CSS (காட்சியமைப்பு)**: உங்கள் உட்புற வடிவமைப்பாளர் +- அனைத்தும் அழகாக காட்சியளிக்க செய்வது (நிறங்கள், எழுத்துருக்கள், அமைப்புகள்) +- வேறுபட்ட திரை அளவுகோல்களை கையாள்கிறது (தொலைபேசி, லேப்டாப், டாப்லெட்) +- மென்மையான அனிமேஷன் மற்றும் காட்சிப்படுத்தலை உருவாக்குகிறது -### ஒரு frontend-இல் வேலை செய்யவும் +**JavaScript (நடத்தை)**: இது உங்கள் மூளை +- பயனர்கள் செய்யும் செயல்களுக்கு (கிளிக்குகள், முதிரட்டல்கள், ஸ்க்ரோல் செய்தல்) பதிலளிக்கிறது +- உங்கள் பின்னணியுடன் தொடர்பு கொண்டு பக்கத்தை புதுப்பிக்கிறது +- அனைத்தையும் தொடர்புடைய, இயக்களிக்கும் வண்ணமாக மாற்றுகிறது -API இயங்கும் நிலையில், frontend உருவாக்குவோம். இது bare minimum frontend ஆகும், அதை படிப்படியாக மேம்படுத்துவோம். *frontend* கோப்பகத்தில் இதை உருவாக்கவும்: +**இதனை கட்டிடக்கலை வடிவமைப்பாக நினைத்துக் கொள்ளுங்கள்:** +- **HTML**: கட்டிட ரேகைப் படம் (இடங்களையும் தொடர்புகளையும் வரையறுக்கிறது) +- **CSS**: அழகும் சூழலும் வடிவமைப்பு (காட்சியியல் மற்றும் பயனர் அனுபவம்) +- **JavaScript**: இயந்திர அமைப்புகள் (செயல்திறன் மற்றும் தொடர்பின்மை) + +### நவீன JavaScript கட்டமைப்பின் முக்கியத்துவம் + +எங்கள் சந்தை செயலி நீங்கள் தொழில்முறை பயன்பாடுகளில் காணப் பெறும் நவீன JavaScript மாதிரிகளைக் பயன்படுத்தும். இ கருத்துக்களைப் புரிந்து கொள்வதால் நீங்கள் ஒரு மேம்பட்ட அபிவிருத்தியாளராக வளர உதவும்: + +**வகுப்புத் தொழில்நுட்ப கட்டமைப்பு**: எங்கள் குறியீட்டை வகுப்புகளாக (classes) ஒழுங்குபடுத்துவோம், இது பொருட்களுக்கு வரைபடங்களை உருவாக்குவதற்கு ஒப்பாகும் +**Async/Await**: நேரத்தை எடுத்துக் கொள்ளும் செயல்களை (API அழைப்புகள் போன்ற) நவீன முறையில் கையாள்வது +**ஈவெண்ட் சார்ந்த திட்டமிடல்**: எங்கள் செயலி, செல்லுபடியான செயல்களில் (கிளிக்குகள், விசை அழுத்தல்) பதிலளிப்பதுதான்; இடைவெளியின்றி ஓடுவதில்லை +**DOM மாற்றம்**: பயனர் தொடர்புகளின் மற்றும் API பதில்களின் அடிப்படையில் பக்க உள்ளடக்கத்தை சீரமைத்தல் + +### திட்ட கட்டமைப்பு அமைத்தல் + +இந்த அமைப்புடைய முன்னணி அடைவை உருவாக்குக: ```text -backend/ frontend/ -index.html -app.js -styles.css +├── index.html # Main HTML structure +├── app.js # JavaScript functionality +└── styles.css # Visual styling ``` -**index.html**-இல் தொடங்குவோம்: +**கட்டமைப்பைப் புரிந்து கொள்வது:** +- கட்டமைப்பு (HTML), நடத்தை (JavaScript), காட்சியமைப்பு (CSS) ஆகியவற்றுக்கு இடையேயான பொறுப்புகளை பிரிக்கிறது +- எளிமையான கோப்பமைப்பை பேணுகிறது, பார்க்கவும் திருத்தவும் எளிதாக +- அமைப்பு மற்றும் பராமரிப்புக்கு சிறந்த வலை அபிவிருத்தி நடைமுறைகளை பின்பற்றுகிறது + +### HTML அடித்தளத்தை கட்டமைத்தல்: கிடைக்கும் வசதி நினைவில் வைத்து செமாண்டிக் கட்டமைப்பு + +HTML அமைப்போடு வேலை தொடங்குவோம். நவீன வலை அபிவிருத்தி "செமாண்டிக் HTML" ஐ வலியுறுத்துகிறது – HTML கூறுகளை அவை செய்யும் பணியின் அடிப்படையில் பயன்படுத்துதல், தோற்றத்தை மட்டும் சார்ந்தவையல்ல. இது உங்கள் பயன்பாட்டை திரைக்காணிகள் உள்ளனர், தேடுபொறிகள் மற்றும் பிற கருவிகளுக்கு அணுகக்கூடியதாக மாற்றுகிறது. + +**செமாண்டிக் HTML முக்கியத்துவம்**: உங்கள் சந்தை செயலியை ஒரு நபருக்கு தொலைபேசியில் விளக்கினால் "தலைப்புடன் கூடிய மேல்தளம், உரையாடல்கள் நடைபெறும் முதன்மை பகுதி, கீழே செய்தி தட்டச்சு செய்யும் படிவம்" என்று சொல்லுவீர்கள். செமாண்டிக் HTML அப்படியேயே கூறுகளைப் பயன்படுத்துகிறது. + +`index.html` ஐ இந்த கவனமாக கட்டமைக்கப்பட்ட குறியீட்டுடன் உருவாக்குங்கள்: ```html - - - - - -
- - - -
- + + ``` -மேலே உள்ளது ஒரு chat window-ஐ ஆதரிக்க absolute minimum ஆகும், இது textarea, input மற்றும் ஒரு button கொண்டுள்ளது. *app.js* இல் JavaScript-ஐ பார்ப்போம். +**ஒவ்வொரு HTML கூறின் நோக்கும் அதன் நோக்கம்**: + +#### ஆவண கட்டமைப்பு +- **``**: உலாவியை இது நவீன HTML5 எனச் சொல்லுவது +- **``**: மொழி குறியீட்டை குறிப்பிடுகிறது, திரைக்காணிகள் மற்றும் மொழி பெயர்ப்பர்களுக்கான உதவி +- **``**: சர்வதேச எழுத்துக்களுக்கு சரியான எழுத்துக் குறியாக்கத்தை வழங்குகிறது +- **``**: மொபைல் சாதனங்களில் பக்கம் சரியாக காணப்பட உதவும் (ஜூம் மற்றும் அளவு நிர்வகிப்பு) + +#### செமாண்டிக் கூறுகள் +- **`
`**: தலைப்பு மற்றும் விளக்கத்துடன் மேல்தடதத்தை தெளிவாக குறிக்கிறது +- **`
`**: முதன்மை உள்ளடக்க பகுதியை (உரையாடல்கள் இருக்கும்) அமைக்கிறது +- **`
`**: பயனர் உள்ளீட்டிற்கு செமாண்டிக் முறையில் பொருத்தமானது, விசைப்பலகை வழிசெலுத்தலுக்கு உதவும் + +#### அணுகும் வசதிகள் +- **`role="log"`**: திரைக்காணிகளுக்கு இவ்விடம் பகுதியில் செய்திகள் வரிசையாக இருக்கிறது என்பதை அறிவிக்கிறது +- **`aria-live="polite"`**: புதிய செய்திகள் திரைக்காணிகளுக்கு தகர்ப்படாமல் அறிவிக்கப்படுகின்றன +- **`aria-label`**: படிவக் கட்டுப்பாடுகளுக்கான விளக்கக் குறிச்சொற்கள் +- **`required`**: பயனர் செய்தி உள்ளிடவில்லையெனில் உலாவி கண்டறிந்து அனுப்பாதது உரியவாறு சரிபார்க்கும் + +#### CSS மற்றும் JavaScript ஒருங்கிணைப்பு +- **`class` பணியிடங்கள்**: CSSக்கு அழகுப்பயன்பாட்டைக்கான அடிகள் வழங்கும் (உதா., `chat-container`, `input-group`) +- **`id` பணியிடங்கள்**: குறிப்பிட்ட கூறுகளை JavaScript மூலம் கண்டுபிடித்து மாற்ற உதவும் +- **ஸ்கிரிப்டுக்களை இடம்**: HTML முதலில் ஏற்றப்படுவதற்காக JavaScript கோப்புகள் கடைசியில் ஏற்றப்படும் + +**இவைகளை ஏன் இந்த அமைப்பாக செய்யது?** +- **தர்க்கமான வரிசை**: தலைப்பு → முதன்மை உள்ளடக்கம் → உள்ளீட்டு படிவம் இயல்பான வாசிப்பு ஒழுங்கு +- **விசைப் பலகை அணுகல்**: பயனர்கள் அனைத்தும் தொடர்பு கூறுகளின் மேல் தொடர்ந்து விசைப்பலகையில் சഞ്ചரிக்க முடியும் +- **திரைக்காணி நட்பு**: தெளிவான அடையாளங்கள் மற்றும் விளக்கங்கள் பார்வை குறைப்பாளிகளுக்கு +- **மொபைல் ஒத்துழைப்பு**:Viewport மேட்டாவுடன் பதிலளிக்கும் வடிவமைப்பு +- **நோக்கம் மேம்பாடு**: CSS அல்லது JavaScript தோல்வியளித்தாலும் இயங்கும் + +### தொடர்புடைய JavaScript சேர்க்கல்: நவீன வலை செயலி கருவிகள் + +இப்போது நமது சிறப்புச் சட்டார்த்தத்தை உயிர்ப்பிக்க ஜாவாஸ்கிரிப்ட்டை கட்டமைக்கலாம். ES6 வகுப்புகள், async/await மற்றும் நிகழ்வு சார்ந்த நிரலாக்கத்தை உள்ளடக்கிய, நீங்கள் தொழிற் துறை வலை மேம்பாட்டில் சந்திக்கும் நவீன ஜாவாஸ்கிரிப்ட் மேற்கொண்டுள்ளோம். + +#### நவீன ஜாவாஸ்கிரிப்ட் கட்டமைப்பை புரிந்து கொள்வது + +வழக்கமான நிரலை எழுதுவதற்கு பதிலாக (ஒரு வரிசையில் இயக்கப்படும் பக்க்தான நிரல்கள்), நாமெ ஒரு **வகுப்பு அடிப்படையிலான கட்டமைப்பை** உருவாக்குவோம். ஒரு வகுப்பு என்பது பொருட்களை உருவாக்கும் ஒருவகை படிவமாக கருதுங்கள் – ஒரு கட்டிடக்கலைஞரின் வரைபடத்தை பயன்படுத்தி பல வீடுகள் கட்டப்படுவது போல். + +**ஏன் வலைப் பயன்பாடுகளுக்கு வகுப்புக்கள் பயன்படுத்த வேண்டும்?** +- **அமைப்பு**: அனைத்து தொடர்புடைய செயல்பாடுகளும் ஒன்றாக குழுவாக ஏக்கப்படும் +- **மீண்டும் பயன்பாடு**: ஒரே பக்கத்தில் பல சேட்டுக்காட்டு உதாரணங்களை உருவாக்கலாம் +- **பராமரிப்பு**: குறிப்பிட்ட அம்சங்களை எளிதில் பிழை நீக்கவும் மாற்றவும் முடியும் +- **தொழில்துறை நிலை**: React, Vue, Angular போன்ற கட்டமைப்புகளில் இந்த முறை பயன்படுத்தப்படுகிறது + +இந்த நவீன, நன்கு கட்டமைந்த ஜாவாஸ்கிரிப்ட்டுடன் `app.js` உருவாக்கவும்: + +```javascript +// app.js - நவீன உரையாடல் செயலியில் உள்ள நுட்பங்கள் + +class ChatApp { + constructor() { + // நாம் மாற்ற வேண்டிய DOM உறுப்புகளின் குறிப்புகளைப் பெறுங்கள் + this.messages = document.getElementById("messages"); + this.form = document.getElementById("chatForm"); + this.input = document.getElementById("messageInput"); + this.sendButton = document.getElementById("sendBtn"); + + // உங்கள் பின் செருக் URL ஐ இங்கு அமைக்கவும் + this.BASE_URL = "http://localhost:5000"; // உங்கள் சூழலுக்கு இதை புதுப்பிக்கவும் + this.API_ENDPOINT = `${this.BASE_URL}/hello`; + + // உரையாடல் செயலி உருவாக்கப்படும்போது நிகழ்வு காதலர்களை அமைக்கவும் + this.initializeEventListeners(); + } + + initializeEventListeners() { + // படிவ சமர்ப்பிப்பை கேட்டு கொள்க (பயனர் அனுப்பு கிளிக் செய்த போது அல்லது Enter அழுத்திய போது) + this.form.addEventListener("submit", (e) => this.handleSubmit(e)); + + // உள்ளீட்டு ஃபீல்டில் Enter விசையையும் கேட்டு கொள்ளவும் (மேலும் நல்ல பயனர் அனுபவம்) + this.input.addEventListener("keypress", (e) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + this.handleSubmit(e); + } + }); + } + + async handleSubmit(event) { + event.preventDefault(); // பக்கம் மறுதளர அழுத்தத்தைத் தடுப்பதற்கு + + const messageText = this.input.value.trim(); + if (!messageText) return; // காலி செய்திகளை அனுப்ப வேண்டாம் + + // ஏதாவது நடைபெற்று வருகின்றது என்பதை பயனருக்கு தெரிவிக்கவும் + this.setLoading(true); + + // பயனர் செய்தியை உடனடியாய் உரையாடலில் சேர்க்கவும் (நம்பகமான UI) + this.appendMessage(messageText, "user"); + + // பயனர் அடுத்து ஒரு செய்தி தட்டச்சு செய்ய உள்ளீட்டு புலத்தை சுத்தம் செய்யவும் + this.input.value = ''; + + try { + // AI API ஐ அழைத்து பதிலுக்காக காத்திருக்கவும் + const reply = await this.callAPI(messageText); + + // AI பதிலை உரையாடலில் சேர்க்கவும் + this.appendMessage(reply, "assistant"); + } catch (error) { + console.error('API Error:', error); + this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error"); + } finally { + // வெற்றி அல்லது தோல்வியிலிருந்தும் இடைமுகத்தைக்கூடியதாக செயற்படுத்தவும் + this.setLoading(false); + } + } + + async callAPI(message) { + const response = await fetch(this.API_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ message }) + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + return data.response; + } + + appendMessage(text, role) { + const messageElement = document.createElement("div"); + messageElement.className = `message ${role}`; + messageElement.innerHTML = ` +
+ ${this.escapeHtml(text)} + ${new Date().toLocaleTimeString()} +
+ `; + + this.messages.appendChild(messageElement); + this.scrollToBottom(); + } + + escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + scrollToBottom() { + this.messages.scrollTop = this.messages.scrollHeight; + } + + setLoading(isLoading) { + this.sendButton.disabled = isLoading; + this.input.disabled = isLoading; + this.sendButton.textContent = isLoading ? "Sending..." : "Send"; + } +} -**app.js** +// பக்கம் ஏற்கனவே ஏற்றப்பட்ட காலத்தில் உரையாடல் செயலியை துவங்கவும் +document.addEventListener("DOMContentLoaded", () => { + new ChatApp(); +}); +``` -```js -// app.js +#### ஒவ்வொரு ஜாவாஸ்கிரிப்ட் கருதுகோளும் புரிந்து கொள்வது + +**ES6 வகுப்பு கட்டமைப்பு**: +```javascript +class ChatApp { + constructor() { + // நீங்கள் புதிய ChatApp உதாரணத்தை உருவாக்கும் போது இதை இயக்குகிறது + // உங்கள் உரையாடலுக்கான "அமைப்பு" செயல்பாட்டை போன்றது + } + + methodName() { + // முறைகள் என்பது வகுப்பிற்கு சொந்தமான செயல்பாடுகள் + // அவைகள் "this" ஐ பயன்படுத்தி வகுப்பு பண்புகளை அணுக முடியும் + } +} +``` -(function(){ - // 1. set up elements - const messages = document.getElementById("messages"); - const form = document.getElementById("form"); - const input = document.getElementById("input"); +**Async/Await முறை**: +```javascript +// பழைய வழி (callback அக்கடப்பு): +fetch(url) + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error(error)); + +// நவீன வழி (async/await): +try { + const response = await fetch(url); + const data = await response.json(); + console.log(data); +} catch (error) { + console.error(error); +} +``` - const BASE_URL = "change this"; - const API_ENDPOINT = `${BASE_URL}/hello`; +**நிகழ்வு சார்ந்த நிரலாக்கம்**: +ஏதாவது நடந்ததா என்பதை எப்பொழுதும் சரிபார்க்கிறதை தவிர நாங்கள் நிகழ்வுகளை "கேட்கின்றோம்": +```javascript +// படிவம் சமர்ப்பிக்கப்படும் போது, handleSubmit ஐ இயக்கவும் +this.form.addEventListener("submit", (e) => this.handleSubmit(e)); - // 2. create a function that talks to our backend - async function callApi(text) { - const response = await fetch(API_ENDPOINT, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ message: text }) - }); - let json = await response.json(); - return json.response; - } +// Enter விசை அழுத்தும்போதே, handleSubmit ஐ இயக்கவும் +this.input.addEventListener("keypress", (e) => { /* ... */ }); +``` - // 3. add response to our textarea - function appendMessage(text, role) { - const el = document.createElement("div"); - el.className = `message ${role}`; - el.innerHTML = text; - messages.appendChild(el); - } +**DOM மாற்றம்**: +```javascript +// புதிய பகுதிகளை உருவாக்கவும் +const messageElement = document.createElement("div"); - // 4. listen to submit events - form.addEventListener("submit", async(e) => { - e.preventDefault(); - // someone clicked the button in the form - - // get input - const text = input.value.trim(); +// அவற்றின் பண்புகளை மாற்றவும் +messageElement.className = "message user"; +messageElement.innerHTML = "Hello world!"; - appendMessage(text, "user") +// பக்கத்தில் சேர்க்கவும் +this.messages.appendChild(messageElement); +``` - // reset it - input.value = ''; +#### பாதுகாப்பும் சிறந்த நடைமுறைகளும் - const reply = await callApi(text); +**XSS தடுப்பு**: +```javascript +escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; // இது தானாக HTMLஐ எஸ்கேப் செய்கிறது + return div.innerHTML; +} +``` - // add to messages - appendMessage(reply, "assistant"); +**ஏன் இது முக்கியம்**: ஒரு பயனர் `` என்பதனை டைப் செய்தால், இந்த செயல்பாடு அதை குறியீடாக இயக்காமல் உரையாகக் காட்டும். - }) -})(); +**பிழை கையாளல்**: +```javascript +try { + const reply = await this.callAPI(messageText); + this.appendMessage(reply, "assistant"); +} catch (error) { + // செயலிக்கு பிளவுபடாமல் பயனர் நட்பு பிழையை காட்டு + this.appendMessage("Sorry, I'm having trouble...", "error"); +} ``` -குறியீட்டை பிரிவாகப் பார்ப்போம்: +**பயனர் அனுபவம் பரிசீலனை**: +- **நம்பகமான UI**: பயனர் தகவலை உடனே சேர்க்கவும், சேவையகம் பதிலை காத்திருக்க வேண்டாம் +- **பொதுவானநிலை**: பொத்தான்களை முடக்கியபடி "அனுப்புகிறது..." என காட்டவும் +- **தானாக வாட்டம்**: புதிய செய்திகள் தெரிந்திருக்கட்டும் +- **உள்ளீடு சரிபார்ப்பு**: காலியான செய்திகளை அனுப்ப வேண்டாம் +- **கீ போர்டு குறிப்புகள்**: Enter விசை செய்திகளை அனுப்பும் (உண்மையான சேட்டுக் செயலிகள் போல) -- 1) இங்கே, நாம் பின்னர் குறியீட்டில் குறிப்பிடப்படும் அனைத்து கூறுகளுக்கும் reference பெறுகிறோம். -- 2) இந்த பகுதியில், backend-ஐ அழைக்கும் `fetch` செயல்பாட்டை உருவாக்குகிறோம். -- 3) `appendMessage` பதில்களை மற்றும் பயனர் type செய்ததை சேர்க்க உதவுகிறது. -- 4) இங்கே, submit நிகழ்வை கேட்கிறோம், பின்னர் input field-ஐ படிக்கிறோம், பயனர் செய்த செய்தியை textarea-இல் வைக்கிறோம், API-ஐ அழைக்கிறோம், பதிலை textarea-இல் காட்டுகிறோம். +#### பயன்பாட்டு ஓட்டத்தை புரிந்துகொள்வது -அடுத்ததாக, styling-ஐ பார்ப்போம். உங்கள் விருப்பத்திற்கு ஏற்ப crazy ஆக மாற்றலாம், ஆனால் சில பரிந்துரைகள் இங்கே: +1. **பக்கம் ஏற்றப்பட்டது** → `DOMContentLoaded` நிகழ்வு நிகழ்கிறது → `new ChatApp()` உருவாக்கப்படுகிறது +2. **கான்ஸ்ட்ரக்ட்டர் இயங்குகிறது** → DOM கூறுகளை பெற்றுக்கொள்வது → நிகழ்வு நியமிப்புகளை அமைத்தல் +3. **பயனர் செய்தியை டைப் செய்கிறார்** → Enter அழுத்துதல் அல்லது அனுப்பும் பொத்தானை அழுத்தல் → `handleSubmit` இயங்குகிறது +4. **handleSubmit** → உள்ளீட்டை சரிபார்க்கிறது → பொதுவான நிலையை காட்டுகிறது → API-ஐ அழைக்கிறது +5. **API பதில் அளிக்கின்றது** → AI செய்தியை சேட்டுக்குள் சேர்க்கிறது → இடைமுகத்தை மீண்டும் ஆக்குகிறது +6. **அடுத்து செய்திக்கு தயார்** → பயனர் தொடர்ந்தும் சேட்டிங் செய்ய முடியும் -**styles.css** +இந்த கட்டமைப்பு விரிவாக்கக்கூடியது – செய்தி திருத்தம், கோப்பு பதிவேற்றங்கள் அல்லது பல உரையாடல் பரப்புகள் போன்ற அம்சங்களை இதனுடைய அடிப்படையை மறுபடியும் எழுதாமல் சேர்க்கலாம். + +### 🎯 கல்வி சரிபார்ப்பு: நவீன முன்னணி கட்டமைப்பு + +**கட்டமைப்புப் புரிதல்**: நீங்கள் நவீன ஜாவாஸ்கிரிப்ட் முறைகள் கொண்டு முழுமையான ஒரே பக்க பயன்பாட்டை உருவாக்கினீர்கள். இது தொழில்துறைநிலை முன்னணி மேம்பாட்டை குறிக்கிறது. + +**முக்கிய எண்ணங்கள் கற்றுக்கொண்டீர்கள்**: +- **ES6 வகுப்பு கட்டமைப்பு**: ஒழுங்கமைக்கப்பட்ட, பராமரிக்கக்கூடிய குறியீட்டு அமைப்பு +- **Async/Await முறைகள்**: நவீன அசிங்க்ரொனஸ் நிரலாக்கம் +- **நிகழ்வு சார்ந்த நிரலாக்கம்**: குரல் வலுவான பயனர் இடைமுக வடிவமைப்பு +- **பாதுகாப்பு சிறந்த நடைமுறைகள்**: XSS தடுப்பு மற்றும் உள்ளீடு சரிபார்ப்பு + +**தொழில்துறை தொடர்பு**: நீங்கள் கற்றுக் கொண்டுள்ள கட்டமைப்புகள் (வகுப்பு அடிப்படையிலான கட்டமைப்பு, அசிங்க் செயலாக்கங்கள், DOM மாற்றங்கள்) React, Vue, Angular போன்ற நவீன கட்டமைப்புகளின் அடித்தளமாகும். நீங்கள் தயாரிப்பு பயன்பாடுகளில் பயன்படுத்தப்படும் அதே கட்டமைப்பு சிந்தனை மூலம் உருவாக்கி வருகிறீர்கள். + +**பரிசீலனை கேள்வி**: இந்த சேட் செயலியை பல உரையாடல்கள் அல்லது பயனர் அங்கீகாரம் கையாள எப்படி வளர்க்கிறீர்கள்? தேவையான கட்டமைப்பு மாற்றங்கள் மற்றும் வகுப்பு அமைப்பு எவ்வாறு மாறும் என்பதை பரிசீலியுங்கள். + +### உங்கள் சேட் இடைமுகத்தை அலங்கரிப்பது + +இப்போது CSS மூலம் நவீன, கண்ணுக்கு அழகான சேட் இடைமுகத்தை உருவாக்குவோம். சிறந்த அலங்காரங்கள் உங்கள் பயன்பாட்டை தொழில்முறைபடுத்தி, முழுமையான பயனர் அனுபவத்தை மேம்படுத்தும். நாங்கள் Flexbox, CSS Grid மற்றும் தனிப்பயன் பண்புகளை பயன்படுத்தி பதிலளிக்கும், அணுகல் சாத்தியமான வடிவமைப்பை உருவாக்குவோம். + +இந்த விரிவான CSS ஐ கொண்ட `styles.css` உருவாக்கவும்: + +```css +/* styles.css - Modern chat interface styling */ + +:root { + --primary-color: #2563eb; + --secondary-color: #f1f5f9; + --user-color: #3b82f6; + --assistant-color: #6b7280; + --error-color: #ef4444; + --text-primary: #1e293b; + --text-secondary: #64748b; + --border-radius: 12px; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.chat-container { + width: 100%; + max-width: 800px; + height: 600px; + background: white; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.chat-header { + background: var(--primary-color); + color: white; + padding: 20px; + text-align: center; +} + +.chat-header h1 { + font-size: 1.5rem; + margin-bottom: 5px; +} + +.chat-header p { + opacity: 0.9; + font-size: 0.9rem; +} + +.chat-messages { + flex: 1; + padding: 20px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 15px; + background: var(--secondary-color); +} -``` .message { - background: #222; - box-shadow: 0 0 0 10px orange; - padding: 10px: - margin: 5px; + display: flex; + max-width: 80%; + animation: slideIn 0.3s ease-out; } .message.user { - background: blue; + align-self: flex-end; +} + +.message.user .message-content { + background: var(--user-color); + color: white; + border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius); } .message.assistant { - background: grey; -} + align-self: flex-start; +} + +.message.assistant .message-content { + background: white; + color: var(--text-primary); + border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px; + border: 1px solid #e2e8f0; +} + +.message.error .message-content { + background: var(--error-color); + color: white; + border-radius: var(--border-radius); +} + +.message-content { + padding: 12px 16px; + box-shadow: var(--shadow); + position: relative; +} + +.message-text { + display: block; + line-height: 1.5; + word-wrap: break-word; +} + +.message-time { + display: block; + font-size: 0.75rem; + opacity: 0.7; + margin-top: 5px; +} + +.chat-form { + padding: 20px; + border-top: 1px solid #e2e8f0; + background: white; +} + +.input-group { + display: flex; + gap: 10px; + align-items: center; +} + +#messageInput { + flex: 1; + padding: 12px 16px; + border: 2px solid #e2e8f0; + border-radius: var(--border-radius); + font-size: 1rem; + outline: none; + transition: border-color 0.2s ease; +} + +#messageInput:focus { + border-color: var(--primary-color); +} + +#messageInput:disabled { + background: #f8fafc; + opacity: 0.6; + cursor: not-allowed; +} + +#sendBtn { + padding: 12px 24px; + background: var(--primary-color); + color: white; + border: none; + border-radius: var(--border-radius); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s ease; + min-width: 80px; +} + +#sendBtn:hover:not(:disabled) { + background: #1d4ed8; +} + +#sendBtn:disabled { + background: #94a3b8; + cursor: not-allowed; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive design for mobile devices */ +@media (max-width: 768px) { + body { + padding: 10px; + } + + .chat-container { + height: calc(100vh - 20px); + border-radius: 8px; + } + + .message { + max-width: 90%; + } + + .input-group { + flex-direction: column; + gap: 10px; + } + + #messageInput { + width: 100%; + } + + #sendBtn { + width: 100%; + } +} + +/* Accessibility improvements */ +@media (prefers-reduced-motion: reduce) { + .message { + animation: none; + } + + * { + transition: none !important; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .chat-container { + background: #1e293b; + color: #f1f5f9; + } + + .chat-messages { + background: #0f172a; + } + + .message.assistant .message-content { + background: #334155; + color: #f1f5f9; + border-color: #475569; + } + + .chat-form { + background: #1e293b; + border-color: #475569; + } + + #messageInput { + background: #334155; + color: #f1f5f9; + border-color: #475569; + } +} +``` + +**CSS கட்டமைப்பைப் புரிந்து கொள்வது:** +- **உபயோகிக்கும்** CSS தனிப்பயன் பண்புகள் (மாறிலிகள்) ஒருமுக கிராஃபிக்கிற்கும் பராமரிப்பிற்கும் +- **நிரூபிக்கிறது** பதிலளிக்கும் கட்டமைப்பு மற்றும் சரியான அமைப்புக்காக Flexbox +- **உள்ளடக்கம்** அசாதாரணமான செய்தி தோற்ற ஊசலாட்டங்கள் வேறு கவனச்சிதறலின்றி +- **கொடுக்கிறது** பயனர் செய்திகள், AI பதில்கள் மற்றும் பிழை நிலைகளுக்கு விசுவல் வேறுபாடு +- **ஆதரிக்கிறது** டெஸ்க்டாப் மற்றும் மொபைல் சாதனங்களிலும் செயல்படும் +- **பரிசீலிக்கிறது** குறைந்த இயக்க விருப்பங்கள் மற்றும் சரியான வெறுமதி விகிதங்களுடன் அணுகல்திறன் +- **கொடுக்கிறது** பயனர் அமைப்பின் படி இருண்ட நிலையும் ஆதரிக்கிறது + +### உங்கள் பின்னணி URL ஐ அமைத்தல் + +இறுதி படி உங்கள் ஜாவாஸ்கிரிப்ட்டிலுள்ள `BASE_URL`-ஐ உங்கள் பின்புற சர்வருக்கு பொருந்துமாறு புதுப்பிப்பது: + +```javascript +// உள்ளூர் வளர்ச்சிக்காக +this.BASE_URL = "http://localhost:5000"; + +// GitHub Codespaces க்காக (உங்கள் நிஜ URL ஐ மாற்றவும்) +this.BASE_URL = "https://your-codespace-name-5000.app.github.dev"; +``` + +**உங்கள் பின்புற URL ஐ நிர்ணயம் செய்வது:** +- **உள்நாட்டு மேம்பாடு**: முன்னணி மற்றும் பின்புறம் இயங்கும் போது `http://localhost:5000` பயன்படுத்தவும் +- **Codespaces**: போர்ட் 5000 ஐ பொது அணுகம Scope பின் போர்டு பீர்களில் பின்புற URL காணலாம் +- **தயாரிப்பு**: ஹோஸ்டிங் சேவையில் துவங்கும்போது உங்கள் உண்மையான டொமைன் மேலோட்டமாக மாற்றவும் + +> 💡 **சோதனை குறிப்பு**: உங்களது பின்புறத்தை நேரடியாக உலாவியில் அடைய root URL-ஐ செல்லத் தயார். உங்கள் FastAPI சேவையகம் வழங்கும் வணக்கம் செய்தியைக் காணலாம். + + + +## சோதனை மற்றும் வெளியீடு + +இப்போது நீங்கள் முன்னணி மற்றும் பின்புற கூறுகளையும் கட்டியுள்ளீர்கள், அனைத்து பகுதிகளும் ஒருங்கிணைக்க இயலும் என்று சோதித்து, உங்கள் சேட் உதவியாளரை மற்றவர்களுடன் பகிர வரும் வெளியீட்டு விருப்பைகளை ஆராயலாம். + +### உள்ளூராட்சி சோதனை பணிச்செயல் + +உங்கள் முழுமையான பயன்பாட்டை சோதிப்பதற்கான படிகளை பின்பற்றவும்: + +```mermaid +graph TD + A[பின்னணி சேவையகத்தை துவக்கு] --> B[சூழல் மாறிலிகளை அமைக்கு] + B --> C[API இறுதிப்புள்ளிகளை சோதனை செய்] + C --> D[முன்காட்சியை உலாவியில் திற] + D --> E[செருகி செயல்பாட்டை சோதனை செய்] + E --> F[யாரும் பிரச்சனைகள் இருந்தால் காண்] +``` +**படி படியாக சோதனை செயல்:** + +1. **உங்கள் பின்புற சர்வரைக் கொடுக்கவும்**: + ```bash + cd backend + source venv/bin/activate # அல்லது Windows இல் venv\Scripts\activate + python api.py + ``` + +2. **API இயங்குகிறதா என்று உறுதி செய்யவும்**: + - உலாவியில் `http://localhost:5000` திறக்கவும் + - உங்கள் FastAPI சர்வர் வழங்கும் வரவேற்பு செய்தியை காண வேண்டும் + +3. **முன்னணியை திறக்கவும்**: + - உங்கள் முன்னணி அடைவுக்கு செல்லவும் + - உலாவியில் `index.html` திறக்கவும் + - அல்லது மேம்பாட்டிற்கு VS Code-இன் Live Server விரிவாக்கத்தை பயன்படுத்தவும் + +4. **சேட் செயல்பாடை சோதிக்கவும்**: + - உள்ளீடு புலத்தில் செய்தி தட்டச்சு செய்யவும் + - "அனுப்பு" கிளிக் செய்யவும் அல்லது Enter அழுத்தவும் + - AI சரியாக பதிலளிக்கிறதா என்பதை சரி பாருங்கள் + - உலா Developer Console-ல் எந்த JS பிழைகள் உள்ளதா நோக்கவும் + +### பொதுவான பிரச்சினைகள் தீர்வு + +| பிரச்சனை | அறிகுறிகள் | தீர்வு | +|---------|----------|----------| +| **CORS பிழை** | முன்னணி பின்புறத்திற்கு செல்ல முடியாது | FastAPI CORSMiddleware சரியாக அமைக்கப்பட்டது என உறுதி செய்யவும் | +| **API விசை பிழை** | 401 அனுமதியற்ற பதில்கள் | `GITHUB_TOKEN` சுற்றுச்சூழல் மாறிலியை சரிபார்க்கவும் | +| **இணைப்பு மறுக்கப்பட்டது** | முன்னணி வலைப்பின்னலில் பிழைகள் | பின்புற URL சரி மற்றும் Flask சர்வர் இயங்குகிறது என்பதை உறுதி செய்யவும் | +| **AI பதில் இல்லை** | காலியான அல்லது பிழை பதில்கள் | API க்கான அங்கு பயன்பாடு மற்றும் அங்கீகாரம் பிரச்சனைகளைக் கண்டறிய பின்புற லோக்கள் பரிசீலனை செய்யவும் | + +**பொதுவான பிழைத் திருத்த படிகள்:** +- **உரல்** உலா Developer Tools Console-ல் ஜாவாஸ்கிரிப்ட் பிழைகளை பரிசீலிக்கவும் +- **சரி பாருங்கள்** நெட்வொர்க் முனை API கோரிக்கைகள் மற்றும் பதில்கள் வெற்றிகரமாகக்காணுகின்றன என்பதை +- **மேலோட்டம் விடவும்** பைதான் பிழைகள் மற்றும் API பிரச்சனைகள் பின்புற டெர்மினலில் உள்ளதா என்று +- **உறுதி செய்யவும்** சுற்றுச்சூழல் மாறிலிகள் சரியான முறையில் ஏற்றப்பட்டுள்ளன மற்றும் அணுகக்கூடியவை + +## 📈 உங்கள் AI பயன்பாட்டு மேம்பாட்டு சிறந்த காலக் கட்டம் + +```mermaid +timeline + title முழுமையான AI செயலி உருவாக்க பயணம் + + section AI அடித்தளம் + உருவாக்கும் AI ஐப் புரிந்துகொள்ளுதல் + : வடிவமைப்பு பாராமேட்டர் உணர்தல் + : AI அளவுருக்களை நான் அறிதல் + : ப்ராம்ட் பொறியியல் தொழில்நுட்பங்கள் கற்றுக்கொள்ளுதல் + + GitHub மாதிரிகள் ஒருங்கிணைத்தல் + : AI சேவை தளங்களை நடைமுறைப்படுத்தல் + : பாதுகாப்பான அங்கீகாரம் கையாளுதல் + : மாதிரி அளவுருக்களை மேம்படுத்தல் + + section பின்தள மேம்பாடு + Python API கட்டமைப்பு + : FastAPI செயலிகள் கட்டுதல் + : அசிங்க் செயல்பாடுகளை செயல்படுத்தல் + : பாதுகாப்பான இறுதிப் புள்ளிகளை உருவாக்கல் + + AI சேவை ஒருங்கிணைத்தல் + : வெளி AI API களை இணைத்தல் + : விகித வரம்பை கையாளுதல் + : பிழை எல்லைகளை செயல்படுத்தல் + + section முன்‌தளத்தில் தேர்ச்சி + நவீன JavaScript வடிவமைப்புகள் + : ES6 வகுப்பு கட்டமைப்பில் தேர்ச்சி பெற்றல் + : அசிங்க்/அவைட் தொழில்முறைகளை செயல்படுத்தல் + : பொறுப்பு மிக்க இடைமுகங்களை கட்டுதல் + + நேரடி பயனர் அனுபவம் + : இயக்கமுள்ள உரையாட்டுக் இடைமுகங்களை உருவாக்கல் + : எடுக்கும் நிலைகளை கையாளுதல் + : பயனர் பரஸ்பரங்களை மேம்படுத்தல் + + section தயாரிப்பு தயார் நிலை + பாதுகாப்பு & செயல்திறன் + : பாதுகாப்பான டோக்கன் மேலாண்மையை செயல்படுத்தல் + : XSS கோளாறுகளை தடுப்பதற்கான முயற்சி + : API செயல்திறனை மேம்படுத்தல் + + தொழிலைத்திறன் வாய்ந்த நகர்த்தல் + : விரிவாக்கக்கூடிய கட்டமைப்புகளை உருவாக்கல் + : பராமரிக்கக் கூடிய குறியீட்டை உருவாக்கல் + : மேம்பாட்டுத் தொகுப்புகளை ஆவணப்படுத்தல் ``` +**🎓 பட்டப்படிப்பு முன்னணி**: நீங்கள் நவீன AI உதவியாளர்களை இயக்கும் அதே தொழில்நுட்பங்களுடன் மற்றும் கட்டமைப்பு முறைகளுடன் முழுமையான AI இயக்கப்பட்ட பயன்பாட்டை வெற்றிகரமாக கட்டினீர்கள். இந்தத் திறமைகள் பாரம்பரிய வலை மேம்பாட்டுக்கும் நவீன AI ஒருங்கிணைப்புக்கும் மைய இடத்தில் உள்ளன. + +**🔄 அடுத்த நிலை திறன்கள்**: +- முன்னேற்ற AI கட்டமைப்புகள் (LangChain, LangGraph) ஆராய தயாராகவும் +- பன்முக AI பயன்பாடுகள் (உரை, படம், குரல்) உருவாக்க உருவாகவும் +- வெக்டர் டேட்டாபேஸ்கள் மற்றும் மீட்டெடுக்கும் முறைமைகள் செயல்படுத்த தயாராகவும் +- மெஷின் கற்றல் மற்றும் AI மாதிரி நுணுக்கமயமாக்கல் அடித்தளம் அமைக்கவும் + +## GitHub Copilot முகவர் சவால் 🚀 -இந்த மூன்று வகுப்புகளுடன், assistant அல்லது பயனர் மூலம் வரும் செய்திகளை வெவ்வேறு முறையில் வடிவமைக்கலாம். உங்களுக்கு ஊக்கமளிக்க, `solution/frontend/styles.css` கோப்பகத்தைப் பாருங்கள். +Agent முறையைப் பயன்படுத்தி பின்வரும் சவாலை நிறைவேற்றவும்: -### Base Url மாற்றம் +**விளக்கம்:** உரையாடல் வரலாறு மற்றும் செய்தி நிலைத்தன்மையைச் சேர்க்கும் மூலமாக சேட் உதவியாளரை மேம்படுத்தவும். இது சேட் செயலிகளில் நிலையை நிர்வகிப்பது மற்றும் சிறந்த பயனர் அனுபவத்திற்கு தரவுத்தள சேமிப்பை ஏற்கனவே கையாள உதவும். -இங்கே நாம் அமைக்காத ஒரு விஷயம் `BASE_URL` ஆகும், backend தொடங்கும் வரை இது தெரியாது. அதை அமைக்க: +**கோரிக்கை:** உரையாடல் வரலாறை அமர்த்தி அமர்ச்சி இடைவெளிகளுக்கு இடையில் நிலைத்திருக்க ஏற்படுத்தவும். உள்ளூர் நினைவகத்தில் சேட் செய்திகள் சேமிப்பு செயல் சேர்க்கவும், பக்கம் ஏற்றும்போது உரையாடல் வரலாற்றை காண்பிக்கவும் மற்றும் "வரலாறு அழிக்க" பொத்தானை சேர்க்கவும். மேலும் தட்டச்சு கூறுகள் மற்றும் செய்தி நேர சுவடுகளைச் செயல்படுத்தி உரையாடல் அனுபவத்தை மீள்பார்க்கக்கூடியதாக்கவும். -- API-ஐ உள்ளூர் இயக்கினால், அது `http://localhost:5000` போன்றதாக இருக்க வேண்டும். -- Codespaces-ல் இயக்கினால், அது "[name]app.github.dev" போன்றதாக இருக்கும். +மேலும் [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) பற்றி அறியவும். -## பணிக்கட்டளை +## பணிகள்: உங்கள் தனிப்பட்ட AI உதவியாளரை உருவாக்குக -உங்கள் சொந்த *project* கோப்பகத்தை உருவாக்கி, இதுபோல் உள்ளடக்கத்தை அமைக்கவும்: +இப்போது உங்கள் சொந்த AI உதவியாளர் அமலாக்கத்தை உருவாக்குங்கள். உருவுருவாக்கக் குறியீட்டை மறு உருவாக்காமல், இந்த வாய்ப்பு பார்வைகளைப் பயன்படுத்தி உங்கள் விருப்பங்கள் மற்றும் பயன்பாட்டு நிகழ்வுகளுக்கு பிரதிபலிக்கும் ஒன்றைச் செய்யும். + +### திட்ட தேவைகள் + +தயாராகவும் ஒழுங்கமைக்கப்பட்ட கட்டமைப்புடன் உங்கள் திட்டத்தை தொடங்குவோம்: ```text -project/ - frontend/ - index.html - app.js - styles.css - backend/ - ... +my-ai-assistant/ +├── backend/ +│ ├── api.py # Your FastAPI server +│ ├── llm.py # AI integration functions +│ ├── .env # Your secrets (keep this safe!) +│ └── requirements.txt # Python dependencies +├── frontend/ +│ ├── index.html # Your chat interface +│ ├── app.js # The JavaScript magic +│ └── styles.css # Make it look amazing +└── README.md # Tell the world about your creation ``` -மேலே கூறியவற்றிலிருந்து உள்ளடக்கத்தை நகலெடுக்கவும், ஆனால் உங்கள் விருப்பத்திற்கு ஏற்ப தனிப்பயனாக்கவும். +### முக்கிய அமலாக்க பணிகள் + +**பின்புற மேம்பாடு:** +- எங்கள் FastAPI குறியீட்டை எடுத்து உங்கள் சொந்தமாக மாற்றவும் +- தனித்த AI வேட்பாடைப் படைக்கவும் – உதவிகரமான சமையல் உதவியாளர், படைப்பாற்றல் எழுதுதல் கூட்டாளி அல்லது கல்வி நண்பன் ஆகலாம் +- பிழை கையாளல் சீரானதும் உறுதிப்படுத்தவும், உங்கள் செயலி தவறு ஏற்பட்டால் சிதறாது இருக்க +- உங்கள் API எப்படித் தானென விளக்கும் தெளிவான ஆவணங்களை எழுதவும் + +**முன்னணி மேம்பாடு:** +- அழகான மற்றும் பொருந்தக்கூடிய சேட் இடைமுகத்தை கட்டுங்கள் +- புரவலர்களுக்கு காட்சிப்படுத்த பெருமையாக இருக்கும் நவீன, சுத்தமான ஜாவாஸ்கிரிப்டை எழுதவும் +- உங்கள் AI நபர்மேடை பிரதிபலிக்கும் தனிப்பயன் அலங்காரத்தை வடிவமைக்கவும் – மகிழ்ச்சியான மற்றும் வண்ணமயமாகவா? சுத்தமான குறைந்தபட்சமாகவா? அது முழுக்க உங்களுக்கே! +- அது மொபைல்களிலும் கணினிகளிலும் சிறப்பாக இயங்குவதை உறுதி செய்யவும் + +**தனிப்பட்ட தேவைகள்:** +- உங்கள் AI உதவியாளருக்கு தனித்துவமான பெயர் மற்றும் நபர்மேடையைக் தேர்வு செய்யவும் – உங்கள் விருப்பங்கள் அல்லது தீர்க்க விரும்பும் பிரச்சனைகளை பிரதிபலிப்பதாக இருக்கலாம் +- உதவியாளரின் ஆவியுடன் பொருந்த தினசரி வடிவமைப்பை தனிப்பயனாக்கவும் +- மக்கள் உரையாடத் தொடங்க விரும்பும் ஒரு மனம் மகிழ்ச்சியான வரவேற்பு செய்திகள் எழுதவும் +- வேறுபட்ட கேள்விகளுடன் உங்கள் உதவியாளரை சோதித்து அது எப்படி பதிலளிக்கிறதோ பாருங்கள் + +### மேம்படுத்தல் யோசனைகள் (விருப்பமானவை) + +நீங்கள் உங்கள் திட்டத்தை அடுத்த கட்டத்துக்கு கொண்டு செல்வதா? இங்கே சில பொழுதுபோக்கான யோசனைகள்: + +| அம்சம் | விளக்கம் | நீங்கள் பயிற்சி பெறப்போகும் திறன்கள் | +|---------|-------------|------------------------| +| **செய்தி வரலாறு** | பக்கம் புதுப்பிக்கப்பட்டபோது கூட உரையாடல் நினைவிருக்க | localStorage, JSON கையாளல் | +| **தட்டச்சு குறிப்புகள்** | பதில்களை காத்திருக்கும்போது "AI தட்டச்சு செய்கிறது..." காட்டவும் | CSS ஊசலாட்டங்கள், async நிரலாக்கம் | +| **செய்தி நேர சுவடுகள்** | ஒவ்வொரு செய்தியும் எப்போது அனுப்பப்பட்டது காட்டவும் | தேதி/நேர வடிவமைப்பு, UX வடிவமைப்பு | +| **சேட் ஏற்றுமதி** | பயனர்கள் உரையாடலை பதிவிறக்கலாம் | கோப்பு கையாளல், தரவு ஏற்றுமதி | +| **தீம் மாற்று** | வெளிர்/அন্ধকার நிலை மாற்றம் | CSS மாறிலிகள், பயனர் விருப்பங்கள் | +| **குரல் உள்ளீடு** | பேச்சை உரை into மாற்றும் செயல்பாடு | வலை API கள், அணுகல் திறன் | + +### சோதனை மற்றும் ஆவணப்படுத்தல் + +**தர உறுதி:** +- உங்கள் செயலியை பலவித உள்ளீடுகளுடன் மற்றும் குறுக்குவழி வழக்குகளுடன் சோதிக்கவும் +- பதிலளிக்கும் வடிவமைப்பு வெவ்வேறு திரை அளவுகளிலும் செயல்படுவதை உறுதி செய்க +- விசை போட்டை வழிசெயல் மற்றும் ஸ்க்ரீன் ரீடர்கள் கொண்டு அணுகுதற்கான பொருத்தத்தைக் கண்டு பிடிக்கவும் +- HTML மற்றும் CSS உரிமைத்திற்கான தரவுக்கு சரிபார்க்கவும் + +**ஆவணப்படுத்தல் தேவைகள்:** +- உங்கள் திட்டத்தை மற்றும் அதனை இயக்குவதற்கான வழிமுறைகளை விளக்கும் README.md எழுதவும் +- செயல்பாட்டில் உங்கள் சேட் இடைமுகத்தின் ஸ்கிரீன்சாட்களைச் சேர்க்கவும் +- நீங்கள் சேர்த்த உள்ள தனித்துவ அம்சங்கள் மற்றும் தனிப்பயனாக்கல்களை ஆவணப்படுத்தவும் +- மற்ற ப்ரவலர்களுக்கான தெளிவான அமைப்பு வழிமுறைகளை வழங்கவும் + +### சமர்ப்பிப்பு வழிகாட்டுதல்கள் + +**திட்ட ஒப்படைகள்:** +1. அனைத்து மூலக் கோப்புகளுடன் முழுநிலைத் திட்ட அடைவு +2. README.md - திட்ட விளக்கம் மற்றும் அமைப்புத்தெரிவுகள் +3. உங்கள் சேட் உதவியாளரை செயல்பாட்டில் காட்டும் ஸ்கிரீன்ஷாட்கள் +4. நீங்கள் கற்றுக்கொண்டது மற்றும் எதிர்கொள்ள வேண்டிய சவால்களை விரிவாக வெளிப்படுத்தல் + +**மதிப்பீட்டு அளவுருக்கள்:** +- **செயல்பாடு**: சேட் உதவியாளர் எதிர்பார்க்கப்படுவதுபோல் செயல்படுகிறதா? +- **குறியீட்டு தரம்**: குறியீடு நன்கு ஒழுங்குபடுத்தப்பட்டதா, கருத்துடைந்தது, பராமரிப்புக்கு ஏற்றதா? +- **வடிவமைப்பு**: இடைமுகம் கண்ணுக்கு இனிமையானதும் பயனர் இடைவாடல் மிகச்சிரமமற்றதுமா? +- **படைப்பாற்றல்**: உங்கள் செயல்பாடு எவ்வளவு தனித்துவமானது மற்றும் தனிப்பட்டது? +- **ஆவணப்படுத்தல்**: அமைப்பு வழிமுறைகள் தெளிவானவையாகவும் முழுமையாக இருக்கின்றனவா? + +> 💡 **வெற்றி குறிப்புக்கள்**: முதலில் அடிப்படைக் தேவைகளை நிறைவேற்றுங்கள், பின்னர் அனைத்து செயல்பாடும் வேலை செய்தபின் மேம்படுத்துக. உயர்தர மைய செயல்பாட்டைக் குறித்து கவனம் செலுத்தி பின்னர் பரிணாம அம்சங்களைச் சேர்க்கவும். ## தீர்வு -[தீர்வு](./solution/README.md) +[Solution](./solution/README.md) + +## கூடுதல் சவால்கள் -## கூடுதல் +உங்கள் AI உதவியாளரை அடுத்த கட்டத்திற்கு எடுத்துச் செல்ல தயாரா? AI ஒருங்கிணைப்பு மற்றும் வலை மேம்பாட்டில் உங்கள் அறிவை ஆழமாக்கும் இந்த மேம்பட்ட சவால்களை முயற்சிக்கவும். -AI Assistant-இன் தன்மையை மாற்ற முயற்சிக்கவும். +### நபர்மேடை தனிப்பயன்பாடு -### Python-க்கு +உங்கள் AI உதவியாளருக்கு தனித்துவமான நபர்மேடையை நீங்கள் கொடுத்தபோது உண்மையான மாயாஜாலம் நிகழ்கிறது.வித்தியாசமான ஸிஸ்டம் ப்ராம்ப்ப்ட்களைத் தயார் செய்து, சிறப்பு உதவியாளர்களை உருவாக்க முயற்சிக்கவும்: -*api.py* இல் `call_llm` ஐ அழைக்கும் போது, இரண்டாவது argument-ஐ உங்கள் விருப்பத்திற்கு மாற்றலாம், உதாரணமாக: +**தொழில்முறை உதவியாளர் எடுத்துக்காட்டு:** +```python +call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.") +``` + +**படைப்பாற்றல் எழுத்தாளர் உதவியாளர் எடுத்துக்காட்டு:** +```python +call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.") +``` +**தொழில்நுட்ப வழிகாட்டி எடுத்துக்காட்டு:** ```python -call_llm(message, "You are Captain Picard") +call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.") ``` -### Frontend -CSS மற்றும் உரையை உங்கள் விருப்பத்திற்கு மாற்றவும், எனவே *index.html* மற்றும் *styles.css* இல் மாற்றங்களைச் செய்யவும். +### முன்னணி மேம்பாடுகள் + +இந்த கண்ணோட்ட மற்றும் செயல்பாட்டு மேம்பாடுகளுடன் உங்கள் சேட் இடைமுகத்தை மாற்றவும்: + +**மேம்பட்ட CSS அம்சங்கள்:** +- செய்தி ஊசலாட்டம் மற்றும் மாற்றங்களுக்கு மென்மையான நடத்தை சேர்க்கவும் +- CSS வடிவங்களும் கலந்தோல்களும் கொண்ட தனிப்பயன் சேட் பபிள் வடிவமைப்பைச் சேர்க்கவும் +- AI "சிந்தித்தல்" போது தட்டச்சு கூறு ஊசலாட்டத்தை உருவாக்கவும் +- எமோஜி எதிர்வினைகள் அல்லது செய்தி மதிப்பீட்டு முறையை வடிவமைக்கவும் + +**ஜாவாஸ்கிரிப்ட் மேம்பாடுகள்:** +- விசைகோட்டுகள் சேர்க்கவும் (Send க்காக Ctrl+Enter, உள்ளீட்டை அழிக்க Escape) +- செய்தி தேடல் மற்றும் வடிகட்டல் செயல்பாட்டை செயல்படுத்தவும் +- உரையாடல் ஏற்றுமதி அம்சத்தைச் (உரை அல்லது JSON ஆக பதிவிறக்க) உருவாக்கவும் +- செய்தி இழப்பைத் தடுக்கும் வகையில் உள்ளூர் நினைவகத் தானாகச் சேமிப்பையும் வழங்கவும் + +### மேம்பட்ட AI ஒருங்கிணைப்பு + +**பல AI நபர்மேடைகள்:** +- வெவ்வேறு AI நபர்மேடைகளுக்கிடையே மாற்றுவதற்கு drop-down பட்டியலை உருவாக்கவும் +- பயனர் விருப்பமான நபர்மேடையை localStorage-ல் சேமிக்கவும் +- உரையாடல் ஓட்டத்தை பராமரிக்கும் சூழல் மாற்றங்களை செயல்படுத்தவும் + +**புலமைமிக்க பதில் அம்சங்கள்:** +- உரையாடல் சூழல் விழிப்புணர்வு (AI முன்னைய செய்திகள் நினைவுகூர்தல்) சேர்க்கவும் +- உரையாடல் தலைப்பின் அடிப்படையில் **சுயமாக பரிந்துரைகளை** அமல்படுத்தவும் +- பொதுவான கேள்விகளுக்கான **விரைவு பதில் பொத்தான்களை உருவாக்கவும்** + +> 🎯 **கற்றல் இலக்கு**: இந்த கூடுதல் சவால்கள் உங்களுக்கு நவீன வலை மேம்பாட்டு மாதிரிகள் மற்றும் உற்பத்தி பயன்பாடுகளில் பயன்படுத்தப்படும் ஏஐ ஒருங்கிணைப்பு தொழில்நுட்பங்களை புரிந்து கொள்ள உதவுகின்றன. + +## சுருக்கமும் அடுத்த படிகளும் + +வாழ்த்துக்கள்! நீங்கள் வெற்றிகரமாக தொடக்கம் முதல் முழுமையாக ஏஐ செயல்படுத்தப்பட்ட உரையாடல் உதவியாளரை கட்டியுள்ளீர்கள். இந்த திட்டம் உங்களுக்கு நவீன வலை மேம்பாட்டு தொழில்நுட்பங்கள் மற்றும் ஏஐ ஒருங்கிணைப்பு தொடர்பான நேரடி அனுபவத்தைக் கொடுத்துள்ளது – இது இன்றைய தொழில்நுட்ப துறையில் நாள்மணி மதிப்பிடப்படுகிறது. + +### நீங்கள் அடைந்த செயல்திறன் + +இந்த பாடம் முழுவதும், பல முக்கிய தொழில்நுட்பங்கள் மற்றும் கொள்கைகளை நீங்கள் சிறந்து கற்றுக்கொண்டுள்ளீர்கள்: + +**பின்புற வளர்ச்சி:** +- ஏஐ செயல்பாட்டிற்காக GitHub Models API-யுடன் **இணைப்பு செய்தல்** +- சரியான பிழை கையாளலை கொண்ட Flask மூலம் RESTful API-யை **கட்டமைத்தல்** +- சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்தி பாதுகாப்பான அங்கீகாரத்தை **வழங்குதல்** +- முன்னணி மற்றும் பின்புறத்துக்கு இடையில் கோர்ஸை **அமைத்தல்** + +**முன்னணி வளர்ச்சி:** +- அர்த்தமுள்ள HTML பயன்படுத்தி பதிலளிக்கும் உரையாடல் இடைமுகத்தை **உருவாக்குதல்** +- async/await மற்றும் வகுப்பு அடிப்படையிலான கட்டமைப்புடன் நவீன JavaScript-ஐ **நிகழ்த்துதல்** +- CSS Grid, Flexbox மற்றும் அனிமேஷன்களுடன் ஈர்க்கக்கூடிய பயனர் இடைமுகத்தை **வடிவமைத்தல்** +- அணுகல் வசதிகள் மற்றும் பதிலளிக்கும் வடிவமைப்பு கொள்கைகளை **சேர்த்தல்** + +**முழுமையான ஒருங்கிணைப்பு:** +- HTTP API அழைப்புகளின் மூலம் முன்னணி மற்றும் பின்புறத்தை **இணைத்தல்** +- நேரடி பயனர் தொடர்புகள் மற்றும் அசிங்கிரோனஸ் தரவு ஓட்டத்தை **கையாண்டல்** +- முழு செயலியில் பிழை கையாளுதல் மற்றும் பயனர் கருத்தை **உருவாக்குதல்** +- பயனர் உள்ளீட்டிலிருந்து ஏஐ பதிலளிப்பவரை முழுமையாக செயலியை **சோதித்தல்** -## சுருக்கம் +### முக்கிய கற்றல் முடிவுகள் -சிறந்தது, AI-யை பயன்படுத்தி ஒரு தனிப்பட்ட Assistant உருவாக்குவது எப்படி scratch-இல் இருந்து கற்றுக்கொண்டீர்கள். GitHub Models, Python backend மற்றும் HTML, CSS மற்றும் JavaScript frontend-ஐ பயன்படுத்தி இதை செய்தோம். +```mermaid +mindmap + root((AI Chat App Skills)) + API Integration + Authentication + Error Handling + Async Programming + Web Development + HTML5 Semantics + Modern CSS + ES6+ JavaScript + User Experience + போர்த்தியான வடிவமைப்பு + அணுகல் ஏற்பாடு + நேரடி மாறுதல் + AI Understanding + Prompt Engineering + Model Parameters + Conversation Flow +``` +இந்தத் திட்டம் உங்களுக்கு ஏஐ இயக்கிய பயன்பாடுகளை கட்டியெழுப்புவதற்கான அடித்தளங்களை அறிமுகம் செய்துள்ளது, இது வலை வளர்ச்சியின் எதிர்காலத்தை பிரதிபலிக்கிறது. நீங்கள் எப்போது ஆன்மீகமிக்க மற்றும் பதிலளிக்கும் பயனர் அனுபவங்களை உருவாக்குவது எளிதாக்கும் வகையில் பாரம்பரிய வலை பயன்பாடுகளில் AI திறன்களை ஒருங்கிணைப்பது எப்படி என்பதைத் தெளிவாக புரிந்துகொண்டுள்ளீர்கள். -## Codespaces-இல் அமைத்தல் +### தொழிலை நோக்கிய பயன்பாடுகள் -- செல்லவும்: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Template-இல் இருந்து உருவாக்கவும் (GitHub-ல் உள்நுழைந்திருப்பதை உறுதிசெய்க) மேல் வலது மூலையில்: +இந்த பாடத்தில் நீங்கள் பெற்ற திறன்கள் நேரடியான முறையில் நவீன மென்பொருள் மேம்பாட்டு தொழில்முறைகளுக்கு பொருந்தும்: - ![Template-இல் இருந்து உருவாக்கவும்](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ta.png) +- நவீன கட்டமைப்புகள் மற்றும் API களை பயன்படுத்தி **முழு ஸ்டாக் வலை மேம்பாடு** +- வலை பயன்பாடுகள் மற்றும் மொபைல் செயலிகளுக்கு **ஏஐ ஒருங்கிணைப்பு** +- மைக்ரோசெர்வீசஸ் கட்டுமானங்களுக்கான **API வடிவமைப்பு மற்றும் மேம்பாடு** +- அணுகல் வசதிகளும் பதிலளிக்கும் வடிவமைப்புகளும் கொண்ட **பயனர் இடைமுகம் மேம்பாடு** +- சுற்றுச்சூழல் அமைப்பும் வெளியீடும் உட்பட **DevOps நடைமுறைகள்** -- உங்கள் repo-இல், Codespace உருவாக்கவும்: +### உங்கள் ஏஐ மேம்பாட்டு பயணத்தை தொடருங்கள் - ![Codespace உருவாக்கவும்](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ta.png) +**அடுத்த கற்றல் படிகள்:** +- மேம்பட்ட ஏஐ மாதிரிகள் மற்றும் API களை (GPT-4, Claude, Gemini) **ஆராயவும்** +- சிறந்த ஏஐ பதில்களுக்கு முனைப்பளிப்பதற்கான தொழில்நுட்பங்களை **கற்றுக்கொள்ளவும்** +- உரையாடல் வடிவமைப்பும் உரையாடல் உதவியாளர் பயனர் அனுபவக் கொள்கைகளும் **படிக்கவும்** +- ஏஐ பாதுகாப்பு, நெறிமுறைகள் மற்றும் பொறுப்பான ஏஐ மேம்பாட்டு நடைமுறைகளை **ஆராயவும்** +- உரையாடல் நினைவு மற்றும் உள்ளடக்கத் தெரிதல் கொண்ட மேலும் நுட்ப பயன்பாடுகளை **கட்டியெழுப்பவும்** - இது நீங்கள் வேலை செய்யக்கூடிய ஒரு சூழலை தொடங்க வேண்டும். +**மேம்பட்ட திட்ட யோசனைகள்:** +- ஏஐ மாடரேஷன் கொண்ட பன்முக உரையாடல் அறைகள் +- ஏஐ இயக்கிய வாடிக்கையாளர் சேவை உரையாடல் உதவியாளர்கள் +- தனிப்பயனாக்கப்பட்ட கற்றலுடன் கல்வி டியூட்டோரிங் உதவியாளர்கள் +- பல்வேறு ஏஐ தனிமொழிகளுடன் புத்தக எழுத்து கூட்டாளர்கள் +- வளர்ப்பாளர்களுக்கான தொழில்நுட்ப ஆவண உதவியாளர்கள் + +## GitHub Codespaces உடன் துவக்கம் + +இந்தத் திட்டத்தை மேகத்தில் உள்ள மேம்பாட்டு சூழலில் முயற்சிக்க விரும்புகிறீர்களா? GitHub Codespaces உலாவியில் முழுமையான மேம்பாட்டு அமைப்பை வழங்குகிறது, உங்களுக்கு ஏஐ செயல்பாடுகளை உள்ளூர் அமைப்பு தேவையின்றி சிறப்பாக சோதனை செய்ய உதவும். + +### உங்கள் மேம்பாட்டு சூழலை அமைத்தல் + +**படி 1: வடிவமைப்பிலிருந்து உருவாக்கவும்** +- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) என்ற இடத்திற்கு **ஓடவும்** +- மேல் வலது மூலையில் "Use this template" என்பதைக் **கிளிக் செய்யவும்** (GitHub-இல் உள்நுழைந்திருப்பதை உறுதி செய்யவும்) + +![Create from template interface showing the green "Use this template" button](../../../translated_images/template.67ad477109d29a2b.ta.png) + +**படி 2: Codespaces விரும்பவும்** +- இன்று உருவாக்கிய ரெப்போவை **திறக்கவும்** +- பச்சை "Code" பொத்தானை அழுத்தி "Codespaces" ஐ தேர்ந்தெடுக்கவும் +- உங்கள் மேம்பாட்டு சூழலை துவக்க "Create codespace on main" ஐ **தேர்ந்தெடுக்கவும்** + +![Create codespace interface with options for launching cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d.ta.png) + +**படி 3: சூழல் அமைப்பு** +Codespace ஏற்றியவுடன், நீங்கள் பெறுவீர்கள்: +- முன்னர் நிறுவப்பட்ட Python, Node.js மற்றும் அனைத்து தேவையான மேம்பாட்டு கருவிகள் +- வலை மேம்பாட்டுக்கான விரிவுரைகள் கொண்ட VS Code இடைமுகம் +- பின்புற மற்றும் முன்னணி சர்வர்களை இயக்குவதற்கான டெர்மினல் அணுகல் +- உங்கள் பயன்பாடுகளை சோதிக்க போர்ட் முன்கூட்டிய அனுமதி + +**Codespaces வழங்கும் வசதிகள்:** +- உள்ளூர் சுற்றுச்சூழல் அமைப்பையும் அமைப்பதில் பிரச்சினைகளையும் நீக்குகிறது +- பல சாதனங்களில் ஒரே மாதிரியான வள வளர்ப்பு சூழலை வழங்குகிறது +- வலை மேம்பாட்டிற்கான முன்கூட்டிய கருவிகள் மற்றும் விரிவுரைகளை உள்ளடக்கியது +- பதிப்பு கட்டுப்பாடு மற்றும் ஒத்துழைப்பு க்கான GitHub உடன் இணக்கமானது + +> 🚀 **திறமையான குறிப்பு**: Codespaces ஏஐ பயன்பாடுகளை கற்றல் மற்றும் முன்மாதிரியாக செயல்படுத்த சிறந்தது, ஏனெனில் இது அனைத்து சிக்கலான சூழல் அமைப்பையும் தானாகவே கையாள்கிறது, ஆகையால் நீங்கள் கட்டமைப்பு சிக்கல்களை பயப்படாமல் உருவாக்குவதும் கற்றுக்கொள்ளதையும் கவனிக்க முடியும். --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் தரச்சிறப்பிற்காக முயற்சி செய்தாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**குறிப்புரை**: +இந்த ஆவணம் AI மொழி மாற்று சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்துடன் பணியாற்றினாலும், தானியங்கி மொழி மாற்றங்களில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனித்து கொள்ளவும். இதன் இயல்புநிலை மொழியை உள்ளடக்கிய மூல ஆவணம் தான் அதிகாரபூர்வ ஆதாரம் எனக் கருத்தில் கொள்ள வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழி மாற்றம் காரணமாக ஏற்படும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்கமாட்டோம். + \ No newline at end of file diff --git a/translations/ta/9-chat-project/solution/backend/python/README.md b/translations/ta/9-chat-project/solution/backend/python/README.md index 4ab38be32..8e8d12f3f 100644 --- a/translations/ta/9-chat-project/solution/backend/python/README.md +++ b/translations/ta/9-chat-project/solution/backend/python/README.md @@ -1,13 +1,13 @@ -# கோடு இயக்கவும் +# குறியீட்டை இயக்கவும் ## அமைப்பு @@ -18,41 +18,47 @@ python -m venv venv source ./venv/bin/activate ``` - -## சார்புகளை நிறுவவும் +## சார்ந்தவற்றை நிறுவவும் ```sh -pip install openai flask flask-cors +pip install openai fastapi uvicorn python-dotenv ``` - ## API ஐ இயக்கவும் ```sh +# முறை 1: நேரடி செயலாக்கம் python api.py + +# முறை 2: uvicorn பயன்படுத்தல் +uvicorn api:app --host 0.0.0.0 --port 5000 --reload ``` +## API ஐ சோதிக்கவும் -## முன்புறத்தை இயக்கவும் +இணையதள API ஆவணத்தை பார்: `http://localhost:5000/docs` -முன்புற கோப்புறையில் இருப்பதை உறுதிப்படுத்தவும் +## முன்னணி இயக்கவும் -*app.js* ஐ கண்டறியவும், `BASE_URL` ஐ உங்கள் பின்புற URL ஆக மாற்றவும் +நீங்கள் frontend கோப்பகத்தில் இருக்கிறீர்களா என்று உறுதி செய்யவும் -இதை இயக்கவும் +*app.js* ஐ கண்டறிந்து, `BASE_URL` ஐ உங்கள் பின்னணி URL ஆக மாற்றவும் + +இயக்கவும் ``` npx http-server -p 8000 ``` +உரையாடலில் ஒரு செய்தியை வடிவமைத்துப் பார்க்கவும், பதில் கிடைக்கும் (நீங்கள் இதை Codespace இல் இயக்குகிறீர்கள் அல்லது அணுகல் குறியீட்டை அமைத்துள்ளீர்கள் எனில்). -செய்தியை உரையாடலில் தட்டச்சு செய்ய முயற்சிக்கவும், நீங்கள் பதிலை காணலாம் (நீங்கள் இதை Codespace-ல் இயக்கினால் அல்லது அணுகல் டோக்கனை அமைத்திருந்தால்). - -## அணுகல் டோக்கனை அமைக்கவும் (நீங்கள் இதை Codespace-ல் இயக்கவில்லை என்றால்) +## அணுகல் குறியீட்டை அமைக்க (நீங்கள் இதை Codespace இல் இயக்கவில்லை என்றால்) -[தனிப்பட்ட அணுகல் டோக்கன்களை அமைக்கவும்](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) ஐப் பார்க்கவும் +[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) ஐப் பார்வையிடவும் --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**உறுதிமொழி**: +இந்தக் கோப்பு [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற செயற்கை நுண்ணறிவு மொழிபெயர்ப்புச் சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்தினைப் பெற முயற்சி செய்கிறோம் என்றாலும், தன்னிச்சையான மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தெரிந்துகொள்ளவும். இயல்புநிலையான மொழியில் உள்ள அசல் ஆவணம் அதிகாரபூர்வமான மூலமாக கருதப்பட வேண்டும். அவசரமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதன் மூலம் ஏற்படும் எந்த தவறான புரிதலும் அல்லது தவறான பொருள் எடுத்துக்காட்டுகளுக்கும் நாங்கள் பொறுப்பாக இருக்கமாட்டோம். + \ No newline at end of file diff --git a/translations/ta/README.md b/translations/ta/README.md index f224bfe78..ff3648867 100644 --- a/translations/ta/README.md +++ b/translations/ta/README.md @@ -1,8 +1,8 @@ -[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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/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](./README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +[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](../kn/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](./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+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவைக் குறைக்கும் உதவும். மொழிபெயர்ப்புகளை இல்லாமல் நகல் எடுக்க sparse checkout ஐ பயன்படுத்தவும்: +> ```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' +> ``` +> இது பாடத்திட்டத்தை முழுமையாக முடிக்க தேவையான அனைத்தையும் விரைவான பதிவிறக்கத்துடன் வழங்கும். -**கூடுதல் மொழிபெயர்ப்புகளை ஆதரிக்க விரும்பினால், [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ள மொழிகளைப் பார்க்கவும்** +**கூடுதல் மொழிபெயர்ப்பு மொழிகள் ஆதரிக்கப்பட வேண்டும் என்றால், பட்டியலை [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) காணவும்** + +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +#### 🧑‍🎓 _நீங்கள் மாணவரா?_ + +[**Student Hub பக்கத்தை**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடுங்கள். அங்கு ஆரம்பக் கல்வி வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிமுறைகளும் உள்ளன. மாதாந்திரமாகப் புதுப்பிக்கப்படும் உள்ளடக்கத்தைக் காண இந்த பக்கம் நீங்கள் கூடுதல் பார்க்கத் தேவைப்படும். -[![Visual Studio Code-இல் திறக்கவும்](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +### 📣 அறிவிப்பு - GitHub Copilot Agent முறை சவால்கள் புதியவை! -#### 🧑‍🎓 _நீங்கள் ஒரு மாணவரா?_ +புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என தேடுங்கள். இது GitHub Copilot மற்றும் Agent முறையை பயன்படுத்தி நீங்கள் முடிக்க வேண்டிய புதிய சவால் ஆகும். முன்பு Agent முறையைப் பயன்படுத்தவில்லையெனில், இது உரை உருவாக்குதல் மட்டுமின்றி கோப்புகள் உருவாக்கல் மற்றும் திருத்துதல், கட்டளை இயக்குதல் மற்றும் இன்னும் பலவற்றை செய்யக்கூடியது. -[**மாணவர் Hub பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கு தொடக்க நிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வவுச்சரைப் பெறுவதற்கான வழிகள் கிடைக்கும். இந்தப் பக்கத்தை புத்தகக்குறியாக்கி, மாதாந்திரமாக உள்ளடக்கத்தை மாற்றியமைக்கும் போது சரிபார்க்கவும். +### 📣 அறிவிப்பு - _Generative AI பயன்படுத்தி புதிய திட்டம்_ -### 📣 அறிவிப்பு - _Generative AI பயன்படுத்த புதிய திட்டம்_ +புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டுள்ளது, இதைப் பார்க்கவும் [திட்டம்](./9-chat-project/README.md) -புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டுள்ளது, [திட்டத்தை](./09-chat-project/README.md) பார்வையிடவும். +### 📣 அறிவிப்பு - _Generative AI க்கான புதிய பாடத்திட்டம்_ JavaScript க்கானது வெளியிடப்பட்டது -### 📣 அறிவிப்பு - _Generative AI பாடத்திட்டம்_ ஜாவாஸ்கிரிப்டுக்காக வெளியிடப்பட்டது +எமது புதிய Generative AI பாடத்திட்டத்தை தவறவிடுங்கள்! -எங்கள் புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்! +தொடங்க, [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்க்கவும்! -தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடவும்! +![Background](../../translated_images/background.148a8d43afde5730.ta.png) -![பின்புலம்](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ta.png) +- அடிப்படை முதல் RAG வரை ஆய்வுகள் உள்ளன. +- GenAI மற்றும் எங்களுடைய கூட்டாளி செயலியுடன் வரலாற்று காட்சிகளுடன் தொடர்பு கொள்ளவும். +- பொழுதுபோக்கான மற்றும் ஈர்க்கக்கூடிய கதை, கால பயணம் செய்யும் அனுபவம்! -- அடிப்படைகள் முதல் RAG வரை உள்ள பாடங்கள். -- GenAI மற்றும் எங்கள் துணை செயலியைப் பயன்படுத்தி வரலாற்று கதாபாத்திரங்களுடன் தொடர்பு கொள்ளுங்கள். -- சுவாரஸ்யமான மற்றும் ஈர்க்கக்கூடிய கதை, நீங்கள் காலப்பயணம் செய்யப் போகிறீர்கள்! +![character](../../translated_images/character.5c0dd8e067ffd693.ta.png) -![கதாபாத்திரம்](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ta.png) -ஒவ்வொரு பாடமும் பின்வருவனவற்றை உள்ளடக்கியது: -- ஒரு பணியை முடிக்கவும் -- அறிவு சரிபார்ப்பு -- கற்றல் தலைப்புகளை வழிநடத்த ஒரு சவால்: - - Prompting மற்றும் prompt engineering - - உரை மற்றும் பட பயன்பாட்டு உருவாக்கம் - - தேடல் பயன்பாடுகள் +ஒவ்வொரு பாடத்திலும் ஒரு பணியை முடிக்கவும், அறிவு பரிசோதனை மற்றும் சவால்களை உள்ளடக்கியது, இவற்றை வழிநடத்தி நீங்கள் கீழ்க்காணும் தலைப்புகளை கற்றுக் கொள்ளலாம்: +- வழிகாட்டும் கேள்விகள் மற்றும் வழிகாட்டல் பொறியியல் +- உரை மற்றும் படம் செயலி உருவாக்குதல் +- தேடல் செயலிகள் -தொடங்க [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) பார்வையிடவும்! +தொடங்க [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) ஊக்குவிக்கப்படுகின்றன, எங்கள் மாடரேட்டர்கள் குழு உங்கள் கேள்விகளுக்கு பதிலளிக்க தயாராக இருக்கும். +> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பது குறித்து [சிபாரிசுகள்](for-teachers.md) சேர்த்துள்ளோம். உங்கள் கருத்துக்களை எங்கள் [விவாதக் குழுவில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிர்ந்து கொள்ள விரும்புகிறோம்! -உங்கள் கல்வியை மேலும் மேம்படுத்த, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ஐ ஆராய்வதை பரிந்துரைக்கிறோம், மேலும் கற்கும் பொருட்கள் கிடைக்கின்றன. +**[கல்வியாளர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஹரொரு பாடத்திலும் முன்-பாடவாய்ப்பு வினாத்தாளுடன் தொடங்கி, பாடக்க material அகங்களைப் படித்து, பல செயல்பாடுகளை முடித்து, பின்னர் பாட்டுப் பாட வினாத்தாளில் உங்கள் புரிதலைச் சோதிக்கவும். + +உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, உங்கள் நண்பர்களுடன் இணைந்து திட்டங்களைக் கையாளவும்! விவாதங்கள் நமது [விவாதக் குழுவில்](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) போன்ற உரை திருத்தியைப் பயன்படுத்தி உள்ளூர் முறையில் பாடத்திட்டத்தை இயக்கத் தேர்வு செய்யலாம். +இந்த பாடத்திட்டத்திற்கு ஒரு மேம்பாடு சூழல் தயார் செய்யப்பட்டுள்ளது! நீங்கள் தொடங்கும் போது, [Codespace](https://github.com/features/codespaces/) (_உலாவியில் இயங்கும், நிறுவல்களைத் தேவையில்லாத சூழல்_) அல்லது [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்ற உரை தொகுப்புடைய உங்கள் கணினியில் பேசலாம். -#### உங்கள் களஞ்சியத்தை உருவாக்கவும் -உங்கள் பணிகளை எளிதாகச் சேமிக்க, இந்த களஞ்சியத்தின் உங்கள் சொந்த பிரதியை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதைச் செய்ய, பக்கத்தின் மேல் உள்ள **Use this template** பொத்தானைக் கிளிக் செய்யவும். இது பாடத்திட்டத்துடன் உங்கள் GitHub கணக்கில் ஒரு புதிய களஞ்சியத்தை உருவாக்கும். +#### உங்கள் கோப்பகத்தை உருவாக்கவும் +உங்கள் பணியை எளிதில் சேமிக்க உங்கள் சொந்தக் காப்பியை உருவாக்குவது பரிந்துரைக்கப்படுகிறது. இதை செய்ய, பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை கிளிக் செய்யவும். இது உங்கள் GitHub கணக்கில் இந்த பாடத்திட்டத்தின் நகலுடன் புதிய கோப்பகத்தை உருவாக்கும். -இந்த படிகளைப் பின்பற்றவும்: -1. **களஞ்சியத்தை Fork செய்யவும்**: இந்த பக்கத்தின் மேல் வலது மூலையில் உள்ள "Fork" பொத்தானைக் கிளிக் செய்யவும். -2. **களஞ்சியத்தை Clone செய்யவும்**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +பின்வரும் படிகளை பின்பற்றி: +1. **கோப்பகத்தை குறுக்கு செய்யவும் (Fork)**: இந்த பக்கத்தின் வலது மேல் மூலையில் உள்ள "Fork" பொத்தானை கிளிக் செய்யவும். +2. **கோப்பகத்தை கிளோன் செய்யவும்**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Codespace-இல் பாடத்திட்டத்தை இயக்குதல் +#### Codespaceஇல் பாடத்திட்டத்தை இயக்குதல் -நீங்கள் உருவாக்கிய இந்த களஞ்சியத்தின் உங்கள் பிரதியில், **Code** பொத்தானைக் கிளிக் செய்து **Open with Codespaces** ஐத் தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace ஐ உருவாக்கும். +நீங்கள் உருவாக்கிய இந்தக் கோப்பகத்தின் நகலில், **Code** பொத்தானை கிளிக் செய்து **Open with Codespaces** ஐத் தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace ஐ உருவாக்கும். -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ta.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ta.png) -#### உங்கள் கணினியில் உள்ளூர் முறையில் பாடத்திட்டத்தை இயக்குதல் +#### உங்கள் கணினியில் பாடத்திட்டத்தை இயக்குதல் -இந்த பாடத்திட்டத்தை உங்கள் கணினியில் உள்ளூர் முறையில் இயக்க, ஒரு உரை திருத்தி, ஒரு உலாவி மற்றும் ஒரு கட்டளை வரி கருவி தேவைப்படும். எங்கள் முதல் பாடம், [தொடக்கத்திற்கான நிரலாக்க மொழிகள் மற்றும் கருவிகள்](../../1-getting-started-lessons/1-intro-to-programming-languages), இந்த கருவிகளுக்கான பல்வேறு விருப்பங்களை உங்களுக்குத் தேர்ந்தெடுக்க வழிநடத்தும். +இந்த பாடத்திட்டத்தை உங்கள் கணினியில் இயக்க, ஒரு உரை தொகுப்பான், உலாவி மற்றும் கட்டளைக்கட்டளை கருவி தேவை. எங்கள் முதல் பாடம் [Introduction to Programming Languages and Tools of the Trade](../../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) பதிவிறக்கலாம். +நாம் பரிந்துரைக்கும் உரை தொகுப்பான் [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. உங்கள் களஞ்சியத்தை உங்கள் கணினியில் Clone செய்யவும். இதைச் செய்ய, **Code** பொத்தானைக் கிளிக் செய்து URL ஐ நகலெடுக்கவும்: - [CodeSpace](./images/createcodespace.png) +1. உங்கள் கணினிக்கு கோப்பகத்தை கிளோன் செய்யவும். இது **Code** பொத்தானை கிளிக் செய்து URL ஐ நகலெடுத்து செய்யலாம்: - பின்னர், [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) ஐ திறந்து, நீங்கள் நகலெடுத்த URL ஐ மாற்றி பின்வரும் கட்டளையை இயக்கவும்: + [CodeSpace](./images/createcodespace.png) +அப்பொழுது, [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) ஐ திறந்து, கீழ்காணும் கட்டளை இயக்கவும், `` என்பதனை நீங்கள் இப்போது பிரதிபலித்துள்ள URL-ஆக மாற்றவும்: ```bash git clone ``` -2. Visual Studio Code-இல் கோப்புறையைத் திறக்கவும். இதைச் செய்ய, **File** > **Open Folder** ஐ கிளிக் செய்து நீங்கள் Clone செய்த கோப்புறையைத் தேர்ந்தெடுக்கவும். +2. Visual Studio Code இல் கோப்புறை திறக்கவும். **File** > **Open Folder** என்பதனை கிளிக் செய்து நீங்கள் தற்போது குறியிட்ட கோப்புறையை தேர்ந்தெடுக்கலாம். -> பரிந்துரைக்கப்பட்ட Visual Studio Code நீட்டிப்புகள்: +> பரிந்துரைக்கப்பட்ட Visual Studio Code விரிவாக்கங்கள்: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-இல் HTML பக்கங்களை முன்னோட்டமாக பார்க்க -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - குறியீட்டை விரைவாக எழுத உதவ +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code இல் HTML பக்கங்களை முன்னோடி பார்க்க +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - நீங்கள் குறியீடு எழுதுவதில் வேகம் அதிகரிக்க உதவும் -## 📂 ஒவ்வொரு பாடமும் உள்ளடக்கியது: +## 📂 ஒவ்வொரு பாடத்திலும் செய்யப்பட்டுள்ளது: -- விருப்பமான sketchnote -- விருப்பமான கூடுதல் வீடியோ -- பாடத்திற்கு முன் வினாடி வினா -- எழுதப்பட்ட பாடம் -- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை உருவாக்குவதற்கான படிப்படியாக வழிகாட்டிகள் -- அறிவு சரிபார்ப்புகள் -- ஒரு சவால் -- கூடுதல் வாசிப்பு -- பணிக்கட்டளை -- [பாடத்திற்குப் பிந்தைய வினாடி வினா](https://ff-quizzes.netlify.app/web/) +- விருப்பமான ஸ்கெட்ச்நோட் +- விருப்பமான கூடுதல் காணொளி +- முன்னே பாடப் பழகல் குயிஸ் +- எழுத்துப்பாடம் +- திட்டம் சார்ந்த பாடங்களுக்கு, திட்டத்தை கட்டமைப்பதற்கான படிநிலை வழிகாட்டிகள் +- அறிவு பரிசோதனைகள் +- ஒரு சவால் +- கூடுதல் வாசிப்பு +- பின்-பாடக் குயிஸ் [post-lesson quiz](https://ff-quizzes.netlify.app/web/) -> **வினாடி வினாக்கள் குறித்த ஒரு குறிப்பு**: அனைத்து வினாடி வினாக்களும் Quiz-app கோப்பகத்தில் உள்ளன, ஒவ்வொன்றும் மூன்று கேள்விகளுடன் மொத்தம் 48 வினாடி வினாக்கள் உள்ளன. அவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன. வினாடி வினா செயலியை உள்ளூர் கணினியில் இயக்கவோ அல்லது Azure-ல் வெளியிடவோ முடியும்; `quiz-app` கோப்பகத்தில் உள்ள வழிமுறைகளை பின்பற்றவும். +> **குயிஸ்கள் குறித்த குறிப்புகள்**: அனைத்து குயிஸ்களும் Quiz-app கோப்புறையில் உள்ளன, மூன்று கேள்விகளைக் கொண்ட மொத்தம் 48 குயிஸ்கள் இருக்கின்றன. அவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன, குயிஸ் பயன்பாட்டை உள்ளூர్లో ஓட்டவோ அல்லது 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 | ஜேஎஸ் அடிப்படைகள் | ஜாவாஸ்கிரிப்ட் தரவுத் வகைகள் | ஜாவாஸ்கிரிப்ட் தரவுத் வகைகளின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள் | [தரவுத் வகைகள்](./2-js-basics/1-data-types/README.md) | ஜாஸ்மின் | -| 05 | ஜேஎஸ் அடிப்படைகள் | செயல்பாடுகள் மற்றும் முறைகள் | செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்றுக்கொண்டு, ஒரு செயலியின் தர்க்க ஓட்டத்தை நிர்வகிக்கவும் | [செயல்பாடுகள் மற்றும் முறைகள்](./2-js-basics/2-functions-methods/README.md) | ஜாஸ்மின் மற்றும் கிறிஸ்டோபர் | -| 06 | ஜேஎஸ் அடிப்படைகள் | ஜேஎஸ் மூலம் முடிவுகளை எடுப்பது | முடிவெடுக்கும் முறைகளைப் பயன்படுத்தி உங்கள் குறியீட்டில் நிபந்தனைகளை உருவாக்குவது எப்படி | [முடிவெடுக்கும் முறைகள்](./2-js-basics/3-making-decisions/README.md) | ஜாஸ்மின் | -| 07 | ஜேஎஸ் அடிப்படைகள் | வரிசைகள் மற்றும் மடக்கங்கள் | ஜாவாஸ்கிரிப்டில் தரவுகளை வரிசைகள் மற்றும் மடக்கங்களைப் பயன்படுத்தி வேலை செய்யுங்கள் | [வரிசைகள் மற்றும் மடக்கங்கள்](./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) | ஜாவாஸ்கிரிப்ட் மூலம் மேம்பட்ட விளையாட்டு மேம்பாடு | ஒரு விளையாட்டை உருவாக்குவதற்கு முன்னேற்பாடாக வகுப்புகள் மற்றும் கலவையின் மூலம் பரம்பரை மற்றும் பப்/சப் முறை பற்றி கற்றுக்கொள்ளுங்கள் | [மேம்பட்ட விளையாட்டு மேம்பாட்டிற்கான அறிமுகம்](./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 | [உலாவி/விஎஸ் கோடு](../../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) | கிறிஸ் | +| 01 | தொடக்கம் | நிரலாக்க அறிமுகம் மற்றும் தொழில்சாதனங்கள் | பெரும்பாலான நிரலாக்க மொழிகளின் அடிப்படைகளை கற்றுக்கொள்ளவும் மற்றும் தொழில்முறை டெவலப்பர்கள் தங்களின் பணி செய்ய உதவும் மென்பொருள் பற்றி தெரிந்து கொள்ளவும் | [நிரலாக்க மொழிகள் மற்றும் தொழில்சாதனங்கள் அறிமுகம்](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | தொடக்கம் | GitHub அடிப்படைகள், ஒரு குழுவுடன் பணியாற்றும் முறைகள் | உங்கள் திட்டத்தில் GitHub ஐ எப்படி பயன்படுத்துவது, மற்றவர்களுடன் குறியீடு பரிமாற்றம் செய்வது எப்படி | [GitHub அறிமுகம்](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | தொடக்கம் | அணுகத்தக்க தன்மை | வலை அணுகத்தக்க தன்மை அடிப்படைகள் கற்றுக்கொள்ளவும் | [அணுகத்தக்க தன்மை அடிப்படைகள்](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS அடிப்படைகள் | JavaScript தரவுத் தகுதிகள் | JavaScript தரவுத் தகுதிகளின் அடிப்படை | [தரவுத் தகுதிகள்](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS அடிப்படைகள் | செயல்பாடுகள் மற்றும் முறைமைகள் | பயன்பாட்டின் நியமநிலை ஒற்றுமையை நிர்வகிக்க செயல்பாடுகள் மற்றும் முறைமைகளை பற்றி கற்றுக்கொள்ளவும் | [செயல்பாடுகள் மற்றும் முறைமைகள்](./2-js-basics/2-functions-methods/README.md) | Jasmine மற்றும் Christopher | +| 06 | JS அடிப்படைகள் | JS மூலம் முடிவெடுக்கல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகளை உருவாக்க கற்றுக்கொள்ளவும் | [முடிவெடுத்தல்](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS அடிப்படைகள் | வரிசைகள் மற்றும் சுற்றிகள் | JavaScript-இல் வரிசைகள் மற்றும் சுற்றிகள் மூலம் தரவை கையாளவும் | [வரிசைகள் மற்றும் சுற்றிகள்](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML நடைமுறை | ஆன்லைன் டெரேரியத்தை உருவாக்கும் HTML கட்டமைவிட்டு, கட்டமைப்புக்கு கவனம் செலுத்தவும் | [HTML அறிமுகம்](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS நடைமுறை | ஆன்லைன் டெரேரியத்தை அலங்கரிக்க CSS கட்டமைத்து, அடிப்படையான CSS மற்றும் பக்கம் பதிலளிக்கும் முறைகள் பற்றி கற்றுக்கொள்ளவும் | [CSS அறிமுகம்](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடுபெயர்ச்சி, DOM செயலாக்கம் | டெரேரியத்தை ஒரு டிராக்/டிராப் இடைமுகமாக செயல்படுத்த JavaScript எழுதுக, மூடுபெயர்ச்சி மற்றும் DOM செயலாக்கம் பற்றி கவனம் செலுத்தவும் | [JavaScript மூடுபெயர்ச்சி, DOM செயலாக்கம்](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | টাইப்பிங் கேம் உருவாக்கல் | உங்கள் JavaScript பயன்பாட்டின் நியமநிலையை இயக்க விசைப்பலகை நிகழ்வுகளை எப்படி பயன்படுத்துவது என்று கற்றுக்கொள்ளவும் | [நிகழ்வு சார்ந்த நிரலாக்கம்](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவிகள் வேலை செயல் | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு, ஒரு உலாவி நீட்டிப்பின் முதல் கூறுகளை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்ளவும் | [உலாவிகள் குறித்த](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைப்பும் உள்ளக சேமிப்பில் 변수 சேமிப்பும் | API ஐ அழைக்க உலாவி நீட்டிப்பின் JavaScript கூறுகளை உருவாக்கவும்; உள்ளக சேமிப்பில் சேமிக்கப்பட்ட மாறி மதிப்புகளை பயன்படுத்தவும் | [APIs, படிவங்கள் மற்றும் உள்ளக சேமிப்பு](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவி பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் ஐகானை நிர்வகிக்க உலாவியின் பின்னணி செயலிகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றுக்கொள்ளவும் | [பின்னணி பணிகள் மற்றும் செயல்திறன்](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript உதவி அதிகரிக்கப்பட்ட விளையாட்டு மேம்பாடு | வகுப்புகளையும் கூட்டமைப்பையும் பயன்படுத்தி பேருரிமையை கற்றுக்கொள்ளவும் மற்றும் Pub/Sub வடிவமைப்பை அறிந்து விளையாட்டைப் போடும் முன் துவங்கவும் | [மேம்பட்ட விளையாட்டு மேம்பாடு அறிமுகம்](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | கேன்வாஸ் வரைதல் | திரையில் கூறுகளை வரைய தேவைப்படும் Canvas API பற்றி கற்றுக்கொள்ளவும் | [கேன்வாஸ் வரைதல்](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | திரையில் கூறுகள் நகர்த்தல் | கார்டிசியன் ஒருங்குத்தல்கள் மற்றும் Canvas API உதவியுடன் கூறுகள் எப்படி நகர்கின்றன என்பதை கண்டறியவும் | [குறுப்புகளை நகர்த்தல்](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | மோதி கண்டறிதல் | கூறுகள் எப்படி ஒருவரை ஒருவர் மோதி விளையாட்டு செயல்திறனை உறுதி செய்ய ஒரு குளிர் செயல்பாட்டுடன் செயல்படுகிறார்கள் என்பதைக் கற்றுக்கொள்ளவும் | [மோதி கண்டறிதல்](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | மதிப்பெண் வைத்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறனை அடிப்படையாகக் கொண்டு கணக்குகளைச் செய்யவும் | [மதிப்பெண் வைத்தல்](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | விளையாட்டை முடித்தல் மற்றும் மீட்டமைத்தல் | விளையாட்டை முடித்தல் மற்றும் மீட்டமைப்புக்கள், சொத்துகளை சுத்தம் செய்தல் மற்றும் மாறிலி மதிப்புகளை மீட்டமைத்தல் பற்றி கற்றுக்கொள்ளவும் | [முடிவு நிபந்தனை](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | வலை பயன்பாட்டில் HTML வார்ப்புருக்கள் மற்றும் பாதைகள் | பல பக்கங்கள் கொண்ட வலைத்தள கட்டமைப்பை பாதை வழிநடத்தல் மற்றும் HTML வார்ப்புருக்களைக் கொண்டு உருவாக்கும் முறை பற்றி கற்றுக்கொள்ளவும் | [HTML வார்ப்புருக்கள் மற்றும் பாதைகள்](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவம் உருவாக்கல் | படிவங்கள் உருவாக்கல் மற்றும் சரிபார்ப்பு முறைகள் பற்றி கற்றுக்கொள்ளவும் | [படிவங்கள்](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவு பெறுதல் மற்றும் பயன்பாடு | உங்கள் பயன்பாட்டிலே தரவு எப்படி வந்து செல்கிறது, அதை பெற்றல், சேமிப்பு மற்றும் திருட்டு செய்வது பற்றி கற்றுக்கொள்ளவும் | [தரவு](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | நிலை நிர்வாகம் கருத்துக்கள் | உங்கள் பயன்பாடு நிலையை எவ்வாறு வைத்திருக்கிறது மற்றும் அதை நிரல் முறையில் எப்படி நிர்வகிப்பது என்பதைக் கற்றுக்கொள்ளவும் | [நிலை நிர்வாகம்](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணியாற்றுதல் | குறியீடு தொகுப்பி எப்படி பயன்படுத்துவது கற்றுக்கொள்ளவும் | [VScode Code Editor பயன்படுத்துக](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI உதவியாளர்கள்](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை எப்படி உருவாக்குவது கற்றுக்கொள்ளவும் | [AI உதவியாளர் திட்டம்](./9-chat-project/README.md) | Chris | -## 🏫 கல்வி முறை +## 🏫 பாடத்திட்டம் -எங்கள் பாடத்திட்டம் இரண்டு முக்கியமான கல்வி முறைகளை மனதில் வைத்து வடிவமைக்கப்பட்டுள்ளது: -* திட்ட அடிப்படையிலான கற்றல் -* அடிக்கடி வினாடி வினாக்கள் +எங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்விக் கொள்கைகளுடன் வடிவமைக்கப்பட்டுள்ளது: +* திட்டம் சார்ந்த கற்றல் +* அடிக்கடி குயிஸ்கள் -இந்த திட்டம் ஜாவாஸ்கிரிப்ட், HTML மற்றும் CSS ஆகியவற்றின் அடிப்படைகளை மட்டுமல்லாமல், இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் தொழில்நுட்பங்களையும் கற்பிக்கிறது. மாணவர்கள் டைப்பிங் விளையாட்டு, மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் நட்பு உலாவி நீட்சிகள், விண்வெளி தாக்குதல் விளையாட்டு மற்றும் வணிகங்களுக்கான வங்கி செயலியை உருவாக்குவதன் மூலம் கைகூலி அனுபவத்தைப் பெற வாய்ப்பு கிடைக்கும். இந்த தொடர் முடிவடையும் போது, மாணவர்கள் வலை மேம்பாட்டின் ஒரு வலுவான புரிதலைப் பெறுவார்கள். +இந்த திட்டம் JavaScript, HTML மற்றும் CSS அடிப்படைகளை, மேலும் இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் தொழில்நுட்பங்களை கற்பிக்கிறது. மாணவர்கள் ஒரு டைப் செய்யும் கேம், மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் பொருந்திய உலாவி நீட்டிப்பு, விண்வெளி படையல் பாணி விளையாட்டு மற்றும் வணிக கணக்கியல் பயன்பாட்டை உருவாக்கும் மூலம் நேரடித் அனுபவம் பெறுவர். தொடர் முடிவுக்கு நிலையில், மாணவர்கள் வலை மேம்பாட்டின் உறுதியான புரிதலைப் பெறுவர். -> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக Microsoft Learn-ல் எடுத்துக்கொள்ளலாம்! +> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை Microsoft Learn இல் [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுக்கலாம்! -பாடங்கள் திட்டங்களுடன் இணைந்திருப்பதை உறுதிசெய்து, மாணவர்களுக்கு கற்றல் செயல்முறை மேலும் ஈர்க்கக்கூடியதாக மாறுகிறது மற்றும் கருத்துக்களின் நினைவாற்றல் அதிகரிக்கப்படும். மேலும், ஜாவாஸ்கிரிப்ட் அடிப்படைகளில் பல தொடக்க பாடங்களை எழுதினோம், அவை "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" என்ற வீடியோ தொடர் தொகுப்பில் உள்ள வீடியோவுடன் இணைக்கப்பட்டுள்ளன, இதன் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்திற்கும் பங்களித்துள்ளனர். +திட்டங்களுக்கு எந்த வடிவமைப்பும் பொருந்திநிலை பின்பற்றுவதால் மாணவர்களுக்கான ஈடுபாட்டும் கருத்துக்கள் நீடிக்கும் தன்மையும் அதிகரிக்கும். JavaScript அடிப்படைகள் குறைந்தபட்ச வித்தியாசங்களை அறிமுகப்படுத்த சில தொடக்க பாடங்களும், "[JavaScript தொடக்க தொடர்](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ பாடத் தொகுப்பில் இருந்து ஒரு காணொளியும் இணைக்கப்பட்டுள்ளது, அதுவரையில் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்திற்கு பங்களித்துள்ளனர். -மேலும், ஒரு வகுப்புக்கு முன் குறைந்த அழுத்த வினாடி வினா ஒரு தலைப்பை கற்றுக்கொள்வதற்கான மாணவரின் நோக்கத்தை அமைக்கிறது, அதே நேரத்தில் வகுப்புக்குப் பிறகு ஒரு இரண்டாவது வினாடி வினா மேலும் நினைவாற்றலை உறுதிசெய்கிறது. இந்த பாடத்திட்டம் நெகிழ்வான மற்றும் மகிழ்ச்சியானதாக வடிவமைக்கப்பட்டுள்ளது மற்றும் முழுமையாக அல்லது பகுதியளவில் எடுத்துக்கொள்ளலாம். திட்டங்கள் சிறியதாக தொடங்கி, 12 வார சுழற்சியின் இறுதியில் அதிகமாக சிக்கலானதாக மாறுகின்றன. +மேலும், வகுப்புக்கு முன்தானியச்சாதனம் ஒரு குறைந்தபட்சமான குயிஸ் மூலம் மாணவரின் படிக்கும் நோக்கம் சமர்ப்பிக்கப்படுகிறது, வகுப்புக்குப் பின்பு இரண்டாவது குயிஸ் தன்மை மையமாக இருக்கும். இந்த பாடத்திட்டம் நெகிழ்வாகவும் வேடிக்கையாகவும் உருவாக்கப்பட்டுள்ளது மற்றும் முழுவதும் அல்லது பகுதியளவு ஏற்றுக்கொள்ளக்கூடியது. 12 வாரம் தொடர்ந்த இந்த திட்டங்கள் ஆரம்பத்தில் சிறியவை, இறுதியில் சிக்கலானவையாக மாறும். -நாங்கள் ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளை அறிமுகப்படுத்துவதை நோக்கமாகக் கொண்டுள்ளோம், ஒரு ஃபிரேம்வொர்க்கை ஏற்றுக்கொள்வதற்கு முன் ஒரு வலை டெவலப்பராக அடிப்படை திறன்களை கற்றுக்கொள்வது முக்கியம். இந்த பாடத்திட்டத்தை முடித்த பிறகு, மற்றொரு வீடியோ தொகுப்பின் மூலம் Node.js பற்றி கற்றுக்கொள்வது ஒரு நல்ல அடுத்த படியாக இருக்கும்: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +JavaScript கட்டமைப்புக்களை அறிமுகப்படுத்தாமல் வலைப்பDeveloper ஆக தேவையான அடிப்படைக் கையறைகள் மீது கவனம் செலுத்த இந்த திட்டம் வடிவமைக்கப்பட்டுள்ளது. இந்த பாடத்திட்டத்தை முடிக்க அடுத்தடுத்த ஓர் நல்ல படி Node.js பற்றி தனி வீடியோ தொகுப்பின் மூலம் கற்றுக்கொள்வது "[Node.js தொடக்க தொடர்](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ஆகும். -> எங்கள் [நடத்தை விதிமுறைகள்](CODE_OF_CONDUCT.md) மற்றும் [பங்களிப்பு](CONTRIBUTING.md) வழிகாட்டுதல்களை பார்வையிடவும். உங்கள் கட்டுமானமான கருத்துக்களை வரவேற்கிறோம்! +> எங்கள் [ஒழுங்கு செயல்முறை](CODE_OF_CONDUCT.md) மற்றும் [பங்களிப்பு](CONTRIBUTING.md) வழிகாட்டுதல்களை பார்வையிடவும். உங்கள் கட்டுமான கருத்துக்களை வரவேற்கின்றோம்! -## 🧭 இணையதளத்தை ஆஃப்லைனில் அணுகுதல் +## 🧭 இணையமற்ற அணுகல் -இந்த ஆவணங்களை [Docsify](https://docsify.js.org/#/) பயன்படுத்தி ஆஃப்லைனில் இயக்கலாம். இந்த களஞ்சியத்தை Fork செய்யவும், உங்கள் உள்ளூர் கணினியில் [Docsify ஐ நிறுவவும்](https://docsify.js.org/#/quickstart), பின்னர் இந்த களஞ்சியத்தின் மூல கோப்பகத்தில் `docsify serve` என தட்டச்சு செய்யவும். இணையதளம் உங்கள் localhost இல் 3000 என்ற போர்ட்டில் வழங்கப்படும்: `localhost:3000`. +[Docsify](https://docsify.js.org/#/) பயன்படுத்தி இந்த ஆவணத்தை இணையமின்றி இயக்கலாம். இந்த தொகுப்பைக் fork செய்து, [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart) உங்கள் உள்ளூர் கணினியில் நிறுவி, பின்னர் இந்த தொகுப்பின் முகப்புக் கோப்புறையில் `docsify serve` எனக் கமாண்ட் செய்யவும். இந்த இணையத்தளமும் உங்கள் உள்ளூரில் வடிவமைக்கப்பட்ட 3000 போர்ட்டில் சேவையாக இருக்கும்: `localhost:3000`. ## 📘 PDF -அனைத்து பாடங்களின் PDF ஐ [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம். +எல்லா பாடங்களின் PDF இனை [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம். -## 🎒 பிற பாடநெறிகள் +## 🎒 பிற பாட வகுப்புகள் +எங்கள் குழு பிற பாடநெறிகளை தயாரிக்கிறது! பார்வையிடவும்: -எங்கள் குழு பிற பாடநெறிகளையும் தயாரிக்கிறது! பாருங்கள்: + +### LangChain +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -- [துவக்கத்திற்கான MCP](https://aka.ms/mcp-for-beginners) -- [தொலைவிலிருந்து செயற்கை நுண்ணறிவு](https://aka.ms/edgeai-for-beginners) -- [தொடக்க நிலை XR மேம்பாடு](https://github.com/microsoft/xr-development-for-beginners) -- [Agentic பயன்பாட்டிற்கான GitHub Copilot கற்றல்](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) -- [C#/.NET டெவலப்பர்களுக்கான GitHub Copilot கற்றல்](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) -- [உங்கள் சொந்த Copilot சாகசத்தைத் தேர்ந்தெடுக்கவும்](https://github.com/microsoft/CopilotAdventures) +--- + +### Azure / Edge / MCP / Agents +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) + +--- + +### Generative AI Series +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) + +--- + +### Core Learning +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +--- + +### Copilot Series +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) + -## உதவி பெறுதல் +## உதவிக்கு -AI பயன்பாடுகளை உருவாக்குவதில் சிக்கல் அல்லது கேள்விகள் இருந்தால், கீழே உள்ள இணைப்பில் சேரவும்: +AI செயலிகளை உருவாக்கும்போது நீங்கள் இடையூறடைந்தால் அல்லது கேள்விகள் இருந்தால், MCP பற்றி மற்ற மாணவர்களும் அனுபவமுள்ள வடிவமைப்பாளர்களுடன் கலந்துரையாடவும். கேள்விகள் வரவேற்கப்படும் மற்றும் அறிவு சுதந்திரமாக பகிரப்படும் ஆதரவான சமூகம் இது. -[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -தயாரிப்பு கருத்துக்களோ அல்லது உருவாக்கத்தின் போது பிழைகளோ இருந்தால், கீழே உள்ள இணைப்பை பார்வையிடவும்: +உடையிருக்கை கருத்து அல்லது பிழைகள் இருந்தால் பயிற்சி அமைக்கும்போது பின்வரும் இடத்தை பார்வையிடவும்: -[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) +[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) -## உரிமம் +## உரிமம் -இந்த களஞ்சியம் MIT உரிமத்தின் கீழ் உரிமம் பெற்றது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும். +இந்த அலுவலககம் MIT உரிமம் கீழ் உரிமையுள்ளது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்வையிடவும். --- -**குறிப்பு**: -இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. \ No newline at end of file + +**வெளிப்படைத்தன்மை**: +இந்த ஆவணம் AI மொழி மாற்ற சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) பயன்படுத்தி மொழி மாற்றம் செய்யப்பட்டு உள்ளது. நாங்கள் சரியான தரத்தை வழங்க முயற்சிப்பதாக இருந்தாலும், தானியங்கி மொழி மாற்றங்களில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதைக் கவனிக்கவும். அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரபூர்வமான மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழி மாற்றம் பரிந்துரை செய்வதாகும். இதன் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்க மாட்டோம். + \ No newline at end of file diff --git a/translations/ta/for-teachers.md b/translations/ta/for-teachers.md index 575c06362..67505887d 100644 --- a/translations/ta/for-teachers.md +++ b/translations/ta/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud-க்கு வரையறுக்கப்பட்ட Common Cartridge ஆதரவு உள்ளது. மேலே உள்ள Moodle கோப்பை விரும்பவும், இது Canvas-ல் கூட ஏற்றப்படலாம். - இறக்குமதி செய்த பிறகு, உங்கள் கால அட்டவணைக்கு பொருந்த மாட்யூல்கள், கடைசித் தேதிகள் மற்றும் வினா அமைப்புகளை மதிப்பாய்வு செய்யவும். -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ta.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ta.png) > Moodle வகுப்பறையில் உள்ள பாடத்திட்டம் -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ta.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ta.png) > Canvas-ல் உள்ள பாடத்திட்டம் ### Repo-வை நேரடியாக பயன்படுத்துதல் (Classroom இல்லாமல்) diff --git a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 270bd7952..d529bc7e5 100644 --- a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Сьогодні ми дослідимо неймовірні інструменти, які роблять сучасну веб-розробку не просто можливою, а дійсно захоплюючою. Я говорю про ті самі редактори, браузери та робочі процеси, які розробники Netflix, Spotify та твоєї улюбленої студії інді-додатків використовують щодня. І ось частина, яка змусить тебе танцювати від радості: більшість із цих професійних, стандартних для галузі інструментів абсолютно безкоштовні! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.uk.png) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.uk.png) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/1-getting-started-lessons/2-github-basics/README.md b/translations/uk/1-getting-started-lessons/2-github-basics/README.md index b5de7a295..10a465429 100644 --- a/translations/uk/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/uk/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Ми пройдемо цей шлях разом, крок за кроком. Без поспіху, без тиску – лише ти, я і кілька дійсно крутих інструментів, які стануть твоїми новими найкращими друзями! -![Вступ до GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.uk.png) +![Вступ до GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.uk.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -583,7 +583,7 @@ flowchart TD ✅ Хороший спосіб знайти репозиторії, дружні до новачків, – це [шукати за тегом 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Скопіювати репозиторій локально](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.uk.png) +![Скопіювати репозиторій локально](../../../../translated_images/clone_repo.5085c48d666ead57.uk.png) Існує кілька способів копіювання коду. Один із них – "клонувати" вміст репозиторію, використовуючи HTTPS, SSH або GitHub CLI (Command Line Interface). diff --git a/translations/uk/1-getting-started-lessons/3-accessibility/README.md b/translations/uk/1-getting-started-lessons/3-accessibility/README.md index 1efc022fc..de26207d6 100644 --- a/translations/uk/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/uk/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Створення доступних веб-сторінок -![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png) +![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.uk.png) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/1-data-types/README.md b/translations/uk/2-js-basics/1-data-types/README.md index 1caa5dea4..93f02728d 100644 --- a/translations/uk/2-js-basics/1-data-types/README.md +++ b/translations/uk/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Типи даних -![Основи JavaScript - Типи даних](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.uk.png) +![Основи JavaScript - Типи даних](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.uk.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/2-functions-methods/README.md b/translations/uk/2-js-basics/2-functions-methods/README.md index cb6122513..46709e024 100644 --- a/translations/uk/2-js-basics/2-functions-methods/README.md +++ b/translations/uk/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Методи та функції -![Основи JavaScript - Функції](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.uk.png) +![Основи JavaScript - Функції](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.uk.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/3-making-decisions/README.md b/translations/uk/2-js-basics/3-making-decisions/README.md index 710236959..5bfbcc082 100644 --- a/translations/uk/2-js-basics/3-making-decisions/README.md +++ b/translations/uk/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Прийняття рішень -![Основи JavaScript - Прийняття рішень](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.uk.png) +![Основи JavaScript - Прийняття рішень](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.uk.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/uk/2-js-basics/4-arrays-loops/README.md b/translations/uk/2-js-basics/4-arrays-loops/README.md index dc7ec6679..7f1e2efa5 100644 --- a/translations/uk/2-js-basics/4-arrays-loops/README.md +++ b/translations/uk/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Масиви та Цикли -![Основи JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.uk.png) +![Основи JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.uk.png) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/3-terrarium/1-intro-to-html/README.md b/translations/uk/3-terrarium/1-intro-to-html/README.md index 3e6b88613..0a075ac8a 100644 --- a/translations/uk/3-terrarium/1-intro-to-html/README.md +++ b/translations/uk/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Вступ до HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.uk.png) +![Вступ до HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.uk.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) HTML, або HyperText Markup Language, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим. @@ -88,7 +88,7 @@ mindmap 4. У панелі Explorer натисніть на іконку "New File" 5. Назвіть ваш файл `index.html` -![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.uk.png) +![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/vs-code-index.e2986cf919471eb9.uk.png) **Варіант 2: Використання команд терміналу** ```bash diff --git a/translations/uk/3-terrarium/2-intro-to-css/README.md b/translations/uk/3-terrarium/2-intro-to-css/README.md index 206392168..d985d91ad 100644 --- a/translations/uk/3-terrarium/2-intro-to-css/README.md +++ b/translations/uk/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Вступ до CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.uk.png) +![Вступ до CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.uk.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? Завдяки CSS ми перетворимо цю просту структуру на щось візуально привабливе. @@ -205,7 +205,7 @@ body { Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент `

`. Ви побачите, що він успадковує шрифт від body: -![успадкований шрифт](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.uk.png) +![успадкований шрифт](../../../../translated_images/1.cc07a5cbe114ad1d.uk.png) ✅ **Час експерименту**: Спробуйте встановити інші властивості, які можна успадкувати, для ``, такі як `color`, `line-height` або `text-align`. Що відбувається з вашим заголовком та іншими елементами? @@ -560,7 +560,7 @@ flowchart LR Ви створите тонкі відблиски, які імітують, як світло відбивається від скляних поверхонь. Цей підхід схожий на те, як художники епохи Відродження, такі як Ян ван Ейк, використовували світло і відображення, щоб зробити намальоване скло тривимірним. Ось до чого ви прагнете: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.uk.png) +![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.uk.png) **Ваш виклик:** - **Створіть** тонкі овальні форми білого або світлого кольору для відображень скла diff --git a/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md index 04935987b..24217f7de 100644 --- a/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM і замикання](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.uk.png) +![DOM і замикання](../../../../translated_images/webdev101-js.10280393044d7eaa.uk.png) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) Ласкаво просимо до одного з найцікавіших аспектів веб-розробки — створення інтерактивності! Document Object Model (DOM) — це як міст між вашим HTML і JavaScript, і сьогодні ми використаємо його, щоб оживити ваш тераріум. Коли Тім Бернерс-Лі створив перший веб-браузер, він уявляв веб як динамічний і інтерактивний простір — DOM робить це можливим. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png) +![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.uk.png) > Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Розуміння замикань**: Замикання — це важлива тема в JavaScript, і багато розробників використовують їх роками, перш ніж повністю зрозуміти всі теоретичні аспекти. Сьогодні ми зосередимося на практичному застосуванні — ви побачите, як замикання природно виникають під час створення наших інтерактивних функцій. Розуміння розвиватиметься, коли ви побачите, як вони вирішують реальні проблеми. -![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png) +![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.uk.png) > Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -573,7 +573,7 @@ function stopElementDrag() { - **Підтримка різних пристроїв**: Працює на настільних комп'ютерах і мобільних пристроях - **Свідомість продуктивності**: Без витоків пам'яті чи зайвих обчислень -![готовий тераріум](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.uk.png) +![готовий тераріум](../../../../translated_images/terrarium-final.0920f16e87c13a84.uk.png) --- diff --git a/translations/uk/3-terrarium/README.md b/translations/uk/3-terrarium/README.md index 2826f2641..54435536c 100644 --- a/translations/uk/3-terrarium/README.md +++ b/translations/uk/3-terrarium/README.md @@ -1,45 +1,30 @@ -# Мій тераріум: проект для вивчення HTML, CSS і маніпуляцій з DOM за допомогою JavaScript 🌵🌱 +## Розгорніть свій Terrarium -Невелика вправа з перетягування елементів. З невеликою кількістю HTML, JS і CSS ви зможете створити веб-інтерфейс, стилізувати його і навіть додати кілька взаємодій на ваш вибір. - -![мій тераріум](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png) - -# Уроки - -1. [Вступ до HTML](./1-intro-to-html/README.md) -2. [Вступ до CSS](./2-intro-to-css/README.md) -3. [Вступ до DOM і замикань у JS](./3-intro-to-DOM-and-closures/README.md) - -## Авторство - -Написано з ♥️ [Jen Looper](https://www.twitter.com/jenlooper) - -Тераріум, створений за допомогою CSS, був натхненний скляною банкою від Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). - -Ілюстрації намальовані вручну [Jen Looper](http://jenlooper.com) за допомогою Procreate. - -## Розгортання вашого тераріуму - -Ви можете розгорнути або опублікувати ваш тераріум в інтернеті за допомогою Azure Static Web Apps. +Ви можете розгорнути або опублікувати свій Terrarium в Інтернеті за допомогою **Azure Static Web Apps**. 1. Форкніть цей репозиторій -2. Натисніть цю кнопку +2. Натисніть цю кнопку 👇 -[![Кнопка для розгортання в Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -3. Пройдіть майстер створення вашого додатку. Переконайтеся, що ви встановили корінь додатку на `/solution` або корінь вашої кодової бази. У цьому додатку немає API, тому не хвилюйтеся про його додавання. У вашому форкнутому репозиторії буде створена папка github, яка допоможе службі збірки Azure Static Web Apps зібрати і опублікувати ваш додаток на новому URL. +3. Дотримуйтесь майстра налаштувань для створення вашого додатка. + - Встановіть **Корінь додатка** на `/solution` або корінь вашої кодової бази. + - У цьому додатку немає API, тому можна пропустити налаштування API. + - Папка `.github` буде створена автоматично, щоб допомогти Azure Static Web Apps збирати та публікувати ваш додаток. --- -**Відмова від відповідальності**: -Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу. \ No newline at end of file + +**Відмова від відповідальності**: +Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Ми прагнемо до точності, але зверніть увагу, що автоматичний переклад може містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом інформації. Для критично важливої інформації рекомендується звертатися до професійного перекладу людиною. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, які можуть виникнути внаслідок використання цього перекладу. + \ No newline at end of file diff --git a/translations/uk/3-terrarium/solution/README.md b/translations/uk/3-terrarium/solution/README.md index a4ee85430..43d63b4d7 100644 --- a/translations/uk/3-terrarium/solution/README.md +++ b/translations/uk/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Невелика вправа з перетягування елементів. За допомогою трохи HTML, JS і CSS ви можете створити веб-інтерфейс, стилізувати його та додати взаємодію. -![мій тераріум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png) +![мій тераріум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.uk.png) ## Авторство diff --git a/translations/uk/5-browser-extension/1-about-browsers/README.md b/translations/uk/5-browser-extension/1-about-browsers/README.md index 91ffbb738..d52533dfb 100644 --- a/translations/uk/5-browser-extension/1-about-browsers/README.md +++ b/translations/uk/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Скетчноут браузера](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.uk.jpg) +![Скетчноут браузера](../../../../translated_images/browser.60317c9be8b7f84a.uk.jpg) > Скетчноут від [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Тест перед лекцією @@ -79,7 +79,7 @@ mindmap ✅ **Трохи історії**: Перший браузер називався 'WorldWideWeb' і був створений сером Тімоті Бернерсом-Лі у 1990 році. -![ранні браузери](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.uk.jpg) +![ранні браузери](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.uk.jpg) > Деякі ранні браузери, через [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Як браузери обробляють веб-контент @@ -198,7 +198,7 @@ quadrantChart Розуміння процесу встановлення розширень допомагає передбачити досвід користувача під час встановлення вашого розширення. Процес встановлення стандартизований у сучасних браузерах, з невеликими варіаціями в дизайні інтерфейсу. -![скріншот браузера Edge, що показує відкриту сторінку edge://extensions і меню налаштувань](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.uk.png) +![скріншот браузера Edge, що показує відкриту сторінку edge://extensions і меню налаштувань](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.uk.png) > **Важливо**: Переконайтеся, що ви увімкнули режим розробника та дозволили розширення з інших магазинів під час тестування власних розширень. @@ -313,10 +313,10 @@ project-root/ ### Огляд вигляду розширення **Екран налаштувань** - Конфігурація для першого використання: -![скріншот завершеного розширення, відкритого в браузері, що показує форму з полями для введення назви регіону та ключа API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.uk.png) +![скріншот завершеного розширення, відкритого в браузері, що показує форму з полями для введення назви регіону та ключа API.](../../../../translated_images/1.b6da8c1394b07491.uk.png) **Екран результатів** - Відображення даних про вуглецевий слід: -![скріншот завершеного розширення, що показує значення використання вуглецю та відсоток викопного палива для регіону US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.uk.png) +![скріншот завершеного розширення, що показує значення використання вуглецю та відсоток викопного палива для регіону US-NEISO.](../../../../translated_images/2.1dae52ff08042246.uk.png) ### Створення форми конфігурації diff --git a/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md index fcfa15b6f..594ab52b3 100644 --- a/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Панель локального сховища](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.uk.png) +![Панель локального сховища](../../../../translated_images/localstorage.472f8147b6a3f8d1.uk.png) > ⚠️ **Міркування про безпеку**: У виробничих додатках зберігання ключів API у LocalStorage становить ризики безпеки, оскільки JavaScript може отримати доступ до цих даних. Для навчальних цілей цей підхід підходить, але реальні додатки повинні використовувати безпечне серверне сховище для конфіденційних даних. diff --git a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md index b37262be6..8c0e4c986 100644 --- a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ flowchart LR Спробуймо це. Відкрийте веб-сайт (Microsoft.com добре підходить для цього) і натисніть кнопку 'Record'. Тепер оновіть сторінку і спостерігайте, як профайлер фіксує все, що відбувається. Коли ви зупините запис, ви побачите детальний розподіл того, як браузер "скриптує", "рендерить" і "малює" сайт. Це нагадує, як центр управління польотами моніторить кожну систему під час запуску ракети - ви отримуєте дані в реальному часі про те, що саме відбувається і коли. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.uk.png) +![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.uk.png) ✅ [Документація Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) має багато додаткових деталей, якщо ви хочете заглибитися. @@ -136,11 +136,11 @@ flowchart LR Отримайте знімок продуктивності вашої сторінки, вибравши частину шкали часу профілю та переглянувши панель зведення: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.uk.png) +![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.uk.png) Перевірте панель журналу подій, щоб побачити, чи будь-яка подія тривала більше 15 мс: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.uk.png) +![Edge event log](../../../../translated_images/log.804026979f3707e0.uk.png) ✅ Ознайомтеся з вашим профайлером! Відкрийте інструменти розробника на цьому сайті і перевірте, чи є якісь вузькі місця. Який ресурс завантажується найповільніше? Найшвидше? diff --git a/translations/uk/5-browser-extension/README.md b/translations/uk/5-browser-extension/README.md index b2db89d62..287752905 100644 --- a/translations/uk/5-browser-extension/README.md +++ b/translations/uk/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### Подяки -![зелене розширення для браузера](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![зелене розширення для браузера](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Подяки diff --git a/translations/uk/5-browser-extension/solution/README.md b/translations/uk/5-browser-extension/solution/README.md index 44936ea05..23e598b8e 100644 --- a/translations/uk/5-browser-extension/solution/README.md +++ b/translations/uk/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивним є споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати обґрунтовані рішення щодо ваших дій на основі цієї інформації. -![знімок екрану розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![знімок екрану розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для завантаження нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![встановлення](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![встановлення](../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам підказку щодо того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії. diff --git a/translations/uk/5-browser-extension/solution/translation/README.fr.md b/translations/uk/5-browser-extension/solution/translation/README.fr.md index 86900cf1f..96e5e4553 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.fr.md +++ b/translations/uk/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб ви могли отримувати нагадування безпосередньо у своєму браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації. -![знімок розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![знімок розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане розширення", щоб додати нове розширення. Укажіть папку 'dist' у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширень браузера повинна змінюватися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор щодо енергоємних дій, які вам варто виконувати. Концепція цієї системи "точок" була натхненна [розширенням Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів. diff --git a/translations/uk/5-browser-extension/solution/translation/README.hi.md b/translations/uk/5-browser-extension/solution/translation/README.hi.md index 04509f869..38bbb9e4a 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.hi.md +++ b/translations/uk/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використання API CO2 Signal від tmrow для відстеження споживання електроенергії, створення розширення для браузера, яке нагадуватиме вам про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації. -![Скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![Скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель розширень. Звідти виберіть "Завантажити неупаковане" для завантаження нового розширення. У вікні виберіть папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його через електронну пошту тут](https://www.co2signal.com/) — введіть свою електронну адресу у поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones) [на електричній карті](https://www.electricitymap.org/map) (наприклад, для Бостона я використовую 'US-NEISO'). -![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка у панелі розширень браузера повинна змінитися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запропонована мені розширенням [Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів. diff --git a/translations/uk/5-browser-extension/solution/translation/README.it.md b/translations/uk/5-browser-extension/solution/translation/README.it.md index e329227a3..18c20a282 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.it.md +++ b/translations/uk/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ви будете використовувати API Signal CO2 від tmrow для моніторингу споживання електроенергії, щоб створити розширення для браузера, яке надаватиме нагадування безпосередньо у вашому браузері про те, наскільки інтенсивним є використання електроенергії у вашому регіоні. Використання цього спеціального розширення допоможе оцінити ваші дії на основі цієї інформації. -![знімок екрану розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![знімок екрану розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Для встановлення в Edge скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Якщо ще не активовано, увімкніть Режим розробника (внизу ліворуч). Виберіть "Завантажити розпаковане", щоб завантажити нове розширення. Укажіть папку "dist" у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal (його можна [отримати тут через електронну пошту](https://www.co2signal.com/) — введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [електричній мапі](https://www.electricitymap.org/map) (наприклад, для Бостона це "US-NEISO"). -![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширення браузера має змінитися, щоб відображати споживання енергії у вашому регіоні, і надавати підказки щодо того, які енергоємні дії доцільно виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії. diff --git a/translations/uk/5-browser-extension/solution/translation/README.ja.md b/translations/uk/5-browser-extension/solution/translation/README.ja.md index 4bcecdd2d..0a972f2ba 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.ja.md +++ b/translations/uk/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ми створимо розширення для браузера, яке використовує API CO2 Signal від tmrow, щоб відстежувати споживання електроенергії у вашому регіоні. Це розширення відображатиме нагадування у вашому браузері про рівень споживання електроенергії, що дозволить вам приймати рішення щодо вашої діяльності на основі цієї інформації. -![скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити розширення в Edge, знайдіть панель "Розширення" через меню з "трьома крапками" у верхньому правому куті браузера. Там виберіть "Load Unpacked" і завантажте нове розширення. У вікні, що з'явиться, відкрийте папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його тут через email](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, для Бостона використовується 'US-NEISO'). -![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка, що відображається на панелі розширень браузера, змінюватиметься відповідно до рівня енергоспоживання у вашому регіоні. Це допоможе вам визначити, які види діяльності, що потребують енергії, є доцільними в даний момент. Концепція цієї "точкової" системи була натхненна розширенням [Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії. diff --git a/translations/uk/5-browser-extension/solution/translation/README.ms.md b/translations/uk/5-browser-extension/solution/translation/README.ms.md index 80280ab1d..46b62eeff 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.ms.md +++ b/translations/uk/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати сповіщення про рівень споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію. -![скріншот розширення браузера](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![скріншот розширення браузера](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити в Edge, скористайтеся меню "три точки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Load Unpacked", щоб завантажити нове розширення. Відкрийте папку 'dist' за запитом, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Електричній карті](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![завантаження](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![завантаження](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера змінюватиметься, відображаючи рівень споживання енергії у вашому регіоні, і надаватиме вам рекомендації щодо відповідних дій. Ідея системи "точок" була запозичена з [розширення браузера Energy Lollipop](https://energylollipop.com/) для Каліфорнії. diff --git a/translations/uk/5-browser-extension/start/README.md b/translations/uk/5-browser-extension/start/README.md index 6273aef51..c45616972 100644 --- a/translations/uk/5-browser-extension/start/README.md +++ b/translations/uk/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію. -![знімок екрана розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png) +![знімок екрана розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для додавання нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![встановлення](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png) +![встановлення](../../../../translated_images/install-on-edge.78634f02842c4828.uk.png) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка в панелі розширення браузера має змінитися, відображаючи споживання енергії у вашому регіоні, і підказувати, які енергоємні дії вам варто виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії. diff --git a/translations/uk/6-space-game/2-drawing-to-canvas/README.md b/translations/uk/6-space-game/2-drawing-to-canvas/README.md index dbbda6b5d..d7b570ed1 100644 --- a/translations/uk/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/uk/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![сітка canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.uk.png) +![сітка canvas](../../../../translated_images/canvas_grid.5f209da785ded492.uk.png) > Зображення з [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Щоб малювати на елементі canvas, ви будете дотримуватися того самого триетапного процесу, який є основою всієї графіки canvas. Після кількох спроб це стане для вас природним: @@ -329,11 +329,11 @@ flowchart TD - Корабель героя - ![Корабель героя](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.uk.png) + ![Корабель героя](../../../../translated_images/player.dd24c1afa8c71e9b.uk.png) - 5×5 монстрів - ![Корабель монстра](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.uk.png) + ![Корабель монстра](../../../../translated_images/enemyShip.5df2a822c16650c2.uk.png) ### Рекомендовані кроки для початку розробки @@ -455,7 +455,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Готовий результат має виглядати так: -![Чорний екран з героєм і 5*5 монстрами](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.uk.png) +![Чорний екран з героєм і 5*5 монстрами](../../../../translated_images/partI-solution.36c53b48c9ffae2a.uk.png) ## Рішення diff --git a/translations/uk/6-space-game/5-keeping-score/README.md b/translations/uk/6-space-game/5-keeping-score/README.md index 3197fd7fa..244a58933 100644 --- a/translations/uk/6-space-game/5-keeping-score/README.md +++ b/translations/uk/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Система очок**: Кожен знищений ворожий корабель приносить 100 очок (круглі числа легше підраховувати подумки). Очки відображаються в нижньому лівому куті. -- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів ![зображення життя](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.uk.png). +- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів ![зображення життя](../../../../translated_images/life.6fb9f50d53ee0413.uk.png). ## Починаємо будувати! diff --git a/translations/uk/7-bank-project/1-template-route/README.md b/translations/uk/7-bank-project/1-template-route/README.md index 8c97a45e2..e0c8422e0 100644 --- a/translations/uk/7-bank-project/1-template-route/README.md +++ b/translations/uk/7-bank-project/1-template-route/README.md @@ -615,7 +615,7 @@ sequenceDiagram Використання `history.pushState` створює нові записи в історії навігації браузера. Ви можете перевірити це, утримуючи *кнопку назад* вашого браузера, вона повинна показувати щось на кшталт цього: -![Скріншот історії навігації](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.uk.png) +![Скріншот історії навігації](../../../../translated_images/history.7fdabbafa521e064.uk.png) Якщо ви спробуєте кілька разів натиснути кнопку назад, ви побачите, що поточний URL змінюється, а історія оновлюється, але той самий шаблон продовжує відображатися. diff --git a/translations/uk/7-bank-project/2-forms/README.md b/translations/uk/7-bank-project/2-forms/README.md index 03a4a2266..6210e771b 100644 --- a/translations/uk/7-bank-project/2-forms/README.md +++ b/translations/uk/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. Спостерігайте зміни в адресному рядку вашого браузера 3. Зверніть увагу, як сторінка перезавантажується, і дані з'являються в URL -![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png) +![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/click-register.e89a30bf0d4bc9ca.uk.png) ### Порівняння HTTP методів @@ -350,7 +350,7 @@ graph TD 2. **Натисніть** кнопку "Створити обліковий запис" 3. **Спостерігайте** відповідь сервера у вашому браузері -![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png) +![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/form-post.61de4ca1b964d91a.uk.png) **Що ви повинні побачити:** - **Браузер перенаправляє** на URL кінцевого пункту API @@ -532,7 +532,7 @@ async function register() { 3. **Натисніть** "Створити акаунт" 4. **Спостерігайте** повідомлення в консолі та зворотний зв'язок для користувача -![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png) +![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/browser-console.efaf0b51aaaf6778.uk.png) **Що ви повинні побачити:** - **Стан завантаження** з'являється на кнопці надсилання @@ -707,7 +707,7 @@ input:focus:invalid { 3. **Спробуйте** спеціальні символи в полі імені користувача 4. **Введіть** негативну суму балансу -![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png) +![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/validation-error.8bd23e98d416c22f.uk.png) **Що ви спостерігатимете:** - **Браузер відображає** нативні повідомлення про перевірку @@ -829,7 +829,7 @@ timeline Ось приклад того, як може виглядати фінальна сторінка входу після невеликого стилювання: -![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png) +![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/result.96ef01f607bf856a.uk.png) ## Тест після лекції diff --git a/translations/uk/7-bank-project/3-data/README.md b/translations/uk/7-bank-project/3-data/README.md index a48f277fe..8270cb36b 100644 --- a/translations/uk/7-bank-project/3-data/README.md +++ b/translations/uk/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.uk.png) +![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/mpa.7f7375a1a2d4aa77.uk.png) **Чому цей підхід здавався незручним:** - Кожен клік означав повне перезавантаження сторінки @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.uk.png) +![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/spa.268ec73b41f992c2.uk.png) **Чому SPA здаються набагато кращими:** - Оновлюються лише ті частини, які дійсно змінилися (розумно, правда?) @@ -504,7 +504,7 @@ if (data.error) { Тепер, коли ви тестуєте з недійсним обліковим записом, ви побачите корисне повідомлення про помилку прямо на сторінці! -![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.uk.png) +![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/login-error.416fe019b36a6327.uk.png) #### Крок 4: Бути інклюзивним з доступністю @@ -836,7 +836,7 @@ timeline Ось як може виглядати відполірована панель управління: -![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png) +![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/screen2.123c82a831a1d14a.uk.png) Не обов'язково точно повторювати це - використовуйте як натхнення і створіть щось своє! diff --git a/translations/uk/7-bank-project/4-state-management/README.md b/translations/uk/7-bank-project/4-state-management/README.md index bf9abc153..67f3bd918 100644 --- a/translations/uk/7-bank-project/4-state-management/README.md +++ b/translations/uk/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap Замість того, щоб бігати по колу, ми створимо **централізовану систему управління станом**. Уявіть це як одну дуже організовану людину, яка відповідає за всі важливі речі: -![Схема, що показує потоки даних між HTML, діями користувача та станом](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.uk.png) +![Схема, що показує потоки даних між HTML, діями користувача та станом](../../../../translated_images/data-flow.fa2354e0908fecc8.uk.png) ```mermaid flowchart TD diff --git a/translations/uk/7-bank-project/4-state-management/assignment.md b/translations/uk/7-bank-project/4-state-management/assignment.md index 638e45063..166e06579 100644 --- a/translations/uk/7-bank-project/4-state-management/assignment.md +++ b/translations/uk/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **Очікуваний результат:** Після завершення цього завдання ваш банківський додаток повинен мати повністю функціональну функцію "Додати транзакцію", яка виглядає та працює професійно: -![Скріншот, що показує приклад діалогу "Додати транзакцію"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png) +![Скріншот, що показує приклад діалогу "Додати транзакцію"](../../../../translated_images/dialog.93bba104afeb79f1.uk.png) ## Тестування вашої реалізації diff --git a/translations/uk/7-bank-project/README.md b/translations/uk/7-bank-project/README.md index a59246615..f791abded 100644 --- a/translations/uk/7-bank-project/README.md +++ b/translations/uk/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: У цьому проєкті ви навчитеся створювати вигаданий банк. Ці уроки включають інструкції щодо створення макету веб-додатку, налаштування маршрутів, створення форм, управління станом і отримання даних з API, з якого можна отримати дані банку. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.uk.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.uk.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.uk.png) | |--------------------------------|--------------------------------| ## Уроки diff --git a/translations/uk/8-code-editor/1-using-a-code-editor/README.md b/translations/uk/8-code-editor/1-using-a-code-editor/README.md index 89b4c61b5..7466c69cf 100644 --- a/translations/uk/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/uk/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev приносить ці можливості у ваш браузер Коли все завантажиться, ви побачите красиво оформлений робочий простір, створений для того, щоб ви могли зосередитися на найважливішому — вашому коді! -![Інтерфейс VSCode.dev за замовчуванням](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.uk.png) +![Інтерфейс VSCode.dev за замовчуванням](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.uk.png) **Ось ваш тур по околицях:** - **Панель активності** (та смужка зліва): Ваш основний навігатор з Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 та Settings ⚙️ @@ -233,7 +233,7 @@ flowchart TB 1. Перейдіть на [vscode.dev](https://vscode.dev), якщо ви ще не там 2. Знайдіть кнопку "Open Remote Repository" на екрані привітання та натисніть її - ![Відкриття віддаленого репозиторію](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.uk.png) + ![Відкриття віддаленого репозиторію](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.uk.png) 3. Вставте будь-який URL репозиторію GitHub (спробуйте цей: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Натисніть Enter і спостерігайте за магією! @@ -242,7 +242,7 @@ flowchart TB Хочете відчути себе чарівником програмування? Спробуйте цей ярлик клавіатури: Ctrl+Shift+P (або Cmd+Shift+P на Mac), щоб відкрити Command Palette: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.uk.png) +![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.uk.png) **Command Palette — це як пошукова система для всього, що ви можете зробити:** - Введіть "open remote", і вона знайде відкривач репозиторіїв для вас @@ -304,7 +304,7 @@ flowchart TB 3. Введіть назву файлу, включаючи відповідне розширення (`style.css`, `script.js`, `index.html`) 4. Натисніть Enter, щоб створити файл -![Створення нового файлу](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.uk.png) +![Створення нового файлу](../../../../translated_images/create-new-file.2814e609c2af9aeb.uk.png) **Правила іменування:** - Використовуйте описові назви, які вказують на призначення файлу @@ -386,7 +386,7 @@ mindmap 2. Переглядайте або шукайте щось конкретне 3. Натисніть на те, що здається цікавим, щоб дізнатися більше -![Інтерфейс маркетплейсу розширень](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.uk.png) +![Інтерфейс маркетплейсу розширень](../../../../translated_images/extensions.eca0e0c7f59a10b5.uk.png) **Що ви побачите там:** @@ -439,7 +439,7 @@ mindmap 3. Виберіть "Extension Settings" у випадаючому меню 4. Налаштуйте все так, щоб це відповідало вашому робочому процесу -![Налаштування розширень](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.uk.png) +![Налаштування розширень](../../../../translated_images/extension-settings.21c752ae4f4cdb78.uk.png) **Загальні речі, які ви можете налаштувати:** - Як форматувати ваш код (табуляція проти пробілів, довжина рядка тощо) diff --git a/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md index 4e2f3b03e..65d8d194d 100644 --- a/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **Напишіть** повідомлення про коміт: "Додано початкову структуру HTML" 5. **Натисніть** "Commit new file", щоб зберегти зміни -![Створення початкового файлу на GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.uk.png) +![Створення початкового файлу на GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.uk.png) **Що забезпечує це початкове налаштування:** - **Встановлює** правильну структуру документа HTML5 із семантичними елементами @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **Індикатор успіху**: Ви повинні побачити файли вашого проєкту у боковій панелі Explorer, а `index.html` буде доступний для редагування у головній області редактора. -![Проєкт завантажено у VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.uk.png) +![Проєкт завантажено у VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.uk.png) **Що ви побачите в інтерфейсі:** - **Бокова панель Explorer**: **Відображає** файли вашого репозиторію та структуру папок @@ -448,7 +448,7 @@ li:before { **Результати після встановлення:** Після встановлення CodeSwing ви побачите живий попередній перегляд вашого вебсайту-резюме в редакторі. Це дозволяє вам бачити, як виглядає ваш сайт, у міру внесення змін. -![Розширення CodeSwing показує живий попередній перегляд](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.uk.png) +![Розширення CodeSwing показує живий попередній перегляд](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.uk.png) **Розуміння покращеного інтерфейсу:** - **Розділений вигляд**: **Показує** ваш код з одного боку та живий попередній перегляд з іншого diff --git a/translations/uk/9-chat-project/README.md b/translations/uk/9-chat-project/README.md index 60fc454b2..b663e5ab4 100644 --- a/translations/uk/9-chat-project/README.md +++ b/translations/uk/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Ось як виглядатиме ваш готовий проєкт: -![Інтерфейс чату, що показує розмову між користувачем і AI-асистентом](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.uk.png) +![Інтерфейс чату, що показує розмову між користувачем і AI-асистентом](../../../translated_images/screenshot.0a1ee0d123df681b.uk.png) ## 🗺️ Ваш навчальний шлях через розробку AI-додатків @@ -194,7 +194,7 @@ mindmap **Основний принцип**: Розробка AI-додатків поєднує традиційні навички веб-розробки з інтеграцією AI-сервісів, створюючи інтелектуальні додатки, які здаються природними і чуйними для користувачів. -![Інтерфейс GitHub Models AI Playground з вибором моделі і тестовою зоною](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.uk.png) +![Інтерфейс GitHub Models AI Playground з вибором моделі і тестовою зоною](../../../translated_images/playground.d2b927122224ff8f.uk.png) **Ось що робить Playground таким корисним:** - **Спробуйте** різні AI-моделі, такі як GPT-4o-mini, Claude та інші (усі безкоштовні!) @@ -204,7 +204,7 @@ mindmap Після того, як ви трохи пограєте, просто натисніть вкладку "Code" і виберіть вашу мову програмування, щоб отримати код для реалізації. -![Вибір Playground, що показує опції генерації коду для різних мов програмування](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.uk.png) +![Вибір Playground, що показує опції генерації коду для різних мов програмування](../../../translated_images/playground-choice.1d23ba7d407f4758.uk.png) ## Налаштування бекенд-інтеграції на Python @@ -2102,14 +2102,14 @@ mindmap - **Перейдіть** до [репозиторію Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Натисніть** "Use this template" у верхньому правому куті (переконайтеся, що ви увійшли до GitHub) -![Інтерфейс створення з шаблону з зеленою кнопкою "Use this template"](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.uk.png) +![Інтерфейс створення з шаблону з зеленою кнопкою "Use this template"](../../../translated_images/template.67ad477109d29a2b.uk.png) **Крок 2: Запуск Codespaces** - **Відкрийте** щойно створений репозиторій - **Натисніть** зелену кнопку "Code" і виберіть "Codespaces" - **Виберіть** "Create codespace on main", щоб запустити середовище розробки -![Інтерфейс створення Codespace з опціями для запуску хмарного середовища розробки](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.uk.png) +![Інтерфейс створення Codespace з опціями для запуску хмарного середовища розробки](../../../translated_images/codespace.bcecbdf5d2747d3d.uk.png) **Крок 3: Налаштування середовища** Після завантаження Codespace ви отримаєте доступ до: diff --git a/translations/uk/README.md b/translations/uk/README.md index 8c8de57d1..f6e9e1f54 100644 --- a/translations/uk/README.md +++ b/translations/uk/README.md @@ -1,177 +1,188 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +# Веб-розробка для початківців - навчальна програма + +Вивчіть основи веб-розробки за нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків детально розглядає JavaScript, CSS та HTML через практичні проекти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою ефективної педагогіки на основі проектів. Починайте свій шлях у кодуванні сьогодні! -# Веб-розробка для початківців - Курс +Приєднуйтесь до спільноти Azure AI Foundry Discord -Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та закріплюйте знання завдяки нашій ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні! +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +Виконайте ці кроки, щоб почати користуватися цими ресурсами: +1. **Зробіть форк репозиторію**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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) -Приєднуйтесь до спільноти Azure AI Foundry у Discord +### 🌐 Підтримка багатьох мов -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +#### Підтримується через GitHub Action (автоматично та завжди актуально) -Виконайте ці кроки, щоб почати використовувати ці ресурси: -1. **Форкніть репозиторій**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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) + +[Арабська](../ar/README.md) | [Бенгальська](../bn/README.md) | [Болгарська](../bg/README.md) | [Бирманська (М’янма)](../my/README.md) | [Китайська (спрощена)](../zh/README.md) | [Китайська (традиційна, Гонконг)](../hk/README.md) | [Китайська (традиційна, Макао)](../mo/README.md) | [Китайська (традиційна, Тайвань)](../tw/README.md) | [Хорватська](../hr/README.md) | [Чеська](../cs/README.md) | [Данська](../da/README.md) | [Голландська](../nl/README.md) | [Естонська](../et/README.md) | [Фінська](../fi/README.md) | [Французька](../fr/README.md) | [Німецька](../de/README.md) | [Грецька](../el/README.md) | [Іврит](../he/README.md) | [Гінді](../hi/README.md) | [Угорська](../hu/README.md) | [Індонезійська](../id/README.md) | [Італійська](../it/README.md) | [Японська](../ja/README.md) | [Каннада](../kn/README.md) | [Корейська](../ko/README.md) | [Литовська](../lt/README.md) | [Малайська](../ms/README.md) | [Малаялам](../ml/README.md) | [Маратхі](../mr/README.md) | [Непальська](../ne/README.md) | [Нігерійський Піджин](../pcm/README.md) | [Норвезька](../no/README.md) | [Перська (фарсі)](../fa/README.md) | [Польська](../pl/README.md) | [Португальська (Бразилія)](../br/README.md) | [Португальська (Португалія)](../pt/README.md) | [Пенджабі (гурмухі)](../pa/README.md) | [Румунська](../ro/README.md) | [Російська](../ru/README.md) | [Сербська (кирилиця)](../sr/README.md) | [Словацька](../sk/README.md) | [Словенська](../sl/README.md) | [Іспанська](../es/README.md) | [Суахілі](../sw/README.md) | [Шведська](../sv/README.md) | [Тагалог (філіппінська)](../tl/README.md) | [Тамільська](../ta/README.md) | [Телугу](../te/README.md) | [Тайська](../th/README.md) | [Турецька](../tr/README.md) | [Українська](./README.md) | [Урду](../ur/README.md) | [В’єтнамська](../vi/README.md) -### 🌐 Підтримка багатьох мов +> **Надаєте перевагу клонуванню локально?** -#### Підтримується через GitHub Action (автоматично та завжди актуально) +> У цьому репозиторії міститься 50+ мовних перекладів, що значно збільшує розмір завантаження. Щоб клонувати без перекладів, використайте sparse checkout: +> ```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' +> ``` +> Це дасть вам усе необхідне для проходження курсу з набагато швидшим завантаженням. + - -[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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](./README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) - +**Якщо ви хочете додаткові переклади, підтримувані мови наведені [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -**Якщо ви хочете додати додаткові переклади, список підтримуваних мов знаходиться [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +[![Відкрити у Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +#### 🧑‍🎓 _Ви студент?_ -#### 🧑‍🎓 _Ви студент?_ +Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть можливості отримати безкоштовний сертифікат. Цю сторінку варто додати до закладок і час від часу перевіряти, оскільки ми щомісяця оновлюємо контент. -Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний ваучер на сертифікацію. Це сторінка, яку варто додати в закладки та перевіряти час від часу, оскільки ми щомісяця оновлюємо контент. +### 📣 Оголошення - Нові завдання режиму GitHub Copilot Agent для виконання! -### 📣 Оголошення - Нові виклики з режимом GitHub Copilot Agent! +Додано нове завдання, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання для вас, щоб виконати його за допомогою GitHub Copilot і режиму Agent. Якщо ви не використовували режим Agent раніше, він здатен не лише генерувати текст, а й створювати та редагувати файли, запускати команди та інше. -Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це новий виклик для вас, який можна виконати за допомогою GitHub Copilot і режиму Agent. Якщо ви ще не використовували режим Agent, він здатний не лише генерувати текст, але й створювати та редагувати файли, виконувати команди тощо. +### 📣 Оголошення - _Новий проект для створення за допомогою генеративного ШІ_ -### 📣 Оголошення - _Новий проєкт для створення за допомогою генеративного ШІ_ +Новий проект AI Assistant лише додано, перегляньте його [тут](./9-chat-project/README.md) -Додано новий проєкт AI Assistant, ознайомтеся з ним [тут](./09-chat-project/README.md) +### 📣 Оголошення - _Нова навчальна програма_ з генеративного ШІ для JavaScript щойно випущена -### 📣 Оголошення - _Новий курс_ з генеративного ШІ для JavaScript +Не пропустіть нашу нову навчальну програму генеративного ШІ! -Не пропустіть наш новий курс з генеративного ШІ! +Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати! -Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати! +![Фон](../../translated_images/background.148a8d43afde5730.uk.png) -![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png) +- Уроки, що охоплюють все від основ до RAG. +- Взаємодійте з історичними персонажами за допомогою GenAI і нашого супутнього додатку. +- Весела та захоплююча розповідь, ви будете подорожувати в часі! -- Уроки, що охоплюють все від основ до RAG. -- Взаємодія з історичними персонажами за допомогою GenAI та нашого додатку-компаньйона. -- Захоплюючий наратив, ви будете подорожувати в часі! +![персонаж](../../translated_images/character.5c0dd8e067ffd693.uk.png) -![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png) +Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам у вивченні таких тем: +- Запити і інженерія запитів +- Генерація додатків для тексту та зображень +- Пошукові додатки -Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам вивчити такі теми, як: -- Створення запитів і їх оптимізація -- Генерація тексту та зображень -- Пошукові додатки +Відвідайте [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), щоб почати! -Відвідайте [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)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте свої знання за допомогою вікторини після лекції. +> **Вчителі**, ми включили [деякі поради](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді вашому відгуку [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -Щоб покращити свій досвід навчання, спілкуйтеся з однолітками для спільної роботи над проєктами! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде доступна для відповіді на ваші запитання. +**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з передлекційної вікторини, потім ознайомлюйтеся з матеріалом лекції, виконуйте різні вправи і перевіряйте розуміння за допомогою післялекційної вікторини. -Для подальшого навчання ми настійно рекомендуємо дослідити [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?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 з копією курсу. +Ця навчальна програма має готове середовище розробки! Починаючи роботу, ви можете вибрати запуск програми у [Codespace](https://github.com/features/codespaces/) (_середовище на базі браузера, без потреби встановлення_), або локально на вашому комп’ютері за допомогою текстового редактора, наприклад, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -Виконайте ці кроки: -1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки. -2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +#### Створіть свій репозиторій +Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому акаунті GitHub з копією навчальної програми. -#### Запуск курсу в Codespace +Виконайте ці кроки: +1. **Зробіть форк репозиторію**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки. +2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи. +#### Запуск навчальної програми у Codespace -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png) +У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи. -#### Запуск курсу локально на вашому комп'ютері +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.uk.png) -Щоб запустити цей курс локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти для кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас. +#### Запуск навчальної програми локально на вашому комп’ютері -Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як ваш редактор, який також має вбудований [Термінал](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-getting-started-lessons/1-intro-to-programming-languages), допоможе вам дослідити різні варіанти для кожного з цих інструментів та обрати найкращий для вас. -1. Клонуйте свій репозиторій на комп'ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL: +Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [термінал](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). - [CodeSpace](./images/createcodespace.png) +1. Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL: - Потім відкрийте [Термінал](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) і виконайте наступну команду, замінивши `` на URL, який ви щойно скопіювали: + [CodeSpace](./images/createcodespace.png) + Потім відкрийте [Термінал](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) і виконайте наступну команду, замінивши `` на URL, який ви щойно скопіювали: ```bash git clone ``` - -2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** і вибравши папку, яку ви щойно клонували. -> Рекомендовані розширення для Visual Studio Code: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - допоможе вам писати код швидше +2. Відкрийте папку у Visual Studio Code. Це можна зробити, клацнувши **Файл** > **Відкрити папку** та вибравши щойно клоновану папку. + + +> Рекомендовані розширення Visual Studio Code: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code +> * [Copilot](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/), додаток для тестів можна запустити локально або розгорнути в Azure; дотримуйтесь інструкцій у папці `quiz-app`. +> **Примітка щодо тестів**: Всі тести знаходяться у папці Quiz-app, всього 48 тестів по три питання кожен. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток тесту можна запускати локально або розгортати в Azure; слідуйте інструкціям у папці `quiz-app`. ## 🗃️ Уроки -| | Назва проєкту | Вивчені концепти | Навчальні цілі | Посилання на урок | Автор | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Початок роботи | Вступ до програмування та інструментів розробника | Дізнайтеся основи більшості мов програмування та про програмне забезпечення, яке допомагає професійним розробникам виконувати свою роботу | [Вступ до мов програмування та інструментів розробника](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проєкті, як співпрацювати з іншими над кодовою базою | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Початок роботи | Доступність | Вивчіть основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Основи JS | Типи даних у JavaScript | Основи типів даних у JavaScript | [Типи даних](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Основи JS | Функції та методи | Дізнайтеся про функції та методи для управління логікою додатка | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | Основи JS | Прийняття рішень у JS | Дізнайтеся, як створювати умови у вашому коді за допомогою методів прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів та циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Тераріум](./3-terrarium/solution/README.md) | HTML на практиці | Створіть HTML для онлайн-тераріуму, зосереджуючись на створенні макета | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Тераріум](./3-terrarium/solution/README.md) | CSS на практиці | Створіть CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включаючи адаптивність | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання у JavaScript, маніпуляція DOM | Створіть JavaScript для функціонування тераріуму як інтерфейсу перетягування, зосереджуючись на замиканнях та маніпуляції DOM | [Замикання у JavaScript, маніпуляція DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка | [Програмування, кероване подіями](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнайтеся, як працюють браузери, їх історію, і як створити перші елементи розширення для браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створіть JavaScript-елементи вашого розширення для браузера, щоб викликати API, використовуючи змінні, збережені у локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Фонові процеси у браузері, продуктивність вебу | Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та оптимізації | [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Космічна гра](./6-space-game/solution/README.md) | Більш просунута розробка ігор з JavaScript | Дізнайтеся про наслідування, використовуючи як класи, так і композицію, а також патерн Pub/Sub, готуючись до створення гри | [Вступ до просунутої розробки ігор](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на canvas | Дізнайтеся про Canvas API, який використовується для малювання елементів на екрані | [Малювання на canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнайтеся, як елементи можуть рухатися, використовуючи декартові координати та Canvas API | [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробіть так, щоб елементи стикалися та реагували один на одного, використовуючи натискання клавіш, і забезпечте функцію затримки для продуктивності гри | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Космічна гра](./6-space-game/solution/README.md) | Підрахунок очок | Виконуйте математичні обчислення на основі статусу та продуктивності гри | [Підрахунок очок](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Космічна гра](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Дізнайтеся, як завершувати та перезапускати гру, включаючи очищення ресурсів та скидання значень змінних | [Умови завершення](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути у веб-додатку | Дізнайтеся, як створити структуру багатосторінкового вебсайту, використовуючи маршрути та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Дізнайтеся, як створювати форми та обробляти процедури перевірки | [Форми](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять у ваш додаток, як їх отримувати, зберігати та видаляти | [Дані](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепти управління станом | Дізнайтеся, як ваш додаток зберігає стан і як ним керувати програмно | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Код у браузері/VScode](../../8-code-editor) | Робота з VScode | Дізнайтеся, як використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з AI | Дізнайтеся, як створити власного AI-асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris | +| | Назва проєкту | Теми, що викладаються | Навчальні цілі | Пов’язаний урок | Автор | +| :-: | :--------------------------------------------------------: | :----------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Початок роботи | Вступ до програмування та інструменти професії | Дізнатися основи більшості мов програмування та про ПЗ, що допомагає професійним розробникам у роботі | [Вступ до мов програмування та інструментів професії](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Початок роботи | Основи GitHub, робота у команді | Як використовувати GitHub у вашому проєкті, як співпрацювати з іншими над кодовою базою | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Основи JS | Типи даних JavaScript | Основи типів даних у JavaScript | [Типи даних](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Основи JS | Функції та методи | Вивчити функції та методи для керування логікою додатка | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | Основи JS | Прийняття рішень у JS | Навчитися створювати умови у коді за допомогою методів прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Основи JS | Масиви та цикли | Працювати з даними, використовуючи масиви та цикли у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Тераріум](./3-terrarium/solution/README.md) | Практика HTML | Побудувати HTML для створення онлайн-тераріуму, зосереджуючись на верстці | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Тераріум](./3-terrarium/solution/README.md) | Практика CSS | Побудувати CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включно з адаптивністю сторінки | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання JavaScript, робота з DOM | Побудувати JavaScript для функціонування тераріуму з інтерфейсом перетягування, з акцентом на замикання та роботу з DOM | [Замикання JS, робота з DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Гра на набір тексту](./4-typing-game/solution/README.md) | Створення гри на друку | Навчитися використовувати події клавіатури для управління логікою вашого JS-додатка | [Програмування на подіях](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Зелений Розширення для браузера](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчити, як працюють браузери, їхню історію та як створити перші елементи розширення браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Зелений Розширення для браузера](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API з використанням змінних, збережених у локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Зелений Розширення для браузера](./5-browser-extension/solution/README.md) | Фонові процеси у браузері, веб-продуктивність | Використовувати фонова процеси браузера для керування іконкою розширення; вивчити продуктивність вебу та деякі оптимізації місця | [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Космічна гра](./6-space-game/solution/README.md) | Розширена розробка ігор на JavaScript | Вивчити наслідування через Класи та Композицію та патерн Pub/Sub у підготовці до створення гри | [Вступ до розширеної розробки ігор](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на canvas | Вивчити Canvas API, який використовується для малювання на екрані | [Малювання на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення елементів на екрані | Дізнатися, як елементи можуть рухатися, використовуючи декартові координати та Canvas API | [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробити зіткнення елементів і їхню реакцію, використовуючи натискання клавіш і функцію охолодження для збереження продуктивності | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Космічна гра](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати математичні обчислення, базовані на статусі та продуктивності гри | [Ведення рахунку](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Космічна гра](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Вивчити, як завершувати та перезапускати гру, включно з очищенням ресурсів і скиданням значень змінних | [Умови завершення](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони і маршрути у веб-додатку | Навчитися створювати каркас багатосторінкового сайту за допомогою маршрутизації та HTML-шаблонів | [HTML-шаблони і маршрути](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форм входу та реєстрації | Дізнатися про створення форм і обробку процедур валідації | [Форми](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Способи отримання та використання даних | Як дані надходять і виходять із додатка, як їх отримувати, зберігати та видаляти | [Дані](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепції управління станом | Вивчити, як додаток зберігає стан і як управляти ним програмно | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Код браузера/VScode](../../8-code-editor) | Робота з VScode | Навчіться використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI помічники](./9-chat-project/README.md) | Робота з ІІ | Навчіться створювати власного ІІ помічника | [Проєкт AI помічника](./9-chat-project/README.md) | Chris | ## 🏫 Педагогіка @@ -179,22 +190,22 @@ CO_OP_TRANSLATOR_METADATA: * навчання на основі проєктів * часті тести -Програма навчає основам JavaScript, HTML і CSS, а також найновішим інструментам і технікам, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друкування, віртуальний тераріум, екологічно чисте розширення для браузера, гру в стилі "космічних загарбників" і банківський додаток для бізнесу. До кінця серії студенти отримають міцне розуміння веб-розробки. +Програма викладає основи JavaScript, HTML і CSS, а також найсучасніші інструменти й техніки, які використовують сьогоднішні веб-розробники. Студенти матимуть змогу отримати практичний досвід, створюючи гру на друк, віртуальний тераріум, екологічне розширення для браузера, гру в стилі космічних загарбників та банківський додаток для бізнесу. Наприкінці курсу студенти отримають ґрунтовні знання веб-розробки. -> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn! +> 🎓 Ви можете пройти перші кілька уроків цієї програми як [навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn! -Забезпечуючи відповідність контенту проєктам, процес стає більш захоплюючим для студентів, а засвоєння концептів посилюється. Ми також написали кілька вступних уроків з основ JavaScript, які супроводжуються відео з колекції "[Серія для початківців: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі з авторів якої зробили внесок у цю навчальну програму. +Забезпечуючи відповідність контенту проєктам, процес стає більш захопливим для студентів, а засвоєння концепцій — кращим. Ми також створили кілька початкових уроків з основ JavaScript, поєднаних з відеоуроком із серії "[Початок роботи з JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі автори якої сприяли цій програмі. -Крім того, тест з низькими ставками перед уроком налаштовує студента на вивчення теми, а другий тест після уроку забезпечує подальше засвоєння. Ця навчальна програма була розроблена, щоб бути гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу. +Крім того, легкий тест перед заняттям формує намір студента вивчати тему, а другий тест після заняття забезпечує подальше засвоєння. Цю програму було спроєктовано, щоб вона була гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу. -Хоча ми свідомо уникали введення JavaScript-фреймворків, щоб зосередитися на базових навичках, необхідних веб-розробнику перед освоєнням фреймворків, наступним кроком після завершення цієї програми може бути вивчення Node.js через іншу колекцію відео: "[Серія для початківців: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Хоча ми цілеспрямовано уникали впровадження фреймворків JavaScript, щоб зосередитися на базових навичках, необхідних веб-розробнику до використання фреймворку, наступним логічним кроком після завершення цієї програми буде вивчення Node.js за допомогою іншої серії відеоуроків: "[Початкова серія по Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Відвідайте наші [Правила поведінки](CODE_OF_CONDUCT.md) та [Рекомендації щодо внеску](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки! +> Відвідайте наші [Правила поведінки](CODE_OF_CONDUCT.md) та [Внесок](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки! -## 🧭 Офлайн-доступ +## 🧭 Оффлайн доступ -Ви можете запустити цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`. +Ви можете запускати цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть це репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп’ютер і потім у кореневій папці цього репозиторію наберіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому локальному хості: `localhost:3000`. ## 📘 PDF @@ -202,12 +213,13 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git ## 🎒 Інші курси +Наша команда створює інші курси! Перегляньте: -Наша команда створює й інші курси! Ознайомтеся: - + ### LangChain [![LangChain4j для початківців](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js для початківців](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) + --- ### Azure / Edge / MCP / Агенти @@ -217,49 +229,49 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git [![AI Агенти для початківців](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Серія про генеративний AI -[![Генеративний AI для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Генеративний AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![Генеративний AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![Генеративний AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) + +### Серія Генеративного ШІ +[![Генеративний ШІ для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Генеративний ШІ (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Генеративний ШІ (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Генеративний ШІ (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - + ### Основне навчання -[![ML для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Наука про дані для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Машинне навчання для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![ШІ для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![Кібербезпека для початківців](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Веб-розробка для початківців](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![IoT для початківців](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![Розробка XR для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Розробка для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Серія Copilot -[![Copilot для парного програмування з AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot для спільного програмування з ШІ](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot для C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Пригоди з Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## Отримання допомоги -Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно. +Якщо ви застрягли або маєте будь-які питання щодо створення AI-додатків. Приєднуйтесь до інших учнів та досвідчених розробників у обговореннях MCP. Це підтримуюча спільнота, де вітаються питання і знання вільно обмінюються. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Якщо у вас є відгуки про продукт або виникають помилки під час створення, відвідайте: +Якщо у вас є відгуки про продукт або помилки під час розробки, відвідайте: -[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) +[![Форум розробників Microsoft Foundry](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Ліцензія -Цей репозиторій ліцензований за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації. +Цей репозиторій ліцензовано за ліцензією MIT. Докладніше дивіться в файлі [LICENSE](../../LICENSE). --- **Відмова від відповідальності**: -Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу. +Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу. \ No newline at end of file diff --git a/translations/uk/for-teachers.md b/translations/uk/for-teachers.md index f649af87e..c253003a1 100644 --- a/translations/uk/for-teachers.md +++ b/translations/uk/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud має обмежену підтримку Common Cartridge. Віддавайте перевагу файлу Moodle вище, який також можна завантажити в Canvas. - Після імпорту перегляньте модулі, дати здачі та налаштування вікторин, щоб вони відповідали вашому розкладу. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.uk.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.uk.png) > Навчальна програма в Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.uk.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.uk.png) > Навчальна програма в Canvas ### Використання репозиторію напряму (без Classroom)