[MOOC] - Apps para dispositivos móviles (ed. 2016) - iOS. Desarrollo de una App
Summary
TLDREn este video, se ofrece una visión detallada de cómo crear una aplicación desde cero utilizando Xcode. Comenzamos con la creación de un proyecto de una sola vista, eligiendo un nombre y especificando si es para iPhone o iPad. Xcode genera el proyecto y se inicia la programación. Se exploran las diferentes partes de la interfaz de Xcode, incluida la barra de herramientas, el explorador de archivos, el editor de código y el inspector de propiedades. Se destaca la importancia del 'Storyboard', donde se define la interfaz de la aplicación y el flujo entre pantallas. A través de la biblioteca, se pueden añadir elementos como view controllers, botones y campos de texto. Se aborda el uso de 'Auto Layout' para asegurar que los elementos de la interfaz se adapten a diferentes dispositivos. Se muestra cómo previsualizar el diseño y cómo el código es esencial para la funcionalidad de la aplicación. Se ofrece una guía sobre cómo escribir código y utilizar las sugerencias de Xcode para un desarrollo más eficiente. Finalmente, se describe cómo vincular la interfaz con el código, crear transiciones entre pantallas y mostrar información dinámica, como la fecha actual. El video concluye con la compilación y prueba de la aplicación en el simulador de iOS o en un dispositivo físico.
Takeaways
- 📱 Empezamos creando un proyecto en Xcode, eligiendo una plantilla de 'aplicación de una sola vista' para iOS.
- 📝 Seleccionamos un nombre para el proyecto y decidimos si es para iPhone, iPad o universal.
- 🔧 Xcode genera el proyecto con una estructura básica que incluye un storyboard inicial llamado 'Main.storyboard'.
- 📂 El explorador de Xcode muestra los archivos de la aplicación y permite la gestión y búsqueda de errores en el código.
- ✂️ El editor de Xcode es donde se escribe y edita el código, así como la interfaz de usuario.
- 🔍 El inspector permite editar las propiedades de los objetos seleccionados en el editor o el explorador.
- 📚 La biblioteca de Xcode contiene componentes para vistas, como view controllers, botones y campos de texto.
- 🎨 El storyboard es crucial en la definición del interfaz de usuario y el flujo entre las pantallas de la aplicación.
- 🧩 Arrastrar y soltar componentes desde la biblioteca al storyboard permite construir la interfaz de la aplicación.
- 🔗 Auto Layout es una herramienta de Xcode para definir cómo los elementos de la interfaz se ajustan en diferentes tamaños de pantalla.
- 📅 Para mostrar la fecha en la interfaz, es necesario enlazar el label con el código y configurar la propiedad correspondiente.
- ➡️ Se puede previsualizar el Auto Layout y la apariencia de la aplicación en diferentes dispositivos sin necesidad de ejecutarla.
- 🔄 El proceso de compilación y ejecución de la aplicación en el simulador o un dispositivo físico permite probar y verificar el funcionamiento de la aplicación.
Q & A
¿Qué tipo de proyecto se va a crear en Xcode?
-Se va a crear una aplicación para iOS de una sola vista.
¿Cómo se llama el proyecto que se está creando?
-Se llama 'Mi App' como muestra de originalidad.
¿Para qué dispositivos se puede crear la aplicación en Xcode?
-La aplicación puede ser para iPhone, iPad o universal, es decir, para ambos dispositivos.
¿Qué se encuentra en la parte superior de Xcode?
-En la parte superior está la barra de herramientas con información sobre el estado de Xcode y botones para modificar la vista y ejecutar el programa.
¿Dónde se pueden ver y gestionar los archivos de la aplicación en Xcode?
-Los archivos se pueden gestionar en el explorador, que se encuentra a la izquierda de la pantalla.
¿Qué es el editor en Xcode y qué se utiliza para hacer?
-El editor es la vista central que se utiliza para escribir código, editar la interfaz y realizar otras tareas dependiendo del tipo de archivo seleccionado.
¿Qué es el inspector en Xcode y qué permite hacer?
-El inspector permite editar las propiedades de un objeto seleccionado, y cambia según lo que se seleccione en el editor o en el explorador.
¿Qué es un storyboard en una aplicación iOS y cómo se relaciona con Xcode?
-Un storyboard es un archivo en el que se define el interfaz de las diferentes pantallas de la aplicación y el flujo entre ellas, y se trabaja con él a través de Xcode.
¿Cómo se pueden agregar constraints a una vista en el storyboard de Xcode?
-Se selecciona la vista y se da clic en el botón 'ping' en la esquina inferior derecha del storyboard para seleccionar y aplicar los constraints deseados.
null
-null
¿Qué es Auto Layout y cómo se utiliza en Xcode?
-Auto Layout es una herramienta proporcionada por Apple para crear interfaces de usuario adaptables a diferentes dispositivos y tamaños de pantalla, se utiliza para añadir constraints a los elementos de la interfaz.
¿Cómo se puede previsualizar el funcionamiento de Auto Layout sin ejecutar la aplicación?
-Se divide la pantalla para mostrar la vista denominada 'asistente' y se le indica que muestre el preview, lo cual permite añadir diferentes previsualizaciones para distintos dispositivos.
¿Cómo se vincula el código con la interfaz creada en Xcode?
-Se utilizan herramientas visuales en Xcode para vincular elementos de la interfaz, como un botón, con el código necesario para su funcionamiento, evitando la necesidad de escribir código manualmente en muchos casos.
¿Cómo se prueba una aplicación en Xcode antes de ejecutarla en un dispositivo físico?
-Se selecciona el tipo de simulador en el que se desea probar la aplicación o se conecta un dispositivo físico a través de USB, luego se da clic en el botón correspondiente para compilar y ejecutar la aplicación en el simulador.
Outlines
📱 Creación de una aplicación en Xcode
Se describe el proceso de creación de una aplicación desde cero en Xcode. Incluye la selección del tipo de proyecto, la elección de una plantilla de una sola vista, la asignación de un nombre al proyecto y la especificación de la plataforma (solo iPhone, iPad o universal). Se menciona la generación del proyecto por Xcode tras la selección de las opciones iniciales y comienza el tour por las diferentes partes de la interfaz de Xcode, como la barra de herramientas, el explorador de archivos, el editor de código, el inspector de propiedades y la biblioteca de componentes. Destaca la importancia del storyboard en la definición de la interfaz de las pantallas y el flujo entre ellas, así como el uso de elementos como el view controller y la adición de constraints para el diseño adaptable.
💻 Programación y diseño en Xcode
Este párrafo se enfoca en el desarrollo y diseño de la aplicación utilizando Xcode. Se aborda el acceso al editor de código a través de la selección de un archivo fuente, la ayuda de Xcode para escribir código más rápido y con menos errores mediante sugerencias, y la implementación de variables para almacenar información, como la fecha actual. Se explica cómo se puede crear una segunda pantalla, asignarle un color de fondo y conectarla con la primera pantalla mediante un componente de navegación. Además, se detalla cómo enlazar elementos de la interfaz con el código, como hacer que un botón lleve a otra pantalla y cómo mostrar la fecha en un label. Finalmente, se menciona el proceso de compilación y ejecución de la aplicación en el simulador de iOS o en un dispositivo físico, y se destaca la importancia de probar la aplicación para asegurar su correcta funcionalidad.
Mindmap
Keywords
💡Xcode
💡Aplicación de una sola vista
💡Storyboard
💡Inspector
💡Auto Layout
💡View Controller
💡Botón
💡Leyenda
💡Compilación
💡Simulador
💡Transición
Highlights
Se realizará un tour por Xcode para ver cómo se crea una aplicación desde cero.
Se probará el resultado en el simulador de iOS.
Se seleccionará el tipo de proyecto, en este caso, una aplicación para iOS de una sola vista.
Se puede elegir si la aplicación es solo para iPhone, para iPad o universal.
Xcode generará el proyecto después de seleccionar los valores iniciales.
Se dará un tour por las diferentes partes de Xcode antes de comenzar a programar.
La barra de herramientas de Xcode muestra información sobre la actividad actual y opciones para modificar la vista.
El explorador permite ver y gestionar los archivos que componen la aplicación.
El editor es la vista utilizada para escribir código y editar la interfaz.
El inspector permite editar las propiedades del objeto seleccionado.
La biblioteca ofrece componentes para usar en las vistas, como view controllers y botones.
El storyboard es crucial en las aplicaciones iOS y define la interfaz de las pantallas y el flujo entre ellas.
Se puede arrastrar y soltar componentes desde la biblioteca para construir la interfaz.
Auto Layout es una herramienta para aplicar constraints y definir la posición y tamaño de los elementos de la interfaz.
Se puede previsualizar cómo funciona Auto Layout en diferentes dispositivos sin ejecutar la aplicación.
El editor de Xcode proporciona herramientas para facilitar el desarrollo en la plataforma.
Se puede guardar información en variables y enlazar la interfaz con el código para su funcionamiento.
Se pueden crear transiciones visuales entre pantallas y enlazar elementos con código sin escribir manualmente.
Se puede vincular elementos de la interfaz con el código para mostrar información, como la fecha.
Se puede compilar y ejecutar la aplicación en el simulador o en un dispositivo físico conectado por USB.
Xcode tarda más en compilar proyectos grandes, pero luego se puede probar la aplicación en el simulador.
Transcripts
a continuación haremos un tour por xcode
veremos cómo se crea una app desde cero
y probaremos el resultado en el
simulador de ellos
empezamos abriendo x code y
seleccionando el tipo de proyecto que
vamos a crear en nuestro caso será una
aplicación para ellos de una sola vista
esto es simplemente la plantilla inicial
posteriormente podemos ir añadiendo más
vistas si es necesario
seleccionamos un nombre para el proyecto
en un alarde de originalidad lo vamos a
llamar mi app en esta ocasión vamos a
decirle que sea solo para iphone aunque
podría ser también para ipad o universal
es decir para ambos dispositivos
una vez seleccionados los valores
iniciales xcode genera el proyecto y ya
podemos empezar a programar hagamos un
tour por las diferentes partes de líder
antes de empezar
en la parte superior se encuentra la
barra de herramientas con información
sobre qué está haciendo xcode en estos
momentos botones para modificar la vista
que tenemos en pantalla y otros con los
que ejecutar el programa que estamos
construyendo
en la parte de la izquierda se encuentra
el explorador donde podemos ver y
gestionar los diferentes archivos que
componen nuestra app también desde ese
panel podemos acceder a otros tipos de
exploradores para por ejemplo buscar
texto en cualquier parte de la app o
navegar entre los posibles errores que x
code haya detectado en nuestro código
en la parte central está el editor es la
vista que utilizamos para escribir
código editar la interfaz u otras muchas
cosas según el tipo de archivo que
tengamos seleccionado en el explorador
por ejemplo si seleccionamos el proyecto
en sí podemos modificar las
características del mismo como el nombre
el dispositivo o la orientación en la
que funcionará
a la derecha tenemos el inspector el
cual cambiará completamente según que
tengamos seleccionado tanto en el editor
como en el explorador pero que
básicamente nos permite editar las
propiedades de ese objeto seleccionado
finalmente en la parte inferior derecha
tenemos la librería donde encontramos
entre otras cosas los componentes que
podemos usar en nuestras vistas aquí hay
diferentes tipos de view controllers
botones campos de texto etcétera una de
las partes más importantes de una
aplicación ios es el storyboard es un
archivo en el cual a través de xcode
definiremos el interfaz de las
diferentes pantallas de nuestra
aplicación siempre se crea uno por
defecto con cada aplicación llamado mein
story word
en él es donde definimos el interfaz de
nuestras pantallas así como el flujo que
habría entre ellas
desde la biblioteca podemos arrastrar
cualquier componente por ejemplo en este
caso vamos a empezar con un bio
controller como hemos dicho esto sería
una de las pantallas de nuestra
aplicación
luego podemos arrastrar una vista que
viene a ser un contenedor dentro del
propio view controller
como vemos podemos posicionar la en
cualquier parte del bío controller
accediendo a sus propiedades en el
inspector podemos por ejemplo cambiarle
el color
a continuación vamos a ponerle un lay
ball que no es más que una etiqueta en
la que podemos poner cualquier texto
la pondremos dentro de la vista a la
izquierda podemos ver la jerarquía de
elementos que estamos creando vista del
bío controller vista ley bold
por último añadiremos un botón
algo a tener en cuenta es que en story
board por defecto los bio controles
tienen un formato cuadrado esto no
parece tener mucho sentido ya que no
existe ningún dispositivo ellos con ese
formato de pantalla esto es así porque
apple no quiere restringir el interfaz
que estamos creando a ningún dispositivo
concreto para conseguirlo nos
proporciona una herramienta denominada
auto leyes para usar auto layout
deberemos añadir constraints limitación
o restricción en inglés por ejemplo
queremos que nuestra vista esté pegado a
los márgenes de nuestro view controller
y que tenga una altura de 150 puntos
para lograrlo tendremos que seleccionar
la vista y darle al botón ping que
aparece en la esquina inferior derecha
del storyboard ahí seleccionamos los
constraints que queremos aplicarle
en nuestro caso el superior izquierdo
derecho y de altura
posteriormente vamos a hacer que el
'label permanezca siempre centrado
dentro de la vista para lo cual lo
seleccionamos y aplicamos los
constructos correspondientes esta vez
con el botón alain en este caso añadimos
constraints para alinear el playball
tanto en horizontal como en vertical
también añadiré constraints al botón
esta vez usando un atajo
en cualquier momento podemos
previsualizar cómo está funcionando auto
layout sin necesidad de ejecutar la
aplicación para ello dividimos la
pantalla mostrando la vista denominada
asistente y le decimos que muestre el
preview
podemos añadir diferentes
previsualizaciones para los distintos
dispositivos
al hacerlo vemos que en todos ellos se
mantienen los constraints que hemos
creado en auto layout
la otra pata sobre la que se sostiene en
nuestras aplicaciones es por supuesto el
código a continuación veremos el editor
de xcode y las herramientas que nos
proporciona para hacer más fácil el
desarrollo en la plataforma para entrar
en el editor de código simplemente
deberemos seleccionar uno de los
archivos fuente del explorador por
ejemplo en este caso el archivo view
controller punto suite contiene el
código correspondiente a la vista que
acabamos de crear
como estamos utilizando un componente
estándar de apple ya viene con algo de
código pre escrito que nos ayudará a
empezar
vemos que a medida que vamos escribiendo
x nos va dando sugerencias esto nos
ayudará a programar más rápido y con
menos errores
vamos a guardar en una variable la fecha
del momento en que se entra en esta
pantalla
el paso que nos quedaría finalmente
sería enlazar el interfaz que hemos
creado con el código necesario para que
éste funcione para esto x nos
proporciona unas herramientas muy
visuales primero vamos a hacer que el
botón nos lleve otra pantalla para eso
no necesitamos escribir nada de código
primero creamos la otra pantalla y le
damos un color de fondo para
distinguirla
a continuación creamos el componente de
navegación que nos permitirá movernos de
una pantalla a otra y volver atrás
mostrando el botón en la parte superior
finalmente enlazamos el botón con la
segunda pantalla arrastrando mientras
mantenemos apretada la tecla control y
le decimos el tipo de transición que
queremos
lo último que haremos será conseguir que
el lay ball muestre la fecha para ello
necesitamos enlazar el lay ball con el
código x que nos permite mostrar las dos
pantallas una al lado de la otra
entonces pinchamos en ley bold y
arrastramos con control apretado hacia
el código eso nos creará una propiedad
en nuestro código con la cual podemos
modificar el ley bold le diremos que
simplemente muestre la fecha
finalmente vamos a probar nuestra
aplicación le diremos aquí scott que
compila nuestro código comprobando por
el camino si tiene algún error y que
ejecute la aplicación al simulador de
ellos ahora compilar y ejecutar la
aplicación tendremos primero que
seleccionar en qué tipo de simulador
queremos probarla o si lo queremos hacer
en un dispositivo físico que tengamos
conectado por usb
después dándole a este botón haremos que
se compila y ejecute la aplicación xcode
se toma su tiempo sobre todo en
proyectos grandes y al acabar podemos
probar nuestra app en el simulador y
comprobar que todo funciona como debería
Посмотреть больше похожих видео
5.0 / 5 (0 votes)