During my spare time, I now and then play Clash Royale. Clash Royale is a tower rush video game which pits players in games featuring two and four players (one on one or two on two) in which the objective is to destroy the most amount of opposing towers, with the destruction of the “King tower” being an instantaneous win. (source Wikipedia). Anyway, a great game!

TeslaBalloonRoyalHogs

Recently an “unofficial” public API has been released for the game. Which makes it possible to consume real-time statistics.

Favorite game + Statistics + APEX + REST = Candystore

I thought it could be fun to write a post on how to consume some of this data with APEX 18.1. This post is about consuming one of these services and display the result in an interactive report. An important note is that you need APEX 18.1 version if you want to try this out since the web service modules interface came with APEX 18.1.

Let’s get started

  • Choosing API

The first step is to go to the https://docs.royaleapi.com/#/. Here I choose the proper service endpoint that I want to consume. In this case, I choose the player service. The service will provide data of a player(s) current deck(s).

According to the documentation, the HTTP Request is

Screen Shot 2018-08-29 at 13.36.57.png

is a dynamic URL parameter and represent the player id. The value will be set by the client. The response from the service is in JSON format.

  • Building the consuming web module in APEX

With the release of APEX 18.1, this is quite straightforward. If you navigate to shared components you will find.

Screen Shot 2018-08-27 at 22.08.15

Here you chose Web Source Module. A new window pops-up. Press the create button. The following window appears

Screen Shot 2018-08-27 at 22.14.37

We choose from scratch. Press Next

Screen Shot 2018-08-28 at 12.26.25

Here we define the APEX name for the web source module. We also define the URL endpoint for the service. By following the specification from the royalapi. Press Next.

Screen Shot 2018-08-28 at 22.20.37

Fill in the Base URL and the service endpoint. Press Next.

Screen Shot 2018-08-27 at 22.33.39

In this case, the authentication is done with HTTP header parameter. I have received a developer authentication key from the web service provider. To define this key as a parameter I have to choose “Authentication Required” and then press the advanced button.

Screen Shot 2018-08-28 at 12.33.48

So here I define the HTTP header parameter “auth” and add my key as value. Then I add my player id which will be added to the endpoint URL. Press Discover.

Screen Shot 2018-08-29 at 12.36.29

Under the data tab, we can see the returned information from the service. Press the data profile tab.

Screen Shot 2018-08-27 at 22.52.03

Under the data profile tab, we can see what the type etc the service is returning. Press the create web source button.

So now we have our web service module ready, time for the next step.

  • Build an interactive report with the web module as a source

Start with creating a new page in your application. Choose “report” and then Choose “Interactive Report”.

Screen Shot 2018-08-28 at 22.46.55

Give the page a proper name. Press Next. A new window pops-up. Choose “Do not associate this page with a navigation menu entry”. Press Next.

Screen Shot 2018-08-28 at 22.50.52.png

Here we choose web source as the data source and GetPlayer as the web source module. APEX immediately connects to the service and let us choose what we want to display in our interactive report. I’m choosing the name, level, rarity, icon, and description for my report. Press create.

Screen Shot 2018-08-28 at 22.32.58.png

Here I can see that my player id is defined as a static parameter which is all good for this demo. Press create. Apex opens up to the page designer.

Screen Shot 2018-08-28 at 22.35.15

Since I’m having icons I need to add the HTML image tag so it displays correctly. Under column formatting, add “img src=”#ICON#” width=”60″ height=”60″.

Now it’s time to run the page and see the final result.

Screen Shot 2018-08-28 at 22.58.40.png

Now we can see my deck. We also have the awesome possibility to use the default interactive report functionality.

Have fun with APEX’s web source module functionality!