Izdelajmo generator kod QR s funkcijo brez strežnika! Podatkovna inteligenca PlatoBlockchain. Navpično iskanje. Ai.

Izdelajmo generator kode QR s funkcijo brez strežnika!

QR kode so smešne, kajne? Ljubimo jih, nato jih sovražimo in nato spet ljubimo. Kakorkoli že, zadnje čase se spet pojavljajo in pomislil sem, kako so narejeni. Generatorjev kode QR je ogromno, a recite, da je to nekaj, kar morate narediti na svojem spletnem mestu. Ta paket lahko to stori. Tehta pa tudi zajetnih 180 KB za vse, kar potrebuje za ustvarjanje stvari. Vsega tega ne bi želeli servirati skupaj z ostalimi skripti.

Zdaj sem relativno nov v konceptu funkcij oblaka, vendar slišim, da je to pokleknilo za kaj takega. Na ta način funkcija živi nekje na strežniku, ki jo je mogoče poklicati, ko je potrebna. Nekako kot majhen API za zagon funkcije.

Nekateri gostitelji ponujajo nekakšno funkcijo v oblaku. DigitalOcean je eden izmed njih! In tako kot Droplets je tudi funkcije precej enostavno uvesti.

Lokalno ustvarite mapo funkcij

DigitalOcean ima CLI z ukazom, ki nam bo uredil stvari, torej cd kjerkoli želite stvari nastaviti in zagnati:

doctl serverless init --language js qr-generator

Upoštevajte, da je jezik izrecno deklariran. Funkcije DigitalOcean podpirajo tudi PHP in Python.

Dobimo lep čist projekt, imenovan qr-generator z /packages mapo, ki vsebuje vse funkcije projekta. Tam je vzorčna funkcija, vendar jo lahko za zdaj spregledamo in ustvarimo qr mapa tik zraven:

Izdelajmo generator kod QR s funkcijo brez strežnika! Podatkovna inteligenca PlatoBlockchain. Navpično iskanje. Ai.
Izdelajmo generator kode QR s funkcijo brez strežnika!

V tej mapi sta oba qrcode paket in naš qr.js funkcija bo zaživela. Torej, dajmo cd v packages/sample/qr in namestite paket:

npm install --save qrcode

Zdaj lahko funkcijo zapišemo v novo qr.js datoteka:

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)

Vse, kar počne, zahteva qrcode paket in izvoz funkcije, ki v bistvu ustvari an <img> oznako z base64 PNG za vir. Lahko ga celo preizkusimo v terminalu:

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

Preverite konfiguracijsko datoteko

Tukaj potrebujemo en dodaten korak. Ko je bil projekt postavljen, smo dobili to malo project.yml in konfigurira funkcijo z nekaterimi informacijami o njej. To je privzeto:

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

Vidite tiste označene vrstice? The packages: name lastnina je kje v packages mapa funkcija živi, ​​kar je mapa imenovana sample v tem primeru. The actions/ name lastnost je ime same funkcije, ki je ime datoteke. je hello privzeto, ko zavrtimo projekt, vendar smo svojega poimenovali qr.js, zato bi morali to vrstico spremeniti iz hello do qr preden gremo naprej.

Razporedite funkcijo

To lahko storimo neposredno iz ukazne vrstice! Najprej se povežemo z okoljem peskovnika DigitalOcean, tako da imamo URL v živo za testiranje:

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

Zdaj lahko uvedemo funkcijo:

doctl sandbox deploy qr-generator

Ko je uvedena, lahko do funkcije dostopamo na URL-ju. Kaj je URL? Za to obstaja ukaz:

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

Hudiča ja! Ni vam treba več pošiljati celotnega paketa z ostalimi skripti! Ta URL lahko obiščemo in od tam ustvarimo kodo QR.

Predstavitev

We fetch API in to je pravzaprav vse!

CodePen Embed Fallback

Izdelajmo generator kode QR s funkcijo brez strežnika! prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.

Časovni žig:

Več od Triki CSS