DB 대신 Nuxt로 스프레드시트 대작전

안녕하세요.저는 아사토입니다.☀
나는 전자 표를 데이터베이스로 사용하고 싶다.
현재 화제의 트위터 공간과 만날 수 있는 제품spaces.bz을 개발 중이다.
https://spaces.bz/
GAS에서 트위터 API를 두드려 스프레드시트의 원형을 기록하는 것부터 시작한다.
프로토타입 이후 "어렵게 이런 기회가 생겼으니 DB처럼 이 스프레드시트를 사용할 수 없겠지"라는 생각에 Nuxt+Spreadsheet 구성으로 제품을 개발했으니 체험기를 총결산하고 싶다!

이 보도가 해야 할 일

스프레드시트에서 데이터를 가져와 표시하는 Nuxt 응용 프로그램을 만듭니다.
샘플의 전자 표는 아래와 같다.
id
name
age
email
1
Test A
20
[email protected]
2
Test B
30
[email protected]
3
Test C
40
[email protected]

JSON 반납 스프레드시트를 만드는 GAS

스프레드시트 정보를 얻을 수 있는 API를 먼저 만듭니다.
GAS에서는 구성 프로그램이 웹 애플리케이션으로 공개되지만 GAS부터 시작된다.
전선.js

function doGet() {
  const users = getUsers()

  return ContentService
    .createTextOutput(JSON.stringify(users))
    .setMimeType(ContentService.MimeType.JSON)
}

function getUsers() {
  const ss = SpreadsheetApp.openById('スプレッドシートのID')
  const sheet = ss.getSheetByName('シート名')
  const rows = sheet.getDataRange().getValues()
  const keys = rows.splice(0,1)[0]

  const users = rows.map((row) => {
    const object = {}
    row.map((value, index) => {
      object[keys[index]] = value
    })
    return object
  })

  return users
}

전선을 좀 봅시다.

doGet 함수

이 코드의 첫 번째 간은 doGet 함수를 사용하는 것이다.
이후 웹 애플리케이션에 공개doGet 함수는 GET가 웹 애플리케이션에 공개된 URL을 요청할 때 시작하는 함수다.
https://developers.google.com/apps-script/guides/web
이번 코드에서 doGet 함수 시작 후 getUsers 호출 함수는 전자 표의 내용을 JSON으로 정형화합니다

return ContentService
  .createTextOutput(JSON.stringify(users))
  .setMimeType(ContentService.MimeType.JSON)

에서 JSON을 반환했습니다.

getUser 함수

다음은 getUser 함수를 살펴보자.

const ss = SpreadsheetApp.openById('スプレッドシートのID')

우선 목표 전자 표를 불러옵니다.스프레드시트의 ID는 스프레드시트의 URL에서 알 수 있듯이https://docs.google.com/spreadsheets/d/*****/edit 섹션입니다.

const sheet = ss.getSheetByName('シート名')

다음에 나는 그 전자 표의 ***** 작업표를 가져왔다.

const rows = sheet.getDataRange().getValues()

그리고 이 작업표 데이터를 입력한 단위 칸 데이터를 행위 단위로 가져옵니다.
예를 들어 シート名의 값은 다음과 같다.

rows = [
  ['id', 'name', 'age', 'email'],
  ['1', 'Test A', '20', '[email protected]'],
  ['2', 'Test B', '30', '[email protected]'],
  ['3', 'Test C', '40', '[email protected]']
]

const keys = rows.splice(0,1)[0]

다음은 rows의 첫 번째 배열이고 대입rows이다.이에 따라 keys,keys는 다음과 같다.

keys = ['id', 'name', 'age', 'email']

rows = [
  ['1', 'Test A', '20', '[email protected]'],
  ['2', 'Test B', '30', '[email protected]'],
  ['3', 'Test C', '40', '[email protected]']
]

이렇게 되면 rows json의 키가 되고, keys 남은 프로젝트가value가 되는 미래가 나타난다.

const users = rows.map((row) => {
  const object = {}
  row.map((value, index) => {
    object[keys[index]] = value
  })
  return object
})

그런 미래를 실현하는 코드가 바로 이것이다.rows에서 rows.map((row) => { 処理 })에서 하나씩 가져와 변수rows에 저장row.処理의 부분도 処理로 하나하나 추출row.map((value, index) => { 処理2 })의 요소로 한다row 중処理2에서 각 수조를 정돈하여 대상의 형상을 형성한다.
최종object[keys[index]] = value의 값은 이런 느낌이다.

users = [
  {
    id: 1,
    name: 'Test A',
    age: 20,
    email: '[email protected]'
  },
  {
    id: 2,
    name: 'Test B',
    age: 30,
    email: '[email protected]'
  },
  {
    id: 3,
    name: 'Test C',
    age: 40,
    email: '[email protected]'
  }
]

이것은 마지막 users 함수다.
이렇게 되면 웹 응용 프로그램을 공개할 때 GAS는 json으로 전자 표를 반환하는 작업표를 준비하고 웹 응용 프로그램을 공개할 것이다.

웹 응용 프로그램 공개

https://developers.google.com/apps-script/guides/web#test_a_web_app_deployment
사이트는 GAS 편집 위쪽의 "depurei"버튼에서 시작합니다.

[디자인] > [새 디자인]을 선택합니다.

[범주 선택] > [웹 페이지 적용]을 선택합니다.

'신설명문'에서 알기 쉬운 이름(production,test 등),'다음 사용자로 실행'에서는'자신','접근할 수 있는 사용자'에서는'전원'을 설정하고'deproy'를 선택한다.

(필요한 경우) [액세스 허용]을 선택합니다.

Google 인증을 통해...

Advanced를 선택하고 <프로젝트 이름>을 선택합니다.

Allow로서...

완성!!🎉
웹 애플리케이션에 적힌 URL은 API(웹 사이트)가 공개한 URL입니다.살짝 컬링 좀 해주세요.

$ curl -L <URL>

[
  {"id":1,"name":"Test A","age":20,"email":"[email protected]"},
  {"id":2,"name":"Test B","age":30,"email":"[email protected]"},
  {"id":3,"name":"Test C","age":40,"email":"[email protected]"}
]

반납했습니다!!
화면이 아니면 이해하기 어려워서 영상을 더 보내드렸어요.
그러니 Nuxt로 표시해라!

Nuxt로 API 표시 두드리기

마지막으로, Nuxt 프로그램에서 현재 공개된 API를 두드려서 데이터를 표시합니다.
먼저 API를 두드리기 위해 가져옵니다return.
https://axios.nuxtjs.org/

$ yarn add @nuxtjs/axios

@nuxtjs/axios에서도 모듈 등록을 진행하세요.
nuxt.config.js

  export default {
    ...
    modules: [
+     '@nuxtjs/axios'
    ],
    ...
  }

axios의 CORS 대책도 좋기 때문에 이렇게 해서 아까 만든 웹페이지 애플리케이션의 API를 치면 안 된다.
그럼,저는 proxy입니다.
nuxt.config.js

  export default {
    ...
    modules: [
      '@nuxtjs/axios'
    ],
+   axios: {
+     proxy: true
+   },
+   proxy: {
+     '/api': {
+       target: <ウェブアプリのURL>,
+       pathRewrite: { '^/api': '' }
+     }
+   },
    ...
  }

이렇게 되면 내부nuxt.config.js에서 axios를 통해 데이터를 얻으려 할 때 CORS 대책을 우회해 웹 애플리케이션의 API를 두드릴 수 있다.
마침 이 URL은 신뢰할 수 있는 URL입니다.
이렇게 되면 웹 응용 프로그램의 API가 준비되어 내가 페이지를 만들 것이다.
pages/index.vue

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>age</th>
          <th>email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='user in users' :key='user.id'>
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      this.users = await this.$axios.$get('/api')
    }
  }
}
</script>

좀 길지만 /api인 사람은 template과table만 사용하기 때문에 설명을 생략합니다.
중요한 것은 v-for방면이다.
이번에script에서methods기술getUsers()으로async-await불렀다.created는 getUsers()를 사용하여 웹 응용 API에서 전자 표의 데이터를 가져오고 데이터를 대입axios한다.
지금 페이지를 방문해 보시면...

스프레드시트와 같은 정보를 표시할 수 있어요!!🎉🎉🎉

총결산

이번에는 DB를 스프레드시트로 대체할 수 없나요

GAS의 웹 애플리케이션을 사용하여 스프레드시트의 정보를 되돌려 주는 API

를 만들어 보았습니다.

Nuxt 애플리케이션은 API를 사용하여 스프레드시트에 대한 정보를 표시합니다

.
해봤어!
여러 가지 참고 기사를 쓴 분들이 많았지만, 합기된 곳에서 어려움을 겪었기 때문에 이런 기사들을 일련으로 썼습니다.
이렇게 모든 것이 순조롭게 되었다...그렇게 생각해요...
다음!휴대폰도 그걸 움직일 수 있나요?
기대해주세요!😆...😢
spaces.bz도 많이 사랑해주세요!
https://spaces.bz/
속편이 공개되었습니다!
https://zenn.dev/at946/articles/bfd9d500359427