Configure the Client
Let’s now configure the client component. The directory contains:
- The index.html file that contains the HTML code for the frontend application
- The main.css file that contains the CSS code
- The main.js file that contains the JavaScript code
- The client-package.json configuration file
We will be coding index.html, main.js, and main.css.
Copy the code below and paste it in the respective files located in the client/ directory of your project using an IDE and save the files.
index.html
copy
<!DOCTYPE html>
<html>
<title>NewsApp</title>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="fetchNews('HEADLINES')">
<center>
<h1>Welcome to The Daily Broadcast</h1>
<h3>Today's News</h3>
<h2>HEADLINES</h2><br>
</center>
<div class="sidenav">
<img src="https://i.pinimg.com/236x/e6/71/5f/e6715f8bd963c783f75f11fdc37fa4aa.jpg" width="220" height="200"
onclick="fetchNews('HEADLINES')"><br>
<a onclick="return fetchNews('BUSINESS');">Business</a><br>
<a onclick="return fetchNews('ENTERTAINMENT');">Entertainment</a><br>
<a onclick="return fetchNews('HEALTH');">Health</a><br>
<a onclick="return fetchNews('SCIENCE');">Science</a><br>
<a onclick="return fetchNews('SPORTS');">Sports</a><br>
<a onclick="return fetchNews('TECHNOLOGY');">Technology</a><br>
</div>
<div class="loading" id="loader" style="display: none;"></div>
<div class="main">
<ul id="newsList"></ul>
</div>
</body>
</html>
main.css
copy
.sidenav {
height: 100%;
width: 220px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
}
a{
cursor: pointer;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
font-family: "Helvetica", sans-serif;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
font-family: "Poynter", sans-serif;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.loading {
height: 0;
width: 0;
padding: 15px;
border: 6px solid rgb(155, 155, 155);
border-right-color: rgb(88, 88, 88);
border-radius: 22px;
-webkit-animation: rotate 1s infinite linear;
/* left, top and position just for the demo! */
position: absolute;
left: 50%;
top: 50%;
}
@-webkit-keyframes rotate {
/* 100% keyframe for clockwise.
use 0% instead for anticlockwise */
100% {
-webkit-transform: rotate(360deg);
}
}
main.js
copy
function fetchNews(name) {
//Since we display the news items as nodes, removes the existing nodes for every category change
const nodes = document.getElementById("newsList");
nodes.innerHTML = '';
document.getElementById("loader").style.display = "block";
var tablename = name;
console.log(tablename);
//Makes an API call to the Advanced I/O function to fetch the news item from a particular table
$.ajax({
url: "/server/news_app_function/fetchData?tablename=" + tablename, //If you initialized the Advanced I/O function with a different name, ensure you replace news_app_function with that name.
type: "get",
success: function (response) {
var data = response;
var i;
document.getElementById("loader").style.display = "none";
//Parses the response from the Advanced I/O function, and renders it in the HTML page by creating a list of nodes
for (i = 0; i < data.content.length; i++) {
var list = document.getElementById('newsList');
var anchor = document.createElement('a');
var li = document.createElement('li');
var linebreak = document.createElement("br");
anchor.href = data.content[i][tablename].url;
anchor.innerText = data.content[i][tablename].title;
anchor.setAttribute('target', '_blank');
li.appendChild(anchor);
list.appendChild(li);
list.appendChild(linebreak);
}
}, error: function (error) {
alert(error.data);
}
});
}
Note: If you have chosen a different name for your Advanced I/O function, then replace news_app_function with that name in line 10.
The client directory is now configured.
Working of Functions and Client
Let us quickly go through the working of the function and client components of the application:
-
When a recursive cron is configured to execute once every hour and associated with the cron function NewsApp(index.js) it automatically initiates the function’s execution once every hour.
-
CatalystCronHandler defined in the Cron function makes an API call to http://newsapi.org/v2/top-headlines to fetch the news headlines. This request is authenticated using the API key obtained from NewsAPI. The choice of country, the API key, and the news category associated with the respective table in the Data Store are passed as query parameters.
-
The pushNewstoDatastore method inserts the data obtained from the API call for the title and url parameters into a list. A ZCQL query then obtains the row count of each table. If data is already populated in a table from a previous API call made to NewsAPI, the data is replaced with the updated news items. If no rows exist, new data is pushed to the table.
-
The script defined in the client component main.js makes an API call to the Advanced I/O function by executing a GET request to the route /fetchData defined in the function. The table names are passed in the request URL.
-
The Advanced I/O function queries the relevant tables in the Data Store and obtains the title and url of the news items. This is constructed as a JSON response and passed back to main.js.
-
main.js parses the JSON response obtained from the function and renders it in the HTML page by creating a list of nodes.
Last Updated 2023-12-15 18:54:08 +0530 +0530