Projekts - Chat App

Atjaunots: 2024-11-05

Praktiskais projekts, lai izveidotu vienkāršu ziņapmaiņas lietotni ar servera un klienta pusēm, kas ļautu lietotājiem sūtīt un skatīt ziņojumus reāllaikā.

Saturs

Uzdevuma apraksts
Darba gaita
- Pamata līmenis
Nepieciešamie resursi
Nepieciešamās zināšanas
Ieteikumi
Programmēšana II SR
Paraugdatnes
- HTML

Uzdevuma apraksts

Šī projekta mērķis ir izstrādāt vienkāršu tērzētavas (chat) web lietotni, izmantojot NodeJS Express serveri, kas saglabā lietotāja ievadītos ziņojumus un atgriež iepriekšējās ziņas. Projekts ietver servera puses programmēšanu, API izveidi, un vienkāršu lietotāja saskarni ar HTML un JavaScript.

Projekta struktūra

/chat-app
├── front
│   ├── index.html       # Saskarne
│   └── script.js        # API pieprasījumu apstrādi un DOM atjaunināji
│
└── server
    ├── chat.txt         # Teksta fails ziņu glabāšanai
    ├── server.js        # Galvenais servera fails ar API galapunktiem
    ├── package.json     # NodeJS bibliotēkas

Darba gaita

Pamata līmenis

Servera sagatavošana

Uzstādīt NodeJS npm init ar servera failu (entry point) server.js;
Pievienot pakotnes:
1. express
2. cors
Izveidot API galapunktu /all, kas atgriež chat.txt stauru;
Izveidot API galapunktu /save, kas pievieno jaunu teksta rindiņu datnē chat.txt;

Saskarnes sagatavošana

Izmantojot parauga datni izveidot index.html
Izmantojot Fetch API, izsaukt /all galapunktu, lai saņemtu un parādītu visus iepriekšējos ziņojumus.
Apstrādāt pogas klikšķi, lai nosūtītu ziņojumu uz /save galapunktu, kā arī atjaunināt ziņojumu logu.

Padziļināti

izveidot galapunktu /random, kas atgriež nejauši izvēlētu rindiņu no datnes chat.txt;
izveidot galapunktu /check, kas pārbauda, vai tieši tāda rindiņa ir jau ierakstīta datnē chat.txt.

Paredzamais izpildes laiks: 240 min.

Nepieciešamie resursi

Programmnodošrinājums

Nepieciešamās zināšanas

Var izmantot API Zinašanu krātuvi, kur ir apkopotas pamata zināšanas par programmsaskarnes (API) jēgu, nepieciešamību, lietošanu, izveidošanu, drošību un NodeJS servera datnes sagatavošanu.

Ieteikumi

regulāri pārbaudīt un atkļūdot risinājumu;
ievērot labas prakses principus.

Programmēšana II SR

Aktivitāte vērsta uz šādām Programmēšana II sasniedzamajiem rezultātiem (SR):

Prasmes: Izstrādā programmsaskarni (API).
Prasmes: Izmanto dažādas datu struktūras un ar tiem saistītos pamatalgoritmus.
Prasmes: Lieto API (programmsaskarni) specializētu funkciju veikšanai.
Prasmes: Izmanto programmēšanas valodu un to bibliotēku dokumentāciju un palīdzības sistēmu, lai patstāvīgi apgūtu citas to piedāvātās iespējas.
Prasmes: Veido programmas kādā no programmēšanas valodām, t. sk. objektorientētajā valodā.

Paraugdatnes

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>P2 Chat</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- icons -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
  </head>
  <body class="bg-light">
    <div class="container mt-5">
      <h2 class="mb-4" style="color: #001c42">
        <i class="bi bi-chat"></i>
        Programmesana2.lv Chat App
      </h2>

      <!-- Chat Display Area -->
      <div
        class="border p-3 mb-4"
        id="chatDisplay"
        style="height: 75vh; overflow-y: auto; background-color: #f8f9fa"
      >
        <!-- Messages will be appended here -->
      </div>

      <!-- Input Area for New Message -->
      <div class="input-group mb-3">
        <input
          type="text"
          id="messageInput"
          class="form-control"
          placeholder="Ievadi ziņu..."
          aria-label="Message"
          aria-describedby="button-send"
        />
        <button
          class="btn btn-primary"
          style="background-color: #001c42"
          type="button"
          id="button-send"
        >
          Nosūtīt
          <i class="bi bi-send"></i>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Autors

Mārtiņš Bērziņš

Uzraksti atsauksmi uz [email protected] [email protected]