Всем привет ☺!

Прежде всего, спасибо всем тем, кто прочитал и поддержал первую статью этой серии. Поскольку это моя первая статья, связанная с разработчиками, я ожидаю, что получу только 2–3 просмотра. Но, о боже, я был очень удивлен, что статья получает гораздо больше трафика, чем это.

Кроме того, я хотел бы отметить, что моя цель в этих статьях — показать больше об общем потоке моей разработки и меньше о частностях (например, конкретном коде, конкретных функциях и т. д.). Это потому, что я думаю, что о них уже есть много ресурсов. Если вы введете в Google запрос «аутентификация в Node.js», вам сразу же будут представлены блестящие руководства. Таким образом, чего я хочу добиться здесь, так это показать, как эти особенности сочетаются друг с другом, чтобы у вас было представление о том, какую конкретную концепцию вам нужно искать в Google.

Итак, без лишних слов, начнем.

Фронтенд и Бэкэнд

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

Что ж, термин «стек» часто используется для обозначения набора технологий, которые использует приложение. Чтобы упростить все, просто представьте, что типичное приложение разделено на две основные части. Первый — это компонент, необходимый для управления состоянием приложения, а второй — для представления состояния пользователям. Их часто называют внутренним и внешним интерфейсом или клиентом и сервером.

Аналогией может быть ресторан. Думайте о столовой как о клиентской стороне, а о кухне как о серверной. Обеденная зона - это место, где клиенты занимаются своей основной ресторанной деятельностью. В то время как кухня - это место, где их заказы готовятся и организуются.

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

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

Мой стек приложений

Для этого конкретного проекта я намерен использовать стек M.E.A.N (MongoDB, Express, Angular и Node.js).

  • MongoDB для базы данных. Здесь будут храниться основные данные, такие как коллекции пользователей, проектов и моментальных снимков. Ну, вы можете разместить свою собственную базу данных MongoDB, но есть также облачные сервисы, где вы можете использовать бесплатные общие кластеры MongoDB, такие как MongoDB Atlas. Если вам не нравится MongoDB, существует множество альтернативных баз данных, таких как базы данных MySQL, Redis и т. д. Если вы хотите узнать больше о том, какая база данных подходит для вашего варианта использования, вы можете посмотреть это короткое видео от Fireship .ио.
  • Node.js в качестве среды выполнения. Это основная среда выполнения, в которой будет выполняться серверное приложение. Я пришел из мира JavaScript, поэтому мне проще создавать приложения с помощью Node.js. Другие альтернативы включают Python и Apache. Подобно базе данных, вы можете разместить ее на своем компьютере или виртуальной машине, но уже существуют облачные сервисы, такие как Heroku, где вы можете бесплатно развернуть свой серверный код.
  • Express для контроллеров API. Express — мой основной инструмент при разработке на Node.js. Я думаю, это самая простая и легкая библиотека API, которую я знаю. Если вы разрабатываете в другом стеке, есть также библиотеки, которые помогут вам быстро настроить контроллеры API, такие как Flask для Python или Laravel для PHP.
  • Angular для пользовательского интерфейса. Angular — это то, с чем я больше всего знаком, и именно поэтому я решил использовать его для своего приложения. Возможные альтернативы Angular включают React и Vue. Ну, если честно, здесь есть много вариантов, поэтому я выбрал тот, с которым я наиболее знаком. Что касается хостинга, то существует множество провайдеров, но мне нравится развертывать свой пользовательский интерфейс с помощью Netlify.

Прогресс

Что касается текущего прогресса моего приложения, то к тому времени, когда я пишу этот черновик, я только что закончил полную интеграцию страницы «Регистрация». Вот несколько скриншотов.

Процесс регистрации проходит через все уровни стека. После нажатия кнопки Angular проверит правильность входных данных, а затем отправит запрос на URL-адрес нашего сервера Node.JS. Как только запрос достигнет сервера, Express выполнит проверку ввода, а затем выдаст инструкцию для базы данных для создания новой записи пользователя. Как только база данных успешно создаст модель, она вернет сообщение с подтверждением в Express, а Express передаст его с ответом «успех» обратно в Angular. Ну наконец то. Angular обновит пользовательский интерфейс, чтобы сделать его презентабельным для глаз пользователей.

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

Если вам интересно узнать, что будет с этим приложением, вы можете подписаться на меня в Twitter (https://twitter.com/justfizzbuzz) или в Indiehackers (https://www.indiehackers.com/justfizzbuzz)

На этом все, желаю вам отличной недели 😊!

Удачного взлома!