APP II
Clase 3 (Aplicaciones Móviles Avanzadas)
Tema:
Manejo del visor web
Justificación del tema:
El visor web nos permite importar información como páginas web, videos, audios, imágenes, etc. a
nuestras Apps permitiendo reutilizar contenido previamente desarrollado.
Objetivo:
Utilizar el componente para visualizar contenido web en las Apps.
Conceptos:
WebView
URL
loadURL
Desarrollo:
Ocasionalmente durante el desarrollo de aplicaciones móviles nos veremos en la necesidad de mostrar a
nuestros usuarios un contenido web, como puede ser, términos o condiciones de uso de nuestra App, una
página web para ofrecer alguna promoción, entre otras.
De una forma tradicional, podemos enviar a nuestros usuarios a un navegador externo, pero eso no nos
garantiza que el usuario regrese. Esta es la principal razón del porque existe un componente llamado
WebView.
WebView: Es un componente que permite cargar y visualizar cualquier contenido web dentro de una
aplicación móvil a través de una URL.
Esquema comparativo del funcionamiento del componente WebView implementado en una App vs una aplicación web
vista en un navegador web convencional.
Como su nombre lo sugiere, un WebView permite ver páginas web tanto en línea como de forma desconectada
de internet dentro de nuestra App. Está disponible en el paquete de [Link] y permite manejar
historiales de contenidos visitados, hacer zoom en los contenidos, usar JavaScript y renderización (proceso de
generar una imagen) de CSS.
URL: Son las siglas de Uniform Resource Locator, es un localizador de recursos en internet.
Una URL funciona similar a un número de teléfono que identifica a un dispositivo entre millones para poder
hacer y recibir llamadas. Una URL permite encontrar páginas web, imágenes, audios, documentos a través de
una cadena de caracteres estructurada de la siguiente manera:
loadURL: Es el método que permite enlazar y cargar un contenido HTML dentro de un visor web (WebView).
En el ejemplo anterior se puede ver un código del lenguaje Basic para cargar la página de Google dentro de un WebView.
Resultado:
Nota: en algunos entornos de desarrollo como App inventor, tanto los componentes como el nombre de los
métodos para cargar contenido cambian, en lugar de WebView se conoce como WebViewer y en lugar de
loadURL, el método se llama GoToURL
Parte 2: Crear la App “Mi Ubicación” tomando en cuenta las siguientes indicaciones:
Utilizar la plataforma App Inventor 2 [Link]
Cambiar el título de Screen1 a “GPS y WebView”
Diseñar la pantalla con los componentes:
Agregar los bloques de programación del procedimiento “distance” que se encarga de medir la
distancia desde la posición actual del dispositivo hasta las instalaciones de Computer Data Systems:
Agregar los bloques de la rutina para detectar la posición actual del dispositivo, medir la distancia hasta
el lugar indicado por las coordenadas de latitud y longitud que además carga el mapa de google en el
WebView:
Mejorar aspectos del diseño, según su propio criterio, depurar e instalar la aplicación, subir el APK a su
cuenta de Google Drive y compartirla a su maestro vía correo luisrobsalinas@[Link]