- 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.
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
-
Testes unitários (unit tests)
-
Testes assíncronos
-
Uso de mocks e espiões
-
Módulos de ECMAScript (ES modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura e Semântica)
-
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
-
Verificação estática de tipos
-
Rigor
-
Tipos primitivos
-
Arrays
-
Tipo
any
-
Funções
-
Propriedades opcionais
-
Tipos de união
-
Alias de tipos
-
Interfaces
-
Type assertions
-
Tipos literais
-
null e undefined
-
Enums
-
Narrowing
-
Campos
-
Constructors
-
Métodos
-
Getters e Setters
-
implements Cláusulas
-
extends Cláusulas
-
public
-
protected
-
private
-
Membros estáticos da classe
-
this
-
Classes abstratas
-
Decoradores
-
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 2 a 3 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. Você pode seguir as convenções do framework escolhido. Portanto, os testes e a configuração necessária para executá-los serão de sua responsabilidade.
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 escolher o React, a decisão de usar o TypeScript é opcional (mas recomendada!). Aqui você pode encontrar mais informações sobre como iniciar seu projeto com TypeScript e React.
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.
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 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.
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.
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.
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.