Hola, bienvenido a cómo hacer una aplicación para
principiantes. Si alguna vez pensó en crear su propia aplicación, este es el video
para usted. Al final de este video, habrá creado su 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 orientaciones y tamaños de pantalla. Finalmente,
le mostraré cómo instalar esa aplicación en su dispositivo para que pueda mostrarle a todos
sus amigos y familiares la aplicación que ha 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
debe saber: lo primero es Xcode. Esta es la aplicación con la que creas aplicaciones
. Es gratis, utilícelo para construir la interfaz de usuario de sus aplicaciones, así como para escribir código para responder a la interacción del usuario y para expresar la lógica. El
código que escribimos sigue una cierta estructura o sintaxis y esto me lleva
a la segunda cosa que tienes que 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. Ahora, esto es lo bueno de aprender
Xcode y Swift. Estas son las mismas herramientas que usará para todo en
el ecosistema de Apple. Podrá 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á en una Mac, solo vaya a la Mac App Store y descárguela gratis.
Sin embargo, le advierto: probablemente necesitará la última versión de Mac OS y
mucho espacio libre en el disco.
Una vez que lo haya instalado, inicie la aplicación y
haga clic en iniciar un nuevo proyecto Xcode. En la parte superior de la siguiente pantalla,
verá plantillas para todas las diferentes plataformas que mencionamos anteriormente. Asegúrate de
estar en la pestaña de 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, solo puede escribir un nombre para su aplicación. Solo llamaré a este AppOne.
Puedes dejar el equipo como está. Para el nombre de la organización, puede poner su propio
nombre allí y para el identificador de la organización, simplemente coloque el punto com, 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 él. Psst, al final de
este video te mostraré dónde puedes descargar mi hoja de trucos de Xcode. En el
lado izquierdo tiene su área de navegación. 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éjelo en el
navegador de archivos por ahora porque lo usará con más 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 para su aplicación. En el lado derecho, encontrará el área de servicios públicos
. Este panel se divide 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 la 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, los botones para ocultar
o mostrar las diversas partes de la interfaz de Xcode de las que acabamos de hablar. Intentemos
ejecutar nuestro proyecto. Xcode viene con un simulador de iOS que le permite ejecutar y
probar su 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í. La primera vez que se ejecuta puede tardar unos minutos, pero esto
iniciará el simulador y verá su aplicación ejecutándose.
Si el simulador es demasiado grande en su pantalla, puede ir al
menú de la ventana y pasar a la escala inferior y cambiar la escala del dispositivo para que se ajuste a su pantalla.
También puede presionar en su teclado comando + 1, comando + 2 y comando + 3.
Tristemente, ahora es solo la pantalla blanca, pero eso se debe a que no
le hemos agregado nada. Ahora, ¿cómo se convirtió ese proyecto de Xcode en esta aplicación que
está viendo en el simulador? Vamos a desglosarlo: esta capa superior se llama
vista. Es la interfaz de usuario que ve el usuario. Puede configurar esto desde
el archivo principal del guión gráfico en su proyecto Xcode. La segunda capa es el
controlador de vista, la responsabilidad de este archivo de código es administrar la vista. Por
ejemplo, cuando el usuario toca la vista, le 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 parada 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 el
generador de interfaz y en el panel de la biblioteca que es este tipo aquí abajo, asegúrese de que está
mirando la pestaña de la biblioteca de objetos y luego en el cuadro de filtro escriba "etiqueta".
Eso
nos mostrará el elemento de la etiqueta, luego simplemente haga clic y arrastre ese elemento y
suéltelo en nuestra vista. Todavía no hemos terminado porque no hemos colocado la
etiqueta en nuestra pantalla. Xcode usa un sistema llamado Auto Layout para dimensionar y posicionar
los elementos en la pantalla. Esto facilita la creación de diseños que
funcionen en múltiples tamaños y orientaciones de pantalla. Básicamente, especifica reglas
que dictan cómo se debe colocar su 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 coloquemos nuestra etiqueta. Ahora, después de
agregar su etiqueta, es posible que haya notado que también apareció aquí. Esta
área se denomina esquema del documento y enumera todos los elementos que tiene a
la vista.
Si no tiene esta ventana, haga clic en este pequeño icono aquí para mostrarlo y
ocultarlo. 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 de inspección 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" y escribir "hola mundo". Ahora ejecutemos el proyecto en
nuestro simulador nuevamente. Haga clic en este pequeño ícono de ejecución aquí y luego debería ver
esto. ¡Felicidades! Ha creado su primera aplicación. Hoy
hizo 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 aprendió que el
controlador de vista está representado por el archivo ViewController.swift en su
proyecto Xcode. Todo esto está en mi hoja de trucos de Xcode y puede 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 un solo video, haz clic en el
icono de campana también. Ahora quiero pasarte la palabra: con
las habilidades que vas a aprender, ¿ vas a construir una aplicación o vas a construir un juego? Házmelo 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 ver! Los veré en
la próxima lección. El video se rompió, así que tengo que presionar grabar nuevamente..