Reference no: EM133136391
ITECH3108 Dynamic Web Development - Federation University Australia
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.
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
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).
The complete database is displayed in the browser, and updates automatically.
Server functionality
The chat_server API has (at minimum) the following resources available:
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.
Creating a thread using the API also creates the first post within it.
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 have the following functionality:
• Upon loading the site, the user is presented with a "login" screen - this does not need to perform any authentication and merely asks the user to type their username. (e.g. Figure 1)
• 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.
• After login, the application should display a list of all threads, where each thread
is a clickable link (e.g. Figure 2)
• The user should be able to create a new thread, supplying a thread title and the text of an initial post. (No mockup supplied - implement this however you like).
• When the user clicks on one of the listed threads, the list of posts should be dynamically loaded and displayed underneath (e.g. Figure 3).
• The user should be able to add a post to a thread.
• The user should be able to delete a thread that they created themselves.
• Every 10 seconds, the data currently being displayed should be refreshed from the server, without losing user input (for example in the Reply box).
Challenge task (optional!)
• Use the History API to make it possible to use the Back and Forward browser buttons to navigate (eg, clicking back after clicking a thread).
Part three - Written report
Include in your submission a written report which includes:
• A personal reflection describing your approach to the assignment, any difficulties encountered, and what you learned in completing the task (approx. 300-400 words, about 1 page). Note that any plagiarism in this reflection is absolutely unacceptable, and will be reported if discovered.
• A statement of completion indicating which parts of the assignment you did or did not attempt.
• A statement of assistance showing what sort of help you obtained from external resources or peer groups.
• Any instructions necessary to run your application (if not obvious)
Attachment:- Front End Development.rar
Process gain and process loss in team microsoft
: Describe how the building redesign is likely to influence process gain and process loss in the team Microsoft.
|
Report on a project
: Report on a Project - Draw Table of Project Statistics from Microsoft Project and Justification of your chosen activities like predecessors, constraints etc
|
Represents a summary by county for medicare enrollment
: Represents a summary by county for Medicare enrollment (in (c) Test for outliers. If an observation is extreme, would you classify it as an outlier
|
Reflective journal assessment
: Reflective Journal Assessment - Your reflection must include only material covered in the lecture and tutorial for the particular week
|
Developing a front-end for a simple forum application
: 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
|
Prepare journal entries required to adjust inventory records
: Prepare the journal entries required to adjust the inventory records at year-end, assuming that Mary's Nursery uses (1) Average cost, (2) Last-in, first-out
|
Describe how chimerge works
: Describe how ChiMerge works - Describe the analysis of the data and discuss if it follows an ethically sustainable way through a Christian worldview
|
Prepare journal entries related to disposal of Machine A
: Machine A: Sold on January 2 for $22,000 cash. Prepare the journal entries related to the disposal of Machine A and B on the January 2 of the current year
|
Burnout prevention and resilience building
: Describe the potential physical, psychological, social and professional outcomes of acute and/or sustained stress - emotional and behavioural responses
|