Learning

Предыдущие части: Часть 1, Часть 2 

11. Игра Морской Бой

Уровень: 3 — продвинутый

Описание: движок Battleship Game Engine (BGE) реализует классическую пошаговую игру «Морской бой». Это пакет, отделённый от презентационного слоя (графического интерфейса). Такой тип архитектурного шаблона, можно использовать и в других целях, поскольку он позволяет использовать одну и ту же службу для разных приложений.

Сам BGE запускается через серию вызовов функций, а не через прямое воздействие действия пользователя. В этом отношении использование BGE аналогично использованию API.

Ваша задача разработать BGE, а также текстовый презентационный слой для тестирования, отдельный от самого движка. Поэтому описание функционала разделено на две части, для BGE и отдельно для презентационного слоя.

BGE отвечает за работоспособность игры.

Функционал

BGE

Чтобы начать игру для 1 игрока, нужно вызвать функцию startGame(), которая генерирует игровое поле 8 на 8, а также 3 «корабля». Корабли отличаются количеством клеток в длину:

  1. Эсминец: 2 клетки
  2. Крейсер: 3 клетки
  3. Линкор: 4 клетки

Функция startGame() случайным образом размещает корабли на поле в любом направлении и возвращает массив данных о расположении кораблей.

  • Функция shoot() передаёт координаты цели (клетки на поле). Эта функция возвращает индикаторы, показывающие было ли «попадание», количество оставшихся кораблей, массив расположения кораблей, обновлённый массив данных о попаданиях и промахах.

В массиве попаданий и промахов, клетка может иметь одно из трёх значений: пусто — в эту клетку ещё не стреляли; O — в эту клетку стреляли, но на ней не было корабля (промах); X — было попадание.

Текстовый презентационный слой

  • Для пользователя, массив попаданий и промахов представлен в виде двумерного поля с символами, которое возвращается функцией startGame().
  • Пользователю предлагается ввести координаты целевой клетки на поле.
  • После выстрела отображается обновлённый массив попаданий и промахов.
  • После каждого выстрела отображается сообщение с результатом: попадание или промах.
  • После того как все корабли потоплены, выводится сообщение с поздравлением.
  • В конце каждой игры пользователю предлагается сыграть ещё раз, в случае отказа — игра завершается.

Дополнительные фичи

BGE

  • У игрока есть возможность определить количество рядов и колонок на поле. Параметр передаётся в функцию startGame().
  • Реализовать функцию gameStats(), которая будет возвращать Javascript объект со статистикой текущей игры. Например, количество совершённых ходов, количество промахов и попаданий.
  • Реализуйте возможность сыграть вдвоём. При вызове, функция startGame() сгенерирует поля с кораблями для каждого игрока.

Функция shoot(), вместе с координатами цели, будет принимать номер игрока, который сделал выстрел. Данные, которые возвращает эта функция предназначены для стрелявшего.

Текстовый презентационный слой

  • Пользователь может посмотреть статистику текущей игры в любое время. Для этого он должен ввести команду stats вместо координат цели (Примечание: для этого требуется наличие функции gameStats()).
  • Пользователь может выбрать игру для двух игроков. Ходы игроков чередуются в одном сеансе (Примечание: это требует соответствующую возможность в BGE).
  • Рядом с полем ввода, пользователь видит номер игрока, чья очередь стрелять.
  • В конце каждого хода, пользователь видит оба игровых поля.

Ссылки и ресурсы

Пример проекта

В этом видео представлен процесс игры в Морской бой.

Помните, что вам нужно реализовать текстовый интерфейс. Battleship Game by Chris Brody

12. Чат

Уровень: 3 — продвинутый

Описание: чат, в котором множество пользователей может отправлять друг другу сообщения.

Для минимальной жизнеспособности проекта вы можете сфокусироваться на создании интерфейса. Real-time функциональность можно добавить позже.

Возможности

  • Пользователю предлагается ввести username, когда он заходит в чат. username сохраняется в приложении.
  • Для ввода сообщений пользователю доступен input field
  • Нажатие клавиши enter или кнопки «Отправить», отправляет сообщение в чат вместе с именем пользователя (пример: John Doe: Hello World!)

Дополнительные фичи

  • Сообщения могут видеть все пользователи чата (благодаря WebSockets)
  • Когда новый пользователь присоединяется к чату, все существующие пользователи получают уведомление об этом.
  • Сообщения сохраняются в базе данных.
  • Пользователь может отправлять изображения, видео и ссылки, которые должны корректно отображаться.
  • Возможность выбирать и отправлять смайлики.
  • Приватный чат.
  • Пользователи могут присоединятся к тематическим каналам.

Полезные ресурсы

Пример проекта

Chatty2

13. GitHub Timeline

Уровень: 3 — продвинутый

Описание: API и UI являются знаками отличия в современных веб-приложениях. GitHub Timeline с помощью этих средств представляет визуальную историю активности пользователей GitHub.

Задача GitHub Timeline — принять имя пользователя GitHub и представить временную шкалу, содержащую все репозитории, даты их создания и описания в графическом виде. В приложении должна быть возможность поделится этим графиком, например с потенциальным работодателем. Подумайте об удобочитаемости, эффективно используйте цвет и типографию.

Отображаться должны только публичные репозитории.

Возможности

  • Ввести имя пользователя GitHub
  • Кнопка “Генерировать”. После нажатия создаётся и отображается Timeline репозитория.
  • Если имя пользователя не проходит валидацию на GitHub, то появляется сообщение об ошибке.

Дополнительные фичи

  • Пользователь может посмотреть общее количество репозиториев, подсчитанных по году их создания

Ссылки и ресурсы

GitHub предоставляет два API, которые можно использовать для доступа к данным. Вы также можете использовать пакет NPM для доступа к API GitHub.

Документацию по API GitHub можно найти здесь:

Пример кода, показывающий, как использовать API GitHub:

Команда CURL вернёт JSON файл с помощью V3 REST API:

 curl -u "user-id" https://api.github.com/users/user-id/repos 

Примеры проекта: раз, два

14. Spell-It

Уровень: 3 — продвинутый

Описание: приложение Spell-It помогает практиковать правописание, воспроизводя аудиозапись слова, которое пользователь должен ввести с помощью клавиатуры.

Возможности

  • Кнопка Play для воспроизведения аудиозаписи
  • По мере того, как пользователь вводит слово, в текстовом поле ввода отображается то, что он вводит.
  • Нажатие на кнопку Enter подтверждает ввод слова.
  • Если слово введено правильно, то пользователю показывается подтверждающее сообщение.
  • Пользователь видит сообщение с просьбой повторить ввод, если слово написано с ошибкой.
  • Пользователю доступна статистика (количество правильных написаний, общее количество вводов слов и процент правильных ответов).

Дополнительные фичи

  • Звуковое сопровождение, подтверждающее правильный ответ.
  • Звуковое сопровождение, указывающее на НЕправильный ответ.
  • Нажатие на кнопку «Подсказка» подсветит неправильно введённые буквы в поле для ввода.
  • Подтвердить ввод можно как клавишей Enter, так и кнопкой.

Ссылки и ресурсы

Примеры проекта

Word Wizard for iOS

Speak N Spell on Google Play

15. Survey App

Уровень: 3 — продвинутый

Описание: для разработчика, опросы являются важным инструментом. Это полезная возможность получить отзыв от ваших пользователей по различным вопросам, включая уровень удовлетворённости приложением, необходимость улучшений, приоритетные проблемы, которые нужно решить и т.д.

У вас есть возможность создать полнофункциональное приложение, которое можно добавить в свой набор инструментов. Вы сможете создавать опросы, задавать временные рамки для прохождения опроса, формировать и представлять результат.

У пользователя этого приложения может быть одна из двух ролей, каждая из которых имеет своё назначение:

  • Координаторы исследований: создают и проводят опросы. Это административная функция, недоступная обычным пользователям.
  • Респонденты: проходят опросы и могут просматривать результаты. У них нет административных привилегий в приложении.

Коммерческие инструменты для исследований подразумевают наличие функции распространения опросов, например массовые email рассылки респондентам. Чтобы обеспечить доступность и простоту прохождения опроса, должна быть возможность отвечать на вопросы на веб-странице приложения.

Возможности

Основные

  • Координаторы и респонденты могут создавать, проводить и просматривать опросы и результаты на общем сайте.
  • Координаторы могут залогиниться в приложении для доступа к административным функциям, таким как создание опросов.

Создание опроса

  • Координатор может создать опрос, содержащий 1–10 вопросов с несколькими вариантами ответов для каждого вопроса.
  • Координатор может определить 1–5 взаимоисключающих ответов для каждого вопроса.
  • Координатор может ввести название опроса.
  • Координатор может нажать кнопку “Отмена”, чтобы вернуться на главную страницу без сохранения опроса.
  • Координатор может нажать кнопку Сохранить, чтобы сохранить опрос.

Проведение исследования

  • Координатор может открыть опрос, выбрав его из списка ранее созданных опросов.
  • Координаторы могут закрыть (прекратить) опрос, выбрав его из списка открытых на текущий момент опросов.
  • Респондент может пройти опрос, выбрав его из списка открытых опросов.
  • Респондент может выбирать ответы с помощью checkbox’ов
  • Респондент должен видеть, что ранее выбранный ответ будет автоматически отменён, если выбрать другой вариант ответа.
  • Респондент, нажав кнопку Отмена, вернётся на главную страницу без отправки опроса.
  • Чтобы отправить свои ответы, респондент должен нажать кнопку Отправить.
  • Респондент получает уведомление об ошибке если он пытается отправить опросник, не ответив на все вопросы.

Просмотр результатов

  • Координаторы и респонденты могут просмотреть результаты, выбрав один из завершённых опросов.
  • Результаты представлены в табличном формате. Координаторы и респонденты видят, какое количество раз выбрали каждый из вариантов ответа.

Дополнительные фичи

  • Респондент может создать свою учётную запись в приложении.
  • Возможность войти под своей учётной записью.
  • Респондент не может пройти один и тот же опрос более одного раза.
  • Координаторы и респонденты могут просматривать результаты опроса в графическом представлении (графики типа pie, bar, column и т.д.).

Ссылки и ресурсы

Библиотеки для создания опросов: SurveyJS

Коммерческие сервисы: Survey Monkey и Typeform

Примеры проекта

Перевод статьи Florin Pop: Here are some app ideas you can build to level up your coding skills