← Cloudflare Workers / workers / tutorials

Создайте генератор QR-кодов

В этом руководстве вы создадите и опубликуете приложение Worker, которое генерирует QR-коды.

Если вы хотите посмотреть код к этому руководству, финальная версия кодовой базы доступна доступно на GitHub ↗. Вы можете взять код из примера в репозитории, настроить его под свои нужды и развернуть для использования в собственных проектах.

Во всех руководствах предполагается, что вы уже выполнили Руководство по началу работы, который поможет вам настроить аккаунт Cloudflare Workers, C3 ↗, а также Wrangler.

Сначала используйте create-cloudflare CLI чтобы создать новый проект Cloudflare Workers. Для этого откройте окно терминала и выполните следующую команду:

npm create cloudflare@latest -- qr-code-generator

Для настройки выберите следующие параметры:

• Для С чего вы хотите начать?, выберите Hello World example.
• Для Какой шаблон вы хотите использовать?, выберите Worker only.
• Для Какой язык вы хотите использовать?, выберите JavaScript.
• Для Хотите использовать git для контроля версий?, выберите Yes.
• Для Хотите развернуть приложение?, выберите No (мы внесём некоторые изменения перед развёртыванием).

Затем перейдите в только что созданный каталог:

cd qr-code-generator

Внутри вашего нового qr-code-generator каталог проекта Worker, index.js представляет собой точку входа в ваше приложение Cloudflare Workers.

Все приложения Cloudflare Workers начинают работу с ожидания fetch события, которые вызываются, когда клиент отправляет запрос на маршрут Workers. После того как Worker получает запрос, пользователю возвращается ответ, сформированный вашим приложением. Это руководство поможет вам разобраться, как работает модель запрос-ответ, и как использовать её для создания полнофункциональных приложений.

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello Worker!");
	},
};

В своём стандартном index.js файле вы можете увидеть этот паттерн запрос-ответ в действии. fetch создаёт новый Response с текстом тела 'Hello Worker!'.

Когда Worker получает fetch событие, Worker возвращает клиенту вновь созданный ответ. Ваш Worker будет предоставлять новые ответы напрямую из глобальная сеть Cloudflare ↗ вместо перенаправления на ваш исходный сервер. Обычный сервер принимает запросы и возвращает ответы. Cloudflare Workers позволяет быстро отвечать, формируя ответы напрямую в глобальной сети Cloudflare.

Любой проект, который вы публикуете в Cloudflare Workers, может использовать современные инструменты JavaScript, такие как ES modules, npm пакеты, а также async/await ↗ функции для создания приложения. Помимо написания Workers, вы можете использовать Workers, чтобы создание полноценных приложений с использованием тех же инструментов и процесса, что и в этом руководстве.

Генератор QR-кодов, который вы создадите в этом руководстве, будет представлять собой Worker, работающий на одном маршруте и принимающий запросы. Каждый запрос будет содержать текстовое сообщение (например, URL), которое функция закодирует в QR-код. Затем функция вернет QR-код в формате изображения PNG.

На этом этапе руководства функция вашего Worker уже может принимать запросы и возвращать простой ответ с текстом "Hello Worker!". Чтобы обработать данные, поступающие в ваш Worker, проверьте, является ли входящий запрос POST запрос:

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return new Response("Hello Worker!");
		}
	},
};

В настоящее время, если входящий запрос не является POST, функция вернёт undefined. Однако Worker всегда должен возвращать Response. Поскольку функция должна принимать только входящие POST запросы, возвращайте новый Response с 405 код состояния ↗ если входящий запрос не является POST:

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return new Response("Hello Worker!");
		}

		return new Response("Expected POST request", {
			status: 405,
		});
	},
};

Вы уже выстроили базовый поток обработки запроса. Теперь вы настроите ответ на входящие корректные запросы. Если POST запрос, функция должна сгенерировать QR-код. Для начала переместите "Hello Worker!" ответ в новую функцию, generateQRCode, который в итоге будет содержать основную часть логики вашей функции:

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
		}
	},
};

async function generateQRCode(request) {
	// TODO: Include QR code generation
	return new Response("Hello worker!");
}

С generateQRCode функция заполнена, вызовите её внутри fetch функция и вернуть её результат напрямую клиенту:

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}
	},
};

Все проекты, развёрнутые в Cloudflare Workers, поддерживают пакеты npm. Это позволяет быстро наращивать функциональность в ваших Workers. Подробнее: 'qrcode-svg' ↗ пакет отлично подходит для того, чтобы взять текст и закодировать его в QR-код. В командной строке установите 'qrcode-svg' и сохраните его в 'package.json' вашего проекта:

npm i qrcode-svg

В index.js, импортируйте qrcode-svg пакет как переменную QRCode. В generateQRCode функция, разберите входящий запрос как JSON с помощью request.json, и сгенерировать новый QR-код с помощью qrcode-svg пакет. QR-код создаётся в формате SVG. Создайте новый экземпляр Response, передав данные SVG в качестве тела запроса, и Content-Type заголовок image/svg+xml. Это позволит браузерам корректно распознавать данные, возвращаемые вашим Worker, как изображение:

import QRCode from "qrcode-svg";

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

Worker будет выполняться, когда пользователь отправит POST запрос к маршруту, однако рекомендуется также предусмотреть отдельный интерфейс для тестирования функции. На этом этапе руководства, если ваша функция получает запрос, который не является POST, 405 возвращается ответ. Новая версия fetch должен возвращать новый Response со статическим HTML документом вместо 405 ошибка:

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}

		return new Response(landing, {
			headers: {
				"Content-Type": "text/html",
			},
		});
	},
};

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

landing переменную, которая представляет собой статическую HTML строку, настраивает input тег и соответствующий button, который вызывает generateQRCode функция. Эта функция выполнит HTTP-POST запрос обратно на ваш Worker, что позволяет увидеть соответствующее изображение QR-кода, возвращённое на странице.

Выполнив описанные выше шаги, вы подготовили Worker. Полная версия кода выглядит так:

const QRCode = require("qrcode-svg");

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}

		return new Response(landing, {
			headers: {
				"Content-Type": "text/html",
			},
		});
	},
};

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

Выполнив все описанные выше шаги, вы написали код генератора QR-кодов на Cloudflare Workers.

Wrangler имеет встроенную поддержку сборки, загрузки и релиза приложения Cloudflare Workers. Для этого выполните npx wrangler deploy, который соберёт и развернёт ваш код.

npx wrangler deploy

В этом руководстве вы создали и развернули приложение Worker для генерации QR-кодов. Чтобы посмотреть полный исходный код приложения, вы найдёте его на GitHub ↗.

Если вы хотите начать создавать собственные проекты, ознакомьтесь с существующим списком Шаблоны для быстрого старта.