Soluciones de Programación Móvil

24 de mayo de 2023, Ciudad de México, México

School-Droid: Una herramienta de productividad

estudiantil

Israel Emiliano Gutiérrez Rabelo Sofía Pacheco Rodriguez Víctor Manuel Ruiz Escareño Héctor Jair Velázquez Jiménez
Universidad del Valle de México Universidad del Valle de México Universidad del Valle de México Universidad del Valle de México
Campus Coyoacán Campus Coyoacán Campus Coyoacán Campus Coyoacán
Ciudad de México, México Ciudad de México, México Ciudad de México, México Ciudad de México, México
340382108 340393067 040136530 340389707

Brenda Hinojosa Torres Nadia Samantha Peña Urbina Salvador de Jesús Pérez Morales
Universidad del Valle de México Universidad del Valle de México Universidad del Valle de México
Campus Coyoacán Campus Coyoacán Campus Coyoacán
Ciudad de México, México Ciudad de México, México Ciudad de México, México
340384331 340382583 340379947

Abstract—. La app SchoolDroid es una app que brinda a los Para el desarrollo de esta app, se determinaron una serie de
estudiantes la opción de organizar la vida escolar con un creador funcionalidades necesarias para la correcta ejecución de la app,
de horarios y planes del día, ver diferentes técnicas de estudio y se determinaron los layouts necesarios para cumplir con cada
que tenga la opción de escuchar música recomendada para el requerimiento, además de la creación y conexión de una base de
estudio y la concentración. En el presente escrito se describe el datos para manejar los datos personales del usuario, así como la
desarrollo de la aplicación, desde el diseño de los layouts, hasta la información sobre agendas y horarios, además de la codificación
implementación de una base de datos basada en documentos, de cada elemento como botones y textos, obteniendo las
usando el servidor de Firebase de Google para el uso de siguientes secciones: descripción de la aplicación, lista de
aplicaciones móviles, así como los comandos para el registro e
funcionalidades, base de datos, implemento de menú, splash y
ingresado exitoso usando un correo electrónico válido. Por otro
lado, se dará una descripción de elementos utilizados para la
funcionalidades de elementos gráficos de layouts. Asimismo, el
estética y dinamismo de la app, como splash, toolbar y menú. documento integra las secciones de resultados, conclusiones,
Además, se implementaron funcionalidades de elementos como trabajo a realizar y bibliografía
botones y textos, además de un reproductor de música, así como
un cronómetro y almacenamiento de pendientes.
II. DESARROLLO DE APLICACIÓN MÓVIL
Keywords— App, Firebase, Android Studio, interfaz gráfica,
Kotlin A. Descripción de la aplicación
Como se planteó al inicio del proyecto, School-Droid es una
I. INTRODUCCIÓN
aplicación enfocada para dispositivos móviles con el sistema
La importancia de las aplicaciones móviles se ha operativo Android. Esta aplicación, tiene como objetivo brindar
incrementado últimamente, y debido a el gran número de al estudiante la facilidad de organizar la vida escolar, esto
dispositivos que existen [1], es fundamental el constante mediante un creador de horarios y planes del día, donde se
desarrollo y mejoras de estas. Las apps son aplicaciones brinda la opción de agendar la realización de tareas o deberes.
informáticas que pueden ser ejecutadas en dispositivos portátiles Además, se brinda la opción de ver diferentes técnicas de
como teléfonos inteligentes, tabletas, relojes inteligentes u otros estudio, para así mejorar el rendimiento académico, y
dispositivos móviles, cuyo objetivo es proporcionar a sus
finalmente, que tenga la opción de escuchar música
usuarios la opción de efectuar tareas concretas de tipo
profesional, de ocio, educativas, de acceso a servicios, etc. Sin recomendada para el estudio y la concentración.
la necesidad de tener un dispositivo tan complejo y físicamente B. Lista de funcionalidades
grande como una computadora, facilitando de este modo las
Para que todas las funcionalidades puedan ser utilizadas por el
gestiones o actividades a desarrollar, permitiendo que se puedan
usuario, es necesario que inicie sesión con una cuenta ya
hacer en cualquier lugar [2].
existente, y si no cuenta con una, se ofrece la opción de crear 3. Registrar la app con le nombre del paquete,
una cuenta nueva. Una vez iniciada una sesión, la aplicación sobrenombre de la app y el certificado de firma SHA-1
ofrecerá las siguientes funcionalidades: de depuración (este último es opcional)
a) Pantalla principal: donde se presenta la fecha actual, 4. Descargar el archivo de configuración google-
además, se muestra la lista de pendientes que han sido services.json
agragados con anterioridad, además de todas las opciones que
puede hacer el usuario, como el cronómetro (técnica 5. Agregar el archivo google-services.json a la carpeta app
del proyecto de Android Studio
pomodoro), música, horario, tips, tareas, además de un menu
contextual donde se puede consultar la información del usuario 6. Agregar el complemento o dependencia buildscript al
y la opción de cerrar sesión. archivo build.gradle de nivel de proyecto:
b) Cronómetro: esta funcionalidad ofrece un
temporizador, para que el usuario controle el tiempo de estudio,
y que como la técnica pomodoro sugiere, trabaje en lapsos de classpath 'com.google.gms:google-
25 minutos y descansos de 5 minutos más. services:4.3.15'
c) Música: en esta pantalla, se ofrece un reproductor de 7. En el archivo build.gradle del módulo (nivel de app)
música donde el usuario puede pausar y reproducir la música y agregar los complementos google-services y cualquier
cambiar a la siguiente o anterior canción. SDK de Firebase que se quiera usar en la app. Las que
d) Horario: esta ventana muestra el horario de cada dia se usaron para la app BeatleMania son:
de la semana que el usuario ha agregado con anteriorirdad,
además de la opción de agregar nuevas materias al horario.
e) Tips: en esta pantalla se muestran una serie de
consejos que pueden ser de utilidad para que el usuario pueda
mejorar sus hábitos de estudio.
f) Tareas: esta ventana ofrece la visualización de todos
los pendientes que han sido agregados por el usuario, se
muestra el nombre de la tarea, la materia a la cual pertence y la Figura 1. Dependencias ingresadas en build.gradle (app)
fecha de entrega, además de la opción para agregar nuevas
tareas a la lista de pendientes.
g) Detalles de la cuenta: en esta sección se puede
8. Después de agregar el complemento y los SDK
consultar la información del estudiante, como su nombre de deseados, sincronizar el proyecto de Android con
usuario, su correo electrónico y su contraseña. archivos de Gradle.
C. Base de datos
Una base de datos, en una aplicación móvil, se implementa
aquella del tipo no SQL. Este tipo de paradigma, a diferencia de D. Implemento de menú
una SQL, no se organiza la información en tablas, ya que la Los menús son un componente común de la interfaz de
información en este caso es semiestructurada, presenta modelos usuario en muchos tipos de aplicaciones. “es la colección
de datos específicos y tienen esquemas flexibles para crear principal de elementos de menú de una actividad. Es donde se
aplicaciones modernas, y una característica fundamental en esta debe colocar las acciones que tienen un impacto global en la
base de datos es que utiliza una variedad de modelos de datos app” [4].
para acceder y administrar datos [3].
Para todos los tipos de menús, Android proporciona un
Para la implementación de una base de datos no relacional formato XML estándar que permite definir los elementos de
se implementó el servicio de Firebase de Google, el cual menú. En base a la descripción de [4], para definir el menú, se
implementa bases de datos no SQL basado en documentos. Este crea un archivo en formato XML dentro del directorio res/menu/
tipo de base de datos, de acuerdo con Amazon Web Services [3]: del proyecto y desarrollar el menú con los siguientes elementos
“facilita a los desarrolladores el almacenamiento y la consulta o etiquetas:
de datos El modelo […] funciona bien con catálogos, perfiles de
• <menu>: define el menú, y será la raíz de dicho
usuario y sistemas de administración de contenido en los que
archivo XML.
cada documento es único y evoluciona con el tiempo”.
Para poder implementar una base de datos de Firebase a una • <group>: Es un contenedor opcional e invisible
aplicación móvil se debe de tener una cuenta de Google y para elementos <item>. Permite categorizar los
realizar lo siguiente: elementos de menú para que compartan
propiedades.
1. Crear un proyecto en Firebase
• <item>: representa un único elemento en un menú.
2. Agregar una aplicación a tu proyecto en Firebase (en Este elemento puede contener un elemento
este caso será una aplicación en Android) <menu> anidado para crear un submenú.
 2. Dentro del archivo themes.xml, crear un estilo para
implementar el splash creado, y dentro, la siguiente
Para crear un menú desarrollado, primeramente, se tiene que etiqueta:
deshabilitar el que está por defecto, esto se logra modificando el
archivo theme.xml dentro de la carpeta themes con la siguiente
línea:
<item
<style name="_____________" name="android:windowBackground">@drawabl
parent="Theme.AppCompat.Light.NoActionBa e/splash</item>
r">

3. Una vez definida esta, en el primer activity que muestra

Después se genera la carpeta menú en el directorio /res y se la app, escribir el siguiente comando:
crea un archivo XML para la creación de este. Una vez creado,
en el activity que se vaya a implementar el menú, se coloca un setTheme(R.style.Theme_ School_Droid)
elemento Toolbar, ya que ahí se depositará el menú definido con
anterioridad. Para poder depositar de manera correcta dentro del
activity el menú, se implementan los siguientes comandos: 4. En el archivo AndroidManifest, dentro de la etiqueta del
activity donde se implementará el splash, se escribe la
siguiente etiqueta:
android:theme="@style/splashTheme">

F. Funcionalidades de elementos gráficos de layouts

A continuación, se dará la explicación de las funcionalidades
que tiene los elementos de los layouts que contiene la app
SchoolDroid
a) Inicio
Para el desarrollo de este layout, únicamente se
Figura 2. Código para implementar el menú
implementaron Button, ImageView y TextView. Se tiene
Después en el archivo AndroidManifest, dentro de la las siguientes funcionalidades:
etiqueta <application> se agrega la siguiente línea: • Al darle clic al botón “Crear cuenta nueva”, se
ingresará al layout “Registrarse” para la
creación de un nuevo usuario
android:theme="@style/Theme.School_Droid" • Al darle clic al texto “Iniciar sesión” (con la
propiedad de clickable), se ingresa al layout
“Iniciar_sesion” para el ingreso de la aplicación
Y dentro del archivo XML del layout donde se ingresó el y todas sus demás funcionalidades.
elemeto Toolbar, se agrega la siguiente línea:
b) Registrarse
Para este layout solo se implementaron EditText y
android:theme="@style/Theme. School_Droid "
Button, Dentro de su archivo de Kotlin, se crean variables
constantes con el tipo de dato del elemento del layout y
por medio del método “findViewById()” se identifican a
los elementos de manera específica. Para darles una
E. Splash funcionalidad a los botones se utiliza el método
Splash, o pantalla de presentación, es una “animación que “setOnClickListener()”, y en ellos se ingresa lo que harán
incluye un movimiento de entrada a la app cuando se inicia, una estos. Esta ventana tiene las siguientes funcionalidades:
pantalla de presentación que muestra el ícono de la app y una • Si la contraseña se colocó de manera correcta y
transición a la app en sí misma” [5]. sin variaciones, con un objeto de la clase
FirebaseAuth, se invoca el método
Para poder implementarlo en la app, se debe de realizar lo
createUserWithEmailAndPassword con
siguiente:
parámetros de correo y contraseña ingresadas,
1. Dentro del directorio /res/drawable un archivo XML después se crea una instancia de la clase
que será la pantalla de presentación, con la etiqueta raíz FirebaseFirestore con el método getInstance();
< layer-list >. Dentro de este se ingresan las etiquetas esto con el objetivo de generar los documentos
hijos <item> donde se podra poner el color de fondo y para la base de datos en Firebase, por medio de
la imagen que aparecerán. un arreglo del tipo HashMap.
 • Una vez ingresados el correo, se tiene que • Se visualiza el horario del estudiante con las
verificar con el propósito de asegurar que el materias ingresadas por él dentro de los espacios
correo es verídico, de lo contrario, no se tendrá en blanco
acceso al contenido • Para agregar una materia, se da clic en el botón
“+” y se dirige a la ventana
c) Iniciar_sesion “Agregar_A_Horario”
Para este layout se implementaron los siguientes • Con el botón “Menu”, se puede dirigir
elementos: EditText, Button, TextView e ImageView. nuevamente al layout con el mismo nombre
Dentro de su archivo de Kotlin, se crean variables
constantes con el tipo de dato del elemento del layout y Para el segundo layout se implementaron ImageView,
por medio del método “findViewById()” se identifican a Button, EditText y TextView. Esta ventana tiene las
los elementos de manera específica. Para darles una siguientes funcionalidades:
funcionalidad a los botones se utiliza el método • Con los campos correspondientes a llenar (día,
“setOnClickListener()”, y en ellos se ingresa lo que harán hora y materia) se llenarán los datos de la
estos. materia para generar el horario. Estos serán
Dado que la ventana es para el inicio de sesión se tiene guardados y enviados a los datos del usuario
las siguientes funcionalidades para poder visualizar sus materias en el layout
• Si existe un usuario registrado en la base de de “Horario”.
datos de la aplicación, se mostrará el contenido • Con el botón “Horario”, se podrá dirigir
de la app. nuevamente al layout con el mismo nombre
• Si los campos de correo y contraseña están
vacíos, se le notifica al usuario f) Cronómetro
• Puede recuperar la contraseña del correo escrito Para este layout solo se implementaron ImageView y
en su campo correspondiente TextView. Esta ventana está relacionada con la técnica
• Si el usuario no está registrado en la app, se de estudio pomodoro y tiene la siguiente funcionalidad:
podrá registrar en la base de datos • Se presentan un cronómetro para poder aplicar
la técnica pomodoro, esto como objetivo de
d) Menu mejorar la administración del tiempo dedicado
Para diferenciar del archivo XML “menu”, se usará con a una actividad o tarea escolar.
la primera letra en mayúscula en este inciso para hacer • Podrá iniciar el tiempo del cronómetro y
referencia a la ventana principal del software. Para este detenerlo
layout solo se implementaron los siguientes elementos: • Con el botón “Menu”, se podrá dirigir
Toolbar, ImageView y TextView, Esta ventana tiene las nuevamente al layout con el mismo nombre
siguientes funcionalidades:
• Se muestra la fecha actual. g) Música
• Se muestra la lista de tareas pendientes. En este layout se implementaron ProgressBar,
• El menú creado con anterioridad se importa con ImageButton, TextView e ImageView. Como esta
el método sobrescrito onCreateOptionsMenu() ventana se pretende ser un pequeño reproductor de
(mostrado ya con anterioridad). Con el método música, tiene las siguientes funcionalidades:
sobrescrito onOptionsItemSelected(), y dentro • Las canciones serán recomendadas para mejorar
de esta una estructura de selección múltiple se la concentración del universitario durante la
puede dar dinamismo para los elementos del realización de tareas o al estudiar para exámenes
menú, con la funcionalidad de cambiar de • Se puede reproducir y pausar la canción cuando
ventana al darle clic a un ítem de este mismo. el usuario lo deseé
• En la parte inferior de la ventana, se muestra • Con el elemento ProgressBar y botones de
otro menú con íconos, esto con el propósito de adelantar y atrasar, se puede adelantar la
darle dos opciones al usuario de usar un menú canción en el tiempo que el usuario deseé.
tradicional o gráfico para una mejor comodidad • Con el botón “Menu”, se podrá dirigir
y autonomía en la implementación de la app. nuevamente al layout con el mismo nombre
• Los ítems del menú principal son: ver horario,
técnica pomodoro, música, tips, tareas y cerrar h) Tips
sesión.
Este layout se le implementaron TexView e ImageView.
e) Horario y Agregar_A_Horario Esta ventana cuenta con las siguientes funcionalidades:
Para el primer layout solo se implementaron ImageView • Mostrar tips para mejorar la calidad del estudio
y TextView. Esta ventana tiene las siguientes de los estudiantes.
funcionalidades:
 • Con el botón “Menu”, se puede dirigir Figura 3. Layout de inicio.
nuevamente al layout con el mismo nombre

i) Agenda y Agregar_Tarea
Este layout se le implementaron un ImageView y
TextView. Dentro de un archivo Kotlin creando
constantes del tipo de dato del elemento layout y por
medio del método “findViewById” para identificar los
elementos de manera más específica. Esta ventana tiene
las siguientes funcionalidades:
• Se muestran las tareas pendientes y completadas
de los estudiantes registrados con el objetivo de
llevar un orden y organización en los pendientes
que se tienen
• Se agregan los pendientes con el layout
“Agregar_Tarea”, donde el usuario podrá
agregar las tareas y los datos de estas. En el Figura 4. Layout registrarse.
campo “Tarea”, se ingresa el nombre; en
“Materia”, a que asignatura corresponde; en
“Fecha de entrega”, el día para el cual debe estar
finalizada; en “Hora de entrega”, el horario
especifico de entrega y finalmente; en
“Detalles”, las notas adicionales para la
realización de la tarea. Con el botón de
“AGREGAR TAREA” se ingresa de forma
organizada el registro.

j) Cuenta
En este layout se implementaron diferentes TextView e
ImageView, además de un Button y diferentes EditText. Esta
ventana tiene las siguientes funcionalidades:
• Visualizar los detalles de la cuenta, como el nombre
de usuario, el correo electrónico y la contraseña de la
cuenta. Figura 5. Layout iniciar sesión.
• Editar y actualizar los datos de la cuenta del usuario.
III. RESULTADOS
A continuación, se presentan las diferentes pantallas de la
aplicación ejecutada en un dispositivo físico.

Figura 6. Layout de inicio.

Figura 7. Layout cronómetro. Figura 10. Layout agregar materia.

Figura 8. Layout música. Figura 11. Layout tips.

Figura 12. Layout tareas.

Figura 9. Layout horario.
 forma en que interactuamos con nuestros dispositivos móviles,
brindando una amplia gama de servicios y funciones que
facilitan nuestras vidas en diversos aspectos.
Las aplicaciones móviles nos permiten acceder de manera
rápida y conveniente a información y servicios desde cualquier
lugar y en cualquier momento. Ya sea para realizar compras en
línea, realizar transacciones bancarias, obtener noticias
actualizadas, buscar información, conectarse con amigos en
redes sociales o realizar seguimiento de nuestras actividades
diarias, las aplicaciones móviles han simplificado y agilizado
nuestras tareas cotidianas.
Asimismo, las aplicaciones móviles han tenido un impacto
significativo en sectores como la salud, la educación, el
entretenimiento y la productividad. En el ámbito educativo, las
aplicaciones móviles han brindado nuevas formas de
Figura 13. Layout agregar tarea. aprendizaje interactivo y acceso a contenido educativo
enriquecido.
V. TRABAJO A REALIZAR
El desarrollo de una app como SchoolDroid es complejo, y
tiene varias áreas de oportunidad, y sin duda existen diferentes
funcionalidades a mejorar, que incrementarían su utilidad.
Además de lo desarrollado hasta el momento, se busca
implementar más funcionalidades a futuro, como la integración
de notificaciones, que le proporcionen al usuario información
útil, y sobre todo que sirvan como recordatorio para las
actividades que debe realizar pronto, de acuerdo con la agenda
y el horario ingresado anteriormente.
Además, se busca implementar la opción de ingresar un
periodo de tiempo en el que el horario es vigente, eliminándose
automáticamente al terminar el plazo.
Finalmente, con el objetivo de brindar una mejor
Figura 14. Menú contextual organización al usuario, se busca implementar un layout que
brinde un historial con todas las calificaciones obtenidas en las
tareas, generando promedios, estadísticas, tiempos, o cualquier
otra información que sea de ayuda para que el usuario logre
mejorar la productividad y eficiencia académica.

REFERENCIAS
[1] I. M. Argote Puetaman, et. al, «Desarrollo de Apps: un
estudio comparativo entre frameworks libres y
privativos,» Boletín Informativo CEI, vol. 3, nº 2, p. 44,
2016.
[2] E. Amengual, et. al., «Hacia un Marco de Desarrollo para
Apps Móviles,» 2011. [En línea]. Disponible en:
https://biblioteca.sistedes.es/submissions/uploaded-
files/JISBD_2017_paper_34.pdf. [Último acceso: 11
abril 2023].
Figura 15. Layout detalles de la cuenta.
[3] Amazon Web Services, «¿Qué es NoSQL?,» [En línea].
Dsponible en: https://aws.amazon.com/es/nosql/.
IV. CONCLUSIONES [Último acceso: 11 abril 2023].
Las aplicaciones móviles han adquirido una enorme [4] Android Developers, «Pantallas de presentación,» [En
importancia en nuestra sociedad actual, y el desarrollo de nuevas línea]. Disponible en:
aplicaciones para Android desempeña un papel fundamental en
el mundo tecnológico. Estas aplicaciones han revolucionado la
 https://developer.android.com/guide/topics/ui/splash-
screen?hl=es-419. [Último acceso: 11 abril 2023].
[5] Android Developers, «Menús,» [En línea]. Disponible
en:
https://developer.android.com/guide/topics/ui/menus?hl
=es-419. [Último acceso: 11 abril 2023].

ANEXO

QR de los archivos de programación de la app:

QR del video demostrativo de la app