Um App iOS e Android com React-Native + Firebase em 10min
Você já pensou em diminuir o tempo de desenvolvimento Mobile pela metade?
Construir aplicações Mobile multiplataforma nunca foi uma tarefa fácil, iOS, Android e o falecido Windows Phone possuem grandes diferenças em linguagem, arquitetura e até filosofia em seus aplicativos.
Utilizando a ideia de escrever um código para várias plataformas surgiu o React-Native, apoiado por grandes nomes como Facebook. Como seu próprio nome já diz, o React-Native produz código nativo, proporcionando uma experiência de usuário acima de qualquer outro Framework multiplataforma.
E quem usa ele? Podemos citar só pequenos nomes como Facebook e Instagram. Então vamos parar de perder tempo e vamos criar nosso primeiro App Mobile com React-Native utilizando Firebase, listando dados em tempo real do banco do servidor.
Caso você tenha chegado aqui sem saber nada sobre React ou Firebase, temos artigos aqui e aqui, explicando mais sobre a construção de aplicações utilizando a arquitetura React + Firebase. Recomendamos sua leitura antes para então podermos brincar com React Native.
Configurando Firebase
Os detalhes para criação de uma aplicação dentro do console do Firebase podem ser vistos neste artigo. Utilizaremos a mesma estrutura de dados neste aplicativo. Podemos ressaltar as regras de acesso para o banco que necessitam ser liberadas a todos os usuários. Necessitamos configurar as regras de acesso ao banco no console. Acesse Banco de dados > Regras e adicione as seguintes regras:
{
"rules": {
".read": true,
".write": true
}
}Com isso, copie as credenciais e deixe-as em local seguro.
create-react-native-app
De forma análoga ao React.js, React-Native também conta com uma ferramenta que facilita a criação de projetos em sua plataforma. E esta ferramenta é uma mão na roda incrível, vamos destacar suas características:
- Independente de SO: programe em iOS sem a necessidade de Mac utilizando seu próprio smartphone para testes.
- Uma única ferramenta de build: somente utilizando o npm conseguimos testar e rodar nossa aplicação, tudo com o auxilio do expo.
- Tempo mínimo para Hello Word: dois comandos e temos uma aplicação rodando.
Para o instalar em sua máquina, utilize o comando npm:
npm install -g create-react-native-appApós isso, instale o Expo em seu smartphone para utilizá-lo para desenvolvimento de nossa aplicação.
Crie uma nova aplicação utilizando o comando
create-react-native-app my-appEntão para executá-la na pasta criada, execute o comando npm.
npm startVeremos então um QRCode em nosso terminal. Utilizando o aplicativo do Expo em seu celular, escaneie este código então teremos a aplicação rodando em nosso smartphone.
Nossa aplicação será como na imagem acima, agora vamos adicionar uma listagem de itens do Firebase em nossa aplicação.
Firebase e dados de verdade
Para isso vamos instalar o pacote do Firebase em nossa aplicação executando o comando:
npm install firebase --saveCriaremos o arquivo ./utils/firebase.js com o seguinte conteúdo:
import firebase from 'firebase';
const prodConfig = {
apiKey: "***************",
authDomain: "***************",
databaseURL: "***************",
projectId: "***************",
storageBucket: "***************",
messagingSenderId: "***************"
};
const devConfig = {
apiKey: "***************",
authDomain: "***************",
databaseURL: "***************",
projectId: "***************",
storageBucket: "***************",
messagingSenderId: "***************"
};
const config = process.env.NODE_ENV === 'production'
? prodConfig
: devConfig;
export const firebaseImpl = firebase.initializeApp(config);
export const firebaseDatabase = firebase.database();
export const firebaseAuth = firebase.auth();
export const googleProvider = new firebase.auth.GoogleAuthProvider();
export const facebookProvider = new firebase.auth.FacebookAuthProvider();Então criaremos o arquivo ./services/firebaseService.js
import {firebaseDatabase} from '../utils/firebase'
export default class FirebaseService {
static getDataList = (nodePath, callback, size = 10) => {
let query = firebaseDatabase.ref(nodePath).limitToLast(size);
query.on('value', dataSnapshot => {
let items = [];
dataSnapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item['key'] = childSnapshot.key;
items.push(item);
});
callback(items);
});
return query;
};
}E então em App.js necessitaremos uma lista para cada item, logo adicionaremos um estado ao componente.
state = {
dataList: null,
};E ao iniciar a aplicação, necessitamos recuperar estes dados do Firebase. Utilizando nosso service vamos recupera-los e adiciona-los ao nosso estado:
componentDidMount() {
FirebaseService.getDataList('leituras', dataIn => this.setState({dataList: dataIn}), 10);
};Logo, só precisaremos renderizar o resultado, o componente completo é apresentado abaixo:
import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {FirebaseService} from './services/FirebaseService.js';
const styles = StyleSheet.create({
margin10: {margin: 10},
fullWidth: {flex: 1},
header: {alignItems: 'flex-start', justifyContent: 'flex-start', height: 60, paddingTop: 20, paddingBottom: 20, flexDirection: 'row'},
listItemText: {fontSize: 20, color: '#000000', marginBottom:10},
listItemHeader: {fontSize: 10, color: '#000000'},
item: {backgroundColor: '#c7c7c7', borderRadius: 20}
});
export default class App extends React.Component {
state = {
dataList: null,
};
componentDidMount() {
FirebaseService.getDataList('leituras', dataIn => this.setState({dataList: dataIn}), 10);
};
render() {
const {dataList} = this.state;
return (
<ScrollView style={styles.margin10}>
<View style={styles.header}><Text>React-Native App</Text></View>
<View style={styles.fullWidth}>
{
dataList && dataList.map(
(item, index) => {
return <View style={[styles.margin10, styles.item]} key={index} >
<View style={{padding:10}}>
<Text style={styles.listItemHeader}> Temperatura </Text>
<Text style={styles.listItemText}> {item.temperatura} </Text>
<Text style={styles.listItemHeader}> Data </Text>
<Text style={styles.listItemText}> {item.data} </Text>
<Text style={styles.listItemHeader}> Umidade </Text>
<Text style={styles.listItemText}> {item.umidade} </Text>
<Text style={styles.listItemHeader}> Cliente </Text>
<Text style={styles.listItemText}> {item.cliente} </Text>
</View>
</View>
}
)
}
</View>
</ScrollView>
);
}
}Entre umas das principais diferenças entre React e React-Native, está a utilização de Flexbox pelo React-Native por padrão. Sendo nosso style declarado de uma forma especifica do React-Native:
const styles = StyleSheet.create({
margin10: {margin: 10},
fullWidth: {flex: 1},
header: {
alignItems: 'flex-start',
justifyContent: 'flex-start',
height: 60,
paddingTop: 20,
paddingBottom: 20,
flexDirection: 'row'
},
listItemText: {fontSize: 20, color: '#000000', marginBottom:10},
listItemHeader: {fontSize: 10, color: '#000000'},
item: {backgroundColor: '#c7c7c7', borderRadius: 20}
});Podemos ver o resultado visual de nosso aplicativo abaixo:
Publicando seu projeto no Expo.io
Entre as funcionalidades mais interessantes disponíveis no create-react-native-app está a integração com o Expo, uma plataforma com uma série de recursos que vão desde bibliotecas para facilitar o acesso a recursos nativos, até compartilhamento de projetos. Hoje vou ensinar como publicar seu projeto nesta plataforma. Porém, antes de tudo, vamos criar uma conta nesta plataforma.
Vamos utilizar a forma mais amigável ao usuário evitando o cli e baixando o xde uma ferramenta gráfica para servir, compartilhar e publicar seus projetos. Inicialmente, entre neste link, baixe a versão do instalador para seu sistema operacional e então siga as instruções do site para instalação.
Após instalado, vamos executar o xde, realizar login em nossa conta Expo. Selecione seu projeto em: Project > Open Project.
Após receber a mensagem: “Project opened! You can now use the “Share” or “Device” buttons to view your project.”, selecione o botão Publish, então você receberá o link do projeto, nosso projeto está publicado neste link.
Entre nossas próximas tarefas podemos adicionar navegação, ou até componentes muito mais bonitos, porém isso é uma tarefa para outros posts e pode até ficar de lição de casa.
Espero que tenha dado uma boa visão inicial do React Native para vocês, o código e o projeto estão todos disponíveis online, caso tenham alguma dúvida podem me procurar no github ou alguma das minhas milhões de redes sociais.
Muito obrigado galera e até o próximo post. 😸
