Add tutorial for Cloudflare Workers with Deno (#754) (#837)

* Add tutorial for Cloudflare Workers with Deno (#754) Co-authored-by: Jens Breuer <jens.breuer@camao-tec.com> Co-authored-by: Ciki Momogi <cikimomogi@protonmail.com> Co-authored-by: KnorpelSenf <shtrog@gmail.com> * Accept suggestions * Accept suggestions * Fix menu * Move default section to Node.js * Move Deno section to default * Fix link * sync to Ukrainian * fix formatting * Space before tip Co-authored-by: Nazar Antoniuk <75927667+Nazar-Ant@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Andrii Zontov <loginmanx@gmail.com> * Update site/docs/.vitepress/configs/uk.ts * Sync #754 to Indonesian * Add line highlighting * docs(id): fix typo * docs(id): sync tip * docs(id): fix typo * Disable prev/next navigation page * Update site/docs/uk/hosting/cloudflare-workers.md * Apply suggestions from code review * Add Spanish * sync zh #837 --------- Co-authored-by: Jens Breuer <breuer.jens@gmail.com> Co-authored-by: Jens Breuer <jens.breuer@camao-tec.com> Co-authored-by: Ciki Momogi <cikimomogi@protonmail.com> Co-authored-by: KnorpelSenf <shtrog@gmail.com> Co-authored-by: Nazar Antoniuk <antonuk.nazar09@gmail.com> Co-authored-by: Nazar Antoniuk <75927667+Nazar-Ant@users.noreply.github.com> Co-authored-by: Andrii Zontov <loginmanx@gmail.com> Co-authored-by: Habemuscode <habemuscode@protonmail.com> Co-authored-by: grammyz <grammyz@users.noreply.github.com>
grammyjs · Aug 3, 2023 · c06aee4 · c06aee4
1 parent 33f793b
commit c06aee4
Show file tree

Hide file tree

Showing 15 changed files with 1,062 additions and 291 deletions.
diff --git a/site/docs/.vitepress/configs/locales/en.ts b/site/docs/.vitepress/configs/locales/en.ts
@@ -313,9 +313,13 @@ const hostingTutorials = {
       link: "/hosting/supabase",
     },
     {
-      text: "Cloudflare Workers",
+      text: "Cloudflare Workers (Deno)",
       link: "/hosting/cloudflare-workers",
     },
+    {
+      text: "Cloudflare Workers (Node.js)",
+      link: "/hosting/cloudflare-workers-nodejs",
+    },
     {
       text: "Heroku",
       link: "/hosting/heroku",

diff --git a/site/docs/.vitepress/configs/locales/es.ts b/site/docs/.vitepress/configs/locales/es.ts
@@ -309,9 +309,13 @@ const hostingTutorials = {
       link: "/es/hosting/supabase",
     },
     {
-      text: "Cloudflare Workers",
+      text: "Cloudflare Workers (Deno)",
       link: "/es/hosting/cloudflare-workers",
     },
+    {
+      text: "Cloudflare Workers (Node.js)",
+      link: "/es/hosting/cloudflare-workers-nodejs",
+    },
     {
       text: "Heroku",
       link: "/es/hosting/heroku",

diff --git a/site/docs/.vitepress/configs/locales/id.ts b/site/docs/.vitepress/configs/locales/id.ts
@@ -305,9 +305,13 @@ const hostingTutorials = {
       link: "/id/hosting/supabase",
     },
     {
-      text: "Cloudflare Workers",
+      text: "Cloudflare Workers (Deno)",
       link: "/id/hosting/cloudflare-workers",
     },
+    {
+      text: "Cloudflare Workers (Node.js)",
+      link: "/id/hosting/cloudflare-workers-nodejs",
+    },
     {
       text: "Heroku",
       link: "/id/hosting/heroku",

diff --git a/site/docs/.vitepress/configs/locales/uk.ts b/site/docs/.vitepress/configs/locales/uk.ts
@@ -313,9 +313,13 @@ const hostingTutorials = {
       link: "/uk/hosting/supabase",
     },
     {
-      text: "Cloudflare Workers",
+      text: "Cloudflare Workers (Deno)",
       link: "/uk/hosting/cloudflare-workers",
     },
+    {
+      text: "Cloudflare Workers (Node.js)",
+      link: "/uk/hosting/cloudflare-workers-nodejs",
+    },
     {
       text: "Heroku",
       link: "/uk/hosting/heroku",

diff --git a/site/docs/.vitepress/configs/locales/zh.ts b/site/docs/.vitepress/configs/locales/zh.ts
@@ -313,9 +313,13 @@ const hostingTutorials = {
       link: "/zh/hosting/supabase",
     },
     {
-      text: "Cloudflare Workers",
+      text: "Cloudflare Workers (Deno)",
       link: "/zh/hosting/cloudflare-workers",
     },
+    {
+      text: "Cloudflare Workers (Node.js)",
+      link: "/zh/hosting/cloudflare-workers-nodejs",
+    },
     {
       text: "Heroku",
       link: "/zh/hosting/heroku",

diff --git a/site/docs/es/hosting/cloudflare-workers-nodejs.md b/site/docs/es/hosting/cloudflare-workers-nodejs.md
@@ -0,0 +1,131 @@
+---
+prev: false
+next: false
+---
+
+# Alojamiento: Cloudflare Workers (Node.js)
+
+[Cloudflare Workers](https://workers.cloudflare.com) es una plataforma pública de computación sin servidor que ofrece una solución conveniente y simple para ejecutar JavaScript en el [edge](https://en.wikipedia.org/wiki/Edge_computing).
+Al tener la capacidad de manejar tráfico HTTP y estar basada en la [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), construir bots para Telegram se convierte en algo muy sencillo.
+Además, puedes incluso desarrollar [Web Apps](https://core.telegram.org/bots/webapps) en el edge, todo gratis dentro de ciertas cuotas.
+
+Esta guía te llevará a través del proceso de alojar tus bots de Telegram en Cloudflare Workers.
+
+::: tip ¿Buscas la versión de Deno?
+Este tutorial explica cómo implementar un bot de Telegram en Cloudflare Workers usando Node.js.
+Si estás buscando la versión Deno, por favor revisa [este tutorial](./cloudflare-workers) en su lugar.
+:::
+
+## Requisitos previos
+
+Para seguir adelante, por favor asegúrese de que tiene una [cuenta de Cloudflare](https://dash.cloudflare.com/login) con su subdominio de workers [configurado](https://dash.cloudflare.com/?account=workers).
+
+## Puesta a punto
+
+En primer lugar, crea un nuevo proyecto:
+
+```sh
+npx wrangler generate my-bot
+```
+
+Puedes cambiar `my-bot` por lo que quieras.
+Este será el nombre de tu bot y el directorio del proyecto.
+
+Después de ejecutar el comando anterior, sigue las instrucciones que veas para inicializar el proyecto.
+Allí, puedes elegir entre JavaScript o TypeScript.
+
+Cuando el proyecto esté inicializado, `cd` en `my-bot` o en el directorio en el que hayas inicializado tu proyecto.
+Dependiendo de cómo inicializaste el proyecto, deberías ver una estructura de archivos similar a la siguiente:
+
+```asciiart:no-line-numbers
+.
+├── node_modules
+├── package.json
+├── package-lock.json
+├── src
+│   ├── index.js
+│   └── index.test.js
+└── wrangler.toml
+```
+
+A continuación, instala `grammy`, y otros paquetes que puedas necesitar:
+
+```sh
+npm install grammy
+```
+
+## Creando tu Bot
+
+Edita `src/index.js` o `src/index.ts`, y escribe este código dentro:
+
+```ts
+// Ten en cuenta que estamos importando desde 'grammy/web', no desde 'grammy'.
+import { Bot, webhookCallback } from "grammy/web";
+
+// La siguiente línea de código asume que ha configurado los secretos BOT_TOKEN y BOT_INFO.
+// Ver https://developers.cloudflare.com/workers/platform/environment-variables/#secrets-on-deployed-workers.
+// El BOT_INFO se obtiene de `bot.api.getMe()`.
+const bot = new Bot(BOT_TOKEN, { botInfo: BOT_INFO });
+
+bot.command("start", async (ctx) => {
+  await ctx.reply("¡Hola, mundo!");
+});
+
+addEventListener("fetch", webhookCallback(bot, "cloudflare"));
+```
+
+The above example bot replies "¡Hola, mundo!" when it receives `/start`.
+
+## Desplegando tu Bot
+
+Antes de desplegar, necesitamos editar `wrangler.toml`:
+
+```toml
+account_id = 'your account_id' # Obtén esto del dashboard de Cloudflare.
+name = 'my-bot' # El nombre de tu bot, que aparecerá en la URL del webhook, por ejemplo: https://my-bot.my-subdomain.workers.dev
+main = "src/index.js"  # El fichero de entrada del worker.
+compatibility_date = "2023-01-16"
+```
+
+A continuación, puede desplegar utilizando el siguiente comando:
+
+```sh
+npm run deploy
+```
+
+## Configurando tu Webhook
+
+Necesitamos decirle a Telegram a dónde enviar las actualizaciones.
+Abre tu navegador y visita esta URL:
+
+```text
+https://api.telegram.org/bot<BOT_TOKEN>/setWebhook?url=https://<MY_BOT>.<MY_SUBDOMAIN>.workers.dev/
+```
+
+Sustituye `<BOT_TOKEN>`, `<MY_BOT>`, y `<MY_SUBDOMAIN>` por tus valores.
+Si la configuración se realiza correctamente, verá una respuesta JSON como esta:
+
+```json
+{
+  "ok": true,
+  "result": true,
+  "description": "Webhook was set"
+}
+```
+
+## Probando tu Bot
+
+Abre tu aplicación de Telegram, e inicia tu bot.
+Si responde, ¡significa que estás listo!
+
+## Depuración de tu bot
+
+Para propósitos de prueba y depuración, puedes ejecutar un servidor de desarrollo local o remoto antes de desplegar tu bot en producción.
+Simplemente ejecuta el siguiente comando:
+
+```sh
+npm run start
+```
+
+Una vez iniciado el servidor de desarrollo, puedes probar tu bot enviándole actualizaciones de ejemplo utilizando herramientas como `curl`, [Insomnia](https://insomnia.rest), o [Postman](https://postman.com).
+Consulta [aquí](https://core.telegram.org/bots/webhooks#testing-your-bot-with-updates) para ver ejemplos de actualizaciones y [aquí](https://core.telegram.org/bots/api#update) para obtener más información sobre la estructura de actualizaciones.
diff --git a/site/docs/es/hosting/cloudflare-workers.md b/site/docs/es/hosting/cloudflare-workers.md
@@ -3,97 +3,114 @@ prev: false
 next: false
 ---
 
-# Alojamiento: Cloudflare Workers
+# Alojamiento: Cloudflare Workers (Deno)
 
-[Cloudflare Workers](https://workers.cloudflare.com/) es una plataforma pública de computación sin servidor que ofrece una solución conveniente y simple para ejecutar JavaScript en el [edge](https://en.wikipedia.org/wiki/Edge_computing).
-Al tener la capacidad de manejar tráfico HTTP y estar basada en la [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), construir bots para Telegram se convierte en algo muy sencillo.
-Además, puedes incluso desarrollar [Web Apps](https://core.telegram.org/bots/webapps) en el edge, todo gratis dentro de ciertas cuotas.
+[Cloudflare Workers](https://workers.cloudflare.com) es una plataforma pública de computación sin servidor que ofrece una solución cómoda y sencilla para ejecutar pequeñas cargas de trabajo en el [edge](https://en.wikipedia.org/wiki/Edge_computing).
 
-Esta guía te llevará a través del proceso de alojar tus bots de Telegram en Cloudflare Workers.
+Esta guía te llevará a través del proceso de alojar tu bot en Cloudflare Workers.
+
+::: tip ¿Buscas la versión de Node.js?
+Este tutorial explica cómo implementar un bot de Telegram en Cloudflare Workers usando Deno.
+Si estás buscando la versión Node.js, por favor consulta [este tutorial](./cloudflare-workers-nodejs) en su lugar.
+:::
 
 ## Requisitos previos
 
 Para seguir adelante, por favor asegúrese de que tiene una [cuenta de Cloudflare](https://dash.cloudflare.com/login) con su subdominio de workers [configurado](https://dash.cloudflare.com/?account=workers).
 
-## Configuración
-
-En primer lugar, crea un nuevo proyecto:
-
-```sh
-npx wrangler generate my-bot
-```
+## Puesta a punto
 
-Puedes cambiar `my-bot` por lo que quieras.
-Este será el nombre de tu bot y el directorio del proyecto.
+Asegúrate de tener instalados [Deno](https://deno.land) y [Denoflare](https://denoflare.dev).
 
-Después de ejecutar el comando anterior, sigue las instrucciones que veas para inicializar el proyecto.
-Allí, puedes elegir entre JavaScript o TypeScript.
+Cree un nuevo directorio, y cree un nuevo archivo `.denoflare` en ese directorio.
+Ponga el siguiente contenido en el archivo:
 
-Cuando el proyecto esté inicializado, `cd` en `my-bot` o en el directorio en el que hayas inicializado tu proyecto.
-Dependiendo de cómo inicializaste el proyecto, deberías ver una estructura de archivos similar a la siguiente:
+> Nota: La clave "$schema" en el siguiente código JSON especifica una versión fija en su URL ("v0.5.12").
+> En el momento de escribir esto, esta era la última versión disponible.
+> Debería actualizarlos a la [versión más reciente](https://github.com/skymethod/denoflare/releases).
 
-```asciiart:no-line-numbers
-.
-├── node_modules
-├── package.json
-├── package-lock.json
-├── src
-│   ├── index.js
-│   └── index.test.js
-└── wrangler.toml
+```json{2,9,17-18}
+{
+  "$schema": "https://raw.githubusercontent.com/skymethod/denoflare/v0.5.12/common/config.schema.json",
+  "scripts": {
+    "my-bot": {
+      "path": "bot.ts",
+      "localPort": 3030,
+      "bindings": {
+        "BOT_TOKEN": {
+          "value": "YOUR_BOT_TOKEN"
+        }
+      },
+      "workersDev": true
+    }
+  },
+  "profiles": {
+    "account1": {
+      "accountId": "YOUR_ACCOUNT_ID",
+      "apiToken": "YOUR_API_TOKEN"
+    }
+  }
+}
 ```
 
-A continuación, instala `grammy`, y otros paquetes que puedas necesitar:
-
-```sh
-npm install grammy
-```
+Asegúrate de reemplazar `YOUR_ACCOUNT_ID`, `YOUR_API_TOKEN`, y `YOUR_BOT_TOKEN` apropiadamente.
+Al crear su token de API, puede elegir el preajuste "Editar Cloudflare Workers" de los permisos preconfigurados.
 
 ## Creando tu Bot
 
-Edita `src/index.js` o `src/index.ts`, y escribe este código dentro:
+Crea un nuevo fichero llamado `bot.ts` y pon en él el siguiente contenido:
 
 ```ts
-// Ten en cuenta que estamos importando de 'grammy/web', no de 'grammy'.
-import { Bot, webhookCallback } from "grammy/web";
+import { Bot, webhookCallback } from "https://deno.land/x/grammy/mod.ts";
+import { UserFromGetMe } from "https://deno.land/x/grammy/types.ts";
 
-// La siguiente línea de código asume que ha configurado los secretos BOT_TOKEN y BOT_INFO.
-// Ver https://developers.cloudflare.com/workers/platform/environment-variables/#secrets-on-deployed-workers.
-// El BOT_INFO se obtiene de bot.api.getMe().
-const bot = new Bot(BOT_TOKEN, { botInfo: BOT_INFO });
+interface Environment {
+  BOT_TOKEN: string;
+}
 
-bot.command("start", async (ctx) => {
-  await ctx.reply("¡Hola, mundo!");
-});
+let botInfo: UserFromGetMe | undefined = undefined;
 
-addEventListener("fetch", webhookCallback(bot, "cloudflare"));
-```
+export default {
+  async fetch(request: Request, env: Environment) {
+    try {
+      const bot = new Bot(env.BOT_TOKEN, { botInfo });
 
-El bot de ejemplo anterior responde "¡Hola, mundo!" cuando recibe `/start`.
+      if (botInfo === undefined) {
+        await bot.init();
+        botInfo = bot.botInfo;
+      }
 
-## Desplegando tu Bot
+      bot.command("start", (ctx) => ctx.reply("¡Bienvenido! En marcha."));
+      bot.on("message", (ctx) => ctx.reply("¡Recibí otro mensaje!"));
 
-Antes de desplegar, necesitamos editar `wrangler.toml`:
+      const cb = webhookCallback(bot, "cloudflare-mod");
 
-```toml
-account_id = 'your account_id' # Obtén esto del dashboard de Cloudflare.
-name = 'my-bot' # El nombre de tu bot, que aparecerá en la URL del webhook, por ejemplo: https://my-bot.my-subdomain.workers.dev
-main = "src/index.js" # El archivo de entrada del worker.
-compatibility_date = "2023-01-16"
+      return await cb(request);
+    } catch (e) {
+      return new Response(e.message);
+    }
+  },
+};
 ```
 
-A continuación, puede desplegar utilizando el siguiente comando:
+## Desplegando tu Bot
+
+Es tan fácil como correr:
 
 ```sh
-npm run deploy
+denoflare push my-bot
 ```
 
+La salida del comando anterior le proporcionará el host en el que se está ejecutando el trabajador.
+Busca una línea que contenga algo como `<MY_BOT>.<MY_SUBDOMAIN>.workers.dev`.
+Ese es el host donde tu bot está esperando a ser llamado.
+
 ## Configurando tu Webhook
 
 Necesitamos decirle a Telegram a dónde enviar las actualizaciones.
 Abre tu navegador y visita esta URL:
 
-```txt
+```text
 https://api.telegram.org/bot<BOT_TOKEN>/setWebhook?url=https://<MY_BOT>.<MY_SUBDOMAIN>.workers.dev/
 ```
 
@@ -119,7 +136,7 @@ Para propósitos de prueba y depuración, puedes ejecutar un servidor de desarro
 Simplemente ejecuta el siguiente comando:
 
 ```sh
-npm run start
+denoflare serve my-bot
 ```
 
 Una vez que el servidor de desarrollo se haya iniciado, puedes probar tu bot enviándole actualizaciones de ejemplo utilizando herramientas como `curl`, [Insomnia](https://insomnia.rest), o [Postman](https://postman.com).