telegram mini APP或游戏开发之bot设置

无意中发现telegram上居然也能发布小程序和游戏了，感觉发现了新大陆一样，自己好玩试了下。
参考教程

要在telegram上开发一个mini App或者game，创建一个专属于你的机器人就必不可少了。

创建bot机器人

在telegram上搜索@BotFather或者点击该这里BotFather。
如下图：

进入对话框后，我们可以选择菜单-> /newbot。或者在输入栏直接输入/newbot来创建机器人，只需要根据它的回复一步一步操作就可以了。

创建miniApp或者game

创建好机器人后，再创建miniApp或者game,看你的个人需求。
方法和上面创建bot一样，给@BotFather发消息就行了。上面给出的参考教程中也有。

部署开发环境

这里的开发环境不是你的miniApp或者game的开发环境，而是用来对bot机器人的。这里可以用Node.js和Deno两种方式开发，我这里用的是Deno。
部署方法参考链接
Deno教程
剩下的看教程，这里不多说，直接说重点

机器人回复用户一个游戏

1、创建一个ts脚本，复制粘贴下面内容，注意:TOKEN和GAME_SHORT_NAME需要换成你自己的。

import {Bot} from "https://deno.land/x/grammy@v1.25.0/mod.ts";
const TOKEN = '';  // 这里填写你机器人的token
const GAME_SHORT_NAME = '';  // 这里填写你创建游戏的时候给它起的短名
// 创建一个 `Bot` 类的实例，并将你的 bot token 传给它。
const bot = new Bot(TOKEN); 

bot.command("start", async (ctx) => {
    await ctx.replyWithGame(GAME_SHORT_NAME)
});

bot.start(); // 启动机器人

2、打开终端，输入下面命令执行脚本

1	deno run --allow-net ts脚本.ts

3、回到tg，给你自己的机器人，注意，不是BotFather，是你自己创建的机器人，发送/start消息，这个时候你就会看到你的机器人给你回了一个游戏的对话框，如下图:
;
这个时候你会发现，你点击游戏下面的play按钮没有任何反应，这个时候我们需要在上面代码中给按钮添加回调事件。
4、给按钮添加回调
在上面脚本中加入下面代码：

const GAME_URL = "https://lengmo714.top";
bot.on("callback_query:game_short_name", async (ctx) => {
    console.log("ctx.callbackQuery.game_short_name = ",ctx.callbackQuery.game_short_name)
    if (ctx.callbackQuery.game_short_name === GAME_SHORT_NAME) {
        await ctx.answerCallbackQuery({ url: GAME_URL });
    }
});

保存代码后重新执行脚本，再给机器人发送/start,这个时候再点play按钮，你就会发现跳转到你自己提前准备好的游戏链接了。

机器人回复用户一个miniApp

1、创建一个ts脚本，复制粘贴下面内容，注意:TOKEN和跳转到mini app的链接需要换成你自己的。

import {Bot} from "https://deno.land/x/grammy@v1.25.0/mod.ts";

const TOKEN = '';

const bot = new Bot(TOKEN);

// 处理 "/start" 命令
bot.command("start", async (ctx) => {
    await ctx.reply(
        '<b>Hi!</b> <i>Welcome</i> to <a href="https://lengmo714.top">grammY</a>.',
        { parse_mode: "HTML" },
    )
});

bot.start();

2、打开终端，输入下面命令执行脚本

1	deno run --allow-net ts脚本.ts

3、回到tg，给你自己的机器人，注意，不是BotFather，是你自己创建的机器人，发送/start消息，这个时候你就会看到你的机器人给你回了一个miniapp的对话框，如下图:
;

4、点击打开应用，就会跳转到你之前设置好的mini app

添加内联按钮

比我们在发送/start，需要机器人回复我们一些可选的操作，这个时候我们可以在机器人的回复中添加几个选择按钮，这个就是内联按钮。
示例代码：

import {Bot,InlineKeyboard} from "https://deno.land/x/grammy@v1.25.0/mod.ts";

const TOKEN = '';

const bot = new Bot(TOKEN);

const keyboard = new InlineKeyboard().text("开始游戏1", "one").row()
                                    .text("开始游戏2", "two").row()
                                    .text("开始游戏3","three");
// 处理 "/start" 命令
bot.command("start", async (ctx) => {
    await ctx.reply("请选择你需要点击的按钮",{
        reply_markup: keyboard,
    })
});

bot.start();

运行脚本后出现如下图:

我们可以发现，这三个按钮时垂直排列，如果我们需要让这三个按钮排成一排，修改上面keyboard中的row()即可，如下代码

1
2
3

const keyboard = new InlineKeyboard().text("开始游戏1", "one")
                                    .text("开始游戏2", "two")
                                    .text("开始游戏3","three");

注意：这里的添加的按钮有好几种类型：.text、.game、.url、webApp目前我只用到这四种，可能还有其他的。

机器人回复的内容为图片+文字+按钮

今天在telegram上看见一个非常喜欢的回复，如下图，这是别人的。

是由一个gif动画+文字+三个按钮组成，而且还能获取到发送用户的id。感觉非常nice，于是自己也参考这个做了个类似的，代码如下：

import { Bot,InlineKeyboard } from "https://deno.land/x/grammy@v1.25.0/mod.ts";
const TOKEN = '';
const TELEGRAM_GAME_URL = 'https://lengmo714.top';
const bot = new Bot(TOKEN);

// 内联键盘，包含游戏按钮和访问网站按钮
const keyboard = new InlineKeyboard()
  .url("开始游戏1",TELEGRAM_GAME_URL).row()
  .url("开始游戏2",TELEGRAM_GAME_URL).row()
  .url("开始游戏3",TELEGRAM_GAME_URL);


// 处理 /start 命令
bot.command("start", async (ctx) => {
    console.log("ctx.update.message = ",ctx.update.message.from.first_name);
    const gifUrl = "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif";
    const caption = `Hi ${ctx.update.message.from.first_name}!\n\n给你带来一款非常好的游戏\n\n🎰 给你带来一款非常好的游戏\n\n💸 给你带来一款非常好的游戏\n\n🎁 给你带来一款非常好的游戏`;
  
    await ctx.replyWithAnimation(gifUrl, {
      caption: caption,
      reply_markup: keyboard,
    });
});
// 处理回调查询
bot.start(); // 启动机器人

最后运行如下图：

优化

从上图可以看到我们已经创建了3个内联按钮，但是按钮都是用的url方式，按钮的右上角是一个箭头的标识。这里用起来没有什么问题，但是和我找的参考不一样。人家按钮的右上角是两个窗口的标识，这里需要对按钮的类型就行修改就行了，代码如下:

const keyboard = new InlineKeyboard()
  .webApp("开始游戏", TELEGRAM_GAME_URL).row()
  .webApp("开始游戏", TELEGRAM_GAME_URL).row()
  .url("开始游戏", TELEGRAM_GAME_URL);

修改后就可以看到效果如下：

这才是我们最终想要的效果。