B4J Tutorial [Web] Beginning Telegram Mini Apps with BANano

Hi Fam

Demo

Source Code

Let's create some Telegram Mini Apps.

What is TMA?

These are apps that run inside Telegram. They use Bots to run.

Here we go...

Related Content

Telegram Mini Apps

With Mini Apps developers can use JavaScript to create infinitely flexible interfaces that can be launched right inside…

core.telegram.org

Useful Bots:

Relay

The simple relay for the miniapps

t.me

BotFather

BotFather is the one bot to rule them all. Use it to create new bot accounts and manage your existing bots.

t.me

 

[Mashiane]

Step 1

Here is the link to the Telegram Bot for this example, https://t.me/SithasoHoldingsBot

1. Link up your telegram web with your mobile device.

2. Visit, https://t.me/BotFather

3. Create a new bot by typing in /newbot <ENTER>

4. Type in the new username for your bot <ENTER>

5. This will give you a Telegram name for your bot, e.g https://t.me/SithasoHoldingsBot and also provide you a token.

6. Then list your bots with /mybots

7. Select your bot, it will start with @

8. Select "Bot Settings"

9. Select "Menu Button"

10. Update the button menu URL to be whatever URL of your webapp you have deployed, e.g. https://sithaso-tma.vercel.app/

11. Also update the "Menu Button" title to reflect what you need to see. I have set mine to be Sithaso Telegram Mini App. This appears at the bottom left of the screen as depicted below when I start my bot,

12. Clicking the Sithaso Telegram Mini App will activate the URL you previously specified inside Telegram. This will activate a bottom sheet that you can enlarge. When enlarged this show this screen.

13. I have not coded anything in this webapp as yet, but just added functionality for "mobile app console". The tool button at bottom right. If you click this, you see the console via the mobile device. This looks like this.

NB: This application was deployed to Laragon and then to GitHub and then the final version of what appears on the telegram bot on Vercel.

Remember, you can use any app URL you want to test with.

This example is just a demo of how you can have your webapp as a Telegram Mini App, to run inside Telegram.

Have fun!

 

[Mashiane]

Step 2: Trapping Main Button Click Events

In this step we add a click event to the MainButton. When clicked we need to show an alert.

PS: This alert is a built in component inside Telegram, no need to design it.

Sub MainButton_Click (e As BANanoEvent)
    Log("MainButton_Click")
    ta.WebApp.ShowAlert("Main Button Clicked")
End Sub

NB: This code is an update of the one in the previous post! We have separate concerns this time around.

 

[Mashiane]

Step 3: Developing the Actual Mini App UI

As Mini Apps just host websites / webapps, we have used SithasoDaisy for our example. We use the normal Signin / SignUp / Forgot Password screens for this.

Demo: https://t.me/SithasoHoldingsBot
Source Code in first post