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

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

9/58
Recursos
Transcripción

Te hemos escuchado y finalmente traemos a este curso la integración con Firebase y Flutter, pero ojo con la compatibilidad entre librerías. Para que nada se nos ““rompa”” nuestra querida profesora ha desarrollado unos ““hacks”” para que funcione tanto en iOS como en Android, sigue paso a paso los códigos y cuéntanos en los comentarios.

Vamos a añadir un proyecto a Firebase, le colocaremos un nombre y finalmente creamos el proyecto; registraremos la aplicación para Android y pondremos los campos que nos piden, necesitaremos registrar una clave SHA-01 y es muy recomendado que lo hagamos para mayor seguridad.

Luego descargaremos un archivo llamado google-services.json el cual pondremos en la carpeta app de nuestro proyecto. Debemos cambiar la directiva minSdkVersion en el archivo build.gradle que está en la carpeta app al valor 21 para tener una mayor compatibilidad.

Ahora añadiremos el SDK de Firebase en nuestro proyecto para empezar a trabajar con él, iremos al archivo build.gradle que se encuentra en la raíz de nuestro proyecto, iremos a la parte de dependencias y añadiremos la línea de código que nos dice; ahora iremos al archivo build.gradle en la carpeta app para añadir otra implementación en la parte de dependencias, y nada más, cualquier otra configuración que diga Firebase para el SDK ya no es necesario para nuestro proyecto.

Aportes 76

Preguntas 8

Ordenar por:

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

Si a alguno no el funciona el “keytool” y no logra arreglar el problema con los demás comentarios, como me paso a mi, pueden seguir los siguientes pasos:

  1. Ir a la ruta C:\Program Files\Java\jdk1.8.0_192\bin ->(independientemente de que versión de jdk tengan)
  2. copiar esa dirección
  3. ir a este equipo y hacer clic derecho
  4. clic en propiedades
  5. clic en “configuración avanzada del sistema”
  6. clic en variables de entorno
  7. buscar la variable que dice “Path”
  8. clic en “editar”
  9. clic en “Nuevo” y pega la dirección de el primer paso.
  10. aceptar, aceptar, aceptar XD
  11. Abre el Windows PowerShell y escribe "keytool"
    ya será reconocido por su consola el comando keytool

Ojo! si no quieren seguir los pasos pueden ver este vídeo donde se explica paso a paso. Yo lamentablemente lo encontré luego de arreglarlo por mi cuenta después de ratos de investigar y probar varias cosas. 😉

Al final lo logre de otra forma:
En su proyecto de Android Studio pueden abrir la carpeta “android”, luego click derecho a “gradlew” y “open in terminal” o “abrir en terminal” como les aparezca.
Por ultimo pegan gradlew signingReport al lado de la ruta del proyecto. Por ejemplo, yo lo pegue asi: K:\curso-avanzado-flutter\Curso-de-Flutter-Avanzado-en-Platzi\android>gradlew signingReport
Luego enter y esperen a que se haga la magia.
Les advierto que van a pasar cosas raras, pero si tienen paciencia al final va a aparecer una lista con un color distinto que diga:
Variant:
Config:
Store:
Y en una de esas va a aparecer SHA1: Alli encontraran el certificado de firma de depuracion SHA1 solo lo copian y lo pegan.

En Windows utilizando el PowerShell lo que me funciona fue:

keytool -exportcert -keystore C:\Users\<your_user>\.android\debug.keystore -list -v

La sección de integración a Firebase del curso ha quedado un poco desactualizada. Mi recomendación es que sigan la guía oficial en la documentación de Firebase. La pueden encontrar acá: Add Firebase to your Flutter app

Acá tiene una forma de obtener el SHA01 directamente desde AndroidStudio.

Otra forma de generar el SHA-01 es mediante el android studio. Pueden abrir solamente la carpeta de android dentro del proyecto de flutter con el android studio.

Una vez alli, en la parte superior derecha de la pantalla hay un boton con el elefatito de gradle, al presionarlo se desplagara una lista de los diferentes archivos gradle en nuestro proyecto.

Al seleccionar el gradle(root), buscamos en Task -> android -> signingReports. Damos doble click alli, y esperamos a que por consola nos impriman todos los MD5 y SHA-01 relaccionados con nuestro proyecto

Ya existe una documentación oficial en Firebase para Integrarlo con Flutter, les recomiendo revisarlo.
https://firebase.google.com/docs/flutter/setup

!Aviso Importante! el curso esta muy desactualizado en esta parte!
Lo mejor es que sigan la documentacion oficial de firebase acerca de como conectar firebase a flutter
https://firebase.google.com/docs/flutter/setup?platform=android

Agustinsosa: tienes el set Java_Home? Si no lo tienes descarga el JDK:
version 14:
https://www.oracle.com/java/technologies/javase-jdk14-downloads.html
instalalo y pruebas, si no sabes como instalarlo mira este video de Platzi: https://platzi.com/clases/1631-java-basico/21173-creando-un-entorno-de-desarrollo-en-java-en-window/

Claro, no es necesario que instales el IDE que alli aparece, solo el JDK, tambien puedes instalar la version 8 o la version 11 que son las que utiliza el video. Si despues de esto no funciona puedes escribirlo aqui y te doy otra solucion.

si al ejecutar el comando en mac les arroja un error como este,
error de herramienta de claves: java.util.IllegalFormatConversionException: d != java.lang.String
java.util.IllegalFormatConversionException: d != java.lang.String
at java.util.Formatter$FormatSpecifier.failConversion(Formatter.java:4302)

deben ejecutar el comando asi:
keytool -J-Duser.language=en -list -v
-alias androiddebugkey -keystore ~/.android/debug.keystore

como que hay algun problema con el idioma (language)

En mi caso tuve los siguientes problemas y así los solucioné (Windows 10):

  1. Quitar la barra invertida :
    keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

  2. Mi nombre de usuario contenía un espacio por lo que tuve que colocar la ruta entre comillas:
    keytool -list -v -alias androiddebugkey -keystore "C:\Users\Joan Paul\.android\debug.keystore"

  3. Por alguna razón se mostraba un error por el lenguaje de java (error de herramienta de claves: java.util.IllegalFormatConversionException: d != java.lang.String
    java.util.IllegalFormatConversionException: d != java.lang.String)
    , así que tuve agregar “-J-Duser.language=en” para cambiar a inglés:
    keytool -list -v -alias androiddebugkey -keystore "C:\Users\Joan Paul\.android\debug.keystore" -J-Duser.language=en

Finalmente funcionó, espero les sirva.
Links: https://www.lucadentella.it/2017/11/28/java-illegalformatconversionexception-importando-un-certificato-ssl/

Seria bueno un curso de flutter + laravel como alternativa a firebase

El curso se debió enfocar en como consumir una api por que no todos trabajamos con firebase, mysql, postgrest etc.

Guia de Firebase para Flutter: https://codelabs.developers.google.com/codelabs/flutter-firebase/, si se hace exactamente al pie de la letra funciona pero con la versión 0.9.13 que menciona Anahí en el siguiente vídeo al incluir la dependencia cloud_firestore en el archivo pubspec.yaml

Hola chicos, en ciertas ocasiones desde windows no es tan fácil, sin embargo pueden acceder al folder de proyecto/android y ejecutar en la consola el comando ´´´gradlew signinReport´´´ allí en la consola podrán ver el SHA-1 asignado tanto al release como al debug.

ami me funciono posicionandme en la ubicacion del keytoll eliminando la \ y listo me salio contrase;a pero solo presione enter y ya
keytool -list -v
-alias androiddebugkey -keystore C:\Users"PROGRAMADOR V 4.3".android\debug.keystore

Deben actualizar el curso

Hola, esto fue lo único que me funcionó para obtener el SHA1, espero pueda servirles Obtener el SHA1

“keytool” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable!
Me sale este mensaje al momento de poner el comando, en windows!!!

A mi me sucedió lo siguiente:
Tengo una MacBook Pro y al momento de querer generar la clave SHA-01 se me presentó el siguiente error:

keytool error: java.lang.Exception: Keystore file does not exist

Este error significa que el archivo debug.keystore no existe en la carpeta .android

Para solucionarlo ejecute el siguiente comando dentro de la carpeta .android

$ keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 -dname "C=US, O=Android, CN=Android Debug"

Posterior a eso ejecute lo siguiente:

$keytool -importkeystore -srckeystore debug.keystore -destkeystore debug.keystore -deststoretype pkcs12

Esto generó el archivo debug.keystore faltante y ya por ultimo ejecuté el comando:

keytool -list -v \
> -alias androiddebugkey -keystore ~/.android/debug.keystore

y obtuve la clave SHA-01

Este fue el comando que utilice y funciono perfectamente:
keytool -list -v -keystore “C:\Users<USER>.android\debug.keystore” -alias androiddebugkey -storepass android -keypass android

tambien puedes sacar la huella sha1 en el mismo android studio en la parte derecha donde dice dradle->app->signingReport

SPOILER ALERT: Es **importantisímo **que generen el SHA-1 para al autenticación con GoogleSignIn

Ese forma de obtener el nombre del paquete de Android yo lo obtenía de otra forma que vi en videos de Youtube… app ->src ->main ->AndroidManifest.xml -> Package=“Nombre de la app” Pero la forma que lo hace Anncode es mas mejor grax…

para crear tuve que usar: keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
y me funciono

Si tienen problemas para obtener el SHA1 en Windows pueden intentar así

keytool -list -v \
-alias androiddebugkey -keystore C:\\Users\\Abdias\\.android\\debug.keystore

Pueden usar las versiones que genera el proyecto de Flutter updated minSdkVersion to API level 16 Pueden leer más al respecto en Google Play services distribution policy

Hola, si tienen problemas para encontrar el SHA-1, dentro de los comentarios hay varias formas, la del video puede que a algunos no les sirva. Particularmente me funcionó “keytool -list -v \ -alias androiddebugkey -keystore C:\Users\TUUSUARIO\.android\debug.keystore”, en W10. EN Youtube o google tmb pueden encontrar alguna forma.

para ver la llave de forma más sencilla en caso de que el comando en Windows no funcione…

Abrir terminal en AndroidStudio o vsCode

cd android
gradlew signinReport

Después de terminar muestra la información necesaria.

Ya Firebase tiene documentación para integrar el proyecto a Flutter directamente: Documentación Firebase

Para los que les sale el error de que no existe el archivo, les recomiendo este link de stackoverflow
https://stackoverflow.com/questions/2194808/debug-certificate-expired-error-in-eclipse-android-plugins/2196397#2196397
y luego si seguir el paso del firebase

me funciono de la siguiente manera:

keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 10000

luego el comando para ver la clave SHA-1:

keytool -list -v -keystore debug.keystore

Configuraciones previas al proyecto Flutter

Si a alguno no le ha podido funcionar el comando keytool le aconsejo lo que a mí me sirvió primero que todo nos paramos en la ruta donde tenemos el archivo .android en mi caso es:
C:\Users<SuUSUARIO>.android
le damos clic derecho y abrimos con cmd o simplemente abrimos cmd y copiamos esa ruta usando el comando cd seguido de la ruta
Ahora tenemos que crear el keystore de lo contrario no les funcionará el comando que utilicé fue el siguiente:

keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Desde allí el les va a pedir que coloquen unos datos personales, y la contraseña, no se les olvide el alias que le pusieron y el nombre de la keystore
Una vez diligenciado estos datos les originará el archivo keystore en la carpeta .android

Ahora sí pueden usar el comando
keytool -list -v -alias <alias_name> -keystore C:\Users<SuUSUARIO>.android\my-key.keystore

Y listo. Continuar con la clase

Para sistema operativo Ubuntu 20.04.3.
Si les aparece el error “No se ha encontrado la orden «keytool»”

Ejecutar primero el comando: sudo apt install openjdk-11-jre-headless}

Y luego: keytool -list -v
-alias androiddebugkey -keystore ~/.android/debug.keystore

Espero les sirva 😄

ruta del SDK + keytool -exportcert -list -v -alias androiddebugkey -keystore %USERPROFILE%.android\debug.keystore

En Windows 10
Solo para quienes tienen el path listo.
La forma mas fácil de encontrar la clave es colocando bien la ruta no como aparece en el archivo.

  1. Busca el archivo debug.keystore en el en buscador de archivos da click derecho y le das ir a la ruta.
  2. Copia la ruta y pégala en el comando sin salto de lineal ejemplo:
    keytool -list -v \ -alias androiddebugkey -keystore C:\Users(aqui va tu nombre de usuario).android\debug.keystore.

si no puedes entrar a inresar la clave solo borra la diagonal de keytoll -list -v \ esa diagonal representa un salto de linea. esos de google son unos troll jaja

Para el que no le sale el SHA1 al ejecutar el comando, coloquen este

keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

Saludos, he leído cada uno de los aportes y la verdad es que no he podido solucionar el tema de las SHA01, he tenido que documentarme por días para ir solucionando uno a uno cada inconveniente que me aparece, por lo que es decepcionante tener que pagar por información a la “vanguardia” y darte cuenta que tienen mas de dos años sin actualizar o haber hecho una revision del contenido presentado.

Para los que no le funciona el keytool, en la terminal entren a la carpeta [TU_PROYECTO]/android e introduzcan:

./gradlew signinReport

Por si no pueden obtener el certificado de firma SHA-1 van a poner esto en su consola no importa en que carpeta este situado:

“C:\Program Files\Java<version_JDK>\bin\keytool” -list -v -keystore “C:\Users<tu_usuario>.android\debug.keystore” -alias androiddebugkey -storepa
ss android -keypass android

🤩🤩🤩🤩

todo bien por ahora 😃

por si a alguno le presento problemas al general la clave este link me soluciono el problema.

Para los que tienen problemas en windows o les dice que no reconoce el keytool, este video me soluciono todos los problemas:

En windows lo que me funciono fue:
keytool -list -v -keystore C:\Users\TUUSUARIO.android\debug.keystore -alias androiddebugkey -storepass android -keypass android

Documentación de Firebase de como implementarlo en Flutter:
https://firebase.google.com/docs/flutter/setup
.
*Este es un aporte del compañero Martín Chalén Chang, recuperado para que no quede en el olvido 😅. Porque es muy buena información. 👍

Mmm… ya cuando hay que andar haciendo hacks, no me gusta, mas en el caso de productos de una misma empresa. Estas cosas me la “bajan”. Seguiré soñando con un mundo mejor.

verifiquen que tengan el SDK de Java instalado para que les permita imprimir el SA1 del keytool

Para los que tengan problema con que no les reconoce keytool tienen que agregar la carpeta bin del jdk de java a sus variables de entorno y después generar la clave.

En Windows me srive:

keytool -list -v -keystore “C:\Users\yourusernamehere.android\debug.keystore” -alias androiddebugkey -storepass android -keypass android

Claro, donde dice yourusernamehere, va el nombre de su usuario !!

No me permite escribir la contraseña “android”. Al llegar a este punto el teclado no escribe nada. Alguna sugerencia?

me marca lo siguiente En línea: 1 Carácter: 39

  • keytool -exportcert -list -v \ -alias <your-key-name> -keystore <path …
  •                                   ~
    

El operador ‘<’ está reservado para uso futuro.
En línea: 1 Carácter: 65

  • … ool -exportcert -list -v \ -alias <your-key-name> -keystore <path-to- …
  •                                                             ~
    

El operador ‘<’ está reservado para uso futuro.
+ CategoryInfo : ParserError: (😃 [], ParentContainsErrorRecordException
+ FullyQualifiedErrorId : RedirectionNotSupported

Casi no lo logro esto fue lo que funciono para mi

keytool -list -v -alias androiddebugkey -keystore C:\Users\usuario.android\debug.keystore

Casi no logro sacar la clave, a mi me funcion abriendo PowerShell como administrador y llendo a la ruta C:\Program Files\Java\jdk1.8.0_144\bin y ahi puse el comendo .\keytool -exportcert -keystore C:\Users\crisa.android\debug.keystore -list -v y funciono por si alguien tiene problemas, gran clase, vamos por vamas

No pude con el Shell de Windows. Entonces me acorde que la consola de Git es Linux por lo que la use y puse el código tal como lo puso Anahí y listo funcionó.

Tengo un problema

bash: keytool: command not found```

y como se hace en modo release???

Esto del Keytool en Windows 10 lo resolví primero agregando la carpeta bin de java a las variables de entorno y luego con el comando keytool -exportcert -keystore C:\Users<USERNAME>.android\debug.keystore -list -v

Para los que desean poner el certificado de firma SHA-1

  • abren el terminal de android
  • escriben cd android y enter
  • despues escriben: gradlew signinReport y enter
  • esperen a que cargue y listo

espero que les haya servido

me costo un poco hacer este paso, esto podria ayudar a alguien:

Super avancemos 😄

Si hicieron el curso de kotlin para android el profesor explica como obtener el SHA-1 desde Android Studio y cuando tienes abierto un proyecto de kotlin en la parte derecha hay una opción que dice gradle le dan click ahí -> “Nombre de su proyecto” -> App -> Task -> Android -> signingReport
Y comenzara a correr después les mostrara su SHA-1

hasta el momento todo bien… a seguir…

Ninguna de las opciones de aquí abajo funciona… Ni tan solo una…

Si alguno utiliza VS-Code para Flutter, que me pregunte que he encontrado cómo se hace.

Una forma fácil de obtener el Certificado de firma de depuración es:

Acceder a la ruta android>app>src>main>java>io.flutter.pugins>GeneratedPluginsRegistrant
Una vez en el archivo, nos preguntará si queremos abrir un Android Studio para el proyecto de Android. Le decimos que sí.
Una vez abierto el editor, arriba y a la derecha aparece un botón con el nombre “gradle”. Hay que abrirlo, seleccionar “Tasks” y luego “SigninReport”. Se abrirá abajo una terminal con el resultado de lo que buscamos. Luego de copiar el código SHA1, se puede cerrar el editor.

Una forma MUCHISIMO mas fácil para obtener la llave en WINDOWS, pueden ejecutar este comando:

keytool -list -v -keystore "C:\Users\<LA RUTA DE TU USUARIO AQUI>\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

En Windows solo me funciono asi:

keytool -keystore C:\Users\<your_user>\.android\debug.keystore -list -v

Yeih! 😃 Genial!

SPOILER ALERT!

Será mejor que sigan las instrucciones claras dadas en Firebase al momento de ir agregando el proyecto Android. Porque no me funcionó como lo hace Anahí

Para implementar lo de keytools primeramente:

  1. Instalar jdk de java
  2. Agregar al path el bin de java (en Windows:buscar->variables de entorno-> path->agregar ruta del jdk/bin)
  3. En mi caso como tengo varias particiones y discos duros utilicé el siguiente comando
keytool -list -v -alias androiddebugkey -keystore D:\\Users\\pace_\\.android\\debug.keystore```

Hola si tienen problemas con keytool, pueden intentar hacer lo siguiente:

  1. Ir a la ruta donde tienen java instalado, ejemplo: C:\Program Files\Java\jdk1.8.0_192\bin

  2. Luego solo abren una terminal en esa ruta y digitan el siguiente código

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\Your-User\.android\debug.keystore" -list -v

para el SHA-1:
deben tener el jdk de java instalado y poner en variables de entorno la ruta del archivo bin
https://www.youtube.com/watch?v=y3n1uDB1vPM
luego ejecutar el comando remplazando con la ruta en tu computador:
keytool -list -v -alias androiddebugkey -keystore (%C:\Users%TU USUARIO%.android\debug.keystore%)<- la ruta del archivo debug.keystore