PubNub Developer Relationsこのチュートリアルでは、Reactを使用してユーザーフレンドリーなオンライン・オークション・アプリケーションを構築する方法を紹介します。 PubNubリアルタイムメッセージングとReact-Bootstrapを使用します。このオークションアプリには作品のギャラリーがあり、入札イベントに参加して作品に入札することができます。入札している間、同時に他のユーザーの入札をリアルタイムで確認することができます。また、アプリにはダッシュボードがあり、管理者は閲覧者とその入札額を追跡することができます。
入札アプリの使用例
オークションや入札アプリには、次のような素晴らしいアイデアがあります：
収集品の販売
日用品の販売
衣料品や高級衣料品の販売
美術品のオークション
不動産
アプリ内購入
などなど！
オンラインオークションアプリの例
なぜReactを使ってオークションアプリを作るのか？
Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。Reactは、HTMLをレンダリングするためのテンプレート言語といくつかの関数フックを提供します。HTML/JavaScriptのバンドルは「コンポーネント」と呼ばれます。
コンポーネントはJavaScriptの関数に似ている。propsと呼ばれる任意の入力を受け取り、React要素を返します。これらの要素は、入札プラットフォームの画面に表示されるべきものを記述します。
ReactJSは非常にパフォーマンスが高く、ほぼ瞬時に変更をレンダリングするため、開発者は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 React FrameworkはPubNub Javascriptのラッパーです。それはReactとの統合を簡素化するためにいくつかの追加機能を追加します。あなたのReactコンポーネントとPubNubの間の統合を得るために、pubnub-reactは、あなたのUIにデータをレンダリングする必要があるときに、何らかの困難や余分な作業なしでこれを得るための方法です。
ここでは、入札システム全体で安全な通信を確保する認証システムを提供するアプリケーションでPubNubを初期化する方法を説明します。
const pubnub = new PubNub({
publishKey: 'myPublishKey',
subscribeKey: 'mySubscribeKey',
uuid: 'myUniqueUUID'
});
function App() {
return (
<PubNubProvider client={pubnub}>
<Chat />
</PubNubProvider>
);
}
アプリケーションを入札ポータルと管理ダッシュボードに分けましょう。入札ポータルは、顧客がオークション中に価格を入札するために使用します。そして、ダッシュボードは管理者がオークションの値を追跡するために使用することができます。
オークションアプリの入札ポータルの作成
オークションの登録を作成する
ユーザーを登録するための登録モーダルを用意しましょう。登録は必須にしましょう。こうすることで、購入希望者からの入札をすべて追跡することができます。
render()の中です：
<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 Routerと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>
入札アプリでProducts - PubNubチャンネルを使用する
ProductsはライブオークションアプリにおけるPubNubのさまざまなチャンネルを表します。異なるアート製品のボタンが異なるチャネルにつながるようにReactコンポーネントを再利用できます。
Cardholderコンポーネントは
タグによって渡される値を受け取ります。
<Cardholder name="Art 1" description="Description of Art 1" image={image9}/>
これは、異なる商品名とそれに関連するサブタイトルと説明を渡すことで、多数の商品を構築するために使用できます。さらに、ボタンを商品によって異なる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();
}
入札ダッシュボードの構築
入札アプリでプレゼンスを使用する
プレゼンスは、PubNubのチャネルに接続しているユーザーやデバイスのステータスをミリ秒単位で配信します。PubNubではPubNubダッシュボードでプレゼンス機能を有効にする必要があります。
プレゼンス機能を有効にする方法は次のとおりです。.このコードを実行すると、現在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はどのようにお役に立ちますか？
この記事はPubNub.comに掲載されたものです。
PubNubのプラットフォームは、開発者がWebアプリ、モバイルアプリ、IoTデバイス向けにリアルタイムのインタラクティブ機能を構築、配信、管理できるよう支援します。
私たちのプラットフォームの基盤は、業界最大かつ最もスケーラブルなリアルタイムエッジメッセージングネットワークです。世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。
PubNubを体験
ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する
セットアップ
PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。
始める
PubNubのドキュメントは、ユースケースやSDKに関係なく、あなたを立ち上げ、実行することができます。
