Adicione o Firebase ao seu aplicativo Flutter com os plug-ins FlutterFire

Configurando regras para acessar o banco de dados

Não queremos deixar o banco de dados aberto, então vamos restringir o acesso ao banco de dados apenas para usuários autenticados, definindo a seguinte regra:

 rules_version=‘2’;
service cloud.firestore { corresponder/bancos de dados/{banco de dados}/documentos { corresponder/{document=**} { permitir leitura, gravação: if request.auth!=null; } }
}

Adicionando a dependência

Adicione a dependência cloude_firestore no pubspec.yaml , conforme mostrado abaixo:

dependências

: vibração: sdk: flutter cupertino_icons: ^ 1.0.2 firebase_core: ^ 1.0.1 firebase_auth: ^ 1.0.1 google_sign_in: ^ 5.0.0 cloud_firestore: ^ 2.2.0 #new

Implementando o código

No aplicativo de demonstração, assim que o usuário estiver conectado, armazenaremos os dados do usuário no Cloud Firestore conforme mostrado abaixo.

 Usuário? usuário=espera Authentication.signInWithGoogle (); if (usuário!=nulo) { database.storeUserData (usuário: usuário); Navigator.of (context).pushReplacement ( MaterialPageRoute ( construtor: (contexto)=> Home ( usuário: usuário, ), ), );
}
//----------------------------------------------------
storeUserData ({usuário de usuário obrigatório}) async { AppUser appUser=AppUser (uid: user.uid, nome: user.displayName, salta: 0); aguardar userCollection .doc (user.uid) .set (appUser.toJson ()) .então ((valor)=> imprimir ("Usuário adicionado")) .catchError ((erro)=> imprimir ("Falha ao adicionar usuário: $ erro"));
}

Armazenaremos e sincronizaremos a contagem de saltos dos usuários conectados no banco de dados Firestore usando o método abaixo:

 ElevatedButton ( style: ElevatedButton.styleFrom (primary: Colors.red), onPressed: () async { _jumpCount ++; _datebase.updateJumpCount ( usuário: _user, jumpCount: _jumpCount); }, filho: Texto ( 'Pular', style: TextStyle (fontSize: 34), ),
),
//---------------
updateJumpCount ({obrigatório usuário do usuário, obrigatório int jumpCount}) async { aguardar userCollection .doc (user.uid) .update ({'jumps': jumpCount}) .então ((valor)=> imprimir ("Usuário adicionado")) .catchError ((erro)=> imprimir ("Falha ao adicionar usuário: $ erro"));
}

Agora vamos adicionar o código para mostrar a contagem de saltos no painel usando ouvintes em tempo real:

 Container ( largura: 200, altura: 100, decoração: BoxDecoration ( color: Colors.grey.withOpacity (0,5), borda: Border.all (largura: 1, cor: Colors.black)), filho: StreamBuilder  ( stream: _usersStream, construtor: (contexto BuildContext, AsyncSnapshot  instantâneo) { if (snapshot.hasError) { return Text ('Algo deu errado'); } if (snapshot.connectionState==ConnectionState.waiting) { retornar Texto ("Carregando"); } retornar expandido ( filho: novo ListView ( filhos: snapshot.data!.docs .map ((documento DocumentSnapshot) { return Text ( '$ {(document.data () as Map) ['name']}: $ {(document.data () as Map) ['jumps']}', estilo: TextStyle (fontSize: 18, color: Colors.black), ); }).listar(), ), ); }, ),
)

Como você pode ver acima, a contagem de saltos é atualizada no banco de dados do Firestore e exibida no painel em tempo real.

Configuração remota

O plug-in Configuração remota permite que você altere o comportamento e a aparência de seu aplicativo móvel rapidamente. Isso significa que você pode alterar quase tudo dentro do aplicativo sem publicar a nova atualização do aplicativo.

Inicialmente, o aplicativo irá ler os valores padrão da configuração remota disponível no aplicativo. Posteriormente, ele pode buscar o novo valor da configuração remota quando necessário. Você pode controlar o que precisa ser alterado e as alterações são aplicadas a todos ou a um segmento específico de usuários.

Definição de valores do Remote config no Firebase console

Em nosso aplicativo de demonstração, controlaremos o plano de fundo usando o Configuração remota. Aqui estão as etapas para definir os valores:

1. No painel do projeto, role para baixo e selecione o Configuração remota
2. Adicione a chave como plano de fundo e o valor como montanhas para carregar o plano de fundo das montanhas quando o aplicativo for aberto
3. Clique em publicar alterações duas vezes

Adicionando a dependência

Adicione a dependência firebase_remote_config no pubspec.yaml , conforme mostrado abaixo:

dependências

: vibração: sdk: flutter cupertino_icons: ^ 1.0.2 firebase_core: ^ 1.0.1 firebase_auth: ^ 1.0.1 google_sign_in: ^ 5.0.0 cloud_firestore: ^ 2.2.0 firebase_remote_config: ^ 0.10.0 + 2 #new

Buscando valores do Configuração remota no código

Agora vamos escrever um código para configurar o Configuração remota no aplicativo. O código a seguir também define os padrões para que o aplicativo possa ler e se comportar na primeira inicialização:

 Future  setupRemoteConfig () async { aguarde Firebase.initializeApp (); final RemoteConfig remoteConfig=RemoteConfig.instance; esperar remoteConfig.setConfigSettings (RemoteConfigSettings ( fetchTimeout: const Duração (segundos: 10), minimumFetchInterval: Duration.zero, )); aguardar remoteConfig .setDefaults ( {'background':'mountains'}); RemoteConfigValue (null, ValueSource.valueStatic); return remoteConfig;
}

Adicione o seguinte código para buscar e carregar o novo valor para o fundo da chave. A IU é refletida de acordo.

 FutureBuilder  ( futuro: _datebase.setupRemoteConfig (), construtor: (contexto BuildContext, AsyncSnapshot  instantâneo) { if (snapshot.hasData) { _fetchLatestRemoteConfig (snapshot.requireData); return Image.asset ( snapshot.requireData.getString ('background')== 'montanhas' ?'assets/images/green_background.png' :'assets/images/beach.png', fit: BoxFit.fill, ); } senão { return Image.asset ( 'assets/images/green_background.png', fit: BoxFit.fill, ); } },
),

Como visto acima, isso muda o fundo das montanhas para a praia e também muda o fundo da imagem no aplicativo na reinicialização.

Crashlytics

Você não pode detectar todos os erros durante o desenvolvimento de aplicativos móveis, que é onde um sistema de monitoramento de falhas entra. O Crashlytics plugin ajuda a detectar erros fatais em tempo real.

Ativação do Crashlytics no Firebase console

No menu à esquerda, clique em Crashlytics e, em seguida, clique no botão Ativar .

Adicionando a dependência

Adicione a dependência firebase_crashlytics no pubspec.yaml , conforme mostrado abaixo:

dependências

: vibração: sdk: flutter cupertino_icons: ^ 1.0.2 firebase_core: ^ 1.0.1 firebase_auth: ^ 1.0.1 google_sign_in: ^ 5.0.0 cloud_firestore: ^ 2.2.0 firebase_remote_config: ^ 0.10.0 + 2 firebase_crashlytics: ^ 2.0.6 #new

Adicionando código para detectar erros

Abaixo está o código para inicializar o Crashlytics e detectar quaisquer erros não detectados:

//Crashlytics
esperar FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled (true);
//Passe todos os erros não detectados para o Crashlytics.
Função originalOnError=FlutterError.onError como Função;
FlutterError.onError=(FlutterErrorDetails errorDetails) async { esperar FirebaseCrashlytics.instance.recordFlutterError (errorDetails); //Encaminha para o manipulador original. originalOnError (errorDetails);
};

Você pode testar a detecção de erros simplesmente escrevendo o código abaixo em qualquer lugar:

//Forçar travamento
FirebaseCrashlytics.instance.crash ();

Seria algo assim em seu Firebase console:

Analytics

O plug-in Analytics ajuda a descobrir como os usuários estão realmente usando seu aplicativo e fornece dados que você pode usar para melhorar a experiência do usuário. O plug-in oferece relatórios ilimitados para até 500 eventos distintos.

Já optamos por habilitar análises para nosso aplicativo de demonstração, portanto, iniciaremos a integração em nosso aplicativo.

Adicionando a dependência

Adicione a dependência firebase_anlytics no pubspec.yaml , conforme mostrado abaixo:

dependências

: flutter: sdk: flutter cupertino_icons: ^1.0.2 firebase_core: ^1.0.1 firebase_auth: ^1.0.1 google_sign_in: ^5.0.0 cloud_firestore: ^2.2.0 firebase_remote_config: ^0.10.0+2 firebase_crashlytics: ^2.0.6 firebase_analytics: ^8.1.2 #new

Logging the events

There are a lot of predefined events to log, such as buy, add to cart, login, etc. For our example, let’s try to add a login event:

ElevatedButton( onPressed: () async { User? user=await Authentication.signInWithGoogle(); if (user !=null) { database.storeUserData(user: user); Navigator.of(context).pushReplacement( MaterialPageRoute( builder: (context)=> Home( user: user, ), ), ); await analytics.logLogin(); } }, child: Text('Sign in with Google'),
)

You can also log the custom event like so:

Future _testSetCurrentScreen() async { await analytics.setCurrentScreen( screenName:'Analytics Demo', screenClassOverride:'AnalyticsDemo', );
}

Here’s how you can see the all logged events:

The full source code is available on GitHub.

Conclusão

In this tutorial, we learned how to integrate the FlutterFire plugins Authentication, Cloud Firestore, Remote Config, Crashlytics, and Analytics in a Flutter app. We then built an example app to show how these FlutterFire plugins work together in a practical application. Finally, we demonstrated how to use FlutterFire plugins to test your app for errors and gather data to help you improve the user experience.

The post Add Firebase to your Flutter app with FlutterFire plugins appeared first on LogRocket Blog.