Dominar Firebase con Flutter - Android y iOS

1. Introducción a FlutterFire: Si ya habías descargado la izquierda y otra para convertirte en un desarrollador de aplicaciones de pila completa, entonces debes saber cómo manejar la base de datos y otros servicios de backend. Hay muchas opciones disponibles, y entre ellas, Firebase es la mejor opción a la hora construir e implementar aplicación en el mercado en un corto periodo de tiempo, mediante el cual nos proporciona todo lo que necesitamos como autenticación, base de datos, publicación y análisis, aprendizaje automático, notificación push, y mucho más. Flutter Fire es un conjunto de plug-ins que un impulso de las apps de Florida para usar Firebase Services, Board Flutter y Firebase son propiedad de Google y es por eso que trabajan juntos sin problemas. En este curso, cubriremos todos los temas importantes como autenticar usuario pactado, correo electrónico y contraseña. Implementar operaciones cred de inicio de sesión de Google usando base de datos Firestore, manejo de excepciones, carga de archivos al almacenamiento, compresión de imágenes, etcétera. Son estos conceptos bastan para darte confianza como desarrollador para que puedas postularte para el trabajo de tus sueños. 2. Configura la base de recursos en el proyecto: En esta sesión, vamos a montar nuestro proyecto Firebase. Entonces primero vamos a crear una nueva inundación un proyecto. Saca tu directorio, luego ness CMD línea de comando, solo escribe, Flutter, crea, y luego el nombre de tu proyecto. Yo lo nombraré. Tercero, tercero, cinco victorias, luego pulsa Enter. Entonces estaré usando VS Code. Entonces simplemente agrega tu proyecto en este código, así. Ahora k, v tener nuestro proyecto. Ahora. Está bien. Ahora solo tienes que ir a tu navegador y escribir Firebase. Y aquí obtendrás la página oficial de firebase dot google.com. Aquí puedes ver productos y soluciones. Entonces, ¿cuáles son las extensiones? ¿ También? Cuáles son las grandes empresas y juegos que confían en Firebase. Entonces duolingo es famoso, y Lima por extremista y tus tanques es famoso. Lift también es una aplicación muy famosa. Venmo está lista famosa. Entonces aquí puedes ver Firebase, ¿ está siendo utilizado por mucha aplicación? Ahora, solo tienes que iniciar sesión con tu cuenta de Google aquí y luego dar click en ir a la consola. Sí, mira puedes ver mi cuenta de Google y luego solo tienes que hacer clic en ir a la consola. Y aquí tengo proyectos diferentes, diferentes, múltiples, pero estoy asumiendo que no tendrás ninguno. Simplemente tienes que hacer click en este proyecto y luego darle un nombre. Yo lo llamaré Firebase. Y si lo desea, puede habilitar y analítica. No quiero desembellecer ahora mismo. Entonces simplemente puedes hacer click en Crear proyecto. Después del proyecto esto se creó con éxito. Aquí, sólo tomará unos segundos. Firebase nos hará saber que nuestro nuevo proyecto está creado listo. Y nos dirigirá al panel de control del proyecto. Aquí, así. Ahora, tenemos nuestro dashboard y aquí puedes ver los productos Alda que nos está brindando eso es autenticación, almacenamiento de bases de datos. Y así nuestra primera tarea será configurar nuestra aplicación coqueteada para usar esta Firebase. Y desbloquearé configurado el Android, pero definitivamente si quieres, puedes configurar iOS y web también. Depende de ti. Para configurarlo. Basta con dar click en este botón de Android. Y ahora en esta pantalla, nos preguntará el nombre del paquete Android. Y este nombre de paquete. Podemos obtenerlo de nuestro director de proyecto de la EPA aleteo, ese es el Android. Entonces en esa app, solo tienes que ir a construir crédito. Aquí. Esto, esta es la ID de aplicación de nuestro aleteo. Simplemente tienes que ir y pegarlo aquí. Voy a nombrar en inundación allí Firebase. Y esta clave ácida SHA-1 es muy importante, pero la usaremos en los videos posteriores. Entonces después de que simplemente haga clic en Registrar App. El siguiente paso es descargar esta presentación de conflictos. Esto es muy importante. Contiene las claves API e información crítica para que Firebase use. Basta con dar click en esta descarga. Google services.js IN. Y después de que se haya descargado con éxito, simplemente tienes que ir y cortar ese archivo de la carpeta de descarga e ir a tu proyecto de flatter. Después ve a Android, luego ve a la aplicación y simplemente pégalo aquí. Eso es todo. Así es como se hace. Después de eso, haces clic en este siguiente en la Firebase. El tercer paso es agregar Firebase SDK. Ahora necesitaremos actualizar nuestra configuración de crédito para incluir el plugin de servicios de Google. Los primeros cambios estarán ahí en esa cama de nivel del proyecto. Net es que tenemos este Android todavía. Entonces el proyecto de ley a nivel de proyecto es éste. Aquí. Simplemente tenemos que copiar esta parte de clase y pegarla aquí. ¿ De acuerdo? Y entonces la deuda de construcción a nivel de aplicación está aquí. Tenemos esta carpeta de aplicaciones. Y en esta acumulación Gradle, tenemos que primero copiar esta implementación y pegarla aquí. Y a continuación, simplemente tienes que copiar esto, aplicar plugin com, Google GMS, servicios de Google, y pegado en la parte inferior. Eso es todo. Este código ya está ahí. Ya ha sido predefinido en proyectos de Florida. Ahora entonces el siguiente paso es agregar plugins de Firebase en nuestro proyecto. Porque la afinidad habrá algunas dependencias para Firebase. Y aquí solo tienes que dar click en Siguiente y luego ir a seguir oscureciendo y así sucesivamente. Está bien. Para las dependencias, simplemente tenemos que ir a dev y dispara con se accede a través de una serie de pasivos diferentes, diferentes. Uno para cada producto Firebase, es decir, ya sea base de datos, autenticación, analítica, almacenamiento. Firebase proporciona un conjunto de diferentes plugins. Sólo tenemos que escribir Firebase Core. El primer plugin que necesitamos. Basta con dar click en instalar y aquí, copiar esto, pegarlo en tu dependencia. Está bien. Entonces siguiente dependencia que necesitamos es el arte Firebase. Porque vamos a estar aprendiendo a autenticar usando Firebase profundidad no se copia y pega en nuestro archivo de especificaciones de Pub YAML. Está bien. Ahora hemos agregado con éxito las dependencias. Entonces el próximo cambio que tenemos que hacer es en la acumulación de nivel de aplicación Gradle aquí en esa configuración predeterminada, solo tenemos que escribir una línea de código que es de varias décadas. Un mal, cierto. Por lo que esta es una línea de código que se requiere. Cuando estamos tratando con Firebase. Esta cosa hay que recordar. Es una parte de configuración. Ahora, está bien. Todo está bien. Se puede ver en nuestra diapositiva también, nuestro primer paso de configuración proyecto Firebase está hecho. Entonces se hace nuestra configuración de nuestra aplicación. El archivo config se está guardando en ese proyecto. Después hemos agregado los SDK de Firebase, luego, plug-ins sordos también. Ahora el paso final es escribir esta línea de código en ellos, Main.Jack, para que nuestra aplicación en inicialice Firebase al principio cuando nuestra app sea papá, cuando se inicie nuestra app. Por lo que debe saber que tiene que inicializar las configuraciones de Firebase para hablar son comunicarse con el servidor. Por lo que en el archivo principal simplemente tienes que ir a la función principal y convertirlo en un fregadero. Entonces hay que escribir widget, coquetear sus enlaces inicio, asegurar inicializar. Eso significa que cualquier código que esté ahora por debajo se inicializará. Y luego la siguiente línea está despierta, Firebase, Firebase. Y luego inicializar aplicación que decía, este es el código que hay que recordar. Sólo confía en mí, siempre que estés usando Firebase, esto es lo primero que tienes que escribir. Entonces solo nuestra app e integre Firebase en ella. Ninguno, Eso es todo. El paso final es ejecutar la aplicación. Puedes conectar tu emulador o dispositivo Android físico para probar la aplicación. Y basta con hacer click en este Ejecutar y luego empezar a depurar. Tu app estará todo listo para ir. Y en la siguiente sesión, estaremos creando las UI requeridas para la aplicación de autenticación. Gracias. 3. Registrar y iniciar la UI: Bienvenido. En esta sesión, estaremos creando nuestra pantalla de inicio de sesión y registro. Porque obviamente cuando necesitaremos algún tipo de interfaz de usuario para interactuar con la base de datos Firebase, nuestra aplicación ahora se está ejecutando con éxito. Saber hay ahí que significa que Firebase se ha configurado correctamente. Primero creemos algunas carpetas dentro de lib porque prefiero algún tipo de estructuras plegadas en lugar de simplemente sacar archivos al azar. La primera carpeta voy a crear modelos, luego pantallas, y luego servicios donde se encuentran Alda API, los servicios de base de datos, se escribirán en la pantalla interior. Vamos a crear un nuevo archivo oscuro llamado pantalla de registro. Vamos a crear nuestra primera pantalla apátrida. Importa nuestro paquete de materiales, y luego crea una región sin estado y nombra la pantalla registra. Devolverá un andamio ya que es una pantalla. Entonces v, Vamos a dar AB bar y luego darle un título. Registro de textos. Vamos a centrar ese Titán y darle ese color de fondo también. Dale colores que sean excelentes. Y en el cuerpo, me gustaría darle esa columna. Y esa columna tendremos niños, Pero antes de eso, me gustaría ir a nuestro archivo principal dot-dot-dot. Y movemos ese código ficticio PVS. Y en el domicilio, me gustaría escribir pantalla de registro. Y en eso lo doy ahí Firebase. Reiniciemos nuestra app. Ver, esta es nuestra pantalla de registro. Ahora, nuestro índice y esto también se ve bien. Ahora es el momento en que los niños, creamos campos de texto para recopilar datos de usuario. Vamos a crear nuestro primer texto cuando se le dé decoración. Dale una declaración de entrada de etiqueta, texto, correo electrónico, y luego dándoles borde, línea, borde de entrada. Y también para cada campo de texto tenemos que crear controlador de edición de texto. Entonces vamos a crear primero los controladores de terminación de texto. Vamos a crear primer controlador de correo electrónico. Entonces habrá entonces habrá un controlador de contraseña como cuando bus word controller, así. Entonces la final se confirmará controlador de contraseña. Porque cuando nos estamos registrando, nos gustaría que el usuario confirme su contraseña. Cueva. Controlador de edición de texto es entonces nueve este texto para en Vamos a dar este controlador de correo electrónico. Está bien. Después de eso, nos dio caja de tamaño solo para dar algo de altura de espaciado de Turquía. Entonces de nuevo creó TextField. Dale un controlador de controlador de contraseña, luego dale decoración de entrada, etiqueta, texto. Debe ser contraseña y luego darle un borde de delinear, poner borde e índice en este texto dará texto oscurecido es cierto para que sea cual sea el tipo de usuario que esté oculto. Entonces de nuevo, dale una caja de tamaño. Dice funciona. Entonces finalmente, nuestro TextField off confirmar contraseña oscureció el exceso a través. Entonces controlador como confirmar controlador de contraseña. Entonces en esa declaración, dale una decoración de entrada, contraseña de texto. Y luego esbozando. Entonces caja de buen tamaño. Otra vez. Guardémoslo y comprobémoslo. Vea todos que los campos de texto están ahí. Ahora es tiempo v le da algo de relleno porque están en deudas hasta los extremos de la pantalla. Y así como un botón de enviar. Para que siempre que el usuario haga clic en el botón Enviar, se tome. Se llevará a la pantalla de inicio o del color que queramos ejecutar. Entonces aquí en el cuerpo, rapido malo, y darle un relleno de hacer D. Entonces en esa columna, dado principal existe alineación de mí siguiente celda y centro Mendota. Entonces todo está centrado. Ahora. En primer lugar, vamos a darle a un contenedor una altura de 50. Y en ancho del tamaño de la pantalla. El pantalla. Entonces démosle la forma de un margen de maniobra. Pero entonces en el on-premise ahora mismo no tendremos nada. En ese niño. Escribiría un texto, presentaría y le daría un poco de estilo, como el tamaño de fuente de 25. Y luego espere, espere. Vamos a ahorrar y comprobarlo. Ves, se ve tan bonito ahora mismo. Después de este botón enviar, me gustaría tener un nuevo botón, el cual solo dirá iniciar sesión aquí para que el usuario pueda iniciar sesión si ya se ha registrado. Más suave este contenedor, tendré una caja de tamaño. Tamaño caja de altura dos efectivamente. Y se necesita, pero luego el siguiente botón, que ya tendrá una cuenta login aquí. Y ahora guárdalo. Ver, tenemos este botón para que al hacer click en esto, el usuario sea enviado a la pantalla de inicio de sesión. Entonces es hora de que creemos pantalla de cabildeo también. Por lo que en la carpeta de pantallas, crear un nuevo archivo llamado no-kin screen dot-dot-dot. Una vez más, justo en ambos materiales. Estado creado menos rígido de pantalla noggin. Entonces regresa una app de andamio y la app, pero voy a dar ese título. Iniciar sesión. Y centrar el título. Y voy a dar color de fondo de colores bigram dot d. Es un color verdoso, color sombra. Ahora, en ese cuerpo, volveré a hacer dos campos de texto. Pero antes que nada, te daré lectura porque sé que se requerirá ropa de cama. Y insets punto D. Entonces en ese brillo, voy a dar una columna. Entonces principal existe alineación, salidas principales lm.fit centro. Entonces en ese niños, simplemente copiaré desde la pantalla de registro estos dos campos de texto, ese es el correo electrónico y la contraseña, y lo pegaré aquí. Y también copiaré esos controladores de edición de texto. Está bien. Ahora, vamos a tener después de este tamaño, nuevo, este botón que es este contenedor, que dice Enviar. Está bien. Contamos con nuestras pantallas de inicio de sesión configuradas. Ahora es el momento. Siempre que utilices alguien clica en este login aquí. Pero entonces debería ser navegado. Por eso. Acabamos de tener hoy navigator dot push. Entonces en la ruta, simplemente tenemos que añadir mi ruta de página diaria. Después deja contextos y luego envíalo a la pantalla de inicio de sesión. Al igual que esto. Vamos a guardarlo. Y ahora checa. Consulta nuestra aplicación. Tenemos esta pantalla de registro aquí. Ahora cuando hago clic en este inicio de sesión aquí, vea nuestra pantalla de inicio de sesión aparece. Ese es el campo de correo electrónico y contraseña con el botón de enviar. Y cuando hago clic en este botón Atrás, nuevo, nuestra pantalla de registro está ahí. Entonces eso es todo por este video. Tenemos la UI. En. A continuación, la próxima sesión, implementaremos la autenticación Firebase usando correo electrónico y contraseña. 4. Autenticar con contraseña del correo electrónico: Bienvenido. Por lo que en esta sesión, implementaremos la autenticación de Firebase, correo electrónico y contraseña. Entonces para que eso se implemente primero, tenemos que ir al panel de control de Firebase y dar clic en este botón de autenticación. Entonces bajo el fichaje que está aquí, si solo tenemos que antes que nada, click en Empezar y tarde. Y luego esta firma, tenemos que añadir un correo electrónico de soldador y contraseña con solo hacer clic en este ágil y luego guardar. Pero mira aquí puedes ver proveedores adultos mayores que este teléfono, Google, Facebook, Twitter, Microsoft. Nos da muchas opciones diferentes. Pero bien, tenemos ahora ante todo, cuando este correo electrónico y contraseña, eso es lo que se requiere. Después de eso, tenemos que implementar el servicio de autenticación. Y para eso, tenemos que ir a nuestra carpeta de servicios y crear un nuevo archivo llamado Art service dot. ¿De acuerdo? Y aquí implementaremos la lógica de autenticación Alda Firebase requerida. Ahora, crea una nueva cuenta de usuario. En Firebase. Tenemos que llamar a la función que es crear usuario con correo electrónico y contraseña. El paquete de arte Firebase nos da muchas opciones diferentes las cuales discutiremos. Pero antes que nada, vamos a crear el servicio de arte de nombre de clase. Y entonces lo primero que tenemos que hacer es crear una instancia del arte Firebase. Por lo que tenemos que añadir arte Firebase. Entonces Firebase art. Y bien, fui instancia R-dot. Entonces ahora tenemos instancia. Por lo que aquí puedes verlo nos da estudio. Nos da las diferentes opciones que veremos. Pero primero, vamos a crear una función para registrar usuario. La función será un futuro nombre de función registrado. Y esta función aceptará primero cuando le enviemos un correo electrónico. Y segundo será la contraseña. ¿ De acuerdo? Ahora aquí puedes ver esto. El arte de las fibras nos da muchas opciones diferentes. Es decir verificar números telefónicos, firmar con números telefónicos, iniciar sesión con correo electrónico y contraseña. Entonces esto es lo que requerimos correo electrónico y contraseña. Y ahora este correo electrónico es éste. Esta contraseña es contraseña porque este inicio de sesión con correo electrónico y contraseña también tienen dos parámetros de correo electrónico y contraseña. Y este resultado, lo almacenaremos en una variable llamada credenciales de usuario. Y luego credencial de usuario. Porque si pasas el cursor sobre el fichaje con él y la contraseña, puedes ver que nos da un futuro de credenciales de usuario no murieron. Ahora simplemente voy a devolver credenciales de usuario usuario usuario punto. Y este usuario es un tipo de datos de este usuario, que es una función que también se puede devolver nulo. Por lo que sólo me gustará escribir estáticamente tipo o tipos. Esto es muy recomendable para que no haya confusión más adelante. Por lo que hemos creado con éxito nuestra primera función, que nos ayudará a registrar a nuestro usuario. Y se puede ver con los cordados muy fácil. Era sólo una línea de código. Es así de fácil. Ahora, desde la UI, esa es esta pantalla de registro, tenemos que ejecutar esa función también. Entonces ahora vamos a este contenedor y al presionar el botón. En primer lugar, me gustaría dar algunos cheques de IF. Es decir, no quiero que el correo electrónico y la contraseña estén vacíos. Por lo que sólo escribiré si el texto controller.js es igual a Mt, nuestro controlador de contraseña dot dx es igual a vacío. Si está vacío, entonces voy a mostrar un snack bar usando andamio messenger que fuera de los contextos dot show snack bar. Y en el contenido pareceré dramaturgo, se requiere un texto de aletas y le dan un color de fondo de colores rojo más oscuro. El siguiente check, si check me gustaría hacer es si password controller dot text no es igual para confirmar contraseña en controller, es decir, he ganado ambos los valores a ver. Si no es lo mismo, entonces de nuevo, voy a mostrar un snack bar con el retorno de valor. Las contraseñas no coinciden. Eso es todo. Ahora en la declaración final if, llamé a nuestra clase de servicio de arte. Al igual que esto. He creado este objeto y este objeto. Utilizaremos esta función de registro la cual acepta dos parámetros. El primero es el correo electrónico y el segundo es la contraseña. Por lo que para el correo electrónico, sólo escribiré el Milken a lambda x. en para la contraseña, dejaré que el controlador de contraseña dot text. Y ahora esto nos devuelve un usuario no tecleó. Y sólo lo haremos aquí. Y me limitaré a comprobar si el resultado no es igual a nulo. Es decir, ha enviado datos con éxito, entonces solo escribiré éxito de impresión. E imprimir resultado dot email. Dicho eso, está bien, nuestro código aquí está hecho. Ahora guárdalo y saca nuestro emulador. Entonces archivo FASTA, no escribiré nada y simplemente hacer clic en Enviar. Ves, me sale este cuello pero Phil dijo requerido. Entonces sólo escribiré dirección, no falsa. Está bien. No estoy usando mi propia contraseña y cada lectura. Datos 1, 2, 3, y luego aquí sólo escribiré huyó su 12. Es decir, si confirmar contraseña y contraseña no son iguales y dar clic en Enviar entonces sitio, pero no coincide. Y si hago clic en a, si escribo correctamente la contraseña de confirmación, y luego dar clic en el botón Enviar. Creo que hice un pequeño error. Vamos a comprobarlo. En el servicio AAD, creo que acabo de escribir inicio de sesión con correo electrónico y contraseña, que debería ser crear usuario con correo electrónico y contraseña. Entonces ese fue un error muy tonto mío. Pero ahora puedes ver que cómo puedes iniciar sesión también. Este código por sí mismo define lo que hace, es que crea un nuevo usuario. Por lo que de nuevo, sólo escribiré correo electrónico y contraseña. Y ahora cuando hago clic en el botón enviar, ver en la consola de depuración está mostrando éxito. Ahora ve a tu pantalla de autenticación de Firebase y haz clic en Refrescar en la tabla de usuarios. Ahora es posible que puedas ver a este usuario lo que sea que hayamos registrado. Por lo que hemos creado y registrado con éxito una palabra, primer usuario. Por lo que el proveedor distinto, está demostrando que esto ha venido del correo electrónico y la contraseña que firma en esto y esto, es, es UUID único. Ahora, tenemos que crear una función para este inicio de sesión también. Entonces de igual manera en la pantalla de arte, oh lo siento nuestros servicios punto. Vamos a tener una función de inicio de sesión, que también es si futuro tenso. Un usuario no escribía así. Y acepta string y string password. Y ahora, al igual que arriba, tenemos esta lata de usuario de DevOps pulgadas. Y lo esperará. Cinco es punto impar. Ahora será el inicio de sesión con correo electrónico y contraseña como esta. Por lo que el anterior es crear usuario con correo electrónico y contraseña. Y ahora éste es el inicio de sesión con correo electrónico y contraseña. Y después de eso solo devolveremos las credenciales de usuario punto valor de usuario. ¿ De acuerdo? Por lo que tenemos esta función de inicio de sesión codicioso. Otra vez. Del mismo modo que antes. Tenemos que ir a nuestra pantalla de inicio de sesión. Y aquí deberíamos tener nuestras declaraciones si lo demás. Simplemente iré a la pantalla de registro y copiaré este código. Y luego inicios de sesión. Captura de pantalla oscura, solo pegada dentro de la prensa. Entonces aquí no queremos este segundo else-if y solo importamos las bibliotecas requeridas. De acuerdo, entonces el próximo cambio que tienes que hacer es en lugar de este plugin. Y eso es todo. Simplemente este tipo de aplicación. Comprueba si todo está bien. Y ahora probado. Ahora cuando vaya a este login y escriba mi correo electrónico, cual acabo de registrar. Y ahora si hago clic en el botón enviar desde la pantalla de inicio de sesión, veamos qué pasa. Ver está mostrando éxito. Eso significa que ahora estamos yo construí para iniciar sesión con éxito también. Entonces eso es todo. Esto es muy fácil. Creo que también podrías estar pensando que usar Firebase es bastante sencillo. El código son muy mínimos y hace ese trabajo en poco tiempo. Entonces eso es todo por este video. Nos vemos en la siguiente sesión. 5. Gestión de excepciones: En esta sesión, estaremos hablando de manejo de errores. Por lo que hasta ahora no hemos manejado los escenarios en los que el usuario podría terminar ingresando correo electrónico o contraseña no válidos mientras que cualquiera de los registros están intentando iniciar sesión. Entonces en el último video, podría haber visto este tipo de pedidos cuando accidentalmente escribí iniciar sesión e iniciar sesión con correo electrónico y contraseña en lugar de crear cuenta o crear con nombre de usuario y contraseña ahí dentro, Firebase art. Entonces en ese momento también tenemos este tipo de excepción. Y esto se mostró así porque no lo manejamos por nuestra cuenta. Por lo que podría haber diferentes, diferentes tipos de ejemplos ya que ingresamos un formato de correo electrónico no válido mientras registramos nuestra contraseña enter incorrecta mientras conectamos, obtendremos una excepción como a continuación. La idea así. Y ya sea así y nuestra aplicación se quedará atascada. Será una muy mala experiencia para los usuarios finales. Y es por eso que tenemos que manejarlo adecuadamente. Por lo que podemos hacerlo simplemente usando try catch block. Así que intenta atrapar bloque que uso para ejercer cómo manejar ese tipo de excepciones. Entonces, antes que nada, hagámoslo con nuestra tercera función. Sí, exactamente correcto. Intenta. Y luego ya que esos serán despedidos con excepciones, y yo sólo quisiera mostrarles al principio qué tipo de excepciones. Por lo que registra pantalla. Tratemos de usarlo dos veces. Tan sólo como esto no lo es. Ahora, confirmemos Flujo 1, 2, 3. Ahora, si hago clic en el Enviar, ver excepción ha ocurrido y esto es si firebase son la excepción, está diciendo que el correo electrónico ya está en uso. Entonces este tipo de escenarios del que estaba hablando. Y en la consola de depuración aquí, nuevo, se puede ver la exposición. Y ya que fue una excepción extraña de Firebase. Por lo que simplemente tenemos que escribir eso en nuestro bloque try-catch. Por lo que aquí voy a escribir try. Entonces en Firebase art exception, así, captaré el error. Y al final, de nuevo, voy a coger si hay algo más errores. No. Corta este código y pégalo en el bloque try. ¿ Ahora? De acuerdo, tenemos este try-block. Y si ocurre alguna excepción, tenemos que mostrar una retroalimentación al usuario. Y para mostrar un snack bar, necesitamos un contexto de factura. Por lo que pediremos también los contextos de Bill. Y se resiste contexto de la píldora roja. Y ahora está mostrando este error en la piel de registro porque tenemos que enviar contexto también. Ahora, lee este proyecto de ley contextos anarquía simplemente mostrar un mensajero andamio. Context dot show snack bar. En bar. Vamos a tenerlo contenido, texto, mensaje punto dos cadena. Y vamos a tener un fondo de color de colores empiecen a leer. De acuerdo, y aquí esta dispersión, solo lo imprimimos por ahora tú, si quieres, puedes volver a mostrar andamio. Y estoy diciendo esto otra vez que estamos usando odd porque sabemos que la excepción será de Firebase. Y si surge algo nuevo, será manejado por este bloque de captura. De acuerdo, intentemos lo mismo otra vez y veamos si nuestra aplicación se queda atascada o no. El password. Ok. Ahora cuando hago clic en el Enviar, ver lo inmediato, esto ya está en uso por otro electrón. Entonces esto es tan bonito Entonces antes nuestra aplicación no está atascada en este momento. Ahora vamos a hacer lo mismo a nuestra función de inicio de sesión se ejecuta. Vamos a intentarlo. Entonces en Firebase, extraña excepción. Vamos a atrapar. Entonces la última respuesta tendremos un bloque de captura. lo más simple, conseguí esto de aquí. Afirman. Aquí de nuevo, mostraremos un inconveniente, pero como antes. Y para ello, en primer lugar, tenemos que aceptar ese contexto de proyecto de ley. Y en esto me limitaré a decir imprimir. Ahora ve a login skin dot-dot-dot. Y aquí donde estamos llamando a la función de inicio de sesión, tenemos que enviar ese contexto. ¿ De acuerdo? Nuestro aquí, esta porción se hace. Vamos a comprobarlo con nuestro login así como dar algo que no está siendo registrado. Este correo electrónico no está registrado. Entonces vamos a ver si doy clic en el Enviar. Tan solo para involucrar nuevo registro de usuario correspondiente a este identificador, el usuario podría ser eliminado. Por lo que al menos saben que el usuario no es válido. Deberían registrarlos primero y luego intentar iniciar sesión. Por lo que hemos aprendido a manejar adecuadamente las excepciones como esta. Entonces eso es todo por este video. Espero que hayan disfrutado hoy aprendiendo algo nuevo. Y Q 6. El indicador mientras se autentifica: Hola. Entonces, sin duda has manejado con éxito excepciones, pero no lo hiciste. Ahora no estamos dando ningún comentario al usuario cuando hace clic en el botón Enviar mientras intenta ya sea registrar nuestro inicio de sesión. Esto no es una buena práctica ya que el usuario final ni siquiera sabe que la solicitud se está enviando desde el celular. Y no debe hacer clic en ningún otro botón, la base. Cuando un usuario hace clic en el botón enviar, no debería poder volver a hacer clic en el botón enviar hasta que da, obtiene algún tipo de retroalimentación del servidor. O de lo contrario habrá algunos errores porque habrá múltiples solicitudes con los mismos datos. Por lo que la mejor manera es mostrar algún indicador de carga para que usen también sepan que tiene que esperar. Y para mostrar un indicador de carga. primer paso importante es convertir nuestro widget apátrido do estate full rígido. Por lo que en sus registros limpios, Es simplemente ir. Y ahora convierte esto a un estado lleno, estado rígido lleno porque así el estado de la IU cambiará una vez que muestre un indicador de carga. Y esa es la próxima vez, mostrará el botón de enviar. Y para manejar ese tipo de valores verdaderos y falsos, debemos crear una variable booleana llamada loading y darle un valor predeterminado de false. Cuando un usuario llega a este espacio, es decir, no hay indicador de carga cuando se está renderizando esta página. Ahora, tenemos que usar declaraciones condicionales. Es decir, si de lo contrario. Para dar salida a un indicador de carga son un botón de envío. Y como solo una línea de código, usaré un operador ternario. Por lo que sólo voy a despejar aquí mismo, cargando. Si es cierto, entonces mostrar un indicador de progreso circular. Si no, entonces mostró este contenedor, que es el botón, Botón Enviar. Vamos a guardarlo. Pero hasta ahora, acabamos de escucharlo entonces este operador ternario. Pero deberíamos fijar esta fecha en la que se esté presionando este botón de envío. Entonces aquí tenemos dos sets. La carga estatal es igual a true. Entonces se ejecutará esta pieza de línea. Y luego después de que se ejecutara con éxito, tenemos que volver a poner el escenario en falso para que si algunos son éxitos, entonces después de eso, se está quitando nuestro indicador de progreso de carga. Vamos a probarlo. Bajemos la pantalla. En ese correo electrónico. Escribamos por Airbase. Al ritmo. Gmail.com te da el valor de 123123. Y ahora haz click en así alguien, pero mira, este es el indicador de carga. Y ahora después de que tenga éxito ese indicador de carga se retira resorte. Puedes ir a la consola de Firebase y refrescarte para que puedas comprobarlo. Ver esta dirección de correo electrónico también se está registrando. Este tercero en el servidor. Hagamos lo mismo para la pantalla de inicio de sesión. Es decir, deberíamos mostrar aquí también un indicador de carga de carga. En primer lugar, vamos a convertir esto en un widget con estado. Entonces crea un booleano de carga, le dio un valor falso, valor predeterminado. Entonces aquí, operador ternario. Vamos a escribir si es cierto, entonces mostrar un progreso circular en el, Si no sólo el contenedor. Y cuando se presiona esto en la prensa, entonces el indicador de carga será cierto. Y al final, el indicador de carga lo puso en falso para que sepamos que lo del servidor es 10. Vamos a guardarlo. Vamos a nuestra pantalla de inicio de sesión. Y eso es correcto. Donde base y T min.com y contraseña. Está bien. Demos click en el botón Enviar y veamos el indicador de carga. Y tenemos ese éxito. Entonces eso es todo lo que hemos mostrado con éxito un indicador de carga mientras hay una solicitud al servidor. Porque estos son cambios muy pequeños, pequeños, pero afectará el rendimiento. O puedes decir que la conveniencia del usuario son para tu aplicación. Gracias. 7. Verificación del estado de autenticidad: Hola, bienvenido de nuevo. En esta sesión, comprobaremos si el usuario ya ha iniciado sesión o no. Tan agradable, supongamos que el usuario ha iniciado sesión con éxito. Pero ¿y si cierra nuestra solicitud y vuelve a empezar? En el caso no queremos que el usuario vuelva a ingresar sus credenciales, de nuevo. Pero en cambio, deberíamos comprobar si ese usuario ya ha iniciado sesión antes. Y esto se puede implementar muy fácilmente mediante el uso de Firebase. Pero antes de eso deberíamos crear eso. Deberíamos crear un nuevo archivo de pantalla de inicio dentro del directorio de pantalla. Vamos a las pantallas y luego creamos una nueva pantalla de inicio, dot-dot-dot. Sí, vamos a importar nuestro material como siempre. Vamos a crear una pantalla de inicio de región apátrida. Entonces este café. Entonces vamos a dar el título. Texto. Después se centraron directamente a través de colores de fondo, rosa. Esta vez. Y acciones, me gustaría dar un botón de Cerrar sesión. Por lo que sólo un icono de punto de botón de texto en la prensa será MD. Yo puedo, voy a dar, puedo empezar Love Out. Y en la etiqueta, simplemente le daré texto de fichaje. Está bien. Y este fichaje. Estudia este botón. Me gustaría darle un poco de estilo también a ese botón, no etiquetar el botón en sí. Y yo sólo diré texto, pero luego ese estilo de y en esa primaria. Y acabamos de empezar como si tuviéramos lista nuestra pantalla de inicio. Pero también debemos asegurarnos que cuando un nuevo usuario registró nuestro inicio de sesión con éxito, entonces debería ser navegado a esta pantalla de inicio. Antes solo estábamos recibiendo una respuesta en la consola de depuración. Para eso, simplemente vaya a la pantalla de registro y escuche si el resultado no es igual a nulo. Simplemente escribiré punto del navegador, empujar y quitar. Hasta. Y luego nueva ruta. Daré mi diseño de página. Y simplemente escribiré la pantalla de inicio. Eso es todo. Tan fácil como eso. Y lo mismo, solo lo copiaré y lo pegaré, luego la pantalla de inicio de sesión aquí e importaré nuestra pantalla de inicio. Por lo que VI usando ayudó a empujar y quitar hasta. Podría estar pensando, ¿por qué no estoy usando reemplazo push? Porque el único tema aquí está en esta pantalla de inicio de sesión. No es la escala final, está usando el Push que es otro top fuera de otra pantalla. Es, es una pila y es un tipo de resistencia. Entonces a partir de aquí, si presiono un reemplazo, entonces irá a la pantalla de inicio, pero con el botón Atrás. Por lo que la solucion es padre adoptivo tiene que usar el punto del navegador. Y luego puedo usar el punto del navegador. Empuja la colocación en esta pantalla de inicio de sesión. Pero simplemente me gusta y simplemente uso esto. Quita todo y solo empuja la pantalla. Eso es todo. Entonces vamos a probarlo. Si está funcionando o no. Sólo espera un rato. Espero que tu sistema sea lo suficientemente potente porque a veces mientras estás usando Android Studio o este emulador, la gestión de RAM no es buena en la mayoría de las piezas. Entonces vamos a probarlo. A ver. Dar la contraseña correcta. Está bien. Haga clic en el botón Enviar. Ves, está funcionando tan bien que agregamos directamente enviado a nuestra pantalla de inicio de sesión aquí. Pero, ¿y si reinicio esta aplicación? Entonces si reinicio esta aplicación, la pantalla de registros está ahí y v no se envían directamente a la pantalla de inicio. Por lo que esto se puede implementar son esto se debe cambiar. El arte Firebase y nos permite suscribirnos a OTT stream estatal. Eso se llama el flujo proporciona un evento inmediato del estado de autenticación actual del usuario. Y después de eso, posteriormente proporciona eventos cada vez que cambia el estado de autenticación. En palabras simples, Firebase nos da la opción de escuchar esos cambios en la autenticación de Firebase. Vamos a ellos archivo main.js. Aquí. En la escolarización en casa. Simplemente tienes que escribir stream cuando están. Entonces. Así arroyo. Usaremos nuestro servicio dot firebase dot cambios de estado. Entonces aquí si pasas el cursor sobre el mar, nos da un arroyo con los usos Valor notifica sobre cambios en el estado de inicio de sesión del usuario, como yodate firmando nuestro registro de salida. Y como es una cadena que toman y los flujos continuamente, constructor, tenemos como uso de contexto y esa instantánea aquí simplemente escribiré si los datos de punto de instantánea, entonces volveríamos pantalla de inicio. Pero si no, entonces regresaremos la pantalla de registro. Esta pieza de código significa que si la instantánea no es nula, entonces definitivamente obtener tiene que ser algún valor de usuario que lo siento, deberíamos devolver la pantalla de inicio. Y si es nulo, entonces deberíamos devolver el débito es probando. Ahora que nuestra aplicación, verás enviaremos directamente a la pantalla de inicio. Vea aquí, ya que nuestra aplicación ya sabe que el usuario ha iniciado sesión antes. Este es concepto muy importante porque la mayor parte de la aplicación, no quieres que el usuario tenga una mala experiencia de amado automáticamente. Eso es todo. Por hoy. En la siguiente sesión, implementaremos cómo firmar cuando cocinemos también, porque el correo electrónico y la contraseña están bien. Pero ahora la mayor parte de la aplicación moderna permite a los usuarios usar sus inicios de sesión sociales también. Nos vemos en la siguiente sesión. Gracias. 8. Proyecto de configuración para Google: Hola. En esta sesión, aprenderemos a implementar el inicio de sesión de cobalto. Por lo que en los últimos videos, aprenderemos a autenticar al usuario usando su correo electrónico y contraseña. Pero hoy en día, en cada aplicación moderna, la ayuda es una opción para autenticar usuario usando buenos inicios de sesión sociales. Es decir, hice Google, Facebook, LinkedIn, lo que sea. Por lo que hoy aprenderemos a implementar el inicio de sesión de Google usando Flutter y Firebase. Por lo que el primer paso es generar y clave SHA. Y podría estar preguntando ¿para qué es la clave SHA? Se requiere de ella clave para implementar Google, nuestra autenticación de inicio de sesión telefónico en Firebase, es una clave única generada para tu PC que se puede usar para firmar. Por lo que debug KeyStore es un único para cada sistema y se mantiene automáticamente por el SDK de Android. Por lo que sólo hay que recordar que se requiere la clave de depuración cuando estamos probando. Y hay un desafortunado llamado una clave de liberación se requiere cuando estamos sometiéndonos a colocar también. Entonces ahora surge la pregunta, ¿cómo obtenemos esa clave SHA-1? Entonces primero, necesitas encontrar una ubicación después de depurar archivo KeyStore, que está dentro de la carpeta Android SDK en mi PC con Windows 10, esa ubicación es Program Files, Android, android Studio. Vayamos a comprobarlo. Vayamos al Explorador de Archivos. Entonces. Entonces archivos de tierra, android, android Studio, GRE, después se han comprobado GRE entonces cuando. Entonces en esta ubicación, saca tu línea de comando. Y simplemente después de eso, tienes que escribir este comando y puedes pausar el video y escribirlo así. Y luego simplemente tienes que presionar Enter. Eso es todo. Obtendrá este tipo de valor de salida, encontrará MD5, SHA-1, y SHA-2 256. Bien. Entonces ya que es una información muy confidencial, por lo que no debes compartir esto con otras personas. Ahora, solo copia la clave SHA-1. Saca tu panel de control de Firebase. Acude al ajuste del proyecto. Y luego aquí, simplemente tienes que agregarlo así y luego guardar, descargar los últimos servicios de Google Jason. Entonces córtalo. Entonces aplicación Android, quita ese archivo JSON anterior y base este. ¿ Me nombra? Solo recuerda que no deberías no debería haber este tipo de 1 encendido otra vez, servicios sencillos de Google, Jason, eso es todo. Entonces así es como lo haces. Después de su muerte, simplemente detiene tu sesión de depuración y vuelve a empezar. El siguiente paso es habilitar la autenticación de inicio de sesión de Google. Acude a tu pantalla de autenticación, es decir Dashboard. Después ve al método de inicio de sesión. Y espera, solo lo voy a detener porque tenemos que instalar dependencias también. Aquí simplemente tienes que ir a Google, luego habilitarlo. Aquí, seleccione una dirección de correo electrónico y simplemente. Haga clic en Guardar. De acuerdo, Ahora has habilitado con éxito el inicio de sesión de Google. El paso final es ir a dev y obtener las dependencias requeridas como Google firmando el centro. Y el primero que obtienes, tienes que instalarlo en tu YAML. Y después de eso, otra dependencia requerida es la web de inicio de sesión de Google e instalarla también. Entonces sí, tienes éxito y el inicio de sesión en Google. Entonces el siguiente paso es crear un botón en nuestra pantalla de inicio para muertos. Pero de nuevo, estoy usando un paquete porque no quiero crear un botón en mi propio archivo de cosas que el error y el tiempo de espera que se está ejecutando. Me gustaría ir a dev y obtener el botón de inicio de sesión. Sí, éste. Como puedes ver, obtienes diferentes tipos de botones de inicio de sesión social social. Por lo que es mucho más fácil para ti obtener esa imagen y el look deseado con este plugin. Y sólo copia. Y nuestro aprendizaje y depuración. Tómate algo de tiempo. La autenticación es un proceso. Se puede obtener documentación, son Vía Media, más Desbordamiento de pila. Sí, muchas opciones. Simplemente ignoró este tipo de errores. Esa vez tu Gradle está corriendo y no se han detenido. Hasta entonces, estamos bien para irnos. De acuerdo, entonces supongo que nuestra aplicación es ahora con éxito. Y buen estudio es un pesado, más suave. Por lo que solo estoy asumiendo que su sistema es lo suficientemente fuerte como para manejar la administración de RAM. Entonces desde que hemos hecho esto, checa en ese cuadro, por eso estamos consiguiendo la pantalla de inicio en este momento no hemos implementado este letrero, no de esta manera. Iré directamente a principal. Y aquí en lugar de H4, muy en vivo, regresaré pantalla de registro para que podamos trabajar en ello. De acuerdo, Ahora ve a esa pantalla de registros. Y ahora debajo de cubiertas, pero luego dar una caja de tamaño. Altura. Duan De. Entonces da un divisor. Rígido. Entonces de nuevo es de tamaño caja de hacer esto o aquel espaciado está ahí. Ahora usaré el botón de inicio de sesión. Por lo que voy a decir sólo firma. Creo que no lo he hecho no he instalado nuestras dependencias. Yo sólo voy a copiar. Y ahora sólo espera unos segundos más. De acuerdo, Entonces voy a fomentar fondo en ambos fichajes pero hecho. Está bien. Ahora aquí voy a escribir cuerdo en. Pero entonces, entonces el primer bate que estoy hecho, solo diré, pero luego iniciar Google. Entonces el segundo parámetro, voy a dar texto y voy a seguir con Google. Y en prensa por ahora. No voy a hacer nada porque en el siguiente video implementaremos la funcionalidad en este momento a menos que trabajemos en la parte de la interfaz de usuario. Vamos a comprobarlo. A ver, aquí obtenemos ese botón, continúa con Google. Por lo que se ve decente. Diré que al menos nos está dando la sensación de que tenemos otras opciones también. Por lo que espero que hayas entendido cómo configurar el inicio de sesión de Google. Y esta clave SHA-1, puedes, si lo estás encontrando difícil, puedes ir y cornudo tiene soluciones si no lo estás consiguiendo en tu sistema. Pero esto es muy necesario si estás usando el inicio de sesión telefónico, inicio de sesión en Google, o cualquier tipo de este tipo de características diferentes que sí mismo, Eso es todo para este video. Nos vemos en la siguiente sesión. 9. Implementar la sesión de Google y salir: Por ahora es estilo cuando aprendes a implementar la funcionalidad de inicio de sesión de Google. Lejos que simplemente saquen tu código VS. Acude al servicio de arte. Y ahora en la parte inferior escribiremos código. Simplemente dale un comentario de Google. Inicio de sesión. De acuerdo, ahora juguemos futuro seguro, que volverá como usuario, limitaré iniciar sesión con Google. Ahora, el primer paso es desencadenar un diálogo de 10 dictados. Es decir, las opciones son el cuadro de diálogo para elegir tu cuenta de Google. Para eso simular. Cocinas firmando cuenta puede ser nulo. Nómalo usuario de Google, y simplemente espera a usuario de inicio de sesión de glucosa. Inicio de sesión en Google. Firma. Está bien. Por lo que este código saca ese menú pop up para elegir tu cuenta de Google. Por lo que podría ser ninguno queda es el usuario hace clic en el botón, ¿son que no ha elegido ninguna cuenta. Por lo que tenemos que comprobar si un usuario no es igual a nulo. Y comprueba si no es igual a nulo, entonces obtendremos detalles de la solicitud. Es decir, el código será definitivo. Firmar la autenticación es igual al punto de usuario atendió un ticket de 10. Está bien. Después de eso, crearemos una nueva credencial. Crear nuevo. Genial. Entonces espinilla. Shin es igual a nuestra credencial DOT de datos. Y luego token de acceso, vamos a escribir token de acceso. Y lo hice aunque puede ser token de Google ID. Una vez firmado. Usaremos datos de tormenta de fuego. Llegó que el fuego inicia 35 base. Ahora es usuario, usuario credencial y en chino hará un peso. Ahora iniciaremos sesión vía Firebase. Antes era sólo el código requerido para esa porción de Google. Ahora por fin firmaremos con credencial, esta credencial y enviaremos nuestra cadencial, esa es la credencial. Esto está siendo devuelto por el Google. Por lo que tenemos que enviar eso a nuestra Firebase para asegurarnos de que legalmente se nos permita el acceso. Y simplemente califica. Por último, el usuario credencial dot user. También hagamos que esta cosa esté en un bloque try catch. Porque nunca se sabe si algo sale mal así. Y simplemente el tiempo de fuego. Imprimir el agregado en esa consola de depuración. Entonces la cosa es, este código, no es como si tuvieras que aprenderlo de memoria. Sólo tienes que saberlo. Y siempre que sea necesario, obtendrás este código. Este es un código muy básico. Se pone muy difícil de recordar, aprenderlo, viene por práctica. Por lo que ahora tenemos lista la función. Es hora de asignar la función de inicio de sesión de Google a ese botón. Este botón, que está en esa pantalla de registro. Entonces aquí en rojo está la zona. Continuar con Google. Sí, aquí. Preferiré cosas. ¿ Verdad? Hágalo entonces una función sinc. Y derecho de ello. Servicios inicia sesión con Google. Pero también me pregunto cargando individualmente para mostrar. Por lo que sólo escribiré si la carga es cierta, entonces muestra el progreso más fresco. Mostraré este botón como lo hicimos antes. Y pondré el estado como cierto. Y entonces dicho, sí establece como carga es igual a falsa. Está bien, probémoslo. Da click en el botón Continuar con COVID. Ver, ahora eso se mostrará. Elige una cuenta. Seleccionaré mi cuenta. Y luego Sí, Alden. A ver, ahora mismo no estamos navegados sólo por esa razón. Hicimos ese cambio en el punto principal simplemente otra vez hacerlo pantalla de inicio. Ahora puedes ver vía enviada directamente a la pantalla de inicio porque ya estamos autenticados. Por lo que espero que hayas entendido cómo usar el inicio de sesión de Google. Esta pieza de código es justo lo que se requiere. Y luego tienes que enganchar esa pieza de metal con nuestra interfaz de usuario así. Y esta carga es solo para que el usuario tenga una retroalimentación. Ahora, por fin, tenemos que asegurarnos de que nuestro botón de inicio de sesión esté funcionando. Porque sin ella no podemos ver, no podemos practicar o no podemos probar nuestra aplicación. Y voy a la pantalla de inicio. No obstante, los bhutaneses en las acciones, simplemente lo convierten en un sumidero. Y bien, lo que debemos hacer, debemos crear una función separada en ese servicio. Aquí. Simplemente tenemos que escribir futuro, inscribirnos así. Y simplemente escribir esperar la firma de Google dot psi naught porque se requiere cuando estamos usando el paquete de Google, tenemos que asegurarnos de cerrar sesión para que podamos elegir otra cuenta si queremos. Y también tenemos que cerrar sesión de nuestro arte Firebase así. Por lo que tenemos nuestra función ir a o significa pantalla de inicio. Aquí, simplemente escribe los servicios OT, Dots, cierra sesión. Que sea. Está bien. Ahora, vamos a probarlo. Si está funcionando, espero que lo haga. Ahora lo que debería pasar es que si hacemos click en este desfile, se nos debe llevar automáticamente a la pantalla de registro de inicios de sesión por este código. A ver. Ver. No hemos dictaminado y en código de navegación en nuestra inscripción. Pero es, lo es, ya nos ha llevado a esta pantalla sólo porque tenemos nuestro constructor de stream y está revisando los cambios de estado del arte continuamente. Entonces si algo sucede, volveremos a ya sea a la pantalla de la pantalla de inicio. Ahora, finalmente, si vuelvo a dar clic en continuar con Google, elige mi cuenta. Y ahora veamos si se dirige a la pantalla de inicio. Ver, estamos directamente navegados a la pantalla de inicio. Por lo que nuestra parte de autenticación se completa y está funcionando sin problemas. Espero que hoy hayan aprendido mucho. En el siguiente módulo, estaremos hablando de esa base de datos porque ahora es el momento de reintegrar datos reales. Y también crearemos una o una aplicación muy básica también en entonces próxima sesión. Entonces eso es todo. Sólo sigue practicando. 10. Comienza con Firestore: Hola, bienvenidos a esta nueva sección. Hablaremos de la base de datos de aleteo Firestore. Por lo que nuestra capa, hemos implementado con éxito la autenticación. Pero obviamente tenemos que tener algún tipo de almacenamiento de base de datos. Esa es la base de datos donde almacenaremos todos los usuarios o los datos de emisiones. Esos datos no pueden ser simplemente almacenados en el dispositivo del usuario porque en ese caso, se poda se sincronizan en otros dispositivos. Por lo que Firebase nos da opciones de dos bases de datos. Cuando vayas al panel de control de Firebase, ahí verás que hay una base de datos en tiempo real y los datos son una nube Firestore. Cloud Firestore es ese dato más reciente con y que estaremos utilizando. Pero al menos debes saber esa pequeña diferencia entre los dos. Compré nube Firestore y base de datos en tiempo real. Datos de Nosql con eso es que no hay combinaciones, no hay columnas ni tablas en él. La principal diferencia entre ambos es que la nube Firestore contiene colecciones y dentro de estas colecciones se tiene documentos. Y de esa manera contiene sub-colecciones son lujos. Pero en base de datos en tiempo real, consiste en un gran Jason que contendrá todos esos datos. Entonces la deuda no es nada como documento de colecciones. No es que no está estructurado adecuadamente. Se lanza como un gran Jason en base de datos en tiempo real. Firestore es.. firebase, fecha más reciente que fue para el desarrollo de aplicaciones móviles. Se basa en los éxitos de la base de datos en tiempo real con un nuevo modelo de datos más intuitivo. Cloud Firestore también cuenta con caries y escalas más ricas y más rápidas que la base de datos Realtime. Entonces en palabras simples, escogeremos Cloud Firestore entre el azul. Ahora, nuestro primer paso será configurar Firestore en nuestra aplicación. Por lo que ya hemos configurado con éxito Firebase en nuestro Android así como descargar el archivo JSON de Google e inicializarlo. Ahora es el momento de habilitar esa nube Firestore. Acceda a su panel de control de Firebase aquí. Haga clic en Base de datos Firestore. Después de eso, verás algo así como este verde, que es Cloud Firestore. Y luego crear la base de datos. Simplemente tienes que hacer click en Crear base de datos. Después de eso, hay que elegir el modo de prueba de inicio, porque vamos a configurar las reglas de seguridad más adelante. Y después de eso, solo tienes que seleccionar la ubicación predeterminada y hacer clic en Concretar la base de datos. Y entonces verás algo como esto. Esta pantalla es donde se almacenarán todos tus datos. Después de habilitar con éxito Cloud Firestore, tenemos que instalar esa dependencia también, es simplemente bueno tener. Después busca la nube. Firestore. Haga clic en el primero y simplemente copie esa dependencia. Y con sede en Nueva York aparece aquí atrás. Entonces está bien, nuestra dependencia se ha instalado correctamente. Ahora el siguiente paso es entender ese modelo de datos Firestore en la nube. así como se estructuran los datos dentro de ese archivo almacenar la base de datos. Antes de definir nuestro código, mis pruebas. A diferencia de la base de datos SQL, los datos, tablas son reglas en Firebase. Entonces si vienes de MySQL o PostgreSQL, las otras tablas reglas concepto en él. Pero en cambio aquí usan datos en EU TO datos en documentos que están organizados en colecciones. Por lo que aquí puedes ver a los usuarios, esta es una colección. En palabras simples, sólo trata de entenderlo como una mesa. Es decir, cuál es el nombre de la publicación de los usuarios de colección. En productos. Este tipo de ensayo llamado colecciones y recolección de insectos, los datos individuales se denominan documentos. Por lo que aquí se puede ver que hay estos usuarios y un ID de documento de este ID aleatorio. Y este documento tiene estos valores. Es dirección, edad, nombre inmune. Dirección es de nuevo un mapa, y este es un entero y esto es una cadena. Entonces así es como un dato básico, cómo básicamente empatan almacenado en la tienda de bomberos. Los documentos deben almacenarse en colecciones. Los documentos pueden contener subcolecciones. Ver aquí está. Iniciar colección que está dentro de ella. Otra vez que tienes es, puedes caminar ¿verdad? Me gusta nuestra publicación comentarios aquí otra vez, puedes escribir una nueva colección. Y todos estos documentos pueden contener sensación primitiva como cadenas. Son objetos complejos, como lista, mapa. Esto puede ser tipode valores en los que podemos almacenar. Entonces eso es todo. Hemos instalado con éxito Firebase y hemos entendido también el modelo de datos. En la próxima sesión, estaremos discutiendo cómo hacer operaciones crud en ella. Gracias. 11. Comprender las operaciones de CRUD: Hola. En esta sesión comprenderemos cómo realizar operaciones crud. Es decir, cómo crear, leer, actualizar y eliminar datos en Firebase. Sólo por este ejemplo, no estaríamos creando ningún servicio separado clasificado ya que solo estamos discutiendo los conceptos básicos e implementándolo de manera sencilla. Entonces primero tenemos que crear una nueva instancia de Firestore. Entonces como hicimos en la autenticación, tenemos que crear archivos Firebase impar instancia. De la misma manera. Aquí si tenemos que crear una instancia Firestore. Entonces hagámoslo. Saca tu editor de texto. Ir a la pantalla de inicio. Aquí. En la parte superior. Simplemente crearé una instancia Firebase, Firestore. Firestore es igual a cinco vías. Instancia de punto Firestone como esta. Nuestra instancia está hecha. A continuación se llama referencia connexon. Referencia de colección significa lo que debería ser ese nombre de colección que está aquí, usuarios o lo que quieras. Por lo que la referencia de colección también es cosa muy importante. Para dejar empezar con la función de crear que esto cree datos en esa base de datos. Para agregar una nueva colección de documentos, utilizamos el método add, referencia de colección Annette. Hagámoslo. Intentemos hacerlo. Después de la barra AB. Es un cuerpo, ese cuerpo. Tomemos un contenedor. Contenedores, lo que significará consulta de medios, contextos de punto, tamaño de punto, ancho de punto. Entonces vamos a tener un hijo, dale la columna. Media X es alineación. Quiero decir existe centro de punto de alineación, luego alineación de eje transversal, centro extracelular de hierba. Entonces vamos a tener hijos. Eso niños, vamos a crear un limitado pero vamos a darle un hijo de texto y datos para almacenar. Y en la prensa de brazos, disparemos el tiempo. Mantenlo vacío para que pueda mostrarte en la UI, la UI. Ver aquí, tenemos que agregar datos a Firestore. El primer paso fue crear una instancia que ya hemos hecho. Aquí. El segundo paso fue crear una referencia de colección. Entonces aquí, vamos a crear una referencia de colección. Usuarios es igual a Firestore, esa es nuestra instancia, dot collection y nombrelo usuarios. Ahora esto es sólo referencia más donde queremos insertar los datos. Entonces para insertar, pero tienen datos particulares. Aquí estamos usando el add my 10. Por lo que agregar método crea datos con una ID única para realizar anuncio si se trata de un futuro. Por lo que vamos a utilizar async await concepto. Y simplemente escribimos aguardan usuarios dot add C aquí. Ahora, así es como agregamos datos a duff Firestore. Ahora, agregar acepta datos en un mapa que es llaves en profundidad. Entonces tenemos que enviar datos en par clave-valor 7, este nombre, usaré la clave como nombre y valor como. Al igual que esto. Este será nuestro primer usuario. Entonces vamos a probarlo. Si hago click en este Agregar Datos, la Torma de Fuego. Supongo que podría mostrar algún asunto solo por la razón de que no hemos reiniciado nuestra aplicación. Por lo que siempre que instale cualquier dependencia nueva, asegúrese de reiniciar la aplicación. Reiniciemos significa que tienes que parar y luego empezar a depurar de nuevo. A ver, ¿funcionará ahora? Nos prestan esperar. Para que se desempeñen. En Firestore son muy simples. Ver aquí es sólo con el add. Podemos agregar un dato con un documento único ID. Y cuando diga DNI, les mostraré lo que quise decir con eso. Tenemos que esperar unos segundos más. La mayor parte depende de tu sistema. Ahora es compilar, dependencia, este tipo de dependencias. Pero no lo estamos usando en autenticación, ya está hecho. Y en las reglas aquí, como hicimos en el modo de prueba, por eso las reglas son públicas. Pero cuando estamos usando para la producción, esto no debería ser así. De acuerdo, tenemos nuestra app funcionando. Ahora cuando hago clic en eso a Firebase y luego voy a nuestros datos, espero que sea para ver usuarios. Después documentar y luego ese valor que se llama Nahal. Por lo que hemos ingresado con éxito nuestros primeros datos. Y esto es lo que estaba explicando que es un ID de documento único cuando usamos la función add aquí así. Entonces podrías estar pensando, ok, Entonces, ¿cuál es la segunda función de adder? Por lo que aparte de AD, hay otro método llamado conjunto de puntos. Entonces si te gusta especificar tu propio ID de documento, deberíamos usar el método set en esa referencia de colección. Al igual que esto. Encomiaré el anterior. Y luego simplemente escribiré a los usuarios, eso está despierto, los usuarios dot doc, luego le daré el ID del documento. Lo nombraré revoloteado de 1, 2, 3. Entonces ponlo así. Entonces otra vez, dentro de set tenemos que enviar un mapa. Voy a dar el nombre del valor. Y así la clave es el nombre como valor como Google. ¿ De acuerdo? Ahora guárdalo y échale un vistazo. Por lo que estoy explicando de nuevo, cuando estamos usando el método add, agrega un nuevo ID autogenerado, es decir, ID del documento. Pero cuando usamos set my pen, podemos especificar nuestro propio documento ID. Ahora vamos a hacer clic en el agregar datos al almacén de archivos. Acude a nuestros datos y vea tenemos este Flutter 1, 2, 3. Entonces esto de lo que estaba hablando, esto no es una identificación única. Nosotros lo hemos especificado por nuestra cuenta. Y luego enviamos un valor que es nombre Google aleteo. Por lo que hemos creado con éxito los datos. Ahora es el momento de leer datos de archivos de Firestone Cloud para darte la capacidad de leer el valor de una colección a cabo un documento. Y esto puede ser cien, ciento diez grado son proporcionados por actualizaciones en tiempo real en palabras simples. Y podemos leer una cosa que es, vamos a la base de datos, pedimos w, y luego regresamos. Si algo cambia en la base de datos esa vez, nuestra UI no le importa eso es porque se fue frente a una vez. Hagámoslo. Vamos a crear nuestras funciones de lectura también. Entonces por debajo de esta elevada, pero entonces crearé un nuevo botón, nuevo botón elevado. Denominarlo En datos leídos de Firestore. Entonces en el on-premise, será una función sinc. Ahora de nuevo, tendremos una colección de amigos. Usuarios es igual a colección Firestore. Y recuerda, puedes hacer todo esto en una sola línea de código también. No tienes que especificar la referencia de colección así. Y sólo hacerlo para explicar el concepto. Entonces, ahora tenemos, estamos creando una variable. Es resultados y luego esperan a los usuarios. Obtener. Por lo que leerá una recaudación que obtendrá los datos de cobro de deudas, todos los datos que sea el valor que tengan. Por lo que ya que tendrán múltiples valores, escribiremos nuestros resultados dot docs, dot para cada uno. Ese rango para cada uno de ese documento. Por lo que tendrá resultado de instantánea de documento. Y entonces simplemente imprimirás datos de puntos de resultado como este. Echemos un vistazo a lo que he hecho. Entonces te volveré a explicar. Tenemos nuestra UI que es esta leer datos de archivos. Entonces cuando hago clic en él, veo que tienes tanto esos datos que está en ese teléfono de mapa podría haber devuelto salida? Entonces cuando sí obtengamos solicitud sobre una colección que está aquí, esta colección, nos dará todos los documentos. Entonces por eso tuvo nuestros resultados dot docs porque es fluido y se puede ver pero entenderás que todos los documentos y luego por cada V están recorriendo los documentos. Ya que obtenemos una lista de todos los documentos. Es tan simple como eso. Ahora podrías estar pensando, vale, si no quiero leer toda la colección, pero quiero leer un documento en particular. Es decir, sólo quiero leer esta desvalorización de Flutter, cómo obtener ese valor en particular. Entonces para eso, otra vez, Vamos a probarlo. Voy a comentar hacia abajo la consulta anterior. Y voy a escribir documentos snapshot, documentos distintos snapshot. El snapshot. Por lo que documentos resultado snapshot es igual a esperar usuarios dot doc y qué documento queremos, ya conocemos el ID. Por lo que en tercer lugar, 123. Y luego brote se ponen así. Y después de eso, simplemente imprimiré datos de resultados. Vamos a comprobar si está funcionando o no. Ahora cuando haga clic en leer datos, lo hará sólo nos mostrará ese día en particular entonces no todos los documentos en esa colección. Entonces así es como se obtiene un documento en particular. Hicimos ID de documento de usuario, lo sentimos, hicimos ID de documento. Por lo que dije que Firestore nos da dos opciones para leer datos. Aprendí que es una vez, son sólo leeremos datos y escucharemos cambios en tiempo real. De Firestore nos da una opción para seguir escuchando cualquier cambio de datos que suceda a los datos y luego reflejar nuestra actualización nuestra aplicación en tiempo real, es decir, sin refrescar nuestra página. Esto se puede hacer usando ese concepto llamado streams. Por lo que ocho brindan apoyo para tratar los cambios en tiempo real ya sea a la recolección así como al documento en particular. Por lo que solo recuerdas solo desde aquí, borda esa referencia de colección y documenta a tus amigos, proporciona una función de instantánea que devuelve una cadena. Puedes usar StringBuilder Ali, escuchar mi tecnología para suscribirte a esa corriente y escuchar los cambios. Entonces hagámoslo otra vez con esta vez aquí. Entonces ahora lo que voy a tener un comentario de inicio de sesión que tanto tin como luego simplemente escribiré a los usuarios dot-dot-dot. Estoy escuchando un documento en particular y cuando hay un tercio de inundación, 123 instantáneas. Entonces así es como obtenemos un arroyo. Y antes cuando escribamos dot get , nos dará un futuro. Eso es una cosa. Y entonces me conectaré, Escucha, eso es lo que sea que los cambios por los que está pasando la corriente, escucharemos eso cambia y simplemente escribiré resultado print dot-dot-dot. Ahora comprenderás la diferencia Es una vez y lo que es el tiempo real cambia. Ahora cuando vuelvo a hacer clic, lee datos de Firestore, mira, puedes ver nombre Google flutter. Pero ¿y si voy y cambio el valor que es diferente a Google? Y actualizarlo. Ahora si voy a ver mi consola de depuración, ver que tienes este resultado en legal. Es decir, ni siquiera toqué mi código VS, pero está mostrando todos los cambios en tiempo real. Y ahora si entro de nuevo, correcto, Google aleteo y actualización, entonces volverá a mostrar el nuevo valor. Entonces esta es la diferencia muy básica entre la cadena son si se comprueba. Por lo que hasta ahora podría estar pensando en estos términos que esta instantánea de consulta documento de instantánea riegue estas cosas. Al realizar almacén de archivos de calidad devuelve ya sea una instantánea de consulta son las instantáneas de documentos. Entonces, ¿qué es una instantánea de consulta? El snapshot se devuelve de una colección consultando y nos permite inspeccionar la colección, como cuántos documentos existen, dando existir a través de los documentos dentro de la colección. Ver cualquier cambio desde la última consulta y mínimo. Para acceder a los documentos dentro de una instantánea de consulta llame a esa propiedad perros, que devuelve una lista que contiene documentos snapshot. Por lo que sólo hay que recordar todos estos conceptos. Entonces, ¿qué es una instantánea de documento? Una instantánea de documento se devuelve de una consulta son accediendo al documento directamente. Incluso si no existe ningún documento en la base de datos, una instantánea siempre variará. Gire para determinar si ese documento de instantánea existe, use esa propiedad existe del mismo. Si ese documento existe, esa es una capa en nuestro caso, podemos leer los datos llamando al método de datos, que devuelve un mapa. Entonces este es el concepto que estamos escribiendo, a veces documentar vía escritura, a veces consulta instantánea. Por lo que hay que entender de memoria estos conceptos básicos. También, cuando estamos leyendo datos. Firestore, nuestras primeras capacidades avanzadas para consultar colecciones bastante anillos. trabajo deficiente con ambos una cosa leída se están suscribiendo a cambios vía stream. Entonces primero, que es importante en este filtrado, filtrar documentos dentro de una colección donde mi tecnología podemos cambiar, cambiar a una referencia de colección. El filtrado admite comprobaciones de igualdad y otras consultas útiles. Por ejemplo, filtrar a los usuarios donde su edad sea mayor a 20. Por lo que aquí se puede ver fuego con fuego, almacenar punto instancia de punto colección, punto donde la edad es mayor que el tipo D, dos en D y luego punto llegar a estos, solo se comprobará y obtendrá sin plomo esos datos. Y segundo es uno es otro ejemplo donde se puede comprobar si una matriz contiene algún valor como este. El segundo para las otras capacidades son limitantes. Es decir, limitar el número de documentos devueltos de la consulta. Podemos utilizar el método límite en una referencia de colección. Entonces simplemente tenemos que escribir Firestore Firebase, archivos firebase almacenados dot instance dot collection, los usuarios dot limit to dot-dot-dot se desvincula a los documentos serán devueltos. Y ese empatado está ordenando estos dos documentos para sesgo valor específico usar el orden POR es o puede ser descendente, orden ascendente. Por lo que aquí puedes ver Firebase file store dot instance, dot collection usuarios. Pero están ahí por edad, debe ser orden descendente. Entonces esto, estas son las formas en que somos. Podemos leer datos y filtrarlos a través de ellos. Por lo que hasta ahora hemos agregado datos con éxito vía datos leídos con éxito. Es hora de que actualicemos los datos. Entonces vamos a crear un nuevo botón. Y luego texto. Actualizar datos. En Firestone. Entonces en las axilas, debería ser un fregadero. Tenemos nuestra colección, son amigos, pero esta vez simplemente escribiré directamente esperar Firestore dot collection usuarios dot doc. Eso se alcanza documento fui a actualizar, aleteo 1, 2, 3, luego actualización de punto. Entonces me fui, era ad set, pero esta vez es actualización. Y la actualización de nuevo acepta valor clave. Por lo que quiero cambiar el nombre y cambiarlo para flexionar su Firebase. Y luego ahí dentro, no quiero que esté escuchando. Yo sólo quiero obtener el valor de este documento. Guardémoslo y comprobemos. Si hago clic en leer datos. Ver que has llamado a Google aquí, pero si hago clic en actualizar datos, debería ser ahora. Ahora de nuevo, si hago clic en datos concretos, ver ahora es nombre archivo Flutter con. Por lo que nuestro valor se ha actualizado con éxito en esa base de datos. Pero así es como podemos actualizar el documento en lugar de reemplazar todos esos datos solo usando esta función de actualización. Entonces en eso crear operaciones crud, ya hemos hecho crear, raid y actualización. El último es eliminar el documento de una nube. Firestore. De nuevo, crea un nuevo, pero luego después de este botón en ese niño, vamos a tener texto y escribir datos. Firestore. Entonces en el on-premise, tenemos una función asíncrona. Y aquí de nuevo, simplemente tenemos que esperar a los usuarios de la colección de puntos Firestore. Entonces Doc que es qué documento tenemos borrar con el reflector 1, 2, 3, y luego simplemente escribir del punto, del punto actualización. No es sólo empezar a eliminar. Y esto es todo ese código requerido para borrar también. Comprobemos nuestra aplicación. Al hacer clic en leer datos, los cuales mostrarán nombre más plano Firebase. Ahora si hago clic en eliminar datos, ahora debería eliminarse. Ahora si hago clic en leer datos, digamos que es nulo, tengo que agregar datos. Si quiero, y luego dar click en big data. Se irá con eso. Entonces así funcionan las operaciones de cred en Firestore. Y ahora estamos listos para trabajar con Firestore adecuadamente. Esto, construyo esta UI en lifo, en hoja o mostrando cómo realizar la operación. En el siguiente video, estaremos creando una aplicación del mundo real y usaremos nuestra base de datos Firestore en ella. Gracias. 12. Construir la App Note UI: Por lo que ahora vamos a construir en la aplicación Node para demostrar y usar cosas base de datos Firestore. En ese módulo anterior de autenticación, ya construimos el registro de inicio de sesión y la pantalla de inicio. Está empatado a su 10. Para continuar desde donde salimos, crearemos una app de toma de notas para comprender más profundamente sus operaciones actuales. Y además, para empezar, eliminaremos todo de la sección del cuerpo de la pantalla de inicio. Por lo que me voy, hemos fluido este contenedor y en marcha ahora solo retírelo todo. Y después de papá Emily, también me quité el cuerpo. Y puedes ver aquí y luego ir a nuestro punto principal. Lo primero que haremos es eliminar ese indicador de depuración pronto ellos materialmente material laboratorio, simplemente irá y escribirá debug, debería revisar Banner y dar un valor predeterminado. Entonces ese equipo de datos, simplemente escribiré brillo es igual a brillo dot.org. Ahora, si ves nuestra app, mira tenemos esta oscura Kim y me gusta mucho. En la pantalla de inicio. Después de la barra AB, crearemos un botón de acción flotante. Y agreguemos botón de acción flotante. Fondo color de colores, punto naranja. Excelente. Niño. Niño será un nombre de icono que puedo agregar. Y tenemos la función OnPause. Ahorremos y comprobemos. Ver esto. Pero entonces tenemos uso para navegar para agregar una pantalla de notas. Definitivamente antes de agregar nodos, v debe tener una granja con la ayuda de cual podemos agregar datos a esos datos vía retorcida. Así que simplemente crea un nuevo archivo dentro de las pantallas y lo nombra, agrega nodo, punto, punto. Después crea una región con estado. Yo lo estoy nombrando agregar nada pantalla. Y por encima de ella. Paquete material importante. Entonces el regreso es andamio. En ella. Tengamos una barra AB. Ab bar. Vamos a dar ese color Graham de colores transparente y elevación como 0. Entonces en el cuerpo. Tendré una sola vista de desplazamiento infantil para que no tengamos ningún problema de desplazamiento. Entonces en el niño tendrá una región de relleno con bordes insertos punto. Y luego en ese niño, tendré ese widget. Entonces solo dale exceso de alineación cruzada esta clase existe y admin dot start. Y entonces tendremos a nuestros hijos. Entonces lo primero que podemos hacer es ir a nuestra pantalla de inicio. En el botón de acción flotante, podemos navegar por el navegador dot off contexto que empuja hacia fuera constructor y pantalla. De acuerdo, Vamos a revisar nuestra pantalla Añadir nodo aquí. Ves, tenemos esto limpio. Ahora empecemos por los widgets de columna Linda que está dentro de la columna. Empezaré con el texto y el título. Dale un poco de peinado de textil. Tamaño de fuente. Y el peso de la fuente puede ser fuente de peso, negrita. Guárdalo. Ver tenemos este título. Después de muerto. Vamos a apurarnos caja de tamaño. Entonces dale un campo de texto. Texto, decoración, decoración. Dar frontera, delineando frontera de entrada. De acuerdo, vamos a guardar y ver. Ver, tenemos nuestro campo de texto. Ahora después del campo de texto, Vamos a darle una altura de caja de tamaño de 13. Entonces otra vez, vamos a tenerlo texto. Lo mismo que un título. Y digamos que he copiado en un día entrega como descripción. Y tercera descripción aquí se puede ver, nuevo, tendré un campo de texto. Ahora estos textos tendrán líneas mínimas de cinco y longitud máxima de 10. En esa declaración. Como de costumbre, borde, contorno, borde de entrada. Vamos a comprobar, a ver que este maxlength es igual a 30 línea max que debería ser. Está bien. Ahora, vuelve a comprobarlo. Ver tenemos nuestra descripción en el campo de texto no es tan estrecho. X3, tengamos nuestra caja de tamaño. Tamaño caja de alta tecnología D. Luego un contenedor llegando a darle botón. Vamos a darle una altura de 50. Entonces espere, consulta de medios, ese contexto. Entonces en ese niño, vamos a tener un botón elevado. Y entonces nos gustará ese texto. Anuncio. Nota. Simplemente cambiaré ligeramente con este modo add. En primer lugar, le daré estilo al texto. Este estilo de texto. Lo primero será divertido tamaño de 25 y font-weight. Negrita. Entonces le daré estilo a los elevados, entonces eso es un líquido. Pero luego estilo de puntos de y luego simplemente tardíos colores primarios, naranja. Ves, ahora se ve decente. Creando, agregando notas pantalla. También crearé una nueva pantalla llamada nota. El cuaderno de edición que tenemos para crear un archivo. Después de eso, será similar agregar notas. Simplemente copiaré todo en el Añadir nodo y luego lo pegaré en la nota de edición. En primer lugar, voy a cambiar el nombre. Escribiré pantalla de edición. Entonces tenemos nuestro color de fondo como alivio transparente. Entonces solo lo daré en acciones en el botón app, Botón Eliminar. Es decir, debe ser botón de icono. Y en los iconos simplemente escribiré. Yo puedo, puedo empezar a eliminar. El alerta es igual a las alertas punto. Ahora tenemos vista de desplazamiento de un solo hijo. Acolgado. En única diferencia estará en el contenedor. Es decir, actualizará nodo, agregará nodo. Y aparte de esto, todo será igual. Por lo que tenemos nuestro nodo add, tenemos nuestra nota de edición también. Es hora. Deseamos. Katie, pantalla de inicio de Florida que está aquí. Las notas de Alden serán recogidas de la base de datos. Entonces tenemos que construir algo para ello. Vamos a la pantalla de inicio. Después del cuerpo de Barr. Simplemente vamos a crear primero una vista de lista. Después niños. Después comienza con la tarjeta. En primer lugar, empecemos con el widget de la tarjeta. Daré el inicio de los colores de la tarjeta. Después el alivio. Se lo daré a cinco. Entonces margen. Voy a darle agregando 10. Entonces dentro de ella, tendré una lista comprando. ¿ De acuerdo? Ahora le daré contenido agregando insertos de borde simétricos. Cómo no es menos de lo que S. Entonces. Vamos a darle un dato ficticio. Construye una nueva app. Démosle un poco de tinción el peso. Tamaño de fuente 18. Peso de fuente, font-weight, negrita. Entonces vamos a tener un subtítulo es cuando esto Vamos a leer el texto. Aprende a aprender a clonar de aplicación clubhouse de ti. Déjame suponer. Entonces. Entonces solo tienes que darle el desbordamiento, no el texto insertado. Sí, texto insertado. Tenemos que escribir propiedad de desbordamiento y simplemente escribir desbordamiento. Nuestro punto de gripe puntos elipsis y dar línea Max dice dos lentes también. Vamos a revisar, guárdalo. Y a ver tenemos lista la interfaz de usuario. Esa es una nota sencilla. Es un maniquí arriba, pero ahora mismo, pero en la siguiente sesión vamos a buscar realmente muere cuando ahora lo que quiero, Cuando alguien BAPS en este estilo de lista, debe ser dirigido navegado a la pantalla de edición. Por lo que voy a leer el material de empuje de puntos, constructor de diseño de página. Notemos pantalla. De acuerdo, guárdalo. Ahora cuando hago clic en esto, veo que también tengo esta pantalla de modo de edición. Por lo que con esta UI se completa. Tenemos nuestro nodo add, tenemos nuestro nuevo TUI, y si hacemos click en él, podemos leer actualización así como borrar de este UIS desvinculado. Entonces la próxima sesión crearemos las funcionalidades para que se dispara a eso es crearemos este archivo de servicios separados y luego adjuntaremos ese archivo con nuestra esta UI. 13. Crear datos de notas y modelos: Hola. Por lo que hasta ahora hemos construido con éxito a partir de nuestra aplicación de nodo. Por lo que en esta sesión, crearemos la funcionalidad para agregar esos datos a Firebase. Firebase, Vamos a crear un nuevo archivo en la carpeta de servicios y nombrelo. Tienda de incendios, servicio oscuro. Entonces de igual manera, al igual que un servicio OT, crearemos una clase llamada servicio de tienda de incendios. Y ahora lo primero que tenemos que hacer es crear una instancia de almacenamiento de archivos Firebase es la instancia de punto Firebase Firestore. ¿ De acuerdo? Entonces esto ya sabemos que tenemos que crear una instancia. Después de eso. Vamos a crear nuestra función, futura función para insertar nodo. ¿ De acuerdo? Ahora solo piensa qué datos se requieren al insertar un nodo. Eso es lo primero que se requerirá es ese título. Lo segundo será la descripción. Y lo tercero será el ID de usuario. Para que cuando estamos almacenando los datos en la base de datos, al menos sepamos qué nodo pertenece a qué usuario. Y entonces solo podremos buscar algunos nodos en particular los cuales son solo de usuario de Deck. No queremos que el usuario acceda a los datos de otra persona. Así que simplemente primero haz eso, prueba a catch block. Ahora aquí tenemos unos nodos de colección de puntos Firestore . Ahora, y usaré la función add. Demos el JSON. Título de los datos se titulará. Esta será una fecha de descripción. También debo mencionar esa fecha en guerra cuando estaba trayendo insertado. Por lo que sólo escribiré datetime dot ahora. Y lo último será el ID de usuario. Eso es ID de usuario 0, k. Así que nuestra función está hecha. Entonces el siguiente paso es asegurarnos de que pasemos nuestro modelo de usuario mientras navegamos a la pantalla de inicio. Porque cuando vamos a agregar, cuando vamos a la pantalla Agregar nodo, se requiere el ID de usuario. Entonces vamos a la pantalla de inicio. Aquí. Me aseguraré de que el modelo de usuario sea aceptado en el constructor. ¿ De acuerdo? Se hace. Ahora en la pantalla de registros. Se está mostrando porque aquí estamos navegando a la pantalla de inicio aquí en esta línea. Por lo que definitivamente tenemos que pasar el modelo de usuario, ese es éste. Sólo tenemos que ir y pasarlo así. De igual manera en la pantalla de inicio de sesión, tenemos que hacer lo mismo. Tenemos que copiar y pegar ese resultado, que es un tipo de datos de usuario, y luego simplemente enviarlo. Ahora cuando vayamos a nuestro main.Jack. Aquí también está mostrando edición. Porque aquí estamos regresando pantalla de inicio. Entonces sólo tenemos que, ya que el constructor de stream nos da datos de un usuario en particular, es decir, usuario, ellos ataron esto siendo enviados, ver, sí, se puede transmitir de usuario. Entonces aquí solo tienes que escribir datos de puntos instantáneas, dicho eso. Entonces ahora nuestro trabajo está hecho hasta aquí. Lo siguiente es llamar a esa función de nodo de inserción que es, que es archivo de servicios. Tenemos que llamarlo a partir de ahora, agregar notas pantalla. Entonces primero que lo primero, lo que tenemos que hacer es aceptar datos de usuario. En esa nota publicitaria, el propósito principal masculino de pasar por el usuario la tina nos para esta pantalla. Para que cuando estamos agregando un nodo, también podamos enviar ese ID de usuario. Nuevamente en la pantalla de inicio se está mostrando editar porque aquí en la naturaleza al abrogar, tenemos que enviar al usuario. ¿ De acuerdo? Al igual que esto. Ahora de nuevo, ve a agregar notas pantalla. Ahora como ahora estamos usando el campo de texto aquí, tenemos que crear un controlador de edición de texto para que podamos recuperar el valor lo que se está escribiendo. Por lo que voy a sólo FirstName es name it Título. Controlador es igual a controlador de edición de texto. Segundo controlador será Controlador Descripción . Y solo escribiremos escritorio. Se trata de un texto editándolos para alertarnos cuando. Y como de costumbre, tenemos que mostrar un icono de carga booleana para que siempre que se esté enviando alguna, alguna solicitud de red sea circular, se debe mostrar indicador de progreso. Y vamos a copiar ese controlador y asignarlo aquí, este es nuestro título y este es el campo de texto del título. Simplemente escribiré controlador y el controlador. Entonces esta es nuestra descripción a continuación. Este es nuestro campo de texto para la descripción lo haré, simplemente le asignaré un controlador de descripción. ¿ De acuerdo? Diez, ahora Va código. Ahora lo que quiero es cuando el usuario teclea y haga clic en este botón Agregar nodo, entonces se debe llamar a la función. Entonces vamos al botón elevado, que sea un fregadero. Entonces aquí, lo primero que haré es hacer un cheque. Eso es controlador de título dot txt. Si no es nulo, nuestra descripción controller.js, si tampoco es nulo, es decir, si es nulo, entonces qué debemos hacer, o simplemente si es nulo, deberíamos mostrar un andamio messenger que es un snack bar. ¿ De acuerdo? Y en ese contenido, simplemente escribiré. Se requieren rellenos. Requerido. Está bien. Si es falso, eso es entonces lo tiene. En primer lugar, haré el estado establecido y los haré cargar indicador a true. Y como estoy haciendo verdadero un indicador de carga, debería mostrar el indicador de carga en la eternidad operado. Si la carga es cierta, entonces tendremos un indicador de progreso circular del niño central. De lo contrario, mostraremos un contenedor que es el botón. Ahora, manera hicimos el estado set 2, entonces tenemos que esperar los servicios Firestore. Hacer el objeto. Entonces simplemente montar punto insertar nodo nueve, el título voy a escribir el texto de punto controlador inactivo y la descripción voy a escribir descripción controlador dot txt. Ahora, para el ID de usuario, tengo que escribir widget. Dado que es un widget de estado, con estado, tenemos que escribir widget dot user para acceder a esa variable de instancia y dendrite dot ID de usuario que es UID, así. Y cuando esto se haga, volveremos a poner estado y hacer que el alusivo a falso. Y después de eso, simplemente voy a navegar hacia fuera, eso es el navegador dot pop de esa pantalla. Después de que se haga. Entonces vamos a guardarlo. Y ahora intenta si está funcionando o no. Contamos con nuestra consola almacenada de archivos Firebase también. Ahora, ve a dar click en Agregar Nodo. Aún así escribiré que aquí una descripción de Master of gloss lead farm application. Van a comprar. Significado. Dicho esto, simplemente daría clic en Agregar Nodo C. Cargando está ahí. De acuerdo, salió. Veamos nuestra base de datos Firestore. Si algunos datos se están insertando o no. Digamos que puedes ver estos nodos y luego alrededor de 10 descripción ID de usuario y esa fecha. Entonces hasta aquí hemos creado e implementado con éxito la inserción de datos. Por lo que obviamente, en la próxima sesión, vamos a recuperar esos datos, todos estos datos de Firebase. Pero antes de eso, como estos datos están en ese formato JSON, quisiéramos convertirlos en objetos. Es decir, para eso tenemos que crear nuestros modelos, modelos para la nota también, lo voy a escribir, crear un nuevo nodo de archivo punto punto dentro de los modelos. Entonces aquí crearé un modelo de nodo de clase. Y aquí simplemente escribe esos datos que se requieren. Se trata de cadena ID, título de cadena, descripción de cadena, marca de tiempo de la nube Firestore. Entonces string ID de usuario. Entonces crearé el constructor y simplemente buscaré, Correcto, requirió este ID de punto. Y requirió esto.titulo requirió esta descripción. Y adquirió este punteado requirió esto.UserID ID. Y lo último que tenemos que crear un método de fábrica para que tome la instantánea del documento de la tienda de bomberos y se convierta en este modelo. Simplemente lea fábrica de JSON. Aceptará una instantánea de documentos, instantánea , luego el modelo de retorno. Ahora tenemos que escribir esos datos. Eso es el valor de datos IID será snapshot dot ID. Entonces título será instantánea. Título. Descripción será la descripción de la instantánea, luego la fecha. De igual manera, fecha de instantánea e ID de usuario. Entonces solo te explicaré una cosa. Que este ID de usuario es el ID único de ellos usuario, pero este ID es el ID del documento que es éste. Para que podamos identificar el documento y utilizarlo para manipular es decir, actualizar o eliminar en el futuro. Por lo que definitivamente siempre necesitamos ese documento ID. Es muy útil. Entonces eso es todo para esta sesión. Aquí. El día de hoy hemos aprendido a subir esa tarea y también hemos creado con éxito una clase modelo. Eso dijo 10 Q 14. Recuperar y actualizar los datos de nota: Por lo que ahora hemos insertado con éxito nuestros datos, y estos son los datos que ahora vamos a buscar y mostrar en nuestra pantalla de inicio. Saca tu Código VS y ve a la pantalla de inicio. Estaremos usando stream porque vamos a buscar todos los nodos desde los fuegos hasta usar un stream para que cualquier cambio se refleje en tiempo real. Y esta consulta arroyo voy a estar escribiendo en casas limpia en sí misma y no voy a crear un 10 de mayo separado en servicios. Vayamos a la pantalla de inicio. Aquí. Esta es nuestra fiesta. Sólo voy a copiar esta tarjeta que se corta este auto de aquí. Lo necesitaremos. Así que solo asegúrate de tenerlo en tu sistema eso es solo copiar. Aquí abajo. Usaré un constructor de cuerdas. Se puede usar futura buildup, pero yo solo quiero que dado un valor cualquier cambio de datos o cualquier cosa que hagamos, no tenemos que refrescar nuestro estado de conjunto. Es decir, sólo diré espacio de fuego, Firestore esa instancia. Modos de colección. Entonces usaremos la cláusula where para que podamos buscar si particular ID de usuario. Al filtrarlo. Le decimos a los usuarios ID de usuario es igual a user.email UID, es decir usuario, este usuario es éste. Y luego instantáneas. De acuerdo, tenemos nuestra co-edición. Ahora en ese constructor. Y vamos a tener contexto y ver instantánea, instantánea. Y entonces simplemente escribiré si la instantánea tiene datos, si no, simplemente gire un conjunto de indicador de progreso de color. Si la instantánea tiene datos. Después de eso, ahora mismo, voy a hacer otra comprobación para ver si los datos de punto snapshot, dot docs longitud de punto es mayor que 0. Es decir, tenemos algunos documentos. Si no tenemos ningún documento, simplemente lo haré en lo demás regresaré centro. Y aquí me pareceré texto de no notas. Yo estoy disponible. Eso es todo. Pero si la longitud del documento es mayor que 0, devolveré una lista views.py. Esto si de lo contrario es muy importante porque podría haber sido que el usuario no ha subido nada. Por lo que aquí tenemos que comprobar con esto. Ahora, el recuento de elementos será datos de punto de instantánea, documentos de punto, longitud de punto. Y luego a continuación tenemos contexto. Y ese índice 0 no lo permitió. Todo va realmente bien. Por lo que estos datos, que vamos a estar obteniendo en esta instantánea, significará ese formato JSON. Por lo que aquí vamos a convertir tener modelo de aparejo. Entonces así, simplemente escribiré módulo Node, le daré un nodo de nombre. Entonces dejaré model.fit. Yo soy Jason. Y está ejerciendo una instantánea. Por lo que solo tenemos una gran instantánea, datos de punto, punto, docs e índice. Entonces aquí entre barras y convertir el JSON a un objeto. Ahora, en la declaración de retorno, simplemente pegaré, pegaré esa tarjeta que ya copiamos antes. Por lo que aquí en el texto que está en ese título, escribiré ningún título de punto esta nota. Y en la descripción también, simplemente me gustaría Node.js scription. De acuerdo, Vamos a guardar y empezamos y comprobamos en la pantalla de inicio lo que se ha mostrado. Ver aprendido Florida. Por lo que estos datos vienen de la base de datos de sto final. Por último, la rehabilitación recuperó con éxito los datos también. Podría estar preguntando por qué uso StringBuilder. Entonces digamos que voy a ese título y cómo escribo ninguno. Firebase. Y luego las operaciones en la tienda de bomberos Firebase. Acabo de decir aprender Firebase file store. De acuerdo, ahora cuando hago clic en Agregar nodo, mira que ya se está recuperando. No tengo que reiniciar nuestro estado set ni lo que sea. Dado que es un StringBuilder, se está mostrando directamente en la pantalla de inicio. ¿De acuerdo? El siguiente paso es tener esa funcionalidad de nota agregada. Entonces para que lo primero que tenemos que hacer es a los datos del nodo de tiempo pasado desde la pantalla de inicio y aceptados en la pantalla de edición. Entonces vamos aquí. Voy a parecer bien, conozco nodo. Y aquí usaré el constructor y simplemente escribiré este punto nada. Ahora en la pantalla de inicio se está mostrando enter porque aquí tenemos dos jefe Daniel. Y luego nota ya aquí, ya hemos asignado a una variable. Pero esto se hace. Ahora. No conocía la pantalla punto-punto-punto. Tenemos que crear dos mazos y estar hecho de nuevo, cuando un controlador, controlador, luego el nombre del controlador, descripción, controlador, mazos, cualquier controlador. Está bien. Y vamos a tenerlos cargando variable booleana. Entonces todo va a ser bastante visto. Entonces ahora lo que quiero es cuando el usuario hace clic en esto, sus datos se deben mostrar aquí, es decir, cuando estamos editando. Entonces en ese caso, obviamente la descripción de apriete debe mostrarse en ese campo de texto. Lejos, papá, hay que preasignar y dar valor inicial, que x y pensar y aprender. Y lo podemos hacer en ese estado init. Aquí, voy a escribir del controlador dot txt es igual al widget dot naught dot. Del mismo modo, descripción controlador dot dx es igual a rechazar H descripción de punto naught. Y tenemos que asegurarnos de asignar estos token TI para que conduzcan al campo de texto. Entonces aquí así. Y aquí de nuevo, hemos leído descripciones y para aprender. Guardémoslo y veamos si está funcionando o no. Ahora si hago clic en el aleteo Aprender Firebase, sí, está funcionando. Podemos ver que cuento en la descripción. Por lo que ahora es el momento de trabajar en este botón Actualizar. Como ustedes, estamos ayunando, tenemos que crear es función creativa. Por lo que a continuación en cierta característica cotidiana, actualización, volverá a pedir tres cosas. String. primera hora leeremos el ID del documento porque al menos nos importa sabremos qué documento adoptar, luego Título de cadena, y luego cadena S para que se hunda. Ahora, vamos a tener nuestro bloque de captura. Simplemente puedo imprimir entonces cualquiera de los héroes, para que puedan imprimir datos. En ese try-catch eso no es un bloque try. Simplemente tenemos que leer una tarifa. Firestore colección, notas, documento, doc, doc id, actualización. De verdad me encantó. Descripción, descripción de la diversión china hecho. Vamos a la pantalla de edición de notas. Y abajo tenemos nuestro botón. Hagámoslo un fregadero. Más 10. Revisaremos si no ha escrito. Es del controller.js no igual a NP y descripción. Y x tampoco está vacía. Entonces aquí escribiremos si está vacío. Por lo que solo mostraremos un snack bar se requiere. Y si no en esa impresión estatal. Hagamos estado establecido. Cargar es utilizar el operador unario y comprobar si la carga es para mostrar centrado y luego un indicador de progreso circular. Si no, entonces ese botón. Sí, usaré await y Firestore servicios dot update, doc ID, eso es documento Y será simplemente widget. Id. Título será L controlador de texto punto. Descripción será Descripción controller.js. Siguiente. Después de esto, entonces volveremos a establecer el estado, cargando a falso. Y simplemente nunca saldré. Se trata de punto de navegador. Guardémoslo y probémoslo por nuestra cuenta. Saca a la editora. Sodio te después. Si voy a aprender Firebase inundada y un finito, sólo aprende Firestore y actualizado. C. Está trabajando en España. Podemos ver que los cambios que se aprende. Desde de nuevo, es un constructor de cuerdas. Es por ello que esos cambios se reflejaron en tiempo real. Entonces eso es todo para este video. En el siguiente video, trabajaré en este botón de borrar. Gracias. 15. Agrega reglas de seguridad: Bienvenido de nuevo. Entonces, por último, la única función o la izquierda destacada es eliminar una nota en particular. Aparte de eso hemos creado y actualizado con éxito. Por lo tanto, trabajemos en la funcionalidad para eliminarla también. Ir a Firestore servicios punto archivo punto. A continuación nodo de actualización. Crearé la futura función llamada delete node. Haz que se hunda. Por lo que para eliminar un nodo v ID de documento requerido. Por lo que lo estoy aceptando como parámetro. Ahora, usa ese try catch block. En el bloque try, es sólo una línea de código la que se espera, almacena nodos de colección de puntos, luego, luego dot doc ID y simplemente 10 puntos delete. Dicho esto, eso es lo único que se requiere. Tenemos nuestra función lista. Trabajemos en ese retrasado puedo editar modo pantalla, ese es éste. Y también mostrarlo cuadro de diálogo confirmar para asegurarse de que el usuario no elimine accidentalmente nodo simplemente presionando este botón superior. Porque pueden suceder escenarios de que sea menos rey su pantalla y por error, da clic en este botón. Ir al Modo Edición. En las acciones de la barra de aplicaciones tenemos este cuaternión. Entonces en el local, yo Kid, un fregadero. Y lo primero que mostraremos es un espectáculo. Diálogo. En este contexto es constructor de contexto. Tenemos que escribir una función y está aceptándolo contextualizará. Dicho eso. Ahora, simplemente volver y alertar cuadro de diálogo. Eso es diálogo de alerta dentro de él. En ese título. Vamos a darle un texto. Por favor confirme que en ese contenido. Simplemente dale un texto llamado, ¿Estás seguro? ¿ Borras el nodo? Eso es todo. Y después de ello, tendremos algunos botones. En primer lugar, sí. Pero luego texto. Pero entonces y en ese niño, simplemente escribe e, s sí. Y el botón Data será un botón de texto, pero será simplemente para decir que no. Y cuando el usuario haga clic en este nuevo mar liso simplemente debe navegar hacia fuera. Por lo que escribiré navigator dot pop en ese ningún botón. Pero en el botón Sí, escribiré en Prezi voy a hacer en un fregadero y emular, esperar Firebase. Estudie todos los servicios de tienda que eliminan nodo y el ID es rígido. Pero ID de nodo, eso es todo. Y después de eso, lo primero que haré es cerrar ese diálogo con el navegador dot Bob. Y después de eso, cerraré el verde. También porque ahora no deberíamos poder editarlo. Yo lo hice como ya está siendo Daley lo hizo. Está bien. Vamos a probarlo. Yo lo he guardado. Estar fuera nuestro emulador. Si hago click en Aprender Firestore y ahora doy clic en el botón Eliminar. Ver Tengo esta pantalla de confirmación. Si hago click en No, retrocederá directamente. Pero si hago clic en sí, ver que saca a pantalla de inicio y nuestra nota de deuda ha sido eliminada con éxito. Por lo que finalmente, las funcionalidades están funcionando y tenemos un funcionando correctamente completado que se completa la aplicación modo. Entonces lo último que tenemos que hacer, un tema final es agregar reglas de seguridad a Cloud Firestore. Entonces cuando estamos usando Firestore para la producción, debemos cambiar las raíces de seguridad. Al igual que en decimal, cualquiera puede acceder a él con su URL. Y obviamente por qué los datos estarán en riesgo y también nos pueden dar un gran pin de uso si alguien lo hace mal. Entonces porque hay finitamente, no queremos este tipo de situaciones. Deberíamos cambiar esa condición y qué condición usaré se llama la autenticación requerida. Una de las root de seguridad más comunes por término, es controlar el acceso en función del estado de autenticación del usuario. Por ejemplo, es posible que su aplicación desee permitir a menos que los usuarios inicien sesión escriban datos. Por eso. Saca la consola Firebase. Acceda a la base de datos Firestore y haga clic en estas reglas. Aquí. El C europeo, esto está permitiendo que todos accedan a la base de datos, pero no lo haremos, no la queremos. Lo vamos a quitar. Densa aquí. Si si, si request dot no son iguales a null, Eso es todo. Y dar click en Publicar. A partir de ahora. Encendido. El usuario ha sido autenticado, este usuario de inicio de sesión, correo electrónico, g-mail, lo que sea, entonces sólo se le permitiría acceder a esa base de datos. Aquí. Esta parte en particular significa que cada uno, puede coincidir con cualquier documento en toda la base de datos. También podemos cambiar este tipo de reglas también, pero no creo que sea tan importante en este momento. Otro patrón común es asegurarse de que los usuarios puedan leer en Lee, leer y escribir sus propios datos sobre Lee. Son pocos los que puedes probar por tu cuenta leyendo los archivos oficiales a la documentación. Pero lo más comúnmente utilizado es esta autenticación requerida. Entonces eso es todo. Para este módulo. Hemos aprendido mucho. Y así es como crear una cuenta firebase, cómo hacer esas operaciones cred. Y por último, construye nuestra aplicación completa de Node también. Y al final aprenderemos a cambiar las reglas de seguridad. Por lo que en el próximo módulo, estaremos aprendiendo sobre el almacenamiento de Firebase y cómo subirle archivos. Hasta entonces, sólo sigue practicando. 16. Configuración de almacenamiento de la base con Firebase: Hola, bienvenido a este nuevo módulo donde estaremos discutiendo qué es Firebase Cloud Storage y cómo implementarlo usando flutter. Entonces hasta ahora, hemos aprendido a autenticar al usuario, a almacenar datos de usuario en Fire story que era, pero ahora es el momento de aprender a subir archivos a Firebase también. Entonces ahora la pregunta es, ¿qué es Firebase Cloud Storage? Cloud Storage está diseñado para ayudarnos a almacenar y servir de forma rápida y sencilla contenidos generados por el usuario como 42 videos y cualquier otro archivo. Por lo que en cualquier aplicación del mundo real hoy en día, muerto fácil y necesidad de usar el almacenamiento. Si ves Instagram, todo se trata de imágenes. Y definitivamente tenemos que usar una instalación de almacenamiento. Aparte de eso, si ves WhatsApp, cuando estamos enviando solo texto, entonces solo estamos usando la base de datos. Pero supongamos que estamos cambiando nuestra imagen de perfil ya sea enviando imágenes o videos a otro usuario. En esos casos, tenemos que usar algún tipo de almacenamiento. Por lo que obviamente el primer paso fue configurar nuestro proyecto Firebase, que ya hemos hecho. El siguiente paso es agregar la dependencia de almacenamiento de Firebase. Vamos a nuestro navegador Chrome, ¿verdad? Pub spec, entonces, lo siento, Pub dot-dot-dot. Y aquí, simplemente escribe almacenamiento Firebase. El primero es que tienes que copiarlo y pegarlo en el archivo YAML. Aquí que dice Descargar, dependencia e instalarlo en nuestro proyecto. Ahora, el siguiente paso es habilitar el almacenamiento en el proyecto Firebase. Esa es la consola Firebase. Al igual que Va creó un incendio con, datos de la tienda de incendios con, esa misma manera, solo hay que seleccionar el almacenamiento de este menú de la izquierda. Y en cuanto hagas click en él, verás esa parte de cubo, esa es ésta. Esta es nuestra pieza única del cubo y tiró esto en Levy estará subiendo multas. Y camioneta estábamos usando reglas de base de datos Firestore. De igual manera en el almacenamiento también hay reglas. Pero como estamos usando la autenticación Firebase, por eso no tenemos que cambiar ninguna regla aquí. Pero si necesitas cambiar la regla para que el almacenamiento Firebase se haga público para las pruebas. Eso también se puede hacer, pero definitivamente no en esa etapa de producción. Por lo que tenemos nuestro almacenamiento listo, tenemos nuestra dependencia lista. Y sólo revisaremos una cosa aquí. Por lo que esto también podemos simplemente copiarlo ya que está emitiendo algún error aquí. Yo sólo voy a ir a pub spec y pegado. Está bien. Ahora es el momento. Nosotros construimos una nueva pantalla también. Por lo tanto, crea un nuevo archivo dentro de la carpeta de bazos y nombra, sube imagen punto, punto. Y ahora crea un widget con estado. Pero antes de eso voy a importar el paquete y luego crear un estado completo rígido y nomenclatura. Subir pantalla de imagen. Como de costumbre. Andamio. Ese título. Escribiré mazos subir para encontrar caminos. Y yo sólo lo haré centro. Cuerpo. En primer lugar, crearé dos botones para seleccionar una imagen. Eliminemos esa columna. Entonces niños en el cuerpo, voy a dar algún tipo de flexión es cuando sólo se lo dan a independiente. En eso niños. Yo quiero una caída más rápida. Dos botones para eso. Y creará la fila dentro de la columna. Darle media x es un elemento, media existir vendiendo cuando los puntos espacian uniformemente. Y que los niños voy a tener elevado, pero 10 elemento que se eleva botón icono de punto. Simplemente escribiré una cámara. Y la mano de obra debe ser cámara. De igual manera y elevarlos. Pero entonces podemos y vamos a dar yo puedo como puedo agregar el texto de reunión. Entonces lo que he creado para que esto muestre, tienes que ir al archivo main.js y comentar la pantalla de inicio aquí. Y en cambio, en lugar de ello, giraré nuestra pantalla de imagen de subida. Ahora guárdalo. A ver si está funcionando. Nuestra pantalla de subida de imagen se ve muy bonita. Esta pantalla que he creado al principio, solo para demostrar cómo hacer las operaciones en almacenamiento. Después lo hacemos con éxito. Nuevamente, implementar esa historia también en nuestra aplicación de nodo. Pero antes de eso, lo básico, debemos conocer lo básico. Ahora. Podrías estar pensando, vale, estoy viendo vamos a subir imagen, imágenes y todo. Pero cómo para acceder a esa categoría de dispositivo, nuestra cámara y la imagen pk que hacemos, necesitamos hacer algunos usos de paquetes de terceros. Son muchos en el mercado, pero estaremos usando el picker de imagen. Vayamos a pop ahí y a picker de imagen. Por lo que esta dependencia usaremos con el fin de acceder al dispositivo del usuario, es decir Gallery son la cámara y luego buscar la imagen y simplemente copiarla. Ve al spec dot YAML y pega aquí y simplemente guárdalo. Por lo que nuestras dependencias están todas establecidas. En este video. Hemos configurado con éxito Firestore así como hemos creado la interfaz de usuario. En el siguiente video, aprenderemos a usar Cloud Storage y cuáles son sus terminologías. Gracias. 17. Comprender el almacenamiento en la nube: En esta sesión, sólo entenderemos lo que esta nube Firestore y algunas de sus terminologías. Porque antes de escribir código, al menos debemos conocer algunas de las funcionalidades o características que permite. Tan directamente por usar Almacenamiento en la nube. En primer lugar, tenemos haciendo paquete stand-up, que ya hemos hecho. Entonces el siguiente paso es crear una instancia de almacenamiento que se llama getter de instancia en el almacenamiento de Firebase así, el almacenamiento de residuos se llama instancia de punto de almacenamiento Firebase. Esto lo hemos hecho en cinco mejores artes así como en fuego con tienda de bomberos. Entonces hay otro término llamado referencias. Referencias. Una referencia es un puntero a un archivo dentro de su bucket de almacenamiento especificado. Este puede ser un archivo que ya existe o uno que no existe. Para crear una referencia, utilice el RDF, que es href mi diez en allí instancia de Firebase. Y este es el ejemplo. En palabras simples, esta es la ubicación de su almacenamiento de archivos. Es decir, si hubiéramos mencionado directamente aquí, barra y luego el nombre final. Entonces si vamos a nuestro almacenamiento que está aquí, ese archivo se almacenará directamente en el directorio raíz. Pero sus amigos también pueden ser anidados archivo o directorio. Proporcionar la parte completa. Rus ese niño mi cabeza en la diferencia de retorno, va a crear carpetas dentro del dieléctrico. Eso significa que si quieres crear una carpeta que sea imágenes, y luego dentro de ella, subimos la imagen, solo por ejemplo aquí. Primera carpeta puede ser la imagen de perfil del usuario. Segunda carpeta podría enviarse elementos como este. Para eso simplemente tenemos que crear una referencia. Entonces mencioné el directorio dentro del método RDF, así, imágenes slash y luego el archivo de imagen son, podemos hacerlo de una manera que sea dot ref, luego dot child, es decir, este es el nombre de la carpeta y luego dot child que es directamente el archivo de imagen. Entonces este es ese concepto de referencia. Ahora bien, ¿qué es listar archivos y directorios? Firebase proporciona la capacidad de enumerar los archivos y directorios dentro del directorio. Existen dos métodos disponibles que proporcionan esta capacidad, lista y lista a bordo función mi declaración de impuestos, cualquier resultado que contenga cualquier archivo, directorios, y token de paginación de la solicitud. Entonces supongamos que hemos subido con éxito la imagen. Ahora cuando llega el momento de recuperar esas imágenes del almacén. En ese caso, utilizaremos este material. Entonces simplemente lo que tenemos que hacer es en instancia B tenemos Convención. El fondo de referencia es donde se ha almacenado ese archivo y luego enumerar. Nos dará en los archivos almacenados en nuestro almacenamiento. Y ya que vendrá en una lista de artículos. Por lo que simplemente tenemos que bucear a través de él. En el ejemplo se puede ver así es como lo hacemos. Esa propiedad items representa archivo dentro de ese bucket y la propiedad de prefijo representa sus directorios anidados. En caso de que tengamos un gran volumen de archivos y directorios llamados LinkedList. Puede que lleve mucho tiempo devolver nuestros resultados. En este caso, la lista de llamadas y limitación de su resultado pueden resultar en una mejor experiencia de usuario. Entonces en el ejemplo se puede ver aquí estamos pidiendo los datos, pero solo para los primeros 10 datos, Eso es todo. Entonces este es el concepto de listar archivos y directorios. Después viene subiendo archivos. Entonces este código ficticio, esta es la sintaxis requerida para subir un archivo. Archivo Fasta debemos, deberíamos tener un expediente. Y luego en esa instancia Get Data View main chain data friends donde queremos que se cargue y luego simplemente leer el archivo de salida de punto. Y dentro de ese archivo put, enviamos nuestro archivo en el que está. Esto es muy sencillo y esto es sólo este código o vuelo. Estaremos implementando este código en la próxima sesión. Solo quería darte la visión general y cómo funciona el almacenamiento y cuáles son las diferentes funcionalidades que ofrece. Lo último que es realmente importante son las URL descargadas. En la mayoría de los casos de uso, posible que deseemos mostrar imágenes almacenadas en un cubo que está almacenado dentro de nuestra aplicación. Y para eso, hemos solicitado descargar la URL de ese almacén. Nos dará un enlace. Y ese vínculo que tienes que mostrar en nuestra visión. Para descargar el aryl, simplemente tenemos que mencionar la referencia de la imagen y luego usarlos mi URL de descarga de 10 puntos. Esto, también lo usaremos en futuros videos. Ahora, si quieres conocer más sobre Cloud Storage, simplemente puedes ir a la documentación oficial que está aquí y leer todo, qué referencias, descargar URLs, subir archivos, cómo subir datos sin procesar, cómo agregar metadatos, ver qué color nuestra tarea, diferentes tipos de tareas. Muchas cosas. Si lo deseas, puedes pasar por todos y todo porque es una buena práctica leer la documentación de ese plug-in. Entonces eso es en FAR LO QUE HACEMOS. En la siguiente sesión, subiremos nuestra primera imagen. Y Q. 18. Implementar la carga de imagen: Hola. Por lo que ahora hemos entendido los conceptos y la teoría del almacenamiento de Firebase. Es hora de crear nuestra propia función. Esa es mi gran imagen y luego subir al servidor. Ya hemos mencionado que las dependencias, es decir, el almacenamiento de Firebase y el picker de imágenes. Ahora simplemente ve a la pantalla Subir imagen. Y aquí, lo primero que tenemos que hacer es crear una instancia. Simplemente nuestra Firebase. El almacenamiento Firebase es igual a la instancia de almacenamiento de residuos. Entonces definitivamente lo que haga, tomará algún tiempo y tenemos que mostrar algún indicador de carga en la interfaz de usuario. Por eso estoy mencionando una variable. Después de eso, vamos a crear nuestra función llamada función, que estará regresando vacío y me dejaré en paz. Imagen. Por lo que aquí puedes ver que una persona puede subir imagen desde una cámara o una galería. Entonces cuando estamos llamando a esta función, tenemos que enviar la fuente de entrada. Es decir, si el usuario ha elegido cámara son la galería. Ahora es el momento de que también utilicemos nuestra imagen. Por lo que voy a obtener una variable llamada picker y luego asignar es picker de imagen. Ahora simplemente tengo que escribir await picker, pick image. Y aquí, la fuerza será un operador ternario que comprobará si la fuente de entrada es cámara. Será cámara fuente de imagen. O de lo contrario emitirá fuente. Pero Kelvin. ¿ De acuerdo? Entonces cuando tenemos nuestra imagen D hablar, podemos ver que devuelve un quinto futuro de tipo de datos de archivo exe. Entonces simplemente lo dibujaré aquí y simplemente escribiremos archivo exe final que está en seguridad sanitaria y lo nombraremos gran imagen. Entonces ahora lo que se imaginaron, los datos del usuario se almacenarán aquí. Ahora lo primero que tengo que comprobar si un usuario tiene suma grande alguna imagen o no. Simplemente comprobaré si la imagen pico es un dos. Ahora, simplemente devolveré nulo y detendré la ejecución. Y si no, si la imagen no es nula, lo primero que haré es obtener un nombre de archivo en este nombre de imagen grande. Segunda cosa que tengo que hacer es crear el archivo porque este formato es un archivo EXE. Entonces me gusta mucho archivo de imagen y luego simplemente gire el widget, que es de ese punto IO. Ver tenemos importante el punto IO. Y aquí tenemos que enviar parte de la cual vendrá. Punto de imagen. Por lo que ahora todos lo hemos convertido con éxito en un archivo. Es hora de que hagamos nuestro bloque de captura y realicemos la función de almacenamiento Firebase. En ese empate. Lo primero que haré es hacer que el indicador de carga sea verdadero. Entonces esperaré punto punto de almacenamiento Firebase para referir a sus amigos cuando estemos archivando. Y archivo de salida. Y archivo de entrada, escribiré archivo de imagen así. Y después de que lo hicieron con éxito, volveré a poner en falso. Y como siempre, me gusta mostrar un snack bar. Andamios OFF, luego muestra el contenido de snack bar, snack bar, y la pestaña guía como sexos subidos. Está bien. Yo sólo voy a hacer en Firebase excepción, catch y E. Y si algo más, entonces aquí, quiero decir otra vez imprimir. Oh, bien, Así que ahora nuestra diversión Chen está lista. Simplemente tenemos que primero cosas mencionaron el indicador de carga aquí en nuestro widget de fila. Si la carga es verdadera, entonces centrar el indicador de progreso circular. Si no, entonces tengo que mostrar esa fila. Volcamos botones. A ver, Vamos a probarlo. Esta pegándose en el amado 10. Pero bien, primero, déjame ir a mi almacén y deprimirlo. Vamos a comprobar si hay alguna imagen o no su edad industrial. Se puede ver que aquí no hay archivos. Simplemente saca tu emulador. Voy a dar click en Galilea, pero antes de eso, obviamente, pero antes de eso, obviamente, tengo que mencionar nuestra función a dub botones. Por lo que voy a presionar, voy a llamar a esta imagen subir con un valor de cámara. Y en este caso, simplemente escribiré galería. ¿ De acuerdo? Ya que este es un amuleto que no estaría usando la cámara por defecto elegiré. Entonces en eso descargas, puedes ver imágenes ya existentes. Escogeré este Elon Musk y ver nuestro sindicato está ahí y luego subido con éxito. Vamos a revisar nuestro almacenamiento y ver nuestras imágenes aquí. Entonces este es el nombre del archivo en la referencia de la que estaba hablando. Entonces aquí, este almacenamiento basado en archivos o nombre de archivo es éste que es directamente ha subido en el directorio raíz. Entonces así es como subimos imagen al almacenamiento. Pero definitivamente. Después hemos subido la imagen. Es necesario que Nosotros también lo recuperemos. Entonces para recuperar las imágenes, lo primero que tenemos que hacer es crear un método para ello. Simplemente ve a nuestra pantalla solo lo haré, me gustaría apuntar mi turno. Sólo en este expediente. Si lo desea, puede usar archivos separados. Simplemente escribiré futuro. Nos dará una lista de expedientes. Entonces lo haré cargaré imágenes y luego lo convertiré en un fregadero. Después de eso, simplemente crearé una variable mapeada de lista que almacenará todos esos datos provenientes del almacenamiento. Ahora, lo primero, como mencioné, que tenemos que escuchar para conseguir todos los expedientes. Por lo que escribiré resultado de lista finita. El resultado es igual a esperar lista de referencia de almacenamiento basado en archivos. Después de eso, simplemente me pondré bien. Una lista de archivos va a los ítems de resultado. Como lo comenté en mis diapositivas, como cuando tenemos nuestros archivos de listado. Y a través de ese resultado, podemos conseguir los artículos. Y las propiedades del elemento representan archivos dentro del bloque. Entonces ahora tenemos el phi y simplemente lo recorreré con Future dot. Para cada uno, para cada elemento serán nuestros archivos. Y nos dará una referencia. Un archivo. Si estamos dando un lazo a través de él. Entonces, ¿por qué hacer un lazo? Simplemente voy a obtener la URL de descarga. Me relaciono finanzas archivo de capacitación URL es igual a esperar archivo punto obtener URL de descarga. Y ya que si es una espera, tengo que convertirla en un fregadero. Y la variable de archivo arriba. Voy a agregar valor en un mapa que es URL, será URL fina y será archivo dot parte completa. Y por último, me gustaría imprimir archivos así como devolver archivos. Es decir, esta lista de mapa. Un mapa contendrá los datos de la imagen. Url se utiliza para mostrar que entonces esta parte se utilizará para eliminarla más adelante. Entonces eso es todo por este video. Hemos hecho mucho. En el siguiente video, mostraremos implementar esta función en la interfaz de usuario. Gracias. 19. Retrieving y eliminación de la imagen: Hola. Por lo que en el último video tenemos con éxito las funciones requeridas para recuperar imágenes. Ese es éste cargando imágenes. Ahora es el momento. Mostramos en el puesto inmediato en ese almacenamiento en nuestra interfaz de usuario. Aquí. Hagámoslo. En nuestro cuerpo. Tenemos columna y dentro de columna tenemos este sorteo. Y debajo de esta fila, me gustaría mostrar las imágenes. Primero de diversión, voy a dar algo de espaciado. Nosotros polvo tamaño Fox, dada una altura de 50. Entonces usaré una región ampliada para que tome sobras pieza. Entonces aquí, cada usuario futuro constructor. En el futuro cuando el futuro de las aves, cargaremos imágenes y ahora escribiremos nuestra función, una instantánea. Está bien. Vamos a comprobar si estado de conexión de instantáneas es igual al estado de conexión. Esperando. Es, no se ha completado. Entonces giraré indicador de progreso de color. Y si no, entonces devolveré una vista de lista. Ahora dentro de ese Biller, yo cuenta DM será snapshot dot data, dot land. Y comprobaré si es nulo y lo haremos 0. Y yo rindo. Tendré un contexto y ese índice. Ahora como los datos vienen en un mapa, lo guardaré aquí. La imagen del mapa es un índice de datos de puntos instantáneas. Y simplemente voy a volver es rho. Rho que los niños. El primero que uso es una región ampliada. Dentro de ella. Usaré una tarjeta. Y esa tarjeta, usaré contenedor. Le daré una altura de 200. Y niño para mostrar nuestra imagen, esta image.net. Y a través de este video de imagen, simplemente escribiría URL. Y después de esa región de cartas, yo, que muestro un botón, es el botón Icono. Y de los cuales podré ser Huygens dot borrar colores y ver si está funcionando o no. Tenemos una imagen en nuestro almacén. Esta diapositiva que muestra algo de Azure. No debería serlo. Está bien. No está mostrando una tasa fue lenta. Pero ver tenemos nuestra imagen. Se puede ver en la consola de depuración. Desde que también estuvimos presentando sus resultados, aquí tenemos nuestra imagen. Entonces así es como recuperamos imagen del almacenamiento. Y muéstralo en nuestra interfaz de usuario. Esto ampliado aquí uso para que tome menos espacio. Y luego aparecen los botones. Y la altura es este 200. Y si no hay datos, entonces el recuento de artículos será 0 y no se mostrará nada. Entonces ahora es el momento de hacer lo último que es la imagen de borrar de sus archivos almacenados. Vamos a crear una función para ello. Será futuro. Espere. A continuación, borra y borra. Cualquier cosa del almacén que necesitemos. Referencia. Simplemente espera. Almacenamiento Firebase, referencia, ref dot delete. Y después de éxito de la eliminación, Vamos a establecer el estado para que este futuro proyecto de ley que se llama de nuevo. Y revisaremos ese almacenamiento y obtendremos los datos. Tenemos la función borrar, listo, es hora, asignamos eso al botón de icono. Hagámoslo un fregadero. Y derecho de ello. Eliminar función y devolvérsela así. Y después de que se borre, mostraré un snack bar. Contenido. Siguiente imagen. Vamos a comprobarlo. Cosas. Lo que haría es intentar seleccionar otra imagen nueva. Yo seleccionaría. Mark Zuckerberg se sube con éxito y ver. Estamos obteniendo nuestra segunda imagen. Ahora si quiero eliminar esta primera imagen, simplemente voy a dar clic en este botón de borrar y ver de inmediato eso con éxito. Entonces esta fue la imagen que borré. Ahora si actualizo la consola Firebase, solo verán una imagen y que es nuestra marca Zuckerberg. Elon Musk les era fea. Pero así es como eliminamos la imagen del polvo demasiado tarde. Se puede consultar el código. Aquí. Es, todo está relacionado con la referencia. Diré que me gustaría mencionar que esta app está destinada a ser lo más simple posible. Soda o cordón es más corto y Tina, solo tiene una pantalla y utiliza un widget con estado para la gestión estatal. Sé que carece de muchas características de producción como la imagen antes de subir. Pero primero en caer, nuestra intención es entender adecuadamente cómo subir y recuperar archivos del almacenamiento. Entonces eso es todo para este video. Espero que hayan aprendido mucho. Gracias. 20. Compresión y imagen en caché: Por lo que hasta ahora hemos entendido cómo subir, recuperar, y eliminar nuestro archivo en el almacenamiento Firestore. Pero ahora es el momento de entender cómo comprimir imagen mientras subes. Imágenes tan grandes y grandes tardan más en subir y hacen insultante una horrible conveniencia del usuario. Usos siempre preferidos tiempos de carga insignificantes y no quieren ver el indicador de carga para ellos para reducir tamaño de imagen también puede deducir las facturas mensuales de esos servicios de almacenamiento y alojamiento de imágenes que está utilizando. función de compresión de imágenes es inevitable si tu aplicación tiene una función en la que el usuario está cargando imágenes. Entonces en términos simples, deberíamos usar la terminación de la imagen. Y lejos que se reunió es un paquete llamado imagen nativa revoloteada. Vamos a comprobarlo. Si voy y escribo imagen nativa. Y luego veamos la primera, que es sí, que es esta imagen tentativa de inundación. Por lo que se puede ver que estos dos se requiere para cambiar el tamaño de la imagen y reducir su calidad por compresión. Entonces vamos a instalar. Entonces, cópielo. Acude a nuestro archivo Pub spec dot YAML, y pegarlo. Y luego guarde el archivo para que nuestro aleteado haga el trabajo de instalar la dependencia. Tomará algún tiempo. No hay tema. Ah, cueva. Entonces ahora como es una nueva dependencia, tenemos que detener nuestra aplicación inundada, la depuración de escritorio. Y luego reiniciaste de nuevo para que nuestra inundada sepa que se ha instalado un nuevo paquete. Sé que este es un proceso muy tedioso. Se lleva mucho tiempo, pero así es como se hace. Entonces hasta ese momento se está ejecutando mi app, me gustaría volver a ir a nuestra imagen de subida y tratar de revisar lo que hemos hecho hasta ahora. Por lo que tenemos nuestra función Subir Imagen donde estamos enviando si se trata de una cámara. Artículo 3. Después de eso, solo estamos usando esto como un borrador que encontraría código para enviar nuestro archivo al almacenamiento. Y después de que se haga, marshaling ESnet. Pero entonces la siguiente función que creamos fue cargar imágenes. Lo primero que hice fue crear una matriz vacía. Después consigue todos los archivos de referencia. Eso es cierto. Este comando de punto de la lista de estilo. Nos da una lista de resultados. Y a través de estos riesgos resultan, obtengo todas las referencias de la imagen cargada y luego recorrerla, mirarla a través de ella, y obtengo esa URL de descarga. Entonces, y después de obtener una vista dominante, y estoy guardando los de esta variable y luego solo lo mostraré en la interfaz de usuario. Ui también es muy simple. Se puede ver que había usado este futuro cuando no hay ninguno. Y si algo, algunos detalles, Vincent, entonces revisaré la lista. Vas a que si la longitud delta no lo es, ahora, si no es ninguno que ni siquiera es una imagen está muerta. Escribiré 0 por mi cuenta. Podemos ver que nuestro compilador está hecho. Por lo que finalmente, nuestra solicitud, vamos a estar hechos. Sé que Android Studio a veces puede llevar mucho tiempo. Sí, ya está hecho. Ahora vamos a crear. Necesario para comprimir una imagen. Será una función futura la cual volverá como archivo. Por lo que cada límite comprimir imagen. Y tenemos que enviar un dato de archivo mientras se llama definición, porque al menos a través de este archivo sabremos qué imagen comprimir. Ahora tengo que escribir función de imagen nativa. Por eso. Simplemente vaya al archivo Spec dot YAML y cópielo. Pega en la parte superior. Si todavía está mostrando adder. Lo que podemos hacer es ir a nuestro archivo de Pub spec YAML y luego simplemente guardar así para que lo haga, volvió a intentar obtener los paquetes requeridos. Y ahora C ya se ha ido. Entonces en ese archivo comprimido, Vamos a escribir esperar, necesitamos imagen div.com. Y aquí tengo que enviar la parte del archivo. Y entonces esa calidad, ese es el porcentaje que quiero reducir esta deuda es del 50 por ciento que me gustaría. Y si tienes imagen comprimida, puedes ver que nos da un archivo futuro. Por lo que simplemente escribiré phi. Archivo comprimido es igual a esperar así. Y después de eso, imprimiré el tamaño del archivo original. Eso es tamaño original. Este archivo dot nan fregadero. Y voy a Sabrina venir tamaño de pecho así. Comprimir file.com, encontrar tierra. Y finalmente devolver nuestro archivo comprimido. Por lo que este será un futuro tipo de datos de archivo. Está bien, Este trabajo está hecho. Ahora tenemos que hacer algunos cambios en nuestra imagen de subida. Aquí. Después de este expediente. Después de archivo, comprimido. Archivo comprimido es igual a esperar. Y llame a diferentes funciones desde aquí. Quiero decir simplemente una imagen comprimida y enviar ese archivo. Y después de Dejar hacer aquí nuestra referencia Firebase, pondré este archivo, no el otro archivo. Ahora vamos a guardarlo. Ahora vamos a probar si está funcionando o no. Si hago clic en galería y supongo que elijo este archivo que suele ser de cuatro KB. Ahora veamos si se está comprimiendo o no. Aquí puedes ver el archivo original tamaños 34 y comprimir fuimos nosotros solo 10. Por lo que hay una gran diferencia. Si usamos esa compresión. Si una actualización nuestra consola de depuración, podemos comprobar si lo es, si ha funcionado o no. Ver fue 30, 40 KP, pero ahora son sólo 10. Y se ve bonito. Pero así es como se hace la compresión. Ahora lo siguiente, el siguiente tema que estaremos discutiendo es ¿qué es la imagen de la red de efectivo que es el almacenamiento en caché? Por lo que todo el mundo sabe que las imágenes son parte esencial de las aplicaciones modernas. Dado que el ancho de banda es costoso, mercancía, caché de imágenes puede impedir la descarga de imagen desde el servidor cada vez que el usuario la vea en pantalla. caché sin así mejorar la experiencia del usuario cuando nuestro flanco, pues estará utilizando la copia de caché local sin intentar volver a descargar de Internet. No obstante, en este tutorial, usaremos el paquete de imágenes de red en caché para cobrar y disciplinar las imágenes de entrada. El asunto es que en el primer lanzamiento, la app muestra un tamaño de soporte de lugar lo más cerca posible la imagen final para adaptarse y transitar cuando se cargan imágenes reales. Y después, de inmediato se está atrayendo a ese dispositivo localmente. Entonces la próxima vez cuando se necesite la imagen, ese paquete la recuperará de lo local en lugar de descargarse de internet. Entonces este es el paquete R. Esta es esa dependencia que voy a estar usando. Vamos a instalarlo. Simplemente tienes que escribir imagen de caché. Entonces supongo que debería cobrar imagen de red, todo el equipo. Y el primero es lo que necesitamos. Basta con copiarlo, pegarlo en el espectro en Yemen. Ahora es el momento de implementar también el almacenamiento en caché de imágenes. Ya que tenemos que mostrar un tenedor de lugar mientras estamos buscando imágenes al usar redes CAS, que plug-in. Ese portador del lugar puede ser de cualquier widget como texto, circular, indicador de progreso, etcétera. Pero prefiero la imagen AMI como positor. Por lo que sencillamente, iré al navegador y luego las imágenes y escribiré imagen marcador de posición. Y después de eso, me limitaré a descargar una de las imágenes. Supongamos que me gusta este. Este lo diré porque no quiero un fondo transparente. Entonces éste, simplemente lo guardaré y nombraré esto, encontraré un tenedor de lugar. ¿De acuerdo? Se ha descargado ahora ya que es un ácido. Por lo que tenemos que mencionarlo en nuestro YAML. Antes de eso. Sólo tienes que ir a ese directorio. Y en el directorio raíz, simplemente crea una carpeta llamada imágenes. Estaremos copiando y pegando la imagen descargada. Éste sólo irá a las imágenes y descargará pegado. Y para asegurarse de que esté siendo. Actualizado en nuestra aplicación inundada, tienes que ir al archivo Pub spec dot YAML. A continuación tenemos estos activos el cual se está comentando. Solo tenemos que descomentarlo y asegurarnos de que solo toca Retroceso dos veces porque este archivo está listo, sensible a mayúsculas y minúsculas. Y simplemente escribiré que nosotros en la carpeta raíz tenemos estas imágenes. Eso es todo. Ahora este inicio de sesión de imagen en caché acepta viajes amateurs. Una es la URL de la imagen que esta URL de la imagen la cual tiene que ser almacenada en caché. En segundo lugar es el titular del lugar. Este es este widget y el engancha el espacio antes de que se cargue la imagen. Y ese objetivo es cualquier editor widget adder que hicimos se mostrará si había alguna edición descargando esa imagen. Entonces vamos e implementados. Lo primero que voy a importar las redes de efectivo, que en la parte superior. A ver. No deben mostrar a ningún editor. Está bien. Ahora, abajo en el futuro aprenderemos dentro de este niño. En lugar de escribir imagen de networking amazed.net. La URL de la imagen será esta. Pero las otras propiedades, como mencioné, hay un tenedor de lugar, que es una función que tiene contexto y la URL. Y me relaciono imagen, imágenes de conjunto de puntos. Lugar titular punto JPEG. Vamos a comprobar si son las imágenes del archivo las que el positor punto JPEG. Y en el widget del editor, simplemente mostraré. Simplemente voy a mostrar. Yo puedo, puedo empezar adder. Eso es todo. Nada mucho por aquí. Entonces así es como implementamos la imagen de red de caché. Ahora me gustaría compartir, mostrarles la salida qué y por qué estamos usando esto. Entonces ahora ese momento en que se cargará, solo espera unos segundos y verás que se está cargando. Y obviamente estamos recibiendo este error sólo por esa razón que no hemos iniciado nuestra aplicación. Hagámoslo. Simplemente haga clic y luego vuelva a empezar a depurar. Por lo que tenemos nuestra aplicación en ejecución. Ahora veamos si la imagen de red de gash está funcionando o no. Vamos a comprobarlo y a ver, esto es de lo que estaba hablando. Y, y la transición fue tan suave. Entonces esto es solo un tenedor de lugar o puedes decir algún tipo de efecto que el usuario obtenga retroalimentación y esperará a que se tropezen los datos. Por lo que este es un uso de imagen de red de efectivo. Y ahora por segunda vez, cuando actualicemos esos datos no serán recuperados de internet. Se utilizará desde la caché, que ya está ahí dentro. Y por eso es tan rápido. En el primer átomo. Se ve un segundo posteriori ahora sólo tomó 1 segundo. Entonces espero que hayas aprendido mucho en esta sesión porque la compresión y caché son dos temas importantes mientras usas cualquier tipo de carga de archivos. Entonces eso es todo para este video. Gracias. 21. Video 83 Sube varias imágenes: Hola. Entonces hasta ahora solo estábamos subiendo una sola imagen. Pero hoy vamos a aprender a subir múltiples imágenes también. Porque podría haber escenarios que el usuario quiera agregar múltiples imágenes y no perder el tiempo. Simplemente seleccionando una imagen y luego subir y luego esperar. Este es un proceso muy largo y largo. Entonces v siempre debe ser para múltiples imágenes en tales escenarios. Entonces, antes que nada, acabaré de eliminar estas imágenes anteriores. Entonces te mostraré de nuevo cómo seleccionarlos juntos y luego subirlo. Ahora, vamos a crear aquí un tercer botón, que dirá que es múltiples imágenes, para que tengamos tres opciones. Sólo por nuestra referencia, estamos haciendo así. Vamos a nuestra pantalla de imagen de subida. Entonces tenemos aquí la columna. Entonces lo primero es la fila. Y debajo de la fila, tendré una caja de tamaño. Se debe dimensionar caja y luego una altura de 30. Entonces tienen icono de botón elevado aquí que puedo, podemos elegir. Puedo puntear imagen y etiqueta sería múltiples imágenes como esta. ¿De acuerdo? Después de eso acabaré hacer esta altura un poco menos. Y luego guárdalo. Vamos a comprobarlo. Mira, tenemos este botón de múltiples imágenes también. Ahora, hagamos eso cambia o vamos a crear una nueva función que tendrá múltiples imágenes. Puntaje debajo de esta selecta imagen que es subir imagen, solo voy a crear una nueva función. Devolverá un vacío y lo nombrará. Subir múltiples imágenes. Digamos. Ahora de nuevo, crea un selector de imagen selector. Entonces ahora antes teníamos este archivo exe. Pero en este momento tendremos una lista de x phi. Porque vamos a estar obteniendo múltiples imágenes que vendrán en una lista. Al igual que las imágenes grandes es igual a esperar. Recogedor. Escoge la imagen múltiple. Aquí puedes ver nuestro picker de imágenes nos da múltiples opciones. Podemos escoger imagen, podemos escoger múltiples imágenes así como podemos escoger video también. Pero en este momento, nuestro enfoque es solo escoger múltiples imágenes. Después de eso, solo comprobaremos si no es nulo. Eso significa que el usuario no ha regresado. Si es nulo, simplemente devolveré nulo. De no ser así, estableceré el estado a la carga es igual a true. Entonces me bucle a través de todo lo que recogió imágenes. Entonces acabaré de escribir Future dot para cada uno. Entonces el futuro será así. Es decir, tenemos que recorrer esto. Y de esto vamos a conseguir X-Files. Y simplemente lo nombraré imagen. Entonces hagámoslo una, una función sinc. Aquí. Aquí tenemos que hacer, tenemos que subir ese archivo de imagen. Entonces de igual manera, como lo hicimos en la imagen Subir como el nombre del archivo y el archivo de imagen. Haré lo mismo aquí. Simplemente escribiré. El nombre de la cadena es igual al nombre del punto de la imagen. Y entonces cada nivel de phi image phi es igual a imagen de archivo. Pero en este momento no estoy comprimiendo la imagen porque ya sabemos cómo hacerlo. En este momento mi enfoque es sólo para asegurarnos de que nuestro y la barbilla esté funcionando. Vamos a tener un bloqueo try catch. Cuando dicen imprimir. Y en ese intento, simplemente haré nuestra referencia de almacenamiento Firebase, nombre, archivo de puntos, y ahora nuestro archivo de imagen, así. Y después de todo esto por cada bucle se hace. Después de eso solo, volveré a establecer ese estado, cargando a false. Y luego mostraré una bufanda que es una merienda parte de la imagen. Esta imagen está subido. El sexo es sólo así. ¿ De acuerdo? Nuestra función está lista. Ahora. Vamos y en la prensa de nuestro botón, vamos a ejecutarlo. Es decir, nuestro trasero está aquí. Simplemente lo ejecutaré así. Vamos a ahorrar y probar. Si está funcionando. Impresionante, leí ¿hay ahí? Voy a hacer clic en él. Está ahí. Seleccionaré estas dos imágenes y luego haga clic en Abrir. Carga de plata. Está ahí. Todas las imágenes cargadas con éxito? Y tenemos nuestra imagen. Definitivamente, también está trabajando en la Firebase. Estos se cargan. Podemos ver desde aquí sólo es decir, se está recuperando con éxito. Entonces así es como implementas múltiples imágenes en el almacenamiento Firebase. Eso es todo. Hemos aprendido todo con respecto a la carga de imágenes y cómo almacenar en caché los datos, cómo comprimirlos, muchas cosas. En el siguiente video, solo implementaremos esta misma característica en nuestra app Node también. Gracias. 22. Video 84 Sube una imagen en la aplicación de notas: Bienvenido de nuevo. Ahora hemos aprendido a usar el almacenamiento Firebase. Es hora de que implementemos esa misma característica en nuestra aplicación de nodo también. Esta aplicación con construcción muy extraña hasta ahora en autenticación así como en una sección de Firestore. Primero, hagamos que la pantalla de inicio sea la pantalla inicial en main.out. Entonces deuda, podemos ver nuestra app. Ahora vamos a crear una función para seleccionar Imagen y luego previsualizarla antes de subir el archivo. Con base en las secciones anteriores, nos enteramos de que solo estábamos subiendo la imagen haciendo clic en un botón. Pero ahora aprenderemos a seleccionar una imagen. Entonces el usuario podrá ver la vista previa lo que ha seleccionado. Y si hacemos clic en el botón enviar, entonces sólo esa imagen será subida al almacenamiento. Vaya a la pantalla Agregar nodo. Aquí. Vamos a crear algunas variables. En primer lugar se presentará. Eso es archivo de imagen. En un principio, será nulo. Y segundo será cadena, que será nombre de archivo. Y al principio tampoco será ninguno. Ya sabemos que estos dos son requeridos cuando estamos subiendo imagen. Ahora vamos a crear la función. Función void. Nombralo. Subir imagen. Será una sincronización. Entonces primero tenemos que crear una instancia de plugin de picker de imágenes. Entonces tenemos nuestra imagen grande x phi es igual a esperar. Recogedor. Escoger imagen. Se emitirá fuente fuente dot cadre. Como cuando estemos recogiendo imágenes obviamente escogerá a través de la galería. Entonces tendremos una declaración if donde comprobaremos si es nula o no. Si no se acaba de devolver de aquí se sabe ejecutar ese otro código. Si no, acabaremos de decir que archivo de estado nombre delarchivo de estadopor variable de nombre es igual al nombre del punto de imagen, y la imagen phi es igual a Archivo e imagen.Toda parte. Entonces aquí asignaremos esos valor a esta variable. Y podría estar pensando por qué escribí esta variable aquí y no dentro de la función. Yo, porque quiero usar esta variable en toda la pantalla. Es decir, quiero crear un botón Subir imagen. Tomamos operador ternario para que muestren una imagen en lugar del botón cuando no es nulo. Y si es nulo, es decir, si el usuario no ha seleccionado ninguna imagen. En ese escenario, muestre el botón Subir, no la imagen. Vayamos y veamos de qué estoy hablando. Aquí. En ese niño, tenemos una columna en ese niño en la parte superior. Vamos a tener un contenedor. La altura del contenedor debe ser de 150. Entonces en ese tímido, tendré dos cosas. Lo primero es que si el archivo de imagen es igual a nulo, entonces voy a mostrar un centro. Y dentro de la celda habrá un ícono. Será, puedo empezar, imagen. El tamaño será de 100. Y si no lo es, sin embargo, hay algún valor. Yo sólo, entonces voy a mostrar una imagen que es imagen.All. Y en este momento voy a mostrar archivo porque está almacenado en ese archivo. Aquí acabo de decir archivo de imagen como este. Y está mostrando que esto puede ser nulo. Entonces voy a ir y teclear este cheque nulo. Es decir, las costas asegura que esto no sea nulo. Y debajo del contenedor, vamos a tener una caja de tamaño. Caja de tamaño de altura. Ahora vamos a probarlo si está funcionando o no. Para ver. Ya que es nulo, nuestro icono mostrando y se ve muy bonito. Ahora si hago clic en él, lo siento si por hacer click en él, tengo que hacer envolver este contenedor con un widget llamado tintero. Y aquí en la función tabulador, escribiré subir imagen. Este es un paso muy importante, obviamente. De nuevo, vamos a ir a revisar cuando haga clic en él. Ahora mira, esto está ahí. Ahora, si hago clic en este ícono, mira que se está previsualizando. Por lo que en este momento no se está subiendo a Firestore, es sólo una vista previa. Ahora, esta porción está hecha. Ahora, hagamos los cambios para que podamos agregar cuando se reproduzca Añadir nota, luego se cargue la primera imagen, y luego esos datos se cuentan en Firestore. Entonces aquí en el on-premise tenemos esto. caso contrario, en la primera condición solo agregaré archivo de imagen. Si es nulo, entonces solo escribe alpha. Es adecuado. Pero porque quiero que se llene la imagen. Ahora en el otro. Vamos a tratar de hacerlo. Lo primero, vamos a crear nuestra instancia de almacenamiento Firebase que en la referencia. Y la referencia será nombre de archivo. Entonces pon archivo. Y tenemos nuestro archivo de imagen. Aquí. Nuevamente, tenemos que hacer null porque mostrará un error que el archivo puede ser nulo. Pero acabaremos de escribir este exclamación para que nos aseguremos de que el expediente no sea suficiente. Y obviamente hemos hecho el cheque nulo aquí también. Entonces después de ejecutar este archivo, lo que quiero es solo agregaré ese punto. Entonces. Aquí voy a recuperar el resultado. Dentro de ese resultado, acabaré de devolver resultado dot, ref, dot descargar URL, porque necesitamos esta URL para que sea almacenada en nuestra base de datos Firestore con toda esa información. Cuando lo estemos devolviendo, lo cogeré aquí. Simplemente escribiré imagen. Ya es una cuerda. La URL de la imagen es de acuerdo a esto. Y después de eso, lo que quiero es cuando estamos insertando un nodo, queremos que esta URL de imagen sea enviada también. Por lo que aquí simplemente, en primer lugar imprimiré la URL de la imagen y la guardaré porque voy a ir y comprobar si está funcionando o no. Hasta aquí. Voy a ir aquí, seleccionaré, seleccionaré Estas imágenes aquí. Simplemente los escribiré o revolotean. Lo eliminaré más adelante. Y descripción como esta, y sólo añadir notas. Y ver en la impresión podemos ver que algo está almacenado en el almacenamiento de Firebase. Eso significa que está funcionando bien. Entonces ahora lo que quiero es cuando estamos insertando un nodo, quiero que este valor sea enviado también. Es la URL de la imagen como esta. Y obviamente en nuestro nodo de inserción, no se estaba mencionando en ese parámetro. Así que sólo lo mencionaré aquí, como imagen de cadena. Y entonces estaré agregando un nuevo valor de imagen, imagen como esta. ¿ De acuerdo? Ahora ya que estamos cambiando los datos de nuestros nodos, pero definitivamente tenemos que ir a nuestra clase modelo y cambiarla aquí también. Así que aquí también acaba de escribir la imagen de cadena. Entonces aquí requerimos esta imagen de punto. Y luego en el modelo aquí, derecha, instantánea Aquí, imagen. Porque esto es algo muy importante que hacer. Ahora, vamos a mostrar la imagen del nodo, que es nodo con todas las imágenes aquí también. Eso primero, eliminaré todos los datos que ya están ahí porque mostrará un agregado. De lo contrario. Vamos a eliminar todo en el almacenamiento basado en incendios. Sí. Suprimirlos ambos. Y también en el almacenamiento también. Me gustaría borrar todo y sólo me gustaría empezar con todo lo nuevo. Vámonos y lo mostraré. Pero antes de eso, hagamos cambios en nuestro estilo de lista en la pantalla de inicio. Cuando vamos, tenemos este estilo de lista aquí. En el liderato. Sólo digamos imagen de red de invitados. En la URL de la imagen, acaba de escribir la imagen de punto nodo, así. Y eso agregó rígido. Es decir, tenemos nuestra imagen de la red de efectivo. Aquí. Tengo la URL de la imagen como esta. Entonces el placeholder será contexto. Estás en. Y simplemente tire del conjunto de puntos de imagen y las imágenes slash placeholder dot JPG. Y en ese widget agregado, de nuevo, simplemente escribiré contexto en el que se encuentra. Y luego escribiré aquí un ícono en su lugar. Y aquí se sumará otra pandemia. ¿ De acuerdo? Y después de la flecha, igual que el ancho de 70 a esta imagen y el ajuste de la cubierta de los pies de caja. Vale, tenemos todo ese código DD. Ahora, prueba nuestra aplicación. Vamos a anotar. Inicialmente no tenemos ninguna nota. Vamos e insertemos nuestro primero. Y acabamos de escribir de Steve Jobs biografíade Steve Jobssobre su impresionante historia de éxito. Veamos, aquí. También tenemos la imagen. Esto es de lo que estaba hablando. Si vamos y añadimos otro que sea Firebase, y acabaré de escribir, aprender, Firebase, masterizado servicios de backend también. Y luego guárdalo. Y ver aquí las imágenes de riesgo de incendio también. Y por eso mencioné ese ancho porque quiero que todo esté alineado correctamente. Eso es todo por este módulo también. Gracias por unirte. Hemos aprendido mucho sobre Firebase y vamos a productos. Gracias.