Projekts - Nejauši fakti API

Atjaunots: 2023-11-27

Praktiskais projekts, lai izveidotu apvienoto API ar atslēgu.

Saturs

Uzdevuma apraksts
Darba gaita
- Pamata līmenis
  - Faktu iegūšāna
  - Padziļināti
Nepieciešamie resursi
Nepieciešamās zināšanas
Ieteikumi
Programmēšana II SR
HTML, CSS, JS paraugs
- HTML
- CSS

Uzdevuma apraksts

Izstrādāt lietotni, kas atgriež nejaušus faktus, ja ir ievadīta pareiza atslēga.

Faktu iegūšanai var izmantot Random Useless Facts API.

Darba gaita

Pamata līmenis

Faktu iegūšāna

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) api.js;
Pievienot pakotnes:
Izveidot API galapunktu /get-fact, kas apstrādās pieprasījumu, ja ir padota pareiza atslēga (key, piemēram "123");
Izsaukt no skata API galapunktu /get-fact ar parametru key un ievadīto atslēgu kā vērtību;
JSON formātā atgriezt statusu 401 un brīdinājumu tekstu, ja atslēgas nesakrīt, un izvadīt uz ekrāna brīdinājumu;
JSON formātā atgriezt nejaušu faktu, ja atslēgas sakrīt, un izvadīt uz ekrāna faktu un tā pastāvīgo saiti (URL).
Sakopēt blokshēmā kodu rindiņas, kas paskaidro katru blokshēmas posmu.

Padziļināti

Saīsināt patstāvīgo saiti, izmantojot GoTiny API:

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

HTML, CSS, JS paraugs

Iespējamā failu struktūra

-api.js;
-custom.css;
-index.html;
-main.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>Nejauši fakti</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-center">
        <div class="col-12 col-lg-5">
          <div class="input-group">
            <span class="input-group-text" id="basic-addon1">
              <i class="bi bi-key"></i>
            </span>

            <input
              type="text"
              class="form-control"
              placeholder="Ievadīt atslēgu"
              id="inp-key"
            />
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="btn-get"
            >
              Pieprasīt
            </button>
          </div>
          <div class="d-grid gap-2 mt-3">Atbilde:</div>
          <div class="d-grid gap-2" id="result-text"></div>
          <hr />
          <div class="d-grid gap-2" id="result-url"></div>
        </div>
      </div>
    </div>

    <!-- javascript -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
      crossorigin="anonymous"
    ></script>
    <script src="main.js"></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]