В цій статі ми розглянемо, як за допомогою JavaScript та Node.js за 15 хвилин створити власний HTTP API, що повертатиме згенерований QR-код.

Створюємо сайт

Сам API ми розгорнемо на безкоштовному сайті Wix.

Для початку зареєструмося на wix.com, можна через обліковий запис на Facebook або Google. Щоб створити сайт, перейдіть за посиланням на порожнiй шаблон, звідси ми потрапляємо прямісінько в редактор.

Далі потрібно активувати Corvid — це розширення можливостей сайтів Wix для написання скриптів на frontend та backend. У верхній частині редактора обираємо пункт меню «Dev Mode» і у розгорнутому підменю тиснемо на кнопку «Увімкнути Corvid» (Turn on Dev Mode).

Ліворуч з'явиться файлова структура сайту (Site Structure):

1. Pages
2. Public
3. Backend
4. node_modules
5. БД
6. Мої застосунки

Зараз нас цікавлять тільки дві текі, це Backend та node_modules. Почнемо з node_modules. Наводимо на цю теку і ліворуч з'являється коліщатко, тиснемо на нього й обираємо «Install a New Pakage», відкриється «Менеджер пакетів» (Package Manager). В полі «Пошук по пакетах» (Search packages) вводимо «qrcode» (саме за допомогою цієї бібліотеки ми будемо генерувати QR Code), обираємо «Встановити» (Install).

Залишилося тільки опублікувати сайт. В лівій верхній частині сайту тиснемо на кнопку «Опублікувати» (Publish). Обираємо назву для сайту і отримуємо таке посилання:

https://<USER_NAME>.wixsite.com/<SITE_NAME>

wix-http-functions

Тепер перейдемо до теки Backend. Тут нам потрібно створити JS-файл «Hовий файл .js» (New .js File) з назвою http-functions.js (назва має бути саме такою). У створеному файлі є код с прикладом, ми не будемо розглядати цей приклад, а послідовно створимо все з початку. Видаляємо зразок та починаємо.

Найменування функцій

Для створення роутингу в файлі http-functions.js, нам потрібно експортувати функції, назва яких складається з префіксу та назви роуту, розділених нижнім підкреслюванням.

 export function <prefix>_<functionName>(request) { }

1. <prefix> — це назва методу запиту (GET, POST, PUT ...). Докладніше на MDN.
2. <functionName> — це назва роуту, на який ми будимо відправляти запити.
3. request — це oб'єкт, який містить параметри вхідних даних. Докладніше: Corvid Reference.

Створімо роут для методу GET з назвою qrcode:

backend/http-functions.js

export function get_qrcode(request) {
  // TODO: ...
}

Зараз ми можемо відправляти GET-запити на _functions/qrcode. Повна адреса буде такою:

https://<USER_NAME>.wixsite.com/<SITE_NAME>/_functions/qrcode

Відповідь на запит

Щоб наш API міг відповідати на запити, нам потрібно експортувати модуль wix-http-functions — це внутрішній модуль Wix-сайтів, що містить функціональність для роботи з HTTP. Ми будемо використовувати response:

backend/http-functions.js

import { response } from "wix-http-functions";

export function get_qrcode(request) {
  const text = "Hello";

  return response({
    status: 200,
    body: text,
  });
}

Тепер необхідно опублікувати наші зміни, тиснемо на кнопку «Опублікувати» (Publish) і переходимо за адресою: https://<USER_NAME>.wixsite.com/<SITE_NAME>/_functions/qrcode, результат Hello.

Реалізуємо передачу тексту за допомогою параметрів запиту. Всі передані параметри ми можемо отримати через об'єкт request.query. Також нам необхідно декодувати переданий текст функцією decodeURIComponent(encodedURI).

backend/http-functions.js

import { response } from "wix-http-functions";

// ?text=Hello
export function get_qrcode(request) {
  // Текст передається як частина адреси запиту,
  // тому частина символів може буде задзеркальна в керовані послідовності UTF-8
  const text = decodeURIComponent(request.query.text);

  return response({
    status: 200,
    body: text,
  });
}



https://<USER_NAME>.wixsite.com/<SITE_NAME>/_functions/qrcode?text=Hello

QR Code

На початку ми додали бібліотеку qrcode, за допомогою якої будемо генерувати зображення. Ми використаємо метод, який поверне нам data:URL.

import QRCode  from "qrcode";

const text = "Hello";

QRCode.toDataURL(text, (error, url) => {
  console.log(url); // data:URL
});

QRCode.toDataURL() — це асинхронна функія, вона приймає текст (з якого генеруватиметься QR Code) та функцію зворотного виклику, що викличеться, коли зображення вже згенероване. Для зручності обернемо в Promise за допомогою util.promisify(original):

import QRCode  from "qrcode";
import util from "util";

const getDataURL = util.promisify(QRCode.toDataURL);

Генерація QR Code виконується асинхронно, тому і роут потрібно перетворити на асинхронну функціюimport { response } from "wix-http-functions";
import QRCode from "qrcode";
import util from "util";

const getDataURL = util.promisify(QRCode.toDataURL);

// Додаємо оператор async
export async function get_qrcode(request) {
  const text = decodeURIComponent(request.query.text);
  // Чекаємо, коли виконається генерація зображення
  const dataURL = await getDataURL(text);

  return response({
    status: 200,
    body: dataURL,
  });
}

Не забуваємо опублікувати наші зміни. Зараз ми маємо API, який може повертати QR Code зображення у вигляді рядка data:URL. Ми вже можемо використовувати цей протокол, щоб побачити QR Code зображення.

PNG

Hам залишилось тільки перетворити рядок data:URL у справжнє зображення. Щоб відповідь нашого API браузер розпізнавав як зображення, потрібно перетворити його на буферний масив бітів та додати заголовок у відповідь з типом контенту.

Почнемо:

data:image/png;base64,<data>

1. data: — протокол;
2. image/png — MIME-тип контенту;
3. base64 — кодування;
4. <data> — закодоване зображення.

Нам потрібне лише саме зображення, тому відрізаємо всю метаінформацію до коми, перші 22 символи:

const base64 = dataURL.slice(22);

Щоб створити масив бітів у Node.js, використаємо Buffer.from(string[,encoding]):

Buffer.from(base64, "base64");

Також нам потрібно додати заголовки до відповіді:

{
  "Content-Type": "image/png",
}

Збираємо все до купи:

backend/http-functions.js

/* eslint-env node */
import { response } from "wix-http-functions";
import QRCode  from "qrcode";
import util from "util";

const getDataURL = util.promisify(QRCode.toDataURL);

export async function get_qrcode(request) {
  const text = decodeURIComponent(request.query.text);
  const dataURL = await getDataURL(text);
  const base64 = dataURL.slice(22);

  return response({
    status: 200,
    headers: {
      "Content-Type": "image/png",
    },
    body: Buffer.from(base64, "base64"),
  });
}
Прaцює!

Посилання

• wix-http-functions
• node-qrcode
• Data:URLs
• decodeURIComponent(encodedURI)
• util.promisify(original)
• Buffer.from(string[,encoding])

Джерело: codeguida.com