Task #1 (75 points)
For the first task, you are going to set up a basic web page that will be your portfolio for this course and perhaps beyond. Under your Local/HTML-Documents directory, create a directory called WebApps. Make an index.html file in that directory. Make sure that everything is world readable and that you can see the pages you put up when you are done.
That index.html file should be a basic HTML file that will have links to your tasks and projects for this class. After the things for this class, feel free to put links to any other web based projects you might have worked on that you can link to.
You will also create an AboutMe.html file and have a link to it in index.html. As the name implies, this file should include a description of you that you would want potential employers to see. So highlight your experience and what you have done.
For this task, none of this needs to look good. That will be task #2, when you use CSS to make these pages so they don't look horrible.
Task #2 (75 points)
Add CSS to the pages you wrote for Task #1 so that they look better. Do this by putting a directory under WebApps called styles and make a tasks.css file in there that has the CSS you want to apply to what you created in Task #1. Then edit those files so they use that stylesheet.
Task #3 (100 points)
Make a page with an interactive table from Dougstats and link to it on your main WebApps page. There are several different tables on the links at the site. You can pick one. The table should have at least 3 columns and 30 rows, but could be much bigger. You get 50 points for a page where you can sort the columns by different values. You can get the additional 50 by adding other features, like possibly filtering data by text a user enters. Note that interface and functionality matter here for full points.
You only get points for your own code here. Using libraries written by others doesn't count. Note that JQuery is a library, so if you use JQuery, you aren't going to get full points.
Task #4 (100 points)
For this task I want you to create a page that has a canvas that does something interesting and interactive. A simple game would be a good example of this. I wrote an old-style Tron Lightcycles myself. Whatever you write can interact through the mouse, the keyboard, or both. As before, this needs to be YOUR code, even if it is simple. If I find that you pull significant amounts of code from another source, you will get a 0 on this task.
Task #5 (100 points)
For this task, you will make a task list page using Play. There should be a login with the ability to create new users. Once a user is logged in, they should be put on a screen that shows their todo items. That page will have functionality to add and delete items from the list.
Instead of storing the data in a database, I want you to store it in the memory of your app in a model that is properly synchronized. Note that this implementation means that if you take the application down, none of the users or todo items will be remembered when it comes back up. That is fine for now. Have enough documentation on the page you link to so that I can easily figure out how to use it.
If you want to run your application in dev mode using a different port, simply specify the port number after run. For example, in sbt use "run 9009". If you pick a port number from ethe range I assigned out, you will never have a conflict with other students.
To submit, you will need to deploy your Play application, and I want you to run it on the Pandora machine that I have assigned to you. Here are the steps to run the Play server in normal mode with the screen command so it keeps running when you log off.
Execute dist in sbt and then copy the resulting zip file someplace in your userspace and unzip it.
Go into the directory created by unzipping.
Do an ls and you will see there is a bin directory and a conf directory.
Verify that conf/application.conf has the setting you want. You have to change the play.http.secret.key setting if you haven't already done so. You can also set http.port to a port you should be using. Also, go to the allowed hosts and replace example.com with the full name and port number of the Pandora machine you are running on. I also suggest that you add a line that says "http.port=###" where "###" has been replaced by a port number in the range I have assigned to you.
Run "screen". It will look like you just cleared your terminal, but you are really in a new shell that can stay there when you log out. If you have connected to screen before consider doing a "screen -ls" to see if your previous screen session is running and reconnect to it. (If you have only one session, reconnect with "screen -dRR".
In the bin directory is an executable. Run that executable: "bin/executable-name"
If you changed the port in conf/application.conf, then just run it with no arguments. If you didn't set the port, then give a command line argument like "-Dhttp.port=9001" with your port number.
You should see it print stuff saying the server is running. Connect to it with a browser to test it. The URL should be something like "http://pandora01.cs.trinity.edu:9001/todo". Make sure it works.
Hit Ctrl-a followed by d. This will disconnect you from screen so you can log out. For more information on screen, I suggest this cheatsheet. Note that you can reconnect to that screen session with "screen -dRR" if you realize that you need to kill the server and change something.
If you are wondering how you would deploy a Play app that can be seen by anyone in the world and not just local to Trinity, you might find Heroku to be of interest.
Task #6 (100 points)
Write automated tests for your site from task #5. I want you to do this using ScalaTest. To do this, you will need to add the following line to the server in your build.sbt file. You could add it after guice and before spec2.
"org.scalatestplus.play" %% "scalatestplus-play" % "4.0.0" % "test",
After you have done this you should run "sbt compile eclipse" again to generate revised project files. You should then refresh the projects in Eclipse.
I want you to have standard unit tests for all the methods in your data model. For most people, there are five such methods. (See https://www.playframework.com/documentation/2.7.x/ScalaTestingWithScalaTest#Unit-Testing-Models)
I also want you to make a Selenium browser-based test and having it test the main functionality of your app. (See https://www.playframework.com/documentation/2.7.x/ScalaFunctionalTestingWithScalaTest#Testing-with-a-web-browser)
When you are done, make sure that you push to your repository as I will be grading these by looking at the code and pulling your repository to run the tests.
Task #7 (125 points)
Using web sockets, make a page that includes a canvas where each person on the page shows up as some small sprite or other drawn image that they can control with the arrow keys. Everyone should see everyone else moving around.
Task #8 (125 points)
Redo task #5 using Slick for the task storage. Deploy this on the Pandora machine that you are assigned to. I would suggest that you take down the old one and run this in its place. You will follow the same instructions to get it up and running.
Task #9 (100 points)
Repeat task #4 with Scala.js. You can't use a paint program for this.
Task #10 (200 points)
Write a page using Play and Scala.js that gives people on the page a shared drawing palette. When you connect, you should start by seeing whatever has already been drawn. You get 150 points for being able to draw anything. You can get an extra 50 points if you make it more powerful with different colors and drawing options (lines, rectangles, circles).