Leer archivo Google Sheets desde JS (Vuejs)
Google nos proporciona un servicio llamado Google Sheets que es básicamente un Excel en la nube con la diferencia que es online, colaborativa y accesible desde cualquier navegador.
Lo que haremos sera acceder al contenido de una de estas hojas de calculo y desplegar su información en una vista con javascript, esto es muy interesante ya que podemos ocupar esta herramienta como una especie de base de datos en la cual podemos ir colocando información importante o lo que queramos.
Para este ejemplo crearemos una lista de personas con un teléfono y una dirección tipo libreta de direcciones y la mostraremos en una vista html.
- Crearemos una hoja de calculo en blanco
https://docs.google.com/spreadsheets/u/0/2. Vamos a crear una lista con nombres, direcciones y teléfonos, pero ustedes pueden agregar los campos que quieran con más registros si desean.
3. Lo siguiente que necesitamos es compartir el archivo en modo lectura
Creando un Api Key
Para poder acceder a nuestra hoja de calculo desde JavaScript necesitaremos crear un API KEY que sera nuestra clave que nos proporcionara google para darnos acceso a este u otros archivos y ademas habilitar la api en la consola de Google.
1. Lo primero es crear un proyecto : https://console.developers.google.com/projectcreate
2. Desde nuestro proyecto vamos a habilitar la API de Google Sheets:
3. Ingresaremos en el buscador la palabra “Sheets” y seleccionaremos la opción que nos salga y luego la habilitaremos.
4. Una vez habilitada vamos a crear la credencial
5. Por ultimo copiamos la clave por que la utilizaremos mas adelante y cerramos.
Consumir data de Google Sheets.
En esta etapa construiremos un front con una librería llamada Vuejs que es bastante conocida y muy fácil de aprender.
Dejare el código abajo pero lo importante es la url que utilizaremos para traernos estos datos, y podemos utilizarla en cualquier lenguaje o framework que queramos, en este caso sera javascript.
// id de la hoja de calculo
idSheets = '1sbZtJvR5q_1rdDF34sWNaylH-1j_41gSCgEYYZRRIU8';//// nuestra APIKey
apiKey = 'AIzaSyDL9yj6t6e5P0d-YVmbx9ms4VmoOE_l2E4';// rango de la hoja de calculo que queremos leer
values = 'A2:AZ100';// url
https://content-sheets.googleapis.com/v4/spreadsheets/" + idSheets + "/values/A2:AZ100?access_token="+ apiKey +"&key="+ apiKey
- Código HTML con estilos css materialize.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><title>Leer archivos Google Sheets</title></head><body><div id="app"><h3>Leer archivo google Sheets</h3><a class="waves-effect waves-light btn" v-on:click="recargar">Recargar</a><table><thead><tr><th>Nombre</th><th>Direccion</th><th>Telefono</th><th>compra</th><th>pagado</th><th>restante</th></tr></thead><tbody><tr v-for="lista in listaDatos"><td>{{lista[0]}}</td><td>{{lista[1]}}</td><td>{{lista[2]}}</td><td>{{lista[3]}}</td><td>{{lista[4]}}</td><td>{{lista[5]}}</td></tr></tbody></table></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><script src="leer.js"></script></body></html>
2. Creamos un archivo llamado leer.js
const vue = new Vue({ el:'#app', data:{ listaDatos : [] }, created(){ this.getLista() }, methods:{ recargar(){ console.log("recargando"); this.getLista() },getLista(){
// id de la hoja de calculo
idSheets = '1sbZtJvR5q_1rdDF34sWNaylH-1j_41gSCgEYYZRRIU8'; //// nuestra APIKey
apiKey = 'AIzaSyDL9yj6t6e5P0d-YVmbx9ms4VmoOE_l2E4'; // rango de la hoja de calculo que queremos leer
values = 'A2:AZ100';// fetch es un método nativo para hacer peticiones http
// en el navegador fetch("https://content-sheets.googleapis.com/v4/spreadsheets/" + idSheets + "/values/A2:AZ100?access_token="+ apiKey +"&key="+ apiKey).then((lista)=>{ return lista.json()}).then((valores)=>{ this.listaDatos = valores.values}).catch(err=>{ console.log(err);})} // fin funcion getLista()} // fin methods}) // fin instancia
pueden copiar y pegar este código con sus datos y funcionara sin problemas.
En resumen pueden ocupar todas las capacidades de esta hoja de calculo para hacer lo que quieran , incluso pueden utilizar formulas y los resultados serán leídos, pueden crear una pequeña base de datos con listados y cálculos y editarlos en linea y verlos reflejados en su web.
Yo modifique el archivo para generar un calculo de una resta como en la imagen siguiente.
y me quedo así el front.
Es muy simple leer esta hoja de calculo y se pueden hacer muchas cosas entretenidas, si bien esta es una forma de hacerlo, hay más y se debe acceder de otra manera, pero para empezar esta muy bien.
