00:00:00Saya baru saja menemukan paket keren yang menambahkan detail kecil tapi luar biasa ke situs Anda
00:00:04yang bahkan saya tidak sadar bahwa saya menginginkannya sampai sekarang.
00:00:07WebHaptics bekerja persis seperti namanya dan memungkinkan situs web Anda memanfaatkan
00:00:11umpan balik haptik baik itu di Android maupun iOS dan itu membuatnya terasa lebih seperti
00:00:15aplikasi asli dan melakukannya dengan cara yang sangat bersih dan sederhana, maksud saya ini benar-benar hanya
00:00:20satu fungsi.
00:00:21Dan ternyata saya bukan satu-satunya yang menganggap ini sangat keren, ini sedang tren
00:00:24di mana-mana di Twitter dan rupanya Polymarket sudah mengimplementasikan paket ini.
00:00:29Jadi mari kita langsung masuk dan melihat apa semua keramaian ini dan juga berbicara sedikit tentang bagaimana
00:00:33cara kerjanya karena paket ini sebenarnya memiliki trik yang sangat keren agar bisa berfungsi di iOS.
00:00:43Sekarang jelas cukup sulit bagi saya untuk menunjukkan kepada Anda apa sebenarnya fungsi paket ini karena ini adalah
00:00:46getaran fisik dari ponsel Anda, tetapi jenisnya sama persis dengan yang Anda dapatkan saat mengeklik
00:00:50subscribe di aplikasi YouTube, tetapi jika Anda sudah berlangganan dan masih ingin menguji
00:00:54hal ini, situs web WebHaptics adalah tempat yang sangat menyenangkan untuk melakukannya jadi setelah Anda menonton
00:00:59videonya saya sangat merekomendasikan untuk memeriksanya karena ini menunjukkan beberapa haptik umum
00:01:02seperti sukses dan eror, dan tentu saja haptik saat Anda mengeklik tombol.
00:01:06Ini juga memiliki editor yang sangat keren untuk membangun pola haptik Anda sendiri yang akan kita bahas kembali
00:01:10beberapa saat lagi.
00:01:11Untuk saat ini mari kita mulai coding dan seperti yang Anda lihat ini adalah paket npm yang sangat sederhana dan bahkan
00:01:15memiliki pembantu untuk react, vue, dan svelte tetapi tentu saja Anda masih dapat menggunakan varian
00:01:19vanilla javascript jika Anda mau dan fungsi trigger ini akan sama di semuanya.
00:01:23Dalam kasus saya, saya akan menggunakan react dan Anda dapat melihat kodenya sangat sederhana yang perlu kita lakukan
00:01:24hanyalah menggunakan hook useWebHaptics dan dari sini kita mendapatkan fungsi trigger yang
00:01:28kemudian dapat kita hubungkan ke sesuatu seperti tombol untuk memicu umpan balik haptik.
00:01:32Anda juga dapat melihat dari hook ini kita mendapatkan fungsi cancel yang akan membatalkan
00:01:36umpan balik haptik yang sedang berjalan dan juga boolean isSupported sehingga Anda dapat memeriksa apakah browser mendukung
00:01:39umpan balik haptik.
00:01:44Dengan kode sederhana ini maka artinya ketika saya mengeklik tombol ini di perangkat android
00:01:45atau iOS, perangkat tersebut akan memiliki getaran kecil tapi jelas saya sedang menggunakan laptop saat ini jadi
00:01:48ini tidak akan melakukan apa pun.
00:01:53Ada satu cara kecil agar kita tahu ini berfungsi saat kita mengembangkannya
00:01:54yaitu dengan menyetel debug ke true di dalam hook di sini dan ini berarti saat
00:01:57saya mengeklik tombol, itu akan memutar suara yang mensimulasikan seperti apa umpan balik
00:02:00haptiknya.
00:02:04Dalam hal menyesuaikan pola getaran, itu juga sangat sederhana dan kita bisa
00:02:05melakukannya di fungsi trigger.
00:02:09Metode pertama adalah dengan menggunakan beberapa preset yang disertakan dengan paketnya sehingga Anda dapat
00:02:10mengimpor default patterns dan di sini Anda akan menemukan beberapa preset seperti buzz, error, heavy dan
00:02:14banyak lagi dan Anda sebenarnya dapat merasakan seperti apa ini di situs webnya juga.
00:02:18Metode kedua adalah ketika Anda menginginkan pola getaran yang sepenuhnya khusus, yang
00:02:21perlu Anda lakukan adalah memberikan array ke fungsi trigger dan di sini tentukan getaran Anda.
00:02:22Saat ini saya memiliki empat getaran dalam pola ini, Anda dapat melihat Anda dapat menentukan
00:02:25getaran dengan objek di mana kita memiliki delay yang merupakan penundaan dari getaran terakhir
00:02:29dalam milidetik, lalu kita memiliki duration dalam milidetik untuk berapa lama getaran itu akan
00:02:33berlangsung, lalu juga nilai intensity di mana satu adalah getaran terkuat.
00:02:37Dengan pola yang saya miliki di sini, saat saya mengeklik tombolnya Anda dapat mendengar seperti apa suaranya
00:02:41nanti, tapi tentu saja bayangkan itu akan bergetar di ponsel pengguna.
00:02:46Trik yang bagus untuk membuat pola getaran kustom adalah dengan menggunakan situs web tersebut karena mereka memiliki
00:02:49editor yang sangat bagus di sini di mana Anda dapat mengeklik untuk menambahkan getaran baru ke array,
00:02:53Anda dapat menyeret untuk mengubah durasinya, menyeret ke atas dan ke bawah untuk mengubah intensitasnya, dan juga klik
00:02:57putar di sini untuk mendengar suaranya, tetapi Anda juga dapat menggunakannya di ponsel sehingga Anda dapat benar-benar
00:03:02merasakan seperti apa sensasinya.
00:03:06Seperti yang saya katakan, agak sulit untuk memamerkan yang satu ini dalam video tetapi mudah-mudahan Anda mengerti
00:03:09idenya, ini adalah paket yang cukup sederhana tetapi yang ingin saya tunjukkan sekarang adalah bagaimana cara kerjanya
00:03:11karena iOS tidak membuatnya mudah.
00:03:14Hal pertama yang perlu diketahui adalah sebenarnya ada API yang seharusnya mengekspos fungsi getaran
00:03:19dari ponsel Anda hanya dengan melakukan navigator.vibrate.
00:03:21Masalahnya adalah ini berfungsi baik di Android tetapi iOS sama sekali tidak mendukungnya.
00:03:24Untungnya ada cara lain untuk mendapatkan umpan balik haptik di iOS dan itu adalah dengan menggunakan
00:03:27input yang memiliki tipe switch; ketika pengguna mengeklik ini di iOS, ia memiliki umpan balik haptik.
00:03:32Apa yang dilakukan library ini untuk memanfaatkannya adalah ketika kita memicu umpan balik haptik kita,
00:03:36ia pada dasarnya mengeklik sakelar tak terlihat untuk kita yang meniru pola getaran kita dan kita
00:03:41melihatnya di bawah sini dengan kotak centang ini, tetapi ketika saya memicu umpan balik haptik, itu beralih nyala
00:03:44dan mati beberapa kali seperti halnya sakelar pada iOS.
00:03:49Jika Anda ingin melihat sakelar ini sendiri saat sedang men-debug aplikasi Anda, yang perlu
00:03:53Anda lakukan di hook di sini adalah menambahkan pengaturan showSwitch dan mengubahnya ke true.
00:03:56Jika kita melihat sekilas kode dari paket itu sendiri, Anda dapat melihat apa yang dilakukannya.
00:03:59Jika haptik web didukung, maka fungsi navigator.vibrate hanya akan menggunakan itu untuk memutar
00:04:03pola getaran kita, namun jika tidak didukung, di bawah sini ia akan mengeklik
00:04:06pada sakelar itu dan kemudian kita juga memiliki fungsi ini di sini yang bertanggung jawab untuk benar-benar membuat
00:04:11pola getaran di mana ia mengeklik sakelar itu beberapa kali seperti yang bisa kita lihat di bawah sini.
00:04:15Saya rasa itu adalah solusi yang sangat rapi yang layak untuk ditunjukkan dan saya harap Apple tidak
00:04:19menemukan cara untuk menambal ini atau setidaknya jika mereka menambalnya, mereka menambahkan dukungan untuk fungsi
00:04:23vibrate.
00:04:27Hanya itu yang ada di paket ini, jadi beri tahu saya di kolom komentar di bawah jika
00:04:31ini adalah sesuatu yang akan Anda gunakan. Selagi di sana, silakan subscribe dan seperti biasa sampai
00:04:32jumpa di video berikutnya.
00:04:35[Musik]
00:04:38jumpa di video berikutnya.
00:04:41[Musik]