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

Los códigos QR son divertidos, ¿no? Los amamos, luego los odiamos, luego los volvemos a amar. De todos modos, han estado reapareciendo últimamente, y me hizo preguntarme cómo se hicieron. Hay como un millón de generadores de códigos QR, pero digamos que esto es algo que debe hacer en su propio sitio web. Este paquete puedo hacer eso. Pero también pesa 180 KB para todo lo necesario para generar cosas. No querría servir todo esto junto con sus otros scripts.

Ahora soy relativamente nuevo en el concepto de características de la nube, pero escuché que las abejas están de rodillas por algo como esto. De esta manera, la función vive en algún lugar de un servidor al que se puede llamar cuando sea necesario. Ordene 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, al igual que Droplets, las características son bastante fáciles de implementar.

Crear una carpeta local con funciones

DigitalOcean tiene una CLI que con un comando que esbozará las cosas para nosotros, por lo que cd donde desea configurar y ejecutar las cosas:

doctl serverless init --language js qr-generator

Tenga en cuenta que el idioma se declara explícitamente. Las características de DigitalOcean también son compatibles con PHP y Python.

Obtenemos un bonito proyecto limpio llamado qr-generator s /packages una carpeta que contiene todas las características del proyecto. Hay una función de ejemplo allí, pero por ahora podemos ignorarla y crearla. qr carpeta justo al lado:

Esta carpeta es donde ambos qrcode paquete y nuestro qr.js la función cobrará vida. Entonces vamos cd en packages/sample/qr e instalar el paquete:

npm install --save qrcode

Ahora podemos escribir la función en una nueva qr.js expediente:

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="https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/${res}">`
  }))
}

if (process.env.TEST) exports.main({text:"hello"}).then(console.log)

Todo lo que haces requiere qrcode empaquetar y exportar una función que básicamente genera un archivo <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 se puso en un andamio, obtuvimos ese 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 estas líneas subrayadas? packages: name la propiedad es donde en packages carpeta, la función en vivo, que se llama carpeta sample en este caso actions/ name propiedad es el nombre de la función en sí, que es el nombre del archivo hello por defecto cuando rotamos el proyecto, pero hemos nombrado el nuestro qr.jspor lo que tenemos que cambiar esta línea de hello a qr antes de continuar.

Implementar la función

¡Podemos hacerlo directamente desde la línea de comandos! Primero, nos conectamos al entorno Sandbox DigitalOcean, por lo que tenemos una URL de prueba en vivo:

## 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 desde una URL. ¿Cuál es la URL? Hay un comando para esto:

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

¡Oh sí! ¡Ya no es necesario enviar el paquete completo con los otros scripts! Podemos hacer clic en esta URL y generar un código QR desde allí.

Demostración

nosotros fetch ¡API y eso es realmente todo!