ASP.net web api Power Point Presentation

BIT 286:
Web Applications
ASP.Net Core Web API - Basics

2
Agenda
• Talk about requirements doc
• We will do ‘planning poker’ on the day that this is due
• Right now: identify users
• Start on collecting user stories
• ASP.Net Core Web API
• Brainstorming Quiz questions
About 20 minutes before class ends:
These slides are mostly a walkthrough of https://docs.microsoft.com/en-
us/aspnet/core/tutorials/first-web-api

3
Communication – you must use Slack
• It’s industry standard
• We covered it in class
• It doesn’t have to be the only thing you use
• But I need to see you demonstrate mastery and confidence with this
important tool.
• For right now: “Please use it!”
• If I have to “Use it or lose points!”

4
Brainstorming Quiz questions
• About 20 minutes before class ends:
• Join the BIT286 class Slack team (link in Lesson 04, on the 286 website)
• Y’all will brainstorm quiz questions for about 10 minutes
• Anything you might want to see on a quiz you should post to #quiz-questions
• I’ll be posting stuff, too
• We’ll go over ‘likely’ candidate questions in the last 10 minutes of class
• Quiz at the start of next lecture
• Questions will be drawn primarily BUT NOT EXCLUSIVELY from our brainstorm

5
User Requirements
• <To be discussed during class>
• If you’re learning a new technology, add work items into your
tracking, too

6
Objectives
• Try creating a simple REST based web application, using ASP.Net
• Use ASP.Net Core Web API
• Use Postman to test the REST API
• Instead of creating a full-on JS client

7
Review: REST API architecture
• From
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api

8
.Net: Core vs. Framework
• Tl;dr: .Net Framework is last-gen. It’s being replaced with .Net Core
• VB  Web Forms  MVC
• We’re going to be using .Net Core in this class

These slides are mostly a walkthrough of https://docs.microsoft.com/en-us/as
pnet/core/tutorials/first-web-api
9
Installing the software

10
Install Visual Studio 2017
• You’ll need to add the ‘NuGet package
manager’, plus the “ASP.Net and web
development” workload
• Run the VS 2017 Installer, then click on the ‘Modify’
button
• Note: this may take a long time
• We’ll also use Postman
• There’s a Chrome app for this
• https://chrome.google.com/webstore/detail/postman
/fhbjgbiflinjbdggehcddcbncdddomop

11
Basic Web API project
• We’re going to follow along with
https://docs.microsoft.com/
en-us/aspnet/core/
tutorials/first-web-api

12
Create the Solution

13
Use the Web API template

14
Install a test Database
• InMemory DB
• all records stored in memory
• You’ll lose all data when you quit the program
• Great for testing, terrible for real use ☺
• https://docs.microsoft.com/en-us/ef/core/providers/in-memory/
• We’ll do this using NuGet

15
Install a test
Database
• We’ll install it using NuGet
• NuGet is a package manager
for Visual Studio
• It’s included >= VS 2012
• NuGet:
• Right-click on the project
• Select ‘
• More details at
https://docs.microsoft.com
/en-us/nuget/tools/packag
e-manager-ui

16
Add the test DB
• Click on ‘Browse’, then paste in
Microsoft.EntityFrameworkCore.InMemory
• When you mouse over it you’ll see the ‘install’ icon appear

17
Add the test DB
• At this point the
software is installed
• We just need to tell this
particular project to use
it

18
Modify the .csproj file
• Make sure this line is present:
• (for me it was already there when I went looking for it)
• <Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp1.1</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Folder Include="wwwroot" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="1.1.1" />
</ItemGroup>
<ItemGroup>
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools"
Version="1.0.0" />
</ItemGroup>
</Project>

19
Add Database support

20
Create a Models folder
• There’s no ‘Models’ folder, so let’s make one
• Right click on the project, then AddNew Folder:

21
Add a Todo.cs to the Models folder
namespace WebAPI_Demo.Models // This will be
specific to you
{ public class TodoItem
{ [Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)
]
public long Key { get; set; }
public string Name { get; set; }
public bool IsComplete { get; set; {}
}
} These slides are mostly a walkthrough of https://docs.microsoft.com/en-

22
Examine code, Make sure it compiles
• A Todo object represents a single row in the database
• Looking at the code:
• From https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api:
• “The [Key] data annotation denotes the property, Key, is a unique identifier.”
• “[DatabaseGenerated specifies the database will generate the key (rather than the
application).”
• “DatabaseGeneratedOption.Identity specifies the database should generate integer keys
when a row is inserted.”
• Build the program: Build  Build Solution

23
Add a DbContext
• From
http://www.entityframeworktutorial.net/EntityFramework4.3/dbcontext-
vs-objectcontext.aspx
:
• Handles all the translation between your objects and the actual database
• For example, given a LINQ-to-Entity it will generate the SQL to
query/add/update/delete rows in the database
• Add the file
• Right click on the ‘Models’ folder
• Add Class
• Name it TodoContext.cs (so it’s easy to find )
☺

24
Add a DB context
using Microsoft.EntityFrameworkCore;
namespace WebAPI_Demo.Models
{
public class TodoContext : DbContext
{
public TodoContext(DbContextOptions<TodoContext> options)
: base(options)
{
}
public DbSet<TodoItem> TodoItems { get; set; }
}
}

25
How does TodoContext work?
• It inherits from the DbContext, which does all the work
public class TodoContext : DbContext
{
• DbContext must use magic reflection to inspect each object in order to
be able to know how to map it to SQL and back
• General description: Wikipedia
• Warning: a bit dense – skim it to get the gist of it, but don’t worry about details
• C#-specific docs

26
Next step: add a repository class
• First, this is a terrible re-use of the word repository
• Second, this is implemented via dependency injection
• What is Dependency Injection?
• Let’s say that you’ve got two classes, Car and Engine.
• Normally each Car object will create an Engine for itself, usually in the constructor
• We can say that the Car object depends on (it uses) the Engine object
• Instead of having the Car create an Engine object, we will give it an Engine to use.
AKA, we will inject the Engine object into the Car, which the Car then uses (the Car
then depends on).

27
Next step: add a repository class
• Key Benefit: We can now replace the Engine with other classes that also
behave like Engines
• Example: We could test our Car using a TestEngine which also logs the things it’s being
told to do. We then check the log later to make sure the the Car was telling the
Engine the correct things
• Example: What if the Car object can save itself to a database? With DI, we could give
it a different database object, and save itself into a different DB
(for example, an Oracle DB instead of a MySQL)
• Google for ‘dependency injection simple explanation’
• ‘Simple’ explanation #1
• ‘Simple’ explanation #2

28
Create the Repository class
( ITodoRepository.cs, in the Models folder)
using System.Collections.Generic;
{
public interface ITodoRepository
{
void Add(TodoItem item);
IEnumerable<TodoItem> GetAll();
TodoItem Find(long key);
void Remove(long key);
void Update(TodoItem item);
}
}

29
Should we review interfaces here? ☺

30
TodoRepository.cs (also in Models folder)
• Entire code is right above
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api#re
gister-the-repository
• From the same link:
• “By defining a repository interface, we can decouple the repository class from
the MVC controller that uses it. Instead of instantiating a TodoRepository inside
the controller we will inject an ITodoRepository using the built-in support in
ASP.NET Core for dependency injection.”

31
Repository:
Inheritance
using System.Collections.Generic;
using System.Linq;
{
public class TodoRepository : ITodoRepository
{
private readonly TodoContext _context;
public TodoRepository(TodoContext context)
{
_context = context;
if (_context.TodoItems.Count() == 0)
Add(new TodoItem { Name = "Item1" });
}

32
Implementing the ITodoRepository interface
1 / 2
public IEnumerable<TodoItem> GetAll()
{
return _context.TodoItems.ToList();
}
public void Add(TodoItem item)
{
_context.TodoItems.Add(item);
_context.SaveChanges();
}
public TodoItem Find(long key)
{
return _context.TodoItems.FirstOrDefault(t => t.Key == key);
}

33
Implementing the ITodoRepository interface
2 / 2
public void Remove(long key)
{
var entity = _context.TodoItems.First(t => t.Key == key);
_context.TodoItems.Remove(entity);
}
public void Update(TodoItem item)
{
_context.TodoItems.Update(item);
}

34
Register the repository
• In Startup.cs, find the method named ConfigureServices()
• Replace it with
public void ConfigureServices(IServiceCollection
services)
{
services.AddDbContext<TodoContext>(opt =>
opt.UseInMemoryDatabase());
services.AddMvc(); // already present
services.AddScoped<ITodoRepository,
TodoRepository>();
}

35
Register the repository
• In Startup.cs, add the following to the top of the file:
using WebAPI_Demo.Models;
using Microsoft.EntityFrameworkCore;

36
Dependency Injection
• https://davidzych.com/dependency-injection-in-asp-net-vnext/

37
Adding a controller

38
Add the controller file
• Right click on the Controllers folder, Add  New Item
• You want MVC Controller class.
• Make sure it’s for .Net Core
• Name it TodoController.cs

39
I’m going to switch it up from here
• Creating the slides takes a lot of time
• And it’s all being copied from that tutorial page anyways
• So instead of showing you everything, we’re going to try something
new:
•  Slides will be used as notes

40
Copy from tutorial
• From
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api
#getting-to-do-items

41
Controller - Routing
• Routing can be done with attributes:
[Route("api/[controller]")]
public class TodoController : Controller
• [controller] placeholder:
• The class name minus the ‘Controller’ part
• “TodoController” – “Controller” = “Todo”
• URLs will start with <server info>/api/todo
• NOTE: Routes are case INsensitive in ASP.Net Core – Todo, todo, ToDo, tOdO
all work
• Example:
• http://localhost:51070/api/todo
<server info>/api/[controller]

42
Controller - Routing
• More Details:
• Attribute Routing Overall
• Placeholders: The [controller] thing

43
Routing details
[HttpGet] // matches /api/[controller]
public IEnumerable<TodoItem> GetAll()
{ return _todoRepository.GetAll(); }
• Example: http://localhost:51070/api/todo - goes to GetAll
• Example: http://localhost:51070/api/todo/3 - goes to GetById
[HttpGet("{id}", Name = "GetTodo")]
public IActionResult GetById(long id)
{ // ‘Name’ in HttpGet is for internal (code)
purposes

44
Run it
• Control + F5, then wait for the browser to appear
• Let’s play experiment with the browser results a bit
• WARNING: when your browser window closes, the web server shuts down
• Then let’s experiment with Postman for a bit
• With the browser window still open ☺

45
Create
• ‘CreatedAtRoute’ is a method that returns an object that will
eventually become an HTTP 201 response
• This includes a ‘Location’ field
• Postman – POST
• {
"name":"walk dog",
"isComplete":true
}

46
Update
• Note – must send the entire object
• Can use HTTP PATCH for just sending the delta
• We’re not handling PATCH requests here
• Postman
• PUT request
• http://localhost:51071/api/todo/2  2 is the id of the thing to update
• Must include the entire object (including ‘key’, which is weird )
☺
• {
"key": "2",
"name":"walk dog woooo it’s chaaaaaaanged!“,
"isComplete":false
}
• 204 (No Content) is the ‘success’ response

47
Delete
• Postman – DELETE verb

48
Debugging
• Set a break point in Visual Studio
• Launch the ASP.Net Core web app via Debug  Start Debugging
• Have the browser (or Postman) make a request that will execute the
breakpointed code
• Visual Studio auto-magically stops where your breakpoint is!

49
Where to go next?
• Logging
• Get information from your web app about what’s happening on the server
• Critical for debugging
• Can be set up to be viewed in Visual Studio
• Client – JavaScipt
• jQuery?
• Angular?
• React?
• Vue?
• Note: Frameworks are arranged in descending order of instructor familiarity ☺

ASP.net web api Power Point Presentation

More Related Content

Similar to ASP.net web api Power Point Presentation (20)

Recently uploaded (20)

ASP.net web api Power Point Presentation