Zaawansowane aplikacje internetowe laboratorium REST

Wielkość: px

Rozpocząć pokaz od strony:

Download "Zaawansowane aplikacje internetowe laboratorium REST"

Jarosław Piasecki
6 lat temu
Przeglądów:

1 Zaawansowane aplikacje internetowe laboratorium REST Pytka Bartosz, Drożdż Mateusz, Ejkszto Mateusz, Łozowski Marcin, Tański Mariusz Do wykonania ćwiczeń potrzebne jest zintegrowane środowisko programistyczne Visual Studio 2013 w wersji co najmniej Community (do pobrania z community-vs.aspx) oraz.net Framework w wersji 4.0. Ćwiczenie 1 Celem ćwiczenia jest przygotowanie prostej aplikacji serwerowej typu WebAPI wraz z repozytorium obiektów typu product. Zaimplementowany zostanie również serwis typu RESTful, który będzie udostępniał standardowe akcje typu GET, POST, PUT oraz DELETE. Do przetestowania serwisu po stronie klienta zostanie wykorzystany zewnętrzny klient testowy. Kroki ćwiczenia: Krok 1: File New Project i wybierz pozycję ASP.MVC. Upewnij się, że wybrany framework to.net Framework 4.0. Nazwij solucję według uznania i kliknij OK. Krok 2: Konfigurator pyta nas jakiego szablonu użyć do stworzenia aplikacji. Wybierzmy WEB API. Nie zaznaczaj opcji tworzenia projektu dla testów jednostkowych.

2 Krok 3: Kliknij prawym przyciskiem myszy na folderze Models i wybierz Add Class Klasę nazwij Product.cs Krok 4: Zaimplementuj właściwości klasy Product dodając pola ID, Name, Price i Quanity. Krok 5: Zaimplementuj klasę ProductRepository będzie to singletonowe repozytorium obiektów Product używane zamiast bazy danych.

3 public class Product public int Id get; set; public string Name get; set; public decimal Price get; set; public int Quanity get; set; public class ProductRepository static ProductRepository _repo; public List<Product> ProductList get; set; public static ProductRepository Instance() if (_repo == null) _repo = new ProductRepository(); return _repo; ProductRepository() ProductList = new List<Product>(); Krok 6: Przejdź do Folderu Controllers i otwórz ValuesController. Obiektem, który ma być podstawą działania kontrolera będzie Product. Pamiętaj o odpowiednim usingu. Przydatny może okazać się skrót CTRL +.

4 Krok 7: Zaimplementuj metody kontrolera. public class ValuesController : ApiController // GET api/values public List<Product> Get() return ProductRepository.Instance().ProductList; // GET api/values/5 public Product Get(int id) return ProductRepository.Instance().ProductList.Where(x => x.id == id).first(); // POST api/values public void Post([FromBody]Product value) ProductRepository.Instance().ProductList.Add(value); // PUT api/values/5 public void Put(int id, [FromBody]Product value) Product product = ProductRepository.Instance().ProductList.Where(x => x.id == id).firstordefault(); if (product!= null) product.name = value.name; product.price = value.price; product.quanity = value.quanity;

5 // DELETE api/values/5 public void Delete(int id) Product product = ProductRepository.Instance().ProductList.Where(x => x.id == id).first(); if (product!= null) ProductRepository.Instance().ProductList.Remove(product); Krok 8: Kliknij prawym przyciskiem myszy na solucji i wybierz Manage NuGetPackages for Solution. Dodaj do solucji pakiet : A simple Test Client for ASP.NET Web API Krok 9: Odszukaj pakiet i go zainstaluj.

6 Krok 10: Po zainstalowaniu pakietu można uruchomić aplikację klikając F5 lub wybierając Debug Start Debugging. Krok 11: Na zakładce API widzimy dokumentację naszego Api. Po wejściu w poszczególne metody z naszego kontrolera możemy je sprawdzić klikając TEST API

7 Ćwiczenie 2 Celem ćwiczenia jest przygotowanie prostego formularza HTML, który korzystał będzie z serwisu utworzonego w ćwiczeniu 1. Kroki ćwiczenia: Krok 1: Dodaj nową stronę HTML do solucji. Kliknij prawym przyciskiem na solucje wybierz Add new item HTML Page <!DOCTYPE html> <html xmlns=" <head> <title>product App</title> </head> <body>

8 <div> <h2>all Products</h2> <ul id="products" /> </div> <div> <h2>search by ID</h2> <input type="text" id="prodid" size="5" /> <input type="button" value="search" onclick="find();" /> <p id="product" /> </div> <div> <h2>add</h2> Id <input type="text" id="id" size="5" /> Name <input type="text" id="name" size="10" /> Quanity <input type="text" id="quanity" size="5" /> Price <input type="text" id="price" size="5" /> <input type="button" value="add" onclick="add();" /> <p id="productadd" /> </div> <script src=" <script> var uri = 'api/values'; $(document).ready(function () list(); ); function list() // Send an AJAX request $.getjson(uri).done(function (data) // On success, 'data' contains a list of products. $.each(data, function (key, item) // Add a list item for the product. $('<li>', text: formatitem(item) ).appendto($('#products')); ); ); function formatitem(item) return item.name + ': $' + item.price + ' Quanity: ' + item.quanity; function find() var id = $('#prodid').val(); $.getjson(uri + '/' + id).done(function (data)

9 $('#product').text(formatitem(data)); ).fail(function (jqxhr, textstatus, err) $('#product').text('error: ' + err); ); function add() var id = $('#Id').val(); var name = $('#Name').val(); var quanity = $('#Quanity').val(); var price = $('#Price').val(); $.post(uri + '/', id: id, name: name, quanity: quanity, price: price ).done(function (data) list(); ).fail(function (jqxhr, textstatus, err) $('#product').text('error: ' + err); ); </script> </body> </html> Krok 2: Przetestuj funkcjonalność formularza. Będzie dostępny pod adresem: Uwaga port może być inny.

Podobne dokumenty

Microsoft.NET: ASP.NET MVC + Entity Framework (Code First)

Microsoft.NET: ASP.NET MVC + Entity Framework (Code First) Do realizacji projektu potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2012. W ramach projektu budowana jest prosta