Veronika Milovzorova portfolio/ eng

WebAPI ja KML

Veebi-API on veebiserveri või veebibrauseri rakendusliides. See on veebi arenduse kontseptsioon, mis piirdub tavaliselt veebirakenduse kliendipoolse osaga (sh kõik kasutatavad veebiraamistikud) ja seetõttu ei hõlma tavaliselt veebiserveri või brauseri rakendamise üksikasju, nagu SAPI või API, välja arvatud juhul, kui need on kättesaadavad avaliku kaugveebirakenduse kaudu.

Veebi API funktsioonid:

Protokollid: kasutab andmeedastuseks HTTP/HTTPS.
Andmevormingud: enamasti edastatakse andmeid JSON- või XML-vormingus
REST ja SOAP: veebi API-des kasutatavad arhitektuuristiilid

KML

(Keyhole Markup Language) on XML-põhine failivorming, mida kasutatakse geograafilise teabe salvestamiseks ja edastamiseks. KML-failid on tavaliselt seotud maakaardirakendustega, nagu Google Earth ja Google Maps. Need võimaldavad kasutajatel luua ja jagada kaardipunkte, teid, polügoone ja muid geograafilisi andmeid.

KML-i mõisted

  • Punkt: Määrab kindla geograafilise koha kaardil, näiteks koduaadress.
  • Polügoon: Aitab kujutada alasid, näiteks hooneid või maapiirkondi.
  • Liin: Võimaldab joonistada teid või muid jooni kaardil.
  • Stiil: KML-is saab määrata, kuidas punktid, jooned ja polügoonid kaardil välja näevad (nt värvid, paksus jne).

Kuidas saada API-võtit

Google API

  • Projekti loomine Google Cloud Console’is:
    • Mine Google Cloud Console’i.
    • Logi sisse oma Google’i kontole.
    • Klõpsa “Loo projekt” ja järgi juhiseid.
  • Vajalikku API-d lubamine:
    • Pärast projekti loomist vali see.
    • Mine sektsiooni “API-d ja teenused” > “Raamatukogu”.
    • Otsi ja vali vajalik API (nt Google Maps, YouTube Data jne) ja luba see.
  • API võtme saamine:
    • Mine “API-d ja teenused” > “Krediteerimine”.
    • Klõpsa “Loo krediteerimine” ja vali “API võti”.
    • Kopeeri genereeritud võti ja salvesta see.

Yandex API

  • Mine Yandex.Cloud’i:
    • Mine Yandex.Cloud’i.
    • Loo uus projekt.
  • Vajalikku API-d lubamine:
    • Vali vajalik teenus (nt Yandex.Maps, Yandex.Search jne).
    • Tutvu dokumentatsiooniga ja luba API.
  • API võtme saamine:
    • Sektsioonis “API” või “Võtmed” loo uus võti.
    • Kopeeri ja salvesta võti.

Minu kaart

Kuidas luua interaktiivne kaart, kasutades OpenStreetMap-i ja Leaflet-i raamatukogu, järgige järgmisi samme:

  1. Looge projekti failid: looge index.html, style.css ja script.js.
  2. HTML-kood: index.html-is lisage põhistruktuur, mis sisaldab pealkirja, kaarti ja jalust.
  3. CSS-i stiilimine: style.css-is seadistage lehe ja kaardi stiilid, et need näeksid välja korrektsed.
  4. JavaScript kaartide jaoks: script.js-is initsialiseerige kaart Leaflet-i abil, lisage kaardikihid ja marker soovitud koordinaatidele.

OpenStreetMap on maailma kaart
https://www.openstreetmap.org/#map=8/58.613/25.024

Leaflet on juhtiv avatud lähtekoodiga Javascripti raamatukogu mobiilisõbralike interaktiivsete kaartide jaoks
https://leafletjs.com/

Minu kaardi link: https://veronikamilovzorova22.thkit.ee/maps/index.html

index.html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Карта OpenStreetMap</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
</head>
<body>

<header>
  <h1>Tere tulemast minu kaardile</h1>
  <p>See kaart näitab minu asukohta</p>
</header>


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


<footer>
  <p>Veronika Milovzorova</p>
</footer>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js

const homeCoordinates = [59.441656, 24.692083];


const map = L.map('map').setView(homeCoordinates, 15);


L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
}).addTo(map); //L kasutatakse võimaldab juurdepääsu nendele funktsioonidele ja klassidele, tekitamata konflikte teiste teekidega


L.marker(homeCoordinates).addTo(map)
    .bindPopup("Minu kodu")
    .openPopup(); //kasutatakse hüpikakna lisamiseks
style.css
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    width: 100%;
}

header h1 {
    margin: 0;
    font-size: 24px;
}

header p {
    margin: 5px 0;
    font-size: 14px;
}

#map {
    width: 1000px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
    flex-grow: 1;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    width: 100%;
}

Koerte API

Kui kasutaja avab lehe, näeb ta pealkirja ja nuppu koera pildi jaoks. Nupu vajutamisel toimub järgmist:

  1. Tehakse päring Dog API-le.
  2. Saadakse juhuslik koera pilt.
  3. Pilt kuvatakse lehel.

Seega võimaldab rakendus kasutajal lihtsalt ja kiiresti saada juhuslikke koerapilte, muutes selle interaktiivseks ja kaasahaaravaks!

link: https://veronikamilovzorova22.thkit.ee/oma/index.html

index.html 
<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Koerte API</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
  <h1>Juhuslikud koerafotod</h1>
  <p>Klõpsa nuppu, et näha juhuslikku koera!</p>
</header>
<div class="dog-container">
  <button id="getDog">Näita koera</button>
  <div id="dogResult"></div>
</div>
<footer>
  <p>Veronika Milovzorova</p>
</footer>
<script src="script.js"></script>
</body>
</html>
script.js
// Funktsioon juhusliku koerafoto saamiseks
async function getDogImage() {
    try {
        const response = await fetch('https://dog.ceo/api/breeds/image/random');
        const data = await response.json();


        if (data.status === 'success') {
            displayDogImage(data.message);
        } else {
            throw new Error('Ei õnnestunud saada koerafotot');
        }
    } catch (error) {
        console.error(error);
        document.getElementById('dogResult').innerHTML = 'Tekkis viga: ' + error.message;
    }
}


function displayDogImage(imageUrl) {
    const dogResultDiv = document.getElementById('dogResult');
    dogResultDiv.innerHTML = `<img src="${imageUrl}" alt="Koer">`;
}

// Ürituse käitleja nupu jaoks
document.getElementById('getDog').addEventListener('click', getDogImage);
style.css
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: url('https://images.unsplash.com/photo-1510913016315-7a0f72e69c3e');
    background-size: cover;
    background-position: center;
    color: white;
}

header {
    text-align: center;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.dog-container {
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(255, 165, 0, 0.7);
    border: none;
    border-radius: 5px;
    color: white;
    transition: background-color 0.3s;
}

button:hover {
    background-color: rgba(255, 165, 0, 1);
}

#dogResult {
    margin-top: 20px;
}

img {
    max-width: 500px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
en_US
en_US et