El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Swift 3: Integración con tecnologías backend

Subir imágenes a la nube

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Con una foto o una imagen que tengamos en nuestro proyecto, vamos a poder subirla a nuestro servidor a través de un servicio muy simple y con una petición multipart dentro de nuestro servidor de aplicaciones. Veamos cómo hacerlo de un modo realmente.

Transcripción

Ya que podemos subir los datos al servidor y descargar también la lista de usuarios, lo que haremos ahora será enviar una imagen a nuestro servidor. Formas y métodos hay muchísimos. Podrías serializarlo, utilizarlo en un "counterpart" o enviarlo como si fuera un JSON con base 64. La técnica que utilices dependerá de los requerimientos del "back end" la cantidad de imágenes, y lo estable que sea tu conexión a internet. Para esto, necesitaremos modificar nuestro "back end" para soportar la captura de imágenes. En nuestro caso, tengo en "Sublime", mi proyecto de "Ruby on Rails". Este proyecto de "Ruby on Rails", ya tiene en "Gemfile" una gema muy útil que uso mucho, llamada "paperclip". Esta gema nos permite agregar a nuestras respuestas una propiedad por la que se pega un archivo; este archivo puede ser una imagen. Por tanto, lo estoy utilizando con esto. En los demás proyectos no los agregué porque cada uno utiliza librerías para manejar eso de forma diferente. Como estoy utilizando "Ruby on Rails" en mi servidor, utilizo esta gema para pegarle los archivos a nuestros elementos. Levanto mi servidor, de manera normal como siempre, y algo muy importante es que "Alamofire" tiene un proyecto paralelo llamado "AlamofireImage". Si aqui —imprimo el contenido del "podfile". Aquí está la línea, donde indico que me traigo también "AlamofireImage." Esta biblioteca descarga imágenes en un segundo plano y cuando están llenas, las coloca en el "UIView" correspondiente. También sirve para poner imágenes de "preloading" o si quieres descargar un conjunto de imágenes más grande lo puedes hacer con esta biblioteca; en realidad es una extensión de Alamofire. Recuerda que al agregar "pods", tienes que hacer "pod install" para que pueda descargar todas las dependencias y volver a instalar todas tus bibliotecas. Ya tenemos esto, lo siguiente que hacemos es averiguar dónde están los "pods" en nuestro proyecto. Aquí está el código fuente de "AlamofireImage." En nuestro proyecto, lo que hacemos es identificar qué es lo que hemos cambiado o lo que necesitamos modificar para que esto funcione. Primero, necesitamos crear un método de instancia, donde a un usuario le pueda agregar una imagen. Coloco este servicio dentro de "User Service". Aquí está el método que hace ese trabajo. Básicamente, hay un elemento que se llama "Update Image". "Update image" recibe un "UIImage", pero de dónde traigas la magen puede variar porque puedes traerla del carrete, de la cámara, de otros servicios, o de un archivo en local. Cuando acabe, mandaré llamar un bloque que me devuelva el mismo usuario. Después necesito definir los "headers". Aquí a diferencia de las peticiones en JSON, le tengo que decir que éste contenido es "multipart"; esto es porque estoy haciendo una subida en formato "multipart", pero podría ser de otro tipo. Lo más importante es que este formato con el que estoy subiendo las imágenes es el óptimo. También podríamos subirlo en formato JSON y convertir todos los datos de nuestra imagen en base 64 para subirlo; sería otra opción. Pero en este caso, para subir múltiples imágenes esta es la óptima. ¿Qué es lo que necesitamos? Necesitamos que de la imagen podamos traer un objeto "DRA", donde haya convertido la representación de este "UIImage" en un PNG. Después, genero un "request" a la URL que le esté pasando, donde le asigno el ID del usuario. Este ID no lo teníamos, lo definí en la clase de "User". Aquí está el número, donde guardo los ID de manera local. Ya que se está enviando al usuario en específico con el método "patch" le agrego los "headers". Por último, "AlamofireUpload" toma el método "MultipartFormData" y le adjuntamos la imagen con el formato necesario. Este es el formato que necesita "Rails" para tomarlo como si fuera un objeto de "User". Después le agrega el nombre del archivo y le decimos cuál es su "mime type". Cuando esto acabe de subir, nos trae de vuelta dentro de este bloque, si lo hemos hecho bien. Una vez hecho esto, serializamos la respuesta. ¿Recuerdas que le dijimos que podemos aceptar JSON? La respuesta de este servicio me devuelve un JSON. ¿Cuál es el JSON? Es el mismo objeto de "User", la única diferencia es que ahora me devuelve una llave, "Avatar", y esta llave es en realidad una URL o un "pad", donde está mi imagen. Esta imagen puedo colocarla dentro de mi tabla. ¿Cómo funciona? Muy sencillo. Tenemos dentro de nuestra tabla del "Table View Controller" un conjunto de elementos, donde puedo agregar una imagen. Cuando presione esta imagen subirá un archivo que tengo en los "Assets". Este: "profile". ¿Cómo lo hace? En el "Table View Controller" cada vez que alguien presione una celda, voy a la imagen "profile" y la paso a "updateImage". Eso es todo lo que hacemos. Cuando volvamos a cargar la aplicación, veremos que cada uno de los elementos que tenemos traen ya una imagen. Arranco la aplicación. Escribo aquí el nombre de usuario, de algún usuario que ya conozca. Me paso a "amigos", y si te fijas aquí ya tengo dos con imagen. Le asigno la imagen de "profile" a Daniel. Si hago clic en Daniel, fijate cómo aquí atrás se ejecuta la petición con la imagen. Ya está, aunque ahora para verla necesito cerrar la aplicación, porque cuando la esté generando, la URL todavía no está disponible, así que, la siguiente vez que lance la aplicación, podré verla. Listo. Ahora Daniel tiene una imagen. ¿Qué pasa si doy "tap" a Francisco? Lo que hará es cambiarle la imagen porque el método HTTP es "patch". Si hago un "scroll" hacia arriba, como las celdas se están reciclando, vuelve a generar la celda y puede actualizar la imagen. En este caso, el objeto de Francisco ya tiene la nueva dirección. Así es como subimos imágenes a un servidor. Es un poco tedioso porque necesitas cambiar los "headers", —son formatos diferentes en realidad— pero esta es la manera de subirlos. Lo importante es distribuir la responsabilidad de estos elementos en diferentes archivos para ocuparlos en diferentes clases. Por último, cada vez que una celda se ejecuta es muy importante que identifiques en "Friend's Table View Controller" que cuando la celda se está pintando, estás trayendo la URL con el "local host". En concreto, si le devuelves solo el pad como en nuestro caso de "Avatar", le tengo que agregar el formato de "local host" para que haga la petición completa. Un ejemplo, me paso a mi cliente en "Postman" y lo que hago, aqui, en los "headers", es mandarle un archivo que se llama "swift load". Si lo mando, aquí me devuelve la petición. Este es el nuevo campo que guardo en mi instancia de "User", pero si te fijas no dice "local host" ni tampoco dice "puerto 3000", lo tengo que agregar la siguiente vez que necesite hacer esa petición. Lo importante es que puedas generar todos estos elementos dentro de tu "back end" para conectarlos con tus servicios en el cliente de IUS. Te sugiero revisar la documentación de Alamofire y usarla tanto como puedas, ya que hay animaciones y "progress bar" para cada una de las imágenes. La cuestión es que entres y leas cada una de las opciones que tiene disponibles en el sitio de GitHub.

Swift 3: Integración con tecnologías backend

Aprende a vincular tus aplicaciones web creadas con Swift 3 con el servidor, comienza a enviar información entre ambos y aprovecha esto al máximo dentro de tus sistemas.

3:08 horas (27 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.