Adding an Easter Egg to Your App

A Zone Leader talks about how he added a simple "Easter Egg" to an application he built for a family member.

John Vester

CORE ·

May. 28, 20 · Tutorial

Likes (2)

Comment

Save

9.0K Views

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:

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:

     Java 
   
x
 
@NoArgsConstructor
@Data
public class EasterEggData {
    private String url;
    private String caption;
    private Calendar timestamp;
    @Override
    public String toString() {
        return "easterEggData=EasterEggData(url=" + url + ", caption=" + caption +", timestamp=" + timestamp.getTime();
    }
}

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

     Java 
   
xxxxxxxxxx
 
@Tag(name = "Easter Egg API")
@RequiredArgsConstructor
@CrossOrigin
@RequestMapping(produces = MediaType.APPLICATION_JSON_VALUE)
@RestController
@PreAuthorize("hasAuthority('AppUser') || #oauth2.hasScope('openid')")
public class EasterEggController {
    private final EasterEggService easterEggService;
    @GetMapping(value = "/easterEgg")
    public ResponseEntity<EasterEggData> getEasterEggUrl() {
        try {
            return new ResponseEntity<>(easterEggService.getEasterEgg(), HttpStatus.OK);
        } catch (Exception e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }
    }
}

Client-Side Updates

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

     JavaScript 
   
xxxxxxxxxx
 
@Injectable()
export class EasterEggService {
    constructor(private http: HttpClient) { }
    baseUrl: string = environment.api + '/easterEgg';
    getEasterEgg(): Observable<EasterEggData> {
        const httpOptions = {
            headers: new HttpHeaders({
                'Authorization': 'Bearer ' + myToken
            })
        };
        return this.http.get<EasterEggData>(this.baseUrl, httpOptions);
    }
}

I created EasterEggData on the client-side:

     JavaScript 
   
xxxxxxxxxx
 
export class EasterEggData {
    url: string;
    caption: string;
    timestamp: number;
    constructor() {}
}

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

     Java 
   
xxxxxxxxxx
 
export class EasterEggModalComponent implements OnInit {
    easterEggData: EasterEggData;
    constructor(public activeModal: NgbActiveModal, private easterEggService: EasterEggService) { }
    async ngOnInit() {
        this.easterEggData = new EasterEggData();
        this.easterEggService.getEasterEgg().subscribe(data => {
            this.easterEggData = data;
        });
    }
}

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:

     Java 
   
xxxxxxxxxx
 
@Override
public EasterEggData getEasterEgg() throws AmhsException {
   log.debug("getEasterEgg()");
   EasterEggData easterEggData = new EasterEggData();
   List<InstagramData.Edges> instagramData = getInstagramData();
   if (CollectionUtils.isNotEmpty(instagramData)) {
      RandomGenerator<InstagramData.Edges> randomGenerator = new RandomGenerator<>();
      List<InstagramData.Edges> edges = randomGenerator.randomize(instagramData, 1);
      easterEggData.setUrl(edges.get(0).getNode().getDisplay_url());
      easterEggData.setCaption(edges.get(0).getNode()                     
         .getEdge_media_to_caption().getEdges().get(0).getNode().getText());
      easterEggData.setTimestamp(edges.get(0).getNode().getTimeStamp());
   }
   log.info("easterEggData={}", easterEggData);
   return easterEggData;
}

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:

Clicking the logo again will show something like this:

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!

EGG (file format) app

Opinions expressed by DZone contributors are their own.

Related

Trending