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.

Image for post
Image for post

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.

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.

Image for post
Image for post

Seção de Downloads do Node.js

Após a conclusão, abra um terminal e digite npm -v:

Image for post
Image for post

Se instalou tudo certinho, será exibido a versão.

5.6.0

Agora que temos os requisitos, vamos instalar o Angular. No terminal informe:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

O Visual Studio possui um terminal (CTRL + ‘). Por fim execute:

Image for post
Image for post

Uma janela do navegador abrirá, executando o endereço localhost:4200.

Image for post
Image for post

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

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store