HOMEWORK ASSIGNMENT 8
web代写 | 代做homework | express代写 | javascript | 作业app | 代做angular | jquery | project代写 | html | css作业 | ios – 该题目是一个常规的web的练习题目代写, 包括了web/express/javascript/app/angular/jquery/html/css/ios等方面, 这个项目是project代写的代写题目
CSCI 571 Summer 2022
####### Baskin Senbaslar
[email protected]
####### Abstract
Angular, TypeScript, Bootstrap, Responsive Design, javascript in Server Side, Node.js, Express,
AJAX, JSON, and Artsy API
This content is protected and may not be shared, uploaded, or distributed.
homework 8: Angular, TypeScript,
Bootstrap, Responsive Design, JavaScript in
Server Side, Node.js, Express, AJAX, JSON,
and Artsy API
1 ObjecKves
- Get experience with creaVng backend applicaVons using JavaScript/Node.js in server side with express framework.
- Get experience with using Angular, TypeScript, and Bootstrap in client side and creaVng responsive frontend.
- Get experience with using HZpClientModule of angular for AJAX.
- Get experience with Artsy API.
- Get experience with Google Cloud Pla\orm (GCP).
2 Homework DescripKon Resources
- Homework DescripVon Document (This document)
- Grading Guidelines
- web Reference Video: hZps://www.youtube.com/watch?v=7gw0OByU0Bc
- Mobile Reference Video: hZps://www.youtube.com/watch?v=rooC7e59Xss
- Piazza
3 General DirecKons
- The backend of this homework must be implemented in JavaScript using Node.js Express framework. Refer to Node.js website for installing Node.js and learning how to use it. Have a look at Gegng started guides in Express website to learn how to create backend applicaVons using Express. ax ios library can be useful to make requests from your Node.js backend to Artsy servers. Implemen’ng the backend in anything other than Node.js will result in a 4-point reduc’on.
- The frontend of this homework must be implemented using the Angular framework. Refer to Angular setup docs for installing Angular and creaVng Angular projects. Angular Tour of Heroes app tutorial is a very good tutorial to see different Angular concepts in acVon. Implemen’ng the frontend in anything other than Angular will result in a 4-point reduc’on.
- You are expected to create a responsive website. For that reason, we require you to use Bootstrap, a css framework for responsive, mobile-first web development. It will save you from
the burden of dealing with CSS peculiariVes (Some of you may have felt like this in Homework 6)
and the website you create will be responsive automaVcally if you develop within the framework
provided by Bootstrap. Please refer to Bootstrap docs for reference (especially look at Layout
secVon, and the components that you want to use). Refer to this post to learn how to add
Bootstrap to Angular projects. Not using Bootstrap will result in a 4-point reduc'on.
- The backend of this homework must be deployed to GCP. The backend should serve the frontend as well as other endpoints you may define. Please refer to Homework 7 for deploying Node.js applicaVons to GCP.
- You must refer to the homework descripVon document (this document), grading guidelines, the reference videos and instrucVons in Piazza while developing this homework. All discussions and explanaVons in Piazza related to this homework are part of the homework descripVon and grading guidelines. Therefore, please review all Piazza threads before submigng the assignment. If there is a conflict between Piazza and this descripVon and/or the grading guidelines, answers in Piazza are valid.
- The homework will be graded using the latest version of the Google Chrome browser. Developing homework using the latest version of Google Chrome is advised.
4 DescripKon
In this homework, you are going to create a web page that allows its users to search for arVsts using the Artsy API. The results of the search will be listed as a list of arVst cards. When a user clicks on an arVst card, details about the chosen arVst will be shown underneath. The details will contain two tabs, one containing informaVon about the arVst (name, birthday, deathday, naVonality and biography) and other containing arVsts artworks. Each artwork belongs to several categories which will be shown when the categories buZon below the artwork is clicked.
######## 4-1 Artsy Developer RegistraKon (Same as Homework 6)
To use Artsy API, you need to create a developer account in Artsy, create an app and get a client ID and a client Secret.
In your browser, navigate to hZps://developers.artsy.net/.
Click to the Sign In buZon on the top right of the page to navigate to login page.
Click on the Sign up buZon below the login page.
Fill out your informaVon in the registraVon form. You dont have to use your USC email. Click on the Sign up buZon.
Artsy will send you a confirmaVon email. Click on the Confirm email buZon in the received email.
Navigate to hZps://developers.artsy.net/. You should be logged in. If not, you can login by clicking the Sign In buZon on the top right corner.
Click on the My Apps buZon.
Click on the Create a New App buZon on the opened page.
Give a name to your app (it can be anything), and leave Redirect urls empty. Click on Save buZon.
Your new app will be listed in the My Apps page. Click on the edit buZon near the app you just created.
Save Client ID and Client Secret values to a document on your machine. You will use them to make requests to Artsy.
######## 4-2 Artsy API Endpoints
The full list and documentaVon of Artsy API endpoints are given in hZps://developers.artsy.net/v2/. In this homework, you will use 5 Artsy API endpoints: AuthenVcaVon, Search, ArVsts, Artworks, and Genes.
Search, ArVsts, Artworks, and Genes endpoints requires X-XAPP-Token header, which you will get through AuthenVcaVon endpoint.
4-2-1 AuthenKcaKon Endpoint (Same as Homework 6) AuthenVcaVon endpoint has the base URL hZps://api.artsy.net/api/tokens/xapp_token. You send your request using HTTP POST method. It requires two body parameters: client_id and client_secret. Set client_id to the Client ID that is assigned to your app, and client_secret to the Client Secret that is assigned to your app, which are described in the previous secVon. AuthenVcaVon endpoint returns a JSON response in the following form:
{ "type" : "xapp_token", "token" : "…", "expires_at" : "2022-05-27T23:46:35+00:00" }
The token field of the response will be used while accessing Search and ArVsts endpoints. No’ce that the token returned from the Authen’ca’on API expires in 1 week. You can either implement a logic that refreshes the token when it expires (elegant soluVon) or get a new token before each request (not elegant soluVon). For the purposes of this homework, we will not grade how you implement this logic. You are free to do it either way.
4-2-2 Search Endpoint (Same as Homework 6) Search endpoint allows you to search queries in Artsy DB. It has the base URL hZps://api.artsy.net/api/ search. You send your request using HTTP GET method. It accepts query parameter q. You send your search query through this parameter. The maximum number of results can be set by size parameter, which has the maximum value of 10. In this homework, you will always set it to 10. In addiVon to the query parameter, you should set X-XAPP-Token header in your request to the token returned from AuthenVcaVon endpoint.
Example request: hZps://api.artsy.net/api/search?q=picasso&size=
The server returns a JSON result, excerpt from which is given below.
The search results are listed in [_embedded][results] field. Search endpoint returns search results across 5 types: arVst, artwork, profile, gene and show. In this homework, we are only interested in arVst results. A{er making a request to the Search API, you will filter results by choosing the ones with og_type equal to arVst. The ID of arVsts can be extracted from the ["_links"]["self"]["href"] field of each result. The part a{er the last slash symbol is the ID of the arVst. (e.g. if the arVst link is hZps:// api.artsy.net/api/arVsts/4d8b928b4eb68a1b2c0001f2, arVst ID is 4d8b928b4eb68a1b2c0001f2)
Artsy search results are paginated, meaning that it returns a specific number of results a{er each request (set by the size parameter) and if the remaining results are wanted, another request can be made to the link in the [_links][next][href] field of the response. In this homework, you will only use results from the first page and will not make addiVonal requests.
We are interested in [Vtle] (name of the arVst) and ["_links"]["thumbnail"]["href"] (image for the arVst) fields as well as the IDs of arVsts in this homework. When an arVst does not have an image, ["_links"]["thumbnail"]["href"] field contains /assets/shared/missing_image.png.
4-2-3 ArKsts Endpoint (Same as Homework 6) ArVsts endpoint is used to get details about an arVst. It has the base URL hZps://api.artsy.net/api/arVsts. You send your request using HTTP GET method. It accepts a query parameter id , denoVng the ID of an arVst. Differently from the Search API, you append the id parameter to the link without specifying the name of the parameter. (i.e., You send request to hZps://api.artsy.net/api/arVsts/{id}) Similar to the
search endpoint, you should set X-XAPP-Token header in your request to the token returned from AuthenVcaVon endpoint.
Example request: hZps://api.artsy.net/api/arVsts/4d8b928b4eb68a1b2c0001f
The server returns a JSON result as given below.
In this homework, we are interested in [name], [birthday], [deathday], [naVonality] and [biography] fields of this response.
4-2-4 Artworks Endpoint Artworks endpoint is used to get a list of artworks that belong to other enVVes (i.e., arVsts, partners, shows, collecVons, users). In this homework, we are interested in retrieving the artworks of a specific arVst. Artworks endpoint has the base URL hZps://api.artsy.net/api/artworks. You send your request using HTTP GET method. It accepts a query parameter ar’st_id denoVng the ID of the arVst, artworks of which are being retrieved. Similar to the search endpoint, the maximum number of results can be set by size parameter, which has the maximum value of 10. In this homework, you will always set it to 10. Similar to the search and arVsts endpoints, you should set X-XAPP-Token header in your request to the token returned from AuthenVcaVon endpoint.
Example request: hZps://api.artsy.net/api/artworks?arVst_id=4d8b928b4eb68a1b2c0001f2&size=
The server returns a JSON result excerpt from which is given below.
The artworks are listed in [_embedded][artworks] field. We are interested in [id] (ID of the artwork), [Vtle] (name of the artwork), [date] (creaVon year of the artwork) and [links] [thumbnail][href] (image of the artwork) fields of each artwork result.
Similar to search results, artworks results are paginated, meaning that the endpoint returns a specific number of results a{er each request (set by the size parameter) and if the remaining results are wanted, another request can be made to the link in the [_links][next][href] field of the response. In this homework, you will only use results from the first page and will not make addiVonal requests.
4-2-5 Genes (Categories) Endpoint Genes endpoints is used to get metadata about arVsts or artworks in Artsy. You will use it to get metadata about artworks. Since gene is a strange word for this context, we use the word category instead. Genes endpoint has the base URL hZps://api.artsy.net/api/genes. You send your request using HTTP GET method. It accepts a query parameter artwork_id denoVng the ID of the artwork for which categories are being retrieved. Similar to the search, arVsts and artworks endpoints, you should set X- XAPP-Token header in your request to the token returned from AuthenVcaVon endpoint.
Example request: hZps://api.artsy.net/api/genes?artwork_id=515b0f9338ad2d78ca
The server returns a JSON result except from which is given below.
The categories are listed in [_embedded][genes] field. We are interested in [name] (name of the category) and [_links][thumbnail][href] (image of the category) fields of this response.
Similar to search and artworks results, gene results are paginated, meaning that the endpoint returns a specific number of results a{er each request (set by the size parameter) and if the remaining results are wanted, another request can be made to the link in the [_links][next][href] field of the response. In this homework, you will only use results from the first page and will not make addiVonal requests.
######## 4.3 System Overview (Similar to Homework 6)
The system contains three components: 1) browser (frontend), 2) Node.js applicaVon (backend) and 3) Artsy servers. You will implement the frontend and the backend. Your backend will have two funcVonaliVes: serving the frontend staVc files to the browser and responding frontends AJAX requests by fetching data from Artsy servers. You will not directly call Artsy API from the frontend as it requires disclosing Client Id and Client Secret (and/or XAPP_TOKEN) to the public. The data flow diagram a{er an AJAX call is shown below.
Sending a request to anywhere except your backend from the frontend will result in a 4-point penalty. Please do not directly call Artsy API endpoints from your frontend.
All requests from frontend to backend must be implemented using HTTP GET method, as you will not be able to send us sample backend endpoint links as a part of your submission if you use HTTP POST.
######## 4-4 Page Layout
The page contains a header secVon, a content secVon and a footer secVon arranged verVcally.
The header secVon is a staVc bar (Hint: Check Bootstrap navbar component) containing site Vtle ArVst Search on its le{. The footer secVon is another staVc bar containing Artsy aZribuVon Powered by Artsy., in which the Artsy logo is placed before the word Artsy. When Artsy text on the footer is clicked, the page is redirected to Artsy homepage.
Page Header
Page Footer
The content secVon contains the contents of the page, in which the following features will be shown.
######## 4-5 Search Form
When a user opens the page for the first Vme, there is only a search form (Hint: Check Bootstrap Forms) in the content secVon. Search form contains three items: an input secVon, a search buZon and a clear buZon, shown below.
Search Form
The behavior of the Clear buZon is described in SecVon 4-8.
Search buZon is enabled if and only if the input secVon contains some input as shown below. (Hint: check disabled aZribute).
Search BuZon is Enabled when Input SecVon is not Empty
ArVst names will be entered into the input secVon of the search form. The input secVon has the placeholder value Please enter an arVst name., which is shown when the input field is empty. When the input secVon is focused (i.e., input secVon is clicked and the cursor is blinking within the field), its style changes as shown below.
Input SecVon when Focused
User can iniVate to search by either 1) clicking search buHon or 2) by hiJng enter key. User cannot iniVate search when the input secVon is empty because the search buZon is disabled.
Similar to Homework 6, when the search is iniVated, your frontend will do an AJAX call to the backend, sending the input text. Upon receiving the request, your backend will make a request to Artsy Search API, forwarding the input text to Artsy Search API via parameter q as described in the Search Endpoint secVon above. UnVl a response is received from the backend, a spinner (Hint: Check Bootstrap spinners) will be shown near the search buZon as shown below.
Spinner is Shown UnVl a Response Arrives
When the response arrives, spinner will be hidden, and the results are shown in the result list.
######## 4-6 Result List
The results of the search are shown as a list of cards (Hint: Check Bootstrap Cards), similar to Homework
- Each card contains the arVst image with link retrieved from ["_links"]["thumbnail"]["href"] field of an arVst result in the response of search endpoint. Below the image, the arVst name is listed corresponding to the [Vtle] field of the arVst result. The list of result cards is scrollable. The arVst names have a blue background color ( html Color Code: #205375).
Result List
If a parVcular arVst does not have an image, Artsy returns /assets/shared/missing_image.png in the ["_links"]["thumbnail"]["href"] field as menVoned in SecVon 4-2-2. In this case, you will place Artsy logo as the arVst image as shown below.
Artsy Logo is Shown if an ArVst Does Not Have an Image
If the search results are empty, i.e. no arVsts match the given query, an error message containing text No results. will be shown as below (Hint: Check Bootstrap Alerts).
No ArVsts Match the Query
When a card is hovered, its background color changes to darker blue (HTML Color Code: #112B3C) as shown below.
The Background Color Change of a Hovered Card
When an arVst card is clicked, your frontend will do an AJAX call to your backend to get arVst details. In order to get arVst details, you must send arVst ID to the backend. For that, you have to associate arVst IDs with cards, which you can do during iniVal search by sending arVst IDs from your backend to the frontend as a part of the response. UnVl a response is received from the backend, a spinner is shown below the result list as shown below.
Spinner is Shown UnVl a Response Arrives
The selected cards background color is permanently set to darker blue a{er the click, which denotes the acVve card for which details are being shown. It will remain darker blue unVl another card is selected, at which point the background color of the newly selected card will be set to darker blue and the original cards background will set to original blue.
When the response arrives for arVst details, you will hide the spinner and show the arVst details.
######## 4-7 ArKst Details
ArVst details are shown in two tabs: ArVst Info and Artworks (Hint: Check Bootstrap Navs and Tabs).
4-7-1 ArKst Info Tab ArVst Info tab contains the same informaVon as Homework 6. It includes arVst name, arVst birth year, arVst death year, arVst naVonality and arVst biography retrieved from ArVsts endpoint as shown below.
ArVst Info Tab
First line contains the name of the arVst followed by birth and death days. Next line contains the naVonality of the arVst. Next, the biography is shown. This informaVon corresponds to [name], [birthday], [deathday], [naVonality] and [biography] fields of the arVsts endpoint response. Similar to Homework 6, if any of the fields are empty, you should simply leave them blank. Examples are given below.
No Biography, No Birth Year, No Death Year
No NaVonality, No Death Year, No Biography
No Death Year, No Biography
4-7-2 Artworks Tab Artworks tab contains the artworks of the selected arVst. Artworks are retrieved from the Artworks endpoint described in SecVon 4-2-4. Example is shown below.
First Four Artworks of Claude Monet (Page Contains More)
Each artwork has an image corresponding to the [links][thumbnail][href] field of the artwork (See SecVon 4-2-4), a name corresponding to the [Vtle] field of the artwork (See SecVon 4-2-4) and a creaVon year corresponding to the [date] field of the artwork (See SecVon 4-2-4). Artworks are listed using Bootstrap Cards.
If an arVst does not have any Artworks in Artsy, you should show an error message containing text No artworks. as shown below.
ArVst does not have any Artworks
A Categories buZon below each artwork opens a modal (Hint: See Bootstrap Modals) in which categories for the artwork retrieved from the Genes Endpoint (See SecVon 4-2-5) are shown.
4-7-3 Categories Modal The categories modal has a Vtle and a content secVon separated by a line as shown below.
Categories Modal SecVons
The Vtle secVon contains the image of the artwork, name of the artwork and creaVon date of the artwork. Content secVon contains the categories of the artwork retrieved from the Genes Endpoint.
Each category has a name corresponding to the [name] field of the gene (See SecVon 4-2-5) and an image corresponding to the [_links][thumbnail][href] field of the gene (See SecVon 4-2-5).
When the Categories buZon of an artwork is clicked, the modal is opened, and a request is sent to the backend to retrieve the categories (or genes) of an artwork. In order to get categories, you must send artwork ID to the backend. You can associate artwork IDs with Categories buZons using the IDs provided by the Artworks endpoint.
UnVl a response arrives, a spinner is shown in the content secVon of the modal as shown below. Spinner is replaced by the categories when the response arrives. Each category is shown using a Bootstrap Card.
Spinner is Shown unVl Categories Response Arrives
Spinner is Replaced with Categories when Response Arrives
If a parVcular artwork does not have any categories, an error message containing the text No categories. Is shown in the content secVon of the modal as shown below.
Artwork does not have any Categories
######## 4-8 Clear Bu\on of the Search Form
The clear buZon of the search form brings to page to its iniVal state. It clears the input secVon, result list and arVst details as shown below.
Before and A{er Clicking the Clear BuZon
######## 4-9 Different Use Cases
When a user clicks on another search result while the details of an arVst are being shown, the website will hide the arVst details and show the spinner below result list unVl a response arrives. The background color of the newly selected card will be set to darker blue, and the background color of the previously selected card will be set to original blue. When the response arrives, the details of the newly selected arVst will be shown, and the spinner will be hidden.
When a user searches a new arVst using the search form while the details of an arVst are shown, the details and the result list will not be changed, and the spinner of the search buZon will be shown unVl a response arrives. Result list will be replaced when the response arrives, and the arVst details will be cleared. Spinner will be hidden, and all background colors of results will be set to original blue.
When a user searches a new arVst using the search bar while search results are being shown without any details, the spinner of the search buZon will be made visible unVl a response arrives. Search results will not be hidden, but they will be replaced whenever results arrive. When the response arrives, spinner will be hidden.
######## 4-10 Responsive Design
The webpage you develop must be responsive. One easy way to test responsive behavior is to use Google Chrome Responsive Design Mode in Developer Console. Here are some snapshots for Google Pixel 5 phone using the Google Chrome Responsive Design Mode. All funcVons should work on mobile devices.
5 Homework Submission
In your course homework page (on GitHub Pages), update the Homework 8 link to refer to your deployed website. Also, provide an addiVonal link to one of your cloud query entry points, below the homepage link. Your project must be hosted on GCP. Graders will verify that these links are indeed poinVng to GCP.
Also, submit your source code file to DEN D2L as a ZIP archive. Include your frontend and backend source code, plus any addiVonal files needed to build your app (e.g., yaml file). The Vmestamp of your last submission will be used to verify if you used any grace days.
6 Notes
- You can use jquery for Homework 8, but it is not needed.
- You must use Bootstrap for Homework 8. If Bootstrap is not used, a 4-point reduc’on will be applied.
- Appearance of the webpage should be like the reference videos as much as possible.
- Artsy lacks informaVon for a lot of arVsts. Here are some examples for tesVng:
o Pablo Picasso: Has every detail in ArVst Info, has a single artwork.
o Vincent van Gogh: Has everything except biography in ArVst Info, has 10 artworks.
o Yayoi Kusama: Has everything except death date (Since she is not dead) in ArVst Info, has
no artworks.
o Claude Monet: Has every detail in ArVst Info, has 10 artworks.
o Raphael: Has everything except biography in ArVst Info, has 10 artworks, some of which
does not have categories.
7 Hints
- You should use the domain name of the GCP service you created in Homework 7 to make requests. For example, if your GCP server domain is example.appspot.com, hZps:// example.appspot.com will become your base URL. The example subdomain in the above URLs will be replaced by your choice of subdomain from the cloud service.
8 StaKc Resources
- You can find the Artsy logo required for this homework in hZps://csci571.com/hw/hw8/images/ images.zip.