Tehdään QR-koodigeneraattori, jossa on palvelinton toiminto!

QR-koodit ovat hauskoja, eikö? Rakastamme heitä, sitten vihaamme heitä ja sitten rakastamme heitä uudelleen. Joka tapauksessa, niitä on viime aikoina taas ilmaantunut ja se sai minut miettimään, miten ne on tehty. QR-koodigeneraattoreita on kuin miljoona, mutta sano, että se on jotain, joka sinun on tehtävä omalla verkkosivustollasi. Tämä paketti voi tehdä sen. Mutta se painaa myös 180 kilotavua kaikelle, mitä se tarvitsee tavaran tuottamiseen. Et halua tarjota kaikkea sitä muiden käsikirjoitustesi kanssa.

Olen nyt suhteellisen uusi pilvitoimintojen käsitteessä, mutta kuulen, että se on mehiläisen polvi jollekin tällaiselle. Näin funktio asuu jossain palvelimella, jota voidaan kutsua tarvittaessa. Jotenkin kuin pieni API toiminnon suorittamiseen.

Jotkut isännät tarjoavat jonkinlaisen pilvitoimintoominaisuuden. DigitalOcean sattuu olemaan yksi heistä! Ja kuten Droplets, toimintoja on melko helppo ottaa käyttöön.

Luo funktiokansio paikallisesti

DigitalOceanissa on CLI, jolla on komento, joka tekee asiat puolestamme cd missä haluat asettaa asiat ja ajaa:

doctl serverless init --language js qr-generator

Huomaa, että kieli on nimenomaisesti ilmoitettu. DigitalOcean-toiminnot tukevat myös PHP:tä ja Pythonia.

Saamme mukavan puhtaan projektin nimeltä qr-generator kanssa /packages kansio, joka sisältää kaikki projektin toiminnot. Siinä on esimerkkitoiminto, mutta voimme jättää sen huomiotta toistaiseksi ja luoda a qr kansio sen vieressä:

Tuo kansio on missä molemmat qrcode paketti ja meidän qr.js toiminto jää elämään. Joten mennään cd tulee packages/sample/qr ja asenna paketti:

npm install --save qrcode

Nyt voimme kirjoittaa funktion uuteen qr.js tiedosto:

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)

Kaikki mitä tekee, vaatii qrcode paketti ja viedä funktio, joka pohjimmiltaan luo <img> -tunniste, jossa on lähteen base64 PNG. Voimme jopa testata sitä terminaalissa:

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

Tarkista asetustiedosto

Tässä tarvitaan yksi ylimääräinen vaihe. Kun projekti oli telineessä, saimme tämän pienen project.yml tiedosto ja se määrittää toiminnon tietyillä tiedoilla. Tässä on oletuksena tämä:

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

Näetkö nuo korostetut rivit? The packages: name omaisuus on missä packages kansio funktio elää, joka on kansio nimeltä sample tässä tapauksessa. actions/ name ominaisuus on itse funktion nimi, joka on tiedoston nimi. Sen hello oletuksena, kun pyöritämme projektia, mutta nimesimme omamme qr.js, joten meidän pitäisi muuttaa tätä linjaa hello että qr ennen kuin jatkat.

Ota toiminto käyttöön

Voimme tehdä sen suoraan komentoriviltä! Ensin muodostamme yhteyden DigitalOcean-hiekkalaatikkoympäristöön, jotta meillä on live-URL testausta varten:

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

Nyt voimme ottaa käyttöön toiminnon:

doctl sandbox deploy qr-generator

Kun toiminto on otettu käyttöön, voimme käyttää toimintoa URL-osoitteesta. Mikä on URL-osoite? Siihen on käsky:

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

Hitto joo! Ei enää tarvitse lähettää koko pakettia muiden skriptien kanssa! Voimme osua siihen URL-osoitteeseen ja luoda QR-koodin sieltä.

esittely

We fetch API ja siinä oikeastaan ​​kaikki!

---

Tehdään QR-koodigeneraattori, jossa on palvelinton toiminto! alun perin julkaistu CSS-temppuja. Sinun pitäisi hanki uutiskirje.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/