APIهای Device

آموزش جاوااسکریپت

مقدمه

دستگاه‌های مدرن، به ویژه تلفن‌های هوشمند، مجهز به مجموعه‌ای از سنسورهای سخت‌افزاری مانند شتاب‌سنج (accelerometer) و ژیروسکوپ (gyroscope) هستند. Device APIs به صفحات وب اجازه می‌دهند تا به داده‌های این سنسورها دسترسی پیدا کرده و تجربیات کاربری جدید و تعاملی ایجاد کنند. این قابلیت‌ها سنگ بنای وب اپلیکیشن‌هایی هستند که با محیط فیزیکی کاربر در تعاملند، مانند بازی‌های حرکتی، اپلیکیشن‌های واقعیت افزوده (AR)، یا ابزارهای نمایش ۳۶۰ درجه.

مانند بسیاری از APIهای حساس، دسترسی به این سنسورها نیز نیازمند یک بستر امن (HTTPS) و در برخی موارد، کسب مجوز از کاربر است.

جهت‌گیری دستگاه (Device Orientation)

Device Orientation API اطلاعاتی درباره جهت‌گیری فیزیکی دستگاه در فضای سه‌بعدی ارائه می‌دهد. این API این کار را با فراهم کردن یک رویداد به نام deviceorientation انجام می‌دهد که می‌توانیم به آن روی شیء window گوش دهیم.

شیء رویدادی که به شنونده پاس داده می‌شود، شامل سه زاویه اصلی است:

  • alpha: چرخش دستگاه حول محور Z (مانند یک قطب‌نما)، با مقداری بین ۰ تا ۳۶۰ درجه.
  • beta: شیب جلو به عقب دستگاه حول محور X، با مقداری بین ۱۸۰- تا ۱۸۰ درجه.
  • gamma: شیب چپ به راست دستگاه حول محور Y، با مقداری بین ۹۰- تا ۹۰ درجه.
Copy Icon JAVASCRIPT 
window.addEventListener('deviceorientation', (event) => {
    const alpha = event.alpha;
    const beta = event.beta;
    const gamma = event.gamma;

    // Use these values to rotate a 3D model, move a compass needle, etc.
    console.log(`Alpha: ${alpha}, Beta: ${beta}, Gamma: ${gamma}`);
});

این کد یک شنونده برای رویداد deviceorientation ثبت می‌کند. با هر تغییر در جهت‌گیری دستگاه، این تابع اجرا شده و مقادیر زوایای جدید را در کنسول نمایش می‌دهد. از این مقادیر می‌توان برای ساخت یک قطب‌نمای ساده، یک ابزار تراز، یا کنترل دوربین در یک صحنه سه‌بعدی استفاده کرد.

حرکت دستگاه (Device Motion)

Device Motion API اطلاعات دقیق‌تری درباره حرکت دستگاه، یعنی شتاب و سرعت چرخش آن، ارائه می‌دهد. این کار از طریق رویداد devicemotion انجام می‌شود که آن هم روی شیء window قابل شنود است.

شیء رویداد در این حالت، شامل پراپرتی‌های زیر است:

  • acceleration: یک شیء با سه پراپرتی x، y و z که شتاب دستگاه را بدون در نظر گرفتن نیروی جاذبه نشان می‌دهد.
  • accelerationIncludingGravity: مشابه قبلی، اما شتاب را با احتساب نیروی جاذبه ارائه می‌دهد. این پراپرتی برای تشخیص تکان دادن دستگاه (shake) بسیار مفید است.
  • rotationRate: یک شیء با سه پراپرتی alpha، beta و gamma که سرعت چرخش دستگاه حول هر محور را بر حسب درجه بر ثانیه نشان می‌دهد.
  • interval: فاصله زمانی بر حسب میلی‌ثانیه که داده‌ها از سنسورها دریافت می‌شوند.
Copy Icon JAVASCRIPT 
const shakeThreshold = 15; // m/s^2

window.addEventListener('devicemotion', (event) => {
    const accel = event.accelerationIncludingGravity;
    
    if (
        Math.abs(accel.x) > shakeThreshold ||
        Math.abs(accel.y) > shakeThreshold ||
        Math.abs(accel.z) > shakeThreshold
    ) {
        console.log('Device was shaken!');
        // You could trigger an action here, like undoing an operation.
    }
});

این مثال یک «تشخیص‌دهنده تکان» ساده را پیاده‌سازی می‌کند. با هر رویداد devicemotion، کد شتاب روی هر سه محور را بررسی می‌کند و اگر از یک آستانه مشخصی بیشتر باشد، یک پیام در کنسول ثبت می‌کند.

در این درس با نحوه دسترسی به سنسورهای حرکتی و جهت‌یابی دستگاه از طریق Device APIs آشنا شدیم. رویدادهای deviceorientation و devicemotion دروازه‌ای به سوی ساخت تجربیات کاربری فیزیکی و تعاملی هستند که می‌توانند یک وب اپلیکیشن ساده را به یک ابزار قدرتمند تبدیل کنند. در درس بعدی، به سراغ یکی از پرکاربردترین دسته‌های API، یعنی کار با `عناصر Media` خواهیم رفت و یاد می‌گیریم که چگونه صدا و تصویر را در صفحات وب با جاوااسکریپت کنترل کنیم.