Orlando Tovar Valencia

Desarrollo de aplicaciones para dispositivos móviles con

Jquery Mobile

Taller No 3
 Orlando Tovar Valencia

Introducción
En este taller comenzaremos a crear nuestra lógica de la aplicación de “carritos de
compras” la cual hasta el taller No 2 se había estructurado y puesto en marcha, todo
esto creado desde nuestro archivo index.html y shoppingCart.js, ahora en este taller
desarrollaremos la lógica en el servidor “Apache” con el lenguaje de programación
PHP y manejo de base de datos con MySQL, para esto utilizaremos la comunicación
de la aplicación con el servidor vía servicios REST.

Objetivos
Al finalizar este taller, los estudiantes serán capaces de:

 Crear un proyecto con JQuey Mobile.

 Diseñar una interfaz de usuario de complejidad media para una aplicación con
JQuery Mobile.
 Agregar imágenes al diseño de la interfaz.
 Agregar código para mostrar la interfaz de usuario de una aplicación de JQuery Mobile.
 Personalizar los elementos de una aplicación para dispositivos móviles.
 Consultar la información vía servicios REST en formato JSON
 Realizar el cargue de información dinámicamente desde la Base de Datos MySql.
 Desplegar la aplicación hacia un emulador “Android” en explorador Chrome.
 Entregar el instalador de la aplicación. apk

Requisitos
Para la realización de este laboratorio es necesario contar con lo siguiente:
 Los archivos del framework de JQuery Mobile.
 Un editor de texto de su preferencia.
 Tener instalados: Apache, Mysql, PHP
 Instalar el programa SoapUi

Tiempo estimado para completar este laboratorio: 270 minutos.

 Orlando Tovar Valencia

Servicio Web

Un servicio web (en inglés, Web Service o Web services) es una tecnología que
utiliza un conjunto de protocolos y estándares que sirven para intercambiar
datos entre aplicaciones. Distintas aplicaciones de software desarrolladas en
lenguajes de programación diferentes, y ejecutadas sobre cualquier plataforma,
pueden utilizar los servicios web para intercambiar datos en redes de
ordenadores como Internet. La interoperabilidad se consigue mediante la
adopción de estándares abiertos.

Entre los estándares empleados en servicios web tenemos a REST

¿Qué es REST?

REST o Transferencia de Estado Representacional (Representational State

Transfer) es una arquitectura de desarrollo web que se apoya en el estándar
HTTP para obtener datos o indicar la ejecución de operaciones sobre los datos.
Para el intercambio de información se usa XML o JSON este último más
utilizado actualmente.
 Orlando Tovar Valencia

En este taller aprenderemos a construir un REST Api empleando el lenguaje

PHP del lado del servidor, empleando las operaciones GET, POST, PUT y
DELETE equiparables a las operaciones CRUD de base de datos (Crear, leer,
actualizar y borrar) el intercambio de datos e realizar mediante JSON
(JavaScript Object Notation) la base de datos será MySQL.

Métodos HTTP

El siguiente es un ejemplo de cómo son enviados al servidor las peticiones

mediante los métodos HTTP soportados.

Método Aplicación Descripción

GET /api/producto Obtiene todos los elementos de la entidad Producto

GET
GET /api/producto/1 Obtiene el elemento con Id 1 de la entidad Producto

POST POST api/producto Publica un nuevo elemento de la entidad Producto

PUT PUT api/producto/1 Modifica el elemento con Id 1 de la entidad Producto

DELETE DELETE api/producto/1 Elimina el elemento con Id 1 de la entidad Producto

JSON y XML

Los estándares JSON y XML son con peculiaridad los lenguajes usados para
servir datos desde un Web Services. Los lenguajes son equivalentes, con la
única diferencia de que sus sintaxis tienen su particularidad. He aquí algunos
ejemplos:
 Orlando Tovar Valencia

Ejemplo de JSON (JavaScript Object Notation)

{
"statusCode": 200,
"statusMessage": "OK",
"data": [
{
"Id": "1",
"Usuario": "admin",
"Clave": "21232f297a57a5a74389",
"Status": "1"
}
]
}

Ejemplo de XML (eXtended Markup Language)

<?xml version="1.0" encoding="UTF-8" ?>

<statusCode>200</statusCode>
<statusMessage>OK</statusMessage>
<data>
<Id>1</Id>
<Usuario>admin</Usuario>
<Clave>21232f297a57a5a74389</Clave>
<Status>1</Status>
</data>

Como podemos ver, de ambas formas se muestra la información

correctamente, aunque para efectos del tutorial, haremos uso de JSON
específicamente, ya que, en resumen, es mucho más legible que XML, aunque
el uso del uno u otro es irrelevante.
 Orlando Tovar Valencia

Arquitectura Lógica y Física de la

Aplicación

Como se puede ver en la imagen anterior nuestra aplicación cuenta con tres nodos
principales, App Mobile, La API y el servidor de base de datos, manejando un modelo 3
capas. En este modelo solo está la parte del procesamiento de los productos, pero con
esta la misma lógica se podrá manipular las categorías.
 Orlando Tovar Valencia

Parte No 1
Para esta primera parte del taller No 3 vamos a comenzar creando nuestra base de datos
y seguido a esto insertar los registros necesarios para poder obtener los resultados
esperados.

1) Creamos nuestro modelo dentro de la herramienta MySql WorkBench como se ve

en la imagen, con la tabla: Categoría y Producto creando la respectiva relación de
las tablas:

2) Ahora procederemos una vez creado el modelo en Mysql WorckBench a crear la

base de datos en MySQL, e insertar los registros de cada una de las tablas, para
este caso copiamos el siguiente script en Mysql WorckBench y lo ejecutamos:

INSERT INTO `categoria` (`ID`, `Nombre`, `Descripcion`, `Imagen`) VALUES

(1, 'Comidas Rapidas', 'Encontrara toda la comida rapidas de la tienda.', 'hamburguer-64x64.png'),
(2, 'Bebidas', 'Encontrara todas las bebidas frias de la tienda.', 'drink-64x64.png'),
(3, 'Platos Tipicos Colombianos', 'Podra degustar todos los platos tipicos colombianos', 'soup-64x64.png'),
(4, 'Gourmet', 'Encontrara la lista de comidas exquisitas', 'gourmet-64x64.png'),
(5, 'Parrilla', 'Podra degustar los platos al horno braza', 'barbacue-64x64.png'),
(6, 'Bebidas Calientes', 'Lista de las mejores bebidas calientes', 'coffee-64x64.png');

Esto insertara la información de la tabla Categoría.

 Orlando Tovar Valencia

3) Luego procederemos con la inserción de los registros de la tabla Producto,

copiamos y pegamos el siguiente script dentro de MySql Workbench.

INSERT INTO `producto` (`ID`, `IDCategoria`, `Nombre`, `Descripcion`, `Valor`, `Imagen`) VALUES
(1, 1, 'Hamburguesa', 'Hamburguesa con doble patacona ....', '12000.00', 'hamburguesa-250x250.png'),
(2, 1, 'Perro Caliente', 'Perro caliente sencillo ....', '10000.00', 'perro-caliente-sencillo_600x600.png'),
(3, 1, 'Salchi Papa', 'La salchipapa es una comida muy popular en Peru', '16000.00', 'salchi-
papa_600x600.png'),
(4, 2, 'Coca Cola', 'Gaseosa de soda refrescante.', '2500.00', 'coca-cola-400x400.png'),
(5, 2, 'Colombiana', 'Gaseosa de 350 cc.', '2200.00', 'colombiana_400x400.png');

4) Probamos que la información quedo correctamente insertada, para esto hacemos

el select correspondiente a cada una de las tablas.
 Orlando Tovar Valencia

Parte No 2
Para esta segunda parte del taller necesitamos crear nuestra estructura de carpetas y
archivos para poner a funcionar los servicios REST que vamos a necesitar, para esto
comenzamos con lo siguiente:

1) Estructura de las carpetas:

- Crear la carpeta: ServiciosRestCarrito dentro de la carpeta (htdocs o www)

- Dentro de esta carpeta creamos dos carpetas:

a) Categoria
b) Producto
c) Imagenes
- Y creamos el archivo:
a) Conexion.php

- Ahora creamos dentro de la carpeta Categoría los siguientes archivos:

a) CategoriaAPI.php
b) CategoriaController.php
c) CategoriaModel.php
d) index.php
 Orlando Tovar Valencia

- Y dentro de la carpeta Producto los siguientes archivos:

a) ProductoModel.php
b) ProductoController.php
c) ProductoAPI.php
d) index.php

2) Ahora comenzaremos a meterle programación a nuestros archivos de PHP, lo

primero que haremos es configurar nuestra conexión a base de datos, para esto
abrimos el archivo Conexion.php, copiamos y pegamos el siguiente fragmento
de código.

<?php

class Conexion {

public $db;
const LOCALHOST = '127.0.0.1';
const USER = 'root';
const PASSWORD = '';
const DATABASE = 'carrito';

public function __construct() {

try{
/** conexión a base de datos **/
$this->db = new PDO('mysql:host='.self::LOCALHOST.';dbname='.self::DATABASE.'', self::USER, self::PASSWORD);
}catch (PDOException $e){
/** Si no se puede realizar la conexión **/
echo $e->getMessage();
die;
}
}
}
?>
 Orlando Tovar Valencia

3) Dentro de la carpeta Producto abrimos el archivo index.php, copiamos y

pegamos el siguiente fragmento de código:

<?php
require_once "ProductoAPI.php";

/* Instaciamos la clase API */

$ProductoAPI = new ProductoAPI();
/* Ejecutamos la funcion API */
$ProductoAPI->API();

?>

4) Luego vamos a codificar el archivo ProductoAPI.php, copiamos y pegamos el

siguiente código dentro del archivo:
<?php
require_once "ProductoController.php";

class ProductoAPI extends ProductoController {

public function API(){

/* Encabezados requeridos */
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

/* Capturar el metodo HTTP */

$method = $_SERVER['REQUEST_METHOD'];

switch ($method) {
case 'GET': /** consulta **/
$idCategoria = isset($_GET["idCategoria"]) ? $_GET["idCategoria"] : '';
$this->getAllProducts($idCategoria);
break;
case 'POST': /** inserta **/
echo "Method not developed";
break;
case 'PUT': /** actualiza **/
echo "Method not developed";
break;
case 'DELETE': /** elimina **/
 Orlando Tovar Valencia

echo "Method not developed";

break;
default: /** Metodo NO soportado **/
echo "HTTP/1.1 405 Method not allowed";
break;
}
}
}

5) Ahora codificamos el archivo que contendrá la lógica del negocio ósea nuestro
controlador ProductoController.php

<?php
require_once "ProductoModel.php";

class ProductoController extends ProductoModel {

public $model;

/**
* Constructor de la clase
**/
function ProductoController(){
/* Instanciamos la clase de persistencia de datos */
$this->model = new ProductoModel();
}

/**
* Obtiene la lista de productos filtrados por su categoria
* @param int $idCategoria identificador unico de la categoria del producto
* @return Json array tipo json con los registro encontrados
**/
public function getAllProducts($idCategoria){

$arrayJson = [];
$rows = $this->model->getAllProducts($idCategoria);

foreach($rows as $key => $row){

$arrayJson[$key] = array(
"id" => $row["ID"],
"name" => $row["Nombre"],
"value" => $row["Valor"],
 Orlando Tovar Valencia

"description" => $row["Descripcion"],

"img" => $row["Imagen"]
);
}

echo json_encode($arrayJson);
}
}
?>

6) Y por último programaremos nuestro modelo que contiene el acceso a la base

de datos que antes hemos creado. Archivo ProductoModel.php

<?php
require_once "../Conexion.php";

class ProductoModel extends Conexion {

/**
* Obtiene la lista de productos filtrados por su categoria
* @param int $idCategoria identificador unico de la categoria del producto
* @return data regresa los datos encontrados en la tabla producto
**/
public function getAllProducts($idCategoria){

$query = $this->db->prepare("SELECT * FROM producto WHERE IDCategoria = ? LIMIT 12");

$query->bindValue(1, $idCategoria, PDO::PARAM_STR);
$query->execute();
$rows = $query->fetchAll(PDO::FETCH_ASSOC);

return $rows;
}
}
?>

Desarrollado este paso, vamos a proceder a probar nuestro servicio REST, para esto
necesitamos instalar la siguiente herramienta:
- SoapUI, la url de descarga es: https://www.soapui.org/downloads/soapui.html
 Orlando Tovar Valencia

Seleccionamos la versión Open Source como se ve en la imagen, luego

instalamos en nuestro PC, la instalación no tiene configuración, solo siguiente,
siguiente y finalizar.

7) Una vez instalada procedemos con la prueba de nuestro primer servicio REST,
damos click en REST, luego pegamos la url en la que quedo nuestro servicio
creado dentro de nuestro servidor APACHE.
 Orlando Tovar Valencia

La aplicación nos creara un nuevo proyecto como se ve en la imagen:

8) Procedemos a generar la petición GET a nuestro servicio, para ver que nos
retorna, para esto le damos click en el botón , y nos devuelve un error donde
nos especifica que la respuesta que envió el servidor no es soportado en formato
xml.

Si damos click en la pestaña JSON nos responderá que el contenido del json
 Orlando Tovar Valencia

está vacío:

Lo que quiere decir que nuestro servicio está funcionando, pero no devolvió nada,
esto porque el espera a que nosotros le enviemos como parámetro el id de la
categoría.

9) Ahora vamos a configurar el id de categoría, para esto damos click sobre

Parameters el abrirá una ventana y configuramos: idCategoria y el número de
esta:
 Orlando Tovar Valencia

10) Volvemos a ejecutar el servicio y nos debería mostrar los productos filtrados por
la categoría No 1:

Si filtramos por la categoría No 2 nos debería mostrar lo siguiente:

 Orlando Tovar Valencia

Parte No 3
En esta última parte del taller No 3, terminaremos la parte del servicio REST que consulta
las categorías que tenemos para los productos.

1) Dentro de la carpeta Categoria abrimos el archivo index.php, copiamos y

pegamos el siguiente fragmento de código:

<?php
require_once "CategoriaAPI.php";

/* Instaciamos la clase API */

$CategoriaAPI = new CategoriaAPI();
/* Ejecutamos la funcion API */
$CategoriaAPI->API();

?>

2) Luego vamos a codificar el archivo CategoriaAPI.php, copiamos y pegamos el

siguiente código dentro del archivo:
<?php
require_once "CategoriaController.php";

class CategoriaAPI extends CategoriaController {

public function API(){

/* Encabezados requeridos */
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$method = $_SERVER['REQUEST_METHOD'];

switch ($method) {
case 'GET': /** consulta **/
$this->getAllCategories();
break;
 Orlando Tovar Valencia

case 'POST': /** inserta **/

echo "Method not developed";
break;
case 'PUT': /** actualiza **/
echo "Method not developed";
break;
case 'DELETE': /** elimina **/
echo "Method not developed";
break;
default: /** Metodo NO soportado **/
echo "HTTP/1.1 405 Method not allowed";
break;
}
}
}

3) Ahora codificamos el archivo que contendrá la lógica del negocio ósea nuestro
controlador CategoriaController.php

<?php

require_once "CategoriaModel.php";

class CategoriaController extends CategoriaModel {

public $model;

/**
* Constructor de la clase
**/
function CategoriaController(){
/* Instanciamos la clase de persistencia de datos */
$this->model = new CategoriaModel();
}

/**
* Obtiene la lista de categorias
* @return Json array tipo json con los registro procesados
**/
public function getAllCategories(){

$arrayJson = [];
$rows = $this->model->getAllCategories();
 Orlando Tovar Valencia

foreach($rows as $key => $row){

$arrayJson[$key] = array(
"id" => $row["ID"],
"name" => $row["Nombre"],
"amount" => $row["Cantidad"],
"description" => $row["Descripcion"],
"img" => $row["Imagen"]
);
}

echo json_encode($arrayJson);
}
}
?>

4) Y por último programaremos nuestro modelo que contiene el acceso a la base

de datos que antes hemos creado. Archivo CategoriaModel.php

<?php

require_once "../Conexion.php";

class CategoriaModel extends Conexion {

/**
* Obtiene la lista de las categiras
* @return data regresa los datos encontrados en la tabla categoria
**/
public function getAllCategories(){

/* Consulta que trae las categorias con la cantidad de productos que tiene cada
Una de ellas, se realiza una sub-consulta para sacar esto. */
$sql = "SELECT
c.ID,
c.Nombre,
c.Descripcion,
c.Imagen,
(SELECT COUNT(*) FROM producto AS p WHERE c.ID = p.IDCategoria) AS Cantidad
FROM
categoria AS c";
 Orlando Tovar Valencia

$query = $this->db->prepare($sql);
$query->execute();
$rows = $query->fetchAll(PDO::FETCH_ASSOC);

return $rows;
}
}
?>

Si todo ha quedado bien, creamos un nuevo proyecto REST la herramienta en SoapUI

probamos, y nos debería mostrar el listado de categorías como se ve en la imagen:

Url categorías: http://localhost:81/ServiciosRestCarrito/Categoria/index.php

Hasta este punto ya tememos creado toda la estructura de servicios REST de nuestra
aplicación y se encuentra funcionando correctamente en el servidor APACHE, en el
siguiente taller conectaremos nuestra app Jquery Mobile para consumir estos servicios.