WebAPI / KML - OLEKSANDR BOHATYROV / PORTFOOLIO

WebAPI selgitus:

WebAPI (Application Programming Interface) on liides, mis võimaldab erinevatel tarkvararakendustel omavahel suhelda ja andmeid vahetada üle võrgu, tihti interneti kaudu. See on mehhanism, mis võimaldab ühelt rakenduselt teisele pakkuda juurdepääsu teenustele ja andmetele ilma, et teine rakendus peaks teadma, kuidas need teenused on rakendatud. Näiteks, kui arendad veebisaiti või mobiilirakendust ja soovid integreerida seal Google Mapsi või mingit muud Google teenust, kasutad WebAPI-t selleks, et saaksid küsida Google’ilt kaarte, koordinaate või muud vajalikku teavet.

WebAPI-d pakuvad mitmesuguseid teenuseid, näiteks:

Andmete kustutamine (DELETE)

Andmete päring (GET)

Uue teabe lisamine (POST)

Andmete uuendamine (PUT)

Kuidas saada Google API võti:

Google pakub erinevaid teenuseid ja iga teenus vajab API võtit, et saaksid seda kasutada. Näiteks kui soovid kasutada Google Maps API-d või Google Places API-d, pead looma API võtit Google Cloudi kaudu.

Siin on sammud, kuidas seda teha:

Mine Google Cloud Console’isse: Mine aadressile Google Cloud Console.
Loo projekt: Kui sul ei ole veel projekti, siis loo uus projekt. Vali Select a project ja klõpsa New Project. Sisesta projekti nimi ja vali oma asukoht, seejärel klõpsa Create.
Luba vajalik API: Kui projekt on loodud, mine APIs & Services sektsiooni ja otsi vajalikku API-d (näiteks, Google Maps API või Google Places API) ning luba see.
Loo API võti: Mine jaotisse Credentials ja vali Create credentials -> API key. Süsteem genereerib unikaalse API võtme, mida saad oma projektis kasutada.
Piira API võtme kasutust: Turvakaalutlustel saad piirata API võtme kasutust (näiteks määrates, millised IP-aadressid või domeenid võivad seda kasutada), et vältida väärkasutust.

2. Mis on KML:

KML (Keyhole Markup Language) on märgistuskeel, mis on loodud geograafiliste andmete, näiteks punktide, joonte, polügoonide ja muude objektide kaardil kuvamiseks. KML-i kasutatakse asukohapõhiste andmete salvestamiseks ja vahetamiseks. Seda kasutavad laialdaselt sellised rakendused nagu Google Earth, Google Maps ja teised geoinfosüsteemid.

Peamised KML-i elemendid:

Polygon — mitmetahulised alad, mida kasutatakse pindalade tähistamiseks kaardil.

Placemark — tähis või marker kaardil (näiteks, et märkida sinu kodu).

LineString — jooned marsruutide või teede tähistamiseks.

Kaardi jaoks kasutasin OpenStreetMapi, kuna see on tasuta lahendus. KML-faili ühendamiseks lehtede raamatukoguga kasutasin kolmanda osapoole leaflet-omnivore raamatukogu

map.kml

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <name>Tallinn Home</name>
    <description>Sõpruse pst 192</description>
    <Point>
      <coordinates>59.40911846946111, 24.701464490511427</coordinates>
    </Point>
  </Placemark>
</kml>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Bohatyrov OpenStreetMap</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="style.css" />


</head>

<header>
    <h3>Kaart koos KMLiga</h3>
    <nav>
        <ul style="padding-bottom: 10px">
            <li><a href="index.html">OpenStreetMap</a></li>
            <li><a href="../Pokemon/index.html">Pokemon</a></li>
        </ul>
    </nav>
</header>
<body>

<div id="map"></div>


<footer>
    <p>&copy; 2024 OpenStreetMap API Näidis. Oleksandr Bohatyrov.</p>
</footer>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-omnivore@0.3.3/leaflet-omnivore.min.js"></script>
<script src="script.js"></script>
</body>


</html>

Script.js

const icon = "home-button.png";
var map = L.map('map').setView([59.40911846946111, 24.701464490511427], 15);

var homeIcon = L.icon({
    iconUrl: 'home-button.png',
    iconSize: [38, 38],
    iconAnchor: [19, 38],
    popupAnchor: [0, -30]
});


L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright">OpenStreetMap&lt;/a> contributors'
}).addTo(map);


let defaultMarker = L.marker([59.40911846946111, 24.701464490511427], { icon: homeIcon }).addTo(map);
defaultMarker.bindPopup("&lt;p>Minu kodu&lt;/p>");
defaultMarker.openPopup();


omnivore.kml('map.kml')
    .on('ready', function(event) {
        const layer = event.target;


        layer.eachLayer(function(l) {
            if (l.feature &amp;&amp; l.feature.geometry.type === "Point") {
                map.removeLayer(l);
            }
        });
    })
    .addTo(map);

3. https://oleksandrbohatyrov22.thkit.ee/map/

4. PokemonAPI

Pokémon API on avatud rakendusliides, mis võimaldab arendajatel saada teavet Pokémonide kohta. API URL on järgmine: https://pokeapi.co/api/v2/pokemon/${pokemon}, kus ${pokemon} tuleb asendada soovitud Pokémoni nimega või ID-ga.

API põhifunktsioonid:

Pokémoni teave: API tagastab andmed, mis sisaldavad Pokémoni nime, tüüpe, statistikat (nt HP, rünnak, kaitse) ja muid omadusi.
Lihtne juurdepääs: API on hästi struktureeritud ja seda on lihtne kasutada, võimaldades arendajatel kiiresti leida vajalikku teavet.
Avatud ja tasuta: Pokémon API on avatud, mis tähendab, et igaüks saab seda tasuta kasutada, et arendada oma rakendusi või veebisaite, mis seonduvad Pokémonide maailmaga.

Kasutamise näide:

Kui soovid saada teavet näiteks Pokémoni “Pikachu” kohta, saad saata päringu järgmisel kujul:

https://pokeapi.co/api/v2/pokemon/pikachu

See tagastab JSON-vormingus andmed, mida saab kasutada erinevates rakendustes.

Pokémon API on suurepärane vahend Pokémoni fännidele ja arendajatele, kes soovivad luua rakendusi või lihtsalt õppida rohkem oma lemmikloomade kohta.

https://pokeapi.co/api/v2/pokemon/

Siin on kõik pokemonid

<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pokémon API näidis</title>


  <link rel="stylesheet" href="style.css">


</head>
<header>
  <h1>Pokémon Andmed</h1>
  <nav>
    <ul style="padding-bottom: 10px">
      <li><a href="../map/index.html">OpenStreetMap</a></li>
      <li><a href="index.html">Pokemon</a></li>
    </ul>
  </nav>
</header>
<body>


<main>

  <div id="pokemonData"></div>
  <button id="randomizeBtn">Rändom Pokémon</button>
</main>


<footer>
  <p>&copy; 2024 Pokémon API Näidis. Oleksandr Bohatyrov.</p>
</footer>



</body>
<script src="script.js"></script>
</html>

Script.js

async function getPokemonData(pokemon) {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
    const data = await response.json();
    document.getElementById('pokemonData').innerHTML = `
          &lt;h2>${data.name}&lt;/h2>
          &lt;img src="${data.sprites.front_default}" alt="${data.name}">
          &lt;p>Tüüp: ${data.types.map(type => type.type.name).join(', ')}&lt;/p>
        `;
}

getPokemonData('pikachu');

function getRandomPokemon() {
    const randomId = Math.floor(Math.random() * 898) + 1;
    getPokemonData(randomId);
}

document.getElementById('randomizeBtn').addEventListener('click', getRandomPokemon);

https://oleksandrbohatyrov22.thkit.ee/Pokemon