[개발/운동로그] 3. 데이터 추가

엑셀의 최하단에 데이터 추가하는 화면을 만들 예정.

 

// api/googleSheetApi.js

export function postItem (sheetId, sheetName, apiKey, item) {
  const range = `${sheetName}!A1:D1`
  const params = { key: apiKey, valueInputOption: 'USER_ENTERED' }
  const body = {
    range: range,
    majorDimension: 'ROWS',
    values: [item.date, item.isCardio, item.isWeightTraining, item.weight, item.list]
  }
  return googleSheetApi.post(`${sheetId}/values/${range}:append`, body, { params })
}

// store/modules/googleSheet.js

export const actions = {
  // add
  addItem ({ commit }, {sheetId, sheetName, apiKey, item}) {
    googleSpreadSheetApi.postItem(sheetId, sheetName, apiKey, item)
      .then(response => {
      })
  }
}

구글 시트 엑셀 api 문서 를 보고 api 통신용 코드를 위와 같이 추가.

 

// store/modules/googleSheet.js

const dateOptions = {weekday: 'short', year: '2-digit', month: '2-digit', day: '2-digit'}

export class LogItem {
  // 생략
  
  constructor (item) {
    if (!arguments.length) {
      this.date = this.convertDateToString(new Date())
    } else {
      // 생략
    }
  }

  convertDateToString (date) {
    return date.toLocaleDateString('ko-KR', dateOptions)
  }
}

일자를 관리하기 쉽게 js에서는 Date 객체로 관리하기로 함.

문자열 -> Date, 통신시 Date -> 문자열 이렇게 전환하는걸 추가했다.

 

그리고 새로 추가하는 데이터는 일자만 현재 시간으로 세팅하게 만들려고 처음엔 파라미터가 없는 기본생성자를 만들려고 했는데 자바스크립트에서는 오버로딩이 안되나보다. 그래서 argument 개수로 함수내에서 로직 분리했다.

테이블은 기존과 동일한걸로 복붙해서 만들고 데이터 세팅하고 추가 버튼 누르면 구글 api로 요청이 간다.

body는 생각대로 갔는데,

{
  "error": {
    "code": 401,
    "message": "Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
    "status": "UNAUTHENTICATED"
  }
}

401 에러난다. 에러코드 보면 위와 같다.

아무래도 apiKey로는 get 밖에 못하나 보다. OAuth를 붙일때가 된듯..

 

깃헙 커밋 : 데이터 추가

---

날짜 참고 : https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date