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.

 

 

 

Primeros pasos con maven Parte I

Desde su nacimiento Maven ha ido consolidando y a su vez aumentando su posición como herramienta de gestión y construcción de software en lenguaje Java, poco a poco quitandole terreno a otra famosa herramienta presente en el mercado desde hace mas tiempo que de seguro mucho de ustedes la habran oido mencionar Apache Ant.

A continuación les dejo unas graficas sacadas con el software de estadistica de google donde se puede observar como ha ido incrementandose el interes de Maven con respecto a Ant en distintas categorias

 

estadísticas de Ant vs Maven en la categoria de Programación estadísticas de Ant vs Maven en la categoria Herramientas de desarrollo
estadísticas de Ant vs Maven en la categoría Lenguaje de programación Java estadísticas del crecimiento de las búsquedas de Ant y Maven vs  la categoria Lenguaje de programación Java
estadísticas de las búsquedas de Ant vs Maven en la categoría Software

Además es cuestión de revisar ofertas de trabajo para ver como cada vez piden mas el conocer Maven como requisito indispensable o como poco un requisito deseado a poseer por parte del candidato. Dada esta introducción quiero compartir con ustedes lo poco que se y he aprendido de maven con la finalidad de que pueda serles de utilidad o al menos como incentivo a aprender mas de esta poderosa herramienta.

Instalación

Debemos ir al sitio web de Maven y descargar los binarios, como vamos a ir haciendo cosas sencillas les recomiendo que empecemos con la versión 3 para ir familiarizandonos con las novedades de esta nueva versión (según he leido goza de mejoras de productividad, errores, además de escribir el fichero POM en otros lenguajes no XML como groovy, ruby, scala entre otros).

NOTA: Antes de realizar los siguientes pasos de la instalación, asumimos que ya de antemano existe la variable JAVA_HOME apuntando a la ruta donde tenemos instalado nuestra versión de Java y que a su vez los binarios de Java ya han sido añadidos al PATH del sistema.

Usuarios Windows XP

  1. Una vez descargado el software, descomprimirlo en la carpeta de preferencia, por ejemplo para usuarios windows podria ser la ruta C:\Archivos de programa\apache-maven,
  2. Creamos las variables de entorno en panel de control->Sistema->Opciones avanzadas->variables de entorno. Alli crearemos 2 nuevas variables del sistema. La primera será M2_HOME su valor será la ruta (path) donde hallamos instalado maven p.e. C:\Archivos de programa\apache-maven\apache-maven-3.0.4. La segunda variable será M2 y su valor será %M2_HOME%\bin.
  3. Editamos la variable del sistema PATH, y agregamos al final del contenido del valor de la variable PATH, el valor de la variable M2, de la siguiente manera:valor_variable_path;%M2%.
  4. Probamos que los pasos anteriores se han efectuado correctamente, Por linea de comandos (inicio->ejecutar: cmd.exe) tecleamos mvn -version y deberá aparecer la información de maven, como por ejemplo la versión java, la versión maven, la ruta de instalación, etc.

Usuarios Linux/Mac Os X

  1. Una vez descargado maven, lo extraemos en nuestro lugar de preferencia, pero podriamos utilizar la ruta /usr/local/apache-maven.
  2. En el terminal por linea de comando, exportamos la variable M2_HOME con el valor de la ruta donde hemos instalado maven por ejemplo,  export M2_HOME = /usr/local/apache-maven/apache-maven-3.0.4. De igual manera hacemos con la variable M2, de la siguiente manera, export M2=$M2_HOME/bin.
  3. Agregamos al PATH la variable M2, de la siguiente manera, export PATH=$M2:$PATH.
  4. Probamos que los pasos anteriores se han efectuado correctamente, Por linea de comandos  tecleamos mvn -version y deberá aparecer la información de maven, como por ejemplo la versión java, la versión maven, la ruta de instalación, etc.

Configuración opcional

Si entramos en la ruta donde hemos instalado maven encontraremos el fichero settings.xml dentro de la carpeta conf, este fichero nos permite configurar aspectos adicionales, como pueden ser modificar la ruta por defecto donde se alojara nuestro repositorio o indicar una conexón proxy, entre otras cosas.

Si estamos conectados por medio de un servidor proxy sencillamente descomentamos el contenido de la etiqueta proxies y alli indicamos los valores con lo cual accedemos a conectarnos. por ejemplo

Por otro lado si desearamos modificar la ruta por defecto del repositorio, solo descomentariamos el contenido de la etiqueta local_repository y colocamos la ruta donde deseemos que este ubicado nuestro repositorio, por ejemplo en windows podría ser algo como esto:

 

Ahora que ya tenemos maven instalado, configurado y tenemos constancia de ello (habiendo efectuado las pruebas), vamos a crear nuestro primer proyecto Maven, lo haremos por linea de comandos y tecleamos lo siguiente:

mvn archetype:generate -DgroupId=com.josedeveloper.app -DartifactId=PruebaMaven -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

Esta sentencia nos creara todo el esqueleto del Proyecto incluyendo un fichero de pruebas y un main (con un «Hola mundo!»), la primera vez puede que tarde un poco, ya que maven estara descargandose las ultimas versiones de los plug-ins a nuestro repositorio, incluso en el sitio web de Maven nos indican que puede que esta sentencia debamos ejecutarla en más de una oportunidad ya que pueden ocurrir time out antes de que se haya terminado la descarga (esperemos que no sea nuestro caso).

Una vez creado el proyecto veremos una carpeta de nombre PruebaMaven (o cualquier otro que hayamos utilizado) si entramos en esa carpeta nos encontraremos con el fichero pom.xml y este no es mas que el fichero que maneja la configuración de nuestro proyecto (haciendo una analogia vendria siendo algo asi como el build.xml de Ant).

Maven funciona en torno a fases, y una fase no es más que un paso dentro del ciclo de vida de construcción de un proyecto, es importante tener en cuenta que para llegar a una fase es necesario haber pasado previamente por las fases que le preceden. Las fases por defecto más comunes de un proyecto serían las siguientes:

  • validate: Valida que el proyecto esta correcto y dispone de la información necesaria.
  • compile: Compila el código fuente del proyecto.
  • test: Prueba el código fuente compilado haciendo uso de frameworks para pruebas unitarias (JUnit).
  • package: Empaqueta el código fuente compilado (por ejemplo creando un jar o war).
  • integration-test: Procesa y despliega el paquete dentro de un entorno de test de integración.
  • verify: Ejecuta los controles necesarios para  verificar si el paquete es válido y cumple con los criterios de calidad.
  • install: Instala el paquete dentro del repositorio local, para poder usarlo como dependencia en otro proyecto.
  • deploy: Copia el paquete final al repositorio remoto para compartir con otros desarrolladores y proyectos.

Analizando lo anterior  y volviendo a lo de las fases, nos damos cuenta que tiene mucha logica el enfoque de fases de Maven, ya que para poder probar un código, es necesario haberlo compilado de antemano, lo cual implica haber pasado por la fase compile, así como para poder instalar un proyecto como dependencia en el repositorio es necesario que el código haya sido compilado, se haya probado, luego empaquetarlo, lo que se traduce que al invocar la fase install previamente tuvo que haber pasado por las fases, compile, test, package… y asi sucesivamente.

Ahora procedamos a construir el proyecto, sencillamente ubicandonos dentro de la carpeta del proyecto, introducimos por linea de comandos, lo siguiente

mvn package

Si navegamos por la estructura de directorio veremos que en la carpeta target nos habra creado un fichero .jar, además que durante la ejecución de la ultima sentencia podemos ver como se van ejecutando las fases previas al empaquetado.

Ya empaquetado el proyecto procedemos a ejecutarlo y lo haremos también por linea de comandos introduciendo la siguiente sentencia

>java -cp .\target\PruebaMaven-1.0-SNAPSHOT.jar com.josedeveloper.app.App

Podremos ver nuestro Hola Mundo! con nuestro primer proyecto maven.

Por ultimo quizás se hayan dado cuenta que algunos warning se arrojaron por linea de comando al momento del empaquetado, eso podemos resolverlo muy facilmente agregando a nuestro fichero pom.xml la siguiente linea

 

quedando este ultimo así

Conclusión

Toparse de repente con maven en un proyecto, al principio puede ser un dolor de cabeza, genera muchas interrogantes, además que la curva de aprendizaje a mi modo de ver no es de la mas rapidas, lo cual puede que nos genere uno que otro enfado, impotencia, pero a medida que se va aprendiendo y poniendo a prueba las bondades de esta herramienta  ocurre un cambio como decir el pasar del odio al amor jajajaja, esto no lo tomen como una generalización sino que es una opinion personal, pero es lo que he percibido a medida que voy avanzado con Maven, entre los beneficios (gracias a la gran cantidad de plugins) pues yo brevemente destaco el poder tener un repositorio centralizado, identificando las dependencias por sus respectivas versiones, es decir, olvidemonos de la cantidad infinita de jars repetidos en cada proyecto, además de poder utilizarlo para temas de testing e integración continua, además de poder crear esqueletos de proyectos adaptados a nuestras necesidades, ya para mi lo anteriormente expuesto ya hace que valga la pena aprender a usar la herramienta, es más si les soy sincero yo aun estoy conociendo las ventajas de usar Maven y espero en medida de lo posible poderlo compartir con ustedes. De igual manera les invito a compartir sus experiencias con maven, que otras ventajas o desventajas observan ustedes de usarlo así como compartir material de interés.

Como crear la lista de añadidas recientemente de itunes

Este post va dedicado a aquellas personas que al igual que yo tienen esa facultad «divina» de haber hecho desaparecer la lista de  añadidas recientemente de itunes. Para todos  ellos aquí les indico lo sencillo que es.

  1. Ir a Archivo->Nueva lista de reproducción inteligente. ¿Sorprendidos? pues a mi si me sorprendió un poco que fuese una lista inteligente sencillamente me hacia a la idea que era una lista de reproducción normal y corriente y que alguna especie de batch la actualizara o algo así por el estilo.
  2. Agregamos la primera regla, como lo indica la siguiente figura
    primera regla
  3. Pulsamos el simbolo «+» ubicado a la derecha de la primera regla e insertamos la segunda regla reflejada en la imagen, luego pulsamos aceptar.  segunda regla
  4. Llamamos a nuestra lista, «Añadidas recientemente».
Listo ya tenemos nuestra lista de añadidas recientemente. Como vieron resulta mas sencillo de lo que podríamos imaginar y a su vez puede que a mas de uno le de un poco de curiosidad (gusanillo) y quiera crearse una nueva lista de reproducción inteligente o mas bien a nuestra lista de añadidas recientemente agregarle otra regla como por ejemplo que no sea un video.
Así que ya no se preocupen si de nuevo vuelve a desaparecer nuestra lista de reproducción 🙂

 

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies