31

Cómo hacer vibrar tu celular con JavaScript

17236Puntos

hace 4 años

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.

Configurando el entorno de desarrollo para poder ver nuestro móvil en acción

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.

imagen1

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!”.

imagen2

Haciendo vibrar a nuestro móvil

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!

Conclusión

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.

Referencias

Cesar Augusto
Cesar Augusto
AugSync

17236Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
42448Puntos

Woww!! Me encantó tu post. Muchas gracias por compartirlo 😃

3
17236Puntos
4 años

Me alegro, Dane. ¡Espero que te funcione y puedas implementarlo!

4
29642Puntos

Ya me surgió una idea donde aplicarlo 👀

2
17236Puntos
4 años

¡Ya quiero ver eso!

2
3205Puntos

Tenía varios días buscando un recurso como este, excelente post.!!

2
32653Puntos

Gran post 🤓.

2
17236Puntos
4 años

Qué cool que te gustó, Pablo.

2
10315Puntos

Gracias Cesar, ya había visto algo de eto hace tiempo pero es buen momento para practicar.! Yeyyyy

2
1437Puntos

me funciono en mi alcatel pixis 3

2
14267Puntos

Excelente tu post, Cesar. Felicidades y gracias por compartirlo con la comunidad de Platzi.

1
17236Puntos
4 años

Muchas gracias, Alejandro.

2

No conocía la facilidad de poner una API. Gracias por el dato.

1
17236Puntos
4 años

De nada, Alberto.

2
557Puntos

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

1
557Puntos

Me da el siguiente error al tratar de correr liver server 😒

229595.PNG
2
17236Puntos
4 años

Usar npm install -g live-server e intenta correr de nuevo live-server.

Asegúrate de usar -g.

Quedo atento. 😄

2
557Puntos
4 años

Lo instalé de forma global pero me da el mismo error :’(

2
17236Puntos
4 años

¿Le estás colocando node antes de live-server?

1
557Puntos
4 años

eso no lo pusiste en el post, que debe de ir node XD pero sí, de ambas formas y nothing…

000101.PNG
2
17236Puntos
4 años

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 -g y asegurarte de que la salida de ese comando esté en echo $PATH.

Te mostraré un ejemplo:

Augusto@Augusto-PC MINGW64 ~/Desktop
$ npm bin -g
C:\Users\Augusto\AppData\Roaming\npm

Augusto@Augusto-PC 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_perl

Dentro de todas las rutas que tengo en $PATH se encuentra la ruta donde están los módulo globales de npm npm bin -g. Lo que tienes que hacer es colocar la ruta que te da npm bin -g en el $PATH.

Te dejo un link a una discusión donde solucionan este problema.

1
917Puntos

Me gusto tu contenido, gracias 😄 lo añadire a marcadores para aplicarlo en futuros proyectos thnx bo (Y)