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!
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
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.
Here you chose Web Source Module. A new window pops-up. Press the create button. The following window appears
We choose from scratch. Press Next
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.
Fill in the Base URL and the service endpoint. Press Next.
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.
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.
Under the data tab, we can see the returned information from the service. Press the data profile tab.
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”.
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.
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.
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.
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.
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!