Teeme serverita funktsiooniga QR-koodi generaatori! PlatoBlockchaini andmete luure. Vertikaalne otsing. Ai.

Teeme serverita funktsiooniga QR-koodi generaatori!

QR-koodid on naljakad, eks? Me armastame neid, siis vihkame neid ja siis armastame neid uuesti. Igatahes on need viimasel ajal jälle üles kerkinud ja see pani mind mõtlema, kuidas neid tehakse. Seal on nagu suur hulk QR-koodi generaatoreid, kuid öelge, et see on midagi, mida peate oma veebisaidil tegema. See pakett saab seda teha. Kuid see kaalub ka kopsakaid 180 KB kõige jaoks, mida see kraami loomiseks vajab. Te ei soovi seda kõike koos ülejäänud skriptidega esitada.

Nüüd olen pilvefunktsioonide kontseptsioonis suhteliselt uus, kuid kuuldavasti on see niisugune asi. Nii elab funktsioon kuskil serveris, mida saab vajadusel välja kutsuda. See on nagu väike API funktsiooni käivitamiseks.

Mõned hostid pakuvad mingit pilvefunktsiooni funktsiooni. DigitalOcean on juhtumisi üks neist! Ja nagu Dropletsi, on ka funktsioone üsna lihtne juurutada.

Looge kohapeal funktsioonide kaust

DigitalOceanil on CLI, millel on käsk, mis loob asjad meie eest cd kus iganes soovite asju seadistada ja käivitada:

doctl serverless init --language js qr-generator

Pange tähele, et keel on selgesõnaliselt deklareeritud. DigitalOceani funktsioonid toetavad ka PHP-d ja Pythonit.

Saame kena puhta projekti nimega qr-generator koos /packages kaust, mis sisaldab kõiki projekti funktsioone. Seal on näidisfunktsioon, kuid me võime selle praegu tähelepanuta jätta ja luua a qr kaust selle kõrval:

Teeme serverita funktsiooniga QR-koodi generaatori! PlatoBlockchaini andmete luure. Vertikaalne otsing. Ai.
Teeme serverita funktsiooniga QR-koodi generaatori!

See kaust on koht, kus mõlemad qrcode pakett ja meie qr.js funktsioonid jäävad elama. Niisiis, lähme cd sisse packages/sample/qr ja installige pakett:

npm install --save qrcode

Nüüd saame funktsiooni kirjutada uude qr.js faili:

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)

Kõik, mis teeb, nõuab qrcode pakkida ja eksportida funktsiooni, mis põhimõtteliselt genereerib <img> allika jaoks base64 PNG-ga. Saame seda isegi terminalis testida:

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

Kontrollige konfiguratsioonifaili

Siin on vaja veel ühte sammu. Kui projekt oli tellingutega valmis, saime selle väikese project.yml faili ja see konfigureerib funktsiooni selle kohta teatud teabega. Vaikimisi on see sees:

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

Kas näete neid esiletõstetud ridu? The packages: name vara asub kohas packages kaust funktsioon elab, mis on kaust nimega sample sel juhul. The actions/ name atribuut on funktsiooni enda nimi, mis on faili nimi. See on hello vaikimisi, kui me projekti üles keerame, kuid me andsime omale nime qr.js, seega peaksime seda rida muutma hello et qr enne edasi liikumist.

Rakendage funktsioon

Saame seda teha otse käsurealt! Esiteks loome ühenduse DigitalOceani liivakastikeskkonnaga, nii et meil on testimiseks reaalajas URL:

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

Nüüd saame juurutada funktsiooni:

doctl sandbox deploy qr-generator

Pärast juurutamist pääseme funktsioonile juurde URL-i kaudu. Mis on URL? Selle jaoks on käsk:

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

Kurat jah! Enam pole vaja kogu paketti koos ülejäänud skriptidega tarnida! Saame sellele URL-ile vajutada ja sealt QR-koodi genereerida.

Demo

We fetch API ja see on tegelikult kõik!

CodePen Embed Fallback

Teeme serverita funktsiooniga QR-koodi generaatori! algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

Ajatempel:

Veel alates CSSi trikid