개념 API를 사용하여 양식 응용 프로그램 작성 방법

React를 사용하는 자습서.js와 Express.js

Concept API는 2021년 5월 13일에 웹 개발자가 자신의 Concept workspace와 통합된 멋진 응용 프로그램, 예를 들어 저희의 Comotion을 만들 수 있도록 테스트 버전을 정식으로 출시했습니다.양식 도구의 경우 개념 API를 사용하여 양식 응답을 연결된 개념 데이터베이스에 저장합니다.이 강좌에서 html 폼이 있는 전자메일을 받아서 작업 영역에 저장할 수 있는 간단한 폼 도구를 만드는 방법을 보여 드리겠습니다.우리 시작합시다!

1. 관념 수립

우선 개념 계정을 만듭니다.그런 다음 데이터베이스 테이블("/Database"입력)을 만들고 다음과 같이 Email이라는 열을 추가합니다.

확장 아이콘 을 클릭하여 데이터베이스 객체를 자체 페이지로 엽니다.금방 올게요.

그런 다음 https://www.notion.so/my-integrations으로 이동하여 새 통합 작성을 선택하고 기본 또는 다른 이름으로 이름을 지정합니다.

데이터베이스 개념 페이지로 돌아가 오른쪽 상단에 있는 공유 단추를 누르고 아래 목록에 있는 초대 입력을 누르고 팝업 창에서 응용 프로그램을 선택하여 방금 만든 응용 프로그램과 데이터베이스를 공유합니다.이렇게 하면 API가 실제로 데이터베이스에 액세스할 수 있습니다.

2. Express를 사용하여 백엔드를 설정합니다.js

이 자습서에 대해 백엔드를 설정해야 하기 때문에 Express를 사용할 것입니다.이 곳에서 설정하는 방법을 읽을 수 있지만, 중요한 것은 새 폴더로 이동하고 터미널에 다음 명령을 입력하는 것입니다.

$ mkdir form-tool-backend
$ cd form-tool-backend
$ npm install express
$ npm install axios
$ npm install cors

form tool backend 폴더에 파일 응용 프로그램을 만듭니다.js는 일이 순조롭게 진행될 수 있도록 아래 내용을 붙여 넣으십시오.

// form-tool-backend/app.js

const express = require('express')
const axios = require('axios')
const app = express()
const port = 3002

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

왜 우리는 백엔드가 필요합니까?누설하고 싶지 않은 키를 사용해야 하기 때문이다.만약 누군가가 당신의 키를 얻게 된다면, 당신의 작업 공간에서 어떤 것도 읽을 수 있습니다.아주 무서워요.

3. API를 사용하여 데이터베이스 정보 검색

마지막으로, 우리 진정으로 건설을 시작합시다!나는 https://developers.notion.com/reference을 열 것이다. 왜냐하면 우리는 이 페이지를 자주 인용하기 때문이다.우선 키를 가져와야 하기 때문에 https://www.notion.so/my-integrations으로 돌아가서 프로그램을 선택한 다음 내부 통합 카드를 복사합니다.이거 스포일러 하지 마!

응용 프로그램에 다음 코드를 붙여 넣으십시오.js는 방금 복사한 영패로 시크릿키 변수를 대체합니다.그리고, 우리는 axios를 사용하여 데이터베이스 데이터를 얻는 루트를 만들 것입니다.

// form-tool-backend/app.js

const express = require('express')
const axios = require('axios')
const app = express()
const port = 3002

// REPLACE! Retrieved from https://www.notion.so/my-integrations
const secretKey = 'secret_***************'

// What we'll pass into axios
const headers = {
  'Content-Type': 'application/json',
  Authorization: `Bearer ${secretKey}`,
  'Notion-Version': '2021-08-16',
}

// Route to fetch database data
app.get('/:database_id', async (req, res) => {
  const { database_id } = req.params;
  const resp = await axios({
    method: 'GET',
    url: 'https://api.notion.com/v1/databases/' + database_id,
    headers
  });
  return res.json(resp.data);
})

app.use(cors())
app.use(express.json())
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

지금 저희가 테스트할 게 있어요!양식 도구 백엔드 폴더에서 다음을 실행합니다.

$ node app.js

브라우저에서 개념 데이터베이스를 되돌려주고 개념 URL에서 데이터베이스 id를 복사합니다. 다음 부분으로 표시됩니다.

이제 다른 터미널 탭에서 다음 명령을 실행하는 경우

curl http://localhost:3002/REPLACE_THIS_WITH_DATABASE_ID

너는 데이터베이스에서 데이터를 얻어야 한다.

4. React를 사용하여 프런트엔드를 설정합니다.js

다음에 우리는 앞부분을 만들어야 한다.이 경우 React를 사용합니다.터미널로, 모든 코드를 넣을 폴더로, 다음 명령을 입력하여 예시 프로그램을 만듭니다.

$ npx create-react-app form-tool
$ cd form-tool
$ npm start

우리 변화를 좀 할까요?응용 프로그램의 내용을 바꿉니다.js 를 입력하고 데이터베이스 id 값을 이전에 URL에서 복사한 값으로 바꿉니다.

// form-tool/src/App.js

import { useEffect, useState } from 'react';

const database_id = REPLACE_WITH_YOUR_DATABASE_ID;

function App() {
  const [db, setDB] = useState({});

  useEffect(() => {
    // We fetch the data from the local server that we're running
    fetch('http://localhost:3002/' + database_id).then(async (resp) => {
      setDB(await resp.json())
    });
  }, []);

  return (
    <div>
      {db.title?.[0]?.plain_text}
    </div>
  );
}

export default App;

이것은 백엔드에서 검색한 데이터를 가져와서 전단으로 가져갈 뿐입니다.데이터베이스 대상의 패턴이 좀 독특하기 때문에 여기서 공식 문서를 보십시오.만약 우리가 npm start를 실행한다면, 우리는 다음과 같은 정보를 얻어야 한다.

우리는 이미 정식으로 개념 작업 구역에서 데이터를 얻었다.만세!

5. 개념에 대한 응답 저장

마지막으로, 우리가 기다리고 있는 것은, 우리가 실제적으로 정보를 얻어서 데이터베이스에 저장하는 것입니다. 알겠습니까?우선, Concept에 전자 우편 + 이름을 백엔드에 보내는 간단한 폼을 추가합니다.

import { useEffect, useState } from 'react';

const database_id = REPLACE_WITH_YOUR_DATABASE_ID;

function App() {
  const [db, setDB] = useState({});

  // NEW! This will send the form information to our backend we setup
  const onSubmit = (e) => {
    e.preventDefault();
    fetch('http://localhost:3002/' + database_id, {
      method: 'POST',
      body: JSON.stringify({ email: e.target.email.value, name: e.target.name.value }),
      headers: { "Content-Type": 'application/json' }
    });
  }

  useEffect(() => {
    fetch('http://localhost:3002/' + database_id).then(async (resp) => {
      setDB(await resp.json());
    });
  }, []);

  return (
    <div>
      {db.title?.[0]?.plain_text}
      {/* NEW! This is an extremely simple form to collect the information */}
      <form onSubmit={onSubmit}>
        <input name="name" placeholder="Name" required />
        <input name="email" placeholder="Email" type="email" required />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

우리는 지금 매우 간단한 형식을 가지고 있다.지금 만약 우리가 표를 제출한다면 실제로는 아무 일도 일어나지 않을 것이다.이것은 우리가 백엔드 기능을 구축해야 하기 때문이다!Express 애플리케이션으로 전환하면 데이터, 이름, e-메일을 받아 데이터베이스로 보낼 게시물 경로를 만들 수 있습니다.데이터베이스의 항목은 페이지 개념에 해당하므로 데이터베이스 id를 상위로 하는 페이지를 만들어야 합니다.너는 https://developers.notion.com/reference/post-page을 참고하여 이것이 무엇을 의미하는지 더욱 잘 이해할 수 있다.

const express = require('express')
const axios = require('axios')
const cors = require('cors')
const app = express()
const port = 3002

// REPLACE! Retrieved from https://www.notion.so/my-integrations
const secretKey = 'secret_***************'

// What we'll pass into axios
const headers = {
  'Content-Type': 'application/json',
  Authorization: `Bearer ${secretKey}`,
  'Notion-Version': '2021-08-16',
}

// NEW! This is a new route that will actually send the information to Notion
app.post('/:database_id', async (req, res) => {
  const { database_id } = req.params
  const { name, email } = req.body
  await axios({
    method: 'POST',
    url: 'https://api.notion.com/v1/pages',
    headers,
    data: {
      parent: { database_id },
      properties: {
        "Name": { "title": [{ text: { content: name } }] },
        "Email": { "email": email }
      }
    }
  })
})

// Route to fetch 
app.get('/:database_id', async (req, res) => {
  const { database_id } = req.params;
  const resp = await axios({
    method: 'GET',
    url: 'https://api.notion.com/v1/databases/' + database_id,
    headers
  });
  return res.json(resp.data)
})

app.use(cors())
app.use(express.json())
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

이 프로그램을 시작하고 실행하면 노드 프로그램을 종료하고 다시 실행함으로써 백엔드를 다시 시작합니다.js, 우리는 표에 이름과 이메일을 입력한 후에 우리의 개념 데이터베이스에 저장할 수 있습니다!

6.보상:다음

이것은 폼 응답을 개념 데이터베이스에 저장하는 방법에 대한 강좌이지만, Commotion에서 응답을 누구의 개념 데이터베이스에 저장하는지 설명하지 않았다.이것은 사용자의 통합을 공공 통합으로 설정하고 사용자가 우리처럼 개념 계정을 연결할 수 있도록 해야 합니다.


우리는 다음까지 남을 것이지만, 실제로는 그리 나쁘지 않다.우리는 이미 75퍼센트의 일을 완성했다.또한 개념 작업공간과 함께 사용할 양식을 만들거나 개념 데이터베이스에 있는 연락처로 이메일을 보내려면 Comotion을 확인하십시오.우리는 이것이 유익하기를 바란다.