spoonacular_api_key

tmdb_api_key

mapbox_token

Visit https://account.mapbox.com to sign-up to Mapbox and generate your public token.

Gain insights into Ionic's UI toolkit for cross-platform apps using HTML, CSS, and TypeScript. Explore CLI, CapacitorJS, and Stencil, culminating in deploying real-world apps to multiple platforms.

ionic.tar.gz

ionic-blank

ionic-navigation

appy-mapper

audio-player

ebook-navigation

template-app

multi-line-list

sliding-list

ionic-theming

advanced-form

simple-form

template-form

movies-app

ionic-animations

apple-stores

stencil-gallery

capacitor-photo-app

cordova-photo-app

food-api

tabs-app

sidemenu-app

my-movies

Ionic is an open-source UI toolkit for building cross-platform applications using HTML, CSS, and TypeScript. Integrating with popular front-end frameworks like Angular, React, and Vue, Ionic empowers you to build rich user experiences that you can deploy on the web, mobile, or desktop.

This course is a comprehensive introduction to the core products and services of Ionic, emphasizing CLI, CapacitorJS, and Stencil Web Components. You’ll build on this foundation by exploring UI components, core features of Typescript, Angular routing/navigation, theming, data storage, asynchronous data handling, the rxJS library, and much more. Also, you'll be exposed to various Ionic plug-ins and components before concluding with 4 case studies of real-world application development.

By the end of this course, you'll be equipped to build cross-platform Ionic applications and submit them to the Apple App and Google Play stores, publish as Progressive Web Apps, or deliver via Electron desktop applications.

Mastering Mobile Application Development with Ionic

# The use of APIs
#key# APIs: Application Programming Interfaces #key# 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](https://spoonacular.com/food-api/) 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:

A brief overview of the Food API app that uses a web API to return recipes.

Overview

Introduction

The Ionic Ecosystem

Beginning Ionic Development

Decorators and Classes

Ionic Navigation

Templates

Theming Ionic Apps

Awesome Cordova Plugins

Capacitor

Working With Data

Progressive Web Apps

Animations

Stencil

Case Study: Working With APIs

Case Study: My Movies

Case Study: AppyMapper

Case Study: Ionic Jukebox

Refining Your Projects

Conclusion

Appendix

Overview

The use of APIs