Let's Make a QR Code Generator With a Serverless Function!

QR code is fun, right? We love them, and then hate them, and then love them. Anyway, they are getting popular again lately, which makes me think about how they are made. There are countless QR code generators on the market, but suppose you need to generate QR codes on your own website. While some packages can do this, they are usually huge (e.g., 180KB) and contain everything you need to generate a QR code. It is not ideal to provide services with other scripts on the website.

The concept of cloud functions provides an elegant solution to this problem. Cloud functions reside on the server and are called only when needed, similar to a small API.

Some hosts provide cloud function functions, DigitalOcean is one of them! Like Droplets, function deployment is also quite easy.

Create function folder locally

DigitalOcean provides a CLI command that can build a project framework for us. Go to the directory where you want to set the project and run:

 <code>doctl serverless init --language js qr-generator</code>

Please note that the language is explicitly declared. The DigitalOcean function also supports PHP and Python.

We get a clean project called qr-generator with a /packages folder that contains all the functions of the project. There is a sample function in it, but we can now ignore it and create a qr folder next to it:

This folder will store the qrcode package and our qr.js function. So, let's go to the packages/sample/qr directory and install the package:

 <code>npm install --save qrcode</code>

Now we can write the function in a new 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="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Let's Make a QR Code Generator With a Serverless Function!"> `
  }))
}

if (process.env.TEST) exports.main({text:"hello"}).then(console.log)

The purpose of this code is to introduce the qrcode package and export a function that basically generates a base64 PNG<img alt="Let&#039;s Make a QR Code Generator With a Serverless Function!" > Tags as source. We can even test it in the terminal:

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

Check the configuration file

There is an extra step here. After the project is built, we will get a project.yml file that uses some information to configure functions. By default, the file contents are as follows:

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

Have you seen those highlighted ones? packages: name attribute specifies the location of the function in the packages folder, in this case a folder named sample. actions/ name attribute is the name of the function itself, that is, the file name. When we start the project, the default name is hello, but we name it qr.js, so we should change the line from hello to qr before continuing.

Deploy functions

We can deploy directly from the command line! First, we connect to the DigitalOcean sandbox environment to get the real-time URL for testing:

 ## You need a DO API key doctl sandbox connect

Now we can deploy the function:

 doctl sandbox deploy qr-generator

After the deployment is complete, we can access the function through the URL. What is the URL? There is a command to get it:

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

marvelous! We no longer need to publish the entire package with other scripts! We can access that URL and generate the QR code from there.

Demo

We get the API, that's all!

The above is the detailed content of Let's Make a QR Code Generator With a Serverless Function!. For more information, please follow other related articles on the PHP Chinese website!