¡Hagamos un generador de códigos QR con una función sin servidor! Inteligencia de datos PlatoBlockchain. Búsqueda vertical. Ai.

¡Hagamos un generador de códigos QR con una función sin servidor!

Los códigos QR son divertidos, ¿verdad? Los amamos, luego los odiamos, luego los amamos de nuevo. De todos modos, últimamente han vuelto a aparecer y me hizo pensar en cómo se hacen. Hay miles de generadores de códigos QR, pero digamos que es algo que debe hacer en su propio sitio web. Este paquete puedo hacer eso. Pero también pesa 180 KB para todo lo que necesita para generar cosas. No querría servir todo eso junto con el resto de sus scripts.

Ahora, soy relativamente nuevo en el concepto de las funciones de la nube, pero escuché que eso no es bueno para algo como esto. De esa manera, la función vive en algún lugar de un servidor al que se puede llamar cuando se necesita. Algo así como una pequeña API para ejecutar la función.

Algunos hosts ofrecen algún tipo de función de nube. ¡DigitalOcean resulta ser uno de ellos! Y, como Droplets, las funciones son bastante fáciles de implementar.

Crear una carpeta de funciones localmente

DigitalOcean tiene una CLI que con un comando que creará un andamiaje para nosotros, por lo que cd donde quieras configurar las cosas y ejecutarlas:

doctl serverless init --language js qr-generator

Observe que el idioma se declara explícitamente. Las funciones de DigitalOcean también son compatibles con PHP y Python.

Obtenemos un bonito proyecto limpio llamado qr-generator con un /packages carpeta que contiene todas las funciones del proyecto. Hay una función de muestra ahí, pero podemos pasarla por alto por ahora y crear una qr carpeta justo al lado:

¡Hagamos un generador de códigos QR con una función sin servidor! Inteligencia de datos PlatoBlockchain. Búsqueda vertical. Ai.
¡Hagamos un generador de códigos QR con una función sin servidor!

Esa carpeta es donde tanto el qrcode paquete y nuestro qr.js función van a vivir. Entonces vamos cd dentro packages/sample/qr e instalar el paquete:

npm install --save qrcode

Ahora podemos escribir la función en un nuevo qr.js archivo:

const qrcode = require('qrcode') exports.main = (args) => { return qrcode.toDataURL(args.text).then(res => ({ headers: { 'content-type': 'text/html; charset=UTF-8' }, body: args.img == undefined ? res : `<img src="${res}">` }))
} if (process.env.TEST) exports.main({text:"hello"}).then(console.log)

Todo lo que está haciendo es requerir el qrcode paquete y exportar una función que básicamente genera un <img> etiqueta con un PNG base64 para la fuente. Incluso podemos probarlo en la terminal:

doctl serverless functions invoke sample/qr -p "text:css-tricks.com"

Compruebe el archivo de configuración

Hay un paso adicional que necesitamos aquí. Cuando el proyecto fue andamiado, obtuvimos este pequeño project.yml y configura la función con alguna información al respecto. Esto es lo que hay por defecto:

targetNamespace: ''
parameters: {}
packages: - name: sample environment: {} parameters: {} annotations: {} actions: - name: hello binary: false main: '' runtime: 'nodejs:default' web: true parameters: {} environment: {} annotations: {} limits: {}

¿Ves esas líneas resaltadas? los packages: name propiedad es donde en el packages carpeta donde vive la función, que es una carpeta llamada sample en este caso. los actions/ name propiedad es el nombre de la función en sí, que es el nombre del archivo. Es hello por defecto cuando activamos el proyecto, pero nombramos el nuestro qr.js, así que deberíamos cambiar esa línea de hello a qr antes de seguir adelante.

Implementar la función

¡Podemos hacerlo directamente desde la línea de comandos! Primero, nos conectamos al entorno sandbox de DigitalOcean para tener una URL en vivo para probar:

## You will need an DO API key handy
doctl sandbox connect

Ahora podemos implementar la función:

doctl sandbox deploy qr-generator

Una vez implementada, podemos acceder a la función en una URL. ¿Cuál es la URL? Hay un comando para eso:

doctl sbx fn get sample/qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr

¡Diablos, sí! ¡Ya no es necesario enviar el paquete completo con el resto de los scripts! Podemos acceder a esa URL y generar el código QR desde allí.

De demostración

We fetch la API y eso es realmente todo lo que hay que hacer!

CodePen Incrustar respaldo

¡Hagamos un generador de códigos QR con una función sin servidor! publicado originalmente el Trucos CSS. Debieras obtener el boletín.

Sello de tiempo:

Mas de Trucos CSS