15 идей для вашего приложения. Часть 3

Предыдущие части: Часть 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 (Wikipedia)
• Battleship Game Rules (Hasbro)

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

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

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

12. Чат

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

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

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

Возможности

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

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

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

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

• Socket.io
• https://youtu.be/tHbCkikFfDE

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

Chatty2

13. GitHub Timeline

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

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

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

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

Возможности

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

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

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

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

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

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

• GitHub REST API V3
• GitHub GraphQL API V4

Пример кода, показывающий, как использовать 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, так и кнопкой.

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

• Texas Instruments Speak and Spell
• Web Audio API
• Click and Speak

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

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