DEV Community

Cover image for Comment créer une application d'enchères en ligne et en temps réel ?
PubNub [Français] profile image PubNub Developer Relations
PubNub Developer Relations for PubNub [Français]

Posted on

Comment créer une application d'enchères en ligne et en temps réel ?

Dans ce tutoriel, nous allons vous montrer comment construire une application de vente aux enchères en ligne conviviale dans React en utilisant PubNub Real-time Messaging et React-Bootstrap. L'application de vente aux enchères aura une galerie d'œuvres d'art et vous pouvez rejoindre l'événement d'enchères pour placer des offres sur l'art. Tout en plaçant vos enchères, vous pouvez simultanément vérifier les enchères placées par d'autres utilisateurs en temps réel. Votre application disposera également d'un tableau de bord que l'administrateur pourra utiliser pour suivre les visiteurs et leurs offres.

Cas d'utilisation d'une application d'enchères

Voici quelques bonnes idées pour une application d'enchères ou de vente aux enchères :

  • Vente d'objets de collection

  • Vendre des articles de tous les jours

  • Vendre des vêtements et des articles de luxe

  • Créer des enchères pour des œuvres d'art

  • Immobilier

  • Achats dans l'application

  • Et bien d'autres choses encore !

Exemples d'applications de vente aux enchères en ligne

Pourquoi utiliser React pour créer une application de vente aux enchères ?

React est une bibliothèque JavaScript pour la construction d'interfaces utilisateur. React vous offre un langage de modèle et quelques crochets de fonction pour rendre le HTML. Vos paquets de HTML/JavaScript sont appelés "composants".

Les composants sont similaires aux fonctions JavaScript. Ils acceptent des entrées arbitraires appelées props et renvoient des éléments React. Ces éléments décrivent ce qui doit apparaître à l'écran pour votre plateforme d'enchères.

Les développeurs aiment ReactJS parce qu'il est très performant et qu'il rend les changements presque instantanément. L'avantage de ReactJS est qu'il s'agit d'un cadre relativement petit et qu'il n'est pas trop long à apprendre !

Comment créer votre application d'enchères

Le dépôt de code GitHub peut être consulté ici.Pour démarrer votre plateforme d'enchères, vous devez tout d'abord créer un compte PubNub pour obtenir vos clés uniques de publication et d'abonnement. Ensuite, installez le paquet PubNub en utilisant la commande suivante dans votre terminal. L'infrastructure en temps réel de PubNub simplifie le processus d'enchères et garantit une expérience utilisateur fluide. Commencez par installer le package PubNub dans votre projet :

npm install --save pubnub pubnub-react
Enter fullscreen mode Exit fullscreen mode

Importez les bibliothèques requises.

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'
Enter fullscreen mode Exit fullscreen mode

Le cadre React de PubNub est une enveloppe du Javascript de PubNub. Il ajoute quelques fonctionnalités supplémentaires pour simplifier l'intégration avec React. Afin d'obtenir l'intégration entre vos composants React et PubNub, pubnub-react sera le moyen d'y parvenir sans aucune difficulté ou travail supplémentaire lorsque vous avez besoin de rendre des données dans votre interface utilisateur.

Voici comment vous pouvez initialiser PubNub dans votre application qui fournira le système d'authentification assurant une communication sécurisée à travers votre système d'enchères.

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

function App() {
  return (
    <PubNubProvider client={pubnub}>
      <Chat />
    </PubNubProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Divisons l'application en deux parties : le portail d'enchères et le tableau de bord de l'administrateur. Le portail d'enchères sera utilisé par les clients pour proposer des prix lors d'une vente aux enchères. Le tableau de bord peut être utilisé par les administrateurs pour suivre les valeurs de l'enchère.

Création du portail d'enchères pour votre application de vente aux enchères

Création de l'inscription à la vente aux enchères

Disposons d'une fenêtre modale d'inscription pour enregistrer l'utilisateur. Rendez l'enregistrement obligatoire. De cette façon, vous pouvez garder une trace de chaque enchère reçue de la part d'acheteurs potentiels.

A l'intérieur de 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>
Enter fullscreen mode Exit fullscreen mode

Comment créer une page d'accueil pour votre application d'enchères

Le routage nous aide à construire une application d'enchères à page unique dans React. Pour utiliser le routage, nous devons utiliser React Router et React DOM :

npm install react-router-dom --save
Enter fullscreen mode Exit fullscreen mode

Voici comment vous pouvez construire une application d'enchère à page unique en utilisant des routeurs en passant d'un onglet à l'autre.

<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>
Enter fullscreen mode Exit fullscreen mode

Utiliser Products - PubNub Channels dans votre application d'enchères

Les produits représentent ici les différents canaux de PubNub dans votre application d'enchères en direct. Vous pouvez réutiliser les composants React de manière à ce que les boutons des différents produits artistiques vous conduisent à différents canaux.

Le composant Cardholder reçoit les valeurs transmises par la balise

dans la page des produits.

<Cardholder name="Art 1" description="Description of Art 1" image={image9}/>
Enter fullscreen mode Exit fullscreen mode

Voici un petit extrait de code de Cardholder, qui peut être utilisé pour construire un certain nombre de produits en passant différents noms de produits et leurs sous-titres et descriptions associés. De plus, vous pouvez faire en sorte que les boutons vous conduisent vers différents canaux PubNub en fonction du produit.

<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>
Enter fullscreen mode Exit fullscreen mode

Placer une enchère

La partie la plus intéressante de votre application de vente aux enchères est la page où vous placez l'offre. Les boutons sur la page des produits vous conduisent aux canaux PubNub correspondants, qui à leur tour vous conduisent aux pages d'enchères correspondantes, où vous pouvez soumettre le montant.

  <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>
Enter fullscreen mode Exit fullscreen mode

Utiliser PubNub pour la messagerie en temps réel pour votre application d'enchères 

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();
}
Enter fullscreen mode Exit fullscreen mode

Construire un tableau de bord d'enchères

Utiliser Presence dans votre application d'enchères

Presence fournit le statut des utilisateurs et des appareils connectés aux canaux de PubNub à tout moment en moins d'une milliseconde. PubNub vous demande d'activer Presence sur leur PubNub Dashboard.

Voici comment activer la Présence. Vous pouvez maintenant exécuter ce bout de code pour savoir combien d'utilisateurs/appareils sont connectés à un canal PubNub en ce moment.

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

Voici comment vous pouvez concevoir les cartes du tableau de bord de l'administrateur pour afficher le nombre d'offres, l'offre la plus élevée et le nombre de spectateurs. Vous pouvez également mettre en place des graphiques et des diagrammes pour représenter ces valeurs graphiquement.

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;
Enter fullscreen mode Exit fullscreen mode

Création d'une application d'enchères : Idées de mise en œuvre

Nous vous félicitons ! Vous avez maintenant votre petit portail d'enchères. Vous pouvez utiliser OAuth 2.0 pour la connexion au lieu de la fenêtre modale du nom d'utilisateur et vous pouvez concevoir le tableau de bord à l'aide de CSS pour afficher les statistiques de plusieurs œuvres d'art. Vous pouvez également ajouter des passerelles de paiement et une fonctionnalité de prix de réserve à votre application permettant aux utilisateurs d'effectuer des transactions au sein de votre plateforme d'enchères en ligne.

Voyez comment PubNub peut vous aider à ajouter des fonctionnalités à votre logiciel de vente aux enchères.

  1. Notifications push sur mobile: Notifiez les utilisateurs mobiles qui ne sont pas dans l'application à propos des messages de chat, des mises à jour de projets ou des mises à jour d'applications.

  2. Contexte de l'application: Stockez les informations sur vos utilisateurs en un seul endroit sans avoir à configurer ou à appeler votre base de données.

  3. Gestionnaire d'accès: Restreignez l'accès aux conversations privées, aux salles de discussion, aux documents et aux projets pour des utilisateurs spécifiques.

  4. Fonctions: Traduire les messages, censurer les messages inappropriés, annoncer l'arrivée de nouveaux utilisateurs et informer les autres utilisateurs des mentions.

  5. Événements et actions: Gestion centralisée des événements dans l'écosystème de votre application et déclenchement de la logique métier sans code.

Pour en savoir plus

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, livrer et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie périphérique en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub

Découvrez le Live Tour pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer

Créez un compte PubNub pour un accès immédiat et gratuit aux clés PubNub.

Commencer

La documentation PubNub vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre SDK.

Top comments (0)