Crear Un WebService Para Android Con Mysql, Php y Json

Crear Un Web Service Para Android Con Mysql, Php y Json

¿Deseas conectar una aplicación Android a Mysql? ¿Has intentado crear un web service con Php para la comunicación de datos de tu aplicativo web con tu aplicativo móvil android, pero aún no comprendes bien cómo hacerlo? Pues bien, en este artículo te mostraré algunas ideas sobre la creación de una aplicación android que consuma los datos de un servidor externo a través de Php, Mysql y Json. Para ello he creado una aplicación llamada “I Wish”, la cual permite a nuestros usuarios guardar una lista de deseos y metas que tienen en su vida. Con este ejemplo podrás ver cómo implementar la inserción, edición, eliminación y consulta de datos a través de un Web Service. El código de la aplicación puedes obtenerlo presionando el siguiente botón: Descargar Código

1. ¿Qué Es Un Web Service? Un Web Service o Servicio Web es un aplicativo que facilita la interoperabilidad entre varios sistemas independientemente del del lenguaje de programación o plataforma en que fueron desarrollados. Este debe tener una interfaz basada en un formato estándar entendible por las maquinas como lo es XML o JSON. Por ejemplo… Facebook es un aplicativo web construido con una determinada arquitectura y lenguajes de programación basados en el protocolo HTTP. Sin embargo podemos usar esta red social en nuestro dispositivo Android. ¿Cómo es posible esto, si la aplicación Android está construida con lenguaje Java? A través de un Web Service construido para gestionar todas aquellas operaciones sobre una base de datos alojada en los servidores de Facebook. Quiere decir que ambos aplicativos usan como puente la web para acceder a un solo repositorio de datos. Como ves, un Web Service se crea con funcionalidades que permitan obtener datos actualizados en tiempo real. El hecho de que sea dinámico incorpora el uso de un lenguaje web para la gestión HTTP que en este caso será Php.

2. Requerimientos De La Aplicación Como leíste al inicio, la aplicación I Wish gestiona las metas y sueños de los usuarios permitiéndoles tener un registro completo. Básicamente el alcance del proyecto se resumen en: Como usuario de I Wish, deseo mantener los datos de todas mis metas y sueños (se refiere al CRUD). Como usuario de I Wish, deseo ver el detalle de cada meta. Como usuario de I Wish, deseo que cada ítem tenga un título, una descripción, una fecha límite de cumplimiento, prioridad y categoría.

Las categorías posibles son: Salud, Finanzas, Profesional y Espiritual. Estos requerimientos no son nada del otro mundo. Básicamente estas ante una situación de listas y detalles. Algo que ya has visto en artículos pasados con gran frecuencia. El meollo del asunto se encuentra en el Web Service que debes crear con Php y Mysql para el mantenimiento de los datos. Esta vez no usaremos caching para el soporte de los datos locales como lo hicimos al crear el lector Rss. Nos enfocaremos en como usar Volley para realizar las peticiones en el localhost.

3. Wireframing De La Aplicación A primera vista I Wish es una aplicación que se basa en la funcionalidad básica de un crud. Tendremos una lista de los elementos que existen, podremos ver el detalle de cada uno, modificar su contenido e incluso borrarlos. Teniendo en cuenta este razonamiento, puedes imaginar la aplicación en primera instancia de la siguiente forma:

Basado en el boceto que acabas de crear ya puedes identificar que la cantidad de actividades, fragmentos, diálogos y formularios que necesitas. Así que veamos la siguiente lista de materiales a crear: Actividad principal con un fragmento de lista. Layout personalizado para items. Actividad con fragmento de detalle. Actividad con fragmento de formulario para inserción. Actividad con fragmento de formulario para edición.

En este tutorial usaremos actividades basadas en fragmentos, ya que muchos lectores han preguntado cómo hacer para comunicar fragmentos con actividades y viceversa.

4. Crear UI Para La Aplicación Android 4.1 Diseñar Actividad Principal Con Fragmento Tipo Lista Después de haber creado tú proyecto en Android Studio vas a crear una actividad principal que contengan un fragmento con una lista. Debido a que vamos a añadir los fragmentos programáticamente no es necesario enfocarnos tanto en los layouts de las actividades. Incluso puedes usar un solo layout para todas las actividades. activity_main.xml



El fragmento pudiese heredar de ListFragment pero debido a que vamos a usar un RecyclerView , el diseño es diferente. La idea es añadir el recycler para recubrir toda la actividad y además añadir un Floating Action Button en la parte inferior derecha con el fin de que el usuario añada nuevas metas. Para añadir el FAB (Floating Action Button) podemos hacer uso de una de las siguientes librerías que existen en la web: Floating Action Button Library For Android FloatingActionButton de makovkastar Future Simple Incluso podrías basarte en el ejemplo del sitio de android devepers llamado FloatingActionButtonBasic. Todo depende de ti. Cada librería trae la explicación de su implementación, así que no hay excusas. Por mi parte, en este ejemplo usaré la librería de makovkastar, ya que necesitamos fabs muy simples. Para ello incluimos la siguiente dependencia de Gradle:

compile 'com.melnykov:floatingactionbutton:1.3.0'

Veamos como queda el layout del fragmento principal: fragment_main.xml

         



Se usa una etiqueta para implementar el FAB. Simplemente se ubica en la parte inferior derecha y le añadimos los colores correspondientes a su interacción. Donde colorNormal es el color que tiene en estado natural; colorPressed es aquel que se proyecta cuando lo presionamos rapidamente y colorRipple se evidencia cuando mantienes un click largo sobre él.

Otro aspecto a tener en cuenta es que los mipmaps o drawables que uses para el icono de un FAB debe tener dimensiones de 24dp, para una buena experiencia de usuario:

El patrón anterior muestra un FAB grande para representar la inserción con unas dimensiones reglamentarias de 56dpx56dp. El icono que lleva debe mantenerse en 24dpx24dp.

También podemos tener un FAB mini con dimensiones de 40dpx40dp, donde el icono se mantiene sobre 24dpx24dp.

4.2 Diseñar Actividad De Detalle Con Fragmento Personalizado Acudiendo a los estilos de layouts en Material Design, dividiremos el fragmento de detalle en dos pasos. El primero será una ImageView alusivo a la categoría de la meta y el segundo será una hoja para sus datos completos. Adicionalmente añadiremos un Float Button Action para la edición de la meta. fragment_detail.xml

                       

                                

                                   

                                        

El FAB debe usar el atributo fab:fab_type=”mini” para usar el botón mini.

En este caso se usó como nodo un LinearLayout con dos RelativeLayout dentro. Esto nos permite dividir por pesos (weight) la ocupación de espacio entre ambos layouts y así mantener una proporción.

4.3 Diseñar Actividad Con Formulario La inserción y edición requiere de la proyección de un formulario que contenga los controles necesarios para que el usuario especifique la información personalizada que desea almacenar en la base de datos. Para ello debes crear un layout con los datos que viste en los requerimientos de la aplicación con las respectivos views para obtener la información.

Por ejemplo… El titulo de cada meta recibe texto escrito desde el input del dispositivo, por lo que sabemos que el EditText es la solución para este caso. La descripción es igual, necesita un campo de texto. La fecha limite puede ser obtenida a través de un DatePicker y para la categoría que tiene un dominio de varias opciones, puedes usar un Spinner . Veamos:

                                                                               

4.4 Diseñar Layout Personalizado De Los Items La organización de los atributos de cada meta dentro de los ítems de la lista debe ser un resumen de sus características principales. Puedes dejar la descripción solo para la actividad del detalle y eliminarlo de la presentación en la lista. item_list.xml

                                                 

El anterior diseño se vería de la siguiente forma:

5. Codificación Del Web Service En Php Antes de crear la aplicación Android debes desarrollar primero tu Web Service con cualquiera de los estándares que te interesen. El alcance de este tutorial no abarca el uso de restricciones REST, SOAP, RPC o sus parecidos. Simplemente verás cómo crear las implementaciones Php necesarias para realizar operaciones sobre una base de datos en Mysql a través de peticiones GET y POST.

Si deseas aprender a crear Web Services con diseño REST, entonces te recomiendo este excelente curso online con Laravel.

Para desarrollar este aplicativo usaré el entorno de desarrollo XAMPP, el cual provee automáticamente una configuración de un servidor Apache local, el intérprete de Php y el gestor Mysql. Sin embargo tu puedes usar las herramientas que desees para gestionar pruebas locales. Lo importante es que puedas correr Mysql e interpretar scripts de Php.

5.1 Diseño E Implementación De La Base De Datos Diseñar base de datos: Si ya lo has notado, la base de datos de la aplicación I Wish solo tiene una entidad que representa a los registros de las metas. Esto reduce ampliamente el diseño de bases de datos en el problema. No obstante, si tu proyecto es mas complicado, asegúrate de tener una buena metodología de diseño de bases de datos antes de crear el web service, Meta debe tener los atributos que hemos venido viendo más una llave primaria que mantenga la integridad de los datos. Observa el siguiente minidiagrama entidad-relación:

Crear base de datos: Para implementar la base de datos lo primero que debes hacer es crear una nueva base de datos en la aplicación phpMyAdmin que te otorga tu distribución XAMPP. Donde le asignaremos el nombre de “i_wish”.

Ahora crea la tabla meta para que contenga seis columnas en su estructura y además usa el formato UTF‐8 para soportar acentos. Puedes hacerlo a través del editor de phpMyAdmin o con el siguiente comando CREATE :

CREATE TABLE IF NOT EXISTS meta(     idMeta int(3) PRIMARY KEY AUTO_INCREMENT,   titulo varchar(56) NOT NULL,   descripcion varchar(128) NOT NULL,   prioridad enum('Alta','Media','Baja','') NULL DEFAULT 'Alta',   fechaLim date NOT NULL,   categoria enum('Salud','Finanzas','Espiritual','Profesional','Material') NOT NULL DEFAULT 'Finanzas' )

Luego añade 5 registros de ejemplo en la tabla que permitan probar el funcionamiento en la aplicación android más adelante.

INSERT INTO `i_wish`.`meta` (`idMeta`, `titulo`, `descripcion`, `prioridad`, `fechaLim`, `categoria`) VALUES (NULL, 'Comprar Mazda 6', 'Deseo adquirir un auto mazda 6 para mi desplazamiento en la ciudad. Debo investigar cómo conseguir mas fuentes de ingresos', 'Media', '2015‐11‐20', 'Material'), (NULL, 'Obtener mi título de ingeniería de sistemas', 'Ya solo faltan 2 semestres para terminar mi carrera de ingeniería. Debo prepararme al máximo para desarrollar mi tesis de grado', 'Alta', '2016‐06‐17', 'Profesional'), (NULL, 'Conquistar a Natasha', 'Natasha es la mujer de vida. Tengo que decírselo antes de que acabe el semestre', 'Alta', '2015‐05‐25', 'Espiritual'), (NULL, 'Tener un peso de 70kg', 'Actualmente peso 92kg y estoy en sobrepeso. Sin embargo voy a seguir una rutina de ejercicios y un régimen alimenticio', 'Baja', '2016‐05‐13', 'Salud'), (NULL, 'Incrementar un 30% mis ingresos', 'Conseguiré una fuente de ingresos alternativa que representen un 30% de los ingresos que recibo actualmente.', 'Media', '2015‐10‐13', 'Finanzas');

5.2 Crear Código Php Para Consumir Datos En primera instancia crea una conexión a la base de datos Mysql con la interfaz que mas se acomode a tus necesidades. En mi caso voy a crear una conexión con PDO, la cual me permite proteger los datos de inyecciones sql. Luego de eso crea una clase que mapee la estructura de la tabla meta . El objetivo de ello es proveerla de comportamientos de inserción, actualización, eliminación y consulta a través de la conexión a la base de datos. Finalmente implementaré scripts Php para gestionar las peticiones que lanzan los clientes. La idea es parsear los datos en formato Json para que nuestra aplicación Android interprete los resultados de forma legible.

Paso #1: Crear conexión a la base de datos con PDO El uso de PDO depende del enfoque que tengan tus proyectos, puedes crear una clase que represente la conexión hacia la base de datos o simplemente crear una nueva conexión en cada script de Php que tengas. Para este caso te compartiré un patrón singleton de PDO para limitar el número de aperturas a la base de datos en una sola. Con ello podremos disponer de un solo objeto a través de todo el proyecto. No obstante hay patrones de diseño muy interesantes que puedes consultar en la web. Por ejemplo el repositorio del usuario indieteq en github. Él se enfoca en la implementación del CRUD de una forma muy sencilla y orientada a objetos. Veamos el resultado del patrón singleton: Database.php



Ten en cuenta que la conexión se abre con 4 cadenas descriptivas del entorno que estás usando declaradas en el archivo mysql_login.php. Con ello me refiero al nombre del host, el nombre de la base de datos, el usuario con que deseas ingresar y su respectiva contraseña. Por el momento usaremos el localhost debido a las pruebas que estamos haciendo. El usuario ya depende de ti, en mi caso uso el usuario por defecto "root" y sin contraseña alguna. mysql_login.php



Adicionalmente debes añadir al cuarto parámetro del constructor de PDO la indicación SET NAMES UTF‐8 para el servidor. Esto permite que los datos de la base de datos vengan codificados en este formato para evitar problemas de compatibilidad.

Paso #4: Crear clase para las metas En este paso vas a modelar en una clase a la tabla "meta" de tal forma que aplique el CRUD sobre los datos a través de la clase Database . En esencia necesitas un método para obtener todos los registros, uno para la inserción, otro para eliminación, también para la actualización y un método que permita obtener del detalle de un solo registro. Meta.php



Recuerda que el método prepare() permite reemplazar los placeholders ( '?' ) a través de execute() . Esto protege la operación de inyecciones que puedan atentar contra la seguridad de los datos.

Paso #5: Crear un script para obtener todas las metas Para retornar todos los registros que existen en la tabla "meta" usaremos el método getAll() de la clase Meta . La trata de la petición seguiría la siguiente lógica: 1. Comprobar que la petición se realizó con el método GET. 2. Obtener todos los registros. 3. ¿La obtención tuvo éxito? A. SI -> Retornar objeto Json con los datos B. NO -> Retornar objeto Json con mensaje de error Tenemos un flujo que se asegura de satisfacer el debido resultado y aquellos resultados adversos. La trata de errores debe comprender todos

aquellos posibles caminos que puedan generarse como una petición fallida, la falla de autenticación, la no existencia del recurso, la no disponibilidad del servidor, etc. En resumen, contempla todas las fallas tanto del lado del servidor (códigos 5xx) como las del cliente (códigos 4xx). No obstante este ejemplo se basa en el comportamiento ideal de nuestro servidor local. Donde solo reportaremos aquellas anomalías que sucedan en la base de datos, asumiendo que la respuesta siempre tendrá un código de estado 200. Esto permitirá trackear si nuestro web service está operando bien la base de datos. Además de ello PDO puede retornar en excepciones por distintas causas que puedes estandarizar para el envío de mensajes. Pero este trabajo te queda a tí Ahora…¿Cómo envío una respuesta de vuelta a la aplicación Android? Es justo donde entra Json para actuar como formato de comunicación. En cada respuesta enviaremos una seria de elementos Json que puedan ser interpretados del lado del cliente. Esto te será posible usando las funciones json_encode() y json_decode() . La primera parsea un tipo de dato a un string en formato json y la segunda es el procedimiento contrario. Veamos nuestro servicio de obtención: obtener_metas.php