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

BLoC + Clean Architecture en Flutter

5/58
Recursos
Transcripción

En la clase anterior vimos que es BLoC, BLoC Pattern y cómo aplicarlo. En esta clase te explicaremos como hacer que el proyecto hable por sí solo de cómo funciona usando BLoC + Clean Architecture.

Debemos recordar que nuestro proyecto debe ser legible para nuestros compañeros de trabajo y cualquier persona que lo lea; un plus a esto el proyecto debe ser entendible por sí solo.

Aportes 41

Preguntas 4

Ordenar por:

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

Habría que evaluar que tan conveniente es exponer tus entidades como lo dice Clean , cuando tu proyecto tenga 30 relaciones por ejemplo. Tendrías 30 carpetas donde cada una representa la entidad que quieres exponer. Sin embargo si usaras solamente bloc , tendrías las mismas carpetas de siempre , lo que en ese caso tendrías muchos archivos correspondientes a las entidades. Creo que es cuestión de evaluar el proyecto , pero de manera general fue un gran video de parte de Ann

Hola a todos, hice un video sobre Flutter + Clean architecture usando GetX como gestor de estado, también tengo otro usando Provider 😃 https://www.youtube.com/watch?v=Qffojk-vjKY

Project onboarding is the process of enrolling resources to the project. The goal is to make sure that everyone involved in the project understands its business objectives and requirements, knows their role and the expected outcome of the project itself.
This way team members can contribute fully to the project, spending less time on trying to figure it out and more actually completing their tasks.
-Fuente

Un concepto tan simple, pero que a largo plazo puede traer beneficios al proyecto y a los equipos. Excelente tener este tipo de conocimientos para aplicarlo en futuros proyectos.

¡Esta arquitectura es muy TOP! Gracias anncode.

Clean Arquitecture
El enfoque principal de la arquitectura es la separación de las preocupaciones y la escalabilidad. Se compone de cuatro módulos principales: App, Domain, Data, y Device.
By: https://bit.ly/2yw2cui

Yo tenia ese sentir en el curso anterior de Flutter que muchos archivos estábamos creando y por como se nos ha venido enseñando sentía un solo desorden pero con este curso mejora sustancialmente. ¡Gracias!

Quisiera saber si funciona alguien podría decirme de que trata mi proyecto? 😉

Hay muchas maneras de aplicar una arquitectura limpia, esta es bastante interesante, es orientada a pruebas, lo que viene muy bien sabiendo que muchas empresas trabajan así.

Flutter TDD Clean Architecture - resocoder

Capas de Clean Architecture

Clean architecture es un conjunto de principios cuya finalidad principal es ocultar los detalles de implementación con respecto a la lógica de la aplicación.

En Clean Architecture, una aplicación se divide en responsabilidades representadas en forma de capas: App, Domain, Data, y Device.
.

Domain

Siendo el corazón de una aplicación, es la capa que es totalmente aislada de cualquier dependencia ajena a la lógica o los datos de negocio.

Esta capa, generalmente es escrita puramente en el leguaje de programación core.
.
En ella, podemos encontrar elementos como:

  • Entities. Reglas de negocio que, siendo particulares de la aplicación, pueden ser compartidas entre otras dependencias de negocio de la aplicación.
  • Usecases. Procesos de la aplicación e inherentes según sea el caso, orquestando el flujo de información a través de la aplicación, conocida como la lógica de la aplicación.
  • Repositories. Clases abstractas que definen funcionalidades y deberán ser implementadas según sea el contexto, permitiendo el concepto de inversión de dependencias.

.

Principio de inversión de dependencias. Son abstracciones de uso donde los adaptadores implementarán reglas de una capa quedando, esta última, aislada para que los adaptadores con el tiempo sean reemplazados.

.

App

Son todos aquellos Frameworks y/o librerías que se suelen utilizar en una aplicación para mostrar o almacenar información siendo, en conjunto, puentes de comunicación entre capas.
.
Emplean el concepto de polimorfismo, usando clases heredadas que implementan la representación de los repositorios, en la capa Domain.
.
Cada página, en la aplicación, define al menos 3 clases: View, Controller, Presenter.

  • View. Representada la UI de la página dependiente de un controlador que administra eventos.
  • Controller. Provee las necesidades inherentes a la vista, el cual implementa los eventos de los Widgets pero sin acceder a los mismos.
  • Presenter. Cada controlador tiene un presentador, el cual comunica los Usecases (mencionados en la capa Domain), el cual mandará información éxito / error.

De manera opcional se tiene:

  • Utilities
  • Constanst
  • Navigator

.

Data

Es la capa más lejana de interactividad cuya responsabilidad es la responsable de retornar información (proveniente de una API, DB local o ambas).

  • Repositories. Donde al igual que la capa Domain, posee abstracciones de casos de usos de transporte de la información DTO.
  • Mappers. Son mapeadores de la información o DAO.

De manera opcional se tiene:

  • Utilities
  • Constans

.

Device

Considerara como la capa más lejana y profunda, cuya comunicación está relacionada con la plataforma de uso y es la responsable de disparar funcionalidades nativas.

.

BLoC en Clean Architecture

Recordando que el objetivo de Clean Architecture es la dependencia donde todas se incorporan aun centro común, llamada Domain, BLoC fungirá como una interfaz mediadora entre una vista - modelo, decidieron lo que ocurrirá entre ambas.
.

Para los que trabajan en Visual Studio Code les recomiendo esta extensión que te permite crear carpetas con Clean Architecture pattern de una.
Flutter Feature Scaffolding
Super recomendado para trabajar ese patrón de forma rápida

Clean Architecture expone las entidades.

Explicas muy bien muchas gracias y se que el producto quedará con calidad.

Excxelente 😃

No se puede ver el episodio 6, se queda cargando o directamente dice que estan actualizando la web.

Excelente explicación, el curso va más allá al explicar sobre arquitectura

Simplemente me encantó como lo explcaste. Esta clase y la anterior.
Súper!

Arquitectura de flutter con BLoC + Clean Architecture

cada vez más claro, manos a la obra.

BLoC+CLEAN

Bloc and clean architecture, una forma de organizar el código para que sea posible compartirlo y entendible dentro del grupo de trabajo

Muy interesante! 😃

Interesante la manera de organizar el código

Que son los places?

Pero que buena forma de organizar el proyecto , esto te da un mejor contexto de lo que hace la aplicación ademas de que aun se sigue separando modular mente.

Genial se nota el cambio encuentra a la organizacion cuando se implementa una arquitetura

Empieza la explicación de BLoC + Clean

Arquitectura BloC
Maneja la estructura de archivos con las entidades dentro de cada carpeta “sin ser expuestas” ej.
`- ui
- user
- place

  • bloc
    -user
    -place
  • repository
    -user
    -place
  • model
    -user
    -place`

Mientras que la arquitectura BLoC + Clean expone las entidades así:
-Place -ui -bloc -repository -model -User -ui -bloc -repository -model

Excelente arquitectura!!

Excelente información, y doy fe de que todos estos patrones de diseño sí se aplican en la vida real en las empresas.

Básicamente y, sintetizando conceptos, lo que hacemos con Clean Arquitechture es darle claridad a nuestro proyecto exponiendo las entidades que lo componen. De esta manera, por ejemplo, un integrante nuevo del equipo de desarrollo puede entender la lógica del negocio que posee nuestra aplicación. 😃 ¡Genial!

Estas dos arquitecturas serian Bloc con superpoderes.

Definitivamente acabando este curso iré al curso de Arquitectura de Software

Hola a todos, alguien tiene conocimientos a cerca de hacer nuestra app responsive?

Si quieren aprender mas acerca de BLoC les recomiendo demasiado este vídeo de Diego Velasquez donde explica a detalle cada aspecto esencial para entender como todo un pro este patron y ademas explica Provider y State management https://youtu.be/QJngeHgHA50

Yo he tomado proyectos de una multinacional de out sourcing y utilizaban clean archiquecture para su proyecto (era un backend con node + express)

Ahora entiendo mucho mas la arquitectura de un proyecto BLoC + Clean Architecture lo mejor que he visto hasta ahora