polinaouk

[polinaouk]

Last step - testing the final implementation

I got the feedback that the core functionality of the app seems to work well. There were minor advices to improve which I reflected for submission of my final implementation from users’ feedback: - Added more information for displaying of search results: more visible ratings, price range information, list of tags, open now icon and moved the add activities button to the right side of the card. - Disabled some categories which were not supported by API - Improved the format of displaying dates - Improved the loading state by adding the skeletons - Renamed ‘tasks’ to ‘activities’ list - Changed the edit icon for activity to swap one

[polinaouk]

Frontend service and hosting

After finishing with REST APIs, I built a frontend service for the project.

I use create-react-app to generate an environment for react application. It allows the use of development mode with time saving features as well as provides default optimised options or production built. Also, create-react-app provides only necessary tools and gives the freedom to choose libraries for routing, API request, styling etc.

There are three main screens of the application:

Start page This page is assigned for everyone who does not have a valid JWT token in cookies.There are two available states for showing signInForm or signUpForm. I used a new React hook feature which is called “useState” for local state management. Users can toggle this state by clicking on the button at the bottom of the form.

Main dashboard page Every user with valid JWT token in cookies is getting redirected to the main dashboard screen. There are two main components which are responsible for showing search form and list of saved plans.

Search results page / edit page After submitting the search form in the main dashboard page, the user gets redirected to the search results page. This page is also used for viewing and editing currently saved plans. There are two sections on this page. There is an activities list at the left side of the screen. This component shows the ordered activities of the current plan. There are two buttons such as “modify” and “remove” for each activity. The main section of the page is divided on the two components. The first one is a search field form. Each field value has been set up by the user on the previous screen. Also, users can change the fields and search again with new parameters. The second one is a responsive grid of cards with search results. Each card has a name of event or place, location, image, rating and select button. This button is responsible for adding a new activity in the activities list of the current plan.

<Card/> component from material-ui is used to display a search result card. It has a base unit for displaying with a wide range of customisable options for both visual display and card content. The data in the card depend on the type of the selected category. Different data are displayed for different categories. For example, the card shows the opening parameter and list of tags for the search result of the restaurant category. List of tags should for better understanding of the user the type of establishment. Meanwhile, for events search results, a price range is displayed which means that the user can evaluate the price category of the event in advance.

Hosting The front-end part is also placed on the heroku service. It allows to use a convenient integration through git, easily deploying the application using a single console command. It also allowed me to use a special buildpack that simplified the deployment of react applications. The used buildpack is create-react-app-buildpack, which allows me to deploy the project based on the create-react-app and serve the application through nginx.

[polinaouk]

Set up environments and deploying to production

I went through tricky process to deploy my Backend server to the Heroku. This required me to correctly set up environments.

Creating a production Mongo DB

I chose mongodb atlas for storing my DB. I successfully created the cluster and connected it to Mongo Compass where I can see my DB in cloud and locally. It took some time as I was getting errors with setting up env-cmd dependencies. The problem was that I installed the latest version of env-cmd which required a special flag in set up. They introduced this in latest version and it was breaking my code. (Welcome to Open source :))

https://gitlab.doc.gold.ac.uk/polem001/creativeproject/-/commit/193895e493fb338de810a193485da09306dfb8c4

Heroku deployment

I deployed the backend server to production on Heroku. When it is running on Heroku, it is connected to production MongoDB atlas

[polinaouk]

Coding time!!!  / Creating REST APIs

System design

I decided to separate Frontend and Backend on two services because of several reasons:

- Easier scalability

- Consolidation of APIs

- That is real life applications are created

- Modularity

I created backend server in Node js (https://gitlab.doc.gold.ac.uk/polem001/creativeproject) with using Mongoose that helps to talk with Mongo DB. The core implementation of Backend is CRUD operations. There are different routes where each route of server is responsible for CRUD operations. 

User authorisation APIs

I started from implementing APIs for user authorisation because application highly relies on it. I used code from the Udemy course with some changes (https://www.udemy.com/course/the-complete-nodejs-developer-course-2/learn/lecture/13729448?start=0)

For testing user APIs, I used Postman application where I set up my API calls.

The main difficulty was to understand mongoose because I have never used it before. 

DB structure : User = {      _id,     Name,     Password,     Email,     Age,     Tokens [],     Interests [],     Location, } Gitlab https://gitlab.doc.gold.ac.uk/polem001/creativeproject/-/blob/master/src/routers/user.js

Plan / Tasks APIs

In the post about UI design, I described idea that plan has tasks to do. I decided to separate these two things on different CRUD operations. I created APIs that allow to Create, Read, and Update plan. The same was done for Tasks.

DB structure:

Plan = {     _id,     Description,     Completed,     Owner (user id),     Due_to, }

Task = {     Category,     Description,     Location,     Photos,     Rating,     Date_and_time,     Ticket_price,     Author,     url,     completed     Owner (plan id),     Order,     Tags [],     feedback } Gitlab https://gitlab.doc.gold.ac.uk/polem001/creativeproject/-/blob/master/src/routers/task.js https://gitlab.doc.gold.ac.uk/polem001/creativeproject/-/blob/master/src/routers/plan.js

***Overall***

- Plan and task APIs can be only called by registered user. It is controlled by auth middleware. https://gitlab.doc.gold.ac.uk/polem001/creativeproject/-/blob/master/src/middleware/auth.js

- Plan has owner field which is user _id. User can only get plan, which he/she created. 

- Each task has owner field which is plan _id. This allows to get all tasks together for selected plan.

- Postman is being used for calling/testing APIs

[polinaouk]

User testing feedback

After creating UI design of application, I decided that it is a good time to get some feedback. Rob Homewood, PhD student of Goldsmiths, was happy to help and gave great constructive feedback.

I wrote questions to make sure that I covered everything during my testing and sent them to Rob.

Questions:

There 4 different screens there:

1. First screen is just simple login page. Should be understandable? 2. After you login, it asks you to fill the form with your details. - Is it clear how to add your interest? - How would you add your current location?

3. The main page. - Can you find where your saved future plans in UI? - Does menu on top of the page easy understand how to search on something? Can you understand how to set up search filters? - Can you find a button how to create a second search?  (it will be "and later I am up to do")

4. Editor page The idea of the app to combine few plans together. For example Lets first to go in concert and then have a dinner. - Can you find your search results from previous page? If you want to change the search criteria for finding restaurants instead of anything, what would you press? (on top of the page, there is a search icon on right with text "Search anything", You would suppose to press on word "anything") - How would you add your next thing to do? (at the bottom there is plus icon)

Rob response:

1. This is easily understandable. One comment I would make is that you maybe want to include a link to logging in (if they already have an account) at the bottom. I know that you have a link at the top right but often with these pages I see the link to login at the top and the bottom. So underneath all the signup stuff you have another separator and then a plain text link saying something like "Already have an account? Log in here." not necessary but just a thought 🙂

Also, I don't think you need an 'or' separator between the google and facebook signups. I would have the two of them together and the 'or' just separates the manual signup from the google/facebook signup.

2. It is clear how you add your interests and how to add your location. My comment here would be firstly that you separate the location and interests by page. So first you register your interests, and then move onto the next page where they input their location. This way you reduce the cognitive load and step them through the process in a more 'hand holding' sort of way.

An additional benefit to separating them onto different pages is that it gives you a bit more vertical space on the interests page, meaning that you can give the div tags for the individual interests a bit more padding making the buttons a bit more clickable.

3. a) I would look at the bottom where there is a list of plans and see that there is a plan for tomorrow.

b) This mostly makes sense but I would perhaps suggest a few changes. First I would maybe swap the order of 'I want to do' and 'y mood is for'. This shifts the focus from when they want to do something over to what they want to do and where they want to do it. Second I would maybe suggest revising the language used. 'I want to do' to me implies asking 'what' the user is looking to do, rather than when they want to do it (which the default of 'now' implies). So maybe that could be rephrased as 'when'. For the location section I think the label is fine, but the default answer could maybe be better phrased as 'My current location'. (This is just my intuition). lastly for the label 'My mood is for' I would maybe rephrase this as "I'm in the mood for".

c) This is easy to find but I would consider rephrasing as "and later I would like to..." with the elippse indicating that this will extend the menu into another item. Also, I'm a little unsure what the 'nothing' icon below it does. It sort of looks like a checkbox, or perhaps a preset event that can be ticked? Maybe it would be better to have a big round '+' button which indicated that you will chain another event onto the end of this.

4. a) To find my previously set criteria I would look at the filter section which seems to show a list of criteria which I can disable. I would also assume that if I clicked the 'filter' button, that I would get a drop down where I can add more filters. I would also consider making the 'Search Anything' section a text box because then it makes it clear that you can type in here and it will filter the search.

b) Yes, I think that the '+' button is clear but I would give it a bit more padding to make it clear that it is a button that can be pushed, rather than an icon indicating the next section. I feel like I'm making an assumption here that it is supposed to be a button. if it is not and should just be an indication of the next section then I would keep the same size and remove the round border around it. Maybe the best thing would be that if there isn't a next event set yet, then make it a big button and once an event has been added, it shrinks down to indicate the link and another button appears underneath the last event.

Some notes on this page too, the description of the events being suggested are being quite heavily truncated. I think the font size is fine but you could maybe do with a bit more horizontal space. I really like the look of the menu bar on the right but perhaps it can slide out when needed giving the description a bit more space and making it more readable.

In general I think its looking really great and super professional, well done!! Hope my feedback was helpful.

Other feedback

Another person who was happy participate was Louis James, student from Creative computing course. He answered my questions on the video.

Next steps

In my future implementation of UI I am going to reflect useful feedback :) 

[polinaouk]

Research and UI design

Before I started to work on UI design, I have spent some time on research looking at different resources to get inspiration and ideas. 

Flow-based interface

My idea was to implement flow-based interface where each flow is consist of nodes. Each node is an in depended to each other and carries data. In my application, each flow is a plan and nodes are tasks to do. For example the plan is to go to restaurant and then have a drink at bar. Restaurant and bar are two tasks.

Resources

I highlighted three resources for building my UI:

Zapier.com.

I really like the design of their application and took some ideas: the main page allows user to start building your flow without need to go to another link. After setting up everything for inputs, it redirects you to editor page where you can finalise all your nodes and add some more functionality.

Overall, these two main features, which I considered for my work – Main dashboard page where you have starting interface for building your flow. The second feature is separate page for editing nodes and finalising all inputs.  

Eventbrite.co.uk

Eventbrite has a great categories separation for finding events – Business, health, food etc Also, there is convenient selection for finding event by date. Dates are separated on today, tomorrow, this weekend etc. This allows to user quickly set up their preferences.

To do list application

I personally love this application for organisation my tasks. Dashboard has different sections of task that are tomorrow, this month and next month. This feature has been included for main page on my application dashboard. I also considered to include such as calendar organising from feedback that I received from survey that suggested this.

UI design

I used Adobe Photoshop to create UI design. There are four screens.

1. It starting screen for login to application.

2. After creating account, user atomically redirects to second page where he/she can choose interest and location. This information would help to create future suggestions plans functionality.

3. The main dashboard is divided on two parts: On top is form interface for setting up search criteria and at the bottom already existing plans.

4. After clicking on find for me button on the main dashboard page, the editor page shows all search results with filtering. User can manipulate with each node/plan and set up a new one. The final step is just to save the current plan and then user is redirected back to main dashboard page.  

[polinaouk]

Improving survey, receiving feedback, making changes and getting survey responses

I made a great a progress on survey side of a project and let me tell you more about it. 

After creating the survey draft, I went for a meeting with my supervisor Jamie to get feedback. He corrected my mistakes and advised some improvements such as to use google forms, be more specific about questions, include some other questions, make gradient for some questions.   After that, I changed my survey following his feedback and had another meeting to show the result. 

This process was repeating couple of times until we were both happy with a survey.

The final result of the survey you can find at the link below. 

https://docs.google.com/forms/d/17qVwRPizvdiBClUR_JqZmBKJC9hGnWHcEGDredLJ4fE/edit?usp=mail_response_notification

The survey was created at Google forms where 10 people got participated in it. The participants were a different age range group but half of them 18 – 24 age group. 

There were useful responses such as the interests of people, feedback about other applications, functional suggestions etc. All this information I am going to use for analysing and developing my application.

[polinaouk]

Creating survey, API evaluation, data analyses and setting up MongoDB

From my last update, I have been working on building the survey, reorganising API table, learning data analyses in Python and implementing it all with MongoDB. 

Survey research

I have been thinking of ideas how I can improve my project and make it more useful and usable. As I have written before, I mentioned about the survey which I have done for a project. However, I released that it needs to be done with improvements and wider implementation.

As a result, I worked on building the survey questioner by using slides of Data Visualisation course and reading the book “Analyzing Quantitative Data”. In January, my plan is to ask to do a survey for different age groups and also ask students on Creative computing course if they would like to do it.

I created a google doc where the survey could be viewed. https://docs.google.com/document/d/1ez7X2PjqzFcsMd65h3x8K1mltUS_mBSPrqDPfhfbR_o/edit?usp=sharing

API evaluation

I reorganised my API table for better analysing each API. My API table includes the criteria such as documentation, quality of data, limits and overall view. Each of these criteria has a score base system to help me to judge each API. As a result, I took a decision to implement two top APIs (Meetup and Google) in my prototype because they have a best score results.

I created a google doc where API table could be viewed. It also helps with tracking of changes. https://docs.google.com/document/d/16WLi7o-0F1UAaLXxR54f4sK-r9SvEGfehLFz6cV3Fxo/edit?usp=sharing

Data analyses with Python and Pandas

Data analyses is taking important part of the project. It would help to create new features such as suggestions, clustering etc. As a result, the prototype is split in three components – server that does all main logic and manipulating with Mongo DB (JS), UI component (React) and the third one (python) that analyses data with Pandas library.

I started from research which Data analyses to implement and chose Pandas library because provides hight-performance and easy to use. I watched YouTube tutorial, played with some functions in Jupiter with data from Kaggle and investigated Pandas documentation.

Some screenshots of my work:

 YouTube tutorial https://www.youtube.com/watch?v=nLw1RNvfElg

Pandas learn documentation https://bitbucket.org/hrojas/learn-pandas/src/master/

Kaggle. Service with Data https://www.kaggle.com/neuromusic/avocado-prices/data

Including MongoDB in prototype

Next step, I built a small prototype where I implemented MondoDB where my data gets saved locally. I used RoboMongo to view them. For future improvements, I am going to use Mongoose library for interaction with DB. 

Gitlab commit:

https://gitlab.doc.gold.ac.uk/polem001/creativeproject/commit/ba17b8b63b23c24ac38213a9121791a1b54d9f6d

Created a test collection with user:

Reading local DB in Python with Pandas

When I created my small data in my prototype, I created a python script which successfully prints data with Pandas library using this example code from stackoverflow.

https://stackoverflow.com/questions/16249736/how-to-import-data-from-mongodb-to-pandas

This connection will allow me to build my server for analysing the data.

Gitlab commit:

https://gitlab.doc.gold.ac.uk/polem001/creativeproject/commit/780715a41ad598d2e9685d8c05280ed18b34df04

[polinaouk]

Learning, prototype and solving

The result of my new work was finished education courses, built first prototype, solved problem with API and tried new one. I also successfully met my milestones.

Learning new language, materials and features

Last few weeks, I have been doing different education courses for building my prototype. I am pleased to say that I finished them in time as set up in milestones and learnt many new things. 

For me, it is important to build efficient application which requires me to know Algorithms and Data structure. These two courses gave me a basic knowledge and understanding which I am hoping to implement in my future work.

https://www.udemy.com/course/learning-data-structures-in-javascript-from-scratch https://www.udemy.com/course/learning-algorithms-in-javascript-from-scratch 

In parallel, I was interested to learn TypeScript to see different options apart of JS. I finished quiet good course where explained basics of this language. https://www.udemy.com/course/typescript-fast-crash-course/

Additionally, for improving my UI skills I learnt new great React feature called Hooks which I will implement in my work.

Building first prototype

After education courses, it became a good time to build first prototype. I built a web-server by using a Node.js. It uses Google API to find a museum according to the city which you can insert in search bar. For being able display in UI, I used handlebars which I am going to replace by React + Redux. 

Overall, this was a good example to show my idea of work.  In the end, I became to conclusion to use JS instead of TypeScript because JS has all needed feature that I need for my project and using TypeScript will not give me big difference. This would only make difference in bigger scale project which is not the current case. Link to commit https://gitlab.doc.gold.ac.uk/polem001/creativeproject/commit/1832c6d1a58f959be20f29a2c2bdc9e69f5e92c6

Identify problem and trying new APIs

I discovered that Eventbrite APIs were deprecated since 12th December after I tried them in Postman. I spent time in understanding that the new replacement APIs will not support functionalities that I need such as getting and searching events. This required me to find and test a new API. 

Meetup APIs are good replacement for it. They have all needed functionalities including searching on categories, getting events from groups etc. I also like how they are documented and their diversity.

Added to my API table

After investigating meetup APIs, I also included it in my prototype and successfully displayed future event for specific group. 

Link to commit

https://gitlab.doc.gold.ac.uk/polem001/creativeproject/commit/008685a34ed764e004aaf0a0e50516666f67859f

Prototype result 

[polinaouk]

Scenarios and postman

Last week, I spent on survey of people’s free time, building scenarios and defining functionalities. I was also concentrated on searching, analysing and using different API in postman which helped me to understand how to build my application. In parallel, I am watching different tutorials on new technologies which I am going to use in my application.

Define user group, few personas and scenarios how this application could be used

People scenarios:

I talked with different people how they would spend their free time and used their example to build scenarios. I highlighted four examples because they are completely different to each other and touches different aspects of life. 

1. Single man who lives in South London and works in London City.  After work, he likes to go to restaurants, walks and explore new events. Every time, when he wants to find a new place to have a dinner, he searches restaurants near him by Google maps and then reads timeout to find new events. To get to the place or return back he would uses an uber.

- Combine three APIs in one place such as Google maps, Eventbrite and Uber - Remember the interests of person and suggest a new one based on location, preferences and taste - Calculate the plan for the evening 

2. Married couple with two children. They live in central London because both of them work there. On weekends, they like to take children to playground, museums, parks and then have a meal in family restaurants. Usually after such as day, children are tired and to return back home they would take a taxi.

- APIs for museums, checking parks, playground - Correctly finding cafes and restaurants for children

3. Student girl who studies an art and likes to visit exhibitions. She always looks for new artists and spend free time with her friends. They like to go to the cinemas and have a drink with long chat. As being a student, she tries to save money as much it is possible but has a right balance of her life.

- APIs for cinemas, exhibitions and bars - Calculating routes based on Underground, bus and trains - Be able to look at student discounts and suggest a new place with them 

4. There is a couple which live separately on different sides of London. After work, they like to go to have a dinner somewhere in the middle between their areas. They also like to go to have coffee and tea after dinner. 

- Sharing places to another person - Finding places in the middle of two locations

Exploring different APIs with postman

Building scenarios helped me to define functionalities and APIs which I need to explore.

Instead of rushing and building a small prototype, I used Postman application to make different calls and see how each API works. In my application, the biggest part of my application is taken by Google APIs usage. As a result, I concentrated most on it and exploring Google Cloud.

Next steps

- Continue to investigate in APIs

- Building a small backend protype

- Keep learning :)

[polinaouk]

More learning, working and research.

During this time, I have been working on algorithms theory, trying to play with Google APIs and thinking about functionalities of the my application. 

Here are some results:

Identifying scenarios 

The most important for building applications is to think about scenarios when user needs this application. One of the new ideas is clustering on based collaborative filtering - recommending similar things to similar people:

Clustering users for creating suggestions

I found a great k-means algorithm for the idea to cluster users based on their choice depending on location. Let’s say 10 user likes to buy coffee in two areas like New Cross and Regency. We can cluster in the group and give them suggestions for new places. 

The k-means algorithms uses the distance from the centre of each cluster to classify the data which is in my situation coordinates of a user.

*System should track feedback from the user in order not to give a wrong suggestion the user in the same cluster.

Investigation on database choice

I have decided to use MongoDB as it works great with Node and also more object-oriented, simple, dynamic and scalable comparing to MySQL.There is a useful existing Mongoose model which gives me a really easy system for modelling my data like plan events. I will be able to set up the various fields and data types as well as data validation which is going to make life easier and more secure.

Next steps:

Identifying more functionalities and building SMALL prototype.

[polinaouk]

The beginning

(via polinaouk)

Initial idea

My first idea for Creative project was to create web-based social media aggregator, which would allow seeing news from different platform, such Facebook, Instagram, Twitter and Youtube. I spent some time to research their APIs and potentiality of idea. Unfortunately, I found out that it would not be possible because of privacy issues. It was still useful piece of work, which helped me to create my final idea.

Final idea 

For my final year project, I have set out to build a web-based application which would let any kind of users to quickly find and plan evening according to their budget, interests and location. The idea behind this is that aggregate information from different APIs to show all possible events with filtered setting and conveniently see all possible ways to get their including ordering taxi, renting bike etc. 

For example, user comes back home and wants to find new event and then eat in restaurant/cook new dish with maximum budget and distance setting. From preventing person to manually searching “restaurants near me”, ”sports near me”, “exhibitions near me”, checking timeout today, , jumping in different sections “ART”,”FILM” etc and then calculating time to get there, route, overall cost etc the application will show everything in one place with right filtered calculations, plan, comparison and additional suggestions.

The aim of this project to help people to discover, explore and share places with minimum of time using full advantage of APIs of platforms such as Uber, Google, AccuWeather, Booking.com etc. Additionality, they would also have opportunity to share their evening or day plan which includes different activities