搜索
#tools 上的文章
#social 网络上的文章
关于#marketing 的文章
如何创建 Telegram 迷你应用程序？使用单位经济计算器的示例
文章作者：
伊戈尔·斯普加什
伊戈尔·斯普加什
用户体验设计师、前端开发人员
另请阅读：
白俄罗斯卖家在 Wildberry 和 Ozon 的工作条件比较
白俄罗斯卖家在 Wildberry 和 Ozon 的工作条件比较 市场
畅销文本：从 AIDA 到 PmPHS
畅销文本：从 AIDA 到 PmPHS 营销
如何在“Google 我的商家”中添加并填写您的公司
如何在“Google 我的商家”中添加并填写您的公司 搜索引擎优化
进行有效商务信函的 10 条规则
进行有效商务信函的 10 条规则 消息营销
什么是联属网站以及如何避免联属过滤器？
什么是联属网站以及如何避免联属过滤器？ 搜索引擎优化
在本文中，我们将了解如何创建 Telegram Mini 应用 越南电报数据库 程序，这是一个带有单位经济学计算器的单页应用程序 (SPA)。
让我们看看存储库的架构、在 GitHub Pages 上设置部署以及使用 Webpack 构建的功能。我们的项目将有两种计算模式（实际和预测），通过单独的 React 组件实现。我们使用 Webpack 管理程序集。我们将在 GitHub 存储库中发布代码，以提高透明度并易于版本控制。我们将最终产品集成到 Telegram 中。
.
什么是 Telegram 迷你应用程序？
Telegram Mini App 是一款通过特殊界面直接在 Telegram 中打开的应用程序，无需在设备上安装。通过这种方法，您可以快速方便地启动实用程序或在 Messenger 中与用户进行交互。开发人员需要一个最小的服务器环境，因为应用程序通常仅限于前端。
项目架构特点
1. 存储库结构
存储库结构
这种结构将代码清晰地划分为每种计算模式的独立组件，简化了资源管理，保证了项目维护和开发的便捷性。
2. 组件运行逻辑
许您切换应用程序模式，为每种模式提供计算。
Results.jsx 是一个独立组件，用于处理结果并将其显示在界面中。
使用 Webpack 构建
Webpack 用于组织模块化代码并将其转变为生产优化的 SPA 应用程序。
Webpack 配置包括：
入口点 -装配的主文件；
加载器 - 用于使用 JavaScript 和 CSS；
插件 - 用于处理 HTML 和 CSS；
DevServer 是本地开发服务器。
Webpack配置
部署到 GitHub 页面
为了在 GitHub Pages 上托管应用程序，我们使用 GitHub Actions 来自动部署。
准备存储库
在 GitHub 上创建存储库并将项目的源文件上传到其中。
设置 GitHub Actions
在存储库的根目录中创建文并配置自动部署
启动 Actions
每次提交和推送后，GitHub Actions 都会构建项目并自动将其部署到 GitHub Pages。
此后，该应用程序将可通过 URL 访问。在此阶段，您将能够打开它并共享链接。
例如，我们的应用程序可通过以下链接获取：
电报集成
要将迷你应用程序连接到 Telegram：
通过@BotFather注册您的机器人并接收 API 令牌。
在机器人设置中指定小部件 URL（链接到您的 GitHub 页面）。
结论
当整个过程（从组装到部署）实现自动化时，为 Telegram 创建迷你应用程序会变得简单而有效。 Webpack 优化前端代码，GitHub Pages 提供轻量级托管。要将应用程序集成到 Telegram 中，您只需在 Telegram Bot API 中指定已部署项目的 URL。