Angular 6 e Firebase — Desenvolvendo um Portfólio (parte 1)
Olá.
O objetivo desse artigo é iniciar uma série para apresentar a construção passo-a-passo de uma aplicação em Angular 6 e Firebase.
Vamos construir um portfólio com uma área pública para apresentação dos projetos e uma área restrita para gerenciamentos deles.
Um usuário autenticado poderá publicar os projetos que serão listados na página principal.
Assim consigo cobrir vários aspectos de um projeto com angular como componentes, serviços, rotas, autenticação.
Vou tentar retribuir o aprendizado de vários desenvolvedores que publicam escrevendo um tutorial de uma aplicação simples . Assim, espero poder contribuir com alguém esteja começando no framework.
A construção basicamente cobrirá:
- Instalação e configuração do Angular na versão 6;
- Integração com o Firebase (Autenticação e Cloud FireStore);
- Rotas, Components e CRUD
E outros que julgar interessantes.
1 — Instalando os requisitos
Acesso o site do node.js para começar. O download contém o npm que utilizaremos para instalar o próprio Angular. O processo é simples, baixe e instale.
Seção de Downloads do Node.js
Após a conclusão, abra um terminal e digite npm -v:
Se instalou tudo certinho, será exibido a versão.
5.6.0
Agora que temos os requisitos, vamos instalar o Angular. No terminal informe:
npm install: comando para instalar utilizando o gerenciado de pacotes;
- @angular/cli : o Angular;
- -g: instala globalmente.
Aguarde o download e a finalização da instalação.
Após esse passo já podemos construir nossa aplicação. Ainda no terminal, digite:
ng : prefixo da ferramenta Angular CLI. Utilizamos para criar o projeto, artefatos e publicação. A documentação completa dos parâmetros pode ser encontrada aqui;
- new :novo projeto;
- portifolio: nome do projeto;
- - -style = scss: suporte ao sass;
- - -routing: gera um módulo de rotas.
Ainda no terminal, navegue até o diretório criado com o nome do projeto e abra o Visual Studio Code
O Visual Studio possui um terminal (CTRL + ‘). Por fim execute:
Uma janela do navegador abrirá, executando o endereço localhost:4200.
Todas alterações no projeto serão reconstruídas quando o servidor estiver executando.
Recomendo o uso do Visual Studio Code para codificarmos a aplicação. Aproveite e instale também extensões na IDE que facilitam a formatação, importação de classes, entre outros. Uma lista com algumas extensões.
Parte 2 — Ajustes Iniciais
https://medium.com/@kheronn.machado/angular6-portfolio-part2-cde6d8575754
Allons-y
