Configuración de Post con Imagen en Firebase

Clase 36 de 52 • Curso de Desarrollo de Apps para iOS

Resumen

¿Cómo agregar imágenes a tus publicaciones?

Sumergirse en el mundo del desarrollo de aplicaciones implica desafíos y emocionantes avances. Uno de ellos es lograr que tu aplicación sea interactiva y visualmente atractiva, integrando funciones como la posibilidad de subir y mostrar imágenes. Si alguna vez has deseado añadir imágenes a las publicaciones de tu app, este tutorial te guiará con autoridad y confianza a través de un ejemplo práctico, ¡así que prepárate para llevar tus habilidades al siguiente nivel!

¿Cómo configurar el método save post para incluir imágenes?

Después de haber subido exitosamente tu imagen a Firebase, y obtenido un enlace de descarga, es momento de modificar el método save post para que ahora integre esta URL de la imagen:

Modificar método save post:
- Asegúrate de que tu método reciba un imageURL de tipo string.
- Usa este imageURL en el request del post para incluir la imagen.

func savePost(imageURL: String) {
    // Inserta la lógica de añadir la imagen aquí
}

Subir de imagen antes de guardar el post:
- Configura el método para subir la foto a Firebase.
- Luego, guarda la constante downloadURL que obtiene el enlace de descarga de la imagen.
- Llama a save post utilizando downloadURL como el nuevo parámetro.

¿Cómo mostrar correctamente la imagen en la interfaz?

Con la lógica de back-end en su lugar, ahora es crucial asegurarse de que la imagen se renderice adecuadamente en la interfaz del usuario. Esto implica ajustar el comportamiento de las vistas y diseño en tu aplicación.

Hacer visible la vista de la imagen cuando esté presente:
- En tu celda post, ajusta para que tweetImageView.isHidden sea false. Esto asegura que la imagen no esté oculta cuando efectivamente existe.
Ajuste de escala para la imagen:
- Cambia la propiedad de escala de la imagen a aspect fill, lo que optimiza cómo se muestra la imagen dentro de la vista.

¿Cómo realizar pruebas para asegurar el funcionamiento?

Un paso crítico para cualquier desarrollador es verificar que sus cambios funcionan como se espera. A continuación, te dejo una guía para probar la nueva funcionalidad:

Iniciar la aplicación en modo de prueba:
- Ya sea en un dispositivo real o un simulador, verifica que el login y las funcionalidades previas funcionen.
Publicar un nuevo tweet con foto:
- Desde la interfaz, abre la cámara, toma una selfie y sube la imagen junto con un texto.
- Confirma que tanto la imagen como el texto aparezcan correctamente en tu aplicación.

¿Cómo implementar un reto adicional?

Para los que deseen un desafío extra, considera optimizar el diseño de la celda de post:

Ocultar botón 'ver vídeo' cuando no haya imagen:
- Ajusta la lógica para esconder elementos que no son necesarios cuando no se asocia una foto al post. Esto dará continuidad y consistencia al diseño.

Este ejercicio no solo consolidará tus conocimientos, sino que refinando estos detalles lograrás que tu aplicación brille aún más. Y recuerda, la perseverancia es clave: cada paso adelante es una victoria. Aprender a implementar estas características puede parecer complejo al principio, pero, ¡con práctica, lo lograrás! Nos vemos en la próxima lección.

Adan Israel García Reséndiz

student•

Aquí mi aporte en clases pasas el profe nos enseña a borrar un tweet pero nunca nos enseña a borrarlo de Firebase aquí el código..

if postRow.hasImage {
                    // 3. delete image to storage firebase
                    // create storage reference
                    let storageReference = Storage.storage().reference()
                    
                    //Get file name
                    let fileNameString: String = (postRow.imageUrl as NSString).lastPathComponent
                    print(fileNameString)
                    let fileNameArray = fileNameString.split(separator: "?")
                    let fileName = fileNameArray[0]
                    print(fileName.replacingOccurrences(of: "%2F", with: "/"))
                    // Create a reference to the file to delete
                    let desertRef = storageReference.child(String(fileName.replacingOccurrences(of: "%2F", with: "/")))
                    
                    // Delete the file
                    desertRef.delete { error in
                        if let error = error {
                            // Uh-oh, an error occurred!
                            print("Uh-oh, an error occurred!")
                            print(error)
                            NotificationBanner(title: "Uh-oh, an error occurred!", subtitle: error.localizedDescription, style: .danger).show()
                        } else {
                            // File deleted successfully
                        }
                    }
                }

Yael Manuel Flores Cornejo

student•

Reto cumplido 😄

Cristian Alejandro Velasco Cernas

student•

Funciona sin problemas