En una publicación de hace bastante tiempo mostré cómo usar el API de Firebase, servicio de Google. En esta ocasión veremos algo mucho más sencillo: cómo hacer que una hoja de cálculos de Google Drive sirva de datos para ser consumida por otra aplicación.
En primer lugar, vamos a crear una hoja de cálculos, el servicio de Google que funciona de una manera similar a Excel.
Accedemos a Google Drive, una vez dentro creamos una hoja de cálculos. Para eso vamos al botón de la izquierda que dice «Nuevo» y luego a «Hojas de cálculo de Google» y por último en «Hoja de cálculo en blanco».
Vamos a crear una Hoja de cálculo simple con tres columnas.
Una vez hecho esto, nos dirigimos a «Archivos» y luego a «Publicar en la web»
Y pulsamos en el botón «Publicar»
A partir de ese momento, nuestra hoja de cálculos puede ser consultada como un API. Sin embargo, primero debemos obtener el ID de la misma, la cual se puede ver en la URL:
Como podemos ver en la imagen, el ID se encuentra dentro de la URL, entre «d/» y «/edit»
Una vez que copiamos el ID, vamos a incluirlo dentro de la siguiente URL:
https://spreadsheets.google.com/feeds/list/ACA-VA-TU-ID/od6/public/values?alt=json
Para finalizar veremos algunos ejemplos de cómo consumir esta API desde una web.
Ejemplo con Vue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Lista de canciones </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h1> Lista de canciones </h1>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"> Juego </th>
<th scope="col"> Género </th>
<th scope="col"> Valoración </th>
</tr>
</thead>
<tbody>
<tr v-for="i in lista">
<td> {{ i.gsx$juego.$t }} </td>
<td> {{ i.gsx$genero.$t }} </td>
<td> {{ i.gsx$valoracion.$t }} </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
new Vue({
el: '#app',
data: function(){
return {
lista: []
}
},
created: function(){
this.getData();
},
methods: {
getData: function(){
let that = this;
axios.get('https://spreadsheets.google.com/feeds/list/1oPY11-w0o6ac_kXlqyhbJ8onYxIlZ-zA0NqBziTl3KQ/od6/public/values?alt=json')
.then(function(response){
that.lista = response.data.feed.entry
})
.catch(function(){
alert('Error')
})
}
}
});
</script>
</body>
</html>Ejemplo con jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Lista de canciones </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h1> Lista de canciones </h1>
<table id="tabla" class="table">
<thead class="thead-dark">
<tr>
<th scope="col"> Juego </th>
<th scope="col"> Género </th>
<th scope="col"> Valoración </th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery.ajax({
url: "https://spreadsheets.google.com/feeds/list/1oPY11-w0o6ac_kXlqyhbJ8onYxIlZ-zA0NqBziTl3KQ/od6/public/values?alt=json"
}).done(function(response) {
for(let i = 0; i < response.feed.entry.length; i++){
let juego = response.feed.entry[i].gsx$juego.$t;
let genero = response.feed.entry[i].gsx$genero.$t;
let valoracion = response.feed.entry[i].gsx$valoracion.$t;
let tr = '<tr>';
tr += '<td>' + juego + '</td>';
tr += '<td>' + genero + ' </td>';
tr += '<td>' + valoracion + '</td>';
tr += '</tr>';
$("#tabla tbody").append(tr);
}
});
</script>
</body>
</html>