HOW? FastAPI + Flet #3936

RRozi · 2024-09-03T15:59:15Z

RRozi
Sep 3, 2024

Question

How can I get telegram api data and then work with it in frontend flet?

Code sample

import asyncio
from contextlib import asynccontextmanager

import requests
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse, RedirectResponse

import flet as ft
import flet.fastapi as flet_fastapi

import api
import gui


@asynccontextmanager
async def lifespan(app: FastAPI):
    await flet_fastapi.app_manager.start()
    yield
    await flet_fastapi.app_manager.shutdown()


app = FastAPI(lifespan=lifespan)


datt = {}

async def root_main(page: ft.Page):

    page.add(ft.Text("This is root app!"))
    #  Get data -> work on the front end

@app.post("/get_data")
async def send_name(request: Request):
    data = await request.json()
    print(data)

@app.get("/data")
async def read_root():
    print(3234)
    with open("index_data.html", "r") as file:
        html_content = file.read()

    return HTMLResponse(content=html_content, status_code=200)


if __name__ == "__main__":
    import uvicorn

    app.mount('/', flet_fastapi.app(root_main))
    uvicorn.run(app, host="0.0.0.0", port=25022)


HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script>
        let tg = window.Telegram.WebApp;

        let user_id = tg.initDataUnsafe.user.username;
        let colorScheme = tg.colorScheme;

        // Отправка name и colorScheme на сервер FastAPI
        fetch('/get_data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                user_id: user_id,
                colorScheme: colorScheme
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });

        // Вызов метода close()

    </script>
</body>
</html>

Error message

No response

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

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

tanmay-bhatgare · 2024-09-07T10:35:16Z

tanmay-bhatgare
Sep 7, 2024

Honestly, I think it's better to keep flet_fastapi and flet separate for now. felt_fastapi is still pretty new and doesn’t have a big community yet, so mixing them might cause issues later. Separating the backend (FastAPI) and frontend (Flet) could save you time and headaches. I’m working on a task manager app with FastAPI and Flet, and this approach has been working well for me. If you have further ideas to make it work please share.

19 replies

tanmay-bhatgare Sep 11, 2024

Mate sorry but without knowing how to reproduce code i can't help. I am getting this message whenever i try to run index_data.html file.

[Telegram.WebView] > postEvent web_app_set_header_color Object
telegram-web-app.js:135 [Telegram.WebView] > postEvent web_app_set_bottom_bar_color Object
telegram-web-app.js:135 [Telegram.WebView] > postEvent web_app_request_theme 
telegram-web-app.js:135 [Telegram.WebView] > postEvent web_app_request_viewport 
(index):12 Uncaught TypeError: Cannot read properties of undefined (reading 'username')
    at (index):12:44

you have any idea about it?

RRozi Sep 11, 2024
Author

There is no need to launch it, it serves simply as an appeal to api in the skin at the very beginning you can get acquainted with how it should work

tanmay-bhatgare Sep 11, 2024

mate look let's restart. I tried to run your code but fastapi server get served but flet app didn't load, idk why can you please tell me how to reproduce this code, this might help you too. Thank!

RRozi Sep 11, 2024
Author

Bro look, that's the joke, I can get data but the app won't show up or vice versa, I can get the app but not get the data. Right now I'm trying from the flat app directly access the API, and here too there is a problem, the first endpoint that performs html It is executed successfully, but already in the html Where it returns data to another endpoint, it doesn't work at all.

tanmay-bhatgare Sep 12, 2024

where are you getting data in browser console or terminal where you ran your program? and about the second endpoint /data you're returning a HTMLResponse, this will return a html in browser, means if there's a javascript code in html it won't work unless you render .html file in your browser. So if you want your data(user_id and color_scheme) to be displayed, you might have to find a different way like telegram api which can send you data directly without javascript included. In short you can't use HTML rendering code(includes javascript) fastapi route in flet app. This i entire conclusion I came up with.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

HOW? FastAPI + Flet #3936

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 19 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

HOW? FastAPI + Flet #3936

Uh oh!

RRozi Sep 3, 2024

Question

Code sample

Error message

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

Replies: 1 comment · 19 replies

Uh oh!

tanmay-bhatgare Sep 7, 2024

Uh oh!

tanmay-bhatgare Sep 11, 2024

Uh oh!

RRozi Sep 11, 2024 Author

Uh oh!

tanmay-bhatgare Sep 11, 2024

Uh oh!

RRozi Sep 11, 2024 Author

Uh oh!

tanmay-bhatgare Sep 12, 2024

RRozi
Sep 3, 2024

Replies: 1 comment 19 replies

tanmay-bhatgare
Sep 7, 2024

RRozi Sep 11, 2024
Author

RRozi Sep 11, 2024
Author