Giter VIP home page Giter VIP logo

gas-stations's Introduction

Sample Function: QR Code Generator

Introduction

This repository contains a sample QR code generator function. You can deploy it on DigitalOcean's App Platform as a Serverless Function component. Documentation is available at https://docs.digitalocean.com/products/functions.

Requirements

Deploying the Function

# clone this repo
git clone [email protected]:digitalocean/sample-functions-nodejs-qrcode.git
# deploy the project
> doctl serverless deploy sample-functions-nodejs-qrcode
Deploying 'sample-functions-nodejs-qrcode'
  to namespace 'fn-...'
  on host 'https://faas-...'
Started running npm install --production in sample-functions-nodejs-qrcode/default/qr
Finished running npm install --production in sample-functions-nodejs-qrcode/default/qr
...

Deployed functions ('doctl sbx fn get <funcName> --url' for URL):
  - qr

Using the Function

> doctl serverless functions invoke qr -p text:hello
{
  "body": "data:image/png;base64,iVB...5CYII=",
  "headers": {
    "content-type": "text/html; charset=UTF-8"
  }
}

Project File Structure

This app is a stateless single-page web application that generates a QR code from text that a user submits.

This project has the following components:

  • A single index.html file, which has a field for a visitor to enter some text and click Submit.
  • A single JavaScript file qr.js that provides the backend logic for the conversion of text to QR code.
  • A Node package manager file called package.json, which describes what dependencies the function has.

The GitHub project has the file structure that App Platform uses to intelligently deploy the project:

  • The packages directory contains the project's API implementation, and in this example, there's only one API implemented by a single function. The first subdirectory name usually serves as the package qualifier. The next subdirectory, qr, is the name of the function, and the file qr.js contains the logic for that function. The qualified name of the function is also the name of the API it implements which is default/qr in this case.
  • The client directory contains the static web content for the project. In this case, there is just one HTML file and one image. The index.html file contains a form with a text box for the user to input the text that will be converted.

Notes on QR Logic

The code for the QR action is standard Node.js. It uses an existing Node library package for the actual QR code generation.

Notes on QR Web Content

The index.html file contains the usual markup and logic that you'd write for standard web deployment, with an input form for text. In this case, it calls an API to retrieve a QR code for the form input. This API is implemented by qr.js.

Notes on package.json

The package.json file in the qr directory triggers an automatic build of the action when the function in qr.js is modified.

Learn More

You can learn more about Functions and App Platform integration in the official App Platform Documentation.

gas-stations's People

Contributors

arlabunakty avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.