辅导COMP 431/531、辅导html/css/web、讲解Web Development

日期：2018-10-17 10:22

Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 1/7

General Info

1. Simple Page

(due Thu 08/30)

2. Dynamic Page

(due Thu 09/06)

3. JavaScript Game

(due Thu 09/20)

4. Draft Front-End

(due Thu 10/04)

5. Front-End App

(due Thu 10/18)

6. Draft Back-End

(due Thu 11/08)

COMP531 Paper

and Presentation

(due Tue 11/27)

7. Final Full Web

App

(due Thu 11/29)

Front-End App

due Thu 10/18 by 11:59 PM

Remember to review the Rubric before you submit!

landing page with registration and login

main page with articles, followers, and headline message

prole

page for a user to upload a new prole

picture and edit their user

data

Remember that when tackling any large task our best approach is to divide and

conquer. For this assignment there are two major portions:

1. Writing unit tests of the desired functionality.

2. Implementing logic for our site to eventually connect to the backend

server.

Test Driven Development

Unit Tests

Behavior Implementation

In this assignment you will partially implement and test the frontend of your web

application. We start with our draft frontend application that contains three

views integrated into a single page application (SPA)

We will exercise test driven development instead of writing the implementation

of our web app rst

and testing later. Therefore before we implement anything

we will rst

write tests for our functionality. In this way the desired behavior will

drive our implementation and design. Start by writing unit tests for the desired

behavior and execute the test suite as we develop.

Every user interaction point should be validated. For your nal

web app, most

user interactions will actually involve making an AJAX call to the server to

update data. In our test environment we will not want to contact the real server

(not implemented yet), and therefore want to use the hardcoded data in our

JSON les.

Because there's no backend server yet, any persistent data must be

stored using either cookies or localStorage.

After you have implemented all of the tests listed below, we need to implement

the desired functionality so that the tests pass. In this way we are assured that

all of the code we write is covered by our test cases. I.e., we should get high

marks for code coverage with no extra effort and no need to later refactor our

COMP

431/531

Web

Development

Syllabus Schedule Assignments Resources

Fall

2018

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 2/7

Requirements

Unit Tests

Validate Authentication

should log in a previously registered user (not new users)

should update success message (for displaying login success

message to user)

should not log in an invalid user

should update error message (for displaying login error mesage to

user)

should log out a user (login state should be cleared)

Validate Article actions

should fetch articles for current logged in user

should update the search keyword

should lter

displayed articles by the search keyword

should add articles when adding a follower

should remove articles when removing a follower

Validate Prole

actions

should fetch the logged in user's prole

information

Implemented Functionality

code so that it will be testable -- this again is a benet

of test driven

development. The list of functionality is provided below.

Use Chrome as your standard supported browser. Whereas you can use any

browser you like for development, your assignment will be accessed using

Chrome by the grading staff and therefore it behooves you that it works.

Host your submission on Surge. Include the URL in a README.json le

as before.

The deployed version of your code on Surge may be used during grading.

Therefore after you make your submission, please do not re-deploy to the same

Surge domain until the next assignment.

Remember separation of concerns and write DRY (don't repeat yourself)

modularized code.

Use Jasmine and Karma to test your application. Note that in principle we only

test "our" code and not "framework" code. We want to test our specic

business

logic that we wrote.

You should have tests for each of the following, with the "it" descriptions as

given

Most of the above tests validate the logic code, i.e., your service code, not

your component code. This implication is supported if we have simple

Angular components for our view. The idea being that complex Angular

components would require testing, and testing the DOM is more difcult

than testing simple functions.

Below are the functional requirements for this assignment. There will

initially be only hardcoded data in your frontend. When someone logs in,

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 3/7

Landing view: Register a new user, but new users cannot log in

Landing view: Registered user can log in with netID and password,

if successful then redirect to the Main view, otherwise inform user

of incorrect login

Main view: ability to update headline for user, update is persistent

Main view: list of articles with newest article rst

Main view: add registered user to followed users list (add that

user's articles to feed)

Main view: remove registered user from followed users list

(remove that users's articles from feed)

Main view: each article has a list of comments displayed (you may

want to show/hide them or use some other means to make it user

friendly)

Main view: search bar lters

displayed articles by author or body,

but not date or article id

Main view: ability to add new text-only articles

Prole

view: update the user prole

information after registration

validation (update is not persistent)

Whatto submit

hw5

|-- .gitignore

|-- coverage

| |-- html

| | `-- ...

| `-- lcov.info

|--- dist

| |-- index.html

| `-- images

| `-- ...

|-- junit

| `-- TESTS...xml

|-- package.json

|-- README.json

|-- src

| |-- app

you will update the main page to have the current user information. The

current user is persistent while that user is logged in. An update to the

status headline should be persistent while the current user is logged in.

Note: for this assignment, only previously registered users (those in the

prole.json

le)

can log in.

Be sure that you are not submitting or checking in node_modules

(node_modules should be in .gitignore le).

Include your test coverage results in your submission. Additionally create

a XML junit report that demonstrates your tests ran and did not fail.

Karma should create the coverage and junit directories for you

automatically.

Your submission might look like this:

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 4/7

| | |-- app.component.css

| | |-- app.component.html

| | |-- app.component.ts

| | |-- app.component.spec.ts

| | |-- app.module.ts

| | |-- auth

| | | |-- auth.component.css

| | | |-- auth.component.html

| | | |-- auth.component.ts

| | | |-- auth.component.spec.ts

| | | |-- login

| | | | |-- login.component.css

| | | | |-- login.component.html

| | | | |-- login.component.spec.ts

| | | | `-- login.component.ts

| | | `-- registeration

| | | | |-- registeration.component.css

| | | | |-- registeration.component.html

| | | | |-- registeration.component.ts

| | | | |-- registeration.component.spec.ts

| | | | |-- registeration.service.ts

| | | | `-- registeration.service.spec.ts

| | |-- main

| | | |-- following

| | | | |-- following.component.css

| | | | |-- following.component.html

| | | | |-- following.component.spec.ts

| | | | |-- following.component.ts

| | | | |-- following.service.ts

| | | | `-- following.service.spec.ts

| | | |-- headline

| | | | |-- headline.component.css

| | | | |-- headline.component.html

| | | | |-- headline.component.spec.ts

| | | | |-- headline.component.ts

| | | | |-- headline.service.ts

| | | | `-- headline.service.spec.ts

| | | |-- main.component.css

| | | |-- main.component.html

| | | |-- main.component.spec.ts

| | | |-- main.component.ts

| | | `-- posts

| | | | |-- posts.component.css

| | | | |-- posts.component.html

| | | | |-- posts.component.spec.ts

| | | | |-- posts.component.ts

| | | | |-- posts.service.ts

| | | | `-- posts.service.spec.ts

| | |-- profile

| | | |-- profile.component.css

| | | |-- profile.component.html

| | | |-- profile.component.spec.ts

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 5/7

item pts

Merits [100]

README.json le

contains netid and URL to deployed frontend site 2

Test Auth: should log in a user 3

Test Auth: should update success message (for displaying login success

message to user)

3

Test Auth: should not log in an invalid user 3

Test Auth: should update error message (for displaying login error

mesage to user)

3

Test Auth: should log out a user (state should be cleared) 3

Test Article: should fetch articles for current logged in user 3

Test Article: should update the search keyword 3

Test Article: should lter

displayed articles by the search keyword 3

Test Article: should add articles when adding a follower 3

Test Article: should remove articles when removing a follower 3

Test Prole:

should fetch the user's prole

information 3

Valid test coverage report included in submission 3

| | | |-- profile.component.ts

| | | |-- profile.service.ts

| | | `-- profile.service.spec.ts

| `-- assets

| |-- articles.json

| |-- followers.json

| `-- profile.json

`-- styles.css

The important thing about the above structure is that each portion of the

web app has it's own directory. We try to be modular in our design

patterns. You are not required to follow this directory structure exactly,

but you are required to have a modular layout. What is important is that

there is structure and that the structure makes good extensible and

maintainable sense.

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 6/7

item pts

Valid unit test report included in submission 2

Landing: register new users (new users cannot log in) 5

Landing: registered users can log in with netID and password 5

Main: update headline - persistent 5

Main: add user to follower list, new user's articles shown in feed 5

Main: remove user from follower list, old user's articles are removed

from feed

5

Main: Suitable message when trying to add user that does not exist 5

Main: each article has a list of comments displayed in a user friendly

fashion

5

Main: add new articles with text-only 10

Main: new articles appear at top of feed when added 5

Main: refreshing the page when logged in should keep the user logged

in

5

Prole:

shows current logged in user's prole

information 5

Demerits [65]

did not use the Angular front-end framework 30

unapproved module or JavaScript library 25

not using Angular services for business logic 10

Total [100]