js python html代写-CSCI571|学霸联盟

js python html代写-CSCI571

时间：2021-04-04

1
Homework 8: Angular, Ajax, JSON, Responsive Design, and
Node.js
CSCI571 Spring 2021

1. Objectives
• Get familiar with AJAX and JSON technologies
• Use a combination of HTML5, Bootstrap and Angular on client side
• Use Node.js on server side
• Get familiar with Bootstrap to enhance the user experience using responsive design
• Get hands-on experience of Cloud services hosting NodeJS/Express
• Learn to use popular APIs such as TMDB Api
2. Background
2.1 AJAX and JSON
AJAX (Asynchronous JavaScript + XML) incorporates several technologies
• Standards-based presentation using XHTML and CSS
• Result display and interaction using the Document Object Model (DOM)
• Data interchange and manipulation using JSON
• Asynchronous data retrieval using XMLHttpRequest
• JavaScript binding everything together

2.2 Bootstrap
Bootstrap is a free collection of tools for creating responsive websites and web applications. It
contains HTML and CSS-based design templates for typography, forms, buttons, navigation and
other interface components, as well as optional JavaScript extensions. To learn more details about
Bootstrap please refer to the lecture material on Responsive Web Design (RWD). You should use
Bootstrap 4 in this homework.

2.3 Cloud Services

2.3.1 Google App Engine (GAE)
Google App Engine applications are easy to create, easy to maintain, and easy to scale as your
traffic and data storage needs change. With App Engine, there are no servers to maintain. You
simply upload your application and it’s ready to go. App Engine applications automatically scale
based on incoming traffic. Load balancing, micro services, authorization, SQL and noSQL
databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, and
security scanning are all supported natively and are highly customizable.
To learn more about GAE support for Node.js visit this page:
https://cloud.google.com/appengine/docs/standard/nodejs/
2
2.4 Angular
Angular is a toolset for building the framework most suited to your application development. It is
fully extensible and works well with other libraries. Every feature can be modified or replaced to
suit your unique development workflow and feature needs. Angular combines declarative
templates, dependency injection, end to end tooling, and integrated best practices to solve
development challenges. Angular empowers developers to build applications that live on the
web, mobile, or the desktop.
For this homework, Angular 8+ (Angular 8, 9 or 10) can be used, but Angular 10 is
recommended. Please note Angular 8+ will need familiarity with Typescript and component-
based programming.

To learn more about Angular 8+, visit this page:
https://angular.io/

2.5 Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-
driven, non-blocking I/O model that makes it lightweight and efficient. Node.js package
ecosystem, npm, is the largest ecosystem of open source libraries in the world.

To learn more about Node.js, visit:
https://Node.js.org/en/
Also, Express.js is strongly recommended. Express.js is a minimal and flexible Node.js web
application framework that provides a robust set of features for web and mobile applications. It is
in fact the standard server framework for Node.js.

To learn more about Express.js, visit:
http://expressjs.com/
You can use nodemon while developing, visit:

https://www.npmjs.com/package/nodemon

All TMDB API calls should be done through your Node.JS server, otherwise will cause 4-
point penalty.
3
3. High Level Description

In this exercise, you will create a webpage that allows you to search for information regarding
movies and TV shows using the TMDB API and upon selection can display results on the details
page of that specific movie or TV show. You can view popular, top-rated and trending movies and
TV shows on the home page along with currently playing movies. The application evolves from
previous homework.

The user will first open Home page, where the navbar contains Search Bar and user can enter the
movie or TV show name and select from a list of matching movie/TV show names along with
images using “autocomplete”. Selecting the movie or TV show name will lead to the details page
of that movie or TV show.

At the top of Home page, a Carousel of currently playing movie posters is displayed. Recently
visited movies and TV shows are listed under Continue Watching in the Home page. Popular, Top
Rated and Trending movies and TV shows are displayed below it.

There are 4 routes for this application:
a) Home page Route [‘/’] – It is a default route of this application.
b) Movie Details Route [‘/watch/movie/’] – It displays the details of the movie with
id=
c) TV show Details Route [ ‘/watch/tv/’] – It displays the details of the TV show with
id=
d) Watchlist Route [‘/mylist’] – It displays the watchlist of the user.

Instructions on how to use the API are given in Section 4. All implementation details and
requirements will be explained in the following sections.

3.1 Navbar

The Navigation bar must be present on top of the page and be visible all the time. You can use
Bootstrap to create a navbar. It consists of following menu options:
• Home
• MyList
• Search bar

“USC Films” upon clicking will lead to the Home page.

3.1.1 Search Functionality

You must replicate the Search Bar at Top-right in the navigation bar using ngbTypeahead from
ng-bootstrap (Refer section 5.3).

The Search Bar allows user to enter a keyword (Movie name / TV show name) to retrieve
information. Based on the user input, the text box should display a list of top 7 matching movies
4
and TV shows names along with their poster images. The autocomplete JSON data is retrieved
from the TMDB Multi-Search API (refer to Section 4.1.1).
The following is an example of calling this API:
https://api.themoviedb.org/3/search/multi?api_key=97588ddc4a26e3091152aa0c9a40de22&language=en-
US&query=game

3.2 Home Page

3.2.1 Currently Playing Movies Carousel
• Refer to section 4.1.4 showing sample TMDB API calls to get Currently Playing Movies related
information
• Collect Top 5 results from JSON result and create a carousel consisting of 5 slides. It has auto-
rotate time of 5 seconds
• Auto rotate will pause on Hover and on Focus
• Refer to Section 5.3 for Implementation Hints for creating carousel using ng-bootstrap
• Each slide contains poster image of the movie and upon hovering should produce the required
zoom effect and the name of the movie should appear at the bottom of the slide
• Selecting a particular slide, will take you to details page of that movie

3.2.2 Continue Watching Section
• When the user opens Home page for the first time, there will be no continue watching section.
• Once the user searches for any movie or TV show and selects, they will visit the details page of
that movie or TV show. That movie or TV show gets added to the beginning of Continue
Watching section’s carousel.
• This List will be maintained in local storage of the application. For more details on local
storage, see section 5.4.

3.2.3 Popular Movies Section

• Popular Movies carousel displays a list of Popular Movies from Popular Movies endpoint. Refer
to section 4.1.5 for TMDB example. Following is the template of API call:
https://api.themoviedb.org/3/movie/popular?api_key=<>&language=en-
US&page=1

3.2.4 Top Rated Movies Section
Top Rated Movies carousel displays a list of Top-Rated Movies from Top-Rated Movies
endpoint. Refer to section 4.1.3 for TMDB example. Following is the template of API
call:https://api.themoviedb.org/3/movie/top_rated?api_key=<>&language=en-
US&page=1

3.2.5 Trending Movies Section
Trending Movies carousel displays a list of Trending Movies from Trending Movies endpoint.
Refer to section 4.1.2 for TMDB example. Following is the template of API call:
https://api.themoviedb.org/3/trending/movie/day?api_key=<>

5
3.2.6 Popular TV Shows Section
Popular TV shows carousel displays a list of Popular TV shows. Refer to section 4.1.14 for
TMDB API example. Following is the template of API call:
https://api.themoviedb.org/3/tv/popular?api_key=<>&language=en-
US&page=1

3.2.7 Top Rated TV Shows Section
Top Rated TV Shows carousel displays a list of highest Rated TV shows. Refer to section 4.1.13
for TMDB example. Following is the template of API call:
https://api.themoviedb.org/3/tv/top_rated?api_key=<>&language=en-
US&page=1

3.2.8 Trending TV shows Section
Trending TV shows carousel displays a list of Trending TV shows. Refer to section 4.1.12 for
TMDB example. Following is the template of API call:
https://api.themoviedb.org/3/trending/tv/day?api_key=<>

Styling and Functionality for Sections from 3.2.2 to 3.2.8, 3.3.5 and 3.3.6:
• Refer to Section 5.3 for Implementation Hints for creating carousel using ng-bootstrap
• Carousel consists of 6 movie cards in a slide with left and right arrows at each end used for
sliding to the next/previous set of cards
• Each Movie or TV show card, upon hovering should produce the required zoom effect and the
name of TV show or movie at the bottom of the card.
• Selecting a particular movie’s or TV show’s card will take you to details page of that movie or
Tv show.

3.3 Details Page

3.3.1 Details of Searched Movie/ TV show

After the user selects a Movie or TV show from autocomplete suggestions dropdown, page should
route to /watch// path where can be movie or tv.
(example: /watch/movie/299534 if selected item’s is movie or /watch/tv/1668 if
selected item’s is tv).
The following components need to be displayed on successful search:
• Video of trailer (if not present, then teaser) of the movie or TV show is played using
Youtube player (refer section 5.1). If no video is available, use default video id as
tzkWB85ULJY
• Title of the movie or TV show
• Tagline of the movie or TV show
• Release year, Average votes, Duration of the Movie/TV show
• Genres, spoken languages
• Overview
• Full cast and crew
6
• Reviews
• Recommended and Similar movies for movie or Recommended and similar
TV shows for tv
Refer to sections 4.1.8, 4.1.9, 4.1.17 and 4.1.18 for TMDB API Templates and
Examples.
• There is button “Add to Watchlist”, which when clicked adds that particular
movie or TV show at the top of the watchlist. It also produces an alert saying,
“Added to watchlist”. Alert closes automatically after 5 seconds or can be
manually closed by user.
• On clicking “Remove from Watchlist” button movie or TV show gets removed
from watchlist. After removing from watchlist button changes back to “Add to
watchlist”. Alert closes automatically after 5 seconds or can be manually closed
by user.

3.3.2 Share Options
• User can share the Video (teaser or trailer links, priority is given to trailer) on Twitter
and Facebook. For details on how to use it, refer Section 4.2.
• Twitter and Facebook should open in a new browser tab, if clicked.
• In Twitter, it should create a post having following content:
Watch <Youtube link of the video> #USC #CSCI571 #FightOn • In Facebook, it should create a post, which contains Youtube video link. 3.3.3 Full Cast and Crew section • Refer to sections 4.1.11 Movie cast End point and 4.1.20 TV show Cast Endpoint for API Template and Examples • Each cast member is displayed on a card with their image, name and character name • There is a scroll bar below the cards, which when scrolled shows the cards for rest of the cast • When clicked on one of the cards, open a Modal window. For details regarding implementing a Modal refer section 5.3. • Modal contains the following fields: o Name of the Cast member o Image of the cast member o Date of birth o Place of birth o Gender o Known for o Other names of the cast member o External ids of cast member - upon hovering, a small tooltip appears Example: Visit IMDB, Visit Instagram 7 On clicking, it should take the user to that social media handle of that cast member o Biography of the cast member Refer sections 4.1.21 and 4.1.22 to find example API calls to get external ids and details about cast members. If any of the required fields are null, they should not appear in the modal. Ignore them. On clicking the cross symbol or anywhere outside of the modal view, modal should close. 3.3.4 Reviews • Refer to sections 4.1.10 and 4.1.19 to find the sample API calls to TMDB to get reviews for a particular movie or TV show using their id and API key. • We display the number of reviews retrieved for the Movie or TV show. A maximum of 10 reviews should be displayed • Each review will contain author’s name, profile picture, rating given, written date, time and content of the review • “Read the rest” text will open the full review in new tab • If the content of review is more than 3 lines, it should end with ellipsis the end of 3rd line with “…” 3.3.5 Recommended Movies/ TV shows • Refer to sections 4.1.6 and 4.1.15 to find the example TMDB API calls to get recommended movies/TV shows • We give recommended movies or TV shows depending on the media_type of the item displayed on details page 3.3.6 Similar Movies/TV shows • Refer to sections 4.1.7 and 4.1.16 to find the example TMDB API calls to get recommended movies/TV shows • We give similar movies or TV shows depending on the media_type of the item displayed on details page 3.4 Watchlist Menu This menu will display all the Movies and TV shows that are added to the watchlist by the user. This watchlist will be maintained in local storage of the application. For more details on local storage, see section 5.4. • Each Movie or TV show is displayed in the form of a card • Upon hovering, it produces zooming effect and name of the Movie or TV show should appear at the bottom of the card • Most Recently added Movie or TV show should be added at the beginning of the list. Once the Movie or TV show which is in the watchlist is visited again, it shifts to the beginning of the watchlist • On clicking Movie or TV show card, it should take user to the details page of that Movie or TV show • If watchlist is empty, it should display the alert showing the message “No items found in Watchlist”. 8 3.5 Custom Scroll Bar There is customized scroll bar for the whole web application. 3.6 Footer The Footer must be present at the end of each page. It should contain following line: “Powered by TMDB. Developed by <student’s name>”. Here <student’s name> must be replaced with your name. 3.7 Responsive Design You must watch the video carefully to see how each page looks like on mobile devices. All functions must work on mobile devices like iphone 6/7/9 plus. Please note that for Sections from 3.2.2 to 3.2.8, 3.3.5 and 3.3.6, the indicators at bottom of carousel should be disabled and the Hover effect should be enabled by default in mobile view. One easy way to test for mobile devices is to use Google Chrome Responsive Design Mode 4. API’s description 4.1 TMDB API calls similar to Homework 6 In this homework, we will use TMDB API. 4.1.1 Multi-Search Endpoint to search for both Movies and TV shows From this endpoint, you will get a lot of information about the shows, movies, and people that are related to your search query. For each object that is returned, find out if it is a movie, show, or a person through the ‘media_type’ property returned for each object. If it is a movie or a tv show, collect it, otherwise, ignore it. API Template: https://api.themoviedb.org/3/search/multi?api_key=<<api_key>>&language=enUS&query= <<search_query>> URL parameters to be provided in API Call: • query: search query • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. 9 API Example: https://api.themoviedb.org/3/search/multi?api_key=97588ddc4a26e3091152aa0c9a40de22& language=en-US&query=game For each TV show, you will only need these fields: • id - the ID of the TV Show • name - the name of the TV Show • backdrop_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + backdrop_path • Media_type – tv For each Movie, you will only need these fields: • id - the ID of the Movie • name - the name of the Movie • backdrop_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + backdrop_path • Media_type - movie 4.1.2 Trending Movies Endpoint This endpoint will be used to get information about trending movies API Template: https://api.themoviedb.org/3/trending/movie/day?api_key=<<api_key>> URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/trending/movie/day?api_key=97588ddc4a26e3091152aa0c9a4 0de22 You will only need these fields: • id - the ID of the Movie • title - the name of the Movie • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.3 Top-Rated Movies Endpoint This endpoint will be used to get information about highest rated movies API Template: https://api.themoviedb.org/3/movie/top_rated?api_key=<<api_key>>&language=en- 10 US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/movie/top_rated?api_key=97588ddc4a26e3091152aa0c9a40de 22&language=en-US&page=1 You will only need these fields: • id - the ID of the Movie • title - the name of the Movie • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.4 Currently playing Movies Endpoint This endpoint will be used to get information about currently playing movies API Template: https://api.themoviedb.org/3/movie/now_playing?api_key=<<api_key>>&language=en- US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/movie/now_playing?api_key=97588ddc4a26e3091152aa0c9a4 0de22&language=en-US&page=1 You will only need these fields: • id - ID of the Movie • title - name of the Movie • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path. Ignore those movies which don’t have poster_path. 4.1.5 Popular Movies Endpoint This endpoint will be used to get information about popular movies API Template: https://api.themoviedb.org/3/movie/popular?api_key=<<api_key>>&language=en- US&page=1 11 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/movie/popular?api_key=97588ddc4a26e3091152aa0c9a40de2 2&language=en-US&page=1 You will only need these fields: • id - the ID of the Movie • title - the name of the Movie • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.6 Recommended Movies Endpoint This endpoint will be used to get information about recommended movies API Template: https://api.themoviedb.org/3/movie/<<movie_id>>/recommendations?api_key=<<api_key> >&language=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Movie_id: id of the movie API Example: https://api.themoviedb.org/3/movie/464052/recommendations?api_key=97588ddc4a26e309 1152aa0c9a40de22&language=en-US&page=1 You will only need these fields: • id - the ID of the Movie • title - the name of the Movie • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.7 Similar Movies Endpoint This endpoint will be used to get information about movies similar to the selected movie API Template: https://api.themoviedb.org/3/movie/<<movie_id>>/similar?api_key=<<api_key>>&languag 12 e=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Movie_id: id of the movie API Example: https://api.themoviedb.org/3/movie/464052/similar?api_key=97588ddc4a26e3091152aa0c9 a40de22&language=en-US&page=1 You will only need these fields: • id - the ID of the Movie • title - the name of the Movie • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.8 Movies Video Endpoint This endpoint will be used to get video related to the selected movie API Template: https://api.themoviedb.org/3/movie/<<movie_id>>/videos?api_key=<<api_key>>&languag e=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Movie_id: id of the movie API Example: https://api.themoviedb.org/3/movie/464052/videos?api_key=97588ddc4a26e3091152aa0c9a 40de22&language=en-US&page=1 You will only need these fields: • site – the website where video is available • type – the type of video available • name – the caption for video • key – You need to construct video link like this: "https://www.youtube.com/watch?v=" +key 4.1.9 Movie Details Endpoint 13 This endpoint will be used to get information about Movie details API Template: https://api.themoviedb.org/3/movie/<<movie_id>>?api_key=<<api_key>>&language=en- US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Movie_id: id of the movie API Example: https://api.themoviedb.org/3/movie/464052?api_key=97588ddc4a26e3091152aa0c9a40de22 &language=en-US&page=1 You will only need these fields: • title – title of the movie • genres – movie’s genres • spoken_languages – Languages in which movie is available • release_date – release date of the movie • runtime – duration of movie • overview – movie’s synopsis • vote_average – movie rating votes • tagline – movie’s tag line 4.1.10 Movie Reviews Endpoint This endpoint will be used to get reviews related to the selected movie API Template: https://api.themoviedb.org/3/movie/<<movie_id>>/reviews?api_key=<<api_key>>&langua ge=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Movie_id: id of the movie API Example: https://api.themoviedb.org/3/movie/464052/reviews?api_key=97588ddc4a26e3091152aa0c9 a40de22&language=en-US&page=1 You will need a list of the following fields: • author – the author of the review • content – review’s content • created_at – date at which review was created • url – link to the review 14 • rating – rating value if not null, take 0 otherwise • avatar_path – profile picture of author When you get the id from avatar_path, you can append https://image.tmdb.org/t/p/original at the beginning of it, otherwise use the link provided. If avatar_path is not present, use the default image source as “https://encrypted- tbn0.gstatic.com/images?q=tbn:ANd9GcRHnPmUvFLjjmoYWAbLTEmLLIRCPpV_Ogx CVA&usqp=CAU” or download it from the website. 4.1.11 Movie Cast Endpoint This endpoint will be used to get cast related information of the selected movie API Template: https://api.themoviedb.org/3/movie/<<movie_id>>/credits?api_key=<<api_key>>&languag e=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Movie_id: id of the movie API Example: https://api.themoviedb.org/3/movie/464052/credits?api_key=97588ddc4a26e3091152aa0c9a 40de22&language=en-US&page=1 You will need a list of the following fields: • Id – id of the cast member • name – name of the cast member • character – character’s name • profile_path – Construct image url: https://image.tmdb.org/t/p/w500/+ profile_path If profile picture is not available, don’t display those cast members. 4.1.12 Trending TV Shows Endpoint This endpoint will be used to get information about trending TV shows API Template: https://api.themoviedb.org/3/trending/tv/day?api_key=<<api_key>> URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/trending/tv/day?api_key=97588ddc4a26e3091152aa0c9a40de2 2 You will only need these fields: • id - the ID of the TV show 15 • name - the name of the TV show • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.13 Top-Rated TV shows Endpoint This endpoint will be used to get information about top-rated TV shows API Template: https://api.themoviedb.org/3/tv/top_rated?api_key=<<api_key>>&language=en- US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/tv/top_rated?api_key=97588ddc4a26e3091152aa0c9a40de22& language=en-US&page=1 You will only need these fields: • id - the ID of the TV show • name - the name of the TV show • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.14 Popular TV shows Endpoint This endpoint will be used to get information about popular TV shows API Template: https://api.themoviedb.org/3/tv/popular?api_key=<<api_key>>&language=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. API Example: https://api.themoviedb.org/3/tv/popular?api_key=97588ddc4a26e3091152aa0c9a40de2 2&language=en-US&page=1 You will only need these fields: • id - the ID of the Tv show • name- the name of the Tv show • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 16 4.1.15 Recommended TV shows Endpoint This endpoint will be used to get information about recommended TV shows API Template: https://api.themoviedb.org/3/tv/<<tvshow_id>>/recommendations?api_key=<<api_key>>&l anguage=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • tvshow_id: id of the TV show API Example: https://api.themoviedb.org/3/tv/85271/recommendations?api_key=97588ddc4a26e3091152a a0c9a40de22&language=en-US&page=1 You will only need these fields: • id - the ID of the TV show • name - the name of the TV show • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.16 Similar TV shows Endpoint This endpoint will be used to get information about TV shows similar to the selected TV show API Template: https://api.themoviedb.org/3/tv/<<tvshow_id>>/similar?api_key=<<api_key>>&language=e n-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • tvshow_id: id of the TV show API Example: https://api.themoviedb.org/3/tv/85271/similar?api_key=97588ddc4a26e3091152aa0c9a40de 22&language=en-US&page=1 You will only need these fields: • id - the ID of the Movie • name - the name of the Movie 17 • poster_path – You need to construct image url like this: https://image.tmdb.org/t/p/w500 + poster_path 4.1.17 TV show Video Endpoint This endpoint will be used to get video related to the selected TV show API Template: https://api.themoviedb.org/3/tv/<<tvshow_id>>/videos?api_key=<<api_key>>&language=e n-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • Tvshow_id: id of the TV show API Example: https://api.themoviedb.org/3/tv/85271/videos?api_key=97588ddc4a26e3091152aa0c9a40de 22&language=en-US&page=1 You will only need these fields: • site – the website where video is available • type – the type of video available • name – the caption for video • key – You need to construct video link like this: "https://www.youtube.com/watch?v=" +key 4.1.18 TV show Details Endpoint This endpoint will be used to get information about TV show details API Template: https://api.themoviedb.org/3/tv/<<tvshow_id>>?api_key=<<api_key>>&language=en- US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • tvshow_id: id of the TV show API Example: https://api.themoviedb.org/3/tv/85271?api_key=97588ddc4a26e3091152aa0c9a40de22&lan guage=en-US&page=1 You will only need these fields: • title – title of the TV show • genres – TV show’s genres 18 • spoken_languages – Languages in which TV show is available • first_air_date – release date of the TV show • episode_run_time – duration of TV show’s episode • overview – TV show synopsis • vote_average – TV show rating votes • tagline – TV show tag line 4.1.19 TV show Reviews Endpoint This endpoint will be used to get reviews related to the selected TV show API Template: https://api.themoviedb.org/3/tv/<<tvshow_id>>/reviews?api_key=<<api_key>>&language= en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • tvshow_id: id of the TV show API Example: https://api.themoviedb.org/3/tv/85271/reviews?api_key=97588ddc4a26e3091152aa0c9a40d e22&language=en-US&page=1 You will need a list of the following fields: • author – the author of the review • content – review’s content • created_at – date at which review was created • url – link to the review • rating – rating value if not null, take 0 otherwise • avatar_path – avatar of author When you get the id from avatar_path, you can append “https://image.tmdb.org/t/p/original” at the beginning of it, otherwise use the link provided. If avatar_path is not present, use the default image source as “https://encrypted- tbn0.gstatic.com/images?q=tbn:ANd9GcRHnPmUvFLjjmoYWAbLTEmLLIRCPpV_Ogx CVA&usqp=CAU” or download it from the website. 4.1.20 TV show Cast Endpoint This endpoint will be used to get cast related information of the selected TV show API Template: https://api.themoviedb.org/3/tv/<<tvshow_id>>/credits?api_key=<<api_key>>&language=e n-US&page=1 19 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • tvshow_id: id of the TV show API Example: https://api.themoviedb.org/3/tv/85271/credits?api_key=97588ddc4a26e3091152aa0c9a40de 22&language=en-US&page=1 You will need a list of the following fields: • Id – id of the cast member • name – name of the cast member • character – character’s name • profile_path – Construct image url: https://image.tmdb.org/t/p/w500/+ profile_path If profile picture is not available, don’t display those cast members. 4.1.21 Cast Details Endpoint This endpoint will be used to get information related to cast member using person id API Sample: https://api.themoviedb.org/3/person/<<person_id>>?api_key=<<api_key>>&language=en- US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • person_id: id of the cast member, we can get this using 4.1.11 for movie cast members and 4.1.20 for TV show cast members API Example: https://api.themoviedb.org/3/person/550843?api_key=97588ddc4a26e3091152aa0c9a40de2 2&language=en-US&page=1 You will need a list of the following fields: • birthday – date of birth of cast member • gender – 1 for female and 2 for male, undefined if 0 • name – name of the cast member • homepage – website link for cast member • also known as – other names of cast members • known for department – talents • biography – biography of cast member 4.1.22 Cast external ids Endpoint 20 This endpoint will be used to get information related to external ids of cast member using person id API Sample: https://api.themoviedb.org/3/person/<<person_id>>/external_ids?api_key=<<api_key>>&la nguage=en-US&page=1 URL parameter in API Call: • api_key: The API access Key. It is private, please do not share with anyone. See Homework 6. • person_id: id of the cast member, we can get this using 4.1.11 for movie cast members and 4.1.21 for TV show cast members API Example: https://api.themoviedb.org/3/person/550843/external_ids?api_key=97588ddc4a26e3091152 aa0c9a40de22&language=en-US&page=1 You will need a list of the following fields: • imdb_id – imdb page for cast member (imdb.com/name/imdb_id) • facebook_id – facebook id of cast member (facebook.com/facebook_id) • Instagram_id – Instagram id if of cast member (instagram.com/Instagram_id) • Twitter_id – twitter id if of cast member (twitter.com/Twitter_id) 4.2 Socials 4.2.1 Twitter Refer the following link for details: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview 4.2.2 Facebook Refer the following link for details: https://developers.facebook.com/docs/plugins/share-button/ 5. Implementation Hints 5.1 Useful Libraries To get started with the Bootstrap toolkit, please see: https://getbootstrap.com/docs/4.0/getting-started/introduction/. Bootstrap can be imported to Angular in couple of ways. See: https://www.techiediaries.com/angular-bootstrap/ 21 Angular Youtube player: https://www.npmjs.com/package/@angular/youtube-player NG Bootstrap: https://ng-bootstrap.github.io/#/getting-started 5.2 Bootstrap UI Components Bootstrap provides a complete mechanism to make Web pages responsive for different mobile devices. In this exercise, you will get hands-on experience with responsive design using the Bootstrap Grid System. https://getbootstrap.com/docs/4.0/layout/grid/ At a minimum, you will need to use Bootstrap Forms, Alerts, Cards and Buttons to implement the required functionality. Bootstrap Forms https://getbootstrap.com/docs/4.0/components/forms/ Bootstrap Alerts https://getbootstrap.com/docs/4.0/components/alerts/ Bootstrap Cards https://getbootstrap.com/docs/4.0/components/card/ Bootstrap Buttons https://getbootstrap.com/docs/4.0/components/buttons/ 5.3 Ng-Bootstrap • Carousel - https://ng-bootstrap.github.io/#/components/carousel/examples • Alerts - https://ng-bootstrap.github.io/#/components/alert/examples • Modal -https://ng-bootstrap.github.io/#/components/modal/examples • ngbTypeahead - https://ng-bootstrap.github.io/#/components/typeahead/examples • Tooltip - https://ng-bootstrap.github.io/#/components/tooltip/examples 5.4 Local Storage Refer the following documentation for detailed understanding on Local Storage and how to use it: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage 5.5 Icons Use font-awesome icons: https://fontawesome.com/icons?d=gallery&p=2 5.6 Deploy Node.js application on Cloud Services Since Homework #8 is implemented with Node.js on Cloud Services, you should select Nginx as your proxy server (if available), which should be the default option. 6. Files to Submit 22 In your course homework page, you should update the Homework #8 link to refer to your new initial web page for this exercise. Additionally, you need to provide an additional link to the URL of the cloud service where the AJAX call is made with sample parameter values. Zip the project folder and submit on DEN. **IMPORTANT**: All videos are part of the homework description. All discussions and explanations in Piazza related to this homework are part of the homework description and will be accounted into grading. So please review all Piazza threads before finishing the assignment. <a href="https://www.xuebaunion.com">学霸联盟</a></div> </div> <div class="detail-cont-tag"> <ul> <li> <a href="/list.html?tagId=164">固体力学代写</a> </li> <li> <a href="/list.html?tagId=193">IC集成电路代写</a> </li> <li> <a href="/list.html?tagId=91">GAMS代写</a> </li> <li> <a href="/list.html?tagId=46">BigDate大数据代写</a> </li> <li> <a href="/list.html?tagId=103">mips代写</a> </li> <li> <a href="/list.html?tagId=144">人力资论文代写</a> </li> <li> <a href="/list.html?tagId=345">软件代写</a> </li> <li> <a href="/list.html?tagId=408">生理课程代写</a> </li> <li> <a href="/list.html?tagId=376">问答代写</a> </li> <li> <a href="/list.html?tagId=147">Minitab代写</a> </li> <li> <a href="/list.html?tagId=148">航空代写</a> </li> <li> <a href="/list.html?tagId=89">simulink代写</a> </li> <li> <a href="/list.html?tagId=282">marketing代写</a> </li> <li> <a href="/list.html?tagId=332">sfml代写</a> </li> <li> <a href="/list.html?tagId=4">c/c++代写</a> </li> <li> <a href="/list.html?tagId=109">密码学代写</a> </li> <li> <a href="/list.html?tagId=368">Xcode代写</a> </li> <li> <a href="/list.html?tagId=211">jmp代写</a> </li> <li> <a href="/list.html?tagId=285">verilog代写</a> </li> <li> <a href="/list.html?tagId=289">clingo代写</a> </li> <li> <a href="/list.html?tagId=51">CS代写</a> </li> <li> <a href="/list.html?tagId=182">代写</a> </li> <li> <a href="/list.html?tagId=149">webots代写</a> </li> <li> <a href="/list.html?tagId=304">电力电子元件代写</a> </li> <li> <a href="/list.html?tagId=357">推荐代写</a> </li> </ul> </div> </div> <div class="first-footer"> <div class="footer-nav item-nav contact-bottom"> <div class="title">联系我们</div> </div> <div class="footer-content first-page-content"> <div class="footer-left"> <div class="contact"> xuebaunion@vip.163.com </div> <div class="footer-text address"> 3551 Trousdale Rkwy, University Park, Los Angeles, CA </div> <div class="footer-text">留学生论文指导和课程辅导</div> <div class="footer-text">论文代写：<a target="_blank" href="https://www.lunwen-daixie.com">https://www.lunwen-daixie.com</a> </div> <div class="footer-text">课程辅导：<a target="_blank" rel="nofollow" href="https://www.vipeasydue.com">https://www.vipeasydue.com</a> </div> <div class="footer-text">无忧GPA：<a target="_blank" rel="nofollow" href="https://www.essaygpa.com">https://www.essaygpa.com</a></div> <div class="footer-text">工作时间：全年无休-早上8点到凌晨3点</div> </div> <div class="footer-right"> <div class="footer-code"> <div class="code"> <img src="../images/first/ewm1.jpg" alt="essay、essay代写" /> </div> <div class="code-text">微信客服：xiaoxionga100</div> </div> <div class="footer-code"> <div class="code"> <img src="../images/first/ewm2.jpg" alt="essay、essay代写" /> </div> <div class="code-text">微信客服：ITCS521</div> </div> </div> </div> </div> <div class="ewm"> <div class="list"> <img src=" https://www.xuebaunion.com/images/icon-ewm.png" alt="essay、essay代写" /> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  </body> </html>