A 5-Step Tutorial on Clash of Clans API
Clash of Clans is an online strategy game for mobile, developed by the game company Supercell. Well if you have no idea how this game is played, in brief, a Clasher has a village and an army. The Clasher can unlock and upgrade buildings, defenses, and army units. Clashers attack each other’s villages in multiplayer battles, form clans together, participate in wars against other clans, and lead their clans to victory.
In 2016, Supercell has made the Clash of Clans API publicly available, opening the doors for a new clash experience. Clash of Clans API is a secure and reliable way to access game data, such as the information of a player or a clan, in real-time. The API made it easy and possible to develop some amazing game integrating tools.
Here are two of the best and most popular tools that use Clash of Clans API:
A website that is used to track and compare the statistics of players and clans including progress logs, war logs, and much more.
A website assistant for an app called Discord, a gaming communication tool. It is essentially used for war organization, researching new clan recruits, receiving upgrade recommendations, and much more.
Now, how did these people manage to create those outstanding websites and get their hands-on players’ and clans’ data? Well that is exactly why you are here.
What to expect from this tutorial?
You will learn how to create a web page that fetches and displays the basic info of a clan (whatever clan) along with a list of its’ players via the game’s API. The tutorial is based on this forum: https://forum.supercell.com/showthread.php/1217796-Clash-of-Clans-API-a-tutorial with a few changes.
Prerequisites:
- Download and install XAMPP.
- Download and install Sublime Text 3 (or any text editor/IDE).
- Knowledge in HTML, PHP and CSS (not necessarily if you’re copying the source code, though if you want to learn more check this free amazing website out).
Steps:
1- Go to: https://developer.clashofclans.com/ and register for a developer account.
2- Login to your account, and from “My Account” set up a new key:
You can freely name your key and write a suitable description to help you in the future. In the “ALLOWED IP ADDRESSES” field, enter your IPv4 address (just go to https://whatismyipaddress.com/ if you want to know your IPv4 address). You can learn more about the API in the documentation page.
Key related info are as follows (hang in there, we will need our key token in a moment):
3- In Sublime Text 3(or any text editor/IDE you’re using) write the following code (no worries I will explain it in a minute):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<?php
$clantag = "<CLANTAG>";$token = "<TOKEN>";$url = "https://api.clashofclans.com/v1/clans/" . urlencode($clantag);$ch = curl_init($url);$headr = array();
$headr[] = "Accept: application/json";
$headr[] = "Authorization: Bearer ".$token;curl_setopt($ch, CURLOPT_HTTPHEADER, $headr);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);$res = curl_exec($ch);
$data = json_decode($res, true);
curl_close($ch);if (isset($data["reason"])) {
$errormsg = true;
}$members = $data["memberList"];?>
<title><?php echo $data["name"]; ?></title><style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
border-collapse: collapse;
width: 100%;
border-radius: 10px;
border-color: transparent;
}
table.memberstable tr td {
border-radius: 5px;
border-color: transparent;
}
th, td {
text-align: left;
padding: 8px;
}
table.clantable {
border-collapse: separate;
border-spacing: 0px;
width:100%;
}
table.clantable tr td {
background-color: #aaa;
}
table.clantable tr:first-child td:nth-child(3n+1) {
padding: 10px 20px;
vertical-align: top;
}
table.clantable tr:first-child td:first-child {
text-align: center;
}
/*table.clantable tr:first-child td:last-child {
width: 20em;
}*/
tr:hover {background-color: #f5f5f5;}
table.clantable tr:first-child td:nth-child(2) {
color: #e3cfb5;
font-size: 2em;
font-weight: bold;
text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000 ;
padding-top: 5px;
white-space: nowrap;
text-align: left;
padding-right: 50px;
vertical-align: bottom;
}
table.clantable tr:first-child td:nth-child(3) {
color: #4c4c4c;
font-size: 1em;
font-weight: bold;
padding-top: 5px;
white-space: nowrap;
text-align: right;
padding-left: 50px;
vertical-align: bottom;
}
table.clantable tr:nth-child(1n+2) td {
border-bottom: solid #000 1px;
color: #fff;
font-size: 1em;
font-weight: bold;
text-shadow: 1px 1px 0px #000;
padding-top: 5px;
white-space: nowrap;
}
table.clantable tr:nth-child(1n+2) td:first-child {
text-align: left;
padding-right: 50px;
}
table.clantable tr:nth-child(1n+2) td:last-child {
text-align: right;
padding-left: 50px;
}
table.clantable tr:first-child > td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
table.clantable tr:first-child > td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
table.clantable .clanlevel {
color: #fff;
font-size: 1em;
font-weight: bold;
background-color: #000;
padding: 3px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<?php
if (isset($errormsg)) {
echo "<p>", "Failed: ", $data["reason"], " : ", isset($data["message"]) ? $data["message"] : "", "</p></body></html>";
exit;
}
?>
<table class="clantable">
<tr>
<td rowspan="11"><br/><img src="<?php echo $data["badgeUrls"]["medium"]; ?>" alt="<?php echo $data["name"]; ?>"/></td>
<td><?php echo $data["name"]; ?></td><td><?php echo $data["tag"]; ?></td>
<td rowspan="11"><?php echo $data["description"]; ?></td>
</tr>
<tr>
<td>Total points</td><td><?php echo $data["clanPoints"]; ?></td>
</tr>
<tr>
<td>Wars won</td><td><?php echo $data["warWins"]; ?></td>
</tr>
<tr>
<td>War win streak</td><td><?php echo $data["warWinStreak"]; ?></td>
</tr>
<!-- <tr>
<td>Wars drawn</td><td><?php echo $data["warTies"]; ?></td>
</tr>
<tr>
<td>Wars lost</td><td><?php echo $data["warLosses"]; ?></td>
</tr> -->
<tr>
<td>Members</td><td><?php echo $data["members"]; ?>/50</td>
</tr>
<tr>
<td>Type</td><td><?php echo $data["type"]; ?></td>
</tr>
<tr>
<td>Required trophies</td><td><?php echo $data["requiredTrophies"]; ?></td>
</tr>
<tr>
<td>War frequency</td><td><?php echo $data["warFrequency"]; ?></td>
</tr>
<tr>
<td>Clan location</td><td><?php echo $data["location"]["name"]; ?></td>
</tr>
</table>
<table class="memberstable" border="1">
<?php
foreach ($members as $member) {
?>
<tr>
<td style="width: 1cm;"><?php echo $member["clanRank"];?></td>
<td style="width: 1cm;"><img src="<?php echo $member["league"]["iconUrls"]["tiny"]; ?>" alt="<?php echo $member["league"]["name"]; ?>"/></td>
<td style="color: grey;"><?php echo $member["expLevel"]; ?></td>
<td><?php echo "<b>", $member["name"], "</b><br/><span style='color: grey;'>", $member["role"], "</span>"; ?></td>
<td style="color: grey;"><span style="color: black;">Donated:</span><br/><?php echo $member["donations"]; ?></td>
<td style="color: grey;"><span style="color: black;">Received:</span><br/><?php echo $member["donationsReceived"]; ?></td>
<td style="color: grey;"><span style="color: black;">Trophies:</span><br><?php echo $member["trophies"]; ?></td>
</tr>
<?php
}
?>
</table>
</body>
</html>
In the PHP code section starting with the <?php tag, all you have to change is <CLANTAG> and <TOKEN>. Replace the tag of the clan you want to fetch the information of with <CLANTAG>. Copy your token from key info, and replace it with <TOKEN> in your code.
The clan I want to fetch the info of has the tag #GCPPGY8, and my token was shown in the previous screenshot, so my code will look like this:
...$clantag = "#GCPPGY8";$token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiIsImtpZCI6IjI4YTMxOGY3LTAwMDAtYTFlYi03ZmExLTJjNzQzM2M2Y2NhNSJ9.eyJpc3MiOiJzdXBlcmNlbGwiLCJhdWQiOiJzdXBlcmNlbGw6Z2FtZWFwaSIsImp0aSI6IjgxYThhOGVkLTliZjQtNDJkYS05MDdhLTk1ZDk2Y2RkZWMwMyIsImlhdCI6MTU2NTQ3OTM2Nywic3ViIjoiZGV2ZWxvcGVyL2FiZGQwZmM2LTQ3ODktNzhmOC1iZmVhLTVkMWZjMTBiZWQ0YSIsInNjb3BlcyI6WyJjbGFzaCJdLCJsaW1pdHMiOlt7InRpZXIiOiJkZXZlbG9wZXIvc2lsdmVyIiwidHlwZSI6InRocm90dGxpbmcifSx7ImNpZHJzIjpbIjM3LjM4LjIyMC4zMiJdLCJ0eXBlIjoiY2xpZW50In1dfQ.4Z8vPQr6m19yl-4ljDT_GYSZ9kahRZD2xhfClZojnW7imD9siEDGkrb3YdRetgNmQHeIEvQ6YhQxTxHxWAuMMQ";...
Learn more about PHP here.
In the HTML <style> section, some CSS was written for the web page to look nice. Learn more about CSS here. You can also mess with the colors and styles all you want and see how it turns out.
In the HTML <body> section, two HTML tables were instantiated to organize the fetched data. The first table is to display the clan header data including clan emblem, name, tag, clan information, and description. The second table is to arrange the clan players list. It displays clan players data including their clan ranking, name, and donations. Learn more about HTML tables here.
4- Create a new folder in your xampp/htdocs directory and save your code as a .php file in that folder.
I named my code file index.php, and the directory is C:/xampp/htdocs in my case, so things for me look like this:
5- Finally, launch XAMPP, and start Apache server:
Then enter your browser and write the URL of your .php file. The URL in my case is localhost/ClashofClansTuto/index.php, more generally, in your case is localhost/YourFolderName/YourCodeFile.php.
And that’s it. You’ve made it!!
Now what?
Now, that you have understood the basic concept of Clash of Clans API, and possibly HTML, PHP or CSS, why don’t you start messing with the code and see what you can build? Learn more at Clash of Clans API website documentation page. And later on, you might as well would want to learn and mess with other APIs and link them to Clash of Clans API to create some awesome tools.
