¿Tienes una idea para una aplicación pero te falta el conocimiento de programación para empezar a construirla? En esta serie de blogs semanales, Cómo liberar a tu desarrollador interno de aplicaciones, te llevaré a ti, el no-programador, paso a paso a través del proceso de creación de aplicaciones para el iPhone, iPod touch y iPad. Acompáñame cada semana en esta aventura, ¡y experimentarás lo divertido que puede ser convertir tus ideas en realidad! Esta es la parte 12 de la serie. Si acabas de empezar ahora, mira el comienzo de la serie aquí (este post ha sido actualizado a Swift 1.2, iOS 8, y Xcode 6.3.)

Uno de los mejores libros de desarrollo de software de todos los tiempos es el Code Complete de Steve McConnell. Ya sea que seas un desarrollador de software experimentado o un programador novato, sin importar la plataforma o el lenguaje en el que escribas el código, te recomiendo encarecidamente que consultes este libro. Cambiará tu forma de pensar y mejorará enormemente la calidad del código que escribes.

$0027Software Accretion$0027-Construyendo con el tiempo

Después de leer Código completo hace años, la comparación del libro de desarrollo de software con el cultivo de ostras se me quedó grabada.McConnell usó el término acumulación de software para describir el proceso de construcción de software durante un período de tiempo. La palabra «acreción» se refiere a cualquier crecimiento o aumento de tamaño por una adición o acumulación externa gradual. Esta es la forma en que una ostra hace una perla; al añadir gradualmente pequeñas cantidades de carbonato de calcio a lo largo de un período de tiempo, una perla crece cada vez más.

Con el desarrollo de software incremental, se empieza por hacer la versión más simple de un sistema que funcione. Creas un esqueleto lo suficientemente fuerte para sostener el sistema real a medida que se desarrolla, como una ostra que empieza a construir una perla con un pequeño grano de arena. Esto es exactamente lo que hemos hecho hasta ahora en esta columna con la aplicación iAppsReview . Primero construimos un prototipo de la aplicación, y gradualmente, con el tiempo, hemos añadido código cada semana con el objetivo final de crear una aplicación completamente funcional.

Endureciendo tu código

Como parte del proceso incremental de construcción de una aplicación, necesitas echar un vistazo a tu código y preguntarte: «¿Qué podría salir mal?» Una de las mayores variables a considerar son los usuarios. Te sorprenderán constantemente usando tu aplicación de maneras que no esperas. He trabajado con bastantes equipos de desarrollo a lo largo de los años, y aún no he visto un caso en el que los desarrolladores no se sorprendieran al ver a la gente usar su software. Cuando se trata de desarrollar una aplicación, es fundamental que dejes que otros le den una patada a tu aplicación antes de enviarla a la App Store. Sus comentarios mejorarán absolutamente la experiencia del usuario de tu aplicación.

Echemos un vistazo a iAppsReview , identifiquemos las áreas en las que pueden surgir problemas, y luego endurezcamos nuestro código para evitar cualquier problema. Puedes obtener el proyecto que hemos completado hasta ahora en este enlace. Si te quedas atascado siguiendo las instrucciones paso a paso, puedes obtener el proyecto terminado para este post en este enlace.

En este momento, si el usuario no introduce un nombre de aplicación o un comentario en la escena Write Review , la aplicación no se bloquea; pero cuando intente compartir la revisión en Twitter, obtendrá un tweet vacío excepto por el guión como se muestra en Figura 1 .

Figura 1 – El usuario puede enviar un tweet vacío.

Entonces, ¿cómo debemos abordar este problema? Es una buena práctica mirar las aplicaciones de iOS incorporadas para ver cómo Apple maneja una situación particular, y usar eso como una guía para nuestras propias aplicaciones. Por ejemplo, cuando se especifica una cuenta de Twitter en la aplicación Settings , la opción Sign In está desactivada hasta que el usuario introduce tanto un Nombre de usuario como una Contraseña ( Figura 2 ).

Figura 2 – El botón de inicio de sesión está desactivado hasta que el usuario introduce un Nombre de usuario y Contraseña .

Este también es un buen enfoque para la escena de Write Review .Sólo queremos activar el botón Share si hay texto tanto en el campo de texto App Name como en la vista de texto de comentarios. Esto significa que cada vez que el usuario teclea un personaje, tenemos que comprobar ambos controles de la interfaz de usuario. Si alguno de ellos está vacío, el botón Compartir debe ser desactivado. Si ambos controles contienen texto, el botón Compartir debe estar habilitado. Tenemos que realizar esta comprobación para cada carácter que el usuario escriba, porque podría pulsar la tecla borrar , dejando uno de los controles de la interfaz de usuario vacío.

Creando una salida de botón de compartir

Como necesitamos acceder al botón de compartir para poder activarlo y desactivarlo, nuestro primer paso es crear una salida para el botón. Para ello, sigue los pasos que se indican a continuación.

  1. Abre el proyecto iAppsReview en Xcode.
  1. En el Project Navigator, selecciona el archivo Main.storyboard .
  1. En la escena Write Review , haz clic en el botón Share en la esquina superior derecha de la escena.
  1. Ve al Inspector de Atributos (el tercer botón de la derecha en la barra de herramientas del Inspector), y desmarca la casilla Habilitado como se muestra en Figura 3 . Esto hace que el botón Share se vea desactivado en tiempo de diseño y cuando la escena aparece por primera vez en tiempo de ejecución;

Figura 3 – Desmarca la casilla Habilitado .

  1. A continuación, muestra el Editor Asistente haciendo clic en el botón central del grupo de botones Editor en la parte superior derecha de la ventana de Xcode. Esto debería mostrar el archivo WriteReviewViewController.swift en el Editor asistente.
  1. Mantenga pulsada la tecla de control , haga clic en el botón Share y arrastre hacia abajo hasta el archivo WriteReviewViewController.swift como se muestra en Figura 4.

Figura 4 – Crear una salida para el botón Compartir.

  1. Cuando vea la ventana emergente Insertar salida, acción o colección de salida , suelte el botón del ratón y la tecla de control . Esto muestra la ventana emergente Insertar salida. Introduce btnShare como nombre de la salida y luego haz clic en el botón Connect ( Figura 5 ).Esto añade una nueva propiedad de salida btnShare al archivo de código.

Figura 5 – Crear una salida llamada btnShare .

Configuración del campo de texto del nombre de la aplicación

Ahora vamos a configurar el campo de texto Nombre de la aplicación para activar y desactivar el botón Compartir. Primero necesitamos crear una salida que podamos usar para referenciar el campo de texto.

  1. Control+Clic en el campo de texto App Name en la superficie de diseño, y luego arrastrar hacia abajo en el archivo WriteReviewViewController.swift como se muestra en Figura 6 .

Figura 6 – Crear una salida para el campo de texto.

  1. En la ventana emergente Crear salida, establezca el campo Name en txtAppName , y luego haga clic en Conectar ( Figura 7 ). Esto crea una nueva propiedad de salida llamada txtAppName .

Figura 7 – Introduzca txtAppName en el campo Name .

  1. Con el campo de texto App Name todavía seleccionado, vaya al Inspector de conexiones (el botón del extremo derecho de la barra de herramientas de los inspectores).Bajo la sección Sent Events , haz clic en el pozo de conexión a la derecha del evento Value Changed y arrástralo hacia abajo hasta el archivo WriteReviewViewController.swift como se muestra en Figura 8 . El evento Value Changed se dispara cada vez que el usuario introduce o borra un carácter en el campo de texto.

Figura 8 – Crear un método de acción para el evento Editing Changed .

  1. Cuando aparezca la ventana emergente Insertar acción , suelte el botón del ratón y la tecla de control . Esto muestra la ventana emergente Crear método de acción ( Figura 9 ). Introduce appNameChanged como el nombre del método Name y luego haz clic en el botón Connect . Esto añade un nuevo método de acción al archivo WriteReviewViewController.swift .Ahora puedes cerrar el Assistant Editor haciendo clic en el botón izquierdo del grupo de botones Editor .

Figura 9 – Crear un método de acción llamado appNameChanged .

  1. Ahora vamos a implementar el nuevo método. En el archivo de código WriteReviewViewController.swift introduzca el código que se muestra en Figura 10 .

Figura 10 – El código de este método habilita y deshabilita el botón Share.

Es la primera vez que muestro este tipo de código en mi entrada del blog, así que explicaré cómo funciona. Esta es una declaración de Swift si no . Pertenece a una familia de sentencias condicionales y permite ejecutar un conjunto de código u otro basado en una condición.

La condición que se comprueba con esta declaración sigue inmediatamente al si en la primera línea de código de este método. Esta condición particular contiene una comparación compuesta, donde se comprueban dos valores. La doble línea vertical entre las dos condiciones ( || ) es un operador OR lógico. Esto significa que si la primera condición O la segunda condición evalúa a como verdadera , entonces el código dentro de las llaves rizadas que siguen directamente a si se ejecuta. En caso contrario, se ejecuta el código contenido en las llaves rizadas que siguen a la sentencia else .

En primer lugar, se llama a la función count para comprobar si el número de elementos (caracteres, en este caso) del texto en el control tvwReview es igual a cero, lo cual será así si la vista del texto está en blanco. Si esta parte de la condición es verdadera, entonces el código que desactiva el botón se ejecuta sin comprobar la segunda parte de la condición. No es necesario comprobar porque si alguna de las partes de la condición es verdadera, el botón debe ser desactivado. Si la primera parte de la condición es verdadera, entonces la segunda parte de la condición se comprueba. Si la función count devuelve cero para la propiedad text del campo de texto, entonces se ejecuta el código que deshabilita el botón.

Si ambas partes de la condición son falsas, entonces se ejecuta el código de la sentencia else , que habilita el botón Share.

Configurando la vista del texto de los comentarios de revisión

Ahora estás listo para configurar la vista de texto de los comentarios de revisión. Tenemos que tomar un enfoque diferente con la vista de texto porque no tiene un evento Editing Changed como lo tiene el campo de texto (puedes hacer clic en la vista de texto en la superficie de diseño y luego ir al Inspector de Conexiones para ver lo que quiero decir).

Al igual que en la vista de texto, si no encuentra el evento que necesita con un determinado control de la interfaz de usuario, su siguiente paso es comprobar si el control tiene un protocolo de delegado que pueda adoptarse para que le notifiquen los eventos importantes (véase mi entrada anterior para una discusión de delegados y protocolos).Si miras la documentación de UITextView , encontrarás que hay una propiedad delegado cuyo tipo es un protocolo llamado UITextViewDelegate . Este protocolo contiene un textViewDidChange: método ( Figura 11 ), que es exactamente lo que necesitamos.Como se indica en la documentación, este método se llama automáticamente al delegado cuando el usuario cambia el texto en la vista de texto.

Figura 11 – El textoViewDidChange: es llamado cuando el usuario cambia el texto en la vista de texto.

Adoptemos este protocolo ahora.

  1. Ya no necesitamos el Asistente del Editor, así que haz clic en el botón de la izquierda en el grupo de botones del Editor para deshacerte de él. A continuación, en el Navegador del Proyecto, selecciona el archivo de código WriteReviewViewController.swift .
  1. Añade el código que se muestra en Figura 12 para adoptar el protocolo UITextViewDelegate , y recuerda añadir una coma después del protocolo UINavigationControllerDelegate al final de la línea de código anterior;

Figura 12 – Adopción del protocolo UITextViewDelegate

  1. Ahora vamos a implementar el protocolo. Para ello, añade el nuevo y vacío textoViewDidChange: que se muestra en Figura 13 directamente debajo del appNameChanged: .

Figura 13 – Añade el textoViewDidChange: .

Línea por línea, necesitamos el código en el textoViewDidChange: para hacer exactamente lo que el código en el appNameChanged: . Entonces, ¿qué deberías hacer? En primer lugar, hablemos de lo que deberías no hacer.

Uno de los mayores errores que cometen los desarrolladores novatos (y desafortunadamente incluso algunos desarrolladores experimentados) es copiar el código de un método y pegarlo en otro. ¿Por qué es esto un problema? Uno de tus objetivos como desarrollador es evitar crear código duplicado. ¿Por qué? Si alguna vez tienes que hacer un cambio en el código (y eventualmente lo harás) significa que hay más de un lugar donde tienes que hacer el cambio.

Entonces, ¿qué deberías hacer en su lugar? Deberías descomponer el código en un método separado que pueda ser llamado desde varios lugares de tu aplicación. Eso es exactamente lo que vamos a hacer ahora.

  1. Añade un nuevo método vacío isReadyToShare como se muestra en Figura 14 directamente debajo del texto ViewDidChange: . Ignora el icono rojo de error en la cuneta a la izquierda del código. Obtienes este error porque el -> Bool en la declaración del método especifica que este método debe devolver un valor booleano. Como todavía no lo es, verás el error del compilador.Cuando terminemos de añadir el código, este método devolverá true si el botón Share debe estar habilitado, y false si no debe.

Figura 14 – Añade el nuevo método isReadyToShare .

  1. Ahora, en lugar de hacer un copiar y pegar, vamos a cortar y pegar el código del textoViewDidChange: en el nuevo método isReadyToShare . Para ello, selecciona todo el código en el textViewDidChange: como se muestra en Figura 15 haciendo clic y arrastrando desde la primera línea de código hasta la última línea de código del método.

Figura 15 – Seleccionar todo el código en el appNameChanged: .

  1. A continuación, escriba Comando+X para cortar el código de este método.
  1. Ahora haz clic dentro de los rizos del método isReadyToShare y pulsa Command+V para pegar el código en el método. Cuando termines, estos tres métodos deberían tener el aspecto de Figura 16.

Figura 16 – El código ha sido cortado de appNameChanged: y se ha pegado en isReadyToShare .

  1. Ahora tenemos que cambiar el código de este método para devolver false si el botón Share no debe estar habilitado, y true si lo está. Para ello, sustituye el código entre llaves en la sentencia if else como se muestra en Figura 17. Fíjate que también he añadido comentarios que explican cómo funciona este método.

Figura 17 – isReadyToShare devuelve NO para desactivar el botón Share y YES para activarlo.

  1. Ahora agregue el código que se muestra en Figura 18 al appNameChanged: y textViewDidChange: . Este código llama al método isReadyToShare en el controlador de la vista y almacena el valor devuelto en la propiedad enabled del botón Share.

Figura 18 – Pasar un mensaje isReadyToShare de ambos métodos.

  1. Hay un paso más que debemos dar para que esto funcione correctamente. Necesitamos almacenar una referencia al WriteReviewController en la propiedad delegado de la vista de texto.

Para ello, vaya al Project Navigator y seleccione el archivo Main.Storyboard y luego vaya al Inspector de conexiones (el botón en el extremo derecho de la barra de herramientas de los inspectores). Haga clic en la vista de texto en la superficie de diseño para seleccionarla. A continuación, haga clic en el pozo de conexión a la derecha de la salida de delegado y arrastre hasta el icono del Controlador de la Vista de Revisión de Escritura en el muelle encima de la escena de Revisión de Escritura como se muestra en Figura 19 . Al soltar el ratón, se conectará la salida de delegado y el controlador de vista .

Figura 19 – Conecta la propiedad de la vista de texto delegada al WriteReviewViewController .

¡Pateando los neumáticos!

Ahora estás listo para patear los neumáticos y ver cómo funcionan los cambios que hiciste.

  1. Haz clic en el botón Ejecutar en Xcode y cuando la aplicación aparezca en el Simulador, selecciona la opción Escribir una reseña .
  1. Escriba el texto en el campo de texto App Name primero, y luego escriba la vista de texto después. Observa que tan pronto como escribas el primer carácter en la vista de texto, ¡el botón Compartir estará activado!
  1. Intenta borrar todos los caracteres de uno de los controles y luego del otro para ver cómo se activa y desactiva el botón Compartir.

Cultivando la Perla

Si estás construyendo esta aplicación para un cliente, puedes mostrarle la aplicación para obtener algunos comentarios después de añadir esta nueva funcionalidad. En este punto, ¿qué pasa si el patrocinador te dice que una clasificación de cero estrellas no es aceptable (como en la App Store)? Ahora tienes que cambiar la aplicación para asegurarte de que el botón Compartir no esté activado hasta que se seleccione una clasificación.

Me gustaría que pensaras en lo que tendrías que hacer si simplemente hubieras copiado el código que comprobaba un campo de texto vacío y una vista de texto de la aplicación llamadaNameChanged: y lo hubieras pegado en el textViewDidChange: . Ahora tendrías dos lugares donde tendrías que añadir código que compruebe si el usuario seleccionó una calificación para la aplicación! Este es no el tipo de aplicación que quieres crear. Es mucho mejor hacer lo que hemos hecho en este post y crear un método separado que pueda ser llamado desde el appNameChanged: y textViewDidChange: , porque sólo hay un lugar donde tenemos que cambiar el código.

Conclusión

Crear aplicaciones de alta calidad es tanto una ciencia como un arte. El esfuerzo que pongas en crear una aplicación bien diseñada te reportará muchos dividendos durante la vida de tu aplicación. Te recomiendo que leas libros como Code Complete para aprender aún más sobre las grandes prácticas de codificación y elevar tus habilidades de desarrollo de aplicaciones!

<>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *