Kubernetes with OpenShift World Tour: Get hands-on experience and build applications fast! Find a workshop!

Mirror game app showcases 15 cloud technologies and components

Summary

This project contains a game where players need to show five specific emotions and do five specific poses in two levels. The fastest player wins. The game uses various key cloud technologies to demonstrate the value of a diverse, interconnected system, with both public and private cloud environments.

This code pattern shows you how to set up an interactive game app that works with Cloud Foundry, a serverless architecture, and an on-premises environment.

Description

The game has three main parts:

  • The core game, which is implemented as a web application with serverless architecture, because it is only used during conferences.
  • The user management service, which is implemented on-premises to avoid having the personal data in a public cloud.
  • The high score list, which is implemented through Cloud Foundry to show easy theme adoptions for different conferences.

To view the demo, you can play the game now: Blue Cloud Mirror

Here is an example of a successful game:

Learn cloud technologies with the Blue Cloud Mirror app

This code pattern works with the following components:

When you complete this code pattern, you understand the following tasks:

  • Set up an app with Cloud Foundry, a serverless architecture with IBM Cloud Functions, and an on-premises environment.
  • Set up a web application hosted on the IBM Cloud (like the example game app).
  • Set up an API and web application hosted on IBM Cloud (like the example scores service).
  • Work with an API hosted on premises (like the example users service).

Flow

Cloud architecture flow diagram

  1. The user (player) accesses the URL from browser to load game web application.
  2. The static web resources of this web application are loaded from object storage.
  3. The player enters personal information and clicks Let’s go.
  4. The REST API for the users service is invoked (served by API Connect).
  5. API Connect uses Secure Gateway to invoke the Node.js service implementation that is running in Minikube on premises.
  6. The service accesses CouchDB to store the user information.
  7. The user can start playing the two levels in the browser. The complete game runs in the browser and uses three different visual recognition models for TensorFlow.js: faces, emotions, poses.
  8. After the player completes both levels, the results are displayed. The player can download an image with pictures from the game, for example to share on social media.
  9. The player can also save the score. The REST API for the scores service is invoked (served by API Connect).
  10. API Connect forwards the request to the core scores service implementation, which runs as Node.js Cloud Foundry buildpack on the Cloud Foundry public application.
  11. The service stores the data in Cloudant.
  12. The player can now invoke the second web application, which displays the high scores. The static web resources are loaded from a second Cloud Foundry buildpack.
  13. The highscore app invokes another API of the scores service to get a list of scores and then render it.

Instructions

Find detailed technical steps for this code pattern in the main README.md file in the GitHub repository, and in the individual README.md files for the game, the scores, and the users.

  1. Set up the app and the local environment.
  2. Set up the game app.
  3. Set up the scores service.
  4. Set up the users service.
Niklas Heidloff
Thomas Südbröcker
Harald Uebele