CSCI 571 Homework 8: Ajax, JSON, React, RWD and Node.js solved

Description

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 XML and JSON;
• Asynchronous data retrieval using XMLHttpRequest;
• JavaScript binding everything together.
See the class slides at https://csci571.com/slides/ajax.pdf
JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main
application is in AJAX web application programming, where it serves as an alternative to the use
of the XML format for data exchange between client and server. See the class slides at:
https://csci571.com/slides/JSON1.pdf
2.2 React-Bootstrap
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch
as a true React component, without unneeded dependencies like jQuery. As one of the
oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an
excellent choice as your UI foundation.
https://csci571.com/slides/React.pdf
2.3 Amazon Web Services (AWS)
AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon Elastic
Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud,
and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in
the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically
handles the deployment details of capacity provisioning, load balancing, auto-scaling, and
2
application health monitoring. Elastic Beanstalk is built using familiar software stacks such as
the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and Apache
Tomcat for Java.
To learn more about AWS support for Node.js visit this page:
https://aws.amazon.com/getting-started/projects/deploy-nodejs-web-app/
2.4 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/flexible/Node.js/
2.5 Microsoft Azure
Microsoft Azure is a cloud computing service created by Microsoft for building, testing,
deploying, and managing applications and services through a global network of Microsoftmanaged data centers. It provides software as a service (SaaS), platform as a service (PaaS) and
infrastructure as a service (IaaS) and supports many different programming languages, tools and
frameworks, including both Microsoft-specific and third-party software and systems.
To learn more about Azure support for Node.js visit this page:
https://docs.microsoft.com/en-us/javascript/azure/?view=azure-node-latest
2.6 ReactJs
ReactJS is an open-source JavaScript library, developed by Facebook, which is used for building
user interfaces specifically for single page applications. It differs from Angular in that React is a
view layer library, not a framework like Angular. However, you can’t use React alone to build
a fully-functional web app. ReactJs uses 1-way data binding and a virtual DOM and the
rendering is done on the server-side/client-side ( https://www.clariontech.com/blog/server-siderendering-vs.-client-side-rendering ).
For this homework, ReactJs and ReactBootstrap have to be used.
To learn more about them, visit these links:
https://reactjs.org/
https://react-bootstrap.github.io/
3
2.7 Node.js
Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an eventdriven, 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 web server framework for Node.js.
To learn more about Express.js, visit:
http://expressjs.com/
Note: In this document when you see GAE/AWS/Azure it means that you can either use Google
App Engine, Amazon Web Services or Microsoft Azure Services.
The only way to implement the client side: Use React ONLY
All APIs calls should be done through your Node.JS server, except call to the autosuggest
API.
( Making any other API calls from anywhere other than your backend will result in a 4 point
penalty. )
4
3. High Level Description
In this exercise you will create a webpage to display top headlines for both New York Times and
Guardian News. Based on the selection by the user, the top-headlines should be for any of the
following domains – world, politics, business, technology and sports. Each such article can be
shared by the user on Facebook, Twitter or via Email.
The user can open up any of the article and have the option to share it on either Facebook or Twitter
or via Email. For each article, after expanding, the user can even add comments on the articles if
they like.
The user can also search for any keyword to read articles about any topic of his/her choice with
autosuggestions available for his/her search query.
Your webpage should also support adding articles to and removing articles from the Bookmark
tab. All the implementation details and requirements will be explained in the following sections.
When a user initially opens your webpage, your page should look like Figure 1.
Figure 1: Initial Website
3.1 Tabs
There are 6 different tabs/sections that your website needs to have namely – Home, World,
Politics, Business, Technology, Sports. Each of these sections/tabs display the top articles from
any domain (for the Home tab) or the top articles belonging to the selected section/tab. The
articles from each domain change based on the tab selected.
3.1.1 Section based Articles
Figure 2 and Figure 3 show samples from both Guardian news and NY Times.
5
Figure 2: Guardian section-based article
Figure 3: NY Times section-based article
Guardian URL for Home tab:
https://content.guardianapis.com/search?apikey=[YOUR_API_KEY]&section=(sport|business|technology|politics)&show-blocks=all
Guardian URL for section tabs:
https://content.guardianapis.com/[SECTION_NAME]?api-key=[YOUR_API_KEY]&showblocks=all
The URL generation requires the following parameters depending on whether you’re on the
Home tab or any other:
• The api-key parameter requires your Guardian API key
• For Home tab, you need to hit the ‘/search’ endpoint of the Guardian API and provide
section as a query parameter. The value MUST be exactly as shown in the above URL
• For the other tabs, based on the selection, the ‘/[SECTION_NAME]’ endpoint of the
Guardian API is to be accessed. For example, for the world tab, the URL would be –
https://content.guardianapis.com/world?api-key=[YOUR_API_KEY]&show-blocks=all
• The show-blocks parameter is set to all in every tab
The JSON structure for both types of call is as shown in Figure 4 below. The mapping between
the article card and the JSON object is listed below.
6
Figure 4: Guardian News search result sample
Figure 5: Guardian News search result sample for image
Domain Specific Article Card Corresponding JSON key
Title Value in the hierarchy “response” ->
“results[index]” -> “webTitle”
Image Value of the hierarchy “response” ->
“results[index]” ->”blocks”->”main”-
>”elements”
->”0”->”assests”->last indexed assest ->
“file” (Refer Figure 5)
7
Section Value in the hierarchy “response” ->
“results[index]” -> “sectionId”
Date (yyyy/mm/dd) Value in the hierarchy “response” ->
“results[index]” ->”webPublicationDate”
converted to the format as shown in Figure 2
Description Value in the hierarchy “response” ->
“results[index]” ->”blocks”->”body”->”0”
->bodyTextSummary”
NOTE 1: The above data needs to be used for each article. “index” represents article number.
The article numbers begin from 0.
NOTE 2: Only the last image URL in assets key is to be used. If no such URLs are found, a
default image for Guardian News is to be displayed. Refer section 5.2 for the default image for
Guardian News which would be used anytime a Guardian article does not have an image
mentioned in the specs (this ensures that we are always fetching the larger image).
NOTE 3: The section coloring is different for different sections. Refer section 5.1 for a mapping
between section and color.
NOTE 4: In the article description, no words should be cut in the middle and there MUST be the
ellipsis whenever needed (limit to 3 lines).
NY Times URL for Home tab:
https://api.nytimes.com/svc/topstories/v2/home.json?api-key=[YOUR_API_KEY]
NY Times URL for other tabs:
https://api.nytimes.com/svc/topstories/v2/[SECTION_NAME].json?apikey=[YOUR_API_KEY]
The URL generation requires the following parameters depending on whether you’re on the
Home tab or any other:
• The api-key parameter requires your NY Times API key
• For Home tab, you need to hit the ‘/home.json’ endpoint of the NY Times API and
provide API key as query parameter.
• For the other tabs, based on the selection, the ‘/[SECTION_NAME].json’ endpoint of the
NY Times API is to be accessed. For example, for the world tab, the URL would be –
https://api.nytimes.com/svc/topstories/v2/world.json?api-key=[YOUR_API_KEY]
The possible values for the SECTION_NAME are world, politics, business, technology,
sports for the 5 different tabs we have.
The JSON structure for both types of calls is shown in Figure 6 below. The mapping between
the article card and the JSON object is listed below.
8
Figure 6: JSON Response for NY Times section-based search
Domain Specific Article Card Corresponding JSON key
Title Value in the hierarchy “results” -> “title”
Image* Value of the hierarchy “results” –
>”multimedia”->”url”
Section Value in the hierarchy “results” -> “section”
Date (yyyy/mm/dd) Value in the hierarchy “results” –
>”published_date” converted to the format
as shown in Figure 3
Description Value in the hierarchy “results” –
>”abstract”
* – Pick the first multimedia image with width atleast 2000.
NOTE 1: The above data needs to be used for each article. The hierarchy would therefore go
like “result”->[ARTICLE_NUMBER] followed by the ones given in the table above. The article
numbers begin from 0.
NOTE 2: Only the first image URL with width >= 2000 is to be used. If no such URLs are
found, a default image for NY Times News is to be displayed. Refer section 5.2 for the default
9
image for NY Times News which would be used anytime a NY Times article does not have an
image mentioned in the specs.
NOTE 3: The section coloring is different for different sections. Refer section 5.1 for a mapping
between section and color.
NOTE 4: More data than mentioned in the table would need to be stored for future use
mentioned hereafter in the document.
3.1.2 Sharing Modal
The share button is clickable and opens up a modal as shown in Figure 7.
Figure 7: Modal display after clicking share button on article
The 3 share options for Facebook, Twitter and Email can be implemented by using react-share.
The following GitHub link for react-share is all that you will need to setup the sharing options.
https://github.com/nygardk/react-share
The title for the sharing modal comes from the “Title” section in the table(s) for Guardian and
NY Times above.
The following Figures 8, Figure 9 and Figure 10 show the result of clicking each icon in the
sharing modal.
10
Figure 8: Twitter Share
Figure 9: Facebook Share
Figure 10: Email Share
11
The URL to be shared on each social media can be found at the “webUrl” key in “response”-
>”results” for Guardian response.
The URL to be shared on each social media can be found at the “url” key in “response”-
>”docs” for NY Times response.
Note the presence of the hashtag CSCI_571_NewsApp as well that needs to be replicated.
The number of section-based articles are to be restricted to 10 only. DO NOT display anything if
certain data is missing in the section-based article card except for the image (use default image
provided otherwise).
When clicking on any article to reach the detailed article page, there is an intermediate screen
that is displayed while the results are fetched as shown in Figure 11.
Figure 11: Loading screen
Please refer to the reference video for a clearer understanding of this.
3.2 Detailed Article Page
All articles are clickable and open a detailed view of the article as shown in Figure 12 and
Figure 13.
12
Figure 12: Detailed Article View
Figure 13: Detailed Article View (continued)
13
For the article, you need to use the “id” key in the JSON object returned by Guardian API
(shown in Figure 4). For NY Times, you need to use “url” from the JSON object returned by
the NY Times API (shown in Figure 6 above). Using the corresponding data, a URL needs to be
generated for the purpose of the detailed article.
Guardian News URL:
https://content.guardianapis.com/[ARTICLE_ID]?api-key=[YOUR_API_KEY]&show-blocks=all
The above URL has the following parameters:
• The first parameter is the article ID as the guardian API endpoint. This value is retrieved
from the “response”->”results”->”id” hierarchy of the Guardian API response shown
in Figure 4
• The second parameter is the API key for Guardian News API
• The third parameter is a fixed key=value pair of show-blocks=all
A sample JSON response for the above call is shown in Figure 14.
Figure 14: Sample JSON for article expansion search
The mapping between the JSON data and the article is as follows.
Detailed Article Card Corresponding JSON key
Title Value in the hierarchy “response” ->
“content” -> “webTitle”
Image Value of the hierarchy “response” ->
“content” ->”blocks”->”main”-
>”elements”
14
->”0”->”assests”->last indexed assest ->
“file” (Refer Figure 5)
Date Value in the hierarchy “response” ->
“content” ->”webPublicationDate”
converted to the format as shown in Figure 12
Description Value in the hierarchy “response” ->
“content” ->”blocks”->”body”->”0”
->bodyTextSummary”
The article should also have the 3 sharing buttons as described previously with the same
functionality and the hover functionality as shown in Figure 15.
Figure 15: Share buttons with tooltip
NOTE: In the article description, no words should be cut in the middle and there MUST be the
ellipsis whenever needed. The description should initially be restricted to 6 lines.
Each article has a bookmark button as shown in Figure 16 below to add/remove article from
favorites.
Figure 16: Bookmark with toast message and tooltip
On clicking the bookmark button, the article should be added to favorites and a toast message
should be displayed for the same. Here are a couple of links to help with the toast:
https://github.com/fkhadra/react-toastify
https://github.com/fkhadra/react-toastify/issues/374
Usage of local storage to save and persist articles in the bookmark tab is recommended. Here’s a
useful link for the local storage feature:
https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
15
Each article has an arrow at the bottom right corner as shown in Figure 13 above. The purpose
of the arrow is to display the entire article description. This article description can be found in
the “response”->”content”->”body”->”0”->”bodyTextSummary”
The toggling must be smooth and should follow the demonstration in the reference video. Here’s
a link that might be useful:
https://stackoverflow.com/questions/44375093/handling-scroll-animation-in-react
NY Times URL:
https://api.nytimes.com/svc/search/v2/articlesearch.json?fq=web_url:(“[ARTICLE_WEB_URL]
”) &api-key=[API_KEY]
The above URL has the following parameters:
• The first parameter is the article web url. This value is retrieved from the “response”-
>”docs”->”url” hierarchy of the NY Times API response shown in Figure 6
• The second parameter is the API key for NY Times News API
A sample JSON response for the above call is shown in Figure 17.
Figure 17: Sample JSON response for detailed article search
The mapping between the JSON data and the article is as follows
16
Detailed Article Card Corresponding JSON key
Title Value in the hierarchy “response” -> “docs”
-> “headline”->”main”
Image* Value of the hierarchy “response” -> “docs”
->”multimedia”->”url”
Date Value in the hierarchy “response” -> “docs”
->”pub_date” converted to the format as
shown in Figure 12
Description Value in the hierarchy “response” -> “docs”
->”abstract”
* – Pick the first multimedia image with width atleast 2000.
3.2.1 Comment-Box:
Each article has a comment-box (shown in Figure 13 above) that is UNIQUE to that article.
To create the comment-box, you are required to use the CommentBox.io API.
https://commentbox.io/docs
Hint: For the purpose of keeping unique comment box for each article, use the article ID you
used to search for the detailed article description. The comments should persist anytime a user
closes the website and reopens it.
3.3 AutoSuggest on Search
The user can search for any keyword to look up articles related to that keyword from either
Guardian News or NY Times depending on his/her selection. Figure 18 shows an example of the
autosuggesting functionality to be implemented for search.
Figure 18: Autosuggest example
17
For the purpose of the autosuggest, the Bing Autosuggest API is recommended.
https://azure.microsoft.com/en-us/services/cognitive-services/autosuggest/
NOTE: The Autosuggest API call MUST be made from JavaScript and NOT your
backend. This is to reduce latency and improve performance.
Based on what the user types, use that query keyword and generate the URL to fetch suggestions
from the API as follows:
https://api.cognitive.microsoft.com/bing/v7.0/suggestions?q=[QUERY_KEYWORD]
Apart from the keyword, the API key needs to be passed in the request header instead of a
request query parameter. The request header contains the API key in a key:value format with the
‘key’ being ‘Ocp-Apim-Subscription-Key’ and the value will be your API key. Refer to section
4.3 for steps to obtain API key. Here is a link with a sample usage to help you with the
autocomplete search.
https://gist.github.com/arnaudrenaud/70d21dcbc20acf2d287143880a18a63b
3.4 Displaying Search Results
After the user searches for a keyword, articles related to that keyword are to be displayed as
shown in Figure 19.
Figure 19: Search Results
Note the absence of the switch between Guardian and NY Times on the search result page.
To obtain the results, the URLs to be used for Guardian and NY Times are described below.
18
Guardian News URL:
https://content.guardianapis.com/search?q=[QUERY_KEYWORD]&apikey=[YOUR_API_KEY]&show-blocks=all
The URL generation above requires 3 parameters:
• The first parameter is the query term to search for
• The second parameter is your API key for Guardian News. The steps to generate your
API key are described in section 4.1
• The third parameter is the “show-blocks” key with value set to all
The JSON response object is shown in Figure 4.
Figure 20: Guardian News Search Result Article Card
The following table is the mapping between the JSON response and the data to be displayed on
the card shown in Figure 20.
Search based Article Card Corresponding JSON key
Title Value in the hierarchy “response” ->
“results[index]” -> “webTitle”
Image Value of the hierarchy “response” ->
“results[index]” ->”blocks”->”main”-
>”elements”
->”0”->”assests”->last indexed assest ->
“file” (Refer Figure 5)
Section Value in the hierarchy “response” ->
“results[index]” -> “sectionId”
Date (yyyy-mm-dd) Value in the hierarchy “response” ->
“results[index]” ->”webPublicationDate”
converted to the format as shown in Figure 19
19
NOTE 1: The above data needs to be used for each article. “index” represents article number.
The article numbers begin from 0.
NOTE 2: Only the last image URL is to be used. If no such URLs are found, a default image for
Guardian News is to be displayed. Refer section 5.2 for the default image for Guardian News
which would be used anytime a Guardian article does not have an image mentioned in the specs.
NOTE 3: The section coloring is different for different sections. Refer section 5.1 for a mapping
between section and color.
NOTE 4: More data than mentioned in the table would need to be stored for future use
mentioned hereafter in the document.
New York Times URL:
Figure 21: NY Times Article card
https://api.nytimes.com/svc/search/v2/articlesearch.json?q=[CITY]&apikey=[YOUR_API_KEY]
The URL generation above requires 3 parameters:
• The first parameter is the query term to search for, here, user city obtained from IP-API
• The second parameter is your API key for New York Times News API. The steps to
generate your API key are described in section 4.2
The JSON response is as shown in Figure 22.
20
Figure 22: JSON response from NY Times
The following table is the mapping between the JSON response and the data to be displayed on
the card shown in Figure 21:
Search based Article Card Corresponding JSON key
Title Value in the hierarchy “response” -> “docs”
-> “headline” -> “main”
Image* Value of the hierarchy “response” -> “docs”
->”multimedia”->”url”
Section Value in the hierarchy “response” -> “docs”
-> “news_desk”
Date (yyyy-mm-dd) Value in the hierarchy “response” -> “docs”
->”pub_date” converted to the format as
shown in Figure 21
* – Pick the first multimedia image with width atleast 2000. Simply using the value won’t fetch
the image. It can be found at the URL https://www.nytimes.com/[IMAGE_URL_FROM_JSON]
NOTE 1: The above data needs to be used for each article. The hierarchy would therefore go
like “response”->”docs”->[ARTICLE_NUMBER] followed by the ones given in the table above.
The article numbers begin from 0.
NOTE 2: Only the first image URL with width >= 2000 is to be used. If no such URLs are
found, a default image for NY Times News is to be displayed. Refer section 5.2 for the default
image for NY Times News which would be used anytime an NY Times article does not have an
image mentioned in the specs.
21
NOTE 3: The section coloring is different for different sections. Refer section 5.1 for a mapping
between section and color.
NOTE 4: More data than mentioned in the table would need to be stored for future use
mentioned hereafter in the document.
NOTE 5: Depending on the section, the color should alter. If section is missing, do not display
anything.
NOTE 6: The vertical size of the cards can vary depending on the image height. That is
OK.
NOTE 7: If any image is not found, use the default image provided.
3.5 Favorites/Bookmark Tab
From the homepage of the website, the detailed article page and the search result page, the user
can navigate to the bookmarks tab. Figure 23 shows a sample of the bookmarks tab.
Figure 23: Favorites tab
Note the difference in color of the bookmark tab. Apart from the displaying the section, the news
source is also displayed with a difference in color for Guardian and NYTimes as shown above.
The card format is similar to that in section 3.1.1 with the addition of either Guardian or NY
Times and the delete button to remove the article from bookmarks.
22
Figure 24: Sharing modal in bookmarks tab
The share button brings up a modal similar to that in section 3.1.2 with the additional mention of
whether it was reported in Guardian or NY Times (see Figure 24). On removing an article, a
toast pops up as shown in Figure 25.
Figure 25: Removing article from bookmarks/favorites tab
Figure 26 shows the case when there are no articles that have been bookmarked.
Figure 26: No bookmarked articles
3.6 Switching between Guardian and NY Times
Figures 27 and Figure 28 show the switch condition when you switch between the two news
resources.
23
Figure 27: NYTimes selected
Figure 28: Guardian selected
Note here that the page refreshes anytime the switch is changed. Also note the difference in color
of the switch.
NOTE: The selection of source should persist anytime a user closes and reopens the
website. If he/she closed the website with Guardian selected, the next time he/she opens it,
the switch should be on Guardian only.
3.6 Mobile View Screenshots:
Figure 29: Initial website
24
Figure 30: Sharing Modal
Figure 31: Opening the rightmost tab
25
Figure 32: Detailed article
Figure 33: Detailed article (continued)
26
Figure 34: Detailed article description expansion
Figure 35: Autosuggest example for search
27
Figure 36: Favorites/Bookmark tab
Figure 37: No results in bookmark tab
28
Figure 38: Search result page
4. APIs Used
4.1 Guardian News API
To get the API key for Guardian News, visit:
https://open-platform.theguardian.com/documentation/
From here, navigate to “sign up for an API key” which takes you to the following page
Figure 39: Guardian News Register for key page
29
Register for developer key and on the subsequent page, enter details as asked. Once you click
register, a key will be emailed to you on the email address you use.
4.2 New York Times API
Visit https://developer.nytimes.com/get-started and create an account by providing the details
asked. Then:
• Verify the account using the link emailed to you.
• Sign in to the account you just created.
• From the top right corner where your username/email is present, select the “Apps” option
in the dropdown and click on “New App”.
• Provide a suitable name for your app and amongst the APIs, select the Article Search
API and the Top Stories API.
• Click ‘Create’.
You will be taken to a page where you can find your API key.
4.3 Bing Autosuggest API:
Visit the given link – https://azure.microsoft.com/en-us/services/cognitive-services/autosuggest/
Click ‘Try Bing Autosuggest’ and opt for either the Free Azure account version or the existing
account version. If you are creating a new account, use your USC email address to do so. For the
existing azure account holders, sign into your account.
Figure 40: NY Times registration step
Fill in the details as shown above. Make sure the pricing tier is F0. Click ‘Create’ and wait
for it to finish. You MAY reserve T tier if you have 200$ free credits. Keep in mind the
autosuggest pricing is 3$/1000 requests and allows more API requests/sec.
30
Figure 41: Final confirmation for NY Times
Click “Go To Resource” and find the API key you will require.
4.4 CommentBox.io API:
To get started with the CommentBox.io API, visit:
https://dashboard.commentbox.io/projects
Figure 42 shows the page it sends you to.
Figure 42: CommentBox.io
Select any of the options and SIGN UP (NOT SIGN IN!) for the API. Figure 43 shows the
Sign up modal.
31
Figure 43: Sign up modal
Enter your details. You should receive a confirmation link. Go ahead and verify your account.
Figure 44: CommentBox.io Project Creation Step 1
Figure 44 shows what you should have in front of after signing up. Select any website name.
The Website Domain is VERY IMPORTANT. This field is what allows you to have comment
boxes in your website. Add in your website’s domain here (Something like
localhost:port_number or 127.0.0.1:port_number, etc. before you deploy).
Remember to update this domain to the domain of your cloud deployment. Failure to do so
will affect the availability of comment box in your final homework and would lead to
deduction in points.
32
For the last 2 questions, pick the first option and keep the default value respectively. Figure 45
to Figure 47 show the remaining steps reached by scrolling down.
Figure 45: CommentBox.io Project Creation Step 2
Figure 46: CommentBox.io Project Creation Step 3
33
Figure 47: CommentBox.io Project Creation Step 4
For steps 2 and 3, keep the default selections and skip over the remaining questions which are
optional. Click “Create Project” in step 4. This only works if you have verified your account.
Figure 48 should show up. Note down the project ID. The embed instructions takes you to the
documentation link provided above.
Figure 48: CommentBox.io Project Creation Step 5
5. Hints and Useful Links
5.1 Difference in tags for sections
The mapping below shows the different colors for each tab.
World
Politics
Business
Technology
Sports
Any other
Guardian Favorite
NY Times Favorite
5.2 Default Images for Guardian and New York Times:
Guardian News –
https://assets.guim.co.uk/images/eada8aa27c12fe2d5afa3a89d3fbae0d/fallback-logo.png
34
NY Times –
https://upload.wikimedia.org/wikipedia/commons/0/0e/Nytimes_hq.jpg
5.3 Links that might help you:
• React Bootstrap:
o https://react-bootstrap.github.io/components/navbar/
• React Router DOM:
o https://www.freecodecamp.org/news/react-router-in-5-minutes/
o https://reacttraining.com/react-router/web/example/url-params
o https://alligator.io/react/react-router-parameters/
o https://learnwithparam.com/blog/how-to-handle-query-params-in-react-router/
o https://codesandbox.io/s/n7q6kw9n8m?from-embed
o https://github.com/react-bootstrap/react-bootstrap/issues/3944
• React-Select:
o https://alligator.io/react/react-select/
o https://react-select.com/home#async
• React Switch:
o https://www.npmjs.com/package/react-switch
• React Share:
o https://github.com/nygardk/react-share
• React Icons for Bookmark:
o https://github.com/react-icons/react-icons
o https://react-icons.netlify.com/#/search
• React Responsive Library:
o https://www.npmjs.com/package/react-responsive
• React Toast:
o https://github.com/fkhadra/react-toastify
• React Tooltip:
o https://github.com/wwayne/react-tooltip
• React Spinners:
o https://www.npmjs.com/package/react-spinners
o https://github.com/emotion-js/emotion
5.4 Google App Engine/Amazon Web Services/ Microsoft Azure
You should use the domain name of the GAE/AWS/Azure service you created in Homework #7
to make the request. For example, if your GAE/AWS/Azure server domain is called
example.appspot.com/example.elasticbeanstalk.com/ example.azurewebsites.net, the JavaScript
program will perform a GET request with keyword=”xxx”, and an example query of the
following type will be generated:
GAE – http://example.appspot.com/articleSearch?query=xxx
AWS – http://example.elasticbeanstalk.com/articleSearch?query=xxx
Azure – http://example.azurewebsites.net/articleSearch?query=xxx
35
Your URLs don’t need to be the same as the ones above. You can use whatever paths and
parameters you want. Please note that in addition to the link to your Homework #8, you should
also provide a link like this URL in the table of your Node.JS backend link. When your grader
clicks on this additional link, a valid link should return a JSON object with appropriate data.
5.5 Deploy Node.js application on GAE/AWS/Azure
Since Homework #8 is implemented with Node.js on AWS/GAE/Azure, you should select
Nginx as your proxy server (if available), which should be the default option.
5.6 AJAX call
You should send the request to the Node.js script(s) by calling an Ajax function (ReactJs). You
must use a GET method to request the resource since you are required to provide this link to your
homework list to let graders check whether the Node.js script code is running in the “cloud” on
Google GAE/AWS/Azure (see 5.3 above). Please refer to the grading guidelines for details.
Note: jQuery .ajax cannot be used in this project.
5.7 HTML5 Local Storage
Local storage is more secure, and large amounts of data can be stored locally, without affecting
website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and
information is never transferred to the server. There are two methods, getItem() and setItem(),
that you can use. The local storage can only store strings. Therefore, you need to convert the data
to string format before storing it in the local storage. For more information, see:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
http://www.w3schools.com/html/html5_webstorage.asp
https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
6. Files to Submit
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 GAE/AWS/Azure service where the AJAX call is made with sample parameter
values (i.e. a valid query, with keyword, location, etc. See 6.6).
Also, submit all files (HTML, JS, CSS) you have written yourself, electronically to the GitHub
Classroom repository so that can be compared to all other students’ code. Don’t include library,
node-js modules, any config files or any images that we provided or that are included in
any library or any code generated by the tools.
Please note, you need to submit your files (HTML, JS, CSS), both backend and frontend,
directly to the root folder of your homework 8 GitHub Classroom repository. That is, do
not submit any subfolders on GitHub Classroom. If you submit some subfolders, you will
receive a 2-points penalty.
36
**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.