Jak stworzyć internetową aplikację do składania ofert/licytacji w czasie rzeczywistym?
Published: 2024-02-22 15:03:12

W tym samouczku pokażemy, jak zbudować przyjazną dla użytkownika aplikację aukcyjną online w React przy użyciu [PubNub Real-time Messaging](https://www.pubnub.com/products/pubnub-platform/) 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

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

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

[React](https://reactjs.org/) 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źć tutaj**](https://github.com/namrathasubramanya/reactjs-bidding-dashboard)Aby rozpocząć pracę z platformą aukcyjną, należy najpierw [założyć konto PubNub](https://dashboard.pubnub.com/signup) 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:

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

Zaimportuj wymagane biblioteki.

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

```js
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.

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

Wewnątrz `render()`:

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

### **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:

```js
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.

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

### **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.

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

Komponent Cardholder odbiera wartości przekazywane przez tag

na stronie produktu.

```js
<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.

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

### Składanie oferty

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

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

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

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

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

**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](https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-). Teraz możesz wykonać ten fragment kodu, aby dowiedzieć się, ilu użytkowników/urządzeń jest aktualnie połączonych z kanałem 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)

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.

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

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

1.  [Mobilne powiadomienia push](https://www.pubnub.com/docs/push/send): Powiadamiaj użytkowników mobilnych znajdujących się poza aplikacją o wszelkich wiadomościach na czacie, aktualizacjach projektu lub aktualizacjach aplikacji.
    
2.  [Kontekst aplikacji](https://www.pubnub.com/docs/general/metadata/channel-metadata): Przechowuj informacje o użytkowniku w jednym miejscu bez konieczności konfigurowania lub wywoływania bazy danych.
    
3.  [Access Manager](https://www.pubnub.com/docs/security/access-control): Ogranicz dostęp do prywatnych rozmów, kanałów, dokumentów i projektów dla określonych użytkowników.
    
4.  [Funkcje](https://www.pubnub.com/docs/general/serverless/functions/overview): Tłumaczenie wiadomości, cenzurowanie nieodpowiednich wiadomości, ogłaszanie przybycia nowych użytkowników i powiadamianie innych użytkowników o wzmiankach.
    
5.  [Wydarzenia i akcje](https://www.pubnub.com/docs/general/serverless/events-and-actions/overview): Centralne zarządzanie zdarzeniami w ekosystemie aplikacji i uruchamianie logiki biznesowej bez kodu.
    

Więcej informacji
-----------------

-   [Czym jest aplikacja eCommerce?](https://www.pubnub.com/learn/glossary/what-is-an-ecommerce-application/)
    
-   [Przegląd rozwiązań eCommerce PubNub](https://www.pubnub.com/solutions/ecommerce/)
    
-   [Demo aukcji w czasie rzeczywistym](https://www.pubnub.com/demos/auction/)
    

Jak PubNub może Ci pomóc?
=========================

Ten artykuł został pierwotnie opublikowany na [PubNub.com](https://www.pubnub.com/blog/creating-an-online-realtime-bidding-auction-app/)

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](https://www.pubnub.com/tour/introduction/), aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację
-----------------------

Załóż [konto](https://admin.pubnub.com/signup/) PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij
----------

[Dokumenty](https://www.pubnub.com/docs) PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub [zestawu SDK](https://www.pubnub.com/docs).