前言

写此篇文章的目的主要是记录一下在开发TG小程序的过程中遇到的问题以及解决方法，其二梳理一下整个TG小程序开发的流程，我个人认为TG小程序和H5网页没有太大的区别，TG在telegram上运行的H5网页。此篇文章不对代码层面的问题探究，只是对开发流程的梳理。

准备阶段

工欲善其事必先利其器：

1. 下载Telegram
2. 注册Telegram账号

关于怎么下载和注册的问题

• 如何下载Telegram<br> 可以在google商店下载（使用梯子就能解决）
• 注册时可能存在+86的手机号接受不到验证码<br> 解决方法<br/>我是在油管上看到一个up主的视频，解决接受不到验证码。<br> 步骤<br/>首先你要分别下载两个软件Telegram和Telegram X，先注册个TelegramX的账号，然后通过TelegramX接受验证码，从而在Telegarm上注册，验证码可以在Telegram X的邮箱信息中查看<br> 详细处理教程的方法视频

  初始化

  创建项目流程

  # 创建一个React项目
  npx create-react-app tg-dex//tg-dex项目名
  # 下载对应的包
  # TWA sdk
  npm install @twa-dev/sdk
  # tailwindcss
  npm install -D tailwindcss
  npx tailwindcss init
  # 状态管理工具（redux ）
  npm install @reduxjs/toolkit react-redux
  # 路由
  # 与合约交互的库（web3js或ethersjs）
  # wagmi React hook的一个库，包含和合约交互的一切。
  # 钱包的一些插件（Web3Modal）
  # Web3-react：React应用的开源库，DApp的开发更加容易
  # UI库
  # 其他的一些库....

  项目添加到Telegram步骤

• 打开BotFather
• 输入/newbot
• 按照对话填写机器人的名称<br> 例如：tgdex//随便取只要不重名
• 按照对话填写 机器人的名字，以bot结尾<br> 例如：tgdex1012_bot
• 机器人创建成功，会生成一个Http API的hash，保存好
• 接下来填写app的相关资料
• 输入/newapp
• 按照对话填写机器人的名称<br> 例如：@tgdex1012_bot
• 按照对话填写app的标题<br> 例如 tgdex1012miniapp
• 按照对话填写app的描述<br> A dex type telegram mini app
• *按照对话上传图片大小640360**
• 按照对话输入/empty<br> /empty
• 按照对话填写app的url<br> 例如：https://127.0.0.1:9001/ 说明：需要输入一个htts开头的链接，此步骤也是重中重，关乎到我们本地运行的代码，在telegram上运行预览和调试的关键。（重难点）
• 按照对话填写app应用名称 例如：tgdex
• 创建完毕<br> 生成一个链接

  解决本地项目添加到Telegram重难点

  把本地项目链接生成https开头的链接<br>

  方法1:

  利用mkcert和local-ssl-proxy配合使用生成https链接 <br> mkcert.exe生成本地的CA<br> local-ssl-proxy代理工具<br> 以window为例子<br> 步骤如下：<br>

  1. 找到对应的mkcert安装包下载到本地
  2. 把下载后的文件放到桌面
  3. 设置设置mkcert为本地CA cmd 打开控制台把软件拖到cmd窗口中， 后面加 -install 点击回车
  4. cmd 打开控制台把软件拖到cmd窗口中， 后面加 127.0.0.1 localhost 点击回车 会有一个弹窗选择是的选项，就生成了证书。

5. 下载local-ssl-proxy包成功之后
6. 执行指令命令

   # 说明：把本地端口号为3000的代理为https://127.0.0.1:9001/
   local-ssl-proxy --source 9001 --target 3000
   # 把链接导入到telegram中
   https://127.0.0.1:9001/

方法2

利用ngrok工具生成https<br> 优点：简单快捷<br> 缺点：免费版的一个月只能生成一个链接，链接生成限制<br> 步骤：<br>

1. 下载ngrok安装包
2. 解压此文件
3. 并在此文件夹下打开cmd
4. 执行以下命令

   # 说明 把本地端口为3000的项目生成一个https的链接
   ngrok http 3000
   or
   ngrok http http://localhost:3000

   方法3

   利用内网穿透方法frp

本地开发调试

BotFather生成的链接放到创建的机器中打开预览调试

# 启动本地项目
npm start
# 启动代理
 local-ssl-proxy --source 9001 --target 3000
#会生成一个https://127.0.0.1:9001
#在对应的机器人里点开链接预览调试

Telegram使用的常用指令

BotFather常用指令

# 关于bot相关信息查看和修改
/mybots
#关于app相关信息查看和修改
/myapps