Симулятор разработки: приложение для заметок (часть 1)
Раньше я считала, что для создания небольших приложений не особо важно структурировать этапы разработки, но после длительного времени работы над огромными проектами, когда без формальностей и планирования всех шагов не обойтись, я изменила свое мнение.
Именно поэтому, для тех у кого еще нет опыта работы над большими проектами, я решила запустить новый вид циклов статей "Симулятор разработки", чтобы вы могли с головой погрузиться в эту историю!
И так, первым проектом в данной области будут банальные заметки, но на примере такого простого приложения мы с вами посмотрим не только на то, как это приложение запрогать и какие технологии использовать, но и на следующие штуки:
Если вам не терпится все же узнать технологии, которые вы в последствии сможете попрактиковать, то вот с чем тут придется поработать:
Формализуем требования
Крайне важно понять что клиент хочет от приложения и сделать это, желательно, в самом начале, чтобы потом не пришлось ничего глобально переделывать.
Поэтому для начала мы с вами формализуем требования к нашему приложению.
Если подумать, то для в случае заметок, скорее всего, от заказчика мы бы получили примерно следующую формулировку:
Необходимо создать приложение Заметки с помощью Reactjs и технологий браузеров. Важно, чтобы можно было создавать заметки через markdown и просматривать их в преобразованном виде.
Но тут надо покопать глубже, для этого, давайте зададим себе несколько уточняющих вопросов, вот первые, которые пришли в голову:
- Как должно происходить сохранение заметки
- Открывается ли при клике на заметку сразу режим редактирования или просто отображения?
- Можно ли удалять заметки? Выводим предупреждения?
С учетом того, что сейчас мы сами себе заказчики, то ответив на эти вопросы требования уже звучат куда более точно, согласитесь:
Необходимо создать приложение Заметки с помощью Reactjs и технологий браузеров.
Возможные действия с заметками:
- Создать (нажимаем на кнопку создать, открывается markdown редактор на ввод)
- Редактировать (чтобы редактировать заметку нужно открыть нужную заметку и нажать на отдельную кнопку для редактирования)
- Удалить (чтобы удалить заметку нужно открыть нужную заметку и нажать на отдельную кнопку для удаления, после чего нужна остерегающая модалка)
Сохранение изменений в заметке должно происходить автоматически с внесением этих изменений.
Составим план
Когда вы первый раз попадаете в команду, которая что-то разрабатывает может быть непривычно, что все ведут какие-то задачи и куда-то их записывают, для нашего проекта я буду делать тоже самое, чтобы вы уже сейчас начинали к этому привыкать.
На данном этапе можно представить нашу доску примерно вот так:
Я составляю подобные доску в Notion, но в целом можно и в любом другом инструменте, например, Trello.
Если вы хотите тоже делать это в Notion, то можете скопировать себе мой шаблон и использовать!
Как видите тут еще нет задач на разработку, но нам уже есть что делать дальше, поэтому не будем останавливаться.
Прототип внешнего вида
Итак, нам надо определиться как примерно будет выглядеть наше приложение, если пробежаться по формализованным требованиям, то выходит, что приложение состоит из сайдбара, области для просмотра/редактирования заметки, поиска по заметкам и кнопкам создать / редактировать / удалить.
На словах понять что где сложно, поэтому я быстро набросала примерный макет:
Вроде все основные элементы тут есть, еще осталось разве что модальное окно, которое мы будем показывать при клике на удаление, чтобы подтвердить действие, но думаю его рисовать не будем.
Если что, то вот какой элемент чем является:
Базовая архитектура
Я тут не буду говорить про структуру папок и именование переменных, я хочу обсудить структуру приложения в целом.
Чтобы не устраивать ад пропсов (а что если я хочу?) у нас в приложении мы будем использовать React Context, значит у нас будет что-то вроде основного компонента, который создает нам всю истину общаясь с бд и генерируя нужные колбеки, назовем его, возможно, банально, но App.
Для наглядности буду приводить картинки
Дальше уже в этом контексте у нас будут существовать другие компоненты, некоторые из них будут "глупыми компонентами", которые умеют работать только со своими пропсами и ни с чем больше, а другие же поумнее и будут ходить в контекст за нужной информацией.
Не буду углубляться в детали, нам сейчас это не нужно, и приведу следующую картинку, которая сделает наш дальнейший план разработки немного более понятным (желтые - компоненты, которые умеют что-то делать с контексом):
И так, после проделанной работы наша доска проекта выглядит примерно вот так
На этой стадии проекта мы сегодня закончим, в следующий раз создадим каркас и разберемся в какой последовательности нам с вами дальше предстоит выполнять работу!
Если вам интересен такой формат разора работы над проектом, то очень жду ваших реакций и комментариев!
🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!