Laten we een QR-codegenerator maken met een serverloze functie!

QR-codes zijn grappig, toch? We houden van ze, haten ze en houden dan weer van ze. Hoe dan ook, ze duiken de laatste tijd weer op en het zette me aan het denken over hoe ze gemaakt zijn. Er zijn een ontelbaar aantal QR-codegeneratoren, maar zeg dat het iets is dat u op uw eigen website moet doen. Dit pakket kan dat doen. Maar het weegt ook een flinke 180 KB voor alles wat het nodig heeft om dingen te genereren. Je zou dat allemaal niet samen met de rest van je scripts willen serveren.

Nu ben ik relatief nieuw in het concept van cloudfuncties, maar ik heb gehoord dat dat de knieën zijn voor zoiets als dit. Op die manier staat de functie ergens op een server die kan worden aangeroepen wanneer dat nodig is. Soort als een kleine API om de functie uit te voeren.

Sommige hosts bieden een soort cloudfunctie aan. DigitalOcean is daar een van! En, net als Droplets, zijn functies vrij eenvoudig te implementeren.

Lokaal een functiemap maken

DigitalOcean heeft een CLI met een commando dat dingen voor ons zal ondersteunen, dus cd waar u dingen wilt instellen en uitvoeren:

doctl serverless init --language js qr-generator

Merk op dat de taal expliciet is gedeclareerd. DigitalOcean-functies ondersteunen ook PHP en Python.

We krijgen een mooi schoon project genaamd qr-generator met een /packages map die alle functies van het project bevat. Er zit een voorbeeldfunctie in, maar we kunnen deze voorlopig over het hoofd zien en een . maken qr map ernaast:

Die map is waar zowel de qrcode pakket en onze qr.js functie gaan leven. Dus laten we cd in packages/sample/qr en installeer het pakket:

npm install --save qrcode

Nu kunnen we de functie in een nieuwe . schrijven 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)

Het enige dat doet, is de qrcode pakket en het exporteren van een functie die in feite een <img> tag met een base64 PNG voor de bron. We kunnen het zelfs testen in de terminal:

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

Controleer het configuratiebestand

Er is een extra stap die we hier nodig hebben. Toen het project in de steigers stond, kregen we dit kleine project.yml bestand en het configureert de functie met wat informatie erover. Dit staat er standaard in:

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

Zie je die gemarkeerde lijnen? De packages: name eigendom is waar in de packages map de functie leeft, wat een map is met de naam sample in dit geval. De actions/ name eigenschap is de naam van de functie zelf, wat de naam van het bestand is. Zijn hello standaard wanneer we het project opstarten, maar we hebben de onze genoemd qr.js, dus we zouden die regel moeten veranderen van hello naar qr voordat je verder gaat.

De functie implementeren:

We kunnen het rechtstreeks vanaf de opdrachtregel doen! Eerst maken we verbinding met de DigitalOcean-sandboxomgeving, zodat we een live-URL hebben om te testen:

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

Nu kunnen we de functie implementeren:

doctl sandbox deploy qr-generator

Eenmaal geïmplementeerd, hebben we toegang tot de functie via een URL. Wat is de URL? Daar is een commando voor:

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

Klopt ja! Het is niet meer nodig om dat hele pakket met de rest van de scripts te verzenden! We kunnen die URL raken en van daaruit de QR-code genereren.

Demo

We fetch de API en dat is echt alles!

---

Laten we een QR-codegenerator maken met een serverloze functie! oorspronkelijk gepubliceerd op CSS-trucs. Je zou moeten ontvang de nieuwsbrief.

• Coinsmart. Europa's beste Bitcoin- en crypto-uitwisseling.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. GRATIS TOEGANG.
• CryptoHawk. Altcoin-radar. Gratis proefversie.
• Bron: https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/