PubNub Developer Relations이 튜토리얼에서는 다음을 사용하여 React에서 사용자 친화적인 온라인 경매 애플리케이션을 만드는 방법을 보여드리겠습니다. PubNub 실시간 메시징 와 React-Bootstrap을 사용합니다. 경매 앱에는 작품 갤러리가 있고 입찰 이벤트에 참여하여 작품에 입찰할 수 있습니다. 입찰을 하는 동안 다른 사용자의 입찰을 실시간으로 확인할 수 있습니다. 또한 앱에는 관리자가 시청자와 입찰가를 추적하는 데 사용할 수 있는 대시보드가 제공됩니다.
입찰 앱의 사용 사례
경매 또는 입찰 앱에 대한 몇 가지 좋은 아이디어는 다음과 같습니다:
수집품 판매
일상용품 판매
의류 및 명품 의류 판매에 사용
예술품 경매 만들기
부동산
인앱 구매
그리고 더!
온라인 경매 앱의 예
경매 앱 제작에 React를 사용하는 이유는 무엇인가요?
React 는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. React는 HTML을 렌더링하기 위한 템플릿 언어와 몇 가지 함수 후크를 제공합니다. HTML/JavaScript 번들을 "컴포넌트"라고 합니다.
컴포넌트는 자바스크립트 함수와 유사합니다. 프로퍼티라고 불리는 임의의 입력을 받아들이고 React 엘리먼트를 반환합니다. 이러한 요소는 입찰 플랫폼의 화면에 표시되어야 할 내용을 설명합니다.
개발자들은 성능이 뛰어나고 변경 사항을 거의 즉각적으로 렌더링하기 때문에 ReactJS를 좋아합니다. ReactJS의 가장 큰 장점은 비교적 작은 프레임워크이며 배우는 데 시간이 많이 걸리지 않는다는 것입니다!
입찰 앱을 만드는 방법
전체 전체 GitHub 코드 저장소는 여기에서 찾을 수 있습니다.경매 플랫폼을 시작하려면 먼저 다음을 수행해야 합니다. PubNub 계정에 가입 에 가입하여 고유한 게시/구독 키를 받아야 합니다. 그런 다음 터미널에서 다음 명령을 사용하여 PubNub 패키지를 설치합니다. PubNub의 실시간 인프라는 입찰 프로세스를 간소화하여 원활한 사용자 경험을 보장합니다. 프로젝트에 PubNub 패키지를 설치하는 것으로 시작하세요:
npm install --save pubnub pubnub-react
필요한 라이브러리를 가져옵니다.
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를 초기화하는 방법은 다음과 같습니다.
const pubnub = new PubNub({
publishKey: 'myPublishKey',
subscribeKey: 'mySubscribeKey',
uuid: 'myUniqueUUID'
});
function App() {
return (
<PubNubProvider client={pubnub}>
<Chat />
</PubNubProvider>
);
}
애플리케이션을 입찰 포털과 관리자 대시보드로 나누어 보겠습니다. 입찰 포털은 고객이 경매 중에 가격을 입찰하는 데 사용됩니다. 그리고 대시보드는 관리자가 경매의 가치를 추적하는 데 사용할 수 있습니다.
경매 앱용 입찰 포털 만들기
경매 등록 생성하기
사용자를 등록할 수 있는 등록 모달을 만들어 보겠습니다. 등록을 필수로 설정하세요. 이렇게 하면 잠재 구매자로부터 들어오는 모든 입찰을 추적할 수 있습니다.
렌더링() 안에 넣습니다:
<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을 내려야 합니다:
npm install react-router-dom --save
탭 사이를 전환하여 라우터를 사용하여 단일 페이지 입찰 애플리케이션을 구축하는 방법입니다.
<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 컴포넌트를 재사용할 수 있습니다.
카드홀더 컴포넌트는 제품 페이지에서
태그가 전달한 값을 받습니다.
<Cardholder name="Art 1" description="Description of Art 1" image={image9}/>
다음은 다양한 제품 이름과 관련 자막 및 설명을 전달하여 여러 제품을 만드는 데 사용할 수 있는 Cardholder의 작은 코드 스니펫입니다. 또한 버튼이 제품에 따라 다른 PubNub 채널로 연결되도록 만들 수도 있습니다.
<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>
입찰하기
경매 애플리케이션에서 가장 흥미로운 부분은 입찰을 하는 페이지입니다. 제품 페이지의 버튼은 해당 PubNub 채널로 연결되며, 해당 채널은 다시 금액을 제출할 수 있는 해당 입찰 페이지로 연결됩니다.
<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 사용하기
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밀리초 이내에 제공합니다. 펍넙에서는 펍넙 대시보드에서 프레즌스를 활성화해야 합니다.
프레즌스를 활성화하는 방법은 다음과 같습니다.. 이제 이 코드를 실행하여 현재 PubNub 채널에 연결된 사용자/디바이스 수를 확인할 수 있습니다.
pubnub.hereNow({
channels: ["art"],
includeState: true
},(status,response)=> {
this.setState ({
people: response.totalOccupancy
});
});
입찰 수, 최고 입찰가, 시청자 수를 표시하도록 관리자 대시보드 카드를 디자인하는 방법은 다음과 같습니다. 그래프와 차트를 구현하여 이러한 값을 그래픽으로 나타낼 수도 있습니다.
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의 다른 방법을 알아보세요.
모바일 푸시 알림: 앱에서 떨어져 있는 모바일 사용자에게 채팅 메시지, 프로젝트 업데이트 또는 애플리케이션 업데이트에 대해 알립니다.
앱 컨텍스트: 데이터베이스를 설정하거나 호출하지 않고도 사용자에 대한 정보를 한 곳에 저장하세요.
액세스 관리자: 특정 사용자의 비공개 대화, 채널룸, 문서, 프로젝트에 대한 액세스를 제한하세요.
기능: 메시지 번역, 부적절한 메시지 검열, 새 사용자 도착 알림, 다른 사용자에게 멘션 알림 등의 기능을 제공합니다.
이벤트 및 작업: 애플리케이션 에코시스템의 이벤트를 중앙에서 관리하고 코드 없이 비즈니스 로직을 트리거할 수 있습니다.
더 알아보기
펍넙이 어떤 도움을 줄 수 있을까요?
이 문서는 원래 PubNub.com에 게시되었습니다.
저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 디바이스를 위한 실시간 상호작용을 구축, 제공, 관리할 수 있도록 지원합니다.
저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.
PubNub 체험하기
라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.
설정하기
PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.
시작하기
사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.
