Com esse artigo, quero mostrar como é fácil criar uma aplicação com Angular que tenha a propriedade de ser real time com acesso base de dados NoSQL no firebase. A ideia é ter uma postagem viva, que sempre será atualizada de acordo com o feedback das devas que conheço, para que seja cada vez melhor escrita e detalhada para que qualquer pessoa possa entender e praticar.

Neste primeiro artigo, irei até a implementação de uma lista para apresentação de dados.

Toda a aplicação será escrita basicamente com typescript e HTML. Os comandos que irei usar no terminal são para Mac – existem algumas diferenças entre Mac, Linux e Windows, mas acredito que não influenciarão nos exemplos.

Por que typescript? Por ser uma linguagem bem intuitiva, elegante, ter uma boa documentação e, principalmente, porque eu gosto.

A primeira coisa a ser feita, caso você ainda não tenha feito, é instalar o Node.js. Sem ele, não conseguiremos fazer nada. Caso você já o tenha instalado, sempre é bom atualizar.

Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome para facilmente construir aplicações de rede rápidas e escaláveis. Ele usa um modelo de i/o direcionada a evento não bloqueante, que o torna leve e eficiente, ideal para aplicações em tempo real com troca intensa de dados através de dispositivos distribuídos (fonte: http://nodebr.com/o-que-e-node-js/).

Após a instalação, já teremos também instalado o gerenciador de pacotes npm. Nele, iremos encontrar todas as dependências para utilizar no exemplo.

Npm é o nome reduzido de node package manager (gerenciador de pacotes do node). A npm é duas coisas: primeiro, e mais importante, é um repositório online para publicação de projetos de código aberto para o Node.js; segundo, ele é um utilitário de linha de comando que interage com este repositório online, que ajuda na instalação de pacotes, gerenciamento de versão e gerenciamento de dependências (fonte: http://nodebr.com/o-que-e-a-npm-do-nodejs/)

Feito esse procedimento, vamos começar instalando o Angular CLI. Abra o terminal, digite npm install -g @angular/cli e espere. Ele vai instalar um horror de coisas, mas é isso mesmo; não se preocupe.

Agora que temos tudo instaladinho, vamos começar o projeto Angular, utilizando o Angular CLI. Digite o comando ng new realtimeapp:

Ele também vai instalar um monte de coisas e demorar um pouquinho, mas isso é esperado. Você não precisa se preocupar.

Bem, após tudo baixado e instalado, vamos ver como ficou. Abra a pasta do projeto:

Eu utilizo para desenvolver o Visual Studio Code, por isso do comando ‘code’. Recomendo, mas você pode usar o editor de sua preferência.

Olha como ficou:

Vamos rodar a aplicação e ver se está tudo ok. Para isso, volte ao terminal e, dentro da pasta criada, digite ng serve.

O Visual Studio Code tem um terminal integrado que facilita muito a minha vida, por isso eu o uso.

Se estiver tudo ok, você poderá abrir essa página http://localhost:4200 , indicando que está funcionando perfeitamente.

Feito isso, vamos criar nosso primeiro componente. Primeiro, pare o ng serve usando a combinação de teclas Ctrl-C. O Angular tem algumas regrinhas para nomes de componentes. Ele irá separar cada palavra reconhecendo-as por serem iniciadas com a primeira letra maiúscula e irá decompor colocando “-” entre cada palavra; isso é automático. Você também pode escrever diretamente com os traços, por exemplo: CadastroPessoa ficará cadastro-pessoa. Dito isso, vamos criar o componente. Digite no terminal:

ng g c CadastroPessoa
g=gerar, c=componente

Como resultado, é criado um componente dentro da pasta app:

Vamos ver como ficou o componente criado dentro da estrutura da nossa aplicação? Foi criada uma pasta com o nome de cadastro-pessoa, e dentro dela podemos ver quatro arquivos. Reparem nos nomes: o Angular CLI colocou antes das extensões a palavra ‘.component’. Essa é uma das convenções do Angular que pode parecer algo desinteressante em um primeiro momento, mas ao longo do desenvolvimento, passei a notar muito valor na organização de código, dando sentido e mostrando a responsabilidade de cada arquivo.

Não pretendo entrar em pormenores de cada arquivo, pois não é esse o objetivo dessa publicação. O que iremos ver são os .component.html que se referem a template onde iremos trabalhar a visualização da aplicação e os .component.ts, onde fica o código em typescript, ‘métodos, variáveis etc…

Vamos testar o componente cadastro-pessoa? Na figura acima, podemos ver o nome do seletor que o Angular CLI criou automaticamente “selector: ‘app-cadastro-pessoa’,”. É esse seletor que iremos utilizar para implementar o cadastro de pessoa no nosso index. Abra o arquivo app.component.html e escreva abaixo de o seletor:

<h1>
 {{title}}
</h1>
<app-cadastro-pessoa></app-cadastro-pessoa>

Feito isso, vamos ver como está nossa aplicação: abra o terminal, vá até a pasta do projeto e digite ng serve. Feito o processo, abra o navegador no endereço http://localhost:4200. A imagem abaixo deve ser idêntica ao que você está visualizando no seu browser.

Vamos fazer algumas brincadeiras. Vamos criar um formulário que irá ter dois campos, nome e sobrenome. Não é necessário parar o ng serve, pois a cada alteração de código, seja no html ou na ts, ele irá transpilar e recarregar o navegador. Não se preocupe com layout ou CSS nesse momento. Veja como ficou o meu form; fiz uma limpa em app.component.html e .ts tirando o que é desnecessário.

Espero que tenha conseguido o resultado esperado. Agora, vamos implementar o código que irá recuperar as informações do form. Vamos declarar o ngForm e o método de submit que irá resgatar as informações do formulário. A imagem abaixo traz os exemplos:

<h1> Cadastro de pessoa</h1>
    <form #f=”ngForm” (submit)=”form_submit(f)”>
    <input type=”text” ngModel name=”nome” placeholder=”Nome”>
    <br />
    <input type=”text” ngModel name=”sobrenome” placeholder=”Sobrenome”>
    <br />
    <button type=”submit”>Cadastrar</button>
    </form>

import { FormsModule, NgForm } from ‘@angular/forms’;
    import { Component, OnInit } from ‘@angular/core’;
    @Component({
    selector: ‘app-cadastro-pessoa’,
    templateUrl: ‘./cadastro-pessoa.component.html’,
    styleUrls: [‘./cadastro-pessoa.component.css’]
    })
    export class CadastroPessoaComponent implements OnInit {
    constructor() { }
    ngOnInit() { }
    form_submit(f: NgForm) {
    console.log(f.form.controls);
    console.log(‘valor do controle nome: ‘ + f.form.controls.nome.value);
    }
    }

Observe como o typescript é tipado quando passamos o parâmetro f do form no método form_submit, ele é definido como ngform:

Para visualizar o resultado, no Chrome abra a visualização do developer tools, pois somos devas e vamos usar.

Bom, até agora tudo bem; mas quem sabe não criamos uma lista para mostrar os dados gravado? Vamos lá! Vamos mexer diretamente no cadastro-pessoa.component.ts e lá declarar um array e inicializá-lo. Também vamos implementar no método form_submit à adição de itens a esse array, e mostrar no console o resultado, conforme o exemplo abaixo:

export class CadastroPessoaComponent implements OnInit {
    pessoas:Array<any>;
    constructor() { }
    ngOnInit() {
    this.pessoas = new Array<any>();
    }
    form_submit(f: NgForm) {
    this.pessoas.push({ nome: f.form.controls.nome.value, sobrenome: f.form.controls.sobrenome.value });
    console.log(this.pessoas);
    }
    }

Tá bom, gostei, mas não quero que essas informações fiquem apenas no console. Quero que apareça na tela. Go, girls! Vamos implementar um loop no html com Angular para exibir os itens do array. Para isso, iremos atuar diretamente no template html cadastro-pessoa.component.html e iremos usar a diretiva *ngFor, conforme exemplo.

<h1> Cadastro de pessoa</h1>
    <form #f=”ngForm” (submit)=”form_submit(f)”>
    <input type=”text” ngModel name=”nome” placeholder=”Nome”>
    <br />
    <input type=”text” ngModel name=”sobrenome” placeholder=”Sobrenome”>
    <br />
    <button type=”submit”>Cadastrar</button>
    </form>
    <ul>
    <li *ngFor=”let p of pessoas”>
    {{ p.nome + ‘ ‘ + p.sobrenome}}
    </li>
    </ul>

Gente, aqui termina a primeira parte. Na próxima, iremos começar com o firebase. Espero que tenham gostado e, por favor, feedbacks para melhorarmos essa postagem! Tenho certeza de que faltam alguns detalhes e conto com vocês!