Arquitectura de Aplicaciones

1

Pasos para aprender Flutter Avanzado

2

¿Qué es una Arquitectura de software?

3

Tipos de Arquitecturas para Flutter

4

Arquitectura BLoC en Flutter

5

BLoC + Clean Architecture en Flutter

6

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

7

Haciendo BLoC Singleton en Flutter

8

Aplicando Providers al Proyecto

Firebase y Flutter

9

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

10

Integrando Firebase a Flutter para Android

11

Integrando Firebase a Flutter para iOS

12

Creación de Pantalla de Login con Flutter

13

Creando botones reutilizables en Flutter

14

Autenticación de Firebase con Google

15

Implementando Firebase Authentication en BLoC Pattern

16

Streams en Flutter

17

Manejando una sesión con Firebase Authentication y Flutter

18

Implementando Google SignOut en BLoC

19

Implementando Google SignOut en View

20

Monitoreando y validando la conexión al Sign con Google

21

Mostrando los datos de usuario de Google en la interfaz en Flutter

Cloud Firestore de Firebase en Flutter

22

¿Qué es Cloud Firestore de Firebase?

23

Analizando un modelo de datos no relacional

24

Creando un Modelo de datos en Cloud Firestore

25

Enviando datos a Cloud Firestore

26

Creando un Widget gradiente personalizado

27

Manejo de Desbordamiendo de Texto de Widget Text

28

Botón de Back en un Appbar en Flutter

29

Navegación entre pantallas en Flutter

30

Widget Text Appbar personalizado en Flutter

31

Widget TextField personalizado en Flutter

32

Creando una Safe Area para una interfaz que tiene un AppBar

33

Widget TextField con iconos en Flutter

34

Retocando el CardView

35

Mostrando imágenes en un CardView

36

Creando un botón de Submit en Flutter

37

Envío de datos de un fórmulario en Flutter

38

Subiendo datos a Firestore de Firebase

39

Formularios en Flutter

Acceso al Hardware con Flutter

40

Acceso a la cámara en Flutter

41

Librerías de acceso a Hardware en Flutter

Firebase Storage en Flutter

42

Qué es y cómo funciona Firebase Storage en Flutter

43

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

44

Manejo de imágenes en Cloud Firestore

45

Cloud Firestore insertando referencias y arrays en la base de datos

46

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

47

Procesando datos con BLoC Pattern

48

Trayendo datos de Cloud Firestore

49

Persistiendo datos de un usuario logueado

50

Aplicando Filtros en Cloud Firestore

51

Construyendo los Places en la pantalla de Home

52

Mostrando los Places en la pantalla de Home

53

Actualizando datos en tiempo real

54

Manejando la lógica de likes, como botón toggle.

55

Insertando y obteniendo referencias en datos de Firestore.

56

Usando el caché para cargar imágenes más rápido

57

StreamController, sink, add y StreamBuilder

Conclusiones

58

Conclusiones

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Implementando Firebase Authentication en BLoC Pattern

15/58
Recursos

Aportes 26

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Al parecer desde el 17 de agosto de 2020 todas las versiones de los paquetes de Firebase se actualizaron y ahora es necesario llamar la función Firebase.initializeApp() antes de usar cualquier servicio de Firebase, es necesario importar la librería firebase_core actualmente (0.5.0+) en el pubspec.yaml, encontré que hay varias maneras de echarlo a andar, sin embargo, la forma más sencilla, aunque no sé si la correcta es la siguiente:

import 'package:firebase_core/firebase_core.dart';
// ... 
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
// ...

Hola, para seguir avanzando en el curso
En el file bloc_user.dart tambien se debe poner UserCredential

Future<UserCredential> signIn(){
    return _auth_repository.signInFirebase();
  }

y el file sign_in_screen.dart en la ButtonCreen

onPressed: (){
                  userBloc.signIn().then((UserCredential user) => print("El usuario es ${user.user.displayName}"));
                },

En el metodo then puedes no poner el tipo de objeto y lo heredara en base al Future. De esta forma evitamos importaciones extra.

Efectivamente, como menciona el compañero, desde el 2020 se actualizó el paquete de Firebase y ahora se hace necesario inicializar la app. Yo lo hice de la siguiente manera:

  1. Se tuvo que agregar en el pubspec.yaml la siguiente dependencia
firebase_core: ^1.1.0
  1. Ajustar el main() de la página principal, en nuestro caso main.dart así:

Agregar el import

import 'package:firebase_core/firebase_core.dart';

y en el void main() ajustarlo de la siguiente manera:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}

Ya con eso funcionó, pero nuevamente surge la queja que se nota ya en varios videos, estos se encuentran desactualizados, se hace necesario que la tutora o directamente platzi gestione las actualizaciones de sus cursos

Solucionar error call Firebase.initializeApp()

Debe usar firebase_core asi queda mi archivo pubspec.yaml.

 //_pubspec.yaml
 firebase_storage: ^9.0.0
 cloud_firestore: ^2.3.0

y luego agregar el siguiente código en main.dart importando firebase_core y cambiando el metodo main asi.

// main.dart 
import 'package:firebase_core/firebase_core.dart';
// void main()  => runApp(MyApp());
void main()  async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

ah olvidé compartir en la clase anterior, pero en mi api tuve que encapsular lo que se retorna a la variable
FirebaseUser.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuthApi {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<FirebaseUser> singIn() async {
    GoogleSignInAccount googleSignInAccount = await _googleSignIn.signIn();
    GoogleSignInAuthentication gSA = await googleSignInAccount.authentication;

    FirebaseUser user = (await _auth.signInWithCredential(
      GoogleAuthProvider.getCredential(idToken: gSA.idToken, accessToken: gSA.accessToken)
    )).user;

    return user;
  }
}```

Realmente me quede perdido en cuanto la implementacion y como poder adaptar todo con cualquier api y no solo con firebase, voy a repasar varias veces esto pero si creo que esta muy generalizada la explicacion, no veo como poder adaptar esto…

ya casi, ya casi 😉

Hola Platzero, Recuerda cambiar <FirebaseUser> por <UserCredential>

Genial, pero creo que falta mas profundizacion en el tema de la arquitectura bloc, aun hay mucho vacios u.u

Favor recordar que en vez de usar FirebaseUser, ahora solo debes usar User como tal.

¡Excelente, he aprendido bastante de BLoC Pattern! 😄

Solo como aclaración hasta este punto, en el patrón BLoC, el BLoC no debe devolver el dato como tal sino un Stream, pero como el siguiente video se trata de Streams creo que en ese vídeo se cubre ese tema

Para los que aun tienen dudas sobre el patròn BLOC les sugiero este enlace (https://medium.com/comunidad-flutter/simplificando-la-gestión-de-estado-con-bloc-en-flutter-9d5670cd97d8)

a mi me sale userBloc es indefinido 😦

ala

Hey raza!, estuve peleando por que las versiones recientes (al momento de escribir esto) cambiaron, por ejemplo el _auth.signInWithCredential ya no regresa el usuario directo, regresa un tipo UserCredential, les dejo mi código por si les da pedos, conejo mi app Jalisco:

versiones de las libs:
firebase_auth: ^1.4.1
google_sign_in: ^5.0.4

// firebase_auth_api.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuthAPI {
  final GoogleSignIn googleSignIn = GoogleSignIn();

  Future<User> signIn() async {

    final FirebaseAuth _auth = FirebaseAuth.instance;
    final GoogleSignInAccount googleUser = await googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;


    UserCredential userCredential = await _auth.signInWithCredential(
        GoogleAuthProvider.credential(
          accessToken: googleAuth.accessToken,
          idToken: googleAuth.idToken,
        )
    );
    return userCredential.user;

  }
}

En cada lugar donde mencione FirebaseUser en la version actual solo hay que poner User

Cual seria el ejemplo cuando quiero implementar facebook y google gracias

😃 genial!!

Me aparece el siguiente error :C
Unable to find BLoC of type _BlocProvider<UserBloc>.

Y al compilar me aparece una pantalla roja con letras amaarillas que dice:
Unable to find BloC of type _BlocProvider<UserBloc>.

No sé que cambios se hayan hecho últimamente en Firebase/Flutter (Soy nuevo en esto), pero FirebaseUser arroja un error ya que ha entrado en desuso.

Revisando un poco la documentación encontré que cambiando lo que Anncode pone como FirebaseUser por User, el código funciona a la perfección.

concuerdo con el comentario anterior, hay que darle una vuelta de rosca a la explicacion.
Muy complejo todo

Buenas en caso de acceder al UserBloc desde la misma pagina ¿ se puede hacer de esta forma ?, ¿es valida?

// este código lo encontré en internet

class OtherPage extends StatefulWidget {

  @override
  Widget build(BuildContext context) {
    
    final UserBloc _userBloc = BlocProvider.of<UserBloc>(context);

    return MaterialApp(
      title: 'Other Page',
      home: BlocProvider<UserBloc>(
        bloc: _userBloc,
        child: _body(context)
      ),
    );
  }

  _body(context){
      final mm = bloc.userForget("");
      return Container();
  }

}

https://github.com/felangel/bloc/issues/74

esta bien instanciar el userBloc en el build ? eso no hace que se genere una nueva instancia cada vez q se reconstruye la pantalla (setState), no seria mejor instanciarlo en el initState() para q se instancie solo una vez al iniciar esa pantalla.

Cada vez se pone mejor, son las 5:30am Perú y sigo aprendiendo. A seguir se ha dicho!