VueJS

Explicación de watch en Vue JS 2

Introducción

Vue.Js es un framework maravilloso. Ofrece, al igual que AngularJS (y no sé cuáles otros, no los he usado) una forma de vigilar el cambio de un valor a través de un watch, watcher u observador.

Esto permite observar el cambio de una variable, ya sea primitiva o compleja como un objeto o arreglo.

Veamos entonces cómo usar de forma correcta a watch en el framework web de JavaScript Vue.js

Continue reading…

Calculadora chmod con VueJS y Bootstrap

Introducción

En mi clase de Administración de servidores tenía un poco de tiempo libre y decidí hacer una calculadora chmod (o así la llamo yo). Lo que hace es que, con una interfaz gráfica agradable eliges los permisos de usuario, grupo y el resto del mundo para un archivo, y también eliges permisos de lectura, escritura y ejecución.

Una vez que terminaste de seleccionar, te da los comandos Linux que necesitas aplicar; ya sea en modo octal o con letra (que a mi parecer es más entendible).

Continue reading…

Obtener índice de elemento en v-data-table de VuetifyJS

Introducción

VuetifyJS es un framework que añade estilos material design a nuestras apps creadas con VueJS. Existe un componente para mostrar datos en forma de tabla: v-data-table.

Podemos acceder a los elementos que se repiten con props.item pero habrá ocasiones en las que necesitaremos el índice del elemento.

Por ejemplo, si nuestros elementos son un arreglo y queremos quitar uno, necesitaríamos el índice para hacer un splice.

Acceder a index o índice en v-data-table

Es muy sencillo. Si tenemos una tabla más o menos así:

  <v-data-table
    :headers="headers"
    :items="desserts"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>

Podemos acceder al índice a través de la propiedad props.index.

Si ponemos un botón y queremos mandar el índice como argumento, lo hacemos así:

  <v-data-table
    :headers="headers"
    :items="desserts"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
      <td class="text-xs-right">
        <v-btn icon class="mx-0" @click="quitar(props.index)">
          <v-icon color="red">delete</v-icon>
        </v-btn>
      </td>
    </template>
  </v-data-table>

Así podemos acceder al índice. Esto lo encontré en un reporte de bug, el cual fue solucionado aquí.

Acceder a los filtros de VueJS desde el código Javascript

Introducción

Los filtros de Vue.js son muy útiles. Generalmente son utilizados sólo en la vista. Por ejemplo, si queremos filtrar moneda hacemos esto:

{{sueldo | currency}}

¿Pero qué pasa si queremos utilizar esos filtros en nuestro código javascript? recientemente me pasó que estaba generando un documento PDF con la magnífica librería jsPDF, pero para mostrar algunos montos necesitaba filtrarlos antes.

Así que me puse a pensar en cómo utilizar los filtros no sólo en la vista, sino también en la lógica. Y encontré la respuesta.

Utilizar filtros de VueJS en código Javascript

La respuesta viene del creador de este maravilloso framework. Una vez que hemos registrado nuestros filtros globalmente, podemos acceder a ellos desde this.$options.filters o desde Vue.options.filters.

Así que si tenemos un filtro llamado currency, podemos “importarlo” de la siguiente forma:

const {currency} = this.$options.filters;

Lo mismo para todos los demás filtros que hayamos registrado. Arriba estoy utilizando algo llamado desestructuración de objetos, o algo así. Pero sería lo mismo que escribir:

const currency = this.$options.filters.currency;

Finalmente, para utilizarlos, llamamos a la función y le pasamos argumentos:

let montoBonito = currency(monto);

En este caso fue para el filtro currency, pero podemos utilizarlo para cualquier filtro existente.

Filtro de moneda o dinero en VueJS

Introducción

Vue.js es un framework poderoso pero liviano. Por lo tanto, no viene con cosas innecesarias, los filtros son un ejemplo de ello. En las aplicaciones que desarrollamos, no siempre necesitaremos el filtro currency o de dinero.

Pero habrá algunas ocasiones en las que sí lo necesitaremos, ¿y para qué reinventar la rueda, si alguien más ya lo hizo por nosotros? así que hoy veremos cómo utilizar el filtro de moneda en VueJS.

Instalar filtro

Esto es muy fácil. Simplemente instalamos el filtro que está aquí en GitHub. En mi caso lo haré con NPM.

Para ello, ejecutamos lo siguiente:

npm install --save vue-currency-filter

Estamos listos para utilizarlo.

Registrar filtro

Ahora le tenemos que decir a VueJS que lo utilice. En nuestra app lo importamos y registramos:

import VueCurrencyFilter from 'vue-currency-filter'
Vue.use(VueCurrencyFilter)

Listo. Ahora podemos usarlo en nuestra vista.

Configurar filtro

Por defecto, el filtro convierte algo como “589623.54” en “$ 589.624”. Si utilizamos euros, un distinto separador o cosas de esas podemos crear una configuración global al registrarlo. Para ello, pasamos un objeto como segundo argumento. Así:

Vue.use(VueCurrencyFilter,
{
  symbol : '$',
  thousandsSeparator: '.',
  fractionCount: 2,
  fractionSeparator: ',',
  symbolPosition: 'front',
  symbolSpacing: true
})

En mi caso, necesito que se filtre como en mi país se hace. En donde algo como “5369.22” se convierte en “$5,369.22” así que…

Vue.use(VueCurrencyFilter, {
  symbol: '$', // El símbolo, por ejemplo €
  thousandsSeparator: ',', // Separador de miles
  fractionCount: 2, // ¿Cuántos decimales mostrar?
  fractionSeparator: '.', // Separador de decimales
  symbolPosition: 'front', // Posición del símbolo. Puede ser al inicio ('front') o al final ('') es decir, si queremos que sea al final, en lugar de front ponemos una cadena vacía ''
  symbolSpacing: true // Indica si debe poner un espacio entre el símbolo y la cantidad
})

 

Utilizar filtro

Finalmente, en nuestra vista podemos utilizarlo. En mi caso lo implementé en una tabla:

<td class="sueldo-empleado">{{sueldoDelEmpleadoConElIndice(i) | currency}}</td>

Lo que da este resultado:

Y con eso terminamos por hoy.

Creando un buscador de artículos con API de Wikipedia y VueJS

Introducción

Ya expliqué cómo consumir la API de Wikipedia por separado. Hoy veremos un ejemplo de un buscador de Wikipedia.

Lo he hecho con mi framework Javascript favorito hasta el momento: VueJS. Encima de VueJS corre VuetifyJS que simplemente proporciona componentes con el estilo Material Design.

Vamos allá.

Probar app terminada

Ya ni sé por qué le decimos a cualquier cosa “app” pero no encuentro otro nombre para nombrar las cosas. En fin, si quieres ver el proyecto terminado aquí dejo un link a codepen. Igualmente lo dejo embebido:

See the Pen Wikipedia viewer by Luis Cabrera Benito (@parzibyte) on CodePen.

Construyendo un buscador de Wikipedia

Bueno, vamos a explicar cosa por cosa.

Herramientas utilizadas

  • VueJS, un framework de Javascript
  • API de Wikipedia
  • VuetifyJS, estilo Material design sobre VueJS
  • Lodash, sólo para no tener que escribir mi propio debounce
  • Material Icons, para los iconos

Interfaz

Quise hacerla como el buscador de Google pero al final salió otra cosa y, como me gustó, así la dejé. Puse una imagen de Wikipedia, abajo un campo para introducir texto, luego un botón para obtener un artículo aleatorio y finalmente un seleccionador de idiomas.

Traducciones

Si en la app cambiamos el idioma, veremos que la leyenda de Artículo aleatorio y Comienza a escribir cambian. Así se ve en español:

Visor de Wikipedia en español

Visor de Wikipedia en español

Así en inglés:

Visor de Wikipedia en inglés

Visor de Wikipedia en inglés

Lo mismo para otros idiomas. Cabe aclarar que saqué todo del traductor de Google jaja, así que puede que haya errores. En fin, eso no importa; lo que importa es cómo se cambia el texto.

Para ello, tenemos que remontarnos a los idiomas soportados. Puse estos:

Y entonces, en los valores calculados de la app puse estos métodos:

Por el momento fijémonos en los dos últimos. Dependiendo del idioma seleccionado, regresan un valor. Es decir, es un objeto y accedemos a una de sus propiedades. Dicha propiedad puede ser “es”, “en”, etcétera.

Lo mismo aplica para la URL de búsqueda. Podemos ver que utilizamos el poder de las backticks en Javascript para regresar una URL dependiendo del idioma seleccionado.

¿y en qué momento seleccionamos un idioma por defecto? en el método mounted del ciclo de vida de nuestra aplicación:

Seleccionamos el primer idioma que encontremos, ya después el usuario podrá elegir otro, y cuando eso pase, todo se refrescará automáticamente gracias a la reactividad de VueJS.

Búsqueda

La parte más importante de la aplicación. Detecta cuando empezamos a escribir y busca.

Detectar cambios

Con watch, vigilamos cuando cambie “busqueda”. En caso de que cambie y de que tenga un valor que no sea falso, buscaremos. Como vemos llamamos al método buscar.

Debounce

Ok. Una vez que detectamos los cambios, hacemos un debounce. Un debounce es algo así (al menos en js) como llamar a una función una única vez, en el intervalo dado. Para no complicarme las cosas utilicé lodash.

Explicando de mejor manera, si no hiciéramos un debounce, la función se llamaría el número de veces que el usuario escribiera. Si quería buscar “hola”, la función se llamaría con “h”, luego con “ho”, y así, 4 veces.

Al usuario no le importaba buscar “h” ni “ho” o “hol”, sino “hola”, pero sin querer llamó a la función 4 veces. Esto cargaría al servidor. Para ello, hacemos que sin importar cuántas veces se llame la función, sólo se llame después de medio segundo (500 milisegundos).

De esta manera, el usuario podrá buscar y su búsqueda regresará en 500 milisegundos; cosa que ni notará.

Buscar

Cuando buscamos, simplemente llamamos a la url de la api y le concatenamos el valor de la búsqueda. Esperamos a que hayan resultados y primeramente eliminamos las etiquetas HTML, luego hacemos un JSON.parse para decodificar la cadena en formato JSON y finalmente establecemos los resultados de la búsqueda a respuesta.query.search.

VueJS detectará el cambio y entonces mostrará la lista de resultados:

Resultados de la búsqueda | Consumiendo API de wikipedia

Resultados de la búsqueda | Consumiendo API de wikipedia

Cuando hacemos click, el objeto clickeado pasa a ser el valor de la variable resultadoSeleccionado.

Resultados

Como dijimos arriba, el resultado pasa a ser parte de nuestra app. Y para ello lo mostramos en la vista:

Utilizamos v-if para ocultarlo en caso de que no seleccionen nada. Mostramos el título y el snippet. También un botón que en realidad es un link, y que dirige al enlace que tenga la variable rutaArticulo. Esta variable ya fue vista anteriormente, allá arriba.

Artículo aleatorio

Igualmente sólo es un link-botón definido así:

Cuyo href es la variable rutaArticuloAleatorio que ya vimos más arriba.

Otras cosas

Sólo hace falta mencionar la equis que aparece en la barra de búsqueda, cuya función es limpiar el campo de texto. Viene por defecto en el componente, así que no hace falta explicarla.

Conclusión

Espero que haya explicado todo y que no queden dudas. De todos modos, puedes dejar un comentario si algo no quedó claro. Aquí dejo el código fuente, pues es la mejor manera de estudiar el funcionamiento. Nos vemos luego.

App de clima dependiendo de ubicación con VueJS + Vuetify

Introducción

Hace algún tiempo dejé los “estudios” que estaba realizando en freecodecamp.org. Recuerdo que me frustré porque no pude terminar la app que mostraba el clima en la ubicación del usuario. Eso fue porque quería que quedara perfecta.

El tiempo pasó y lo olvidé, pero apenas lo retomé. Y aunque no quedó perfecta, quedó.

Por eso hoy vengo a explicar cómo la hice y qué cosas utiliza. No es un tutorial, porque me llevaría mucho tiempo explicar el funcionamiento de cada cosa. Será como un repaso.

App final

Si quieres ver el resultado final, aquí lo dejo. Puedes analizar el código fuente a tu gusto 🙂

No pude incrustarlo, aquí dejo el link: Ver resultado final

Por cierto, no te mostrará nada si es que no le das permiso de obtener tu ubicación o si no puede obtenerla.

Librerías que utiliza

Obteniendo ubicación

Para obtener la ubicación del usuario utilicé navigator.geolocation.getCurrentPosition. Esto toma 3 parámetros, que son, en orden:

  1. Función callback si todo va bien. Es decir, si el usuario acepta darnos su ubicación y si es que se puede determinar la ubicación.
  2. Función callback si algo sale mal. Esto pasa si el usuario no quiere dar permisos para acceder a la ubicación, o si el dispositivo no tiene algo para determinar la ubicación.
  3. Objeto con opciones. A este objeto le ponemos propiedades como el tiempo de espera máximo, si queremos una alta precisión y otra cosa que no recuerdo bien.

El fragmento de código es este:

Con eso ya lo tenía. Ahora, cuando VueJS me informara que la aplicación había sido montada, llamaba a esa función.

Obteniendo clima

Para obtener el clima utilicé la API que freecodecamp proporciona. Creo que no es muy precisa pero igual funciona. Dicha API devuelve en formato JSON el clima, la temperatura, el lugar y una imagen. Uno sólo le manda la latitud y longitud obtenidas en el paso anterior.

Para hacer la petición, utilicé fetch, que ya viene incluida en las nuevas versiones de Javascript. El código queda así:

Lo de this.cargandoClima es para mostrar la animación de “cargando” en el botón de la esquina inferior derecha.

Iconos y estimación de la hora del día

El icono cambia dependiendo del clima. Si llueve, muestra un icono de lluvia. Si está despejado, también. Pero aparte de eso, muestra una luna o un sol. Para estimar la hora, utilicé esto:

Según yo, sería de día si la hora actual (del 0 al 23) está entre 7 y 19. Es decir, desde las 7 de la mañana hasta las 7 de la noche.

Y para los iconos, como ya dije, utilicé la librería Weather icons. Dicha librería provee iconos con un sol y una luna; es decir, para el día y la noche. Entonces haciendo uso de lo que me devolvía el clima, hice un switch para componer el icono. Este es el código que utilicé:

Conversión de grados Celsius a Fahrenheit

Para terminar, hice que se pudiera cambiar entre grados F y C. Aquí el código:

No programé la conversión de F a C, porque la API da la temperatura en Celsius. Así que sólo tenía que convertir a Fahrenheit, y si el usuario quería Celsius, no hacía nada, mostraba los originales.

Conclusión

Al final de todo, quedó bien. Y no fue mucho trabajo terminarla.