This week let’s take another peek at the FoodKeeper API. We’ll review the endpoints and how to submit a request to retrieve data. Before we jump into this you need to download and install a REST client. I highly recommend Insomnia, the app not the sleep disorder, (download it here) I’ll wait… Now that you have Insomnia installed let’s talk about endpoints. Last week we covered the four primary HTTP verbs used with REST. Did you have a chance to visit https://www.restapitutorial.com despite the name of the website these aren’t tutorials on how to make REST calls but more like development guidelines for developers writing REST API’s.

So why did I recommend it? Because understanding how a good RESTful API is designed will make it easier to craft your REST calls. So the 4 basic HTTP verbs (POST, GET, PUT and DELETE) are CRUD (Create, Read, Update, Delete) operations. · POST = Create · GET = Read · PUT = Update · DELETE = Delete Kind of makes sense, right? These also make up the endpoints you access with your REST client. In JAVA we add an annotation to the class and the getter and setter methods to define the endpoint. For the FoodKeeper API we are using the Spring Framework (https://spring.io/) to help setup the Rest components. After all the imports are declared the class must be annotated with @RestController so that the compiler knows how to process it. Each endpoint must be annotated to reflect what it does. A POST endpoint would be annotated like this: @PostMapping(“/list/new”) The part in parenthesis indicates the URL path that you would pass as part of the REST Client call and is the actual endpoint. Let’s look at an online example. In a new tab on your browser go to: http://dummy.restapiexample.com/ The site lists 5 public endpoints you can practice against: · GET /employee · GET /employee/{id} · POST /create · PUT /update/{id} · DELETE /delete/{id} Note the curly braces with id in between them – this indicates that you will be passing a value.
Open your REST client, in Insomnia you would type in the URL in the White field in the top center of the screen and select the REST Method to the left of it: Click the Send button and watch the Right hand column you will see it populate with employees. This is the first entry in the list that was returned for me: Play around and get familiar with your REST Client and hit some of the other endpoints at

http://dummy.restapiexample.com/ TIP: For the endpoints above with {id} just append the url string with a number like this: http://dummy.restapiexample.com/api/v1/employees/6821 All right go play and learn something! #CS@Worcester #CS448

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

…and we’re back! Last week we created the get-all-employees component and the employee class. This week we’ll finish up by modifying: get-all-employees.component.html app.component.html app.modules.ts app.component.ts Before we move on open up the get-all-employees.component.ts and make sure you have an import statement for the Employee class up top. It should look like this: import {Employee} from ‘../employee’; If it’s not there please add it. Ok now moving right along… Once we touch up these four files you’ll have a working RestAPI Get call on your page. So let’s get to it and wrap this up! Open the get-all-employees.component.html – this defines how each employee is displayed. Modify using this code:

Let’s break down what we did here. We created a small form that has a button and two lists. The button, when clicked, calls our getAllEmployee() method which populates our employees Array. We handle populating the employee list on screen by using *ngFor, this is Angulars handly little for loop. *ngFor loops through the employees Array and returns each employee as a separate list item filling out the list. The *ngIf will only display IF an error is received. Now let’s look at the app.component.html now. Use this code to complete it:

Here’s what we are doing in the app.component.html. Take a look at this line first: I’m defining the radio button as an add button and setting the appsection value to 1. When the radio button is selected the appsection==1 which we use further down to display the app-get-all-employees in this section:

This is a handy little trick because we can define multiple appsections and using *ngIf display only the desired app. For example let’s say we have another app component called app-get-employee that returns a single employee. We could setup a second radio button and have it assign “2” to appsection. Then we would setup a second *ngIf for appsection==2 just like we setup appsection==1 except passing in the component like this: In this manner we can build out an entire site as a single page app. It would be all action driven, reactive and fluid. It’s a great time to be playing on the web! O.k. moving right along now… open up the app.module.ts and modify it to include an import and a declaration for GetAllEmployeesComponent. The import statement will look like this: import { GetAllEmployeesComponent } from ‘./get-all-employees/get-all-employees.component’; and you want to append this to the list of declarations in @NgModule: GetAllEmployeesComponent, Save your work and let’s move on to the app.component.ts all we need to do here is an import statement for the Employee class: import {Employee} from ‘./employee’; Ok now save all your work and launch the angular site. Hit that radio button, now click the Get all Employees button. BOOM a screenful of employees! So in these last two posts I showed you how to setup a basic API call to an existing test API site. We also learned how to use appsection to load components on a page. Now go make it pretty and add more functionality. This article is just over a year old but it has great tips and tricks for working with TypeScript and Angular. #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

…and we’re back! Last week we created the get-all-employees component and the employee class. This week we’ll finish up by modifying: get-all-employees.component.html app.component.html app.modules.ts app.component.ts Before we move on open up the get-all-employees.component.ts and make sure you have an import statement for the Employee class up top. It should look like this: import {Employee} from ‘../employee’; If it’s not there please add it. Ok now moving right along… Once we touch up these four files you’ll have a working RestAPI Get call on your page. So let’s get to it and wrap this up! Open the get-all-employees.component.html – this defines how each employee is displayed. Modify using this code:

Let’s break down what we did here. We created a small form that has a button and two lists. The button, when clicked, calls our getAllEmployee() method which populates our employees Array. We handle populating the employee list on screen by using *ngFor, this is Angulars handly little for loop. *ngFor loops through the employees Array and returns each employee as a separate list item filling out the list. The *ngIf will only display IF an error is received. Now let’s look at the app.component.html now. Use this code to complete it:

Here’s what we are doing in the app.component.html. Take a look at this line first: I’m defining the radio button as an add button and setting the appsection value to 1. When the radio button is selected the appsection==1 which we use further down to display the app-get-all-employees in this section:

This is a handy little trick because we can define multiple appsections and using *ngIf display only the desired app. For example let’s say we have another app component called app-get-employee that returns a single employee. We could setup a second radio button and have it assign “2” to appsection. Then we would setup a second *ngIf for appsection==2 just like we setup appsection==1 except passing in the component like this: In this manner we can build out an entire site as a single page app. It would be all action driven, reactive and fluid. It’s a great time to be playing on the web! O.k. moving right along now… open up the app.module.ts and modify it to include an import and a declaration for GetAllEmployeesComponent. The import statement will look like this: import { GetAllEmployeesComponent } from ‘./get-all-employees/get-all-employees.component’; and you want to append this to the list of declarations in @NgModule: GetAllEmployeesComponent, Save your work and let’s move on to the app.component.ts all we need to do here is an import statement for the Employee class: import {Employee} from ‘./employee’; Ok now save all your work and launch the angular site. Hit that radio button, now click the Get all Employees button. BOOM a screenful of employees! So in these last two posts I showed you how to setup a basic API call to an existing test API site. We also learned how to use appsection to load components on a page. Now go make it pretty and add more functionality. This article is just over a year old but it has great tips and tricks for working with TypeScript and Angular. #CS@Worcester #CS343

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.