vte.cx의 백엔드 개발이 필요 없음(5. 데이터의 일치성)

마지막 => vte.cx 백엔드 개발 필요 없음(4. 전문 검색 및 OR 검색)
이번에는 호텔 예약 샘플 응용을 바탕으로 데이터 등록의 일치성을 설명한다.

데이터의 일치성을 고려하여 호텔 예약 응용 프로그램을 제작하다

우선 호텔을 예약하는 간단한 앱을 만들어 보자.
여기서 중요한 것은 여러 고객이 같은 방을 예약하고 싶을 때의 처리다.물론 방마다 한 명의 손님만 예약할 수 있다.절대로 여러 고객이 같은 방을 예약하게 해서는 안 된다.
예컨대 두 고객(A와 B)은 같은 시각 101호실의 여유 상황을 확인했다.그때 101은 비어 있었다.이후 A비B는 101을 예약했다.그 후 B도 101을 예약할 예정이다.B가 본 여유 상황은 애초 확인된 시기여서 A 예약은 반영되지 않았다.이런 상황에서 예약 버튼을 누르면'이미 예약을 했기 때문에 실수'가 필요하다.
이런 시스템을 만들기 위해서 vte.cx는 id를 바탕으로 하는 낙관적이고 배타적인 구조를 가지고 있다.
모든 entry에는 유일한 식별자 id가 있습니다. id는 업데이트 횟수를 포함하는revision입니다.(revision은 매번 업데이트할 때마다 +1) 이 리vision을 포함하는 id를 기록할 때 참조하여 이미 다른 고객이 업데이트한 후인지 판단합니다.
그러면 가능한 한 빨리 화면을 관리하는 새로운 항목에서 프로그램을 등록하는 다음 항목을 추가해 주십시오.
등록 방법은 지금까지 다 있어서 알아요.

room
 name
 reservation(boolean)

항목 일람표에 다음과 같은 내용을 표시하면 된다.(※ 지난번에 사용했던 사용자 등의 잔류도 문제 없음)

또 단점 관리에 추가/hotel의 단점을 추가했다.
(※ 지난번에 사용한/foo 잔류도 문제 없음)

로그인 후 설정 파일을 다운로드하고 업데이트합니다.

npm run download:template
npm run download:typings

응용 프로그램의 원본 코드는 다음과 같다.
index.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { useState } from 'react'
import axios from 'axios'

const App = () => {

  const [rooms, setRooms] = useState<VtecxApp.Entry[]>([])

  const initdata: VtecxApp.Entry[] = [
    {
      room: {
        name: '101',
        reserved: false
      },
      link: [
          {
              "___href": "/hotel/101",
              "___rel": "self"
          }
      ]
   },
   {
    room: {
      name: '102',
      reserved: false
    },
    link: [
        {
            "___href": "/hotel/102",
            "___rel": "self"
        }
    ]
   }
  ]

  const putrooms = async (req:VtecxApp.Entry[]) => {
    try {
      axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
      await axios.put('/d/hotel',req)
      getrooms()
    } catch (e) {
      alert('error:'+e)
    }
  }

  const getrooms = async () => {
    try {
      axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
      const res = await axios.get('/d/hotel?f')
      setRooms(res.data)
    } catch (e) {
      alert('error')
      console.log(e)
    }
  }

  const showrooms = () => {
    return rooms.map((entry,index) => {
      if (entry.room&&!entry.room.reserved) {
      return (
                <div key={index}>
                    <p>{entry.room.name}　
                    <button
                        onClick={() => {
                            reserve(entry)
                        }}
                    >
                        予約
                    </button>
          </p>
                </div>
      )
    }
  })
}

const reserve = async (entry:VtecxApp.Entry) =>{
  if (entry.room) {
    entry.room.reserved = true
    putrooms([entry])
  }
}

  return (
    <div>
      <button onClick={() => { putrooms(initdata) }}>
       初期化
      </button>
      <button onClick={() => { getrooms() }}>
       一覧
      </button>
      <br/>
      {showrooms()}
    </div>
  )

}

ReactDOM.render(<App/>, document.getElementById('container'))

npm run serve:index에서 시작하십시오(로그인하지 않은 경우 먼저 실행하십시오npm run serve:login.
그러면 다음 화면이 나타납니다. 초기화 버튼을 누릅니다.
호텔 방 일람표를 보여 주고 싶습니다.

이때 서버에 등록된 데이터는 다음과 같다.

방 번호 오른쪽에 있는 예약 버튼을 누르면 예약이 실행되고 명단에서 사라집니다.
101호실과 102호실을 각각 예약하세요.실행 취소하려면 초기화 버튼을 누릅니다.

낙관적 배타적 통제의 확인

그런 다음 다른 브라우저 탭을 열어 응용 프로그램을 표시합니다.
첫 번째 앱 화면에서 초기화 버튼을 누르고 다른 앱 화면에서 일람 버튼을 눌러 101호실을 예약하세요.그리고 첫 번째 프로그램으로 돌아가서 101호실 예약을 실행하세요.
이때 두 번째 앱이 101호실을 먼저 예약했기 때문에 첫 번째 앱에서 오류가 발생할 수 있다.예약을 실제로 실행하면 다음과 같은 오류가 발생할 수 있다고 생각합니다.

개발자 도구에서 오류 정보를 자세히 본 후{"feed" : {"title" : "Optimistic locking failed. Key = /hotel/101"}와 같다.
이것은 낙관적이고 배타적인 착오가 발생했다는 것을 의미한다.
즉, 첫 번째 프로그램에서 업데이트할 entry의 id가 두 번째 프로그램에서 +1 업데이트되었기 때문에 일치하지 않습니다.낙관적 배타적 오류인 만큼 이중 예약을 하지 않는 빈 방을 예약할 수 있다.
그나저나 강제로 덮어쓰는 방법도 있다.그것은 PUT 업데이트 시 id 항목이 포함되지 않기 때문에 낙관적인 배타 오류가 발생하지 않아도 업데이트할 수 있습니다.
이번엔 여기까지.수고하셨습니다.
다음 => vte.cx 개발은 백엔드가 필요 없음(6. 번호)