W tym samouczku pokażemy, jak zbudować przyjazną dla użytkownika aplikację aukcyjną online w React przy użyciu PubNub Real-time Messaging i React-Bootstrap. Aplikacja aukcyjna będzie zawierała galerię dzieł sztuki, a użytkownik będzie mógł dołączyć do wydarzenia licytacji, aby składać oferty na dzieła sztuki. Podczas składania ofert można jednocześnie sprawdzać oferty złożone przez innych użytkowników w czasie rzeczywistym. Aplikacja będzie miała również pulpit nawigacyjny, który może być używany przez administratora do śledzenia widzów i ich ofert.

Przypadki użycia aplikacji do licytowania

Kilka świetnych pomysłów na aukcję lub aplikację do licytowania to

Sprzedaż przedmiotów kolekcjonerskich
Sprzedaż przedmiotów codziennego użytku
Używanie aplikacji do sprzedaży odzieży i luksusowych ubrań
Tworzenie aukcji dzieł sztuki
Nieruchomości
Zakupy w aplikacji
I jeszcze więcej!

Przykłady aplikacji do aukcji online

Dlaczego warto używać Reacta do tworzenia aplikacji aukcyjnej?

React to biblioteka JavaScript do tworzenia interfejsów użytkownika. React udostępnia język szablonów i kilka haków funkcyjnych do renderowania HTML. Wiązki HTML/JavaScript nazywane są "komponentami".

Komponenty są podobne do funkcji JavaScript. Akceptują dowolne dane wejściowe zwane rekwizytami i zwracają elementy React. Elementy te opisują, co powinno pojawić się na ekranie dla danej platformy przetargowej.

Programiści uwielbiają ReactJS, ponieważ jest bardzo wydajny i renderuje zmiany niemal natychmiast. Najlepszą częścią ReactJS jest to, że jest to stosunkowo mały framework i nie wymaga zbyt wiele czasu na naukę!

Jak stworzyć aplikację do licytacji

The pełne repozytorium kodu GitHub można znaleźć tutajAby rozpocząć pracę z platformą aukcyjną, należy najpierw założyć konto PubNub aby uzyskać unikalne klucze publikowania/subskrybowania. Następnie należy zainstalować pakiet PubNub za pomocą poniższego polecenia w terminalu. Infrastruktura czasu rzeczywistego PubNub upraszcza proces składania ofert, zapewniając płynną obsługę. Rozpocznij od zainstalowania pakietu PubNub w swoim projekcie:

npm install --save pubnub pubnub-react

Zaimportuj wymagane biblioteki.

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 jest opakowaniem PubNub Javascript. Dodaje kilka dodatkowych funkcji, aby uprościć integrację z React. Aby uzyskać integrację między komponentami React i PubNub, pubnub-react będzie sposobem na uzyskanie tego bez żadnych trudności lub dodatkowej pracy, gdy trzeba renderować dane w interfejsie użytkownika.

Oto jak można zainicjować PubNub w aplikacji, która będzie dostarczać system uwierzytelniania zapewniający bezpieczną komunikację w systemie przetargowym.

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

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

Podzielmy aplikację na Bidding Portal i Admin Dashboard. Portal licytacji będzie używany przez klientów do licytowania cen podczas aukcji. Pulpit nawigacyjny może być używany przez administratorów do śledzenia wartości aukcji.

Tworzenie portalu licytacji dla aplikacji aukcyjnej

Tworzenie rejestracji dla aukcji

Miejmy modal rejestracji, aby zarejestrować użytkownika. Rejestracja powinna być obowiązkowa. W ten sposób można śledzić każdą ofertę, która przychodzi od potencjalnych nabywców.

Wewnątrz 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>

Jak utworzyć stronę główną dla aplikacji do licytowania

Routing pomaga nam zbudować jednostronicową aplikację aukcyjną w React. Aby użyć routingu, musimy pobrać React Router i React DOM:

npm install react-router-dom --save

W ten sposób można zbudować jednostronicową aplikację do licytacji za pomocą routerów, przełączając się między zakładkami.

<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>

Używanie produktów - kanałów PubNub w aplikacji przetargowej

Produkty reprezentują różne kanały PubNub w aplikacji aukcji na żywo. Możesz ponownie użyć komponentów React w taki sposób, aby przyciski na różnych produktach artystycznych prowadziły do różnych kanałów.

Komponent Cardholder odbiera wartości przekazywane przez tag

na stronie produktu.

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

Oto mały fragment kodu Cardholder, który można wykorzystać do zbudowania wielu produktów, przekazując różne nazwy produktów i powiązane z nimi napisy i opisy. Dodatkowo, przyciski mogą prowadzić do różnych kanałów PubNub w zależności od produktu.

<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>

Składanie oferty

Najbardziej interesującą częścią aplikacji aukcyjnej jest strona, na której użytkownik składa ofertę. Przyciski na stronie produktów prowadzą do odpowiadających im kanałów PubNub, które z kolei prowadzą do odpowiednich stron licytacji, gdzie można przesłać kwotę.

  <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>

Korzystanie z PubNub do przesyłania wiadomości w czasie rzeczywistym w aplikacji do licytowania

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();
}

Tworzenie pulpitu nawigacyjnego licytacji

Korzystanie z usługi Presence w aplikacji do obsługi licytacji

Obecność zapewnia status użytkowników i urządzeń połączonych z kanałami PubNub w dowolnym momencie w czasie krótszym niż milisekunda. PubNub wymaga włączenia funkcji Presence w PubNub Dashboard.

Oto jak włączyć funkcję Presence. Teraz możesz wykonać ten fragment kodu, aby dowiedzieć się, ilu użytkowników/urządzeń jest aktualnie połączonych z kanałem PubNub.

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

Oto jak można zaprojektować karty panelu administratora, aby wyświetlały liczbę ofert, najwyższą ofertę i liczbę widzów. Możesz także zaimplementować wykresy i tabele, aby przedstawić te wartości graficznie.

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;

Tworzenie aplikacji do licytowania: Pomysły na wdrożenie

Gratulacje! Teraz masz swój mały portal licytacyjny. Możesz mieć OAuth 2.0 do logowania zamiast modalnej nazwy użytkownika i możesz zaprojektować pulpit nawigacyjny za pomocą CSS, aby wyświetlać statystyki wielu dzieł sztuki. Możesz także dodać do swojej aplikacji bramki płatności i funkcję ceny rezerwowej, umożliwiając użytkownikom dokonywanie transakcji na platformie aukcyjnej online.

Zobacz, jak jeszcze PubNub może pomóc w dodaniu funkcji do twojego oprogramowania aukcyjnego.

Mobilne powiadomienia push: Powiadamiaj użytkowników mobilnych znajdujących się poza aplikacją o wszelkich wiadomościach na czacie, aktualizacjach projektu lub aktualizacjach aplikacji.
Kontekst aplikacji: Przechowuj informacje o użytkowniku w jednym miejscu bez konieczności konfigurowania lub wywoływania bazy danych.
Access Manager: Ogranicz dostęp do prywatnych rozmów, kanałów, dokumentów i projektów dla określonych użytkowników.
Funkcje: Tłumaczenie wiadomości, cenzurowanie nieodpowiednich wiadomości, ogłaszanie przybycia nowych użytkowników i powiadamianie innych użytkowników o wzmiankach.
Wydarzenia i akcje: Centralne zarządzanie zdarzeniami w ekosystemie aplikacji i uruchamianie logiki biznesowej bez kodu.

Więcej informacji

Jak PubNub może Ci pomóc?

Ten artykuł został pierwotnie opublikowany na PubNub.com

Nasza platforma pomaga programistom tworzyć, dostarczać i zarządzać interaktywnością w czasie rzeczywistym dla aplikacji internetowych, aplikacji mobilnych i urządzeń IoT.

Fundamentem naszej platformy jest największa w branży i najbardziej skalowalna sieć przesyłania wiadomości w czasie rzeczywistym. Dzięki ponad 15 punktom obecności na całym świecie obsługującym 800 milionów aktywnych użytkowników miesięcznie i niezawodności na poziomie 99,999%, nigdy nie będziesz musiał martwić się o przestoje, limity współbieżności lub jakiekolwiek opóźnienia spowodowane skokami ruchu.

Poznaj PubNub

Sprawdź Live Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację

Załóż konto PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij

Dokumenty PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub zestawu SDK.

Jak stworzyć internetową aplikację do składania ofert/licytacji w czasie rzeczywistym?