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

Haciendo BLoC Singleton en Flutter

8/68
Recursos

"En la clase anterior estructuramos nuestro c贸digo usando BLoC Pattern, ahora en esta clase usaremos otro patr贸n de dise帽o llamado Singleton.

Un archivo de vista debe tener su archivo de l贸gica de negocio, se podr谩n comunicar, llamarse, s铆 una vista necesita hacer login, entre otros. Podemos tener varias vistas comunic谩ndose con una sola l贸gica de negocio.

Usaremos 茅ste ejemplo para ilustrar lo que queremos hacer, recuerda que queremos exponer la l贸gica de negocio lo m谩s alto posible para que sus hijos puedan acceder a el:

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return BlocProvider (
            bloc: AppBloc(),
            child: MaterialApp(
                title: 'Yo Sleep',
                home: MainPage(),
                initialRoute: 鈥榤ain鈥,
                routes: {
                    'main': (context) => MainPage(),
                }
            ),
        );
    }
}```

Aportes 28

Preguntas 4

Ordenar por:

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

Hola a todos me gusta mucho sus cursos chicos, pero siento que para haber hablado de bloc singleton, debieron explicar sobre como funciona el tema de herencia, el contexto y los m茅todos de los statefuls widgets en paticular el didChangeDenpendecies ya con el podemos hacer llamado al bloc provider por que es el primero que carga el contexto de nuestro widget, justo antes del build.

Vi el curso de flutter b谩sico y me encant贸 (gracia por el Ana!!), por ello segu铆 investigando por mi cuenta, y el camino que me toc贸 recorrer para entender el patr贸n bloc fue pasar primero por entender como funcionan los m茅todos propios de los stateful y stateless widgets, luego por el InheritedWidget (propio de flutter) y al final - ya habiendo entendido el tema de contexto- el patr贸n bloc con los respectivos streams y programaci贸n reactiva.

Voy en orden con el curso, no s茅 si luego esto ser谩 topado, pero siento que falt贸 esa informaci贸n antes de hablar sobre el patr贸n bloc.

Para los que no conocen el patr贸n Singleton les comparto un link de una web que explica este patr贸n de manera bastante sencilla
SINGLETON

**El proyecto no me corr铆a **馃槮 me aparec铆ann un mont贸n de errores y al final me marcaba Gradle task assembleDebug failed with exit 1. Despu茅s de probar muchas cosas, me funcion贸 cambiar el minSdkVersion a 21 y el targetSdkVersion a 28. Esto en la ruta android/app/build.gradle.

Tambi茅n pueden probar con el comando flutter clean en la consola, estando en el directorio de la aplicaci贸n.

Todo este tiempo desarrollando a ensayo y error para saber que NO se debe REINVENTAR la rueda.

Por aqui les dejo mi repositorio actualizado y funcionando hasta este punto.

Para instalarlo en tu terminal de visual code escribe el siguiente comando:

 flutter pub add generic_bloc_provider

Muchas Views relacionados a un mismo Bloc no creo alto acoplamiento y podria causar problemas a futuro? no hay forma de hacer Bloc y View mas descontraidas?

El curso me parece fant谩stico, pero esta muy desactualizado.

El proyecto de GIT ya no funciona debido a que fue hecho con una version muy vieja de flutter y android. Seria una buena idea darle una actualizada al repo

Singleton

Patr贸n de dise帽o que restringe la multiplicidad de instancias, a una sola.

.
La utilidad de este patr贸n radica en la necesidad de coordinar las acciones a lo largo del sistema.
.

Singleton como State Store

En el ecosistema web, se conoce como al Store como el 煤nico estado de verdad donde la aplicaci贸n registra y gestiona la informaci贸n a lo largo de una aplicaci贸n.
.
Siendo Flutter inspirado en React + Redux, menciona la importancia de un adaptador o abstracci贸n de un solo nicho de verdad.

import React from 'react';
import { render } from 'react-dom';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reduxThunk from 'redux-thunk'

import reducers from './reducers/index.js';

const store = createStore(
	reducers,// All reducers
	{},// Initial state
	applyMiddleware(reduxThunk)
);


render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById('root')
);

.
En el caso de Flutter:

void main() => runApp(
      // Create and provide the bloc.
      BlocProvider<CounterBloc>(
        creator: (_context, _bag) => CounterBloc(),
        child: App(),
      ),
    );

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Access the bloc with O(1) computation complexity.
    final bloc = BlocProvider.of<CounterBloc>(context);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: StreamBuilder<int>(
            stream: bloc.count,
            initialData: bloc.count.value,
            builder: (context, snap) => Text(
                  'count: ${snap.data}',
                  style: Theme.of(context).textTheme.title,
                ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () => bloc.increment.add(null),
        ),
      ),
    );
  }
}

Les comparto la URL del paquete de generic_bloc_provider
BLOC_PROVIDER

Gran clase

Gracias a este video entend铆 el patr贸n Singleton.

Interesante 馃槷

Libreria:
generic_bloc_provider: ^1.0.9

Hola buen d铆a a todos, por favor: alguien tiene una idea de c贸mo calcular la distancia y tiempo aproximado entre dos puntos usando la librer铆a de Google Maps usando flutter?

De antemano agradezco por su ayuda.
Saludos,

Estoy viendo este curso, y est谩 s煤per bien, pero creo que el salto desde el curso b谩sico y este es demasiado grande. Quiz谩 hablar de bloc sin usarlo con autenticaci贸n ser铆a m谩s claro. Tuve que ver los videos varias veces para entender la parte de bloc y luego la de login

estoy me suena muy a redux! jeje

Saludos en el 2023 , por si alguien no puede instalar generic\_bloc , lo mejor es usar el comando : ```txt flutter pub add generic_bloc_provider ```y modifica las dependencia en el archivo pubspec.yaml automaticamente

Se parece mucho al ProviderScope de Riverpod

Ok

Genial!

me agrada esa libreria provider

Cuando se dict贸 este curso, BLoC esta muy joven. Ahora existen m谩s herramientas dentro de la librer铆a que lo hacen eficientes. Ya no es necesario ni recomendado exponerlos con un Singleton de blocs.

Recomendable el Curso de Buenas Pr谩cticas para Escritura de C贸digo, aqui explican SOLID y Patrones de dise帽o.

Para poder entender mejor este video me ayudo leer la documentaci贸n oficial de flutter de manejo de estados y provider:

https://esflutter.dev/docs/development/data-and-backend/state-mgmt/simple

Comprende el concepto de singleton , b谩sicamente, es un patr贸n de dise帽o que se enfoca en que haya solo una instancia de un objeto. Para este caso, esta idea de utilizar un estado global caer铆a en la categor铆a de singleton.

Para los que vienen de React, todos estos conceptos se relacionan mucho con Redux.

Considero super ut铆l el siguiente video para profundizar mas sobre el tema de BLoC en Flutter

https://www.youtube.com/watch?v=vY4KmVqXEGE&t=173s&ab_channel=HenryCode

Hola,

a ver si entend铆:

Los provider, exponen la l贸gica del negocio para que las demas vistas puedan acceder a ella, esto evita que tengamos que realizar un Bloc por cada vista que tengamos. 馃槃