5. Page Control - jmini1234/tripmate GitHub Wiki

1. login

경로	짧은 설명
/(root)	로그인 페이지

contoller

1. google_login page 띄우기
2. google api 이용한 로그인 OAUTH
3. show log_out button
4. show chat button (./list.html)

---

2. Roomlist

경로	짧은 설명
/list.html	채팅방 리스트 페이지

contoller

firebase.database().ref('/fcmTokens').child(currentToken).set(firebase.auth().currentUser.uid);

유저 fcmtoken 저장

firebase.database().ref('messages/').limitToLast(12).on('value', callback);

[loadList(), displayList(roomlist)];

database에 있는 roomlist 전부 불러오기 및 보여주기 경로 : messages

firebase.database().ref('/status/'+getUserName()+'/location').set({
    status: clickRoom
  }).catch(function(error) {
    console.error('Error writing new message to Firebase Database', error);
  });

database에 현재 사용자가 클릭한 room의 위치 업데이트하기 경로 : /status/{username}/location 저장결과 : status : {clickRoom}

---

3. Chatting

경로	짧은 설명
/main.html	채팅방 페이지

contoller

firebase.database().ref('/messages/'+getRoom).limitToLast(12).on('child_added', callback);
  firebase.database().ref('/messages/'+getRoom).limitToLast(12).on('child_changed', callback);

user가 클릭한 room의 채팅방 message를 전부 불러오기 및 보여주기 경로 : messages/{currentUserRoom}

firebase.database().ref('/messages/'+getRoom).push({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.key + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image’s URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath,
          location : address,
          time: makeTime()
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });

user가 첨부한 image를 firebase stroage에 올리고, 그 url을 얻어 user가 클릭한 room의 채팅방 message로 저장 경로 : messages/{currentUserRom} 저장결과 messsage_key: { ​ imageurl: currnet user profile image, ​ location: current user location, ​ name: current user name, ​ storageUri: filepath, ​ time: current time }

 var callback= function(snap){
    console.log(snap.val().status);
    getRoom = snap.val().status;
    loadMessages(getRoom);
    console.log(userName);
    htmlroom.innerHTML = getRoom;
  }
  firebase.database().ref('/status/'+userName+'/location').on('value', callback)

database에 현재 사용자가 클릭한 room의 위치를 찾는 function이다. callback함수를 이용해서, 해당 위치 database의 snapshot을 찍고, 해당 위치의 각종 속성에 접근할 수 있도록한다. 경로:/status/{username}/location

firebase.database().ref('/status/'+getUserName()+"/bookmark").push({
    text: text,
    status: getRoom,
    time: time,
    image: output
  }, getToggle()).catch(function(error) {
    console.error('Error writing new message to Firebase Database', error);
  });

database에 현재 사용자가 클릭한 room의 위치에서 선택한 message를 mypage의 bookmark에 추가하기 경로: /status/{username}/bookmark 저장결과 bookmark_key{ ​ text: user click text massage ​ status: room name, ​ time: current time, ​ image: user click image message }

---

4. Mypage

경로	짧은 설명
/map.html	유저 마이페이지

contoller

function loadBook() {  // Loads the last 12 messages and listen for new ones.
  var callback = function(snap) {
    console.log(snap);
    var data = snap.val();
    for(var key in data){
      //  console.log(data[key]);
       displayBook(data[key]);
    }

  };
  firebase.database().ref('status/'+getUserName()+"/bookmark").on('value', callback);
}

[loadBook(), displayBook(roomlist)];

현재 user의 bookmark 정보를 mypage에 보여주기 위해 해당 리스트를 찾는다. callback함수를 이용해서, 해당 위치 database의 snapshot을 찍고, 해당 위치에 접근한다. 위치에 접근해서 얻은 data를 displaybook()함수를 이용해서 html과 연동한다. 경로 : status/{username}/bookmark