Desenvolvendo uma aplicação web usando Angular acessando os recursos do Firebase
Durante essa série de artigos iremos ver tudo que a aba Desenvolver do console do Firebase oferece: Authentication, Database, Storage, Hosting,Functions
Nessa primeira parte iremos criar a aplicação Angular
E o que precisamos para isso? Acredito que vc já tenha familiaridade com gerenciadores de pacotes, no caso uso o NPM https://www.npmjs.com/ e será com ele que os exemplos serão exemplificados 😋 Para ter o NPM instalado primeiramente instala o nodejs https://nodejs.org/en/, caso ainda não tenha, esse é o momento de instalá-lo
Costumo criar projeto Angular dessa forma por considerar que ficam muito mais organizados, pois todas as aplicações são adicionadas dentro da pasta projects
Vamos aos Passos
No console vc vai criar o projeto usando o ng new nome-projeto, porém usando –createApplication=false para não ciar aplicação e –interactive=false para que as opões de adicionar módulo de rota e escolha de pré processador css não sejam mostradas, já que como não será criado uma app, isso não terá efeito prático
ng new nome-projeto --createApplication=false --interactive=false
Nessa primeira parte tentei entender como funciona o React, já que sou desenvolvedora Angular, e nunca fiz algo com essa lib, nem sei direito o site, será que consegui aprender alguma coisa? 😅
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime
Por questões de segurança, eu acredito, o firebase não implementa uma forma de listar os usuários registrados, o que vejo muito é usarem a base dados regular, linkando o uid do usuário com um novo registro e assim fornecendo outro dados que a api de autenticação não suporta, como endereço, etc… Mas existe um porém, lembrem-se que essa base de dados não é relacional, e esse é o primeiro pecado que temos que evitar, não trazer o mundo relacional para o Firebase #FicaDica
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime
Uma situação que teremos que implementar para seguirmos na autenticação, são as rotas, sem elas o nosso aplicativo não saberá quem apresentar para login e cadastro de pessoas.
Bem, vamos lá, primeiramente iremos habilitar a autenticação No console do firebase clique no link Authentication
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime
Iremos fazer a publicação do nosso aplicativo no firebase usando Firebase Hosting Para isso iremos instalar o firebase-tools e iniciar o firebase na pasta do app, no terminal digite:
npm install -g firebase-tools
npm install -g firebase-tools
Vai instalar um horror de coisas mas não se preocupe, tudo vai da certo.
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime
Agora sim, vamos integrar tudo e ver a mágica acontecer =D
Na primeira parte criamos uma lista que é alimentada no método form_submit, dessa vez iremos enviar esses dados diretamente ao Firebase e de lá iremos listar no template html Vamos nós?
Nesse artigo iremos falar sobre o firebase, o que é, etc… e também iremos ver os componentes que vamos instalar para o angular se comunicar com as apis do firebase.
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime
Nessa parte iremos falar sobre Firebase e como integrá-lo ao aplicativo que estamos criando.
Mas então, que é o Firebase, aonde mora, do que se alimenta?
O Firebase é uma ferramenta do Google e ao mesmo tempo uma infraestrutura para você desenvolver aplicativos com maior rapidez e flexibilidade. É o que podemos chamar de um BAAS Backend as a Service, vc não baixa, nem tem uma ferramenta específica de administração, todo o gerenciamento é feito pela web, ou cloud, como vc desejar. A ideia é desenvolver aplicativos de forma simples e sem preocupação com a escalabilidade! E quanto custa? Nada? Digamos que sim, vamos usar o plano spark para o nosso aplicativo, e como o próprio firebase diz, ‘limites generosos para amadores’, eu sei que não somos amadoras, mas se é de graça tudo bem 😛
Com esse artigo quero mostrar como é fácil criar uma aplicação com Angular que tenha a propriedade de ser real time com acesso a dados numa base de dados nosql no Firebase
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime
Nessa 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 😊
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Read MoreACCEPT
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
