WebAPI / KML

WebAPI ehk veebi-API (Application Programming Interface) on liides, mis võimaldab erinevatel tarkvarasüsteemidel suhelda ja andmeid vahetada. WebAPI võimaldab serveril saata ja vastu võtta andmeid, mida klient saab seejärel kasutada erinevate rakenduste, näiteks veebilehtede või mobiilirakenduste kaudu. WebAPI-d kasutavad tavaliselt HTTP-protokolli kaudu saadetavad päringud ja vastused JSON või XML vormingus.
KML (Keyhole Markup Language) on XML-põhine failiformaat, mida kasutatakse geograafiliste andmete esitamiseks kaardirakendustes nagu Google Maps või Google Earth. KML failid sisaldavad geograafilist informatsiooni (nt koordinaadid, punktid, teed, polügoonid jne), mida saab kuvada kaardil.

MAP API


https://artursuskevits22.thkit.ee/apimap/index.html

Samm 1: Projekti Struktuuri Loomine

  1. Looge kaust oma projekti jaoks. Selle kausta sees looge järgmised failid:
    • index.html (HTML sisu jaoks)
    • styles.css (CSS stiilide jaoks)
    • map.js (JavaScript loogika jaoks)
    • Lisage oma kohandatud markeripilt (nt bussmarker.jpg) samasse kausta.

Samm 2: HTML faili Kirjutamine

Looge index.html järgmise sisuga:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>World Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <link rel="stylesheet" href="styles.css"> <!-- Lingige oma välisele CSS failile -->
</head>
<body>
    <div id="header">
        <h1>Kaart</h1>
    </div>

    <div id="map"></div> <!-- Kaardi konteiner -->

    <div id="footer">
        <p>&copy; Arturka</p>
    </div>

    <!-- Laadige Leaflet JS teek ja jQuery -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Lingige oma välisele JS failile -->
    <script src="map.js"></script>
</body>
</html>

Samm 3: CSS faili Kirjutamine

Looge styles.css järgmise sisuga:

body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Täis kõrgus vaateaknast */
}

#header {
    background-color: #4CAF50; /* Roheline taust */
    color: white; /* Valge tekst */
    padding: 15px; /* Natuke täiendavat ruumi */
    text-align: center; /* Keskel olev tekst */
}

#map {
    flex: 1; /* Võtab ülejäänud ruumi */
    border-radius: 50%; /* Muudab kaardi ringikujuliseks */
    overflow: hidden; /* Peidab ülevoolu, et säilitada ringikujuline kuju */
}

#footer {
    background-color: #333; /* Tume taust */
    color: white; /* Valge tekst */
    text-align: center; /* Keskel olev tekst */
    padding: 10px; /* Natuke täiendavat ruumi */
    width: 100%; /* Täis laius */
}

Samm 4: JavaScript faili Kirjutamine

Looge map.js järgmise sisuga:

$(document).ready(function () {
    // Kaardi initsialiseerimine
    var map = L.map('map').setView([59.4370, 24.7536], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19
    }).addTo(map);

    var bussicon = L.icon({
        iconUrl: 'bussmarker.jpg', // Veenduge, et pilt eksisteerib õiges kaustas
        iconSize: [30, 35],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
    });

    // Marker Uuslinna 9 jaoks
    var Uuslinna = L.marker([59.43760, 24.8070], { icon: bussicon }).addTo(map);
    Uuslinna.bindPopup("Uuslinna 9, Tallinn").openPopup();

    // GraphHopper marsruudi API näide (valikuline)
    var apiKey = "3fc84d50-7bd4-4904-

Spotify Api

https://artursuskevits22.thkit.ee/music/index.html

1. Projektikausta seadistamine

  • Loo kaust projekti jaoks. Kausta sees loo järgmised failid:
    • index.html
    • styles.css
    • script.js

2. HTML faili loomine (index.html)

Lisa järgmine kood index.html faili:

<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juhuslik Spotify laul</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Genereeri juhuslik laul</h1>
  <button id="generateSongBtn">Saa juhuslik laul</button>
  <div id="song-info"></div>
  <script src="script.js"></script>
</body>
</html>

3. Lisa stiilid CSS-iga (styles.css)

Loo styles.css fail ja lisa see CSS kood:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #1DB954;
    color: white;
}

button {
    background-color: white;
    color: #1DB954;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

button:hover {
    background-color: #fff;
    opacity: 0.9;
}

#song-info {
    margin-top: 20px;
}

4. Kirjuta JavaScript kood (script.js)

Loo script.js fail ja lisa see JavaScript kood:

const clientId = 'teie-kliendi-id';
const clientSecret = 'teie-kliendi-saladus';

async function getAccessToken() {
    const response = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
        },
        body: 'grant_type=client_credentials'
    });
    const data = await response.json();
    return data.access_token;
}

async function getRandomSong() {
    const accessToken = await getAccessToken();
    const genres = ['pop', 'rock', 'hip-hop', 'jazz', 'klassikaline', 'kantri', 'edm', 'metall', 'bluus', 'ladina'];
    const randomGenre = genres[Math.floor(Math.random() * genres.length)];
    const randomOffset = Math.floor(Math.random() * 100);

    const response = await fetch(`https://api.spotify.com/v1/recommendations?limit=1&seed_genres=${randomGenre}&min_popularity=0&max_popularity=10`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${accessToken}`
        }
    });

    const data = await response.json();
    const track = data.tracks[0];

    return track;
}

async function displayRandomSong() {
    const songInfoDiv = document.getElementById('song-info');
    songInfoDiv.innerHTML = 'Laadimine...';

    try {
        const song = await getRandomSong();
        songInfoDiv.innerHTML = `
            <h2>${song.name} - ${song.artists[0].name}</h2>
            <p><strong>Album:</strong> ${song.album.name}</p>
            <img src="${song.album.images[0].url}" alt="${song.album.name}" width="300">
            <p><a href="${song.external_urls.spotify}" target="_blank">Kuula Spotify's</a></p>
        `;
    } catch (error) {
        songInfoDiv.innerHTML = 'Viga laulu hankimisel.';
        console.error(error);
    }
}

document.getElementById('generateSongBtn').addEventListener('click', displayRandomSong);

5. Hankige Spotify API token

6. Testi oma veebisaiti

  • Ava index.html oma brauseris.
  • Klõpsa nuppu “Saa juhuslik laul”, ja rakendus toob juhusliku laulu Spotifyst!