从0到1开发Telegram mini app

前言

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

准备阶段

工欲善其事必先利其器：

下载Telegram
注册Telegram账号

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

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

初始化

创建项目流程

bash 复制代码

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

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

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

方法1:

利用mkcert和local-ssl-proxy配合使用生成https链接

mkcert.exe生成本地的CA

local-ssl-proxy代理工具
以window为例子

步骤如下：

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

perl 复制代码

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

方法2

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

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

bash 复制代码

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

方法3

利用内网穿透方法frp

本地开发调试

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

yaml 复制代码

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

Telegram使用的常用指令

BotFather常用指令

bash 复制代码

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