Exam assignment 3

Senast ändrad 2018-12-10 08:13 av Johan Leitet

Deadline and submission

Deadline: 2019-01-16 07:30
Submit: Submit your assignment by doing a release on GitHub named “v1.0″. In case of changes after a released version please use incremental version numbers, i.e. “v1.1″, “v1.22 etc.

Goal

After performing this assignment you will fulfill the three goals described in the course syllabus:

Analyze problems and then to evaluate and choose appropriate design and construct the solution in the form of programs in the programming language JavaScript.

Describe a web browsers different internal components and their interactions including browser security mechanisms

Create web applications were JavaScript, HTML and CSS have clear roles and are clearly separated

Store and with asynchronous communication, transfer data with for the task appropriate data format

Create optimized and accessible custom single page applications with offline support and which takes advantage of the browser's native APIs.

This examination is worth 3.5 credits (3.5hp).

Notice

Any attempt to plagiarism or other way of cheating will be reported to the university discipline board.

Preperation

Do the excercises at A and B level. (at least)

Read the chapters in the book for this part.

Make sure Node and NPM is installed on your computer.

Use Git to clone down your examination-repo. It should be something like

Pull down the files from our examination repo (be sure to do this in the right directory)

git pull https://github.com/[COURSECODE]/examination-3.git

This repo should include a boilerplate with the same stuff that you have been using in the exercises. Se README.md-file for instructions on how to install.

Start writing your code in this repo and do your commits as usually.

The Personal Web Desktop (PWD)

This examination will focus on building a single page application with chat integration against a web socket server.
The backend (server-side code) of this assignment will be given and your job is to write the client-side code.

In this examination assignment you are supposed to build what we call a "Personal Web Desktop" (PWD). First of all, have a look at this recording to get a better view of the assignment.

The memory game application

Functional requirements, Memory application:

The user should be able to open and play multiple memory games simultaneously.

The user should be able to play the game using only the keyboard.

One, by you decided, extended feature

The chat application

The chat application shall be connected to other students chats via a web socket-server.

The server

The server address is: ws://vhost3.lnu.se:20080/socket/

You connect to the server via web sockets and send messages using the json format:

{
"type": "message",
"data" : "The message text is sent using the data property",
"username": "MyFancyUsername",
"channel": "my, not so secret, channel",
"key": "A api-key. Found when logged in on the course webpage"
}

The properties type, data, username and key are mandatory when sending a message to the server.
The properties type, data and username will always be present when you receive a message from the server. Additionally, all properties sent from one user will be echoed to all receiving clients.

The API-key

If you are logged in to coursepress you should be able to see the API-key near the bottom of this page.
The key is used to keep track of users of the application and to curb abuse.

Heartbeat

The web socket server will send a "heartbeat" message to keep the connection open. This message is sent every 40 seconds and have the following structure:

{
"type": "heartbeat",
"data" : "",
"username": "Server"
}

Your application can simply ignore those messages completly.

Functional requirements, Chat application:

The user should be able to have several chat applications running at the same time.

When the user opens the application for the first time the user should be asked to write his/her username.

The username should remain the same the next time the user starts a chat application or the PWD is restarted.

The user should be able to send chat messages using a textarea.

The user should be able to see at least the 20 latest messages since the chat applications was opened.

One, by you decided, extended feature.

You are free to add functionality not described above. Added functionality could be:

Ability to choose which channel to listen to.

Caching message history.

Added support for emojis.

Added support for writing code.

Ability to change username.

Encrypted messages on a special channel to allow secret communication.

Added functionality to the "chat protocol". Discuss with others in the course and agree upon added functionality to add to the sent messages.

Use the messages to play memory against an opponent. Perferably using a seperate channel.

Disclaimer

All students working on this assignment uses the same server and can read all messages sent by you. You should at all times mind your language. The channels are monitored and abuse will not be tolerated.

Hints and recommendations

Hints and recommendations below are only suggestions and nothing you need to abide by.

Basic hints

This assignment can look big at first glance. Please take an hour or two using pen and paper to sketch up your application visually as well as structuring your code to come. Should you make use of types? In that case, which types can you identify?

All windows should have a similar look and feel. Maybe you can make a type for a basic window and use inheritance for your applications?

Your applications should be isolated units. Can you make them in such a way that they are independent of your PWD-application?

Your application will look a lot nicer if you add a background image to your "desktop".

Advanced hints

What happens if you open multiple windows? Maybe the windows should stack using an offset?

Can you handle windows bouncing of the edges? How is this handled in your operating system?

What will happen if you have 1000 different applications in your PWD? Can your applications be dynamically loaded from the server when the user starts the app for the first time instead of being loaded into the PWD at first page load?

Do some of your applications have loading times? Maybe you should have a built in system for handling progressbars and/or loading icons.

Oral hearing

The examination will be done as an oral hearing where you get a couple of theoretical questions from this part (Lecture 1 to 7) and also show your practical assignment. You can´t book a time for oral hearing before you are ready with the assignment and have done a release on GitHub.

The hearing will take place over Slack (distance learning students) or in the staff offices on the the fourth floor of Magna, Universitetskajen (Campus Students).