7. [Event] 약속 회신하기

번에는 생성한 약속에 대해서 상대방이 가능한 시간을 회신하는 시나리오를 개발하도록 합니다. 링크로 보낸 약속이 열리고 가능한 시간을 선택하면 보낸이에게 메일로 알려주는 기능까지 만들어 봅니다.

약속회신 시나리오를 생성하지 않았다면 0. 시나리오 생성하기를 따라서 약속 회신하기 시나리오를 만든 후에 아래 실습을 따라 해 주세요.

  1. 약속회신 시나리오를 작업하기 전에 테스트용으로 회신할 약속을 정합니다.

    1. 1. [Data] Firestore 준비에서 생성한 FIrestoreDatabase로 들어갑니다.

    2. Meet 컬렉션을 선택하고

    3. 생성한 약속 Document(데이터) 중에 테스트용을 하나 선택합니다.

    4. _SUID의 값을 선택해서 복사 해둡니다.

  2. 약속회신 시나리오를 열어서 편집을 시작합니다.

  3. 시나리오가 시작시에 특정 약속 데이터를 조회해 오는 이벤트를 추가합니다.

    1. Step5 선택

    2. 스텝 이벤트 사용 체크

    3. 이벤트 발생 시점최초 시작 전(init) 으로 선택

    4. 이벤트명에 약속열기 입력

  4. 시나리오를 개발하기 위해 임시로 필요한 조회될 시나리오의 정보를 가져오도록 합니다.

    1. 약속 열기 이벤트 선택

    2. 스크립트 추가

  5. 스크립트에 아래 내용을 입력합니다.

    let linkParam = f.Link.getLinkParam(); // 넘겨진 링크파람을 받습니다. 
    if(!linkParam){ // 만약에 linkParam이 없다면 (디버거에서 실행하거나 링크로만 열리는 경우) 
        linkParam = "<등록한약속의 _SUID로 대체>"  // 고정된 약속으로 열리도록 합니다.
    }
    f.Collection.addSector({_SUID:linkParam},'Meet');
    1. 위 스크립트를 복사해서 붙여넙니다.

    2. <등록한약속의 _SUID으로 대체> 영역을 1번 에서 복사한 _SUID 값으로 대체합니다.

  6. 새 서비스 호출을 생성하고 시스템명에 Firestore를 선택합니다.

  7. 링크로 전달된 SUID에 해당하는 약속을 조회해 오도록 서비스를 설정합니다.

    1. Firestore 콜렉션 명에 Meet 를 입력

    2. 보내는 데이터에 Meet 카테고리 추가

    3. 받는 데이터의 카테고리명에 Meet 카테고리 추가

    4. 덮어쓰기 선택

    5. 고급설정 클릭

    6. 검색 체크

    7. 해당 SUID 의 약속을 조회하는 검색조건 입력

      • 필드 명 : _SUID

      • 연산자 : ==

      • 필드 값 콜렉션키 : _SUID

  8. 해당 약속의 옵션들도 조회해오는 서비스를 추가 합니다. 약속옵션과 약속의 데이터 관계에 대해서는 1. [Data] Firestore 준비 를 참조하세요.

    1. 새 서비스 호출을 생성

    2. 시스템명에 Firestore를 선택합니다.

  9. 해당 약속의 약속시간들을 조회해 오도록 서비스를 설정합니다.

    1. Firestore 콜렉션 명에 MeetOption 를 입력

    2. 보내는 데이터에 Meet 카테고리 추가

    3. 받는 데이터의 카테고리명에 MeetOption 카테고리 추가

    4. 덮어쓰기 선택

    5. 고급설정 클릭

    6. 검색 체크

    7. 해당 SUID 의 약속을 조회하는 검색조건 입력

      • 필드 명 : MeetId

      • 연산자 : ==

      • 필드 값 콜렉션키 : _SUID

  10. 첫 화에 데이터를 연결합니다.

    1. Step5>Group1 을 선택해서

    2. 데이터 연결을 체크하고

    3. 카테고리에 “Meet” 를 입력해 주세요.

    4. "플렉스튜디오 사용성 조사" 에 Title 컬렉션 키를 넣고 적용 해주세요.

  11. "이은진님! 박혜지님과....." Text 컨트롤을 선택해서 아래 텍스트로 바꿔주세요.

    {% return _base.User.fBaseUserName.default %}님이 아래의 주제로 약속시간을 정하고 싶어합니다. 
    가능한 시간을 선택해주세요.
  12. "박혜지" Text 컨트롤을 선택해서 아래 텍스트로 바꿔주세요.

    {% return _base.User.fBaseUserName.default %}
  13. 약속 확정하는 스텝의 데이터를 연결합니다.

    1. Step7 > topWrap 레이아웃을 선택

    2. 데이터 연결 체크

    3. 카테고리명에 Meet를 입력

    4. 아래와 같이 매핑합니다.

      • 플렉스튜디오 사용성조사 : Title

      • 플렉스튜디오 워크스페이스 사용... : Detail

      • 16F K-StudioRoom : Place

  14. 약속 옵션을 선택하는 영역의 데이터를 연결합니다.

    1. 시간이 속한 Group1을 선택

    2. 데이터 연결을 체크

    3. 용도를 “조회” 로 선택

    4. 카테고리명을 MeetOption을 입력

    5. 아래와 같이 각 시간에 해당하는 컬렉션키를 "h[시간]" 으로 매핑합니다.

  15. 날짜(2024년 6월27일..) 을 선택해서 텍스트를 아래 스크립트로 변경합니다.

    {% f.Date(Load.sector.Date).format('M월DD일') +  " (" + f.Date(Load.sector.Date).getWeekDay() + ")" %}
  16. 시간을 약속잡기 생성할 때 가능한 시간으로 선택한 옵션만 나오도록 합니다. 해당 옵션들은 값이 1로 존재하기 때문에 값이 존재할 대만 나오게 하여서, 등록된 옵션만 선택가능하게 합니다.

    1. 시간단위 “08:00”를 선택

    2. 조건별 속성 설정체크

    3. 비교기준에 값이 존재할 때 를 선택

    4. 컨트롤 상태를 보이기 로 선택해서 값이 있는 경우만 보이도록 합니다.

    5. 체크시 저장할 값2 를 입력

    6. 체크해제 시 저장할 값1 을 입력 (입력하지 않을 경우 해제시에 아무 값이 없어지면서 해당 시간이 나타나지 않게 됩니다.)

  17. 위 내용을 모든 시간을 나타내는 체크박스들에 동일하게 적용합니다.

  18. Step7의 “선택 완료하기” 스텝버튼에 “선택완료” 이벤트를 추가합니다.

  19. 선택완료시 선택한 약속일/시간을 약속작성자에게 메일을 발송하는 기능을 추가합니다.

    1. 선택완료 이벤트에 새 스크립트를 추가

    2. 아래 스크립트를 복사하여 붙여넣습니다.

let possibleTimes ='' //선택된 시간들을 표현해줄 문자형태
let times = ['h8', 'h9', 'h10', 'h11', 'h12', 'h13', 'h14', 'h15', 'h16', 'h17', 'h18']
//선택가능한 시간의 컬렉션키들
_c.MeetOption.forEach((sector) => {
    times.forEach(time => { //times로 등록된 시간들의 컬렉션키를 모두 확인해서 
        if(sector[time] == "2"){ // 체크되어 있는 경우 선택된 시간을 possibleTimes에 추가
            possibleTimes+= ' ∙ ' + f.Date(Current.sector.date).format('M월DD일') + ' (' + f.Date(Current.sector.date).getWeekDay() + ')  ' + time.replace('h', '') + ":00"    + '<br>'       
        }
    })
})

//메일내용을 HTML형태로 꾸미고, 사이에 약속 주제와 가능한 시간들을 넣기 
let body = '<div style="width: 400px; padding: 24px 0; border-top: 2px solid #6B7684; border-bottom: 2px solid #6B7684;"><h2 style="color: #6441F7;">Flextudio</h2><h1>약속시간 전달 알림</h1><p style="padding:16px 0; font-size:14px; color: #6B7684;">'
+ "["+ _c.Meet[0].Title
+ "]" + '에 대한 회신이 왔어요.<br> 다음 시간에 가능해요 <br><br>'
+ possibleTimes
+ '</p><p style="font-size:13px; color: #6B7684;">Copyright(c) Flextudio. All right reserved.</p></div>'


//메일 보내기 
f.Mail()
    .setTitle("약속시간 전달 알림")
    .setBody(body)
    .setIsBodyHtml(true)
    .addReceiver(_c.Meet[0].fBaseUserNo)
    .send();
    

Last updated