Key Takeaways

• TON emphasizes scalability and speed, enabling DApps that can handle massive numbers of users and transactions.

• Developers can leverage TON's unique capabilities and a growing ecosystem to build innovative, decentralized solutions.

Why Build Mini Apps on TON?

Choosing the right platform for your decentralized application (dApp) is a critical decision. While Ethereum has long been the dominant player in the dApp space, its scalability limitations and high gas fees have led many developers to explore alternative platforms. TON (The Open Network), with its unique advantages, offers a compelling alternative, especially for those looking to build mini-apps within the Telegram ecosystem.

Telegram Mini Apps is an open platform that allows Web3 businesses to deploy crypto-friendly apps directly within Telegram. 

Compared to Ethereum dApps, TON mini-apps boast several key advantages that can translate to a significant potential upside for your project.

Table of comparisons (as of June 3rd, 2024):

First and foremost, TON's integration with Telegram provides instant access to a massive user base of over 800 million active users. This means your mini-app can reach a vast audience without requiring users to download additional software or create new accounts. Secondly, TON's architecture is designed for speed and scalability, offering near-instantaneous transaction speeds and incredibly low fees, making it ideal for microtransactions and high-frequency use. Finally, the development process for TON mini-apps is more accessible, leveraging familiar web technologies and a growing ecosystem of developer tools.

TON Network Key Insights (as of June 3, 2024):

As the tables and charts show, TON is a rapidly growing blockchain platform with a large and active user base. Its high transaction speed, low fees, and scalability make it an attractive option for developers and users alike. The growing number of Mini Apps on the platform is a testament to its potential for innovation and disruption in Web3 space.

For developers seeking a platform that combines ease of use, scalability, low costs, and a massive potential user base, TON stands out as an excellent choice. It's a platform that empowers you to focus on building innovative and engaging mini-apps that seamlessly integrate with the familiar Telegram environment, opening up a world of possibilities in the Web3 landscape.

Decentralized Apps on TON, Ethereum & Solana:

If TON's speed, scalability, and massive user base has sparked your interest, you're in the right place. The following step-by-step guide will equip you with the knowledge and tools necessary to create your own TON mini-app. 

Whether you're a seasoned web developer or a newcomer to the blockchain space, this guide will walk you through the entire development process, from setting up your environment to deploying your mini-app on the TON mainnet. 

Let's dive in and unlock the potential of Telegram's thriving ecosystem.

How to Build a Telegram Mini Apps (TMA)

The first step in building any application is gathering the right tools. Here's what you'll need to create your TON Mini App:

1. Vite: This build tool is the star of the show. It's designed for modern web development and makes the process faster and smoother. It's like having a super-efficient assistant that handles all the background tasks so you can focus on coding your app's features.

2. Git: This version control system is like a time machine for your code. It lets you track changes, collaborate with others, and revert to previous versions if needed. It's essential for any software development project, especially if you're working with a team.

3. Node.js and npm (or yarn): Node.js is a JavaScript runtime that lets you run JavaScript code outside of a web browser. npm (or yarn) is a package manager that helps you install and manage the libraries and tools your project needs. Think of them as your toolbox, filled with all the little bits and pieces you need to build your app.

4. @twa-dev/sdk: This is the official TON Web Apps SDK, a set of tools and libraries specifically designed for building TON mini-apps. It's like a translator that helps your app understand and interact with the TON blockchain.

5. Code Editor: Choose your favorite code editor (e.g., Visual Studio Code, Atom, Sublime Text). This is where you'll write and edit your code, so pick one that feels comfortable and productive for you.

6. Vercel, Netlify or others: This platform will host your mini-app online, making it accessible to Telegram users. It's like renting a storefront for your app where everyone can see and interact with it.

TokenMinds TMA Example

We will utilize Vite to create a Telegram Mini App example. Vite (which means "fast" in French) is a front-end build tool and development server that aims to provide a faster and leaner development experience for modern web projects. 

You can find an example project from the TokenMinds repository here https://github.com/TokenMinds-co/tokenminds-tma.git or you can go through the following instructions.

Prerequisites

Before we proceed on the development. You need to have the following prerequisites.

1. Git - You can download it here

2. NodeJS - You can download it here

Follow the instructions on their website to install and setup Git and NodeJs

Instructions

1. Create the app from scratch using package manager or simply clone TokenMinds example template for the Telegram Mini App.

   1. From scratch:

      Using npm

      $ npm create vite@latest your-project-name

      
      

      Using yarn

      $ yarn create vite your-project-name
      
      

   2. From TokenMinds template

      $ git clone https://github.com/TokenMinds-co/tokenminds-tma.git 

   
   

2. Navigate to the project by using the cd command

   $ cd your-project-name
   
   

3. We need to install the dependencies,

   Using npm

   $ npm install

   
   

   Using yarn

   $ yarn install

   
   

4. And now we are going to add @twa-dev/sdk. The @twa-dev/sdk package allows to work with SDK as with an npm package and with TypeScript support.

   Using npm

   $ npm install @twa-dev/sdk

   
   

   Using yarn

   $ yarn add @twa-dev/sdk

   
   

5. Open /src/main.tsx file and add following:

   import WebApp from '@twa-dev/sdk'

WebApp.ready();

   
   

   WebApp.ready() - is a method that informs the Telegram app that the Mini App is ready to be displayed. It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Mini App is shown.

   
   

6. Open src/App.jsx and add the following code

   import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://tokenminds.co" target="_blank">
          <img
            src={`https://framerusercontent.com/images/7Fjd4JhBn4XdPoBAztnI31U.webp`}
            className="logo"
            alt="Tokenminds logo"
          />
        </a>
      </div>
      <h1>My First Telegram Mini App</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <p>
          Click{" "}
          <a href="https://docs.ton.org/develop/dapps/telegram-apps/app-examples"
            target="_blank"
          >
            here
          </a>{" "}
          to learn more.
        </p>
      </div>
    </>
  );
}

export default App;

   
   

7. Now to see if our app is working we can run it locally by running this command

   $ npm run dev

   
   

   Your app should look like this if it's working correctly. If you encounter an error go through again the steps above and check, you might’ve missed some steps

   

   
   

8. Now that your app is working correctly, commit and push it in your github repository and then we can proceed on the next steps

Deploying to Vercel

In order for our app to be available in the telegram, we first need to deploy it to the web. To deploy it, we will use Vercel for fast and easy deployment

1. Go to the vercel website and login using your Github account to easily import your project

   

2. Create a new project

   

3. Select your project

   

4. Rename the project if you want and then click deploy

   

5. Wait for it to finish building the project, and voila your app is up and running. You can click one of the domains to visit your application

   

Setting up a Bot for the App

To connect your Mini App to the Telegram, you need to create a bot and set up a Mini App for it. Follow these steps to set up a new Telegram bot:

1. Start a Chat with BotFather​

• Open the Telegram app or web version.

• Search for @BotFather in the search bar or follow this link.

• Start a chat with BotFather by clicking on the START button.

2. Create a New Bot​

• Send /newbot command to BotFather.

• BotFather will ask you to choose a name for your bot. This is a display name and can contain spaces.

• Next, you'll be asked to choose a username for your bot. This must end in bot (e.g., sample_bot) and be unique.

3. Set Up Bot Mini App​

• Send /mybots command to BotFather.

• Choose your bot from the list and the Bot settings option

• Choose Menu button option

• Choose Configure menu button option and send URL to your Telegram Mini App, for example link from GitHub Pages deploy.

4. Accessing the Bot​

• You can now search for your bot using its username in Telegram's search bar.

• Press the button next to attach picker to launch your Telegram Mini App in messenger

• You’re awesome!

Congratulations on building your first Telegram Mini App (TMA)! Now that you have a working prototype, the next steps involve refining, testing, and launching it to reach a wider audience within the Telegram ecosystem. Here's what you should focus on:

1. Refine and Enhance

   • User Experience (UX): Gather feedback from early users or testers to identify any friction points or areas for improvement in the user experience. Optimize navigation, simplify interactions, and ensure your TMA is intuitive and enjoyable to use.

   • Functionality: Expand the functionality of your TMA by adding new features or capabilities. Consider integrating with other Telegram features, such as bots or channels, to enhance the overall experience.

   • Performance: Optimize your code and assets to ensure your TMA loads quickly and performs smoothly, even on slower connections.

2. Thorough Testing

   • Test on Different Devices: Ensure your TMA works flawlessly across different devices and operating systems (iOS, Android, web). Test on various screen sizes and resolutions to guarantee a consistent experience for all users.

   • Security Audit (if applicable): If your TMA involves sensitive data or financial transactions, consider conducting a security audit to identify and address any potential vulnerabilities.

   • User Testing: Gather feedback from a broader audience to identify any usability issues, bugs, or areas for improvement.

3. Launch and Promotion

   • Create a Telegram Bot: If you haven't already, create a Telegram bot to interact with your TMA. This will allow users to access your app directly through the bot's interface.

   • Submit to Telegram: Submit your TMA to the official Telegram Mini Apps platform for review and approval. This will make your app discoverable to Telegram users.

   • Promote Your TMA: Spread the word about your mini-app through various channels, such as social media, Telegram groups and channels, and crypto communities. Consider partnering with influencers or running targeted ad campaigns to reach a wider audience.

4. Post-Launch Maintenance and Growth

   • Monitor Performance: Track key metrics like user engagement, retention, and conversion rates to assess the success of your TMA. Use analytics tools to gain insights into user behavior and identify areas for improvement.

   • Iterate and Update: Continuously update and improve your TMA based on user feedback and data analysis. Add new features, fix bugs, and optimize performance to keep users engaged.

   • Community Building: Foster a community around your TMA by creating dedicated Telegram groups or channels where users can interact, share feedback, and get support. Actively engage with your community to build a loyal following.

Additional Tips:

• Monetization Strategies: Explore different monetization options for your TMA, such as in-app purchases, subscriptions, or advertising.

• Collaborate with Other Developers: Partner with other developers or projects to cross-promote your TMA and reach a wider audience.

• Stay Updated with TON Ecosystem: Keep up with the latest developments and updates in the TON ecosystem to leverage new features and tools.

By following these steps and continuously improving your TMA, you can create a successful and impactful application that thrives within the Telegram ecosystem. The combination of Telegram's vast user base and TON's cutting-edge technology opens up a world of possibilities for your Web3 venture.

Conclusion

The TON blockchain offers a compelling platform for developers seeking to build scalable, high-performance decentralized applications. With its emphasis on speed and capacity, TON is poised to unlock DApps that might struggle on more congested blockchains. Its focus on user experience and evolving developer tooling create a fertile environment for DApp innovation.

If the potential of harnessing TON's strengths has ignited your interest, consider partnering with a Web3 Consulting company like TokenMinds. Our blockchain development experience, combined with our passion for creating real-world App solutions, aligns perfectly with the ambitions of the TON project itself. Let us guide you on your journey towards building the next generation of Mini applications on the Telegram ecosystem.