Harjutused

Harjutus 2 loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Objekt myJson on JSON-struktuur, mis sisaldab teavet kahe auto kohta:

import "./styles.css";

const myJson = {
  Car0: {
    Color: "Rose red",
    "Tinted windows": false,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM Radio",
      "MP3, MP4 and MKV player",
      "harman/kardon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  Car1: {
    Color: "Navy blue",
    "Tinted windows": true,
    Wheels: 4,
    "Roof cargo": "Thule",
    Entertainment: [
      "FM Radio",
      "Apple CarPlay/Android Auto",
      "Bowers & Wilkins Premium Sound speakers",
    ],
    Accessories: ["self drive system", "luggage cover"],
  },
};

document.getElementById("app").innerHTML = `
<div id="json">
    <h1>Car 0 properties</h1>
    <p>Color: ${myJson.Car0.Color}</p>
    <p>Tinted windows: ${myJson.Car0["Tinted windows"]}</p>
    <p>Wheels: ${myJson.Car0.Wheels}</p>
    <p>Roof cargo: ${myJson.Car0["Roof cargo"]}</p>
    <p>Audiosystem: ${myJson.Car0.Entertainment[0]}, ${myJson.Car1.Entertainment[1]}</p>
    <p>Accessories: ${myJson.Car0.Accessories[0]}, ${myJson.Car1.Accessories[0]}, ${myJson.Car1.Accessories[1]}</p>
</div>`;

Harjutus 3

Tee uus käsk sessionStorage.setItem('color','enda lemmikvärv'). Selle käsuga lisati Session Storage’isse uued andmed.
Kirjuta uus käsk sessionStorage.getItem('color') ning näed, et väljastatakse sessionStorage’ist sinu lemmikvärv.

Et näha, mis on Session Storage’isse salvestatud, mine Application>Session Storage>vastav domeen

Nüüd ava veel üks vahekaart ning mine samale lehele (chrome://newtab). Ava uuesti Application>Session Storage ning näed, et see on tühi.

Harjutus 4

Tee uus käsk localStorage.setItem('car','enda lemmikauto'). Selle käsuga lisati Local Storage’isse uued andmed.

Harjutus 5

Arvuti küpsised (või “cookies” inglise keeles) on väikesed tekstifailid, mida veebilehed salvestavad teie arvutisse või seadmesse, et mäletada teie eelistusi, seansiandmeid või muid teavet. Need failid aitavad näiteks säilitada teavet, kui olete sisse logitud, jälgida teie veebikäitumist ja pakkuda kohandatud sisu.

Käivitage youtube küpsis

Käivitage facebook küpsis

Harjutus 6

Bacon Ipsum on tasuta API, mis genereerib juhuslikult kalatäideteksti (kohatäiteteksti), mis põhineb lihasõnadel, nagu “peekon”, “sink” jne. Seda kasutavad veebiarendajad ja disainerid veebisaitide ja rakenduste loomisel tekstiplokkide ajutiseks täitmiseks.

  1. Ava veebilehitsejas Code Sandbox sait
  2. Vali Official Templates alt static
  3. Kirjuta pildil olev kood index.html faili. Alustuseks kasuta HTML trafaretti (hüüumärk ja tab klahv).

Kui kasutaja klõpsab nupule request bacon, käivitub kood ja me saame api. Tekst on näidatud lõikes demo idioodiga

Bacon API

Lõpptulemuseks peaksid saama andmeid peekoni kohta

Salvesta fail CTRL + S

.\xh.exe -h https://www.youtube.com/

Harjutus 1 REST API demo käima saatmine

REST API – REST on mittekohustuslikke soovitusi (best practices), kuidas hästikäituvad rakendused võiksid andmeid üle veebi (see tähendab kasutades HTTP protokolli) vahetada ja igal veebiteenuse ehitajal on RESTist oma spetsiifiline nägemus

REST-i (Representational State Transfer) on tavaliselt nimetatud pigem veebiteenuste arhitektuuristiiliks kui protokolliks või standardiks. See tuleneb sellest, et REST ei määratle sõnumi sisu, vaid ainult teatud tingimusi, millele eeskujulik veebiteenus, mida on lihtne ja mugav kasutada, peaks vastama. Ka REST võimaldab suhtlust kahe tarkvaraprogrammi vahel: üks programm saab teiselt programmilt ressursse taotleda ja nendega manipuleerida. REST on üles ehitatud HTTP-protokollile, kasutades URL-ile sarnaseid viiteid ressurssidele, mida nimetatakse URI-deks (Uniform Resource Identifier) ja HTTP verbe nagu GET, POST, PUT ja DELETE, mis näitavad, millist tegevust klient ressursiga soovib teha. REST kasutab andmete edastamiseks kodeerimisformaate nagu XML, HTML või JSON. Kõige eelistatum on JSON, kuna see on kõige ühilduvam ja lihtsamini kasutatav.

REST on väga arendajasõbralik, sest selle kasutamine on palju lihtsam kui SOAP. Lisaks on REST vähem sõnarikkam ja kahe lõpp-punkti vahelisel suhtlemisel saadetakse vähem andmemahtu. REST lahendas SOAPi keerukuse probleemid ja nüüd on praktiliselt kõik avalikud API-d REST API-d.

Enamik API-sid maailmas on RESTful, mis tähendab, et nad järgivad suures osas teatud reeglite või õieti piirangute kogumit, mida tuntakse kui Representational State Transfer ehk REST, mis on alates 2000. aastate algusest olnud de facto standard API-de arendamisel. De facto sellepärast, et ametlikult ei ole REST standard, vaid Roy Fieldingu poolt doktorikraadi väitekirjas kirja pandud parimate praktikate kirjeldus, millele on aegade jooksul lisandunud ka teisi häid tavasid.

Miinused:

  • REST API server vajab otseühendust kliendiga
  • REST vajab HTTP-d, sest kasutab HTTP verbe käskudena ja URL-e andmekollektsioonidele viitamiseks
  • RESTi puhul peab disainiotsuseid ise tegema ja guugeldama neid, süvenedes arendajate pikkadesse filosoofilistesse väitlustesse, kas nii või naa oleks parem

Plussid:

  • paindlik ja lihtne kasutada (kui mõni RESTi tingimustest ei meeldi, ei pea seda kasutama, kuigi siis öeldakse, et sinu REST teenus ei ole RESTful)
  • veebiteenusega suhtlemiseks ei ole vaja lisatarkvara, sest HTTP päringute tegemise võimalus ja JSON tugi on pea kõigis keeltes sees olemas.
  • Põhimõtteliselt töötab REST API server nagu tavaline veebiserver, väljastades HTML asemel JSONit
  • parem jõudlus / optimaalne võrguliikluse kasutus (RESTiga kasutatakse peamiselt JSON formaati, mis on palju kompaktsem ja lihtsam lugeda ka. Lisaks on RESTi puhul käsk HTTP meetod ja parameetrid URL-is)
  • REST on disainifilosoofiliselt lähemal teistele veebitehnoloogiatele (kasutab HTTP enda meetodeid käskudena ja HTTP URL-i URI-na)
  • REST on kergesti mõistetav ja rakendatav
  • REST-i puhul edastatakse aga käsk kasutades HTTP meetodit, mis vastab kõige rohkem päringu olemusele:

Harjutus 7 GitHub API

Selle ülesande puhul peate looma veebirakenduse, mis kasutab kasutajaprofiili andmete toomiseks GitHubi avalikku API-d.

FETCH – on JavaScripti sisseehitatud funktsioon, mis on loodud HTTP-päringute tegemiseks. See võimaldab teil kaugserverist andmeid vastu võtta ja vastuseid töödelda.

REST (Representational State Transfer) on arhitektuurimudel, mida kasutatakse veebiteenuste loomisel ja rakenduste vahelise suhtluse lihtsustamiseks

Github access token – Kasutaja juurdepääsuluba on teatud tüüpi OAuthi luba. Erinevalt traditsioonilisest OAuthi märgist ei kasuta kasutaja juurdepääsuluba ulatust. Selle asemel kasutab see peeneteralisi õigusi.

Harjutus 8 XML faili kuvamine js lehel

XML (Extensible Markup Language) on W3C poolt välja töötatud ja soovitatud standardne üldotstarbeline märgistuskeel struktureeritud teabe vahetamiseks infosüsteemide vahel, eriti veebirakendustes Internetis.

XML kuvamine läbi JS

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">Hearthstone</title>
        <price>Free</price>
        <platforms>
        <platform>PC</platform>
        <platform>ios</platform>
        </platforms>
    </game>
    <game>
        <title lang="en">Minecraft</title>
        <price>10.99</price>
        <platforms>
        <platform>xbox</platform>
        <platform>pc</platform>
        </platforms>
    </game>
    <game>
        <title lang="en">Dota 2</title>
        <price>life</price>
        <platforms>
        <platform>PC</platform>
        <platform>android</platform>
        </platforms>
    </game>
</gamelist>


function loadXMLDoc() {
  let xmlhttp = new XMLHttpRequest(); //uus päring
  xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      //статус запроса выполнен
      getGameDetails(this);
    }
  };
  xmlhttp.open("GET", "src/games.xml", true); //ava xml fail
  xmlhttp.send();
}

function getGameDetails(xml) {
  //saame andmed xml failis
  const xmlDoc = xml.responseXML;
  let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>"; //on liisatud andmet tüübid
  let gameElements = xmlDoc.getElementsByTagName("game"); //
  for (let i = 0; i < gameElements.length; i++) {
    tableRows +=
      "<tr><td>" +
      gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
      "</td><td>";
    let platforms = gameElements[i].getElementsByTagName("platform");
    for (let j = 0; j < platforms.length; j++) {
      tableRows += platforms[j].childNodes[0].nodeValue + "/";
    }
    tableRows += "</td></tr>";
  }
  document.getElementById("xmlTable").innerHTML = tableRows;
}

document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;

loadXMLDoc();

Harjutus 10 Saada email Github push-imisel.

Kui esitate muudatusi GitHubi repositooriumi, on hea mõte luua informatiivne kommiteerimisteade. Ja see ülesanne võimaldab meil mõista, kuidas saata push-in e-kirju Githubile.

name: Send email on push

on:
  push:
    branches:
      - main # Kontrollib, kas push on tehtud 'main' harusse

jobs:
  mail_on_push:
    runs-on: ubuntu-latest
    steps:
      - name: Send mail
        # kasutatakse GitHubi tegevust e-kirjade saatmiseks
        uses: dawidd6/action-send-mail@v3
        with:
          # SMTP serveri aadress ja port Gmaili jaoks
          server_address: smtp.gmail.com
          server_port: 465
          # kasutajanimi ja parool, mis on salvestatud GitHubi saladustesse
          username: ${{ secrets.MAIL_USERNAME }}
          password: ${{ secrets.MAIL_PASSWORD }}
          subject: "Push Notification for ${{ github.repository }} on branch ${{ github.ref }}"
          to: "oleksandr.bohatyrov@gmail.com"
          body: |
            Tehti push järgmisele repositooriumile: ${{ github.repository }} harusse: ${{ github.ref }}.
            
            **Detailid:**
            - Commit: ${{ github.sha }}
            - Commiti sõnum: ${{ github.event.head_commit.message }}
            - Commiti autor: ${{ github.event.head_commit.author.name }} ({{ github.event.head_commit.author.email }})
            - Pusher: ${{ github.event.pusher.name }}
            - **Pushi kuupäev ja aeg**: ${{ github.event.head_commit.timestamp }}
            
            Vaata commit'i GitHubis: [Commiti link](${{ github.event.head_commit.url }})

          # saatja nimi, mis kuvatakse e-kirjas
          from: Github Actions

Kopeeritud tühi kaustas loome -> .github , .github kaustas loome -> workflows ja seal loome pildil olev fail, sisuga.

Harjutus 11: Vestlusruum serveri ja klientrakenduse vahel

WebSocket API on täiustatud tehnoloogia, mis võimaldab avada kahepoolse interaktiivse suhtlussessiooni kasutaja brauseri ja serveri vahel.

Milleks see on vaja? – Esiteks, et luua enda oma chat, kus võime suhelda omavahel ja/või võime lisada seda oma töökahal, et jälgida seisukorra (nt: tarkvaraarendamisel, kui on tehtud mingi osa – anname teada teistele, et see on tehtud)

Harjutus osa:

1. Luua kaust Vestlusruum
2. Käivita koodiredaktor (nt VS Code, WebStorm vms) ja ava see kaust projektina
3. Loo kausta fail index.html järgneva sisuga:

<!doctype html>
<form name="publish">
    <input type="text" name="message" maxlength="50"/>
    <input type="submit" value="Send"/>
</form>

<div id="messages"></div>

<script>
    let url = location.host == 'localhost' ?
        'ws://localhost:8080/ws' : location.host == 'javascript.local' ?
            `ws://javascript.local/article/websocket/chat/ws` : // dev integration with local site
            `wss://javascript.info/article/websocket/chat/ws`; // prod integration with javascript.info
    //loome objekti koos veebisoketiga
    let socket = new WebSocket(url);

    // sõnumi saatmine vormile
    document.forms.publish.onsubmit = function() {
        let outgoingMessage = this.message.value;

        socket.send(outgoingMessage);
        return false;
    };

    // töödelda sissetulevaid sõnumeid
    socket.onmessage = function(event) {
        let incomingMessage = event.data;
        showMessage(incomingMessage);
    };
    //kui kasutaja on socket'i sulgenud, kirjutame sellest konsooli.
    socket.onclose = event => console.log(`Closed ${event.code}`);

    // Näita sõnumeid div#messages
    function showMessage(message) {
        let messageElem = document.createElement('div');
        messageElem.textContent = message;
        document.getElementById('messages').prepend(messageElem);}
</script>

Index.js

//Node’i WebSocket’i sisaldamine.
const http = require('http');
const fs = require('fs');
const ws = require('ws');

//Serveri seadistamine
const wss = new ws.Server({ noServer: true });

function accept(req, res) {
    if (req.url === '/ws' && req.headers.upgrade &&
        req.headers.upgrade.toLowerCase() === 'websocket' &&
        req.headers.connection.match(/\bupgrade\b/i)) {
        wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);
    } else if (req.url === '/') {
        // Отправляем index.html
        fs.createReadStream('./index.html').pipe(res);
    } else {
        // Страница не найдена
        res.writeHead(404);
        res.end();
    }
}
//Ühenduse loomine
const clients = new Set();

function onSocketConnect(ws) {
    clients.add(ws);

    ws.on('message', function(message) {
        message = message.slice(0, 50); // максимальная длина сообщения — 50 символов
        for (let client of clients) {
            client.send(message);
        }
    });

    ws.on('close', function() {
        log('connection closed');
        clients.delete(ws);
    });
}
//Teksti kuvamine
let log;

if (!module["parent"]) {
    log = console.log;
    http.createServer(accept).listen(8080);
} else {
    log = function() {};
    // log = console.log;
    exports.accept = accept;
}

Harjutus 12 turvaline räsi

urvaline räsi on krüptograafiline räsi, mida kasutatakse andmete tervikluse tagamiseks ja autentimiseks. Turvalise räsi eesmärk on tagada, et isegi väikesed muutused algandmetes põhjustaksid täiesti erineva räsi väljundi, ning muuta räsiväärtuste lahti murdmine või originaalandmete taastamine keeruliseks.

Turvalise räsi omadused:

  1. Ühesuunaline funktsioon: Räsi funktsioon peaks olema ühesuunaline, st algandmete taastamine räsiväärtusest peaks olema praktiliselt võimatu.
  2. Kokkupõrgete vältimine: Turvaline räsi peaks olema kokkupõrkevaba, mis tähendab, et kaks erinevat sisendit ei tohiks anda sama räsi.
  3. Tundlikkus sisendi muutustele: Väike muudatus sisendis peaks põhjustama suure muutuse räsiväärtuses (avatarlikkus).
  4. Efektiivsus: Räsifunktsioon peaks töötlema andmeid kiiresti ja tõhusalt.

Tuntud ja laialdaselt kasutatavad turvalised räsi algoritmid hõlmavad:

  • SHA-256 (Secure Hash Algorithm 256-bit): Väga populaarne ja turvaline räsifunktsioon, mida kasutatakse laialdaselt näiteks krüptovaluutades, nagu Bitcoin.
  • SHA-3: SHA-3 on uusim SHA perekonna liige ja pakub täiendavat turvalisust ning tõhusust.
  • BLAKE2: Tuntud oma kiiruse ja turvalisuse poolest, kasutatakse sageli juhtudel, kus SHA-3 ei ole vajalik.
  • Argon2: Eriti turvaline ja optimeeritud paroolide räsimiseks.

Turvalise räsifunktsiooni valik sõltub konkreetsetest nõuetest ja kasutusjuhtudest, kuid üldiselt tuleks eelistada tuntud ja testitud algoritme, mis on laialdaselt tunnustatud turvamaailmas.

  1. Ava enda koodiredaktor
  2. Tee uus fail nimega generateHash.js
  3. Lisa sinna kood
  4. Paigaldada bcrypt käsuga npm install bcrypt
  5. Anna real 2 muutuja myPassword väärtuseks mingi tekst, mis on sinu parooliks
  6. Käivita fail parem hiireklõps faili sees ning Run ‘generateHash.js või kiirklahviga Ctrl + Shift + F10
  7. Muuda genSaltSync parameetris rounde ning vaata, mis juhtub

genSaltSync = 23 ei tööta

genSaltSync = 15