Hojas de cálculo google como base de datos

Cuando arrancamos en el Frontend uno de los desafíos es poder almacenar la información, poder cambiarla de forma dinámica y por último traerla a nuestra aplicación nuevamente.

En este artículo aprenderemos a usar las hojas de calculo google como database. Esto nos abre muchas puertas de cara al manejo de la información en un sitio web, por ejemplo podríamos utilizarlo como CMS para un e-commerce y que la persona encargada del negocio mismamente pueda cambiar datos del store como productos, stock etc. sin dificultad alguna. let's do it

Preparación del entorno de trabajo.

Es sumamente importante para realizar esta aplicación utilizar NextJs, en este caso utilizaremos utilidades especiales como la carpeta API, esta es una característica muy interesante porque significa que Next.js se puede usar para crear una interfaz para los datos que Next.js almacena y recupera, transfiriendo JSON a través de solicitudes de recuperación. Además para el data fetching usaremos también utilidades propias de Next

Para crear una aplicación en next podemos usar

npx create-next-app@latest

O simplemente vamos a la página de vercel, creamos el proyecto nuevo y luego lo clonamos desde el repositorio que nos crea en GitHub.

Realizamos npm install y npm install googleapis y ya estamos listos para empezar.

Preparación del entorno google

El primer paso es ingresar a google drive y crear una nueva hoja de cálculo.

Luego ingresamos a google cloud (https://cloud.google.com/) para registrar nuestra aplicación. Una vez tenemos la cuenta creada vamos a ir a consola y posteriormente crearemos un nuevo proyecto.

Seleccionamos un nombre y creamos. Es importante que nos aseguremos luego de crearlo estar adentro del proyecto.

Una vez dentro del proyecto instalamos la google sheets API

Buscamos google sheets API entramos, la habilitamos y creamos las credenciales.

Seleccionamos > cuenta de servicio > nombramos la cuenta > crear y continuar > Seleccionamos propietario > continuar > Listo

Ingresamos a la cuenta que nos creo y creamos una nueva clave JSON.

El archivo que nos genera lo pasamos al editor de código solo para ver mejor las credenciales creadas y creamos un nuevo archivo llamado .env.local

Ahora vamos a completar las siguientes credenciales en el env.local con los datos que nos acabamos de bajar. Tal que así:

typescript
1GOOGLE_SHEETS_PRIVATE_KEY= "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDPjyGgBS1/iUHV\nv82FnbvoaTgeC8hAhlY+wel/yfKvwquF+GwEVI=\n-----END PRIVATE KEY-----\n"
2GOOGLE_SHEETS_CLIENT_EMAIL=franciscoveiras123@sonicname-332313.iam.gserviceaccount.com
3SPREADSHEET_ID=1e9OXd22t6LOK_BC1lwhMa0aKRIL1GeRxWNmbS7ek-_E

Esto es para posteriormente autenticarnos antes de solicitar la información.

El spreadsheet_id es el siguiente:

Le compartimos la planilla a la cuenta de servicio que creamos en google cloud

Dentro de la carpeta API de next vamos a crear un archivo llamado sheets.js

Primero importamos google api

import { google } from 'googleapis';

Posteriormente vamos a crear una función con un try catch:

javascript
1export async function getList() {
2	try {}
3	catch(err){console.log(err)}
4}

Dentro del try vamos a crear una constante con las credenciales de autenticación:

const target = ['https://www.googleapis.com/auth/spreadsheets.readonly'];

javascript
1    const jwt = new google.auth.JWT(
2      process.env.GOOGLE_SHEETS_CLIENT_EMAIL,
3      null,
4      (process.env.GOOGLE_SHEETS_PRIVATE_KEY || '').replace(/\\n/g, '\n'),
5      target
6    );

El replace se encarga de quitar agregados de seguridad que tiene la private key, sino deberías hacerlo a mano.

Luego llamamos a la google sheets y le pasamos las credenciales

javascript
1const sheets = google.sheets({ version: 'v4', auth: jwt });
2    const response = await sheets.spreadsheets.values.get({
3      spreadsheetId: process.env.SPREADSHEET_ID,
4      range: ‘nombrederango',
5    });

Creamos nombre de rango:

Click derecho en las filas y columnas seleccionadas > ver más acciones de celda > definir intervalo con nombre (nombrederango)

Y por último llamamos a la información

javascript
1const rows = response.data.values;
2
3    if (rows.length) {
4      return rows.map((row) => ({
5        id: row[0],
6        name: row[1],
7        age: row[2],
8        country: row[3],
9      }));
10    }

Fetch de la información.

Nos dirigimos a nuestro archivo dentro de la carpeta Pages (no de tipo componente) y hacemos un llamado a la información de la función que acabamos de crear:

javascript
1export async function getStaticProps(context) {
2  const data = await getList();
3  const allData = await JSON.stringify(data);
4  const info = JSON.parse(allData);
5
6  return {
7    props: {
8      infoData: info.slice(1, info.length),
9    },
10    revalidate: 10, // segundos
11  };
12}

getStaticProps realiza un Fetch data at build time entonces es importante que asignemos un revalidate, para que la información se actualice.

El slice sirve para evitar traer la primera fila de la hoja de cálculo que creamos (id, name, age, country) ya que esto solo es una guía para quien la utiliza

Importamos el objeto y lo mostramos en consola para asegurar de que todo es correcto.

javascript
1export default function Home({ infoData }) {
2  const [data, setData] = useState([]);
3
4  useEffect(() => {
5    setData(infoData);
6  }, []);
7
8  console.log(data);

Espero te haya servido el artículo, si necesitas más info o te interesa realizarme una pregunta te invito a seguirme en twiter: @fveiras_

Repositorio: https://github.com/fran-veiras/google-sheets-DB-