CSCI-571

USC CSCI 571 2020 fall, Web Technologies, by Prof. Marco Papa

[toc]

Homework

Homework 1 (UNGRADED)

Description

• sign up GitHub
• get student development pack from GitHub
• sign up at course homepage https://csci571.com
  • Input your information:
    • name
    • Session#
    • email
    • homework page URL (e.g. http://username.github.io/sd45fh67.html)
• sign up for Piazza and enroll in class

Homework 2

Description

• Sign up GitHub account
• get student GitHub develop pack (with usc.edu email)
• Sign up for GitHub Pages
• create GitHub private reposity named username.github.io, and clone it to local machine
• Create an index.html file in username.github.io
• Create the Table of Exercises using ScrambleThisTable.html in your repo and rename it as [randomstring].html
• Push all changed to GitHub remote repo

Homework 3

• Final result: https://youtu.be/eI-YjCv1w9M
• To find the similar fonts (use FireFox for review) and size as possible as you can:
  • https://www.myfonts.com/WhatTheFont/
  • https://fonts.google.com/
• Use hyperlinks for images, rather than local images
  • https://csci571.com/hw/hw3/images/Bathroom.png
  • https://csci571.com/hw/hw3/images/Kitchen.png
  • https://csci571.com/hw/hw3/images/Bedroom.png
  • https://csci571.com/hw/hw3/images/Decor.png
  • https://csci571.com/hw/hw3/images/Cutlery.png
• Use CSS to 'crop' the images if needed
• Use browser tools to get the identical colors used in example:
  • in firefox, use Tool->Web Developer->Eyedropper to get the color
• no response for any part of the web page
• Special character and its unicode (needed for Ö):
  • https://www.htmlsymbols.xyz/unicode
  • https://www.martinstoeckli.ch/fontmap/fontmap.html?mode=hex

Grading

1. To test your hw#3, please view your web page using Firefox. Resize your browser window to the same size as the Home Page PNG image and then see if you have used the correct font, color and size, and if the position of text is correct. As long as the various items on the pages are “proportionally” correct, you will get full points.
2. Resize the browser so it show your top picture , plus the extra white space as in in the video and snapshots. Then they will scroll vertically to see if the rest of the site follows the same "proportions". Lastly they will check if the site is "static" vs. "responsive", by lowering the horizontal size. The site should "crop" and no items should move with respect to each other.
3. You can decide on your "horizontal" size and then proportionally place each component on the page. If all the components are placed similarly, you will get full points.
4. Graders will resize the browse window "horizontally" to contain all your site.
5. Smaller horizontally should "crop". Larger horizontally should either 1) let the site be flush left, with a single white band on right, or 2) cenbter the site with 2 identical white bands on each side.
6. Websites are responsive, not CSS. CSS is just a tool to design the website. You can use CSS to design responsive and non responsive websites. For example, I used flexbox to design the website, but made the website non-responsive by setting a fixed width in pixels on the body

Homework 5

• AWS & Python
• Azure & Python: conda environment csci571
• Google & Python: conda environment gcp571

Homework 6

• Final result: - https://youtu.be/1vOis6BxYq4

• Python 3.7

• Flask framework

• HTML, CSS, JavaScript, DOM, JSON format and XMLHJpRequest object

• Tiingo Stocks API and newsapi.org’s News API

  • the results will be displayed in both tabular format and charts format using HighCharts

  • provide news articles for the selected stock using the News API

• Getting hands-on experience in GCP, AWS or Azure

Tips:

1. search button:

   • front-end JavaScript script will make a request to your web server providing it with the form data that was entered (the ticker symbol)

   • use GET to transfer the form data to your web server

     (do not use POST, as you would be unable to provide a sample link to your cloud services)

   • Python script using Flask will retrieve the data and send it to the Tiingo Stocks API, use the Flask Python framework to make all the API calls

   • Using XMLHNpRequest or any other JavaScript calls for anything other than calling your own “cloud” backend will lead to a 4-point penalty. Do not call the Tiingo Stocks API directly from JavaScript.

   • If the user clicks on the Search buJon without providing a value in the field, an alert should pop up “Please fill out this field”

2. Clear button: clear the result area and the text field

Resources:

• https://api.tiingo.com/
• https://newsapi.org/docs
• Arrow up: https://csci571.com/hw/hw6/images/GreenArrowUp.jpg
• Arrow down: https://csci571.com/hw/hw6/images/RedArrowDown.jpg

Grading

• the homework will be tested on Firefox and Chrome
• search form
  • Clear button
  • Search button
• search result
  • Display company outlook information tab
  • Display stock information tab
  • Display the stock quote/volume charts tab
• Important
  • Do not call APIs directly from JavaScript!!!!!!
  • Do not use jQuery!!!!!
  • use Python!!!!!
  • use cloud server!!!!

Homework 8

Client-Side

Description

• Client-side
  • HTML5
  • Angular 10
  • Bootstrap 4 for responsive design
• Server-side
  • Node.js, Express.js
  • All APIs calls should be done through your Node.JS server
• use AJAX, JSON
• use APIs like Tiingo API and NewsAPI
• Watchlist: HTML5 localstorage for 'star'
• Portfoli: purchase history

Routes

1. Homepage/ Search Route ['/'] – It is a default route of this application
2. Watchlist Route ['/watchlist'] – It displays the watchlist of the user
3. Portfolio Route ['/portfolio'] – It displays the portfolio of the user
4. Details Route ['/details/<ticker>'] – It shows the details of the <ticker>

Tiingo API

• https://api.tiingo.com/
  • time zone: the timestamp is East Time, 4 hours offset need to be fixed

Latest News

• https://newsapi.org/docs

Video

• https://youtu.be/tzkWB85ULJY (desktop)

• https://youtu.be/LF3T3ghxHDU (mobile)

backend: https://csci571-hw8backend.wl.r.appspot.com/

backend api example: https://csci571-hw8backend.wl.r.appspot.com/api/v1.0.0/metadata/aapl

frontend project id: csci571-hw8frontend

Homework 9

try Android!!!

Objectives

• Java, JSON, Android Lifecycle and Android Studio for Android app development
• Google's Material design rules for Android apps
• tiingo APIs and Android SDK
• get familiar with Picasso, Glide and Volley

Summary

• 2 screens:

  • Home screen
  • Detailed Stock information screen

• 5 API calls

  • tiingo:
    • company description
    • stock prices
    • autocomplete
    • chart data points
  • newsAPI: News search

  Node.js backend of HW8 can be used in this HW.

• Use Java!! No Kotlin

• Use Pixel 2XL with SDK API 29

Details

• Splash page

• Home page:

  • Portfolio section
  • Favorites section
  • functionalities:
    • swipe to delete functionality
    • drag and reorder functionality

  Change:

  • positive: green
  • negative: red
  • no change: gray

  • Powered by tiingo at bottom: URL https://www.tiingo.com/
  • The home screen has been implemented by using a RecyclerView with the SectionedRecyclerViewAdapter. Each of the stock listings has been implemented using ConstraintLayout, TextView, ImageView.
  • The Search button on the toolbar opens the search bar to type the stock symbol to search. The search bar uses the autocomplete functionality: only make an API call after 3 characters

• Detailed page:

  • a WebView element which is blank till the chart loads in Detailed search page

  • Portfolio section: initial pre-loaded amount of $20, 000 to trade

    • TRADE button error checking:
      • sell more shares than they own
      • buy more shares than money available
      • sell zeros or negative shares
      • buy zeros or negative shares
      • enter invalid input like text or punctuations

  • Stats section: Current price, Low, Bid price, Open price, Mid, High and Volume. Set as 0.0 if missing in JSON. Use GridView element.

  • About section: description of company. Max as 2 lines with clickable Show more...

  • News section: uses RecyclerView and ArticleDialog elements. notice the time ago format calculation

Additional Info

• You can only make HTTP/HTTPS requests to your backend Node.js on

  GAE/AWS/Azure.

• All HTTP requests should be asynchronous and should not block the main UI thread. You can use third party libraries like Volley to achieve this in a simple manner.

Hints

• third party libraries
  • Volley HTTP requests
  • Picasso
  • Glide

Video

• Android: https://youtu.be/VH63nyau-Nc
• iOS: https://youtu.be/7agdj51H4iA

Grading