DEV Community

Cover image for Мой TodoList :)
Islam Ibrakhimzhanov
Islam Ibrakhimzhanov

Posted on

Мой TodoList :)

Готовый продукт: TodoList

Планирование

Первоначальное планирование этого проекта было несколько простым из-за его низкой сложности.

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

  1. Как пользователь, я хочу иметь возможность создавать новый элемент списка дел
  2. Как пользователь, я хочу иметь возможность отмечать завершенные элементы.
  3. Как пользователь, я хочу иметь возможность удалять элементы, чтобы удалять нежелательные или ошибочные задачи.
  4. Как пользователь, я хочу видеть все элементы списка дел, которые я добавил, даже если я перезагружу страницу. Теперь определимся с функциями Основываясь на ранее определенных пользовательских историях, я приступил к определению функций, которые будет реализовывать приложение To-Do:
    • Получение задач из сервера
    • Получение пользователей из сервера
    • Отрисовать задачи на странице
    • Добавить пользователей в выпадающий список
    • Логика добавления, удаления, изменения
    • Завершение дел
    • Обработка ошибок
    • Хранение дел на устройстве пользователя.

Визуализация: создание блок-схемы

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

Image description

Постановка задач на канбан-доске в Notion

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

Я использовал Notion для создания доски Kanban, но мог бы выбрать Asana или Trello . Я выбрал Notion, потому что хотел научиться им пользоваться, а бесплатная версия показала несколько многообещающих функций.

Стоит отметить, что я также включил рабочий процесс проекта в доску Канбан, чтобы я мог отслеживать все необходимые действия для завершения проекта, от начального этапа планирования до окончательного развертывания.

Я начал с ввода всех задач, связанных с проектом.

Image description

Все задачи были помещены в колонку «Нужно сделать», что сделало их доступными для начала работы над ними.

Во время проекта канбан-доска была полезна для отслеживания того, что нужно сделать. Это снимок того, как это выглядело во время проекта:

Image description

Дизайн
Я не эксперт по дизайну, и мое основное внимание в этом проекте было сосредоточено на кодовой стороне приложения. При этом я сделал все возможное, чтобы дизайнеры дали мне, простой и понятный для пользователя макет.

Основы кодирования: HTML, CSS и JavaScript

Начальная точка: HTML
Как только у меня появилось четкое представление о том, что мне нужно сделать, я начал работать над HTML, определив семантические элементы, которые я собирался использовать, и классы, которые мне, скорее всего, понадобятся.

Тем кому интересно можете взглянуть на -> github

Преступаем работу с CSS

Поскольку у приложения были простое вид дизайна я потратил мало времени на работу с CSS. Но так между нами признаюсь, что мне CSS сложнее, чем JavaScript😊

Использование JavaScript, чтобы воплотить все в жизнь
Я решил разделить на некие категории свои функции, так будет проще ориентироваться в своем коде.

1- Асинхронные логики
2- Привязка событии
3- Логика для события
4- Глобальные переменные
5- Базовая логика

Давайте познакомимся с некоторыми из них поверхностно, чтобы проявить свет:

1 – Асинхронная логика
Image description

5- Базовая логика
Image description

Тестирование приложения и просьба оставить отзыв

В процессе сборки я постоянно тестировал поведение приложения. Это привело к ряду изменений в коде HTML и CSS.
Я бы хотел вас попросить протестировать приложение, и предложить, если будут какие-то пожелания или улучшения работы приложения.

Я использовал Git, чтобы отслеживать изменения в проекте и иметь возможность публиковать его на GitHub, чтобы делиться им с другими.

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

Проект закончен опыт получен)

Благодаря этому проекту я смог почувствовать, сколько работы требует приложение, подобное этому.

Я узнал о важности осмысленной семантической структуры HTML и о том, как хорошая структура HTML может облегчить нашу жизнь, когда мы начинаем работать с CSS и JavaScript на более поздних этапах проекта.

Я недооценил CSS 😅. Названия классов немного смешные и запутанные, так что в будущем попробую реализовать нотацию БЭМ и, возможно, SASS .

Я обнаружил, что некоторое поведение, о котором первоначально
думали, было в области JavaScript, может быть легко реализовано с помощью CSS, например анимация элементов.

Как всегда, я открыт для любых ваших предложений

Discussion (0)