Una app con realidad aumentada

Loading...

From the course by Tecnológico de Monterrey

Interactuando con el hardware del dispositivo iOS

35 оценки

Tecnológico de Monterrey

Interactuando con el hardware del dispositivo iOS

35 оценки

Course 4 of 5 in the Specialization Desarrollo de Aplicaciones iOS

En este curso construirás aplicaciones que logren interactuar con el hardware del dispositivo, con el propósito de crear aplicaciones más interesantes, atractivas y útiles. El hardware del dispositivo incluye aditamentos como bocinas, GPS, acelerómetro, cámara, etc., por lo que las aplicaciones pueden interactuar con este hardware para reproducir música, conocer la posición del dispositivo en el Globo Terráqueo, conocer la aceleración a la que está sujeto el dispositivo debido al movimiento que se realiza con él, o agregar fotografías del usuario a sus aplicaciones.

From the lesson

Fotos

¡Hola a todos! Este módulo agregar fotos del usuario a las aplicaciones. Dichas fotos provienen de alguna de las dos fuentes principales del dispositivo, la cámara o el álbum de fotos. También se usa la cámara para crear aplicaciones de realidad aumentada. Como siempre, si tienes duda en un Quiz o Actividad, debes de escribir en el foro de discusión para pedir ayuda. (Y, si terminas temprano, espero que vayas a esta sección para ayudar al resto de tus compañeros.) Vayamos a revisar el material preparado para esta semana, suerte.

Manejo de fotos9:02

El delegado del Image Picker6:30

Manejo de fotos en una app12:12

Realidad aumentada7:15

Una app con realidad aumentada10:40

Resumen del curso y despedida3:59

Meet the Instructors

Dr. Víctor Manuel de la Cueva Hernández
Profesor Titular
Tecnologías de Información y Computación

[MUSIC]

Hagamos un ejemplo de realidad aumentada.

Va a ser un ejemplo muy simple, no vamos a hacer una relación entre la imagen real

y la imagen que estamos sobreponiendo.

Lo único que vamos a mostrar en el ejemplo es como sobreponer una vista

y cómo poderle colocar ciertos elementos,

un par de botones en este caso, para hacer ciertas acciones.

Pero no las vamos a estar relacionando, eso se hace de otra forma y hay que pensar

¿Qué aplicación queremos para hacer esta relación?

Nosotros solo vamos a mostrar cómo es que se hace esta superposición de la vista.

Pero antes como siempre vamos a hacer un pequeño sketch de nuestra vista para tener

una idea cuando entremos al código.

Nuestro ejemplo de overlay tiene en realidad dos vistas.

Como era de esperarse.

Una vista va a mostrar todo el tiempo la cámara,

todo el tiempo va a mostrar la cámara.

Esta cámara fue colocada por el Image Picker, como el caso de las fotos.

La segunda vista va a ser

la vista que vamos a poner encima de la cámara.

Aquí es donde vamos a colocar todos los elementos necesarios

que queremos que corran encima de la vista de la cámara.

Como esto es un ejemplo demostrativo en realidad no vamos a tener relación una

con la otra, en una aplicación real lo deberíamos hacer.

Ésta solo va a tener dos botones.

Un botón que va a ser, le vamos a poner arriba y otro botón que le vamos a poner

abajo.

En la parte de arriba de estos botones va a haber un letrero.

Y ese letrero se va a modificar.

Si le picamos al botón de arriba se va a poner arriba, la palabra arriba aquí.

Si le picamos al botón de abajo, se va a poner la palabra abajo.

Eso significa que este letrero necesita

un outlet para modificarse durante el programa.

Y estos dos botones necesitan simplemente actions, un action uno.

Y una acción dos, y este sería nuestro sketch para la aplicación.

Vayamos al código.

Abrimos un proyecto nuevo, single view,

ejemplo overlay, le vamos a llamar, lo guardamos.

Esto lo vamos a iniciar creando las clases de la vista que le vamos a poner encima.

Esto lo hacemos con new file.

Asegúrense que sea source en la IOS, cocoa touch class.

Y vamos a crear la clase overlay view controller,

porque es un controlador de vista.

Por eso en sub class le ponemos UI view controller.

Y asegurense de crear el archivo XIB que es la vista.

Para iPhone y Swift.

Listo, aquí vienen, ahí están las dos creadas.

El controlador en Swift y la vista en XIB.

Vamos a la vista.

Le cambiamos el tamaño.

Y vamos a agregarle los elementos que son muy simples.

Es un botón, que le vamos a llamar arriba.

Otro botón, que le llamamos abajo.

Y un letrero que va a cambiar su contenido dependiendo de cual botón se oprima.

Es muy simple pero es demostrativo, vamos a aumentarle el font y lo centramos.

Bien, vamos a conectarlas, bueno pero antes, esta vista, esta vista,

necesitamos cambiarle el color del background.

Nos vamos a seleccionar View y ahora sí a su background.

Y el color debe ser Clear Color para que sea transparente y se pueda ver la cámara.

Clear Color.

Ahora sí, vamos a conectarlas.

Los elementos primero el Label de la etiqueta vamos a ponerle letrero.

Listo, y las actions de los botones.

La primera es la action del botón de arriba.

Es un action, vamos a ponerle arriba.

Botón, no necesita sender, listo.

Y ahora el action de abajo.

Abajo, botón.

No necesita sender.

Ok.

Listo, borramos la etiqueta y nos vamos al código,

al código del controlador de esa vista.

Vamos a quitarle esto para que no nos estorbe.

Y esto también, para que no nos estorbe, ahí está.

Bueno el código aquí es muy fácil a letrero.text,

le asignamos la palabra el String arriba.

Y el de abajo, a letrero.text,

le asignamos la palabra abajo.

Vamos a ponerla con mayúsculas para que se distinga, ahí está.

¿Sí? Es todo lo que va a hacer.

Bien ahora vamos a nuestra aplicación principal, vamos a borrarle este código.

Bien, necesitamos decirle que vamos a implementar el delegado de

UImagePickerControllerDelegate porque vamos a requerir la cámara

y ese requiere UINavigationControllerDelegate,

ahí quedaron los dos, como en el caso de las fotos.

Empezamos definiendo la vista que vamos a superponer.

Esto es le vamos a llamar overlay, va a ser de la clase que acabamos de definir

OverlayViewController ahí está, esa clase.

Y tiene un constructor que nos permite colocar el archivo xibNitName con

el que se va a inicializar, y pues en este caso se llama igualito.

Ahí lo pueden ver, así que vamos a copiarlo.

El nickname.

Listo, tiene un segundo parámetro que es bundle.

Pero ese lo vamos a dejar en nil.

Ahí quedo, listo, esa es la vista que vamos a superponer.

Bueno para inicializarlo, lo vamos a hacer aquí,

esta se ejecuta cuando se carga el controlador.

Necesitamos otra función.

Necesitamos sobrescribir la función que se ejecute

cuando se carga la vista y esta se llama ViewDidAppear.

Empezamos llamando al super, porque la estamos sobrescribiendo,

super viewDidAppear animated con el mismo parámetro.

Y ahora sí, aquí vamos a hacer nuestro proceso.

Primero creamos el Picker,

que controla el ImagePicker,

UImagePickerController ahí quedo.

¿Sí?, como en el caso de las fotos, y luego lo vamos a configurar,

vamos a ver si está disponible la cámara.

Si la cámara está disponible, aquí está,

entonces empezamos toda nuestra configuración,

a miPicker el delegado self que es mi programa,

luego el sourceType, aquí está,

que tiene que ser obviamente la cámara.

UImagePickerControllerSourceTypeCamera.

Ahí quedo, y le tenemos que decir que no muestre los controles de la cámara.

¿Sí?, no queremos usar la cámara, queremos que nos muestre nada más

la imagen entonces, showsCameraControls, false.

Ok y aquí viene la parte medular.

La propiedad CameraOverlay del picker la vamos a sustituir por,

le vamos asignar, por la que acabamos de crear.

El overlay que creamos aquí arriba, punto view.

Esa es la parte medular, eso es lo que superpone la vista.

Y por último, pues lanzamos el picker con el presentViewController,

you lo saben animated true, completion nil.

Bueno pues está listo,

vamos a probarlo en el iPad obviamente porque el otro no tiene cámara.

El simulador no tiene cámara, entonces vamos a probarlo en el iPad, ¿de acuerdo?

Y vamos a ver como funciona, aquí va.

Aquí está la aplicación del overlay, verán que,

puedo tener la cámara encendida todo el tiempo y encima,

si alcanzan a ver las letras, arriba y abajo de mi vista que está sobrepuesta.

Vamos a ponerle abajo y debe aparecer el letrero abajo ahí en la parte superior.

Ahora le ponemos arriba y cambia de letrero.

Es decir, está interactuando muy bien ¿sí?,

y no deja de mostrarme lo que está en la cámara.

Les repito, estas dos vistas no tienen nada que ver,

pero el chiste es hacer aplicaciones que sí se relacionen una vista con la otra.

La realidad aumentada viene muy fuerte, por favor estudien al respecto,

practiquen al respecto y traten de imaginar nuevas aplicaciones.

Que esto les va a dar una gama muy amplia para poder hacer

desarrollos de una buena y entretenida aplicación para ustedes.

Muchas gracias.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play