moniyama / SAP012-movie-challenge-fw

0 stars 0 forks source link

Movie Challenge con Framework

Índice


1. Preâmbulo

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).

Filmes

2. Resumo do projeto

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.

3. Objetivos de Aprendizagem

Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.

HTML

CSS

JavaScript

Testing em Javascript

Módulos

Controle de Versões (Git e GitHub)

Git

GitHub

HTTP

Angular

React

Vue

Typescript

Tipos básicos

Tipos Objecto (Tipos básicos)

Classes

Membros da classe (Classes)
Herança de classe (Classes)

Design de produto

4. Considerações Gerais

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.

5. Considerações Técnicas

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.

6. Critérios mínimos de aceitação do projeto

Protótipo de Baixa Fidelidade

O Product Owner nos fornece uma primeira iteração do protótipo de baixa fidelidade da aplicação nesta imagem e nesta outra.

Definição do Produto

O Product Owner nos apresenta este backlog que é o resultado de seu trabalho com o cliente até o momento.


[História do Usuário 1] Lista de Filmes

Eu, como usuária, quero visualizar um catálogo de filmes em uma tabela (linhas e colunas).

Critérios de aceitação
Definição de Pronto

[História do Usuário 2] Filtro e Ordenação

Eu, como usuária, quero filtrar e ordenar o catálogo de filmes usando os critérios suportados pela TheMovie Database API V3.

Critérios de Aceitação
Definição de Pronto

[História do Usuário 3] Detalhes de um Filme

Eu, como usuária, quero consultar os detalhes de um filme.

Critérios de Aceitação
Definição de Pronto

7. Deploy

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:

8. Considerações para solicitar seu feedback do projeto

Antes de agendar seu feedback do projeto com um coach, certifique-se de que seu projeto:

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.

9. Dicas, guias e leituras complementares

Junte-se ao canal do Slack #project-movie-challenge-fw para conversar e pedir ajuda sobre o projeto.

Protótipo de Alta Fidelidade

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 e consuma a API do The Movie Database

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.

Explore a documentação do framework escolhido

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.

Planeje a implementação da primeira história de usuário

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.

Implemente seu primeiro componente

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:

Frameworks / bibliotecas