H7.Github andmete kasutamine API kaudu

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.

Kood:

let profileName = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";
let profilePicture = "";

// Function to fetch GitHub user data
async function fetchProfile(username) {
  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    const data = await response.json();

    // Extract necessary data
    profileName = data.login;
    profileId = data.id;
    profileLink = data.html_url;
    profileRepos = data.public_repos;
    profilePicture = data.avatar_url;

    // Re-render the page with the fetched data
    renderPage();
  } catch (error) {
    console.error("Error fetching profile:", error);
  }
}

// Function to render the page
function renderPage() {
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profile viewer</h1>
      <p>Please enter profile name: </p>
      <input id="username-input" />
      <div class="content">
        <h1 id="name">Name: ${profileName}</h1>
        <p id="id">Id: ${profileId}</p>
        <p id="reports">Public repositories: ${profileRepos}</p>
        <p id="profile-url">
          Link: <a href="${profileLink}"
           target="_blank">/users/${profileName}</a>
        </p>
        <div id="profile-avatar">
          <img src="${profilePicture}" alt="${profileName} wait for profile picture...." style="width: 100px; height: 100px; border-radius: 60%;" />
        </div>
      </div>
    </div>
    
  `;

  // Add event listener to the input element
  document
    .getElementById("username-input")
    .addEventListener("keyup", function (event) {
      if (event.key === "Enter") {
        const username = event.target.value;
        fetchProfile(username);
      }
    });
}

// Initial render
renderPage();
Code language: JavaScript (javascript)

Profiilipilt kuvatakse märgendi <img> abil, mille atribuudiks on profilePicture. Atribuuti alt kasutatakse alternatiivse teksti kuvamiseks pildi laadimise ajal.

Harjutus 8 XML faili kuvamine lehe

XML – Extensible Markup Language

index.js

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 += //tsüükli loomine
      "<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++) {
      //tsüükli loomine
      tableRows += platforms[j].childNodes[0].nodeValue + "/";
    }
    tableRows += "</td></tr>";
  }
  document.getElementById("xmlTable").innerHTML = tableRows;
}

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

loadXMLDoc();

Code language: JavaScript (javascript)

games.xml

<div style="color: #bbbbbb;background-color: #1a1a1a;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;"><div><span style="color: #86897a;"><?</span><span style="color: #a390ff;">xml</span><span style="color: #cabeff;"> version</span><span style="color: #bbbbbb;">=</span><span style="color: #b3e8b4;">"</span><span style="color: #bfd084;">1.0</span><span style="color: #b3e8b4;">"</span><span style="color: #cabeff;"> encoding</span><span style="color: #bbbbbb;">=</span><span style="color: #b3e8b4;">"</span><span style="color: #bfd084;">UTF-8</span><span style="color: #b3e8b4;">"</span><span style="color: #86897a;">?><</span><span style="color: #a390ff;">gamelist</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">    </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">game</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">title</span><span style="color: #bbbbbb;"> </span><span style="color: #cabeff;">lang</span><span style="color: #bbbbbb;">=</span><span style="color: #b3e8b4;">"</span><span style="color: #bfd084;">en</span><span style="color: #b3e8b4;">"</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">Hearthstone</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">title</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">price</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">Free</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">price</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platforms</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">PC</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">ios</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platforms</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">    </span><span style="color: #86897a;"></</span><span style="color: #a390ff;">game</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">    </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">game</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">title</span><span style="color: #bbbbbb;"> </span><span style="color: #cabeff;">lang</span><span style="color: #bbbbbb;">=</span><span style="color: #b3e8b4;">"</span><span style="color: #bfd084;">en</span><span style="color: #b3e8b4;">"</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">Minecraft</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">title</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">price</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">10.99</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">price</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platforms</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">xbox</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">pc</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platforms</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">    </span><span style="color: #86897a;"></</span><span style="color: #a390ff;">game</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">    </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">game</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">title</span><span style="color: #bbbbbb;"> </span><span style="color: #cabeff;">lang</span><span style="color: #bbbbbb;">=</span><span style="color: #b3e8b4;">"</span><span style="color: #bfd084;">en</span><span style="color: #b3e8b4;">"</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">Dota 2</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">title</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">price</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">life</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">price</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platforms</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">PC</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"><</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">android</span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platform</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">        </span><span style="color: #86897a;"></</span><span style="color: #a390ff;">platforms</span><span style="color: #86897a;">></span><span style="color: #bbbbbb;">    </span><span style="color: #86897a;"></</span><span style="color: #a390ff;">game</span><span style="color: #86897a;">></</span><span style="color: #a390ff;">gamelist</span><span style="color: #86897a;">></span></div></div>
Code language: PHP (php)

1.Valmista endale uus Vanilla keskkond Code Sandbox’is.

2.Kasuta järgmist malli index.js sees: index.js

document.getElementById("app").innerHTML = '<table id="xmlTable"></table>';Code language: HTML, XML (xml)

3.Loo src kausta XML fail näiteks on toodud mängude kohta, aga mõtle endale muu teema. Vaheta küsimärgid enda mängu valiku vastu: games.xml

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">Hearthstone</title>
        <price>Free</price>
    </game>
    <game>
        <title lang="en">Minecraft</title>
        <price>19.99</price>
    </game>
    <game>
        <title lang="en">Witcher 3</title>
        <price>29.99</price>
    </game>
</gamelist>Code language: HTML, XML (xml)

4.Lisa XML faili saamiseks funktsioon. Vaheta küsimärgid games.xml allikaga: index.js

let tableRows = "<tr><th>Title</th><th>Price</th></tr>";


let gameElements = XMLContent.getElementsByTagName("game"); 


for (let i = 0; i < gameElements.length; i++) {

  let title =
    gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  let price =
    gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;

  tableRows += "<tr><td>" + title + "</td><td>" + price + "</td></tr>";
}


document.getElementById("xmlTable").innerHTML = tableRows;Code language: JavaScript (javascript)

css:

#xmlTable {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

#xmlTable th,
#xmlTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#xmlTable th {
  background-color: #f0f0f0;
}

#xmlTable tr:nth-child(even) {
  background-color: #f9f9f9;
}

#xmlTable tr:hover {
  background-color: #ddd;
}

#xmlTable th {
  cursor: pointer;
}Code language: CSS (css)

Harjututs 6 Peekoni API Kasutamine

Code sandbox:

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.

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

codeSandBox:

Styled Template

10 Harjutus Saada Email Github laadimisel

11.Harjutus Vestlusruum serveri ja kliendirakenduste 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
  //создаем объект с вебсокетом
  let socket = new WebSocket(url);
 
  // отправляем сообщение на форму
  document.forms.publish.onsubmit = function() {
    let outgoingMessage = this.message.value;
 
    socket.send(outgoingMessage);
    return false;
  };
 
  // обрабатываем входящие сообщения
  socket.onmessage = function(event) {
    let incomingMessage = event.data;
    showMessage(incomingMessage);
  };
  //если пользователь закрыт сокет, то пишем об этом в консоли
  socket.onclose = event => console.log(`Closed ${event.code}`);
 
  // показываем сообщения в div#messages
  function showMessage(message) {
    let messageElem = document.createElement('div');
    messageElem.textContent = message;
    document.getElementById('messages').prepend(messageElem);
  }
</script>Code language: HTML, XML (xml)

4. Index.js kirjutame järgmise:

const http = require('http');
const fs = require('fs');
const ws = new require('ws');
 
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();
    }
}
 
const clients = new Set();
 
function onSocketConnect(ws) {
    clients.add(ws);
    ws.on('message', function(message) {
        message = message.slice(0, 50); // max message lenght will be 50
        for(let client of clients) {client.send(message);}
    });
    ws.on('close', function() {
        log('connection closed');
        clients.delete(ws);
    });
}
 
let log;
 
if(!module["parent"]) {
    log = console.log;
    http.createServer(accept).listen(8080);
} else {
    // to embed into javascript.info
    log = function() {};
    // log = console.log;
    exports.accept = accept;
}Code language: JavaScript (javascript)

5. Installime ws ja käivitame serveri

6. Ühel lehel on server ning teisel on klient kus võime sisestada andmed ja need salvestavad mõlemal lehel (server leht ja klient leht)

H1: REST API demo käima saatmine

Teooria

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:

GET: Kollektsiooni elementide loendi või ühe elemendi andmete hankimine.
  
PUT: Elemendi andmete uuendamine (välja vahetamine uue komplekti andmetega).
  
POST: Andmete saatmine töötluseks. Nt kollektsiooni uue elemendi loomiseks või olemasoleva muutmiseks. 
  
PATCH: Olemasoleva elemendi üksikute andmete muutmiseks.
  
DELETE: Andmete eemaldamine kollektsioonist.
  
 
xh on sõbralik ja kiire tööriist HTTP-päringute saatmiseks. See implementeerib võimalikult palju HTTPie suurepärase disaini, keskendudes paremale jõudlusele.

Praaktika

const express = require('express');   // Laadib sisse Express.js raamistiku, mis on populaarne Node.js põhine raamistik API-de tegemiseks.
const cors = require('cors');        // Laadib sisse cors paketi, mis võimaldab saata nn CORS päised päringu vastustega kaasa, mis lubavad API-t kasutada brauserist, juhul kui API server ja brauseris töötav kliendirakendus ei ole serveeritud ühest ja samast asukohast.
const app = express();               // Initsialiseerib Express raamistiku (tekib app objekt)
 
app.use(cors());        // Ütleb Expressile, et iga sissetuleva HTTP päringu puhul töödeldaks seda cors() funktsiooniga, mis lisab vastusesse CORS päised.
app.use(express.json()) // Ütleb Expressile, et iga sissetuleva HTTP päringu puhul töödeldaks seda express.json(( funktsiooniga, mis analüüsib päringu keha ja kui seal on JSON, siis loeb JSONist parameetrid req.body objekti)
 
const widgets = [
    { id: 1, name: "Cizzbor", price: 29.99 },
    { id: 2, name: "Woowo", price: 26.99 },
    { id: 3, name: "Crazlinger", price: 59.99 },
]                       // Defineerivad widgets nimelise massiivi, millel on 3 liiget, mis on objektid, millel on 3 atribuuti: id, name ja price. Widget on kohatäite nimetus geneerilisele tootele. Näiteks kui meil oleks filmide andmebaas, siis oleks widget asemel vaja kasutada sõna movie.
 
app.get('/widgets', (req, res) => {
    res.send(widgets)
})                      // Defineerivad lõpp-punkti GET /widgets päringule, mis saadab vastusena terve widgets massiivi.
 
app.get('/widgets/:id', (req, res) => {
    if (typeof widgets[req.params.id - 1] === 'undefined') {
        return res.status(404).send({ error: "Widget not found" })
    }
    res.send(widgets[req.params.id - 1])
})                      // Defineerivad lõpp-punkti GET /widgets/id päringule, mis saadab vastusena selle id-ga vastaneva vidina widgets massiivist. Kui päringul on selline id, mida widgets massiivis ei ole defineeritud, saadetakse tagasi veateade “Widget not found”.
 
app.post('/widgets', (req, res) => {
    if (!req.body.name || !req.body.price) {
        return res.status(400).send({ error: 'One or all params are missing' })
    }
    let newWidget = {
        id: widgets.length + 1,
        price: req.body.price,
        name: req.body.name
    }
    widgets.push(newWidget)
    res.status(201).location('localhost:8080/widgets/' + (widgets.length - 1)).send(
        newWidget
    )
})                      // Defineerivad lõpp-punkti POST /widgets päringule, mis lisab kollektsiooni uue widgeti. Kontrollivad, et päringul oleks kõik kohustuslikud parameetrid, ja defineerivad uue vidina massiivis.
 
app.listen(8080, () => {
    console.log(`API up at: http://localhost:8080`)
})                      // Kutsutakse välja meetod listen(), määratakse port 8080 ja prinditakse konsoolile aadress, millel on rakendus kättesaadav.Code language: JavaScript (javascript)

1. Paigalda Node.js
2. Loo töölauale kaust rest–api
3. Käivita koodiredaktor (nt VS Code, WebStorm vms) ja ava see kaust projektina
4. Loo kausta fail index.js järgneva sisuga:

See kood loob Node.js ja Express.js abil lihtsa veebiserveri, mis pakub API-d vidinate kogu haldamiseks.

5. Käivita koodiredaktoris terminal ja seal järgnevad käsud:

1	`npm init -y`

1	`npm i express cors`

1 node .

Seletus:

Käsku npm init -y kasutatakse uue Node.js projekti lähtestamiseks ja vaikesätetega faili package.json loomiseks.
Käsk npm i express cors installib express- ja cors-paketid teie Node.js-i projekti.
Käsk node . kasutatakse rakenduse Node.js käitamiseks, kus . (punkt) näitab praegust kataloogi. Node.js otsib sel juhul projekti juurkaustast faili index.js ja käivitab selle.

Nüüd saame saata päringuid serverisse

6. Paigalda xh (kiire tööriist HTTP päringute saatmiseks), mille saad Githubist

https://github.com/ducaale/xh

7. Tee terminalis xh’ga GET päring vastu API-t:

12	`./xh.exe./xh.exe -v localhost:8080/widgets`

Seletus:

-v tähendab, et näita ka kliendi poolt serverisse saadetavat päringut. Vaikimisi xh kuvab ainult päringu vastuse osa.
localhost:8080/widgets on API lõpp-punkt, kuhu HTTP päring tehakse
Siin on HTTP päringu anatoomia lahtiseletus:

8. Tee terminalis xh’ga GET päring vastu API-t, mis tagastab kõik vidinad:

1	`./xh.exe -v localhost:8080/widgets/1`

Seletus:

localhost:8080/widgets/1 on API lõpp-punkt, kuhu HTTP päring tehakse
GET päringut kasutatakse API-lt andmete saamiseks

9. Tee terminalis xh’ga POST päring vastu API-t, mis lisab uue vidina:

1	`./xh.exe -v localhost:8080/widgets name=Fozzockle price=39.99`

Seletus:

localhost:8080/widgets on API lõpp-punkt, kuhu HTTP päring tehakse
name=... ja price=... on kohustuslikud parameetrid uue objekti lisamiseks andmekollektsiooni widgets
id genereeritakse ja lisatakse widgetile serveri poolt

Kokkuvõtel

Tahtsime täita ülesande number 1 ja jagada oma kogemusi selle täitmisel. Täitmise ajal tekkis probleem. Viimase 10 sammu sooritamisel hakkas ilmuma viga, et tüütut vidinat pole võimalik kustutada, koodi kasutati nii nagu ülesandes kirjas ja tee õigsuses pole kahtlust, kuna eelmised sammud olid edukas. Allpool on ebaõnnestunud täitmise tulemus:

Harjutus 12: Kuidas genereerida turvaline räsi?

Turvaline räsi (hash) on krüptograafiline funktsioon, mida kasutatakse tarkvaraarenduses andmete, näiteks paroolide või teiste tundlike andmete, turvaliseks talletamiseks ja edastamiseks. Krüptograafiline räsi on ühesuunaline funktsioon, mis võtab suvalise sisendi ja teisendab selle fikseeritud suurusega räsi väärtuseks. Sellel väärtusel on järgmised olulised omadused:

Ühesuunalisus: Algset sisendit ei ole võimalik praktiliselt tagasi saada räsi väärtusest.
Deterministlikkus: Sama sisendi puhul on alati tulemuseks sama räsi.
Kokkupõrke-kindlus: On äärmiselt ebatõenäoline, et kaks erinevat sisendit annaksid sama räsi.
Räsile vastava sisu muutumine: Väike muutus sisendis põhjustab täiesti erineva räsi väljundi.

Näiteks tarkvaraarenduses kasutatakse räsifunktsioone paroolide talletamisel. Parooli sisend krüpteeritakse turvaliseks räsiks ja seejärel salvestatakse. Kui kasutaja sisestab oma parooli, siis räsitakse see uuesti ja võrreldakse salvestatud räsi väärtusega, mitte ei salvestata ega edastata tegelikku parooli.

Tuntud räsifunktsioonide hulka kuuluvad SHA-256, SHA-3 ja bcrypt, millest viimast kasutatakse sageli paroolide räsimiseks tänu oma aeglasemale ja turvalisemale töötlusele, mis kaitseb “brute force” rünnakute eest.

Kas soovid teada, kuidas turvaline räsi tarkvaras rakendatakse või mõnda muud seotud teemat?

const bcrypt = require('bcrypt');
const myPassword = '12345';

console.time('Time to generate salt');
const salt = bcrypt.genSaltSync(100);
console.log('This is your salt:' + salt);
console.timeEnd('Time to generate salt');

console.time('Time to generate salt');
const hashedPassword = bcrypt.hashSync(myPasssword, salt);
console.log(myPassword + 'is your password & this is your password after hashing it: ' + hashedPassword);
console.timeEnd('Time to generate salt');
Code language: JavaScript (javascript)

after

Seletus:

Real 1 laaditakse sisse bcrypt-i, mida kasutatakse paroolide krüpteerimiseks
Real 5 loob funktsioon genSaltSync soola, mida kasutame real 10 räsi loomiseks. Funktsiooni sees parameeter rounds (voorud) tähendab tegelikult kulutegurit. Kulutegur kontrollib, kui palju aega kulub ühe räsi arvutamiseks. Mida suurem on kulufaktor, seda rohkem on räsi voorusid. Vaikimisi on voorude arv 10, mis võtab kuskil 0,5 – 1 sekundit aega. Voorude arv 20 võib aga võtta juba ligi terve minuti aega.
Real 10 loob funktsioon hashSync räsi, koos soolaga (mille genereerisime real 5).

console.time ja console.timeEnd abil mõõdame funktsioonide aega. console.time ja console.timeEnd on paaris ning neil peab olema sama sisu (label), et leida üles paariline, kus algab või lõpeb aja mõõtmine.

H 2.Loo Codesandbox-is HTML leht,
mis kuvab auto andmeid

tegin kood Code Sandbox saitis kus näidetakse auto sätted,
myJson: see on massiiv, mis sisaldab autoomadustega objekte.
document.getElementById(“app”).innerHTML =: See rida valib HTML-i elemendi ID-ga “app” ja määrab selle sisemise HTML-i sisu esitatud HTML-koodi stringile. Nii renderdatakse veebilehel andmed myJsoni massiivist.

Harjutus3.sessionStorage

Session Storage’isse salvestatakse andmed ainult konkreetse seansi jaoks. See, kus tegid sessionStorage.setItem() jne käske on üks seanss, ning teine vahekaart, mille 6.punkti juures avasid, oli teine seanss.

sessionStorage.setItem('color','enda lemmikvärv'). Selle käsuga lisati Session Storage’isse uued andmed.
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

harjutus4.localStorage

Local Storage’is säilitatakse andmed kõigis sessioonides antud konkreetses domeenis.

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

Soorita käsk localStorage.getItem(car) ning näed, et localStoragesse väljastatakse sinu lemmikauto.

Harjutus 5.Küpsised

KIRJELDUS. xh on HTTP-klient, millel on sõbralik käsurea liides. See püüab saada loetavat väljundit ja hõlpsasti kasutatavaid valikuid. xh ühildub enamasti HTTPie-ga: vt http(1). Suvandit –curl saab päringu saatmise asemel kasutada käsu curl(1) tõlke printimiseks.

HTTP küpsis (veebiküpsis, brauseri küpsis) on väike andmeosa, mille server saadab brauserile. Brauser saab selle fragmendi endale salvestada ja iga järgneva päringuga serverisse saata. Eelkõige võimaldab see välja selgitada, kas samast brauserist on saabunud mitu päringut (näiteks kasutaja autentimiseks). Küpsiste abil saate salvestada mis tahes olekuteavet, HTTP-protokoll ei saa seda iseseisvalt teha.

Küpsiseid kasutatakse sageli:

Seansi haldamine (sisselogimised, virtuaalsed ostukorvid)
Isiklikud eelistused
Jälgimine

millist infot, kellele ja kui kauaks Twitter sinu brauserisse üritas sokutada.

seda saab näha arendaja tööriistas: tee lahti Application leht ja valige Cookies , te näete cookies loetelu

Teave küpsiste kohta: Parempoolsele paanile ilmub tabel küpsiste kohta käiva teabega. Väljad Expires/Max-Age näitavad, kui kaua küpsiseid säilitatakse. Väljad Domeen ja Tee näitavad, kellele need täpselt mõeldud on.

Harjutused APIst

H7.Github andmete kasutamine API kaudu

Harjutus 8 XML faili kuvamine lehe

Harjututs 6 Peekoni API Kasutamine

10 Harjutus Saada Email Github laadimisel

11.Harjutus Vestlusruum serveri ja kliendirakenduste vahel

H1: REST API demo käima saatmine

Teooria

Miinused:

Plussid:

Praaktika

Kokkuvõtel

Harjutus 12: Kuidas genereerida turvaline räsi?

Seletus:

H 2.Loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Harjutus3.sessionStorage

harjutus4.localStorage

Harjutus 5.Küpsised

H 2.Loo Codesandbox-is HTML leht,
mis kuvab auto andmeid