Tasks

Task #1 (75 points)

The purpose of this first task is to make sure that you understand the basics of HTML, can write some by hand, and can link together pages.

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)

The purpose of this task is to verify that you understand the basics of CSS and can add it to a page.

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)

The purpose of this task is to make sure that you understand the basics of JavaScript programming and how you can use it in a website to modify the DOM.

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.

The way I expect you to do this is to copy the data from the table you are working with into a JavaScript file and then you work with it there. I am not expecting you to pull the data through an Ajax call as we haven't learned about those yet.

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)

The purpose of this take is to make sure that you know how to create a Canvas in JavaScript and add user interactivity with event handling.

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)

The purpose of this task is to make sure that you can use the Play Framework to build a Web 1.0 style interactive application.

For this task, you will make a message board using Play. The message board should support two types of messages, those directed to another user and those that are visible to all users. 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 both their personal messages to them and the general messages. That page will have the functionality to add new messages. The first page should include your name in the header.

Instead of storing the data in a database, for this task 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 messages will be remembered when it comes back up. That is fine for now. I want your app to start with two users: "web" with password "apps" and "mlewis" with password "prof". There should also be one message from mlewis to web and one that is visible to all users.

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 the 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 or run it on Heroku. The page that I grade should have a link to this that I can follow for grading purposes. Here are the steps to run the Play server in normal mode with the screen command so it keeps running when you log off. Also, note that you should push your code to tasks repository because I will be looking for it there.

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. We don't have the Heroku CLI installed on the lab machines, so if you want to use Heroku you will either have to use your own machine or find ways to do many things using their web interface. Since the final step is just a push to deploy I think this is possible. You can see an example Procfile for play at https://github.com/MarkCLewis/Online-Quiz-and-Test/blob/master/Procfile. Note that the command is what is produced by "sbt stage". You should run that command to see what file is generated in server/target/universal/stage/bin for your project. 

Task #6 (100 points)

The goal of this task is to make sure that you can write automated tests for your Play app.

Write automated tests for your site from task #5. I want you to do this using ScalaTest.

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. Note that I have observed conflicts between React and Selenium in the past. You might need to comment out the React libraries from the main view if you run into such problems.

Task #7 (125 points)

This task will make sure that you can use web sockets.

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. They should not leave a path and you should see them where they are on the initial page load.

Note that if you deploy on Heroku you need to use the "wss://" with https protocol. If you build your URL by replacing "http" with "ws", then I expect things will work both locally and on Heroku. You can also inspect "location.protocol" in your JavaScript to see if it is a secure connection or not.

Task #8 (100 points)

The goal of this task is to make sure you know how to create a SPA using React.

Make your message board use Ajax/web sockets and React. I tend to suggest Ajax for this.

Task #9 (125 points)

This task is intended to assess your ability to use databases in your web apps.

Redo task #5/8 using Slick for the message storage. Deploy this on the Pandora05 or to Heroku. If you plan to use Pandora05, let me know so I can set up a database for you. To access Postgres on Heroku use "heroku pg:psql". If you get a message that all connections are in use then run "heroku pg:killall".

Task #10 (100 points)

The purpose of this is getting you to do something with Scala.js that is similar to something that you have done before so you can see the differences and similarities.

Repeat task #4 with Scala.js. You can't use a paint program for this.

Task #11 (200 points)

This task brings a number of things together here at the end of the semester.

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).

I don't specify how you do this, but most people do it with WebSockets and a Canvas. Instead of a Canvas, you can use SVG in Slinky. This approach has some cool advantages, but might require more learning and thinking than you feel like doing at this point in the semester. Don't use a database for the drawing. Keep the drawing in memory. I also recommend vector-based graphics and not raster-based graphics.