Subida de Videos a Firebase e Integración en Posts de iOS

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

Resumen

¿Cómo subir videos a Firebase desde una aplicación iOS?

Integrar la funcionalidad de subir videos a Firebase desde una aplicación iOS puede mejorar significativamente la experiencia del usuario, permitiéndole añadir contenido multimedia a sus publicaciones. Este proceso no solo implica capturar y previsualizar videos, sino también hacer un manejo eficiente de la interfaz y el backend. Vamos a entrar en detalle sobre cómo puedes hacerlo.

¿Cómo mejorar la interfaz para la previsualización de videos?

Lo primero es hacer modificaciones en la interfaz para permitir la previsualización del video antes de subirlo. Esto asegura que el usuario esté conforme con el contenido que va a publicar.

Agregar un botón de previsualización: En la pantalla de creación de un nuevo tweet, se añade un botón visual para ver el video antes de subirlo.

let videoButton = UIButton()
videoButton.setTitle("Ver Video", for: .normal)
videoButton.tintColor = UIColor.green
// código adicional para configurar el botón...

Conectar el botón al código: A través del assistant en Xcode, conecta la acción del botón al controlador correspondiente, asegurando que el video solo se muestre cuando esté disponible.

@IBAction func openPreviewAction() {
    guard let currentVideoURL = currentVideoURL else { return }
    // código para abrir el video
}

¿Cómo subir un video a Firebase?

Subir un video a Firebase implica varias etapas, desde la validación hasta la conversión del contenido y el uso de la API de Firebase Storage.

Validación y conversión: Asegúrate de que el video exista y conviértelo a un formato adecuado para el almacenamiento.

guard let videoData = try? Data(contentsOf: currentVideoURL) else { return }
// Continuar con la subida

Configurar y subir a Firebase: Usa Firebase Storage para configurar metadatos y subir el contenido.

let metadata = StorageMetadata()
metadata.contentType = "video/mp4"
storageRef.putData(videoData, metadata: metadata) { (metadata, error) in
    if let error = error {
        print("Error al subir: \(error.localizedDescription)")
    } else {
        // Obtener URL de descarga del video
    }
}

¿Cómo permitir al usuario elegir entre foto y video?

Para hacer la aplicación más interactiva, puedes ofrecer al usuario la opción de elegir entre capturar una foto o un video. Esto se logra mediante la implementación de un UIAlertController.

Crear el UIAlertController: Un alert sheet permite al usuario seleccionar su preferencia cómodamente.

let alert = UIAlertController(title: "Cámara", message: "Selecciona una opción", preferredStyle: .actionSheet)
alert.addAction(UIAlertAction(title: "Foto", style: .default) { _ in
    // código para abrir la cámara
})
alert.addAction(UIAlertAction(title: "Video", style: .default) { _ in
    // código para abrir la cámara de video
})
alert.addAction(UIAlertAction(title: "Cancelar", style: .destructive, handler: nil))
present(alert, animated: true, completion: nil)

¿Cómo manejar errores y mensajes de éxito?

Finalmente, el manejo de errores y la notificación al usuario sobre el éxito del proceso son cruciales para una buena experiencia de usuario. Asegúrate siempre de validar que no hay errores y de proporcionar feedback al usuario cuando el video se haya subido exitosamente.

if let error = error {
    print("Error: \(error.localizedDescription)")
    // Mostrar alerta al usuario sobre el error
} else {
    print("Video subido exitosamente")
    // Mostrar mensaje de éxito al usuario
}

¡Genial! Ahora estás bien encaminado para integrar de manera efectiva los videos en tus aplicaciones iOS usando Firebase. Sigue practicando y perfeccionando tus habilidades para convertirte en un experto en el desarrollo de aplicaciones móviles.

Marcos Avila Rodriguez

student•

Para validar ambas fuentes de contenido estoy realizando esto:

var fileData: Data = Data()
        
        if let currentVideoSavedURL = currentVideoURL,
            let videoData: Data = try? Data(contentsOf: currentVideoSavedURL)
        {
            fileData = videoData
            
        }else if let imageSaved = previewImageView.image,
            let imageSavedData: Data = imageSaved.jpegData(compressionQuality: 0.1)
        {
            fileData = imageSavedData
        }

¿Es posible realizar el "unwrapping" con guard en el mismo metodo? Me refiero a que estmos usando el bloque else para salir del "flujo", pero en este caso, quiero continuar si el valor del video es nulo para validar el valor de la foto.

Tomás Agustín Lagomarsino

student•

Puede ser que para subir la app al iPhone se deba pagar la cuenta de Apple ID? conseguí un iPhone prestado que no tiene mi Apple ID y no hubo forma de cargarle la app, pero en el simulador sigue funcionando correctamente, quitando la cámara y video.

David Avendaño Casanova

student•

Así me quedó la función del reto:

private func uploadMedia(isCameraSource: Bool){

        // Make sure the media file exists
        guard let mediaData: Data =
                isCameraSource ?
                previewImage.image?.jpegData(compressionQuality: 0.1) :
                try? Data(contentsOf: currentVideoUrl!)
        else {
            return
        }

        SVProgressHUD.show()
        
        // Config to save media
        let metaDataConfig = StorageMetadata()

        
        // Specify content type
        metaDataConfig.contentType = isCameraSource ? "image/jpg" : "video/MP4"
        
        // Reference to storage
        let storage = Storage.storage()

        // Name the media file
        let fileName = Int.random(in: 100...1000)
        
        // Reference to bucket in Storage
        let bucketRef = storage.reference(withPath: isCameraSource ? "tweets-photos/\(fileName).jpg" : "tweets-videos/\(fileName).mp4")
        
        DispatchQueue.global(qos: .background).async {
            bucketRef.putData(mediaData, metadata: metaDataConfig) { (metadata: StorageMetadata?, error: Error?) in
              
                print("Is camera source: \(isCameraSource)")
                DispatchQueue.main.async {
                    SVProgressHUD.dismiss()
                    
                    if let error = error{
                        NotificationBanner(title: "Error",
                                           subtitle: error.localizedDescription,
                                           style: .warning).show()
                        return
                    }
                    bucketRef.downloadURL { (url: URL?,error: Error?) in
                        let downloadUrl = url?.absoluteString ?? ""
                        self.savePost(imageUrl: isCameraSource ? downloadUrl : nil, videoUrl: isCameraSource ? nil : downloadUrl)
                    }
                }
            }
            
           
            
        }
    }

Pedro Alejandro Rodríguez García

student•

Realicé de esta forma el reto

private func uploadMediaToFirebase(thereIsVideo:Bool, thereIsImage:Bool){
        
        if !thereIsVideo && thereIsImage{
            guard let currentVideoSavedUrl = currentVideoUrl,
                  let videoData:Data = try? Data(contentsOf: currentVideoSavedUrl) else {
                return
            }
            
            
            SVProgressHUD.show()
            
            let metadataConfig = StorageMetadata()
            
            metadataConfig.contentType = "video/mp4"
            
            let storageFirebase = Storage.storage()
            
            let videoName = Int.random(in: 100...1000)
            
            let folderReference = storageFirebase.reference(withPath: "videos-from-tweets/\(videoName).mp4")
            
            DispatchQueue.global(qos: .background).async {
                folderReference.putData(videoData, metadata: metadataConfig) { (metadata: StorageMetadata?, error: Error?) in
                    
                    
                    DispatchQueue.main.async {
                       
                        SVProgressHUD.dismiss()
                        if let errorFromFirebase = error{
                            NotificationBanner(title: "Error",
                                               subtitle: "\(errorFromFirebase.localizedDescription)",
                                               style: .danger).show()
                            return
                        }
                        
                       
                        folderReference.downloadURL { (url: URL?, error: Error?) in
                            let downloadUrl = url?.absoluteString ?? ""
                            self.savePost(imageURL: nil, videoURL: downloadUrl)
                        }
                    }
                }
            }
        }
        
        else if !thereIsImage && thereIsVideo{
            
            guard let imageSaved = previewImageView.image,
                  let imageSavedData:Data = imageSaved.jpegData(compressionQuality: 0.1) else {
                return
            }
            
            
            SVProgressHUD.show()
            
            let metadataConfig = StorageMetadata()
            
            metadataConfig.contentType = "image/jpg"
            
            let storageFirebase = Storage.storage()
            
            let imageName = Int.random(in: 100...1000)
            
            let folderReference = storageFirebase.reference(withPath: "phtos-from-tweets/\(imageName).jpg")
            
            DispatchQueue.global(qos: .background).async {
                folderReference.putData(imageSavedData, metadata: metadataConfig) { (metadata: StorageMetadata?, error: Error?) in
                    
                    DispatchQueue.main.async {
                       
                        SVProgressHUD.dismiss()
                        if let errorFromFirebase = error{
                            NotificationBanner(title: "Error",
                                               subtitle: "\(errorFromFirebase.localizedDescription)",
                                               style: .danger).show()
                            return
                        }
                        
                        folderReference.downloadURL { (url: URL?, error: Error?) in
                            let downloadUrl = url?.absoluteString ?? ""
                            self.savePost(imageURL: downloadUrl, videoURL: nil)
                        }
                    }
                }
            }
            
        }
        else{
            savePost(imageURL: nil, videoURL: nil)
        }
      
    }

Oscar Perez Martinez

student•

Así quedó mi función del reto

    private func uploadMediaFileFirebase(postText: String, imageSaved: UIImage?, currentVideoURL: URL?) {

        var fileData: Data? = nil
        var contentType: String? = nil
        let fileName = Int.random(in: 100...10000)
        var filePath: String? = nil
        var isVideo: Bool = false

        //Case when is an image
        if let imageSaved = imageSaved, let imageSavedData = imageSaved.jpegData(compressionQuality: 0.1) {
            fileData = imageSavedData
            contentType = &quot;image/jpg&quot;
            filePath = &quot;tweets/\(fileName).jpg&quot;
        }

        //Case when is a video
        else if let currentVideoURL = currentVideoURL, let videoData: Data = try? Data(contentsOf: currentVideoURL) {
            fileData = videoData
            contentType = &quot;video/mp4&quot;
            filePath = &quot;video-tweets/\(fileName).mp4&quot;
            isVideo = true
        }

        guard let newFileData = fileData, let newFilePath = filePath else {
                return
        }

        SVProgressHUD.show()
        let metadataConfig = StorageMetadata()
        metadataConfig.contentType = contentType
        let storage = Storage.storage()
        let folderReference = storage.reference(withPath: newFilePath)
        DispatchQueue.global(qos: .background).async {
            folderReference.putData(newFileData, metadata: metadataConfig) { (metadata: StorageMetadata?, error: Error?) in
                if let error = error {
                    NotificationBanner(title: &quot;Error&quot;, subtitle: error.localizedDescription, style: .warning).show()
                    return
                }
                folderReference.downloadURL { (url: URL?, error: Error?) in
                    SVProgressHUD.dismiss()
                    let finalUrl = url?.absoluteString ?? &quot;&quot;
                    self.savePost(postText: postText, imageUrl: isVideo ? nil : finalUrl, videoUrl: isVideo ? finalUrl : nil )
                }
            }
        }
    }