ORM - Jelizaveta Ostapjuk portfoolio

1.Loodud uus projekt ASP.NET Core Web API

2.Muuda URL-i https failis Properties/launchSettings.json ja Käivita rakendus

3.Muuda kontrolleri nime (see muudab ka nime failis, kus see on mainitud)

using Microsoft.AspNetCore.Mvc;

namespace veeb.Controllers
{
     // Atribuut [ApiController] näitab, et tegemist on API-kontrolleriga.
    // Atribuut [Route] määrab API baasmarsruudi, kus [controller] asendatakse kontrollerinimega (käesoleval juhul Weather).
    [ApiController]
    [Route("[controller]")]
    public class WeatherController : ControllerBase
    {
        // Ilmateate kokkuvõtete massiiv, mis määratakse juhuslikult igale ilmaprognoosile.
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };
        
        // Privaatne ainult lugemiseks mõeldud logger, mida saab kasutada WeatherControlleri sõnumite logimiseks.
        private readonly ILogger<WeatherController> _logger;

        // Konstruktor loggeri instantsi kontrollerisse sisestamiseks.
        public WeatherController(ILogger<WeatherController> logger)
        {
            _logger = logger;
        }

        // Atribuut [HttpGet] määrab, et see meetod vastab GET-päringutele.
        // HttpGet-atribuudi parameeter Name määrab marsruudi nime, mida kasutatakse tegevusele viivate linkide loomiseks.
        // See meetod tagastab vastusena kogumi WeatherForecast-objekte.
        [HttpGet(Name = "GetWeatherForecast")]
        public IEnumerable<WeatherForecast> Get()
        {
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
            })
            .ToArray();
        }
    }
}

Ning nüüd on kontrolleri otspunkt kättesaadav URL-lt: https://localhost:4444/Weather

4.Loo uus kontroller nimega PrimitiividController

5.Kirjutasin lihtsa GET päringu ja avas selle https://localhost:4444/api/Primitiivid/hello-world

public class PrimitiividController : ControllerBase
{
    // GET: primitiivid/hello-world
    // See atribuut seostab HTTP GET-päringud URL-iga „primitiivid/hello-world“
    // See meetod tagastab lihtsa tervitusteksti koos praeguse kuupäeva ja kellaajaga.
    [HttpGet("hello-world")]
    public string HelloWorld()
    {
        return "Hello World at " + DateTime.Now;
    }
}

6.Esitage sisend API-sihtpunktile https://localhost:4444/api/Primitiivid/hello-variable/Jelizaveta

// GET: primitiivid/hello-variable/nimi
// GET-päring, mis on seotud „primitiivid/hello-variable/{nimi}“
// {nimi} on URL-i muutujaosa asendusmärk, mis edastatakse meetodile
// See meetod võtab URL-ist string-parameetri ja tagastab isikupärastatud tervituse.
[HttpGet("hello-variable/{nimi}")]
public string HelloVariable(string nimi)
{
    return "Hello " + nimi;
}

7.Sisendite arv on piiramatu, kuid igaüht neist tuleb ka määratleda funktsiooni sulgude sees. Kirjuta päring 2 numbri lisamiseks

// GET: primitiivid/add/5/6
/ GET-päring, mis on seotud „primitiivid/add/{nr1}/{nr2}“
// {nr1} ja {nr2} on asendusmärgid kahele täisarvule, mis on edastatud URL-is
// See meetod võtab URL-ist kaks täisarvu ja tagastab nende summa.
[HttpGet("add/{nr1}/{nr2}")]
public int AddNumbers(int nr1, int nr2)
{
    return nr1 + nr2;
}

8.Sama mis lisamine päring, kuid korrutamisega

// GET: primitiivid/multiply/5/6
// GET-päring, mis on seotud „primitiivid/multiply/{nr1}/{nr2}“
// {nr1} ja {nr2} on asendusmärgid kahele täisarvule, mis on edastatud URL-is
// See meetod võtab URL-ist kaks täisarvu ja tagastab nende korrutise.
[HttpGet("multiply/{nr1}/{nr2}")]
public int Multiply(int nr1, int nr2)
{
    return nr1 * nr2;
}

9.Võimalik on ka mitte midagi tagastada – sellisel juhul on tüüp “void”. Selle kasutusjuht on näiteks andmete sisestamine või logimine.

// GET: primitiivid/do-logs/5
// GET-päring, mis on seotud „primitiivid/do-logs/{arv}“
// {arv} on URL-is edastatud täisarvu asendaja
// See meetod võtab vastu täisarvulise parameetri ja kirjutab konsooli sama palju logisõnumeid.
[HttpGet("do-logs/{arv}")]
public void DoLogs(int arv)
{
    for (int i = 0; i < arv; i++)
    {
        Console.WriteLine("See on logi nr " + i);
    }
}

Iseseisvad harjutused:

Tee juhuslike numbrite generaator (või Random rand = new Random() abil) – sisestades otspunktile kaks arvu, tagastab programm juhusliku arvu nende vahel

//GET: primitiivid/rand-number/{nr1}/{nr2}
// GET-päring, mis on seotud „primitiivid/rand-number/{nr1}/{nr2}“
// See meetod võtab URL-ist kaks täisarvu (nr1 ja nr2), vahetab need vajaduse korral 
//, et tagada nr1 <= nr2, ja tagastab juhusliku täisarvu vahemikus nr1 (kaasa arvatud) ja nr2 (välja arvatud).
// Kui nr1 > nr2, vahetatakse nende väärtused enne juhusliku arvu genereerimist.
[HttpGet("rand-number/{nr1}/{nr2}")]
public int RandNumber(int nr1, int nr2)
{
    if (nr1 > nr2)
    {
        int temp = nr1;
        nr1 = nr2;
        nr2 = temp;
    }

    Random rand = new Random();

    return rand.Next(nr1, nr2);

}

Sisesta sünniaasta otspunktile ning programm tagastab sulle lause, mis ütleb: “oled nii või naa aastat vana (arvutuslikult korrektselt), olenevalt kas sellel aastal on sünnipäev juba olnud”

//GET: primitiivid/age/{birthYear}
// See meetod arvutab vanuse antud sünniaasta põhjal.
// See lahutab sünniaasta käesolevast aastast ja korrigeerib tulemust, kui sünnipäev pole veel käesoleval aastal toimunud.
// Tagastab arvutatud vanuse näitava stringi.
[HttpGet("age/{birthYear}")]
public string GetAge(int birthYear)
{
    DateTime currentDate = DateTime.Now;

    int age = currentDate.Year - birthYear;

    DateTime birthdayThisYear = new DateTime(currentDate.Year, 1, 1);

    if (currentDate < birthdayThisYear)
    {
        age--;
    }

    return $"Oled {age} aastat vana";
}

10. Loodi kaust nimega „Models“. Lisati uus klass nimega „Toode“

namespace veeb.Models
{
     // Esindab toodet, millel on sellised põhiomadused nagu ID, nimi, hind ja kas toode on aktiivne.
    public class Toode
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public bool IsActive { get; set; }

        public Toode(int id, string name, double price, bool isActive)
        {
            Id = id;
            Name = name;
            Price = price;
            IsActive = isActive;
        }
    }
}

Iseseisvad harjutused:

Tee kasutaja mudel, milles on: täisarvuline ID, sõnaline kasutajanimi, sõnaline parool, sõnaline eesnimi, sõnaline perenimi.

namespace veeb.Models
{
    // Esindab kasutajat, kellel on ID, kasutajanimi ja parool
    public class User
    {
        public int ID { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }

        public User(int id, string username, string password)
        {
            ID = id;
            Username = username;
            Password = password;
        }
    }
}

11. Loodi uus kontroller nimega „ToodeController“

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using veeb.Models;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ToodeController : ControllerBase
    {
        // Staatiline toote instants, mis on algväärtustatud vaikimisi väärtustega
        private static Toode _toode = new Toode(1, "Koola", 1.5, true);

        // GET: api/toode
        // Tagastab praeguse toote instantsi
        [HttpGet]
        public Toode GetToode()
        {
            return _toode;
        }
         
        // GET: toode/suurenda-hinda
        // GET: api/toode/suurenda-hinda
        // Suurendab toote hinda 1 võrra ja tagastab uuendatud toote
        [HttpGet("suurenda-hinda")]
        public Toode SuurendaHinda()
        {
            _toode.Price = _toode.Price + 1;
            return _toode;
        }
    }
}

Iseseisvad harjutused:

Tee uus API otspunkt, mis käivitades muudab toote aktiivsust. Kui alguses on true, siis false peale ning kui on false, siis true peale. Kasuta hüüumärgi funktsionaalsust ehk ära küsi muutujana uut väärtust.

// GET: toode/muuda-aktiivsust
// See meetod lülitab toote (_toode) IsActive omaduse sisse või välja.
// Kui IsActive on tõene, muutub see vääraks; kui vale, muutub see tõeks.
// Tagastab uuendatud toote.
[HttpGet("muuda-aktiivsust")]
public Toode MuudaAktiivsus()
{
    // Kui aktiivsus on true, muudame selle false'ks, vastupidi
    _toode.IsActive = !_toode.IsActive;
    return _toode;
}

Tee uus API otspunkt, mis käivitades muudab toote nime. Võta selleks kasutusele URL muutuja ning määra tootele.

// GET: toode/muuda-nime/{uusNimi}
// See meetod uuendab toote (_toode) nime omadust URL-is esitatud uue nimega.
// Tagastab uuendatud toote.
[HttpGet("muuda-nime/{uusNimi}")]
public Toode MuudaNimi(string uusNimi)
{
    _toode.Name = uusNimi;
    return _toode;
}

Tee uus API otspunkt, mis käivitades muudab toote hinda muutujana antud numbri kordseks. Võta selleks kasutusele URL muutuja ning korruta toote hinnaga läbi.

// GET: toode/muuda-hinda/{korrutaja}
// See meetod korrutab toote (_toode) praeguse hinna URL-is antud kordajaga (korrutaja).
// Tagastab uuendatud toote uue hinnaga.
[HttpGet("muuda-hinda/{korrutaja}")]
public Toode MuudaHind(double korrutaja)
{
    _toode.Price *= korrutaja;
    return _toode;
}

12. Loodi uus kontroller nimega „TootedController“

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using veeb.Models;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TootedController : ControllerBase
    {
        // Staatiline toodete list, mis on algatatud mõnede näidisandmetega
        private static List<Toode> _tooted = new List<Toode>{
        new Toode(1,"Koola", 1.5, true),
        new Toode(2,"Fanta", 1.0, false),
        new Toode(3,"Sprite", 1.7, true),
        new Toode(4,"Vichy", 2.0, true),
        new Toode(5,"Vitamin well", 2.5, true)
        };


        // https://localhost:7052/tooted
        // GET: api/tooted
        // Tagastab toodete täieliku list
        [HttpGet]
        public List<Toode> Get()
        {
            return _tooted;
        }

        // GET: api/tooted/kustuta/{index}
        // Kustutab toote nimekirjast selle indeksi järgi ja tagastab uuendatud nimekirja
        [HttpGet("kustuta/{index}")]
        public List<Toode> Delete(int index)
        {
            _tooted.RemoveAt(index);
            return _tooted;
        }

        // GET: api/tooted/kustuta2/{index}
        // Kustutab toote indeksi järgi ja tagastab lihtsa kinnitussõnumi
        [HttpGet("kustuta2/{index}")]
        public string Delete2(int index)
        {
            _tooted.RemoveAt(index);
            return "Kustutatud!";
        }

        // GET: api/tooted/lisa/{id}/{nimi}/{hind}/{aktiivne}
        // Lisab nimekirja uue toote URL-aadressi parameetritega.
        // Tagastab uuendatud toodete nimekirja.
        [HttpGet("lisa/{id}/{nimi}/{hind}/{aktiivne}")]
        public List<Toode> Add(int id, string nimi, double hind, bool aktiivne)
        {
            Toode toode = new Toode(id, nimi, hind, aktiivne);
            _tooted.Add(toode);
            return _tooted;
        }

        // GET: api/tooted/lisa?id=1&nimi=Koola&hind=1.5&aktiivne=true
        // Lisab uue toote päringuparameetrite abil.
        // Tagastab uuendatud toodete loendi.
        [HttpGet("lisa")]
        public List<Toode> Add2([FromQuery] int id, [FromQuery] string nimi, [FromQuery] double hind, [FromQuery] bool aktiivne)
        {
            Toode toode = new Toode(id, nimi, hind, aktiivne);
            _tooted.Add(toode);
            return _tooted;
        }

        // GET: api/tooted/hind-dollaritesse/{kurss}
        // Konverteerib kõikide toodete hinna eurodest dollaritesse, kasutades antud vahetuskurssi (kurss)
        // Uuendab hinnad kohapeal ja tagastab uuendatud toodete nimekirja
        [HttpGet("hind-dollaritesse/{kurss}")]
        public List<Toode> Dollaritesse(double kurss)
        {
            for (int i = 0; i < _tooted.Count; i++)
            {
                _tooted[i].Price = _tooted[i].Price * kurss;
            }
            return _tooted;
        }

        // või foreachina:

        // GET: api/tooted/hind-dollaritesse2/{kurss}
        // Sama mis eespool, kuid kasutab for-tsükli asemel foreach-tsüklit
        [HttpGet("hind-dollaritesse2/{kurss}")]
        public List<Toode> Dollaritesse2(double kurss)
        {
            foreach (var t in _tooted)
            {
                t.Price = t.Price * kurss;
            }

            return _tooted;
        }
    }
}

Kuvab kõik tooted

Kustutab toode ID järgi

Lisab uus toode

Lisa param abi

Hind dollaritessse

Iseseisvad harjutused:

Tee uus API otspunkt, mis kustutab korraga kõik tooted.

// Kustutab korraga kõik tooted
// GET /api/tooted/kustuta-koik
[HttpGet("kustuta-koik")]
public string KustutaKoik()
{
    _tooted.Clear();
    return "Kõik tooted on kustutatud!";
}

Tee uus API otspunkt, mis muudab kõikide toodete aktiivsuse väära peale.

// Muudab kõikide toodete aktiivsuse väära peale
// GET /api/tooted/deaktiveeri-koik
[HttpGet("deaktiveeri-koik")]
public List<Toode> MuudaAktiivFalse()
{
    foreach (var t in _tooted)
    {
        t.IsActive = false;
    }
    return _tooted;
}

Tee uus API otspunkt, mis tagastab ühe toote – vastavalt kelle järjekorranumber on lisatud URL muutujasse.

// Tagastab ühe toote - vastavalt järjekorranumbrile (index)
// GET /api/tooted/uks/{index}
[HttpGet("uks/{index}")]
public ActionResult<Toode> GetByIndex(int index)
{
    if (index < 0 || index >= _tooted.Count)
    {
        return NotFound("Sellise indeksiga toodet ei eksisteeri!");
    }
    return _tooted[index];
}

Tee uus API otspunkt, mis tagastab ühe toote – kõige suurema hinnaga toote.

// Tagastab ühe toote - kõige suurema hinnaga
// GET /api/tooted/kalleim
[HttpGet("kalleim")]
public ActionResult<Toode> GetKoigeSuurem()
{
    if (_tooted.Count == 0)
    {
        return NotFound("Ühtegi toodet ei ole!");
    }
    var kalleim = _tooted.OrderByDescending(t => t.Price).FirstOrDefault();
    return kalleim!;
}

Eesliidese implementeerimine

Node.js command prompt

kui skript on lubatud Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Loo uus app
npx create-react-app frontend

Käivita rakendus, minnes esmalt käsureal õigesse kausta
npm start

App.js faili kirjuta järgnev sisu:

import { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {
  const [tooted, setTooted] = useState([]);
  const idRef = useRef();
  const nameRef = useRef();
  const priceRef = useRef();
  const isActiveRef = useRef();
  const [isUsd, setUsd] = useState(false);

  useEffect(() => {
    fetch("https://localhost:4444/api/tooted")
      .then(res => res.json())
      .then(json => setTooted(json));
  }, []);

  function kustuta(index) {
    fetch("https://localhost:4444/api/tooted/kustuta/" + index)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  function lisa() {
    fetch(`https://localhost:4444/api/tooted/lisa/${Number(idRef.current.value)}/${nameRef.current.value}/${Number(priceRef.current.value)}/${isActiveRef.current.checked}`)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  function dollariteks() {
    const kurss = 1.1;
    setUsd(true);
    fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  function eurodeks() {
    const kurss = 0.9091;
    setUsd(false);
    fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  return (
    <div className="App">
      <label>ID</label> <br />
      <input ref={idRef} type="number" /> <br />
      <label>name</label> <br />
      <input ref={nameRef} type="text" /> <br />
      <label>price</label> <br />
      <input ref={priceRef} type="number" /> <br />
      <label>isActive</label> <br />
      <input ref={isActiveRef} type="checkbox" /> <br />
      <button onClick={() => lisa()}>Lisa</button>
      {tooted.map((toode, index) => 
        <div>
          <div>{toode.id}</div>
          <div>{toode.name}</div>
          <div>{toode.price.toFixed(2)}</div>
          <button onClick={() => kustuta(index)}>x</button>
        </div>)}
      {isUsd === false && <button onClick={() => dollariteks()}>Muuda dollariteks</button>}
      {isUsd === true && <button onClick={() => eurodeks()}>Muuda eurodeks</button>}
    </div>
  );
}

export default App;

Lisatud järgmised read Program.cs faili võõra rakenduse minu tagarakendusele ligi lubamiseks


// Impordi Reacti hookid ja komponendi stiilileht
import { useEffect, useRef, useState } from 'react';
import './App.css';

// Reacti olek toodete nimekirja salvestamiseks
function App() {
  const [tooted, setTooted] = useState([]);

  // useRef hooks vormi sisestusväljade otseseks viitamiseks
  const idRef = useRef();
  const nameRef = useRef();
  const priceRef = useRef();
  const isActiveRef = useRef();
  // Seisund, mis jälgib, kas hinnad on praegu näidatud USD või EUR
  const [isUsd, setUsd] = useState(false);

  // useEffect käivitatakse üks kord, kui komponent paigaldatakse.
  // Laeb toodete nimekirja tagantpoolt API-st ja salvestab need olekusse.
  useEffect(() => {
    fetch("https://localhost:4444/api/tooted")
      .then(res => res.json())
      .then(json => setTooted(json));
  }, []);

  // Funktsioon toote kustutamiseks indeksi järgi
  // Saadab päringu tagapõhja API-le ja uuendab oleku uue tooteloendiga
  function kustuta(index) {
    fetch("https://localhost:4444/api/tooted/kustuta/" + index)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Uue toote lisamise funktsioon
  // Loeb sisendväärtused ref-idest ja saadab need URL-i osana backend API-le
  function lisa() {
    fetch(`https://localhost:4444/api/tooted/lisa/${Number(idRef.current.value)}/${nameRef.current.value}/${Number(priceRef.current.value)}/${isActiveRef.current.checked}`)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade konverteerimiseks USA dollaritesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  function dollariteks() {
    const kurss = 1.1;
    setUsd(true);
    fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade tagasi konverteerimiseks eurodesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  function eurodeks() {
    const kurss = 0.9091;
    setUsd(false);
    fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // JSX komponendi kasutajaliidese renderdamiseks
  return (
    <div className="App">
      <label>ID</label> <br />
      <input ref={idRef} type="number" /> <br />
      <label>name</label> <br />
      <input ref={nameRef} type="text" /> <br />
      <label>price</label> <br />
      <input ref={priceRef} type="number" /> <br />
      <label>isActive</label> <br />
      <input ref={isActiveRef} type="checkbox" /> <br />
      <button onClick={() => lisa()}>Lisa</button>
      {tooted.map((toode, index) => 
        <div>
          <div>{toode.id}</div>
          <div>{toode.name}</div>
          <div>{toode.price.toFixed(2)}</div>
          <button onClick={() => kustuta(index)}>x</button>
        </div>)}
      {isUsd === false && <button onClick={() => dollariteks()}>Muuda dollariteks</button>}
      {isUsd === true && <button onClick={() => eurodeks()}>Muuda eurodeks</button>}
    </div>
  );
}

export default App;

Parimad praktikad

GET – andmete võtmiseks

PUT – andmete asendamiseks

POST – andmete lisamiseks

PATCH – ühe omaduse muutmiseks

DELETE – kustutamiseks

1. Olemasolevad päringud on uuendatud, et need vastaksid meetoditele


// Impordi Reacti hookid ja komponendi stiilileht
import { useEffect, useRef, useState } from 'react';
import './App.css';

// Reacti olek toodete nimekirja salvestamiseks
function App() {
  const [tooted, setTooted] = useState([]);

  // useRef hooks vormi sisestusväljade otseseks viitamiseks
  const idRef = useRef();
  const nameRef = useRef();
  const priceRef = useRef();
  const isActiveRef = useRef();
  // Seisund, mis jälgib, kas hinnad on praegu näidatud USD või EUR
  const [isUsd, setUsd] = useState(false);

  // useEffect käivitatakse üks kord, kui komponent paigaldatakse.
  // Laeb toodete nimekirja tagantpoolt API-st ja salvestab need olekusse.
  useEffect(() => {
    fetch("https://localhost:4444/api/tooted")
      .then(res => res.json())
      .then(json => setTooted(json));
  }, []);

  // Funktsioon toote kustutamiseks indeksi järgi
  // Saadab päringu tagapõhja API-le ja uuendab oleku uue tooteloendiga
  function kustuta(index) {
    fetch("https://localhost:4444/tooted/kustuta/" + index, {"method": "DELETE"})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Uue toote lisamise funktsioon
  // Loeb sisendväärtused ref-idest ja saadab need URL-i osana backend API-le
  function lisa() {
    const uusToode = {
      "id": Number(idRef.current.value),
      "name": nameRef.current.value,
      "price": Number(priceRef.current.value),
      "isActive": isActiveRef.current.checked
    }
    fetch("https://localhost:4444/tooted/lisa", {"method": "POST", "body": JSON.stringify(uusToode)})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade konverteerimiseks USA dollaritesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  function dollariteks() {
    const kurss = 1.1;
    fetch("https://localhost:4444/tooted/hind-dollaritesse/" + kurss, {"method": "PATCH"})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade tagasi konverteerimiseks eurodesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  //function eurodeks() {
  //  const kurss = 0.9091;
  //  setUsd(false);
  //  fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
  //    .then(res => res.json())
  //    .then(json => setTooted(json));
  //}

  // JSX komponendi kasutajaliidese renderdamiseks
  return (
    <div className="App">
      <label>ID</label> <br />
      <input ref={idRef} type="number" /> <br />
      <label>Nimi</label> <br />
      <input ref={nameRef} type="text" /> <br />
      <label>Hind</label> <br />
      <input ref={priceRef} type="number" /> <br />
      <label>Aktiivne</label> <br />
      <input ref={isActiveRef} type="checkbox" /> <br />
      <button onClick={() => lisa()}>Lisa</button>
      {tooted.map((toode, index) => 
        <div>
          <div>{toode.id}</div>
          <div>{toode.name}</div>
          <div>{toode.price}</div>
          <button onClick={() => kustuta(index)}>x</button>
        </div>)}
      <button onClick={() => dollariteks()}>Muuda dollariteks</button>
    </div>
  );
}

export default App;

Iseseisev harjutus:

2. Loodud uus API-lõpppunkt tagapõhisüsteemis, mis muudab toodet TootedController failis

// PUT /api/tooted/muuda/3
[HttpPut("muuda/{id}")]
public ActionResult<List<Toode>> Muuda(int id, [FromBody] Toode uusToode)
{
    // Leia toode, mille ID vastab URL-is olevale id-le
    var olemasolevToode = _tooted.FirstOrDefault(t => t.Id == id);
    if (olemasolevToode == null)
    {
        return NotFound("Sellise ID-ga toodet ei leitud!");
    }

    // Uuenda olemasoleva toote andmed
    olemasolevToode.Name = uusToode.Name;
    olemasolevToode.Price = uusToode.Price;
    olemasolevToode.IsActive = uusToode.IsActive;

    // Tagasta kogu uuendatud toodete nimekiri
    return Ok(_tooted);
}

Postman

Postman võimaldab teil teha kõik päringud ja neid võimalikult lihtsas keskkonnas testida. Logi sisse postmanis

Lisa uus HTTP Request

Pärast URL-i sisestamist vajuta nuppu „Send”.

Uue andmetüübi lisamiseks nagu teeksite seda brauseris. Post-meetodi kasutamiseks peate muutma oma backendi koodi (HttpGet asemel HttpPost).

Response 200 OK

Andmete muutmiseks kasutasin HttpPut-meetodit, seega pean GET-i muutma PUT-iks.

„Body“ pean muutma „raw“ ja valima JSON tüübi.

Andmete kustutamiseks peame uuesti kasutama GET-i.

API päring teise rakendusse: pakiautomaatide kättesaamine

Võtsin pakiautomaadid lehelt, kus need on kõigile avalikud. https://www.omniva.ee/locations.json

Tehtud uus kontroller

Tegi API-lõpppunkti

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ParcelMachineController : ControllerBase
    {

        [HttpGet]
        public string GetParcelMachines()
        {
            return "PAKIAUTOMAADID";
        }
    }
}

Selleks, et võõrasse rakendusse päringuid teha, peame seda tegema HttpClient abil.

Lisasin selle (builder.Services.AddHttpClient();) oma programmi faili.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddHttpClient();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

//app.UseHttpsRedirection();

app.UseCors(options => options
    .WithOrigins("http://localhost:3000")
    .AllowAnyMethod()
    .AllowAnyHeader()
);

app.UseAuthorization();

app.MapControllers();

app.Run();

Lisasime kontrollerile HttpClient-funktsiooni.

Seda kontseptsiooni nimetatakse „sõltuvuste süstimiseks”.

HttpClient võimaldab meil teha päringuid internetis.

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ParcelMachineController : ControllerBase
    {
        private readonly HttpClient _httpClient;

        public ParcelMachineController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }

        [HttpGet]
        public string GetParcelMachines()
        {
            return "PAKIAUTOMAADID";
        }
    }
}

Esitasin taotluse teise rakenduse API-lõpppunktile

Kasutan HttpClient muutujaga _httpClient ja esitan Get-taotluse Omniva API-lõpppunktile.

Pean seda tegema asünkroonselt, kuna rakendus vajab päringu täitmiseks aega. Pean ka funktsiooni päises rõhutama, et tegemist on asünkroonse funktsiooniga.

Tagastan kõik pakiautomaadid asünkroonselt muutujale responseBody, kuid tagastan endiselt sõna „PARCEL MACHINES” esilehe rakendusele.

public class ParcelMachineController : ControllerBase
    {
        private readonly HttpClient _httpClient;

        public ParcelMachineController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }
        
        [HttpGet]
        public async Task<string> GetParcelMachines()
        {
            var response = await _httpClient.GetAsync("https://www.omniva.ee/locations.json");
            var responseBody = await response.Content.ReadAsStringAsync();
            return "PAKIAUTOMAADID";
        }
    }

Tagastame eesrakendusele pakiautomaadid

Tagastame kogu saadud sisu eesrakendusele. Ütleme, et tegemist on JSON kujuga “application/json” kirje abil.

IActionResult tagastuses tähendab HttpClient päringu vastust.

public class ParcelMachineController : ControllerBase
    {
        private readonly HttpClient _httpClient;

        public ParcelMachineController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }
        
        [HttpGet]
        public async Task<IActionResult> GetParcelMachines()
        {
            var response = await _httpClient.GetAsync("https://www.omniva.ee/locations.json");
            var responseBody = await response.Content.ReadAsStringAsync();
            return Content(responseBody, "application/json");
        }
    }

Tulemus:

Näitas pakiautomaate Reactis


// Impordi Reacti hookid ja komponendi stiilileht
import { useEffect, useRef, useState } from 'react';
import './App.css';

// Reacti olek toodete nimekirja salvestamiseks
function App() {
  const [tooted, setTooted] = useState([]);

  const [pakiautomaadid, setPakiautomaadid] = useState([]);

  // useRef hooks vormi sisestusväljade otseseks viitamiseks
  const idRef = useRef();
  const nameRef = useRef();
  const priceRef = useRef();
  const isActiveRef = useRef();
  // Seisund, mis jälgib, kas hinnad on praegu näidatud USD või EUR
  const [isUsd, setUsd] = useState(false);


  useEffect(() => {
    fetch("https://localhost:4444/api/parcelmachine")
      .then(res => res.json())
      .then(json => setPakiautomaadid(json));
  }, []);

  // useEffect käivitatakse üks kord, kui komponent paigaldatakse.
  // Laeb toodete nimekirja tagantpoolt API-st ja salvestab need olekusse.
  useEffect(() => {
    fetch("https://localhost:4444/api/tooted")
      .then(res => res.json())
      .then(json => setTooted(json));
  }, []);

  // Funktsioon toote kustutamiseks indeksi järgi
  // Saadab päringu tagapõhja API-le ja uuendab oleku uue tooteloendiga
  function kustuta(index) {
    fetch("https://localhost:4444/tooted/kustuta/" + index, {"method": "DELETE"})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Uue toote lisamise funktsioon
  // Loeb sisendväärtused ref-idest ja saadab need URL-i osana backend API-le
  function lisa() {
    const uusToode = {
      "id": Number(idRef.current.value),
      "name": nameRef.current.value,
      "price": Number(priceRef.current.value),
      "isActive": isActiveRef.current.checked
    }
    fetch("https://localhost:4444/tooted/lisa", {"method": "POST", "body": JSON.stringify(uusToode)})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade konverteerimiseks USA dollaritesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  function dollariteks() {
    const kurss = 1.1;
    fetch("https://localhost:4444/tooted/hind-dollaritesse/" + kurss, {"method": "PATCH"})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade tagasi konverteerimiseks eurodesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  //function eurodeks() {
  //  const kurss = 0.9091;
  //  setUsd(false);
  //  fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
  //    .then(res => res.json())
  //    .then(json => setTooted(json));
  //}

  // JSX komponendi kasutajaliidese renderdamiseks
  return (
    <div className="App">
      <label>ID</label> <br />
      <input ref={idRef} type="number" /> <br />
      <label>Nimi</label> <br />
      <input ref={nameRef} type="text" /> <br />
      <label>Hind</label> <br />
      <input ref={priceRef} type="number" /> <br />
      <label>Aktiivne</label> <br />
      <input ref={isActiveRef} type="checkbox" /> <br />
      <button onClick={() => lisa()}>Lisa</button>
      {tooted.map((toode, index) => 
        <div>
          <div>{toode.id}</div>
          <div>{toode.name}</div>
          <div>{toode.price}</div>
          <button onClick={() => kustuta(index)}>x</button>
        </div>)}
      <button onClick={() => dollariteks()}>Muuda dollariteks</button>

      <select>
        {pakiautomaadid.map(automaat => 
            <option>
                {automaat.NAME}
            </option>)}
      </select>
    </div>
  );
}

export default App;

API päring teise rakendusse: Elering hindade kättesaamine

Võtsin NordPooli elektrihinnad Eleringi veebilehelt, kus need on avalikult kõigile kättesaadavad. https://dashboard.elering.ee/api/nps/price

Tehtud uus controller

Saan kõik hinnad API-liidesest

Päringu abil saan järgmise 24 tunni hinnad

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class NordpoolController : ControllerBase
    {
        private readonly HttpClient _httpClient;

        public NordpoolController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }

        [HttpGet]
        public async Task<IActionResult> GetNordpoolPrices()
        {
            var response = await _httpClient.GetAsync("https://dashboard.elering.ee/api/nps/price");
            var responseBody = await response.Content.ReadAsStringAsync();
            return Content(responseBody, "application/json");
        }
    }
}

Tulemus:

Näitas NordPooli hindu Reactis


// Impordi Reacti hookid ja komponendi stiilileht
import { useEffect, useRef, useState } from 'react';
import './App.css';

// Reacti olek toodete nimekirja salvestamiseks
function App() {
  const [tooted, setTooted] = useState([]);

  // Eraldi olek Omniva ja SmartPost automaatide jaoks
  const [omnivaAutomatid, setOmnivaAutomatid] = useState([]);

  // NordPool hinnad eri riikide jaoks
  const [fi, setFi] = useState([]);
  const [ee, setEe] = useState([]);
  const [lv, setLv] = useState([]);
  const [lt, setLt] = useState([]);

  // useRef hooks vormi sisestusväljade otseseks viitamiseks
  const idRef = useRef();
  const nameRef = useRef();
  const priceRef = useRef();
  const isActiveRef = useRef();
  // Seisund, mis jälgib, kas hinnad on praegu näidatud USD või EUR
  const [isUsd, setUsd] = useState(false);

  // Laeme NordPooli elektrihinnad backendist
  useEffect(() => {
    fetch("https://localhost:4444/api/nordpool")
      .then(res => res.json())
      .then(json => {
        setFi(json.data.fi);
        setEe(json.data.ee)
        setLv(json.data.lv)
        setLt(json.data.lt)
      });
  }, []);

  // Lae Omniva pakiautomaadid
  useEffect(() => {
    fetch("https://localhost:4444/api/parcelmachine/omniva")
      .then(res => res.json())
      .then(json => setOmnivaAutomatid(json));
  }, []);

  // useEffect käivitatakse üks kord, kui komponent paigaldatakse.
  // Laeb toodete nimekirja tagantpoolt API-st ja salvestab need olekusse.
  useEffect(() => {
    fetch("https://localhost:4444/api/tooted")
      .then(res => res.json())
      .then(json => setTooted(json));
  }, []);

  // Funktsioon toote kustutamiseks indeksi järgi
  // Saadab päringu tagapõhja API-le ja uuendab oleku uue tooteloendiga
  function kustuta(index) {
    fetch("https://localhost:4444/tooted/kustuta/" + index, {"method": "DELETE"})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Uue toote lisamise funktsioon
  // Loeb sisendväärtused ref-idest ja saadab need URL-i osana backend API-le
  function lisa() {
    const uusToode = {
      "id": Number(idRef.current.value),
      "name": nameRef.current.value,
      "price": Number(priceRef.current.value),
      "isActive": isActiveRef.current.checked
    }
    fetch("https://localhost:4444/tooted/lisa", {"method": "POST", "body": JSON.stringify(uusToode)})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade konverteerimiseks USA dollaritesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  function dollariteks() {
    const kurss = 1.1;
    fetch("https://localhost:4444/tooted/hind-dollaritesse/" + kurss, {"method": "PATCH"})
      .then(res => res.json())
      .then(json => setTooted(json));
  }

  // Funktsioon hindade tagasi konverteerimiseks eurodesse
  // Kasutab konverteerimiskursi ja uuendab nii API kui ka staatuse
  //function eurodeks() {
  //  const kurss = 0.9091;
  //  setUsd(false);
  //  fetch("https://localhost:4444/api/tooted/hind-dollaritesse/" + kurss)
  //    .then(res => res.json())
  //    .then(json => setTooted(json));
  //}

  // JSX komponendi kasutajaliidese renderdamiseks
  return (
    <div className="App">
      <h2>Lisa uus toode</h2>
      <label>ID</label> <br />
      <input ref={idRef} type="number" /> <br />
      <label>Nimi</label> <br />
      <input ref={nameRef} type="text" /> <br />
      <label>Hind</label> <br />
      <input ref={priceRef} type="number" /> <br />
      <label>Aktiivne</label> <br />
      <input ref={isActiveRef} type="checkbox" /> <br />
      <button onClick={() => lisa()}>Lisa</button>

      <h2>Tooted</h2>
      {tooted.map((toode, index) =>
        <div key={toode.id}>
          <div>{toode.id}</div>
          <div>{toode.name}</div>
          <div>{toode.price}</div>
          <button onClick={() => kustuta(index)}>x</button>
        </div>
      )}

      <button onClick={() => dollariteks()}>Muuda dollariteks</button>

      <h3>Omniva pakiautomaadid</h3>
      <select>
        {omnivaAutomatid.map(automaat =>
          <option key={automaat.NAME}>{automaat.NAME}</option>
        )}
      </select>

        <h3>NordPool hinnad</h3>
        <table style={{marginLeft: "100px"}}>
        <thead>
          <th style={{border: "1px solid #ddd", padding: "12px", backgroundColor: "#04AA6D"}}>Ajatempel</th>
          <th style={{border: "1px solid #ddd", padding: "12px", backgroundColor: "#04AA6D"}}>Hind</th>
        </thead>
        <tbody>
          <div style={{position: "absolute", left: "30px"}}>Soome</div>
          {fi.map(data => 
          <tr key={data.timestamp}>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{new Date(data.timestamp * 1000).toISOString()}</td>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{data.price}</td>
          </tr>)}
          <div style={{position: "absolute", left: "30px"}}>Eesti</div>
          {ee.map(data => 
          <tr key={data.timestamp}>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{new Date(data.timestamp * 1000).toISOString()}</td>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{data.price}</td>
          </tr>)}
          <div style={{position: "absolute", left: "30px"}}>Läti</div>
          {lv.map(data => 
          <tr key={data.timestamp}>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{new Date(data.timestamp * 1000).toISOString()}</td>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{data.price}</td>
          </tr>)}
          <div style={{position: "absolute", left: "30px"}}>Leedu</div>
          {lt.map(data => 
          <tr key={data.timestamp}>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{new Date(data.timestamp * 1000).toISOString()}</td>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{data.price}</td>
          </tr>)}
        </tbody>
      </table>

    </div>
  );
}

export default App;

API päring teise rakendusse: Elering päringu modifitseerimine

Eesrakendus soovib API otspunkti konfigureerida selliseks, et saadetakse kaasa “ee”, “lv”, “lt” või “fi” parameeter ning näidatakse selle riigi hindasid

Muuda koodi BackEndis ja FrontEndis

function App() {
  const [prices, setPrices] = useState([]);
  const [chosenCountry, setChosenCountry] = useState("ee");

  useEffect(() => {
    fetch("https://localhost:4444/nordpool/" + chosenCountry)
      .then(res => res.json())
      .then(json => {
        setPrices(json);
      });
  }, [chosenCountry]);

  return (
    <div>
      <button onClick={() => setChosenCountry("fi")}>Soome</button>
      <button onClick={() => setChosenCountry("ee")}>Eesti</button>
      <button onClick={() => setChosenCountry("lv")}>Läti</button>
      <button onClick={() => setChosenCountry("lt")}>Leedu</button>
      <table style={{marginLeft: "100px"}}>
        <thead>
          <th style={{border: "1px solid #ddd", padding: "12px", backgroundColor: "#04AA6D"}}>Ajatempel</th>
          <th style={{border: "1px solid #ddd", padding: "12px", backgroundColor: "#04AA6D"}}>Hind</th>
        </thead>
        <tbody>
          <div style={{position: "absolute", left: "30px"}}>{chosenCountry}</div>
          {prices.map(data => 
          <tr key={data.timestamp}>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{new Date(data.timestamp * 1000).toISOString()}</td>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{data.price}</td>
          </tr>)}
        </tbody>
      </table>
    </div>
  );

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class NordpoolController : ControllerBase
    {

        private readonly HttpClient _httpClient;

        public NordpoolController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }

        [HttpGet("{country}")]
        public async Task<IActionResult> GetNordPoolPrices(string country)
        {
            var response = await _httpClient.GetAsync("https://dashboard.elering.ee/api/nps/price");
            var responseBody = await response.Content.ReadAsStringAsync();
            var jsonDoc = JsonDocument.Parse(responseBody);
            var dataProperty = jsonDoc.RootElement.GetProperty("data");

            if (country == "ee")
            {
                var prices = dataProperty.GetProperty("ee").ToString();
                return Content(prices, "application/json");
            }
            else if (country == "lv")
            {
                var prices = dataProperty.GetProperty("lv").ToString();
                return Content(prices, "application/json");
            }
            else if (country == "lt")
            {
                var prices = dataProperty.GetProperty("lt").ToString();
                return Content(prices, "application/json");
            }
            else if (country == "fi")
            {
                var prices = dataProperty.GetProperty("fi").ToString();
                return Content(prices, "application/json");
            }
            else
            {
                return BadRequest("Invalid country code.");
            }
        }
    }
}

Tulemus:

Esmane rakendus kuvab kuupäevad ja kui kuupäevale klõpsata, kuvatakse selle kuupäeva hinnad. Minu ülesanne on võimaldada seda esmase rakenduse kaudu, võttes vastu kuupäeva esmasest rakendusest ja saates selle Eleringi API-liidesesse.

BackEnd

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class NordpoolController : ControllerBase
    {

        private readonly HttpClient _httpClient;

        public NordpoolController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }

        [HttpGet("{country}/{start}/{end}")]
        public async Task<IActionResult> GetNordPoolPrices(
            string country,
            string start,
            string end)
        {
            var response = await _httpClient.GetAsync(
                $"https://dashboard.elering.ee/api/nps/price?start={start}&end={end}");
            var responseBody = await response.Content.ReadAsStringAsync();
            Console.WriteLine(responseBody);

            var jsonDoc = JsonDocument.Parse(responseBody);
            var dataProperty = jsonDoc.RootElement.GetProperty("data");

            string prices;

            switch (country)
            {
                case "ee":
                    prices = dataProperty.GetProperty("ee").ToString();
                    Console.WriteLine(responseBody);

                    return Content(prices, "application/json");

                case "lv":
                    prices = dataProperty.GetProperty("lv").ToString();
                    return Content(prices, "application/json");

                case "lt":
                    prices = dataProperty.GetProperty("lt").ToString();
                    return Content(prices, "application/json");

                case "fi":
                    prices = dataProperty.GetProperty("fi").ToString();
                    return Content(prices, "application/json");

                default:
                    return BadRequest("Invalid country code.");
            }
        }
    }
}

FrontEnd

import { useRef } from 'react';
import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [prices, setPrices] = useState([]);
  const [chosenCountry, setChosenCountry] = useState("ee");
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const startRef = useRef();
  const endRef = useRef();

  useEffect(() => {
    if (start !== "" && end !== "") {
      fetch("https://localhost:4444/nordpool/" + chosenCountry + "/" + start + "/" + end)
        .then(res => res.json())
        .then(json => {
          setPrices(json);
        });
    }
  }, [chosenCountry, start, end]);

  function updateStart() {
    const startIso = new Date(startRef.current.value).toISOString();
    setStart(startIso);
  }

  function updateEnd() {
    const endIso = new Date(endRef.current.value).toISOString();
    setEnd(endIso);
  }

  return (
    <div>
      <button onClick={() => setChosenCountry("fi")}>Soome</button>
      <button onClick={() => setChosenCountry("ee")}>Eesti</button>
      <button onClick={() => setChosenCountry("lv")}>Läti</button>
      <button onClick={() => setChosenCountry("lt")}>Leedu</button>
      <input ref={startRef} onChange={updateStart} type="datetime-local" />
      <input ref={endRef} onChange={updateEnd} type="datetime-local" />
      {prices.length > 0 && 
      <table style={{marginLeft: "100px"}}>
        <thead>
          <th style={{border: "1px solid #ddd", padding: "12px", backgroundColor: "#04AA6D"}}>Ajatempel</th>
          <th style={{border: "1px solid #ddd", padding: "12px", backgroundColor: "#04AA6D"}}>Hind</th>
        </thead>
        <tbody>
          <td style={{position: "absolute", left: "30px"}}>{chosenCountry}</td>
          {prices.map(data => 
          <tr key={data.timestamp}>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{new Date(data.timestamp * 1000).toISOString()}</td>
            <td style={{border: "1px solid #ddd", padding: "8px"}}>{data.price}</td>
          </tr>)}
        </tbody>
      </table>}
    </div>
  );
}

export default App;

Tulemus

API päring teise rakendusse: Makse

Makse teostamiseks on vajalik järgmine kood uues Controlleris

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Net.Http.Headers;
using System.Text;
using System.Text.Json;

namespace veeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class PaymentController : ControllerBase
    {
        private readonly HttpClient _httpClient;

        public PaymentController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }

        // Algatab ühekordse makse antud summa (summa) eest
        [HttpGet("{sum}")]
        public async Task<IActionResult> MakePayment(string sum)
        {
            // See objekt sisaldab API-autentimisandmeid, maksesummat, tellimuse viitenumbrit, juhuslikku numbrit, ajamärget ja ümbersuunamis-URL-i.
            var paymentData = new
            {
                api_username = "e36eb40f5ec87fa2",
                account_name = "EUR3D1",
                amount = sum,
                order_reference = Math.Ceiling(new Random().NextDouble() * 999999),
                nonce = $"a9b7f7e7as{DateTime.Now}{new Random().NextDouble() * 999999}",
                timestamp = DateTime.Now,
                customer_url = "https://maksmine.web.app/makse"
            };

            // Serialiseeri makseandmed JSON-vormingusse
            var json = JsonSerializer.Serialize(paymentData);

            // Määrake JSON StringContent-i, et saata see HTTP-keha osana
            var content = new StringContent(json, Encoding.UTF8, "application/json");

            // Loo uus HttpClient
            var client = new HttpClient();

            // Lisa põhilise autentimise päis
            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", "ZTM2ZWI0MGY1ZWM4N2ZhMjo3YjkxYTNiOWUxYjc0NTI0YzJlOWZjMjgyZjhhYzhjZA==");

            // Saada POST-päring EveryPay ühekordse makse lõpppunktile
            var response = await client.PostAsync("https://igw-demo.every-pay.com/api/v4/payments/oneoff", content);

            if (response.IsSuccessStatusCode)
            {
                // Loe vastuse sisu stringina
                var responseContent = await response.Content.ReadAsStringAsync();

                // Analüüsi JSON-vastust
                var jsonDoc = JsonDocument.Parse(responseContent);

                // Eemalda makselink JSON-ist
                var paymentLink = jsonDoc.RootElement.GetProperty("payment_link");

                // Tagasta makselink kasutajaliidesele
                return Ok(paymentLink);
            }
            else
            {
                // Kui makse ebaõnnestus, tagasta 400 Bad Request
                return BadRequest("Payment failed.");
            }
        }
    }
}