Projekts - Laikapstākļu API

Atjaunots: 2023-11-21

Praktiskais projekts, lai pielietotu pamata API zināšanas.

Saturs

Uzdevuma apraksts

Izstrādāt lietotni, kas atgriež pašreizējos laikapstākļus jebkurā pasaules pilsētā.

Laikapstākļu lietotnes skats

Laikapstākļu iegūšanai var izmantot OpenWeather API.

Darba gaita

Paredzamais izpildes laiks: 160 min.

Izstrāde

Pamata līmenis

  1. Sastādīt blokshēmu, kas apraksta plānoto risinājumu.
  2. sagatavot HTML, JS, CSS datņu struktūru, izmantojot HTML, CSS, JS paraugs;
  3. Izpētīt OpenWeather API dokumentāciju un izplānot test API pieprasījumu;
  4. Izveidot pieprasījuma saiti, lai iegūtu laikapstākļu datus ar ievadi;
  5. Apstrādāt atbildi, lai nolasītu datus;
  6. Nolasīt atbildes statusa kodu;
  7. Nolasīt informāciju par temperatūru un laikapstākļiem;
  8. Attēlot temperatūru un aprakstu HTML;
  9. Blokshēmā sakopēt koda rindiņas, kas raksturo risinājumu;

Padziļināti

  1. Izveidot pieprasījumu, lai iegūtu aprakstu latviešu valodā;
  2. Izveidot pieprasījumu, lai iegūtu ikonu;
  3. Pievienot nākamo 5 dienu laika prognozi;

Koda pārskats

Prezentēt savu kodu klasei, skaidrot savu risinājumu, atbildēt uz jautājumiem.

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 un drošību.

Ieteikumi

Programmēšana II SR

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

  • Zināšanas: Skaidro API pielietojumu un nepieciešamību.
  • Prasmes: Lieto API (programmsaskarni) specializētu funkciju veikšanai.

HTML, CSS, JS paraugs

Iespējamā failu struktūra

-index.html;
-script.js;
-styles.css;

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>Laikapstākļi</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="styles.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-search"></i>
            </span>
            <input
              type="text"
              class="form-control"
              placeholder="Ievadīt pilsētu"
              id="inp-city"
            />
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="btn-search"
            >
              Meklēt
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="div-results"></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;
}
.weather {
  text-align: center;
  font-size: 2rem;
}
.weather h2 {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

JS

const apiKey = "31162c4bf8ba2d80600ac912c2b5446e";
const divResults = document.getElementById("div-results");
const btnSearch = document.getElementById("btn-search");
const inpCity = document.getElementById("inp-city");
btnSearch.addEventListener("click", () => {
  const city = inpCity.value;
  if (city) {
    //TODO: definēt funkciju
    getWeatherByLocation(city);
  }
});
Autors
Mārtiņš Bērziņš avatar
Mārtiņš Bērziņš

Uzraksti atsauksmi uz [email protected] [email protected]

Smiltenes vidusskolas logo