Overview

The use of APIs

APIsApplication Programming Interfaces have become a standard part of modern web and native app development. From integrating social media content and news feeds to online maps and conducting financial transactions, the range of available APIs for developers to plug into and use seems to grow with each passing day. Without the widespread availability of such services, our apps and what they offer would be very limited indeed.

As Ionic developers, we need to be familiar and comfortable consuming APIs within our applications, as there will be many times when a client expects us to be able to implement in-house or third-party API services.

What will we develop in this case study?

For this case study, we’re going to integrate the spoonacular API into an Ionic project to tap into an online repository of recipe data and consume that within our app. After all, who doesn’t like consuming good food?

We’ll use the spoonacular API to allow the user to perform the following:

• Search for recipes based on the type of vitamin, minimum value of the selected vitamin, and the maximum number of results to display
• Return random recipes

Our application will use selected Ionic UI components, Angular’s reactive forms module, Angular’s HttpClient module, Observables, specific utility methods from the RxJS library, and, of course, the spoonacular API.

We’ll also be making use of services and environment variables for better management of data and to make our codebase more optimized. For example, we can centralize key logic, which can be shared across further page components that may be added in the future and store globally accessible properties in one location.

By the end of the case study, we should have successfully created the following app:

As you can see, our application consists of a fairly simple but data-driven UI that has a clean and well-structured layout courtesy of the <ion-grid> and <ion-list> UI components that we’ll be making use of in the component view.