Este documento descreve o desenvolvimento de uma aplicação web para autenticação de usuários utilizando Firebase Authentication com Redux. Ele explica como configurar o Firebase, criar actions, reducers e componentes para implementar funcionalidades de cadastro, login e logout. Além disso, fornece detalhes sobre como conectar o Redux e React ao Firebase para gerenciar o estado da aplicação.
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia
O documento apresenta Rafael Alves Nogueira Garcia, desenvolvedor PHP há 9 anos que desenvolve com o framework Yii há 2 anos. Ele já desenvolveu algumas extensões para o Yii, como wrappers para extensões Jquery e integração com PHP IDS.
Este relatório descreve o desenvolvimento de um website chamado gesCONTACT para gestão de contactos. Foi utilizada uma variedade de tecnologias como PHP, MySQL, CSS, JavaScript e XML. O foco esteve na segurança do processo de login e registo através de encriptação de dados e prevenção de ataques. O website permite adicionar, eliminar e partilhar contactos entre utilizadores registados.
Typescript: the Fun Parts (BrazilJS 2017)Loiane Groner
O documento apresenta uma introdução ao TypeScript, incluindo seus principais recursos como tipagem estática, interfaces, enums, generics e suporte a frameworks como Angular e Vue. Exemplos demonstram como o TypeScript pode prevenir erros e tornar o código mais robusto e de fácil manutenção através da verificação de tipos.
Este documento apresenta uma introdução básica ao JavaScript, abordando seus principais conceitos como: sua origem e diferenças em relação ao Java; como inserir códigos JavaScript em páginas HTML; utilização de variáveis, arrays, objetos, funções, condicionais e laços de repetição; tratamento de eventos e manipulação de elementos da página; e validação de formulários.
Este documento fornece uma introdução ao framework Play! para desenvolvimento de aplicações web com Java. Ele discute a instalação do framework, criação de um projeto de exemplo, estrutura de pastas, configuração do banco de dados, criação de modelos, controllers e views. Além disso, aborda tópicos como validações, interceptações, templates, módulos e recursos avançados do framework.
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
O documento fornece 3 dicas principais para escrever códigos JavaScript melhores:
1) Aprenda bem a linguagem JavaScript e seus conceitos-chave.
2) Aplique padrões como o Module Pattern para organizar e encapsular o código.
3) Use arquiteturas como MVC para separar as preocupações da aplicação.
Além disso, fornece dicas gerais como documentar o código, criar arquivos separados, injetar dependências e realizar testes. O objetivo é ajudar a escrever códigos mais
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
Backbone.js é um framework JavaScript que fornece estrutura para aplicações web, conectando modelos com chave-valor, coleções e views a uma API RESTful. Isso permite manipular o DOM de forma mais organizada do que apenas com jQuery, separando a lógica da apresentação. Rails pode ser usado no back-end para gerar uma API RESTful para os modelos do Backbone.js.
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia
O documento apresenta Rafael Alves Nogueira Garcia, desenvolvedor PHP há 9 anos que desenvolve com o framework Yii há 2 anos. Ele já desenvolveu algumas extensões para o Yii, como wrappers para extensões Jquery e integração com PHP IDS.
Este relatório descreve o desenvolvimento de um website chamado gesCONTACT para gestão de contactos. Foi utilizada uma variedade de tecnologias como PHP, MySQL, CSS, JavaScript e XML. O foco esteve na segurança do processo de login e registo através de encriptação de dados e prevenção de ataques. O website permite adicionar, eliminar e partilhar contactos entre utilizadores registados.
Typescript: the Fun Parts (BrazilJS 2017)Loiane Groner
O documento apresenta uma introdução ao TypeScript, incluindo seus principais recursos como tipagem estática, interfaces, enums, generics e suporte a frameworks como Angular e Vue. Exemplos demonstram como o TypeScript pode prevenir erros e tornar o código mais robusto e de fácil manutenção através da verificação de tipos.
Este documento apresenta uma introdução básica ao JavaScript, abordando seus principais conceitos como: sua origem e diferenças em relação ao Java; como inserir códigos JavaScript em páginas HTML; utilização de variáveis, arrays, objetos, funções, condicionais e laços de repetição; tratamento de eventos e manipulação de elementos da página; e validação de formulários.
Este documento fornece uma introdução ao framework Play! para desenvolvimento de aplicações web com Java. Ele discute a instalação do framework, criação de um projeto de exemplo, estrutura de pastas, configuração do banco de dados, criação de modelos, controllers e views. Além disso, aborda tópicos como validações, interceptações, templates, módulos e recursos avançados do framework.
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
O documento fornece 3 dicas principais para escrever códigos JavaScript melhores:
1) Aprenda bem a linguagem JavaScript e seus conceitos-chave.
2) Aplique padrões como o Module Pattern para organizar e encapsular o código.
3) Use arquiteturas como MVC para separar as preocupações da aplicação.
Além disso, fornece dicas gerais como documentar o código, criar arquivos separados, injetar dependências e realizar testes. O objetivo é ajudar a escrever códigos mais
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
Backbone.js é um framework JavaScript que fornece estrutura para aplicações web, conectando modelos com chave-valor, coleções e views a uma API RESTful. Isso permite manipular o DOM de forma mais organizada do que apenas com jQuery, separando a lógica da apresentação. Rails pode ser usado no back-end para gerar uma API RESTful para os modelos do Backbone.js.
O documento discute React, Flux e arquitetura de aplicações front-end. Aborda problemas atuais da web, como desempenho e complexidade do MVC, e como React e Flux podem ajudar a resolver esses problemas através de componentização, estado unidirecional e ciclo de vida de componentes.
O documento discute arquitetura, manutenção e testes para aplicativos móveis em grande escala. Ele apresenta a arquitetura MVVM-C como uma alternativa melhor à arquitetura MVC da Apple para estruturar o código de forma mais segmentada e testável. Também recomenda dividir o aplicativo em frameworks dinâmicos para facilitar a manutenção e escalabilidade do código.
O documento resume as etapas para desenvolver um jogo da velha (tic tac toe) usando ReactJS. As principais etapas incluem: 1) Criar as classes Square, Board e Game para representar os componentes do jogo; 2) Adicionar dinâmica ao jogo armazenando o estado dos botões clicados usando this.state; 3) Melhorar o controle do jogo armazenando o estado geral no componente Board.
Este documento discute eventos e validação de formulários em JavaScript. Ele explica eventos do mouse, teclado, objetos e formulários e fornece exercícios para praticar cada tópico. Também apresenta como validar campos de formulário para garantir que as informações estejam corretas.
1) O documento descreve a tecnologia AJAX e como é implementada no framework ASP.NET AJAX.
2) AJAX permite atualizações assíncronas de páginas web para melhorar a experiência do utilizador.
3) O framework ASP.NET AJAX facilita o desenvolvimento de aplicações AJAX utilizando controlos como UpdatePanel.
O documento discute o uso de serviços em dispositivos móveis no Android. Serviços permitem executar tarefas em segundo plano sem interface gráfica. Existem duas formas de iniciar um serviço: startService() inicia o serviço independentemente do processo que o criou, enquanto bindService() conecta-se a um serviço existente. O documento fornece um exemplo completo de como criar e usar um serviço vinculado para recuperar o valor de um contador.
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
O documento fornece dicas sobre como organizar o JavaScript em aplicações Rails não-SPA. As principais dicas incluem: (1) usar o Bower para gerenciar dependências front-end; (2) modularizar o código JavaScript usando módulos; (3) estabelecer um ponto de entrada único para execução do JavaScript.
Este documento fornece uma documentação da API SCOPI, descrevendo os principais recursos como autenticação, usuários, divisões, objetivos, indicadores, projetos e processos. A API permite consultar, inserir e atualizar dados do sistema de forma automatizada para integrar o SCOPI com outros sistemas de acordo com as necessidades do cliente.
O documento discute princípios de escrita de código limpo, incluindo a importância de nomes significativos, funções focadas em uma única tarefa, uso apropriado de comentários, e formatação de código para melhor legibilidade.
Este documento apresenta os principais conceitos e funcionalidades da biblioteca jQuery, incluindo seletores, manipulação de CSS e elementos, requisições AJAX, entre outros tópicos, a fim de introduzir o leitor ao framework jQuery de forma prática através de exemplos e exercícios resolvidos.
O documento descreve os passos para implementar autenticação de usuários em uma aplicação Zend Framework: 1) Criar tabela de usuários e popular com dados; 2) Criar formulário de login; 3) Criar controller de autenticação com ações de login e logout; 4) Certificar que o usuário esteja logado antes de acessar outras áreas.
O documento discute diversos tópicos sobre Python, incluindo: 1) Integração do Django com Adobe Flex para desenvolvimento de aplicações web; 2) Uso do PyGame para desenvolvimento de jogos; 3) Integração do Django com o PagSeguro para pagamentos online.
Backbone.js é um framework JavaScript que separa as responsabilidades entre modelo, vista e roteador de forma semelhante a MVC. Ele é usado para estruturar projetos com maior responsividade, testabilidade e estabilidade dos componentes. O documento discute a estruturação de projetos com Backbone usando RequireJS para modularização, separação de código da aplicação e bibliotecas, além de testes de unidade com Jasmine.
DevDay - O elo perdido: sincronizando webappsSuissa
O documento discute como desenvolver aplicações web que funcionem offline através de tecnologias como HTML5, Node.js e Socket.io. Ele apresenta soluções como cache manifest, localStorage e webSockets para sincronizar dados entre clientes e servidor mesmo sem conexão com a internet.
Desvendando as ferramentas e serviços para o desenvolvedor Androidjoaobmonteiro
Diversos frameworks e serviços para facilitar o seu dia a dia com desenvolvimento Android serão apresentadas, tais como Spring Android, Roboguice, Robolectric, Android Query, Flurry e Xtify. Saiba as características de cada uma, suas vantagens e desvantagens e faça as suas escolhas!
Aplicações Web com AJAX - Er Galvão AbbottTchelinux
Este documento apresenta a tecnologia AJAX e seu uso para interação entre elementos de formulário, como entre caixas de seleção de estados e cidades. AJAX permite requisições HTTP assíncronas e manipulação de documentos XML para atualizar partes de páginas web sem recarregá-las completamente.
O documento apresenta conceitos sobre PHP e AJAX. Resume os principais pontos sobre: 1) como o AJAX permite enviar e receber dados de um servidor sem recarregar a página usando tecnologias como Javascript, XML e HTTP; 2) o objeto XMLHttpRequest que permite fazer requisições assíncronas; 3) um exemplo prático de um mural de recados interativo usando PHP no servidor e AJAX no cliente.
Como ser programador durante o dia e mesmo assim dormir bem à noiteComunidade NetPonto
O documento apresenta exemplos de logs de uma aplicação SVN que registam as ações dos utilizadores no repositório. São apresentadas duas formas de fazer logging: de forma errada, apenas registando mensagens de erro, e de forma correta, usando uma biblioteca de logging estruturada e gravando logs de diferentes níveis. É explicado como a instrumentação e testes automatizados ajudam a detetar e corrigir problemas mais rapidamente.
O documento discute React, Flux e arquitetura de aplicações front-end. Aborda problemas atuais da web, como desempenho e complexidade do MVC, e como React e Flux podem ajudar a resolver esses problemas através de componentização, estado unidirecional e ciclo de vida de componentes.
O documento discute arquitetura, manutenção e testes para aplicativos móveis em grande escala. Ele apresenta a arquitetura MVVM-C como uma alternativa melhor à arquitetura MVC da Apple para estruturar o código de forma mais segmentada e testável. Também recomenda dividir o aplicativo em frameworks dinâmicos para facilitar a manutenção e escalabilidade do código.
O documento resume as etapas para desenvolver um jogo da velha (tic tac toe) usando ReactJS. As principais etapas incluem: 1) Criar as classes Square, Board e Game para representar os componentes do jogo; 2) Adicionar dinâmica ao jogo armazenando o estado dos botões clicados usando this.state; 3) Melhorar o controle do jogo armazenando o estado geral no componente Board.
Este documento discute eventos e validação de formulários em JavaScript. Ele explica eventos do mouse, teclado, objetos e formulários e fornece exercícios para praticar cada tópico. Também apresenta como validar campos de formulário para garantir que as informações estejam corretas.
1) O documento descreve a tecnologia AJAX e como é implementada no framework ASP.NET AJAX.
2) AJAX permite atualizações assíncronas de páginas web para melhorar a experiência do utilizador.
3) O framework ASP.NET AJAX facilita o desenvolvimento de aplicações AJAX utilizando controlos como UpdatePanel.
O documento discute o uso de serviços em dispositivos móveis no Android. Serviços permitem executar tarefas em segundo plano sem interface gráfica. Existem duas formas de iniciar um serviço: startService() inicia o serviço independentemente do processo que o criou, enquanto bindService() conecta-se a um serviço existente. O documento fornece um exemplo completo de como criar e usar um serviço vinculado para recuperar o valor de um contador.
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
O documento fornece dicas sobre como organizar o JavaScript em aplicações Rails não-SPA. As principais dicas incluem: (1) usar o Bower para gerenciar dependências front-end; (2) modularizar o código JavaScript usando módulos; (3) estabelecer um ponto de entrada único para execução do JavaScript.
Este documento fornece uma documentação da API SCOPI, descrevendo os principais recursos como autenticação, usuários, divisões, objetivos, indicadores, projetos e processos. A API permite consultar, inserir e atualizar dados do sistema de forma automatizada para integrar o SCOPI com outros sistemas de acordo com as necessidades do cliente.
O documento discute princípios de escrita de código limpo, incluindo a importância de nomes significativos, funções focadas em uma única tarefa, uso apropriado de comentários, e formatação de código para melhor legibilidade.
Este documento apresenta os principais conceitos e funcionalidades da biblioteca jQuery, incluindo seletores, manipulação de CSS e elementos, requisições AJAX, entre outros tópicos, a fim de introduzir o leitor ao framework jQuery de forma prática através de exemplos e exercícios resolvidos.
O documento descreve os passos para implementar autenticação de usuários em uma aplicação Zend Framework: 1) Criar tabela de usuários e popular com dados; 2) Criar formulário de login; 3) Criar controller de autenticação com ações de login e logout; 4) Certificar que o usuário esteja logado antes de acessar outras áreas.
O documento discute diversos tópicos sobre Python, incluindo: 1) Integração do Django com Adobe Flex para desenvolvimento de aplicações web; 2) Uso do PyGame para desenvolvimento de jogos; 3) Integração do Django com o PagSeguro para pagamentos online.
Backbone.js é um framework JavaScript que separa as responsabilidades entre modelo, vista e roteador de forma semelhante a MVC. Ele é usado para estruturar projetos com maior responsividade, testabilidade e estabilidade dos componentes. O documento discute a estruturação de projetos com Backbone usando RequireJS para modularização, separação de código da aplicação e bibliotecas, além de testes de unidade com Jasmine.
DevDay - O elo perdido: sincronizando webappsSuissa
O documento discute como desenvolver aplicações web que funcionem offline através de tecnologias como HTML5, Node.js e Socket.io. Ele apresenta soluções como cache manifest, localStorage e webSockets para sincronizar dados entre clientes e servidor mesmo sem conexão com a internet.
Desvendando as ferramentas e serviços para o desenvolvedor Androidjoaobmonteiro
Diversos frameworks e serviços para facilitar o seu dia a dia com desenvolvimento Android serão apresentadas, tais como Spring Android, Roboguice, Robolectric, Android Query, Flurry e Xtify. Saiba as características de cada uma, suas vantagens e desvantagens e faça as suas escolhas!
Aplicações Web com AJAX - Er Galvão AbbottTchelinux
Este documento apresenta a tecnologia AJAX e seu uso para interação entre elementos de formulário, como entre caixas de seleção de estados e cidades. AJAX permite requisições HTTP assíncronas e manipulação de documentos XML para atualizar partes de páginas web sem recarregá-las completamente.
O documento apresenta conceitos sobre PHP e AJAX. Resume os principais pontos sobre: 1) como o AJAX permite enviar e receber dados de um servidor sem recarregar a página usando tecnologias como Javascript, XML e HTTP; 2) o objeto XMLHttpRequest que permite fazer requisições assíncronas; 3) um exemplo prático de um mural de recados interativo usando PHP no servidor e AJAX no cliente.
Como ser programador durante o dia e mesmo assim dormir bem à noiteComunidade NetPonto
O documento apresenta exemplos de logs de uma aplicação SVN que registam as ações dos utilizadores no repositório. São apresentadas duas formas de fazer logging: de forma errada, apenas registando mensagens de erro, e de forma correta, usando uma biblioteca de logging estruturada e gravando logs de diferentes níveis. É explicado como a instrumentação e testes automatizados ajudam a detetar e corrigir problemas mais rapidamente.
Atividades de Inglês e Espanhol para Imprimir - AlfabetinhoMateusTavares54
Quer aprender inglês e espanhol de um jeito divertido? Aqui você encontra atividades legais para imprimir e usar. É só imprimir e começar a brincar enquanto aprende!
O Que é Um Ménage à Trois?
A sociedade contemporânea está passando por grandes mudanças comportamentais no âmbito da sexualidade humana, tendo inversão de valores indescritíveis, que assusta as famílias tradicionais instituídas na Palavra de Deus.
Atividade letra da música - Espalhe Amor, Anavitória.Mary Alvarenga
A música 'Espalhe Amor', interpretada pela cantora Anavitória é uma celebração do amor e de sua capacidade de transformar e conectar as pessoas. A letra sugere uma reflexão sobre como o amor, quando verdadeiramente compartilhado, pode ultrapassar barreiras alcançando outros corações e provocando mudanças positivas.
Sistema de Bibliotecas UCS - Chronica do emperador Clarimundo, donde os reis ...Biblioteca UCS
A biblioteca abriga, em seu acervo de coleções especiais o terceiro volume da obra editada em Lisboa, em 1843. Sua exibe
detalhes dourados e vermelhos. A obra narra um romance de cavalaria, relatando a
vida e façanhas do cavaleiro Clarimundo,
que se torna Rei da Hungria e Imperador
de Constantinopla.
2. 2
Introdução
●
Neste projeto, iremos implementar uma aplicação de cadastro (signup), login
(signin) e logout, fazendo uso do firebase authentication para gerenciar
usuários e senhas.
●
O seu projeto irá necessitar das seguintes bibliotecas:
– "firebase": "^7.14.4" → Acesso à API do Firebase. É necessário ter conta no Google
– "redux": "^4.0.5" → Redux “puro”
– "react-redux": "^7.2.0" → “Cola” entre o React e o Redux
– "react-redux-firebase": "^3.5.1" → “Cola” entre o React, Redux e Firebase
– "react-router-dom": "^5.1.2" → Gerenciador de rotas
– "redux-thunk": "^2.3.0" → Middleware reponsável por ações assíncronas
5. 5
Firebase Authentication
●
Em configurações do projeto, crie uma
aplicação WEB para acessar o projeto e copie
a chave de autenticação a ser colocada no
arquivo javascript do seu projeto.
7. 7
Conexão com o Firebase
●
Na pasta keys, crie o arquivo firebase_key.js:
const firebase_key = {
apiKey: "SDdsddkse8dsd-WlGeik_sdsdsdeeEEEsssddsd",
authDomain: "pet-redux-auth.firebaseapp.com",
databaseURL: "https://pet-dsdsdsds-dsd.dsdddd.com",
projectId: "pet-sdsddsd-authksdsdeeedusyd",
StorageBucket: "????",
messagingSenderId: "0000000000",
appId: "1sldjslue!!!sdssdsdsd:webskdhksds23033fa13315219d685e7a"
}
export default firebase_key
8. 8
Conexão com Firebase
●
Na pasta utils, crie o arquivo firebase.js
import firebase from 'firebase/app'
import 'firebase/auth'
import firebase_key from '../keys/firebase_key'
firebase.initializeApp(firebase_key)
export default firebase
9. 9
Conexão com Firebase
●
Note que o arquivo firebase.js usa o arquivo
firebase_key.js, para poder fazer a conexão
com o Firebase.
●
Você deve ter criado um projeto no Firebase e
um aplicação WEB, gerando assim a chave de
conexão.
10. 10
Reducers
●
Os reducers, armazenam o estado geral da aplicação de uma
determinada entidade do domínio da aplicação. No nosso caso,
iremos armazenar a mensagem gerada pelas operações de
cadastro, login e logout.
●
Cada reducer é um função que recebe como parâmetro um state
(estado geral anterior) e uma action (ação).
●
Na pasta reducers iremos criar:
– authReducer.js (redutor reponsável pela autiorização)
– Index.js (estado geral da aplicação, a combinação de todos os redutores)
11. 11
authReducer.js
import { SIGNUP_SUCCESS, SIGNUP_ERROR, SIGNIN_SUCCESS,
SIGNIN_ERROR, SIGNOUT_SUCCESS, SIGNOUT_ERROR }
from '../actions/actionTypes'
const INITIAL_STATE = {
authMsg: null,
user: ''
}
export default function (state = INITIAL_STATE, action) {
console.log('action: ' + action.type + ' ' + state.user)
switch (action.type) {
case SIGNUP_SUCCESS:
return {
...state,
authMsg: action.payload.authMessage,
user: action.payload.userMail,
}
case SIGNUP_ERROR:
return {
...state,
authMsg: action.payload.authMessage
}
case SIGNIN_SUCCESS:
return {
...state,
authMsg: action.payload.authMessage,
user: action.payload.userMail,
}
case SIGNIN_ERROR:
return {
...state,
authMsg: action.payload.authMessage
}
case SIGNOUT_SUCCESS:
return {
user: null,
authMsg: action.payload.authMessage
}
case SIGNOUT_ERROR:
return {
...state,
authMsg: action.payload.authMessage
}
default:
return state
}
}
Atenção! O arquivo actionTypes.js deve ser
Criado antes.
Atenção! Cada “case” trata de um tipo de action diferente. Lembre-se: toda vez que o usuário
Der um refresh na página (F5), o estado é resetado para o inicial.
Para este exemplo, iremos armazenar apenas
a mensagem de resultado de uma ação “authMsg”
e “user”, o qual armazera o e-mail logado.
12. 12
index.js
import {combineReducers} from 'redux'
import authReducer from './authReducer'
import { firebaseReducer } from 'react-redux-firebase'
/* ESTADO GERAL DA APLICAÇÃO */
export default combineReducers({
firebaseReducer,
authReducer
})
Temos dois redutores (reducers) declarados neste arquivo: “firebaseReducer”, definido pela biblioteca
react-redux-firebase; e “authReducer”, criado por nós para guardar informações do usário logado.
13. 13
Actions
●
As ações são disparadas de acordo com eventos da interface do usuário (navegador).
●
As ações podem alterar o estado geral da aplicação (definido em reducers/index.js), acionando os
redutores (que escolhem qual ação irão computar).
●
Cada ação tem um tipo (type) e um payload (informações do novo estado).
●
No nosso projeto, dentro da pastas actions, temos:
– actionTypes.js (arquivo simples de constantes)
– authActionCreator.js (criador de ações)
●
Na verdade, as ações são objetos simples em javascript ( {type,payload}). O arquivo
authActionCreator é formado por três funções (action creators) responsáveis em retornar uma ação. São
elas:
– signin (email,passwor,callback) → A função de login
– signup (email,passwor,callback) → A função de cadastro
– signout () → A função de logout
14. 14
actionType.js
export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS'
export const SIGNUP_ERROR = 'SIGNUP_ERROR'
export const SIGNIN_SUCCESS = 'SIGNIN_SUCCESS'
export const SIGNIN_ERROR = 'SIGNIN_ERROR'
export const SIGNOUT_SUCCESS = 'SIGNOUT_SUCCESS'
export const SIGNOUT_ERROR = 'SIGNOUT_ERROR'
Define um conjunto de constantes que facilita e padroniza o uso das ações, evitando
erros de grafia.
15. 15
authActionCreator.js
signup
import {SIGNUP_SUCCESS,SIGNUP_ERROR,SIGNIN_SUCCESS,SIGNIN_ERROR,SIGNOUT_SUCCESS,SIGNOUT_ERROR} from
'./actionTypes'
import firebase from '../../utils/firebase'
export const signup = (email,password,callback) => {
return dispatch =>{
try{
firebase
.auth()
.createUserWithEmailAndPassword(email,password)
.then(
()=>{
firebase.auth().onAuthStateChanged(
(user)=>{
if(user){
dispatch({
type:SIGNUP_SUCCESS,
payload: {
authMessage: `Cadastro efetuado com sucesso!`,
userMail: user.email}
})
callback()
}else{
dispatch({
type:SIGNUP_ERROR,
payload: {authMessage: `Não foi possível conectar`}
})
callback()
}
}
)//firebase.auth().onAuthStateChanged(
}//se deu certo
)
Atenção! Diferente do Redux usual, as nossas funções
não retornam apenas um objeto referente a ação, e sim
uma função: dispatch=>{ } .
Isso se deve graças a Middleware redux-thunk, pois no
caso de signin, signout e signup temos operações
assíncronas.
Para tratar operações assíncronas, o redux-thunk envolve
as ações {type, payload} dentro da função dispatch=>{},
possibilitando assim que sua aplicação não “trave” ao
fazer uma chamada remota ao Firebase.
16. 16
authActionCreator.js
signup
.catch(
(error)=>{
dispatch({
type: SIGNUP_ERROR,
payload: {authMessage:`Erro na criação do usuário: ${error}`}
})
callback()
}
)
}catch(error){
dispatch({
type: SIGNUP_ERROR,
payload: { authMessage: `Erro na conexão com o firebase: ${error}`}
})
callback()
} //try-catch
} //return dispatch
}
A função callback(), passada como parâmetro, possibilita aos componentes que
chamarem essas ações “esperarem” dentro do callback a computação remota
acabar. Isto pode ser interessante em casos que a interface remota queira renderizar
uma tela de loading, que só fecha quando o resultado remoto é obtido.
Veremos mais detalhes do uso do callback no signin e signup, na interface.
17. 17
authActionCreator.js
signin
export const signin = (email,password,callback) =>{
return dispatch => {
try{
firebase
.auth()
.signInWithEmailAndPassword(email,password)
.then(
(data)=>{
dispatch({
type: SIGNIN_SUCCESS,
payload: {
authMessage:`Login efetuado com sucesso`,
userMail: data.user.email}
})
callback()
}
)
.catch(
(error)=>{
dispatch({
type: SIGNIN_ERROR,
payload: {authMessage:`Erro login do usuário: ${error}`}
})
callback()
}
)
A lógica do Signin não é muito diferente de Signout.
21. 21
Componentes Auxiliares
●
Dentro da pasta commons, iremos criar dois
componentes de interface auxiliares:
– Card.jsx → Acesso irrestrito
– RestrictedCard.jsx → Acessível apenas com o
usuário logado
22. 22
Card.jsx
import React, { Component } from 'react'
export default class Card extends Component {
render() {
return (
<div className='content'>
<div className='card'>
<div className='card-header'>
{this.props.title}
</div>
<div className='card-body'>
{this.props.children}
</div>
</div>
</div>
)
}
}
Usa os “cards” do bootstrap. Mais detalhes em
https://getbootstrap.com/docs/4.3/components/card/
23. 23
RestrictedCard.jsx
import React, {Component} from 'react'
import Card from './Card'
import { connect } from 'react-redux'
class RestrictedCard extends Component{
componentDidMount(){
if(this.props.firebaseAuth.isLoaded && this.props.firebaseAuth.isEmpty){
this.props.history.push('/signin')
}
}
render(){
return (
<Card title={this.props.title}>
{this.props.children}
</Card>
)
}
}
function mapStateToProps(state) {
return {
firebaseAuth: state.firebaseReducer.auth
}
}
export default connect(mapStateToProps)(RestrictedCard)
Agora, fazendo uso do redutor do firebase, definido em reducers/index.js, eu
Testo se o usuário ainda está logado.
24. 24
Colando o Redux
●
Para inserir o Redux, temos que criar os
objetos no arquivo principal da aplicação, o
index.js de src.
●
Você deve seguir o que diz a documentação:
– http://react-redux-firebase.com/docs/v3-migration-g
uide.html
25. 25
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { ReactReduxFirebaseProvider} from 'react-redux-firebase'
import reduxThunk from 'redux-thunk'
import reducer from './store/reducers' //chamando index.js
import firebase from './utils/firebase'
const store = createStore(
reducer,
{},
applyMiddleware(reduxThunk)
)
const rrfProps = {
firebase,
config: {},
dispatch: store.dispatch
}
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>
, document.getElementById('root')
);
serviceWorker.unregister();
Cria o estado geral e aplica a middleware, que trata de comunição assíncrona.
Configurações gerais do Firebase, usadas pelo “react-redux-firebase”
26. 26
Componentes da Aplicação
●
Os componentes da aplicação são:
– Main.jsx → Apenas pra encher linguiça, escreva
qualquer coisa.
– Signinjsx → Login
– Signup.jsx → Cadastro
– Content A e B .jsx →páginas de acesso restrito
– App.jsx → Página raiz
27. 27
App.jsx
import React, { Component } from 'react'
import { BrowserRouter, Link, Switch, Route } from 'react-router-dom'
import Main from './components/Main'
import Signin from './components/Signin'
import Signup from './components/Signup'
import ContentA from './components/ContentA'
import ContentB from './components/ContentB'
import { connect } from 'react-redux'
class App extends Component {
render() {
return (
<BrowserRouter>
<div className='container'>
<nav className='navbar navbar-expand-lg navbar-light bg-light'>
<Link to={'/'} className='navbar-brand'>PET Firebase Auth</Link>
<div className='collapse navbar-collapse' id='navbarSupportedContent'>
<ul className='navbar-nav mr-auto'>
<li>
<Link to={'/'} className='nav-link'>Home</Link>
</li>
<li>
<Link to={'/signin'} className='nav-link'>Login</Link>
</li>
<li>
<Link to={'/signup'} className='nav-link'>Cadastrar</Link>
</li>
<li>
<Link to={'/contentA'} className='nav-link'>Conteúdo A</Link>
</li>
<li>
<Link to={'/contentB'} className='nav-link'>Conteúdo B</Link>
</li>
</ul>
{this.props.user}
</div>
</nav>
<Switch>
<Route exact path='/' component={Main}/>
<Route path='/signin' component={Signin}/>
<Route path='/signup' component={Signup}/>
<Route path='/contentA' component={ContentA}/>
<Route path='/contentB' component={ContentB}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
function mapStateToProps(state){
return{
user: state.authReducer.user
}
}
export default connect(mapStateToProps)(App)
Importando os componentes.
Imprimindo o valor da variável do estado geral, “user”.
38. 38
Introdução
●
De posse da aplicação passada, iremos fazer
as seguintes alterações:
– Manter estado durante o refresh da página;
– Envio de e-mail para confirmação.
39. 39
Manter o Estado
●
Para manter o estado geral da aplicação,
temos duas soluções:
– Usar uma middleware dedicada (redux-persist)
– Usar o LocalStorage ou SessionStorage
●
Para essa aula, usaremos a abordagem mais
simples, o LocalStorage.
40. 40
storeConfig.js
●
Passaremos as configurações de index.js (raiz)
para um arquivo a parte.
●
Na pasta store crie o arquivo storeConfig.js
(alguns projetos gostam de chamar apenas de
store.js)
41. 41
storeConfig.js
import { createStore, applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk'
import reducer from '../store/reducers'
import firebase from '../utils/firebase'
const persistedState = loadFromLocalStorage()
const store = createStore(
reducer,
persistedState,
applyMiddleware(reduxThunk)
)
const rrfProps = {
firebase,
config: {},
dispatch: store.dispatch
}
export { store, rrfProps }
43. 43
storeConfig.js
●
Voltando ao storeConfig, você deverá adicionar funções
para salvar o estado geral e também carregá-lo.
●
O salvamento do estado geral será feito toda vez que o
mesmo é modificado.
●
O carregamento do estado geral será feito durante a
criação só estado geral (store), através do método
createStore, chamado quando a aplicação é carregada ou
recarregada.
45. 45
Verificação de E-mail
●
Outra feature interessante do Firebase é que ele permite
a verificação de e-mail.
●
Ele envia um e-mail no momento do signup e, durante o
signin você deve verificar se o usuário verificou o e-
mail.
●
Nas páginas de content você só deixa o usuário acessar
caso ele tenha verificado o e-mail (exercício ded redux).