Есть два типа начинающих разработчиков:
Те, кто бесконечно смотрит уроки.
Те, кто однажды открывает редактор и пытается сделать хоть что-нибудь самостоятельно.
Первые знают, что такое переменная, функция и массив. Вторые тоже знают — просто ещё успели получить семь ошибок, случайно удалить половину проекта и понять, зачем вообще нужен Git.
Проект «Трекер привычек» — идеальный способ перейти из первой категории во вторую. Он достаточно простой, чтобы не уничтожить твою самооценку за один вечер, но при этом достаточно серьёзный, чтобы прокачать настоящие навыки разработки.
Что вообще делает трекер привычек?
Пользователь добавляет привычки, которые хочет выполнять регулярно:
пить воду;
читать по 20 минут;
заниматься программированием;
делать зарядку;
не открывать социальные сети каждые три минуты;
наконец-то начать пользоваться ежедневником, который был куплен два года назад.
Каждый день пользователь отмечает выполненные привычки, наблюдает за прогрессом и старается не прервать серию.
Звучит просто. Но именно в этой простоте и скрывается сила проекта.
Тебе не придётся сразу подключать искусственный интеллект, микросервисы, блокчейн и систему авторизации через отпечаток лапы кота. Можно начать с небольшой рабочей версии и постепенно добавлять новые возможности.
Почему это идеальный первый проект?
1. Здесь есть настоящая логика
Обычная учебная задача выглядит примерно так:
Создайте массив из пяти чисел и найдите максимальное.
Ты решаешь её, получаешь зелёную галочку и через три дня забываешь всё, кроме эмоционального ущерба.
В трекере привычек массив уже нужен не «потому что так написано в задании». В нём действительно можно хранить привычки:
const habits = [
{
id: 1,
title: "Учить JavaScript",
completed: false
},
{
id: 2,
title: "Читать 20 минут",
completed: true
}
];Теперь переменные, объекты, массивы и функции перестают быть абстрактными терминами. Они становятся деталями приложения.
2. Результат сразу видно
Добавил кнопку — появилась кнопка.
Написал функцию — привычку можно отметить выполненной.
Допустил ошибку — кнопка теперь удаляет всё приложение.
Зато обратная связь моментальная. Ты видишь связь между кодом и результатом, а это один из лучших способов учиться программированию.
3. Проект можно развивать постепенно
Самая первая версия может состоять всего из трёх возможностей:
добавить привычку;
отметить её выполненной;
удалить привычку.
И всё. Уже есть рабочее приложение.
После этого можно спокойно добавлять новые функции, а не пытаться за один вечер создать конкурента Notion.
Что ты прокачаешь во время разработки?
Работу с интерфейсом
Нужно создать поле ввода, кнопку добавления, список привычек и элементы управления.
На практике ты разберёшься с:
HTML-разметкой;
CSS-стилями;
адаптивностью;
состояниями кнопок;
отображением пустого списка;
сообщениями об ошибках.
Например, пользователь нажал «Добавить», но ничего не написал. Приложение не должно создавать привычку под названием «». Хотя, возможно, именно эту привычку пользователь выполнял бы стабильнее остальных.
Работу с событиями
Пользователь будет нажимать кнопки, вводить текст и отмечать выполненные задачи.
Значит, придётся работать с событиями:
button.addEventListener("click", addHabit);Именно здесь появляется ощущение, что приложение действительно живое. Оно не просто показывает текст, а реагирует на действия пользователя.
Работу с данными
Каждая привычка — это объект с определёнными свойствами:
{
id: 172839,
title: "Пройти один урок",
completed: false,
streak: 4
}В процессе ты научишься:
добавлять объекты в массив;
искать нужный элемент;
изменять его свойства;
удалять элементы;
фильтровать список;
пересчитывать статистику.
То есть потренируешь почти всё, что раньше выглядело как набор случайных методов из учебника.
Сохранение данных
Без сохранения приложение будет забывать все привычки после перезагрузки страницы.
Очень жизненно, но не очень удобно.
Для первой версии можно использовать localStorage. Пользователь добавил привычку — приложение сохранило массив. Пользователь вернулся завтра — данные снова загрузились.
localStorage.setItem("habits", JSON.stringify(habits));Так ты познакомишься с преобразованием данных в JSON и поймёшь, как приложения сохраняют состояние между запусками.
С чего начать: простой план разработки
Шаг 1. Нарисуй интерфейс
Сначала можно даже не писать JavaScript.
Создай:
заголовок;
поле для названия привычки;
кнопку добавления;
контейнер для списка;
блок со статистикой.
Не пытайся сразу сделать дизайн, который возьмёт премию года. В начале достаточно, чтобы кнопка не находилась поверх заголовка, а текст не уходил за пределы экрана.
Шаг 2. Научись добавлять привычки
Получи текст из поля ввода, создай объект и добавь его в массив.
После этого обнови список на странице.
Это будет первый момент, когда ты нажмёшь кнопку и увидишь результат собственного кода. Очень вероятно, что именно тогда ты тихо скажешь:
Так. Получается, я разработчик?
Пока ещё нет. Но направление правильное.
Шаг 3. Добавь выполнение и удаление
У каждой привычки должна быть кнопка или чекбокс для выполнения.
Также добавь удаление. Желательно не делать всю карточку привычки одной большой кнопкой удаления. Пользователи почему-то не любят терять данные из-за одного неловкого клика.
Шаг 4. Подключи localStorage
Сохраняй привычки после каждого изменения и загружай их при открытии приложения.
Теперь проект уже можно реально использовать, а не только показывать преподавателю со словами: «Тут почти всё работает, просто не обновляйте страницу».
Шаг 5. Сделай приложение приятным
Добавь:
состояния наведения;
анимацию появления;
зачёркивание выполненных привычек;
индикатор прогресса;
сообщение для пустого списка;
подтверждение перед удалением.
Мелкие детали превращают учебный проект в продукт, который не стыдно добавить в портфолио.
Какие функции добавить дальше?
Когда базовая версия будет готова, проект можно развивать почти бесконечно.
Серии выполнения 🔥
Показывай, сколько дней подряд пользователь выполняет привычку.
Здесь появится работа с датами, календарём и проверкой предыдущих дней.
Например:
Учить программирование — серия 12 дней.
После такого пользователь продолжает заниматься уже не из-за мотивации, а потому что жалко терять красивую цифру.
Категории
Раздели привычки на группы:
здоровье;
учёба;
работа;
спорт;
личное.
Пользователь сможет фильтровать список и быстрее находить нужные привычки.
Статистика
Добавь процент выполнения за неделю или месяц:
Понедельник — 80%
Вторник — 100%
Среда — мы не обсуждаем средуМожно построить график, добавить календарь активности или показать самую стабильную привычку.
Напоминания
В мобильной версии можно использовать уведомления. В веб-приложении — браузерные уведомления или собственный блок напоминаний.
Главное — не отправлять уведомление «Пора меньше сидеть в телефоне», пока пользователь сидит в телефоне.
Авторизация и сервер
Когда почувствуешь себя увереннее, можно подключить backend:
регистрацию;
вход в аккаунт;
базу данных;
синхронизацию между устройствами;
восстановление пароля.
Так небольшой трекер постепенно превращается в полноценный fullstack-проект.
На каком языке делать?
Трекер привычек можно создать практически на любом языке.
JavaScript
Лучший вариант для первого веб-проекта. Начни с HTML, CSS и чистого JavaScript, а позже перепиши приложение на React или Vue.
Да, переписывать рабочий проект просто ради нового фреймворка — древняя традиция разработчиков.
Python
Можно создать консольную версию или веб-приложение на Flask либо Django.
Консольный вариант особенно хорош, если ты пока изучаешь базовый синтаксис и не хочешь одновременно воевать с CSS.
Flutter
Отличный выбор для мобильного приложения. Ты потренируешь работу с виджетами, состоянием, локальным хранилищем и навигацией.
Главное — не начинать с идеи:
Сейчас быстренько сделаю приложение сразу для Android, iOS, Windows, macOS, холодильника и кофемашины.
Сначала одна платформа. Потом мировое господство.
Как сделать проект достойным портфолио?
Просто написать код недостаточно. Нужно нормально представить результат.
Добавь в репозиторий:
понятное название;
описание проекта;
список возможностей;
скриншоты интерфейса;
инструкции по запуску;
информацию об используемых технологиях;
ссылку на опубликованную версию.
Вместо:
My first project. Please do not judge.
Лучше написать:
Веб-приложение для создания и отслеживания ежедневных привычек. Поддерживает локальное сохранение, серии выполнения, фильтрацию и статистику активности.
Даже простой проект выглядит серьёзнее, когда он аккуратно оформлен.
Учись на практике вместе с Кодиком 💙
В приложении Кодик можно изучать программирование не только по теории, но и через упражнения и реальные проекты. Ты пишешь код самостоятельно, сразу проверяешь результат и постепенно переходишь от простых задач к полноценным приложениям.
Так знания не остаются в формате:
Я это где-то видел в уроке.
Они превращаются в навык:
Я уже делал это сам и примерно понимаю, почему оно снова не работает.
А в нашем Telegram-сообществе выходят полезные посты, разборы терминов, советы для новичков и небольшие материалы для повторения. Это удобный способ оставаться в теме даже тогда, когда нет времени открывать большой урок.
Главное — довести проект до конца!
Трекер привычек не обязан быть уникальным.
Не нужно придумывать функцию, которой ещё никогда не существовало. Ценность первого проекта не в революционной идее, а в том, что ты самостоятельно проходишь весь путь:
придумываешь структуру;
создаёшь интерфейс;
работаешь с данными;
исправляешь ошибки;
сохраняешь состояние;
публикуешь результат.
Именно законченный простой проект даёт больше опыта, чем десять невероятно амбициозных приложений, которые существуют только в папке new-project.
Начни с трёх функций. Добавь сохранение. Улучши дизайн. Опубликуй приложение.
А потом обязательно внеси в трекер новую привычку:
Каждый день писать код хотя бы 20 минут.
Потому что самый полезный трекер привычек — тот, который помогает тебе стать разработчиком. 🚀