Projekts - Laika zonas API

Atjaunots: 2023-11-21

Praktiskais projekts, lai izveidotu privātu API ar dažādiem galapunktiem, izmantojot NodeJS Express.

Saturs

Uzdevuma apraksts

Izstrādāt lietotni, kas atgriež pašreizējos servera laiku un laiku ievadītajā laika zonā.

Laika zonas pārveidošanai var izmantot Day.js biblioteku.

Darba gaita

Pamata līmenis

Servera laiks

Sastādīt blokshēmu, kas apraksta plānoto risinājumu.
sagatavot HTML, JS, CSS datņu struktūru, izmantojot HTML, CSS paraugus;
Uzstādīt NodeJS npm init ar servera failu (entry point) server.js;
Pievienot pakotnes:
Izveidot API galapunktu /current, kas atgriež servera laikazīmogu JSON formātā;
Izsaukt no skata API galapunktu /current;
Ierakstīt saņemto laiku skatā div ar id result-current;
Sakopēt blokshēmā kodu rindiņas, kas paskaidro katru blokshēmas posmu.

Laika zonas laiks

Izveidot API galapunktu /at-time-zone, kas saņem parametru tz ar ievadīto laika zonu, piemēra, "Europe/Riga";
Galapunkts atgriež laikazīmogu izvēlētajā laika zonā JSON formātā;
Izsaukt no skata API galapunktu /at-time-zone ar parametru tz un ievadīto laika zonas vērtību no inp-tz;
Ierakstīt saņemto laiku skatā div ar id result-tz;

Padziļināti

Uztaisīt skatu kā pulksteni:

Izsaukt abus galapunktus vienlaicīgi;
Noformēt rezultātu kā laiku HH:mm:ss
Izsaukt abus galapunktus ik pēc 1 sekundes;

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: Piesaista standartbibliotēku funkcionalitāti.
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ā.

HTML, CSS, JS paraugs

Iespējamā failu struktūra

-server.js;
-custom.css;
-index.html;
-script.js;

HTML

<!DOCTYPE html>
<html lang="lv">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pasaules laiks</title>
    <!-- bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <!-- icons -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
    <link rel="stylesheet" href="custom.css" />
  </head>
  <body>
    <div class="container" id="main-container">
      <!-- input form -->
      <div class="d-flex justify-content-between">
        <div class="col-12 col-lg-5">
          <div class="d-grid gap-2">
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="btn-current"
            >
              Servera laiks
            </button>
          </div>
          <div class="d-grid gap-2 mt-3">Servera laika rezultāts:</div>
          <div class="d-grid gap-2" id="result-current"></div>
        </div>
        <div class="col-12 col-lg-5">
          <div class="input-group">
            <span class="input-group-text" id="basic-addon1">
              <i class="bi bi-clock"></i>
            </span>
            <input
              type="text"
              class="form-control"
              placeholder="Ievadīt laika zonu"
              id="inp-tz"
            />
            <button class="btn btn-outline-secondary" type="button" id="btn-tz">
              Meklēt
            </button>
          </div>
          <div class="d-grid gap-2 mt-3">Laika zonas rezultāts:</div>
          <div class="d-grid gap-2" id="result-tz"></div>
        </div>
      </div>
    </div>
    <!-- javascript -->
    <script src="script.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CSS

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background-color: #d8e6e9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

Autors

Mārtiņš Bērziņš

Uzraksti atsauksmi uz [email protected] [email protected]