Crea el Instagram original con React Native y Firebase

1. Introducción: Hola y gracias por inscribirse en este flamante cursos rústicos. Curso sobre Reaccionar nativo con firebase. En este curso, vamos a estar construyendo una app que sea muy similar al Instagram original, que los usuarios puedan subir fotos en. En realidad hacer comentarios sobre estas fotos también, junto con mirar cómo realmente se puede hacer iniciar sesión y registrarse usando base de fuego con Red Native. lo que este curso te alejaría de tener un conocimiento básico fuera. Derecho nativo todo el camino hasta la construcción de una aplicación será muy similar al instable original . Si tienes alguna pregunta a lo largo del curso, por favor echa un vistazo a la Q y A Section Western. ¿ Qué. Ya he hecho esta pregunta o siéntete libre de enviarme un mensaje, y en realidad buscaré responder en cuanto pueda para ayudarte en esto. Gracias de nuevo por inscribirse en este curso. Andi. Empecemos con el primer módulo 2. Configura el proyecto de Firebase: bienvenido a este nuevo módulo. Entonces en este módulo, vamos a estar primero configurando Firebase Project on. También vamos a estar creando nuestro proyecto de reaccionar nativo en la línea de comandos que usará esta base de fuego absolutamente configurada en los detalles reales de A. P I que necesitamos. Entonces primero, solo quieres ir a firebase dot google dot com y encontrarás la página de aterrizaje fuera del servicio de base de fuego. Entonces solo tiene detalles, pero todas las diferentes características que la base de fuego tiene para ofrecer. Pero no necesitamos saber nada de esto por el momento. Es un pergamino a la parte superior y busca el en la esquina derecha. Si ya has iniciado sesión con tu cuenta de Google , dirá, Ve a la consola. Y si no, simplemente te daría una opción para iniciar sesión. Por lo que solo tienes que hacer clic en el botón de la consola en la esquina superior derecha en tus detalles de Google o configurar una cuenta de Google si aún no tienes una y luego una vez que hayas iniciado sesión, solo tienes que hacer clic en Ir a la consola y abrirás tu página de proyectos. Entonces si no tienes ningún proyecto Eso está bien. Simplemente quieres dar click en agregar proyecto justo aquí, que debería ser el primer botón de la página. Por lo que una vez que pinches hasta aquí, simplemente te pediría el nombre de tu proyecto. Entonces aquí, sólo vamos a llamar a esto mi primer proyecto. Y se agregaría en un único yo d para ti ahí. Entonces una vez que estés listo, solo tienes que aceptar los términos y condiciones fuera de la base de fuego. Una vez que hayas hecho clic en eso te permitirá crear tu proyecto. También puedes cambiar la ubicación fuera de tu servidor. Pero realmente no hace mucha diferencia, sobre todo para tu proyecto de prueba, sobre todo para tu proyecto de prueba va a ser Así que por ahora, eso es todo lo que necesitas configurar y luego solo tienes que hacer clic en Crear proyecto. Eso es lo que ha tomado momento, Teoh carga y configura todo. Yo lo sé. Después redirigirnos a una página de proyecto una vez que hacemos click. Continuar. De acuerdo, así que este es el tablero fuera de la base de fuego. Entonces, como ven en este momento, es decir en qué plan estamos ahora. Este plan de chispa es plan gratuito. Puedes encontrar más detalles sobre lo que cada plan realmente te trae aquí abajo haciendo clic actualizar, pero de nuevo, el momento no necesitas preocuparte por ninguno. Cualquiera de estos detalles barrió el momento. Queremos realmente encontrar ajustes para todas las diferentes teclas A P I para cada una de las configuraciones. Entonces para iniciar sesión en una base de datos, agregar nuevos usuarios y cosas como esta. Entonces como puedes ver, cuando hagas click en esta configuración para subir aquí, nos dará una configuración de proyecto. Si hacemos click en esto, entonces quiere desplazarse hacia abajo hasta donde dice tus siestas en cocinero en esta cosa. Aquí dice, agrega cinco formas a tu aplicación Web. Entonces a pesar de que en realidad nos van a crear una aplicación para IOS o disfrutarlo justo en este momento porque usamos React native se basa en JavaScript. Entonces si hacemos clic en agregar fuego basado en tu aplicación Web, abres este fragmento de código justo aquí, que tiene todas las diferentes claves y dominios que iban a estar usando. Entonces si solo copiamos esto por ahora, esto es lo que vamos a estar necesitando para los próximos pasos en los próximos videos. Entonces esta copia esto ahora y estarás listo para continuar 3. Aplicación nativa de la: Entonces ahora que tenemos firebase AP, I ajustes que necesitamos continuar en este video, vamos a crear realmente el proyecto en la línea de comandos que nos permitirá realmente empezar a probar las diferentes formas en que podemos iniciar sesión con base de fuego. Entonces primero, que navegará a una carpeta donde vamos a estar creando este proyecto Así puedes hacerlo usando el comando CD en la terminal. Entonces estoy usando la hiper terminal aquí. Puedes usar cualquier cosa terminal lo que quieras. Entonces aquí he navegado en la carpeta que guardo todos mis proyectos. Entonces sobre lo que voy a hacer ahora es crear nuevo directorio, que usan em Que D I r en el nombre del directorio. Entonces, para esto, solo voy a escribir en base de fuego reaccionar. Uh, así que al igual que en esto, como pueden ver, se hizo un proyecto y yo justo aquí y luego va a usar CD, que se movió a esta carpeta, escribe el nombre de la foto, y luego chequearlo dentro de este directorio. Es así como acabamos de crear una nueva carpeta. Andi se mudó a ella. El siguiente que tenemos que hacer es realmente usar la utilidad de línea reaccionar Native Command para crear realmente una aplicación aquí. Esto lo puedes encontrar en los muelles nativos reaccionan oficiales. Entonces yo para que veas puedes empezar. Por lo que en esta página encontrarás todos los detalles que necesitas para empezar a usar esta utilidad de línea de commode . Entonces si no lo tienes instalado ya, solo necesita ejecutar este comando primero. Pero como ya lo tengo instalado, puedo seguir adelante en camino recto. Utilice este comando. Entonces es el comando en sí es crear reaccionar app nativa y luego tecleas el nombre de tu proyecto. Entonces si volvemos a la terminal, usaremos y pegaré en este comando solo voy a cambiar esto para reaccionar cinco base y luego presionar enter. Esto básicamente configurará todas las dependencias. Tenemos que iniciar un nuevo proyecto. De acuerdo, así que una vez que esto se complete, estás viendo salida similar a ésta. Entonces en tu pantalla. Si no tienes yon instalado , dirá npm. Por lo que NPM inicio MPM ejecutar en cosas como esta, pero estoy más allá es básicamente lo mismo que MPM es un poco más rápido para mayo , pero podría ser diferente para ti. Entonces todo lo que necesitas hacer ahora es trasladarte al directorio del proyecto real. Como se puede ver aquí, está sugiriendo que tecleemos thes comandos. primer lugar, en realidad puedes copiar estos y pegarlos, y empieza a abrir nuestro proyecto de inmediato. ¿ Qué? Es posible que notes que hubo algunos de estos comandos, dependiendo de cómo instalaste um, mpm o nodo para empezar que los permisos podrían no ser correctos. Por lo que tenemos que hacer para cambiar esto. Se vuelve a ejecutar este comando con pseudo al frente. Esto hace que lo ejecutes como todos los usuarios. Por lo que eso solo le preguntaría al pasado dónde usar para iniciar sesión en su computadora cuando escriba eso y luego se ejecute normalmente. Y eso debería contar ahora con las comisiones correctas para iniciar este proyecto. Por lo que una vez que el proyecto haya comenzado, verás que aparece un código QR en la pantalla en todos los detalles. Necesitas realmente ejecutar esta aplicación en el simulador, así que si quisiera, podría presionar yo y se abrirá esto en un simulador IRA de inmediato. Pero empezaremos a buscar estos en el siguiente para iniciar el siguiente módulo. Entonces por ahora, todo lo que necesitas es dedo del pie Ten la configuración de los ajustes del FBI que firebase te dio cuando creaste tu proyecto. Y este nuevo proyecto que hemos creado en la línea de comandos han reaccionado un proyecto nativo de trapo que podemos usar para dejar de construir sobre probar firebase con red native. 4. Conéctate el proyecto de la base con firebase para reaccionar en la aplicación: Ahora que tenemos un proyecto ap I detalla y hemos creado reaccionar arriba en la línea de comandos, listo para realmente poner los dos de estos juntos. Entonces antes de que realmente utilicemos estos detalles del FBI, necesitamos realmente instalar las dependencias de la base de incendios para usar en reaccionar. Entonces, como pueden ver, quiero decir, Expo atraca aquí, y tienen una guía sobre cómo usar realmente violadores . Entonces lo único que realmente necesitamos de esta página es este comando justo aquí. Entonces lo que esto realmente hace es instalar las dependencias de la base de incendios en nuestro proyecto para que realmente podamos usarlas en nuestro proyecto. Entonces si vamos a la línea de comando ahora, Así que aquí estoy dentro del directorio fuera de este proyecto. Entonces si pegamos este comando, está bien, Entonces una vez que este comando se haya corrido bien en todas las dependencias necesarias, necesitamos usar la base de fuego dentro de nuestro proyecto. Entonces, como puedes ver, está instalado todos estos diferentes paquetes para usar un proyecto de arte. Entonces ahora si saltamos al co editor, estoy usando átomo aquí. Onda acaba de abrir el proyecto sobre esto es el archivo raíz fuera de nuestro proyecto aquí app dot Js Lo que en realidad podemos empezar a hacer es usar la base de fuego. Sólo se instalaron dependencias para conectar aplicación a un proyecto firebase. Ahora, para hacer esto, necesitamos primero, uh, crear una nueva carpeta aquí. Entonces vamos a llamar a esta carpeta Kontic, y luego dentro de esta esta foto, vamos a crear nuevo archivo. Innecesario se llama punto de conflicto Js. Entonces lo que vamos a estar haciendo en este archivo, realidad es conectar app a la firebase. Ap I detalles. Nos han proporcionado desde la base de incendios. Entonces lo que vamos a hacer es decir importar cinco as desde cinco base, Entonces solo necesitamos proporcionar los detalles del FBI. Entonces pegarlos aquí en un momento, entonces en realidad pasaría el come pick muy público. En cierto sentido, a esta función justo aquí. Saltemos de nuevo a la base de fuego, salpicadero y busquemos esta configuración. Entonces aquí están. Entonces si copiamos esto, volveremos a saltar al editor. Entonces si pasamos el ritmo, él solo está aquí, y en realidad vamos a cambiar esto a una constante. Entonces ahora tenemos todos los detalles que necesitamos para realmente configurar y conectar, uh, uh, reaccionar proyecto nativo a un proyecto firebase. Solo hay una cosa más que necesitamos hacer eso antes de que esto funcione. Y esto es para conectar en realidad cada parte fuera de cada una de las cinco características base a una variable diferente para que lo utilicemos en todo. Entonces vamos a estar haciendo es sólo porque la edad de las cosas que necesitamos, como la manzana de base de datos para la ización en almacenamiento. Entonces lo que esto realmente nos permite hacer problemas cada una de estas diferentes variables ahora, que accederán a esta gama de características desde firebase en una nueva para archivos que necesitamos. Por lo que en realidad podríamos usar esto. Así que digamos, por ejemplo, una vez que salvó esto Ahora, si estamos en nuestro propio archivo aquí abajo en realidad podría usar a actriz como ejemplo. Entonces aquí, podríamos simplemente agregar, Así que si agregamos una línea como esta eléctrica, nos permiten acceder al objeto firebase general las funciones off en la base de datos justo lo largo de esta página Ahora, porque hemos lo importó del archivo de conflicto, acabamos de configurar. Entonces esta es una gran manera de empezar a usar las, uh, las cinco características base dentro de ti arriba 5. Introducción a la autora de la base del fuego: Entonces ahora vamos a probar rápidamente que la conexión a la base de fuego con un archivo de conflicto está funcionando. Entonces solo para seguirlo desde el último video, solo asegúrate de haber deletreado inicializarte correctamente al igual que esto, Andi. Ahora en realidad podemos ejecutar la aplicación a prueba en el simulador. Una cosa que necesitamos revisar, sin embargo, es aquí arriba. He presentado Ap slash en realidad, esto no debería ser. Debería ser de inmediato. Conflicto de cuatro slash. Entonces si revisamos el simulador, hay pro va a haber un problema con esto. Sí, Como puedes ver, no puede encontrar el archivo porque buscamos primero dentro de la carpeta APP, que no existe. Entonces si quitamos este Andi, probamos esto otra vez, deberíamos ver todavía. Entonces aquí está la aplicación predeterminada. Listo y funcionando. Entonces en este video, vamos a estar rápidamente revisando los diferentes tipos de Loggins que puedes usar para autorización con cinco base. Entonces, de nuevo, este es el tablero de Firebase. Y si hace clic en la pestaña de autenticación de aquí en adelante, encontraremos a todos los usuarios apagados. Tu aplicación se mostraría justo aquí, pero lo que debes hacer primero es configurar un método de inicio de sesión. Por lo que estos son los diferentes tipos de inicio de sesión que puedes usar con base de fuego. Ahora, con Expo, sólo unos pocos de estos se pueden usar en realidad, pero más se han agregado todo el tiempo. Esto es sólo por la forma de reaccionar las obras nativas. Pero vamos a cubrir correo electrónico y contraseña y Facebook inicia sesión primero y podemos cubrir más de los demás más adelante en el curso. Pero primero vamos a cubrir el correo electrónico y las contraseñas y luego Facebook. Por lo que en el siguiente video, vamos a estar configurando los proveedores de firma de correo electrónico y contraseña para que podamos empezar a usar este método de autenticación sin prueba. 6. Uso de correo electrónico y paso para registrar el usuario: De acuerdo, entonces ahora estamos listos para configurar realmente el email y contraseña y proveedor con cinco base. Entonces primero solo hacemos clic en habilitar justo aquí y guardamos porque no queremos haber pasado la firma sin palabras en este momento. Esta es una opción que puedes buscar. Hay documentación al respecto, pero por ahora, solo queremos hacer clic en habilitado justo aquí y luego guardar. No, esto se acabó. En realidad podemos volver derecho, Teoh un inicio codificado y en realidad empezar a configurar esto. Y como puedes ver aquí porque hemos configurado nuestro primer método , te mostrará de inmediato. Pero ahora ya estamos por empezar, en realidad configurar a nuestro primer usuario para crear nuevos usuarios. Vamos a crear una nueva función dentro de esta app llamada Usuario Registrado. Por lo que esto sólo tomará un correo electrónico y un pasaporte sobre lo que realmente haremos para comprobar que esto es un trabajo es mirar estos hacia fuera a la consola. Y obviamente queremos hacer esto en una app de vida porque quieres probar y guardar contraseñas y correo electrónico. Un seguro es posible, pero para fines de prueba, esto es Esto está bien y entonces solo vamos a llamar a la o la variable que se importa en la parte superior aquí. Y entonces sólo queremos la llamada del dedo del pie. Esta función aquí, que tiene crear usuario con correo electrónico y contraseña en todo lo que realmente haces entonces es pasar en el correo electrónico. Soy contraseña fuera de este usuario. Por lo que esto enviará este estricto de 5/8 y registrará a este nuevo usuario. Entonces necesitamos añadir una devolución de llamada. Por lo que sabemos cuándo se ha procesado esto a esto. Escribimos entonces y luego esperamos a que esté listo, ya que si íbamos a establecer los objetos de usuario que se crea cuando se llama a esta función . Y luego estábamos Solo mira esto a la consola también, luego simplemente llamó al correo electrónico, mira,el correo mira, electrónico y la contraseña otra vez. Y luego este nuevo objeto de usuario. Puedes cambiar esto por lo que quieras, por lo que solo podría ser objeto de usuario. Es decir, para que quede un poco más claro que eso es todo lo que necesitas ahí. Y entonces necesitamos realmente agregar un cheque en caso de que hubiera un error o si algo salió mal. Entonces haz esto. Tuviste otra vez una hija, mismo que hicimos para entonces. Pero entonces en lugar de poner, entonces dices atrapar. Y luego establecemos el nombre de la variable de esto. Entonces, solo llamemos a esta era. Y entonces acabamos de enviar establecer una devolución justo aquí. Entonces, ¿qué se vería? Cualquier época que se haya hecho solo necesito poner citas alrededor. Este es el texto dice que solo mostramos que hay un error al iniciar sesión y luego solo reproduciremos el mensaje de error. Por lo que esto es todo lo que necesitas para registrar realmente a un usuario. Entonces lo que haremos es en una función constructiva a esta pantalla on hacer de este zapatos rojos una función que se llame cuando primero cargemos app. Entonces, como puedes ver, acabamos de crear la función constructor aquí que se ejecuta cuando se inicia esta clase. Acabamos de pasar por los apoyos y super como lo harías normalmente. Y entonces estamos llamando. Te lo leo para que funciones aquí con esta dirección de correo temporal y una contraseña falsa. Entonces si guardamos este Andi, estamos en esto en el simulador, abriremos la terminal un oleaje para comprobar qué es lo que la consola está registrando Así que si abrimos la app ahora así que solo hay que asegurarnos de que llames a este inicio registrar usuario como su perspicacia, esta clase de padres. Entonces si ahora revisamos la terminal, se puede ver que este nuevo uso se ha creado. Entonces está la dirección de correo electrónico que usamos en la contraseña, y está buscando de nuevo aquí para mostrar el resultado. Y luego se crea este nuevo objeto de usuario. Entonces para revisar esto más adelante, volvamos al panel de control de la base de incendios y veamos si y nuevo usuario está apareciendo. Entonces aquí está este es tres identificador de usuario aquí. Muestra al proveedor que hemos utilizado. Este es el correo electrónico y la contraseña proporcionan un tipo, la fecha en que se creó la cuenta en la última vez que iniciaron sesión. Y también tenemos a este usuario I D. Así que esto será realmente útil para nosotros más adelante en el curso cuando empecemos a mirar las opciones de base de datos y cómo podemos crear perfiles para usuarios y cosas como esta, y también tienes la opción de restablecer la contraseña, desactivar y eliminar sus cuentas. Eso Así es lo fácil que es crear realmente un usuario usando esto. Reggie es una función que se crea, así que lo siguiente que tenemos que hacer es mirar cómo podemos realmente iniciar sesión a los usuarios en Zain usuarios en realidad comprobar si un usuario está conectado o desconectado. Por lo que estas funciones de la misma a través de todos los diferentes proveedores. Por lo que no importa si usas y Facebook inicia sesión o correo electrónico y contraseña, aún necesitas poder iniciar sesión. Usos. L on check si alguien realmente ha ingresado o no, es que vamos a mirar a continuación. 7. Comprobar si el usuario está registrado y cómo iniciar un inicio de sesión: para comprobar si el usuario está conectado, vamos a crear una nueva línea de código en nuestra función constructiva justo aquí. Entonces para empezar, si vamos a salir esta función de usuario registrador estábamos usando en el último video y realmente vamos a hacer un cheque para ver si el usuario está conectado o no cuando abramos la app. Entonces para hacer esto, vamos a acceder a la variable, um, f justo aquí. Que, como vimos, um, um, anteriormente son las funciones generales de la base de incendios. Por lo que para acceder a ella. Entonces solo teclea F así. Quieren acceso, las funciones off dentro de eso, y vamos a hacer un cool para escuchar la función on off state cambiada. Entonces dentro de la disfunción, ahora queremos comprobar para ver si esta variable de usuario aquí realmente está configurada o no. Y esto nos dirá si el usuario está conectado o si está bloqueado. Entonces ahora que tenemos esto aquí que realmente se ejecuta esto, Pero justo antes de hacerlo, vamos a agregar un registro de consola para ver realmente cuál es la respuesta fuera de esta función. Si lo ejecutamos ahora mismo. Entonces aquí estamos en el simulador. Y si ahora revisamos la terminal justo aquí tiene en realidad solo recargar esto para que podamos ver mejor en la respuesta. Por lo que acaba de darse cuenta de este paquete. Y como puedes ver, estamos encerrados y este es el objeto fuera del usuario justo aquí. Ahora, la razón por la que esto está conectado o que estaba teniendo que usar realmente una función de inicio de sesión es que cuando ejecutamos la función de usuario registrado que hicimos anteriormente, esto realmente registra para usar una lluvia de inmediato también. Por lo que se registra y luego perros para usar Aarón. Entonces ahora que sabemos que el usuario está conectado, veamos realmente cómo se vería un usuario fuera. Por lo que es muy similar a lo que hemos estado haciendo anteriormente, pero en lugar de ejecutar una función como crear usuario, solo usamos ambos de nuevo porque hemos importado la parte superior, podemos usarlo. Entonces simplemente decimos, cerrar sesión ahora, en realidad, en realidad, voy a agregar un cool de vuelta aquí también. Esto es de nuevo donde los judíos, entonces y luego aquí está la función encendida. Nos va a enfriar mostrar que este evento ha sido exitoso y luego, como lo hicimos antes, también queremos agregar un cheque para ver si hubo algún error. Entonces solo decimos atrapar. Y luego nos sentamos nombre a nuestro mensaje de error, y luego podemos registrar esto en la consola también. Entonces si ejecutamos esto ahora, salgamos de hecho esta línea por un momento. Se on, Ejecuta esto otra vez. Se puede ver el mensaje aquí ahora está bloqueado. Y si cambiamos esto de nuevo y ahora saliendo, se cierre función que deberían. Ahora cuando cargamos la app tu cheque para ver si el usuario está conectado o bloqueado. Y esta vez debería decir bloqueado. Entonces como puedes ver, ya se ha corrido. Vamos a correr contra debilitar debilitar. ¿ Ves esto? Entonces, como se puede ver, esto está funcionando correctamente. Entonces lo que hemos aprendido en este video es albergar un cheque si el usuario está conectado o cerrado sesión . Y también hemos estado mirando la función de cierre de sesión para ver cómo realmente cerrar sesión usa si realmente están bloqueados. Entonces en el siguiente video, vamos a empezar a buscar en Facebook. Inicia sesión y cómo podría usarse esto en tus siestas. Vamos a estar creando la aplicación Facebook Facebook en el panel de desarrolladores de Facebook en. Vamos a conectar esto a nuestros proyectos nativos de reacción. En realidad podemos iniciar sesión con Facebook después de que esto se verá realmente creando campo de entrada para que podamos tener un nombre de uso y contraseñas similares a lo que estamos haciendo con Usuario Registrado . En realidad vamos a crear una forma que podemos usar en absoluto más adelante aquí para ejecutar realmente estas funciones sin tener que simplemente ejecutarla a través del constructor así. Por lo que al final de este módulo tendrá una fuerte comprensión de cómo usar Facebook. Inicie sesión. También utilizando las opciones de registro de correo electrónico y contraseña estará buscando en estos próximos 8. Uso de inicio de Facebook: en este video, vamos a estar agregando Facebook. Inicia sesión en nuestra app. Pero antes de que podamos hacer esto, necesitamos registrarnos app con Facebook. Entonces primero hay que ir a desarrolladores dot facebook dot com y crear una nueva app i d Así que vamos a usar el mismo nombre para mostrar que hemos estado usando con una base on cinco. O simplemente llama a esto mi primer proyecto. Después disco haga clic en crear APP. Yo d me aseguro de inventar tu dirección de correo electrónico en este recuadro también. Así que primero haga clic en crear aplicación D acaba de completar una comprobación de seguridad y luego enviar el caso. ¿ Alguien ha mirado hacia abajo a Facebook? Inicie sesión, Que debería ser que escucho está cerca de la parte superior, así que basta con hacer clic en configurar. De acuerdo, Entonces una vez que hayas agregado órgano de Facebook, verás esta página justo aquí. Ahora no necesitas preocuparte por nada de esto ahora mismo porque estamos usando reaccionar nativo. Entonces primero debilita, salta al botón de configuración justo aquí. Entonces cuando estés en esta página, quieres desplazarte hacia abajo hasta la parte inferior y hacer clic en agregar plataforma en. Entonces queremos dar click en IOS. Andi android. Ahora porque por el momento y mientras estamos probando, estaban usando el simulador de Expo. Esto es tanto para la expo arriba en el simulador. Y si estás probando esto en tu teléfono, tenemos que asegurarnos de que tenemos el paquete correcto. I d para IOS en el hash clave correcto disfrutado de vincularse con Expo. Entonces para conseguir esto, solo necesitamos ir a los muelles de expo en Esto explica tres detalles diferentes que necesitas para cada tipo de pap. Entonces primero para IOS, solo tenemos que agregar esto como el paquete I d Así que solo lo copian aquí. Añadiré un enlace a esto en los recursos así que solo pegamos esto justo aquí y luego mismo otra vez para el hash clave para Android. Entonces una vez que hayas agregado esto, solo necesitamos guardar estos cambios y entonces realmente podemos hacer una nota de eso. I d on d app secret porque necesitaremos thes a medida que avanzamos. Entonces ahora que hemos creado Facebook up y hemos hecho una nota de eso arriba i d y R AP secret y hemos agregado en el paquete I D en el hash clave para Android. En realidad ahora podemos volver a nuestro co editor. Ahora está de vuelta en I co editor. En realidad vamos a crear una función que nos permita iniciar sesión con Facebook. Por lo que nos moveremos aquí un poco. Solo eliminemos este código. Entramos en duda por firmar usos hacia fuera. Sólo llévala aquí. Simplemente lo volveré a acelerar. Justo en la parte inferior. Aquí. No te asegures de que sea justo antes de la función de rendición. Sólo un crédito. Un poco más de espacio. Vamos a hacer que esta diversión sea un poco más grande, idiota. Sólo para que sea fácil de ver. Entonces ahora que tenemos un poco más de espacio y está claro ver vamos a dejar de escribir este nuevo código Así que esta función primero va a ser un fregadero. Por lo que va a nombrar esta función. Mira dentro con Facebook. Puedes llamar a esto donde quieras, pero esto es simplemente más fácil de mantener la pista en este momento. Entonces quieres entonces establecer una constante con tipo y token, y luego vamos a decir esperar expo expo dot Facebook, Logan, la capital. Simplemente escucho iniciar sesión con permisos de lectura. Yo creo que sí. Ahora necesitamos esa app. Yo d Así que vamos a obtener esto de Facebook en un momento, y luego sólo queremos establecer los permisos que vamos a estar necesitando así para empezar, si sólo vamos a estar accediendo al perfil público. Entonces ahora solo necesitamos comprobar si hay algún error con esto. Entonces vamos a decir si el tipo es un éxito, ahora queremos realmente obtener el token o las credenciales que Facebook devuelve y las usó para iniciar sesión con base de fuego. Entonces, como se puede ver aquí, sólo estamos accediendo a la función f que estábamos usando previamente y luego estábamos apagando . Y luego estamos accediendo a Facebook o proveedor, y luego vamos a acceder y enviar las credenciales. Esto lo cambió de un token de Facebook. Dos credenciales que en realidad podemos usar para iniciar sesión con base de fuego. Entonces ahora solo agregamos un catch por si acaso hay un error. Pero si esto funciona, ahora deberíamos ver realmente la función on state change se ejecutará cuando este usuario haya iniciado sesión y deberíamos ver sus datos de usuario cuando estén iniciando sesión, así que solo ordene esto. Necesitamos realmente agregar app I d aquí. Entonces si volvemos a Facebook ap justo aquí podemos desplazarnos hasta la app I d. Y copiar esto solo podemos colocar a fin. Entonces si guardamos esto, casi estamos listos para probar esto. Simplemente primero tenemos que habilitar, um este proveedor dentro de firebase. Así que de nuevo haces clic en habilitar justo aquí el ritmo en tu app yo d Y también necesitas agregar el secreto de la app para que puedas conseguir esto justo aquí. ¿ Puedes simplemente hacer clic, mostrar copiarlo y pegarlo? Después te desconectas guardar. Y esta es ahora una opción dis naval dentro de cinco base Justo antes de probar esto, necesitamos hacer un cambio más en, pero va a quitar esta palabra función justo aquí. Basta con retirar este espacio. Entonces si ejecutamos este código ahora, puedes ver que tenemos la app por defecto de nuevo aquí. Pero vamos a añadir un botón justo en la parte inferior aquí que cuando alguien lo toque, se enfriará. Este órgano 'll de la función facebook. Por lo que primero necesitamos importar un tocable. Un toque resaltará desde reaccionar nativo, Esto sólo sería un botón. Entonces si solo probamos esto ahora, ya puedes ver que tenemos este botón justo aquí. Y ahora solo vamos a añadir un evento de tap que escuchará para ver si se ha tocado este punto culminante táctil. Y entonces llamará a esta función. Entonces, para hacer esto, sólo vamos a bajar esto a una nueva línea justo debajo de donde dice tocable. Destacar aquí se sumará en prensa. Y luego enfriaremos la función. Justo aquí es Esto será esto. Perros inician sesión con Facebook. Entonces es un simple es eso y luego solo haremos clic en guardar. Entonces a medida que hacemos clic en esto ahora, debería llamar a esta función. Es sólo abrir las líneas de mando. Podemos ver qué corriendo aquí. Ahora hay una parte más que necesitamos configurar, pero solo comprobemos primero esto y veamos qué sucede cuando hacemos clic en iniciar sesión en Facebook. Entonces está abriendo un motel aquí, y aquí dice, Logan, Logan, si tu cuenta de Facebook para conectarte a mi primer proyecto. Entonces solo salto rápidamente mis detalles aquí y veo lo que nos está mostrando. Entonces Es solo pedir mis permisos para continuar y tocar a esta app. Y aquí vamos nos está llevando de nuevo en ello dijo aquí no se puede encontrar la variable. Entonces si solo revisamos esta línea Fuentes línea 31. De acuerdo, puedes ver cuál es el tema aquí. Hemos puesto credenciales aquí con s del final y oímos hablar de solo poner credencial. Entonces si solo arreglamos esto en correr el up otra vez buscando nombre de Facebook, son mis detalles otra vez. Entonces solo di que ya está aquí. dio cuenta de que lo hemos registrado antes. Entonces dice que quieres volver a iniciar sesión? Entonces aquí vamos. Se muestra todos mis detalles justo aquí. Por lo que mis detalles de Facebook realmente usan tu i d foto euro cuando usas tu i d. Así que ahora deberían haber creado correctamente un nuevo usuario en en base de datos firebase. Entonces si volvemos a saltar a un proyecto, busca a nuestros usuarios en un fresco se puede ver aquí que se agrega un nuevo usuario. Yo lo d justo ahora, Como puedes ver, no ha agregado una dirección de correo aquí porque no pedimos los permisos de correo electrónico dentro justo aquí. Acabamos de preguntar un perfil público. Entonces si agregamos correo justo aquí, Andi, vuelve a hacer esta comprobación. Entonces si volvemos a mirar en Facebook, no, es decir, Permitir que esta app acceda a tu dirección de correo electrónico. Entonces, ¿qué es eso? Sí, y continuar. Entonces ahora debería, si realmente elimino esto primero y vuelvo a ejecutar esta comprobación. Entonces, por ahora, retrocede. Simplemente cambia una línea para volver a ejecutar el arriba Puedes ver aquí. Estamos bloqueados si miramos ahora, así que me está pidiendo solo que vuelva a confirmar estos permisos. De acuerdo, así que ahora ha pasado. Tres. Mi correo electrónico, Mi nombre para mostrar en algunos casos, número de teléfono , foto, euro en También se señala proveedor I D es Facebook. Entonces si ahora miramos hacia atrás en un fresco, puedes verlo guardado Mi dirección de correo electrónico se actualiza el proveedor y nos proporcionó un nuevo usuario I D. Así que si ahora volvemos a actualizar esta app aquí y ver si sigue iniciando sesión el usuario en. Entonces si solo sacudimos de nuevo en re como el paquete, puedes ver que se recuerda quién soy, y me ha mantenido encerrado así que es lo fácil que es empezar a un Blufgan de Facebook y usar tu app, obviamente tu estilo. Es un poco diferente a esto, pero muestra cómo acaban de crear una función sincrónica justo aquí que está conectada a nuestra app, i d. Hemos establecido los permisos como públicos y correo electrónico con luego usado Expo para iniciar sesión con estos permisos. Bueno, entonces escucha las credenciales y envía estas 25 base para cambiar realmente las credenciales de Oriente que podemos usar para iniciar sesión. Acabamos de llamar a Asilo de función credencial en, y luego se completa el Logan. La impresión real a la consola que estamos haciendo aquí que muestra que el usuario está conectado se hace por esta función aquí arriba porque está escuchando para ver si cambia el estado. Si usas tu Islam, ya sabes, y ahí es donde entonces podemos acceder a usar objeto. Entonces aquí es donde en tus APs puedes cambiar la pantalla que está encendida para luego ir de una pantalla de inicio de sesión para ir realmente dentro de tu app para ver perfiles de usuario o como comisiones que solo los usuarios iniciados pueden ver esto es en lo que vamos a ver más adelante en el curso cuando realmente construimos una aplicación que simplemente no puedes tener sus propios perfiles y cambiar configuraciones y cosas como esta. Pero por ahora, puedes ver cómo se puede usar el registro de Facebook dentro de un proyecto firebase. 9. Uso de correo electrónico y pasar con TextInput: Bienvenido de nuevo en este video vamos a continuar para si lo dejamos antes en Mira cómo podemos usar las funciones de inicio de sesión de correo electrónico y contraseña que hemos hecho antes y realmente crear un formulario de registro que podamos usar con las funciones de inicio de sesión. Entonces para empezar con esto, realmente vamos a importar otro elemento de reaccionar. Nativo, esto va a ser entrada de texto. Esto es lo que vamos a estar usando para construir realmente nuestro registro. Informar junto con esto, también vamos a sumar bienes. Entonces así es como vamos a comprobar si el usuario realmente está conectado o no. Entonces cuando usamos esto en todas las funciones de estado de estaban usando antes, en realidad vamos a actualizar el estado desde aquí para que podamos usar esto cada vez que el usuario bloquee el riesgo. Es decir, podemos actualizar lo que vamos a mostrar aquí abajo, dependiendo de si el usuario está bloqueado o bloqueado. Entonces de nuevo, solo vamos a agregar un simple nombre de variable aquí arriba, así que empezaremos diciendo que no están encerrados, y esto es todo lo que necesitamos en este momento. Por lo que seguiremos trabajando en esto en función fuera del estado primero. Entonces debido a que esta función se va a ejecutar de forma independiente, esto está en un hilo separado. Eso realmente tenemos que establecer una variable separada. Podemos acceder y cambiar el estado. Entonces todo lo que hacemos es genial. Una nueva variable. Podríamos llamarlo de cualquier manera, pero sólo vamos a llamar a esto que vamos a poner esto como esto, que es la real todas las funciones dentro de este vaso, incluyendo el estado. Entonces eso significa que ahora que estamos aquí abajo, podemos decir ese estado conjunto, y luego solo diremos que se veía adentro es cierto. Esto es todo lo que necesitamos para mostrar realmente que cuando el usuario el estado ha cambiado en las lesiones ingresadas, realmente vamos a actualizar el estado para reflejar esto también. Y vamos a hacer lo mismo aquí abajo por estos es que están desconectado. Pero sólo estamos diciendo falso en su lugar. Entonces esto es lo que vamos a estar usando más adelante cuando realmente empecemos a cambiar la pantalla del por qué y crear un formulario de registro. Pero por ahora, esto es un que necesitamos. Entonces en realidad vamos a hacer a continuación es crear una función a la que podamos llamar. Queremos iniciar sesión a un usuario, por lo que volveremos a empezar. Es como apostar por tu función. Esto va a ser un fregadero, y va a tomar en el correo electrónico de la contraseña. Entonces en esta función, justo primero queremos que Teoh haga un cheque para asegurarse de que el correo electrónico y la contraseña realmente exista para que no estemos pasando ningún detalle vacío a la función firebase. Entonces para hacer esto solo dirá, ya sabes, si el correo electrónico no está vacío y la contraseña no está vacía, correremos. Eso se hizo eco aquí. Y entonces sólo diremos lo contrario esto será si están vacías. Entonces esto es si el correo electrónico está vacío o si la contraseña está vacía, solo vamos a decir que falta correo o contraseña. Por lo que obviamente, en una aplicación de producción, probablemente tengas un mensaje que sería diferente por lo que podemos agregar un cheque más adentro aquí para ver si era para el email que faltaba o la contraseña. Pero por ahora, esta es una buena práctica para entrar, para asegurarnos, hacer algunas comprobaciones para ver los tipos de datos que estamos enviando a esta función. Entonces eso significa que ahora sabemos que si el correo electrónico y la contraseña ambos no están vacíos, podemos continuar aquí. Y en realidad buscar a este usuario en para esta función. Entonces para hacer esto, vamos a poner esto dentro de un bloque try. Esto captará cualquier error que ocurra. Entonces vamos a asignar al usuario a un peso apagado otra vez. Podemos usar off porque lo hemos importado del incendio de conflicto que pusimos en los videos anteriores . Y luego la función que queremos revisarla es iniciar sesión con correo electrónico y posible que, continuación, esto tomará el correo electrónico y la contraseña. Entonces de nuevo, este es un estilo de función similar al que hemos visto con las otras funciones de autorización de firebase . Entonces en este punto, podemos decir, Bueno, Bueno, en realidad, tener el objeto del uso de la justicia. Podemos encerrarnos a la consola, y luego solo vamos a añadir un cheque aquí si había alguna zona. Entonces voy a decir, atrapar era porque estamos usando un bloque try aquí. En realidad podemos captar cualquier error que se haya producido. Bueno, sólo mira esto. Simplemente podemos ver lo que está pasando Esto es lo que necesitamos aquí para realmente bloquear al usuario en. Ahora hemos hecho nuestra función de inicio de sesión. Empecemos a construir realmente la interfaz de usuario que queremos mostrar. Entonces lo que vamos a hacer es actualizar un poco esto para que podamos tener diferentes contenidos mostrados si el usuario está conectado o si el usuario está bloqueado y además añadirá un botón de cierre de sesión Así que en realidad cambiaría este código de salida que creamos y solo movió esto y a su propia función. Entonces nos detendremos solo diciendo signo, use eso fuera es una función que acabamos de encerrar todo esto dentro de esta función. Por lo que acabamos de guardar esto ahora en DSO Hasta ahora, hemos agregado lo que hemos convertido este código de cierre de sesión en realidad una función de cierre de sesión en. Hemos creado una nueva función para permitir a los usuarios iniciar sesión. Es decir, también establece un estado por defecto en importada la entrada de texto. Entonces es todo lo que realmente necesitamos para empezar a actualizar la interfaz aquí abajo. Entonces primero vamos a realmente quitar un par de estas líneas se quita esta línea aquí en simplemente cambiar esto así así así que podemos distinguir entre las diferentes partes fuera de la interfaz. Entonces si solo nos aseguramos de que esto esté funcionando y comprobaremos cómo se ve esto hasta ahora así como puedes ver ahora, esto ahora está diciendo que me salí el vestido. Esto es lo mismo que antes. Ahora tenemos estos guiones y en el inicio de sesión con el botón de Facebook que teníamos antes. Esto es con lo que vamos a empezar. Pero ahora queremos asegurarnos de que este botón de inicio de sesión con Facebook solo aparezca si el usuario está desconectado. Entonces para hacer esto, vamos a hacer algunos cheques dentro de la función de rendición. Entonces vamos a revisar a los muy chicos configurados aquí en el estado para ver si el usuario está conectado . Entonces si es cierto o si es falso así como puedes ver, así es como lo haces. Ah, revisa aquí. Entonces esto significa que esto cualquier código dentro de aquí se ejecutará y renderizará. Si esta variable es cierta con este signo de interrogación justo aquí, sistemala si es verdad, y entonces esto es si no es cierto. Entonces si es falso, vamos a escribir código de ejecución aquí dentro. Aquí es donde quiero. Esto es lo que queremos mostrar iniciar sesión con el botón de Facebook, y también necesitamos agregar una vista aquí. Simplemente para que cualquier cosa dentro de esta afirmación esté en realidad dentro de su propia visión. Esto es lo mismo para hecho aquí también. Eso es sólo en dentista mucho. De acuerdo, entonces si guardamos esto ahora, veamos qué tenemos. Entonces como viste ahí por un breve segundo, mostró el inicio de sesión inicial con botón de Facebook porque cuando se abre la página, es falso. Y luego, medida que la función de cambio on off state completamente cargada, se actualizó para mostrar que en realidad estamos encerrados. Pero ahora que tenemos esta parte funcionando, eso es realmente mejorar este fervor encendido, agrega un botón que permita a los usuarios realmente cerrar sesión. Entonces si esto podemos agregar otro resaltado tocable, voté por el botón de inicio de sesión real y solo estamos diciendo al presionar cerrar sesión usuario. Teníamos un poco de estilo aquí, un oleaje sólo para que podamos ver, uh, uh, el tamaño exacto de este botón. Ahí vamos. Podemos ver este botón de cierre de sesión desapareció en la página. Es sólo arreglar esto justo aquí. Entonces si hacemos clic en este botón ahora, debería iniciar sesión el uso y luego volver a mostrar el botón de inicio de sesión. Ahí vamos. Estamos empezando a ver algunos elementos dinámicos para ti. ¿ Por qué ahora? Pero hasta el momento, los usuarios solo pueden iniciar sesión con Facebook. Queremos cambiar esto para que realmente puedan iniciar sesión usando esta nueva función de usuario de registro que hicimos para que puedan buscar en su correo electrónico y pasar pie. Entonces para que hagamos esto, vamos a utilizar la importación de entrada de texto que hemos inventado aquí de reaccionar nativa y en realidad permitir que el usuario toe agregue en escriba su dirección de correo electrónico y su contraseña. Entonces esto va a pasar aquí abajo, pero tenemos el cheque para ver que un futuro está conectado o no, Así que no aquí. Esto es si el usuario no está bloqueado, vamos a agregar un botón aquí abajo para realmente preguntar lo fácil si quieren iniciar sesión con su correo electrónico y contraseña. Entonces lo que vamos a hacer es usar un similar, Pero hasta que hayamos hecho justo aquí. Entonces solo copia y pega esto. Vamos a cambiar el registro del texto de Facebook para decir, inicia sesión con correo electrónico y aquí abajo vamos a establecer los estados. Entonces solo vamos a decir email log in, cambias a árbol. Entonces, ¿qué haría esto? Vamos a añadir una nueva vista aquí arriba que sólo se mostrará si este botón ha sido presionado. Entonces vamos a tomar esta variable aquí, hacer un nuevo cheque, y vamos a salvar este estado. Inicie sesión en mi bitácora. A la vista, si esto es cierto, vamos a mostrar una nueva vista aquí arriba, que probablemente va a contener los campos de correo electrónico y contraseña donde los usuarios puedan escribir su correo electrónico y contraseña. Entonces primero se establecerá, comió un trozo de texto para decir correo electrónico, y luego realmente crearemos una entrada de texto justo aquí. Es Esto funciona muy similar a los otros elementos que hemos hecho. Entonces como somos tocables, resalte, vamos a estar realmente escuchando para ver cuando el usuario realmente está agregando texto aquí ya que necesitamos guardarlo en algún lugar Así podemos usar esto para procesar cuando hagan clic en iniciar sesión. Entonces decimos en cambio de texto. Y luego cuando el Texas cambió realmente va a establecer el estado. Entonces apostasía tres. Por lo que esto básicamente va a cambiar esta variable de correo electrónico en el estado con el texto se ha introducido en el campo de entrada. Y luego vamos a hacer exactamente lo mismo para el campo de contraseña, excepto que solo arregle las indentaciones aquí. Excepto que acabamos de cambiar esto a contraseñas. Un prop extra que vamos a añadir para este componente. Por lo que esto se llama entrada de texto segura. Esto es lo que asegura que la contraseña no sea visible cuando el usuario está escribiendo. Entonces si guardamos esto ahora, ¿no es un signo de interrogación justo aquí? Y necesitamos realmente cerrar esto aquí abajo. Entonces puedes solo en esto si estás trabajando solo con IOS, pero para Android es realmente causar un error. Entonces lo que básicamente hará es solo crear un área nueva justo aquí. Sólo teníamos que tener una vista vacía dentro de esto. Entonces otra vez, esto se ve bien ahora. Entonces si cocinamos en Logan de correo electrónico, esto hace que esta nueva vista. Hemos creado un par, pero sólo nos falta una cosa, que en realidad es una mantequilla de registro. Entonces vamos a añadir esto justo ahora. En realidad voy a copiar el resaltado tocable con maquillado aquí solo para ahorrar tiempo . Entonces cambiaron el texto aquí para decir, inicia sesión y luego la función Nicole va a pagar log in, usuario. Entonces vamos a pasar el correo electrónico y la contraseña que estos aire han entrado aquí. Por lo que esto ahora enviará el correo electrónico en la palabra pasada que estos han escrito a la noticia de registro una función que aquí arriba hemos creado. Por lo que la primera comprobación para ver si existieron entonces realmente se publicará Continuar en. Estamos en esta función. Entonces si guardamos esto ahora, estamos listos para probar realmente. Esto es un trabajo. Entonces si solo nos desplazamos hacia arriba, podemos ver los detalles del usuario que usamos en el video anterior de registro semanal de correo electrónico. Y si ingresamos esta dirección de correo electrónico y la contraseña, así que si sabemos pulsa iniciar sesión, Solo tienes que ver aquí. Necesitamos el tipo de dedo en correo electrónico y contraseña. Entonces si lo intentamos de nuevo ahora, solo arregla esto en un inicio de sesión. ¿ De acuerdo? Nuevamente, podemos ver que cada aquí es que estábamos usando el nombre de variable incorrecto. Entonces si solo quitamos esto y lo ejecutamos de nuevo. Entonces ahora estamos copia, uh, correo electrónico justo aquí. Haga clic en el registro de correo electrónico y bien ritmo en nuestra dirección de correo electrónico y simplemente escriba esa contraseña. Entonces ahora vamos a órgano y se puede ver que está trabajando nos está llevando directamente a una nueva área de usuarios . Y si pudiéramos mirar hacia fuera, nos lleva de vuelta aquí. Estamos buscando de nuevo y así sucesivamente. Entonces en este video con aprendió a crear realmente una interfaz muy, muy simple usando la entrada de texto en los botones, usando estas comprobaciones para ver el estado para ver si logramos iniciar sesión o no. Y entonces sólo estamos tocando elementos diferentes. Diferentes elementos de vista para ver si el usuario está conectado. Vamos a decir, Johnson Ogle, También podrías simplemente jugar información del usuario aquí un oleaje y luego si el usuario no está conectado mostrando dos botones, no gentrify el correo electrónico con Facebook. Por lo que solo para probar esto también cerrará sesión y luego iniciará sesión con Facebook, y luego volverá a comprobar para ver si quieres permitir este acceso hasta y los procesos. Y ahí estamos. Nos encerramos. Entonces así es lo rápido que puedes juntar interfaces como esta 10. Introducción a la base de base de recursos de fuego: bienvenido a este nuevo módulo. Ahora, en este módulo, vamos a estar mirando la base de datos que puedes usar en base de fuego. Por lo que para empezar, no tienes que hacer clic en la pestaña de la base de datos en el panel de control de la base de incendios. De acuerdo, entonces hay dos tipos de base de datos que proporciona firebase. Ahí está la tienda Cloud Fire. Andi, la base de datos en tiempo real en esta primera parte de este módulo va a estar mirando la base de datos en tiempo real , ya que esta actualmente es la única versión totalmente compatible. que la tienda de bomberos de la multitud está en beta, vamos a estar agregando más videos para esto en el futuro cuando esté totalmente apoyado. Pero ahora mismo, vamos a estar usando la base de datos en tiempo real. Por lo que para empezar a esto, basta con dar click en crear base de datos y queremos empezar en modo test. Aquí la diferencia está en el nivel de seguridad que tienes cuando inicias tu base de datos por primera vez . Ahora, todo esto podría cambiarse y estará investigando esto en uno de los próximos videos . Pero para empezar, queremos dar click en iniciar en votación de prueba, Entonces solo hacemos clic en habilitar. De acuerdo, así que ahora puedes ver aquí. Está diciendo, como las reglas de seguridad son públicas, esto significa que cualquiera puede ver los datos de nuestra base de datos. Si van a esto, tu Oh, y también están ingresados a su cuenta de Google. Pero no te preocupes por eso por ahora, porque, uh, íbamos a estar cambiando su muy pronto. Puedes controlar estas reglas de seguridad desde el toque de reglas aquí, cuales estarán investigando con más detalle más adelante. También puedes configurar copias de seguridad, uh, para tu base de datos justo aquí. Y también puedes ver los detalles de uso de tu base de datos por aquí. Por lo que muestra cuántas personas utilizan la base de datos al mismo tiempo cuán grandes son sus bases de datos en el ancho de banda que actualmente han estado usando Esto es todo lo que necesitamos saber para empezar. Entonces para empezar, solo tenemos que tener esta base de datos en blanco que vamos a estar empezando a usar en el próximo video 11. Cómo configurar, actualizar y eliminar los datos en la base de los recursos de firebase: bienvenido de nuevo. Entonces ahora que tenemos configurada nuestra base de datos, en realidad podemos volver al coordinador y empezar a ver cómo podemos interactuar con la base de datos. Entonces, empecemos por ver algunos ejemplos simples de primero cómo establecer datos de actualización de datos y luego eliminar datos. Y a continuación, veremos cómo llamar realmente a los datos sobre poder iterar sobre diferentes tipos de datos que puedan tener en su base de datos. Entonces, para empezar, veamos realmente cómo se pueden establecer los datos. Entonces, en realidad sólo vamos a entrar estos para salir la forma en que funciona la base de datos en reaccionar nativa con base de fuego, es que vamos a estar usando esta base de datos. Variable que de la misma manera que estábamos haciendo en los módulos anteriores lo estamos importando aparecen de la pick come. Por lo que esto ya se ha configurado y listo para que lo usemos. Entonces debido a la configuración de conflictos que hemos hecho antes, en realidad podemos empezar a usar la base de datos de inmediato. Entonces otra vez, aquí dentro, esto es lo que tenemos que hacer. Entonces primero obtenemos esta base de datos de la variable de base de datos, Luego establecemos una ruta. Entonces esta es la referencia. Por lo que aquí puedes escribir en cualquier parte para establecer los datos de cualquier atributos reales que desees . Entonces si cambiamos esto a si cambiamos esto a algo simple, como nombre de ref, y si guardamos esto de realmente configurado realmente, uh, uh, el simulador es un libre abrir el simulador. Ahora, lo que debemos encontrar es el Ok, Entonces el APN se abrió para que en la base de datos, que anteriormente estaba vacía, se pueda ver que esta referencia tenemos estos valores. En realidad podemos hacer click en esto en DSI Este dato con más detalle pero en realidad podríamos hacer es que podríamos tener tantos elementos infantiles dentro de aquí como quisiéramos. Entonces si volvemos a Adam y en realidad presentamos slash child ref como este, por ejemplo con estimado para correr que tiene, se puede ver ahora esto ha cambiado para mostrar el referente de edad de edad aquí en lugar de solo un valor en esta referencia real . Por lo que puedes tener tantos refs diferentes aquí como desees. Por lo que podríamos cambiar esto a un niño ref a por ejemplo, y se puede guardar agregado aquí ya por lo que otra forma de interactuar con los datos es actualizando las cosas. Entonces como puedes ver aquí abajo, si solo venimos la ayuda de esta empresa así hecho aquí tenemos un estilo ligeramente diferente off usando esta base de datos y aliento para actualizar ciertos elementos de nuestra base de datos. Entonces, como se puede ver aquí, esta es muy similar plática usando antes, excepto que esta referencia está vacía. Entonces lo que estamos haciendo, estamos creando una matriz aquí fuera de camino diferente. Queremos actualizar para que podamos usar tantos como no escucharíamos chirriador. Basta con copiar y pegar esta línea en Decir así aquí arriba teníamos nombre de ref, barra hacia adelante aliento niño. Vamos a cambiar sólo una base de datos y en realidad podríamos establecer una nueva. Entonces otro nombre f cuando Jay lo dice y también puedes no solo tienes que usar cadenas, también puedes usar números. Entonces si solo nos cambiamos a un número cinco Así que mientras guardamos esto y ejecutamos esto, tu notó que todos estos se ejecutaron al mismo tiempo. Esta es una forma mucho más eficiente de actualizar datos con este método habría tenido que tener una serie de escuelas de base de datos diferentes con la ref y luego finalmente establecer el valor, que sería una serie de diferentes enfrías en. Http solicita el back end real para hacer que lo haga de esta manera. Simplemente todo se hace a través de una solicitud por lotes. Entonces si guardamos esto ahora, me mudé a aquí. ¿ Qué? Estás avisos de que la entrevista de números aquí se muestra sin estas cotizaciones. Entonces esto en realidad es un número las noticias del fin de semana. Podemos meter esto directamente en una trampa. No tenemos que cambiar esto en un número, por lo que en realidad se pueden establecer diferentes tipos de datos y los tipos de datos sobre la marcha, lo cual es completamente diferente a otros tipos de bases de datos. Puede que haya trabajado antes con Alcalde Factory, así que si volvemos aquí, finalmente, vamos a ver borrar datos. Entonces si salimos esto ahora, Así que cuando se trata de eliminar datos, se quiere tener mucho cuidado con esto, Pero es muy similar a cuando se establecen datos. Entonces tienes la base de datos, luego la referencia vamos a establecer una ruta aquí, y luego simplemente guardamos remove. Entonces vamos a probar esto, uh con números de referencia aquí. Entonces si cambiamos esto a números, guarde esto. Ya se ejecuta y pueden ver que se pone rojo y se quita este tablero de base de datos real para actualizar en vivo. Por lo que siempre y cuando no tengas miles y miles de registros, puedes ver los cambios reflejados de inmediato. Por lo que esto es sólo una rápida introducción a la base de datos en tiempo real basada en el fuego. En el siguiente video, vamos a ver las reglas de seguridad para que podamos empezar a asegurar la aplicación en, en realidad y la validación también, para que solo ciertos usuarios puedan ingresar ciertos tipos de datos en diferentes lugares. Por lo que echaremos un vistazo de cerca a las reglas de seguridad y cómo éstas se pueden usar en la base de incendios. 12. Los datos de la base de datos: antes de empezar a mirar las reglas de seguridad, primero vamos a echar un vistazo a cómo retirarnos y buscar datos de nuestra base de datos. Ahora, hay una serie de formas de nueva lista. O bien puede afectar solo un solo afecto de valor. Los objetos de neumáticos a la vez que pueden tomar un poco más de tiempo encendido, ocupan un poco más de ancho de banda. Pero esto sólo es realmente un tema a escala. Entonces si echamos un vistazo a algunos ejemplos de esto, entonces en este ejemplo aquí afectamos datos una vez te explicaré más sobre esto en un momento. Por lo que en realidad estamos recuperando. En primer lugar se basan referencia. Aquí tienes nombre de ref y luego puedes agregar en una referencia infantil aquí. Entonces estamos diciendo ref oro, que si revisamos esto en la base de datos, se puede ver tenemos nombre de ref y luego el niño ref justo aquí. Por lo que esto debería buscar un valor de base de datos. Y entonces lo que básicamente estamos haciendo es dentro de este objeto. Esto tomará un momento para hacer realmente solicitud http y luego enviar la devolución para esto a esta área justo aquí. Entonces la primera comprobación, si en realidad existe algún dato cuando se hace esta respuesta, y entonces estamos así aquí. Verificamos si estos datos existen, y luego estamos configurando nuestros datos al valor de esta instantánea, que es la variable que estamos configurando aquí para esta función. Entonces en este ejemplo, dentro de iniciar esto a la consola con el solo una cadena aquí para decir, valor único en los datos. Esta es una forma de obtener datos. También una base de fuego. En realidad se puede tener vida de actualización de datos. Entonces aquí abajo en este ejemplo estaban diciendo sobre el valor. Entonces esto significará si se agregan nuevos datos o los datos han cambiado, en realidad ejecutaría la disfunción aquí por cualquier cosa en este camino. Esto podría ser realmente útil para tener cambios absolutos de la vida en vivo en el show en la pantalla. Así que primero solo echemos un vistazo rápido a cómo se verán estos dos comandos en el interior cuando ejecuten la aplicación insider mirará en la consola real. Mira, a ver lo que están regresando estos datos. ¿ De acuerdo? Entonces como podemos ver aquí, estos son los dos tipos de solicitudes fuera que hemos hecho. Entonces tenemos en valor, que está mostrando base de datos y valor único, que está mostrando base de datos ahora solo para enfatizar la diferencia entre estas dos opciones. Si vamos Teoh chrome aquí y cambiamos este valor aquí mismo, consigue el lado a lado. Entonces si cambiamos esto aquí, se puede ver que esto se está actualizando de inmediato sobre el cambio ascendente. Por lo que cualquier cambio que se haga aquí se reflejará directamente en esta base de datos. ¿ Dónde está el valor único? Uno sólo corre una vez, lo cual sigue siendo útil. Si quieres tener tal vez un botón de recarga en tu app que pueda infectar de nuevo estos datos. Hay una serie de otra forma de confesar. Datos viven un oleaje. Entonces como puedes ver en este ejemplo, estábamos usando Teoh make updates live siempre que se cambie el valor. No lo hagas. Oye, estamos viendo diferentes maneras. Se puede comprobar en hacer actualizaciones en vivo también. Entonces en este ejemplo, realidad tenemos que hacer un ligero cambio. Podemos agregar un evento aquí llamado a niño agregado. Ahora lo que esto haría es llamar a esta función cada vez que se añada un nuevo niño a esta referencia. Entonces si eliminamos este nombre de ruta justo aquí, lo que esto hará es disparar un evento justo aquí. Si se agrega un nuevo hijo a este nombre de referencia. Echemos un vistazo a cómo esto se reflejará en la base de datos. Entonces si guardamos esto en base de datos abierta y solo echamos un vistazo, Así que aquí está nuestra referencia justo aquí. Y ya tenemos una serie de elementos infantiles aquí dentro. Entonces si ejecutamos esto en nuestro simulador, entonces si agregamos un nuevo elemento, solo deberíamos ver este log a la pantalla. Vamos a probar esto ahora, Así que vamos a hacer una nueva referencia en. Agregaremos una cadena especial a este valor para que podamos ver qué es esto. Y entonces si agregamos esto ahora, se puede ver que esto aparece justo aquí. Ahora, junto con esto, también se puede hacer una escucha para los datos que se están eliminando. Entonces en este ejemplo, es exactamente lo mismo que tenemos aquí arriba. Se puede ver que estamos revisando esta referencia sobre niño en ello. Y entonces es por eso que esto está apareciendo aquí. Pero no aquí esto está diciendo niño eliminado, y se va a decir sobre valor eliminado. Entonces si guardamos esta semana para que la app aparezca en el simulador y tenemos el registro funcionando de nuevo aquí. Entonces si ahora eliminamos esta referencia aquí, se puede decir que esto es mirar a la pantalla. De lo que hay que tener cuidado cuando estás usando esto en una aplicación en vivo es que estos eventos on child added en realidad se ejecutan con él al principio abre un oleaje. Por lo que debes asegurarte de que no estás haciendo solicitudes duplicadas al mismo lugar, pero funcionan muy bien cuando quieres agregar datos en vivo a tu 13. Reglas de seguridad de la base de: en este video, vamos a estar viendo las reglas de seguridad firebase y cómo puedes empezar a asegurar tus datos en tu base cinco a estado. Entonces primero para mí mirar cuáles son los diferentes tipos de reglas que realmente puedes usar en tu base de datos ahora estas incluyen leer, escribir, validar e indexar. Conoce lo que esto básicamente significa es leer comisiones permite a los usuarios acceder y encontrar datos de tu base de datos. El encargo adecuado permite a los usuarios establecer realmente un dato de actualización en una base de datos. Validar es útil para controlar realmente los tipos de datos que los usuarios pueden ingresar en diferentes áreas y referencias La ruta de referencia a su base de datos en índice es útil para ayudar a consultar Andi ordenar datos cuando necesite recuperarlos más adelante, hay una serie de variables que puedes usar para ayudar realmente a crear tus reglas. Esto incluye la hora actual, la ruta de ruta de la base de datos, y en realidad puedes agregar más referencias a esto para que puedas comprobar diferentes rutas entre sí. En realidad puedes consultar los nuevos datos que se están publicando en si eso es solo una vista. Si realmente hay un valor o si hay un objeto completo se ha establecido en la base de datos. En realidad puedes consultar esto también, y en realidad puedes comprobar hacer comprobaciones contra los datos actuales. Eso es en este punto de referencia también. Junto con esto, puedes sacar los objetos off del usuario que actualmente está autenticado. Si la persona ha buscado, que normalmente es el caso, y se puede acceder a cosas como su usuario, i d. En su información de perfil normal. Entonces su nombre, dirección de correo electrónico, token de usuario y cosas como esta. Ahora es sólo un ejemplo realmente rápido que muestra cómo se verán las reglas dentro de tu dentro la pestaña de reglas en el tablero. Entonces en este ejemplo de aquí, lo primero que buscamos es el punto de referencia de los usuarios. Ahora, dentro de esto, habrá una serie de filas en esta base de datos con diferentes ID de usuario. Entonces lo que estamos haciendo aquí es que en realidad estamos, lugar de poner en un camino explícito, estamos usando una variable justo aquí. Entonces eso significa, digamos, este usuario era cuatro usuarios slash board slash Russell. Se puede ver que la única persona podrá leer y escribir en realidad acceder y utilizar la base de datos sobre esta ruta sería alguien que esté conectado con el mismo usuario I d. que coincida con este usuario, I d variable. Entonces en este ejemplo, tendríamos que ser Russell. Es el usuario. I d Este es un ejemplo realmente rápido que muestra cómo se pueden armar estas reglas. Entonces sólo para ampliar en esta Onda dar un mejor ejemplo Si miramos en nuestra base de datos en momento, vemos cómo tenemos esta variable de nombre ref. Simplemente escucha este nombre de ref path justo aquí. Si abrimos las reglas y en realidad abrimos una base de datos en una nueva pestaña, impugnamos esto así de nuevo, puedes ver aquí tenemos un público peligroso. Vamos a cambiar esto ahora y sólo eliminar estos dos elementos aquí. Entonces de nuevo, esto significaría que si intentáramos hacer algún cambio en una base de datos. Ahora, si no funcionaran, los usuarios podrán acceder a los datos o establecer datos. Como se puede ver un asimilado aquí, realidad podemos hacer comprobaciones contra la base de datos ya que la estamos ejecutando. Entonces se puede decir que un usuario está autenticado o no? Y si lo son, en realidad puedes configurar a su usuario. I D. Esto es realmente útil para probar todas las reglas que estás creando antes de publicarlas. Entonces ahora va a hacer un par de simples cheques. Entonces si agregamos en algunas reglas para nuestra base de datos que tenemos en este momento, entonces de nuevo, este es el dato que tenemos aquí. Entonces si copiamos este nombre de ref justo aquí, vamos a usar esto en nuestro ejemplo. Este es el camino bajo el que vamos a estar trabajando, y vamos a decir bien, sus padres leen su árbol. Ahora, si publicamos esto, ya podemos hacer algunos cheques. Entonces lo que vamos a intentar y hacer es justo hasta este punto final. Como se puede ver, esto se ha fallado porque lo correcto es falso. Y si no leemos a este mismo camino y eso fue permitido, este es un ejemplo realmente, realmente rápido de cómo se puede usar el simulador para comprobar diferentes permisos. Ahora, hagámoslo un poco más de un ejemplo de la vida real. Entonces como se puede ver los datos aquí en este momento, hay una serie de elementos secundarios aquí. Pero esto justamente aquí dice base de datos, Lo que vamos a hacer es permitir que los usuarios cambien estos elementos hechos aquí para que en realidad puedan hacer comandos correctos si su usuario I d coincide con el nombre de este niño. Entonces para dar un ejemplo aquí, vamos a decir que vamos a crear una nueva ruta de referencia dentro de aquí. Esto va a estar bien. Entonces como puedes ver aquí, esto en realidad no está terminado todavía. De acuerdo, entonces lo que estamos buscando ahora es que en realidad podemos hacer un derecho a ref nombre barra hacia adelante Bueno, seis en punto aquí, niña. Ref. Entonces para dar un ejemplo aquí, vamos a intentar poner este valor aquí, pero por el momento, esto fue negado porque un usuario i d no coincide con esta barra infantil. Pero si cambiamos a nuestro usuario, i d. Así que ahora somos hija autenticada apareciendo, por ejemplo. De acuerdo, eso fue esta noche también. Pero estamos tratando de acceder a este niño. Ref, justo aquí. Si cambiamos de usuario, d hice aquí. Entonces en realidad es aliento infantil y tratarán de ejecutar esto. Se puede ver que este derecho este método 'll en realidad fue permitido porque nuestras reglas coinciden con el off I d en la variable de este nombre de ruta. Ahora, medida que avanzamos con este curso, vamos a crear una aplicación real que utilizará las reglas en amore Ejemplo del mundo real. Pero este video debería darte una comprensión rápida de cómo se pueden usar las reglas para asegurar realmente tu base de datos firebase. Ahora, son extremadamente potentes cuando es tormentoso, diferentes combinaciones que puedes usar. Si miramos estas variables puedes volver a usar, puedes ver cuántas formas diferentes puedes realmente referenciar los diferentes aspectos fuera tu base de datos. Lo importante a recordar es que cualquier regla que establezca en lo alto de su base de datos o cualquier cosa aquí arriba se asegurará de que cualquier cosa más abajo pueda ser en realidad seguirá estas mismas comisiones tan rápido de publicar aquí en. Y si pongo esto para forzar, si quería leer el mismo casco aquí abajo porque es esta esta regla, la parte superior está anulando todo lo demás. Por lo que necesitas probar para ser un lo más específico posible y no establecer ninguna regla en lo alto de tu en tu árbol de reglas para asegurarte de que realmente estás siendo específico para estos comandos. Pero de nuevo, miramos este fervor en los módulos posteriores de este curso 14. Estructura de la base de recursos de Firebase: Hey, bienvenido de nuevo en este video, vamos a echar un vistazo rápido a cómo estructurar mejor tu base de datos en base de fuego. Por lo que en la base de datos en tiempo real basada en incendios, todos los datos están en Jason. Por lo que es esencialmente un árbol de objetos Jason. Entonces por esto, necesitamos estructurar una base de datos de cierta manera. Ahora, en esta guía sobre los muelles oficiales firebase, realmente hacen un buen trabajo explicando exactamente cómo quieres estructurar tus datos. Así que simplemente corre a través de lo más rápido y proporciona un enlace para que realmente pueda echar un vistazo de cerca a esto usted mismo. Pero quieres asegurarte de que tus datos sean lo más planos posible. Por lo que quieres evitar demasiados ings de nido como este. Como se puede ver lo que tenemos diferentes tipos de elementos hijos dentro del otro. Esto hace que sea realmente difícil sacar ciertos tipos de datos que podría necesitar. Andi, cuando consideras que hay mirada, podría haber muchos usuarios usando tu aplicación que realmente aumentaría las bases de datos de ancho de banda usando Así que estructurando tus datos agradables y ordenadamente Onda muy aplanada así . Se puede ver que si quisiéramos acceder a ciertos mensajes, sólo podríamos llamar a mensajes para slash uno y acceder a toda la fecha. Lo necesitamos en lugar de tener que, en lugar de tener que aquí arriba acceder a todos los elementos del dentro de la misma Una lista de mensajes, y podría tardar mucho, mucho tiempo en procesarse. Por lo que es importante mirar a través de esta página. Yo proporciono un enlace a esto también, realmente puedas estructurar cuidadosamente tus bases de datos ahora de nuevo en los módulos posteriores que vamos a estar creando. Ejemplo están seguros exactamente cómo voy a estructurar bases de datos en base de incendios también. Pero es importante tener en cuenta los tipos de consultas que vas a estar usando para que estés pensando con anticipación antes de solo crear tu base de datos. 15. Introducción a el almacenamiento de la base con la base con chimeneas: Bienvenido de nuevo. Ahora en este módulo, vamos a estar echando un vistazo al almacenamiento. Es así como puedes subir fotos y videos para usarlos en tu app y da a tus usuarios nuevas formas de interactuar. Por lo que para empezar a hacer click primero aquí Andi, se te mostrará esta información sobre las reglas de seguridad que estarás usando la primera vez abras tu app. Ahora tenemos que decir, lo tiene y vamos a estar investigando estas reglas reales y cómo puedes asegurar todas las cargas hasta en funciones cuando se trata de almacenamiento en un video separado. Entonces por ahora, solo tienes que hacer click. Lo tengo. Entonces seremos redirigidos a esta página justo aquí, que es el panel de control de todos tus archivos subidos para que veas muchos directorios y archivos diferentes en los detalles de esos archivos que han subido, para que puedas hacer carpetas, subir archivos. Andi ve los diferentes cubos que tienes en este plan. A la par de esto, verás estas diferentes pestañas en la parte superior, que es similar a las otras características que ya hemos buscado. Ahora están las reglas. Las reglas de seguridad para el almacenamiento son ligeramente diferentes a las utilizadas en la base de datos, que comenzarán a cubrir más adelante y también es uso, por lo que puedes ver cuánto almacenamiento estás ocupando actualmente. Cuántos objetos diferentes hay en la banda total con esto podría ser útil cuando buscas escalar y ver si hay algún archivo, grande o ocupar más espacio del que crees o necesitamos hacer. Para empezar es saltar de nuevo a Atom Onda. Al igual que con los elementos de la base de datos que estaban utilizando antes para almacenar, realmente necesita asegurarse de importar el almacenamiento de la parte superior aquí, que de nuevo está configurado ya desde un archivo de conflicto. Y luego a partir de aquí, listo para empezar usando este almacén. Y luego también pones un ref un oleaje, pero estamos buscando ayudar a realmente usar y almacenar comandos más adelante 16. Introducción a las reglas de seguridad del almacenamiento de la base con la base con chimeneas: en este video, vamos a echar un vistazo a las reglas de seguridad en el almacenamiento firebase ahora en almacenamiento, las reglas son similares pero ligeramente diferentes a las utilizadas en la base de datos. Ahora bien, este es un ejemplo de cómo se verían las reglas. Estas son en realidad las reglas predeterminadas que se te dan cuando comienzas a usar almacenamiento por primera vez . Entonces esencialmente aquí. Estamos revisando para ver si el servicio es de almacenamiento firebase. Estamos buscando ver en qué cubetas estaban. Este es el bucket predeterminado para este proyecto, y luego haces una comprobación de la ruta real en la que se encuentran los archivos. Esto es lo mismo que la referencia está dentro de las bases de datos. Y luego dentro aquí, puedes elegir si se puede permitir a los usuarios leer para acceder a los archivos o si pueden, ¿ verdad? Entonces si pueden subir y agregar nuevos archivos. Entonces en este ejemplo, solo estamos comprobando si el usuario es realmente buscado. Por lo que si son usuarios no autorizados, pueden leer o escribir archivos en cualquier ruta. Ahora, como vimos en la base de datos, había una serie de formas diferentes en los objetos a los que puedes acceder, como el usuario, i d los nuevos datos que quieres agregar y esto es lo mismo para el almacenamiento de cinco A, pero los objetos solían en realidad bastante diferentes. Por lo que todo está contenido dentro de esta solicitud. Objeto aquí. Entonces si pasamos a los muelles, puedes ver los diferentes tipos de información que puedes obtener en este ejemplo. Es por el recurso real que se está cargando. Entonces para acceder a cualquiera de estos parámetros, diría solicitar y luego adat recurso, no hagas ninguno de estos, uh, uh, en realidad estaba justo aquí. También puedes acceder a thes perímetros también bajo petición por lo que podrías decir request dot orth y luego usar tu i D o token y luego doler Say request stop path y ver el camino al que están tratando de acceder. Entonces como puedes ver aquí dentro, estamos tratando de ver la solicitud punto apagado y luego solo estamos viendo si esto existe. Entonces aquí abajo tengo otro ejemplo que puede usar. Entonces en este ejemplo, tenemos los mismos cheques de hacer la parte superior aquí. En realidad puedes tener uno de estos cheques de nivel superior. Todo necesita estar contenido dentro de esto. Esta declaración me manda abajo Hey, estamos haciendo un chequeo para ver si el camino es forzado a salir. Usuario cuatro Stash usuario I D. ¿ Y luego algo dentro de que algún archivo dentro de ese directorio? El permiso que estamos brindando aquí es para permitir que cualquiera lea. Pero permitimos el acceso correcto. Si el usuario i d para que pueda ver. Ver aquí. Solicitud off dot usuario I d u I d. como vimos en Thea. Los tipos que puedes usar aquí y luego estamos comprobando si esto es igual a use ready. Entonces estamos configurando esta variable de Thea Curly brackets que tenemos alrededor del usuario que d mostrado en el camino justo aquí. Por lo que esto significa que en realidad puedes tener muchas declaraciones F diferentes. Teoh crea diferentes reglas para diferentes áreas dentro de tus cubos de almacenamiento. Entonces de nuevo, si miramos algunos ejemplos más, se puede ver aquí abajo. Por lo que de nuevo puedes ser lo más detallado que ella quiera. Para que pudieras bajar a los nombres de archivo reales. Podrían decir que Ford guarda imágenes y fotos de perfil. Podrías revisar otras condiciones también y realmente crear cualquier cosa que necesites. Entonces, cuando echas un vistazo a estas combinaciones, puedes ver cómo realmente puedes personalizar esto para asegurarte de que tu app sea una segura como necesitas ser 17. Crea y configurar la aplicación desde la línea de comandos: bienvenido de nuevo. Por lo que ahora estamos listos para empezar a crear app que vamos a estar trabajando dentro de este módulo. Entonces para empezar, vamos a entrar en la línea de comandos y trasladarnos al directorio que quieras. Teoh. Almacena esto por dentro y empezamos por crear app usando, crear, crear, reaccionar nativa arriba. Por lo que empezamos con sólo escribir esto comandado y el nombre de esta app va a ser foto feed. Por lo que solo esperamos que esto se procese y solo vendemos todas nuestras dependencias por defecto. De acuerdo, entonces eso es lo creado de todas las dependencias. Tenemos que empezar. Pero antes de pasar a un editor de código para empezar realmente a trabajar en la aplicación, vamos a agregar una dependencia más. Esto va a ser reaccionar Navegación. Esto nos permitirá tener una pestaña son para poder cambiar entre diferentes pantallas. Entonces soy reacio a usar yon adhieren en nuestro show, un comando que también puedes usar, que es si estás usando NPM, que es el empaquetador predeterminado. Por lo que este comando será NPM instalado Dash, dash, save reaccionando navegación. Entonces otra vez, voy a volver a cambiar esto porque estoy usando joven. Acabamos de platicar esto y luego presionar enter. Manténgase en esto agregará el otro paquete que necesitamos usar. De acuerdo, entonces ahora tenemos todas las dependencias que necesitamos para empezar. Entonces ahora solo vamos a abrir nuestro nuevo proyecto dentro de Atom. Entonces solo encuentra la carpeta. Es ahora tenemos un nuevo proyecto abierto dentro de los átomos. Entonces lo que vamos a hacer ahora es realmente crear una nueva carpeta dentro de aquí, así que va a ser ford slash ap cuatro pantallas slash y luego dentro aquí, vamos a crear tres nuevos archivos. Es estos archivos serán feed dot Js upload, doctor. Sí, y perfil Doctor. Sí. Vamos a dejar estos archivos en blanco por ahora. Soy un arma de fuego y luego abrir app. Dodge s en la raíz de nuestro directorio de pies foto. Entonces para empezar las cosas, realmente vamos a crear la navegación para arriba y luego pasaremos a crear realmente una cada una de las pantallas separadas que iban a estar usando. Entonces primero, sólo vamos a importar navegación reacciona. Entonces lo haces así así, Y ahora queremos realmente crear una pila que vamos a estar usando dos. En lugar de este código aquí, realidad vamos a llamar a Main Stack. Entonces lo hacemos definiendo primero la pila principal. Es Esta es una constante que se va a pagar. Sabía Create bottom tap Navigator. Entonces solo haces eso llamándolo así. Y luego dentro aquí, queremos abrir un nuevo soporte rizado como este y luego dentro de aquí, vamos a sumar cada una de las pantallas que tenemos para este proyecto. Entonces eso es Feed sí tiene un objeto vacío por ahora, sube en el perfil. ¿ Qué? Entonces eso es lo que necesitamos aquí hasta ahora. Por lo que acabamos de guardar esto sólo para mantener su progreso. Y ahora vamos a pasar al archivo de alimentación y simplemente dejar de agregar una pantalla predeterminada para esta pantalla. Entonces, para empezar, sólo vamos a importar reaccionar, y luego vamos a importar un número de diferentes componentes de reaccionar nativo también . Entonces sólo vamos a detener una pantalla. Entonces lo haces definiendo clase que el nombre fuera de nuestras pantallas. Esto va a ser pies. Esto se extiende componente reaccionar, y luego aquí abajo, necesitamos realmente asegurarnos de que estamos exportando este nombre de clase justo aquí para que podamos usar esto dentro de la aplicación Js cuando realmente importamos archivo. Por lo que solo escribes las exportaciones por defecto y luego el nombre fuera de su clase. Entonces en este ejemplo , son pies. Entonces si se anuncia sort, esto es todo lo que necesitamos. Simplemente voy a guardar esto y luego copiar y pegar este código para subir y perfil. Sólo vamos a hacer un cambio, que es esta parte justo aquí. Entonces lo vamos a cambiar de alimentación a perfil para la pantalla de perfil y luego subir para la pantalla de subida. Entonces ahora solo necesitamos cambiar realmente esta pantalla justo aquí para usar la pila principal y luego vamos a importar cada una de estas nuevas pantallas que acabamos de crear para que podamos usarlas justo aquí dentro de nuestra pila principal. Es que será un feed, subidas y perfil de nuevo. Entonces, solo ejecutemos esto para ver qué tenemos hasta ahora. Justo después de agregar rápidamente en los elementos correctos justicia que sería pantalla y en el nombre fuera de la importación aquí arriba esto otra vez será alimentado. Entonces solo copiaremos esto para volver a usar esto hecho aquí, solo asegurándonos de que actualicemos cada uno de estos para decir subir y perfil. Ahora se va a ejecutar esto en un simulador para ver lo que tenemos hasta ahora. Solo necesitas asegurarte de que está bien que cuando agregaste reaccionar navegación antes realmente dentro del directorio de feed de fotos que creamos para este proyecto. Entonces, una vez que hayas hecho esto, deberías poder volver a ejecutar el proyecto. Entonces iniciándolo con MPM o joven y deberías estar listo para realmente probar esto. De acuerdo, entonces ahora que tenemos aplicación funcionando, podemos ver que aquí hay un error, pero eso está bien. El motivo de este error es porque en cada pantalla apagada, realidad no hemos dicho nada para regresar aquí. Pero eso está bien por ahora. Entonces en el siguiente video, vamos a ver realmente construir cada uno de estos greens y luego prepararnos para realmente conectar todo y configurar la base de datos que vamos a estar usando para esta aplicación. 18. Agrega componentes básicos a cada pantalla: bienvenido de nuevo. Entonces en este video, vamos a empezar a construir realmente estas pantallas y primero eliminamos este pequeño mensaje de error que tenemos aquí. Entonces el primer paso es entrar en el archivo Feed Doctor es y vamos a primero en en un constructor. Entonces solo vamos a enfriar super con la variable de utilería justo aquí. Y luego solo vamos a agregar una función de render simple. Simplemente nos va a devolver una vista básica ahora mismo. Entonces solo vamos a agregar la función de render aquí así, y luego decir volver luego dentro de aquí, que va a tener una vista básica con el texto que simplemente diría qué página es esta. Entonces para éste, sus pies. Entonces podemos copiar este código aquí dentro, que ha guardado primero esta página. Pero vamos a copiar esto para subir en la pantalla del perfil. Entonces primero, solo voy a cambiar este texto justo aquí en subir para decir subir y perfil para decir perfil. Entonces como puedes ver ahora, esta era se ha ido y puedes ver que tenemos la pestaña están en la parte inferior aquí con feed, upload y profile que en el momento en que el texto está escondido en la esquina aquí. Entonces, solo arreglemos esto rápidamente. Entonces para hacer eso, vamos a agregar en algún estilo en línea al elemento de vista. Entonces en un flex de uno, y luego pondremos justifique centro de contenido Andi un centro de ítems de línea. Entonces solo copiaremos esto para las otras pantallas también. Por lo que puedes ver esto es solo un video rápido para que puedas conseguir que la app aparezca en un simulador aquí antes de que realmente empecemos a construir estas pantallas y probar las cosas más allá. 19. Comenzar para configurar la pantalla de feed: Ahora que tenemos todos nuestros archivos configurados con algunas opciones básicas de visualización y el texto centrado para que podamos ver rápidamente en qué página estamos, vamos a centrar en la página de feed y empezar a construir realmente esto hacia fuera. Entonces lo primero que vamos a hacer es cambiar el marcado que tenemos aquí. Entonces vamos a cambiar este estilo primero. Tan solo para quitar todo aparte de Flex ya que esta vista ahora va a ser una vista padre de toda esta pantalla dentro de aquí. Vamos a añadir otra vista la cual va a actuar como barra de título para esta pantalla. Por lo que voy a añadir algunos empezando a esto ahora mismo. Por lo que queremos Teoh, nuestro primer conjunto de alturas de 70 petting top off 30 Un color de fondo de blanco, un color de borde de gris claro, Un borde inferior ancho de 0.5. Andi, vamos a justificar el centro de contenido en la línea de ítems que nos envían. Bueno, entonces si solo guardamos esto, se puede ver un elemento hazaña ahora está centrado ahora tiene una apariencia más agradable en la parte superior de la pantalla aquí. Por lo que a continuación vamos a trabajar realmente la pantalla fuera de las fotos dentro de un pie de foto. Entonces para empezar esto, solo vamos a bajar aquí y crear otra vista sobre dentro de esta vista, realidad vamos a empezar a planear cómo queremos que aparezcan nuestras fotos. Entonces dentro de esta vista, necesitamos otra vista, y esto contendrá a los componentes de texto. Cuál de ellos mostrará la hora en que se publicó cada foto. Entonces ella por ahora sólo diría hace tiempo, justo aquí. Y entonces este elemento en realidad mostrará al usuario que publicó esta foto. Entonces justo por ahora, digamos, en Rusty. Entonces si guardamos esto, no parecerá mucho por ahora. Pero con empezar a peinar, esto a medida que avanzamos. Entonces ahora quiero agregar otra vista, y esto en realidad va a aguantar el dedo con la imagen real misma. Entonces, ¿en qué tipo de fuente real nos vamos a utilizar aquí también? Entonces mientras estamos en desarrollo, solo vamos a usar algunas imágenes aleatorias de especial. Entonces para hacer esto, solo escribimos en ti soy yo y luego el tu l Que va a estar referenciando. Entonces como queremos tener una imagen diferente cada vez que vamos a estar llamando a esto eres un número de veces, por lo que solo necesitamos asegurarnos de que cada vez sea esperemos único. Entonces haz esto. Vamos a añadir un número aleatorio al final de esto. Por lo que cuando presentas renta de barra tras el final del aleatorio, presenta barra inclinada esto te permite realmente seleccionar el tamaño de imagen. Por lo que vamos a asegurarnos de que sea entre 500 píxeles por 500 o 800. Por lo que alrededor de un número entre esto. Entonces para conseguir este número, simplemente agregamos matemáticas, Doc al azar Y luego multiplicamos esto por 800 más 500. Entonces solo asegúrate de cerrar nuestro así que esto nos debe dar un número aleatorio entre 805 100 para ir con los 500 justo aquí. Entonces solo para terminar esto, solo necesitas agregar un ex justo después de este 500 justo aquí. Por lo que debajo solo necesitamos tener algún estilo básico para esta imagen. Por lo que vamos a añadir un modo de redimensionamiento de cobertura un ancho del 100% en las alturas fuera de 275. Si acabamos de cerrar esto, ahora deberíamos poder ver si esto está funcionando. Entonces solo hay un problema justo aquí justo antes de llamar a matemáticas, no al azar. Necesidad de realmente llamado piso de punto matemático. Andi, encierra esto entre paréntesis también, para que puedas ver que debería verse así. Yo solo soluciono este pequeño problema. Aquí están las imágenes ahora aparición. Por lo que casi terminamos con la construcción de este elemento. Solo necesitamos tener un componente de vista más. Y aquí dentro queremos volver a tener más componentes de texto. Sólo arregla eso. Por lo que esto va a contener la leyenda. Ahí sería donde va el pie de foto. Y luego aquí abajo va a ser si tú también, puedes hacer clic para ver realmente los comentarios que se adjuntan a esta imagen. De acuerdo, así es como se ve ahora mismo en el siguiente video, vamos a darle estilo a esto, si en fervor, para hacer que estos elementos aparezcan uno al lado del otro aquí abajo. Y luego empezaremos a pasar a cambiar esto para que aparezca primero como una lista plana, y solo estableceremos una matriz simple aquí arriba. Ese número de confección de imágenes a la vez antes, bueno, en realidad pasan a conectar la base de datos en realmente construir la APP. 20. Cómo añadir una lista plana a la pantalla de: es otra. Contamos con una pantalla fuera de la página de alimentación. Es hora de lucir un poco mejor. Empecemos a construir realmente sobre esto ahora. Entonces el siguiente paso que vamos a hacer es agregar estado. Entonces todo lo que queremos por ahora es una matriz simple que podamos usar para nuestros pies. Este será foto subrayado pies. Simplemente voy a pasar en una matriz simple, así que solo sé uno s 0 a 4. Entonces cinco elementos en esto y luego queremos Teoh o así al refresco. Y vamos a poner esto, uh, a predeterminado como falso. Y entonces realmente queremos crear una función hecha aquí también. Eso se va a llamar. Siempre que jalemos para refrescar la lista plana, vamos a estar sumando lo siguiente. Entonces vamos a llamar a esta función carga nueva en solo para seguir una buena práctica antes de que realmente utilicemos base de datos natural para esto, vamos a establecer el estado el estado aquí dos veces. Es la primera vez que sólo vamos a cambiar. Yo refresco destruido que es verdad, dice su mientras estamos cargando y entonces normalmente llamaría a la base de datos aquí, así que habría un retraso natural, ligero por lo que habría refrescado primero se ha establecido en true. Y luego cuando los vectores de base de datos hicieran, lo pondría en falso. Pero en este ejemplo, justo mientras estaban en desarrollo. Nos vamos Teoh dijo otra vez el estado sin realmente llamó en la base de datos. Entonces vamos a llamar foto feed de nuevo en el set Una matriz diferente esta vez pasará de los números 5 a 9 así y luego restableceremos Fresh refresh para ser rellenos de nuevo, Así es como cargar nueva función. Entonces ahora realmente vamos a agregar en la lista plana, así que lo vamos a sumar justo aquí abajo, y luego vamos a agregar algunos apoyos directos para esperar esto también. Por lo que el 1er 1 será refrescante. Vamos a poner esto a este punto punto de estado de punto Refrescar que configuramos aquí y luego lo siguiente probablemente quiera usarlo en un fresco. Esta será la nueva función que este 'll adeudará. Entonces dije, esto está bien, eso es como yo. Y entonces realmente queremos poner los datos fuera de esa lista, que será esta matriz de pies de foto justo aquí. Eso es todo lo que necesitamos justo ahí. También vamos a establecer un extractor de claves para que cada parte diferente de la matriz pueda tener sus propias claves únicas. Por lo que yo puse esto ahora también. Entonces lo haces de nuevo, ya no tiene más entre los paréntesis rizadas, y luego dentro aquí qué? Pongo más corchetes y agregarás índice de color del artículo. Entonces literalmente enfriaremos esto para ser índice, solo para asegurarnos de que siempre va a ser único. Pero para que esto funcione correctamente, tenemos que usar esto como una fuerza. Por lo que sólo convertimos este número en una cadena como esta cosa final. También vamos a establecer algún estilo predeterminado al componente de lista plana real también. Y de esta manera, motas de uno y un color de fondo, que apenas será octavo. No. Entonces solo el código hexadecimal de un Y entonces realmente vamos a renderizar estos elementos fuera de datos también . Por lo que hacemos esto solo hablando de elemento render. Y luego abrí de nuevo los corchetes rizados. Los corchetes normales, naturalmente, corchetes rizados de nuevo, y queremos llamar al ítem en índice, como lo hicimos antes. Y entonces sólo queremos abrir corchetes acaba de golpear. Tan fuerte está dentro Aquí es donde vamos a poner los componentes que desea mostrar para cada elemento dentro de nuestros datos. Entonces para nosotros, es será cada uno de los elementos en array aquí arriba. Entonces si vamos a estar usando los componentes que hicimos en los videos anteriores así que solo estamos dirigidos desde ahí y pegarlos aquí, Así que estamos casi listos ahora, solo necesitamos agregar realmente la clave a la vista aparente fuera del off the componentes aquí . Entonces para hacer esto, solo estamos tecleando en clave igual índice. Entonces si guardamos esto ahora, veamos qué tenemos. Entonces una última cosa, obviamente es que siempre estuvimos en realidad para cerrar una lista plana. Entonces lo haces solo poniendo en fuerte slash y luego cierras lo mismo que con los judíos para el componente de imagen que usamos Harris. Bueno, entonces si solo agregamos eso y luego guardamos, puedes ver ahora tenemos imágenes apareciendo, así que debería haber cinco de thes Tenemos 12 tres completos y cinco. Y si actualizamos esto, esto llamará a nuestra carga nueva función e imágenes cambiando también. Entonces Esto está bien en lo que va del siguiente video, vamos al estilo de Addis. Ya lo mencionamos antes. Entonces para esto por el tiempo atrás en el nombre de usuario en la leyenda en los comentarios. Y entonces vamos a estar listos para empezar realmente a buscar agregar las conexiones a la base de datos y permitir a los usuarios tener realmente sus propios perfiles y finalmente salir a subir sus imágenes. Entonces esto es lo que vamos a estar investigando en los próximos videos. 21. Agrega un estilo a nuestra Lista de planos: Entonces justo antes de empezar en las conexiones de base de datos, vamos a agregar un poco más de estilo al archivo ah fi Js. Entonces, solo retrocedamos esto. Entonces tenemos un poco más de espacio, así que vamos a estar trabajando con los componentes dentro de este elemento de render justo aquí. Entonces el 1er 1 que queremos usar es esta vista justo aquí. Entonces vamos a agregar un estilo y luego el inicio que quieres actuar es, primero un látigo al 100%. Queremos que o mosca se oculte. Vamos a sumar un margen inferior de cinco. Vamos a justificar el contenido. Esto se va a establecer al espacio entre yo solo arregle esto aquí el espacio entre un ancho inferior de borde de uno y un color de borde de genial. Eso es lo que queremos para este elemento justo aquí. Sólo arreglemos eso Tan seguro esto y entonces también vamos a darle estilo a este elemento debajo justo aquí. Por lo que de nuevo tuvimos estilo la prop estilo cada vez agregamos relleno de cinco con otra vez de 100%. Vamos a establecer la dirección flex para que sea fila y vamos a justificar el contenido de nuevo. Y eso también será espacio entre. Entonces si guardamos esto justo en un común justo después de poner y luego recargar, vale, para que puedas ver con este último cambio, se aseguró de que el tiempo atrás en nombre de usuario a ambos lados de la pantalla. Entonces la próxima vez que voy a añadir es para el pie de foto y comentarios aquí abajo. Entonces como se puede ver, dos iniciales se aplican a todos estos elementos. Entonces todo lo que queremos hacer ahora es simplemente desplazarnos hacia abajo a este texto de aquí. Entonces este el componente de vista que está justo por encima de esto, vamos a tener empezando aquí un oleaje. Por lo que se establece un relleno de cinco. Y luego para cada uno de estos elementos de texto, luego para este elemento de texto aquí abajo, vamos a agregar margen de estilo top de 10 y sólo vamos a alinear texto para ser centro. Entonces si acabamos de tener esta letra mayúscula aquí, guardar y ahora echar un vistazo a lo que tenemos, Así que esto está empezando a lucir un poco mejor ahora, así que tenemos una lista plana trabajando con el AP inllamativo, yo solo Por ahora, podemos tirar para refrescar para cambiar la imagen. Es que se muestra. Y entonces tenemos aquí una exhibición que necesitamos antes de poder seguir adelante. Esto es todo lo que necesitamos antes de poder empezar realmente a agregar las interacciones de la base de datos, configurar su cuenta firebase en Ben, finalmente agregar nuestro perfil y subir pantallas para que los usuarios puedan realmente interactuar y usar la app, eso es lo que vamos a estar trabajando en los próximos videos. 22. Crea proyecto en Firebase y conecta con nuestra aplicación: Ahora estamos listos para crear realmente las conexiones a la base de fuego para que podamos configurar una base de datos y todo así. Entonces para empezar, solo voy a abrir esta pestaña a un lado otra vez y crear una nueva carpeta en nuestro directorio. Esta foto se llamará Conflicto. Y luego dentro de aquí, vamos a crear un nuevo archivo llamado conflict dot Js the case. Podemos llevar este archivo vacío por ahora. Y luego vamos a abrir un navegador e ir a la base cinco. Voy a dar click en Agregar Proyecto en. Vamos a crear un nuevo proyecto aquí dentro, que se va a llamar foto pies. De acuerdo, entonces ahí es donde escribes aquí. Simplemente toma este cuadro en la parte inferior y luego haz clic en crear proyecto. Entonces solo queremos dar click a casa. Continuar. Entonces quieres ir a tu configuración aquí arriba, configuración del proyecto, y luego hacer clic en este botón aquí abajo que dice en firebase a tu aplicación web. Entonces esto es muy similar a lo que hicimos en el módulo anterior. Entonces solo quiero copiar todo esto y luego volver a pasar a nuestro átomo. A adentro vienen a recoger hija. Sí, vamos a pegarle esto a las mujeres que van a hacer un par de cambios. Entonces estamos cambiados. Var aparece a constante. Entonces en la parte superior, necesitamos importar base de fuego como So Now solo necesitamos exportar una serie de variables diferentes de este archivo de conflicto. Por lo que el 1er 1 será el objeto de chimenea en general, y estamos exportando. Esta es sólo la letra f. Y quieren exportar sólo la base de datos y luego sólo las funciones de autorización. Y luego finalmente, sólo el almacenamiento. De acuerdo, entonces ahora que hemos hecho esto, estamos casi listos para poder usar la base de fuego en. Pero primero, en realidad tenemos que agregar las dependencias firebase en la línea de comandos. Por lo que para ello, desea navegar a su directorio de fotos pies utilizando una línea de comandos con el siguiente comando. Es así como instalas las dependencias usando NPM o como uso puedes usar Yon en el comando para Yang sería bostezado en firebase. Continuar. Basta con presionar enter. De acuerdo, entonces ahora que tenemos todas las dependencias, necesitamos instalado en eso, tenemos un archivo de configuración configurado, estamos listos para pasar al siguiente paso 23. Base de estructura para el proyecto: bienvenido de nuevo. Entonces en este video, vamos a empezar a planear nuestra base de datos y en realidad configurar algunas entradas de ejemplo en nuestra base de datos para que en realidad puedan reemplazar lista plana y usar nuestra información de defectos de base de datos en lugar de solo datos usados de sin rayar que hemos codificado duro. Esto reemplazará la matriz que tenemos estado en este momento. Entonces, de todos modos , ahora mismo, vamos a trabajar en la estructura de mi base de datos. Entonces solo voy a escribir unas notas aquí solo a planetas fuera un poco. Por lo que las principales partes de nuestra base de datos serán los usuarios. También tendremos las fotos y finalmente comentarios para que los objetos del usuario sean primero. En realidad lo ordenará el usuario. Yo d. Y luego dentro aquí tendremos un objeto que incluirá cosas como teatros, correo electrónico, dirección. Vamos a mover esto un poco. Por lo que esto contendrá cosas como la dirección de correo electrónico. El nombre puede ser ese nombre de usuario y como una imagen de perfil dice un avatar, Así que eso debe hacer para el objeto de los usuarios. Y luego para las fotos, esto será muy similar. Lo vamos a ordenar por la votación por la foto que d y luego dentro de aquí sólo usaría el mismo formato para éste. Por lo que queremos mirar cosas como el autor, yo d Esta será la idea habitual para corresponder con este Andi. Cualquier título que la imagen pudiera tener la marca de tiempo desde cuando se publicó la imagen y luego solo tu l a la imagen. Entonces para empezar, si esto es todo lo que necesitábamos para las fotos y luego de manera similar, los comentarios serán bastante similares a esto. Entonces tendría un objeto diferente para cada foto I d. Y luego dentro de aquí tendríamos una lista de objetos para los comentarios para cada una de las fotos. Por lo que este sería el formato para esto sería cuatro slash foto i d. Entonces vienen cuatro slash en i d Pero luego en el pelo, tendrían opciones. Por lo que esto incluiría en primer lugar, el autor. Esto correspondería de nuevo al usuario I d. Y entonces tendríamos un sello de tiempo. Algunos llamarían a este post it, y luego el comentario real en sí. Entonces, para empezar, base de datos debería verse algo así. Entonces ahora vamos a entrar en la base de fuego y en realidad estructurar esto y mostrar algunos ejemplos de cómo se ve este árbitro en la base de datos. Entonces vamos a ir primero a nuestro feed de fotos en un proyecto firebase, clic en base de datos y luego no vamos a usar la tienda Cloud Fire en este momento solo porque aún está en beta. Vamos a desplazarnos hacia abajo y utilizamos la base de datos en tiempo real. Así que basta con hacer click en crear base de datos. No te preocupes por las reglas de seguridad por ahora. Nos fijamos en esto más adelante, así que basta con hacer clic en iniciar en modo de prueba y luego activar. De acuerdo, entonces ahora tenemos esa base de datos creada. Sigamos adelante y en realidad empecemos a construir algunos datos de ejemplo en una base de datos. Simplemente podemos echar un vistazo a la estructura y luego probarte en la U. Y más adelante. Entonces, para empezar, vamos a crear el objeto de los usuarios en. Entonces importaremos directamente un ejemplo. Usuario como este en el interior aquí tendrá cada uno de los valores que mencionamos para el usuario, por lo que simplemente comienza con nombre y luego el nombre de usuario. Ve cómo se ve poco más en símbolo delante del correo electrónico Andi y luego una foto de perfil. Usemos un servicio que solo pueda proporcionarnos una foto de perfil aleatoria para empezar. De acuerdo, así que vamos a hacer clic en, terminarlo, Um, y en por ejemplo, objeto de usuario. Entonces aquí vamos. Tenemos tres usuarios, una entrada de ejemplo aquí y luego los datos para este usuario. Entonces lo siguiente que queremos crear es una foto de ejemplo. Esto será debajo de las fotos, y luego dentro de aquí, tendremos una foto I d. Y luego otra vez dentro de aquí tendrá las entradas reales para nuestras fotos. Entonces dos cosas aquí era a menudo es menos realmente hacer este enlace con ese usuario. Entonces tendremos un ejemplo. Leyenda Después de esto tendrá la marca de tiempo que se publicó la foto y luego finalmente la chica fuera de la imagen. Por lo que ahora acabo de copiar un Majoro de Splash sólo por este ejemplo. Entonces aquí hay una foto. Entonces tengo las fotos objeto que la foto que d y todos esos datos para esto. Gracias. El caso de lo último que vamos a crear ahora es un ejemplo Objeto Coming. Entonces esto serán comentarios y luego insight aquí será la foto que d y luego dentro aquí estará el primer comentario, y luego otra vez aquí dentro tendrá los datos reales para cada comentario. Por lo que esto se ofrecerá. Entonces esta será la idea habitual que hemos establecido aquí la marca de tiempo en la que se publicó finalmente comentario real en sí mismo. Está bien, está bien. Entonces si hacemos clic otra vez y solo echamos un vistazo a este, tenemos un tema de comentario y luego el objeto real para las fotos que nosotros uno de thes para cada imagen en luego los comentarios dentro de estos objetos aquí. Entonces así es como se va a estructurar la base de datos. Obviamente, los usuarios se enlazarán con esa lista de autenticación, así que cuando acabes de país iniciar sesión, Pero por ahora, esto es lo que necesitamos realmente entrar en la pantalla de aplicaciones de cambio para que no solo estemos jugando elementos de una matriz en realidad estaban recuperando todos los datos de nuestra base de datos es que vamos a estar investigando en los próximos videos 24. Comienza para hacer llamadas a la base de la base para obtener información: bienvenido de nuevo. Entonces ahora que tenemos una estructura de base de datos planeada en algún ejemplo, entradas agregadas en realidad podemos volver a Teoh, coeditor en el simulador y reemplazar los elementos codificados duros en la lista plana aquí, donde estamos usando esta matriz en el top para comprobar realmente la base de datos y tirar de la información desde aquí. En eso vamos a estar trabajando en este video. Por lo que para empezar, necesitamos importar en archivo de conflicto para que podamos conectarnos y usar una base de datos. Entonces para importar, esto es lo mismo que hicimos en los módulos anteriores. Por lo que solo seleccionamos los elementos que exportamos desde el archivo de conflicto. Entonces solo necesitamos asegurarnos de que obtenemos el camino correcto. Por lo que volver a directorios en la foto come pick en el archivo comfort. También queremos hacer algunos cambios a nuestro estado inicial también. Entonces vamos a cambiar este feed fotográfico para que sea una matriz vacía. Queremos refrescante para mantenerse igual o más fresco igual. Vamos a añadir otro elemento para estar cargando, y será cierto. Para empezar, también vamos a agregar una nueva función que va a llamar a los componentes sí montaron. Esto se va a ejecutar a medida que se abra la aplicación. Basta con revisar esa primera letra ahí. Entonces aquí, queremos llamar a una nueva función que vamos a crear justo ahora. Eso realmente cargaría el feed de una base de datos justo aquí. Entonces ahora vamos a crear esta función de alimentación de carga. Entonces lo primero que vamos a hacer es reiniciar los estados así encendidos, pero también ir Teoh estableció una variable, que va a llamar así. Y eso va a ser igual a esto porque vamos a estar haciendo una base de fuego recuperada, que es cuando haces eso, en realidad puedes acceder a esto. Todavía necesitamos una forma de acceder a las diferentes funciones sobre el estado. Nada como esto. Entonces por eso vamos a estar creando esto muy bien. Justo aquí. Y luego podríamos directamente en Andi, hacer que sea fresco para realmente buscar las fotos del elemento de fotos en nuestra base de datos. Entonces empieza por teclear en base de datos, que importamos aparecen , Déjame poner el ref , que son fotos, y luego queremos pedir las fotos que vamos a estar buscando para la fecha, fueron publicadas. Por lo que miramos más adelante en esto. Tenemos múltiples fotos en nuestra base de datos, pero por ahora, esto funcionará. ¿ De acuerdo? Con sensatez. Pídalo. Queremos recuperar estos datos una vez, por lo que no se actualizará cada vez que un nuevo elemento esté en ello para estar con. Y luego completamos el resto fuera. Entonces competimos el resto fuera de la función aquí. Entonces aquí, obtendremos los resultados de esta consulta. Entonces primero hay que revisar primero a mí para comprobar si alguna foto fue encontrada realmente en esta base de datos . Entonces lo hacemos comprobando que el valor fuera de la instantánea que definimos aquí, si el valor de esto no es conocido o vacío. Entonces simplemente decimos si los datos existen, entonces lo configuramos como una variable que podemos usar. Y luego puede continuar y usar esto a lo largo de una función. Es lo que vamos a hacer a continuación, entonces en realidad se mira a través de todas las fotos que regresaron. Antes de hacer eso, realmente vamos a hacer una conexión con esta foto pies parte del estado justo aquí. Así es como vamos a hacer eso Así como pueden ver, estamos llamando a eso aquí, que definimos aquí y allá estaban accediendo al estado como lo harías normalmente y luego foto pies. Por lo que estamos usando esto más adelante para actualizar realmente el estado con cada nueva foto que obtenemos de la base de datos. Entonces ahora estamos listos para mirar a través, así que lo hacemos diciendo cuatro foto en datos. Entonces lo que esto haría es por cada parte de los datos que definimos justo aquí, cada elemento en este objeto que se devuelve, queremos definir esto como foto, que luego podemos usar. Entonces por ahora, esto realmente lo pondría como foto Ejemplo idea. Se ejecutaría una vez. Pero si tuviéramos múltiples entradas insight, esta parte, esa base de datos, podría ser foto 81 23 etcétera. A medida que avanzamos tres días para la ventaja Ahora, había dentro de aquí. En realidad podemos establecer los datos de esta foto en su propio objeto. Entonces lo hacemos definiendo el nombre del objeto, solo las opciones de objetos fotográficos de oídas. Y luego accedemos a ella por datos, y luego simplemente pasamos en foto. Esta sería la idea que mencionamos hace un minuto. Por lo que ahora necesitamos realmente hacer otra base de datos llamada. Esto nos permitirá acceder a la información del usuario Al usar esta justicia de autor, esta será devuelta en su objeto. Nos acabamos de poner. Entonces podemos ir a acceder a más información para este usuario justo aquí. Por lo que es seguro El tiempo copiará este mismo comando para usar en la parte superior y sumado justo aquí abajo, asegúrese de cerrar la oficina Bueno, y entonces sólo tenemos que cambiar esto hoy. El referente como usuarios y luego no necesitamos pedir esto, pero tenemos que desprender a un niño de la oferta. I d. Entonces este es el autor del objeto fotográfico. Entonces eso significa que aquí dentro tendrá acceso al nombre para mostrar y usar el nombre en una foto de perfil fuera de este usuario. Entonces en esta etapa, podemos empezar a armar realmente los diferentes aspectos fuera de esta foto y adam a una foto pies a ellos, ser mostrados dentro de la lista plana. Eso así vamos a escribir a continuación. Entonces vamos a estar usando un empujón aquí que en realidad empujó un objeto a una matriz de alimentación de fotos . Vamos a poner la foto yo d off que usamos aquí arriba dijo el conde de la Imagen, el capitán de la imagen y la Timestamp de cuando se publicó la imagen y finalmente la oferta. Por lo que aquí usaremos el nombre de usuario de los datos. Pero antes de que podamos usar eso, en realidad tenemos que definirlo de nuevo. Tan similar a lo que hicimos aquí arriba, Copiaremos esto y estableceremos un cheque justo aquí para que nos aseguremos de que los datos del usuario realmente aparezcan. Sólo tenemos que inventar esto un poco justo aquí y entonces eso debería ser todo lo que necesitamos. Por último, también íbamos a establecer el estado. Esto nos permitirá contar eso a pantalla. Y ya no refrescante en que la carga se nos ha detenido amigos, porque hemos devuelto al menos un artículo a una foto pies por lo que casi sin trabas, es tener unas cosas que poner en orden, en realidad para comprobar los errores que se ocurrieron cuando hacemos esta llamada a la base de datos . Entonces bajamos aquí a un cierre esto apagado. Esto se puede comprobar en átomo con sólo hacer clic en los caracteres. Simplemente escucha y ve dónde te corrigen en la parte superior. Esto significa que estamos en el correcto justo aquí. Entonces vamos a ir justo antes de cerrar esto y teclear, Doc, En realidad vamos a atrapar cualquier error. Apenas a Y si hay algún problema, sólo los miramos a la consola y la cerramos así. Y sólo asegúrate de copiar esta línea. Lo voy a usar de nuevo para el cheque de encerramiento real aquí. ¿ Qué? En realidad tiramos en las fotos. Por lo que remplazamos eso ahí. Entonces ahora que hemos escrito esta función, en realidad vamos a subir al componente que monta que usamos antes y asegurarnos de que se llame a estas funciones cuando cargemos la pantalla. Eso es todo por este primer video. En el siguiente video, realidad vamos a guardar esto. Andi, asegúrate de que estamos usando los datos que regresamos de la base de datos aquí para que se muestren lo suficiente. Esa lista 25. Actualiza nuestra lista de datos de usuarios: bienvenido de nuevo. Entonces lo primero que tenemos que hacer antes de guardar progreso es desplazarnos hacia abajo y encontrar la función de carga nueva en su ir a reemplazar esto por una función cool a nuestra carga de alimentación en su lugar. Para que cuando nos refresquemos, actúe como lo hicimos antes de que realmente se enfriara, función del destino del Señor. Entonces, ¿qué bajo es copia? Tan cool. Hicimos esta función antes y simplemente pegarla aquí. Ahora podemos ahorrar en, en realidad abrir, arriba . Entonces como puedes ver ahora, sólo tenemos un artículo que se muestra. Y si actualizamos esto, se actualizará en pantalla otro elemento. Pero lo que habrás notado hasta ahora es que esta imagen es diferente cada vez que nos refrescamos. Ahora, esto se debe a que abajo en la lista plana real hecha aquí, seguimos usando imágenes codificadas de meses Plesch, junto con esa experiencia justo aquí. Lo que necesitamos hacer es realmente asegurarnos de que estamos usando los datos de este objeto de ítem justo aquí. Onda, necesitamos dedo del pie, obviamente también. Asegúrate de que estamos comprobando para ver si la parte de carga del estado que configuramos aquí realmente se está cargando o no. Por lo que vamos a sumar una serie de cheques antes de los medicamentos de lista plana para decirle a la función de render qué mostrar realmente en la pantalla. Entonces ahora vamos a empezar por distraer primero estos cheques. Por lo que la primera comprobación sólo va a ser una variable de carga en los Estados. Entonces vamos a comprobar si la carga es verdadera en si es verdad, no mostramos algún texto solo aquí para mostrar que la pantalla se está cargando y solo estamos agregando algo estilo básico. Apenas un centro, este texto en la pantalla. Está bien en. Si la carga es falsa, queremos entonces mostrar una lista plana. Entonces, para hacer esto solo moverá este elemento aquí abajo, también, debajo del código de lista plana justo después de este ataque de cierre aquí. Entonces ahora solo estamos ajustando su espaciado. Justo aquí ya podemos guardar esto y deberíamos ver brevemente el texto de carga en la pantalla. Entonces ahora que tenemos una lista plana dentro de esta comprobación de carga, realidad podemos actualizar cada una de estas piezas de información que deberían venir de la base de datos para ser realmente de la base de datos mediante la utilización del objeto ítem justo aquí. Entonces el 1er 1 que vamos a hacer es la imagen misma. Entonces es hacer esto seleccionará el Ural. Estamos referenciando dedo del pie en Splash solo a en. En lugar de esto, sólo escribiremos el artículo. ¿ No estás fuera lo que enlaza con el objeto justo aquí en el euro Parfitt justo aquí. Entonces el siguiente es el tiempo hace justo aquí. Entonces vamos a cambiar esto. Entonces solo sé ítem No lo publiques en la misma cosa otra vez con el nombre del autor. Este será el ítem No autor el. También el título dice que el ítem no subyace. Entonces si guardamos esto, se puede ver ahora que esta información viene directamente de la base de datos. Entonces si fuéramos a ir a nuestra base de datos y cambiar el título así y guardarlo y luego volver a nuestra app en un simulador y un fresco, puedes ver esto se actualiza de inmediato. Por lo que esto hubiera pasado en vivo si hubiéramos utilizado la otra opción de base de datos que estábamos mirando antes. Pero como hemos utilizado el antaño llamado en lugar de cambiarlo en datos cada vez que un dato que agregó o cambió excepto en la base de datos porque se negó una vez esto significa que cuando actualicemos , va a buscar la información más reciente para nosotros. Por lo que acabo de cambiar esto de nuevo, y luego si estuvimos frescos de nuevo, se puede ver que está actualizado. Entonces este es el aspecto de Stein ahora mejor. Es más lo que estamos buscando, pero todavía hay un par de temas que tenemos que resolver. Entonces si miras aquí para el tiempo atrás, puedes ver que es sólo una marca de tiempo. Queremos cambiar esto para realmente mostrar un mucho más bonito para mirar aquí un tributo. Entonces algo, por ejemplo, 15 minutos, hace una hora, hace un día, esto sería más fácil para el usuario entenderlo. Entonces primero, ¿qué? Se va a escribir una función simple que puede convertir esta marca de tiempo en un ex más humano, legible va En estas funciones justo aquí van a ser dos funciones que necesitamos crear. Uno de ellos convertirá la marca de tiempo en el tiempo real atrás. En la otra función solo sería detectar si necesitamos agregar un s. Entonces, por ejemplo, si hace sólo un minuto, no hacemos Adam s pero si es hace dos minutos. Burrito al lado del final. Tan solo una función simple. En primer lugar para comprobar esto. Entonces aquí, literalmente, sólo iban a decir que era un regreso. Un tipo este sólo estaba mirando al frente. Andi más regreso? Sí, un tipo. Está bien. Y entonces esto se usará en su función Alrededor de dos en este momento. Por lo que esto no se recuerda convertidor de tiempo. Esto tomará la marca de tiempo, y luego vamos a añadir una función aquí. Entonces lo que necesitamos hacer primero es en realidad un tiempo de signo para volcar en un formato de fecha javascript, y luego vamos a convertir este formato de fecha en dos segundos. Por lo que primero usará un sello de tiempo aquí arriba y lo convertirá en un formato de fecha. Y ahora vamos a crear, uh, uh, esto Vamos a usar este formato de estado que configuramos aquí y convertirlo en segundos. Por lo que esto nos mostrará cuántos segundos hace este sello de tiempo es de la fecha de hoy aquí mismo. Escuchar arreglar esto en realidad se debe quitar. Entonces eso es lo que tenemos que hacer para convertir esto en segundos. Ahora que tenemos el número de segundos atrás que se hizo la marca de tiempo. Ahora necesitamos hacer una serie de comprobaciones para ver si este número de segundos es igual. Dos años, días, meses, etcétera. Entonces primero comprobaremos cuántos años. Entonces para ello, dividiremos segundos por el número de segundos en un año. Así que solo asegúrate de hablar mal este número. Por lo que es 315 36000 Esta variable ahora nos dirá cuántos años atrás eran los segundos Así que justo ahora comprobamos si Intervalo es genial para ellos uno. Y si está bien, entonces devuelve el número y después de un sitio, por lo que podría ser de un año o dos años. Es un realmente para comprobar realmente si necesitamos hacerlo. Agregar s de los extremos es donde entra la función de verificación plural. Y luego nos limitamos a hacer una pausa en el intervalo. Justo aquí. Esto podría regresar un año o dos años. Entonces ahora necesitamos actualizar el intervalo aquí ya que ahora estamos buscando ver cuántos meses por lo que este número será a 59 Así que 000 para revisar la ortografía aquí arriba. Y luego volvemos a hacer exactamente lo mismo. Entonces copia esto. Pegado debajo. Queremos cambiar esto a partir del año dos meses. Entonces vuelve a ser el mismo proceso. Copia esto. Lo pegamos, Actualizamos número de segundos. Entonces para este, estamos buscando días. Entonces eso sería 86400 Así que cambiamos este dos día y luego volvemos a copiar. Cambia este 23600 ¿Y cómo? Y entonces finalmente podríamos volver a estar basados. Cámbialo a 60 al minuto. Y también queremos hacer un regreso final aquí abajo. Cuatro segundos. Entonces si es menos de un minuto, entonces bajará hasta aquí. No estoy en segundo lugar, pero tenemos que cambiar ligeramente esto. Entonces no quiero usar la variable de intervalo aquí o simplemente decir segundos de piso matemático y luego también en lugar de pasar el intervalo, justo aquí pasaría segundos. De acuerdo, así que vamos a probar esto ahora. Pero justo antes de eso, necesitamos que Teoh actualice el post It, uh, llame aquí para usar realmente esta nueva función. Entonces es un convertidor de tiempo ese doc, y luego pasamos en la marca de tiempo justo aquí, así que Si guardamos esto, puedes ver ahora esto se actualiza para decir hace tres días. Ahora debes asegurarte de que la parte publicada de la base de datos aquí sea en realidad una marca de tiempo válida . Puedes encontrar uno de estos yendo a buscar en Google la marca de tiempo UNIX y dar click en este punto de marca de tiempo UNIX. Y puedes teclear la fecha y hora para crear una. O simplemente puedes obtener el tiempo actual justo aquí. Y si pegas esto en, entra Volver al simulador. Refrescar. Ya puedes ver esto es hace 14 segundos. Esto funciona muy bien y es una función simple que puedes usar para realmente hacer tus fechas. Y el tiempo es mucho más legible dentro de Europa. Entonces en el siguiente video, vamos a arrancar Teoh, llevarnos aún más allá. Por lo que vamos a empezar a agregar en la autenticación de usuarios base de datos segura para que realmente tengamos reglas de seguridad aquí y luego empezar a pasar a realmente subir fotos sobre empezar a buscar en los comentarios también 26. Agrega reglas de seguridad a la aplicación (parte uno): Bienvenido de nuevo en este video, vamos a empezar a asegurar la aplicación. Entonces lo primero que tenemos que hacer es pasar a la base de incendios, ese tablero, ese tablero, ir a base de datos y dar click en reglas. Entonces, por el momento, tus reglas se verán algo así. Entonces lo que vamos a hacer ahora es realmente movernos a través de cada una de las diferentes partes de los datos en nuestra base de datos. Entonces utilizo nuestras fotos en los comentarios sobre que vamos a buscar para asegurar estos. Por lo que los únicos usuarios derechohabientes pueden acceder a éstos cuando se les debe otorgar acceso. Entonces, empecemos por mirar las fotos, así que vamos a quitar todo esto por ahora. Entonces primero solo agregamos en una nueva línea aquí llamada fotos, límpialo así. Ahora, cualquiera debería poder leer fotos de sus encerrados o no, pero necesitamos asegurarnos de que los usuarios solo puedan publicar fotos que irán a su propio usuario. Yo d. Entonces te mostraré lo que esto significa ahora. Entonces otra vez, por ahora, por las cañas, uh, permiso. Vamos a decir comercio, pero tenemos que hacer más cheques para quién puede realmente publicar datos. Entonces vamos a hacer algunas comprobaciones más ahora para ver si deberías poder publicar o justo en este el camino aquí o no. Entonces lo primero que necesitamos decirte es crear un nuevo objeto por dentro aquí en la variable fuera de esta esta será una foto, yo d Entonces porque hemos hecho una variable, ahora podemos usar esto en consultas. Entonces lo primero que vamos a poner aquí es igual de más comentarios y podemos ver qué estamos haciendo. Cuando volvemos a mirar esto en el futuro, podemos referirnos fácilmente a lo que hemos hecho antes. Esto solo significa que solo puedes escribirlo o leerlo si eres el autor de esta foto. Entonces ya ves a lo que me refiero ahora. Entonces al poner en la comisión de derechos que abramos esto, vamos a hacer un cheque para ver si el usuario yo d coincide con el cuarto yo d de este dato. Por lo que se ve algo así. Por lo que esta ruta, muy bien vestida para acceder, es la raíz de los datos. Entonces si hemos sido una nueva pestaña aquí solo tienes que mirar los datos al mismo tiempo y miramos dentro del objeto de fotos. Entonces aquí tenemos la foto I d. Y luego citó como el autor. Por lo que de vuelta por aquí, podemos ver que se metería en ruta que las fotos de niños. Entonces, nuevo, este es el objeto principal justo aquí. Y luego estamos buscando al niño dentro de aquí usando a variable que hemos configurado aquí. Entonces esto estará revisando si está dentro de esta foto real i d. Pero dentro de esto, vamos a buscar al autor, y así quiero obtener el valor de esto. Entonces simplemente accedemos a eso así, y luego comprobamos para ver si esto es igual a off use. ¿ Listo? Entonces en esto, sí solo, esto solo te permitiría publicar o editar o escribir cualquier dato dentro de esta ruta Justo aquí. Si el valor off author es igual a tu autorización, estás usando derecho. Básicamente. Entonces esto significaría si publicara esto en esto es mi uso listo. Entonces puedo editar estos datos. Eso es editar, Pero también necesitamos asegurarnos de que si estás agregando nueva información, esto también coincida con la misma consulta. Entonces hacemos esto por creo que estos justo aquí, que básicamente significa todo. Entonces si esto es cierto o nuevo data dot child el autor Encuéntrame desplazamiento por aquí. Entonces este nuevo objeto de datos justo aquí Esto te permitirá consultar el objeto que estás escribiendo esta ruta justo aquí. Entonces podemos acceder a esto tal y como podemos con la variable raíz justo aquí para el objeto de grupo . Entonces, ¿qué? Estamos haciendo un chequeo para que él mire dentro de estos nuevos datos, y estamos buscando ver si tiene dentro un niño llamado autor. Entonces vamos a obtener el valor de esta Onda. Simplemente comparamos esto con el uso del juramento derecho. Entonces esto es lo que estamos haciendo justo aquí, que piensa pero un más tranquilo al final de esto. Entonces solo para volver a correr a través de él, el usuario puede derechos Eso es editar o publicar nuevos datos. Si el autor existente i d dentro de la foto I d. Entonces para esta ruta es igual al usuario, d off están bloqueados en usuario. O si el autor fuera de los nuevos datos en los que están publicando, cuatro tan iguales al usuario que está encerrado. Usaron el día correcto, así que esto podría sonar complicado, pero si lo desglosas así, es Es realmente bastante simple. Entonces eso es lo que debería pasar si pudieran escribir o editar. Y así va a hacer una revisión más aquí dentro. Esto será para el propio autor en realidad. Entonces haz un nuevo objeto solo a Onda. Tenemos que hacer un número comandando aquí llamado Validates en este. Solo vamos a hacer un cheque para que no esté sumando en esto o solo aquí. Entonces también vamos a estar buscando un nuevo dato y luego solo el valor y comprobar que esto sea igual a la escritura de uso o. Entonces de nuevo, este tipo de se explica por sí mismo y realmente no debería ser necesario, pero lo mejor es doble comprobación. Entonces esto sólo significa en el objeto autor. Por lo que dentro de fotos, foto que d y luego ofrezco. Esto sólo puede validar si los datos que se agregan en este Por lo que los datos para la oferta son iguales a su uso escritura. Entonces esto básicamente significa que no puedes hospedar fotos en nombre de otra persona. Entonces eso son fotos. Eso es todo lo que necesitas para las fotos parte de las reglas de seguridad. Lo siguiente que tenemos que comprobar es el objeto de los usuarios reales. Entonces esto es para todos los datos del usuario. Entonces lo que queremos tener aquí es la única persona que te converge, toda la información del perfil. Entonces incluir direcciones de correo electrónico y cosas así es sí, del uso de sí mismos. No pueden ver las direcciones de correo electrónico de otras personas ni nada por el estilo. Por lo que necesitamos comprobar a qué tipo de datos pueden acceder realmente los usuarios. Por lo que la única información pública que queremos compartir para cada usuario es ahí nombre. Utilizan el nombre en su foto de perfil. Pero si es tu propio perfil, puedes leer a la derecha para que puedas editar tu perfil cuando, Si quieres, es menos justo estos afuera ahora también. Entonces otra vez, incursión. Si tanto mi día en realidad, antes de que hagamos eso, necesitamos que entres aquí como lo hicimos para la foto I d Así que entramos en la idea del usuario justo aquí, creamos un nuevo objeto, y luego vamos a hacer un comprobar para leer. Entonces, de nuevo, esto es bastante simple y directo, por lo que se les permite leer. Si ellos usuario yo d es igual a este uso listo para esta ruta, y solo estamos copiando y pegando esto para la comisión correcta. Por lo que nuevamente puedes editar tu propio perfil. Vamos a hacer algunos cheques más aquí para los diferentes aspectos. Queremos ser públicamente visibles. Entonces esto es usar el nombre, y así para usar el nombre leído. Es cierto. Por lo que aunque no sea tu perfil, puedes ver que usan el nombre. Simplemente copia y pega esto para el nombre en la imagen de perfil también. Está bien. En el primer día. Lo último que necesitamos comprobar es Theo la dirección de correo electrónico. Simplemente voy a volver a comprobar como lo hicimos aquí arriba, por lo que sólo se les debe permitir que se lean por el uso de sí mismos. Pero vamos a escribir esto sólo para estar seguros. De acuerdo, entonces otra vez, esto solo asegúrate de que sólo el correo electrónico pueda ser leído por el uso de los dueños de este perfil, pero el nombre de usuario, nombre, foto de perfil puede ser leído por cualquiera. Entonces, vamos a guardar estos sólo por ahora. Onda. Uh, antes de continuar, vamos a agregar los comentarios Seguridad también Pero por ahora, vamos a guardar estos en y ver lo que esto realmente se hace a nosotros mismos. Pero antes de que lo hagamos, solo asegúrate de cerrar esto. Entonces en un corchete de cierre más aquí, y luego si publicas, debería estar bien. De acuerdo, así que eso es todo para este video en el siguiente video, vamos a ver las casas realmente cambiaron nuestra app. Por lo que es posible que veas por el momento que no se devuelven los datos. Es sólo cargar esto porque hemos cambiado el permiso aquí así que antes cuando fuimos a buscar al usuario capaz de darnos toda la información. Pero ahora tenemos que cambiar esto sólo para conseguir el nombre usado por sí mismo. Por lo que en el siguiente video, actualizaremos este Andi. Agrega en las reglas de seguridad para los comentarios también 27. Agrega reglas de seguridad a la aplicación (parte dos): bienvenido de nuevo. Entonces como vimos en el último video, la APP en este momento sólo está mostrando este texto cargando aquí ya que en realidad no es buscar los datos. Entonces si miramos en ventana terminal, podemos ver aquí que la disposición que acabamos de agregar ha significado que no podemos acceder al usuario detalla la forma en que estábamos haciendo esto antes. Entonces si entramos en un código y solo mantenemos el simulador aquí arriba también, y si nos desplazamos hacia abajo del dedo del pie donde buscamos los detalles del usuario, así que justo aquí podemos ver que solo estamos tratando de acceder a todo el objeto de usuario justo aquí. Como sabemos, hemos cambiado una comisión por lo que sólo puede acceder, um, um, el nombre de usuario, la imagen de perfil en su nombre. Entonces lo único que realmente estamos usando aquí es el nombre de usuario. Entonces vamos a cambiar esto aquí mismo. Murió en una nueva línea aquí. Entonces, niño, nombre de usuario. Y luego si eliminamos este cool aquí para realmente obtener la parte del nombre de usuario de este objeto, le quitamos esto y solo usamos todo el objeto de datos en sí. Pescado, porque sólo estamos accediendo a una parte de esto. Podemos usar esto por sí solos. Entonces si guardamos esto ahora y tiene actualizaciones, en realidad es afecto. Es de la base de datos, y todo está funcionando como debería ser. Este es sólo un pequeño cambio que hace que esa base de datos y en mucho más segura. Lo siguiente que tenemos que hacer es realmente agregar en las reglas de seguridad también para los comentarios . Tan libre. Basta con comprobar dónde está cerrando. Entonces como puedes ver, si haces click en cada uno de los paréntesis justo aquí habrá una pequeña línea debajo de ella, justo ahí para la apertura y para el cierre. Por lo que sólo ayuda a navegar tres. que si tan solo pinchas ahí, podemos verlo de cerca está justo aquí. Entonces si ponemos una coma y luego escribimos comentarios, solo estamos en esto solo para asegurar esto también. Entonces esto será que no vamos a estar usando esto todavía, sino sobre útil para el futuro, la futura referencia. Por lo que queremos asegurarnos de que alguien confunda los comentarios si están encerrados o no. Entonces de nuevo, queremos dedo del pie realmente comprobar qué comentario. Esto es así si miramos en una base de datos podemos ver que Cohen tan organizado de nuevo por la foto I d. Y entonces tenemos la idea de comentario dentro aquí. Entonces como lo hicimos aquí arriba para las fotos, vamos a hacer una nueva línea aquí. La foto me d para abrir esto y luego directamente dentro de aquí, queremos hacer una para las ideas comunes. Bueno, así que justo antes de esto, en realidad, vamos, Teoh realmente se asegura de que cualquiera pueda leer comentarios lo que la gente dice leer comercio. Por lo que esta línea que estamos agregando aquí es solo para comprobar quién puede escribir comentarios. Por lo que queremos asegurarnos de que solo puedas escribir o editar comentarios si eres el autor y luego muy similar a lo que estamos haciendo aquí arriba. Necesitan validar para comprobar que solo puedes escribir comentarios en tu propia cuenta para que no puedas hacer un comentario en nombre del perfil de otra persona. Entonces aquí, vamos a decir que tienes razón y una muy similar sí aparecimos ser raíces comentarios infantiles y luego foto I D. Y luego el comentario hoy y luego otra vez, quiero acceder al autor obtener el valor para esto. Entonces comprueba si eso es igual al norte i d Así que el usuario i d Y entonces queremos decir, o nuevo cuerpo autor de datos e igual lucha total. Por lo que es muy similar a lo que hicimos aquí arriba. De hecho, básicamente es exactamente lo mismo. Simplemente también estamos revisando las ideas de comentarios. Bueno, entonces otra vez, pones una coma justo aquí, y luego queremos crear una nueva línea aquí para comprobar la oferta. Quizás valida un nuevo objeto. De acuerdo, Así que como puedes ver, es muy, muy pronto. Mitory lo hizo aquí arriba. Simplemente arregla ligeramente esta sangría para que cualquiera pueda leer comentarios. Sólo se pueden escribir comentarios. Si es así, solo edita tus propios comentarios, y solo puedes crear un nuevo comentario en tu propio nombre. Por lo que de nuevo podemos publicar esto. Y así todas las reglas están actualizadas ahora. Entonces en el siguiente video, vamos a empezar a llenar el tú yo en hacer las pantallas realmente comprobar si el usuario está conectado o no, antes de que empecemos realmente a crear la página de subida y luego finalmente comenta también 28. Comprueba si el usuario está registrado: en este video, vamos a actualizar las pantallas de perfil de subida para comprobar si el usuario realmente está conectado . Y luego vamos a usar esto para mostrar en realidad información diferente para panear hacia abajo si están bloqueados, ¿sabes? Entonces primero vamos a la pantalla de perfil que no necesito hacer realmente es importar el archivo de confort que tenemos por aquí. Por lo que sólo copia este ritmo para terminar. Se colocó en la pantalla de subida así como lo que necesitamos en esto más adelante. Entonces una vez que tengamos eso, vamos a bajar aquí debajo del constructor y crear una nueva función aquí llamada Component Did Mount ya que vamos a estar entrando en un dato en un momento. Pero primero, solo quiero establecer un estado inicial aquí arriba en la variable real con la que vamos a empezar está conectado. Esto va a ser falso. De acuerdo, así que ahora de vuelta a nuestro componente it mount función. El primero que quieres hacer es establecer una variable llamada aquello que va a ser igual. ¿ Te Esto Esto es similar a lo que hicimos antes. Estábamos buscando información de la base de datos. Ahora es el mismo proceso cuando se trata de la autenticación también, porque vamos a estar haciendo comprobaciones que tardan un momento en revisar la base de datos. Entonces toca asegurarnos de que tengamos una referencia a Bueno, oye, ten una referencia a esto mientras hacemos ese cheque, eso es lo que eso va a estar lleno. Entonces en realidad vamos a comprobar si el usuario está conectado o no. Entonces lo hacemos escribiendo F la variable que hemos importado aquí arriba en mal estado cambió con un C mayúscula solo así que f off on off state cambiado. Y luego simplemente creamos una espalda fresca para esto. Ponemos un nombre, un nombre variable para el retorno de esta función, y luego abrimos la justicia. Entonces aquí, comprobamos si nos usan eso significa que si existe esta variable que se ha devuelto, entonces el usuario realmente está bloqueado. Entonces si esto existe encerrado en lo demás no encerrado así por sí mismo, esto en realidad no hace nada. Si en realidad ahora usamos esto para actualizar los estados. Entonces si estamos encerrados, vamos a actualizar los estados que usamos esta muy audaz de esto está aquí arriba. Entonces todavía tenemos acceso y referencia a esto a esto, y luego lo copiamos de nuevo aquí abajo y luego lo cambiamos para enfocar Así que por sí mismo, eso es bastante simple. Y en realidad se actualiza automáticamente si el usuario sale sesión en otro lugar y mantendrá todo en esta pantalla actualizado. Entonces ahora solo vamos a desplazarnos hacia abajo hasta donde tenemos nuestro regreso en este momento. Entonces vamos a crear un nuevo cheque alrededor del exterior de este componente de texto justo aquí. Sólo abre. Contar con soporte. Iban a decir que estos filetes se veían en iguales Verdadero eso. ¿ Eso es un signo de interrogación ahí dentro? Abre algunos corchetes. Permítanme añadir esto Justo aquí. Esto será si no se les mira aquí arriba. En ellos son amados. Por lo que ahora podemos desplazar información ligeramente diferente en base a si los usuarios realmente no lo saben. Entonces si sabes si están logueados, solo mostrarán esto. Y si no están encerrados, diremos, ya sabes, entonces es otro componente como ese es el sitio. Si miraron adentro, verán una pantalla exactamente como esta Pero si no hay, dirá que no te miran. Por favor mira a la vista Tu perfil es así de seguro? Esto ahora y aquí hay un error. Esto es sólo porque la perspicacia aquí en esta otra parte de esta función aparece bien porque sólo tenemos un elemento hit. Pero si estás en alguna de estas áreas, necesitas asegurarte de que solo un componente real sea padre de un rico, por lo que no podemos tener thes to por sí solos así. Pero si los contenemos con dentro de un padre y y y lo guardamos y recargamos, más cerca, probablemente se pueda ver que es lo que funciona. Solo tengo que asegurarme de que cada vez que estés haciendo cheques en el interior, la función de retorno te acaba de golpear. Asegúrate de que si hay dos componentes como este que siempre anidaron dentro de componente aparente o componente de vista como este solo ayuda a mantener vendidos en orden así ahí. Entonces ahora vamos a este mismo código para la página de subida. Entonces si solo copiamos el componente de Mount Function, podemos justo aquí pegar esto debajo del constructor en también copiar el estado que hicimos, pero que aquí dentro. Y podríamos incluso copiar este código un oleaje sólo para ahorrar un poco de tiempo. Entonces todo desde justo aquí hasta este solo seleccione subir para que no se subiera en esto se decía, por favor, buscando. Yo subo si te digo, arregla derramamiento Así que el más seguro ahora arriba. Ah, Page. Tenemos este mensaje aquí en la página del perfil. Muestra esto lo siguiente que vamos a estar haciendo, en realidad está obligando a los usuarios a iniciar sesión Así podemos cambiar este estado justo aquí y empezar a construir la interfaz para el perfil y luego finalmente pasar a subir realmente imágenes en aquí. Por lo que son actualizaciones la base estatal. 29. Asegúrate de que el usuario esté registrado mientras está creando la UI del perfil: bienvenido de nuevo. Entonces para empezar, vamos a continuar desde donde lo dejamos en el último video forzando al usuario a quedar encerrado. Entonces para ello, necesitamos configurar primero un método de inicio de sesión. Entonces lo haces yendo al panel de tu proyecto, yendo a la configuración de autenticación y haciendo clic en configurar el método de firma. Y por el momento, vamos a estar usando el proveedor de correo electrónico y contraseña. Por lo que solo tienes que hacer clic en este botón de edición en la esquina y luego habilitar. Y luego solo guardas esto en lo que vamos a hacer de inmediato es realmente crear un usuario de prueba con el que podamos trabajar. Muros estaban desarrollando esta aplicación. Por lo que hacemos click en el agregar Judios un botón por aquí y agregamos un nombre y dirección. Por lo que es una prueba en el usuario dot com, y por ahora usamos una contraseña realmente simple, que será contraseña. Por lo que no es la forma más segura de no lo recomendaría. Su parte natural donde pero para el desarrollo, esto está bien, ya que solo vamos a estar probando real a tu esposa para el usuario conectado. Entonces una vez que esto se haga. Basta con dar click a Jesu y puedes ver ahora que lo uso se ha agregado en un usuario me d se ha generado Así que ahora podemos entrar en nuestro código. Encontremos el simulador de puertas abiertas Atom. Entonces aquí está el africano trabajando sobre subir, página, perfil, página y pies Eso es lo que tenemos que hacer es primero movinto son apt Js y desplazarse hacia abajo hasta donde tenemos esta línea justo aquí. Paralelamente 17. Y lo que realmente queremos hacer es crear una función toe allow use Es un login. Todavía no vamos a crear un formulario de registro en. Vamos a hacer que algunos sean forzados iniciar sesión con la dirección de correo electrónico y la contraseña se acabaron de hacer. Entonces vamos a crear esta función aquí abajo. Esto dirá iniciar sesión. Creo que esto va a estar bien en la base de datos para comprobar que los detalles que proporcionaron Ok, Entonces , de nuevo, esto es a lo que tenemos derecho justo aquí. Queremos obligarte a iniciar sesión. Por lo que cada vez que se abra, se asegurará de que ya hayan iniciado sesión. Entonces lo hacemos escribiendo el bloque try de este insider, así que básicamente solo significa que cualquier error es cancha, para que podamos ver lo que está pasando. Eso es lo que estamos haciendo justo aquí. Por lo que hay algún error dentro de este bloque de entrenadores aquí. Serán atrapados y podemos pasar esto por aquí y bienvenidos a la consola. Pero están disparando áreas de ganancia. Esto sólo nos ayuda a estar seguros de lo que realmente está pasando. Entonces simplemente decimos básicamente que el objeto de usuario será asignado o iniciar sesión con un reloj compuesto masculino . Y entonces todo lo que hacemos en realidad es pasar por el nombre de usuario, la dirección de correo electrónico y la contraseña que acabamos de crear. Eso fue el usuario de prueba dot com y posible que. Por lo que nunca harías esto en producción. Pero para el desarrollo en teatros probados realmente ingresó. Esta es una forma útil de simplemente cambiar entre los estados bloqueados de Andi. Entonces ahora que tenemos esto, sólo bajamos un poco más allá. Vamos a crear una función constructiva aquí también. Aquí está, que le llevaría apoyos solo pops en tres como este, y entonces todo lo que tenemos que hacer es solo decir este inicio de sesión. Entonces si guardamos esto. Ahora, lo que veremos está aquí arriba en nuestro perfil. Tenemos este cheque aquí que verificaría si los usuarios bloqueados en este momento se demuestra que estaban, no estaban encerrados. Por favor, busque en sus perfiles. Cuando salvemos esto, en última instancia nos mirará. Y debería actualizar esto. Eso es lo que vemos la página. A continuación, vaya a un perfil. Vamos a comprobar si hay algún mensaje de error. Ven a encontrar variable apagado. Eso es sólo doble comprobación esto. Esto está en la línea 22. Justo aquí. De acuerdo, por eso. Entonces lo que tenemos que hacer es asegurarnos primero, que importamos las funciones que usamos en la base de vuelo. Entonces si estamos revisando página de perfil otra vez en la parte superior aquí arriba, puedes ver porque estamos haciendo un cheque para ver si acabas de mirar como lo hicimos en el último video. Necesitamos simplemente copiar esto. Andi tienen esto en su AK. Pero cuando haces un cambio aquí porque no estamos dentro de los directorios que estaban antes , Así que uso un, uh, uh, perfil está dentro de la carpeta APP en el interior de las pantallas de boulder con la APP GS lejos nos están trabajando aquí está en la sala de este directorio. Por lo que no necesitamos volver a este directorio de dinero o necesitamos teclear es puntos para slash. Ven a recoger. Entonces si guardamos esto ahora, revisa el simulador. Pero yo perfil. Puedes ver aquí, estamos encerrados. Este es el primer paso. Ahora que nos encerramos, podemos empezar a construir realmente la interfaz que vamos a estar usando para pantalla de perfil . 30. Construir la UI de perfil: ahora que nuestro usuario está conectado y podemos ver el texto del perfil en nuestra página de perfil justo aquí, como hicimos argumentar, esto significa que en realidad están conectados. Podemos empezar a construir una sencilla interfaz de perfil para esta pantalla. Entonces vamos a empezar por ir al principio de esa página aquí e importar un par de componentes que iban a estar usando para esta interfaz. Por lo que el 1er 1 es una ciudad de pago tocable en vestidos. Check. Los otros tienen toque para un texto de hoja estilo lista plana pastosa, tú y la imagen. De acuerdo, así que esto en realidad es solo uno. Esto es todo lo que necesitamos en este momento. Entonces si solo seguimos adelante y decimos esa página justo aquí distendido recarga, vengo perfil de nuevo. De acuerdo, entonces ahora vamos a desplazarnos hacia abajo a Page. Simplemente dice que esto es lo que vamos a estar trabajando con el área fuera del usuario conectado justo aquí. Entonces lo que tenemos que hacer primero es simplemente cambiar. Esto va un estilo aquí arriba. Entonces donde tenemos flex uno justificar contenido subrayan elementos. Queremos cambiar esto para que solo tengamos flex uno, pero solo necesitamos asegurarnos de que el usuario bloqueado siga teniendo el mismo estilo. Simplemente deshazte de este elemento extra justo aquí. Entonces para la vista principal de los padres, eso va a contener toda la información, queremos eliminar estos dos justo aquí. Entonces todo esto está enclavado dentro de este elemento que sólo tiene sexo uno. Por lo que ahora podemos ir al interior del logueado intacto, eliminar este texto, comparar el interés aquí y crear una vista totalmente nueva. También tiene un flex de una Specioza cerca sur. Por lo que dentro de aquí, queremos tener un título. Esto nos parecimos a nuestros pies pagamos. Entonces si solo vas a la página de alimentación aparece o desde tu directorio por aquí, es crecer hacia abajo. Y estamos buscando este elemento justo aquí. Dice, altura 70 acolchado top, éste justo aquí. Entonces solo copia eso y vuelve a tu página de perfil. Vamos a pegar esto. Simplemente cambia. Escribe sus pies a perfil. Ahora es seguro, sólo endeudamiento. Y luego salvaremos. Basta con revisar la página para que veas que ahora tenemos un encabezado. Esta página es su perfil. Esto está empezando a llegar a algún lugar ahora. Entonces vamos a crear otra vista debajo de ésta. Sólo otra vez. Vamos a cambiar ligeramente este marcado. Entonces queremos a Teoh. Yo lo tenía justificar contenido y será espacio uniformemente. También queremos cambiar una línea de artículos para ser una dirección de flex central como carretera. Y también vamos a agregar algo de relleno esto acolchamos verticales, afectará la parte superior en la parte inferior, Uh, partes de la vista. Entonces ese anuncio panning a la parte superior y yo me dirijo a la parte inferior. Este será 10. Tan solo asegúrate de cerrar esa pocas oficinas. Bueno, aquí es perspicacia. No vamos a añadir una imagen. Andi, algún texto por lo que esto básicamente tendrá uno al lado del otro, tendrá una imagen justo aquí. Entonces ser un círculo, que sería la imagen de perfil. Y luego por aquí tenemos algo de texto. Serán su nombre y su nombre de usuario. Parece estar centrado dentro de esta vista, justo aquí y en un realineado a ambos lados el uno del otro Uniformemente espaciado. Esto lo vamos a sumar ahora. Por lo que empiezas a agregar la imagen. Entonces justo en el ustedes están todos aquí en un momento. Pero primero, solo agreguemos el estilo para esto. Por lo que quieres decir un margen a la izquierda de 10 ancho fuera 100 alturas de 100 así en un radio de borde . Para hacer de esta imagen un círculo necesita estar a la mitad del látigo en nombre de los conjuntos de altura 50. Después simplemente cerró esto así, también va a crear otros tres componentes de vista que contendrá el nombre en el nombre de usuario . Vamos a crear esta vista aquí, y solo necesita un estilo solo para agregar un margen derecho de 10. Esto es incluso con el margen que queda de 10 en esta imagen. Simplemente en realidad mantener todo bonito y espacio correctamente y lo envió en la pantalla. Por lo que dentro de aquí, sólo queremos decir nombre de texto estará reemplazando estos textos, atributos pronto con la información real del perfil de la base de datos. Pero por ahora, solo construyamos primero en la interfaz. De acuerdo, así que vamos a guardar esto después de escribir en la imagen de perfil así que de nuevo, cuando realmente sigamos adelante con su aplicación, esto se va a buscar de la base de datos Bueno, pero por ahora, vamos a usa solo una imagen simple un P I. Puedes poner lo que quieras aquí. Este es solo uno que encontré que es simplemente brillante. Y será fácil ver qué con usado. Entonces solo sostén eso ahí un minuto solo para que veas lo que escribimos. Solo asegúrate de que está bien que cierres este otro componente de vista que lo hemos tenido en un oleaje solo para asegurarte de que tenga una apertura 23 y 123 de cierre. Entonces deberías estar bien ahí. Vamos a ir a nuestro perfil y echar un vistazo para que vea la imagen de perfil correcta que hemos hecho justo aquí. Este es este euro on. Tenemos el nombre y nombre de la noticia justo aquí, Así que este es el perfil de primera parte siguiente, yo para agregar en tres botones diferentes para que estos botones permitan a los usuarios cerrar sesión. Uno les permitiría editar. Su perfil de uno solo será básicamente un enlace rápido que lo lleve directamente a la página de subida. Tengamos esos en el siguiente. Entonces primero vamos a añadir otro componente de vista. Así que vamos a estar doblemente seguros de que estamos agregando una vez que alfile y quiero cerrar y queremos volver a peinar aquí dentro. Este estudio será bastante sencillo. Era relleno de fondo fuera 20 y un borde al fondo de esto también. Un borde inferior ancho fuera de uno. Por lo que dentro aquí queremos al tacto, pero un pastoso que se importaron la parte superior. Entonces lo que este componente realmente nos permite hacer es que haga cualquier elemento o componente dentro de esto. Si tocas esto la tabla de ritmo Flicka ligeramente para que veas que el elemento se ha interactuado con. Te muestro un ejemplo rápido. Si pongo algo de texto aquí y lo guardo, Si entonces damos clic en esto, podría ver que apenas va un poco. Esperan luces en desvanecimientos de nuevo adentro. Entonces esto es lo que vamos a estar usando para los botones de esta página. Por lo que este botón realmente dirá, Mira hacia fuera, mayoría copia y pega esto un par de veces más para otros botones, arregla la sangría. Por lo que este botón dirá en él, perfil en este fondo dirá, subir nuevo. Sólo un poco. Además justo ahí. Entonces así es como se ve esto sin ningún estilo. Pero ahora es solo agregar en algún estilo básico, solo dedo del pie suavizando esto un poco. Entonces empiezo con el 1er 1 Bueno, digamos margen plática de 10. Un margen horizontal. Entonces es la izquierda, y a la derecha de 40. Es y relleno a la parte superior e inferior del botón. Entonces está poniendo vertical 15. Estábamos en una junta de radio como votantes para poner un poco de curva en la parte inferior de 20 y luego nos sentaremos a bordo de un color. Sería genial por ahora. Puedes poner un color hexadecimal aquí si quieres, pero por ahora solo diremos genial y luego una mecha de borde 1.5. Entonces si guardamos esto y solo echamos un vistazo para que puedas ver aquí que tenemos este borde curvo, tenemos el margen. Cualquiera de los dos lados. Tienes el relleno en la parte superior en la parte inferior. Entonces ahora solo necesitamos que Teoh envíe a este texto porque se ve un poco fuera de lugar así . Entonces lo haces agregando realmente el estilo al componente de texto en sí. Por lo que sólo decimos texto de estilo el centro de línea y guardar. De acuerdo, vamos a ajustar esto ligeramente. Un oleaje Teoh hacen que el color del texto sea el mismo que el color del borde. Entonces hacemos esto solo diciendo color genial a cada chico. Entonces vamos a copiar y pegar este mismo estilo para los otros botones que tenemos aquí. Por lo que solo primero consigue el texto y luego peinar el toque de un pastoso. Para cada uno de estos también, el caso es seguro. Eso sólo tiene una mirada rápida. Ahí vamos. Pero lo que queremos hacer es simplemente hacer que esta subida nuevos botones, destaquen solo un poco más. Entonces nos vamos. Teoh, aumenta el relleno. Vertical para este, uh, componente justo aquí. Por lo que cambia de 15 a 35. Añadiré un color de fondo gris apagado, y en realidad estamos cambiando el color del texto para que sea blanco. Entonces si guardamos esto y echamos un vistazo, podemos ver ahora que este botón sólo tiene un poco más de enfoque en él que la pobreza. Entonces lo que vamos a hacer ahora es realmente enlazar hacia arriba Este subir nuevos botones Cuando está presionado , nos lleva directamente al grifo de subida. Entonces para hacer esto, vamos al tacto, pero un pastoso justo aquí. Crear una nueva línea. Permítanme decir solo al presionar cuando abras los corchetes rizados y los paréntesis normales que la estrella funciona así y simplemente decimos esto la navegación de los apoyos. Entonces accediendo al navegador que configuramos justo aquí ¿Puedo dirigirme, uh, archivo para decir esto? Detener apuntalado navegación otras puertas a una placa. Entonces este texto aquí va a ser esta parte del objeto up the navigator, solo él. Entonces llévanos a esta pantalla de subida. Entonces esta pestaña que hemos configurado justo aquí, Así que si guardamos esto, ve a un perfil y da click en subir nuevo, nos lleva a este tap. Por lo que casi ha terminado de configurar la interfaz para esta página. Tan solo tienes que hacer una pequeña parte de esta página. Entonces vamos por debajo de esta vista justo aquí. Estamos geniales. Una vista más, no un estilo otra vez, Un flex de uno. Por lo que ocupa todo el espacio restante, y también queremos decir, justificar el centro de contenido un centro de ítems de línea. Vamos a darle a esto un color de fondo loco que realmente destaca Digamos Ah, verde brillante para que podamos echar un vistazo a este espacio que ocupa este componente. Así que cierra a estos pocos justo aquí. Pon un poco de texto dentro, y por ahora, digamos simplemente cargando fotos, pesar de que aún no estará cargando nada. Aquí va a ser donde se encontrarán las fotos del usuario, como una pelea de carga, ojos y caja fuerte que no han tomado Ver la pantalla. Ahora está lleno porque hemos dicho Flex uno justo aquí. Por lo que ocupa todo el espacio restante con este componente justo aquí. Entonces en este video, realidad hemos empezado a construir la interfaz a partir de este perfil. En el siguiente video, vamos a Teoh, ajustar el dedo del pie de alimentación domiciliaria, tener una forma de ver el perfil de estos usuarios. Entonces si tocamos este texto justo aquí , abrirá el perfil de otros usuarios. ¿ Quién ha hecho esta foto? Y también empezamos a crear un tablero de páginas A de comentarios también. Entonces cuando hagas click en esto, abrirá otra página, Así que confunde los comentarios, la amenaza que viene de cada foto estas cosas iban a estar buscando en el próximo par de videos 31. Crear nuestra pantalla modal de perfil y añadir el botón atrás: bienvenido de nuevo. Por lo que ahora estamos listos para empezar a sumar en las pantallas extra para mostrar los perfiles justo aquí al hacer clic en el usuario de cada foto en los comentarios. Entonces si pudieras unos comentarios más abrirás un modal justo aquí para ver en el comentario Threads acaba de golpear así 20 en estas nuevas páginas, necesitamos cambiar la forma en que tenemos nuestra app Js estructura de archivos apenas un poquito. Entonces para empezar, vamos a subir aquí dedo del pie importando la pestaña Navigator de reaccionar navegación para realmente importar un navegador de pila también. Entonces lo hacemos tocando y creando pila Navigator. Simplemente echa un vistazo a la espelta correctamente. Esto importará también las opciones de navegación de la pila. Entonces lo que tenemos que hacer es cambiar este nombre aquí de Maine. Stack Teoh, Tab Stack. Esto sería en iconos de pestaña aquí abajo, por lo que Hubble necesita cambiar. Vamos a añadir un nuevo puntera de sección, tener la pila principal real. Tan solo asegúrate de deletrear esto de nuevo para que añadiremos otra const como pila principal. Y esto sería igual para crear stack navigator y luego insight aquí, vamos a configurar todas nuestras pantallas. Por lo que necesitamos una pantalla de inicio, que estará en Tab Stack. Por lo que esta será la página que es más fácil ha llevado a enseguida. Entonces es exactamente lo mismo que lo que usamos para la pestaña Navigator. Simplemente decimos casa y luego pestaña de pantalla Stack. Entonces en realidad pasando por todo este tap navegar que hemos creado justo aquí ya que esta pantalla en lo que también queremos hacer es crear la pantalla de un usuario. Esto será lo que muestra. Si tocas estos perfiles de usuarios, esto será lo llamamos a este perfil de usuario lo hará al, uh, esto en un momento e importancia disparado y crear una página para esto y también comentarios. Es de esta manera los comentarios de pantalla. Por lo que casi se hace. Solo tenemos que sumar algunos ajustes justo aquí, por lo que necesitamos establecer las tarifas iniciales. Entonces este es el nombre de la página al que se abrirá primero la APP. Por lo que para nosotros, este será el hogar. Así que ve dedo del pie pila de tap. También necesitamos establecer un modo, por lo que hay un par de modos integrados en reaccionar la navegación sobre el que queremos usar es móvil. Podrás echar un vistazo a todas las diferentes opciones sobre reaccionar navegación puedes encontrar todas las opciones en aquí está en una referencia P I puedo ver todo. Creo que los bebés apilan navega miran se puede ver el diferente Moz, hay carro o móvil, por lo que es ligeramente diferente. Pero vamos a estar usando modelo para esto. Así que cosas modo o simplemente aquí. Yo nunca jefe de modo. Vamos a estar creando cabeza arriba dentro de la nuestra. Tú yo para que no necesitamos preocuparnos por eso en este momento. Esta será la parte que se muestra a lo largo de la parte superior aquí. Queremos realmente crear el interior de Hedda's de nuestros archivos reales ellos mismos. No queremos adelantarnos, así que solo di ninguna. Entonces ya casi terminamos aquí. Sólo tenemos que crear estos archivos. Por lo que para cada uno de estos archivos, las preguntas copian y pegan la línea aquí arriba. Esto será utilizar un perfil y Cummings. Por lo que tenemos perfil de usuario. Aquí es divertido. Entonces ven. Es justo aquí. En primer lugar crearemos perfil de usuario. Ahora lo que vamos a hacer es simplemente duplicar la pantalla de perfil, y vamos a hacer un par de cambios en ella. Entonces si solo miramos, es un pelo. Pero en un clic derecho duplicar y todos dicen que el especialista en perfiles de usuario coincide con el nombre de archivo de Thea aquí. Entonces perfil de usuario, eso es genial. Y luego para el archivo de comentarios. Pero ahora sólo vamos a copiar en duplicado el archivo de subida. Por lo que acabo de cambiar esto para comenzar cerrar esto y cerrar estos dos archivos ahora. Cualquier cosa por el momento. Entonces, solo asegurémonos de que aquí tenemos estos archivos disponibles. Entonces como puedes ver aquí porque hemos cambiado la pila principal y la pila de tap aquí abajo, en realidad estábamos llamando a la pila principal que estábamos usando antes. No tenemos que hacer más cambios porque ya está, uh, vinculado. Entonces si seguimos adelante y guardamos esto ahora, todo debería verse igual. Por lo que tienes una página de perfil subir página en Dafydd. Pero lo que vamos a hacer ahora es realmente hacer un make este texto aquí en un botón para que puedan abrir el perfil de usuario. Ahora, por el momento va a ser justo esta misma pantalla aquí. Entonces una vez que vemos esto abierto pero luego hacemos algunos cambios aquí. Entonces, en realidad factores que utilizan detalles. Por lo que va a tener archivo Js gratis en encontrar esta línea. De acuerdo, Entonces lo que buscamos es el componente de autor de punto artículo justo aquí. Voy a texto componente. Entonces vamos Teoh Nestle esta dentro de un toque para mi pasty. Entonces primero hay que comprobar que tenemos esto importante, que no tenemos éxito en esto aquí arriba. Simplemente guárdalo. K s luciendo bien. Envíame desplazamiento de vuelta hacia abajo a esa línea en la que estamos trabajando. Entonces vamos a añadir un toque bola pastosa. Acaba de golpear. Y asegúrate de cerrar esta oficina. Bueno, sólo sangró ligeramente. Entonces todo lo que dices aquí en prensa, mismo que hacíamos antes en el video anterior. Por lo que los corchetes rizados de unos crean una función aquí. Pero iban a llamar a esto apoyos, navegación navega, usuario, y entonces realmente queremos pasar por la idea del usuario para que podamos usar esto en esta página. Pero por ahora, lo vamos a dejar en eso. Yo sólo lo guardo. Entonces si tocamos esto ahora porque abre este perfil pero un problema que tenemos inmediato es, no hay forma de volver realmente. Podríamos barrir hacia abajo, que lo moverá, pero necesitamos crear una forma mucho más clara de agregar la justicia de botón que usan. Puede retroceder y obviamente cambiar ligeramente el diseño de esto porque no podemos en ello el perfil de alguien más. Entonces, no hagas algunos cambios a continuación. Pero por el momento queremos que Teoh tenga una forma de realmente pasar por el usuario que d a través de esta nueva pantalla. Entonces para hacer esto, yo para subir a funcion donde estaban buscando para usar sus detalles justo aquí y justo aquí, donde estamos enviando de vuelta los usuarios usan nombre, vamos a agregar un nuevo experto justo aquí llamado Offer I D. I mean te deja pasar en el usuario yo d. que estamos usando aquí arriba tan libre en este solo golpe y luego volver a bajar. Entonces cuando decimos navegar por donde dice usuario, justo aquí, van a agregar un coma, abrir unos corchetes rizados, y esto nos permitirá pasar en ciertos parámetros a través de esta siguiente página. Entonces vamos a decir usuario, yo d es artículo o viernes. Por lo que realmente podrás utilizar estos datos en esta página de perfil que hemos creado. Entonces si acabamos de abrir esto aquí, podremos utilizar estos datos dentro de esta página para poder ir a buscar la información del perfil de ese usuario . Es eso tan positivo a través de sólo a así donde dice, usuario Justo, explica esto un poco más. Esta navegación del usuario no navega, estamos de paso. Usuario, sólo escucha esto correlaciona con el nombre usuario justo aquí. Por eso iré a esta pantalla más que a esta pantalla. Por lo que si hacemos cambios en esto, página se mostrará cuando el usuario haga clic aquí. Entonces primero, sólo cambiemos un poco este diseño y tuvimos que volver botón atrás primero. Está bien, vamos a guardar este archivo. Consulta esta funcionando todavía? Sí. Entonces está trabajando con pasar su día a tres para que realmente podamos empezar. Usa esto en la página de perfil. Por lo que se quita el primero que queremos cambiar. Este login check in los estados solo por decir cargado y esto seguirá siendo falso para empezar , eliminará todos estos cheques co Justinianos. Si las lesiones amadas no sabes o quita eso y pronto estará creando una nueva función justo aquí para comprobar los parámetros. Esto estará buscando ver por qué datos se han enviado justo aquí. Entonces, ¿para esto se utiliza este funcional? Just a Y entonces queremos crear otra función para sacar la información fuera. Esto, los usuarios de ese perfil imaginan su nombre de usuario en su nombre. Entonces estamos pasando a un usuario. Acabo de golpear la disfunción moral en un momento. También me gustaría revisar los parámetros también. Entonces, ¿qué hay que hacer en el componente que monta? Sí, podemos quitar. Uh, estas fotos también. Yo digo electoralmente este chequeo programas, porque lo que vamos a estar haciendo es hacer el llamado a esta función. Una vez que realmente hayamos recuperado el usuario i d en esta función solo para Así que ahora vamos a hacer un par de cambios en el tú real. ¿ Por qué en sí mismo? Entonces podemos empezar por quitar? Uh, esto comprobado también lo es. No tenemos que preocuparnos si estás encerrado. ¿ Tú? No, No. Para que puedas deshacerte de esto. Nos deshacemos de esto justo aquí. En realidad voy a dedo del pie tenía una nueva comprobación para ver si los datos del usuario real se han cargado todavía. Por lo que trabajas exactamente de la misma manera dirá que este estado cargó a sus padres. Entonces queremos decir, Envía un mensaje a la pantalla. Entonces las páginas cargando solo un mensaje sencillo como este. Y entonces si no es así si la página, si ST dot moated es verdad, mostraría un perfil. Y de nuevo, queremos quitar estos botones justo aquí así. Entonces si guardamos esto para empezar porque en realidad no estamos cambiando el Estado Cargado, solo debería seguir cargando. Entonces como pueden ver aquí, aún no hemos centrado este texto ni nada. Entonces es sólo decir cargar y no está cambiando. Eso es lo que quieres. Ahora lo que vamos a hacer a continuación es en realidad escribir estas funciones justo aquí, así que para empezar, trabajaremos en la función de las instalaciones. Entonces lo que vamos a estar escribiendo aquí es un cheque a la prop navegacional justo aquí para buscar esta fecha que estamos enviando a la página. Por lo que nos detenemos diciendo Crear una nueva variable cool parámetros. Haram y ser este Doc cae navegación, no estado no amigos. Y luego primero comprobamos si esto existe, y luego comprobaremos si el usuario real i d realmente solo aquí existe también. Es así. Y si eso existe, ahora podemos establecer al usuario yo d en nuestros estados y luego ejecutar la función de información del usuario de efectos. Esto sólo significa que podemos reutilizarlo más abajo de la página si es necesario. De acuerdo, Entonces, lo que primero sería realmente agregar en mucho justo aquí para que podamos ver lo que en realidad está siendo postura. Entonces guardamos esto encima en esto, pero entonces de nuevo, deberíamos conseguir una alerta diciéndonos a estos usuarios i d ahí. Aquí preguntamos esta idea. Vamos a comprobar si se vincula con esta foto en la base de datos. Sufrir. Check in Aquí. Tenemos una foto I d. Y el autor aquí es este usuario yo d Así que vamos a condenar a los usuarios allá otra vez. Es ese derecho usado, ocho. Y como esta información. Entonces recuerda que las reglas de seguridad esperan antes de que se nos permita acceder al perfil. Imagen del nombre en el nombre de usuario. Por lo que en efecto, función de información del usuario, vamos a realmente poner esta información en, mostrarla en esta página. Por lo que empezaremos primero creando una referencia a esto como lo hicimos en el archivo anterior. Entonces guarde nuestro que igual a esto para que podamos usar eso a lo largo de esta función sin preocuparnos de si tenemos referencia a los objetos reales o no. Por lo que empezaremos llamando a los usuarios ref de la base de datos. Y entonces en realidad diremos niño, usa tu yo d justo aquí. Es por eso que necesitamos estos últimos tres y luego vamos a obtener el nombre de usuario real. Nosotros queremos esto una vez. No necesitamos actualizar cada vez, así que una vez. Y luego estableceremos esto para que esté fuera del valor de snapshot, crearemos una función y luego esperaremos la devolución de la llamada. Entonces otra vez, como lo hicimos en la página de pies, cuando buscamos los datos aquí arriba para primera comprobación. Si estos datos existen, entonces const existe es igual al valor de instantánea. Ve se el primer cheque. Si esto está vacío y si existe, los datos igualan idea instantánea. Entonces a partir de aquí, podemos suponer que estos datos sí existen en su igual a datos para justo bien que correctamente Así que si inventamos esta línea justo aquí, no podemos establecer estate. Ciertamente que porque establecemos esta referencia sólo para establecer estados usan el nombre es igual a datos. Pero una cosa más antes de que terminemos con este pequeño bloque de CO dos uso factualmente nombre, solo necesitamos asegurarnos de que estamos comprobando si hay algún error. Entonces para ello, bajamos aquí justo antes de esta sección de cierre aquí. Es una era de captura cónsul era de bloqueo. Sólo para que tengamos una comprensión de cualquier cosa que pudiera estar saliendo mal mientras o en desarrollo. Ahora es la forma en que los esfuerzos en esto vamos a copiar esto y pegarlo, pegarlo de nuevo porque necesitamos usar esto para el nombre en una imagen de perfil. Por lo que sólo cambió estos también. Y en esta última, sólo podríamos decir Cargarla. Es cierto. Es Esto significa que estos datos no se obtienen. Podemos usarlo dentro de Irak. Ahora, en este ejemplo, estamos haciendo tres llamadas separadas a la base de datos Ahora, normalmente, no estaríamos haciendo esto, pero porque fuera de camino, hemos estructurado un perfil aquí, no el perfil Watmore las reglas de seguridad. Tenemos a Teoh realmente pillado. Afecta los datos así. De lo contrario volverá y con un error porque no podemos recuperar todo el objeto de usuario a menos que seamos ese usuario. Por lo que es un pequeño trabajo alrededor solo de datos infecciosos. Lo he hecho de esta manera solo para mostrar las diferentes formas en que funcionan las reglas de seguridad tan normalmente cuando estás construyendo una aplicación, tendrías que usa objeto en el usuario, y entonces tal vez tendrías los datos privados justo fuera de ella como esto. Y luego una perilla facturada aquí llamó pública y luego el nombre en los otros datos aquí dentro para que pudieras decir Ford tal público y buscar eso todo de una sola vez. Pero en este ejemplo, simplemente lo mantuvimos simple. Y tenemos datos como este. Entonces de nuevo, vuelta a la disfunción, disfunción es todo lo que tiene que hacer. Entonces aquí abajo ahora, en realidad podemos usar thes nombre de usuario, nombre y foto de perfil aquí abajo así que vamos a empezar. Volvamos solo simulador de gas. Entonces empezaremos por cambiar primero el nombre justo aquí para que sea el nombre que ahora tenemos de errores. Algo que este estado de punto no nombre y otra vez lo mismo para uso nombre este punto Estado no usa el nombre. Y luego para la imagen de perfil real justo aquí solo decimos que este estado lo tiene todo. Entonces es así de sencillo. Guardamos esto ahora, y dar click en un botón por aquí toco por su ciudad de pago. Se abre con la información de la base de datos. Ahora, en el momento en que tengamos que actuar símbolos justo aquí. Por lo que el nombre de usuario en la base de datos aún debe tener uno ya. Ahora, estas fotos de perfil, lo que notarás es que cada vez que abramos la imagen, deben ser diferentes cada vez. Sí, Así que le haces clic ahí, ves, ya ves,cambia. Ahora bien, esto es sólo porque fuera de la imagen ap que estamos usando aquí esta foto de perfil de ejemplo. Pero lo que se nos muestra más adelante es en realidad subir imágenes y guardarlas en nuestro propio almacenamiento por base de fuego. Entonces así es como agregamos el perfil de usuario. Entonces una cosa más antes del final de este video, sólo vamos a añadir un botón sólo para el uso de la multitud para volver sobre haber recién limpiado así. Volvamos a I CO solo a Andi. Hay algunas maneras en las que puedes hacer esto, pero probablemente una de las formas más fáciles es crear otro toque debajo de pasty aquí y dentro de esto, vamos a agregar un componente de texto, que decía, Go atrás. Y luego fue mi propia prensa similar de nuevo a lo que hemos hecho en otras páginas. Así que abran, corchetes rizados crean función y un milagro esto los apoyos no navegan. Pero para esta llamada, no llamamos a navegar. Nosotros sólo decimos retroceder así. Entonces si salvamos esto a quien no diseñe aún Pero si guardamos esto y echamos un vistazo rápido, no hemos cerrado esto para ver en qué se confía esto. Si abrimos, el perfil aquí, se puede ver, es igual de buena espalda. Si hacemos click en eso, lo cierra. Pero vamos a ajustar un poco más este estilo para que tengamos, uh, volver a la izquierda aquí, e incluso podríamos crear espacio en la derecha, todos para agregar algo también. Ajustemos esto porque eso se ve un poco revuelto por el momento. Entonces, para empezar, vamos a agregar un poco más de estilo. Y aquí así donde tenemos una línea de artículos, eso está bien. Pero también queremos decir justificar el espacio de contenido entre esto funciona bien, remolcar nos tienen elementos empujados a cualquiera de los lados para quedarse. Entonces tenemos uno a la izquierda, uno en el medio y otro a la derecha, por si quieres añadir otro botón o algo así aquí en el futuro. Entonces si entramos aquí, ha tenido otro componente de texto. Apenas aquí ha sido un signo de interrogación por ahora. Solo asegurémonos de que el ingenio del de la izquierda y el de la derecha sean los mismos. Entonces solo copia esto para el toque, pero un pastoso también. Por lo que guardamos la cara y echamos un vistazo rápido. Entonces lo que puedes ver que está sucediendo aquí es el valor predeterminado de dirección flex para este componente de vista justo aquí es establecer todo en una columna. Lo que queremos hacer es cambiar esto para que aparezca en una fila, así que solo escribimos en dirección flex, ¿ verdad? Entonces si guardamos esto ahora, entonces tenemos una dirección flex, tenemos nuestro contenido justificado qué aerolíneas cosas en una fila como esta a través y todo está centrado, por lo que tenemos una mirada rápida. Ya puedes ver su posición ahora así, pero por el momento no sabemos si quieres este ítem aquí. Dedo del pie. ¿ Tienes alguna información? También se deshace de eso. Hagamos que este fondo destaque. Pequeños bits tendrán algo de estilo a sí elemento. Por lo que tengo un tamaño completo de 12 peso frontal de barcos, solo un poco de relleno en el lado izquierdo porque justo arriba contra el borde de la pantalla aquí, digamos, digamos, 10 poniendo a la izquierda. Entonces si guardamos esto y abrimos allá vamos. Esto se ve un poco mejor ahora. Podemos hacer clic fácilmente en este botón, y destaca porque se trata de un pequeño ataque global pero es audaz. Y entonces podríamos agregar fácilmente otros botones y cosas por aquí. Un oleaje. Entonces en el siguiente video, buscaremos agregar una pantalla de comentarios, que creamos el archivo para antes y también creamos un botón aquí para realmente abrir esos comentarios también 32. Ajustar un archivo de comentarios y añadir en la pantalla de comentarios: De acuerdo, Entonces antes de poder agregar un botón aquí para abrir realmente la pantalla de comentarios, necesitamos hacer un par de cambios en un archivo de pantalla de comentarios. Entonces si tan sólo abrimos a un lado por aquí y abrimos el archivo de corrientes ya que estamos duplicados esto de subir fotos de página para ajustar esto ligeramente, sólo mostrar que en realidad es la página de comentarios tan cambiada, subir a comentar cambiaría esto. Teoh contento de nuevo para publicar viniendo. Entonces es seguro. Este es el único cambio. Yo para hacer este expediente en este momento. Entonces volvamos al archivo de feed. Y ahora queremos realmente envolver este componente de texto dentro de un toque por debajo pastoso similar a lo que hicimos antes estatuas. Copia esto, en realidad, sólo una y luego ciérralo también. Simplemente arregla la sangría. De acuerdo, así que quieres cambiar un poco este texto solo para que se vea un poco mejor, reflejar que esto es en realidad un enlace y vamos a cambiar estos dos comentarios y realmente queremos que este sea ítem no d Así que ese es el foto real I d. que configuramos aquí, así que d justo aquí para que realmente podamos buscar los comentarios correctos cuando creemos completamente la pantalla de comentarios más adelante. Entonces si guardamos esto ahora, podemos ver esto. Diseñadores actualizados. Y si hacemos click en esto, muestra esa página de comentarios. Esto es todo lo que necesitamos hacer en este momento, solo para actualizar pies página para mostrar que tenemos comentarios sobre aquí. Entonces lo siguiente que vamos a hacer es trabajar en la página de subida. Por lo que vamos a buscar sólo ajustar un poco esta pantalla para que tengamos subida , mostrando en un texto un poco más grande y luego un botón que pueda abrir la imagen pick up para que luego podamos seleccionar una foto y aplicarla. Eso es lo que vamos a hacer en el siguiente video. 33. Construir la parte de la pantalla de la carga una: Bienvenido de nuevo. Ahora en este video, vamos a estar centrándonos en la página de subida. Entonces, sólo pasemos a esta página ahora, si lo primero que quiero hacer a esta pantalla es un justamente el estilo general fuera de esta página justo aquí. Entonces lo primero que queremos hacer es sacar esto, justificar contenido en una línea, elementos que está marcando justo aquí. Onda, sólo queremos que esto diga Flex uno, y vamos a asegurarnos de que el usuario bloqueado que teníamos un nuevo componente de vista justo aquí yo en realidad añadiría este flex una vez marcando aquí también. Sólo que ocupa toda la página en lo que probablemente debería dio lo que hicimos en la otra página antes. Es sólo añadir este estilo viejo al bloqueado Peter, sólo que mantenemos todo consistente. Acabamos de guardar este cambio hasta el momento, no deberíamos decir nada diferente al minuto. Está bien, eso está bien. Eso es porque aún no lo han centrado, pero eso está bien por ahora. Por lo que dentro aquí queremos que Teoh cambie el estilo, esta carga componentes. Acabemos de tener en este nuevo estilo ahora queremos aumentar el tamaño de la fuente. ¿ Cómo debe ser 28? Voy a añadir algo de relleno al fondo. Alrededor de 15. Vamos a echar un vistazo Cómo aparece esto. De acuerdo, eso parece correcto. Pero de nuevo, en realidad necesitamos enviar a esto. Vamos a cambiar el inicio aquí. El caso ahí, tenemos subida. Y ahora agreguemos otro componente de texto debajo de esto va a actuar como un botón para realmente dejar que el usuario haga clic en él, y es seleccionar una foto. Entonces el momento en que no podemos interactuar de ello así que tenemos que hacer es en esto en un tocable, pastoso como este. Pero antes de hacer eso, también necesitamos importarlo en la parte superior aquí, como se puede ver así sólo para quitar esa pequeña era. De acuerdo, así que eso parece un ahora. Como puedes ver, aquí está bien hecho. Tenemos una advertencia. Esto es sólo mostrar que escribo mal este estilo atributos mal. Entonces por tan solo cambiar esto, es cuando m aquí se puede decir que esto ahora ha ajustado el relleno en consecuencia. Entonces si en realidad tocamos esta foto selecta, podemos ver ahora que esta es tocable, solo cambiemos el estilo aquí solo para que esta destaque un poco más. Por lo que quieres agregar algo de relleno a la parte superior e inferior del elemento y también a la izquierda y a la derecha, Vamos a añadir un color de fondo solo un azul por el momento. Tan sólo para que destaque un poco, y luego un ligero radio de frontera. Sólo tienes que añadir un poco de curva a los bordes. Echemos un vistazo rápido a esto cuando lo guardemos, veamos cómo se ve. Está bien. Y luego una cosa más sólo para hacer este texto y salir un poco es sólo para cambiar el color de este texto aquí. De acuerdo, eso está bien por ahora. Por lo que vamos a hacer es agregar en evento de prensa a este botón para que puedan enfriar una función que va a la derecha siguiente. Entonces simplemente escribe esto de esta manera y di esto, uh, encontrar nueva imagen. Por lo que este será el nombre de la función de alrededor de dos derecho, que abrirá la recolección de imagen y que el usuario selectivo foto y luego subirá esto a la base de datos. Entonces es seguro. Esta copia real Andi. Vamos a usarlo para hacer una nueva función aquí arriba. De acuerdo, entonces esta será una nueva función. Es sólo que en dentistas un poco. Por lo que en el siguiente video, empezaremos a tocarte de inmediato esta función. 34. Construir la pantalla de carga parte dos: Ahora que hemos agregado las partes iniciales de nuestra página de subida a este archivo, empecemos a rile el resto de la página. Por lo que lo siguiente que necesitamos es una imagen yo d que podamos utilizar a lo largo del resto de esta página . Tan bueno puesto en cero por ahora. Pero vamos a crear una función natural, sobre todo para crear un I. D.único D. Así que hacemos esto. Es disfuncional. Ser llamado único. I d Andi Dentro de aquí, en realidad vamos a llamar a otra función para devolver una colección de letras y números que va a crear un I D único Pero ahora sólo podemos cambiar esto aquí para decir que este stock único, yo d. Por lo que crearemos otra función aquí. Simplemente llamamos a este s cuatro Onda que quieren devolver una secuencia de letras y números que son completamente aleatorios. Entonces vamos a hacer esto usando piso de matemáticas y estamos creando número aleatorio justo aquí. Simplemente arregla esto. Y hubo momentos así, solo para que nos permita obtener una cadena completamente aleatoria como esa. Nuestro proporciona un enlace. Teoh, todo este único yo d funcion solo para asegurarte de que obtienes el código exacto aquí. Simplemente sigue para conseguir este cerdo justo a la derecha. Entonces devolveremos una secuencia de estas funciones. Así que sea esta exportación de inicio. Y luego este Dr X cuatro. Pero lo que necesitamos para asegurarnos de que estamos haciendo está entre cada uno de estos, agregamos un guión, por lo que podría ser más fácil de leer. Entonces justo aquí vamos a poner un guión como este. Entonces ahora podemos copiar esto y pegar y otra vez tenemos 1234 pongo el siguiente en otra línea como esta. Entonces 12341 Hey, 34 Solo arregla esto un poco aquí y llámalo así. Entonces si ahora ejecuto esta página pero digo alerta, se detuvieron única yo d Que veas un ejemplo de lo que esto muestra? Simplemente muévelo a la función constructiva. Después iremos a la página de subida, obtenemos un problema aquí. No hemos puesto los corchetes por aquí. De acuerdo, ¿ Hay versus esa es una especie de idea única que va a estar consiguiendo Esta será la idea que se le asigne a nuestra imagen. Yo d aquí arriba. Esto es genial. Entonces ahora no podemos pasar al resto fuera de esta página, por lo que necesitamos importar unas cuantas dependencias más arriba. Aquí hay ladrones unos realmente venían de Expo. Esto serán permisos, Andi picker de imagen de Expo. Entonces la razón por la que necesitamos comisiones es que antes de poder acceder realmente a cualquiera de las fotos del usuario desde su teléfono, necesitamos realmente permitir este permiso y luego la recolección de imágenes es recurso teátrico que vamos a estar usando para seleccionar imágenes de su cámara. Por lo que vamos a escribir una función ahora para comprobar realmente si estos permisos están habilitados. Por lo que llamé a sus misiones de cheques. Esto tiene que ser un fregadero ya que tenemos que esperar un resultado. No podemos simplemente ejecutar esto. Normalmente, dice, en realidad, la misma disfunción aquí abajo, queda un oleaje para realmente hacer una llamada al almacenamiento de la base de incendios. Entonces, ¿por qué no tomar esto también? Entonces, en este cheque, las comisiones funcionan solo Hey, queremos comprobar si tenemos permiso a la cámara sobre la cámara rodada. Por lo que empezamos por solo crear una constante y luego decir espera comisiones. Entonces, usando este componente que hemos importado aquí arriba, Así que digo comisiones piden un fregadero comisiones cámara así. Y luego una vez que esto haya sido confirmado, en realidad vamos. Teoh, actualiza el estado. En realidad diría que el estado de la cámara. Por lo que siempre status su regreso, vamos a actualizar el estado para que realmente refleje esto. Por lo que una copia esta otra vez Llena el Camero. Y luego simplemente cambiamos esto para mostrar el rollo de cámara así. De acuerdo, entonces eso es lo que necesitamos solo para Y entonces si nos desplazamos hacia abajo por la página donde tenemos nuestra función de encontrar nueva imagen, lo primero que está a punto de enfriar aquí es esta función de chequear permisos. Entonces si ahorramos ahora, vaya a subir página y haga clic en seleccionar foto. Porque en realidad ya he comprobado estos permisos en otra aplicación en mi simulador de expo . No me ha preguntado, pero normalmente esto te preguntará ahora si permites estas comisiones y en el futuro video realmente muestra cómo se puede personalizar este mensaje en realidad no publicará tu app en las diferentes tiendas APP. Pero este es el punto donde en realidad le preguntó al usuario cuatro que comisiones. Por lo que lo siguiente que debes hacer es realmente asegurarte de que el recolector de imágenes esté abierto. Entonces de la forma en que hacemos esto, decimos let result o cualquier variablemente no sólo escucharemos. Esta sería simplemente la variable que se le asignan los datos que se nos asigna a la imagen real que escogemos. Por lo que nuevamente usamos una imagen de peso. Pickups estaban usando el recurso de recolección de imágenes aquí arriba que estamos importando, y luego decimos, Lanzan imagen, lanzan biblioteca , creo, y luego podemos pasar por algunas opciones justo aquí también . Entonces el que también necesitamos poner en sus tipos de imagen o tipos de medios y esto serían imágenes. Entonces esto asegurarnos de que no mostramos ningún video es solo cualquier imagen que tengan en ese teléfono y luego, decimos, permite la edición. Esto nos permite recortar la imagen de que es un cuadrado, y luego también estableceremos la calidad para que sea una. Este es el tipo de calidad más alto que podemos enviar de vuelta. Creo que empieza en 0.1 todo el camino hasta uno. Eso es sólo el, uh, nivel de compresión que en realidad se aplica a estas imágenes. Entonces en este punto, realmente queremos mirar a la consola, el resultado fuera de esta función justo aquí, así que cuando llamamos para seleccionar una imagen. ¿ Quieres bloquear este dedo del pie una consola? Entonces lo que vamos a hacer ahora antes de que estés fuera, el resto de la disfunción es solo a un ejemplo y mostrar qué datos están bloqueados para consultar. Entonces abre esa consola en el simulador al mismo tiempo y selecciona foto. Esto abre nuestra recolección de imágenes. Entonces podemos entrar aquí y seleccionar una foto. Entonces si escogemos esta son las opciones de edición. En realidad no puedo pellizcar un zoom aquí porque está asimilado pero normalmente consume nto Escoge el guante de fiesta. Quieres estar en la plaza, Es cualquier click elegir y vemos un resultado justo aquí. Entonces como puedes ver, es una opción que ha cancelado. Esto será cierto si es realmente clics cancelar aquí arriba. Entonces esto significa que en realidad solo queremos que se aplique el código de barras de la siguiente parte si se cancela. Es falso. Esto es lo que vamos a poner en el código. Siguiente, Así dicen si resultado cancelado. Entonces si esto es gente, pero luego continúa Teoh, crea el resto de nuestra función, y entonces lo contrario solo dirá registro de consola cancelado solo para que sepas lo que está pasando aquí en el futuro. Por lo que dentro de aquí, si los usuarios hacen clic en seleccionar foto que queremos hacer en este momento es llamar a otra función que procesará este proceso, esta imagen y subirla a nuestro almacenamiento base de incendios. Entonces cuando yo sólo diría registro de consola, uh, subir imagen, estaban llamando a una función diferente. Justo aquí lo que dicen su stock sube imagen que pasas en la U R I de esta foto hasta donde puedes ver aquí, obtenemos las alturas en el ancho en el tipo. Pero todo este tipo será imagen que los ojos de tus ojos brillaban justo aquí. Entonces esto es lo que vamos a estar usando al pastor Extra. Mismo resultado. Tú lo eres. Yo así siguiente queríamos Teoh es realmente crear esta función. Por lo que esta función también será un fregadero, ya que estará subiendo tres imagen. Por lo que en realidad estamos justo fuera esta función en el siguiente video 35. Construir la pantalla de carga parte tres: bienvenido de nuevo. Entonces antes de que podamos empezar a escribir realmente esta función, necesitamos ajustar realmente las opciones de almacenamiento dentro de Fire Base para estar listos. Por lo que en realidad ya tengo este va a montar. Entonces solo creo otro ejemplo solo para mostrarte. Entonces, cuando hagas click por primera vez en historias, verás una página que se ve así. Entonces tenemos que hacer es dar click en empezar y decir, Lo tengo. Esto básicamente ojos explicando que las reglas de seguridad de almacenamiento predeterminadas permitirán que los usuarios solo ajusten las cosas si están encerrados. Estaremos actualizando esto antes de que realmente terminemos esto. Vamos a ver esto con más detalle. Pero por ahora, sólo tenemos que hacer click en, lo tengo. Eso entonces te actualizará a este mismo lugar justo aquí. Entonces, ¿qué pasa con este mensaje de error? Pasó por eso You So cuando después subas a tu página justo aquí, estarás listo para empezar realmente a subir. Entonces lo primero que tenemos que hacer ahora que hemos actualizado esto es volver a nuestro co editor Andi,en Andi, realidad la escritura de acciones en esta función. Entonces lo que necesitamos hacer de la misma manera que tenemos en otros lugares es crear una referencia a esto. Entonces di que llama a esto. También queremos tener Los usuarios usan right disponible para nosotros. Entonces digo o corrientes usuario te d onda También necesitamos obtener la imagen i d. Así que vamos a conseguir esto de la misma manera que usamos en la parte superior de la pantalla. Vice hermanos correctamente sabih imagen i d Como puedes ver, es lo mismo aquí arriba y estamos usando esto funcionalmente creado anteriormente, hasta ahora tenemos thes púrpura configurado. Lo que necesitamos hacer ahora en realidad es establecer la extensión real fuera de la imagen por lo que podría ser un J peg un PNG un regalo. Ya sabes, todo este tipo de extensiones de archivos. Entonces vamos a corregir un poco de código ahora solo para comprobar qué tipo de extensión han utilizado. Por lo que usas una expresión regular para esto. Proporcionaré un enlace a este código también, solo para ayudar a escribir rápidamente. Pero lo que esto está haciendo esencialmente es buscar una secuencia fuera de caracteres en la cadena. Y fue entonces cuando encuentra un partido, se llevaría ese partido. Uh, podemos usarlo como variable, uh, en nuestro código. Entonces para nosotros, va a conseguir el último, Doc. Entonces? Entonces tenemos una cuerda como esta, buscará las lágrimas de este doctor de la última parada en el nombre del archivo. Y entonces nos va a pasar tenemos que ampliar. Eso se usa. Entonces digamos que la extensión te iguala. Está bien. Y luego la segunda parte de la teoría a la primera parte. Entonces cero, la primera parte sería en realidad todo antes del punto. Entonces todo esto en la segunda parte aquí, Bay B y G así, tal es demasiado rápido. Uh, revisa justo aquí para obtener la extensión del archivo. Nunca actualice los estados con el nombre de archivo real o el tipo de archivo para mantener el tipo de archivo actual . Es el extra. Por lo que solo comprueba rápidamente el tipo tú mismo correctamente. De acuerdo, así que sé que tenemos un tipo de archivo ahora necesitamos convertir nuestra imagen de solo a Tienes razón así en un blob que realmente podemos usar para subir a cinco un almacenamiento. Entonces lo hacemos creando otro rincón justo aquí con esta respuesta sobre esto dirá esperar de nuevo. Es por ello que tenemos que usar el fregadero. Justo aquí. Vete a buscarte. ¿ Lo estoy? Había una blob const. Una respuesta de peso, amor. Entonces lo que esto está haciendo es esta función aquí es crear una llamada I fetch a esto. Tú eres Yo Así que este camino que tenemos aquí arriba y entonces estamos convirtiendo esta respuesta en un bloque . Es esto lo que vamos a usar para actualizar? Sube esta imagen a un almacén? Entonces ahora queremos realmente establecer una ruta de archivo por lo que esta ruta de archivo en realidad será la imagen i d con el solo lo mezcla con el tipo de extensión. Entonces digo que ¿qué estado? El tipo de archivo actual. Esto sólo significa que estamos usando el mismo tipo. No estaban adivinando qué va a pagar la prórroga. Por lo que podemos usar esto para realmente crear una referencia al almacenamiento Onda. Obviamente, aquí arriba tenemos historia importada, justo así podemos usar almacenamiento hecho aquí. Por lo que decimos almacenamiento dot ref. Y esto será un usuario slash forward user i d imagen de barras completas cuando el niño será la variable de ruta de archivo que configuramos aquí. Por lo que en realidad esta será la ubicación en la base de incendios. almacenamiento para incitar aquí creará una carpeta para cada una de estas partes de la ruta. Sigo siendo una carpeta de usuario en una carpeta para este usuario, me d en un pliegue para sus imágenes y luego el nombre real de la imagen. Entonces lo que tenemos que hacer ahora es similar a la forma en que obtenemos información de la base de datos. Nos vamos a Teoh frío, haz una llamada Teoh Firebase Storage para realmente subir esta imagen. Entonces es una instantánea igual a aliento. Esta será esta referencia que colocamos aquí, pone blobs, esta blob que hemos hecho desde ahí vía tipo, y entonces realmente queremos escuchar para ver cómo los arriba gobiernos falseos siempre dicen sobre estado cambiaron. Por lo que la perspectiva aquí se actualizará a medida que se cargue el archivo real para que podamos decir progreso del registro de la consola . Entonces en realidad puedes acceder a cuántas mordeduras se han subido usando bytes transferidos, y luego realmente puedes obtener el tamaño total de la imagen con picaduras totales. Entonces si guardamos esto justo aquí, veamos, realidad, qué pasa si usamos esto en una vamos a subir el tratamiento de foto selecta de las opciones por defecto. Por lo que este solo clic elegir. Y si nos registramos aquí porque aquí hay un error. Por lo que es en línea 62. Vale, El problema aquí es que en realidad no hemos pasado por el ojo como se supone que vamos a ver aquí arriba. Dijimos subir imagen Nunca la pasé por aquí. Oiéndolo a captar. Esto por lo que realmente tenemos acceso a esto? Tú eres yo para el resto de nuestras funciones. ¿ Hemos guardado esto otra vez? Y justo a la misma cosa vino con queso. Entonces aquí abajo, se puede ver que el progreso se está actualizando a medida que se sube el archivo. Entonces si realmente entramos aquí ahora bajo fresco Así que tenemos una carpeta. Por lo que el 1er 1 su usuario y luego tenemos una carpeta para el Usuario I D y la carpeta de imágenes. Entonces aquí dentro, en realidad tenemos el I D único que creamos. Y luego la imagen real. Esta debería ser la imagen que subimos. Esto muestra lo rápido que se puede empezar a poner los diferentes aspectos de los cinco. Un almacenamiento en el recolector de imágenes juntos para seleccionar realmente una foto en subidas para que el siguiente video realmente mejore en esto Para realmente permitir que el usuario tenga un título. Onda. No haremos esta llamada de subida hasta que tuvieran un capturado, um, um, a esa imagen antes de finalmente mostrar realmente los datos actualizados en los pies para que estas fotos se puedan mostrar dentro de la APP. Estas son partes que miramos en los próximos videos. 36. Construir la pantalla de carga parte cuatro: bienvenido de nuevo. Entonces en este video, vamos a seguir trabajando en la pantalla de subida, y vamos a estar sumando en un área para que los usuarios ingresen su subtítulo, y vamos a mostrar el progreso fuera de la foto mientras deja de cargarse y además dar un poco vista previa de la foto que han seleccionado. Por lo que para ello, necesitamos hacer algunos cambios para subir pantalla. Entonces para empezar, si necesitamos importar un funeral, las cosas de reaccionan nativas. Por lo que esta será la entrada de texto. Podemos permitir a los usuarios que Teoh tenía en texto, y lo otro que necesitamos es el indicador de actividad, por lo que podemos mostrar un poco de icono girando, cargando mientras la foto se está subiendo. No pueden tirar de los dos de esos como este. También tenemos que sumar algunas opciones más a nuestro estado. Por lo que primero necesitamos una variable llamada Imagen seleccionada para que se pongan a enfocar. Necesitamos otra opción para ver si las imágenes cargando esto también se establecerán para forzar a comenzar por Andi Una variable más que sería una cadena fuera de subtítulos. Por lo que solían conectar esto cuando tenían esa leyenda, así que acabamos de guardar esto rápidamente, Simplemente avanza. Y entonces lo siguiente que queremos hacer es avanzar más abajo en el expediente justo aquí. Actualmente nos llaman la función de subir imagen. En cuanto el usuario selecciona las fotos, obviamente no queremos hacer esto. En cambio, queremos realmente cambiar el estado para que podamos mostrar un área diferente que realmente será donde estaremos agregando un título en esta información. Pero primero, sólo arreglemos esta pequeña área justo aquí. Apenas como falso correctamente. Simplemente re así. ¿ De acuerdo? Por lo que vuelve aquí otra vez. Estamos viendo esta pieza de código donde actualmente llamamos a la función de subir imagen. Entonces vamos a cambiar este mundo primero, sólo estamos saliendo esto, y vamos a estar estableciendo un estado en su lugar. Entonces lo que tenemos que hacer aquí es cambiar esto para decir, imagen seleccionada. Es cierto. También volveremos a crear una imagen única. Yo d Por si acaso ya han subido un voto y van a volver a subir otro. Eso es sólo asegurarse de que la imagen ideal sea única. Y entonces también queremos poner la imagen que eres yo en el estado para que podamos usar esto cuando mostramos una vista previa de las imágenes de los usuarios cargando. Por lo que después de que hayamos actualizado esto, podemos bajar hacia el desplazamiento real. Podemos actualizar la visualización de esto, pero primero, también necesitamos actualizar el estado aquí si cancelan. Por lo que siempre dicen aquí su imagen seleccionó a sus enemigos. Es esto Solo asegúrate de que sabemos que no hay imágenes seleccionadas actualmente para que puedas habilitar déspotas y otra vez así justo en este momento vamos a volver a movernos aquí abajo y cambiar un poco la pantalla fuera de vista. Lo que queremos hacer aquí es primero asegurarnos de que estamos trabajando insight el área de sesión fuera de la vista en vamos a agregar en un componente totalmente nuevo que envolverá todo vista. Entonces llamaremos a éste. Esto sería una vista, y sólo tendrá un estilo de flex. ¿ Qué? Entonces solo cierra esto aquí abajo y lo hizo y luego lo que queremos hacer en el estrecho dentro de esta vista es solo comprobar si una imagen está seleccionada actualmente o no. Entonces así como en un próximo apenas Teoh sólo para definir lo que estamos revisando. Por lo tanto, comprueba si se selecciona una imagen. Entonces, en realidad, entonces solo haz este cheque. Por lo que este estado en el que seleccionó es cierto, quieren ejecutar algo más de código aquí dentro. Y si no se selecciona una imagen, en realidad queremos mostrar esta área sobre abrigo aquí abajo así. Es por eso que agregamos este nuevo componente de vista rapero rapping aquí arriba solo una especie de ya mostrando algo. Entonces dentro de esta zona, también se quiere agregar otras vistas. En realidad podemos copiar este y cerrar eso aquí dentro. Podemos empezar a crear lógica mawr para mostrar realmente los detalles en el título y todo así. Entonces vamos a hacer primero es realmente copiar el título que usamos en la edad de los pies. Entonces aquí arriba donde tenemos título aquí pies. Vamos a copiar esto solo para usar el mismo estilo en todo el resto de la aplicación. Lo que normalmente comenzarías a hacer ahora es trasladar estos en estilos de línea a clases. Pero nos preocupamos por eso más adelante. Entonces cambiaremos esto para subir. Entonces asegúrate de que ese fusible se cerró. Iban a crear una marca nueva para ti aquí abajo. Dale este Lovett de relleno Solo espacio un poco más así que aquí queremos parar a mostrar donde el usuario puede agregar su título. Entonces si esto va a utilizar un componente de texto para vender sobre margen aquí también, Así que sólo diga subtítulo Y luego después de esto, cuando realmente agregue en una entrada de texto que importamos Vamos a empezar el video. Por lo que usaste esto igual que lo harías con cualquier otro componente que agregamos en algunos apoyos. Son bastantes apoyos para esto, así que vamos a correr por tres días ahora. Por lo que el 1er 1 es acreditable. Esto será cierto. También queremos establecer un Marcador de posición. Esto sólo diría, Introduce tu capturado. Quiero establecer una longitud máxima que en realidad puedan entrar en esta caja. Esta bahía, alrededor de 150 permitiría al usuario pasar por múltiples líneas, y en realidad estamos establecidos un número máximo de líneas también. Por lo que les dejaremos usar hasta cuatro líneas y luego esta prop aquí nos permitirá actualizar estrategia la variable de subtítulos en finca cuando aquí se entra algo. Entonces es un cambio sobre. El texto será igual a este conjunto. Estado capturado Eso es sólo escribe correctamente gusto capturado. Es esto solo actualizar el estado cada vez que se cambia este campo de entrada. Entonces ahora solo agregamos un poco de estilo simple aquí también. Tan solo para que este área de entrada de texto destaque un poco más tan guapo. Margen a la parte superior en la parte inferior, pondremos nuestras alturas fuera de 100. Eso es, um, palmaditas su arco alrededor de cinco pequeños bordes grises. ¿ Qué es eso? Látigo ese oleaje de solo uno en un poco de radio solo para que parezca un poco más agradable. Y entonces en realidad estamos configurados un color de fondo blanco apagado en un color de falla o color de texto apagado negro. Un caso. Eso es lo que necesitamos Justicia conmigo. Guarda esta otra mirada rápida, Solo arregla este común justo aquí. Entonces si vamos a echar un vistazo a la página ahora, Entonces si hacemos clic para seleccionar una foto si cancelamos esto se ve igual. El factoría Seleccione uno. Esto actualizará la variable de imagen seleccionada que establecemos. Está bien. Una cosa que necesitamos realmente chequear por nosotros. Nosotros siempre cuando pusimos el estado justo aquí. Asegúrate de usar único I d. sin imagen i d Así que acabamos de guardar esto y ejecutar esto de nuevo. Por lo que voy a subir página ya estaban revisados con cancelar en algún lugar No ha establecido la imagen seleccionada árbol variable. Cierto. Por lo que ahora usaremos esta zona. Así que selecciona una imagen que actualizará este bit justo aquí. Y se puede ver donde tenemos una caja de subtítulos y yo entrada de texto donde podemos agregar texting Justo aquí. Y también estaba el positor. Sólo eso. Solo arreglemos este pequeño error que creamos justo aquí. Radio de frontera y sólo tener una mirada rápida de nuevo. De acuerdo, eso es lo que he estado bien. En el siguiente video, realidad vamos a agregar un botón para que puedas publicar al subir la foto, y esto sería Bueno, estamos usados nuestro indicador de actividad para mostrar las tres imágenes realmente subiendo, y luego vamos a agrega una pequeña imagen debajo aquí para mostrarte una vista previa rápida de la imagen que realmente estás cargando 37. Construir la pantalla de carga parte cinco: para continuar. Nos estaremos quedando en la pantalla de subida en la siguiente jugada, va a estar trabajando nuevamente en su entrevista de abajo. Entonces si simplemente volvemos aquí abajo, así que justo debajo de nuestra entrada de texto, vamos a estar usando un toque pero un pastoso, que va a ser el botón real para subir la imagen. Por lo que dejamos esto ahora, así que un toque por debajo pastoso. Esto tendrá un evento que no sea de prensa, y vamos a sumar la función esto en un momento. Pero lo llamaremos subir, publicar. Es que se verá así. Agregaremos un poco de estilo básico a esto. A swells alinearán este botón para estar en el medio de la página. Le daremos un ancho de 170 y le agregaremos un margen a la izquierda y a la derecha off auto. Y sólo le damos a esto un color de fondo de parque solo para que destaque un poco en un radio fronterizo otra vez. Para mantener las cosas consistentes en esa página en algún relleno vertical, solo asegúrate de que nosotros la vertical con una letra mayúscula y luego en alguna caricia horizontal también y un interior de este toque ponemos una ciudad. Vamos a estar agregando un componente de texto el cual dirá subir y publicar. Simplemente escoge suspendiendo solo para este componente de texto. Want tenía un poco de estilo aquí. Simplemente Teoh alinea el texto al centro y cambia el color de la fuente para que sea blanco. Y luego sólo asegúrate de cerrar el toque de un pastoso. Sí, Bueno, así que acabamos de guardar esto y echar un vistazo rápido para ver. Esto está apareciendo. Entonces seleccionamos, subimos una foto, seleccionamos una imagen, y ahí vamos. Este es nuestro fondo. Justo aquí. Por lo que debajo de esto, queremos agregar algún texto que muestre el progreso real de subir Andi. Entonces un área de vista previa aquí abajo mostrará la imagen real que estamos cargando. Entonces lo siguiente que queremos hacer es en una forma de comprobar si se está subiendo la imagen real . Entonces si este botón ha sido presionado Así que haces un cheque al estado para ver si subirlo es verdad. Y luego si es cierto, vamos a sumar algunos componentes aquí. Sólo danos un margen. Habla de 10 solo para mantenerlo consistente con el estilo que hemos usado aquí arriba. Asegúrese de cerrar este componente. Y luego aquí vamos Teoh, agrega un trozo de texturas para mostrar el progreso de esta imagen así y luego debajo. En tanto el progreso no sea igual al 100% vamos a estar mostrando en indicador de actividad, que básicamente sería un poco spinner. Van a dar la vuelta mientras se están subiendo las imágenes. Entonces tendremos otro cheque para hacer esto el cual será chequeando lo mismo aparte los estados o simplemente decirlo. Se avanza. No hay 100 iguales. Bueno, entonces muestra nuestro indicador de actividad. Ahora, esto sólo tomará un par de utilería realmente simple. Entonces el tamaño que nos pequenos y luego un color el cual será azul por ahora solo para que destaque un poco. Entonces si esto es falso, Entonces si el progreso es 100% queremos mostrar un mensaje diferente. Y por ahora, esto sólo dirá procesamiento. No, no vamos a cubrir esta parte en este video, pero en realidad sería donde hacemos el llamado a la base de fuego para insertar el carril euro de la imagen en la leyenda todos juntos para que realmente se muestre en el feed por aquí. Así que estar trabajando en esto en un video posterior terminado. Esto es a lo que realmente se refiere la parte procesadora. Entonces no lo hagas aquí solo para que no estemos dejando esto sobre ningún contenido dentro de lo que ha tenido un componente de vista vacío solo para mantener las cosas aseadas aquí, Entonces lo vamos a decir si volvemos a echar un vistazo rápido a la pantalla de subida ahora, selecciona una imagen por el momento, se vería diferente. Pero si forzamos a ser este progreso, pongamos esto en 50. Subiendo para ser verdad. Cuando nos gusta esto ahora, debería de durar ver el indicador de actividad. Entonces ahí vamos. Una pequeña actualización con la imagen, y esto seguirá girando hasta que la carga sea falsa. Entonces una última cosa que necesitamos cambiar dentro de la vista. Entonces justo aquí abajo vamos a agregar una imagen a la fuente. Tienes razón, será el Tienes razón de la imagen que pusimos al estado encubrir cuando se seleccione la imagen . Tenía un poco de estilo simple aquí, Un oleaje para que pueda tener un margen superior de 10. Tan solo para mantener todo consistente. Fue que cada modo tamaño de cubierta para que la imagen se va a encajar con el tamaño que queremos establecer un ancho fuera 100% en una altura de 275 solo para llenar este espacio muy bien. Cerraremos esto. Consulta el Tenemos unos cuantos hit correctamente justo que estamos enfrentando. Voy a guardar esto. Por lo que dejamos estos avances. Andi subiendo, uh, partes del estado las mismas poco de más, justo mientras comprobamos esto. Por lo que debe saber. Muéstranos la imagen debajo. Entonces otra vez, este es un ejemplo sencillo, pero muestra cómo puedes armar rápidamente este básico te I para subir página. Ya sabes, lo que necesitamos hacer es realmente crear la función se va a llamar cuando el usuario presiona este botón porque puedes verlo. Es un aire por el momento porque esta función no existe. Entonces sólo cambiaremos esto. Subiendo de nuevo para forzar en eliminado. Avance a cero de nuevo fue seguro. Esto vamos a desplazarnos hacia abajo por esa página hasta que lleguemos a subir función de imagen así que aquí , vamos a estar agregando función de carga, publicación. Por lo que esto se llamará cuando el usuario presione el botón de subida. Entonces lo que esto realmente necesita hacer es comprobar que existe capturado. Entonces primero lo dirá. Este epígrafe estatal no está vacío. Entonces podemos ejecutar ese código aquí. Si por ahora está vacío, solo diremos alerta. Por favor, introduzca mi título así. Y ahora en realidad podemos seguir adelante y decir esta imagen de subida, el estado se llega. Entonces esto en realidad va Teoh? Pasé por el ojo que al usuario selecciona cuando elijan una imagen y luego espera a que en realidad hagamos clic en el o presione el botón de subida antes En realidad, entonces Parson es a través de la función de carga de imagen que hicimos antes así que en realidad ahora va a cambiar un poco esta función de subida de imagen para que podamos obtener correctamente el euro subido real desde la base de fuego. Por lo que primero necesitas hacer un par de cambios a la parte temprana que carga la función de imagen . El primero que vamos a hacer es fijar el estado, así que vamos a decir aquí, dedo del pie arriba cargando su árbol. Es cierto. Esto en realidad iniciará el giro de carga en todo por aquí empezando a actualizaciones. Una vez que hayamos hecho esto, podemos bajar para cambiar realmente nuestra función de subida. Entonces donde ponemos el ref justo aquí, queremos ajustar esto. Entonces, en realidad, en lugar de usar esta respiración constante, vamos a cambiar esto a la tarea de subida. Esto es que vamos a estar referenciando para el resto fuera de este el resto de esta función por lo que realidad puede agregarlo fresco al final aquí. Entonces en realidad decir pone No, esto iniciará la carga directamente aquí, y luego haremos una serie de llamadas a esta tarea de subida que reemplazará este enfriamiento real aquí. Esto sólo hace que sea mucho más fácil hacer diferente curso de diferentes aspectos fuera de la subida, como conseguir el euro de descarga cuando se completó la carga sobre poder realmente sentarse con éxito, mostrar el avanzar fuera de la subida. Entonces lo que tenemos que hacer es entonces decir carga tarea en estado cambiado. Esto es similar al código que estaban usando aquí abajo y ver estado cambiado. Usted dice sobre estado cambiado. Después establecemos una función y luego hacemos referencia a snapshot de nuevo como lo hicimos similar a este código. Pero es un poco diferente, y luego solo abrimos el retorno para esto y luego queremos dedo muy similar a lo que hicimos aquí abajo. Vamos a utilizar los bytes transferidos en picaduras totales. Es un progreso será un cool para chasquear bytes cortos transferidos, divididos por instantánea, picaduras totales. Hubo veces que es por cientos, pero se aseguran de que obtenemos un número real en lugar de nada de puntos decimales y así sucesivamente. Entonces solo miraremos esto rápidamente a la consola solo para que podamos depurar esto más fácil así . Sólo algo haciendo referencia a agradable y fácilmente. Y entonces realmente pondremos el estado Teoh reflejar esto para que se muestren en una página. Esto será secuela de progreso del progreso. Eso es muy pobre. Justo aquí que se alinea con la variable en el estado, Este de aquí. Por lo que necesitamos establecer y esta parte el código. Entonces en lugar de solo cerrar esto lo hará en Atacama y crearemos otra función justo aquí que captará cualquier error. Eso es código ¿Puedo haber encontrado? Entonces podemos decir simplemente registro de consola alguna vez con upload. Y entonces realmente te mostraremos el mensaje de error. Apenas a. Y por último, queremos tener otra coma. Y esta función se llamará cuando se haya completado la carga real. Entonces podemos cerrar la función real justo aquí en dentro de aquí. Sabemos que la subida está completa. Ahora podemos hacer una llamada a base de fuego para realmente sacar a la chica de esta nueva imagen cargada. En realidad podemos poner ahora al Estado para que diga que el progreso debe ser al 100% así. En realidad pueden decir subir tarea Aliento instantáneo. Obtener descarga. Ya tú. Sólo esperamos la llamada de vuelta de esto justo como para buscar la base de datos en cinco historias A para buscar esta u R l Así que conseguimos esto un nombre con un estado abajo en euro ahora, luego entra aquí. Entonces, por ahora, digamos alerta Donald, eres Oh, así que solo es probar esto para ver si realmente sacamos un euro de esta imagen. Entonces sólo para repasar lo que hemos agregado aquí, Así que en lugar de la referencia anterior donde habíamos puesto en una línea separada. Estamos usando este código aquí abajo. Lo hemos puesto todo en esta tarea de subida de uno. Llame aquí. Ahora. Hemos hecho llamadas subsecuentes para comprobar que el estado ha cambiado. Podemos subir ese progreso al respecto, Una comprobación de errores. Y en realidad tengo una llamada de vuelta. Si cuando hay imagen se ha subido por completo, no hay Verifica esto y ve qué tenemos. Dije que miraba a la consola, imbecil. Por lo que para guardar esto ve a subir pantalla, selecciona una foto. Tantos para entrar a un capturado. Entonces si entramos esto, presiona su botón de inmediato sin entrada capturada, me llega el mensaje de error para entrar subtítulos. Acabamos de poner algo aquí primero, Así que ahora está cargando. Podemos ver el spinner de actualización Progress mostrando que no hay 100% y muestra su procesamiento . Y ahora en realidad nos bajan tus viejas cuotas debilitadas en el resto de nuestra app. Entonces si hacemos clic en Aceptar, en realidad, revisa el registro para esto. Podemos ver este euro aquí. Entonces si abro esto en mi navegador, podemos echar un vistazo si esta es en realidad nuestra imagen, así que una vez que se vaya ese euro. Se puede ver que se trata de una imagen que hemos seleccionado de un teléfono subido a cinco base . Por lo que en el siguiente video, seguiremos. Teoh completa esto arriba. Ah, pantalla. Entonces hay procesamiento de texto aquí, como mencionamos se enlazará para realmente agregar esto descargado tu viejo que hemos creado, junto con la leyenda en el resto de nuestras fotos información en una base de datos de chimenea para que en realidad pueda subir nuestro feed en el usuario que creó esta imagen actualizará su perfil también. Esto es en lo que estaría trabajando en el próximo par de videos. 38. Crea la función para procesar la foto y añadir a la feed: bienvenido de nuevo. Entonces en el último video pasamos por actualizar la página de subida para que realmente podamos recuperar euro subido de nuestra imagen. En este video, vamos a tomar esta imagen en el subtítulo al usuario, ha entrado y crear una función totalmente nueva. En realidad estamos procesando toda su información y agregada a una base de datos. Entonces, empecemos. Lo primero que vamos a hacer es ir en realidad a la función de publicación de carga, que se acaba de golpear. Y queremos que Teoh realmente se aseguren de que nos usaron y presione el botón de publicar más de una vez. Entonces, ¿qué estamos haciendo en realidad? En primer lugar, es sólo comprobar si la carga es falsa antes de ejecutar esta función. Y entonces simplemente no habíamos más chequeado aquí abajo. Bueno, sólo mira a la consola. Sólo para que tengamos aquí una referencia que decir, ignorar a pesar de eso correctamente sólo para que no estemos subiendo o intentando subir esta imagen más de una vez, solo en odontología con esto también. Y entonces lo que va a necesitar dio es sólo doble cheque aún aquí abajo nosotros también y esto no va muy bien en el estado para ser verdad. y esa es la función que llamamos justo aquí. Esto no debería funcionar solo para asegurarse de que no estén ejecutando esta función más de una vez. Lo siguiente que tenemos que hacer es desplazarnos hacia abajo hasta donde realmente conseguimos subir la foto del autor del euro y ya no queremos alertar sobre esto. En cambio, en realidad quieres ejecutar una función totalmente nueva para que pueda eliminarla. Aquí es donde en realidad vamos a crear una nueva función aquí abajo en esta función se llamará carga de procesos. Esto tomará en la imagen que eres. Ah, entonces estamos procesando todo aquí dentro y luego qué? En realidad queremos dio cuando estábamos llamando y alertar solo dedo del pie mostrar la descarga Euro. Ahora voy a pasar realmente esto directamente a la función de carga de procesos. Recuerda usar eso nosotros porque en realidad estamos dentro de esta función de subida. De acuerdo, entonces aquí dentro, aquí es donde realmente vamos a crear el objeto. Iban a estar subiendo cargando 25 un espacio estatal. Entonces lo que tenemos que hacer primero es realmente establecer todos los datos que vamos a necesitar para crear nuestro objeto Así que primero, vamos a resolver exactamente qué cosas necesitamos. Así que digamos que construya objetos fotográficos ahora, como sabemos a partir de cinco. Un espacio estatal ocho foto tiene que tener al autor i d capturó la fecha y hora fuera marca de tiempo que se subió en la URL a la imagen. Entonces si solo hacemos una nota de thes, no podemos dejar de construir este objeto y entonces realmente podemos asegurarnos de que tenemos todo esto y la información disponible para nosotros. Por lo que tenemos el autor que hizo al usuario yo d la captura y será la leyenda publicada será una marca de tiempo. Y luego estás fuera como si fueras esta imagen euro que ha pasado a la disfunción. Entonces ya tenemos eso a las otras cosas. Cuando necesites establecer, uh, el usuario i d el título y la marca de tiempo. Eso debería ser todo lo que necesitamos. Lo que tenemos que hacer ahora, entonces, en realidad está establecido. Este conjunto de datos sólo decir, establecer información necesaria. Por lo que el uso correcto. Empecemos con este. Usaremos el fuego basado en funciones. Eran decir el uso actual del usuario listo. Ese es uno de ellos ordenados. Y entonces ahora necesitamos la marca de tiempo para que pueda hacer esto de manera correcta. Nativo, si solo tienes script de trabajo para que podamos usar javascript para esto. Por lo que puedes decir fecha y hora es un nuevo ahora desde el objeto de fecha El cruce de fecha en el objeto de fecha . Entonces dices que tómate tiempo, entonces podemos Vamos a movernos esto al lado para conseguir alguna vez sello de tiempo que podemos decir que la marca de tiempo es tan solo usado. Fecha hora identificó esto por 1000 igual que tenemos aquí el anterior correcto. Entonces podemos obtener el título del estado. Así que sea este epígrafe estatal. Esta es toda la información que necesitamos ahora para construir y crear un objeto. Por lo que lo siguiente se acaba de sumar a la se lleva a cabo. Entonces vamos a estar agregando este objeto en dos lugares. Uno es el alimento principal. Por lo que la zona principal aquí, donde tenemos todo sobre fotos en la segunda parte, será el perfil de este usuario lento. Bueno, yo perfilador cargado confeccionó todas sus fotos. Hay dos formas en la base de fuego que me ignoras estructuran esto. Entonces he agregado un ejemplo justo aquí, así como puedes ver para este uso de aquí hay un objeto fotográfico, y eso tiene exactamente los mismos datos que este objeto fotográfico lo hará aquí. Entonces es esencialmente espejar esta información que podría parecer más extraña provienen de otra base de datos, como mi astral, por ejemplo. Pero en cinco base es definitivamente una buena manera de estructurar las cosas. Solo es importante recordar si permites al usuario editar cosas o eliminar cosas. Necesitas asegurarte de eliminarlo de ambos lugares. Por lo que primer anuncio al feed principal. A mí me gusta hacer esto. Podemos decir simplemente base de datos ref. Entonces establecemos el camino. Se trata de fotos forward slash image I d Así que sólo tenemos que asegurarnos de que tenemos acceso a las ideas de imagen. Bueno, entonces si vuelves aquí arriba, podemos agregar la imagen que ve a esta lista de necesidad de información imagen. Yo t seré esta imagen estatal. Yo d Podríamos simplemente referirlo directamente desde el estado, pero me gusta simplemente hacer es solo debilitar doble cheque que tengamos toda la información que necesitamos un oleaje, y luego solo decimos, sets foto hermanas objeto toma este objeto justo aquí, que hemos poblado información de voz. Y lo pone a este camino por las reglas de seguridad que ya hemos hecho. Para que podamos ver aquí arriba. Si queremos crear un nuevo objeto de este camino siempre y cuando nuestro uso derecho, va a ser el valor de autor en este objeto. Entonces si miramos el código canaco esta idea, solo escuchamos canciones. Esto coincide con nuestro usuario. me permitirá d hacer esta solicitud de conjunto aquí abajo. Entonces al siguiente lugarme a actualizar no podemos copiar? Esto será excepto el objeto de uso hasta fotos. Por lo que acabamos de ver en la base de datos volver a los datos. También necesitamos asegurarnos de que todo se agregue también dentro del perfil del usuario. Por lo que decidimos usar los datos, así que tenemos que agregarlos para los usuarios para guardar usuario I d cuatro fotos slash y poner el objeto aquí Así que hacemos esto exactamente lo mismo tan bueno antes aquí antes de aquí. Entonces antes de slash usuarios cuatro slash el usuario i D que ya hemos configurado aquí, luego cuatro fotos slash cuatro slash la idea de imagen en contra de eso. Sé exactamente igual y luego establece el objeto fotográfico. Entonces en este punto, realidad para hacer en actualización a nuestros objetivos de seguridad para asegurarnos de que A para asegurarnos de que cuando estamos viendo perfiles de usuarios así dedo del pie mostrar un ejemplo este usuario justo aquí. Si hacemos click en esto ya que somos un usuario diferente a esto, en realidad podríamos acceder a sus fotos en este momento. Por lo que necesitamos actualizar la seguridad de los usuarios. Entonces vamos a copiar este perfil. Imagínate uno justo aquí y cambia a fotos. Esto asegurará que si queremos acceder a las fotos de este usuario, podamos leerlas. Podemos editarlos, pero podemos ver aquello que así necesitamos para esta parte. Entonces si publicamos eso y volvemos a nuestro código, eso es sólo terminar disfuncional. Entonces digo, manda una alerta justo aquí para guardar las imágenes cargadas. Y luego restableceremos el estado así que nos aseguraremos de que subirlo ahora sea poesía cercana configurada aquí. A ver cómo se lo dijo a True. Ahora podemos hacer retroceder esto para que se vuelva a forzar. Podemos decir que la imagen seleccionada es ahora, amigos y luego podemos restablecer la leyenda para que esté vacía. Andre dijo: La imagen que eres yo al vacío también. Entonces esto es todo lo que necesitamos para procesar realmente al subir una imagen. Es Ahora vamos a probar. Por lo que vamos al perfil la página ir a subir parece fotografiar esta de aquí. Teníamos un pie de foto aplicado. Fue capaz de arreglar este nombre variable justo a la que su fecha hora. Sólo tienes que volver a ejecutar esto. De acuerdo, entonces aquí está nuestro comité de mensajes subido. Entonces si sabemos checar la base de datos, podemos ver esta nueva imagen i d ha sido creada. Ahí está toda la información para esta foto. Este es un usuario I d. Entonces si vamos a eso un perfil, esto es que acabo de establecer un perfil justo aquí con Simmons de información dice otro ejemplo , usuario. Pero ahora se crea esta foto objeto de nuevo de la imagen i d. Y ahí está la información en este momento que si vamos a nuestra página de pies y una frescura, no estamos recibiendo el tipo de respuesta esperaría por la forma en que este pie actual se armó la función. Por lo que en el siguiente video, buscaremos realmente actualizar esto y empezar a cambiar la forma en que los perfiles de visualizados también para que también pueda mostrar en elige fotos en su página de perfil. 39. Actualizar la lista de FlatList para mostrar fotos subidas: bienvenido de nuevo. Entonces ahora que hemos actualizado la página de subida para que ahora podamos tener todas nuestras imágenes subidas sean añadidas a la base de datos ahora necesitamos actualizar realmente los pies para que cada imagen aparezca de la manera que debería. Entonces por el momento, como podemos ver aquí, estas imágenes son realmente aparecen en la misma. De lo único que en realidad es diferente. Aquí hay tres nombre de uso, pero sabemos que los datos de imagen para cada una de estas fotos son diferentes. Entonces tenemos que hacer es abrir la página de los pies. Entonces si solo abres los pies dot Js solo golpea y quieres desplazarte hacia abajo hasta donde actualmente estamos agregando estas imágenes recuperadas a la finca. Entonces, como puedes ver, solo escucha la función de alimentación de carga. Ahora lo que tenemos que hacer es tomar todo este código justo aquí un movimiento esto en una función de piedra . Por lo que queremos una copia. Este Andi, sube aquí justo por encima de esta carga, función de alimentación y crea una función totalmente nueva. Se les llamará agregar a lista plana. Ahora, esto tomará un número fuera de parámetros que la foto alimentan, los datos y la foto, y luego Solo necesitamos acelerar este nuevo código. Lo que tenemos que hacer ahora es desplazarnos hacia abajo hasta donde seleccionó todo este código. Es todo desde aquí hasta la variable de objeto fotográfico. Justo aquí. No voy a decir eso. Agregar a lista plana y luego pasar todos los parámetros que acabamos de establecer. Eso fue foto pies, foto de datos. Entonces si guardamos esto y corremos ahora, veamos qué obtenemos. Entonces en el momento que tenemos una variable indefinida que Así sólo volvemos a una nueva función y aseguramos de que la definimos. Por lo que tenemos una referencia a esta clase de padres todo el tiempo, Así que es en este simulador guardar y echar un vistazo otra vez. Y aquí tienes. Se puede ver que en realidad ahora se está actualizando con toda nuestra foto. manera rápida, refresca. Podemos ver esto en realidad es actualización. Por lo que nos acercamos a otra foto Ahora podemos decir bien, se mudó de nuevo a un feed. Y si somos frescura, ahora deberíamos ver que la foto ha sido actualizada. Se actualiza feed en esta nueva foto. Ahora aparece debemos notar también esta vez actualizaremos cada vez su fresco solo para demostrar que está recibiendo la información más reciente. Entonces lo que realmente podemos hacer a continuación es actualizar los perfiles para usar este nuevo método fuera, buscar las fotos y mostrarlas. Por lo que en el siguiente video, comenzaremos a actualizar cada uno de los perfiles de usuarios aquí en de Haute por nuestra cuenta, ingresó perfil para mostrar o las fotos asociando con cada usuario. 40. Crea un componente para mostrar la lista de fotos en las diferentes screens: Por lo que ahora necesitamos encontrar la manera de replicar aquí esta lista. De todas nuestras fotos para cada fuera de los perfiles en los que podemos movernos así. Esto necesita mostrar sólo las fotos de este usuario. Andi para pantalla de perfil real resultó perfil en fotos en aquí. Ahora podríamos simplemente tomar el código que hemos utilizado en esta página de hazaña y replicarlo en el perfil de usuario y en la página de perfil. Pero esto simplemente sería volver inútilmente repitiendo el código que ya hemos escrito. Entonces lo vamos a hacer en su lugar es crear un componente que muestre que la cosa fotos como esta, pero en realidad nos deja elegir dónde queremos mostrar el feed principal que tenemos aquí o si solo se trata de fotos de un usuario. Entonces lo primero que vamos a hacer es realmente crear una carpeta llena de esos componentes para dentro . Entonces van a entrar aquí y crear una nueva carpeta como esta justo dentro del directorio APP llamado Components. Y luego dentro de esta carpeta, queremos hacer un archivo totalmente nuevo. Ahí se va a llamar lista de fotos dot Js. Dentro de este archivo totalmente nuevo, vamos a crear esencialmente una pantalla que apenas está mostrando esta lista. Por lo que para ello, tenemos Toe agregado todo lo que normalmente trabajas para crear una pantalla por lo que importar reaccionar de reaccionar importaría todos los componentes que necesitamos de reaccionar nativo. Es que estar tocado con una hoja de estilo de lista pastosa y plana que va a necesitar, como para ejecutar el componente de texto un componente de vista e imagen, y esto sería de se vuelve nativa. También necesitamos asegurarnos de que importamos la base de datos. Autorización Andi. Por lo que sólo en lleno de fase. Y entonces necesitamos asegurarnos de que esto vuelva a los directorios de la carpeta Conflict on Conflict of Js, y ahora realmente podemos crear la clase que sostendrá con la información para un servicio de componentes de, de todos las otras pantallas, se extenderá componente reaccionar. Es una vez que creas esa clase así en la parte inferior de aquí abajo, queremos decir realmente exportar la lista de fotos de la gente. Esto permitirá que el componente se utilice al igual que otras pantallas Usted. Entonces la forma en que creamos aquí estas pantallas para que se exporte el perfil uno. Es exactamente el mismo proceso para crear realmente un componente. Por lo que dentro de aquí, queremos realmente movernos a través de todas las funciones que estábamos usando para que los pies en la caída de alimentación en la pantalla de los pies. Por lo que esto incluiría países como la comprobación de piso aquí. El convertidor de tiempo Onda tenía dos lista plana eran copia, pero las cosas tanto en alimentación de carga en realidad descargan nuevo. Así es. Toma todos estos. Por lo que este es todo el código que normalmente han tenido que volver completamente derecho para usarlo en una ubicación diferente . Entonces me llevo todo esto. En realidad tomas el voto de las funciones de render porque todo lo que necesitamos es la parte de lista plana. Esto podemos quitar el resto. Por lo que tomo la función de render y luego elimino todo lo que es no son planos. Lista dicho son lista plana, creo que está justo aquí. Entonces, en realidad, toma la parte de carga. Esto Bueno, podemos mantener todo consistente. Basta con comprobar con esto líneas arriba, Teoh. Eso es justo ahí. Entonces nos acaban de quitar. Probablemente se enseña que debería ser todo lo que necesitamos solo para comprobar que tenemos al menos un componente de padres para todo el retorno. Y luego tenemos un cheque aquí para ver si estamos cargando, y eso está cerrado aquí abajo. Por lo que casi en realidad completa con esto. Tenemos que hacer un par más, uh, crear funciones cómodas aquí arriba. Por lo que necesitamos agregar ocho constructor sin tropos. Justo lo mismo que nosotros misma cosa que hemos estado haciendo de todas nuestras pantallas también. Y vamos a establecer un conjunto de estado inicial, actualizar y establecer la carga y la carga comenzará como verdadero. También queremos un componente en el que se monta aquí, en realidad va a estar revisando la prop que se envía a este componente. Entonces esencialmente, ¿qué pasará si usamos este componente en la pantalla del perfil, Por ejemplo, nos aseguraríamos de que primero importamos el componente aquí arriba abajo. Actualmente estamos mostrando las fotos cargando. Texto por sí mismo utilizaría en realidad este nuevo componente. Entonces sé algo como esta lista de fotos. Podemos tener nuestras listas fuera de los apoyos por aquí así, y esto significa que en realidad podemos pasar diferentes informaciones a través del componente, dependiendo de lo que necesitemos. Entonces obviamente el home feed aquí solo mostraría todas las fotos, Pero el perfil que uno necesita sólo mostrar las fotos de este usuario, por lo que pasaremos esta información a través de los apoyos. Eso nos preocuparemos en un momento. Entonces primero, volvamos. Teoh. Usted componente por aquí y en el componente se monta la función. Vamos a establecer una constante sólo para establecer una serie de variables que vendrán directamente de los apoyos. Esto serán cosas esto será una variable aquí llamada Is User en la otra se usará a la derecha y los obtendremos de los apoyos y luego simplemente diremos, Si es usuario es verdad. Sabemos que este va a ser un perfil para que puedas usar al usuario I d para mostrar realmente la información correcta en la mitad de esa lista. Y si no, sabemos que va a ser este alimento hecho. En realidad diría que esta carga pies, y sólo estamos pasando cadena vacía aquí. Y si es el usuario más un feed de carga pero en realidad pasar en el usuario, yo d. Entonces esto después significa que yo haga un cambio a nuestra función de alimentación de carga. Entonces me desplazé hacia abajo hasta que tengamos esto. En realidad voy a decir use la escritura aquí por defecto estará vacía y podemos hacer un cambio hecho aquí. Por lo que actualmente estamos poniendo este ref directamente en frío. 20 fotos de afecto iban a cambiar esta carga segura. Ref, acabo de arreglar esta dirección. Esta es la parte por defecto que vamos a usar. Podemos cambiar eso justo aquí. Pero si el usuario i d no está vacío. Entonces, en otras palabras, si realmente pasamos la información a través de la disfunción, queremos cambiar esto. Es una bahía igual a las fotos reales de estos usuarios. Por lo que dije el mismo proceso que en establecer el ref desde la base de datos, pero cambiará la fiesta real. S o B ref utiliza que el usuario i d sea niño con esto. Y luego a partir de ahí obtendríamos sus fotos. Así que corre a través de esto otra vez cuando realmente agregamos esto para las otras pantallas. Pero por ahora, esto debería estar casi listo para realmente ahorrar en, echa un vistazo y echa un vistazo en componente. Entonces es seguro. Esto ahora para ir Teoh perfil punto Js en una buena escuela derecha a la cima e importar este nuevo componente. Entonces haz eso así. Entonces sus componentes para la lista de electores escondite dot Js Una cosa que realmente necesitamos hacer aquí un oleaje es si el usuario está registrado y necesitamos pasar al usuario, yo d a través del estado porque realmente necesitamos esto ahora para un componente. Entonces si te mueves más abajo, aquí es donde estábamos mirando antes de que podamos un lugar, toda esta pieza de código justo aquí sin nuevo componente como este. Pero si lo pasáramos por sí solos así, no funcionaría. Necesitamos realmente establecer estos apoyos que definimos antes. Por lo que el 1er 1 b es usuario y esto será cierto. El próximo aspirante usuario i d. Y este será el habitual yo d que pusimos hace apenas un momento en el estado aquí arriba. Sólo comprueba eso, pero está incorrectamente. Entonces si decimos esto ahora, una cosa más que necesitamos conseguir realmente es la navegación temática. Necesitaremos este buen oleaje. Entonces decir esto apoyos, navegación, navegación, solo pasar todo el camino a través de esto significaría que si quieres acceder a la vista, comentarios o cualquier cosa que realmente interactúe y añada una nueva pantalla o cambios a la pantalla página que estaban viendo. Necesitamos los apoyos de navegación que construir para hacer esto. Entonces si decimos esto ahora, echemos un vistazo a lo que tenemos Así que vamos a nuestra pantalla de perfil y podemos ver ahora que estamos recibiendo las fotos de este usuario. Pero por el momento se puede ver aquí no está cambiando en realidad. Ah, la función de los juguetes recién empezando, mostrando las mismas fotos de usuarios Eso va a echar un vistazo a Walker porque en esto, como se puede ver aquí, el problema es por el nombre de esta variable justo aquí. Por lo que no está permitiendo que este camino se actualice realmente. Entonces si guardamos esto después de que hayas hecho este cambio y echa un vistazo al perfil, ahora solo deberíamos ver fotos de este usuario. Ahí vas. Es ahora que sabemos que el componente funciona. Podemos actualizar esto a través del resto fuera de nuestra app. Por lo que esto significa la próxima policía. El siguiente rostro me para actualizar es thea. Otros usuarios perfilan así para cualquier otro uso para que podamos hacer click en, necesitamos hacer que esa foto se muestre bien, Así que primero vamos a la página de perfil de usuario por aquí con cualquiera para importar un componente de nuevo. Entonces lo mismo que hicimos por aquí, Así que solo copie esto y péguelo en esta página. Vamos a guardarlo para comprobar que las partes en Irving y corregir de nuevo y luego otra vez en SIDA es donde de la misma manera llamamos al componente aquí. Simplemente desplácese hacia abajo hasta la parte de render de esta pantalla. Es como lo mismo, la misma parte y pegar en cualquier componente. Y si revisamos a alguno de estos usuarios ahora, podemos ver que estamos consiguiendo sus fotos. Vamos a comprobar con el otro ejemplo aquí abajo. Tenemos lazos fo. Por lo que con el fin de conseguir estas fotos de usuarios, sobre todo el ejemplo oneque aparezcan correctamente. Asegúrate de nuevo de actualizar la base de datos en base de fuego. Similar Toby lo hizo en el video anterior. Pero así es lo fácil que es crear realmente un componente que puedes usar para replicar diferentes partes de Cote a través de múltiples pantallas. Esto es realmente importante y algo bueno que estar acostumbrándose a hacer si vas a estar creando elementos reutilizables de código. Entonces si esta condición se usa para botones, vale la pena un cierto tipo de botón que quieres usar un nick y luego, como hemos hecho en este ejemplo, tener diferentes variantes de este componente que puedes usar dependiendo. Si es el perfil aquí, queremos solo mostrar uno usa fotos o los pies. Entonces, por último, solo actualicemos el feed principal. Por lo que de nuevo, queremos asegurarnos de que importamos este componente en la parte superior aquí en Don't. Aquí podemos eliminar toda esta lista plana en las partes de carga. Bueno, eso es sólo copiar esto de esta página. Entonces para este ejemplo, lo que realmente haríamos es, digamos, digamos, enfocarnos para su usuario. Podemos quitarle al usuario I d. Así que si guardamos esto A simplemente cargando lo mismo y esto realmente significa también, podemos eliminar todo este otro código para que pueda ver cuando recarguemos. Todo sigue funcionando. Entonces si quitamos la carga, función pies y luego aún tratamos de refrescar todo aún funcionando porque esto ahora está todo contenido dentro de la página de componentes reales aquí puedes quitar todo este abrigo e incluso esto esta bien, podríamos incluso mover estos sedimentos de ese estado. ¿ Qué muestra cómo podemos mantenerla nuestras pantallas realmente livianas y solo tener la cantidad mínima de código que necesitamos en las pantallas reales y componentes utilizados para crear realmente potentes AP. Por lo que en el siguiente, videos estarán en el próximo par de videos comenzarán a buscar en agregar en una sección de comentarios , y luego finalmente pasaremos a sumar futuros para realmente iniciar sesión y registrarse para usar ese . 41. Construir la pantalla de comentarios parte 1: Bienvenido de nuevo en este nuevo módulo, vamos a estar mirando la sección de comentarios por aquí. Entonces donde actualmente tenemos esta vista comentarios abajo en esta pantalla vacía, vamos a estar llenando esto para que realmente podamos mostrar cualquier comentario existente Esa foto tiene en permitir que los usuarios iniciados puedan realmente agregar sus propios comentarios. Entonces tenemos que hacer primero es en realidad abrir la pila de comentarios por aquí. Solo movamos a este camareros de barra lateral para ahorrar algo de espacio. De acuerdo, Entonces queremos hacer primero es cambiar estas referencias existentes. Tenemos que subir. Vamos a cambiar. Estos deberían ser comentarios. Dice éste aquí y entonces realmente quería el fondo de la página también. Por lo que es seguro este primero. Entonces tenemos esto actualizado. Ahora. También necesitamos importar algunos componentes que necesitamos estar usando para su pantalla. Por lo que va a haber tres componentes nuevos que necesitamos. Teoh aspirante al toque chico, Pasty. Era una necesidad de entrada de texto. Andi, suficiente uno se llamará teclado evitando Yee, hablaremos más de cable evitándote hacia el final de este módulo. Lo siguiente que debes hacer es actualizar realmente el estado para tener esta nueva matriz aquí llamada lista de comentarios. También queremos agregar una nueva función, una nueva función llamada check grams ¿cuál derecho? Deberían ser muy similares a las funciones del mismo nombre que hemos utilizado en otros archivos. Y necesitaremos enfriar esto desde el componente hizo montar función de la misma aquí. Entonces digo este doc, revisa Haram's y ejecuta esto al final el componente sí función de montaje después de esto, queremos realmente traer algunas de las funciones rechazadas en otras páginas. Entonces primero, vamos al componente de lista de fotos que hicimos antes. Y queremos que Teoh tome el piso check on time convertidos funciones aquí, por lo que va a seleccionar estas y copiar y pegar en un nuevo archivo. También queremos entonces abrir la página de subida y tomar thes s cuatro y únicas funciones I D porque vamos a estar necesitando estas también. Simplemente pega esos en y seguro. El siguiente área que queremos ajustar es la parte superior teatral fuera de la pantalla aquí. Entonces si nos desplazamos hacia abajo hasta la parte inferior de nuestra página actual y miramos la función de render real . Por el momento, aquí no tenemos mucho contenido. Pero lo que queremos hacer es cambiar la pantalla aquí. Entonces donde actualmente está configurando este estilo quieren cambiar esto. Por lo que sólo dice flex uno. Esto significa que este texto de comentarios aquí no se envía a la pantalla porque se quiere agregar aquí algunos componentes nuevos. Por lo que lo primero que quieren hacer en realidad es reutilizar los componentes que tenemos en la página de perfil de usuario . Entonces si vamos a ese perfil de usuario dot Js archivo desplazado hacia abajo. Queremos llevar esta zona aquí donde tenemos el botón volver atrás el título aquí, que es perfil Andi este vacíos comparativos aquí. Entonces si seleccionamos todo esto en una copia y luego pegamos esto justo debajo de este componente de vista justo aquí. Entonces si decimos esto y solo checa lo que tenemos que quieres cambiar esto para decir comentarios , por lo que para abrir nuestra vista comenta esa pantalla. Ahora podemos ver que tenemos algo un poco más uh, lo que queremos para que puedas usar este botón volver atrás. También necesitamos que Teoh haga unos cheques más aquí. Entonces por el momento, todo lo que estamos haciendo es comprobar si el usuario está bloqueado o no, lo cual está bien. Necesitaremos eso para permitir que los usuarios publiquen realmente un comentario. Entonces en esta nueva sección de comentarios que estamos construyendo si estás bloqueado o bloqueado, en realidad puedes ver los comentarios existentes. Pero no puedes publicar uno a menos que realmente te encerraras. Entonces debajo de este componente de vista de cierre justo aquí, vamos a hacer otra comprobación. Entonces esto será para ver si en realidad hay algún comentario para esta foto o no. Entonces de esa manera vamos a hacer esto es revisando este punto estados, lista de comentarios doc Iban a comprobar la longitud de esto. Entonces si esta longitud es cero, eso significa que aquí no hay comentarios, por lo que puedes mostrar en estado vacío si esta longitud no es cero. Sabemos que hay comentarios, por lo que en realidad puedes simplemente jugar una lista plana fuera de los comentarios aquí. Tenemos una lista plana aquí. Tendrán todos los datos. El dato en realidad será este estado. Comenzar lista. Ya terminamos de escribir esta lista de murciélagos fuera en un momento primer encuentro, realidad desplácese hacia arriba y en realidad verifique si hay algún comentario. Entonces donde actualmente según este cheque función Paramus. Vamos a subir y terminar de escribir esta función ahora. Entonces para esta función de chequeo gramos que queremos hacer es primero ir al perfil de usuario, Doctor. Sí, Page otra vez. Y copia la función de cheques gramos a partir de ahí. Sólo para que no tenga que reescribir demasiado de esto. Entonces fue copiar y pegar esto, y vamos a hacer algunos cambios. Entonces en lugar de buscar usuario, yo d. Vamos a buscar la foto. Id's tiene que ser la foto. D off the comments on my change it here? Sí. Y aquí y esta función también será diferente se va a llamar fetch comments. Es en realidad escribir esta función justo aquí, así que fetch Comence toma en foto. I d Entonces en realidad escribiremos esta función para buscar los comentarios en el siguiente video 42. Construir un scen de comentarios parte 2: antes de que podamos realmente escribir esta función de buscar comentarios. Solo necesitamos hacer un pequeño cambio a nuestra lista de fotos. Una sobrecarga de componente. Entonces queremos a Teoh. En realidad me desplazé hacia abajo a donde estamos dejando que los usuarios realmente abran esta pantalla de comentarios de vista por lo que estará abajo en nuestra función de render. Entonces justo aquí estamos actualmente cool navigation navigation navigation comments. Entonces en realidad, cuando abrimos las pantallas de comentarios su ah 157 online que actualmente pasa por esto como ideas de usuario . Queremos realmente cambiar esto a B foto I d Una vez que hayas hecho este cambio para guardar, y luego podemos volver a nuestra pantalla que viene. Por lo que ahora hemos actualizado esto. Sabemos que los gramos se pasarán correctamente con la foto. Yo lo d en realidad aquí. Entonces lo primero que podemos hacer es que vengamos a encontrar eso como esto. Entonces tenemos acceso a su clase de padres incluso mientras realmente estamos buscando cosas de la base de datos en las bases de datos donde vamos a estar usando a continuación, vamos a decir aliento de base de datos, comentamos, luego el niño a ser la foto yo d. Así que justo aquí nunca ordeno este mi hijo fuera alojado para que se ordenen por el momento que en realidad se publicaron los buscará una vez y después, como hemos hecho como antes lo hicimos para las otras veces afectamos a un traidor para decir función Snapshot. Basta con revisar la semana. Cierra esto. Aquí, mueve este corchete de cierre extra aquí, y esto realmente va a buscar los comentarios de la base de datos. Entonces si echamos un vistazo a nuestra base de datos ahora en nuestra base de datos aquí, podemos ver cómo se ven realmente los comentarios. Entonces tenemos los comentarios tema aquí y luego A I d. Sensiblemente, la foto I d. Así que cada foto individual. Si tienen algún comentario, tendrán su propio objeto. Justo aquí y dentro. Encontrarás los comentarios Soto tener el próximo i d. en una información real para cada comentario. Entonces ahora que tenemos esto, sabemos que cuando busquemos esta llamada justo aquí, va a buscar todos los comentarios dentro de esta foto que d ordené para el momento en que la publiquen . Por lo que ordenaron para el momento en que fueron publicados. Eso son estos atributos y variable justo aquí. Después tendremos acceso a toda esta información. Entonces primero vamos a comprobar realmente que esto existe. De lo contrario, podemos decir que no hay comentarios. Por lo que digo constante existe un fallo de instantánea. Y entonces sólo podemos decir si existe en comentarios a la lista plana en. De lo contrario, sabemos que no hay comentarios. En realidad podemos actualizar los estados así y decir que la lista de comentarios está vacía sólo para estar doblemente seguros. Por lo que ya casi terminamos con esta función aquí. Sólo tenemos que realmente en una época, revisar aquí abajo para decir era de captura y nos consolaremos. Mira estas áreas hacia fuera, está arriba. Ella necesita ser así. Esto captará cualquier error que podamos encontrar al buscar de la base de datos. Por lo que solo necesitamos ahora agregar algún código aquí. Si hay comentarios por lo que dirá son datos iguales snapshot como esta? Entonces en realidad podemos definir nuestra lista de comentarios será igual a nuestra lista de comentarios patrimoniales. Y lo que realmente haremos ahora es por cada comentario que encontremos pasará esto a través de una función separada que en realidad agregará esto para afirmar similar a lo que hicimos con un pie de foto . Esta nueva función se llamará Añadir comentarios a la lista. Esto pasará en la lista de comentarios. El dato y la variable actual hacen sobre set. Esta será nuestra nueva función que vamos a estar usando a continuación. Eso es sólo una copia. Siguen teniendo referencia al mismo. Por lo que es un cuatro comentarios en datos que ha tenido que comprometerse a listar. Y luego acabamos de pasar mientras acabamos de establecer comentarios, enumerar datos y comentar, que definimos justo aquí. Esta sería la i. D. La idea común de h avec lamenta. Entonces solo para probar esto ahora vamos Teoh, en realidad encierra esto a la consola aquí arriba. Es una mirada constante. Paquetería con esto a través. Veamos qué es lo que realmente obtenemos cuando ejecutamos esto. Ahora, justo mientras probamos esto, copiaremos y el último auto solo por un momento. Entonces si abrimos cabildo bien y vamos a un simulador, doy click en pocos comentarios. Podemos encontrar que esta foto no teníamos comentarios. Si nos desplazamos hacia abajo hasta el 1er 1 donde habíamos establecido un común en la base de datos, podemos ver aquí que ahora estamos obteniendo esta información, que es justo lo que necesitamos. Entonces ahora realmente podemos procesar esto y agregarlo a nuestros estados. Y luego finalmente, podemos crear una lista plana. Volvamos a un abrigo y solo deshacemos este cambio 2 de mayo. Y para guardarlo de nuevo, solo tenemos este remate de Teoh en un momento, vamos a volver a subir a esta nueva función que acabamos de hacer. Por lo que en este anuncio comentó disfunción. Primero eliminamos este registro de consola justo aquí el día, como lo hicimos antes de crear una referencia dos clase aparente. Entonces dice que es igual a esto, pero también definió el objeto que viene justo aquí. Este será un truco o dos comentarios de datos. Simplemente podríamos obtener la información correcta de la matriz. A lo que necesitamos hacer similar en el feed de fotos otra vez, soy yo para acceder a la información fuera del autor. Esto sería usuarios de arresto de base de datos. Y entonces este será el objeto que viene aquí. Acaban de definirse. Botha. Por lo que usaste al usuario. Yo d aquí. Y luego queremos acceso para usar el nombre justo dentro de estos sismos. Y como lo hacíamos antes se decía, una vez valoramos y luego devolvía una instantánea como esta en como antes de nosotros donde solo queremos captar cualquier error y miramos a la consola. Esto solo es útil para depurar cualquier cosa que podamos encontrar que no sea exactamente lo que esperaríamos . Ahora que tenemos esta información, realidad podemos procesar todo sobre agregar un comentario a la finca. Entonces como antes, solo estamos comprobando que este nuestro usuario existe. Estoy seguro de que a estas alturas podrás escribir esto en poco tiempo hasta que así si existe. Entonces ahora que tenemos todos esos cheques aquí, simplemente podemos decir lista de comentarios, empujar, luego enviar a través de toda la información. Dos fincas. Entonces primero como la idea del comentario casual comentario en sí como este el sello de tiempo cuando se publicó, en realidad se formaría así. Nunca pasó información muy publicada para quedarse. Entonces la marca de tiempo. Queremos información sobre el autor. Usamos estos datos aquí que simplemente factualmente nombre de usuario. También consigo la oferta. A mí me gustaría esto. Esto es una mentira. La información que queremos pasar al estado. También estamos en realidad establecidos el estado para quedarse que hemos terminado de buscar. Así dicen refrescar a la gente, y cargar ahora es una fuerza. Por lo que es seguro esto y ahora bajaremos a la función de Orender y en realidad actualizaremos sobre bono justo fuera de la lista plana. Por lo que sólo podemos jugar estos comentarios también. No lo es. Es desplácese hacia abajo y averigüe lista plana. Por lo que quieres empezar agregando en el resto de los apoyos. Tan refrescante es esta actualización de punto de estado de punto. Ya hemos agregado en nuestros datos no necesitas escuchar Añadir un extractor de claves ya que tomamos Item e Index y diremos índice a cadena ya que esto tiene que ser una cadena. No podemos simplemente usar el valor numérico por el que pasamos. Uh, justo aquí. Tengo que cambiar esto por una cuerda. Pondremos un estilo base aquí un oleaje. Por lo que Billy gays un flex de uno. Yo era un color de fondo de una foto similar a la natural solo para mantener las cosas consistentes. Y entonces realmente vamos a renderizar esto así de nuevo vamos a tomar artículo. Entonces otra vez tomaremos un ítem en índice y luego renderizaremos todo esto dentro de aquí. Por lo que esto estaría envuelto en una vista. En realidad estamos pasando un rey también que hicimos por los pies de foto reales en la primera parte de este curso. Por lo que tomar el índice se puso un poco de estilo aquí, Así que ser un ancho fuera 100% desbordamiento oculto el san margen inferior de cinco. Arreglar esto aquí justificaría el contenido al espacio entre estableceremos un látigo inferior de borde uno en un color de borde. Genial. Esta será una visión de que todo está contenido dentro de un arreglo tan seguro. Cada toque, asegúrate de que también estén mostrando este estado vacío. Entonces debo decir que no hay comentarios encuadernados. Simplemente recargo esto. Entonces si abrimos este primero viniendo aquí, pero no tenemos comentarios en la base de datos por el momento, deberíamos ver aún no encontramos comentarios. Si nos desplazamos aquí abajo solo debería ver esta vista vacía. Tenemos esta vista vacía justo aquí con corrientes empujadas hacia abajo en la parte inferior Aquí. Ese es este texto de aquí. Aquí es donde en realidad se mostraban? A Los antiguos usuarios en realidad pueden entrar que viene y publicarlo así que por ahora, esto es lo que estamos buscando. Por lo que sólo necesitamos poblar esta lista plana en exhibición en común en este espacio que hemos creado justo aquí. Entonces para hacer esto por primero ir a crear otra vista. Pero en estilizar para esto en un momento pero primero menos en un componente de texto. Bueno, digamos ítem publicado, luego agrega un toque de Taipei City para que realmente puedas abrir el perfil de este usuario. Entonces dentro de aquí, bueno, hay otro componente de texto con el nombre de usuario de la oficina. Entonces si eres así ahora, echemos un vistazo rápido a lo que tenemos. Entonces como pueden ver ahora, tenemos el tiempo que esto fue publicado. La voz es en realidad no, la hora exacta de la hora. Estampela en el nombre de usuario del usuario. Por lo que en el siguiente video, terminaremos dedo del pie, llenaremos como lista plana y tendremos sus comentarios, y finalmente agregaremos un área en la parte inferior donde los usuarios iniciados compusieron sus propios comentarios a esta lista. 43. Construir la pantalla de comentarios parte 3: bienvenido de nuevo. Entonces primero, terminemos de agregar el resto de los componentes de vista antes de que empecemos a dar estilo a estos. Por lo que debajo de este toque tientas una ciudad donde tenemos esta vista de cierre. Vamos a agregar otra vista justo aquí, honesto, honesto, en realidad contener comentario. Por lo que crearemos un nuevo componente de texto. Y luego aquí estaba un comentario de artículo. Entonces para un más fresco de nuevo y desplácese hacia abajo hasta la foto que sabemos tiene un comentario. Podemos ver que tenemos esta foto de ejemplo viniendo aquí. Y ahora vamos a pasar por un anuncio, un estilo para que el nombre de uso del usuario aparezca en el sitio. El timestamp justo aquí en el que viene por debajo justo aquí. Entonces en esta vista, justo debajo de esta vista padre, justo aquí o en algún estilo, Así que primero, para agregar algo de relleno de cinco cuando vuelva a establecer el ancho para que sea 100% uno refleje la dirección, ¿ verdad? Yo estoy justificando que el contenido sea espacio entre, así que verás ahora lo rápido que esto ha cambiado la visualización de nuestra página así. Entonces es mucho más. Uh, se ve mucho mejor ya, pero primero, vamos a añadir este relleno Teoh, Uh, comentario vista aquí también. Entonces sólo tienes que copiar esta parte justo aquí y pegar esto en esta vista, solo que tengamos relleno consistente, lamentos retrocesos. Entonces nos desplazamos hacia abajo como este, lo puedes ver, así que es mucho mejor. Entonces a continuación vamos a actualizar en realidad este toque pero pastoso para pasar por el perfil del usuario . Ese momento es sólo un vínculo de deuda. Entonces digamos, en prensa y luego enviaremos disfunción a estas sondas. navegación navega al uso de la pantalla. Entonces estamos pasando la información del usuario i d. Y esto será igual a ítem taurino. Entonces si guardamos esto de nuevo ahora, Andi, prueba Teoh. Haga clic en el ah, use nombre de nuevo. Si hacemos clic en esto ahora, debería abrir su perfil. Entonces no te vayas. Esto está funcionando. Por lo que nos estamos moviendo rápidamente. Ahora solo necesitamos agregar en siguiente el formulario real hecho aquí, donde los usuarios que son amados en realidad pueden publicar sus propios comentarios. Entonces vamos a ir a esta nueva área de comentarios aquí abajo donde hacemos el cheque para ver si el usuario está conectado mucho. Entonces primero, vamos a seleccionar este componente de texto justo aquí. Van a reemplazar esto por un teclado evitando la vista. Como agregamos en empiezo esta sección. Esto va a tomar una serie de utilería. El 1er 1 será comportamiento, y esto sólo sería poner que luego diría habilitado. También dice estilo aquí también. Por lo que agregar un borde quitó mecha de uno a borde color top off gris petting de 10 en el margen a la parte inferior también, off 15. Entonces si guardamos esto y echamos un vistazo rápido, tengo que añadir el Cullinan justo aquí. Entonces si echamos un vistazo ahora, podemos ver podemos ver que tenemos una frontera justo aquí en adelante para no haber tenido ningún mensaje de texto. Aquí es donde estará el área en la que estamos trabajando, estará mostrando. El primero que necesitamos es un rubro que en realidad muestre lo que esta área es útil. Por lo que es un estilo de texto para peso off bowl. Simplemente haz que destaque un poco más, pero guarda post comentario como este. Y ahora vamos a crear un nuevo componente de vista justo aquí y poner en nuestra entrada de texto ahora Esto también tomará una serie de apoyos. Es el 1er 1 será comestible. ¿ Qué debe ser cierto? A Marcador de posición. Y esto sólo dirá entero tu inicio aquí o cualquier cosa que quieras. Y ahora, cuando tocó el detectar cuando se entra texto aquí, así dicen sobre cambio de texto. Entonces cuando Texas entró, queremos actualizar el estado para realmente asegurarnos de que almacenamos esta información de comentarios para decir esto envió comentarios estatales, su texto casi hecho. Ahora sólo tenemos que pasar por algún estilo este texto en monedero. Bueno, sólo para que se destaque porque la apariencia predeterminada fuera de la entrada de texto es casi como si ni siquiera apareciera . Por lo que en algún margen vertical aquí a la parte superior en la parte inferior, tendremos alta de 50 palmaditas de cinco. Mantendremos aquí este color de borde gris. Está bien que un radio de borde de tres, un color de fondo de blancos en un color de teléfono de negro manden caja fuerte. Entonces si volvemos a abrir la sección de comentarios, podemos ver esta área que hemos creado justo aquí. Por lo que ya casi está ahí. Sólo tenemos que añadir un botón debajo para que realmente podamos presionar esta Onda ejecutar una función que va a crear en comentario. Esto será un toque, pero yo pago ciudad. Tengo una entrada de texto dentro de aquí Eso fue post seguro. Simplemente diré en prensa llamar a una función llamada posts comment. Entonces lo que tenemos que hacer a continuación, Así que en realidad crear esta función. Por lo que subimos aquí en definirlo justo aquí en el siguiente video completará esta página escribiendo función post comment y luego probando que los comentarios realmente fueron agregados a una base de datos con su propia única viniendo i d. 44. Construir la pantalla de comentarios parte 4: Ahora empecemos a crear esta función post comment. Entonces lo primero que tenemos que hacer es realmente definir una variable que nos permita acceder realmente al comentario que lo habitual ha entrado. Por lo que haría esto diciendo comentarios. ¿ Estos comentarios estatales son así? Y nosotros también quieren hacer un cheque para ver si existe este cometa, porque quieren que alguien esté agregando comentarios vacíos. Entonces solo decimos, Si esto es un proceso de pozo vacío aquí y entonces lo demás bien, en realidad apaga mucho y digamos, Por favor, introduce un comentario antes de publicar solo para que sepan por qué esto no ha agregado el comentario vacío en el base de datos. Entonces ahora que sabemos dentro de aquí que definitivamente hay un comentario se ha ingresado, debilita establecer una serie de variables que vamos a estar necesitando antes de poder realmente enviar esta información a firebase, similar a lo que estamos haciendo en la página de subida hecha aquí, donde definimos todas las áreas del del y hacemos que el objeto focal tan acostumbrado a una cosa similar aquí para el comentario. Por lo que necesitamos definir una serie de variables primero, que será la imagen i d Esta será usada para ¿Realmente estableces el camino o todo el mundo dedo del pie establecer esta información por lo que será esta foto estados I d Entonces necesitamos para obtener al usuario. Yo d quedarme. Sobeih si oh usuario actual, usa tu i d Entonces necesitamos toques set y crear una idea común. Esto tiene que ser único. Entonces para hacer esto dirán este único i d. Por eso tuvimos que tirar de las funciones únicas I d anteriormente. Por lo que puedes usar eso aquí. Off a eso. Necesitamos que Teoh establezca fechas a tiempo. Entonces para eso, decimos fecha hora que llama Date ahorita nunca puede definirles esa hora. Este será piso de matemáticas, el tiempo estatal dividido por 1000 caso. Esto es todo lo que necesitamos definir primero. Por lo que en este punto, es una buena idea actualizar de nuevo el estado para eliminar el comentario. Simplemente arregla esto. Entonces porque ya tenemos que encontrarlo aquí arriba, en realidad podemos restablecer esto y todavía podemos usar esto viniendo para ir aquí arriba. Esto solo significa que el usuario no pudo volver a presionar el botón de publicación y no ejecutará esta función, así que solo guarda esto, así que solo va a agregar este comentario una vez. Por lo que ahora en realidad podemos crear un objeto que tendrá toda la información que necesitamos a este comentario. Por lo que es un objeto venidero igual a izar en ese tiempo tallo. Y luego tenemos que ofrecer hacer al usuario yo d. Y en los comentarios, estaremos comentando. Esto es todo lo que necesitamos para unos objetos comunes. Ya casi terminamos esto. Ahora tenemos que establecer la referencia a la base de datos. Estados serán cuatro slash comentarios ford slash la imagen i d. Así que la foto yo d que tenemos aquí arriba, entonces queremos Teoh en el común i d que creamos aquí. Entonces el único i d. Sólo un Y entonces eso son muy pocos minutos. Ese es el camino a la imagen. Entonces si nos registramos ahora, base de datos Firebase tendría comentarios en la foto I d. Y entonces vamos a establecer un i d común aquí y agregar están en un nuevo objeto justo aquí. Esto podría estar viniendo dash I d to pero más probable será una cadena única como esta. Tendrá un comentario. Entonces solo decimos sets que vienen objetos. Eso es todo lo que necesitamos. Pero primero, deseando crear una función más para poder recargar los comentarios. Después de que hayamos agregado esto, esta función se sumará aquí, y esto simplemente se llamaría lista de comentarios de recarga. Esto no tomará ningún parámetro, y todo esto realmente hará es restablecer los estados para que realmente la lista actual esté vacía así. Y entonces en realidad se enfriará la función fetch coins pasó a través de la foto. Eso me gustaría. Entonces no aquí sólo podemos enviar una solicitud a esta función. Entonces es lista de comentarios de recarga, y eso debería ser todo. Necesitamos tener comentarios sobre las cosas, solo eso. Pero primero hay que terminar de agregar el estilo. Estamos sumando aquí para post host comment, bustin así que aquí queremos agregar un poco de estilo, así que diremos relleno. Entonces después de enfriar es 10. Agregar horizontal es de 20. Queremos tener un color de fondo off play en un radio de borde, pero cinco y luego para este real, uh, uh, el texto dentro de un componente de texto. Queremos hacer de esto los blancos. ¿ Eso es seguro? Esto. Ahora no estoy atrás comentarios. Vamos a crear un nuevo venir aquí y publicar. De acuerdo, podríamos simplemente revisar esta época. Parece que he espeltado esto mal. Entonces si nos desplazamos de nuevo aquí, sí, sí, se puede decir que es la misma base de datos, no la base de datos. Entonces simplemente vuelve a ejecutar rápidamente esto y vuelve a probarlo, y luego publicaremos que entra y ya puedes ver que ya está actualizado. El listado de comentarios aquí para mostrar, uh, comentario. Entonces si volvemos y volvemos a esto, puede ver que un cometa ya está en la lista. Entonces podemos revisar ahora la base de datos para ver dónde está esta idea. Por lo que se puede ver aquí es la foto I d. que agregamos eso. Entra. Ahí está el comentario i d. Y en la información aquí, podemos encontrar el autor gasolina, común sí y la fecha y hora que se publicó esto. Probemos otro ejemplo sin base de datos arriba y solo veamos qué está pasando. Entonces vamos a agregar otra respuesta justo aquí, luego publicar puedes ver que la está agregando de inmediato. Hecho aquí, probablemente admitiría, sin embargo, es que no está borrando adecuadamente nuestra información. Es Vamos a ajustar esto para realmente solucionar este problema, por lo que se considera estable. Recargar una lista de comentarios. Necesito cambiar, hermana, decir comentarios. Entonces si guardamos esto ahora y volvemos a una lista de inicio en una respuesta y colocada, puedes ver que ahora solo está mostrando la información aquí, no p concedo que tenemos los comentarios más antiguos en la parte inferior y los comentarios más nuevos en la parte superior. Si querías Teoh cambio produjo sexualmente el prop inverso en la lista de hechos, que puedes ver en video adicional al final del curso. Pero por ahora, esta pantalla funciona bastante bien para nosotros. Pero en el momento en que solo quiero trabajar en una forma de hacer que esta entrada que hemos agregado aquí desaparezca una vez que hicimos clic en post. Entonces si agregamos esta línea justo aquí valor y hacemos que esto sea igual a este comentario punto de estado punto , esto significará cuando cambiemos el estado aquí arriba para realmente eliminar el comentario, en realidad lo eliminará de este impulso. Bueno, entonces este es un ejemplo rápido para mostrar cómo realmente puedes agregar comentarios a tu aplicación de una manera que no involucre demasiado código en absoluto. y es realmente bastante efectivo. Por lo que ahora casi hemos terminado en. Solo tenemos unas pocas áreas más que necesitamos cambiar, como el perfil real aquí necesita para buscar la información de la base de datos. Tenemos que enlazar estos botones para que podamos realmente bloquear al usuario en bono. Hazlo para que realmente podamos editar perfil como ese nombre, y yo uso el nombre en esa imagen de perfil, y entonces en realidad también necesitamos hacer una forma de que los usuarios vayan a registrarse e iniciar sesión. Entonces como vimos antes, si no estás conectado, muestra información aquí abajo para decir, Por favor, inicia sesión para hacer tu perfil en la misma cosa también para los comentarios. Si no estás encerrado, seguro cosa aquí abajo a decir Por favor mira en Así que en el siguiente módulo se buscará realmente agregar estas iniciar sesión en áreas de registro, dedo en hacer algunas correcciones finales y ajustes como la página de perfil justo aquí en adelante, uh en el futuro, o añadir suficiente módulo a este curso que pasará y rediseñado adecuadamente. Esto Usando un programa podría bosquejar para mostrar cómo queríamos lucir y cómo moverías diseños en boceto a través de para reaccionar nativa para diseñar realmente tu aplicación para que luzca exactamente como querías. 45. Perfil para obtener los detalles de la base de la base: Bienvenido de nuevo en esta sección, vamos a estar centrándonos en el inicio de sesión de usuario y el registro que normalmente verías en áreas como esta en la página de subida, normalmente no está bloqueado, Pero en este primer video, vamos a ordenar un par de áreas de la app, incluyendo la página de perfil aquí. Por lo que se ve donde esta un nombre y la información de nombre de noticias. Vamos a hacer que esto provenga de la base de datos, y después de eso, vamos a agregar en este botón de cierre de sesión en editar perfil. Así que empecemos primero creando una función para realmente tirar de esta información aquí de la base de datos, vamos a Teoh archivos en el sitio aquí y abrimos perfil punto Js Entonces simplemente desliza esta semana y solo un espacio seguro. Entonces lo que vamos a estar haciendo es crear una nueva función que se hace aquí llamada Fetch User en vuelo. Esto tomaría en un parámetro, lo que hizo que el usuario yo d primero. Quieres realmente asegurarnos de que tenemos una referencia a esta clase padre después de que hayamos llamado base de fuego y ya no podemos usar esto, así que solo uso esto que es igual a esto que hemos hecho antes. Y vamos a usar la base de datos. El referente que queremos Teoh, tire esta información de los usuarios y el niño son será este usuario i d. hemos establecido en el perímetro justo aquí. Afectaría su información una vez. Entonces usaste al mismo comandante de cadena años antes de entonces acabamos de poner el fresco atrás así . Por lo que de nuevo, queremos comprobar Esta información realmente existe sobre decir existe igual valor de instantánea. No hay 84 no ahí. Diría que, si existe, los datos son iguales a compañero natural así. Y luego desde aquí podemos enseguida establecer el estado con toda la información que vamos a estar usando en esta página. Estudia el nombre que usó nombre en la imagen de perfil justo aquí. Por lo que eso sería usar datos de nombre. No uses el nombre. El nombre nombre nombre de punto de datos. El cuadro de perfil será Data Dog Avatar en ellos. Dirá también, miró en Es cierto, y vamos a establecer las ideas del usuario Bueno, así que tenemos referencia a eso justo aquí. Por lo que actualmente estamos poniendo esto encerrado en, uh, parte del estado aquí abajo. Pero en lugar de establecer esta información aquí. Vamos a enfriar en su lugar la disfunción tan segura que buscar información del usuario y luego pasar en el usuario. A mí me gustaría esto. Entonces podemos eliminar esta función de estado establecido. Entonces una vez que hayas hecho eso, solo guarda, y luego vamos a desplazarnos hacia abajo en la actualización Eso debería mostrar de ti. Hice aquí para utilizar esta nueva información. Entonces lo primero que vamos a cambiar es esta foto de perfil justo aquí. Por lo que actualmente tiene esta imagen dura recubierta. Vamos a seleccionar todo esto en sólo decir este avatar estatal. Y si guardamos eso solo para revisar este 1er 1 se sientan ahora, tímidos esa foto de perfil, y luego hacemos lo mismo por el nombre algo este nombre de estado y luego lo mismo. Para uso nombre este estado use nombre. Tan libre seguridad, es ahora deberíamos ver toda la información proveniente de la base de datos. Sí. De acuerdo, entonces en el siguiente video, vamos a ser agregados en la funcionalidad para el botón de cierre de sesión en ese fondo de perfil de edición . Por lo que esto será usando los componentes pastosos de bala táctil aquí para mirar hacia fuera en Dhere. Editar perfil. En eso estamos trabajando a continuación 46. Añade un formulario de perfil de edición a la página de un perfil: lo que para continuar comenzará por realmente crear el evento on press para cada uno de estos botones . Por lo que el 1er 1 será este botón de cierre de sesión aquí. Por lo que digo propia prensa llamar a una función. Habrá esto No mires u za para crear esta función en un momento y luego el 2do 1 estará en él perfil. Por lo que de nuevo, nos estamos quedando en la prensa y función cool. Anunciarme este perfil de edición. Por lo que toma ambos de estos ahora y crea una función para cada uno de estos. Entonces sube aquí. Y solo por ahora, solo decimos mucho. Mira hacia fuera y otra vez, Editar perfil dirá mucho en él perfil. Entonces si guardamos esto ahora e intentamos interactuar con estos botones, tenemos que mirar hacia fuera mostrando nuestro cuadro de alerta en editar perfil mostrando editar perfil. Ahora, el país de cierre de sesión va a ser realmente sencillo, así que sacaremos este primero del camino. Entonces todo lo que necesitamos dedo del pie sumar aquí. Entonces decimos f off porque volver a usar las funciones de firebase y luego solo decimos, cerrar sesión así y luego cambiaremos este cuadro de alerta solo por decir que cierres sesión. Entonces ese es el cierre de sesión. Tú para que funciones completamente. Sólo prueba que es ahora. Por lo que debería cambiar la visualización fuera de esta página para mostrar que ahora estamos fuera de sesión. usuario dice, Pruébalo para que muestre ese mensaje y ya puedes ver ahora tenemos esta pantalla diferente que aparece porque estamos bloqueados, que nos pusimos aquí para que podamos hacer este cheque para ver si estamos encerrados. Y si no estamos encerrados, compartimos esta información. Si estamos encerrados, mostramos el perfil. Por lo que más adelante en esta sección, vamos a ser un cambio en esta área aquí abajo para usar un componente. Pero eso nos preocuparemos más adelante. Entonces así es como miro a la función completa. Siguiente. Necesidad de trabajar en la función de edición de perfil. Entonces si solo decimos esto otra vez, escribí mi locus de ski back head. Podríamos volver a golpear. Por lo que edita perfil. Lo que tenemos que hacer es hacer algunos cambios más. Entonces necesitamos un área aquí abajo donde realmente podamos mostrar un campo de entrada 50 usuarios para cambiar su nombre o están usando. Entonces para hacer esto vamos a hacer un cheque justo aquí. Llamaremos a este punto estado punto perfil de edición de puntos. Si esto es cierto, vamos a mostrar un área diferente vamos a mostrar un área diferentejusto aquí. Y si es falso, mostrarán estos botones en esta zona justo aquí como de normal. Entonces solo estamos copiando y pegando este cheque aquí abajo y luego toda esta área aquí, haremos una nueva vista dentro de esto. Una declaración que acabamos de hacer. Yo quiero que este s muriendo sea un poco diferente. Así que dicen un centro de líneas de ítems justificar el contenido enviado arriba en el resto puede permanecer igual. Entonces si solo cambiamos esto acaba de tener un componente de texto aquí. Sólo decir que trate archivo que queremos hacer es cambiar la función de perfil de edición que hemos hecho aquí para que cuando presionamos este botón, cambiemos este perfil de edición verbal en el estado para que sea verdad. Entonces aquí arriba, vamos a quitar esta caja de alerta y decir que este perfil de edición de estado sexual es cierto. Vamos a ver qué pasa en este momento. Por lo que vas a la página del perfil, hacemos clic en editar perfil. Se puede ver que se le quitan estos botones y se está mostrando Editar perfil Vamos a solucionar este pequeño problema aquí abajo. Justificar contenido, tener un espacio justo en frente del centro solo para asegurarnos de que no estamos funcionando de ninguna zona aquí. Por lo que vuelve a hacer clic en este botón. Podemos ver que muestra información diferente al hacer clic en esto. Entonces lo hago. Necesitamos una forma de volver atrás o cancelar estos cambios, y luego necesitamos agregar en una entrada de texto forma Onda para guardar los cambios. Entonces primero, vamos a desplazarnos hacia arriba al importar el componente de entrada de texto. Entonces estamos a salvo. Esto una vez que hayas importado este texto, los componentes de importación vuelven a crecer hacia abajo. Por lo que hemos hecho este nuevo componente de vista hecho aquí. Actualmente contamos con este texto de perfil de edición. Entonces lo que queremos en un primer momento es un toque resaltado completo que nos permita cancelar estos cambios que estamos haciendo. Entonces tenemos un nuevo toque para un pastoso. Justo aquí dentro de aquí diría compresa. Podemos enfriar. Una función sobre esto literalmente simplemente guardaría este estado conjunto, y haremos editar perfil. Él lanza. Ha sido del lado de. Acabo de tener un componente de texto que simplemente diría, cancelar o cancelar edición Así que si echamos un vistazo a lo que esto haría en este momento o cambia empezando un poco, solo para que destaque un poco más. Si hacemos clic en editar perfil, podemos ver esta edición de cancelar. Y si presionamos esto, se remonta a la forma en que era antes. Así que vamos a hacer que destaque un poco más, así que vamos a añadir un poco de estilo a este componente de texto justo aquí. Y es un divertido bote de pesas. ¿ Ves cómo se ve esto? Esto destaca muy bien solo para que el usuario pueda ver cómo puede volver rápidamente a lo que tenía antes. Ahora que tenemos esta forma de cancelar estos cambios, realmente pasemos por ahora y añadamos la entrada que necesitamos para que el usuario cambie el nombre y el nombre de uso. Entonces lo primero que necesitan estar fuera a cambiar su nombre para que una etiqueta justo aquí y debajo agregue una entrada de texto. Entonces, así como esto, y luego vamos a pasar en una serie de apoyos es el primero 1 dirá editar herbal y esto será cierto. Vamos a establecer un Marcador de posición que dirá y verá su nombre y luego vamos a decir sobre el cambio de texto. Por lo que en cualquier momento que el usuario escriba en este cuadro, queremos asegurarnos de que realmente guardó este cambio. Por lo que es un texto se enviará a este conjunto Estacas. El nombre es texto. Por lo que esta es la misma parte del estado que actualmente tenemos el nombre. Por lo que debe actualizar su información aquí arriba en cuanto a usar un tipo en. Entonces también vamos a dio se establece el valor para ser igual a esta misma variable un oleaje para ser este nombre de estado. Por lo que en cuanto hacen clic en este botón de edición, se pobló con la información que ya se está asociando con este usuario. Tan solo tienes que establecer algún estilo predeterminado para esta caja solo para que destaque un poco más . Por lo que es un olfateo de 250 algún margen vertical apagado alrededor de 10 palmaditas cinco un color de borde de gris sobre un ancho de borde de uno. Entonces es solo guardar esto ahora y ver qué tenemos. Por lo tanto, vaya a la página del perfil, haga clic en editar perfil. Y aquí puedes ver la información y si hacemos cambios aquí, puedes ver que está actualizando la información. Eso es lo primero de la página aquí, que es exactamente lo que queremos. Entonces vamos a añadir otro temperamento. Será exactamente la misma información de cuatro nombres de usuario, así que solo copia todo esto y pegarlo debajo de aquí cambiaría esto para usar el nombre y nuevamente lo mismo hecho aquí. Por lo tanto, actualice el nombre de usuario y será pre poblado con la variable de nombre de usuario en el estado también. Y aquí abajo para decir, Introduce tu nombre de usuario, podemos eliminar este componente de texto adicional. Entonces si guardamos esto ahora, echemos un vistazo a lo que tenemos para poder editar perfil. Ahora tenemos nuestra caja para el nombre de usuario o para el nombre en el nombre de uso en estos de ambos actualizando de inmediato. Pero lo que también necesitamos es una forma de guardar estos cambios. Su vamos a añadir un mawr touch golpe pasty aquí abajo que podemos usar similar a éste justo aquí se pueden guardar los cambios a usar que hace así es copiar y pegar esto y decir guardar cambios. Pero en lugar de editar directamente el estado justo aquí vamos a enfriar una función, se llamarán Guardar perfil. Eso se vería así. Añadamos solo un poco de estilo pequeño aquí solo para mostrar que este botón es un botón importante de zona . Y así tiene algún enfoque en la pantalla. Así que establece un color de fondo hoy, palmaditas de 10 en. Entonces vamos a cambiar esto aquí abajo solo para tener un color telefónico de blancos. Entonces si decimos esto ahora, echemos un vistazo a lo que tenemos. Por lo tanto, ve a un perfil de edición de perfil. Podríamos ver este botón sobresale. Entonces si haces un cambio aquí y haces clic en guardar cambios, llamará a esta función de perfil seguro. Por lo que en el siguiente video se creará esta función y luego pasará a la Logan en parte de registro fuera de esa 47. Crea la función de perfil de guardar: bienvenido de nuevo. Por lo que ahora vamos a empezar a crear esta función de perfil seguro. Es ese desplazamiento hacia arriba justo aquí y vamos a crear esta nueva función llamada perfil seguro . Esto no tomará ningún parámetro, así que solo podemos construir son una función como esta. Entonces primero, vamos a definir en nombre, pero serás igual a este nombre de estado y luego lo mismo otra vez para usar nombre. Para que puedas acceder a eso así. Entonces queremos realmente comprobar si el nombre existe más. Digamos, si el nombre es un vacío y entonces actualizaremos la base de datos aquí mismo. Entonces es un esto usa en el niño otra vez. Difusor i d Así que el estado use una derecha, entonces volveremos a seleccionar al niño. Entonces para este, estamos actualizando el nombre. Entonces es un nombre. Entonces simplemente decimos, pongamos un nombre así, y luego volvemos a hacer lo mismo. Pero para el nombre de usuario, solo arregla la sangría que luego acabamos de cambiar todas estas referencias a nombre nombre de usuario. Esto es todo lo que necesitamos para actualizar realmente, uh, perfil. Entonces solo decimos al estado conjunto estado el perfil de edición es falso. Entonces es solo seguro esto en, Uh, de esto en adelante el me parece escuchar y ver qué pasa. Por lo que voy a una página de perfil, voy a editar perfil. Cambiamos nuestro nombre. Andi, uh, nombre de usuario. Dirán que cambia. Podemos ver que está actualizado aquí. Y si hacemos click en el perfil justo aquí se actualiza en la base de datos. Entonces si vamos a guardar haciendo el cambio aquí y volver a ser seguros solo con recargas, volver a un perfil, podemos ver que estos cambios se han guardado con éxito. Por lo que sólo cambiamos de nuevo y luego recargamos el arriba de nuevo. Podemos ver esto ahora se está actualizando en realidad sobre guardar en perfil. Entonces en el siguiente video, vamos a pasar a las funciones de inicio de sesión y registro me va a escribir. Vamos a crear estos como un nuevo componente 48. Un nuevo componente para contener tu inicio de inicio y: ya que seguimos construyendo esta app, ahora necesitamos buscar en las opciones de registro de inicio de sesión real que vamos a agregar a la app. Entonces si solo miramos a este usuario ahora podemos ver que tenemos esta área en la página de subida, la página de perfil en la página de comentarios hecha aquí. Por lo que necesitamos crear una forma para que los usuarios puedan realmente iniciar sesión o crear una nueva cuenta . Entonces lo primero que vamos a hacer es pasar a donde tenemos nuestros archivos por aquí, Andi, crear un componente totalmente nuevo, crear un componente totalmente nuevo, así que duplicar este existente y esto será atrapado fuera del punto Js y comenzando de vez en cuando . Simplemente quita el contenido del archivo de comentarios y estamos copiando y pegando esto en el off Js . Por lo que estaba cerca. El resto de los archivos es que no necesitamos trabajar en este incendio en este momento y van a subir a la parte superior y cambiar este nombre comentario. Sólo aquí para usar un off. También voy a copiar esto y la escuela justo al fondo y pegarla aquí abajo también y simplemente a salvo. Después queremos quitar todas las partes del código que no necesitamos. Entonces, para empezar, sólo necesitamos esta zona justo aquí para quitar esta vista extra todo el camino, uh, hasta la cima, justo aquí. Entonces si ahora sólo vamos a guardar esto cuando volvamos, Teoh hace cambios aquí en un momento. Simplemente guardamos eso. Vamos a eliminar todas estas funciones que no necesitamos. Por lo que el 1er 1 que vamos a quitar es recargar una lista de comentarios. Y entonces este sólo aquí para publicar comentario el componente sí montó Will realmente eliminará todo el código dentro de él. Pero vamos a necesitar eso. Uh, más tarde. Entonces podemos quitar el convertidor de tiempo Pourde, checar estas dos únicas I. D. Y s cuatro funciones. Yo podemos quitar el fetch, comentarios, función y también esta función también. Yo me comprometería a listar chequear los Carneros. También podemos quitar, Así que ahora nos queda con la función de render justo aquí en componente vacío de Mt. Andi construyó justo aquí el siguiente vamos a ajustar finca. Las variables que quieras tener en finca estarán fuera de paso. Esto primero será igual a cero. También un correo electrónico el cual la cadena vacía nos será una cadena vacía en la pantalla de movimiento será falso para estar con el siguiente. Quieres comprobar que hemos importado los componentes correctos, por lo que necesito tener un toque por debajo del teclado de entrada de texto pasty evitando la vista. No necesitamos lista plana Nave Estelar. Necesitamos texto. Tú en show de imagen. Tampoco necesitas imagen. Vamos a mover eso. También necesitamos a Teoh. Asegúrese de que los archivos de conflicto importados podamos acceder vía base. Y ahora podemos seguir construyendo el resto de esta pantalla. Entonces si decimos esto ahora, queremos. primer día es desplazarse hacia abajo para renderizar función, y vamos a cambiar esta segunda línea aquí para decir este mensaje de utilería. Entonces si guardamos esto, no podemos que empieces a usar este componente en este momento para reemplazar estas áreas se estaban mostrando Solo tienes que mirar hacia fuera de nuevo. Estas áreas estaban mostrando en la página de perfil la página de subida en y la página de comentarios donde dice que no estás bloqueado. Queremos mostrar aquí este mensaje, que es diferente para cada una de estas áreas. Entonces este dice que la policía busca en publicar un comentario. Por favor busque adentro para subir una foto y sierra en el perfil también. Por lo que necesitamos asegurarnos de que esto pueda cambiarse. Es ahora que tenemos que encontrar esto dentro de nuestro componente que acabamos de hacer vamos a entrar en cada uno de estos archivos, una importación, un nuevo componente. En primer lugar, vamos al perfil Page y aquí mismo donde importamos la lista de fotos, vamos a copiar y pegar y también importar usar un off four slash componentes para fash off Js . Se puede guardar esto, esa escuela de inmediato. Es donde actualmente decimos que no estás encerrado. Voy a cambiar todo este código para ser usuario. Ah, Entonces ponemos el mensaje aquí. Por favor inicia sesión para ser tu perfil y después porque ya vamos a hacer lo mismo ahora para la pantalla de subida. Entonces eso se abrió un oleaje. Yo subo. Yo sé, dichos comentarios. Vamos a subir. Ir a desplazarse a la parte superior en importar los derechos de autor off jsoc para perfil, pegarlo en la página de carga mientras que aquí, realidad lo que importó página de comentarios Teoh también. Después desplázate hacia abajo. Entonces tomé esto creó esto justo aquí, pero copiarlo. Ve a subir página, desplázate hacia abajo de nuevo. Encuentra la misma zona justo aquí base a fin. Va a cambiar este. Alinear el paso a través como un prop pegar esto aquí en la carrera. Y solo por fin, lo guardaremos y luego iremos a la página de comentarios y volveremos a hacer lo mismo. Así que ponte directo al fondo pega esto en. Yo sólo cambio esta sonda, Entonces retire para la cabeza antes. Entonces si cerramos de nuevo estas páginas así que solo tenemos el off Js Vamos a echar un vistazo a la página de subida. Tan solo necesitas arreglar esto en la pantalla de subida para asegurarte de que tienes capital. Acabas de aquí solo comprueba dos veces estos comentarios también. Er que también necesita ser fijo y perfil en este aquí también. Entonces una vez que tengamos esto, podemos revisar estas otras páginas y ver, una vez que miremos hacia fuera, tenemos un mensaje justo aquí. Pero sólo tenemos que cambiar esto. Ahora podemos ver que en realidad está apareciendo, así que si vamos a los comentarios uno, lo puedes ver justo aquí. Pero sólo queremos asegurarnos de que esto esté centrado en la pantalla. Entonces aquí abajo tenemos el flex uno. Vamos a decir un centro de líneas de ítems y justificar centro de contenido. Simplemente arregla esto. Podemos cerrar de nuevo estas páginas. Y si miramos en la pantalla de subida una vez que falló, puedes ver que tenemos este dicho Por favor mira en tu perfil. Por favor busque en subir una foto y luego en el área de comentarios, por favor inicie sesión para publicar un comentario. Entonces en el siguiente video, vamos a empezar a construir esto a partir del archivo componente Js. Acabamos de hacer que Teoh en realidad muestre diferentes opciones visas para ya sea bloquear o registrarse y crear una cuenta. Y luego cambiará lo que se muestra aquí para que sea la información que mira mentalmente que si usa realmente encerrado, esto es lo que vamos a ver a continuación. 49. Añade botones de inicio y firma al componente: Por lo que antes de seguir construyendo aquí el componente para que los usuarios busquen y se registren, vamos a pasar a la app dot gs on realmente impidió que el usuario se iniciara automáticamente cada vez que se abrieran. Entonces va a tomar esta función de inicio de sesión justo aquí, en realidad copiaría esto, realidad, porque podemos usar esto en esta nueva fuera de un componente. Vamos a llevarnos y quitarnos la llamada al punto de muerte Morgan y simplemente guardar este expediente para poder cerrar esa tortura? Sí, ahora, Pero sólo pega en ese registro y funde vestido inter off para que podamos usar eso más adelante. Entonces ahora cuando realmente usamos la app, podemos ver que no estamos encerrados. Esto sólo nos ayuda, Teoh cada vez que hacemos un cambio. Ahora para bloquear al usuario para realmente probar lo que hemos hecho. No es Es desplazamiento de vuelta hacia abajo hasta el área de renderizado encendido. Vamos a empezar a construir la pantalla real que queremos para la pantalla. Entonces aquí abajo, donde tenemos el mensaje de parada apuntalado, vamos a hacer un cheque al estado para ver en qué paso off estamos actualmente. Por lo que este o paso comenzará en cero. Y esto decidirá si debemos mostrar las opciones para mostrar de los botones de inicio de sesión o de registro o si ya tienen opresión de estos botones. Después revisaremos para ver qué forma debemos mostrar. Por lo que el primero y el predeterminado será cero. Entonces aquí lo tenemos, excepto ser cero justo aquí. Pero si presionan iniciar sesión, se mostrará como uno. O si presionan inscribirse, se mostrará en cuanto a Así que esto es lo que vamos a estar agregando justo aquí. Entonces si este estado estrella fuera del paso golpea cero, necesitamos crear un área justo aquí para mostrar los dos botones que realmente pueden teclear para mostrarte los dos botones en los que realmente pueden hacer clic. Tan bien, de cerca toda esta entrevista y vamos a conseguir esto, um, estilismo también. Por lo que el 1er 1 el margen Artículo 20 sobre una dirección flex de derecha. Por lo que está cerca que apagado en el interior aquí creará para tocar pasteles de bala. Entonces por qué no tener el botón de inicio de sesión y luego el otro. Tendremos que volver a apuntar botón. Tenemos que arreglar esta sangría. Y entre estos dos, quieren tener otro componente de texto que simplemente diga: Oh, Oh, así que si decimos esto, se puede ver la pantalla suave que estaría mirando. Tenemos que cerrar esto para que puedas decir o hacer si vas a subir. Ahora puedes ver que tenemos login o regístrate. Pero ahora vamos a sumar. Por lo que vamos a agregar algo sobre el estilo básico aquí solo para que estos destaquen un poco más y para mostrar que son elementos clicables. Entonces donde tenemos toque volar una ciudad para el log in. Entonces para el componente de texto aquí decimos, inicia sesión. Vamos a añadir un estilo. Por lo que es un divertido bote de pesas y cambiará el color. Es un verde. Entonces estamos copiando este estilo por aquí abajo y cambiamos este color. Habla azul y luego sobre el o texturas aquí, va a agregar un poco de estilo solo para tener algún margen horizontal, solo un espacio fuera un poco. Tan mismo margen horizontal off 10. Entonces si guardamos esto. Deberíamos ver esto sobresale un poco más. Ahora, aquí vamos ya que tenemos el botón de inicio de sesión en el botón de registro. Por lo que a continuación tenemos que asegurarnos de que cuando se presionen estos botones, cambiaría este paso off. Uh, muy chico en el estado justo aquí, dependiendo del botón que hayan pulsado. Por lo que crearemos en prensa más cool una función justo aquí para decir esto Establecer estado off step. Oye, será uno. Y entonces si copiamos esta misma línea aquí abajo para el botón de registro esta bien, digamos a. Entonces si guardáramos esto ahora, lo que deberíamos ver es si estos botones oprimen, simplemente ocultaría esta zona. Entonces lo siguiente que tenemos que hacer es bajar aquí a donde este paso fuera. Uh, checa aquí será no será cero traje ni uno o dos. Entonces dentro de esta área aquí, vamos a volver a crear otro componente de vista, vamos a dar a este estilo fuera margen vertical de 20 solo para mantener las cosas consistentes aquí arriba. Entonces cierra esto en un interior aquí. Vamos a hacer más comprobaciones para ver si off step es uno. Entonces si Logan fue presionado o si es para apuntarse fue presionado. Entonces deja que esto se registren justo aquí. Entonces este estado todo paso es igual a uno, así que sabemos que es iniciar sesión. Y entonces si esto es falso, sabemos que fue inscrito. Entonces por ahora, sólo teníamos un pequeño componente de texto aquí solo para mostrar cada opción diferente en un inicio de sesión Entonces si guardamos esto ahora y echamos un vistazo, . deberíamos ver si subimos y damos click en el botón de inicio de sesión él, dice Logan. Y si vamos a perfilar Justo probado de nuevo, impresionado. Date de alta. puede ver que es un registro. Entonces en el siguiente video, cambiaremos estos componentes de texto de distancia y en realidad agregaremos. Interactúa un ble antinatural. Agrega algunos formularios de entrada de texto para que el usuario pueda agregar su correo electrónico, contraseñas de direcciones y en realidad iniciar sesión o crear una cuenta 50. Crea funciones de inicio y firmación y: bienvenido de nuevo. Entonces vamos a empezar por crear primero el registro real en forma, que va a reemplazar este texto. Simplemente si hacemos clic en bloquearlo. Vemos este componente de texto justo aquí. Vamos a empezar por eliminar primero esto y crear un componente de vista que se colocará aquí en su lugar Dentro de aquí. Queremos agregar un toque Ciudad mejor paga, que básicamente permitirá al usuario Teoh, cancelar esta solicitud y volver. Si quieren, como, cambiar de Logan a inscribirse en la oficina, pensaron en inscribirse, podrían volver y luego iniciar sesión. Tan solo sé un botón que comprimen justo aquí para cancelar la acción actual que están haciendo. Entonces, ¿qué? Agregar en un componente de texto justo aquí y decir cancelar. Teníamos un estilo sencillo justo aquí solo para hacer esperar el teléfono. Destaque haría que este cerrojo se fuera a este toque, pero un pastoso en sí. Por esto. Añade un poco de estilo solo para separar esto del resto de la forma. Por lo que estableceremos un borde inferior látigo de una algunas acariciando vertical cinco un margen a la parte inferior de 10 y estableceremos el color a este borde. Esto será negro. Entonces si solo guardamos esto, podrías echar un vistazo rápido lo que tenemos. Entonces cuando hacemos click en iniciar sesión, vemos esta área justo aquí con consejo de prensa, recuerda, no hace nada. Pero cuando hagas este próximo cambio, en realidad retrocederá y volverá a mostrar las dos opciones. Entonces a continuación vamos a añadir tan bien esta acción, crear un nuevo prop justo aquí que se convierten en prensa. Esto llamará a la función para establecer el estado. Y aquí sólo diríamos off step, ¿ Ves? Correcto. Entonces si vemos lo que esto hace, ya ves, vamos a iniciar sesión, presionamos cancelar y nos lleva de nuevo. En realidad podríamos hacer un oleaje es donde tenemos este componente de texto. Y cuando decimos cápsula, podríamos abrir una caja de emoji justo aquí y simplemente encontrar algunas de estas flechas traseras confinadas. Es escribiendo atrás y se puede ver son las diferentes opciones aquí o flecha. Se puede ver este solo para que destaque solo un poquito más. Entonces si guardamos esto aquí, vuelve a subir, solo ahorra tener que encontrarlo. Las imágenes pueden usar hit, por lo que siempre vale la pena echar un vistazo a las diferentes opciones ahí dentro. De acuerdo, entonces debajo de este tipo de un pastoso queremos que Teoh solo cree un pequeño encabezamiento aquí solo para mostrar que esta es la opción de registro. Entonces diremos que ingresará justo aquí. ropa es componente, pero en algún estilo aquí solo para que este bit destaque un poquito más Así que de nuevo, en algún divertido Espera, hagámoslo barco y separemos esto un poco de lo primero va a ser mostrado abajo sólo diciendo simplemente añadiendo un margen de fondo fuera. 20. Entonces si guardamos esto, vuelve al destino superior, haz clic en él. Se puede ver aquí es donde se va a mostrar el área que debajo del espacio de 20 antes que realmente en esto por otro, tenemos esto. No podemos esa forma. Entonces primero solo crearemos un componente de texto más que diría dirección de correo electrónico dice que actuará como la etiqueta y luego debajo podemos realmente agregar en una entrada de texto. Por lo que como antes, tomará una serie de apoyos para aquí. Necesitamos acreditable, pero seas verdadero tipo de teclado ya que es una dirección de correo electrónico. Es importante en esto en un oleaje que acaba de llegar en su dirección de guión de correo electrónico. Esto solo muestra el at symbol Andi, creo que dot com también para tu teclado solo para ayudar a estos teclear esto en. También teníamos un Marcador de posición. Dirán, ingresa tu dirección de correo electrónico o cualquier mensaje que quieras mostrar aquí y luego, como hemos hecho en otras entradas de texto, decimos sobre cambiar texto, asegúrate de capitalizar el mar para el cambio y luego esto. Y aquí ponemos el texto o cualquier orgías de nombre variable aquí. Y luego, igual que con Theo en evento de prensa, que es función más fría en esto diría que este estado conjunto correo E es texto. Ahora, podríamos cambiar esto a t Solo hay que asegurarnos de que estos sean los mismos. Pero solo para mantener todo igual, me gusta solo usar texto solo dedo del pie, mantener todo consistente, y entonces también vamos a poner valor aquí Ahora sé igual a este estado, un macho, y luego finalmente solo agregará un poco de estilo aquí solo para que destaque un poco más. Obtendremos un ancho de 250 margen vertical de 10 acariciando un cinco y luego un color de borde de gris. También añadiría un radio de borde solo para suavizar y los bordes de esto en nuestro pedacito. Ahora los tres. Entonces si guardamos esto y echamos un vistazo a lo que tenemos ahora, podemos ver ahora tenemos esta área justo aquí donde podría entrar el usuario. Hay que asegurarnos de que agreguemos un látigo fronterizo. De modo que esa frontera realmente aparece. Apenas tenía un ancho de borde de uno. Se puede ver que tenemos esta zona apenas a ahora lo que vamos hoy. Su copia esta entrada de texto en el componente de texto de Duthie justo aquí. Lo vamos a pegar directamente debajo. Cambia esta área aquí para decir contraseña y donde actualmente tenemos el tipo de teclado de ir a eliminar por completo esto y reemplazarlo por otra prop llamada entrada segura de texto . Ahora, esto es solo para asegurarnos de que la entrada de texto sepa que estamos ingresando una contraseña o al