01 intro ios - appmovil.cem.itesm.mx€¦ · • incluye un simulador y los sdk de macos, ios,...

13
iOS Introducción 1 Xcode Xcode es la herramienta que se utiliza para desarrollar aplicaciones para Mac, iPhone, iPad, Apple Watch y Apple TV. Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. Es gratuita, se puede descargar de: https://developer.apple.com/xcode/ 2

Upload: others

Post on 21-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

iOSIntroducción

1

Xcode• Xcode es la herramienta que se utiliza para desarrollar

aplicaciones para Mac, iPhone, iPad, Apple Watch y Apple TV.

• Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS.

• Es gratuita, se puede descargar de:

➡ https://developer.apple.com/xcode/

2

Page 2: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

SDKIncluye un conjunto de librerías que facilitan el desarrollo de aplicaciones.

Imagen tomada de: iOS Development with Swift

by Craig GrummittPublished by Manning Publications, 2017

3

Corriendo apps en el móvil

• Para correr aplicaciones en un dispositivo móvil, no es necesario registrarlo.

• Con tu Apple ID puedes dar permiso a Xcode de instalar apps en tu dispositivo.

4

Page 3: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Usando Xcode

• Ejecuta Xcode desde las aplicaciones.

• Crea un proyecto nuevo

5

Tipo de proyecto• Crea un proyecto nuevo.

• Selecciona Single View App

6

Page 4: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Configuración

• Configura tu proyecto con los parámetros mostrados.

• Guarda el proyecto en alguna carpeta especial.

★ Se crea automáticamente una carpeta con el nombre del proyecto.

7

El proyecto en Xcode

Archivos del proyecto

Controles de ejecución

Configura la interface

Datos de la aplicación

Ubicación del proyecto

Dispositivo

Dispositivo para la

simulación

Explorador del proyecto Editor Propiedades

Orientación

8

Page 5: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Componentes de Xcode

• Editor

• Simulador de iOS (no es emulador)

• Interface Builder

• Instruments

9

Corriendo las apps

• Selecciona el simulador o dispositivo donde quieres correr tu aplicación y oprime el botón de Run.

• Combinaciones de teclas comunes.

★ Cmd - R. Correr

★ Cmd - B. Compilar

★ Shift-Cmd-K. Borrar compilación

10

Page 6: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

El simulador• Contiene algunas apps instaladas.

★ Fotos.

★ Safari

★ Calendario

★ Mapas

• Hardware.

★ GPS

★ Red inalámbrica.

• Combinaciones de teclas.

★ Home. Shift-Cmd-H

★ Rotar. Cmd-Right/Left

11

Los archivos de la aplicación

• AppDelegate.swift y SceneDelegate

★Ciclo de vida de la app

★ Interacción con el sistema

★Responder a eventos

• ViewController.swift

★ Controlador

• Main.storyboard

★ Vistas y navegación

• LaunchScreen.storyboard

★ Vista/Splash screen

• Info.plist

★Datos de la app

12

Page 7: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Hola Mundo

• Agrega una etiqueta en el centro de la pantalla con el texto "Hola Mundo"

• Corre la aplicación y observa el resultado.

13

¡Felicidades!• Has construido tu primer

aplicación para iPhone.

• Rota el teléfono y observa el comportamiento.

• Cmd - Right, Cmd - Left

• Bueno, un poco desalineada en algunos teléfonos, pero eso lo arreglaremos fácilmente.

• Agrega constraints.

14

Page 8: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Swift• Es un lenguaje de programación moderno, poderoso e intuitivo para macOS, iOS,

watchOS y tvOS.

• Es de código abierto.

• Inferencia de tipos.

• https://swift.org/

• Disponible también para Linux.

• Documentación en línea.

• https://docs.swift.org/swift-book/index.html

• Libro

• https://books.apple.com/mx/book-series/swift-programming-series/id888896989

15

Playgrounds

• Permiten interactuar con el lenguaje para ver resultados de inmediato.

• Como el intérprete de python.

• Descarga el playground y ábrelo en Xcode.

★ https://docs.swift.org/swift-book/GuidedTour/GuidedTour.playground.zip

16

Page 9: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Temas importantes

• Constantes

• Variables

• Control de flujo

• Funciones

• Listas, Diccionarios

• Opcionales

17

Ejercicio• Escribe una aplicación que convierta millas a

kilómetros.

• Aplica el patrón de diseño MVC.

18

Page 10: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

VistaAbre el storyboard y agrega un componente UILabel con el texto "Convertidor de Mi a Km".

Cambia el tamaño para que se ajuste a los márgenes en la parte superior.

Agrega constraints para que la etiqueta quede fija en la parte superior.

19

Vista• Agrega una etiqueta para millas.

Esta se ajusta al margen izquierdo, derecho y al título.

• Agrega un UITextField. Ajústalo al margen izquierdo, la etiqueta superior y al margen derecho.

20

Page 11: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Vista

• Agrega los componentes restantes.

21

Modelo

class Convertidor{ var millas: Double = 0 var kilometros: Double = 0 func convertirAMillas() { millas = kilometros / 1.6 } func convertirAKilometros() { kilometros = millas * 1.6 }}

• Agrega un archivo de Swift con nombre Convertidor.swift y agrega la declaración de la clase.

• Agrega al controlador una referencia a un objeto de este tipo.

22

Page 12: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Referencias a los campos de texto

• Agrega referencias a los campos de texto, arrastra el componente hacia el controlador con la tecla Ctrl oprimida.

• También puedes arrastrar con click derecho (sin Ctrl)

• Crea un action para el botón arrastrando el botón hacia el controlador con la tecla de Ctrl oprimida.

Ctrl-Drag

23

Convirtiendo• Escribe el código necesario

para hacer la conversión.

• Corre la app.

24

Page 13: 01 Intro iOS - appmovil.cem.itesm.mx€¦ · • Incluye un simulador y los SDK de macOS, iOS, watchOS, tvOS. ... • Simulador de iOS (no es emulador) • Interface Builder • Instruments

Mejoras

• Si son campos numéricos, configurar teclado.

• Si el campo está vacío, no hacer la conversión.

• Ocultar el teclado:

★ Al hacer la conversión.

★ Al tocar el fondo.

25