Tag / web

by evelyn

Firebase Web – Zero to Hero parte 4

Nesse artigo vamos instalar corretamente o Bootstrap e suas dependências, pq tem algumas pegadinhas.

Bootstrap + Authentication

Authentication parte 3

Continuando o layout, adicionando o Bootstrap

Bootstrap, não acho que seja uma questão de gostar ou não gostar, muito antes pelo contrário

E por isso vamos instalar o bootstrap no nosso projeto, e para isso vamos usar a lib ngx-bootstrap, o comando agora é um pouco diferente, como o ngx-bootstrap provém schematics, isso é, ele atualiza o projeto aonde é necessário para seu funcionamento, no caso dele no package.json e no angular.json

Para maiores informações sobre schematics visite https://angular.io/guide/schematics-for-libraries

Bem, vamos nessa, no console digite: ng add ngx-bootstrap

Continue reading →
by evelyn

Firebase Web – Zero to Hero parte 3

Vamos arrumar o layout, afinal, temos que deixar bonito 🤩

HTML 5+ Firebase Authentication
HTML 5+ Firebase Authentication

Authentication parte 2

Arrumando o layout

Vamos arrumar o layout, afinal, temos que deixar bonito 🤩

Primeiro, quero colocar um background na tela de auth, porém somente na tela de auth.
Mas como se é um component, e o background para ficar bom precisa ser estilizado no body?

Primeiro preciso de um background, adicionei um a pasta assets/images, pasta images essa que eu criei.
projects/principal/src/assets/images/auth-background.png

auth-background.png
auth-background.png
Continue reading →
by evelyn

Firebase Web – Zero to Hero parte 1

Desenvolvendo uma aplicação web usando Angular acessando os recursos do Firebase

Angular + Firebase
Angular + Firebase

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

Continue reading →
by evelyn

Criando um projeto Angular sem aplicação na raiz

Criando um projeto Angular sem aplicação na raiz para que fique mais organizado

Por quê?

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
Continue reading →
by evelyn

Ainda to brigando com o React, props me lembra mel

Na minha luta tentando entender o React para aplicá-lo numa aplicação cliente-servidor com o Firebase.

by evelyn

Simples aplicação real time com Angular 4 e Firebase, parte 6

Como criar um novo usuário e também falo sobre rotas filhas

No artigo anterior falei sobre autenticar um usuário no firebase, nesse quero mostrar como criar um novo usuário e também falar sobre rotas filhas

Angular + Firebase
Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
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

Vamos colocar a mão na massa então

Continue reading →
by evelyn

Simples aplicação real time com Angular 4 e Firebase, parte 5

Nesse artigo irei mostrar como fazer um formulário de login usando a api de autenticação do firebase.

Nesse artigo irei mostrar como fazer um formulário de login usando a api de autenticação do firebase.

Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
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

Link Authentication
Continue reading →
by evelyn

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

Iremos fazer a publicação do nosso aplicativo no firebase usando Firebase Hosting

Nesse artigo irei mostrar o como fazer o deploy para o firebase, para isso iremos usar o firebase-tools que gerencia todo esse contexto.

Angular + Firebase
Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
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
npm install -g firebase-tools

Vai instalar um horror de coisas mas não se preocupe, tudo vai da certo.

Continue reading →
by evelyn

Simples aplicação real time com Angular 4 e Firebase, parte 3

Dessa vez iremos enviar esses dados diretamente ao Firebase e de lá iremos listar no template html

Nessa parte iremos fazer a ligação dos dados do angular com o Firebase.

Angular + Firebase
Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
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?

Continue reading →