Contenido


Construya un juego del Ahorcado con Java, Ajax y Cloudant

Comments

¿Ha jugado al Ahorcado, el juego de adivinanzas de papel y lápiz? Ahora aprenderá cómo programar su propio juego del Ahorcado en línea, en el que la aplicación simula a su oponente. Analizaré los pasos para utilizar dos servicios disponibles en IBM® Cloud™— el tiempo de ejecución de Liberty for Java™ y la base de datos Cloudant NoSQL — para construir la aplicación.

Lo que necesitará para su aplicación

Ejecutar la aplicaciónObtener el código

Creará los back end y front end para la aplicación y modificará el archivo web.xml.

Si solo desea saber qué fácil es usar los servicios de IBM Cloud, obtenga el código y siga los pasos 1, 2, 3 y 5. Para más diversión, siga además el paso 4 y aprenda cómo la aplicación utiliza la tecnología JSO, servlets, Ajax, CSS, JavaScript, y una conexión Cloudant.

Paso 1: Cree una aplicación web Java en IBM Cloud

  1. Inicie sesión en IBM Cloud.
  2. En el catálogo, haga clic en Liberty for Java debajo de Tiempos de ejecución.
  3. Elija e ingrese el nombre de la aplicación y el nombre de host, y seleccione Default según lo planeado. Haga clic en Crear.
  4. En el catálogo, haga clic en Cloudant NoSQL DB debajo de Gestión de datos. Seleccione una aplicación de la lista y haga clic en Compartida según lo planeado. Haga clic en Crear.
  5. En el panel de instrumentos, haga clic en la aplicación para ir a su página de visión general:Screenshot of the Hangman app entry in the IBM Cloud dashboard
    Screenshot of the Hangman app entry in the IBM Cloud dashboard

Paso 2: Complete la base de datos de Cloudant NoSQL DB

  1. En la página de visión general de la aplicación, haga clic en el servicio Cloudant NoSQL DB , debajo de Servicios de desarrollo.
  2. Haga clic en Iniciar para iniciar la consola Cloudant.
  3. Haga clic en Bases de datos en el menú y luego en Añadir nueva base de datos para añadir las bases de datos denominadascategoría y palabra.
  4. Utilizando el elemento de menú New > Document , añada los siguientes documentos (uno por uno) en la base de datos de las categorías :
     {"_id":"0","name":"Animals"} {"_id":"1","name":"Food"} {"_id":"2","name":"Music"} {"_id":"3","name":"Movies"} {"_id":"4","name":"Names"} {"_id":"5","name":"Video Games"}
  5. Añada los siguientes documentos (uno por uno) en la base de datos palabra :
     {"name":"CAIMAN","category_id":"0"} {"name":"BEAR","category_id":"0"} {"name":"CARROTS","category_id":"1"} {"name":"AVOCADO","category_id":"1"} {"name":"LEOPOLDO","category_id":"4"} {"name":"ISMAEL","category_id":"4"} {"name":"LOREN","category_id":"4"} {"name":"SPACE RUN","category_id":"5"} {"name":"WATCH DOG","category_id":"5"}

Paso 3: Descargue el paquete de aplicaciones de principiantes

  1. En la página de visión general de la aplicación, haga clic en VER INICIO RÁPIDO:Screenshot the View Quick Start button
    Screenshot the View Quick Start button
  2. Haga clic en el enlace Descargar el paquete de aplicaciones para principiantes y guarde el archivo en su computadora local.

Paso 4: Construya la aplicación

En este paso, creará los extremos traseros y delanteros para la aplicación y modificará el archivo web.xml. (Haga clic en el botón Obtener el código al principio de este tutorial para descargar el archivo CSS completo, el archivo JavaScript, las clases Java y todos los archivos que requiere la aplicación).

Prepare el entorno

  1. Cree un nuevo proyecto web dinámico Java en su IDE.
  2. Importe el paquete de aplicaciones para principiantes en el proyecto.
  3. Añada el archivo org.ektorp.jar en la carpeta de la biblioteca (WEB-INF/lib) al proyecto. Además, añada las dependencias de la biblioteca. Todas las bibliotecas están disponibles desde DevOps Services a través del botón Obtener el código de este tutorial.

Cree el extremo trasero

  1. Cree las clases Category.java y Word.java, con los siguientes atributos:
    • Categoría: Id de cadena, Revisión de cadena, Nombre de cadena
    • Palabra: Id de cadena, Revisión de cadena, Nombre de cadena, category_id de cadena
  2. Cree los getters y los setters. Utilice las anotaciones @JsonIgnoreProperties y @JsonProperty , que hacen que se ignore el procesamiento de las propiedades JSON:
     @JsonIgnoreProperties({"id", "revision"}) public class Category { @JsonProperty("_id") private String id; @JsonProperty("_rev") private String revision;
  3. Cree las clases CategoryRepository.java y WordRepository.java. En las clases, extienda la clase CouchDbRepositorySupport<T> , que es una clase genérica de soporte de repositorio que brinda todas las operaciones para crear, leer, actualizar y eliminar una clase persistente. En las clases, añada el constructor:
     public CategoryRepository(CouchDbConnector db) { super(Category.class, db); }
  4. Cree la clase CloudantConnection.java. Configure la conexión del constructor, utilizando la variable del entorno VCAP_SERVICES del tiempo de ejecución:
     JSONObject obj = new JSONObject(System.getenv("VCAP_SERVICES")); String[] names = JSONObject.getNames(obj); if (names != null) { for (String name : names) { if (name.equals("cloudantNoSQLDB")) { JSONArray val = obj.getJSONArray(name); JSONObject serviceAttr = val.getJSONObject(0); JSONObject credentials = serviceAttr.getJSONObject("credentials"); httpClient = new StdHttpClient.Builder() .url(credentials.getString("url")) .build(); break; } } }

    Puede encontrar las variables del entorno en la visión general del tiempo de ejecución de Liberty for Java. La variable VCAP_SERVICES contiene toda la información de la base de datos (nombre de usuario, contraseña, host, puerto y URL); si hace clic en Mostrar credenciales debajo de servicio Cloudant, podrá ver esa información: Screenshot of the Cloudant credentials inforamtion
    Screenshot of the Cloudant credentials inforamtion
  5. Cree los métodos getCategories() y getWords() para obtener datos desde la base de datos Cloudant. Utilizará las clases de repositorio para leer datos:
     public List<Word> getWords(){ CouchDbInstance dbInstance = new StdCouchDbInstance(httpClient); CouchDbConnector db = new StdCouchDbConnector("word", dbInstance); WordRepository wordRepo = new WordRepository(db); return wordRepo.getAll(); }
  6. Cree los métodos getWordsByCategory() y getRandomWordByCategory() para obtener una lista de palabras por categoría y una palabra aleatoria para cada categoría. En el método getWordsByCategory() puede llamar al método getWords() para obtener las palabras disponibles y luego repetir a través de la lista para buscar las palabras por categoría. En getRandomWordByCategory(), cree un número aleatorio para seleccionar la palabra que se usará en el juego:
     List<Word> words = this.getWordsByCategory(category_id); Random generator = new Random(); if(words.size()>0){ int random = generator.nextInt(words.size()); word = words.get(random); }

    Yo utilicé el objeto Aleatorio (disponible en el paquete java.util ) para crear un valor entero aleatorio.
  7. Cree el servlet LoadIndex.java, que se utiliza para cargar información de las categorías en la página web del índice. Necesita el método doGet() solo cuando utilice la clase CloudantConnection :
     CloudantConnection cloudantConnection = new CloudantConnection(); List<Category> categories = cloudantConnection.getCategories(); request.setAttribute("categories", categories); request.getRequestDispatcher("index.jsp").forward(request, response);
  8. Cree el servlet LoadGame.java. Utilice el método doPost() y configure HttpServletResponse con la palabra aleatoria. La palabra aleatoria se genera por la categoría que se envía enHttpServlerRequest:
     String action = request.getParameter("action"); String value = request.getParameter("value"); if ((action != null)&&(value != null)) { CloudantConnection cloudantConnection = new CloudantConnection(); Word word = cloudantConnection.getRandomWordByCategory(value); if(word!=null){ response.setContentType("text/html"); response.getWriter().write(word.getName()); } }

    Utilizará este método para la implementación de Ajax.

Cree la parte trasera

  1. Cree el archivo index.jsp e importe las bibliotecas necesarias:
     <%@ page import="java.util.List" %> <%@ page import="com.bluemix.hangman.model.Category" %>
  2. Añada referencias a los archivos CSS y JavaScript:
     <link rel="stylesheet" href="style.css" /> <script src="index.js"></script> <script src="dojo.js"></script>
  3. En el cuerpo, añada las etiquetas<div> y la lista desplegable <select> . La lista se completará con la lista de categorías que obtiene del servlet LoadIndex . También añada las etiquetas <img> y <table> (que ahora están vacías y se completarán de manera dinámica):
     <div id="menu"> <select onChange="javascript:loadWord(this.value);"> <option value="">Select category</option> <% List<Category> categories = (List<Category>) request.getAttribute("categories"); for(int index=0; index<categories.size(); index++){ %> <option value="<%=categories.get(index).getId()%>" ><%=categories.get(index).getName() %></option> <% } %> </select> </div> <div id="content"> <img id="hangmanImage" style="visibility:hidden"><br><br> <table id="wordTable"></table><br> <table id="lettersTable"></table> </div>
  4. Cree el archivo style.css para brindar estilos CSS para las etiquetas <table>, <div> y <a> . Las clases de estilo muestran las letras del alfabeto que se utilizan en el juego. (Recuerde que puede aplicar una clase de estilo a cualquier elemento HTML utilizando class="myclassname".)
  5. Cree el archivo index.js JavaScript. Defina las variables globales y copie el archivo dojo.js en la carpeta WebContent. Añada la función loadWord , que se utiliza para implementar Ajax a través de la funcionalidad Dojo. Esta función se utiliza para obtener una palabra del servlet LoadGame :
     function loadWord(category) { dojo.xhrPost({ url: "game.do", postData: "action=loadWord&value="+category, handleAs: "text", load: function(text){ updateWord(text); }, error: function(error){ alert(error); } }); }

    En la funciónloadWord llame a la función updateWord , las variables JavaScript se inicializan y llaman a otras funciones para que completen de manera dinámica las etiquetas HTML definidas en el archivo index.jsp. Aquí, la etiqueta <img> se completa utilizando el método document.getElementById() JavaScript, que indica que ha comenzado un nuevo juego:
     document.getElementById("hangmanImage").style.visibility = "visible";

    La función loadWordTable se utiliza para añadir la palabra a adivinar en la IU. El método JavaScript string.split(separator) se utiliza para contar los caracteres y los espacios en blanco de las palabras. La función loadLettersTable se utiliza para imprimir las letras del alfabeto que se utilizarán para jugar. La función updateImage se utiliza para actualizar una imagen en la IU. Como puede ver, document.getElementById("elementId") se utiliza para acceder a los elementos de HTML y actualizarlos:
     var table = "<tr>"; for(var index=0; index<word.split('').length; index++){ table += "<td ><a id='wordLetter"+index+"' class='wordLetter'>_</a></td>"; } table += "</tr>"; document.getElementById("wordTable").innerHTML = table;\
  6. Cree funciones para controlar y actualizar el estado del juego. La función verifyLetter , llamada cuando el usuario hace clic en una letra del alfabeto, verifica cuántas posibilidades le quedan. La función updateGame verifica si la letra existe en la palabra y actualiza la imagen, la letra del alfabeto y corrige el estado de las letras. Nuevamente, el método JavaScript split(separator) se utiliza para dividir una cadena en una matriz de subcadenas. En este caso, el método tiene una cadena vacía como separador, por lo que la cadena original se divide después de cada carácter:
     var wordSplit = globalWord.split(''); for(var index=0; index<wordSplit.length; index++){ if(letter == wordSplit[index]){ document.getElementById("wordLetter"+index).innerHTML = wordSplit[index]; correctLetters+=1; find = true; } }
  7. Cree la carpeta img en la carpeta WebContent y añada las imágenes.

Edite el archivo web.xml

  1. Configure los servlets LoadIndex y LoadGame en el archivo web.xml:
     <servlet> <servlet-name>LoadIndex</servlet-name> <servlet-class>com.bluemix.hangman.controller.LoadIndex</servlet-class> </servlet> <servlet> <servlet-name>LoadGame</servlet-name> <servlet-class>com.bluemix.hangman.controller.LoadGame</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoadIndex</servlet-name> <url-pattern>/play.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>LoadGame</servlet-name> <url-pattern>/game.do</url-pattern> </servlet-mapping>
  2. Especifique la página predeterminada de la aplicación web llamando al servlet LoadIndex :
     <welcome-file-list> <welcome-file>play.do</welcome-file> </welcome-file-list>

Paso 5: Ejecute la aplicación

  1. Compile el proyecto web Java y genere el archivo WAR.
  2. Desde la línea de comandos, cambie al directorio en el que guardó el archivo WAR.
  3. Conéctese a IBM Cloud ejecutando cf api bluemix_domain.
  4. Inicie sesión en IBM Cloud con cf login -u username y focalice el entorno (espacio IBM Cloud) ejecutando cf target -o username -s space.
  5. Implemente la aplicación ejecutando el comando cf push appname -p appname.war .

Ahora puede acceder a la aplicación en el dominio IBM Cloud (por ejemplo, http://hangmangame.mybluemix.net) y juegue:

Screenshot of the game with partially complete hanging man
Screenshot of the game with partially complete hanging man

Conclusión

Utilizando IBM Cloud, puede implementar y manejar rápidamente las aplicaciones en nube. Yo utilicé únicamente un tiempo de ejecución y un servicio para implementar la aplicación del Ahorcado en la nube, pero hay un portfolio de software extensivo disponible en IBM Cloud. ¡Comience hoy!


Recursos para Descargar


Temas relacionados


Comentarios

Inicie Sesión o Regístrese para agregar comentarios.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=tecnologia Java, Cloud computing
ArticleID=1008062
ArticleTitle=Construya un juego del Ahorcado con Java, Ajax y Cloudant
publish-date=06102015