Description

Reference nestjs RESTful API and Angular frontend to demonstrate interaction between a single page web application and H5P using LTI As a Service (LTIAAS).

To do

• eleborate on the LTIAAS consumer setup
• describe steps in LTIAAS in detail
• describe H5P steps in detail
• describe service url webhook events in detail

Prerequisites

• Docker Desktop including docker compose
• LTIAAS portal consumer account and registration
• H5P account and at least one published component (protected / non public)

Before you start

This project requires an LTIAASConnect account and an H5P account (or other LTI-capable learning tool to connect with).

Create an LTIAAS account

1. Login or create an LTIAAS account at https://portal.ltiaas.com/
2. Create a new account by following these instructions: https://ltiaas.com/guides/account-setup
3. Make sure the account is of type "LTIAASConnect" (i.e LTI consumer). If you need help with this, contact support@ltiaas.com

Create an H5P account

1. Login or create an H5P account at https://h5p.org/user/register?destination=welcome-to-the-h5p-community
2. Create a new account by following these instructions: https://h5p.org/getting-started

Initial setup

# clone this repository
git clone https://github.com/LTIaaS/LTIAASConnect-NestJs-Angular-Example.git

# change directory to the repository folder
cd LTIAASConnect-NestJs-Angular-Example

cp -n .env.template .env
# open docker-compose .env file
# you can keep the existing project name or change it to anything you like

cp -n api/reference-api/.env.dist api/reference-api/.env
# open api/.env file
# set the H5P url and all LTI_API values

cp -n frontend/reference-frontend/src/environments/environment.ts.template frontend/reference-frontend/src/environments/environment.ts
# open frontend/reference-frontend/src/environments/environment.ts file
# set both the h5pUrl and h5pId (id of any published content) values

Docker compose

docker compose versus docker-compose

• Docker Compose V2: The command docker compose is part of Docker's newer Compose V2, which is integrated into the Docker CLI. This version offers improved performance and additional features.
• Docker Compose V1: The command docker-compose refers to the older standalone version.

Start Docker containers

# change directory to the repository root folder
# it should contain the docker compose.yaml file
# build the Docker containers
docker compose build
# start all Docker containers in detached mode
docker compose up -d
# frontend
# go to http://localhost:4200
#
# api
# go to http://localhost:3000/health

Optional steps to test the service URL

To test your service URL, you'll need to set up an SSH tunnel. Without it, LTIAAS won't be able to find your local API endpoint. Please note that the temporary URL expires in 60 minutes. Here's what you need to do:

• Run the command to create an SSH tunnel
• You'll receive a temporary URL from Pinggy (example: https://rngxi-82-217-120-55.a.free.pinggy.link/lti/webhook/event)
• Log in to LTIAAS portal, navigate to the API settings, and fill in the temporary URL as your service URL (make sure to add URI /lti/webhook/event)
• Save your changes
• Redeploy your LTIAAS API

ssh -p 443 -o StrictHostKeyChecking=no -o ServerAliveInterval=30 -R0:localhost:3000 a.pinggy.io

# you can test the SSH tunnel by requesting API endpoint/URI health (example URL)
curl https://rngxi-82-217-120-55.a.free.pinggy.link/health

Rebuild docker containers

docker compose build

Restart docker container(s)

docker compose restart [container_name]

Docker containers status

docker compose ps [-a]

Docker container logs

docker compose logs [-f] container_name

Docker containers destroy

docker compose down

Running the api and frontend without Docker compose

You still need to follow the initial setup steps.

Api

cd api/reference-api
npm i
npm audit fix
nest start --watch

Frontend

cd frontend/reference-frontend
npm i
npm audit fix
ng serve

Test server-sent events in the API

# get a JWT token
TOKEN=$(curl -X POST http://localhost:3000/auth/login -H "Content-Type: application/json" -d '{"email":"test@test.nl","password":"test"}' | jq -r '.token') && echo "extracted token: ${TOKEN}"
# use the token ito init server-sent events
curl -X GET "http://localhost:3000/lti/sse/init?token=${TOKEN}"
# open another terminal
TOKEN=$(curl -X POST http://localhost:3000/auth/login -H "Content-Type: application/json" -d '{"email":"test@test.nl","password":"test"}' | jq -r '.token') && echo "extracted token: ${TOKEN}"
# run this command to list all active server-sent events connection user ids
curl -H "Content-Type: application/json" -H "Authorization: Bearer ${TOKEN}" "http://localhost:3000/lti/sse/connections"
# send a message to the connected user
curl -H "Content-Type: application/json" -H "Authorization: Bearer ${TOKEN}" "http://localhost:3000/lti/sse/send-message" -d '{"user_id": 1, "message": "hello world"}'
# check that the message was received in the other terminal