HTML - What is a Web API?
ஒரு வலை API என்பது ஒரு உருவாக்குநரின் கனவாகும்.
- இது உலாவியின் செயல்பாட்டை விரிவுபடுத்தும்
- இது சிக்கலான செயல்பாடுகளை பெரிதும் எளிமைப்படுத்தும்
- இது சிக்கலான குறியீட்டிற்கு எளிய தொடரியலை வழங்கும்
வலை API என்றால் என்ன?
API என்பது Application Programming Interface (பயன்பாட்டு நிரலாக்க இடைமுகம்) என்பதைக் குறிக்கிறது. ஒரு API என்பது ஒரு வகை இடைமுகமாகும், இது ஒரு பயன்பாடு, இயக்க முறைமை அல்லது பிற சேவைகளின் குறிப்பிட்ட அம்சங்கள் அல்லது தரவுகளை அணுக உருவாக்குநர்களை அனுமதிக்கும் செயல்பாடுகள் மற்றும் உபவினைகளின் தொகுப்பை உள்ளடக்கியது.
ஒரு வலை API என்பது வலையிற்கான பயன்பாட்டு நிரலாக்க இடைமுகமாகும்.
API இன் பங்கு:
API கள் வெவ்வேறு மென்பொருள் கூறுகள் ஒன்றுடன் ஒன்று தொடர்பு கொள்ள அனுமதிக்கும் "இடைநிலைகள்" ஆகும். அவை ஒரு பயன்பாட்டின் உள் வேலைகளை வெளிப்படுத்தாமல், அதன் செயல்பாடுகளைப் பயன்படுத்த உருவாக்குநர்களை அனுமதிக்கின்றன.
HTML API கள்
அனைத்து உலாவிகளிலும் சிக்கலான செயல்பாடுகளை ஆதரிக்கவும், தரவுகளை அணுகுவதற்கு உதவவும் உள்ளமைக்கப்பட்ட வலை API களின் தொகுப்பு உள்ளது.
இங்கே முக்கிய HTML5 API களில் சில உள்ளன:
1. Geolocation API
இந்த API ஒரு பயனரின் தற்போதைய இடத்தை (அட்சரேகை மற்றும் தீர்க்கரேகையுடன்) அணுக பயன்படுகிறது.
2. Drag and Drop API
இந்த API உலாவிகளில் இழுத்து-விடு அம்சங்களைப் பயன்படுத்த உங்களை இயக்கும்.
3. Web Storage API
இந்த API க்கு உலாவிகள் விசை/மதிப்பு ஜோடிகளை சேமிக்க அனுமதிக்கும் வழிமுறைகள் உள்ளன (குக்கீகளை விட மிகவும் உள்ளுணர்வு வழியில்).
4. Web Workers API
இந்த API ஒரு JavaScript பக்கத்தின் செயல்திறனை பாதிக்காமல் பின்னணியில் இயங்க அனுமதிக்கிறது. வலைப் பணியாளர் பின்னணியில் இயங்கும் போது, பயனர்கள் எதையும் செய்ய முடியும்: கிளிக் செய்தல், விஷயங்களைத் தேர்ந்தெடுத்தல் போன்றவை.
5. Server-Sent Events API
இந்த API ஒரு வலைப்பக்கத்தை ஒரு சர்வரில் இருந்து தானாக புதுப்பிப்புகளைப் பெற அனுமதிக்கிறது.
6. Canvas API
இந்த API JavaScript மூலம் உடனடியாக கிராபிக்ஸை வரைய உங்களை அனுமதிக்கிறது.
HTML API களைப் பயன்படுத்துவது பற்றிய குறிப்புகள்
ஒரு HTML API ஐ செயல்படுத்தும்போது, நீங்கள் எப்போதும்:
உலாவி திறனைச் சரிபார்க்கவும்
இலக்கு உலாவிகள் API ஐ ஆதரிக்கின்றன என்பதை எப்போதும் சரிபார்க்கவும். ஒரு உலாவி அதை ஆதரிக்கவில்லை என்றால் இயக்கப்பட வேண்டிய ஸ்கிரிப்ட் அல்லது செய்தியை எப்போதும் சேர்க்கவும்.
// உலாவி ஆதரவைச் சரிபார்க்கவும்
if (navigator.geolocation) {
// API ஆதரிக்கப்படுகிறது
} else {
// API ஆதரிக்கப்படவில்லை
alert("உங்கள் உலாவி Geolocation API ஐ ஆதரிக்கவில்லை");
}வலுவான பிழைக் கையாளுதலைச் சேர்க்கவும்
ஒரு API எதிர்பார்க்கப்பட்டபடி செயல்படாத சூழ்நிலைகளைக் கவனிக்க, வலுவான பிழைக் கையாளுதலைச் சேர்க்கவும், இது தடையற்ற பயனர் அனுபவத்தை உறுதி செய்யும்.
பயனர் அனுமதியைக் கோரவும்
Geolocation API போன்ற உணர்திறன் தரவுகளை அணுகும் API ஐப் பயன்படுத்தும்போது (இது பயனரின் புவியியல் நிலையை அணுகும்), தொடர்வதற்கு முன் எப்போதும் பயனரின் சம்மதத்தைக் கேளுங்கள்.
மூன்றாம் தரப்பு API கள்
மூன்றாம் தரப்பு API கள் உங்கள் உலாவியில் உள்ளமைக்கப்பட்டவை அல்ல.
இந்த API களைப் பயன்படுத்த, நீங்கள் வலைத்தளத்திலிருந்து குறியீட்டைப் பதிவிறக்கம் செய்ய வேண்டும்.
YouTube API
ஒரு வலைத்தளத்தில் காணொளிகளைக் காட்ட உங்களை அனுமதிக்கிறது.
video.play() video.pause()Twitter API
ஒரு வலைத்தளத்தில் ட்வீட்களைக் காட்ட உங்களை அனுமதிக்கிறது.
tweet.load() tweet.embed()Facebook API
ஒரு வலைத்தளத்தில் Facebook தகவல்களைக் காட்ட உங்களை அனுமதிக்கிறது.
FB.login() FB.api()மூன்றாம் தரப்பு API விசைகள்:
பெரும்பாலான மூன்றாம் தரப்பு API களுக்கு உங்கள் பயன்பாட்டை அங்கீகரிக்க API விசை தேவைப்படுகிறது. இந்த விசைகள் பொதுவாக API வழங்குநரின் இணையதளத்தில் இலவசமாகப் பெறலாம்.
API பயன்பாட்டு எடுத்துக்காட்டு
Geolocation API எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<head>
<title>Geolocation Example - Jassif Team</title>
</head>
<body>
<h1>Geolocation API Example</h1>
<button onclick="getLocation()">எனது இருப்பிடத்தைப் பெறு</button>
<p id="demo"></p>
<script>
function getLocation() {
// 1. உலாவி ஆதரவைச் சரிபார்க்கவும்
if (navigator.geolocation) {
// 2. பயனர் அனுமதியைக் கோரவும்
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
// 3. பிழைக் கையாளுதல்
document.getElementById("demo").innerHTML =
"உங்கள் உலாவி Geolocation API ஐ ஆதரிக்கவில்லை.";
}
}
function showPosition(position) {
// API வெற்றிகரமாக பதிலளித்தது
document.getElementById("demo").innerHTML =
"அட்சரேகை: " + position.coords.latitude +
"<br>தீர்க்கரேகை: " + position.coords.longitude;
}
function showError(error) {
// 4. வலுவான பிழைக் கையாளுதல்
switch(error.code) {
case error.PERMISSION_DENIED:
document.getElementById("demo").innerHTML =
"பயனர் இருப்பிட அனுமதியை மறுத்தார்.";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("demo").innerHTML =
"இருப்பிடத் தகவல் கிடைக்கவில்லை.";
break;
case error.TIMEOUT:
document.getElementById("demo").innerHTML =
"இருப்பிடக் கோரிக்கை காலாவதியானது.";
break;
case error.UNKNOWN_ERROR:
document.getElementById("demo").innerHTML =
"அறியப்படாத பிழை ஏற்பட்டது.";
break;
}
}
</script>
</body>
</html>