La oss lage en QR-kodegenerator med en serverløs funksjon!

QR-koder er morsomme, ikke sant? Vi elsker dem, så hater vi dem, så elsker vi dem igjen. Uansett, de har dukket opp igjen i det siste, og det fikk meg til å tenke på hvordan de er laget. Det er som en gazillion QR-kodegeneratorer der ute, men si at det er noe du må gjøre på din egen nettside. Denne pakken kan gjøre det. Men den veier også 180 KB for alt den trenger for å generere ting. Du vil ikke vise alt dette sammen med resten av skriptene dine.

Nå er jeg relativt ny i konseptet med skyfunksjoner, men jeg hører at det er biens knær for noe som dette. På den måten bor funksjonen et sted på en server som kan kalles når det trengs. Litt som et lite API for å kjøre funksjonen.

Noen verter tilbyr en slags skyfunksjonsfunksjon. DigitalOcean er tilfeldigvis en av dem! Og, som Droplets, er funksjoner ganske enkle å distribuere.

Opprett en funksjonsmappe lokalt

DigitalOcean har en CLI som med en kommando som stillaserer ting for oss, så cd uansett hvor du vil sette opp ting og kjøre:

doctl serverless init --language js qr-generator

Legg merke til at språket er eksplisitt deklarert. DigitalOcean-funksjoner støtter også PHP og Python.

Vi får et fint rent prosjekt kalt qr-generator med en /packages mappe som inneholder alle prosjektets funksjoner. Det er en eksempelfunksjon der inne, men vi kan overse den foreløpig og lage en qr mappe rett ved siden av:

Den mappen er der både qrcode pakken og vår qr.js funksjon kommer til å leve. Så la oss cd inn packages/sample/qr og installer pakken:

npm install --save qrcode

Nå kan vi skrive funksjonen i en ny 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)

Alt som gjør er å kreve den qrcode pakke og eksportere en funksjon som i utgangspunktet genererer en <img> taggen med a base64 PNG for kilden. Vi kan til og med teste det ut i terminalen:

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

Sjekk konfigurasjonsfilen

Det er ett ekstra skritt vi trenger her. Da prosjektet ble stillaset fikk vi dette lille project.yml fil og den konfigurerer funksjonen med litt informasjon om den. Dette er hva som er der som standard:

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

Ser du de uthevede linjene? De packages: name eiendom er hvor i packages mappe funksjonen lever, som er en mappe som heter sample i dette tilfellet. De actions/ name egenskap er navnet på selve funksjonen, som er navnet på filen. Det er hello som standard når vi spinner opp prosjektet, men vi ga vårt navn qr.js, så vi burde endre den linjen fra hello til qr før du går videre.

Implementer funksjonen

Vi kan gjøre det rett fra kommandolinjen! Først kobler vi til DigitalOcean sandkassemiljøet slik at vi har en live URL for testing:

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

Nå kan vi distribuere funksjonen:

doctl sandbox deploy qr-generator

Når den er distribuert, kan vi få tilgang til funksjonen på en URL. Hva er URL-en? Det er en kommando for det:

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

Pokker ja! Du trenger ikke lenger å sende hele pakken med resten av skriptene! Vi kan trykke på den nettadressen og generere QR-koden derfra.

Demo

We fetch API, og det er egentlig alt det er!

---

La oss lage en QR-kodegenerator med en serverløs funksjon! opprinnelig publisert på CSS-triks. Du burde få nyhetsbrevet.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/