Familiarizarse con la API de Airtable

La aplicación web Airtable es bastante buena. Puedes usarlo como una hoja de cálculo, pero también es útil para muchas otras cosas. Lo mejor para mí es que tiene una API para que puedas tratarlo como una base de datos.

He estado pensando en tomar notas semanales para los diferentes equipos con los que trabajo en Gusto para leer sobre en qué está trabajando el equipo de sistemas de diseño, las cosas que hemos solucionado y cualquier error que hayamos encontrado y que pueda afectar a otros diseñadores y ingenieros de toda nuestra organización. Pasé un par de horas pensando en cómo podríamos usar Airtable para recopilar una gran cantidad de datos y luego usar su API para extraer esa información y mostrarla en una aplicación web.

Aquí hay un ejemplo de lo que terminaremos construyendo, que es básicamente una aplicación web React que usa Airtable como una especie de CMS ingenioso:

Para comenzar, debemos dirigirnos a la línea de comandos y ejecutar lo siguiente (pero primero asegúrese de que npm esté instalado):

npx create-react-app airtable-test

Esto creará un nuevo directorio llamado airtable-testdonde crearemos nuestra pequeña aplicación React. Si ejecutamos yarn starten la línea de comando una vez terminada la instalación, veremos la página predeterminada para el proyecto:

Y, si abrimos src/App.jsese airtable-testdirectorio, podemos ver cómo se representa esta página con React:

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';class App extends Component {  render() {    return (     div       header         img src="{logo}" alt="logo" /         pEdit src/App.js and save to reload./p         a href="https://reactjs.org" target="_blank" rel="noopener noreferrer"Learn React/a       /header     /div    );  }}export default App;

Ahora que tenemos React en funcionamiento, podemos continuar e instalar airtable en la línea de comando que nos permitirá interactuar con la API de Airtable:

npm i airtable

Una vez que hayamos hecho eso, necesitaremos crear una cuenta de Airtable y crear un proyecto. Deberíamos terminar con algo como esta hoja de cálculo:

Ahora podemos dirigirnos a airtable.com/api y seleccionar nuestro proyecto para que sirva como datos de los que estamos extrayendo. En este caso, seleccioné “Proyectos de sistemas de diseño” que puedes ver aquí abajo:

Esto nos llevará a un sitio web de documentación muy útil que nos brinda una API increíblemente fácil de leer para nuestro proyecto específico. Al desplazarnos hacia abajo, encontraremos nuestra clave API que necesitaremos para acceder a estos datos, así como una gran cantidad de ejemplos que podemos usar para manipular los datos que obtenemos:

Regresemos a App.jsnuestro airtable-testdirectorio, eliminemos todo el código de ese archivo y reemplácelo con lo siguiente:

import React, { Component } from 'react';import Airtable from 'airtable';const base = new Airtable({ apiKey: 'XXXXXXXXXXX' }).base('XXXXXXXXXXX');

Asegúrate de reemplazar esas Xs con los detalles que puedes ver en el documento de la API de Airtable que acabamos de abrir. Pero ahora que hemos realizado toda la configuración, finalmente podemos comenzar a crear nuestra interfaz llamando a los datos de nuestra hoja de cálculo.

Podemos App.jsempezar a construir el componente App:

class App extends Component {  constructor(props) {    super(props);    this.state = {      records: []    };  }  render() {    return {divHello/div}  }}

Todo lo que esto hará por ahora es configurar el estado de la aplicación y luego mostrar “Hola” en la página. A continuación, agregaremos cada registro de Airtable a ese estado.

Lo primero que es importante tener en cuenta a continuación: seleccionaremos componentDidMount()cuál Updateses solo una forma de decirle a Airtable que queremos que la hoja de cálculo se llame Updates. Asegúrese de que este nombre sea el mismo que el de la hoja de cálculo. También recorreremos todos los registros o filas de nuestra tabla en esa función:

class App extends Component {  constructor(props) {    super(props);    this.state = {      records: []    };  }  componentDidMount() {    base('Updates').select({view: 'Grid view'})    .eachPage(      (records, fetchNextPage) = {        this.setState({          records        });        console.log(records);        fetchNextPage();      }    );  }  render() {    return (     div       divHello/div     /div    )  }}

fetchNextPage()es la forma que tiene la API de Airtable de proporcionarnos el siguiente registro en nuestra hoja de cálculo y es bueno que continúe hasta que no haya más registros. Nuevamente, todavía no estamos haciendo nada con esos datos; Solo queremos asegurarnos de que todo esté funcionando correctamente en este momento.

Abra la consola en DevTools y deberíamos ver algo como esto:

Array(4) [ {…}, {…}, {…}, {…} ]

Y si analizamos cada uno de los objetos de esta matriz, ¡deberíamos encontrar todos los datos de la hoja de cálculo! Hacer esta parte siempre me parece mágico.

De todos modos, a continuación podemos actualizar nuestra render()función así:

render() {  return (   div     {this.state.records.length  0 ? ( this.state.records.map((record, index) =       div         h2{record.fields['Date']}/h2         {record.fields['UI Kit']} {record.fields['Component Library']}       /div      ) ) : (        pLoading.../p      )}    /div  )}

Recorreremos el estado que configuramos anteriormente y luego representaremos record.fields[]cada columna en nuestra hoja de cálculo. Tenemos una columna de Fecha, Kit de interfaz de usuario y Biblioteca de componentes, y una vez que hayamos actualizado App.jscon el código anterior, ¡deberíamos ver todo el contenido de nuestra hoja de cálculo!

¡Es como magia! Pero, ¿por qué estos datos parecen tan extraños? Bueno, es porque quería escribir Markdown en cada celda, así que ahora necesitaremos usar un analizador para convertir esos datos en HTML tradicional. Primero, debemos regresar a la línea de comando:

npm i showdown 

showdown nos ayudará a analizar todo el Markdown que hemos escrito en nuestra hoja de cálculo de Airtable. Después de instalarlo, solo necesitamos importarlo en la parte superior de nuestro App.jsarchivo, así:

import showdown from 'showdown';const markdownConverter = new showdown.Converter();

Después de la componentDidMount()función, podemos crear otra función que creará nuestro HTML usando showdown:

createHTML(markdown){  return(    markdownConverter.makeHtml(markdown)  )}

Es un poco dudoso, pero me hace sentir que el código está un poco más ordenado de esta manera. Ahora podemos actualizar nuestra render()función:

  render() {  return (    div className="App"      {this.state.records.length  0 ? (        this.state.records.map((record, index) =          div key={index}            h2{new Date(record.fields['Date']).toISOString().split('T', 1)}/h2            div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['UI Kit'])}} /            div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['Component Library'])}} /          /div        )      ) : (        pLoading.../p      )}    /div  );}

Estamos haciendo un par de cosas nuevas aquí: estamos usando dangerouslySetInnerHTMLin each div que, a su vez, usa nuestra createHTMLfunción para convertir los datos de cada columna (específicamente, las columnas UI Kit y Component Library). También estamos convirtiendo las fechas de cada fila en encabezados para que la lectura sea un poco más fácil.

¡Y con eso prácticamente hemos terminado! Aquí está la final App.js:

import React, { Component } from 'react';import Airtable from 'airtable';import showdown from 'showdown';const markdownConverter = new showdown.Converter();const base = new Airtable({ apiKey: 'xxxxxxx' }).base('xxxxxxx');class App extends Component {  constructor(props) {    super(props);    this.state = {      records: []    };  }  componentDidMount() {    base('Updates').select({view: 'Grid view'})    .eachPage(      (records, fetchNextPage) = {        this.setState({          records        });        fetchNextPage();      }    );  }  createHTML(markdown){    return(      markdownConverter.makeHtml(markdown)    )  }  render() {    return (      div className="App"        {this.state.records.length  0 ? (          this.state.records.map((record, index) =            div key={index}              h2{new Date(record.fields['Date']).toISOString().split('T', 1)}/h2              div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['UI Kit'])}} /              div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['Component Library'])}} /            /div          )        ) : (          pLoading.../p        )}      /div    );  }}export default App;

Todavía hay un montón de actualizaciones que podríamos hacer para mejorar las cosas. Hice una primera prueba de estilo, pero probablemente queramos hacer cosas como mejorar el formato de fecha y tal vez tener algún tipo de indicación sobre qué actualizaciones se refieren a qué filas en la hoja de cálculo. Tal vez incluso podríamos alternar entre mostrar qué información mostrar dependiendo de si eres diseñador o ingeniero.

Anyway! I think this is a good start to getting to grips with the Airtable API and I’d love to hear about how you use it in the comments below.