Crea una aplicación completa para redes sociales para iOS con compras dentro de la aplicación con Swiftui y Firebase

1. Introducción: Hola, te doy la bienvenida a este curso. Soy tu anfitrión Aditya. He estado haciendo desarrollo del IRS desde el último par de años, y solo voy a hablar sobre ¿de qué se trata este curso? lo que en este curso integral de desarrollo IOS, te embarcarás en un viaje para construir una aplicación profesional y del mundo real de principio a fin. Ya sea que recién esté comenzando o buscando expandir sus habilidades, este curso cubre todo lo que necesita saber para desarrollar, probar y publicar aplicaciones IOS con confianza usando Swift UI y UIKit Al crear interfaces dinámicas y componentes personalizados para manejar la integración de back-end, te equiparé con herramientas para dar vida a tus ideas. Comenzarás por dominar Swift UI y UIKit, aprendiendo a construir impresionantes interfaces de usuario receptivas con formas personalizadas, colores de fuente Y a medida que avanzas, te sumergirás en conceptos de programación esenciales como manejadores de finalización, espera asíncrona y grupos de despacho, que te permitirán administrar flujos de trabajo complejos, asegurando que tu app funcione El curso profundiza en la integración de Five Base, lo que le brinda la capacidad de agregar funcionalidades robustas de backend como la autenticación de usuarios, administración de datos en tiempo real y la capacidad de crear publicaciones dinámicas Aprenderás a trabajar con colecciones y subcolecciones, empoderando a los usuarios para publicar publicaciones, seguirse e interactuar en un feed dinámico dentro de tu app. También nos centraremos en la experiencia del usuario enseñándole cómo implementar indicadores de carga personalizados, comentarios hápticos y atractivos elementos de interfaz de usuario personalizados Pero el curso no se detiene ahí. Aprendes a agregar funciones de generación de ingresos implementando compras en aplicaciones usando el kit de tienda, lo que te permite monetizar tu aplicación directamente Una vez que se construye la aplicación, obtendrá una experiencia práctica en pruebas en dispositivos reales, asegurando que su aplicación funcione perfectamente en una condición del mundo real. A partir de ahí, cargará su aplicación para probar el vuelo para realizar mejores pruebas, refinará en función de los comentarios, lo guiaremos a través de Appsor Connect, le enseñaremos cómo preparar su aplicación para su envío, administrar las compras en la aplicación y navegar por el proceso de envío de AppSource Al final de este curso, habrás construido una aplicación IOS completamente funcional, completa con un DUI pulido, un back-end robusto y una función monetizada Tendrás las habilidades para publicarlo con confianza en la tienda de aplicaciones, ya sea que estés construyendo una aplicación de redes sociales, una herramienta de productividad o cualquier cosa intermedia Este curso le brinda la base y experiencia para tener éxito como desarrollador del IRS. Esta sería la interfaz de usuario de la app que estaríamos construyendo. Por lo que incluiría varias pantallas. Estas son las pocas pantallas que he mostrado en la captura de pantalla. Y obviamente, si tienes alguna duda en algún momento dado del curso de SID, por favor no dudes en preguntarme en la sección de comando. Estaría muy feliz de ayudarte. Espero verte en el curso. Gracias. 2. Documentación del plan de la aplicación antes de comenzar el desarrollo: Así que comencemos con la documentación de la aplicación. Y para esto, estaría usando Obsidiana. Es una aplicación que podrías instalar en una Mac, y ayuda. Normalmente uso esto para documentar cosas. Tiene este editor de rebajas, así que facilita las cosas si estás trabajando con Git y todo, y podrías simplemente editar tu mes de lectura aquí o cambiar registros o algo así Así que comencemos creando una nueva nota y nombremos esto documentando la creación de la aplicación de redes sociales Entonces lo que pasa con esto es que realmente no necesitas seguir junto con la misma aplicación. Pero yo sugeriría encarecidamente si realmente pudieras seguir adelante en términos de hacer este documento o rehacerlo con algún otro tipo de aplicación que estarías haciendo, y es una especie de aplicación grande, así que solo necesitas diseñar todo el plan antes de ir hacia, ya sabes, el propósito de desarrollo Así que comencemos con, como, punteros. Entonces creo que habrá autenticación dentro de la app. Obviamente. Ahora bien, ¿ qué más habría ahí? Entonces habría creación de perfil de usuario. Y dentro de la creación del perfil de usuario, nos gustaría, vamos con una pestaña y lo que todo le pediríamos al usuario. Entonces pediríamos un nombre de usuario. Pediríamos un correo electrónico, les pediríamos su contraseña, y esto es que no vamos a guardar en firebase Solo guardaríamos el nombre de usuario y el mal para nuestro usuario de base de datos. Este es solo el propósito de la autenticación. Entonces creo que más adelante deberíamos agregar la función para tener una selección de perfil, ya sea mostrar un marcador de posición para ello Al igual que en términos de Instagram o Facebook lo hace si no tienes una imagen de perfil. Así que vamos a ir con estas tres cosas por ahora. Y qué tal darle un puntero más, y deberíamos tener usuarios deberían tener la capacidad de seguirse unos a otros. Sí, obviamente. ¿ Qué más debería haber ahí Entonces pensando en cómo podemos crear esa funcionalidad de seguimiento. Entonces, para que los seguidores siguientes funcionen, necesitaríamos tener subcolecciones dentro de nuestra base de datos. Usuarios. Entonces básicamente afirmando que cada usuario tiene una sub colección de seguidores y una sub colección de seguidores. Y dentro de esas subcolecciones, tendríamos una matriz de usuarios dependiendo de cuántas personas estén siguiendo a ese usuario específico o si está vacío o algo así. Entonces, ¿qué incluirá eso? Eso incluirá toda la estructura de usuarios de la base de datos. Entonces básicamente, sea cual sea el usuario de base crearemos después de la autenticación, almacenaríamos toda esa estructura dentro del seguidor y siguiendo cuando alguien siga siguiendo cuando alguien siga a una persona y lo haga podríamos , como, ya sabes, buscar los detalles porque no se trata solo de mostrar su imagen de perfil y el nombre de usuario, sino que es más como si vas a su perfil desde la página Explorar, entonces aterrizarías en su página de perfil de usuario, y luego necesitarías mostrar su publicación, y la publicación debe estar vinculada al usuario a través de sus ID de usuario. Entonces es por eso que necesitamos una tienda de estructuras de usuario completa en alguna parte Eso nos facilitaría las cosas. Entonces también podríamos tener la fecha seguida o algo así, alguna propiedad en caso de que la necesitemos para fines de clasificación, como si la gente quiere ver a quién seguí primero, y eso es principalmente como, sabes, una mejora en una característica ya existente. Pero llegaremos a ello, pensaremos en ello que si queremos incluir esto en nuestra versión una de la aplicación, y deberías pensar de la misma manera para tu aplicación. Entonces, si estás pensando en lanzar un MVP en etapa temprana por, como, Ya sabes, como dos o tres semanas de desarrollo, y luego quieres lanzar un MVP Entonces obviamente, fácilmente podrías simplemente saltarte estas cosas menores y luego simplemente lanzar la aplicación y luego, trabajar en estas cosas y totalmente depende de ti, aunque. Entonces llegando a las otras cosas, así los usuarios tendrán la capacidad de crear Post. Sí, obviamente, es una aplicación de redes sociales, y estamos pensando en permitir que la gente haga publicaciones Entonces, ¿qué incluirá lo del post? Por lo que post serán subcolecciones dentro de los usuarios. Sí. Y qué más debería haber ahí. Entonces otra vez, algo, debería tener un post ID. Sí, debe tener una identificación de propietario. Debe tener URL de imagen para la imagen principal. Debería tener URL de lista de reproducción en caso que quieran compartir sus enlaces de lista de reproducción. Y puedes tachar esto. Y qué más debería haber ahí. Entonces podrían suponerse que mi aplicación, que estoy construyendo específicamente para este curso, en realidad se referiría a cómo la gente planea su viaje. Entonces publicarían en cualquier lugar al que fueran y pondrían como imágenes para los mejores cafés o podrían ser las mejores estancias, leyendas, incluyendo todo eso incluido y ¿qué más debería haber ahí Debe haber calificaciones. Al igual que, vamos por ejemplo, debería haber ¿cómo va la vida nocturna ahí? Cómo es la seguridad, el transporte, debe haber presupuesto para ello. ¿Qué más debería haber ahí? Puede haber cosas que debemos llevar que podamos decirle a la gente que tenga con ellas cuando van por ese lugar específico. Y si, creo que eso también debería. Y lo llegaríamos más tarde también. Al igual que si quieres agregar algo nuevo, podríamos hacer eso. Entonces, obviamente, esto es una cosa muy, como, ya sabes, autoentendida, pero la publicación de cada usuario lo demostrará. Sí, aparecerán en su perfil. Sí, obviamente Y luego habrá una pestaña a la página Explorar para ver a otras personas otras personas. Y luego debería haber debería haber un feed casero donde puedas ver las publicaciones de otras personas, básicamente las que sigues. Entonces esto está ahí, y luego debería haber obviamente una sección de configuración desde donde podrías logo, actualizar foto de perfil, logo, volver al perfil de usuario, ¿qué más debería haber ahí? Debería haber cajas de alerta personalizadas para que nuestra app no se sienta, ya sabes, idealmente no debería tener como la caja de alerta genérica de Apple. Quiero decir, se vería muy mal con el tipo de UI que te mostré. Definitivamente debería tener algo más, y podríamos tener estados de manejo en caso de que algo esté vacío. Entonces básicamente, manejo de errores u ordena. ¿Y qué más debería haber ahí? Debería haber barras de carga en caso de que estemos haciendo llamadas EPI más largas, y debería haber una fuente personalizada incluida en nuestra aplicación Solo una fuente en la que estaba pensando, y debería haber obviamente, trataríamos de reorganizar toda la aplicación, reorganizar todos los archivos, básicamente, proyectar cemento de archivo de una manera que sea muy comprensible para cualquiera si alguien adelante se une a ti para agregar más características, funcionalidad a la aplicación, o incluso mientras, como, ya sabes, básicamente trabajando en un espacio de trabajo con muchas otras personas, necesitas tener este sentido de claridad, como, donde debes poner qué para que otros también puedan hacer referencia a él. Eso facilita las cosas tanto para ellos como para ti también. Entonces estas son las cosas en las que estoy pensando. Y sí, fue una cosa rápida de cinco minutos, diez minutos que acabas de exponer toda la funcionalidad de tu aplicación. Yo solo sé cuántas cadenas, cuántas pantallas se necesitan para ello, y, como, qué funcionalidad, está anotada a, como, puntos literales que lo que todos específicamente necesitamos Y a medida que construyamos la aplicación, podríamos agregar más cosas más adelante. Pero, sí, esto nos da una comprensión clara. Bien. Solo tengo que comenzar con la función de autenticación dentro la aplicación y ¿qué incluirá? Y obviamente, estamos usando firebase. Eso lo sabemos. estaría la creación del perfil de usuario, y luego habría muchos usuarios. Entonces tienen la capacidad de seguirse unos a otros. Entonces pueden hacer publicaciones. Se pueden ver el post del otro. Pueden actualizar su foto de perfil, y luego entra la interfaz de usuario, y así es como puedes crear tu propia documentación para cualquier aplicación en la que estés pensando, así que simplemente establece las cosas de una manera mucho más simple para ti y te facilita las cosas. Entonces, sí, continuaremos con esto. Y ahora que hemos expuesto esto, solo vamos a echar un vistazo a algunas cosas como algunas ideas. He visto algunos sitios web en línea, sitios como Bhands. Así podemos echarles un vistazo y ver cuáles son las UI presentes y si podemos tomar alguna referencia a partir de ahí y luego mezclar y combinar cosas, y posiblemente podríamos hacernos una idea completa de la interfaz de Al igual que ¿cómo deberíamos hacerlo? Sí, eso es todo para este video. Espero verte en el siguiente video. Gracias. 3. Creación del proyecto y adición de fuentes personalizadas: Bien, así que rápidamente quería mostrarles a todos, qué app, recientemente vi. Y esta pantalla en particular es en realidad una captura de pantalla del Instagram. Pero luego vi esta app en mi viaje. En realidad está en la tienda de aplicaciones, y me gusta mucho la idea de diseño de toda esta aplicación. Al igual que estas cajas pequeñas, y luego tienen esta fuente específica en ellas, lo que las hace lucir realmente únicas y destacan. Y la combinación de colores de esta app también es muy buena. Y en realidad me gustaría usar algunos de los elementos de diseño de esta aplicación para, como, agregarla a mi propia aplicación. Y esto fue esto. Y entonces en realidad tenemos algunos de los activos que vamos a utilizar. Así que he diseñado un logo de app. De hecho, podría usar esto. Yo te proporcionaría todas estas cosas. Pero en caso de que no, um, quiera usar esto, realidad podría tener su propio diseño de logotipo de aplicación y cualquier software de diseño que prefiera y todo, y entonces podría hacer esto. Veamos qué tal si abrimos Xcode, seleccionamos IOS, luego seleccionamos aplicación, y luego hacemos clic en Siguiente, y vamos a nombrar esto Mi aplicación de redes sociales. Y depende completamente de ti qué nombre quieres poner aquí. El equipo obviamente seleccionaría un equipo donde ya tengas una cuenta de desarrollador de Apple. E incluso si no lo tienes, en realidad podrías saltarte la última parte de este curso y aún tendrías esta aplicación de cartera para exhibir. Y ahí está tu desarrollo. Y qué tal si ponemos esto aquí, así el identificador del paquete va así, por aplicación de redes sociales. Y no te preocupes demasiado por la organización e identifícate ahora mismo porque cuando trabajemos con Appstocnect y todo, realidad aprenderíamos cómo podrías registrar tu identificador de paquete de aplicaciones en Appstocnect Por lo que facilita las cosas en el sitio web del desarrollador de Apple y todo. Entonces para la interfaz, seleccionarías Swift UI, el idioma es Swift, el almacenamiento sería ninguno. No es necesario incluir prueba, y luego podríamos hacer clic en Siguiente y seleccionar algún lugar donde pueda almacenar nuestra aplicación. Entonces esto está aquí, y en realidad no preferiría usar, sabes, el inspector de vista previa porque simplemente hace que todo sea muy lento. Así que vamos a acercarnos y aquí estamos con la aplicación y ¿qué tal si podríamos seleccionar 115 más o algo así y simplemente construir la aplicación una vez en eso Entonces seguiríamos usando este teléfono específico para ese propósito, y sí, entonces en realidad pasaríamos a usar la fuente que te he proporcionado, y veríamos cómo podemos usar esa fuente aquí mismo en esta propia pantalla también Entonces creo que instalando. Sólo esperemos unos segundos. En tanto, ¿qué tal si solo importamos nuestra fuente aquí mismo y te pediría agregar dos objetivos Esto debe verificarse, crear referencias de carpetas y copiar elementos si es necesario. Usted hace clic en Finalizar. Tu app está ahí, y ahora lo que haríamos es crear un nuevo grupo, llamar a esto recursos, y los assets y la fuente coincidirían recursos. Nuestro archivo principal de aplicación coincidiría con este código de nombre de carpeta. Y qué tal si mantenemos este dentro de las vistas de nombre de carpeta. Entonces esto hace que las cosas sean un poco más limpias para nosotros. Mientras tanto la app se está construyendo. Entonces ahora que hemos agregado nuestra fuente, a la aplicación. ¿Qué tal si vamos a la pantalla principal de la aplicación? Aquí verías la lista info punto p. Da clic derecho en cualquiera de estos y haces clic en ADR. Escribe las fuentes proporcionadas por la aplicación. Una vez que se agrega, haces clic en esta flecha, y además del ítem punto cero, realidad harías triple clic en esto, copiarías todo, volverías a info punto p list. Y agrega esto aquí y da clic en Entrar. Entonces, una vez que hayas hecho esto, bien, sigue construyendo. Entonces, una vez que hayas hecho esto, notarás que info dot p list también ha aparecido justo en el navegador de proyectos. ¿Qué tal si movemos esto aquí? Pero eso en realidad nos crea un pequeño problema. Entonces, mientras tanto, la aplicación se ha construido y dice, Hola mundo según nuestra vista contenida. Esto es bueno. ¿Qué tal si ordenamos lo de la lista de puntos de información Porque ahora mismo si intentas ejecutarlo de nuevo, notarás que nos va a arrojar un error. Y esto específicamente establece, no se puede encontrar el archivo de entrada de compilación, y nos está dando toda la ubicación. Y dice: ¿Olvidaste declarar este archivo como salida de una fase de script o factura personalizada Básicamente significa que la lista de información a la que está tratando de referirse No está en esta ubicación porque ahora está dentro de una capa más, que es nuestra carpeta de recursos. Entonces lo más básico es que vamos al área de aplicación principal. Entonces vamos a general, o tal vez podrías simplemente buscarlo aquí arriba info punto PLS, nos mostraría la ruta y info punto plist Haz clic en Enter, te desplazas un poco hacia abajo Dice info dot plist file. Aquí, justo antes de info dot plist, agregarás recursos, haz clic en Enter ¿Qué tal si ejecutamos esto ahora? Entonces ahora construye. Entonces eso es una cosa hecha, y solo esperemos a que se construya. En tanto, si solo vas a la sección de recursos ácidos, usaríamos el ícono de la aplicación. También tendríamos el ícono de la aplicación aquí. También tendríamos las imágenes aquí mismo. Entonces, si ves ahí están las imágenes que he usado en algún lugar dentro la aplicación para fotos de perfil de usuarios de muestra así como para algunas ilustraciones de fondo. Así que acabo de recibir todos estos de alguna aplicación de muestra en BHNS también Así que depende completamente de ti qué tipo de ilustraciones quieres usar dentro de tu app. seleccioné porque son algo únicos, pensé. Entonces esto es todo. Creo que aquí ni siquiera necesitamos estas imágenes de perfil, así que podemos eliminarlas de aquí porque en realidad las necesitaríamos dentro de nuestro interior de nuestro simulador. Entonces, si seleccionamos esta cosa, seleccionamos esta, seleccionamos estas cinco imágenes, bajamos a Simulador, y las abre dentro su editor de fotos, la app Fotos. Entonces ahora que esto está hecho, podemos cerrar esto. Podemos seleccionar esto de nuevo. Realmente ya no necesitamos lo del activo de imagen. Ahora lo que haríamos en realidad es escribir algún código porque ves la fuente que hemos agregado. Honestamente, este no es el nombre real de la fuente, y hay una manera de averiguarlo. Y por lo general por si acaso, si lo obtienes de alguna fuente auténtica. Tienen este nombre exacto, pero luego a veces también es que se refiere a algún otro nombre. Es sólo el nombre del archivo por ahora. Entonces para hacer eso, vamos a ejecutar un bucle para encontrar toda la familia de fuentes dentro de nuestra aplicación. Al igual que todas las fuentes están presentes, las conoceremos. Entonces iremos por los apellidos punto ordenados. ¿Está ordenado? Sí. Y entonces podríamos crear una constante, dejar que los nombres sean iguales a la fuente UI. Entonces accederíamos a nombres de fuentes, y sería familia. Y podemos simplemente imprimirlos aquí. Y diríamos, debería ser la familia de la fuente sería familia. Pero entonces el nombre de la fuente serían nombres. Entonces básicamente lo que estamos haciendo aquí es que para una fuente específica, debe haber cursiva, ultra ligera, negrita, extra negrita. Entonces solo estamos tratando de enumerarlos todos aquí abajo en el área de la consola para que podamos averiguar cuál es nuestro porque queremos uno audaz específicamente. Así que vamos a ejecutar de nuevo la aplicación y notaremos que pronto debería simplemente imprimir los nombres de la fuente en el área de la consola. Y aquí tienes. Como, ¿ qué tal si puedes ver esto aquí mismo, pero ¿qué tal si todavía lo filtramos? Bien, entonces tenemos la fuente aquí, y lo siguiente que hay que hacer es crear otra carpeta dentro de la aplicación, y llamaríamos a esta carpeta, nuevo grupo. Llamemos a esto constante. Porque vamos a estar teniendo constantes tanto para imágenes, colores, fuentes también Entonces, ¿qué tal si creamos una carpeta juntos para todas estas cosas?, creamos un archivo rápido y lo llamamos fuentes, y hacemos clic en Crear. Ahora que esto está hecho, podríamos simplemente escribir fácilmente una estructura. Lo llamaremos fuentes, y esto es simplemente acceder con demasiada facilidad nombre de la fuente porque no queremos al nombre de la fuente porque no queremos codificarlo cada vez que queremos, ya sabes, usarlo porque eso lo hace realmente agitado de una manera que tienes que ir una y otra vez, verificar la ortografía correcta, dejarlo todo Ahora podrías acceder fácilmente a él usando fuentes punto negrita, y daría este valor, y es fácil usarlo de esa manera. Entonces ahora que hemos hecho esto, ¿qué tal si vamos a nuestros puntos de vista, y solo lo usamos? Diremos fuente. Ahora para usar una fuente personalizada, inicia una clase de fuente. Escribe personalizado, luego en el nombre, realidad escribirías fuentes punto negrita, y el tamaño sería 30. Entonces, ¿qué tal si lo intentamos y vemos por nosotros mismos si está funcionando o no? Y ahí tienes. Se puede ver que la fuente ha cambiado y en realidad está usando una fuente personalizada que hemos agregado en la aplicación. Bien, así que en el futuro, estaríamos repasando las otras cosas y estaríamos comenzando con las pantallas de autenticación. Y entonces tendríamos un modelo de vista y una vista de autenticación, y en realidad empezaríamos a integrar Five Ways también poco después. Así que primero vamos a crear una interfaz de usuario básica con botones y todo, y luego integraríamos todo un proyecto con cinco formas. Registraremos nuestra aplicación en cinco Base y luego podríamos comenzar a usar las cinco formas de funcionalidad allí en adelante. Bien. Entonces espero verte en el siguiente video. Gracias. 4. Agregar colores personalizados a tu aplicación: Hola. Entonces hemos agregado dos cosas nuevas al proyecto, y solo te guiaré a través de él porque no es mucho código. Entonces, en primer lugar, creamos una carpeta para ayudantes, y hemos agregado para ver aquí Entonces básicamente, pensé todo este flujo que supongamos al hacer la autenticación mientras se registra o inicia sesión, supongo que hay que presentarle al usuario, como si ingresaran mal la contraseña, en el caso de que en el caso que la contraseña no sea de la longitud requerida. Había como ocho caracteres mínimos, y solo ponían como cinco cuando intentan registrarse, o incluso si están tratando de iniciar sesión y no están siendo iniciados porque están poniendo la contraseña incorrecta, mostrarían una caja muy delgada, como un mensaje de brindis al usuario en lugar de una alerta para que sepan que están haciendo algo mal. Con ese propósito, creé esta vista Tostada. La vista tostada no es más que una vista rápida de la interfaz de usuario, y toma un mensaje como parámetro. Entonces es de naturaleza dinámica. Al igual que, podrías usar la vista Toast en cualquier lugar de la aplicación así. Déjame darte una demostración rápida, sí. Y podrías pasar cualquier mensaje aquí. Entonces podría ser que la contraseña deba ser de la longitud mínima de caracteres de seis u ocho o algo así, y al mismo tiempo, podría ser que ingresaste Contraseña incorrecta, por favor intenta iniciar sesión de nuevo, algo así. Entonces estos son los casos de uso para la vista tostada. Entonces, en el futuro, es solo un modificador de texto con, como, básicamente fuente agregada una fuente personalizada, un estilo de primer plano como el color negro Le he dado toda la fuente, y luego hay un color de fondo que puedes notar. He usado esta función aquí. Entonces no es uno de los colores de la interfaz de usuario de en realidad, ya sabes, um, Apple, como el kit de interfaz de usuario. En cambio, tiene algunos colores personalizados. Ahora yendo a los colores personalizados, en realidad hemos creado este archivo, cual te proporcionaría en los recursos del proyecto. Uno de los pocos archivos es éste. Y básicamente, aquí hemos agregado todos los colores personalizados que quería incluir en mi app, y cómo estoy usando este inicializador es que he escrito una extensión para ello Entonces encontré esta extensión en línea en algún foro, y básicamente lo que hace es que te permite usar directamente xcodes dentro de tu aplicación En su lugar, si quieres agregar un nuevo color, no necesitas ir a la columna Activos, luego hacer clic en R, y luego tienes un nuevo conjunto de colores. Seleccionas el conjunto de colores, vas aquí y puedes agregar el color, lo que quieras, y luego podrías usar el nombre ahí. Entonces esto es una especie de proceso grande. Entonces en vez de esto, he hecho esta cosa, y esto es más o menos la adición a la misma, y te estaría proporcionando este archivo, y definitivamente vamos a repasar inicializador de conveniencia y todo en la parte donde te enseño sobre ti I. Así que sí, espero verte en el siguiente video 5. Configuración de Firebase dentro de tu aplicación: Por lo que este video ahora se enfocará en integrar básicamente firebase a tu proyecto Entonces, si solo te mueves hacia el archivo de vista de contenido, haz clic derecho sobre él, y debe tener una opción de refactorización con renombrar Entonces, llamémoslo vista principal por ahora. Y vista al interior, bien. Entonces podríamos crear un modelo de vista dentro de una subcarpeta dentro de las vistas en sí, o podríamos tener otra carpeta para los modelos de vista. Quiero decir, te ayuda a mantener las cosas en su lugar. Usted hace comando aquí, selecciona un archivo Swift, llamemos a este modelo de vista principal. Aquí, tendrías un modelo de vista principal de clase, que sería un objeto observable Y esto es sobre eso. Podríamos agregar Swift UI aquí también. Yo por casualidad, lo necesitamos. Volviendo a la vista principal, comenzaríamos creando un objeto observado para el modelo de vista, que sería del tipo main view model. Y aquí, en realidad podemos simplemente borrar todo este asunto y añadiríamos otra pila V. Y esta pila V debería tener algún tipo de espaciado para que si agregamos múltiples elementos, se muestren sobre toda la pantalla de una mejor manera, diría yo. Entonces podríamos simplemente escribir un texto aquí en el que ahora estás registrado. Y aquí podrías agregar un botón y una acción y una etiqueta. Entonces la acción sería como algo como ver modelo punto firmar Cerrar sesión. Y por ahora, solo podrías ir al modelo de vista y agregar una función aquí llamada Cerrar sesión. Bueno. Y por ahora no podemos tener implementación. Volviendo aquí por la etiqueta, haríamos un texto, que obviamente diría cerrar sesión. ¿Qué más hay? Entonces agregaremos una fuente personalizada, fuente punto personalizado. Después seleccionamos fuentes punto negrita. Y como está dentro de un botón, vamos a darle una talla 18 o algo así. Entonces tendríamos un peso de fuente de negrita. Por cierto, no creo que vaya a funcionar porque es nuestra fuente personalizada y no el epipon Entonces, si podemos seleccionar color de primer plano, debemos darle un color negro Entonces podemos tener algo de relleno alrededor de él. Es lo mismo que hicimos para la vista tostada, y aquí tendríamos un marco con un ancho máximo de infinito, no en él, sino infinito. Ahora podemos tener algún color de fondo. Entonces haríamos color de la interfaz de usuario de color, y vamos a darle un color amarillo primario. Entonces este color está haciendo referencia específicamente a partir de este archivo que mostré en el último video Así que aquí están los códigos hexagonales para diferentes colores. También podrías usar tus propios colores. Entonces un sitio web rápido que quería mostrarte para eso es enfriadores. Básicamente, tienen muchas paletas de colores en su sitio web, y podrías simplemente simplemente pasar por las paletas de colores y seleccionar cuáles te gustan. Entonces supongamos que aquí te gusta el color. Tú seleccionas en él, yo copia el código hexadecimal a tu portapapeles, tú lo pegas aquí Se crea una nueva función llamada nuevos refrigeradores de color. Y solo puedes cortarlo desde aquí y agregarlo aquí. Y esta es ahora tu nueva función. A pesar de que esto no se requiere, pero lo voy a dejar aquí por ahora y sólo podemos continuar. Tengamos un radio de esquina a nuestro botón, también. ¿Qué más podemos hacer? Entonces ahora mismo, si ves, si podemos imaginar que el botón sería como, ya sabes, tendría una fuente, entonces algún color de forkground y un color de fondo, pero no va a tener ningún tipo de trazo al mismo Como, ¿qué tal si le damos un boder o algo así? Entonces para eso, estaría usando overlay, que es otro modificador y Swift UI. Y para la superposición, usaríamos un rectángulo redondeado con un tamaño de esquina de diez en sí, y este rectángulo redondeado, tal vez no tamaño de esquina, sino radio de esquina. Y este rectángulo redondeado no tendrá ningún tipo de relleno, sino sólo un trazo. Y este trazo sería punto negro con un ancho de línea de, digamos, cuatro. Hagámoslo como una cosa de borde grueso, y esta pila, vamos a darle un poco de relleno por si acaso, ya sabes, se ve mejor en general en la app. Entonces ahora que hemos hecho tanto, solo estoy pensando en las cosas que necesitamos, como, ya sabes, pasar por lo que obviamente tendríamos que integrarnos con firebase Pero también recuerdo esta única cosa que ya que tenemos, como, ya que tenemos esta vista creada ahora mismo, y debes haber notado que no estoy pasando en el no estoy pasando en el modelo de vista como si no lo estuviera inicializando aquí Entonces habría hecho cualquiera de los estados, objeto, privado un modelo de vista es igual al modelo vista principal con paréntesis para básicamente inicializar la clase aquí Pero estoy tomando esto como argumento. Entonces lo que pasaría es que si trato de ejecutarlo ahora mismo y estoy asumiendo el archivo core, este archivo debe estar teniendo mi vista principal como el sí. Entonces nos va a arrojar error porque ahora necesita un modelo de vista aquí. Así que podríamos repasar rápidamente esto y no es una gran configuración. Así que básicamente lo que podríamos hacer es, um, venir aquí y hacer lo del objeto estatal aquí. Tan simple como eso. Entonces básicamente, declaramos state Object wa view model, que sería del tipo main view model. Y ahora que hemos hecho tanto, nos pidió un modelo de vista, y le daremos un modelo de vista. Y dentro de Window Group, en realidad incluiríamos nuestra vista como una pila de navegación Ya que queremos utilizar la navegación Swift DUI para toda la app Entonces esto fue todo. Y ahora que ejecutamos la app , probablemente debería funcionar. Vamos a ver. Y obviamente, que ahora hemos creado una vista con una funcionalidad sine out, realidad también crearíamos en realidad también crearíamos una vista para una funcionalidad de inicio de sesión, y podríamos usar algún tipo de booleano para mostrar cualquiera de las vistas, dependiendo de si el usuario está autenticado Entonces para ese propósito, en realidad necesitaríamos fuego Ways. Y este era el diseño que iba por, pero depende totalmente de ti si quieres usar, ya sabes, el otro color. Entonces, por ejemplo, podríamos usar los nuevos enfriadores de color. Ejecuta la app de nuevo y vamos a ver cómo sale a ser. Entonces, bien, hasta esto me parece bien. Entonces, depende totalmente de ti qué colores quieres usar, y ahora que hemos creado un simple botón dentro de nuestra app, también podríamos hacer esta única cosa que extraemos algunas de las cosas de aquí para que una y otra vez, si estás creando botones, en realidad podríamos reutilizarlos. Entonces esas cosas entran en la sección de mejora, no exactamente en nuestra única versión. Quiero decir, en realidad podríamos tomar esas cosas una vez que tengamos la funcionalidad abajo y lista. Entonces por ahora, vamos a ir a Google, y ahora ya no necesitamos esto. Podríamos simplemente ir a FBA. Hacemos clic en Firebase, y deberías ver algo como esto. Vamos a Consola. Y dice comenzar con un proyecto basado en cinco, así que da clic aquí. Y llamemos a esto mi aplicación de redes sociales. El nombre del proyecto podría ser cualquier cosa. No tiene que coincidir con tu app específicamente porque un proyecto puede contener la parte IOS de ella, la parte Android de ella, la parte web de ella, también. Así que en realidad no se requiere, pero sí, podrías nombrarlo igual que yo he hecho aquí. Por lo que acepta los términos y condiciones de D fives, y confirmo que usaré cincos exclusivamente para los fines relacionados con mi negocio comercial Bien. Entonces tenemos que revisar estas dos cosas, y ahora damos clic en Continuar. Y te pregunta si quieres habilitar Google Analytics para este proyecto. Entonces, lo que sucede es que cuando instales el paquete base fire en tu sistema, también necesitarías estas cosas analíticas. Entonces, por ahora, este propósito específico, quiero decir, realmente podrías hacer un buen uso de esta función, como lo de la analítica. Pero por ahora, no iría con esta ruta. Pero podría sugerirte que puedes hacer eso, o podrías hacerlo en algún momento posterior en el tiempo cuando quieras integrar análisis en tu app. Entonces, sigamos con la creación de un proyecto. Tomará un par de segundos, creo, y va a crear un proyecto para nosotros, y nos quedaría un paso para que solo, ya sabes, vinculemos el proyecto al proyecto de cinco Bases. Entonces para eso, en realidad necesitaríamos el identificador de paquete. Y llegando al punto, recuerdo que vamos aquí o capacidades de autofirma. Entonces no lo creo. Esto se ve muy limpio. Quiero decir, ¿por qué mi aplicación de redes sociales viene dos veces? Así que solo lo haría como un tipo de URL DNS inverso, identificar básicamente. Y ahora he added.com. En realidad podrías nombrarlo cualquier cosa que quieras. Y ahora que he hecho esto, vamos a ejecutar esta aplicación una vez más, pesar de que simplemente la registra automáticamente tu tienda de aplicaciones. Entonces no es realmente un problema aquí. Ahora que hemos hecho tanto, su proyecto FIS está listo Hacemos clic en Continuar. Y ahí te mostraría varias opciones. Pero lo que necesitas es agregar una app para empezar. Haremos clic en IOS. Pide tu ID de Apple Bundle. Así que solo seleccionaremos esto. Nos fijamos aquí. El apodo sería mi aplicación de redes sociales. Apps IDO realmente no necesitan. Es opcional, así que hagamos clic en Registrar app. Ahora bien, nos daría un archivo de configuración, y nos está diciendo a sí mismo, ¿ dónde necesitas poner este archivo? Entonces, ¿qué tal si acabo de descargar el archivo? Entonces en unos segundos, comenzará a descargarse y ya está hecho. Notarás que el nombre de mi expediente está un poco mal escrito Es solo la razón porque hice esto hace un tiempo y porque ese Google Service Info PL también está en mi carpeta de descargas. Por lo que creó el soporte uno a su lado. Pero para ti, en realidad necesitarías, ya sabes, tomemos este archivo, ponlo dentro de los recursos, dar clic en Finalizar. Damos click en. ¿Tiene una opción de renombrar o vamos a hacer triple clic en él Y ahora quitamos esto así. Y quiero decir, dice agregarlo a la raíz de tu proyecto. Entonces, ¿qué tal si realmente lo hacemos así? Apenas por ahora, vamos a comprobar esa cosa también que si específicamente necesitamos agregarlo dentro, ya sabes, el otro archivo dentro de la carpeta si está bien o no. Entonces ahora que hemos hecho tanto, volvamos a ejecutar la app porque no lo creo hay más pasos. Bien, sí tenemos el paso de decaimiento de Adfrebse S, pero solo asegurándonos de que la información PLS no esté arrojando ningún error. No lo es. Sí. Entonces dice usar Swift package manager para instalar las dependencias de firebase Así que vamos a copiar el enlace de Gt. Ahora vamos aquí. Vamos a Archivos, y dentro de archivos, deberíamos tener agregar dependencias de paquetes aquí arriba mismo Ahora nos pediría agregar una URL aquí, cual seleccionaríamos los cinco SDK IS base, seleccionamos hasta la siguiente versión principal con la versión actual, lo que sea que te den, y obviamente la agregaremos al proyecto. Usted hace clic en Agregar paquete. Tomará unos segundos solo obtener los detalles de D, y pronto se instalarán en su sistema todos los cinco SDK necesarios para Base instalarán en su Antes de eso, creo que pediría un paso extra, y nos daría una opción como ¿qué dependencias necesitas realmente ? Así podríamos seleccionarlos como qué cosas necesitamos. Entonces llegando a mi punto otra vez, que usaríamos almacenamiento Firebase, usaríamos Fire Store, usaríamos la funcionalidad de autenticación Entonces estas son las cosas que necesitamos para agregar nuestros paquetes alrededor. Entonces, solo esperemos a que se resuelva rápidamente. Mientras tanto, podríamos ir y bien, si hacemos clic en siguiente, también nos da algún código de inicialización Entonces bien. Y también nos dice que hay que hacerlo algo así. Entonces quiero decir, esto está bastante ordenado para nosotros porque nuestra aplicación está en realidad en la propia FDUI, así que podríamos hacer esto Entonces, para ese propósito, volvamos rápidamente y, bien, entonces está agregando todas estas cosas a nuestro objetivo, y en realidad podrías repasarlo y eliminar ciertas cosas porque podría aumentar un poco tu proyecto, el tiempo de construcción. Pero dejémoslo por ahora, y veremos si está causando demasiados, ya sabes, está tomando demasiado tiempo, digamos, para construir el proyecto D. Entonces definitivamente miraremos alrededor de esta cosa. Entonces ahora que hemos agregado cinco bases, nos pide que agreguemos este código de interfaz de usuario rápido. Entonces, ¿qué tal si tomamos todo este trozo de código copia esto? Bien, esto está copiado. Vamos a nuestro núcleo. pegamos esto. Entonces copiamos todo esto. Oh, dice ahora módulo encontró cinco núcleos base. Bien. Solo hagamos Shift Command K. Y haremos cinco aros de base Cinco código base. Y ahora hemos copiado este código. Nosotros hacemos esto. Y aquí añadiríamos esta línea aquí mismo. Así que ahora podríamos intentar ejecutar nuestra app para ver si se está inicializando o no, y probablemente también veríamos algún tipo de registro Así que esto aseguraría que cinco bases se estén configurando realmente dentro nuestro proyecto cuando se lance. Entonces solo espero a que se construya. Y mientras tanto, bien, nos está pidiendo que agreguemos todo este código. Sin duda hemos sumado todo esto. Y luego si hago clic en siguiente, dice que ya está todo listo. Bien, sigue consolando. Entonces la consola debe estar pareciendo así, algo similar solo si tu nombre es diferente o algo así. Y nos está preguntando por el largometraje de Du Gemini. Realmente no lo necesitamos por ahora. Oh, acabo de notar que la nueva app. Bien, cosa tan interesante. La razón por la que cambiamos el identificador del paquete, y ahora nuestro simulador es en realidad, bien, así que en realidad estamos obteniendo un montón de Five Ways. Bien. Así que estamos recibiendo registros de cinco bahías No hay necesidad de indagar en ellos en cuanto a por qué es este error y qué dice porque no están directamente relacionados con nuestro trabajo, pero sí. Bien, entonces está funcionando, y acabamos de notar que nuestra aplicación en realidad está duplicada. Es solo por la razón por la que hemos cambiado el identificador de paquete de nuestra aplicación. Por lo que ahora se registra como una app totalmente nueva. Entonces por eso creó un duplicado. Así que simplemente desinstalamos la app anterior. Vamos a construirlo de nuevo. Construye todo bien. Entonces, en los próximos videos, solo construiríamos pantallas de autenticación, y luego escribiremos funcionalidad para iniciar sesión y registrarse. Y luego escribiríamos la funcionalidad para cerrar sesión también. Entonces estas son las tres tareas en las que nos centraremos principalmente, y espero verte en el siguiente video entonces. Gracias. 6. Creación de AuthView para la aplicación: Entonces, antes de comenzar a escribir las funciones, solo habilitemos las funciones que necesitamos dentro de nuestra app. Entonces, si solo vas a construir y seleccionar la autenticación, entonces nos pide que empecemos. Entonces hacemos eso y registramos métodos, bien. Y te muestra el usuario aquí. Así que autentica y administra usuarios desde una variedad de plataformas No lo creo, necesitamos agregar aquí ningún tipo de regla o algo así. Entonces esto es bueno. Vamos a ver. No creo que sea necesario agregar algún tipo de regla, sino para almacenamiento específicamente, que lo conseguí de aquí mismo. Si venimos aquí, sí empezamos en modo test. Hacemos clic en siguiente, y mantengamos la ubicación predeterminada de almacenamiento en la nube que nos hayan dado. Por lo que hacemos clic en De y ojalá termine en, como, un minuto más. Para que podamos seguir instalando también la tienda de bomberos. Entonces, bien. Mientras tanto, mientras se está configurando, vamos a ir a las vistas hacer Comando y para crear una nueva vista de interfaz de usuario Swift, y llamemos a esto Othew Así que pensé en esto un poco como obviamente tendríamos la pantalla de registro y la pantalla de inicio de sesión. ¿Qué tal si creamos una pantalla combinada para ambos? Entonces los estoy llamando a eso OthVew. Vamos a hacer clic en Crear, y esto está ahí. Podemos eliminar la parte de vista previa de la misma. Bien, entonces nuestro almacenamiento ya está configurado. ¿Qué tal si vamos a reglas? Y la razón por la que voy aquí es porque tiene una marca de tiempo para Entonces creo que dice el 20 de octubre. Entonces, ¿qué tal si hacemos eso, 2025? ¿Podemos hacer esto publicar? Bien. Entonces ahora hemos cambiado las reglas para que duren hasta 2025 teh de octubre, que es un tiempo muy largo Pero te sugiero que lo hagas, como por unos dos meses a partir de que empieces. Por lo que tendría un marco de tiempo para que usted también lo complete Quiero decir. Entonces básicamente la razón por la que estoy haciendo esto es que realmente necesitas tener la marca de tiempo, como la regla debe ser aplicable para que puedas hacer que esta funcionalidad funcione Supongamos que has cruzado esta marca de tiempo, te metiste en que te ocupaste con algún trabajo. Y ahora después de un mes, estás tratando de construir algunas cosas en tu app, y notarás que no te está permitiendo. Entonces a veces podrías tener que solucionar esto, porque no digo explícitamente que tus reglas hayan caducado o algo así, por lo que yo sé Entonces por eso estamos haciendo esto en una amplia gama porque, como, no queremos terminar teniendo problema. Y como hemos hecho almacenamiento de autenticación, vamos a la base de datos Fistoe En realidad, la mayoría de nuestros datos estarían utilizando únicamente la base de datos de Fistoe Es solo que la parte de almacenamiento es específicamente para las imágenes, y, sí, eso es todo. Supongamos que si quieres que este proyecto esté configurado para usar esto no estoy seguro de eso. Um, vaya a Google Cloud Console. Si tengo sentido. Realmente no lo creo así que necesitamos realmente no lo creo así que tenemos que hacer algo aquí, entonces. O sea, si vas a la base de datos en tiempo real, pero en realidad no vamos a estar usando base de datos en tiempo real. Solo usaríamos base de datos ISO y almacenamiento y autenticación. Así que mantengámoslo así. Nos encargaremos de que más podamos hacer. Bien, entonces esto se hace ahora de vuelta a nuestra vista de la tierra. Así que comencemos dándole un modelo de vista de objeto observado, que tendría nuestro modelo de vista principal. Esto está hecho. ¿Qué tal si le agregamos una pila Z, y le agregamos un color Entonces el color debería ser mientras tanto Por ahora, quiero decir, el color, vamos a mantenerlo. Debemos estar teniendo este color naranja rosáceo, y también hacemos área ignorada Por lo que cubre todo el asunto. Y sólo para que esto funcione, ¿qué tal si vamos aquí? Nosotros hacemos esto. Entonces ahora hemos cambiado los puntos de vista. Entonces ojalá en realidad solo nos mostrara la vista oth ahora con toda la pantalla en algún color como este que hemos definido aquí. Así que vamos a rápidamente ver Y bien, así que está tardando unos segundos en acumularse. Eso está bien, quiero decir. Entonces sí, entonces cubre toda la pantalla, y esto me parece bien. Pero, como, la pantalla por sí sola, me parece un poco vacía. Quiero decir, podría hacerlo mucho mejor. Entonces, para ese propósito específico, había agregado estas imágenes a la sección de activos en el primer video, creo. Entonces la razón por la que agregué todas estas imágenes es que podríamos hacer uso de ellas en el sentido de que solo vayamos al modelo de vista. Y aquí, en realidad tendríamos algún tipo de matriz en la que estoy pensando que podemos, como, recorrer para que podamos tener el todo, ya sabes, um, también podríamos hacer esta única cosa que dentro de nuestras constantes, deberíamos tener comando y un nuevo archivo, llamémoslo imágenes, y debería ser una struct, que se llama Esperemos que las imágenes no sean un nombre de biblioteca definido por Apple. Creo que solo usamos imagen. Tan bueno para nosotros. Y podríamos hacer algo como static static let. Y podríamos llamarlo imagen de dinero. Y ¿qué almacenaría la imagen del dinero? Si vamos a activos, aquí veríamos dinero. Entonces podemos copiar esto, volver a las imágenes porque ver, podría haber muchos errores de tipo si realmente codificas nombres en todos los lugares donde quiera que los estés usando. Entonces es por eso que estamos creando estos valores estáticos para usar. Así que vamos a copiarlo. Y creo que tengo cinco imágenes en total. Entonces hagamos esto cinco veces y una de ellas sería pintar imagen. Una de ellas sería la imagen de manos. Uno de ellos sería imagen de corazón, y uno de ellos sería imagen de libros. Y vamos solo a los activos. Por lo que hay pintura triple pinchando sobre ella, Paintx. Entonces, si vamos a la estructura de imágenes, pintar imagen sería Pain tex, volvemos a los activos, Handshart debe ser Tao, entonces hay dos corazones ahora pensando Banner debe ser el bander. Esa es una fácil para nosotros. Después hay una imagen de mano y una imagen de corazón. Así que sólo podríamos ir a manos corazón. Y ponlo en la imagen de la mano, y podríamos volver a ir a los activos, y ahí está el corazón, así que solo ponlo dentro de la imagen del corazón también. Bien, esto está hecho. Así que acabamos de crear una estructura que tiene cinco propiedades estáticas diferentes. ¿Qué te permite hacer esta palabra clave estática? Es que ahora puedes usar la propiedad directamente en el tipo y no en una instancia. Entonces podrías hacer algo como esto. Por lo que no es necesario declarar una instancia de la estructura de la imagen para usar estos valores. Por eso usamos estática. Y sólo definen uno en la memoria. Por lo que también ayuda en un poco de rendimiento sabio. Entonces volviendo a nuestra vista tierra, lo que estaba pensando es que si agregamos esta propiedad dentro de nuestro modelo de vista que deja que las imágenes sean iguales, y obviamente dejaría que las imágenes fueran iguales, sería una matriz. Entonces podríamos tener imágenes punto Many Image. Imagen de dinero. Podrías tener imágenes punto, pintar imagen. Sólo vamos a copiarlo por ahora. A, dos, tres, esto esto, tendríamos pancarta. Bien, ¿por qué no viene? Imágenes punto. Imagen de libros. Imágenes punto, handshtimages, Tot, imagen del corazón. ¿Qué más queda? Pintura, libros duros a mano, dinero. Bien. Esto está hecho. Entonces, en realidad, agregamos lo del banner aquí en lugar hacer esta imagen de banner y luego podríamos usarla aquí. Enfría. Así que he creado una estructura, no una estructura, sí. Entonces esta estructura de imagen básicamente nos está dejando usar todos estos nombres. Así que estos ya no están codificados, y ahora acabamos de crear una matriz a partir de ellos. Todo el propósito de hacer todo esto era que ahora en lugar de solo mostrar un fondo rosado dentro de nuestra vista de la tierra, en realidad iba a crear un poco de patrón sobre toda la Entonces, cómo lo haríamos es hacer uso del lector de geometría. Entonces, cómo funciona el lector de geometría es que le da un valor de geometría dentro de él, y podemos simplemente el ancho de punto igual a geometría tamaño de punto ancho de punto, y dejar que la altura sea igual a Geometría tamaño de punto altura de punto, haciendo uso de estos, podemos simplemente ejecutar un bucle for ahora, y esto para bucle estaría pasando de un rango cero a incluir el modelo de vista imágenes de puntos recuento de puntos. Entonces ahora el ID debe ser algo así como uno mismo porque realmente no tienen un tipo de identificador y podríamos tener Index N. Entonces bien, todo esto está construyendo bien hasta ahora. Vamos a dejar que la imagen sea igual a ver el punto del modelo, las imágenes, y repasar cada índice. Lo que haríamos es poner esa imagen dentro nuestro envoltorio de imágenes y la hacemos redimensionable, obviamente Entonces cambiamos la relación de aspecto de la misma a contenido más ajustado porque queremos mostrar todo el patrón. agregaríamos un efecto de rotación, que tendría efecto de rotación debería ser en términos de grados. Entonces doble punto al azar. Entonces lo que estaba pensando es que en realidad seguiríamos rotándolos como cuando la vista se actualiza por sí misma. Entonces, en Swift UI, si lo sabes específicamente, cuando usas estas propiedades como state e incluso el modificador on change, Swift UI realmente renderiza toda la vista y otra vez para actualizar ciertos valores. Entonces para esa cosa, en realidad solo estamos usando el efecto de rotación. Porque en un momento dado cuando estoy escribiendo algo dentro del campo de texto, tendría un valor aleatorio entre -30 a 30 grados de rotación Pero en el momento en que actualice mi campo de texto, todo el rápido UIV se renderiza, por lo que volverá a cambiar esa rotación Entonces nos daría algún tipo de cosa de animación que seguiría cambiando. Entonces sería muy aleatorio. Entonces creo que tiene Um, bien, no tenemos una funcionalidad de posición por ahora. Entonces quiero decir, tenemos que agregar eso aquí. Entonces solo estoy pensando en ello que deberíamos hacer eso ahora mismo o bien, déjame pasar por esto. Si tenemos las imágenes, entonces tenemos el valor de rotación y podríamos tener algo como una función como posición aleatoria. Y vamos a tomar en un índice para ello básicamente entero. Y vamos a darle una talla también. Sería tipo CG tamaño porque Y obviamente es una posición, por lo que debería tener un punto CG como valor de retorno. Entonces hagamos posiciones iguales, y debería ser una matriz. Y lo que podríamos hacer es colección vacía literal requiere un tipo explícito. Bien, así podríamos crear un punto CG a partir de algún valor X y un valor Y. Así que básicamente sería 0.1 veces el tamaño del ancho del punto, y de manera similar para Y también, 0.1 veces el tamaño de la altura del punto. Entonces básicamente, si recuerdas el tamaño que definimos dentro de nuestro lector de geometría usando el ancho y la altura, estaríamos usando eso, y debería ser aleatorio, ¿verdad? Como, bien, entonces esta es una posición que tenemos como la anchura, multiplicada y 0.1 y esta. Pero entonces podemos tener otras posiciones. Entonces, ¿qué posiciones podemos tener? Lo que quiero decir con eso es que este debe ser un cierto punto dentro del sistema de coordenadas. Entonces 0.1 del eje X, 0.1 del eje Y. Pero entonces al mismo tiempo, podríamos tener 0.9 del eje X o bien podríamos tener 0.9 del eje Y, podríamos tener 0.9 de ambos, o también podríamos tener 0.5 de ambos. Entonces estos esencialmente marcan los diferentes sistemas de coordenadas dentro de nuestra vista de la aplicación. Entonces básicamente, un punto debe estar en algún lugar aquí, luego 0.9 y 0.1 aquí, 0.9 y 0.1 en algún lugar aquí, un medio de la pantalla también porque 0.5 0.5. Y así es como se están creando todas las posiciones. Entonces ahora solo podemos devolver posiciones posiciones podrían tener posiciones, cuales harían ¿Qué índice deberíamos tener? Y podríamos hacer posiciones de conteo de puntos. Entonces simplemente tiene aleatoriamente todas estas posiciones dentro de él. Y ahora lo que estamos haciendo es que estamos devolviendo una posición muy específica dependiendo del índice que nos proporcione, tomamos las posiciones de conteo de puntos, y devolvemos el resto de esta funcionalidad. Entonces simplemente nos da una posición totalmente aleatoria para nosotros, básicamente. Así que solo yendo por aquí, ahora volviendo a lo nuestro, así podríamos hacerlo de alguna manera como esta posición. Entonces podríamos tener vista modelo punto posición aleatoria, y tendríamos índice aquí, y el tamaño CG sería tamaño CG con una anchura y una altura, así podemos darle un ancho, y podemos darle una altura. Entonces, debe ser así. Y solo hagamos click para que las imágenes, aunque la relación de aspecto haya cambiado y estén confinadas a este pequeño espacio, la parte invisible de la imagen, supongamos que tiene que ser recortada Es demasiado grande, así que no cubre toda la pantalla. Básicamente, enfrenté este problema con SwifTui en algún momento Lo que sucede básicamente es que si tienes una imagen muy grande y le das una relación de aspecto, y la haces de tamaño pequeño, aunque la imagen te esté mostrando como pequeña internamente es en aunque la imagen te esté mostrando como realidad una imagen enorme, y eso provoca alguna falla con la interfaz de usuario también Entonces solo para ese propósito podemos usar clip. Y ahora que hemos hecho tanto, podemos comenzar por crear. Bien, entonces déjame ver qué es lo que necesitaríamos para nuestro Oview Es decir, hemos creado un fondo, y posiblemente también tendríamos botones. Así que vamos a hacer opción Comando y flecha izquierda para doblar este bloque de código. Aquí creamos una pila V, y obviamente la pila V tendría algún tipo de espaciado. Démosle un espaciado de 16 por ahora, y debería tener nuestro campo de correo electrónico. Debe tener nuestro campo de contraseña. Debería tener nuestro botón de acción, y debería tener nuestro botón de alternar. Y como Toggle ¿para qué? Entonces básicamente, Toggle es para supongamos que le estás mostrando al usuario la vista de registro. Pero el usuario ya es usuario registrado. Por lo que tendrían que usar la vista de inicio de sesión. Entonces básicamente el punto de vista que les pediría eso, ¿ya tienes una cuenta? Así que ve a iniciar sesión. Para que esté llamando a mi botón Toggle. Y básicamente, está el campo de correo electrónico, el campo de contraseña y el botón de acción, básicamente, en realidad llama a la función cinco Was. Entonces hay mucho que hemos hecho, y qué tal V en padding. Y ahora que hemos hecho tanto, podemos tener un marco aquí, y el marco debería ser como casi como una pantalla. Entonces para ese propósito, uscreen dot main dot bounds dot dot Wi y podemos multiplicarlo por 0.75 Entonces la razón por la que lo hizo porque realmente no queremos que nuestra pila de V esté borde a borde con la pantalla. Entonces le estoy dando algo de espacio con los costados. Entonces esto se hace por ahora. Ahora, ¿qué tal si vamos al fondo y podemos agregar un rectángulo redondeado y un rectángulo redondeado con un radio de esquina Sólo estoy pensando que ¿ necesitamos este rectángulo redondeado? Pero según el bien, entiendo el punto de que, ¿ deberíamos hacer esto? Entonces lo que tenía en mente y, como, lo que también he hecho en la muestra es que todos los botones están encerrados dentro de un rectángulo. Entonces esa es la mirada que voy a buscar, y por eso estoy haciendo esto. Entonces, ¿qué tal si agregamos un radio de esquina de 20, y en breve verás a qué me refiero exactamente? Entonces le agregaremos color de relleno, color UI, punto, amarillo primario. Y tendría una superposición, no esta superposición, solo una superposición y también tendría un rectángulo redondeado con un radio de esquina de 20, y esta vez no tendrá relleno, sino que tendrá un trazo, y el trazo sería a negro más ancho de línea de cuatro. Entonces hemos hecho esto mucho, la parte de fondo está completa. Todos estos campos estarían encerrados, tendrían un fondo con un rectángulo redondeado. En la parte superior de la pantalla, solo hace las cosas un poco más, ya sabes, Bien. Así que vamos a ejecutar la aplicación y ver, como, qué está pasando por ahora. Quiero decir, hay que ver algo. No exactamente mucho, pero luego vamos solo um, ojalá veamos la pantalla con el arte y esas cosas. Bien, sí. Entonces ves todo el arte y todo está como por todas partes o algo así, y en realidad se está recortando de aquí Entonces, ¿qué tal si en realidad agregamos ignorar el fracaso seguro a ella, también? Entonces de esta manera, o yo estaba pensando tal si agregamos ignora el fracaso a toda la pila Z. Entonces, ¿eso resolverá nuestro problema? Quiero decir, podría yo posiblemente podría. Así que vamos a ver y sí, lo hace. Entonces esto lo simplifica. Este es nuestro bloque. Como, supongamos que si tuviéramos cinco botones más adentro, ahora mismo se vería mucho más comprensible. Pero, bien, se han hecho algunos avances y qué más podríamos hacer. Entonces como estamos dentro de la pila Z por ahora, tenemos la parte de pila V aquí, y vamos a plegar rápidamente todo hacia arriba. Entonces se ve conciso, y podríamos agregar una condición aquí ahora. ¿Y cuál será exactamente la condición? Así que recuerda, agregué esa vista tostada, y, sí. Entonces básicamente, ahora vamos a hacer uso de ella. Por lo que sería un programa publicado Toast. Mostrar brindis, eso es todo, y debería ser del tipo booleano y debería ser falso por defecto Vayamos aquí y agreguemos la condición de que si ver el modelo punto mostrar tostada es cierto, realidad llamaríamos a nuestra vista de tostada, y la vista de tostada toma en un mensaje , y el mensaje debería ser, nuevamente, necesitamos mantenerlo como dinámico tanto para el registro como para los casos de registro. Entonces agreguemos un mensaje de brindis Wa publicado. Y vamos a tenerlo vacío por ahora. Entonces tendríamos el mensaje de tostada de punto ViewModel aquí, y le daríamos un relleno de top como 50 desde arriba Vamos a darle un estilo de transición, así se ve un poco bien. Cuando salga, le tiene un poco de animación, y vamos a darle una facilidad de entrada y salida con una duración de como 0.8 segundos. Entonces es una especie de, yo diría que es valor de viewmdel dot Mostrar Entonces, básicamente, la animación también depende del mismo valor booleano Entonces creo que ahora se vería bastante decente. Así que vamos a seguir creando las vistas reutilizables de las que estamos hablando. Entonces esta es la propiedad del cuerpo. Esto está bien. Y ahora en realidad podríamos tener nuestras vistas reutilizables aquí. Así que solo estaba pensando que, bien, tenemos la pila Z, y tenemos el final del cuerpo. Y aquí podemos agregar todas las vistas reutilizables. Entonces podemos declararlos privados por ahora, así los llamaríamos privados vía correo electrónico, campo de texto, y se ajustaría a alguna vista porque tiene que ser un campo de texto al final del día. Así que ahora vamos a agregar propiedad declara un tipo de retorno opaco pero no tiene expresión inicializada Bien, yo nos devuelve para que nos devolvamos un poco de vista. Tan rápido, vamos a agregar un campo de texto aquí. Y este campo de texto dirá, correo electrónico, y debería tener una propiedad de texto. ¿Cuál sería la propiedad textual vinculada? Entonces para eso, vamos a ir rápidamente dentro de nuestro modelo de vista, y vamos a nombrar este otro propósito. Simplemente agregando un comando para diferenciar entre las cosas de mensajes de DTOs y las otras cosas. Llamémoslo publicado vía correo electrónico. Y vamos a darle un tipo de valor de cadena. Habríamos publicado nuestra contraseña, que también sería del tipo string. ¿Y qué más necesitamos? Solo mantengámoslo a eso por ahora. Tenemos un correo de punto viewmdel. Entonces podemos tener un color de primer plano a nuestro campo de texto, que sería negro Y por cierto, si hubieras estado notando que estoy usando color de primer plano y me está dando esa advertencia una y otra vez de que estaría Entonces en ese caso, podrías usar, ya sabes, el estilo Foround Creo que ese es el nombre del nuevo modificador que han introducido. Entonces eso está bien. O sea, no lo he agregado porque, como, creo que para nuestra versión específica IS, sigue presente. Entonces no es realmente un problema para la versión del IRS, pero, como, supongamos que la estás haciendo para la versión más nueva de iPhones, las versiones más nuevas de IS, entonces probablemente tendrías que considerar esa cosa Porque en ese caso, seguiría funcionando para el estimulador, creo, pero realmente no funcionará en el caso de las nuevas versiones IOS o en un dispositivo real o en producción Entonces, para antecedentes, estaba pensando que podríamos tener punto claro por ahora. Quiero decir, ¿necesitamos algo detrás del campo de texto D? Es un poco de una pregunta solo para nosotros mismos. Así que vamos a darle ahora un radio de esquina. Quiero decir, podemos investigar en ello. Si EU parece estar en forma, está bien, pero si realmente no se ve tan bien, podemos agregarlo. Simplemente agreguemos un rectángulo redondeado con un radio de esquina. De diez, y esto solo tendría un trazo, y el trazo volvería a ser de color negro, luego alinearía con, digamos, cuatro. Digamos cuatro. Y ahora que hemos hecho tanto, ya sabes, esta característica que tienes para campo de texto es que podrías tener el tipo de teclado. Entonces para eso, estaría agregando una dirección de correo electrónico tipo teclado. Y auto capitalización. Si está ahí, hagámoslo ninguno porque no queremos eso. Y esta corrección automática capaz, supongo, debe estar ahí corrección automática verdadera. Así que esto se hace, y ya tenemos nuestro campo de texto de correo electrónico listo. Bien, entonces en realidad nos dice que se lee vinculante. Entonces podrías hacer esto, y funciona. Podrías poner en el campo de texto de correo electrónico aquí en lugar del campo de correo electrónico. Y ahora que hemos hecho tanto, intentemos ejecutar la app y veamos, como, cómo se ve. Entonces te animo a que sigas esto e intentes completar los otros campos de texto tú mismo, aunque en realidad no es una necesidad para ti. Pero quiero decir, bien, esto funciona, y te das cuenta de que, uh, la animación se mueve, y todo, así que me parece un poco funky y genial Entonces, sí, estaba diciendo que en realidad podríamos seguir haciendo las vistas, o simplemente podrías detener el video e intentar completar las otras tres tú mismo. Entonces, básicamente, el botón de alternar y el botón de acción en realidad serían similares al botón de cerrar sesión que hicimos dentro de la vista principal. El campo de contraseña en realidad sería similar al campo de texto que hicimos hace un momento. Entonces mientras tanto, si quieres hacer eso, podrías detenerlo y en realidad seguiría completando esta cosa. Entonces tendríamos, de nuevo, una W privada, contraseña, contraseña, campo de texto. Y también se ajustaría a la vista de subtipo, y entonces tendríamos una pila S. La razón por la que estoy poniendo todo esto dentro de una ETag porque muchos flujos de inicio de sesión ahora tienen este pequeño botón I dentro de ellos, que en realidad te permite mostrar u ocultar la contraseña Entonces para ese propósito, específicamente, estamos usando la pila ES. Entonces, ¿qué tal si lo hacemos si, um, Bien, entonces necesitamos algún tipo de condición para mostrar la contraseña en un campo normal como un campo de texto o si la contraseña está oculta por ese botón de ojo, en realidad se mostraría dentro un campo seguro que Apple nos proporciona dentro de Swift UI. Entonces podríamos hacer esto. Podríamos crear otra propiedad booleana, básicamente, y podemos llamar a esto una contraseña visible Y podríamos usar esto ahí entonces. Entonces, ¿qué tal si el modelo de vista es visible por contraseña es cierto? En realidad usamos un campo de texto normal que en realidad tendría el texto como contraseña. Y entonces tendría la propiedad text, que es la propiedad binding como view model dot, password. Todo esto es cordón. Entonces tendríamos la fuente personalizada igual que aquí, supongo. ¿O deberíamos tener algo diferente? O sea, podemos sumar sumando más adelante, y simplemente no miremos en el fondo por ahora. Entonces esto está ahí, y qué pasa si esta condición no es cierta, en realidad mostramos al usuario con un campo seguro. Y lo que hace el campo seguro es que en realidad oculta lo que sea que se le esté escribiendo Entonces es muy útil para la funcionalidad de contraseña, y podríamos hacer viewmdel punto, contraseña aquí Podríamos tener las cosas más simples. ¿Qué tal si movemos el color de primer plano aquí? Podemos copiar y pegar esto, agregar esto aquí. Entonces ahora que hemos hecho tanto, podemos tener ahora dentro de la pila E, podemos tener un botón aquí ahora. Entonces, lo que hace el botón es que nos permite usar toggle entre el campo seguro y el campo de texto normal. Así que el uso es contraseña visible toggle. Simplemente seguiría cambiándose a sí misma. Y para el propósito de imagen, cómo sería el botón, usaríamos las imágenes del sistema de Apple. Entonces, básicamente, los símbolos de activos. Así que solo asegurándose de que el punto del modelo de vista sea visible por contraseña. Si es cierto, en realidad mostraríamos al usuario con una barra de punto e, lo que significa que quieres ocultarlo Y si la contraseña no es visible, le mostraríamos al usuario con un logotipo de ojo, lo que significaría que necesitas mostrarla . Entonces esto está hecho. Aquí también añadimos un color de primer plano de negro. Y luego agregamos un peso de fuente de negrita. Entonces creo que el campo de contraseña está casi terminado. ¿Qué tal si le damos un relleno específicamente desde el lado derecho, lo que significa el lado trasero de ocho Y en realidad podríamos darle un relleno a toda la pila Et, así como un poco de color de fondo ahora porque los campos de texto en realidad están encerrados dentro de la pila Et. Entonces es mejor darles juntos en lugar de agregarlo individualmente a los campos de texto. Así que podríamos tener claro también aquí por ahora, y podemos tener un radio de esquina de diez, y podemos tener una superposición que tendría un rectángulo redondeado, como hicimos para nuestro campo de texto de correo electrónico. Entonces básicamente, un rectángulo redondeado con un radio de esquina de diez con solo un trazo, y el trazo sería del color negro y un ancho de línea de cuatro. Así que esto lo hemos hecho, y ahora tenemos listo el campo de texto de contraseña también. Entonces podríamos agregarlo ahí. Ahora necesitamos agregar el botón de acción. ¿Qué tal si doblamos estos dos para hacer algo de espacio? Podemos eliminar una línea extra aquí, y podemos comenzar con el botón de acción para, como, llamar cosas. Entonces botón de acción privada. Y de esta manera, tendríamos alguna vista y qué tal si hacemos un botón, que tendría acción y una etiqueta. ¿Y qué más debería haber ahí? Entonces ahora estoy pensando que para el lado de acción de las cosas, podríamos tener modelo de vista. Mantengámoslo vacío por ahora porque necesitamos manejar ambos, iniciar sesión y cerrar sesión. Así que solo mantengámoslo como está por ahora. Podemos agregar la etiqueta, pero así sería el texto supongamos, digamos, vamos a codificarlo para firmar En o qué tal coincidimos rápidamente aquí, copiamos esta cosa y decimos, Mostrar, iniciar sesión a la vista. Ahora que hemos hecho tanto, podemos volver atrás y agregar la funcionalidad en otros lugares también. Básicamente, estaba pensando que para iniciar sesión e inscribirme, vamos a darle a los botones una visión un poco diferente. Entonces, donde mas podemos cambiar la vista 40 botones. Entonces estaba pensando para el color de fondo, supongo, tenemos claro por ahora, pero lo que si es ver modelo punto mostrar signo en vista, entonces debería tener un color de fondo de blanco, y si no se está mostrando el signo en vista, tendría un color de fondo de claro. Y de manera similar, podríamos usar este operador de giro para darle un valor de dos o cuatro sobre la base del ancho de línea. Entonces, qué ancho de línea quiere, podríamos usar eso en consecuencia. Y de igual manera, creo que aquí dentro de fondo, podríamos hacer esto y podemos tener blancos así. Y para el ancho de línea, podríamos tener esto, 24. Entonces, básicamente, sería un cambio de interfaz de usuario en caso que la vista cambie de registrarse a iniciar sesión. Eso es todo. Entonces y no es totalmente como se requiere. Quiero decir, es algo que solo estoy haciendo porque, como, los usuarios van a llegar a saber que, bien, hubo un cambio real de puntos de vista para ese propósito, quiero decir, dándole un poco de diferencia Así que totalmente no se requiere, diría yo, pero, sí. Entonces esto está ahí, y ahora estaba pensando que ya que tenemos esto en su lugar, en realidad podríamos agregar dentro de nuestro botón de acción, podríamos tener viewmodel dot show sign in Y lo que pasa es que si show sign in está ahí, así que en realidad llamaríamos I viewmodelt show sign in is true, llamaríamos viewmodel punto Y si no es cierto, llamaríamos punto ViewModel Sign Up. Y totalmente no tenemos ninguna de estas funciones definidas. Entonces eso es genial. O sea, podríamos simplemente ir al modelo de vista interior y crear estas funciones como cerrar sesión que hemos hecho, así sería iniciar sesión. Y para el otro, sería apuntarse. Bien, entonces ahora que hemos hecho esto, creo, bien, el inicio de sesión todavía no es funcional. Yo sólo veo lo que creo que debería estar funcionando. ¿Por qué no lo es? Oh, le escribí la ortografía equivocada, supongo. Entonces sí, esto se hace mucho, y ahora para el texto, también, podríamos tener viewmdel dot show sign in view Si es cierto, entonces muestra el inicio de sesión. Pero si no es cierto, en realidad muestra registrarse. Lo cual tiene sentido. Al igual que si estás en una página de registro, el botón debería mostrar registrarse. Tendríamos aquí una fuente, que sería del tipo custom, y obviamente, serían fuentes punto negrita. Y vamos a darle un tamaño 18, así que manteniendo el tamaño, el lenguaje de diseño consistente en toda la aplicación, el peso de la fuente, que realmente no necesitamos. Tengo esta costumbre de agregar el peso de la fuente independientemente. No sé por qué. Así que vamos a ir por el color de fondo fk y podemos tener vista modelo punto. Um, realmente no necesitamos esa cosa de la firma del programa, ¿verdad? Quiero decir, no, mantengámoslo consistente. Así que vamos a hacer el negro por ahora. Y aparte de eso, necesitamos relleno, obviamente. Aparte de eso, necesitamos marco con un ancho máximo de infinito. ¿Y qué más hacemos? ¿Necesitamos? Necesitamos un color de fondo, obviamente. Y el color de fondo sería gris o digamos simplemente blanco. Es decir, el sistema gris es un poco malo. Entonces vamos solo con blanco, el radio de la esquina sería diez. Entonces vamos a darle una superposición como cualquier otro elemento que hayamos hecho aquí. Entonces habría un rectángulo redondeado con un radio de esquina de diez con sólo un trazo. El trazo tendría color negro y el ancho de línea tiene que ser solo dos, o podrías agregar esta cosa aquí también. Así que tanto como lo he hecho, y bien, así que solo recuerdo que en realidad tienes esta funcionalidad en Swift UI para hacer un botón deshabilitado en ciertas condiciones booleanas Entonces básicamente lo que podríamos hacer es que podríamos escribir una pequeña funcionalidad para verificar si el usuario está poniendo en un correo electrónico válido a este campo de texto. Y si el reg x que metemos verifica que el correo es un correo válido, en realidad podríamos tener, ya sabes, realidad podríamos tener el vamos a mantener la opacidad como Así que en realidad podríamos cambiar el estado del botón. Entonces supongamos que en el fondo podríamos hacerla gris, entonces la horquilla también puede llegar a ser gris o algo así La opacidad se puede bajar para mostrar al usuario que un botón está realmente en el estado deshabilitado Y obviamente, aquí también podemos agregar el modificador deshabilitado, marcándolo como deshabilitado, por lo que tampoco se realizará la llamada a la función en caso de que se esté ingresando un correo electrónico incorrecto. Entonces esto es ahora, podemos agregar el botón de acción aquí también. Y por último, necesitamos agregar el botón de alternar ahora. Así que vamos a ir al botón de alternar. Debería ser un botón de alternar privado, que tendría alguna vista. Y en realidad, siento que tendría mucha similitud con nuestro botón de arriba. Entonces sobre copiamos pegar todo esto. Y obviamente la funcionalidad sería alternar la vista, así ver modelo, punto mostrar firmar en vista Toggle. Y qué tal dejarme pasar por las cosas una vez. Entonces sí, esto está bien. Y qué tal si realmente no necesitamos el texto aquí así, Porque debería decir algo así como no tener una cuenta cuenta registrarse. Y en la página de registro, debería mostrar ya tener una cuenta. Iniciar sesión. ¿Y qué más deberíamos cambiar? Entonces el trasfondo necesita ser amplio, que ya está ahí. El radio de la esquina diez, rectángulo redondeado ahí. Debería haber algún acolchado superior. Vamos a reducirlo un poco. Yo solo quería separar los botones del campo fiscal. Por eso agregué el acolchado consistente de 20 para la parte superior, pero realmente no lo necesitamos aparte de eso. Así que usemos también el botón de alternar, y veamos nuestra funcionalidad en su lugar. Como, ¿cómo se ve todo? Entonces, cuáles son las cosas que están pendientes, en realidad, necesitamos tener esta funcionalidad válida de verificación de correo electrónico para nuestros campos de texto. Necesitamos escribir las funciones reales. Y también en el archivo de código de nuestra aplicación, en realidad necesitamos cambiar entre la vista principal y la vista de autenticación dependiendo de si el usuario ha iniciado sesión o no. Entonces podríamos usar las cinco funcionalidades Base para eso. Tienen esta funcionalidad de auth. Entonces, bien, pedirían una contraseña de correo electrónico. Te da la funcionalidad de registro y dice que ya tienes una cuenta, inicia sesión, no tienes cuenta. Bien. Entonces creo que he escrito mal esta cosa aquí mismo. Entonces debería ya tener una cuenta y no tener una cuenta. Y si, esto parece estar bien. Así que simplemente no tengamos una cuenta. Entonces esto parece estar bien, y vamos a comprobarlo una vez más. Entonces, sí, todo esto está bien. Tenemos la contraseña de correo electrónico, y si apenas empiezo a escribir algo, está en campo seguro. Quiero verlo. Quiero ocultarlo. Y podemos agregar el correo aquí. Podría ser cualquier cosa por ahora. Todo esto también se mueve. Tenemos esta funcionalidad de cambio, lo que le da una forma de color un poco diferente en caso de que esté en una pantalla diferente. Entonces, bien, esto se hace mucho. Ahora te veré en el siguiente video, continuaremos completando toda esta funcionalidad agregando finalmente las funciones y la verificación válida de correo electrónico y solo asegurándonos, qué pantalla aparece en caso de que un usuario se registra o se inicie sesión. ¿Es una vista mezquina o es otra vista? Tenemos que comprobarlo también. Bien. Entonces espero verte en el siguiente video. Gracias. 7. Validación de campos de correo electrónico y password: Adelante en nuestro curso. He agregado esta funcionalidad de correo electrónico válida. Básicamente, son algunas regs de correo electrónico que obtuve en línea y luego creé esta función Lo que nos devuelve es un valor booleano, por lo que comprueba si la contraseña no está vacía y también nuestro correo electrónico realmente pasa la prueba Regex Entonces, si lo hace, devuelve un valor verdadero. Cómo he usado esto dentro de nuestra vista es en la forma que la funcionalidad, el botón de acción. En primer lugar, el color de primer plano, en realidad cambia de negro a secundario, y también el color de fondo cambia de blanco a gris, y está deshabilitado, si es correo electrónico válido, nos devuelve false Entonces esto lo hemos hecho y también la opacidad de la misma, lo he configurado, nada más que eso, y debes haber notado que en realidad moví estas dos funciones dentro la extensión del modelo de vista Entonces lo hace un poco más limpio, ya que es una propiedad almacenada, por lo que no podemos moverla también. Y si seguiríamos llenando estas funciones, vamos a verificar solo una si funcionalidad válida de correo electrónico está funcionando o no. Entonces te lo mostraré una vez más. Por lo que se está utilizando en cuatro lugares para la opacidad para discapacitados, fondo y el color de primer plano Lo más importante es estar deshabilitado solo porque si está deshabilitado, no importa cómo se vea, no funcionará. Entonces en primer lugar, he agregado ese cheque que si el campo de contraseña está vacío, así no va a funcionar. Solo intentemos agregar un correo electrónico válido. Y ahora agregamos algún tipo de contraseña, y nos permite hacer clic en sí misma. Si acabamos de tachar esto, entonces no nos permitirá hacer lo mismo. Y supongamos que si la contraseña está ahí, pero el correo electrónico no es válido, entonces funcionaría. Entonces así es como configuré lo del correo electrónico es válido. Y muchas aplicaciones tienen esta funcionalidad hoy en día, así que es bueno tenerla para nosotros también. Ahora en el siguiente video, estaría terminando con las tres funciones que hemos estado esperando hasta ahora. Entonces espero verte en el siguiente video. 8. Implementación de registros, registros, registros y pruebas: Así que avanzando en el curso, aquí está nuestro modelo de vista principal, y debes haber notado que dado que hemos agregado la verificación es válida y la verificación de contraseña para la funcionalidad de registro, necesitamos almacenar dos cosas cuando un usuario inicia sesión en la aplicación. Entonces básicamente, una estructura de usuario, un objeto de usuario o podríamos decir, contendría obviamente el correo electrónico del usuario y también un identificador único. Ese identificador en realidad estaría vinculado a todas sus publicaciones, sus seguidores, a sus seguidores. Entonces eso es algo muy importante que hagamos para nosotros. Entonces tendríamos que crear la primera estructura dentro aplicación ahora para almacenar los datos del usuario. Y vamos a crear un nuevo grupo y llamémoslo modelos. Y podemos hacer Comando para crear un nuevo archivo. Llamemos a esto datos de usuario. Solo hay que tener en cuenta que estos datos de usuario que estamos creando son solo para fines de autenticación. No es un usuario que estaría almacenado en nuestra base de datos firestore No es eso. Es solo para el propósito de autenticación. Como quien sea, inicie sesión en nuestra aplicación. Entonces para hacer eso, podríamos simplemente importar firebase. Entonces podemos crear una estructura llamada estos datos de usuario. Entonces podríamos tener dos propiedades dentro de ella. Primero sería un UID, que se ajustaría a la cadena tipo D. El otro sería correo electrónico, que se ajustaría al tipo string opcional. Ahora podría preguntarse, ¿por qué lo mantendría opcional? Básicamente, notarías que Five Ways en sí nos devuelve un correo electrónico, que es una propiedad opcional. Entonces por eso lo estamos manteniendo opcional. Pero por lo que sabemos, no dejaremos que nadie se inicie sesión sin poner un correo electrónico, ya que tenemos el cheque válido dentro de la app. Entonces desde el front end, en realidad se maneja muy bien. Así que no necesitas pensar recibir un correo electrónico no válido o algo así. O un correo electrónico vacío. nota que CO acaba de darle un inicializador, que en realidad necesitábamos, y podríamos modificarlo un poco para que sea más legible para nosotros. Entonces podríamos tener algo como usuario que se ajuste al usuario, y este usuario no es otro que un usuario base de cinco Verás, es una clase dentro de cinco bases. Entonces ahora lo que estamos haciendo es que en realidad usaríamos user dot UID y usaríamos user dot email Y creo que tiraría un error si importamos cinco Base OT. Entonces, bien, eso funciona todo. Podrías simplemente intentar ejecutar la aplicación porque hasta ahora realmente no hemos cambiado mucho código, así que no debería romperse en ningún punto así y mientras está construyendo, bien, entonces solo construye, y ojalá aparezca con una pantalla de oth view. Bien. Entonces sí, todo esto funciona bien. Entonces, ¿qué tal si simplemente vamos al núcleo de la aplicación, y notamos que en un momento dado solo estamos mostrando una vista, que no es realmente ociosa, verdad? ¿Qué pasa si una persona está logueado? Todavía no queremos mostrarles la otra vista. Entonces para ese propósito, vamos a entrar en nuestro modelo de vista principal, y necesitaríamos agregar algunas propiedades más aquí ahora. Podrías usar una declaración mark de aquí en adelante para que pudieras tener diferentes quiero decir, podrías tener diferentes propiedades después de cada marca, o simplemente podrías agregar todo dentro de aquí mismo. Pero en algún momento, si sientes que se están agregando demasiadas variables, podrías, como, mantenerlas separadas según tus necesidades, lo que sea conveniente para ti. Así que comencemos por crear un usuario en sí primero que nada. Ella tendría un WA publicado y llamémoslo datos de usuario. Sería del tipo datos de usuario en sí, lo que sería opcional ya que no lo estamos inicializando con algún valor, y este es algún valor que en realidad recuperaríamos cuando el usuario se inscriba o inicie sesión con éxito Ahora que tenemos un show toast booleano también y un mensaje de brindis booleano también, podríamos tener otra propiedad que sería una guerra publicada en sí, y diría que está autenticada, que sería del tipo booleano Ahora solo puedes volver al núcleo de la app, ven aquí. S si el punto del modelo de vista está autenticado es verdadero, solo necesitamos mostrar al usuario con la vista principal pasando en el modelo de vista también Pero si el usuario no está autenticado, necesitamos mostrarle la vista de autenticación . Esto se hace. Solo volvamos a nuestro modelo de vista, y ahora procederemos a crear nuestras funciones. También reviso esta única cosa que sí, tendríamos la función de inicio de sesión y registro, que cambiaría el valor autenticado, que se comprobaría aquí Pero, ¿y si un usuario ya ha iniciado sesión? Luego cierran la aplicación y luego vuelven de nuevo. No es necesario que vuelvan a mostrarse con authvi, ¿verdad? Entonces debe haber alguna manera de que cada vez que se inicialice la clase, nos devuelva con un valor autenticado ¿Qué tal esto que realmente creamos una función? Llamemos a esta función y mantengámosla privada también porque solo se está usando para la autenticación, verifique la autenticación. Lo que hace esta función es que verificaría si hay un usuario actual, y si no lo es, pondría este valor a false. Si está presente, pondría este valor a true, y entonces podríamos usar esta funcionalidad dentro del bloque innit de nuestra clase Y es posible que hayas notado que nuestro modelo de vista principal solo se inicializa en un solo lugar, y esa es la vista central principal de nuestra aplicación como esta Entonces el inicializador se llama aquí, y como dentro de nuestro inicializador, tenemos la funcionalidad a cambiar se Entonces, si el usuario se registra o inicia sesión, cierra la aplicación y luego regresa, aún se autenticaría Ahora bien, ¿cómo sabríamos realmente si el usuario está autenticado ¿Utilizamos los valores predeterminados de usuario para ello? Codifique datos para ello o algo así. Pero te sorprendería saber que cinco Bs en realidad nos proporciona esta funcionalidad muy poderosa. Y para ello, ya que estaríamos cambiando un valor, lo estamos haciendo en la cola principal. Así que vamos a escribir despacho Qu punto principal Aync. Y dentro de este bloque de código, primero desenvolveríamos que dejo user, si hay un usuario que existe actualmente dentro de la clase OT, que es de las cinco clases base, que es una de las cinco clases base, y ya he importado cinco base OT para esto Tal vez tengas que hacerlo también, si supongo que también funciona para cinco bases. Ahora realmente accederíamos a la propiedad auth que nos da el objeto auth para la aplicación firebase predeterminada Así que vamos a hacer clic en Enter, y vamos a usar esto varias veces a lo largo de la aplicación, y de hecho podemos obtener un usuario actual de aquí. Entonces dice sincrónicamente obtiene el caché de usuario actual o nulo si no hay ninguno. Entonces es bueno para nosotros. Es por eso que opcionalmente estamos desenvolviendo que si hay un usuario actual, lo que tenemos que hacer es que necesitamos establecer está autenticado true y además en realidad estableceríamos un dato de usuario, que acabamos de crear con la ayuda del usuario que estamos obteniendo de Ahora que hemos hecho tanto. Pero supongamos que si no hay ningún usuario actual en el caché de Firebase en sí, en realidad tendríamos estos dos bloques de código, estas dos líneas de código nuevamente Pero esta vez sería falso, y los datos del usuario serían nulos Por eso tenemos esta propiedad como opción porque puede que no sea cierto que cada vez que estamos iniciando sesión o cada vez que estamos abriendo la aplicación, el usuario, haya un usuario de caché presente dentro de la aplicación. Entonces esta era la funcionalidad que necesitábamos hacer para verificar si el usuario está presente, ha iniciado sesión o no. Ahora, pasemos a la funcionalidad de cierre de sesión, inicio de sesión y registro. De estos tres, el cierre de sesión es el más simple. Entonces en este curso, estamos utilizando principalmente la espera asíncrona de Apple La espera asíncrona es una característica realmente buena, diría yo, y elimina el uso de manejadores de finalización. Entonces para poder hacer esto, en realidad veríamos un ejemplo en iniciar sesión y cerrar sesión. En tanto, para la funcionalidad de cierre de sesión, inicia sesión y regístrate mi mal. Mientras tanto, para la funcionalidad de cierre de sesión, en realidad solo necesitamos hacer un Dcatchblog simple Entonces escribimos o hacemos bloque de caché. ¿Qué pasa aquí dentro? Entonces, si intentas esta funcionalidad que prueban OT y luego el objeto Auth, llamamos al cierre de sesión. Y dice que desconecta al usuario actual. Bien. Esto está bien y es bueno que hayamos cerrado la sesión del usuario actual. Pero, ¿esta seta se autentica a caídas o establece un dato de usuario en Nill ? No creo que sí lo haga porque es una funcionalidad de cinco bases. No es algo hecho específicamente para una aplicación. Para nuestra app, quiero decir, nuestra app tiene estas cosas personalizadas que hemos agregado. Entonces Five Ws no se da cuenta de ello. Entonces, para completar todo esto, en realidad necesitaríamos hacerlo nosotros mismos. Así que volvemos a abrir la Cola de Despacho. Ya que nuevamente estamos cambiando las propiedades a ella se tiene que hacer en un hilo principal. Y después de escribir el código ASN, simplemente copiaríamos estas dos líneas de código, lo pegaríamos aquí de nuevo Ahora no solo estamos saliendo de Five Ways, sino que también estamos configurando nuestras propiedades manualmente para clavar y caídas con el fin de asegurarnos de que nuestra aplicación esté completamente cerrada de sesión de cualquier usuario. ¿Qué pasa si todo esto falla? De hecho, podríamos imprimir el error. Y hay una característica más que podríamos agregar más adelante que podríamos mostrar al usuario con una alerta. Entonces, cuando estaríamos trabajando con alertas, en realidad volveríamos aquí y agregaríamos la funcionalidad de alerta aquí. Por lo que al usuario se le arroja un error en caso de que no pueda cerrar sesión. Entonces ahora que tenemos error impreso cerrando sesión, esto funciona todo bien y bien. Ahora, podrías simplemente trabajar con la funcionalidad de inicio de sesión. Entonces, lo primero que tendríamos que hacer es verificar si nuestras propiedades de correo electrónico y contraseña están vacías o no. Entonces esta es la funcionalidad dada por el propio Swift, y va a cualquier cadena o una matriz también, que dice que está vacía. Así que vacío es un valor booleano que indica si una cadena no tiene caracteres Entonces esto simplemente significa que el correo electrónico está vacío. Tenemos que verificar que el correo electrónico no esté vacío. Ahí es donde estamos usando Um, olvidé totalmente cómo se llama este personaje. Entonces básicamente, se lee como no vacío. Y de manera similar, tendríamos que hacerlo realmente por la propia contraseña. Ahora que hemos hecho tanto, podríamos escribir una declaración, y podríamos regresar de aquí. Pero antes de regresar, podríamos agregar aquí también una declaración impresa. Esto es para nuestra comodidad mientras depuramos y trabajamos con el código, ese correo electrónico o contraseña salió a estar vacío Entonces nos facilita las cosas. Ahora que hemos hecho esta simple comprobación, en realidad pasaríamos a trabajar con AsyncadFuncationality Entonces para hacer eso, si tuviera que usar Asincrónico directamente dentro de esta función, en realidad tendría que marcarla como Aincrónica Afirmando que se trata de una función asíncrona. Pero también es un atajo en Swift. No lo llamaré específicamente como un atajo porque también significa que necesitarías llamar a esta función donde sea que estés llamando a esta función. Por lo que recuerdo, estamos llamando a esta función dentro nuestro botón de acción en nuestra vista terrestre. De hecho, necesitaríamos desenvolverlo en un cierre de tarea de tarea. Entonces la T necesita ser gorras. Si tuviéramos que llamar a una función asíncrona. Pero para mantener todo el código un poco más limpio, lo que he pensado es que en realidad podríamos envolver todo el código dentro de la propia cabeza de tarea dentro de nuestra función. Entonces nuevamente, empezaríamos con un bloque do catch. Y solo escribo la declaración de los gatos también. ¿Cómo vamos a ir realmente para iniciar sesión en un usuario? Entonces, por lo que sé, solo usamos el objeto author para cerrar sesión. Entonces eso significa que en realidad podríamos hacer el inicio de sesión por el propio objeto autor. Así que podríamos escribir en not at object, entonces podríamos hacer login, y nos da muchas opciones de las que realmente necesitaríamos con correo electrónico y contraseña. Entonces podríamos escribir correo electrónico, y podríamos escribir nuestra contraseña aquí, que son las dos propiedades que ya hemos definido en nuestro modelo de vista. Entonces, ¿esta función nos devuelve con algo? Para hacer eso, vamos a opción dar clic aquí, y debería darnos Bien, entonces sí tiene un manejador de finalización, dice que nos da un resultado de datos outh Pero como se trata de hacer referencia a la antigua metodología del manejador de terminación, ¿qué tal si la asignamos con resultado lit Y lo marcamos como prueba Esperar. Y ojalá si opto hacer clic en resultado ahora, toma un resultado de datos de autenticación ahora También podríamos mandar clic aquí y simplemente no vamos a entrar en la documentación entonces. Y ahora, de nuevo, como hemos hecho tanto y los resultados mantienen nuestros datos de autenticación resultado de un usuario que acaba de iniciar sesión, nuevamente necesitamos actualizar nuestras propiedades, y esas propiedades incluyen está autenticada y nuestros datos de usuario Entonces, siguiendo los ejemplos anteriores, en realidad necesitaríamos simplemente hacer una cola de despacho porque tiene que hacerse en la banda de rodadura principal. Hacemos dispatchqt punto principal asíncrono. Ahora lo que hacemos aquí es que hacemos datos de usuario autopunteados, que serían iguales a los datos del usuario, y el usuario en realidad sería el usuario que obtenemos de aquí. O nos da un resultado de datos. Entonces creo que el usuario debería ser una propiedad dentro del resultado. Entonces ahí tienes. Ahora que hemos hecho tanto, también cambiamos nuestro valor autenticado a verdadero Y podríamos agregar una declaración de impresión opcional dentro de aquí también. Y no lo creo, tenemos que hacerlo dentro de la cola de despacho. Así que vamos a escribir aquí una declaración impresa que dice éxito en el inicio de sesión en el usuario. Ahora bien, ¿qué escribimos en la declaración del CAT entonces? Entonces obviamente hay dos cosas que tenemos que hacer. Tenemos que manejar el error de alguna manera. Supuestamente que necesitamos mostrar al usuario con una caja de alerta o algo así. Entonces, lo que podríamos hacer aquí es que podríamos escribir otra función que manejaría tales errores. Por qué estoy escribiendo otra función aquí es porque también nos enfrentaríamos al mismo problema con el registro. ¿Qué pasa si el registro falla? ¿Qué hacemos entonces? Para ello, solo escribamos otra función entera juntos, sería una función privada obviamente porque nada menos que nuestro modelo de vista estaría haciendo referencia a ella Entonces podríamos escribirlo como identificador o error. Tomaría en un parámetro, error, que sería del tipo error. Y vamos solo por nuestro bien de conveniencia, no pongamos un argumento. Cualquier cosa debería ser más simple de escribir también. Ahora, simplemente opcionalmente desenvolvemos y vemos que si el error está realmente presente Entonces, si lo hacemos, dejo que el error sea igual al error como error NS. Y comprobamos por una condición más que deje mensaje de error. Es igual a la información del usuario del punto de error, y esta información de usuario es en realidad un diccionario. Entonces para ese propósito, en realidad tendríamos que buscar una descripción localizada de este error, y podríamos hacer NS Local localizada. Creo que estoy escribiendo mal esta ortografía, por lo que se localiza con una clave de descripción Z. Bajado como una cuerda. O sea, opcionalmente lo lanzamos como una cuerda. Y si todo esto es cierto, abrimos paréntesis, y luego le mostramos al usuario con un mensaje de brindis Ahora llegando a esto, en realidad necesitamos escribir una función de mensaje de brindis también. Entonces, ¿qué tal si lo completamos entonces? Hacemos funk privado, mostramos mensaje de brindis, y tomaría en un mensaje que de nuevo no tendría nombre de argumento Sería del tipo string. Cuando lo abres aquí, volvemos a abrir una cola de despacho ya que estamos cambiando los valores del mensaje tos que definimos anteriormente. Entonces, básicamente, esta bolera se hace realidad, y este mensaje de dosis contendrá el mensaje que pasemos. Entonces para ese propósito, hagamos punto principal asíncrono. Ahora necesitamos escribir autodidacta tos mensaje es igual a mensaje. Y hacemos tomas autopuntadas es igual a true. Y entonces podríamos tener una propiedad, que básicamente así que me estaba dando cuenta de esta única cosa que ¿cómo volveríamos a apagar el mensaje de brindis Porque es sólo un mensaje de brindis. No contendrá ningún botón interactable a la derecha. Por lo que el usuario no puede descartarlo por sí mismo. Lo que podríamos hacer es que podríamos ejecutar un temporizador, y en poco tiempo, se descarta a sí mismo. Entonces para ese propósito, usaríamos esta práctica funcionalidad, que incluye despacho Que punto principal punto ACC después de clicon ahora Más 0.8 segundos y dentro de este bloque de código, lo que hacemos es que escribimos self dot Shots message es igual a false. Por lo que automáticamente también se descarta a sí mismo. Ahora que hemos escrito tanto, podríamos ir podríamos ir sobre llamar a esta función aquí. Podríamos pasar el mensaje de error. Y aunque todo esto no sea cierto, todavía llama al mensaje de Shotos Sólo dame un segundo. Bien. Ya que hemos hecho esto, ¿qué tal si usamos esto ahora? Entonces, dentro de nuestra declaración de captura, escribimos Dispatch Q dot dot a sync nuevamente. Y aquí llamamos a nuestro autodidacta manejar error con nuestro error, que son capturas de bloques de caché. Podríamos quitar este comentario a partir de ahora, y esto se maneja. ¿Qué tal si simplemente hacemos lo mismo para registrarnos también ahora? Entonces, registrarse obviamente también verificará el correo electrónico y la contraseña si están vacíos o no. Y vamos a copiar también todo este bloque. Pero esta vez no va a estar iniciando sesión, sino que en realidad crearía un usuario. Y ahora que hemos hecho tanto, tendría un dato de usuario, un verdadero éxito autoautenticado en la creación del usuario y el error en realidad sería el mismo solamente Entonces ahora que hemos escrito estas funciones y hemos manejado la comprobación autenticada en la vista principal, es el momento de ver si realmente funciona o no Entonces, ¿qué tal si ejecutamos la aplicación? En tanto, por un lado, he abierto mi sección de autenticación de base MiFi, por lo que te recomendaría hacer lo mismo también Y ojalá, si vamos al método de inicio de sesión, creo que en realidad no necesitamos habilitar algo. Habilitación de correo electrónico y contraseña. Bien, así que en realidad tuvimos que habilitar esta cosa. Y ahora si vamos a los usuarios, y estaríamos registrándonos. Así que vamos a llamar al primer usuario como muestra en la fecha gmail.com Tengamos la contraseña como contraseña misma. Hacemos un registro y en realidad nos inscribió. Y dice éxito en la creación del usuario. ¿Y si lo refrescamos aquí? Tan completamente, vemos a nuestro usuario aquí ahora, y el usuario tiene un ID de usuario, y tiene un correo electrónico, y hemos almacenado con éxito todos esos dos valores dentro de nuestra propiedad de datos de usuario en nuestro modelo de vista. Ahora bien, ¿qué pasa si cierro la aplicación y vuelvo a ejecutar la aplicación? Eso es bueno que funcione. Ahora podríamos hacer el cierre de sesión también, y el cierre de sesión funciona bien. Nuestro usuario sigue presente porque no se elimina ni nada. Creo que sólo podemos borrarlo de aquí mismo. ¿Qué tal si nos registramos ahora? Entonces escribimos muestra cansada gmail.com, y la contraseña sería contraseña Y sí nos registramos, y nos firma. Por lo tanto, hemos integrado con éxito el inicio de sesión, el registro y el cierre de sesión con correo electrónico y contraseña. Y hay pocas mejoras que hay que hacer en cuanto a cómo estamos manejando el cambio entre nuestros puntos de vista dentro de aquí. Entonces investigaríamos eso en los videos posteriores, y también pasaremos a crear el perfil de usuario principal ahora. Entonces esta era solo la parte de la autenticación. Ahora tendríamos que buscar en crear un usuario de base de datos, que en realidad estaría usando Firestore para que pudiéramos agregar más datos al usuario, como un nombre de usuario, imagen de perfil de usuario y ordenaciones y también subcolecciones también Entonces espero verte en el siguiente video. Y en caso de que tenga alguna duda, no dude agregarlos en la sección de comandos y estaré encantado de ayudarle. Muchas gracias por ver esto. 9. Corrección de errores de navegación en nuestra aplicación: Ahora que tenemos esta configuración de funcionalidad, ¿qué tal si creamos una vista de perfil de usuario ahora? Entonces podríamos poner todo esto dentro la vista de configuración en su lugar para que los usuarios puedan cerrar sesión desde allí, y la vista del perfil del usuario realmente mostraría el perfil del usuario. Al igual que en las otras aplicaciones de redes sociales, ya ves. Generalmente, o bien te dirigen al feed de inicio o al feed de perfil, así que vamos con la vista de perfil. Entonces vamos aquí, y ahí está nuestra carpeta views. Hacemos comando y seleccionamos Swift UI view, y le nombramos perfil de usuario. Perfil de Usuario, Msad. Si tu. Vamos a hacer clic en Crear. Entonces, una vez hecho esto, vamos a darle una plantilla básica por ahora porque de todos modos estaríamos yendo y viniendo en esta vista, y tenemos que hacer muchas mejoras en la interfaz de usuario aquí Así que agreguemos primero nuestro modelo de vista. Debe ser un modelo de vista de objeto observado del tipo modelo de vista principal. Y vamos a darle una pila Z. Ahora podríamos darle color, que sería UI color punto amarillo ahora creamos una pila vertical, y podemos tener un enlace de navegación aquí porque queremos dirigir a los usuarios a nuestra vista de configuración desde nuestra vista de perfil de usuario. Entonces seleccionaríamos éste, básicamente, el valor y la etiqueta uno. Y, bien, creo que el centro debió haber funcionado. Pero de todos modos, podemos tener algo como esto. Y aquí podríamos agregar etiqueta. Ahora agregaríamos vista principal, el modelo de vista. Pasemos en nuestro modelo de vista. Para la etiqueta, la mantendremos simple. Aquí usaríamos algunos símbolos de SF. Entonces usaríamos el nombre del sistema, y sería gear dot circle. Entonces eso básicamente representa ese icono del logotipo de configuración, se podría decir. Podríamos darle un peso de fuente de negrita, y luego podemos tener un color de primer plano de negro, digamos, y podríamos tener un tamaño de fuente de título grande Vamos a darle un marco. Entonces, para que este botón, como, aparezca en la parte superior izquierda de la pantalla, deberíamos darle un ancho máximo, que sería de infinito, y la alineación debería ser en realidad líder. Entonces, liderar significa este lado de la pantalla, y esta es una parte final. Y obviamente, vamos a darle un poco de relleno para que quede todo bien. Y por ahora, agreguemos un espaciador debajo de él porque no tenemos otros elementos de la interfaz de usuario para empujar la vista hacia arriba. Entonces agreguemos un espaciador con un marco de 100. Entonces creo que debería aparecer justo en medio de la pantalla a partir de ahora, y podríamos agregar otro elemento que diga hola mundo. Hola Mundo. Realmente no tenemos que darle algunos modificadores por ahora. Y obviamente hagamos zona segura Igno. Para que el color aparezca en toda la pantalla. Y vamos a ir ahora a la vista principal . Damos clic derecho aquí. Vamos a refactorizar, renombrar y simplemente cambiarlo a la vista Configuración ahora Vista de ajustes. Bien. Volviendo a nuestra vista de perfil de usuario, ahora que hemos agregado tanta funcionalidad, dice que no se puede encontrar la vista de configuración en el alcance. No muy seguro al respecto. No. Quiero decir, Shift Command K replace settings V se define aquí mismo. Entonces me parece poco convincente que no podamos tener, tenemos la vista Configuración Ver modelo, ver modelo. Podemos eliminar esto. Ojalá, vamos a copiar esto. Vamos a nuestro núcleo de la aplicación, y en lugar de la vista Configuración, agregaremos Vista de perfil de usuario. Solo quería mostrarte una cosa que noté mientras desarrollaba. Básicamente, lo que sucede es que ahora que hemos agregado una capa extra de navegación entre la vista de configuración y la vista principal, Entonces lo que sucede es que ahora, cuando la vista se autentica o ordena, nos llevaría a nuestra vista principal Pero entonces, si queremos cerrar sesión, en realidad tendríamos que ir hasta el interior de la vista Configuración y luego cerrar sesión desde aquí. Entonces, ¿realmente descartará la vista y nos mostrará la oarthview Esa es mi pregunta para ti. ¿Qué opinas al respecto? Podríamos probarlo. En este momento estamos firmados. Entonces, si hago clic en la vista Configuración y hago clic en Cerrar sesión, nada pasa realmente. ¿Y si volvemos? ¿Te diste cuenta de eso? Entonces, lo que está sucediendo es que nuestra funcionalidad base F está funcionando. Se trata de cerrar sesión al usuario, pero en realidad no estamos descartando de nuevo a la vista de autenticación Y creo que eso es un error en nuestra app ahora mismo. Entonces, ¿cómo podemos ir realmente para arreglar esto? Entonces para eso, solo estaba trabajando alrededor de una serie de implementaciones, y una de ellas es lo que encontré es que en lugar de manejarlo así aquí, lo que podríamos hacer es dentro de la propia estructura, podríamos crear una vista personalizada con la ayuda de un constructor de vistas, y sería una función privada vista actual, que nos devolvería alguna vista y tendría la misma comprobación que si el punto del modelo de vista está autenticado. Entonces básicamente, aquí tiene lo mismo. Podemos cortar esto, pegar esto aquí. Ahora que nuestra vista actual está construida, podríamos usar la vista actual, llamar a esta función aquí mismo. Entonces, ¿qué más tenemos que hacer aquí? Entonces notarías que incluso si haces esto, en realidad no hemos cambiado ninguna implementación a partir de ahora, porque acabamos de crear una vista personalizada usando el modificador View Builder, y lo acabamos de agregar aquí, haciendo que todo el código parezca un poco conciso, pero no realmente un cambio en la funcionalidad sabia. Para ese propósito, solo quería sumergirme en profundidad cómo funciona realmente una vista de pila. Entonces una vista de pila no una vista de pila, me refería a una pila de navegación. Lo que hace es que en realidad asigna una identificación a cada vista individual, y así es como define o identifica cómo es qué vista está presente y en qué momento Entonces para eso, vamos a crear un UU ID, que llamaríamos rood View ID Entonces básicamente, este inicializador nos da un identificador único, y eso es lo que estamos usando aquí Y aquí en realidad inyectaríamos esto en la pila de navegación, y llamaremos a esta raíz View ID. Entonces lo que hace es que restablece la jerarquía de vistas porque cada vez que volvemos al núcleo de la app, le asigna un nuevo identificador único ID y así es diferente de la última vez Entonces podrías dejar un comentario aquí que restablece la jerarquía de vistas ¿Y qué pasa con la ortografía de la jerarquía? Creo que es esto. ¿ Qué más tenemos que hacer? Entonces, en realidad, tendríamos un modificador on receive, y este modificador on received solo funciona en un editor. Y si recuerdas correctamente, el arte está autenticado, variable es en realidad una propiedad publicada, por lo que podrías usarla como editor Entonces lo que hacemos es ahora que escribimos ver modelo punto está autenticado. Entonces estamos observando a esta editorial. Agreguemos paréntesis a través de él, y creo que podríamos agregar totalmente el cierre final aquí. Ahora bien, nos daría algún valor atado. Y bien, entonces en realidad me está dando un error, razón por la cual porque no he dit $1 señal, así que no lo lee como una propiedad publicada. Entonces ahora que hemos hecho tanto, en realidad comprobaríamos si este valor, este valor booleano que estamos obteniendo Si en el sentido es falso, eso significa que podríamos imprimir que el usuario está desconectado Reiniciando la jerarquía de vista Y creo que la ortografía es incorrecta. Y lo que haríamos es que asignaríamos root view ID, un nuevo UUID Creo que es U. Entonces, sí. Ahora veamos si esta funcionalidad funciona y realmente soluciona nuestro problema. Volviendo a nuestro código, realidad intentaría iniciar sesión de nuevo. Y ahora podríamos ver que si esta cosa resuelve nuestro problema, el tema que nos ocupa. Así que mientras tanto, mientras desarrollaba este curso, en realidad pensé en implementar también el patrón coordinador. Lo que esencialmente hace es que también te permite usar la navegación basada en UIKid para Swift UI Y en realidad, es un patrón ampliamente utilizado, y muchas aplicaciones de producción también usan esto. Pero entonces no lo creo realmente lo necesitamos en este momento. Volviendo a nuestra base de fuego, solo estoy revisando qué correo electrónico teníamos para el usuario Entonces es sample@gmail.com. Podemos simplemente copiarlo de aquí. Podríamos iniciar sesión. Podemos agregar contraseña contraseña en sí. Podríamos hacer login, y ojalá nos firme. O ¿qué tal si volvemos a nuestra vista de configuración, podríamos asignar y podríamos asignar y nos restablece de nuevo a la vista de autenticación Entonces ese era el requisito de Ind, y en realidad hemos arreglado esto. Volviendo a nuestro código una vez, vamos a repasar por lo que todo lo que hicimos. Solo por simplicidad, agregamos una vista personalizada, y luego estamos llamando a esa función aquí dentro de la pila de navegación. Estamos asignando a la pila de navegación un identificador único Cada vez que se inicializa, cada vez que se inicia la aplicación También tenemos el modificador de recepción para Es el editor autenticado, que luego obtiene un valor booleano porque se autentica es Y luego comprueba que si autenticado es falso, solo nos da un mensaje impreso solo para nuestros propios fines de depuración, y luego asigna la vista grosera, un nuevo identificador único, un nuevo identificador único, que obliga a la pila de navegación a Entonces, cuando esta vista se está refrescando, vuelve a llamar a su funcionalidad, luego vuelve a verificar este valor, y obviamente cerramos la sesión. Entonces eso significa que se autentica sería falso, y esto aterrizamos a la vista de la auth Entonces sí, esto fue para este video. Y ahora seguiríamos adelante y haríamos UI dentro de nuestra vista de perfil de usuario, y luego poco a poco comenzaremos a trabajar con la creación de un usuario en FIBSEFIstore, también, para que pudiéramos tener funcionalidades como el ID de usuario y todo lentamente Así que gracias. Y en caso de que tengas alguna duda, podrías simplemente dejar tus comentarios ahí abajo, y con mucho gusto te ayudaría. Gracias. 10. Creación de un usuario de Firestore parte 1: Bien, así que moviéndonos en el curso, tendríamos que intentar crear un usuario ahora ya que hemos hecho una vista de perfil de usuario. Entonces para ese propósito, en realidad tendríamos que volver a nuestra clase de modelo de vista. Así que encontémoslo rápidamente. Debe estar dentro de la carpeta de modelos de vista. Ahí está. Y la creación de usuarios en lo muy básico en un punto de vista comprensivo debería suceder cuando alguien se registra, bien. El inicio de sesión es para usuarios repetidos. Registrarse es la base para la creación de un nuevo usuario, una nueva persona que llega a tu plataforma, tu app. Entonces ahí es donde realmente escribiríamos nuestro código, y especificaríamos cómo podemos crear un usuario mientras estamos registrando a alguien. Entonces ya podías ver que hemos agregado este bloque de tareas para realizar una funcionalidad asíncrona, y ahí está nuestro bloque do dentro del cual estamos llamando a las cinco funcionalidades Base Entonces aquí mismo, lo que podríamos hacer es que en lugar de solo realizar esta única funcionalidad de crear usuario, que en realidad es una función base cinco en sí misma, haríamos lo que haríamos es que podríamos tener una constante local, podríamos llamarlo solo datos de usuario, y esto en realidad sería datos de usuario y resultado usuario punto. Que es lo que estamos haciendo aquí también, pero esto no está en el ámbito del nivel del modelo de vista porque se trata de una variable definida que hemos hecho. Es una propiedad publicada, pero la otra es solo una constante local, es decir, que tiene su alcance solo dentro de la función. Entonces nadie más que esta función de registro sabe que existen estos datos de usuario. Entonces, ¿por qué estoy haciendo todo esto? Entonces básicamente, dentro de firestore, en realidad tendríamos que poblar los datos en formas de documentos Así que no se podía confundirlo con otra cosa, sino que más que con una estructura básica, se llama documento dentro de Firestore Entonces, para poder acceder a todas esas funcionalidades, tendríamos que usar la clase firestore, y dentro de la cual usaríamos la Firestore Supongo que esto debe ser. Entonces es la instancia de esta clase. Básicamente, es como un objeto singleton, diría yo. Y vamos a asignarlo a alguna constante para D. Entonces sería DB. Ahora lo que hacemos es volver a usar Try esperar para que podamos averiguar que o bien falla o bien no porque en el bloque Do, si nuestra espera falla, realmente atraparía la excepción dentro del bloque de caché. Entonces es por eso que lo que podríamos hacer es que podamos tener colección dbdt, y la colección está pidiendo una ruta de recolección Entonces nombraría a esa ruta de colección usuarios. Este es el lugar donde se almacenarán todos los usuarios. Y entonces podríamos tener documento punto, y dentro del documento, lo que podríamos hacer es que podamos tener datos de usuario punto UID Entonces estamos haciendo referencia a estos datos de usuario ahora, y básicamente se conocerá un documento con su ID, que es el UID y UID es lo mismo que recuperamos después de autenticar Entonces básicamente, estamos usando ese mismo ID. Para dar el ID a nuestro documento de usuario, que estamos creando ahora mismo. Ahora bien, usaríamos la función set data porque en realidad necesitamos algunas propiedades para nuestro usuario, ¿verdad? Quiero decir, cuando nos movemos más en el curso, obviamente también tendríamos una propiedad de imagen de perfil para una propiedad de imagen de perfil para el usuario. Deberían tener una identificación. Deberían tener un nombre de usuario. Deberían tener correo electrónico obviamente, que generalmente no mostramos dentro de las aplicaciones de redes sociales. Entonces para ese propósito, estamos configurando algunos datos. Y para las necesidades básicas fin de simplemente probar esta funcionalidad, podría ver que está tomando en un diccionario que dice del tipo string tOn. Entonces lo que podríamos hacer es comenzar con un diccionario vacío, y podemos tener dos propiedades dentro de aquí. Uno sería ID de usuario, y este obviamente sería userdata dot UID, y el otro sería Email y este obviamente sería userdata dot UID, y el otro sería Email. Entonces solo espero que no lo confundas que solo estamos usando solo estamos usando una constante local solo para obtener el resultado Out user Y lo que estamos haciendo aquí es que estamos creando una colección y para ese documento en particular de la colección, le estamos dando una identificación para que podamos referenciarlo. Y dentro de ese documento, nuevamente le estamos dando un campo, que es del tipo ID de usuario. Entonces, si usamos el ID de usuario, no solo encontramos a ese usuario específico, sino que dentro de ahí, habría un campo ID de usuario en caso de que queramos mostrar el ID de usuario del otro usuario a los demás usuarios. Supongamos que tenemos esta funcionalidad que Instagram lo hace, que tienen nombres de usuario. No muestran correos electrónicos a otras personas. Algo así, podemos ir por esas líneas. O bien en un futuro cercano, realidad podríamos agregar solo, ya sabes, un campo separado para el nombre de usuario. Por lo que se vuelve más fácil para las personas tener el nombre que quieran. Y esto es todo. Entonces estamos usando el correo electrónico y el ID de usuario, y tenemos la cola de despacho aquí. Entonces supongo que toda la funcionalidad sigue siendo la misma solamente. Pero ahora lo que haríamos es que podamos hacer Shift Command O, y buscaremos vista de perfil de usuario, y te diré un atajo a él. Entonces ves que es vista de perfil de usuario. Entonces, si solo buscas en la UPV, también aparece. Entonces este es un práctico atajo de Xcode. De nuevo, presionas el comando Mayús O y luego llegas a la pantalla. Entonces ahora que estamos aquí, es hora de que en realidad ya no utilicemos Hello World. Y para ello, en realidad podríamos tener ver los datos del usuario del modelo dot auth, o ¿son datos de usuario? Déjame comprobar rápidamente esta cosa que, son datos de usuario. Nuevamente, estaba pensando que ya que estamos teniendo un usuario, que sería del tipo usuario firestog y no un usuario autenticado Entonces, ¿por qué no cambiamos el nombre de nuestros datos de usuario a datos de athuser? Así que en realidad tendría mucho más sentido. Entonces eso es lo que voy a hacer. Simplemente le agregaríamos datos de usuario. Haremos clic en Cambiar nombre, y ojalá se renombra en todas partes Ahora sólo podemos volver a nuestra función y comprobarla. Entonces los datos de Athuser están ahí. Todavía estamos usando datos de usuario aquí porque no es de nuestra preocupación, y podemos tener una vista interna del perfil de usuario. Podemos tener datos de ATUser, entonces podemos tener el UID, y si UID no se supone que tiene un Vamos a imprimir nulo. Entonces veamos qué pasa cuando lanzamos nuestra app ahora mismo porque desde la última vez que recuerdo, creo que habíamos salido de la aplicación, pero veamos que nos registraremos con un nuevo correo electrónico y contraseña, y esta vez ojalá que también nos creara un nuevo usuario, y eso llegaría a saber si nuestra creación de usuarios está funcionando. Entonces comprobaremos en la base de fuego también, la consola de Firebase que si la funcionalidad está funcionando o Así que en realidad he abierto mi consola de Firebase aquí, y tendríamos que ir, supongo, a base de datos Firestore para poder comprobar, como, lo que hay poblado ahí dentro Así que esperemos a que la aplicación se construya ahora mismo. Y está tardando unos minutos, ojalá simplemente se construya de inmediato. Creo que mi simulador también estaba cerrado, así que está tardando unos segundos más en lanzarlo. Sí. Así que estamos en la propia página de registro. Así que vamos a nombrar a este segundo usuario, segundo en dirt gmail.com Entonces le damos una contraseña, por lo que debería ser contraseña dos. Y cuando hacemos registro No funcionó, y nos está dando un error, lo que dice que no se pudo completar la operación. Precondición fallida. La API Cloud Firestore no está disponible para Firestore en modo data store Bien. Y tendríamos que arreglar este problema como lo que está pasando. Entonces lo revisaré rápidamente y abordaremos este problema en el siguiente video. Espero verte pronto. Adiós. 11. Creación de un usuario de Firestore parte 2: Bien, entonces encontré esta publicación en el desbordamiento de pila porque noté que en mi base de datos Firestore, dice que este proyecto está configurado para usar Cloud Firestore en modo data store Solo se puede acceder a este modo desde Google Cloud Console. Busqué todo esto en Google. Encontré este sitio web de desbordamiento de pila, y la respuesta, quiero decir, y ahí la persona sugiere que en realidad necesitarías simplemente ir a este enlace, lo que me lleva aquí, no aquí exactamente. Um acabo de hacer clic en esto y básicamente me lleva hasta aquí. Y lo que pasa es que cuando hago clic en el botón por defecto, me lleva a esta pantalla, y me han sugerido que necesitarías cambiar al modo nativo para poder trabajar siempre que en realidad no hayas agregado ningún valor de base de datos de datos. Entonces como tu base de datos está vacía, puedes hacer esto. Así que vamos a hacer eso. Nosotros cambiamos a los modos de conmutación de placa nativa. Y ojalá funcione ahora. Y si voy aquí ahora, si me refresco. Bien. Entonces sí, esta cosa está construida ahora, y en realidad dice que la API Cloud Firestore no está disponible Pero, ¿por qué dirías eso? Solo busquemos esto también. Entonces, ¿qué tal si busco esto? Entonces nos pide algunas cosas. ¿Y si intento crear Quadibilder? No esto Bien, me da esto ahora. Vamos a refrescarlo una vez. Bien, entonces nos da esta colección dat por sí sola. Entonces ojalá, el error se haya ido. Tan loco es que cuando estaba tratando de construir la aplicación por mi cuenta, no me enfrenté a este problema, pero esta es la primera vez que realmente me enfrento a este problema con Firebase que el Firestore no estaba funcionando Así que vamos a cerrar estos enlaces de ayuda adicionales, y de hecho volveríamos a probar nuestra funcionalidad de registro ahora. Entonces, veamos qué pasa. Y solo por el bien de la autenticación, creo que en realidad tenemos un segundo correo ahora, que realmente no necesitamos, así que podemos tener una cuenta eliminada aquí. Y volvamos a ir a la base de datos de FistOE. Y ahora solo iríamos. Bien, entonces lo inscribió perfectamente. Eso es bueno para nosotros, pero entonces hagámoslo de manera adecuada ahora. Entonces, ¿qué tal si tenemos tercera atragmil.com? Solo estoy usando números para hacer un seguimiento de, como, cuántos intentos nos llevó, ya sabes, hacer que esta cosa funcione. Entonces es la contraseña tres. Hacemos un registro y ojalá funcione ahora. Espera, acabo de darnos permisos faltantes o insuficientes. Bien, eso es nuevo. Veamos, las reglas desarrollan y prueban. Entonces recuerdo que teníamos para la autenticación, teníamos algunas reglas, no para la autenticación. Creo que teníamos para almacenamiento. Así que vamos a ir a las reglas y algo así. Podrías simplemente copiar esto. Si solo podemos copiar todo esto, simplemente volvemos a nuestra base de datos Firestore ahora mismo Tenemos reglas. Uh y podemos tachar esto. Podemos entrar en esto y podemos hacer publicar. ¿Y publica? Sí, publica cambios. ¿Qué tal si creamos iniciar una colección usuarios siguiente documento ID algo y guardar algo, algo. Yo creé eso, así que podríamos simplemente eliminar esta colección ahora, escribiendo usuarios. Eliminamos esta cosa. Ahora ojalá funcione. Entonces ahora este sería nuestro uso de índices. No lo creo así tenemos algún tipo de ojalá funcione ahora. No creo que sea necesario habilitarlo o de alguna manera. Solo hagamos un registro con un nuevo correo electrónico porque la autenticación nos dará un error ahora porque ya se ha registrado. Entonces hagamos contraseña para. Haremos registro y funciona. Por lo que dice que la operación no pudo concluirse. Así que vamos a comprobarlo aquí si realmente está creando nuestros documentos de usuario o no. Bien. Entonces sí, aquí vamos. En realidad hemos configurado la base de datos Firestore Se están creando los usuarios. Se está rellenando el correo electrónico y el ID de usuario, y podemos hacer referencia a este usuario con el mismo ID de usuario que dentro de él. Este es un paso muy crucial en todo el proceso porque estaríamos haciendo referencia a los seguidores de publicaciones a través de este ID de usuario Entonces este es un paso importante. Y ahora que hemos hecho tanto éxito en la creación del usuario. Tan bueno para nosotros. Ahora podríamos comenzar a construir la interfaz de usuario un poco para que esto se vea más presentable, y luego podemos pasar a agregar las otras funcionalidades Así que gracias por ver este video. Te veré en la siguiente. Adiós. 12. Búsqueda de usuarios de bases de datos y visualización de datos en el perfil de usuario: Continuando, en realidad agregaríamos un campo de nombre de usuario a nuestra vista de autenticación ahora. Así que vamos a ir a la Vista de Auth. Y aquí hemos definido todos los campos. Entonces justo debajo del campo de correo electrónico, agreguemos otro campo para la guerra privada. Debe llamarse campo de nombre de usuario y F debe ser capital. Ahora lo que podemos hacer es que se ajustaría a la vista tipo sum, abriría las llaves cud, podría agregar un campo de texto aquí Y este campo de texto en realidad contendría nombre de usuario y la propiedad text que sería un enlace con el punto de modelo de vista de clase. No lo creo, todavía tenemos un nombre de usuario. Qué tal si copiamos esto, lo pegamos aquí, lo llamamos nombre de usuario, lo copiamos nuevamente, volvemos a nuestra pantalla y agregamos el nombre de usuario aquí. Y entonces podemos tener un color de primer plano o algo así, algo así solamente Vamos a copiar y pegar y eliminar ciertas cosas. Entonces fuente y todo está bien. El color de fondo se puede borrar en todo momento, así que no creo que así necesitamos cosas tan específicas aquí. radio de esquina debe ser diez, superposición, capitalización automática, Kebotype vamos a eliminar y deshabilitar la corrección automática Eso está bien porque el uso n puede ser gramaticalmente incorrecto o algo así Ahora lo que podríamos hacer es tener esto, usar un campo name, y dentro de la pila V, podríamos agregar esta condición de que si view model dot show sine in view es igual igual a false, o podrías hacerlo de la manera taquigráfica usando un signo de exclamación aquí mismo, pero bien, y podemos tener el campo use name Entonces supongo que eso realmente lo configuraría de una manera que si está en la vista de registro, nos mostraría el campo de nombre de usuario, lo contrario no aparecerá como el campo de nombre de usuario. Así que vamos a probar esto rápidamente, pero vamos a entrar en nuestra función de registro ahora mismo porque como hemos agregado un campo para el nombre de usuario, necesitaríamos crear el usuario de tal manera también. Así que antes solo estábamos usando ID de usuario, correo electrónico, pero ahora también tendríamos un campo para nombre de usuario, y esto sería, um usar un nombre, que es una propiedad definida aquí. Volvamos. Y agreguemos también una marca de tiempo, básicamente fecha de creación. Por lo que nos puede ayudar en el futuro a ordenar, como a qué hora se unió el usuario en el sentido que quién es un usuario mayor y quién está recién ingresado. Entonces, ya sabes, cuando alguien se une de nuevo, podrías mostrarle algunos de los usuarios creados anteriormente en la plataforma para que puedan conectarse con ellos u ordenar. Entonces, lo bueno es que este valor de marca de tiempo por lo que sé es en realidad un supongo que es, creo que no es Swift definido, sino que en cambio, sí, es del tipo función de biblioteca de cinco formas, y básicamente nos da una marca de tiempo, y funciona directamente bien con el lenguaje Swift Entonces lo que podríamos hacer ahora es que recuerdes que teníamos un modelo para datos de usuario. Esto es para los datos de usuario de auth, ¿verdad? Entonces ahora podríamos hacer otro modelo que sería del tipo usuario de base de datos. Y vamos a crear esto. No creo que así necesitamos No, realmente no necesitamos ninguna importación. Entonces podríamos comenzar con la estructura. Podríamos comenzar con Astruct y nombrar este usuario de base de datos. usuario de base de datos debe ser del tipo codificable y luego podemos tener algunas propiedades, por lo que debería ser fecha de creación, que sería del tipo fecha Entonces sí, de esto de lo que estaba hablando. Entonces, el método de marca de tiempo de cinco Base es en realidad directamente compatible con la funcionalidad de fecha dentro Entonces esto es útil para nosotros, así que realmente no necesitamos cambiar las cosas. Y podemos dejar que el ID de usuario, que volvería a ser del tipo string opcional. Y entonces podemos tener nombre de usuario, que sería del tipo string también. Entonces ahora que hemos hecho tanto, solo escribamos una extensión en el formato de fecha porque como estamos recuperando una fecha, en realidad tendríamos que mostrarla de una manera de, sabes, supongamos, llamarlo de manera fácil de usar porque necesita tenerla necesita ser compatible con el tipo de cadena para poder mostrarla en la pantalla. Quiero decir, podríamos usar un formato básico, pero como si tuviéramos nuestro propio formato personalizado, que estás viendo ahora mismo, es fácil de crear solo porque podríamos seleccionar un estilo de fecha específico de aquí, y luego podríamos darle un estilo medio porque no necesitamos un código de tiempo con él también. La cita conjunta podría ser simplemente solo ya sabes, qué día. Entonces, en términos de día, mes y año, y podríamos mantener esta oportunidad, y podemos haber escrito para la materia, y esta funcionalidad debería funcionar. Bien. Entonces se hace tanto. Lo que más tenemos que hacer ahora es que vayamos dentro de nuestro modelo de vista principal. Y dentro de nuestro modelo de vista principal, ahora te mostraré una manera muy fácil de, como, ya sabes, configurar esta cosa. Al igual que, ahora mismo estamos creando una especie de diccionario. Lo que haríamos ahora es crear un usuario de base de datos um publicado, que sería del tipo usuario base de datos opcional, le daría un valor predeterminado de NIL y dentro de nuestra función de registro, necesitaríamos tener digamos que tenemos datos de usuario Hemos creado un documento en FirStore. Estás creando un documento aquí. Contamos con DB. Lo que podríamos hacer es que podemos crear let usuario de base de datos, y podríamos tener usuario de base y tendrá su inicializador automático ya que es un puntal y podríamos darle una fecha Podríamos darle un correo electrónico que estaría aquí mismo. El ID de usuario sería dejarme pensarlo, el ID de usuario. Y supongo que el correo electrónico también debería ser datos de usuario dot email. Y debido a que los datos de usuario que estamos recuperando de la autenticación y el ID de usuario deben ser datos de usuario punto UID Esto está ahí, y luego necesitaríamos finalmente el nombre de usuario que el usuario está ingresando. Así que ahora que hemos hecho tanto, en lugar de crear el diccionario, podríamos hacer probar dbdt collection Podrías ingresar usuarios aquí. Ahora podríamos tener documento punto, y vamos dentro de él. Agreguemos UID de userdatadt. Nuevamente, lo mismo. Y esta vez haríamos set data, y sería de usuario de base de datos, y haríamos tanto como false. Y por lo tanto, realmente no necesitamos realizar esta funcionalidad ahora por lo que sé. Y podemos tacharlo, y nos da este error que no puede convertir un valor de tipo usuario de base a tipo de argumento. Bien. Tiene sentido. Se saytrdb colección de puntos Tenemos usuarios y este documento userdata dot d dot set data Y creo que no es hacer referencia a una función correcta de la nuestra por lo que entiendo Entonces para ello, en realidad necesitaríamos importar Firestore no combinar, supongo, debería ser Firestore Swift Y ser cinco Base Firestore Swift. Y dice que no tenemos un paquete como este. Bien, Firestore cinco Base firestore, tenemos, pero no tenemos el Swift equivalente a Pero vamos a comprobar, ¿ está funcionando ahora o no? Entonces creo que ya no nos está lanzando ningún error. Tan bueno para nosotros. Y ahora que hemos hecho tanto, lo que podríamos hacer ahora es, hagamos un comando de turno K para probar una factura limpia para ver si la funcionalidad está funcionando Mejor y Bien, así que creo que está construyendo bien. En tanto, lo que podríamos hacer en realidad es crear pocas funciones más. Entonces si haces opción Comando flecha izquierda, pliega todo el asunto. Ahora lo que podríamos hacer es que podemos tener otra funcionalidad que sería privada, y lo llamaríamos funk privado, fetch database, user, y como vamos a buscar un usuario de base de datos es básicamente usaríamos el ID ya que notas que al crear un usuario, estamos configurando el UID para Por lo que cada usuario puede ser buscado con su ID. Entonces podemos agregar un nombre de parámetro, un nombre de argumento de función con UID, y podemos tener UID aquí también Entonces sería el argumento interno, y sería del Esto sería una función ACN, así que ASN lanza, y nos daría un usuario de base Y abramos esta función. Lo que haría es que declararía un Db de festodt Firestore, entonces podemos Así podemos intentar esperar, y luego podremos tener colección de TvT Dentro de la colección, tendría que buscar usuarios. Dentro de los usuarios, buscaría un documento. Ese documento necesita tener el UID, que estamos tomando como argumento, y obtendríamos ese documento como nuestro usuario de base de datos punto self De ahí que declaremos usuario de base de datos como de tipo codificable porque ahora estamos analizando realmente la solicitud que obtenemos de la Firestore y la usamos como usuario de base de Justo debajo de aquí, en realidad necesitaríamos escribir la función para usar esta función ACN porque es una función AC, en realidad la envolveríamos dentro de otra función pública, que podría llamarla dentro de un objeto de tarea Por lo que nos facilita llamar directamente dentro de nuestra vista. Así que busca el usuario de la base de datos. Yo Dios dejo que UID sea igual a aught, no at y entonces sacaríamos el uso actual de aquí y obtendríamos su UID, de lo contrario Entonces, ¿qué estamos haciendo aquí? Básicamente, ya sabes, esta función requiere un UID. ¿Cómo obtenemos un UID? Entonces estamos recuperando el usuario actual de la base de fuego, la funcionalidad Auth, funcionalidad Auth De hecho, caché al usuario actual en su propio, um, almacenamiento, y así podemos acceder a él de esta Ahora lo que vamos a hacer es iniciar una tarea. La tarea se abriría en su interior. Tendríamos dos bloques, entonces sería un usuario principal de la base de datos, y esto sería intentar esperar. Obtener los usuarios de la base de datos solo la función que acabamos de escribir anteriormente Y en realidad, sí, esto es todo. Ahora lo que hacemos es que abrimos una cola de despacho porque ahora que hemos buscado un usuario de base de datos, siguiente y más importante que debemos hacer es en realidad poblar nuestra propiedad publicada Así que el usuario autodidacta de la base de datos sería igual al usuario de la base de datos, y podríamos tener una propiedad de impresión aquí también. Y podríamos decir fetch user, y este sería del tipo database user Así que vamos a imprimirlo para ver qué todo lo que estamos consiguiendo aquí. Podemos tener aquí una sentencia catch, que simplemente imprimiría, supongo que tenemos un error al buscar el usuario y el error sería error punto descripción localizada Ahora que hemos hecho tanto, en realidad podríamos, ya sabes, podríamos probarlo en el sentido que solo hagamos algunas modificaciones dentro de nuestra vista de perfil de usuario. Entonces básicamente, es realmente sencillo en este punto. Entonces lo que podríamos hacer es simplemente escribir una función privada aquí, fecha formateada, podríamos mover esta función dentro de un modelo de vista también. Pero por ahora, dejémoslo aquí. Entonces te darías cuenta de lo que estoy haciendo. Básicamente, lo que hace es que usa nuestro formato de fecha que acabamos de escribir. Toma un valor de fecha y nos da una cadena. Entonces, si recuerdas, teníamos esta extensión de formato de fecha. Y creo que no va a salir porque el formato de fecha es del tipo o tal vez no. Creo que también está dentro de 50 UI. Entonces, para la materia, dateformatt, función fácil de usar que acabamos de escribir, no Debería ser fácil de usar Um, tengo algunas dudas de por qué no viene y bien, esto tiene sentido que no esté funcionando, y podamos tener una cadena, y debería ser fecha. Pero entonces no lo está poniendo al día, así que no muy seguro. Bien, así es. Pero de alguna manera mi Xcode no lo está reconociendo, entonces es de color blanco Pero aunque está funcionando, así que bien, por simplicidad, ya podemos venir aquí y tenemos una pila V, y luego tuvimos un enlace de navegación. Pero lo que podríamos hacer ahora es que podemos crear una pila ED aquí. Dentro de la pila EDS, lo que podríamos hacer es que podamos tener una propiedad de texto. Simplemente dice perfil por ahora, así que dándole un poco más de, ya sabes, algo de primer plano, podríamos agregar algo de color fground Podríamos tener el blanco aquí porque estaba pensando darle el color negro por ahora. Y estamos cambiando lentamente hacia el diseño que tenía en mi mente, así que esperaba que nuestra vista de perfil fuera realmente de color blanco. Entonces eso es lo que estamos haciendo ahora mismo. Fontst Bold es el nombre. Podemos tener una talla 18 aquí. Ahora podríamos agregar algo de relleno, como, supongamos seis píxeles, entonces podemos tener algo de fondo, y el fondo debe ser color, color interfaz de usuario, y luego debería estar bien. Entonces podríamos tener amarillo suave o algo así, pero solo estaba pensando eso, ¿qué tal si agregamos como pocos colores nuevos Entonces, quiero decir, estaba pensando que tenemos muchos amarillos pero no realmente útiles para nosotros de una manera que realmente no queremos que toda nuestra app sea amarilla Entonces está este color neón que vi en línea, y lo había comprobado. No es exactamente de color amarillo. Te darías cuenta justo ahora porque usaríamos estos colores dentro de nuestra vista de perfil. Y para el hex, tiene es D FFF, y es 32. Esta ya está hecha. Agreguemos una función más, y sería así, devuelve un color de interfaz de usuario. Abrí, devolvemos el color de la interfaz de usuario. Le agregamos x, y luego tenemos cero X tres, dos, siete y ocho FF. Entonces creo que obtuve ambos colores de, supongo, el propio Bhans, y los encontré buenos, así que los estoy usando. Y para el gris medio, podríamos tener algo así como un color de interfaz de usuario, y podemos devolver el color de la interfaz , que sería X, y el valor X sería cero cruce uno A uno, A uno, A. Así que sí, estos fueron los tres nuevos colores que quería agregar. Y en lugar de usar mi pelo amarillo, ¿qué tal si vamos a ir por el color azul ahora, yola azul gris como lo que estaba escrito en el, ya sabes, el sitio web de manos B. Así que vamos a darle ahora una forma de clip. La forma del clip sería un rectángulo redondeado, un rectángulo redondeado con un radio de esquina de como 20 píxeles, y vamos a darle un relleno general exterior también de cuatro. Entonces podemos tener un espaciador y debajo del espaciador, podemos tener nuestro enlace de navegación. Podemos copiar todo esto, ponerlo aquí, así esto se convierte en el encabezado de todo nuestro asunto. Y básicamente, ahora que hemos agregado tanto, puedes tener un ancho de marco de no exactamente infinito ahora porque, ya sabes, tenemos, lo que dices. Hemos agregado dos cosas en la pila para que tengan un espaciador en el medio y se estén empujando entre sí. Entonces, el enlace de viento de navegación realidad ese círculo de engranajes intentaría estar en el lado izquierdo de la vista en el espacio corto que se le ha asignado. Entonces para arreglarlo, vamos a cambiarlo un poco también, porque, como, ahora mismo, solo tiene un icono. Entonces lo que haría es mantener esta cosa fuera de aquí. El color debería ser blanco ahora porque el fondo es negro. Debe ser audaz. Ya no necesitamos el tamaño de la fuente. Y podríamos intentar agregando texto de edición aquí, y el texto de edición debería tener una fuente, y la fuente sería del tipo personalizado. Nuevamente, serían fuentes punto negrita Lo siento. Y podríamos darle una talla 14, y luego podemos tener un color de primer plano de punto blanco Así que también podrías usar el estilo de primer plano, ¿de acuerdo? Podemos tener un relleno de, como, cuatro píxeles o algo así, y podemos tener un fondo para ellos. Y este fondo tendrá un rectángulo redondeado con un radio de esquina de 12 con un color de fondo completo de claro. Bien. Entonces no muy seguro. ¿Deberíamos mantenerlo claro o deberíamos mantener algo como el blanco? Quiero decir, claro que realmente no tiene ningún sentido, ¿verdad? Vamos a darle un ancho de marco de como 120. Por lo que tiene suficiente espacio para el texto y el icono. Y en vez de claro, solo hagámoslo aquí también, podemos tener color I color punto azul Creola otra vez Ahora que hemos hecho tanto, tenemos un ancho de marco también. Lo que podríamos hacer es mantener el acolchado dos aros horizontales O ancho horizontal también, y podemos quitar el marco de aquí. Y ahora por fin podemos cerrar nuestras pilas de borde. Entonces ahora que hemos hecho tanto, abramos otra pila de bordes y esta vez añadiríamos algunas cosas más. Entonces básicamente, tendría un texto, y esto podría tener agregar el valor de Rate, y luego podríamos agregarlo con el valor que recuperemos de nuestra base de datos viewmdel dot user dot username Y si no es nada, entonces podemos agregar NIL y podemos tener un tamaño de fuente de nuevo personalizado, y sería fuentes punto negrita con tamaño 30, digamos, creo que es bastante enorme, pero vamos a intentarlo y podemos tener un color de primer plano Y sería un color con un color UI, que sería del tipo amarillo neón. Que hemos hecho tanto. ¿Qué tal si agregamos otra cosa aquí, que sería el ID de usuario Así que vamos a darle una etiqueta hash. Le damos plus, y luego nuevamente lo agregamos con vimodel dot database user dot user ID, lo contrario, también sería NIL Y podemos simplemente copiar esta cosa también, y en su lugar podríamos darle un tamaño pequeño de ocho o algo así. Y como hemos hecho tanto, podemos tener un marco con un ancho máximo de, digamos, infinito, no en él, sino infinito. Y entonces podemos tener una alineación de liderar. Entonces agregamos esto dentro nuestro ET qué tal si lo hacemos dentro de una pila V, diría yo. Quiero decir, eso también podría quedar bien. Y en vez de, bien, lo que podríamos hacer es simplemente agregarlos dentro de una pila V porque solo queremos ver si todo está funcionando o no. Y en la pila Z, agreguemos un on appear en una funcionalidad de peer. Entonces esto en aparecer, tendríamos vista modelo punto. Obtener datos de usuario. Y dado que fetch user data maneja internamente la función asíncrona, realmente no necesitamos llamarla dentro de ninguno de los cierres de tareas Así que tanto lo hemos hecho, ¿qué tal si intentamos ejecutar la funcionalidad ahora y ver si realmente está creando el usuario de la base de datos y luego recuperándolo? Creo que podría fallar en el primer intento porque nuestro usuario de base de datos ha cambiado completamente de lo que solía ser Entonces solo espero que no se estrelle o algo así. Podríamos simplemente eliminar este documento por ahora y podríamos escribir usuarios y podemos eliminar. Así que ya no lo necesitamos porque hemos agregado un conjunto completamente nuevo de cosas, y qué tal, bien, podemos esperar a que se construya y lo más probable es que no funcione. Vamos a ver qué pasa. Podría ser que nos cierre de sesión porque no puede encontrar un usuario de base de datos válido, pero veamos qué pasa. Entonces dentro de la aplicación finalmente, bien, nos da esto y dice error al buscar el error al buscar al usuario Los datos no se pudieron leer porque faltan. Bien, tiene sentido. Esto se ve un poco mal en este momento, pero vamos a hacer que funcione correctamente. Entonces ahora podríamos tener nuestro primer usuario adecuado, diría yo. Como, estaba pensando en tener algunos personajes de anime como Crolo y personajes de Hunter x Hunter Si ustedes han visto eso, y agreguemos la contraseña como contraseña misma. Oh, es el nombre de usuario, mi mala. Así que también quería comprobar esto. Bien, así que si solo estás en la página de registro, entonces aparece. De lo contrario, no aparece. Entonces el nombre de usuario obviamente debería ser rolo y no tiene una W, entonces es Crolo y la contraseña debe ser contraseña Así que vamos a inscribir a esta persona y debería apuntarse, y lo recupera perfectamente Entonces, bien, estamos creando un usuario. Está funcionando bien. Actualicemos y veamos con qué datos poblamos a nuestro usuario. Está tardando unos segundos en acumularse, pero ahí está. Ahora vemos que se está mostrando la fecha de creación. Y la razón por la que escribí un formato de fecha fue porque agrega este tiempo extra con el cronometraje estándar plus porque ahora mismo estoy en la India, así que dice UTC más 530 para nosotros. Entonces no quería tener todo esto. Por eso escribí ese formato. Y podríamos intentar imprimir esa fecha también, ya que la hemos escrito bien. Así que probemos esto también. ¿Qué tal dentro de la pila V que hemos agregado? Agregamos un texto y lo llamamos fecha de creación. Y dentro de aquí, habríamos formateado date con Vwmdel dot database user, dot Entonces ojalá esto funcione para nosotros. Y dice: Bien, es opcional. Entonces por defecto sería, um pidiendo un valor predeterminado, así que vamos a darle un valor de fecha vacía. Vamos a ver qué pasa. Entonces, si ejecutamos esto, creo ojalá nos deba dar la fecha de hoy mismo, así que realmente no sabremos si esto estuvo funcionando o no, ya que incluso en este caso o en este caso, tendría Bien. Así que no estoy muy seguro si está bien, ¿ es que está desmayo o algo así? ¿Qué tal si vuelvo a ejecutar esto? Creo que no configuré la fuente y el color de primer plano, así que estaba asumiendo que el teléfono está en modo de luz Entonces bien, entonces nos da una fecha creada el ocho de octubre de 2024 a las 12:42 P.M Entonces son las 12 44 en este momento. Entonces son las 12 44 en este momento Entonces supongo que está tomando el tiempo de los usuarios de la base de datos solamente, y la fecha formateada está funcionando bien. Entonces podemos eliminarlo por ahora porque no creo que la gente realmente necesite ver cuándo se creó este usuario. Pero definitivamente necesitan ver, como, como, ¿cuándo se unieron? Quiero decir, eso sería como una buena funcionalidad. Creo que Twitter también lo muestra. Entonces ahora que hemos hecho tanto, es hora de que realmente trabajemos un poco en la interfaz de usuario y modificaríamos toda la pantalla para que se vea mejor porque en este momento se ve muy mal. Entonces, lo que podríamos hacer ahora es que podemos trabajar con algunas partes y formas en Swift UI para que podamos crear una interfaz de usuario guapa para nuestra vista de perfil de usuario. Y para eso, también, me inspiré un poco como qué UI debería crear a partir de Bhands Así que podrías hacer eso, también para tu app o simplemente podrías seguir este curso para ver cómo lo hago así que crearíamos una forma personalizada propia y la usaríamos dentro de nuestra vista de perfil de usuario. Por lo que sería una experiencia de aprendizaje divertida trabajar con formas rápidas de interfaz de usuario. Espero verte en el siguiente video. Y si tienes alguna duda, cualquier cosa respecto a todo este video, podrías simplemente dejarlas abajo en los comentarios. Estaría encantado de ayudarle. Gracias. 13. Creación de formas personalizadas en SwiftUI: Entonces como se describe en el video anterior, en este video, realidad comenzaría a hacer esa forma personalizada que vamos a usar dentro de nuestra vista de perfil de usuario. Entonces, incluso antes de comenzar con la creación de esa forma personalizada, en realidad me gustaría tomarme un tiempo y explicarte algunos conceptos de construir formas dentro de Swift UI. Entonces esta es una forma que vamos a crear. Esta es una captura de pantalla de la propia aplicación, que estamos haciendo actualmente, y ahí está la forma que puedes ver. Entonces, ¿cómo es el núcleo principal de, como, trabajar con formas dentro de SF DUI Entonces para aquí, tenemos un bloc de bocetos, y me gustaría explicarte que supongamos que este es el lienzo completo. Esta es tu forma. Área en el área que tienes que dibujar, la forma, cualquier forma que quieras hacer. Básicamente, el sistema de coordenadas comienza desde la esquina superior izquierda, lo que significa que si te mueves así, eso significa que estás agregando algo en el eje X. Y si te mueves hacia abajo, estás agregando algo en el eje Y. Bien. Y si nos movemos aquí, lo que significa que estamos restando algo del eje X, la X se ve bastante mal, así que solo voy a sí, X. Restar algo del Y si te estás moviendo hacia arriba, significa que estás restando algo del Es bastante difícil dibujar con un ratón, pero bien. Con un touchpad, así que sí. Esto es lo que tenía que explicarte. Y ahora esta cosa está despejada, en realidad podemos repasar. Y obviamente, hay algunas funciones. Entonces básicamente, comienzas con un punto imaginario dentro de tu lienzo. Entonces no hay nada al principio. Es solo una posición inicial es que estás en la esquina superior izquierda. No quiere decir que tu forma tenga algún punto ya definido o algo así. No, depende de ti donde tienes que poner tu punto. Entonces, para hacer un punto, puedes usar la funcionalidad de movimiento, y aquí es donde mueves el punto a cualquier parte del lienzo. Ahí está Adline. Hay curvas de cordón agregadas, hay curvas de suma. Entonces estas son las funcionalidades que tienes para hacer formas dentro de Swift UI. Supongo que habría un par de APIs más, pero no las he pasado por todas. Pero esto es de lejos casi lo que necesitas para crear tu propia forma personalizada. Así que ahora que eso se borra, en realidad podemos crear una nueva carpeta aquí, y podemos nombrar a esta costumbre. Y haz Command N y selecciona Swift UI view y nombra este rectángulo curvilíneo Entonces puedes nombrarlo cualquier cosa, pero sentí que de acuerdo a la forma, es más o menos como un rectángulo en sí, pero tiene esta curva a él desde arriba y abajo. Por eso le puse el nombre rectángulo curvilíneo. Y obviamente, este rectángulo curvilíneo no es exactamente una vista. Es una forma. Es como rectángulo rectángulo redondeado círculo. Entonces se ajustaría a la forma tipo, en realidad. Y podemos quitar esta propiedad corporal de aquí. Ahora que nos hemos conformado a la type shape, nuestro compilador se quejará de que no se ajusta a este protocolo porque falta esta ruta de funcionalidad, que en realidad devuelve una ruta, que sería la forma en general para Así que vamos a crear rápidamente un objeto path. Entonces usando la clase path, creando una instancia, dice crea una ruta vacía, y podemos simplemente devolverla por ahora. Para que sepamos que estamos devolviendo algo, y la función no es lanzarnos errores. Ahora esto está fuera del camino. Lo que podríamos hacer es agregar dos parámetros para un rectángulo. Entonces ves que hay dos cosas principales que podemos configurar desde el final dependiendo si queremos usar la misma forma con ciertos valores diferentes en otras pantallas. Entonces ese es el radio de la esquina, podía ver en las cuatro esquinas, y ahí está esta curva que está en la parte superior en la parte inferior. Entonces siguiendo la misma funcionalidad, debería ser un radio de esquina, que sería del tipo CG float, y este sería del valor 20 píxeles, y debería haber una cantidad de curva. Y esto también debería ser del tipo CG float, y debería tener el valor ocho. Entonces ahora que se hace tanto, todos sabemos que para struct, los inicializadores son como pre entregados Básicamente, no tenemos que definir explícitamente ningún inicializador Pero como les hemos dado valores predeterminados, cada vez que intentes llamar a este rectángulo, no nos preguntará explícitamente eso, Bien, ahí está este rectángulo, esta forma que has creado. Se quiere dar a este radio de esquina o cantidad de curva, pero nosotros podemos hacer eso. Es una opción opcional para nosotros. Entonces sí, volviendo al punto, ahora que hemos hecho tanto, lo que podemos hacer es que podamos comenzar por crear nuestra forma. Entonces como te dije de antemano, nuestro lienzo, el sistema de coordenadas inicia desde la esquina superior izquierda. Entonces, si este es nuestro lienzo, aquí es donde comenzará nuestro sistema de coordenadas. Entonces entendiendo esta forma, lo que puedes ver es que tenemos que escribir de inicio con una curva misma en la esquina superior izquierda. Entonces, solo agreguemos algunos comentarios para hacer un seguimiento de dónde estamos en cuanto al lienzo. Entonces esquina superior izquierda. Ahora lo primero es exponer nuestro primer punto porque en este momento solo tenemos un punto de partida imaginario en la esquina superior izquierda. No hay ninguna curva de línea ni ningún punto ya dibujado ahí. Es sólo un punto. Es solo un punto de partida para crear nuestra forma. Entonces ahora lo que podemos hacer es mover un poco nuestro punto porque para crear esta misma curva, en realidad tengo que empezar desde aquí, ¿verdad? Entonces podemos comenzar desde aquí. Le damos otro punto en alguna parte de aquí, y luego dibujará una curva a lo largo de estos dos puntos. Así es como es trabajar con formas dentro de Swift DUI. Sólo voy a repetirme otra vez. Ya que tenemos que crear esta curva, tenemos que partir de aquí. Aquí le damos otro punto en el lienzo, y Swift dibujará automáticamente una curva a lo largo de estos dos puntos. Y eso está en nuestra mente. Ahora mismo, ya sabes que en nuestro lienzo imaginario, que sería así de grande en sí o la forma, el tamaño, el tamaño de la forma que estamos construyendo, estamos en la esquina superior izquierda. Entonces, lo que tenemos que hacer ahora es que tengamos razón en cuanto al eje X. Horizontalmente, estamos en la posición correcta que estamos en el bit inicial, pero verticalmente. Verticalmente, tenemos que empezar desde un poco más abajo para que tengamos un punto aquí, bien. Entonces de aquí para aquí, tenemos que bajar un poco porque necesitamos crear una curva de este punto a este punto. Entonces para hacer eso, lo que tenemos que hacer es que hagamos camino nos movemos hacia y luego le demos un punto CG. Y para el punto CG, habría valores X e Y. Y se puede ver que la función en realidad tiene un rect en su propio argumento Y lo que hace es que podríamos usar el rec y podemos encontrar el valor mínimo de X, lo que significa el valor mínimo de la X, que sería el lado más a la izquierda del lienzo Pero para Y, en realidad necesitamos la Y mínima más el valor del radio de la esquina. Entonces como te lo expliqué antes, si agregamos algo en la Y, se mueve hacia abajo. Y si añadimos algo en la X, se mueve del lado derecho. Entonces eso es lo que estamos haciendo ahora mismo. Estamos agregando algo. Entonces nuestro punto de partida fue en algún lugar de aquí, el punto imaginario, mínimo X, mínimo Y. Nos movimos un poco hacia abajo agregando algo a la Y y manteniendo la X igual. Entonces estamos aquí ahora, esencialmente, este punto. Estamos aquí. Entonces ahora que lo hemos hecho, hemos movido nuestro primer punto. Ahora lo que podemos hacer es que podemos trabajar en la curva superior izquierda, básicamente. Entonces esta curva de la que estamos hablando. Y como te lo expliqué antes, para pasar a este punto, solo entendamos qué es lo que tenemos que hacer. Entonces estamos en este punto donde X es mínimo, pero la Y es mínima más el radio de esquina. Entonces, dos cosas que en realidad tenemos que hacer. Tenemos que saltar de nuevo a Y como mínimo. Bien, tenemos que regresar. Así que no más adición. Solo necesitamos usar el mínimo de Y para volver a este punto, y luego necesitamos agregar el valor del radio de esquina a X para movernos a este punto. ¿Entiendes? Este punto no es nada. Este punto no es más que mínimo de X, Mínimo de Y más el radio de esquina, por lo que bajó. Ahora para pasar a este punto, tenemos que movernos horizontalmente. Entonces estamos sumando el radio de esquina a X, y luego tenemos que movernos verticalmente hacia arriba. Entonces para movernos verticalmente hacia arriba, tenemos que restar algo de la Y. Tenemos que restar algo de la Y para poder movernos verticalmente hacia Y como ustedes saben que aquí le agregamos algo a Y, que era el valor del radio de la esquina para poder bajar, lo que hacemos ahora es que ya no agregamos nada a lo que automáticamente sube solamente. Entonces este punto en realidad estaría llegando a nuestro código. Este debería ser el camino enseñado en la curva cuádruple, y el punto CG realmente saldría. Vaya, perdón por eso. punto CG en realidad saldría a ser recto de mínimo de X más radio de esquina porque tenemos que movernos horizontalmente a la derecha, y solo sería mínimo de Y aquí Que hemos hecho tanto. Si alguna vez has trabajado con algún ilustrador o alguna aplicación de diseño, sabrías que mientras intentas dibujar curvas y círculos y cualquier forma como tal, te darían un punto de control. Un punto de control es a veces un punto que está exactamente en el medio de ambos puntos, o a veces hay dos puntos de control que hay dos puntos de control que son equidistantes entre sí y los puntos Entonces estas aplicaciones de ilustrador funcionan de la misma manera. No tengo exactamente el conocimiento profundo de la geometría involucrada. Pero por lo que yo sé, para una curva de cordón, se necesita tener un punto de control, y ese punto de control en realidad sería equidistancia de ambos puntos Entonces si te has dado cuenta, uno es radio de esquina Y, radio de esquina más Y, y el otro es radio de esquina más X. Entonces el único punto equidistancia de ambos es rect de mínimo X y rect de mínimo Y. Entonces esto es lo que hacemos aquí Entonces espero que hasta ahora esté entendiendo lo que estamos haciendo aquí. Partimos de la esquina superior izquierda. Es sólo un punto de partida imaginario. No hay ningún punto real ahí que exista. Después movimos nuestro punto de partida a un poco hacia abajo para que podamos trazar una curva a partir de ahí. Y ahora que hemos añadido una curva, básicamente el radio de la esquina superior izquierda. Ahora ya podemos trabajar en esta curva superior izquierda. Entonces para hacer eso, podemos escribir un comentario también para que tengamos la curva superior de comprensión de la forma, y así lo que tenemos que hacer ahora. Entonces esto también es realmente interesante. Entonces ves una forma, como si no supiera lo que estamos tratando de crear bien. Solo quiere que nos demos le demos nos quiere algunos puntos como insumos para que solo pueda crear una forma a su alrededor, básicamente. Entonces para ello, el punto de partida nos dijo que C, mi punto de partida es esta esquina superior izquierda. Este es el mínimo de X y el mínimo de Y. Ahora bien, si le decimos a esta forma que queremos ir al máximo de X y máximo de Y, ¿qué opinas? ¿A dónde crees que irá? Entonces máximo de X sería horizontalmente máximo, supongamos todavía aquí, y máximo de Y sería verticalmente máximo, supongamos aquí. Entonces el punto de coordenadas saldría para estar aquí, básicamente, máximo de X y máximo de Y. Entonces ahora lo que tenemos que hacer es que para crear esta curva, no necesitamos movernos al máximo de Y. No necesitamos bajar. Definitivamente necesitamos movernos a la derecha. Entonces implicaría el máximo de X, pero no implicará el máximo de Y. Así que la Y seguirá siendo mínima de Y solamente, pero la X se convertirá en máxima de X. Pero ahora, de nuevo, ya que simplemente no tenemos que movernos a una esquina, a una esquina señalada, tenemos que crear una curva Así que nos detendremos un poco antes de la curva real. Para hacer eso, restaremos el radio de esquina del máximo de X para que nuestro punto realmente aterrice aquí Entonces este punto del que estoy hablando, sería mínimo de Y y máximo de X menos el radio de esquina. Entonces es asumiendo que el máximo de X estaría en algún lugar aquí después de agregarle el radio de la esquina a sí mismo. Entonces este sería el máximo de X menos el radio de la esquina. Así que volviendo a nuestro código, vamos camino, hacemos Añadir curva. Ahora necesitamos agregar una curva como punto CG. Habría que preguntar valores X e Y, por lo que a la X se le enseñaría máximo de X, y como explicamos, debería ser menos radio de esquina y la Y quedaría rect de mínimo de Y. Ahora que hemos hecho tanto, ahora notará que en lugar de solo un punto de control, ahora tiene dos puntos de control Entonces, básicamente, esta vez, los puntos de control en realidad no serán los mismos en el sentido de una curva cuádruple. Y aquí podemos tener un punto de control en algún lugar alrededor la mitad de esta curva y en algún lugar alrededor de la mitad. Entonces debería haber dos puntos de control presembly como si realmente contribuyeran a la básicamente la curva, y supongo que deberían ser como aquí y aquí para esta Si realmente he trabajado con Adobe Illustrator, sabrías que para crear una curva como esta, tienes un punto de control aquí el cual puedes arrastrar para mover esta parte y un punto de control aquí para arrastrar para mover este lado de la curva. Entonces básicamente, eso es lo que vamos a hacer ahora mismo. Podemos copiar todo esto y vamos a hacer de cerca algunos cambios aquí. Entonces este punto CG en realidad sería medio X menos la cantidad de la curva. Esto debe ser mínimo Y más la cantidad de la curva. Y ahora que hemos hecho tanto, debería ser media X, y debería ser más la cantidad de la curva. Y esta debe ser mínima Y menos la cantidad de la curva. Entonces básicamente llegando a nuestra forma, si podemos ver de cerca el primer punto sería medio de X menos la cantidad de la curva, y más en los términos Y significa que es a la baja. Entonces el punto está en alguna parte de aquí. segundo punto de control, está a la mitad de X más la cantidad de la curva, entonces a la mitad de X más la cantidad de la curva. Y en el eje Y, es menos el mínimo de Y, lo que significa que tenemos que ir un poco arriba porque estamos minusando del mínimo de Y, que ya estaba aquí, pero ahora estamos restando Entonces es más desde el eje X y menos desde el eje Y, y nos acostamos en algún lugar aquí aquí y aquí para la curva son los puntos de control. Simplemente repasemos rápidamente lo que hemos escrito aquí, y todo parece estar bien, y ahora podemos avanzar, y podemos cubrir rápidamente el resto de la forma. Ahora porque estaríamos siguiendo el mismo procedimiento. Ahora creamos una curva cuádruple, creamos una curva. Entonces creamos otra curva cuádruple, y ahora unimos estas curvas. Entonces notarías que está pasando más o menos lo mismo. Y yo trataría de uh, seguir explicando la otra parte del código también. Entonces debería ser curva superior derecha, digamos. Y aquí podemos tener ruta punto a cuádruple curva. Y esto sería un punto CG, obviamente punto CG X e Y, y debería ser destrozado, y debería ser máximo de X, obviamente, y debería ser destrozado mínimo de Y y más el radio de esquina, y luego debería haber un punto de control, punto CG Este punto CG debería tener valores X e Y, que serían rect máximo de X y mínimo de Y. Y repasemos rápidamente esto Y, sí, esto me parece bien. Entonces creamos el lado derecho. El lado derecho en realidad tendría path dot add Line ahora porque nos estamos uniendo estamos a disposición ahora y unimos esto con una línea, así que sumando una línea, y este sería un punto CG con valores X e Y. Entonces el valor X estaría destrozado de máximo de X sólo porque seguimos tendiendo a estar del lado derecho y naufragados de máximo de Y esta vez, pero menos el radio de la esquina porque como saben, vamos de este punto a este punto Estamos en el máximo de X. Estamos en el máximo de Y menos el radio de esquina. Entonces queda algo porque ahora necesitamos sumar una curva de este punto a este punto. Por eso nos detuvimos en ese punto, y ahora vamos a sumar D. Um, curva inferior derecha. Bien. Entonces, para la curva inferior derecha, debería ser punto de ruta en curva cuádruple, y este debería ser un punto CG. Sabes, ¿ qué tal si copia esto? Entonces se vuelve fácil para nosotros porque no necesitamos seguir escribiéndolo una y otra vez, punto directo algo. Por lo que debe ser máximo de X menos radio de esquina. Sí, porque para llegar a este punto, nuevamente, estamos en máximo de X menos el radio de esquina. De igual manera, lo que hicimos aquí arriba, puede ver, así que esto es lo que estamos haciendo, g máximo de X menos el radio de esquina, y solo debería ser máximo de Y. Ahora que hemos hecho esto tanto, el punto CG sería máximo de X y máximo de Y. En contraste con lo que acabamos de tener mínimo de X y mínimo de Y, para la parte inferior, uh, para la esquina superior izquierda, tuvimos mínimo de X y mínimo de Y. Para este punto de control curvilíneo es máximo de X y máximo de Y. Que hemos agregado este merch, debería haber la curva inferior esta curva invertida ahora estamos tratando Así que de manera similar a esto, podemos tener sumar curva. Copiamos esto. Lo pegamos aquí, pero definitivamente necesitamos hacer algunos cambios. Entonces debería ser mínimo de X ahora y mínimo de X más el radio de esquina, y debería tener un máximo de Y. Así que volviendo al punto, vamos de este lado a este lado. Y obviamente, si acabamos de escribir de este punto a mínimo de X, nos habría hecho llegar a este punto, pero queremos detenernos aquí porque queremos sumar porque queremos sumar una curva de aquí a aquí. Por eso estamos parando aquí. Por eso agregamos mínimo de X. Más algún radio de esquina, así que mantenlo aquí. Y para toms, estamos en el máximo de Y solamente, así que eso es lo que hemos agregado. Ahora volviendo a nuestros puntos de control, nuevamente estaría hecho de X. Esta vez, uno de ellos sería más cantidad de curva, uno de ellos sería menos cantidad curva. De igual manera para Y, esta vez solo sería alternante, y ahora no es mínimo. Es máximo porque estamos en la parte inferior de la forma. Así máximo de Y. Nuevamente, ahora que hemos hecho esto mucho, solo necesitamos sumar la esquina inferior izquierda, curva inferior izquierda, y luego podremos unir la forma finalmente con una línea de trazado, sumar línea, básicamente. Así podemos tener path dot, en quad Curve, copy paste. Ahora nos pide pocas cosas. Entonces esto debería ser mínimo de X ahora porque vamos aquí. Entonces llegamos a este punto, y debería ser Y menos algo, supongo. Entonces sí, debería ser máximo de Y. Menos el radio de esquina porque ahora ya estábamos en el máximo Y porque estamos en la parte más baja de la forma y luego restamos algo para subir y X sigue siendo Entonces aquí aterrizamos en este punto a partir de este punto, y ahora Swift agrega automáticamente un arco para nosotros. Pero antes de eso, necesita un uh punto de control. Entonces antes incluso de escribir, sabemos que el punto de control sería mínimo de X, y debería ser máximo de Y. Entonces eso es exactamente lo que es. Debería ser máximo de Y, debería ser mínimo de X. Ahora que hemos agregado esto, solo podemos agregar el lado izquierdo de la forma, y debería ser path Adline Vamos a copiar y pegarlo aquí, y el punto CG sería mínimo de X, y debería ser mínimo de Y más el radio de la esquina. Es exactamente esta cosa. El primer punto que planteamos, solo estamos sumando la línea a ese punto ahora. Entonces esto es todo. Ahora que hemos hecho esto, ¿ qué tal si realmente hacemos uso de nuestro rectángulo COVI Entonces entramos dentro de nuestra vista de perfil de usuario y no de usuario. Vamos a entrar en nuestra vista de perfil de usuario. Y aquí podemos agregar algunos cambios Ettack y yo estaba pensando es que lo que podemos hacer es como esta pantalla en sí, vamos a crear estas pilas, así que uno, dos, tres, cuatro, cinco, y para Explore, en realidad tendrías que trabajar con Entonces llegaremos a eso y también construiremos nuestra página Explorar, así que tiene mucho más sentido agregarla ahí. También podemos agregar forma de poste. Entonces es la misma forma. Se daría cuenta de que cómo podemos realmente usarlo. Entonces, ahora que tenemos este tanto trazado, comencemos simplemente agregando el rectángulo CoV Entonces debería ser rectángulo CoV, y vamos a agregarle un marco, y el marco incluiría 180 por 150, y la alineación no debería ser nada Y entonces tenemos un color de primer plano. El color de primer plano sería color con un color de interfaz de usuario. Rápidamente retomaré este video con las formas en la siguiente parte. 14. Uso de formas personalizadas en vistas: Bien, entonces el último video en realidad cerré de prisa. De hecho tenía algo de trabajo que hacer. Lo siento por eso. Pero continuemos con nuestro uso de la forma recién creada que hemos hecho. Entonces básicamente, aquí quería agregar el color azul, y luego le damos una superposición. Entonces estaba pensando que, ya sabes, en Instagram, tenemos esta cosa como seguidores y siguiendo así que en vez de solo escribir seguidores, prefiero escribir aquí, ver a tus seguidores. Entonces, esencialmente, este botón hace lo mismo. Más adelante en el curso, realidad le daríamos funcionalidad. Haremos llamadas API y todo para mostrar a las personas que te siguen. Entonces esto solo te dirigiría a alguna pantalla. Entonces envolveríamos esto dentro de un enlace de navegación. Y de esa manera podemos hacer que esto funcione. Entonces sí, esto se hace aquí. Y que tal si agregamos un espaciador aquí, espaciador y solo repetimos esta cosa. Si recuerdas por el ejemplo que estaba mostrando en el último video, básicamente, es lo mismo que vamos a hacer. Y lo que tenemos que hacer es, um, ¿tenemos un color FroundFeground de negro y debería ser C siguiente Perdón por eso. Y esto se hace mucho, así podemos eliminar éste, agregar un relleno de cuatro píxeles aquí. Podemos plegar esto usando la opción Comando flecha izquierda, copiar de nuevo todo esto, pegarlo de nuevo porque esta vez usaríamos amarillo máximo aquí con un color de primer plano de negro Y debería decir algo así como nuevo post. Entonces, básicamente, este botón nos permitirá ir a la pantalla Crear Post, y ahí podremos tener múltiples campos y todo para leyendas y todo Entonces pronto envolveré todos estos enlaces de navegación dentro, en realidad, porque eso haría que las cosas fueran más comprensibles para nosotros. Y hagamos lo de la codificación de colores. Cambiamos el código de color , el feed casero, y hagamos esto también negro. ¿Bien? Es de color negro. ¿Y qué más debemos hacer? Entonces ahora podemos agregar realmente navegación, enlace de navegación. Entonces debería haber etiqueta. Entonces, si te hubieras dado cuenta de que tenía este ícono en la parte superior para la configuración, estaba pensando qué tal nosotros en realidad No, aquí no. ¿Qué tal si eliminamos eso por completo y dirigimos a los usuarios a la vista de configuración usando este botón que estoy haciendo? Entonces este es un método para hacerlo. O sea, no es duro y rápido que también necesites hacer eso. Se podría pensar en ello. Al igual que, ¿dónde quieres poner la vista Configuración? Pero, sí, esto es lo que estoy haciendo. Y si acabo de copiar esto, y entonces podemos ir a ajustes. Y el color, vamos a darle blanco y obviamente para el color de fondo y todo, este es el rectángulo. Debería tener el color gris ahora. Si recuerdas, este gris es uno de los tres colores que agregamos recientemente. S ahí lo estoy usando. Y esto está hecho. ¿Qué tal si le damos a nuestro enlace de navegación un relleno de cuatro píxeles Y como no está dentro de pila NH, utilizamos marco con ancho máximo infinito y alineación no líder. Muy pronto, usaremos estas pestañas Explorar también, por lo que las cosas solo funcionarán bien. No entiendo muy bien que si la etiqueta está ahí, ¿qué tal si doblamos esto? Yo solo quería saber que vamos a doblar esto también. Entonces hasta esto. Entonces todo esto está dentro de una pila vertical, y todo esto es una pila z. Entonces posiblemente agregaría tu post tu encabezado de publicación aquí mismo justo debajo del enlace de navegación. Y podemos llamar a esto tu post. Y en vez de 150, vamos a darle la altura apenas 50. Debería tener amarillo máximo, y este debería ser negro. Um, ¿tenemos que hacer otra cosa? Podemos tener un marco con nuevamente Max como infinito, no en él, infinito, y luego alineación como líder. Y solo intentemos ejecutar nuestra aplicación ahora. Entonces, vamos a ver ¿cómo sale a ser nuestra forma? Porque yo mismo tampoco probé esto. Así que ojalá todo salga bien, y veamos una interfaz de usuario guapa, pero podría ser que salga mal. Entonces esperemos que no lo haga. Pero, bien. Por lo que debe ser el lanzamiento y los dedos cruzados. Esperemos. Posiblemente no va a ser realmente tan malo, aunque tenga problemas, ya sabes, la interfaz de usuario debería estar algo bien. Bien, bien. Entonces esto, sí, entiendo que parece un poco diferente, ya sabes. Así que hay muchas curvas pasando, y creo que, sí, necesita algo de trabajo. Pero no estoy muy seguro, como, dónde podríamos equivocarnos con el rectángulo. Pero podemos simplemente bien, vamos a abrir el rectángulo y ver por nosotros mismos. Uh, empezamos con un camino, mínimo de X, mínimo de Y más radio de esquina, luego agregamos una curva cuádruple, mínimo de X más radio de esquina. Lo siento por eso. Y luego el punto de control, mínimo de X, mínimo de Y, luego agregamos una curva. Eso es máximo de X menos radio de esquina. Y entonces es mínimo de Y, el punto de control es medio X menos cantidad de curva, y el ct es mínimo Y más cantidad de cobertura. Entonces es Mdx más monto de cobertura, y luego significa Y, más cantidad de curva, supongo No lo creo, tiene que ser menos la cantidad de la curva. Los puntos de control deben estar en el mismo lado y en el eje Y también. Bien, este es un error que encontramos. Solo sigamos adelante. Entonces tenemos camino en curva cuádruple. Usamos el máximo de X, y usamos el mínimo de Y más radio de esquina, entonces el punto de control es máximo de X y mínimo de Y, esto parece fino. Después vamos a la línea del anuncio, y después tenemos máximo estamos aquí, derecho, máximo de X, máximo de Y menos radio de esquina. Esto parece estar bien. Entonces tenemos de nuevo la curva ord. Entonces esta es la esquina inferior derecha, máximo de X menos radio de esquina, y máximo de Y. Entonces tenemos un punto de control de máximo de X y máximo de Y. Ahí está la curva de anuncio otra vez, que dice mínimo de X más radio de esquina y máximo de Y, y luego tenemos media x menos cantidad de curva. Debería ser menos curva cantidad debe estar por encima, supongo. ¿O debería ser la curva inferior? Supongo que es medio X más cantidad de cala y máximo de Y menos cantidad de cobertura. Y aquí también, debería ser menos y media X menos cantidad cala. Entonces tenemos otra curva cuádruple que dice mínimo de X, máximo de Y menos radio de esquina. Sé que te suena un poco confuso, pero como he hecho esta forma un par de veces, me estoy acostumbrando a los puntos. Así que no te importa eso. Bien, entonces esto es mínimo de X, el punto de control y máximo de Y. Y luego tenemos la línea de anuncio, que es mínimo de X y mínimo Y más radio de esquina. ¿Qué tal si intentamos ejecutar esto nuevo porque hicimos dos cambios menores, y siento que esos eran los puntos de control que en realidad estaban estropeando esto Pero vamos a ver qué pasa, y ojalá se vea mejor esta vez. Bien, entonces sí, bien por nosotros. Nuestras formas están bien construidas ahora. Si vamos aquí, nos aterrizan a la pantalla de configuración, que también tenemos que mejorar. Ahora mismo se ve un poco mal. Y esto está ahí. El edit también hace lo mismo. Entonces estaba hablando de esto solo que podemos o simplemente eliminar esto por completo. Y solo mantén el botón de configuración. Entonces, bien, así que nos va bien con nuestra interfaz de usuario, y la interfaz de usuario está establecida, por lo que en realidad podemos seguir adelante con, ya sabes, haciendo algunos cambios más. Entonces, como lo que podemos hacer es, como, podemos reorganizar nuestro proyecto si hay algunas cosas como andar por ahí Supongo que el formato de fecha y esa función privada para la visualización del perfil de usuario está dentro de la propia clase. Entonces eso es una cosa que podemos cambiar. Y entonces en realidad podemos comenzar con trabajar con post. Entonces el usuario creará una vista Crear publicación y los usuarios realmente pueden llegar a esa vista usando el botón de nueva publicación. Y cuando van ahí, básicamente tienen la opción de, ya sabes, básicamente tienen la opción de crear un post y su post aparecerá aquí abajo mismo. Es una vista de desplazamiento la convertirá en una vista de desplazamiento, y luego podremos movernos a los seguidores siguiendo parte del uh, curso. Posteriormente, cuando hayamos terminado con eso en sí, agregaremos las compras en App. Estamos usando el kit de Apple Store. No estamos usando ningún gato de ingresos ni algo más. Y luego seguiremos adelante con el lanzamiento de nuestra app al vuelo de prueba y todo. Te mostraré cómo puedes agregar capturas de pantalla y todo. Entonces espero que así te estés divirtiendo en este curso, y espero verte en el siguiente video. Muchas gracias. Y nuevamente, si tienes alguna duda, no dudes preguntarme cualquier cosa en los comentarios. Me encantaría ayudarte. Entonces sí, muchas gracias. 15. Diseño de la funcionalidad de publicación de subida: Entonces como hablabas en el último video, tendríamos que hacer algunos cambios menores en el proyecto para que podamos seguir adelante con la creación de post y subir al fuego cosas basadas Entonces, antes que nada, noté que aquí, cuando estamos agregando la primera curva de cordón a la curva superior izquierda, esta era en realidad Mini aunque no estoy muy segura de por qué mostraba la misma forma, aunque los puntos de coordenadas eran un poco diferentes. Entonces te sugeriría que agregues X a lo largo del eje X, uses los valores X, a lo largo del eje y, uses los valores Y. Aparte de eso, recuerdo que dentro de los modelos, tenemos usuario de base de datos y tenemos un formato de fecha aquí, que no pertenecen exactamente aquí. Entonces dentro de las extensiones, si haces Comando N, y luego seleccionas archivo Swift y escribe fecha más EXT. Así que hemos creado este archivo. Cortamos esta cosa de aquí. Entramos aquí y los datos de la página. Entonces esta es una de las cosas. Y si vas al usuario Vista de perfil, aquí tenemos esta función de fecha formateada. Podemos tachar esto. Podemos entrar en el modelo Min View. Main View Model también tiene una extensión. Entonces lo que podemos hacer es pegar esto aquí. Y ojalá la app construya bien. Así que solo revisarla una vez. Y no creo que así tengamos otros cambios. Bien, así que también, en realidad no estaba usando el control Git para todo el proyecto, pero sugeriría que podrías hacerlo con repositorio privado si solo estás usando la aplicación para tu propio trabajo personal o clases Si tienes que mostrarlo a la gente como una de tus aplicaciones de portafolio, te sugiero que también puedas tenerla como repositorio público Pero asegúrate de que cualquier información importante, cualquier clave o tipo si estás usando esas cosas. Esos están muy bien ocultos o no directamente dentro de tu paquete de aplicaciones porque eso puede causarte problemas. Entonces sí, entonces nuestra aplicación se construye bien y se ve todo bien. Entonces lo que podemos hacer es que puedo ver que aún la vista del perfil de usuario tiene algo de trabajo por hacer. Pero mientras tanto, podemos empezar por trabajar con post, y volveremos aquí y haremos algunos cambios más. este momento, estamos tratando de diseñar el esqueleto básico de toda la aplicación, ya sabes, para que todo esté en su lugar, luego podamos modificar la interfaz de usuario según nuestras preferencias personales. Entonces volviendo al curso, tenemos modelos, haremos Comando N, y esta vez escribiríamos post. Entonces básicamente, vamos a crear una struct, que sería post Obviamente sería del tipo codb porque para el uso de bases de datos, como hicimos aquí, tendríamos un tipo similar de funcionalidades, funciones dispuestas para post también Entonces es por eso que necesitamos tener esto conforme a codib. Y ¿cuáles son las pocas cosas que necesitamos agregar dentro de post? Entonces, cada publicación tendrá un valor de ID de publicación, por lo que podemos recuperar la publicación en consecuencia Entonces cada puesto debe tener identificación de propietario. Así que el ID de propietario también debe ser del tipo string. Y estas cosas no son opcionales porque obviamente son obligatorias para ser utilizadas. Debería haber una URL de imagen, que podría ser de la imagen de héroe que se muestra en la parte superior de la publicación Porque si piensas atrás, la idea de tener un post era que tuviera un carusel de cosas, y una de ellas era una imagen de héroe, una leyenda principal, luego los mejores cafés, los mejores lugares para visitar, y cosas a considerar, cosas así Entonces esta URL de imagen es para eso. También puede tener valor de URL de lista de reproducción. No estoy muy seguro de esto porque es posible que necesitemos algún tipo de integración con algún servicio de streaming como Apple Music o Spotify para mostrar realmente alguna buena interfaz de usuario al usuario. Podemos demostrar fácilmente que podemos usar fácilmente la funcionalidad de enlace en Swift UI y simplemente permitir que los usuarios abran pestañas personalizadas a través de nuestra aplicación. Eso es una cosa, pero podemos pensar más en esta característica en particular, y vamos a tener el nombre del lugar. También sería oct tipo string. Entonces tendríamos presupuesto, y el presupuesto también necesita ser una cadena en sí porque no es solo, ya sabes, no son solo los números, sino que podría tener el símbolo de moneda y luego algo así. Entonces es por eso que lo estoy guardando como una cuerda. Por razones de simplicidad, no necesitamos escribir ninguna otra extensión para poder usar esta. Debería haber calificaciones que serían un diccionario. De cadena a tipo de cadena. Y luego debería haber mejor imagen de café. Y también debería ser del tipo fuerza. Entonces seguimos adelante y tenemos el mejor caption de café. Entonces básicamente, junto a la imagen, tendrías listo el pie de foto. Entonces tendríamos mejor imagen de estancia, lo cual en realidad es bastante importante porque las estancias son una cosa en la que a la gente le cuesta encontrar. Así que la mejor leyenda de estancia también. Entonces, acompañando la imagen, debería haber algunos pensamientos que tuvieran sobre, ya sabes, todo el asunto, y debería haber cosas que llevar. Aparte de todas estas cosas, realmente no creo que esté dejando algo fuera. Pero si lo hacemos, en realidad podemos simplemente volver atrás e implementar todo el asunto. Al igual que podemos agregar más valores para destruir. Entonces esto es por ahora. Y entonces lo que podemos hacer es que yo estaba pensando, ya que tenemos esta funcionalidad de URL de imagen, ¿qué tal solo para un propósito de dry run? Realmente no implementamos la selección de imágenes para todas las imágenes, más bien podemos tener una imagen en su lugar por ahora, solo para verificar eso si las publicaciones se están haciendo de manera correcta. Entonces lo que podemos hacer es ir a nuestro modelo de vista, y dentro del modelo de vista, podemos plegarlo. Podemos abrir esto. Podemos venir aquí, y podemos escribir un comentario como post y luego podemos tener una propiedad publicada, y esta propiedad publicada habría seleccionado la imagen. Y sería del tipo UI image, opcional y otra propiedad publicada, que sería para determinar si el picker de imágenes está activo o no Así se presenta el recogedor de imágenes. Noté que en las versiones más recientes de Swift UI, tenemos un nuevo picker de imágenes, que yo sepa, pero siento que esto es suficiente por ahora Es decir, podemos más adelante, hacer más cosas, pero podemos mantenerlo así por ahora. ¿Y qué más tenemos que hacer? Entonces, permítanme pensar en cómo va a continuar esto. Tendríamos que tendríamos algún tipo de función para subir imagen, y debería haber una función para agregar post a un usuario. Entonces básicamente, básicamente, lo que sucede es que creamos un post a partir de todos los valores que tomamos de la estructura, luego subimos imágenes también, y luego vinculamos ese post con un usuario en particular, lo que estoy pensando Entonces lo que podemos hacer es que podemos comenzar con la función más requerida de TR, que sería subir imagen a la Vamos a plegar estas cosas. Entonces lo primero que escribiríamos es que subir imagen al almacenamiento de Firebase Entonces no Firestore, sino el de almacenamiento. Entonces esta cosa de aquí, vamos escribir una función para subir una imagen aquí, y Firestore se usaría para vincular esa publicación a ese usuario en particular como una sub colección Entonces entenderás cómo está funcionando todo esto. Ahora mismo, podemos plegar estas funciones para que podamos ver claramente, como, mm hay algunos espacios incómodos aquí. Así que solo quitándolos. Tenemos manejar error de tierra. Eso es lindo. Y tenemos showtst mensaje. Creo que el mensaje de showts también puede entrar aquí. Así que permítanme solo agregarlo aquí y ojalá no arroje ningún error. Y dado que las imágenes son una propiedad almacenada en matriz, entonces, ¿qué tal si realmente la agregamos en la parte superior? Entonces me parece bien de esta manera. Y lo que podemos hacer ahora es escribir un comando, publicar funcionalidad. Y ahora podemos comenzar por escribir la función, que llamaremos upload image. Usemos capital I Imagen para el almacenamiento. Y entonces podemos tomar una imagen con esta función. La imagen que vamos a subir es solo tomar una imagen a la vez. Esto sería un tros asíncrono y luego nos daría una URL Entonces la URL donde se está cargando la imagen , algo así. Entonces podemos tener referencia de almacenamiento, y solo pensando como, ¿cómo escribirías esta funcionalidad? Bien, entonces sabes una cosa que no estamos usando firestore para esto, ¿verdad Estamos usando almacenamiento para esto. Pero todas esas funcionalidades de almacenamiento contra incendios, estábamos usando la clase de almacenamiento contra incendios. Entonces resulta obvio que si no estás usando Firestore y estás usando almacenamiento, que es otra característica de Firebase, en realidad implementarías el almacenamiento, ¿cómo lo llamas Clase de almacenamiento, básicamente. Entonces debería ser, creo que necesitamos, bien, debería ser almacenamiento, almacenamiento basado en cinco. Hemos exportado esta cosa. Así que ahora vamos a escribir punto de almacenamiento, instancia de almacenamiento, la instancia de almacenamiento por defecto. Ahora podemos usar referencia en esto, que dice crea una referencia de almacenamiento inicializada en la raíz cinco ubicación de almacenamiento Base Entonces podemos agregar un camino hijo a esto. Entonces básicamente lo que sucede es que almacenamiento es una gran unidad de almacenamiento, pero ahora necesitas guardar ciertas cosas dentro de tu colección dentro de almacenamiento. No solo guardas todo de inmediato, debería haber una colección dentro del almacenamiento donde se almacenen tus cosas. Entonces para ese propósito, lo podemos hacer es agregar un camino hijo, y este camino hijo, puedes nombrar cualquier cosa. Pero para mí, solo le estoy nombrando imágenes y cuál sería el camino para esta imagen específica Entonces para ese propósito, la carpeta principal eran las imágenes, pero luego puedes agregar una nueva clase UUID, yo diría, lo que simplemente te ayudaría con, ya sabes, diferenciar diferentes Entonces básicamente, estamos creando esto de inmediato, y podemos convertirlo en una cadena UUID, supongo Y si hacemos esto, y también podemos agregar dot JPG. Entonces solo estoy pensando si esto debería funcionar o no. Entonces tenemos un UUID, y dice, no se puede devolver expresión de tipo almacenamiento para devolver tipo URL Obviamente, no se puede simplemente devolver esta cosa porque nos acaban de escribir esta línea, así que es asumiendo que estamos devolviendo esto. No, no lo estamos. Así que vamos a crear almacenamiento. Constante de referencia y asignarla al almacenamiento. Entonces, lo que estamos haciendo en esta línea específica es que estamos utilizando firebase, clase de almacenamiento, entonces estamos tomando una referencia de ella y estamos dando una ruta a la que se debe almacenar esta imagen específica Entonces, supongamos que estoy almacenando cinco imágenes diferentes de nuevo a sucede es que cada vez que usa un nuevo ID UU, que es un identificador único ID en forma de cadena, y lo agrega a la ruta. Entonces lo que pasa es que todas tienen una subcarpeta común de imágenes, pero entonces su ruta es diferente por este UUID Y por lo tanto, todas las imágenes son almacenadas y ninguna imagen anulada por ninguna otra Y obtenemos todas las imágenes dentro de una sub colección de imágenes. Ahora, llegando a la parte principal de esto. Entonces no podemos almacenar la imagen como una imagen de interfaz de usuario dentro de cinco bases, ¿verdad? Porque la imagen de la interfaz de usuario es del tipo Swift. Entonces, para que podamos almacenar la imagen, necesitaríamos convertirla en datos. Así que vamos a hacer Gard dejó Datos de imagen. Esta sería imagen haciendo referencia a esta imagen de arriba solamente, y podemos usar esta práctica función datos JPEG, y podemos tener la calidad de compresión al 80% Entonces solo estamos reduciendo levemente la calidad para que el tamaño de toda la imagen sea menor y podamos tirar un error NS y este error NS, podemos tener un dominio, y puede decir en datos de imagen válidos, y el código debería ser Menos uno. Entonces esto parece estar bien. Ahora lo que podemos hacer es crear una constante para metadatos ya que almacenar cualquier imagen en una postsolicitud requiere algunos metadatos propios, por lo que debe tener metadatos de almacenamiento. Y esta clase es, supongo, proporcionada por la propia Fibs Entonces lo creamos así. Metadatos. Caso te estás preguntando, ¿cómo sé qué cosa específicamente escribir aquí? Es sólo porque he visto sus videos de ayuda, que base tiene en su canal de YouTube también. Entonces se vuelve más fácil de esa manera, y eso es todo. Entonces imagen, y debería ser JPEG. Creo que en realidad es un paso importante para subir la imagen Recuerdo que una vez estaba trabajando no con firebase, sino con alguna base de datos que usaba los servicios de AWS, y estaba haciendo una solicitud de publicación para subir la imagen en términos de datos multiplataforma, y faltaban metadatos en las imágenes, y constantemente me estaba arrojando error Entonces, en realidad, los metadatos son muy importantes para subir imágenes en línea a sus bases Ahora vendríamos a subir los datos de forma asíncrona, por todo el motivo agregamos Aync Entonces escribiremos try esperar. Y creo que tenemos esto. Bien, entonces tenemos este EPI del propio Swift, que dice con continuación de lanzamiento comprobado Entonces dice que invoca el pasado recinto con una continuación comprobada para la tarea actual Por lo que no solo lo comprueba una vez, sino que sigue haciendo un seguimiento del estado de subida para que pueda volver a nosotros con el estado adecuado para la cosa. Entonces ahora lo que podemos hacer es que podemos tener tres valores aquí continuación. No tres valores, en realidad solo un valor de continuación, y esto se verificaría continuación, que sería si recuerdas, tenemos un tipo de resultado para nuestras llamadas a la API. De igual manera, tendríamos un tipo de resultado de void y un tipo de error de error, dice N. Entonces lo que podemos hacer es que ya podemos usar nuestra referencia de almacenamiento. Poner funcionalidad de datos, y ahora vamos a tener datos de imagen que usamos en el Gardlet que solo verificamos que está ahí, luego pide algunos metadatos también Entonces agregamos los metadatos. Ahora abrimos otro cierre. Ahí, lo que hacemos es que verifiquemos los metadatos. Podemos simplemente crear una constante aquí y podemos crear un error aquí. Y ahora lo que hacemos es si vamos error, solo estamos comprobando si el error está ahí o no. Si dejar error es error, lo que podemos hacer es ahora podemos usar la continuación y podemos retomar con error de lanzamiento. O si no hay error, lo que podemos hacer es que podamos retomar con una continuación y podamos tener regresando, evitar. Entonces void se puede escribir así también. Entonces esto está ahí. Nosotros tenemos esto, tenemos esto. ¿Qué tal si desplegamos esto? Constantemente nos está arrojando error. Así que ahora solo necesitamos obtener la URL que necesitamos devolver. Entonces vamos a hacer regreso, tratar de esperar. Referencia de almacenamiento, URL de descarga de punto. Entonces, ¿cuál es la definición de esto? Dice, recupera de forma asincrónica una URL de descarga de larga duración con un Esto se puede usar para compartir el archivo con otros, pero puede ser revocado por el desarrollador en las cinco Consola Base Entonces esta es la URL de descarga específicamente, y necesitábamos esto así que lo que esta función en pocas palabras está haciendo es que toma una imagen como argumento Se trata de una imagen UI de tipo T que podemos pasar a través de una supuesta pantalla rápida. Usamos el picker de imagen, seleccionamos una imagen. Nos da una imagen de interfaz de usuario. Se lo pasamos a esta función. Lo que hace esta función es que primero crea una ruta de referencia de almacenamiento única para esa imagen. Entonces trata de recuperar los datos de la imagen. En caso de que no lo haga, arroja un error. Caso lo hace, está todo bien y bien. Creamos metadatos a partir de la instancia de metadatos de almacenamiento. Así que muy básico unos metadatos recién creados para la imagen. Entonces usamos esto con la API de continuación de lanzamiento de cheques de Swift. Y básicamente lo que dice verificar es que si no hay eddors mientras el almacenamiento hace referencia, poniendo los datos, subiendo la imagen, y esto es todo, Ahora que hemos hecho tanto, nuestra principal funcionalidad de subir imagen al almacenamiento está Entonces ahora lo que tenemos que hacer es que necesitamos escribir esa función, que vincula nuestro bien. Para que podamos escribir como imagen subiendo al almacenamiento. Y ahora podemos escribir otro comentario el cual dirá enlace post al dueño. Propietario, lo que significa básicamente el usuario que lo subió. Entonces aquí, lo que escribiríamos es que crearemos una función y publicaremos al usuario. Creo que podemos crearlo como una función privada. Así que agrega post al usuario, ¿qué agregará post a user take? Entonces, básicamente, necesita obviamente algún tipo de identificación del lado del propietario para que pueda vincular esa publicación, y luego necesitamos publicarla por sí misma. Porque qué publicación enlazarás a un usuario si no tienes una publicación. Entonces ahí podemos escribir ID de usuario, que sería del tipo string, y luego podemos tener un tipo post, que sería del tipo post que es nuestra estructura recién creada. Entonces podemos tener throse asíncrono porque de nuevo, sería una función asíncrona Ahora solo podemos crear un DV como hicimos para las funcionalidades de Firestore Entonces sería firestore punto Firestore. Esto está hecho. Entonces creamos una referencia de post, y lo que hacemos es que nos gotb colección de puntos, y aquí colección, íbamos a ir a los usuarios Y dentro de los usuarios, seleccionaremos los específicos Ups. Seleccionaremos el documento específico con el ID de usuario. Entonces ahora estamos haciendo referencia a ese usuario específico. Si vamos a la base de datos FistOE, lo que hemos hecho hasta ahora es que vamos a la base de datos de Fistoe Y está tardando unos segundos en cargarse. Ojalá se cargue rápido. Y básicamente, lo que hicimos es que usamos instancia de base de datos de FI Store. Entonces hay colecciones aquí. Como dije antes también, post en realidad sería una sub colección al tipo de usuario. Entonces eso es lo que estamos haciendo. Ya ves que esto está aquí. Entonces dentro de este usuario, si hago un comienzo una cosa de colección, esta colección en realidad se convertiría en una sub colección para el usuario, este usuario en particular. Eso es lo que está pasando. haciendo referencia a la colección del usuario Dentro de la colección del usuario, estamos recuperando un documento en particular con el ID de usuario que estamos pasando Ahora estamos aquí dentro. Así que volvamos aquí. Ahora que estamos aquí dentro con el ID de usuario, recuperamos la colección de publicaciones, que realmente no existe por ahora porque no hay publicaciones que buscar, obviamente Entonces lo hacemos es que busquemos el documento con el postdt D. Así que esta funcionalidad es realmente similar a la que teníamos para el usuario de la base de datos también Ese usuario de base de datos se puede recuperar con su propio ID que está dentro de su estructura y también la base de fuego le asigna algún ID, por lo que este ID y este ID Entonces esto está hecho. Ahora tenemos una referencia de post. Entonces lo que podemos hacer es que aquí hayamos utilizado una estructura de postes. Para base de datos, el Firestore, no entiende nuestra estructura, correcto, porque es un tipo de datos personalizado para nosotros. Estructuras que utilizamos para crear tipos de datos personalizados para nuestro propio uso dentro de nuestra aplicación Swift. Entonces, para que Firebase entienda esto, necesitamos crearlo de nuevo a un diccionario Entonces eso es lo que vamos a hacer aquí. Creamos datos de post. Los datos de publicación usarían try firestore dot, Firestore. Y luego codificamos el entonces podemos, así que no usamos Firestore Utilizamos codificador y clase encoder. Entonces codificamos el post que estamos obteniendo en esta función como argumento. Y ahora que hemos codificado, lo que podemos hacer es escribir try allow, post reference, y podemos tener datos establecidos, y deberían ser post data. Entonces, para la referencia de publicación para esta ruta, estamos configurando los datos, estos datos de publicación. Estos datos de publicación no el post que estás obteniendo del argumento. ¿Cómo vamos a crear este post ahora? Así que ahora volvemos a nuestra funcionalidad que necesitamos. Por crear un post en sí mismo. Entonces sabemos cómo subir una imagen, y ahora podemos nombrar esta función, y esta sería una función pública porque la llamaremos directamente desde nuestro punto de vista, supuestamente, o de hecho podemos envolverla dentro de otra función más adelante. Entonces lo llamaremos subir imagen y crear post. O lo que puedes hacer es en realidad simplemente llamarlo crear publicación también. Estoy tratando de ser un poco más descriptivo para poder entender lo que está pasando dentro de esta función. Entonces, obviamente, tomamos un ID de usuario porque podríamos necesitarlo para pasar con, ya sabes, para esta función, vamos a llamar al post al usuario realmente dentro de aquí. Entonces esto es Asincrónico. Abrimos esto. Ahora lo que hacemos es que primero comprobemos por Gard, vamos imagen seleccionada. La imagen seleccionada no es más la propiedad que acabamos de definir anteriormente en nuestro modelo de vista. Y si es nulo o especie, podemos simplemente regresar de aquí Y ahora podemos seguir adelante. Vamos a abrir un doblock y vamos a abrir un bloque de caché también Entonces van a ir muchas cosas dentro de este bloque do. Lo primero sería subir la imagen y obtener la URL de descarga Esto ya lo hemos completado en realidad. Así que sólo vamos a usar esta función de subir imagen a almacenamiento. Entonces decimos que la URL de la imagen es igual a probar, esperar, subir imagen al almacenamiento, y toma una imagen. Podemos pasar en la imagen seleccionada, que también es del tipo UR image. Esto está hecho. Ahora podemos avanzar en la creación del objeto post. Con los valores y la URL de la imagen, básicamente. Así que ahora podemos crear un post a partir de nuestro post truck y post boom. Así que hagámoslo un poco agradable. Así que podemos simplemente introducir estos valores aquí y podemos tener ya sabes, podemos rápidamente, hacer esto. Y esto está ahí. Así que ahora agregaremos rápidamente algunos valores aleatorios por ahora. Entonces, para el ID de publicación, podemos tener una cadena UUID UUID porque es del tipo string porque es del tipo Para el ID de propietario, sería el ID de usuario. Para la URL de la imagen, en realidad saldría a ser mGurl dot Absolute string nuevamente, porque es del tipo string, no Para la URL de la lista de reproducción, podemos tener cualquier cosa HDTPS plays.com. Para el topónimo, podemos tener algo así como, supongamos París, y para el presupuesto, podemos tener algunos como $5,000 o algo así, solo valores aleatorios por ahora Y vamos a darle algunas calificaciones. Entonces esto sería como, ya sabes, podemos tener para calificaciones, podemos tener vida nocturna. Uh, NOCHE, vida nocturna, y vamos a darle una calificación como 4.5 o algo así, y luego podemos agregar más valores aquí. Así que podemos agregar, um, seguridad, y solo estoy dando valores aleatorios aquí, así que vamos a dar cuatro en todos ellos. Así que solo estamos revisando la funcionalidad. ¿Qué todas las cosas necesitamos? Podemos tener limpieza o algo así. Y, um esto también sería como cuatro, um, aquí podemos tener funcionalidad de transporte. Entonces transporte, podríamos escribir también. Podemos escribir transporte también. Entonces 43 aquí. Ahora que ya hemos hecho tanto, no creo que así sea que necesitemos más valores. La mejor imagen de café puede, de nuevo, ser algunos HDDPS Hagamos random.com. Y para la mejor leyenda de Cafe, podría ser el mejor café aquí. Para el mejor día, podemos tener HTPS dash random again.com. El mejor subtítulo del día sería mejor de todos, algo, algo. Debe llevar las cosas sería, digamos, un paraguas. Necesitas unas chamarras, necesitas unas gafas de sol. Um si, eso es todo. Entonces, ahora que hemos hecho tanto, acabamos de crear una publicación ficticia para que probemos nuestra funcionalidad de carga de publicaciones Ahora que podemos hacer es que subir el post a Firestore. Así que hemos utilizado el mecanismo de almacenamiento para simplemente subir las imágenes Lista de los valores son básicamente cadenas y solo, así podemos subirlos directamente a Fire Store, y eso es lo que vamos a hacer aquí ahora. Así que vamos a hacer probar en post al usuario. Esta funcionalidad la acabamos de escribir para el ID de usuario, pasaremos en el ID de usuario, y luego para el post, pasamos en el post que acabamos de crear aquí. Entonces esto está ahí. Y en el comunicado del CAT, podemos imprimir como CT no está funcionando. Posteriormente podemos agregar cuadro de error también para que los usuarios sepan que su publicación no tuvo éxito Entonces, por ahora, escribamos error al subir la imagen. O hacer el post porque es muy poco probable que esta cosa falle. Creo que lo único que puede fallar es que esta funcionalidad la cual hemos escrito porque aquí sólo estamos creando una estructura. Entonces, de nuevo, esto también podría fallar, pero esto es más o menos lo mismo que hemos estado haciendo con el usuario de la base de datos y todo. Así que no dudo que fracasara, pero bien. Ahora lo que hacemos es ese error en subir imagen o hacer el post, y podemos tener error punto descripción localizada aquí Entonces ahora que hemos escrito todas estas funciones, lo que podemos hacer ahora es que podamos seguir creando un picker de imágenes para nuestra vista, y luego integraríamos ese picker de imágenes dentro de nuestra vista create post Entonces necesitamos crear otra vista ficticio por ahora con solo botón o clases, que usaría el picker de imágenes, cargaría una imagen y activaría toda una funcionalidad de crear y subir Entonces esto lo haríamos en el siguiente video. Así que gracias por ver esto. Nuevamente, si tienes alguna duda, podrías simplemente publicarlas en los comentarios, y con mucho gusto te ayudaría. Espero que estés disfrutando del curso. Entonces espero verte en el siguiente video. Adiós. 16. Selector de imágenes personalizado y prueba la funcionalidad de publicación de carga: Bien, entonces en el último video, realidad escribimos funciones para subir post a nuestra base de datos Firestore para que puedan vincularse con el usuario Entonces, lo que haríamos ahora para probar todas estas tres funciones que hemos escrito, solo vamos a crear un picker de imágenes personalizado Y para ello, vamos a utilizar controlador UIV representable Entonces ese es uno de los déjame simplemente crear rápidamente el archivo. Así que el recogedor de imágenes personalizado. Entonces ese es uno de los métodos más antiguos para poder usar un picker de imágenes dentro de Swift DUI Creo que recientemente, no muy recientemente, pero como el año pasado o tal vez antes de eso, lanzaron esta nueva API que podrías usar para hacer lo mismo. Pero creo que si usamos UIVCTller representable, entonces tendríamos una mejor comprensión de cómo funciona UIKit también porque, como, en tu tarea diaria o incluso si estás trabajando en alguna parte, en realidad también necesitarías trabajar realidad también necesitarías Entonces para ese propósito, en realidad vamos a usar UI representable Así que solo importemos UIC también. Podemos quitar fundación, y ahí está. Creamos una estructura, que sería el picker de imágenes, que se ajustaría al tipo UI controller representable Entonces lo que pasa es que en cuanto me conforma a este tipo, compilador Swift me da un error, y auto agrega las funciones requeridas o el Let me just rapido, no puede encontrar type in scope No lo creo, ni siquiera necesitamos esto. Lo que podríamos hacer es que podemos hacer así que esta es una de las funciones que necesitamos. Y si todavía no nos conformamos, creo que necesitaríamos actualizar la función del controlador UIV también Entonces sí, estas son las dos funciones que requiere cualquier estructura que se ajuste a este protocolo, básicamente Entonces, antes que nada, agreguemos una propiedad vinculante. Entonces una propiedad de enlace es para la imagen que va a ser seleccionada. Y si recuerdas, ya hemos agregado una propiedad de imagen propiedad publicada dentro de nuestro modelo de vista. Entonces eso es lo que vamos a utilizar. Y aquí necesitamos agregar un valor de disfrute. Entonces, básicamente, esto sería para el modo de presentación del picker de imágenes Entonces como, ¿se presenta o no se presenta? Tenemos que descartarlo también. Entonces eso es lo que estamos haciendo aquí. Y vamos a estar usando esta misma línea exactamente en muchos lugares en realidad, porque necesitamos descartar algunas opiniones por su cuenta Entonces ahí está. Entonces sí, acabamos de hacer dos funciones. Y aparte de eso, ¿qué más necesitas? Entonces, básicamente, podemos trabajar con coordinadores. Así que creamos un coordinador de clase dentro de una función solamente, y el coordinador vamos a conformarlo a NS Object. Ahora tenemos delegado del controlador de navegación de la interfaz de usuario aquí, y debería tener delegado del controlador del picker de la interfaz Entonces aquí hay dos cosas. Creamos un padre, y sería del tipo picker de imagen Podemos crear un inicializador aquí, básicamente, y no hay necesidad de pasarlo como argumento, así podemos tener un guión bajo Entonces esto ¿hay todavía me está dando algún error? Yo coordinador, se necesita que haga funcionar coordinador. Y dentro de un coordinador make, en realidad tendríamos nuestra clase de coordinador y pasaríamos en auto porque estamos dentro de la propia estructura . Entonces ahí vamos. Y vamos a agregarlo aquí. ¿Qué tal si sacamos esta clase de aquí? ¿Posiblemente funcionará o tendrá algunos problemas? Entonces, permítanme pensar rápidamente en cómo podemos pensar que esto funcionaría bien, para que podamos mantener a la clase fuera de esta estructura. No hay necesidad de guardarlo dentro. Así que he creado un inicializador, y luego vamos a escribir la función para el final picking media con info Entonces existe esta función, la cual es definida por la propia biblioteca. Y aquí comprobaríamos si la imagen que tenemos, si esa imagen es igual a info punto Imagen Editada. Aunque sea una imagen editada, si es del tipo imagen, estamos bien para ir. Y lo que hacemos es que usemos a nuestro padre, cambiamos imagen recién seleccionada por imagen. Y una cosa más que tenemos que hacer es que revisaríamos esto para nuestra imagen original también. Entonces esto está ahí. Y una vez que hagamos todo esto, podemos simplemente despedir al coordinador Entonces, presentación de punto padre, modo de presentación, valor de envoltura de puntos, descarte de puntos Entonces sí, este es el ok, dice que es inaccesible debido al nivel de protección privada Una cosa que podemos hacer es que podemos sacar privado de aquí, o bien mover al coordinador, todo el coordinador dentro de la propia estructura porque esto atiende únicamente a las necesidades de nuestra estructura. Porque más adelante en el curso, incluso si queremos agregar el patrón de navegación coordinado en nuestra aplicación, todos modos tendríamos que crear una nueva clase de coordinador Entonces eso no funcionaría con este coordinador porque es específicamente para solo picker de imágenes Entonces esta es una función. Y esta función es usar el picker de imágenes y obtener una imagen Pero, ¿y si el usuario cancela? Entonces creo que Did Cancel también es una función definida en la propia biblioteca Swift. Y nuevamente, hacemos modo de presentación, valor de punto envuelto, punto descartado. Entonces esto está ahí. Entonces básicamente, si cancelamos el picker de imagen, la vista de modelo que aparecerá por el picker de imagen se descartará a sí misma, y luego tenemos estas dos funciones que necesitamos escribir aquí Así que básicamente para la actualización, realmente no necesitamos hacerlo porque no hay ida y vuelta entre la estructura y la clase UIKit Y dentro del controlador make UI view, vamos a definir un picker Entonces este picker sería del tipo, UI image picker controller Inicialicemos la clase. Tendríamos un piquete Deli gate, que sería coordinador de punto de contexto Y como tenemos una clase de coordinador aquí, vamos a solo opción hacer clic en Contexto para saber qué es? Bien, entonces Context es una clase personalizada de clase dentro de la biblioteca Swift. Y si lo abres, no nos da mucha información en cuanto a lo que hace, pero, como, es un alias de tipo básicamente para UI view controller contexto representable Entonces ahí está. ¿Qué tal nosotros? No lo creo, necesitamos devolver algún controlador de vista de interfaz de usuario, sino que devolveremos el controlador del picker de imagen de la interfaz de usuario, y podemos ser específicos con nuestro tipo de retorno Y en el picker, sí permitimos la edición a true, y luego podemos devolver nuestro picker Entonces, básicamente, esto está ahí, y esta es una estructura muy pequeña en sí misma. Al igual que, solo tiene propiedad de imagen, que es del tipo binding. Entonces básicamente, mantiene conserva el estado de esa imagen que hemos seleccionado, y luego tenemos el modo de presentación para descartarse Estas eran las funciones requeridas que necesitaba agregar, y las he agregado. Y sí, estamos haciendo referencia nuestro coordinador a través de dentro esta función make UI view controller Entonces, ¿qué tal, esto es todo lo que normalmente ves en todos esos, uh Videos que te guían a través del trabajo con el recolector de imágenes y Swift DUI Entonces esta es esa misma funcionalidad. ¿Qué tal si probamos esta cosa ahora? Así que finalmente, podemos ir a nuestra vista de perfil de usuario. ¿Qué tal si ejecuto la aplicación en segundo plano mientras trabajo aquí Entonces lo que estaba pensando es que podríamos estar teniendo nuevos puestos. Sí, así que tenemos este nuevo botón de post. Entonces estaba pensando que tal si agregamos un iff vamos aquí, dejo que la imagen seleccionada sea igual a viewmdel punto Entonces es la imagen seleccionada tiene algún valor porque creo que la hemos definido como opcional, por lo que se inicializa con un valor Nil. Entonces esto está ahí. Entonces si vamos a la imagen seleccionada es igual a viewmdel punto seleccionado Imagen, lo que podemos hacer es mostrar esa imagen en nuestra pantalla, y puedes hacerlo usando Bien, así que nuestra app está construyendo bien que puedo Entonces, ¿qué tal nosotros? Quiero decir, simplemente funcionó así que está bien. Creo que solo construiría. Vamos a cerrarlo por ahora. Tenemos un inicializador de imagen UI para la clase de imagen en Swift UI Así que ahora podemos pasar en nuestra imagen seleccionada. Podemos darle algunas propiedades como redimensionable. Sí, entonces podemos tener escala para encajar, y luego podríamos darle un marco, que sería de 200 por 200 y para la alineación, solo podemos quitarlo. Entonces esto está ahí, pero qué botón controlará el valor de emdelt seleccionado Imagen Que usaríamos este rectángulo COVID, en realidad. Entonces lo que podemos hacer es que podamos tener botón creado aquí, y este botón tendría una acción y una etiqueta, entonces la etiqueta va aquí. Y dentro de la etiqueta, podemos agregar esto. Creo que podemos quitar el espacio de aquí. Y dentro del botón, creo que podemos tener vista modelo punto es picker de imagen presentado para ser verdadero y en el fondo en nuestra opinión o ni siquiera en el fondo Lo que podemos hacer aquí es que podemos adjuntar una hoja aquí, básicamente, y esta hoja tendría se presenta y el valor del contenido. Así se presenta será controlado por viewmodel punto se presenta Y para el contenido, lo que podemos hacer es que podamos llamar a nuestro camión personalizado que creamos recogedor de imágenes La imagen seleccionada volverá a ser vinculante, por lo que podemos usar nuestra propiedad publicada para la imagen seleccionada. Esto está ahí. Entonces ojalá esto funcione ahora. Así que vamos a ver y tener mi base de fuego abierta aquí. Entonces lo que va a pasar es que en el momento en que haga clic en New Post y uh, el momento en que haga clic en New Post, sí, aparecería con el picker de imágenes y me pediría seleccionar una imagen, pero todavía no estamos llamando a esas funciones para subir imagen a la base de datos de Firestore Entonces para ese propósito, lo que podemos hacer ahora es que en el segundo botón, temporalmente, podamos para feed casero, solo para fines de prueba, podemos agregar un botón, eso sería así Tenemos etiqueta, la abrimos así. Cortamos esto, lo pegamos aquí, dentro del botón, en realidad tendríamos que ir una vez dentro nuestro modelo de vista principal y ver qué nombre de función era. Así que fue agregar post al usuario estaba ahí, pero creo que se está llamando desde dentro de. Entonces esta es la función principal, básicamente, subir imagen y crear post. Y esto tiene que llamarse desde, ya sabes, desde nuestro punto de vista, en realidad, porque lo que hace es que internamente llama subir imagen al almacenamiento también. Y luego llama al correo también al usuario. Entonces está llamando a ambas funciones desde dentro de ella. Así podemos marcar esto como privado también. Y lo que podemos hacer es que tratarse de una función asíncrona, volvamos a nuestra opinión Creamos una tarea, envoltorio, y luego dentro, escribimos esperar, y luego podemos tener view model dot, subir imagen, y crear post, y es solo pedirnos un ID de usuario. Entonces lo que podemos hacer es que podamos usar viewmdel punto base de datos usuario punto ID de usuario Así que el usuario de base de datos es ese valor publicado que estamos llenando dentro de nuestro registro iniciar sesión llamada, si pudieras ver. Entonces esto está ahí. Que DB sea igual a esto y a aquello. Entonces sí, de nuevo, esto es solo una variable. Eso quiere decir que si se inicia la app y luego se sale, lo que quiero decir es que no retiene el derecho de valor Entonces esta no es en realidad la forma más óptima de resolverlo. Pero lo que podemos hacer aquí es que creo que podemos usar esta propiedad. Solo quería entrar el núcleo de la aplicación y revisar esta. Así que básicamente, tenemos un valor autenticado es autenticado, es un booleano, ¿ Y, bien, entonces tenemos la base de fuego del aula de auth. Entonces estaba pensando, ¿ qué tal si usamos esto? Y lo que podemos hacer aquí es que dentro nuestro podamos tener al usuario actual. Bien, no viene porque tenemos que importar base de fuego. Espero que así funcione ahora. Y puedes tener usuario curt usuario final dot ID, ¿tiene un ID o algo así? No lo creo que tenga una identificación. Vamos a mandar clic aquí y ver qué tiene todo. Entonces tipos de usuario, tipos de usuario, información de usuario. User Info tiene un UID. Así que volviendo aquí, tenemos que pasar en UID Dice que no se puede encontrar el alcance de Atenas. Bien. Entonces vayamos a nuestro modelo de vista principal y veamos qué importaciones tenemos? Creo que también necesitamos base de fuego Auth. Así que volvamos a nuestra vista de perfil de usuario. Lo que podemos hacer es escribir Auth aquí y ojalá podamos pasar en el usuario actual como un valor opcional, y luego nos da esto Así podemos pasar aquí Nill o una cadena vacía. O bien funciona. Entonces sí, esto está ahí. Entonces ojalá, cuando ahora usemos este botón, creo que deberíamos funcionar bien, pero vamos a comprobarlo por nosotros mismos ahora. Volviendo a la app y tengo la base de fuego de mi lado para verificar. Ojalá la clase OT recoja al usuario actual, y oh, bien. Apenas por un segundo, noté que nuestro punto de vista modelo Fetch datos de usuario también puebla nuestro usuario de base Entonces nuestro usuario de base de datos no solo se está configurando dentro de, um, la función de registro, sino también la función de datos de usuario fet Entonces, podemos simplificarlo aún más ahora. Así que en realidad no necesitamos usar la clase Auth aquí. Podemos eliminar estas importaciones. Lo que podemos hacer es volver aquí. Dónde está nuestro error. Y aquí, lo que podemos hacer es que podemos usar view model we have model dot database user dot user ID, y es una cadena opcional, así que podemos darle esto. Pero lo más posible, quiero decir, ni siquiera lo más posible, es cierto que tendría un valor. Entonces no debemos preocuparnos por eso, pero en todo caso, no debemos forzar y envolver. Así que vamos a ejecutar esto de nuevo, y sí, esto debería funcionar. Ahora sólo tenemos que revisar esta cosa. Y bien. Entonces por lo que recuerdo, desde New Post, podemos lanzar un picker de imágenes personalizado Para el seleccionador de imágenes personalizado, si recuerdas, agregamos estas imágenes, pero no necesitamos trabajar con ellas. Podemos seleccionar esta imagen. Nos está dando la opción de edición. No necesitamos editar nada. Hacemos clic en Elegir. Y luego vemos la imagen según nuestro código, que si hay una imagen, muestras con un marco de 200 por 200, así que esta está ahí y se escala para que quepa. Ahora hacemos clic en Inicio feed. Entonces ojalá, hagamos el Comando K aquí para crear un registro de consola. Haga clic en el feed casero, debería funcionar muy probablemente. Entonces veremos que dice que la operación no se pudo completar en una estación siempre que no se admita, ya estaba funcionando. Sólo vamos a comprobar que la función que hemos escrito. ¿Tenemos una publicación de la creación, tenemos una impresión exitosa Bien, así que ni siquiera tenemos una impresión exitosa, pero no obtuvimos un error al subir la imagen o hacer publicaciones Entonces, ¿qué tal si actualizo esto ahora y verifico si algo se subió a Firebase Entonces solo están esperando. Esta es la revelación final, y ojalá esto se esté cargando, así que hay algo ahí. Bien. Entonces dentro de nuestro documento de usuario, ahora tenemos una sub colección, que es post. Si vamos dentro de post, tiene un documento, y este documento tiene todos esos valores que habíamos agregado. Si pudieras ver que codificamos duro estos valores aquí. 4.54 y luego el mejor café aquí y todos. Entonces estos vienen llegando a nuestra imagen, acabamos de tener una imagen de muestra siendo utilizada. ¿Qué tal si copiamos esta URL y vemos qué hace? Entonces si entro esta URL, me muestran esta imagen, y esta es la imagen que habíamos seleccionado, como puedes ver. Entonces nuestra funcionalidad está funcionando bien. Y como está funcionando bien ahora, lo que podemos hacer es que podamos seguir adelante con la creación una vista específica para crear una publicación de carga, y eso sucedería en el evento de clic de navegación para nuestro bien Mi app parece estar, um, atascada, y eso es raro. Entonces voy a investigar eso. ¿Por qué está pasando eso? Y, si, entonces lo que podemos hacer es que podamos investigar este tema de que nuestra app se quede atascada. Y aparte de eso, nuestra funcionalidad está funcionando perfectamente bien, así que eso es bueno para nosotros. Um, Bien, así que espero ver en el siguiente video donde seguiríamos haciendo ese crear vista de Post y uh, permitiendo a los usuarios tener múltiples opciones para seleccionar imágenes y todo, y también las leyendas y todo, y luego podremos tener algunas mejoras y todo Entonces, sí, espero verte en el siguiente video. 17. Corrección de errores de UI y optimización: Entonces, si recuerdas en el último video, estábamos teniendo un problema con la vista. Entonces básicamente lo que estaba pasando es que si hago clic en New Post y selecciono una imagen y la elijo, básicamente apesta la vista. Entonces ya no es funcional. Aunque puede hacer clic en Inicio feed y este botón está funcionando, pero la interfaz de usuario está todo en mal estado y luego no va de ida y vuelta Entonces, básicamente, lo que está pasando es que la vista por sí sola, las restricciones están siendo violadas porque estamos usando una pila vertical dentro de nuestra vista de perfil de usuario, solo puede acomodar un espacio limitado, ¿de acuerdo? Entonces no podemos simplemente seguir agregando vistas y vistas porque como estamos agregando un picker de imagen, la imagen aquí dentro de una vista, en realidad empuja los otros elementos hacia arriba y hacia abajo Entonces por eso está creando ese tema. Entonces una cosa que podemos hacer es que podemos detener la app por ahora. Podemos agregar una vista de desplazamiento aquí. Y aquí podemos agregar un espaciador, y el espaciador tendría un marco con una altura de como 100 píxeles o algo así, 100 puntos. Entonces, si acabo de ejecutar la aplicación ahora, ojalá esto solucione el problema, y la interfaz de usuario también nos parece bien. Entonces sí, esto es desplazable. Da clic en la nueva publicación, y de todos modos, tuvimos que hacer que esa vista se pueda desplazar porque en el futuro, realidad necesitaríamos agregar post Para que los usuarios puedan desplazarse hacia abajo y ver su propia publicación. Entonces sí, esto está funcionando bien ahora. Entonces esto fue una cosa, y podemos cerrar la aplicación por ahora. Ahora, solo rápidamente quería agregar un nuevo color que de nuevo, me enteré de este sitio web de diseño. Entonces básicamente, podemos simplemente copiar todo esto, y es un tono de azul, entonces sería azul claro Y conocerás por qué estamos agregando esto y lo usaríamos pronto. Para el código hexadecimal, sería cruce cero 81 d0e9. Entonces esto está ahí. Ahora lo que hacemos es que vayamos dentro nuestra vista terrestre porque sentí que aquí hay algún alcance de mejora. Entonces, lo que estaba notando es que para nuestros campos de texto, en realidad estamos repitiendo algunas de estas cosas una y otra vez Entonces lo que podemos hacer aquí es que podamos agregar un modificador personalizado, básicamente. Entonces esta cosa que ves es en realidad un modificador en SFDUI Así que de manera similar, podemos juntar pocas cosas y agregarlas dentro de un modificador para que podamos usar ese modificador, y no necesitamos repetir todas las uh, diez líneas de código una y otra vez. Entonces esta es una optimización básica. Así que solo puedes ir en la parte inferior de la pantalla, y podemos agregar struct, campo de texto personalizado, más modificador Y sobre esto, estaba a punto decir que ahora mismo lo estamos escribiendo aquí, pero en realidad lo trasladaríamos a su propio archivo separado. Entonces modificador de campo de texto personalizado. Y vemos que algunos de nuestros campos de texto tienen blanco o sí, así que algunos de ellos tienen blanco o no para el botón de acción, solo vamos a ir a un campo de texto. Entonces el fondo es claro en algunos y el fondo es blanco en algunos. Entonces lo que podemos hacer aquí es que podamos tener un parámetro de color. Entonces esto está ahí. Ahora se queja de que no se conforma, así que simplemente hacemos esto No, esta no es la forma correcta de hacerlo. Podemos simplemente agregar una función, en realidad, que sería cuerpo y contenido, y esto realmente debería estar bien, ahora se está quejando de la función Eso está bien. O sea, podemos trabajar con ello. Podemos escribir contenido aquí, y ojalá esto funcione. Sí. Entonces esto está ahí. Entonces, ¿cuáles son las cosas que necesitamos agregar dentro de nuestro modificador de campo de texto personalizado, que puede ser, que es común en todos estos campos de texto, en realidad. Entonces una cosa que noto es que es el color de primer plano, creo El color de primer plano es muy consistente en todas ellas. En realidad, no vamos a ajustar el campo de texto de contraseña porque tiene su propia funcionalidad por ahora con todo el asunto de Eta pasando Tenemos un campo para nombre de usuario y correo electrónico. Entonces vemos que el color de primer plano es común, la fuente es común, el relleno está ahí, luego el radio de la esquina está Entonces podemos comenzar por agregar algo de color de primer plano. Y como lo estamos agregando aquí, en el futuro, sería más fácil para nosotros usarlo en otro lugar, y no necesitaríamos repetir esas líneas de código. Entonces es una buena optimización en cierto modo. Entonces agregamos la fuente personalizada, luego agregamos el padding. Similarmente de la misma manera hemos agregado en el campo de texto. Entonces somos el relleno, entonces podemos tener un fondo. El fondo obtendrá la propiedad de color porque aquí tenemos un argumento definido. Y ya sabes ya que en el campo de texto de nombre de usuario, ese color es consistente para ser claro, pero en nuestro campo de texto de correo electrónico, está cambiando en función de un valor. Entonces puedes simplemente pasar esta cosa aquí en el argumento de un modificador de texto personalizado. Entonces esto está ahí, entonces podemos agregar la superposición. La superposición sería un rectángulo redondeado. Tendría un radio de esquina de diez, y luego puede tener un trazo, que sería el trazo debería ser punto negro y ancho de línea de aproximadamente cuatro píxeles. Entonces esta es su capitalización automática. Digamos dónde está, tiene que ser ninguno, y luego tenemos la desactivación de la corrección automática. Desactivar la corrección automática sería cierto. Entonces estas cosas están ahí. Y lo que podemos hacer ahora es que podamos escribir una extensión sobre el tipo de vista, la vista que ves aquí. Así extensión, vista, y podemos escribir la función, personalizado, texto, campo, campo. Estilo, y tomaría en un color, que sería del tipo color definido por Swift DUI Nos da alguna visión. Y lo que podemos hacer es que podamos usar modificador autodidacta, y este modificador sería nuestro modificador de campo de texto personalizado, que tendría una propiedad de color, pasándolo de nuevo color. Entonces esto está ahí. Ahora lo que podemos hacer es escribir uno más o simplemente podemos cambiar todo esto a su propio archivo personalizado. Entonces dentro de custom, creamos un nuevo archivo, y llamamos a este campo de texto personalizado, más desfilar, Enter Podemos agregar Import, Swift, um así que si DUI, entonces esto está ahí Ahora lo que podemos hacer es de manera similar, podemos crear un nuevo archivo para modificador de botón personalizado, y dar clic en Crear. Nuevamente, podemos importar Swift UI aquí. Ahora aquí lo escribiríamos de manera similar, entonces una estructura, que sería modificador de botón personalizado, y luego tendríamos un modificador de vista, y este modificador de vista, nuevamente, tomaremos un color de fondo, que sería del tipo color con un valor predeterminado de blanco aquí, porque si solo volvemos a nuestra vista tierra, vista Orth Entonces, si vemos el botón de acción, el color de fondo aquí está bien, entonces el color de fondo aquí está cambiando y para el botón de alternar, el color de fondo aquí es consistente. Entonces, en vez de pasar el color de fondo cada vez, le dimos un valor como, ya sabes, le dimos un valor como en un valor predeterminado. Entonces o el usuario elige no pasarlo quiero decir, no el usuario, me refiero a nosotros. Entonces, si o bien elegimos no pasar, está bien. De cualquier manera, funciona bien. Así que sólo podemos volver atrás y aquí agregamos una costumbre. Podemos hacer lo similar con el color dentro nuestro modificador de texto personalizado, también. Pero entonces pienso que no es necesario ya que estaba pensando en hacer que el estilo sea consistente. Y de manera similar, tenemos un campo de texto de correo electrónico, el color de fondo también sería el mismo para el campo de nombre de usuario. Entonces por eso no le estoy dando ahí un valor por defecto. Y también para los botones, quiero decir, los botones son bonitos um, se están usando más, diría, incluso para el signo de vista, tenemos un botón personalizado. Entonces ellos también podríamos usarlo. Entonces por eso no estoy um, pensando en hacerlo consistente en todo. Entonces por eso tenemos aquí un valor predeterminado para, ya sabes, un respaldo, básicamente Entonces usas fontt bold, Y talla 18 otra vez. Ya que teníamos en los botones, podemos tener un peso de fuente. Así que realmente no necesitamos un peso de fuente otra vez, mi mal porque ya estamos usando una fuente personalizada. Para el color de primer plano, podemos tener negro, y podemos tener algún acolchado Entonces podemos tener un marco, que sería ancho máximo punto Infinity. Pero otra vez, ya sabes que puedes darle un marco personalizado, así que eso está bien. Podemos tener un fondo, y el fondo en realidad tendría el color de fondo, y entonces podemos tener un radio de esquina de diez, entonces podemos tener una superposición. Y esta superposición incluiría un rectángulo redondeado. De manera similar a nuestro campo de texto personalizado en realidad, y esto tendría diez como radio de esquina, trazo de punto. El color sería negro, y entonces tendría un ancho de línea de dos píxeles. Entonces ahí está. Y de manera similar, volveríamos a escribir una extensión sobre la clase view, básicamente, y creo que la vista no es una clase. Es una estructura. Vamos a comprobarlo. Es un protocolo, antes que nada, bien. Sí, es un protocolo. Entonces body view, vamos a ver si, es un protocolo. Ni clase ni estructura. Creamos una función. Lo llamamos personalizado, pero en estilo, toma un color, que sería del tipo color, y tiene un valor predeterminado de blanco. Y luego podemos pasar en alguna vista. Abrimos esto. Ahora podemos escribir, perdón por eso. Contamos con modificador autodidacta. ¿Y qué hace este modificador de punto automático? Podemos comprobar esto también. Por lo que aplica un modificador a la vista y devuelve la nueva vista. Entonces eso es lo que está haciendo. Y podemos tener el modificador de botón personalizado, y el modificador de botón personalizado tomará un argumento de color de fondo, que sería color. Esto está ahí. Entonces ahora que hemos hecho tanto, solo podemos volver a nuestro punto de vista OT. Dentro de nuestro ATVew íbamos a nuestro vamos a ir a nuestro campo de texto de correo electrónico o campo de texto de nombre de usuario Entonces podemos comenzar con el campo de texto del correo electrónico, y tendría un tipo de teclado, obviamente, porque es específico del correo electrónico, pero entonces no necesitamos todo esto. Y ahora solo podemos agregar un estilo de campo de texto personalizado y el estilo de campo de texto personalizado, pide un color. Entonces para el color, creo que podemos agregar esa lógica booleana o bien podemos tener o, podemos hacer eso Entonces, ¿qué era antes solo checando rápidamente esto? Entonces fue esto solo podemos eliminar todo esto. Podemos tener estilo de campo de texto personalizado, pegarlo aquí. Esto está hecho. Ahora para el campo de texto del nombre de usuario, realmente no tenemos un tipo de teclado. Así que podemos simplemente eliminar todo esto, y luego podemos tener el estilo de campo de texto personalizado. Y para el color, podemos volver a agregar esto. Entonces esto está ahí. Aunque no tiene mucho sentido porque show in show sign in view, el campo de nombre de usuario no aparecería. Se iniciaría sesión con correo electrónico y contraseña. Entonces, de cualquier manera, está bien, pero ahora puedes ver lo conciso que se ha vuelto el código, ahora son literalmente tres líneas de código. Entonces esto es lo que estaba apuntando. Y esto está ahí, y lo que podemos hacer ahora es que podamos seguir adelante con nuestra creación de post y todo. Así podemos ir dentro del modelo de vista principal y agregar llamadas de base de datos para buscar publicaciones porque ya las estamos creando. Y también ya hemos creado una post struct, así que eso nos facilita las cosas Pero ahora mismo, como pueden ver, estamos codificando duro mucho valor. Por lo que necesitaríamos agregar propiedades de Guerra publicadas para todas ellas. Entonces eso es una cosa que necesitamos completar. Y luego pasaríamos a la parte UI, y básicamente crearemos una vista completa de Crear publicación, que se lanzaría a través del nuevo botón de publicación que tenemos en el perfil de usuario. Entonces ahí está. Entonces espero verte en el siguiente video. Y nuevamente, si tienes alguna duda, podrías simplemente dejarlas abajo en sus comentarios. Estaría muy feliz de ayudarle. Gracias por ver esto, y espero verte en el siguiente video. 18. Funcionalidad de búsqueda de publicaciones de usuarios: Último video, habíamos hecho algunos cambios en nuestra visión. Básicamente, agregamos estos modificadores de texto personalizados y modificadores de botón personalizados. Entonces lo que estaba pensando es que deberíamos al menos una vez revisar, como, ¿cómo está resultando ser todo? Y ojalá se vea bien solo porque simplemente eliminamos esos modificadores y los agrupamos en un solo modificador Entonces no creo que así haya muchos cambios. En tanto, lo que podemos hacer es que podamos plegar estas funciones porque ahora vamos a escribir funciones para ir a buscar el post y todo Entonces ese es un paso importante también. Permítanme simplemente doblar rápidamente estas funciones mientras la aplicación se está construyendo y la función de registro aquí. Y entonces tienes función de inicio de sesión. También teníamos una función de cierre de sesión. Tenemos un método de autenticación de verificación. Entonces esto está ahí, y creo que nuestra app la ha construido, así que la compilación está completa, quiero decir. Entonces vamos a ver. Y mientras tanto, cuando está construyendo, podemos, bien, decir que ha construido. Lo que vamos a hacer ahora es que iremos a ajustes. Haremos un cierre de sesión. Ahora, aquí en el correo electrónico, en realidad necesitamos iniciar sesión. Así troll en Tate gmail.com. Y la contraseña sería contraseña. Bien, entonces creo que no es Gmail, sino correo electrónico. Bien. No me di cuenta de que agregué una W así que regístrate. Esto también está mal. Entonces hagamos Gmail. Bien, entonces esto funciona bien. Y como viste que los campos se ven bien, solo los botones y todo. Entonces sí, la funcionalidad funciona perfectamente bien. Entonces ahora podemos pasar a algunas tareas importantes. Básicamente, ahora agregaríamos otra propiedad publicada aquí, y esta sería una publicación publicada. Estos son los posts que buscaríamos para cada usuario en particular, y vamos a convertirlo en un MTA por ahora porque tenemos que inicializarlo con un Ahora podemos escribir funcionalidad para buscar post de un usuario Entonces, lo que haríamos ahora es que antes que nada, escribiríamos una función asíncrona, que en realidad haría referencia base de datos de la tienda FI y Y entonces también escribiríamos una función pública, que en realidad utilizaría esa función privada. De igual manera, lo que seguimos para crear y agregar una publicación y también como hicimos para buscar un usuario de base Así que una funcionalidad similar está aquí también. Así que empecemos por escribir funk privado. Podemos escribir los datos de la publicación del usuario de fetch. Ahora qué parámetro, qué argumento de función necesita es básicamente necesita un ID de usuario. Entonces aquí escribiríamos en el argumento. Sería del tipo ASN lanza, y le da devuelve un valor de tipo post, básicamente Ahora abres la función. Ahora de nuevo, usamos DB como instancia de base de datos Firestore. Fistoe dot Firestore debería estar aquí. Ahora podemos crear vamos a llamar a esta colección, una constante básicamente, que usa try esperar y lo que hace es que escribe colección tBT dentro de los usuarios Ahora recuperamos un documento específico con ID de usuario. Después accedemos de nuevo a la colección. El nombre de la colección sería pose. Como puedes ver aquí, el nombre de la colección aquí es pose para este usuario en particular, y esto es usuarios, así que por eso estamos haciendo esto. Ahora lo que podríamos hacer es escribir Obtener documentos. Por lo que en realidad debería buscar todos los documentos dentro de esto Déjame ajustarlo un poco rápidamente. Entonces, traería todos los documentos dentro del poste de recolección Ahora lo que podemos hacer es que podemos crear otra constante let post equals try collection dot, documents dot map. Y así mapa es una función de alto orden. Básicamente, usamos en Swift. Y lo que podemos hacer es intentar lanzar todos los datos de post como post dot self, básicamente. Entonces esto esencialmente haría es que llegamos a h Llegamos a conocer todos los documentos. Ahora lo que estamos haciendo es que los estamos mapeando y convirtiéndolos en nuestra estructura de post, esta estructura de post que hemos definido aquí. Y suerte para nosotros que lo hayamos hecho de manera similar, totalmente similar al post que tenemos aquí. Entonces es por eso que el casting no será un problema. Entonces map se usa esencialmente para convertir un tipo a otro tipo, así que eso es lo que estamos haciendo aquí. Y entonces sólo podemos devolver nuestra pose. Entonces esta es la espero que esta función sea bastante sencilla según lo que estábamos haciendo hasta ahora. Así que busca usa una pose. Y ahora podemos no necesitamos tomar ningún argumento ni nada, así podemos simplemente escribir Gard, así podemos simplemente escribir Gard, dejar que User ID sea igual a EarthCla dot earth Instancia, currentuser punto UID, de lo contrario, podemos simplemente Y ahora lo que haríamos es abriríamos una tarea y dentro del cierre de la tarea, agregaríamos dos bloques catch. Entonces, sí, y dentro de do, simplemente dejaríamos que pose es igual a intentar esperar, buscar datos de publicación de usuario Podemos pasar nuestro ID de usuario, y luego podemos tener una cola de despacho porque tenemos que actualizar nuestra propiedad publicada con esto, y esta propiedad publicada se mostrará directamente en la pantalla de UI, por lo que lo estamos haciendo dentro de una cola de despacho. Y podemos tener celular punto post si vas a publicar, y podemos agregar un éxito print también ese fetched use post y call en esto, y podemos agregar post aquí, básicamente Entonces esto es lo que hemos hecho, y en el bloque de caché por ahora, solo podemos escribir un error, que diría error fetching Pose de usuario, y entonces podemos tener error punto descripción localizada. Entonces bien, solo revisando todo el concepto, queríamos buscar la pose para un usuario en particular Para eso, escribimos primero una función privada porque esa sería una función asíncrona Acabamos de envolverlo dentro de una función pública. Así que volviendo a nuestra función privada, era del tipo acing lanza y devuelve una matriz tipo de post. Y entonces lo que hicimos es hacer referencia a la instancia de la tienda de bomberos. Después accedemos a la colección y sacamos todos los documentos de ahí. Y ahora estamos convirtiendo todos esos documentos que obtenemos uno por uno a través de la función map en un post. Eso es lo que esencialmente estamos haciendo aquí. Y creo que post así post conformar sudotipo codificable Por eso es posible. Si fuéramos a quitar esa propiedad codificable, creo que no creo que así deba funcionar. Así que vamos a ver por nosotros mismos. Sí, exactamente. Entonces básicamente, no conforma Studotype decodificable porque estamos decodificando todos y cada uno de los documentos que obtenemos de esta colección de post, y luego lo estamos convirtiendo a un tipo post dentro de nuestro tipo SIF porque Firebase no es consciente de nuestra base no es básicamente consciente de nuestra no es básicamente consciente de nuestra Simplemente nos da un tipo de post que se define aquí dentro de sí mismo. Y solo hemos creado esto, así que es más sencillo para nosotros para que podamos simplemente decodificarlo de nuevo a un tipo de publicación Lo subimos como un tipo de publicación, lo decodificamos de nuevo como un tipo de publicación Así que hemos hecho tanto. Y como hemos hecho tanto, creo que necesitamos agregar propiedades publicadas para todos estos. Déjame entrar. Entonces básicamente, ahora mismo estamos codificando duro estos valores, pero esta no es una forma correcta de hacerlo, bien, porque queremos que el usuario dé entradas. Entonces para hacer eso, solo agreguemos primero todas las propiedades publicadas que necesitará el usuario. Entonces nuestra tarea se vuelve más fácil. Entonces comencemos por guerra publicada y llamémosla imagen de héroe. Básicamente, esta sería la primera imagen al principio. Entonces es por eso que le estoy nombrando hero image, y luego podemos haber publicado en nuestra lista de reproducción, URL, que sería del tipo string y dándole un valor predeterminado de cadena vacía Y ahora podemos simplemente copiar esta cosa, pegarla un par de veces. Podemos tener nombre de lugar. Podemos tener presupuesto. Podemos tener calificación de Vida Nocturna. Podemos tener una calificación de seguridad, solo verificando rápidamente la ortografía Y también podemos tener calificación de limpieza. Entonces ahí tienes. ¿Qué más necesitamos? Creo que necesitamos un par más. Entonces hagamos calificación de transporte. Entonces tendríamos una mejor imagen de café, que sería del tipo UI image opcional, y luego tendríamos mejor caption de café, que sería del tipo string, entonces tendríamos que podemos copiar estos dos. Y pegarlos aquí porque tendríamos ahora es mejor imagen de estancia, y tendríamos mejor subtítulo de estancia. Entonces esto está ahí. Ahora lo que podemos hacer es que tenemos imagen de estancia, quedarse pie de foto. Agreguemos uno más, y esto sería debe llevar cosas. Entonces deben llevar las cosas. Esto está ahí. Entonces creo que las hemos cubierto todas. Entonces ahí está la imagen del héroe. Vamos a darle un espacio aquí para que la imagen del héroe esté ahí, URL de la lista de reproducción está ahí, nombre del lugar está ahí, el presupuesto, la vida nocturna , la seguridad, la limpieza, el transporte, mejor café, la mejor leyenda del café, mejor día, y hay que llevar cosas. Entonces sí, esto está bien. Ahora lo que podríamos hacer es que dentro nuestra imagen de subir y crear post, necesitaríamos no solo trabajar con la imagen seleccionada, sino que en cambio, tendríamos Bien, así que ahora lo que podemos hacer es que podamos eliminar la imagen seleccionada y usaríamos la imagen de héroe en su lugar. Entonces creo que me está dando algunos errores. Podemos tener imagen de héroe. Si seguimos adelante, creo que debería darme más errores, creo, o bien tal vez no. Creo que debería haber un error más dentro nuestra vista de perfil de usuario. Entonces eso saldrá en breve, pero llegando a nuestra opinión, de manera similar, que hicimos para, ya sabes, um, imagen de héroe, lo que podemos hacer ahora es que podamos escribir aquí también. Podemos agregar una coma aquí, y luego podemos escribirla para Vamos a darle pestaña Entonces ahora debería ser la mejor imagen de café. Esto lo podemos hacer. Ahora podemos haber dejado aros. Se debería dejar que la mejor imagen Say sea igual a la mejor imagen del día. No, mejor imagen de mejor día. Esto está ahí, y podemos mover el hasta aquí, y la declaración de retorno es. Bien, entonces lo que estaba pensando es que dejar que solo devuelva algún valor como un booleano o algo así, y podemos devolver falso aquí Rápidamente te explicaré por qué hice eso. ¿Por qué agregué un valor booleano? Avanzando en el video, vería que tenemos una URL de imagen, que está usando la imagen de héroe. Entonces eso está ahí. Pero entonces tenemos que hacerlo tres veces ahora. Y esto sería cafe Image URL, y esta sería la mejor imagen de cafe. Y luego tenemos la URL de Stay Image, y esta sería la mejor imagen de Stay, derecho. Entonces sí, estas cosas están ahí. Y creo que vamos a darle un espaciado. Y en la parte superior, vamos a quitar esto. Entonces me parece bien. Entonces esto está ahí. Ahora que hemos hecho tanto, para el post, solo vamos. El ID de publicación debe ser así solamente, el ID de propietario debe ser ID de usuario. Imagen URL absoluta de la imagen. La URL de la lista de reproducción sería nuestra URL de lista de reproducción. El nombre del lugar sería nuestro nombre de lugar, presupuesto sería nuestro presupuesto. Y para las calificaciones, en realidad tendríamos una calificación de vida nocturna aquí. Entonces tendríamos la calificación de seguridad aquí, luego tendríamos la calificación de limpieza, luego también tendríamos la calificación de transporte. Entonces estas cosas están en su lugar. Ahora para la mejor imagen de cafe, tendríamos una mejor URL de imagen de cafe cafe, tout cadena absoluta Y aquí tendríamos mejor pie de foto de café. Y aquí me hubiera quedado Image URL, tout absolute string Aquí tendríamos mejor título de estancia, y el must carry things debería ser debe llevar cosas solo la propiedad publicada que acabamos de crear. Entonces esto está ahí. Podemos agregar Enter aquí y podemos agregar enter aquí también. Dale una pestaña, así que algo como esto. También podría tener una pestaña. Así que mira algo así, creo que en cierto modo es más limpio. Vamos a darle un poco menos sí. Esto me parece bien. Así que tenemos esta funcionalidad ad post para usar nl y aquí podemos agregar return through. Y aquí podemos agregar return false así que esto está ahí, y se completa nuestra funcionalidad, y vamos a ver a dónde estamos llamando a nuestra imagen de subida y crear post. Así que aquí no. Está dentro agregar post para usar, creo. Um, ¿debería ser subir imagen y crear post? Bien, sí, esto funciona bien. Entonces ahora que hemos hecho tanto, ahora crearíamos una vista Crear publicación. Así que vamos a entrar en la propiedad view, la carpeta view, y aquí crearíamos un nuevo archivo y trabajaríamos con Create New Post. Por lo que en breve estaré retomando esto, así que espero verlo en el siguiente video Y nuevamente, si tienes alguna vamos ejecutar la app una vez porque quería ver si hay algún error porque acabamos cambiar la imagen seleccionada, propiedad publicada. Entonces creo que deberíamos obtener al menos un error. Esta es la imagen y debería ser héroe. ¿Hay algún otro error? Entonces sí, imagen de héroe. Esto está ahí. Ahora creo que la aplicación debería construirse bien, y vamos a encargarnos rápidamente de ello. Si construye, está perfectamente bien. Y sí, así que en el siguiente video, seguiremos trabajando con la vista Crear publicación, y luego en realidad solo crearíamos esa vista y, uh, probaremos toda la funcionalidad esta vez con diferentes imágenes y todas las entradas del usuario serían únicas. Entonces espero ver en el siguiente video. Y nuevamente, si tienes alguna duda, podrías simplemente contactarme. Entonces sí, a través de los comentarios y de todo. Entonces, bien, espero ver en el siguiente video. 19. Creación de la interfaz de usuario de PostViewCell parte 1: Bien, entonces ahora que sabes que tenemos tres tipos diferentes de imágenes con las que lidiar, en realidad necesitaríamos hacer algunos cambios dentro de nuestro picker de imágenes, porque en este momento solo está configurado para manejar una imagen a la vez Pero ahora que tenemos una imagen de héroe, una imagen de café y una imagen de estancia, en realidad necesitaríamos tomar las cosas de manera diferente. Entonces para este caso, en realidad crearíamos una enumeración, llamémoslo tipo de imagen el tipo solo tendría tres casos, entonces tendría una imagen de héroe, entonces tendría una imagen de caf, y tendría una imagen de estancia Una vez hecho esto, podemos hacer algunos cambios dentro de nuestro picker de imágenes Una cosa que noto es que ahora mismo estamos usando este valor de modo de presentación, que en realidad no es necesario porque lo que podrías hacer aquí es que podríamos usar Picker dot dismiss y nos da la misma funcionalidad Para que podamos eliminar esto aquí. Podemos retirarlo de aquí también y agregar el mismo código Picker dot dismiss Ing el valor animado verdadero. Esto está ahí. Y además, realidad no necesitamos verificar las imágenes editadas. No creo que sea necesario para nosotros porque vi que aquí no es tan grande el alcance de la edición. La gente realmente puede editar sus fotos en sus propias aplicaciones específicas, y luego podrían usar la foto para publicar aquí. Así que en realidad no estamos tratando de crear una aplicación de fotos bien. Es más una aplicación de redes sociales. Solo tratando de minimizar los lugares de, como, ya sabes, error, como, por qué la aplicación tendría una funcionalidad tan mínima en términos de edición en lugar de no tenerla. Entonces esa es mi opinión sobre ello. Ahora que hemos hecho tanto, realmente no necesitamos el valor de imagen seleccionado también. De hecho, crearíamos una variable, que sería del tipo de imagen tipo con el um que acabamos de definir. Ahora lo que haríamos eso en lugar de usar la imagen seleccionada, en realidad tendríamos un cierre para cuidar la imagen. Entonces un cierre es básicamente como una función solamente. Los cierres son más como funciones de nombre y tienen una devolución de llamada a ellos. Y estaba pensando en crear un video específico sobre el cierre dentro del curso, también. Así que en realidad haría eso, y lo incluiría en esta sección misma, así que eso haría que a ustedes también les resultara más fácil entender. Entonces esto está ahí. Podemos tener un tipo de retorno de vacío. Entonces el cierre puede tomar una imagen, y vuelve nula, básicamente. Así que tenemos la imagen seleccionada, y luego lo que podemos hacer es que podamos bajar aquí, e instigar a nuestra clase de coordinador y dentro de nuestra función de controlador de selección de imágenes, necesitaríamos hacerlo en lugar de esto, tendríamos que llamar a la imagen seleccionada, y en la imagen seleccionada tomaría la Entonces esto está ahí. Y, sí. Entonces no lo creo. Hay algún cambio más que tengamos que hacer aquí. Déjame repasar las cosas y no, todo me parece bien, y obviamente podemos eliminar esta funcionalidad de imagen seleccionada. Nuestro compilador pronto nos lanzará algunos errores porque hemos cambiado el picker de imágenes, así que vamos a investigar Y por ahora, vamos a entrar en nuestros puntos de vista. Y estaba pensando que podríamos ir con la creación de la vista create post o bien también podemos ir a crear, sabes, ¿cómo la llamas? El post view, básicamente. Entonces la vista post sería que es una especie de sub vista que tendría la celda post view, básicamente. Entonces, si ves en esta captura de pantalla que te he mostrado, esto sería una especie de vista de publicación, que es una especie de carusel solo Entonces, si has usado alguna aplicación de streaming, notarás que tienen algún tipo de interfaz de usuario similar. De nuevo, fui a Bhands y busqué algunos diseños, y me pareció bastante único, así que acabo de agregar diseño a mi post Y esto es como la primera imagen del carrusel, básicamente Entonces la imagen principal va aquí, la leyenda va detrás, y ahí está el presupuesto, y ahí está el otro subtítulo, como cualquier subtítulo favorito. Y luego puedes desplazarte desde aquí y los usuarios podrán ver las otras fotos y todo lo que puedas ver la parte de la imagen está siendo visible aquí, así debe ser la segunda o tercera imagen o como, mejor lugar para visitar o algo así, algo dentro de tu viaje que mencionaste. Entonces esto está ahí. Entonces estaríamos intentando crear esta interfaz de usuario entonces otra vez, estaba pensando que, deberíamos ir sobre la creación de esta interfaz de usuario o deberíamos ir sobre la creación de la vista de publicación primero. Así que sólo estoy pensando en ello. Como, deberíamos si primero creamos una vista Crear publicación, en realidad tendríamos la opción de, ya sabes, ¿qué dices? Primero creamos una vista Crear publicación, en realidad tendríamos la opción de ver nuestra, no tendremos la opción de ver nuestra publicación porque entonces tendríamos que pasar algún tiempo viendo la publicación, básicamente, como crear la vista de publicación vender. Entonces, ¿qué tal si solo vamos con la creación de la vista Post solo Entonces, para la vista de publicaciones, estaba pensando que la dividiría en dos partes distintas. Entonces básicamente, la primera parte sería toda esta primera página del carrusel, que es una interfaz de usuario personalizada y todo Pero entonces otras partes serían simplemente la imagen con el subtítulo en la parte superior en especie de pila Z o algo así. Para que podamos ir sobre eso. Así que vamos a crear una nueva carpeta dentro de las vistas, llámalo sub vistas. Y ahora lo que podemos hacer es hacer Comando N, y podemos hacer Swift UI view, y podemos decir post view sell first page. Entonces es algo muy descriptivo, y quiero decir, tiene sentido también que otros entiendan lo que está pasando. Entonces esto está ahí. Podemos quitar el panel de vista previa de aquí, y podemos conservar este texto por ahora porque ahora estoy pensando que todo lo que necesitaríamos. Entonces se podía ver que definitivamente necesita dos tipos diferentes de textos. Una es esta, y luego está el presupuesto, y ahí está la pizza vegana escrita aquí también. Así que tres tipos diferentes de entradas de texto y una entrada de imagen. Y esto es solo de todas las formas y colores. Entonces esto puede ser atendido. Así que en realidad necesita como tres parámetros diferentes, básicamente. Entonces primero, vamos a ir con sumarlos. Entonces en nuestro requerimiento, tenemos el pie de foto. Tenemos el presupuesto, y llamémoslo mini caption. El otro, que está dentro del video del reproductor de canciones tipo de UI. Entonces esto está ahí. Ahora podemos agregar la propiedad hero image image. Y si, esto es todo. Entonces básicamente, necesitamos estas cuatro propiedades para continuar con lo nuestro. Y ahora lo que podemos hacer es crear primero una pila Z. Estoy creando la pila Z porque empezaré con la creación de la vista de texto, básicamente. El fondo de todo esto contiene el texto alineado en una pila vertical, y aquí también está pasando una cosa de jugador pequeño , si pudieras ver. Entonces sí, esto está ahí. Así que comencemos por crear la pila Z. Aquí creamos una pila vertical, y simplemente no le demos ningún espaciado por ahora porque creo que nuestra fuente personalizada ya tiene algún espaciado predefinido en su biblioteca. Entonces básicamente, sería más fácil para nosotros de esa manera. Podemos tener un pequeño espacio aquí con un marco de, ya sabes, altura, digamos, cuatro pixeles, Hola, GHD Esto está ahí. Lo que podemos hacer es hacer un bucle a través de números. Entonces básicamente cero hasta tres, y realmente no necesitamos ningún valor de aquí, así que podemos hacer undiscoe y podemos agregarlo a caption Entonces básicamente, repetiría decaption tres veces y vamos a tener solo qué valores necesitaría el caption Por lo que requiere una fuente personalizada en primer lugar. Entonces eso es lo que le estamos dando aquí. Vamos a darle una talla 40, viendo que es bastante enorme. Entonces, yendo por esa mirada, esto está ahí, ¿y qué más necesitamos? Necesitamos color de primer plano, color de primer plano de negro, obviamente Entonces enmarcamos y enmarcamos porque ves que estos quedan alineados a la izquierda. Entonces eso significa que le daríamos ancho máximo de infinito y alineación para mantener todo alineado a la izquierda, sería líder y también habría algo de relleno porque realmente no necesitamos ningún relleno en este lado. En fin, estamos empujando la vista hacia la izquierda. Así que vamos a darle un poco de relleno al lado de ataque, borde de ataque, básicamente. Entonces, esto es todo. Ahora lo que podemos hacer es crear una pila Z para esta cosa de fondo que estamos creando. Entonces, básicamente, crearemos un rectángulo delgado y redondeado y colocaremos este círculo encima de él. Entonces eso es en lo que estoy pensando. Y en lugar de un rectángulo redondeado aquí, también podríamos usar cápsula. La cápsula es una de las formas distintas del círculo rectangular redondeado definido dentro de una biblioteca de interfaz de usuario del s. Entonces esto es lo que estoy haciendo ahora mismo y podemos tener negro con opacidad de 0.2 porque se puede ver que esto es bastante Entonces esto está ahí, entonces podemos tener un frame, y el frame obviamente sería como 1.5 pixeles o algo así porque es bastante delgado. Entonces esto es lo que voy a buscar aquí. Y luego podemos agregar algo de relleno y este relleno debe ser horizontal, desde los bordes, básicamente. Y ahora podemos agregar el círculo aquí. Y este círculo tendrá, nuevamente, un relleno de color Negro, y luego tendría un marco. El marco le daría un ancho de algo así como seis, así que realmente no necesitamos definir la altura porque los círculos son simétricos de esa manera. Podemos darle un offset. Básicamente, no quiero que aparezca un círculo justo en el medio o justo en el borde más a la izquierda Así que solo estamos compensando el eje X para el círculo, y lo compensaría en 50 píxeles Entonces lo que hace es que esencialmente nos permite, ya sabes, simplemente ir, um moverlo un poco hacia el lado derecho. Entonces eso es lo que estamos haciendo, dándole un poco de relleno desde la parte superior e inferior. Entonces desde arriba, vamos a darle un poco de relleno porque, de nuevo, no quiero que se vea raro desde abajo que esté siendo empujado hacia arriba, así que eso es lo que estoy haciendo. Ahora que ya hemos hecho esto, podemos simplemente terminar esta pila, y podemos terminar esta pila vertical también. Estos son todos nuestros antecedentes. Entonces esto está ahí. Ahora lo que podemos hacer es trabajar en primer plano Entonces básicamente el primer plano incluiría esa cosa del jugador amarillo Todo esto, incluye una imagen y todo. Entonces esto es lo que vamos por ahora. Podemos agregar algo de espaciado aquí. El espaciado sería de dos píxeles. Esto está ahí. Podemos pasar en la imagen. Y como es una imagen, bien, tenemos imagen de héroe aquí. Para que podamos pasar en la imagen de héroe. Podemos darle un modificador redimensionable y la relación de aspecto debe ser modo contenido Rellenar. Entonces esto es a lo que voy a buscar. Entonces le damos un marco. Entonces el marco sería con 72, y la altura sería 72 también. Y lo siento por eso. Ahora podemos darle algún radio de esquina también. Vamos a darle dos píxeles o algo así, y vamos a darle un poco de relleno también. Nuevamente, dos pixeles. No lo voy a dar. Si tuviera que darle algún relleno predeterminado, podría cambiar todo el aspecto de la vista. Entonces no es a lo que voy a buscar aquí. Eso no es una mirada. Y podemos tener el mini caption aquí, y podemos darle alguna fuente con custom, y podemos tener fuentes punto negrita, y esto podría ser del tamaño ocho porque es bastante pequeño, como puedes ver. Entonces creo que parece estar bien. Entonces podemos tener un color de primer plano de negro, veamos. Entonces podemos darle un marco. Y el marco sería como si estuviéramos definiendo un ancho aquí para que no cruce ese ancho, básicamente, y la alineación debería ser delantera. Básicamente, ahora lo que podemos hacer es permitir la expansión vertical en el sentido que si le damos un tamaño fijo y el tamaño fijo sería horizontal. Caídas y verdades verticales. Entonces básicamente, no se estirará de esta manera, sino que se apilaría así, se puede ver en caso de que el texto sea un poco largo, así que esto es lo que estoy haciendo. Ahora podemos darle algún relleno, que sería horizontal, obviamente, y algo de relleno en la parte superior también, pero no quiero darle mucho relleno. Así que vamos a hacer sólo cuatro píxeles. Esto está ahí. Vamos a crear el Ed Stack ahora. Entonces creando el Ettack tenemos un botón aquí. Este botón no será realmente clicable, así que podemos simplemente ir sobre ni siquiera crear un botón en primer lugar Pero entonces estaba pensando que podríamos agregar una funcionalidad que si el usuario hace clic en este botón, la foto cambia. Entonces estaba pensando en eso. Entonces, por ahora, vamos a crear. Entonces necesitamos esto, esto, y esto. Así que tres imágenes de símbolos Swift SF. Entonces esto es lo que estamos haciendo. Y entonces tenemos que darle alguna fuente personalizada, y ¿la fuente personalizada funcionará directamente en los símbolos ASF? No estoy muy seguro de eso, pero supongamos que aunque el tamaño funcione, porque no creo que así se definan las fuentes para estos símbolos. Pero entonces si le damos algún tamaño de fuente, creo que debería adaptarse a eso y acción hacia atrás, digamos, y esto está ahí. Por lo que se completa este botón. Lo que podemos hacer ahora es copiar esta cosa. Podemos agregar un espaciador. Lo copié de nuevo, podemos volver a agregarlo marcapazo, y luego podemos agregarlo nuevamente Y ahora esta vez habríamos jugado Dot fill. Entonces este es el ícono del medio, playdt fill, y este, tendríamos ¿cómo lo llamas Déjame verificar rápidamente este, así que debería ser hacia adelante para relleno de punto de palabras. Entonces esto está ahí, y entonces lo que podemos hacer es que podamos agregar algo de relleno a nuestro at stack, eso sería horizontal, y luego podemos darle un frame, que nuevamente sería del ancho 60 pixel, igual que el caption. Entonces permanece en el mismo sentido del diseño, básicamente, y está alineado con el centro, como puedes ver. Entonces esa es una cosa más. Esta pila vertical está aquí. Ahora lo que tenemos que hacer es que podamos darle a todo el asunto algún marco. Entonces, vamos a darle un ancho de marco de 80 píxeles totales. Entonces creo que eso no debería romper ninguna restricción, y vamos a darle una altura de 120. Teniendo en cuenta que hemos codificado duro el alto y ancho de las imágenes y de todo, así que eso quedaría bien. Y pronto trabajaremos en esto y de hecho lo haremos un poco dinámico porque estoy pensando en mostrar el post no solo aquí en tamaños más pequeños, sino también en el feed casero donde se puede ver desde. Entonces debería adaptarse tanto a esto como a esto, y con nuestro diseño actual, en realidad no funcionará bien. Entonces eso es una cosa. No necesitamos esquina no necesitamos tamaño de esquina. Necesitamos radio de esquina. Vamos a darle siete. Y qué tal si simplemente reanudamos rápidamente el trabajo en esta celda de vista de publicación, y de hecho completaría la vista de pose en el siguiente video. Espero ver en el siguiente video. Y si tienes alguna duda, puedes simplemente bajar en los comentarios. Gracias. 20. Creación de la interfaz de usuario de PostView parte 2: Entonces en el último video, en realidad lo dejamos en este punto. Entonces ahora mismo, sólo voy a completar esta cosa. Entonces estábamos trabajando en el fondo para esta estructura que tenemos aquí. Entonces básicamente lo que haríamos es que podemos agregar un relleno aquí con color y luego el color tendría un color de interfaz de usuario o inicializador, o tal vez podrías hacer algo llamado amarillo suave Entonces esto está ahí. Y luego podemos agregar un fotograma, y el fotograma debería ser algo así como ancho 80 píxeles y luego alto 120 píxeles. Entonces pronto llegarías a conocer esto que realmente no necesitamos codificar las dimensiones Esto es solo con el propósito de que funcione dentro nuestra visión para que podamos ver eso si está funcionando bien o no. Entonces volviendo al desplazamiento, en realidad le daría un valor de desplazamiento con Y y 18, así que solo empujándolo un poco hacia abajo verticalmente todo el asunto. Entonces esto está ahí y ahora podemos ya que hemos hecho el fondo, ya que hemos hecho esta caja amarilla del jugador, ahora podemos simplemente hacer rápidamente este texto de insignia algo así. Entonces justo debajo de offset, lo que podemos hacer es que podamos escribir texto de placa. Y ahí podemos comenzar, así podemos tener una propiedad de texto. La propiedad de texto tendría que haber usado min caption. Nosotros hemos usado podemos usar presupuesto aquí. Entonces básicamente, el presupuesto va aquí. Ahora podemos añadir la fuente. Fuente obviamente sería fuentes personalizadas punto negrita, y vamos a darle un tamaño de, como, ocho píxeles. Entonces podemos agregar un poco de relleno para cuatro píxeles. Entonces podemos agregar un fondo Fondo. ¿No tenemos color de fondo? Bien, no tenemos color de fondo. Tenemos antecedentes. Podemos usar el color con el color de la interfaz de usuario. Y luego podemos agregar el cabello azul claro que agregué en, como, último a último video Entonces aquí es donde quería usarlo. Y según el diseño, recuerdo que tengo que mantenerlo dentro de la extensión de color de la interfaz de usuario. Entonces eso es lo que hicimos. El radio de la esquina sería de 12 píxeles. Entonces podemos tener una superposición. Y la superposición incluiría un rectángulo redondeado, básicamente, con algún trazo. Entonces volviendo al diseño, si ves, tiene un borde. Entonces eso es lo que vamos a buscar aquí. Entonces con radio de esquina a con espina dorsal, y luego podemos tener algún trazo. Entonces cuando le das alguna forma, un trazo, no puede tener relleno, o bien puedes darle un relleno. Hay soluciones para eso, pero realmente no necesitas entrar en eso, podrías agregar dos modificadores diferentes y trabajar Entonces el ancho de línea está ahí, entonces tenemos que rotar todo esto un poco, así podemos usar el efecto de rotación grados de punto, y vamos a darle un valor de 40. Entonces gira un poco así en la imagen. Y obviamente, tenemos que darle algún offset porque ahora mismo está dentro. Si solo lo guardamos así, se quedaría en algún lugar aquí. Entonces esto no es lo que queremos. Entonces, para el valor de desplazamiento, podríamos usar X 60, y para Y, también podríamos usar o. entonces para por qué, podemos moverlo un poco hacia arriba, así que tenemos que darle un valor negativo, así como 50. Eso funciona bien. Ahora vamos a darle a todo el asunto un poco de marco. Entonces todo, quiero decir, todo el asunto del post. Tendría un marco. Entonces aquí íbamos con 200 y altura, altura GHD sería 200 también Esto está ahí. Entonces teníamos el fondo, y el fondo sería color, color de la interfaz de usuario. Ahora, veamos rápidamente qué colores tenemos IU color más EXT. Creo que podemos ir sobre el uso máximo de pelo amarillo. Entonces hacemos amarillo máximo, ese tipo de color neón, esperaba darle o podemos darle. No hay neón ahí, amarillo neón. Entonces esto está ahí, así que esta es la primera página de nuestra vista de publicación completada. Ahora lo que podemos hacer es que podemos hacer el Comando N, y podemos tener una vista rápida de UI y podemos llamarla celda post view. Y entonces podemos entrar. Nuevamente borramos un panel de revisión, y entonces lo que podemos hacer es que un Podemos tener Bien, entonces ¿qué tal si seguimos trabajando en esta cosa, básicamente? Por lo que la vista post debería tener, obviamente, una publicación de argumento. Esto está ahí. Entonces podemos tener algo de ancho. Así que con podemos definir a través del tamaño de pantalla de nuestro dispositivo. Así que Uscreen punto punto principal rebota punto ingenio y podemos dividirlo por dos y restarle algo para hacerlo más pequeño Entonces esperaba mostrar el post aquí primero. Eso es lo que voy a buscar aquí. Básicamente, si dividimos el ancho por dos, entonces solo tiene esta cantidad de área. Y también a partir de eso, quitamos 15, así que consigue algo de relleno de izquierda y derecha. Entonces por eso le di un ancho de, como, ya sabes, ancho dividido por dos y 15, y para la altura, podemos hacer HIGHT Flotador CG, la altura sería de 200 píxeles. Entonces he definido estas constantes para usar, y toma en un argumento, obviamente de la etiqueta post Ahora lo que podemos hacer es que podamos eliminar esto y abrir una vista de tabulación. Entonces una ficha que en realidad nos ayudaría a usar, ya sabes, todo, básicamente. Um, quiero decir, quise decir eso, necesitamos usar las URL de imagen aquí y mostrárselas a nuestro usuario porque si solo vamos aquí estructura de post, ves las imágenes que estamos obteniendo del back end, la base de fuego están en los términos de cadena, Nos están dando la URL donde se encuentra la imagen ya que revisamos también en el video anterior al anterior cuando intentamos descargar la imagen que obtuvimos de la base de fuego Entonces la cosa es que con aquí, en realidad no podemos simplemente usar el modificador de imagen y pasar la imagen porque eso no va a funcionar. Lo que podemos hacer es desenvolver esas imágenes de manera segura. Entonces héroe URL de imagen, y debe ser URL de cadena, y podemos usar post tensa URL de imagen aquí Entonces de esa manera, si existe, si es una URL válida en post URL de imagen, si puedes ver, realidad nos dejaría usar la imagen, y podemos usar la imagen asíncrona, que es proporcionada por Swift UI solamente, y podemos pasarla para que podamos pasarla aquí Ahora lo que podemos hacer es que podamos abrir un cierre aquí porque necesitamos darle a la imagen algunos modificadores, diría yo Entonces para ello, vamos a utilizar nuestra primera página de post view cell, y obviamente toma muchos valores. Entonces lo que podemos hacer es presionar Enter y mantenerlos alineados. Y ahora veamos qué necesita todo. Entonces, bien, para la imagen, pasaría la imagen. Para el pie de foto min, pasaría el punto post. Digamos que por ahora tenemos la mejor leyenda de café. Mejor leyenda de café. Para el presupuesto, tenemos presupuesto postt Para el pie de foto, tenemos postt caption, supongo. No. O sea, ¿no tenemos no tenemos, tenemos un topónimo, que sería el primer pie de foto, en realidad. Entonces sí, esto está ahí. Ahora que sumamos tanto, todavía se queja de que esperaba imagen de tipo y no puede convertir un valor de imagen asíncrona de tipo, cara a imagen de tipo esperada Bien. Entonces lo que podríamos hacer es que esto sea raro, diría yo, porque, creo que la imagen debería estar funcionando aquí. Déjame pensarlo. Supongo que la imagen que estamos recuperando no tenemos ninguna, bien, no tenemos ninguna. Lo que podemos hacer es que podamos agregar un marcador de posición aquí, y sería una simple vista de progreso, básicamente, la vista de progreso con un fondo, y el fondo sería color, color UI, y debería ser verde juego Entonces sigo pensando, Bien, ahora está funcionando. Entonces fue raro que no funcionara. Pero sí, esto está ahí, y el marcador de posición está completado Se completa la imagen asíncrona entera si se deja. Entonces ahora lo que podemos hacer es que podamos volver a usar todo este bloque. Pero esta vez, no vamos a mostrar esta primera vista de página, sino que, en cambio, la imagen se mostraría así con el pie de foto. Solo estaba tratando de hacer que la vista de publicación fuera algo única. Entonces por eso diseñé la primera página. Pero depende totalmente de ti si estás trabajando dentro de la app y no tienes ganas de hacer eso. Entonces Imagen N, podemos tener imagen y podemos presionar Enter. Podemos quitar esta cosa de aquí. Ahora simplemente mostraríamos redimensionable y luego mostraremos relación de aspecto con un contenido más relleno Entonces podemos agregar algún marco. El marco tendría un ancho de como 200 y tendría una altura de 200, y podemos tener forma de clip, básicamente. Y la forma del clip sería un rectángulo redondeado con un radio de esquina de como diez píxeles. Entonces esto está ahí. Lo que podemos hacer en el marcador de posición, dice modo de contenido, fill no puede encontrar fill in scope Oh, bien. Mi mal. Tenía que añadir un punto aquí. Tenemos una visión de progreso ya hecha. Entonces esto está ahí. Ahora lo que podemos hacer es que dentro de la vista de tabulación, podamos agregar una pila vertical aquí. Para que podamos plegar estos dos. Entonces esto está ahí, esto está ahí. Lo que estás notando es que dentro de una vista de pestaña, solo agregas algunas vistas como la vista uno, luego agregas la vista dos Entonces básicamente, todos aparecen manera tabular en el caso de que puedas deslizar y ver los demás. Entonces este sería el primero, post view custom first page design, y el segundo sería simplemente con la imagen. Entonces para el tercero, estamos usando una pila vertical, y podemos tener para cada uno, podemos hacer algo como, ya sabes, lo mismo que hicimos dentro del post first view sell, y podemos repetir el texto. Y vea este diseño de vista de publicación depende totalmente de usted. Podrías hacerlo más sencillo. Podrías experimentar más con él, así podrías llegar a saber que ¿qué quieres hacer exactamente? Entonces esto está ahí. Entonces podemos y la fuente, font dot custom, y custom serían fuentes punto negrita, y el tamaño sería, supongo, 42 o algo así. O también le puedes dar 40. Entonces el estilo de primer plano sería negro. Entonces podemos tener marco. ¿Qué tal estaba pensando que si hacemos primer plano blanco y dentro de un marco, tenemos ancho máximo de infinito. Y luego tenemos la alineación liderando, esencialmente siguiendo lo mismo, pero estaba pensando en revertir el código de color. Entonces ahora mismo que hemos hecho esto, podemos agregar el padding. El relleno sería obviamente líder, y entonces podemos tener un fondo, y el fondo sería color punto negro. Entonces vamos a ver cómo resulta ser todo. Entonces esto está ahí. Lo que podemos hacer es que podemos quitar el para cada sí, podemos plegar para cada uno. Y entonces estaba pensando que también podemos plegar la pila vertical, y le daremos un marco a la pila vertical. Y el marco sería con el ancho, 200 y la altura, 200. Y justo ahora, me di cuenta de que le di a cada uno de los textos en realidad algunos antecedentes, que no es lo que queremos, así podemos eliminarlo de aquí. Y podemos agregar un fondo aquí en su lugar, y el fondo sería negro. Entonces esto es que podemos doblar esta pila vertical hacia fuera. Ahora podemos avanzar y luego podemos agregar otra pila vertical. Así que solo estamos utilizando todas las propiedades de post. Entonces tenemos un texto que diría presupuesto. Entonces podrías volverte loco aquí y agregar tu propio tipo de, ya sabes, texto y todo, para que puedas hacerlo algo único a su manera. Entonces eso es lo que estoy tratando de hacer aquí también. Y tendríamos fuentes punto negrita aquí. Entonces le damos una talla 12, luego tenemos un marco con ancho máximo, nuevamente, infinito, entonces la alineación debe ser líder. Esto está ahí. Le damos un poco de relleno, nuevamente , cuatro píxeles, supongo, y luego podemos agregar un espacio Y ahora mismo, estoy tratando de simplemente agregar las diferentes propiedades del post. Entonces, si ves que hemos cubierto estos, entonces podemos trabajar con calificaciones de presupuesto, mejor Imagen de Cafe, algo similar, yo solo seguiría sumando para todos ellos. Entonces básicamente texto. Y entonces podemos agregar, uh post punto valor presupuestal. Esto está ahí. Ahora lo que podemos hacer es agregar alguna fuente, fuente personalizada, otra vez, fuentes, punto negrita, y luego podremos tener un tamaño de, como, ya sabes, 50, supongo. Vamos a ver cómo resulta. El estilo de primer plano sería punto negro. Entonces podemos tener algo de relleno. El relleno sería horizontal, y luego diez píxeles, supongo, entonces podemos darle algo de relleno en general también. Entonces podemos tener un espaciador. Y esto está ahí, supongo. Esto se hace por la parte presupuestal. Ahora tenemos que lidiar con las calificaciones y todo, así podemos agregar otra pila vertical. Podemos agregar, ¿ qué tal si simplemente copiamos esta cosa y vemos qué cambios necesitamos hacer? Entonces tenemos otra pila vertical. Esta vez, lo llamaré calificaciones y quitaré la T. También tiene un ancho máximo de infinito y todo. Eso está bien. Tamaño 12, tenemos alguna pila vertical de nuevo porque necesitamos mostrar realmente todas las calificaciones que está en forma de diccionario. Entonces eso es lo que vamos a hacer aquí. Tenemos una pila vertical con una alineación de líder y contenido que podemos ingresar, y ahora podemos agregar texto. El texto mostraría algo así como la vida nocturna, y podemos darle algunas etiquetas hash aquí. Entonces podemos agregar calificaciones de puntos de publicación. Y dentro de las calificaciones, tenemos que acceder a esa calificación específica de vida nocturna. Entonces escribiremos vida nocturna y accederemos a los valores. Entonces, bien, es del tipo string opcional, así que eso es lo que hice. Nuevamente, debería tener algo como esto, así podemos copiar y pegar esto. Podemos quitar esto de aquí. El relleno horizontal solo debería ser de cuatro píxeles, diría yo, y el tamaño sería pequeño porque necesitamos agregar calificaciones para los otros también. Entonces esta era para la vida nocturna. Entonces podemos tener por seguridad. Podría quitar la S, y podemos escribir seguridad aquí. Esto está ahí. Ahora lo que podemos hacer es agregar uno para la limpieza. Así limpieza limpia. Y entonces podemos usar el mismo valor aquí. Esto está ahí. Ahora lo que podemos hacer es agregar para Transporte, copiar esto aquí, pegar esto aquí. Entonces todo esto me parece bien. Todavía podemos agregar algún tipo de espaciador aquí abajo para que empuje todo hacia arriba. Bien. Esto está ahí. Ahora estaba pensando eso, Bien, esto tiene sentido. Ahora también podemos agregar algunos antecedentes a esta vista. Entonces este fondo sería color UI color y juego verde o algo así. Entonces esto está ahí. Lo que podemos hacer ahora es que podamos plegar esta pila vertical hacia arriba y tal vez necesitemos usar algo similar aquí para el mejor café mejor post. Entonces eso es lo que vamos a hacer aquí. Podemos usar la mejor URL de imagen de café. Y la mejor imagen de café. Estamos accediendo a eso. Ahora pasaríamos en la mejor URL de imagen de café. Y creo que aquí no hace falta cambiar algo porque es la misma funcionalidad, diría yo. Podemos darle algún ancho de, como, ancho y alto de alto, que es lo que definimos. Entonces siento que esta cosa también tiene que ir aquí. Y si, entonces esto funciona bien. Esto está ahí. Hemos agregado el mejor café. Ahora podemos hacer lo mismo por Um, ya sabes, podemos hacer lo mismo por el ¿cómo lo llamas? Quédate. Pero entonces estaba pensando también que en vez de hacer todo esto, quiero decir, obviamente, vamos a hacer todo esto. Pero como dentro de esto, en lugar de solo la imagen, podemos agregar una pila Z. Podemos agregar la pila Z. Podemos pasar en la imagen. Lo que podemos hacer aquí es que encima de la imagen, podamos mostrar el subtítulo que el usuario ha proporcionado. Entonces eso es lo que voy a hacer aquí. Podemos agregar post dot best cafe caption. Esto está ahí. Obviamente, algunas fuentes personalizadas, tan personalizadas. Entonces podemos tener fuentes punto negrita, y luego podemos tener un tamaño 18. Entonces esto debe estar ahí. Entonces podemos hacer es ese color de primer plano, y debería ser del blanco, y entonces podemos tener relleno, que sería horizontal y sería como diez pixeles Entonces esto está ahí. Ahora lo que podemos hacer es simplemente copiar todo esto y seguir algo similar para nuestra mejor leyenda de estadía y todo. Así podemos usar best stay caption, best image URL. Y entonces podemos aquí en Best Image. Podemos usar esto en lugar de esto, y aquí podemos usar best stay caption. Entonces esto está ahí. Ahora bien, ¿qué más queda? Creo que sólo queda una propiedad, que es debe llevar cosas. Entonces para debe llevar cosas, podemos de nuevo, crear una pila vertical porque creo que debe llevar cosas incluye una matriz de básicamente, incluye múltiples, uh cosas como texto separado por comas Entonces para eso podemos hacer es que podamos enumerarlos todos aquí abajo de alguna manera. Entonces eso es lo que voy por aquí, la mayor propiedad y no tres mi mal. Lo que podemos hacer es agregar font, font, custom, y luego serían fuentes punto negrita. Entonces podemos agregarle algún tamaño, y luego podemos agregar un marco de, como, ancho máximo con like, no, esto está mal. Podemos retirarlo de aquí. El ancho máximo volvería a ser infinito. Entonces la alineación sería líder. Entonces esto está ahí. Entonces podemos agregarle un poco de relleno con cuatro píxeles. Entonces esto está bien. Entonces podemos tener un espaciador, y luego estaría el texto, y no lo entiendo. Bien, necesita un punto aquí. Eso está bien. Podemos agregar un texto aquí. Y para el texto, en realidad usaríamos una pose punto debe llevar cosas, y luego solo podemos darle alguna fuente, y obviamente sería fuentes personalizadas punto negrita, y el tamaño debería estar alrededor de algo así como 22 o algo así. He probado esto antes con esta talla, así que siento que esto debería funcionar. Esto debería ser negro. Entonces tenemos un poco de relleno, relleno debe ser horizontal. Entonces podemos tener algún marco aquí. El marco debe tener un ancho. Bien, entonces DDH, el ancho debe ser ancho y el alto debe ser solo alto Creo que hemos definido o simplemente podemos dejar la altura B porque no quiero que se restrinja vía altura, sino que lo que podemos hacer es que podamos agregar horizontal aquí, tamaños fijos horizontales, entonces tendría caídas de valor, y para vertical, sería verdad. Entonces te permite, como, ya sabes, um, expandirse verticalmente en vez de horizontalmente, así que esto está ahí, entonces podemos agregar un espaciador aquí y agregar el espacio o aquí. Esto está ahí, se completa la pila vertical. Ahora lo que haríamos es que le daríamos un trasfondo a todo esto. Así que el color de fondo. Color de la interfaz de usuario. Esto sería juego verde. Entonces íbamos a darle un marco, por lo que el marco tendría un ancho. ¿Por qué es? Mi gorras está puesta. Entonces el ancho sería ancho obviamente. La altura sería la altura, obviamente. Estos son los valores que he definido anteriormente, así que eso es lo que estoy usando aquí. Y esto está ahí, esto está ahí. Podemos desplegar esto. Estamos tratando de darle algo a esta pila vertical no creo así que necesitamos darle a la pila vertical. Sí, creo que para las calificaciones y todo, necesitaríamos Estoy pensando que tenemos calificaciones y no necesitamos usar estas cosas dentro de las calificaciones, cierto, porque eso es diferente. Tenemos que pasarlos por aquí. Entonces esto está ahí, esto está ahí, y la pila vertical debe llevar cosas ahí. ¿Qué es esto? Bien, esto está bien. Podemos tener algún tipo de color de fondo. Aquí, y podemos tener un espaciador aquí también. Entonces esto tendría mucho más sentido. Podemos hacer control I para sangrarlo perfectamente. Entonces esta cosa está ahí si está ahí. Este trasfondo, estoy pensando eso, ¿necesitamos darle algún No, no creo que así sea que tengamos que darle algunos valores. En cambio, tenemos que darle algunos valores a la vista de tabulación. Así podemos pegarlos aquí. El color de fondo debe ser verde juego y todo. El marco debería ser esto. Entonces tenemos una forma de clip, forma clip de un rectángulo redondeado con un radio de esquina. Entonces para el radio de la esquina, no esto, sí. Radio de esquina, el radio de esquina debe ser como 12 píxeles, y luego podemos tener un estilo de pestaña. Un estilo tabú sería la página t así que estilo Paget, y dentro de aquí, tendríamos el modo de visualización de índice como nunca Por lo que no vamos a mostrar esos puntos en, donde se encuentra actualmente el usuario. Esa es una decisión de UI que tomé, así que no depende completamente de ti seguir eso, pero sí. Obviamente, pronto haremos algunas mejoras en la interfaz de usuario, pero solo por ahora, solo queríamos probar esto, así que eso es lo que voy a hacer aquí. Ahora necesitamos hacer algunos cambios dentro de nuestro Creo que nuestra vista de perfil de usuario donde inicialmente estábamos tratando de mostrar todo el asunto. Entonces, básicamente, si vamos a Vista de perfil de usuario, la vista de perfil de usuario está aquí, podemos simplemente, um, mantener estas funciones fuera por ahora. Entonces hagámoslo. O dice eso, bien, nos da un error que era obvio. Dice esa hoja, que agregamos antes, no va a funcionar ahora porque está diciendo que es imagen seleccionada. Se está preguntando, y no hay una imagen seleccionada en llamada, lo cual tiene sentido, que tiene sentido por completo. Entonces, ¿cómo resolveríamos esto ahora? Entonces eso es lo que estoy pensando que ahora mismo no tenemos realmente una imagen seleccionada ni nada. Entonces, ¿cómo trabajaríamos con eso? Entonces, permítanme pensar rápidamente qué podemos hacer. ¿Qué tal si simplemente eliminamos esto por ahora? Entonces la funcionalidad está en pausa por ahora porque necesitamos resolverla. Al igual que, ¿cómo trabajaríamos con ese valor? Entonces por ahora, tenemos el rectángulo COVI. Podemos agregar los enlaces de navegación. Eso está bien, pero entonces tenemos que hacer una cosa más. Lo cual es agregar una vista de desplazamiento aquí, básicamente. Entonces eso es en lo que estaba pensando, y podemos simplemente plegar estas cosas. Rectángulo curvo aquí. Esto es todo. Podemos, entonces esta es una hora de visualización de desplazamiento. Y justo debajo de lo de nuestro poste de yate, podemos agregar una vista de desplazamiento ahora, y esta vista de desplazamiento contendría una cuadrícula perezosa, básicamente. Entonces, básicamente, esto sería una grilla que mostraría como dos postes uno al lado del otro. Entonces esa es la mirada que voy a buscar. Entonces, para las columnas, en realidad tendríamos que darle un elemento de cuadrícula, básicamente. Entonces sería un elemento de cuadrícula. El elemento de la cuadrícula sería del tipo o flexible. Entonces esto está ahí, podemos inicializarlo así. Lo siento por eso. Ahora lo que podemos hacer es que podamos agregar otro elemento de la cuadrícula, y este elemento de la cuadrícula en realidad tendría Lo siento por eso. Flexible nuevamente, y este flexible no necesita ningún mínimo ni máximo, por lo que podemos eliminar esto. Básicamente, estamos agregando dos elementos de cuadrícula en nuestra cuadrícula perezosos. Entonces esto es a lo que vamos a buscar. Podemos, um, ¿por qué está teniendo tanto de ¿Por qué tiene tantas líneas extra? Básicamente, necesitamos algo de espaciado, y básicamente el espaciado sería como diez píxeles, y luego podemos cerrar esto. Podemos abrir esto. Entonces, veamos qué hemos hecho aquí. Hemos agregado columnas. Columnas incluye dos elementos de cuadrícula. Podemos presionar Enter aquí, entonces esto está ahí, esto está ahí. Y ahora lo que podemos hacer es tener espaciado aquí, y ahora dentro del cierre, en realidad usaríamos para cada loop y repasaríamos el loop de nuestro post, básicamente. Entonces en este momento agregaríamos el modelo de vista. Viewmdel punto post en realidad estaría poblado con el post, así que eso es lo que vamos a por aquí Para el ID, usaríamos post ID. Eso simplemente se define. Podemos agregar un post en valor aquí. Podemos agregar post view sell aquí, y el post que vendes acepta un post, así que eso es lo que vamos a buscar. Y luego dentro de un grado Laz V, podemos agregar así que esto está ahí Este es el cierre, y este es el cierre de vista de desplazamiento. Entonces aquí mismo, podemos darle un poco de relleno. Entonces eso es lo que vamos a hacer aquí. Entonces tenemos la vista y la cuadrícula de Laz V, y solo puedes pegarla aquí así Entonces esto está ahí, y dentro en aparecen ni siquiera los datos fetuser Necesitamos agregar viewmdel punto fetch User post también. Entonces ojalá, lo que pasaría es que ahora mismo, acabamos de ejecutar la app, lo primero que creo es que no debería fallar. La otra cosa que creo es que debería mostrar la primera imagen en la parte superior en la interfaz de usuario que hemos hecho así que yo solo me encargaría de ello, como, ¿cómo se ve para ser? Entonces eso es lo que vamos a por aquí, y vamos a ver cómo sale a ser. Podría hacer o deshacer todo el asunto. Quiero decir, bien, así que esto es una especie de apuesta porque, como, no estoy muy seguro de si funcionaría en el primer intento, pero vamos a ver qué pasa Y sé que el post UI fue algo muy agitado. Entonces, en realidad te proporcionaría un archivo para que puedas, uh, puedes, bien. Entonces esto me queda bien , diría yo. Se trata de cargar la imagen, entonces tiene esto, después tiene el presupuesto, después tiene las calificaciones. Entonces tiene no puede cargar estas imágenes porque no están ahí. Vea cómo deben llevar las cosas también se enumeran abajo de una muy buena manera. Entonces esto realmente salió a ser realmente genial, diría yo. Todo me queda muy bien. Entonces sí, esto está ahí. Esta es nuestra vista de publicación que hemos hecho. Lo que haríamos ahora es que finalmente saltaríamos a la vista Crear publicación. Y bien, la interfaz de usuario también está funcionando. Se desplaza así. Entonces ahora realmente trabajaríamos en nuestra vista Crear publicación, y luego solo podemos funcionar el todo, para que podamos agregar imágenes personalizadas, y también tenemos que trabajar en la hoja porque en este momento, obviamente, no necesitamos una hoja en la vista del perfil de usuario porque nos estamos alejando perfil de usuario para crear la vista de publicación. Entonces eso definitivamente no es necesario. Entonces, dentro de una vista de Crear publicación, manejaremos el recogedor de imágenes allí Entonces ahí está, bien, así que espero ver en el siguiente video, finalmente saltaremos a la vista Crear publicación. Y trataría de proporcionar el archivo para esta interfaz de usuario porque esta vista de publicación era algo algo agitado de seguir porque estaba viendo muchas cosas y solo porque la había hecho antes, así que solo sabía lo que estaba haciendo Pero para que alguien le diera seguimiento a esto, fue un poco difícil. Yo puedo entender ese hecho. Entonces bien, voy a trabajar en eso, y bien, espero verlo en el siguiente video. Nuevamente, si tienes alguna duda, podrías simplemente dejarlas en los comentarios, y bien, seguiremos mejorando nuestra UI y todo y trabajaremos en la app. Entonces espero ver en el siguiente video. Gracias. 21. UI de vista de CreatePost: Pasando al curso, hemos creado una vista de publicación, que acabamos de ver en el último video. Así que ahora es el momento de que creamos una Vista de Crear Publicación. Dentro de aquí, puedes simplemente hacer clic en Comando y seleccionar una vista de interfaz de usuario rápida, nombrarla, crear vista de publicación, presionar en enter, y esto está ahí. Quitas el cierre de vista previa de aquí porque no es realmente necesario. Obviamente requeriríamos el modelo de vista, así observamos el modelo de vista de objeto observado. Que sería del tipo modelo de vista principal. Esto debe estar ahí. Entonces pensemos en qué más necesitaríamos. Necesitaríamos un modo ambiente. Entonces ambiente porque necesitamos ir y venir desde esta vista, así es por eso que lo estamos agregando aquí, modo de presentación. Y podemos nombrar a este modo de presentación. Esto está ahí. Ahora necesitamos crear algunas propiedades privadas estatales aquí porque necesitamos trabajar con el picker de imágenes, por lo que mostrar el picker de imágenes, que sería por defecto cae Podemos quedarnos con la P capital. Esto está ahí. Ahora bien, ¿ qué más tenemos que hacer? Necesitamos crear otra propiedad de estado, que de nuevo sería la que nuevamente sería para el tipo de imagen, se debería seleccionar tipo de imagen, tipo de imagen, y sería del tipo de imagen. Y mantengámoslo opcional porque no queremos ningún valor predeterminado desde el principio, entonces podemos copiar esto y pausar varias veces porque necesitamos algo para ¿necesitamos algo para ¿necesitamos mensaje de alerta o algo así cuando el usuario sube correctamente una publicación Entonces para eso, podemos tener una debería estar mostrando mensaje de alerta, que sería de la configuración tolean a archivos, texto de mensaje de alerta, que podría ser una cadena vacía Y creo que estos son todos los valores que necesitamos. Ahora, permítanme pensar que necesitamos mostrar una alerta cuando el usuario realiza correctamente una publicación o bien no lo hacen, falla, para que podamos alertar al usuario al respecto. Debe haber un mensaje de alerta. Y sí, así que eso es todo. Entonces si recuerdas, desde el modelo de vista oth, la vista ath no el modelo Ot View, quiero decir , básicamente, estaba afirmando que teníamos este, um, fondo creado, que era una especie de fondo personalizado. Entonces estaba pensando que podríamos usar el mismo fondo y crear una vista de publicación también. Y sólo sería bueno. Entonces, solo quiero decir, me gusta ese trasfondo, y siento que estaría bien usar eso. Entonces esto está ahí, el lector de geometría, también podemos cerrar. Entonces hemos creado un fondo. Y, bien, ahora podemos comenzar por crear una vista de desplazamiento. Y la vista scroll tendría un espaciador en la parte superior porque, como, lo que sucede es que cuando agregas una vista de desplazamiento y no le das algo de espacio algún espacio en la parte superior, todas las cosas cambian y cruza el, ya sabes, el área segura de pantalla porque en una pila Z, realidad vamos a tener área ignosafe Que todo el fondo se vea todo el patrón que estamos tratando de hacer aquí se ve bien y bien. Entonces ese es el ahora solo comencemos agregando los botones de retroceso. Entonces eso incluiría una acción y una etiqueta. Así que etiqueta ahí para la acción, simplemente tendríamos modo de presentación punto envuelto valor punto descartar Y para la etiqueta, tendríamos un texto de vuelta. Entonces básicamente declarando de nuevo. Y esto está ahí. Ahora puedes darle una fuente de fuentes personalizadas punto negrita. Y para la talla, se le puede dar una talla 12. Eso está bien. Entonces podemos tener algún color de primer plano, básicamente, y el color fground debe ser negro, no azul, negro Entonces podemos tener algo de relleno. Entonces podemos agregarle un fondo, y el fondo incluiría algunos colores. Entonces el color de la interfaz de usuario, y podemos tener amarillo primario por ahora, y podemos investigarlo si no parece adecuado. Podemos tener un radio de diez pixeles. Entonces podemos tener una superposición, no esta, sino la superposición normal y la superposición estaría alrededor un rectángulo con algunos trazos, así que eso es lo que vamos a hacer aquí, y ahí le agregamos algún trazo. Podemos eliminar esta línea de color con dos o tal vez uno píxeles. Esto está ahí. Ahora para el botón que realmente haríamos es que nosotros en un fotograma con un máximo con infinito, alineación sería líder y le podemos dar un poco de relleno que no se pegue a lo más alto a la izquierda, y se ve raro de esa manera, así es por eso que estamos haciendo eso Ahora podemos agregar una pila vertical aquí, básicamente. Entonces esta pila vertical que estamos creando en realidad tendría todos nuestros ya sabes, todos los elementos de nuestra vista, básicamente, como todos los campos de texto y todo. Entonces podemos escribir el selector de imagen para la imagen principal, digamos, o imagen de héroe Entonces eso es lo que estamos haciendo aquí. Agregamos un botón con una acción y una etiqueta. Para la acción, habríamos seleccionado el tipo de imagen seleccionado para hero image, y mostrar el picker de imagen se establecería en true Y no es exactamente cierto, pero podemos alternar esto. Así que alternar esencialmente solo desplaza el valor del booleano Entonces, si es verdad, lo convierte en falso, y si es falso, lo convierte en verdadero. Entonces eso es lo que estamos haciendo aquí. Para la etiqueta, estamos pensando en una manera. Entonces mi idea detrás de aquí es que, supongamos que se te está mostrando un botón. Se da click en él, se muestra un selector de imágenes. En el momento en que seleccionas una imagen, la imagen tiene lugar del botón. Entonces sigue siendo un botón, pero ahora la interfaz de usuario ha cambiado a solo una imagen. Entonces, si vuelves a hacer clic en esa imagen, nuevamente te muestra el selector y puedes cambiar Entonces eso es lo que voy a buscar aquí. Así que podemos hacer dejo héroe imagen es igual a viewmdel dot Hero Acabo de recibir un auto completo de Swift, así que eso es genial. Imagen UI, y podemos tener o imagen aquí. Entonces podemos agregarle redimensionable. Podemos agregarle relación de aspecto, relleno de punto de estado de ánimo de contenido. Podemos agregarle algún fotograma, por lo que el fotograma sería de altura, y podemos darle un valor de 200 píxeles. Entonces eso está ahí. Ahora lo que podemos hacer es que le podamos agregar una forma de clip. Y la forma de clip estaría alrededor un rectángulo con radio de esquina, y eso serían diez píxeles. Sólo trato de que toda la vista se vea un poco bien. Eso es todo, como, agregar radio de esquina y todo. Y de lo contrario, si la imagen no ha sido seleccionada y ahí no está presente, lo que podemos hacer es pedirles que seleccionen imagen de héroe, básicamente. Y podemos usar nuestro estilo de botón personalizado aquí. Así que eso nos facilita las cosas porque ahora tenemos listo el estilo del botón D, así que realmente no necesitamos, ya sabes, agregar algo más. Lo que podemos hacer es que sí, podemos plegar esta cosa, así tenemos la pila vertical que se está poniendo aquí. Ahora podemos agregar campos de texto para otras entradas. Entonces el primer campo de texto sería el primer campo de texto tendría el nombre del lugar, entonces el nombre del lugar. Y vamos a corregir D L aquí. Ahora podemos tener la propiedad text, que en realidad tendría punto modelo. Cuál era el Bien, así que el nombre era el nombre del lugar. Eso está ahí. Ahora podemos tener nuestro estilo de campo de texto personalizado, y con el color, podemos darle blanco o algo así. Entonces eso está ahí. Sólo puedes copiar esta cosa. Podemos volver a teclearlo. Podemos agregar la URL de tu lista de reproducción. Y esta sería la URL de la lista de reproducción. Esto está ahí. Ahora podemos agregar otro campo y lo haremos por presupuesto. Entonces esto está ahí. Cambiémoslo a presupuesto. Ahora que hemos creado esto, lo que podemos hacer es, um, lo que podemos hacer aquí ahora es que podamos tener la sección de calificaciones. Entonces, la sección de calificación incluiría esencialmente una pila vertical, de nuevo, porque las calificaciones estarían algo segregadas de los otros campos de texto porque es un poco diferente, sabes, tratando de hacer que esa cosa funcione, y vamos a agregar un poco de espaciado también Entonces estoy pensando en crear como una cuadrícula de cuatro por cuatro o algo así. Entonces, si eso tiene sentido, así, tendríamos, como, ya sabes, toda la calificación segregando de alguna manera, calificaciones deberían tener un estilo de botón personalizado o algo así, hagamos que destaque este encabezado puede agregar una cabeza de etiqueta hash para facilitar las cosas al usuario para que averiguarlo, bien, aquí hay un campo diferente. Podemos usar este campo de texto aquí. Ahora lo que podemos hacer es eso Ahora, lo que podemos hacer aquí ahora es que podamos sumar vida nocturna, y esto debería ser vida nocturna leyendo usotex estilo de campo es esto, y obviamente, sería del tipo de teclado decimal porque estamos tomando en un Entonces eso es lo que estamos haciendo. Podemos copiar esto de nuevo. Podemos pegarlo, y llamémoslo seguridad. Eso está ahí. Teníamos una calificación de seguridad. Todo esto está bien. Y lo que yo haría es que podamos copiar todo esto y volver a pegarlo. Y esta vez lo usaríamos para los valores. Bien. Acabo de ver eso um, calificación de limpieza y limpieza, y luego podemos tener transporte, y tendría calificación de transporte. Entonces esto está bien. Ahora lo que podemos hacer es que podamos darle a toda la pila vertical algún tipo de relleno, plegar estas dos pilas de cuña hacia arriba, y podemos plegar esta pila vertical también hacia arriba. Esto está ahí. Ahora podemos tener imagen de café, y pie de foto. Entonces sí, esto está ahí. Vamos a agregar botón. Y el botón que básicamente haría es que el tipo de imagen seleccionado se debe seleccionar a la imagen del café y mostrar el picker de imagen debe ser alternado Y para la etiqueta, creo que nos vendría bien lo mismo que hicimos arriba. Y supongo que esto fue todo. Así que solo estoy copiando todo esto, regresando aquí, pegándolo aquí Ahora lo que haríamos es que seleccionemos la mejor imagen de café, y debería ser imagen de café. Entonces esto está ahí. Podemos pasar en la imagen del café aquí y seleccionar la imagen del café. Podemos nombrar el botón, algo así. Quiero decir, esto me suena bien, y lo que podemos hacer ahora es que podemos seleccionar esta cosa. Después de que termine este botón, podemos agregar esto y podemos escribir leyenda de café. O algo así, y podemos usar la mejor leyenda de café. Entonces esto está ahí. Ahora podemos copiar todo esto y necesitamos reutilizarlo porque necesitamos mostrarlo dentro para la estancia también. Entonces esta sería Say image ahora. Esto debería ser imagen de estancia, mejor Imagen, mejor día Imagen. Lo pasamos aquí, seleccionamos Stay image, stay caption, y debería ser el mejor título de estadía. Bien, esto está ahí. Entonces creo que también hemos configurado la imagen Say. avanzar, necesitamos otro campo para, ya sabes, el veo dos pilas verticales aquí. Así que solo estoy pensando que ¿estamos estropeando esto de alguna manera? Básicamente, esta pila vertical está ahí y estamos pasando todo dentro de ella. Entonces, esto parece estar bien. Podemos agregar un campo de texto. Porque por lo que recuerdo, no se pueden agregar más de diez cosas dentro del componente swift UI como una pila vertical o un grupo o algo así. Entonces por eso estoy pensando que el estilo de botón personalizado debería estar ahí. A lo mejor me pueda arrojar un error en cualquier momento dado. No estoy muy seguro al respecto, pero veamos que tu modelo debe llevar cosas, y solo permitiremos que la gente agregue cosas, ya sabes, en estilo de rueda de texto personalizado. Volvamos a darle el color blanco. Simplemente permitiremos que la gente lo escriba, y confiaremos en ellos en esto que agreguen espacios apropiados entre las cosas que están agregando. Así que eso nos facilita, ya sabes, manejar el texto. si no lo hacen, si no lo hacen, todavía podemos tener un poco de cosas aquí y allá en el sentido de que podamos encargarnos de eso más adelante en nuestra versión VT, básicamente probando como mejoras de usuario y experiencia de usuario. Entonces eso es en lo que estoy pensando. Ahora bien, ¿qué debemos hacer aquí? Básicamente, el botón debe tener una acción y la acción debe ser una tarea. Y esta tarea sería la misma que la vista del perfil de usuario. Nosotros vamos a Inicio feed, y ya ves esto. Entonces ya no lo necesitamos aquí. Vamos a añadir después, algo algo, vamos aquí, pegamos eso aquí. Entonces esto me parece bien. Para la etiqueta, podemos agregar un texto. El texto diría, básicamente, Add post, y esto tendría un estilo de botón personalizado. Entonces eso está ahí. Ahora que también hemos agregado este botón, solo por hacer que la parte inferior de la vista sea un poco buena en el sentido que no recorta el botón o algo así. Agreguemos un espaciador aquí. 100 píxeles, y también podemos agregar algo de relleno a toda la pila vertical. Entonces estas cosas están ahí. Ahora lo podemos hacer es que podamos agregar, ¿qué tenemos que hacer aquí, básicamente? Sólo estoy pensando que obviamente necesitamos tenemos que quitar estos. Podemos plegar la pila vertical básicamente, y tenemos la vista scroll aquí. Debajo de la vista de desplazamiento, podemos agregar botón de barra de navegación oculto y podemos pasar el valor a través. Entonces podemos agregar una hoja aquí básicamente, Sheet se presenta y como se presenta realmente debería tener este show image picker para el contenido, podemos hacer algo como esto y mostrar el picker de imagen que habíamos hecho picker de imagen El selector de imágenes obviamente toma algunas cosas. Entonces se seleccionaría el tipo de imagen. Si no lo es, entonces podemos tener un valor predeterminado de imagen de héroe. On Image pick nos da una imagen porque creamos al cierre. Ahora lo que hacemos es que si dejar la imagen sea igual a imagen porque es una imagen opcional. Entonces solo lo estamos desenvolviendo primero, comprobando si no es, ya sabes, comprobando si no está vacío o algo así, y luego podemos tener el modelo dot Hero image set to image Entonces tenemos que verificar todos esos casos ahora que básicamente tenemos tres casos. Entonces estamos comprobando si Takase es imagen de héroe para el tipo de imagen, asignamos a la imagen de héroe Si es Takase, la etiqueta de la caja solo puede aparecer dentro de una etiqueta de interruptor Bien, bien, bien. No agregué una declaración switch. Que estaba pensando que por qué me está dando error y me estoy perdiendo algo. Entonces necesitamos imagen seleccionada. Oh, esto es genial. Podemos eliminar esto. Podemos cortar esto, pegar esto aquí, pegar esto aquí. Llamaremos a esta mejor imagen de café. Y para el modelo de vista, podemos pegar esto de nuevo y podemos llamar a esta imagen de estancia es igual a imagen, y podemos tener un valor por defecto. Básicamente, eso donde rompemos la sentencia switch. Entonces esto está ahí. Ahora simplemente podemos cerrar la hoja. Y espero que hayan entendido que lo que estamos haciendo aquí, básicamente, usando la hoja Swift UI con este valor booleano, por lo que cambia si está apareciendo o no Sólo los botones pueden alternar eso. Después abrimos el recogedor de imágenes. Toma en nuestro parámetro de imagen seleccionado, que es una propiedad recta privada aquí. Lo que hacemos es que solo estamos encendiendo el tipo de imagen seleccionado, y el tipo de imagen seleccionado se establece en todos estos botones. Entonces, si hacemos clic en la imagen de héroe, selecciona el tipo de imagen Hero como imagen de héroe. Entonces la imagen que estamos obteniendo del picker de imagen, asignamos a esa imagen dentro del modelo de vista para que todos los valores se asignen a las propiedades publicadas, y de esa manera podremos manejar múltiples imágenes. Entonces esto está ahí. Ahora lo que estaba pensando es que ya que es una pila Z, eso significa que si se está cargando. No se agregó ningún cargador para aquí. Estaba pensando que si se está haciendo la llamada EPI , podemos mostrar el cargador Pero solo esperemos y verifiquemos las funcionalidades antes de hacer eso, eso tendría mucho más sentido para nosotros. Además, dado que esta vista tiene muchos teclados y campos de texto, lo que podemos hacer es que podamos tener opción de edición final aquí y texto um, edición, algo así En realidad no está apareciendo, así que podemos investigar eso. Así que descarta el campo de texto. Toqué en cualquier parte dentro de la vista, esta cosa tenemos que investigar porque, um, Bien, entonces esto no es algo predefinido Entonces creo que podríamos necesitar escribir algún tipo de extensión para que funcione. Entonces eso está ahí, y lo que podemos hacer es agregar un on appear también. Vamos a sólo Ups. Solo mantengamos esto así. Esto está ahí, esto está ahí. Y dentro en código de aparecer, podemos agregar modelo de vista. Y no lo creo, realmente necesitamos buscar nada antes de hacer el post create O sea, ¿tenemos el usuario de la base de datos? ¿Tenemos el usuario de la base de datos listo con nosotros? Oh, bien, lo que pasa es que por lo que sé, la primera vista que ve el usuario es la vista del perfil del usuario. Entonces, dentro de la vista de perfil de usuario, ya estamos haciendo una llamada de búsqueda de datos de usuario Entonces nuestro usuario de base de datos está poblado. Entonces aquí, incluso dentro de la función, esta función estoy hablando de la que he escrito. Sí, así que probablemente tendría algún valor. Nos encargaremos de ello si en caso de que no funcione, también está bien. Nosotros nos encargaremos de eso. Entonces eso está ahí. mantenerlo vacío por ahora. Estas cosas están ahí. Ahora lo que tenemos que hacer es que necesitamos hacer algunos cambios menores dentro de nuestra vista de perfil de usuario. Así que vamos ahí. Básicamente, haremos el Comando F, y luego buscaremos un nuevo puesto. Nos adentramos en New Post. Este sería un enlace de navegación ahora. Y dentro del enlace de navegación, en realidad agregaríamos la vista Crear publicación. Una vista Crear publicación toma en un modelo de vista, que sería nuestro modelo de vista. Entonces esto está ahí. No lo creo, realmente necesitamos agregar nada más por ahora. Ahora que tenemos tanto, ya hemos eliminado la funcionalidad de feed home, así que accidentalmente, no haremos ninguna llamada a la API. Estas cosas están ahí, la vista Configuración ya está configurada. Entonces, ¿qué tal ahora solo creamos el salario Explore? Básicamente, tenemos la vista de configuración, y luego tenemos el poste rectángulo COVI Entonces lo que podemos hacer es que podamos crear una pila ET, poner todo este enlace de navegación dentro de ahí, quitar este marco. Ya no lo necesitamos. Podemos agregar un espaciador aquí. Y podemos copiar todo esto, pegarlo de nuevo. Podemos llamarlo Explore, página que pronto se agregará. Entonces esto está ahí. Ahora dentro de aquí, podemos agregar Explorar. Pero ya te dije que en realidad no quiero mi rectángulo de vaca tenga lo mismo que este. Básicamente, podemos eliminar el color de primer plano porque ahora mismo le agregaríamos algún tipo de degradado relleno Entonces eso es con lo que vamos a trabajar ahora. Voy a usar un gradiente lineal para esto y dentro de un gradiente lineal, no necesitamos estos autocompletados Podemos agregar un gradiente, y este gradiente sería una clase de gradiente. Ahora la clase de degradado puede tener colores, y es una matriz de colores. Así podemos abrir una matriz vacía. Ahora dentro de una matriz de colores, podemos agregar color punto blanco. Podemos agregar color U coolor Máximo amarillo Esto está ahí. Podemos añadir otra coma aquí. Ahora podemos agregar color UI color, punto, azul, criola Podemos agregar color, color de interfaz de usuario. Ahora podemos agregar azul claro. Esto está ahí. Ahora podemos agregar color punto color punto blanco nuevo para resumir esto. Entonces estos son los colores. Hay un punto de partida, ahí está el punto final. Para el punto de partida, debería ser como el líder superior y para el punto final, debería ser el final inferior. Entonces, básicamente, el líder superior significa que el final superior izquierdo e inferior es la esquina inferior derecha. Entonces esto está ahí. Podemos eliminar el espaciado, y dice, el relleno de instancia requiere que algunas vistas se ajusten al estilo de forma. No estoy realmente um no muy seguro de eso. ¿Qué significa eso? Es decir, sí se ajusta a la forma. Entonces, ¿hay algo más que tenemos que hacer aquí? Podemos mantener esto ya que, uh el estilo Shape está ahí. Veamos qué pasa si lo conforma al estilo de forma. Por lo que dice que no se ajusta a la vista. Entonces esto es raro, pero déjame ver que tenemos relleno, y somos un gradiente lineal y esto debe estar ahí. Oh, bien, entonces me faltaba un paréntesis y pensé que había hecho algo mal con mi forma Pero de todos modos, entonces, Phil, tenemos un marco y tenemos una superposición con el texto de exploración El texto explore debe ser de color blanco. A mí me parece bien. Ahora que hemos hecho tanto, ya hemos agregado una vista scroll y todo. Entonces, lo más probable es que esto salga bien en este momento. Así que vamos a echarle un vistazo. Esperemos que esto parezca estar bien. Crearemos post una vista de creación de publicación y encargaremos de que ¿qué otros cambios necesitamos hacer? Y eso lo haríamos en breve entonces. Entonces bien, está construyendo, y vamos a comprobar esto ahora. Además, estaba afirmando que como hemos agregado el botón Explorar página, lo que podemos hacer ahora es que también podamos agregar una vista de página Explorar. Y antes de eso, necesitaríamos trabajar alrededor, ya sabes, de toda esta vista de perfil porque en este momento, no se ve del todo bien. ¿Qué tal si agregamos una imagen de perfil y todo a nuestra vista de perfil? Eso podría mejorar mucho las cosas. Así que vamos a comprobar ahora nuestra funcionalidad de crear publicación. Vamos dentro de un nuevo post. Esta es la opinión que vemos. Si hacemos click atrás, nos lleva de vuelta con nuestro modo de presentación. Entonces ahora ves que aquí se están declarando múltiples cosas. Entonces, si seleccionas esta cosa de imagen de héroe pide una imagen, seleccionas esta, y sigue siendo ese botón. Entonces solo la parte de la interfaz de usuario ha cambiado y puedes cambiar el botón con la ayuda de esto. Seleccionemos esta imagen por ahora. Ves que esta cosa se acerca, básicamente, las esquinas no están perfectamente alineadas con el overlay. Entonces esta cosa puedo ver. Entonces, ¿qué tal si entramos nuestra vista de creación de publicaciones y miramos en los campos de texto, básicamente Entonces aquí hay algunos campos de texto. Y lo que estaba pensando es que si dice esto, ¿qué tal si le damos un radio de esquina de, como, 12 píxeles ¿Eso soluciona el problema? Vamos a echarle un vistazo. Ojalá que sí, pero vamos a ver. Y si lo hace, necesitamos agregar esta cosa dentro de nuestro campo de texto personalizado también. Por lo que recuerdo, creo, bien. Esto todavía no viene. ¿Qué tal si vamos dentro de nuestro estilo de campo de texto personalizado y vemos que dónde está nuestro Así que hemos agregado una superposición con un radio de esquina. ¿Qué tal si agregamos aquí un radio de esquina de diez píxeles? Hemos hecho todo esto. Y ahora, veamos. Entonces sí, esto me parece bien. Entonces esto es lo que necesitábamos hacer. Y en el siguiente video, probaremos la funcionalidad y comprobaremos que si todo está funcionando bien. Por ahora, la interfaz de usuario me parece bien. Podrías hacerlo más colorido. Acabo de añadir un poco de tono blanco a todo el asunto. No es necesario que hagas eso. Entonces sí, puedes experimentar con esto, o bien en el siguiente video, podemos retomarlo y experimentar con diferentes colores. Entonces espero ver en el siguiente video. Y, de nuevo, si tienes alguna duda, podrías simplemente dejarlas abajo en los comentarios. Estaría muy feliz de ayudarle. Gracias. 22. Actualización de la IU para createPostView: En realidad hizo una pequeña adición al proyecto. Básicamente, agregué una nueva vista de archivo más EXT, y también agregué esta extensión aquí. Y lo que hace es que nos permite terminar la edición de texto tocando en cualquier lugar dentro de la vista. Entonces quitando esta cosa del radio de esquina, antes que nada, en realidad podemos agregar esto autodidacta, y esta funcionalidad nos permite descartar ese campo de texto Además, estaba pensando antes comenzar a probar la funcionalidad, podríamos cambiar la forma en que se ve toda esta vista porque en este momento realmente no me parece realmente interesante para mí. Lo siento por eso. Así que vamos a seleccionar el color de fondo. ¿No toma un color de fondo? Lo hace, debe ser de color. Entonces básicamente, color, debería ser color, color UI, punto Máximo amarillo, hagámoslo. Y qué tal si usamos esto para todas las imágenes. Entonces básicamente, aquí mismo, dentro de la imagen del café por dentro de aquí. Además, en lugar de todo esto del lector de geometría, solo podemos tener punto de color. Aquí sólo podemos tener punto negro. Y esto debería funcionar. Podemos entrar en todo este out. Y bien, entonces hemos agregado color máximo amarillo aquí. Para los campos de texto, lo que podemos hacer es agregar algo así como color, UI color punto azul claro con alguna opacidad de como 0.4 Entonces podemos probar esto, pegar esto aquí, pegar esto aquí, aquí adentro, vamos. Entonces vamos a ver cómo se ve todo, y me falta algo esto está ahí. Podemos quedarnos con esto por ahora. Debe llevar cosas editor de texto se puede dejar en blanco. Así que intentemos darle vuelta a la aplicación y veamos que dice que no tiene ningún elemento negro. ¿Qué tal esto? Entonces sí, ojalá esto funcione. Entonces en esta edición de texto y edición de texto también tenemos que probar. Entonces, después de hacer eso, finalmente podemos pasar a crear la página Explorar y todo porque no, primero íbamos a agregar una imagen de perfil a nuestro usuario de base de datos y mostrar esa imagen de perfil justo al lado nuestro nombre de usuario e ID de usuario que aparece en la vista del perfil. Entonces eso quedaría bien. Y también estaba pensando, ¿qué tal si acabamos de quitar el Bien, se ve algo así, que no es tan malo, diría yo. Es decir, la cosa azul más ligera en realidad no sale a ser realmente buena Es negro, así que funciona, pero un marcador de posición no parece estar presumiendo. Entonces, bien, esta es una versión de la vista create post que podemos tener, pero esta imagen en realidad se ve un poco fea. Entonces lo que podemos hacer es simplemente ir a nuestro color UI más EXT y ver qué colores podemos usar. Y nosotros agregó azul claro, que no parece funcionar Entonces podemos tener algún color verde sucio. No lo sé. No recuerdo muy bien de qué se trataba este color, así que podemos probar esto también. Podemos agregarlo aquí, aquí. Vamos a copiarlo aquí. Y donde quiera que esté presente, solo podemos cambiarlo manualmente. Creo que hay atajos para hacer eso también. Pero ahora mismo realmente no necesitamos investigar esos. Solo intentemos correr y ver primero. Entonces vamos a conocer si está funcionando o no porque el color del marcador de posición está estropeando, pero al mismo tiempo, el color del campo de texto se ve bien Al venir aquí, esto se ve incluso mal. Entonces, ¿qué tal si volvemos? Y podemos quedarnos así. Y en vez de, ya sabes, tener azul claro, lo podemos hacer es que solo podamos tener punto coloreado blanco Es decir, es la opción más segura para nosotros, así que solo podemos tener punto de color blanco. Podemos colocar aquí, aquí. Sólo vamos a ver dónde más está. Y esto está ahí, esto está ahí. Necesitamos así en tres lugares más, creo. Y en lugar de este punto de color negro, ¿qué tal si traemos de vuelta nuestro patrón, y podemos tener algún tipo de opacidad para ellos, como 0.3 píxeles Eso me parece bien. Solo intentemos ejecutar la aplicación ahora y veamos cómo se ve. Entonces ojalá se vea y bien por lo que acabamos de ver. Nuevo puesto. Este es su. Es decir, esto me parece mejor que las versiones anteriores. Entonces, en realidad iría con usar esto solo, y luego podemos avanzar para, ya sabes, crear la imagen de perfil T y trabajar aquí. Por cierto, la cosa Explode me parece bien sólo. Entonces quiero decir, si tienes algún otro color que quieras usar en el degradado, estás como, realmente, deberías probarlo. Entonces esto es todo, y creo que está tomando algo de tiempo cargando, así que bien, bien con eso. Aparte de eso, me parece bien. De hecho, más adelante en el curso manejaremos la funcionalidad de imagen ASIC porque si bien está bien, pero es un poco lento y también usa muchos Rams Entonces no queremos que la aplicación cause problemas en un dispositivo real. Entonces eso es lo que tenemos que encargarnos. Entonces, por ahora, esto parece estar bien. Y en el siguiente video, vamos a seguir adelante con trabajo con una imagen de perfil y todo. Entonces sí, eso está ahí, y luego podemos avanzar hacia la creación de las otras vistas de perfil de usuario para que las personas puedan verse y seguirse entre sí. Entonces sí, eso va a estar ahí. El feed casero va a estar ahí, y más adelante, agregaremos en nuestras compras también. Así que hay mucho que cubrir en el curso. Entonces sí, espero verte en el siguiente video. 23. Funcionalidad de actualización de imagen de perfil: Entonces, por si te lo estabas preguntando ¿por qué no probé toda la vista de publicación de crear? Es sólo por las razones por las que no tenemos suficientes imágenes en el simulador por defecto. Así que solo estaba agregando algunas imágenes a mi, uh, simulador, y acabo de hacer eso. A bajaron unas pocas como de diez a 30 imágenes para que pudiéramos usarlas. Entonces, ¿qué tal si simplemente vamos y, como, tratamos de hacer un post ahora? Así que vamos a seleccionar esta imagen. Entonces llamémoslo japonés estas playlist de café podrían no ser nada. Presupuesto sería como, 200 dólares. Las calificaciones serían cuatro, 44, cuatro, cuatro. Podemos avanzar, seleccionar la imagen del café. Podemos seleccionar Ds. Podemos seleccionar Legos. Entonces solo estoy tratando de hacer llamémoslo mis che fuera. Deben llevar las cosas deben ser en efectivo. Chamarra Amrela. Hagamos una publicación, y sabríamos si la publicación se completó a través de los registros, y no obtenemos ningún registro de error, así que ojalá se haya hecho la publicación. Bien. Entonces, en realidad, creo que realmente necesitamos un cargador aquí para que tenga algún sentido. Pero vamos a regresar, todavía tenemos que quitar esta cosa. Entonces eso es una cosa. Y vamos a ir a nuestra vista de perfil de usuario. Y aquí ya no necesitaríamos la imagen seleccionada, así que solo eliminemos esto. Sólo volvamos aquí. Solo volvamos a la configuración. Y sí, acabo de hacer un nuevo post que está apareciendo Japonés Japonés Japonés, y el texto es un poco largo, así que está recortando. Pero entonces otra vez, se está cargando, Legos está ahí, y entonces podríamos ver al señor Ow almacenar un paraguas Entonces sí, nuestras imágenes se están cargando bien. Solo esperemos a que se cargue, también. Entonces esta era nuestra imagen de héroe y esperando que funcionara bien. Básicamente, es esta imagen. Entonces sí, esto está ahí, y pronto veremos el problema de la imagen asíncrona porque es persistencia. Es persistente, quiero decir Así que vamos a ir a nuestro usuario de base de datos, antes que nada, y ahora necesitamos agregar un nuevo campo aquí, dejar imagen de perfil. En tipo de cadena y opcional. Básicamente, agregaremos una imagen de perfil ahora a lo nuestro, básicamente nuestro usuario de base de datos. Voy a entrar en nuestro modelo de vista principal. Aquí, en realidad agregaríamos un comentario que diría, imagen de perfil. Podemos hacer una propiedad publicada, básicamente, llamar a esta imagen de perfil sería del tipo opcional imagen UI. Esto está ahí. Ahora lo que tenemos que hacer es que necesitamos escribir una función para actualizar foto de perfil y dentro de nuestra ENM también, si vamos dentro del tipo de imagen, necesitamos agregar imagen de perfil para que se haga eso Esto está aquí. Lo que podemos hacer ahora es que dice que falta argumento para la imagen de perfil. Obviamente, tiene sentido. En breve nos encargaríamos de ello. Vamos a nuestra vista de configuración, antes que nada, y aquí agregaríamos la opción para el usuario agregue la imagen de perfil, seleccione guerra privada estatal y sería ShowImagePicker, y este sería un Así que vamos a darle no una opción, sino un valor booleano. Y vamos a tener un estado privado para la imagen seleccionada. Y eso sería de tipo imagen. Y podemos mantenerlo opcional. Entonces estaba pensando que podríamos no permitir los usuarios tengan una imagen de perfil desde el principio. Así que vamos a tener aquí una cadena vacía, y solo pueden actualizar la imagen de perfil mientras se ve la configuración. Entonces simplemente agregaríamos otro botón aquí, justo debajo de este, y este botón tendría una etiqueta también. Entonces eso está ahí. Dentro del botón, tendríamos Oh, imagen seleccionada seleccionada tipo de imagen. Vamos a hacerlo. Así se vuelve más fácil para nosotros. El tipo de imagen seleccionado es igual a la imagen de perfil de punto. Esto está ahí, ShowImagePike, punto Toggle. Entonces dentro de la etiqueta, tendríamos si imagen de perfil flatfile Lo que podemos hacer es mostrar la imagen. Como imagen de perfil de imagen de interfaz de usuario. Podemos tener redimensionable aquí. Podemos tener escala para llenar. Podemos darle un marco, básicamente, y el marco sería con 90, y podemos tener una forma de clip, básicamente, que sería círculo para que la gente pueda ver qué imagen seleccionaron y dentro la s y también podemos agregar un modificador de clip aquí. Y dentro de la condición se, agregaríamos un texto que básicamente dice seleccionar seleccionar un perfil, seleccionar una foto de perfil. Entonces esto está ahí. Por ahora, vamos a darle un estilo de botón personalizado, y el color sería color UI color punto Máximo amarillo, algo así. Entonces esto está ahí. Ahora lo que podemos hacer es agregar una imagen de perfil, subir funcionalidad. Entonces, para que podamos subir una imagen de perfil, vamos a ir ahora a nuestro modelo de vista principal, y sobre todo esto, vamos a escribirla aquí básicamente. Foto de perfil, subiendo. Y empezaríamos por escribir esta función. Sería función subir, foto de perfil, y esta foto de perfil tendrá un argumento de imagen de guión bajo del tipo UI image sería asincrónica, obviamente, abrimos Ahora comprobamos que si quiero decir, Dios deje que el ID de usuario, que estaríamos necesitando, así es igual a T. punto punto usuario actual punto UID, lo contrario, simplemente puede regresar Ahora que hemos comprobado que tenemos un ID de usuario a mano, lo que podemos hacer es escribir un bloque do catch, y escribiremos una funcionalidad. Si recuerdas que ya tenemos la función escrita para subir al almacenamiento, así podemos tener URL de imagen igual prueba esperar y subir imagen al almacenamiento, y podemos pasar aquí Ahora que hemos hecho tanto, necesitamos actualizar nuestro Firestore con la foto de perfil Entonces eso es lo que vamos a hacer aquí. Deje que DB sea igual a Firestore punto Firestore. Y luego dentro de esto, podemos haber dejado referencia al usuario, y vamos a referir al usuario a través de la base de datos. Entonces básicamente colecciones, usuarios, y luego de manera similar, lo que hicimos en todas estas funciones y documentamos con el ID de usuario, por lo que estamos haciendo referencia para decorregir Ahora sí intentamos esperar, y básicamente usamos funcionalidad de actualización de punto de referencia de usuario de Firebase, y podemos agregar una foto de perfil de campo Y esta foto de perfil de campo en realidad tendría imageURL dot Absolute string Entonces esto está ahí. Y ahora que hemos hecho tanto, podemos imprimir imagen de perfil actualizada con éxito. Entonces esto es una cosa. Ahora lo que podemos hacer es que podamos escribir en la declaración catch que sería impresa, y diríamos imagen de perfil. ¿Tenemos esa funcionalidad de mostrar tostadas? Mostrar tostadas, tenemos eso. Lo que podemos hacer es que podamos usarlo. Entonces básicamente, Show toast se puede usar aquí, subir imagen de perfil, y podemos decir mensaje Showtst Y el mensaje sería imagen, subida, éxito y éxito, digamos, y la imagen de perfil falló. Entonces podemos agregar en el caso de error, también la carga de imágenes falló, y podemos escribir la carga de imagen de perfil, falló. De igual manera, estaba pensando que dentro de nuestra vista Crear publicación, tenemos tarea, y tenemos subir imagen y crear post. Entonces lo que podemos hacer es que podemos mostrar el mensaje de brindis y subir la publicación exitosa Y podemos haber subido la publicación fallida. Entonces de esa manera nos puede proporcionar algunas ideas sobre qué, bien, entonces muestra esta cosa. Entonces supongo que debería aparecer, o más bien necesitaríamos agregar esa alerta ahí también, básicamente. Entonces eso es una cosa para agregar. Podemos investigar eso. Pero por ahora, bien, entonces la funcionalidad de la imagen de perfil está hecha. Solo volvamos y veamos para avanzar. Entonces sí, esto es subir foto de perfil. Toma una imagen, usa la referencia del usuario y actualiza los datos con la foto de perfil. Entonces todo esto parece estar bien. Ahora lo que podemos hacer es que solo podamos entrar dentro de nuestra vista de configuración. Y dentro de nuestra vista de configuración, podemos eliminar esto o simplemente podemos eliminar esto. Ahora realmente no lo necesitamos. Lo que podemos hacer es que podamos tomar la función de cierre de sesión, pegarla aquí abajo, y aquí agregaremos el botón con acción y etiqueta. Así que la acción y la etiqueta. Entonces dentro de la acción, solo revisaríamos las imágenes de perfil de Godlet, la imagen de perfil Si es imagen de perfil, contrario, podemos simplemente regresar, básicamente, porque necesitamos verificar si la imagen de perfil está ahí antes de ejecutar la función, no tomamos una imagen opcional. Entonces no quiero que nuestra app se estrelle, y es por eso que la actualización del punto del modelo, um, ¿es subir foto de perfil? Bien, esto parece estar bien. Y podemos pasar en la imagen de perfil aquí. Entonces esto está ahí. Ahora nos está arrojando un error para la etiqueta. Eso está bien. Podemos seleccionar esto y podemos decir actualizar imagen de perfil. Entonces podemos agregar una fuente personalizada aquí para uso básico fuentes punto negrita con un tamaño 18 18. Esto está ahí, entonces podemos tener un estilo de primer plano negro, y luego podemos tener algo Según todos nuestros textos que hago, el marco tendría un ancho máximo de punto infinito. Esto está bien. Entonces podemos tener algún color de fondo para ello. Entonces esta etiqueta, ya sabes, estaba pensando qué tal si usamos el estilo de botón personalizado de punto. Y el color sería color I color punto amarillo neón o algo así. Y luego podemos usar un botón deshabilitado en el botón en caso de ver modelo, ViewMDeltPfle Fimage Entonces si no hay imagen de perfil, desactivaremos el botón D, y además comprobaremos que si la imagen de perfil está ahí, es igual igual a Nil, si es cierto, mostramos algunos coloreados como gris esa opacidad con 0.4, lo contrario, mostramos este color, si tengo sentido Bien, entonces lo que estoy haciendo ahí, rápidamente te voy a pasar por esto. Básicamente, agregamos un texto y le dimos un estilo de botón personalizado para este color de fondo ahora, estamos comprobando si la imagen de perfil es nula Deshabilitamos el botón, lo que esencialmente significa que no llamará a la función, por lo que la aplicación no se bloquea ni nada. De todos modos estamos verificándolo, así que regresa aquí también Para la parte UI de la misma, estamos comprobando esta condición, y si esta condición es cierta, el color del botón resulta ser gris, lo contrario, tendría un color de amarillo neón. Entonces eso está ahí. Ahora que hemos agregado tanto, lo que podemos hacer es que también podemos agregar un botón de retroceso aquí, básicamente. Estaba pensando eso, por qué no esta pantalla también tiene un botón de retroceso como Crear vista de publicación. Entonces para ese propósito, en realidad necesitaríamos este modo de presentación. Volvamos, agrégalo aquí. Vamos al frente. Y ahora vamos a comprobar dónde está nuestro botón de retroceso. Ahí está nuestro botón de retroceso. Podemos copiar esto. Nosotros venimos aquí, la pegamos aquí. Esto está ahí. Ahora lo que podemos hacer es plegar toda esta pila vertical. Y tiene algo de acolchado, eso es genial. Ahora podemos agregar algo de barra de navegación botón atrás oculto. Pasaremos por aquí, y luego podemos agregar una hoja aquí, básicamente. Y la hoja estaría ligada a nuestro valor show image picker con nuestro contenido, que sería, no necesitamos esto, así podemos eliminar el inpt y la hoja tendría realmente un Selector de imagen, el selector de imagen estaría tomando un tipo de imagen, por lo que el tipo de imagen seleccionado, de lo contrario, eso sería solo foto de perfil y es imagen escogida de imagen, y solo podemos verificar si dejar que la imagen sea igual a imagen, entonces podemos abrir esto Podemos activar el tipo de imagen seleccionado. Y entonces si en caso de foto de perfil, Vemdel dot profile image es igual a image, lo contrario podemos tener un caso por defecto, um y podemos romper esta sentencia switch, y realmente no necesitamos trabajar con Entonces esta es la obra. Hasta el momento, agregamos esta cosa, y dice que no se puede convertir esto a ¿por qué diría eso? Es decir, se presenta, debería estar ahí. Y esto no necesita existir. Entonces esta es la hoja correcta que queríamos usar. Espero que así solo se refresca de nuevo y funcione bien. Ahora lo que podemos hacer es que podamos volver a nuestra vista de perfil de usuario. Y ahora lo que podemos hacer es que en lugar de simplemente usar el creo que en algún lugar de nuestra vista de perfil de usuario, teníamos esos vamos a terminar esto. Una pila vertical aquí, a la derecha. Entonces ahora realmente no necesitamos lo del infinito de ancho máximo. Lo que podemos hacer es agregar una pila. Esa pila va a envolver estos dos hacia arriba podemos tener alguna alineación, que sería líder. Podemos eliminar la parte de contenido. Entonces en este momento acabo de agregar tanto el ID de usuario como el nombre de usuario en una pila vertical, que ya estaba ahí, solo le di una alineación inicial. Y dentro de nuestra pila de Ed, en realidad trabajaríamos con la imagen de perfil ahora. Entonces lo que podemos hacer aquí es que podamos verificar si dejar que la imagen de perfil deje que la imagen de perfil URL sea igual a URL de cadena, es lo mismo que hicimos para nuestra vista de publicación, básicamente, que estamos comprobando el modelo de vista base de datos de puntos usuario punto imagen de perfil está ahí, y podemos hacer esto. Y si es una URL válida, podemos usar Imagen asíncrona La imagen asíncrona tomará una propiedad URL, y esta sería nuestra URL de imagen de perfil Entonces abrimos esto. También le damos un marcador de posición. Entonces esto está ahí. Podemos obtener una imagen de aquí. Ahora podemos usar esa imagen. Podemos darle algunos redimensionables. Vaya, no necesitamos hacer esto. Podemos hacerlo redimensionable. Podemos tener una relación de aspecto para ello, eso sería relleno, esto está ahí, entonces podemos darle un marco con apenas el ancho de 90, y podemos darle una forma de clip de un círculo. Entonces se vería mejor esa manera solo si tenemos un círculo, entonces hay un marcador de posición, para que podamos tener una vista de progreso Una vista de progreso estaría ahí con un marco, y este marco volvería a anzar con 90, luego otra vez, tendría forma de clip. Entonces básicamente, mientras se está recuperando, mostraríamos una vista de progreso a nuestros usuarios que la imagen de perfil se está cargando La mayoría de las veces estas aplicaciones lanzan la cosa alrededor. Entonces para eso, podríamos usar Kingfisher en el futuro. Pero ahora mismo esto está bien. Así que podríamos usar el color con el color de la interfaz de usuario, y luego podemos tener el juego verde aquí. Entonces, básicamente, esto está ahí. Entonces este era el conjunto si se deja condicionar. Ahora, ¿qué tal otra cosa? Porque y si la URL válida no está presente lo que mostraríamos. Entonces podríamos usar una imagen de sistema, y podemos tener persona punto círculo relleno de punto. Así que de esta manera nos ayuda a, ya sabes, trabajar con el marcador de posición. Entonces, en caso de que la imagen se esté cargando, muestra el marcador de posición En caso de que no esté cargando. Bien, espera. Olvidé que en realidad no podemos darle, en realidad no podemos darle un tamaño con fuente personalizada o ¿ podemos? Vamos a comprobarlo. Déjame usar fuentes personalizadas punto negrita, y vamos a darle un tamaño de 70. Supongo que eso parecería estar bien. Podemos tener un estilo fground con el color blanco. Así que en realidad podemos colorear símbolos ISF, ¿verdad? Entonces eso es lo que estoy haciendo aquí mismo. Entonces esto está ahí. Y tienen un poco de relleno aquí. Dice valor de tipo opcional. Debe ser desenvuelto, así que puedes tener un signo de interrogación aquí también No creo que eso sea un problema para nosotros. Así que ahora intentemos ejecutar y verificar toda esta funcionalidad. Y ojalá pudiéramos ver un marcador de posición por ahora Pero en el momento en que se carga, vamos a ver cómo se ve. Bien, entonces esto se ve así por ahora, y bien, esto me parece bien. Pero en el momento en que voy a la configuración, tenemos pocas cosas. Vayamos a nuestra vista de configuración por ahora y podemos envolver todo esto dentro. Podemos envolver todo esto adentro. ¿Qué tal si creo una pila Z? Podemos tener una pila Z. Podemos hacer algo así. Dentro de la pila Z, podemos tener punto coloreado negro. Y la pila Z no tendría área segura. Así que intentemos ejecutar esto ahora. Vamos a ver si se ve mejor porque eso me quedó un poco mal, y podemos plegar estos botones para ver, como, qué más está pasando aquí. Entonces tenemos tres botones aquí. Supongo, cuatro botones, y la etiqueta también está doblada. Entonces aquí podemos agregar un espaciador, y podemos agregar un espaciador aquí también. Pero esto solo tendría un marco con una altura de 40, o digamos solo 60. Intentemos ejecutar esto ahora, y veamos cómo se ve todo. Entonces ojalá se vea bien. Quiero decir, factible por ahora, y más tarde haríamos algunos cambios más, Bien, así que esto parece estar bien, y esto no es clicable en Así que solo puedes seleccionar una foto de perfil. Y si selecciono una foto de perfil, y deberíamos seleccionar Crolo vemos esta cosa, que realmente no parece buena, ¿verdad Quiero decir, esto se ve muy fuera de lo que pensaba. Quiero decir, ¿qué tal si entramos en nuestro botón, cuál fue? Entonces ahí está lo de subir, y muestra la imagen de perfil, supongo. Debería ser escalado para que quepa, supongo, y luego podemos darle forma a la cosa Entonces, ¿vamos a ver cómo se ve esto? Y ojalá se vea bien. Entonces solo estoy esperando que se vea bien, podemos seleccionar. Podemos seleccionar una imagen de perfil desde aquí. Esto debería estar ahí. Bien, esto parece mejor que el anterior, así que esto está ahí. Nosotros actualizamos la imagen de perfil. Y básicamente, vamos a ver los registros, y bien, así que la imagen de perfil se actualizó con éxito, volvemos, y ahora lo ideal sería que solo, ya sabes, debería funcionar, supongo. Si vas al perfil, esto no es nada. Explorar página no es nada. Entonces bien, no se está cargando a partir de ahora. Entonces, ¿qué tal si intentamos ejecutar esta cosa y comprobarlo si funciona o no Y no realmente, ¿verdad? O sea, la propiedad de imagen, si entramos dentro de nuestros cinco usuarios base, la actualizamos. Deberíamos ver un valor de imagen de perfil. Y posiblemente debería actualizarse ahí. Entonces tenemos post que está bien. Tenemos un usuario con una cosa de foto de perfil. Esta foto de perfil, si la copio, no de aquí, la copiaremos de. ¿Qué tal? Puedo simplemente no uh, ¿ Puedo simplemente no, esto está ahí Si solo lo copias y lo pegas aquí, ¿qué nos muestra? Entonces sí, se está subiendo la foto. Entonces, ¿qué va mal con nuestra vista de perfil de usuario? La vista del perfil del usuario está comprobando si imagen de perfil de todd de la base de datos está ahí Bien. Y creo que pienso por nosotros, y estamos recuperando el usuario de la base de datos aquí Entonces, en realidad, debería estar haciendo alguna declaración de impresión de usuario recuperada ¿Qué tal si vamos aquí y buscamos usuario buscado? Tenemos un partido, así podemos hacer esto. Y dice imagen de perfil como NIL. Entonces, bien, esto parece un poco raro. ¿Por qué diría la imagen de perfil como NIL cuando estamos recuperando la imagen de perfil y se está mostrando aquí porque es la foto de perfil tipo Entonces si voy al usuario de la base de datos, el usuario de la base de datos es foto de perfil. Y ahora intentemos hacerlo. Entonces básicamente, hubo una falla de mi parte, hecho la nombré diferente mientras hacía la foto de perfil. Mientras hacía la llamada API, en realidad la llamé foto de perfil, y dentro de mi estructura, en realidad la llamé imagen de perfil. Entonces eso es lo que hice mal. Y dice arreglar esto está ahí. Et solo intenta ejecutar el código otra vez. Ojalá esto funcione ahora. Y si, esto construye bien. Entonces ojalá deba cargarse. Bien, se está cargando. No está cargando de la manera correcta, pero sí, está apareciendo. ¿Qué tal si coincidimos con nuestra vista de perfil de usuario y nos encargamos de que lo que está mal con nuestra vista de progreso Entonces bien, esto tiene un marco. Este tiene forma de clip, y este tiene un color de fondo. Entonces no estoy muy segura de por qué no viene en círculo? Porque, bien, hemos agregado esto y aquello, y creo que eso debería funcionar idealmente, diría yo Entonces, permítanme pensar qué tal si le damos una altura de 90 también, e intente ejecutar esto ahora. Suavemente eso debería solucionar el problema. Tomando el parámetro width, lo cual es un poco raro, pero bien. Y si, esto todavía parece mejor que los otros que podemos haber recortado, o podemos tener algo como esto puede quitar esto aquí Vamos a ver cómo resulta ser tan rápido ejecutando la aplicación y sincronizarlo. Y sí, esto parece estar bien, y entonces la imagen de perfil se está cargando maravillosamente. Así que eso funciona bien. Bien para nosotros. Entonces ahora lo que podemos hacer ahora es que podamos continuar con la siguiente función de seguidores en el siguiente video. Entonces espero ver en el siguiente video. Gracias. 24. Creación de una vista de perfil de usuario genérico: Ahora que puedes ver que la funcionalidad está prácticamente trazada para un solo usuario dentro de nuestra aplicación, lo que significa que el usuario tiene la opción de ir aquí y crear una publicación y todo. Pueden ver su propio post aquí. Pueden actualizar su foto de perfil desde aquí y todo. Entonces lo que estaba pensando es que es hora de que también trabajemos en la creación de otros usuarios en el sentido de que necesitamos trabajar en la página Explorar. Para eso, necesitaríamos trabajar en algunas cosas diferentes y necesitamos modificar a unas cuantas funciones también que ya hemos escrito. Así que vamos a trabajar en eso. Entonces, el primer paso sería crear realmente una propiedad publicada, así un WA publicado, y podemos llamar a esta página Explorar usuarios. Y lo que esto sería es que sería un tipo de usuario de base de datos y sería un MDRA Y dentro del usuario de base de datos, en realidad necesitamos que se ajuste al tipo hashable porque si solo entramos en la definición de hashable, establece que es un tipo que puede ser hash en hasher para producir un Entonces puedes usar cualquier tipo que se ajuste a hashable en un conjunto o una clave de diccionario Entonces, en realidad, necesitamos recorrer a los usuarios y mostrar su publicación y todo para ese propósito. Se requeriría hashing para el bucle Ford y todo Es por eso que estamos haciendo que nuestra base de datos sea hash de usuario. Entonces esto está ahí, y ahora vamos a entrar nuevo en nuestro modelo de vista y necesitamos escribir una nueva función aquí. Básicamente, esta función buscaría todos los usuarios, todos los usuarios de la base de Entonces podemos escribirlo aquí. Puedes escribir buscar todos los usuarios Por lo que sería una simple solicitud de obtención. Así que vamos a ir a escribirlo, buscar usuarios de bases de datos, y luego podemos agregar asincrónico y podemos abrir esto Podemos abrir un Dcacheblog aquí. Y dentro de D, primero, haríamos referencia a la base de datos FiveStoe. Entonces DV es igual a firestore punto Firestore. Entonces lo que haríamos es que obtendríamos algunos ítems de consulta o algo así. Vamos a llamarlos. Y básicamente, usaríamos Try esperar uh, prueba awaydw Esto serían usuarios, y obtendríamos documentos de aquí. Ahora lo que podemos hacer es dejar que los usuarios buscados sean iguales, probar elementos de consulta, documentos de puntos, mapa de puntos Y de manera similar, como definimos de post. Básicamente, estamos usando la funcionalidad del mapa de una manera similar. Podemos abrir el cierre aquí. Obtenemos al usuario en la base de datos usuario N, y podemos hacer la U mayúscula. Lo que podemos hacer es que podamos escribir Try database user dot data como databasuser dot Simplemente no le pongamos el nombre de usuario de la base de datos. Podemos llamarlo datos de usuario de base de datos, datos usuario de base de datos datos de punto como base de datos de usuario punto self. Entonces esto es lo que hemos hecho aquí, y ahora lo que podemos hacer es abrir la cola de despacho. Entonces sería un despacho Queue punto punto principal ASNC abre esto. Básicamente, aquí escribiríamos self dot Explorar página Usuarios y podemos poblar página Explorar usando los usuarios recuperados que tenemos arriba Entonces esto es lo que estoy haciendo aquí. En la sentencia catch, podemos simplemente almacenar en caché el error para que podamos decir error al recuperar los usuarios de la base de datos, y podemos tener error punto descripción localizada Entonces esto es lo que estamos haciendo aquí. Entonces sí, esta función está completa. Podrías usarlo dentro de nuestra página Explorar, pero por ahora necesitamos hacer dos cosas más. Así que solo busquemos usando el Comando F, busquemos la publicación del usuario. Entonces sí, buscar publicación de usuario está aquí. Y ahora este fetchUserPost, ya no usará el ID de usuario de aquí En cambio, tomará el ID de usuario como parámetro porque necesitaríamos usarlo también para otros usuarios. Por eso tenemos que hacer eso. Entonces esto está ahí. Ahora tenemos que ir a buscar datos de usuario también. Así que busca datos de usuario. Obtiene datos de usuario de manera similar, usaremos el ID de usuario, que estará fuera de la cadena de tipo Podemos quitar esto de aquí. Entonces sí, esto está ahí. Estos fueron los dos cambios de funcionalidad que necesitábamos hacer, y se necesita preguntar ¿cuál es el ID de usuario? Esto es eso. Si ejecutamos la app, definitivamente debería arrojarnos algún error. Así que solo esperemos eso. Y qué insumo estábamos usando. Bien, entonces la vista del perfil de usuario da un error, y podemos entrar aquí a cinco Base Tierra. Entonces lo que podemos hacer aquí ahora es que podemos escribir Gard let user ID igual a t dot art dot dot currentUser dot ID de punto, algo así, y de lo contrario podemos devolver Entonces esto está ahí. Y podemos abrirla así. Y ojalá, debería funcionar. Dice que es una solución opcional. Entonces este es el Sí, todo esto funciona bien. Simplemente ejecutemos la aplicación una vez y verifiquemos si la funcionalidad que acabamos de diseñar está funcionando o no. Y bien, entonces el momento de la verdad. Sí, es ir a buscar la imagen y todo. Entonces sí, la funcionalidad está funcionando bien. Tan bueno para nosotros. Ahora lo que podemos hacer es crear de forma segura Explorar vista de página. Así que vamos a ir aquí, hacer un comando y crear una vista de interfaz de usuario rápida, llamarlo Explorar vista de página. Entra, ahí está nuestra vista. Podemos quitar con seguridad la pintura de vista previa. Ahora podemos importar cinco formas también porque en su mayoría necesitaríamos una llamada API aquí. Entonces, vamos a agregar un objeto observado, y debería ser del tipo. Debería ser una variable, obviamente. Ver modelo, que sería del tipo vista principal modelo, esto está ahí. Entonces podemos agregar eso. Solo vamos dentro de nuestra vista de configuración porque aquí tenemos escrito este modo de entorno, así podríamos usarlo desde aquí. Pasamos esto adentro. Ahora podemos abrir una pila Z, básicamente una pila Z que tendría un fondo de negro. Hagamos ignosaf área aquí, y luego podemos agregar una vista de desplazamiento Básicamente, la vista de desplazamiento tendría un espaciador, que tendría un marco con altura de 70 píxeles. Entonces esto está ahí. Ahora necesitamos agregar un botón para que también podamos copiar desde la vista de configuración. Solo busquemos la vista de configuración, y ahí veríamos que el botón está aquí. Simplemente puedes copiar esta cosa, volver atrás, pegar esto aquí, y este es nuestro botón de retroceso. Y en realidad podemos trabajar en este botón de retroceso. Podemos tener algo así. Si te parece genial, podrías hacer lo mismo dentro de las otras vistas también. Entonces eso es en lo que estaba pensando. No así, pero esto y cuatro veces hash, vuelve a nuestra Vista de página Explorar. Esto está ahí, el color de primer plano debe ser blanco. El color de fondo debe ser azul. Y quiero decir, hasta el amarillo funciona, pero sí, esto está bien. Por lo que se presenta el color de fondo del color de primer plano. Ahora lo que podemos hacer es que podamos tener una superposición con. Solo estoy pensando eso, ¿necesitamos esto o necesitamos una propiedad de forma de clip, básicamente, una forma de clip con un rectángulo redondeado con un radio de esquina de como 20 píxeles ? una forma de clip con un rectángulo redondeado con un radio de esquina de como 20 píxeles Entonces esto está ahí, y ya no necesitamos superponernos. Entonces sí, esto está ahí. Ahora lo que podemos hacer es que podemos agregar un fondo aquí en vez de y podemos quitar el radio de la esquina. Así que solo tiene algún tipo de relleno. Vamos a darle seis. Tiene nuestra fuente personalizada, un color de primer plano, una forma de clip de fondo y relleno y obviamente el ingenio marco para mantenerlo alineado a la izquierda Esto está bien. Vamos a abrir una pila vertical. Ahora aquí, lo que volveríamos a hacer es, vamos a crear una cuadrícula vertical perezosa, y luego nuevamente nos pediría elementos de cuadrícula. Para ello, podemos ir a la vista del perfil de usuario. Dentro de Vista de perfil de usuario, en realidad verías que tenemos los establecidos. Entonces estaba pensando en usar eso solamente. Así que solo busquemos Lazy V grid. Esto está ahí. Así que podemos simplemente copiar todo esto. Podemos regresar y podemos pegar esto aquí. Ahora bien, lo que estaba pensando es que el espaciado debería ser de diez píxeles. Esto está bien, y debería ser viewmodel punto Explorar Página Usuarios El ID, podríamos usar ID de usuario, y debería ser usuario Y no tenemos una vista de celda para mostrar aquí, en realidad. Así que vender vista necesaria. Además, hay esta característica útil en Swift. Entonces, básicamente, si agregas un mensaje de advertencia, necesita vender vista. Lo que pasa es que ahora aparecería en una de las advertencias. Entonces, ¿ves? Entonces esto parece estar bien. Podemos agregar uno más. Y podemos hacer Control I. Control Yo no. Bien, Comando I, no. Entonces esto es un poco diferente a lo que imagino. Sí. Bien. Entonces esto funciona bien. Hemos agregado una advertencia, por lo que seguirá diciéndonos que necesita venir aquí y arreglar esta advertencia. También se podría agregar error, pero entonces eso no nos dejaría construir el aire, así que eso no es lo que queremos. Lo que podemos hacer ahora es que realmente podamos crear una vista general de perfil de usuario. Entonces, básicamente, esto es aunque el usuario que ha iniciado sesión. Esta es la vista de usuario que ha iniciado sesión, la vista del usuario principal que está usando activamente. Esta es la vista en primera persona, pero necesitamos una vista en tercera persona um, vista perfil de usuario también, vista general de perfil de usuario. Entonces eso es lo que vamos a hacer, y entonces tendríamos que hacer una celda también. Así que vamos a entrar en nuestras vistas. Hacemos comando y hacemos Swift to UI view. Lo llamamos perfil general de usuario. Vista, esto está ahí. Bien, entonces tenemos la vista lista. Ahora lo que haríamos es que podamos importar firebase nuevamente aquí Si es necesario, supongo que no va a ser necesario aquí, pero vamos a ver porque esto solo tomaría usuario como parámetro Se necesita un modelo de vista observado. Tomamos un modelo de vista principal, esto está bien. Entonces podemos tener una propiedad estatal, guerra privada estatal, y esto no sería un Ward privado estatal, sino en realidad una R, y esto en realidad sería usuario de base de datos. Y este usuario de base de datos sería usuario de base de datos. Esto está ahí. Ahora también necesitamos agregar la vista de configuración aquí. Así que vamos a ir a establecer vista, seleccionamos esta cosa hacia fuera. Volvemos, lo agregamos aquí. Ahora vamos a nuestra vista de página Explorar. Entonces hacemos uso de este botón que acabamos de hacer. Entonces un espaciador junto a un botón, eso es lo que necesitamos. Entonces podemos agregarlo. Uy. Podemos agregar este aquí. No necesitamos un espaciador en realidad, y necesitamos algún tipo de pila. Entonces creo que necesitaríamos una vista de desplazamiento aquí también. Entonces esto está ahí, podemos tacharlo, pegar esto aquí, y luego podemos agregar un espaciador. Creo que sería necesario, y entonces podemos darle una altura de 70 pixeles. Entonces eso está hecho. Podemos plegar esta vista de desplazamiento hacia arriba. Podemos agregar una pila Z. Podemos abrir la pila Z, abrirla así. Entonces esto está ahí, y ahora estoy pensando eso, ¿necesitamos algo más? Entonces básicamente, dentro de la pila z, vamos a darle un color negro. Hagamos que esta zona ignosaf, la pila Z. Entonces esto está hecho. Tener lista la vista de desplazamiento, lo que nos da la opción de volver. Entonces eso está bien con nosotros. Ahora lo que podemos hacer es que podamos trabajar con la imagen de perfil y todo. Entonces básicamente, para algunos otros usuarios, supongamos que no eres este usuario, verías esto, no verás estos dos botones porque no queremos saber a quién siguen ni nada. O sea, puedes para Instagram, para las apps, también hacen Twitter. Pero entonces realmente no tiene sentido hacerlo aquí. Entonces estaría en realidad podemos ver su post. Eso es una cosa, o tal vez también puedas tener estos botones. Entonces déjame pensarlo. Obviamente necesitamos ver su imagen de perfil y todo. Entonces sí, este es su bien. Así podrás tener esta función donde haces clic en el botón y podrás dejar de seguirlos a través de eso Entonces eso es una cosa que podríamos hacer. Entonces, ¿qué tal si venimos rápidamente aquí? Añadimos una pila de Ed aquí. Básicamente, esta pila de Ed estaría utilizando las vistas de perfil de usuario, EdTack donde tenemos, foto de perfil Esto está ahí. Así que puedes simplemente doblar esta cosa, copiar todo esto, volver aquí, y podemos pegar esto aquí. Ahora nos daría algunos errores. Así que vamos a encargarnos de ello. No creo que nos esté dando algunos errores. Eso me parece bien. Podríamos usar ese usuario de base de datos aquí. Esto está ahí. Podemos agregar la base de datos usuario punto nombre de usuario y base de datos usuario punto ID de usuario. Entonces esto está bien. Y vamos a repasarlo imagen de perfil. Toda esa funcionalidad de carga sigue siendo la misma. Así podemos cerrar la pila Et. Esto se presenta perfectamente. Entonces sí, esto funciona bien. ¿Qué más tenemos que hacer? No necesitamos mostrarles no necesitamos mostrarles el ID de usuario, solo el nombre de usuario, y entonces podemos quitar la pila vertical porque no es realmente necesaria. sí, esto está ahí. Podemos agregar un espaciador aquí para empujar el nombre de usuario a la pila. Entonces sí, esto es una cosa. Aunque siento que en realidad no va ser, realmente no se mantendrá aparte del logotipo del perfil. Vamos a ver, como, cómo se ve, para que podamos hacer eso. Vamos a crear otro botón aquí. Básicamente, este botón estaría teniendo la lógica de dejar de seguir, y la etiqueta tiene que ser así Entonces, para la etiqueta, podemos crear un rectángulo Curvy Nuevamente, volvemos a nuestra vista de perfil de usuario, y solo buscamos un rectángulo curvilíneo La encontramos aquí, volvemos aquí, y la pegamos aquí. Y básicamente, este botón debería comenzar diciendo follow, pero luego más adelante, en realidad lo cambiaríamos porque queremos darle a esto algún tipo de seguimiento siguiendo lógica. Entonces según eso, el texto también cambiaría esto es lo que está aquí por ahora, y podemos darle algún frame, básicamente, y frame tendría un ancho máximo de, digamos, infinito. Entonces el infinito está ahí, entonces tenemos cierta alineación, y la alineación sería líder. Entonces eso está ahí. ¿Qué más tenemos que hacer? Así que podemos darle a todo esto un poco de relleno también. Yo creo, si miramos esta cosa, tenemos una pila E. Podemos cerrar esta pila ET. Tenemos un botón, tenemos otro botón dentro de la vista de desplazamiento. Así que vamos a echarle un vistazo. Tenemos una vista de desplazamiento. Empezamos con una pila Et. Lo que podemos hacer es que podamos crear una pila V aquí, básicamente. Y esta pila vertical tendría algo así. El marco está aquí. Aquí podemos darle algún tipo de relleno. Porque por lo que hice esto es que normalmente lo que pasa es que necesitarías agregar máximo de diez subelementos dentro de un grupo o una pila vertical o una vista de desplazamiento. Así que sólo estoy tratando de limitar esa cosa aquí. Y podemos tener rectángulos COVI. Y básicamente, estos rectángulos mostrarían el post. Entonces nuevamente, podemos ir a la vista del perfil de usuario. Podemos buscar tu post. Si buscamos en tu post, encontramos el rectángulo COVI Volvemos y lo pegamos aquí, y no diríamos Yor post, sino digamos solo post así que esto está ahí, y luego podemos volver adentro, vista de perfil de usuario, y podemos copiar esta vista de desplazamiento hacia fuera Entonces esto está ahí. Y creo que ni siquiera necesitas agregar una vista de desplazamiento aquí, más bien una pila vertical debería funcionar. Así que vamos a ver si funciona o no. Y lo que tenemos que hacer es que tenemos que hacer necesitamos buscar el post. Ahora estoy pensando que debería usar solo la misma matriz de publicaciones o debería usar otra publicación de usuario que tendría mucho más sentido. Pero entonces, um solo mantén publicación por ahora porque estamos tratando de hacer una llamada a la API. Así que ojalá cambie cada vez que estamos cambiando de un lado a otro de nuestro perfil al perfil de otra persona. Entonces esto parece estar bien. Podemos quitar el botón de navegación desde aquí, así que botón de la barra de navegación, lo siento por eso. Deberían estar escondidos. Entonces podemos agregar una propiedad en aparecer. Dentro de un cierre, llamaremos a ViewModel dot fetch user data, y los datos de usuario serían la base de datos user dot user ID Esto está ahí. Entonces podemos tener vimdel punto fetch user post, y sería base de datos user dot user, nuevamente, user Entonces sí, esto está ahí, y creo que es un valor opcional. Así que vamos a darle una cadena vacía. Si es opcional, quiero decir, si es nulo, entonces sí, esto está ahí. Ahora lo que podemos hacer es dentro de las sub vistas, podemos crear una celda de visualización de perfil. Así que vamos a comandar y hacemos clic en Swift UI view. Llamémoslo celda de vista de perfil. Entonces sí, esto está ahí. Podemos eliminar la vista previa. Ahora podemos trabajar en agregar un objeto observado, y este objeto observado sería un modelo de vista, que sería del modelo de vista principal. Entonces esto está ahí. Ahora toma en un usuario de base de datos también, usuario de base de datos, tendríamos del tipo usuario base de datos. ¿Qué más necesitamos? No lo creo, realmente necesitamos algo más. Así que solo podemos volver a nuestro punto de vista y usar el mismo lenguaje de diseño. Así que vamos a tener el rectángulo COVI. Vamos al frente, tenemos el rectángulo COVI, y dentro de un rectángulo COVI, podemos Ahora podemos hacer algo diferente ¿Qué tal si vamos a Vista de perfil de usuario, vamos al rectángulo Explorar, CoV Básicamente, tenía un relleno degradado. Entonces estaba pensando, ¿qué tal si usamos esta cosa? Así que podemos simplemente copiar esto, volver aquí, y pegar esto aquí, básicamente. Entonces se establece el rectángulo CoV. Ahora que podemos hacer es que dentro de superposición en vez de este texto, podamos tener una pila vertical. La pila vertical está ahí. Vamos a tachar esto, darle una palmadita aquí. Ahora dentro de una pila vertical, podemos verificar si dejar URL de la imagen de perfil sea igual a la URL de la cadena, y esta cadena sería el punto de usuario de la base de datos Profile Photo. Y si es nulo, podemos pasar en una cadena vacía. Podríamos usar una imagen asíncrona asíncrona. La imagen asíncrona tomará una URL, que sería la URL de la imagen de perfil Esto está bien. Ahora podemos abrir esto. Podemos escribir imagen en. Ahora podríamos usar esta imagen. Entonces básicamente, esta imagen, esta sería redimensionable No necesitamos esto. Esta imagen, esta sería redimensionable Tendría una relación de aspecto de relleno. Um, esto está ahí. Ahora podemos tener un marco, básicamente, un marco con un ancho, 90 y una altura, también 90. Entonces esto está ahí. Ahora podemos tener una forma de clip, y la forma de clip sería un círculo. Eso me parece bien. Entonces eso es lo que vamos por aquí dentro de un marcador Dentro de un marcador de posición, agregaríamos una vista de progreso con paréntesis Entonces le daríamos a la vista de progreso un marco con un ancho de 90 y una altura de 90. Y lo que podemos hacer es añadir una forma de clip. Entonces la forma del clip volvería a ser círculo. Y por fin, podemos agregar el fondo, y el fondo incluirá color, y sería del tipo UI color punto juego verde. Así que tratando de mantener el diseño consistente o podríamos tener también amarillo neón. Cualquier cosa funciona bien. Honestamente, esto está ahí. Entonces, si la declaración no está funcionando, podríamos enunciar y dentro de la declaración EL, podemos tener imagen, nombre del sistema. Es lo mismo que hicimos con, ya sabes, el perfil de usuario view person dot circle dot fill. Esto está ahí. Ahora podemos tener una fuente, fuentes personalizadas punto punto negrita, y el tamaño importa aquí. Entonces podríamos hacer 40, y luego podemos agregar un color fground, y sería negro, básicamente Entonces esto está ahí ahora para el texto, podríamos agregar algunas etiquetas hash y mostrar su nombre de usuario, básicamente. Así base de datos usuario punto nombre de usuario. Usa un nombre. También podemos darle una cadena vacía. Entonces esto me parece bien. Sí, así que aquí mostraría una cadena vacía. Podríamos tener la talla 18 o 17. Cualquier cosa funciona bien. El color de primer plano tiene que ser negro, y el relleno debería estar ahí, o simplemente debería quitarlo por ahora Entonces esta es la superposición vertical ahí. Lo que podemos hacer aquí es que ahora podemos agregar algo de relleno, básicamente. Entonces esto está ahí para la superposición. He agregado un poco de relleno a todo el rectángulo curvilíneo. Ahora que hemos hecho esto, ¿qué tal si entramos dentro de nuestra vista de página Explorar Y aquí necesitaríamos hacer pocos cambios ahora. Entonces, ¿qué necesitamos hacer aquí? Básicamente, por lo que recuerdo, en realidad necesitaríamos mostrar esas celdas de vista de perfil, y no solo eso, solo eliminemos estas cosas. Tendríamos un enlace de navegación y el enlace de navegación o etiqueta así dentro de la etiqueta, tendríamos la celda de visualización de perfil. La celda de vista de perfil está tomando en un usuario de base de datos, que podemos pasar, y no necesitamos un modelo de vista, o necesitamos un modelo de vista? Tenemos que pasar al modelo de vista, así que esto está ahí. No creo que así ese celular de vista de perfil necesite una llamada ABI. Vamos a entrar y ver, veo modelo que se está usando en cualquier parte de aquí. Dice dos partidos, no. Por lo que solo puede eliminar de manera segura el modelo de vista de perfil. Realmente no lo necesitamos. Entonces puedes quitar esto de aquí. Esto está ahí. Y el enlace de navegación en realidad dirigiría a los usuarios a la vista general del perfil de usuario. Esto tendría un modelo de vista y esto también tendría un usuario de base de datos. Entonces ahí vamos, no esto, pero tendríamos que usar un pase adentro. Sí, esto está ahí. ¿ Tenemos que hacer otra cosa? Entonces, ¿tenemos una pila vertical? Lo que podemos hacer es que podamos agregar algo de relleno a la parte superior, y podemos tacharlo. Podemos agregar navegación mal botón de navegación oculto a true. Y tenemos en zona segura aquí. Entonces esto está bien. Ahora podemos agregar un on aquí arriba y ahora lo que hacemos es que creamos un cierre de tarea, y dentro del cierre de tarea, y dentro del cierre de tarea escribimos esperar ver modelo punto fetch o Fetch usuarios de base y básicamente cerrarlo con Entonces básicamente, haría llamada DIPI. Entonces ahora se hace tanto, así que necesitamos hacer un último cambio dentro vista del perfil de usuario porque acabamos de crear la vista, la página Explorar, pero esta no se está utilizando en ningún lado. Así que vamos a ir a la cosa Explorar. Ya tenemos un enlace de navegación aquí. Así podemos agregar la página Explorar aquí. Explorar página necesitaría un modelo de vista. Así que vamos a pasar en un modelo de vista, y el modo de presentación no necesita ser pasado. Entonces esto está ahí. Y creo que esto se hace mucho. ¿Tenemos que hacer otra cosa? Ahora sólo estoy pensando. Entonces sí tenemos esto, tenemos esta cosa trazada, así que esto funcionaría bien. Ahora solo intentemos ejecutar la aplicación y veamos si la funcionalidad está funcionando o no. Así que idealmente deberíamos ver a otros usuarios. Así que vamos a comprobar rápidamente si hay otros usuarios. No, no lo son. Entonces lo que podemos hacer es que podamos cerrar sesión y crear un usuario muy rápido, y podemos usar el perfil de ese usuario para verificar si las cosas están funcionando bien o no. Entonces esto está funcionando, vamos a ajustes, sí desconectamos. Ahora necesitamos registrarnos para poder usar Kura Pica aquí, y podemos copiar este out@gmail.com, gmail.com Podemos pegar lo de Kura Pica aquí, podemos escribir contraseña Entonces, básicamente, la contraseña es contraseña. Este es el nombre de usuario de Kura Pica, hizo gmail.com, regístrate Entonces ahí tienes. En la configuración, seleccionaremos una foto de perfil. Para la foto de perfil, solo seleccionemos. Bien, entonces Kurapga en realidad no está aquí. Entonces esto es malo para nosotros. realidad no queremos estropear toda la jerarquía. Lo siento por eso. Vamos a cerrar la sesión rápidamente. Quiero decir, vamos a cambiar el nombre, y podemos crear gon editado gmail.com Podemos nombrar a la persona que se ha ido. Podemos inscribirnos. Gn está aquí. Ahora vamos dentro de la configuración. Iremos a seleccionar foto de perfil. Ahora seleccionaremos la foto de Gans. Podemos hacer actualizar imagen de perfil y ojalá ver algo en los registros. Así que he agregado un filtro para que sea mala imagen de perfil éxito. Volvamos y solo debería cargarse. Ahora dentro de una nueva vista de publicación, seleccionaremos algunas imágenes de héroes y todo. Entonces esto debería estar ahí. Deberíamos nombrar a este lugar de sushi. podríamos tener nada en la URL de la lista de reproducción, presupuesto sería como $100. Las calificaciones serían dos, 222. Podríamos seleccionar una imagen de café, la imagen de café. Puede tener esto. Podemos tener pie de foto de café, bonita pared o algo así. Di pie de foto. Para el escenario, seleccionemos estas montañas, y llamémoslo Isla de la Codicia Ahora lo que podemos hacer es llevar cosas que podemos hacer tarjetas, caña de pescar, y podemos hacer post ad. Ahora vamos a comprobar si hace el post o no. Entonces ojalá no se muestre con ningún error, por lo que se está haciendo el post. Um, no estoy muy seguro de si íbamos a recibir algún mensaje de post exitoso, deberíamos haber agregado eso. Pero volvamos a ver por nosotros mismos que si está funcionando o no. Entonces esto está ahí. Y podemos simplemente verificar aquí si se está publicando algo desde la identificación. Así que vamos a ver rápidamente que si algo se publicó o no. Entonces ahí está el usuario. Hay que se ha ido, y se ha ido tiene algún post. Tan bueno para nosotros. Sólo vamos a comprobar si viene o no. Podemos regresar y tenemos el puesto de ido. Lo que podemos hacer es que ya podemos ir a Explotar. Trae a otras personas. Busca a Kura Pica, Colo y Gone Lo que podemos hacer ahora es que podamos ir dentro del perfil. Usted vende. Y básicamente, recuerdo que necesitábamos cambiar esta cosa. Lo que está pasando es que en la vista de perfil de usuario, teníamos esta cosa de la foto de perfil, y el marcador de posición debería ser así Así que solo podemos volver atrás y el marcador de posición debería ser así Y podemos volver a cambiarlo a amarillo neón. Así que de esa manera no aparecerá en la plaza. Podemos seleccionar Crolo y podemos ver Crolo'simage Y ves que en realidad necesitábamos un espaciador aquí, y esto no se ve muy bien. Entonces lo que podemos hacer es que podamos ver su puesto y todo. Entonces eso es genial. Esta cosa está funcionando, así que eso es genial. Simplemente vayamos rápidamente a la vista general del perfil de usuario, y debemos estar teniendo una cosa de seguimiento. Entonces básicamente, hay un seguimiento con un estilo fgrowd de blanco Entonces esto tiene que estar ahí y también un espaciador tiene que estar aquí. Así que vamos a hacer eso. Vamos a hacer clic en Ejecutar y ver qué está pasando. Así que de lleno en la app, veríamos ahora a otros usuarios. Y, bien. Entonces ahora se podía ver C con su puesto y todo. Iremos a la página Explorar. Vemos vistas de carga redondeadas. Vamos a Crolo vemos un botón de seguimiento, vemos un botón de retroceso y el botón de retroceso necesita un poco de, ya sabes, uh, radio de esquina de 12 pixeles Eso funciona bien. El radio de esquina aquí es así. El radio de esquina en el Explode. Paige necesita un radio de esquina de 12. ¿Y qué tal la vista de configuración? ¿Cambiamos algo? Bien, esto se ve algo así, lo cual no es muy genial, ¿verdad? Es decir, vamos a ir a la vista Configuración y ver que qué hicimos en el botón Atrás. Entonces se superpone ahí. Realmente no necesitamos superponernos, así que también podemos agregar un radio de esquina. Diga 20. Hagámoslo por los demás también. Así que volvemos en el radio de esquina a 20 y solo volvemos de nuevo y en el radio de esquina a 20. Volvamos a ejecutar la app y veamos por nosotros mismos si ha hecho algún cambio. Entonces sí, en realidad hemos creado diferentes usuarios ahora, y obtiene la propia publicación de Gon aquí Que es el lugar de sushi. Esto es realmente genial. Pero, ¿qué más? Entonces sí, se está buscando un lugar de sushi. Podemos ver las otras imágenes. Solo esperemos a que se cargue también. Así que bonita pared y todo, y debería haber el mejor Steak, Creed Island Y tenemos tarjetas caña de pescar, artículos must, vamos a Explorar, vamos a Crolo y vemos CrolosPost Por lo que las publicaciones se están actualizando solo según el usuario. Entonces esto es bueno para nosotros. Y lo que podemos hacer ahora es que podamos volver atrás. Y ahora si volvemos de nuevo, solo vemos el post de matones Entonces es tener un poco de retraso en la actualización del usuario desde el efectivo, para que podamos manejar más adelante cuando hayamos terminado de terminar la interfaz de usuario y todo. Entonces esto se ve bien por ahora. Lo que estaba pensando es que podemos darle a nuestra pila un poco más de relleno para que estén más en la vista, y esto no parece tan fuera de estar tan dejado aquí. Entonces esto es una cosa que podemos hacer. Y más bien que eso, ahora podemos trabajar en la siguiente funcionalidad de seguidor. Y después de que hayamos terminado con siguiente funcionalidad follow, solo podemos hacer algunos ajustes dentro de la vista de configuración porque ahora mismo se ve realmente feo Y obviamente, entonces trabajaremos con el feed casero. Así que Home feed también necesita una visión propia. Entonces sí, lo estamos haciendo genial. Y espero verte en el siguiente video. Y nuevamente, si tienes alguna duda, por favor déjalos en comentarios abajo abajo. Estaría muy feliz de ayudar. Gracias. 25. Implementación de la funcionalidad de seguir-dejar de seguir: Como ya hemos creado la página Explorar y puedes ver a otros usuarios en nuestra app, lo que podemos hacer ahora es implementar la siguiente funcionalidad. Entonces, antes de comenzar a implementar esa funcionalidad, solo quería tener una charla sobre cómo podemos ir para agregar seguidores y seguir. Entonces la idea más sencilla que encontré es que C para cada usuario, manera similar, tienen una colección, una sub colección de publicaciones. Pueden tener dos subcolecciones más. Uno serían seguidores y uno seguiría. Lo que sucede es que cada documento seguidor contendrá a un usuario de manera similar. Básicamente, almacenaremos a un usuario completo en la colección de seguidores o seguidores de otro usuario. Así que vamos a pensar en supongamos que si soy el usuario que ha iniciado sesión como ido aquí. Y voy a la página Explorar. Voy a este otro usuario, y ahora hago clic en Seguir para este usuario. Entonces hay una cosa que tenemos que hacer es crear una sub colección aquí, que sería nombre siguiente. Y dentro de lo siguiente, habría un nuevo documento agregado, que sería este usuario Crolo Aparte de eso, necesitamos hacer una cosa más. Básicamente, necesitamos actualizar también la colección de KroloFollowers con C. Así que eso la haría pareja. Y cuando haga clic aquí, sabría que mi usuario, el usuario con el que estoy conectado sigue a esta persona, y esta persona tiene un seguidor como yo. Entonces eso se requiere para poder implementar una funcionalidad de seguimiento de seguimiento a la perfección porque entonces podemos ver a nuestros seguidores y a nuestros seguidores, y por eso así es una cosa de dos vías para que así lo hagamos. Nuevamente, llegando a ese punto que ya que necesitaríamos hacer dos llamadas API ahora, una con nuestro ID de usuario registrado para actualizar nuestra siguiente lista y otra con el ID de usuario de otros usuarios, que tendría los seguidores que nos agregarían como seguidores propios. Entonces habría dos llamadas API con dos ID de usuario diferentes. Entonces lo que estaba pensando es que vamos a entrar rápidamente nuestro modelo de vista principal y necesitaríamos hacer pocos cambios para poder implementar esto. Así podemos escribir seguir la siguiente funcionalidad. Hay algunas cosas de las que quería hablar antes incluso de hacerlo. Entonces debes haber notado que simplemente estoy usando un modelo de vista y poniendo ahí todas las funciones. Esto no es realmente apreciado. Yo diría que esencialmente estamos haciendo que el archivo sea demasiado grande, y podría causarte problemas para poder hacer cambios en el futuro, si tienes que implementar algo más y sigue haciéndose cada vez más grande, así que es difícil mantenerlo así. Lo que podrías hacer es que podrías segregar los modelos de vista según las vistas Pero eso es algo que quería dejártelo a ti. Así que solo podrías crear tus propios modelos de vista, uno específicamente para la tierra, uno específicamente para el feed casero, y luego estaría la sección de usuario. Entonces podrías hacer algo así. Realmente no estaba planeando implementar esto porque esto es más una limpieza y una cosa del sitio de desarrollo que podría ayudar a los Devs a comprender mejor el código Y si estás trabajando en equipo o algo así, entonces definitivamente eso es algo en lo que debes pensar. Aquí solo estamos construyendo esta aplicación para nuestro propio uso personal y desde una perspectiva de aprendizaje. No lo creo es tanto necesario que, quiero decir, incluso si segregas todo este modelo de vista en otros tres modelos de vista, no cambia el hecho de que la funcionalidad sigue siendo la misma Entonces es por eso que hasta ahora no he hecho esa cosa. Entonces no es que no me diera cuenta de esto, sino que fue solo que no quería ir por esa ruta, así que esa es la y además, me disculpo por todos los ruidos de fondo en los últimos videos Realmente estaba tratando de mantener el ruido al mínimo, pero a veces en el barrio, están pasando cosas, así que eso pasa, pero aparte de eso, trato de mantenerlo al mínimo posible. Empecemos con nuestra funcionalidad. Así vamos a crear una matriz de seguidores. Básicamente, esto incluiría que sería de usuario de base de datos, y sería una matriz MD. Vamos a hacer esto. Esto está ahí. Podemos copiar esto y podemos agregar lo siguiente. Entonces esto es para nuestro propio usuario, el usuario con el que estamos iniciados. Esto es para ese usuario, y entonces lo que podemos hacer es que podamos agregar otra propiedad publicada, y esto mantendría es la siguiente funcionalidad. Entonces básicamente, si estoy siguiendo o no, podemos comprobar desde aquí para que cuando vayamos al perfil de otra persona, supongamos aquí, este texto debería actualizarse en lugar de que los estemos siguiendo o siguiendo no. Entonces esto es una cosa que hay que cuidar. Ahora lo que podemos hacer es que podamos agregar otra propiedad publicada, y a esta vamos a llamar a otro usuario de base de datos así de manera similar, en los últimos segundos, estaba explicando que cómo necesitamos hacer dos llamadas API diferentes, nosotros dos diferentes ID de usuarios. Entonces estaba pensando que cuando vayamos al perfil de otra persona, en realidad almacenaríamos este usuario de base de datos dentro del otro usuario de base de datos para facilitarnos las cosas. Y además, debes estar notando que si volvemos aquí, lo que está pasando es que busca al usuario equivocado y nos muestra Esto no se aprecia en absoluto, cierto, porque parece un error importante dentro de la aplicación. Siento mucho este ruido. Déjame dejar la botella a un lado. Entonces sí, esto está ahí. Entonces bien, ahora mismo, nos está dando algún error. Obviamente, tenemos que hacerlo opcional y darle un valor de nill. Entonces esto está ahí. Ahora podemos comenzar agregando la siguiente funcionalidad, y luego haríamos algunos cambios dentro de las funciones existentes también para que todo funcione. Así que primero bajaría sería simplemente simplemente recuperar los datos de los seguidores de los usuarios Para que podamos escribir funk privado. Ahora lo que podemos hacer es que podemos escribir fetch user followers data, y podemos escribir el ID de usuario, y podemos darle una cadena tipo Esto está ahí. Entonces podemos escribir lanzamientos asíncronos y esto daría un área de usuarios de base de datos Esto está bien. Podemos abrir el paréntesis Podemos seleccionar un DB, que sería del tipo fistoe dot Firestore . Esto está ahí. Y entonces lo que podemos hacer es que podamos crear una referencia, y esta referencia básicamente habrá try esperar y sería db dot collection. Esto serían Usuarios. Yo sería documento con nuestro ID de usuario, y dentro de los usuarios, tendríamos otra colección a la que llamaríamos seguidores. Entonces este es el Esto aún no se ha creado porque nuestro usuario no ha seguido a nadie o nadie más ha seguido a nuestro usuario. Entonces eso está bien, y se resolvería una vez que empecemos a seguir a la gente de aquí y allá, así que dejemos que los seguidores iguales se esfuercen. Ahora lo que podemos hacer es que podamos usar la referencia. Entonces podemos usar los documentos y mapearlos a nuestro usuario de base de datos de manera similar como lo hicimos para nuestras otras funcionalidades. Hicimos esto una vez por post. Hicimos esto para decodificar todos los usuarios en la página Explorar. Entonces esto es algo que estamos haciendo. Si recuerdas esa función, busca todos los usuarios de la base de datos Entonces es algo así solamente, y podemos hacer como usuario de base de datos punto self. Esto está ahí. Y ahora solo podemos devolver seguidores desde aquí. Entonces esto está bien. Creo que esta función ya no debería arrojarnos ningún tipo de error. Bien. Ahora lo que podemos hacer es que podamos escribir una función pública que realmente haga uso de esta función ASN privada y nos ayude con la funcionalidad Entonces bien, así que solo iba a buscar seguidores Y dentro de aquí, podemos escribir ID de usuario, que sería del tipo string. Esto está ahí. Podemos agregar preguntar. Podemos agregar a atrapar. Y dentro de dos declaraciones, ahora escribiríamos Deja que los seguidores iguales intenten esperar. Buscar usuario buscar seguidores de usuario. Éste, éste. Y lo que podemos hacer es que podamos pasar en el ID de usuario que estamos obteniendo de aquí. Ahora podemos abrir una cola de despacho. Así que vamos a ir sobre la apertura de la cola de despacho punto punto Asincrónico, no asincrónico después Así que vamos a eliminar todo esto. Podemos abrir el cierre. Ahora dentro del cierre, podemos escribir seguidores autodidactas, es igual a seguidores, y podemos agregar una declaración impresa, que diría que los seguidores de los usuarios alimentados con éxito. Entonces eso está ahí y dentro de la instrucción DCAT, podemos escribir Fallo al buscar seguidores de usuario y podemos agregar error punto descripción localizada Entonces, para darnos alguna idea, como lo que está pasando. Ahora que hemos hecho obtener datos de seguidores de usuarios, ahora podemos copiar toda esta funcionalidad. Podemos pegar esto de nuevo. Podemos nombrar a esto siguiente y podemos nombrar a éste seguidores. Este es el usuario fetch que sigue los datos. Podemos copiar esto. Podemos pegar esto aquí. Ahora aquí en realidad necesitaríamos hacer referencia al siguiente lado de las cosas y no a los seguidores. Todo lo demás sigue igual. Y dentro de buscar seguidores de usuario, necesitamos cambiarlo para buscar seguidores de usuario necesitamos cambiarlo para buscar seguidores de usuario . Entonces esto está ahí. Ahora que estamos usando podemos renombrar esto y podemos renombrar esto y siguiendo consigue nuestro siguiente esto está ahí. Entonces creo que esta funcionalidad también está hecha. Podemos escribir lo siguiente aquí también. No creo que sea necesario hacer más cambios, utilizamos los siguientes datos referencias usuarios con siguiente colección. Esta fue la colección de seguidores. Los mapeamos en nuestra propia estructura, devolvemos, y dentro de esta función, usamos el objeto task, llamamos a esta función, poblamos nuestra propiedad publicada con ella usamos el objeto task, llamamos a esta función, poblamos nuestra propiedad publicada con Y esto está bien. Ahora necesitamos agregar una función, que verificaría si el usuario sigue al otro usuario. Básicamente, de lo que estaba hablando de eso si solo voy al perfil de otra persona, ¿cómo sabría si sigo a esta persona? Entonces necesitamos hacer una llamada API para eso, bien. Y si en la matriz, puedo encontrar el ID de usuario de esta persona, simplemente puedo mostrar aquí que podemos devolver true, y luego se puede mostrar seguido, siguiendo o siguiendo aquí, y eso funcionaría. Entonces sí, eso es lo que vamos a hacer. Podemos escribir función. Comprueba si el usuario sigue, podemos hacer la U capital aquí. Esto está ahí. Podemos tomar en nuestro ID de usuario. Básicamente, este ID de usuario sería del usuario que estaríamos comprobando nuestro propio usuario. Así que puedes hacer dejar que los seguidores array iguales autodidactas siguiendo el mapa de puntos, y podemos obtener el ID de usuario de ellos. Así ID de usuario. Esto está ahí, y ya podemos abrir una cola de despacho, despachar qu punto punto principal Asincrónico Y dentro de Async, podemos hacer self dot es el siguiente valor, que acabamos de agregar arriba, y podemos comprobar si followers array, básicamente no followers array, pero debería ser siguiendo array El siguiente punto contiene el ID de usuario. Entonces, ¿qué estamos haciendo aquí? Solo para asegurarnos de que estamos verificando la propiedad publicada a continuación, que se actualiza a través de esta llamada API. Entonces para nosotros como usuario, así que supongamos que estoy conectado como el nombre de usuario se fue, lo que está sucediendo es que para ido, hacemos la llamada API para recuperar todos sus seguidores, y dentro de los seguimientos, podríamos o no Bien, entonces supongamos que estamos siguiendo ese ID de usuario en particular con Crolo Lo que pasaría es que se almacenaría aquí, y como lo estás mapeando, entonces estamos convirtiendo un tipo a otro. Así que básicamente siguiendo, que es del tipo usuario de base de datos se convierte a sólo una matriz con algunos ID de usuario. Entonces ID de usuario uno, ID de usuario dos, ID de usuario tres, algo así. Entonces ahora que esta matriz es sólo del tipo string, podemos opción hacer clic en ella y verificar por nosotros mismos. Entonces lo que pasa es que ahora podemos usar esta propiedad, y esta es esta función definida para arrays. Básicamente, comprueba dentro de esta matriz. Si este ID de usuario en particular que hemos pasado, en nuestro caso, este ID de usuario sería el ID de usuario de esta persona, cuyo perfil acabamos de abrir. Entonces esta es una llamada API que necesitamos hacer cada vez que abrimos el perfil de otra persona. Entonces sería para la vista general del perfil de usuario, haríamos esta llamada API. Entonces eso está ahí, y devuelve ya sea verdadero o falso, y le asignamos eso a es siguiendo la funcionalidad que podamos saber si la persona sigue a la persona o no. Entonces sí, esto está ahí. Ahora lo que podemos hacer es que podamos deberíamos trabajar ahora en manejar seguir. Entonces, básicamente, podemos trabajar primero en la siguiente funcionalidad, en la siguiente funcionalidad. Esto está ahí. Ahora lo que podemos hacer es que podamos escribir una función privada. Podemos llamar a este identificador follow user. Esto está ahí, entonces podemos agregar dos parámetros. Uno sería el usuario actual, que sería del tipo usuario base de datos, y el otro sería el otro usuario, básicamente la persona que estamos siguiendo aquí. Y esto sería del tipo usuario base de datos también. Esto está ahí. Ahora podemos escribir Asíncrono por aquí. Y vamos a abrir paréntesis. Ahora tomaremos una referencia de FSTorls así festo punto Esto está ahí. Ahora podemos verificar nuestro ID de usuario actual. Entonces básicamente, eso es lo que estoy haciendo aquí. ID de usuario actual, que sería ID de punto de usuario actual. Y ahora lo que podemos hacer es que podamos añadir una coma aquí. Podemos crear otro let y podemos llamar a otro ID de usuario, y esto sería para el otro usuario punto ID de usuario. Entonces esto está ahí. Ahora bien, si esto no funciona, podemos simplemente lanzar un error básicamente, y podemos decir error NS, y este error tendría algún tipo de dominio, y este dominio sería un ID de usuario no válido, y el código debería ser cero o algo así. Realmente no necesitamos darle otra cosa. Entonces sí, esto está ahí. Ahora lo que haríamos es que haremos referencia a las siguientes subcolecciones y seguidores de los respetados usuarios. Básicamente, tal y como te dije, ahora estamos manejando la funcionalidad follow. Lo que sucede es que habría una llamada API de RN agregar ese usuario en particular en siguiente subcolección de nuestro usuario, y luego habría una API particular llamada desde el final de ese usuario, que nos agregaría en su siguiente colección en su colección de seguidores. Entonces sí, eso es lo que estamos haciendo. Entonces tomemos una referencia. Vamos siguiente referencia, esto tendría colección DBet. Esto haría referencia a los usuarios. Entonces accedería a un documento con nuestro ID de usuario actual, básicamente. Y entonces podemos tener colección, y esta colección estaría siguiendo. Y ahora podemos obtener un documento y este documento debería ser otro ID de usuario. Entonces básicamente, estamos haciendo referencia si este documento ya existe o no Entonces, de manera similar, dejamos que los seguidores hagan referencia. Podemos hacer recolección dbdt. Entonces podemos tener usuarios aquí. Ahora podemos obtener documento, y dentro del documento, tendríamos el otro ID de usuario. Dentro de la colección, íbamos a seguidores y dentro de seguidores, buscarás otro documento en este documento con nuestro ID de usuario actual Entonces el primer paso es hacer referencia. Nuestro propio usuario haciendo referencia a la persona que está siendo seguida Entonces sí, esto está ahí. presionar y entrar aquí, entonces esto está ahí. Ahora seguimos adelante. Lo que hacemos es que necesitamos codificarlos en diccionarios porque en este momento nuestro usuario de base de datos es nuestro propio tipo personalizado, que no se entiende por base de archivos, así que podemos crear un diccionario fuera de ahí, así podríamos tener el uso actual de los datos actuales del usuario, y podríamos hacer triflestore Esto es algo similar que hicimos hace un tiempo. Si solo puedo buscar esto, podríamos obtenerlo en otro lugar, y esto fue para agregar post al usuario porque necesitamos codificar el post para que se cargue. Entonces eso es lo que estamos haciendo aquí. Y este encoder dot Dot encoder está ahí, y debería tener el usuario actual, básicamente. Y de manera similar, lo que haríamos es que podamos tener otros datos de usuario. Y dentro de aquí, en realidad agregaríamos otro usuario. Entonces eso es lo que estamos haciendo aquí. Ahora lo que haríamos es que agregaremos el otro usuario a los usuarios actuales siguiendo la subcolección. Entonces, sí, vamos a hacer eso. Prueba un peso, y tendríamos que usar la siguiente referencia, y la ortografía es un poco incorrecta, diría yo. Debe ser la siguiente referencia, y debe ser la referencia de los seguidores. Entonces sí, esto está ahí. Entonces, la siguiente referencia realmente usará datos de conjunto, y usaría otros datos de usuario aquí. Y de manera similar, agregaríamos el usuario actual a la subcolección de seguidores de otros usuarios. Entonces sí, esto está ahí. Ahora lo hacemos de nuevo intentamos esperar, agregaríamos followers reference dot set data, y esto tendría los datos actuales del usuario, básicamente. Entonces sí, esto está ahí. Ahora lo que tenemos que hacer es eso, solo pensemos en eso. Ahora que hemos escrito la función privada, podemos simplemente terminar esto dentro de una función pública, que sería funk, handle follow Y esto obviamente tomaría de nuevo dos parámetros. Así que vamos a copiarlo de aquí. Y esto llamaría internamente a nuestra función privada, que es nuestra función asíncrona Entonces eso es lo que vamos a hacer aquí, tarea, entonces tenemos un do y un bloque de caché. Ahora, dentro de un doblock probaríamos un peso, y habríamos manejado follow user, y luego podemos simplemente pasar en nuestro usuario actual y los demás usuarios otro usuario Entonces todo esto parece estar bien. Ahora lo que podemos hacer es que podamos llamar a esta funcionalidad comprobar si el usuario sigue. Y para el ID de usuario, agregaríamos el ID de usuario de punto de usuario actual. Signo de interrogación esto. Entonces básicamente, en el momento en que estamos haciendo esta llamada API, el momento en que termine, también estamos comprobando si esta ha sido actualizada. Entonces nuestra propiedad publicada de I following también se actualiza para que podamos aparecer en la vista justo después hacer clic en Seguir en el perfil de otra persona. Entonces eso es lo que estamos intentando aquí. Ahora dentro de una sentencia print, lo que podemos hacer es que haya seguido con éxito al usuario, y dentro de nuestra declaración catch, podemos escribir fallido al seguir al usuario, y podemos agregar una descripción aquí, error punto Descripción localizada. Entonces eso está bien. Así que hemos manejado con éxito seguir la siguiente funcionalidad. Ahora lo que podemos hacer es que tenemos que ir dentro de nuestra búsqueda de datos de usuario, básicamente Así que vamos a entrar a buscar. Hagamos el comando F, busquemos los datos del usuario. Realmente no estamos entendiendo esto porque escribí la ortografía incorrecta, así que buscar datos de usuario está aquí Ahora bien, esta vez realmente tomaríamos un valor booleano Así es el usuario actual, que sería del tabú Lo que voy a hacer aquí es que en vez de simplemente crear otra función, podemos comprobar que si su usuario actual es, uh dos, podemos usar el usuario de base de datos self dot y agregar esto. contrario, lo que podemos hacer es que podamos usar nuestro otro usuario autodidacta de base de datos y agregarlo aquí. Entonces, ¿cómo usaríamos realmente esta funcionalidad? O sea, entonces para poder usar esto, sabrías que si solo intento ejecutar la app, debería arrojarme error tanto en los lugares a los que estoy llamando a esta función, y sería la vista del perfil de usuario así como la vista general del perfil de usuario. Me está preguntando, y dice, si es un usuario actual, pero, ya sabes, la vista general del perfil de usuario es para mostrar el perfil de otras personas. Entonces esto es falso en nuestro caso. Entonces, si conviertes esta cosa como falsa, lo que pasa es que va al resto Blog y ahora se está utilizando otro usuario de base de datos. Así que vamos a ir rápidamente dentro de aquí también y comprobar si necesitamos usar esto y necesitamos bien, se pone un usuario de base de datos, así que eso está bien. Y necesitamos creo que aquí estamos pasando en una base de datos de usuario. Así que realmente no necesitamos hacer una llamada a la API para buscar nada Entonces, bien, realmente no creo así que necesitemos hacer alguna llamada a la API aquí para recuperar algo a ese usuario Lo que podemos hacer es que podamos comentar esta funcionalidad e intentar ejecutar la aplicación y ver por nosotros mismos si está causando algún tipo de problema. Entonces bien, dice corrientes faltantes. Solo agreguemos, llamémoslo cierto. Supongo que no es necesario para aquí, pero luego cuando hacemos nuestra llamada API para seguidores seguidores, necesitaríamos eso. Entonces sería mejor para nosotros mantener eso ahí. Y vamos a ver esto rápidamente. Entonces sí, entendí el hecho de que realmente no necesitamos estas llamadas a la API para poder mostrarle a alguien más. Al igual que, supongamos que esto funcionaría bien porque es ir a buscar cosas de Crolos Pero entonces no se está actualizando porque no se está llamando a Fetch user post, así que me está mostrando la publicación de nuestros propios usuarios Entonces ahí está. Pero esto sería necesario cuando manejemos la siguiente funcionalidad. Así que vamos a mantenerlo ahí. Entonces esto está ahí ahora que hemos hecho tanto. Solo volvamos al interior de nuestro modelo de vista principal. Ahora podemos plegar esta función, recuperar datos de usuario. Sólo podemos subir. Este es nuestro usuario de seguimiento de mango, y esta es nuestra funcionalidad de seguimiento de mango. Ahora podemos hacer ahora que hemos agregado la siguiente funcionalidad, también necesitamos hacer una cosa más, que es dejar de seguir la funcionalidad Entonces podríamos escribir la funcionalidad de dejar de seguir. Este propósito, vamos a copiar, pegar las dos funciones completas aquí, y decimos manejar, dejar de seguir usuario dejar de seguir Esto está ahí, y manejar dejar de seguir. Esto está ahí. Ahora lo que podemos llamar es que podemos llamar a handle unfollow user Y, bien, esto parece estar bien. Y veamos cuáles son todos los cambios que necesitamos hacer porque obviamente no va a ser lo mismo que acabamos de hacer. Entonces, básicamente, podemos ir diciendo que necesitamos un ID de usuario y el otro ID de usuario. Y lo que podemos hacer es que podamos ir a buscar a ese usuario de ahí Y ahora, déjame pensar que incluso necesitamos a todo el usuario o simplemente necesitamos incluso un usuario completo solo necesitamos ID de usuario de la cadena tipo, y necesitamos otro ID de usuario, que también sería del tipo string. Entonces esto está ahí. Ahora bien, esto sería acallar a través obviamente Nos referimos podemos hacer referencia a los usuarios actuales siguiendo sub colección. Sí, necesitamos eso. Así que podemos podemos simplemente quitar esto de aquí por ahora. Y entonces nosotros no necesitamos esto. Por lo que vamos dentro de la siguiente referencia. Vamos usuarios de TV, y luego dentro del documento, tendríamos el ID de usuario, esto está bien. Dentro de colección, vamos a seguir el documento, tendríamos otro ID de usuario. Esto está bien. Entonces lo que hacemos es que eliminemos el documento, básicamente, y de la siguiente subcolección, para que realmente no necesitemos, ya sabes, no necesitamos, um, ya no necesitamos a esa persona en una siguiente lista, siguiendo la subcolección porque les ha dejado de seguir Entonces ahí está. Entonces esa es una simple llamada APA. Hacemos un intento esperar, y hacemos siguiendo siguiente referencia, pensamiento, eliminar, básicamente. Entonces esto está ahí. simplemente quitar todo esto de aquí. Realmente no necesitamos esto. Entonces esta es una cosa que es simplemente mejorarla. Entonces, en realidad, solo estoy averiguando esto que realmente no necesitamos toda la funcionalidad en una sola función Entonces básicamente, podemos llamar a esto remove de remove de siguiente. Entonces esto es lo que hace esta función. Elimina al usuario tomando su referencia de lo siguiente. Entonces sí, ahora necesitamos escribir otra función, así podemos copiar esto y podemos llamar a esto eliminar de seguidores. Entonces básicamente, cuando dejamos de seguir a alguien, esa persona es eliminada de nuestra siguiente subcolección Y de igual manera, para esa persona, quitada de su subcolección de seguimiento. Entonces eso es lo que va a ir aquí. Entonces básicamente, está el ID de usuario y luego está el ID de seguimiento, básicamente. Vamos a llamarlo. Seamos un poco más descriptivos. Por lo que podemos hacer referencia a que el usuario está dejando de seguir y sus seguidores sub colecciones que debemos hacer Sí, eso tiene sentido. Básicamente, hacemos referencia a que el usuario está dejando de seguir y sus seguidores sub colección Entonces podemos tener seguidores de referencia, y podemos ir dentro del documento DBUSers sería ID de usuario, y la colección sería seguidores, y este debería ser el ID de seguidor, básicamente Y lo que hacemos aquí es ahora que eliminemos el documento, obviamente de la sub colección seguidores. Entonces debería haber seguidores. Debería haber seguidores, y esto se elimina. Sí, así es como manejamos los removidos de seguidores. Ahora lo que hacemos es que combinamos ambas funciones dentro de una sola función, que llamamos handle y follow. Entonces esto obviamente requeriría al usuario actual y al usuario de la base de datos. Simplemente eliminemos el cierre de la tarea porque realmente no lo necesitamos. Ahora podemos abrir nuestro propio cierre de tareas. Sería un poco diferente al último, así que para atrapar obviamente debería estar ahí. Entonces lo que hacemos es que eliminemos el o el usuario de los usuarios actuales, usuarios actuales, siguiendo la subcolección. Solo estoy tratando de ser muy descriptivo a través mis comentarios para que más tarde cuando vuelva a mi propio código, pueda entender qué tipo de lógica estaba tratando de hacer aquí para eliminar de seguir. Y en el ID de usuario, pasaríamos el ID de usuario de punto de usuario actual, y podemos pasar en una cadena vacía si eso es NIL Y para el otro usuario, pasaremos en otro usuario punto ID de usuario, y nuevamente, una cadena vacía si eso no es requerido. Y entonces lo que podemos hacer es que podamos eliminar al usuario actual de otros usuarios seguidores colección sub. Entonces esta debería ser la sub colección de la ortografía de from está mal. Eliminar el usuario actual de otros usuarios. Seguir la subcolección. Tiene sentido. Prueba esperar, eliminar de seguidores. Y para el ID de usuario, nuevamente, sería el ID de usuario de otros usuarios. Y para el ID de seguidor, sería el ID de seguidor de nuestro usuario actual , básicamente el ID de usuario. Espero que esto tenga sentido. Quiero decir, al principio es un poco confuso, pero solo lo miramos. Son solo una subcolección para nuestro usuario, y la subcolección de la otra persona estaría ahí. Entonces eso es lo que estamos haciendo. Y si notas que esta función se elimina de los seguidores, lo que estamos haciendo es que estamos haciendo referencia la colección de una identificación de usuario de la otra persona, y luego nos estamos quitando a nosotros mismos Entonces es por eso que el ID de seguidor seríamos nosotros y el ID de usuario serían ellos. Entonces eso es lo que está pasando aquí abajo y lo que podemos hacer es que podamos imprimir que hayamos dejado seguir con éxito sí, esto está ahí Ahora lo que podemos hacer es que podamos ejecutar nuestra comprobación si el usuario sigue para que podamos actualizar la propiedad I follow, y podamos pasar el ID de usuario de punto de usuario actual, y puede ser nulo, así que elimina esto, elimina la brecha entre las declaraciones y dentro de nuestra sentencia CAT. Lo que podemos hacer es que podamos obtener una declaración impresa. Dentro de la declaración impresa, hubiéramos fallado en dejar de seguir, y, sí, eso es todo Así que tenemos éxito Lo siento por eso. Hemos escrito con éxito las funciones para manejo de seguimiento, así como manejo de seguimiento. Y hemos hecho ese pequeño pequeño cambio en nuestra búsqueda de datos de usuario para que podamos almacenar los datos de otros usuarios por separado en otro publishi para que podamos usarlo para todo este seguimiento siguiente funcionalidad Entonces sí, esto está ahí. Sólo estoy pasando por el código uno, así puedo ver eso si no me estoy perdiendo algo. Entonces tenemos el mango síguenos y manejar seguir. Entonces tenemos dos funciones privadas más, y de hecho podríamos tener un club juntos. Realmente no importa, pero entonces es más descriptivo de esta manera, así podemos tenerlo así. Y ahí está el mango en follow. Todo esto está bien. Y entonces tenemos fetch database user, que ahora fetch database user es una simple función G request, así que eso está Um, todo esto me queda bien. Solo eliminemos algunos espacios extra. Entonces déjame pensar si hay algo más que tenemos que hacer. Creamos una funcionalidad D, follow, creamos una funcionalidad D, unfollow Hicimos un cambio dentro de nuestro fetch user data, fetch user data, así que eso está bien Lo que podemos hacer es intentar hacer el Appvce para ver que si algo se rompe por casualidad, pero en realidad no creo que eso pasaría porque no hemos hecho ningún cambio tan importante con las opiniones existentes Entonces eso debería estar bien. Entonces déjame ver a la vez. Y aparte de eso, me siento como Bien, así que tenemos nuestro propio usuario, sus publicaciones y todo. Vamos a Explorar, vemos a otras personas. Esta persona no tiene nada. Tenemos a esta otra persona. Están llegando sus puestos. Todo esto me queda bien por ahora. Entonces lo que podemos hacer ahora es que solo podemos implementar esta funcionalidad con una interfaz de usuario parte de las cosas porque ahora mismo este botón no hace nada, así que eso es lo que tenemos que hacer aquí en el siguiente video. Y también, podemos retomar la página de conexiones o algo así. Podemos crear una vista genérica para mostrar ya sea a tus seguidores o tus seguidores que sería una tarea divertida de hacer. Y debes tener aviso en la página Explorar si vas a alguna otra persona. No vemos a ninguno de sus seguidores ni seguidores, así que las cosas se vuelven un poco más fáciles para nosotros. Pero depende de ti si realmente quieres agregar esa funcionalidad que podamos ver a otras personas siguiendo también. Entonces te sugiero que puedas asumir esta tarea como un reto y podrías trabajar tu salida, y siento que también podrías hacerlo. Entonces de todos modos, si tienes alguna duda, solo puedes dejarlas abajo en los comentarios. Estaría muy feliz de ayudar. Espero ver en el siguiente video. Gracias. 26. Funcionalidad de seguimiento de seguidores: El último video, habíamos anotado todas las funciones que necesitamos para implementar la siguiente funcionalidad de seguimiento. Entonces en este video, en realidad solo trabajaríamos nuestro camino hacia arriba, crearíamos una vista genérica que necesitamos para mostrar a nuestros seguidores y seguir y luego finalmente implementar esa funcionalidad dentro de la vista general del perfil de usuario también. Así que vamos a ir aquí. Dentro de las vistas, crearíamos otra vista ahora, y vamos a seleccionar una vista de interfaz de usuario rápida y llamar a esta página de conexiones. Entonces la página de conexiones es básicamente una vista genérica que mostraría ya sea a los seguidores o lo siguiente dependiendo de cómo abramos esto, básicamente. Así observamos el modelo de vista de objeto, y debería tener un modelo de vista terrestre o ¿cuál era nuestro nombre de modelo de vista? Es un modelo de vista principal, mi mala. Entonces esto está ahí, obtenemos usuarios de aquí. Los usuarios serían usuario de base de datos, y entonces podemos tener un objeto de entorno. Básicamente, necesitamos esa clave de entorno para el modo de presentación. Entonces modo de presentación copia esto, página esto aquí, el modo de presentación está todo presentado. Ahora podemos abrir una pila Z aquí. La pila Z tendría un punto de color negro. Hubiera ignorado zona segura. Esto está bien. Lo que podemos hacer es ir a la Página de Explorar. Explorar Vista de página tiene este botón. Así que solo podrías usar ese botón aquí. Entonces de manera similar, aquí tendremos una vista de desplazamiento, y vamos a agregarla aquí. Entonces se establece nuestro botón de retroceso. Ahora lo que podemos hacer es que podemos abrir un Vt esta pila V de manera similar estaría usando la pila vertical según la expropage Solo vamos al interior del Explopage y copiemos esta pila vertical Volvamos, pega esto aquí. Entonces ahí lo conseguimos. Ahora hay algunos cambios que tenemos que hacer, por lo que estamos utilizando usuarios que se está pasando a esta vista. Entonces usamos usuarios, y tenemos vamos a agregar S aquí, deberían ser usuarios, no usuario. Y entonces lo que podemos hacer es que podamos comprobar que si user dot user ID no es igual a nuestro usuario actual south dot, solo importemos Free firebase art Entonces esta es la clase de arte. Entonces podremos tener el usuario actual dot u ID. Y supongamos que si está ahí, lo que podemos hacer es que podamos agregar si no está ahí, básicamente, podemos agregar un enlace de navegación. Este enlace de navegación sería algo similar a esto. Entonces puedes pegarlo aquí. Básicamente, nos dirigía a una vista de perfil de usuario general donde estamos pasando el modelo de vista y el usuario de la base de datos, y la etiqueta volverá a ser vista de celda de perfil, y si le damos algún tipo de relleno para que se vea mejor, podríamos hacer eso, y sí, esto está ahí Tenemos el relleno y creo que necesitamos agregar navegación mal botón oculto, lo cual es cierto aquí. Entonces esto es una cosa. Ignorar el área segura. ¿Realmente necesitamos agregar Ignorar área segura todo o lo hace por defecto? Creo que lo hace por defecto, pero por si no lo hace, en realidad nos estamos perdiendo esto en muchos lugares. Así que vamos a comprobar rápidamente dónde hemos agregado esto. Siento que no lo hemos hecho. Bien, entonces no lo hemos agregado en ningún lado, así que creo que así no se requiere de todo. Entonces esto está bien ahora que hemos hecho tanto. Nuestra vista general de perfil de usuario necesita algunos cambios, básicamente. Entonces, antes que nada, podemos tener una propiedad estatal, que sería que debería haber una w privada estatal, y debería ser está siguiendo. Entonces, por qué estoy haciendo esto es porque la otra propiedad que está siguiendo es en realidad una propiedad publicada, y podría ser que la llamada de la EPA lleve algún tiempo actualizarse. Entonces para que lo podamos mostrar rápidamente al usuario, voy a usar una propiedad estatal, y entonces obviamente podemos hacer que la APA llamando al fondo. Entonces eso es lo que voy a hacer aquí. Ahora bien, tenemos algún texto que dice usuario de base de datos, esto me parece bien. Entonces sí, esto está ahí. Ahora sí tenemos Tubton que fue la siguiente función de seguidor Pero básicamente lo que podemos hacer es que podamos agregar algo de espaciado aquí está siguiendo si es cierto, lo que podemos hacer es que podamos mostrarle al usuario que deje de seguir Y si no es cierto, podemos mostrarle al usuario a seguir. Entonces sí, esta es una mejora. Ahora dentro de Tubton en realidad necesitaríamos agregar algo de lógica Así que comencemos comprobando al usuario actual. Entonces Dios dejó que el usuario actual que obtendríamos del usuario de base de datos viewmodelt, y de lo contrario podemos simplemente regresar de aquí si no tiene valores, así que eso está Entonces lo que haríamos es que comprobaríamos si viewmdelt está siguiendo si este valor de propiedad publicada es falso, lo que podemos hacer es que podamos llamar Vwmdel Entonces en el usuario actual, usaríamos el usuario actual, y en el otro usuario, usaríamos el usuario de la base de datos, que se está pasando a esta vista, que es esta. Volvamos aquí. Y si este no es el caso, realidad tendríamos que encargarnos de dejar de seguir Básicamente, debe ser manejar dejar de seguir. Para el usuario actual, nuevamente sería el usuario actual. Y para el otro usuario, debería ser el usuario de la base de datos. Entonces esto parece estar bien. Y lo que podemos hacer es que podamos alternar es seguir dos verdaderos o falsos aquí. Entonces sí, esto está ahí. Ahora que hemos sumado tanto, siento que la funcionalidad está completa. Déjame solo pensarlo. ¿Necesitamos hacer algún otro cambio? Hemos agregado una fuente, hemos agregado el color de primer plano y Y bien, lo que tenemos que hacer aquí ahora es que después del frame, lo que podemos agregar es que un modificador on change, básicamente, y este modificador on change comprobaría que el punto ViewModel está siguiendo y lo puede hacer es que obtendrá un valor antiguo y un nuevo valor Entonces estableceríamos es siguiente valor a nuevo valor. Entonces básicamente, esa propiedad publicada, el momento en que cambia, refrescamos nuestro local es seguir valor con un nuevo valor. Entonces eso es lo que voy a hacer aquí. Ahora dentro en aparecer, en realidad necesitamos hacer pocos cambios. Entonces esta obtención de datos de usuario está bien. Obtener publicación de usuario está bien. Lo que haríamos es que buscaremos ver modelo tot Seguimiento del usuario del parche. Entonces, básicamente, cuando aterrizamos en el perfil de otra persona, en realidad haríamos una llamada API para verificar nuestros usuarios firmados siguiente lista. Y en el momento en que revisamos los usuarios finales firmados siguiente lista, tenemos la base de datos viewmdelt user dot user ID, y necesitamos Y lo que podemos hacer es que podamos verificar nuestro ¿Estamos realmente actualizando la llamada a la función? Bien, así que busca el siguiente usuario, no estamos usando esta llamada a la función Entonces, lo que podemos hacer es que, en lugar de llamarlo aquí, también podemos llamar a esta funcionalidad aquí. Verifica si el usuario sigue, pero luego comprueba si el usuario sigue, realmente no me deja solo verificar. Entonces está tomando en fetch user following con nuestro usuario actual, y necesitaríamos una base de datos user ID de usuario, así que no tenemos eso aquí Entonces o podemos llamar a esta función desde dentro de aquí, o bien podríamos simplemente llamar a esto o simplemente hagamos una cosa que nosotros lo que podemos hacer aquí es que podemos llamar a esta cosa. Y podemos llamar a la función aquí, o dejarme simplemente intentar llamarla rápidamente aquí y ver si hay un retraso. Así podemos comprobar si el usuario sigue, y sería la base de datos usuario punto ID de usuario. Todo esto parece sencillo hasta ahora. Entonces necesitaríamos simplemente comprobarlo si tenemos esto funcionando. Pero solo antes que nada, vayamos a nuestra vista de perfil de usuario. Deberíamos estar haciendo que un seguidores vea a sus seguidores y vea sus seguidores. Entonces, básicamente, los envolveremos dentro del enlace de navegación ahora. Por lo que debe haber un enlace de navegación. Debería haber una etiqueta, esto debería abrirse así. El enlace de navegación nos lleva a la página de conexiones. La página de conexión toma en un modelo de vista. Y toma en un usuario, por lo que debería ser ver los seguidores del punto del modelo. Y en la etiqueta, podemos simplemente pasar todo esto. Entonces dice ver a tus seguidores, esto está bien. Lo que podemos hacer es que podamos copiar esta cosa , pegarla aquí, agregar otra aquí, y esto debería estar siguiendo. Entonces estamos pasando a los usuarios directamente a la vista en lugar de simplemente hacer que hagan una llamada a la API dentro la página de conexiones. Entonces eso está ahí. Ahora lo que tenemos que hacer es que necesitamos ir muy abajo dentro en un par, y aquí ya tenemos Fetser data fetserPost Ahora haríamos ViewModel dot fetch user followers, que volvería a tener nuestro ID de usuario, y podemos tener view model dot fetch user following que también tendría nuestro ID de usuario following que también tendría Así que esencialmente estamos haciendo las cuatro llamadas a la API. Y ahora solo intentemos ejecutar la aplicación y ver si la siguiente funcionalidad del seguidor está funcionando o no. Entonces hay una mejora que podríamos hacer aquí es que podemos llamar directamente a verificar si el usuario sigue dentro de Fetch usuario siguiéndose a sí mismo Entonces eso es una cosa que podemos hacer, pero entonces lo que sucede es que fetch user following es una función tan genérica También se le llama dentro de nuestra vista de perfil de usuario principal. Entonces ahí necesitaríamos proporcionar un argumento por defecto para que funcione en todas partes, eso se puede hacer. Pero supongamos que si no hay rezago en la funcionalidad actual, creo que en realidad no es necesario. Entonces bien, esto es nuevo ¿por qué no aparece este botón? Así que vamos a comprobarlo rápidamente. Deberíamos ir dentro de nuestra vista de perfil de usuario. Y dentro de nuestra vista de perfil de usuario, vamos a comprobar rápidamente si algo pasa con nuestro C tu bien, así tenemos CO siguiendo listo, pero CO seguidores no está funcionando. Entonces puedo ver que no le hemos agregado ningún tipo de color de primer plano, lo cual es raro. Entonces podríamos hacer eso. Entonces tenemos a tus seguidores. ¿Deberíamos tener algo blanco o deberíamos ir por el negro? Vamos por el blanco. Esto está ahí. Hagamos el Comando R, mira esto. Entonces también podríamos tener una pantalla por defecto donde podamos mostrarle a la gente que, Oye, no has seguido a nadie, algo así. Ese es un ámbito de mejora. Podríamos hacerlo en el Vd de nuestra funcionalidad. Vamos a entrar en Explora. Sólo vamos dentro de este usuario. Qué pasaría si acabamos de seguir a este usuario ahora, por lo que se actualizó, siguió con éxito al usuario. Entonces lo que pasa es que si solo vuelvo, vuelvo y si veo o sigo ver a Crolo aquí Si vuelvo con nuestros seguidores, no veo a nadie. ¿Qué pasaría si voy dentro de la configuración, sí asigno hacia fuera, luego voy a asignar en. Ahora, aquí escribiría rolo en dgmail.com, y aquí escribiría contraseña Así que solo vamos a iniciar sesión, y veamos si dentro de nuestros seguidores, vemos C. Así que sí, nuestra funcionalidad está funcionando bien. Podemos ver el perfil de Gon, y no lo hemos seguido. Sólo C nos sigue. Entonces esto es genial. Esta siguiente funcionalidad está funcionando bien, e incluso esta cosa se actualiza muy rápido. Vamos a entrar en. No lo creo, realmente necesitamos agregar esto aquí. Lo que podemos hacer es que podamos ir a Explorar Página y dentro de esta cosa. Lo que podemos hacer es que podamos verificar por nuestro usuario de base de datos, básicamente. Entonces debería ser si el ID de usuario de punto de usuario no es igual a V view model database user dot user ID. Entonces solo muestra todo esto. Entonces podemos comprobar esto si esto funciona o no. Así que vamos a ejecutar la aplicación y ver por nosotros mismos. Ojalá funcione, y realmente no necesitamos mostrarnos en la página Explorar, ¿verdad Eso no tiene ningún sentido. Así que vamos a Explorar y no nos vemos a nosotros mismos, eso es bueno. Vemos ido, y si hacemos clic en seguir, realidad hace una llamada API, nos sigue. Si hacemos clic en Dejar de seguir otra vez, digamos que siguió con éxito a un usuario, lo cual es raro, o tal vez accidentalmente agregué una misma declaración de impresión allí Entonces, ¿qué tal si entramos nuestro modelo de vista principal y comprobamos que tenemos? Simplemente coincidamos rápidamente con la vista general del perfil del usuario para asegurarnos de que lo que llamamos APA que estamos haciendo manejar y seguir seguido con éxito está ahí. Entonces no lo creo. Debí haber declarado que siguió con éxito. Quiero decir, esto solo debería estar dentro de una función que está ahí. Entonces, si solo volvemos, no deberíamos ver ir en lo siguiente. Y si estás viendo entonces eso es raro porque necesitamos dejar de seguir al usuario Entonces, si hago clic en Dejar de seguir dice que no se siguió con éxito Entonces creo que esto funciona ahora. Sólo volvamos otra vez. No veo a nadie. Vamos a Explorar, vamos a ido otra vez. Hacemos clic en seguir. Dice que siguió con éxito al usuario, vuelva a comprobarlo, vaya a siguiente, veo Gone. Lo que hago ahora es que deje de seguirlo. Entonces dice que con éxito dejó de seguirse. Si pudieras ver. Ahora bien, si solo regresas y vuelves, esto no está ahí, así que esto parece estar bien. Entonces toda la funcionalidad está funcionando bien. pudo ver que la carga está tomando bastante tiempo, así que esto no es idele ¿verdad? Entonces lo que haríamos es que usaríamos Kingfisher. Entonces, en el siguiente video, implementaremos Kingfisher para toda la carga de imágenes, y espero ver en el siguiente Gracias por ver esto. 27. Corrección del seguidor: error de seguimiento: futuro, solo quería volver a verificar rápidamente nuestra funcionalidad de seguimiento para saber en caso de que algo no funcione bien Así que vamos a volver a ejecutar la aplicación. Y entonces podemos encargarnos de que si queda algo, lo cual tenemos que hacer. Y al mismo tiempo, estaba pensando que podemos checar en la Firebase también Entonces tenemos un usuario rolo el cual tiene una colección de seguidores en donde podemos ver ido Pero al mismo tiempo, me pareció que esta cosa que va no tiene una siguiente colección, lo cual está un poco mal, creo. Entonces en los seguidores, veo ir, eso está bien. Pero entonces lo que está pasando es que si voy a un seguimiento, no hay nada, ¿ qué tal si voy a seguidores? ¿Qué tal si acabo de refrescar esto ahora? Y, bien, ¿qué tal si voy a este perfil? Doy clic en Seguir. Entonces debí haber seguido al usuario. Volvamos a ver si está actualizado o no. Así que idealmente debería ser. Bien, entonces tenemos una cosa siguiente también este momento y podemos ver que el usuario se ha ido, e incluso en los seguidores, tenemos el mismo usuario. Esto está bien. ¿Qué pasa si dejo de seguir al usuario No deben declarar. Básicamente, no deben declarar seguido con éxito al usuario. Entonces esto es lo que está pasando. Así que vamos a ir a nuestra vista general de perfil de usuario. Ahí debemos estar teniendo esta funcionalidad, y lo que hace es que dice ver modelo punto está siguiendo y ver modelo punto está siguiendo. ¿En realidad estamos actualizando di está siguiendo aquí? Creo que esto está causando el problema. Así que vamos a comprobar rápidamente que tenemos manejar seguir aquí y podemos lo que podemos hacer es que, no, no necesitamos actualizar el mango follow. Pero entonces, ¿cómo lo haríamos para que yo sepa lo que pasó en realidad? Básicamente, lo actualizó bien, pero luego se manejó nuestra llamada a la función seguir de nuevo. Entonces creo que no se debe quitar del siguiente estado, y todavía tenemos seguimiento, aunque hemos dejado de seguir al usuario Y esto ni siquiera está apareciendo porque acabamos seguirlos de nuevo. Vea sus siguientes. Este es su ¿qué pasa si dejo de seguir hace un momento? Dice que dejó de seguirse con éxito. Si lo acabo de refrescar aquí, vamos a comprobar que debería. Bien, entonces esto está bien que refresquemos y funcione, y si hago clic en seguir, hemos seguido con éxito. Estaba pensando que, si coincidimos, ver modelo punto está siguiendo. ¿Dónde se está configurando? Así es que lo siguiente se está recuperando comprobando si el usuario sigue, y donde todos estamos llamando al cheque si el usuario sigue Entonces lo estamos llamando aquí. Entonces esto es después de manejar seguir a los usuarios RN. Y esto también después de esto es RN. Entonces esto me parece bien porque esta función se actualiza es la siguiente, así que esto no debería estropearlo. Ahora mismo, deberíamos volver a tener una zona siguiente, otra vez una subcolección. Vamos a encargarnos de ello. De nuevo tenemos esto. Pero ahora si dejamos de seguir, debería decir que no, no debe afirmar que siguió con éxito al usuario Debí haber declarado que dejar de seguir con éxito al usuario. Entonces, bien, este es un error nuestro lado que hemos identificado. Solo veamos la vista general del perfil del usuario. Ahora se podía ver que tenemos el mango follow y el handle unfollow, y comprobamos si es siguiente es falso, entonces solo lo agregamos dentro de ahí También tenemos una llamada de PREPI para verificar si el usuario sigue, eso está bien Entonces lo que podemos hacer es que podamos imprimir el valor T. Entonces lo que podemos hacer es manejar el seguimiento. Sólo vamos dentro de esta función. Lo siento por eso. Podemos hacer el siguiente valor y podemos abrir esto y podemos escribir de la siguiente manera aquí, sí, que se define aquí. Para el valor de lowing. Entonces ahora, vamos a copiarlo aquí. Deberíamos tener una función más, manejar, seguir. Y lo que podemos hacer es que aquí, podemos agregarlo aquí. Así que vamos a imprimirlo después de completar mi funcionalidad. Y esto no es ningún intento esperar. Entonces eso está bien. Y solo estoy pensando que este autodidacta siguiente mapa, básicamente, este siguiente valor se está actualizando dentro del feto están siguiendo. Entonces creo que lo que tengo que hacer es que después volvamos a nuestro punto de vista. Y básicamente, después de seguir o seguir, tendríamos que llamar también a Fetch User following Así que maneje seguir, y podemos tener feto de seguimiento, y podemos pasar en el punto de usuario actual User ID. Vamos a darle así. Vamos dentro de FetserFollowing Y sí, esto se requiere, o de lo contrario estaba pensando que qué tal nosotros Lo que podemos hacer es que me preocupaba esta cola de despacho porque estamos esperando todo esto, pero esta cola de despacho está en el hilo principal, así que esto podría llevar algo de tiempo. No quería usar la comprobación si el usuario sigue dentro de esta función. Entonces por eso estaba evitando eso porque puede causar problemas de enhebrado Pero ahora que estoy pensando que necesitamos buscar uso de seguimiento cada vez que tengamos esta cosa, o podemos tener try wait, fetch uso de los siguientes datos Básicamente, y probar un peso fetch el uso de los siguientes datos realmente no hace nada Pero lo que podemos hacer es que podamos escribir autodidacta siguiendo es igual a siguiente, y tal vez nos pediría que necesitemos usar una cola de despacho aquí punto punto ACC. Y dentro de aquí, actualizaríamos este valor, y esto funciona bien. Entonces esto está ahí. Ahora lo que podemos hacer es que estamos usando esto. Where is fetchUserFollowing, fetch user following that Pero ahora estaba pensando que necesitamos hacer algo similar para buscar seguidores de usuarios Así que busca los datos de los seguidores del usuario. Podríamos hacer seguidores autodidactas iguales a seguidores. Entonces espero que eso lo actualice bien y podamos mantener estas funciones públicas quietas porque es necesario llamar dentro de la vista del perfil de usuario. Pero entonces estaba pensando que como es así, tenemos que hacer intentar esperar, buscar usuario siguiendo datos, y ahí podemos tener un usuario actual o ID de usuario Y como estamos haciendo Try wait, así que esta cosa en realidad esperaría su finalización cuando llame a esa comprobación si el usuario vuelve a seguir. Entonces esto está bien. Y dice que el resultado de la llamada no está utilizado. Eso está bien por nosotros. Lo que podemos hacer es que podamos copiar esta cosa. Podemos ir a manejar y seguir ahora, y aquí podemos hacer esto también. Suavemente esto debería funcionar y verificar si el usuario sigue cuando se está repitiendo, así que eso no es lo que se necesita Vamos a entrar, buscar usuario siguiente. Estamos utilizando la siguiente matriz y actualizándola. Entonces eso está bien, y nuestro usuario de verificación sigue usa eso. Entonces ojalá eso solucione el problema. Vamos a ver por nosotros mismos. Entonces espero que entendieras lo que estaba pasando. Básicamente, nuestro usuario check sigue utiliza la siguiente matriz, que es actualizada por esta función. Y ahora esta función no estaba siendo llamada de inmediato cuando realizamos una acción de seguimiento de seguimiento. Por eso estaba causando algunos problemas. Pero ahora lo que podemos hacer es que ya sea podemos verificar una cosa más, buscar los siguientes datos. Esto parece estar bien. Vamos a ver por nosotros mismos, ver sus siguientes. Bien, ahora mismo, incluso en nuestra base de datos, creo que tenemos tanto lo siguiente el seguidor se ha ido. Eso parece estar bien. Bien, entonces en los seguidores, nos hemos ido y los siguientes también nos hemos ido. Lo que haríamos es que rápidamente dejaremos de seguirlo. Entonces vamos a ver cómo resulta ser eso. Dice que dejó de seguir con éxito al usuario. Eso está bien. Si hago clic en seguir, por así decirlo siguió con éxito al usuario. Ahora rápidamente hago clic en Dejar de seguir también. Entonces dice que siguió con éxito al usuario, que de nuevo, no me parece tan correcto porque ¿por qué llamaría con éxito siguió al usuario cuando los estoy dejando de seguir. Entonces esta es una cosa en la que estaba pensando. Entonces ahora mismo, si solo entramos, si le doy un retraso de unos segundos, entonces creo que funciona de manera diferente. este momento, recibí tres mensajes impresos que siguieron con éxito al usuario, y no creo que así esté siguiendo al usuario. Bien, estoy siguiendo al usuario. Ahora sólo podemos dejar de seguir. Y sigue diciendo que siguió exitosamente al usuario, lo cual está mal, creo, porque debió haber dejado seguir al usuario, pero no, no lo hizo Entonces seguir sigue ahí, pero aun así me preguntaba si quiero seguir, así que esto es raro. Bien, me está dando que dejar de seguir pero ¿qué tal si hago clic en Dejar Debo decir que dejó de seguir con éxito al usuario. Entonces esto está ahí y no tenemos ningún seguimiento ya no tenemos ningún seguimiento porque sólo estamos siguiendo a una persona, y eso se quita. Entonces esto está bien. Pero ahora sigo pensando eso, por qué no se actualiza en tiempo real. Entonces, ¿qué podríamos hacer aquí, básicamente? Entonces, volviendo a nuestro código, creo que la funcionalidad transmitiendo aquí es que a pesar podríamos agregar una declaración de impresión que dice que el modelo de vista está siguiendo es en realidad si no es cierto, entonces seguimos. Entonces en realidad es falso, y podemos copiar esto y pegarlo aquí, en realidad es cierto. Entonces esta es una declaración impresa más. Así que vamos a comprobar por nosotros mismos, como lo que es el modelo de vista está siguiendo saliendo a ser. Entonces ahora mismo en un nuevo comienzo, no creo que así estemos siguiendo a esa persona. Entonces eso establece el terreno que, bien, tenemos un estado limpio con el que trabajar. Bien, sí, tenemos borrón y cuenta nueva. Ahora lo que podemos hacer es entrar dentro de nuestra app, podemos comprobar a nuestros seguidores, Gn está ahí, vamos a seguir, no hay nadie ahí. Lo que hacemos es ir a seguidores, vamos dentro ido. No estamos siguiendo a esta persona. Lo que podemos hacer es hacer clic en seguir. Lo que debe hacer es que afirma que el modelo de vista que está siguiendo es en realidad falso y siguió con éxito al usuario. Entonces esto funciona bien. Afirma puertas realmente falsas, y estoy llamando a siguiente funcionalidad. Hago clic en dejar de seguir, sigo declarando ver modelo que esta siguiendo es en realidad falso, lo que significa que yo siguiendo la funcionalidad no esta funcionando Entonces hay una cosa más que puedo hacer es que podría comprobar ese punto viewmdel siguiente Contiene Y esto contiene habría solo digamos, vamos a entrar aquí. Y comprobar que el usuario sigue tenía ese mismo código. Entonces dice que contiene algo como esto. Bien, la sintaxis es sólo la correcta. Lo que podemos hacer es que podamos verificar esa base de datos usuario punto usuario. Bien. Entonces, si modelas el seguimiento de punto no contiene el usuario de la base de datos, en realidad intentaría seguir y si contiene, dejaría de seguir básicamente Y vamos a ver ese mango seguir en todo lo que hace. Handle follow no solo hace el seguimiento del mango, sino que también busca el uso de los siguientes datos Entonces eso está bien por nosotros. Podemos agregar una declaración impresa aquí también que se está actualizando el siguiente AA. Entonces podría decirnos que cuando se está actualizando y cuando se está actualizando Norte y bien, esto es seguir, seguir, y esto es seguidores. Seguidores AR se está actualizando. Esto no era realmente necesario, pero vamos a por ello. Para que sepamos que nuestro valor um, booleano estaba fastidiando Creo que esta sería una mejor comprobación para saber si esta cosa funciona bien o no. Ahora tenemos a nuestro usuario. Podríamos ir a nuestro siguiente. Todavía tenemos este usuario. Lo que haríamos es que tengamos la funcionalidad de dejar de seguir, que parece estar bien Y lo que estaba pensando es que deberíamos comprobar si contiene, entonces deberíamos decir dejar de seguir, de lo contrario seguir Así que vamos a ir aquí y rápidamente comprobaremos esto. Así que mira tus siguientes. Esta persona está ahí. Todavía tenemos el botón de dejar de seguir. Entonces ese cheque de alguna manera está funcionando. Hacemos clic en Dejar de seguir y esta etapa dejó de seguirse con éxito. Esto está bien. Tarda unos segundos. Eso está bien. Finalmente agregaremos aquí un cargador o algo así para que funcione bien. Hacemos clic en seguir y seguimos con éxito al usuario. Bien, esto está bien. Volvemos a hacer clic, dejar de seguir, y lentamente se actualiza y dejó de seguir con éxito Entonces esto es mejor que nuestro anterior es siguiente valor porque eso no estaba siendo realmente actualizado. Entonces eso es una cosa. Podemos ir aquí y verificar por nosotros mismos dónde se está actualizando todo. Entonces siento que se estaba actualizando, pero como es una cola de despacho, estaba tardando unos segundos en completarse, y es por eso que estaba causando algunos problemas Entonces esto está ahí, y bien, esto funciona bien. Así que podíamos mantener esta funcionalidad por ahora, y acabamos de resolver un error. Ahora mismo, puede parecer un poco complicado. Obviamente, hay formas de simplificar todo esto. Pero por ahora, creo que me parece bien. Es decir, hemos agregado alguna funcionalidad. Entonces esto está ahí, eso está ahí. Esto me parece bien. Entonces resolvemos este error. Y ahora podemos simplemente finalmente continuar con la adición, ya sabes, podemos continuar con la adición nuestra biblioteca King fisher que podamos usarla para carga de imágenes porque en este momento es súper lenta. Se podía ver todavía se está cargando, así que está tomando bastante tiempo cargar las cosas, lo cual no está inactivo. Entonces sí, vamos a ir a arreglar eso. Y luego podemos pasar a la alimentación casera y luego , qué más podríamos hacer. Entonces tenemos el feed casero y luego podemos pasar a las compras inapp también en breve Entonces sí, espero ver en el siguiente video. 28. Agregar Kingfisher a nuestro proyecto: En la Biblioteca King Fisher, en realidad usaríamos Swift Package Manager. Para que eso se pueda configurar desde aquí. Pero antes que nada, busquemos King Fisher, Swift Library. Y creo que el primer eslabón es este mismo. Cuando somos un martín pescador, podemos ir aquí, podemos copiar el enlace de Github, y luego podemos ir aquí Podemos hacer agregar dependencias de paquetes. Podemos pagar dependencia estrella aquí. Afirma que es Kingfisher. Podemos seleccionar hasta la siguiente versión principal que esté bien. Vamos a agregar paquete. Simplemente va a buscar rápidamente el paquete. Así que esperemos a que se recupere, y luego habría algunas cosas que necesitaríamos configurar Básicamente, tendríamos que eliminar la imagen Async donde sea que se esté usando con Kingfisher, y afortunadamente, tiene un tipo de estructura similar a la de la imagen Async Entonces estos son los paquetes Solo vamos al archivo principal de la app, así que debería estar dentro del core y dentro de aquí en la pila de navegación, básicamente lo que podemos hacer es que podamos agregar un on appear, y llamaremos a esta función. Así que vamos a importar aquí al Rey pescador, esto está ahí. Ahora lo que podemos hacer es que podemos escribir Caché de imágenes. Así que la caché de imágenes es en realidad la biblioteca Kingfisher, y Kingfisher tiene esta cosa de autocase pasando Entonces lo que estamos haciendo es que estamos estableciendo algún límite a la caché que pueda ordenar. Así que realmente no queremos que el tamaño de la aplicación aumente solo porque está almacenando el caché cada vez que tenemos algún tipo de foto nueva cargada en la aplicación, así que eso es lo que hicimos. Hemos agregado un límite de uno, y creo que significa de uno descuentos hasta el valor del costo en efectivo. Si la adición de este objeto hace que el costo total en efectivo se eleve por encima del límite de costo total, el caso puede desalojar objetos automáticamente Entonces esto está bien. Yo creo que este valor lo vi desbordamiento de pila, y creo que ted, quiero decir, se recomienda, así que eso es lo que vamos a por aquí. Vamos a las sub vistas. Vamos a entrar aquí. Importaremos vamos a importar Kingfisher aquí también. Esto está ahí. Ahora lo que podemos hacer es que podamos hacer pocos cambios. Entonces, en lugar de simplemente pasar la imagen de héroe, podríamos hacer algo como una URL de imagen de héroe o tal vez dejarme ver cuál es la funcionalidad actual para la celda de vista posterior. Básicamente, debería tener la imagen ASN en alguna parte, creo Sí, esto está ahí. Ahora podemos ver que ahí está la cápsula de la fuente. Bien. Solo busquemos una imagen sincronizada, y no puedo verla por ningún lado. Esto es raro. Pensé que una primera página de post self tenía algún tipo de Bien, así que esto es tomar directamente una imagen en este momento que no necesitamos. Entonces podemos hacer URL de imagen, y esta sería del tipo URL. Eso está bien. Lo que haríamos ahora es que ya no tenemos esto, por lo que podemos agregar una imagen KF, y esto tomaría en URL, que sería la URL de la imagen Esto está bien. Entonces podemos tener algún tipo de marcador de posición aquí, y el marcador de posición tendría que podemos eliminar Realmente no necesitamos esto. tener una visión de progreso, básicamente, entonces la vista de progreso es esta, entonces podemos darle algunos marcos. Entonces el ancho sería como 72 píxeles, y el alto sería como 72 píxeles. Entonces podemos tener algún radio de esquina de, como, dos, y luego podemos tener algún fondo que sería color con UI color punto Game Green. Entonces esto me parece bien. Ahora lo que podemos hacer es que podamos agregar la propiedad redimensionable aquí, y luego podemos agregar la relación de aspecto, que sería content mode fill Entonces podremos volver a tener frame, y este frame sería el mismo que este frame. Así que vamos a copiar y pegar esta cosa aquí. Entonces podremos volver a tener algún radio de esquina, también, y finalmente añadiríamos algo de relleno. Y ya no requerimos de esta imagen de héroe, así que solo podemos eliminarla. Entonces esto está ahí. Creo que mini caption sigue siendo el mismo. No lo creo, necesitamos hacer ningún cambio. La fuente está ahí, el marco está ahí, tamaño fijo obviamente sería así. Entonces sí, esto está bien. Ahora, vamos a entrar en nuestra vista de publicación Y aquí en realidad lo estamos usando en múltiples lugares múltiples. Entonces aquí es donde necesitamos hacer algunos cambios. Básicamente, si solo vas dentro de nuestro héroe Image URL, y aquí está diciendo que si HeroImage URL es URL post dot imGurl abriría imagen asincrónica, pero no, ya no la necesitamos, así podemos tener Básicamente la imagen de KF, y imagen de KF tomarán en la URL de la imagen del héroe Y de manera similar, como hicimos para lo anterior. Básicamente, necesitamos agregar un marcador de posición. Podemos abrir esto así. Solo eliminemos Sync image por ahora porque nos está causando problemas y no tenemos peces se exportan. Entonces este es su marcador de posición, tendríamos una vista de progreso Entonces agreguemos rápidamente la vista de progreso, y la vista de progreso tendría un marco, básicamente, y el marco sería ancho 200 y alto, 200, esto está bien. Entonces podemos tener alguna forma de clip, y la forma de clip sería de un rectángulo redondeado con un radio de esquina, que daríamos diez. Esto está bien. Entonces podemos tener algunos antecedentes. El fondo tendría un color con el color de la interfaz de usuario, y esto debería ser juego así que esto está ahí me parece bien. Carguemos el archivo de disco sincrónicamente, que significa que es si la carga de almacenamiento en disco debería estar ocurriendo en la misma cola de llamadas Creo que esto es óptimo para cargar imágenes, así que eso es lo que estoy haciendo. Duración del ajuste, vamos a establecerlo en 0.25, nos da algo de animación mientras se está cargando y luego tiene una relación de aspecto, que de nuevo sería fill, no fit, sino fill. Entonces esto está ahí. ¿Qué más necesitamos? Necesitamos otro marco, básicamente, y este marco volvería a tener, um podemos simplemente copiar esta cosa. Entonces eso fue para marcador de posición, y esto es para nuestra primera página de nuestra celda de vista de clip Así que publicar primera vista de página quiero decir, y luego tenemos un rectángulo redondeado con un radio de esquina de diez píxeles. Entonces esto está ahí, y acabamos configurar nuestra primera imagen, que es la imagen de héroe. Lo que podemos hacer ahora es que tengamos esta cosa, y en lugar de esto, podemos tener nuestra vista de primera página de post. Y ahí podemos tener post punto topname. En el presupuesto, podemos tener pose dot budget. En la minigaption, podemos tener pose dot best cafe caption, best cafe caption, y en la URL de la imagen, podemos simplemente pasar en la URL de la imagen hero Entonces esto está bien. Podemos cortar esto y página este aquí. Y así tenemos nuestras dos principales, uh, imágenes, básicamente, la primera página y luego la segunda que muestra la vista independiente. Entonces esto me parece muy bien. Vamos a repasar rápidamente esto. Bien, esto parece estar bien. ¿Qué sigue a hacer? O sea, no necesitamos cambiar nada con esta pila vertical que tiene el nombre del lugar y todo. Entonces creo que esta es la presupuestal. Entonces tenemos la sección de calificación, que es, de nuevo, no se requiere que se cambie, pero luego tenemos la mejor URL de café y todo. Así que vamos a desplegarlo para que sea más fácil para nosotros. Así que solo dobla éste, también. Lo que podemos hacer es que podamos copiar, pegar todo esto. Podemos entrar aquí. Y en lugar de imagen asíncrona, podemos eliminar esta y agregar nuestra imagen KF Y esta vez tendría mejor URL de imagen de café. Entonces esto está ahí. Vamos a copiar todo esto otra vez. Y vamos a eliminar lo de la imagen asíncrona. Vamos a pegarlo aquí. Imagen Best Say. Pasémoslo aquí. Esto está ahí, así que ahora esto me parece bien. Así que lo tenemos mejor imagen Stay. URL también está hecho, y tenemos Tamas sección cosa aterradora Todo esto me parece bien. Um, esto ya se agregó, así que esto parece estar bien. Vamos a entrar, perfil de usuario, vista de perfil. Entonces la vista del perfil del usuario necesitaría un poco de cambio, básicamente, imagen de perfil está ahí, y dentro de aquí, en lugar de todo esto, podemos agregar, no esto. Vamos a subir y sumar una importación, que sería King Fisher. Entonces una vez que se agrega esto, podríamos simplemente verificar la imagen de KF Kfimage tomará una URL, que sería URL de imagen de perfil Eso parece estar bien. ¿Y qué más tenemos que hacer? Estamos comprobando la URL de la imagen. Estamos pasando la URL de la imagen de perfil. Esto me parece bien. Entonces podemos agregar un marcador de posición, básicamente, el marcador de posición nuevamente tendría algún frame o todo Entonces podemos simplemente cortar esta cosa, pegarla aquí, quitar esto aquí. Entonces tenemos un marco de progreso, forma de clip y fondo. Esto me parece bien. Ahora podemos añadir de nuevo ese archivo de disco de carga sincrónicamente. Entonces podemos agregar un fade con duración de 0.25 segundos. Podemos tener propiedad redimensionable agregada. Entonces podemos tener algún relleno de punto de relación de aspecto, entonces podemos tener marco que sería con 90 altura 90 aquí mismo, y luego podemos tener forma de clip que sería círculo, básicamente. Entonces sí, esto está ahí, y tuvimos una condición se. Así que vamos a comprobar si la otra condición. Entonces la otra condición en realidad seguiría siendo la misma. Entonces esto está ahí, y no lo creo. ¿Tenemos alguna propiedad de imagen asíncrona en algún lugar que quede? Bien, esto está ahí. Lo que podemos hacer es que podamos copye todo esto Ve aquí y vamos a ver qué está pasando aquí. Sólo podemos agregarlo aquí. Podemos hacer la importación a King Fisher. Esa es la URL de la imagen de perfil necesita ser así. 1990 y todo parece estar bien. Podemos eliminar nuestra imagen asincrónica de aquí. Esto no. ¿Y qué más? Entonces tenemos el KFImage aquí. Tenemos la vista general del perfil de usuario, así que vamos a copiar esta cosa. Vamos a entrar en una vista general de perfil de usuario. De nuevo, creo que tiene la misma funcionalidad. Así que solo podemos hacer esto. Podemos agregar importación King Fisher. Entonces esto está bien. Ahora lo que podemos hacer es que podamos eliminar de aquí también la imagen ASN Entonces no lo creo así ya no tenemos AcnCimage en ningún Vamos a intentar ejecutar una app y ver que si ha hecho alguna diferencia o no. Así que vamos a encargarnos de ello. Y en los próximos videos, realidad vamos a hacer algunas mejoras importantes antes de seguir adelante. Entonces básicamente, ahora mismo, estamos comprobando todas las llamadas APA a través de declaraciones impresas, eso no me parece muy bien. Entonces lo que estaba pensando es que podemos tener cajas de alerta personalizadas. Y para eso, vamos a usar UIKit, así que sería una buena experiencia de aprendizaje para ustedes, también Entonces, en realidad, UIKit sigue siendo muy relevante en muchos lugares, bases de código Será bueno si tienes algún conocimiento a su alrededor. Por si ya lo haces, eso es realmente bueno. Entonces solo estamos haciendo una caja de alerta personalizada, básicamente. Así que siento que el post en realidad fue bastante rápido. Lo. Esto me parece bien. Siento que es ir a buscar la publicación en realidad más rápido que la imagen Async, y eso es lo que necesitaba Entonces, básicamente, sigamos a buscar. Estas imágenes también son grandes. Estas son como, imágenes de cinco, seis MB, así que esto lleva algún tipo de tiempo, algunas de ellas, tal vez diez o 20 MB. No sé de eso. Solo vamos a la página Explorar. Se está cargando. Bien, entonces se cargó rápido. Y el caso es que lo reutiliza. Entonces eso es lo mejor. Si se almacena en caché, realidad no vuelve a usar eso. Entonces eso es lo mejor. ¿Ves? Entonces se carga bastante rápido, y luego tenemos otra llamada API que se está haciendo. Entonces, básicamente, todo esto está almacenado en la memoria caché. Así que ya no recargues cada vez que estés desplazándote una y otra vez Entonces esta fue una de las cosas. Ve a tus seguidores, supongo que debemos estar teniendo Sí. Entonces ya ves lo rápido que carga todo. Entonces esto es muy útil. Tenemos DMH se almacena, y aquí está cargando Entonces siento que es mucho mejor que tener, ya sabes, el siento que no está mostrando la leyenda. Se suponía que iba a mostrar el pie de foto, ¿verdad? Entonces esto parece un poco apagado. Podríamos comprobarlo una vez. O sea, pensé que debería mostrar el pie de foto, pero no creo que así lo esté mostrando más, lo cual parece raro. Entonces sí, debería tener el pie de foto. Así que vamos a ir a nuestro Uh, no esto, Comando Shift O, post, ver vender. Y aquí dentro de esto, básicamente, creo que necesitaríamos una pila Z, y la pila Z estaría teniendo la imagen KF, obviamente Pero luego después de eso, tendría un texto, que sería, post punto BEST stay caption esto sería fuente, sapo personalizado, fuentes todd agrupadas, y el tamaño sería como diez píxeles, digamos, y vamos a darle un color de primer plano Entonces esto está ahí. Creo que necesitamos algo similar dentro del café también. Entonces hagámoslo. Agreguemos pila Z. Abre esto, en un espaciador aquí. Hagamos esto otra vez. Esto tendría las mejores opciones de café. Entonces esto está ahí. Volvamos a copiar todo esto . Vamos a subir. Nosotros sí tenemos esto listo. Entonces vamos a tener una pila Z, abre esto, agrégalo aquí. Ya no necesitamos esto. Podemos cortar. Podemos pegarlo aquí. Podemos decir, topónimo. Entonces esto está ahí. Ahora bien, si estás en la app, deberíamos ver estos um, subtítulos encima de la imagen, que es lo que pretendíamos hacer en la primera etapa Así que vamos a comprobarlo, y ojalá se construya bien. Que construyen bastante rápido. La carga de la imagen está perfectamente bien. Ahora está usando el mecanismo de almacenamiento en caché, por lo que es aún más rápido Entonces esta es la mejor parte de usar y puedes ver la leyenda también, es realmente bonita como esta pelota, me parece bien. Esto es genial. Todavía tenemos pendiente la vista del feed casero, pero entonces de nuevo, necesitamos hacer los cambios de cosa de alerta. Entonces eso se requiere. Así que en breve haremos esos cambios. Añadiremos un controlador de vista de alertas personalizado. Entonces agregaríamos todo tipo de alertas que podamos tener todos los mensajes de alerta. Entonces eso es lo que vamos a retomar en el siguiente video. Entonces espero ver en el siguiente video. Y nuevamente, si tienes alguna duda, no dudes en preguntar al respecto. Gracias por ver esto, y espero que te estés divirtiendo con este curso. Adiós. 29. Creación de UIViewController personalizado para alertas: Para trabajar con nuestras alertas personalizadas y todo, he agregado tres nuevos archivos a un proyecto, y les proporcionaría recursos del proyecto aquí. Entonces básicamente, uno de ellos es overlay, que es un cargador de superposición, básicamente, que mostraríamos a los usuarios mientras se realiza una llamada EPI Luego están los hápticos, que es básicamente debes tener aviso mientras usas el software de Apple también Los hápticos te dan esta retroalimentación cada vez que tocas un botón o hay un caso de éxito o fracaso, y ahí está lo del brindis, que internamente está siendo utilizado por overlay Entonces estas cosas están ahí, y ahora lo que podemos hacer es que podamos entrar dentro de nuestra carpeta personalizada, clic en Comando y elegir un archivo Swift y nombrar este controlador de vista de alerta personalizado. Entonces este sería nuestro controlador de interfaz de usuario. Así que vamos a ir a crearlo. Creamos un controlador de vista personalizado de clase, lo conformamos al controlador de interfaz de usuario. Abrimos esto. Ahora dentro de UIKit, en primer lugar, necesitamos definir qué elementos vamos a usar, y luego tenemos que definir cómo los diseñamos Entonces es un poco diferente de Swift UI. Obviamente, tiene mucho más código con el que trabajar, pero luego tiene su propia utilidad. Así que comencemos creando algunos lasiir um privados, objetos Entonces, básicamente, sería una vista de contenedor, que se ajustaría a la vista de interfaz de usuario de tipo. Vamos a abrir esto, y esto sería como una función en realidad. Así que podríamos hacer algo como esto, y dejar que la vista sea igual a la vista de la interfaz de usuario. Inicialicemos la clase. Entonces podemos tener vista capa de puntos, y luego podemos darle algún radio de esquina, que sería como 16 píxeles. Entonces podemos tener vista ancho de borde de punto, que podemos tener píxeles, luego podemos darle algún color de borde también. Así que haríamos punto capa punto borde color. Eso sería igual al color de la interfaz de usuario, punto blanco punto color CG. Así que en realidad toma un argumento de color CG. Entonces estamos haciendo eso. Solo volvamos nuestra opinión para que deje de arrojarnos este error. Y ahora tenemos que hacer este paso muy importante, que es traducir la máscara de autorización en restricciones porque aquí no estamos usando story boards Lo estamos haciendo programáticamente, así que es por eso que necesitamos hacerlo para el color de fondo Vamos a darle un poco de color de fondo del sistema. Entonces, sobre la base del modo oscuro o claro, esto cambiaría para arriba. Ahora lo que podemos hacer es que podamos copiar esta cosa o tal vez simplemente crear una más porque copiar en realidad no va a ser una buena idea, así que podríamos hacer etiqueta de título. Entonces, la etiqueta del título se ajustaría a la etiqueta de la interfaz de usuario, y abramos esto. Básicamente, vamos a abrir la función hacia arriba, y ahora podemos hacer let label equals UI label, abrir el paréntesis, devolver esta instancia de etiqueta, que deje de lanzar s. entonces debe haber etiquetas para el título Entonces para eso, deberíamos hacer alineación de texto, eso sería centro. Entonces lo que podemos hacer es que le podamos agregar alguna fuente. Por lo tanto, la fuente de punto de etiqueta debe ser igual a la fuente UI, punto, fuente del sistema. Bien. Entonces podemos tener de tamaño 20 pixeles, y luego podemos tener algo de peso aquí, así que el peso debería ser como semi negrita. Y entonces lo que podemos hacer es que podamos usar color del texto de punto etiquetado con etiqueta de punto etiquetado, básicamente, y el color del texto sería etiqueta de punto, que es un color de texto que contiene contenido primario. Entonces este es un tono gris predefinido dentro de SwifTui, así que eso es lo que vamos Podemos agregar esta propiedad ajustar el tamaño de fuente para que quepa con, lo que debería ser cierto. Entonces lo que podemos hacer es que podamos agregar factor de escala mínimo de punto etiquetado, que se establece en 0.9, así que eso nos ayudaría a no encogerlo demasiado. Entonces podemos haber etiquetado el modo de salto de línea de puntos, y esto debería ser truncando la cola, básicamente Entonces, si en caso de que el mensaje sea demasiado largo, etiquete el punto, traduzca la máscara de redimensionamiento automático. Cae, y luego nuestra etiqueta está completa. Ahora lo que haríamos es que crearíamos una etiqueta de mensaje WOW privada, etiqueta de mensaje, que nuevamente sería del tipo etiqueta UI. Entonces podemos simplemente copiar todo esto, pegarlo aquí, llamar a esta etiqueta de un mensaje. Ahora bien, esta vez también es una etiqueta de interfaz de usuario, pero luego deberíamos tener algo de alineación de texto a la izquierda. Entonces lo que podemos hacer es que por el color, podamos tener etiqueta secundaria porque es el mensaje. Entonces tenemos el preferido podemos tener fuente del sistema o podemos tener fuente preferida cuerpo punto. Entonces esto es a lo que se lo estamos dando aquí. Entonces podemos hacer label tot, ajustar la categoría de tamaño de fuente a true Entonces esto está ahí. Ahora podemos tener tamaño de fuente a ancho. Eso está bien. Tenemos el color del texto presentado. Tenemos el factor de escala mínimo a 0.75. Entonces tenemos el modo de salto de línea por ajuste de palabras porque no queremos truncar la cola Sería mejor si solo envolviéramos todo el asunto dentro de la caja de alerta. Entonces eso es lo que vamos a buscar aquí. Ahora lo que podemos hacer es que podamos crear otro botón de acción. Entonces guerra perezosa privada, llamaríamos a este botón de acción. Vamos a nombrar rápidamente este botón de acción. Sería botón UI. Entonces podemos abrir esto. Esto lo podemos hacer. Ahora vamos a dejar botón es igual al botón UI, y este botón UI tendría un tipo, y este tipo sería sistema. Entonces esto está ahí. Entonces podemos agregar alguna configuración al botón. Entonces básicamente, quiero que el botón tenga este estilo tintado Entonces para eso, usaremos botón UI, configuración de punto, punto tintado. Entonces eso le daría un estilo tintado, para que podamos tener configuración Estilo de esquina de punto también. Vamos a mantenerlo medio, y entonces podemos o tenemos algo más como, ¿tenemos cápsula? ¿Vamos por cápsula? Entonces podemos tener configuración, punto, color de fondo base, o el color de fondo base, podemos seleccionar el color del botón, que es, de nuevo, alguna propiedad agregamos un controlador de vista o solo estoy pensando eso. Bien, así podemos agregar tres variables aquí, básicamente. Primero sería el título de alerta, que sería opcional tipo string. Esto está ahí, entonces podemos entonces podemos tener el mensaje, que nuevamente sería del tipo string opcional. Entonces podemos tener un título de botón. Que otra vez sería del tipo opción string, y podemos tener el color del botón. Por qué le estoy dando un color de botón personalizado es la razón porque a veces lo mostrábamos para el éxito y a veces lo mostrábamos para casos de fracaso. Entonces en ese caso, tenemos que pasar en amarillo y todo. Así que ahora solo podemos pasar de manera segura nuestro color de botón aquí. Esto funcionaría. Entonces agreguemos la configuración a la base para el color de fondo. Y para eso, podemos agregar color de botón. Si solo lo haces, es algo simple solo, como, Bien, tiene su propia forma de escribir. Aunque las cosas son bastante autoexplicativas que estás definiendo la configuración del botón, solo la configuras. Entonces eso es bastante sencillo, diría yo. Vamos a tener un título bien para un botón, y el estado de control debe ser normal, y lo final es botón o traducir al cambiar el tamaño de la máscara a falso. Ahora lo que podemos hacer es que podemos devolver el botón aquí. Y si, esto parece estar bien. Lo que podemos hacer es que también podamos agregar alguna constante de relleno. Se requeriría relleno dentro de nuestra caja t. Así que vamos a flotar CG y agreguemos 20. Esto es lo que he hecho hasta ahora. Básicamente, para poder utilizar algunos elementos dentro de nuestro controlador UI, tenemos que encontrar cuatro propiedades. Una es la vista del contenedor. Luego está la etiqueta del título, la etiqueta del mensaje, el botón de acción y algunas propiedades que tomamos del usuario. O sea, nosotros, básicamente, pasaremos por diferentes en diferentes lugares. Así que vamos a hacer una en ella. Y esto fue un auto completo. Así que realmente genial, podemos hacer Superdt en él, y podemos tener esto como Nill y el paquete como Nill Y sí lo que podemos hacer es que no podemos darle un valor por defecto, más bien habríamos obligado nuestra entrada a darnos algunos valores para pegarlos. Entonces sí, esto está ahí. Dice que necesitamos un inicializador requerido. Entonces agreguemos lo requerido en él, y el requerido en él realmente necesitaría un codificador NS Y para eso, podemos simplemente pasar en un error fatal, aunque sabemos que no estamos usando ningún story board ni nada, por lo que no va a causar un problema. Podemos decir, el código Nate Código no se ha implementado. Este caso sólo ocurrirá en caso de que estemos inicializando desde un story board y lo hayamos trazado de manera programática Por lo que completamente no se requiere para nosotros, carga vista también es una función predefinida aquí. Entonces lo que podemos hacer es que podamos escribir super punto visto carga. Eso es lo primero que tenemos que hacer. Podemos establecer algún color de fondo para nuestra vista. Entonces eso es lo que vamos a hacer aquí, punto UIColor. Componente Alpha de punto negro, que sería como 0.75, eso parece estar bien. Ahora lo que podemos hacer es escribir una función para configurar UI, y podemos llamar a esa función desde aquí. Así que vamos a escribir configure UI. Podemos llamar a esta función desde aquí. Así que vamos a pegarlo aquí. Eso parece estar bien. Ahora lo que podemos hacer es que podamos configurar cada elemento por separado. Entonces esto es lo que vamos a hacer. Así que ahora solo comencemos configurando el contenedor configure. Y para el contenedor, hagamos el capital C y podamos cerrar casos de patrón, y esto está ahí. Ahora, lo primero que hay que hacer es agregarlo a la sub vista. Por lo tanto, la vista de contenedor se agrega a la vista secundaria. Ahora abrimos esta restricción de diseño NS, básicamente, y luego hacemos clic en Activar para que podamos agregar múltiples matrices de restricciones. Las cepas son simplemente las cosas que permiten que los íconos permanezcan en su lugar, los objetos, los elementos, no solo los iconos. Entonces eso es lo que vamos a hacer aquí. Creo que se requieren un mínimo de cuatro restricciones para poder trabajar con UIkD Así que comencemos usando el ancla Y. Después lo limitamos a ver punto centro Y ancla. Entonces básicamente, lo estamos limitando al centro. Ahora vamos a hacer contener una vista, punto centro, ancla, punto de restricción, y vamos a centrarlo De nuevo, para ver punto centro x ancla porque es el contenedor principal, por lo que necesitamos mantenerlo centrado con la vista Ahora le damos a la vista del contenedor algo de ancho. Entonces debería tener alguna restricción, y esto debería ser igual a constante. Vamos a darle un valor constante de 200 en lugar de definir cómo va a ser su relación con sus vistas adyacentes. Y ahora podemos hacer anclaje de altura, esa restricción, e igual a restricción debería ser 220. Estaba pensando que debería hacer un video sobre el trabajo con las TIC, también. Así que en realidad investigaría eso y maquillaría porque eso te ayudaría a entender mejor las cosas. Aquí voy un poco rápido porque es solo una vista alertada Entonces por eso solo quería mostrarte cómo podríamos usar todo el asunto. Lo que podemos hacer es simplemente copiar todo esto. Ahora llamamos a esta etiqueta de título, y luego necesitamos agregar dentro de la etiqueta de título, y la agregaríamos dentro nuestra vista de contenedor en lugar de la vista. Entonces esto está ahí. Podemos agregar título etiqueta punto texto es igual al título de alerta, y si está vacío, podemos y algo salió mal. Así que ojalá nunca esté vacío. Nos pondríamos a conocer. Ahora lo que tenemos que hacer es que necesitamos usar etiqueta de título, y necesitamos hacer restricción de punto de anclaje superior, que es igual a contener un punto de vista ancla superior, y le damos alguna constante con el relleno que teníamos predefinido. Entonces esto está ahí. Simplemente podemos eliminar esto. Ahora lo que podemos hacer es que tengamos la configuración de anclaje superior. Ahora podemos hacer anclaje principal, anclaje principal restringido, anclaje delantero vista contenedor, y luego otra vez algo de relleno. Entonces podemos tener el anclaje final, y debería estar alineado con el ancla final. Básicamente, el líder es del lado izquierdo, barandilla es el lado derecho, parte superior es la parte superior y la parte inferior vuelve a ser lo mismo Ahora podemos darle una restricción final, que sería el anclaje de altura, y podemos tener alguna restricción, igual a constante, que sería como 20 píxeles. Ya no necesitamos todo esto, así podemos eliminarlo. hemos configurado nuestra etiqueta de título y notamos cómo la llamo después de llamar También hemos configurado nuestra etiqueta de título y notamos cómo la llamo después de llamar a la vista de contenedor. No es porque lo haya escrito después, sino porque estamos agregando la vista contenedor a la vista en esta función. Entonces esto necesita ser llamado para que esto funcione o de lo contrario, nos tiraría un choque. Así que idealmente no queremos eso, así que ahí está. Ahora podemos agregar una función para configurar el botón de Acción. Entonces eso es lo que vamos a hacer aquí ahora. Ahora contendríamos aview punto ad subview, y tomaría en el botón de acción, y luego el botón de acción tendría pocas cosas volviéndose a sí mismo, así que set title sería en realidad un título de botón contrario, mantengámoslo vacío o mantengámoslo bien, y el estado de control volvería a ser normal. Es que ya estamos configurando el título dentro del botón, pero luego estamos usando el texto del título buttle volver a configurarlo cuando estamos configurando la UI Estamos siendo cautelosos al agregar la funcionalidad. Y ahora ves que le das la función at Target en realidad proporciona al botón la funcionalidad que llamaría cuando se presiona este botón. Para poder trabajar con eso, en realidad necesitamos agregar una función C objetiva, sería en pequeño caso objetivo C, debería decir funk, descartar, y es este Esto está ahí. Ahora podemos abrir esto. Podemos agregar despedir propiedad. Debería ser cierto. Y ahora lo que podemos hacer es que si simplemente vamos arriba dentro del botón, necesitamos agregar el objetivo dos celdas. Entonces cuando se toca el botón, entonces agregamos un selector Que toma en un método C objetivo y podemos pasar en nuestro descarte y el descarte está ahí ¿Necesitamos llamar paréntesis? No lo creo así no necesitamos. Entonces esto está ahí. Ahora podemos hacer en qué estado lo llamaría. Así que eso sería retocar por dentro. Entonces esto está ahí, y es restricción de diseño activar, luego toma A. Entramos aquí, agregamos botón de acción , ancla inferior, sería al final de la pantalla. Quiero decir, toda la alerta. Entonces hagámoslo igual a, y debería tener vista contenedor punto ancla inferior, y la constante debe ser relleno de nuevo. Vamos a copiar esta cosa cuatro veces, así que una, dos, tres, cuatro. Ahora habríamos de anclaje principal y el ancla principal sería vista contenedor, punto anclaje principal, y la constante vuelve a ser relleno. Ahí está el ancla de arrastre. Solo volvamos. Vamos a agregar de trailing. Ancla. Y luego tenemos que agregar el anclaje final aquí también con otra vez, algo de relleno, y luego finalmente podemos darle algún ancla de altura Entonces podemos agregar algunas comas aquí, lo que lo haría funcionar. Entonces, básicamente, esto está ahí. Tenemos el anclaje de altura, y luego tenemos una restricción que sería igual a constante. Y en vez de todo esto, podemos eliminar esto. daríamos a nuestro botón algo de altura, así que eso podría ser de 50 pixeles. Sólo podemos añadir una coma más aquí, así que creo que esto podría ser usado Vamos a llamarlo solo Miss VC para que pueda funcionar bien y lo más probable es que este error vaya y dice que la vista de contenedor no es opcional. Obviamente, no es opcional. Entonces esto está ahí. Vamos a sacarlo de aquí. Que hemos agregado esto también, vamos a llamarlo dentro nuestra función configure UI. Esto está hecho. Lo que haríamos ahora es que escribiéramos la funcionalidad final para las etiquetas corporales. Entonces hagamos funk. Podemos simplemente usar la etiqueta de título aquí. Entonces llamaremos a esta etiqueta corporal de configurar. Ahora lo que haríamos es que añadiríamos aquí la etiqueta del mensaje e incapaces de completar. Escribamos un respaldo incapaz completar la solicitud. Esto parece estar bien. Necesitamos mensaje aquí. En lugar de título de alerta, esto está ahí. Necesitamos tener texto de punto de etiqueta de mensaje, luego necesitamos tener etiqueta de mensaje, etiqueta mensaje, etiqueta de mensaje , una y otra vez. Entonces debería estar encuadernado a la etiqueta del título y no a la vista del contenedor. Entonces esto está ahí. La constante debería ser como ocho píxeles, no mucho del ancla superior. Y básicamente, debería estar alineado. Entonces desde la parte inferior de nuestro título, ocho píxeles por debajo de la parte superior de etiqueta de nuestro mensaje comienza y luego tenemos el ancla inferior que debería estar por encima del botón de acción, entonces botón de acción, ancla superior y la constante serían como menos ocho o algo así, entonces debería estar arriba, entonces tenemos el ancla principal y el ancla principal tendríamos algunos contenedor vista ancla principal y la constante puede ser relleno entonces podemos tener un anclaje final también. Y esto sería un ancla de arrastre. El anclaje final sería contenedor visto o anclaje final con un relleno, y esto debería ser menos padding, en realidad. Así que vamos a ver eso si me he perdido esa cosa menos en otra parte también. Entonces en la parte inferior, en realidad necesitas menos y también para ese trailing, necesitas menos. Así que asegúrate de hacer eso. Entonces también aquí en la etiqueta de título configurada, esta cosa con ese ancla final debería ser menos funciona de manera similar como izquierda es positiva y este lado final se denomina negativo Y cuando estás poniendo términos y te gusta, entonces esto está ahí. Ahora solo te voy a ejecutar rápidamente a través de toda la funcionalidad. Básicamente, acabamos de crear una clase, que se llama Alert View Controller personalizado. Es del controlador tipo UIV. Ahora en kit de interfaz de usuario, a diferencia de Swift UI, si tienes que diseñar algunas vistas, primero las defines. Entonces eso es lo que hemos hecho a través uso de propiedades laziar privadas Y ahora, como es una clase y ya no es una estructura, si definimos algunas propiedades y no les damos ningún valor, necesitamos un inicializador Y para que los inicializadores funcionen en el kit de interfaz de usuario, hay que sobrescribir el inicializador predeterminado, y luego simplemente agregar lo requerido en él En caso de que estés usando storyboards, eso es obligatorio, y en nuestro caso, no lo es Entonces solo agregamos un error gordo aquí. Y entonces lo que haces es que usemos el método de carga vista. Es similar a on appear on en Swift UI, y se llama cada vez que aparece la vista. No, sólo se llama una vez cuando la vista aparece por primera vez. Creo que visto aparecen función también, que se llama cada vez que aparece la vista. Entonces básicamente lo que estamos haciendo es que estamos configurando algún color de fondo para la vista, y luego estamos configurando la IU dentro de nuestra función UI, solo estamos llamando a todas las funciones de configuración de UI y estamos configurando nuestro contenedor, y estamos configurando nuestro contenedor, antes que nada, con la vista. Le estamos dando cierta altura y anchura definidas y centrando el anclaje X e Y. Entonces lo que estamos haciendo es que estamos estableciendo restricciones para la etiqueta de título, luego nuestro botón, y luego nuestra etiqueta del cuerpo del mensaje. Y todo esto parece estar bien. Y ya sabes por qué hice una etiqueta corporal por fin es porque está utilizando botón de acción y etiqueta de título y todo. Por lo que necesita tener esas limitaciones establecidas antes de hacer referencia a sus limitaciones Y siempre que en UIK estamos trabajando con el lado inferior o el lado final, realidad necesitamos trabajar con negativo porque es una especie de nom en ICD, así que esto es lo que tanto hemos hecho, y un botón requiere un método C objetivo Entonces lo escribimos para desestimar la visión misma. Esto está ahí ahora en el siguiente video, realidad vamos a crear un archivo donde mencionaríamos toda la lista de errores que podamos tener en todas estas funciones, y luego podremos vincularlos entre sí y usarlo dentro de nuestras funciones para ver ¿cómo resulta ser? Espero ver en el siguiente video. De nuevo, intentaré vincular algún video de la UIC con este curso en sí, pero estaba pensando que mantendría juntos otro curso para UIC porque es un tema tan detallado Pero me encargaré de ello. Gracias por ver. Y si tienes alguna duda, por favor déjalas abajo en los comentarios. Estaría encantado de ayudarle. 30. Agregar cargador de superposición y alertas personalizadas a todas las funciones: Derecha. Entonces, en el último video, realidad hicimos este controlador de vista de alerta personalizado. Entonces agregamos todos esos elementos que necesitábamos para el controlador, y esos son la etiqueta del título, el mensaje, el botón y el propio contenedor. Ahora que esto está hecho, lo que podemos hacer es que podamos seguir adelante y crear un archivo de alerta personalizado. Básicamente, si solo entramos en nuestro modelo de vista principal, fíjese en esta única cosa que estamos haciendo muchas llamadas APA aquí. Lo que está sucediendo es que por cada llamada APA, la alerta debería ser diferente porque algunas llamadas APA son para cerrar sesión, algunas son para buscar usuarios, buscar publicaciones, seguirse entre sí Entonces esos casos son diferentes y no se puede mostrar un error genérico para todos estos, ¿verdad? Lo que podríamos hacer es que podríamos usar enumeraciones, y luego podemos enumerar todos los casos en los que necesitamos una alerta, y luego les podemos dar un mensaje específico a su caso Entonces de esa manera podríamos simplemente utilizar todos esos casos, y cada vez que se llame a nuestras funciones, ya sea en su éxito o en su error, tendríamos una alerta personalizada para mostrar al usuario para que supiera que lo que específicamente no está funcionando o lo específicamente salió bien y tenemos éxito en qué caso. Entonces para ese propósito, vamos a ir dentro de la carpeta personalizada, hacer comando, y podemos seleccionar un archivo Swift. Vamos a nombrar este error de aplicación se podría pensar en un nombre más creativo, pero solo pensé que esto podría funcionar muy bien. Podemos hacer kit UI aquí. Ahora lo que podemos hacer es que solo podamos crear una enumeración, y esta um sería aperor Ahora podemos enumerar todos los casos que necesitamos aquí y no me importan estos espacios adicionales. Estaba pensando en importar también una interfaz de usuario rápida, pero ahora que lo pienso, realmente no la necesitamos aquí. Entonces lo que podemos hacer es que podamos enumerar todos los casos. Por lo que un caso sería login fallido. Entonces habría caso como el registro fallido. Y de manera similar, tendríamos que enumerarlos todos, por lo que no se podría actualizar la foto de perfil, entonces habría un caso para no obtener caso de publicación de usuario por no haber podido recuperar usuarios Ahora, déjame simplemente escribir usuarios rápidamente Y de manera similar, tendríamos que agregarlo para todas esas llamadas de la EPA. Entonces serían como 67 casos para casos fallidos, y luego también tendríamos pocos casos de éxito en términos de hacer una publicación exitosa. Así que de esa manera podríamos mostrar al usuario siendo receptivo que, Oye, acabas de hacer un post. Entonces sí, podemos ir de acuerdo con eso. Así que vamos a hacer caso no pudo obtener información del usuario. En caso de que alguna vez suceda, entonces podría fallar en buscar feed Home El feed casero es algo que aún tenemos que completar. No está exactamente hecho en este momento, así que pronto también completaríamos esto. No seguir al usuario es una característica más. Entonces, solo agreguemos eso. Ahora no habríamos podido dejar de seguir al usuario, y entonces el último caso debería ser fallido al cerrar sesión. Algunos de estos casos es muy poco probable que ocurran, pero aún así debemos mantenernos preparados con eso. Ahora te das cuenta que ya que hemos agregado todos estos, lo que tenemos que hacer es que dentro de la propia enumeración, necesitamos crear un mensaje variable para que podamos acceder simplemente a él como algo así como, déjame seguir adelante y mostrarte Aperor punto Log in field, dot Estaba pensando que ya que tenemos una propiedad de mensaje y necesitaríamos hacer una sentencia switch para todos ellos, así que vamos a agregar, déjame simplemente eliminar esto por ahora. Puedes hacer un interruptor en auto, y de esa manera tendríamos que agregar esa propiedad de mensaje para todos ellos, y podría ser un caso en el que puedas perderte cualquiera de ellos en el proceso. Entonces, ¿qué tal si simplemente creamos un protocolo práctico? Básicamente, este protocolo establece que sea cual sea el tipo, vamos a hacer el protocolo P, error presentable Y esto incluiría un mensaje variable, que sería del tipo string, y sería una propiedad get. Ahora lo que podríamos hacer es que podamos conformar esto para escribir error presentable Lo que pasa es que ahora dice Swift debe ser exhaustivo. Así que vamos a agregarlos aquí, y ahora vamos a agregar todos los casos para los que necesitamos los mensajes. Ahora, vamos a agregar rápidamente dos casos para el éxito también. Por lo que debería haber un caso cuando la publicación de subida sea exitosa. Entonces eso es lo que estamos haciendo aquí. Entonces podemos agregar un caso donde subir foto de perfil sea exitosa. Entonces allí también necesitaríamos realmente caso. Ahora, dice que Swift debe ser exhaustivo. Así que vamos a arreglar esto y agrega automáticamente cualquier mensaje, cualesquiera que sean los casos que queden. Entonces ahora lo que podemos hacer aquí, podemos devolver un mensaje que sería log y falló. Por favor, compruebe su conexión a Internet. Y lo que podemos hacer es que podamos lanzar este mensaje literalmente a todas partes, pero cada vez que cambiamos el texto que precede. Entonces esto está ahí, esto está ahí. Para ello, diríamos que Upload post fue exitoso. Entonces esto está ahí, y podemos hacer subir la imagen de perfil fue exitosa. Ahora aquí podemos tener el registro fallido. Sólo cuélgalo conmigo. Rara vez tomaría algún tiempo. Error en el registro. Debería tener actualización, falló la foto de perfil. Entonces esto debería haber fallado en recuperar la publicación de los usuarios, entonces podemos fallar en recuperar usuarios, no haber podido recuperar Aquí podemos haber fallado en obtener información del usuario, aquí podemos haber fallado en obtener el feed de inicio Aquí podemos haber fallado en seguir al usuario, y podemos haber fallado en dejar de seguir al usuario, y este último no habría podido cerrar sesión. Entonces esto está ahí, y podemos simplemente quitarlo aquí. Obviamente, estos errores pueden deberse a diferentes casos, pero estamos asumiendo y mostrándole al usuario que hay algo mal en la conexión a Internet para que pueda volver a intentarlo. Y obviamente, si hay algún error en la app, entonces tarde o temprano solo nos enteraríamos . Entonces ahí está. Ahora lo que podríamos hacer es que podamos usar otra puede simplemente agregar una función pública aquí, y deberíamos llamarla alerta presente. Y esta alerta presente tomará en un controlador de vista, y sería del tipo UI view controller, que sería opcional, y podemos darle algún valor, por lo que debería ser UI application dot TP view controller, y podemos abrir paréntesis aquí Ahora podemos tomar un título, y esto podría ser del tipo string, y luego podemos tomar un color de botón porque como te dije, podrían ser casos de éxito y podrían ser casos de error. Entonces en caso de error, simplemente usamos rojo, pero en caso de éxito, usamos verde. Entonces ahora podríamos hacer uso de nuestra clase de ayuda háptica y simplemente podríamos llamar en el escenario de error, así que eso es lo que estamos haciendo aquí Vamos a crear el controlador de vista de alerta. Y usaríamos nuestro controlador de vista de alertas personalizado. El controlador de vista de alerta personalizado tiene su propio inicializador para que el mensaje de alerta sea el título, y no hay ningún título real aquí Entonces solo estoy pensando que lo que podríamos hacer o tal vez lo podemos hacer es que tenemos una cosa del título. Tenemos mensaje. Tenemos botón Color y tenemos, nuevo, nuestro botón Color que es para dos diferentes Lugares mi mal. Debería haber una O aquí. Ahora que hemos creado esto, usamos Alert View Controller dot Modal presentation style, así que esto debería ser a pantalla completa. Entonces podemos usar Alert View Controller y establecer el estilo de transición, y esto debe ser de disolución cruzada. Esto está bien. Ahora lo que podemos hacer es que podamos usar este parche Q punto punto principal Asincrónico y dentro de A, podríamos usar ViewController punto presente, y usaríamos nuestro controlador de vista de alerta aquí, y animado debería ser cierto Entonces esto está ahí. Lo que podemos hacer es que podamos agregar una extensión a nuestro controlador de interfaz de usuario porque en este momento, no hay nada como tal controlador de vista superior. Entonces aquí mismo, solo vamos a agregar una extensión o tal vez, ya sabes, podemos simplemente eliminar esto aquí y podemos ir dentro de extensiones. Dentro de las extensiones, vamos a crear un nuevo archivo. Sería un archivo swift, controlador de vista de interfaz de usuario. Más EXT. Entonces esto está ahí. Vamos a hacer clic en Entrar. Lo que hacemos es que escribimos una extensión, que sería UI view controller, y luego podemos agregar esto en la aplicación UI en su lugar. Y aquí escribiríamos una función de clase, que sería controlador de vista superior. Y lo que hará esta función es que nos devolvería un controlador de vista superior. Entonces, el controlador de vista superior básicamente significa el controlador de vista base principal, y el controlador debe ser controlador de vista de interfaz de usuario, opcional, aplicación de interfaz de usuario, punto compartido, punto Windows, punto primero. Básicamente, esto está ahí, y necesitamos filtrar por aquí, y usaríamos signo de dólar cero punto es clave Window, que es una propiedad UIKit, y luego podemos usar dot RootVew Controller encima Entonces de esta manera, nos pondríamos a conocer, esta manera podemos obtener nuestro controlador de vista de interfaz de usuario, que es el controlador de vista principal, y que puede presentar nuestro cuadro de alerta. Entonces ahora mismo, es preguntarnos que nos falta un tipo de devolución. Esto está bien. Simplemente arreglaremos rápidamente este controlador de navegación Flet. Es igual al controlador como un controlador de navegación de la interfaz de usuario de navegación de la interfaz de usuario. Lo que podemos hacer es que podamos devolver simplemente el controlador de vista superior con un controlador, que sería el controlador de navegación punto controlador de vista visible, básicamente. Y si ese no es el caso, podemos hacer dejo que el controlador de tabulación. Entonces básicamente estamos comprobando los diferentes escenarios en los que uno podría ser nuestro controlador de vista principal, que tenemos que mostrar para poder presentar el cuadro de alerta. Entonces esto está ahí. Podemos hacer lo que dejo seleccionado es igual al controlador de pestañas, punto seleccionado controlador de vista, que es una propiedad en tap view controller, podemos simplemente devolver el controlador de vista superior con un controlador, y eso sería seleccionado. Entonces esto está ahí. Ahora lo que podemos hacer es que podamos comprobar si se presentan. Por lo que esto podría mostrarse dentro de una vista de pestaña. Esto podría mostrarse dentro de una vista de navegación. Podría mostrarse con una hoja presentada. Entonces eso es lo que vamos a por aquí, y luego podemos seleccionar el controlador de vista presentado. Aquí, simplemente devolveríamos controlador de vista superior con un controlador, y eso sería presentado. Entonces esto está ahí. Y entonces podemos simplemente devolver el controlador, y esto parece estar bien. Esta era la extensión que necesitábamos. Ahora que esto está hecho, lo que podemos hacer es que solo podamos volver al interior de nuestro archivo de errores, y esta vez idealmente debería funcionar. Entonces ahí vamos. escrito con éxito nuestro archivo de error, y ahora necesitamos hacer algunos cambios dentro de nuestro modelo de vista. Así que vamos a entrar en nuestro modelo de vista principal. Simplemente iremos dentro de la SinouFunction. Lo que pasa es que ahora dentro de la función Sinnot, justo debajo del bloque de dos, comenzamos con overlay, que también es uno de los archivos que Empezamos a mostrar un cargador Luego usamos Haptix helper, y en realidad usamos la pestaña del botón Haptics medium, para que puedas ver dentro de este archivo hay diferentes comentarios listados Para que puedas seleccionar el que necesites. Entonces hay uno para la pestaña de celda, pestaña botón de luz, advertencia, error de éxito. Eso es lo que vamos a buscar aquí. Ahora dentro vemos estos valores. Esto está bien. Ahora qué podemos hacer eso, ya que está en el bloque Do, podemos hacer Ocultar oader, así que esto es lo que vamos a hacer Ahora dentro de la caché también, hagamos Ocultar oader porque no queremos simplemente seguir cargando por si hay un error, y aquí podemos usar una cola de despacho Así que despachar cola punto principal punto asincrónico y dentro de aquí, podríamos usar nuestro error de aplicación ahora Entonces, el error de la aplicación en realidad usaría no cerrar sesión. Entonces podemos usar presente alerta encima de ella, y el título sería un error. El mensaje ya está proporcionado, y el color del botón sería punto rojo. Entonces esto está ahí. Del mismo modo, en realidad necesitaríamos agregarlo en muchos lugares. Entonces, por ejemplo, al iniciar sesión, necesitaríamos agregar este show oader y la pestaña media Así que vamos a hacer eso. Dentro del bloque doo, en realidad simplemente lo esconderíamos. Entonces esto está bien. Dentro del bloque de caché , también, simplemente lo esconderíamos para poder hacerlo aquí. ¿Y qué más tenemos que hacer? Así que ya no necesitamos usar el error de auth handle autodidacta, y simplemente podemos usar este Y creo que Hight loader no necesita estar dentro de la cola de despacho Entonces eso está bien. Abrimos una cola de despacho, vamos aquí, presionamos aquí. Usamos falló a Bien, entonces ¿no hemos agregado el campo de inicio de sesión o algo así? Vamos a seleccionar el campo Iniciar sesión está ahí, el error parece estar bien. Todo esto se ve bien. Podemos eliminar esta cola de despacho adicional. Entonces esto está ahí y también se completa nuestra función de inicio de sesión. No lo creo. Hemos agregado tanto en do como en bloque de caché, así que esto parece estar bien. Entonces ahora lo que podemos hacer es que podamos entrar al usuario de registro, y ahora vamos a hacer algo similar. Lo agregaremos aquí. cargador de altura de superposición irá dentro tanto de la cola de despacho como de la declaración cat. Y en vez de esto, lo que podemos hacer es entonces podemos copiar y pegar esto y podemos agregar registro fallido. Entonces todo esto funciona bien. Ahora solo tenemos que asegurarnos de que lo hacemos en todas partes. Entonces básicamente, deberíamos tener actualizar foto de perfil, así que actualizar perfil. Bien, esto no va a surgir. Así que solo busquemos subir foto de perfil. Sí, esto está ahí. Ahora lo que hacemos aquí es que agregamos el mismo show loader superpuesto más hápticos medianos, y luego dentro de la declaración Do, hacemos cargador de ocultar superpuesto, de manera similar aquí, haríamos algo como overlay dot hide loader manera similar aquí, haríamos algo como overlay dot Abriríamos una cola de despacho. Así que sólo vamos a esperarlo. La cola de despacho está aquí, punto principal asíncrono, no asincrónico después, sino asincrónico Ahora podemos abrir esto. Ya podemos eliminar estas dos líneas. Y lo que podemos hacer es que podamos agregar app error dot fallar al actualizar foto de perfil punto presente Alerta. Esto sería error, y para el botón el color sería rojo. Entonces sí, esto está ahí. Ahora, vamos a ver que, bien, esta función está hecha, Hid oader está en ambos lugares. Esto funciona bien. Vamos a entrar en nuestra base de datos de búsqueda de usuarios. Así que vamos a buscar fetch o base de datos, o tal vez creo que el nombre de la función es fetch database users Um, creo que queríamos ir a buscar a todos los usuarios, por lo que deberían ser buscados los usuarios de la base Aquí, solo podemos agregar estas dos líneas de código. Entonces dentro de la cola de despacho, podemos hacer el cargador de ocultación de puntos superpuestos Dentro de la declaración CAT que podemos hacer está superpuesta dot hide loader Lo que haríamos es que copiaríamos esta cosa, quitáramos esta cosa de aquí. Añadiríamos error, pero esta vez no se lograría obtener usuarios. Esto está ahí. Entonces sí, esto también parece estar bien. El cargador alto se encuentra en ambos lugares. Ahora lo que tenemos que hacer es que íbamos a ir a buscar User post, básicamente Y Fetch User post en realidad tendría overlay dot show Loader Entonces tendría Haptics helper dot medium button tab. Ahora dentro de un Do Block, haríamos es superponer Dot Hide loader. Y aquí haríamos overlay dot Hide oader De igual manera, solo necesitamos actualizar todas las funciones para que eso es lo que vamos a hacer ahora, Despacho qu q punto punto principal asincrónico y dentro de aquí, podríamos usar error de app El error de la aplicación está aquí. Entonces podemos fallar al buscar la publicación del usuario está ahí. Ahora podemos hacer presente alerta. El título debe ser error. Y el color del botón debe ser rojo. Entonces esto es lo que estamos haciendo aquí. Esto parece estar bien. ¿Qué funcionalidad queda? No tenemos puesto de búsqueda para alimentación casera en este momento, así que eso es lo que vamos a hacer en un rato, para que podamos esperarlo Tenemos FetchUserFollowers, así podemos ir a buscar Entonces FetchUserFollower comenzará con Olay dot show Loader, luego sería T helper, y tomaría en Ahí dentro, tendríamos overlay dot hide loader, y dentro de aquí también, tendríamos overlay dot hide loader. Vamos a abrir una cola de despacho. Esto se abriría así. La declaración de los gatos es esta, la tarea es ésta. Bien, esto parece estar bien. Podemos usar un error de aplicación básicamente aquí. Ahora podríamos usar fallar en buscar Bien, así que no tenemos ninguno, podríamos usar lo mismo fallar para recuperar usuarios en realidad y podemos presentar porque no quiero particularmente agregar un caso específico para, ya sabes, seguidores Así que vamos a ver no tenemos tenemos para seguir usuario y seguir usuario, pero no tenemos esta forma esta cosa. Así que podemos hacer fetch user following y fetch user following is here Lo que podemos hacer es hacer el mismo overlay dot show loader. Entonces podríamos tener Haptix helper dot medium button tab dentro de aquí, hacemos overlay dot Hight Entonces de manera similar, aquí, tendríamos overlay dot d loader. Esto está bien. Copiamos esta línea de cola de despacho. Lo pegamos en vez de aquí. Ahora agregamos esto. Ahora dentro de aquí, usaríamos error de aplicación. Hagamos un error de aplicación. Entonces tendríamos que hacer falló en ir a buscar. Esto debería estar siguiendo o algo así. Después de fallar, supongo que buscar usuario siguiendo no debería haber obtenido seguidores de usuario también está ahí Así que en realidad podríamos hacer la misma línea aquí también. Esto está bien, pero creo que necesitamos agregar esto para dejar de seguir y seguir al usuario Así que dejar de seguir y dejar de seguir usuario es esto. Así podemos agregar Olatet show loader. Entonces lo que podríamos hacer es que podríamos usar Hap ticks helper, entonces podemos tener pestaña de botón mediano, y luego dentro de aquí, y luego dentro de aquí, podemos hacer overlate Ocultar cargador dentro de aquí, lo que podemos hacer es superponer Ocultar lo que podemos hacer es superponer Ocultar oader entonces en lugar de esta declaración de impresión, podemos abrir una cola de despacho, Despacho que punto punto principal ASC, que en realidad usaría nuestro error de aplicación, que en realidad usaría y debe ser dejar de seguir punto presente Alerta. Esto debería ser un error, y hagamos la E mayúscula y el color debería ser rojo. Esto está bien. Y lo que podemos hacer es que ahora que tenemos esto, realmente podemos ir dentro de nuestros datos de búsqueda de usuario Si aún queda, verifiquemos buscar datos de usuario Y supongo que aquí no hemos agregado esto. Entonces, bien, usaríamos overlay dot show loader, entonces tendríamos un ayudante háptico Entonces usaríamos un toque de botón mediano aquí. Ahora lo que haríamos es entrar aquí, Olay punto Ocultar oader Aquí, también, agregaríamos overlay, dot, Hide oader dentro de aquí, eliminamos esto Agregamos nuestro despacho q punto punto principal ACC. Entonces esto está bien. Ahora dentro del aire, hacemos error de aplicación. Básicamente, esto debería ser fetch use o algo así. Entonces no estamos bien, hemos podido obtener información del usuario, presente alerta Debe haber un error, y el color del botón debe ser rojo. Entonces esto está bien. Ahora lo que podemos hacer es que podamos entrar, seguir, así manejar, seguir. Handle follow user está aquí, y creo que Handle follow lo maneja perfectamente. Así que la superposición de puntos muestra Shooader, Haptics helper, dot medium button tab está ahí Ahora usamos esta misma cosa. Pero en cambio aquí, en realidad tendríamos Hide oader y de manera similar aquí también, tendríamos Hide loader Podemos eliminar esto. Podemos agregar un despacho Q. punto punto principal asincrónico y dentro de aquí, podríamos usar error de aplicación, y el error de la aplicación hará uso de follow, así que no puedes seguir al usuario, punto presente Alerta título sería error, y el color del botón debería ser rojo. Entonces esto está ahí. ¿Qué función es la izquierda? Tenemos subir imagen, crear, um crear post. Podemos hacer esto. Tenemos subir imagen y crear post. Entonces lo que podemos hacer es que después de hacer el Gard, o podemos agregar un overlay o show loader aquí con un haptex helper dot medium button tab Ahora dentro de un bloque Do, lo que podemos hacer es que solo podemos agregar overlay dot hide loader. Aquí también, podemos agregar superposición para ocultar el cargador. Y en vez de todo esto, lo que podemos hacer es que podamos abrir una cola de despacho y este punto principal de despacho que asincrónico, al igual que los otros, tendría un error de app, y este error de app en realidad comprobaría para publicar post o algo así, fallido Subir post exitoso tenemos, pero aquí no tenemos un caso de fallo Entonces lo que podemos hacer es que podamos agregar un caso también básicamente, vamos a llamarlo éxito, llamar al botón, verde, y podemos simplemente copiar esta cosa, pegar esto aquí, eliminar esto aquí. Esto está ahí. Podemos cerrar el cargador de antemano, y luego podemos agregar caso, subir post fallido. Entonces esto está ahí. lo creo, tenemos un caso para esto. Entonces podemos copiar esto, arreglar esto. Podemos copiar esto, y podemos decir, subir. Post falló, y podemos usar este valor de post upload aquí, y podemos pegarlo aquí. Debería haber un error, y esto debería ser rojo en lugar de verde. Entonces esto está bien. Ahora lo que podemos hacer es que utilizaremos estas alertas. Así que vamos a probar ¿cómo se ve ahora en nuestra aplicación real? Y luego podemos avanzar para hacer que la vista de alimentación casera. Y una vez que se hace la vista de alimentación doméstica, particularmente, podemos hacer algunas mejoras menores que se necesitan. Entonces finalmente podemos pasar a agregar algunas compras en la aplicación en nuestra aplicación. Entonces ese sería un paso muy grande. Así que probemos rápidamente nuestra aplicación y veamos si está funcionando o no. Entonces para ello, estaba pensando que solo voy a hacer un post, y entonces sabríamos que si bien, entonces estaba apareciendo el cargador, eso es algo bueno. Básicamente, lo que haríamos ahora es que podríamos ir a nuevo post. Pueden seleccionar la imagen del héroe. La imagen del héroe debería ser esta, esta película, ahora podemos tener algunas letras aleatorias aquí. El presupuesto debería ser como 20 dólares. La calificación debe ser de cinco estrellas para todo. Es decir, fue una buena película, así que vamos a seleccionar una imagen de café. ¿Tenemos una imagen de café, tenemos algunas fotos de comida y de todo. Podemos escribir hamburguesas de pollo. Ahora podemos seleccionar una imagen de estancia. Para la imagen de la estancia, en realidad podemos seleccionar estas nubes o algo así. Esto se ve bien. Podemos decir nubes, hay que llevar las cosas debe ser mantequilla. Y botella de agua. Y solo agreguemos un post. Está haciendo el cargador. Entonces este es un buen paso. Ahora estoy esperando que una vez que termine el cargador, lo cual veríamos una caja de alerta. Entonces, esperémoslo y veamos que si eso pasa o no. Entonces, bien, sí tenemos un éxito, subir post un exitoso. Entonces eso es algo genial. Lo que estaba pensando es que esta alerta es un poco, ya sabes, um, llena. Entonces esto no es exactamente lo que me gustaría. Lo que puedes hacer es que podamos ir a nuestro controlador de vista de alertas personalizado. Aquí tenemos nuestra vista de contenedores, que debería estar en alguna parte de aquí. Vamos a verificar nuestro contenedor configurado. Le hemos dado un anclaje de altura y un ancla de ancho. Vamos a darle 350 o algo así. Esto podría verse mejor en él. Entonces sí, esto estaba ahí. Y no tiene un texto adecuado o simplemente simplemente lo recorté Entonces bien, es exitoso. Esto está bien. Así podemos hacer click en, Bien, ahora podemos volver atrás y con éxito realizó la llamada API, y está recuperando todo. Todo esto se ve increíble. Entonces, sí, me encanta esta cosa. Lo que podemos hacer ahora es que realmente podamos trabajar en el feed casero para que podamos ver estos post en una pantalla más grande. Eso significa que una cosa más es que necesitaríamos hacer cambios en la interfaz de usuario de estas publicaciones para que se vean mejor. Y, sí. Entonces, después de eso, nuestra aplicación estaría mayormente completa en cuanto a funcionalidad, y luego podemos avanzar a otras cosas. Así que gracias por ver este video. Y nuevamente, si tienes algún tipo de duda, podrías simplemente dejar tus dudas en los comentarios. Estaría muy feliz de ayudarle. Y espero verte en el siguiente video. 31. Implementación de la alimentación casera: Ahora lo que podemos hacer es que podamos seguir trabajando en nuestro curso y completar la parte de alimentación casera del mismo. Entonces, para ese propósito, en realidad necesitamos hacer un pequeño cambio en nuestra función de pose de usuario fetch antes de seguir avanzando a lo largo del curso, para que podamos agregar una finalización Solo estoy agregando un cierre final a esta función, por lo que debería marcar como escape, y luego el resultado incluiría post, una matriz de post, y tendría una tabulación escrita para evitar Entonces de esa manera, tenemos un manejador de finalización aquí, y ahora lo que podemos hacer es que dentro de aquí, podamos tener el manejador de finalización como post, y dentro del error, podemos tener un manejador de finalización como una Entonces esto está ahí. Ahora, vamos a ver de qué se queja. Entonces dice creo que esto debe esperar esperado este puesto manejador de terminación debería ser así, y vuelve blanco Entonces sí, esto me parece bien. Ahora lo que podemos hacer es t justo abajo, podemos escribir otra función, y esto sería dejarme solo verificar. Bien. Entonces esto debería ser ir a buscar usuario, vamos a corregir la ortografía FPC buscando usuario home feed Entonces, la idea detrás de home feed es que supongamos que eres un usuario y sigues a otras dos personas, por lo que tu feed casero debe incluir publicaciones tanto de esas dos personas como de ti también. Entonces eso incluye un total de tres personas. Supongamos que estás siguiendo como mucha gente, estás siguiendo como diez, 15 personas, entonces no necesitas ver tu propia publicación en el hogar sentir también, ¿verdad? Porque de manera similar es como Instagram. Si estás cayendo literalmente menos gente, no ves tu propia publicación, más bien ves su publicación, y si te estás cayendo como realmente menos personas, son como, dos, tres personas, entonces solo ves la publicación de todas estas dos, tres personas, incluyéndote a ti mismo. Entonces para ese propósito, comencemos a escribir nuestra función, entonces sería función fetch, fetch home feed. Entonces esto está ahí. Vamos a abrir paréntesis, abrir las llaves. Ahora podemos simplemente escribir rápidamente un publicado esto debería ser B mayúscula, así publicó una publicación de feed home, que sería del tipo post, y sería una matriz vacía. Entonces esto está bien. Lo que tenemos que hacer ahora es obtener el ID de usuario. Así que vamos a hacer que la tarjeta permita que ID de usuario actual sea igual a la clase OT o instancia de arte de punto. Entonces tenemos el usuario actual punto UID, lo contrario, podemos simplemente regresar de aquí Ahora lo que haríamos es que buscaríamos los siguientes del usuario, así que buscaríamos el siguiente usuario Podemos pasar el ID de usuario actual. Ahora nuestra siguiente matriz se actualizaría por esto, así que podemos hacer dejar ID de usuario, y podemos crear una matriz a partir de ella. Entonces usaríamos la siguiente matriz. Entonces usaríamos un mapa compacto en un para eliminar todos los valores opcionales, y luego simplemente podemos convertir todo ese usuario de base de datos en un área de ID de usuario. Aparte de eso, también necesitaríamos incluir nuestro ID de usuario actual en el área. Así que vamos a envolver esto entre paréntesis. Podemos hacer es que podamos agregar nuestro ID de usuario actual también a esta matriz y luego lo que podemos hacer es que solo podamos tomar las tres personas iniciales, así prefijo con tres. Por lo que en este solo se proporcionarán los tres primeros usuarios. Supongamos que recientemente ha seguido a cinco personas, por lo que en realidad podría ver publicaciones de ellas en lugar de sus antiguos usuarios seguidos. Entonces esa es la funcionalidad que voy por aquí. Ahora lo que podemos hacer es que podamos crear una variable local aquí. Vamos a llamarlo todo post. Todos los post en realidad serían del tipo post, y la ortografía vuelve a ser incorrecta. Entonces bien. Y entonces podemos tener un área vacía aquí. Ahora lo que podemos hacer es que no necesitamos bloquear la cola principal para esta funcionalidad de llamada a la API porque estaríamos recorriendo y llamando a fetch user post para todos estos Así que vamos a crear un grupo de despacho. Básicamente, podemos sincronizar la publicación del usuario fetch llamada así Entonces hagamos grupo de despacho. Y este es uno de los temas de gama alta sobre los que podrías leer algunos artículos o trataría de incluir un video corto sobre esto además de explicar este concepto arriba, así que eso sería útil para ustedes chicos. Así que puedes recorrer la matriz y usar ID, básicamente. Y lo que podemos hacer es que escribiríamos el grupo de despacho punto enter, y ahora nos limitaríamos a buscar post de usuario por cada ID de usuario Y eso es lo que vamos a hacer aquí, fetch fetch user post está El ID de usuario sería, solo agreguemos algo aquí. Podemos usar esto. Entonces ID de usuario, Capslop necesita ir. Tenemos post in, y para esto podemos hacer es que todos los posts deben anexar, y debemos anexar el contenido de post dentro de nuestra variable all post Y entonces podemos simplemente despachar a la cripta Lee desde aquí. Entonces todo esto parece estar bien. Ahora dentro de aquí, lo que podemos hacer es que cuando todas las llamadas API para buscar publicaciones se están haciendo o completando, lo que podemos hacer es que podamos usar nuestro grupo de despacho y podamos notificar a la cola principal, así que la cola debe ser principal, y necesitamos ejecutar algo aquí Y básicamente, vamos a barajar el post, así de esa manera vemos posts aleatorios y no sumar en un orden perfecto y solo escogemos como cinco, seis posts para mostrar, así podemos agregar seis aquí. Entonces esto está ahí. Lo que haríamos es que usaríamos self dot home field post equals, vamos a abrir una matriz y dentro de aquí, usaremos todos los post dot shuffle, y podemos simplemente tomar un prefijo de seis elementos de aquí, y luego podemos simplemente imprimir eso con éxito así que estaba pensando que en realidad no mostraría al usuario con una alerta de éxito o algo así cuando busquemos el publicar porque eso realmente no tiene sentido y no es un buen ejemplo de experiencia de usuario. Entonces, con éxito, la publicación de feed en casa, lo que podemos hacer ahora es que solo podemos mostrar que podemos imprimirlas, así que la publicación de feed en casa debería ir aquí Ahora lo que tenemos que hacer es que necesitaríamos utilizar esta función. Y para poder hacerlo, entremos en nuestros puntos de vista. Hacer comando, haga clic en Swift UI y cree la vista de feed de inicio. Entonces esto debe estar ahí ahora vamos a trabajar alrededor de la vista de alimentación doméstica. Entonces, ¿qué funcionalidad necesitamos dentro de la vista de feed de inicio? necesitamos dentro de la vista de feed de inicio Entonces, para ese propósito, simplemente agreguemos rápidamente modelo de vista variable de objeto observado para hacer la llamada API, que sería el modelo de vista principal de aditype Entonces podemos tener el objeto Environment para que la gente pueda volver de la pantalla. Entonces esto es lo que estoy haciendo ahora mismo. Obviamente necesitaría agregar zSCk dentro de la pila Z, tendríamos punto coloreado negro, y luego podemos tener una vista de desplazamiento y la vista scroll tendría un espaciador con cierta altura como marco y altura de, como, 70 píxeles Déjame cortar esto, pegar esto aquí. Esto parece estar bien. Vamos a entrar en nuestra página Explorar. Explora la página para que solo podamos copiar el botón Atrás, así que solo podemos copiar esta cosa desde aquí , pagina esto aquí. Podemos eliminar el panel de vista previa. No lo necesitamos. Ahora lo que podemos hacer es que podamos agregar otro espaciador, y luego podemos agregar un rectángulo COVI Y este rectángulo COV en realidad solo incluiría un marco con un ancho de 180 píxeles y una altura de 50 píxeles No se necesita alineación. Entonces estaba pensando que solo deberíamos tener un encabezado en nuestra vista de feed casero, así que eso es lo que voy a buscar aquí. Por lo que el color debe ser del tipo UI color, y debe ser amarillo máximo. Esto está bien. Ahora lo que podemos hacer es agregar una superposición con un contenido, así que ese debería ser algún texto, que debería decir home feed. Sí, esto está ahí. Lo que podemos hacer ahora es que podemos agregar el estilo de cuatro multitudes con el negro. Entonces podemos tener font, todd custom, fonts todd bold, y el tamaño debe ser 18 Y podemos tener algo de relleno aquí. Entonces este es el ahora lo que podemos hacer, iniciaríamos una pila vertical aquí, básicamente, y la pila vertical se abrirá. Tendría la vista de publicación para mostrar. Entonces debería haber una para cada uno. Deberíamos tener en vista modelo punto home feed post. Después tomamos la identificación. Debe ser Post ID. Esto está bien. Lo que podemos hacer ahora es que aquí tendríamos post N, y podemos mostrar nuestra celda post view con nuestro post. Sí, eso es todo. ¿Podemos proporcionarle algo de ancho y alto? No, no creo que así podamos. Entonces esto parece estar bien. Ahora, después de la pila vertical, vamos a darle un poco de relleno. Y dentro de aquí, vamos a cerrar rápidamente la vista de desplazamiento hacia arriba en barra de navegación pero n debería ser cierto. Para la pila Z, deberíamos tener área Ignosaf y deberíamos tener un on a peer, que realiza viewmdel dot Entonces esto debería traer nuestro post de feed casero. Ahora lo que podemos hacer es que podamos intentar correr, y antes de eso, vamos a entrar nuestra vista de perfil de usuario. Vayamos al texto de nuestro feed de inicio. Esto no debería ser un botón en lugar de un enlace de navegación. Y aquí tendríamos nuestra vista de feed home con nuestro modelo de vista, y no necesita un modo de presentación, así que solo podemos quitar esto arriba, y nos dice que necesitamos un cierre de finalización. Entonces lo que podemos hacer es que en vez de esto, podamos agregar guión bajo porque aquí no necesitamos FetchUserPost, y creo que debería arrojarnos un error en un área Y si, esto está ahí. Para que podamos hacer algo como esto. No necesitamos usar el cierre aquí. Tenemos el enlace de navegación a nuestro feed casero también ahora. Así que vamos a encargarnos rápidamente de ello. Sí, así que ojalá debería funcionar. Simplemente ejecutemos la aplicación y veamos por nosotros mismos. Y supongo que el post no debería quedar realmente bien porque, al igual que, lo hemos configurado para que se muestre bien dentro de nuestra vista de perfil, pero ahora mismo lo estamos mostrando todo dentro de pila vertical, una especie de cosa dentro del feed casero, donde hay mucho más ancho para cubrir, y luego podrían ampliarse. Entonces, el siguiente gran paso para nosotros sería trabajar realmente en nuestra vista de publicación. Y bien, nos da algún tipo de error, y dice que el usuario ha cerrado sesión o algo así. cual es un nuevo tipo de error, yo diría, no estoy muy seguro de esto, pero vamos a comprobar rápidamente que lo que salió mal. Y lo que podemos hacer aquí es ahora que intentemos ejecutar de nuevo la aplicación. Y a ver si vuelve a fallar. Lo que podemos hacer es eso, Bien, fue raro que en realidad nos haya arrojado algún error, pero ahora está funcionando bien. Si entramos al feed casero, nos muestra el post así. ¿No estoy siguiendo a nadie? No estoy siguiendo a nadie. Entonces, ¿qué tal si voy aquí adentro? Yo sigo ido, así que solo debería hacer la llamada API, y creo que siguió al usuario, pero al mismo tiempo no lo actualizó. Entonces eso es diferente. Vamos a entrar a ver tus siguientes. Yo hice Cc. Aquí tenemos el botón de dejar de seguir. Si voy a Explorar, sigo viendo el botón Seguir dentro de la página Explorar. Entonces eso es algo a investigar. ¿Por qué la página Explorar no me muestra el botón Seguir? ¿Qué tal si solo reviso rápidamente si he escrito follow en dos lugares diferentes Pero no lo creo , ya lo he hecho. Debe haber una vista general del perfil de usuario. Y si entro en una vista general de perfil de usuario, creo que ya he agregado una funcionalidad de seguir y seguir. Entonces supongo que mi página de conexiones debería llevarme a la misma vista de perfil de usuario general y esta vista de perfil de usuario general, qué llamadas de APA estoy haciendo por aquí. Así que dentro de aquí, estoy haciendo buscar datos de usuario, buscar publicación de usuario, buscar Y comprobar si el usuario sigue está siendo llamado. Y bien, es raro que se pueda mostrar lo mismo que se está obteniendo de esto Pero bien, vamos a entrar en nuestro feed casero. Y ahora tenemos cuatro puestos. Entonces básicamente, es mezclar y emparejar, y esta es la publicación de los matones. Entonces esto está ahí. Podemos echar un vistazo a nuestro podemos echar un vistazo al, ya sabes, el error que acabamos de ver y además necesitaríamos hacer esto redimensionable para que cubra toda la pantalla Entonces esa es una de las cosas que tenemos que encargarnos. ¿Y qué más tenemos que hacer? Básicamente, sí, esto es por ahora. Entonces, centrémonos primero en el error. Y vemos que si vamos a través de la página Explorar, y vamos a ir dentro la página Explorar dentro de aquí también, vemos que estamos haciendo estas llamadas API. Básicamente, la página Explorar puede estar bien. Explorar página es algo diferente. Pero creo es que estamos haciendo una llamada esperar viewmdel punto Fetch Eso parece muy bien. Pero entonces, ¿deberíamos tener ver modelo punto Fetch usuario siguiente? Y para el ID de usuario, podríamos tener um Dios dejó que el ID de usuario, que sería t punto t punto usuario actual, punto UID, else return, y podemos hacer esto opcional Podemos pasar en este ID de usuario, llamar a esto de nuevo. Esto parece un poco raro porque bien, AT no está en el alcance, entonces ¿por qué me dejaría escribir todo? A veces las quejas rápidas están en un nivel totalmente diferente. Así que tenemos la página Explorar aquí, y vamos a comprobarlo rápidamente con ver tus siguientes. Vemos a la persona y vemos el dejar de seguir en su perfil Eso parece estar bien. Vamos a Explorar, seguimos adelante. Todavía vemos el botón de seguir aquí, lo que no me parece correcto porque ¿por qué no traería eso si estoy siguiendo al usuario o no Entonces nos da el botón de seguimiento, seguimos dos, entonces todavía dice seguir con éxito al usuario. Por lo que parece haber un error con nuestra función de seguimiento siguiente, que aún no se ha discutido. Si vamos dentro de la alimentación casera, sí vemos su publicación y todo. Entonces ahí está. Vamos a buscar lo siguiente, después vamos dentro de C. Ahí podemos ver el botón de seguir. Así que veamos rápidamente qué llamadas APA tenemos dentro de nuestra página de conexiones, y no tenemos llamadas API. Esto parece estar bien. Ahora bien. Entonces lo que podemos hacer aquí es que solo podríamos entrar en la página Explorar. Y déjame ver esto rápidamente a través de la página Explorar. Entonces tenemos un botón de seguimiento que no cambia mientras estemos en la página Explorar. Bien, esto sí funciona. Esto nos da lo de dejar de seguir. Entonces, ¿por qué esto no hace eso? Pero solo vuelvo, voy aquí. Vuelvo a ir, tenemos dejar de seguir aquí. Dejamos de seguir a esta persona desde aquí, debemos ser removidos, ir a Explorar, ir al botón de seguir, nosotros sí seguimos, y todavía no obtenemos el botón de dejar de seguir Pero aquí sí tenemos el botón de dejar de seguir. Dejamos de seguir, luego seguimos. ¿Qué pasa con nosotros seguimos y tenemos esta funcionalidad? Eso parece funcionar bien. Dentro de nuestros seguidores ido está aquí. Todavía tenemos la función para dejar de seguirlo desde aquí. Aún deberíamos tener la función para dejar de seguirlo de aquí, pero esto no parece estar funcionando Entonces lo que podemos hacer ahora es que solo podríamos entrar dentro nuestra vista general de perfil de usuario, coincidir fetchUser siguiendo Fetch user following es llamar internamente a fetchUser A continuación se está concluyendo. Entonces después, llamamos al Bien, espera, fetcher siguiente, y esto se actualiza en una cola de despacho, así que esto podría tardar unos segundos y todo Lo que está pasando es que esto no llevará mucho tiempo, básicamente. Así que podríamos simplemente no usar toda esta función, deshacernos de toda esta función y usar el usuario fetch siguiendo los datos De lo contrario, podemos simplemente volver cuando vea verificar si el usuario sigue, verificar si el usuario sigue es nuevamente verificarlo, si self está siguiendo o no, quiero decir, ni siquiera necesitamos usar ya ni siquiera necesitamos usar este valor porque no lo estamos actualizando de ninguna manera. Entonces esto parece estar bien. Pero entonces si vamos a nuestra vista general de perfil de usuario, tendríamos que verificar el ícono um follow básicamente y esta vista general de perfil de usuario debería tener un seguimiento pero en algún lugar de aquí, que dice seguir y seguir, esto está ahí. Ahora lo que tengo que hacer es que tenemos que verificar el cambio de está siguiendo. Lo que podemos hacer es que solo podamos volver atrás y los siguientes datos, esto se está haciendo. También estamos tomando ID de usuario, por lo que Autodidacta está siguiendo es igual a Siguiendo solo puedes verificar toda esta funcionalidad aquí. Y podríamos hacer esto. Entonces, ¿eso ayuda? Y si lo estás usando aquí, en realidad no necesitamos este fetchUser siguiente funcionalidad, aunque esto también puede fallar, que se está cuidando en este feto están Entonces es por eso que la estoy guardando aquí. Pero vamos a ver por nosotros mismos si está funcionando o no. Entonces esto está ahí y déjame encargarme rápidamente de ello y si esta cosa está funcionando o no. Y lo que pude ver es que esto está siguiendo valor está siendo conmutado, y lo que hace es que no debe ser conmutado en su ¿Qué tal si solo lo quito de aquí? Y en lugar de hacer todo eso por dentro, el feto lo está siguiendo, solo puedes mantenerlo sencillo y ahora intenta ejecutar esto. Siento que nuestro siguiente está siendo alterado, y luego otra vez, se actualiza sobre el cambio on Entonces se está volviendo atrás o algo así. Entonces, vamos a encargarnos de ello, ¿cómo se ve? Entonces esto está ahí. Podemos tener la página Explorar. Podemos tener C. Esto es seguir. Vamos a seguir, y todavía no se actualiza. Eso es raro, pero tenemos seguimiento para Kura Pica. Entonces esto funciona con Kura Pika perfectamente bien. Siento que hay algo mal con el ID de usuario de este usuario o algo así. ¿Has hecho algunos cambios aquí y solo pensando en eso? Nos dieron seguimiento de aquí, y esto funciona perfectamente bien. Entonces me pregunto qué está tardando tan confusamente en no hacer Bien, de nuevo, se podía ver que el botón en realidad no se actualizó. Entonces sí, esto está ahí. Lo que podemos hacer es que podamos echar un vistazo a esto. De hecho, tendría que investigar todo el código para entender qué está pasando mal aquí. Entonces ojalá resuelva esto porque esto parece estar realmente roto en este momento. Y si solo sigo, debería tener el dejar de seguir Esto parece funcionar en alguna parte y no en todas partes. Entonces esto es un poco raro. Entonces, sí. Y entonces lo que podemos hacer es que finalmente podamos ver nuestro feed casero. Entonces esto está bien. Luego podemos reorganizar las cajas también para que coincidan con el tamaño perfecto Por lo que serían de naturaleza dinámica, y así se pueden usar tanto en la página de perfil como en el feed de inicio. Entonces sí, espero ver en el siguiente video, y ojalá encontrara el error en nuestro código. Gracias. 32. Solucionado el error de seguimiento-unfollow: Cambio rápido que realicé para que la funcionalidad funcione. Idalmente estábamos comprobando que si el punto del modelo de vista siguiente A tiene nuestro usuario de base de datos, y siento que las estructuras fueron como hacer un problema para nosotros para poder compararlo Entonces lo que he hecho ahora es que simplemente te guiaré rápidamente a través de él. Ya no necesitamos el modificador on change porque no estamos usando la siguiente propiedad. De todos modos. Entonces lo que podemos hacer es que creé una nueva matriz, que sería solo una matriz de cadenas que fuente el siguiente ID de usuario. Básicamente, las personas que nuestro usuario registrado está siguiendo sus ID de usuario se almacenarán en esta matriz. Simplemente copiamos esto, lo pegamos aquí. Verías que se está actualizando aquí dentro de fetch user following data. Entonces esto está ahí. No lo creo así ya no necesitamos esta comprobación de usuario si sigue la funcionalidad, así podemos eliminar eso. Y lo que pasa es que intentemos regresar rápidamente. Dice que tiene errores, bien. Y ahí también tiene errores. Eso está bien. Vamos a entrar en nuestra vista general de perfil de usuario. Aquí, ya no necesitamos esta funcionalidad, y dentro de nuestro botón, lo que hemos hecho es que en lugar de verificar la siguiente matriz, ahora estamos comprobando la siguiente matriz de ID de usuario, y que contenga nuestro ID de usuario de base de datos o no. Entonces esto es lo que estamos comprobando. Así que intentemos ejecutar la aplicación y veamos si toda la funcionalidad está funcionando o no. Y si lo hace, podemos eliminar de manera segura nuestra propiedad publicada que está siguiendo también, porque eso tampoco se está utilizando más. Así que vamos a comprobarlo rápidamente. Así que solo estaba pasando por esa funcionalidad ahora mismo. Entonces ojalá, creo que estoy siguiendo a estas dos personas. Yo me pedí que dejara de seguir. Bien. Entonces lo que puedo hacer es, entremos a nuestros seguidores y verifiquemos. Aquí es lo mismo. Yo me pedí que dejara de seguir Volvamos aquí. Vayamos a Explorar y consultar aquí también. Y dice que puedo dejar de seguir. Entonces si dejo de seguir de aquí, entonces me preguntó si quiero seguir de nuevo, volvamos Seleccionemos aquí, vamos a comprobar si está actualizado en todas partes y parece que, tiene, sigamos desde aquí. Ahora me pides dejar de seguir y puedes ver en nuestra siguiente lista, la persona está ahí, si entro a la página Explorar también, persona existe Entonces creo que la funcionalidad finalmente está funcionando. Entonces creo que el problema era que estábamos comparando directamente las estructuras, y de alguna manera el valor hash estaba siendo diferente en diferentes casos cuando existe desde diferentes puntos de vista. Entonces ahora lo que hemos hecho es que estamos verificando directamente el ID de usuario, que sigue siendo una fuente de verdad para nosotros porque eso no cambia para ningún usuario en particular. Entonces de ahí que ese problema también se solucione. Lo que podemos hacer ahora es que podamos coincidir de manera segura y eliminar esta es la siguiente propiedad, ya no necesitamos eso. Además, no creo que así estamos usando esto está siguiendo a ninguna parte. Así que vamos a ver esto. Podemos eliminar estas declaraciones impresas. Esto no es necesario. Esto tampoco es necesario. Ahora lo que podemos hacer es que podamos coincidir rápidamente nuestro handle follow y ver qué llamadas de funciones estamos haciendo. Entonces estamos llamando podemos quitar esto de aquí y donde más está. Vamos a eliminarlo de aquí también, dice buscar usuario siguiendo datos Esto está ahí, y lo estamos llamando directamente a updata following y la siguiente matriz Y luego estamos usando nuestro seguimiento de usuario fetch también para aparecer en la página de conexiones Entonces siento que lo que podríamos hacer aquí es que o bien mantenemos cualquiera de las funciones entonces el problema con esta función aquí es que aunque falle, nunca lo sabremos porque es try esperar, así que esta función simplemente se cancelará sola. Y la cosa es que nunca llegaría a saber si conseguimos un error o algo así, entonces necesitamos el siguiente fetchUser Así que volvamos y mantengamos aquí esta funcionalidad porque dentro de nuestra vista de perfil de usuario, creo que estamos haciendo esa llamada a la API para recuperar los datos de seguimiento y seguimiento del usuario Parece estar bien por ahora. Entonces aquí tenemos nuestro feed casero listo, y solo necesitamos hacer estas dinámicas de vistas de publicación para que podamos usar su publicación, como emparejar con la pantalla y todo. Y bien, esta es nuestra siguiente funcionalidad está funcionando. Entonces la aplicación se ve bien por ahora. Y, sí, así que espero ver en el siguiente video, haríamos algunos cambios en la interfaz de usuario dentro también haríamos algunos cambios en la interfaz de usuario dentro de la Configuración Z porque ahora mismo se ve muy mal Y luego podemos avanzar en el curso y hacer algunos o ajustes donde sea que lo necesitemos, o simplemente podríamos avanzar junto con el proceso de limpieza Creo que necesitamos hacer un poco de limpieza en base de código para hacer las cosas un poco más simples Entonces eso es lo que vamos a retomar en los próximos videos. Entonces sí, de nuevo, si tienes alguna duda, podrías simplemente dejarlas abajo en los comentarios. Estaría muy feliz de ayudarle. Gracias. 33. Hacer que la vista posterior sea dinámica: Ahora solo podemos ir y hacer algunos cambios dentro de nuestra vista de configuración. Así que vamos a entrar en nuestra vista de configuración. Y esto sería particularmente fácil. Lo que solo estamos haciendo es que en vez de todos esos rectángulos que tenemos para nuestra etiqueta, básicamente, esta imagen de perfil suluto, ahora podríamos usar un Entonces esta es nuestra forma solo la que definimos, y la estamos usando mucho dentro de nuestro perfil de usuario. Entonces pensé que deberíamos hacer algo similar aquí también. Entonces para mojado, vamos a darle 180 pixeles. Para la altura, vamos a darle 150 pixeles. Entonces, para el color de primer plano, debe tener color de color de interfaz de usuario, y puede tener algo amarillo primario Entonces podemos darle una superposición. Y esta superposición en realidad tendría la propiedad text aquí. Podemos quitar esta cosa de aquí. Ya no lo necesitamos. Esta propiedad de texto tendría un estilo de primer plano de negro Entonces tendría una fuente, que sería una fuente personalizada. Eso debería ser fuentes punto negrita, y el tamaño debe ser de 18 píxeles. Entonces eso está ahí. Entonces podemos tener algún relleno, y luego podemos tener forma de clip. No lo creo, necesitamos una forma de clip aquí, para que podamos quitar eso. Entonces este es nuestro rectángulo terminado. Lo que haríamos es que podamos simplemente copiar esta cosa, eliminar estos espacios extra. Ahora podemos entrar dentro de nuestro botón de seleccionar una foto de perfil porque siento que eso también necesitaría esta cosa. Para que podamos eliminar el texto de aquí. Podemos pegarlo aquí, podemos quitar el estilo de botón personalizado, eliminar este espaciado extra, copiar todo de nuevo. Y para la salida, necesitaríamos esto de nuevo. Podríamos mantener el color diferente. Entonces hagámoslo gris medio o algo así y blanco. Y podemos simplemente quitar la señal de salida de aquí. Entonces en este momento teníamos tres botones, y ahí hemos añadido nuestro rectángulo curvo. Vamos a ver cómo se ve ahora la vista. Y podemos hacer algunos cambios más, básicamente. Entonces estaba pensando que como tenemos una foto de picker de imagen, lo que podemos hacer es que podemos juntar a dos de ellos en una pila de bordes o algo así, y luego podemos tener la tercera tirada por ahí como, ya sabes, en la parte inferior Así que vamos a ver cómo se ve todo. Entonces podemos decidir si necesitamos o no esa característica. Entonces, bien, mientras está construyendo, ¿qué tal si vamos aquí? Agregamos una pila de borde. El stack de Ed nos pediría que necesitamos agregar esto aquí. Nuevamente, nos tiró este error, lo cual es muy raro porque no estoy muy seguro de por qué está sucediendo. Así que vamos a cortar de nuevo la aplicación, pegarla aquí, agregar un poco de espaciador aquí. Vamos a darle a esta pila EDS algún tipo de relleno. Entonces esto está ahí. Volvamos a hacer Command R, en la app y ver si vuelve a suceder o no. Y si vuelve a suceder, breve solo buscaremos el error porque está creando algunos problemas, esto funciona bien ahora. No estoy muy seguro de por qué está ocurriendo ese error. Aquí, tenemos actualizar la imagen de perfil y seleccionar una foto de perfil. Lo que podríamos hacer es que sea demasiado amarillo. Por lo que actualizar la imagen de perfil puede tener amarillo neón, y esta puede tener amarillo máximo. Así que vamos a ir y encargarnos de ello. Y ojalá no arroje el error. Nuevamente, hagamos el Comando K antes de que se construya. Entonces bien, esta carga está bien. Vayamos a la configuración. Ah, esto me parece bien. Ahora lo que podemos hacer es que Bien, amarillo neón y el amarillo máximo son del mismo color, por cierto Entonces este es un nuevo hallazgo. Estoy bastante confundida. ¿Fue así? Así que vamos a seleccionar una foto de perfil y nosotros seleccionamos una foto de perfil. Esto surge así. Realmente no es la mejor manera de demostrarlo. Así que vamos a entrar, um se condición. Lo que podemos hacer es que le podamos dar un ancho de 180. Puedo ejecutarlo de nuevo y ver si se ve mejor. Entonces eso está ahí, y todavía no estoy seguro de eso. Choque que está ocurriendo. Recibo alguna llamada EPI que Fire base está tratando de recuperar a nuestro usuario, y luego sucede. Entonces con ese propósito, en realidad necesitarías verificar aquí en cinco bases, como ¿cómo es el comportamiento del usuario? Entonces eso es una cosa. Siento que el choque va a pasar ahora mismo porque también está tardando demasiado. Entonces no lo hizo, vamos a la configuración. Seleccionemos una foto, por lo que sería supongamos esto. Y se ve mejor que nunca, yo diría actualizar las imágenes de perfil ahí. Así que ahora mismo, sólo podemos regresar. No tengo ganas de probar esa funcionalidad. Ahora lo que tenemos que hacer es que necesitamos hacer nuestro post, sí, adaptable a la, ya sabes, la talla más grande. Básicamente, lo que podemos hacer es que podamos ir a post viewll Ahora la celda de vista posterior en realidad tomaría estos como parámetros. Básicamente, le daríamos de tipo CG float y no les daremos ningún valor, básicamente. Ahora, de acuerdo con la vista post, en realidad tendríamos que cambiar algunas de las propiedades también. Entonces esto es una cosa, y luego tenemos una vista de progreso con ancho y alto. Esto parece estar bien. Entonces dentro del cabello, también pasaríamos en el ancho y la altura. Por lo tanto, no se requiere codificación dura. Entonces no ancho, sino alto esto está ahí. Ahora vamos a ver la duración del fundido y todo sigue igual. Entonces tenemos un texto. Lo que podemos hacer es que dentro de nuestra talla 42, lo que podemos hacer es que podamos tener ancho multiplicado por 0.2. Entonces eso lo convertiría en una dinámica por naturaleza. Entonces, según el ancho, el tamaño de la fuente cambiaría aquí. Esto parece estar bien. Nuevamente necesitamos pasar en el ancho y la altura y no solo valores codificados en duro. Ahora, entremos dentro de este bloque presupuestal. Y el bloque presupuestal esta vez es mucho más corto que los otros textos. Entonces esta vez vamos a multiplicar 0.02. Entonces esto lo haría más o menos factible. Ahora aquí podemos tener ancho multiplicado por punto cero. Tres. Entonces esto está ahí. Ahora lo que podemos hacer es que solo podamos avanzar. Y de manera similar para las calificaciones, creo que ratings es un texto muy pequeño. Entonces lo que podemos hacer es que podamos tener 0.02, o podríamos hacer 0.05 también, y podría hacer el tamaño un poco grande y aquí para todos esos 18 números, lo que podemos hacer es que podamos tener 0.07 Simplemente puedes copiar esta cosa y pegarla donde sea que estemos usando el tamaño de fuente 18. Eso realmente debería hacerlo compatible. Esta fue una de las cosas que tenemos que hacer. Ahora vamos a entrar en nuestra sección de URL. Podemos pegarlo aquí, podemos pegarlo aquí, y aquí otra vez. Ahora sólo estoy comprobando rápidamente. Entonces lo que podemos hacer es que lo que podemos hacer ahora es que para el tamaño de fuente best cafe caption, así tenemos un tamaño de fuente más con el que trabajar. Entonces para ancho, podemos tener estrella 0.03 o algo así. Y aquí tendríamos ancho y alto. Entonces eso está ahí. Ahora pasemos de nuevo en ancho y alto. Ahora lo que podemos hacer es que para esto, tendríamos tiempos de ancho 0.03, y para 12, tendríamos, nuevamente, ancho por 0.03 aquí. Para 22, podríamos tener ancho veces 0.08 o algo así. Entonces eso me parece bien. Y siento que eso fue todo. Realmente no necesitamos cambiar más valores. Y permítanme repasar rápidamente lo que tendríamos que hacer es que necesitaríamos hacer nuestras publicaciones. Vendemos también compatibles. Entonces aquí, lo que podemos hacer. Nuevamente, agregaríamos dos propiedades que estarían con él serían del tipo CG float y esa sería la altura, que sería del tipo CG float. Entonces esto está ahí. Bien, eso tiene sentido. Ahora lo que podemos hacer es que, en lugar de la talla 40, antes que nada, vamos a pasar los valores de ancho y alto. Entonces, estamos comenzando con esto, podemos pasar en el ancho y la altura, que no sería exactamente esto. Creo que para esto, podemos multiplicarlo. Podemos multiplicarlo por 0.35 o 36. Esto está ahí. Como podemos multiplicar los tiempos de altura, um, 0.35, entonces esto está ahí Ahora, puedes volver a reservar esto. Simplemente puedes copiar esta cosa, pegarla aquí, puedes simplemente copiar esta cosa de aquí también y pegarla aquí. Ahora para la talla ocho, podemos pasar en un ancho. Este ancho sería de 0.02. Y nuevamente, hay ocho. Así que pasémoslo ahí y aquí también. De manera similar para aquí, y hay algo de ancho para 80 píxeles. Entonces solo estoy pensando que deberíamos tener ¿podemos hacerlo 0.04? ¿Eso se verá mejor? Estaba pensando. Entonces sí, esto está ahí para el tamaño 80, lo que podemos hacer es que podamos tener el valor de ancho por 0.4, y el valor de altura es un poco más grande, así que podría ser por 0.6. Y de manera similar, podríamos pegar esto aquí también. Entonces de esta manera, depende totalmente del ancho y los valores de alto ancho por 0.04, y podría ser ancho y alto podría ser alto Eso parece estar bien. ¿ Necesitamos cambiar el efecto de rotación en absoluto? Podríamos tener tiempos de ancho 0.3, y podemos tener negativos de altura por 0.25. Bien, esto está ahí. Ahora lo que haríamos es que para la talla, la hemos agregado aquí. Esto me parece bien, el texto presupuestal. Déjame repasar rápidamente todo esto. El texto del presupuesto se ve bien. ¿Qué más queda? Entonces hicimos esa talla 40 que podría ser ancho por 0.2, cinco, así que esto está ahí. ¿Queda algún otro valor ? Realmente no lo creo. Entonces ahora lo que podemos hacer es que solo podamos ejecutar la aplicación una vez y asegurarnos de que Tad esté funcionando bien. Así que vamos rápido. Bien, nos está causando problemas que necesita parámetros de ancho y alto. Esto parece estar bien. Solo pasemos en ancho húmedo, y podemos pasar en altura como altura. Ahora intenta volver a ejecutar la aplicación. Entonces esta vez sucedería es que en la vista de feed home, debería darnos algunos errores, y nos mostró que necesitamos ancho, que sería pantalla de UI. El punto principal de la pantalla limita ancho del punto y le resta 30 puntos Y para la altura, vamos a darle UICreenmin dot bounds dot Lo que podemos hacer es que podamos dividirlo por 3.5 o sólo tres también deberían funcionar. Así que en realidad no, en realidad no capta la pantalla de la interfaz de usuario. Es porque está en UIKit. Entonces esto está ahí. Ahora idealmente debería funcionar. Intentemos volver a ejecutar la aplicación. Oh, espera. Es pantalla. Mi mal. Entonces sí, esto está ahí. Ahora, intentemos volver a ejecutar la aplicación. Debería mostrarnos un error más en esta vista general de perfil de usuario y también en la vista de publicación, creo. Entonces aquí, lo que podemos hacer es que la propiedad width en realidad sería la pantalla de la interfaz de usuario. El punto principal del punto libra el ancho del punto dividido por dos y restando 30 puntos de él Entonces tenemos la propiedad height, que debería ser como 200 pixeles, que funcionaba bien para nosotros. Entonces esto está ahí. Podemos copiar esto, volver a llamarlo y ver si hay algo más ahí. Entonces ahí está nuestra vista de perfil de usuario, que quedó. Ahora intentemos ejecutar la aplicación y veamos si hay algo más ahí. Bien, no lo es. Entonces, vamos a ver ¿cómo sale a ser nuestro punto de vista? Y ojalá se vea bien. Sólo vamos a encargarlo. Y entonces lo que podemos hacer es que podamos simplemente, necesitaríamos hacer una cosa más, básicamente, y eso incluye agregar también un manejador de finalización, esto se ve mucho mejor, diría yo Entonces tiene el post y todo. Está perfectamente equilibrado. Tiene un buen tamaño. Vayamos a la alimentación de casa. Vamos a ver el feed casero. Esto me parece un poco bien. Podría hacerla un poco más larga, también, diría yo. Quiero decir, vamos dentro de nuestro ¿Qué acabo de hacer? ¿Acabo de apagar mi simulador? Bien, eso es interesante. Entonces, ¿puedo simplemente, bien, abrir esto? Sí, eso parece estar bien. Dentro de la alimentación casera, donde tenemos el para cada uno, ¿qué tal si le damos algo de espaciado Y este espaciado sería como diez píxeles. Y aquí también, lo dividiríamos por 2.8. Entonces le damos un poco más de longitud para respirar. De lo contrario, podemos simplemente trabajar con eso también. Me pareció un poco genial solo. Entonces eso está ahí. Vamos a ver rápidamente ¿cómo se ven nuestros cambios en la interfaz de usuario? Así que vamos a entrar en el feed casero y esto me parece bien. Podríamos, bien, así que este post está saliendo por aquí. Tenemos post. Tenemos el post Sushi, y Sí, y luego tenemos el post de la película, y debe haber otras fotos aquí Esto me parece bien. Esto se ve todo bien y bien. Entonces sí, esto está ahí. cuál es la mejor imagen de café aquí. Creo que no hay mejor imagen de café. Este fue nuestro puesto de prueba. Entonces seguiría cargando y nunca cargaríamos. Entonces este es un buen feed para el hogar. Yo diría, podrías mejorarlo. También podrías tener esa misma grilla que tenemos dentro de nuestro perfil de usuario. Eso también me parece bien. Pero entonces de esa manera tendrías que hacer muchas llamadas API y almacenar muchas más publicaciones. Entonces eso podría llegar a ser pesado en tu aplicación hasta y a menos que tengas implementado un buen mecanismo de almacenamiento en caché Y eso podría hacerse usando alguna API de terceros o cualquier otro servicio, pero no nos detendríamos en ello en este momento. Entonces, el almacenamiento en caché es una cosa que podrías estudiar por tu cuenta, te sugiero Y de lo contrario, todo esto funcionaría bien. O bien podrías usar la implementación de UIKit, así de esa manera, lo que puedes hacer es que puedas usar celdas reutilizables y eso se vuelva realmente ligero en tu dispositivo Entonces esa es una forma más sencilla de hacerlo. Entonces ahora lo que haríamos es ese insight crear Post View. En primer lugar, pasemos al modelo de vista principal. Lo que estaba pensando es que solo agreguemos una función. Te voy a mostrar cuál es el tema. Entonces básicamente, seleccionamos una imagen aquí. Supongamos que selecciono esta imagen, escribimos algo, y volvemos. Y ahora cuando volvamos de nuevo, todavía se queda ahí. Entonces esto no es ocioso derecho. ¿Qué tal si acabamos de escribir una función de limpieza? Decimos limpiar, crear vista de publicación. Lo que haría es que crear vista de publicación. Y podemos hacer la P capital. Lo que haría es que usaríamos todas estas propiedades, así que usaremos shift y option. Bien, usaríamos turno y opción, y podemos copiar todos estos valores aquí. Y lo que podemos hacer es que le podamos asignar Nill. Podemos asignar este valor vacío. También podemos asignarle valor vacío. Podemos asignar este valor vacío también. Entonces solo estamos limpiando las propiedades, que es una forma de hacerlo. La otra forma era que podrías crear una estructura mientras estás dentro de la vista de creación de publicaciones, y de esa manera puedes trabajar con estos valores y no necesitas hacerlo Esto está bien. No hace falta hacer eso. No es necesario escribir esta función. Pero yo estoy haciendo eso, así que esto está bien. Lo que podemos hacer es que podemos hacer Control I clean up, crear post view. Vamos a entrar, crear vista de publicación. Lo que sucede es que en un par, básicamente, aquí no tenemos una función on a peer, así que podríamos escribir eso. Vamos a escribir una función en un par, y llamaría vista modelo punto, limpieza post view Y de esa manera simplemente refrescaría los valores. Esto es una cosa que teníamos que hacer. Entonces lo que tenemos que hacer es que dentro de nuestra función, que es subir imagen, subir imagen y crear vista Post, en realidad necesitaríamos agregar un manejador de finalización aquí Entonces hagamos esa terminación, y sería del tipo escapando, y podría tenerlo ya sabes, solo podría tener un valor booleano o algo así Y podría regresar como nulo. Y lo que haríamos ahora es que podamos usar esta finalización de la ortografía es correcta. Bien, entonces ya está aquí la finalización. Y dentro de aquí, estábamos volviendo verdad y todo, pero ahora lo que podemos hacer es que podamos Lo que podemos hacer es que podemos o bien podemos quitar esta funcionalidad de aquí. No lo necesitamos. Tampoco necesitamos un controlador de finalización, y no necesitamos un tipo de retorno booleano No creo que sea necesario en ningún lado. Así que podemos domove esto desde aquí también. Ahora vamos a ver si nos está arrojando algún error, el cuerpo de Gard no debe caer a través. Obviamente, no debe, así que sólo podemos regresar de aquí. Entonces esto está ahí. Vamos a entrar en nuestra vista de creación de publicaciones. Estamos a la espera de esta llamada de función. En el momento en que lo haga, podemos simplemente salir de la vista. Entonces esta sería una buena funcionalidad. Y ojalá sigamos viendo nuestro cuadro de alerta. Así que vamos a ejecutar la app y hacer una publicación y ver si está funcionando o no. Básicamente lo que estamos haciendo aquí es que en el momento en que termine la función upload image y create post, simplemente descartaríamos la vista por nuestra cuenta Pero ahora una cosa a notar es que lo que sucede cuando solo podemos agregar algo como esta imagen. A esto le podemos llamar perros. Realista podría ser cualquier cosa. El presupuesto sería de unos 100 dólares. Entonces la seguridad es cinco, el transporte cinco, limpieza es cinco, la vida nocturna vuelve a cinco. Y podemos seleccionar alguna imagen S. Y para eso, lo que podríamos hacer es eso, Bien, ¿he usado todas mis imágenes? Entonces esta es la nueva. Seleccionemos una imagen más. Seleccionemos de nuevo este Clouds y vamos a llamarlo verde debe llevar las cosas sería chaqueta viva, algo así, hacer un post. Ahora está esperando, e idealmente debería mostrarnos también la caja de alerta. Y en el mismo momento, realidad debería descartarse de la propia visión. Entonces eso es una gran cosa. Bien. Siento que esta es una buena característica. Se podía ver que el botón se ve un poco bien y quiero decir, realidad no tan bien. Entonces lo que podemos hacer aquí es que dentro de nuestro caso de éxito, tengamos éxito de título. Busquemos. Creo que lo tenemos en un solo lugar. Nos vendría bien el color. Podemos tener UI color dot Game Green, así que eso podría hacer que se vea mejor. Entonces sí, esta es nuestra funcionalidad post completada. Ahora tenemos cuatro puestos en total. Siento lo de la um Sí. Esto me queda bien. Entonces podrías agregar un poco más de espaciador aquí, así que esto podría verse mejor. Entonces, nos da algún tipo de error, que dice que no se puede usar, no puede usar una interfaz de usuario coloreada así. Entonces tiene sentido. ¿Qué tal si podemos hacer esto? Podemos agregar un punto de color UI Game Green. Entonces esto debería funcionar así. Ahora dice consecutivo. Vamos a encargarlo. No necesitamos este paréntesis extra Así que vamos a quitar eso. Eso parece estar bien. Entonces las publicaciones se están cargando. Lo que podemos hacer es que podamos ir dentro la vista de perfil de usuario y dentro de la vista de perfil de usuario después de la vista de desplazamiento. Agreguemos aquí también un pequeño espaciador, así que nos dé algo de espacio para respirar. Entonces frame, entonces le damos una altura, y esa altura sería de 70 pixeles. Entonces eso está ahí. Ahora siento que nuestra aplicación está casi cerca de completarse en cuanto a todas las funcionalidades que queremos ahora lo que podemos hacer es que podamos avanzar e implementar en las compras de aplicaciones en nuestra aplicación. Entonces registraremos una aplicación en la App Store Connect, y luego la implementaremos en las compras de aplicaciones. Entonces eso sería una buena cosa que hacer. Y obviamente podrías crear más usuarios y ver cómo salen a ser. Entonces eso es una cosa para verificar por su cuenta. Yo sólo te lo dejaría por ahora. Entonces Acura Pica todavía no tiene una imagen, así que eso es triste Entonces podríamos hacer eso con un nuevo ID que podamos crear. Entonces eso está ahí. Ahora solo podemos cerrar esto. Y en los siguientes videos, realidad aprenderíamos a implementar compras de NA usando la API del kit de Apple Store. Y entonces lo que podemos hacer es que podamos enviar nuestra app para probar vuelo. Así que archivaremos la app y todo, prepararemos capturas de pantalla y todo lo que se necesita para empujar tu app para probar vuelo, trabajaremos en eso. Entonces espero ver en el siguiente video, y obviamente, me aseguraré agregar algunos videos de apoyo para algunos temas que fueron bastante difíciles de entender. Entonces esa es una cosa que también tengo que hacer. Espero que en lo que va del curso, hayas aprendido muchas cosas nuevas. Hemos trabajado con UIKit. Hemos trabajado con Swift UI, controladores de vista de alertas personalizados, formas personalizadas y Swift UI haciendo llamadas API, trabajando con Fire Ways, actualizando solicitudes de get, post request. Entonces la autenticación también está ahí, así que muchas cosas que hemos cubierto en este curso. Así que de nuevo, en realidad me gustaría eso. Simplemente puedes preguntar tus dudas en los comentarios si tienes alguna, y si no lo haces, eso es realmente bueno. Y, bien, entonces espero ver en el siguiente video. Gracias. 34. Agregar compras de aplicaciones a nuestra aplicación: Que hemos completado nuestra solicitud en cuanto a funcionalidad. Lo que podemos hacer ahora es que podamos avanzar y trabajar con compras IAP Entonces lo que pasa con las compras IAP es que se podría pensar en lugares donde podamos agregarlas para el usuario Entonces, básicamente, les pediríamos una pequeña tarifa única y luego pueden desbloquear la función, la aplicación completa de por vida. Esa es la idea detrás agregar la compra IAP para esta aplicación sería Entonces no estoy pensando en ir la ruta de las suscripciones, pero tendríamos solo una compra única. Estaba pensando que los usuarios tienen esta capacidad de hacer un post. Entonces, ¿qué tal si agregamos un muro de pago detrás de él, que podrían hacer cierta cantidad de publicaciones gratis Pero luego después de eso, tienen pagarnos una pequeña cuota para poder desbloquear la aplicación completa. Porque todo el concepto detrás de esta aplicación era que, supongamos que viajas mucho, así podrías publicar muchas cosas informativas para que otros las vean. Y es una especie de, ya sabes, aplicación informativa también. Así que estoy pensando en agregar un muro de pago detrás de la uh, nueva pantalla de publicación, básicamente Entonces, en el momento en que quieran hacer una nueva publicación después de completar un cierto número de publicaciones, no les permitirá, y les mostraría un muro de pago Entonces, bien, ¿qué tal si simplemente vamos a nuestro Github y no obtenemos un navegador vimen Y hay dos pestañas que he abierto. Uno es mi Appstore Connect y el otro es mi cuenta de desarrollador de Apple Entonces básicamente, developer.apple.com. Entonces, lo primero que debes hacer para poder implementar en una compra es que también debes configurarlos desde Abso Connect Entonces, para Abso Connect, en realidad irías a la pantalla de la aplicación Seleccioné tu cuenta. Estas son algunas de las apps que he hecho. Entonces, lo que haría ahora es hacer clic en este ícono más, seleccionaría una nueva aplicación, y desde el ID de paquete, en realidad tendría que elegir el identificador de paquete. He agregado aquí mismo dentro de mi aplicación, que es esta. Entonces ya estaba comprobando esto, pero no lo encontré ahí. Entonces el caso es que si no puedes encontrar ahí tu identificador de paquete, no es un gran problema. Lo que podemos hacer es que podamos registrar nuevo bundle Bundle ID en certificados de identificación y perfiles. Entonces eso es lo que hice aquí, si simplemente hago clic en él. Me lleva a esta pantalla, que es lo mismo si vas dentro de developer.apple.com y vas a developer.apple.com Así que volvamos de aquí. Y como estás usando esto, ahora lo que necesitas hacer es que te aterrice directamente a esta página de registro e ID de aplicación. Y lo que haces ahora es que vuelvas a tu aplicación. Copias tu identificador de paquete, vienes aquí, pegas esto aquí. Ahora en la descripción, se podría decir redes sociales. App. Podríamos agregar cualquier descripción según usted quiera. Ahora, veamos cuáles son las capacidades que tendría nuestra app, y en nuestras compras ya están comprobadas, así que eso es bueno para nosotros. Por lo que ahora sólo podemos continuar con él. Así que vamos a subir, hacer clic en Continuar, y ya podemos registrar esta aplicación. Entonces, registrémonos. Ahora pronto solo se registraría, y debería aparecer en algún lugar de aquí. Para que pudiéramos buscar en las redes sociales. O podríamos buscar a través de nuestro identificador. Entonces, solo busquemos esto. Haga clic en Entrar. ¿Se acerca? Sí, se acerca. Entonces esto está bien para nosotros. Ahora volvemos dentro de las apps de Apple tot connect, luego hacemos clic en más, seleccionamos nueva app, luego dentro de un Bundle Identifique podrías ver tu ID de Bundle siendo mostrado ¿Cuál sería el nombre de la app? Así que esto aparece realmente en la página del producto de tu app. Así que vamos a nombrar esta aplicación de redes sociales de Travel. Podrías nombrarlo cualquier cosa según tu elección. Para el idioma, seleccionaría English UK. Y en el SQ, básicamente, vamos a entrar aquí y ver qué significa SQ. Este es un ID único para tu app que no es visible para los usuarios. Podrías simplemente decir mi primera app o algo o cualquier cosa, lo que quieras. Entonces hacemos esto, y solo podemos tener acceso completo aquí y seleccionaremos la plataforma como IOS. Y ahora solo podemos hacer click en Crear así que solo esperemos a que se cree y pronto veríamos aparecer esta pantalla. Y básicamente, afirma la aplicación de redes sociales Travel. Este es el nombre de nuestra app, y te lleva a esta página dentro de Apps para conectarte. Ya no necesitamos esto, así que sólo podemos sacarlos de aquí. Ahora lo que tenemos que hacer es que realmente necesitamos que tengamos que ir dentro de la sección de compra de NA. Así que vamos a entrar en las compras de NA. Ahí te mostrarían con algo similar, lo que te dice que no tienes una compra en la aplicación en este momento, solo puedes crear una. Entonces este tipo en realidad no sería consumible, lo que significa que persiste Consumible es algo como monedas y todo lo que se puede mostrar dentro de tu app si es un juego o algo así. Entonces eso es una cosa. Para el nombre de referencia, tiene que mostrarse en la página de la Appstore, por lo que podríamos decir desbloquear la aplicación completa, que básicamente significa que después de comprar esta, está permitiendo que el usuario desbloquee todo el potencial de la aplicación para el ID del producto, llamemos la aplicación de redes sociales nog full, que se usaría más adelante Entonces, ¿qué tal si copiamos esta cosa? Simplemente entramos nuestro modelo de vista principal y podemos simplemente pegarlo en la parte superior porque se usaría y luego podemos eliminarlo de aquí más adelante. Entonces, eso es todo. Ahora vamos a hacer clic en Crear ahora, básicamente, te pediría algunas cosas más. Básicamente, se le pide un nombre de referencia que ya hemos agregado. Vamos a configurar la disponibilidad. Entonces seleccionaremos todos los países aquí. Vamos a hacer clic en Listo. Ahora para el calendario de precios, esta aplicación en realidad tendría esta compra de App, que sería, digamos, 299. Vamos a hacer clic en siguiente, y te mostraría ¿cómo aparece en otros países? Esto está bien. Vamos a hacer clic en siguiente, y vamos a hacer clic en Conform. Por lo que también se establece el precio y la disponibilidad. Ahora lo que hay que hacer es que hayamos agregado este horario de precios. Tenemos la categoría fiscal. Vamos a agregar algo de localización. Así que agreguemos Desbloquear la aplicación completa. Esto permite a los usuarios desbloquear T aplicación completa. Entonces necesitamos bien, solo nos quedaban cinco caracteres, así que solo podemos crear aquí. Ahora bien, esto está hecho. Por lo que nos pide darle una imagen que mejor represente a la N una compra. Aparecerá en la página del producto de tu app. Entonces esto es algo opcional. Realmente no hace falta que lo hagas. Pero para el proceso de revisión, en realidad necesitarías hacerlo. Entonces te diré en breve qué se trata el proceso de revisión. Pero ahora mismo para nuestros propósitos de prueba, creo que simplemente podemos hacer clic en Guardar y ya podemos probar esto. Así que puedes hacer clic en Guardar por ahora. Una vez que lo hubieras guardado, solo puedes volver aquí y ojalá aparezca algo aquí. Sí, entonces tiene este nombre de referencia unlock ful app. El ID del producto está aquí. El tipo no es consumible, y esto se crea Ahora lo que tenemos que hacer es que realmente necesitamos usar esto nuevamente, paquete, que usaríamos para mostrar la página de desbloqueo de arte. Entonces básicamente, este paquete es por Swift ful thinking. me gustan mucho sus videos, así que realmente publica videos útiles. Entonces básicamente, puedes simplemente copiar este enlace Ahora lo que podemos hacer es que solo podamos ir aquí y dentro del archivo, tenemos agregar dependencias de paquetes Simplemente puedes pegar esto aquí. Tenemos indicadores de carga completa rápida. Podríamos seleccionar hasta la siguiente versión principal. Vamos a hacer clic en Agregar paquete, y solo comenzaría a buscar el paquete, y luego podemos avanzar en nuestro curso y simplemente hacer las cosas requeridas Básicamente, una de las cosas es que necesitamos ir a la vista principal de la app y en la pila de navegación. ¿Qué tal si solo, um, qué tal si le damos a esto un preferido Vamos a hacer Comando Z. Vamos a darnos un tema de color preferido Entonces básicamente, ¿por qué estoy haciendo esto? Debería llamarse Esquema de Color preferido, mi banda. Estoy manteniendo esta app en todo momento en modo light porque hemos configurado el texto en modo light para toda la aplicación. Algunas personas podrían estar usando el modo oscuro, y puede causarles algunos problemas, y en este momento no estamos admitiendo tanto el modo claro como el modo oscuro. Entonces es por eso que estoy haciendo que se ajuste estrictamente al modo Luz. Entonces, si el usuario tiene habilitado el modo oscuro en su teléfono, seguirían siendo dirigidos al Modo Luz dentro de esta aplicación, y U ya hemos visto que se vería algo así para ellos. Entonces todo esto parece estar bien. Ahora lo que podemos hacer es que podamos agregar un nuevo Campo para nuestro usuario de base de datos, en realidad. Entonces ahora mismo cada usuario tiene estos campos, pero ahora pueden ser un campo is premium, lo que determinaría si el usuario es un activo, lo que determinaría si el usuario es un usuario premium o no, cual es muy requerido lo cual es muy requerido porque está conectado a firebase, así es como almacenaríamos los valores Entonces, entonces tenemos la imagen de la app y todo. Solo vamos al interior del modelo de vista principal, y eso ya lo hemos hecho. Hemos agregado un logotipo e ícono de la aplicación, así que eso parece estar bien. Y deberíamos ir dentro de la función de registro, básicamente. Así que vamos a entrar Regístrate y registrarte nos arrojará un error tan obvio. Y para premium, lo enviaremos a como booleano. Entonces básicamente, si este usuario se crea recién, todos son por defecto usuarios no premium, esto está bien. Ahora lo que haríamos es que podamos solo necesitamos crear un gestor de desbloqueo, en realidad. Y para eso, también necesitaríamos una vista premium para mostrarla a los usuarios. Entonces hay dos cosas que hacer, y luego necesitamos hacer algunos cambios como dentro de nuestra vista Crear publicación también. Por ahora, vamos a entrar en extensiones, básicamente, y hagamos Command porque necesitamos escribir una extensión muy práctica, que sería Kit de tienda más EXT. Yo te lo explicaría ¿por qué estamos haciendo esto? Entonces básicamente, ya sabes, escribimos acabamos de inicializar nuestra compra IAP, que estaba en dólares estadounidenses USD. ¿Y si nuestros usuarios están en otro lugar, supongamos que son indios? Entonces básicamente, se lo mostraría en su propia moneda. Entonces es por eso que para ese propósito, escribiremos una extensión sobre el producto k. Y básicamente, sería simplemente localizado llamemos a este precio localizado, que sería del tipo string. Vamos a abrir esto, y vamos a crear rápidamente un formato. Este formato usaría un formato de número, y vamos a inicializar la clase, entonces tenemos el formato, estilo de número de punto, y debería ser del tipo moneda Entonces podemos tener formateador punto yo es igual al precio de esto, y luego podemos simplemente devolver la cadena de puntos formateador de Y el precio es algún valor que está disponible dentro de nuestra clase de kit de tienda. Entonces por eso estamos haciendo esto y solo podemos forzarlo y envolverlo porque somos algo así como que devolvería un valor. Entonces, bien, esto se hace aquí ahora. Entonces ahora lo que podemos hacer es que podamos crear nuestro gestor de desbloqueo. Entonces estaba pensando que deberíamos crear un todo, otra carpeta aquí y vamos a crear un nuevo grupo. Llamemos a esto pagos ahora dentro de pagos, vamos a crear una nueva clase y sería un archivo veloz. Llamemos a este gestor de desbloqueo. Vamos a hacer clic en Siguiente. El gerente de desbloqueo en realidad sería una clase. Así que vamos a escribir Administrador de desbloqueo. Ahora bien, ¿cuáles son los valores que necesitaría Unlock manager? Necesitamos algunas importaciones como toro. Tendríamos Combine aquí. Tendríamos kit de tienda aquí. Tan genial para ti que también estamos trabajando con Combine también en este curso. Entonces Unlock Manager se ajustaría al objeto tipos S, entonces sería un objeto observable, entonces tendría k pago Observador de transacciones, y también se ajustaría a SK productos solicitar delegado. Entonces estas son las pocas cosas que necesitas agregar dentro del administrador de registros. Ahora, dice que no se ajusta a estos tipos, así que vamos a agregarlos aquí. Este es el ahora comencemos simplemente agregando la función, lo que simplemente significaría que simplemente deberíamos tener la funcionalidad de desbloqueo. Así que vamos a llamarlo funk, desbloquear, desbloquear premium. Entonces esto está ahí. Ahora desbloquear premium tomará un valor es premium, que sería del Ty Boolean Ahora puedes abrir esta clase. Básicamente, vamos a sólo godlet actual o podemos hacer ID de usuario, que sería igual a punto impar t. punto punto actual usuario punto uid, lo contrario, sólo podemos regresar de aquí Esto está bien. Vamos a agregar opcional aquí. Bien. Ahora lo que hacemos es que mostramos un cargador, así que overlay, showoader está ahí Ahora escribimos hab tex helper también. Eso debería ser de pestaña media. Ahora lo que hacemos es que abrimos un objeto tarea y añadimos un bloque de dos y uno de caché. Y básicamente ahora haríamos referencia al DB, que sería Firestore punto Firestore Ahora podemos usar la referencia de usuario aquí. Básicamente, estamos actualizando a nuestro usuario a un cliente premium en caso de que la transacción tenga éxito Entonces para eso es para lo que está toda esta funcionalidad. Y entonces lo que podemos hacer es que pueda usar try esperar usuario referencia datos de actualización de punto, y tomaría en el campo, lo que sería una prima. Y lo convertiría en una prima. Vamos a comprobar rápidamente que en nuestra base de datos de usuario, el nombre también es premium. Entonces esto está bien. Todo esto me parece bien. Dice que no se puede encontrar OT en el alcance. Entonces hagamos Firebase OT. Ahora bien, esto debería funcionar ahora. Dentro de la declaración CAT, básicamente, ahora solo podemos hacer overlayt hide De nuevo, nos dice que no podemos encontrar fuego almacenado en el alcance. Así que vamos a importar fuego almacenado también. Quiero decir, base de fuego. Esto parece estar bien. Firebase Firestore y Firebase Auth Hagamos Firebase Firestore y Firebase Auth también está ahí. Entonces esto está bien. Ahora lo que podemos hacer es que podamos copiar esta superposición aquí también, y podemos imprimir la sentencia en caso de que falle, básicamente, que sería error de actualización, error usuario actualizando usuario es valor premium. No te preocupes por el hecho de que también le mostraríamos al usuario alguna alerta en caso su compra tuviera éxito o no. Eso sería manejado por kit de tienda, así que justo ahora podemos escribir una declaración impresa aquí. Por lo que esta función se completa. Ahora, vamos a ir rápidamente dentro de la solicitud de productos. Entonces aquí, lo que haríamos es que abriéramos una cola de despacho. Esto funcionaría en el hilo principal, así que dispatchqt punto principal c. Ahora lo que haríamos es que almacenaríamos los productos devueltos Los productos son básicamente algo así como los productos que tienes en tu compra IAP Entonces este es un producto. Entonces básicamente, esta funcionalidad, recupera todos los productos nuestra sección de compras IAP dentro de nuestra app así que en caso de que los necesitemos, digamos que ahora necesitamos agregar algunas propiedades dentro de nuestra clase, primer lugar, antes de agregar cualquier otra cosa, lo que podríamos hacer es que podamos venir aquí Podemos agregar una propiedad publicada. Este estado de solicitud W publicado sería en realidad un tipo solicitado solicitado, y ¿qué se solicita? Entonces básicamente, en realidad sería una enumeración, que podría crear dentro de aquí, así que no se arreglaría con ninguna de las otras um, no se arreglaría con ninguna de las Así que solo podrías escribir un EM privado también, creo. Entonces esto está ahí. Ahora podemos agregar la carga de casos, y podemos tener caso cargado, y el caso cargado tendría un error opcional, en realidad. Y entonces tendríamos caso cargado realmente debería tener un producto de escape con él, no un error y caso fallido puede tener un error. Lo cual volveríamos a hacerlo opcional, y luego podemos tener caso comprado, y luego tendríamos un caso diferido Entonces estos son diferentes casos en los que nuestro tipo de producto puede estar apagado, y ahora lo que haríamos es que podamos usar la carga. Entonces esto debería funcionar idealmente ahora. Digamos que la propiedad debe declararse archivo privado. Bien, podemos hacer esto. Archivo privado, si hacemos eso, solo es accesible a lo largo de este. Bien, si es algo así, ¿qué tal si acabamos de cortar esto, pegarlo solo aquí? Porque no quiero declarar privada esta propiedad si nos causa algún problema. Entonces sí, esto está ahí. Ahora lo que podemos hacer es que podamos crear dos constantes o tal vez una constante, que sería request, que sería del tipo escape products request Y entonces tendríamos una variable privada, que serían productos loaate. Que queríamos usar hace un momento, que sería una matriz vacía con producto SK. Así que vamos a ir dentro de la matriz, agregar tipo D, k producto. Esto está ahí. Vamos a abrir cerrar paréntesis para inicializar una matriz vacía . Entonces esto parece estar bien. Ahora lo que podemos hacer es que podamos entrar dentro de nuestra función de solicitud de producto. Cortemos esto de aquí, peguemos esto aquí. Ahora dentro de nuestra función de productos, podríamos hacer productos autocargados con puntos serían iguales a los productos de punto de respuesta. ¿Está ahí? Ahora solo podemos proteger dejar desbloquear, y podemos obtener nuestros productos cargados punto primero porque podría ser un opcional. Y si no existe, podríamos hacer nuestra solicitud Sate y podemos configurarlo para que falle, y debería ser error de tienda y no tenemos un error de tienda tipo en este momento. Estaba pensando eso, ¿también necesitamos eso? Déjame pensarlo un segundo. ¿Necesitamos un error de tienda o podemos trabajar sin él? Entonces básicamente, creo que debería ser error de kit de tienda, no disponible en el frente de tienda. Esto parece estar bien. Entonces, bien, esto está ahí. No tenemos derecho faltante. No tenemos así que no está disponible en el frente de tienda. Esto parece estar bien, y podemos regresar de aquí. En caso de que esté presente, podemos hacer si respuesta. Los identificadores de producto no válidos de punto están vacíos. Podemos igualarlo igualmente a falso. Y solo estamos comprobando que si está vacío es falso, lo que podemos hacer es imprimir un estado de cuenta impreso sería recibido identificadores inválidos. Entonces eso está bien. Si los identificadores de producto no válidos no están vacíos, entonces eso básicamente significa que hemos recibido identificadores inválidos, y entonces también podemos autodidacta solicitar respuesta Estado. Es decir, el estado de solicitud debe ser seleccionado para fallar nuevamente, y esta vez habría almacenado error y sería un error de storekit con inválido Bien, no tiene eso. Así que déjame comprobarlo rápidamente. ¿Necesito hacerlo? Tengo kit de tienda aquí, así que no lo creo así necesito alguno podemos un kit de tienda error punto. Bien, déjame pensarlo. Necesitamos identificadores inválidos, pero no está ahí. Entonces eso es un poco raro. Podríamos o hacer una enumeración aquí con la que trabajamos o simplemente podemos agregar el mismo error aquí también, y podemos encargarnos de esto más adelante, diría yo Entonces solo podemos agregar declaración de retorno aquí. Ahora lo que haríamos es ese estado de solicitud autodidacta en realidad estaría cargado. Y tendría desbloqueo aquí, que es el producto c. Entonces esto está ahí. Ahora en realidad podemos simplemente avanzar y crear un inicializador de nuestra clase Básicamente, este inicializador en realidad tendría pocas propiedades Entonces primero de ellos sería el primero de ellos debería ser E prima debe ser del Ty Boolean Ahora bien, esto está ahí. ¿Qué hacemos todos? Simplemente seleccionamos un ID de producto, y este ID de producto tendría nuestro valor. Así que vamos a entrar en nuestro modelo de vista principal. Vamos a subir, cortar esto, cruzar esto aquí, volver, pegar esto aquí. Y entonces lo que podemos hacer es que podamos crear un array de IDs de producto. Y no una matriz, sino un conjunto porque elimina duplicados. Así que tenemos ID de producto dentro de aquí. Ahora podemos crear solicitud, que debería ser escape de solicitud de producto. Entonces tendríamos identificadores de producto e ID de producto si pasáramos aquí. Ahora podemos hacer superdt en él. Esto está bien. Entonces lo que podemos hacer es que podamos abrir el pago de escape Q, así k pago Q, entonces podemos tener default y podemos agregar nuestras celdas aquí. Entonces esto está ahí. Entonces podemos simplemente card una prima igual igual igual a false, contrario regresamos porque no necesitamos actualizarla para alguien que ya es un usuario desbloqueado. Entonces podemos simplemente agregar request dot delegate equals to self porque estamos conformándonos a esas clases Y entonces podemos hacer request dot Start dentro del inicializador de nuestra propia clase Ahora necesitamos escribir un inicializador D también. Entonces D en ella ¿está mal la ortografía? Sí, está mal. Entonces la D en ella simplemente tendría una Cola de pago SK, y esto debería ser default, dot remove, self. Ya no estamos observando la cola de pagos, y entonces realmente podemos crear nuestro error de tienda num privado, que en realidad usaríamos dentro de nuestra funcionalidad en lugar de usar el error del kit de tienda. Entonces podemos tener identificadores válidos de caso, y podemos tener un caso de producto faltante. Y entonces estos son los dos que necesitamos, así podemos tener error de tienda, producto faltante, y luego podemos tener error de tienda, identificadores inválidos. Entonces esto parece estar bien. También podríamos hacer que nuestro M sea privado aquí funcionaría bien. Entonces este es el gerente de desbloqueo de Estados Unidos no se ajusta al tipo D. Bien, entonces en realidad necesitamos que se ajuste al error de reescritura Eso debería resolver el problema. Entonces esto es ahora solo escribamos algunas funciones que estarían usando que estaríamos usando de nuestro UIN, así que debería haber una función de compra que tomaría un producto como argumento, que sería del tipo producto SK Lo que haríamos es que crearíamos una instancia de pago, así que let payment es igual al pago SK. K el pago toma en un producto, podemos pasar en nuestro producto. Y entonces podemos hacer pago SK, Q dot default, dot AD y podemos agregar el pago aquí, básicamente. Esta sería la funcionalidad B. También contaría con la funcionalidad restaurada. Así que restaurar el pago es algo que cuenta la app si ya has comprado una app y la eliminas de tu teléfono y luego accedes a ella hace algún tiempo, te permiten restaurar tus compras. Entonces para eso está esta funcionalidad. Así que solo puedes restaurar transacción terminada y esto hace el trabajo. Ahora vamos dentro de la función pago Que y aquí volveríamos a abrir un despacho de menta ACC. Después de abrir eso, lo que haríamos es que vamos a lo que podemos hacer es que podamos acceder a la propiedad propia. Ahora podemos tener transacción en transacciones. Podemos cambiar el estado de transacción de punto de transacción. Y creo que debería por sí solo, decirnos que el cambio no es exhaustivo. Así que hemos comprado y también hemos restaurado estado. Entonces, ¿qué tal si los clavo juntos? Esto lo podemos hacer. Podemos tener autodidacta desbloqueo premium es igual a la prima verdadera, ya que en esos casos que una comprada y no la compra. Entonces básicamente, para los casos que se compra o restaura, obviamente, la función premium desbloqueada debe necesitar ejecutarse, y actualizaría nuestra base de datos con ese usuario siendo un usuario premium. Entonces tenemos un estado de solicitud. Entonces donde tengamos estado de solicitud autodidacta, y este estado de solicitud debe marcarse como compra. Entonces eso está bien. Y entonces lo que podemos hacer es que podamos usar la Q, y luego podemos tener transacción terminada y podemos pasar en nuestra transacción aquí. Entonces esto está bien. Ahora necesitamos agregar caso para casos fallidos, que podamos eliminar este código de aquí. Y para casos de fracaso, cortemos esto, péguelo aquí. Esto está bien. Esto está bien. Vamos para casos de falla, comprobaremos si let product es igual a los productos cargados dot primero, abrimos este rizado bridges, estado de solicitud autodidacta, es igual a punto cargado. Y cargado en realidad tomaría un producto, por lo que podría mostrar el producto aquí. lo contrario, lo que podemos hacer es que podemos usar questate de self dot y luego podemos comercializar como fallido porque no encontramos ningún producto Podemos tener error de punto de transacción aquí. Entonces este es el caso donde falla o bien está tratando de cargar los productos para mostrar al usuario, o el estado diferido, podríamos decir solo autodidacta solicitado, igual diferido, y no creo que así tengamos ningún estado de compra que necesitemos definir Entonces lo que podemos hacer es que podamos tener valor por defecto, que sería romper. Entonces, sí, ahí está. Estamos manejando el estado diferido. Estamos manejando en el campo. Además, necesitamos usar realmente Q o transacción terminada con transacción. Entonces esto está ahí. Entonces tenemos un estado fallido, tenemos un estado de compra restaurada, y tenemos un estado diferido y todos los demás estados, solo podemos agregar declaración break Ahora bien, lo que tenemos que hacer es que podamos crear una variable, poder hacer pagos. Y esto tomaría un boleón y este booleano, podemos tener c pago qu punto podemos hacer Vamos a solo aferrarnos a esto y saber qué indica si al usuario se le permite realizar pagos o no. Entonces es por eso que trataríamos de correr para saber si al usuario se le permite realizar los pagos, pero en saber si al usuario se le permite realizar los pagos, realidad no estamos usando este booleano Entonces parece que esto está bien. Dice que la propiedad debe ser declarada privada si solo eliminemos esta privada de aquí. Es decir, ya no se requiere. Esto parece estar bien. Ahora lo que tenemos que hacer es que necesitamos crear una vista de desbloqueo. Entonces lo que podemos hacer es que podamos ir dentro de las vistas o podemos entrar solo en el pago, y hacemos clic aquí, seleccionamos una vista de interfaz de usuario Swift y llamamos a esta vista de desbloqueo. Creamos la vista de desbloqueo, eliminamos el panel de vista previa de aquí. Dentro de aquí, en realidad importaríamos almacenarlo y realmente importaríamos nuestros indicadores de carga, por lo que deberían ser indicadores de carga completa rápida. Esto está aquí. Ahora lo que podemos hacer es que podamos agregar el objeto de entorno para nuestro modo de presentación. Entonces el valor del entorno, quiero decir, y podemos crear un modo de presentación aquí. Ahora, agreguemos el objeto observado, y debería ser nuestro gestor de desbloqueo. Entonces debería ser del tipo unlock manager, y entonces podremos tener otro objeto observado, y este debería ser nuestro modelo de vista principal. Así que ver modelo, déjame arreglar esto rápidamente. Ver modelo, que sería del tipo modelo vista principal, esto está bien. Ahora lo que podemos hacer es que podamos crear una pila Z aquí. Esta pila Z tendría un color de fondo. Este color de fondo esta vez sería rojo gris. Hagamos esta, y podemos presionar Enter. Ahora lo que podemos hacer es que podamos abrir una pila vertical hacia arriba. Dentro de la puñalada vertical, tendríamos una sentencia switch, que debería activar el estado de solicitud de punto del administrador de desbloqueo estado de solicitud de punto del administrador Y básicamente para todos los diferentes estados de solicitud, tendríamos diferentes vistas de UI. Así que solo podemos hacer, arreglar, y podemos volver a hacer Fix. Creo que debería habernos mostrado cs dot cargado y tiene un producto. Entonces hagamos vamos a producto, y deberíamos mostrar una vista de texto por ahora, que diría premium, que debería decir que la vista premium está aquí. Ahora lo que podemos hacer es que podamos tener un punto de caso fallido, y no necesitamos el error aquí en realidad. Podríamos mostrarles algún texto, y podemos mostrarle al usuario que lo siento, hubo un error al cargar la tienda. Por favor, inténtalo de nuevo más tarde en algún momento. Inténtalo de nuevo más tarde en algún momento, quiero decir, ahora solo podemos darle alguna fuente personalizada Así fuentes punto fuentes personalizadas punto negrita, tamaño debería ser como 22, y podemos darle un poco de tinte, que sería color UI color punto juego verde. Entonces esto está ahí. Ahora lo que podemos hacer es que podamos tener los estados de carga carga punto está ahí. Ahora dentro de un estado de carga, tendríamos una pila vertical para mostrar al usuario, y esto tendría nuestro indicador de carga, indicador carga con animación, que usaríamos triángulo de tres bolas. Y luego para el color, básicamente, estamos utilizando esa biblioteca que acabamos de instalar a través de los paquetes, y luego estamos usando su indicador de carga. Nosotros también le podemos proporcionar algún tamaño, creo. Entonces esto está dentro del tamaño grande está ahí. Ahora dentro de la velocidad, mantengamos la normalidad. Entonces sí, esto está ahí. Ahora podemos agregar un texto que debería decir algo así como, ya sabes, debería decir algo así como cargar, y podemos hacer la L mayúscula. Cargando. Esto parece estar bien. Lo que podemos hacer es que simplemente podamos copiar este modificador , pegarlo aquí. Ahora debemos estar teniendo una compra de ks dot, así que ks dot compró. Y para la compra del caso punto, debemos agregar un texto que debe mostrar al usuario que gracias que su compra fue exitosa. Entonces esto está ahí, y podemos pasar en todo el mismo modificador aquí también. Ahora podemos tener un caso enseñado estado diferido. Y básicamente, para ello, podemos volver a agregar un texto, y este texto diría: Gracias. Tu solicitud está pendiente de aprobación, pero puedes continuar usando la aplicación mientras tanto. Entonces esto está ahí. Ahora lo que podemos hacer es que podamos añadir algunos modificadores aquí también. Así que vamos a hacer eso. Ahora, ¿nos queda algún otro caso? También tenemos um ahí está el caso diferido. Lo que creo que sí es que ya no necesitamos un default porque ya hemos usado todos los valores, básicamente. Entonces esto está ahí. Ahora lo que podemos hacer es que después del paréntesis, podamos agregar un botón Este botón tendría una etiqueta de acción, y para la acción, en realidad solo tendríamos despedir, y despedir es una función que necesitamos escribir Entonces solo podemos comentar esto por ahora. Podemos añadir un texto que diga, descartar, y le podemos dar algunas propiedades Así que vamos a copiar esta cosa, pegarla aquí por ahora. Ahora lo que podemos hacer es que después de darle algún tipo de letra, le podamos dar un poco de relleno. Después de eso, podemos darle algún marco. El marco tendría ancho máximo de infinito. Entonces el infinito y luego la alineación debería ser, no necesitamos ningún tipo de alineación, básicamente. Podemos tener un color de fondo. El color de fondo debe ser color. Um, color de la interfaz de usuario. Esto está ahí. Esto debería tener algo como amarillo máximo o algo así, y entonces podemos tener tin dot negro. Entonces este es el tinte. Supongo que funcionaría como un color de primer plano, y el radio de la esquina debería ser como diez píxeles Entonces esto me parece bien. Ahora podemos darle a este botón algún relleno, que sería como relleno horizontal ya que hemos hecho el ancho hasta el infinito, así que eso es necesario. Ahora lo que podemos hacer es que podamos agregar toda esta vista, darle algo de fondo como color. Y debería tener UI color punto gris medio, así que esto está ahí. Ahora podemos hacer sobre el modificador de recepción, básicamente. Debería decir gestor de desbloqueo, punto solicitado básicamente, y hacer de esto un enlace. Ahora hacemos clic en Entrar aquí, así tenemos una propiedad de valor desde aquí. Ahora, si s punto comprado está ahí, Es igual al valor. Nuevamente descartamos la opinión, y por eso tenemos que despedir tanto Entonces, ¿qué tal si cerramos esta funcionalidad después del cuerpo? Podemos simplemente escribir la función despedir aquí y descartar básicamente lo que hace es que permite que nuestro modelo de vista dot fetch los datos del usuario se llamen porque necesitamos actualizar al usuario en caso de que ya sea un usuario premium Para el ID de usuario, podríamos usar viewmodelt database user dot user El usuario opcional y actual debe ser cierto. Y luego tenemos un modo de presentación, punto envuelto valor, punto Esta Señorita. A partir de esto, recuerdo que agregamos esa otra cosa de usuario de base de datos, en la que nunca trabajamos realmente. Así que en realidad podemos quitar eso de ahí también. Entonces sí, esta es la pila Minds Z. Creo que aquí también lo hemos descartado . Entonces esto está ahí. Ahora que hemos creado nuestra vista de desbloqueo, lo que tenemos que hacer es que también necesitamos hacer una vista premium, y también necesitamos mostrar básicamente la vista premium mostraría al usuario que qué está comprando y cuáles son los beneficios de así que eso es una cosa que tenemos que hacer. Y también dentro de nuestra vista Crear publicación, en realidad necesitaríamos hacer algunos cambios. Entonces, ¿qué tal si entramos en pagos?, haga clic en Comando y haga clic en Swift UI y llame a esta vista premium. Entonces esto debe estar ahí. Ahora solo podemos importar Kit de tienda aquí también. Así que vamos a hacer eso rápidamente. Podemos eliminar el panel de vista previa desde aquí. Trabajemos rápidamente con nuestra vista premium. Por lo que debería tener una propiedad que sería producto, y debería ser del tipo k producto. Y vamos a mencionar la ortografía correcta. Esto está ahí. Ahora agreguemos un objeto observado, que sería gestor de desbloqueo. Este debe ser del tipo unlock manager. Esto está ahí ahora dentro de nuestro cuerpo. Vamos a abrir una pila vertical hacia arriba. Dentro de una pila vertical, podemos agregar primero un espaciador. Entonces podemos crear otra pila vertical. Podemos agregar una alineación. Esta alineación sería líder. Y tendríamos algo de espaciamiento aquí. Así que vamos a añadir un poco de espaciado, que sería como diez píxeles. Vamos a abrir esta pila vertical hacia arriba, abrir una pila H aquí. Ahora lo que podemos hacer es que podamos agregar un texto que indicara que el usuario debe probar la aplicación de redes sociales. Completo. Y lo que podemos hacer es que podamos añadir fuente. Esto debería ser personalizado, y debería ser fuentes punto negrita. Entonces eso está ahí. Para la talla, debe ser de 25. Bien. Y para el color de primer plano, básicamente estilo de primer plano, debería ser blanco. Hagámoslo blanco. Entonces esto está ahí. Entonces podemos agregar un texto que diría, um, premium. Entonces básicamente, podemos eliminar esto y debería tener premium, y entonces tendría algo como esto. Debería ser fuentes negrita, fkgrowd color blanco, y 35. Pruebas en compras de aplicaciones: Entonces ahora lo que haríamos es que probaríamos nuestra compra IAP Entonces para hacerlo, estaríamos usando una cuenta sandbox Entonces una cuenta sandbox es una cuenta para probar la aplicación para todas esas compras y todo Entonces solo tienes que ir dentro Sandbox y ahí podrás ver cuentas de prueba Ya había agregado dos cuentas aquí. Lo que podrías hacer es hacer clic en más y luego agregar el nombre y el apellido, luego el correo electrónico, y luego puedes agregar la contraseña y país y región, que puedas ver en qué moneda quieres para que puedas ver en qué moneda quieres que se muestre tu En una compra, haces clic en Crear, y se agrega aquí así. Entonces lo que ahora podemos hacer es que podamos entrar dentro de nuestra pantalla principal. Aquí, estoy duplando mi iPhone, para puedas ver que dentro tu sección de configuración dentro de Appstore, tendrías este campo de cuenta sandbox Y en caso de que no estés registrado con un usuario que haya iniciado sesión con un usuario, en realidad podrías agregarlo aquí. He agregado mi usuario de sandbox aquí. Entonces ahora lo que podemos hacer es que solo podamos comenzar a ejecutar la aplicación, y esta vez simplemente crearemos un usuario completamente nuevo y luego usaremos a esa persona. Entonces ahora mismo dentro de mi teléfono, está construyendo. Entonces, solo esperemos a que se complete. Y estaba pensando que tal le doy a mi usuario acido, mi emulador me acaba de dar un segundo. Sí, está ahí. Entonces, ¿ qué tal si arrastre y suelte esto aquí? No funciona. Bien. Hacemos clic aquí, hacemos clic en Compartir. Nos da opciones para copiar foto. ¿Qué tal si lo pego aquí? ¿No pega o algo así? No, no lo hace. ¿Qué tal si comparto este usuario de alguna manera? Entonces estaba pensando que usaría esta foto, pero no necesito hacer todo esto. Así que simplemente salimos de aquí. Dice que Mobil slat show se ha estrellado, lo que significa, ¿significa que mi app se No, no lo ha hecho, así que eso parece estar bien. Ahora lo que podemos hacer es que podamos agregar YUVO en el regmil.com, podemos agregar el nombre de usuario de UOS y luego podemos agregar una contraseña aquí, que nuevamente sería contraseña, hacemos un registro, y luego se crearía la cuenta Esto es UVo. Ahora lo que haríamos es que entraríamos dentro New Post y seleccionaremos una imagen de héroe y dentro de la imagen de Hero, volvería a tener esto. A esto le llamaremos hogar. Entonces podremos tener nueva URL. Además, noté que no he agregado ningún campo para post URL para que podamos hacer. Podemos sumar rupias, y podemos tener algunas calificaciones como cinco, cinco, cinco y cinco Entonces podemos tener una imagen de café que sería esto sólo. Seleccionemos Star Wars. Entonces podemos tener una imagen de estancia que puede ser esta cosa. Entonces, ahora llamemos a esta cerveza de mango. Esto parece estar bien. Ahora podemos dar click en Volver y hay que llevar cosas en caso de que pudieras ver que en realidad tiene algún hueco aquí, así podemos agregar algún espaciador para que funcione. Pero ahora mismo sólo puedo descartarlo y ver. Entonces podemos agregar un poco más de espaciador aquí para que pueda saltar todo el camino hacia arriba. Así que eso nos facilita las cosas. Ahora estamos haciendo nuestro primer post como usuario. Entonces, idealmente, solo debería funcionar. Vamos a ver qué pasa. Entonces básicamente, está cargando y está cargando. Ojalá, solo nos muestre la vista de éxito, y dice, Upload post' successful. Vamos a hacer clic en. Bien, mi teléfono está en luna oscura ahora mismo, en realidad. ¿Qué pasa si creo un nuevo post? Entonces, solo seleccionemos al Sr. Aw. Vamos a llamarlo segundo. Tengámoslo así. Presupuesto debería ser como 80 vamos a dar las lecturas como dos, dos, dos, y dos. Deberíamos seleccionar una imagen de café. Estamos seleccionando las mismas imágenes una y otra vez. Candy debería estar aquí, selectimage, esta cosa de laptop aleatoria, llama a esta Después hacemos clic en Cualquier Lugar para despedir. Entonces decimos que hay que llevar cosas. Hacemos clic en cualquier lugar para descartar. Vamos a hacer clic en Ad Post, y nos da esta pantalla de desbloqueo. Dice, prueba la aplicación de redes sociales premium, nos da el logotipo de nuestra aplicación. Nos dice el precio, que es 299 para un desbloqueo de por vida. Dice obtener acceso para hacer publicaciones ilimitadas, actualizaciones semanales, conectar con gente nueva. Muchas más características premium. Lo que podemos hacer es que sí tiene escritura aquí también, lo cual es raro. Lo que podemos hacer es que solo podamos buscar por qué viene. Así que vista premium y vamos a ver sólo dónde he añadido esta cosa. Así que en realidad no necesitamos esto. No sé por qué hemos agregado eso. Así que volvamos. Se iría después de esto. Podemos dar click en Descartar y descarta cosas. Podemos dar click en Ad Post, y podemos dar click en Desbloquear, y si hacemos clic en Desbloquear, solo nos preguntará, este es un cargo único. Esto solo con fines de prueba, no se le cobrará por esta confirmación de esta compra. Tienes una cuenta sandbox al momento de la compra, y te pide que inicies sesión con tu usuario de sandbox Entonces no recuerdo muy bien mi sandbox, usa una contraseña. Entonces, ¿qué tal si lo busco rápidamente? Así que sólo dame un segundo. Simplemente lo revisaré rápidamente y veré cuál es mi sandbox, contraseña de usuario Entonces ojalá, debería ser, bien, entonces es una contraseña realmente extraña. Debe es que es una contraseña realmente estúpida, por cierto. No tengo, esto es raro. ¿Qué tal? Simplemente podemos cruzar esto y no estamos obteniendo la opción de pegar. Sólo dame un segundo al respecto. Realmente no quiero estropearlo, así que déjame ir rápidamente aquí. Déjame repasar rápidamente las contraseñas y averiguar la contraseña de la cuenta de sandbox Lo acabo de encontrar. Vamos a copiar esto. Volvamos a nuestra pantalla. Y básicamente, volvamos aquí. Ahora, hacemos clic en Desbloquear. Entonces otra vez, nos está pidiendo que compremos. Vamos a hacer clic en la compra. Ingresamos la contraseña. Hacemos clic en iniciar sesión. Ojalá , firme nuestro usuario en. Entonces, sí, eso está hecho, y entonces solo debería descartarse en el momento en que ese estado solicitado consigue eso Sí, y está sucediendo Entonces creo que ahora si hacemos clic en Add Post, solo debería hacer el post. Sí, está haciendo eso. Por lo que ahora somos un usuario premium. Y comprobaríamos esto también cuando entráramos dentro de Firebase Así que vamos a ver rápidamente si está publicando o no. Publiqué, y finalmente tenemos nuestro segundo post también. Entonces ves que la funcionalidad de compra de IAP está funcionando. Vamos dentro de nuestra Firebase. Vamos a refrescar esta cosa. Así que idealmente deberíamos ver a un nuevo usuario. Y además, te das cuenta de una cosa más que bien, así que hemos ido que solo tiene ID de usuario, nombre de usuario y todo. Entonces tenemos a este usuario UVo que tiene una propiedad premium que se establece en true ahora Entonces sí, ahora que tenemos nuestros usuarios. Son usuarios normales, y luego son usuarios premium, y cualquier otro usuario nuevo que crearíamos en realidad tenemos las propiedades premium establecidas como caídas. Entonces ahí tienes. Hemos probado nuestra aplicación con éxito. Tenemos la página Explorar y todo, y esto funciona bien. Entonces ahora lo que podemos hacer es que solo podemos tomar buenas capturas de pantalla de nuestra aplicación, y luego podemos prepararnos para publicar esta aplicación para probar vuelo, empujar Ds para probar vuelo. Entonces necesitamos llenar algunos detalles por los que te voy a explicar. Eso es muy sencillo, en realidad así que vamos a ponernos en marcha. Y en el siguiente video, vamos a trabajar en torno a eso. Entonces espero que entendieras todo el proceso y como verlo en el siguiente video. Gracias. 36. Publicación en AppStore: Así que este video te guiará a través de algunas de las cosas básicas que hago mientras envío mi app a Test flight por primera vez o directamente a la App Store. Así que vamos a entrar en App Store. Ahí dentro de las aplicaciones. Tendrías tu app en la lista. Vamos a brillar aquí. Ahora bien, hay algunas cosas que debes hacer para someterlo al vuelo de prueba o distribución. Básicamente, como ya hemos agregado una aplicación como esta, lo que podemos hacer es que solo podamos archivarla seleccionando tu propio dispositivo, o podrías seleccionar el dispositivo AIS 64, y luego puedes archivarlo, y en realidad te preguntaría si quieres empujarlo para probar vuelo. Entonces ese es un proceso bastante sencillo. Entonces solo para mostrarte, yo haría eso. Así que solo tienes que hacer clic en Archivar y luego toma unos segundos, y está archivando toda la aplicación. En tanto, sé que había pocos cambios por hacer dentro de la app. La primera fue que necesitábamos algún espaciador adicional al lado la vista de creación de publicaciones pero ese es el único en el que se me ocurre ahora mismo. Obviamente hay algunas limpiezas que podrías hacer, pero no creo que para el propósito comprensivo, eso sea como un bloqueador para ti para poder lanzar tu primera versión de vuelo de prueba, porque aún podrías seguir desarrollando y haciendo cambios, aunque tu app esté en vuelo de prueba, así también conoces errores, y al mismo tiempo, estás haciendo mejoras laterales. Solo vamos a esta pantalla, y ahí ves que te está pidiendo previsualizaciones y capturas de pantalla. Entonces, básicamente, si hubieras seleccionado que tu app también sea compatible con iPad, tendrías que proporcionar capturas de pantalla del iPad. Aparte de eso, solo puedes proporcionar capturas de pantalla de iPhone, y ahí te darían algunas dimensiones. Entonces lo que pasa es que cada vez que tomas algunas capturas de pantalla, como yo he tomado aquí, lo que pasa es que estas capturas de pantalla Bien, entonces lo que pasa es que estas capturas de pantalla tienen su propia dimensión. Entonces esto no es realmente viable con las dimensiones que se enumeran aquí abajo. Lo que suelo hacer es que busco un redimensionador de imagen personalizado Y por lo general hay sitios web que te permiten hacer eso. Así que podrías simplemente cambiar el tamaño de tu imagen en línea. Te piden que subas, y luego puedes agregar ancho y alto. Para que puedas personalizar tus imágenes a ese sitio específico que necesita app stone. Entonces lo que pasa es que añades el texto promocional. El texto promocional es básicamente el texto. Solo busquemos una de mis aplicaciones para que, um, ojalá la encontremos. Entonces creo que esta es nuestra app solamente. Y supongo, um, Apple nos está redirigiendo también. Sí, bien. Entonces ya ves eso Oh, cancela esto. Ya ves que aquí está pasando algún texto promocional. Este es un texto promocional que agregas aquí. Después hay alguna descripción. Entonces básicamente, eso también va ahí. Después hay un Watts New, que solo ocurre cuando publicas nuevas versiones. Luego está la política de privacidad de la aplicación. Podrías simplemente ir aquí y agregar eso. Básicamente, es pedir política de privacidad URL para II utilizar este práctico sitio web card.co. Básicamente, te permite crear un sitio web gratuito. Si estás en el plan gratuito, creo que puedes crear cinco o seis sitios web que también tendrían su nombre de dominio. Para que puedas anotar todo el contenido de privacidad relacionado con tu aplicación. Y en caso de que no estés recopilando nada tan importante, podrías simplemente escribir que esta app no recoge ningún dato tan importante ni nada, todos los derechos reservados. Y entonces podrías pegar ese correo electrónico, el enlace del sitio web aquí. Entonces simplemente puedes hacer click en Comenzar y hacerte algunas preguntas, recolección de datos y todo. ¿Usted o sus socios externos recopilan datos de esta aplicación? No, nosotros no. Podemos dar click en Guardar. Y esto hace eso. Y para la política de privacidad ya te lo conté, hay calificaciones y reseñas, que básicamente no creo así que necesitas configurar nada aquí porque es solo que sí, realmente no necesitas. Entonces entras dentro de la revisión de la aplicación. Puedes ir dentro de la información de la aplicación. Entonces hay una sección de subtiles, subtítulo. Para que puedas escribir subtítulo así. Aparece aquí. Entonces esto está ahí, luego agregas la categoría. Y lenguaje primario, derecho de contenido. Entonces básicamente, no contiene ningún contenido de terceros ni algo así. Básicamente, todos los usuarios de la app solo lo hacen. Contamos con criterios de clasificación por edad selectos. Tu app está completamente libre de cualquier violencia o cualquier cosa, por lo que solo puedes seleccionar ninguna en todos los casos. Y básicamente, es un proceso un poco, pero es bastante sencillo de entender, para ser muy honesto. ¿Tu app contiene acceso web sin restricciones? No, no lo hace. ¿Tu app contiene instancias de juego? No, no lo hace. ¿Tu app contiene cajas de botín comprables? No, nosotros no. Así que solo podemos hacer clic en Siguiente, y no aplicable para app es perfecto. Esta app no está hecha para niños, y esta app no está hecha por solo 17 plus. Cualquiera puede usar esta aplicación, por lo que simplemente puede hacer clic en no aplicable y la clasificación por edad se convierte en cuatro más, y luego simplemente podemos hacer clic en hecho. ¿Y cuál es esta calificación BR? No estoy muy seguro al respecto. Creo que es algo nuevo que he añadido. Luego está la documentación de cifrado de aplicaciones. Por lo que puedes subir documentación antes de presentar una factura en caso de que estés usando algún tipo de cifrado de alto nivel que esté ahí. Tenemos aplicaciones por lo que las notificaciones del servidor y esas cosas. No hace falta realmente poner otra cosa. Si tu app requiere pruebas de compras de NA, lo que tendrías que hacer es ir dentro de las compras de NAP. Simplemente puede hacer clic en Cancelar por ahora. Haga clic en Guardar aquí. Una vez que se guarda, solo vamos precios y disponibilidad. Agregamos los precios de la aplicación, y nuestros precios de aplicación son realmente gratuitos, y tenemos una compra en la aplicación. Entonces, para el precio, lo mantendrías gratis por supuesto. Vamos a hacer clic en Conform. Esto está ahí. Vamos a configurar la disponibilidad. Así que nuestra aplicación está disponible en todos los países y regiones. Simplemente hagamos clic en Siguiente y todo. No necesitamos preocuparnos eso y solo podemos pasar por todos ellos. Esto está bien. Y entonces sólo podemos regresar. Ahora puedes seleccionar la categoría fiscal, y esta ya está seleccionada porque una vez que tengas una cuenta de Appso Connect, solo puedes entrar en tu negocio y simplemente configurar tu cuenta bancaria en todos los detalles Por lo que existe el modo de distribución de aplicaciones, que es público y ofrece un precio reducido en apps, gerente de escuela o compras por volumen. Sí, podrías tomarlo o no puedes tomarlo dependiendo de tu caso. Ahora para compras en app, realidad, cuando enviarás tu propia app, así que volvamos aquí y veas que nuestra app de redes sociales está terminada, hacemos clic en Distribuir app. Entonces, por cierto, esta versión y este número de factura es algo que se está mostrando aquí. Entonces depende completamente de ti si quieres tu versión mínima de IOS sea 17.2 Podrías usar API más bajas para admitir dispositivos más antiguos. Después en la versión, se puede agregar desvío y el número de factura y esas cosas aparecen aquí En la categoría app, podrías simplemente escribir cualquier cosa, vamos a seleccionar algo. Es redes sociales. Así que incluso en la app así tienes la opción de seleccionar la categoría, así que no me he subrayado en eso. Sólo veamos si tenemos una categoría. Sí, lo hacemos. Entonces básicamente, podrías hacer eso aquí y podemos agregar gráficos y diseño o algo así. Entonces esto es ahí donde los derechos de contenido ahí. No contiene ni muestra contenido de terceros. Entonces esto está ahí. Ahora lo que podemos hacer es volver atrás. Podemos dar click en Distribuir App. Entonces dice Vuelo de prueba y App store. Entonces, una vez que haces clic en Distribuir, simplemente prepara la app. Y dependiendo del tamaño de la aplicación, en realidad solo funcionaría. Y como la nuestra es una app muy pequeña, difícilmente debería llevarnos ni un minuto archivarla y enviarla a Test Flight. Entonces te mostraré lo que pasa una vez que hagas eso. Porque como nuestra aplicación está vinculada con el Abso Connect por su identificador de paquete, una vez que archivamos esta aplicación y la enviamos al vuelo de prueba, en realidad se carga aquí Por lo que se vuelve mucho más fácil para nosotros luego simplemente enviar la aplicación para su revisión. Y de lo que estaba hablando es que dentro de las compras de NAP, simplemente hagamos clic en Guardar por ahora. Dentro de las compras de IA, en realidad tenemos esto en la compra de la aplicación que necesita ser aprobada y enviada para su aprobación al mismo tiempo que se envía su primera versión de la aplicación para su aprobación. Entonces para esta cosa, se ve el estado no dice solicitado o en revisión. Dice que faltan metadatos. Entonces hay que decir en revisión, que sabrías que en realidad se está revisando. Entonces para eso, también podrías agregar una imagen, si recuerdas, mientras estábamos haciendo la compra, vimos una caja vacía para la compra. Entonces eso no es relevante, correcto. Entonces para la captura de pantalla, te dan las dimensiones y todo si solo vas a aprender más. Creo que te dicen que cuál debería ser el tamaño y todo, así que debería ser un JPG o un PNG con una dimensión de 1,000 por 24 y el DPI es 72. Bien. Entonces necesitas subir un archivo aquí. Podrías agregar algunas notas de revisión que hacen esta compra IAP y cuáles son sus usos. Entonces esto es una cosa. Ahora bien, lo que podemos hacer es que solo podamos regresar, y esto es todo. Y si solo venimos aquí, dice, Está subido. Vamos a hacer clic en Listo. ¿Qué tal vamos a ir a probar el vuelo y ver por nosotros mismos si está subido o no Verá dice que está en estado de procesamiento. Entonces, dependiendo del tamaño de la aplicación, rara vez toma de cinco a 10 minutos o una aplicación más grande o incluso un minuto más o menos para una aplicación más pequeña, y luego estaría lista para probar el vuelo de prueba. Entonces lo que hay que hacer es que podamos crear probadores, y en los probadores internos, podemos nombrar a los usuarios internos del grupo Puede hacer clic en Entrar. Habilitamos la distribución automática. Ahora lo que hacemos es que entremos aquí, y nos pediría agregar gente al grupo El , básicamente. Entonces ahí están las construcciones y ahí están los probadores. Entonces básicamente, puedes agregar personas a las que ya has agregado y todo. Simplemente puedes darles sus de usuarios y acceso, puedes agregar personas. Y entonces también lo que puedes hacer es que les puedas dar ciertos permisos. Entonces eso es una cosa. Ahora, volvamos a entrar en el vuelo de prueba y veamos si nuestra app está lista o no. Entonces notarías que nuestra app debería estar ya cargada porque acabo de recibir un correo dentro de mi iPhone a través de Apple Mail, y dice que le falta compilar adentro, dice documento de encriptación de la aplicación. No utilizamos ninguno de estos algoritmos específicos, por lo que solo tienes que hacer clic en Siguiente. También hubo un atajo para no hacerlo manualmente cada vez que compone de un archivo que es algo que hay que agregar un cierto key insider info punto plist file Entonces esa es una cosa que podrías buscar. Creo que lo puedes encontrar fácilmente. Entonces ahí está, amigos. Así es como puedes crear una aplicación de redes sociales completa con el uso de Swift UI, UIKit, haciendo cajas de Milot personalizadas, haciendo formas personalizadas, usando Firebase, como el back end, post, update, get Implementado en compras de aplicaciones, probamos nuestras compras IAP Luego también subimos nuestra app para probar el vuelo, cual puede ser probada por nuestros usuarios internos. Y luego si has hecho tanto, si solo vas dentro de la distribución, lo que pasa es que después subir todas las cosas requeridas, puedes simplemente agregar tu build aquí, que aparecería aquí mismo y haces clic en Siguiente. Y esto también, supongo, actualiza con el también puedo por lo que recuerdo, así que esto está ahí. Vamos a hacer clic en Cancelar. Entonces no puedes simplemente agregar para revisión porque faltan campos que necesitas agregar. Y después de hacer eso, puede enviarlo para su revisión. Y recuerda que necesitas agregar la imagen también dentro en compras de app para que también puedas enviarla para revisión al mismo tiempo. La aplicación se envía a la revisión, lo hace automáticamente. Entonces lo que pasa es que entonces ambos serán revisados y, supongo, aprobados aproximadamente al mismo tiempo, y se vuelve realmente fácil para ti entonces simplemente agregar compras posteriores en app y todo, y las versiones posteriores no tardan más de un día. Pero si haces una actualización importante, supongamos que esta es una versión, esta es una actualización de parche, esto se llamaría actualización menor, y esto se llamaría una actualización mayor. Entonces, creo que solo las actualizaciones importantes tardan más tiempo, y las actualizaciones menores y de parche se revisan muy rápido. Entonces eso es una cosa. simplemente cambiar el número de factura y hacer un nuevo lanzamiento. Eso también funciona bien. Entonces estas son las cosas en las que debes pensar. Nuevamente, si tienes alguna duda, alguna duda, simplemente puedes dejarlas abajo en los comentarios. Sé que la app no es perfecta. Eso lo sé. Pero entonces todavía has aprendido muchas cosas, y luego puedes implementar esas cosas, caminar por ahí, buscar cosas. Puedes leer algunos libros o algunos artículos y todo, y puedes hacer tus mejoras dentro de la app acuerdo a lo que creas que debería ser correcto. Y ahí tienes. Tienes tu propia aplicación de redes sociales. Podrías usarlo para tu cartera. Comienza tu propia Apple. Podrías simplemente lanzar tu propia aplicación en Appstore y tener listas las funciones, y sabes qué? Si tienes una buena idea, en realidad podrías hacerla genial en el negocio de las aplicaciones y todo. Entonces eso es completamente posibilidad. Y además, como sabes tanto sobre el desarrollo de aplicaciones, acabas de trabajar con llamadas APA y todo. Has trabajado con grupos despachadores, hap tech feedbacks. Has trabajado en la creación de IU personalizada. Hemos trabajado con la navegación y usted acaba de manejar muchas cosas, fincas de usuarios y todo. Así que también podrías usarlo como tu aplicación de portafolio. Creo que has hecho compras en app y también todo lo disponible. Entonces eso es algo realmente grande, y la gente realmente busca estas cualidades dentro de un desarrollador del IRS. Así que podrías lanzar dentro de tu currículum y todo bajo tu sección de portafolio también, en lugar de ti si quieres, podrías simplemente publicar esto en Github, como tu propia aplicación personal. Y me encantaría ver tus versiones de la app, como ¿cómo has hecho qué cambios hiciste en tu propia app personal? Cuáles fueron las cosas que pensabas de agregar en lugar de mi propia app personal. Entonces eso sería genial si compartes conmigo esas todas las cosas. Entonces espero espero que hayas aprendido mucho en este curso, y de hecho sí puse mucho esfuerzo en hacer este curso. Entonces me encantaría que pudieras dejar una buena calificación abajo abajo. Esto realmente ayudaría a que mi curso suba de nivel en la lista de búsqueda y en todo. Un comentario generoso sería de mucha ayuda. Y en caso de que sintieras que, um, había algunas cosas que no entendiste. Yo estaría muy, muy feliz de ayudarte. Y también, estaba pensando que seguiría actualizando el curso junto con algunas cosas más nuevas que pienso, que podrían ser necesarias en las próximas sesiones, ya sabes, quiero decir, podría haber algunos temas que pudiera definir a fondo. Entonces eso es en lo que estoy pensando. Entonces sí, ellos son amigos. Ahora que has aprendido tanto, estaría muy feliz si acabas de publicar sobre, um, esta cosa en tus redes sociales y todo, sería muy útil para mí, también. Así que gracias por tomar este curso. Te agradezco mucho. Que tengas un buen día. Adiós.