프로젝트 어플 만들면서 겪었던 경험들

너무 많고 많았지만 지금부터라도 기록해야겠다.

 

1. 서버에서 gpt를 호출해서 값을 넘겨주는데 가끔 서버측에서 실패하면 500 에러 나오고, 다시 채팅화면을 나갔다가 들어오면 이렇게 디폴트 상태로 뜬다. 서버 어디선가 에러난겨... flag false 라고 에러났다고 넘겨줍니다. 

500에러

다시 들어오면 나오는 aiAnswer의 default

이 오류를 해결하는데 시간이 꽤 걸렸다. 사실 별거 아니었음.  

 

ProgressStoryBloc : 인터뷰의 상태를 관리하는 bloc.

    );
          },
          addChatGptRetryTextBox: (_) {
            if (!state.flag) {
              emit(
                state.copyWith(
                  chatMessageList: List.from(state.chatMessageList)
                    ..removeWhere(
                      (element) =>
                          element.type == ChatMessageType.chatGptAnswer ||
                          element.type == ChatMessageType.loading,
                    )
                    ..add(
                      ChatMessageModel(
                        type: ChatMessageType.chatGptReload,
                        text: '',
                      ),
                    ),
                ),
              );
            }
          },

 

전체코드 중 몇가지는 생략됐지만, addChatGptRetryTextBox 라는 event를 만들고 그 이벤트는 flag 가 false일 때 (aiGPTAnswer이 default) 일 때 관리해주는 것이다. 

chatMessageList속에 기존에 있던 지피티 답변 또는 로딩중 일때 -> 즉, 실패했을때 나오는 default 말풍선 또는 로딩중일때를 지우고, 

chatMessageType이 chatGpt Reload 로 추가해주는 것이다.  이때 hatGpt Reload는 답변을 실패했을 때 나오는 말풍선과 다시 받기 아이콘 버튼이다 ! 

chatMessageType 타입은 이런식으로 에디터 질문과 가이드 멘트, 사용자의 답변, 로딩중일 때, 지피티 답변, 다시받기 로 이루어져 있음

 

enum ChatMessageType {
  editorQuestion,
  editorGuideMent,
  interviewerAnswer,
  loading,
  chatGptAnswer,
  chatGptReload,
}

 

chatting_view.dart 파일 안에서는 ProgressStroyBloc에 리스너로 state.flag 가 false 일 때 아까 만들어줬던 addChatGptRetryTextBox를 불러와준다.

builder로 현재 상태를 기반으로 UI를 빌드하면 끝 !!

 

  body: SafeArea(
                child: BlocConsumer<ProgressStoryBloc, ProgressStoryState>(
                  listenWhen: (prev, now) {
                    return prev.chatMessageList.length !=
                        now.chatMessageList.length;
                  },
                  listener: (context, state) {
                    if (state.flag == false) {
                      context.read<ProgressStoryBloc>().add(
                            const ProgressStoryEvent.addChatGptRetryTextBox(),
                          );
                    }
                  },
                  builder: (context, state) {
                    if (state.chatMessageList.isEmpty && !state.isFirst) {
                      return ErrorView(onButtonPressed: () {
                        context.read<ProgressStoryBloc>().add(
                              ProgressStoryEvent.init(
                                questionId: widget.questionId,
                                storyId: widget.storyId,
                                questionCount: widget.questionCount,
                                index: widget.index,
                                bgmUrl: widget.bgmUrl,
                              ),
                            );
                      });
                    }
                    return Column(
                      crossAxisAli

 

이렇게 서버 오류나면 default로 나오던 것이, 다시 받기 기능을 추가해주었다 !

다시 받기 아이콘 누르면 다시 답변을 잘 불러 옴 !! 

 

다시 어플 업데이트  !!!!! 해주면 끝이유 !!