CCTP by Vu Doan

Hi! Hello! What's your name???

vudoan1708 — 2020-10-25 21:10:34 UTC

1. I tried using vanilla javascript to deal with Spotify API first.
2. The fact that Spotify API needs an OAuth for developers to access was a real pain.
3. But thanks to this problem, now I know that OAuth adds another layer of security to the medata an API provides to a developer. There are actually many big companies like Facebook, Google, Dropbox, Microsoft... who allow access to their data through API, use OAuth.
4. What OAuth does is that it creates like some sort of portal which asks for an actual account and password to sign in to a service. After logging in, it generates an access token which has a lifespan of maximum an hour (this might depend on which service is used). After a token is expired, a developer will have to redirect the page back to the portal so that after re-logging in, a new access token is created.
5. Thanks to this Youtube channel, I realised a workaround that didn't involve the redirecting, which UX wise, is very bad

You Look Great On Your Avatar

vudoan1708 — 2020-10-30 20:55:37 UTC

Some of the drawings to showcase the intended look for the web app.
The frontend works a bit like an image carousel, where instead of images displayed, it will be steps going through the app workflow.
Also, the homepage of the app is gonna be the settings section

vudoan1708 — 2020-10-30 21:07:03 UTC

vudoan1708 — 2020-10-30 21:07:04 UTC

Can I Have Your Phone Number?

vudoan1708 — 2020-10-30 21:25:23 UTC

The process of writing the "proposal"

First Date (Getting To Know More About Each Other): So You Don't Know How To Dress Well ???

vudoan1708 — 2020-10-30 21:34:54 UTC

Updates on the first draft with improved functionalities (literally no UI development for now)
1. Able to generate a temp playlist
2. Able to show all 5 titles on the view
3. Able to preview songs from the app itself
4. Decided to only preview 30 - second songs in the app, and if a user like the song, when he / she clicks on a container wraps around an audio tag, it will re-iterate them to the corresponding song in Spotify app

Second Date (Shopping): I'll Buy You A New Dress, Let's Get The Measurements Right

vudoan1708 — 2020-10-31 02:03:07 UTC

Never actually bought a dress for a young woman before...

First time experience with Vue.js, and in addition to that, is using Vue.js with Python Flask as a backend server.

Now, a bit overview on the backend tool. Flask is a small Python package that helps run a web server that serves static files (really really really similar to node.js, although you'll get some additional features or benefits only available in that specific language).

...but did buy for my mum, and it was terrible...

Here, I followed a tutorial on how to use Vue.js with npm and Python because I knew that, with both technologies running at the same time, there would be a ''mind your own business" thingy happening between different ports they would run on. (*) This also happened when I was doing a IOE project with my other teammates, where we used React.js to serve the site on one port, but then node.js that used socket.io to run on another port. So when we referenced an endpoint to the backend server, a CORS error came and say hello to us annoyingly. What I did to fix it was to go about allowing access control to accept any origin the port that React served, were trying to fetch (*)

...but wow, did not expect her to be super nice complimenting about the dress I chose. Turns out, buying your mum dress does help you get some significant amount of experience with younger girls

The only differences here are the techs, I used Python Flask to serve the server on port 5000, and Vue.js to serve its files on port 8080. Fortunately, Python Flask was nice enough to include Flask-Cors to help us developers go through allowing access control for different endpoints less painstakingly, although, for some unknown reasons, the latest version resulted in compilation error, so I had to strictly follow the installation from the mentioned tutorial, to install so far, version 3.0.7 instead.

The important bit of this discussion is actually about fetching an endpoint from Vue.js. According to the tutorial, there is a library called axios which uses AJAX to send requests to the server, but I might try to see if I can use native fetch API in vanilla javascript to make requests.

(*): A Flashback

vudoan1708 — 2020-10-31 02:54:08 UTC

Ask A Famous Stylist To Prepare A Wedding Dress In Secret

vudoan1708 — 2020-11-01 19:14:18 UTC

This is a working progress of prototyping the website in Adobe XD.
As shown in the paper prototyping, I decided to go for a "clipart", animation looking front-end display, use a combination of 4 colours: a gradient background (pink, purple), dark grey, and white.
The purpose of this is to

Will You Marry Me!

vudoan1708 — 2020-11-20 12:53:11 UTC

Final "Proposal"

I Don't Like This Wedding Dress. Make Me Another One

vudoan1708 — 2020-11-20 13:02:01 UTC

Iterations of the Front-end Background

vudoan1708 — 2020-11-20 13:03:35 UTC

vudoan1708 — 2020-11-20 13:06:41 UTC

vudoan1708 — 2020-11-20 15:24:54 UTC

New Ideas for The Wedding Dress

vudoan1708 — 2020-11-22 12:53:37 UTC

UI elements:
There are 2 fixed items, which locate on the right hand side of the page: Records (weekly visualisation) and FullScreen.
On the left hand side of the screen, there are 2 interchangeable icons, either Log Off (available only on the homepage) or Back to Home (the rest of the process).
There will be a panel at the bottom, whose UI elements will be replaced depending on what stage the app is at (buttons, icons, loading bar,...)
These fixed elements will be set on top of a sky-full-of-colourful-stars, dark background.

All the UI elements will always be hidden, unless a computer mouse is moving (like how a Youtube video is played, when there is no mouse movement detected, all elements disappear to leave the spotlight onto the clip itself). In this case, all the interfaces disappear to shine spotlight onto the dark background

The Emotion Map

vudoan1708 — 2020-11-22 12:56:23 UTC

A section where a user either types in, or speaks through their microphone what they think their emotion is
The stars in the background will be gathered in a central space, almost formed in a shape of a circle, and divided into 4 equal quarters, representing 4 sections when applying the 2d plane model on a space

Playing

vudoan1708 — 2020-11-22 12:56:25 UTC

Now, the stars scatter around the space, rotate uniformly around the centre of the screen and shrink down in sizes as they each, gets drawn into the centre.
This is the visualisation to make it feel like the stars are disappearing into a blackhole, but the number of stars never ends. One disappears and others appear...
The visualisation is to create an aesthetic look to enjoy and not to imply a relationship with any element of a music piece EXCEPT energy and valence.

The Emotion Map (Loading Process)

vudoan1708 — 2020-11-22 12:56:25 UTC

The screen zooms in to an area which the system thinks a user's emotion is currently at.
This is a loading process that send texts to Sherpa API, searches songs from Spotify API, collects suitable songs and creates a playlist

vudoan1708 — 2020-11-22 12:56:25 UTC

Homepage (Settings page)

vudoan1708 — 2020-11-22 12:56:25 UTC

A page with a set of questions related to music settings, and a next button

A Little Glance Over The Prototype Of The New Wedding Dress Idea

vudoan1708 — 2020-11-22 22:30:47 UTC

No Music Visualisation Yet (Link To The Prototype)

Homepage (Settings page)

vudoan1708 — 2020-11-23 14:44:16 UTC

The Emotion Map (Loading Process)

vudoan1708 — 2020-11-23 14:44:16 UTC

The Emotion Map

vudoan1708 — 2020-11-23 14:44:17 UTC

Playing

vudoan1708 — 2020-11-23 14:55:26 UTC

Which Fabrics Should Be Used For Making This Dress: Satin or Charmeuse?

vudoan1708 — 2020-11-29 12:28:31 UTC

A moment to carefully think about what Python package suits best as a web server for this project (Django or Flask).

A quick summary of these two technologies:

Satin is a heavy, smooth, supportive fabric that works with every body type. As it tends to be a thicker fabric, it's also a good choice for cooler weather weddings

Django is a framework that helps developers "build large and complex web applications", it is very structured.

Charmeuse is a lightweight, sleek, semi-lustrous and soft fabric. It is satin-like to the touch, however not as glossy as satin

Whereas, Flask is more of an easy-to-use, friendly, micro and lightweight framework, it is minimal and open-ended (reference).

Both function almost the same, the only difference is that, as a big-in-size library, Django sets up a proper project workspace for us to get started. This workspace includes minor modules such as database migration, database model creation, and relationships between each modules... (A Youtube tutorial on Django).
Flask, lets us custom our own workspace, doesn't require complicated organisation of code to get started. Building the code workflow on our own makes it much easier to comprehend. (A Youtube tutorial on Flask).

In other words, Django is an equivalent to React, Vue, or any other modern progressive web framework. And Flask is an equivalent to Vanilla Javascript.

I want her to feel comfortable with the dress, not to stress her out

Due to the fact that, the project requires no complications for the backend server. All the data will also be hosted on MongoDB cloud database. And the REST API architecture for this project is minimal. I decided to use Flask.

(A very IRRELEVANT URL to the wedding dress fabrics that were referenced above)

Back To The Design

vudoan1708 — 2020-11-29 13:06:20 UTC

Time to think more about the visualisations. One happens during the music play. And the other is for history of emotions

The 1st visualisation (The Starfields): (A Youtube video for an inspiration)

The 2nd visualisation (Record: User Journey)

Record

vudoan1708 — 2020-11-29 13:42:07 UTC

The number of affective states of emotion will decrease to 5 according to Ekman's theory of basic emotions, instead of 6 based on my proposal

During Music Play (The Starfields)

vudoan1708 — 2020-11-29 13:45:31 UTC

User Journey

vudoan1708 — 2020-11-29 19:10:07 UTC

2nd Iteration
The colour codes follow a principle from the website below (only use 5, excluding SURPRISE)

Mood Colour

vudoan1708 — 2020-11-29 19:10:13 UTC

https://blossomireland.ie/body-maps-and-emotions-colour-wheel/

User Journey

vudoan1708 — 2020-11-29 19:12:13 UTC

1st Iteration
The emojis represent 5 different affective states

Let's Get Started, Shall We

vudoan1708 — 2020-11-30 21:44:35 UTC

After a short prototyping, I put together a folder which contains 2 separate folders: backend and client

The Starfields Visualisation Testing

vudoan1708 — 2020-11-30 21:45:35 UTC

This was originally made in vanilla javascript and three.js, then tranferred to Vue.js afterwards

REST API

vudoan1708 — 2020-11-30 21:49:43 UTC

Prototyping the REST API in Python Flask

The Colourful Starry Background

vudoan1708 — 2020-12-01 01:56:17 UTC

These stars will be initially static, and considered as background elements.
When it's the visualisation time, they become foreground elements

Must Get The Measurements Right! Otherwise, It Is Wasted

vudoan1708 — 2020-12-06 17:53:53 UTC

A quick prototype on the comparison of emotion scores of each song to that of a user (no speech recognition implemented yet)

vudoan1708 — 2020-12-06 17:54:58 UTC

SAD

vudoan1708 — 2020-12-06 17:55:56 UTC

A test on the accuracy of the model, with a sad emotion

HAPPY

vudoan1708 — 2020-12-06 17:56:52 UTC

A test on the accuracy of the model, with a happy emotion

vudoan1708 — 2020-12-06 17:57:10 UTC

Prepare To Add Some Flexibility To The Measurement. Make Sure It Won't Tear

vudoan1708 — 2020-12-06 18:06:16 UTC

Now, another separate prototype to test a Web Speech Recognition API provided within a web browser

A Test On The API (Colour Changes)

vudoan1708 — 2020-12-06 18:13:24 UTC

Web Browser Compatibility For Web Speech Recognition API

vudoan1708 — 2020-12-06 18:13:26 UTC

Let's Not Make This Dress The Traditional Way

vudoan1708 — 2020-12-07 21:05:30 UTC

As mentioned, Spotify API has an authorisation code flow which redirects a client to its authentication site, bringing along an access token that can finally be used for any available service

Redirect From Backend to Frontend

vudoan1708 — 2020-12-07 21:23:52 UTC

An approach which redirects from python flask to vue frontend app. This communication in fact, starts from the serverside, whose tasks (authorisation and such) will be performed within the backend app itself
After the tasks are done, it redirects back to the clientside. No complex methods needed for this operation

Redirect From Frontend to Frontend

vudoan1708 — 2020-12-07 21:23:57 UTC

Doing it this way is really dangerous, as the clientside still needs to ask the server to perform a redirection to eventually obtain an access token
But if a request coming from one side, to another, then being redirected back to the original requesting source, it will create what is called a "Redirect Loop"
A "Redirect Loop" is a loop created when side A requests side B to perform a task, but within the task, there is a redirecting back to side A, which forms a cycle of repetition within this communication, causing repeating web refreshes (A -> B -> A)

One way around this is to create a proxy to side B, so that the request from side A is now fetched by a duplicate of side B, which is mimicked within side A. This will stop the loop from happening (A -> A -> A)

The Tutorial to Make The Dress

vudoan1708 — 2020-12-07 21:44:14 UTC

Proxy to Backend Server

A Similar Looking Dress for Inspiration

vudoan1708 — 2020-12-07 21:45:58 UTC

A Github page

Let's Start On The Design

vudoan1708 — 2020-12-19 14:40:06 UTC

This time, I was trying out possibilities for the emotion map design that users can just click on a dot on the 2D graph, and it will map the coordinates to valence & arousal values. So that when calling Spotify API, the scores will be compared in this way (No more sentiment analysis)
Live Link on Codepen (This is just a design-based prototype, there is no functionality to the system yet)

5th

vudoan1708 — 2020-12-19 14:50:39 UTC

Instead of the circles, how about actual stars?

4th

vudoan1708 — 2020-12-19 14:50:39 UTC

It's starting to look less uniform and more organic from now

3rd

vudoan1708 — 2020-12-19 14:50:40 UTC

6th

vudoan1708 — 2020-12-19 14:50:40 UTC

The most horrible iteration I would personally say

1st

vudoan1708 — 2020-12-19 14:50:40 UTC

2nd

vudoan1708 — 2020-12-19 14:50:40 UTC

Star-Dots Map With The Ghosting Effects

vudoan1708 — 2020-12-19 14:50:50 UTC

The delay / lagging was caused by screen recording and it had no connection with the actual web app performances

Star-Dots Map Without The Ghosting Effects

vudoan1708 — 2020-12-19 14:50:52 UTC

The delay / lagging was caused by screen recording and it had no connection with the actual web app performances

Star-Dots Map With The Twinkle Stars

vudoan1708 — 2020-12-19 15:18:02 UTC

The delay / lagging was caused by screen recording and it had no connection with the actual web app performances

7th

vudoan1708 — 2020-12-19 23:25:12 UTC

Final Look of the Star Dots version (changes in size and brightness of each star)

In Favour Of Node.js

vudoan1708 — 2020-12-29 03:34:30 UTC

The plan of connecting users listening to the same music of a moment was not supposed to be included in the system initially according to the proposal.
However, the aim of the app is, no other than, creating a society where people can join in and feel each other's presence whilst discovering a new approach of listening to music. This concept is, connecting people who listen to music which has closely matched mood values via choosing them on an emotion map.

Therefore, in order to technically fulfil the nature of the app, there is a need of socket connections being implemented in it. Realtime applications implemented with Node.js have been reported to be MUCH FASTER and MORE EFFICIENT than Python Flask.

Link

Prototypes For The Song Playing Visualisation

vudoan1708 — 2020-12-30 14:44:41 UTC

Prototype With A Rainbow Path

Prototype Without A Rainbow Path

Visualisation of Songs Within or Outside The Zone of The Accepted

vudoan1708 — 2020-12-30 15:02:15 UTC

Terminology:

The Emotion Map:
A Map whose dots represent 2 affective values: valence and arousal

The Zone of The Accepted or The Zone:
The idea of creating a "green zone" which contains songs being closely matched with affective values a user chooses on The Emotion Map

Neighbours:
Users who choose a coordinates that is closely matched to others will be shown on the map

Loading:
The loading time varies and seems to drag on for a long while. Therefore, in order to distract users away from the waiting time, a couple of method will need using:

A loading bar will show its loading progress

The visualisation itself will also be the key factor of distraction: when a dot is hovered, a song's title, artist name and its affective values will display on screen, and if it suits their liking, they can drag the dot to The Zone to count the song to a playlist

A random line of words from the app's manuals / instructions will also be included right above the loading bar at the bottom of the page. This is meant to explain anything existing in the app (the explanations of the terminology, definitions of valence and arousal,... One downside is that this can only be a factor of distraction for first-time users

Below are 4 different examples of fetching songs based on 4 different moods: happy (green), sad (blue), angry (orange), and calm (purple).

The green shape represents The Zone, and green dots inside it represent collected songs. Other gray dots are visualised but will not be collected to a playlist (this is just a design prototype, so it is very uninformative).

Angry (Prototype)

vudoan1708 — 2020-12-30 15:08:38 UTC

Sad (Prototype)

vudoan1708 — 2020-12-30 15:08:39 UTC

Happy (Prototype)

vudoan1708 — 2020-12-30 15:08:40 UTC

Calm (Prototype)

vudoan1708 — 2020-12-30 15:08:46 UTC

UI (Prototype)

vudoan1708 — 2020-12-30 15:33:55 UTC

Neighbours (Prototype)

vudoan1708 — 2020-12-31 15:25:23 UTC

Neighbours are represented by the blue stars

Icon

vudoan1708 — 2021-01-07 18:43:28 UTC

Name: Muserfly

Music + Butterfly with Butterfly representing transformation, hope and life.
The music platform that can bring transformation, hope and life to its users

UI (App)

vudoan1708 — 2021-01-08 11:33:08 UTC

Git Repository URL & Updates on The App's UI

vudoan1708 — 2021-01-10 16:08:41 UTC

https://github.com/vudoan1708-cyber/Emotion-Based-Music-Streaming-App-WEB/

Song Play Test

vudoan1708 — 2021-01-12 00:52:20 UTC

Test on Song Play using Quince's premium Spotify account (Spotify tracks are only playable via its playback SDK if a user subscribes to its premium membership)

Minimum number of collected songs by default: 5

How About Displaying Song's Names on The Map As Well?

vudoan1708 — 2021-01-14 15:46:56 UTC

In order not to overwhelm users with alien interface, with not much information given, displaying song's names alongside the dots on The Emotion Map is not a bad idea.

But this can become drastically messy, as the map gets busier with hundreds of dots and names. There should be a more thorough consideration on this aspect: could be an on/off button to show/hide songs' names, on mouse hovering for further details (but this won't be ideal for mobile users),.....

Live Hosted App & More Updates on The UI

vudoan1708 — 2021-01-16 23:28:42 UTC

Live URL of the app (still in development): https://muserfly.herokuapp.com/#/

No more displaying song titles on the map. Instead, all the song detail, ideally, will be shown on the right pane of the screen (not implemented yet).
However, this approach can change users attention from the map to the right pane completely. In order to balance out this attention seeking, showing tracks detail will still be kept from the previous design. But this can only be performed via mouse hovering, to reduce the busyness on the map

Updates on The Playlist Info Section (the pane on the right side of the screen)

vudoan1708 — 2021-01-19 02:15:50 UTC

Gradient Colours on The Map, More Images & Icons and Live Update Playlist Info & Loading Bar

vudoan1708 — 2021-01-20 17:14:56 UTC

Everytime, there's a major update to the app, it will be immediately available in production. This is due to one and only reason, DEBUGGING PRODUCTION ERROR
Again URLs to the app and github repo:
https://muserfly.herokuapp.com/#/ (Please bear in mind my account on Heroku is a free one so waking up a Heroku app will take sometime)
https://github.com/vudoan1708-cyber/Emotion-Based-Music-Streaming-App-WEB/

vudoan1708 — 2021-01-21 13:20:20 UTC

vudoan1708 — 2021-01-21 13:25:28 UTC

vudoan1708 — 2021-01-21 13:29:06 UTC

vudoan1708 — 2021-01-21 21:20:45 UTC

Updates on User Account Section

vudoan1708 — 2021-01-21 21:22:02 UTC

Implemented toggling functionality on the settings display and logout functionality

vudoan1708 — 2021-01-21 21:28:50 UTC

vudoan1708 — 2021-01-22 00:05:50 UTC

vudoan1708 — 2021-01-22 00:05:51 UTC

Google Chrome

vudoan1708 — 2021-01-22 11:47:51 UTC

Microsoft Edge

vudoan1708 — 2021-01-22 11:47:55 UTC

Firefox

vudoan1708 — 2021-01-22 11:47:57 UTC

Web Browser Compatibility Testing

vudoan1708 — 2021-01-22 11:48:52 UTC

Although this process tends to be the very last step of a development stage, I still wanted to see whether the core playback functionality worked, and other reactive elements responded well to users' actions on the app

The Start of Setting Up MongoDB Database Connection

vudoan1708 — 2021-01-23 15:26:28 UTC

Redirecting my focus onto the database creation, this log is not gonna be as visual as others.

Getting started with setting up connection to MongoDB Atlas, I'm planning to use a npm package called Monk which proxies my server communication to MongoDB Atlas.

Great start with an authentication error during the connection. Looks like I'm very famous with these authentication bugs.

[couple of hours later]

Okay, it looks like I won't need to use a connection string provided by MongoDB Atlas on cloud to connect to its database. I can basically install MongoDB CLI and work on the database locally.

Then when I re-deploy the system with MongoDB connection, I'll add in the mLab MongDB tool in Resource section on Heroku, so that Heroku will create an online connection string for my system to link to.
Coding Garden Tutorial on MongoDB app deployment

[minutes later]

mLab MongoDB has discontinued their MongoDB add-ons on Heroku. Looks like an alternative to that is ObjectRocket which costs at least $46. Great!!!!!!

[an eternity later]

Wait, so I've been going in a loop........I was correct when thinking about using MongDB Atlas, so why do I have to use mLab for deployment whilst Atlas itself is already a cloud-based service? That Youtube tutorial from the Coding Garden is old.

The bug was not from the connection string itself, it was from the way I coded to setup MongoDB connection following their tutorial. It looks, to me that .then() function is unable to return a value, it can only perform executing callbacks after a Promise obj is returned. So that was why I couldn't get any value out, and subsequently, the code exited out because of invalid data.

vudoan1708 — 2021-01-23 16:55:12 UTC

Wait, the error is gone magically

vudoan1708 — 2021-01-23 17:00:57 UTC

maybe .then() function cannot return a value?
So when I used try and catch, the data is valid because it can perform a value return? Interesting...

Maybe if I had created a global variable and reassigned it to a data inside .then() function, and returned that global variable outside of the .then() block, that...could've worked?

The error bug was very happy to see me

vudoan1708 — 2021-01-23 17:01:27 UTC

When Instantiating Monk, ASYN/AWAIT is VERY REDUNDANT

vudoan1708 — 2021-01-24 15:46:28 UTC

When there is a chain of endpoint calls and one of them has implementation of ASYNCHRONOUS FUNCTION. Fetch API won't wait for this for too long and end up skipping waiting if it takes too much of the time. Therefore, this leads to invalid returned values.

I was running into this trouble when I updated my deployed app to Heroku. If it hadn't been thanks to the deploying process, I would've thought my app would be fine in production.

It was my fault from the start when trying to instantiate the Monk package for MongoDB Atlas connection in ASYNC FUNCTION. This caused a delay in the data fetching process and the fetch API decided to skip the waiting and get hung in the middle of the process without a response (no error, no succeed message).

It took me pretty much a day or two to trace back every little step of the code flow in order to detect the code hang basically because no responses were returned.
Sometimes, error is just a beautiful thing. Please appreciate it !!!

WhiteListing IP Address For Access to MongoDB Database

vudoan1708 — 2021-01-24 17:52:42 UTC

Okay! It's the database accessibility now.

MongoDB is really strict with its user's security. Therefore, whitelisting IP address to access the database is also a requirement. Using it for local development is no problem, because it automatically detects a user's IP address via their account. But to deploy it on Heroku and use it in production, a developer needs to know Heroku's IP address......Hmmmmm

There are a couple of ways, according to some of the research:

1. Use an add-on for "Static IP addresses for database requests and other TCP connections" [1] such as Fixie Socks. We can think of this as a proxying tool for IP address

2. Find any available region where my Heroku app is, then find IP address ranges in that region and whitelist them in MongoDB Atlas Network Access (IP Address for every region around the globe)

3. A quick and dirty way: Set one whitelisted IP address to 0.0.0.0/0, which means global access is allowed. Now everyone around the world can access my database basically, which is not a very wise option professionally

However, I will choose the third option for now, because I really need to focus on the development of my app and constantly test its functionality in production.
If that sounds like an excuse, which it is, then according to a quick research:
The 1st option can only provide developers 100 requests/month to its static IP address, which is okay, but I'll have to install a plugin on Heroku, and that's annoying

The 2nd option is the best so far in my opinion. However, the IP address ranges "are subject to change over time" [2]

[1] https://stackoverflow.com/questions/42159175/connecting-heroku-app-to-atlas-mongodb-cloud-service
[2] https://developer.mongodb.com/how-to/use-atlas-on-heroku

AWAIT

vudoan1708 — 2021-01-24 18:19:52 UTC

NO MORE ASYNC/AWAIT

vudoan1708 — 2021-01-24 18:19:52 UTC

ASYNC FUNCTION

vudoan1708 — 2021-01-24 18:21:33 UTC

vudoan1708 — 2021-01-24 18:46:08 UTC

vudoan1708 — 2021-01-24 18:46:11 UTC

JSON Design for Database Storage

vudoan1708 — 2021-01-25 18:28:12 UTC

Settings

vudoan1708 — 2021-01-25 18:30:46 UTC

User Journey

vudoan1708 — 2021-01-25 18:30:46 UTC

Back To The Frontend (Phew)

vudoan1708 — 2021-01-28 01:01:25 UTC

Finished Draggable Song Tracks and Adding Them to A Playlist
Added Visualisation of User-Added Songs on The Emotion Map with A Different Colour
Added User Settings to The Database
Reduced The Number of Stars on The Emotion Map (for computational performance purposes)

Search

vudoan1708 — 2021-01-29 03:43:33 UTC

vudoan1708 — 2021-01-29 21:46:57 UTC

Recommendations Search

vudoan1708 — 2021-01-30 02:26:14 UTC

Spotify API just released a bunch of new endpoints, particularly regarding recommendations and personalisations: (Link to Recommendation endpoint)

This added feature to its endpoints really helped the search time of my system go by MUCH MUCH MUCH FASTER.
But in order to create some dynamism to the search process, I kept the feature of random search at the beginning of the search process, and then followed by a loop of recommendation search based on the very first result.

One thing is that now, as the endpoint allows search for maximum and minimum mood values (valence & arousal). This is a very good thing, but the results are much more close to each other regarding affective scores, which leads to a clustered visualisation of the song dots on The Map

vudoan1708 — 2021-01-30 02:37:04 UTC

vudoan1708 — 2021-01-30 02:40:01 UTC

vudoan1708 — 2021-01-30 02:42:02 UTC

Recommendation Search Based on User's Playlists

vudoan1708 — 2021-01-30 02:44:49 UTC

Red Dots on The Map Represents Songs In User's Playlists

I chose a song by Michael Jackson from my own playlist, and Spotify API recommended songs and artists came from the contemporary generation: Whitney Houston, Corinne Bailey Rae,...

Recommendation Search Based on Manual Search Via User Typing

vudoan1708 — 2021-01-30 02:52:16 UTC

Again, this endpoint is great because not only did it return contemporary tracks and artists in a same era, it also tried to find closely matched affective values of songs.

I searched a rapper named Eminem, and it responded back with Linkin Park, Gym Class Heroes,...

On one hand, this new endpoint for related search is very positive to my app, both in terms of reducing the loading time and the randomness of searched keywords, instead adds in a much more logical search algorithm. On the other hand, the visualisation will not look as fluid and varied like it was before

Handle Cases of Searched Keywords with Accents / Diacritics

vudoan1708 — 2021-02-03 02:55:09 UTC

In Vietnamese language, there are 4 types of diacritics / accents that can change meaning of a word completely. Knowing this helps me a lot with putting in more thorough considerations on the search process. With words that contain the accents such as è, é, ẻ,....It is difficult to get back correct result from Spotify, or sometimes, it doesn't even return anything. Thanks to this answer from Stackoverflow [1], I was able to understand how using normalize function with vanilla javascript in combination with regex can remove such deformation in a language and convert a word into a much globally readable language.

[1] https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript

Before The Fix

vudoan1708 — 2021-02-03 03:06:19 UTC

What Was Fixed

vudoan1708 — 2021-02-03 03:06:19 UTC

After The Fix

vudoan1708 — 2021-02-03 03:06:19 UTC

Google Analytics Prepared for User Testing

vudoan1708 — 2021-02-10 14:12:52 UTC

I added google analytics to my deployed site in order to track user experience / engagement to it

This tool is very useful when tracking web traffic, monetisation,... But in terms of tracking user's behaviour and engagement, it might still not be able to do its best, particularly when it comes to clicking and scrolling counts. However, more research needs to be done before coming to a conclusion

[1st conclusion]

The scrolling tracking feature can only detect user's scrolling relatively to the ENTIRE PAGE, but my app has different scrollable sections...

Google Tag Manager Assistant Web Extension for Development Purposes

vudoan1708 — 2021-02-10 14:13:18 UTC

Google Analytics - Events Tracking

vudoan1708 — 2021-02-10 14:13:18 UTC

Still struggled to understand how the events were counted. As I was playing around with scrolling and clicking, but the number wasn't live updating.
My suspicion was that the site needed closing before the data of events was loaded

vudoan1708 — 2021-02-10 14:13:18 UTC

Code Added for Google Tag Manager

vudoan1708 — 2021-02-10 14:13:18 UTC

This piece of code snippet needs including to the deployed app to track any event happens on it

Google Analytics Interface

vudoan1708 — 2021-02-10 14:13:18 UTC

Show a map of the app's influence

Google Tag Manager - Triggers to Track Events

vudoan1708 — 2021-02-11 11:32:56 UTC

User Journey & User Settings Objects

vudoan1708 — 2021-03-06 15:06:17 UTC

There are 2 JSON objects which will be stored in MongoDB Database

User Settings: When a user tries to change their personalisation settings
User Journey: When the song collection process finishes

User Settings Obj

vudoan1708 — 2021-03-06 15:07:24 UTC

Re-configure The Connection to MongoDB Everytime a Data is Sent to The Backend

vudoan1708 — 2021-03-06 15:09:46 UTC

One downside for categorising different database collection like this is that the connection to MongoDB configuration has to be re-invoked over again depending on which collection is needed for a particular data schema (0: User Settings, 1: User Journey)

JSON Objects for Database Storage Completed

vudoan1708 — 2021-03-06 15:10:08 UTC

The JSON design is based on the design schema

vudoan1708 — 2021-03-06 15:45:26 UTC

UI Changed

vudoan1708 — 2021-04-30 00:40:56 UTC

Song Dots

vudoan1708 — 2021-04-30 00:42:07 UTC

Aggressive

vudoan1708 — 2021-04-30 00:42:28 UTC

Calm

vudoan1708 — 2021-04-30 00:42:50 UTC

Exciting

vudoan1708 — 2021-04-30 00:43:33 UTC

Sad

vudoan1708 — 2021-04-30 00:44:06 UTC

BIG PLAN AHEAD [26-05-2021]

vudoan1708 — 2021-05-30 12:28:44 UTC

## Extended Features for Muserfly

### Mobile Responsive Design

This will be developed for mobile users

### The Emotion Map: Zoom Feature

This will be developed for mobile users

### The Emotion Map: Panning Feature

This will be developed for mobile users

### Song Mapping on Locations: AR.js

Locations strongly correlate to memories. And Memories bring back Emotions. What if you can use mixed reality technology to allow users to "plant" their playlist on a location and whenever they visit that physical location, they can see and play the playlist they listened to in the past?

This will open up possibilities to create a music app where people will be able to listen to a playlist as they physically and virtually walk passed it, regardless of their "planted playlist" or someone else's

Mobile Responsive Design

vudoan1708 — 2021-05-30 12:30:59 UTC

Finish The Mobile Responsive Design on the 30-05-2021
Technically, Muserfly heavily depends on Spotify to upgrade their web playback SDK to make it work properly on most mobile devices

Record Detail Section

vudoan1708 — 2021-05-30 12:33:10 UTC

Homepage