PDF de programación - Programación básica sobre smart phones IOS

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS



PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115

Ciclo I-2016



GUIA DE LABORATORIO N° 1b



PROGRAMACION BASICA SOBRE SMART PHONES IOS



Objetivos:

*Conocer el entorno de programación del IDE Xcode para programar bajo el sistema IOS.

*Hacer una aplicación en IOS que nos permita conocer algunas generalidades del trabajo en
Xcode, con el lenguaje objective C.

*Ejecutar la aplicación mediante un Dispositivo Virtualizado en IOS.



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS



PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115

Ciclo I-2016



Contenido
PROGRAMACION EN IOS ................................................................................................................ 1

Programa 1(Proyecto básico IOS) ........................................................................................................ 1



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015


PROGRAMACION EN IOS


Simulado en Iphone

Programa 1(Proyecto básico IOS)


1) Al iniciar El SO Mac El Capitan, se solicitara una contraseña para el usuario Programación para

dispositivos moviles, la contraseña es pdm.

2) Creación del proyecto en Xcode.

a. Entrar a IDE Xcode



1



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015

b. Aparecerá una pantalla como la siguiente en la que se debe elegir la opción “Create a new

Xcode project” y cree un nuevo proyecto con el nombre “carnet01”

c. Luego elegir las opción “Single View Application” como se ve en la siguiente imagen, y dar

clic en next



2






UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015

d. Colocar las siguientes especificaciones:

Product Name: carnet01

Organization Name: Su nombre Completo

Company Identifier: sv.edu.ues.fia.eisi

Language: Objective-C

Devices: Iphone

Luego Next.

e. Ubicar su carpeta de carnet_ios

Y presionar créate.



3



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015



4



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015

3) Cambiar la Versión de despliegue de IOS a 8.1(Deployment Target)

4) En la parte superior izquierda, definir el dispositivo de prueba(IPhone 6)



5



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015

5) Abrir el archivo Main.storyboard



Para cambiar la apariencia del Main Storyboard ver en la parte inferior las siguientes opciones:

Si no se encuentra configurado de esa manera modificarlo para que quede con esas opciones, esto
se realiza para que se acople al tamaño del Iphone 6.



6



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115

Ciclo I-2015



6) En la parte inferior derecha aparecen diferentes elementos llamado “Librería de objetos” que

pueden ser utilizados en una aplicación, se ve de la siguiente manera:

Buscar en la librería de objetos los siguientes elementos para agregarlos al main Stroryboard:



1 Label



2 TextField



3 Button



7



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Al encontrar los elementos a utilizar arrastrar al main Storyboard

Ciclo I-2015

Al finalizar de colocarlos debe quedar de la siguiente manera:



8

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015

7) Para realizar las conexiones habilitar la Vista de asistente (Show the Assistan editor) que es el

siguiente icono :

y esconder la columna de utilidades (Hide or show Utilities) con el siguiente

icono:

.

Estas opciones se encuentran en la parte superior derecha y se observarán de la siguiente manera:

8) En el área de trabajo de la izquierda, ubicar el archivo ViewController.h, en la barra de direccion,

como se muestra a continuacion.



9) Para realizar la conexión seleccionar la Etiqueta, presionar la Tecla Ctrl y arrastrar hacia el área de

trabajo de la izquierda ubicando la conexión dentro de @interface y @end como se muestra a
continuacion.



9



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2015

Esto abrira un cuadro de dialogo en el cual se escribira el nombre de la etiqueta como “resultado” y
presione Connect.


Se generara automaticamente la propiedad “resultado” de tipo UILabel



10) Realizar la misma operación de arrastrar hacia el archivo .h presionando la tecl ctrl para los



TextFields.

Cuando el cuadro de dialogo aparezca ponerles en la opción Name “numero1” y “numero2”

respectivamente a cada TextField.

Y se generará el siguiente código :



10



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115

Ciclo I-2015



11) Para realizar la conexión de los botones, se realizara el mismo metodo de arrastrado presionando la

tecla Ctrl.



Generara una ventana en la cual a diferencia del label y los textfield, seleccionaremos en la
caracteristica Connection la opcion Action: y le pondremos de nombre “sumar” y presione Connect.



Esto generara una acccion como se observa.

Realizar el mismo procedimiento para los otros botones, simplemente cambiar el nombre a “restar”
y “multiplicar”.



11



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115

Ciclo I-2015



Al finalizar quedará la configuración del archivo .h de la siguiente manera:

12) Utilice el selector de la ventana de edicion de codigo para cambiarse hacia el archivo de

interfaz(ViewController.m)



13) En el archivo ViewController.m, se vera creado tambien un método con el nombre de sumar,

modificarla para que se observe de la siguiente manera:



De la misma manera modifique el método restar en el archivo ViewController.m

Por último modifique el metodo multiplicar:



14) Corralo

Si tienes dudas consulta a tu instructor.

Comprima su carpeta de proyecto y súbalo en el link respectivo (Guía de Laboratorio 2(IOS)).



12