جلسه 21 آموزش HTML رایا وردپرس: تا اینجای کار با کلی تگ و ویژگی توی HTML آشنا شدی، ولی دنیای وب خیلی فراتر از این چیزاست! یه چیزی هست که باعث می‌شه سایت‌ها با همدیگه حرف بزنن و تبادل اطلاعاتی داشته باشن ، حتی به امکانات مرورگر و سیستم دسترسی داشته باشن. بله! دارم درباره API صحبت میکنم. 😎
اگه نمی‌دونی API چیه و چطوری توی HTML استفاده می‌شه، این مقاله خیلی بهت کمک میکنه! بیا با هم یه گشت و گذار بزنیم و ببینیم چطور API ها زندگی ما رو راحت‌تر می‌کنن. 😍
API چیست؟ 🤔
API یا Application Programming Interface به زبان ساده یه واسطه‌ست که به دو برنامه یا سیستم اجازه میده با همدیگه ارتباط برقرار کنن. توی دنیای وب، API ها بهت این امکان رو می‌دن که اطلاعاتی رو از یه سرویس بگیری یا بهش بفرستی، بدون اینکه نیاز باشه بری و خودت کدهای اون سرویس رو بنویسی! ✨
مثلاً وقتی توی یه سایت وضعیت آب‌وهوا رو می‌بینی، اون سایت داره از یه API هواشناسی اطلاعات رو دریافت میکنه و بهت نمایش میده.
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
بزار ساده تر برات توضیح بدم:
فرض کن تو یه رستوران نشستی و منو رو نگاه میکنی. آشپز (سرور سایت) غذات رو آماده میکنه، اما تو مستقیماً باهاش ارتباط نداری! اینجا پیشخدمت نقش API رو بازی میکنه:
- تو (کاربر) ← منو (فرانت اند) ← پیشخدمت (API) ← آشپز (سرور)
در دنیای وب هم API مثل همون پیشخدمته! 🍽️ یه واسطه که به اپلیکیشن ها (مثل صفحه HTML تو) اجازه میده با سرور یا سرویس های خارجی صحبت کنن و داده ها رو بگیرن یا بفرستن.
چرا API اینقدر مهمه؟ 🤔
- بدون دردسر کدنویسی پیچیده از امکانات بقیه استفاده میکنی! (مثلاً نمایش نقشه گوگل 🗺️)
- داده‌های زنده و لحظه‌ای مثل وضعیت آب و هوا ☀️ یا قیمت ارز 💵 رو مستقیم به سایتت اضافه میکنی.
- صفحات وب رو داینامیک و حرفه‌ای میکنی تا تجربه کاربرها بهتر بشه! 🔥
انواع API ها در وب 🌐
۱. Web API (رایج ترین نوع)
این APIها از طریق پروتکل HTTP کار می‌کنن و معمولاً داده‌ها رو با JSON یا XML ارسال و دریافت می‌کنن. بیشتر برای ارتباط بین سرورها و کلاینت‌ها (مثلاً وب‌سایت و سرور) استفاده میشن.
🔹 مثال‌ها:
- Google Maps API (برای نمایش نقشه گوگل در سایت)
- Weather API (برای دریافت اطلاعات آب و هوا)
- Instagram API / Twitter API (برای کار با داده‌های شبکه‌های اجتماعی)
۲. Browser API (API های مرورگر)
این APIها مستقیماً داخل مرورگر اجرا میشن و بهت اجازه می‌دن از امکانات مرورگر و سیستم کاربر استفاده کنی، بدون نیاز به افزونه یا نرم‌افزار اضافی.
🔹 چند نمونه مهم:
- Geolocation API 🗺️ (دریافت موقعیت مکانی کاربر)
- Web Storage API 💾 (ذخیره‌سازی داده‌ها در مرورگر مثل
localStorageوsessionStorage) - Canvas API 🎨 (برای طراحی گرافیک و تصاویر در مرورگر)
- Fetch API 🔄 (برای ارسال و دریافت داده‌ها از سرور)
- Web Worker API ⚡ (اجرای کد در پس‌زمینه بدون کند شدن صفحه)
- Server-Sent Events (SSE) API 📡 (دریافت داده‌های زنده از سرور بدون درخواست مداوم)
۳. Third-party API (API های شخص ثالث)
این APIها توسط شرکت‌ها و سرویس‌های مختلف ارائه میشن تا توسعه‌دهنده‌ها بتونن از قابلیت‌ها و داده‌های اون سرویس‌ها استفاده کنن. معمولاً نیاز به ثبت‌نام و دریافت کلید API (API Key) دارن.
🔹 مثال‌ها:
- Google APIs (برای سرویس‌های گوگل مثل یوتیوب، جیمیل، گوگل مپ و غیره)
- Facebook API (برای کار با داده‌های فیسبوک و احراز هویت)
چطور از API ها در HTML استفاده کنیم؟ 🛠️
حالا میرسیم به قسمت جذاب ماجرا – استفاده از API ها در کدهای HTML! برای این کار معمولاً به کمی JavaScript نیاز داریم. نگران نباش، مثال‌های ساده میزنم تا کاملاً متوجه بشی. 😊
مثال ۱: استفاده از Geolocation API 📍(برای دریافت موقعیت جغرافیایی کاربر (با اجازه خودش!) )
<!DOCTYPE html>
<html>
<head>
<title>موقعیت مکانی من</title>
</head>
<body>
<h1>موقعیت مکانی من کجاست؟ 🗺️</h1>
<button onclick="getLocation()">نمایش موقعیت من</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML = "مرورگر شما از موقعیت‌یابی پشتیبانی نمی‌کند.";
}
}
function showPosition(position) {
document.getElementById("demo").innerHTML =
"عرض جغرافیایی: " + position.coords.latitude +
"<br>طول جغرافیایی: " + position.coords.longitude;
}
</script>
</body>
</html>
مثال ۲: استفاده از Local Storage API 💾 (ذخیره اطلاعات در مرورگر کاربر، تا حتی پس از بستن صفحه باقی بماند)
فرض کن می‌خواهی کاربر اسمش رو داخل یه فیلد ورودی وارد کنه، بعد اسمش ذخیره بشه و حتی اگه صفحه رفرش بشه، اطلاعات پاک نشن و توی مرورگر ذخیره بمونن باید اینشکلی بنویسی کدت رو:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Local Storage Example</title>
</head>
<body>
<input id="name" placeholder="اسمت رو بنویس">
<button onclick="saveUserName()">ذخیره</button>
<p id="msg"></p>
<script>
function saveUserName() {
const nameInput = document.getElementById('name');
localStorage.setItem('username', nameInput.value);
show();
}
function show() {
const username = localStorage.getItem('username');
if (username) {
document.getElementById('msg').innerText = `سلام ${username}! 😊`;
}
}
show();
</script>
</body>
</html>
مثال ۳: استفاده از Fetch API (برای دریافت اطلاعات از یک API خارجی )🌍
حالا بیاید یک مثال جذاب‌تر بزنیم. فرض کن می‌خوای اطلاعات ارزهای دیجیتال رو از یک سرویس خارجی تو سایتت نمایش بدی:
<!DOCTYPE html>
<html>
<head>
<title>قیمت ارزهای دیجیتال</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>قیمت لحظه‌ای ارزهای دیجیتال 💰</h1>
<button onclick="getCryptoPrices()">دریافت قیمت‌ها</button>
<div id="loading" style="display:none;">در حال بارگذاری... ⏳</div>
<table id="cryptoTable">
<tr>
<th>نام</th>
<th>قیمت (دلار)</th>
<th>تغییرات 24 ساعته</th>
</tr>
</table>
<script>
function getCryptoPrices() {
document.getElementById("loading").style.display = "block";
fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10')
.then(response => response.json())
.then(data => {
document.getElementById("loading").style.display = "none";
var table = document.getElementById("cryptoTable");
// پاک کردن ردیف‌های قبلی به جز هدر
while(table.rows.length > 1) {
table.deleteRow(1);
}
// اضافه کردن داده‌های جدید
data.forEach(coin => {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = coin.name + " (" + coin.symbol.toUpperCase() + ")";
cell2.innerHTML = "$" + coin.current_price;
var priceChange = coin.price_change_percentage_24h;
var color = priceChange >= 0 ? "green" : "red";
var arrow = priceChange >= 0 ? "▲" : "▼";
cell3.innerHTML = `<span style="color:${color}">${arrow} ${Math.abs(priceChange).toFixed(2)}%</span>`;
});
})
.catch(error => {
document.getElementById("loading").style.display = "none";
alert("خطا در دریافت اطلاعات! لطفاً دوباره تلاش کنید. ❌");
console.error('Error:', error);
});
}
</script>
</body>
</html>
در کد بالا از CoinGecko API برای دریافت قیمت لحظه‌ای ارزهای دیجیتال استفاده شده و اون‌ها رو داخل یه جدول نمایش میده.
مثال 4: استفاده از Canvas API (برای طراحی گرافیک و تصاویر در مرورگر)
Canvas API بهت اجازه میده گرافیک‌های ۲ بعدی و انیمیشن‌های جذاب طراحی کنی:
<!DOCTYPE html>
<html>
<head>
<title>نقاشی با Canvas</title>
</head>
<body>
<h1>نقاشی کن! 🖌️</h1>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>
<br>
<button onclick="clearCanvas()">پاک کردن</button>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
function startDrawing(e) {
isDrawing = true;
draw(e);
}
function draw(e) {
if (!isDrawing) return;
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "#" + Math.floor(Math.random()*16777215).toString(16); // رنگ تصادفی
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
function stopDrawing() {
isDrawing = false;
ctx.beginPath();
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
مثال 5: استفاده از Web Worker API ⚡ (برای اجرای پردازش های سنگین در پس زمینه)
Web Worker یکی از API های قدرتمند HTML5 هست که بهت اجازه میده کدهای جاوااسکریپت رو در یک thread جداگانه (پس‌زمینه) اجرا کنی، بدون اینکه صفحه سایتت دچار کندی یا توقف بشه. 🚀
بدون Web Worker، این عملیات‌ها در همون thread اصلی مرورگر اجرا میشن و باعث کندی یا حتی فریز (freeze) شدن صفحه میشن. ولی با Web Worker، این عملیات‌ها در پس‌زمینه اجرا میشن و کاربر می‌تونه همچنان با سایت تعامل داشته باشه. 😎
مثال 6: استفاده از Server-Sent Events (SSE) API (برای ارسال داده‌ها از سرور به کلاینت به‌صورت یکطرفه)
با SSE API می‌تونی داده‌ها رو از سرور به‌طور خودکار و بدون نیاز به درخواست دوباره از کاربر ارسال کنی. مثلاً برای نمایش اخبار یا بروزرسانی‌های زنده، سرور می‌تونه اطلاعات جدید رو به صفحه وب بفرسته.
موارد استفاده SSE 📋
SSE برای مواردی مناسبه که نیاز داری اطلاعات به صورت آنی از سرور به کلاینت ارسال بشع:
- نمایش اخبار و اطلاعیه‌های زنده
- نمایش قیمت سهام و ارز به صورت لحظه‌ای
- اعلان‌های سیستمی
- نمایش آمار بازدید سایت در لحظه
- چت یک طرفه و اعلان‌های پیام
جمع بندی🎯
خب، توی این مقاله با API ها آشنا شدی! حالا می‌دونی که API چیه، چطور توی HTML و جاوااسکریپت ازش استفاده می‌شه و چطوری می‌تونی اطلاعات رو از سرور بگیری و توی سایت نمایش بدی.
همچنین با Web Worker، SSE، Web Storage و Geolocation آشنا شدی که هر کدومشون قابلیت‌های جذابی رو به سایتت اضافه می‌کنن.
اگه دنبال اینی که سایتت حرفه‌ای‌تر بشه، یادگیری API ها یکی از مهم‌ترین قدم‌هاست! پس حتماً با API های مختلف کار کن، کد بزن و امتحانشون کن. 😉🎉
ارسال نظر ( 0 نظر تایید شده )