辅导SE 3316A编程、Java程序语言调试、Web/HTML编程讲解 调试Matlab程序|讲解Database
- 首页 >> Python编程 SE 3316A Web Technologies Lab #4: Due Sunday, Nov. 15, 11:55 pm
Deadlines:
1.Submission deadline: Sunday, Nov. 15, 11:55 pm.
2.Demonstration deadline: Friday, Nov. 27, 12:30 pm
Submissions close on Tue. Nov. 17, 11:55pm.
Change Log
1.Added a FAQ item about progressing without completing lab 3.
Objectives:
A.Learn how to use Angular to develop the front-end for a web application
B.Create a client (front-end) interface using Angular for interacting with the API that was designed in lab 3
In this lab, you will implement a front end with Angular, that uses the server API for a time table query application that was developed in lab 3. Accessing the application using a public URL is mandatory. You may use Amazon EC2 or your own server for a public URL. You may use a local installation of Node.js for development purposes.
Workflow:
1.Create a new private Git repository on Github called “se3316-xxx-lab4” (all lowercase) where “xxx” is your Western email ID (without @uwo.ca part).
2.Clone that repository on your workstation/laptop to create a local working directory.
3.Deploy on the server using Git.
4.Make frequent and meaningful commits and push your project to Github.
Submission Instructions:
Please carefully read the instructions and strictly follow them. Your grade depends on it.
1.Use a proper “.gitignore” file so that only the files that you edit are in your repository.
2.Make frequent commits with an appropriate commit message.
3.Ensure that you understand the principles behind your code.
4.Ensure that Github contains the latest version of your code.
5.Copy the output of command “git log” and paste that onto the submission page (Assignments section) on Owl.
6.Download your repository as a zip file from Github and submit as an attachment. Please do not zip the folder on your computer as it contains a large amount of extraneous files.
7.Ensure that your Github repository is shared with TAs.
8.Demonstrate your lab (on a public URL) before the demonstration deadline. You may set up the public URL after submission on Owl. As long as the changes only involve deployment issues, it is acceptable.
Penalties will apply for not following the naming convention or any of the submission steps.
Rubric (out of 100):
See the requirements for front-end and back-end for marks allocated for implementation.
1.No input sanitization: -10 for each occurrence.
2.Code management with Git
a.Less than 10 commits: -20
b.No meaningful commits: up to -10
c.No meaningful commit messages: up to -5
d.Not using a proper .gitignore file to ignore images: -5
e.Not using Git pull to deploy code to server: -5
3.Logistics
a.Repository name not in required format: -5
b.No zip file: not graded
c.Code is not attached as a zip file or it contains content that is not in the Git repository[ If you zip the file on desktop, it may often include hidden files (particularly on Mac) or the .git folder itself.] or is missing content that is in the repository: -10
Preparation - Learning Angular
Follow the “Tour of Heroes” Tutorial on angular.io and complete the first 6 parts.
Create a web application for searching the online timetable for Western
The web application must consist of a front-end implemented using Angular and a back-end API implemented for lab 3 using Node.js.
The front-end must provide the following functionality. Please feel free to shape the UI as you would like to use a similar app. [100 points total]
1.A user interface that uses the back-end functions developed in lab 3. [10 points]
2.Ability to search the time table by subject, subject+course or subject+course+component and display results. [40 points]
3.Ability to create course lists (schedule). [20 points]
4.Ability to display the time table for all the courses for a given course list. [20 points]
5.Sanitize all user input so that the display must not interpret any HTML or JavaScript that might be typed on to the text area (on the front-end, this is typically taken care by Angular)
6.Allow any language as the schedule name and display it in the language it is entered. [10 points]
Code will be checked for similarity. Please work independently. Please frequently check the FAQ below for clarifications, tips and tricks.
FAQ
1.If you didn’t finish lab 3, you may create mock routes for the back end as needed. For example, for item 3 in lab 3 (get timetable entry), you may set up a GET route using Express and return a fixed timetable value every time. If you are unable or unsure on how to do that, please seek help from a TA. You will not be able to proceed with labs 4 and 5 without the ability to create a RESTful back-end.
Deadlines:
1.Submission deadline: Sunday, Nov. 15, 11:55 pm.
2.Demonstration deadline: Friday, Nov. 27, 12:30 pm
Submissions close on Tue. Nov. 17, 11:55pm.
Change Log
1.Added a FAQ item about progressing without completing lab 3.
Objectives:
A.Learn how to use Angular to develop the front-end for a web application
B.Create a client (front-end) interface using Angular for interacting with the API that was designed in lab 3
In this lab, you will implement a front end with Angular, that uses the server API for a time table query application that was developed in lab 3. Accessing the application using a public URL is mandatory. You may use Amazon EC2 or your own server for a public URL. You may use a local installation of Node.js for development purposes.
Workflow:
1.Create a new private Git repository on Github called “se3316-xxx-lab4” (all lowercase) where “xxx” is your Western email ID (without @uwo.ca part).
2.Clone that repository on your workstation/laptop to create a local working directory.
3.Deploy on the server using Git.
4.Make frequent and meaningful commits and push your project to Github.
Submission Instructions:
Please carefully read the instructions and strictly follow them. Your grade depends on it.
1.Use a proper “.gitignore” file so that only the files that you edit are in your repository.
2.Make frequent commits with an appropriate commit message.
3.Ensure that you understand the principles behind your code.
4.Ensure that Github contains the latest version of your code.
5.Copy the output of command “git log” and paste that onto the submission page (Assignments section) on Owl.
6.Download your repository as a zip file from Github and submit as an attachment. Please do not zip the folder on your computer as it contains a large amount of extraneous files.
7.Ensure that your Github repository is shared with TAs.
8.Demonstrate your lab (on a public URL) before the demonstration deadline. You may set up the public URL after submission on Owl. As long as the changes only involve deployment issues, it is acceptable.
Penalties will apply for not following the naming convention or any of the submission steps.
Rubric (out of 100):
See the requirements for front-end and back-end for marks allocated for implementation.
1.No input sanitization: -10 for each occurrence.
2.Code management with Git
a.Less than 10 commits: -20
b.No meaningful commits: up to -10
c.No meaningful commit messages: up to -5
d.Not using a proper .gitignore file to ignore images: -5
e.Not using Git pull to deploy code to server: -5
3.Logistics
a.Repository name not in required format: -5
b.No zip file: not graded
c.Code is not attached as a zip file or it contains content that is not in the Git repository[ If you zip the file on desktop, it may often include hidden files (particularly on Mac) or the .git folder itself.] or is missing content that is in the repository: -10
Preparation - Learning Angular
Follow the “Tour of Heroes” Tutorial on angular.io and complete the first 6 parts.
Create a web application for searching the online timetable for Western
The web application must consist of a front-end implemented using Angular and a back-end API implemented for lab 3 using Node.js.
The front-end must provide the following functionality. Please feel free to shape the UI as you would like to use a similar app. [100 points total]
1.A user interface that uses the back-end functions developed in lab 3. [10 points]
2.Ability to search the time table by subject, subject+course or subject+course+component and display results. [40 points]
3.Ability to create course lists (schedule). [20 points]
4.Ability to display the time table for all the courses for a given course list. [20 points]
5.Sanitize all user input so that the display must not interpret any HTML or JavaScript that might be typed on to the text area (on the front-end, this is typically taken care by Angular)
6.Allow any language as the schedule name and display it in the language it is entered. [10 points]
Code will be checked for similarity. Please work independently. Please frequently check the FAQ below for clarifications, tips and tricks.
FAQ
1.If you didn’t finish lab 3, you may create mock routes for the back end as needed. For example, for item 3 in lab 3 (get timetable entry), you may set up a GET route using Express and return a fixed timetable value every time. If you are unable or unsure on how to do that, please seek help from a TA. You will not be able to proceed with labs 4 and 5 without the ability to create a RESTful back-end.