15. Tutorial Xcode: Creando WebView Básico

Summary

En este tutorial, el instructor Iker guía a los espectadores a través del proceso de creación de un webview básico, que es un navegador web simple. Aprenderán a diseñar una interfaz con cuatro botones: atrás, adelante, recargar y parar. Además, se muestra cómo cargar una página web específica desde el código. Se utiliza Xcode para crear un proyecto de aplicación de vista única y se declara un objeto de webview. Se sintetiza la propiedad en el archivo Viewcontroller.m y se configura la carga de una página web en el método viewDidLoad. Finalmente, se agrega un toolbar personalizado con los botones necesarios y se conectan a las acciones correspondientes. El resultado es una aplicación que permite a los usuarios navegar y manipular la carga de una página web de manera básica.

Takeaways

• 🎓 Hola a todos, bienvenidos a un nuevo tutorial de desarrollo de aplicaciones móviles por Código Facilito.
• 📱 El objetivo es aprender a crear un webview básico, es decir, un navegador web simple.
• 🔵 El webview no tendrá una barra de dirección, solo contendrá cuatro botones: atrás, adelante, recargar y parar.
• 🛠️ Se cargará una página web específica que se define en el código, en este caso, la página de Flash Facilito.
• 📝 Se inicia abriendo Xcode y creando un nuevo proyecto de aplicación de vista única.
• 📂 Se nombra el proyecto 'Webview' y se procede a abrir el archivo ViewController.
• 💡 Se declaran objetos y acciones en el archivo ViewController.h, incluyendo un IBOutlet para el webview llamado 'web'.
• 🔗 Se define la propiedad del webview con @property y se utiliza @synthesize para crear una implementación de getter y setter.
• 📖 En el archivo ViewController.m, se utiliza el código para cargar una solicitud de URL y abrir la página web deseada.
• 🔨 Se agrega una barra de herramientas (toolbar) y se colocan los botones correspondientes a las acciones del navegador.
• 🔄 Los botones de la toolbar están configurados con identificadores adecuados para su función: 'Atrás', 'Adelante', 'Recargar' y 'Parar'.
• 🌐 Se conecta el IBOutlet 'web' con el webview en la interfaz de usuario para que funcione correctamente.
• ⌛️ Se menciona la posibilidad de integrar un indicador de actividad (activity indicator) para mostrar el progreso de la carga de la página web.
• 📘 Se guarda y ejecuta el proyecto en el simulador de iPhone para verificar que todo funcione según lo planeado.

Q & A

¿Qué tutorial están viendo en el video?

Un tutorial para crear un webview básico, es decir, un navegador web simple con opciones limitadas.

¿Qué elementos incluirá el webview básico que se está creando?

Incluirá cuatro botones: uno para atrás, uno para adelante, uno para recargar y uno para detener la carga de la página.

¿Cómo se llama el objeto que se declara en el ViewController para el webview?

El objeto se llama 'web', y se declara como IBOutlet con el nombre 'webView'.

¿Qué propiedades se le asignan al objeto webview en el ViewController?

Se asignan las propiedades nonatomic, strong y la sintaxis para la propiedad se realiza con @synthesize.

¿Cómo se carga una página web en el webview utilizando el código?

Se utiliza un NSURLRequest con una NSURL que se construye a partir de una cadena de texto que contiene la dirección web que se desea cargar.

¿Qué es un toolbar y para qué se usa en la aplicación?

Un toolbar es una barra de herramientas que se utiliza para alojar los botones de la aplicación, en este caso, los botones de navegación del webview.

¿Cómo se configuran los botones en el toolbar para que realicen acciones específicas?

Se configuran mediante sus propiedades, donde se les asigna un identificador que corresponde a la acción que deben realizar (atrás, adelante, recargar y detener).

¿Qué acción se realiza al conectar las acciones de los botones con las funciones del webview?

Las acciones de los botones se mapean a las funciones correspondientes del webview para permitir la navegación y el control de la carga de páginas.

¿Qué es un 'flexible space bar button item' y cuál es su propósito en el diseño del toolbar?

Es un elemento del toolbar que se utiliza para crear espacio entre los botones, asegurando que los botones se distribuyan de manera uniforme y estén alineados correctamente.

¿Cómo se conecta el outlet 'web' con el webview en la interfaz de usuario?

Se conecta arrastrando el outlet desde el ViewController hasta el webview en la vista, lo que vincula el código con la interfaz gráfica.

¿Qué se hace después de configurar la aplicación para que se ejecute?

Se guarda el trabajo con Command + S y se ejecuta la aplicación con Command + R, esperando a que se abra el simulador de iPhone.

¿Cómo se puede mejorar la experiencia de carga de la página en el webview?

Se puede agregar un 'activity indicator' para mostrar el progreso de la carga mientras la página se está cargando.

Outlines

00:00

😀 Creación de un WebView Básico

En el primer párrafo, Iker presenta un tutorial sobre cómo crear un navegador web básico en una aplicación de iOS. Se describe que el navegador no tendrá una barra de dirección, sino que contendrá cuatro botones para retroceder, avanzar, recargar y detener la carga de una página web. La página web a cargar será especificada a través del código. Se detalla el proceso de abrir Xcode, crear un nuevo proyecto de aplicación de vista única, y se nombra 'webview'. Seguidamente, se instruye sobre la declaración de objetos y acciones en el archivo ViewController, incluyendo la declaración de un objeto WebView y la sintetización de la propiedad en el archivo .m. Finalmente, se explica cómo cargar una página web específica utilizando una solicitud URL y cómo conectar los botones de navegación con las acciones correspondientes en el archivo .xib.

05:02

🔄 Conexión de Acciones y Configuración del WebView

El segundo párrafo continúa el tutorial mostrando cómo conectar las acciones de los botones con las funciones de retroceder, avanzar, recargar y detener en el WebView. Se indica cómo arrastrar un toolbar para alojar los botones y cómo configurar estos botones con identificadores apropiados. Además, se describe el proceso de agregar el WebView al archivo .xib y conectar el outlet 'web' con el elemento WebView en la interfaz. Se menciona la posibilidad de utilizar un indicador de actividad para mostrar el progreso de carga mientras se carga la página web. El tutorial concluye con la instrucción para guardar y ejecutar el proyecto, y se ofrece un vistazo a cómo debería funcionar la aplicación en el simulador de iPhone, incluyendo la interacción con los botones y la carga de la página web de Flash Facilito. Además, se animan a los espectadores a dar like y suscribirse al canal de Código Facilito.

Keywords

💡WebView

WebView es un componente de una aplicación que permite mostrar contenido web dentro de la aplicación misma. En el video, se utiliza para crear un navegador web básico que puede cargar una página web específica desde el código.

💡ExCode

ExCode parece ser un error tipográfico y probablemente se refiere a Xcode, que es el entorno de desarrollo integrado (IDE) de Apple para crear aplicaciones iOS, macOS, watchOS y tvOS. En el video, se utiliza Xcode para crear un nuevo proyecto de aplicación de vista única.

💡ViewController

ViewController es una clase en iOS que representa la lógica de presentación y control de una pantalla en la aplicación. En el tutorial, se utiliza ViewController para programar la funcionalidad del navegador web y conectar los elementos de la interfaz de usuario.

💡Outlet

Outlet es una conexión entre el código y un elemento de la interfaz de usuario en Xcode, que permite a la aplicación interactuar con ese elemento. En el video, se utiliza un outlet para conectar el WebView con el código de la aplicación.

💡Property

Property es una característica de programación que permite asociar datos con un objeto. En el contexto del video, se utiliza para definir y sintetizar una propiedad de WebView llamada 'web', que se utiliza para interactuar con el componente de visualización de contenido web.

💡NSURLRequest

NSURLRequest es una clase de Foundation en iOS que representa una solicitud de red para obtener un recurso de una URL específica. En el tutorial, se utiliza NSURLRequest para cargar una página web específica en el WebView.

💡Buttons

Los botones son elementos de la interfaz de usuario que permiten a los usuarios interactuar con la aplicación mediante clics. En el video, se crean botones para funciones como retroceder, avanzar, recargar y detener la carga de una página web en el WebView.

💡Toolbar

Toolbar es una barra de herramientas que suele contener botones y otros elementos de interfaz de usuario. En el tutorial, se utiliza una toolbar para alojar los botones que controlan la navegación y acciones del WebView.

💡Actions

Las acciones son métodos o funciones que se ejecutan en respuesta a eventos de la interfaz de usuario, como clics de botón. En el video, se conectan acciones a los botones de la toolbar para controlar el WebView.

💡Activity Indicator

Activity Indicator es un componente de la interfaz de usuario que muestra una animación indicando que la aplicación está ocupada, generalmente durante procesos de carga o transmisión de datos. Aunque no se utiliza explícitamente en el tutorial, se sugiere su uso para mejorar la experiencia del usuario mientras se carga una página web.

💡Flash Facilto

Flash Facilto parece ser el nombre de una página web que se utiliza en el tutorial como ejemplo para cargar en el WebView. Aunque no es un término técnico, es relevante para el tutorial ya que representa el contenido que el WebView está diseñado para mostrar.

Highlights

Bienvenida a un nuevo tutorial de desarrollo de aplicaciones móviles

Creación de un navegador web básico utilizando código

El navegador incluirá cuatro botones: atrás, adelante, recargar y parar

La página web a cargar será definida desde el código

Iniciando con la creación de un nuevo proyecto en Xcode

Declaración de un objeto WebView y sus propiedades en el archivo ViewController

Sintetización de la propiedad WebView con el comando @synthesize

Uso de NSURLRequest para cargar una página web específica

Integración de un toolbar para alojar los botones de navegación

Configuración de los botones con identificadores adecuados

Conexión de las acciones de los botones con las correspondientes funciones del navegador

Conexión del outlet WebView con el componente visual en la interfaz de usuario

Guardado y ejecución del proyecto en el simulador de iPhone

Demostración de la carga de la página web de Flash Facil

Funcionalidad de los botones de navegación: atrás, adelante, parar y recargar

Posibilidad de integrar un indicador de actividad para mostrar el progreso de la carga

Conclusión del tutorial y llamado a la acción para seguir el canal de Código Facilito

Transcripts

[Música]

Hola a todos Bienvenidos a nuestro nuevo

tutorial de exc traid ustedes por código

facilito Mi nombre es Iker y hoy

aprenderemos a crear un webview básico o

sea un navegador web bastante básico no

va a tener este donde escribir ninguna

dirección web nada más va a tener cuatro

botones que va a ser el de atrás

adelante el de recargar y el de parar va

a cargar una página que va nosotros se

la vamos a este poner desde el código y

con eso vamos a hacer todo así que bueno

empezamos vamos a abrir excode

creamos un nuevo proyecto single viw

application Le ponemos el nombre

webview lo

creamos una ya que haya abierto nuestro

proyecto nos vamos a ir a nuestro

viewcontroller punh a declarar nuestros

objetos y

acciones ponemos nuestros corchetes y

vamos a declarar nada más un objeto para

eso ponemos I outlet como es un webview

tenemos que poner u

webview y le ponemos un nombre yo lo voy

a llamar

web Luego de eso abajo los corchetes

ponemos sus propiedades entonces ponemos

@

property entre paréntesis ponemos Non

atomic com

retain y luego vamos a poner u webview y

el nombre que le dimos que es

web después de esto nos vamos a nuestro

viewcontroller m para sintetizar nuestra

propiedad abajo del implementation vamos

a poner @ synthesize y la propiedad

Queen nosotros la llamamos

web y le ponemos punto y

coma Ahora nos vamos aquí a donde dice

vo viad

y entre los corchetes vamos a escribir

lo

siguiente abrimos un corchete cuadrado y

ponemos el nombre de nuestro webview que

es web y luego vamos a escribir loed

request abrimos un corchete cuadrado y

ponemos ns URL

request luego request with

URL otro corchete cuadrado y ponemos ns

url

luego vamos a poner URL with

String y ponemos entre bueno ar comillas

comillas y entre las comillas vamos a

poner la página web que queremos que

cargue yo voy a poner la de Flash

facilito ya que terminado ponemos

nuestro corchete

cuadrado otro son tres los que tienen

que poner al final y punto y

coma bueno eso sería todo el código que

vamos a escribir Ahora nos vamos a ir a

nuestro viewcontroller

xiv y vamos a empezar a agregar

todo primero de nada lo que vamos a

agregar es

un se me olvidó se llama eso un toolbar

que es donde van a ir nuestros botones

para eso nada más lo arrastramos y lo

ponemos abajo o arriba donde ustedes

quieran y vamos a poner los botones para

eso vamos aquí donde dice bar Button

item y lo arrastramos hasta que tengamos

cuatro

botones luego vamos a poner uno que dice

flexible spacebar Button item y lo

ponemos en medio y es para que nos cree

el espacio y nos ponga dos botones de un

lado y dos botones del

otro luego de esto vamos a configurar

estos botones así que bueno al primero

le vamos a

poner

atrás al segundo le

ponemos

adelante y luego a los otros dos que

faltan le vamos a dar doble

clic nos vamos a sus

propiedades y aquí donde dice dice

identifier le damos click y

seleccionamos el que dice

stop hacemos lo mismo con el otro nada

más que en el otro Vamos a

ponerle reload Ah no

refresh Bueno ya tenemos nuestros

botones ahora vamos a agregar nuestro

webview

ahora vamos damos clic en el

webview en connections Y si ven nos

aparecen unas acciones aquí

abajo pues vamos a conectar esas

acciones con los botones que tenemos

nosotros aquí el que dice go back con

nuestro botón atrás el que dice Go

Forward con nuestro botón

adelante el que dice reload con nuestro

botón refresh y el que dice

stoping con el

desktop luego nos vamos a files

Owner otra vez connections y vamos a

conectar nuestro outlet

web con nuestro

webview bueno eso va a ser todo lo que

vamos a hacer Aquí vamos a guardarlo con

Comando s y a correrlo con Comando

r y esperamos a que se abra el iPhone

Simulator al abrir Bueno a cargar la

aplicación tiene que empezar a cargar la

página de Flash

facilito vamos a esperar que

cargue Bueno si ven aquí ya

cargó vamos a ver vamos a darle click

aquí donde dice curso flash ya nos abrió

el curso le damos atrás funciona bien Le

damos

adelante funciona bastante

bien si le doy clic en animación flash Y

le doy

stop Bueno lo carga Pero no lo termina

de cargar porque le le dimos Stop le

damos

recargar bueno Y funciona bastante

bien ustedes pueden utilizar el tutorial

del activity indicator para juntarlo con

este Y entonces nos aparezca mientras

está cargando aquí aparecería el

activity

indicator y bueno es sería todo nu

tutorial por hoy Espero les haya gustado

ya saben si les gustan los videos denles

manita arriba y suscríbanse al Canal de

código facilito hasta luego