Uso de formularios y funciones de Netlify para crear un widget de registro de correo electrónico | Programar Plus

Construir y mantener su propio sitio web es una gran idea. No solo eres dueño de tu plataforma, sino que puedes experimentar con tecnologías web en el camino. Recientemente, profundicé en un concepto llamado funciones sin servidor, comenzando con mi propio sitio web. Me gustaría compartir los resultados y lo que aprendí en el camino, ¡para que tú también puedas ensuciarte las manos!

Pero primero, una introducción de 1 minuto a las funciones sin servidor

Una función sin servidor (a veces denominada función lambda o función en la nube) es un fragmento de código que puede escribir, alojar y ejecutar independientemente de su sitio web, aplicación o cualquier otro código. A pesar del nombre, las funciones sin servidor, de hecho, se ejecutan en un servidor; pero es un servidor que no tiene que construir ni mantener. Las funciones sin servidor son interesantes porque eliminan gran parte del trabajo preliminar de crear aplicaciones potentes y escalables.

Hay mucha información excelente sobre las funciones sin servidor, y un excelente lugar para comenzar es la propia guía de CSS Trick: El poder de los desarrolladores front-end sin servidor.

El desafío: crear un formulario de registro de lista de correo

Comencé mi viaje con un desafío: quería tener un formulario de registro de lista de correo electrónico en mi sitio. Las reglas son las siguientes:

  • Debería funcionar sin JavaScript. Me gustaría ver cuánto puedo hacer solo con CSS y HTML. Las mejoras progresivas están bien.
  • No debería requerir dependencias externas. Este es un proyecto de aprendizaje, así que quiero escribir el 100% del código si es posible.
  • Debe utilizar funciones sin servidor. En lugar de enviar datos a mi servicio de lista de correo electrónico del lado del cliente, ¡hagámoslo del lado del servidor (menos)!

Conoce al equipo: 11ty, Netlify y Buttondown

Mi sitio web está construido utilizando un marco de sitio estático llamado 11ty. 11ty me permite escribir plantillas y componentes en HTML, así es como construiremos nuestro formulario de correo electrónico. (Chris escribió recientemente un excelente artículo sobre su experiencia con 11ty si está interesado en obtener más información).

Luego, el sitio web se implementa utilizando un servicio llamado Netlify) y es el jugador clave de nuestro equipo aquí: el base, el mariscal de campo, el capitán. Eso es porque Netlify tiene tres características que funcionan juntas para producir excelencia sin servidor:

  • Netlify puede implementarse automáticamente desde un repositorio de GitHub. Esto significa que puedo escribir mi código, crear una solicitud de extracción e instantáneamente ver si mi código funciona. Si bien existen herramientas para probar localmente las funciones sin servidor, Netlify hace que sea muy fácil probar en vivo.
  • Netlify Forms maneja cualquier envío de formulario que recibe mi sitio. Esta es una parte de la ecuación sin servidor: en lugar de escribir código para recopilar envíos, configuraré el HTML con algunos atributos simples y dejaré que Netlify se encargue del resto.
  • Netlify Functions me permite tomar acción con los datos de mis formularios. Escribiré un código para enviar correos electrónicos a mi proveedor de lista de correo electrónico y le diré a Netlify cuándo ejecutar ese código.

Finalmente, administraré mi lista de correo electrónico con un servicio llamado Buttondown. Es un proveedor de boletines por correo electrónico sencillo, con una API fácil de usar.

Prima: para sitios personales como el mío, 11ty, Netlify y Buttondown son gratuitos. No puedes superar eso.

La forma

El HTML para mi formulario de suscripción de correo electrónico es mínimo, con algunos extras para que funcionen los formularios de Netlify.

<form class="email-form" name="newsletter" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <div hidden aria-hidden="true">
    <label>
      Don’t fill this out if you're human: 
      <input name="bot-field" />
    </label>
  </div>
  <label for="email">Your email address</label>
  <div>
    <input type="email" name="email" placeholder="Email"  id="email" required />
    <button type="submit">Subscribe</button>
  </div>
</form>

Primero, configuro el data-netlify atribuir a true para decirle a Netlify que maneje este formulario.

La primera entrada en el formulario se llama bot-field. Esto engaña a los robots para que se revelen: le digo a Netlify que esté atento a cualquier envío sospechoso configurando el netlify-honeypot atribuir a bot-field. Luego escondo el campo de los humanos usando el html hidden y aria-hidden valores: los usuarios con y sin tecnología de asistencia no podrán completar la entrada falsa.

Si el formulario se envía con algo en el bot-field entrada, Netlify sabe que proviene de un robot e ignora la entrada. Además de esta capa de protección, Netlify filtra automáticamente los envíos sospechosos con Askimet. ¡No tengo que preocuparme por el spam!

La siguiente entrada en el formulario se llama email. ¡Aquí es donde va la dirección de correo electrónico! He especificado el tipo de entrada como email, e indicó que es required; esto significa que el navegador hará toda la validación por mí y no permitirá que los usuarios envíen nada más que una dirección de correo electrónico válida.

Mejora progresiva con JavaScript

Una característica interesante de Netlify Forms es la capacidad de redirigir automáticamente a los usuarios a una página de “gracias” cuando envían un formulario. Pero idealmente, me gustaría mantener a mis usuarios en la página. Escribí una función corta para enviar el formulario sin una redirección.

const processForm = form => {
  const data = new FormData(form)
  data.append('form-name', 'newsletter');
  fetch("https://css-tricks.com/", {
    method: 'POST',
    body: data,
  })
  .then(() => {
    form.innerHTML = `<div class="form--success">Almost there! Check your inbox for a confirmation e-mail.</div>`;
  })
  .catch(error => {
    form.innerHTML = `<div class="form--error">Error: ${error}</div>`;
  })
}

Cuando proporciono el contenido de mi formulario de correo electrónico a esta función a través del form valor, envía el formulario utilizando la API Fetch integrada de JavaScript. Si la función fue exitosa, muestra un mensaje agradable al usuario. Si la función tiene un inconveniente, les dirá a mis usuarios que algo salió mal.

Esta función se llama cada vez que un usuario hace clic en el botón “enviar” en el formulario:

const emailForm = document.querySelector('.email-form')
if (emailForm) {
  emailForm.addEventListener('submit', e => {
    e.preventDefault();
    processForm(emailForm);
  })
}

Este oyente mejora progresivamente el comportamiento predeterminado del formulario. Esto significa que si el usuario tiene JavaScript deshabilitado, ¡el formulario aún funciona!

La función sin servidor

Ahora que tenemos un formulario de envío de correo electrónico en funcionamiento, es hora de automatizar un poco con una función sin servidor.

La forma en que funcionan las funciones de Netlify es la siguiente:

  1. Escriba la función en un archivo JavaScript en su proyecto.
  2. Dígale a Netlify dónde buscar su función a través del archivo netlify.toml en su proyecto.
  3. Agregue cualquier variable de entorno que necesite a través de la interfaz de administración de Netlify. Una variable de entorno es algo así como una clave API que debe mantener en secreto.

¡Eso es! La próxima vez que implemente su sitio, la función estará lista para funcionar.

La función para mi sitio estará en la carpeta de funciones, así que tengo lo siguiente en mi netlify.toml Archivo:

[build]
  base = "."
  functions = "./functions"

Luego, agregaré un archivo en la carpeta de funciones llamado submit-created.js. Es importante nombrar el archivo. creado por envío para que Netlify sepa ejecutarlo cada vez que se produce un nuevo envío de formulario. En la documentación de Netlify se puede encontrar una lista completa de eventos contra los que puede crear scripts. Si nombró y configuró correctamente su función, debería verla en el panel de Funciones de Netlify:

El panel de funciones de Netlify muestra que configuré correctamente mi función creada por el envío

El contenido en submit-created.js se ve así:

require('dotenv').config()
const fetch = require('node-fetch')
const { EMAIL_TOKEN } = process.env
exports.handler = async event => {
  const email = JSON.parse(event.body).payload.email
  console.log(`Recieved a submission: ${email}`)
  return fetch('https://api.buttondown.email/v1/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${EMAIL_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email }),
  })
    .then(response => response.json())
    .then(data => {
      console.log(`Submitted to Buttondown:n ${data}`)
    })
    .catch(error => ({ statusCode: 422, body: String(error) }))
}

Veamos esto línea por línea.

La línea 1 incluye una biblioteca llamada dotenv. Esto me ayudará a usar Variables de entorno. Las variables de entorno son útiles para contener información que no quiero hacer pública, como una clave API. Si estoy ejecutando mi proyecto localmente, configuro mis variables de entorno con un .env archivo en el repositorio, y asegúrese de que esté incluido en mi .gitignore Archivo. Para implementar en Netlify, también configuré variables de entorno en la interfaz web de Netlify.

En la línea 2, agrego una pequeña biblioteca llamada node-fetch. Esto me permite usar la API Fetch de Javascript en el nodo, que es cómo enviaremos datos a Buttondown. Netlify incluye automáticamente esta dependencia, siempre que aparezca en la lista de mi proyecto. package.json Archivo.

En la línea 3, importo mi clave API del objeto de variables de entorno, process.env.

La línea 4 es donde se define la función. El exports.handler El valor es donde Netlify espera encontrar nuestra función, por lo que la definimos allí. La única entrada que necesitaremos es el event value, que contendrá todos los datos del envío del formulario.

Después de recuperar la dirección de correo electrónico del event valor usando JSON.parse, estoy listo para enviarlo a Buttondown. Aquí es donde uso el node-fetch biblioteca que importé anteriormente: envío una solicitud POST a https://api.buttondown.email/v1/subscribers, incluida mi clave API en el encabezado. La API de Buttondown no tiene muchas funciones, por lo que no le llevará mucho tiempo leer la documentación si desea obtener más información.

El cuerpo de mi solicitud POST consta de la dirección de correo electrónico que recuperamos.

Entonces (usando el limpio .then() sintaxis), recopilo la respuesta del servidor de Buttondown. Hago esto para poder diagnosticar cualquier problema que esté ocurriendo con el proceso: Netlify facilita la verificación de los registros de su función, así que use console.log ¡a menudo!

Desplegando la función

Ahora que escribí mi función, configuré mi archivo netlify.toml y agregué mis variables de entorno, todo está listo para funcionar. La implementación es sencilla: simplemente configure la integración de GitHub de Netlify y su función se implementará cuando se envíe su proyecto.

Los proyectos de Netlify también se pueden probar localmente usando Netlify Dev. Dependiendo de la complejidad de su código, puede ser más rápido desarrollarlo localmente: simplemente ejecute npm i netlify -g, entonces netlify dev. Netlify Dev usará el archivo netlify.toml para configurar y ejecutar el proyecto localmente, incluidas las funciones sin servidor. Limpio, ¿verdad? Una advertencia: Netlify Dev actualmente no puede activar funciones sin servidor en los envíos de formularios, por lo que tendrá que probarlo usando compilaciones de vista previa.

Una idea para el futuro

La API de Buttondown tiene algunas respuestas posibles cuando envío un nuevo correo electrónico. Por ejemplo, si un usuario envía un correo electrónico que ya está suscrito a la lista, me encantaría poder avisarle tan pronto como envíe el formulario.

Conclusión

En total, solo tuve que escribir alrededor de 50 líneas de código para tener un formulario funcional de suscripción al boletín de correo electrónico disponible en mi sitio web. Lo escribí todo en HTML, CSS y JavaScript, sin tener que preocuparme por el lado del servidor de la ecuación. El formulario maneja el spam, y mis lectores obtienen una buena experiencia ya sea que tengan JavaScript habilitado o no.

(Visited 3 times, 1 visits today)