ICT239: The use of social media has become a part of daily life in the digital age. Most people use social media for personal communication: Web Application Development Coursework, SUSS, Singapore

Question 1

The use of social media has become a part of daily life in the digital age. Most people use social media for personal communication, such as Facebook, Instagram, WhatsApps, Telegraph, just to name a few.

Twitter as compared to these social media is adopted by users as a channel for public communication as well. As such, Twitter is a very good source for social to analyze online communication for a variety of purposes. In this assignment, we are going to develop a web application that helps to catalog tweets according to their content.

Before the design is started, the structure of a Twitter message needs to be formulated. According to Lasswell’s maxim well established in communication theory, a conventional way to describe an act of communication is to answer the following questions: “Who Says What In Which Channel to Whom with What Effect?” We may adapt this maxim in the context of describing Twitter messages, and ask about a tweet: “Who is commenting on what about whom and what, and when”. Noted that the effects of the communication are omitted, namely, “with What Effect”, as they can only be observed outside of the twitters message of concern.

Let’s take the following recent tweets by SUSS as an example:

Figure Q1.a: Sample Tweets 1 (left) and 2 (right) by Singapore University of Social Sciences For the first tweet, whose URL is we may say it is SUSS (@suss_sg) (Who) is commenting about the recent announcement by SUSS (About) which is a web page (. More specifically, the comment (Comment) is the text of the tweet, which starts with “#SUSSSocialImpact: Congratulations, SUSS’ Centre for University Core (CUC), for clinching a grant of US$850,000 from the Henry Luce Foundation’s initiative …”. The special expression “#SUSSSocialImpact” is the so-called “hashtag.” It highlights certain topics (What) that the tweet is about. In sum, we may describe Sample Tweet 1 in the following way:

Similarly, one could create the following catalog to describe Tweet Sample 2

The following Diagram Q1(a) demonstrates the Graphical User Interface (GUI) of the application

Apply HTML/CSS/JS technologies to develop an application by creating a folder named ‘Q1’ and creating the frontend application according to the following module structure:
/home/user/Projects/TMA
└── Q1/
├── catalog.html
├── register.html
├── index.html
├── dashboard.html
├── upload.html
└── static/
├── logo.png
├── style.css
└── catalog.js

The targeted application is designed to have several interfaces to its functions: it consists of (1) the cataloging page (catalog.html) to catalog a particular twitter message; (2) the register and login pages (register.html and index.html, respectively) that allow an individual to register with the Apps and to use the Apps functions for Twitter cataloging, and log in to the Apps subsequently; (3) the dashboard page (dashboard.html) that display the trending of Twitter messages in a chart; (4) the upload page (upload.html) that allows the user (in particular, the system admin) to upload a file that contains a catalog of tweets.

In the following, the layout of the views of the pages and the functions they perform are explained in further detail.

Requirement Q1.1 overall layout management in static/styles.css:

Write codes in static/styles.css to reflect the GUI as shown in Diagram Q1 (b). Namely, the overall page layout includes (1) a header bar area that includes the logo of the Apps, the title “Twitter Cataloging System,” and the navigation links to functional pages, and (2) a content area that has an entry area alone or a side bar area, that displays the current user information, and an entry area that may present certain form or display certain information for various functions, such as register, login and catalog a Twitter message. For Q1, the application will only be required to run on the desktop via a browser.

Requirement Q1.2 – write codes in register.html and index.html with relevant codes in static/styles.css to fulfill the following:

(1) For all of the following functionalities, please provide the demo recording of animation effects with each of the solution codes that are submitted.

(2) The Login and Register views are both present as tabs. The non-active tab is greyed out and not underlined, while the active tab is visible and underlined. When hovered over, the cursor shape will show up for tabs

(3) The corresponding forms are displayed right below the tabs with the proper input fields.

(i) The input buttons, when hovered over:

• The input field will turned from underlined to box shadowed(ii) The submit button, when hovered over:
• The button will change colour from brown to green and display the cursor shape.(4) There are TWO (2) ways to access the Login & Register views, one from the head bar one from the tabs in Diagrams Q1 (c) and (d).When the catalog link is clicked on the header bar, the catalog page view as shown in Diagram

1 (a) will be displayed for the user to catalogue a given Twitter message. When the catalogue record is submitted the page as shown in Diagram Q1 (e) will be displayed to the user as what information has been captured in the catalog

Diagram Q1 (e) Page view after the Submit button in Diagram Q1 (a) has been pressed As shown in Diagram Q1 (e), the side-bar and catalog GUIs are side-by-side under header-bar.

Requirement Q1.3 – catalog.html and static/styles.css and static/catalog.js:

(1) For all of the following functionalities, please provide the demo recording of animation and computational effects with each of the solution codes that are submitted. Namely, each of the input fields, when hovered over, they will be box-shadowed. The submit button will turn dark brown and the font becomes black.

(2) The side-bar GUI has an icon that stands for a user with his personal information listed, including the registered email and job role. For TMA, the user information can be hard coded.

(3) The catalog GUI should include 8 fields, namely, the When, Who, Comment, About, Media, What, Whom and Reference Id fields. Except for the When and Media field, which is entered via a dropdown menu, the rest of the fields are
text entries. When entering the When input field, a date selector will be popped up when the calendar icon is pressed. When hovered over, the input area and the submit button will be highlighted like similar field as required in

Requirement Q1.2.

(4) After the submit button is pressed, the result should be displayed as shown Diagram Q1 (e) which is computed by JavaScript codes in catalog.js.

(5) Please enter the catalogue for the following twitter with accurate and complete information (i.e., 8 fields) and output the result as shown in Diagram Q1 (e)

#SUSSSocialImpact: As our society grows with more ageing singles 🧓👴, there is a need to expand communal spaces to counter social isolation in old age, shares Dr Ko Pei-Chun from SUSS Centre for University Core. Learn more: https://t.co/DT8H0TUGkj

— Singapore University of Social Sciences (@suss_sg) June 18, 2021

Question 2

The system aims to analyze the trend of Twitter messages over time. Hence, the web application should construct a backend server application and data model to store the catalog data in a database with proper data model design and pre-processing of input data.

Employ Flask Framework to initialize a proper python environment and organize files for ‘data model’, ‘controllers’, and ‘templates’, following the directory structure below, to demonstrate the skills to develop a Web application.

/home/user/Projects/TMA
└── Q2/
├── app.py
├── sample.csv
├── templates/
│ ├── index.html
│ ├── catalog.html
│ ├── register.html
│ ├── upload.html
│ └── dashboard.html
├── static/
│ ├── logo.png
│ ├── styles.css
│ ├── catalog.js
│ └── dashboard.js
├── requirements.txt
└── venv

(a) Concerning controller codes for register, login, and logout views in app.py:
The register and login webpages (register.html and index.html) will now, upon clicking on the submit button, sent the corresponding parameters to the backend router/controller in app.py and printed out at the server-side. Each web session needs to be started with a login step until the session is logout, using the Flask session. And the login user’s id will be shown correspondingly in the sidebars of catalog, upload, and dashboard views.

(b) Concerning controller codes for catalog, upload views in app.py and frontend JavaScript codes in catalog.js.

Provision a MongoDB database for storing the catalogue data that is sufficient to implement the following two functions corresponding to the webpage views.

(i) The catalogue view (catalog.html, and catalog.js) now will pass the parameters to the backend for catalog keeping in the corresponding collections of the MongoDB, and the number of records is passed back to the frontend for display (catalog.js).

Diagram Q2 (b) The Catalog View after Submission: the total count of the tweets for the year is displayed

(ii) The upload view (upload.html) is shown in Diagram Q2(c)(i), and when the Choose File button is pressed, a file browser will prompt the users to choose a data file to be uploaded. In our case, the file sample.csv under the Q2 directory should be chosen to be uploaded, as demonstrated in Diagram Q2(c)(ii).

After the file is being chosen, and when the upload button is pressed, the file will be uploaded to the corresponding backend Flask controller so that all the catalogue records in the uploaded file are processed and kept in the corresponding collections. Thus, the difference between catalogue and upload is that while catalogue keeps the record one at a time, the upload batch-uploads the batch of records once for all.

(c) Concerning controller codes for dashboard, frontend code dashboard.js for dashboard view.

Diagram Q2 (d) The Dashboard View and the display of Twitter Trending

(i) As shown in Diagram Q2 (d), the numbers of tweets are display under the heading of ‘The Twitter Trending”. Note that this required the proper preprocessing in the catalog and upload controllers to the data in the proper data model to be displayed as yearly trend as shown.

(ii) The frontend display is to implement through ChartJS with corresponding backend codes via AJAX mechanism where the display data is also preprocessed at the end for frontend display.