Part Two: Make mock data for your detail view component (Mock Data Series)

If you are just joining this post you’ll want to go back and read Part One.

---

In this part of the series I’m going to work on making the mock data for the detail view. In the previous part of the series I made the list view of the zoo animals. I need to now make the animal detail view.

How do I use this at work?

Much like in the first tutorial I use this to help create a clickable prototype directly in the code base. This allows our users and SMEs to see the new features and flows directly in the context of the website they are currently familiar with. 

This works really well when you are working to fold a new user experience into an existing system. 

This also works great for new systems when I’m helping businesses transition from keeping their data and business processes in an excel spreadsheet to an application with business intelligence. I usually do a prototype like this after first testing assumptions with paper prototyping and a prototype in a tool like Figma or Sketch. 

Moving the prototype further into actual code allows you to create a testing experience that closely mimics the real working software complete with complicated user interactions and mock data. 

Animal Detail View

First I’ll create a new component to hold all the details about the animal.

ng g c zoo-animals/animal

In this new component I’m going to return data from the data set for the specific animal that is clicked on from the list component. 

Before I set up returning information when you click to an animal from the list I’m going to need to set up my mock interface data.

I’m going to create a new animal interface in this animal.component.ts file and in this data set add a lot more attributes and data types about the 3 animals in addition to the first data set that is currently serving up the list view.

export interface IAnimal {
  guid: string;
  name: string;
  type: string;
  description: string;
  numberAtZoo: number;
  photo: string;
  animalInResidence: IAnimalInResidence[];
  food: IFood[];
  habitats: IHabitat[];
}

As I was working through the details of the animal attributes I wanted to include I some information on each individual animal in residence. I also wanted to include an array of food and the habitats the animal lives in so that I can use the individual information in interesting ways later in my application rather than relying on a string for everything.

No next I needed to export interfaces for the individual animals, food, and habitats.

export interface IAnimalInResidence {
    name: string;
    personality: string;
    age: number;
}

export interface IFood {
  name: string;
}

export interface IHabitat {
  name: string;
}

The next thing I need to do is to create new export classes for each animal in your list of zoo animals. Again one for each of our animals in the list: shark, giraffe, & capybara.

Below is my export class for Animal 3, the capybaras.

export class Animal3 implements IAnimal {
  guid = 'fed513f5-af68-43d0-ac6f-fe5e15309f91';
  name = 'Capybara';
  type = 'Mammal';
  description = 'Capybaras has a barrel-shaped body with a short head and reddish-brown fur.';
  numberAtZoo = 4;
  photo = 'asset/capybaraexamplephoto.jpg';
  animalInResidence = [
    {
      name: 'Getty',
      personality: 'She loves to chew on her water plants at the edge of the water. ',
      age: 2
    },
    {
      name: 'Pontoon', 
      personality: ' Pontoon is very shy but loves to get chatty with Getty!',
      age: 5
    }
  ];
  food = [
    {name: 'grass'},
    {name: 'water plants'}
  ];
  habitats = [
    {name: 'rivers'},
    {name: 'marshes'}
  ]
}

The Problem

Do you see the problem already? 

I am currently creating two animal interfaces used in two different components based on the same animal. Currently I don’t have a way to pull the right animal’s data into the UI at this point. I want to avoid reaching into the zoo-animal.component.ts file to grab the mock data that lives there.  It would be really messy and hard to maintain if I went down that path. As well as, when the time comes for me or another developer to strip out the mock data and replace it. 

I need to get those interfaces combined and out into their own file.

To wrap up

I’ve now created two sets of the same classes. I have different data in both places but this isn’t really the way I want it to be. I want to get to the point where I have one set of data to “rule them all”. Which can be reused all over my application.

In the next post I’m going to be working through moving all these pieces into a Mock Service so that I can create animals once and simplify the data set.

Posts in the Series

• Part One: Make Mock Data for your list view component (Mock Data Series)
• Part Two: Make mock data for your detail view component (Mock Data Series)

Coming Soon!

• Part Three: Mocking a service for my data (Mock Data Series)