Hola, bienvenido a cómo crear una aplicación para
principiantes. Si alguna vez has pensado en crear tu propia aplicación, este es el vídeo
para ti. Al final de este vídeo habrás creado tu primera aplicación.
Mire los 10 videos y habrá creado estas aplicaciones. La creación de estas aplicaciones
le enseñará cómo crear la interfaz de usuario de sus aplicaciones, cómo agregar gráficos, texto
e incluso botones a su aplicación. Cómo responder a la interacción del usuario, cómo
asegurarse de que su diseño funcione en múltiples tamaños y orientaciones de pantalla. Finalmente,
te mostraré cómo instalar esa aplicación en tu dispositivo para que puedas mostrarles a todos
tus amigos y familiares la aplicación que has creado. Soy Chris Ching, el fundador
de Code With Chris, donde los principiantes aprenden a crear una aplicación sin
experiencia en programación.
Crear una aplicación es simple, solo hay dos cosas que
necesitas saber: la primera es Xcode. Esta es la aplicación con la que creas aplicaciones
. Es gratis, úselo para construir la interfaz de usuario de sus aplicaciones, así como para escribir código para responder a la interacción del usuario y expresar lógica. El
código que escribimos sigue una determinada estructura o sintaxis y esto me lleva
a la segunda cosa que debes aprender: el lenguaje de programación Swift.
Para darte un ejemplo de cómo estas dos cosas funcionan juntas, imagina que tienes que
escribir un ensayo en inglés. En este caso, Swift sería el idioma inglés y
Xcode sería tu lápiz y papel. Esto es lo bueno de aprender
Xcode y Swift. Estas son las mismas herramientas que utilizarás para todo en
el ecosistema de Apple. Podrás crear aplicaciones para iPad y iPhone,
juegos para iOS, aplicaciones para Apple Watch, aplicaciones para Apple TV y aplicaciones para Mac. Ahora que sabemos lo que
necesitamos aprender, profundicemos. Primero, descarguemos Xcode. Si está usando
Windows, consulte la descripción a continuación para ver mi guía sobre cómo usar Xcode en Windows.
Si estás en una Mac, simplemente ve a Mac App Store y descárgala gratis.
Sin embargo, te advierto: probablemente necesitarás la última versión de Mac OS y
mucho espacio libre en el disco. Una vez que la haya instalado, inicie la aplicación y haga
clic en iniciar un nuevo proyecto Xcode.
En la parte superior de la siguiente pantalla
verás plantillas para todas las diferentes plataformas que mencionamos anteriormente. Asegúrate de
estar en la pestaña iOS y elige una aplicación de vista única. Haga clic en Siguiente. Aquí
podrá especificar algunas propiedades para su proyecto. Para el
nombre del producto, puede simplemente escribir un nombre para su aplicación. Simplemente llamaré a esto AppOne.
Puedes dejar el equipo como está. Para el nombre de la organización, puede ingresar su propio
nombre allí y para el identificador de la organización simplemente ingrese com punto, ya sea su
nombre o el nombre de su empresa y junto con el nombre del producto
formará un identificador para su aplicación. Lo importante es para el idioma,
asegúrese de tener Swift seleccionado y puede deseleccionar todas estas opciones aquí abajo.
Haga clic en Siguiente. Elija un lugar para guardar su proyecto. Puede dejar el control de fuente
sin marcar y luego hacer clic en crear. ¡ Saluda a tu nuevo proyecto! Ahora bien, esto puede
parecer intimidante, pero en realidad no lo es.
Déjame guiarte a través de ello. Psst, al final de
este video te mostraré dónde puedes descargar mi hoja de trucos de Xcode. A
mano izquierda tienes tu zona de navegador. Lo que se muestra aquí es el
navegador de archivos donde puede ver todos los archivos de su proyecto.
Cada pestaña en la parte superior es un tipo de navegador diferente, pero déjela en el
navegador de archivos por ahora porque lo usará con mayor frecuencia. Si selecciona un
archivo desde su navegador de archivos, cambiará lo que se muestra aquí en el
área del editor.
La interfaz cambia según el tipo de archivo que elija. Por ejemplo,
elegir este archivo de proyecto le permitirá configurar las propiedades del proyecto, mientras que
seleccionar un archivo de código le permitirá escribir código Swift en el área del editor.
Además, elegir el archivo del guión gráfico le permitirá personalizar la
interfaz de usuario de su aplicación. En el lado derecho encontrarás el área de servicios públicos
. Este panel está dividido en dos paneles: el panel del inspector es el superior y
le mostrará información y propiedades configurables para el archivo o
elemento de la interfaz de usuario en el que haga clic. En el panel inferior del área de utilidades se
llama panel de biblioteca y contiene listas de fragmentos de código reutilizables
y elementos de interfaz de usuario que podemos agregar a nuestro proyecto. Finalmente, en la parte superior
tienes la barra de herramientas de Xcode. Esto le brinda los controles para ejecutar su proyecto,
le muestra el estado de su proyecto y, en el lado derecho, botones para ocultar
o mostrar las distintas partes de la interfaz Xcode de la que acabamos de hablar.
Intentemos
ejecutar nuestro proyecto. Xcode viene con un simulador de iOS que te permite ejecutar y
probar tu aplicación sin necesidad de un dispositivo iOS físico.
Elijamos un simulador de la barra de herramientas y luego hagamos clic en el botón grande de reproducción
aquí. Es posible que la primera vez que se ejecute demore unos minutos, pero esto
iniciará el simulador y verá su aplicación ejecutándose.
Si el simulador es demasiado grande en su pantalla, puede subir aquí al
menú de la ventana, ir a escala y cambiar la escala del dispositivo para que se ajuste a su pantalla.
También puede presionar el comando de teclado + 1, comando + 2 y comando + 3. Lamentablemente, ahora solo es la pantalla blanca, pero eso se debe a que no
le hemos agregado nada. Ahora, ¿cómo se convirtió ese proyecto Xcode en esta aplicación que
estás viendo en el simulador? Analicémoslo: esta capa superior se llama
vista. Es la interfaz de usuario lo que ve el usuario.
Puede configurar esto desde
el archivo del guión gráfico principal en su proyecto Xcode. La segunda capa es el
controlador de vista y la responsabilidad de este archivo de código es administrar la vista. Por
ejemplo, cuando el usuario toca la vista, se lo informará al controlador de vista y
luego podrá escribir el código que desea ejecutar cuando esto suceda. Este
controlador de vista está representado por el archivo ViewController.swift en su
proyecto Xcode.
Si hace clic en él, el área del editor se convierte en el editor de código donde puede
escribir código Swift para administrar la vista. Entonces, de vuelta en nuestro proyecto Xcode, presione este
ícono de detener aquí para detener la ejecución de su proyecto. Si queremos mostrar algo en la
pantalla, tenemos que agregar algunos elementos a la vista en nuestro guión gráfico, así que continúe
y haga clic en el guión gráfico principal aquí y el área del editor se convertirá en un
generador de interfaz y en el panel de la biblioteca, ese es este tipo de aquí abajo.
asegúrese de estar
mirando la pestaña de la biblioteca de objetos y luego, en el cuadro de filtro, escriba "etiqueta". Eso
nos mostrará el elemento de etiqueta, luego simplemente haga clic y arrastre ese elemento y
suéltelo en nuestra vista. Aún no hemos terminado porque no hemos colocado la
etiqueta en nuestra pantalla. Xcode utiliza un sistema llamado Diseño automático para dimensionar y posicionar
los elementos en la pantalla. Esto le facilita la creación de diseños que
funcionan en múltiples tamaños y orientaciones de pantalla. Básicamente, especificas reglas
que dictan cómo se debe colocar tu elemento y cómo se debe dimensionar.
Reglas como este elemento deben tener la misma altura que otro elemento o este elemento debe estar a 20 puntos del lado derecho. Estas reglas se denominan restricciones de diseño automático
. Ahora aprenderá mucho más sobre el diseño automático en la próxima
lección, pero por ahora regresemos a Xcode y posicionemos nuestra etiqueta.
Ahora, después de
agregar su etiqueta, habrá notado que también aparece aquí. Esta
área se llama esquema del documento y enumera todos los elementos que tiene en
su vista. Si no tiene esta ventana, haga clic en este pequeño icono aquí para mostrarla y
ocultarla. Centremos nuestra etiqueta en la pantalla agregándole algunas restricciones. Haga clic en la etiqueta del esquema de su documento para seleccionarla y luego, en
la esquina inferior, tenemos estos pequeños íconos. Si pasas el cursor sobre ellos verás
sus nombres. Haga clic en el icono de alineación y aparecerá este menú. Elija
horizontalmente en el contenedor y verticalmente en el contenedor y luego haga clic en este botón
que dice agregar dos restricciones y luego verá que la etiqueta se reposiciona
según las restricciones recién agregadas. Ahora cambiemos el texto de la etiqueta. Con
su etiqueta seleccionada, debería ver sus propiedades configurables en el
panel del inspector en el lado derecho. Asegúrese de estar mirando la pestaña correcta y
luego desplácese para encontrar la propiedad de texto. Debería ser el primero y luego simplemente
borrar esa "etiqueta" allí y escribir "hola mundo".
Ahora ejecutemos el proyecto en
nuestro simulador nuevamente. Haga clic en este pequeño icono de ejecución aquí y debería ver
esto. ¡Felicidades! Has creado tu primera aplicación. Hoy
realizó un recorrido por el entorno de desarrollo de Xcode , aprendió sobre la vista,
que es lo que ve el usuario, y el controlador de vista cuyo trabajo es administrar
esa vista. Aprendió que puede personalizar esa vista en el archivo Main.Storyboard en su proyecto Xcode. También aprendiste que el
controlador de vista está representado por el archivo ViewController.swift en tu
proyecto Xcode.
Todo esto está en mi hoja de trucos de Xcode y puedes descargarlo gratis.
Pero primero, si te gusta este video, suscríbete a mi canal haciendo clic en el
botón de suscripción a continuación y si no quieres perderte ni un solo video, haz clic
también en el ícono de campana. Ahora quiero dejarte la palabra a ti: con
las habilidades que vas a aprender, ¿ vas a crear una aplicación o vas a crear un juego? Háganmelo saber dejando un comentario rápido a continuación y, por último,
les prometí mi hoja de trucos de Xcode.
Simplemente siga la URL en la pantalla o la URL en
la descripción a continuación para descargarlo. ¡ Gracias por mirar! Los veré en
la próxima lección. El video se rompió así que tengo que presionar grabar nuevamente..