Conteúdo


Desenvolva um jogo da forca com Java, Ajax e Cloudant

Comments

Você já jogou o jogo da forca, o jogo de adivinhação de lápis e papel? Agora você aprenderá como programar seu próprio jogo da forca online, no qual o aplicativo simula seu oponente. Eu abordarei as etapas para usar dois serviços disponíveis em IBM® Cloud ™— o Liberty for Java™ Runtime e o Banco de dados Cloudant NoSQL— para desenvolver o aplicativo.

O que será necessário para o seu aplicativo

  • Conta no IBM Cloud
  • Familiaridade básica com a tecnologia JavaServer Pages (JSP), servlets, JavaScript e Dojo
  • Familiaridade básica com JSON, Apache CouchDB e Cloudant
  • Um ambiente de desenvolvimento Java, como o Eclipse
  • As ferramentas de linha de comando Cloud Foundry
  • Dojo Base

Execute o aplicativoObtenha o código

Você criará o backend e o frontend do aplicativo e modificará o arquivo web.xml.

Se você deseja apenas saber como é fácil usar os serviços do IBM Cloud, obtenha o código e siga as Etapas 1, 2, 3 e 5. Para mais diversão, siga a Etapa 4 também e saiba como o aplicativo usa a tecnologia JSP, servlets, Ajax, CSS, JavaScript e uma conexão do Cloudant.

Etapa 1: Crie um aplicativo da Web Java no IBM Cloud

  1. Efetue login no IBM Cloud .
  2. No catálogo, clique em Liberty for Java em Tempos de execução.
  3. Escolha e insira o nome do host e o nome do seu aplicativo e selecione Default como seu plano. Clique em Create.
  4. No catálogo, clique em Cloudant NoSQL DB em Gerenciamento de dados. Selecione seu aplicativo na lista e selecione Shared como seu plano. Clique em Create.
  5. No painel, clique no seu aplicativo para acessar sua página de visão geral:Screenshot of the Hangman app entry in the IBM Cloud dashboard
    Screenshot of the Hangman app entry in the IBM Cloud dashboard

Etapa 2: Preencha o banco de dados Cloudant NoSQL DB

  1. Na página de visão geral do aplicativo, clique no serviço Cloudant NoSQL DB , em Development Services.
  2. Clique em Launch para iniciar o console do Cloudant.
  3. Clique em database no menu e clique em Add New Database para incluir bancos de dados chamados category e word.
  4. Usando a guia New > Document (item de menu), inclua os documentos a seguir (um a um) no banco de dados category :
    {"_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. Inclua os documentos a seguir (um a um) no banco de dados word :
    {"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"}

Etapa 3: Faça o download do pacote de aplicativos inicial

  1. Na página de visão geral do seu aplicativo, clique em VIEW QUICK START:Screenshot the View Quick Start button
    Screenshot the View Quick Start button
  2. Clique na guia Download the starter application package (link) e salve o arquivo no seu PC local.

Etapa 4: Desenvolva o aplicativo

Nesta etapa, você criará o backend e o frontend do aplicativo e modificará o arquivo web.xml. (Clique no botão Obtenha o código no início desse tutorial para fazer o download do arquivo CSS completo, do arquivo JavaScript, das classes Java e de todos os aplicativos de que o aplicativo precisa.)

Prepare seu ambiente

  1. Crie um novo projeto dinâmico da Web no seu IDE.
  2. Importe o pacote de aplicativos inicial no seu projeto.
  3. Inclua o arquivo org.ektorp.jar na pasta da biblioteca (WEB-INF/lib) do seu projeto. Inclua também as dependências da biblioteca. Todas as bibliotecas estão disponíveis no DevOps Services por meio do botão para obter o código desse tutorial, o Get the code .

Crie seu backend

  1. Crie as classes Category.java e Word.java, com os seguintes atributos:
    • Categoria: String id, String revision, String name
    • Word: String id, String revision, String name, String category_id
  2. Crie os getters e setters. Use a opção @JsonIgnoreProperties e @JsonProperty (anotações), que fazem com que o processamento de propriedades do JSON seja ignorado:
    @JsonIgnoreProperties({"id", "revision"})
    
    public class Category {
       
       @JsonProperty("_id")
       private String id;
       
       @JsonProperty("_rev")
          private String revision;
  3. Crie as classes CategoryRepository.java e WordRepository.java. Nas classes, estenda a classe CouchDbRepositorySupport<T> , que é uma classe de suporte de repositório genérica que fornece todas as operações de criação, leitura, atualização e exclusão de uma classe persistente. Nas classes, inclua o construtor:
    public CategoryRepository(CouchDbConnector db) {
         super(Category.class, db);
    }
  4. Crie a classe CloudantConnection.java. Configure a conexão no seu construtor, usando a variável de ambiente VCAP_SERVICES do seu tempo de execução:
    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;
          }
          }
       }

    É possível encontrar as variáveis de ambiente na visão geral do tempo de execução do Liberty for Java. O terminal VCAP_SERVICES (variável) tem todas as informações do seu banco de dados (nome de usuário, senha, host, porta e URL), se você clicar em Show Credentials no seu serviço Cloudant, verá essa informação: Screenshot of the Cloudant credentials inforamtion
    Screenshot of the Cloudant credentials inforamtion
  5. Crie a visualização getCategories() e getWords() (métodos) para obter os dados do banco de dados Cloudant. Você usará as classes do repositório para ler os dados:
    public List<Word> getWords(){
       CouchDbInstance dbInstance = new StdCouchDbInstance(httpClient);
       CouchDbConnector db = new StdCouchDbConnector("word", dbInstance);
       WordRepository wordRepo = new WordRepository(db);
       return wordRepo.getAll();
    }
  6. Crie a visualização getWordsByCategory() e getRandomWordByCategory() (métodos) para obter uma lista de palavras por categoria e uma palavra aleatória para cada categoria. No getWordsByCategory() (método), é possível chamar o método getWords() para obter as palavras disponíveis e iterar pela lista para localizar as palavras por categoria. No getRandomWordByCategory(), você cria um número aleatório para selecionar a palavra que será usada no jogo:
    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);
    }

    Eu usei o Random (objeto) (disponível no java.util package) para criar um valor de número inteiro de forma aleatória.
  7. Crie o servlet LoadIndex.java, que é usado para carregar as informações de categoria na página da web de índice. O método doGet() é necessário apenas nos locais em que você usa a classe CloudantConnection :
    CloudantConnection cloudantConnection = new CloudantConnection();
    List<Category> categories = cloudantConnection.getCategories();
    request.setAttribute("categories", categories);   
     request.getRequestDispatcher("index.jsp").forward(request, response);
  8. Crie o servlet LoadGame.java. Use a opção doPost() (método) e defina o valor de HttpServletResponse com a palavra aleatória. A palavra aleatória é gerada pela categoria que é enviada no HttpServlerRequest:
    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());
     }
    }

    Você usará esse método para a implementação do Ajax.

Crie seu frontend

  1. Crie o arquivo index.jsp e importe as bibliotecas necessárias:
    <%@ page import="java.util.List" %>
    <%@ page import="com.bluemix.hangman.model.Category" %>
  2. Inclua referências aos arquivos CSS e JavaScript:
    <link rel="stylesheet" href="style.css" />
    <script src="index.js"></script>
    <script src="dojo.js"></script>
  3. No corpo, inclua as tags <div> subjacente e a lista suspensa <select> . A lista será preenchida pela lista de categorias obtida do servlet LoadIndex . Inclua também as tags <img> e <table> (que agora estão vazias e serão preenchidas de forma 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. Crie o arquivo style.css para fornecer estilos CSS para as tags <table>, <div> subjacente e <a> . As classes de estilo mostram as letras do alfabeto que são usadas no jogo. (Lembre-se de que é possível aplicar uma classe de estilo a qualquer elemento HTML usando class="myclassname".)
  5. Crie o arquivo JavaScript index.js. Defina as variáveis globais e copie o arquivo dojo.js na pasta WebContent. Inclua a função loadWord , que é usada para implementar o Ajax pela funcionalidade do Dojo. Essa função é usada para obter uma palavra do 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);
          }          
       });
    }

    No loadWord (chamada da função) para a função updateWord , as variáveis JavaScript são inicializadas e chamam outras funções para preencher dinamicamente as tags HTML definidas no arquivo index.jsp. Aqui, a tag <img> é preenchida usando o método JavaScript document.getElementById() , indicando que um novo jogo foi iniciado:
    document.getElementById("hangmanImage").style.visibility = "visible";

    O terminal loadWordTable (função) é usada para incluir a palavra a ser adivinhada na UI. O terminal string.split( separator) (método JavaScript) é usado para contar os caracteres e os espaços em branco das palavras. O terminal loadLettersTable (função) é usada para imprimir as letras do alfabeto que serão usadas para jogar. O terminal updateImage (função) é usada para atualizar uma imagem na UI. Como é possível ver, document.getElementById("elementId") é usado para acessar os elementos HTML e atualizá-los:
    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. Crie funções para controlar e atualizar o status do jogo. O terminal verifyLetter (função), chamada quando o usuário clica em uma letra do alfabeto, verifica quantas chances restam. O terminal updateGame (função) verifica se a letra existe na palavra e atualiza a imagem, a letra do alfabeto e o status das letras corretas. Novamente, o array split( separator) (método JavaScript) é usado para dividir uma cadeia de caractere em um array de subsequências de caracteres. Nesse caso, o método possui uma cadeia de caracteres vazia como separador, portanto, a cadeia de caracteres original é dividida após cada caractere:
    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. Crie a pasta img na pasta WebContent e inclua as imagens.

Edite o arquivo web.xml

  1. Configure os servlets LoadIndex e LoadGame no arquivo 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 a página padrão do aplicativo da Web chamando o servlet LoadIndex :
    <welcome-file-list>
        <welcome-file>play.do</welcome-file>
    </welcome-file-list>

Etapa 5: Execute o aplicativo

  1. Compile o projeto da Web Java e gere o arquivo WAR.
  2. Da linha de comando, mude para o diretório em que você salvou o arquivo WAR.
  3. Conecte-se ao IBM Cloud executando cf api bluemix_domain.
  4. Efetue o login no IBM Cloud com cf login -u username e aponte seu ambiente (espaço do IBM Cloud) executando cf target -o username -s space.
  5. Implemente o aplicativo executando o comando cf pushappname -pappname.war .

Agora é possível acessar o aplicativo no seu domínio do IBM Cloud (por exemplo, http://hangmangame.mybluemix.net) e jogar o jogo:

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

Conclusão

Usar IBM Cloud , é possível implementar e gerenciar rapidamente seus aplicativos em nuvem. Eu usei apenas um tempo de execução e um serviço para implementar o aplicativo Hangman na nuvem, mas há um vasto portfólio de software disponível no IBM Cloud. Comece hoje mesmo!


Recursos para download


Temas relacionados


Comentários

Acesse ou registre-se para adicionar e acompanhar os comentários.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Tecnologia Java, Cloud computing
ArticleID=991165
ArticleTitle=Desenvolva um jogo da forca com Java, Ajax e Cloudant
publish-date=03252015