B4J Tutorial [Web] Beginning Telegram Mini Apps with BANano

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!

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.




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

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