Vamos a iniciar primero que necesitas para hacer tu pinche web service???.
Pues creo que lo primero es saber que es un servicio web, y de acuerdo a la W3C (World Wide Web Consortium)
Un servicio web es sistema de software el cual ha sido
diseñado para soportar interacción interoperable maquina a maquina en un red.
Contiene un interfaz la cual es descrita en un formato procesable por las
maquinas (específicamente WSDL). Otros sistemas interactúan con el servicio web
un de la forma establecida por su descripción utilizando mensajes SOAP.
Típicamente transmitidas utilizando HTTP con una serialización XML en conjunto
con otros estándares web relacionados (Tomado del libro Building Web Services With Java, Segunda edición).
Que conocimientos necesitas para comenzar con los servicios web?
- Primer lugar saber preparar una bebida energizante conocida como "pitufo" (este paso es esencial y requerido ya que se recomienda preparar uno para que te acompañe a lo largo de esta publicación).
- Segundo comprender lo que llaman por ahí la "pila tecnológica" y seguir el paso 1.
- Instalar algunas aplicaciones que son requeridas y no olvidar el paso 1.
- Escribir un poquito en unos archivos de php y regresar al paso uno tanto como sea necesario.
No suena tan perro vea, bueno para seguir recordemos no olvidar el paso uno.
- La pila tecnológica
Imagen 1: Pila tecnológica (esta imagen la hice yo así que no se fíen del todo)
Capa de transporte
En la base de la pila los servicios web son básicamente
mecanismos de mensajería, así que es razonable pensar sobre tecnologías de
transporte de mensajes en la base de cualquier servicio web. Los servicios web
son esencialmente transportes neutrales. Un mensaje de un servicio web puede
ser transmitido usando bien sea por el protocolo HTTP o HTTPS, así como también
a través de mecanismos mas especializados como JMS.
Capa de mensajería
En la capa de mensajería están fundamentalmente tecnologías
como XML, SOAP, y WS-Addressing. Los servicios web utilizan XML como el formato
de las cargas de mensajes entre el proveedor y el solicitante. Otra de los
estándares más populares y maduros es SOAP. La especificación SOAP define un
mecanismo simple para envolver mensajes que define las bases de la mayoría de
los mensajes de servicios web. WS-Addressing es una especificación propuesta
por BEA, IBM y Microsoft para la
estandarización del concepto de puntero de servicio web.
Capa de descripción
Las descripciones de servicios web son descripciones
adicionales de meta datos asociados con servicios web desplegados en una red.
Ayuda a los sistemas SOA a obtener menor acoplamiento y las características de
uniones por las que son conocidos. Las tecnologías listadas en esta capa incluyen
WSDL, WS-Policy, UDDI y WS-ResourceProperties.
WSDL (Web Services
Description Language, Lenguaje de Descripción de Servicios Web) el mas
maduro y popular de los formatos de metadatos de servicios web. Con WSDL, los
desarrolladores describen la funcionalidad característica de su servicio web:
¿Qué operaciones el servicio brinda?, ¿Qué entrada o salida es asociada con
dichas operaciones?
UDDI (Universal
Description Discovery and Integration, Descricpcion Universal de
Descubrimiento e Integración) es la especificación mas extendida y reconocida
para registro de servicios web.
WS-ResourceProperties introduce una especificación para
describir la relación entre el estado de la información y el servicio web.
WS-ResourceProperties es un componente importante del marco de trabajo WS-ResourceFramework
el cual fue propuesto por Computer Associates, Globus, HP e IBM para lograr
obtener las relaciones entre los servicios web y sus recursos más
representativos.
Calidad de experiencia
En esta capa se encuentran las tecnologías que clarifican
ciertas capacidades y requerimiento de transacciones relacionadas con servicios
web, seguridad y envio de transportes seguro. Las tecnologías listadas en este
nivel son WS-Security, WS-reliableMessagin, WS-transactions y WS-ResourceLifeTime.
WS-Security es la familia de especificaciones relacionadas
que especifican como la interacción con el servicio web se realice de manera
segura. WS-Security logra los conceptos como relaciones de confianza en un
ambiente de servicios web y la identidad de los solicitantes del servicio web.
WS-ReliableMessaging es la propuesta que busca la manera de
que tanto como el solicitante así como el proveedor no tengan duda de que algún
mensaje no a recibido.
WS-Transactions es una serie de especificaciones
relacionadas que clarifican el como la invocación de los servicios web están
relacionadas en el contexto transaccional también conocido como semánticas
ACID.
Capa de composición
En la capa de composición se encuentra las especificaciones
BPEL4WS y WS-Notification describe como otros servicios web son combinados o
compuestos. BPEL4WS es un estándar para lograr como se pueden combinar los
servicios web en procesos de negocio de alto nivel al describir flujos de
trabajo o orquestación de servicios web.
WS-Notification busca el como publicar y suscribir mensajes
de notificación en un ambiente de servicios web.
Ok para este momento necesitamos regresar al paso uno.
- Requisitos de software
- XAMP: XAMPP es una forma fácil de instalar la distribución Apache que contiene MySQL, PHP y Perl. XAMPP es realmente simple de instalar y usar - basta descargarlo, extraerlo y comenzar. Aquí puedes leer y ver mas no olvidemos el paso uno
- SOAEditor: Cape Clear libero un editor SOA libre, que permite a los desarrolladores de software (osease como quien dice el que esta leyendo esto), crear, ver y editar rápidamente servicios usando WSDL (que ya se menciono anteriormente). El editor simplifica el proceso de la creación de servicios al simplificar el lenguaje WSDL. Aquí los puedes descargar (lo uso en windows sorry así nos lo paso el doctor ups, lo pegas en una carpeta en C: y creas una carpeta CapeClear y ahi extraes creas un acceso directo y listo cualquier error verifica que tengas instalado el jdk ya que eso me paso y mi cambie mi jdk al 1.6) y vemos el paso uno
- SOAPUI: es una solucion open source multi plataforma. Cuenta con una interfaz gráfica que nos da la opción de probar nuestros servicios web, soap ui soporta los protocolos y estándares lo que da una gran variedad de pruebas. Aquí puedes leer y ver más.
Ok ahora si viene lo divertido volvemos al paso uno (todo con medida), pensemos una operación a realizar mediante un servicio web digamos una que nos dejaron de tarea: a partir de dos números se diga cual es mas grande, pensemos que devolveremos un numero y recibe la operación dos números (numero a y numero b) y las salidas de la operacion seran las siguientes:
- -1 cuando b > a
- 0 cuando a == b
- 1 cuando a > b
Lo que hacemos en un inicio es abrir el soap editor para generar la definición de nuestros servicio web
Indicamos nombre y el espacio de nombres en este caso elegí el nombre compareTo y en el espacio de nombres http://www.ITO.com/compareTo.wsdl ustedes pueden indicar el que mas les guste c:.
Indicamos el nombre de la operación.
vamos a la parte de la petición y modificamos el nombre y los parametros de entrada para agregar un parametro de entrada hacemos click add y ingresamos los datos de nuestros parámetros para que luzcan como la imagen
ahora editamos la parte del response de indicando el nombre del parametro y su tipo en este caso un tipo int
vamos a la parte de binding y modificamos en este caso eliminamos lo que tenga el textbox que indica parts.
en el estilo existen dos posibilidades document y rpc en este caso utilizaremos rpc sin embargo document es el mas utilizado pero explicar las diferencias entre uno y otro esta fuera del alcance de este POST.
En el tipo también existen dos tipos literal y encoded sin embargo de acuerdo con las declaraciones del doctor Giner donde se indica que la W3C declaro que encoded no es interoperable se prefere el uso de literal en lugar de encoded; ¡recuerden elimnar parts!.
y realizamos la misma operación en la pestaña response de binding.
ahora nos dirigimos a la parte de services y vamos a indicar donde se encontrara la implementación de nuestro servicio web. Colocaremos en este caso http://localhost/ITOServicios/compareTo/compareTo.php en la parte de address. Con esto nos dirigimos a guardar recuerden iniciar el servidor apache en su xamp. Creamos en htdocs dentro de nuestra instalación de xamp una carpeta llamada ITOServicios y dentro de esta una carpeta llamada compareTo ahí sera la carpeta donde se guardara la definición de nuestro servicio web. En mi caso la carpeta es la siguiente "C:\xampp\htdocs\ITOServicios\compareTo".
Vamos al botón guardar (el del disco de 3 1/2 para los que nos toco) y damos click guardar e indicamos el nombre y toda la cosa.
Ahora tenemos que editar ese archivo para modificar lo que al parecer es un bug del SOAEditor para eliminar los parts, en este caso yo lo edito utilizando el notepad++ (lo pueden buscar en Internet pero, bueno cualquier editor de texto es bueno), vamos a eliminar dentro de los elementos internos de wsdl:binding y eliminaremos en wsdl:input y en wsdl:output la parte de parts="" para obtener algo como la imagen siguiente:
Ahora vamos a utilizar la bibliotecas nusoap (cuidado no digan librerías esas son las que venden libros; y menos en el seminario de maestría) la descargan y la descomprimen, lo que haremos es crear una carpeta lib en nuestro directorio compareTo y ahí vamos a insertar la carpeta nusoap quedando algo como lo siguiente:
Obteniendo algo como lo siguiente:
ahora vamos a crear un archivo que llamaremos compareTo.php en el cual se encontrara la implementación de nuestra operación inicial se acuerdan la de comprar si a y b no se que regresaba 0 o algo así, pues esa. Ahora creamos el archivo compareTo.php en la carpeta compareTo esto porque si recuerdan así se llamaban el archivo donde se encontrara la implementación de nuestro servicio web.
y vamos a obtener un archivo mas en nuestra carpeta
algo como lo que se muestra en la imagen
y vamos a editarlo en este caso utilizo zend studio en version trial (=( no tener dinero para licencia) y vamos a agregar la implemetación de nuestra operación. Aqui muestro el codigo con el que yo la implemente de una manera muy simple.
<?php
require("lib/nusoap.php");
$servidor=new soap_server("compareTo.wsdl");
function compareTo ($numberA, $numberB)
{
if( $numberB > $numberA )
{
return -1;
}
elseif ($numberA > $numberB )
{
return 1;
}
else
{
// is equal
return 0; }
}
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : '';
$servidor->service($HTTP_RAW_POST_DATA );
exit();
?>
el script php incluimos la bibliteca nusoap, despues creamos una instancia de la clase soap_server (eso creo no soy experto en php y no se si es correcto decir instancia) y despues se define una super compleja funcion llamada compareTo en donde si el numero "b" es mayor que el numero "a" se regresa un valor "-1" si "a" es mayor que "b" se regresa un valor "1" y en caso contrario se regresa un valor "0", asumiendo que si no es mayor ni menor es porque son valores iguales.
El final la variable $HTTP_RAW_POST_DATA se utiliza para ejecutar el servicio web como notaran se realiza una asignación ya que la variable $HTTP_RAW_POST_DATA debe contener la petición XML SOAP posteriomente cuando se invoca a servidor->service el XML el analizado, y se crea la respuesta XML. Posteriormente el servicio web es llamado para obtener la pagina actual y finalmente exit(); finaliza la ejecución de las instrucciones. (Cualquier mal uso de definiciones es culpa de Checo).
y la imagen por si no se aprecia adecuadamente.
Para probar vamos a un explorador (utilizare internet explorer no me juzguen en chrome cuando abro el wsdl me abre una ventana de descarga) y vamos a poner la siguiente ruta "http://localhost/ITOServicios/compareTo/compareTo.php" (recuerden el paso uno naaaa jajaja, no ya enserio recuerden iniciar apache en xamp)
vamos a observar algo como lo que se muestra en las imágenes. Vamos a probar que este adecuadamente implementado nuestro servicio utilizando soap UI se acuerdan de esa aplicación bueno vamos a abrirla
obtendremos algo como lo que se ven en la imagen. Ahí vamos a indicar en nuestra Initial WSDL/WADL la dirección de nuestro wsdl en mi caso es la siguiente "http://localhost/ITOServicios/compareTo/compareTo.php?wsdl" osea la dirección de implementación agregando "?wsdl" al final.
Posteriormente nos generara un nuevo proyecto con el nombre que indicamos vamos a expandirlo y de ahi vamos a expandir la opción que nos muestra para obtener en mi caso es Request1.
Vamos a probar la implementación esto escribiendo los valores y presionaremos el botón de enviar petición (el boton verde de la flecha en la parte superior) y nos devolvera la petición con el valor que mencionamos en un inicio, (si esta bien claro jeje, en mi caso si esta bien).
Vamos a crear un archivo index.php para que tenga un formulario y se inserten los numeros que se van a comparar. El codigo para mi index.php si notan en el action declaro que se invoque cliente.php y vamos a crearlo y escribir algunas cosas en el.
<form action="cliente.php" method="post">
Ingrese el numero A:
<br />
<input type="text" name="numberA" />
<br />
Ingrese el numero B:
<br />
<input type="text" name="numberB" />
<br />
<input type="submit" value="Enviar" />
</form>
vamos a crear el archivo cliente.php en nuestra carpeta compareTo y en este vamos a escribir lo siguiente;
<?php
require_once("lib/nusoap.php");
$a=$_POST['numberA'];
$b=$_POST['numberB'];
$cliente = new nusoap_client("http://localhost/ITOServicios/compareTo/compareTo.php?wsdl", "wsdl");
$proxy=$cliente->getProxy();
$r = $proxy->compareTo($a, $b);
if(!$cliente->getError())
{
if($proxy->fault)
{
print_r($r);
}
else
{
print "<strong>El resultado es: </strong> ".$r;
}
}
else
{
print_r($r);
}
?>
tendremos algo como la imagen que se muestra. y posteriormente vamos a probar que funcione adecuadamente. Para esto vamos a escribir en nuestro explorador ahora si el favorito (chrome) la dirección hacia nuestra carpeta.
tendremos algo como la imagen que se muestra. Vamos a ingresar algunos datos (numeros) para verificar el funcionamiento. Yo ingrese en el numero "A" 2 y en el numero "B" 3 con el resultado siguiene
con lo que tendremos completado nuestra invocación al servicio web.
Como nos gusta ponerle crema a los tacos ahora vamos a agregar unas cosillas mas a nuestros scripts php en este caso index.php y cliente.php para tener validación de los datos ingresados por el usuario. Para esto seguiremos los datos de este enlace donde se valida datos en un formulario utilizando jquery (enserio esta bueno chequen el enlace) y vamos a agregar los siguientes archivos:
no vamos a explicar la validación dentro de jquery y validación para eso está el otro post, solo modificaremos valitation.js mas adelante ademas vamos a agregar un una carpeta css a nuestra carpeta compareTo y vamos a poner nuestra hoja de estilo
obteniendo algo como lo que se muestra ne la imagen y el contenido de la hoja de estilo sera siguiente:
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background: #fff;
line-height:14px;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
}
html,body{
height:100%;
text-align: center;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
strong{
font-weight: 700;
}
/******* GENERAL RESET *******/
h1{
font-weight: 700;
font-size: 18px;
line-height: 1.2em;
border-bottom: 1px dotted #6b9ef1;
color: #5f95ef;
margin-bottom: 1em;
}
/******* LOGO *******/
#logo{
margin-top: 1em;
display: block;
}
/******* /LOGO *******/
/******* CONTAINER *******/
#container{
width: 600px;
margin: 40px auto;
text-align: left;
}
/******* /CONTAINER *******/
/******* FORM *******/
#customForm{
padding: 0 10px 10px;
}
#customForm label{
display: block;
color: #797979;
font-weight: 700;
line-height: 1.4em;
}
#customForm input{
width: 220px;
padding: 6px;
color: #949494;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #cecece;
}
#customForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#customForm textarea{
width: 550px;
height: 80px;
padding: 6px;
color: #adaeae;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
font-size: 12px;
border: 1px solid #cecece;
}
#customForm textarea.error{
background: #f8dbdb;
border-color: #e77776;
}
#customForm div{
margin-bottom: 15px;
}
#customForm div span{
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
#customForm div span.error{
color: #e46c6e;
}
#customForm #send{
background: #6f9ff1;
color: #fff;
font-weight: 700;
font-style: normal;
border: 0;
cursor: pointer;
}
#customForm #send:hover{
background: #79a7f1;
}
#error{
margin-bottom: 20px;
border: 1px solid #efefef;
}
#error ul{
list-style: square;
padding: 5px;
font-size: 11px;
}
#error ul li{
list-style-position: inside;
line-height: 1.6em;
}
#error ul li strong{
color: #e46c6d;
}
#error.valid ul li strong{
color: #93d72e;
}
/******* /FORM *******/
y modificaremos nuestro index.php
Ahora modificaremos el contenido de nuestro archivo validation.js y obtendremos algo como lo siguiente:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Comparador</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="validation.js"></script><link href="css/style_form_validate.css" rel="stylesheet" type="text/css" /></head><body><center><h1>Comparar dos numeros</h1></center><div id="container"><h1>Comparador</h1><form method="post" id="customForm" action="cliente.php"><div><label for="numberA">Numero A</label><input id="numberA" name="numberA" type="text" /><span id="numberAInfo">Escriba un numero</span></div><div><label for="numberB">Numero B</label><input id="numberB" name="numberB" type="text" /><span id="numberBInfo">Escriba un numero</span></div><div><input id="send" name="send" type="submit" value="Enviar" /></div></form></div></body></html>
/***************************///@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro//@website: www.yensdesign.com//@email: yensamg@gmail.com//@license: Feel free to use it, but keep this credits please!/***************************/$(document).ready(function(){//global varsvar form = $("#customForm");var numberA = $("#numberA");var numberAInfo = $("#numberAInfo");var numberB = $("#numberB");var numberBInfo = $("#numberBInfo");//On blurnumberA.blur(validateNumberA);numberB.blur(validateNumberB);//On key pressnumberA.keyup(validateNumberA);numberB.keyup(validateNumberB);//On Submittingform.submit(function(){if(validateNumberA() && validateNumberB())return trueelsereturn false;});//validation functionsfunction validateNumberA(){var value = numberA.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');var intRegex = /^\d+$/;//if it's NOT validif(!intRegex.test(value)){numberA.addClass("error");numberAInfo.text("Lo sentimos solo se permiten numeros enteros");numberAInfo.addClass("error");return false;}//if it's validelse{numberA.removeClass("error");numberAInfo.text("Escriba un numero");numberAInfo.removeClass("error");return true;}}function validateNumberB(){var value = numberB.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');var intRegex = /^\d+$/;//if it's NOT validif(!intRegex.test(value)){numberB.addClass("error");numberBInfo.text("Lo sentimos solo se permiten numeros enteros");numberBInfo.addClass("error");return false;}//if it's validelse{numberB.removeClass("error");numberBInfo.text("Escriba un numero");numberBInfo.removeClass("error");return true;}}});
Vamos a nuestro index.php en nuestro navegador y probamos introducir elementos no numéricos como una letra digamos, si no se reflejan los cambios talvez debas cerrar el explorador y cargar de nuevo.
Una ves obtenemos algo como la imagen nos dirigimos a modificar nuestro cliente para mejorar un poco su aspecto. Esto ya que en validation.js solo validaremos del lado del cliente (osea el cliente de la aplicación web no del servicio web).
Como somos de esos desarrolladores de sofware que se preocupan porque la aplicación no falle (no como esos que dicen para que si el usuario nunca va a entrar como checo, naaa jaja) vamos también a validar realizando los siguientes cambios a cliente.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Comparador</title>
<link href="css/style_form_validate.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><h1>Comparador</h1></center>
<?php
require_once("lib/nusoap.php");
if(isset($_POST['numberA']) && isset($_POST['numberB']))
{
$a=$_POST['numberA'];
$b=$_POST['numberB'];
$cliente = new nusoap_client("http://localhost/ITOServicios/compareTo/compareTo.php?wsdl", "wsdl");
$proxy=$cliente->getProxy();
$r = $proxy->compareTo($a, $b);
if(is_numeric($a)&&is_numeric($b))
{
if(!$cliente->getError())
{
if($proxy->fault)
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>Ocurrio un error:</strong>";
print_r($r);
print "</li></ul></div>";
print "<a href=\"index.php\">Regresar</a>";
}
else
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El resultado es:</strong>".$r."</li></ul></div>";
if($r == 1)
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El numero ".$a." es mayor que ".$b."</strong></li></ul></div>";
}
elseif($r == -1)
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El numero ".$b." es mayor que ".$a."</strong></li></ul></div>";
}
else
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El numero ".$a." es igual a ".$b."</strong></li></ul></div>";
}
print "<a href=\"index.php\">Regresar</a>";
}
}
else
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>Ocurrio un error:</strong>";
print_r($r);
print "</li></ul></div>";
print "<a href=\"index.php\">Regresar</a>";
}
}
else
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>No es un numero:</strong>".$p."</li></ul></div>";
print "<a href=\"index.php\">Regresar</a>";
}
}
else
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>No se asigno un valor:</strong>Debe ingresar al formulario primero</li></ul></div>";
print "<a href=\"index.php\">Ir al formulario</a>";
}
?>
y vamos realizar algunas pruebas nuestra pequeña aplicación para verificar que realice todo adecuadamente.
nos da como resultado:
una prueba más sera como la siguiente:
la cual nos arroja el siguiente resultado
y con eso se termina este post super largo espero le sea de utilidad a alguien.
Aquí están los códigos fuentes
hey man, muy buen post, y un tanto entretenido x aquelos del pitufo jajajajaj, pero estaria mejor que pusieras la receta de esa bebida por aquello de las largas jornadas de trabajo que nos suelen ocurrir, y ajusta los detalles de la escritura jajajajajaja saludos by ChekoSoft
ResponderEliminar