Introduction
This application covers several important concepts in Ionic development that will help you on your way to becoming an awesome hybrid mobile applications developer.
For this tutorial, basic knowledge of HTML and CSS is expected. Some familiarity with Angular 2+, Typescript and SCSS would be beneficial but is not absolutely essential.
Why Ionic?
Ionic is one of the most popular frameworks in the world for creating fast and powerful hybrid mobile applications. Companies like SworkIt, Pacifica and Diesel all use Ionic to power their mobile applications. This is because from a single code base, they can build an application for IOS, Android, Windows and other platforms.
What are we Building?
We are building a hybrid mobile application that uses the TMDb API to get information on movies that a user searches for, the ones currently in theatres as well as the most popular movies in the world.
Register and get an API key
We first and foremost need to sign up on themoviedb.org site to gain authorization to use the API.
On registration, log in to the site and locate the settings page by clicking on the letter icon that should have the initial of your first name. This icon will be on the right hand side of your screen and should activate a dropdown where you will find the “settings” link. While on the settings page, click on the “API” link on the left side menu and register for the API key that we will use later.
Setup
Install Ionic and Cordova
Since we will be building our application in Ionic, we will need to install the Ionic CLI to generate for us our pages, providers, directives and so on. We also need cordova to bundle the application into an APK that we can be able to install on a Smartphone.
npm install -g cordova ionicWe now need to create our new project so that we can get to the fun part of coding the actual application.
ionic start movieApp sidemenuNow enter your project directory and start the application.
cd movieApp
ionic serveCongratulations, you now have an ionic application. It was pretty easy, right?
Setup the Movie Provider
Ionic is a framework built on top of Angular and thus we will be creating a service provider to handle all our HTTP requests and share the responses across the application.
ionic g provider movie-serviceOur service will use the API key we registered earlier to make calls to TMDb and receive the information.
import { Injectable } from '@angular/core'; //Imports injectable decorator
import { Http } from '@angular/http';
import 'rxjs/Rx';
/_
Generated class for the MovieServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
_/
@Injectable()
export class MovieServiceProvider {
apiKey:string = <<api key>>'; //Insert your TMDb api key
constructor(public http: Http) {
console.log('Hello MovieServiceProvider Provider');
}
//Function that returns the current popular movies from the TMDb
getPopularMovies(){
return this.http.get('https://api.themoviedb.org/3/discover/movie?api_key='+this.apiKey+
'&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1')
.map(res=> res.json());
}
//Function that returns movies that are currently showing in Cinemas from the TMDb
getInTheaters(){
return this.http.get('https://api.themoviedb.org/3/discover/movie?api_key='+this.apiKey+
'&language=en-US&primary_release_date.gte=2017-04-15&
primary_release_date.lte=2017-12-25&include_adult=false&include_video=false&page=1')
.map(res=> res.json());
}
//Uses the TMDb Search api to return movies based on the users search
searchMovies(searchStr:string){
return this.http.get('https://api.themoviedb.org/3/search/movie?api_key='+this.apiKey+
'&query='+searchStr+'&language=en-US&primary_release_date.gte=2017-04-15
&primary_release_date.lte=2017-12-25&include_adult=false&include_video=false&page=1')
.map(res=>res.json());
}
//returns the information on a particular movie using it's ID
getMovie(id){
return this.http.get('https://api.themoviedb.org/3/movie/'+id+'?api_key='+this.apiKey+
'&language=en-US')
.map(res=>res.json());
}
//Returns a the list of genres in TMDB
getGenres(){
return this.http.get('https://api.themoviedb.org/3/genre/movie/list?api_key='+this.apiKey+
'&language=en-US')
.map(res=>res.json());
}
//Returns a list of movies with a specified genre
getMoviesByGenre(genreId){
return this.http.get('https://api.themoviedb.org/3/discover/movie?api_key='+this.apiKey+
'&language=en-US&sort_by=popularity.desc&include_adult=false&
include_video=false&page=1&with_genres='+genreId)
.map(res=>res.json());
}
}Setup the Pages
Generate the Pages we Need
We already have a home page but we still need to generate a few more pages to store all the data we want to display.
ionic g page search
ionic g page popular-movies
ionic g page in-theatres
ionic g page movies-by-genre
ionic g page movie-detailsEnable lazy loading
When we use the Ionic CLI, we generate lazy loadable pages; however, our starter template still loads our application the old fashioned way and may give you trouble when building your application for production. To avoid this, we need to remove the import statements for the home page from our app.module.ts file as well as from our declarations and entry components. While we are here, let us add the HttpModule to our imports to allow us make requests to TMDb.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MovieServiceProvider } from '../providers/movie-service/movie-service';
@NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
MovieServiceProvider
]
})
export class AppModule {}After that, go to the app.component.html file and remove the import statements for the home page. This will create an error with the rootpage variable which we fix by placing HomePage in quotation marks. Go to the pages array and add our popular-movies and in-theatres pages as shown below. This will add them to our Side Menu.
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = 'HomePage'; //Lazy load the hompage
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: 'HomePage' },
{ title: 'In Theatres', component: 'InTheatresPage'},
{ title: 'Popular Movies', component: 'PopularMoviesPage'}
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}Home Page
We want our home screen to have two things; a list of genres that a user can click to go to a page with movies of that particular genre and a FAB (Floating Action Button) that launches the search modal. To do this we have to call the getGenres() function from our movies–service and list out the response on our homepage. We also need to set up a function that launches the search modal and passes the genre object.
import { Component } from '@angular/core';
import { NavController, ModalController, IonicPage } from 'ionic-angular'; //import the modal controller and Ionic page decorator
import { MovieServiceProvider } from '../../providers/movie-service/movie-service';
@IonicPage() //apply the IonicPage decorator
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
//create an empty array
genres:any[]=[];
constructor(public navCtrl: NavController, public movieService:MovieServiceProvider,
public modalCtrl:ModalController) {
}
//The ionViewDidLoad function loads as soon as the page is open
ionViewDidLoad() {
//call the get Genres function and store the response in our genres array
this.movieService.getGenres()
.subscribe(data => {
this.genres = data.genres;
});
console.log('ionViewDidLoad InTheatresPage');
}
launchMoviesByGenrePage(genre){
//Uses the NavController to navigate to the next page and pass in the genre object choosen by the user
this.navCtrl.push('MoviesByGenrePage', genre);
}
launchSearchModal(){
//uses the modal controller to launch the search modal
let modal = this.modalCtrl.create('SearchPage');
modal.present();
}
}In the markup, we use the Ionic Virtual scroll within our ion–list component in order to improve the apps performance and list out our genres. We add a click event to our FAB and genre title buttons to launch the search modal and movies-by-genre page respectively.
<ion-header>
<ion-navbar color="secondary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!--Use the ion-fab component to creat the FAB button and add a click event to trigger the launchSearchModal function -->
<ion-fab right bottom>
<button ion-fab color="buttons" (click)="launchSearchModal()">
<ion-icon name="search"></ion-icon></button>
</ion-fab>
<!--Pass the genres object into the virtual scroll-->
<ion-list [virtualScroll]="genres ">
<!--specify the individual object i.e let genre-->
<ion-item *virtualItem='let genre' text-wrap>
<!--Add a click event to trigger the launchMoviesByGenrePage function and pass in the genre object-->
<button (click)="launchMoviesByGenrePage(genre)" ion-button clear color="dark">
<h2 style="font-weight:bold;">{{genre.name}}</h2></button><br>
<p style="padding-left:15px;">Id: {{genre.id}}</p>
<h3 style="font-weight:bold;"></h3>
<p></p> </ion-item>
</ion-list>
</ion-content>Don’t forget to enable lazy loading by adding the home.module.ts file to your home folder and writing the following code to it.
import { NgModule } from '@angular/core';
import { IonicPageModule, IonicPage } from 'ionic-angular';
import { HomePage } from './home';
@IonicPage(
{
name: 'HomePage'
}
)
@NgModule({
declarations: [HomePage],
imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }Search Page
For our search page, we need our application to be able to call TMDb’s search API every time the user enters a letter into a search bar. We then list the response in a virtual scroll ion-list like we did in our home page and add a click event to the movie title that will launch the movie details modal and pass the object with the chosen movie’s information.
<!--
Generated template for the SearchPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<ion-title>Search</ion-title>
<!--Adds a close button to the navbar and assigns a click event to trigger the dismiss function to close the modal-->
<ion-buttons end><button clear ion-button (click)="dismiss()">
<ion-icon name="md-close-circle"></ion-icon></button></ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<!--Adds a search bar and an ionInput event to trigger the searchMovies function everytime a user types-->
<ion-searchbar placeholder = "Search Movies" (ionInput)="searchMovies($event)"></ion-searchbar>
<!--Another virtual scroll ion-list that loops through the results of the search-->
<ion-list [virtualScroll]="results">
<ion-item *virtualItem='let movie' text-wrap>
<ion-avatar item-start>
<img src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}">
</ion-avatar>
<!--Adds a click event to trigger the launchMovieDetailsPage function to launch the movies modal and pass the movie object chosen by the user-->
<button (click)="launchMovieDetailsPage(movie)" ion-button clear color="dark"><h2 style="font-weight:bold;">{{movie.original_title}}</h2></button><br>
<p style="padding-left:15px;">Release Date: {{movie.release_date}}</p>
<h3 style="font-weight:bold;"></h3>
<p></p> </ion-item>
</ion-list>
</ion-content>Since our search page is a modal, we add the dismiss() function and use Ionic’s View Controller to close our modal and return to the previous page.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, ViewController } from 'ionic-angular'; //import the modal and view controllers
import { MovieServiceProvider } from '../../providers/movie-service/movie-service'; //import the movie service
/_*
_ Generated class for the SearchPage page.
_
_ See https://ionicframework.com/docs/components/#navigation for more info on
_ Ionic pages and navigation.
_/
@IonicPage(
)
@Component({
selector: 'page-search',
templateUrl: 'search.html',
})
export class SearchPage {
//create an empty array to hold the results of the search
results:any[]=[];
constructor(public navCtrl: NavController, public navParams: NavParams, public movieService:MovieServiceProvider,
public modalCtrl:ModalController, public viewCtrl:ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SearchPage');
}
searchMovies(ev: any) {
// set val to the value of the searchbar
let val = ev.target.value;
//Calls the searchMovies function from the movies service and stores the response in the results array
this.movieService.searchMovies(val).subscribe(data=>{
console.log(data.results);
this.results = data.results;
});
}
//
launchMovieDetailsPage(movie){
//Use the Modal Contoller to launch the movie details page and pass the movie object for the movie chosen by the User
let movieModal = this.modalCtrl.create('MovieDetailsPage', movie);
movieModal.present();
}
dismiss() {
//closes the search modal and returns to the homepage
this.viewCtrl.dismiss();
}
}Movies by Genre Page
Our Movies-by-genre page requires us to call the getMoviesByGenre function from our service and pass in the id of the object we received from our homepage. In Ionic, this is made super easy by the use of NavParams. We list our response in the virtual scroll ion-list just as we have done before and add a click event to the movie title button to launch the movie details modal and pass in our object.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular'; //Import the Modal controller and NavParams
import { MovieServiceProvider } from '../../providers/movie-service/movie-service';
/_*
_ Generated class for the MoviesByGenrePage page.
_
_ See https://ionicframework.com/docs/components/#navigation for more info on
_ Ionic pages and navigation.
_/
@IonicPage()
@Component({
selector: 'page-movies-by-genre',
templateUrl: 'movies-by-genre.html',
})
export class MoviesByGenrePage {
//create an empty array
movies:any[]=[]
constructor(public navCtrl: NavController, public navParams: NavParams, public movieService:MovieServiceProvider,
public modalCtrl:ModalController) {
}
ionViewDidLoad() {
//call the getMoviesByGenre function and use NavParams to get the id from genre object we passed in from our homepage
this.movieService.getMoviesByGenre(this.navParams.get('id'))
.subscribe(data => {
//store the response on our empty array
this.movies = data.results;
console.log(this.movies);
});
console.log('ionViewDidLoad MoviesByGenrePage');
}
launchMovieDetailsPage(movie){
//Use the Modal Contoller to launch the movie details page and pass the movie object for the movie chosen by the User
let movieModal = this.modalCtrl.create('MovieDetailsPage', movie);
movieModal.present();
}
}<!--
Generated template for the MoviesByGenrePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<ion-title>movies-by-genre</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!--Another virtual scroll ion-list that loops through the movie array that now holds the movies of the genre chosen by the user-->
<ion-list [virtualScroll]="movies ">
<ion-item *virtualItem='let movie' text-wrap>
<ion-avatar item-start>
<img src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}">
</ion-avatar>
<!--Adds a click event to trigger the launchMovieDetailsPage function to launch the movies modal and pass the movie object chosen by the user-->
<button (click)="launchMovieDetailsPage(movie)" ion-button clear color="dark">
<h2 style="font-weight:bold;">{{movie.original_title}}</h2></button><br>
<p style="padding-left:15px;">Release Date: {{movie.release_date}}</p>
<h3 style="font-weight:bold;"></h3>
<p></p> </ion-item>
</ion-list>
</ion-content>Movie Details Page
This is the most important page in our application because all others lead here. We want our users to get information about the movies of their choice and this is the page where it is to be displayed. This page requires us to call the getMovie function in our service and pass in the id of the object we received from the previous page. This is a modal and so we add the dismiss function we used in our search page.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular'; //import the Nave
import { MovieServiceProvider } from '../../providers/movie-service/movie-service';
/_*
_ Generated class for the MovieDetailsPage page.
_
_ See https://ionicframework.com/docs/components/#navigation for more info on
_ Ionic pages and navigation.
_/
@IonicPage()
@Component({
selector: 'page-movie-details',
templateUrl: 'movie-details.html',
})
export class MovieDetailsPage {
movie:any[]=[];
constructor(public navCtrl: NavController, public navParams: NavParams, public movieService:MovieServiceProvider,
public viewCtrl:ViewController) {
}
ionViewDidLoad() {
this.movieService.getMovie(this.navParams.get('id'))
.subscribe(movie => {
console.log(movie)
this.movie = movie;
})
console.log('ionViewDidLoad MovieDetailsPage');
}
dismiss() {
this.viewCtrl.dismiss();
}
}We use data binding to pass our values to our html file and use the ion–grid system to organize it into rows and columns.
<!--
Generated template for the MovieDetailsPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<ion-title>movieDetails</ion-title>
<ion-buttons end><button clear ion-button (click)="dismiss()"><ion-icon name="md-close-circle"></ion-icon></button></ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-6>
<img src = "http://image.tmdb.org/t/p/w500{{movie.poster_path}}">
</ion-col>
<ion-col col-6>
<h4>Title: </h4><p>{{movie.original_title}}</p>
<h4>Release Date: </h4><p>{{movie.release_date}}</p>
<h4>Rating: </h4><p>{{movie.vote_average}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<h4>Overview</h4>
<p>{{movie.overview}}</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>Popular Movies Page
Our popular-movies page requires us to call the getPopularMovies function from our service. This will get us a list of all the most popular movies on TMDb. We then list our response in the virtual scroll ion-list just as we did before and add a click event to the movie title button to launch the movie details modal and pass in our object.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular'; //Import the Modal controller
import { MovieServiceProvider } from '../../providers/movie-service/movie-service';
/_*
_ Generated class for the PopularMoviesPage page.
_
_ See https://ionicframework.com/docs/components/#navigation for more info on
_ Ionic pages and navigation.
_/
@IonicPage()
@Component({
selector: 'page-popular-movies',
templateUrl: 'popular-movies.html',
})
export class PopularMoviesPage {
//create an empty array
popularMovies:any[]=[];
constructor(public navCtrl: NavController, public navParams: NavParams, public movieService:MovieServiceProvider,
public modalCtrl:ModalController) {
}
ionViewDidLoad() {
//call the getPopularMovies function from the movie service
this.movieService.getPopularMovies()
.subscribe(res => {
console.log(res.results);
//store the response on our empty array
this.popularMovies = res.results;
});
console.log('ionViewDidLoad PopularMoviesPage');
}
launchMovieDetailsPage(movie){
//Use the Modal Contoller to launch the movie details page and pass the movie object for the movie chosen by the User
let movieModal = this.modalCtrl.create('MovieDetailsPage', movie);
movieModal.present();
}
}<!--
Generated template for the PopularMoviesPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>popularMovies</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!--Another virtual scroll ion-list that loops through the movie array that now holds the TMDBs most popular movies list-->
<ion-list [virtualScroll]="popularMovies ">
<ion-item *virtualItem='let movie' text-wrap>
<ion-avatar item-start>
<img src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}">
</ion-avatar>
<!--Adds a click event to trigger the launchMovieDetailsPage function to launch the movies modal and pass the movie object chosen by the user-->
<button (click)="launchMovieDetailsPage(movie)" ion-button clear color="dark">
<h2 style="font-weight:bold;">{{movie.original_title}}</h2></button><br>
<p style="padding-left:15px;">Release Date: {{movie.release_date}}</p>
</ion-item>
</ion-list>
</ion-content>In Theatres Page
Our in-theatres page follows pretty much the same process as the popular movies except that we call the inTheatres function from our service and return the movies currently airing in cinemas. We again list our response in the same way and add a click event to the movie title button to launch the movie details modal and pass in our object.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular'; //Import the Modal controller
import { MovieServiceProvider } from '../../providers/movie-service/movie-service';
/_*
_ Generated class for the InTheatresPage page.
_
_ See https://ionicframework.com/docs/components/#navigation for more info on
_ Ionic pages and navigation.
_/
@IonicPage()
@Component({
selector: 'page-in-theatres',
templateUrl: 'in-theatres.html',
})
export class InTheatresPage {
//create an empty array
inTheatres:any[]=[];
constructor(public navCtrl: NavController, public navParams: NavParams, public movieService:MovieServiceProvider,
public modalCtrl:ModalController) {
}
ionViewDidLoad() {
//call the getInTheatres function from the movie service
this.movieService.getInTheaters()
.subscribe(data => {
//store the response on our empty array
this.inTheatres = data.results;
});
console.log('ionViewDidLoad InTheatresPage');
}
launchMovieDetailsPage(movie){
//Use the Modal Contoller to launch the movie details page and pass the movie object for the movie chosen by the User
let movieModal = this.modalCtrl.create('MovieDetailsPage', movie);
movieModal.present();
}
}<!--
Generated template for the InTheatresPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>inTheatres</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!--Another virtual scroll ion-list that loops through the movie array that now holds the movies of the genre chosen by the user-->
<ion-list [virtualScroll]="inTheatres ">
<ion-item *virtualItem='let movie' text-wrap>
<ion-avatar item-start>
<img src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}">
</ion-avatar>
<!--Adds a click event to trigger the launchMovieDetailsPage function to launch the movies modal and pass the movie object chosen by the user-->
<button (click)="launchMovieDetailsPage(movie)" ion-button clear color="dark">
<h2 style="font-weight:bold;">{{movie.original_title}}</h2></button><br>
<p style="padding-left:15px;">Release Date: {{movie.release_date}}</p>
</ion-item>
</ion-list>
</ion-content>Building the application
You now have an awesome Ionic 3 application and it is time to show it to the world using the Ionic CLI. First and foremost, add the platform for which we want to build the application, for example, we will use android because it is the most popular Smartphone OS.
ionic cordova platform add androidTo build an android APK, you need to have the SDK on your computer and the best way to do this is to install Android Studio. Follow this instruction guide step by step to achieve this and then build your application by running the following command.
ionic cordova build androidTo get your APK, just go to the location it specifies after the build has finished.
Congratulations, you now have an ionic mobile app. Feels good, right?
Conclusion
In Building this simple app, we have learnt several essential concepts in Ionic 3 development. We have learnt how to set up, generate pages and providers as well as serve and build an application using the Ionic CLI. We have learnt how to launch modals and navigate between pages while passing data between them. We have also touched on lazy loading which is essential in the production of high performance Ionic applications.
I hope to follow this article with more detailed explanations on some of the individual concepts we have touched on. I hope you enjoyed this and are excited to experiment with developing applications in Ionic 3.
Source: Scotch.io