온라인 실시간 입찰/경매 앱을 만드는 방법
Published: 2024-02-22 15:15:11

이 튜토리얼에서는 다음을 사용하여 React에서 사용자 친화적인 온라인 경매 애플리케이션을 만드는 방법을 보여드리겠습니다. [PubNub 실시간 메시징](https://www.pubnub.com/products/pubnub-platform/) 와 React-Bootstrap을 사용합니다. 경매 앱에는 작품 갤러리가 있고 입찰 이벤트에 참여하여 작품에 입찰할 수 있습니다. 입찰을 하는 동안 다른 사용자의 입찰을 실시간으로 확인할 수 있습니다. 또한 앱에는 관리자가 시청자와 입찰가를 추적하는 데 사용할 수 있는 대시보드가 제공됩니다.

입찰 앱의 사용 사례
-----------

경매 또는 입찰 앱에 대한 몇 가지 좋은 아이디어는 다음과 같습니다:

-   수집품 판매
    
-   일상용품 판매
    
-   의류 및 명품 의류 판매에 사용
    
-   예술품 경매 만들기
    
-   부동산
    
-   인앱 구매
    
-   그리고 더!
    

온라인 경매 앱의 예

-   [_Ebay_](https://www.ebay.com/)
    
-   [_Kijiji_](https://www.kijiji.ca/)
    

**경매 앱 제작에 React를 사용하는 이유는 무엇인가요?**
-----------------------------------

[React](https://reactjs.org/) 는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. React는 HTML을 렌더링하기 위한 템플릿 언어와 몇 가지 함수 후크를 제공합니다. HTML/JavaScript 번들을 "컴포넌트"라고 합니다.

컴포넌트는 자바스크립트 함수와 유사합니다. 프로퍼티라고 불리는 임의의 입력을 받아들이고 React 엘리먼트를 반환합니다. 이러한 요소는 입찰 플랫폼의 화면에 표시되어야 할 내용을 설명합니다.

개발자들은 성능이 뛰어나고 변경 사항을 거의 즉각적으로 렌더링하기 때문에 ReactJS를 좋아합니다. ReactJS의 가장 큰 장점은 비교적 작은 프레임워크이며 배우는 데 시간이 많이 걸리지 않는다는 것입니다!

**입찰 앱을 만드는 방법**
----------------

**전체** [**전체 GitHub 코드 저장소는 여기에서 찾을 수 있습니다.**](https://github.com/namrathasubramanya/reactjs-bidding-dashboard)경매 플랫폼을 시작하려면 먼저 다음을 수행해야 **합니다**. [PubNub 계정에 가입](https://dashboard.pubnub.com/signup) 에 가입하여 고유한 게시/구독 키를 받아야 합니다. 그런 다음 터미널에서 다음 명령을 사용하여 PubNub 패키지를 설치합니다. PubNub의 실시간 인프라는 입찰 프로세스를 간소화하여 원활한 사용자 경험을 보장합니다. 프로젝트에 PubNub 패키지를 설치하는 것으로 시작하세요:

```js
npm install --save pubnub pubnub-react
```

필요한 라이브러리를 가져옵니다.

```js
import PubNub from 'pubnub';
import { PubNubProvider, usePubNub } from 'pubnub-react';
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import PropTypes from 'prop-types'
```

PubNub 리액트 프레임워크는 PubNub 자바스크립트의 래퍼입니다. React와의 통합을 간소화하기 위해 몇 가지 추가 기능을 추가합니다. UI에서 데이터를 렌더링해야 할 때 아무런 어려움이나 추가 작업 없이 React 컴포넌트와 PubNub 간의 통합을 얻으려면 `pubnub-react를` 사용하면 됩니다.

입찰 시스템에서 안전한 통신을 보장하는 인증 시스템을 제공할 애플리케이션에서 PubNub를 초기화하는 방법은 다음과 같습니다.

```js
const pubnub = new PubNub({
  publishKey: 'myPublishKey',
  subscribeKey: 'mySubscribeKey',
  uuid: 'myUniqueUUID'
});

function App() {
  return (
    <PubNubProvider client={pubnub}>
      <Chat />
    </PubNubProvider>
  );
}
```

애플리케이션을 입찰 포털과 관리자 대시보드로 나누어 보겠습니다. 입찰 포털은 고객이 경매 중에 가격을 입찰하는 데 사용됩니다. 그리고 대시보드는 관리자가 경매의 가치를 추적하는 데 사용할 수 있습니다.

**경매 앱용 입찰 포털 만들기**
-------------------

### **경매 등록 생성하기**

사용자를 등록할 수 있는 등록 모달을 만들어 보겠습니다. 등록을 필수로 설정하세요. 이렇게 하면 잠재 구매자로부터 들어오는 모든 입찰을 추적할 수 있습니다.

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1j7c/ce6facfb5ae3fe555b2cfd73af9a8dbe/Screen-Shot-2018-07-05-at-2.14.07-PM.png)

`렌더링()` 안에 넣습니다:

```js
<form onSubmit={this.handleSubmit}>
   <ModalHeader>Live Bidding Registration</ModalHeader>
      <ModalBody>
         <label>Name:</label>
         <input type="text" value={this.state.name} onChange={this.handleChangeName} className="form-control" />  
      </ModalBody>
      <ModalFooter>
         <Button type="submit" onClick={this.handleSubmit} color="success" className="btn btn-success">Register</Button>
         <Button color="danger" onClick={this.toggle}>Cancel</Button>
      </ModalFooter>
</form>
```

### **입찰 앱의 홈페이지를 만드는 방법**

라우팅은 React에서 단일 페이지 경매 애플리케이션을 구축하는 데 도움이 됩니다. 라우팅을 사용하려면 React 라우터와 React DOM을 내려야 합니다:

```js
npm install react-router-dom --save
```

탭 사이를 전환하여 라우터를 사용하여 단일 페이지 입찰 애플리케이션을 구축하는 방법입니다.

```js
<main>
   <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/products' component={Products}/>
      <Route path='/contact' component={Contact}/>
      <Route path='/art' component={Art}/>
      <Route path='/about' component={About}/>
      <Route path='/user' component={User}/>
      <Route path='/dashboard' component={Dashboard}/>
    </Switch> 
</main>
```

### **입찰 앱에서 제품 - PubNub 채널 사용하기**

여기서 제품은 라이브 경매 앱에서 PubNub의 다양한 채널을 나타냅니다. 다른 아트 상품의 버튼이 다른 채널로 연결되는 방식으로 React 컴포넌트를 재사용할 수 있습니다.

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1j7d/53c01292fc14d47514c92b7f96a4313b/Screen-Shot-2018-07-05-at-2.10.12-PM.png)

카드홀더 컴포넌트는 제품 페이지에서

태그가 전달한 값을 받습니다.

```js
<Cardholder name="Art 1" description="Description of Art 1" image={image9}/>
```

다음은 다양한 제품 이름과 관련 자막 및 설명을 전달하여 여러 제품을 만드는 데 사용할 수 있는 Cardholder의 작은 코드 스니펫입니다. 또한 버튼이 제품에 따라 다른 PubNub 채널로 연결되도록 만들 수도 있습니다.

```js
<Card>
   <CardImg top width="10%" src={this.props.image} alt="Card image cap" />
   <CardBody>
       <CardTitle><h1>{this.props.name}</h1></CardTitle>
       <CardSubtitle>Card subtitle</CardSubtitle>
       <CardText>{this.props.description}</CardText>
       <Route render={({ history}) => (
           <Button className="btn btn-info" onClick={() => { history.push(channelName) }}>
                Join the event
           </Button>
       )} />
    </CardBody>
</Card>
```

### 입찰하기

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1j7e/715a28fb97d0268bd1f20ed5e7a668db/Screen-Shot-2018-07-05-at-2.13.43-PM.png)

경매 애플리케이션에서 가장 흥미로운 부분은 입찰을 하는 페이지입니다. 제품 페이지의 버튼은 해당 PubNub 채널로 연결되며, 해당 채널은 다시 금액을 제출할 수 있는 해당 입찰 페이지로 연결됩니다.

```js
  <form onSubmit={this.handleSubmit} style={{marginLeft: 10 + 'em'}}>
      <h2> Starting bid: $30 </h2>
      <label>
         <FormControl type="number" pattern="[0-9]*" inputMode="numeric" value={this.state.value} onChange={this.handleChange} />
      </label>
      <Button className="btn btn-info btn-lg" type="submit" value="Submit" style={{marginLeft: 10 + 'px'}}>Place Bid</Button>
  </form>
```

### **입찰 앱의 실시간 메시징에 PubNub 사용하기**

```js
function handleSubmit(event) {
   var startingBid = 30;
   var data = localStorage.getItem('Username');
   var message = data +" : "+ this.state.value;
   if(data != null) {
      if(this.state.value > startingBid && this.state.value < 1000000) {
         pubnub.publish({
            message: message,
            channel: 'art'
         });
      } else {
         alert("Enter value between Starting Bid and 1000000!");
      }
   }else {
      alert("Enter username!");
   }
   event.preventDefault();
}
```

**입찰 대시보드 구축하기**
----------------

### **입찰 앱에서 Presence 사용**

Presence는 PubNub 채널에 연결된 사용자와 디바이스의 상태를 1밀리초 이내에 제공합니다. 펍넙에서는 펍넙 대시보드에서 프레즌스를 활성화해야 합니다.

[프레즌스를 활성화하는 방법은 다음과 같습니다.](https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-). 이제 이 코드를 실행하여 현재 PubNub 채널에 연결된 사용자/디바이스 수를 확인할 수 있습니다.

```js
pubnub.hereNow({ 
   channels: ["art"], 
   includeState: true 
},(status,response)=> { 
   this.setState ({ 
      people: response.totalOccupancy 
   }); 
});
```

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1j7f/66c33d092fafaec2f9161d25eb112908/Screen-Shot-2018-07-05-at-2.15.19-PM.png)

입찰 수, 최고 입찰가, 시청자 수를 표시하도록 관리자 대시보드 카드를 디자인하는 방법은 다음과 같습니다. 그래프와 차트를 구현하여 이러한 값을 그래픽으로 나타낼 수도 있습니다.

```js
import React, { useState } from 'react';
import { Row, Col, Card, CardBody } from 'reactstrap';
import PropTypes from 'prop-types';

function Cards({ data, highest, people }) {
  // State hooks
  const [collapse, setCollapse] = useState(true);
  const [fadeIn, setFadeIn] = useState(true);

  // Toggle functions using hooks
  const toggle = () => setCollapse(!collapse);
  const toggleFade = () => setFadeIn(prevFadeIn => !prevFadeIn);

  // useEffect can be used if you need to perform side effects, similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined in class components.
  // If needed, you can include useEffect hooks here.

  return (
    <div className="animated fadeIn">
      <Row>
        <Col xs="12" sm="6" md="4">
          <Card className="text-white bg-info card text-center">
            <CardBody>
              <blockquote className="card-bodyquote">
                <header>Number of Bids</header>
                <h1>{data}</h1>
              </blockquote>
            </CardBody>
          </Card>
        </Col>
        <Col xs="12" sm="6" md="4">
          <Card className="text-white bg-warning card text-center">
            <CardBody>
              <blockquote className="card-bodyquote">
                <header>Highest bid</header>
                <h1>{highest}</h1>
              </blockquote>
            </CardBody>
          </Card>
        </Col>
        <Col xs="12" sm="6" md="4">
          <Card className="text-white bg-success card text-center">
            <CardBody>
              <blockquote className="card-bodyquote">
                <header>Users online</header>
                <h1>{people}</h1>
              </blockquote>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

// PropType validations remain the same
Cards.propTypes = {
  data: PropTypes.string,
  highest: PropTypes.string,
  people: PropTypes.string,
};

export default Cards;
```

**입찰 앱 만들기: 구현을 위한 아이디어**
-------------------------

축하합니다! 이제 작은 입찰 포털이 완성되었습니다. 사용자 이름 모달 대신 OAuth 2.0을 로그인에 사용할 수 있으며, 여러 작품의 통계를 표시하기 위해 CSS를 사용하여 대시보드를 디자인할 수 있습니다. 또한 애플리케이션에 결제 게이트웨이와 예약 가격 기능을 추가하여 사용자가 온라인 경매 플랫폼 내에서 거래를 할 수 있도록 할 수 있습니다.

경매 소프트웨어에 기능을 추가하는 데 도움이 되는 PubNub의 다른 방법을 알아보세요.

1.  [모바일 푸시 알림](https://www.pubnub.com/docs/push/send): 앱에서 떨어져 있는 모바일 사용자에게 채팅 메시지, 프로젝트 업데이트 또는 애플리케이션 업데이트에 대해 알립니다.
    
2.  [앱 컨텍스트](https://www.pubnub.com/docs/general/metadata/channel-metadata): 데이터베이스를 설정하거나 호출하지 않고도 사용자에 대한 정보를 한 곳에 저장하세요.
    
3.  [액세스 관리자](https://www.pubnub.com/docs/security/access-control): 특정 사용자의 비공개 대화, 채널룸, 문서, 프로젝트에 대한 액세스를 제한하세요.
    
4.  [기능](https://www.pubnub.com/docs/general/serverless/functions/overview): 메시지 번역, 부적절한 메시지 검열, 새 사용자 도착 알림, 다른 사용자에게 멘션 알림 등의 기능을 제공합니다.
    
5.  [이벤트 및 작업](https://www.pubnub.com/docs/general/serverless/events-and-actions/overview): 애플리케이션 에코시스템의 이벤트를 중앙에서 관리하고 코드 없이 비즈니스 로직을 트리거할 수 있습니다.
    

더 알아보기
------

-   [전자상거래 애플리케이션이란 무엇인가요?](https://www.pubnub.com/learn/glossary/what-is-an-ecommerce-application/)
    
-   [PubNub 이커머스 솔루션 개요](https://www.pubnub.com/solutions/ecommerce/)
    
-   [실시간 경매 데모](https://www.pubnub.com/demos/auction/)
    

펍넙이 어떤 도움을 줄 수 있을까요?
====================

이 문서는 원래 [PubNub.com에](https://www.pubnub.com/blog/creating-an-online-realtime-bidding-auction-app/) 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 디바이스를 위한 실시간 상호작용을 구축, 제공, 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.

PubNub 체험하기
-----------

[라이브 투어를](https://www.pubnub.com/tour/introduction/) 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/signup/) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례나 [SDK에](https://www.pubnub.com/docs) 관계없이 [PubNub 문서를](https://www.pubnub.com/docs) 통해 바로 시작하고 실행할 수 있습니다.