지식인의 숲

1.1 Titanium SDK 설치

최신 버전의 Titanium SDK를 설치했는지 확인하세요. 최신 버전은 보안 업데이트와 새로운 기능을 포함하고 있어 중요합니다.

$ npm install -g titanium
$ ti sdk install latest

1.2 프로젝트 생성

새 Titanium 프로젝트를 생성하거나 기존 프로젝트를 사용하세요.

$ ti create --name PushNotificationApp --id com.example.pushapp --platforms android,ios

1.3 필요한 모듈 설치

푸시 알림을 위해 필요한 모듈을 설치합니다. Titanium에서는 주로 'ti.cloudpush' 모듈을 사용합니다.

$ ti sdk install -b master -d ti.cloudpush

2.1 Apple Developer 계정 설정

Apple Developer 계정에 로그인하고 다음 단계를 수행합니다:

• 앱 ID 생성
• 푸시 알림 기능 활성화
• SSL 인증서 생성

2.2 Xcode 프로젝트 설정

Titanium 프로젝트를 Xcode에서 열고 다음을 확인합니다:

• Capabilities 탭에서 Push Notifications 활성화
• 올바른 프로비저닝 프로필 선택

2.3 Titanium 프로젝트 설정

tiapp.xml 파일에 다음 설정을 추가합니다:

<ios>
    <plist>
        <dict>
            <key>UIBackgroundModes</key>
            <array>
                <string>remote-notification</string>
            </array>
        </dict>
    </plist>
</ios>

3.1 Firebase 프로젝트 설정

Firebase 콘솔에서 다음 단계를 수행합니다:

• 새 프로젝트 생성
• Android 앱 추가
• google-services.json 파일 다운로드

3.2 Titanium 프로젝트 설정

다운로드 받은 google-services.json 파일을 프로젝트의 적절한 위치에 복사합니다:

project_root/platform/android/google-services.json

tiapp.xml 파일에 다음 설정을 추가합니다:

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application>
            <service android:name="com.google.firebase.messaging.FirebaseMessagingService">
                <intent-filter>
                    <action android:name="com.google.firebase.MESSAGING_EVENT"/>
                </intent-filter>
            </service>
        </application>
    </manifest>
</android>

3.3 필요한 모듈 설치

Firebase Cloud Messaging을 사용하기 위해 필요한 모듈을 설치합니다:

$ ti sdk install -b master -d ti.playservices
$ ti sdk install -b master -d ti.cloudpush

4.1 푸시 알림 초기화

앱이 시작될 때 푸시 알림 서비스를 초기화해야 합니다. 이는 주로 app.js 파일에서 수행됩니다:

var CloudPush = require('ti.cloudpush');

// iOS에서 권한 요청
if (Ti.Platform.name === 'iPhone OS') {
    Ti.App.iOS.registerUserNotificationSettings({
        types: [
            Ti.App.iOS.USER_NOTIFICATION_TYPE_ALERT,
            Ti.App.iOS.USER_NOTIFICATION_TYPE_SOUND,
            Ti.App.iOS.USER_NOTIFICATION_TYPE_BADGE
        ]
    });
}

// 푸시 알림 초기화
CloudPush.init({
    android: {
        senderID: 'YOUR_FIREBASE_SENDER_ID'
    },
    ios: {
        callback: deviceTokenSuccess,
        error: deviceTokenError
    }
});

// 디바이스 토큰 성공 콜백
function deviceTokenSuccess(e) {
    console.log('Device token: ' + e.deviceToken);
    // 여기서 서버에 토큰을 전송할 수 있습니다.
}

// 디바이스 토큰 에러 콜백
function deviceTokenError(e) {
    console.error('Failed to register for push notifications! ' + e.error);
}

4.2 푸시 알림 토큰 등록

디바이스 토큰을 얻은 후, 이를 서버에 등록해야 합니다. 이 과정은 앱이 처음 실행될 때나 토큰이 변경될 때마다 수행되어야 합니다:

CloudPush.retrieveDeviceToken({
    success: function(e) {
        var deviceToken = e.deviceToken;
        console.log('Device Token: ' + deviceToken);
        
        // 서버에 토큰 전송
        sendTokenToServer(deviceToken);
    },
    error: function(e) {
        console.error('Failed to retrieve device token: ' + e.error);
    }
});

function sendTokenToServer(token) {
    // 여기에 서버로 토큰을 전송하는 코드를 작성합니다.
    // 예: HTTP 요청을 사용하여 서버의 API에 토큰 전송
    var xhr = Ti.Network.createHTTPClient({
        onload: function(e) {
            console.log('Token sent to server successfully');
        },
        onerror: function(e) {
            console.error('Error sending token to server: ' + e.error);
        },
        timeout: 5000
    });

    xhr.open('POST', 'https://your-server-url.com/register-token');
    xhr.send({
        token: token,
        platform: Ti.Platform.name
    });
}

4.3 푸시 알림 처리

앱이 푸시 알림을 받았을 때 이를 처리하는 로직을 구현해야 합니다:

CloudPush.addEventListener('callback', function(evt) {
    alert(evt.payload);
});

CloudPush.addEventListener('trayClickLaunchedApp', function(evt) {
    Ti.API.info('Tray Click Launched App (app was not running)');
});

CloudPush.addEventListener('trayClickFocusedApp', function(evt) {
    Ti.API.info('Tray Click Focused App (app was already running)');
});

5.1 리치 푸시 알림

리치 푸시 알림은 텍스트 이상의 내용을 포함할 수 있습니다. 이미지, 비디오, 버튼 등을 추가하여 더 풍부한 정보를 전달할 수 있습니다.

// iOS에서 리치 푸시 알림 처리
if (Ti.Platform.name === 'iPhone OS') {
    var UserNotifications = require('ti.usernotifications');
    
    UserNotifications.registerNotificationCategories([{
        identifier: 'CATEGORY_IDENTIFIER',
        actions: [{
            identifier: 'ACTION_IDENTIFIER',
            title: 'Action Title',
            options: UserNotifications.ACTION_OPTION_FOREGROUND
        }]
    }]);
}

// 리치 푸시 알림 처리
CloudPush.addEventListener('callback', function(evt) {
    var payload = JSON.parse(evt.payload);
    if (payload.image) {
        // 이미지를 포함한 알림 표시
        showNotificationWithImage(payload.title, payload.message, payload.image);
    } else {
        // 일반 알림 표시
        Ti.UI.createNotification({
            title: payload.title,
            message: payload.message
        }).show();
    }
});

function showNotificationWithImage(title, message, imageUrl) {
    // 이미지를 포함한 알림 표시 로직
    // 플랫폼별로 다르게 구현해야 할 수 있습니다.
}

5.2 알림 그룹화

여러 알림을 하나의 그룹으로 묶어 표시할 수 있습니다. 이는 사용자의 알림 센터를 깔끔하게 유지하는 데 도움이 됩니다.

// iOS에서 알림 그룹화
if (Ti.Platform.name === 'iPhone OS') {
    var UserNotifications = require('ti.usernotifications');
    
    UserNotifications.setNotificationCategories([{
        identifier: 'GROUP_CATEGORY',
        options: UserNotifications.CATEGORY_OPTION_CUSTOM_DISMISS_ACTION
    }]);
}

// 알림 그룹화 처리
CloudPush.addEventListener('callback', function(evt) {
    var payload = JSON.parse(evt.payload);
    if (payload.group) {
        // 그룹화된 알림 표시
        showGroupedNotification(payload.group, payload.title, payload.message);
    } else {
        // 일반 알림 표시
        Ti.UI.createNotification({
            title: payload.title,
            message: payload.message
        }).show();
    }
});

function showGroupedNotification(group, title, message) {
    // 그룹화된 알림 표시 로직
    // 플랫폼별로 다르게 구현해야 할 수 있습니다.
}

5.3 알림 채널 (Android)

Android 8.0 (API 레벨 26) 이상에서는 알림 채널을 사용해야 합니다. 이를 통해 사용자가 알림 유형별로 설정을 관리할 수 있습니다.

// Android에서 알림 채널 생성
if (Ti.Platform.name === 'android') {
    var TiAndroid = require('ti.android');
    
    var channel = TiAndroid.createNotificationChannel({
        id: 'CHANNEL_ID',
        name: 'Channel Name',
        importance: TiAndroid.IMPORTANCE_DEFAULT
    });
    
    TiAndroid.getNotificationManager().createNotificationChannel(channel);
}

// 알림 발송 시 채널 지정
CloudPush.showNotification({
    title: 'Notification Title',
    message: 'Notification Message',
    channel: 'CHANNEL_ID' // Android only
});

6.1 적절한 빈도 유지

너무 많은 알림은 사용자를 피로하게 만들 수 있습니다. 중요하고 관련성 높은 정보만을 알림으로 보내세요.

// 알림 빈도 제어 예시
let lastNotificationTime = 0;
const MIN_NOTIFICATION_INTERVAL = 3600000; // 1시간 (밀리초)

function sendNotificationIfAppropriate(payload) {
    const currentTime = new Date().getTime();
    if (currentTime - lastNotificationTime >= MIN_NOTIFICATION_INTERVAL) {
        CloudPush.showNotification(payload);
        lastNotificationTime = currentTime;
    } else {
        console.log('알림 간격이 너무 짧습니다. 나중에 다시 시도합니다.');
    }
}

6.2 개인화된 알림

사용자의 이름, 선호도, 행동 패턴 등을 활용하여 개인화된 알림을 보내세요. 이는 참여율을 높이는 데 도움이 됩니다.

// 개인화된 알림 예시
function sendPersonalizedNotification(user) {
    const greeting = getTimeBasedGreeting();
    const recentActivity = user.getRecentActivity();
    
    CloudPush.showNotification({
        title: `${greeting}, ${user.name}!`,
        message: `${recentActivity}에 관심이 있으신가요? 새로운 추천이 있습니다.`
    });
}

function getTimeBasedGreeting() {
    const hour = new Date().getHours();
    if (hour < 12) return '좋은 아침';
    if (hour < 18) return '안녕하세요';
    return '좋은 저녁';
}

6.3 시간대 고려

사용자의 시간대를 고려하여 적절한 시간에 알림을 보내세요. 늦은 밤이나 이른 아침에 알림을 보내는 것은 피해야 합니다.

// 시간대를 고려한 알림 발송 예시
function scheduleNotification(user, payload) {
    const userTimezone = user.getTimezone();
    const userLocalTime = new Date().toLocaleString("en-US", {timeZone: userTimezone});
    const userHour = new Date(userLocalTime).getHours();

    if (userHour >= 9 && userHour < 21) {
        // 사용자의 현지 시간이 오전 9시에서 오후 9시 사이일 때만 알림 발송
        CloudPush.showNotification(payload);
    } else {
        // 그 외의 시간에는 다음 날 오전 9시로 알림 예약
        const nextMorning = new Date(userLocalTime);
        nextMorning.setHours(9, 0, 0, 0);
        if (userHour >= 21) nextMorning.setDate(nextMorning.getDate() + 1);
        
        scheduleLocalNotification(nextMorning, payload);
    }
}

function scheduleLocalNotification(date, payload) {
    // 로컬 알림 예약 로직 구현
    // 플랫폼별로 다르게 구현해야 할 수 있습니다.
}

6.4 옵트인 및 옵트아웃 옵션 제공

사용자가 알림 설정을 쉽게 관리할 수 있도록 하세요. 특정 유형의 알림을 선택적으로 받거나 거부할 수 있는 옵션을 제공하세요.

// 알림 설정 관리 UI 예시
function createNotificationSettingsUI() {
    const settingsWin = Ti.UI.createWindow({
        title: '알림 설정'
    });

    const notificationTypes = ['새 메시지', '새 프로젝트', '시스템 업데이트'];
    
    notificationTypes.forEach((type, index) => {
        const switch = Ti.UI.createSwitch({
            top: 50 + (index * 50),
            value: Ti.App.Properties.getBool(`notify_${type}`, true)
        });

        switch.addEventListener('change', (e) => {
            Ti.App.Properties.setBool(`notify_${type}`, e.value);
            updateNotificationSettings();
        });

        const label = Ti.UI.createLabel({
            text: type,
            left: 100,
            top: 50 + (index * 50)
        });

        settingsWin.add(switch);
        settingsWin.add(label);
    });

    return settingsWin;
}

function updateNotificationSettings() {
    // 서버에 사용자의 알림 설정 업데이트 요청
}