O Expenses é um projeto que desenvolvi em meu canal do YouTube a fim de disseminar conhecimento. Se trata de uma SPA (Single Page Application) utilizando o Vue.js e o Firebase para inserir gastos pessoais e ter um controle dos mesmos. Os dados são salvos no realtime database do Firebase e utilizo tambem o storage para salvar a imagem do comprovante caso o usuário queira inserí-la.
- Tecnologias principais
- Rodando o projeto local
- Compilar arquivos minificados para produção
- Fazer o deploy para o firebase
- Playlist passo a passo da construção do projeto
- Vue.js v2.6.11
- Vue Router v3.2.0
- Firebase v7.19.0
- Bootstrap v4.5.2
- Clone o projeto na sua máquina;
- Instale as dependências usando
npm i
- Renomeie o arquivo
.env.local.example
para.env.local
; - Crie uma conta no Firebase (basta ter uma conta do Google);
- No console, adicione um novo projeto e dê o nome que preferir;
- Copie as credenciais do projeto para o ambiente Web e coloque-as em seus devidos locais dentro do arquivo
.env.local
; - Ative o método de login para E-mail/senha;
- Ative o realtime database dentro do console do Firebase;
- Execute
npm run serve
para subir um servidor local para desenvolvimento com hot reload ativado.
Para criar os arquivos minificados prontos para serem colocados em um servidor web basta executar
npm run build
Para usar o serviço de hosting do firebase basta executar os seguintes passos:
- Crie uma pasta deploy na raiz do projeto;
- Com o firebase-tools instalado na máquina execute
firebase init
dentro da pasta deploy recém criada.
Se estiver no Linux ou MacOS basta executar
npm run deploy
No windows é preciso fazer o procedimento na mão:
- Execute
npm run build
; - Copie o conteúdo de dentro da pasta /dist para dentro da pasta /deploy/public;
- Execute
firebase deploy
dentro da pasta /deploy.
- Playlist completa
- #01 - Instalação e conceitos
- #02 - ESLint e Primeiro componente
- #03 - Finalizando componente Spinner
- #04 - Instalando Firebase no projeto
- #05 - Rotas e página de login
- #06 - Autenticando usuário no Firebase
- #07 - Impendindo visualização sem login
- #08 - Criação do menu de navegação
- #09 - Botões logout e adicionar gasto
- #10 - Incluindo dados no firebase
- #11 - Fazendo upload de imagem
- #12 - Criando componente de notificação
- #13 - Montando a estrutura de layout da Home
- #14 - Finalizando a página Home
- #15 - Iniciando página da lista de gastos
- #16 - Listando gastos por mês
- #17 - Abrindo comprovante e adicionando rolagem nos itens
- #18 - Fazendo deploy no Firebase