COMP249 Assignment 3:
Javascript Application
JS Application案例 The third assignment for COMP249 in 2018 is a Javascript based re-implementation of the Jobs! web application.
JS Application案例
The third assignment for COMP249 in 2018 is a Javascript based re-implementation of the Jobs! web application. In this version, the server will deliver data in JSON format to the front end (browser) which will handle the generation of the HTML display and interaction with the user.
This is a different style of implementation for web applications that has become much more prevalent in recent years and is typified by toolkits like Angular and ReactJS. In this project you will use two Javascript libraries to help write the application: jQuery and Handlebars.
Server Side Application JS Application案例
The application data we will use is drawn from Github Jobs site since that site has an API that delivers job details in JSON format. I used some modified data from that site for the test data in Assignment 2, this time we will use the full JSON data that it delivers.
I have written a small application using Bottle that mimics some parts of the Github Jobs API and adds an option for people to apply for a job by submitting a (simplified) form.
The application is simplified in that it doesn’t support login; the main focus of this assignment is in the use of Javascript to handle front-end interaction, so removing login simplifies the task to allow you to concentrate on this. The application does use session cookies to keep track of individual users.
You can get the starter-pack for this assignment containing this application in this Bitbucket repository or download a zip file here: comp249-2018-jsonjobs.zip. Unpack the application and run main.py in the usual way. There are some tests in the project that test my backend implementation.
Here is a sample of the JSON that is delivered by /positions.json:
[
{
"id": "40af75b0-43da-11e8-8421-06fdf93a68d5",
"created_at": "Thu Apr 19 14:02:55 UTC 2018",
"title": "Lead Software Architect",
"location": "New York, NY",
"type": "Full Time",
"description": "
Overview:
\n\n
The Expert…",
"how_to_apply": "
You can apply on our Company website:
\n\n
The Systems Engineer will get the opportunity to influence the architec…",
"how_to_apply": "
https://grnh.se…",
"company": "Jackpocket",
"company_url": "http://Jackpocket",
"company_logo": "http://github-jobs.s3.amazonaws.com/b05df54e-433a-11e8-8222-0ee3ea23d081.png",
"url": "http://jobs.github.com/positions/b6267848-433a-11e8-998a-b0eef57bee5c"
}
]
The supplied Bottle application supports the following URL routes:
/– delivers the index.html template, you will use this template to write the HTML for your application, this is the only URL that web users would access directly. In the starter kit, this contains links to some of the URLs below and a sample form for demo purposes; you do not need to retain any of these in your solution.
/static/– delivers static files in the normal manner
/positions– delivers a JSON representation of a list of positions, unlike the Github Jobs API we deliver all positions, there is no filtering or paging option implemented in the server
/apply– accepts a POST request for a user to apply for a job, form fields:
position_id – id of the position you are applying for
first_name – applicant first name
last_name – applicant last name
years_experience – applicant years of work experience
expertise – sentence describing expertise of applicant
/applyreturns a JSON response with two fields:
count – the number of applications this user has submitted
message – a message to the user, eg. “Thanks for your application, we will respond to you within 5 days”
/applications– returns a JSON structure listing the applications that the current user has submitted,
{"applications": [{"position_id": "23",
"first_name": "Steve",
"last_name": "Cassidy",
"years_experience": "12",
"expertise": "teaching python"
},
{"position_id": "24",
"first_name": "Steve",
"last_name": "Cassidy",
"years_experience": "3",
"expertise": "juggling with many objects at once"
}
]
}
Note that the back-end application stores sessions in a global variable rather than in a SQLite database, this means that any session information will be reset every time you restart the application.
Your Task JS Application案例
Your task is to build the front-end code that will be run in the browser to provide an interface to the jobs data for the user. Your code will read data from the /positions.json URL and create a display of the data and manage user interaction. Your application will have the following features:
The initial page will display a list of up to 10 positions in order of date (most recent first) with each position including some data from the job listing, eg. the title, location, company name.
If the user clicks on a job listing, the full details of the position are shown in another part of the page (eg. see the way that comshows a job listing on the right of the page when you click on it).
When job details for a position are displayed, the user can ‘close’ the description by clicking on a button (eg. a cross button at the top right of the display block)
When job details for a position are displayed, there is a form shown in the page that the user can use to apply for this job. The form includes the fields listed above and is submitted to the URL route /apply. The JSON response from form submission is then displayed to the user in a useful manner.
There is a search box in the page. When a user enters a search term in the box, the list of positions is filtered using this search term so that only those jobs with this term in the title are shown. If multiple words are entered (separated by spaces) then jobs showing either wordare shown (ie an implicit OR between search terms).
Your Tools JS Application案例
I have provided a very basic project template for you to start with, this includes the code to run the back-end application and a basic HTML template referencing CSS and Javascript files. Also included are copies of the jQuery and Handlebars libraries and these are loaded into the HTML template.
You should use jQuery and Handlebars to complete this project.
You may not use other Javascript libraries unless given explicit permission to do so (I will maintain a list of approved libraries, but I don’t expect there to be many). You should not use high-level toolkits like Angular or ReactJS. The goal is that you write the code in relatively low level Javascript to enable you to understand how everything works together without the kind of ‘magic’ that is often a feature of high level toolkits.
One thing you should take care of is to make your Javascript code well-organised and readable. This might include separating your code into identifiable ‘model’, ‘view’ and ‘controller’ modules, for example (but I acknowledge that there won’t be only one good structure).
Extensions JS Application案例
You have the option of going beyond the base requirements to implement one or at most two extensions to the project. These should be updates to the front-end of the application, making use of the JSON data delivered by the application in some way. They should not require changes to the back end server. Try to think of extensions that allow you to demonstrate something new rather than repeating another part of the application (eg. not just search on locations as well as on titles).
Grading JS Application案例
This is the second part of the web development application, following on from the Python part which was a hurdle requirement for the unit. As such, it was relatively easy to score well on the first part, if you passed you got at least 60% and unless you wrote awful code you would get more.
To balance that, this assignment will be harder to score high marks on this assignment. A ‘pass’ mark for this assignment would be about 7/20, eg. implement the first three requirements with reasonable code quality and design.
Completeness 9 Marks
Your application includes all of the required features above
Requirements 1-3 together will be worth 1 mark each if implemented fully.
Each of requirements 4 and 5 will be worth 3 marks each.
Extension 5 Marks
Implementation of one or at most two features beyond the requirements specified above
Marks will be given for originality, quality of implementation, integration with the rest of the application
You can get all of the marks for one extension, if it adds something significant or involves different methods to the other features of the application
Code Quality & Documentation 4 Marks
Your code is well organised, easy to follow, uses Javascript language features correctly
You provide a README.txt file that describes how your implementation fits together and any extension features you have implemented
If you don’t have much code because you didn’t implement all requirements, you will score fewer marks here
Design 2 Marks
Marks for the visual design of your pages and the user-interface design (how your page interacts with the user).
JS Application案例
