LINE LIFF 打卡系統開發實戰 - 蘇勃任

專案背景#

為連鎖門市開發行動打卡系統，讓員工透過 LINE 官方帳號即可完成上下班打卡，同時整合 Odoo 人資模組進行出勤管理。

技術架構#

1
┌─────────────────────────────────────┐
2
│          LINE 官方帳號              │
3
│         (LIFF 應用程式)             │
4
└─────────────────┬───────────────────┘
5
                  │
6
          ┌───────▼───────┐
7
          │  LIFF SDK     │
8
          │  + Svelte 5   │
9
          └───────┬───────┘
10
                  │
11
          ┌───────▼───────┐
12
          │   REST API    │
13
          │   (Odoo 17)   │
14
          └───────┬───────┘
15
                  │
16
          ┌───────▼───────┐
17
          │   PostgreSQL  │
18
          │   出勤記錄    │
19
          └───────────────┘

核心功能#

1. GPS 定位打卡#

1
// 取得使用者位置
2
async function getCurrentPosition() {
3
    return new Promise((resolve, reject) => {
4
        navigator.geolocation.getCurrentPosition(
5
            (position) => {
6
                resolve({
7
                    lat: position.coords.latitude,
8
                    lng: position.coords.longitude,
9
                    accuracy: position.coords.accuracy
10
                });
11
            },
12
            reject,
13
            { enableHighAccuracy: true, timeout: 10000 }
14
        );
15
    });
16
}
17

18
// 驗證是否在門市範圍內
19
function isWithinStore(userPos, storePos, radiusMeters = 100) {
20
    const distance = calculateDistance(userPos, storePos);
21
    return distance <= radiusMeters;
22
}

2. LIFF 整合#

1
import liff from '@line/liff';
2

3
async function initializeLiff() {
4
    await liff.init({ liffId: import.meta.env.VITE_LIFF_ID });
5

6
    if (!liff.isLoggedIn()) {
7
        liff.login();
8
        return;
9
    }
10

11
    const profile = await liff.getProfile();
12
    return {
13
        lineUserId: profile.userId,
14
        displayName: profile.displayName,
15
        pictureUrl: profile.pictureUrl
16
    };
17
}

3. 打卡流程#

1
啟動 LIFF
2
    │
3
    ▼
4
┌─────────────┐
5
│ LINE 登入   │
6
│ 取得 userId │
7
└──────┬──────┘
8
       │
9
       ▼
10
┌─────────────┐
11
│ 取得 GPS    │
12
│ 位置資訊    │
13
└──────┬──────┘
14
       │
15
       ▼
16
┌─────────────┐     否
17
│ 門市範圍內？│────────► 顯示錯誤提示
18
└──────┬──────┘
19
       │ 是
20
       ▼
21
┌─────────────┐
22
│ 呼叫 API    │
23
│ 記錄打卡    │
24
└──────┬──────┘
25
       │
26
       ▼
27
┌─────────────┐
28
│ 顯示結果    │
29
│ 打卡成功    │
30
└─────────────┘

Svelte 5 前端實作#

1
<script>
2
    import { onMount } from 'svelte';
3

4
    let status = $state('loading');
5
    let location = $state(null);
6
    let store = $state(null);
7

8
    onMount(async () => {
9
        await initializeLiff();
10
        location = await getCurrentPosition();
11
        store = await getNearestStore(location);
12
    });
13

14
    async function handleCheckIn() {
15
        status = 'processing';
16

17
        const result = await fetch('/api/attendance/check-in', {
18
            method: 'POST',
19
            body: JSON.stringify({
20
                storeId: store.id,
21
                latitude: location.lat,
22
                longitude: location.lng
23
            })
24
        });
25

26
        status = result.ok ? 'success' : 'error';
27
    }
28
</script>
29

30
<main class="container">
31
    {#if status === 'loading'}
32
        <p>載入中...</p>
33
    {:else if status === 'ready'}
34
        <button onclick={handleCheckIn}>
35
            打卡 - {store.name}
36
        </button>
37
    {:else if status === 'success'}
38
        <p>✅ 打卡成功！</p>
39
    {/if}
40
</main>

Odoo 後端 API#

1
class AttendanceController(http.Controller):
2

3
    @http.route('/api/attendance/check-in', type='json', auth='public')
4
    def check_in(self, **kwargs):
5
        line_user_id = kwargs.get('line_user_id')
6
        store_id = kwargs.get('store_id')
7
        latitude = kwargs.get('latitude')
8
        longitude = kwargs.get('longitude')
9

10
        # 查詢員工
11
        employee = request.env['hr.employee'].sudo().search([
12
            ('line_user_id', '=', line_user_id)
13
        ], limit=1)
14

15
        if not employee:
16
            return {'success': False, 'error': '員工未綁定'}
17

18
        # 建立打卡記錄
19
        attendance = request.env['hr.attendance'].sudo().create({
20
            'employee_id': employee.id,
21
            'check_in': fields.Datetime.now(),
22
            'store_id': store_id,
23
            'latitude': latitude,
24
            'longitude': longitude,
25
        })
26

27
        return {'success': True, 'attendance_id': attendance.id}

專案成效#

指標	導入前	導入後
打卡方式	紙本簽到	LINE 行動打卡
統計作業	3 天/月	即時自動
代打問題	常發生	GPS 驗證杜絕
員工滿意度	60%	95%

技術重點#

LINE LIFF SDK 整合
Svelte 5 響應式開發
GPS Geolocation API
Odoo REST API 設計