- 1. Preâmbulo
- 2. Resumo do Projeto
- 3. Objetivos de Aprendizagem
- 4. Considerações Gerais
- 5. Considerações Técnicas
- 6. Critérios mínimos de aceitação do projeto
- 7. Deploy
- 8. Considerações para solicitar seu feedback do projeto
- 9. Dicas, guias e leituras complementares
A forma como assistimos à filmes mudou radicalmente nos últimos anos devido, em parte, ao surgimento dos serviços de streaming que nos permitem fazê-lo de onde estivermos e a qualquer momento. O melhor reflexo desse fenômeno é o sucesso da Netflix, HBO, Disney+ e outros.
Acreditamos que há uma grande oportunidade de propor produtos/experiências inovadoras de todos os tipos usando dados de filmes (diretores, atores, sagas, sequências, datas, etc.). Podemos pensar em jogos, comunidades, catálogos, recomendações com base em preferências pessoais, etc. (apenas para citar algumas ideias óbvias).
Neste projeto, você criará uma página da web destinada a visualizar, filtrar e ordenar o catálogo de filmes da The Movie Database API V3. Esta página pode servir como um catálogo de filmes geral, mas também, se você quiser, pode considerar a possibilidade de projetá-la para um público específico com preferências como "filmes western" ou "filmes dos anos 80", por exemplo.
Ainda que a decisão do que fazer é inteiramente sua, há algumas considerações gerais que se apresentam a seguir. Pode atender esses requisitos em projetos muitos distintos, depende de sua criatividade e do entendimento dos seus potenciais usuários!
Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.
-
Uso de HTML semântico
-
Uso de seletores de CSS
-
Modelo de caixa (box model): borda, margem, preenchimento
-
Uso de flexbox em CSS
-
Uso de seletores de DOM
-
Manipulação de eventos de DOM (listeners, propagação, delegação)
-
Manipulação dinâmica de DOM
-
Variáveis (declaração, atribuição, escopo)
-
Uso de condicionais (if-else, switch, operador ternário, lógica booleana)
-
Uso de laços (while, for, for..of)
-
Funções (params, args, return)
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura e Semântica)
-
Diferença entre expressões (expressions) e declarações (statements)
-
Diferenciar entre tipos de dados primitivos e não primitivos
-
Arrays (arranjos)
-
Objetos (key, value)
-
Testes unitários (unit tests)
-
Módulos de ECMAScript (ES modules)
-
Git: Instalação e configuração
-
Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
-
Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
-
GitHub: Criação de contas e repositórios, configuração de chave SSH
-
GitHub: Implantação com GitHub Pages
- GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
- Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro
-
Criar protótipos para obter feedback e iterar
-
Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Planejar e executar testes de usabilidade
Este projeto deve ser resolvido individualmente.
O prazo estimado para concluir o projeto é de 4 Sprints.
Os testes unitários devem cobrir no mínimo 90% de statements, functions, lines e branches.
Além disso, você deve definir a estrutura de pastas e arquivos que considerar necessária. Portanto, os testes e a configuração necessária para executá-los serão de sua responsabilidade, mas você pode se basear nos projetos anteriores.
A aplicação deve ser uma Single Page App.
A aplicação não precisa ser responsiva.
Para poder usar a API da The Movie Database API V3, você deve criar uma conta e, em seguida, uma chave de acesso (key) e usá-la em cada solicitação que fizer ao servidor. Lembre-se de que você tem um limite máximo de 1.000 solicitações diárias à API por cada IP, portanto, aconselhamos a fazer um uso responsável desse recurso gratuito.
O boilerplate contém uma estrutura de arquivos como ponto de partida, assim como toda a configuração de dependências:
.
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── package.json
├── README.md
└── src
├── components
│ ├── App.js
│ └── App.spec.js
├── index.html
├── main.js
└── style.css
Como no projeto anterior, existe um arquivo index.html. Como já sabe, aqui
entra a página que vai ser exibida ao usuário. Também serve para indicar quais
scripts serão utilizados e juntar tudo o que foi feito.
Recomendamos usar src/main.js como ponto de entrada da sua aplicação. O
boilerplate inclui este arquivo para conectar ou montar o componente
App no DOM. Desta forma poderemos fazer testes unitários de nossos
componentes sen necessidade de que estejam conectados a um DOM global.
Aqui é onde recomendamos implementar a sua SPA.
Esta não é a única forma de dividir seu código. Pode usar mais arquivos e pastas, contanto que a estrutura esteja clara.
Este arquivo contém um componente de exemplo que mostra como podemos
representar um componente como uma função que retorna um HTMLElement. Na
hora de construir interfaces, é útil pensar nos termos de componentes ou
vistas que podemos ir aninhando umas dentro das outras. Te convidamos a
pensar quais componentes ou caixinhas são necessárias para construir sua aplicação
e que vá adicionando componentes no directorio components para implementar
cada um deles. Embora, novamente, no final, a forma de organizar seu arquivos depende
de você e da sua equipe. Há muitas formas de faze-lo, e o boilerplate
é apenas uma sugestão 🙊.
Este arquivo mostra como podemos criar arquivos com especificações (expressadas como testes unitários) de nossos componentes.
O Product Owner nos fornece uma primeira iteração do protótipo de baixa fidelidade da aplicação nesta imagem e nesta outra.
O Product Owner nos apresenta este backlog que é o resultado de seu trabalho com o cliente até o momento.
Eu, como usuária, quero visualizar um catálogo de filmes em uma tabela (linhas e colunas).
- Deve ser utilizado o endpoint /discover/movie.
- A aplicação deve incluir paginação para explorar o catálogo por páginas.
- Cada filme deve exibir pelo menos: pôster, título original e ano de lançamento.
- Os componentes desenvolvidos devem ter testes unitários.
Eu, como usuária, quero consultar os detalhes de um filme.
- Deve ser usado o endpoint /movie/{movie_id}.
- Para o filme, devem ser exibidos pelo menos: pôster, título original, ano de lançamento, gêneros, média de votação e total de votos.
- A interface deve permitir retornar à lista de filmes, mantendo o filtro e a ordenação.
- Os componentes desenvolvidos devem ter testes unitários.
Eu, como usuária, quero filtrar e ordenar o catálogo de filmes usando os critérios suportados pela TheMovie Database API V3.
- Para filtrar, deve ser usado o endpoint /discover/movie, e um ou mais de seus parâmetros, como, por exemplo, with_genres.
- Para ordenar, deve ser usado o endpoint /discover/movie, e um ou mais de seus parâmetros, como, por exemplo, sort_by.
- A paginação deve manter o filtro e a ordenação.
- Cada filme deve exibir pelo menos: pôster, título original e ano de lançamento.
- Os componentes desenvolvidos devem ter testes unitários.
Você pode escolher o provedor (ou provedores) que preferir, juntamente com o mecanismo de deploy e estratégia de hospedagem. Recomendamos explorar as seguintes opções:
- Vercel é uma plataforma que permite fazer deploy da nossa aplicação web estática (HTML, CSS e JavaScript) e também permite fazer deploy de aplicativos da web que são executados no servidor (Node.js).
- Netlify é semelhante ao Vercel, sendo uma plataforma que permite fazer deploy da nossa aplicação web estática (HTML, CSS e JavaScript) e também permite fazer deploy de aplicativos da web que são executados no servidor (Node.js).
Antes de agendar seu feedback do projeto com um coach, certifique-se de que seu projeto:
- Tenha protótipo de alta fidelidade no Figma
- Atende a todos os critérios mínimos de aceitação
- Está hospedado no GitHub
- Está com o deploy realizado
- Possui um README com a definição do produto
Lembre-se de fazer uma autoavaliação dos objetivos de aprendizagem e habilidades pessoais em seu painel de estudante.
Se você não concluiu todos os itens acima, não consideramos que você está pronto para sua sessão de feedback do projeto.
Com base no protótipo de baixa fidelidade fornecido, crie um protótipo de alta fidelidade no Figma. Defina uma paleta de cores e um design gráfico. Tente concluir isso em 1 ou 2 dias.
Explore a documentação da API do The Movie Database. Comece lendo a seção Getting Started, depois AUTHENTICATION --> Application e, finalmente, as referências dos endpoints /discover/movie e /movie/{movie_id}.
Em seguida, crie uma conta e gere uma chave (key) de acesso para consumir a API.
Finalmente, faça solicitações HTTP de teste à API usando ferramentas como Postman ou REST Client. Identifique os cabeçalhos, corpo, verbos, códigos de resposta e codificações das solicitações.
Pegue a primeira história de usuário e divida-a em tarefas menores. Identifique a ordem e a prioridade de cada tarefa. Documente seu planejamento no Trello ou Github Project.
Antes de começar a codificar, certifique-se de entender os conceitos de uma Aplicação de Página Única (SPA) e o roteamento de páginas. Isso permitirá criar uma experiência de usuário fluída e dinâmica. Pesquise as melhores práticas e ferramentas disponíveis para implementar uma SPA no seu projeto.
Recomendamos fazer uma SPA mais simples usando hashchange.
Esse video pode te ajudar a construir a sua SPA na main.js
Caso sobre tempo e você queira se aprofundar nas rotas e na construção de uma SPA mais robusta,
como Hacker Edition, você pode implementar esse roteador com Javascript puro