1

DESARROLLO DE APLICACIONES MÓVILES

CON IONIC
Álvarez Diego, Freire Tatiana, Stalin Garcı́a, Bryan Socasi
Departamento de Eléctrica y Electrónica, Universidad de las Fuerzas Armadas ESPE
Sangolquı́, Ecuador
dealvarez7@espe.edu.ec
tefreire@espe.edu.ec
sagarcia3@espe.edu.ec
basocasi@espe.edu.ec

Abstract — The following project is based on the development of B. Framework

mobile applications with IONIC, which is a platform that, based En software un Framework es un esquema que ayuda con el desa-
on a series of programs, develops an application with many rrollo y/o la implementación de una aplicación. Conocido también
como una infraestructura digital un Framework es una estructura
visual and functional advantages. The operation and creation of conceptual y tecnológica con soporte definido, que cuenta con
the created mobile application will be detailed. módulos concretos de 6 software que pueden servir como base en
la organización y el desarrollo de aplicaciones. A continuación, se
lista algunos de los Frameworks más utilizados en el desarrollo de
aplicaciones hı́bridas.[1]
Resumen—El siguiente proyecto esta basado en el desarrollo de Caracterı́sticas:
aplicaciones moviles con IONIC que es una plataforma que a • Famous.
base de una serie de programas se desarrola una aplicaciones • Native Script.
con muchas ventajas tanto visuales coo funcionales. Se detallara • IONIC.
el funcionamiento y la creacion de la aplicación móvil creada. • React
• jQuery Mobile
Palabras Clave—IONIC, Aplicación mövil. • Framework 7
• Onsen UI

I. I NTRODUCCI ÓN
El uso de dispositivos móviles se ha incrementado de manera
significativa en los últimos años, llegando a ser el principal medio
de acceso a la comunicación, aprendizaje y demás servicios de las
personas.
Los dispositivos móviles han revolucionado las actividades que
realizamos a diario, convirtiéndolos en herramientas de uso cotidiano
y negocios, en gran medida por su fiabilidad, utilidad, portabilidad y
en muchos casos por su seguridad.
El contenido principal de este trabajo de investigación es el desarrollo
de una aplicación móvil con la ayuda del Framework Ionic. Este
Framework es el más utilizado por los programadores y el más sonado
para hacer la creación de aplicaciones móviles.
II. MARCO TE ÓRICO
A. Aplicación Hibrida
Las aplicaciones hı́bridas generalmente son apps que están em-
bebidas en el navegador web del dispositivo. Para desarrollarlas se
utilizan Frameworks basados en lenguajes de programación y diseño
web (PHP, HTML, CSS y JS).
Caracterı́sticas
• Son esencialmente páginas web incrustadas en una aplicación
móvil a través de un WebView.
• Están desarrolladas usando HTML5, CSS y JavaScript.
• Pueden ejecutar el mismo código independientemente de cuál
sea la plataforma objetivo, aunque también cabe la posibilidad
de usar código especı́fico para cada plataforma objetivo.
• • Pueden acceder a alguna capa nativa de los dispositivos
(cámara, GPS, etc.).
C. IONIC
Ionic es un Framework de desarrollo móvil HTML5 orientado
a la creación de aplicaciones móviles hı́bridas. Como los sitios en
Internet, las aplicaciones hı́bridas son construidas con tecnologı́as
web como HTML, CSS, Y JavaScript. Ionic Framework junto con
AngularJS nos facilitará de sobremanera la tarea de creación de
aplicaciones, que parece ser el campo en el que se especializa esta
herramienta.
D. AngularJS
Es un Framework de código abierto, realizado en Javascript
que contiene un conjunto de librerı́as útiles para el desarrollo de
aplicaciones web y propone una serie de patrones de diseño para
llevarlas a cabo. En pocas palabras, es lo que se conoce como
un Framework para el desarrollo, en este caso sobre el lenguaje
Javascript con programación del lado del cliente.[2]
Caracterı́sticas:
• Aumentar las apps basadas en navegador con MVC (Modelo –
Vista – Controlador).
• Sincronización automática entre modelos y vistas.
• Reducir el código de JavaScript.
Diagramas
Diagrama de bloques:
Fig. 1 Diagrama de Bloques
 2

III. PRERREQUISITOS Y CONFIGURACI ÓN

Para el funcionamiento del proyecto el usuario debe contar
con las siguientes plataformas de desarrollo software:

• Visual Studio Code

• AumeFirefox Developer Edition: como navegador para
probar el proyecto.
• AngularJS
Se debe tener conocimiento en Programación Básica de los
siguientes software:

• SASS-Se trabaja en Visual Studio Code

• CSS

• Javascript

• HTML
Fig.4 Inicio Aplicación

El menú de opciones que lleva a diferentes páginas.

IV. FUNCIONAMIENTO
Proceso de diseño de la app

Fig.2 Framework General Fig.5 Funcionamiento

src es la carpeta en la que realizarán todos los cambios que
se desee hacerle a nuestra app. Framwork general, donde la
carpeta app, es la que puede generar cambios en toda la app,
ya sean en paginas, estilos Sass o Typscript.
Ejecución del programa.
Página de perfiles, aquı́ se consumió una API publica que
especifica el nombre, mail y teléfono de los usuarios en dicha
base de datos.

Fig. 6 Contactos
Fig. 3 Aplicación en el celular Página de contactos que a través de slides proporciona infor-
Ejecutamos y encontramos la pantalla inicial. mación de los estudiantes.
 3

Fig.7 Inicio de cuenta Google

Página acerca de , donde detalla los diferentes lenguajes de pro-
gramación a utilizarse, que al final de todo todos se relacionan
entre si.

Fig.8 Información
Al seleccionar una opción de la lista, nos redirige a otra página
con su respectivo nombre y su descripción.

V. C ONCLUSIONES
• Ionic nos permite crear aplicaciones multiplataformas por
lo que sus diversos componentes nos facilita el trabajo al
momento de crear una aplicación.
• Podemos crear aplicaciones nativas para diferentes dispo-
sitivos sin tener la necesidad de cambiar nuestro código
.
• Ionic es un potente framework para el desarrollo de
aplicaciones móviles que nos permite crear aplicaciones
con un peso mucho menor debido a su reducido tamaño
resultante de la aplicación.
• El adquirir nuevos conocimientos en base a esta investi-
gación, será de gran importancia para hacer popular entre
los teléfonos inteligentes el framework Ionic.
• Al desarrollar aplicaciones utilizando la plataforma Ionic
aumenta la reusabilidad ası́ como también optimizando la
cantidad de recursos como lo son el tiempo, costo y la
calidad .

R EFERENCIAS
[1] Riehle, D. (2013). Framework Design: A Role Modeling Ap-
proach.
[2] Basalo, A. (28 de Agosto de 2014). AngularJS. Ob-
tenido de https://desarrolloweb.com/articulos/que-es-angularjs-
descripcion-framework-javascript-conceptos.html.