Build an e-commerce telegram web app bot? – Telegram 简体版Telegram中文官网下载

Haley

Build an e-commerce telegram web app bot?

After version 6 Telegram web app bot features came to life. And in this post, I will teach you how to get started with them.

Let’s get started!

Connect:

Go to Botfather and create a new bot, give it a name and a username. You may customize it more according to your needs I will use a minimal approach.

  1. send command /mybots
  2. select your bot that you plan to connect to the web app.
  3. select Bot Settings.
  4. select Domain and provide the domain in which your web app will be launched, HTTPS is a must.

importantly: if you don’t have yet the domain you may come to this step at last as well if you do not have a domain yet and have plans to host your app on GitHub pages, netlify, vercel, or so on.

More important by far is that Here we are using the simplistic approach to launch a web app but there are at least three ways now to launch and how you launch your web app is important when data transferring between a web app and a bot.
I will leave the differences at the bottom! For now, let’s have fun and do some exciting parts as a JS developer :):(:. Using HTML, CSS and JavaScript, even React.

Initialize:

In order to connect your Web App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

Inside normal JS script now we can access window.Telegram.WebApp, for more info, use this link.

As I mentioned above that how we launch our bot affects the way data is transferred, now we can see one of the outcomes which is that WebApp.initData string with raw data transferred to the Web App, convenient for validating data is transferred to the app. only when launched via the menu button, which we used initially. Telegram Web App initData sample.

You also have access to many more features and information via WebApp, e.g. colorScheme, mainButton, themeParams, onEvent, sendData ……….. more.

Here I will leave you alone giving you the opportunity to showcase your HTML, and CSS shopping card building skills and meet with you on your journey to JS.

Data Transfer:

Ooh, how fun was it? now, let’s add some intelligence (a brain) to our freshly baked humanoid with a beautiful body.

Durger king bot from the telegram web app bot example

Durger King, Telegram’s web app bot example. Hopefully, you have designed your app something like this, and it’s never late to customize it, go ahead. Telegram Web App mainButton sample.

Before:

Before we do any data transfer, let’s understand what has been emphasized so far about how we launch our web apps.

  1. When you launch your app via the menu button which we are using currently, as I emphasized earlier, you will get an initData from telegram to the web app, and when you want to send back data to your telegram bot server, e.g. user selected some of your products and want to go on purchasing. so when the user hits the order button, you cannot use WebApp.sendData(someData) feature which I will work only with via keyboard launched apps, but you may have to use the answerWebAppQuery feature in our case.
  2. When you launch your app via the inline button, it also works the same way as the menu button.
  3. When you launch your app via the keyboard button! you can send data back to the bot in a service message using Telegram.WebApp.sendData. This makes it possible for the bot to produce a response without communicating with any external servers. Also, you do not get initData.

In our case, we need to send data via answerWebAppQuery, without any servers, using the bot API: https://api.telegram.org/${yourBotToken}/answerWebAppQuery, options.
You will need query_id from initData to send data using this approach.

Payment Integration:

Payment integration is also easy and fun with telegram bots but you need to have a server handling user interaction. You can use any backend language for that, but I teach it using JavaScript if you wish to learn it, feel free to contact me.

There might be some unclear parts for you, as this is my first blog post, but I wish to improve more and appreciate your feedback and support, I will also edit this post constantly as web_app bots are a new thing right now and the Telegram team is working on improving it constantly. Follow me for more updates. I am preparing a crash course on this which will be available on YouTube soon, stay tuned.

t.me/jakhongir_abdukhamidov

ijakhongir.uz


Ten articles before and after

如何下载Telegram电报?

1. 在各大应用商店都可以下载Telegram电报;

2.直接从Telegram官网上下载适用于你设备的APP客户端

网址: https://telegram.org/

需要注意的是:我们在国内可能在Apple Store中找不到Telegram APP。我们需要做的是注册一个美国Apple ID账号,然后再去Apple Store美国区下载Telegram APP。

Ten articles before and after

19:27 Time | Conversion and Information | – Telegram 繁体版 下载

MP3Louder線上修改MP3音樂的音量大小,把聲音調更大聲或調小聲。

[下載] Windows 10 繁體、簡體中文版 ISO 檔,免費升級更新作業系統(32、64 位元)

線上FM收音機!在電腦聽台灣廣播電台,免安裝軟體~打開瀏覽器直接聽。

LINE 網頁版又回來了!打開瀏覽器就能跟好友聊天

Telegram迎来Payments 2.0支付服务、语音群聊预约功能和Web新版本 | – Telegram 简体版telegram中文网页版

Telegram 中国手机号收不到短信怎么办?(2022 更新) | – Telegram 简体版

telegram登录收不到短信验证码 | – Telegram 简体版

Telegram Bot 2: OCR. Python + AWS Lambda + AWS API Gateway – Telegram 简体版

7 Builders For No-Code Creation of Chatbots in Telegram – Telegram 简体版

About Me

Pretium lorem primis senectus habitasse lectus donec ultricies tortor adipiscing fusce morbi volutpat pellentesque consectetur risus curae malesuada dignissim lacus convallis massa mauris.