hola y bienvenido a cómo hacer una aplicación
para principiantes en este video, te mostraré cómo hacer una aplicación incluso si
nunca antes has programado una sola línea de código. Ahora, al final de estas próximas
10 lecciones, habrá creado estas aplicaciones e interfaces de usuario y también le mostraré
cómo ponerlas en su teléfono para que pueda mostrárselas a sus amigos y
familiares, pero lo más importante es que voy a le enseñará las habilidades fundamentales que
necesitará para crear cualquier tipo de aplicación, por lo que al tomar estas lecciones para principiantes
obtendrá una base realmente buena y sólida en el desarrollo de aplicaciones iOS. A partir de
ahí, querrá obtener mi Plan de acción de aplicación de 7 días gratuito, donde puede
crear una hoja de ruta de aplicación personalizada solo para crear su aplicación.
También desea unirse a nuestra
comunidad activa de Facebook, donde puede obtener ayuda y apoyo de mí y del
equipo y toneladas de otras personas aprendiendo iOS como usted para que nunca se
quede atascado o solo en su viaje para crear aplicaciones. Ahora, la última vez que enseñé esto
fue visto por más de 1,2 millones de personas y surgieron toneladas de historias de éxito
, toneladas de personas crearon sus propias aplicaciones móviles, como pueden ver algunas de ellas
en la pared detrás de mí. Ahora sé que todo vendrá para ti también, pero todo
comienza aquí y ahora, ¿estás listo?, hagámoslo, bienvenido a CodeWithChris,
el lugar ideal si quieres aprender a crear una aplicación. Soy Chris y
estoy muy contento de que estés aquí, lo primero es lo primero
, ¿cómo creas una aplicación desde cero? Bueno, todo comienza con un programa llamado
Xcode donde diseñas la interfaz de usuario para tu aplicación y escribes el
código que se convierte.
En una aplicación para iPhone que puedes publicar en la App Store,
donde millones de personas pueden descargarla y usarla antes de eso, retrocedamos un
poco. Xcode es un programa que puedes descargar gratis y el código que te enseñaré
a escribir se llama lenguaje de programación Swift. No te dejes
intimidar si nunca has codificado antes porque te garantizo que lo dominarás
. next Xcode solo se puede instalar en
computadoras Mac, pero si no tiene acceso a una, no necesita gastar
miles de dólares para comprar una, en lugar de eso , mire mi video en Xcode para Windows
usando MacStadium primero. Muy bien, con eso fuera del camino, profundicemos y
déjame mostrarte Xcode, así que lo primero que querrás hacer
es descargar Xcode si aún no lo has hecho y todo lo que tienes que hacer es presionar
CMD + Barra espaciadora en su teclado para iniciar Spotlight.
Escriba App Store para iniciarlo y luego en la barra de búsqueda escriba Xcode y
eso lo encontrará ahora. Ya lo tengo instalado, así que si no
quiere seguir adelante y hacerlo, le advertiré.
Aunque es una aplicación bastante grande
, por lo que lleva un poco de tiempo instalarla y, si no puede, si le
da un mensaje de error o algo así
, desplácese hacia abajo para verificar la compatibilidad si hace clic en él, le dice qué
versión de macOS es. necesita para este , necesita 10.13.6,
pero cada vez que actualizan Xcode, este número aumenta cada vez más, por lo
que es posible que deba actualizar su versión de macOS para instalar Xcode. También
tenga en cuenta el tamaño aquí, aunque dice 6.1 Gigas. a veces necesita un
poco de espacio adicional para realizar la instalación, así que una vez que lo haya
instalado, continúe y ábralo. Aparecerá un cuadro de diálogo como este
. Lo que haremos en este video es crear un nuevo Proyecto Xcode, así que
haga clic en crear un nuevo proyecto Xcode si no ve ese di alog por alguna
razón, tal vez haya lanzado Xcode antes de que siempre pueda subir al archivo, vaya
a Nuevo y elija el proyecto y eso lo llevará al mismo lugar, ahora
hay un montón de plantillas diferentes con las que puede comenzar para ayudarlo a
ser un poco más rápido en términos de lo que desea crear, lo que vamos a querer
en esta lección es estar en esta pestaña de iOS porque hay diferentes
plataformas que puede crear para usar Xcode y Swift, que es lo mejor de
aprender estos dos cosas, pero vamos a hacer iOS hoy y vamos
a elegir la aplicación de vista única y eso nos dará nuestra aplicación básica de una página
o una aplicación de pantalla a continuación, vamos a querer configurar algunas de las opciones
para nuestros nuevos proyectos, como cuál es el nombre, cuál es su ID único y
para el nombre del producto, puede nombrarlo de alguna
manera .
no va a importar ahora, pero querrás crear un equipo cuando yo t llega
al punto en el que desea colocar la aplicación en su dispositivo real y le mostraré
cómo hacerlo más adelante en la
serie nombre de la organización.
Pondría el nombre de su empresa o su
nombre personal y luego lo que es común en la organización. el identificador es un punto de comunicación y
luego su nombre o el nombre de su empresa, así que combínelo con el nombre del producto que
será el identificador del paquete, verá que este término se usa bastante
, es básicamente como la identificación única para la aplicación que está creando cuando
publicas tu aplicación cuando la subes a la tienda de aplicaciones y ese tipo de cosas
, necesitarás ese ID de paquete, está bien , así que lo siguiente muy importante es asegurarte de que
tu idioma esté configurado en Swift porque eso es lo que estamos aprendiendo aquí puede
dejar a estos tipos sin marcar y luego hacer clic en siguiente y también puede dejar
el control de fuente sin marcar, así que no vamos a pasar por eso ahora
, adelante, haga clic en crear y tendrá su nuevo proyecto Xcode
ahora.
Parece un poco intimidante porque hay todas estas casillas de verificación y
menús desplegables y sabes que esta interfaz para alguien que no la ha visto antes
es bastante confusa, pero voy a repasarla contigo ahora mismo y también
tengo una hoja de referencia para ti con un diagrama y todo los atajos de teclado
para Xcode, así que asegúrese de tomarlos en la descripción a continuación, así que vamos a
comenzar en el lado izquierdo de la interfaz y esta es el área del Navegador
, notará en la parte superior que hay diferentes pestañas que usted puede hacer clic,
puede que no sea tan claro al principio , pero estos son navegadores diferentes que
puede elegir, con mucho, el más común que usará es este
navegador de proyectos donde puede ver todos los archivos en su proyecto Xcode ahora haciendo clic
en cualquiera de estos archivos cambiará lo que está en el medio que se llama el área del editor
, por lo que, por ejemplo, en este momento tenemos este primer archivo de proyecto en el que se hizo clic y
es por eso que vemos todas las propiedades del proyecto en el área del editor si hacemos
clic en ViewController.Sw Si va a ver que esto se convierte en
el editor de código para que pueda escribir código rápido, continúe y haga clic en Main.Storyboard
y esto se convertirá en un editor donde puede
personalizar la pantalla para su aplicación.
Voy a hacer esto en breve, en
realidad se llama constructor de interfaz, por lo que puede entender por qué ese nombre es
así. A continuación, vayamos a Assets.xcassets, aquí es donde
colocará todas las imágenes para su proyecto . que va a usar y
luego Launchscreen. Storyboard es otro tipo de archivo de creación de interfaz
donde puede personalizar la pantalla de inicio y luego info.plist tiene algunas
propiedades adicionales para su proyecto, por lo que en un nivel alto esos son los archivos que
por defecto están incluidos dentro de su proyecto Xcode ahora moviéndose hacia el
lado derecho de la pantalla, tenemos el panel de utilidades y lo que ve aquí
depende de en qué esté haciendo clic dentro del área del editor, por lo que es como un
desglose adicional para instancia si vamos a Main.S toryboard y hago
clic en esta área blanca que es mi vista o mi pantalla, me mostrará
más detalles sobre eso y en Viewcontroller.Swift
si hago clic en digamos algún fragmento de código, entonces me dirá
algo relacionado con eso pero tenga en cuenta que nuevamente hay algunas
pestañas diferentes con este panel de utilidades, como puede ver aquí, así que si vamos a
Main.Storyboard, puede ver que hay un par de pestañas más y eso es
porque puedo configurar propiedades para este elemento, por lo que parece que Xcode ha
experimentado un error interno, pero generalmente estos están bien, simplemente puede
cerrar el proyecto y lo iniciamos.
No voy a hacer eso ahora. Está bien
en la parte superior de la interfaz. Tiene su barra de herramientas de Xcode. ahora, en el lado izquierdo
de la barra de herramientas, tiene algunos botones para ejecutar su proyecto y detener su proyecto
y luego, a la derecha, hay un menú desplegable donde puede
seleccionar el destino en el que ejecutar su proyecto ahora si conecta en tu
teléfono en realidad, puede seleccionar su teléfono desde ese menú desplegable, pero si no
tiene un teléfono conectado, no se preocupe porque Xcode tiene un montón de simuladores
en los que puede ejecutar su proyecto y lo mostrará en la pantalla
.
Voy a hacer eso en solo un segundo en el medio aquí tiene su barra
de estado que le mostrará lo que está pasando con su proyecto lo que está haciendo ahora
y luego en el lado derecho hay un par de controles más aquí que
vamos a llegar en segundo lugar, pero en la parte más a la derecha de esa
barra de herramientas, verá estos botones que son realmente útiles para usted en este
momento, solo para ocultar y mostrar estas diferentes áreas de las que estamos hablando
si hace clic este del medio notará que muestra esta pequeña
bandeja aquí abajo de la que realmente no hemos hablado todavía y este panel aquí abajo
se llama la consola de depuración y cuando está ejecutando su proyecto y digamos
que ocurre un error Obtendrá algunos detalles sobre ese error en esta
consola de depuración.
Por lo tanto, está oculto de forma predeterminada si desea mostrarlo, todo lo que tiene que
hacer es hacer clic en este botón para abrirlo, por lo que estas son las secciones principales de la
interfaz de usuario de Xcode, no es tan complicado una vez que sabe lo
que vamos a hacer ahora es continuar y ejecutar nuestro proyecto en un simulador, por lo que en ese
menú desplegable que le mostré de manera predeterminada en este momento es iPhone XR, puede
seleccionar cualquiera que desee probar y simplemente haga clic en este gran botón
de reproducción aquí mismo, se iniciará que iOS Similar ahora, la primera vez que haga esto
, puede tomar un par de minutos, pero luego las veces posteriores serán
mucho más rápidas después de que se haya iniciado el simulador, por lo que en realidad no
necesita un dispositivo iPhone físico si no lo hace .
T tiene uno, todavía puede construir y
probar su aplicación, ahora hay una cosa rápida que quiero mencionar y es que si
su simulador es demasiado grande para su pantalla y no puede verlo todo, en
realidad puede reducirlo para que pueda puede ir al menú del
simulador y elegir you know ph Puede usar estos accesos directos CMD+1,
CMD +2 o CMD +3 para cambiar
el tamaño del simulador que ve, así que solo un consejo útil para usted en caso de que el
simulador sea demasiado grande para su pantalla, así que cuando su aplicación se haya iniciado
, verá esta pantalla blanca y eso se debe a que realmente no hemos
agregado nada a nuestra aplicación todavía, pero antes de hacerlo, hablemos sobre cómo ese
proyecto Xcode se convirtió en esta aplicación que yo Al ver en el simulador, esta
capa superior es la vista , es la pantalla que ve el usuario, ahora
puede configurar esta vista desde el archivo Main.Storyboard en su
proyecto Xcode, la segunda capa debajo se llama
ViewController.
Ahora, este archivo de código es responsable de administrar la vista, por
ejemplo, cuando el usuario toca la vista , le informará al controlador de vista
y luego puede escribir código dentro de ese controlador de vista para manejar ese toque
para ejecutar algún proceso en segundo plano o tal vez muestre alguna
información nueva en la pantalla, ahora tiene la idea de que este controlador de vista está
representado por el archivo ViewController.Swift en su proyecto Xcode y, como
dijimos antes, si hace clic en ese archivo , el área del editor se convierte en el editor de código
donde puede escriba código Swift para administrar la vista ahora si su aplicación tiene
múltiples pantallas en la mayoría de los casos cada pantalla tendrá su propia
vista y controlador de vista ahora regresemos a Xcode y vamos a detener
nuestro proyecto y vamos para agregar algo a la vista para que haya
algo que ver, presionemos el ícono de detener aquí y luego hagamos clic en el
guión gráfico principal para que vea el generador de interfaz y ahora voy a
presentarle este botón aquí calle d el botón de la biblioteca, así que si hacemos clic aquí
, aparecerá una lista de objetos o elementos de la interfaz de usuario que puede agregar a su
vista, escriba la etiqueta para buscar a este tipo y todo lo que tiene que hacer es hacer clic
y arrastrarlo a su vista como esta ahora verá esa etiqueta en su
vista aquí ahora puede arrastrarla y colocarla, pero
eso realmente no va a hacer nada porque Xcode en realidad tiene su propia forma
de posicionar y dimensionar los elementos de diseño Xcode utiliza un sistema llamado diseño automático
para posicionar y cambiar el tamaño de los elementos en la pantalla.
Este sistema facilita
el diseño de una sola interfaz que se ve bien en iPhone, iPad y todos los
demás tamaños de pantalla de los futuros dispositivos iOS. Ahora, básicamente, todo lo que tiene que hacer es hacer es
especificar una lista de reglas para cada elemento que dicte cómo se debe
colocar y cómo se debe dimensionar en relación con otros elementos en la pantalla,
por ejemplo, este elemento debe tener la misma altura que este otro elemento o
tal vez este elemento debe ser cen En la pantalla, estas reglas se denominan
restricciones y en la lección dos aprenderá mucho más sobre el
diseño automático y las restricciones de diseño automático, pero por ahora regresemos a Xcode y
veamos cómo podemos posicionar y centrar nuestra etiqueta .
En la pantalla está bien
, de vuelta en el generador de interfaz, quiero que seleccione su etiqueta solo para asegurarse
de que esté resaltada y luego aquí abajo hay un par de botones donde
puede agregar restricciones de diseño automático, así que haga clic en no agregar nuevas restricciones pero este
botón llamó una línea porque básicamente queremos alinear esta etiqueta en el centro
de la pantalla, así que vamos a verificar horizontal y verticalmente en el contenedor
y luego hacer clic en Agregar a las restricciones y puede ver instantáneamente estas líneas aquí
que representan las restricciones que acaba de agregar como así como la etiqueta está
centrada en la pantalla si cometió un error, no se preocupe , échele
un vistazo aquí mismo, esto se llama el esquema del documento y básicamente
le muestra todos los elementos y todos los co restricciones que están en su vista en
este momento, así que simplemente abra las restricciones , puede resaltar las restricciones que
ha agregado, tal vez haya cometido un error o algo así, puede
eliminarlas ahora mismo, puedo presionar eliminar y deshacerme de ellas o si
los resalta en el panel de utilidades en el lado derecho en este inspector de tamaño o
hay diferentes inspectores que puede seleccionar, asegúrese de que está viendo
el inspector de atributos o el inspector de tamaño y luego puede editar
algunos de las propiedades de su restricción, le mostraré cómo
sacarlas ahora mismo del esquema del documento para que desaparezcan.
Lo
volveré a hacer para que pueda presionar su etiqueta ahora, entrar en una línea y
seleccione horizontal y verticalmente en el contenedor y luego agregue dos restricciones
como esa, lo siguiente que haremos es editar esa palabra
dentro de la etiqueta, así que asegúrese de que su etiqueta esté resaltada y luego en el
lado derecho nuevamente haga Seguro que estás mirando g en el inspector de atributos aquí
debajo del texto, podrá escribir lo que quiera. Voy a
escribir hola mundo y listo, así que haga clic en el botón Ejecutar en su proyecto Xcode
y se iniciará el simulador una vez.
nuevamente y debería ver algo
parecido a esto , felicitaciones, construyó su primer
paso para obtener una copia de las notas de resumen de lo que analizamos hoy, así como algunos
ejercicios de práctica, simplemente haga clic aquí o búsquelo en la descripción a continuación
en la próxima lección la vas a construir en Xcode, pero primero, si te
gusta este video, dale me gusta y suscríbete a mi canal
presionando el botón rojo de suscripción a continuación y si no quieres perderte la próxima
lección solo presiona el ícono de la campana para recibir una notificación cuando se lance ahora.
Quiero entregarte las habilidades que vas a aprender
. ¿Vas a crear una aplicación o un juego ? Házmelo saber dejando un comentario rápido . a continuación
y luego simplemente haga clic en ese pulgar clavo para la lección 2 y nos vemos allí adiós
por ahora.