React Native é uma estrutura do Facebook para criar aplicativos nativos para Android e iOS usando JavaScript para aplicativos famosos como Facebook, Instagram, Uber, Skype, Pinterest e Walmart.
O Firebase é um produto do Google que fornece serviços de back-end para aplicativos como bancos de dados, armazenamento de arquivos, autenticação, notificações da nuvem e muito mais.
Neste curso, veremos como usar o React Native com o Cloud Firestore, serviço do Firebase para armazenamento de dados. Usaremos a biblioteca React Native Firebase, que usa código nativo, mas segue a API Firebase para JavaScript, portanto, o que você aprender aqui também será útil para o desenvolvimento da Web.
Criar um aplicativo, seja web ou mobile, não é fácil e você tem que se preocupar com vários fatores, entre eles:
- Funcionamento em variados tipos de dispositivos;
- Infraestrutura;
- Atualizações que não gerem mais erros que solucionam;
- Segurança na transferência de dados;
- Mecanismos de Autenticação;
- E o aumento de usuários, para prover a melhor experiência para eles.
Foi pensando em uma maneira de solucionar todos esses problemas que surgiu a motivação para a criação do Firebase.
Nota: BaaS ou BackEnd As A Service (MBaaS = Mobile BackEnd As A Service) é um serviço onde toda a estrutura de backend como: configuração do servidor, integração de banco de dados, sistema de notificação push e outros serviços fazem parte do backend e estão totalmente prontos para integre com seu aplicativo.
serviço prestado
O Firebase oferece uma variedade de serviços que você pode usar, divididos em 4 categorias principais: Analytics, Development, Growth e Earning.
Apenas os serviços mais usados são listados para que você possa se concentrar em benefícios e integrações.
Analytics
O Analytics analisa o comportamento do usuário em seu aplicativo em tempo real e fornece dados sobre falhas, compras no aplicativo, desempenho de links diretos e muito mais.
Mas o serviço atualmente suporta apenas Android, IOS, C++ e Unity.
// Analytics on React Native
componentDidMount() {
Analytics.setAnalyticsCollectionEnabled(true);
Analytics.setUserId();
Analytics.setUserProperty(, )
Analytics.setUserProperty(, )
Analytics.setCurrentScreen(, );
Analytics.logEvent(, {
: ,
: });
}
Realtime Database
O Realtime Database permite que os dados sejam armazenados e sincronizados entre usuários e dispositivos em tempo real usando um banco de dados NoSQL hospedado na nuvem.
Os dados atualizados são sincronizados em todos os dispositivos conectados em segundos. Além disso, se seu aplicativo estiver offline, seus dados ainda estarão disponíveis, proporcionando uma ótima experiência ao usuário, independentemente da conexão de rede.
// Gravando no Banco de Dados
writeUserData(email,fname,lname){
firebase.database().ref(‘UsersList/’).push({
email,
name,
}).then((data)=>{
console.tron.log(‘data ‘ , data)
}).catch((error)=>{
console.tron.log(‘error ‘ , error)
})
}
// Lendo do Bando de Dados
readUserData() {
firebase
.database()
.ref(‘Users/’)
.on(‘value’, function (snapshot) {
console.tron.log(snapshot.val())
});
}
Authentication
O Firebase Auth oferece vários métodos de autenticação, como e-mail/senha, provedores de terceiros, como Google ou Facebook, login anônimo, confirmação por SMS ou diretamente pelo sistema de sua conta. Gerenciamento de usuários simplificado e seguro.
// Fazendo Login com o Facebook
const facebookLogin = async () => {
try {
const data = await AccessToken.getCurrentAccessToken();
if (!data) {
throw new Error(‘Algo deu errado!’);
}
const credential = firebase
.auth
.FacebookAuthProvider
.credential(data.accessToken);
const currentUser = await firebase
.auth()
.signInAndRetrieveDataWithCredential(credential);
console.tron.log(currentUser.user.toJSON())
} catch (e) {
console.tron.error(e);
}
}
Cloud Messaging
O Firebase Cloud Messaging (FCM) fornece mensagens e notificações gratuitas para usuários em várias plataformas, seja Android, iOS ou Web. As mensagens podem ser enviadas para dispositivos individuais, grupos de dispositivos, segmentos de usuários ou tópicos específicos.
// Aguardando mensagens do FCM
componentDidMount() {
this.messageListener = firebase.messaging()
.onMessage(message => {
// Aqui você processa a mensagem recebida!
});
}
componentWillUnmount() {
this.messageListener();
}
Storage
O Firebase Cloud Storage permite que você armazene e compartilhe facilmente imagens, áudio, vídeo ou outro conteúdo gerado pelo usuário usando um armazenamento de objetos poderoso, simples e econômico criado para a escala do Google.
O SDK do Firebase para Cloud Storage adiciona a segurança do Google aos uploads e downloads de arquivos do seu aplicativo Firebase, independentemente da qualidade da rede.
// Fazendo Upload de um Arquivo no formato Blob
const file = …; // Use um Blog ou arquivo da API
ref.put(file).then(function(snapshot) {
console.log(‘Uploaded a blob or file!’);
});
// Fazendo Upload de uma String
const message = ‘Essa é a mensagem.’;
ref.putString(message).then(function(snapshot) {
console.log(‘Uploaded a raw string!’);
});
AdMob
A AdMob do Google é uma plataforma de publicidade que você pode usar para gerar receita com seus aplicativos. O uso da AdMob com o Google Analytics para Firebase fornece dados adicionais e recursos de análise de aplicativos.
A maioria dos serviços do Firebase é gratuita para uso com os planos Spark, mas os planos são modificados quando o aplicativo atinge os níveis de uso de recursos do servidor.
Quando os planos não são mais gratuitos, as opções de planos pagos disponíveis são o Flame, que possui mais recursos que o Spark, e o Blaze, um plano de pagamento por uso de recursos que é muito flexível.
Você pode ver mais informações sobre cada plano e recurso neste link.
Vantagens x Desvantagens
Como qualquer outro produto, o Firebase tem seus prós e contras, afinal nenhum produto é perfeito para todos os tipos de situações, aqui está uma lista de prós e contras desta plataforma BaaS.
Vantagens
Estrutura Pronta;
Rápida Implementação;
Segurança;
Múltiplas Ferramentas;
Facilmente Escalável.
Desvantagens
Controle e Acesso;
Limitação da Plataforma;
Documentação;
Performance;
Pode fechar a qualquer momento.
Afinal, quando devo usar o Firebase?
Se você já viu o aplicativo de um cliente ou colega/programador amigo ter que ser completamente migrado para outra plataforma BaaS devido ao desligamento, você provavelmente não quer voltar para tal plataforma.
No entanto, o BaaS não é apenas comercializável, é muito útil, então aqui estão 3 situações em que o uso do Firebase é ótimo:
MVP – Firebase é ótimo para quando você precisa criar um Produto Mínimo Viável, pois pode focar no desenvolvimento front-end e/ou mobile, o que torna o processo mais rápido, fácil e barato do que criar um back-end inteiro. Além de poder fazer mais testes antes de migrar para seu próprio backend;
Aplicativos pequenos/aplicativos pessoais: Você conhece um projeto que tem ideias e vontade de fazer, mas tem pouco tempo para desenvolver o backend (ou nem tem essa habilidade)? Bem, o Firebase é definitivamente para você;
Protótipos: quando você precisa criar um aplicativo de demonstração, um projeto universitário ou apenas testar uma solicitação de aplicativo, em vez de criar um back-end inteiro, você pode usar o Firebase para acelerar o processo.
Mas é claro que nada impede você de usá-lo em outros tipos de aplicativos, os mencionados acima são apenas os que foram testados para mostrar os maiores benefícios do uso do Firebase.
Se você se sentir confortável e produtivo desenvolvendo aplicativos com o Firebase, não hesite em usá-lo.
Integrações
Para usar esses recursos mencionados neste artigo, deve haver algumas libs para fazer a ponte entre o Firebase e seu aplicativo, com isso em mente, a equipe do Firebase criou SDKs para web, IOS, Android e outras plataformas.
Abaixo estão listadas alternativas ao uso do Firebase em aplicativos ReactJS, React Native e NodeJS, afinal, esta é a pilha do Rocketseat =)
Firebase em ReactJS
No ReactJS, o SDK a ser usado é o Javascript SDK, pois o ReactJS funciona no lado do cliente (navegador), e com o Javascript SDK, os aplicativos podem enviar solicitações ao Firebase por meio das funções predefinidas do SDK.
Aqui está um link para o tutorial da Documentação do Firebase sobre como instalar e usar o SDK do Javascript em seu aplicativo:
https://firebase.google.com/docs/web/setup
Firebase no React Native
Quanto ao React Native, não existe um SDK próprio para usar, muitos usam o Javascript SDK no React Native, afinal, existe uma linguagem Javascript por trás dele.
No entanto, existe uma biblioteca que integra bem os SDKs nativos do Android e IOS e constrói uma ponte entre eles e o React Native, ou seja, existe uma maneira de usar seus próprios pacotes Android e IOS no React Native, isso A biblioteca é React Native Firebase (RNFirebase):
https://rnfirebase.io/docs/v5.x.x/getting-started
A princípio, configurá-lo em um projeto React Native pode parecer muito complicado, mas neste momento a documentação da lib é bem detalhada, e assim que tudo estiver configurado, você poderá acessar todos os serviços fornecidos pelo Firebase assim:
https://rnfirebase.io/docs/v5.x.x/getting-started#Supported-Firebase-Features
O SDK Javascript funciona em React Native, mas não é ideal porque é focado em aplicativos da web, então não tem acesso a todos os serviços que o Firebase tem a oferecer, exceto que fica atrasado, ainda que raramente, nos testes de desempenho do RNFirebase.
Firebase em NodeJS
Usar o Firebase não faz muito sentido nesse caso, já que o NodeJS é usado para criar o backend do aplicativo, que é o que o Firebase fornece.
Não é impossível usá-lo no NodeJS, mas seria um desperdício de desempenho, pois o NodeJS atuará como um “middleware” para o Firebase.
The End
Neste artigo, explica o que é, o serviço, vantagens e desvantagens, quando usá-lo e, por fim, a integração com o Firebase. O objetivo é deixar você com uma ideia clara de como o Firebase funciona e como ele pode te ajudar no seu dia a dia como desenvolvedor.
E não se esqueça de deixar um comentário abaixo para seus pensamentos sobre este artigo e esta incrível ferramenta Firebase 🙂
