Dota 2 App using Firebase and Google Cloud

This is a pet project that born with the idea of having a nice subject to go through some Live Coding sessions. We are getting data from DotaBuff website to have more info about the heroes and latest matches.

That info is going to be used on different frontends to build different features, some of them are :

• Show which heroes are good/bad against a given hero.
• Show a rank of best heroes
• Build both match teams and get recommendations while heroes are being picked.

Here you can see some screenshots of the mobile app, available on this repository, built with Flutter:

Also we built a Voice integration that will allow users to access some of those same features from the app. The voice integration was built using Dialogflow and the agent data can be found on the dialogflow folder and the HTTP fullfilment is inside the functions folder.

Here you can a demo of the Voice integration (PT-BR)

The live codings session happens in Portuguese (PT-BR) and you can follow on my Youtube/Twitch channels.

• Alvaro Viebrantz on Youtube
• Alvaro Viebrantz on Twitch

Outstanding External Collaborators

• @omurilo Created a version of the mobile using React Native - Link

Table of Contents

• Getting Started
  • Node Setup
  • Firebase Setup
  • Google Cloud Setup
  • Flutter Setup
  • Building & Running
  • Dialogflow Setup
• Project Structure
  • Cloud Function - functions folder
    • scheduledFetchDotaBuffHeroes : Scheduled PubSub handler that fetch all dota heroes and queue them up to be processed by fetchDotaBuffHeroById.
    • fetchDotaBuffHeroById: PubSub consumer that fetchs a given Dota hero data from DotaBuff and save data on Firebase.
    • dialogflowFirebaseFulfillment: Handle Dialogflow/Google Assistant Interaction
  • Go API - go-api folder
    • Hero Recommendation API.
    • We separated all the logic to recommend heroes to pick depending on the heroes that the enemy got and what you team already picked. We use two methods :
      • Intersection between all heroes that are good against the enemies heroes
      • Top heroes by sorted by advantage against all heroes picked by the enemies
    • API Always return at least 3 recommended heroes.
  • Flutter App - flutter_dota_app folder
    • Mobile App build with Flutter
  • Dialogflow Agent - dialogflow folder
    • All intents and entities used to build the voice integration.

Getting Started

Node Setup

• Install the latest LTS version of Node.js (which includes npm). An easy way to do so is with nvm. (Mac and Linux: here, Windows: here)

nvm install --lts

Firebase Setup

• Install the Firebase CLI via npm. The following command enables the globally available firebase command:

npm install -g firebase-tools

• After installing the CLI, you must authenticate. Then you can confirm authentication by listing your Firebase projects. Sign into Firebase using your Google account by running the following command:

firebase login

• Test that the CLI is properly installed and accessing your account by listing your Firebase projects. Run the following command:

firebase projects:list

• Test that the CLI is properly installed and accessing your account by listing your Firebase projects. Run the following command:

firebase projects:list

Google Cloud Tools and Project

• Install gcloud CLI
• Authenticate with Google Cloud:
  • gcloud auth login
• Create cloud project — choose your unique project name:
  • gcloud projects create YOUR_PROJECT_NAME
• Set current project
  • gcloud config set project YOUR_PROJECT_NAME
• Set current project
  • firebase use YOUR_PROJECT_NAME

Flutter Setup

• Follow the guide on their website.
• Run the following command to make sure it's all good.

flutter doctor

Building & Running the project

• Make sure you have the latest packages (after you pull): npm install
• Deploy all the function from the functions directory.
  • There are deploy scripts on the package.json file.
• To run the app, run flutter run on the flutter_dota_app folder

Dialogflow Setup

1. Create a Dialogflow Agent.
2. Go to Settings ⚙ > Export and Import > Restore from zip using the dialogflow/DotaAppAgent.zip in this directory.
3. cd to the functions directory
4. Run firebase deploy --only functions:dialogflowFulfillment
5. Back in Dialogflow Console > Fulfullment > Enable Webhook.
   • Paste the URL from the Firebase Console’s Trigger column under the Functions > Dashboard tab into the URL field > Save.