← Cloudflare Workers / workers / tutorials

Vytvořte generátor QR kódů

V tomto tutoriálu sestavíte a publikujete aplikaci Worker, která generuje QR kódy.

Pokud si chcete projít kód k tomuto tutoriálu, finální verze kódové základny je dostupné na GitHubu ↗. Kód z ukázkového repozitáře můžete převzít, upravit podle svých potřeb a nasadit pro použití ve vlastních projektech.

Všechny návody předpokládají, že jste již dokončili Úvodní návod, který vás provede nastavením účtu Cloudflare Workers, C3 ↗, a Wrangler.

Nejprve použijte create-cloudflare CLI pro vytvoření nového projektu Cloudflare Workers. Otevřete okno terminálu a spusťte následující příkaz:

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

Při nastavení vyberte následující možnosti:

• Pro S čím byste chtěli začít?, vyberte Hello World example.
• Pro Jakou šablonu chcete použít?, vyberte Worker only.
• Pro Jaký jazyk chcete použít?, vyberte JavaScript.
• Pro Chcete používat git pro správu verzí?, vyberte Yes.
• Pro Chcete nasadit svou aplikaci?, vyberte No (před nasazením provedeme ještě několik změn).

Poté přejděte do svého nově vytvořeného adresáře:

cd qr-code-generator

Uvnitř svého nového qr-code-generator adresáři projektu Workeru, index.js představuje vstupní bod vaší aplikace Cloudflare Workers.

Všechny aplikace Cloudflare Workers začínají nasloucháním na fetch události, které se spustí, když klient odešle požadavek na trasu Workers. Jakmile Worker požadavek přijme, uživateli se vrátí odpověď sestavená vaší aplikací. Tento tutoriál vás provede tím, jak funguje vzor request/response a jak ho můžete použít k vytváření plnohodnotných aplikací.

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

Ve výchozí index.js soubor, můžete vidět tento vzor požadavku a odpovědi v praxi. Soubor fetch vytvoří nový Response s textem těla 'Hello Worker!'.

Když Worker přijme fetch událost, Worker vrátí klientovi nově sestavenou odpověď. Váš Worker bude nové odpovědi obsluhovat přímo z Globální síť Cloudflare ↗ místo pokračování na váš origin server. Standardní server by požadavky přijal a vrátil odpovědi. Cloudflare Workers umožňuje rychle odpovídat sestavením odpovědí přímo v globální síti Cloudflare.

Jakýkoli projekt, který publikujete do Cloudflare Workers, může využívat moderní nástroje pro JavaScript, jako jsou ES moduly, npm balíčky a async/await ↗ funkce k vytvoření vaší aplikace. Kromě psaní Workers můžete Workers použít k vytvářet kompletní aplikace pomocí stejných nástrojů a postupu jako v tomto tutoriálu.

Generátor QR kódů, který v tomto tutoriálu vytvoříte, bude Worker běžící na jedné route a přijímající požadavky. Každý požadavek bude obsahovat textovou zprávu (například URL), kterou funkce zakóduje do QR kódu. Funkce poté odpoví QR kódem ve formátu obrázku PNG.

V této fázi tutoriálu už vaše funkce Workeru dokáže přijímat požadavky a vracet jednoduchou odpověď s textem "Hello Worker!". Chcete-li zpracovat data přicházející do Workeru, zkontrolujte, zda je příchozí požadavek POST požadavek:

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

V současnosti, pokud příchozí požadavek není POST, funkce vrátí undefined. Worker však vždy musí vrátit Response. Jelikož funkce má přijímat pouze příchozí POST požadavky, vraťte nový Response s 405 stavový kód ↗ pokud příchozí požadavek není 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,
		});
	},
};

Nastavili jste základní tok požadavku. Nyní nastavíte odpověď na příchozí platné požadavky. Pokud POST požadavek, funkce by měla vygenerovat QR kód. Nejprve přesuňte "Hello Worker!" odpověď do nové funkce, generateQRCode, který nakonec bude obsahovat většinu logiky vaší funkce:

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!");
}

S generateQRCode funkci vyplněnou zavolejte v rámci fetch funkci a vrátit její výsledek přímo klientovi:

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

Všechny projekty nasazené na Cloudflare Workers podporují balíčky npm. Díky tomu můžete ve svých Workerech rychle a snadno rozšiřovat funkčnost. 'qrcode-svg' ↗ balíček je skvělý způsob, jak zakódovat text do QR kódu. V příkazové řádce nainstalujte a uložte 'qrcode-svg' do souboru 'package.json' ve vašem projektu:

npm i qrcode-svg

V index.js, naimportujte qrcode-svg balíček jako proměnnou QRCode. V generateQRCode funkci analyzujte příchozí požadavek jako JSON pomocí request.json, a vygenerujte nový QR kód pomocí qrcode-svg balíček. QR kód se generuje jako SVG. Vytvořte novou instanci Response, přičemž jako tělo předáte data SVG, a Content-Type hlavička image/svg+xml. Díky tomu prohlížeče správně zpracují data vrácená z vašeho Workeru jako obrázek:

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 se spustí, když uživatel odešle POST požadavek na trasu, ale je osvědčeným postupem poskytnout i řádné rozhraní pro testování funkce. V této části tutoriálu platí, že pokud vaše funkce přijme jakýkoli požadavek, který není POST, 405 odpověď se vrátí. Nová verze fetch by měl vrátit nový Response statickým dokumentem HTML místo 405 chyba:

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 proměnná, což je statický řetězec HTML, nastavuje input tag a odpovídající button, který volá generateQRCode funkci. Tato funkce vytvoří požadavek HTTP POST požadavek zpět na váš Worker, díky čemuž na stránce uvidíte odpovídající obrázek QR kódu.

Po dokončení výše uvedených kroků je váš Worker připravený. Celá verze kódu vypadá takto:

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>
`;

Po dokončení všech výše uvedených kroků máte napsaný kód generátoru QR kódů na Cloudflare Workers.

Wrangler má vestavěnou podporu pro bundling, nahrávání a vydávání vaší aplikace Cloudflare Workers. K tomu spusťte npx wrangler deploy, který sestaví a nasadí váš kód.

npx wrangler deploy

V tomto tutoriálu jste sestavili a nasadili aplikaci Worker pro generování QR kódů. Pokud si chcete prohlédnout celý zdrojový kód této aplikace, najdete jej na GitHubu ↗.

Pokud chcete začít vytvářet vlastní projekty, projděte si existující seznam Šablony pro rychlý start.