ICP6 - VINEETHREDDYSHERI/WebMobile-2021Fall GitHub Wiki

Welcome to In-class Programming Assignment-6

Objective: Getting to know about the Angular routers, services, HTTP and RESTful APIs.

Implementation:

  1. Create an application in Angular which displays nearby restaurants (Hint: Use Foursquare API)
  2. Create an application in Angular which displays recipes (Hint: Use EDAMAM API). If possible, combine both the APIs in a single application

Source Code: https://github.com/UMKC-APL-WebMobileProgramming/ICP6-VINEETHREDDYSHERI/tree/main/Source/MashUp

HTML File

The below screenshots contains the Recipe and Venue UI design. The form is used to get the Input from the User. On click of the Search button will make FOURSQUARE and EDAMAM API calls to get venue and recipe details respectively.

ICP6-1

ICP6-2

ICP6-3

TypeScript File

The below screenshots contains FOURSQUARE and EDAMAM API configuration. And usage of the HttpClient service to make the GET request.

ICP6-4

ICP6-5

Output

Initial Screen asking user to enter recipe and location Name.

ICP6-6

The Recipe and Venue details is fetched based upon the provided Recipe and ZipCode.

ICP6-7

ICP6-8

On click of the Recipe Name, will route to the Recipe's website.

ICP6-9

On click of the Map image, will route to the Google Map's and will provides the directions to reach the selected Venue from the current location.

ICP6-10

VideoLink: https://youtu.be/Jy4YoWvHiHc

Conclusion:

In these ICP6, I learned about the Angular HttpClient service for doing the GET API request. Made use of FOURSQUARE and EDAMAM API's to get the venue and recipe details respectively.