Integração do Realtime Database com o seu app react-native.
Tags: reactnative, firebase, realtimedatabase, ptbr
Published: 2019-12-02 05:32:12

Fala galera, 
Sou novo na área de desenvolvimento mobile e recentemente encontrei dificuldades em realizar a integração do meu app com a api do firebase. Encontrei quase nenhuma documentação em português e como outras pessoas talvez compartilhem das mesmas dificuldades que tive, resolvi compartilhar uma solução que encontrei. 

Para isso, irei demonstrar a integração em um app qualquer, já existente, com o serviço do RealTime Database da api do firebase. Para este exemplo, utilizarei a integração com um app Android. 

<!--- Inicialmente, caso não possua o ambiente configurado, seguir a documentação oficial do [react-native](https://facebook.github.io/react-native/docs/getting-started).
No seu workspace, inicializar o projeto com o comando 'npx react-native init nomeDoProjeto', comforme ilustração a seguir:
![projectInit](projectInit.png "Inicialização do projeto react-native") --->


##Cadastro e Configuração
De antemão, realizar o cadastro e a inicialização do projeto no [firebase](https://console.firebase.google.com).

![criarProjetoFirebase](https://thepracticaldev.s3.amazonaws.com/i/o6j25rj2wb1fzkm1ej6b.png "Adicionar projeto ao firebase")

Selecionar o projeto criado e adicionar um app android, semelhante às ilustrações a seguir: 
![adicionarApp](https://thepracticaldev.s3.amazonaws.com/i/xrw6q9c2g85j6ht26t8m.png "Adicionar projeto ao firebase")
![adicionarAppAndroid](https://thepracticaldev.s3.amazonaws.com/i/qhmqvc9vnvwo356q5hni.png "Adicionar projeto android ao firebase")

Registrar seu app, baixar o arquivo de configurações e adicionar à pasta android/app do projeto, conforme figura a seguir:

![googleServices](https://thepracticaldev.s3.amazonaws.com/i/g22vja6hljfs3youhdwp.png "Adicionar projeto ao firebase")


Lembrar de adicionar o google-services ao git ignore, pra não subir as configurações de conexão do banco por engano :eyes:


##Integração
Com a versão [0.60 do react-native](https://facebook.github.io/react-native/blog/2019/07/03/version-60), o linking é feito de forma automática no projeto. A versão 0.60 é requisito mínimo para seguir as instruções subsequentes. Caso seu projeto tenho sido construído em uma versão anterior, há possibilidade de atualizar a versão utilizando o seguinte comando dentro da pasta do projeto:

```
npx react-native upgrade
```
>Caso tenha alguma dificuldade, o próprio framework disponibiliza uma [ferramenta](https://react-native-community.github.io/upgrade-helper/) para comparar as versões e, caso desejado, realizar o upgrade manualmente. 

No arquivo build.graddle, dentro da pasta android/ adicionar o a dependência do google-services


```
buildscript {
  dependencies {
    // ...
    classpath("com.google.gms:google-services:4.2.0")
  }
}
```

Em seguida, no arquivo build.graddle localizado em android/app/ adicionar ao final do arquivo o seguinte:

```
apply plugin: 'com.google.gms.google-services'
```

Agora, para integrar o firebase ao app, vamos utilizar a biblioteca [react-native-firebase](https://invertase.io/oss/react-native-firebase/) que é mantida pela [invertase](https://invertase.io).

Na pasta do projeto, rodar os seguintes comandos: 

```
yarn add @react-native-firebase/app
```
```
yarn add @react-native-firebase/database
```

E pronto, seu app está integrado com o Realtime Database. Caso deseje integra-lo com alguma outra funcionalidade da api, é só selecionar o [módulo](https://invertase.io/oss/react-native-firebase/v6) desejado e adicioná-lo via yarn. 

>```
yarn add @react-native-firebase/nomeDoModulo
```

##Modo de Uso

Para utilizar a funcionalidade no seu projeto : 


```javascript
import database from '@react-native-firebase/database';

```

####Leitura


```javascript
componentDidMount() {
        let dbRef = database().ref(`usuario_id/${this.state.userid}`)
        this.listenerFirebase(dbRef)
    }
    
```

```javascript
listenerFirebase(dbRef) {
        dbRef.on("value", dataSnapshot => {
            var feedbacks = []

            dataSnapshot.forEach(child => {
                feedbacks.push({
                    mensagem: child.val().feedback.mensagem,
                    key: child.key
                });
            });

            this.setState({
                data: feedbacks.reverse()
            });
        });
    }
```
####Escrita
```javascript
post_firebase = () => {
        let feedback = {
            mensagem: this.state.mensagem_feedback,
        }
        let dbRef = database().ref(`usuario_id/${this.state.userid}`)

        dbRef.push({
            feedback
        }).then((data) => {
            this.setState({ mensagem_feedback: "" })
            //success callback
            console.log('data ', data)
        }).catch((error) => {
            //error callback
            console.log('error ', error)
        })
    }

```




Este foi meu primeiro post e achei bem legal escrevê-lo. Caso alguém tenha alguma sugestão de melhoria, deixar nos comentários. Espero ter ajudado. 
Até mais. :wave: