Está en la página 1de 48

TECNOLÓGICO DE ESTUDIOS SUPERIORES DE

CHIMALHUACÁN

DIVISIÓN DE: Ingeniería en Sistemas Computacionales

MATERIA: Sistemas Distribuidos

“App con conexión aplicada a algun servidor o ip para sistemas distribuidos.”

PRESENTA:
Cortés Pérez Pedro Daniel
Elizalde Ruiz Ignacio
Resendiz Aguila Diego Eduardo

GRUPO: 9ISC21

MATRICULAS:
17450009
17450038
17450016

PROFESOR:
Mtro. Granados Hernández Juan Antonio

Chimalhuacán Estado de México a 10 de abril del 2021


Índice
Introducción ................................................................................................................................................................. 3
Desarrollo ..................................................................................................................................................................... 4
Creacion del Proyecto ............................................................................................................................................ 4
Creación del Diseño (Menú). ................................................................................................................................. 5
Creacion del diseño (Altas-Registros) ................................................................................................................ 6
Creacion del diseño (Consulta) ............................................................................................................................ 8
Creacion del diseño (Modificar y Eliminar) ........................................................................................................ 9
Programación de la Ventana (Menú) ..................................................................................................................10
Creación de la Base de Datos ..............................................................................................................................12
Creacion de Hojas PHP (Registro SQL) .............................................................................................................13
Creacion de Hojas PHP (Consulta del Número de Control SQL) ..................................................................14
Creacion de Hojas PHP (Consulta Datos Alumnos SQL) ...............................................................................15
Creacion de Hojas PHP (Consulta Por Número de Control SQL) .................................................................15
Creacion de Hojas PHP (Modificación de Datos SQL) ....................................................................................16
Creacion de Hojas PHP (Elimianción de Datos SQL) ......................................................................................16
Almacenamiento de las Hojas PHP ....................................................................................................................17
Programación de la Ventana (Altas - Registros) ..............................................................................................18
Programación de la Ventana (Consulta - Registros) .......................................................................................26
Programación de la Ventana (Modificar/Eliminar - Registros) ......................................................................31
Generando el APK de la aplicación ....................................................................................................................36
Pruebas de Funcionamiento en Movil ................................................................................................................38
Introducción

IDE: Android Studio


Lenguaje de Programación: Java Android
Lenguaje de Base de datos: SQL con PHP

La siguiente aplicación movil desarrollada en Android Studio es un Sistema de Control de Alumnos,


que permitira al personal de control escolar registrar datos del alumno, consultas al momento, editar o
eliminar si asi lo desea.
Se creara una base de datos bajo el lenguaje de SQL la cual se alojara en un servidor gratuito, para
que los registros y consultas puedan hacerse via remota, siempre y cuando el movil tenga conexión a
internet.
Se hara uso de hojas de PHP para lograr la conexión con el servidor que aloja la base de datos, de
igual manera para los registros, consultas, modificaciones y eliminacion de datos.

Registro - INSERT INTO TableName


Consulta – SELECT * FROM TablaName
Modificacion - UPDATE TableName SET AtributoName
Eliminación - DELETE FROM TableName
Desarrollo

Creacion del Proyecto


Paso 1: Crear un Nuevo Proyecto en Android Studio y elegir “Empty Activity”.

Paso 2: Darle nombre como “Formulario” y seleccionar el SDK que se observa para tener
compatibilidad desde sistemas android 5.0 hasta 11, finalmente le damos en “Finish”.
Paso 3: Se nos creara el proyecto, y nos abrira dos documentos en la plataforma uno llamado
activity_main.xml que es el que alojara la parte grafica de la aplicación, tambien se nos abrira un
documento MainActivity.java que estara obligatoriamente relacionado con el archivo xml y que alojara
la parte de programacion de cada objeto que se cree en la aplicación.

Creación del Diseño (Menú).

Paso 1: Justo en el activity_main.xml vamos a diseñar nuestro menú, con algunos botones que nos
enlazaran a las distintas partes de la aplicación ya sea Registros, Consultas, Modificación y eliminación
de datos, nos quedaria algo asi:
Creacion del diseño (Altas-Registros)

Paso 1: Ahora vamos a crear otra pagina o ventana para nuestro proyecto, para eso le damos clic
derecho en la carpeta llamada “com.example.formulario”, despues en “New”, despues en
“Activity” y damos clic en “Empty Activity”, finalmente le damos el nombre de “Altas” y se crearan
otros archivos el XML y el JAVA.
Paso 2: El archivo XML vamos a diseñar la parte del formulario de registro donde se dara de alta los
datos del alumno, quedaria de la siguiente manera, agregando tambien un boton llamado “Registrar”.
Creacion del diseño (Consulta)

Paso 1: Repetimos los pasos para poder crear otra ventana vacia dentro de nuestro proyecto. Le
daremos el nombre de “Consulta”.

Paso 2: Esta ventana contendra un “RecyclerView” que es un objeto que nos permitira visualizar los
datos de los Alumnos registrados, y es lo unico que contendra.
Creacion del diseño (Modificar y Eliminar)

Paso 1: Repetimos los pasos para crear otra ventana vacia, Le pondremos a esta el nombre de
“ModificarEliminar”.

Paso 2: Esta ventana debera mostrarnos un cuadro de texto donde ingresaremos el Núm. Control del
alumno a buscar, y nos visualizara todos los datos del alumno, el cual podremos eliminar o modificar
dando clic en los Botones Eliminar y Modificar.
Programación de la Ventana (Menú)

Paso 1: Tenemos 3 Botones llamados “Altas”, “Consultas” y “Edición”. El cual nos deben de enlazar a
las ventanas que creamos previamente, para eso nos localizamos en el archivo “MainActivity.java”. Alli
crearemos 3 public void (View view) y haremos uso de la funcion Intent() para instanciar las ventanas
como objetos, y con la funcion StartActivity() llamarlas a llamar y poder inicializarlas como se observa
en la imagen.
Paso 2: Ahora vamos a localizarnos en el archivo “Activity_main.xml”, estando alli seleccionamos
el boton “Altas” y de lado derecho buscamos la funcion “OnClick” y seleccionamos el public void
Altas(View view), de esta manera el boton ejecutara el codigo que contenga el public void
Altas(View view), haremos lo mismo con los demas botones, eligiendo el public void correspondiente.
Creación de la Base de Datos
Paso 1: La siguiente base de datos no es relacional, ya que solo depende de una sola tabla que
albergara los datos del alumno, por la cual se creara en el lenguaje SQL dentro de un servidor o host
gratuito, para eso visitamos la pagina web https://mex.000webhost.com/ que nos permitira crear una
base de datos con SQL, para eso debemos de registrarnos.
Paso 2: Despues ya estando registrados, nos vamos a las herramientas de la plataforma y damos clic
en “Database Manager”, y nos abrira una pestaña donde elegiremos el nombre de nuestra base de
datos, contrseña y nos dara un ID que nos servira mas adelante para poder registrar datos en la base.

Paso 3: Una vez creada nuestra base de datos, vamos a darle clic en “Manager” donde
seleccionaremos “PhpMyAdmin” que es una herramientas que nos permitira crear la tabla y sus
atributos con sentencias SQL, asi como se ve en la imagen.
Creacion de Hojas PHP (Registro SQL)

Una hoja PHP nos permitira manipular los datos de entrada los cuales son los datos ingresados en los
cuadros de texto en la aplicación, y que se enviaran a la base de datos para ser almacenados, esta
hoja de php en primera instancia logra una conexión via internet desde la aplicación hasta la base de
datos alojada en el host gratuito.
Paso 1: Para crear una hoja de PHP solo necesitamos un editor de texto que nos autocomplete codigo
para hacerlo mas comodo, para ello utilizaremos SublimeText en cualquiera de sus versiones, dentro
del programa creamos un archivo y los guardamos con la extensión PHP, y despues lo volvemos a
abrir.
Paso 2: Ahora vamos a crear codigo que nos permita lograr la conexión de primera instancia con la
base de datos, ya que esta parte la llevaria cada hoja de php donde se quiera consultar, registrar
modificar y eliminar cualquier dato.

Paso 3: Para generar un registro debemos ejecutar el comando SQL Registro - INSERT INTO
TableName:
Creacion de Hojas PHP (Consulta del Número de Control SQL)

Paso 1: Ahora vamos generar otra hoja de PHP llamada Consulta_NumControl con SELECT * FROM
TablaName, esta consulta nos servira para saber si previo al registro ya existe el número de control
actualmente registrado, y en caso de estarlo, la aplicación arrojara el mensaje correspondiente para
negar el registro doble del número de control.
Creacion de Hojas PHP (Consulta Datos Alumnos SQL)

Paso 1: Creamos otra hoja de php llamada “Consulta_DatosAlumnos”, en ella igual haremos una
consulta con el comando Select, pero en este caso indicaremos los datos que necesitamos, como el
nombre, apellidos, numerodecontrol, grupo, calificación, sexo, y fecha, sin el Id ya que para esto no lo
necesitamos.

Creacion de Hojas PHP (Consulta Por Número de Control SQL)


Paso 1: Nuevamente creamos otra hoja PHP y le daremos el nombre de “Consulta_PorNumControl”,
aquí volveremos a usar el comando SELECT y pediremos todo los atributos incluyendo el ID esto para
posteriormente poder generar cambios y/o eliminaciones, usaremos tambien el comando WHERE para
expecificar que busque los datos del ID que se ingrese en la aplicación previa a la busqueda.
Creacion de Hojas PHP (Modificación de Datos SQL)

Paso 1: Volvemos a crear otra hoja PHP con el nombre “Modificar_DatosAlumnos”, aqwui utilizaremos
un comando llamado UPDATE TableName SET AtributoName, que nos servira para actualizar datos
ya registrados, tambien utilizaremos el comando WHERE para especificar el ID del alumno al cual le
queremos actualizar los datos.

Creacion de Hojas PHP (Elimianción de Datos SQL)


Paso 1: Por ultimo crearemos otra hoja PHP llamada “Eliminar_DatosAlumno”, en la
cual usaremos el comando DELETE FROM TableName, tambien utilizaremos el comando
WHERE para especificar el ID del alumno al cual queremos eliminar el registro.
Almacenamiento de las Hojas PHP

Paso 1: Ahora vamos a almacenar todas las hojas PHP que se generaron, dentro del sistema o host
gratuito, para eso nos vamos a Tools, y en File Manager, alli dentro nos vamos a la carpeta public_html,
y alli dentro pegamos todas las hojas php
Programación de la Ventana (Altas - Registros)

Antes que nada debemos de abrir el archivo build.gradle(Module: app), en la que agregaremos la
dependencia mas importante para lograr la comunicación entre el servidor o host y el movil a tra vez
de internet, para eso agreganmos la siguiente dependencia de Volley según la version que este
disponible.

Paso 1: Nos dirigimos al archivo Altas.java que es donde relacionaremos las variables con los objetos
que estan en activity_altas.xml, estan alli lo primero que debemos hacer es importar las librerias
necesarias para el funcionamiento de esta ventana, principalmente
Paso 2: Lo siguiente sera crear las variables según los objetos que creamos en el archivo
activity_altas.xml los cuales estaran conectados entre si, pero de primera instancia sera declararlos
dentro del public class Altas,

Estas dos variables provienen de la dependencia Volley que previamente instalamos y sincronizamos,
y nos serviran para inicializar y resguardar la información.

Tambien debemos de implementar las clases del JSONObject que nos serviran para encapsular los
datos de entrada y llevarlos a la base de datos a tra vez de internet, al implentar el JSONObject se nos
crearan las dos siguientes clases, onErrorResponse ejecutara algun codigo de respuesta cuando el
registro no pueda validarse, y onResponse ejecutara todo el proceso de registro cuando la conexión
se halla logrado.
Paso 3: Ahora vamos a relacionar las variables con los objetos del archivo xml dentro del protected
void onCreate(Bundle savedInstanceState), para asi obtener la informacion de entrada, para esto
hacemos uso de la función “findViewById(R.id.VARIABLE)” de esta manera toda la informacion que
entre podra ser manipulada en el codigo.

Recordemos que tenemos un Spinner el cual su variable en el codigo es “grupo”, pero este deberia
tener informacion alojada al hacer clic sobre el, asi que agregaremos diferentes nombres de grupos
con un ArrayAdapter el cual le asignara la informacion alojada en un arreglo de tipo String.
Finalmente le asiganmos la informacion a la variable grupo con .setAdapte(adapter).
Paso 4: Ahora vamos a crear un public void llamado cargarClave(), que nos servira para ejecutar el
codigo que hara la consulta que esta en la hoja de php llamado “Consulta_Numcontrol.php”, y en
caso de que la consulta nos lanze un resultado es porque el numero de control que se intenta registrar
ya ha sido registrado anteriormente.
Paso 5: Dentro de ella crearemos una variable tipo String para asignarle la ruta de la hoja de php
llamada “Consulta_NumControl.php” junto con el nombre del atributo seguida de la informacion de
la variable que se espera recibir la cual es “numerodecontrol=+ numcontrol.getText().toString();”.
Paso 6: Las variables jsonObjectRequest y request, que declaramos previamente, nos serviran para
resguardar y enviar la informacion con GET y JSON.

Paso 7: Previoa desarrolar el codigo en la clase public void onResponse(JSONObject response){},


crearemos un archivo java llamado “Consulta_NumControl.java”. que contendra las variable nombre
que sera la que almacena el datos que arroje la consulta de la hoja de php, para que esta variable
pueda ser utilizada debemos de generarle un GETTER y SETTER, nos quedaria asi.
Paso 8: Toca irse a la clase public void onResponse(JSONObject response){}, donde trataremos
la infromacion que nos arroje la consulta de la hoja de php “Consulta_NumControl”, y responder según
si exista un registro existente o no de algun numero de control, todo esto a base de condicionales IF
que nos permitan determinar ciertos parametros de respuesta, si enc aso de que no exista un registro
previo de un número de control, se procedera a generar el registro de los datos del alumno, y enc aso
de que si exista ya un registro la aplicación mandar un mensaje flotante “Número de control Ya
Registrado”.

Paso 9: Pero previo a la ejecución del registro, hay una parte del codigo que determina si todos los
campos de texto estan llenos ya que todos los datos son de tipo no nulo, lo que significa que los todos
los campos deben ser llenados, incluso los radiobutton y el spinner. En caso de que si esten llenos,
ahora si nos lanzara al registro de todos los datos.
Paso 10: Validando que todos los campos esten llenos, nos mandara una clase que debemos crear
public void registroAlumno(){} en ella alojara el codigo necesario para el registro, pero previo a eso
debemos crear un archivo java llamado “RegisterRequestAlumno.java”, en ella estara el codigo que
capturara la informacion en los campos de texto, spinner y radiobutton para encapsularlos y mandarlos
a la hoja de php llamada “Registro_alumno.php”.

Paso 11: El archivo RegisterRequestAlumno.java se encarga de encapsular y enviar los datos,


pero antes de eso debemos extraerlos y enviarlos desde la clase public void registroAlumno(){}, con
el siguiente codigo.
Paso 12: Incluiremos un detalle, que es la insersion de una fecha, la haremos de una manera mas
interactiva abriendo una interfaz de un calendario para que el usuario solo seleccione la fecha deseada,
para eso crearemos un public void Fecha(View view){}, y dentro de esta clase escribiremos el
siguiente codigo, el cual se los asignaremos

Paso 13: Por ultimo solo nos faltaria, asignarle las funciones al boton “Registrar”(registro), para esto
nos vamos al protected void onCreate(Bundle savedInstanceState), donde crearemos un subclase
.setonClickLister la cual ejecutara la primera instancia que deberia ser la clase cargarclave() para la
validacion de un registro de numero de control existente y por consiguiente desplaze las demas clases
para la finalizacion del posible registro.

Paso 14: Y para la asignacion del boton “seleccionar” (fecha), nos vamos al archivo
activity_altas.xml y damos clic en el boton “seleccionar” y de lado derecho le damos clic a la funcion
“onClick” a la cual le añadimos la clase public void Fecha(view view).
Programación de la Ventana (Consulta - Registros)

Paso 1: Previo al desarrollo del codigo de esta ventana, primero debemos de crear un archivo java
llamado “AlumnosDatos.java” que no servira para crear variables que almacenaran los datos que
nos entregue la consulta de la hoja de php llamada “Consulta_DatosAlumnos.php” y asi
manipularlos para visualizarlos en la lista de RecyclerView.
Paso 2: Para poder manipular los datos que nos arroje la consulta php, debemos crear otro archivo
java llamado “alumnos.java” que contendra una clase con la implementación de RecyclerView.Adapter
la cual nos permitira adaptar los datos en un arraylist posteriormente.
Paso 3: Teniendo los archivos necesarios para generar el codigo que ejecute la consulta y visualize
los datos en el RecyclerView, debemos mandar de importar las librerias necesarias.

Paso 4: Lo siguiente sera localizarnos en public class Consulta e implementar Response.Listener


y se generaran dos clases onErrorResponse y onresponse.

Paso 5: Ahora estando alli mismo en la clases Consulta, debemos crear las variables correspondientes
según nuestro archivo xml.
Paso 6: Ahora nos vamos al protected void onCreate(Bundle savedInstanceState), y
relacionaremos las variables con los objetos del archivo Activity_consulta.xml
Paso 7: Previo a esto crearemos un public void llamado cargarDatosAlumnos(), el cual contendra
el codigo que generara el llamado y envio de datos encapsulandolos para enviarlos a la ruta donde se
encuentra la hoja de php llamada “Consulta_Datos Alumnos.php”.

Paso 8: Ahora nos vamos a la clase onErrorResponse(){}, donde le diremos a la clase que ejecute
un mensaje enc aso de que la consulta no arroje ningun dato o no pueda lograr la conexión, en esta
caso la aplicación lanzara un mensaje “No se puede conectar”.
Paso 9: Viene la parte donde implementaremos los archivos que previamente creamos y que
contienen las variables que nos permitiran manipular los datos que nos arroje la consulta, en la imagen
podemos observar que los datos arrojados por la consulta los almacenamos en las variables del
archivo “AlumnosDatos.java” y que a su vez son agregados a un arraylist que usa las variables del
archivo “alumnos.java”, esto se hace apartir de un FOR que nos permite iterar todos los registros de
manera que asi se puedan visualizarse todos los registros en el RecyclerView.
Programación de la Ventana (Modificar/Eliminar - Registros)

Paso 1: Nos dirigimos al archivo llamado “ModificarEliminar.java” y lo primero que debemos de hacer
es importar las librerias necesarias.

Paso 2: Vamos a implementar de igualmanera a la clase ModificarEliminar con Response.Listener

Paso 3: Estando en la clase ModificarEliminar, tambien vamos generar las variables necesarias según
los objetos que esten en el archivo xml
Paso 4: Ahora vamos a relacionar esas variables con los objetos que estan en nuestro archivo xml
correspondiente, para eso nos vamos a protected void onCreate(Bundle savedInstanceState).

Paso 5: Previo a la eliminacion o modificacion de los datos, debemos de condicionar ciertas acciones,
ya que no podemos eliminar algun dato que al buscar por id no arroje ningun resultado, ni tampoco
podemos modificar algun dato si este no existe posterior a su busqueda. Es por eso que para las
variables botones Modificar y Eliminar debemos de crearle la funcion Onclick.Listener para que al
presionarlo, nos mande a ejecutar una serie de condiciones IF que nos avisaraan si queremos
confirmar dicha accion o nos avisara que no es posible eliminar un registro y que por lo tanto debemos
realizar otra busqueda.
Paso 6: Despues de la validacion se procedera a ejecutar todas las clases según sea una
modificacion o eliminacion de datos. Empezando por la busqueda del alumno por su ID.
Paso 7: una vez teniendo los datos del alumno según la busqueda del ID, se podra escoger entre
eliminar o modificar algun dato.

Modificar Datos
Eliminar Datos

Paso 8: Por ultimo vamos a asignale al boton de busqueda la clase que debera ejecutar todo el codigo
para buscar los datos del alumno según su ID, para vamos ala rchivo activity_modificareliminar.xml
y seleccionamos la imagen de la lupa, de lado derecho vamos a asignarle a la funcion onClick la clase
public void BusqeudaAlumno(View view).
Generando el APK de la aplicación

Paso 1: Si ya esta lista la aplicación, debemos hacer pruebas instalando la app en algun movil
compatible con android, para eso nos vamos a la pestaña Build, Generate Signed Bundle / APK(s).

Paso 2: Se nos abrira otra ventana minimizada, y en ella daremos clic en APK y le damos en NEXT.
Paso 3: Aquí en esta venta agregaremos nuestra Key para generar APK, el alias y sus contraseñas
respectivasy damos en Next.

Paso 4: Aquí escogeremos release y damos en finish para que se cree nuestra apk.
Pruebas de Funcionamiento en Movil

Paso 1: Una vez creada nuestra APK de la aplicación, la instalamos en el movil, y probamos
registrando datos de algunos alumnos, dando clic en el boton Altas.
Paso 2: Vamos a consultar los dos registros que hemos generado, dando clic en el boton Consultas,
y podemos ver que se estan visualizando todos sus datos de cada alumno.
Paso 3: Ahora vamos a consultar los datos de algun alumno en particular, damos clic en Edicion,
escribimos el número de control del alumno y damos en Buscar, nos lanza todos los datos los cuales
podemos modificar o eliminar.
Paso 4: Ahora vamos a modificar el numero de control del alumno, y damos clic en modificar, nos
aparecera un mensaje si confirmamos dicha modificacion y damos en si.
Paso 5: Ahora vamos a consultar los datos del número de control 17450022, y lo eliminamos, despues
nos vamos al apartado de consultas, y veremos que ya no aparece.

También podría gustarte