Como ver películas desde el iPad almacenadas en Dropbox

Quizás puede que suene un poco rebuscado el titulo, pero les confieso que no es mentira,  hace pocos días las circunstancias me llevaron a buscar una manera de poder visualizar unos videos desde Dropbox.

¿Por qué Dropbox?

Un buen amigo mío necesitaba ver unos vídeos que yo tenia, los cuales eran archivos de gran tamaño (entre los 200 y 700 MB), pero el solo contaba con el iPad, es decir no contaba con su computadora para sincronizar los archivos con iTunes, por lo cual solo contábamos con Internet como medio para poder transferir los archivos, ya que estábamos ubicados en localidades distintas, fue así como se me ocurrió la idea de usar Dropbox, subiendo yo los vídeos a una carpeta y posteriormente compartirla con él.

¿y ahora que?

Ahora tenia que buscar una App (video player) donde pudiera acceder a una cuenta Dropbox y poder ver los vídeos. Buscando en la App Store halle 2 aplicaciones gratuitas que cumplían con el requisito (acceder a Dropbox), estas fueron: «VLC for iOS» (nueva versión) y «playable». Así que me dispuse a descargarlas y probarlas.

VLC

Yo antes que nada debo confesarle que soy un amante de VLC, tanto de las versiones para iOS como para Mac OS X, esta nueva versión de VLC funciona de forma «espectacular», pude acceder y descargar los vídeos desde Dropbox sin ningún problemas y posteriormente verlos sin ningún problema (archivos .mkv).

  

playable

Nunca antes había oído hablar de esta app, su look & feel esta muy al estilo de lo que veremos en iOS7, al igual que VLC pude acceder, descargar y posteriormente visualizar los vídeos sin ningún problema, el único inconveniente o pega que puedo mencionar es que la versión gratuita, en la parte inferior muestra un mensaje «Upgrade!» para actualizar a la versión de pago y si resulta algo incomodo.

 

A la final como ustedes han de suponer nosotros optamos por VLC ya que aunque ambas aplicaciones son fáciles de usar y proporcionan las mismas características, la versión gratuita de la aplicación playable nos muestra la ventana para actualizar la cual resulta incomoda al ver los vídeos, mientras que VLC siendo gratuita no nos muestra nada y va de maravilla.

Mi primera aplicación en iOS

Desde hace poco tiempo a causa de un nuevo proyecto al que fui asignado me toco empezar a buscar información para desarrollar en iOS, aunque únicamente consistió en una prueba de concepto y viabilidad del proyecto, empece por comprarme un libro y empezar a leerlo en la medida en la que el trabajo me lo permite, ahora quiero compartir con ustedes lo poco que hasta ahora he aprendido, que insisto es poco, pero me esta gustando bastante, no solo el framework (Cocoa Touch) sino también el entorno de trabajo (Xcode).

Intentare guiarles de la manera mas clara posible en la creación de una versión del hola mundo en Xcode para iOS.

Empezaremos ejecutando Xcode y seleccionando la opción de crear un nuevo proyecto. Inmediatamente después debemos seleccionar una plantilla (template), en la parte superior izquierda seleccionamos la opción Application en la sección iOS, seguido seleccionamos en el panel derecho la opción Single View Application y pulsamos el botón Next.

 Luego tenemos que rellenar el nombre del proyecto, el dispositivo para el que se elabora la App con los datos de la siguiente gráfica.

De los valores ingresados una muy breve descripción:

Product name: Nombre de la aplicación

Class Prefix: Prefijo dado a las clases para evitar conflictos de nombre.

Una vez realizados los pasos anteriores, Xcode nos habrá generado un conjunto de archivos, desplegar la carpeta de nombre HelloWorld para poder visualizarlos, entre ellos podrán ver un fichero de nombre BIDViewController.xib. Al seleccionarlo observarán como en el editor aparece lo que será la interfaz gráfica sin ningún componente.

En el panel inferior derecha del Xcode se encuentra ubicada la biblioteca de componentes, de allí arrastraremos a la interfaz los componentes necesarios para poder construir una GUI parecida a la imagen.

Empezaremos arrastrando una etiqueta (label) y la ubicaremos en la parte superior izquierda veremos como el editor tiene una especie de asistente que nos ayudara a la ubicación mostrando unas lineas azules para marcarnos los bordes, el centrado, alineación con otros componentes, etc. Una vez ubicada la etiqueta hacemos doble click en el componente y editamos el valor de la etiqueta y escribimos «Nombre:».

Seguido ahora arrastraremos un campo de texto (text field) y luego ajustaremos su longitud alargando el campo por los bordes y de igual manera apoyandonos de estas lineas azules que nos indican cuando estamos en el limite de los bordes de la pantalla.

Por ultimo arrastramos un botón y lo ubicamos centrado en la parte inferior. Hacemos doble clic en el botón y le asignamos el texto «Saludar».

Terminado el diseño de la GUI vamos a aprovechar alguna de las ventajas del IDE (Xcode) que de forma transparente realizando unos sencillos pasos nos generara el código necesario para nuestra aplicación.

  1. Ir al menu yView->Assistant Editor->Show Assistant Editor, podremos ver como la vista donde editábamos la GUI se ha dividido en 2.
  2. Hacemos clic en el campo de texto y pulsando la tecla ctrl lo arrastramos hacia el lado derecho donde se esta el código y soltar antes del @end. Nos aparecerá una pequeña ventana y deberemos rellenar los valores como lo indica la siguiente imagen. Al terminar presionar el botón connect.
    agregando outlet
  3. Seguido realizamos el mismo paso pero con el botón «Saludar» y rellenamos lo datos de la ventana con los datos que aparecen en la siguiente imagen.
    agregamos action

 

Ya casi hemos terminado con la interfaz gráfica (como pueden ver uso de forma intercambiable GUI e interfaz gráfica) pero antes deberemos seleccionar el archivo BIDViewController.m (veremos como en el editor principal se carga el archivo). Agregaremos un método y editaríamos otro antes del @end, como aparece en la siguiente imagen. Siendo más explícito editaremos el action saludar que Xcode nos ha dejado ya el esqueleto del método (lo hizo justo cuando arrastramos el botón saludar al lado derecho del código y nos apareció la ventana a la que le ingresamos información) y agregaremos el action textFieldDoneEditing.

metodos action

El primer action (saludar) que hemos editado será el que llevará a cabo la funcionalidad cuando pulsemos el botón saludar (que aunque no conozcamos el lenguaje podemos interpretar que es lo que hace). La funcionalidad consistirá en arrojar una alerta (especie de ventana modal) concatenando la cadena «Hola » el contenido que hayamos ingresado en el campo de texto. El segundo action (textFieldDoneEditing) sencillamente hace que se oculte el teclado al pulsar enter, sino agregamos este método y lo enlazamos con la vista al poner el cursor sobre el campo de texto aparecería el teclado y este no se ocultaría.

Seleccionamos de nuevo el archivo BIDViewController.xib, luego en el editor en la parte izquierda veremos 3 iconos, File’s Owner,  First Responder y View, seleccionamos la vista (View) y luego presionamos las teclas cmd+alt+6 y en la parte derecha de nuestra ventana se mostrara el connections inspector. Seleccionamos el botón «Saludar», nos aparecerán todos los eventos del botón debajo del titulo Send Event, luego seleccionamos el circulo correspondiente al evento Touch Up Inside y lo conectamos (arrastrando) al File’s Owner, nos deberá aparecer el método saludar y lo seleccionamos.

Para terminar seleccionamos el campo de texto y aun mostrandose el panel connections inspector (en caso que no este repetimos los pasos para que aparezca) seleccionamos el circulo correspondiente al evento Did End On Exit y lo conectamos con el File’s Owner y seleccionamos el action textFieldDoneEditing e inmediatamente después guardamos (cmd+s).

Finalmente ya hemos terminado, ahora de haber podido seguir todos las indicaciones antes señaladas en el post podremos ejecutar nuestra primera App para Iphone, que esperas!!! vamos a probarla, pulsemos cmd+r.

simulador iphone

¿Qué tal? yo si les soy sincero a mi lo que me asombro la primera vez fue el entorno, es muy amigable ya desearía yo que algún editor Java me generara un código legible y de forma tan sencilla para generar y darle funcionalidad a una GUI, se que a mucho les gusta quizás el modo mas largo, codificando todo y así ya luego al usar estos asistentes saber donde, cuando y como se genera el código, pero bueno mi intención en un principio es hacer un Hola Mundo, Hola Pedro u Hola María que se desarrollase de forma sencilla, rápida y así tener un primer acercamiento con esta tecnología. Espero que les haya parecido interesante, ¿conoces algún recurso que quieras compartir con nosotros?, a que esperas, la información es poder, compartela y así todos podemos beneficiarnos.