ITECH3108 – Dynamic Web Development Assessment Task – Front-end Development
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
ITECH3108 – Dynamic Web Development
Assessment Task – Front-end Development
Overview
For this assessment task, you will use skills acquired through the first six weeks of material to build an interactive front-end to an API.
You will be developing a front-end for a simple forum application, using front-end JavaScript, the Document Object Model, and fetch to connect to a RESTful web API. You will also submit a written reflection on your learning.
Timelines and Expectations
Learning Outcomes Assessed
Assessment Details
Part one – Install the API server application
Using the skills you developed in the week 1 laboratory task, install the API server application. The application can be installed using the following single command:
deno install --allow-read --allow-net
https://cdn.jsdelivr.net/gh/ITECH3108FedUni/[email protected]/chat_server.js
Ensure that is correctly installed by running chat_server and pointing your browser at https://localhost:7777, which should give an overview of the server API and a live display of the current database.
Data Model
The database exists in-memory only, and will be reset every time the server restarts, so don’t be afraid of breaking anything in it.
There are two top-level object types: users and threads.
A user has a username and a name (or display name).
A thread has a title, an id, an icon, and an array of posts.
A post has a user (the author of the post) and a text field (the content of the post).
Server functionality
GET |
/api/threads |
Retrieve a list of all threads |
GET |
/api/threads/{id} |
Retrieve a specific thread |
GET |
/api/threads/{id}/posts |
Retrieve a specific thread and all the associated posts |
GET |
/api/users |
Retrieve a list all users |
GET |
/api/users/{user} |
Retrieve information about a specific user |
GET |
/api/users/{user}/threads |
Retrieve all threads started by a particular user |
POST |
/api/threads |
Create a new thread. Requires a JSON body to be submitted with a content-type of application/json The body must be a JSON object containing the following keys:
user : The username of the user posting.
icon: A single character - e.g. an emoji.
title : The title of the thread. A string.
text : The content of the first post. A string.
|
POST |
/api/threads/{id}/posts |
Create a new post within a particular thread.
Requires a JSON body to be submitted with a
content-type of application/json
The body must be a JSON object containing
the following keys:
user : The username of the user posting.
text : The content of the post. A string.
|
DELETE |
/api/threads/{id} |
Delete an entire thread, and all posts within it. Requires a JSON body to be submitted with a content-type of application/json The body must be a JSON object containing the following keys:
user : The username of the current user,
which must match the user who created the
post otherwise an error value is returned.
|
Any errors will be reported both by an appropriate status code (eg. 400, 401, 404) and by a JSON response containing an “error” key.
The API does not allow creating or deleting users, nor deleting individual posts. It does not support the PUT verb for any resources.
Part two – Build the application
Create a front-end HTML, CSS and JavaScript application that uses the above API.
Your application should run within the regular Deno file_server application. During development you will need to run both file_server to serve your assignment files and chat_server to serve up your chat forum API. In Windows, this is easiest achieved by running multiple command prompts.
• The application should check that this username is already in the database by requesting the appropriate API endpoint, and retain this username and use it in subsequent requests as required.
is a clickable link (e.g. Figure 2)
be dynamically loaded and displayed underneath (e.g. Figure 3).
• Every 10 seconds, the data currently being displayed should be refreshed from the server, without losing user input (for example in the Reply box).
Hint: look at using window.setInterval or window.setTimeout
Challenge task (optional!)
Part three – Written report
Submission
Marking Criteria / Rubric
Feedback
Academic Misconduct
(http://policy.federation.edu.au/learning_and_teaching/compliance/academic_integrity/ch02.php)
You must also agree that your work has not been outsourced, and is entirely your own except where work quoted is duly acknowledged. Additionally, you must agree that your work has not been submitted for assessment in any other course or program.
ITECH3108 – Dynamic Web Development
Marking Guide – Front-end Development
Criteria |
Maximum |
Obtained |
Implementation
• Login screen allows user to type username
• Login screen validates username
• Threads list displays list of threads
• New threads can be created successfully
• Thread items can be selected to show posts
• Post listing includes both text and display name
• New posts can be added to a thread
• Users can delete their own threads
• The page automatically loads new data
• Challenge task (optional). Navigation using the History API
|
1
2
2
3
2
1
3
3
3
(+3)
|
|
Implementation penalties
• Implementation does not use REST API
• Complete page reload (e.g. window.location.reload or clickable links)
• Users can delete the posts of others
• Errors in console
|
(-5)
(-2)
(-1)
Up to (-3)
|
|
Written report
• Appropriate reflective task
• Penalty – missing or incorrect statement of completion or statement of assistance
|
5
(-1 each)
|
|
Total |
25 |
|
2023-10-11