Creiamo un generatore di codici QR con una funzione serverless! Intelligenza dei dati PlatoBlockchain. Ricerca verticale. Ai.

Realizziamo un generatore di codici QR con una funzione serverless!

I codici QR sono divertenti, giusto? Li amiamo, poi li odiamo, poi li amiamo di nuovo. Ad ogni modo, ultimamente sono spuntati di nuovo e mi ha fatto pensare a come sono fatti. Ci sono milioni di generatori di codici QR là fuori, ma dì che è qualcosa che devi fare sul tuo sito web. Questo pacchetto può farlo. Ma pesa anche ben 180 KB per tutto ciò di cui ha bisogno per generare cose. Non vorrai servire tutto questo insieme al resto dei tuoi script.

Ora, sono relativamente nuovo al concetto di funzioni cloud, ma ho sentito che sono le ginocchia dell'ape per qualcosa proprio come questo. In questo modo, la funzione risiede da qualche parte su un server che può essere chiamato quando è necessario. Ordina come una piccola API per eseguire la funzione.

Alcuni host offrono una sorta di funzionalità della funzione cloud. DigitalOcean sembra essere uno di questi! E, come Droplets, le funzioni sono abbastanza facili da implementare.

Crea una cartella delle funzioni in locale

DigitalOcean ha una CLI che con un comando impalca le cose per noi, quindi cd ovunque tu voglia impostare ed eseguire le cose:

doctl serverless init --language js qr-generator

Si noti che la lingua è dichiarata esplicitamente. Le funzioni di DigitalOcean supportano anche PHP e Python.

Otteniamo un bel progetto pulito chiamato qr-generator con una /packages cartella che contiene tutte le funzioni del progetto. C'è una funzione di esempio lì dentro, ma per ora possiamo trascurarla e creare un qr cartella proprio accanto ad essa:

Creiamo un generatore di codici QR con una funzione serverless! Intelligenza dei dati PlatoBlockchain. Ricerca verticale. Ai.
Realizziamo un generatore di codici QR con una funzione serverless!

Quella cartella è dove entrambi i qrcode pacchetto e il ns qr.js funzione vivranno. Allora, andiamo cd ai miglioramenti packages/sample/qr e installa il pacchetto:

npm install --save qrcode

Ora possiamo scrivere la funzione in un nuovo qr.js file:

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)

Tutto ciò che sta facendo è richiedere il qrcode pacchetto ed esportando una funzione che fondamentalmente genera un file <img> tag con un PNG base64 per l'origine. Possiamo anche testarlo nel terminale:

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

Controlla il file di configurazione

C'è un passaggio in più di cui abbiamo bisogno qui. Quando il progetto è stato impalcato, abbiamo ottenuto questo piccolo project.yml file e configura la funzione con alcune informazioni a riguardo. Questo è ciò che è lì per impostazione predefinita:

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

Vedi quelle linee evidenziate? Il packages: name la proprietà è dove nel packages cartella in cui vive la funzione, che è una cartella chiamata sample in questo caso. Il actions/ name proprietà è il nome della funzione stessa, che è il nome del file. È hello per impostazione predefinita quando avviamo il progetto, ma abbiamo chiamato il nostro qr.js, quindi dovremmo cambiare quella linea da hello a qr prima di andare avanti.

Distribuisci la funzione

Possiamo farlo direttamente dalla riga di comando! Innanzitutto, ci colleghiamo all'ambiente sandbox DigitalOcean in modo da avere un URL attivo per il test:

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

Ora possiamo distribuire la funzione:

doctl sandbox deploy qr-generator

Una volta distribuito, possiamo accedere alla funzione tramite un URL. Qual è l'URL? C'è un comando per questo:

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

Cavolo sì! Non è più necessario spedire l'intero pacchetto con il resto degli script! Possiamo colpire quell'URL e generare il codice QR da lì.

Dimo

We fetch l'API e questo è davvero tutto quello che c'è da fare!

CodePen incorpora il fallback

Realizziamo un generatore di codici QR con una funzione serverless! originariamente pubblicato il CSS-Tricks. Dovresti ricevi la newsletter.

Timestamp:

Di più da Trucchi CSS