Sunucusuz İşlevli Bir QR Kod Oluşturucu Yapalım! PlatoBlockchain Veri Zekası. Dikey Arama. Ai.

Sunucusuz İşlevli Bir QR Kod Oluşturucu Yapalım!

QR kodları komik, değil mi? Onları seviyoruz, sonra onlardan nefret ediyoruz, sonra tekrar seviyoruz. Her neyse, son zamanlarda tekrar ortaya çıktılar ve bu beni nasıl yapıldıkları hakkında düşündürdü. Dışarıda milyonlarca QR kod üreteci var, ancak bunun kendi web sitenizde yapmanız gereken bir şey olduğunu söyleyin. Bu paket bunu yapabilir. Ama aynı zamanda, bir şeyler üretmek için ihtiyaç duyduğu her şey için 180 KB gibi ağır bir ağırlığa sahip. Tüm bunları senaryolarınızın geri kalanıyla birlikte sunmak istemezsiniz.

Şimdi, bulut işlevleri kavramında nispeten yeniyim, ancak bunun tam da bunun gibi bir şey için arının dizleri olduğunu duydum. Bu şekilde işlev, gerektiğinde çağrılabilecek bir sunucuda bir yerde yaşar. İşlevi çalıştırmak için küçük bir API gibi sıralayın.

Bazı ana bilgisayarlar, bir tür bulut işlevi özelliği sunar. DigitalOcean onlardan biri! Ve Damlacıklar gibi, işlevlerin dağıtılması oldukça kolaydır.

Yerel olarak bir işlevler klasörü oluşturun

DigitalOcean'ın bizim için işleri iskele edecek bir komuta sahip bir CLI'si var, bu yüzden cd işleri kurmak ve çalıştırmak istediğiniz her yerde:

doctl serverless init --language js qr-generator

Dilin açıkça bildirildiğine dikkat edin. DigitalOcean işlevleri ayrıca PHP ve Python'u da destekler.

adında güzel ve temiz bir proje elde ederiz. qr-generator Birlikte /packages tüm projenin işlevlerini içeren klasör. Orada örnek bir fonksiyon var ama şimdilik onu gözden kaçırıp bir fonksiyon oluşturabiliriz. qr hemen yanındaki klasör:

Sunucusuz İşlevli Bir QR Kod Oluşturucu Yapalım! PlatoBlockchain Veri Zekası. Dikey Arama. Ai.
Sunucusuz İşlevli Bir QR Kod Oluşturucu Yapalım!

Bu klasör hem qrcode paket ve bizim qr.js fonksiyon yaşayacak. Yani, hadi cd içine packages/sample/qr ve paketi kurun:

npm install --save qrcode

Şimdi fonksiyonu yeni bir şekilde yazabiliriz. qr.js Dosya:

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)

Tüm yaptığı, qrcode temelde bir oluşturan bir işlevi paketlemek ve dışa aktarmak <img> kaynak için bir base64 PNG ile etiketleyin. Hatta terminalde test edebiliriz:

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

Yapılandırma dosyasını kontrol edin

Burada ihtiyacımız olan fazladan bir adım var. Proje iskeleye alındığında, bu küçük project.yml dosyası ve işlevi hakkında bazı bilgilerle yapılandırır. Varsayılan olarak orada olan budur:

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

Vurgulanan satırları görüyor musunuz? bu packages: name mülkiyet nerede packages adlı bir klasör olan işlevin yaşadığı klasör sample bu durumda. actions/ name özellik, dosyanın adı olan işlevin adıdır. Onun hello projeyi başlattığımızda varsayılan olarak, ancak bizimkini adlandırdık qr.js, bu yüzden bu satırı değiştirmeliyiz hello için qr devam etmeden önce.

İşlevi dağıt

Bunu doğrudan komut satırından yapabiliriz! İlk olarak, test için canlı bir URL'miz olması için DigitalOcean korumalı alan ortamına bağlanırız:

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

Şimdi işlevi dağıtabiliriz:

doctl sandbox deploy qr-generator

Dağıtıldıktan sonra işleve bir URL'den erişebiliriz. URL nedir? Bunun için bir komut var:

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

Evet! Artık tüm paketi diğer komut dosyalarıyla birlikte göndermenize gerek yok! Bu URL'ye ulaşabilir ve oradan QR kodunu oluşturabiliriz.

Gösteri

We fetch API ve gerçekten hepsi bu kadar!

CodePen Göm Geri Dönüşü

Sunucusuz İşlevli Bir QR Kod Oluşturucu Yapalım! aslen yayınlandı CSS Hileleri. Malısın bülteni al.

Zaman Damgası:

Den fazla CSS Püf Noktaları