Descrição:

Criar uma função chamada formatGenresToOptions no arquivo src/utils/transformers.ts para transformar um array de modelos de dados de gênero da API em um array de objetos como [{value: string, label: string}].

Critérios de aceitação:

• Assinatura da função:

  • Criar uma função chamada formatGenresToOptions em src/utils/transformers.ts.

• Parâmetros:

  • A função deve aceitar um array de modelos de dados de gênero da API como entrada.

• Tipo de retorno:

  • A função deve retornar um array de objetos como [{value: string, label: string}]. Cada objeto resultante tem uma propriedade value correspondente ao id do gênero convertido em string e uma propriedade label correspondente ao name do gênero.

  • Manipular qualquer conversão ou transformação de dados necessária para garantir a coerência.

  Por exemplo, dado o seguinte array de modelos de dados de gênero da API:

    ```js
    [
        { id: 28, name: 'Ação' },
        { id: 35, name: 'Comédia' },
        { id: 18, name: 'Drama' },
    ]
    ```
  

  A função deveria retornar um array:

    ```js
    [
        { value: '28', label: 'Ação' },
        { value: '35', label: 'Comédia' },
        { value: '18', label: 'Drama' },
    ]
    ```
  

• Tratamento de entradas vazias:

  • Garantir que a função lide corretamente com o caso em que o array de entrada está vazio, retornando um array vazio.

Definição de Pronto:

• A função formatGenresToOptions é criada em src/utils/transformers.ts

• A função aceita como entrada um array de modelos de dados de gênero da API.

• A função retorna um array de objetos como [{value: string, label: string}].

• A função trata o caso em que o array de entrada está vazio, retornando um array vazio.

Descrição:

Criar um componente Angular chamado app-movie-detail para exibir informações detalhadas sobre um único filme. Exiba este componente na rota /movie/:id e implemente funções para mostrar um carregador enquanto obtém dados da API e exibir uma notificação em caso de erro. Extraia a identificação do filme da URL e use-a no serviço getMovieDetail. Forneça uma maneira para que o usuário retorne à página anterior a partir do componente app-movie-detail.

Critérios de aceitação:

• Criação de componentes:

  • Criar um componente Angular app-movie-detail dentro da pasta src/layout.

• Informações na tela:

  • Exibir informações relevantes sobre o filme, incluindo, entre outros: pôster, título original, sinopse, classificação e ano de lançamento.

• Integração de serviços:

  • Utilizar o serviço getMovieDetail para obter informações detalhadas sobre o filme com base em sua identificação.

  • Extrair a identificação do filme da URL (parâmetro de rota).

• Tela de carregamento:

  • Exibir um indicador de carregamento (por exemplo, um spinner) enquanto os dados da API estão sendo obtidos.

• Tratamento de erros:

  • Implementar tratamento de erros para exibir uma notificação em caso de erro durante a obtenção de dados.

• Navegação de volta:

  • Fornecer uma forma clara e intuitiva para que o usuário retorne à página anterior.

• Configuração de rota:

  • Configurar a rota para o componente app-movie-detail para ser /movie/:id, onde :id é o id do filme.

• Testes unitários:

  • Escrever testes unitários para o componente app-movie-detail para garantir a integração correta com MovieDetailCard, a obtenção adequada de dados e o tratamento de erros.

Definição de Pronto:

• O componente app-movie-detail foi criado dentro da pasta src/layout.

• O serviço getMovieDetail foi utilizado para obter informações detalhadas sobre o filme com base em sua identificação.

• A identificação do filme é extraída da URL (parâmetro de rota) e utilizada na chamada do serviço.

• Um indicador de carregamento é exibido enquanto os dados da API estão sendo obtidos.

• O tratamento de erros foi implementado para exibir uma notificação em caso de erro durante a obtenção de dados.

• A rota para o componente app-movie-detail está configurada como /movie/:id.

• Os testes unitários para o componente app-movie-detail passam com sucesso e cobrem vários cenários.

Descrição

Crie um arquivo transformers.ts na pasta src/utils. Crie uma função chamada formatMovie dentro desse arquivo. Esta função será responsável pela transformação dos dados do filme da API para o modelo de negócios Movie.

Ao criar um arquivo dedicado para os transformadores e a função formatMovie, esta tarefa assegura uma abordagem modular e organizada para a transformação de dados dentro do projeto.

Critérios de Aceitação:

• Função formatMovie:

  • Criar um arquivo chamado transformers.ts dentro da pasta utils.

  • Implementar uma função chamada formatMovie dentro do arquivo transformers.ts.

  • A função deve receber um objeto de dados de filme da API como parâmetro e retornar um objeto do modelo de negócios Movie.

  • Atribuir as propriedades relevantes dos dados da API às propriedades correspondentes no modelo de negócios Movie.

  • Lidar com qualquer conversão ou transformação de dados necessária para garantir a coerência.

• Testes unitários:

  • Escrever testes unitários para a função formatMovie no arquivo transformers.spec.ts na pasta src/utils.

  • Testar a função com vários tipos de dados de filme da API para garantir uma transformação correta.

  • Incluir testes para casos extremos e potenciais erros.

Definição de Pronto:

• O arquivo transformers.ts está criado dentro da pasta utils.

• A função formatMovie está implementada e transforma com sucesso os dados do filme da API para o modelo de negócios Movie.

• Os testes unitários da função formatMovie foram bem-sucedidos, cobrindo vários cenários.

Descrição:

Criar um componente Angular chamado app-movie-list para exibir o catálogo de filmes em formato de grade (Grid Layout). O componente deve receber um array de modelos de negócios Movie como Input e mostrar cada filme usando o componente app-movie-card.

Critérios de Aceitação:

• Criação do componente:

  • Criar um componente chamado app-movie-list dentro da pasta src/layout.

• Inputs:

  • Definir um Input chamado movies do tipo Movie[] que represente um array de modelos de negócios Movie.

• Renderização de Cartões de Filme:

  • Utilizar o componente app-movie-card para renderizar cada filme do Input movies.

• Testes unitários:

  • Escrever testes unitários para o componente app-movie-list para garantir que seja renderizado corretamente com várias listas de filmes.

  • Incluir testes para diferentes cenários, como listas de filmes vazias ou diferentes tipos de informações de filmes.

Definição de Pronto:

• O componente app-movie-list foi criado dentro da pasta src/layout.

• O componente recebe um Input chamado movies do tipo Movie[].

• O componente renderiza cada filme utilizando o componente app-movie-card.

• Os testes unitários do componente app-movie-list são bem-sucedidos, cobrindo vários cenários.

Descrição

Escrever testes de integração para garantir que o componente app-home exiba os dados corretamente usando respostas simuladas da API. Os testes devem abranger cenários como a visualização correta de filmes com base em dados simulados e o tratamento apropriado de erros da API.

Critérios de Aceitação

• Respostas simuladas da API:

  • Simular as respostas da API para o método getMovies do serviço APIService utilizado no componente app-home.

• Visualização correta dos dados:

  • Escrever um teste para garantir que o componente app-home exibe corretamente os filmes com base em dados simulados.

  • Utilizar dados simulados que representem vários cenários, como diferentes filmes com diversas propriedades.

• Visualização do indicador de carregamento:

  • Verificar se um indicador de carregamento (por exemplo, um spinner) é exibido enquanto os dados são obtidos.

• Tratamento de erros:

  • Escrever um teste para simular um erro da API durante a obtenção de dados.

  • Garantir que o componente app-home lida adequadamente com o erro, mostrando uma mensagem de erro ou uma notificação.

• Limpeza e isolamento:

  • Garantir que cada caso de teste tenha limpeza e isolamento adequados para evitar interferências entre os testes.

  • Utilizar utilidades de teste para restaurar o estado entre os testes.

Definição de Pronto

• Os testes de integração para o componente app-home foram desenvolvidos usando uma biblioteca de testes.

• Foram utilizadas respostas simuladas da API para simular vários cenários, incluindo a visualização correta de dados e erros da API.

• Os testes foram bem-sucedidos, validando que o componente app-home exibe os dados corretamente e trata os erros da API de maneira adequada.

• Existem mecanismos de limpeza e isolamento para manter a confiabilidade dos testes.

Descrição:

Modificar o componente app-movie-card para que, quando um usuário clicar em um filme, o aplicativo o redirecione para a URL /movie/:id para mostrar informações detalhadas sobre o filme selecionado. Utilize a diretiva routerLink para fazer isso.

Critérios de aceitação:

• Configuração de navegação:

  • Utilizar a diretiva routerLink no componente app-movie-card para habilitar a navegação para a URL /movie/:id.

• Testes unitários:

  • Escrever testes unitários para o componente app-movie-card para garantir que ao clicar em um filme a navegação correta seja ativada e o componente MovieDetail seja exibido.

Definição de Pronto:

• A diretiva routerLink é utilizada no componente app-movie-card para habilitar a navegação para a URL /movie/:id.

• Os testes unitários para o componente app-movie-card passam com sucesso e cobrem diversos cenários.

Descrição

Criar um componente Angular chamado app-home para integrar o componente app-movie-list com o método getMovies do serviço APIService. Exibir esse componente na rota "/". Mostrar um indicador de carregamento enquanto os dados da API estão sendo obtidos e uma notificação em caso de erro.

Critérios de Aceitação:

• Criação do componente:

  • Criar um componente app-home dentro da pasta src/layout.

• Integração com app-movie-list:

  • Integre o componente app-movie-list dentro do componente app-home.

  • Utilize o método getMovies do serviço APIService para obter os dados dos filmes a serem exibidos.

• Visualização do indicador de carregamento:

  • Exibir um indicador de carregamento (por exemplo, um spinner ou uma mensagem de carregamento) enquanto os dados da API estão sendo obtidos.

  • Garantir que o indicador de carregamento seja mostrado ao usuário durante o processo de obtenção de dados.

• Notificação de erros:

  • Implementar um mecanismo para mostrar uma notificação em caso de erro durante a obtenção de dados da API.

  • A notificação deve transmitir uma mensagem de erro clara ao usuário.

• Roteamento:

  • Garantir que o componente app-home seja exibido quando o usuário navega para a rota "/".

Definição de Pronto:

• O componente app-home foi criado dentro da pasta src/layout.

• O componente app-movie-list foi integrado corretamente dentro do componente app-home.

• Um indicador de carregamento é mostrado ao usuário enquanto os dados da API estão sendo obtidos.

• Uma notificação é mostrada em caso de erro ao obter dados da API.

• O componente app-home é exibido quando o usuário navega para a rota "/".

Descrição:

Criar a estrutura inicial do projeto para a SPA, organizando arquivos e pastas para garantir uma base de código limpa e manutenível.

Critérios de aceitação:

Dentro de src, criar as seguintes pastas:

• app/layout: componentes que definem a estrutura geral das páginas ou seções da sua aplicação. Os layouts são componentes que podem conter outros componentes para organizar a aparência de uma página.

• app/mocks: mocks que fornecem dados de teste para simular o comportamento de uma API ou serviço durante o desenvolvimento e os testes.

• app/shared/services: serviços compartilhados que podem ser usados em diferentes partes da aplicação. Esses serviços podem incluir lógica de negócios comuns, manipulação de dados, interação com a API, etc.

• models: contêm as definições de modelos de dados usados na aplicação. Os modelos são classes ou interfaces que representam a estrutura dos dados usados na aplicação.

• utils: utilitários ou funções de utilidade compartilhadas em diferentes partes do projeto. Eles podem incluir funções genéricas, ajudantes ou qualquer código reutilizável.

Definição de Pronto:

• A estrutura do projeto adere à hierarquia de pastas especificada.

Descrição

Modificar a função formatMovie para aprimorar o modelo de negócio Movie definindo-se uma chave genres adicional. Esta chave deve ser um array de strings que contenham os nomes dos gêneros de filmes com base na chave genre_ids. A função formatMovie deve receber, como parâmetro, o Map do JavaScript gerado pela função formatGenresToMap e usá-lo para transformar a chave genre_ids em um array de strings.

Modificar o método getMovies para receber como parâmetro o Map do JavaScript gerado pela função formatGenresToMap e usá-lo na chamada de formatMovie.

Critérios de aceitação

• Modificar o modelo de negócio Movie definindo-se uma chave adicional chamada genres. A chave genres deve ser um array de strings.

• Função formatMovie

  • Modificar a função formatMovie existente para aceitar um parâmetro adicional, um Map do JavaScript gerado por formatGenresToMap.

  • A função formatMovie deve usar o novo parâmetro para substituir o ID do gênero na chave genre_ids pelo seu nome de gênero correspondente.

  • A função formatMovie deve adicionar uma nova chave genres ao resultado para conter um array de nomes de gêneros.

  Por exemplo, se a função formatMovie for chamada da seguinte maneira:

      formatMovie(
          {
              id: 123,
              title: 'Filme Exemplo',
              genre_ids: [28, 35],
              // outros dados do filme...
          },
          new Map([
              [28, 'Ação'],
              [35, 'Comédia'],
              // outros dados de gênero...
          ])
      );

  Deveria retornar o seguinte resultado:

      {
          id: 123,
          title: 'Filme Exemplo',
          genres: ['Ação', 'Comédia'],
          // outros dados aprimorados do filme...
      }

  Observe que na saída foi adicionada uma chave genres com os nomes dos gêneros correspondentes aos IDs em genre_ids.

• Método getMovies

  • Modificar o método getMovies existente para aceitar um parâmetro adicional, um Map do JavaScript gerado por formatGenresToMap.

  • Usar o novo parâmetro ao chamar a função formatMovie.

• Testes unitários:

  • Modificar os testes unitários existentes para a função formatMovie em transformers.spec.ts.

  • Modificar os testes unitários existentes para a função getMovies em api.service.spec.ts.

  • Testar a função com vários tipos de dados de filmes da API para garantir uma transformação correta.

  • Incluir testes para casos extremos e possíveis erros.

Definição de Pronto:

• A função formatMovie é modificada para aceitar um parâmetro adicional, um Map do JavaScript gerado por formatGenresToMap.

• O modelo de negócio de filmes é aprimorado ao adicionar uma chave adicional chamada genres.

• A chave genres é um array de strings que contêm os nomes dos gêneros de filmes de acordo com a chave genre_ids.

• A função formatMovie modificada gera com sucesso o modelo de negócio de Movie.

• Os testes unitários para a função formatMovie passam com sucesso e cobrem vários cenários.

• O método getMovies é modificado para aceitar um parâmetro adicional, um Map do JavaScript gerado por formatGenresToMap.

• A função formatGenresToMap é chamada em getMovies com o novo parâmetro.

• Os testes unitários para o método getMovies passam com sucesso e cobrem vários cenários.

Descrição:

Modificar o componente Angular existente app-movie-card para incluir a visualização de gêneros de filmes.

Critérios de aceitação:

• Modificação de componentes:

  • Modificar o componente app-movie-card existente para incorporar a visualização de gêneros de filmes.

• Melhoria da interface do usuário:

  • Integrar a chave de gêneros do modelo de negócio de filmes na interface do usuário do componente.

  • Mostrar os gêneros dos filmes juntamente com outros detalhes do filme (por exemplo, título, pôster, ano de lançamento).

• Design responsivo:

  • Certificar-se de que a modificação da interface do usuário para mostrar gêneros de filmes seja responsiva e visualmente atraente em vários tamanhos de tela.

• Testes:

  • Escrever testes unitários para o componente app-movie-card modificado para garantir que ele exiba com precisão os gêneros de filmes.

  • Incluir casos de teste para diferentes cenários, como filmes com múltiplos gêneros ou sem gêneros.

Definição de Pronto:

• O componente app-movie-card foi modificado para incluir a visualização de gêneros de filmes.

• Os gêneros de filmes estão integrados na interface do usuário do componente juntamente com outros detalhes do filme.

• Os testes unitários para o componente app-movie-card modificado passam com sucesso, cobrindo diferentes cenários relacionados à exibição de gêneros de filmes.

Descrição:

Melhorar o componente app-home para integrar duas instâncias do componente app-list-options. Uma instância mostrará uma lista de gêneros de filmes usando o método getMovieGenres e a função formatGenresToOptions. A outra instância mostrará uma lista estática das opções de ordenação do endpoint /discover/movie.

Cada vez que o usuário selecionar uma opção da lista de gêneros, o valor do parâmetro de consulta generId da URL deve ser atualizado com o value da opção selecionada.

Cada vez que o usuário selecionar uma opção da lista de ordenação, o valor do parâmetro de consulta sortBy da URL deve ser atualizado com o value da opção selecionada.

Cada vez que os parâmetros de consulta generId e sortBy mudarem, chame o método getMovies apropriadamente para filtrar e ordenar a lista de filmes.

Critérios de aceitação:

• Integração com app-list-options:

  • Integrar duas instâncias do componente app-list-options dentro do componente app-home.

  • Uma instância deve mostrar uma lista de gêneros de filmes usando a função getMovieGenres, do serviço de API e a função formatGenresToOptions.

  • A outra instância deve mostrar uma lista estática das opções de ordenação do endpoint /discover/movie.

• Atualização de parâmetros de consulta:

  • Quando o usuário selecionar uma opção da lista de gêneros, atualizar o valor do parâmetro de consulta generId da URL com o value da opção selecionada.

  • Quando o usuário selecionar uma opção da lista de ordenação, atualizar o valor do parâmetro de consulta sortBy da URL com o value da opção selecionada.

• Chamadas de serviço:

  • Executar o método getMovies apropriadamente sempre que os parâmetros de consulta generId e sortBy mudarem, usando a inscrição no Observable queryParams do serviço ActivatedRoute.

• Testes unitários:

  • Escrever testes unitários para o componente app-home atualizado, cobrindo cenários como seleção de gêneros, seleção de ordenação e validação de chamadas de serviço.

Definição de Pronto:

• Duas instâncias do componente app-list-options estão integradas dentro do componente app-home.

• A seleção de uma opção da lista de gêneros altera o parâmetro de consulta genreId da URL e aciona chamadas para o serviço getMovies para incluir a opção de filtragem selecionada.

• A seleção de uma opção da lista de ordenação altera o parâmetro de consulta sortBy da URL e aciona chamadas para o serviço getMovies para incluir a opção de ordenação selecionada.

• Os testes unitários para o componente app-home atualizado são aprovados com sucesso e cobrem vários cenários.

Descrição:

Criar um componente Angular chamado app-movie-card para exibir informações sobre um filme. O componente deve receber um modelo de negócios Movie como uma Input e mostrar informações relevantes, como o pôster do filme, o título original e o ano de lançamento.

Critérios de Aceitação:

• Criação do componente:

  • Criar um componente Angular app-movie-card dentro da pasta src/layout.

• Inputs:

  • Definir uma propriedade de entrada chamada movie do tipo Movie que represente o modelo de negócios de um filme.

• Exibir informações:

  • Utilizar as informações da propriedade de entrada movie para mostrar o pôster do filme, o título original e o ano de lançamento.

  • Implementar HTML e/ou CSS apropriado para estilizar o cartão do filme.

• Testes unitários:

  • Escrever testes unitários para o componente app-movie-card para garantir que ele seja exibido corretamente com vários dados de filme.

  • Incluir testes para diferentes cenários, como a ausência de dados ou diferentes tipos de informações do filme.

Definição de Pronto:

• O componente app-movie-card foi criado dentro da pasta src/layout.

• O componente recebe uma propriedade de entrada chamada movie do tipo Movie.

• O componente exibe o pôster do filme, o título original e o ano de lançamento utilizando as informações da propriedade de entrada do filme.

• Os testes unitários do componente app-movie-card são bem-sucedidos, cobrindo vários cenários.

Descrição

Criar um novo repositório GitHub. Implementar a proteção da branch main para garantir a integridade do código e evitar alterações acidentais. Pelo menos, definir uma regra para que a branch main exija um pull request antes de mesclar as alterações.

Critérios de aceitação:

• Criar um novo repositório GitHub com um nome apropriado para a SPA.

• Definir regras de proteção, como exigir revisões de pull request antes do merge (mescla) e aplicar verificações de status.

Definição de Pronto:

• O repositório GitHub foi criado com um nome apropriado para a SPA.

• A proteção da branch está configurada para a branch main com regras como exigir revisões de pull request e verificações de status.

Descrição:

Desenvolver um serviço APIService, no diretório src/shared/services, com o método getMovies para obter dados de filmes do endpoint /discover/movie do The Movie DB. A função não deve receber nenhum parâmetro e deve retornar um Observable que emita um array de objetos do tipo Movie. Além disso, utilize a função formatMovie para transformar os dados de filmes da API para o modelo de negócios Movie.

Critérios de Aceitação:

• Assinatura do método:

  • Criar um método chamado getMovies dentro de um serviço APIService no diretório src/shared/services.

• Parâmetros:

  • Garantir que o método getMovies não recebe parâmetros.

• Tipo de retorno

  • O método deve retornar um Observable que emite um array de objetos de filme do modelo de negócios (Observable<Movie[]>).

• Requisição da API:

  • Utilizar o cliente HTTP do Angular para realizar uma requisição GET para /discover/movie do The Movie DB.

  • Incluir o token da API nos cabeçalhos da requisição, recuperado do carregador de configuração de ambiente.

• Transformação de dados:

  • Aplicar a função formatMovie para transformar os dados de filmes da API para o modelo de negócios dentro do método getMovies.

• Testes unitários:

  • Escrever testes unitários para o método getMovies do serviço APIService, incluindo casos de teste para uma requisição de API bem-sucedida, tratamento de erros e transformação correta de dados.

Definição de Pronto:

• O método getMovies está implementado no arquivo de serviço apropriado.

• O método não recebe parâmetros e retorna um Observable que retorna um array de objetos Movie do modelo de negócios (Observable<Movie[]>).

• A função realiza corretamente uma requisição GET para /discover/movie do The Movie DB com o token da API.

• As respostas da API são tratadas corretamente, incluindo casos de erro.

• A função formatMovie é utilizada para transformar os dados de filmes da API para o modelo de negócios Movie.

• Os testes unitários do método getMovies foram bem-sucedidos, cobrindo vários cenários.

Descrição:

Melhorar o método getMovies para suportar a filtragem por gênero e a ordenação por diferentes critérios ao receber um objeto como parâmetro. A nova estrutura do parâmetro deve ser { filters: { page: number, genreId: number | null, sortBy: string | null } }.

Critérios de aceitação:

• Estrutura de parâmetros:

  • Modificar o parâmetro do método getMovies para que, além da propriedade page, tenha as seguintes propriedades:

    • genreId: uma propriedade do tipo number ou null que representa o ID do gênero pelo qual deseja-se filtrar os filmes. Se for null, nenhum filtro de gênero é aplicado.

    • sortBy: uma propriedade do tipo string ou null que representa o critério de ordenação. Se for null, nenhuma ordenação é aplicada.

• Modificação da solicitação da API:

  • Ajustar a solicitação da API dentro do método getMovies para incluir filtragem e ordenação conforme os parâmetros fornecidos.

• Valores padrão:

  • Implementar valores padrão para genreId e sortBy caso não sejam fornecidos. Por exemplo, definir valores padrão como null para ambos.

• Testes unitários:

  • Escrever testes unitários para o método getMovies para garantir que lida corretamente com cenários de filtragem e ordenação.

  • Incluir casos de teste para fornecer diferentes números de página, filtros de gênero e ordenação.

Definição de Pronto:

• O método getMovies foi aprimorado para aceitar um parâmetro de objeto com a estrutura { filters: { page: number, genreId: number | null, sortBy: string | null } }.

• A solicitação da API dentro da função foi ajustada para incluir filtragem e ordenação conforme os parâmetros fornecidos.

• Valores padrão foram implementados para genreId e sortBy.

• Os testes unitários para o método getMovies modificado passam com sucesso e cobrem vários cenários de filtragem e ordenação.

Descrição:

Implante a aplicação Angular em um serviço de nuvem como Vercel ou Netlify para torná-la acessível online. Configure a implantação contínua para automaticamente implantar as alterações sempre que um novo código é enviado para a branch main do repositório conectado.

Critérios de Pronto:

• Escolha um serviço de nuvem para implantar a aplicação Angular. Conecte o repositório GitHub do projeto ao serviço de nuvem.

Definição de Concluído:

• A aplicação foi implantada com sucesso e foi fornecida uma URL de implantação.

• A implantação contínua está configurada para automatizar o processo de implantação quando um novo código é enviado para a branch main.

Descrição:

Crie um componente Angular chamado app-list-options que permita ao usuário selecionar um elemento de uma lista de opções e limpar a seleção.

Critérios de aceitação:

• Criação do componente:

  • Criar o componente Angular app-list-options dentro da pasta src/layout.

• Inputs:

  • Definir um Input chamado options para armazenar as opções a serem listadas. O tipo deste input será um array de objetos como [{value: string, label: string}].

  • Definir um Input chamado selectedOption para armazenar a opção selecionada. O tipo deste input será um objeto como {value: string, label: string}. Pode ser null se nenhuma opção for selecionada.

• Outputs:

  • Definir um Output chamado onChange do tipo EventEmitter<{value: string, label: string}> para emitir um evento quando o usuário selecionar uma opção.

  • Definir um Output chamado onClear do tipo EventEmitter para emitir um evento quando o usuário limpar a seleção.

• UI de seleção expansiva:

  • Exibir um para listar as opções fornecidas. [ ] Destacar a opção escolhida no .

• Seleção de opção:

  • Emitir o evento onChange quando o usuário selecionar uma opção no . [ ] Limpar seleção: [ ] Incluir um botão ou ícone para limpar a seleção atual. [ ] Emitir o evento onClear quando o usuário clicar para limpar a seleção. [ ] Teste unitário: [ ] Escrever testes unitários para o componente app-list-options, que cubram cenários como selecionar uma opção, limpar a seleção e validar alterações na interface do usuário. Definição de Pronto: [ ] A interface de seleção expansível é exibida ao usuário com o destaque correto para a opção selecionada. [ ] Foram implementadas a capacidade de selecionar uma opção e limpar a seleção. [ ] Os testes unitários para o componente app-list-options passam com sucesso e cobrem vários cenários.

Descrição:

Desenvolver um método getMovieDetail no serviço APIService para recuperar informações de um único filme por identificação a partir do endpoint /movie/{movie_id} do The Movie DB. O método deve receber um parâmetro id e retornar um Observable que retorna um modelo de negócio Movie. Deve-se utilizar a função formatMovie para transformar a API no modelo de negócio Movie.

Critérios de aceitação:

• Assinatura da função:

  • Criar um método chamado getMovieDetail dentro do serviço APIService.

• Parâmetro:

  • O método deve receber um parâmetro chamado id que represente a identificação do filme a ser buscado.

• Tipo de retorno:

  • A função deve retornar um Observable que retorne um modelo de negócio Movie.

• Requisição da API:

  • Utilizar o cliente HTTP do Angular para realizar uma solicitação GET para /movie/{movie_id} do The Movie DB.

  • Incluir o token API nos cabeçalhos da solicitação, obtido do arquivo de configuração do ambiente.

• Transformação de dados:

  • Utilizar a função formatMovie para transformar os dados do filme da API no modelo de negócio Movie.

• Teste unitário:

  • Escrever testes unitários para o método getMovieDetail para garantir a solicitação da API, o tratamento de parâmetros e a transformação de dados corretos.

Definição de Pronto:

• O método getMovieDetail está implementado no arquivo de serviço apropriado.

• O método recebe um parâmetro chamado id que representa a identificação do filme e retorna um Observable que devolve um modelo de negócio Movie.

• O método realiza com sucesso uma solicitação GET para o endpoint /movie/{movie_id} do The Movie DB com o token API.

• As respostas da API são tratadas adequadamente, incluindo cenários de erro.

• A função formatMovie é utilizada para transformar os dados do filme da API no modelo de negócio Movie.

• Os testes unitários para a função getMovieDetail foram aprovados com sucesso e cobrem diversos cenários.

Descrição:

Criar um protótipo de alta fidelidade baseado no protótipo de baixa fidelidade especificado no README.

Critérios de aceitação:

- [ ] Criar wireframes detalhados e designs de interface do usuário para cada tela da SPA, levando em consideração as interações do usuário e a estética visual.

- [ ] Projetar e ilustrar o fluxo de navegação entre as diferentes telas ou componentes dentro da SPA.

- [ ] Utilizar o Figma para criar os wireframes.

Definição de Pronto:

• Wireframes detalhados e designs de UI foram criados para cada tela da SPA usando o Figma.

• O fluxo de navegação entre telas ou componentes foi claramente ilustrado.

• Interatividade foi adicionada aos wireframes, demonstrando o comportamento dos componentes e as interações do usuário.

• Foi incluído um link do Figma no README.

• Levar no máximo 2 ou 3 dias para concluir esta tarefa.

Descrição:

Implementar um método chamado getMovieGenres no serviço APIService para obter uma lista de gêneros de filmes a partir do endpoint /genre/movie/list. O método getMovieGenres não deve receber nenhum parâmetro e deve retornar um Observable que retorne um array de objetos como [{id: number, name: string}].

Critérios de aceitação:

• Implementar um método chamado getMovieGenres dentro do serviço APIService.

• O método não deve receber nenhum parâmetro.

• O método deve fazer uma solicitação API para recuperar os gêneros de filmes do endpoint /genre/movie/list.

• O método deve retornar um Observable que retorne um array de objetos como [{id: number, name: string}].

• Escrever testes unitários para o método getMovieGenres, incluindo casos de teste para uma solicitação API bem-sucedida e tratamento de erros.

Definição de Pronto:

• O método getMovieGenres está implementado e reside dentro do arquivo de serviço apropriado.

• O método realiza uma solicitação API para recuperar dados do endpoint /genre/movie/list.

• As respostas da API são tratadas adequadamente, incluindo cenários de erro.

Descrição:

Crie um componente Angular chamado app-pagination para exibir um controle de paginação. O componente deve receber o número da página atual e o número total de páginas como Input. O componente deve emitir um evento quando um usuário seleciona uma nova página.

Critérios de aceitação:

• Criação do componente:

  • Criar um componente Angular app-pagination dentro da pasta src/layout.

• Inputs:

  • Definir um Input chamado currentPage do tipo number para o número da página atual.

  • Definir um Input chamado totalPages do tipo number para o número total de páginas.

• Output:

  • Definir um Output chamado onSelectPage do tipo EventEmitter para emitir um evento quando o usuário clicar no botão de nova página.

• Interface de usuário da paginação:

  • Exibir um conjunto de botões de paginação de acordo com o número total de páginas.

  • Destacar o botão correspondente à página atual.

• Manipulação do evento de clique:

  • Implementar a manipulação de eventos de clique para os botões de paginação.

  • Emitir o evento onSelectPage com o número da página em que foi clicado.

• Desabilitar a navegação para páginas inválidas:

  • Desabilitar o botão "Anterior" se a página atual for a primeira página.

  • Desabilitar o botão "Próximo" se a página atual for a última página.

• Testes unitários:

  • Escrever testes unitários para o componente app-pagination, cobrindo cenários como clicar em botões de paginação e validar alterações na interface do usuário com base em diferentes Inputs.

Definição de Pronto:

• O componente app-pagination foi criado dentro da pasta src/layout.

• A interface de usuário da paginação é exibida com o botão destacado corretamente de acordo com a página atual.

• A manipulação de eventos de clique é implementada para emitir o evento onSelectPage com o número da página em que foi clicado.

• Os botões de navegação são desabilitados adequadamente para a primeira e última página.

• Os testes unitários para o componente app-pagination foram bem-sucedidos e cobrem vários cenários.

Descrição:

Melhore o método getMovies do serviço APIService para suportar a paginação, recebendo um objeto como parâmetro com a estrutura { filters: { page: number } }. Isso permite obter dados da API com parâmetros de paginação.

Agora, a função deve retornar um Observer que resolve um objeto com a estrutura {metaData: { pagination:{currentPage:number, totalPages:number}}, movies: Movie[]}. Isso é necessário para incluir na saída não apenas o array de filmes, mas também a página atual em exibição e o número total de páginas disponíveis.

Critérios de Aceitação:

• Estrutura de parâmetros:

  • Modificar o método getMovies para aceitar um objeto como parâmetro.

  • O parâmetro deve ter uma propriedade chamada filters com a estrutura { filters: { page: number } }.

• Modificação da requisição API:

  • Ajustar a requisição API dentro do método getMovies para incluir o parâmetro page.

• Paginação padrão:

  • Implementar um valor padrão para o parâmetro de page, caso não seja fornecido. Por exemplo, definir um valor padrão de 1.

• Modificação da estrutura de retorno:

  • Modificar o retorno do método getMovies para um Observable que resolve um objeto com a estrutura {metaData: { pagination:{currentPage:number, totalPages:number}}, movies: Movie[]}.

• Testes unitários:

  • Escrever testes unitários para o método modificado getMovies para garantir que ele manipula a paginação corretamente.

  • Incluir casos de teste para fornecer diferentes números de página e testar o comportamento de paginação padrão.

Definição de Pronto:

• O método getMovies foi modificado para aceitar um objeto como parâmetro, com a estrutura { filters: { page: number } }.

• A solicitação da API dentro do método foi ajustada para incluir o parâmetro page

• Um valor padrão está implementado para o parâmetro page.

• O retorno do método getMovies foi modificado para um Observable que resolve um objeto com a estrutura {metaData: { pagination:{currentPage:number, totalPages:number}}, movies: Movie[]}.

• Os testes unitários do método getMovies modificado foram aprovados com sucesso, cobrindo vários cenários de paginação.

Descrição:

Criar uma função chamada formatGenresToMap no arquivo src/utils/transformers.ts para transformar uma matriz de modelos de dados de gênero da API em um Map do JavaScript. O Map deve ter chaves que representam os identificadores de gênero e valores que representam os nomes dos gêneros.

Essa transformação melhora a usabilidade dos dados de gênero ao fornecer um mapeamento de chaves e valores para buscas rápidas.

Critérios de aceitação:

• Assinatura da função:

  • Criar uma função chamada formatGenresToMap em src/utils/transformers.ts.

• Parâmetros:

  • A função deve aceitar um array de modelos de dados de gênero da API como entrada.

• Tipo de retorno:

  • A função deve retornar um Map do JavaScript.

  • As chaves do Map devem ser os IDs dos gêneros.

  • Os valores do Map devem ser os nomes dos gêneros.

  Por exemplo, dado o seguinte array de modelos de dados de gênero da API:

     ```js
     [
         { id: 28, name: 'Ação' },
         { id: 35, name: 'Comédia' },
         { id: 18, name: 'Drama' },
     ]
     ```
  

  A função deveria retornar um Map:

     ```js
     new Map([
         [28, 'Ação'],
         [35, 'Comédia'],
         [18, 'Drama'],
     ]);
     ```
  

• Tratamento de entradas vazias:

  • Garantir que a função lide corretamente com o caso em que o array de entrada está vazio, retornando um Map vazio.

Definição de Pronto:

• A função formatGenresToMap foi criada em src/utils/transformers.ts

• A função aceita como entrada um array de modelos de dados de gênero da API.

• A função retorna um Map do JavaScript com as chaves sendo os IDs dos gêneros e os valores sendo os nomes dos gêneros.

• A função trata o caso em que o array de entrada está vazio, retornando um Map vazio.

Descrição:

Definir um tipo TypeScript chamado Movie para representar um filme. Este tipo deve incluir os campos necessários tanto para a renderização da interface do usuário quanto para a lógica de negócios. Coloque a definição do tipo em um arquivo Movie.d.ts dentro da pasta src/models.

Criar um tipo TypeScript ajuda a manter uma estrutura clara na aplicação e fornece segurança de tipo ao longo do processo de desenvolvimento.

Critérios de Aceitação:

• Criar um arquivo chamado Movie.d.ts dentro da pasta src/models para armazenar a definição do tipo em TypeScript.

• Definir um tipo TypeScript chamado Movie dentro do arquivo Movie.d.ts. Incluir propriedades como título, pôster, ano de lançamento e qualquer outra informação relevante necessária para a interface do usuário e a lógica de negócios.

• Exportar o tipo de Filme a partir do arquivo Movie.d.ts, tornando-o acessível para outras partes da aplicação.

Definição de Pronto:

• O arquivo Movie.d.ts foi criado dentro da pasta src/models.

• O tipo Movie foi definido dentro do arquivo .d.ts, incluindo as propriedades para a renderização da UI e a lógica de negócios.

• O tipo Movie foi exportado corretamente a partir do arquivo .d.ts.

Descrição:

Melhore o componente app-home para suportar a paginação utilizando o componente app-pagination. Integre o componente app-pagination usando o Output onSelectPage. Sempre que o usuário clicar em um botão de página, atualize o valor do query param currentPage da URL para a nova página. Além disso, chame o método getMovies sempre que alterar o parâmetro de consulta currentPage inscrevendo-se no Observable queryParams do serviço ActivatedRoute.

Critérios de aceitação:

• Integração de componentes de paginação:

  • Integre o componente app-pagination dentro do componente app-home usando o Output onSelectPage.

• Observable queryParams:

  • Use o Observable queryParams do serviço ActivatedRoute para extrair e rastrear os query params da URL.

• Manipulação de cliques nos botões de página:

  • Quando o usuário clicar em um botão de página, altere o query param currentPage da URL para a nova página.

  • Executar o método getMovies sempre que o parâmetro de consulta currentPage mudar, inscrevendo-se no Observable queryParams do serviço ActivatedRoute.

• Testes unitários:

  • Escreva testes unitários para o componente app-home aprimorado, abrangendo cenários como cliques em botões de página, alterações nos parâmetros de URL e chamadas bem-sucedidas ao serviço.

Definição de Pronto:

• O componente app-pagination está integrado dentro do componente app-home usando o Output onSelectPage.

• O Observable queryParams do serviço ActivatedRoute foi utilizado para extrair e rastrear os parâmetros de consulta da URL.

• Os cliques no botão de página alteram o query param currentPage da URL para a nova página e acionam chamadas ao serviço getMovies.

• Os testes unitários para o componente app-home aprimorado foram bem-sucedidos e cobrem vários cenários de paginação.

Descrição

Criar um token de API para The Movie Database e armazená-lo como um valor para a chave TOKEN_API nos arquivos src/environments/environment.ts e src/environments/environment.prod.ts.

Esta tarefa garante uma gestão segura e organizada do token de API, evitando sua exposição acidental no Github e tornando-o facilmente acessível dentro da aplicação para as requisições API à The Movie DB.

Critérios de aceitação:

• Recuperação do Token de API:

  • Criar uma conta na plataforma The Movie DB para obter acesso à API.

  • Acessar o portal para desenvolvedores do The Movie DB e gerar uma chave/token de API.

  • Verificar se a chave/token de API fornece acesso aos endpoints necessários, como /discover/movie.

• Variável de ambiente:

  • Adicionar um par chave-valor TOKEN_API=<Seu-Token-API> nos arquivos src/environments/environment.ts e src/environments/environment.prod.ts, substituindo <Seu-Token-API> pelo token de API real obtido.

• Manipulação segura:

  • Certificar-se de que os arquivos src/environments/environment.ts e src/environments/environment.prod.ts estão adicionados ao arquivo .gitignore do projeto para evitar a exposição acidental de informações sensíveis.

Definição de Pronto:

• Criação de conta na plataforma The Movie DB.

• A chave/token de API foi gerada e verificada para acessar a API do The Movie DB.

• Os arquivos src/environments/environment.ts e src/environments/environment.prod.ts foram criados na raiz do projeto com a chave TOKEN_API e o token real da API.

• Os arquivos src/environments/environment.ts e src/environments/environment.prod.ts foram adicionados ao arquivo .gitignore do projeto.