osoc17/datascouts

Social Media Aggregator

datascouts's Issues

Experience & Setup Laravel

Translate the Node backend into Laravel 5.3

Fetch data from Facebook API

Create design for Twitter cards in waterfall

Detailed design of twitter card

Implement filtering

Users should be able to filter the waterfall display on: entity, social media (,date).
When a filter is toggled the contents of the waterfall display should update.

• List of toggle-able entities
• List of toggle-able social media
• Update the contents when the filters are changed
• Date

Laravel Setup & DB Store

Techno

• Laravel v5.3
• Lumen v5.4.6

Facebook API Fetch

Create filters per entity

Research on sliding elements on html

We have 3 sidebars (entities, handles, action/crud), they should be triggered when clicked (JS).
We also have sliding forms to add an entity or a handle.

• Sidebars
• Forms

Setup

Make sure everybody has set up the project on their laptop, up and running.

Scheduler to fetch Data && Worker

Feature

In order to fetch data from different social media sources, we need services that fetch data from those social media sources using their API endpoints. We need this because we need to fill the database with social media posts in a way that allows for easy and filtered retrieval through the API (insert link to API issue if applicable).

Services

• Create a Command class
  • Walk through all fetchable handles
• Create a Job for each service used by the application
  • Lock the handle (Semaphore for MuTex)
  • Fetch the data from the service
  • Store the data into the DB
  • Unlock the semaphore

Filtering

List of filters

• Entities
• Social media
• Date (Simple date : 10/02/2017)

CRUD on Entity

CRUD on Entity

It's a new feature to allow CRUD on Entity. Entity is a group of handles

Model

Entities
Id (PK)
name (String) Not Null
url (String) Unique
image (String)

• Entity 1 -->1,n Handles
• 1 Entity has 1 or Many Handle
• 1 Entity Belongs To Many Handles

Actions

• Create
• Edit (name)
• Delete (Soft ?)
• Read (fetch)

Validations

• Name, URL (no empty)
• Check Internet connection
• Limitation on size and extension (.png, .jpg) -> Check for the mimetype and size

Implement CRUD on social media handles

Users should be able to add/edit/delete handles to their entities. A list of handles should be visible when they select an entity.

Implement CRUD for the handles to the frontend:

• Add handle to entity (POST request)
• Delete handle from entity (DELETE request)
• Edit handle from entity (UPDATE request)
• Display appropriate handles in list when an entity is selected (GET request)

Structuring/positioning of elements in HTML

Structuring and positioning the HTML tags

• Sidebar for entity
• Sidebar for the handles
• Sidebar for the actions (edit, delete)
• Filtering
• Buttons

---

• Re-design

Create filters per medium

Also add them for the future social media (not LinkedIn or Instagram)

Split App.js into more usable components

Make App.js more composable.

Components

Root : AppComponent contains

• EntitiesComponent
  • EntitiesListComponent
  • EntitiesDetailComponent
• FiltersComponent

Create wireframes

Create the visual structure.

Implement validation & errors messages for social media handles

When a user enters a wrong url or when a post request returns any other error, the user should be notified on what went wrong.

Validation & errors messages for entities

Technical research on waterfall

Delve deep into the waterfall.js plugin code and find out why we have to create a new instance before the waterfall display updates its content.

A side effect of creating multiple instances is the accumulation of wf-column elements in the DOM.

Proposed solution

• Find which piece of code adds all wf-box elements to the columns.
• Edit the plugin so it updates the content through the compose() method.
• Add cleanup code.

Research Facebook API

Make wireframes in illustrator

Allow the creation of admin by console

Example - Add User Command

Research Twitter API

Validations & errors & flashmessages

Validation

• URL's for the entities and handles should be unique

Errors

• Input search for an entity
• Input Edit a handle_name_
• Input Edit a handle_url_for the handle

Flashmessages

• Adding an entity
• Adding a handle for an entity
• Successfully logged in
• Delete an entity
• Delete a handle

Implement empty states

When there is no content to be displayed there should be a call to action.
You can find all visual designs at this link

• HTML & SASS
  • Empty waterfall: "Steps to add an entity"
  • Empty entities: "Add an entity"
  • Empty handles list: "Add a handle to the entity"

---

• Vue
  • Empty waterfall: "Steps to add an entity"
  • Empty entities: "Add an entity"
  • Empty handles list: "Add a handle to the entity"

Pure HTML without styling

Backend CRUD on Entity

CRUD on Entity

It's a new feature to allow CRUD on Entity. Entity is a group of handles

Model

Entities
Id (PK)
name (String) Not Null
url (String) Unique
image (String)

• Entity 1 -->1,n Handles
• 1 Entity has 1 or Many Handle
• 1 Entity Belongs To Many Users

Routes : /entities

HTTP METHODS for the CRUD

• C : POST
  • The body will contain all properties required for an entity
• R : GET
  • By default, return all entities
  • For a given name : /entities/osoc17 return the specified name
  • For multiple names : /entities/osoc17,datascouts return the specified name
• U : PUT /entities/{oldname}
  • The body will contain all modified properties.
• D : DELETE /entities/{name}

Services

We'll create a Controller class that provides the following functionality:

• post: create a new entity
  Parameters :
  Return: All properties but id of the entity stored in DB.
  Error :

• get: retrieve the selected related to a specific entity
  Parameters : entity.url, entity.url, entity.url
  Return: If parameter is null, return all entities otherwise those requested
  Error:

• put: modify a specific entity
  Parameters : entity.url Not null
  Return: All properties but id of the entity stored in DB.
  Error :

  • If the specified entity.url doesn't exist

• delete: delete a specific entity
  Parameters : entity.url Not null
  Return: All properties but id of the entity stored in DB.
  Error :

  • If the specified entity.url doesn't exist

Validations

• Name
• Check Internet connection
• Limitation on size and extension (.png, .jpg) -> Check for the mimetype and size

Example of an issue

Title

This could be "enhancement" or "feature" or "patch" ... Something that categorises the issue.
Then we go on by explaining in simple, even layman, terms on what this issue is, the need (the why) and the goal (what). Not necessarily the how, which is more of a technical part. If the how is described, use as little as difficult terms necessary.

An example of this is:

In order to fetch data from different social media sources, we need services that fetch data from those social media sources using their API endpoints. We need this because we need to fill the database with social media posts in a way that allows for easy and filtered retrieval through the API (insert link to API issue if applicable).

Implementation

Here the issue should become technical, something in the likes of this:

Services

We'll create a Service class that provides the following functionality:

• fetchData: fetch data for a certain social media handle

This function will check if a social media handle isn't already in the queue and hasn't been checked for the last 5 minutes. If that's not the case, it will push a job onto the queue that fetches data for the social media handle and return a state the informs the caller of the function that a job was pushed onto the queue, if not return a state that informs the caller of "why not".

Loading template while fetching data

There should be some visual indication to the user that the contents of the waterfall display are being loaded.

Implementation

• Design loading templates

• Add code to display the templates while content is being loaded

• Dynamically align the templates to the columns of the waterfall display

• Should be redesigned

Send Facebook data to frontend

Send Facebook data to frontend in expected structure

Implement CRUD on entity

Users should be able to add/edit/delete entities. A list of entities should be visible when they open the sidebar.

Implement CRUD for the entities to the frontend:

• Add entity (POST request)
• Delete entity (DELETE request)
• Edit entity (UPDATE request)
• Display appropriate entities in list when the sidebar is opened (GET request)

Implement validations & errors

Validation

• URL's for the entities and handles should be unique

Errors

• Input search for an entity
• Input Edit a handle name
• Input Edit a handle url for the handle (unique)

Flashmessages

• Adding an entity
• Adding a handle for an entity
• Successfully logged in
• Delete an entity
• Delete a handle

Empty states

On the first launch, what do you see?
When there is no content to be displayed there should be a call to action.

• Empty waterfall: "Steps to add an entity"
• Empty entities: "Add an entity"

Twitter API fetch

Research Facebook API

Twitter API integration

• We need to use Laravel 5.3

• We also need OAuth2, it's a MUST (Passport in Laravel) https://stackoverflow.com/questions/17143985/twitter-api-error-215#answer-17145712

• Maybe axios for the GET/POST requests or we'll use Vue.js for it

Setup nodejs

CORS Issues on

Error Message about it 💢

XMLHttpRequest cannot load https://osoc-2017-datascouts-backend-akad1070.c9users.io/api/v1/entities/. Response for preflight is invalid (redirect)

Implement loading template while fetching data

Create an user of type visitor

Properties

• ID (PK)
• Email
• Name
• Password
• Role [admin, visitor]

Create design for Facebook cards in waterfall

Detailed design of facebook card

test

• Task one
• Task two

CRUD on social media handles

Properties

• ID
• Name: String
• Last Fetch: Date

Actions

• Create: First

• Read: Fetch from social media,

• Edit: /

• Delete: (Soft) - delete_at

Validations

• Check for existing in this social media -> Empty response

Fetch data from Twitter API

Plug in waterfall.js

Create presentation

Start by 15:00 — gather your teammates information!

• Explain what the project is about (30secs)
• Explain what the team has done today
• Show demo / video / screenshots (prefer demo)
• Explain future steps

CRUD Providers

Properties

• ID (P.K) For Backend
• FullName
• Mail (unique)
• provider [twitter, facebook, youtube]
• token (Add by upload or fetch in social media)

Actions

• Create
• Edit
• Delete
• Read

Validations

Send Twitter data to frontend

Send Twitter data to frontend in expected structure

Translate wireframes into HTML and CSS