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

BLoC + Clean Architecture en Flutter

7

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

8

Haciendo BLoC Singleton en Flutter

9

Aplicando Providers al Proyecto

Firebase y Flutter

10

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

11

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

12

Integrando Firebase a Flutter para iOS

13

Integrando Firebase a Flutter para Android

14

Creaci贸n de Pantalla de Login con Flutter

15

Creando botones reutilizables en Flutter

16

Autenticaci贸n de Firebase con Google

17

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

18

Implementando Firebase Authentication en BLoC Pattern

19

Streams en Flutter

20

Manejando una sesi贸n con Firebase Authentication y Flutter

21

Implementando Google SignOut en BLoC

22

Implementando Google SignOut en View

23

Monitoreando y validando la conexi贸n al Sign con Google

24

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

Cloud Firestore de Firebase en Flutter

25

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

26

驴Qu茅 es Cloud Firestore de Firebase?

27

Analizando un modelo de datos no relacional

28

Creando un Modelo de datos en Cloud Firestore

29

Enviando datos a Cloud Firestore

30

Creando un Widget gradiente personalizado

31

Manejo de Desbordamiendo de Texto de Widget Text

32

Bot贸n de Back en un Appbar en Flutter

33

Navegaci贸n entre pantallas en Flutter

34

Widget Text Appbar personalizado en Flutter

35

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

36

Widget TextField personalizado en Flutter

37

Creando una Safe Area para una interfaz que tiene un AppBar

38

Widget TextField con iconos en Flutter

39

Retocando el CardView

40

Mostrando im谩genes en un CardView

41

Creando un bot贸n de Submit en Flutter

42

Env铆o de datos de un f贸rmulario en Flutter

43

Subiendo datos a Firestore de Firebase

44

Formularios en Flutter

Acceso al Hardware con Flutter

45

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

46

Acceso a la c谩mara en Flutter

47

Librer铆as de acceso a Hardware en Flutter

Firebase Storage en Flutter

48

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

49

Qu茅 es y c贸mo funciona Firebase Storage en Flutter

50

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

51

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

52

Manejo de im谩genes en Cloud Firestore

53

Cloud Firestore insertando referencias y arrays en la base de datos

54

Descargar im谩genes de Firebase Storage y mostrarlas en Flutter

55

Procesando datos con BLoC Pattern

56

Trayendo datos de Cloud Firestore

57

Persistiendo datos de un usuario logueado

58

Aplicando Filtros en Cloud Firestore

59

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

60

Construyendo los Places en la pantalla de Home

61

Mostrando los Places en la pantalla de Home

62

Actualizando datos en tiempo real

63

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

64

Insertando y obteniendo referencias en datos de Firestore.

65

Usando el cach茅 para cargar im谩genes m谩s r谩pido

66

StreamController, sink, add y StreamBuilder

Conclusiones

67

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

68

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/68
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 51

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

BLoC significa Busines Logic Componentes
Es un patr贸n que nos permite separar la l贸gica de negocio de la interfaz gr谩fica.

BLoC Pattern

  • View (UI Screen)
  • BLoC
  • Repository
  • Data / Model

View (UI Screen):

  • Contendr谩 toda la interacci贸n con todas las vistas
  • Podemos organizarla en screens y widgets (componentes individuales) que podemos reutilizar

BLoC:

  • La capa de negocio estar谩 contenida aqu铆. Casos de uso de la aplicaci贸n (funciones para Registrarse, Login, Log-Out).
  • Toda vista que tenga una l贸gica de negocio deber谩 tener un componente BLoC

Repository:

  • Se concentran las clases que se conectan con una fuente de datos.
  • API, endpoints, database, etc.
    Podemos tener varias fuentes de datos. Por ejemplo, intercambiar entre Firabase, servidor personal u otra fuente).

Data / Model: Son nuestros modelos que nos ayudan a manejar los datos.

  • PODO: Plain Old Dart Object
    Por ejemplo: User, Post, Message, Teacher, etc. Los cuales tienen atributos y m茅todos (email, name, lastName, etc). Getters y setters, toJson y fromJson

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