Como Criar uma Miniaplicação no Telegram: Um Guia Passo a Passo

As miniaplicações do Telegram oferecem uma forma única para os clientes interagirem consigo através do seu mensageiro. Uma miniaplicação permite-lhe vender produtos, registar-se em serviços e responder a perguntas sem nunca sair da aplicação. As miniaplicações utilizam a tecnologia Web Apps e permitem que uma aplicação totalmente funcional seja criada rapidamente. Não precisa de saber programar para as usar, e existem várias ferramentas disponíveis que lhe permitirão criar uma miniaplicação sem escrever uma única linha de código. Para aqueles que têm interesse em programação ou procuram um método mais avançado de criação de miniaplicações, também pode usar tecnologias web padrão para escrever as suas próprias miniaplicações.

Este artigo explica passo a passo o que são as miniaplicações, como funcionam e como criar miniaplicações personalizadas do zero ou quase do zero.

"Nos últimos três anos, lançámos 43 miniaplicações usando a API do Telegram. Elas variam desde análises de criptomoedas até sistemas de gestão de subscrições. A solução mais interessante é que 80% das tarefas que tentamos resolver podem ser abordadas com uma combinação de um bot e uma interface web, sem a necessidade de uma infraestrutura complexa. Quando possível, mantenha o seu design simples com um único botão."

O que são as Miniaplicações do Telegram e Porquê são Usadas?

Uma miniaplicação do Telegram é uma página web alojada diretamente na aplicação Telegram. Os utilizadores podem aceder à miniaplicação clicando num botão de bot ou seguindo um link como tg://webapp, e uma interface completa da miniaplicação é exibida sem sair da aplicação Telegram. Em termos técnicos, uma Miniaplicação usa HTML, CSS e JavaScript padrão que são então exibidos no Telegram WebView. Os dados do utilizador, incluindo ID, idioma e tema, são recebidos pela aplicação através de um objeto window.Telegram.WebApp, enquanto a aplicação envia feedback para a Bot API, por exemplo — notificações de compra, resultados de inquéritos, etc.

Comparando Bots do Telegram versus Miniaplicações

O Bot é um servidor que reage aos comandos do utilizador, por exemplo; /start indica que o utilizador recebe um menu. O utilizador selecionou um botão e as respostas do Bot são texto ou imagens.

Uma Miniaplicação abrirá com uma interface interativa. Tem um catálogo com filtros; formulários para criar pedidos; preenchimento automático do endereço do utilizador (do perfil do Telegram); calculadoras de custos, etc. Tudo o que um utilizador encontra num website normal, mas dentro do Telegram.

Uma diferença fundamental entre um Bot e uma Miniaplicação é que um bot opera através de comandos, enquanto uma miniaplicação funciona como uma aplicação web do lado do cliente que envia/recebe através do Bot para o servidor.

Exemplos de Casos de Uso de Miniaplicações

E-Commerce: Uma loja de roupa cria uma miniaplicação dentro do Telegram que permite aos utilizadores encontrar, filtrar, adicionar ao carrinho de compras e comprar através do Telegram Payments. A taxa de conversão da loja aumentou 23% porque o utilizador permanece no ambiente a que está habituado — o Telegram.

"As miniaplicações do Telegram melhoram a taxa de conversão de um cliente em até 23% ao manter os utilizadores no seu ambiente de mensageiro confortável."

Exemplo de Miniaplicação de Educação: Uma Escola Online lança uma miniaplicação que contém testes interativos e uma barra de progresso. Os alunos também podem receber feedback sobre as suas tarefas concluídas, e a miniaplicação lembra o aluno das datas de entrega de cada teste e fornece o certificado de conclusão através da miniaplicação.

Exemplo de Miniaplicação da Indústria de Serviços: Um Salão de Beleza lança uma miniaplicação contendo um calendário de marcações que permite aos clientes escolher a sua hora preferida para arranjar o cabelo. Uma vez que o Cliente tenha selecionado a sua hora desejada, confirma a sua marcação, e a miniaplicação envia uma confirmação de volta ao Cliente. A miniaplicação notifica então o Cliente da sua marcação antes da hora agendada.

"Os bots do Telegram que enviam lembretes reduzem o número de marcações perdidas em 34%. Isso ajuda a aumentar a retenção de clientes para Salões de Beleza."

Exemplo de Miniaplicação de Finanças e Cripto: Um Trader tem acesso a um painel analítico com gráficos, indicadores e alertas. Os dados são atualizados em tempo real via websockets; portanto, o trader usa o bot do Telegram para o notificar de quaisquer eventos importantes que possam afetar o mercado.

No ASCN.AI, o utilizador pergunta ao bot "Que tokens estão a subir de preço?" e é fornecida uma tabela que reflete as métricas das várias moedas, e o trader recebe um alerta do bot para verificar os dados da Blockchain quando a moeda está a ter um movimento de preço acentuado. Num mês, 67% dos traders migraram da aplicação web e estão agora a usar o Telegram para acesso rápido a dados analíticos.

Como funcionam as Miniaplicações do Telegram?

Arquitetura Técnica (Telegram API, Web App)

A Arquitetura Técnica é dividida em três camadas. Portanto, para os propósitos deste artigo, vamos dividi-la da seguinte forma:

1) Cliente (Web App): O Cliente (utilizador) terá uma aplicação HTML, CSS e Javascript (baseada na web) que está alojada em qualquer servidor web com protocolos https (GitHub Pages, Vercel, ou o seu próprio VPS). Quando o utilizador quer começar a usar a miniaplicação, clica no botão do bot, e o Telegram exibe a página web num WebView dentro da aplicação de chat do Telegram.

2) Ponte de Dados: A ponte de dados (JavaScript) fornece a interface entre a miniaplicação e o Telegram. Usando o objeto window.Telegram.WebApp, a miniaplicação pode comunicar com a Telegram API para obter as informações do utilizador, o tema da interface da sua miniaplicação, gerir botões e solicitar o contacto ou geolocalização do utilizador. A API e o backend do Bot servem como manipuladores de comandos e remetentes de notificações. O servidor lida com todos os pedidos da Web App (JavaScript) e administra a validação da informação e a execução do código que produz as respostas do bot no chat usando a sua API (por exemplo, envio de notificações sobre pedidos aceites).

const tg = window.Telegram.WebApp;
tg.ready(); // Notificar que a aplicação foi carregada
const userId = tg.initDataUnsafe.user.id; // Recuperar o ID do utilizador

Segurança: Cada pedido proveniente da Web App tem um parâmetro initData contendo a assinatura digital. O servidor confirma a assinatura utilizando HMAC-SHA256, juntamente com a chave secreta do bot, para evitar a adulteração de dados.

"A API do Telegram Web Apps usa o algoritmo HMAC-SHA256 para gerar assinaturas digitais criptográficas nos objetos initData que recebe, verificando assim a autenticidade dos pedidos recebidos e impedindo a sua modificação não autorizada."

Plataformas de Miniaplicações e as Suas Funções

As miniaplicações permitem que os programadores forneçam aos utilizadores acesso a informações do utilizador sem exigir qualquer ação adicional deles (como iniciar sessão na sua aplicação). As miniaplicações também podem adaptar-se aos temas claro e escuro usados no Telegram.

O primeiro botão no ecrã principal de uma miniaplicação (o MainButton) tem texto e ações personalizáveis relacionadas com as ações tomadas pelo utilizador na aplicação. Existem vários tipos de permissões que podem ser solicitadas aos utilizadores, como informações de contacto, localização geográfica, números de telefone, etc. Existem também formas de integração com o Telegram Payments para que os pagamentos possam ser aceites.

As miniaplicações fornecem feedback háptico como um aprimoramento da experiência do utilizador (UX).

As miniaplicações são limitadas de várias formas:

• Se a sua aplicação demorar mais de 10 segundos a carregar, o Telegram fechará o WebView.
• O acesso à câmara e ao microfone é limitado (se disponível) através de APIs HTML5 e depende da plataforma.
• Cada bot tem o seu próprio armazenamento local isolado, pelo que cookies e localStorage podem ser usados, mas não serão partilhados entre bots.
• A única forma de enviar notificações push aos utilizadores através de miniaplicações é usando a Bot API, não existe um método incorporado para fazer isso através de um WebView.
• A única forma de uma miniaplicação continuar a funcionar quando foi minimizada é ter o WebView fechado.

O Telegram exige que otimize os tempos de carregamento das suas aplicações e minimize o consumo de recursos, porque se a sua aplicação não carregar em 10 segundos, o Telegram fechará o WebView.

Existem dois métodos para criar miniaplicações para o Telegram:

Desenvolvimento Manual (usando a Telegram Bot API e JavaScript)

Isto é para programadores que desejam ter controlo total sobre as suas aplicações; pode criar qualquer tipo de UI e qualquer lógica de negócio que desejar. Precisará de ter conhecimentos de programação.

Requisitos:

• Bot do Telegram do BotFather e obtenção do token
• Alojamento web (Github Pages, Vercel, VPS próprio) com https
• Front-end construído usando conhecimentos de HTML/CSS/Javascript
• Back-end construído usando quaisquer outras linguagens de programação como NodeJs/Python/PHP para o propósito de processar pedidos para a Bot API

Passos:

1. Crie um bot usando o BotFather e obtenha o seu token
2. Crie o botão de menu adicionando o URL da Web App no BotFather (usando o comando /setmenubutton no BotFather)
3. Crie o front-end e conecte-se a ele usando telegram-web-app.js. Recolha dados do utilizador e crie a forma dos seus botões.
4. Crie o back-end para aceitar dados de utilizador recebidos, e para validar a assinatura do initData, e para enviar respostas para/usando a Bot API.
5. Teste a aplicação em vários dispositivos como Android, iOS, Desktop
6. Publique a sua aplicação e crie um plano de manutenção.

Prós: Obtém controlo total sobre a sua aplicação e pode fazer o que quiser com ela. Também pode usá-la para criar a sua própria experiência de cliente usando a Telegram API e para integrar serviços de terceiros.

Contras: Deve ter as competências para construir a sua aplicação e o tempo para a construir e manter.

Exemplos: ASCN.AI, uma Aplicação de Análise de Criptomoedas que usa WebSocket para atualizar os saldos dos utilizadores a cada segundo, não seria possível de ser criada usando Construtores de Miniaplicações.

Soluções Disponíveis

As seguintes empresas oferecem o software de construção mais popular para a criação de aplicações funcionais num curto espaço de tempo:

• Botmake.io — Uma loja com Telegram Payments e suporte Stripe, juntamente com um sistema CRM integrado no software.
• Aimylogic — Oferece chatbots com opções de ramificação e acesso à API.
• SendPulse — Oferece automação de marketing com landing pages e muito mais.
• ManyChat — Suporta automação de vendas e integra-se com o Shopify.

Ao utilizar estes tipos de construtores, existem muitos benefícios e desvantagens, incluindo:

Benefícios: Pode lançar desde o conceito inicial até à aplicação totalmente funcional em 2 horas ou menos. Não precisará de conhecimentos de programação para configurar a sua aplicação, desde que compreenda como funciona a configuração do construtor! Cada construtor vem com dados analíticos incorporados e suporte a modelos.

Desvantagens: Não pode personalizar a sua aplicação tanto quanto deseja e estará dependente da plataforma do construtor (vendor lock-in). Poderá precisar de adquirir uma subscrição para poder utilizar toda a gama de serviços oferecidos pelo construtor.

"Usar construtores permitir-lhe-á lançar aplicações totalmente funcionais em horas sem quaisquer conhecimentos de programação."

Versões Gratuitas vs Pagas

Existem muitas soluções gratuitas disponíveis para a criação de miniaplicações ou aplicações web que não requerem qualquer sistema de backend, tais como:

• GitHub Pages — Esta é uma plataforma de alojamento gratuita que lhe permite alojar páginas web estáticas usando HTTPS. Se a sua Web App não requer suporte de backend, este é um ótimo lugar para a alojar.
• Vercel/Netlify — Ambos são serviços de alojamento gratuitos que alojam aplicações web estáticas e do lado do servidor.
• Glitch — Um ambiente de desenvolvimento Node.js online que pode usar para testar os seus Protótipos gratuitamente.

Todas as soluções acima vêm com limitações, e essas limitações afetam diretamente a estabilidade e escalabilidade da sua aplicação.

Começar a Construir uma Miniaplicação no Telegram

Passo 1 — Registar e Configurar um Bot

Para criar o seu bot, procure o bot chamado @BotFather no Telegram e envie-lhe o comando /newbot. Precisará de dar um nome ao seu bot, bem como um nome de utilizador único; este nome de utilizador deve terminar com "bot". Ser-lhe-á emitido um token de API para o seu novo bot; certifique-se de o guardar para mais tarde. Pode configurar a descrição e os comandos para o seu bot usando os comandos /setdescription e /setcommands, respetivamente. Para criar um botão no Telegram com funcionalidade de Web App, usará o comando /setmenubutton para ativar o botão de menu no seu bot.

Passo 2 — Conectar e Configurar a Sua Web App

Primeiro, precisará de criar um ficheiro HTML simples onde se conectará ao Script das Web Apps do Telegram adicionando o seguinte à sua página HTML:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

Agora que está conectado ao script das Web Apps do Telegram, precisará de adicionar algum código JavaScript para recolher informações sobre o utilizador e controlar o MainButton da sua miniaplicação.

const tg = window.Telegram.WebApp;
tg.ready();
tg.MainButton.text = "Continue";
tg.MainButton.show();
tg.MainButton.onClick(() => {
    fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) })
});

Para garantir que está a usar apenas URLs seguras para a web app do seu bot, precisará de publicar a web app num anfitrião HTTPS, como GitHub Pages ou Vercel. Depois disso, atualizará as definições do bot com o URL da sua web app. Uma vez feito isso, pode testar o seu bot lançando-o e clicando no botão de menu para abrir a Web App. Certifique-se de verificar o quão bem funciona em vários dispositivos e plataformas. Pode usar ferramentas de programador no seu navegador para depuração de WebView. Finalmente, verifique o servidor para qualquer validação de assinatura do initData.

Ferramentas Recomendadas para Desenvolvimento e Implementação

Antes de Lançar a Sua Miniaplicação, Deve Garantir Que:

• Criou o seu bot, recebeu o seu Token de API;
• Preparou a sua Web App usando a Telegram Web Apps API;
• Carregou a sua Web App para Alojamento usando o Protocolo HTTPS;
• Adicionou o Botão de Menu com Link para a sua Web App;
• Verificou a validação da assinatura do initData no Servidor;
• Testou em Todos os Dispositivos Principais;
• Configurou o Tratamento de Erros e a Interface de Utilizador convenientes;
• Configurou Análises e Recolha de Feedback;

Melhores Construtores para Criar Miniaplicações do Telegram

Visão Geral das Plataformas de Construtores Populares

Existem muitos Construtores disponíveis que lhe permitem criar rapidamente Miniaplicações do Telegram sem precisar de conhecimentos de programação; no entanto, são limitados em personalização e criam uma dependência dessa plataforma de Construtor específica.

Capacidade Gratuita para Construir uma Miniaplicação do Telegram

Se estiver interessado em criar uma Web App simples para alojar no GitHub Pages gratuitamente e em formato HTTPS, pode conectar a Lógica do Servidor à sua Web App usando Google Cloud Functions ou AWS Lambda, ambos disponíveis sem custos. Para criar um bot usando a aplicação BotFather, precisa de ligar o botão no menu a uma aplicação web, que deve cumprir certas condições para miniaplicações. As restrições mais críticas são que as miniaplicações só podem ser acedidas via conexões HTTPS seguras, têm um tempo máximo de carregamento de 10 segundos, não podem usar a câmara ou o microfone diretamente, têm capacidade limitada para funcionar em segundo plano e devem aderir a todos os requisitos legais para o tratamento de dados pessoais e processamento de pagamentos.

Para fornecer aos utilizadores uma forma fácil de usar a sua miniaplicação, deve usar o URI tg://web_app quando um utilizador clica numa mensagem, canal ou anúncio; este URI redirecionará automaticamente o utilizador para a miniaplicação imediatamente. Também pode integrar o bot na sua miniaplicação para que os botões de menu e as mensagens inline acionem a aplicação web, enquanto o processamento de backend ocorre através da Bot API.

Equívocos Comuns a Evitar ao Criar Miniaplicações

1. Usar HTTP em vez de HTTPS: O Telegram só aceita pedidos para aplicações via um protocolo seguro. Pode resolver este problema configurando um certificado SSL gratuito da Let's Encrypt.
2. Não Validar a Assinatura do Seu Objeto initData: Se isto não for concluído, permite que atacantes usem diferentes dados de inicialização, fazendo-se passar por um utilizador autorizado.
3. Não Projetar de Forma Responsiva: As miniaplicações projetadas para desktop devem funcionar tão eficazmente em dispositivos móveis. Use media queries para suportar diferentes interfaces de utilizador e crie botões que sejam fáceis de usar em qualquer dispositivo.
4. Tempos de Carregamento Lentos: Deve procurar otimizar imagens e minimizar o código, bem como implementar imagens com carregamento preguiçoso.
5. Não Fornecer Mensagens de Erro Significativas: Certifique-se sempre de que o seu utilizador recebe informações compreensíveis se houver algum problema.
6. Não Seguir o Tema do Telegram: O Telegram fornece um mecanismo para os programadores usarem tg.themeParams com o propósito de corresponder as cores da sua miniaplicação aos Temas Claro e Escuro do Telegram.

Usar um design adaptativo para criar aplicações em miniatura proporcionará maior conveniência e aumentará a retenção de utilizadores ao usar dispositivos móveis. A tabela seguinte compara as várias tecnologias disponíveis para construir e implementar aplicações em miniatura.

Tabela Comparativa de Tecnologias Usadas para Construir e Implementar Aplicações em Miniatura

Dicas de Especialistas: As Mais Recentes Melhores Práticas de Desenvolvimento e Promoção para Miniaplicações do Telegram

• Desenvolver um Produto Mínimo Viável (MVP). Comece com um mínimo de 3-5 funções principais, recolha feedback e depois melhore o seu produto.

"Comece pequeno, recolha feedback e adicione novas funcionalidades à medida que desenvolve, isso poupará tempo e custos" – Alexey Smirnov, ASCN.AI.

• Otimize para conexões lentas. Comprima tamanhos de imagem, use carregamento eficiente de scripts, use uma rede de entrega de conteúdo (CDN) para distribuir os seus ficheiros.
• Teste em dispositivos reais, particularmente iOS e Android.
• Utilize as funcionalidades incorporadas do Telegram. Inclua botões 'Partilhar', botões inline e permita a integração de canais e chats para partilha viral.
• Realize Testes A/B na sua aplicação. Modifique o seu texto, cores, localizações de elementos e meça as taxas de conversão.

"A implementação de testes A/B para miniaplicações do Telegram pode resultar num aumento de até 50% nas seleções sem qualquer alteração na funcionalidade." – ConversionXL Institute, 2021.

• Incentive os programadores a solicitar feedback nas suas aplicações usando formulários de avaliação e comentários para que possam responder a problemas rapidamente.

ASCN.AI NoCode & IA: Automatize Processos de Negócio, Gere Mais Receita Sem Desenvolvimento Complicado

A plataforma NoCode da ASCN.AI permite-lhe ir rapidamente do conceito ao rendimento em questão de horas, em vez de meses. Oferece fluxos de trabalho de IA pré-construídos que automatizam tudo, desde a recolha de leads até ao encaminhamento de pedidos, à conexão com processadores de pagamento e à personalização de notificações.

Exemplos de Aplicações:

Automação de Vendas: Automatiza a distribuição de leads dentro de um sistema CRM e gera faturas, resultando em 10x mais aplicações processadas devido a um processamento mais rápido e preciso.

Notificações Personalizadas: Aumenta a retenção de clientes de 12% para 28% com um valor médio de compra 30% maior.

Arbitragem e Negociação de Cripto: Agentes de IA analisam diferenças de preço, fornecendo alertas atempados aos traders, o que produz um rendimento adicional de $300-$1.200 mensalmente.

Num exemplo, um cliente lançou uma miniaplicação que rastreia criptomoedas, e num mês, alcançaram 67% de utilizadores a seguir a orientação da IA, gerando aproximadamente $420 de lucro por utilizador por mês.

Perguntas Frequentes

Como Crio uma Miniaplicação Gratuitamente?

Use o GitHub Pages para alojar uma página web estática conectada à Telegram Web Apps API. Pode usar uma função de computação em nuvem gratuita do Google Cloud ou AWS Lambda para construir a lógica do servidor para a sua aplicação. Depois, poderá criar o seu próprio bot, configurar o botão de menu e testar a aplicação antes de a lançar na plataforma.

Quais São as Limitações das Miniaplicações?

As miniaplicações devem ser alojadas via HTTPS e só podem carregar em menos de 10 segundos. Não fornecem acesso direto à sua câmara ou microfone. Os processos em segundo plano são suportados apenas em grau limitado, e deve cumprir quaisquer regulamentos aplicáveis (por exemplo, dados pessoais e processamento de pagamentos) no seu país.

O Que É um URL tg://web_app?

Este é um tipo específico de link que permite aos utilizadores navegar rapidamente de dentro do Telegram Messenger para abrir a sua miniaplicação com um único clique.

Posso Integrar Miniaplicações Diretamente num Bot?

Sim, existem várias formas de criar botões de menu e mensagens inline que permitem aos utilizadores aceder à sua Web App, enquanto o bot recebe e lida com pedidos de entrada/saída via Bot API.

Conclusão

As Miniaplicações dentro do Telegram oferecem uma oportunidade única para empresas e programadores desenvolverem uma experiência de utilizador robusta através de uma UI simples integrada na plataforma de mensagens, sem exigir instalações adicionais de aplicações. Essa abordagem cria maiores conversões e envolvimento do utilizador.

Para lançar e desenvolver eficazmente as suas miniaplicações, deve utilizar abordagens comprovadas e técnicas de segurança testadas, bem como usar exemplos de código e melhores práticas. A combinação de um processo de desenvolvimento manual assistido por agente e a plataforma NoCode da ASCN.AI oferece economias de tempo significativas, maior escalabilidade e oportunidades de aumento de receita.