- 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.Planejamento
- 9. Considerações para solicitar seu feedback do projeto
- 10. 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.
Para implementar este projeto, você deve escolher um framework entre React e Angular. Ao escolher um framework ou biblioteca para nossa interface, baseamo-nos em uma série de convenções e implementações comprovadas e documentadas para resolver um problema comum a todas as interfaces da web: manter a interface sincronizada com o estado. Isso nos permite nos concentrar melhor (dedicar mais tempo) nas características específicas de nossa aplicação.
Quando escolhemos uma dessas tecnologias, não estamos apenas importando um pedaço de código para reutilizá-lo (o que por si só é um grande valor), mas também adotando uma arquitetura, uma série de princípios de design, um paradigma, abstrações, um vocabulário, uma comunidade, etc...
Como desenvolvedora Front-end, esses kits de desenvolvimento podem ser de grande ajuda para implementar rapidamente características nos projetos em que você trabalha.
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 CSS Grid Layout
-
Uso de media queries
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura e Semântica)
-
Testes unitários (unit tests)
-
Testes assíncronos
-
Uso de mocks e espiões
-
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)
-
GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)
-
Consulta ou solicitação (request) e resposta (response).
-
Cabeçalhos (headers)
-
Corpo (body)
-
Verbos HTTP
-
Códigos de status de HTTP
-
Encodings e JSON
-
CORS (Cross-Origin Resource Sharing)
-
Components & templates
-
Diretivas estruturais (ngIf / ngFor)
-
@Input | @Output
-
Criação e uso de serviços
-
Gerenciamento de rotas
-
Criação e uso de Observables
-
Uso de HttpClient
-
Estilos de componentes (ngStyle / ngClass)
-
JSX
-
Componentes e propriedades (props)
-
Manipulação de eventos
-
Listas e keys
-
Renderização condicional
-
Elevação de estado
-
Hooks
-
CSS modules
-
React Router
-
Instância de Vue.js
-
Dados e métodos
-
Uso e criação de componentes
-
Props
-
Diretivas (v-bind | v-model)
-
Iteração (v-for)
-
Eventos (v-on)
-
Dados Computados e Observadores
-
Routing
-
Classes e Estilos
-
Narrowing
-
Decoradores
-
Verificação estática de tipos
-
Rigor
-
Tipos primitivos
-
Arrays
-
Tipo
any
-
Funções
-
Tipos de união
-
Alias de tipos
-
Interfaces
-
Type assertions
-
Tipos literais
-
null e undefined
-
Enums
-
Propriedades opcionais
-
Visibilidade dos membros da classe (public, private, protected)
-
Membros estáticos da classe
-
this
-
Classes abstratas
-
Campos
-
Constructors
-
Métodos
-
Getters e Setters
-
implements Cláusulas
-
extends Cláusulas
-
Criar protótipos para obter feedback e iterar
-
Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
Este projeto deve ser resolvido individualmente.
O prazo estimado para concluir o projeto é de 3 a 4 Sprints.
Os testes unitários devem cobrir no mínimo 70% de statements, functions, lines e branches.
Para implementar este projeto, recomendamos usar o planejamento sugerido encontrado no repositório movie-challenge-planner, que fornece um CLI para fazer fork do presente repositório e criar um GitHub Project com o milestone e issues de cada história de usuário.
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.
Um dos principais objetivos deste projeto é aprender a usar uma biblioteca ou framework popular para desenvolver um aplicativo da web. Você deve escolher entre React ou Angular.
Lembre-se de que, se escolher o Angular, é obrigatório usar o TypeScript. O TypeScript é uma linguagem de programação fortemente tipada baseada em JavaScript.
Se você estiver usando Angular ou React, é obrigatório usar TypeScript. O TypeScript é uma linguagem de programação fortemente tipada baseada em JavaScript.
Se você usa Angular, recomendamos usar a versão 14. Para isso, é necessário ter instalada a versão 12 do NodeJS. Você pode encontrar um guia de instalação aqui ou consultar com seus coaches.
A aplicação deve usar npm-scripts e deve incluir scripts start, test,
build e deploy para iniciar, executar testes, empacotar e implantar a
aplicação, respectivamente.
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.
Ao iniciar um projeto, sempre há uma série de tarefas às quais devemos dedicar tempo.
-
É possível executar o projeto e visualizar a aplicação padrão em nosso navegador.
-
É possível executar o linter e os testes unitários.
-
Não é possível fazer um push direto para o branch principal.
-
Existe um Figma com os designs de alta fidelidade.
-
A aplicação está implantada corretamente e uma URL pública é fornecida.
Como usuário, quero visualizar o catálogo de filmes em linhas e colunas.
- Ao visitar a aplicação implantada, deve-se visualizar em uma tabela (linhas e colunas) o catálogo de filmes do The Movie Database API V3.
Como usuário, quero navegar pelo catálogo de filmes dividido em páginas.
- Ao visitar nossa aplicação implantada, deve-se visualizar o catálogo de filmes e navegar entre páginas.
Como usuário, quero poder filtrar os filmes por gênero e ordená-los por ano em ordem ascendente e descendente.
-
O usuário deve poder filtrar o catálogo por gênero.
-
O usuário deve poder remover o filtro para ver filmes não filtrados.
-
O usuário deve poder ordenar o catálogo de forma ascendente por ano.
-
O usuário deve poder ordenar o catálogo de forma descendente por ano.
-
O usuário deve poder remover a ordenação para ver os filmes não ordenados.
Como usuário, quero poder ver informações detalhadas sobre um filme, para poder tomar decisões informadas sobre assisti-lo ou não.
-
Os usuários podem navegar até a página de detalhes do filme a partir da lista de filmes ou de qualquer seção relevante.
-
Os detalhes do filme são exibidos de forma proeminente, fornecendo informações completas sobre o filme selecionado.
-
Os usuários podem voltar facilmente para a página anterior.
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).
Para implementar este projeto, recomendamos usar o planejamento sugerido encontrado no repositório movie-challenge-planner, que fornece um CLI que o ajudará a forkar o presente repositório e criar um GitHub Project com o milestone e issues de cada história de usuário.
O intervalo de tempo estimado para completar o projeto é de 3 a 4 Sprints. Sugerimos que você se organize da seguinte maneira:
- Sprint 1: completar a História técnica 1 e História de usuário 2
- Sprint 2: completar a História de usuário 3 e iniciar a História de usuário 4
- Sprint 3: completar a História de usuário 4
- Sprint 4: completar a História de usuário 5
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.
Junte-se ao canal do Slack #project-movie-challenge-fw para conversar e pedir ajuda sobre o 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.
A comunidade de desenvolvedores de cada framework se esforçou muito para criar documentações amigáveis para aqueles que estão começando com cada tecnologia. Portanto, dê a si mesma a oportunidade de explorar a documentação e experimentar seus exemplos e tutoriais.
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.
Pegue a primeira visualização do protótipo de alta fidelidade e a implemente. Sugerimos seguir os seguintes passos, independentemente do framework que você estiver usando:
- Passo 1: Separe a interface do usuário em uma hierarquia de componentes.
- Passo 2: Crie uma versão estática da interface do usuário sem adicionar nenhuma interatividade ainda.
- Passo 3: Encontre a representação mínima, mas completa, do estado da interface do usuário. Pense no estado como o conjunto mínimo de dados em constante mudança que a aplicação precisa lembrar.
- Passo 4: Depois de identificar os dados mínimos de estado de sua aplicação, identifique qual componente é responsável por alterar esse estado ou possui o estado.
- Passo 5: Identifique o fluxo de comunicação entre cada componente: de pai para filho ou de filho para pai. Implemente a estratégia identificada conforme sugerido pelo framework.