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


Useful Bots:


 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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,

WhatsApp Image 2024-07-24 at 02.01.22.jpeg


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.


WhatsApp Image 2024-07-24 at 02.05.04.jpeg


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.

WhatsApp Image 2024-07-24 at 02.07.41.jpeg


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!
 

Attachments

  • SithasoTelegramMiniApp.zip
    138 KB · Views: 107

Mashiane

Expert
Licensed User
Longtime User
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.

WhatsApp Image 2024-07-24 at 13.49.41.jpeg


B4X:
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.
 

Attachments

  • SithasoTelegramMiniApp.zip
    140 KB · Views: 92
Top