В этой статье я поделюсь своим опытом разработки приложения стека MERN.

Начало

Нам дали указание создать «инструмент управления исследованиями» для нашего университета. Нам было поручено создать это приложение с использованием MongoDB, Express, React Js, Node Js (стек MERN). Это был групповой проект из четырех человек. Было четыре основных действующих лица: студент, администратор, супервайзер, член комиссии.

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

Затем мы разделили проект между участниками группы. Моя часть заключалась в создании членов панели. Обновляйте и удаляйте их профили и просматривайте списки всех пользователей, а также вносите изменения и удаления. Итак, моя часть должна была реализовать все операции CRUD.

Обучение

У нас не было предыдущего опыта реализации веб-приложений с использованием MERN. Мы также были новичками в базах данных без SQL. Итак, мы решили изучить вышеуказанные технологии. Мы посетили лекции в университете и лабораторные занятия, просмотрели несколько видеороликов на YouTube и прошли курсы на платформе Sololearn. Мы также ссылались на документацию по вышеуказанным технологиям. Документация сыграла важную роль и помогла нам решить многие проблемы при внедрении приложения.

Создание решения

Сначала мы создали репозиторий git hub и базу данных, используя атлас MongoDB. Я реализовал конфигурации внутреннего сервера и конфигурации MongoDB и отправил их в репозиторий GitHub. Затем другие участники клонировали репозиторий и сделали свои реализации.

Сначала я реализовал бэкэнд. Я создал отдельные каталоги для хранения схем баз данных, API и контроллеров. Я проверил свои API с помощью postman.

Большую часть времени мы ссылались на учебник, в котором объясняется реакция 17. Но когда мы реализовывали наше приложение, мы использовали React 18. Поэтому нам пришлось изучать новые функции реакции и соответствующим образом создавать наше приложение. Самой неприятной ошибкой, которую мы получили, была ошибка политики COR, которая заключалась в том, что в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Когда я получаю ошибки, я всегда ищу эти ошибки в переполнении стека. Но решения для вышеуказанной ошибки не исправили ошибку в нашем приложении. Я провел несколько часов, просматривая и ища решения этой ошибки. Наконец, я нашел это. Нам нужно использовать cors перед использованием любого другого промежуточного программного обеспечения в приложении.

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

Нажмите здесь, чтобы посетить репозиторий GitHub.