Ana Beatriz - freeCodeCamp.org

Como criar um aplicação de lista de afazeres usando ReactJS e Firebase

Ana Beatriz — Wed, 02 Nov 2022 21:00:00 +0000

Artigo original: How to Build a TodoApp using ReactJS and Firebase

Olá, pessoal. Boas-vindas a este tutorial. Antes de começarmos, você deve estar familiarizado com os conceitos básicos do ReactJS. Se não está, eu recomendo que você veja a documentação do ReactJS (em inglês).

Usaremos os seguintes componentes na aplicação:

Como nossa aplicação ficará:

Criação de conta

Painel da aplicação de lista de afazeres

Arquitetura da aplicação:

Arquitetura da aplicação

Entendendo nossos componentes:

Você talvez esteja se perguntando o motivo de estarmos usando o Firebase nessa aplicação. Bem, ele fornece autenticação segura, um banco de dados em tempo real, um componente serverless (em português, sem servidor) e um bucket de armazenamento.

Estamos usando o Express aqui. Assim, não precisaremos lidar com as exceções do HTTP. Usaremos todos os pacotes do Firebase em nossos componentes funcionais. Não queremos deixar o client da aplicação muito grande, o que tende a deixar o processo de carregamento da interface lento.

Observação: dividirei este tutorial em quatro seções separadas. Você encontrará um git commit com o código desenvolvido para cada seção. Se você quiser ver o código completo, também, ele estará disponível neste repositório.

Seção 1: desenvolvimento das APIs de afazeres

Nesta seção, vamos desenvolver os seguintes elementos:

Configurar as funções do Firebase.
Instalar o framework do Express e criar as APIs.
Configurar o firestore como banco de dados.

O código da API implementada nesta seção pode ser encontrado neste commit.

Configurar as funções do firebase:

Vá até o Firebase console.‌‌

Firebase Console

Selecione a opção Add Project (Adicionar projeto). Depois disso, siga o passo a passo do gif abaixo para configurar o projeto do Firebase.

Configuração do Firebase

Vá até a aba Functions (Funções) e clique no botão Get Started (Iniciar):

Painel de funções

Você verá uma caixa de diálogo com instruções sobre Como configurar as funções do firebase. Vá até seu ambiente local. Abra a ferramenta de linha de comando. Para instalar as ferramentas do Firebase em sua máquina, use o comando abaixo:

npm install -g firebase-tools

Quando estiver concluído, use o comando firebase init para configurar as funções do Firebase em seu ambiente local. Selecione as seguintes opções quando estiver inicializando uma função do Firebase no ambiente local:

Quais funcionalidades do Firebase CLI você quer configurar para esta pasta? Pressione a barra de espaço para selecionar as funcionalidades. Depois, aperte Enter para confirmar suas escolhas => Functions: Configure and deploy Cloud Functions
Primeiro, vamos associar o diretório deste projeto com o projeto do Firebase… => Use an existing project
Selecione um projeto padrão do Firebase para este diretório => application_name
Com qual linguagem você gostaria de escrever as Cloud Functions? => JavaScript
Você quer usar ESLint para saber sobre prováveis bugs e estilizar? => N
Você quer instalar dependências com o npm agora? (Y/n) => Y

Depois que a configuração estiver concluída, você verá a seguinte mensagem:

✔ Firebase initialization complete!

Quando a inicialização estiver completa, a estrutura do nosso diretório ficará assim:

+-- firebase.json 
+-- functions
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json

Agora, abra o index.js no diretório functions e copie e cole o seguinte código:

const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
     response.send("Hello from Firebase!");
});

Envie o código para as funções do Firebase usando o seguinte comando:

firebase deploy

Assim que o envio concluir, você verá a seguinte linha de registro no fim da sua linha de comando:

> ✔  Deploy complete!
> Project Console: https://console.firebase.google.com/project/todoapp-/overview

Vá até Project Console > Functions. Lá, você encontrará o URL da API. O URL será assim:

https://-todoapp-.cloudfunctions.net/helloWorld

Copie esse URL e cole-o no navegador. Você receberá a seguinte resposta:

Hello from Firebase!

Isso confirma que nossa função do Firebase foi configurada corretamente.

Instalar o framework do Express:

Agora vamos instalar o framework do Express em nosso projeto usando o seguinte comando:

npm i express

Vamos criar um diretório APIs dentro do diretório functions. Dentro desse diretório, vamos criar um arquivo chamado todos.js. Remova tudo do arquivo index.js e copie e cole o seguinte código:

//index.js

const functions = require('firebase-functions');
const app = require('express')();

const {
    getAllTodos
} = require('./APIs/todos')

app.get('/todos', getAllTodos);
exports.api = functions.https.onRequest(app);

Atribuímos a função getAllTodos à rota /todos. Então, todas as chamadas à API nesta rota executarão a partir da função getAllTodos. Em seguida, vá até o arquivo todos.js no diretório APIs e vamos escrever a função getAllTodos.

//todos.js

exports.getAllTodos = (request, response) => {
    todos = [
        {
            'id': '1',
            'title': 'greeting',
            'body': 'Hello world from sharvin shah' 
        },
        {
            'id': '2',
            'title': 'greeting2',
            'body': 'Hello2 world2 from sharvin shah' 
        }
    ]
    return response.json(todos);
}

Aqui, declaramos um objeto JSON de exemplo. Depois, vamos extrai-lo a partir do Firestore. Por agora, no entanto, vamos retornar isso. Envie isso para sua função do Firebase usando o comando firebase deploy. Ele pedirá permissão para apagar o módulo helloworld – apenas aperte Enter e y.

The following functions are found in your project but do not exist in your local source code: helloWorld

Would you like to proceed with deletion? Selecting no will continue the rest of the deployments. (y/N) y

Depois de concluído, vá até Project Console > Functions. Lá, você encontrará o URL da API, que será algo como:

https://-todoapp-.cloudfunctions.net/api

Agora, vá ao navegador e copie e cole o URL, adicionando /todos no fim do URL. Você receberá o seguinte resultado:

[
        {
            'id': '1',
            'title': 'greeting',
            'body': 'Hello world from sharvin shah' 
        },
        {
            'id': '2',
            'title': 'greeting2',
            'body': 'Hello2 world2 from sharvin shah' 
        }
]

Firebase Firestore:

Usaremos o firestore do Firebase como banco de dados em tempo real para nossa aplicação. Vá até Console > Database no Firebase Console. Para configurar o firestore, siga o gif abaixo:

Configurando o Firestore

Quando a configuração terminar, clique no botão Start Collection e indique Collection ID como sendo todos. Clique em Next e receberá o seguinte pop-up:

Criando o banco de dados manualmente

Ignore a chave DocumentID. Para preencher field, type e value, veja o JSON abaixo. Atualize o valor de acordo:

{
    Field: title,
    Type: String,
    Value: Hello World
},
{
    Field: body,
    Type: String,
    Value: Hello folks I hope you are staying home...
},
{
    Field: createtAt,
    type: timestamp,
    value: Add the current date and time here
}

Pressione o botão de salvar. Você verá que a coleção e o documento foram criados. Volte para o ambiente local. Precisamos instalar firebase-admin, que possui o pacote firestore de que precisamos. Use este comando para instalá-lo:

npm i firebase-admin

Crie um diretório chamado util no diretório functions. Vá até esse diretório e crie um arquivo chamado admin.js. Neste arquivo, vamos importar o pacote firebase admin e inicializar o objeto do banco de dados do firestore. Vamos exportá-lo para que outros módulos possam usá-lo.

//admin.js

const admin = require('firebase-admin');

admin.initializeApp();

const db = admin.firestore();

module.exports = { admin, db };

Agora, vamos escrever uma API para buscar esses dados. Vá até todos.js, no diretório functions > APIs. Remova o código antigo e copie e cole o código abaixo:

//todos.js

const { db } = require('../util/admin');

exports.getAllTodos = (request, response) => {
	db
		.collection('todos')
		.orderBy('createdAt', 'desc')
		.get()
		.then((data) => {
			let todos = [];
			data.forEach((doc) => {
				todos.push({
                    todoId: doc.id,
                    title: doc.data().title,
					body: doc.data().body,
					createdAt: doc.data().createdAt,
				});
			});
			return response.json(todos);
		})
		.catch((err) => {
			console.error(err);
			return response.status(500).json({ error: err.code});
		});
};

Aqui estamos buscando todos os afazeres do banco de dados e enviando-os para o client como uma lista.

Você também pode executar a aplicação localmente usando o comando firebase serve ao invés de enviar toda vez. Quando você executar esse comando, talvez apareça um erro relacionado às credenciais. Para consertar, siga os passos mencionados abaixo:

Vá até Project Settings (ícone de engrenagem ao lado esquerdo no topo)
Vá até a aba Service Accounts
Lá embaixo, você verá a opção de Generating a new key. Clique nessa opção e você baixará um arquivo JSON.
Precisamos exportar essas credenciais para nossa seção de linha de comando. Use o comando abaixo para fazer isso:

export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[NOME_DO_ARQUIVO].json"

Depois disso, execute o comando firebase serve. Se você ainda tiver um erro, use o seguinte comando: firebase login --reauth. Ele abrirá a página para fazer registro com o Google no navegador. Depois de completar o registro, ele funcionará sem erros.

Você encontrará um URL nos registros da sua ferramenta de linha de comando quando executar o comando firebase serve. Abra esse URL no navegador e digite /todos no fim.

✔ functions[api]: http function initialized (http://localhost:5000/todoapp-//api).

Você terá o seguinte resultado em JSON no seu navegador:

[
    {
        "todoId":"W67t1kSMO0lqvjCIGiuI",
        "title":"Hello World",
        "body":"Hello folks I hope you are staying home...",
        "createdAt":{"_seconds":1585420200,"_nanoseconds":0 }
    }
]

Escrevendo outras APIs:

Está na hora de escrever outras APIs das quais precisaremos na nossa aplicação.

Crie um afazer: vá até index.js no diretório functions. Importe o método postOneTodo abaixo de getAllTodos. Atribua, também, a rota POST para esse método.

//index.js

const {
    ..,
    postOneTodo
} = require('./APIs/todos')

app.post('/todo', postOneTodo);

Vá até todos.js dentro do diretório de funções e adicione um novo método postOneTodo abaixo do método getAllTodos.

//todos.js

exports.postOneTodo = (request, response) => {
	if (request.body.body.trim() === '') {
		return response.status(400).json({ body: 'Must not be empty' });
    }
    
    if(request.body.title.trim() === '') {
        return response.status(400).json({ title: 'Must not be empty' });
    }
    
    const newTodoItem = {
        title: request.body.title,
        body: request.body.body,
        createdAt: new Date().toISOString()
    }
    db
        .collection('todos')
        .add(newTodoItem)
        .then((doc)=>{
            const responseTodoItem = newTodoItem;
            responseTodoItem.id = doc.id;
            return response.json(responseTodoItem);
        })
        .catch((err) => {
			response.status(500).json({ error: 'Something went wrong' });
			console.error(err);
		});
};

Nesse método, estamos adicionando um novo afazer em nosso banco de dados. Se os elementos do nosso conteúdo estiverem vazios, retornaremos a resposta 400. Caso contrário, vamos adicionar os dados.

Execute o comando firebase serve e abra o Postman. Crie uma requisição e selecione o método de tipo POST. Adicione o URL e um body do tipo JSON.

URL: http://localhost:5000/todoapp-//api/todo

METHOD: POST

Body: {
   "title":"Hello World",
   "body": "We are writing this awesome API"
}

Pressione o botão de enviar e você terá a seguinte resposta:

{
     "title": "Hello World",
     "body": "We are writing this awesome API",
     "createdAt": "2020-03-29T12:30:48.809Z",
     "id": "nh41IgARCj8LPWBYzjU0"
}

2. Apague um afazer: vá até index.js no diretório functions. Importe o método deleteTodo abaixo do postOneTodo. Atribua a rota DELETE para esse método também.

//index.js

const {
    ..,
    deleteTodo
} = require('./APIs/todos')

app.delete('/todo/:todoId', deleteTodo);

Vá até todos.js e adicione um novo método deleteTodo abaixo do método postOneTodo.

//todos.js

exports.deleteTodo = (request, response) => {
    const document = db.doc(`/todos/${request.params.todoId}`);
    document
        .get()
        .then((doc) => {
            if (!doc.exists) {
                return response.status(404).json({ error: 'Todo not found' })
            }
            return document.delete();
        })
        .then(() => {
            response.json({ message: 'Delete successfull' });
        })
        .catch((err) => {
            console.error(err);
            return response.status(500).json({ error: err.code });
        });
};

Nesse método, estamos excluindo um afazer do nosso banco de dados. Execute o comando firebase serve e vá até o Postman. Crie uma requisição, selecione o tipo DELETE para o método e adicione o URL.

URL: http://localhost:5000/todoapp-//api/todo/

METHOD: DELETE

Pressione o botão de enviar e você terá a seguinte resposta:

{
   "message": "Delete successfull"
}

3. Edite um afazer: vá até index.js no diretório functions. Importe o método editTodo abaixo de deleteTodo. Atribua a rota PUT a esse método.

//index.js

const {
    ..,
    editTodo
} = require('./APIs/todos')

app.put('/todo/:todoId', editTodo);

Vá até todos.js e adicione um novo método editTodo abaixo do método deleteTodo já existente.

//todos.js

exports.editTodo = ( request, response ) => { 
    if(request.body.todoId || request.body.createdAt){
        response.status(403).json({message: 'Not allowed to edit'});
    }
    let document = db.collection('todos').doc(`${request.params.todoId}`);
    document.update(request.body)
    .then(()=> {
        response.json({message: 'Updated successfully'});
    })
    .catch((err) => {
        console.error(err);
        return response.status(500).json({ 
                error: err.code 
        });
    });
};

Nesse método, estamos editando um afazer da nossa base de dados. Lembre-se de que não estamos permitindo que o usuário edite os campos todoId ou createdAt. Execute o comando firebase serve e vá até o Postman. Crie uma requisição, selecione o tipo PUT para o método e adicione o URL.

URL: http://localhost:5000/todoapp-//api/todo/

METHOD: PUT

Pressione o botão de enviar e você terá a seguinte resposta:

{  
   "message": "Updated successfully"
}

Estrutura do diretório até agora:

+-- firebase.json 
+-- functions
|   +-- API
|   +-- +-- todos.js
|   +-- util
|   +-- +-- admin.js
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

Com isso, completamos a primeira seção da aplicação. Você pode ir tomar um café, descansar e, depois, vamos trabalhar no desenvolvimento das APIs dos usuários.

Seção 2: desenvolvimento das APIs dos usuários

Nesta seção, vamos desenvolver estes componentes:

API de autenticação do usuário (login e registro).
API para obter e atualizar os detalhes do usuário.
API para atualizar a foto de perfil do usuário.
API de afazeres mais segura.

O código da API de usuários implementado nesta seção pode ser encontrado neste commit.

Então, vamos começar construindo a API de autenticação do usuário. Vá até Firebase console > Authentication.

Página de autenticação do Firebase

Clique no botão Set up sign-in method. Vamos usar e-mail e senha para a validação do usuário. Habilite a opção Email/Password.

Página de configuração do registro do Firebase

Agora, vamos criar nosso usuário manualmente. Primeiro, vamos criar a API de login. Depois, vamos criar a API de registro.

Vá até a aba Users, em Authentication, preencha os detalhes do usuário e clique no botão Add User.

Adicionando o usuário manualmente

Primeiro, precisamos instalar o pacote firebase, que consiste na biblioteca de autenticação do Firebase, usando o seguinte comando:

npm i firebase

Quando a instalação estiver concluída, vá até o diretório functions > APIs. Aqui, vamos criar um arquivo users.js. Agora, dentro de index.js, importamos um método loginUser e atribuímos a ele a rota POST.

//index.js

const {
    loginUser
} = require('./APIs/users')

// Users
app.post('/login', loginUser);

Vá até Project Settings > General. Lá, você encontrará o seguinte card:

Obtendo a configuração do Firebase

Selecione o ícone da Web e então siga o gif abaixo:

Selecione a opção Continue to console. Quando estiver concluído, você verá um JSON com as configurações do Firebase. Vá até o diretório functions > util e crie um arquivo config.js. Copie e cole o seguinte código nesse arquivo:

// config.js

module.exports = {
    apiKey: "............",
    authDomain: "........",
    databaseURL: "........",
    projectId: ".......",
    storageBucket: ".......",
    messagingSenderId: "........",
    appId: "..........",
    measurementId: "......."
};

Substitua ............ pelos valores que estão em Firebase console > Project settings > General > Your apps > Firebase SD snippet > Config.

Copie e cole o seguinte código no arquivo users.js:

// users.js

const { admin, db } = require('../util/admin');
const config = require('../util/config');

const firebase = require('firebase');

firebase.initializeApp(config);

const { validateLoginData, validateSignUpData } = require('../util/validators');

// Login
exports.loginUser = (request, response) => {
    const user = {
        email: request.body.email,
        password: request.body.password
    }

    const { valid, errors } = validateLoginData(user);
	if (!valid) return response.status(400).json(errors);

    firebase
        .auth()
        .signInWithEmailAndPassword(user.email, user.password)
        .then((data) => {
            return data.user.getIdToken();
        })
        .then((token) => {
            return response.json({ token });
        })
        .catch((error) => {
            console.error(error);
            return response.status(403).json({ general: 'wrong credentials, please try again'});
        })
};

Estamos usando o módulo signInWithEmailAndPassword do Firebase para verificar se as credenciais enviadas pelo usuário estão certas. Se estiverem, então enviamos o token desse usuário. Caso contrário, enviamos um status 403 com mensagem "wrong credentials" (credenciais incorretas).

Agora vamos criar o arquivo validators.js no diretório functions > util. Copie e cole o seguinte código nesse arquivo:

// validators.js

const isEmpty = (string) => {
	if (string.trim() === '') return true;
	else return false;
};

exports.validateLoginData = (data) => {
   let errors = {};
   if (isEmpty(data.email)) errors.email = 'Must not be empty';
   if (isEmpty(data.password)) errors.password = 'Must not be  empty';
   return {
       errors,
       valid: Object.keys(errors).length === 0 ? true : false
    };
};

Com isso, a API de login está completa. Execute o comando firebase serve e vá até o Postman. Crie uma requisição, selecione o método POST, adicione o URL e o conteúdo.

URL: http://localhost:5000/todoapp-//api/login

METHOD: POST

Body: {   
    "email":"Add email that is assigned for user in console", 
    "password": "Add password that is assigned for user in console"
}

Aperte o botão para enviar a requisição no Postman e você receberá o seguinte resultado:

{   
    "token": ".........."
}

Usaremos esse token em uma parte futura para obter os detalhes do usuário. Lembre-se de que esse token expira em 60 minutos. Para gerar um novo token, use esta API novamente.

2. API de registro de usuário:

O mecanismo padrão de autenticação do Firebase permite apenas que você armazene informações como e-mail, senha, etc. Precisamos, porém, de mais informações para identificar se esse usuário possui esse afazer para que possa haver a leitura, a atualização e a exclusão.

Para isso, vamos criar uma coleção chamada users. Nessa coleção, vamos armazenar os dados do usuário que serão mapeados para o afazer baseado no nome de usuário. Cada nome de usuário será único para todos os usuários na plataforma.

Vá até index.js. Importaremos o método signUpUser e atribuiremos a ele a rota POST.

//index.js

const {
    ..,
    signUpUser
} = require('./APIs/users')

app.post('/signup', signUpUser);

Agora, vá até validators.js e adicione o seguinte código abaixo do método validateLoginData.

// validators.js

const isEmail = (email) => {
	const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if (email.match(emailRegEx)) return true;
	else return false;
};

exports.validateSignUpData = (data) => {
	let errors = {};

	if (isEmpty(data.email)) {
		errors.email = 'Must not be empty';
	} else if (!isEmail(data.email)) {
		errors.email = 'Must be valid email address';
	}

	if (isEmpty(data.firstName)) errors.firstName = 'Must not be empty';
	if (isEmpty(data.lastName)) errors.lastName = 'Must not be empty';
	if (isEmpty(data.phoneNumber)) errors.phoneNumber = 'Must not be empty';
	if (isEmpty(data.country)) errors.country = 'Must not be empty';

	if (isEmpty(data.password)) errors.password = 'Must not be empty';
	if (data.password !== data.confirmPassword) errors.confirmPassword = 'Passowrds must be the same';
	if (isEmpty(data.username)) errors.username = 'Must not be empty';

	return {
		errors,
		valid: Object.keys(errors).length === 0 ? true : false
	};
};

Vá até users.js e adicione o seguinte código abaixo do módulo loginUser.

// users.js

exports.signUpUser = (request, response) => {
    const newUser = {
        firstName: request.body.firstName,
        lastName: request.body.lastName,
        email: request.body.email,
        phoneNumber: request.body.phoneNumber,
        country: request.body.country,
		password: request.body.password,
		confirmPassword: request.body.confirmPassword,
		username: request.body.username
    };

    const { valid, errors } = validateSignUpData(newUser);

	if (!valid) return response.status(400).json(errors);

    let token, userId;
    db
        .doc(`/users/${newUser.username}`)
        .get()
        .then((doc) => {
            if (doc.exists) {
                return response.status(400).json({ username: 'this username is already taken' });
            } else {
                return firebase
                        .auth()
                        .createUserWithEmailAndPassword(
                            newUser.email, 
                            newUser.password
                    );
            }
        })
        .then((data) => {
            userId = data.user.uid;
            return data.user.getIdToken();
        })
        .then((idtoken) => {
            token = idtoken;
            const userCredentials = {
                firstName: newUser.firstName,
                lastName: newUser.lastName,
                username: newUser.username,
                phoneNumber: newUser.phoneNumber,
                country: newUser.country,
                email: newUser.email,
                createdAt: new Date().toISOString(),
                userId
            };
            return db
                    .doc(`/users/${newUser.username}`)
                    .set(userCredentials);
        })
        .then(()=>{
            return response.status(201).json({ token });
        })
        .catch((err) => {
			console.error(err);
			if (err.code === 'auth/email-already-in-use') {
				return response.status(400).json({ email: 'Email already in use' });
			} else {
				return response.status(500).json({ general: 'Something went wrong, please try again' });
			}
		});
}

Validamos os dados do nosso usuário. Então, enviamos um e-mail e senha para o módulo createUserWithEmailAndPassword do Firebase para criar o usuário. Depois que o usuário foi criado com sucesso, salvamos as credenciais do usuário no banco de dados.

Com isso, a API de registro está completa. Execute o comando firebase serve e vá até o Postman. Crie uma requisição, selecione o método POST. Adicione o URL e o conteúdo.

URL: http://localhost:5000/todoapp-//api/signup

METHOD: POST

Body: {
   "firstName": "Add a firstName here",
   "lastName": "Add a lastName here",
   "email":"Add a email here",
   "phoneNumber": "Add a phone number here",
   "country": "Add a country here",
   "password": "Add a password here",
   "confirmPassword": "Add same password here",
   "username": "Add unique username here"
}

Aperte o botão para enviar a requisição no Postman e você receberá o seguinte resultado:

{   
    "token": ".........."
}

Agora, vá até Firebase console > Database e, lá, você verá o seguinte resultado:

Como pode ver, nossa coleção de usuário foi criada com sucesso com um documento nela.

3. Carregar a foto de perfil do usuário:

Nossos usuários serão capazes de carregar suas fotos de perfil. Para isso, estaremos usando o bucket Storage. Vá até Firebase console > Storage e clique no botão Get started. Siga o GIF abaixo para saber como configurar:

Agora, vá na aba Rules, em Storage, e atualize a permissão para o acesso ao bucket, como na imagem abaixo:

Para carregar a foto de perfil, usaremos o pacote chamado busboy. Para instalar o pacote, use o seguinte comando:

npm i busboy

Vá até index.js. Importe o método uploadProfilePhoto abaixo do método signUpUser. Também atribua a rota POST para ele.

//index.js

const auth = require('./util/auth');

const {
    ..,
    uploadProfilePhoto
} = require('./APIs/users')

app.post('/user/image', auth, uploadProfilePhoto);

Aqui, adicionamos uma camada de autenticação para que apenas um usuário associado àquela conta possa carregar a imagem. Agora, crie um arquivo chamado auth.js no diretório functions > utils. Copie e cole o seguinte código nesse arquivo:

// auth.js

const { admin, db } = require('./admin');

module.exports = (request, response, next) => {
	let idToken;
	if (request.headers.authorization && request.headers.authorization.startsWith('Bearer ')) {
		idToken = request.headers.authorization.split('Bearer ')[1];
	} else {
		console.error('No token found');
		return response.status(403).json({ error: 'Unauthorized' });
	}
	admin
		.auth()
		.verifyIdToken(idToken)
		.then((decodedToken) => {
			request.user = decodedToken;
			return db.collection('users').where('userId', '==', request.user.uid).limit(1).get();
		})
		.then((data) => {
			request.user.username = data.docs[0].data().username;
			request.user.imageUrl = data.docs[0].data().imageUrl;
			return next();
		})
		.catch((err) => {
			console.error('Error while verifying token', err);
			return response.status(403).json(err);
		});
};

Aqui, estamos usando o módulo verifyIdToken do Firebase para verificar o token. Depois disso, estaremos decodificando os detalhes do usuário e enviando-os na requisição existente.

Vá até users.js e adicione o seguinte código abaixo do método signup:

// users.js

deleteImage = (imageName) => {
    const bucket = admin.storage().bucket();
    const path = `${imageName}`
    return bucket.file(path).delete()
    .then(() => {
        return
    })
    .catch((error) => {
        return
    })
}

// Upload profile picture
exports.uploadProfilePhoto = (request, response) => {
    const BusBoy = require('busboy');
	const path = require('path');
	const os = require('os');
	const fs = require('fs');
	const busboy = new BusBoy({ headers: request.headers });

	let imageFileName;
	let imageToBeUploaded = {};

	busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
		if (mimetype !== 'image/png' && mimetype !== 'image/jpeg') {
			return response.status(400).json({ error: 'Wrong file type submited' });
		}
		const imageExtension = filename.split('.')[filename.split('.').length - 1];
        imageFileName = `${request.user.username}.${imageExtension}`;
		const filePath = path.join(os.tmpdir(), imageFileName);
		imageToBeUploaded = { filePath, mimetype };
		file.pipe(fs.createWriteStream(filePath));
    });
    deleteImage(imageFileName);
	busboy.on('finish', () => {
		admin
			.storage()
			.bucket()
			.upload(imageToBeUploaded.filePath, {
				resumable: false,
				metadata: {
					metadata: {
						contentType: imageToBeUploaded.mimetype
					}
				}
			})
			.then(() => {
				const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
				return db.doc(`/users/${request.user.username}`).update({
					imageUrl
				});
			})
			.then(() => {
				return response.json({ message: 'Image uploaded successfully' });
			})
			.catch((error) => {
				console.error(error);
				return response.status(500).json({ error: error.code });
			});
	});
	busboy.end(request.rawBody);
};

Com isso, nossa API de carregar foto de perfil está completa. Execute o comando firebase serve e vá até o Postman. Crie uma requisição, selecione o método POST, adicione o URL e, na seção de conteúdo, selecione o tipo form-data.

A requisição está protegida. Você precisará enviar o token bearer também. Para enviar o token bearer, faça login novamente, caso ele tenha expirado. Depois disso, em Postman App > Authorization tab > Type > Bearer Token, cole o token na seção do token.

URL: http://localhost:5000/todoapp-//api/user/image

METHOD: GET

Body: { REFER THE IMAGE down below }

Aperte o botão para enviar a requisição no Postman e você receberá o seguinte resultado:

{        
    "message": "Image uploaded successfully"
}

4. Obter os detalhes do usuário:

Aqui, estamos buscando os dados dos nossos usuários a partir do banco de dados. Vá até index.js, importe o método getUserDetail e atribua a rota GET.

// index.js

const {
    ..,
    getUserDetail
} = require('./APIs/users')

app.get('/user', auth, getUserDetail);

Agora, vá até users.js e adicione o seguinte código depois do módulo uploadProfilePhoto:

// users.js

exports.getUserDetail = (request, response) => {
    let userData = {};
	db
		.doc(`/users/${request.user.username}`)
		.get()
		.then((doc) => {
			if (doc.exists) {
                userData.userCredentials = doc.data();
                return response.json(userData);
			}	
		})
		.catch((error) => {
			console.error(error);
			return response.status(500).json({ error: error.code });
		});
}

Estamos usando o módulo doc().get() do Firebase para retornar os detalhes do usuário. Com isso, nossa API de obter detalhes do usuário está completa. Execute o comando firebase serve e vá até o Postman. Crie uma requisição, selecione o método GET, adicione o URL e o conteúdo.

A requisição está protegida. Então, você precisará enviar o token bearer também. Para enviar o token bearer, faça login novamente caso o token já tenha expirado.

URL: http://localhost:5000/todoapp-//api/user
METHOD: GET

Aperte o botão de enviar requisição no Postman e você receberá o seguinte resultado:

{
   "userCredentials": {
       "phoneNumber": "........",
       "email": "........",
       "country": "........",
       "userId": "........",
       "username": "........",
       "createdAt": "........",
       "lastName": "........",
       "firstName": "........"
    }
}

5. Atualizar os detalhes do usuário:

Agora, vamos adicionar a funcionalidade para atualizar os detalhes do usuário. Vá até index.js, copie e cole o seguinte código:

// index.js

const {
    ..,
    updateUserDetails
} = require('./APIs/users')

app.post('/user', auth, updateUserDetails);

Vá até users.js e adicione o módulo updateUserDetails abaixo do getUserDetails existente:

// users.js

exports.updateUserDetails = (request, response) => {
    let document = db.collection('users').doc(`${request.user.username}`);
    document.update(request.body)
    .then(()=> {
        response.json({message: 'Updated successfully'});
    })
    .catch((error) => {
        console.error(error);
        return response.status(500).json({ 
            message: "Cannot Update the value"
        });
    });
}

Aqui, estamos usando o método update do Firebase. Com isso, nossa API de atualizar os detalhes do usuário está completa. Siga o mesmo processo feito na API de obter detalhes do usuário para realizar uma requisição, com apenas uma mudança. Adicione o conteúdo na requisição e um método POST.

URL: http://localhost:5000/todoapp-//api/user

METHOD: POST

Body : {
    // You can edit First Name, last Name and country
    // We will disable other Form Tags from our UI
}

Aperte o botão para enviar a requisição no Postman e você receberá o seguinte resultado:

{
    "message": "Updated successfully"
}

6. Tornar a API de afazeres segura:

Para tornar a API de afazeres segura, de modo que apenas o usuário escolhido possa acessá-la, faremos algumas pequenas mudanças em nosso código atual. Primeiramente, vamos atualizar index.js para:

// index.js

// Todos
app.get('/todos', auth, getAllTodos);
app.get('/todo/:todoId', auth, getOneTodo);
app.post('/todo',auth, postOneTodo);
app.delete('/todo/:todoId',auth, deleteTodo);
app.put('/todo/:todoId',auth, editTodo);

Atualizamos todas as rotas de afazeres adicionando auth. Assim, todas as chamadas para a API precisarão de um token e poderão ser acessadas apenas por um usuário em particular.

Depois disso, vá até todos.js no diretório functions > APIs.

Crie a API de afazeres: abra todos.js e, no método postOneTodo, adicione a chave username, assim:

const newTodoItem = {
     ..,
     username: request.user.username,
     ..
}

2. API para obter todos os afazeres: abra todos.js e, no método getAllTodos, adicione a instrução where, assim:

db
.collection('todos')
.where('username', '==', request.user.username)
.orderBy('createdAt', 'desc')

Execute firebase serve e teste nossa API GET. Não se esqueça de mandar o token bearer. Aqui, você terá uma resposta de erro assim:

{   
    "error": 9
}

Vá até a linha de comando e você verá as seguintes linhas:

i  functions: Beginning execution of "api">  Error: 9 FAILED_PRECONDITION: The query requires an index. You can create it here: >      at callErrorFromStatus

Abra o acima e clique em Create index.

Quando o índice estiver pronto, envie a requisição novamente e você terá o seguinte resultado:

[
   {
      "todoId": "......",
      "title": "......",
      "username": "......",
      "body": "......",
      "createdAt": "2020-03-30T13:01:58.478Z"
   }
]

3. API para excluir um afazer: abra todos.js e, abaixo de deleteTodo, adicione a condição abaixo. Adicione esta condição dentro da pesquisa document.get().then(), abaixo da condição !doc.exists.

..
if(doc.data().username !== request.user.username){
     return response.status(403).json({error:"UnAuthorized"})
}

Estrutura do diretório até agora:

+-- firebase.json 
+-- functions
|   +-- API
|   +-- +-- todos.js 
|   +-- +-- users.js
|   +-- util
|   +-- +-- admin.js
|   +-- +-- auth.js
|   +-- +-- validators.js
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

Com isso, completamos o back-end da nossa API. Faça uma pausa, tome um café e, depois disso, vamos começar a construir o front-end da nossa aplicação.

Seção 3: painel do usuário

Nesta seção, vamos desenvolver estes componentes:

Configurar ReactJS e Material UI.
Criar o formulário de login e registro.
Criar a seção das contas.

O código do painel do usuário implementado nesta seção pode ser encontrado neste commit.

1. Configurar o ReactJS e o Material UI:

Vamos usar o template create-react-app. Ele nos dará uma estrutura fundamental para desenvolver a aplicação. Para instalá-lo, use o seguinte comando:

npm install -g create-react-app

Vá até a pasta da raiz do projeto onde se encontra o diretório functions. Inicialize o front-end da nossa aplicação usando o seguinte comando:

create-react-app view

Lembre-se de usar a versão v16.13.1 da biblioteca ReactJS.

Quando a instalação completar, você verá o seguinte nos registros da sua linha de comando:

cd view
  npm start
Happy hacking!

Com isso, configuramos nossa aplicação do React. Você terá a seguinte estrutura de projeto:

+-- firebase.json 
+-- functions { This Directory consists our API logic }
+-- view { This Directory consists our FrontEnd Compoenents }
+-- .firebaserc
+-- .gitignore

Agora, execute a aplicação usando o comando npm start. Vá até http://localhost:3000/ no navegador e você verá o seguinte resultado:

Agora, vamos remover todos os componentes que não são necessários. Vá até o diretório view e remova todos os arquivos que tem a palavra [ Remove ] ao lado. Para isso, veja a árvore de estrutura do diretório abaixo.

+-- README.md [ Remove ]
+-- package-lock.json
+-- package.json
+-- node_modules
+-- .gitignore
+-- public
|   +-- favicon.ico [ Remove ]
|   +-- index.html
|   +-- logo192.png [ Remove ]
|   +-- logo512.png [ Remove ]
|   +-- manifest.json
|   +-- robots.txt
+-- src
|   +-- App.css
|   +-- App.test.js
|   +-- index.js
|   +-- serviceWorker.js
|   +-- App.js
|   +-- index.css [ Remove ]
|   +-- logo.svg [ Remove ]
|   +-- setupTests.js

Vá até index.html, no diretório public, e remova as seguintes linhas:

Vá até App.js, no diretório src e substitua o código antigo pelo seguinte código:

import React from 'react';
function App() {
  return (
    
    
  );
}
export default App;

Vá até index.js e remova a seguinte importação:

import './index.css'

Não apaguei o App.css nem o estou usando nesta aplicação. Porém, se você quiser apagá-lo ou usá-lo, fique à vontade.

Vá até http://localhost:3000/ no navegador e você verá uma tela branca como resultado.

Para instalar o Material UI, vá até o diretório view, copie e cole este comando no terminal:

npm install @material-ui/core

Lembre-se de usar a versão v4.9.8 da biblioteca Material UI.

Para desenvolver o formulário de login, vá até App.js. No topo do arquivo App.js, adicione as seguintes importações:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import login from './pages/login';

Estamos usando Switch e Route para atribuir rotas para nossa aplicação de afazeres. Agora, vamos adicionar apenas a rota de /login e atribuir um componente de login a ela.

// App.js

Crie um diretório pages abaixo do diretório view existente e um arquivo chamado login.js no diretório pages.

Vamos importar os componentes do Material UI e o pacote Axios em login.js:

// login.js

// Material UI components
import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles';
import Container from '@material-ui/core/Container';
import CircularProgress from '@material-ui/core/CircularProgress';

import axios from 'axios';

Vamos adicionar a seguinte estilização para nossa página de login:

// login.js

const styles = (theme) => ({
	paper: {
		marginTop: theme.spacing(8),
		display: 'flex',
		flexDirection: 'column',
		alignItems: 'center'
	},
	avatar: {
		margin: theme.spacing(1),
		backgroundColor: theme.palette.secondary.main
	},
	form: {
		width: '100%',
		marginTop: theme.spacing(1)
	},
	submit: {
		margin: theme.spacing(3, 0, 2)
	},
	customError: {
		color: 'red',
		fontSize: '0.8rem',
		marginTop: 10
	},
	progess: {
		position: 'absolute'
	}
});

Vamos criar uma classe chamada login, que possui um formulário e uma função que lida com o envio desse formulário.

// login.js

class login extends Component {
	constructor(props) {
		super(props);

		this.state = {
			email: '',
			password: '',
			errors: [],
			loading: false
		};
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.UI.errors) {
			this.setState({
				errors: nextProps.UI.errors
			});
		}
	}

	handleChange = (event) => {
		this.setState({
			[event.target.name]: event.target.value
		});
	};

	handleSubmit = (event) => {
		event.preventDefault();
		this.setState({ loading: true });
		const userData = {
			email: this.state.email,
			password: this.state.password
		};
		axios
			.post('/login', userData)
			.then((response) => {
				localStorage.setItem('AuthToken', `Bearer ${response.data.token}`);
				this.setState({ 
					loading: false,
				});		
				this.props.history.push('/');
			})
			.catch((error) => {				
				this.setState({
					errors: error.response.data,
					loading: false
				});
			});
	};

	render() {
		const { classes } = this.props;
		const { errors, loading } = this.state;
		return (
			
				
				
					
						
					
					
						Login
					
					
						
						
						
						
							
								
									{"Don't have an account? Sign Up"}
								
							
						
						{errors.general && (
							
								{errors.general}
							
						)}
					
				
			
		);
	}
}

No fim desse arquivo, adicione a seguinte exportação:

export default withStyles(styles)(login);

Adicione o URL das nossas funções do Firebase em view > package.json assim:

Lembre-se de adicionar uma chave chamada proxy abaixo do objeto de JSON browserslist

"proxy": "https://-todoapp-.cloudfunctions.net/api"

Instale os pacotes Axios e Material Icons usando os seguintes comandos:

// Axios command:
npm i axios
// Material Icons:
npm install @material-ui/icons

Adicionamos a rota login em App.js. No arquivo login.js, criamos um componente de classe que lida com o estado e envia a requisição POST para a API de login usando o pacote Axios. Se a requisição for bem-sucedida, armazenamos o token. Se tivermos erros na resposta, simplesmente mostramos os erros na interface.

Vá até http://localhost:3000/login no navegador e você verá a seguinte interface de login.

Página de login

Tente preencher credenciais erradas ou enviar uma requisição vazia e você terá erros. Envie uma requisição válida. Vá até Developer console > Application. Você verá que o token dos usuários está armazenado no armazenamento local. Quando o login for feito com sucesso, vamos ser redirecionados para a página de início.

Console de Desenvolvedor do Google Chrome

3. Formulário de registro:

Para desenvolver o formulário de registro, vá até App.js e atualize o componente Route existente com a linha abaixo:

// App.js

Não se esqueça de importar:

// App.js

import signup from './pages/signup';

Crie um arquivo chamado signup.js no diretório pages.

Dentro de signup.js, vamos importar os pacotes Material UI e Axios:

// signup.js

import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import withStyles from '@material-ui/core/styles/withStyles';
import CircularProgress from '@material-ui/core/CircularProgress';

import axios from 'axios';

Vamos adicionar a seguinte estilização em nossa página de registro:

// signup.js


const styles = (theme) => ({
	paper: {
		marginTop: theme.spacing(8),
		display: 'flex',
		flexDirection: 'column',
		alignItems: 'center'
	},
	avatar: {
		margin: theme.spacing(1),
		backgroundColor: theme.palette.secondary.main
	},
	form: {
		width: '100%', // Fix IE 11 issue.
		marginTop: theme.spacing(3)
	},
	submit: {
		margin: theme.spacing(3, 0, 2)
	},
	progess: {
		position: 'absolute'
	}
});

Vamos criar uma classe chamada signup, que possui um formulário e uma função que lida com o envio dele.

// signup.js

class signup extends Component {
	constructor(props) {
		super(props);

		this.state = {
			firstName: '',
			lastName: '',
			phoneNumber: '',
			country: '',
			username: '',
			email: '',
			password: '',
			confirmPassword: '',
			errors: [],
			loading: false
		};
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.UI.errors) {
			this.setState({
				errors: nextProps.UI.errors
			});
		}
	}

	handleChange = (event) => {
		this.setState({
			[event.target.name]: event.target.value
		});
	};

	handleSubmit = (event) => {
		event.preventDefault();
		this.setState({ loading: true });
		const newUserData = {
			firstName: this.state.firstName,
			lastName: this.state.lastName,
			phoneNumber: this.state.phoneNumber,
			country: this.state.country,
			username: this.state.username,
			email: this.state.email,
			password: this.state.password,
			confirmPassword: this.state.confirmPassword
		};
		axios
			.post('/signup', newUserData)
			.then((response) => {
				localStorage.setItem('AuthToken', `${response.data.token}`);
				this.setState({ 
					loading: false,
				});	
				this.props.history.push('/');
			})
			.catch((error) => {
				this.setState({
					errors: error.response.data,
					loading: false
				});
			});
	};

	render() {
		const { classes } = this.props;
		const { errors, loading } = this.state;
		return (
			
				
				
					
						
					
					
						Sign up
					
					
						
							
								
							
							
								
							

							
								
							

							
								
							

							
								
							

							
								
							

							
								
							
							
								
							
						
						
						
							
								
									Already have an account? Sign in
								
							
						
					
				
			
		);
	}
}

No fim desse arquivo, adicione a seguinte exportação:

export default withStyles(styles)(signup);

A lógica para o componente Signup é a mesma do componente de login. Vá até http://localhost:3000/signup no navegador e você verá a interface de registro abaixo. Quando o registro for feito com sucesso, seremos redirecionados para a página inicial.

Formulário de registro

Console de Desenvolvedor do Chrome

4. Seção das contas:

Para construir a página de contas, vamos precisar primeiro criar nossa página inicial, que será onde carregaremos a seção da conta. Vá até App.js e atualize a seguinte rota:

// App.js

Não se esqueça de importar:

// App.js

import home from './pages/home';

Crie um arquivo chamado home.js. Esse arquivo será o índice da nossa aplicação. As seções sobre Contas e Afazeres serão carregadas com base nessa página no clique do botão.

Importe os pacotes do Material UI, o pacote Axios, nossa Conta personalizada, componentes de afazeres e middleware de autenticação.

// home.js

import React, { Component } from 'react';
import axios from 'axios';

import Account from '../components/account';
import Todo from '../components/todo';

import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import withStyles from '@material-ui/core/styles/withStyles';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
import NotesIcon from '@material-ui/icons/Notes';
import Avatar from '@material-ui/core/avatar';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import CircularProgress from '@material-ui/core/CircularProgress';

import { authMiddleWare } from '../util/auth'

Vamos definir nosso drawerWidth assim:

const drawerWidth = 240;

Vamos adicionar a seguinte estilização na nossa página inicial:

const styles = (theme) => ({
	root: {
		display: 'flex'
	},
	appBar: {
		zIndex: theme.zIndex.drawer + 1
	},
	drawer: {
		width: drawerWidth,
		flexShrink: 0
	},
	drawerPaper: {
		width: drawerWidth
	},
	content: {
		flexGrow: 1,
		padding: theme.spacing(3)
	},
	avatar: {
		height: 110,
		width: 100,
		flexShrink: 0,
		flexGrow: 0,
		marginTop: 20
	},
	uiProgess: {
		position: 'fixed',
		zIndex: '1000',
		height: '31px',
		width: '31px',
		left: '50%',
		top: '35%'
	},
	toolbar: theme.mixins.toolbar
});

Vamos criar uma classe chamada home. Essa classe terá uma chamada de API para obter a foto de perfil do usuário, primeiro e último nome. Também terá a lógica para escolher qual componente mostrar, se o dos Afazeres ou o das Contas:

class home extends Component {
	state = {
		render: false
	};

	loadAccountPage = (event) => {
		this.setState({ render: true });
	};

	loadTodoPage = (event) => {
		this.setState({ render: false });
	};

	logoutHandler = (event) => {
		localStorage.removeItem('AuthToken');
		this.props.history.push('/login');
	};

	constructor(props) {
		super(props);

		this.state = {
			firstName: '',
			lastName: '',
			profilePicture: '',
			uiLoading: true,
			imageLoading: false
		};
	}

	componentWillMount = () => {
		authMiddleWare(this.props.history);
		const authToken = localStorage.getItem('AuthToken');
		axios.defaults.headers.common = { Authorization: `${authToken}` };
		axios
			.get('/user')
			.then((response) => {
				console.log(response.data);
				this.setState({
					firstName: response.data.userCredentials.firstName,
					lastName: response.data.userCredentials.lastName,
					email: response.data.userCredentials.email,
					phoneNumber: response.data.userCredentials.phoneNumber,
					country: response.data.userCredentials.country,
					username: response.data.userCredentials.username,
					uiLoading: false,
					profilePicture: response.data.userCredentials.imageUrl
				});
			})
			.catch((error) => {
				if(error.response.status === 403) {
					this.props.history.push('/login')
				}
				console.log(error);
				this.setState({ errorMsg: 'Error in retrieving the data' });
			});
	};

	render() {
		const { classes } = this.props;		
		if (this.state.uiLoading === true) {
			return (
				
					{this.state.uiLoading && }
				
			);
		} else {
			return (
				
					
					
						
							
								TodoApp
							
						
					
					
						
						
						
							
							
								{' '}
								{this.state.firstName} {this.state.lastName}
							
						
						
						
							
								
									{' '}
									{' '}
								
								
							

							
								
									{' '}
									{' '}
								
								
							

							
								
									{' '}
									{' '}
								
								
							
						
					

					{this.state.render ?  : }
				
			);
		}
	}
}

Aqui no código, você verá que authMiddleWare(this.props.history); é usado. Esse middleware verifica se authToken é nulo. Se for, ele direcionará o usuário de volta para login.js. Isso foi adicionado para que nosso usuário não possa acessar a rota / sem se registrar ou realizar login. No fim desse arquivo, adicione a seguinte exportação:

export default withStyles(styles)(home);

Agora, você deve estar se perguntando o que este código em home.js faz?

{this.state.render ?  : }

Ele está verificando o estado de renderização que estamos definindo no clique do botão. Vamos criar o diretório component e, nesse diretório, criaremos dois arquivos: account.js e todo.js.

Vamos criar um diretório chamado util e um arquivo chamado auth.js nesse diretório. Copie e cole o seguinte código em auth.js:

export const authMiddleWare = (history) => {
    const authToken = localStorage.getItem('AuthToken');
    if(authToken === null){
        history.push('/login')
    }
}

Por agora, dentro do arquivo todo.js, vamos apenas escrever uma classe que renderiza o texto Hello I am todo. Trabalharemos em nossos afazeres na próxima seção:

import React, { Component } from 'react'

import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';

const styles = ((theme) => ({
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
    },
    toolbar: theme.mixins.toolbar,
    })
);

class todo extends Component {
    render() {
        const { classes } = this.props;
        return (
            
            
            
                Hello I am todo
            
            
        )
    }
}

export default (withStyles(styles)(todo));

Agora, é hora de fazer a seção das contas. Importe o Material UI, o clsx, o axios e o authmiddleWare em account.js.

// account.js

import React, { Component } from 'react';

import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { Card, CardActions, CardContent, Divider, Button, Grid, TextField } from '@material-ui/core';

import clsx from 'clsx';

import axios from 'axios';
import { authMiddleWare } from '../util/auth';

Vamos adicionar a seguinte estilização à nossa página de contas:

// account.js

const styles = (theme) => ({
	content: {
		flexGrow: 1,
		padding: theme.spacing(3)
	},
	toolbar: theme.mixins.toolbar,
	root: {},
	details: {
		display: 'flex'
	},
	avatar: {
		height: 110,
		width: 100,
		flexShrink: 0,
		flexGrow: 0
	},
	locationText: {
		paddingLeft: '15px'
	},
	buttonProperty: {
		position: 'absolute',
		top: '50%'
	},
	uiProgess: {
		position: 'fixed',
		zIndex: '1000',
		height: '31px',
		width: '31px',
		left: '50%',
		top: '35%'
	},
	progess: {
		position: 'absolute'
	},
	uploadButton: {
		marginLeft: '8px',
		margin: theme.spacing(1)
	},
	customError: {
		color: 'red',
		fontSize: '0.8rem',
		marginTop: 10
	},
	submitButton: {
		marginTop: '10px'
	}
});

Vamos criar um componente de classe chamado account. Por agora, apenas copie e cole o seguinte código:

// account.js

class account extends Component {
	constructor(props) {
		super(props);

		this.state = {
			firstName: '',
			lastName: '',
			email: '',
			phoneNumber: '',
			username: '',
			country: '',
			profilePicture: '',
			uiLoading: true,
			buttonLoading: false,
			imageError: ''
		};
	}

	componentWillMount = () => {
		authMiddleWare(this.props.history);
		const authToken = localStorage.getItem('AuthToken');
		axios.defaults.headers.common = { Authorization: `${authToken}` };
		axios
			.get('/user')
			.then((response) => {
				console.log(response.data);
				this.setState({
					firstName: response.data.userCredentials.firstName,
					lastName: response.data.userCredentials.lastName,
					email: response.data.userCredentials.email,
					phoneNumber: response.data.userCredentials.phoneNumber,
					country: response.data.userCredentials.country,
					username: response.data.userCredentials.username,
					uiLoading: false
				});
			})
			.catch((error) => {
				if (error.response.status === 403) {
					this.props.history.push('/login');
				}
				console.log(error);
				this.setState({ errorMsg: 'Error in retrieving the data' });
			});
	};

	handleChange = (event) => {
		this.setState({
			[event.target.name]: event.target.value
		});
	};

	handleImageChange = (event) => {
		this.setState({
			image: event.target.files[0]
		});
	};

	profilePictureHandler = (event) => {
		event.preventDefault();
		this.setState({
			uiLoading: true
		});
		authMiddleWare(this.props.history);
		const authToken = localStorage.getItem('AuthToken');
		let form_data = new FormData();
		form_data.append('image', this.state.image);
		form_data.append('content', this.state.content);
		axios.defaults.headers.common = { Authorization: `${authToken}` };
		axios
			.post('/user/image', form_data, {
				headers: {
					'content-type': 'multipart/form-data'
				}
			})
			.then(() => {
				window.location.reload();
			})
			.catch((error) => {
				if (error.response.status === 403) {
					this.props.history.push('/login');
				}
				console.log(error);
				this.setState({
					uiLoading: false,
					imageError: 'Error in posting the data'
				});
			});
	};

	updateFormValues = (event) => {
		event.preventDefault();
		this.setState({ buttonLoading: true });
		authMiddleWare(this.props.history);
		const authToken = localStorage.getItem('AuthToken');
		axios.defaults.headers.common = { Authorization: `${authToken}` };
		const formRequest = {
			firstName: this.state.firstName,
			lastName: this.state.lastName,
			country: this.state.country
		};
		axios
			.post('/user', formRequest)
			.then(() => {
				this.setState({ buttonLoading: false });
			})
			.catch((error) => {
				if (error.response.status === 403) {
					this.props.history.push('/login');
				}
				console.log(error);
				this.setState({
					buttonLoading: false
				});
			});
	};

	render() {
		const { classes, ...rest } = this.props;
		if (this.state.uiLoading === true) {
			return (
				
					
					{this.state.uiLoading && }
				
			);
		} else {
			return (
				
					
					
						
							
								
									
										{this.state.firstName} {this.state.lastName}
									
									
									

									{this.state.imageError ? (
										
											{' '}
											Wrong Image Format || Supported Format are PNG and JPG
										
									) : (
										false
									)}
								
							
							
						
						
					

					

					
						
							
							
								
									
										
									
									
										
									
									
										
									
									
										
									
									
										
									
									
										
									
								
							
							
							
						
					
					
				
			);
		}
	}
}

No fim desse arquivo, adicione a seguinte exportação:

export default withStyles(styles)(account);

Em account.js, há vários componentes sendo usados. Vamos ver como está nossa aplicação. Depois disso, vamos explicar todos os componentes que estão sendo usados e o motivo de estarem sendo usados.

Vá até o navegador. Se o token expirou, ele redirecionará você para a página de login. Adicione seus detalhes e faça login novamente. Quando fizer isso, vá até a aba Account e você verá a seguinte interface:

Seção da conta

Há 3 funções que lidam com questões diferentes na seção das contas:

componentWillMount: este é o método incorporado ao ciclo de vida do React. Estamos usando esse método para carregar os dados antes do ciclo de vida de renderização e para atualizar nossos valores do estado.
ProfilePictureUpdate: esta é nossa função personalizada que estamos usando para lidar com o clique do usuário no botão de carregar foto. Ela enviará os dados para um servidor e recarregará a página para mostrar a nova foto de perfil do usuário.
updateFormValues: esta também é nossa função personalizada que lida com a atualização dos detalhes do usuário. Aqui, o usuário pode atualizar seu primeiro nome, sobrenome e país. Não estamos permitindo a atualização de e-mail e nome de usuário, pois nossa lógica do back-end depende dessas chaves.

Além dessas três funções, há uma página de formulário estilizada. Aqui está a estrutura do diretório até aqui dentro da pasta view:

+-- public 
+-- src
|   +-- components
|   +-- +-- todo.js
|   +-- +-- account.js
|   +-- pages
|   +-- +-- home.js
|   +-- +-- login.js
|   +-- +-- signup.js
|   +-- util
|   +-- +-- auth.js 
|   +-- README.md
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

Com isso, completamos nosso painel de contas. Agora tome um café, faça uma pausa e, na próxima seção, vamos criar o painel de afazeres.

Seção 4: painel de afazeres

Nesta seção, vamos desenvolver a interface para essas funcionalidades do painel de afazeres:

Adicionar um afazer
Obter todos os afazeres
Excluir um afazer
Editar um afazer
Obter um afazer
Aplicar o tema

O código do painel de afazeres implementado nesta seção pode ser encontrado neste commit.

Vá até todos.js no diretório components. Adicione as seguintes importações às importações existentes:

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from '@material-ui/core/CardContent';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';

import axios from 'axios';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { authMiddleWare } from '../util/auth';

Precisamos, também, adicionar os seguintes elementos do CSS nos componentes de estilo abaixo:

const styles = (theme) => ({
	.., // Existing CSS elements
	title: {
		marginLeft: theme.spacing(2),
		flex: 1
	},
	submitButton: {
		display: 'block',
		color: 'white',
		textAlign: 'center',
		position: 'absolute',
		top: 14,
		right: 10
	},
	floatingButton: {
		position: 'fixed',
		bottom: 0,
		right: 0
	},
	form: {
		width: '98%',
		marginLeft: 13,
		marginTop: theme.spacing(3)
	},
	toolbar: theme.mixins.toolbar,
	root: {
		minWidth: 470
	},
	bullet: {
		display: 'inline-block',
		margin: '0 2px',
		transform: 'scale(0.8)'
	},
	pos: {
		marginBottom: 12
	},
	uiProgess: {
		position: 'fixed',
		zIndex: '1000',
		height: '31px',
		width: '31px',
		left: '50%',
		top: '35%'
	},
	dialogeStyle: {
		maxWidth: '50%'
	},
	viewRoot: {
		margin: 0,
		padding: theme.spacing(2)
	},
	closeButton: {
		position: 'absolute',
		right: theme.spacing(1),
		top: theme.spacing(1),
		color: theme.palette.grey[500]
	}
});

Vamos adicionar a transição para o pop-up da caixa de diálogo:

const Transition = React.forwardRef(function Transition(props, ref) {
	return ;
});

Remova a classe todo abaixo e copie e cole a seguinte classe:

class todo extends Component {
	constructor(props) {
		super(props);

		this.state = {
			todos: '',
			title: '',
			body: '',
			todoId: '',
			errors: [],
			open: false,
			uiLoading: true,
			buttonType: '',
			viewOpen: false
		};

		this.deleteTodoHandler = this.deleteTodoHandler.bind(this);
		this.handleEditClickOpen = this.handleEditClickOpen.bind(this);
		this.handleViewOpen = this.handleViewOpen.bind(this);
	}

	handleChange = (event) => {
		this.setState({
			[event.target.name]: event.target.value
		});
	};

	componentWillMount = () => {
		authMiddleWare(this.props.history);
		const authToken = localStorage.getItem('AuthToken');
		axios.defaults.headers.common = { Authorization: `${authToken}` };
		axios
			.get('/todos')
			.then((response) => {
				this.setState({
					todos: response.data,
					uiLoading: false
				});
			})
			.catch((err) => {
				console.log(err);
			});
	};

	deleteTodoHandler(data) {
		authMiddleWare(this.props.history);
		const authToken = localStorage.getItem('AuthToken');
		axios.defaults.headers.common = { Authorization: `${authToken}` };
		let todoId = data.todo.todoId;
		axios
			.delete(`todo/${todoId}`)
			.then(() => {
				window.location.reload();
			})
			.catch((err) => {
				console.log(err);
			});
	}

	handleEditClickOpen(data) {
		this.setState({
			title: data.todo.title,
			body: data.todo.body,
			todoId: data.todo.todoId,
			buttonType: 'Edit',
			open: true
		});
	}

	handleViewOpen(data) {
		this.setState({
			title: data.todo.title,
			body: data.todo.body,
			viewOpen: true
		});
	}

	render() {
		const DialogTitle = withStyles(styles)((props) => {
			const { children, classes, onClose, ...other } = props;
			return (
				
					{children}
					{onClose ? (
						
							
						
					) : null}
				
			);
		});

		const DialogContent = withStyles((theme) => ({
			viewRoot: {
				padding: theme.spacing(2)
			}
		}))(MuiDialogContent);

		dayjs.extend(relativeTime);
		const { classes } = this.props;
		const { open, errors, viewOpen } = this.state;

		const handleClickOpen = () => {
			this.setState({
				todoId: '',
				title: '',
				body: '',
				buttonType: '',
				open: true
			});
		};

		const handleSubmit = (event) => {
			authMiddleWare(this.props.history);
			event.preventDefault();
			const userTodo = {
				title: this.state.title,
				body: this.state.body
			};
			let options = {};
			if (this.state.buttonType === 'Edit') {
				options = {
					url: `/todo/${this.state.todoId}`,
					method: 'put',
					data: userTodo
				};
			} else {
				options = {
					url: '/todo',
					method: 'post',
					data: userTodo
				};
			}
			const authToken = localStorage.getItem('AuthToken');
			axios.defaults.headers.common = { Authorization: `${authToken}` };
			axios(options)
				.then(() => {
					this.setState({ open: false });
					window.location.reload();
				})
				.catch((error) => {
					this.setState({ open: true, errors: error.response.data });
					console.log(error);
				});
		};

		const handleViewClose = () => {
			this.setState({ viewOpen: false });
		};

		const handleClose = (event) => {
			this.setState({ open: false });
		};

		if (this.state.uiLoading === true) {
			return (
				
					
					{this.state.uiLoading && }
				
			);
		} else {
			return (
				
					

					
						
					
					
						
							
								
									
								
								
									{this.state.buttonType === 'Edit' ? 'Edit Todo' : 'Create a new Todo'}
								
								
							
						

						
							
								
									
								
								
									
								
							
						
					

					
						{this.state.todos.map((todo) => (
							
								
									
										
											{todo.title}
										
										
											{dayjs(todo.createdAt).fromNow()}
										
										
											{`${todo.body.substring(0, 65)}`}
										
									
									
										
										
										
									
								
							
						))}
					

					
						
							{this.state.title}
						
						
							
						
					
				
			);
		}
	}
}

No fim desse arquivo, adicione a seguinte exportação:

export default withStyles(styles)(todo);

Primeiro, vamos entender como nossa interface funciona e, depois disso, vamos entender o código. Vá até o navegador e você verá a seguinte interface:

Painel de afazeres

Clique no botão Add, no canto inferior direito, e verá a seguinte tela:

Adicionar afazer

Adicione o título do afazer e os detalhes. Depois, pressione o botão de envio. Você verá a seguinte tela:

Painel de afazeres

Depois desse clique no botão de visualização, você poderá ver os detalhes completos do afazer:

Ver afazer único

Clique no botão Edit e você poderá editar o afazer:

Editar afazer

Clique no botão de exclusão e você poderá excluir o afazer. Agora que sabemos como o painel funciona, entenderemos os componentes usados.

1. Adicionar afazer: para adicionar um afazer, usaremos o componente Dialogue do Material UI. Esse componente implementa a funcionalidade hook. Usamos classes. Por isso, removeremos essa funcionalidade.

// This sets the state to open and buttonType flag to add:
const handleClickOpen = () => {
      this.setState({
           todoId: '',
           title: '',
           body: '',
           buttonType: '',
           open: true
     });
};

// This sets the state to close:
const handleClose = (event) => {
      this.setState({ open: false });
};

Além disso, também mudaremos a posição do botão de adicionar afazeres.

// Position our button
floatingButton: {
    position: 'fixed',
    bottom: 0,
    right: 0
},

Agora, substituiremos a tag list por form dentro deste Dialogue. Isso nos ajudará a adicionar o novo afazer.

// Show Edit or Save depending on buttonType state
{this.state.buttonType === 'Edit' ? 'Save' : 'Submit'}

// Our Form to add a todo

	
		
        // TextField here
        
        
        // TextField here

A função handleSubmit consiste de lógica para realizar a leitura do estado buttonType. Se o estado for uma string vazia (""), realizará um post na API de adicionar afazer. Se o estado for um Edit, realizará um update na API editar afazer.

2. Obter afazeres: para mostrar os afazeres vamos usar o Grid container e, dentro dele, colocaremos o Grid item. Dentro desse item, vamos usar um componente Card para mostrar os dados.


    {this.state.todos.map((todo) => (
	
	
	    
        // Here will show Todo with view, edit and delete button
        
    
    ))}

Usamos a função map para mostrar um afazer de cada vez, à medida que a API envia os afazeres como uma lista. Vamos usar a função de ciclo de vida componentWillMount para obter e enviar o estado antes da renderização ser executada. Há três botões (view, edit e delete). Vamos precisar de três funções para lidar com a operação quando o botão for clicado. Vamos aprender sobre esses botões nas respectivas subseções.

3. Editar afazer: para editar o afazer, estamos reutilizando o código de pop-up de diálogo que está sendo usado para adicionar afazeres. Para diferenciar entre os cliques dos botões, usaremos um estado buttonType. Para adicionar um afazer, o estado buttonType é (""). Para editar um afazer, ele é Edit.

handleEditClickOpen(data) {
	this.setState({
		..,
		buttonType: 'Edit',
		..
	});
}

No método handleSubmit, lemos o estado buttonType e enviamos a requisição de acordo.

4. Excluir afazer: quando esse botão é clicado, enviamos o afazer como objeto para nosso deleteTodoHandler. Então, ele envia a requisição para o back-end.

5. Visualizar afazer: quando mostramos os dados, mostramos apenas uma parte deles. Assim, o usuário terá uma ideia sobre o assunto do afazer. Se, no entanto, o usuário quiser saber mais sobre ele, é preciso clicar no botão de visualizar.

Para isso, vamos usar o diálogo customizado. Dentro dele, usamos DialogTitle e DialogContent. Isso mostra nosso título e conteúdo. No DialougeContent, vamos usar o formulário para mostrar o conteúdo que o usuário postou (essa é uma solução que encontrei – há muitas e você pode tentar a que quiser).

// This is used to remove the underline of the Form
InputProps={{
       disableUnderline: true
}}

// This is used so that user cannot edit the data
readonly

6. Aplicar o tema: este é o último passo da nossa aplicação. Vamos aplicar um tema a ela. Para isso, usaremos createMuiTheme e ThemeProvider, do Material UI. Copie e cole o seguinte código em App.js:

import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

const theme = createMuiTheme({
	palette: {
		primary: {
			light: '#33c9dc',
			main: '#FF5722',
			dark: '#d50000',
			contrastText: '#fff'
		}
	}
});

function App() {
	return (
        
        // Router and switch will be here.
        
    );
}

Esquecemos de aplicar um tema para nosso botão de todo.js, em CardActions. Adicione a tag color aos botões de visualização, edição e exclusão.

Vá até o navegador e você verá que tudo está igual. A única diferença é a cor da aplicação.

TodoApp depois de aplicar o tema

Assim, chegamos ao final do projeto! Criamos uma aplicação de afazeres (TodoApp) usando o ReactJS e o Firebase. Se chegou até aqui, meus parabéns por ter conseguido.

Fique à vontade para se conectar com o autor pelo Twitter e pelo Github.

Control-Alt-Delete no Mac - como abrir o Gerenciador de tarefas em seu Macbook

Ana Beatriz — Sun, 30 Oct 2022 21:00:00 +0000

Artigo original: Control Alt Delete on a Mac - How to Open Task Manager on your Macbook

Acontece com todos nós: estamos trabalhando em um projeto importante e nosso computador trava. Também ocorre em um programa que estamos usando e que apenas para de responder. O que fazer nessa situação?

Se você possui uma máquina Windows, você pode simplesmente usar a sequência CTRL+ALT+DEL para sair de qualquer programa que está com comportamento ruim. Isso, no entanto, não funciona no Mac.

Não se preocupe - há uma maneira muito simples de forçar a saída de um programa no Mac (e vários outros métodos que pode guardar na manga também). Vamos aprender quais são.

Como forçar a saída de um programa em um Mac

A maneira mais fácil de forçar a saída de um programa em seu Mac é usar uma sequência simples de teclas, similar ao CTRL+ALT+DELETE. Simplesmente pressione COMMAND+OPTION+ESC, nesta ordem. Aqui está a localização destas teclas em um teclado típico do Mac:

Isso mostrará uma janela semelhante à do Gerenciador de tarefas do Windows, assim:

Command+Option+ESC traz você para essa tela

Então, basta selecionar o programa que não está respondendo e pressionar "Force Quit" (Forçar Parada). Isso vai interromper a execução daquele programa.

Observação: como você estará forçando aquele programa a parar no meio de qualquer coisa que esteja fazendo, os dados não salvos talvez sejam perdidos. Confira se você habilitou o salvamento automático, faça backup dos seus projetos frequentemente e deixe seu computador limpo e atualizado.

Um método alternativo

Por que aprender apenas uma maneira de forçar a saída quando você pode aprender duas? Clique no logotipo da Apple na parte superior esquerda da sua tela na barra do menu. Role para baixo até "Force Quit" (Forçar Parada) e você verá o mesmo "gerenciador de tarefas".

Ao lado de Force Quit você verá o nome do programa que estiver usando atualmente

É simples assim!

Agora que lidou com o programa que travou, você pode voltar ao trabalho. :)

Como usar o padrão Provider no Flutter

Ana Beatriz — Sun, 23 Oct 2022 21:00:00 +0000

Artigo original: How to Use the Provider Pattern in Flutter

Neste artigo, vamos conferir o padrão provider no Flutter. Alguns outros padrões, como a Arquitetura BLoC, usam o padrão provider internamente. Ele, no entanto, é muito fácil de aprender e possui muito menos código repetitivo.

Neste artigo, vamos usar o aplicativo padrão de Contador fornecido pelo Flutter e refatorá-lo para que use o padrão provider.

Se quiser saber o que a equipe do Flutter tem a dizer sobre o padrão provider, confira essa palestra de 2019 na sede do Google (vídeo em inglês).

Se quiser aprender mais sobre a arquitetura BLoC, confira aqui (texto em inglês).

Começando

Crie um projeto do Flutter e coloque nele o nome que quiser.

Primeiro, precisamos remover todos os comentários. Assim, teremos um código mais limpo para trabalhar:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Agora, adicionamos a dependência para o padrão provider no arquivo pubspec.yaml. Atualmente, a versão mais recente é a 4.1.2.

O arquivo pubspec.yaml ficará assim:

name: provider_pattern_explained
description: A new Flutter project.

publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.1.2

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

O aplicativo padrão é basicamente um widget com monitoramento de estado, que é criado novamente toda vez que você clica em FloatingActionButton (que, por sua vez, chama setState()).

Agora, vamos convertê-lo em um widget sem monitoramento de estado.

Criando o Provider

Vamos criar nosso provider. Ele será a fonte da verdade do nosso aplicativo. É onde armazenaremos nosso state (estado) que, neste caso, é a contagem atual.

Crie uma classe chamada Counter e adicione a variável count:

import 'package:flutter/material.dart';

class Counter {
  var _count = 0;
}

Para convertê-la em uma classe provider, estenda ChangeNotifier, do pacote material.dart. Isso nos fornece o método notifyListeners() e notificará todas as funções ouvintes quando mudarmos um valor.

Depois, adicione um método para incrementar o contador:

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  var _count = 0;
  void incrementCounter() {
    _count += 1;
  }
}

No fim desse método, chamaremos notifyListeners(). Isso acionará uma mudança em todo o aplicativo para qualquer widget que esteja ouvindo.

Esta é a beleza do padrão provider no Flutter – você não precisa se importar com despachar manualmente para streams.

Por fim, crie uma função getter para retornar o valor do contador. Vamos usá-la para mostrar o valor mais atual:

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  var _count = 0;
  int get getCounter {
    return _count;
  }

  void incrementCounter() {
    _count += 1;
    notifyListeners();
  }
}

Ouvindo cliques no botão

Agora que temos o provider configurado, podemos continuar e usá-lo em nosso widget principal.

Primeiramente, vamos converter MyHomePage para um widget sem monitoramento de estado. Vamos ter que remover a chamada para a função setState(), pois ela está disponível apenas em um StatefulWidget (widget com monitoramento de estado):

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  int _counter = 0;
  final String title;
  MyHomePage({this.title});
  void _incrementCounter() {}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Com isso feito, podemos usar o padrão provider no Flutter para indicar e obter o valor do contador. A cada clique no botão, precisamos incrementar o valor do contador em 1.

Então, no método _incrementCounter (que é chamado quando o botão é pressionado), adicione esta linha:

Provider.of(context, listen: false).incrementCounter();

O que acontece aqui? Você pediu para o Flutter subir na árvore de widget e encontrar o primeiro lugar onde Counter é fornecido (mostrarei como fazer isso na próxima seção). É isso que Provider.of() faz.

Os genéricos (valores dentro dos <>) dizem ao Flutter qual tipo de provider procurar. Então, o Flutter sobe na árvore do widget até encontrar o valor fornecido. Se o valor não estiver fornecido em nenhum lugar, então uma exceção é criada.

Finalmente, quando você já tem o provider, pode chamar qualquer método a partir dele. Aqui, chamamos nosso método de incrementCounter.

Também precisamos de um contexto (em inglês, context). Então, aceitamos context como argumento e modificamos o método onPressed para que também passe context:

void _incrementCounter(BuildContext context) {
  Provider.of(context, listen: false).incrementCounter();
}

Observação: indicamos listen como falso, pois não precisamos escutar nenhum valor aqui. Estamos apenas despachando uma ação que será executada.

Fornecendo o Provider

O padrão provider no Flutter procurará o último valor fornecido. O diagrama abaixo ajudará você a entender melhor.

Neste diagrama, o objeto A VERDE estará disponível para o resto dos elementos abaixo dele, que são B, C, D, E, e F.

Agora, suponha que queremos adicionar funcionalidade ao aplicativo e criamos outro provider, Z. Z precisa ser usado por E e F.

Onde é o melhor lugar para adicioná-lo?

Podemos adicioná-lo na raiz abaixo de A. Ficaria assim:

Tradução da frase: "Funciona, mas não é muito eficiente :("

Esse método, porém, não é muito eficiente.

O Flutter passará por todos os widgets abaixo e, então, finalmente, subirá até a raiz. Se você possui árvores de widget muito longas – algo que você provavelmente terá em um aplicativo em produção – não é uma boa ideia colocar tudo na raiz.

Ao invés disso, podemos olhar para o denominador comum de E e F, que é C. Se colocamos Z abaixo de E e F, dará certo.

Tradução da frase: "Funciona, mas será que podemos melhorar ainda mais?"

Se quisermos adicionar outro objeto X, requerido por E e F? Faremos a mesma coisa. Note, porém, como a árvore continua crescendo.

Tradução das frases: "E assim por diante. Uma árvore muito longa"

Há uma maneira melhor de gerenciar isso. Que tal se providenciarmos todos os objetos em um nível?

Isso é perfeito. Será a maneira de implementarmos nosso padrão provider no Flutter. Usaremos algo chamado MultiProvider, que nos deixa declarar diversos providers em um nível.

Deixaremos MultiProvider cercar o widget MaterialApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: "AndroidVille Provider Pattern"),
      ),
    );
  }
}

Com isso, fornecemos o provider para nossa árvore de widget e podemos usá-lo em qualquer lugar abaixo deste nível da árvore.

Há apenas mais uma coisa a fazer: precisamos atualizar o valor que é mostrado.

Atualizando o texto

Para atualizar o texto, obtenha o provider na função do widget MyHomePage. Vamos usar o getter que criamos para obter o valor mais recente.

Então, simplesmente adicione esse valor ao widget de texto abaixo.

Terminamos! Nosso arquivo main.dart ficará assim no final:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_pattern_explained/counter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: "AndroidVille Provider Pattern"),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({this.title});
  void _incrementCounter(BuildContext context) {
    Provider.of(context, listen: false).incrementCounter();
  }

  @override
  Widget build(BuildContext context) {
    var counter = Provider.of(context).getCounter;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _incrementCounter(context),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Observação: não definimos listen:false nesse caso, pois queremos ficar sabendo de qualquer atualização no valor do contador.

Aqui está o código fonte no GitHub se você quiser ver: https://github.com/Ayusch/Flutter-Provider-Pattern.

Peço que informe se tiver qualquer problema.

Boas-vindas à AndroidVille :)

A AndroidVille é uma comunidade de desenvolvedores para dispositivos móveis onde compartilhamos conhecimento relacionado com o desenvolvimento para Android, desenvolvimento em Flutter, tutoriais sobre React Native, Java, Kotlin e muito mais.

Clique neste link para juntar-se ao SLACK do AndroidVille. É totalmente gratuito!

Se você gostou deste artigo, fique à vontade para compartilhá-lo no Facebook ou LinkedIn. Você pode seguir o autor no LinkedIn, no Twitter, no Quora e no Medium, onde ele responde perguntas relacionadas ao desenvolvimento para dispositivos móveis, Android e Flutter.

Como criar uma aplicação em React Native e integrá-la com Firebase

Ana Beatriz — Wed, 05 Oct 2022 09:34:00 +0000

Artigo original: How to Build a React Native App and Integrate It with Firebase

Neste tutorial, vamos construir uma aplicação em React Native integrada ao Firebase no back-end. A aplicação também terá suporte da React Native CLI e da Expo CLI.

Este tutorial de React Native com Firebase abrangerá as funcionalidades principais, como autenticação, registro e operações CRUD no banco de dados (Firestore).

Você também pode baixar o código completo no GitHub se quiser conferi-lo.

Este tutorial percorrerá os detalhes por meio das seguintes seções:

Criação de um projeto com o Firebase
Criação e configuração de uma aplicação em React Native
Configuração da estrutura de pastas, rotas e navegação
Implementação da interface para telas de login, registro e início
Registro com Firebase Auth
Login com Firebase Auth
Persistência de credenciais de login
Escrita e leitura de dados a partir do Firebase Firestore

Sem mais delongas, vamos começar a construir o projeto em React Native com Firebase. A aplicação final ficará assim:

1. Criação de um projeto com o Firebase

Visite Firebase.com e crie uma conta. Quando fizer login, você poderá criar um projeto no Firebase Console.

Crie uma conta no Firebase.com
Crie um projeto no Firebase Console
Habilite o método de autenticação com e-mail e senha em Firebase Console -> Authentication -> Sign-in method

Crie uma aplicação para o iOS, com o ID de aplicação com.reactnativefirebase

(Opcional) Crie uma aplicação do Android com o nome de pacote com.reactnativefirebase
Baixe no seu computador o arquivo de configuração gerado no próximo passo (GoogleService-Info.plist para iOS e google-services.json para Android)

O Firebase permite construir aplicações sem o back-end. É um produto que executa por dentro da Google Cloud e permite que os desenvolvedores construam aplicações para a web e dispositivos móveis sem precisarem de seus próprios servidores.

Isso faz você economizar muito tempo, por não haver a necessidade de escrever código para o back-end. Também é muito escalável, sendo sustentado pela infraestrutura do Google.

No Firebase, você poderá armazenar tudo que é necessário para sua aplicação – usuários, dados, arquivos, tokens para notificações por push, etc. Toda essa informação fica disponível nos clients para dispositivos móveis a partir dos SDKs do Firebase, que são compatíveis com o React Native. Isso significa que todas as interações com o back-end ficam abstraídas e encapsuladas no SDK. Então, os desenvolvedores para dispositivos móveis não precisam se preocupar com chamadas para API, análise de dados, gerenciamento de sockets e outros aspectos.

2. Criação e configuração de uma aplicação em React Native

Vamos deixar nossa aplicação do React Native com Firebase compatível com a Expo CLI e a React Native CLI.‌‌ Vamos usar o Expo por agora, pois facilita a visualização da aplicação. Não usaremos, no entanto, bibliotecas específicas do Expo. Assim, o código fonte será usado de maneira simples em qualquer aplicação do React Native, não importando no que ele está baseado. ‌‌Vamos usar o SDK Web do Firebase, que é compatível com o Expo e com a React Native CLI, além de ter suporte direto do Google.

Se você quiser usar react-native-firebase como alternativa, fique à vontade para instalar e configurar (o código permanecerá o mesmo). Saiba que não recomendamos isso por alguns motivos:

ele não possui suporte direto do Google, o que torna a manutenção mais difícil, dado que é uma camada extra que pode causar bugs e
ele não funciona com o Expo, o que pode ser um problema para muitos desenvolvedores.

Os passos a seguir também estão na documentação oficial do React Native, em Como configurar seu ambiente de desenvolvimento (em inglês).

Instale a Expo CLI

No seu terminal, execute

npm install -g expo-cli

Crie uma aplicação do React Native executando

expo init react-native-firebase

Para o template, escolha Managed Workflow — Blank

Inicie a aplicação executando

yarn ios
// ou
yarn android

O comando também fornecerá a você um QR Code que pode ser escaneado usando a aplicação de Camera, no iOS, ou o Expo, no Android.

Ótimo. Agora temos uma nova aplicação do React Native, executando no iOS e no Android. Vamos começar conectando-a ao nosso back-end usando o Firebase.

Adicione o SDK do Firebase no projeto React Native

yarn add firebase

Adicione a biblioteca React Native Navigation executando

yarn add @react-navigation/native && yarn add @react-navigation/stack && expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Adicione vários componentes à interface e pacotes que serão usados no projeto

yarn add react-native-keyboard-aware-scroll-view base-64

Crie um arquivo de configuração para o Firebase

mkdir src src/firebase && touch src/firebase/config.js

Adicione a configuração do seu firebase em src/firebase/config.js:

import * as firebase from 'firebase';
import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_KEY_HERE_AIzaSyAOWH',
  authDomain: 'your-auth-domain-b1234.firebaseapp.com',
  databaseURL: 'https://your-database-name.firebaseio.com',
  projectId: 'your-project-id-1234',
  storageBucket: 'your-project-id-1234.appspot.com',
  messagingSenderId: '12345-insert-yourse',
  appId: 'insert yours: 1:1234:web:ee873bd1234c0deb7eba61ce',
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export { firebase };

Você consegue toda a informação a partir do Firebase Console -> Project Settings

3. Configuração da estrutura de pastas, rotas e navegação

Crie a estrutura da pasta executando

mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen

Crie a estrutura de arquivos executando

touch src/screens/index.js src/screens/LoginScreen/LoginScreen.js src/screens/LoginScreen/styles.js src/screens/RegistrationScreen/RegistrationScreen.js src/screens/styles.js src/screens/HomeScreen/HomeScreen.js src/screens/HomeScreen/styles.js

Adicione este código a src/screens/index.js

export { default as LoginScreen } from './LoginScreen/LoginScreen'

export { default as HomeScreen } from './HomeScreen/HomeScreen'

export { default as RegistrationScreen } from './RegistrationScreen/RegistrationScreen'

Não se preocupe se o projeto apresentar erros! Tudo fará sentido daqui a pouco.

Configure as rotas e navegações

Sobrescreva o arquivo App.js com o seguinte código:

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { LoginScreen, HomeScreen, RegistrationScreen } from './src/screens'
import {decode, encode} from 'base-64'
if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {

  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null)

  return (
    
      
        { user ? (
          
            {props => }
          
        ) : (
          <>
            
            
          
        )}
      
    
  );
}

4. Implementação da interface

Agora que temos a base da aplicação, vamos continuar e implementar os componentes para a interface de todas as telas. Não falaremos sobre layout flexível, nem sobre estilização do React Native, visto que esses pontos estão fora do escopo deste tutorial. Vamos focar na integração entre React Native e Firebase.

Sobrescreva os arquivos a seguir:

src/LoginScreen/LoginScreen.js

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';

export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const onFooterLinkPress = () => {
        navigation.navigate('Registration')
    }

    const onLoginPress = () => {
    }

    return (
        
            
                
                 setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 onLoginPress()}>
                    Log in
                
                
                    Don't have an account? Sign up
                
            
        
    )
}

src/LoginScreen/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    title: {

    },
    logo: {
        flex: 1,
        height: 120,
        width: 90,
        alignSelf: "center",
        margin: 30
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        marginRight: 30,
        paddingLeft: 16
    },
    button: {
        backgroundColor: '#788eec',
        marginLeft: 30,
        marginRight: 30,
        marginTop: 20,
        height: 48,
        borderRadius: 5,
        alignItems: "center",
        justifyContent: 'center'
    },
    buttonTitle: {
        color: 'white',
        fontSize: 16,
        fontWeight: "bold"
    },
    footerView: {
        flex: 1,
        alignItems: "center",
        marginTop: 20
    },
    footerText: {
        fontSize: 16,
        color: '#2e2e2d'
    },
    footerLink: {
        color: "#788eec",
        fontWeight: "bold",
        fontSize: 16
    }
})

src/RegistrationScreen/RegistrationScreen.js

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';

export default function RegistrationScreen({navigation}) {
    const [fullName, setFullName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')

    const onFooterLinkPress = () => {
        navigation.navigate('Login')
    }

    const onRegisterPress = () => {
    }

    return (
        
            
                
                 setFullName(text)}
                    value={fullName}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setConfirmPassword(text)}
                    value={confirmPassword}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 onRegisterPress()}>
                    Create account
                
                
                    Already got an account? Log in
                
            
        
    )
}

src/RegistrationScreen/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    title: {

    },
    logo: {
        flex: 1,
        height: 120,
        width: 90,
        alignSelf: "center",
        margin: 30
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        marginRight: 30,
        paddingLeft: 16
    },
    button: {
        backgroundColor: '#788eec',
        marginLeft: 30,
        marginRight: 30,
        marginTop: 20,
        height: 48,
        borderRadius: 5,
        alignItems: "center",
        justifyContent: 'center'
    },
    buttonTitle: {
        color: 'white',
        fontSize: 16,
        fontWeight: "bold"
    },
    footerView: {
        flex: 1,
        alignItems: "center",
        marginTop: 20
    },
    footerText: {
        fontSize: 16,
        color: '#2e2e2d'
    },
    footerLink: {
        color: "#788eec",
        fontWeight: "bold",
        fontSize: 16
    }
})

src/HomeScreen/HomeScreen.js

import React from 'react'
import { Text, View } from 'react-native'

export default function HomeScreen(props) {
    return (
        
            Home Screen
        
    )
}

src/HomeScreen/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        marginRight: 30,
        paddingLeft: 16
    }
})

Até aqui, sua aplicação deve executar corretamente e mostrar as seguintes telas (interface apenas):

Você pode mudar entre as duas telas pressionando os links no rodapé.

Agora que temos uma interface bonita de login e registro, vamos ver como podemos integrar nossa aplicação do React Native (e Expo) com o Firebase.

5. React Native com Firebase — registro

Vamos começar criando uma conta com o Firebase Auth, pois o login acontece depois. Para isso, vamos adicionar a lógica do Firebase para criar uma conta com e-mail e senha em RegistrationScreen.js, implementando o método onRegisterPress, assim:

//...

import { firebase } from '../../firebase/config'

//...

export default function RegistrationScreen({navigation}) {
    //...

    const onRegisterPress = () => {
        if (password !== confirmPassword) {
            alert("Passwords don't match.")
            return
        }
        firebase
            .auth()
            .createUserWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const data = {
                    id: uid,
                    email,
                    fullName,
                };
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .set(data)
                    .then(() => {
                        navigation.navigate('Home', {user: data})
                    })
                    .catch((error) => {
                        alert(error)
                    });
            })
            .catch((error) => {
                alert(error)
        });
    }
    
    //...
}

No fluxo de criação de senha acima, fizemos algumas coisas importantes:

Chamamos a função createUserWithEmailAndPassword, da API do Firebase Auth (linha 13), que cria uma conta que será mostrada na tabela em Firebase Console -> Authentication.
Se o registro da conta foi feito com sucesso, também armazenamos os dados do usuário no Firebase Firestore (linha 24). Isso é necessário para armazenar informações adicionais do usuário, como nome completo, URL da foto de perfil e assim por diante, que não podem ser armazenadas na tabela de autenticação.
Se o registro foi feito com sucesso, vamos navegar para a tela de início, também passando os dados do usuário como objeto.
Se qualquer erro ocorrer, simplesmente mostramos um alerta mostrando o erro. Erros podem acontecer por causa de conexão de rede, senha muito curta, e-mail inválido e assim por diante.

Recarregue sua aplicação e teste o registro. Se você criou uma conta com sucesso, veja se ela aparece em Firebase Console -> Authentication:

Agora que conseguimos criar as contas, vamos implementar a funcionalidade de login. O SDK do Firebase cuida de todos os passos necessários para que o login tenha autorização e autenticação seguras.

Abra LoginScreen.js, importe o firebase e complete o método onLoginPress:

//...

import { firebase } from '../../firebase/config'

//...

export default function LoginScreen({navigation}) {

    //...

    const onLoginPress = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        navigation.navigate('Home', {user})
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

    //...

}

Recarregue sua aplicação e faça login com uma conta existente. A aplicação deverá enviar você para a tela de início se as credenciais estiverem corretas, ou mostrará um alerta com um erro, se algo der errado.

Você verá que, se sair da aplicação e abri-la novamente, ela mostrará a tela de login de novo. Para uma boa experiência do usuário, queremos redirecionar todos os usuários para a tela de início. Ninguém quer digitar suas credenciais de login toda vez que quiser usar a aplicação.

Isso também é conhecido como persistência de login. Felizmente, o SDK do Firebase cuida disso para nós, lidando com todas as questões de segurança. A persistência de login está habilitada por padrão no Firebase. Então, tudo que precisamos fazer é buscar pelo usuário atual que fez login.

Abra o arquivo App.js e vamos implementar a funcionalidade de persistência de login:

//...

import { firebase } from './src/firebase/config'

//...

export default function App() {

  //...

  if (loading) {	
    return (	
      <>	
    )	
  }

  useEffect(() => {
    const usersRef = firebase.firestore().collection('users');
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        usersRef
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data()
            setLoading(false)
            setUser(userData)
          })
          .catch((error) => {
            setLoading(false)
          });
      } else {
        setLoading(false)
      }
    });
  }, []);

  //...

}

onAuthStateChanged retorna o usuário atual que fez login. Então, procuramos toda a informação adicional que armazenamos no Firebase e a indicamos no estado atual do componente. Isso renderizará a aplicação novamente, o que mostrará a tela de início.

Note que, como usamos a função pela primeira vez, a aplicação carregou utilizando o hook useEffect.

8. Escrita e leitura de dados a partir do Firebase Firestore

Já usamos o Firebase acima, para salvar informações adicionais sobre nossos usuários (o nome completo). Nesta seção, vamos ver como podemos escrever dados no Firebase e como podemos buscá-los.

Vamos compreender como observar (ouvir) mudanças na coleção do Firebase e refleti-las na tela, em tempo real. Isso pode ser muito útil em aplicações de tempo real, como o React Native Chat.

Para simplificar, vamos salvar alguns itens textuais na coleção do Firestore chamada "entities" (entidades). Pense nesses itens como se fossem tarefas, postagens, tweets, qualquer coisa. Vamos criar um arquivo simples, que adiciona uma nova entidade, e vamos também listar todas as entidades que pertencem ao usuário atual que fez login. Além disso, a lista será atualizada em tempo real.

Implemente HomeScreen.js reescrevendo-o com o código abaixo

import React, { useEffect, useState } from 'react'
import { FlatList, Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native'
import styles from './styles';
import { firebase } from '../../firebase/config'

export default function HomeScreen(props) {

    const [entityText, setEntityText] = useState('')
    const [entities, setEntities] = useState([])

    const entityRef = firebase.firestore().collection('entities')
    const userID = props.extraData.id

    useEffect(() => {
        entityRef
            .where("authorID", "==", userID)
            .orderBy('createdAt', 'desc')
            .onSnapshot(
                querySnapshot => {
                    const newEntities = []
                    querySnapshot.forEach(doc => {
                        const entity = doc.data()
                        entity.id = doc.id
                        newEntities.push(entity)
                    });
                    setEntities(newEntities)
                },
                error => {
                    console.log(error)
                }
            )
    }, [])

    const onAddButtonPress = () => {
        if (entityText && entityText.length > 0) {
            const timestamp = firebase.firestore.FieldValue.serverTimestamp();
            const data = {
                text: entityText,
                authorID: userID,
                createdAt: timestamp,
            };
            entityRef
                .add(data)
                .then(_doc => {
                    setEntityText('')
                    Keyboard.dismiss()
                })
                .catch((error) => {
                    alert(error)
                });
        }
    }

    const renderEntity = ({item, index}) => {
        return (
            
                
                    {index}. {item.text}
                
            
        )
    }

    return (
        
            
                 setEntityText(text)}
                    value={entityText}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                
                    Add
                
            
            { entities && (
                
                     item.id}
                        removeClippedSubviews={true}
                    />
                
            )}
        
    )
}

Estilize a tela inicial, sobrescrevendo HomeScreen/styles.js com:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    formContainer: {
        flexDirection: 'row',
        height: 80,
        marginTop: 40,
        marginBottom: 20,
        flex: 1,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 30,
        paddingRight: 30,
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        paddingLeft: 16,
        flex: 1,
        marginRight: 5
    },
    button: {
        height: 47,
        borderRadius: 5,
        backgroundColor: '#788eec',
        width: 80,
        alignItems: "center",
        justifyContent: 'center'
    },
    buttonText: {
        color: 'white',
        fontSize: 16
    },
    listContainer: {
        marginTop: 20,
        padding: 20,
    },
    entityContainer: {
        marginTop: 16,
        borderBottomColor: '#cccccc',
        borderBottomWidth: 1,
        paddingBottom: 16
    },
    entityText: {
        fontSize: 20,
        color: '#333333'
    }
})

Recarregue a aplicação e observe a nova tela inicial. Digite algo e pressione o botão Add.
Nada acontece.
Crie um índice nas entidades da coleção do Firestore

Você verá que a lista de entidades não foi renderizada. Se conferirmos os registros, veremos um aviso sobre "a busca precisar de um índice", seguido de um grande URL:

Isso nos informa que não podemos buscar tabelas de entidades pelo authorID e classificar os dados por createdAt em ordem decrescente, a menos que criemos um índice. Criar um índice é bem fácil, na verdade—simplesmente clique no URL e, então, clique no botão:

Recarregue a aplicação novamente

Agora, tudo funciona como o esperado:

A aplicação lista todas as entidades na coleção entities, em ordem decrescente de acordo com a criação
Adicionar uma nova entidade funciona
A lista atualiza em tempo real (tente apagar um registro diretamente do banco de dados ou adicionar um novo diretamente da aplicação)

Seu banco de dados do Firestore, agora, fica assim:

É assim que você lê e escreve no Firestore em React Native. Vamos para a última seção.

Brinque com a aplicação, adicionando novas entidades. Este é o projeto final:

Conclusão

O Firebase facilita o suporte para autenticação e banco de dados para qualquer aplicação em React Native. O SDK do Firebase é extremamente poderoso, suporta vários padrões de leitura e escrita em bancos de dados.

Além do React Native, o SDK do Firebase providencia suporte para várias outras linguagens, como Swift, Kotlin ou Flutter. Confira esses links para ver instruções para os iniciantes no Firebase em várias linguagens.

Mostramos o básico neste tutorial de React Native com Firebase. Nos próximos, vamos abranger mais funcionalidades avançadas, como Firebase Storage (carregamento de arquivos) e notificações por push.

Se você gostou deste tutorial, dê uma estrela no repositório do GitHub e compartilhe este artigo com sua comunidade. Você pode conferir muitos projetos gratuitos em React Native no Instamobile. Abraços!

Ana Beatriz - freeCodeCamp.org

Como criar um aplicação de lista de afazeres usando ReactJS e Firebase

Como nossa aplicação ficará:

Arquitetura da aplicação:

Entendendo nossos componentes:

Seção 1: desenvolvimento das APIs de afazeres

Configurar as funções do firebase:

Instalar o framework do Express:

Firebase Firestore:

Escrevendo outras APIs:

Seção 2: desenvolvimento das APIs dos usuários

1. API de login do usuário:

2. API de registro de usuário:

3. Carregar a foto de perfil do usuário:

4. Obter os detalhes do usuário:

5. Atualizar os detalhes do usuário:

6. Tornar a API de afazeres segura:

Estrutura do diretório até agora:

Seção 3: painel do usuário

1. Configurar o ReactJS e o Material UI:

2. Formulário de login:

3. Formulário de registro:

4. Seção das contas:

Seção 4: painel de afazeres

Control-Alt-Delete no Mac - como abrir o Gerenciador de tarefas em seu Macbook

Como forçar a saída de um programa em um Mac

Um método alternativo

Como usar o padrão Provider no Flutter

Começando

Criando o Provider

Ouvindo cliques no botão

Fornecendo o Provider

Atualizando o texto

Boas-vindas à AndroidVille :)

Como criar uma aplicação em React Native e integrá-la com Firebase

1. Criação de um projeto com o Firebase

2. Criação e configuração de uma aplicação em React Native

3. Configuração da estrutura de pastas, rotas e navegação

4. Implementação da interface

5. React Native com Firebase — registro

6. React Native com Firebase — login

7. Persistência de credenciais de login

8. Escrita e leitura de dados a partir do Firebase Firestore

Conclusão