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

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.

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:

Adding Badge Notifications with Ionic 4 and Angular

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'},
];

Here’s A List of Ideas to Get Started Learning Ionic 5!

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 .

🗽 The Top 4 Most Patriotic Repositories 🇺🇸

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.

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