Mari Membuat QR Code Generator Dengan Fungsi Tanpa Server!

Kode QR lucu, bukan? Kami mencintai mereka, lalu membenci mereka, lalu mencintai mereka lagi. Bagaimanapun, mereka baru-baru ini bermunculan lagi dan itu membuat saya berpikir tentang bagaimana mereka dibuat. Ada seperti trilyun pembuat kode QR di luar sana, tetapi katakan itu adalah sesuatu yang perlu Anda lakukan di situs web Anda sendiri. Paket ini bisa melakukan itu. Tapi itu juga berbobot 180 KB yang lumayan untuk semua yang dibutuhkan untuk menghasilkan barang. Anda tidak ingin menyajikan semua itu bersama dengan sisa skrip Anda.

Sekarang, saya relatif baru dalam konsep fungsi cloud, tetapi saya mendengar itu adalah masalah besar untuk sesuatu seperti ini. Dengan begitu, fungsi tersebut hidup di suatu tempat di server yang dapat dipanggil saat dibutuhkan. Agak seperti API kecil untuk menjalankan fungsinya.

Beberapa host menawarkan semacam fitur fungsi cloud. DigitalOcean kebetulan menjadi salah satunya! Dan, seperti Droplets, fungsinya cukup mudah untuk diterapkan.

Buat folder fungsi secara lokal

DigitalOcean memiliki CLI yang dengan perintah yang akan membuat perancah bagi kita, jadi cd di mana pun Anda ingin mengatur dan menjalankan:

doctl serverless init --language js qr-generator

Perhatikan bahasa secara eksplisit dideklarasikan. Fungsi DigitalOcean juga mendukung PHP dan Python.

Kami mendapatkan proyek bersih yang bagus yang disebut qr-generator dengan /packages folder yang menampung semua fungsi proyek. Ada fungsi sampel di sana, tetapi kita dapat mengabaikannya untuk saat ini dan membuat qr folder tepat di sebelahnya:

Folder itu adalah tempat keduanya qrcode paket dan kami qr.js fungsi akan hidup. Jadi ayo cd ke packages/sample/qr dan instal paket:

npm install --save qrcode

Sekarang kita dapat menulis fungsi dalam yang baru 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)

Semua yang dilakukan adalah membutuhkan qrcode mengemas dan mengekspor fungsi yang pada dasarnya menghasilkan <img> tag dengan PNG base64 untuk sumbernya. Kami bahkan dapat mengujinya di terminal:

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

Periksa file konfigurasi

Ada satu langkah ekstra yang kita butuhkan di sini. Ketika proyek itu di-scaffolding, kami mendapat sedikit ini project.yml file dan mengonfigurasi fungsi dengan beberapa informasi tentangnya. Inilah yang ada di sana secara default:

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

Lihat garis yang disorot itu? Itu packages: name properti adalah di mana di packages folder fungsi hidup, yang merupakan folder bernama sample pada kasus ini. Itu actions/ name properti adalah nama fungsi itu sendiri, yang merupakan nama file. Dia hello secara default ketika kami memutar proyek, tetapi kami menamai proyek kami qr.js, jadi kita harus mengubah baris itu dari hello untuk qr sebelum melanjutkan.

Terapkan fungsi

Kita bisa melakukannya langsung dari baris perintah! Pertama, kami terhubung ke lingkungan kotak pasir DigitalOcean sehingga kami memiliki URL langsung untuk pengujian:

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

Sekarang kita dapat menerapkan fungsi:

doctl sandbox deploy qr-generator

Setelah digunakan, kita dapat mengakses fungsi di URL. Apa URL-nya? Ada perintah untuk itu:

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

Sial ya! Tidak perlu lagi mengirimkan seluruh paket itu dengan skrip lainnya! Kita dapat menekan URL itu dan menghasilkan kode QR dari sana.

Demo

We fetch API dan hanya itu saja!

---

Mari Membuat QR Code Generator Dengan Fungsi Tanpa Server! awalnya diterbitkan pada Trik CSS. Kamu harus dapatkan buletin.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/