Đóng gói Jarvis vào Điện thoại: Viết App Mobile bằng Python Flet (Không cần học Java)

AI Hunter

Member
Web Dashboard (Streamlit) rất tốt, nhưng cảm giác dùng App Native trên điện thoại vẫn "sướng" hơn nhiều.
Hôm nay, chúng ta sẽ dùng thư viện Flet để viết một ứng dụng điều khiển Jarvis.

Đóng gói Jarvis vào Điện thoại Viết App Mobile bằng Python Flet .jpg

1. Flet là gì?​


Flet là một "phép thuật" của thế giới Python.
* Bên dưới: Nó chạy bằng engine **Flutter** của Google (nổi tiếng mượt và đẹp).
* Bên trên: Bạn điều khiển nó bằng code **Python** đơn giản.
-> Kết quả: Viết 1 lần, chạy được trên Android, iOS, Windows, Mac, Web.

2. Chuẩn bị​


Cài đặt thư viện Flet:
Mã:
pip install flet requests

*Lưu ý: Để App trên điện thoại kết nối được với Server ở nhà, bạn cần dùng địa chỉ IP LAN của máy tính (ví dụ: `http://192.168.1.10:8000`) hoặc link Cloudflare (Bài 8).*

3. Triển khai Code (Full Source)​


Tạo file `mobile_app.py`. Chúng ta sẽ thiết kế giao diện Dark Mode ngầu như phim.

Python:
import flet as ft
import requests

# --- CẤU HÌNH ---
# Thay bằng IP máy tính của bạn hoặc Link Cloudflare
API_URL = "http://192.168.1.X:8000"

def main(page: ft.Page):
    page.title = "Jarvis Mobile"
    page.theme_mode = ft.ThemeMode.DARK
    page.padding = 20
    page.vertical_alignment = ft.MainAxisAlignment.END # Chat đẩy từ dưới lên

    # --- CÁC HÀM XỬ LÝ ---
    def send_chat(e):
        if not chat_input.value: return
       
        user_msg = chat_input.value
        chat_input.value = ""
       
        # 1. Hiện tin nhắn người dùng
        chat_list.controls.append(
            ft.Row([
                ft.Container(
                    content=ft.Text(user_msg, color="white"),
                    bgcolor=ft.colors.BLUE_GREY_900,
                    padding=10,
                    border_radius=10
                )
            ], alignment=ft.MainAxisAlignment.END)
        )
        page.update()

        # 2. Gọi API Llama 3
        try:
            res = requests.post(f"{API_URL}/chat", json={"prompt": user_msg})
            bot_reply = res.json().get("reply", "Lỗi Server")
        except:
            bot_reply = "Không kết nối được Jarvis!"

        # 3. Hiện tin nhắn Bot
        chat_list.controls.append(
            ft.Row([
                ft.Container(
                    content=ft.Text(bot_reply, color="black"),
                    bgcolor=ft.colors.TEAL_200,
                    padding=10,
                    border_radius=10
                )
            ], alignment=ft.MainAxisAlignment.START)
        )
        page.update()

    def toggle_light(e):
        # Hàm bật/tắt đèn
        status = "on" if light_switch.value else "off"
        try:
            requests.get(f"{API_URL}/control/light/{status}")
            page.show_snack_bar(ft.SnackBar(ft.Text(f"Đã {status.upper()} đèn!")))
        except:
            page.show_snack_bar(ft.SnackBar(ft.Text("Lỗi kết nối!")))

    # --- GIAO DIỆN (UI) ---
   
    # 1. Header (Smart Home Controls)
    light_switch = ft.Switch(label="Đèn phòng khách", on_change=toggle_light)
    header = ft.Container(
        content=ft.Column([
            ft.Text("🏠 Smart Home Control", size=20, weight="bold"),
            ft.Row([light_switch], alignment=ft.MainAxisAlignment.SPACE_BETWEEN)
        ]),
        padding=10,
        bgcolor=ft.colors.SURFACE_VARIANT,
        border_radius=10
    )

    # 2. Khu vực Chat
    chat_list = ft.ListView(expand=True, spacing=10, auto_scroll=True)
   
    # 3. Ô nhập liệu
    chat_input = ft.TextField(
        hint_text="Ra lệnh cho Jarvis...",
        expand=True,
        border_color=ft.colors.TEAL_400,
        on_submit=send_chat
    )
    send_btn = ft.IconButton(icon=ft.icons.SEND, icon_color=ft.colors.TEAL_400, on_click=send_chat)

    # --- GHÉP MỌI THỨ LẠI ---
    page.add(
        header,
        ft.Divider(),
        chat_list,
        ft.Row([chat_input, send_btn])
    )

ft.app(target=main)

4. Chạy thử trên máy tính​


Mã:
python mobile_app.py
Bạn sẽ thấy một cửa sổ ứng dụng hiện lên, trông giống hệt giao diện điện thoại. Hãy thử chat và bấm nút đèn để test kết nối.

5. Đưa lên điện thoại (Magic!)​


Đây là điều tuyệt vời nhất của Flet. Bạn không cần biên dịch file APK phức tạp ngay lập tức.

1. Cài App **Flet** trên App Store (iOS) hoặc Google Play (Android).
2. Đảm bảo điện thoại và máy tính dùng chung Wifi.
3. Chạy code trên máy tính với lệnh:
Mã:
flet run mobile_app.py --android
(Nó sẽ hiện ra một mã QR).
4. Mở App Flet trên điện thoại, quét mã QR đó.

-> **Bùm!** Ứng dụng Jarvis của bạn hiện lên ngay trên màn hình điện thoại, cảm ứng mượt mà. Bạn có thể cầm điện thoại đi quanh nhà để điều khiển đèn.

6. Bước cuối: Tạo file APK (Cho Pro)​


Nếu bạn muốn tạo file `.apk` để cài đặt vĩnh viễn (mang đi khoe bạn bè), bạn cần cài Flutter SDK và chạy lệnh:
Mã:
flet build apk
Quá trình này hơi tốn thời gian setup môi trường, nhưng thành quả là một App chuyên nghiệp "Made by You".

Tổng kết​

Chỉ với khoảng 80 dòng code Python, bạn đã có một App Mobile:
  • Giao diện Chat hiện đại.
  • Nút điều khiển Smart Home thực tế.
  • Kết nối trực tiếp với bộ não Llama 3 ở nhà.
 
Back
Top