Exploring Riot Games® API

Week 4 : Post (2/21/2017)

Framework 1: Establishing Communication

Framework 2: Angular Formatting

Integrating the Riot Games® API: Part 1

Integrating the Riot Games® API: Part 2

At this point, the “summoner.php” should have all the references that you would like to use on your personal website defined and prototyped. 

Now is the time to tie together the “summoner.js” and “summoner.html” files.

On top is HTML code that is formatting and displaying the values acquired from the JavaScript code on the bottom, utilizing the summoner class.

Now it is time to start creating the framework for which angular can utilize the API calls with our website.

In the example project, the “summoner” entity (class) was created to fulfill this need.

A “.html”, “.js” and “.php” file were created as means to facilitate communication between Riot Games® API calls, JavaScript and HTML.

The “.php” (Hypertext Preprocessor) contains the routing (pairing) of the Riot Games® API calls into our HTML via JS.

So now that some of the workings behind how a website operates is understood, let’s see how everything ties together with the Riot Games® API.

First off, it’s important to acquire and reference the Riot Games® API.

Also, having a valid API Key is vital to anything related towards using the Riot Games® API. Calls made to the server without a valid API Key will most likely be ignored or denied.

Notice how there are always at least two file extensions in each module:

“.js” and “.html”

Within the “.js” files there are means to bind content (js = Controller) and depict it (html = View) via angular through definitions: module, config, and controller.

Each is used as a means of instructing Angular on how to handle information and modules into the HTML via binding, dynamically.

“The scope is an object with the available properties and methods. The scope is available for both the view and the controller.”

So I found it quite important to cover just exactly how my modules are communicating without establishing any tight coupling/dependencies. 

Each module in my web app is declared within my “app.js” file (parent file) via the function call: angular.module(), which routes access to the rest of my applications declared data -> home, summoner, and version.

Week 3 : Post (2/16/2017) 

Execution: Getting Started Part 1

Execution: Getting Started Part 2

Execution: Getting Started Part 3

Execution: Getting Started Part 4

Following the video guide, I have successfully created and hosted (locally) my first website.

Here is the code behind the homepage.

And here’s the result:

The last important thing to talk about is how my modules are being managed.

“Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.”

My project website is being managed by Bower and it is incredibly useful. It helps Bootstrap and AngularJS communicate with one another as well as tie together my ability to develop and integrate both seamlessly into my website.

Here is a sample of code of Bower handling AngularJS

The project made available emphasizes the use of two important structural frameworks: Bootstrap

and AngularJS

These frameworks provide dynamism in the website’s appearance and functionality and accomplish a great deal of the legwork that most professional websites utilize.

These are referenced and accessed withing the index.html file of a host such as seen below (Check “stylesheet”).

At this point I have a “localhost” server that is on my PC, which allows me to modify a website’s appearance and functionality without having any impact on what users experience. Essentially, it is the perfect environment for web-developers to experiment without the worry that their unwanted changes will be made public.

http://localhost/home can be used to see the website as a non-developer would.

In order to apply the API we are going to need a good developmental environment that supports HTML 5 such as Rails.

After a bit of research I found that using a local host SP such as XAMPP is the perfect place to start developing a website that can fully utilize the Riot Games® API.

XAMPP is an open source PHP (Hypertext Preprocessor) development environment which supports Apache and MySQL among other modules.

Week 3 : Post (2/14/2017)

API 6.1: summoner, tournament-provider

API 6.2: summoner, tournament-provider

API 6.3: summoner, tournament-provider

API 6.4: summoner, tournament-provider

The last two calls are two fundamental calls in the actual creation/registration of a League of Legend’s tournament. These two calls are:

/tournament/public/v1/provider

and

/tournament/public/v1/tournament

/tournament/public/v1/provider is essentially establishing the hosting structure/entity that will be responsible (the face of) a given tournament.

It takes a “region” and a “url”

The next call is the only Mutator currently openly accessible via the Riot Games® API.

/tournament/public/v1/code/{tournamentCode} : Updates the pick type, map, spectator type, or allowed summoners for a code.

Similar to the /tournament/public/v1/code , this call utilizes input parameters to augment/update tournament information.

Up next is the /tournament/public/v1/code/{tournamentCode} call that accesses a given tournaments details via a tournament code generated by the /tournament/public/v1/code  call.

It returns a TournamentCodeDTO,  which contains the aforementioned.

At last, the final bit of formal documentation for the Riot Games® API.

The tournament-provider section of the API is the first section with functions other than Accessors.

The /tournament/public/v1/code is a call that creates a tournament code for a given hosted tournament. It has 6 Parameters: