‘How I Developed a League of Legends App’: Improving LoL’s Experience With Flutter

There’s nothing like learning new technologies with the right motivation! Daniel Pinheiro brought his gamer and dev skills to a whole new level by developing a Flutter application from scratch, that will catch the eye of every League of Legends fan! Here’s what it took him to develop such a clever solution:

Context

If you play video-games you will certainly know League of Legends, and some of you may know the auto chess mode Teamfight Tactics.

The goal in this game mode is to build the best team possible from a list of random characters and items in each round of the game.

This goal is simple but due to the randomness of the game it will require you to adapt to what the game offers you.

Problem

While playing the game you will notice that there are more opportunities to pick champions than items, so you need to be careful while picking them and be sure to know what you need in each round is key to win more matches. 

 

Thinking about solutions

So what could help us keep track of what items we need for each match? 

At first, a simple pen and paper with a structured checklist would solve this problem, but due to the regular changes on teams and strategies of the game on each update, that structure would change many times, and we would also waste a lot of paper. 

Besides that, beginners struggle to match the item names with the image of the item, and having a way to visually match the checklist item to the image in-game would be more intuitive.

The app

So developing an app looked like a good idea, enabling us to:

• Easily create and update checklist of items;
• Easily reset the checklist after a game;
• Easily match the image of the item with the ones found in-game.

Besides that it would give me a chance to have a project to practice some new technologies.

Technologies

With the goals all structured out, we just need to select the technologies for this project:

 

Front-End

First of all we have Flutter, which is a development framework created by Google.

This will be our main technology to develop the android mobile application, this was my option because it would allow us to deploy this project on other systems in the future, such as, IOS, Windows, Web, MacOS and Linux.

Back-End

For the Back-End API I decided to use Golang, which is a language developed at Google.

The project could be developed without an API, but I decided to take this opportunity to develop an API using Golang. Alongside it, I used the MariaDB database since it is a database I am comfortable using and I didn’t want to try something new in this regard.

Choosing to develop this API would also allow the user to access his teams using other platforms, because the information will be stored on the server instead of only the local device.

System architecture

Since I wanted to make this application available online, I would also need to have a server to deploy the API, and for this we need software to deploy and maintain the API to make sure it is safe and available.

 

To maintained this API I needed additional systems such as:

• Docker, to enable us to set each part of the architecture in containers, improving the deployment of the project in local and remote environments;
• Redis, mainly responsible for saving the user sessions and deleting them after a certain amount of time;
• Grafana + Loki + Promtail, to gather the logs of each element of the project into a single interface, to easily debug and find problem on the project;
• Nginx, responsible for routing the requests made to the server to the project and protecting it from unwanted requests;
• Let’s Encrypt / CertBot, enabling us to create SSL certificates for free to enable HTTPS connections to the project.

Development analyses

The development of this application started with the API, creating all the routes necessary to feed information to the application such as the items, champions and teams.

After creating the necessary routes, I started the Flutter application, creating the screens to list and create teams, and the main feature checklist of items.

Having all this developed, we reached the point of having the first prototype of the application. HURRAY

But there was a catch, at this moment any user with the app has access to all the teams that are on the database, this isn’t a good idea because everyone could edit and delete teams from other users. To avoid this we added a user login logic, and restricted the teams the user could see to only the ones that he created.

Ready for use. Chu Chu!!!

Finally we have the android application and API developed with containers ready to be deployed to a server and be available for everyone with an Android device and the installation file (APK) to test.

Conclusions

Developing this application was a great opportunity to increase my knowledge on Flutter, Golang and the other technologies necessary to bring this project to life. 

I believe the main takeaway, and advice I can give, is to recommend developers to have on their personnel portfolio projects that gather many technologies together, that can be used almost as a sandbox to try new features, new technologies, and gain more experience, since you have all the freedom to change, break and fix every single part of the project freely.

 

So good luck, and have fun 🙂

A training initiative can help your team stay motivated and focused! Learn more about it on our previous blog post![/[/[/