Arquitectura de Aplicaciones

1

¡Renovaremos este curso! Te quedan unos días para concluirlo.

2

Pasos para aprender Flutter Avanzado

3

¿Qué es una Arquitectura de software?

4

Tipos de Arquitecturas para Flutter

5

Arquitectura BLoC en Flutter

6

¡Renovaremos este curso! Te quedan unos días para concluirlo.

7

BLoC + Clean Architecture en Flutter

8

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

9

Haciendo BLoC Singleton en Flutter

10

Aplicando Providers al Proyecto

Firebase y Flutter

11

¡Renovaremos este curso! Te quedan unos días para concluirlo.

12

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

13

Integrando Firebase a Flutter para iOS

14

Integrando Firebase a Flutter para Android

15

Creación de Pantalla de Login con Flutter

16

Creando botones reutilizables en Flutter

17

Autenticación de Firebase con Google

18

¡Renovaremos este curso! Te quedan unos días para concluirlo.

19

Implementando Firebase Authentication en BLoC Pattern

20

Streams en Flutter

21

Manejando una sesión con Firebase Authentication y Flutter

22

Implementando Google SignOut en BLoC

23

Implementando Google SignOut en View

24

Monitoreando y validando la conexión al Sign con Google

25

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

Cloud Firestore de Firebase en Flutter

26

¡Renovaremos este curso! Te quedan unos días para concluirlo.

27

¿Qué es Cloud Firestore de Firebase?

28

Analizando un modelo de datos no relacional

29

Creando un Modelo de datos en Cloud Firestore

30

Enviando datos a Cloud Firestore

31

Creando un Widget gradiente personalizado

32

Manejo de Desbordamiendo de Texto de Widget Text

33

Botón de Back en un Appbar en Flutter

34

Navegación entre pantallas en Flutter

35

Widget Text Appbar personalizado en Flutter

36

¡Renovaremos este curso! Te quedan unos días para concluirlo.

37

Widget TextField personalizado en Flutter

38

Creando una Safe Area para una interfaz que tiene un AppBar

39

Widget TextField con iconos en Flutter

40

Retocando el CardView

41

Mostrando imágenes en un CardView

42

Creando un botón de Submit en Flutter

43

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

44

Subiendo datos a Firestore de Firebase

45

Formularios en Flutter

Acceso al Hardware con Flutter

46

¡Renovaremos este curso! Te quedan unos días para concluirlo.

47

Acceso a la cámara en Flutter

48

Librerías de acceso a Hardware en Flutter

Firebase Storage en Flutter

49

¡Renovaremos este curso! Te quedan unos días para concluirlo.

50

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

51

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

52

¡Renovaremos este curso! Te quedan unos días para concluirlo.

53

Manejo de imágenes en Cloud Firestore

54

Cloud Firestore insertando referencias y arrays en la base de datos

55

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

56

Procesando datos con BLoC Pattern

57

Trayendo datos de Cloud Firestore

58

Persistiendo datos de un usuario logueado

59

Aplicando Filtros en Cloud Firestore

60

¡Renovaremos este curso! Te quedan unos días para concluirlo.

61

Construyendo los Places en la pantalla de Home

62

Mostrando los Places en la pantalla de Home

63

Actualizando datos en tiempo real

64

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

65

Insertando y obteniendo referencias en datos de Firestore.

66

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

67

StreamController, sink, add y StreamBuilder

Conclusiones

68

¡Renovaremos este curso! Te quedan unos días para concluirlo.

69

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Arquitectura BLoC en Flutter

5/69
Recursos

BLoC significa Business Logic Components, es un patrón de diseño que separa la lógica de negocio de la interfaz gráfica.

BLoC Pattern:

  • View (UI Screen): Contendrá toda la interacción con las vistas; podemos organizarla en screens y widgets.

  • BLoC: La capa de negocio estará contenida aquí, por ejemplo: registrarse a la aplicación, hacer login o hacer logout; toda vista que tenga una lógica de negocio deberá tener un componente BLoC.

  • Repository: Aquí se concentran las clases que se conectan con una fuente de datos; API, Endpoints, DataBase, etc.

  • Data / Model: Son nuestros modelos, los cuales nos ayudan a manejar los datos; PODO Plain Old Dart Object

Aportes 50

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Los POJOS de Java en Dart se llaman PODOS…
Entonces en C serian POCOS?,
Y en C# POSHOS?,
Que me dicen de Python?

🖐 Antes de irte cuéntame todas tus dudas sobre Arquitectura BLoC

Empieza diciéndome lo siguiente:

  1. ¿Qué fue lo que entendiste mejor?
  2. ¿Qué fue lo que no entendiste para nada?

Respondo a todas tus preguntas
Para eso estoy 🥰

He visto el curso de Udemy del prof. Fernando y él llama a esos directorios:

  • pages \ widgets
  • providers
  • model

excelente!

Arquitectura BLoC en Flutter
Creada por Paolo Sorares y Cong Hui.
Business Logic Component. Patrón de diseño que divide lógica del negocio de la UI.

  • View: Screens y Widget. Interacción con las vistas.
  • BLoC: Lógica del negocio; Login, Logout, registros, etc.
  • Repository: Clases con conexion a API, bases de datos, Endpoints, etc.
  • Data/ Model: Modelos de manejo de datos PODO, Plain Old Dart Object.

Este video explica muy bien los conceptos para entender que es BLoC (https://www.youtube.com/watch?v=vY4KmVqXEGE&t=605s)

Creo que la explicación sobre BLoC está muy a medias. Este patrón es mucho más que la organización y estructura de carpetas. Tiene cosas como la forma de compartir estados entre los componentes. Les recomiendo consultar fuentes externas en este caso.

Curso pésimo, deslavazado, desordenado, mal enfocado, inacabado, sin metodología ni pedagogía… Una pérdida total de tiempo y dinero. Algo se puede aprender (poco) hasta que se empieza con el patrón BloC y firebase (todo está obsoleto). Mal curso.

Wao! Ann si que motiva a seguir aprendiendo.

BLoC

Definición

BLoC se entiende como Business Logic Components.

.
Su concepto principal es el entender la representación de los eventos como streams (widgets que envían eventos y otros widgets que los responderán).

De lo anterior, podemos decir que BLoC es el mediador de esta conversación.

Esta arquitectura, organiza la aplicación en capas para identificar las clases según su función.
.

.
Cada capa, o grupo de clases, son responsables de una tarea general, la cual es el proveer interfaces de conexión.

  • BLoC Layer. Es la capa que contendrá los controladores o triggers que encauzan la información. Dicha capa, puede poseer conexiones a recursos de 3ros que resolverán ciertas necesidades, por ejemplo APIs, proveedores de servicios, etc.
  • Data Layer. Será la capa que se comunicará con el backend, desconociendo por completo la UI.

.

Streams and Sinks

Los Streams serán aquellos activos que emitirán eventos y, por su parte, los Sinks serán aquellos activos que recibirán los eventos.
.

.
BloC es propiamente entendido como un patrón FLUX, el cual conduce / envía información a través de Sinks o Streams, independizando al widget de la lógica del negocio.
.

Beneficios

  • La implementación temprana de pruebas unitarias, integración y funcionales.
  • Descentralización de la dependencia de la lógica vs la UI.

Excelente clase Ann !

1 Para iniciar BLoc en un tipo de arquitectura que significa Business Logic Components
2 Tiene View: que viene a ser la vista con el cual el usuario interactua
3 BLoc: Esta sección es para la lógica de negocio como el login, registro, logout, perfil, etc.
4 Repository o Resouces: Nos ayuda a conectar con nuestro banco de informacion
5 Data / Model: Es un modelo - por ejemplo nuestro modelo user creo

Bloc es una arquitectura muy buena y robusta! En mi opinión personal me gusta un poquito más implementar una arquitectura con el paquete Provider

Correción
01:35 - BLoC no fue propuesto por Paolo Sorares y Cong Hui, solo fue presentado por ellos.
El verdadero creador es Felix Angelov. En aquella época trabajaba en BMW.

¿Khé? No entendí casi nada, pero weno… a darle :3

Curso de fundamentos y arquitectura de software

Por fin pude entender como es el funcionamiento de BLoC. En otros tutos me perdía. Ahora sólamente falta es como aplicarlo.

Acorde a la arquitectura BLoC se manejan 4 diferentes capas:
Views, blocs, repository, model

En la capa view, todo lo que tiene que ver con widgets, screens…

En la capa bloc se manejan los casos de uso, ej. log in, log out, sign up, sign in

En la capa repository se manejan las APIS, conexión a firebase o servidor propio.

En la capa model se manejan PODOS (plain old dart object) en lugar de POJOS (plain old java object)

Gran clase, de verdad he aprendido mucho en esta plataforma

Genial! No solo aprenderé a usar mas cosas en Flutter complementando lo del anterior curso, también algo de arquitectura.

¿Qué es el patrón BLOC?
Es un sistema de gestión de estado para Flutter recomendado por los desarrolladores de Google. Ayuda en la gestión del estado y en el acceso a los datos desde un lugar central en su proyecto.
By: https://bit.ly/3c6AVNA

Me gusta la arquitectura Bloc, de hecho la he estado usando sin darme cuenta como se llamaba. Yo personalmente hago una pequeña modificación, y es que le pongo una carpeta padre, y a cada una le aplico el bloc, por ejemplo, auth, users, products, categories, etc., de manera que identifico que el archivo que estoy tocando esta estrictamente relacionado a la modificacion que quiero aplicar sin dañar otro archivo. Me ha funcionado muy bien para hacer mantenimiento a la aplicacion, por lo general, si no aplico esto tardo varios minutos buscando el archivo que quiero modificar.

Tuve muchos problemas al reproducir este vídeo, se quedaba quieto y me toca recargar, lo hice en 5 ocasiones.

Wuou, que clase tan genial, gracias!!

Excelente clase.

En el curso se habla de repository para cambiar de bases de datos pero en caso de que sea por medio de Api ¿ como realizo este cambio ?

curso de Dart

Ann:
Gran clase! Muchas gracias.
Me esta gustando mucho más este curso respecto al anterior.

Que buena clase. Un concepto mas aprendido

estoy emocionado por avanzar

Organización de un proyecto Flutter con BLoC pattern

Gran clase y al fin estamos entrando en cosas mas interesantes

Excelente clase, gracias

Excelente…!
Muy Puntual con la explicacion…

Ok, this is new for me! 😃

excelente

Muy interesante como es la organizacion y/o posible arquitectura de los proyectos flutter

La descripción resume muy bien el contenido del video. Desconocía lo de PODO, suena divertido. Supongo que si tengo que hacer uso del hardware como el acelerómetro, deberían sus clases ir dentro de resources (?)

Yo con sólo verla me motivo a estudiar.
Anahífan, je je

ESTA BUENA EL CURSO

Interesante la organizaciòn del proyecto

Interesante!!!

BLoC + Provider es lo mejor que hay para state management en Flutter.

Genial que Flutter tenga este patron de diseño, todo esto lo hace más organizado

Estoy muy tentado a organizar el View como lo dicta el patrón Atomic Design

😃

Siento que explicó Clean Architecture de una forma muy sencilla y eficaz, yo llevo 1 año utilizando Flutter y no había entendido bien como emplear Clean en mi proyecto, excelente clase

Todo muy claro, es fácil de comprender si se tienen conceptos previos de arquitectura de software, esta arquitectura es bastante parecida al MVC