Veebirakenduste loomine API päringute abil

1. Uue projekti loomine


Installerimine “ASP.NET and web development” ja vali APS.NET Core Web API

2. Käivitamine


Seejärel avatakse lokaalserveris Swagger, kus on defineeritud meile kaasa antud API otspunktid: https://localhost:7074/swagger/index.html

Uue kausta loomine:
Sulge rakendus (kui see on käima pandud)
Ava Solutions Explorer paremalt (Visual Studio programmis)
Parem klõps projekti nime peal
Ava “Add” rippmenüü vaade
Vajuta “New Folder”
Muuda nime kausta peal parema klõpsuga “Rename” või F2 klahvile vajutades
Pane kausta nimeks “Models”

Uue faili loomine:
Äsjaloodud kausta parem klõps
Vali “Add”
Avanenud vaates vali “New item…”
Vali C# class (paremal on kirjas An empty class declaration)
Muuda klassi nime “Toode” peale.

Mudeli paneme koosnema neljast omadusest: id, nimi, hind, aktiivne – esimene täisarvuline, teine sõnaline, kolmas komakohaga ning neljas kahendväärtuseline väärtus.
Lisame konstruktori, mille abil saame uut toodet luua.

namespace Web_TARpv22.Models
{
    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;
        }
    }
}

Siis loome veel üks mudel, nagu esimene. Aga teeme Kasutaja mudel .
Uue faili loomine:
Äsjaloodud kausta parem klõps
Vali “Add”
Avanenud vaates vali “New item…”
Vali C# class (paremal on kirjas An empty class declaration)
Muuda klassi nime “Kasutaja” peale.

Mudeli paneme koosnema neljast omadusest:
täisarvuline ID, sõnaline kasutajanimi, sõnaline parool, sõnaline eesnimi, sõnaline perenimi

namespace Web_TARpv22.Models
{
    public class Kasutaja
    {
        public int Id { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
        public string Nimi { get; set; }
        public string Perenimi { get; set; }


        public Kasutaja(int id, string username, string password, string nimi, string perenimi)
        {
            Id = id;
            Username = username;
            Password = password;
            Nimi = nimi;
            Perenimi = perenimi;
        }
    }
}

3. API päringud mudeliga

TOODE


Uue faili loomiseks vajuta kausta “Controllers” kausta peal parema klõpsuga, vali “add” ning võta “New Item…”. Pane loodud faili nimeks ToodeController.cs ning vali tühja API kontrolleri mall (API Controller – Empty).

Nimeks pane “ToodeController.cs” .

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

namespace Web_TARpv22.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class ToodeController : ControllerBase
    {
        private static Toode _toode = new Toode(1, "Koola", 1.5, true);

        // GET: toode
        [HttpGet]
        public Toode GetToode()
        {
            return _toode;
        }

        // GET: toode/suurenda-hinda
        [HttpGet("suurenda-hinda")]
        public Toode SuurendaHinda()
        {
            _toode.Price = _toode.Price + 1;
            return _toode;
        }

        // Iseseisev töö ------------------------

        // GET: toode/IsActive
        [HttpGet("IsActive")]
        public Toode IsActive()
        {
            _toode.IsActive = !_toode.IsActive;
            return _toode;
        }
        
        // GET: toode/NameChange/Pepsi
        [HttpGet("NameChange/{url}")]
        public Toode NameChange(string url)
        {
            _toode.Name = url;
            return _toode;
        }
        
        // GET: toode/Multiply/2
        [HttpGet("Multiply/{url}")]
        public Toode Multiply(double url)
        {
            _toode.Price =  _toode.Price * url;
            return _toode;
        }
    }
}

Esimesest päringust me saame näema toode mis meil on

Teisest päringust saame lisada +1 punkt hinnasse

Kolmast päringust saame vahestada “IsActive” true => false või false => true

Neljast päringust saame vahestada nime

Viiest päringust saame korrutada hind

KASUTAJA

Uue faili loomiseks vajuta kausta “Controllers” kausta peal parema klõpsuga, vali “add” ning võta “New Item…”. Pane loodud faili nimeks KasutajaController.cs ning vali tühja API kontrolleri mall (API Controller – Empty).

Nimeks pane “KasutajaController.cs” .

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

namespace Web_TARpv22.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class KasutajaController : ControllerBase
    {
        private static Kasutaja _kasutaja = new Kasutaja(1, "TestUser", "qwerty123", "Test", "Test");

        // GET: toode
        [HttpGet]
        public Kasutaja GetKasutaja()
        {
            return _kasutaja;
        }

    }
}

Swagger kasutajaga näeb nagu nii:

Päringust me saame naha kasutaja

4. API päringud mudeli ja listiga

TOODED

Uue faili loomiseks vajuta kausta “Controllers” kausta peal parema klõpsuga, vali “add” ning võta “New Item…”. Pane loodud faili nimeks ToodedController.cs ning vali tühja API kontrolleri mall (API Controller – Empty).

[Route("[controller]")]
[ApiController]
public class ToodedController : ControllerBase
{
    private static List<Toode> _tooded = new()
    {
    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)
    };



    //GET - получение данных

    //PUT - замена данных

    //POST - добавить данные

    //PATCH - изменение свойства

    //DELETE - удалить


    // GET :/tooded
    [HttpGet]
    public List<Toode> Get()
    {
        return _tooded;
    }

    // DELETE :/tooded/kustuta/0
    [HttpDelete("kustuta/{index}")]
    public List<Toode> Delete(int index)
    {
        _tooded.RemoveAt(index);
        return _tooded;
    }

    [HttpDelete("kustuta2/{index}")]
    public string Delete2(int index)
    {
        _tooded.RemoveAt(index);
        return "Kustutatud!";
    }

    // POST :/tooted/lisa
    [HttpPost("lisa")]
    public List<Toode> Add([FromBody] Toode toode)
    {
        _tooded.Add(toode);
        return _tooded;
    }

    [HttpPost("lisa2")] // POST :/tooded/lisa2?id=1&nimi=Koola&hind=1.5&aktiivne=true
    public List<Toode> Add2([FromQuery] int id, [FromQuery] string nimi, [FromQuery] double hind, [FromQuery] bool aktiivne)
    {
        Toode toode = new Toode(id, nimi, hind, aktiivne);
        _tooded.Add(toode);
        return _tooded;
    }

    [HttpPatch("hind-dollaritesse/{kurss}")] // PATCH :/tooded/hind-dollaritesse/1.5
    public List<Toode> Dollaritesse(double kurss)
    {
        for (int i = 0; i < _tooded.Count; i++)
        {
            _tooded[i].Price = _tooded[i].Price * kurss;
        }
        return _tooded;
    }

    // või foreachina:

    [HttpPatch("hind-dollaritesse2/{kurss}")] // PATCH :/tooded/hind-dollaritesse2/1.5
    public List<Toode> Dollaritesse2(double kurss)
    {
        foreach (var t in _tooded)
        {
            t.Price = t.Price * kurss;
        }

        return _tooded;
    }

    // Iseseisev töö -------------------------------------

    // DELETE :/tooded/kustuta_all
    [HttpDelete("kustuta_all")]
    public string Delete_all()
    {
        _tooded.Clear();
        return "Kõik on kustutatud.";
    }
    
    // PUT :/tooded/false_all
    [HttpPut("false_all")]
    public List<Toode> false_all()
    {
        foreach(var t in _tooded)
        {
            t.IsActive = false;
        }
        return _tooded;
    }

    // GET :/tooded/getOne/1
    [HttpGet("getOne/{id}")]
    public Toode GetOne(int id)
    {
        if (id <= _tooded.Count() && id > 0)
        {
            return _tooded[id - 1];
        }
        else
        {
            return null;
        }
    }

    // GET :/tooded/kallim
    [HttpGet("kallim")]
    public string kallim()
    {
        var maxPrice = _tooded.Max(t => t.Price);
        return $"{maxPrice}";
    }
}

Esimesest päringust saame näha kõik tooded

Teisest päringust me saame kustuta tooded id´st, aga ta kustutab id´st +1. Näiteks teeme id=2 aga ta kustutab 3-s id

Kolmast päringust saame kustutama täpselt id´st mis meil toodest on.

Neljast päringust saame lisada üks toode

Viiest päringust saame lisada vormist toode

Kuuest päsingust saame korraldada kõik hinnad millest avust me kirjutame. Aga teeme selle “for” tsükkliga

Seitsmest päsingust saame korraldada kõik hinnad millest avust me kirjutame. Aga teeme selle “foreach” tsükkliga

Kaheksast päringust saame kustuta kõik tooded

Üheksast päringust saame kõikile toodele panna “IsActive” =>false

Kümnest päringust saame saada ühe toode, kui me kirjutame tema id

Üheteistkümnest päringust saame näha kõige kallim toode

KASUTAJAD

Uue faili loomiseks vajuta kausta “Controllers” kausta peal parema klõpsuga, vali “add” ning võta “New Item…”. Pane loodud faili nimeks KasutajadController.cs ning vali tühja API kontrolleri mall (API Controller – Empty).

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

namespace Web_TARpv22.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class KasutajadController : Controller
    {

        private readonly HttpClient _httpClient;

        public KasutajadController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }
        private static List<Kasutaja> _kasutaja = new()
        {
            new Kasutaja (1, "Test1", "123123", "test1","TEST1"),
            new Kasutaja (2, "Test2", "123123", "test2", "TEST2"),
            new Kasutaja (3, "Test3", "123123", "test3", "TEST3"),
            new Kasutaja (4, "Test4", "123123", "test4", "TEST4"),
            new Kasutaja (5, "Test5", "123123", "test5", "TEST5")
        };

        // GET /tooted
        [HttpGet]
        public List<Kasutaja> Get()
        {
            return _kasutaja;
        }

        // DELETE /tooted/kustuta/0
        [HttpDelete("kustuta/{index}")]
        public List<Kasutaja> Delete(int index)
        {
            _kasutaja.RemoveAt(index);
            return _kasutaja;
        }

        [HttpDelete("kustuta2/{index}")]
        public string Delete2(int index)
        {
            _kasutaja.RemoveAt(index);
            return "Kustutatud!";
        }

        // POST /tooted/lisa/1/pepsi/1.5/true
        [HttpPost("lisa/{id}/{username}/{password}/{nimi}/{perenimi}")]
        public List<Kasutaja> Add(int id, string username, string password, string nimi, string perenimi)
        {
            Kasutaja toode = new Kasutaja(id, username, password, nimi, perenimi);
            _kasutaja.Add(toode);
            return _kasutaja;
        }
    }
}

Swagger näha on nagu nii:

Esimest päringust saame näha kõik kasutajad

Tesisest päringust saame kustuta id`st kasutaja, aga ta kustutab id´st +1. Näiteks teeme id=0 aga ta kustutab 1-s id

Kolmast päringust saame kustuta kasutaja id´st, aga täpselt sama id´st mis me kirjutasime

Neljast päringust saame lisada kasutaja vormis

5. Loomine Andmebaas selles projektis

Allalaadimime EntityFrameworkCore meie projektisse.

Loome uus class (Mul see on KasutajaToode)

public class KasutajaToode
{
    public int Id { get; set; }

    public int KasutajaId { get; set; }
    public Kasutaja? Kasutaja { get; set; }

    public int ToodeId { get; set; }
    public Toode? Toode { get; set; }

    public int Kokku { get; set; }

    public KasutajaToode() { }

    public KasutajaToode(int id, int kasutajaId, Kasutaja kasutaja, int toodeId, Toode toode, int kokku = 1)
    {
        Id = id;
        KasutajaId = kasutajaId;
        Kasutaja = kasutaja;
        ToodeId = toodeId;
        Toode = toode;
        Kokku = kokku;
    }
}

Siis me peame lisama Kasutaja.cs ja Toode.cs sellele rida: 

public ICollection KasutajaToode { get; set; } = new List();

Järgmine samm on lisamine DbContext (Mul on KTDbContext)

Selle näide peaks olema nagu:

public KTDbContext(DbContextOptions<KTDbContext> options) : base(options) { }

public DbSet<Kasutaja> Kasutajad { get; set; }
public DbSet<Toode> Tooded { get; set; }
public DbSet<KasutajaToode> KasutajaToode { get; set; }

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    modelBuilder.Entity<KasutajaToode>()
        .HasKey(ci => new { ci.KasutajaId, ci.ToodeId });

    modelBuilder.Entity<KasutajaToode>()
        .HasOne(ci => ci.Kasutaja)
        .WithMany(k => k.KasutajaToode)
        .HasForeignKey(ci => ci.KasutajaId);

    modelBuilder.Entity<KasutajaToode>()
        .HasOne(ci => ci.Toode)
        .WithMany(t => t.KasutajaToode)
        .HasForeignKey(ci => ci.ToodeId);
}

Järgmine samm on loomine uus Controller (Mul on KasutajaToodeController)

Tema peaks näidata nagu:

[Route("api/[controller]")]
[ApiController]
public class KasutajaToodeController : ControllerBase
{
    private readonly KTDbContext _context;

    public KasutajaToodeController(KTDbContext context) 
    {
        _context = context;
    }

    [HttpGet("{kasutajaId}")]
    public async Task<IActionResult> GetCart(int kasutajaId)
    {
        var cartItems = await _context.KasutajaToode
            .Where(ci => ci.KasutajaId == kasutajaId)
            .Include(ci => ci.Toode)
            .ToListAsync();

        if (cartItems.Count == 0)
            return NotFound("Cart is empty.");

        return Ok(cartItems.Select(ci => new
        {
            ProductId = ci.Toode.Id,
            ProductName = ci.Toode.Name,
            Quantity = ci.Kokku,
            TotalPrice = ci.Kokku * ci.Toode.Price
        }));
    }

    [HttpPost("{kasutajaId}/add")]
    public async Task<IActionResult> AddToCart(int kasutajaId, [FromBody] int toodeId)
    {
        var kasutaja = await _context.Kasutajad.Include(k => k.KasutajaToode).FirstOrDefaultAsync(k => k.Id == kasutajaId);
        var toode = await _context.Tooded.FindAsync(toodeId);
        if (kasutaja == null || toode == null)
            return NotFound("User or product not found.");

        var existingItem = kasutaja.KasutajaToode.FirstOrDefault(ci => ci.ToodeId == toodeId);
        if (existingItem != null)
        {
            existingItem.Kokku += 1;
        }
        else
        {
            var cartItem = new KasutajaToode
            {
                KasutajaId = kasutajaId,
                ToodeId = toodeId,
            };
            _context.KasutajaToode.Add(cartItem);
        }

        await _context.SaveChangesAsync();
        return Ok("Product added to cart.");
    }

    [HttpDelete("{kasutajaId}/remove")]
    public async Task<IActionResult> RemoveFromCart(int kasutajaId, [FromBody] int toodeId)
    {
        var cartItem = await _context.KasutajaToode.FirstOrDefaultAsync(ci => ci.KasutajaId == kasutajaId && ci.ToodeId == toodeId);
        if (cartItem == null)
            return NotFound("Product not found in cart.");

        _context.KasutajaToode.Remove(cartItem);
        await _context.SaveChangesAsync();
        return Ok("Product removed from cart.");
    }
}

Siin meil on 3 funktsioonid, kus me saame näitada, lisama ja kustuta

Järgime samm on loomine uus andmebaas ja teha sellele migratsioon

Swaageris selle näite on:

Vaatame iga punkti läbi

Esimene GET.

Kui kasutajal ei ole mitte midagi ostukorvis, siis me näeme et ostukorv on tühi.

Aga kui kasutajal midagi on, siis saame näha mis temal on ostukorvis.

Siis vaatame POST

Kui meil ei ole kasutajad või tooded andmebaasi, siis saame näha et meil ei ole midagi.

Kui meil on korras kasutajaga ja toodega, siis toode saaks lisada kasutajale ostukorvis.

Saame näha et nüüd meil on 2 Koolad ostukorvis

Nüüd vaatame DELETE

Kui me kirjutame vali toode id, siis me ei saa kustutada toode ostukorvist.

Aga kui andmed on korras, siis saame näha et toode on kustutatud ostukorvist

6. Eesliidese implementeerimine

Lae alla ja seadista NodeJS

Ava käsuviip, mine mööda käsurida sobivasse kausta ning loo uus Reacti rakendus käsuga ” npx create-react-app frontend “

Ava äsja loodud kaust WebStormis

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

App.js faili kirjuta järgnev sisu:

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

function App() {
    const [tooded, setTooded] = useState([]);
    const idRef = useRef();
    const nameRef = useRef();
    const priceRef = useRef();
    const isActiveRef = useRef();

    useEffect(() => {
        fetch("https://localhost:7094/tooded")
            .then(res => res.json())
            .then(json => setTooded(json));
    }, []);

    //////////////////////////////////////////////-->

    function kustuta(index) {
        fetch("https://localhost:7094/tooded/kustuta/" + index, {"method": "DELETE"})
            .then(res => res.json())
            .then(json => setTooded(json));
    }

    //////////////////////////////////////////////-->

    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:7094/tooded/lisa", {"method": "POST", "body": JSON.stringify(uusToode)})
            .then(res => res.json())
            .then(json => setTooded(json));
    }

    //////////////////////////////////////////////-->

    function dollariteks() {
        const kurss = 1.1;                                      ////////////////////////
        fetch("https://localhost:7094/tooded/hind-dollaritesse/" + kurss, {"method": "PATCH"})
            .then(res => res.json())
            .then(json => setTooded(json));
    }

    //////////////////////////////////////////////-->

    return (
        <div className="App">
            <label>ID</label> <br />
            <input ref={idRef} type="number" /> <br />
            <label>Nimetus</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>
            {tooded.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;

Kui tagarakendus ei ole käima pandud, on veakood brauseri konsoolis järgnev

Lisame järgmised read Program.cs faili võõra rakenduse meie tagarakendusele ligi lubamiseks

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();

Tee rakendusele restart ja andmed on nüüd käes

Näed neid brauseris, aadressil localhost:3000