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.
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.
Cài đặt thư viện Flet:
*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).*
Tạo file `mobile_app.py`. Chúng ta sẽ thiết kế giao diện Dark Mode ngầu như phim.
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.
Đâ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:
(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.
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:
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".
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.
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
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
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
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à.
Bài viết liên quan