Me encontré con Airtable en un evento reciente al estilo hackathon, cuando un compañero desarrollador sugirió que lo usáramos como una forma de almacenar y usar nuestros datos. Estaba súper en eso. Por primera vez, sentí que: “Esta es una base de datos para mí. Esto es lo que quiero de un sistema de almacenamiento de datos “.
En una palabra…
Airtable te permite crear hojas de cálculo. Cada hoja de cálculo es una base de datos.
Imagínese la construcción de “Project Progress Tracker”. Querrá almacenar cosas como el nombre del proyecto, ya sea que esté completo o no, la categoría del proyecto y algunas fotos.
Esos serían cuatro columnas en la hoja de cálculo: nombre (cadena), completo (casilla de verificación / booleano), categoría (selección múltiple), fotos (archivos).
Entonces, cada fila de la hoja de cálculo es una entrada en la base de datos.
Ahora no solo puede ver estos datos en la agradable interfaz de usuario de Airtable, sino también acceder a ellos mediante programación. Obtiene excelentes API JSON para todas las acciones CRUD: crear, leer, actualizar, eliminar.
Construyamos algo: ¡una encuesta!
Somos desarrolladores front-end, así que construyamos algo funcional. Una encuesta es un ejemplo básico de algo que podemos diseñar y construir, y necesita una base de datos para ser útil. ¡Airtable puede ayudar!
¿Qué tal un formulario en el que votas por un emoji favorito?
<form action="#0" id="voting-form" class="voting-form">
<h1>Which of these emojis is your favorite?</h1>
<div>
<select name="emoji_choice" id="emoji_choice">
<option value="👯">👯</option>
<option value="🍑">🍑</option>
<option value="💥">💥</option>
<option value="🍕">🍕</option>
<option value="☠️">☠️</option>
</select>
</div>
<div>
<input type="submit" value="Vote">
</div>
</form>Envíe los votos a Airtable para su almacenamiento
Cuando el usuario envía nuestro formulario, creemos una nueva entrada en nuestra base de datos (hoja de cálculo Airtable). PUBLICEMOS los datos, directamente a través de JavaScript, a través de Ajax. Usaremos Axios aquí, ya que es una buena biblioteca Ajax libre de dependencia.
var form = document.querySelector("#voting-form");
var select = document.querySelector("#emoji_choice");
// When the form is submitted...
form.addEventListener("submit", function(event) {
event.preventDefault();
// POST the data
axios.post(airtable_write_endpoint, {
"fields": {
"Emoji Choice": select.options[select.selectedIndex].value
}
});
});Obtenga los resultados de Airtable
Ahora queremos mostrar los resultados de la encuesta como un gráfico. SVG es genial para eso. Usemos la biblioteca D3.js para ayudarnos a crear el gráfico mediante programación. Incluso podríamos hacer que construyera algunos <div>s para esto, ya que el gráfico es algunos rectángulos sencillos, pero el uso de D3 abre la puerta a la fantasía futura.
Creemos una función que podamos llamar para obtener los datos y construir el gráfico:
function getData() {
// zero out data
pollData = {
"👯": 0,
"🍑": 0,
"💥": 0,
"🍕": 0,
"☠️": 0
};
// GET the data
axios
.get(airtable_read_endpoint)
.then(function(result) {
result.data.records.forEach(function(element, index) {
pollData[element.fields["Emoji Choice"]]++;
});
}Construya el gráfico con los datos
Podemos pasarle a D3.js una matriz de datos y puede construir un gráfico:
function buildChart(data) {
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 400]);
d3
.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d) {
return x(d) + "px";
})
.text(function(d, i) {
return emojis[i] + " " + d;
});
}Con un poco de colorización CSS:
.chart {
padding: 20px;
}
.chart div {
font-size: 20px;
text-align: right;
padding: 5px;
margin: 0 0 3px 0;
color: white;
}
.chart div:nth-of-type(1) {
background-color: #FDBE1A;
}
.chart div:nth-of-type(2) {
background-color: #F2B6A0;
}
.chart div:nth-of-type(3) {
background-color: #FFD85A;
}
.chart div:nth-of-type(4) {
background-color: #830C07;
}
.chart div:nth-of-type(5) {
background-color: #999999;
}¡Obtenemos resultados!
Demo en vivo
En esta demostración en vivo, encadenamos las funciones que escribimos anteriormente para que funcionen juntas:
Vea la encuesta Pen Airtable Emoji de Chris Coyier (@chriscoyier) en CodePen.
Cosas que debe saber sobre la API
Secreto clave
¡La demostración anterior es completamente frontal! Me encanta, pero debes saber que expone la clave API para esta base de datos. No querrías eso para nada público de importancia, pero para algo interno podría estar bien.
Para mantener su clave en secreto, haría las llamadas a la API desde el backend. Este tipo de cosas se suele denominar “proxy de API” o “envoltorio de API”. Escribiría un código simple donde Ajax a eso y hace las solicitudes a la API.
Por suerte, Airtable tiene un proxy de API de ejemplo (en Ruby) disponible para que lo revises. Aquí hay otro ejemplo en PHP que puede ver.
Los documentos son impresionantes
¡Muestran los documentos de la API en relación con sus bases de datos! Entonces, los parámetros y las URL de ejemplo son los reales que usa.
Quizás podríamos haber hecho la demostración más eficiente probando el filterByFormula Parámetro API y decirle que nos devuelva todos los registros que coincidan con un cierto emoji y verificar el recuento, en lugar de contarnos a nosotros mismos.
5 solicitudes por segundo
Airtable no es realmente para almacenamiento de datos de alta potencia de megaproducción. Estoy seguro de que no es ninguna sorpresa. Airtable es para ti y tu equipo más que un almacén de datos para tu startup.
Airtable también te da formularios
En nuestra demostración creamos nuestro propio formulario. Eso es útil cuando necesitas hacer cosas totalmente personalizadas, pero no tenemos que hacerlo. Airtable le permite crear diferentes “vistas” de sus hojas de cálculo de datos, incluida una vista de “formulario”.
Puede personalizar el formulario a su gusto y enviar enlaces a las personas, o incrustar el formulario directamente en su propio sitio. ¡Sí! ¡Un creador de formularios ideal para recopilar datos estructurados!
Si lo que está creando es bastante específico para una fecha, también puede crear vistas de calendario para ver e interactuar con los datos de esa manera.
Construir lejos
¿Qué le viene a la mente cuando piensa en el potencial del almacenamiento de datos fácil y amigable y en una herramienta como Airtable?