Developing Multi-Platform Apps with Visual Studio Code by Ovais Mehboob Ahmed Khan and Khusro Habib

Author:Ovais Mehboob Ahmed Khan and Khusro Habib
Language: eng
Format: mobi, epub
Publisher: Packt Publishing Pvt Ltd
Published: 2020-09-17T16:00:00+00:00

Creating the job request feature

The job request feature provides the functionality to create and view job requests. Following the same approach, we will generate the module, components, and the required service.

Creating the job request service

If you recall, the job request feature module will use the Node.js backend to GET and POST jobs from Azure Cosmos DB for the MongoDB application programming interface (API) collection. To do this, we generate the JobrequestService using the following CLI command. Create a data_service folder under src/app to keep all your data services together, as illustrated in the following code snippet:

ng generate service data_service/jobrequest

The service will provide three methods: saveJobRequest, getJobRequestList, and getJobRequestById. As the name suggests, these methods will be used to save a job request, fetch the list of jobs created by the user, and fetch a particular job detail respectively.

To make HTTP calls to the backend, we use the HttpClient service provided by Angular. For this, import HttpClientModule in AppModule.

Currently, the backend services are running locally on our machine and we will be using http://localhost:3001 to access them. Once these services are deployed, the URL(s) will change, and we don't want to change them in several places in our app. To keep the backend URL(s) in one place, we create ConfigService, as follows:

ng generate service data_service/config

In ConfigService, add the Node.js URL, like this:

nodeUrl : string = 'http://localhost:3001';

To type the job request object, generate the IJobrequest interface, as follows:

ng generate interface models/jobrequest

Add the following attributes to the interface:

export interface IJobrequest {

_id: string,

jobType: string,

jobDescription: string,

requestDate: string,

contactNo: string,

address: string,

city: string,

status: string,

requestedBy: string

}

Going back to the JobrequestService, we now inject the HttpClient service to make HTTP calls, ConfigService to specify the Node.js URL, and AuthorizationService to fetch the logged-in user credentials in the JobrequestService constructor. In an actual scenario, the AuthorizationService will be used to fetch the bearer authorization token for authorized access to the backend. We will not be covering this here, but the rest of the process just described is illustrated in the following code snippet:

constructor(private authorizationService: AuthorizationService,

private http: HttpClient,

private config: ConfigService) { }

Since calls to the HTTP backend services are asynchronous, the saveJobRequest method returns Observable to the caller. We use the post method of the HttpClient service to make POST requests. It passes three parameters: the service URL, the request object in the body, and the content type in the options parameter in the HTTP request header, as follows:

saveJobRequest(request: IJobrequest) : Observable<any>{

return this.http.post(this.config.nodeUrl + '/jobs',request,

this.getOptions());

}

The getJobRequestList method makes a GET request using the HttpClient service and passes in the service URL. The method returns an Observable of type IJobrequest, as illustrated in the following code snippet:

getJobRequestList(): Observable<IJobrequest[]>{

//Get the Logged in User

return this.http.get<IJobrequest[]>(this.config.

nodeUrl + '/jobs');

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.