Готовый продукт: TodoList
Планирование
Первоначальное планирование этого проекта было несколько простым из-за его низкой сложности.
Я начал с того, что поставил себя на место пользователей и, таким образом, смог написать следующие пользовательские истории :
- Как пользователь, я хочу иметь возможность создавать новый элемент списка дел
- Как пользователь, я хочу иметь возможность отмечать завершенные элементы.
- Как пользователь, я хочу иметь возможность удалять элементы, чтобы удалять нежелательные или ошибочные задачи.
- Как пользователь, я хочу видеть все элементы списка дел, которые я добавил, даже если я перезагружу страницу.
Теперь определимся с функциями
Основываясь на ранее определенных пользовательских историях, я приступил к определению функций, которые будет реализовывать приложение To-Do:
- Получение задач из сервера
- Получение пользователей из сервера
- Отрисовать задачи на странице
- Добавить пользователей в выпадающий список
- Логика добавления, удаления, изменения
- Завершение дел
- Обработка ошибок
- Хранение дел на устройстве пользователя.
Визуализация: создание блок-схемы
Записать все функции — это здорово, но я обнаружил, что обычно просмотр графического представления функций проливает больше света на то, как должно вести себя приложение. Вот почему я построил следующую блок-схему.
Постановка задач на канбан-доске в Notion
Я решил использовать фреймворк для решения определенных функций и начать работать над ними. В этом случае я решил использовать доску Канбан, немножко изменил его для себя, потому что проект довольно прост, и потому что у меня есть опыт управления проектами на доске этого типа. Я мог бы использовать Agile-фреймворк, но у меня нет с ним опыта.
Я использовал Notion для создания доски Kanban, но мог бы выбрать Asana или Trello . Я выбрал Notion, потому что хотел научиться им пользоваться, а бесплатная версия показала несколько многообещающих функций.
Стоит отметить, что я также включил рабочий процесс проекта в доску Канбан, чтобы я мог отслеживать все необходимые действия для завершения проекта, от начального этапа планирования до окончательного развертывания.
Я начал с ввода всех задач, связанных с проектом.
Все задачи были помещены в колонку «Нужно сделать», что сделало их доступными для начала работы над ними.
Во время проекта канбан-доска была полезна для отслеживания того, что нужно сделать. Это снимок того, как это выглядело во время проекта:
Дизайн
Я не эксперт по дизайну, и мое основное внимание в этом проекте было сосредоточено на кодовой стороне приложения. При этом я сделал все возможное, чтобы дизайнеры дали мне, простой и понятный для пользователя макет.
Основы кодирования: HTML, CSS и JavaScript
Начальная точка: HTML
Как только у меня появилось четкое представление о том, что мне нужно сделать, я начал работать над HTML, определив семантические элементы, которые я собирался использовать, и классы, которые мне, скорее всего, понадобятся.
Тем кому интересно можете взглянуть на -> github
Преступаем работу с CSS
Поскольку у приложения были простое вид дизайна я потратил мало времени на работу с CSS. Но так между нами признаюсь, что мне CSS сложнее, чем JavaScript😊
Использование JavaScript, чтобы воплотить все в жизнь
Я решил разделить на некие категории свои функции, так будет проще ориентироваться в своем коде.
1- Асинхронные логики
2- Привязка событии
3- Логика для события
4- Глобальные переменные
5- Базовая логика
Давайте познакомимся с некоторыми из них поверхностно, чтобы проявить свет:
1 – Асинхронная логика
5- Базовая логика
Тестирование приложения и просьба оставить отзыв
В процессе сборки я постоянно тестировал поведение приложения. Это привело к ряду изменений в коде HTML и CSS.
Я бы хотел вас попросить протестировать приложение, и предложить, если будут какие-то пожелания или улучшения работы приложения.
Я использовал Git, чтобы отслеживать изменения в проекте и иметь возможность публиковать его на GitHub, чтобы делиться им с другими.
В этот раз я использовал страницы GitHub для развертывания и публикации проекта из-за его простоты и образовательных целей, но я мог бы использовать бесплатный хостинги аналоги или свой собственный хостинг .
Проект закончен опыт получен)
Благодаря этому проекту я смог почувствовать, сколько работы требует приложение, подобное этому.
Я узнал о важности осмысленной семантической структуры HTML и о том, как хорошая структура HTML может облегчить нашу жизнь, когда мы начинаем работать с CSS и JavaScript на более поздних этапах проекта.
Я недооценил CSS 😅. Названия классов немного смешные и запутанные, так что в будущем попробую реализовать нотацию БЭМ и, возможно, SASS .
Я обнаружил, что некоторое поведение, о котором первоначально
думали, было в области JavaScript, может быть легко реализовано с помощью CSS, например анимация элементов.
Как всегда, я открыт для любых ваших предложений
Top comments (0)