22 de enero de 2022

Introducción al uso de la API de Blogger v3

API Blogger
Una API o Interfaz de Programación de Aplicaciones (Application Programming Interface) es un protocolo que define cómo los dispositivos y las aplicaciones se comunican entre sí. Describe cómo los clientes que consumen las APIs pueden acceder a los recursos y qué métodos funcionan con su arquitectura.


A la hora de crear una API para la integración de software, el diseño REST (REpresentational State Transfer) destaca como el enfoque de arquitectura para el diseño de servicios web y se refiere al conjunto de reglas específicas que establecen como estos servicios se comunican a través de internet.

El estilo arquitectónico REST está compuesto por varios principios:

  • sin estado: las aplicaciones REST deben comunicarse con los recursos sin estado, es decir, no deben almacenar ningún contexto ni información de sesión.
  • separación cliente-servidor: la API se expone en un servidor y es consumida por clientes (apps, servicios).
  • sistema en capas: los componentes de los sistemas REST no deben poder ver más allá de su capa. Cada componente no debe influir en otro componente de la arquitectura.
  • cacheable: los datos del servidor REST deben marcarse como almacenables o no en caché. En caso afirmativo, el cliente puede reutilizar datos de la respuesta para solicitudes equivalentes posteriores.
  • interfaz uniforme: se hace hincapié en una interfaz uniforme entre los componentes (identificación y manipulación de recursos, hipermedia y mensajes autodescriptivos).

REST es independiente de cualquier protocolo subyacente y no está necesariamente unido a HTTP pero en las implementaciones más comunes de API REST, se usa HTTP como protocolo de aplicación.

De forma muy resumida, REST es un estilo arquitectónico y las API REST son servicios web que lo implementan.
Para complicar más las cosas, los desarrolladores llaman a una API HTTP que usa un estilo CRUD (Create, Read, Update, Delete) un servicio RESTful.

La API de Blogger v3 permite que las aplicaciones cliente vean y actualicen el contenido de Blogger. Tu aplicación cliente puede usar Blogger API v3 para crear nuevas publicaciones en tu blog, editar o eliminar publicaciones existentes y consultar publicaciones que coincidan con criterios concretos.

Cada solicitud que se envía a las APIs de Blogger debe identificar tu aplicación ante Google. Hay dos formas de identificar una aplicación: usando un token OAuth 2.0 (que también autoriza la solicitud) y/o usando la clave API de la aplicación.

  • si la solicitud requiere autorización (como una solicitud de datos privados de una persona), la aplicación debe proporcionar un token de OAuth 2.0 con la solicitud.
  • si la solicitud no requiere autorización (como una solicitud de datos públicos), la aplicación debe proporcionar una clave API o un token de OAuth 2.0, o ambos, la opción que consideres más conveniente.

Una vez que tengas una clave API, tu aplicación puede añadir el parámetro de consulta a todas las URL de solicitud con key=yourAPIKey

El formato específico para las URI de la API de Blogger es:
https://www.googleapis.com/blogger/v3/users/userId
https://www.googleapis.com/blogger/v3/users/self
https://www.googleapis.com/blogger/v3/users/userId/blogs
https://www.googleapis.com/blogger/v3/users/self/blogs
https://www.googleapis.com/blogger/v3/blogs/blogId
https://www.googleapis.com/blogger/v3/blogs/byurl
https://www.googleapis.com/blogger/v3/blogs/blogId/posts
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/bypath
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/search
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/postId
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/postId/comments
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/postId/comments/commentId
https://www.googleapis.com/blogger/v3/blogs/blogId/pages
https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId

Pongamos en práctica algunos métodos de la API de Blogger.

1- vamos a mostrar información del Blog usando la siguiente url:
https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://www.tecnoblog.guru&key=yourAPIKey
<div id="api-blogger-v3" class="api-blogger-v3"></div>
<script>
function handleResponse1(response){
	document.getElementById("api-blogger-v3").innerHTML += "<div><a href='" + response.url + "' title='" + response.title + " target='_blank'>" + response.name + "</a></div><div>" + response.description + "</div><div>" + (response.published).substring(0,10) + "</div>";
}
</script>
<script async="true" defer="true" src="https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://www.tecnoblog.guru&callback=handleResponse&key=yourAPIKey"></script>


2- ahora vamos a mostrar una lista con los cinco últimos post publicados en TecnoBlog invocando a la url:
https://www.googleapis.com/blogger/v3/blogs/blogId/posts
<div id="api-blogger-v3-2" class="api-blogger-v3"></div>
<script>
function handleResponse2(response){
  for(var i=0; i<5; i++){
	document.getElementById("api-blogger-v3-2").innerHTML += "<div><a href='" + response.items[i].url + "' title='" + response.items[i].title + " target='_blank'>" + response.items[i].title + "</a></div>" + (response.items[i].published).substring(0,10) + "<br/>" + "<div class='article'><em>" + response.items[i].content.substr(0,840) + "...</em></div><hr/>";
  }
}
</script>
<script async="async" defer="defer" src="https://www.googleapis.com/blogger/v3/blogs/5415513870832441455/posts?callback=handleResponse2&key=yourAPIKey"></script>


3- por último, vamos a mostrar cinco artículos publicados en la categoría "ciberseguridad" llamando a la siguiente url con el parámetro 'q' como etiqueta a buscar:
https://www.googleapis.com/blogger/v3/blogs/5415513870832441455/posts/search?q=ciberseguridad&callback=handleResponse&key=yourAPIKey
<div id="api-blogger-v3-3" class="api-blogger-v3"></div>
<script>
function handleResponse3(response) {
  for(var i=0; i<5; i++) {
	document.getElementById("api-blogger-v3-3").innerHTML += "<div><a href='" + response.items[i].url + "' title='" + response.items[i].title + " target='_blank'>" + response.items[i].title + "</a></div>" + (response.items[i].published).substring(0,10) + "<br/>" + "<div class='article'><em>" + response.items[i].content.substr(0,840) + "...</em></div><hr/>";
  }
}
</script>
<script async="async" defer="defer" src="https://www.googleapis.com/blogger/v3/blogs/5415513870832441455/posts/search?q=ciberseguridad&callback=handleResponse3&key=yourAPIKey"></script>



9 comments:

  1. Más de esto por favor

    ResponderEliminar
  2. Hola, no sé si esto le pasará a alguien más, pero dejo la inquietud por si a alguien más le ha pasado y algún gurú conoce la respuesta. Sucede que estoy usando el código simple de llamado de página específica:

    https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId

    ...para desplegar su contenido en un área del Home. Por supuesto, estoy usando mi KEY habilitada con permisos en todo mi dominio.

    Hasta ahí todo bien: entro a mi página con la caché del navegador limpia y el Home despliega normalmente el contenido de mi página específica en el área correcta.

    El problema surge cuando actualizo la web con un "refresh" (F5) —sin limpiar la caché— o le doy click al ícono del navegador para recargar la página. La nueva carga muestra el Home con esa área en blanco. Pero curiosamente si la actualizo nuevamente me vuelve a mostrar el contenido correcto... y si actualizo de nuevo, otra vez no me lo muestra.... y así sucesivamente.

    O sea: el código me invoca el contenido correctamente sólo cada 2 "refreshs". Hice muchísimas pruebas durante casi 3 días intentando encontrar el error, y todo parece indicar algún problema asociado a la caché del navegador (lo probé en todos los navegadores y el resultado es el mismo). Sólo me recarga correctamente la web cuando limpio la CACHÉ del historial del navegador (pudiendo excluir el resto de elementos del historial).

    Para evitar la caché añadí al HEAD un lista de códigos "<meta content=..." que son para ese propósito, como también otros de javascript, pero el problema persiste. Finalmente leí que para evitar que una web "refresheada" leyera la caché anterior —o se quedara amarrada a una "sesión" anterior de la misma web— era necesario incluir al final de la URI de llamada un valor randómico generado para que cada invocación se interprete como una nueva llamada de página. O sea, debería ser algo más o menos así:

    https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId?version=valorRandómico

    Y digo "más o menos" porque también lo intenté en una multitud de formatos diferentes; algunos de los cuáles no desplegaban nada, otros desplegaban "indefined", y en otros el problema simplemente persistía... hasta que se me acabaron las opciones.

    Como se trata de una simple invocación, me llama la atención que presente ese problema en un template que, por lo demás, es simplísimo: ya que lo construí sólo con lo básico para un funcionamiento expedito, por lo que en teoría tampoco sería un tema de interferencia entre códigos. No sé si alguien más ha tenido el mismo problema invocando esa última URI que mencionas.

    Gracias por leer.

    ResponderEliminar
  3. OJO, arriba escribí:
    https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId?version=valorRandómico

    Para dar a entender la idea:
    https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId?(callback=handleResponse&key=código-de-mi-llave)?version=valorRandómico

    Sin los paréntesis, claro. Notaréis, además, que ya se está usando un interrogativo "?" ...por eso dije que probé una multitud de formatos para la URI, que incluyeron "'?", además de ampersand en diferentes gramáticas de códice.

    Disculpad los términos, pero no soy profesional de la informática; sólo soy un piloto explorador con su nave espacial averiada en un rincón interestelar remoto...

    ¡Gracias!

    ResponderEliminar
  4. Hola Jacob, todo parte de que el fichero js que se importa desde el dominio www.googleapis.com se está cacheando, lo que genera un comportamiento errático de carga de resultados de forma intermitente (una vez sí funciona y otra no).
    Esto lo he podido verificar, abriendo el inspector de Chrome (tecla F12), yendo a la pestaña Network y marcando el checkbox Disable cache. Si lo dejas marcado, comprobarás que funciona de forma correcta en todos los casos.

    A priori, sería tan sencillo como añadir una variable al fichero javascript de forma dinámica. Por ejemplo, en el caso del lenguaje PHP:
    <script src="https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId?version=<?php echo rand();?>" type="text/javascript"></script>
    El problema aquí es que Blogger solo nos permite añadir código estático.

    ResponderEliminar
  5. ¡Hey José, muchas gracias por haberte tomado el tiempo para indagar y responder! Hasta ahora no solía ocupar todas las herramientas del inspector de Chrome, y es que aún programo muy "a la antigua" (o sea, todo a lo Block de notas), pero veo que he hecho mal y es prioritario entender y usar esas herramientas a fondo. Efectivamente, había intentado redactar variables dinámicas y no lo conseguí. Llego a pensar que es uno de esos errores que valdría la pena reportar a los desarrolladores de la API de Blogger en busca de una solución. No he probado si la intermitencia se produce únicamente con esa URI o si también afecta a otras de los formatos específicos; supongo que lo iré sabiendo a medida que incorpore mayor contenido a mi sitio. De todas formas algo nuevo aprendí hoy y te lo agradezco. =)

    ResponderEliminar
  6. Soy nuevo en esto y me gustaría saber como mejorar la carga de mi sitio, utilizo blogger pero no se por donde empezar :/

    ResponderEliminar