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

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

3/58

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.

Por otro lado, escribir widgets de esta manera puede generar caos en el documento de vista de la app, sobre todo cuando la lógica empieza a extenderse a bifurcarse o es más avanzado.

Widget _buildInit() {
    return Center(
      child: RaisedButton(
        child: const Text('Load user data'),
        onPressed: () {
          setState(() {
            _isLoading = true;
          });
          widget._repository.getUser().then((user) {
            setState(() {
              _user = user;
              _isLoading = false;
            });
          });
        },
      ),
    );
  }

No te recomiendo mucho usar este tipo de Arquitectura pues aunque es fácil de aprender en realidad rómpe con uno de los principios SOLID que deben seguir todas las arquitecturas. Single Responsability la cuál dice que una clase debe tener solo una responsabilidad. En este caso la vista y el controlador son dos responsabilidades que están cayendo en la misma clase.

Scoped Model

Este es una librería de terceros Puedes encontrar toda la información aquí que no está incluída. Es extraída del código base del Sistema operativo Fuchsia.

Widget _buildInit(UserModel userModel) {
    return Center(
      child: RaisedButton(
        child: const Text('Load user data'),
        onPressed: () {
          userModel.loadUserData();
        },
      ),
    );
}

En esta arquitectura cuando un Widget cambia de estado se reconstruye el árbol completo (Toda la pantalla). En realidad esto no es tan conveniente pues lo que quisiéramos que sucediera idealmente es reconstruir solo el widget que está cambiando y no los otros.

Esta arquitectura es buena pues cumple con el Principio de Single Responsability pues separa la lógica del negocio de la UI, pero en general el mantenimiento de este se vuelve complejo por la grande dependencia entre Widgets, debes controlar muchos casos para lograr el efecto que quires dar a tu aplicación.

Aportes 30

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

Hola falta la explicación de Bloc !!!

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

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. ‚̧ԳŹ

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!