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:
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!
¡Hagamos un generador de códigos QR con una función sin servidor! publicado originalmente el Trucos CSS. Debieras obtener el boletín.
- '
- "
- 9
- a
- Nuestra Empresa
- de la máquina
- acciones
- Todos
- abejas
- Básicamente
- antes
- cuerpo
- el cambio
- Soluciones
- código
- concepto
- Contacto
- Consola
- Para crear
- desplegar
- desplegado
- Entorno
- todo
- Feature
- Nombre
- Desde
- función
- funciones
- gracioso
- generar
- generador
- va
- esta página
- Destacado
- mantiene
- Cómo
- HTTPS
- información
- instalar
- IT
- sí mismo
- JavaScript
- Clave
- idioma
- línea
- líneas
- pequeño
- para vivir
- amar
- hecho
- para lograr
- más,
- emocionante
- LANZAMIENTO
- EL DESARROLLADOR
- paquete
- bastante
- proyecto
- perfecta
- Código QR
- RE
- RESTO
- volvemos
- Ejecutar
- arenero
- Sin servidor
- set
- So
- algo
- algo
- en alguna parte
- Girar
- SOPORTE
- terminal
- test
- Pruebas
- La
- La Fuente
- cosas
- Ideas
- us
- web
- Página web
- tú