WebAPI / KML

Mis on WebAPI?

WebAPI (veebirakenduse programmeerimisliides) on reeglite ja protokollide kogum, mis võimaldab erinevatel programmidel omavahel Interneti kaudu suhelda. See pakub liidest, mille kaudu pääseb ligi serveris asuvale funktsionaalsusele või andmetele. WebAPI-d kasutatakse andmete vahetamiseks kliendi ja serveri vahel, näiteks ilmainfo, filmide, valuutakursside ja muu taolise saamiseks.

Kuidas saada API-võtit?

WebAPI-ga töötamiseks on sageli vaja unikaalset võtit, mis identifitseerib rakenduse, mis API-d kasutab. API-võtme saamise näidet võib vaadata populaarsete teenuste põhjal:

Google API-võtme hankimine

  1. Minge lehele Google Cloud Console.
  2. Looge uus projekt või valige olemasolev.
  3. Lubage vajalikud API-d, näiteks “Maps JavaScript API” kaartide kasutamiseks.
  4. Minge jaotisesse “Credentials” ja looge uus API-võti.
  5. Salvestage saadud võti – see on vajalik API-le päringute tegemiseks.

Yandexi API-võtme hankimine

  1. Minge veebilehele Yandex Developer.
  2. Valige jaotisest “Карты” vajalik API, näiteks “JavaScript API”.
  3. Registreerige uus rakendus ja hankige API-võti.
  4. Kasutage seda võtit oma päringutes API-le.

API-võtme kasutamine

API-võti lisatakse päringu parameetritesse, et identifitseerida teie rakendus ja anda juurdepääs andmetele. Näiteks, kui saadate päringu Google Mapsi teenusele, võib teie URL välja näha järgmiselt:

https://maps.googleapis.com/maps/api/js?key=TEIE_API_VÕTI&callback=initMap

Mis on KML?

KML (Keyhole Markup Language) on XML-põhine failivorming, mida kasutatakse geograafiliste andmete kuvamiseks kaardirakendustes, nagu Google Earth ja Google Maps. See võimaldab määratleda asukohad, rajad, polügoonid ja muud geograafilised objektid, mida saab visualiseerida interaktiivsetel kaartidel. KML võimaldab lisada ka objektidele seotud infot, näiteks kirjeldusi ja stiile, et muuta kaardiandmed veelgi arusaadavamaks ja visuaalselt atraktiivsemaks.

Kuidas KML-i kasutatakse?

KML-i kasutatakse peamiselt kaardi kohandamiseks ja spetsiifiliste andmete kuvamiseks, näiteks:

  • Märgitud kohtade lisamine kaartidele (näiteks vaatamisväärsused või huvipunktid).
  • Marsruutide ja teekondade visualiseerimine.
  • Erinevate alade ja piiride tähistamine kaardil.

KML võimaldab luua omaenda kaardikihte ja andmeid, mida saab kasutada koos olemasolevate kaartidega, et kuvada täpselt neid andmeid, mida vaja.

Api näidised

The Movie Database (TMDB) API kasutamine – Filmi ülevaade

Veebileht, mis kasutab The Movie Database (TMDB) API-d, et kuvada filmide loend žanri järgi. Žanri valimisel saadetakse spetsiaalset api-võtit sisaldavale api-le päring, mille järel api tagastab meile näiteks json-vormingus küsitud andmed.

Kood
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movies by Genre</title>
    <script src="js/script.js"></script>
    <script src="../js/script.js"></script> <!-- Kohandatud stiilide link -->

    <link rel="stylesheet" href="css/style.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/style.css">

</head>
<body class="" id="body">
  <div id="navbar"></div>
    <h1>Movies by Genre</h1>
    <select id="genreSelect">
        <option value="28">Action</option>
        <option value="12">Adventure</option>
        <option value="16">Animation</option>
        <option value="35">Comedy</option>
        <option value="80">Crime</option>
        <option value="99">Documentary</option>
        <option value="18">Drama</option>
        <option value="10751">Family</option>
        <option value="14">Fantasy</option>
        <option value="36">History</option>
        <option value="27">Horror</option>
        <option value="10402">Music</option>
        <option value="9648">Mystery</option>
        <option value="10749">Romance</option>
        <option value="878">Science Fiction</option>
        <option value="10770">TV Movie</option>
        <option value="53">Thriller</option>
        <option value="10752">War</option>
        <option value="37">Western</option>
    </select>
  <br>
  <br>
<!-- Filmide konteiner -->
    <div id="moviesContainer" class="container"></div>

  <footer>
    <strong>© The Movie Database API using | M.Dotskin</strong>
   </footer>

</body>
</html>
document.addEventListener('DOMContentLoaded', () => {
    const apiKey = 'dc7cd50448333d5fc9d42a7dfaa26950'; // API võti
    const genreSelect = document.getElementById('genreSelect'); // Žanri valik
    const moviesContainer = document.getElementById('moviesContainer'); // Filmide konteiner

    // Funktsioon filmide saamiseks žanri alusel
    async function getMoviesByGenre(genreId) {
        try {
            const response = await fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&with_genres=${genreId}&sort_by=vote_average.desc`);
            const data = await response.json();
            const movies = data.results;
            moviesContainer.innerHTML = ''; // Tühjendame filmide konteineri
            if (movies.length === 0) {
                moviesContainer.innerHTML = '<p>No movies found for the selected genre</p>'; // Kui filme ei leitud
                return;
            }
            // Iga filmi kuvamine
            movies.forEach(movie => {
                const posterUrl = movie.poster_path ? `https://image.tmdb.org/t/p/w200${movie.poster_path}` : 'https://via.placeholder.com/200x300?text=No+Image';
                const description = movie.overview ? movie.overview : 'Description not available';
                const movieDiv = document.createElement('div'); // Loome uue div'i
                movieDiv.classList.add('movie'); // Lisame klassi
                movieDiv.innerHTML = `
                    <img src="${posterUrl}" alt="${movie.title} Poster">
                    <h2>${movie.title}</h2>
                    <p>${description}</p>
                    <p>Release Date: ${movie.release_date}</p>
                `;
                moviesContainer.appendChild(movieDiv); // Lisame filmi konteinerisse
            });

        } catch (error) {
            console.error('Error loading movies:', error); // Vea käsitlemine
        }
    }

    // Funktsioon, mis käivitatakse žanri muutmisel
    async function onChange() {
        const genreId = genreSelect.value; // Valitud žanri ID
        if (genreId) {
            await getMoviesByGenre(genreId); // Laadime filmid
        } else {
            moviesContainer.innerHTML = '<p>Please select a genre</p>'; // Kui žanrit ei ole valitud
        }
    }

    // Algne filmide laadimine
    onChange();

    genreSelect.addEventListener('change', onChange); // Žanri muutmise kuulamine
});
Tulemus

Meil on filmide loend, pealkiri, kirjeldus, logo, žanr “Dokumentaal”

Yandex Map API kastamine – Sisseehitatud kaart

Veebileht sisaldab Yandexi kaarti, kus on märgitud konkreetne asukoht – näiteks teie kodu või muu oluline punkt. Kaardirakendus võimaldab kasutajatel leida selle asukoha hõlpsalt ja pakub võimalusi kohandatud kaartide loomiseks.

Kood
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Address on the Map</title>

  <!-- Bootstrapi stiilide link -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Kohandatud stiilide link -->
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body class="">
  <div id="navbar"></div>
  <h1>Address on the Map</h1>

  <div class="container">
    <!-- Kaardi konteiner -->
    <div id="map" style="width: 100%; height: 400px;"></div>
  </div>

  <!-- Yandex Maps'i API -->
  <script src="https://api-maps.yandex.ru/2.1/?lang=en_US" type="text/javascript"></script>

  <!-- JavaScript failide link -->
  <script src="js/script.js"></script>
  <script src="../js/script.js"></script>

  <!-- jQuery ja Bootstrapi JavaScript -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <footer>
    <strong>© Yandex Map API using | M.Dotskin</strong>
   </footer>
</body>
</html>

// Yandex Maps'i algus
ymaps.ready(init);
function init() {
  // Kaardi loomine
  var myMap = new ymaps.Map("map", {
    center: [59.433119, 24.811872], // Keskpunkt
    zoom: 16 // Suumimine
  });

  // Marker'i loomine
  var myPlacemark = new ymaps.Placemark([59.433119, 24.811872], {
    hintContent: 'Home', // Marker'i vihje
    balloonContent: 'My house) Come' // Marker'i ballooni sisu
  }, {
    iconLayout: 'default#image', // Ikoonilayout
    iconImageHref: 'img/home-heart.png', // Ikooni pilt
    iconImageSize: [32, 32], // Ikooni suurus
    iconImageOffset: [-16, -32] // Ikooni positsioneerimine
  });

  // Marker'i lisamine kaardile
  myMap.geoObjects.add(myPlacemark);
}

Link

Zone

Leave a Reply

Sinu e-postiaadressi ei avaldata. Nõutavad väljad on tähistatud *-ga