Desarrollo de Web Services RESTfull (básico)

El día de hoy realizaremos el Desarrollo de Web Services RESTfull (básico) básico JAVA, el cual estará desarrollado en el IDE de NetBeans.
Para poder consumir este Web Services vamos a desarrollar una aplicación HTML que correrá dentro de XAMPP esto nos permitirá visualizarlo en un navegador web.
Todos los pasos del Desarrollo de Web Services RESTfull básico JAVA, están detallados completamente y con sus respectivas imágenes para que lo entienda mejor.
Recuerda que dentro de NetBeans también vamos a utilizar el servidor de GlassFish el cual nos permitirá poder ejecutar nuestro WebService y poder probarlo navegando
Entonces no los aburro más con esta introducción del Desarrollo de Web Services RESTfull básico JAVA empecemos a desarrollarlo en este post
Conoce que es un web services haz clic aquí

Lo primero que haremos será crear nuestro proyecto siguiendo los siguientes pasos:

  1. Crear nuevo proyecto
  2. Seleccionar la categoría “Java web”
  3. En la sección de proyectos seleccionamos “Web Application”
  4. Le damos clic en siguiente y nos pedirá un nombre de proyecto, para el ejercicio yo le he puesto como nombre “restfull”
  5. Posteriormente, al dar clic sobre el botón siguiente donde configuraremos el servidor de GlassFish y Java EE lo dejaremos en la opción que aparece por defecto
  6. Al dar clic sobre siguiente nos mostrara para marcar un frameworks, por el momento no seleccionaremos ninguno y hacemos clic en el botón terminar
Una vez que hemos terminado de crear nuestro proyecto agregaremos un paquete con el nombre de com.tutotec.proj de la siguiente Manera:
  1. Anti clic en la carpeta Source Package
  2. Seleccionamos la opción Nuevo Nos muestra otro submenú
  3. De manera similar escogemos Java Package
  4. Y le pondremos como nombre com.tutotec.proj
  5. Por último haremos clic en el botón de terminar.

Creación de Web Services en el IDE de NetBeans

Ahora que terminamos de crear el paquete vamos a agregar un web services de tipo RestFull para eso seguiremos los siguientes pasos:
  1. Clic derecho sobre nuestro proyecto
  2. Seleccionaremos la opción Nuevo y dentro la opción Otro…
  3. Después de eso, mostrará una ventana donde seleccionaremos la categoría de Web Services y el tipo de archivo RESTfull web services from Patterms.
  4. Posteriormente le agreguemos un nombre para nuestro archivo de web services en este ejercicio le he puesto como nombre restFull como se muestra en la siguiente imagen:
Continuamos con el desarrollo y ahora:
  1. Hacemos clic sobre botón siguiente
  2. Donde seleccionaremos la opción de Simple Root Resource asi como se muestra la siguiente imagen 

Seguimos con el desarollo

  1. En el mismo sentido, al hacer clic sobre el botón siguiente nos mostrara los siguientes parámetros
  1. Haremos un cambio en la opción de MIME Type la cual lo cambiaremos por un json como se muestra en pantalla
  1. Le daremos clic en el botón de terminar.
Vamos a darnos cuenta que nos acaba de crear un archivo llamado GenericResouce.java donde haremos unos pequeños cambios:
  1. Ubicaremos donde se encuentra la línea de excepción que se muestra cuando aún no hay nada de código, lo que haremos será de comentarla para no tener inconvenientes más adelante, si la llave nos muestra un error no nos preocupemos ya que vamos a tener que crear un método para que se pueda solucionar ese error

Algunos cambios

  1. Luego de haber comentado la línea de excepción haremos unos pequeños cambios como por ejemplo en lugar de public String getJson(), lo cambiaremos de la siguiente manera como se muestra en la siguiente imagen:
por otro lado, cambiado el tipo String por un Response nos dirá que tenemos que importar el Response que es propio de Json
  1. Bien en nuestro método Public Response getJson Agregaremos el siguiente código.
@GET
@Produces(MediaType.APPLICATION_JSON)
public Response getJson(@QueryParam(«access»)String access) {
//TODO return proper representation object
//throw new UnsupportedOperationException();
JsonObjectBuilder jsonObjBuilder= Json.createObjectBuilder();
jsonObjBuilder.add(«reply»,»get method ok»+access);
JsonObject jsonObj =(JsonObject) jsonObjBuilder.build();
return Response.ok(jsonObj.toString())
.header(«Access-Control-Allow-Origin»,»*»)
.header(«Access-Control-Allow-Methods»,»POST,GET,PUT,UPDATE,OPTIONS»)
.header(«Access-Control-Allow-headers»,»Content-Type, Accept, X-Requested-with»).build();
}
Despues de haber culminado de agregar el código veremos que tenemos unos errores para eso voy a tener que importar las siguientes librerías
import javax.json.Json;
import javax.json.JsonObject;
import javax.json.JsonObjectBuilder;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.UriInfo;
import javax.ws.rs.Produces;
import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PUT;
import javax.ws.rs.QueryParam;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

Vamos a explicar que hace el código que hemos acabado de agregar:

JsonObjectBuilder: Es un constructor de respuestas json en este caso para las expresiones json.
En este caso vamos hacer una prueba donde vamos adicionar una respuesta que será reply el método get ok más una variable que será recibida desde nuestro javascript y para eso agregaremos una notación llamada @QueryParam y le indicaremos que se llama Access agregaremos el tipo de dato como strings access
Hasta el momento tenemos un método que nos va hacer una respuesta basada en json con una recepción de una solicitud (query) llamada acccess que es un string

En otras Palabras

Lo que va a ocurrir desde un servidor donde está el javascript haciendo una petición vía Ajax va enviar un texto en notación json y que va a tener una variable llamada accesss
Nuestra respuesta será un response de tipo ok con las especificaciones del objeto y tomaremos la información para convertirla en un string toString.
Los header los tenemos que agregar debido a que los nuevos navegadores por motivos de seguridad no soportan salirse de dominios, lo que hacemos con los header es permitir la interacción de aplicaciones que están en diferentes dominios.

Probando el Desarrollo de Web Services RESTfull

Empezamos a probar nuestra aplicación lo primero que haremos será un clic derecho sobre nuestro proyecto seleccionamos, la opción de Limpiar y construir para que al momento de ejecutar nuestra aplicación no nos muestre errores
posteriormente haremos un deploy que nos permitirá ver si no hay problemas al momento de ejecutar nuestras aplicaciones, con esto verificara el funcionamiento del servidor que estemos utilizando y si todo esta ok nos mostrara un mensaje de color verde de satisfacción

Ejecutando un test al desarrollo de web Services RESTfull

Entonces una forma de saber que todo está ok es utilizar el test RESTFull Web Services
Durante esto, mostrara otra ventana donde seleccionaremos las siguientes opciones.
Lo que haremos será verificar que esta seleccionado el proyecto de manera correcta para esto haremos lo siguiente hacer clic sobre el botón Browser que nos abrirá la siguiente ventana
Marcamos el proyecto con el cual estamos trabajando y daremos clic sobre el botón aceptar
Nuevamente haremos clic sobre el botón aceptar y nos cargara la siguiente ventana en el navegador
Donde vamos a ver que se encuentra el generic que es nuestra representación de nuestro software de la aplicación web con la que estamos trabajando hacemos clic sobre dicho archivo y nos mostrara la siguiente ventana.

Probando los métodos creados 

Por otro lado, el método que estamos utilizando es GET (application/json), el cual solicita que insertemos un valor a access, por ejemplo, un texto
Haremos clic sobre el botón Test, y nos mostrara en notación json lo que va a responder como se ve en la siguiente imagen.

Creación de la aplicación web para consumir el Desarrollo de Web Services RESTfull

Como resultado que vemos que el test nos ha funcionado correctamente nos toca estructurar nuestra aplicación JavaScript para eso utilizare la aplicación de xampp para poder levantar una pequeña página web de la siguiente manera
  1. Ejecutamos el xampp control panel y corremos solamente apache por el momento asi como se ve en la imagen
Mientras tanto que está corriendo apache nos dirigimos a la carpeta htdocs de xampp para crear allí nuestra carpeta de aplicación que en este caso le llamare restejemplo como se puede ver en la siguiente imagen:
Bien allí dentro crearemos nuestra página web index.html y una carpeta js que contendrá un archivo emap.js así como se muestra a continuación:

Código del index.html

El código del archivo index.html es algo muy sencillo como se muestra a continuación:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta name=»viewport» content=»initial-scale=1.0, user-scalable=no»>
  5.     <meta charset=»utf-8″>
  6.     <title>Valore su ciudad</title>
  7.     <script src=»https://code.jquery.com/jquery-3.3.1.min.js»></script>
  8.     <script src=»js/eMap.js»></script>
  9. </head>
  10. <body>
  11.     <div>
  12.         <input type=»submit» id=»submit»><br>
  13.         <input type=»text» id=»mensaje»><br>
  14.     </div>
  15.     <divid=»content»>
  16.              
  17.     </div>
  18.     <script>
  19. getElementById(‘submit’).addEventListener(‘click’,function(){
  20.     eMap(» HolaMensaje «+document.getElementById(«mensaje»).value);
  21.     });
  22.     </script>
  23. </body>
  24. </html>

Archivo eMap.js

En el archivo eMap.js tenemos el siguiente código como se muestra a continuación:
  1. function eMap(){
  2.    $.ajax({
  3.    //en data puedes utilizar un objeto JSON, un array o un query string
  4.    data: {«access» : arguments[0]},
  5.    //Cambiar a type: POST si es necesario
  6.    type: «GET»,
  7.    //Formato de datos que se espera en la respuesta
  8.    dataType:»JSON»,
  9.    //url a la que se enviará la solicitud Ajax
  10. url: «http://localhost:8080/restfull/webresources/generic»
  11.    })
  12. .done(function(data, textStatus, jqXHR){
  13.       $(«#content»).html(data.reply);
  14.       if(console && console.log){
  15.       console.log(«La solicitud se ha completado correctamente»);
  16.       }
  17.      })
  18.     .fail(function(jqXHR, textStatus, errorThrown){
  19.         if (console && console.log) {
  20.             console.log(«la solicitud a fallado: » + textStatus);
  21.             }
  22.      });
  23. }
Lo mas importante es que ya tenemos armada nuestra aplicación podemos empezar a ejecutarla en nuestro navegado para eso accederemos al localhost:80 o dependiendo del puerto donde se encuentra su aplicación apache corriendo.
En mi caso tengo localhost:80/el nombre de ni proyecto http://localhost:80/restejemplo/ posteriormente, me mostrara la siguiente página que hemos programado:
Nos pedirá que ingresemos un dato en nuestra caja de texto y luego aremos clic sobre el botón enviar para que muestre la siguiente información:
A %d blogueros les gusta esto: