• enhanced-tv-search
  • Sumário
  • Motivação
  • Pilha de tecnologia
  • Galeria
  • Como rodar
    • Pré-requisitos
    • Passo a passo
    • Criando seu próprio app Firebase (opcional)

Este app consiste em um catálogo de obras cinematográficas, como animes, documentários, filmes, k-dramas, séries etc. O site é protegido por autenticação e aceita apenas três provedores: Google, GitHub e Microsoft. Isto posto, não há autenticação por e-mail e senha. A página de detalhes de um show de TV traz informações como gêneros, tipo (animação, documentário, roteirizado etc.), idioma, status (em lançamento ou finalizado), data de estreia e o respectivo canal de TV.

Além disso, o app permite marcar um show de TV como favorito e filtrar os shows de TV favoritos pelo link no canto superior direito. Vale destacar que, como não há banco de dados, os shows marcados como favoritos ficam salvos no armazenamento local do navegador. Também foi feita uma tentativa de tradução da maioria dos termos trazidos pela API. A tradução foi feita da maneira mais rudimentar, como exemplificada abaixo:

{
  "types": {
    "Animation": "Animação",
    "Documentary": "Documentário",
    "Scripted": "Roteirizado"
  } 
}

E todos os termos traduzidos estão no arquivo dict.json.

Este foi o sétimo repositório de código apresentado no Curso Superior de TSI do IFMS como requisito para obtenção da nota parcial das atividades da unidade curricular Construção de Páginas Web II.

As seguintes tecnologias foram utilizadas para desenvolver este app:

Os créditos pelas mídias utilizadas estão disponíveis aqui.

• Node;
• Yarn (opcional);
• Conta no Firebase (opcional).

1. Clone o repositório de código em sua máquina;

2. Abra um shell de comando de sua preferência (prompt de comando, PowerShell, terminal etc.);

3. Instale as dependências do projeto através do seguinte comando:

$ npm install

Caso esteja utilizando o gerenciador de pacotes Yarn, execute o seguinte comando como alternativa:

$ yarn

4. Finalmente, execute o seguinte comando para iniciar o app:

Para npm:

$ npm run dev

Para Yarn:

$ yarn dev

Eventualmente, as credenciais responsáveis pela autenticação neste app podem se tornar inválidas. Neste caso, estes são passos adicionais para criar o seu próprio app Firebase e gerenciar as contas cadastradas. Caso você já tenha o app, pule para a etapa de № 5. Eis o passo a passo:

1. Crie uma conta na plataforma Firebase;

2. Acesse o console do Firebase e crie um novo projeto clicando em "Adicionar projeto";

Observação: Não é necessário ativar o Google Analytics para o seu projeto.

3. Feito isso, adicione um novo app Firebase para web clicando em </>;

Observação: Neste caso, não é necessário configurar o Firebase Hosting para este app, a menos que queira disponibilizá-lo na internet.

4. Feito isso, a próxima etapa "Adicionar o SDK do Firebase" te exibirá um código com as credenciais na constante firebaseConfig. Copie esta constante e a substitua no arquivo firebase.ts;

5. Caso você já tenha um app criado e precise apenas das credenciais, vá para a página inicial do seu projeto e clique em , abaixo do título do projeto, para listar todos os apps do seu projeto;

6. Feito isso, clique em ao lado do nome do app desejado para abrir as suas respectivas configurações;

7. No final da página, na seção "Configuração do SDK", você encontrará a mesma constante com as credenciais configuradas. Portanto, basta voltar à etapa de № 4.