Projekts - Nejauši fakti API

Atjaunots: 2023-11-27

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

Saturs

Uzdevuma apraksts

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

Laika zonas lietotnes skats
Laika zonas lietotnes skats

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

Darba gaita

Pamata līmenis

Faktu iegūšāna

  1. Sastādīt blokshēmu, kas apraksta plānoto risinājumu.
  2. Sagatavot HTML, JS, CSS datņu struktūru, izmantojot HTML, CSS paraugus;
  3. Uzstādīt NodeJS npm init ar servera failu (entry point) api.js;
  4. Pievienot pakotnes:
    1. express
    2. cors
    3. axios
  5. Izveidot API galapunktu /get-fact, kas apstrādās pieprasījumu, ja ir padota pareiza atslēga (key, piemēram "123");
  6. Izsaukt no skata API galapunktu /get-fact ar parametru key un ievadīto atslēgu kā vērtību;
  7. 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;
  8. 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).
  9. 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

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

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ņš avatar
Mārtiņš Bērziņš

Uzraksti atsauksmi uz [email protected] [email protected]

Smiltenes vidusskolas logo