Auxilium: приложение полного стека
После месяцев обучения и практики пришло время самому создать полноценный веб-сайт. Прежде чем я начал изучать программную инженерию, я учил детей математике. Кроме того, во время учебы я заметил, что мои одноклассники нуждаются в помощи. Я воспринял это как отправную точку и решил создать сайт, на котором студенты могут назначать встречи с учителями; индивидуальные занятия. Auxilium на латыни означает «помощь», и это хорошее название для этого проекта. Этот проект длился одну неделю. Давайте применим дизайн MVC (модель-представление-контроллер) и начнем с M и C.
Во-первых, это студенты и учителя. Но каковы их отношения и есть ли у них отношения с другими? Учащиеся и учителя находятся в отношениях по договорённостям с дополнительным атрибутом времени. У учеников может быть много учителей, а у учителей может быть много учеников. Это таблица транзитивного соединения. У учителя может быть много свободного времени. Что касается данных, у нас есть учителя, ученики, время, все объединено по предварительной записи.
Диаграмма отношений сущностей
Думая о передней части, я знал, что она не требует многого. Все, что для этого требовалось, - это верхний колонтитул, нижний колонтитул, логин, регистрация, профиль, обновление профиля, список учителей и компоненты встреч.
Каркас
Начинаем писать код
Наконец-то я могу начать кодировать и столкнуться с множеством препятствий. Это приложение запускается Ruby on Rails для внутреннего интерфейса и React для внешнего интерфейса. Как я понял из своего предыдущего опыта, сначала поработайте над серверной частью.
«Вы должны построить фундамент, прежде чем класть кирпичи» - Мик Рот
Я начал собирать столы. Это было относительно просто. После того, как вы установите маршруты, вы можете соответствующим образом построить свои контроллеры. Однако, если у вас есть определенные маршруты, кодирование контроллеров может быть сложным. Поскольку существует два типа пользователей, учителя и студенты, каждому из этих типов требовалась отдельная аутентификация. Это позволяет каждому типу пользователей иметь разные привилегии во время взаимодействия с приложением. Когда пользователь регистрируется, к его учетной записи будет прикреплен сгенерированный токен аутентификации. Когда один и тот же пользователь входит в систему, его пароль генерирует тот же токен и проверяет, совпадают ли токен и имя пользователя с тем, что связано с его учетной записью. На этом этапе пользователь может зарегистрироваться и создать новую учетную запись, а также увидеть свою учетную запись. Чтобы отобразить определенные элементы в зависимости от типа пользователя, я должен выполнить условный рендеринг с помощью тернарных операторов. Как только CRUD учителя и ученика был закончен, я наконец смог отрендерить его во внешний интерфейс. У разных пользователей схожая страница входа и регистрации, поэтому им требуется имя пользователя и пароль. Каждый учитель может публиковать свое время, и каждый ученик может выбрать это время для встречи. Учителя относятся ко времени как один ко многим. Кроме того, у студентов и учителей есть транзитивная таблица соединений, в которой есть дополнительный атрибут; время. В конце третьего дня back-end был готов.
После набора таблиц я могу подключить его к интерфейсу с помощью React. Я сделал файл api-helper; здесь будут размещены все вызовы серверной части. Эти функции аналогичны CRUD, реализованным в контроллерах в рельсах. Им просто нужны заранее настроенные маршруты. Каждая таблица имеет полный CRUD, поэтому каждая таблица должна иметь от четырех до пяти функций в api-helper. Пятая функция обычно предназначена для чтения одного или всех столбцов в таблице. Затем эти функции можно импортировать в приложение или в любой компонент. Это то, что связывает вместе заднюю и переднюю части.
Компоненты были собраны, как показано на изображении. Однако я понял, что все должно быть в приложении. Это сделано для того, чтобы легко передать состояние дочерним компонентам в качестве опоры. Основной компонент был утилизирован. Каждая форма имеет функции handleChange и handleSubmit. HandleChange необходим, чтобы пользователь мог видеть вводимые данные во время ввода. HandleSubmit необходим для того, чтобы пользователь отправлял свою форму и чтобы к ней применялись соответствующие функции. По сути, каждая функция из api-helper - это функция в app. Вся информация, выводимая на интерфейсную часть, была получена по запросам. К шестому дню завершили фронтенд. А на седьмой день оставшуюся работу выделила на укладку. Позже этот проект был развернут на heroku (back-end) и увеличился (front-end). Heroku перейдет в режим сна, если его не использовать часто. В результате пользователи не могут сразу войти в систему или зарегистрироваться. В заключение, мне понравились все аспекты этого проекта, и он бросил мне вызов. Если человек может создать приложение с полным стеком за неделю, он определенно сможет сделать больше за месяц.
Вот сайт: auxilium.surge.sh
Github: https://github.com/aaronkim662/Auxilium
А если захотите подключиться: https://www.linkedin.com/in/aaronkim662/
