GameCourse

Technology

• Server:
  Environment: PHP 7.3.21 and Python 3.7.3
  You will need a server running PHP 7.3.21 version and a composer (dependency manager).
  For example, you can use XAMPP. Guides here.

• Database:
  Environment: MySQL
  You will need a MySQL Database.
  For example, you can use phpMyAdmin for database management. Guides here.

• Frontend:
  Environment: Angular 13
  You will need to install npm (dependency manager), NodeJS, and Angular CLI.

Setup GameCourse - Localhost

This is a setup guide to run the project on your machine.

• Backend:
  

  1. Copy the configuration file template (api/inc/config.template.ts) and rename it to config.php. Update its configuration variables.
  2. In file api/modules/composer.json add the following lines:
     

       {
        "autoload": {
          "psr-4": {
            "GameCourse\\Views\\Dictionary\\": [
              "Awards/dictionary",
              "Badges/dictionary",
              "Skills/dictionary",
              "Streaks/dictionary",
              "VirtualCurrency/dictionary",
              "XPLevels/dictionary"
            ],
            "API\\": [
              "GoogleSheets/controllers",
              "Profiling/controllers",
              "ProgressReport/controllers",
              "QR/controllers",
              "Skills/controllers",
              "VirtualCurrency/controllers"
            ]
          }
        }
      }
     

  3. Install all dependencies by running: composer install
  4. Create Fénix app, if necessary (guides here), and update configuration information from api/inc/config.php

• Frontend:
  

  1. Copy the configuration file template (frontend/src/environments/config.template.ts) and rename it to config.ts. Update its configuration variables.
  2. Install all dependencies by running: npm install
  3. Run Angular CLI server by running: ng serve
  4. Access http://localhost:4200/ and you will see GameCourse!

Setup GameCourse - Production

If this project has not been set up in Google Cloud, jump to section Setup Google Cloud first.

• Frontend:
  

  1. Change API Endpoint (frontend/src/environments/config.ts)
  2. Change baseHref, e.g. /gamecourse/ (frontend/angular.json)
  3. Build project for production by running: npm run-script build:prod
  4. Transfer everything in /dist/gamecourse/ to server

• Backend:
  

  1. Change configuration variables (api/inc/config.php & api/modules/composer.json)
  2. Create Fénix app, if necessary (guides here), and update configuration information from api/inc/config.php
  3. Transfer files (ignore folders legacy, cache, logs, and test, vendor, as well as unnecessary files)
  4. Go to api folder (command cd /var/www/html/<folder_name>) and install dependencies by running: sudo -u www-data composer install
  5. Change directory permissions to www-data: sudo chown -R www-data:www-data /var/www/html/<folder_name>
  6. Create database
  7. Delete file api/setup/setup.done if exists

After all of these steps, you should be able to access https://pcm.rnl.ulisboa.pt/project-name and set up the rest of GameCourse through the website (change "project-name" with the corresponding name).

Additional Guides

Useful Software & Tools

• XAMPP:
  XAMPP is a PHP development environment. It is a completely free, easy-to-install Apache distribution containing MariaDB, PHP, and Perl. See more here.
  
  How to Install?

  • Download the latest version of XAMPP for PHP 7.3 (version 7.3.21) here.

  • Click on the installer and follow the installation wizard.

    • Select components: You must install Apache, MySQL, and PHP. The rest of the components are up to you, but phpMyAdmin is also useful for database management (more here).

  • Change MySQL server charset

    • Click on MySQL Config > my.ini in the Control Panel. This will open my.ini file.

    • Edit UTF 8 Settings: character_set_server=utf8mb4

      

  • (Optional): By default, XAMPP will serve documents in the /xampp/htdocs directory. If you want to change your Apache root directory, click the Apache Config > Apache (httpd.conf) in the Control Panel and adjust the entries for the DocumentRoot and the corresponding Directory entry.

    

  How to use it?

  • Once installed, you can go ahead and run XAMPP. This will open the XAMPP Control Panel which is where you will turn on/off your Apache and MySQL server.
  • (Optional) You can use phpMyAdmin for database management (more here).
  • (Optional) You can use XAMPP to run Python (guides here).

• phpMyAdmin:
  phpMyAdmin allows you to easily manage your databases using a Graphical User Interface instead of executing multiple SQL commands (though you can still do this as well). See more here.

  How to Install?
  You probably already installed it while setting up XAMPP. If not, go back and add it to your XAMPP components list - guides here.
  If you only want to update your phpMyAdmin version inside your XAMPP installation, follow this guide.

  Connecting to remote databases:
  It might be useful to have access to GameCourse's databases and Moodle's databases directly on phpMyAdmin. You can always connect to them via Terminal, but having a Graphical User Interface can be beneficial and easier to work with.

  • Open file /xampp/phpMyAdmin/config.inc.php
  • Add new servers you wish to connect to before "End of servers configuration"
  • Connect to GameCourse database:
    • Create a tunnel using Putty to a new port, 13306 for example
    • Increment your server counter and add configuration information for GameCourse's database
  • Connect to Moodle database:
    • Create a tunnel using Putty to a new port, 23306 for example
    • Increment your server counter and add configuration for Moodle's database

• NodeJS & Angular:
  

  • To install dependencies in project use: npm install
  • To run server use: ng serve

• WinSCP:
  Is a free and open-source SSH File Transfer Protocol (SFTP), File Transfer Protocol (FTP), WebDAV, Amazon S3, and secure copy protocol (SCP) client for Microsoft Windows.

  • Downloading: You can obtain WinsSCP from the WinSCP download page. Follow the Installation package link.

  • Installing: Follow guides (here)[https://winscp.net/eng/docs/guide_install].

    You can also use PuTTY to complement WinSCP. PuTTY is a terminal emulator that provides a command-line interface to connect to remote servers. Follow this guide for more.

• Python:
  This is a guide to setting up Python as a server-side scripting language on your XAMPP installation for Windows Operating System. This was based off this guide (which also includes installation for MacOS).

  • Install Python:
    To begin, check if you have python already installed. Use the following command in your Command Prompt (Windows): py --version
    

    If the command outputs a version number, then Python is installed on your computer. Otherwise, you can download the Python installer here.

  • Add Python to XAMPP's Apache:
    Open the XAMPP Control Panel and click on Config > Apache (httpd.conf)
    

  • Add support for .py files:
    Once httpd.conf is open (you can open it with any text editor, such as Notepad), add the following lines at the end of the file:
    

    AddHandler cgi-script .py
    ScriptInterpreterSource Registry-Strict
    

    (Optional) If you want XAMPP to automatically load index.py when a directory is accessed, find the following section in httpd.conf and add the highlighted portion below:
    

    <IfModule dir_module>
      DirectoryIndex index.php index.pl index.cgi index.asp index.shtml index.html index.htm index.py \
                     default.php default.pl default.cgi default.asp default.shtml default.html default.htm default.py \
                     home.php home.pl home.cgi home.asp home.shtml home.html home.htm home.py
    </IfModule>
    

    This will cause index.py, default.py or home.py to be among the candidates to be loaded when a directory is accessed.

• Running your Python file:
  To test if your setup works, you can copy the following file into the htdocs folder of your XAMPP installation. Note that you will have to replace the first line with the path to Python.
  

  #!C:\Program Files\Python39\python.exe
  print("Content-Type: text/html\n\n")
  
  print("Hello world! Python works!")
  

  The first two lines need to be included for Python file to work. The first line tells Apache which program to run to interpret the file, while the second line outputs the file as a webpage.
  If you don't know where Python is installed, in your computer go to Start, search for Python, the Right-click > Open file location.
  With the file in htdocs, turn on Apache in XAMPP and you should be able to run the file by accessing http://localhost/python.py. Make sure to restart Apache on XAMPP before doing any testing. This is so that the changes made to httpd.conf will apply.

• Importing Python as PIP packages:
  If you are looking to utilize additional packages from Python PIP, you'll need to add some additional lines of code on your Python script(s):
  

  import sys
  sys.path.append("[YOUR PACKAGES FOLDER]")
  

  You will need to replace [YOUR PACKAGES FOLDER] above with the place where your package(s) were installed. If you don't know where it is, open Command Prompt and type the following:
  pip show [YOUR PACKAGE NAME]

Create your own Fénix application

If you don't already have a Fénix app for GameCourse, follow these steps:

• Go to Personal > External Applications > Manage Applications (this last tab appears as API Terms, if no app was created previously).
• Click on Create to create a FenixEdu application
  • Define Site with the desired website URL where GameCourse will run, for example, http://localhost/gamecourse/auth/ if running it locally.
  • Define Redirect Url as /auth/, for example, http://localhost/gamecourse/auth/ if running it locally.
  • In Scope, select "Information".
• After its creation, it will appear in the application list. In Edit, we have access to the Client Id and the Client secret, which will be used in the next step.
• Go to api/inc/config.php:
  • Set FENIX_CLIENT_ID to the Client ID.
  • Set FENIX_CLIENT_SECRET_ to the Client Secret.
  • Set FENIX_REDIRECT_URL to what was set in the Fénix application.

Setup Google Cloud

If the project hasn't been set up in Google Cloud console, it should be added:

• Access Google Cloud with gamecourse credentials.

• Got to "console".
  
  

• Once there, select the "Credentials" tab inside "APIs & Services".
  
  

• Click on "Create credentials" and select the option "OAuth client ID".
  
  

• Add configuration:
  

  • Application type: Web application
    
  • Name: (Desired name - try to make it simple and specific!) E.g.: gamecourse (testing env)
    
  • Authorized redirect URIs: Add your paths according to your config.php file
    <API_URL>/modules/GoogleSheets/scripts/auth.php
<API_URL>/auth?google
    
    The end results should look similar to:
    
    

• Once created, a small window will appear with clientID and secret:
  

  • Download the JSON file, which will be later needed to enable modules and get them up and running such as GoogleSheets.
    
  • Copy client ID and client secret and paste them on the config.php file, in the "Google Auth" section.