start building front end

[hannesdatta]

Prerequisites:

• 4

• 14

Deliverables:

Flask App, using a modified version of #4, with the following views:

• landing page:
  • this month's top artist --> listen now (artists.featured)
  • recently played: chart.getTopTracks with played tracks in last 24 hours
  • weekly top 15: chart.getTopTracks with 15 tracks played in last 24x7 hours
  • top genres: chart.getTopGenres
  • search bar: search music here --> artists.search w/ result page
• artist profile page: artist.getInfo and artist.getTopTracks
• recently active users: user.getRecentlyActive
• user profile pages: user.getInfo + user.getWeeklyTrackChart

[hannesdatta]

Great work on the front end! Here's my feedback:

LANDING PAGE

• [x] some kind of message box on the landing page: "We are a demo site without real data - use us to learn collecting data with web scraping and APIs" with links to some kind of tutorial page
• [x] remove listen now and add to queue buttons, these won't work
• [x] we need a way to see recently active users on the landing page as well
• [ ] change logo to "APIs to scrape". but keep the tilburg science hub yellow logo. This won't be TSH but a sister site for now
• [x] change text in search bar to: Search for artists, songs, and users

As far as I'm concerned, you can continue building the artist sites, user sites, and search result page

[hannesdatta]

Thierry on 11 April 2023, 1:22pm:

Ik heb de pagina's die stonden in de issue gebouwd (user page, artist page, search results). Deze zijn nu terug te vinden in de repository.

[hannesdatta]

Here's my feedback:

LANDING PAGE

Amazing work! Thanks!

• [ ] I noticed the site fails to render well on mobile. Can you come up with a reduced-sized version of the website? Yet, rather than making this a key pillar of your development, just come up with a minimal-effort version. Drop things that don't work. Don't invest a lot into making to super super mobile friendly. The outcome should be a reduced mobile site, maybe even with less features. That would be a fantastic use case for students to decide between mobile vs. desktop versions. So: MINIMAL effort.
• [x] The recently active users should be three-five user avatar "bubbles" (just with user names); when HOVERING over them, you see the song and artist. Hide song and artist names/ids also in some attributes in the HTML code.

ARTIST PAGE

Picture perfect :).

• [x] Remove the "featured" artists section from this page.

SEARCH RESLUTS

• [x] shouldn't we drop the additional search results bar? we already have one in the header?
• [x] the result TABLE is a bit too "tough" - lots of highlighting, etc. Can you make the results more plain?
• [x] show 10 search results, then allow iteration.

USER PAGE

Picture perfect as well!

• [x] We need to allow users to "flip" through that user's weekly charts. In other words, we need something like a previous week / next week button. Or a dropdown menu. Or something like that.

[thierrylahaije]

All issues you mentioned above have been adjusted and fixed.

As far as the Flask App goes I have created the following pages:

• Index page: fully working with real life data, the search function works from this page already.
• Artist Page: fully working with real life data.
• User Page: fully working with real life data. We can now also press next or previous to go to the next or previous week.
• Search Results: search results work, styling might need to be adjusted but we have to talk about this. User can use pagination to go through the pages of the search results. There is a maximum of 10 search results per page. We still need to fix an issue with the pagination concerning the maximum amount of pages visible in the pagination.

Summary for what still needs to be done in my vision:

• [ ] Styling for mobile version.
• [ ] Search function working on every page.
• [ ] Pagination maximum number of pages.
• [ ] Create a song page that visualizes the elements given in the songs table.

Whenever you have time, check the Flask App and please give me your pros and cons so I can continue on it next week. We will also need to schedule a small 15 minutes meeting to discuss some small details. After this, I think the Flask App will be done by next Friday.

[hannesdatta]

Hi Hannes, ik heb weer een nieuwe commit gedaan. Deze bevat o.a. de wijzigingen die je had gevraagd in issue #15 en daarnaast het begin van de flask applicatie. Tot noch toe bevat deze alleen de index pagina, maar ik ben nu bezig met de artist page end de user page, en ik ga er vanuit dat ik deze eind van deze middag kan toevoegen aan de repository.

I've tried running this but can't get it to work.

• I first started up the API, which runs smoothly

• But... I get error messages when launching Flask, which I'm unable to fix.

It seems BOTH pieces try to use port 8000, but that one is operated by the API.

When I first launch the app, I don't get this error (but then the API doesn't start).

Can you please update the readme.md to reflect on how to properly set this up? I feel something is missing in the instruction to make it work.

[hannesdatta]

I also tried starting up flask with gunicorn main:api -bind 0.0.0.0:80, but get this error message when the app runs:

(base) hannesdatta@Hanness-MacBook-Pro flask_app % gunicorn main:app --bind 0.0.0.0:80
[2023-04-17 13:57:43 +0200] [1521] [INFO] Starting gunicorn 20.1.0
[2023-04-17 13:57:43 +0200] [1521] [INFO] Listening at: http://0.0.0.0:80 (1521)
[2023-04-17 13:57:43 +0200] [1521] [INFO] Using worker: sync
[2023-04-17 13:57:43 +0200] [1525] [INFO] Booting worker with pid: 1525
/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py:834: FSADeprecationWarning: SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and will be disabled by default in the future.  Set it to True or False to suppress this warning.
  warnings.warn(FSADeprecationWarning(
[2023-04-17 13:57:49,787] ERROR in app: Exception on / [GET]
Traceback (most recent call last):
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/sqlalchemy/util/_collections.py", line 1008, in __call__
    return self.registry[key]
KeyError: <greenlet.greenlet object at 0x7fe86c6c8040>

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask/app.py", line 2446, in wsgi_app
    response = self.full_dispatch_request()
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask/app.py", line 1951, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask/app.py", line 1820, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise
    raise value
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask/app.py", line 1949, in full_dispatch_request
    rv = self.dispatch_request()
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask/app.py", line 1935, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/Users/hannesdatta/Research projects/apis-to-scrape/flask_app/main.py", line 74, in index
    recent_tracks = db.session.query(listening.timestamp, songs.ArtistName, songs.Title)\
  File "<string>", line 2, in query
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/sqlalchemy/orm/scoping.py", line 24, in _proxied
    return self.registry()
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/sqlalchemy/util/_collections.py", line 1010, in __call__
    return self.registry.setdefault(key, self.createfunc())
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/sqlalchemy/orm/session.py", line 4195, in __call__
    return self.class_(**local_kw)
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py", line 138, in __init__
    bind = options.pop('bind', None) or db.engine
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py", line 937, in engine
    return self.get_engine()
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py", line 956, in get_engine
    return connector.get_engine()
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py", line 560, in get_engine
    options = self.get_options(sa_url, echo)
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py", line 575, in get_options
    self._sa.apply_driver_hacks(self._app, sa_url, options)
  File "/Users/hannesdatta/opt/anaconda3/lib/python3.8/site-packages/flask_sqlalchemy/__init__.py", line 908, in apply_driver_hacks
    sa_url.database = os.path.join(app.root_path, sa_url.database)
AttributeError: can't set attribute
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch
[2023-04-17 13:58:27 +0200] [1521] [INFO] Handling signal: winch

[hannesdatta]

Errors solved -- it had to do with outdated versions.

Here's my feedback to the Flask app:

• [x] please implement a mobile version -- as suggested above
• [x] change logo to music-to-scrape

• [x] build a very simple HTML site we can link to privacy & terms. I can suggest content. I just need to template.

  

• [x] build the sitemap page or remove link.

• [x] rename API sources to "Learn how to scrape"
• [x] add three subpoints: Tutorial how to scrape the site (we link to some document eventually - probably on Git), Tutorial on using API, and link to API documentation (make it clickable to actual API doc)

• [x] do we need this?

• [x] make columns: Home - Learn how to scrape - Learn how to use APIs - More resources (with dropdown that I fill)

user pages

• [x] if you're on a user page, we need to include the DATE and time of the song played in the table.

• [x] further, the pages should NOT go into the future

• [x] I thought we would scroll through the different weeks in which users were active, but pages are fine. I would rename -1 to 1, -2 to 2 and so on.

• [x] please indicate what the first and last day is on each page.

• [x] number of plays is always 1. Just show date, time, title, artist

artist page

• [x] is this total number of plays since all time? make it clear.

landing page

• [x] make tiles clickable to an artist's page & boldify artist names

• [x] recently played: view more doesn't work

• [x] recently played: when clicking on it -- go the artist page

• [x] improve background color of the "This Month's Artist" a bit -- maybe some gradient? [minor]

search page

• [x] work a bit on the layout, e.g., have an ICON for song vs artist. or something that makes these boxes a bit smaller and more beautiful.

• [x] indicate on top of the screen on which of the pages you are. normally this is done like: showing result 1-10 out of 23.

[thierrylahaije]

Most issues mentioned above are now done. Only 3 points remaining for the user page, 1 point for the landing page, which need to be discussed before I can continue working on the application. After this, I can fix the mobile design for the application. Then all issues have been fixed and the Flask Application is complete.

[thierrylahaije]

All the remaining issues about the front-end of the Flask App have now been tackled. I took care of the following:

• Fixing the last errors in user_page: next/previous button, showing the dates in title, adjust table.
• Mobile version: the Flask app is now compatible with both Desktop & Mobile Phones. If necessary, I can also take a look at the Tablet version.

@hannesdatta Please take a look at the front-end and let me know if everything is now as expected.

[hannesdatta]

Open issues followed up in #20. Closing this for now. Good job on many details here!