(Due Thursday, February 3rd @ 11:59 PM)
In this lab we are aiming to understand the connection between the front-end and back-end development using a web sockets library. We will also investigate the Model View Controller (MVC) pattern. You will get this lab checked off by your lab section TAs similar to Lab 01.
You can download git here. Follow the onscreen instructions to install it wherever you wish.
Unless you are using WSL2 (see below), you should run all commands listed below inside of git bash.
After installing git, you should be able to launch git bash like any other program, either creating a shortcut on your desktop/toolbar or opening it from your programs menu.
In this class we support the following linux development environments:
Students may choose which computer/OS they would like to use for working on labs and the project. The lab guides are mainly developed for Linux, but Windows is supported as well through Docker. You may use the computers in lab, your own personal machine, department computers via SSH, or Vole3D. If you decide to use any UMN resource, you will need to login with your CSE Lab account. If you need to register for an account or are unsure if your account is still active, click here. A benefit of using U of M machines is your home directory will be synced across any computer you log into. This means you can start working on the assignment from a lab computer in person, then continue working at home via Vole or a department computer. Please note that future labs and projects for this class will have visualizations and graphics, so project development purely over SSH is not recommended.
For additional information about Linux, see https://tutorials.ubuntu.com/tutorial/command-line-for-beginners#2 and/or https://www.tutorialspoint.com/unix/index.htm
We recommend using Docker when developing on your own personal machine. Here are the steps on how to setup docker
On Windows use the "Git Bash" terminal.
bin/build-env.sh
#Usage bin/run-env.sh <port - optional(default 8081)>
bin/run-env.sh
Computer Science courses are setup for github by first establishing a GitHub organization (e.g. umn-csci-3081-s22), as well as a read-only course repository (e.g. shared-upstream). Course materials will be distributed via the read-only repository, which will eventually be merged into the main branch of your repository.
Open your browser and enter the following URL:
https://github.umn.edu/umn-csci-3081-s22/shared-upstream
Take some time and poke around in this repository, especially if you have never seen the GitHub interface before. If you have questions about the interface, search for answers online. DuckDuckGo, Google and other search engines will be your friend during this class. In particular, StackOverflow is a great resource - be careful that not all answers on the site are perfect though.
In Lab 01, we created the front-end HTML / CSS code (the View). In this lab we will provide example javascript code that allows us to talk to a C++ back-end using web sockets. The goal is to first get everything compiled and running. You will use examples in the code both in C++ and Javascript to connect the View with the Model.
First, let's take a look at the C++ code here: https://github.umn.edu/umn-csci-3081-s22/shared-upstream/blob/main/labs/lab02-web-sockets/transit_service.cc
Notice that we have several classes. First, we have the IController class, which allows us to talk to the controller from the model. Second, we have the SimulationModel class, which is the model. Most of our work thought the class will be done within the model's subsystem. Third, we have the TransitService, which is the Web Sockets API (also the "concrete" controller - inheriting from the IController). At this point you do not need to worry about the C++ code or the inheritance structure. For now you can just focus on which subsystem each class represents. Remember that the model talks to the controller, and the controller talks with the view.
For example, look at the ScheduleTrip(...) function in the SimulationModel class. At the end of the function, it sends an event to the view through the controller. Notice also that inside the ReceiveCommand(...) function in the TransitService, the controller calls functions inside the model. If we want to add new communication commands we would edit the ReceiveCommand(...) function.
The web folder contains our view:
To build and run the program follow the steps below in one of the approved development environments (Docker / CSE Lab Machines / VOLE / SSH):
Clone the repository to a local folder using git:
% mkdir -p csci3081
% cd csci3081
% git clone https://github.umn.edu/umn-csci-3081-s22/shared-upstream.git
Change to the lab directory and build using make
% cd shared-upstream/lab/lab02-web-sockets
% make
This will create a build directory and build the application. For now you do not need to worry about what is going on in the Makefile. In future labs we will discuss this in more detail.
From the lab directory, run the program by passing in a port and the web directory to specify the view:
% cd shared-upstream/lab/lab02-web-sockets % build/bin/transit_service 8081 web
Run the view by navigating to http://127.0.0.1:8081
You should see a text box and a button. Type into the box and press the button. Notice that two things happen:
Check Off - If you see the two items above, you can check off this section of the lab.
Now navigate to a different view using the same Transit Service API. Navigate to http://127.0.0.1:8081/schedule.html
This modified view from Lab 01 uses Javascript to interactively schedule trips. You can now enter a name, click on multiple locations on the map, and schedule a trip. Notice that when you schedule a trip a command is run in the back-end. This is called via the api.sendCommand(...) in the view here: https://github.umn.edu/umn-csci-3081-s22/shared-upstream/blob/main/labs/lab02-web-sockets/web/schedule.html#L85.
Your task is to add the api command detailed in the first TODO: comments in schedule.html. The first command should tell the controller to call the model's ScheduleTrip(...) command. You will need to edit the JSON in the command so that the trip is scheduled in the model and it is reported in the api.onmessage(...) method. If done correctly, you will see a blue popup (see original project demo) that says "Your trip is scheduled!"
Hint: Understand how the controller connects to the model in the ReceiveCommand(...) function. Also, take a look at what JSON values should be available within the JSON object in the ScheduleTrip(...) function.
Check Off - If you see the popup, you can get this portion of the lab checked off.
Challenge - Do the second TODO: item where you call the model's CreateEntity(...) function.
THIS LAB IS COMPLETE.
Congratulations!