Hola chicos ¿qué tal?
Seguimos con nuestra aplicación, en el tutorial de hoy vamos a ver que cosas nos faltan.
Por un lado nos faltarían las noticias.
Por otro lado, nos faltarían los datos de solo España.
También nos faltarían los resultados en un mapa.
En este caso tendríamos un problema, ya que Glide solo nos deja diez datos en un mapa en su versión gratuita.
En primer lugar vamos a ver como hemos hecho la pestaña con solo los datos de España.
Para ello nos volvemos a nuestra aplicación.
Que como veis, la tenemos por el momento mucho más pobre que como acabamos de decir. Ya que aún no tenemos todas las pestañas.
Para tenerlas en primer lugar hacemos clic en "tabs".
Volvemos a añadir una "tab" nueva, para ello hacemos clic en el "+" que está en la parte superior derecha.
La llamamos España y elegimos cualquiera de los iconos, en nuestro caso elegiremos el icono que tiene forma de corazón.
Y en la opción "Source", elegiremos la pestaña países de nuestra hoja de cálculo.
Ahora nos iremos a la opción "layout" desde el icono del panel de la izquierda.
Si nos damos cuenta tanto en la pestaña "global", como en la pestaña "países" veremos todos los países. Para que no estén todos los países y solo tengamos los datos de España en esta pestaña lo que tenemos que hacer una vez que tengamos seleccionada la pestaña de países es desde el panel de la izquierda elegir la opción de detalle.
Para ver los datos como si fuera un solo país.
En la opción "características" (Features) Añadiremos un nuevo filtro "+ Add Filter"
Y le diremos que Country es igual a Spain.
De esta forma en la pestaña país tendremos a España como el país predeterminado.
De esta forma ya tenemos las pestañas con los casos de España, así como de todos los países.
Nos faltaría añadir las noticias, como anunciábamos en el ejemplo del primer tutorial.
Para añadir las noticias, haremos algo muy similar a que lo que hicimos para traernos los datos por países.
En nuestra hoja de cálculo, crearemos una pestaña que llamaremos Noticias.
En la primera celda de esta hoja de cálculo, utilizaremos la misma fórmula que en el caso anterior, pero ahora lo que cambiará será la URL
Para hacer esto hemos usado un servicio que se llama NewsAPI (NewsApi.org) que nos va a permitir de manera automática traernos noticias de cualquier temática.
(Como podéis ver nosotros ya nos hemos dado de alta)
Darse de alta en esta aplicación es gratuito. Por lo que podéis hacerlo sin mayor complicación.
Este paso es fundamental ya que necesitamos el "numerito" de la API para que esto nos funcione.
En la propia Web ya nos pone un ejemplo el cual nos lo podemos copiar para hacer un ejemplo.
Si lo pegamos en el navegador, veremos lo siguiente.
Como se puede observar no se entiende mucho, lo que podemos ver es un montón de noticias separadas por comas, es decir, que lo que nos va a hacer esta API es traernos noticias de cualquier tema que queramos de manera automática.
Si os dais cuenta en el ejemplo anterior aparecía bitcoin.
Si nos volvemos a nuestra hoja de cálculo veremos lo siguiente.
En primer lugar le hemos dicho que nos traiga todas las noticias de coronavirus, "everything?q=coronavirus
En segundo lugar que el lenguaje sea español, languaje=es
En tercer lugar nos hemos traído el "numerito" que nos ha proporcionado NewsApi
Con esta fórmula lo tendríamos, y como veis, nos trae todas las noticias a nuestra hoja de cálculo.
Si en lugar de hacer esto con la noticia de coronavirus, lo quisiéramos hacer con las noticias del verano, tan solo deberíamos de cambiar en nuestra URL, el punto 1 (coronavirus) por verano.
Solo con este cambio, si nos fuéramos a nuestra aplicación que pusimos de ejemplo ya veríamos como las noticias se refrescan con todas aquellas que tengan la palabra verano.
Por lo que de una manera automática hemos añadido un montón de noticias que tienen que ver con el verano. Magia!!
Ahora que ya hemos visto que esto funciona correctamente, volvemos a poner la palabra coronavirus donde estaba verano (recordemos que nuestra aplicación versa sobre este último)
Por lo que recordemos, que para hacer esto copiaremos la fórmula:
=ImportJSON("https://newsapi.org/v2/everything?q=coronavirus&language=es&apiKey=tuApiKey")
En nuestra pestaña de noticias de nuestra hoja de cálculo.
Como decíamos líneas arriba, cuando vosotros os deis de alta en NewsAPi, si hacemos clic en GetAPiKey
Nos dará este "numerito".
Que es el que necesitamos y el que tenéis que sustituir, en la URL que os hemos pasado donde pone "tuApiKey"
Nos faltaría que los datos se actualizaran cada cierto tiempo. Para hacerlo recurriremos a Integromat. En primer lugar vamos a añadir otra hoja de cálculo a nuestro Integromat para que se actualice nuestra aplicación como hicimos en el ejemplo anterior.
Para eso hacemos clic sobre el "+" de la última "bolita" y elegimos la opción hoja de cálculo (google sheets).
En este caso, le decimos también que actualice nuestra hoja de cálculo.
Y ahora rellenaremos con los siguientes datos
En Spreadsheet (hoja de cálculo) pondremos el lugar donde tengamos las noticias, en nuestro caso "Coronavirus Curso", en Sheet (pestaña) elegiremos Noticias, en Row Number (número dela celda) elegiremos la 1 y en valor pondremos la fórmula que le dimos a esa primera celda, es decir:
=ImportJSON("https://newsapi.org/v2/everything?q=coronavirus&language=es&apiKey=tuApiKey")
Porque lo que queremos es que se nos actualice esta primera celda:
Una vez hecho este paso tenemos que volvernos a nuestra aplicación para crear la pestaña noticias, para ello, desde el panel de la izquierda haremos clic en "tabs".
Acto seguido hacemos clic en el "+" de la parte superior derecha "tabs".
Lo nombraremos como noticias, y le diremos que elija la hoja de las noticias.
Ahora desde Layout (panel izquierdo), components (panel derecho) vamos a añadir componentes.
Aquí seleccionamos Action text.
Y vamos a elegir, por ejemplo, el número de datos confirmados.
Añadimos otro "Action Text", ahora nuevos fallecimientos.
Es decir, vamos añadiendo los datos que vayamos queriendo, una vez hecho esto, le diremos que nos añada un nuevo componente.
Y de entre los componentes elegiremos "Inline List".
Donde le diremos que nos traiga las noticias.
En un primer momento las veríamos de la siguiente manera.
Pero le indicaremos a Glide que en lugar de verlas así, las queremos ver con forma de "Cards".
En nuestra aplicación, debajo de cada foto pondrá "ok", esto es porque en el título pone el "status", pero aquí lo vamos a cambiar por "articles title" .
Y de esta manera ya veremos los títulos de los artículos en lugar del "ok"
Como veis, ya estaría, en este caso podemos observar como nos sobra la pestaña noticias, ya que en la pestaña global las tenemos recogidas, entonces para quitar esta pestaña redundante tendríamos que ir a pestañas (tabs) panel de la izquierda.
Y una vez que hemos hecho clic en noticias la eliminamos
Nos faltaría el mapa.
Para ello añadiríamos una nueva tab.
Que vamos a llamar "Mapa",donde le diremos que coja los datos de países.
Y luego desde layout (panel izquierdo) le diremos que lo queremos ver con vista mapa.
Pero como vemos, nos dice en esta versión gratuita
"Se alcanzó el límite gratuito de marcadores en el mapa. Es posible que algunas ubicaciones no aparezcan"
Por lo que si queremos que en esta vista nos parezcan todos los datos en el mapa necesitaríamos la versión de pago.
Esperamos que esta aplicación os guste y sirva más allá del ejemplo que nosotros hemos puesto del coronavirus.
Lo bueno es que esta aplicación a través de Integromat podemos hacer un montón de cosas nuevas.
¡Esperamos que os haya gustado!!! Nos vemos en el siguiente curso.
¡Hasta Luego!!
La fórmula que tienes que añadir en Google drive es:
=ImportJSON("https://newsapi.org/v2/everything?q=coronavirus&language=es&apiKey=tuApiKey")
