[이타인클럽앱] 도움요청 수락 구현 using React Native Firebase

etainclub(65)

Published in

#kr

Words

320

Reading

2 min

Listen

Play

도움 요청 내용 구현에 이어서 도움을 수락하는 부분을 구현하도록 하겠습니다.

도움 수락 흐름

도움 요청 메시지가 Notification 바에 나타남
Notification을 누르면 도움 요청 내용이 나타남
이 때, 도움 요청자의 평판, 지역 등의 정보가 함께 표시됨 (미구현)
수락 버튼과 거절 버튼 표시
거절 버튼시 앱 종료
수락 버튼 클릭
- 수락 확인 모달을 띄운다
- 모달에서 확인을 누르면, 도움 요청자의 전화번호로 문자 메시지를 보낸다.
  (현재 DB에 사용자 전화번호를 기록하지 않는다. 또 문자 메시지를 자동으로 발송하지 않고, 사용자가 전송을 클릭해야 한다.)

도움 요청 메시지 Notification

도움 수락 화면

도움 수락 화면에서 도움 요청을 한 사람의 평판과 지역 정보를 표시해주면 좋을 거 같습니다. 아직 이 부분은 미구현 상태라서 임의로 내용을 채웠습니다. 그리고 디자인이 볼품 없더라도 이해바래요~

도움 수락 모달

도움 요청의 신중함을 위해 추가적으로 모달 상자를 띄워 확인하도록 합니다. 모달 상자 구현은 이전글을 참고 바랍니다.
https://cafe.naver.com/etainclub/119

도움 수락 메시지 전송

앱에 설치된 기본 메시지앱을 통해서 수락 메시지를 보냅니다. 이 때 사용자가 전송 버튼을 눌러줘야 합니다. 메시지 전송을 위해 react-native-communications 라이브러리를 사용하는데, Android의 경우 추가적인 설정으로 자동으로 메시지 전송을 할 수 있다고 합니다. 그러나 iOS에서는 불가능하다고 합니다. 그래서 사용자가 전송 버튼을 클릭하는 방향으로 구현합니다.
참고. react-nativie-communications
https://github.com/anarchicknight/react-native-communications

코드 구현

그럼 코드 구현을 해보겠습니다.
먼저 AcceptForm.js파일을 만들고 아래와 같이 입력합니다.
WaitForm과 같이 수락 버튼을 눌렀을 때 추가적 확인을 위해 모달상자를 띄웁니다. 추가적인 설명은 생략하도록 합니다.

class AcceptForm extends Component {
  state = { showModal: false };

  // accept button press event handler
  onAcceptPress = () => {
    this.setState({ showModal: true });
  }

  // decline button press event handler
  onDeclinePress = () => {

  }

  // send text message
  onAccept = () => {
    // create an action to update the state
    this.props.acceptAsk(this.props.senderId, this.props.msgId);
    // send tex message
    console.log('text', this.props.notificationBody);
    Communications.textWithoutEncoding('01095573242', '안녕하세요. 도움 드릴께요');
  }

  // make the modal invisible
  onDecline = () => {
    this.setState({ showModal: false });
  }
 (생략)

위 코드에서 메시지를 보내는 부분은 다음입니다.
먼저 수락 버튼을 클릭했을 때, 이를 처리하는 action creator를 호출합니다. 여기서 Firestore에서 메시지를 찾아서 "accepted" 필드를 true로 만들어 주게 됩니다. 아래 코드와 같이요.

// action creator for ask accepted
export const acceptAsk = (senderId, msgId) => {
  return (dispatch) => {
    console.log('askAccepted Action');
    // update the asks db with sender id, message id
    firebase.firestore()
      .collection('asks')
        .doc(senderId)
          .collection('messages')
            .doc(msgId)
              .update({ accepted: true });
    // update state
    dispatch({
      type: ACCEPT_ASK
    });
  };
};

그 다음으로, 도움 요청자에게 문자 메시지를 보내는 부분을 구현합니다. 이것은 매우 간답합니다. 아래 Communications.textWithoutEncoding 함수를 주의깊게 봅니다. 여러 문서에서 text함수를 쓰는데, 저 같은 경우는 메시지 내용이 비정상적으로 나왔습니다. 그래서 textWithoutEncoding 메소드를 사용해야 합니다. 그리고 아래 코드에서는 전화 번호가 하드 코딩되어 있는데, 변수로 변경해서 사용하세요. 문자 메시지 내용도요. 추가적으로 멀티 언어도 고려해서 구현되면 좋겠죠.

onAccept = () => {
    // create an action to update the state
    this.props.acceptAsk(this.props.senderId, this.props.msgId);
    // send tex message
    console.log('text', this.props.notificationBody);
    Communications.textWithoutEncoding('010-xxxx-xxxx', '안녕하세요. 도움 드릴께요');
  }