Use Your 404 Pages to Be as Influential as Amazon in Ionic 5

Thomas George
Jul 24 · 5 min read
Image for post
Image for post

Everyone has done it before. You type in a website then stop and stare at the 404 page that is on the screen. You ask yourself, “Did I not type it in right? Did the website delete?”

What if everyone who visited that 404 page was met with the pictures of animals up for adoption? That was my thought when I visited an Amazon 404 Error page and saw “Dogs of Amazon.” If you haven’t seen this page, click here.

An increasingly popular way for animals to get adopted is on social media, where they do a funny trick or we get to watch their months-long transformation video in under 3 minutes. By transforming the 404 page, we can help change the lives of hundreds of animals across the world.”

Getting Started

To be able to achieve such a goal, we need to have a database somewhere that has a collection of adoptable dogs as well as an API to communicate with it. For this, we are using PetFinder. PetFinder is an online list of adoptable dogs and cats that has everything we are looking for.

Image for post
Image for post

For this example, I will be creating an Ionic App that when the user tries to visit a page that isn’t there, it’ll redirect them to the new 404 page. If you would like to go a different route, click here to go to the PetFinder API documentation and find out more ways to integrate this into your application! If you would like to use the same type of app I will be using, then follow the steps below:

Step 1: Starting Out

Like all projects, the first thing we must do is to initialize Ionic by:

ionic start IonicAnimalErrorApp blank

This will create a project that we can then cd IonicAnimalErrorApp into. If it asks for you to select a language, select Angular, and if it asks if you would like to integrate Capacitor then select yes.

Step 2: Creating the 404 Page

When we have stepped into the project, we now need to create a page that will host the 404 Error Page:

ionic g page error-page

Step 3: Adding The Routing

When we generate the Error Page it added a route to visit the Error Page, but it didn’t solve all the routing issues pertaining to users going to pages that are not actually there. To solve that issue, we simply add the following bolded line of code to the end of the Routes variable in `app-routing.module.ts`.

const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '404',
loadChildren: () => import('./error-page/error-page.module').then( m => m.ErrorPagePageModule)
},
{path: '**', redirectTo: '/404'},
];

Step 4: Adding The Error Page Code

Before we start working on the actual Error Page, we need an API Key. To get this, please click here to visit PetFinder to retrieve an API key. Once we have an API and Secret Key, we can then run the following:

npm install --save @petfinder/petfinder-js

This will install all the packages that we need to communicate with the PetFinder API.

Now to make this easier to understand, let’s add an interface by running:

ng g interface interfaces/animal.ts

Below, I list out each page and what needs to be added to the pages to build this application.

animal.ts

export interface AnimalInterface {
name: string;
type: string;
url: string;
status: string;
description?: string;
image?: string;
}

error-page.page.ts

import { Component, OnInit } from '@angular/core';
import { Client } from "@petfinder/petfinder-js";
import { AnimalInterface } from "../interfaces/animal";

@Component({
selector: 'app-error-page',
templateUrl: './error-page.page.html',
styleUrls: ['./error-page.page.scss'],
})
export class ErrorPagePage implements OnInit {
client = new Client({
apiKey: "YOUR_API_KEY_HERE",
secret: "YOUR_SECRET_KEY_HERE"
});

public animalInfo: AnimalInterface;
public datalist;


constructor() { }

ngOnInit() {
this.client.animal.search()
.then( (response) => {
this.datalist = response.data.animals[0];
this.animalInfo = {
name: this.datalist.name,
type: this.datalist.type,
image: this.datalist.photos[0].medium || "",
url: this.datalist.url,
status: this.datalist.status,
description: this.datalist.description
}
})
.catch(function (error) {
// Handle the error
console.log("Error: ", error);
});

}


}

error-page.page.html

<ion-content *ngIf="datalist">
<div id="container">
<h1>404 Error</h1>
<p>We may not have found that page you were looking for, but we found this {{ animalInfo.type }} that needs a loving family!</p>
<img src="{{ animalInfo.image }}" *ngIf="!!animalInfo.image" alt="Animal Image" id="animalImg"> <h3><a href="{{ animalInfo.url }}" title="View More Information!">{{ animalInfo.name }}</a></h3>
<p>{{ animalInfo.description }}</p>
<p>Status: {{ animalInfo.status }}</p>
</div>
</ion-content>

error-page.page.scss

#container {
padding: 15px;
text-align: center;

#animalImg {
width: 80%;
display: inline-block;
}
}

Step 5: Running It

Now that we have added the code for it to run properly, the only thing left to do is run it and test it out. To run it, we simply type ionic serve in the terminal and hit enter. When the app finally loads, go to the URL and try to traverse to a route that you know isn’t there. In my case, I would traverse to http://localhost:8100/ThisIsNotARealRoute .

Notes

If you would like a copy of everything I went over in this article, click here and you will be able to view the repository.

Image for post
Image for post

If you would like to view my previously written articles or connect with me, visit my website by clicking here!

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Thomas George

Written by

💻 1st Phorm #Ionic Mobile Applications #Developer ☕️ Espresso Fanatic 🇺🇸 Chauvinist www.thethomasgeorge.com

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Thomas George

Written by

💻 1st Phorm #Ionic Mobile Applications #Developer ☕️ Espresso Fanatic 🇺🇸 Chauvinist www.thethomasgeorge.com

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store