**Course Title:** Building Cross-Platform Mobile Applications with Ionic **Section Title:** API Integration and Data Management **Topic:** Build an Ionic app that fetches data from a public API, displays it, and manages loading/error states.(Lab topic) **Objective:** In this lab, you will learn how to build an Ionic application that fetches data from a public API, displays it in a meaningful way, and manages loading and error states. By the end of this lab, you will have a better understanding of how to integrate APIs with your Ionic applications and handle common scenarios that may arise during data fetching. **Lab Overview:** We will be building an application that displays a list of popular movies from The Movie Database (TMDb) API. We will use the Angular HttpClient to fetch data from the API, and then display it in a list view. We will also implement loading and error states to handle scenarios where data fetching takes time or fails. **Step 1: Create a new Ionic project** To get started, create a new Ionic project using the Ionic CLI: ```bash ionic start movie-app blank --type=angular ``` This will create a new Ionic project using the blank template and Angular framework. **Step 2: Install required dependencies** Next, install the required dependencies for this lab: ```bash npm install ``` **Step 3: Set up the API** For this lab, we will be using the TMDb API to fetch data. To use the API, you need to create an account and get an API key. You can sign up for an account on the [TMDb website](https://www.themoviedb.org/). Once you have your API key, create a new file called `api-keys.ts` in the root of your project and add the following code: ```typescript export const API_KEY = 'YOUR_API_KEY_HERE'; ``` Replace `YOUR_API_KEY_HERE` with your actual API key. **Step 4: Create a data model** Next, create a new file called `movie.model.ts` in the root of your project and add the following code: ```typescript export class Movie { id: number; title: string; poster_path: string; overview: string; } ``` This file defines a data model for our movie data. **Step 5: Create a service to fetch data** Create a new file called `movie.service.ts` in the root of your project and add the following code: ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { API_KEY } from './api-keys'; import { Movie } from './movie.model'; @Injectable({ providedIn: 'root' }) export class MovieService { private apiUrl = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`; constructor(private http: HttpClient) { } getMovies() { return this.http.get<Movie[]>(this.apiUrl); } } ``` This file defines a service that fetches data from the TMDb API and returns it as an array of Movie objects. **Step 6: Create a component to display data** Create a new file called `movie-list.component.ts` in the root of your project and add the following code: ```typescript import { Component, OnInit } from '@angular/core'; import { MovieService } from './movie.service'; import { Movie } from './movie.model'; @Component({ selector: 'app-movie-list', templateUrl: './movie-list.component.html', styleUrls: ['./movie-list.component.css'] }) export class MovieListComponent implements OnInit { movies: Movie[] = []; loading = true; error = ''; constructor(private movieService: MovieService) { } ngOnInit(): void { this.movieService.getMovies().subscribe( data => { this.movies = data; this.loading = false; }, error => { this.error = error.message; this.loading = false; } ); } } ``` This file defines a component that displays a list of movies and manages loading and error states. **Step 7: Create a template to display data** Create a new file called `movie-list.component.html` in the root of your project and add the following code: ```html <ion-list> <ion-item *ngFor="let movie of movies"> <ion-thumbnail> <img [src]="movie.poster_path" alt="Movie Poster"> </ion-thumbnail> <ion-label> {{ movie.title }} </ion-label> </ion-item> </ion-list> <ion-spinner *ngIf="loading"></ion-spinner> <ion-alert *ngIf="error" [isOpen]="!!error" [message]="error" [subHeader]="error"></ion-alert> ``` This file defines a template that displays a list of movies and displays loading and error states. **Conclusion:** In this lab, we built an Ionic application that fetches data from a public API, displays it in a meaningful way, and manages loading and error states. We used the Angular HttpClient to fetch data from the API and implemented loading and error states to handle common scenarios that may arise during data fetching. **What's Next:** In the next topic, we will explore advanced routing techniques in Ionic, including lazy loading and guards. **Leave a Comment or Ask for Help:** If you have any questions or need help with this lab, please leave a comment below. We'll be happy to help you out. **Additional Resources:** * [TMDb API Documentation](https://developers.themoviedb.org/3/getting-started/ introduction) * [Angular HttpClient Documentation](https://angular.io/api/common/http/HttpClient) * [Ionic Documentation on Ion-List and Ion-Item](https://ionicframework.com/docs/api/list#item) * [Ionic Documentation on Ion-Spinner and Ion-Alert](https://ionicframework.com/docs/api/spinner)