Hello World — App IoT đầu tiên

Kết nối app mobile với VieLang IoT và hiển thị telemetry thiết bị trong 10 phút.

Hello World — App IoT đầu tiên

Hướng dẫn này giúp bạn tạo app IoT mobile hoàn chỉnh: kết nối thiết bị, hiển thị dashboard, nhận cảnh báo — trong khoảng 10 phút.

Yêu cầu

Bước 1: Tạo Dashboard cho mobile

Dashboard trên web và mobile dùng chung — bạn chỉ cần cấu hình thêm cho mobile.

Tạo dashboard mới

  1. Đăng nhập web dashboard → Dashboards → + Add dashboard
  2. Đặt tên: Mobile Overview
  3. Edit → thêm các widget:
    • Value card — hiển thị nhiệt độ hiện tại
    • Time series chart — biểu đồ nhiệt độ 1 giờ qua
    • Alarm count — số cảnh báo đang active

Cấu hình dashboard cho mobile

  1. Mở dashboard → click Edit
  2. Vào Dashboard settings (icon bánh răng)
  3. Tab Mobile → bật "Show on mobile"
  4. Đặt Dashboard order: 1 (hiển thị đầu tiên)
  5. Upload Dashboard image (thumbnail trên mobile)
  6. Nhấn Apply → Save

Bước 2: Cấu hình navigation menu

  1. Vào Mobile Center → chọn Bundle
  2. Tab Layout → + Add specific page
  3. Thêm menu item:
    • Name: Tổng quan
    • Type: Dashboard
    • Dashboard: chọn Mobile Overview
  4. Nhấn Add → Save

Bước 3: Tải lại config và chạy app

# Tải config mới từ Mobile Center # (Mobile Center → Bundle → Download configuration → overwrite configs.json) # Restart app flutter run --dart-define-from-file configs.json

Bước 4: Đăng nhập và kiểm tra

  1. Mở app trên điện thoại/emulator
  2. Đăng nhập với tài khoản VieLang IoT
  3. Kiểm tra:
    • ✅ Menu bottom bar có mục Tổng quan
    • ✅ Dashboard hiển thị đúng dữ liệu
    • ✅ Dữ liệu cập nhật real-time

Bước 5: Cấu hình trang Thiết bị

Thêm icon thiết bị

  1. Vào Device Profiles → chọn profile
  2. Edit → upload ảnh vào "Device profile image"
  3. Nhấn Apply

Ảnh sẽ hiển thị trong danh sách thiết bị trên mobile.

Thêm dashboard chi tiết thiết bị

Tạo dashboard chi tiết cho thiết bị:

  1. Tạo dashboard mới: Device Detail
  2. Datasource: dùng "Entity from dashboard state" alias (quan trọng!)
  3. Thêm widgets: telemetry chart, attributes, RPC controls

Gắn vào device profile:

  1. Device Profiles → chọn profile → Edit
  2. Field "Mobile dashboard" → chọn Device Detail
  3. Apply

Bây giờ khi click vào thiết bị trên mobile → mở dashboard chi tiết.

Kết quả mong đợi

App Mobile ├── 🏠 Home (cấu hình từ Layout) │ └── Dashboard "Mobile Overview" ├── 📱 Thiết bị │ ├── [Sensor-01] ← icon từ device profile │ └── [Sensor-02] ├── 🔔 Cảnh báo └── ⋯ Thêm

Bước tiếp theo

TrướcCài đặt Flutter AppTiếp Mobile Center