Telegram Web Apps

[alekshytr]

Question

Hello, I am developing Telegram Web Apps, through aiogram and flet and hgrok, hgrok configured, received a link, linked flet, ngrok, aiogram, everything works, only for some reason when launching Web Apps, the application does not immediately open to the full height of the phone, you have to swipe your finger further, how to make it so that immediately on did Web Apps open the whole screen like the rest of the Web Apps?

Code sample

aiogram 3.7:
import asyncio
import logging
from aiogram import Bot, Dispatcher
from aiogram.filters import Command
from aiogram.types import InlineKeyboardButton, InlineKeyboardMarkup, Message, WebAppInfo
from aiogram.fsm.storage.memory import MemoryStorage

API_TOKEN = ''

logging.basicConfig(level=logging.INFO)

bot = Bot(token=API_TOKEN)
dp = Dispatcher(storage=MemoryStorage())

# Замените URL на полученный публичный URL от Ngrok
ngrok_url = ""

keyboard = InlineKeyboardMarkup(
    inline_keyboard=[
        [InlineKeyboardButton(text="Запустить приложение", web_app=WebAppInfo(url=ngrok_url))]])

@dp.message(Command('start'))
async def send_welcome(message: Message):
    await message.answer("Привет! Это бот для запуска приложения на Flet.", reply_markup=keyboard)

async def main():
    await dp.start_polling(bot)

if __name__ == "__main__":
    asyncio.run(main())
flet:
import flet as ft

# Функция для создания кнопки с иконкой и текстом
def create_button(icon_name, text, on_click, active=False):
    icon_color = ft.colors.WHITE if not active else ft.colors.BLUE
    text_color = ft.colors.WHITE if not active else ft.colors.BLUE
    bgcolor = ft.colors.TRANSPARENT if not active else ft.colors.BLUE_GREY_700
    return ft.Container(
        content=ft.Column(
            controls=[
                ft.Icon(name=icon_name, color=icon_color),
                ft.Text(text, color=text_color, size=12)
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            spacing=1
        ),
        on_click=on_click,
        padding=ft.Padding(4, 4, 4, 4),
        width=80,
        height=60,
        bgcolor=bgcolor,
        ink=True,
        border_radius=ft.border_radius.all(10)
    )

# Функция для создания нижней панели
def create_bottom_bar(page, active_page):
    return ft.Container(
        content=ft.Row(
            controls=[
                create_button(ft.icons.STOREFRONT, "Магазин", lambda e: show_page(page, "Магазин"), active_page == "Магазин"),
                create_button(ft.icons.CHAT, "Чаты", lambda e: show_page(page, "Чаты"), active_page == "Чаты"),
                create_button(ft.icons.PERSON, "Профиль", lambda e: show_page(page, "Профиль"), active_page == "Профиль")
            ],
            alignment=ft.MainAxisAlignment.SPACE_AROUND,
        ),
        bgcolor=ft.colors.BLUE_GREY_900,
        padding=5,
        height=60,
        width=page.window_width
    )

# Функция для отображения страницы
def show_page(page, page_name):
    page.controls.clear()
    page.add(ft.Text(f"Вы находитесь на странице: {page_name}", color=ft.colors.WHITE))
    page.overlay.clear()
    page.overlay.append(
        ft.Container(
            content=create_bottom_bar(page, page_name),
            alignment=ft.alignment.bottom_center,
            left=0,
            right=0,
            bottom=0
        )
    )
    page.update()

def main(page: ft.Page):
    page.title = "ALEX PAY"
    page.bgcolor = "#1c1c1c"
    page.padding = 10
    page.window_width = 800
    page.window_height = 600

    show_page(page, "Магазин")

ft.app(target=main, view=ft.WEB_BROWSER, port=8000)

Error message

Hello, I am developing Telegram Web Apps, through aiogram and flet and hgrok, hgrok configured, received a link, linked flet, ngrok, aiogram, everything works, only for some reason when launching Web Apps, the application does not immediately open to the full height of the phone, you have to swipe your finger further, how to make it so that immediately on did Web Apps open the whole screen like the rest of the Web Apps?

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Can you share a screen record?

[alekshytr]

vidma_recorder_18062024_111619.mp4

So, the web application itself does not open to the full screen at once, you have to stretch it up to the full screen yourself, although other web applications open everything to the full screen at once, how do you make it stretch up to the full screen by itself?

[Dimonn963]

Нашел какое то решение? такая же задачка

[Dimonn963]

`

<script src="https://telegram.org/js/telegram-web-app.js"></script> <script type="text/javascript" src="/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=tpsMkIj7m9hrcxMqSUY89DC9Zb-sxR34oAiCvkaPxFk2GlLXE3jCNYK53lD7RbVu" charset="UTF-8"></script> <title>Flet</title> <script> var webRenderer = "auto"; var useColorEmoji = false; </script> <script>webRenderer="canvaskit";</script> <script>useColorEmoji=false;</script> <script> // The value below is injected by flutter build, do not touch. const serviceWorkerVersion = "710028413"; </script> <script src="flutter.js" defer></script> <script> window.Telegram.WebApp.ready(); window.Telegram.WebApp.expand(); window.Telegram.WebApp.isVerticalSwipesEnabled = false; </script>`

[Dimonn963]

<script src="https://telegram.org/js/telegram-web-app.js"></script> <script type="text/javascript" src="/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=tpsMkIj7m9hrcxMqSUY89DC9Zb-sxR34oAiCvkaPxFk2GlLXE3jCNYK53lD7RbVu" charset="UTF-8"></script> <title>Flet</title> <script> var webRenderer = "auto"; var useColorEmoji = false; </script> <script>webRenderer="canvaskit";</script> <script>useColorEmoji=false;</script> <script> // The value below is injected by flutter build, do not touch. const serviceWorkerVersion = "710028413"; </script> <script src="flutter.js" defer></script> <script> window.Telegram.WebApp.ready(); window.Telegram.WebApp.expand(); window.Telegram.WebApp.isVerticalSwipesEnabled = false; </script>

<style> body { inset: 0; overflow: hidden; margin: 0; padding: 0; position: fixed; }

  #loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  #loading img {
    animation: 1s ease-in-out 0s infinite alternate breathe;
    opacity: .66;
    transition: opacity .4s;
  }

  #loading.main_done img {
    opacity: 1;
  }

  #loading.init_done img {
    animation: .33s ease-in-out 0s 1 forwards zooooom;
    opacity: .05;
  }

  @keyframes breathe {
    from {
      transform: scale(0.4);
      opacity: 1.0;
    }

    to {
      transform: scale(0.35);
      opacity: .7;
    }
  }

  @keyframes zooooom {
    from {
      transform: scale(0.4)
    }

    to {
      transform: scale(10)
    }
  }
</style>
<img src="icons/loading-animation.png" alt="Loading..." />

<script> window.addEventListener('load', function () { var loading = document.querySelector('#loading'); _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: serviceWorkerVersion, } }).then(function (engineInitializer) { loading.classList.add('main_done'); return engineInitializer.initializeEngine({ renderer: webRenderer, useColorEmoji: useColorEmoji, }); }).then(function (appRunner) { loading.classList.add('init_done'); return appRunner.runApp(); }).then(function (app) { // Wait a few milliseconds so users can see the "zoooom" animation // before getting rid of the "loading" div. window.setTimeout(function () { loading.remove(); }, 200); }); }); </script>

[Dimonn963]

весь проект не могу

[RRozi]

Ааа спасибо, но как к примеру вызывать методы телеграмма или получать данные в самом Flet ?

[Dimonn963]

тут есть 2 варианта как я понял, либо подрубать через fastapi прием данных в flet, либо просто прикрепить нужные данные к ссылке в aiogram в зашифрованном виде(user_id например) и в флет можно их достать из page.query или page.route. Еще делаю пробую разные варианты.

В интернете мало инфы по Flet, сделал чат, кто варится в этой теме - залетайте

https://t.me/flet_chat