Tutorial: Crear un app con MVC

Alfredo Lucoaluco@alumnos.uai.cl

Mockup de la appLa idea es realizar un app que almacene frases por los usuarios y estos puedan ver sus comentarios anteriores.

Paso 1: Elegir el tipo de proyectoSe debe colocar la opción de iOS de tipo Single View Application.

Paso 2: Especificar el tipo de AppColocar un nombre la organización el identificador y el tipo de lenguaje (en este caso swift).

Paso 3: Arrastrar elementosCon xCode arrastrar los elementos que se indican en la figura.

Label

Buttons

Text

Button

Paso 4: Agregar Constraints al LabelCon el boton secundorio (Ctrl + click) seleccionar el label con el fondo de la app y colocar “center Horizontally in Container”, luego colocar las características que salen en la figura 2, es decir darle un margen superior de 70 pixeles.

Paso 5: Agregar Constraints a botones Up y DownA cada uno de los botones se le debe colocar un vertical spacing con respecto al label anterior (Ctrl + click encima del label) y realizar una separación de 40 pixeles entre los botones. Como ultimo paso, se deben centrar los botones con respecto al fondo de la app y actualizar los constraints.

Paso 6: Agregar Constraints al textCentrar el texto con respecto al fondo y colocar un margen de 58 pixeles junto con su width y height respectivo (tal como indica la figura).

Paso 7: Agregar Constrints al botón WriteCentrarlo con respecto al fondo y colocar una separación de 119 pixeles.

Paso 8: Modelo -> Creación de la clase FraseEn file->New File crear un archivo .swift con los siguientes códigos, los cuales corresponderían a la clase frase que se desea guardar

Paso 9: Modelo -> Creación clase PhraseStorageDe la misma manera crear la clase que almacenara todas las frases

Paso 10: Controlador-> Agregar los OutletsSeleccionar el icono de los dos aros y luego con el label y el text con Ctrl arrastralo en alguna parte del ViewController.swift para que se tenga conexión del label y el text con el controlador.

Paso 11: Controlador -> Agregar los IBActionsDe la misma forma de los outlets, agregar los botones que interaccionarán con la app.

Paso 12: Controlador-> Creación del Storage e interacción con el botón Write

Paso 13: Implementación de boton Up y Down

App terminada!Felicitaciones, haz creado tu primera app.

Si tienen preguntas escribirme a aluco@alumnos.uai.cl