# Architecture Flow

การพัฒนาระบบ **GtsAlpha.in.th** **MCP** โดยใช้ **Next.js + Supabase** ร่วมกับ **1NCE SIM** เป็นทางเลือกที่ยอดเยี่ยม

1. **1NCE** เด่นเรื่อง IoT ราคาประหยัดและครอบคลุมทั่วโลก (Global Coverage)
    
2. **Supabase** เก่งเรื่อง Real-time และ Database Management
    
3. **Next.js** เก่งเรื่อง Dashboard และ Performance
    

นี่คือแนวทางการพัฒนาเชิงเทคนิค (Technical Roadmap) และตัวอย่างโครงสร้างโค้ดครับ

---

### 1\. ภาพรวมสถาปัตยกรรม (Architecture Flow)

เนื่องจาก 1NCE SIM มักจะใช้กับอุปกรณ์ IoT ที่ส่งข้อมูลผ่านโปรโตคอลขนาดเล็ก (เช่น UDP, CoAP หรือ LwM2M) เพื่อประหยัด Data เราจะไม่ให้อุปกรณ์ยิง HTTP Request เข้า Supabase โดยตรง (เปลืองแบตและ Data) แต่จะใช้ **1NCE Data Broker** เป็นตัวกลางครับ

> **Flow ของข้อมูล:** GPS Device (UDP) ➔ 1NCE Network ➔ **1NCE Data Streamer (Webhook)** ➔ **Supabase Edge Function** ➔ **Supabase Database** ➔ **Next.js Dashboard (Real-time)**

---

### 2\. การออกแบบฐานข้อมูล (Supabase Database Design)

เข้าไปที่ Supabase SQL Editor แล้วสร้างตารางเพื่อรองรับข้อมูลครับ

SQL

```plaintext
-- 1. ตารางอุปกรณ์ (Devices)
create table devices (
  id uuid default uuid_generate_v4() primary key,
  imei text unique not null,
  name text,
  nfc_tag_id text, -- รองรับการแตะบัตร NFC
  driver_name text,
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- 2. ตารางข้อมูลพิกัดและสถานะ (Telemetry / Tracking Logs)
create table vehicle_logs (
  id bigint generated by default as identity primary key,
  device_id uuid references devices(id) not null,
  latitude float not null,
  longitude float not null,
  speed float,
  fuel_level float,
  engine_temp float,
  status text, -- เช่น 'Running', 'Idle', 'Stopped'
  raw_data jsonb, -- เก็บข้อมูลดิบเผื่อไว้ตรวจสอบ
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- เปิดใช้งาน Realtime สำหรับตารางนี้ เพื่อให้หน้าเว็บขยับเอง
alter publication supabase_realtime add table vehicle_logs;
```

---

### 3\. เชื่อมต่อ 1NCE เข้ากับ Supabase (หัวใจสำคัญ)

ใน 1NCE Portal จะมีฟีเจอร์ที่เรียกว่า **"Data Integrations"** หรือ **"Data Streamer"** ให้ตั้งค่าให้ส่งข้อมูลมาที่ **Supabase Edge Function** ครับ

#### ขั้นตอนที่ 3.1: เขียน Supabase Edge Function

ฟังก์ชันนี้ทำหน้าที่เป็น "ด่านรับข้อมูล" (Webhook Receiver)

1. สร้าง Edge Function: `supabase functions new iot-webhook`
    
2. เขียนโค้ดใน `index.ts`:
    

TypeScript

```plaintext
// supabase/functions/iot-webhook/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

serve(async (req) => {
  // 1. สร้าง Supabase Client (ใช้ Service Role Key เพื่อเขียนข้อมูลได้โดยไม่ต้อง Login)
  const supabase = createClient(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
  )

  // 2. รับข้อมูลจาก 1NCE (ส่วนใหญ่มาเป็น JSON หรือ Binary ที่ Encode มา)
  const payload = await req.json()
  
  // ตัวอย่าง Payload จาก 1NCE (สมมติ)
  // { "imei": "123456789012345", "payload": "hex_string...", "timestamp": ... }

  console.log("Received data:", payload)

  // 3. แปลงข้อมูล (Parsing Logic)
  // ตรงนี้คุณต้องเขียน Logic ถอดรหัส Hex String เป็น Lat/Long ตาม Spec ของ GPS Tracker
  const parsedData = parseGPSPayload(payload.payload) 
  
  // 4. บันทึกลงฐานข้อมูล
  // ค้นหา device_id จาก imei
  const { data: device } = await supabase
    .from('devices')
    .select('id')
    .eq('imei', payload.imei)
    .single()

  if (device) {
    const { error } = await supabase.from('vehicle_logs').insert({
      device_id: device.id,
      latitude: parsedData.lat,
      longitude: parsedData.lng,
      speed: parsedData.speed,
      status: parsedData.status, // อาจได้จากการวิเคราะห์ AI เบื้องต้น
      raw_data: payload
    })
    
    if (error) console.error("Error inserting:", error)
  }

  return new Response(JSON.stringify({ message: "Data received" }), {
    headers: { "Content-Type": "application/json" },
  })
})

// ฟังก์ชันจำลองการถอดรหัส (ต้องแก้ตาม Spec เครื่อง GPS จริง)
function parseGPSPayload(hex: string) {
    // ... Logic ถอดรหัส ...
    return { lat: 13.7563, lng: 100.5018, speed: 60, status: 'Running' } 
}
```

#### ขั้นตอนที่ 3.2: นำ URL ของ Function ไปใส่ใน 1NCE Portal

URL จะหน้าตาประมาณนี้: `https://[project-ref].`[`supabase.co/functions/v1/iot-webhook`](http://supabase.co/functions/v1/iot-webhook) เลือก method เป็น **POST**

---

### 4\. การแสดงผลบน Next.js (Real-time Dashboard)

ที่ฝั่ง Frontend ใช้ `supabase-js` เพื่อดึงข้อมูลและฟังค่าเปลี่ยนแปลงแบบ Real-time ครับ

JavaScript

```plaintext
// components/MapDashboard.js
import { useEffect, useState } from 'react'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_ANON_KEY')

export default function MapDashboard() {
  const [vehicles, setVehicles] = useState([])

  useEffect(() => {
    // 1. โหลดข้อมูลล่าสุดครั้งแรก
    fetchInitialData()

    // 2. Subscribe Real-time (เมื่อมีข้อมูลใหม่เข้ามาจาก 1NCE -> Edge Function -> DB)
    const channel = supabase
      .channel('realtime-vehicles')
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'vehicle_logs' }, (payload) => {
        console.log('New GPS Data:', payload.new)
        updateVehicleMap(payload.new)
      })
      .subscribe()

    return () => supabase.removeChannel(channel)
  }, [])

  const fetchInitialData = async () => {
    // query ล่าสุดของแต่ละคัน (ใช้ Distinct on หรือ Group by ใน SQL View จะดีกว่า)
    const { data } = await supabase.from('vehicle_logs').select('*').order('created_at', { ascending: false }).limit(10)
    setVehicles(data)
  }

  const updateVehicleMap = (newLog) => {
    // อัปเดต State เพื่อให้ Marker บนแผนที่ขยับ
    setVehicles(prev => {
        // Logic อัปเดตพิกัดรถคันนั้นๆ ใน Array
        return [...prev, newLog] 
    })
  }

  return (
    <div>
      <h1>GtsAlpha Tracking</h1>
      {/* ใส่ Component แผนที่ เช่น Google Maps หรือ Leaflet ตรงนี้ */}
      <ul>
        {vehicles.map(v => (
            <li key={v.id}>รถ ID: {v.device_id} | ความเร็ว: {v.speed} km/h</li>
        ))}
      </ul>
    </div>
  )
}
```

---

### 5\. การเชื่อมต่อ AI Neural Network (Python Service)

ส่วนที่เป็น AI ของคุณ (Neural Network) ไม่ควรทำงานใน Edge Function (เพราะเวลาจำกัดและทรัพยากรน้อย) แนะนำให้ทำเป็น **Worker Service (Python)** แยกต่างหาก:

1. **Python Script:** ใช้ Library `supabase-py` หรือ `psycopg2` เชื่อมต่อ DB
    
2. **Logic:** ดึงข้อมูล `vehicle_logs` ล่าสุดมาวิเคราะห์
    
3. **Process:** เข้าโมเดล Neural Network (PyTorch/TensorFlow) เพื่อทำนายพฤติกรรม
    
4. **Update:** เขียนผลลัพธ์กลับลงไปในช่อง `status` หรือตาราง `analytics_results`
    

---

### สรุปจุดสำคัญสำหรับการตั้งค่า 1NCE:

* **Protocol:** ตรวจสอบว่า GPS Tracker ส่งค่าเป็น **UDP** หรือ **TCP** ถ้าเป็น UDP ต้องตั้งค่า 1NCE ให้ Forward มาเป็น HTTP Webhook
    
* **Payload Parsing:** นี่คือส่วนที่ยากที่สุด คุณต้องมี "Manual (คู่มือ)" ของอุปกรณ์ GPS ว่า Hex String ตัวที่เท่าไหร่คือ Latitude/Longitude
    

**ขั้นตอนถัดไปที่คุณอยากให้ผมช่วย:**

1. คุณมี **คู่มือ (Protocol Document)** ของอุปกรณ์ GPS ไหมครับ? ผมช่วยเขียน Logic ถอดรหัส (Parse) ข้อมูลให้ได้
    
2. หรือต้องการตัวอย่างโค้ด **Python** สำหรับดึงข้อมูลจาก Supabase ไปเข้า Neural Network ไหมครับ?