Перевод статьи «More project ideas to improve your coding skills».
Немногим ранее я написал статью, в которой привел 15 идей проектов, которые можно построить для развития навыков в программировании. Судя по отзывам, статья пошла на ура. В этом посте я рассмотрю несколько новых проектов, добавленных в репозиторий app-ideas.
Короткое напоминание: все проекты делятся на три группы, по уровню сложности. Здесь будут рассмотрены 2 проекта для начинающих, 4 – среднего уровня и 3 – для более опытных программистов.
1. Калькулятор
Уровень: для начинающих
Калькулятор это не только один из самых полезных инструментов, но также и отличный способ разобраться в UI и обработке событий в приложении. В этой задаче нужно создать калькулятор, поддерживающий основные арифметические действия с числами.
Внешний вид калькулятора зависит только от вашего воображения и полета фантазии! Возможно, вы захотите поэкспериментировать с калькулятором в вашем телефоне, чтобы лучше понять базовый функционал и edge cases.
Ограничения
Для осуществления вычислений нельзя использовать функцию eval().
User Stories
- Пользователь может видеть дисплей, где будет отображаться текущее введенное число или результат последней операции.
- Пользователь может видеть панель с кнопками для цифр 0-9, операций – «+», «-», «*», «/» и «=», кнопкой «С» (clear – «очистить») и кнопкой «AC» (clear all – «очистить все»).
- Пользователь может вводить числа в виде последовательности цифр до 8 знаков, кликая на кнопки панели. Цифры, вводимые после 8-й, должны игнорироваться.
- Пользователь может кликнуть на кнопку «С», чтобы удалить последнее введенное число или результат последней операции. Если пользователь удалил результат операции, дисплей должен обновиться и отобразить предыдущее число.
- Пользователь может кликнуть на кнопку «АС», чтобы удалить все внутренние рабочие зоны и установить дисплей на «0».
- Пользователь должен увидеть «ERR», если в результате какой-либо операции будет превышен максимум в 8 цифр.
Дополнительный функционал
- Пользователь может кликнуть на кнопку «+/-» для смены знака числа, отображаемого в данный момент на дисплее.
- На панели должна быть кнопка «.», чтобы пользователь мог вводить десятичные числа (до трех цифр после запятой) и осуществлять операции с ними. При этом соблюдается общее ограничение относительно максимума в 8 цифр.
Полезные ссылки и ресурсы
Примеры проекта
See the Pen JavaScript calculator by Giana (@giana) on CodePen.
See the Pen React Calculator by Michael Jackson (@mjijackson) on CodePen.
2. Приложение для кулинарных рецептов
Уровень: для начинающих
Возможно, вы над этим не задумывались, однако рецепты это не что иное как кулинарные алгоритмы. Это последовательности обязательных шагов, выполнив которые правильно, вы получите в результате вкусное блюдо.
Цель нашего приложения – помочь пользователю упорядочивать рецепты таким образом, чтобы ими было легко пользоваться.
Ограничения
Для начальной версии этого приложения данные рецептов могут быть закодированы в JSON-файле. После реализации начальной версии вы можете доработать приложение, чтобы рецепты находились в файле или базе данных.
User Stories
- Пользователь может видеть список названий рецептов.
- Пользователь может кликнуть на название рецепта, чтобы отобразить карточку с рецептом. На этой карточке должно быть название рецепта, тип блюда (завтрак, обед, ужин, закуска), указание, на сколько людей рассчитан выход блюда, уровень сложности (начальный, средний, продвинутый), список ингредиентов (с указанием количества) и шаги приготовления.
- Пользователь может кликнуть на название другого рецепта, чтобы заменить текущую карточку рецепта новой.
Дополнительный функционал
- Пользователь может видеть фото готового блюда.
- Пользователь может искать рецепт не в списке названий рецептов, а введя название блюда в поле поиска и нажав кнопку «Поиск». В качестве источника рецептов можно использовать любой рецептный open source API (см. MealDB ниже).
- Пользователь может видеть список рецептов, совпадающих с искомым словом.
- Пользователь может кликнуть на название рецепта, чтобы отобразить карточку этого рецепта.
- Если не найдено совпадений с искомым словом, пользователь должен увидеть соответствующее сообщение.
- Пользователь может кликнуть на кнопку «Сохранить» на карточке рецепта, выведенного через API, чтобы сохранить копию в файл или базу данных этого приложения.
Полезные ссылки и ресурсы
Примеры проекта
See the Pen Recipe Box — a Free Code Camp Project (FCC) by Edd Yerburgh (@eddyerburgh) on CodePen.
See the Pen React Recipe Box by Katie Inkblotty (@inkblotty) on CodePen.
3. Приложение для рисования
Уровень: средний
Создайте веб-приложение, в котором пользователи смогут рисовать, делиться своими рисунками и экспортировать их в распространенных форматах изображений.
User Stories
- Пользователь может рисовать на «холсте», используя мышь.
- Пользователь может менять цвет, которым рисует.
- Пользователь может менять размер инструмента.
- Пользователь может нажать на кнопку, чтобы очистить «холст».
Дополнительный функционал
- Пользователь может сохранить свой рисунок в качестве изображения (в формате .png, .jpg и т. д.).
- Пользователь может рисовать различные геометрические формы (прямоугольники, круги, звезды и т. п.).
- Пользователь может делиться своими рисунками в социальных сетях.
Полезные ссылки и ресурсы
Learn how to create a Drawing Application using p5js
Примеры проектов
See the Pen Weekly Coding Challenge #5 — Drawing App with 5pjs by Florin Pop (@FlorinPop17) on CodePen.
See the Pen Coding challenge #5 — Drawing app by t0mm4rx (@t0mm4rx) on CodePen.
4. Переводчик эмодзи
Уровень: средний
Эмодзи стали lingua franca современного общества. Это забавный и быстрый способ коммуникации, а также очень выразительный механизм передачи эмоций и реакций.
Приложение «Переводчик эмодзи» призвано преобразовывать введенный пользователем текст в строку, состоящую из эмодзи и отдельных слов. При этом каждая картинка соответствует одному или нескольким словам оригинального текста, а оставшиеся в строке слова – те, для которых не нашлось подходящей картинки.
User Stories
- Пользователь может вводить строку из слов, цифр и знаков пунктуации в текстовый блок.
- Пользователь может кликнуть на кнопку «Перевести» для перевода слов введенного текста в соответствующие эмодзи.
- Если кнопка «Перевести» была нажата, но текстовый блок был пуст или не поменялся после последнего перевода, пользователь должен увидеть предупреждающее сообщение.
- Пользователь может увидеть результат перевода в другом текстовом блоке. Элементы текста, для которых не нашлось эмодзи, должны остаться неизмененными.
- Пользователь может кликнуть кнопку «Очистить», чтобы очистить текстовые блоки для ввода и вывода.
Дополнительный функционал
- Разработчик реализует функцию подбора синонимов к эмодзи, чтобы позволить приложению преобразовывать в эмодзи более широкий спектр слов.
- Пользователь может выбирать язык введенного текста в выпадающем списке языков.
Полезные ссылки и ресурсы
Примеры проектов
5. Генератор мемов
Уровень: средний
Позволяет пользователям создавать собственные мемы путем добавления текста поверх картинки.
User Stories
- Пользователь может загрузить картинку, которая появится на «холсте».
- Пользователь может добавить текст в верхней части картинки.
- Пользователь может добавить текст в нижней части картинки.
- Пользователь может выбирать цвет текста.
- Пользователь может выбирать размер текста.
- Пользователь может сохранить получившийся мем.
Дополнительный функционал
- Пользователь может выбирать шрифт текста.
- Пользователь может поделиться своим мемом в социальных сетях (twitter, reddit, facebook и т. п.).
- Пользователь может перетаскивать текст и размещать его где угодно на картинке.
- Пользователь может рисовать геометрические фигуры поверх картинки (круги, прямоугольники) или свободно рисовать с помощью мыши.
Полезные ссылки и ресурсы
Работа с холстом становится гораздо проще при применении библиотеки p5js.
Пример проекта
See the Pen Meme Generator by Niels Vadot (@ninivert) on CodePen.
6. Отработка навыков набора текста
Уровень: средний
Некоторые вещи бывают столь очевидными, что их начинают упускать из вида. Для разработчика умение быстро и точно набирать текст (печатать) является важным фактором продуктивности. Цель нашего приложения – позволить пользователю практиковаться в наборе текста и при этом выводить определенные показатели, по которым он сможет оценивать свой прогресс.
Приложение показывает слово, которое вы должны напечатать за определенный интервал времени. Если слово напечатано неправильно, оно остается на экране, а временной интервал стоит на месте. Но если слово напечатано правильно, на экране появляется новое слово, а временной интервал слегка уменьшается.
Хотелось бы верить, что практика поможет вам улучшить как скорость, так и точность набора текста.
User Stories
- Пользователь может видеть время, за которое он должен напечатать слова, показанные в окне приложения.
- Пользователь может видеть количество успешных попыток и общее количество попыток на специальном табло.
- Пользователь может кликнуть на кнопку «Начать тренировку», чтобы начать сессию тренировки.
- Пользователь может видеть слово в текстовом поле.
- Пользователь может начать набирать слово в поле для ввода.
- Если буква введена неправильно, пользователь должен увидеть мигание набранных букв. Поле для ввода текста при этом должно очиститься.
- Если введена неправильная буква, пользователь должен увидеть сообщение рядом с полем для ввода текста. В этом сообщении должно быть указано, что пользователю нужно повторить попытку.
- Пользователь может видеть на табло возрастающее общее количество попыток.
- Если слово напечатано правильно, пользователь должен увидеть сообщение с поздравлением.
- Пользователь может видеть временной интервал, за который должны быть напечатаны слова. При правильном наборе каждого слова этот интервал немного уменьшается.
- Пользователь может видеть на табло количество успешных попыток, возрастающее по мере правильного набора слов.
- Пользователь может кликнуть на кнопку «Остановить тренировку», чтобы прекратить сессию тренировки.
Дополнительный функционал
- Пользователь может слышать уникальные звуковые сигналы при появлении нового слова, при правильном вводе слова, при вводе неправильной буквы.
- Пользователь может логиниться в приложении.
- Пользователь может видеть общую статистику по всем своим сессиям тренировок.
Полезные ссылки и ресурсы
Пример проекта
7. Лифт
Уровень: продвинутый
Сложно представить современный мир без лифтов. Особенно если без них вам пришлось бы ежедневно преодолевать по 20 лестничных пролетов вверх и вниз. Если задуматься, лифты были одной из оригинальных реализаций событий и обработки событий задолго до появления веб-приложений.
Цель нашего приложения «Лифт» – моделирование операций лифта и, что более важно, – того, как обрабатывать события, генерируемые жителями здания. Это приложение моделирует вызовы лифта жителями каждого этажа и нажатие кнопки внутри лифта для выбора этажа, на который они хотели бы попасть.
Ограничения
- Вы должны реализовать один обработчик событий для кнопок «вверх» и «вниз» на каждом этаже. Например, при 4-х этажах нужно реализовать не 8 обработчиков (поскольку на каждом этаже по две кнопки), а единый обработчик событий.
- Аналогично, для всех кнопок панели управления внутри лифта нужно реализовать единый обработчик событий, а не отдельный для каждой кнопки.
User Stories
- Пользователь видит план здания с четырьмя этажами, шахтой лифта, лифтом. На первом этаже есть кнопка «вверх», на втором и третьем – кнопки «вверх» и «вниз», на четвертом – кнопка «вниз».
- Сбоку от плана здания пользователь видит панель управления лифтом с кнопками для каждого этажа.
- Для вызова лифта пользователь может кликать на кнопки «вверх» и «вниз» на любом этаже.
- Пользователь ожидает, что его нажатия кнопок для вызова лифта будут обработаны в той последовательности, в которой они нажимались.
- Пользователь может видеть, как лифт перемещается вверх и вниз по шахте к этажу, на который он был вызван.
- Пользователь может кликать по панели управления лифтом, чтобы выбрать этаж, на который он хочет поехать.
- Пользователь ожидает, что лифт подождет 5 секунд, пока он не кликнет на нужную кнопку с номером этажа. Если на кнопку не кликнули за это время, лифт начнет обрабатывать следующий запрос на вызов лифта.
- Пользователь ожидает, что когда запросы на вызов лифта закончатся, лифт вернется на первый этаж.
Дополнительный функционал
- Пользователь может видеть предупреждающее сообщение, если количество запросов достигло разрешенного максимума. Этот лимит устанавливает разработчик по своему усмотрению.
- Пользователь может слышать звуковой сигнал при прибытии лифта на этаж.
Полезные ссылки и ресурсы
First-in, first out queue (Wikipedia)
Пример проекта
See the Pen Elevator by Arthur Annibal (@nibalAn) on CodePen.
8. Симулятор закусочной
Уровень: продвинутый
Приложение «Фастфуд» моделирует действия, совершаемые в обычной закусочной, торгующей едой на вынос. Создание этого приложения должно помочь разработчику познакомиться с Promises и принципами проектирования SOLID.
В этом приложении «посетители» закусочной делают заказы и ждут, пока их блюда будут приготовлены и упакованы. После того как посетитель сделал заказ, он ждет сигнала о готовности блюда, а затем забирает его и направляется в обеденный зал.
Следует различать роли, указанные в User Stories:
- пользователь – конечный пользователь приложения,
- смоделированные участники процесса, происходящего в закусочной, – Посетитель, Человек, принимающий заказы, Повар, Официант.
Это приложение имеет достаточно много User Stories. Однако не стоит пугаться. Уделите время и сделайте набросок не только пользовательского интерфейса, но и того, каким образом актеры взаимодействуют между собой. Создавайте приложение постепенно, следуя принципам Agile.
Ограничения
- Бланки заказов могут представлять два различных вида Promises: в первом случае Официант ждет, пока Повар приготовит заказанное, а во втором Посетитель ждет, находясь в очереди на обслуживание.
- Используйте нативный эквивалент JS Promises в том языке, который вы выбрали для разработки. JS-разработчики должны использовать нативные Promises, а не async/await.
- Создайте это приложение с помощью нативных функций языка. Нельзя использовать пакеты или библиотеки для моделирования.
- Новые Посетители приходят и становятся в очередь через определенные промежутки времени. То есть, они прибывают с постоянной скоростью.
- Бланки заказов заполняются тоже с фиксированной скоростью.
User Stories
Действия в приложении
- Пользователь видит поля для ввода времени, через которое должен появляться новый Посетитель, и времени, за которое повар готовит заказ.
- Если интервалы времени введены некорректно, пользователь должен увидеть кастомизированное предупреждение.
- Пользователь может начать симуляцию, кликнув кнопку «Старт».
- Пользователь видит «очередь» с текстовым полем, показывающим число Посетителей, ожидающих возможности сделать заказ.
- Пользователь может видеть зону заказов, где в текстовом поле отображается порядковый номер заказа, принимаемого в настоящее время.
- Пользователь может видеть кухонную зону с текстовым полем, где показывается номер заказа, который готовится в настоящее время. Также там есть текстовое поле со списком заказов в очереди и указанием количества этих заказов.
- Пользователь может видеть зону стойки, где в текстовом поле отображается номер заказа, который Посетитель может уже забирать, а также текстовое поле, показывающее число Посетителей, ожидающих в очереди.
- Пользователь может в любой момент завершить симуляцию, кликнув на кнопку «Стоп».
Дополнительный функционал
- Пользователь может определять, сколько времени требуется Человеку, принимающему заказы, на создание бланка заказа.
- Пользователь может определять, сколько времени требуется Официанту на то чтобы принести заказ Посетителю.
- Пользователь может определять общее время работы симулятора от момента нажатия кнопки «Старт».
- Пользователь может видеть анимированных Посетителей и заказы.
Полезные ссылки и ресурсы
- Fast Food Simulator — Logical Workflow
- Agile Manifesto & 12 Principles of Agile Software
- SOLID Principles Every Developer Should Know
- Using Promises
- Promise
9. Игра в наперстки
Уровень: продвинутый
«Наперстки» это классическая азартная игра, уходящая корнями в Древнюю Грецию. Для игры нужны три наперстка, горошина, ловкость рук оператора и наблюдательность игрока. Также это классическая игра мошенников, поскольку оператор может легко обмануть игрока. Хорошо, что последнее не является целью нашего приложения.
Приложение «Наперстки» должно иметь интерфейс классической игры в наперстки и давать игроку возможность честной игры. В нашей игре на экране отображаются три наперстка и горошина, перемещение горошины под один из наперстков, «перетасовка» наперстков в течение определенного интервала времени. Пользователь должен кликнуть на тот наперсток, где, по его мнению, скрыта горошина. Игрок может угадывать, пока не найдет горошину.
User Stories
- Пользователь может видеть экран с тремя наперстками и горошиной.
- Пользователь может кликнуть на наперсток, под который должна быть помещена горошина.
- Пользователь видит, как горошина перемещается под выбранный наперсток.
- Пользователь может кликнуть на кнопку «Перетасовать», чтобы запустить анимированную перетасовку наперстков в течение 5 секунд.
- После остановки наперстков пользователь может кликнуть на тот из них, по которым, как он полагает, кроется горошина.
- Пользователь видит, как наперсток, на который он кликнул, поднимается, чтобы показать, спрятана ли под ним горошина.
- Пользователь может кликать по наперсткам, пока не найдет горошину.
- Когда пользователь находит горошину, должно появиться сообщение с поздравлением.
- Пользователь может начать игру заново, кликнув на наперсток, под которым должна оказаться горошина (шаг №2). После этого все шаги повторяются.
Дополнительный функционал
- Пользователь видит табло с количеством своих побед и общим числом сыгранных игр.
- Когда горошина помещается под наперсток, пользователь видит увеличение количества игр на табло.
- Число побед увеличивается, когда пользователь находит горошину с первой попытки.
- Пользователь может видеть какой-то визуальный эффект при клике на правильный наперсток (изменение цвета, размера и т. п.).
Полезные ссылки и ресурсы
Пример проекта
See the Pen Shell Game by RedCactus* (@RedCactus) on CodePen.
Заключение
Для поиска других идей посетите вот этот репозиторий и, если вам понравилось, не стесняйтесь ставить «звезды»!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
Очень круто! Спасибо