Как спланировать приложение полного стека
Привет! Я вернулся с очередной статьей о веб-разработке. В этой статье я хотел быстро рассказать о том, как вы можете приступить к планированию своего следующего приложения с полным стеком. Я хотел убедиться, что то, что я сказал, не является только моим мнением, поэтому я поговорил со многими разработчиками, чтобы найти золотую середину и поделиться как можно большим.
В этой статье я предполагаю, что у вас есть некоторые базовые знания о том, как работают приложения с полным стеком, но вы не обязательно создали полноценный веб-сайт электронной коммерции самостоятельно.
Карта вашего проекта
Постарайтесь спланировать как можно больше того, как будет выглядеть ваш конечный продукт. Это включает в себя такие вещи, как структура базы данных, отношения между таблицами, конечные точки API, функциональность внешнего интерфейса, компоненты и т. д. Если это означает буквально взять ручку и бумагу и физически нарисовать схему вашего проекта, тогда сделайте это. Это может показаться бесполезным, но это может быть чрезвычайно полезно и впоследствии уменьшит нежелательное поведение, что приведет к чистой и лаконичной логике вашего приложения.
Создайте базу данных
Начните с создания базы данных. Обычно это хорошая идея, чтобы понять, как ваши данные будут проходить через проект, какие отношения «один-ко-многим» или «многие-ко-многим» вам понадобятся, какие строки вам нужны. которые могут понадобиться в ваших таблицах, и как вы планируете извлекать данные наиболее эффективным способом.
Создайте свои основные конечные точки API
После того, как вы хорошо разберетесь и поймете свою базу данных, начните работать над логикой вашего бэкэнда. Создайте основные конечные точки API для взаимодействия с внешним интерфейсом, спроектируйте правильные SQL-запросы или, если вы используете ORM, обязательно оптимизируйте его производительность, создайте систему аутентификации, если она вам нужна. Выполните все необходимые проверки и обязательно протестируйте все, что вы делаете, с помощью вашего любимого инструмента тестирования API.
Создайте скелет вашего сайта
Начните разрабатывать макет вашего сайта без CSS. Создайте необходимые HTML-страницы, если вы собираетесь использовать базовые шаблоны HTML, или создайте необходимые компоненты для вашего проекта React или Angular (или любого другого фреймворка, использующего компоненты), создайте соответствующую маршрутизацию. Создайте скелет того, как вы хотите, чтобы ваши страницы выглядели, и после того, как у вас есть несколько основных шаблонов, начните стилизовать свой проект.
Стиль это
Теперь пришло время выбрать, что вы хотите использовать для стиля вашего проекта. Это может быть простой CSS, SASS, Bootstrap, Tailwind, материал пользовательского интерфейса и т. д. Самая важная часть — сделать дизайн максимально удобным для пользователя и обеспечить его отзывчивость.
Наделите его всем необходимым функционалом
Теперь пришло время сделать ваш сайт функциональным. Помните всю внутреннюю работу, которую мы сделали? Время использовать его. Сделайте соответствующие запросы для работы с данными из бэкенда, сделайте кнопки/вводы/формы вашего сайта функциональными и т.д.
Тестируйте все
Конечно, последнее, но не менее важное: обязательно протестируйте все, что вы планировали сделать на своем веб-сайте, чтобы убедиться, что у вас нет ошибок или какого-либо нежелательного поведения. Также не забывайте, что вы должны тестировать свой проект на каждом этапе разработки, а не только в конце.
Надеюсь, вам понравилось читать эту статью!
Если у вас есть время, подпишитесь на меня в Twitter и Medium! Спасибо!
twitter.com/davidhayrapet
