googlator

Sumário

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

Motivação

Este app foi criado durante uma aula expositiva sobre provedores de autenticação e consiste apenas em três telas: a tela para entrar com uma conta Google, a tela com o horário exato e o dia atual e a tela com a foto de perfil, o nome e o número de telefone do usuário em questão.

Este foi o quinto 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.

Pilha de tecnologia

As seguintes tecnologias foram utilizadas para desenvolver este app:

Papel	Tecnologia
Ambiente de execução	Node
Linguagem de programação	TypeScript
Ambiente de desenvolvimento	Vite
Autenticação	Firebase

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

Galeria

Como rodar

Pré-requisitos

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

Passo a passo

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

Criando seu próprio app Firebase (opcional)

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.