[MÚSICA] Hola, te doy la más cordial bienvenida. En este vídeo estaremos abordando el patrón de diseño modelo vista controlador que Apple ha adoptado como la base fundamental para el desarrollo de apps. Cuando tú observas un proyecto en Xcode vas a poder ver pues que hay un montón de componentes. Hay una gran variedad que van desde los componentes visuales, segmentos de códigos, o clases que vamos a estar declarando. Y además lo que son los recursos que se utilizan dentro de la aplicación como, por ejemplo las fotografías o los sonidos. Debemos estructurar todos estos elementos de una forma ordenada para que al pasar un proyecto de un programador a otro, éste pase de la manera más trasparente posible y podamos darle continuidad a una aplicación desarrollada. El patrón de diseño MVC viene de la ingeniería de software, y no es otra cosa más que un conjunto de técnicas o de mejores prácticas en el desarrollo de sistemas complejos. El patrón de diseño modelo vista controlador está estructurado por 3 componentes. Esos 3 componentes les llamamos gradas y normalmente se representan, en el mundo de la ingeniería de software, a través de una barra vertical o de una columna. La primera, el primer elemento se trata de la grada de vista. En la grada de vista vamos a tener todos los elementos con los cuales el usuario hace interacción. En nuestro caso de una app, pues van a ser los componentes visuales que forman nuestra interfaz gráfica. El segundo componente que vamos a tener, se le llama la grada del modelo. En la grada del modelo vamos a tener todos los algoritmos y todos los datos necesarios que hacen la funcionalidad particular, o la funcionalidad sustancial de nuestra app. Y, finalmente, en el medio, en la comunicación entre la vista y el modelo vamos a tener la grada controladora. La grada controladora lo que hace es una comunicación, por un lado, con la vista, y por otro lado con el modelo. Al tener estas 3 gradas en esta forma de comunicación y de organización, vamos a tener un modelo que se le llama desacoplado. Esto significa que, por ejemplo, yo puedo modificar la interfaz de usuario sin tener que modificar el algoritmo sustancial, o la forma de estructurar los datos que me está resolviendo la funcionalidad. De la misma manera, yo podría ir a mejorar el algoritmo, o a mejorar la estructura de los datos, y no por ello tendría que cambiar mi interfaz gráfica. El único que se enteraría de estos cambios pues sería mi grada controladora, que es la que hace de comunicación. Pasemos ahora a un ejercicio en Xcode aplicando esos conceptos. Ahora voy a describir cómo el patrón de diseño MVC se aplica en el desarrollo de apps. A través del storyboard, nuestro storyboard pues va a ser nuestra vista o nuestro controlador de vista, ya que en éste es donde tenemos el conjunto de componentes visuales, que en este caso conforman la entrada de datos, particularmente, del peso y de la estatura, dentro de una aplicación de calculadora de índice de masa corporal. Por otro lado, vamos a tener, revisando aquel código, vamos a tener una clase que es la que hereda de la clase UIViewControler y que es la que va a hacer la representación del código de esta vista. Si nosotros revisamos aquí, esta vista con qué código está asociado, vamos a encontrar que está asociado con la clase ViewController. Esta es la clase, esta clase declarada aquí es la que tenemos aquí en nuestra estructura del proyecto. Ahora, ¿cómo hacemos la comunicación entre la vista y el controlador? La comunicación entre la vista y el controlador la vamos a estar haciendo a través de la definición de componentes llamados IB outlets e IB actions. Voy a explicar esto a través del código ahora. Lo que voy a hacer es voy a activar mi asistente. Lo voy a activar de manera automática y en la parte central, entonces, tengo lo que es la grada de vista. Y en la parte de la derecha tengo lo que es la grada controladora. Si yo quiero asociar que este componente visual esté asociado con una variable, lo que voy a hacer es crear un nuevo outlet. En este caso, presionando la tecla control y arrastrando como si hiciera un action de drag and drop con mi mouse, voy a poder lanzar este arrastre, esta acción, y aquí me va a preguntar si quiero hacer una conexión de tipo outlet, de tipo action, o una colección de outlets. Voy a decirle que es un outlet y le voy a llamar, en este caso, la variable peso porque es donde quiero almacenar el valor introducido por el usuario para el peso. Hago la conexión y como podrá notar, tengo la declaración de la variable que es de tipo IB outlet y que tiene la notación a través del arroba. Noten nada más cómo este símbolo en el cual aparece un más, precisamente, cuando paso sobre él, está asociando en ese momento, el componente visual. Entonces aquí se ve claramente la comunicación del código con la comunicación de la parte de la vista. Tengo la comunicación entre el controlador de vista y el controlador, y la grada controladora. Ahora voy a jalar el de estatura y voy a hacer el mismo proceso, con un drag and drop, manteniendo la tecla control presionada. Y voy a hacerlo para estatura. Aquí lo tengo. Y tengo estas 2 partes. Vamos a pasar ahora a asociar, en este caso, una acción al botón de calcular. En este caso yo quiero definir una función en donde sea invocada cuando se haga clic o se invoque la acción de este botón. Entonces, otra vez, manteniendo la tecla control y el botón izquierdo del mouse, tratando de hacer un drag and drop, jalo desde el botón calcular hasta la parte derecha, que es donde tengo el controlador de la vista, y me aparece. En este caso no voy a seleccionar un outlet. Lo podría hacer, por ejemplo, si quisiera modificar las propiedades del botón, como por ejemplo, su texto o su color. En este caso voy a hacer una acción. Y le voy a poner, como es una acción, un verbo en infinitivo, que va a ser calcular IMC. Entonces, aquí ya tengo asociado, y si se fijan, cuando hay un IB outlet o un IB action tengo las, la comunicación entre lo que es la grada de vista, que está en la parte central, con lo que es la grada de control, que lo tengo en la parte derecha. Ahora que tengo la definición del método calcular IMC que va a ser invocado cuando el usuario haga tap sobre este botón, pues necesito definir qué es lo que va a pasar. Para ello, entonces, voy a pasar a la parte de la revisión del código. Aquí pueden ver como yo tengo mis outlets y mi método de calcular. Y, bueno vamos a agregar el siguiente código, que ahora voy a ir explicando cada una de sus líneas. Muy bien, en la línea 21 tenemos la declaración de una variable, que le vamos a llamar IMC, donde vamos a guardar el resultado del cociente del cálculo del peso entre la estatura al cuadrado. Y voy a, en la línea número 22, voy a declarar una constante que le voy a llamar peso local, en donde voy a traer lo que el usuario hubiere escrito a través del IB outlet llamado peso, y se lo voy a colocar aquí. Eso lo hago en la línea número 23. Si se fijan, a partir de lo que yo tengo en el outlet peso, eso quiere decir en el componente visual peso, y estoy sacando el contenido textual, a partir de esto estoy construyendo un valor doble que se lo estoy asociando a esta constante. De la misma forma, en la línea número 24, estoy definiendo una constante que se le llama estatura local donde, en este caso, yo estoy haciendo de otra forma pero igual estoy sacando, a partir del outlet estatura, el campo texto nada más que si se fijan lo estoy haciendo en una sola línea y no en 2, como lo había hecho anteriormente. Y luego, lo que voy a hacer en la línea 25 es el cálculo ya del índice de masa corporal, que es la división entre el peso sobre la estatura al cuadrado. Y finalmente, esto lo voy a imprimir en la consola como el resultado. Entonces esto pues ya me permitiría tener una calculadora que ahora voy a ejecutar. La calculadora ya me va a permitir tener la introducción de los datos y la ejecución. Entonces aquí voy a tener, no se preocupen ahorita si no está exactamente centrado. Próximamente va a haber una lección para ello. Voy a introducir un peso de 80 kilogramos y una estatura de 1.7 metros. Y al momento de hacer calcular, si se fijan aquí en la parte de la consola del Xcode, me está indicando el cociente, que es el 27. Y a partir de esto yo puedo determinar pues si el individuo se encuentra en un peso ideal, en un peso de sobrepeso o, bien, en un tipo de obesidad. Antes de terminar quisiera dejarte esta pequeña pregunta. Espero que tu respuesta haya sido correcta y espero verte en el próximo video. [MÚSICA]
