꽃가루 알레르기 LINE Bot의 데이터를 WEB 캘린더에 표시한다(꽃가루 캘린더 작성④)

개요

이비인후과의 개업 의사입니다.
꽃가루 알레르기 환자에게 사용할 수있는 꽃가루 비산 정보를 알 수있는 달력 응용 프로그램을 만들고 싶습니다.
지금까지 캘린더를 표시해 예정을 넣는 것과, 유저 인증의 구현, LINE의 데이터를 Firebase에 모으는 것까지 실시해 왔습니다.
Vue.js×FullCallendar로 WEB 캘린더 작성(꽃가루 캘린더 작성①)
Auth0로 간단하게 사용자 인증을 구현(꽃가루 캘린더 작성②)
꽃가루 알레르기 LINE Bot의 데이터를 node.js를 사용하여 Firebase에 출입한다(꽃가루 캘린더 작성③)

이번에는 LINEBot 데이터가 기록된 Firebase database 데이터를 캘린더에 표시하는 데 도전했습니다.

LINEBot의 기사는 이쪽
꽃가루 알레르기의 중증도를 판정하고 자신에게 맞는 시판 약을 가르쳐주는 LINE Bot의 작성

완성 동영상

만들기

1. Firebase의 Realtime Database 확인

LINE 데이터는 Firebase의 Realtime Database에 기록됩니다.
데이터는 다음과 같이 수납됩니다.



이번에는 이하의 정보를 취득해 중증도나 약제명, 위도 경도를 리얼타임으로 캘린더에 기입해 가고 싶습니다.
・postback.data(화분증의 중증도나 사용하고 있는 약제의 정보)
・postback.params.datatime(중증도 판정을 실시한 날이나 약제 사용 개시한 날의 정보)
·sorce.userID(LINE 사용자 ID)
개별 꽃가루 비산 정보를 표시하기 위해
・message.latitude(사용자 위치 정보 위도)
・message.latitude(사용자 위치 정보 경도)

데이터는 .(닷)으로 심해해 갈 수 있는 것 같습니다.

2. 구현

이전에 만든 Calendar.vue에 추가합니다.
Vue.js×FullCallendar로 WEB 캘린더 작성(꽃가루 캘린더 작성①)

methods: {}에 다음을 추가합니다.
위도나 경도는 사실은 데이터를 얻을 수 있는 것만으로 좋지만 이번에는 오늘의 날짜로 표시해 보았습니다.

childAdded(snap) {
      const message = snap.val();
      const mes = message.events[0];

      if (mes.type == "postback") {
        console.log(mes.postback.data);
        console.log(mes.postback.params.datetime);
        console.log(mes.source.userId);        

        this.calendarEvents.push({
          title: mes.postback.data,//重症度や薬剤
          start: mes.postback.params.datetime,
          end: mes.postback.params.datetime
        });
      }
      if (mes.type == "message") {        
        if(mes.message.type=="location"){
        console.log(mes.message.latitude);
        console.log(mes.message.longitude);
        userlat = mes.message.latitude;// 緯度
        userlong = mes.message.longitude;//経度
        };      
        this.calendarEvents.push({
          // title: mes.message.text,
          title: `緯度${userlat}`,
          start: "2020-01-19T09:00:00",
          end: "2020-01-19T10:30:00"
        },
        {
          title:`緯度${userlong}`,
          start: "2020-01-19T09:00:00",
          end: "2020-01-19T10:30:00" 
        }
        );
      }
    },

async created() { } 안에 다음을 추가하여 완성입니다.

 const ref_message = firebase.database().ref("protoout/studio/messageList");
 //新しいメッセージ2件だけ表示する
 ref_message.limitToLast(2).on("child_added", this.childAdded);

LINE에서 위치 정보를 보내면 위도와 경도가 표시됩니다.

고찰

Firebase의 데이터를 캘린더에 표시할 수 있었습니다.
다음은 기상 API에서 꽃가루 정보를 표시할 수 있도록 하고 싶습니다.