00:00:00لقد عثرت للتو على مكتبة برمجية رائعة تضيف تفصيلاً صغيراً ولكنه مذهل لمواقعكم
00:00:04لم أكن أعلم حتى أنني أريده إلا الآن.
00:00:07تقوم WebHaptics بما تعد به تماماً، حيث تسمح لمواقعكم باستخدام
00:00:11ردود الفعل اللمسية (haptic feedback) سواء على أندرويد أو iOS، مما يجعلها
00:00:15تبدو كأنها تطبيق أصلي (native) وبطريقة نظيفة وبسيطة للغاية، فهي حرفياً مجرد
00:00:20دالة واحدة فقط.
00:00:21ويبدو أنني لست الوحيد الذي يرى هذا رائعاً، فهي رائجة بشكل كبير
00:00:24على تويتر، ويبدو أن Polymarket قد بدأت بالفعل في استخدام هذه المكتبة.
00:00:29لذا دعونا نتعمق ونرى سبب كل هذا الضجيج، ونتحدث أيضاً قليلاً عن كيفية
00:00:33عملها، حيث أن المكتبة تستخدم حيلة ذكية جداً لتشغيلها على نظام iOS.
00:00:43الآن، من الصعب عليّ طبعاً أن أريكم ما تفعله هذه المكتبة بالضبط لأنها
00:00:46اهتزاز فيزيائي لهواتفكم، لكنها تشبه تماماً تلك التي تشعرون بها عند النقر
00:00:50على زر الاشتراك في تطبيق يوتيوب، ولكن إذا كنتم مشتركين بالفعل وما زلتم تودون
00:00:54تجربتها، فإن موقع WebHaptics هو مكان ممتع جداً للقيام بذلك، لذا بعد مشاهدة
00:00:59هذا الفيديو، أوصي بشدة بالاطلاع عليه لأنه يعرض لكم بعض اللمسات الشائعة
00:01:02مثل حالات النجاح والخطأ، وبالطبع الاهتزاز عند النقر على الأزرار.
00:01:06كما يحتوي الموقع على محرّر رائع جداً لإنشاء أنماط اهتزاز خاصة بكم سنعود له
00:01:10بعد قليل.
00:01:11أما الآن فلنبدأ بكتابة الكود، وكما ترون فهي مكتبة npm بسيطة جداً ولديها
00:01:15حتى أدوات مساعدة لـ React و Vue و Svelte، ولكن يمكنكم طبعاً استخدام نسخة
00:01:19JavaScript التقليدية إذا أردتم، ودالة الـ trigger هذه ستكون هي نفسها في الجميع.
00:01:23في حالتي، سأستخدم React وكما ترون الكود بسيط للغاية، فكل ما علينا
00:01:24فعله هو استخدام الـ hook المسمى useWebHaptics ومنه نحصل على دالة trigger
00:01:28والتي يمكننا ربطها بشيء مثل الزر لتشغيل رد فعل لمسي.
00:01:32يمكنكم أيضاً أن تروا أننا نحصل من هذا الـ hook على دالة cancel لإلغاء أي
00:01:36رد فعل لمسي قيد التشغيل، وأيضاً قيمة boolean لـ isSupported حتى تتحققوا
00:01:39مما إذا كان المتصفح يدعم ردود الفعل اللمسية أم لا.
00:01:44بهذا الكود البسيط، هذا يعني أنه عندما أنقر على هذا الزر على جهاز أندرويد
00:01:45أو iOS، سيعطي اهتزازاً بسيطاً، لكنني حالياً أستخدم لابتوب لذا
00:01:48لن يحدث أي شيء.
00:01:53هناك طريقة بسيطة لنعرف أنها تعمل أثناء قيامنا بالتطوير
00:01:54وهي ضبط debug على true داخل الـ hook هنا، وهذا يعني ببساطة أنه عندما
00:01:57أنقر على الزر، سيصدر صوتاً يحاكي شكل رد الفعل اللمسي.
00:02:00وعندما يتعلق الأمر بتخصيص نمط الاهتزاز، فذلك أيضاً سهل للغاية ويمكننا
00:02:04القيام به في دالة الـ trigger.
00:02:05الطريقة الأولى هي استخدام بعض القوالب الجاهزة التي تأتي مع المكتبة، حيث يمكنك
00:02:09استيراد الأنماط الافتراضية، وستجد هناك قوالب مثل buzz، وerror، وheavy
00:02:10وغيرها الكثير، ويمكنك بالفعل تجربتها ومعرفة شعورها عبر الموقع الإلكتروني.
00:02:14أما الطريقة الثانية فهي عندما تريد نمط اهتزاز مخصصاً بالكامل، فكل ما عليك
00:02:18فعله هو تمرير مصفوفة (array) لدالة الـ trigger وتحديد اهتزازاتك فيها.
00:02:21حالياً لدي أربعة اهتزازات في هذا النمط، وكما ترون يمكنكم تعريف
00:02:22الاهتزاز بكائن (object) حيث نحدد التأخير (delay) وهو الوقت من آخر اهتزاز
00:02:25بالملي ثانية، ثم نحدد المدة (duration) بالملي ثانية لطول مدة الاهتزاز،
00:02:29وأيضاً قيمة الكثافة (intensity) حيث أن القيمة 1 هي أقوى اهتزاز.
00:02:33بهذا النمط الذي وضعته هنا، عندما أنقر على الزر، يمكنكم سماع ما سيصدر منه
00:02:37ولكن تخيلوا طبعاً أن هذا سيكون اهتزازاً في هاتف المستخدم.
00:02:41هناك حيلة جيدة لإنشاء أنماط اهتزاز مخصصة وهي استخدام الموقع الإلكتروني
00:02:46لأن لديهم محرراً رائعاً هنا حيث يمكنك النقر لإضافة اهتزاز جديد للمصفوفة،
00:02:49ويمكنك السحب لتغيير مدته، والسحب للأعلى والأسفل لتغيير الكثافة، وأيضاً النقر
00:02:53على تشغيل لسماع صوته، ويمكنكم استخدامه على الهاتف لتشعروا به فعلياً.
00:02:57كما قلت، من الصعب قليلاً عرض هذا في فيديو، ولكن أتمنى أن تكونوا قد
00:03:02أخذتم فكرة، إنها مكتبة بسيطة، ولكن ما أريد أن أريكم إياه الآن هو كيفية عملها
00:03:06لأن نظام iOS لم يجعل الأمر سهلاً.
00:03:09أول شيء يجب معرفته هو أن هناك بالفعل واجهة برمجة تطبيقات (API) من المفترض أن تتيح وظيفة
00:03:11الاهتزاز في الهاتف ببساطة عبر استخدام navigator.vibrate.
00:03:14لكن المشكلة هي أن هذا يعمل بشكل رائع على أندرويد، أما iOS فلا يدعمه مطلقاً.
00:03:19لكن لحسن الحظ، هناك طريقة أخرى للحصول على رد فعل لمسي على iOS وهي
00:03:21استخدام حقل إدخال (input) من نوع switch، فعندما ينقر المستخدم عليه في iOS يعطي رد فعل لمسياً.
00:03:24ما تفعله هذه المكتبة للاستفادة من ذلك هو أنه عندما نقوم بتشغيل الاهتزاز
00:03:27فإنها تقوم أساساً بالنقر على مفتاح (switch) غير مرئي يحاكي نمط الاهتزاز الخاص بنا،
00:03:32ونرى ذلك هنا في الأسفل مع خانة الاختيار هذه، فعندما أقوم بتشغيل رد الفعل
00:03:36فإنها تتحول بين التفعيل والإلغاء عدة مرات تماماً كما يفعل المفتاح في iOS.
00:03:41إذا أردت رؤية هذا المفتاح بنفسك أثناء تصحيح أخطاء تطبيقك، فكل ما عليك
00:03:44فعله في الـ hook هنا هو إضافة showSwitch في الإعدادات وضبطه على true.
00:03:49إذا ألقينا نظرة سريعة على كود المكتبة نفسها، ستتمكنون من رؤية ما تفعله.
00:03:53إذا كانت ردود الفعل مدعومة، فستستخدم دالة navigator.vibrate ببساطة
00:03:56لتشغيل نمط الاهتزاز، أما إذا لم تكن مدعومة، فستقوم هنا في الأسفل
00:03:59بالنقر على ذلك المفتاح، ولدينا أيضاً هذه الدالة هنا المسؤولة عن إنشاء
00:04:03نمط الاهتزاز فعلياً حيث تنقر على المفتاح عدة مرات كما نرى هنا.
00:04:06رأيت أن هذا حل ذكي جداً يستحق العرض، وأتمنى ألا تجد آبل
00:04:11طريقة لإغلاق هذه الثغرة، أو على الأقل إذا فعلوا ذلك أن يضيفوا دعماً
00:04:15لدالة vibrate.
00:04:19هذا كل ما يتعلق بهذه المكتبة تقريباً، لذا أخبروني في التعليقات بالأسفل إذا
00:04:23كان هذا شيئاً قد تستخدمونه، واشتركوا في القناة، وكما هو الحال دائماً نلتقي
00:04:27في الفيديو القادم.
00:04:31[موسيقى]