Universidad de las Fuerzas Armadas ESPE

Unidad de Educación a Distancia

First Name and Last Name:

Course:

Class Activity N. 3
Front-End Web Development
Activity Description

You will work in the same teams of 4 members, as organized in alphabetical

order for the previous activities. If any student(s) have withdrawn. The team will
work with the remaining students. Team changes are not allowed.

For this activity, you must build two websites using React and any of its
frameworks or libraries. First of all, all user interfaces that were designed for the
first activity must be implemented. If you did not design web user interfaces for
the first unit, now, it is the time to do it. In this activity only one URI developed in
activity 2 must be used/consumed. Second of all, the website must consume
the following public API https://api.plos.org/, that API returns data from scientific
publications in JSON format according to the title parameter. For example, to
retrieve scientific documents about GitHub, the following URI can be used:

https://api.plos.org/search?q=title:github

The API will return:

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:

That information tells that there are seven occurrences related to the term
GitHub. The next URI returns the ids of each article:

https://api.plos.org/search?q=title:%22GitHub%22&fl=id&start=1&rows=100
(URI 1)

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:

With the id of each article, you can access the web page that shows the
complete information of the article, the URL to display the data is as follows:

https://journals.plos.org/plosone/article?id (URI 2)

For example, to retrieve the document whose id is

10.1371/journal.pone.0205898,

The URL will be as follows

https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0205898,

That URL is of the following requested Web Page:

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:

You must implement one or more user interface design patterns, in the design of
two websites. One website contains several web pages consistent in their
design, colors, and content to:

(1) Consume the public API URIs described above (api.plos.org) and

(2) Design the front-end for your project using a Front-End

Framework/library and consume one (only one) URI (GET) developed in the
Activity Number 2 of your team project, every teams must contain at least 8 web
pages that are producing/consuming data from your API.

Note. For part (1), pages must be fully functional, for part (2), all pages must be
fully designed and implemented (Front-End using frameworks), and only one

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:
page must consume one of the URIs previously coded by your developer team.
The two components of this activity are described in detail below.

(1) PUBLIC API CONSUMPTION

You have to implement one web page where the user will enter the search term.
The user must select how they want to view the data. The developer is free to
design the user interface of these five web pages, but you must use a
framework to implement it later. The form (and its results) and the four pages
are dynamically created with the retrieved data as follows:

1. This page shows the tabulated documents (do not include the abstract)
of each of the articles returned by URI 1, the titles of the table columns
are:

a. id,

b. journal,

c. eissn,

d. publication_date,

e. article_type,

f. author_display,

g. title_display,

h. score

2. On the previous page, for each title of the papers, program a link that
displays the abstract for that paper on a new page as read from the URI.
This link will open the other page in a new browser tab or a new browser
window.

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:
3. A new page shows a table of every document identifier, with their
respective id. From each id, a URL must be created so that the entire
document can be viewed in a new tab (a new web browser tab), not in
the same web application you are developing.

4. You must also create a page that shows the information of the client
computer from where you are accessing the API. For that, the public API
that you are using provides the following URI https://httpbin.org/get. That
URI returns the data of the client machine in JSON format. The data
must be in a web page, i.e., the data must be formatted as a web page,
the data must not be shown in JSON format. You must show the
following information:

a. The files that are accepted

b. The language

c. The remote host

d. The IP that originated the request

e. The name of the browser

f. The Operating System of the local machine

(2) USER INTERFACES FOR YOUR PROJECT

You must design the user interfaces for your project (your topic) using React, if
you wish you can use other library or Front-End framework. At least, one of the
designed and implemented pages must consume information from a URI of type
GET. Also, in this implementation, you should learn the use of sessions and
implement them at both the back-end and the front-end layers. To verify that the
sessions were correctly implemented, you must open a URL and a URI of your
project in a browser where you have not yet logged in to the system. If sessions

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:
are correctly implemented, the page and the URI should not display the
requested information.

The development must be done as a team, this can be validated in the GitHub
repository, so please split your assignment into 4 programming sections (Don’t
organize as one student designs, other student does requirements, and other
student does programming). The authorship will be written in every file header,
also a validation report is requested in your project report. It must tell how (or
how much) each student did as their part in the project. In summary, each
member of the team must program at least two user interfaces (web
pages) that are requested here.

As a team, you must integrate each developer's solution without node_modules

(libraries) into the 06-Code folder of your repository in a folder called front-end.

The execution of the web pages will be recorded in a video on YouTube by all
the team members, the functionality is described while the corresponding
searches of the public API are executed and when the data of the REST service
is printed out in a web page. The video should also show the data in JSON
format produced by the URI, and the data must correspond to the MongoDB
Atlas database, you can use MongoDB Compass. At the beginning of the video,
the names of the members, the name of the team, and the topic should be
mentioned. The link to the YouTube must me in the google doc.

Delivery Format

- A Google Doc, created by the team leader, which contains the number and
name of the team, and team members, screenshots of each of the elements
of the evaluation criteria. In this document at the beginning, you must share
the links to the GitHub repository and to the YouTube video of the activity.

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:
Share the document with the tutor of the class. Please create this document
in the classroom drive of this course inside the folder 02ctivity3FrontEnd.

- A zip file, containing a word document (with the content of your google doc),
the design of your project (UML), the design of your web pages (you can do
them in a piece of paper or in any mockup tool) and a folder with the code of
your project (please remove any unneeded folder such as libraries).

- The GitHub repository is the same as in activities 1 and 2. You should not
change the names of the files, you just have to update them and commit to
the repository again and new folders will be created when necessary, for
example the document productBacklog.doc will continue with the name
productBacklog.doc but its content will change according to the
requirements of activities 2 and 3. Inside the 06-Code folder, you must
create a folder called 03WebClient, where you copy the web clients. The
members of the team and the instructor of the course will be invited as
collaborators of the repository in case they have not been invited before,
also, you can make your repository public.

- The structure of the repository must be kept

o 01-Definition:

o 02-Requirements :

o 03-Documentation:

o 04-UMLDiagrams

▪ 01-UseCases:

▪ 02-ClassDiagram:

o 05-Tests:

Topic n° 3
 Universidad de las Fuerzas Armadas ESPE
Unidad de Educación a Distancia

First Name and Last Name:

Course:
o 06-Code:

o 07-Other:

Name must follow the convention ()

http://github.com/user/Team1lastnamefirstnameTeamLeader

e.g., http://github.com/elascano/Team1lascanojorge

Rubric

1. Github Repository (Right Structure and collaboration) /1

2. Design (sketches) of the web pages /0.5

3. Authentication and Navigability (sessions) /0.5

4. Web Clients + public API https://api.plos.org/search /0.5

5. Web Clients + Web Service + BDD /0.5

6. Other web pages / forms for the project /1

_______________________________________________________

GRADE: /4

Max number of pages

Does not apply

Topic n° 3