Back

How to Develop and Deploy a Telegram Mini-App on the Internet Computer: A Step-by-Step Guide

November 8, 2024

How to Develop and Deploy a Telegram Mini-App on the Internet Computer: A Step-by-Step Guide

Integrating Telegram mini-apps with the Internet Computer Protocol (ICP) is a powerful way to enhance decentralized applications (dApps) with messaging-based functionality. Whether you want to leverage Telegram’s vast user base to improve communication for your dApp or enhance community governance and engagement, this guide will walk you through the process of building, deploying, and linking a Telegram mini-app to an ICP-based project.


What is a Telegram Mini-App?

Telegram mini-apps are lightweight web apps built with JavaScript and integrated directly into the Telegram messenger. These apps run inside Telegram’s interface, providing users with seamless interactivity without leaving the app. For developers working on decentralized applications on the ICP, integrating these mini-apps can offer a flexible, user-friendly method for enhancing interactivity and services within the Telegram ecosystem.

Key Features of Telegram Mini Apps:

  1. Integration with Telegram Bots: Mini apps can be tied to bots, which act as the interface for users to access the app.
  2. Embedded in Telegram UI: Users can interact with the mini app directly within the Telegram chat, without needing to switch to a browser.
  3. Customizable UI: Developers can design the mini app’s interface to fit their needs, offering a personalized user experience.
  4. Seamless Interaction: Mini apps can retrieve user data (with permission) from Telegram, making it easy to build customized or personalized features.
  5. Real-time updates: Mini apps can provide dynamic updates and interactive experiences such as polls, quizzes, or service dashboards.
  6. Secure communication: Telegram ensures secure transmission of data between the bot and mini-apps, providing a trusted platform for interaction.

Why Integrate Telegram Mini-Apps with ICP?

The Internet Computer, a decentralized cloud computing platform, allows for building scalable and secure dApps. By integrating Telegram mini-apps with ICP projects, developers can:

  • Reach millions of Telegram users.
  • Enable direct communication with dApp users.
  • Enhance decentralized governance through interactive community tools.
  • Use Telegram’s bots to automate dApp services like notifications, user support, and voting.


Before You Begin Your Journey, ensure you have the following:

  • A working knowledge of JavaScript, HTML, and CSS.
  • Basic understanding of how the Internet Computer works, including knowledge of canisters (smart contracts).
  • An existing Telegram bot (you can create one via BotFather on Telegram).
  • DFX SDK installed for deploying to ICP.


Step 1: Set Up Your Telegram Bot

First, create a bot to act as the interface for your mini-app:

  1. Create a Telegram Bot: Use BotFather to create a new bot:
    • Start a conversation with BotFather.
    • Use /newbot to create your bot, and follow the prompts to give it a name and username.
    • Once your bot is created, BotFather will give you a token that you’ll need to communicate with Telegram’s API.


  1. Enable WebApp Mode: Telegram mini-apps run through the WebApp mode, which allows your bot to open a web app within Telegram’s interface. To enable this mode:
    • In BotFather, use the /setdomain command to set the domain for your web app.
    • Set your web_app object in your bot’s configuration. You’ll include this in the bot’s keyboard, which allows users to launch the mini-app.


Step 2: Build Your Telegram Mini-App

Now that your bot is set up, let’s build the mini-app. This mini-app will consist of a simple front-end interface that interacts with ICP-based services.

  1. Create the Project Structure: Set up a basic web app structure with HTML, JavaScript, and CSS files. The structure might look something like this:

CSS

/telegram-mini-app/

├── index.html

├── styles.css

└── app.js

  1. Develop the User Interface (UI): Your index.html will contain the basic structure for your mini-app. Here’s a simple example: HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Telegram Mini-App</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Welcome to ICP-powered Mini-App</h1>

<button id="connect">Connect to ICP</button>

<div id="status"></div>

<script src="app.js"></script>

</body>

</html>

  1. Write the JavaScript Logic: In app.js, you’ll connect the mini-app to Telegram’s API and prepare it to interact with the ICP backend: Javascript

// Telegram WebApp API

let tg = window.Telegram.WebApp;

// Event listener for connect button

document.getElementById('connect').addEventListener('click', async () => {

// Check if Telegram WebApp is ready

if (tg.initDataUnsafe) {

document.getElementById('status').innerHTML = "Connecting to ICP...";

// Call an ICP service (interacting with a smart contract)

const response = await fetch('https://<ICP_CANISTER_URL>/api/connect', {

method: 'POST',

body: JSON.stringify({ telegram_id: tg.initDataUnsafe.user.id }),

});

const result = await response.json();

if (result.success) {

document.getElementById('status').innerHTML = "Connected successfully!";

} else {

document.getElementById('status').innerHTML = "Connection failed!";

}

}

});


Step 3: Deploy Your Mini-App to the Internet Computer

Once the front-end for the mini-app is ready, you need to deploy your code on ICP. This requires packaging the app and deploying it as a canister.

  1. Initialize the ICP ProjectIn your terminal, run the following command to initialize a new DFX project: dfx new telegram_mini_app

This will create the necessary files and directories for your ICP project.

  1. Move the Mini-App to the Frontend Directory: Copy your index.html, app.js, and styles.css files into the src/telegram_mini_app/assets/ directory.
  2. Configure the DFX Project: Edit the dfx.json file to point to your frontend assets. For example: JSON

{

"canisters": {

"telegram_mini_app": {

"frontend": {

"entrypoint": "src/telegram_mini_app/assets/index.html"

}

}

}

}

  1. Deploy the Canister: To deploy your mini-app to the Internet Computer, run the following commands:

dfx start --background

dfx deploy

This will deploy your canister and provide you with a URL to access your mini-app.


Step 4: Integrate Telegram Mini-App with ICP

To connect your deployed mini-app to Telegram, use your Telegram bot token to update the bot’s configuration. When the user clicks on the mini-app in Telegram, it will now interact with the backend services running on ICP.

  1. Set Up Bot Interaction: In your bot’s settings, update the inline keyboard to launch the mini-app:

{

"keyboard": [

[

{

"text": "Open Mini-App",

"web_app": {

"url": "https://<YOUR_ICP_CANISTER_URL>"

}

}

]

]

}

  1. Test the Integration: Launch Telegram and start interacting with your bot. Click on the "Open Mini-App" button to load your ICP-hosted web app directly in Telegram’s interface.

Conclusion

The combination of Telegram’s communication power and ICP’s decentralized infrastructure offers a powerful way to engage users and scale decentralized services. When these steps are followed, you’ve successfully developed, deployed, and integrated a Telegram mini-app with an Internet Computer-based dApp. Whether you're enhancing community interactions, building governance tools, or developing decentralized finance solutions, Telegram mini-apps paired with ICP open up exciting possibilities for developers.



Article by: Mana Lamja