UNIVERSIDAD NACIONAL
JOSÉ MARÍA ARGUEDAS
MANUAL DE PROGRAMACIÓN
DE APLICACIONES MÓVILES
(TALLER DE INGENIERÍA DE
SOFTWARE)
Programa de Estudios de Ingeniería de
Sistemas
Versión 1.0
Febrero – 2024
ANDAHUAYLAS
9001:2015
1
21001:2018
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
ÍNDICE
1. INTRODUCCIÓN
2. PRESENTACIÓN
3. OBETIVOS GENERALES Y ESPECÍFICOS
4. MANUAL DEL SISTEMAS
Guía práctica Nº 01: Instalación de IONIC y angular
Guía práctica Nº 02: Creación de un nuevo proyecto
Guía práctica Nº 03: Navegar y enviar información entre paginas
Guía práctica N° 04: Creación del formulario Login de un aplicativo móvil
Guía práctica N° 05: Creación de la página nout-found
Guía práctica Nº 06: Guardar datos en Storage (modo local)
Guía práctica Nº 07: Instalamos y configuramos la base de datos de
Firebase
..
….
…..
…..
….
5. MANUAL DE USUARIO SEGÚN ROLES
Guía práctica Nº 01: Manual del administrador
Guía práctica Nº 02: Manual del usuario
Guía práctica Nº 03: …………………
Guía Práctica N° 04: …………………
……
6. GLOSARIO DE TÉRMINOS
7. ANEXOS
UNAJMA.FOR.M01.01.0
V1.0
Página 2 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
GUÍA PRÁCTICA N° 04: CREACIÓN DEL FORMULARIO LOGIN DE UN
APLICATIVO MÓVIL
Creación del formulario Login de un aplicativo móvil
Sección: “A” Apellidos y nombres del estudiante:...............................................................
Docente: Ing. Julio Emil Huamán Huamán Fecha: ....... / ....... / 2024
Duración: 60 min. Tipo de práctica: Individual (X) Equipo ( )
1. Propósito / Objetivo:
Crear un login de un aplicativo móvil utilizando Framework de IONIC y Angular.
2. Fundamento Teórico:
El sistema de autenticación (LOGIN) en aplicaciones móviles es un componente
esencial para garantizar la seguridad y privacidad de los usuarios. La implementación
de un login permite verificar la identidad de los usuarios y proteger el acceso a
información sensible dentro de la aplicación.
3. Equipos, Materiales y Reactivos
3.1. Equipos:
a) Nombre: Computadora
Característica: procesador core i5
Cantidad: 1
b) Nombre: Proyector
Característica: 4K
Cantidad: 1
3.2. Materiales:
a) Nombre: Framework IONIC
Característica: Versión 7
b) Nombre: Angular
Característica: Versión 14
c) Nombre: Firebase
Característica: Base de datos no relacionada
d) Nombre: Visual Studio Code
Característica: Versión 1.95.3
e) Nombre: Internet
Característica: Mínimo 10 MB.
4. Indicaciones / Instrucciones previas:
4.1. Se realiza la descripción y funcionamiento del Framework de IONIC y Angular.
4.2. Verificar la correcta instalación de los Frameworks y aplicativos a utilizar.
4.3. Verificar el acceso al internet para evitar errores.
UNAJMA.FOR.M01.01.0
V1.0
Página 3 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
5. Procedimientos:
5.1. Teórica:
a) Un formulario de sistema de autenticación (login): Es una interfaz que
permite a los usuarios ingresar sus credenciales para acceder a una
aplicación o plataforma digital. Generalmente, este formulario solicita datos
como:
Nombre de usuario o correo electrónico
Contraseña
Algunas implementaciones pueden incluir opciones adicionales como:
Botón "Iniciar Sesión" para los usuarios que ya están registrados.
Botón “Registrase” para los nuevos usuarios.
Botón “Olvidé mi contraseña” para que el usuario pueda recuperar su
contraseña.
b) Ionic: Es un framework de desarrollo de aplicaciones móviles híbridas que
permite crear apps para iOS, Android y web con tecnologías web como
HTML, CSS y JavaScript. Funciona en conjunto con frameworks como
Angular, React o Vue y se basa en Web Components.
Características clave de Ionic:
Compatible con múltiples plataformas (iOS, Android, Web).
Usa una sola base de código para todas las plataformas.
Ofrece componentes UI nativos optimizados.
Integración con capacitor y cordova para acceso a funcionalidades
del dispositivo (GPS, cámara, etc.).
c) Angular: Es un framework de JavaScript desarrollado por Google para crear
aplicaciones web dinámicas y de alto rendimiento. Usa TypeScript y permite
estructurar aplicaciones en componentes reutilizables.
Características clave de Angular:
Basado en TypeScript (superset de JavaScript).
Arquitectura basada en componentes y servicios.
Usa el sistema de inyección de dependencias para mayor
escalabilidad.
Compatible con Ionic para el desarrollo de apps móviles híbridas.
☁️
d) Firebase: Es una plataforma de backend como servicio (BaaS) de Google
que proporciona herramientas para desarrollar aplicaciones web y móviles
sin necesidad de administrar servidores.
Servicios clave de Firebase:
Firebase Authentication: Manejo seguro de autenticación con
Google, Facebook, correo y más.
Cloud Firestore y Realtime Database: Bases de datos en la nube
para almacenar y sincronizar datos en tiempo real.
Firebase Hosting: Hospedaje de aplicaciones web con SSL.
Firebase Cloud Messaging (FCM): Envío de notificaciones push a
dispositivos móviles.
e) Visual Studio Code (VS Code): Es un editor de código fuente gratuito, ligero
y multiplataforma desarrollado por Microsoft. Es una de las herramientas más
populares entre los desarrolladores debido a su velocidad, extensibilidad y
compatibilidad con múltiples lenguajes de programación.
f) Relación entre Ionic + Angular + Firebase: Es una combinación potente
para crear aplicaciones móviles híbridas con un backend en la nube:
Ionic proporciona la interfaz y experiencia móvil.
Angular gestiona la lógica y estructura de la app.
Firebase maneja la autenticación, base de datos y almacenamiento.
UNAJMA.FOR.M01.01.0
V1.0
Página 4 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
5.2. Práctica:
Primero: Creamos el formulario de autenticación (login)
En el archivo login.page.html creamos el formulario que contiene los campos de
entrada (input) y botón de iniciar sesión.
Segundo : Creamos la función del objeto del formulario
En el archivo login.page.ts se crea la función del objeto del formulario login, en el cual
van a recibir los campos de entrada (input), que fueron enviando mediante el botón
de iniciar sesión.
Tercero : Creamos una nueva página para el registro de nuevos usuarios.
Para crear una nueva página (pages), utilizamos el comando “ionic generate”, luego
seleccionamos la opción “page” y ponemos el nombre de la nueva página.
UNAJMA.FOR.M01.01.0
V1.0
Página 5 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
Verificamos la creación de la nueva página registro
Cuarto : El formulario de autenticación (login) tiene dos botones, uno para iniciar
sesión y otro para registrar un nuevo usuario.
En el archivo login.page.html se agrega un nuevo botón denominado “registrarse”,
que va a direccionamos a la página “registro”.
El archivo registro.page.html contiene dos datos de entrada usuario (correo
electrónico) y contraseña del nuevo usuario.
UNAJMA.FOR.M01.01.0
V1.0
Página 6 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
Cuarto : Tenemos dos páginas, una página de login y otra página de registro.
Lo ejecutamos con el siguiente comando:
UNAJMA.FOR.M01.01.0
V1.0
Página 7 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
6. Resultados
6.1. El estudiante reconocerá el funcionamiento del Framework de IONIC y Angular.
6.2. Será capaz de crear un formulario de autentificación (login) de un aplicativo
móvil.
6.3. El estudiante identificará los Framewors para el desarrollo de aplicaciones
móviles.
6.4. El estudiante identificará el editor de código de fuente (Visual Studio Code).
7. Conclusiones
7.1. El sistema de autenticación (LOGIN) es un componente esencial para garantizar
la seguridad y privacidad de los usuarios en los aplicativos móviles.
7.2. Los Framework de IONIC y Angular, es para el desarrollo de aplicaciones
móviles en la nube.
7.3. Visual Studio Code es el IDE que nos permite realizar la programación del código
fuente.
7.4. Firebase maneja la autenticación, base de datos y almacenamiento.
8. Sugerencias y/o recomendaciones
La recomendación es tener buena conexión de acceso a internet, para no tener
ninguna dificultad en la codificación.
9. BIBLIOGRAFÍA
9.1. Bibliografía Obligatoria (*)
McCallhan, A. (2017). Learning Ionic: Build hybrid mobile applications with
HTML5, CSS, and JavaScript. Packt Publishing.
Seshadri, S. (2018). Angular Up & Running: Learning Angular, Step by Step.
O'Reilly Media.
UNAJMA.FOR.M01.01.0
V1.0
Página 8 de 6
Programa de estudios de Ingeniería de Sistemas
Laboratorio de Programación de Aplicaciones Móviles
GUÍA PRÁCTICA DE LABORATORIO
Ionic Framework. (s.f.). Ionic Documentation. Recuperado de:
https://ionicframework.com/docs
Angular. (s.f.). Angular Documentation. Recuperado de: https://angular.io/docs
Firebase. (s.f.). Firebase Documentation. Recuperado de:
https://firebase.google.com/docs
9.2. Bibliografía de consulta
Banas, A. (2019). Hybrid Mobile Development with Ionic Framework. Leanpub.
Freeman, A. (2021). Pro Angular 9. Apress.
Udemy. (s.f.). Ionic + Angular: Build amazing apps with Firebase & Ionic.
Recuperado de: https://www.udemy.com
UNAJMA.FOR.M01.01.0
V1.0
Página 9 de 6
