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.
Woww!! Me encantó tu post. Muchas gracias por compartirlo 😃
Me alegro, Dane. ¡Espero que te funcione y puedas implementarlo!
Ya me surgió una idea donde aplicarlo 👀
¡Ya quiero ver eso!
Comparte tu idea para ver casos de usos diferentes.
Soon 👀
Tenía varios días buscando un recurso como este, excelente post.!!
Que excelente aporte👌
¡Gracias! 😃
Gran post 🤓.
Qué cool que te gustó, Pablo.
Gracias Cesar, ya había visto algo de eto hace tiempo pero es buen momento para practicar.! Yeyyyy
me funciono en mi alcatel pixis 3
Excelente tu post, Cesar. Felicidades y gracias por compartirlo con la comunidad de Platzi.
Muchas gracias, Alejandro.
No conocía la facilidad de poner una API. Gracias por el dato.
De nada, Alberto.
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
Me da el siguiente error al tratar de correr liver server 😒
Usar
npm install -g live-servere intenta correr de nuevolive-server.Asegúrate de usar
-g.Quedo atento. 😄
Lo instalé de forma global pero me da el mismo error :’(
¿Le estás colocando
nodeantes delive-server?eso no lo pusiste en el post, que debe de ir
nodeXD pero sí, de ambas formas y nothing…No, jajaja, te iba a decir que no lo tenía que poner.
Mira, lo que sucede es que bash no logra encontrar lo módulos globales, lo que debes hacer es correr
npm bin -gy asegurarte de que la salida de ese comando esté enecho $PATH.Te mostraré un ejemplo:
[email protected] MINGW64 ~/Desktop $ npm bin -g C:\Users\Augusto\AppData\Roaming\npm [email protected] MINGW64 ~/Desktop $ echo$PATH /c/Users/Augusto/bin:/mingw64/bin:/usr/local/bin:/usr/bin:/bin:/mingw64/bin:/usr/bin:/c/Users/Augusto/bin:/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/c/Windows/system32:/c/Windows:/c/Windows/System32/Wbem:/c/Windows/System32/WindowsPowerShell/v1.0:/c/Program Files/nodejs:/cmd:%SUBLIME%:/c/Users/Augusto/AppData/Local/Programs/Microsoft VS Code/bin:/c/Users/Augusto/AppData/Roaming/npm:/c/Users/Augusto/AppData/Local/Pandoc:/c/Program Files/heroku/bin:/usr/bin/vendor_perl:/usr/bin/core_perlDentro de todas las rutas que tengo en
$PATHse encuentra la ruta donde están los módulo globales de npmnpm bin -g. Lo que tienes que hacer es colocar la ruta que te danpm bin -gen el$PATH.Te dejo un link a una discusión donde solucionan este problema.
Me gusto tu contenido, gracias 😄 lo añadire a marcadores para aplicarlo en futuros proyectos thnx bo (Y)