جلسه 21 آموزش HTML: آشنایی با API ها در html

جلسه 21 آموزش HTML رایا وردپرس: تا اینجای کار با کلی تگ و ویژگی توی HTML آشنا شدی، ولی دنیای وب خیلی فراتر از این چیزاست! یه چیزی هست که باعث می‌شه سایت‌ها با همدیگه حرف بزنن و تبادل اطلاعاتی داشته باشن ، حتی به امکانات مرورگر و سیستم دسترسی داشته باشن. بله! دارم درباره API صحبت می‌کنم. 😎

اگه نمی‌دونی API چیه و چطوری توی HTML استفاده می‌شه، این مقاله خیلی بهت کمک میکنه! بیا با هم یه گشت و گذار بزنیم و ببینیم چطور API ها زندگی ما رو راحت‌تر می‌کنن. 😍

API چیست؟ 🤔

API یا Application Programming Interface به زبان ساده یه واسطه‌ست که به دو برنامه یا سیستم اجازه می‌ده با همدیگه ارتباط برقرار کنن. توی دنیای وب، API ها بهت این امکان رو می‌دن که اطلاعاتی رو از یه سرویس بگیری یا بهش بفرستی، بدون اینکه نیاز باشه بری و خودت کدهای اون سرویس رو بنویسی! ✨

مثلاً وقتی توی یه سایت وضعیت آب‌وهوا رو می‌بینی، اون سایت داره از یه API هواشناسی اطلاعات رو دریافت می‌کنه و بهت نمایش می‌ده.

×

جلسه 2 آموزش HTML :HTML چیست؟ آنچه باید بدانید

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

بزار ساده تر برات توضیح بدم:

فرض کن تو یه رستوران نشستی و منو رو نگاه میکنی. آشپز (سرور سایت) غذات رو آماده میکنه، اما تو مستقیماً باهاش ارتباط نداری! اینجا پیشخدمت نقش API رو بازی میکنه:

• تو (کاربر) ← منو (فرانت اند) ← پیشخدمت (API) ← آشپز (سرور)

در دنیای وب هم API مثل همون پیشخدمته! 🍽️ یه واسطه که به اپلیکیشن ها (مثل صفحه HTML تو) اجازه میده با سرور یا سرویس های خارجی صحبت کنن و داده ها رو بگیرن یا بفرستن.

×

جلسه 11 آموزش HTML: ساخت فرم و کار با تگ form

مطالعه

چرا API اینقدر مهمه؟ 🤔

• بدون دردسر کدنویسی پیچیده از امکانات بقیه استفاده می‌کنی! (مثلاً نمایش نقشه گوگل 🗺️)
• داده‌های زنده و لحظه‌ای مثل وضعیت آب‌ و هوا ☀️ یا قیمت ارز 💵 رو مستقیم به سایتت اضافه می‌کنی.
• صفحات وب رو داینامیک و حرفه‌ای می‌کنی تا تجربه کاربرها بهتر بشه! 🔥

انواع API ها در وب 🌐

۱. Web API (رایج‌ ترین نوع)

این APIها از طریق پروتکل HTTP کار می‌کنن و معمولاً داده‌ها رو با JSON یا XML ارسال و دریافت می‌کنن. بیشتر برای ارتباط بین سرورها و کلاینت‌ها (مثلاً وب‌سایت و سرور) استفاده می‌شن.

🔹 مثال‌ها:

• Google Maps API (برای نمایش نقشه گوگل در سایت)
• Weather API (برای دریافت اطلاعات آب‌ و هوا)
• Instagram API / Twitter API (برای کار با داده‌های شبکه‌های اجتماعی)

۲. Browser API (API های مرورگر)

این APIها مستقیماً داخل مرورگر اجرا می‌شن و بهت اجازه می‌دن از امکانات مرورگر و سیستم کاربر استفاده کنی، بدون نیاز به افزونه یا نرم‌افزار اضافی.

🔹 چند نمونه مهم:

×

جلسه 6 آموزش HTML: آشنایی با تگ های ایجاد کننده لیست

مطالعه

• 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 📍(برای دریافت موقعیت جغرافیایی کاربر (با اجازه خودش!) )

×

جلسه 16 آموزش HTML: عناصر Block و Inline در html

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

مثال ۲: استفاده از Local Storage API 💾 (ذخیره اطلاعات در مرورگر کاربر، تا حتی پس از بستن صفحه باقی بماند)

فرض کن می‌خواهی کاربر اسمش رو داخل یه فیلد ورودی وارد کنه، بعد اسمش ذخیره بشه و حتی اگه صفحه رفرش بشه، اطلاعات پاک نشن و توی مرورگر ذخیره بمونن باید اینشکلی بنویسی کدت رو:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

مثال ۳: استفاده از Fetch API (برای دریافت اطلاعات از یک API خارجی )🌍

حالا بیاید یک مثال جذاب‌تر بزنیم. فرض کن می‌خوای اطلاعات ارزهای دیجیتال رو از یک سرویس خارجی تو سایتت نمایش بدی:

×

جلسه 3 آموزش HTML: بررسی ساختار کلی یک سند HTML

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در کد بالا از CoinGecko API برای دریافت قیمت لحظه‌ای ارزهای دیجیتال استفاده شده و اون‌ها رو داخل یه جدول نمایش می‌ده.

مثال 4: استفاده از Canvas API (برای طراحی گرافیک و تصاویر در مرورگر)

Canvas API بهت اجازه میده گرافیک‌های ۲ بعدی و انیمیشن‌های جذاب طراحی کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

مثال 5: استفاده از Web Worker API ⚡ (برای اجرای پردازش‌ های سنگین در پس‌ زمینه)

×

جلسه 13 آموزش HTML: آشنایی با تگ‌ های معنایی (Semantic Elements)

مطالعه

Web Worker یکی از API های قدرتمند HTML5 هست که بهت اجازه میده کدهای جاوااسکریپت رو در یک thread جداگانه (پس‌زمینه) اجرا کنی، بدون اینکه صفحه سایتت دچار کندی یا توقف بشه. 🚀

بدون Web Worker، این عملیات‌ها در همون thread اصلی مرورگر اجرا میشن و باعث کندی یا حتی فریز (freeze) شدن صفحه میشن. ولی با Web Worker، این عملیات‌ها در پس‌زمینه اجرا میشن و کاربر می‌تونه همچنان با سایت تعامل داشته باشه. 😎

مثال 6: استفاده از Server-Sent Events (SSE) API (برای ارسال داده‌ها از سرور به کلاینت به‌صورت یکطرفه)

با SSE API می‌تونی داده‌ها رو از سرور به‌طور خودکار و بدون نیاز به درخواست دوباره از کاربر ارسال کنی. مثلاً برای نمایش اخبار یا بروزرسانی‌های زنده، سرور می‌تونه اطلاعات جدید رو به صفحه وب بفرسته.

×

جلسه 20 آموزش HTML: آموزش رمزگذاری یا انکود کاراکترها

مطالعه

موارد استفاده SSE 📋

SSE برای مواردی مناسبه که نیاز داری اطلاعات به صورت آنی از سرور به کلاینت ارسال بشع:

• نمایش اخبار و اطلاعیه‌های زنده
• نمایش قیمت سهام و ارز به صورت لحظه‌ای
• اعلان‌های سیستمی
• نمایش آمار بازدید سایت در لحظه
• چت یک طرفه و اعلان‌های پیام

جمع بندی🎯

خب، توی این مقاله با API ها آشنا شدی! حالا می‌دونی که API چیه، چطور توی HTML و جاوااسکریپت ازش استفاده می‌شه و چطوری می‌تونی اطلاعات رو از سرور بگیری و توی سایت نمایش بدی.

همچنین با Web Worker، SSE، Web Storage و Geolocation آشنا شدی که هر کدومشون قابلیت‌های جذابی رو به سایتت اضافه می‌کنن.

×

جلسه ۹ آموزش HTML: اضافه کردن ویدیو و صوت به صفحات وب

مطالعه

اگه دنبال اینی که سایتت حرفه‌ای‌تر بشه، یادگیری API ها یکی از مهم‌ترین قدم‌هاست! پس حتماً با API های مختلف کار کن، کد بزن و امتحانشون کن. 😉🎉