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

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Tipos de Arquitecturas para Flutter

4/68

Lectura

Vanilla

En esta arquitectura la lógica y la vista se colocan en el Widget. Su principal beneficio es que es simple y autónoma. Conectado en cualquier parte de tu aplicación, recuperará y renderizará datos.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 31

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Está bueno el curso, pero hace muchas aserciones que no son del todo ciertas y eso ocasiona que se generen bases no totalmente correctas sobre la tecnología o en este caso la arquitectura. Scoped Mode no reconstruye toda la pantalla. https://pub.flutter-io.cn/packages/scoped_model y dependiendo de tu aplicación puede ser conveniente o no.

Vanilla
Se implementan lógica y vista en el widget, lo que la hace simple y autónoma. No obstante en cuanto el proyecto va creciendo se va haciendo caótica dentro del documento. Rompe con el principio SOLID que dice que una clase debe mantener una responsabilidad (Single responsability). Vista y controlador son dos responsabilidades.

Scoped Model
Librería de terceros sacada del código base de Fuchsia (OS). Aquí si un widget cambia de estado se reconstruye todo el árbol/pantalla. Cumple con el Single Responsability, separa lógica y UI. Pero la dependencia de Widgets la hacen difícil de mantener.

No estoy totalmente de acuerdo con la descripción de la arquitectura de Scoped Model en cuanto se refiere a reconstruir el árbol completo (toda la pantalla). Esto no es cierto.

Como lo pueden encontrar en su documentación Solo se reconstruye el widget englobado dentro de ScopedModelDescendant.

Interesante, pr√°cticamente nos est√° diciendo que usemos BLoC xd

La verdad es que el curso parece tener un tiempo y no han actualizado las demas arquitecturas que pueden imprementar:

  • Promises ( Parecido al redux de React y parece ser la preferida hasta ahora (2020))

  • Getx

Ambos son librerias de terceros

Hola falta la explicación de Bloc !!!

Est√° interesante la lectura sobre las arquitecturas, seguir√© con las siguientes ‚̧ԳŹ

El saber lo mucho que voy a agradecer estas clases en futuras prácticas es increíble!

Pienso que se debería hablar de Provider ya que este simplifica mucho más más el manejo de la información en los Widgets

Aqui les dejo una guía completa para la arquitectura ScopedModel
incluye un peque√Īo tutorial para que lo chequen.

Qu√© maravilla que existan cosas como estas. Y considero que es fundamental conocerlas, porque por lo menos en mi trabajo (desarrollando con Flutter) existe un caos de c√≥digo brutal, y saber de arquitectura podr√≠a aportar un enorme valor al desarrollo. ‚̧ԳŹ

problemas con RaisedButton?
Bueno, es porque fue deprecado. quiza estes buscando
Algo tarde, pero por si ElevatedButton

Espere mucho para este curso

Excelente comparación este curso promete mucho !

¬°Genial! ūüėĄ

Aqu√≠ escrib√≠ hace tiempo un ejemplo del principio de responsabilidad √ļnica de SOLID que se habla en este articulo, el ejemplo toma como referencia JAVA pero puede aplicarse en cualquier lenguaje.

Arquitecturas de software para Flutter

El comportamiento de las aplicaciones en Flutter esta basada en la diferencia que existe el estado efímero y el estado de verdad o información.
.

El estado efímero hace referencia a una representación causada o de en consecuencia del estado físico de un componente o vista.

Desde el punto de vista exacto, nos referiremos al comportamiento que solamente necesita StatefulWidget , como lo es una animación o un estado básico de estado-efecto.
.
Por lo regular, el patr√≥n de dise√Īo a utilizar ser√≠a Vanilla ya que el widget gestionar√° su propio estado, reconstruy√©ndose cada vez que √©l mismo indique de alg√ļn cambio.
.

El estado de verdad será aquel que fluye a lo largo de tu aplicación y se relacionará con otras vistas o componentes.

.
En Flutter, se puede encontrar diferentes conceptos como scoped (donde los widget poseen un nicho de verdad, cuando este cambie, los hijos registrados se actualizarán) o BLoC (basado en el concepto de 3 capas inicial, carga y de información).
.
Sin embargo, no hay una regla universal que indique ocupar una, otra o ambas concepciones de estado. Para el framework de Flutter, es posible implementar y replantear seg√ļn sea el caso.
.
De lo anterior, se cuenta con el siguiente diagrama:
.

Vanila también podría sconocerse como código spagueti, y hace referencia a la dificultad con la que se leé el código de una aplicación, también del cumplimiento de principios SOLID.

https://es.wikipedia.org/wiki/Código_espagueti

base de datos en firebase

Genial, Es bueno conocer otras arquitecturas

No veo la información sobre BLoC… @anncode podrias agregarla.

Oki doki!

me gustar√≠a usar flutter_redux porque vengo de React Native, pero ya es momento de aprender nuevos patrones de dise√Īo

Había pensado en la forma más correcta de realizar la separación de las capas, que bien que lo estamos viendo.

Bueno, tambien depende del tipo de aplicacion, y de que realmente se sientan comodos al programar. ambos patrones parecen buenos

muy buena explicacion

Excelente explicacion ūüėĄ

Wow, es la primera vez que tengo contacto con las arquitecturas y logre entender en cierta medida lo importante y indispensable en un proyecto

Habr√° alg√ļn curso, con provider?,

no existe en flutter algo parecido a REDUX (o Vuex)? ya me acostumbre tanto al estado centralizado y las mutaciones que seria muy practico utilizarlo en Flutter.

genial!