Web Team Interface Implementation
Prior to Version 9.7, PC² provided support for teams to use a browser to access the PC2 server via a project called EWTeam. The EWTeam project comprised a large set of PHP pages which could be installed into an (existing) webserver and which gave access to a running PC² server using a separate component called the JavaBridge. Installing and running the EWTeam required administrator access to the existing webserver along with multiple configuration/setup steps.
Since Version 9.7, PC² includes a component called the Web Team Interface (WTI) which is a replacement for the EWTeam project. The WTI includes a self-contained webserver which can be started with a single command, requires no management or access rights to a separate webserver, and requires no special configuration (although user configuration for changing certain defaults is supported). The WTI project is also sometimes referred to as the “WebTeamClient”.
The WTI project was developed by a team of students from Eastern Washington University (EWU) consisting of Josie Isaacson, Andrew Combs, Ethan Holman, and Danielle Frodge. Both the EWTeam and WTI projects were done under the supervision of Professor Tom Capaul at EWU. The WTI project was ported into the Eclipse and pc2v9 GitHub environments by John Clevenger.
Instructions for installing and using the PC² Web Team Interface are given at Web Access. The current page focuses on the WTI implementation details.
The WTI project consists of two components, each of which is stored as a separate Java Project in the PC2v9 code base. One project houses the "front-end UI" code which runs in the web browser, while the other houses the "back-end API" code which serves pages to the web browser and interfaces with the rest of the PC² system (specifically, with the PC2 Server). The WTI project was composed into two projects like this in order to facilitate easy replacement of the front-end code while retaining the back-end API unchanged.
The first Java Project comprising the WTI is named WTI-UI. This project houses the front-end web UI, which was developed as a single page application using Angular 7 and was upgraded in PC² Version 9.9 to use Angular 16. The project contains not only the Angular front-end UI code but also a collection of Angular modules for stand-alone testing of WTI-UI.
The second Java Project comprising the WTI is named WTI-API. This project houses the back-end API module which interfaces with the PC2v9 system. The WTI-API project includes a Swagger/OpenAPI API specification which is accessed by the front-end. The WTI-API project also includes a self-contained Jetty webserver which serves web pages (via the Swagger API) to the front-end and invokes back-end code to access the PC2 Server.
Both WTI projects (WTI-UI and WTI-API) are housed under the projects directory of the pc2v9 project.
The front-end (WTI-UI) code communicates with the backend (WTI-API) primarily through the Swagger/OpenAPI interface via HTTP requests. The back-end Jetty services invoked by these HTTP requests in turn invoke methods in the standard PC2v9 API. Taken together, this means that using the WTI project involves starting a Jetty server which serves web pages to browser connections from teams, forwarding team requests via the PC2v9 API to a PC2 Server (which must also be started) and returning responses from the PC2 Server (again via the PC2v9 API) to teams’ browser sessions.
In WTI terminology, the Jetty server is referred to as the web team server.
The web team server listens for browser connections on a port defined in the [server] section of the pc2v9.ini file located in the web team server startup folder. Editing the wtiport= entry in that file will change the port on which the WTI web team server listens for team browser connections (the default port is 8080).
The web team server communicates with the PC² server using the IP address and port number for the PC² server specified in the [client] section of the same pc2v9.ini file in the web team server startup directory (the default is localhost:50002).
In addition to HTTP requests made on the web team server by the WTI-UI front-end, the WTI-UI front-end and WTI-API back-end communicate with each other via messages passed through websockets. Notifications of run (submission) results and responses to clarification requests are examples of messages passed via websockets.
The complete WTI system can be rebuilt by running the Ant file buildWTI.xml located in the WTI-API project folder. This Ant file builds both the WTI-API component and the WTI-UI component. The build file is OS-aware and should run correctly on either a Windows system or a Unix-based system (including Linux and MacOSX).
The WTI-API and WTI-UI projects are both automatically built whenever the overall PC2v9 project is built. That is, running pc2v9/build.xml (or pc2v9/package.xml, which invokes pc2v9/build.xml) automatically also runs the packageWTI.xml Ant file, which in turn invokes buildWTI.xml, which builds both the WTI-API and WTI-UI projects. (packageWTI.xml subsequently also creates .zip and .tar.gz files containing the complete WTI project; these archive files are then inserted into the packaged pc2v9 distribution by pc2v9/package.xml.)
The details of the buildWTI.xml and packageWTI.xml Ant files are described at the WTI Build/Package Details wiki page.
In WTI terminology, the Jetty server is referred to as the web team server. The command to start it is
java –Djdk.crypto.KeyAgreement.legacyKDF=true –jar WebteamInterface-1.1.jar
This command must be entered in the folder where the WTI project is unzipped. The command is also embedded in a script named pc2webteamserver in the pc2v9/bin folder (the same folder where other standard PC² scripts reside). Both Windows- and Unix-based versions of the script are provided in pc2v9/bin. Thus, to start the WTI web team server (after unzipping it) it suffices to simply type the command ./bin/pc2webteamserver in the PC2 home directory.
Details of the WTI-UI project implementation can be found at WTI-UI Project Implementation Details.
Details of the WTI-API project implementation can be found at WTI-API Project Implementation Details.
