Those growing up in North America likely have a memory of the Easter Bunny — a mythical creature that magically left baskets or eggs filled with prizes for children. The concept of an Easter Egg Hunt pairs a group of children with a large area filled with hidden eggs. In some cases, the child with the most eggs found wins a prize. In other cases, the child which finds the single “golden egg” wins a prize too.

As you might expect, this idea of putting undocumented features (Easter Eggs) into a software program was destined to happen. Over the years, I have found myself seeking out such hidden gems and finally decided to add one into my mother-in-law’s application as noted in my “New Application Journey” series.

Determining the Egg

For me, determining the content of the Easter Egg was simple.  I wanted to replace the link behind the logo of the application to return a modal filled with random content from a collection of Instagram accounts. Once found, end-users of the application (which is basically just my mother-in-law) could see a random photo from one of our family members just by clicking the top left corner of her application:

Application navbar

API Updates

For the content retrieval of the Easter Egg, I decided I would use the Spring Boot RESTful API to create EasterEggData  to be used by the Angular client:

The Angular client would then call the /easterEgg URI via a controller in the API project:

Client-Side Updates

On the client-side, I introduced a simple EasterEggService:

I created EasterEggData on the client-side:

Then, I wired the logo link to the following component:

Service Updates

With the basic wiring in place, I just needed to create the service-level work to populate the EasterEggData object. Without revealing the source of my personal data, the core processing logic is shown below:

In the example above, I am actually using RandomGenerator as discussed in my “Building a Random Generator” series. In this case, there is a List<InstagramData> that is being retrieved. The randomize() method will return one item, at random, from this list and convert it to an EasterEggData object.

Conclusion

When my mother-in-law clicks the logo link of her application, she will now see something like this:

Example Easter Egg

Clicking the logo again will show something like this:

Example Easter Egg

Every time the modal is requested in Angular, the image, caption, and original post date are all from a random Instagram post from one of our family members’ accounts. My mother-in-law doesn’t get out to Instagram very often, so this gives her a quick way to check in to see what she may have missed.

Have a really great day!



Source link

Write A Comment