marzo 2018

Iconos de Google (Material icons) offline

Introducción

Los Material icons o Iconos de material design son, como su nombre lo dice, iconos que nos ayudan a adornar y mejorar nuestras aplicaciones web. No siempre vamos a tener internet, puede que portemos nuestra app para una pc que no tenga acceso a internet. O igual y queremos alojar nosotros mismos los iconos, por si algo malo llega a pasar.

El punto es que en algún momento necesitaremos descargar iconos de Material icons para ternerlos offline. Y hoy vengo a mostrar cómo descargarlos.

¿De qué iconos hablamos?

Por si no sabes de lo que hablo, me refiero a los que aparecen en este enlace.

Podemos incluirlos así:

Pero como lo dije, vamos a ver cómo incluirlos offline.

No sé si sea legal descargar los iconos. Yo supongo que no hay ningún problema, pero es responsabilidad del usuario.

Analizando iconos

De hecho, es como cargar una fuente o tipografía. Si visitamos el link, veremos que hay código CSS:

Tenemos que concentrarnos justamente en donde dice url y carga un archivo con extensión woff2. Si navegamos a ese link (que al menos en mi caso es https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) se nos descargará la fuente. Y podremos guardarla.

Esa fuente es la que trae todos los iconos. Vamos a guardarla en una carpeta de nuestra aplicación web llamada fonts con el nombre de iconos.woff2. Si le cambias el nombre, recuerda cambiarlo también al incluirlo.

Incluyendo fuente descargada

Ahora sí vamos a hacerlo offline, en nuestra app debe haber una carpeta que albergue nuestros estilos css. Pues junto a ella (no dentro de ella, sino en el mismo directorio) crearemos una carpeta llamada fonts.

Si no me entiendes bien, la estructura podría ser así:

Podemos ver que css, fonts y js están juntas. Ahora, a nuestro estilo CSS (que está dentro de la carpeta css) vamos a añadirle el siguiente fragmento de código:

Como podemos ver, es el mismo código que tiene la página de las fuentes de Google, pero con la diferencia de que ahora estamos cargando las fuentes que están un directorio arriba y luego dentro de la carpeta fonts.

Es decir, estamos dentro de la carpeta css. Para cargar la fuente, necesitamos salir de la carpeta o ir un directorio arriba (eso lo hacemos con ../). Una vez que hayamos salido, entramos a fonts y luego cargamos iconos.woff2

Y con eso hemos incluido los iconos offline. Ya sólo falta incluir un link a nuestros estilos css.

Directorio de ejemplo

Si no me expliqué bien, mi directorio está así:

En la carpeta css tengo a estilos.css. Ahí dentro puse el fragmento de código de arriba. Y en fonts tengo los iconos con la extensión woff2. Luego, en mi archivo index.html hago esto:

Resumiendo

En pocas palabras:

  • Descarga la fuente y guárdala con el nombre que desees
  • En tus estilos, añade el segundo fragmento de código que puse en el post. Y en url apunta al directorio en donde hayas descargado la fuente
  • Finalmente incluye tu archivo css que carga la fuente en donde quieras usarlo

Inner join y otras uniones de tablas en CodeIgniter

Introducción

En estos días tuve la inquietud de cómo hacer un inner join con 2 o más tablas utilizando el query builder de CodeIgniter. Y como ya he encontrado la solución, decidí reunir todas mis investigaciones para explicarlo. Vamos allá.

Hacer inner join de 2 tablas

Aquí dejo la solución. Sólo cambia el nombre de tus tablas y las condiciones como se deba. En este caso se unen 2 tablas.

 Inner join de 3 tablas

Ahora veamos cómo hacer un inner join de 3 tablas. Ya con este ejemplo podemos imaginar cómo podemos unir infinitas tablas.

Left, right, outer

No siempre vamos a querer un inner join, que es la opción por defecto. Podemos pasar un tercer argumento al llamar a join. Por ejemplo, para left es así:

Eso fue para left, pero el tercer argumento puede ser cualquiera de la lista de abajo.

Lista de opciones para unir tablas

  • left
  • right
  • outer
  • inner
  • left outer
  • right outer

Ejemplo

Para implementar esto en un modelo de CodeIgniter, podríamos hacerlo así:

Referencias

Si quieres saber más sobre el tema, aquí dejo el link de la documentación oficial:

Query Builder Class | CodeIgniter V3

Conclusión y notas

Es muy fácil hacer uniones de tablas de cualquier tipo utilizando este framework. Recuerda que el código de ejemplo, al menos como yo lo recomiendo, va dentro de un modelo. Y no olvides cargar la base de datos en dicho modelo con load->database() en el constructor.

 

Python: Volumen y área total de una caja

Introducción

Esto es otro ejercicio sacado de codewars. Se trata de calcular el volumen y el área total de una caja, y devolverlos en una lista. El problema dice más o menos así:

Dada la altura, anchura y profundidad de una caja, calcular su volumen y su superficie o área total.

Es decir, tenemos que devolver el volumen, y la suma de la superficie de cada cara. Recordemos que es una caja, no un cubo.

Imagen explicativa

Al principio me confundí y pensé que era un cubo, pero es una caja. Una caja como las que tenemos en casa, esas en donde guardamos cosas. Es así:

Créditos al respectivo autor de la imagen, aunque cuando me la robé, puse “Etiquetadas para reutilización” en la búsqueda, pero no hay que confiarse.

Nota: Width es profundidad, Length anchura y Height altura. Tal vez no lo sea así para los matemáticos, pero para este ejercicio sí.

Calcular volumen y área total

Ahora sí vamos a la función.

Calcular volumen

Para esto, simplemente multiplicamos anchura por altura por profundidad. No importa el orden ni las medidas, porque siempre dará el mismo resultado.

Calcular área

Para esto, sólo se me ocurrió multiplicar primero la anchura por la profundidad, y con eso obtenía la superficie de la cara de arriba. Eso lo multiplicaba por 2, pues la cara de abajo y arriba miden lo mismo.

Luego, al resultado anterior le sumé el resultado de multiplicar la altura por la profundidad; con eso obtenía la superficie de una cara lateral. Y a eso lo multiplicaba por 2, pues del otro lado la cara era igual.

Y finalmente, sumaba a los resultados anteriores el resultado de multiplicar la anchura por la altura por 2. Ya que con anchura y altura obtenemos la superficie de la cara de adelante.

Solución al ejercicio

Una vez explicado eso, el ejercicio queda así:

Y pasa correctamente las pruebas:

Establecer opción seleccionada en Select con MaterializeCSS y jQuery

Introducción

Hacer que un select tenga una opción seleccionada con jQuery es una tarea fácil, lo mismo que con MaterializeCSS. Sólo que para que éste último funcione, debemos refrescar el select para que tome la opción que le dimos.

Seleccionar opción en select con MaterializeCSS

Seleccionamos el elemento HTML utilizando jQuery, y le ponemos el valor como lo haríamos con cualquier otro select. Pero después de esto, llamamos a material_select para que los cambios se refresquen. Así:

En este caso, se supone que el select tiene el id miSelect.

Recuerda que el valor que le pongamos debe ser un valor que esté en las opciones. Es decir, no puedes poner un valor que el select no tenga en sus opciones.

Mira el ejemplo de abajo.

Ejemplo para poner valor en un select

Vamos a poner un select y dos botones con los que podremos cambiar la opción del select sin que el usuario tenga que hacer click en él. El código HTML queda así:

Más tarde, en el script esperamos a que el documento esté listo. Iniciamos el componente y escuchamos el click de los botones.

Cuando se hace click en cualquier botón, se selecciona la opción 1 o 2. Si vemos las opciones del select, podemos ver que en el atributo value tienen esos números. Lo que quiero dar a entender es que no debemos seleccionar ningún valor que no esté en las opciones.

Demostración en codepen

Aquí dejo un pen para probar lo que acabamos de hacer.

See the Pen Seleccionar opción en select con materializecss by Luis Cabrera Benito (@parzibyte) on CodePen.

Y con eso terminamos.

Cambiar zona horaria o timezone en CodeIgniter v3

Introducción

Si trabajamos con fechas y horas en PHP, siempre necesitaremos tener la zona horaria de acuerdo a un lugar. Normalmente, cuando subimos nuestra app, la zona horaria cambia.

Es ahí en donde necesitamos saber cómo configurar o cambiar la zona horaria en CodeIgniter.

Cambiar timezone

Es muy fácil, y de hecho no es una función del framework, sino de PHP. Para ello, navegamos a application/config.php que supongo es un archivo incluido en todos los procesos.

Al inicio del script, agregamos la línea que tiene un comentario (las línea 1 y 2 ya estaban ahí, pero es para ejemplificar):

En mi caso puse America/Mexico_City porque esa es  la zona horaria que quiero. Pero podemos poner la que necesitemos, aquí está la lista completa de zonas horarias.

Y con ello habremos configurado la zona horaria. Sólo para aclarar, así se ve el archivo config.php al final:

Habilitar error log en CodeIgniter 3

Introducción

Para los desarrolladores que utilizamos AJAX o no queremos mostrar los errores en una app en producción, los logs son la herramienta principal para depurar y corregir errores.

Hoy mostraré cómo habilitar logs, o el archivo de errores en CodeIgniter.

Habilitar el log de errores

Lo único que tenemos que hacer es ir a application/config/config.php y cambiar el valor del arreglo $config en el índice log_threshold al valor 1.

Con esto estamos simplemente cambiado el umbral de errores.

El fragmento de código en cuestión es este:

Y ahí, un pequeño comentario nos da una pequeña introducción. Dice que si queremos deshabilitarlos, pongamos el valor en 0. Pero si deseamos habilitar los errores así como en cualquier aplicación, debemos ponerlo en 1.

En mi caso, al probar le puse un valor 4 y se loguearon muchas cosas:

Cuando en realidad sólo quería el error que aparece abajo. Así que mejor lo puse en nivel 1. Y el fragmento se ve como a continuación:

Ubicación de los archivos

Por cierto, los archivos de error aparecen en la carpeta application/logs y están nombrados de acuerdo al día. mes y año. Así, podemos analizarlos por fecha.

Aviso

Debemos asegurarnos de que en la carpeta application/logs se puedan crear archivos. Es decir, debe tener habilitada la escritura.

Conclusión

Así de fácil es habilitar el logueo de errores en CodeIgniter: un framework liviano de PHP que algunas personas y compañías todavía usan y usarán.

App web para memorizar cosas hecha con AngularJS y Bootstrap 4

Introducción

Retomando la sección de cosas que hago para usos personales, recuerdo que una vez hice una app para memorizar un texto. Es muy simple, pegas un texto que tienes que memorizar y el software se encarga de eliminar algunas partes de éste y dejarlas en blanco.

Luego, tienes que completar estos campos. Y la app te indica si lo hiciste bien o mal. Si no te gusta la forma en la que se mezclaron las palabras, puedes mezclarlas de nuevo.

Tecnologías utilizadas

  • Para su funcionamiento utiliza AngularJS en su versión 1.6.5.
  • Para el diseño, aprovecha el bonito estilo de Bootstrap 4.
  • Finalmente, los iconos son gracias a Fontawesome.

Explicación y funcionamiento

Trataré de dar una explicación del funcionamiento. Tenemos la interfaz principal compuesta por un textarea y un botón.

Al botón le añadimos el atributo ng-click para que AngularJS se encargue de llamar a la función comenzar, que recibe el texto como argumento.

Primeramente detenemos la ejecución si no hay texto, es decir, si lo dejaron en blanco. Luego, quitamos todos los acentos y letras ñ, para que los usuarios no se quejen de que pusieron bien la palabra pero “olvidaron la tilde”.

Luego, separamos todo el texto en cada espacio que encontremos, y lo convertimos en un arreglo. Lo recorremos completamente y en cada iteración hacemos una comparación.

Si el azar nos dice que borremos la palabra, entonces la borramos. Y ponemos en un nuevo arreglo (no el original, sino uno nuevo) un objeto con la palabra original y una cadena vacía, que será la que introducirá el usuario.

En caso de que no se deba borrar la palabra, la ponemos tal y como está.

La variable del contador es para que no queden muchos inputs cercanos o pegados.

¿Debería quitar esta palabra?

Este método se encarga de regresar, de acuerdo a una elección aleatoria, un booleano. Simplemente elige un valor de un arreglo. En el arreglo hay más falsos que verdaderos, pero esto ayuda a que no elimine muchas palabras. El código es este:

Verificar si coinciden

Finalmente, para verificar si el usuario introdujo la palabra correcta, en la vista agregamos algunas clases dependiendo de ello. Si está bien, agregamos la clase is-valid y si no, la clase is-invalid. Esto hace que se coloree de verde o rojo.

También es importante notar que la anchura del input viene dada de acuerdo a la longitud de la palabra. Dicha anchura o longitud es calculada con una fórmula medio rara pero que al final de todo funciona y cambia de acuerdo a qué tan larga esté la palabra.

Tal vez sería mejor calcular el ancho en una función interna, pero hoy no cambiaré el código.

App final

Así se ve al hacer click en comenzar:

Probar

Aquí dejo un pen para probar la app en vivo. Espero que les guste 🙂

See the Pen Memorizar o estudiar texto by Luis Cabrera Benito (@parzibyte) on CodePen.

Por cierto, dentro del código hay una directiva que me robé de por ahí, la cual se encarga de, como su nombre lo dice, enfocar el siguiente input cuando se presione la tecla Enter.

Conclusión

Recuerdo que hice esa cosa para memorizar algunas cosas en un examen. Soy muy malo con mi memoria, y creo que no sirvió para mucho.

Si hay algo que me molesta son los exámenes en donde tienes que utilizar la memoria para responderlos. Qué pereza y qué pérdida de tiempo, prefiero las cosas prácticas. Pero en fin, ojalá a alguien le sirva el software.

Idioma español de datepicker en Materialize CSS

Introducción

MaterializeCSS es un framework CSS que implementa Material Design. Es utilizado junto con jQuery. Tiene muchos componentes, entre ellos el datepicker.

Un datepicker es un control para que el usuario elija una fecha. Por defecto, viene en inglés, pero podemos cambiarlo a cualquier idioma, y en este caso será al español.

Cambiar idioma de datepicker

Es muy simple. Una vez que el documento esté listo, seleccionamos a todos aquellos elementos HTML que tengan la clase datepicker y llamamos al método pickdate. Le pasamos como primer argumento un objeto con las etiquetas en el idioma de nuestra preferencia.

En este caso, las configuramos en español. Como podemos ver, proporcionamos la traducción de meses y días, así como sus formas cortas. Y también algunas cosas como la navegación y los botones de “Limpiar” y “Hoy”.

El código de ejemplo en Javascript es este:

Y el HTML para mostrarlo es el siguiente:

Demostración de cambio de idioma de MaterializeCSS y Datepicker

Aquí dejo un pen para demostrar que esto realmente sirve.

See the Pen Datepicker y Materialize CSS en español by Luis Cabrera Benito (@parzibyte) on CodePen.

Pequeño, muy pequeño sistema de ventas con PHP y MySQL

Introducción

Hace algunos días hice un ejercicio de un sistema de ventas en PHP. Está escrito en puro PHP, nada de Javascript. Eso sí, para los estilos utilicé una variante de Bootstrap.

Los archivos no tienen una estructura, pero como lo dije, es un ejemplo. También escribo esto porque igual y le sirve a alguien más o me sirve a mí mismo para algunas referencias.

Para la persistencia de datos utiliza MySQL. Guarda productos y ventas. No maneja permisos de usuarios. Almacenamos el carrito de compras en la sesión, y bueno, mejor lo explico por partes.

Continue reading…

Configuración de CodeIgniter v3 y PDO con MySQL

Introducción

En algún (y seguramente muy mal) momento de nuestra vida puede que nos toque trabajar con este framework que a mi parecer no es tan bueno como su competencia que ya ni parece competencia: Laravel. En fin, como estaba diciendo, puede que trabajemos con CodeIgniter y necesitemos conectarnos a MySQL utilizando PDO.

Hoy veremos cómo configurar el archivo que se encarga de la conexión a la base de datos para que funcione correctamente. Este ejemplo funciona como un encanto en la versión 3.1.7 pero supongo que igual será para las versiones futuras. Y si estás usando una versión anterior, te recomiendo actualizar.

Configuración para conectarse a MySQL con PDO

Aquí dejo un ejemplo de configuración que, al menos a mí, me ha funcionado para utilizar MySQL con la librería PDO de PHP. Recordemos que este archivo está ubicado en application/config/database

Y con eso podemos comenzar a trabajar usando PDO.

 

Axios y PHP: ejemplos de peticiones AJAX

Introducción

Si queremos hacer peticiones AJAX utilizando Javascript y PHP sin complicarnos las cosas, podemos utilizar una librería que es muy popular en el mundo de VueJS.

Pero hoy no hablaremos de éste framework, sino de axios: una librería para hacer peticiones HTTP asíncronas.

Es muy fácil de configurar y provee algunos métodos que a cualquier desarrollador le vendrían bien.

Para explicarlo mejor, haremos 4 operaciones HTTP: GET, POST, PUT y DELETE. Del lado del servidor utilizaremos PHP sin ningún framework. Vamos allá.

Lado del servidor

Supondremos que todas las peticiones serán realizadas a un mismo archivo PHP, y qué este se encargará de ver cuál método se está llamando. Y para efectos prácticos vamos a imaginar que es una API para gestionar usuarios y ventas.

El código para responder a cada solicitud queda como se ve a continuación. Simplemente leemos cuál es el método de petición, dependiendo de ello evaluamos la ruta, y respondemos. Este es un método que aunque sirve, es un poco difícil de mantener.

Sin embargo, esto sólo es ilustrativo para no confundir al lector. Si queremos algo más robusto para manejar las rutas en PHP, podemos leer este post.

Obviamente en lugar de un echo, llamaríamos a una función, una función de un controlador, conectaríamos a la base de datos o cualquier cosa.

JSON para comunicarse

Estamos utilizando JSON para realizar la comunicación. Prefiero este método a cualquier otro, ya que podemos mandar un objeto, un objeto con arreglos, un arreglo de objetos, etcétera (cualquiera cosa que esté en formato JSON) y después, al decodificarlo del lado del servidor, conservará su estructura, así como los tipos de datos: los strings serán strings, los flotantes flotantes, y lo mismo para los booleanos y enteros.

Es por ello que con PHP utilizamos json_decode para decodificar los datos. Y luego, cuando respondemos, hacemos un json_encode. Así, respondemos y recibimos en el mismo formato.

Lado del cliente

Por defecto, Axios serializa los datos. Así que ya no tenemos que utilizar JSON.stringify (o cualquier método que usemos).

Si no utilizáramos Axios, Javascript provee dos funciones para trabajar con JSON: JSON.stringify para codificar, y JSON.parse para el proceso contrario.

Pero en este caso Axios sabe que JSON es un buen formato, así que él mismo codifica y decodifica los datos. Es decir, cuando hacemos una petición, codifica internamente los datos antes de enviarlos. Y cuando recibe la respuesta, antes de mandarla, la decodifica.

El código para hacer las peticiones queda así:

Ejecutando aplicación

Sólo fueron dos peticiones, pero al ejecutar el código pasa esto:

Lo que comprueba que realmente se están recibiendo los datos es la segunda impresión en la consola. Ya que dice que guardamos al usuario Luis, y ese nombre lo estamos recibiendo en PHP e imprimiéndolo para regresarlo.

Notas

Peticiones

En el ejemplo sólo llamé al método POST y GET. Como pudimos ver, con POST accedemos a los datos desde la variable obtenida de php://input.

Lo mismo podemos hacer con PUT, recordemos que los datos viajarán en el cuerpo, no en la URL. Aunque sí podemos poner algo como un id en la dirección.

Finalmente, quiero aclarar que en PHP podemos hacer un echo igualmente de un objeto o arreglo, no debemos limitarnos a una cadena. Y tampoco debemos limitarnos a un “echo”. Podemos hacer un printf o cualquier cosa que imprima datos. O igualmente podemos no imprimir nada.

ES6

Por cierto, utilicé sintaxis moderna de Javascript. Por ejemplo, let, funciones flecha y const. Estos estándares todavía no están soportados en todos los navegadores, pero sí en la mayoría. Puedes rescribirlos si gustas.

En lugar de let y const sería var. Y en lugar de la función flecha, sería una función anónima.

 

Conclusión

Si combinamos esta librería del lado del cliente con una librería como Phroute del lado del servidor, podemos armar una API robusta con la arquitectura cliente servidor utilizando la comunicación REST.

Entero a cadena y cadena a entero en Go

Introducción

En cualquier lenguaje de programación necesitaremos convertir o castear diferentes tipos de datos. Hoy veremos cómo convertir números a cadena y viceversa, así como otras conversiones útiles usando strconv.

Convertir cadena a entero

Para ello utilizamos strconv.Atoi, que quiere decir algo como “ASCII to integer”. Si algo malo pasa durante la conversión, devolverá un error en la segunda variable. Un ejemplo vale más que mil palabras:

En este caso convertimos la cadena “10”. Si algo saliera mal durante la conversión, lo imprimimos. Pero en caso de que todo salga bien, imprimirá 15, ya que estamos sumando su representación entera + 5.

Convertir entero a cadena

Ahora veamos cómo convertir un número entero a una cadena o string. Para ello usamos “Itoa” que quiere decir algo como “Integer to ASCII”. Se utiliza así:

En este caso, Itoa no devuelve ningún error. Supongo que es porque existe una representación de cadena para cualquier otro tipo de valor.

Convertir a binario

También podemos convertir una cadena a su representación binaria, como lo explico en este post.

Otras conversiones

Podemos convertir cadenas a booleanos con FormatBool y a flotantes con FormatFloat. Aquí dejo un link a la página oficial.

Binario a decimal y viceversa en Go

Introducción

Hoy veremos cómo convertir un número en su representación binaria a un entero. Y un entero a su representación binaria. Es decir, convertir algo como “10” en binario a 2 en decimal; así como 2 en decimal a “10” en binario.

Decimal a binario

Para esto simplemente llamamos a FormatInt del tipo strconv. Esto nos dará la representación binaria como una cadena. El número que le pasemos debe ser un int64, y para convertirlo podemos usar la función int64.

Aquí dejo algunos ejemplos:

La salida es esta:

Binario a decimal

Ahora veamos la operación inversa. Convertiremos un número en su representación binaria a un número decimal. En este caso usamos ParseInt del tipo strconv. El primer argumento que recibe es el dato que convertiremos (la representación binaria), después la base (2) y finalmente el tamaño que será 64.

Recordemos que puede devolver un error en la conversión, así que debemos manejarlo. El código de ejemplo queda así:

Al ejecutarlo, esto se ve:

Y con eso terminamos por hoy.

Buscar el número más grande y más pequeño en un arreglo con C

Introducción

Hablando de arreglos ahora veremos cómo buscar el número más grande y más pequeño en un arreglo en C.

Número mayor y menor

El código es muy simple. Declaramos dos variables aparte del arreglo. Dichas variables tendrán el primer elemento del arreglo. Después recorremos el vector y si el número en el que estamos (en la posición i) es mayor, entonces asignamos a mayor dicho número. Lo mismo para menor.

Después, al salir del ciclo imprimimos y todo correcto.

Compilación y ejecución

Finalmente tenemos esto al compilarlo y ejecutarlo:

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.