Implementando un entorno de pruebas de seguridad para iOS

Mientras liberan la nueva versión de DVIA, he tenido un interesante trabajo compilándola por mi misma, dado que desde XCode 7 es mandatorio que todas las apps que tengan versiones para el Apple Watch usen bitcode en todas sus librerías.

Esta solución aplica si tienes cuenta de desarrollador y clonando localmente el repositorio de la aplicación (https://github.com/prateek147/DVIA), tu cuenta reemplazará la existente en el proyecto, deja que XCode resuelva los issues de firmas y de capacidades de las aplicaciones. Activa las capacidades que no aparezcan activas por defecto, este proyecto requiere In-app purchase y App groups.

Hay que renombrar el Bundle Identifier porque el original obviamente ya está tomado, mi recomendación es añadirle simplemente un sufijo de al menos tres letras a “dvia” algo así como “dviaxyz”.  Esto implica actualizarlo en todos los Target y en todos los info.plist

Hay que crear un grupo en las aplicaciones que tienes en tu cuenta para que coincida con el nuevo Bundle Identifier y seleccionar ese grupo en Capabilities App groups tanto en el target principal como en el del Apple Watch.

Las librerías de Parse arrojaron error por no tener bitcode, así que descargué una nueva versión (1.11.0) y reemplacé Parse.Framework y Bolts.Framework

Una forma de resolver las restantes es recurriendo a Cocoapods, tras un proceso de detectar una por una las faltantes, logré resolver dos más con esta configuración.

     use_frameworks!
     source 'https://github.com/CocoaPods/Specs.git'
     platform :ios, '9.1'
     workspace 'DamnVulnerableIOSApp'
     pod 'GoogleAnalytics', '~> 3.14'
     pod 'Realm', '~> 0.97'

Después de instalar arroja estos errores, básicamente se resuelven haciendo lo que el mensaje dice, agregando $(inherited) en los targets Debug y Release.

[!] The `DamnVulnerableIOSApp [Debug]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods/Pods.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `DamnVulnerableIOSApp [Release]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods/Pods.release.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

Para el caso de couchbase-lite no se pudo con Cocoapods porque todavía están entregando la versión sin bitcode, así que cloné su repositorio de git://github.com/couchbase/couchbase-lite-ios.git usando Source Tree con la opción de Recursive activa para que baje algunas librerías adicionales en la carpeta Vendor.

Como indican en sus instrucciones, abrí el proyecto, seleccioné el Scheme “Continuous iOS”, le hice “Archive”, lo abrí en finder y tras abrir el paquete busqué el archivo CouchbaseLite.framework y lo reemplacé donde ya había descargado la librería originalmente sin bitcode. Procedí a agregarlo al proyecto y listo. Fin de los errores de compilación.

Ahora viene comenzar a usar la DVIA. Tengan en cuenta que iOS ya no soporta links en las aplicaciones sin https:// a menos que se desactiven ciertas características de seguridad de transporte en el info.plist, agregando lo siguiente.

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

Más detalle sobre lo que esto hace AQUÍ y porque no se recomienda para una aplicación real, e información sobre Apple Transport Security. Otros cambios de seguridad en iOS 9 que pueden afectar la funcionalidad de DVIA (que no he revisado aún) AQUÍ

SF Mobile Food App, Open Data for the common person.

Since the Open Data initiative started, tons of information has been offered to the general public in forms of spreadsheets, maps, calendars and others, giving people access to information that was buried before in Government institutions files and data servers.

The Open Data initiative is a valuable effort to give the power of information to citizens, allowing them to make more informed decisions and creating a transparency sensation among them.

However there’s still a link that needs to be stronger in the chain, how to put that information in the hands of the people who has no time or expertise to dig into the lots of databases available. This is a place where developers are called to act as translators that transform raw data into meaningful visualizations for the general public and to offer simple solutions to improve people’s lives.

The most common apps you can find are related with the main concerns of citizens: neighborhood safety and transportation; but now that Open Data is better known it is expanding to tourism, food, politics, education, environment and so on. The more apps fetch Open Data information, the more public use them, and they will demand more updated and Open information, motivating cities and government institutions to Open their public Data.

Hacemos Contactos developed a simple mobile app to show how you can take this Open Data information and transform it into a useful tool for the common person walking on the street. In this case we are using the data that comes from the approved permits for food carts/trucks, and showing them in list and map views.  The update frequency information is very important to make an app valuable for the public, in this case San Francisco Open Data site declares the information is updated daily, what is enough for the purpose of the app. We looked for other cities with similar information to include them in the app, but the data wasn’t available or the last update happened two years ago, making it not enough accurate for the intended use.

See SF Mobile Food App showcased in San Francisco Open Data site http://apps.sfgov.org/showcase/apps/sf-mobile-food/

We encourage other developers to create more apps that use Open Data and contribute in that way with information transparency.

Download on the App Store

IMG_0866P

Practiquemos diversos tipos de navegación para apps iOS

Hoy utilizaremos varios elementos de navegación en apps para iOS con XCode, comencemos creando un proyecto nuevo que sea una aplicación con tabs, lo dejaremos para dispositivo iPhone, lenguaje Swith y desactivados los Tests (Si tienes dudas sobre esto último consulta el post sobre la primera app sin código)

Captura de pantalla 2015-11-28 10.43.32

Cuando abras la story board que te ha creado verás que tienes una vista inicial y un par de vistas hijas.Captura de pantalla 2015-11-28 11.20.50

Captura de pantalla 2015-11-28 11.23.50Aunque hoy no los usaremos, puedes notar en el menú a la izquierda que ha creado un archivo .swift para cada una de las vistas hijas. Esto servirá luego para poder hacer programación personalizada de cada una de las vistas, en cuanto a contenido y acciones.  Cambia el color de fondo de cada vista para que puedas observar fácilmente su cambio en el menú.

Captura de pantalla 2015-11-28 11.28.50Abre el menú de los elementos del story board que se muestra en la imagen, si está colapsado y no lo ves da click sobre botón para desplegarlo en la parte inferior que hemos encerrado en un círculo fucsia.

Puedes ves que hay una “First Scene” y una “Second Scene” para cambiarle el nombre que se despliega selecciona dentro de la vista la estrella azul que tiene el nombre, en este caso “First”

Una vez seleccionada te permitirá ver las propiedades del elemento, entre ellas el título y la imagen. Cambiemos el nombre a Español en ambas vistas

Captura de pantalla 2015-11-28 11.34.39

Agrega a tu aplicación un par de íconos y cambia también la imagen desplegada, el tamaño adecuado para la barra es un png de 32×32 pixels, con sus versiones @2x de 64×64 y @3x de 96×96.  Un buen lugar para encontrar íconos gratuitos que puedes usar siempre y cuando atribuyas a sus autores es flaticon.com. Revisa la primera app sin código si no recuerdas como agregar los íconos.

Haz correr la aplicación desde la barra superior, en el símbolo “play”, elige el dispositivo sobre el cual quieras observarla, lo cual abrirá el simulador. select run device

Observarás que aparece cargada por defecto la primera vista y si das click en la barra inferior pasa a la segunda.

tab-bar

Ahora vamos a integrar lo que aprendiste antes, selecciona la primera vista y buscas en el menú Editor -> Embed in -> Navigation controller. ahora tendrás una primera vista a la cual puedes agregar vistas hijas como en la vez anterior, no detallaremos el proceso pues ya lo vimos en la primera app sin código, pero crearemos un par de botones para abrir dos vistas, una que contenga imágenes de gatos y otra de perros. El resultado debería verse algo como esto.

conect-button-detail.gif

Ahora vamos a integrar un nuevo elemento, una Table View Controller, esta nos permite crear tablas con contenido dinámico o fijo, hoy la usaremos de forma fija.  Busca el elemento en el menú de la derecha y arrástralo a la storyboard.

Captura de pantalla 2015-11-28 12.09.19

Una vez insertada vamos a integrarla al tab bar, para esto selecciona la vista principal, presiona la tecla ctrl y arrastra hasta tocar la table view controller, conéctala en modo Relationships y se agregará un nuevo tab.

conect-tableviewcontroller

Cambia el nombre del nuevo item y agrégale su ícono respectivo como lo hicimos antes, la llamaremos Directorio.

Captura de pantalla 2015-11-28 12.14.33

Ahora vamos a cambiar la configuración para que nos deje  personalizarla, dejaremos el contenido en celdas estáticas y agrupadas, haremos un directorio sencillo.  Captura de pantalla 2015-11-28 12.15.02

Puedes ver que ha creado un par de secciones con de a tres celdas cada una. borra una de las table view cells que no la vamos a necesitar.

 

Captura de pantalla 2015-11-28 12.16.24

Agregaremos un texto de encabezado y otro de pie de página, en cada una de las secciones.

 

Captura de pantalla 2015-11-28 12.18.50

 

Ve al menú lateral y agrega el ícono de info en la celda

 

Del menú lateral toma un label y un image view para agregarlos dentro de la primera celda, escribe el nombre de una amiga en el label y añade un ícono pequeño al image view.

Captura de pantalla 2015-11-28 13.01.01

Captura de pantalla 2015-11-28 13.03.27.png

Tu primera celda debería verse ahora algo así.
Puedes repetir el proceso varias veces o usar la tecla command+d para duplicar tu celda. Ten cuidado, el duplicado por defecto aparece fuera de la tabla, debes arrastrarlo hasta la ubicación correcta.
Tu tabla debe llegar a una apariencia como esta, o mejor 🙂 Captura de pantalla 2015-11-28 13.04.45
Crearemos una nueva View Controller con los datos de tu amiga, usa los elementos que ya conoces.
Captura de pantalla 2015-11-28 13.06.22.png
Ahora conectaremos el detalle de la vista a la celda, primero vuelve tu table view controller embebida en una navigation controller, igual que antes. Luego como se muestra a continuación, dando click + ctrl sobre la celda y arrastrando hasta la vista, selecciona modo push.
conect-cell-detail
Una vez hemos terminado tu directorio se vería así.  Ahora es tu turno de integrar estos nuevos elementos y crear nuevas cosas.
table-detail-navigation.gif
Ah, no olvides cuando publiques, atribuir a los dueños del contenido, por ejemplo de aquí saqué los íconos.
Icons made by Freepik from www.flaticon.com is licensed by CC BY 3.0

Crear un repositorio del código de tu app en GitHub

GitHub es un sitio muy popular para almacenar código abierto, donde las personas pueden libremente consultarlo y participar en su construcción. Cuando comienzas a crear tus apps es útil poner tu código allí por dos motivos, a manera de respaldo y para que tus proyectos sean visibles para el mundo; así cuando alguien quiera referencias de tu nivel de experiencia pues le bastará con mirar lo que has puesto allí.

Cuando avances a un nivel profesional y estés creando código que sea privado para un cliente, hay plataformas que te permitirán hacer lo mismo en repositorios no públicos.

Antes de comenzar si no conoces lo que es Git, no hay problema, es básicamente una serie de comandos que te permiten controlar las versiones de tu código. ¿Versiones? Si, cada que modificas tu código y lo guardas estás creando una nueva versión, las controlamos para que en caso de que algo salga mal podamos volver atrás hasta el momento antes del error, como una máquina del tiempo ¡Fácil!

Captura de pantalla 2015-11-14 18.56.39Primero vamos a crear nuestra cuenta en GitHub, para ello ve a http://github.com y llena tus datos en las casillas solicitadas.  Una vez tu información sea aceptada da click en “Create an account” para continuar

Captura de pantalla 2015-11-14 18.58.14

Captura de pantalla 2015-11-14 18.58.44Lo siguiente es elegir el plan que queremos, por el momento nos vamos con el plan gratuito, que básicamente te permite hacer todo público, ya si quieres tener repositorios privados que solo ciertas personas vean entonces necesitarías un plan pago. Le das click sobre “finish sing up” y estamos dentro.

Al ingresar llegas al “Dashboard”, donde luego podrás ver tu información personal.

Captura de pantalla 2015-11-14 18.59.06

Captura de pantalla 2015-11-14 19.01.29

Ten en cuenta que GitHub te ha enviado un correo de confirmación al email que usaste en el registro.  Es necesario que lo abras y confirmes para que comiences a existir públicamente en la comunidad. ¿Comunidad? Si, verás, los developers de software libre les gusta intercambiar código y se ayudan entre ellos a construirlo, como personas que construyen casas juntas, y de ti pues se espera lo mismo que todos, que lleves tus herramientas y materiales.

Una vez has aceptado el correo GitHub te sugiere unos tutoriales sobre las cosas que puedes hacer allí, tómalos cuando quieras.

Captura de pantalla 2015-11-14 19.01.45

Para lo que sigue partimos de tres supuestos, que tienes un Mac, que ya creaste tu primer proyecto y que al crearlo le dijiste que hiciera control de versiones por Git. Sobre estas dos últimas si no las tienes listas te recomiendo el post anterior sobre Crear tu primera app sin código, sobre la primera usa el tutorial del GitHub bootcamp para configurar tu máquina.

Voy a pedirte que instales un software llamado SourceTree, que puedes descargar de https://www.sourcetreeapp.com también existe versión para Windows. Una vez lo tengas instalado vamos con lo siguiente.

Crearemos un repositorio, pero primero algo de teoría: Un repositorio es en palabras simples una carpeta donde podemos administrar el contenido, es decir, podemos guardar registro de que archivos son modificados, agregados o eliminados, dejando traza de los cambios como si fuese el balance de un banco.
Captura de pantalla 2015-11-14 19.05.40Entonces das click sobre el ícono que parece un barril con un signo + y le dices que vas a crear un nuevo repositorio.

Te presentará entonces una ventana que te permitirá escoger la carpeta donde crear tu repositorio, como en nuestro caso ya existe el código creado ve y busca la carpeta donde lo guardaste y dale open.

Captura de pantalla 2015-11-14 19.06.44

El tipo de repositorio para nuestro caso será Git y el bookmark name un nombre único que se te ocurra, puede ser el mismo de la aplicación, le das click en crear y voilà, ahí estas apuntando a tu repositorio local.

Captura de pantalla 2015-11-14 19.06.56

¿Apuntando? Si, resulta que XCode ya te lo había creado cuando le dijiste que controlara versiones, solo le estamos contando a SourceTree que eso existía.
Captura de pantalla 2015-11-14 19.07.25

Una prueba de lo que te digo es que verás una serie de íconos de colores bajo el nombre que le diste al Bookmark, estos son los archivos que creaste y modificaste en tu primer proyecto.  Si no tuvieses nada en el repositorio esos íconos no aparecerían. Puedes observar la palabra “master” esta significa que tienes el tronco del código creado y a ese tronco principal se le llama master por defecto. Da doble click sobre tu repositorio para ver su contenido.

Vas a encontrar una sección inferior que dice “Unstaged files” y la superior que dice lo contrario “Staged files” la diferencia es que los de arriba son cambios que ya has presentado y los de abajo todavía no. Cuando un cambio no ha sido presentado digamos que está no está en firme, entonces allí solo hay una foto de lo que hay en este instante, si cambiásemos el código el contenido cambiaría sin dejar trazas.

Captura de pantalla 2015-11-14 19.07.45

Con las versiones queremos todo lo contrario, dejar trazas de todos los cambios, entonces el primer paso será presentar los cambios “Unstaged”, lo cual haremos seleccionando el check box de los archivos inferiores hasta que todos pasen a “Staged”

Captura de pantalla 2015-11-14 19.09.22

Captura de pantalla 2015-11-14 19.09.34¿Qué hemos hecho? Piensa que estás haciendo una transacción bancaria y hasta ahora has elegido la cantidad, nos falta decir de donde saldrá el dinero, debemos especificar a nombre de quien se hará la transacción, para el caso que nos importa vamos a configurar la identidad con la cual se ejecutan las operaciones. Para esto vamos a las preferencias de SourceTree y en la configuración general elegiremos nuestro nombre y el correo tal cual como lo escribimos al momento de crear nuestra cuenta de GitHub. Si el correo es diferente sucederá que nuestras operaciones quedarán anónimas y cuando alguien mire nuestra frecuencia de uso, dirá que no hemos hecho nada.  Lo bueno es que esta configuración es permanente y no necesitas repetirla cada vez.

Captura de pantalla 2015-11-14 19.09.55
Captura de pantalla 2015-11-14 19.17.44Cerramos las preferencias y estamos listos para confirmar la transacción. Al paso de confirmar lo llamamos “Commit”, busca el ícono en la parte superior y al presionarlo te abre una ventana que tiene el fin de que documentes de qué se trata el cambio que estás realizando, una vez le das commit ha quedado localmente aceptado, como cuando presionas pagar en la tienda electrónica.

Captura de pantalla 2015-11-14 19.17.49

Ahora vamos a llevar nuestros cambios a GitHub, para eso hemos dado todos esos pasos. Lo primero que necesitamos es crear nuestro repositorio remoto en GitHub, le llamamos remoto (Remote) porque está en un servidor lejos de nosotros. Abre tu “Dashboard” y presiona en el botón “New” que te permitirá crear uno nuevo.

Captura de pantalla 2015-11-14 19.15.01

Una vez allí le daremos un nombre al repositorio y le diremos que es público (recuerda que los privados son con costo).  Puedes ponerle una descripción adicional y darle “Create repository”

Captura de pantalla 2015-11-14 19.16.47

Al crearlo nos entrega una ruta, cópiala para que puedas hacer referencia a ella en el paso siguiente.

Captura de pantalla 2015-11-14 19.17.07

Ahora vamos a crear el enlace desde el cliente hacia el servidor. Busca en el menú izquierdo la palabra “Remotes” y con click derecho activaremos la opción “New Remote”.

Nombra el remoto descriptivamente, pega la dirección que tomaste de GitHub con lo cual se debe actualizar el Host Type y digita tu nombre de usuario, da click en OK.

Captura de pantalla 2015-11-14 19.20.37

Se irán agregando “Remotes” a tu lista a medida que vas creando más.

Captura de pantalla 2015-11-14 19.21.12

Captura de pantalla 2015-11-14 19.21.34 Para sincronizar con el servidor busca a la izquierda en el menú de “Remotes” la opción Show para ver el nombre del que acabaste de crear.

Captura de pantalla 2015-11-14 19.21.50Da  click derecho sobre el nombre y selecciona “Push” ¿Qué cosa es un push? Es sincronizar los cambios locales que dejaste en firme con el commit, en un servidor remoto. ¿Por qué no se hace al mismo tiempo que el commit? Para darte oportunidad de cambiar de idea sobre tus cambios locales.

Captura de pantalla 2015-11-14 19.22.03

Te mostrará una ventana nombrando el branch remoto y el local. Otra palabra nueva “Branch” es la rama en la cual estamos trabajando, y como solo hay una es el tronco que es el master.  Tras darle OK nos pedirá la contraseña.

Captura de pantalla 2015-11-14 19.22.12

Después de un tiempo corto ¡Listo! te indicará que ha terminado y podrás ver como tu código se ha compartido al mundo en GitHub.  Cada vez que hagas cambios en firme debes seguir la misma secuencia “Staged” -> “Commit” -> “Push”

Captura de pantalla 2015-11-14 19.22.39

¡Disfruta compartiendo tu código!

Tu primera app para iPhone sin usar código

Este post está dirigido a quienes quieren acercarse a la programación para dispositivos móviles pero que todavía no han profundizado mucho en elementos de programación.  El método es ir haciendo para ir aprendiendo y luego si moverse hacia elementos más complejos.  Si ya sabes de programación pero en otra área puede serte interesante esta introducción.

Algunos términos primero:

  • iOS: Sistema operativo que corre en los iPhone/iPad
  • Swift: Lenguaje de programación nuevo para crear programas para productos Apple.
  • Objective-C: Lenguaje de programación anterior para crear programas para productos Apple.
  • XCode: Entorno de desarrollo nativo, es decir provisto por el fabricante, y que se puede descargar en cualquier PC/Laptop Mac desde https://developer.apple.com/xcode/

En este tutorial suponemos que ya tienes XCode instalado, sino simplemente descárgalo de la página antes dicha y sigue los pasos del instalador (next, next), así de simple.

Las imágenes animadas de este tutorial puedes darles click para ver las versiones de mayor resolución.

CONOCIENDO XCode

Xcode inicioLo primero que verás al abrir XCode será una ventana como esta, la cual te permite iniciar un Playground (no hablaremos de eso hoy), crear un nuevo proyecto o iniciar algo desde un repositorio existente (tampoco lo cubriremos hoy). A la derecha, no mostrado en la figura, podrías abrir proyectos que ya hayas comenzado antes, debe estar vacío si tu XCode está recién instalado. Escogeremos la opción de crear un nuevo proyecto de XCode.

Escoger tipo appNos pide entonces escoger una plantilla para la aplicación, a la izquierda está la lista de sistemas operativos para los cuales podemos crear cosas, para nuestro caso escogeremos iOS y que sea una aplicación de una sola vista.

Datos del appLuego debemos identificar la aplicación, escoge un nombre que sea unico, el nombre de la organización es tu empresa o el tuyo propio si desarrollas para ti, el nombre de la organización se escribe como un nombre de dominio pero al revés, debe ser único por lo cual si posees un dominio personal en internet sería lo más indicado para nombrarlo, sino lo posees para efectos de prueba puedes inventarte el dominio que quieras. Escogeremos como lenguaje Swift, como dispositivo iPhone y por ahora deshabilitaremos el Unit Testing y el UI Testing.

Elegir ubicacionElige el lugar donde deseas guardar el proyecto, XCode creará por sí mismo una carpeta con el nombre que le diste al proyecto en el lugar que elijas. Activa la casilla inferior donde dice Source Control -> Create a Git Repository on -> My Mac. Esto va a servir para que XCode administre los cambios en tu código y luego cuando vayas a usar un manejador de versiones ya estén creados los archivos básicos. Si no sabes que es un manejador de versiones no te preocupes por eso ahora.

Menu izquierdaUna vez abierto el proyecto encontrarás tres secciones de XCode, la izquierda tiene varios íconos arriba y cada uno te permite varias cosas, no te preocupes si todavía no conoces algunos términos, si quieres adelantarte puedes darle una googleada a lo que no te sea familliar:

  • Explorar los archivos del proyecto
  • Ver la jerarquía de tus clases
  • Buscar texto en el proyecto
  • Ver errores
  • Ver las pruebas
  • Ver operación del debug
  • Ver los Breakpoints.
  • Ver los logs del proyecto.

Menu centralEn el centro está la identificación del proyecto y la configuración en general aquí seleccionaremos cosas que serán importantes cuando estemos integrando código de terceros y configurando una cuenta que nos permita publicar la aplicación en el App Store.

Menu derechaEl menu de la derecha vamos a usarlo mucho hoy, es donde verás todas las propiedades de lo que estés editando en ese momento y desde donde vamos a extraer los elementos que necesitaremos para crear nuestra aplicación, lo veremos con más detalle luego.

AHORA SI COMENCEMOS A EDITAR LA APLICACIÓN

Ve al menú de la izquierda y selecciona el archivo llamado Main.StoryBoard, este archivo nos va a permitir crear una aplicación desde la interfaz gráfica. Lo que voy a explicar a continuación puedes verlo en la imagen animada siguiente, da click sobre la imagen para que la veas en toda su resolución.

Story board size classes

Al seleccionar el Story Board el menu del centro cambia y te muestra un gran cuadro blanco, y a la izquierda el View Controller Scene, puedes desplegarlo y ver los elementos que tiene.  Por ahora lo cerraremos dando click sobre el botón inferior. Luego seleccionaremos el cuadro grande del centro, al hacerlo sus bordes se vuelven azules. Vamos al ícono en forma de hoja del menu de la derecha y quitamos la selección sobre Use Size Classes, porque nuestra App será solo para iPhone. Nos pregunta de qué tipo la queremos, dejamos iPhone seleccionado y las deshabilitamos. Verás que el cuadro se ha vuelto un rectángulo, en la proporción típica de un iPhone.

Story board elementsEn la parte inferior derecha vas a ver una cantidad de elementos que puedes usar, dales una mirada. Por el momento quiero que veas que existen: Label, button, Image View, y Views. Puedes buscarlos digitando sus nombres.  El cuadro blanco que tienes en el centro es una vista, podemos agregar nuevas vistas desde este mismo menú, hay diferentes tipos de ellas, la más simple que es igual a la que tenemos en el centro es una View Controller. Puedes ver que la View Controller está en amarillo mientras los otros elementos son grises, todos los elementos en amarillo son digámoslo así padres, y puedes arrastrarlos al Story board de forma independiente, los elementos en gris son hijos y solo puedes ponerlos dentro de un elemento en amarillo.

Vamos a cambiarle la apariencia a nuestra vista, lo que voy a describir está en la imagen animada siguiente. Da click sobre la vista y asegúrate que esté a la derecha el ícono que parece un escudo (realmente es un slider, pero digámosle escudo) selecciona el Background y cámbialo a un color que te guste, explora la opción other para personalizarlo como quieras. Busca en la lista inferior una Image View y posiciónala donde quieras, haz lo mismo con tres Buttons y ubícalos según tu deseo.

Story board add elements

Embed in Nav ControllerVamos a introducir un elemento de navegación, esto nos permitirá que XCode cree el código para pasar de una vista a otra por nosotros. El elemento de navegación que usaremos se llama un Navigation Controller. Para introducirlo iremos al Menú Editor -> Embed in -> Navigation Controller. Verás que tu Story Board ha cambiado y ahora aparece un Navigation Controller justo antes de la vista donde tienes el Image View y los Buttons. También verás que le ha aparecido una franja gris a tu vista, allí puedes ponerle un nombre, si tu imagen ha quedado bajo la franja gris muévela hacia abajo.

Agreguemos ahora tres view Controllers nuevas, busca el elemento en el menu derecho y arrástralo tres veces a una zona libre. Toma cada vista y cámbiale el fondo a un color diferente.

Story board add view controllers

Vamos a darle a cada botón el nombre y el color de una vista, porque cada uno va permitirnos navegar a una nueva vista.

Story board change buttons

Para conectar el botón con la vista que abrirá lo seleccionamos con el mouse, luego presionando la tecla ctrl vemos que sale una línea azul, alargamos la línea hasta que toque la vista del color que queremos y esta se ponga con un sombreado azul, soltamos el mouse y nos ofrece varias formas de presentarla, seleccionamos el modo Push.  Vemos que aparece una línea que une las dos vistas con un símbolo raro en la mitad, ese símbolo significa que la presentación es Push, o sea que reemplaza la vista anterior. Hacer igual para los otros dos botones, cada uno con su vista.

Story-board-link-views

VEAMOS EL RESULTADO

select run deviceUna vez hecho con las tres vistas ahora sí, ¡A correr!, es decir que vamos a ver en el simulador como se ejecuta todo. En la parte superior izquierda vemos un ícono como Play, y otro como Stop, junto a ese un ícono que tiene el nombre del proyecto y a la derecha podemos seleccionar el tipo de dispositivo en el cual queremos simular, para este caso hemos escogido iPhone 5s.

Para ver como funciona dale click sobre el ícono de Play y XCode abrirá un emulador según el dispositivo que hayas elegido. En este punto te pido algo de paciencia, es relativamente común que la primera vez que presiones Play el emulador corra pero no veas allí tu proyecto, dale unos 30 segundos, si no arranca dale Stop y lánzalo de nuevo con Play, la segunda suele ser la vencida.

running

Podrás ver los botones y al darle click a cada uno irá a la siguiente vista y habilitará la opción de Back para regresar a la anterior. Parece simple ¿Verdad? pero has creado la navegación necesaria para hacer una especie de multimedia.

Ahora vamos con las imágenes, como los dispositivos pueden ser de distinto tamaño el código se encarga de adaptarlos siempre y cuando al agregarlos sigamos los requisitos necesarios, así toda imagen precargada debería existir tres veces como imagen.png, imagen@2x.png e imagen@3x.png esto significa la imagen, su doble y su triple.

Para agregarlas selecciona en el menú izquierda Assets.xassets, da click derecho sobre el área blanca que se abre el el centro y selecciona Import. En el cuadro de diálogo que se abre selecciona las tres imágenes y quedarán importadas.  Esto de los tres tamaños es muy importante para los íconos e imágenes de botones

import images

icons 3 sizes

Puedes importar imágenes de paisajes y cosas así sin los tres tamaños y con la resolución apropiada la image view se encargará de ella, Vuelve a la image View, fíjate que esté seleccionado en el menú de la derecha el iconito del escudo y selecciona allí una imagen, haz se configure como Aspec Fit, para que no se arruine su relación de aspecto.

Image View

Bueno, nuestra app no se ve muy bonita que digamos, pero ahora es tiempo de que tu juegues y con estos sencillos elementos crees una aplicación que te muestre por ejemplo categorías de productos en una tienda y las imágenes de cada uno, puedes agregar cuantas Image View quieras en una vista. Ensaya con los labels y pon texto descriptivo junto a las imágenes.

Es sencillo, explora y conoce a la herramienta.

The Git Monster bite

Recently I heard from a friend a kind of horror story, about a meetup that was almost disolved when Tutors tried to explain to the novice attendees the uses and commands of Git.  It was like a monster with an unrecognizable language trying to bite people; scary enough to not come back to the meetup again. The survivors seem to continue struggling with it and they appear to have some nightmares still.

Git MonsterI started using versioning software years ago, as an independent web developer.  I remember installing SVN and tortoise on my laptop in order to track the PHP code I was building. I remember installing the server (locally), the client, and committing my changes in the server; but really not having clear idea of what I was doing. Basically I took it as a kind of backup (I’m also a sysadmin, so that operation was familiar to me).  After finishing that project and actually having lost the server repository key, I had no much interest about using them.

Years later, during an Startup Weekend, one of my team partners showed me bootstrap for the webapp front end, and told me that I should create a github account.  I was very obedient and I did it, I saw the bootstrap code and it was pretty unfamiliar to me, also the commands needed to put the code in my laptop were basically confusing, so I returned to my ugly PHP to create some forms, well, not enough good to win the prize.  I avoided the Git monster bite by not using it.

After a couple of years I was contracted to debug and finish an iOS mobile app. The client had the original code located on Bitbucket, so I was compelled to find a way to download and maintain updated the client’s repository. For my relief the same company (Atlassian) had a lovely client named SourceTree that worked like charm and did the command thing for me.  I found myself doing pulls, pushes and commits with grace using the graphic interface, while I was actually understanding the difference between them; creating branches on the go, merging them and making a space in my brain to those operations implications and uses. The Git monster looked like a kitty.

Later I returned to the webapp field, and I needed a better way to sync my laptop code with the server one. So I found sourcetree again wonderful for the task. For me it was still like a backup thing, and the graphical client avoided the command work. I had avoided the Git monster bite again, by having a GUI caged version of the beast.

Now after more than a year of using a UI client for Git, I have a clear comprehension of the different tasks you can do in version control; I have done them properly in development and production environments with small collaboration teams; I’ve been able to use and maintain synched simultaneous repositories on github and Bitbucket. I was also able to create and publish my own repositories, yes, in that github account created long ago, and also contributing with others’ repositories.

But finally the Git monster bit me, I was wondering why my pushes never updated my github contributions graph. Less than a month ago I realized that source tree makes the commits in the name of the email account you have configured on it, and my bitbucket account is associated with a different email than my github one, so each commit during the last year was done in the name of a non-existent github user, and they don’t count in my favor.

Well, the price of a beast sugar coated by a GUI, but now I have corrected it and my commits are mine. This is my account https://github.com/iyepes

I think when we teach people about complex issues like version control, it’s better to allow them to actually do it in a simpler way in a graphical client, and once they have already learned how to do it and the logic behind the task, we can give a detailed explanation of the commands that the client is issuing in their name. Please stop scaring people with the Git Monster, coding have better dragons to conquer.

El diseño Vs. La experiencia del Usuario

Me encanta esta foto, es el reflejo más simple de la diferencia entre lo que diseñamos y la forma como la gente termina usándolo.

El tema de Experiencia de Usuario o UX por sus siglas en inglés ha cobrado mucha relevancia últimamente, pero no es para nada un tema nuevo.  Los conceptos principales estudiados y usados en esta disciplina (si podemos llamarla así) han sido tratados durante varias décadas, aunque podríamos decir que empleados desde cuando los seres humanos comenzamos a fabricar objetos para modificar nuestro entorno.

Diremos que diseño es la forma como un objeto se construye y se le dan propiedades para cumplir un fin esperado. Es en la parte de lo “Esperado” donde el asunto de la experiencia de usuario juega un papel fundamental, el enfrentamiento entre lo que espera quien crea el objeto y quien lo usa, y ese usuario no es solamente quien lo opera.

En la imagen de arriba podemos ver que el camino se hizo pensando en quienes operan el lugar que desean una forma de cruce ordenada, pero no en quienes caminan por allí que prefieren emplear la ruta más corta, o si van en bicicletas no pueden básicamente utilizar el recorrido planteado como “Diseño”.

Otro ejemplo de un diseño pensado en los operarios y no en los usuarios son los equipos médicos.  Pondré el ejemplo del poco amigable mamógrafo, un elemento que si bien puede salvar muchas vidas, fue diseñado siguiendo el modelo en un aparato de tortura medieval, por alguien que muy seguramente jamás tuvo senos.

Mamógrafo
Así se aplasta el seno de la mujer durante el examen.

Posiblemente es un equipo pensado en la seguridad y ergonomía de los radiólogos, pero la tecnología no ha llegado a un punto donde se puedan obtener imágenes confiables sin ser tan invasivo para las pacientes. Y se trata de un producto de uso “masivo” pues se recomienda emplearlo a todas las mujeres mayores de 40.

Hay un libro clásico para entender estas cuestiones de Don Norman: The Design of Everyday Things, el cual yo llamaría un libro sobre sentido común, donde se habla de como funciona el mundo cotidiano y como un diseñador debe crear pensando en quienes serán sus usuarios, sus reacciones e interacciones.

Este libro tiene bastante valor en una era donde muchos de nuestros productos están mediados por pantallas y las aplicaciones en ellas, permite recordar como el mundo real forma el modo como las personas interactúan con nuestros productos y que UX es algo mayor a qué tan agradable visualmente es tu aplicación (aunque también importa), e incluye de forma importante como resuelve (o complica) un problema de nuestro usuario.

Si están interesados en leer el libro, está disponible en Amazon. Pueden dar click en la imagen para ver el detalle.

Las voces del SI

Women in LabDesde el principio ha sido nuestro interés el tema de las mujeres en la tecnología, como motivarlas a participar, cómo mantener el interés en aquellas que han tomado ya la opción de hacerlo.

Curiosas en descubrir más luces sobre este tema estamos llevando a cabo una investigación cualitativa, en la cual buscamos entrevistar en video a mujeres que se dediquen a la tecnología en general.  Queremos cubrir estudiantes, profesionales, educadoras, investigadoras, todas aquellas que quieran decirnos con su voz porque le dijeron SI a la tecnología.

Si quieres participar y ser entrevistada puedes escribirnos a lasvocesdelsi@gmail.com y te estaremos contactando para realizarte la entrevista vía hangout.

Los resultados de la investigación serán compartidos con las participantes, divulgados en un canal de videos en youtube y presentados en una conferencia internacional, con el fin de que más mujeres se interesen y motiven a elegir carreras en los ámbitos de la tecnología.

Gracias.