Содержание


Создание игры "Виселица" с Java, Ajax и Cloudant

Comments

Вы играли в Виселицу на листе бумаги? Теперь вы узнаете, как создать онлайн-версию "Виселицы", в которой симулируются ходы соперника. Я расскажу, как создать такое приложение при помощи двух служб, доступных в IBM® Bluemix™среды выполнения Liberty for Java™ и базы данных Cloudant NoSQL.

Что потребуется для создания приложения

Запустите приложение Получить код

Вы создадите серверную часть и интерфейс приложения, а также отредактируете файл web.xml.

Если вы хотите узнать, как просто использовать службы Bluemix, загрузите код приложения и выполните шаги 1, 2, 3 и 5. Чтобы разобраться в примере подробнее, выполните шаг 4 и узнайте, как приложение использует технологию JSP, сервлеты, Ajax, CSS, JavaScript и подключение к Cloudant.

Шаг 1: Создайте веб-приложение Java в Bluemix

  1. Войдите в среду Bluemix.
  2. В каталоге выберите Liberty for Java в меню Runtimes.
  3. Введите название приложения и имя узла, укажите план Default (По умолчанию). Нажмите Create (Создать).
  4. В каталоге выберите Cloudant NoSQL DB в меню Data Management (Управление данными). Выберите приложение из списка и укажите для него план Shared (Общий). Нажмите Create (Создать).
  5. На информационной панели выберите ваше приложение, чтобы перейти на страницу обзора:Скриншот Hangman app entry in the Bluemix dashboard
    Скриншот Hangman app entry in the Bluemix dashboard

Шаг 2: Заполните базу данных Cloudant NoSQL DB

  1. На странице обзора приложения выберите службу Cloudant NoSQL DB в списке Development Services (Службы разработки).
  2. Нажмите Launch (Запустить) для запуска консоли Cloudant.
  3. Нажмите Databases (Базы данных) в меню, затем нажмите Add New Database (Добавить новую базу данных) и добавьте базы данных с названиями category и word.
  4. В меню New (Новый) > Document (Документ) добавьте следующие документы в базу данных 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. Добавьте следующие документы (поочередно) в базу данных 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"}

Шаг 3: Загрузите пакет с примером приложения

  1. На странице обзора приложения нажмите VIEW QUICK START (ПРОСМОТРЕТЬ КРАТКОЕ РУКОВОДСТВО) :Скриншот  View Quick Start button
    Скриншот View Quick Start button
  2. Перейдите по ссылке Download the starter application package (Загрузить пакет с примером приложения) и сохраните файл на вашем локальном ПК.

Шаг 4: Выполните сборку приложения

На этом шаге вы создадите серверную часть и интерфейс приложения, а также отредактируете файл web.xml. (Нажмите кнопку Получить код в начале этого руководства, чтобы загрузить полный файл CSS, файл JavaScript, классы Java и все необходимые файлы).

Подготовьте среду

  1. Создайте новый динамический веб-проект Java в вашей IDE.
  2. Импортируйте пакет с примером приложения в проект.
  3. Добавьте файл org.ektorp.jar в папку библиотеки (WEB-INF/lib) проекта. Также добавьте зависимости библиотек. Все библиотеки доступны в DevOps Services. Чтобы загрузить их, нажмите кнопку Получить код.

Создайте серверную часть приложения

  1. Создайте классы Category.java и Word.java со следующими атрибутами:
    • Category: String id, String revision, String name
    • Word: String id, String revision, String name, String category_id
  2. Создайте методы задания и получения свойств. Используйте аннотации @JsonIgnoreProperties и @JsonProperty, чтобы игнорировать обработку свойств JSON:
    @JsonIgnoreProperties({"id", "revision"})
    
    public class Category {
       
       @JsonProperty("_id")
       private String id;
       
       @JsonProperty("_rev")
          private String revision;
  3. Создайте классы CategoryRepository.java и WordRepository.java. В этих классах расширьте класс CouchDbRepositorySupport<T>, который представляет собой шаблон класса репозитория и содержит операции создания, чтения, обновления и удаления для долговременно сохраняемого класса. Добавьте в классы конструктор:
    public CategoryRepository(CouchDbConnector db) {
         super(Category.class, db);
    }
  4. Создайте класс CloudantConnection.java. Определите подключение в конструкторе при помощи переменной среды VCAP_SERVICES из среды выполнения:
    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;
          }
          }
       }

    Переменные среды указаны в обзоре среды выполнения Liberty for Java. Переменная VCAP_SERVICES содержит всю информацию о вашей базе данных (имя пользователя, пароль, узел, порт и URL). Если вы нажмете Show Credentials (Отобразить учетные данные) в службе Cloudant, то увидите следующую информацию: Скриншот Cloudant credentials information
    Скриншот Cloudant credentials information
  5. Создайте методы getCategories() и getWords() для получения данных из базы данных Cloudant. Для чтения данных вы будете использовать следующие классы репозиториев:
    public List<Word> getWords(){
       CouchDbInstance dbInstance = new StdCouchDbInstance(httpClient);
       CouchDbConnector db = new StdCouchDbConnector("word", dbInstance);
       WordRepository wordRepo = new WordRepository(db);
       return wordRepo.getAll();
    }
  6. Создайте методы getWordsByCategory() и getRandomWordByCategory() для получения списка слов по категории и для получения случайного слова из каждой категории. В методе getWordsByCategory() можно выполнить вызов метода getWords() для получения доступных слов, после чего осуществить проход по списку для отбора слов по категории. В методе getRandomWordByCategory()вы генерируете случайное число для выбора слова, которые будет использоваться в игре:
    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);
    }

    Для получения случайного целого числа я использовал объект Random (доступен в пакете java.util).
  7. Создайте сервлет LoadIndex.java, используемый для загрузки информации о категориях на главную веб-страницу. Метод doGet() потребуется только тогда, когда вы используете класс CloudantConnection :
    CloudantConnection cloudantConnection = new CloudantConnection();
    List<Category> categories = cloudantConnection.getCategories();
    request.setAttribute("categories", categories);   
     request.getRequestDispatcher("index.jsp").forward(request, response);
  8. Создайте сервлет LoadGame.java. Используйте метод doPost() и определите HttpServletResponse, возвращающий случайное слово. Случайное слово генерируется в категории, отправленной в 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());
     }
    }

    Этот метод потребуется при реализации Ajax.

Создайте интерфейс приложения

  1. Создайте файл index.jsp и импортируйте необходимые библиотеки:
    <%@ page import="java.util.List" %>
    <%@ page import="com.bluemix.hangman.model.Category" %>
  2. Добавьте ссылки на файлы CSS и JavaScript:
    <link rel="stylesheet" href="style.css" />
    <script src="index.js"></script>
    <script src="dojo.js"></script>
  3. В теле страницы добавьте теги <div> и раскрывающийся список <select>. Список будет содержать перечень категорий, полученных от сервлета LoadIndex. Также добавьте теги <img> и <table> (сейчас они пусты и будут заполнены динамически):
    <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. Создайте файл style.css, содержащий стили CSS для тегов <table>, <div> и <a>. Классы стилей отображают буквы алфавита, используемые в игре. (Применить класс стиля можно к любому элементу HTML - для этого нужно указать class="myclassname".)
  5. Создайте файл JavaScript index.js. Определите глобальные переменные и скопируйте файл dojo.js в папку WebContent. Добавьте функцию loadWord, используемую для реализации Ajax посредством функций Dojo. Эта функция используется для получения слова из сервлета 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);
          }          
       });
    }

    В функции loadWord вызывается функция updateWord. При этом вызове инициализируются переменные JavaScript и производится вызов прочих функций для динамического заполнения тегов HTML, определенных в файле index.jsp. Здесь тег <img> заполняется при помощи метода JavaScript document.getElementById() и указывает, что началась новая игра:
    document.getElementById("hangmanImage").style.visibility = "visible";

    Функция loadWordTable используется для добавления угадываемого слова в UI. Метод JavaScript string.split(separator) используется для подсчета числа символов и пробелов в словах. Функция loadLettersTable используется для печати букв алфавита, которые будут использованы в игре. Функция updateImage используется для обновления изображения в UI. Как видите, document.getElementById("elementId") используется для доступа к элементам HTML и их обновления:
    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. Создайте функции для контроля за состоянием игры и его обновления. Функция verifyLetter, которая вызывается, когда пользователь нажимает на одну из букв алфавита, проверяет, сколько попыток осталось у игрока. Функция updateGame проверяет, есть ли указанная буква в слове, обновляет изображение и букву алфавита, а также исправляет статус буквы. И вновь метод split(separator) используется для преобразования строки в массив подстрок. В этом случае в качестве разделителя в методе используется пустая строка, поэтому в качестве отдельных подстрок выделяются все символы:
    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. Создайте папку img в папке WebContent и добавьте в нее изображения.

Отредактируйте файл web.xml

  1. Настройте сервлеты LoadIndex и LoadGame в файле 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. Укажите страницу веб-приложения по умолчанию посредством вызова сервлета LoadIndex:
    <welcome-file-list>
        <welcome-file>play.do</welcome-file>
    </welcome-file-list>

Шаг 5: Запустите приложение

  1. Скомпилируйте веб-проект Java и сгенерируйте файл WAR.
  2. В командной строке перейдите в каталог, куда вы сохранили файл WAR.
  3. Подключитесь к Bluemix. Для этого запустите cf api bluemix_domain.
  4. Выполните вход в Bluemix с cf login -u username и укажите целевую среду (пространство Bluemix). Для этого выполните cf target -o username -s space.
  5. Выполните развертывание приложения при помощи команды cf push appname -p appname.war.

Теперь вы можете открыть приложение в домене Bluemix (например, по адресу http://hangmangame.mybluemix.net) и сыграть в игру:

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

Заключение

Bluemix позволяет быстро выполнять развертывание облачных приложений и управлять ими. Для развертывания приложения "Виселица" в облаке я использовал только одну среду выполнения и одну службу, но в Bluemix доступен обширный портфель программных продуктов. Начните работу уже сегодня!


Ресурсы для скачивания


Похожие темы


Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Технология Java, Облачные вычисления
ArticleID=994531
ArticleTitle=Создание игры "Виселица" с Java, Ajax и Cloudant
publish-date=02112015