00:00:00मुझे अभी एक बहुत ही शानदार पैकेज मिला है जो आपकी साइट्स में
00:00:04एक छोटी लेकिन बेहतरीन डिटेल जोड़ देता है, जिसकी मुझे अब तक खबर भी नहीं थी।
00:00:07WebHaptics बिल्कुल वही काम करता है जो इसका नाम बताता है, और यह आपकी वेबसाइट्स को
00:00:11हैप्टिक फीडबैक (haptic feedback) इस्तेमाल करने की सुविधा देता है, चाहे वह Android हो या iOS, जिससे वे
00:00:15बिल्कुल एक नेटिव ऐप की तरह महसूस होती हैं, और यह इसे बहुत ही साफ और सरल तरीके से करता है, मेरा मतलब है कि यह सिर्फ
00:00:20एक फंक्शन है।
00:00:21और ऐसा लगता है कि सिर्फ मुझे ही यह कूल नहीं लग रहा है, यह ट्विटर पर हर जगह
00:00:24ट्रेंड कर रहा है और जाहिर तौर पर Polymarket ने इस पैकेज को पहले ही लागू कर दिया है।
00:00:29तो चलिए इसमें गहराई से उतरते हैं और देखते हैं कि यह सारा शोर किस बारे में है और साथ ही यह भी बात करते हैं कि
00:00:33यह कैसे काम करता है क्योंकि इस पैकेज में iOS पर काम करने के लिए एक बहुत ही कूल ट्रिक है।
00:00:43अब जाहिर है कि मेरे लिए आपको यह दिखाना काफी मुश्किल है कि यह पैकेज वास्तव में क्या करता है क्योंकि यह
00:00:46आपके फोन का एक भौतिक कंपन (vibration) है, लेकिन यह बिल्कुल वैसा ही है जैसा आपको तब मिलता है जब आप
00:00:50YouTube ऐप में सब्सक्राइब पर क्लिक करते हैं, लेकिन अगर आप पहले से ही सब्सक्राइब हैं और फिर भी
00:00:54इसे टेस्ट करना चाहते हैं, तो WebHaptics की वेबसाइट इसे आज़माने के लिए एक बेहतरीन जगह है, इसलिए वीडियो देखने के बाद
00:00:59मैं इसे चेक करने की अत्यधिक सलाह देता हूँ क्योंकि यह आपको कुछ सामान्य हैप्टिक्स दिखाता है
00:01:02जैसे कि सफलता (success) और त्रुटि (error) और जाहिर तौर पर बटन पर क्लिक करने वाले हैप्टिक्स।
00:01:06इसमें आपके खुद के हैप्टिक पैटर्न बनाने के लिए एक बहुत ही कूल एडिटर भी है जिस पर हम थोड़ी देर में वापस आएंगे।
00:01:10फिलहाल, चलिए कोडिंग शुरू करते हैं और जैसा कि आप देख सकते हैं कि यह एक बहुत ही सरल npm पैकेज है और इसमें
00:01:11react, vue और svelte के लिए हेल्पर्स भी हैं लेकिन जाहिर है कि आप चाहें तो वैनिला
00:01:15जावास्क्रिप्ट वेरिएंट का भी उपयोग कर सकते हैं और यह ट्रिगर फंक्शन उन सभी में एक समान ही रहने वाला है।
00:01:19मेरे मामले में मैं react का उपयोग करूँगा और आप देख सकते हैं कि कोड अविश्वसनीय रूप से सरल है, हमें बस इतना करना है
00:01:23कि हुक useWebHaptics का उपयोग करें और इससे हमें एक ट्रिगर फंक्शन मिलता है जिसे
00:01:24हम किसी बटन जैसी चीज़ से जोड़ सकते हैं ताकि कुछ हैप्टिक फीडबैक ट्रिगर हो सके।
00:01:28आप यह भी देख सकते हैं कि इस हुक से हमें एक कैंसल (cancel) फंक्शन मिलता है जो किसी भी
00:01:32चल रहे हैप्टिक फीडबैक को रद्द कर देगा और साथ ही एक isSupported बूलियन भी है जिससे आप चेक कर सकते हैं कि ब्राउज़र
00:01:36हैप्टिक फीडबैक को सपोर्ट करता है या नहीं।
00:01:39इस सरल कोड के साथ, इसका मतलब यह होगा कि जब मैं एंड्रॉइड या
00:01:44iOS डिवाइस पर इस बटन पर क्लिक करूँगा तो उसमें एक छोटा सा कंपन होगा, लेकिन जाहिर है कि मैं अभी लैपटॉप पर हूँ इसलिए
00:01:45यह कुछ भी नहीं करेगा।
00:01:48हालांकि, एक छोटा सा तरीका है जिससे हम जान सकते हैं कि यह काम कर रहा है जब हम इसे डेवलप कर रहे होते हैं
00:01:53और वह है हुक के अंदर debug को true पर सेट करना और इसका मतलब सिर्फ यह है कि जब
00:01:54मैं बटन पर क्लिक करूँगा तो यह एक ऐसी आवाज़ बजाएगा जो सिम्युलेट करेगी कि वह हैप्टिक फीडबैक
00:01:57कैसा है।
00:02:00जब वाइब्रेशन पैटर्न को कस्टमाइज़ करने की बात आती है, तो वह भी बहुत सरल है और हम
00:02:04इसे ट्रिगर फंक्शन में कर सकते हैं।
00:02:05पहला तरीका कुछ प्रीसेट्स का उपयोग करना है जो पैकेज के साथ ही आते हैं, तो आप
00:02:09डिफ़ॉल्ट पैटर्न इम्पोर्ट कर सकते हैं और यहाँ आपको buzz, error, heavy जैसे कुछ प्रीसेट्स मिलेंगे और
00:02:10भी बहुत कुछ, और आप वास्तव में वेबसाइट पर भी इनका अनुभव ले सकते हैं।
00:02:14दूसरा तरीका तब है जब आप पूरी तरह से कस्टम वाइब्रेशन पैटर्न चाहते हैं, आपको बस
00:02:18ट्रिगर फंक्शन को एक ऐरे (array) प्रदान करना है और यहाँ अपने वाइब्रेशन को परिभाषित करना है।
00:02:21फिलहाल मेरे पास इस पैटर्न में चार वाइब्रेशन हैं, आप देख सकते हैं कि आप एक वाइब्रेशन को
00:02:22एक ऑब्जेक्ट के साथ परिभाषित कर सकते हैं जहाँ हमारे पास एक डिले (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अंदाज़ा हो गया होगा, यह एक बहुत ही सरल पैकेज है लेकिन अब मैं आपको यह दिखाना चाहता हूँ कि यह काम कैसे करता है
00:03:09क्योंकि iOS ने इसे आसान नहीं बनाया था।
00:03:11पहली बात जो जानने वाली है वह यह है कि वास्तव में एक API है जिसे बस navigator.vibrate करके
00:03:14आपके फोन के वाइब्रेशन फंक्शन को एक्सपोज़ करना चाहिए।
00:03:19मुसीबत यह है कि यह Android पर तो बहुत अच्छा काम करता है लेकिन iOS में इसके लिए बिल्कुल भी सपोर्ट नहीं है।
00:03:21किस्मत से, iOS पर हैप्टिक फीडबैक पाने का एक और तरीका है और वह है
00:03:24एक इनपुट का उपयोग करना जिसका टाइप 'switch' हो, जब यूज़र iOS पर इस पर क्लिक करता है तो उसमें हैप्टिक फीडबैक होता है।
00:03:27यह लाइब्रेरी इसका फायदा उठाने के लिए क्या करती है कि जब हम अपना हैप्टिक फीडबैक ट्रिगर करते हैं,
00:03:32तो यह अनिवार्य रूप से हमारे लिए एक अदृश्य स्विच को क्लिक करती है जो हमारे वाइब्रेशन पैटर्न की नकल करता है और
00:03:36हम उसे यहाँ नीचे इस चेकबॉक्स के साथ देखते हैं, जब मैं हैप्टिक फीडबैक ट्रिगर करता हूँ तो यह कई बार
00:03:41ऑन और ऑफ होता है जैसा कि iOS पर स्विच करता है।
00:03:44अगर आप अपने एप्लिकेशन को डीबग करते समय इस स्विच को खुद देखना चाहते हैं, तो आपको बस
00:03:49हुक में सेटिंग्स 'show switch' जोड़नी है और इसे true पर टॉगल करना है।
00:03:53अगर हम खुद पैकेज के कोड पर एक नज़र डालें तो आप देख सकते हैं कि यह क्या कर रहा है।
00:03:56अगर वेब हैप्टिक्स सपोर्टेड हैं तो navigator.vibrate फंक्शन बस हमारे वाइब्रेशन पैटर्न को
00:03:59चलाने के लिए उसका उपयोग करेगा, हालाँकि अगर वे सपोर्टेड नहीं हैं तो यहाँ नीचे यह उस स्विच पर
00:04:03क्लिक करेगा और फिर हमारे पास यह फंक्शन भी है जो वास्तव में वाइब्रेशन पैटर्न बनाने के लिए जिम्मेदार है
00:04:06जहाँ यह उस स्विच पर कई बार क्लिक करता है जैसा कि हम यहाँ नीचे देख सकते हैं।
00:04:11मैंने अभी देखा कि यह एक बहुत ही साफ़ वर्कअराउंड था जिसे दिखाना ज़रूरी था और मुझे उम्मीद है कि Apple
00:04:15इसे पैच करने का कोई तरीका नहीं ढूँढेगा या कम से कम अगर वे इसे पैच करते हैं तो उन्हें vibrate
00:04:19फंक्शन के लिए सपोर्ट जोड़ना चाहिए।
00:04:23इस पैकेज में बस इतना ही है, तो मुझे नीचे कमेंट्स में बताएं कि
00:04:27क्या यह ऐसी चीज़ है जिसे आप इस्तेमाल करेंगे, नीचे सब्सक्राइब करें और हमेशा की तरह
00:04:31अगले वीडियो में मिलते हैं।
00:04:32[संगीत]
00:04:35क्या यह ऐसी चीज़ है जिसे आप इस्तेमाल करेंगे, तो नीचे सब्सक्राइब करें और हमेशा की तरह
00:04:38मिलते हैं अगले वीडियो में।
00:04:41[संगीत]