1. Web request (kérések) és REST
A továbbiakban egy web server működését írom le nagyvonalakban. Az 1/1-es gyakorlatban már volt szó a kérésekről amelyeket a kliens intéz a szerver felé. Ezek közül az egyik típusú kérés REST-nek hívják (Representational State Transfer). Ez gyakorlatilag egy olyan kommunikációs forma, amely megköti, hogyan nézhet ki egy kérés. A legfontosabbak tulajdonságok.
Töltsük ki az alábbiaknak beflelően a request paramétereit
- A kommunikáció HTTP standard üzeneteket használ (GET, POST, PUT, DELETE)
- A kliens által küldött üzenet minden szükséges információt tartalmaz a szerver számára, ami ahhoz szükséges, hogy a szerver kiszolgálhassa a kérést. A kliens nem függ olyan információtól, amit a szerver tárol.
- A kliens és a szerver együtt tud működni egészen addig amíg a közöttük lévő üzenetek formája azonos. (Nem törik el egymás működését, ha megváltozik az implementáció)
ha nem vagy rest (bocsi... késő volt, mikor ezt írtam) még egy kicsit olvasni róla, akkor itt találsz még egy jó leírást (https://www.codecademy.com/articles/what-is-rest). Töltsük le az 1/2-es gyakorlat kódját és miután betöltöttük az oldalt nyomjuk meg az F12-t chrome-ban. Menjünk a Network tab-ra és válasszuk ki az index.html-t a jobb oldalon.
Itt láthatjuk a kliens kérésének és a szerver válaszának legfontosabb részeit. Látjuk, hogy ez egy GET kérés, az URL (Uniform Resource Locator - azaz az erőforrás azonosítója) pedig http://localhost:8080/index.html, a válaszüzenetben pedig a 200-as kódot kapjuk vissza, melynek jelentése OK. A jobb olalon továbbá látjuk, hogy a main.css és a main.js fájl is sikeresen letöltődött.
2. Szerezzük be az eszközöket
Ahhoz hogy .NET alaklmazásokat fejlessz le kell töltened a Visual Studio Community 2019-et (vagy korábbi verziót) Ez egy ingyenes fejlesztő környezet nem-kereskedelmi-célú alkalmazások számára. Letöltheted innen. Amikor installálod arra figyelj oda, hogy válaszd ki a Web development és az Azure development opciókat.
Szükség esetén indítsd újra a géped.
3., Fejlesszük REST API-t
Az API - Application Programming Interface lényegében egy olyan felület ahonnan adatokat tudsz lekérni, illetve a tárolt adatokat módosítani. Egy API szerencsés esetben publikálja milyen kéréseket tudsz neki küldeni, és milyen formában. Ez kicsit hasonló egy étterem menüjéhez, ahol elolvashatod mit tudsz rendelni (és ismét csak szerencsés esetben azt is kapod).
A mi API-nk JSON (Javascript-Object-Notation) formátumú adatokat fog visszaküldeni. A JSON formátumban kulcs-érték párok szerpelnek. A kulcs adja meg a tulajdonság nevét, az érték pedig az értéket. Például:
Nyissuk meg a Visual studio-t, majd
- File->New->Project
- Válasszuk ki a C#-ot Windows-t és a Web-t a dropdown menüből, majd az ASP .Net Core Web Application teamplte-et.
- Írd be a projekted nevét, pl. RestApiTest, majd kattints a Create gombra
- Válaszd ki az API template-et és kattints a Create-re ismét a felugró modal-ban
Amikor a projekt betöltött, válaszd ki az eszköztárról a Debug melletti opciókból az "IIS Express" helyett a RestAPITest-et. Ezután nyomd meg az F5-öt. Egy Konzol ablak fog felugrani, ami azt írja, hogy az alkalmazás elindult.
Felugrik majd egy modal, ezen kattints egy Yes-t. Nyiss egy böngészőt, és írd be a címsorba, hogy https://localhost:5001/api/values (Ez lehet, hogy az alkalmazás indításakor automatikusan megtörténik). Az oldalon a ["value1","value2"] fog megjelenni, a böngésző ugyanis így jeleníti meg az API által visszaadott értékeket. Változtassuk meg az URL-t https://localhost:5001/api/values/0-re. A megjelenített tartalom, most "value" kell, hogy legyen.
Most módosítsuk a szerver oldali kódot az alábbiakra. Létrehozunk egy listát mely string azaz szöveges elemeket fog tárolni. Ez az API 5 féle hívást támogat
- GET - visszaadja az összes értéket
- GET az api/values/{id} URL-re visszaadja ennek a tömbnek az egyik elemét, az id itt a tömb index-e 0-tól kezdve
- POST - hozzáad egy értéket
- PUT - módosítja az értéket
- DELETE - törli az elemet
[Route("api/[controller]")] [ApiController] public class ValuesController : ControllerBase { static List<string> Values { get; set; } = new List<string>{ "value1", "value2" }; // GET api/values [HttpGet] public ActionResult<IEnumerable<string>> Get() { return Values; } // GET api/values/5 [HttpGet("{id}")] public ActionResult<string> Get(int id) { if (Values.Count > id) { return Values[id]; } else { return BadRequest("wrong id"); } } // POST api/values [HttpPost] public void Post([FromBody] string value) { Values.Add(value); } // PUT api/values/5 [HttpPut("{id}")] public void Put(int id, [FromBody] string value) { if (Values.Count > id) { Values[id] = value; } } // DELETE api/values/5 [HttpDelete("{id}")] public void Delete(int id) { Values.RemoveAt(id); } }
Indítsuk el ismét az alkalmazást F5-tel. A kiinduló listánk továbbra is ugyanaz, de a https://localhost:5001/api/values/0 URL most "value1"-et fog visszaadni. Lássuk, hogyan használhatjuk a további hívásokat.
4., Postman
Normál esetben a kliens valamilyen Javascript library segítségével hívja meg a POST, PUT és DELETE hívásokat, azonban az API-nk tesztelésére egyelőre a Postman-t fogjuk használni. Töltsük le a postman-t innen
Ha telepítettük, és az alkalmazásunk fut, akkor hozzunk létre postman-ben egy új collection-t (pl. Blog) a bal fölső narancssárga gombal, majd ezt kijelölve egy request-et UpdateValue névvel. Ekkor a bal oldali sávban ez jelenik meg.
- A kérés típusa PUT azaz módosítás
- Az URL amire küldjük a kérést azt jelzi, hogy a 0. elemet fogjuk módosítani
- Hogy mire módosítjuk, ezt a kérés Body-jában (törzsrészében) adjuk meg. Válasszuk ki ezt a tabot.
- váltsuk át a törzsrész típusát raw és JSON típusra.
- írjuk be, az alsó részbe, hogy "test1", majd kattintsunk a Send gombra.
Ha most újratöltjük a https://localhost:5001/api/values/0 URL-t miközben az alkalmazásunk fut, a megjelenő érték, "test1" lesz.
5., Tippek és trükkök
- A kész kód a REST API-hoz letölthető innen https://github.com/czimerk/web-part4-restapi
- Az URL-t amin elérhető egy szerver metódusa módosítható a Route kulcsszóval. Ekkor a böngészőbe is a kommentel jelölt URL-t kell írni.
// GET api/values/byId/0 [HttpGet] [Route("byId/{id}")] public ActionResult<string> Get(int id) { if (Values.Count > id) { return Values[id]; } else { return BadRequest("wrong id"); } }
- Kérdésed van? tedd fel ide
Kérlek, ha van pár perced segítsd a blog működését azzal, hogy névtelen visszajelzést adsz
Nincsenek megjegyzések:
Megjegyzés küldése