Simples aplicação real time com Angular 4 e firebase, parte 1

Em:
angular-firebase

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 ❤


Nesta primeira postagem, 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 🙂 https://www.typescriptlang.org/

A primeira coisa a ser feita, caso você ainda não tenha, é instalar o https://nodejs.org/en/ . Sem ele, não conseguiremos fazer nada =D Caso você já o tenha instalado, sempre é bom atualizar.

Nodejs.org

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. Node.js 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. site NPM

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 https:[email protected]/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

Criar a aplicação com o angular

Ele também vai instalar um mooooonte de coisas, e demorar um pouquinho, mas isso é esperado, você não precisa se preocupar. Aplicação criada

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

comando code

comando code

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!

Que lindo!!!

5 Que lindo!!!

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 uso ele =D

Transpilando

7 Transpilando

transpilação completa

]8 transpilação completa

Se estiver tudo ok vc poderá abrir essa página http://localhost:4200 indicando que está funcionando perfeitamente 😉
ng serve works! :)

8888888899999 ng serve works! 🙂

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, e você também pode escrever diretamente com os traços, ex: CadastroPessoa ficará cadastro-pessoa. Dito isso, vamos criar o componente. digite no terminal:

ng g c CadastroPessoa 

g=gerar, c=componente

 Comando para criar um componente para cadastro de pessoa usando o Angular CLI

10 Comando para criar um componente para cadastro de pessoa usando o Angular CLI

Como resultado é criado um componente dentro da pasta app

Cadastro de pessoa criado usando o Angular CLI

]11 Cadastro de pessoa criado usando o Angular CLI

Vamos ver como ficou dentro da estrutura da nossa aplicação o componente criado? 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 num 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. Dentro

arquivo html de template

12 arquivo html de template

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…

definição do componente

13 definição do componente

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>
cadastro pessoa em app.component.html

14 cadastro pessoa em app.component.html

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.

Resultado esperado para componente cadastro-pessoa

15 Resultado esperado para componente cadastro-pessoa

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

1jzmnaiscrvr_jnwr9qudrq
cadastro pessoa em app-component.html

17 cadastro pessoa em app-component.html

Resultado esperado

18 Resultado esperado

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>
template html com as definições de form, inputs e método de submit

19 template html com as definições de form, inputs e método de submit

    import { FormsModule, NgForm } from [email protected]/forms’;
    import { Component, OnInit } from [email protected]/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

Implementação do método de submit passando o form (ngForm) como descrito no template html

20 Implementação do método de submit passando o form (ngForm) como descrito no template html

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

Menu view

21 Menu view

Item Developer 'Desculpem meu sistema estar em inglês'

22 Item Developer
‘Desculpem meu sistema estar em inglês’

Developer Tools

23 Developer Tools

Resultado esperado

24 Resultado esperado

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 a 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);
    }
    }
Array de pessoas implementado

25 Array de pessoas implementado

Array com itens!!

26 Array com itens!!

Tá bom, gostei, mas não quero que essas informações fiquem apenas no console, quero que aparece na tela, neah?! 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>
implementação do *ngFor no template html

27 implementação do *ngFor no template html

Tá loopando!!!!! =D

28 Tá loopando!!!!! =D

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, pois tenho certeza de que faltam alguns detalhes. Conto com vocês! =D

  • Async Await, JS assincronamente síncrono

    O JavaScript tem evoluído muito nestes últimos anos e ainda temos muitas novidades interessantes a caminho! Este artigo é a continuação de uma série onde estamos discutindo as características assíncronas do JavaScript. Confira a lista dos artigos anteriores. As promises são uma daquelas coisas que trouxeram muitas mudanças na forma como trabalhamos com código assíncrono. […]

  • FrontInBH e BrazilJS 2016

    É com imenso prazer que anunciamos o primeiro evento oficialmente afiliado ao BrazilJS, o FrontInBH. O FrontInBH é um dos maiores eventos de tecnologias Front-end do Brasil, sempre levando para a comunidade mineira um conteúdo de extrema relevância através de palestrantes nacionais e internacionais. Em Agosto de 2016, mais precisamente no dia 06, acontecerá a […]

  • BrazilJS Conf de volta a Fortaleza

    Após quase 6 anos e 5 edições da BrazilJS Conf, em 2017 estaremos de volta a Fortaleza!
    01 e 02 de Setembro, logo após a edição de Porto Alegre que acontece nos dias 25 e 26 de Agosto.

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup