El desarrollador Front-End siempre busca la manera de interactuar con el usuario, su objetivo principal es lograr que el usuario de sienta a gusto y conectado (en sentimiento) con la página. Siempre buscará la forma de agregar alguna característica o funcionalidad que sorprenda al usuario, para esto se ha creado una interesante API del navegador, que te ayudará a agregar un nivel más de experiencia en tu página o aplicación.
Hoy te enseñaré a hacer vibrar tu celular con JavaScript, esto lo lograremos con una API llamada window.navigator.vibrate. Cabe destacar que esta API funciona solo en dispositivo que cuenten con el hardware compatible, sino, simplemente no surtirá efecto.
Lo haremos con un módulo NPM llamado live-server que nos permitirá servir nuestro index.html en el navegador, además, nos dará la posibilidad de visualizar el index.html en nuestro móvil a través de la ip local, esto es muy necesario ya que en él es donde se reproducirá la vibración.
En nuestra terminal crearemos una carpeta para trabajar con nuestro proyecto, lo haremos con $ mkdir vibrar-con-javascript. Luego entraremos a ella $ cd vibrar-con-javascript para poder iniciar nuestro proyecto con $ npm init -y.
Instalaremos live-server con $ npm install live-server y crearemos nuestro archivo index.html.
En nuestro index.html agregaremos la estructura de una página básica para posteriormente servir los archivos en el navegador corriendo el comando $ live-server.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><title>Document</title><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><styletype="text/css">body {
background-color: lightgray;
}
</style></head><body><h1>¡A vibrar!</h1></body></html>Cuando corramos live-server nuestro navegador nos abrirá una pestaña nueva con el documento servido.
Para poder ver este documento en nuestro teléfonos necesitamos saber la IP IPv4 para poder acceder al puerto donde está alojada nuestra página. Con el comando ipconfig (en windows) la podemos ver, solo tenemos que buscar en el navegador de nuestro teléfono la siguiente dirección: <tu dirección IPv4>:8080, por ejemplo en mi caso es: 192.168.250.5:8080. Cuando ingresemos a ese puerto desde nuestro teléfono nos debería aparecer nuestro: “¡A vibrar!”.
Ahora sí podemos empezar a trabajar con la API, hay que saber que la única forma de ejecutarla es obteniendo algún gesto del usuario, no podemos activar la vibración automáticamente. ¡Agreguemos un botón para que el usuario presione!
<buttonid="button">¡Vibrar!</button>Al tener esta gestión podemos hacer vibrar nuestro teléfono haciendo click, pero para lograrlo tenemos que crear una función.
<scripttype="text/javascript">const button = document.getElementById('button');
button.addEventListener('click', hacerVibrar);
functionhacerVibrar(){
window.navigator.vibrate([1000]);
}
</script>Vemos que window.navigator.vibrate() recibe una matriz o arreglo, pero también le podemos pasar un simple número, que representa mili-segundos, sin usar [].
¡Ahora ya podemos hacer vibrar nuestro teléfono pulsando el botón!
Para poder controlar las vibraciones usaremos la matriz que le pasamos, el patrón sería: [vibrar, no vibrar, vibrar, no vibrar...], o sea que si le pasamos la siguiente matriz: [500,100,500,100] lo que hará es que nuestro teléfono vibrará 500 ms, luego se quedará quieto por 100 ms para volver a encender 500 ms más… y así sucesivamente.
¡Podemos crear patrones geniales! Por ejemplo podemos pedir ayuda en morse (S.O.S) con el siguiente patrón:
[100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100].
Hice una aplicación donde suena una música y el celular vibra a su ritmo usando esta API. ¡Mira cómo funciona!
Puedes lograr cosas interesantes con esta API, además, agregará una capa de experiencia a tu aplicación que pocas páginas tienen. ¡Espero que te haya servido este artículo! Si sabes otro uso que se le puede dar, por favor, escribe un comentario para que lo compartas con tus compañeros de estudio.
Ya me surgió una idea donde aplicarlo 👀
¡Ya quiero ver eso!
Comparte tu idea para ver casos de usos diferentes.
Soon 👀
Woww!! Me encantó tu post. Muchas gracias por compartirlo 😃
Me alegro, Dane. ¡Espero que te funcione y puedas implementarlo!
Gracias Cesar, ya había visto algo de eto hace tiempo pero es buen momento para practicar.! Yeyyyy
No conocía la facilidad de poner una API. Gracias por el dato.
De nada, Alberto.
Gran post 🤓.
Qué cool que te gustó, Pablo.
Orale, justo acabo de aprender a utilizar javascript en el backend con nodejs en el curso de programación básica de Freddy, se ve muy interesante, lo pruebo ahora mismo! jaja
Que excelente aporte👌
¡Gracias! 😃
Tenía varios días buscando un recurso como este, excelente post.!!
me funciono en mi alcatel pixis 3
Me gusto tu contenido, gracias 😄 lo añadire a marcadores para aplicarlo en futuros proyectos thnx bo (Y)