Jardel Osorio Duarte Portfólio

Projeto Web Flow Filmes

O projeto consistiu em implementar uma platforma digital que ajudasse na tomada de decisões, na qual o usuário entrava e verifica os filmes das plataformas: Amazon Prime Video, Globo Play e Netflix, cada filme lançado garantia comentários e avaliações dos usuários, similar a uma rede social, que permitisse buscas relacionadas ao interesse de cada um, e assim, havendo uma colaboração entre os usuários que buscassem indicações no site Flow.

O Flow Filmes foi um dos projetos web que criei utilizando javascript em quase todo processo de desenvolvimento (82%), sendo: Nodejs no back-end e ejs no front-end.

Em razão de ter arquivos extensos, estarei trazendo apenas as etapas de construção que deram uma certa identidade ao projeto e algumas imagens dos templates finalizados. As etapas seriam: criação do banco de dados utilizando do ORM Sequelize servindo o Postgres e a criação de um layout com a opção de o usuário classificar/comentar os filmes que já assistiu.

Para criar a conexão utilizando o Sequelize, basta incluir o pacote em uma variável e gerar a conexão da seguinte maneira:

const Sequelize = require('sequelize');
const sequelize = new Sequelize('flow', 'gnomo', '123123', {
    host: '127.0.0.1',
    dialect: 'postgres'
})

module.exports = {
    Sequelize: Sequelize,
    sequelize: sequelize
};

sequelize.authenticate().then(function(){
    console.log("conectado com sucesso!")
}).catch(function(erro){
    catchonsole.log("Falha ao se conectar! " + erro)
})

o module.exports, permite a reutilização das variáveis para dar sequência na construção das tabelas e dos relacionamentos no banco de dados (inclusão em arquivos externos).

No meu arquivo principal (index.js), levantei o front utilizando o Express e importei todas as rotas e pastas que faziam parte do projeto, também setei a view engine ejs, como mostra o trecho abaixo.

const express = require('express')
const app = express()
const route = require('./routes/route')
const PORT = 5000
const path = require ('path');

app.use(route);
app.use(express.static('public'))
app.use('/css', express.static(__dirname + 'public/css'))
app.use('/img', express.static(__dirname + 'public/img'))
app.use('/uploads', express.static(__dirname + 'public/uploads'))
app.use('/js', express.static(__dirname + 'public/js'))

app.set('views', './views')
app.set('view engine', 'ejs')
app.listen(PORT, () => {
    console.log('rodando na port http://localhost:5000')
})

Para construção do serviço de avaliação do site, foi utilizado a framework average-rating para implementar um star rating, cálculando a média relativa e considerando valores de 0-5 estrelas para o total de votos, abaixo a função no back-end implementando os valores que chegam dos formulários.

const {	score, rate, average } = require('average-rating');
router.post('/commits/:id', checkAuthentication, (req, res) => {
	var idfilm = req.params.id;
	let aux = 1;
	var erros_commit = [];
	if(req.body.rate1) aux = req.body.rate1
	else if(req.body.rate2) aux = req.body.rate2
	else if(req.body.rate3) aux = req.body.rate3
	else if(req.body.rate4) aux = req.body.rate4
	else if(req.body.rate5) aux = req.body.rate5
	else aux = 0

E também a função que atualiza os valores agora para mostrar aos demais usuários:

router.get('/filefilter/:id',checkAuthentication, (req, res) => {
	var idteste = req.params.id
	var user = req.user
	let len = 0;
	let a = 0;
	let b = 0;
	let c = 0;
	let d = 0;
	let e = 0;
	Avaliacao.findAll({where: {'idFilm': idteste}}).then((result) => {
		for (let index = 0; index < result.length; index++) {
			if(result[index].nota === 1) a++;
			else if(result[index].nota === 2) b++;
			else if(result[index].nota === 3) c++;
			else if(result[index].nota === 4) d++;
			else if(result[index].nota === 5) e++;
			len++;
		}
		const rating = [a, b, c, d, e];
		var total = average(rating); // --> 4.4

Também foi incluído o formulário em ejs para gerar uma interface amigável ao usuário final, em razão do html gerar conflito com o markdown do jekyll (ferramenta que estou utilizando para escrever o portfólio), estarei apenas trazendo imagens que incluem o layout final da caixa de avaliação.

Bueno, alguns templates finais ficaram assim..

Enfim, embora ter sido um projeto simples em Nodejs, este foi um dos mais agradáveis de estar desenvolvendo.

Outros arquivos deste site estão no meu repositório, acesse no link: flow filmes